body {
  font-family: 'muliregular', sans-serif;
  font-size: 1rem;
}


/*
* COLORES
*/
.bg-principal{
  background-color: #dfdfdf !important;
}
.bg-sidebar{
  background-color: #00263a !important;
}

.text-grisOscuro {
  color: #565656 !important;
}

/* Fondo Corporativos MicrOasis */
.bg-celesteMicroasis {
  background-color: #2c9199 !important;
}
.bg-amarilloMicroasis {
  background-color: #ffc629 !important;
}
.bg-naranjaMicroasis {
  background-color: #f4633a !important;
}
.bg-verdeMicroasis {
  background-color: #61a60e !important;
}
.bg-azulMicroasis {
  background-color: #00263a !important;
}
.bg-grisMicroasis {
  background-color: #888b8d !important;
}
/* Texto Corporativos MicrOasis */
.text-celesteMicroasis {
  color: #2c9199 !important;
}
.text-amarilloMicroasis {
  color: #ffc629 !important;
}
.text-naranjaMicroasis {
  color: #f4633a !important;
}
.text-verdeMicroasis {
  color: #61a60e !important;
}
.text-azulMicroasis {
  color: #00263a !important;
}
.text-grisMicroasis {
  color: #888b8d !important;
}
/*--------------------------------------------------------------------------------------------------------*/


/* Fondo colores PRODUCTOS GASOLINA */
.bg-diesel {
  background-color: #101820 !important;
}
.bg-dieselPlus {
  background-color: #c99700 !important;
}
.bg-gasolina {
  background-color: #008655 !important;
}
.bg-gasolinaPlus {
  background-color: #84bd00 !important;
}
.bg-autoGas {
  background-color: #ff6900 !important;
}
.bg-adBlue {
  background-color: #0057b7 !important;
}
/* Texto colores PRODUCTOS GASOLINA */
.text-diesel {
  color: #101820 !important;
}
.text-dieselPlus {
  color: #c99700 !important;
}
.text-gasolina {
  color: #008655 !important;
}
.text-gasolinaPlus {
  color: #84bd00 !important;
}
.text-autoGas {
  color: #ff6900 !important;
}
.text-adBlue {
  color: #0057b7 !important;
}
/*--------------------------------------------------------------------------------------------------------*/


/* MCO - AÑADIR PARA HACER QUE SALGA LA MANO, AL ESTAR ENCIMA DE UN ELEMENTO */
.mco-cursor-pointer{
  cursor: pointer;
}
/*--------------------------------------------------------------------------------------------------------*/


/*
* ANIMACIÓN DE PARPADEO: APLICAR LA CLASE '.mco-flash-animated' A CUALQUIER ELEMENTO
*/
.mco-flash-animated {
  -webkit-animation-name: mco-flash;
  animation-name: mco-flash;
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
 }
 @keyframes mco-flash {
  0%, 50%, 100% {
  opacity: 1;
  }
 25%, 75% {
  opacity: 0;
  }
 }
 /*--------------------------------------------------------------------------------------------------------*/


 /*
* ANIMACIÓN INFINITA DE SPINNER: APLICAR LA CLASE '.mco-spin-animated' A CUALQUIER ELEMENTO
*/
 .mco-spin-animated {
  -webkit-animation-name: mco-spinner-infinito;
  animation-name: mco-spinner-infinito;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
}
@keyframes mco-spinner-infinito {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(360deg);
    }
}
/*--------------------------------------------------------------------------------------------------------*/


 /*
* ANIMACIÓN DE RELOAD: APLICAR LA CLASE '.mco-reload-animated' A CUALQUIER ELEMENTO
*/
 .mco-reload-animated {
  -webkit-animation-name: mco-reload;
  animation-name: mco-reload;
  -webkit-animation-duration: 0.6s;
  animation-duration: 0.6s;
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
}
@keyframes mco-reload {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(360deg);
    }
}
/*--------------------------------------------------------------------------------------------------------*/


 /*
* ANIMACIÓN DE FADEIN: APLICAR LA CLASE '.mco-fadeIn-animated' A CUALQUIER ELEMENTO
*/
.mco-fadeIn-animated {
  -webkit-animation-name: mco-fadeIn;
  animation-name: mco-fadeIn;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
@keyframes mco-fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/*--------------------------------------------------------------------------------------------------------*/


 /*
* CLASES UTILES PARA ANIMACIONES: APLICAR CUALQUIERA DE ESTAS CLASES JUANTO CON LAS CLASES DE ANIMACION
*/
.mco-fast-04 {
  -webkit-animation-duration: 0.4s;
  animation-duration: 0.4s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.mco-delay-03 {
  -webkit-animation-delay: 0.3s;
  animation-delay: 0.3s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.mco-delay-06 {
  -webkit-animation-delay: 0.6s;
  animation-delay: 0.6s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
/*--------------------------------------------------------------------------------------------------------*/


/*
* TOOLTIP BOOTSTRAP 4
*/
.tooltip.show {
  opacity: 1;
}
.tooltip-inner {
  font-family: 'mulilight';
  color: #000000;
  background-color:rgba(255, 255, 255, 1);
  box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.25);
}
.tooltip.bs-tooltip-right .arrow:before {
    border-right-color: #ffffff !important;
}
.tooltip.bs-tooltip-left .arrow:before {
    border-left-color: #ffffff !important;
}
.tooltip.bs-tooltip-bottom .arrow:before {
    border-bottom-color: #ffffff !important;
}
.tooltip.bs-tooltip-top .arrow:before {
    border-top-color: #ffffff !important;
}
/*--------------------------------------------------------------------------------------------------------*/


/*
* TOOLTIP PERSONALIZADO: SOLO CSS
*/
/* Tooltip container:
*     - Añadir atributo 'data-toggle="tooltip"'
*     - Añadir atributo 'data-title="aquí el título a mostrar"'
*
*/
[data-toggle="tooltip"][data-title]:hover::after {
  visibility: visible;
  transition: all 0.4s;
  opacity: 1;
}
[data-toggle="tooltip"][data-title]:after {
  visibility: hidden;
  position: absolute;
  content: attr(data-title);
  font-family: 'mulilight' !important;
  text-align: center;
  color: #000000;
  background-color:rgba(255, 255, 255, 1);
  border-radius: 4px;
  box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.25);
  font-size: 0.80rem;
  padding: 5px 8px;
  white-space: nowrap;
  opacity: 0;
  z-index: 99999;
}
[data-toggle="tooltip"][data-title] {
  position: relative;
}


    /* Añadir clase para 'bottom' */
    .tooltip-bottom[data-toggle="tooltip"][data-title]:after {
      top: 102%;
      left: 50%;
      -webkit-transform: translateX(-50%);
      transform: translateX(-50%);
    }
    /* Añadir clase para 'bottom-left' */
    .tooltip-bottom-left[data-toggle="tooltip"][data-title]:after {
      top: 102%;
      right: 0%;
    }
    /* Añadir clase para 'bottom-right' */
    .tooltip-bottom-right[data-toggle="tooltip"][data-title]:after {
      top: 102%;
      left: 0%;
    }
/*--------------------------------------------------------------------------------------------------------*/



/*
* VALIDACIÓN FORMULARIO BOOTSTRAP 4
*/
.form-control.is-valid,
.was-validated .form-control:valid {
  border-color: #4ec544;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%234ec544' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
}
.form-control.is-invalid,
.was-validated .form-control:invalid {
  border-color: #f35956;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23f35956' viewBox='-2 -2 7 7'%3e%3cpath stroke='%23f35956' d='M0 0l3 3m0-3L0 3'/%3e%3ccircle r='.5'/%3e%3ccircle cx='3' r='.5'/%3e%3ccircle cy='3' r='.5'/%3e%3ccircle cx='3' cy='3' r='.5'/%3e%3c/svg%3E");
}
/*--------------------------------------------------------------------------------------------------------*/



/*
* DROPDOWN BOOTSTRAP 4
*/
.dropdown-menu.show {
  border: none;
  box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.25);
}
.dropdown-header, .dropdown-item p {
  overflow: hidden;
  text-overflow: ellipsis;
}
/*--------------------------------------------------------------------------------------------------------*/


/*
* MODAL BOOTSTRAP 4
*/
.modal-content, .modal-content .modal-header, .modal-content .modal-footer {
  border-radius: 6px;
  border: none;
}
/*--------------------------------------------------------------------------------------------------------*/


/*
* BUTTON-DISABLED BOOTSTRAP 4
*/
button.disabled,
button:disabled {
  cursor: not-allowed !important;
  pointer-events: all !important;
}
/*--------------------------------------------------------------------------------------------------------*/


/*
* INPUT-GROUP-TEXT BOOTSTRAP 4
*/
.input-group-text {
  height: calc(1.5em + 0.75rem + 2px);
}
.input-group-sm .input-group-text {
  height: calc(1.5em + 0.625rem);
}
/*--------------------------------------------------------------------------------------------------------*/


/*
* RANGE-INPUT BOOTSTRAP 4
*/
.form-control-range-tooltip {
  background: #0b74e4;
  color: white;
  padding: 0px 6px;
  position: relative;
  border-radius: 4px;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.875em;
}
.form-control-range-tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #0b74e4 transparent transparent transparent;
}
.form-control-range-tooltip.disable {
  background: #bbbbbb;
}
.form-control-range-tooltip.disable::after {
  border-color: #bbbbbb transparent transparent transparent;
}
/*--------------------------------------------------------------------------------------------------------*/


/*
* PERSONALIZACIÓN PARA ANGULAR: VALIDACIÓN CAMPOS FORMULARIO BOOTSTRAP 4
*/
form *.ng-touched.ng-dirty.ng-invalid {
    border: 1px solid #dc3545;
}
form *.ng-touched.ng-dirty.ng-invalid~.invalid-feedback {
    display: block;
}
form *.ng-touched.ng-dirty.ng-invalid~.input-group-append .input-group-text,
form *.ng-untouched.ng-dirty.ng-invalid~.input-group-append .input-group-text {
    border: 1px solid #dc3545;
}

.input-group>.input-group-append:last-child>.btn:not(:last-child):not(.dropdown-toggle),
.input-group>.input-group-append:last-child>.input-group-text:not(:last-child),
.input-group>.input-group-append:not(:last-child)>.btn,
.input-group>.input-group-append:not(:last-child)>.input-group-text,
.input-group>.input-group-prepend>.btn,
.input-group>.input-group-prepend>.input-group-text {
    border-top-right-radius: .25rem;
    border-bottom-right-radius: .25rem;
}
/*--------------------------------------------------------------------------------------------------------*/


/*
* PERSONALIZACIÓN DATETIMEPICKER NATIVO DEL NAVEGADOR
*/
input[type="date"],
input[type="time"] {
  position: relative;
}
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
  color: transparent;
  background: none;
  z-index: 1;
  cursor: pointer;
}

input[type="date"]:before {
  color: transparent;
  background: none;
  display: block;
  font-family: 'Font Awesome 5 Free';
  content: '\f133';
  font-weight: 400; /* Usar valor '900' para iconos sólidos */
  text-align: center;
  width: 1.25em;
  position: absolute;
  right: 11px;
  color: #888b8d;
}

input[type="time"]:before {
  color: transparent;
  background: none;
  display: block;
  font-family: 'Font Awesome 5 Free';
  content: '\f017';
  font-weight: 400; /* Usar valor '900' para iconos sólidos */
  text-align: center;
  width: 1.25em;
  position: absolute;
  right: 11px;
  color: #888b8d;
}
/*--------------------------------------------------------------------------------------------------------*/


/** MCO- Input Drag & Drop **/
.MCO-inputDragAndDrop {
  position: relative;
  display: flex;
  align-items: center;
  /* width: 450px; */
  max-width: 100%;
  padding: 25px;
  border: 1px dashed rgba(0, 0, 0, 0.4);
  border-radius: 3px;
  transition: 0.2s
}

.MCO-inputDragAndDrop .form-control-file {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  height: 100%;
  width: 100%;
  cursor: pointer;
  opacity: 0;
  z-index: 1;
}

.MCO-inputDragAndDrop .MCO-inputDragAndDropContent {
  width: 100%;
}

.MCO-inputDragAndDropContent .MCO-inputDragAndDropText {
  font-size: 0.85em;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  color: #aaaaaa;
}

.MCO-inputDragAndDropContent .MCO-inputDragAndDropText.text-danger.icon-format-not-valid::before {
  content: '\f12a';
  display: block;
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  font-size: 1rem;
}
/*--------------------------------------------------------------------------------------------------------*/


/* MCO - Thumbnail */
.MCO-thumbnail {
  position: relative;
}

.MCO-thumbnail .btn-close {
  position: absolute;
  top: 0px;
  right: 0px;
  z-index: 1;
  padding: 0px 8px;
  outline: none;
}
/*--------------------------------------------------------------------------------------------------------*/


/* MCO - Form Búsqueda Dropdown */
.form-busqueda {
  position: absolute;
  top: 40px;
  z-index: 1000;
  left: 5px;
  right: 5px;
  max-width: 400px;
  max-height: 242px;
  border: 1px solid rgba(0,0,0,.125);
  box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.25);
}
.form-busqueda .list-group-scroll {
  overflow-y: auto;
  border-radius: .25rem;
}
.form-busqueda .list-group-item {
  border: none;
}
.form-busqueda .list-group-item * {
  overflow: hidden;
  white-space: nowrap;
  display: block;
  text-overflow: ellipsis;
}
/*--------------------------------------------------------------------------------------------------------*/


/*
* CONTENIDO
*/
#content {
  width: calc(100% - 318px);
  padding-top: 56px;
  min-height: 100vh;
  transition: all 0.3s;
  position: absolute;
  top: 0;
  right: 0;
}
#content.active {
  width: 100%;
}

/* Se agranda contenido al ocultar el SideBar en smartphone */
@media (max-width: 1024px) {
   #content {
    width: 100%;
  }
  /*#content.active {
      width: calc(100% - 318px);
  }*/
}
/*--------------------------------------------------------------------------------------------------------*/







/*
 * CARD
 */
.card {
   margin-bottom: 30px;
   border-radius: 6px;
 }
 .card .card-header {
  font-weight: bold;
  background-color: #ffffff;
  border-bottom: none;
}
.card .card-header {
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
}
.card .card-body {
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
}
.card .card-footer {
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
}
.card .card-footer {
  background-color: #ffffff;
  border: none;
}
.card .card-text {
  min-height: 42px;
}

/*Añadir esta clase al 'div' padre de la 'Card', para que tengan el mismo alto*/
.mco-stretch-card {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: stretch;
  align-items: stretch;
  -webkit-justify-content: stretch;
  justify-content: stretch;
}
.mco-stretch-card > .card {
    width: 100%;
    min-width: 100%;
}
/*--------------------------------------------------------------------------------------------------------*/







/*
 * CSS RESPONSIVE PARA MAPA IFRAME - MAPA GOOGLE
 */
.map-responsive{
  position:relative;
  height:0;
  overflow:hidden;
  padding-bottom:56.25%;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ced4da;
  border-radius: .25rem;
}
.map-responsive iframe{
  margin: 1%;
  position:absolute;
  left:0;
  top:0;
  height:96%;
  width:98%;
}
/*--------------------------------------------------------------------------------------------------------*/







/**
 * DATATABLE: DEJAR AQUÍ PARA QUE SURTA EFECTO
 **/

/*
 * Aplicar en una versión en la que 'role="row"' no se añade al 'tr'
*/
table tbody {
  line-height: 1.282rem;
}
/* ------------------------------------- */

table.dataTable {
    border-collapse: collapse !important;
}
table td a {
  cursor: pointer;
  color: #a2a2a2;
}
table td a i {
  padding-left: 8px;
  padding-right: 8px;
}
table td a.icon-pdf {
  color: #AF231C;
}
table td a.icon-pdf:hover {
  color: #0090d4;
}
table td a i.fa-trash-alt:hover {
  color: #AF231C;
}
table td a i.fa-power-off:hover {
  color: #AF231C;
}

/* Paginación */
.page-item.active .page-link {
    background-color: #f4633a;
    border-color: #f4633a;
}
.page-link, .page-link:hover {
  color: #2c9199;
}
.page-item.disabled .page-link {
  color: #888b8d;
  background-color: #eeeeee;
}


/** Customización botón 'dtr-control' **/

/*
 * Aplicar en una versión en la que 'role="row"' no se añade al 'tr'
*/
table.dataTable.dtr-inline.collapsed>tbody>tr[class*="odd"]>td.dtr-control,
table.dataTable.dtr-inline.collapsed>tbody>tr[class*="odd"]>th.dtr-control,
table.dataTable.dtr-inline.collapsed>tbody>tr[class*="even"]>td.dtr-control,
table.dataTable.dtr-inline.collapsed>tbody>tr[class*="even"]>th.dtr-control {
  position: relative;
  padding-left: 30px;
  cursor: pointer;
}
table.dataTable.dtr-inline.collapsed>tbody>tr[class*="odd"]>td.dtr-control::before,
table.dataTable.dtr-inline.collapsed>tbody>tr[class*="odd"]>th.dtr-control::before,
table.dataTable.dtr-inline.collapsed>tbody>tr[class*="even"]>td.dtr-control::before,
table.dataTable.dtr-inline.collapsed>tbody>tr[class*="even"]>th.dtr-control::before {
  top: 50%;
  left: 4px;
  height: 14px;
  width: 14px;
  margin-top: -9px;
  display: block;
  position: absolute;
  color: white;
  border: 2px solid white;
  border-radius: 14px;
  box-shadow: 0px 4px 18px rgba(0, 0, 0, 0.1);
  box-sizing: initial;
  text-align: center;
  text-indent: 0 !important;
  font-family: 'Courier New', Courier, monospace;
  line-height: 14px;
  content: '+';
  background-color: #32cb89;
}
/* ------------------------------------- */

table.dataTable.dtr-inline.collapsed>tbody>tr[role="row"][class*="odd"]>td.dtr-control::before,
table.dataTable.dtr-inline.collapsed>tbody>tr[role="row"][class*="odd"]>th.dtr-control::before,
table.dataTable.dtr-inline.collapsed>tbody>tr[role="row"][class*="even"]>td.dtr-control::before,
table.dataTable.dtr-inline.collapsed>tbody>tr[role="row"][class*="even"]>th.dtr-control::before {
  top: 50%;
  box-shadow: 0px 4px 18px rgba(0, 0, 0, 0.1);
  background-color: #32cb89;
  left: 4px;
  height: 14px;
  width: 14px;
  line-height: 14px;
  border: 2px solid white;
  border-radius: 14px;
}
table.dataTable.dtr-inline.collapsed>tbody>tr.parent[class*="odd"]>td.dtr-control::before,
table.dataTable.dtr-inline.collapsed>tbody>tr.parent[class*="odd"]>th.dtr-control::before,
table.dataTable.dtr-inline.collapsed>tbody>tr.parent[class*="even"]>td.dtr-control::before,
table.dataTable.dtr-inline.collapsed>tbody>tr.parent[class*="even"]>th.dtr-control::before {
  background-color: #f35956;
}


/* Personalización 'Detail Row' */
table.dataTable td.details-control {
  padding-left: 0px;
  padding-right: 0px;
  cursor: pointer;
  text-align: center;
}
table.dataTable td.details-control::before {
  content: "+";
  box-shadow: 0px 4px 18px rgba(0, 0, 0, 0.1);
  box-sizing: content-box;
  background-color: #32cb89;
  height: 14px;
  width: 14px;
  display: inline-block;
  color: white;
  text-align: center;
  font-family: 'Courier New', Courier, monospace;
  line-height: 14px;
  border: 2px solid white;
  border-radius: 14px;
}
table.dataTable tr.shown td.details-control::before {
  content: "−";
  background-color: #f35956;
}
/*--------------------------------------------------------------------------------------------------------*/