html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: transparent !important;
  
  user-select: none;
}
#buttonGroup > button {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.toast {
  background-color: rgba(52, 58, 64, 0.85) !important;
  z-index: 9999 !important;
}
.toastHeader {
  background-color: rgb(52, 58, 64);
}
.toast-distance {
  color:#999;
  font-size:80%;

  margin-bottom:0.2rem;
}
#largeDispatchContainer {
  position: absolute;
  height: 100%;
}
#imageDay,
#imageNight {
  display: none;
}

.icons {
  display: none;
}
.list-group {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0.25rem !important;
}

.jumbotron {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-height: 90%;
}
.scrollbar::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: #f5f5f5;

  border-bottom-right-radius: .3rem;
}

.scrollbar::-webkit-scrollbar {
  width: 8px;
  background-color: #f5f5f5;
}

.scrollbar::-webkit-scrollbar-thumb {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: #999;
}
#playerRadio {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0.25rem !important;
}
#toastContainer {
  position: absolute;
  z-index: 1 !important;
  cursor: move;
  width: 15%;
  left: 1px;
  top: 50%;
  transform: translateY(calc(-50% - 0.5px)) !important;
  -webkit-transform: translateZ(0) !important;
  transform: translateZ(0) !important;
}
.jumbotron {
  z-index: -1 !important;
}
.row {
  overflow: hidden;
}
.dropdown-item:hover {
  background-color: rgba(52, 58, 64, 1) !important;
}
#mapCol {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
#dispatchLarge {
  width: 20%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 10 !important;

  height:100%;
}
.bg-dark-cd{
  background-color: rgba(52,58,64,0.9)!important;
}
#radioChannels {
  width: 20%;
  position: absolute;
  right: 0;
  top: 0;
  /* overflow-y: auto !important; */
  border: none !important;

  height: 100%;
  margin-top: 1rem;
  margin-right: 1rem;
}
#radioFieldsContainer {
  height:100%;
}
#radioFields{
  max-height: 90%;
  overflow-y: auto;
}
#radioChannels:last-child {
  border-bottom-left-radius: .3rem;
  border-bottom-right-radius: .3rem;
}
#radioChannelsHeader {
  background-color: #212529 !important;
  border: none !important;
}
.tab {
  display: none;
}
.radio-item-main:hover {
  cursor: pointer;
}
#mainRow {
  opacity: 0;
}
#radioChannels {
  opacity: 0;
}
.bg-gray-dark {
  background-color: #212529 !important;
}

#modeChange {
  border-bottom-left-radius: 0.15rem !important;
  border-bottom-right-radius: 0.15rem !important;
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  display: none;
}
#loadingCircle {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
}
#refreshBar {
  position: absolute;
  top: 2%;
  left: 50%;
  transform: translateX(-50%);
  width: 30%;
  z-index: 1000 !important;

  transition: 2s ease !important;
}
#refreshBar > .card {
  background-color: rgba(33, 37, 41, 0.8) !important;
}
#refreshButtonLoader {
  display: none;
}
#showRefreshBar {
  display: none;
}
#playerInfoBar {
  display: none;
}
#timeText {
  position: absolute;
  width: 100%;
}
.alertGradient {
  background: linear-gradient(90deg, #343a40, 70%, #dc3545) !important;
  border-left: 0 !important;
}
.alertGradient:hover {
  background: linear-gradient(90deg, #343a40, 50%, #dc3545) !important;
  border-left: 0 !important;
}
#message {
  overflow-wrap: break-word;
}
#mapinfo {
  position: absolute;
  right: 1rem;
  bottom: 1rem;

  color: #fff;
}
#dispatchInfo {
  margin-top: 1rem;
  margin-left: 1rem;

  padding: 0.75rem 1.25rem;
  border-top-left-radius: 0.5rem !important;
  border-top-right-radius: 0.5rem !important;

  color: white;

  font-size: 80%;
  font-weight: 400;

  background-color: #212529 !important;
}
#dispatchGroup {
  padding-left: 1rem;
  border-radius: 0;

  max-height: 90%;
  overflow: auto;

}
#dispatchGroup:first-child {
  border-top-left-radius: 0px !important;
  border-top-right-radius: 0px !important;
  border-top: 0 !important;
}
#dispatchGroup:last-child {
  border-bottom-left-radius: 0.5rem !important;
}

/* Unit list*/
.unit-group{
  width:100%;
  
  background-color: rgba(33, 37, 41, 0.8) !important;

  color:white;
  
  padding: 0.75rem 1.25rem;

  border-bottom:1px solid rgba(0,0,0,0.1);
}
.on-call{
  background: repeating-linear-gradient(
    45deg,
    rgba(56, 56, 56, 0.8),
    rgba(56, 56, 56, 0.8) 10px,
    rgba(33, 37, 41, 0.8) 10px,
    rgba(33, 37, 41, 0.8) 20px
  );
}
.on-call:nth-child(2){
  background: repeating-linear-gradient(
    135deg,
    rgba(56, 56, 56, 0.8),
    rgba(56, 56, 56, 0.8) 10px,
    rgba(33, 37, 41, 0.8) 10px,
    rgba(33, 37, 41, 0.8) 20px
  );
}
.unit-group-hover {
  box-sizing: border-box;
}
.unit-group-hover:hover{
  cursor:url(../images/drag.png), pointer!important;
}
.unit-group:last-of-type{
  border-bottom-left-radius: .3rem;
  border-bottom-right-radius: .3rem;
}
.unit{
  box-sizing: border-box;
  background-color:rgba(56, 56, 56, 1);
  padding:0.75rem 1.25rem;
}
.unit:hover{
  cursor:url(../images/drag.png), pointer!important;
}
.unit:first-child{
  border-top-left-radius: .3rem;
  border-top-right-radius: .3rem;
}
.unit:last-child{
  border-bottom-left-radius: .3rem;
  border-bottom-right-radius: .3rem;
}
.unit-group-create{
  background-color:rgba(0, 123, 255, 0.8)!important;
  padding:0.3rem 0.75rem !important;

  border-bottom-left-radius: .3rem!important;
  border-bottom-right-radius: .3rem!important;
}
.unit-group-create::after{
  content:"Drag here to create a new group"
}
.unit-dragging{
  background-color:rgb(24, 24, 24);
}
.unit-group-over{
  background-color:rgba(0, 123, 255, 0.8)!important;
}
#unit-contextmenu{
  position: absolute;

  top: 100%;
  left: 0;
  z-index: 9999;
  opacity:0;
  min-width: 10rem;
  padding: .5rem 0;
  margin: .125rem 0 0;
  font-size: 1rem;

  color: #212529;

  text-align: left;
  list-style: none;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid rgba(0,0,0,.15);
  border-radius: .25rem;
}

.ucm-item, .ucm-item-disabled{
display: block;
width: 100%;
padding: .25rem 1.5rem;
clear: both;
font-weight: 400;
color: #212529;
text-align: inherit;
white-space: nowrap;
background-color: transparent;
border: 0;
}
.ucm-item:hover{
  background-color: rgba(52, 58, 64, 1) !important;
}
.ucm-item-disabled{
  color: #212529;
}
.unit-infopanel{
  background-color: #212529;
  width:10%;
  max-width:100px;

  padding:0.3rem;

  font-size:80%;

  border-top-right-radius: .3rem;
  border-top-left-radius: .3rem;

  text-align: center;
}

.circle{
  border-radius: 50%;
  width:16px;
  height:16px;

  font-size:8px;
  background-color:#212529;
}


.circle-active{
  border:2px solid #28a745;
}

.unit-group.unit-group-hover:before {
  content: ".. .. .. ..";
  position: absolute;
  left: 0.3rem;
  width: 10px;
  line-height: 8px;
  font-size: 1.5rem;
  color: rgba(255,255,255,0.1);
}

.hide {
  display:none;
}

.cd-show{
  display:block!important;
}

@media screen and (min-width: 2560px){
  #dispatchLarge {
    font-size:1.5rem;
  }
  #radioChannels {
    font-size:1.5rem;
  }
  #mapCol {
    font-size:1.5rem;
  }
  #settingsModal {
    font-size:1.5rem;
  }

  .modal-dialog {
    min-width: 720px;
  }
}
@media screen and (min-width: 3840px){
  #dispatchLarge {
    font-size:3rem;
  }
  #radioChannels {
    font-size:3rem;
  }
  #mapCol {
    font-size:3rem;
  }
  #settingsModal {
    font-size:3rem;
  }

  .modal-dialog {
    min-width: 1280px;
  }
  .btn {
    font-size:4rem;
  }
  .btn-sm {
    font-size:2rem!important;
  }
}
@media screen and (min-width: 7680px){
  #dispatchLarge {
    font-size:5rem;
  }
  #radioChannels {
    font-size:5rem;
  }
  #mapCol {
    font-size:5rem;
  }
  #settingsModal {
    font-size:5rem;
  }

  .modal-dialog {
    min-width: 1920px;
  }
  .btn-sm {
    font-size:3rem!important;
  }
}