body {
  font-family: Calibri, Helvetica, Arial, sans-serif;
  background-color: #f7faff;
  margin-bottom: 30px;
}

/* Extra small devices (portrait phones, less than 576px) */
/* No media query since this is the default in Bootstrap */
html {
  font-size: 1rem;
}

/* Extra Small devices (landscape phones, 576px and down) */
@media (max-width: 575.98px) {
  html {
    font-size: .3rem;
  }
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
  html {
    font-size: .4rem;
  }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
  html {
    font-size: .6rem;
  }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
  html {
    font-size: .85rem;
  }
}

/* Extra large devices (large desktops, 1200px and up)
// (you don't need this one unless you want something different from LG) */
@media (min-width: 1200px) {
  html {
    font-size: .95rem;
  }
}

.offlineSpinner {
  z-index: 99999;
  display: none;
  width: 1.5rem;
  height: 1.5rem;
}

/* Dispatchers Footer Toolbar */
.dispatcherToolbar {
  position: fixed;
  width: 100%;
  height: 30px;
  background: #333;
  bottom: 0;
  margin: auto;
  margin-top: 10px;
  z-index: 50000
}

.dispatcherToolbar .countDispatcherByOperUL {
  margin: 0;
  padding: 0;
  list-style: none
}

.dispatcherToolbar .countDispatcherByOperUL li {
  padding: 0;
  margin-left: 10px;
  margin-right: 5px;
  color: #fefefe;
  display: inline;
  line-height: 30px;
}

/* Deshabilita flechitas en campos numéricos */
input[type=number] {
  -moz-appearance: textfield;
  appearance: textfield;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  margin: 0;
}

/* Cuadrícula con móviles penalizados, deshabilitados y de solo rastreo*/
.statusesMoviles span {
  width: 3rem;
  padding: 2px;
  margin: 1px;
  border: 1px solid #ddd;
  float: left;
  text-align: center
}

/* Agranda el badge que muestra la base */
.input_base {
  font-size: 100%;
}

/* Pone los placeholders de movi + base y penalizado en normal */
#movilNumber::placeholder,
#baseName::placeholder,
#basePos::placeholder,
#movilPNumber::placeholder {
  font-weight: normal;
}

#movilNumber::-ms-input-placeholder,
#baseName::-ms-input-placeholder,
#basePos::-ms-input-placeholder,
#movilPNumber::-ms-input-placeholder {
  font-weight: normal;
}

#movilNumber:-ms-input-placeholder,
#baseName:-ms-input-placeholder,
#basePos:-ms-input-placeholder,
#movilPNumber:-ms-input-placeholder {
  font-weight: normal;
}

/* Hack que alinea verticalmente los íconos FA cuando se configuran con fa-lg */
/*.fa-lg{
  vertical-align: -0.0967rem;
}*/

/* Hack para modificar el tamaño de los modales de moviles e historial */
#moviles .modal-lg {
  max-width: 90%;
}

#detalles .modal-lg {
  max-width: 80%;
}

/* regla para alinear el badget en el listado de direcciones del form de despachos */
span.ratio {
  margin-top: .16rem;
}

/* Altura listado de direcciones en form de carga despacho */
#addressListFormDispatchers {
  max-height: 8rem;
  overflow-y: auto;
}

.despacho_card {
  font-size: 1rem;
}

/* Agranda la fuente dentro de los inputs de la tarjeta de despacho */
.despacho_card input {
  font-size: 1rem;
}

/* Altura obligatoria del mapa en form de carga despacho para renderizarse */
#nav-mapa {
  height: 85% !important
}

/* Altura obligatoria del mapa en modal pagos y taximetro para renderizarse */
#pago-mapa,
#taximetro-mapa,
#statsmovil-mapa {
  height: 27rem !important
}

/* Clase de puntero para aplicar en cualquier lugar con .pointer*/
.pointer {
  cursor: pointer;
}

.cursor-arrow {
  cursor: default;
}

.not-allowed {
  cursor: not-allowed;
}

/* Hack para tablesorter muestre el thead igual que BS4 */
.table.tablesorter-bootstrap tfoot td,
.table.tablesorter-bootstrap tfoot th,
.table.tablesorter-bootstrap thead td,
.table.tablesorter-bootstrap thead th {
  font: 1rem/1.5rem Calibri, Helvetica, Arial, sans-serif;
  font-weight: bold;
  padding: .75rem;
}

.table-sm.tablesorter-bootstrap tfoot td,
.table-sm.tablesorter-bootstrap tfoot th,
.table-sm.tablesorter-bootstrap thead td,
.table-sm.tablesorter-bootstrap thead th {
  font: 1rem/1.5rem Calibri, Helvetica, Arial, sans-serif;
  font-weight: bold;
  padding: .3rem;
}

.tooltip-inner {
  max-width: 20em;
  white-space: nowrap;
  text-align: left;
  white-space: pre-line;
}

.invalid-tooltip,
.valid-tooltip {
  font-size: 1rem;
}

/* Tooltip leaflet transparente como label */
.base-label,
.zona-label {
  /* background: rgba(255, 255, 255, 0); */
  /* background-color: #555555; */
  background-color: transparent;
  border: transparent;
  box-shadow: none;
  font-size: 1rem;
  font-weight: bold;
  color: white;
}

.despacho-base-label {
  /* background: rgba(255, 255, 255, 0); */
  /* background-color: #555555; */
  background-color: transparent;
  border: transparent;
  box-shadow: none;
  font-size: 1rem;
  font-weight: bold;
  color: #e80303;
}

/* Campos select 100% en modal de afiliacion de móviles*/
#ms-affMovilsSelect {
  width: 100%;
}

/* Separa los tooltips del puntero del mouse */
.ttipCustom {
  margin: 10px;
  opacity: 1 !important;
}

/* hack para las pestañas en anticipados. Ver si no jode a otros
when not active use specificity to override the !important on border-(color) */
.nav-tabs .nav-link:not(.active) {
  border-color: transparent !important;
}

.custom_messagebox_overlay {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99999;
  background: rgba(0, 0, 0, 0.5);
}

.custom_messagebox {
  background-color: #e3f1c1;
  border: 1px solid #99bb55;
  border-radius: 5px;
  min-width: 10rem !important;
  max-width: 30rem !important;
}

.custom_messagebox .messagebox_title,
.custom_messagebox .messagebox_buttons {
  background-color: #d5e7a9;
}

.custom_messagebox .messagebox_buttons button {
  background-color: #ddf0b0;
  border-radius: 1px;
}

.custom_messagebox .messagebox_buttons button:hover {
  background-color: #ccee7b;
}

#cronStartDate:hover,
#cronEndDate:hover,
#cronDate:hover,
#cronTime:hover {
  background-color: #bad9fcad;
}

.toast {
  font-size: 1em !important;
}

.tablesorter tbody>tr>td>div[contenteditable=true]:focus {
  outline: #08f 1px solid;
  background: #eee;
  resize: none;
}

.focused {
  color: blue;
}

/*** custom css only popup ***/
.columnSelectorWrapper {
  position: relative;
  margin: 10px 0;
  display: inline-block;
}

.columnSelector,
.hidden {
  display: none;
}

.columnSelectorButton {
  background: #99bfe6;
  border: #888 1px solid;
  color: #111;
  border-radius: 5px;
  padding: 5px;
}

#colSelectLogs:checked+label {
  background: #5797d7;
  border-color: #555;
}

#colSelectLogs:checked~#columnSelector {
  display: block;
}

.columnSelector {
  width: 120px;
  position: absolute;
  top: 30px;
  padding: 10px;
  background: #fff;
  border: #99bfe6 1px solid;
  border-radius: 5px;
}

.columnSelector label {
  display: block;
}

.columnSelector label:nth-child(1) {
  border-bottom: #99bfe6 solid 1px;
  margin-bottom: 5px;
}

.columnSelector input {
  margin-right: 5px;
}

.columnSelector .disabled {
  color: #ddd;
}

.dohover:hover {
  /* color: #FFC107 !important; */
  /* color: #3548ee !important; */
  text-shadow: 0 .3rem .4rem rgb(141, 141, 141) !important;
}

.calendar table.month {
  margin-bottom: 10px;
}

.calendar table.month .month-title {
  background-color: #5d68ff;
  color: white;
  padding: 5px;
}

.calendar table.month .day-header {
  padding-top: 8px;
  border-bottom: 2px solid #1f2bcc;
}

.calendar table.month td.day .day-content {
  padding: 5px 8px;
}

.holidayPopover,
.holidayPopover {
  background-color: #333 !important;
}

.holidayPopover .popover-body {
  color: #eee !important;
}

.holidayPopover .arrow:after {
  /* border-bottom-color: #333 !important;
  border-top-color: #333 !important; */
  border-right-color: #333 !important;
  border-left-color: #333 !important;
}