/* COLORES */
:root {
    --fuentePpal: 'Nunito', sans-serif;
    --fuenteSec: 'Nunito Sans', sans-serif;
    --fuenteIconos: "Font Awesome 5 Free";
    --cian: #008fc5;
    --cianHover: #018dc1;
    --cianCardClaro: #8eddfb;
    --cianOpacidad: #E4F3F8;
    --negro: #333638;
    --gris: #ecedf0;
    --blanco: #ffffff;
    --sombra1: #cacaca;
    --sombra2: #f0f0f0;
    --sombra3: #bebebe;
    --grisCardOscuro: #E3E3E3;
    --grisCardClaro: #F9F9F9;
    --grisTipog: #666666;
    --rojoClaro: #ff2424;
    --rojoOscuro: #be0101;
    --botonPresionado: #b8b9be;
    --grisIntermedio: #CED0D9;
  }

/* GENERALES */

.type-black{
    color: var(--negro);
}

.text-gray-800{
    color: var(--grisTipog)!important;
}

.text-primary{
    color: var(--cian)!important;
}

.colorGris{
    color: var(--grisIntermedio);
}

.colorGris:hover{
    color: var(--grisTipog);
}

.colorGris:active{
    color: var(--cian);
}

a,
a:active,
.btn-link,
.btn-link:active {
    color: var(--cian);
}

a:hover,
.btn-link:hover{
    color: var(--grisTipog);
}

.grisOscuro,
.grisOscuro:active{
    color: var(--grisTipog);
}

.grisOscuro:hover {
    color: var(--cian);
}

.borderBottom0{
    border-bottom: 0;
}

.btn-success, .btn-secondary, a.btnAutorizar,
a.btnCrear, a.btnCancelar  {
    background: linear-gradient( 135deg, var(--cian) 10%, var(--cianCardClaro) 100%);
    box-shadow: 6px 6px 12px var(--botonPresionado),
                -6px -6px 12px #fff!important;
    border: 0;
    border-radius: 19px;
    padding: 6px 20px;
}

.btnDocument  {
    background: linear-gradient( 135deg, var(--cian) 10%, var(--cianCardClaro) 100%);
    box-shadow: 1px 1px 3px var(--grisTipog);
    border: 0;
    color: #fff;
    padding: 6px 20px;
}

.btn-success:focus, .btn-secondary:focus, a.btnAutorizar:focus,
a.btnCrear:focus, a.btnCancelar:focus {
    box-shadow: none!important;
}

.btn-success:hover, .btn-secondary:hover, a.btnAutorizar:hover,
a.btnCrear:hover, a.btnCancelar:hover {
    background-color: var(--cianHover);
    border-color:  var(--cianHover);
}

.w-100{
    width: 100%!important;
}

.opacity-0{
    opacity: 0!important;
}

.border-gray{
    border: 1px solid #e3e6f0;
}

.font-weight-regular{
    font-weight: 300;
}

.tituloSecundario{
    font-size: 1rem;
    text-transform: uppercase;
    font-weight: 700;
}

.tituloPrincipal{
    font-weight: 600;
}

footer.sticky-footer {
    padding-top: 0.4rem;
}

.btn-link.disabled, .btn-link:disabled {
    opacity: 0.4;
    color: var(--cian);
    pointer-events: none;
}

/* BASE.HTML */
/* SIDEBAR */

body{
    font-family: var(--fuentePpal);
    font-weight: 500;
    background-color: var(--gris);
    color: var(--grisTipog);
}

div#wrapper #accordionSidebar {
    box-shadow: 10px 10px 15px 0 rgba(0, 0, 0, 0.36);
    background-color: var(--cian);
    border-radius: 0 20px 20px 0;
    position: relative;
    z-index: 1000;
}

div#wrapper #accordionSidebar #logoZiyu{
    width: 60%;
}

#accordionSidebar .nav-link span {
    color: var(--blanco);
}

.sidebar .nav-item.active a.nav-link{
    margin: 8px;
    border-radius: 20px;
    background-color: var(--blanco)!important;
    box-shadow: inset 4px 4px 5px var(--botonPresionado), inset -4px -4px 7px #fff;

}

#accordionSidebar .nav-item.active a.nav-link span,
#accordionSidebar .nav-item.active .nav-link[data-toggle=collapse]::after {
     color: var(--cian);
}

#accordionSidebar .nav-item .nav-link[data-toggle=collapse]::after {
    margin-right: 0;
    color: var(--blanco);
}

.sidebar .nav-item .collapse .collapse-inner .collapse-item.active,
.sidebar .nav-item .collapse .collapse-inner .collapse-item{
    color: var(--blanco);
}

.sidebar .nav-item .collapse .collapse-inner .collapse-item:hover{
    border-radius: 50px!important;
}

/* Botón Barra lateral */

.sidebar-dark #sidebarToggle {
    box-shadow: inset 4px 4px 5px var(--botonPresionado),
                inset -4px -4px 7px var(--blanco),
                10px 10px 15px 0 rgba(0, 0, 0, 0.24);
    background-image: linear-gradient( 135deg, var(--grisCardOscuro) 10%, var(--grisCardClaro) 100%);
}

.sidebar-dark #sidebarToggle:hover {
    box-shadow: inset 4px 4px 5px var(--blanco),
                inset -4px -4px 7px var(--botonPresionado),
                10px 10px 15px 0 rgba(0, 0, 0, 0.24);
}

.sidebar-dark #sidebarToggle:active{
    box-shadow: inset 4px 4px 5px var(--botonPresionado),
                inset -4px -4px 7px var(--blanco),
                10px 10px 15px 0 rgba(0, 0, 0, 0.24) !important;
}

.sidebar #sidebarToggle::after {
    font-size: 1.4rem;
}

.sidebar-dark #sidebarToggle::after,
.sidebar-dark.toggled #sidebarToggle::after {
    color: var(--cian);
}

/* sacar cuando achico */
/* #accordionSidebar{
    min-width: 230px;
    padding-bottom: 130px;
} */

/* #accordionSidebar::-webkit-scrollbar {
    display: none;
}
 */
/* #buttonSidebarToggle{
    width: 210px;
    position: fixed;
    position: absolute;
    bottom: 40px;
    left: 10px;
} */

/* BARRA LATERAL COMPRIMIDA */

ul#accordionSidebar.toggled li.nav-item .collapse.show {
    background-color: var(--blanco);
}

ul#accordionSidebar.toggled li.nav-item .collapse.show .collapse-inner.secondary-links{
    margin-bottom: 0;
}

ul#accordionSidebar.toggled li.nav-item .collapse.show a {
    color: var(--grisTipog);
}

ul#accordionSidebar.toggled li.nav-item .collapse.show a:hover {
    background-color: var(--cianOpacidad);
    border-radius: 0px!important;
}

/* TOPBAR */

.topbar {
   height: 50px;
}

.topbar, .navbar{
    background-color: var(--blanco);
    box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.55);
    position: sticky;
    z-index: 90;
}

.topbar .navbar-search{
    width: calc(((100vw - 266px) / 3) - 16px);
}

.topbar .topbar-divider{
    border-right: 1px solid var(--grisIntermedio);
    height: 25px;
}

.fa-bullhorn, .fa-filter, .fa-question{
    width: 32px;
    height: 32px;
    border-radius: 32px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: var(--cian);
    color: var(--blanco);
    box-shadow: 3px 3px 6px 0 rgba(0, 0, 0, 0.36);
}

.topbar .nav-item .nav-link{
    padding: 0.3rem;
}

.sidebar .nav-item .nav-link {
    width: initial;
}

.sidebar.sidebar-opposite.sidebar-default {
    background-color: var(--cian);
    border-radius: 20px 0 0 20px;
    box-shadow: -10px 10px 15px 0 rgb(0 0 0 / 36%)!important;
}

/* ÍCONOS SIDEBAR */

#accordionSidebar li.nav-item a.nav-link span::before{
    padding-right: 8px;
    font-family: var(--fuenteIconos);
    opacity: 0.85;
}

#accordionSidebar li.nav-item a.nav-link span::before{
    font-weight: 700!important;
}

#accordionSidebar li.nav-item:nth-of-type(1) a.nav-link span.inicio::before{
    content: "\f015"; /* Inicio */
}

#accordionSidebar li.nav-item:nth-of-type(2) a.nav-link span::before{
    content: "\f073"; /* Planificacion */
}

#accordionSidebar li.nav-item:nth-of-type(3) a.nav-link span::before{
    content: "\f5a0"; /* Torre de control */
}

#accordionSidebar li.nav-item:nth-of-type(4) a.nav-link span::before{
    content: "\f46d"; /* Central de Monitoreo */
}

#accordionSidebar li.nav-item:nth-of-type(5) a.nav-link span::before{
    content: "\f007"; /* Operación cliente */
}

#accordionSidebar li.nav-item:nth-of-type(6) a.nav-link span::before{
    content: "\f571"; /* Financiero */
}

#accordionSidebar li.nav-item:nth-of-type(7) a.nav-link span::before{
    content: "\f007"; /* Acreditacion y accesos */
}

#accordionSidebar li.nav-item:nth-of-type(8) a.nav-link span::before{
    content: "\f073"; /* Agendamiento */
}

#accordionSidebar li.nav-item:nth-of-type(9) a.nav-link span::before{
    content: "\f5a0"; /* Navegación */
}

#accordionSidebar li.nav-item:nth-of-type(10) a.nav-link span::before{
    content: "\f52f"; /* Combustible */
}

#accordionSidebar li.nav-item:nth-of-type(11) a.nav-link span::before{
    content: "\f073"; /* Dashboards */
}

#accordionSidebar li.nav-item:nth-of-type(12) a.nav-link span::before{
    content: "\f571"; /* Score */
}

#accordionSidebar li.nav-item:nth-of-type(13) a.nav-link span::before{
    content: "\f013"; /* Configuración */
}

#accordionSidebar li.nav-item:nth-of-type(14) a.nav-link span::before{
    content: "\f013"; /* Configuración */
}

#accordionSidebar li.nav-item:nth-of-type(1) a.nav-link span.inicio::before{
    content: "\f015"; /* Inicio */
}


/* DASHBOARD */

#contenedorCards .card{
    border-radius: 12px;
    box-shadow:   6px 6px 12px var(--botonPresionado),
                    -6px -6px 12px #fff!important;
    background-image: linear-gradient( 135deg, var(--grisCardOscuro) 10%, var(--grisCardClaro) 100%);
    border: 0px;
    height: 60px!important;
}

#contenedorCards .card .card-body .card-value,
#contenedorCards .card .card-body .card-name{
    font-family: var(--fuentePpal);
    font-weight: bold;
    text-transform: uppercase;
}

#contenedorCards .card .card-body .card-value{
    font-size: 1.6rem;
}
#contenedorCards .card .card-body .card-name{
    font-size: 0.8rem;
}

#contenedorCards .card .card-body .card-value.text-xs{
    font-size: 1.1rem;
}

#contenedorCards .card.color-card .btn.btn-primary{
    background-color: inherit;
    border: 0;
    font-size: 0.8rem;
    font-weight: 600;
}

#contenedorCards .card.color-card .btn.btn-warning{
    background-color: inherit;
    border: 0;
    font-size: 0.8rem;
    font-weight: 600;
}
#contenedorCards .card.color-card{
    background: linear-gradient( 135deg, var(--cian) 10%, var(--cianCardClaro) 100%);
    overflow: hidden;
}

#contenedorCards .card.color-card .circulos-decorativos{
    height: 90px;
    width: 90px;
    border-radius: 90px;
    background-color: var(--blanco);
    opacity: 0.15;
    position: absolute;
}

#contenedorCards .card.color-card #circulo1.circulos-decorativos{
    top: -25px;
    left: -20px;
}

#contenedorCards .card.color-card #circulo2.circulos-decorativos{
    top: 20px;
    left: 20px;
}

#contenedorCards .card.color-card #circulo3.circulos-decorativos{
    right: -20px;
    top: 10px;
}

.bordesBusq{
    border: 1px solid #BFC0D1;
    border-radius: 30px;
}

div.bordesBusq .form-control{
    font-size: .9rem !important;
}

div.bordesBusq .form-control:focus{
    box-shadow: none;
}

input.form-control::placeholder{
    color: var(--grisIntermedio);
}

#container-map-info{
    border-radius: 35px;
    overflow: scroll;
    margin: 0 20px 30px;
    box-shadow: 0px 10px 15px 0 rgba(0, 0, 0, 0.36);
}

#container-map-info::-webkit-scrollbar {
    display: none; /* BARRA SCROLL INVISIBLE */
}

#list-route{
    position: relative;
    min-width: calc(33.333333% + 40px);
    z-index: 110;
    border-radius: 35px;
    overflow: hidden;
    box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.45);
}

#div_map{
    min-width: calc(66.666666% + 40px);
    position: relative;
    right: 40px;
}

#list-route div.bg-white{
    background-image: linear-gradient( 90deg, var(--grisCardOscuro) 10%, var(--grisCardClaro) 100%);
}

#list-route div.bg-white .filter__overflow-box{
    box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.25);
    border-bottom: 1px #BFC0D1 solid!important;
}

#container-map-info #list-route #dropdownMenuLink,
#container-map-info #list-route #os_view_all{
    font-weight: bold;
    font-family: var(--fuenteSec);
}

#container-map-info #box_panel_id, #container-map-info #box_panel_alert {
    position: relative;
    width: 400px;
    height: calc(95% - 40px);
    top: calc(2.5% + 25px);
    background-image: linear-gradient( 90deg, var(--grisCardOscuro) 10%, var(--grisCardClaro) 100%);
    box-shadow: 10px 10px 15px 0 rgba(0, 0, 0, 0.36);
    border-radius: 0 25px 25px 0;
    z-index: 100;
    transition: all .3s;
}

div#container-map-info .card.card-monitoring{
    background-image: linear-gradient(90deg, var(--grisCardOscuro) 0%, var(--grisCardClaro) 100%);
    border-bottom: 1px #BFC0D1 solid!important;
}

div#container-map-info .card.card-monitoring.active,
div#container-map-info .card.card-monitoring:hover{
    background-image: linear-gradient(90deg, #DDDEE0 0%, #e7e8e9 100%);
}

div#container-map-info .card.card-monitoring.card-monitoring-with-alert{
    background-image: linear-gradient(90deg, rgba(224,199,195,.6) 0%, rgba(239,216,213,.6) 100%);
}

.nav-tabs {
    border-bottom: 1px solid #BFC0D1;
}

.nav-tabs .nav-item.show .nav-link, 
.nav-tabs .nav-link.active,
.nav-tabs .nav-link:hover{
    background-color: unset;
    border-color:  #BFC0D1;
    border-bottom-color: var(--grisCardOscuro);
}

.tab-content .card {
    border: #BFC0D1 solid 1px;
    background-color: unset;
}

.tab-content .card .card-header{
    border-bottom: #BFC0D1 solid 1px;
}

#box_panel_id .form-control, #box_panel_alert .form-control{
    background-color: unset!important;
    border: #BFC0D1 solid 1px!important
}

.bg-alert-light {
    background-color: #deeaed!important;
}

/* DEMANDA (service_form)*/

#cuadrillas .form-inline .form-group input{
    border-radius: 20px;
    border: 0px;
}

#cuadrillas .form-inline .form-group button.btn.btn-primary,
button.btn.btn-primary{
    border-radius: 19px;
    box-shadow: 6px 6px 12px var(--botonPresionado),
                -6px -6px 12px #fff!important;
    background: linear-gradient( 135deg, var(--cian) 10%, var(--cianCardClaro) 100%);
    border: 0px;
    padding: 6px 20px;
}

#cuadrillas .form-inline .form-group button.btn.btn-warning,
button.btn.btn-warning{
    box-shadow: 6px 6px 12px var(--botonPresionado),
                -6px -6px 12px #fff!important;
    background: #48a56a;
    border: 0px;
    padding: 6px 20px;
}
#contenedorCards div.card.color-card button.btn.btn-primary{
    border-radius: 12px;
}

#nombreSeccion{
    height: 60px;
}

/* TABLAS */

div#table-card{
    background-color: inherit;
    border: 0;
}

/* TABLA PRELIQUIDACION */
div#tablaContenedor_1 table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 8px;
}

div#tablaContenedor_1 table thead {
    background-image: linear-gradient( 135deg, var(--cian) 10%, var(--cianCardClaro) 100%);
}

div#tablaContenedor_1 table thead tr th {
    color: var(--blanco);
    padding: 10px 10px 10px 20px;
    border: 0;
}

div#tablaContenedor_1 table tbody tr td {
    background-color: var(--blanco);
    height: 40px;
    font-size: 14px;
    white-space: nowrap;
    padding: 0 0 0 20px;
    border: 0;
    text-overflow: ellipsis;
    overflow: hidden;
}

div#tablaContenedor_1 table td:first-child,
div#tablaContenedor_1 table th:first-child {
    border-radius: 20px 0 0 20px;
}

div#tablaContenedor_1 table td:last-child,
div#tablaContenedor_1 table th:last-child {
    border-radius: 0 20px 20px 0;
}


/* TABLAS*/ 

div#tablaContenedor table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 8px;
}

div#tablaContenedor table thead {
    border-radius: 20px;
    background-image: linear-gradient( 135deg, var(--cian) 10%, var(--cianCardClaro) 100%);
    height: 40px;
  }

div#tablaContenedor table thead tr th {
    color: var(--blanco);
    padding: 10px 10px 10px 20px;
    border: 0;
}

div#tablaContenedor table tbody tr td {
    background-color: var(--blanco);
    height: 40px;
    font-size: 14px;
    white-space: nowrap;
    padding: 0 0 0 20px;
    border: 0;
    text-overflow: ellipsis;
    overflow: hidden;
}

div#tablaContenedor table td:first-child,
div#tablaContenedor table th:first-child {
    border-radius: 20px 0 0 20px;
}

div#tablaContenedor table td:last-child,
div#tablaContenedor table th:last-child {
    border-radius: 0 20px 20px 0;
}

table.table.inlineTable.no-line-table td,
table.table.inlineTable.no-line-table th{
    border: 0;
    padding: 6px 12px !important ;
}

table{
    min-width: 100%!important;
}

thead#demandaHeader{
    display: inline-table;
}

thead#demandaHeader,
tbody#demandaBody {
    display: table-header-group;
}

#tablaContenedor.scroll-table {
    overflow-y: auto;
    max-height: calc(100vh - 275px);
}

/* MODAL CREAR DEMANDA */

#modal_main_form  .card.paso-demanda .card-body table thead tr th,
#modal_main_form label{
    font-size: 14px;
    color: var(--cian)!important;
    font-weight: bold;
}

#modal_main_form input,
#modal_main_form select{
    border: 0;
    border-bottom: 1px solid var(--grisTipog);
    border-radius: 0;
    padding: 6px 0;
}

#modal_main_form input:focus,
#modal_main_form input:focus-visible,
#modal_main_form select:focus,
#modal_main_form select:focus-visible{
    border-color: inherit;
    -webkit-box-shadow: none;
     box-shadow: none;
}

#modal_main_form .modal-body .card.paso-demanda{
    border-radius: 15px;
}

#modal_main_form .modal-body .columna-izquierda{
    padding-right: 0px;
}

#modal_main_form .modal-body .columna-izquierda .card.paso-demanda{
    border-radius: 15px 0 0 15px !important;
}

.paso-demanda-points{
    border-radius: 0 !important;
    border-top-left-radius: 15px !important;
    border-top-right-radius: 15px !important;
}

#modal_main_form .modal-body .columna-centro{
    padding: 0;
}

#modal_main_form .modal-body .columna-centro .card.paso-demanda{
    border-radius: 0px !important;
}

#modal_main_form .modal-body .columna-derecha{
    padding-left: 0px;
}

#modal_main_form .modal-body .columna-derecha .card.paso-demanda{
    border-radius: 0 15px 15px 0 !important;
}

#modal_main_form .modal-footer .btn-secondary{
    position: relative;
    right: calc(85vw - 250px)
}

#modal_main_form .modal-body table.paso3 thead.paso3-color{
    background: linear-gradient( 135deg, var(--cian) 10%, var(--cianCardClaro) 100%);
}

#modal_main_form .card.paso-demanda .card-body table.paso3 thead.paso3-color tr th {
    color: var(--blanco)!important;
}

#modal_main_form .modal-body .columna-centro .card.paso-demanda.paso3,
#modal_main_form .modal-body .columna-centro .card.paso-demanda.paso3 thead.paso3-color tr th{
    border-radius:  15px 15px 0 0 !important ;
}

#modal_main_form textarea{
    border-radius: 15px;
    border: solid 1px #e3e6f0;
    width: 100%;
}

#modal_main_form .associated_OS.selected,
#modal_main_form .associated_OS:hover{
    background-color: var(--cianOpacidad);
    /* background-color: #eaecf4; */
    border-radius: 10px;
}

/* OFERTA */
/* Inputs */

.chosen-container-single .chosen-single,
.container-fluid .form-control {
    background-color: var(--blanco);
    border: 0px;
    border-radius: 20px;
    color: var(--grisTipog);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
}

#linker_btn{
    height: 38px;
}

.creation-card{
    border: 1px solid #e3e6f0;
    border-radius: 15px;
    padding: 20px;
    background-color: #f8f8f9;
}

.creation-card button.dropdown-toggle, .creation-card div select, .creation-card div input{
    border:1px solid #e3e6f0 !important;
    background-color: #fff !important;
    border-radius: 20px !important;
}


/* ASIGNACIÓN */

i.fas.fa-arrow-circle-right,
i.fas.fa-times-circle {
    font-size: 17px;
    padding-top: 3px;
}

.grey-status,
.blue-status{
    border-radius: 15px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    text-align: center;
}

.grey-status{
    background-color: var(--gris);
}

.blue-status{
    border: 1px solid var(--cian);
    color: var(--cian);
}

.transportista-patente{
    width: 100%;
}

.transportista-patente select{
    width: 100%;
    border-radius: 15px;
    border: 1px solid var(--grisTipog);
    padding: 1px 5px;
}

.conductor-patente select{
    border-radius: 15px;
    border: 1px solid var(--grisTipog);
    padding: 1px 5px;
}

/* LOGIN */

/* MODAL CARGANDO - LOADER*/

#overlay  {
    position: fixed;
    opacity: 1;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.5);
    z-index: 2000;
    cursor: pointer;
}

#overlay div.caja{
    position: relative;
    top: calc(40% - 80px);
    width: 340px;
    height: 200px;
    margin: auto;
    border-radius: 10px;
    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.30);
    background-color: rgba(255, 255, 255, 0.85);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
}

#overlay div.caja #loader{
    margin: auto;
    margin-top: 15px;
    margin-bottom: 0px;
    width: 80px;
    height: 80px;
}

#overlay div.caja div.loader_text{
    text-align: center;
    font-family: var(--fuentePpal);
}

#overlay div.caja div.loader_text h4{
    font-size: 25px;
    font-weight: 500;
    color: var(--cian)
}

#overlay div.caja div.loader_text h5{
    font-size: 16px;
    font-weight: 400;
    color: var(--grisTipog);
}

#overlay div#loader img{
    width: 50px;
}

#overlay div#loader #circle1{
    width: 20px;
    height: 20px;
    position: absolute;
    top: calc(70px);
    left: calc(50% - 10px);
}

#overlay div#loader #circle2{
    width: 80px;
    height: 80px;
    position: absolute;
    top: calc(40px);
    left: calc(50% - 40px);
}

#overlay div#loader #circle1,
#overlay div#loader #circle2{
    border-radius: 100%;
    background-color: var(--cian);
    opacity: 0.4;
    margin: auto;
}

#overlay div#loader #circle1.rotate-scale-up {
-webkit-animation: scale-down-center 1.5s linear infinite both;
        animation: scale-down-center 1.5s linear infinite both;
}

#overlay div#loader #circle2.rotate-scale-up {
-webkit-animation: scale-down-center-reverse 1.5s linear infinite both;
        animation: scale-down-center-reverse 1.5s linear infinite both;
}

@-webkit-keyframes scale-down-center {
    0% {
        -webkit-transform: scale(2);
                transform: scale(2);
    }
    50% {
        -webkit-transform: scale(0.3);
                transform: scale(0.3);
    }
    100% {
        -webkit-transform: scale(2);
                transform: scale(2);
        }
}

@keyframes scale-down-center {
    0% {
        -webkit-transform: scale(2);
                transform: scale(2);
    }
    50% {
        -webkit-transform: scale(0.3);
                transform: scale(0.3);
    }
    100% {
            -webkit-transform: scale(2);
                    transform: scale(2);
    }
}

@-webkit-keyframes scale-down-center-reverse {
    0% {
        -webkit-transform: scale(0.5);
                transform: scale(0.5);
    }
    50% {
        -webkit-transform: scale(1);
                transform: scale(1);
    }
    100% {
        -webkit-transform: scale(0.5);
                transform: scale(0.5);
        }
}

@keyframes scale-down-center-reverse {
    0% {
        -webkit-transform: scale(0.5);
                transform: scale(0.5);
    }
    50% {
        -webkit-transform: scale(1);
                transform: scale(1);
    }
    100% {
            -webkit-transform: scale(0.5);
                    transform: scale(0.5);
    }
}

/* REPORTES */

#operating_report .card{
    border-radius: 12px;
    box-shadow:   6px 6px 12px var(--botonPresionado),
                    -6px -6px 12px #fff!important;
    border: 0px;
    background-image: linear-gradient( 135deg, var(--blanco) 10%, var(--grisCardClaro) 100%);
}

#operating_report .title-box-drag{
    font-size: 0.8rem;
}

#operating_report #div_map {
    position: relative;
    right: 0px;
}

.text-danger{
    color: var(--rojoOscuro) !important;
}

/* RESPONSIVE */

@media (min-width: 1650px){
    #contenedorCards{
        margin: 16px 30px;
    }

    form#general_search{
        position: relative;
        left: 36px;
        width: calc(((100vw - 336px) / 3) - 46px);
    }

    div.container-fluid div.row.no-gutters{
        max-width: 95%;
        margin: auto;
    }

    nav.navbar div#div_general_search{
        margin-left: 2.5%;
    }

    nav.navbar ul#navbar-icons{
        margin-right: calc(2.5% + 50px);
    }
}

@media (min-height: 820px){
    #container-map-info{
        height: calc(100vh - 180px);
    }

    #div_map{
        height: calc(100vh - 180px);
    }
}

#modal_main_form div.template-step {
    display: flex;
    flex-wrap: nowrap;
    padding-left: 12px;
    padding-right: 12px;
    min-height: 200px;
    max-height: 400px !important;
}

#modal_main_form div.template-step .columna-centro,
#modal_main_form div.template-step .columna-izquierda,
#modal_main_form div.template-step .columna-derecha{
    display: inline-block;
}

#modal_main_form div.template-step .columna-centro .card.paso-demanda,
#modal_main_form div.template-step .columna-izquierda .card.paso-demanda,
#modal_main_form div.template-step .columna-derecha .card.paso-demanda{
    min-width: 100%!important;
    max-width: fit-content!important;
    min-height: 180px !important;
} 

.input-demand{
    border: 0 !important;
    border-bottom: none !important;
    border-radius: 4px !important;
    padding: 6px 10px !important;
    -webkit-appearance: none;
    -moz-appearance: none;
}

.input-demand::-ms-expand{
    display: none;
}



/* PRUEBA */

.borderRed{
    border: red solid 1px;
}

.pagination {
    margin-top: 15px;
}

.pg-item{
    margin-left: 5px;
    margin-right: 5px;
}

.pg-item span{
    padding: 5px 10px;
}

li.active > span {
    background-color: #f8f8f9;
    border: 1px solid #e9e9e9
}

.carrier-grid {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    grid-template-areas: "main main main main main main main main main main"
                         "appr appr lqdt lqdt cont cont invd invd paid paid"
                         "appr appr nlqd nlqd nlqd nlqd nlqd nlqd nlqd nlqd"
                         "unap unap unap unap unap unap refu refu refu refu";
    gap: 0.5rem;
}

.carrier-grid-main {
    grid-area: main;
}

.carrier-grid-buttons {
    grid-area: btns;
}

.carrier-grid-approved {
    grid-area: appr;
}

.carrier-grid-unapproved {
    grid-area: unap;
}

.carrier-grid-refused {
    grid-area: refu;
}

.carrier-grid-liquidated {
    min-height: 180px;
    grid-area: lqdt;
}

.carrier-grid-invoiced {
    min-height: 180px;
    grid-area: invd;
}

.carrier-grid-contabilized{
    min-height: 180px;
    grid-area: cont;
}

.carrier-grid-paid {
    min-height: 180px;
    grid-area: paid;
}

.carrier-grid-unliquidated {
    grid-area: nlqd;
}


.carrier-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.carrier-title {
    font-size: 1rem;
}

.carrier-amount::before {
    content: '$';
}

.carrier-buttons {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;

    position: sticky;
    top: 0;

    padding-top: 1rem;
    margin-top: -1rem;
    display: none;
}

.btn-carrier {
    color: #fff;
    background-color: #858796;
    border-color: #858796;
}

.btn-carrier:hover {
    color: #fff;
    background-color: #717384;
    border-color: #6b6d7d;
}

.btn-icon-font {
    font-size: 1.4rem;
}
.chosen-container-multi .chosen-choices li.search-choice-disabled {
    margin: 3px 3px 3px 0 !important;
    padding: 3px 3px 3px 3px !important;
}


/* Histórico Recorrido */

.route-report-card{
    max-width: 92%;
    margin: 20px auto;
    border: 1px solid #e3e6f0;
    border-radius: 15px;
    padding: 20px;
    background-color: #f8f8f9;
    align-items: center;
}

.route-report-card button.dropdown-toggle, .route-report-card div select, .route-report-card div input{
    border:1px solid #e3e6f0 !important;
    background-color: #fff !important;
    border-radius: 20px !important;
}

.alerts-list{
    height: 500px;
}

.alerts-cola{
    height: 97vh;
    position: relative;
}

.kpi-user-alerts{
    min-height: 350px;
}

.alert-div-card{
    height: 100%;
    background-color: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
}

.alerts-items{
   height: 60%;
   overflow-y: scroll;
}

.alert-item{
    display: flex;
    height: 110px;
    overflow: hidden;
    border-bottom: 1px solid #ebeaea;
}

.alert-item:hover {
    background-color: #f8f8f9;
    cursor: pointer;
}

.alert-icon{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #008fc5;
    width: 15%;
    font-size: 24px;
}

.alert-icon span{
    text-align: center;
    max-width: 90%;
    font-size: 12px;
}

.alert-data-info{
    display: flex;
    flex-direction: column;
    padding: 10px;
    width: 73%;
}

.alert-data-info > span{
    font-size: 0.7rem;
    text-transform: uppercase;
}

.alert-data-info > span:first-of-type{
    font-size: 1rem !important;
}

.alert-driver-name{
    font-weight: 700;
    text-transform: uppercase;
}

.alert-data{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    width: 12%;
    padding-right: 20px;
    color: #fff;
    font-weight: 600;
    text-transform: uppercase;
    font-size: .6rem;
    margin: auto 0;
    height: 40px;
    border-top-left-radius: 12px;
    border-bottom-left-radius: 12px;
}

 .alert-data > span:first-of-type{
    font-size: .8rem;
 }

.alert-critical {
    background-color: #ca1e44;
}

.alert-mean {
    background-color: #dfa402;
}

.alert-low {
    background-color: #1293cf;
}

.mapbox-alerts-events{
    width: 90%;
    top: 60px;
    left: 25px;
    overflow-x: hidden !important;
    border-radius: 5px;
}

.aux-icon{
    display: flex;
    align-items: center;
    justify-content: center;
    color: #008fc5;
    font-size: 60px;
}

.mapbox-clien-view{
    border-radius: 5px;
    margin: 0 auto;
    left: 0px;
    width: 750px;
}

.progress-container::before {
    content: "";
    background: #008fc5;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    height: 4px;
    width: 100%;
    z-index: -1;
  }
  
  .progress-container {
    display: flex;
    justify-content: space-between;
    position: relative;
    margin-bottom: 30px;
    max-width: 100%;
    width: 500px;
  }
  
  .progress {
    background: #008fc5;
    position: absolute;
    top: 30%;
    left: 0;
    height: 4px;
    width: 100%;
    z-index: 1;
    transition: 0.4s ease;
  }
  
  .circle {
    background-color: #008fc5;
    color: #999;
    border-radius: 50%;
    height: 40px;
    width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid #008fc5;
    transition: .4s ease;
  }
  
  .circle.active {
    border-color: #008fc5;
  }

  .btn:active {
    transform: scale(0.98);
  }
  
  .btn:focus {
    outline: 0;
  }
  
  .btn:disabled {
    cursor: not-allowed;
  }
  
  .mapbox_styles{
    padding: 8px 10px;
    background-color: #fff;
    border: 1px solid #E3E3E3;
    border-radius: 5px;
    letter-spacing: 1px;
    font-weight: 500;
    font-size: 14px;
    cursor: pointer;
}

.active_mapbox_styles{
    background-color: #069eda;
    border: 1px solid #10a4df;
    color: #fff;
}


/* ACCESOS Y ACREDITACION HELMER */

.detail-acc-div-card{
    background-color: #fff;
    border: 1px solid #d6d6d6;
    border-radius: 10px;
}

.accreditation-div-card{
    height: 97vh;
    background-color: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
}

.accreditation-list{
    height: 87vh;
}

.accreditation-filters{
    border-radius: 10px;
    border: 1px solid #d6d6d6;
    background-color: #f2f2f5;
}
 
.acc-icon{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 15%;
    font-size: 15px;
}

.acc-icon span{
    text-align: center;
    max-width: 90%;
    font-size: 12px;
}

.acc-panel{
    height: 87vh;
    position: relative;
}

.acc-items{
    height: 88.5%;
    overflow-y: scroll;
 }

 .acc-name{
    font-weight: 200;
    text-transform: uppercase;
}

.doc-name{
    width: 100%;
    font-size: 0.7rem;
    background-color: #f8f8f9;
}
.border-red-access{
    border: 2px solid red !important;
}

.acc-item{
    display: flex;
    height: 110px;
    overflow: hidden;
    border-bottom: 1px solid #ebeaea;
}

.acc-item:hover {
    background-color: #f8f8f9;
    cursor: pointer;
}

.acc-type {
    color: #008fc5;
}

.detail-acc{
    height: 100%;
    background-color: #f8f8f9;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
}

.detail-acc-icon{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 35%;
    font-size: 35px;
}

.detail-acc-item{
    display: flex;
    /* height: 110px; */
    overflow: hidden;
    justify-content: center;
    border-bottom: 1px solid #ebeaea;
}

.acc-data-info{
    display: flex;
    flex-direction: column;
    padding: 10px;
    width: 100%;
}

.acc-data-info > span{
    font-size: 0.8rem;
    text-transform: uppercase;
}

.acc-detail-items{
    height: 88.5%;
    justify-content: center;
 }

.detail-acc-data{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    width: 12%;
    padding-right: 20px;
    color: #fff;
    font-weight: 600;
    text-transform: uppercase;
    font-size: .6rem;
    margin: auto 0;
    height: 40px;
    border-top-left-radius: 12px;
    border-bottom-left-radius: 12px;
}

 .detail-acc-data > span:first-of-type{
    font-size: .8rem;
 }

.nav-tab-acc.nav-link{
    border: 1px solid #e3e6f0;
    background-color: #f8f8f9;;
    height: 40px;
    font-size: 15px !important;
}
.nav-tab-acc.nav-link.active{
    background-color: var(--cianHover);
    border-color:  #f2f2f5;
    color: #fff;
}
.clients-filters{
    border-radius: 10px;
    border: 1px solid #e3e6f0;
    background-color: #f8f8f9;
}
.badge-baja-access{
    color: #fff;
    background-color: green!important;
}

.badge-alta-access {
    color: #fff;
    background-color: #C92323 !important;
}
.badge-tr-table {
    background-color: #ddf3fb!important;
}

#view-document-prov #container-status-document-prov{
    margin-left: 60px;
    margin-right: 60px;
}

#view-document-prov #status_document {
    text-transform: uppercase;
    font-weight: bolder;
    font-size: 18px;
    margin: 0;
}

#view-document-prov div#container-status-document-prov {
    display: flex;
}

#view-document-prov div#status_icon {
    font-size: 2rem;
    margin-right: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-family: "Font Awesome 5 Free"; 
    font-weight: 900; 
}

#view-document-prov div#container-status-document-prov {
    padding: 10px 20px;
    border-radius: 7px;
}

#view-document-prov div#container-status-document-prov.aprobado{
    border: 1px solid #63b581;
    border-left: 0.25rem solid #63b581;
}

#view-document-prov div#container-status-document-prov.rechazado{
    border: 1px solid #e96464;
    border-left: 0.25rem solid #e96464;
}

#view-document-prov div#container-status-document-prov.pendiente{
    border: 1px solid #01b0f1;
    border-left: 0.25rem solid #01b0f1;
}

#view-document-prov div#container-status-document-prov.aprobado div#status_icon::before{
    color: #63b581; 
    content: "\f058";
}

#view-document-prov div#container-status-document-prov.rechazado div#status_icon::before{
    color: #e96464;
    content: "\f057";
}

#view-document-prov div#container-status-document-prov.pendiente div#status_icon::before{
    color: #01b0f1;
    content: "\f28b";
}

#view-document-vehicle #container-status-document-vehicle{
    margin-left: 60px;
    margin-right: 60px;
}

#view-document-vehicle #status_document {
    text-transform: uppercase;
    font-weight: bolder;
    font-size: 18px;
    margin: 0;
}

#view-document-vehicle div#container-status-document-vehicle {
    display: flex;
}

#view-document-vehicle div#status_icon {
    font-size: 2rem;
    margin-right: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-family: "Font Awesome 5 Free"; 
    font-weight: 900; 
}

#view-document-vehicle div#container-status-document-vehicle {
    padding: 10px 20px;
    border-radius: 7px;
}

#view-document-vehicle div#container-status-document-vehicle.aprobado{
    border: 1px solid #63b581;
    border-left: 0.25rem solid #63b581;
}

#view-document-vehicle div#container-status-document-vehicle.rechazado{
    border: 1px solid #e96464;
    border-left: 0.25rem solid #e96464;
}

#view-document-vehicle div#container-status-document-vehicle.pendiente{
    border: 1px solid #01b0f1;
    border-left: 0.25rem solid #01b0f1;
}

#view-document-vehicle div#container-status-document-vehicle.aprobado div#status_icon::before{
    color: #63b581; 
    content: "\f058";
}

#view-document-vehicle div#container-status-document-vehicle.rechazado div#status_icon::before{
    color: #e96464;
    content: "\f057";
}

#view-document-vehicle div#container-status-document-vehicle.pendiente div#status_icon::before{
    color: #01b0f1;
    content: "\f28b";
}

#view-document-vehicle div#status_icon {
    font-size: 2rem;
    margin-right: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-family: "Font Awesome 5 Free"; 
    font-weight: 900; 
}

/* MODAL VISITA ACCESOS */
#modal_visit  .card.paso-demanda .card-body table thead tr th,
#modal_visit label{
    font-size: 14px;
    color: var(--cian)!important;
    font-weight: bold;
}

#modal_visit input,
#modal_visit select{
    border: 0;
    border-bottom: 1px solid var(--grisTipog);
    border-radius: 0;
    padding: 6px 0;
}

#modal_visit input:focus,
#modal_visit input:focus-visible,
#modal_visit select:focus,
#modal_visit select:focus-visible{
    border-color: inherit;
    -webkit-box-shadow: none;
     box-shadow: none;
}

#modal_visit .modal-body .card.paso-demanda{
    border-radius: 15px;
}

#modal_visit .modal-body .columna-izquierda{
    padding-right: 0px;
}

#modal_visit .modal-body .columna-izquierda .card.paso-demanda{
    border-radius: 15px 0 0 15px !important;
}

.paso-demanda-points{
    border-radius: 0 !important;
    border-top-left-radius: 15px !important;
    border-top-right-radius: 15px !important;
}

#modal_visit .modal-body .columna-centro{
    padding: 0;
}

#modal_visit .modal-body .columna-centro .card.paso-demanda{
    border-radius: 0px !important;
}

#modal_visit .modal-body .columna-derecha{
    padding-left: 0px;
}

#modal_visit .modal-body .columna-derecha .card.paso-demanda{
    border-radius: 0 15px 15px 0 !important;
}

#modal_visit .modal-footer .btn-secondary{
    position: relative;
    right: calc(85vw - 250px)
}

#modal_visit .modal-body table.paso3 thead.paso3-color{
    background: linear-gradient( 135deg, var(--cian) 10%, var(--cianCardClaro) 100%);
}

#modal_visit .card.paso-demanda .card-body table.paso3 thead.paso3-color tr th {
    color: var(--blanco)!important;
}

#modal_visit .modal-body .columna-centro .card.paso-demanda.paso3,
#modal_visit .modal-body .columna-centro .card.paso-demanda.paso3 thead.paso3-color tr th{
    border-radius:  15px 15px 0 0 !important ;
}


.progress-container_acc::before {
    content: "";
    background: #008fc5;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    height: 4px;
    width: 100%;
    z-index: -1;
  }
  
  .progress-container_acc {
    display: flex;
    justify-content: space-between;
    position: relative;
    margin-bottom: 30px;
    max-width: 100%;
    width: 300px;
  }
  
  .progress_acc {
    background: #008fc5;
    position: absolute;
    top: 50%;
    left: 1;
    height: 4px;
    width: 94%;
    z-index: 1;
    transition: 0.4s ease;
  }
  .circle_acc {
    background: #008fc5;
    color: #999;
    border-radius: 50%;
    height: 30px;
    width: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid #008fc5;
    transition: .4s ease;
  }


#view-document-acc #container-status-document-acc{
    margin-left: 60px;
    margin-right: 60px;
}

#view-document-acc #status_document {
    text-transform: uppercase;
    font-weight: bolder;
    font-size: 18px;
    margin: 0;
}

#view-document-acc div#container-status-document-acc {
    display: flex;
}

#view-document-acc div#status_icon {
    font-size: 2rem;
    margin-right: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-family: "Font Awesome 5 Free"; 
    font-weight: 900; 
}

#view-document-acc div#container-status-document-acc {
    padding: 10px 20px;
    border-radius: 7px;
}

#view-document-acc div#container-status-document-acc.aprobado{
    border: 1px solid #63b581;
    border-left: 0.25rem solid #63b581;
}

#view-document-acc div#container-status-document-acc.rechazado{
    border: 1px solid #e96464;
    border-left: 0.25rem solid #e96464;
}

#view-document-acc div#container-status-document-acc.pendiente{
    border: 1px solid #01b0f1;
    border-left: 0.25rem solid #01b0f1;
}

#view-document-acc div#container-status-document-acc.aprobado div#status_icon::before{
    color: #63b581; 
    content: "\f058";
}

#view-document-acc div#container-status-document-acc.rechazado div#status_icon::before{
    color: #e96464;
    content: "\f057";
}

#view-document-acc div#container-status-document-acc.pendiente div#status_icon::before{
    color: #01b0f1;
    content: "\f28b";
}


#view-document-prov-acc #container-status-document-prov{
    margin-left: 60px;
    margin-right: 60px;
}

#view-document-prov-acc #status_document {
    text-transform: uppercase;
    font-weight: bolder;
    font-size: 18px;
    margin: 0;
}

#view-document-prov-acc div#container-status-document-prov {
    display: flex;
}

#view-document-prov-acc div#status_icon {
    font-size: 2rem;
    margin-right: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-family: "Font Awesome 5 Free"; 
    font-weight: 900; 
}

#view-document-prov-acc div#container-status-document-prov {
    padding: 10px 20px;
    border-radius: 7px;
}

#view-document-prov-acc div#container-status-document-prov.aprobado{
    border: 1px solid #63b581;
    border-left: 0.25rem solid #63b581;
}

#view-document-prov-acc div#container-status-document-prov.rechazado{
    border: 1px solid #e96464;
    border-left: 0.25rem solid #e96464;
}

#view-document-prov-acc div#container-status-document-prov.pendiente{
    border: 1px solid #01b0f1;
    border-left: 0.25rem solid #01b0f1;
}

#view-document-prov-acc div#container-status-document-prov.aprobado div#status_icon::before{
    color: #63b581; 
    content: "\f058";
}

#view-document-prov-acc div#container-status-document-prov.rechazado div#status_icon::before{
    color: #e96464;
    content: "\f057";
}

#view-document-prov-acc div#container-status-document-prov.pendiente div#status_icon::before{
    color: #01b0f1;
    content: "\f28b";
}

.paso3-color{
    background: linear-gradient( 135deg, var(--cian) 10%, var(--cianCardClaro) 100%);
    color: var(--blanco)!important;
}

/* MODAL CONTENEDOR ACCESOS */
#modal_container_access  .card.paso-demanda .card-body table thead tr th,
#modal_container_access label{
    font-size: 14px;
    color: var(--cian)!important;
    font-weight: bold;
}

#modal_container_access input,
#modal_container_access select{
    border: 0;
    border-bottom: 1px solid var(--grisTipog);
    border-radius: 0;
    padding: 6px 0;
}

#modal_container_access input:focus,
#modal_container_access input:focus-visible,
#modal_container_access select:focus,
#modal_container_access select:focus-visible{
    border-color: inherit;
    -webkit-box-shadow: none;
     box-shadow: none;
}

#modal_container_access .modal-body .card.paso-demanda{
    border-radius: 15px;
}

#modal_container_access .modal-body .columna-izquierda{
    padding-right: 0px;
}

#modal_container_access .modal-body .columna-izquierda .card.paso-demanda{
    border-radius: 15px 0 0 15px !important;
}

.paso-demanda-points{
    border-radius: 0 !important;
    border-top-left-radius: 15px !important;
    border-top-right-radius: 15px !important;
}

#modal_container_access .modal-body .columna-centro{
    padding: 0;
}

#modal_container_access .modal-body .columna-centro .card.paso-demanda{
    border-radius: 0px !important;
}

#modal_container_access .modal-body .columna-derecha{
    padding-left: 0px;
}

#modal_container_access .modal-body .columna-derecha .card.paso-demanda{
    border-radius: 0 15px 15px 0 !important;
}

#modal_container_access .modal-footer .btn-secondary{
    position: relative;
    right: calc(85vw - 250px)
}

#modal_container_access .modal-body table.paso3 thead.paso3-color{
    background: linear-gradient( 135deg, var(--cian) 10%, var(--cianCardClaro) 100%);
}

#modal_container_access .card.paso-demanda .card-body table.paso3 thead.paso3-color tr th {
    color: var(--blanco)!important;
}

#modal_container_access .modal-body .columna-centro .card.paso-demanda.paso3,
#modal_container_access .modal-body .columna-centro .card.paso-demanda.paso3 thead.paso3-color tr th{
    border-radius:  15px 15px 0 0 !important ;
}


.call-animation-notification {
    background: #afafaf;
    width: 64px;
    height: 64px;
    position: relative;
    margin: 0 auto;
    border-radius: 100%;
    border: solid 5px #04afdb;
    animation: play-notification 2s ease infinite;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
  
}
.call-animation-notification  img {
    width: 54px;
    height: 54px;
    border-radius: 100%;
    position: absolute;
    left: 0px;
    top: 0px;
 }

@keyframes play-notification {

    0% {
        transform: scale(1);
    }
    15% {
        box-shadow: 0 0 0 5px rgba(4, 175, 219, 0.4);
    }
    25% {
        box-shadow: 0 0 0 10px rgba(4, 175, 219, 0.4), 0 0 0 20px rgba(4, 175, 219, 0.2);
    }

}

.notification-toats{
    opacity: 0;
    visibility: hidden;
    width: 450px;
    background-color: rgba(38, 38, 38, 0.98);
    position: fixed;
    bottom: -200px;
    right: 0;
    z-index: 9999;
    margin: 10px;
    border-radius: 15px;
    padding: 20px;
    box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
    transition: opacity .5s ease, bottom 1s ease;
}

.notification-animated-in{
    opacity: 1;
    visibility: visible;
    bottom: 0;
}

.notification-content{
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.call-animation{
    margin-left: 20px;
}

.notification-caller-info{
    color: #fafafa;
    font-size: 22px;
    font-weight: 600;
    width: 150px;
    max-width: 150px;
}

.notification-caller-info small{
    color: #a2a2a2;
    font-size: 16px;
    letter-spacing: 1px;
    font-weight: 200;
}

.notification-caller-info p{
    width: 150px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.notifications-buttons{
    display: flex;
    align-items: center;
    justify-content: space-between;

}

.btn-notification{
    cursor: pointer;
    padding: 10px 13px;
    border-radius: 49%;
    color: #fff;
    margin: 5px;
}

.notification-button-end-call{
    background: rgb(212,20,40);
    background: linear-gradient(90deg, rgba(212,20,40,1) 0%, rgba(215,14,14,1) 100%);
}
.notification-butto-answer-call{
    background: rgb(15, 148, 31);
    background: linear-gradient(90deg, rgb(15, 169, 56) 0%, rgb(14, 215, 37) 100%);
}

.input-demand-container{
    border: 0 !important;
    border-bottom: none !important;
    border-radius: 4px !important;
    padding: 0 10px !important;
    -webkit-appearance: none;
    -moz-appearance: none;
}