/*Panel CSS 0.1.40 by Apolo Service*/
@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');
@import url('https://fonts.googleapis.com/css2?family=Titillium+Web:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700&display=swap');

@font-face {
    font-family: 'Titilium Web';
    src: url(../fonts/Titillium-Regular.otf);
}

/*Prueba centralizada*/

:root {
    --financiera-title-height: 70px;
}

body {
    margin: 0;
    padding: 0;
    color: #222;
    font-family: "Titillium Web", sans-serif !important;
    /*font-family: 'Titillium Web', Titilium, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;*/
    /*font-weight: 400;
    line-height: 1.5;
    font-size: 1rem;
    text-align: left;
    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";*/
}

a,
a:hover,
a:active,
a:visited,
a:focus {
    text-decoration: none;
    outline: 0;
}

/* Estilo para icono de Popover FME*/
.info-icon {
    margin-left: 10px;
    cursor: pointer;
    color: #0d6efd;
}

    .info-icon:hover {
        color: #0a58ca;
    }

/*Estilos de Widgets*/
.container-tbwidgets {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    max-width: 100%;
    gap: 10px;
}

.widget-tbmenu {
    border-radius: 20px;
    padding: 10px;
    box-sizing: border-box;
    flex-grow: 1;
    margin-bottom: 10px !important;
}

    .widget-tbmenu:nth-child(1) {
        background-color: #f2f2f2;
        color: #333333;
    }

    .widget-tbmenu:nth-child(2) {
        background-color: var(--primary-color-50);
        color: #ffffff;
    }

    .widget-tbmenu:nth-child(3) {
        background-color: #333333;
        color: #ffffff;
    }

    .widget-tbmenu:nth-child(4) {
        background-image: url("../imagenes/timebilling/grafico-reporte-tb.png");
        color: #333333;
        background-repeat: no-repeat;
        background-size: cover;
    }

    .widget-tbmenu:nth-child(5) {
        background-color: var(--secondary-color);
        color: #333333;
    }

.totalesInfo {
    margin-bottom: 5px;
}

.botonesInfo {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    font-size: 0.7rem;
}

    .botonesInfo > .btnExclusico {
        background-color: green;
        color: #ffffff;
    }

    .botonesInfo > .a, .botonesInfo > a {
        background-color: #f2f2f2;
        color: #333333;
    }

    .botonesInfo > .a, .botonesInfo > a, .botonesInfo > .btnExclusico {
        width: 70px;
        text-align: center;
        padding: 10px !important;
        border-radius: 20px;
        margin: 0px 5px;
        box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
        cursor: pointer;
        border: solid 0px;
    }

        .botonesInfo > .a:active, .botonesInfo > a:active, .botonesInfo > .btnExclusico:active {
            box-shadow: rgba(0, 0, 0, 0.17) 3px 3px 6px 0px inset, rgba(255, 255, 255, 0.5) -3px -3px 6px 1px inset;
        }

.groupInfo {
    display: flex;
    flex-direction: column;
    width: 100%;
    text-align: left;
    height: 100%;
    justify-content: space-between;
}

.numerosInfo {
    height: 50px;
    display: flex;
    align-items: center;
}

    .numerosInfo > p {
        font-size: 3rem;
        margin: 0;
        line-height: 1;
    }

.containerNumeros > p {
    font-size: 2rem;
    margin: 0;
    padding: 10px;
}

.containerNumeros {
    background: #ffffffb5;
    border-radius: 20px;
    text-align: center;
    justify-content: center;
}

.numerosInfo > img {
    width: 100%;
    height: 100%;
}

.tituloInfo {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
}

.iconoWidget {
    margin-right: 10px;
    background: #d2d2d27a;
    border-radius: 10px;
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
}

    .iconoWidget i {
        font-size: 10px;
    }

.tituloInfo > p {
    font-size: 0.9rem;
    font-weight: 600;
    margin: 0;
}

.e-schedule .e-vertical-view .e-day-wrapper .e-appointment {
    background: #0dcaf0 !important;
    border: 1px solid #dee2e6 !important;
    border-radius: 2px;
    color: #fff;
    overflow: hidden;
    position: absolute;
}
/*Fin de estilos de widgets*/

.card i {
    padding-left: 0px;
    transition: 0.5s ease;
    color: #808080;
}

.card:hover i {
    padding-left: 20px;
    transition: padding-left 0.5s ease;
}

.tags-input-container {
    display: flex;
    flex-wrap: wrap;
    border: 1px solid #ccc;
    padding: 5px;
    border-radius: 5px;
}

.tag {
    background-color: #107FC9;
    color: white;
    padding: 5px;
    margin: 2px;
    border-radius: 3px;
    display: inline-flex;
    align-items: center;
}

    .tag .remove-tag {
        margin-left: 5px;
        cursor: pointer;
    }

.tags-input-container input {
    border: none;
    outline: none;
    flex: 1;
    padding: 5px;
}


/*Estilo de botones*/
/*Estilo de botón general*/
.btn-general-apolo {
    padding: 10px 30px;
    border-radius: 20px;
    font-size: 1rem !important;
    font-weight: 500;
    border: none;
    margin-bottom: 10px;
    width: auto;
    display: inline-block;
    text-align: center;
}

    .btn-general-apolo:hover {
        box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
    }

.btn_bg_primary {
    background-color: var(--primary-color-50);
}

.btn_bg_secundary {
    background-color: var(--secondary-color);
}

.btn_bg_light {
    background-color: #f2f2f2;
}

.btn_bg_dark {
    background-color: #333333;
}

.btn_bg_primarylight {
    background-color: var(--secondary-color);
}

.btn_bg_primarydark, bg_primarydark {
    background-color: var(--primary-color-70);
}

.btn_bg_secundarydark {
    background-color: var(--secondary-color);
}

/*INICIA PANEL DE CONTROL*/
.close {
    background: none;
    border: none;
    color: #ffffff;
    font-size: 20px;
}

.scroll-mt {
    scroll-margin-top: 100px;
}

.modal-content {
    border-radius: 20px !important;
    border: none !important;
    background-color: #ffffff !important;
}

    .modal-content:hover {
        box-shadow: rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.04) 0px 10px 10px -5px;
    }

.modal-header {
    border-top-left-radius: 20px !important;
    border-top-right-radius: 20px !important;
}

.text.apolo-y {
    color: var(--secondary-color);
}

.text-apolo-b {
    color: var(--primary-color-50);
}

.text-apolo-darkgray {
    color: #333;
}

.text-apolo-gray {
    color: #555;
}

.p-class {
    margin-top: 0;
    margin-bottom: 0;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
}

.container-principal-apolo {
    position: relative;
    top: -120px;
    margin-bottom: -120px;
}

.bg-topimage {
    background: url('../imagenes/home/bg_slide2.png') no-repeat center center fixed;
    background-size: cover;
    background-attachment: initial;
}

.bg-servicebackround {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    background-color: black;
    opacity: 0.5;
    z-index: 0;
}

.bg-apolo-disabled {
    background-color: #6c757d !important;
    color: #333 !important;
    border: 1px solid #333 !important;
    opacity: 0.3 !important;
}

.main-background {
    width: 100%;
    height: 600px;
    object-fit: cover;
    object-position: top;
}

.main-info-block {
    margin: 0 auto;
    width: 80%;
    background-color: #333;
    color: #fff;
}

.bg-apolo-y {
    background-color: var(--secondary-color) !important;
}

.bg-apolo-b {
    background-color: var(--primary-color-50) !important;
}

.bg-apolo-darkblue {
    background-color: #0548a6 !important;
}

.bg-apolo-darkyellow {
    background-color: #ad8502 !important;
}

.bg-apolo-darkgray {
    background-color: #333 !important;
}

.bgloading-keyframe {
    animation-duration: 2s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-name: preloadAnimation;
    animation-timing-function: linear;
    background: #f6f7f8;
    background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
    min-height: 50px;
}

    .bgloading-keyframe.slow {
        animation-duration: 5s;
    }

@keyframes preloadAnimation {
    0% {
        background-position: -769px;
    }

    100% {
        background-position: 769px;
    }
}

.main-title {
    font-size: 3rem;
}

.title-caption {
    font-size: 2.5rem;
}

.subtitle-caption {
    font-size: 1.3rem;
}

.subtitle-minimo {
    font-size: 0.9rem;
}

.image-servicios {
    width: 100%;
    height: 500px;
    object-fit: cover;
    object-position: top;
}

.image-porqueapolo {
    height: 500px;
    object-fit: cover;
    object-position: top;
}

.servicios-caption {
    font-weight: bold;
    font-size: 1.5rem;
    text-align: center;
    min-height: 80px;
}

.form-input {
    background-color: #ededed;
}

.ul-footer {
    list-style: none;
    padding: 0;
}

    .ul-footer li:before {
        content: "-";
    }

.logo-apolo-panel {
    width: 200px;
}

.menu-apolo {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

    .menu-apolo li {
        float: left;
    }

        .menu-apolo li:before {
            content: "";
        }

        .menu-apolo li a {
            display: block;
            color: white;
            text-align: center;
            padding: 16px;
            text-decoration: none;
        }

.menu-item {
    color: #fff !important;
}

.menu-item-apolo {
    min-width: 100px;
    height: 100%;
    font-weight: bold;
    border-right: 2px solid white;
    font-size: 1rem;
    padding: 30px;
}

    .menu-item-apolo.menu-bar {
        border-left: 2px solid white;
    }

    .menu-item-apolo:hover {
        background-color: var(--primary-color-70);
        opacity: 0.5;
        cursor: pointer;
    }

    .menu-item-apolo.user {
        background-color: var(--primary-color-70);
        /*background-color: #0548a6;*/
    }

        .menu-item-apolo.user:hover {
            background-color: var(--primary-color-70);
            opacity: 0.5;
            /*background-color: #164280;*/
        }

.menu-item-last {
    border: 0;
}

.menu-item-apolo .menu-item-png {
    width: 20px;
}

.otros-item {
    width: 20%;
}

    .otros-item .img-item {
        height: 220px;
        overflow: hidden;
    }

.form-item {
    width: 40%;
    padding: 10px 50px;
}

.toggle-user-apolo {
    width: 400px;
    background-color: #fff;
    color: #555;
    position: fixed;
    z-index: 1020;
    top: 88px;
    right: 10px;
    -moz-transition: left 300ms;
    -webkit-transition: left 300ms;
    transition: left 300ms;
    box-shadow: 0 24px 54px rgba(0,0,0,.15),0 4.5px 13.5px rgba(0,0,0,.08);
    -webkit-box-shadow: 0 24px 54px rgba(0,0,0,.15),0 4.5px 13.5px rgba(0,0,0,.08);
}

.toggle-profile-apolo {
    width: 380px;
    background-color: #fff;
    color: #555;
    border-radius: 20px;
    position: fixed;
    top: 88px;
    right: 10px;
    padding: 20px;
    -moz-transition: 2s;
    -webkit-transition: 2s;
    transition: 3s;
    box-shadow: 0 24px 54px rgba(0,0,0,.15), 0 4.5px 13.5px rgba(0,0,0,.08);
    -webkit-box-shadow: 0 24px 54px rgba(0,0,0,.15), 0 4.5px 13.5px rgba(0,0,0,.08);
}

.btn-perfil {
    background: #f2f2f2;
    padding: 5px;
    border-radius: 20px;
    width: 200px;
    color: var(--primary-color-50) !important;
    cursor: pointer;
}

    .btn-perfil:hover {
        background: #e8e8e8;
        padding: 5px;
        border-radius: 20px;
        width: 200px;
        color: var(--primary-color-50) !important;
        cursor: pointer;
    }

.imgPerfil {
    border-radius: 50%;
    width: 100px;
    height: 100px;
    margin-bottom: 10px;
}

.opcionesToggle {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

    .opcionesToggle > a {
        font-size: 1rem;
        color: var(--primary-color-50);
    }

.sesion-top-content {
    width: 400px;
    display: flex;
    flex-flow: row nowrap;
}

.sesion-top-left {
    width: 120px;
    display: flex;
    padding: 5px;
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
}

.sesion-top-right {
    width: 250px;
    display: flex;
    flex-flow: row wrap;
    padding: 5px;
}

.user-circle {
    width: 85px;
    height: 85px;
    line-height: 85px;
    border-radius: 50%;
    text-align: center;
    background-color: #0d943f;
    color: #fff;
    font-size: 2rem;
}

.toggle-menu-apolo {
    width: 400px;
    height: 100vh;
    background-color: var(--primary-color-50);
    color: #fff;
    position: fixed;
    z-index: 1020;
    top: 88px;
    left: -400px;
    -ms-overflow-style: none; /* for Internet Explorer, Edge */
    scrollbar-width: none; /* for Firefox */
    overflow-y: scroll;
    -moz-transition: left 300ms;
    -webkit-transition: left 300ms;
    transition: left 300ms;
}

    .toggle-menu-apolo::-webkit-scrollbar {
        display: none; /* for Chrome, Safari, and Opera */
    }

.show-menu-apolo {
    left: 0px;
}

.toggle-menu-apolo ul {
    list-style: none;
    padding: 0;
}

    .toggle-menu-apolo ul li {
        padding: 20px;
    }

        .toggle-menu-apolo ul li .menu-lateral {
            color: #fff;
        }

        .toggle-menu-apolo ul li:hover {
            background-color: var(--primary-color-40);
            color: #fff;
            cursor: pointer;
        }

            .toggle-menu-apolo ul li:hover .menu-lateral {
                color: #fff;
            }

.btn-alerta-menu {
    width: 30px;
    margin: 0px 10px;
}

    .btn-alerta-menu.invert {
        filter: invert(1);
    }

.hover-grayscale:hover img {
    filter: brightness(0.3);
}

.no-menu-link:hover {
    background-color: var(--primary-color-50) !important;
    color: var(--primary-color-50) !important;
    cursor: var(--primary-color-50) !important;
}


.close-menu-apolo {
    background-color: transparent;
    text-align: right;
    padding: 5px 15px !important;
}

    .close-menu-apolo a {
        color: #fff !important;
    }

    .close-menu-apolo:hover {
        background-color: transparent !important;
    }

.onmouse-pointer {
    cursor: pointer;
}

    .onmouse-pointer:hover {
        filter: brightness(0.7);
    }

.sponsor-image {
    margin: 5px 20px;
    width: 100px;
    object-fit: contain;
}

.btn-apolo-azul {
    color: #fff;
    background-color: var(--primary-color-50);
    border-color: var(--primary-color-50);
    border-radius: 25px;
}

.btn-apolo-yellow {
    color: #333;
    background-color: var(--secondary-color);
    border-color: var(--secondary-color);
    border-radius: 25px;
}

.servicios-label {
    padding: 5px;
    color: #fff;
    font-size: 1.3rem;
    text-align: center;
}

.hyperlink-underline {
    color: #fff;
}

    .hyperlink-underline:hover {
        color: #fff;
        text-decoration: underline;
    }

.porque-apolo-container {
    width: 43%;
}

.social-icon {
    width: 27%;
}

.footer-menu-apolo {
    border-right: 2px solid white;
}

.store-icon {
    width: 100%;
    object-fit: contain;
}

.apolo-beneficios {
    width: 45%;
    margin: 2px;
}

    .apolo-beneficios .apolo-beneficios-content {
        width: 100%;
        height: 100px;
    }

.apolo-beneficios-content.yellow {
    background-color: var(--secondary-color);
}

.apolo-beneficios-content.azul {
    background-color: var(--primary-color-50);
}

.apolo-beneficios-content.gray {
    background-color: #555;
}

.apolo-beneficios-content.darkgray {
    background-color: #333;
}

.apolo-beneficios:hover {
    opacity: 0.5;
}

    .apolo-beneficios:hover .servicios-label {
        color: #fff;
    }

.otros-servicios-items {
    position: relative;
    top: -120px;
    margin-bottom: -120px;
}

.float-main {
    width: 300px;
    border: 2px solid var(--primary-color-50);
    border-bottom-left-radius: 30px;
    border-top-right-radius: 30px;
    padding: 0px 10px;
    background-color: #fafafa;
    position: fixed;
    z-index: 1021;
    bottom: 20px;
    right: 10px;
    display: none;
    flex-direction: column
}

.float-title-content {
    display: flex;
    position: relative;
    top: -30px;
    margin-bottom: -30px;
    height: 60px;
    background-color: #e82c2c; /*var(--secondary-color);*/
    border-top-left-radius: 60px;
    border-bottom-left-radius: 60px;
    border-top-right-radius: 30px;
    box-shadow: 8px 5px 10px #333;
}

    .float-title-content.float-min {
        /*display:none;*/
        top: auto;
        margin-bottom: auto;
        position: fixed;
        bottom: 20px;
        right: 10px;
        z-index: -1;
        /*height:60px; 
            background-color: #e82c2c;*/ /*#fac414;*/
        /*border-top-left-radius:60px;
            border-bottom-left-radius:60px;
            border-top-right-radius:30px;
            box-shadow: 8px 5px 10px #333;*/
    }

.float-close {
    position: absolute;
    top: -10px;
    right: 0;
    width: 20px;
    height: 20px;
    background-color: #ccc; /*#e82c2c; */
    border-radius: 20px;
    color: #222;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
}

.float-title-logo {
    background-color: #fafafa;
    border: 3px solid var(--primary-color-50);
    width: 60px;
    height: 60px;
    border-radius: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    flex: 0 0 60px;
}

.float-title-caption {
    background-color: #e82c2c; /*#fac414;*/
    flex-grow: 1;
    border-top-right-radius: 30px;
    padding: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
}

    .float-title-caption .float-caption {
        display: block;
        font-size: 0.9rem;
        color: #fff; /*#333;*/
        font-weight: bold;
    }



.horizontal-centro {
    text-align: center;
    margin: auto;
}

.vertical-centro {
    display: flex;
    align-items: center;
}

.contact-info {
    width: 260px;
    padding: 0px 15px 0px 5px
}

.user-action-icon {
    font-size: 1.1rem;
}

.flex-gap-user {
    gap: 10px;
}

.components-reconnect-show, .components-reconnect-failed, .components-reconnect-rejected {
    display: none;
}

/*Extra elements*/
#minFloatAlerta:hover .float-title {
    color: var(--secondary-color) !important; /*#fff  !important;*/
    cursor: pointer;
}

.hiddenField {
    display: none !important;
}

.fadeinit {
    opacity: 1;
    transition-duration: 0.5s;
    transition-property: opacity;
}

    .fadeinit.hide {
        opacity: 0 !important;
    }

.shakeframe {
    /* Start the shake animation and make the animation last for 0.5 seconds */
    animation: shake 0.5s;
}

@keyframes shake {
    0% {
        transform: translate(1px, 1px) rotate(0deg);
    }

    10% {
        transform: translate(-1px, -2px) rotate(-1deg);
    }

    20% {
        transform: translate(-3px, 0px) rotate(1deg);
    }

    30% {
        transform: translate(3px, 2px) rotate(0deg);
    }

    40% {
        transform: translate(1px, -1px) rotate(1deg);
    }

    50% {
        transform: translate(-1px, 2px) rotate(-1deg);
    }

    60% {
        transform: translate(-3px, 1px) rotate(0deg);
    }

    70% {
        transform: translate(3px, 1px) rotate(-1deg);
    }

    80% {
        transform: translate(-1px, -1px) rotate(1deg);
    }

    90% {
        transform: translate(1px, 2px) rotate(0deg);
    }

    100% {
        transform: translate(1px, -2px) rotate(-1deg);
    }
}

table > .thead-apolo-b {
    background-color: var(--primary-color-50);
    color: #fff;
}

.btnSubir {
    position: fixed;
    width: 50px;
    height: 50px;
    bottom: 40px;
    right: 50px;
    text-align: center;
    line-height: 50px;
    z-index: 999;
    cursor: pointer;
}

    .btnSubir:hover {
        text-decoration: none;
        color: white;
    }

.container-pasos a {
    color: var(--primary-color-50) !important;
}



.container-footer {
    width: 100%;
    padding-right: 0;
    padding-left: 0;
    margin-right: 0;
    margin-left: 0;
}

.container-banner {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    display: flex;
    flex-wrap: wrap;
    margin-top: calc(-1 * var(--bs-gutter-y));
    margin-right: 0;
    margin-left: 0;
    width: 100%;
}

.banner-rs {
    width: 100%;
}

.col-12x {
    width: 99%;
}

.tag-apolo .tag-input {
    max-width: 300px;
}


#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

/*Nuevos estilos para Panel configuración de usuario*/
.formularioShow {
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
    padding: 20px;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
}

.containerFormulario {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 500px;
    margin: auto;
    max-width: 100%;
}

.grupoColumna, .grupoFila {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.grupoFila, .imgPerfilDatos {
    flex-direction: row;
}

.grupoColumna, .groupdatosperfil {
    flex-direction: column;
}

.grupoFila > h1 {
    font-size: 1.2rem;
}

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

    .grupoInput inputInfo {
        display: flex;
        flex-direction: row;
    }

    .grupoInput > textarea {
        border-radius: 10px;
        border: solid 1px #d8d8d8;
        height: 100px;
    }

.card-header {
    padding: 0.5rem 1rem;
    margin-bottom: 0;
    background-color: rgba(0,0,0,.03);
    border-radius: 20px;
}

.groupdatosperfil > h1 {
    font-size: 1.3rem;
    font-weight: 600;
    color: #333333;
}

.groupdatosperfil > h5 {
    font-size: 1rem;
}

.grupoInput > input, .grupoInput > select {
    border: solid 1px #e1e1e1;
    height: 35px;
    border-radius: 10px;
    padding: 0px 10px;
    width: 100%;
}

.grupoInput > .grupoFila > input:first-child, .grupoInput > .grupoFila > select:first-child {
    border: solid 1px #e1e1e1;
    height: 35px;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    padding: 0px 10px;
    width: 100%;
}

.grupoInput > .grupoFila > input:last-child, .grupoInput > .grupoFila > select:last-child {
    border: solid 1px #e1e1e1;
    height: 35px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    padding: 0px 10px;
    width: 100%;
    border-left: 0;
}

.grupoInput > input:hover {
    background: #f2f2f2;
    border: solid 1px var(--primary-color-50);
    height: 35px;
    border-radius: 10px;
    padding: 0px 10px;
}

.btn-round {
    border-radius: 10px;
    padding: 0px 10px;
}

.btn-apolo-seccion {
    background: #ffffff;
    border: none;
    color: #333333;
}

    .btn-apolo-seccion:hover {
        background: #107fc92b;
        border: none;
        color: #333333;
    }

    .btn-apolo-seccion:checked {
        background: #107fc92b;
        border: solid 2px red;
        color: #333333;
    }

    .btn-apolo-seccion.active {
        background: #f2f2f2;
        border: none;
        color: var(--primary-color-50);
        font-weight: 600;
        z-index: 1;
    }

.tituloSeccion {
    font-size: 1.4rem;
    font-weight: 600;
    text-align: center;
}

.parrafoSeccion {
    font-size: 1.0rem;
    font-weight: 100;
}

.btnSubirImagen {
    background-color: #3498db;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.imgPerfilDatos, .groupdatosperfil {
    width: 100%;
    text-align: center;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.imgPerfil {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    object-fit: cover;
}

.insigniaPro {
    background: var(--primary-color-50);
    color: #ffffff;
    font-size: 0.7rem;
    font-weight: 500;
    /*width: 70px;*/
    text-align: center;
    padding: 5px;
    border-radius: 10px;
}

.hidden-input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.btns {
    display: none;
    position: absolute;
    top: 70%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #107fc985;
    color: #fff;
    border: none;
    cursor: pointer;
    border-radius: 5px;
    z-index: 1;
}

.imgPerfilDatos:hover .btns {
    display: block;
}

.cpr {
    width: 100%;
    display: flex;
    flex-direction: row;
}

.containerSecciones, .containerSectorOpciones {
    width: 100%;
    background-color: #fff;
    border-radius: 10px;
    padding: 20px;
    min-width: 60%;
    margin: 0 auto;
}

.containerSecciones {
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
}

.containerSectorOpciones {
    border: solid 1px #f2f2f2;
}

.containerPerfil {
    width: 40%;
    margin-right: 20px;
}

.opcionesInfo {
    overflow: auto;
    display: flex;
    justify-content: space-between;
}

    .opcionesInfo::-webkit-scrollbar {
        display: flex;
    }

    .opcionesInfo::-webkit-scrollbar-thumb, .opcionesInfo::-webkit-scrollbar-button {
        display: none;
    }

/*Acordion en listados*/
.accordion {
    border: 1px solid #ccc;
    margin: 10px;
    padding: 10px;
}

.accordion-button {
    background-color: #f1f1f1;
    border: none;
    padding: 10px;
    width: 100%;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.3s ease-in-out;
}

    .accordion-button:hover {
        background-color: #ddd;
    }

.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-in-out;
}

    .accordion-content p {
        margin: 0;
    }

.titleAcordion {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 5px !important;
}

    .titleAcordion i {
        font-size: 20px;
        padding: 10px;
        color: var(--primary-color-50);
    }

.input-info-icon {
    margin-left: 5px;
    width: 20px;
    height: 20px;
    background-color: var(--primary-color-50);
    color: #ffffff;
    text-align: center;
    line-height: 20px;
    cursor: pointer;
    border-radius: 50px;
    position: absolute;
}

    .input-info-icon:after, .input-info-icon:hover:after {
        display: block;
    }

    .input-info-icon:hover:after {
        content: attr(data-info);
        position: absolute;
        background-color: #f2f2f2;
        color: #333333;
        padding: 5px;
        border-radius: 5px;
        white-space: inherit;
        opacity: 0.9;
        margin-top: 0px;
        width: 140px;
    }

.actived {
    max-height: 1000px;
}

.tableListInfo {
    width: 100%;
}

.iconTable {
    width: 30px;
    text-align: center;
    padding: 5px;
}

    .iconTable a {
        padding: 5px 10px;
        border-radius: 50%;
    }

.opcionListado {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    margin-bottom: 10px;
}

.btn-list {
    color: var(--primary-color-50);
    text-decoration: none;
    font-weight: 600;
}

.list-group-item.active {
    z-index: 2;
    color: #fff;
    background-color: var(--primary-color-50) !important;
    border-color: none !important;
}

@media (max-width: 1439px) {
    .social-icon.vue-page {
        width: 70px;
    }
}

@media (max-width: 1199px) {

    .container{
        max-width: 100% !important;
    }

    .main-title {
        font-size: 2rem;
    }

    .title-caption {
        font-size: 2rem;
    }

    .subtitle-caption {
        font-size: 1rem;
    }

    .subtitle-minimo {
        font-size: 0.7rem;
    }

    .main-background {
        height: 300px;
    }

    .image-servicios {
        height: 300px;
    }

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

    .menu-item-apolo {
        min-width: 100px;
        font-size: 1rem;
        /*padding: 20px;*/
    }

    .otros-item {
        width: 170px;
    }

        .otros-item .img-item {
            height: 180px;
        }

    .form-item {
        width: 50%;
        padding: 10px 50px;
    }

        .form-item form label {
            font-size: 0.75rem;
        }

    .sponsor-image {
        width: 100px;
    }

    .servicios-label {
        font-size: 1rem;
    }
}

@media (max-width: 991px) {
    .logo-apolo-panel {
        width: 180px;
    }

    .toggle-menu-apolo {
        top: 80px;
    }

    .menu-item-apolo {
        font-size: 0.8rem !important;
    }

        .menu-item-apolo .menu-item-png {
            width: 16px;
        }

    .servicios-label {
        font-size: 1rem;
    }

    .otros-servicios-items {
        top: -130px;
        margin-bottom: -130px;
    }

    .otros-item {
        /*width: 130px;*/
        width: 20%;
    }

        .otros-item .img-item {
            height: 180px;
        }

    .image-porqueapolo {
        height: 300px;
    }

    .servicios-label {
        font-size: 0.9rem;
    }

    .social-icon {
        width: 70px;
    }

    .footer-menu-apolo {
        border: 0;
    }

    .store-icon {
        width: 150px;
        object-fit: contain;
    }


    /*TAGS Formularios*/
    .tag-apolo .input-group .form-control,
    .tag-apolo .input-group .form-select {
        flex: 1 0 auto;
        width: 100%;
    }

    .tag-apolo .tag-input {
        flex: 1 1 auto !important;
        width: 1% !important;
        max-width: 100%;
    }

    .toggle-profile-apolo {
        margin-right: 10px;
        width: 380px;
        background-color: #fff;
        color: #555;
        border-radius: 20px;
        position: fixed;
        top: 160px;
        right: 10px;
        padding: 20px;
        -moz-transition: 2s;
        -webkit-transition: 2s;
        transition: 3s;
        box-shadow: 0 24px 54px rgba(0,0,0,.15), 0 4.5px 13.5px rgba(0,0,0,.08);
        -webkit-box-shadow: 0 24px 54px rgba(0,0,0,.15), 0 4.5px 13.5px rgba(0,0,0,.08);
    }

    .cpr {
        width: 100%;
        display: flex;
        flex-direction: column;
    }

        .cpr > .containerPerfil {
            width: 100%;
            margin-bottom: 20px;
        }
}

@media (max-width: 767px) {

    .idiomasChange {
        display: none !important;
    }

    .title-caption {
        font-size: 1.5rem;
    }

    .subtitle-caption {
        font-size: 0.9rem;
    }

    .menu-container,
    .menu-content {
        width: 100%;
    }

    .menu-item-apolo {
        border: 0px;
        width: 100%;
    }

        .menu-item-apolo.menu-bar {
            border-left: 0px;
        }

    .otros-item {
        width: 200px;
    }

        .otros-item .img-item {
            height: 220px;
        }

    .image-porqueapolo {
        height: 200px;
    }

    .servicios-label {
        font-size: 0.7rem;
    }

    .form-item {
        width: 100%;
    }

    .contador-apolo i {
        display: block;
    }

    .toggle-profile-apolo {
        width: 100%;
        background-color: #fff;
        color: #555;
        border-radius: 20px;
        position: fixed;
        top: 160px;
        right: 0;
        padding: 20px;
        margin: 0;
        -moz-transition: 2s;
        -webkit-transition: 2s;
        transition: 3s;
        box-shadow: 0 24px 54px rgba(0,0,0,.15), 0 4.5px 13.5px rgba(0,0,0,.08);
        -webkit-box-shadow: 0 24px 54px rgba(0,0,0,.15), 0 4.5px 13.5px rgba(0,0,0,.08);
    }
}

@media screen and (max-width: 640px) {
    .grupoFila {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 100%;
    }

    .imgPerfil {
        border-radius: 50%;
        width: 100px;
        height: 100px;
        margin-bottom: 10px;
    }

    .btns {
        display: none;
        position: absolute;
        top: 60%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: #107fc985;
        color: #fff;
        border: none;
        cursor: pointer;
        border-radius: 5px;
        z-index: 1;
    }
}

@media (max-width: 575px) {
    .navbar-brand {
        margin: 0 auto;
    }

    .responsive-menu-content {
        justify-content: center !important;
    }

    .otros-item {
        width: 100%;
    }

        .otros-item .img-item {
            height: 300px;
        }

    .services-middline {
        display: none;
    }

    .servicios-label {
        font-size: 1rem;
    }

    .porque-apolo-container {
        width: 100%;
    }

    .social-icon {
        width: 50px;
    }

    .contador-apolo .doble {
        display: none;
    }
}

@media (max-width:503px) {
    .sesion-top-content {
        width: 100%;
    }

    .toggle-menu-apolo {
        width: 100%;
        top: 160px;
        display: none;
    }

    .contact-info {
        width: 240px;
    }

    .sesion-top-left {
        width: 100px;
    }

    .show-menu-apolo {
        display: block;
    }

    .toggle-user-apolo {
        width: 100%;
        top: 160px;
        right: 0;
    }

    .flex-gap-user {
        gap: 20px;
    }
}


/*
    CSS Syncfusion Stepper
*/
/* Stepper progressbar customization */
.e-stepper .e-stepper-progressbar {
    height: 10px;
    top: 25px;
}

.e-stepper .e-stepper-progressbar {
    left: 50% !important;
}

    .e-stepper .e-stepper-progressbar .e-progressbar-value {
        background-color: var(--primary-color-50);
    }

/* Stepper status customization */
#stepper .e-step-completed .e-indicator,
#stepper .e-step-inprogress .e-indicator {
    color: #fff;
    background-color: var(--primary-color-50);
}

#stepper .e-step-completed .e-text,
#stepper .e-step-inprogress .e-text {
    color: var(--primary-color-50);
}
/*
    EndCSS Syncfusion Stepper
*/


.form-floating.min75 > label {
    font-size: 0.7rem !important;
}

.form-floating.min50 > label {
    font-size: 0.7rem !important;
}

.form-floating.min30 > label {
    font-size: 0.7rem !important;
}