:root {
    --negro-360: #40474f;
    --gris-fuerte: #B1B2B0;
    --grid-bajo: #eee;
    --rojo-claro360: rgba(218, 41, 28);
    --shadow: #000;
    --shadow-rgb: 0,0,0;
    --shadow-light: rgba(0,0,0,0.08);
    --shadow-light-rgb: 0,0,0;
}

::-webkit-scrollbar {
    display: none;
}
@font-face {
    font-family: 'DINPro-Bold';
    font-style: normal;
    font-weight: normal;
    src: url('../../fonts/DINPro-Bold_13934.ttf') format('truetype');
}
@font-face {
    font-family: 'Helvetica-Neue-Light';
    font-style: normal;
    font-weight: normal;
    src: url('../../fonts/Helvetica/HelveticaNeueLight.ttf') format('truetype');
}
@font-face {
    font-family: 'Helvetica-Neue-Bold';
    font-style: normal;
    font-weight: normal;
    src: url('../../fonts/Helvetica/helvetica-neue-lt-std-75-bold-590b9e7229917.otf') format('opentype');
}
@font-face {
    font-family: 'Helvetica-Neue-Regular';
    font-style: normal;
    font-weight: normal;
    src: url('../../fonts/Helvetica/HelveticaNeueRegular.ttf') format('truetype');
}
/*******HEADER********/
header{
    position: fixed;
    top: 0px;
    width: 100%;
    height: 60px;
    background-color: var(--backgroundHeader);
    border-bottom: 3px solid rgba(218, 41, 28);
    display: flex;
    justify-content: space-between;
}
.cabezera{
    height: 100%;
    overflow: hidden;
}
.swal2-popup {
    display: flex;
    border-radius: 10px;
    background: #40474f;
}
.header1{
    height: 100%;
    display: flex;
    justify-content: center;
    width: 20%;
    max-width: 20%;
    text-align: center;
    padding: 15px 0;
    min-width: 20%;
}
.header1.personalizado{
    padding: 5px 0;
}
.header1.personalizado img{
    max-height: 100%;
    -webkit-backface-visibility: hidden;
    -ms-transform: translateZ(0); /* IE 9 */
    -webkit-transform: translateZ(0); /* Chrome, Safari, Opera */
    transform: translateZ(0);
}
.header1.personalizado img:first-child{

}
.header1.personalizado img:last-child{
    height: 70%;
}
.header1.personalizado div{
    width: 100%;
    height: 100%;
    cursor: pointer;
}
.header2 .menu {
    padding: 0;
    height: 100%;
    width: 100%;
}
.header3{
    width: 10%;
    max-width: 10%;
    text-align: end;
    padding: 0px;
    display: table;
    margin: auto;
    transition: 0.5s;
    color: white;
}
.containerHeader4{
    display: flex;
    vertical-align: middle;
    align-items: center;
    justify-content: space-between;
    font: 12px arial;
    height: 100%;
    color: var(--backgroundServiciosTexto);
}
.containerHeader4 #user{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    font-weight: bold;
    font-size:1rem;
}
.containerHeader4 #hamburger {
    position: relative;
    cursor: pointer;
    width: 27px;
    height: 30px;
    margin: 10px 15px 10px 15px;
    z-index: 1000;
}
.containerHeader4 .bar {
    display: block;
    width:100%;
    height:10%;
    margin-top:20%;
    background: var(--backgroundServiciosMenuHamburguesa);
    transition:0.25s;
    -webkit-transition:0.25s;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.containerHeader4 .animate .bar:nth-child(1) {
    transform:translateY(8px) rotate(135deg);
}
.containerHeader4 .animate .bar:nth-child(2) {
    opacity: 0;
}
.containerHeader4 .animate .bar:nth-child(3) {
    transform:translateY(-8px) rotate(-135deg);
}
.proyect_titles {
    display: grid;
    align-items: center;
    padding: 5px;
}
.proyect_title_top {
    font: bold 14px Arial !important;
    padding-top: 0px;
    margin-top: 0px !important;
    margin-bottom: 0px !important;
    text-align: end;
    display: none;
}
.proyect_title_bot {
    font: normal 12px Arial !important;
    padding-bottom: 2px;
    text-align: end;
    display: none;
}
.header-tituloSegmento{
    font-size: 1.25rem;
    color: #000;
    font-weight: bold;
    padding: 15px 0;
    display: none;
}
.iconServicios{
    font-size: 26px;
    float:left;
    cursor: pointer;
    margin: 0;
    padding: 12.6px 15px;
}
.iconServicios:hover, .iconServicios.active{
    background-color: transparent;
    color: white;
    margin: 0;
    padding: 12.6px 15px;
}
/********FIN DE HEADER********/
/********MENU SERVICIOS********/
.menuSercicios.segmento, .segmento .header3{
    background-color: var(--backgroundHeaderSegmento3);
}
#menuServiciosComerciales{
    position: fixed;
    top: 60px;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    background-color: black;
    z-index: 100;
    display: none;
}
.menuServicios.segmento{
    position: fixed;
    top: 60px;
    width: 100%;
    z-index: 100;
    display: none;
}
.menuServicios.segmento #servicios{
    max-height: calc(100vh - 120px);
    overflow: scroll;
    background-color:var(--backgroundServicios);
}
.menuSerciciosActive{
    display: block;
}
.menuServicios ul{
    display: flex;
    justify-content: space-evenly;
    padding: 10px 0 0 0;
    margin: 0;
}
.menuServicios ul li{
    list-style: none;
}
.menuServicios ul li a{
    text-align: center;
}
.menuServicios ul li div{
    text-align: center;
    width: auto;
    height: 40px;
}
.menuServicios ul li label{
    display: block;
    color: white;
    font-size: 0.875rem;
}
/********FIN DE HEADER********/
/********CERRAR SESION********/
section .overlay.active{
    background-color: rgba(0,0,0,0.7);
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
    transition:all 0.5s;
}
address p, address small, address a, address i, address li, address .service_label,
.dropdown-containerConfiguration{
    color: var(--backgroundMenuPerfilTexto);
}
.cerrarSesion, .cerrarSesion .perfil, .cerrarSesion .navegacion{
    background-color: var(--backgroundMenuPerfil);
}
.cerrarSesion{
    position: fixed;
    height: calc(100% - 90px);
    top: 60px;
    right: 0px;
    z-index: 1000;
    width: 40%;
    transform:translateX(100%);
    transition: 0.6s;
    overflow: hidden;
    margin-bottom: 0;
}
.cerrarAncho{
    transform: translateX(0%);
    transition: 0.6s;
}
.contSesion, .contConfiguracion, .contNotificaciones {
    height: calc(100% - 90px);
}
.configuracion{
    height:45px;
}
.contSesion{
    overflow: scroll;
    display:block;
    transition:all 0.8s;
}
.contConfiguracion{
    overflow: scroll;
    display:none;
    transition:all 0.8s;
}
.contConfiguracion p{
    font-size: 1.125rem;
    margin: 0;
    color: var(--backgroundMenuPerfilTexto);
    font-weight: bold;
    padding: 5% 5% 3%;
}
p.textConfiguration{
    padding: 4% 0%;
    font-size: 1rem;
    margin: 0;
    font-weight: normal;
    border-bottom: 0px;
}
.contConfiguracion .closeBtn, .contNotificaciones .closeBtn{
    width: 1.25rem;
    cursor: pointer;
    filter: var(--imagenesColor);
}
.bannerTitle{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--borderMenuPerfil);
}
.contNotificaciones .bannerTitle{
    border-bottom: 2px solid var(--borderMenuPerfil);
}
.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 18px;
    float: right;
}
.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--backgroundMenuConfiguracionSlider);
    border: 1px solid var(--borderMenuConfiguracionSlider);
    -webkit-transition: .4s;
    transition: .4s;
}
.slider:before {
    position: absolute;
    content: "";
    height: 13px;
    width: 13px;
    left: 4px;
    bottom: 2px;
    background-color: var(--controlMenuConfiguracionSlider);
    -webkit-transition: .4s;
    transition: .4s;
}
input:checked + .slider:before {
    background-color: #ffffff;
}
input:checked + .slider {
    background-color: #ff7a48;
    border: 1px solid #ff7a48;
}
input:checked + .slider:before {
    -webkit-transform: translateX(37px);
    -ms-transform: translateX(37px);
    transform: translateX(37px);
}
input[type=checkbox][disabled] + .slider{
    opacity:0.5;
}
.slider.round {
    border-radius: 20px;
}
.slider.round:before {
    border-radius: 50%;
}
.content-input input{
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}
.content-select select::-ms-expand {
    display: none;
}
.content-select{
    max-width: 100%;
    position: relative;
    padding-bottom: 5%;
}
.content-select select{
    display: inline-block;
    width: 100%;
    cursor: pointer;
    padding: 7px 10px;
    height: 40px;
    outline: 0;
    border: 0;
    border-radius: 0;
    background: var(--backgroundMenuConfiguracionSelect);
    font-size: 0.9rem;
    color: var(--textMenuConfiguracionSelect);
    border: 1px solid var(--borderMenuConfiguracionSelect);
    border-radius: 8px;
    position: relative;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url(https://landings360.s3.amazonaws.com/recursosLayout/img/arrowDownGray.svg);
    background-repeat: no-repeat;
    background-position: 96%;
    background-size: 14px;
}
.container-checkbox{
    display: flex;
    justify-content: space-between;
    align-content: center;
    width: 100%;
    margin: auto;
    align-items: center;
}
.container-check {
    display: inline;
    position: relative;
    padding-left: 35px;
    margin-bottom: 30px;
    cursor: pointer;
    font-size: 1.375rem;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    align-self: center;
}
.container-check input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}
.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 23px;
    width: 23px;
    background-color: #eee;
    border-radius: 50%;
}
.container-check:hover input ~ .checkmark {
    background-color: #ccc;
}
.container-check input:checked ~ .checkmark {
    background-color: #ff7a48;
}
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}
.container-check input:checked ~ .checkmark:after {
    display: block;
}
.container-check .checkmark:after {
    top: 7px;
    left: 7px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: white;
}
.sidenav a, .dropdown-btnConfiguration {
    font-size: 0.875rem;
    height: 50px;
    width: 100%;
    display: flex;
    text-decoration: none;
    color: gray;
    text-align: left;
    padding: 0px 0px 0px 5%;
    background-color: var(--colorMenuPerfilTexto5);
    transition: all 0.5s ease-out;
    cursor: inherit;
    overflow: hidden;
    align-items: center;
    justify-content: space-between;
    outline: none;
    border: 0px;
    border-top: 1px solid var(--borderMenuPerfil);
}
.sidenav a, .dropdown-btnConfiguration h6{
    color: var(--colorMenuPerfilTexto6);
}
.sidenav a, .dropdown-btnConfiguration:focus {
    outline: 0px;
    outline: none;
}
.sidenav a:hover, .dropdown-btnConfiguration:hover {
    background-color: var(--colorMenuPerfilTexto5);
}
.active {
    color: gray;
}
.dropdown-containerConfiguration {
    display: none;
    padding: 12px 20px;
    border-top: 1px solid var( --colorMenuPerfilTexto4);
}
.sidenav .arrowCustom{
    float: right;
    padding-right: 25px;
    width: 40px;
    height: 40px;
    filter: var(--imagenesColor);
}
.inputDiv {
    width: 100%;
    margin: 5px auto 10px;
    position: relative;
}
input[type='range'] {
    display: block;
    width: 100%;
    cursor:pointer;
}
input[type='range']:focus {
    outline: none;
}
input[type='range'],
input[type='range']::-webkit-slider-runnable-track,
input[type='range']::-webkit-slider-thumb {
    -webkit-appearance: none;
}
input[type=range]::-webkit-slider-thumb {
    background-color: #ff7a48;
    width: 20px;
    height: 20px;
    border: 3px solid #313131;
    border-radius: 50%;
    margin-top: -9px;
}
input[type=range]::-moz-range-thumb {
    background-color: #ff7a48;
    width: 15px;
    height: 15px;
    border: 3px solid #313131;
    border-radius: 50%;
}
input[type=range]::-ms-thumb {
    background-color: #ff7a48;
    width: 20px;
    height: 20px;
    border: 3px solid #313131;
    border-radius: 50%;
}
input[type=range]::-webkit-slider-runnable-track {
    background-color: #ececec;
    height: 3px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
    outline: none;
}
input[type=range]::-moz-range-track {
    background-color: #ececec;
    height: 3px;
}
input[type=range]::-ms-track {
    background-color: #ececec;
    height: 3px;
}
input[type=range]::-ms-fill-lower {
    background-color: HotPink
}
input[type=range]::-ms-fill-upper {
    background-color: #313131;
}
.containerSize{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    align-content: center;
}
.containerSize .small{
    font-size:0.875rem;
}
.containerSize .medium{
    font-size:1.125rem;
}
.containerSize .big{
    font-size:1.5625rem;
}
.containerSize p{
    color:#ff7a48;
    padding:0;
}
p.textSize{
    padding: 5% 0%;
    font-weight: 100;
    font-size: 0.9375rem;
}
.contNotificaciones{
    overflow: scroll;
    display:none;
    transition:all 0.8s;
}
.contNotificaciones p{
    font-size: 1.125rem;
    margin: 0;
    font-weight: bold;
    padding: 5% 5% 3%;
}
.contNotificaciones .bannerNotificacion{
    border-bottom:1px solid var(--borderMenuNotificaciones);
    cursor:pointer;
    padding: 1% 0%;
    transition:all 0.5s;
}
.contNotificaciones .bannerNotificacion:hover{
    background-color: var(--colorMenuPerfilTexto5);
    -webkit-font-smoothing: antialiased;
    -webkit-font-smoothing: subpixel-antialiased;
    border-left: 10px solid #a4a2a2;
}
.contNotificaciones .status{
    width: 10px;
    height: 10px;
    background-color: #0bb70b;
    position: absolute;
    bottom: 0px;
    right: 0px;
    border-radius: 100%;
}
.contNotificaciones .containerProfile{
    width: 35px;
    height: 35px;
    background-color: #3e3e3e;
    border-radius: 100%;
    text-align: center;
    cursor: pointer;
    margin: auto;
    object-fit: cover;
}
.contNotificaciones .profileName{
    color: #ffffff;
    font-weight: 600;
    font-size: 0.9375rem;
    line-height: 33px;
    border-bottom: 0px;
    overflow: hidden;
    height: 33px;
}
.containerImageStatus{
    width: 35px;
    max-width: 35px;
    height: 35px;
    max-height: 35px;
    margin: auto;
    position: relative;
    padding: 0;
}
.contNotificaciones .containerImageStatus img{
    display: block;
    width: 35px;
    height: 35px;
    border-radius: 100%;
    object-fit: cover;
    position:relative;
}
.contNotificaciones small{
    font-size: 0.625rem;
    margin: 0;
}
.contNotificaciones small.name{
    font-size: 0.75rem;
    margin: 0;
}
.badge{
    height: 15px;
    font-size: 0.825rem;
    line-height: 1px;
    padding: 8px 5px;
}
.cerrarSesion .perfil{
    width: 100%;
    height: auto;
    overflow-y: auto;
    padding: 15px 0px;
}
.cerrarSesion .perfil .foto{
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 0px 10px;
}
.cerrarSesion .perfil .foto .foto-perfil{
    width: 100px;
    border-radius: 100%;
    height: 100px;
    overflow: hidden;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}
.cerrarSesion .perfil .fotodef{
    width: 100px;
    border-radius: 100%;
    height: 100px;
    background-color: var(--backgroundImageProfile);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
}
.cerrarSesion .perfil .fotodef p{
    font-size: 3.125rem;
    color: var(--colorMenuPerfilTexto3);
    font-weight: bold;
    margin: 0;
}
.cerrarSesion .perfil .datos{
    width: 100%;
    height: auto;
    display: flex;
}
.cerrarSesion .perfil .datos .info{
    width: 100%;
    height: 100%;
    overflow: hidden;
    padding: 10px 0;
    text-align: left;
    margin-right: 0px;
    margin-left: 0px;
}
.cerrarSesion .perfil .datos .info p{
    margin-bottom: 0;
    padding: 5px 0px;
}
.cerrarSesion .perfil .datos .info .nombre,
.cerrarSesion .perfil .datos .info .correo,
.cerrarSesion .perfil .datos .info .ubicacion,
.cerrarSesion .perfil .datos .info .empresa,
.cerrarSesion .perfil .datos .info .sucursal,
.cerrarSesion .perfil .datos .info .semaforo{
    padding-left: 0;
    padding-right: 0;
}
.cerrarSesion .perfil .datos .info .nombre{
    font-size: 1.125rem;
    margin: 0;
    color: #da291c;
}
.cerrarSesion .perfil .datos .info .correo,
.cerrarSesion .perfil .datos .info .empresa,
.cerrarSesion .perfil .datos .info .ubicacion{
    font-size: 0.875rem;
}
.cerrarSesion .perfil .datos .info .lempresa{
    text-align: center;
}
.cerrarSesion .perfil .datos .info .lempresa img{
    width: 50px;
}
.cerrarSesion .perfil .datos .info .sucursal{
    font-size: 0.8125rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cerrarSesion .perfil .info .semaforo{
    margin-right: 0;
    margin-left: 0;
    font-size: 0.8125rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.colorS{
    border-radius:15px;
    width:15px;
    height:15px;
    margin: 5px;
    background-color: #ff6a00;
}
.cerrarSesion .navegacion{
    width: 100%;
    height: auto;
    border-top: 1px solid #fff;
    border-top: 2px solid #cccccc;
}
.cerrarSesion .navegacion nav{
    width: 100%;
    height: 100%;
    overflow-y: auto;
}
.cerrarSesion .navegacion nav .menu-sesion .menu-servicios{
    overflow: auto;
    white-space: nowrap;
    border-bottom: 2px solid #d4d4d4;
}
.cerrarSesion .navegacion nav .menu-sesion .menu-servicios .nservice{
    display: inline-block;
}
.cerrarSesion .navegacion nav .menu-sesion,
.cerrarSesion .navegacion nav .menu-sesion .menu-servicios,
.cerrarSesion .navegacion nav .menu-sesion .menu-segmentos{
    padding: 0;
}
.cerrarSesion .navegacion nav .menu-sesion li{
    font-size:1rem;
    display: block;
    border-bottom: 1px solid #d4d4d4;
    /*cursor: pointer;*/
}
.cerrarSesion .liPadding{
    padding: 5px 20px;
}
.cerrarSesion .navegacion nav .menu-sesion > li:hover,
.cerrarSesion .navegacion nav .menu-sesion > li a:hover,
.cerrarSesion .navegacion nav .menu-sesion .menu-servicios > li:hover,
.cerrarSesion .navegacion nav .menu-sesion .menu-segmentos > li:hover{
    background-color: #282828;
    color: white;
}
.cerrarSesion .navegacion nav .menu-sesion li a{
    font-size:1rem;
    display: block;
    text-decoration: none;
}
.cerrarSesion .navegacion nav .menu-sesion .menu-servicios li a{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    text-decoration: none;
    padding-left: 15px;
}
.cerrarSesion .navegacion nav .menu-sesion .menu-servicios li a .icono{
    height: 100%;
}
.cerrarSesion .navegacion nav .menu-sesion .menu-segmentos li a{
    display: block;
    padding-left: 15px;
    text-decoration: none;
    font-size: 0.875rem;
}
.cerrarSesion .navegacion nav .menu-sesion .menu-segmentos li a:hover{
    color:white;
}
.cerrarSesion .btn-sesion{
    width: 100%;
    height: 45px;
    background-color: var(--backgroundButtonMenuPerfil);
    border-top: 1px solid var(--borderMenuPerfil);
}
.cerrarSesion .btn-sesion .boton-sesion{
    display: block;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1rem;
    color: #000;
    text-decoration: none;
}
.toggleActiveS{
    background-color: #061d32;
    color: white;
}
.border-right {
    border-right:2px solid #c1c1c1!important;
    text-align: center;
}
.text-contact{
    color:var(--backgroundMenuPerfilTexto);
}

#nNotificaciones{
    margin-left: 5px;
    color: #fff;
}

.configuracion #btnConfiguracion, .configuracion #btnNotificaciones{
    width:1.25rem;
    cursor:pointer;
    filter:var(--imagenesColor);
}
.configuracion{
    width: 100%;
    margin: auto;
    padding: 2% 0%;
    background-color: var(--colorMenuPerfilTexto5);
}
.containerProfile{
    width: 23px;
    height: 23px;
    background-color: var(--backgroundImageProfile);
    border-radius: 50%;
    text-align: center;
    cursor: pointer;
}
.profileName{
    color: var(--colorMenuPerfilTexto3);
    font-weight: 600;
    font-size: 0.625rem;
    line-height: 25px;
}
.profileImg{
    width: 23px;
    height: 23px;
    border-radius: 50%;
    cursor: pointer;
    object-fit: cover;
}
/********FIN DE CERRAR SESION********/
#botonsesion {
    vertical-align: middle;
    width: 100%;
    height: 100%;
    background-color: var(--backgroundButtonMenuPerfil);
    color: var(--colorTextoMenuPerfil);
    text-align: center;
    border-color: transparent;
    font: bold 1rem arial;
    bottom: 0;
    left: 0;
    outline: none;
    transition:all 0.5s;
}
#botonsesion:hover{
    background-color: #da291c;
    color: white;
}
.menu li {
    display: inline-block;
    height: 60px;
    cursor: pointer;
    padding: 0;
    width: auto;
}
.header2 .menu li a{
    display: block;
    text-decoration: none;
    font-family: Arial;
    font-size: 0.875rem;
    font-weight: bold;
    color: white;
}
.header3 .btn-registrate, .btn-ingresa {
    background-color: #da291c;
    width: 130px;
    font-size: 0.78125rem;
    border-radius: 30px;
    padding: 3px;
    margin: 0;
    top:0px;
    right: 0px;
}
.menuServicios ul li a {
    text-align: center;
    display: block;
    cursor: pointer;
}

#menu_perfil{
    position: absolute;
    height: 40%;
    width: 100%;
    top: 0;
    left: 0;
}

#menu_modulos{
    position: absolute;
    height: calc(65% - 60px);
    width: 100%;
    left: 0;
    top: 35%;
    overflow: scroll;
}
#menu_perfil{
    position: absolute;
    height: 35%;
    width: 100%;
    top: 0;
    left: 0;
}
#menu_perfil .perfil{
    position: relative;
    width: 100%;
    height: 100%;
}
.img_perfil{
    position: absolute;
    width: 100%;
    height: 50%;
    top: 0;
    left: 0;
}
.img_perfil_user{
    background: black;
    position: absolute;
    padding: 15%;
    border-radius: 50%;
    margin: 5%;
    top: 0;
    left: 34.5%;
}
.info_perfil{
    position: absolute;
    width: 100%;
    height: 50%;
    top: 50%;
    left: 0;
    text-align: left;
    padding: 0 10px;
}
.miperfil360{
    width: 80%;
    padding: 3px;
}
.card_servicio{
    height: 130px;
    background: white;
    border-radius: 25px;
    margin: 8px 0;
}
.card_servicio .tittle{
    height: 30px;
    padding: 0 30px;
    border-bottom: solid 1px #dee2e6;
    color: black;
    text-align: left;
    display: flex;
    align-items: center;
    font: bold 0.9rem Arial;
}
.card_servicio .body{
    height: 100px;
    padding: 0 20px;
    color: black;
    text-align: left;
    display: flex;
    align-items: center;
    font: normal 0.9rem Arial;
}
.btn-registro{
    width: 70%;
    padding: 5px;
    font: normal 1rem Arial;
}
#registro_nuevo_modulo strong{
    color: red;
}
.segmento{
    color: black;
}
.segmento .header1 a{
    text-align: right;
    background-image: url(https://landings360.s3.amazonaws.com/recursosLayout/img/Claro360_Logo_Header_negro.png);
    height: 90%;
    width: 100%;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}
.segmento .header1 .headEmpresa{
    display: none;
}
.segmento .header1 .img360{
    text-align: right;
    background-image: url(../images/360360a.png);
    height: 90%;
    width: 100%;
    background-size: contain;
    background-position: left;
    background-repeat: no-repeat;
    display: none;
    left: 10px;
}
.segmento .header1 .txtlogo{
    padding: 0 3px 0 0;
    /*border-right: 2px solid #000;*/
    text-align: right;
    margin: auto;
    display: none;
}
.segmento .header1 .txtlogo h6{
    font-size: 1rem;
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
}
.segmento .header1 .imgEmpresa{
    text-align: right;
    /*border-right: 2px solid #000;*/
    background-image: url(../images/360360a.png);
    height: 90%;
    width: 100%;
    background-size: contain;
    background-position: right;
    background-repeat: no-repeat;
    display: none;
    right: 10px;
}
#lineaV{
    border-left:2px solid#000;
    width:2px;
    height:100%;
}
.segmento .header3{
    color: #000;
}
.menu-sesion ul li{
    background-color: var(--colorMenuPerfilTexto);

}
.menu-sesion ul li:hover {
    color:white;
}
/*--------HOME---------HOME----------HOME*/
.segmento .header2 .menu li a{
    color: var(--colorTextHeader);
    padding: 0 15px;
    height: 60px;
    display: flex;
    align-items: center;
    width: auto;
}
.segmento .header2 .menu li:hover{
    background-color: #a4a2a2;
    border-bottom: 4px solid #da291c;
    width: auto;
}
.segmento .header2 .menu li a:hover{
    color: #ffffff;
    width: auto;
}
.segActivo{
    background-color: #C8C5C2;
    width: auto;
}
.segActivo a{
    color: #000;
    padding: 0 15px;
    height: 60px;
    display: flex;
    align-items: center;
    width: auto;
    font-weight: bold;
}
.menuModalIcon.segmento{
    background-color: #fff;
}
.segmento #menuToggle span{
    background-color: #000;
}
.segmento .header2 .menu .activo{
    background-color: #C8C5C2;
    width: auto;
}
.segmento .header2 .menu .activo a{
    color: #fff;
}
.segmento .cerrarSesion .navegacion nav .menu-sesion > li:hover,
.segmento .cerrarSesion .navegacion nav .menu-sesion > li a:hover{
    background-color: #C8C5C2;
    color: #fff;
}
.segmento .menu-sesion ul li:hover{
    background-color: #C8C5C2;
    color: #fff;
}
.segmento .toggleActiveS{
    background-color: #C8C5C2;
    color: white !important;
}

/*-----PERSONA-------PERSONA------PERSONA-------*/
.persona .header3{
    background-color: #da291c;
    color: #fff;
}
.persona #sesionSegmento{
    background-color: #da291c;
}
.persona #sesionSegmento a{
    color: #fff;
}
.persona .header2 .menu li a{
    color: #000;
    padding: 0 15px;
    height: 60px;
    display: flex;
    align-items: center;
    width: auto;
}
.persona .header2 .menu li:hover {
    background-color: #da291c;
    width: auto;
}
.persona .header2 .menu li a:hover{
    color: #fff;
    width: auto;
}
.persona .menuModalIcon .segmento {
    background-color: #da291c;
}
.menuModalIcon.segmento.persona{
    background-color: #da291c;
}
.persona #menuToggle span{
    background-color: #fff;
}
.persona .header2 .menu .activo{
    background-color: #da291c;
    width: auto;
}
.persona .header2 .menu .activo a{
    color: #fff;
}
.persona .cerrarSesion .navegacion nav .menu-sesion > li:hover,
.persona .cerrarSesion .navegacion nav .menu-sesion > li a:hover{
    background-color: #da291c;
    color: #fff;
}
.persona .menu-sesion ul li:hover{
    background-color: #da291c;
    color: #fff;
}
.persona .toggleActiveS{
    background-color: #da291c;
    color: white !important;
}
.persona .btn-registrate, .persona .btn-ingresa{
    border: 1px solid white;
}
.persona .iconServicios{
    color:white;
    cursor: pointer;
}
.persona .containerHeader4 button span{
    color: white;
}
/*-----EMPRESA-------EMPRESA------EMPRESA-------*/
.empresa .header3{
    background-color: #A4A2A2;
    color: #fff;
}
.empresa #sesionSegmento{
    background-color: #A4A2A2;
}
.empresa #sesionSegmento a{
    color: #fff;
}
.empresa .header2 .menu li a{
    color: #000;
    padding: 0 15px;
    height: 60px;
    display: flex;
    align-items: center;
    width: auto;
}
.empresa .header2 .menu li:hover {
    background-color: #A4A2A2;
    width: auto;
}
.empresa .header2 .menu li a:hover{
    color: #fff;
    width: auto;
}
.empresa .menuModalIcon .segmento {
    background-color: #A4A2A2;
}
.menuModalIcon.segmento.empresa{
    background-color: #A4A2A2;
}
.empresa #menuToggle span{
    background-color: #fff;
}

.empresa .header2 .menu .activo{
    background-color: #A4A2A2;
    width: auto;
}
.empresa .header2 .menu .activo a{
    color: #fff;
}
.empresa .cerrarSesion .navegacion nav .menu-sesion > li:hover,
.empresa .cerrarSesion .navegacion nav .menu-sesion > li a:hover{
    background-color: #A4A2A2;
    color: #fff;
}
.empresa .menu-sesion ul li:hover{
    background-color: #A4A2A2;
    color: #fff;
}
.empresa .toggleActiveS{
    background-color: #A4A2A2;
    color: white !important;
}
.empresa .iconServicios{
    color:white;
    cursor: pointer;
}
.empresa .containerHeader4 button span{
    color: white;
}
/*-----CORPORATIVO-------CORPORATIVO------CORPORATIVO-------*/
.corporativo .header3{
    background-color: #282828;
    color: #fff;
}
.corporativo #sesionSegmento{
    background-color: #282828;
}
.corporativo #sesionSegmento a{
    color: #fff;
}
.corporativo .header2 .menu li a{
    color: #000;
    padding: 0 15px;
    height: 60px;
    display: flex;
    align-items: center;
    width: auto;
}
.corporativo .header2 .menu li:hover {
    background-color: #282828;
    width: auto;
}
.corporativo .header2 .menu li a:hover{
    color: #fff;
    width: auto;
}
.corporativo .menuModalIcon .segmento {
    background-color: #282828;
}
.menuModalIcon.segmento.corporativo{
    background-color: #282828;
}
.corporativo #menuToggle span{
    background-color: #fff;
}

.corporativo .header2 .menu .activo{
    background-color: #282828;
    width: auto;
}
.corporativo .header2 .menu .activo a{
    color: #fff;
}
.corporativo .cerrarSesion .navegacion nav .menu-sesion > li:hover,
.corporativo .cerrarSesion .navegacion nav .menu-sesion > li a:hover{
    background-color: #282828;
    color: #fff;
}
.corporativo .menu-sesion ul li:hover{
    background-color: #282828;
    color: #fff;
}
.corporativo .toggleActiveS{
    background-color: #282828;
    color: white !important;
}
.corporativo .iconServicios{
    color:white;
    cursor: pointer;
}
.corporativo .containerHeader4 button span{
    color: white;
}
/*-----GOBIERNO-------GOBIERNO------GOBIERNO-------*/
.gobierno .header3{
    background-color: #000;
    color: #fff;
}
.gobierno #sesionSegmento{
    background-color: #000;
}
.gobierno #sesionSegmento a{
    color: #fff;
}
.gobierno .header2 .menu li a{
    color: #000;
    padding: 0 15px;
    height: 60px;
    display: flex;
    align-items: center;
    width: auto;
}
.gobierno .header2 .menu li:hover {
    background-color: #000;
    width: auto;
}
.gobierno .header2 .menu li a:hover{
    color: #fff;
    width: auto;
}
.gobierno .menuModalIcon .segmento {
    background-color: #000;
}
.menuModalIcon.segmento.gobierno{
    background-color: #000;
}
.gobierno #menuToggle span{
    background-color: #fff;
}

.gobierno .header2 .menu .activo{
    background-color: #000;
    width: auto;
}
.gobierno .header2 .menu .activo a{
    color: #fff;
}
.gobierno .cerrarSesion .navegacion nav .menu-sesion > li:hover,
.gobierno .cerrarSesion .navegacion nav .menu-sesion > li a:hover{
    background-color: #000;
    color: #fff;
}
.gobierno .menu-sesion ul li:hover{
    background-color: #000;
    color: #fff;
}
.gobierno .toggleActiveS{
    background-color: #000;
    color: white !important;
}
.gobierno .iconServicios{
    color:white;
    cursor: pointer;
}
.gobierno .containerHeader4 button span{
    color: white;
}
.expanded_menu {
    /* position: absolute; */
    bottom: 0px;
    width: 100%;
    height: 30px;
    background: #d3d3d3;
    border-top: solid 2px #495057;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #343a40;
    font: bold 0.8rem Arial;
    cursor: pointer;
}
#servicios_grid {
    overflow: scroll;
    max-height: 320px;
}
.expand_menu{
    position: absolute;
    bottom: 0px;
    width: 100%;
    height: 30px;
    background: var(--backgroundServiciosBtn);
    border-top: solid 2px #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #343a40;
    font: bold 0.8rem Arial;
    cursor: pointer;
    bottom: 0;
    transition:height 0.5s;
}
.expand_menu p{
    color:var(--backgroundServiciosTexto);
}
.expand_menu:hover{
    height: 38px;
}
.service {
    width: 3.75rem;
    height: 3.75rem;
    margin: auto;
    /* background: white; */
    border-radius: 30px;
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat;
    border: none;
    filter:var(--imagenesColor);
}
.service_label {
    font: bold 0.8125rem Arial;
    text-align: center;
    padding: 5px 0;
    color: var(--backgroundServiciosTexto2);
}
.headerComercial{
    background-color: rgba(214, 214, 214, 0.7);
    border-bottom: 3px solid rgba(214, 214, 214, 0.7);
}
.headerComercial .header3{
    background-color: transparent;
    border-bottom: 3px solid transparent;
}
/*******************************************************************************************************************/
/* PORTRAIT */
/*// Small devices col */
@media (max-width: 576px) and (orientation: portrait) {
    .header1 {
        width: calc(100% - 58px);
        min-width: calc(100% - 58px);
        padding-left: 58px;
    }
    .header2{
        width: 0%;
        max-width: 0%;
        min-width: 0%;
        text-align: left;
        display: none;
    }
    .segmento .cabezera li a {
        padding: 0 10px;
    }
    .header3 {
        width: 0%;
        max-width: 0%;
        min-width: 0%;
    }
    .header3 .btn-registrate, .btn-ingresa {
        display: none;
    }
    .containerHeader4 {
        padding-top: 5px;
    }
    .menuModalIcon.segmento{
        width: 50px;
    }
    .iconServicios, #NombreDependencia, #user, #tipoSegmento{
        display: none !important;
    }
    .segmento.menuServicios {
        width: 90%;
        max-width: 90%;
        min-width: 90%;
        right: 0;
        display: none !important;
    }
    .persona .containerHeader4 button span{
        color: #000;
    }
    .empresa .containerHeader4 button span{
        color: #000;
    }
    .corporativo .containerHeader4 button span{
        color: #000;
    }
    .gobierno .containerHeader4 button span{
        color: #000;
    }
    .cerrarSesion{
        height: calc(100% - 136px);
        box-shadow: none;
        width: 92%;
    }
    .cerrarSesion .perfil .btn-perfil .boton-perfil{
        height: 30px;
        width: 200px;
    }
}
/*// Medium devices col-sm*/
@media only screen and (min-width: 576px) and (max-width:767px) and (orientation: portrait){
    .header1 {
        width: calc(100% - 58px);
        min-width: calc(100% - 58px);
        padding-left: 58px;
    }
    .header2{
        width: 0%;
        max-width: 0%;
        min-width: 0%;
        text-align: left;
        display: none;
    }
    .segmento .cabezera li a {
        padding: 0 10px;
    }
    .header3 {
        width: 0%;
        max-width: 0%;
        min-width: 0%;
    }
    .header3 .btn-registrate, .btn-ingresa {
        display: none;
    }
    .containerHeader4 {
        padding-top: 5px;
    }
    .menuModalIcon.segmento{
        width: 50px;
    }
    .iconServicios, #NombreDependencia, #user, #tipoSegmento{
        display: none !important;
    }
    .segmento.menuServicios {
        width: 50%;
        max-width: 50%;
        min-width: 50%;
        right: 0;
        display: none !important;
    }
    .persona .containerHeader4 button span{
        color: #000;
    }
    .empresa .containerHeader4 button span{
        color: #000;
    }
    .corporativo .containerHeader4 button span{
        color: #000;
    }
    .gobierno .containerHeader4 button span{
        color: #000;
    }
    .cerrarSesion{
        height: calc(100% - 136px);
        box-shadow: none;
        width: 50%;
    }
    .cerrarSesion .perfil .btn-perfil .boton-perfil{
        height: 30px;
        width: 200px;
    }
}
/*// Tablets col-md*/
@media only screen and (min-width: 768px) and (max-width:991px) and (orientation: portrait){
    .header1 {
        width: calc(100% - 58px);
        min-width: calc(100% - 58px);
        padding-left: 58px;
    }
    .header2{
        width: 0%;
        max-width: 0%;
        min-width: 0%;
        text-align: left;
        display: none;
    }
    .segmento .cabezera li a {
        padding: 0 10px;
    }
    .header3 {
        width: 0%;
        max-width: 0%;
        min-width: 0%;
    }
    .header3 .btn-registrate, .btn-ingresa {
        display: none;
    }
    .containerHeader4 {
        padding-top: 5px;
    }
    .menuModalIcon.segmento{
        width: 50px;
    }
    .iconServicios, #NombreDependencia, #user, #tipoSegmento{
        display: none !important;
    }
    .segmento.menuServicios {
        width: 45%;
        max-width: 45%;
        min-width: 45%;
        right: 0;
        display: none !important;
    }
    .persona .containerHeader4 button span{
        color: #000;
    }
    .empresa .containerHeader4 button span{
        color: #000;
    }
    .corporativo .containerHeader4 button span{
        color: #000;
    }
    .gobierno .containerHeader4 button span{
        color: #000;
    }
    .cerrarSesion{
        height: calc(100% - 136px);
        box-shadow: none;
        width:45%;
    }
}
/*// Desktops col-lg*/
@media only screen and (min-width: 992px) and (max-width:1199px) and (orientation: portrait){
    .header1 {
        width: 25%;
        min-width: 25%;
    }
    .header2{
        width: 45%;
        max-width: 45%;
        min-width: 45%;
    }
    .header3 {
        width: 30%;
        max-width: 30%;
        min-width: 30%;
    }
    .header3 .btn-registrate, .btn-ingresa {
        background-color: #da291c;
        width: 120px;
    }
    .menuModalIcon.segmento{
        width: 50px;
    }
    .header3, .segmento.menuServicios {
        width: 30%;
        max-width: 30%;
        min-width: 30%;
        right: 0;
    }
    .cerrarSesion{
        width: 30%;
    }
    .segmento .header2 .menu li a {
        font-size: 0.875rem;
        padding: 0 5px;
    }
}
/*// Large screens col-xl*/
@media (min-width: 1200px) and (orientation: portrait){
    .header1 {
        width: 25%;
        min-width: 25%;
    }
    .header2{
        width: 45%;
        max-width: 45%;
        min-width: 45%;
    }
    .header3 {
        width: 30%;
        max-width: 30%;
        min-width: 30%;
    }
    .header3 .btn-registrate, .btn-ingresa {
        background-color: #da291c;
        width: 120px;
    }
    .menuModalIcon.segmento{
        width: 50px;
    }
    .header3, .segmento.menuServicios {
        width: 30%;
        max-width: 30%;
        min-width: 30%;
        right: 0;
    }
    .segmento .header2 .menu li a {
        font-size: 0.875rem;
        padding: 0 10px;
    }
    .cerrarSesion{
        width: 30%;
    }
}


/* LANDSCAPE */
/*// Small devices col */
@media (max-width: 576px) and (orientation: landscape){
    .header1 {
        width: calc(100% - 58px);
        min-width: calc(100% - 58px);
        padding-left: 58px;
    }
    .header2{
        width: 0%;
        max-width: 0%;
        min-width: 0%;
        text-align: left;
        display: none;
    }
    .segmento .cabezera li a {
        padding: 0 10px;
    }
    .header3 {
        width: 0%;
        max-width: 0%;
        min-width: 0%;
    }
    .header3 .btn-registrate, .btn-ingresa {
        display: none;
    }
    .containerHeader4 {
        padding-top: 5px;
    }
    .menuModalIcon.segmento{
        width: 50px;
    }
    .iconServicios, #NombreDependencia, #user, #tipoSegmento{
        display: none !important;
    }
    .segmento.menuServicios {
        width: 30%;
        max-width: 30%;
        min-width: 30%;
        right: 0;
        display: none !important;
    }
    .persona .containerHeader4 button span{
        color: #000;
    }
    .empresa .containerHeader4 button span{
        color: #000;
    }
    .corporativo .containerHeader4 button span{
        color: #000;
    }
    .gobierno .containerHeader4 button span{
        color: #000;
    }
    .cerrarSesion{
        height: calc(100% - 136px);
        box-shadow: none;
        width:93%;
    }
}
/*// Medium devices col-sm*/
@media only screen and (min-width: 576px) and (max-width:767px) and (orientation: landscape){
    .header1 {
        width: calc(100% - 58px);
        min-width: calc(100% - 58px);
        padding-left: 58px;
    }
    .header2{
        width: 0%;
        max-width: 0%;
        min-width: 0%;
        text-align: left;
        display: none;
    }
    .segmento .cabezera li a {
        padding: 0 10px;
    }
    .header3 {
        width: 0%;
        max-width: 0%;
        min-width: 0%;
    }
    .header3 .btn-registrate, .btn-ingresa {
        display: none;
    }
    .containerHeader4 {
        padding-top: 5px;
    }
    .menuModalIcon.segmento{
        width: 50px;
    }
    .iconServicios, #NombreDependencia, #user, #tipoSegmento{
        display: none !important;
    }
    .segmento.menuServicios {
        width: 45%;
        max-width: 45%;
        min-width: 45%;
        right: 0;
        display: none !important;
    }
    .persona .containerHeader4 button span{
        color: #000;
    }
    .empresa .containerHeader4 button span{
        color: #000;
    }
    .corporativo .containerHeader4 button span{
        color: #000;
    }
    .gobierno .containerHeader4 button span{
        color: #000;
    }
    .cerrarSesion{
        height: calc(100% - 136px);
        box-shadow: none;
        width: 45%;
    }
    .cerrarSesion .perfil .btn-perfil .boton-perfil{
        height: 30px;
        width: 200px;
    }
}
/*// Tablets col-md*/
@media only screen and (min-width: 768px) and (max-width:991px) and (orientation: landscape){
    .header1 {
        width: calc(100% - 58px);
        min-width: calc(100% - 58px);
        padding-left: 58px;
    }
    .header2{
        width: 0%;
        max-width: 0%;
        min-width: 0%;
        text-align: left;
        display: none;
    }
    .segmento .cabezera li a {
        padding: 0 5px;
    }
    .header3 {
        width: 0%;
        max-width: 0%;
        min-width: 0%;
    }
    .header3 .btn-registrate, .btn-ingresa {
        background-color: #da291c;
        width: 95px;
        display : none;
    }
    .containerHeader4 {
        padding-top: 5px;
    }
    .menuModalIcon.segmento{
        width: 50px;
    }
    .iconServicios, #NombreDependencia, #user, #tipoSegmento{
        display: none !important;
    }
    .segmento.menuServicios {
        width: 40%;
        max-width: 40%;
        min-width: 40%;
        right: 0;
        display: none !important;
    }
    .persona .containerHeader4 button span{
        color: #000;
    }
    .empresa .containerHeader4 button span{
        color: #000;
    }
    .corporativo .containerHeader4 button span{
        color: #000;
    }
    .gobierno .containerHeader4 button span{
        color: #000;
    }
    .cerrarSesion{
        height: calc(100% - 136px);
        box-shadow: none;
        width: 40%;
    }
    .cerrarSesion .perfil .btn-perfil .boton-perfil{
        height: 30px;
        width: 200px;
    }
}
/*// Desktops col-lg*/
@media only screen and (min-width: 992px) and (max-width:1199px) and (orientation: landscape){
    .header1 {
        width: 25%;
        min-width: 25%;
    }
    .header2{
        width: 45%;
        max-width: 45%;
        min-width: 45%;
    }
    .header3 {
        width: 30%;
        max-width: 30%;
        min-width: 30%;
    }
    .menuModalIcon.segmento{
        width: 50px;
    }
    .header3, .segmento.menuServicios {
        width: 30%;
        max-width: 30%;
        min-width: 30%;
        right: 0;
    }
    .cerrarSesion{
        width: 30%;
    }
    .segmento .header2 .menu li a {
        font-size: 0.8125rem;
        padding: 0 5px;
    }
}

/*// Media especifica para laptops*/
@media (min-width: 1200px) and (max-width:1899px) and (orientation: landscape){
    .header1 {
        width: 20%;
        min-width: 20%;
    }
    .header2{
        width: 50%;
        max-width: 50%;
        min-width: 50%;
    }
    .header3 {
        width: 30%;
        max-width: 30%;
        min-width: 30%;
    }
    .menuModalIcon.segmento{
        width: 50px;
    }
    .header3, .segmento.menuServicios {
        width: 30%;
        max-width: 30%;
        min-width: 30%;
        right: 0;
    }
    .cerrarSesion{
        width:30%;
    }
}

/*// Large screens col-xl*/
@media (min-width: 1900px) and (orientation: landscape){
    .header1 {
        width: 20%;
        min-width: 20%;
    }
    .header2{
        width: 60%;
        max-width: 60%;
        min-width: 60%;
    }
    .header3 {
        width: 20%;
        max-width: 20%;
        min-width: 20%;
    }
    .menuModalIcon.segmento{
        width: 50px;
    }
    .header3, .segmento.menuServicios {
        width: 20%;
        max-width: 20%;
        min-width: 20%;
        right: 0;
    }
    .cerrarSesion{
        width: 20%;
    }
}

/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/*
    Created on : 5/10/2021, 05:34:34 PM
    Author     : Sammy Guergachi <sguergachi at gmail.com>
*/

body{
    font-family: Arial, sans-serif;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    font-size:1rem;
}
/********SECTION********/
section{
    position: fixed;
    top: 60px;
    width: 100%;
    height: calc(100% - 90px);
    overflow: hidden;
    z-index: 1;
    /* background: url('../images/fondosistema.jpg') rgba(0, 0, 0) fixed; */
    background-color: var(--backgroundMain);
}
section main, section aside{
    display: inline-block;
}
section main{
    float: right;
    overflow: auto;
}

section main.full{
    width: 100%!important;
}

section main .container-fluid{
    /*background-color: rgba(255, 255, 255, 0.6);
    border: 1px solid transparent;*/
}
/********FIN DE SECTION********/
/*******MAIN********/
#main .contenedor{
    width: 100%;
    height: auto;
    background-color: var(--backgroundMain);
}
#main .contenedor p, .contenedor h4, .contenedor h1{
    color:var(--colorMainText);
}
#main .contenedor i{
    color:var(--colorMainIcons);
}
#main .customCard{
    background-color:var(--backgroundCards);
    border: 0px;
    border: 2px solid var(--borderCards);
}
#main .card-header{
    border-bottom: 1px solid var(--borderCards);
    background-color: rgba(0,0,0,0);
}
/********FIN DE MAIN********/
/*******SIDEBAR********/
section aside{
    display: block;
    z-index: 10;
    position: relative;
    width: 40px;
    transition: all 1s ease-out;
    padding-bottom: 0px;
    /*background-color: #404951;*/
    height: 100%;
    overflow: hidden;
}
section main{
    width: calc(100% - 40px);
    height: 100%;
    padding: 0px;
    background-color: var(--backgroundMain);
    transition: all 1s ease-out;
}
section aside .titulo-menu{
    position: absolute;
    left: -100%;
    overflow: hidden;
    transition: all 1s ease-out;
}
section aside .boton-ocultar{
    position:relative;
    background-color: var(--backgroundContraerMenu);
    width: 100%;
    height: 40px;
    overflow: hidden;
    border-radius: 0 0px 0 0;
    display: inline-flex;
    /* align-items: center;
    justify-content: center; */
    border-bottom: 3px solid #ff6a00;
    transition: all 1s ease-out;
}
section aside .boton-ocultar .texto{
    display: none;
    font-family: Arial;
    font-weight: bold;
    font-size: 0.96875rem;
    /* writing-mode: vertical-lr;	 */
    transform: rotate(90deg);
    font-size: 1.125rem;
    color: var(--textContraerMenu);
    font-weight: bold;
    text-align: left;
    position:absolute;
    top:70px;
    z-index: 2;
    transition: transform 1s ease-out, top 1s ease-out, left 1s ease-out, margin-left 1s ease-out, margin-top 1s ease-out;
}
section aside .boton-ocultar p .fas{
    position: absolute;
    top: 10px;
    left: 18px;
}
section aside .titulo-menu{
    width: 0%;
    height: 55px;
    background-color:rgba(245, 245, 245);
    text-align: center;
    font-size: 1rem;
    padding: 5px;
    transition: width 1s linear;
    overflow: hidden;
    display: none;
    position: absolute;
}
section aside .boton-ocultar .icono,
section aside .boton-ocultar p{
    display: inline-block;
}
button.icono{
    background: transparent;
    border: 0px;
    color: var(--textContraerMenu);
    width: 30px;
    outline: none;
    padding: 0;
    margin-left: 5px;
    height: 40px;
    z-index:1;
}
section aside .container-arrow{
    display:none;
}
section aside.asideActive .container-arrow{
    display:block;
    position: absolute;
    top: 0px;
    right: 0px;
    left: 0;
    bottom: 0;
    padding-top: 0px;
    padding-left: calc(100% - 26px);
    padding-right: 15px;
    cursor: pointer;
}
section aside .fa-chevron-down{
    display: inline-block;
    transform: rotate(180deg);
    color:var(--textContraerMenu);
}
section aside .fa-chevron-down.up {
    display: inline-block;
    transform: rotate(0deg);
}
/********FIN DE SIDEBAR********/
/****************CONTENIDO MENU********************************/
section aside .contenidoMenu {
    width: 100%;
    background-color: var(--backgroundMenuPrincipal);
    border-radius: 0px 0px 2.5px 0px;
    transition: all 1s ease-out;
    max-height: calc(100% - 40px);
    overflow: scroll;
    height: 100%;
}
section aside .menu-principal{
    width: 100%;
}
section aside .boton-ocultar p{
    color: white;
    padding-top: 3px;
    font-family: Arial;
    font-size: 0.90625rem;
    font-weight: bold;
    text-align: left;
}
section aside .boton-ocultar p .texto{
    transform: rotate(180deg);
}
section aside .menu-principal a, .dropdown-btnMenuPrincipal {
    font-family: Arial;
    font-weight: bold;
    font-size: 0.875rem;
    height: 40px;
    width: 100%;
    display: flex;
    align-items: center;
    text-decoration: none;
    /*display: block;*/
    color: white;
    text-align: left;
    padding: 0px 0px 0px 0px;
    background-color: var(--backgroundItem2MenuPrincipal);
    transition: all 1s ease-out;
    cursor: inherit;
    overflow: hidden;
    margin: 0px 0;
    border-bottom: 1px solid var(--separatorBorderMenuPrincipalItems);
}
section aside .dropdown-btnMenuPrincipal {
    background: none;
    background-color: var(--backgroundItemMenuPrincipal);
    border: none;
    border-bottom: 2px solid var(--borderMenuPrincipalItems);
    width: 100%;
    text-align: left;
    outline: none;
    padding-left: 10px;
    padding-top: 0px;
    cursor: pointer;
    transition: all 1s ease-out;
}
section aside .dropdown-btnMenuPrincipal.active{
    border-bottom-color: #ff6a00;
}
section aside .menuInactivo .menu-principal .titulo .alias{
    color: var(--backgroundItemMenuPrincipalTexto);
    font-family: Arial;
    font-weight: bold;
    font-size: 0.9rem;
    padding: 3px 0px 0px 5px;
    margin-bottom: 0rem;
    overflow: hidden;
    cursor: pointer;
    display:none;
    width: calc(100% - 50px);
}
section aside .contenidoMenuActive .menu-principal .titulo .alias{
    display: inline-block;
}
section aside .menu-principal  a:hover{
    background: var(--backgroundItemMenuPrincipalHover);
}
section aside .menu-principal .titulo .icono{
    /*margin: -1rem;*/
    margin-left: -5px !important;
}
section aside .contenidoMenuActive .menu-principal .titulo .icono{
    margin: 0;
}
section aside .menu-principal .dropdown-containerMenuPrincipal {
    /*display: none;*/
    text-align: center;
}
section aside .menu-principal .dropdown-containerMenuPrincipal a{
    padding-top: 0px;
    cursor: pointer;
}
section aside .menu-principal .dropdown-containerMenuPrincipal a.active{
    background-color: #ff6a00;
}
section aside .menu-principal .dropdown-containerMenuPrincipal a.active .icono{
    filter: none;
}
section aside .menu-principal .dropdown-containerMenuPrincipal a.active .alias{
    color: #fff;
}
section aside .menuInactivo .menu-principal .icono{
    margin-left: 5px;
    background-size: cover;
    background-position: center center;
    width: 30px;
    height: 30px;
    background-repeat: no-repeat;
    filter: var(--iconosMenuPrincipal);
}
section aside .menuInactivo .menu-principal .icono i{
    font-size: 1.5625rem;
    margin-right: .5rem;
    width: 25px;
}
section aside .contenidoMenuActive .menu-principal .icono{
    background-size: cover;
    background-position: center center;
    width: 30px;
    height: 30px;
    margin: 0px 5px;
    background-repeat: no-repeat;
    filter:var(--iconosMenuPrincipal);
}
.menuInactivo .fa-chevron-up{
    display: none;
    /*transform: rotate(180deg);*/
}
.menuInactivo .fa-chevron-right{
    display: none;
}
.contenidoMenuActive .fa-chevron-up{
    color: var(--backgroundItemMenuPrincipalTexto);
    display: block;
    position: absolute;
    right: 0px;
    margin: 8px 15px 8px 10px;
    transform: rotate(0deg);
}
.contenidoMenuActive .collapsed .fa-chevron-up{
    transform: rotate(180deg);
}
.contenidoMenuActive .fa-chevron-right{
    display: block;
    cursor: pointer;
    position: absolute;
    right: 0px;
    margin: 8px 15px 8px 10px;
    color:#ffffff;
}
section aside .menuInactivo .menu-principal .dropdown-containerMenuPrincipal .alias{
    display: none;
    font-family: Arial;
    font-weight: 100;
    font-size: 0.875rem;
    margin: 4px 0px 0px 0px;
    padding: 0px 0px 0px 5px;
    color: var(--backgroundItemMenuPrincipalTexto);
    width: calc(100% - 75px);
}
.contenidoMenuActive .menu-principal .dropdown-containerMenuPrincipal .alias{
    display: inline-block !important;
    white-space: nowrap;
    /*overflow: hidden;*/
    text-overflow: ellipsis;
    width: 75%;
}
.customDropdown[aria-expanded="true"] .arrow{
    transform: rotate(45deg) translate(-5px, -5px);
}
.customDropdown[aria-expanded="true"] .arrow:before{
    transform: translate(10px, 0);
}
.customDropdown[aria-expanded="true"] .arrow:after{
    transform: rotate(90deg) translate(10px, 0);
}
.arrow{
    width: 8px;
    height: 8px;
    display: inline-block;
    position: relative;
    bottom: 0px;
    left: -10px;
    transition: 0.4s ease;
    margin-top: 0px;
    text-align: left;
    transform: rotate(45deg);
    float: right;
}
.arrow:before, .arrow:after {
    position: absolute;
    content: "";
    display: inline-block;
    width: 11px;
    height: 3px;
    background-color: #fff;
    transition: 0.4s ease;
}
.arrow:after {
    position: absolute;
    transform: rotate(90deg);
    top: -5px;
    left: 5px;
}
/**************MENú SECUNDARIO*****************/
section .menu-secundario{
    width: 25%;
    height: 100%;
    overflow: scroll;
    background-color: var(--backgroundMenuSecundarioServicios);
    border-left: 1px solid rgb(173 173 173 / 40%);
    position: absolute;
    top: 0;
    left: 40px;
    box-shadow: 0px 0px 5px #797979;
    transition: width 0.6s linear;
}
section .menu-secundario .tituloMSecundario{
    font-family: Arial;
    font-weight: bold;
    font-size: 0.96875rem;
    display: flex;
    justify-content: space-between;
    padding: 4px 10px 0px 10px;
    height: 40px;
    background-color: #f8f8ff;
    border-bottom: 5px solid #f58220;
}
section .menu-secundario .tituloMSecundario .fa-chevron-up{
    display: block;
    cursor: pointer;
    margin: auto 0;
}
section .menu-secundario .tituloMSecundario label{
    margin: auto;
}
section .menu-secundario .tituloMSecundario .fa-chevron-up,
section .menu-secundario .tituloMSecundario label{
    color: #000;
}
section .desplazarMenu{
    position: absolute;
    top: 0;
    left: 25%;
}
section .menu-secundario a, .dropdown-btnMenuSecundario {
    font-family: Arial;
    font-weight: bold;
    font-size: 0.875rem;
    height: 40px;
    width: 100%;
    display: flex;
    align-items: center;
    text-decoration: none;
    /*display: block;*/
    color: white;
    text-align: left;
    padding: 0px 0px 0px 15px;
    background-color: var(--backgroundItem2MenuPrincipal);
    transition: all 0.5s ease-out;
    cursor: inherit;
    overflow: hidden;
    margin: 5px 0;
}
section .dropdown-btnMenuSecundario {
    background: none;
    background-color: var(--backgroundItemMenuSecundario);
    border: none;
    border-bottom: 1px solid var(--borderMenuPrincipalItems);
    width: 100%;
    text-align: left;
    outline: none;
    padding-left: 10px;
    cursor: pointer;
    transition: all 0.5s ease-out;
}
section .menu-secundario .titulo .alias{
    color: var(--backgroundItemMenuPrincipalTexto);
    font-family: Arial;
    font-weight: bold;
    font-size: 0.9375rem;
    padding: 3px 0px 0px 15px;
    margin-bottom: 0rem;
    overflow: hidden;
    cursor: pointer;
    display:inline-block;
    width:calc(100% - 60px);
}
section .menu-secundario .titulo .alias.title{
    color: var(--colorMenuSecundarioServiciosTexto);
}
section .menu-secundario  a:hover{
    background: var(--backgroundItemMenuPrincipalHover);
}
section .menu-secundario .titulo .icono{
    margin: 0px !important;
    filter:var(--iconosMenuPrincipal);
}
section .menu-secundario .dropdown-containerMenuSecundario {
    /*display: none;*/
    text-align: center;
}
section .menu-secundario .dropdown-containerMenuSecundario a{
    padding-top: 5px;
    cursor: pointer;
}
section .menu-secundario .icono{
    margin-left: -10px;
    background-size: cover;
    background-position: center center;
    width: 30px;
    height: 30px;
    background-repeat: no-repeat;
}
section .menu-secundario .icono i{
    font-size: 1.5625rem;
    margin-right: .5rem;
    width: 25px;
}
section .menu-secundario .icono{
    background-size: cover;
    background-position: center center;
    width: 30px;
    height: 30px;
    margin: 0px 10px;
    background-repeat: no-repeat;
}
section .menu-secundario  .fa-chevron-up{
    color: var(--backgroundItemMenuPrincipalTexto);
    display: block;
    cursor: pointer;
    position: absolute;
    right: 0px;
    margin: 8px 15px 8px 10px;
    transform: rotate(0deg);
}
section .menu-secundario  .fa-chevron-up.title{
    color: var(--colorMenuSecundarioServiciosTexto);
}
section .menu-secundario .collapsed .fa-chevron-up{
    transform: rotate(180deg);
}
section .menu-secundario  .fa-chevron-right{
    display: block;
    cursor: pointer;
    position: absolute;
    right: 0px;
    margin: 8px 15px 8px 10px;
    color:#ffffff;
}
section .menu-secundario .dropdown-containerMenuSecundario .alias{
    display: none;
    font-family: Arial;
    font-weight: bold;
    font-size: 0.875rem;
    margin: 4px 0px 0px 0px;
    color: var(--backgroundItemMenuPrincipalTexto);
}

section .menu-secundario .dropdown-containerMenuSecundario .alias{
    display: inline-block !important;
    white-space: nowrap;
    /*overflow: hidden;*/
    text-overflow: ellipsis;
    width: 75%;
}
section .menu-secundario .backHome{
    align-items: center;
    justify-content: center;
    padding:10px;
    display: none;
}
section .menu-secundario .backHome p{
    color: var(--backgroundItemMenuPrincipalTexto);
    font-family: Arial;
    font-weight: bold;
    font-size: 0.9375rem;
    padding: 0px;
    margin-bottom: 0rem;
    overflow: hidden;
    cursor: pointer;
    display: inline-block;
}
section .menu-servicios #backMain{
    display:none;
    background-color: var(--backgroundItemMenuPrincipal);
    padding: 10px;
    cursor: pointer;
}
section .menu-secundario #backMain:hover{
    background-color: #f58220;
}
section .menu-secundario #backMain:hover p, section .menu-secundario #backMain:hover svg{
    color: #ffffff;
    fill: #ffffff !important;
    filter: none !important;
}
section .menu-servicios .icono{
    background-size: cover;
    background-position: center;
    width: 30px;
    height: 30px;
    margin: auto 10px;
    background-repeat: no-repeat;
    filter: var(--iconosMenuPrincipal);
}
section .menu-servicios .alias{
    color:white;
}
section .menu-secundario #vistaEmpresa, section .menu-secundario #vistaIncidentes,
section .menu-secundario #vistaPandemia{
    display:none;
    width: 100%;
    height: auto;
    padding-top:20px;
}
section .menu-secundario  i{
    color:white;
}
section .menu-secundario span{
    color: var(--backgroundItemMenuPrincipalTexto);
}
section .menu-secundario .container-filter{
    padding: 20px 10px 10px;
    display: none;
    justify-content: space-between;
    border-bottom: 2px solid var(--backgroundItemMenuPrincipalTexto);
    width: 90%;
    margin: auto;
}
section .menu-secundario .container-filter div{
    display: inline-flex;
}
section .menu-secundario .filters{
    padding: 30px 5px 10px;
}
section .menu-secundario .filters h6{
    color: var(--backgroundItemMenuPrincipalTexto);
}
section .menu-secundario .container-filter small{
    color: #1e90ff;
    cursor:pointer;
}
section .menu-secundario .container-filter small:hover{
    text-decoration: underline;
}
section .menu-secundario .containerPills{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    align-content: center;
}
section .menu-secundario .filtersPills{
    display: none;
    overflow-y: scroll;
    overflow-x: auto;
    width: auto;
    height: 100px;
    white-space: nowrap;
    flex-direction: row;
    flex-wrap: nowrap;
    position: relative;
    margin: 15px;
    align-items: flex-start;
    margin-bottom: 0;
}
section .menu-secundario .containerPills .pill{
    background-color: ghostwhite;
    color: black;
    border: 1px solid #ababab;
    border-radius: 8px;
    width: 100px;
    padding: 10px;
    text-align: center;
    font-size: 0.6875rem;
    margin: 5px;
    position: relative;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 0px;
    cursor: pointer;
}
section .menu-secundario .containerPills .pill:hover{
    box-shadow: 0px 0px 20px gray;
}
section .menu-secundario .containerPills .pill p{
    margin:0;
}
section .menu-secundario .containerPills .btn-check{
    position: absolute;
    clip: rect(0,0,0,0);
    pointer-events: none;
}
section .menu-secundario .containerPills .btn-primary{
    color: #000000;
    background-color: #f8f8ff;
    border: 0px;
    margin: 7px;
    width: 100px;
    font-size: 0.6875rem;
    padding: 12px;
}
section .menu-secundario .containerPills .btn-primary:not(:disabled):not(.disabled).active,
section .menu-secundario .containerPills .btn-primary:not(:disabled):not(.disabled):active,
.show>section .menu-secundario .containerPills .btn-primary.dropdown-toggle {
    color: #fff;
    background-color: #053f7d;
    border-color: #053f7d;
}
.btn-group, .btn-group-vertical {
    position: relative;
    display: -ms-inline-flexbox;
    display: inline-flex;
    vertical-align: middle;
    flex-wrap: wrap;
}
/* PILL FILTER */
section .menu-secundario .containerPills .pill .fa-times{
    color: gray;
    font-size: 0.875rem;
    position: absolute;
    top: 1px;
    right: 6px;
}
section .menu-secundario .containerPills .pill small{
    font-size: 0.6875rem;
    word-break: break-all;
    height: 15px;
    overflow: hidden;
    text-overflow: ellipsis;
}
section .menu-secundario .containerPills .pill-oneFilter,
section .menu-secundario .containerPills .pill-multipleFilter,
section .menu-secundario .containerPills .pill-allFilter{
    border-radius: 4px 4px 0px 0px;
    min-width: 100px;
}
section .menu-secundario .containerPills .pill-oneFilter:hover,
section .menu-secundario .containerPills .pill-multipleFilter:hover,
section .menu-secundario .containerPills .pill-allFilter:hover{
    box-shadow: none;
}
section .menu-secundario .containerPills .multiplePill small:first-child{
    margin-top:22px;
}
section .menu-secundario .containerPills .multiplePill small:last-child{
    margin-bottom: 12px;
}
section .menu-secundario .containerPills .multiplePill small{
    border-bottom: 1px solid gray;
    width: 85%;
    text-align: center;
    margin-bottom: 5px;
}
section .menu-secundario .containerPills .multiplePill.show,
section .menu-secundario .containerPills .multiplePill.collapsing{
    display:flex;
}
section .menu-secundario .containerPills .multiplePill{
    background-color: #f8f8ff;
    flex-direction: column;
    align-items: center;
    position: absolute;
    left: 0px;
    width: 100px;
    text-align: left;
    top: 50px;
    border-radius: 0px 0px 4px 4px;
}
section .menu-secundario .containerPills .pill p.detail{
    position: absolute;
    bottom: 0;
    right: 7px;
    font-size: 0.5625rem;
    color: #1e90ff;
    cursor:pointer;
}
section .menu-secundario .containerPills .pill-allFilter{
    background-color:#00a5b8;
}
section .menu-secundario .containerPills .pill-allFilter small,
section .menu-secundario .containerPills .pill-allFilter .fa-times{
    color:#ffffff;
}
body .containerModalFilters{
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.7);
    position: absolute;
    z-index: 1;
    display: none;
}
body .modalFiltersUncheck{
    background-color: #333B41;
    color: white;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    max-width: 340px;
    min-width: 265px;
    height: 190px;
    border-radius: 10px;
}
body .modalFiltersUncheck .title{
    color: #000000;
    text-align: left;
    display: block;
    background-color: ghostwhite;
    border-radius: 10px 10px 0px 0px;
    border-bottom: 3px solid #da291c;
    font-weight: 600;
    padding: 7px 20px;
    font-size: 0.78125rem;
}
body .modalFiltersUncheck .msg{
    padding: 20px;
    font-size: 0.71875rem;
    color: #d8d8d8;
    margin: 0;
    text-align: center;
    display: inline-block;
}
body .modalFiltersUncheck .subtitle{
    color: #ffffff;
    margin: 0;
    text-align: center;
    display: block;
    font-weight: 600;
}
body .modalFiltersUncheck button{
    background-color: #da291c;
    color: #ffffff;
    border: none;
    outline: none;
    border-radius: 6px;
    font-size: 0.65625rem;
    padding: 5px 20px;
    display: block;
    margin: auto;
}
body .modalFiltersUncheck button:hover{
    box-shadow: 2px 4px 5px black;
}
/* FIN PILL FILTER */
/* CUSTOM FILTER SELECT */
section .menu-secundario .selectFilters{
    padding: 30px 20px 20px;
    display: none;
    justify-content: center;
    align-items: center;
    align-content: center;
    flex-direction: column;
}
section .menu-secundario .selectFilters .multiselect {
    width: 100%;
    padding: 7px 0px;
}
section .menu-secundario .selectFilters .selectBox {
    position: relative;
}
section .menu-secundario .selectFilters .selectBox select {
    width: 100%;
    border:0px;
    color: var(--backgroundItemMenuPrincipalTexto);
    background-color: transparent;
    border-bottom:1px solid var(--backgroundItemMenuPrincipalTexto);
    padding-bottom: 5px;
}
section .menu-secundario .selectFilters .overSelect {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}
section .menu-secundario .selectFilters .checkboxes {
    display: none;
    border: 0px solid;
    background-color: var(--backgroundMenuSecundarioServiciosSelect);
    color: #ffffff;
    max-height: 300px;
    min-height: 300px;
    overflow-y: hidden;
    overflow: scroll;
    position: absolute;
    left: 20px;
    right: 20px;
}
section .menu-secundario .selectFilters #checkboxesR{
    z-index: 4;
}
section .menu-secundario .selectFilters #checkboxesE{
    z-index: 3;
}
section .menu-secundario .selectFilters #checkboxesS{
    z-index: 2;
}
section .menu-secundario .selectFilters #checkboxesA{
    z-index: 1;
}
section .menu-secundario .selectFilters .checkboxes label {
    display: block;
    padding: 5px 10px;
    border-bottom: 1px solid white;
    width: 90%;
    margin: 5px auto 0%;
}
section .menu-secundario .selectFilters .checkboxes label:hover {
    background-color: #1e90ff;
}
/* FIN CUSTOM FILTER SELECT */
/**********MENU ACTIVO************/
section aside .titulo-menuActive {
    width: 100% !important;
    display: block !important;
    transition: all 1s ease-out;
}
section .asideActive{
    width: 25%;
    height: 100%;
    top: 0;
    transition: all 1s ease-out;
}
section aside .boton-ocultarActive{
    /* display: block; */
    display:inline-flex;
    line-height: 40px;
    width: 100%;
    height: 40px;
    border-radius: 0;
    transition: all 1s ease-out;
}
section aside .boton-ocultar .pActive{
    display: block;
    /* writing-mode: horizontal-tb; */
    font-size: 1.125rem;
    transform: rotate(0deg);
    padding: 0;
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: 35px;
    line-height: 40px;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 2;
    transition: transform 1s ease-out, top 1s ease-out, left 1s ease-out, margin-left 1s ease-out, margin-top 1s ease-out;
}
section aside .boton-ocultar p .fasActive{
    display: block;
    float: left;
    padding-right: 1rem;
    padding-top: 3px;
}
section aside .titulo-menuActive{
    left: 0%;
    transition: all 1s ease-out;
}
section aside .contenidoMenuActive{
    position: absolute;
    height: 100%;
    max-height: 100%;
    padding-bottom: 75px;
    transition: all 1s ease-out;
    border-radius: 0px;
}
section .mainActive{
    width: 75%;
    transition: all 1s ease-out;
}
section .menu-secundarioActive{
    width: 25%;
    transition: all 1s ease-out;
}
/********FIN DE SIDEBAR********/
/********CHAT********/
.chat{
    position: absolute;
    right: 0;
    bottom: 60px;
    background-color: rgba(0, 0, 0);
    border-radius: 10px 0px 0px 10px;
    padding: 0px;
}
.chat .btn-chat,
.chat .soluciones{
    display: inline-block;
    padding-bottom: 12px;
}
.chat .btn-chat{
    color: rgba(245, 245, 245);
    width: 40px;
    text-align: center;
    cursor: pointer;
}
.chat .btn-chat .glbl{
    font-weight: bold;
    background-color: transparent;
    color: rgba(245, 245, 245);
    border: none;
}
.chat .btn-chat .titulo-chat{
    font-size: 0.75rem;
    font-weight: bold;
}
.chat .soluciones{
    padding-left: 10px;
    padding-right: 50px;
    display: none;
}
.chat .solucionesActive{
    display: inline-block;
}
.chat .soluciones .titulo{
    font-weight: bold;
    color: rgba(245, 245, 245);
}
.chat .soluciones .sub-titulo{
    font-size: 0.625rem;
    color: rgba(245, 245, 245);
}
/********FIN CHAT********/
/********FOOTER********/
footer{
    position: fixed;
    bottom: 0px;
    background-color: var(--backgroundFooter);
    width: 100%;
    height: 30px;
    display: flex;
    justify-content: space-between;
}
footer .texto,
footer .logo{
    height: 100%;
}
footer .logo img{
    width: 60px;
    height: 15px;
    margin-top: 5px;
    margin-right: 10px;
}
footer .texto h6{
    padding-top: 10px;
    margin-left: 15px;
    font-size: 0.5625rem;
    font-weight: 500;
    color: rgba(255, 255, 255);
}
/********FIN FOOTER********/
/*******************************************************************************************************************/
/* PORTRAIT */
/*// Small devices col */
@media (max-width: 576px) and (orientation: portrait) {
    section main{
        width: 100%;
        height: calc(100% - 0px);
        padding: 15px 15px 5px 15px;
        transition: all 0s ease-out;
    }
    /********SECTION SIDEBAR********/
    section aside{
        position: relative;
        left: 0;
        height: auto;
        padding-bottom: 0;
        transition: width 1s ease-out;
        max-height: calc(100% - 0px);
    }
    section aside .boton-ocultar{
        height: 35px;
        position: absolute;
        overflow: hidden;
        box-shadow: 1px 0px 5px rgb(92 92 92 / 82%);
    }
    section aside .contenidoMenu{
        height: 0;
        transition: all 0s ease-out;
    }
    section aside .boton-ocultarActive{
        position: unset;
    }
    section aside .boton-ocultar p{
        display: none;
    }
    section .asideActive .boton-ocultar p{
        display: block;
    }
    /**********Menú-Activo Principal************/
    section .asideActive{
        position: absolute;
        width: 92%;
        max-height: calc(100% - 0px);
        transition: width 1s ease-out;
        box-shadow: 1px 0px 5px rgb(92 92 92 / 25%);
    }
    section aside .contenidoMenuActive {
        height: calc(100% - 30px);
        max-height: calc(100% - 30px);
        padding-bottom: 0;
    }
    section aside .menu-principal .titulo p {
        font-size: 1rem;
    }
    section aside .menu-principal a, .dropdown-btnMenuPrincipal{
        font-size: 0.8125rem;
    }
    /********FOOTER*************************/
    footer .texto h6{
        font-size: 0.5rem;
    }
    /********FIN DEL FOOTER********/
}
/*// Medium devices col-sm*/
@media only screen and (min-width: 576px) and (max-width:767px) and (orientation: portrait){
    section main{
        width: 100%;
        height: calc(100% - 0px);
        padding: 15px 15px 5px 15px;
        transition: all 0s ease-out;
    }
    /********SECTION SIDEBAR********/
    section aside{
        position: relative;
        left: 0;
        max-height: calc(100% - 0px);
        padding-bottom: 0;
        transition: width 1s ease-out;
    }
    section aside .boton-ocultar{
        height: 35px;
        position: absolute;
        overflow: hidden;
        box-shadow: 1px 0px 5px rgb(92 92 92 / 82%);
    }
    section aside .contenidoMenu{
        height: 0;
        transition: all 0s ease-out;
    }
    section aside .boton-ocultarActive{
        position: unset;
    }
    section aside .boton-ocultar p{
        display: none;
    }
    section .asideActive .boton-ocultar p{
        display: block;
    }
    /**********Menú-Activo Principal************/
    section .asideActive{
        position: absolute;
        width: 45%;
        height: calc(100% - 0px);
        transition: width 1s ease-out;
        box-shadow: 1px 0px 5px rgb(92 92 92 / 25%);
    }
    section aside .contenidoMenuActive {
        height: calc(100% - 30px);
        max-height: calc(100% - 30px);
        padding-bottom: 0;
    }
    section aside .menu-principal .titulo p {
        font-size: 1rem;
    }
    section aside .menu-principal a, .dropdown-btnMenuPrincipal{
        font-size: 0.8125rem;
    }
}
/*// Tablets col-md*/
@media only screen and (min-width: 768px) and (max-width:991px) and (orientation: portrait){
    section main{
        width: 100%;
        height: calc(100% - 0px);
        padding: 15px 15px 5px 15px;
        transition: all 0s ease-out;
    }
    /********SECTION SIDEBAR********/
    section aside{
        position: relative;
        left: 0;
        height: calc(100% - 0px);
        padding-bottom: 0;
        transition: width 1s ease-out;
    }
    section aside .boton-ocultar{
        height: 35px;
        position: absolute;
        overflow: hidden;
        box-shadow: 1px 0px 5px rgb(92 92 92 / 82%);
    }
    section aside .contenidoMenu{
        height: 0;
        transition: all 0s ease-out;
    }
    section aside .boton-ocultarActive{
        position: unset;
    }
    section aside .boton-ocultar p{
        display: none;
    }
    section .asideActive .boton-ocultar p{
        display: block;
    }
    /**********Menú-Activo Principal************/
    section .asideActive{
        position: absolute;
        width: 40%;
        height: calc(100% - 0px);
        transition: width 1s ease-out;
        box-shadow: 1px 0px 5px rgb(92 92 92 / 25%);
    }
    section aside .contenidoMenuActive {
        height: calc(100% - 30px);
        max-height: calc(100% - 30px);
        padding-bottom: 0;
    }
}
/*// Desktops col-lg*/
@media only screen and (min-width: 992px) and (max-width:1199px) and (orientation: portrait){
    section .mainActive {
        width: 75%;
    }
    section .asideActive{
        transition: width 1s ease-out;
        box-shadow: 1px 0px 5px rgb(92 92 92 / 25%);
    }
    section main {
        width: calc(100% - 40px);
    }
}
/*// Large screens col-xl*/
@media (min-width: 1200px) and (orientation: portrait){
    section .mainActive {
        width: 75%;
    }
    section .asideActive{
        transition: width 1s ease-out;
        box-shadow: 1px 0px 5px rgb(92 92 92 / 25%);
    }
    section main {
        width: calc(100% - 40px);
    }
}


/* LANDSCAPE */
/*// Small devices col */
@media (max-width: 576px) and (orientation: landscape){
    section main{
        width: 100%;
        height: calc(100% - 0px);
        padding: 15px 15px 5px 15px;
        transition: width 0s ease-out;
    }
    /********SECTION SIDEBAR********/
    section aside{
        position: relative;
        left: 0;
        height: calc(100% - 0px);
        padding-bottom: 0;
        transition: all 1s ease-out;
    }
    section aside .boton-ocultar{
        height: 35px;
        position: absolute;
        overflow: hidden;
        box-shadow: 1px 0px 5px rgb(92 92 92 / 82%);
    }
    section aside .contenidoMenu{
        height: 0;
        transition: all 0s ease-out;
    }
    section aside .boton-ocultarActive{
        position: unset;
    }
    section aside .boton-ocultar p{
        display: none;
    }
    section .asideActive .boton-ocultar p{
        display: block;
    }
    /**********Menú-Activo Principal************/
    section .asideActive{
        position: absolute;
        width: 90%;
        height: calc(100% - 0px);
        transition: width 1s ease-out;
        box-shadow: 1px 0px 5px rgb(92 92 92 / 25%);
    }
    section aside .contenidoMenuActive {
        height: calc(100% - 30px);
        max-height: calc(100% - 30px);
        padding-bottom: 0;
    }
    section aside .menu-principal .titulo p {
        font-size: 1rem;
    }
    section aside .menu-principal a, .dropdown-btnMenuPrincipal{
        font-size: 0.8125rem;
    }
}
/*// Medium devices col-sm*/
@media only screen and (min-width: 576px) and (max-width:767px) and (orientation: landscape){
    section main{
        width: 100%;
        height: calc(100% - 0px);
        padding: 15px 15px 5px 15px;
        transition: all 0s ease-out;
    }
    /********SECTION SIDEBAR********/
    section aside{
        position: relative;
        left: 0;
        height: calc(100% - 0px);
        padding-bottom: 0;
        transition: width 1s ease-out;
    }
    section aside .boton-ocultar{
        height: 35px;
        position: absolute;
        overflow: hidden;
        box-shadow: 1px 0px 5px rgb(92 92 92 / 82%);
    }
    section aside .contenidoMenu{
        height: 0;
        transition: all 0s ease-out;
    }
    section aside .boton-ocultarActive{
        position: unset;
    }
    section aside .boton-ocultar p{
        display: none;
    }
    section .asideActive .boton-ocultar p{
        display: block;
    }
    /**********Menú-Activo Principal************/
    section .asideActive{
        position: absolute;
        width: 50%;
        height: calc(100% - 0px);
        transition: width 1s ease-out;
        box-shadow: 1px 0px 5px rgb(92 92 92 / 25%);
    }
    section aside .contenidoMenuActive {
        height: calc(100% - 30px);
        max-height: calc(100% - 30px);
        padding-bottom: 0;
    }
    section aside .menu-principal .titulo p {
        font-size: 1rem;
    }
    section aside .menu-principal a, .dropdown-btnMenuPrincipal{
        font-size: 0.8125rem;
    }
}
/*// Tablets col-md*/
@media only screen and (min-width: 768px) and (max-width:991px) and (orientation: landscape){
    section main{
        width: 100%;
        height: calc(100% - 0px);
        padding: 15px;
        transition: all 0s ease-out;
    }
    /********SECTION SIDEBAR********/
    section aside{
        position: relative;
        left: 0;
        height: calc(100% - 0px);
        padding-bottom: 0;
        transition: width 1s ease-out;
    }
    section aside .boton-ocultar{
        height: 35px;
        position: absolute;
        overflow: hidden;
        box-shadow: 1px 0px 5px rgb(92 92 92 / 82%);
    }
    section aside .contenidoMenu{
        height: 0;
        transition: all 0s ease-out;
    }
    section aside .boton-ocultarActive{
        position: unset;
    }
    section aside .boton-ocultar p{
        display: none;
    }
    section .asideActive .boton-ocultar p{
        display: block;
    }
    /**********Menú-Activo Principal************/
    section .asideActive{
        position: absolute;
        width: 40%;
        height: calc(100% - 0px);
        transition: width 1s ease-out;
        box-shadow: 1px 0px 5px rgb(92 92 92 / 25%);
    }
    section aside .contenidoMenuActive {
        height: calc(100% - 30px);
        max-height: calc(100% - 30px);
        padding-bottom: 0;
    }
    section aside .menu-principal .titulo p {
        font-size: 1rem;
    }
    section aside .menu-principal a, .dropdown-btnMenuPrincipal{
        font-size: 0.8125rem;
    }
}
/*// Desktops col-lg*/
@media only screen and (min-width: 992px) and (max-width:1199px) and (orientation: landscape){
    section .mainActive {
        width: 75%;
    }
    section .asideActive{
        transition: width 1s ease-out;
        box-shadow: 1px 0px 5px rgb(92 92 92 / 25%);
    }
    section main {
        width: calc(100% - 40px);
    }
}
/*// Large screens col-xl*/
@media (min-width: 1200px) and (orientation: landscape){
    section main{
        width: calc(100% - 40px);
    }
    section .mainActive {
        width: 80%;
    }
    section .asideActive {
        width: 20%;
        transition: width 1s ease-out;
        box-shadow: 1px 0px 5px rgb(92 92 92 / 25%);
    }
}

/*
Click nbfs://nbhost/SystemFileSystem/Templates/Licenses/license-default.txt to change this license
Click nbfs://nbhost/SystemFileSystem/Templates/JSP_Servlet/CascadeStyleSheet.css to edit this template
*/
/*
    Created on : 16 nov. 2021, 16:12:04
    Author     : verac
*/

.con-scroll-visible::-webkit-scrollbar {
    width: 8px;     /* Tamaño del scroll en vertical */
    height: 8px;    /* Tamaño del scroll en horizontal */
    display: block;  /* Ocultar scroll */
}

.con-scroll-visible.con-scroll-visible-chico::-webkit-scrollbar {
    width: 4px;     /* Tamaño del scroll en vertical */
    height: 4px;    /* Tamaño del scroll en horizontal */
    display: block;  /* Ocultar scroll */
}

.con-scroll-visible::-webkit-scrollbar-thumb {
    background: #ccc!important;
    border-radius: 4px!important;
}

.con-scroll-visible::-webkit-scrollbar-thumb:hover {
    background: #b3b3b3!important;
    box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.2)!important;
}

.con-scroll-visible::-webkit-scrollbar-thumb:active {
    background-color: #999999!important;
}

.con-scroll-visible::-webkit-scrollbar-track {
    background: #e1e1e1!important;
    border-radius: 4px!important;
}

.con-scroll-visible::-webkit-scrollbar-track:hover,
.con-scroll-visible::-webkit-scrollbar-track:active {
    background: #d4d4d4!important;
}

.centrado-flexbox{
    display: flex;
    justify-content: center;
    align-items: center;
}

.cursor-pointer{
    cursor: pointer;
}

.btn-claro360{
    border-radius: 50px;
    border-color: #da291c;
    padding: 5px 20px;
    color: #fff;
    background-color: #da291c;
}

.btn-claro360:hover{
    color: #fff;
}

#collapseServicios>div,
#servicios>div{
    cursor: pointer;
}

.border-left-primary {
    border-left: 0.15rem solid #4e73df !important;
}

/*
***************************************************************************************
NOTIFICACION DE LLAMADA MULTIPLATAFORMA CON ALERT 360
***************************************************************************************
*/
.plantilla___notificacion_llamada{
    background: #40474f!important;
}

.plantilla___notificacion_llamada .texto-acotado{
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.plantilla___notificacion_llamada .img-emisor{
    max-width: 120px;
    margin: auto;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    border-radius: 5px;
    width: 100%;
    height: 100%;
}

.plantilla___notificacion_llamada .footer_alert_360{
    padding-top: 0!important;
}

.plantilla___notificacion_llamada .footer_alert_360 .btn_alert_360.btn_cancelar_alert_360{
    color: #fff!important;
}

.plantilla___notificacion_llamada .content-img-emisor{padding-left: 0;padding-right: 5px;}

.plantilla___notificacion_llamada .label-correo{
    font-size: 0.8rem;
}

.plantilla___notificacion_llamada .label-telefono{
    font-size: 0.7rem;
}

.plantilla___notificacion_llamada .label-fecha{
    font-size: 0.7rem;
}