html{
    scroll-behavior: smooth;
}
.tab-container {
    width: 100%;
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    list-style: none;
    padding: 0;
    margin: 0;
    align-items: flex-end;
    -webkit-align-items: flex-end;
    border-bottom: 6px solid #333;
}

    .tab-container:after {
        content: "";
        width: 10px;
        border-bottom: 6px solid #333;
    }

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

.bg-apolotab-secondary {
    background-color: var(--primary-color-60);
}

.bg-apolotab-third {
    background-color: var(--primary-color-70);
}

.main-tab-apolo {
    border-bottom: 6px solid #333;
    color: #fff;
    cursor: pointer;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
    position: relative;
}

    .main-tab-apolo .menu-title {
        display: none;
        align-items: center;
        position: relative;
        padding: 10px 20px;
        justify-content: space-between;
        
    }
.menu-title .menu-content {
    display: flex;
    align-items: center;
    gap:10px;
    flex-grow:1;
}
.menu-content .icon-menu {
    filter: invert(95%) sepia(5%) saturate(19%) hue-rotate(193deg) brightness(105%) contrast(105%);
}

.icono-dashboard {
    max-height: 30px;
}

.tab-container .item-tab {
    padding: 10px;
    flex: 1 1 auto;
    text-transform: uppercase;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1rem;
}

    .tab-container .item-tab.title-tab {
        font-size: 1.7rem;
    }

    .tab-container .item-tab:before {
        /*ahorita nada que hacer*/
        z-index: 10;
    }

    .tab-container .item-tab:after {
        content: "";
        width: 30px;
        height: 100%;
        border-top-right-radius: 10px;
        position: absolute;
        right: -10px;
        top: 0;
        z-index: 10;
    }

    .tab-container .item-tab.bg-apolotab-primary:after {
        background-color: var(--primary-color-50);
    }

    .tab-container .item-tab.bg-apolotab-secondary:after {
        background-color: var(--primary-color-60);
    }

    .tab-container .item-tab.bg-apolotab-third:after {
        background-color: var(--primary-color-70);
    }

    .tab-container .item-tab:hover {
        cursor: pointer;
        background-color: var(--secondary-color);
    }

        .tab-container .item-tab:hover:before {
            content: "";
            width: 30px;
            height: 100%;
            background-color: var(--secondary-color);
            border-top-left-radius: 10px;
            position: absolute;
            left: -10px;
            top: 0;
            z-index: 12;
        }

        .tab-container .item-tab:hover:after {
            background-color: var(--secondary-color);
            z-index: 12;
        }

        .tab-container .item-tab:hover:first-child:before {
            left: 0px;
            border-top-left-radius: 0px;
        }

    .tab-container .item-tab.title-tab.active {
        min-height: 80px;
    }

    .tab-container .item-tab.active {
        min-height: 55px;
    }

        .tab-container .item-tab.active:before {
            content: "";
            width: 21px;
            height: 100%;
            border-top-left-radius: 10px;
            position: absolute;
            left: -10px;
            top: 0;
            z-index: 11;
        }

        .tab-container .item-tab.active.bg-apolotab-primary:before {
            background-color: var(--primary-color-50);
        }

        .tab-container .item-tab.active.bg-apolotab-secondary:before {
            background-color: var(--primary-color-60);
        }

        .tab-container .item-tab.active.bg-apolotab-third:before {
            background-color: var(--primary-color-70);
        }

        .tab-container .item-tab.active:first-child:before {
            left: 0px;
            border-top-left-radius: 0px;
        }

        .tab-container .item-tab.active:hover:before {
            background-color: var(--secondary-color);
            z-index: 12;
        }

        .tab-container .item-tab.active:after {
            /*Nada que hacer por el momento*/
        }

.contenido-apolo-amarillo {
    width: 100%;
    padding: 20px;
    display: flex;
    position: relative;
    flex-flow: row nowrap;
    align-items: center;
    background-color: var(--secondary-color);
}

    .contenido-apolo-amarillo .contenido-apolo {
        text-align: center;
        padding: 10px;
    }

        .contenido-apolo-amarillo .contenido-apolo.title {
            font-size: 2rem;
            font-weight: 900;
            width: 30%;
            max-width: 300px;
            line-height: 1;
        }

        .contenido-apolo-amarillo .contenido-apolo.subtitle {
            font-size: 1.2rem;
            width: 70%;
            border-left: 2px solid #222;
        }

.contenido-apolo-azul {
    width: 100%;
    padding: 10px;
    display: flex;
    position: relative;
    flex-flow: row nowrap;
    align-items: center;
    background-color: var(--primary-color-50);
    color: #fff;
    justify-content: center;
}

.contenido-apolo-dark {
    width: 100%;
    padding: 10px;
    display: flex;
    position: relative;
    flex-flow: row nowrap;
    align-items: center;
    background-color: #333;
    color: #fff;
    justify-content: center;
}

.content-paginas-filtro {
    width: 100%;
    display: flex;
    flex-flow: row wrap;
    align-items: stretch;
    align-content: stretch;
    gap: 10px 25px;
    border-bottom: 3px solid var(--primary-color-50);
}

    .content-paginas-filtro .pagina-filtro {
        width: 200px;
        min-height: 50px;
    }

.content-formulario {
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
}

.content-button-sm {
    width: 200px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-self: center;
}

.border-newapolo {
    border-radius: 20px;
}

.form-apolo {
    padding: 10px;
    margin: 12px 0px;
    border: 1px solid #f4f4f4;
}

.bg-form-apolo {
    background-color: #f4f4f4;
    color: #555;
}

.table-apolo thead {
    background-color: var(--primary-color-50);
    color: #fff;
    font-weight: bolder;
    text-align: center;
}

    .table-apolo thead th,
    .table-apolo thead td,
    .table-apolo tbody td {
        border: 3px solid #fff;
    }

        .table-apolo thead th:first-child,
        .table-apolo thead td:first-child,
        .table-apolo tbody td:first-child {
            border-top: 3px solid #fff;
            border-left: 0;
            border-right: 3px solid #fff;
            border-bottom: 3px solid #fff;
        }

        .table-apolo thead th:last-child,
        .table-apolo thead td:last-child,
        .table-apolo tbody td:last-child {
            border-top: 3px solid #fff;
            border-left: 3px solid #fff;
            border-right: 0;
            border-bottom: 3px solid #fff;
        }

.content-apolo-card {
    position: relative;
    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);
}

.close-content-apolo {
    position: absolute;
    top: 0;
    right: 0;
    background: var(--secondary-color);
    padding: 10px 15px;
    cursor: pointer;
    border-top-left-radius: .3rem;
    border-top-right-radius: .3rem;
    border-bottom-left-radius: .3rem;
}

.content-apolo-text{

}

.content-apolo-text .text-nueva-alerta{
    font-size:1rem;
    text-align:justify;
    gap:10px;
    align-items:center;
}

    .content-apolo-text .apolo-alerta-input::placeholder {
        font-size: 1rem;
    }

.title-menu-page .item-menu {
    background-color: var(--secondary-color);
    padding: 10px;
    margin: 0px 3px;
    font-size: 1.2rem;
    color: #333;
}

    .title-menu-page .item-menu.selected-menu {
        background-color: #333;
        color: #fff;
    }

    .title-menu-page .item-menu.menu-position-right {
        position: absolute;
        right: 0;
    }

.item-menu:hover {
    cursor: pointer;
    background-color: #333;
    color: #fff;
}

.option-ingreso {
    display: flex;
    flex-direction: column;
    padding: 10px;
    border-radius: 30px;
    color: #333333;
}

    .option-ingreso i {
        color: #194270;
    }

    .option-ingreso:hover {
        background-color: #f7f7f7;
        cursor: pointer;
    }

    .option-ingreso.select-button {
        background-color: #ebebeb;
        color: #333333;
        cursor: pointer;
    }

.content-apolo-particular{
    gap:10px;
}
    .content-apolo-particular .particular-card {
        width: 100%;
        border-radius: 5px;
    }
        .content-apolo-particular .particular-card .particular-title {
            display: flex;
            justify-content: space-between;
            padding: 5px;
            background-color: var(--color-primario-dark-70);
            color: #fff;
        }
        .content-apolo-particular .particular-card .particular-pagina-container {
            width: 100%;
            padding: 10px;
            overflow-y: scroll;
            height: 200px;
        }
.particular-pagina-container .form-check{
    min-height:auto;
}

.table-alertas-apolo > tbody > tr > td.alerta-go {
    color: #dee1e3;
}

.table-alertas-apolo > tbody > tr:hover {
    background-color: #dee1e3;
    cursor: pointer;
}

    .table-alertas-apolo > tbody > tr:hover td.alerta-go {
        color: #555;
    }

.table-alertas-apolo > tbody > tr > td.alerta-option {
    color: #dee1e3;
}

    .table-alertas-apolo > tbody > tr > td.alerta-option:hover {
        background-color: var(--secondary-color);
        color: #333;
    }
.table-alertas-apolo > tbody > tr td:nth-child(4) {
    position:relative;
}
.alerta-noleida {
    width: 7px;
    height: 7px;
    background-color: #e81515;
    border-radius: 10px;
    position: absolute;
    top: 7px;
    right: 0;
}
.keyword-noleida {
    width: 7px;
    height: 7px;
    background-color: #e81515;
    border-radius: 10px;
    position: absolute;
    top: 7px;
    left: 0;
}

.keyword-noleido {
    /*font-weight:bolder;*/
}


/*estilos Dialog Alertas*/
.e-control {
/*    font-family: Titilium, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
*/    font-family: "Titillium Web", sans-serif;
}

.e-dialog {
    border: 0px;
}

    .e-dialog .e-dlg-content {
        font-size: 1rem;
        margin-top: 0;
        margin-bottom: 1rem;
        font-weight: 400;
        line-height: 1.5;
        margin-bottom:0;
    }

.e-dlg-header-content {
    background-color: var(--color-primario);
}

.e-dlg-header {
    font-size: 1.25rem !important;
    font-weight: bolder !important;
    color: white;
}

.e-icon-dlg-close {
    color: white;
}

/*Estilos UploadFile SyncFusion*/
.cfdi-list-files .e-upload .e-file-select-wrap {
    display: none;
}

.cfdi-list-files .e-upload {
    height: 250px;
    border: 0px !important;
    -ms-overflow-style: none; /* for Internet Explorer, Edge */
    scrollbar-width: none; /* for Firefox */
    overflow-y: scroll;
}
    .cfdi-list-files .e-upload::-webkit-scrollbar {
        display: none; /* for Chrome, Safari, and Opera */
    }


.cfdi-list-files .e-upload .e-upload-actions {
    position: absolute !important;
    bottom: -1px !important;
    width: 100% !important;
    display:none !important;
}


.table-dialog-apolo{
    /* No hace nada */
}
    .table-dialog-apolo thead {
        background-color: var(--primary-color-50);
        color: #fff;
    }

    .table-dialog-apolo .header-apolo-sm{
        font-size:0.8rem;
    }
    .table-dialog-apolo .content-apolo-sm {
        font-size: 0.8rem;
    }

/* Toast style */
/* To change color, font family and font size */

#toast_default.e-toast-container .e-toast .e-toast-message .e-toast-title {
    background-color: var(--primary-color-50);
    color:#fff;
}

#toast_default.e-toast .e-toast-close-icon::before {
    content: '\00d7';
    color: #fff;
}

/*Keywords Apolo*/
.apolocinco-filtro-content .apolocinco-filtro-text {
    min-width:100px;
    flex-grow: 1;
}
.apolocinco-title .apolocinco-itemscount {
    font-size: 1.2rem;
    font-weight: normal;
}

.e-upload .e-upload-files {
    border-top: 0;
}

.retro-child {
    border: 1px solid #ced4da;
    border-radius: 10px;
    margin: 0 5px 5px 5px;
    padding: 10px 5px;
    position: relative;
}

    .retro-child:hover {
        background-color: var(--primary-color-50);
        color: #fff;
    }
    .retro-child a {
        position: absolute;
        top: -5px;
        right: 5px;
    }
    .retro-child:hover a {
        color: #fff;
    }

@media (max-width: 1399.98px) {
    /*Nada por el momento*/
    .tab-container .item-tab.title-tab {
        font-size: 1.2rem;
    }
        .tab-container .item-tab.title-tab.active {
            min-height: 60px;
        }
}

@media (max-width: 1199.98px) {
    .tab-container {
        border-bottom: 1px solid #333;
    }   
}

@media (max-width: 991.98px) {
    .tab-container .item-tab.title-tab {
        font-size: 1rem;
    }

        .tab-container .item-tab.title-tab.active {
            min-height: 55px;
        }
}

@media (max-width: 767.98px) {
    .contenido-apolo-amarillo .contenido-apolo.title {
        font-size: 1.5rem;
    }
    .tab-container .item-tab.title-tab {
        font-size: 0.60rem;
    }

        .tab-container .item-tab.title-tab.active {
            min-height: 45px;
        }
    .content-apolo-card{
        padding:1.3rem !important;
    }
    .content-apolo-text .text-nueva-alerta button {
        font-size:1rem !important;
    }
    .content-apolo-text h2,
    .content-apolo-text h3,
    .content-apolo-services .option-ingreso .option-title {
        
    }
    .content-apolo-text .content-apolo-services {
        margin-top: 1rem !important;
        margin-bottom: 1rem !important;
    }
    .content-apolo-text .text-nueva-alerta {
        font-size: 0.75rem;
    }
    .content-apolo-text .select-content-alerta, 
    .content-apolo-text .select-content-alerta option {
        font-size: 0.9rem;
    }

    .content-apolo-text .particular-card .particular-title {
        font-size:0.9rem;
    }
    .content-apolo-text .particular-card .form-check {
        font-size:0.75rem;
    }
    .content-apolo-text .particular-card .particular-pagina-container{
        padding-top:0px;
    }
    .apolocinco-title,
    .apolocinco-title .apolocinco-itemscount {
        font-size: 1rem;
    }

    .apolocinco-filtro-content .apolocinco-filtro-text,
    .apolocinco-filtro-content .apolocinco-filtro-select {
        font-size: 1rem;
    }

    .apolocinco-table-content {
        background-color: transparent !important;
    }

        .apolocinco-table-content .table-alertas-apolo > thead {
            display: none;
        }

        .apolocinco-table-content .table-alertas-apolo > tbody {
            border: 0px !important;
            display: flex;
            flex-flow: wrap row;
            gap: 10px;
        }

            .apolocinco-table-content .table-alertas-apolo > tbody > tr {
                position: relative;
                display: flex;
                flex-flow: row wrap;
                border: 2px solid var(--primary-color-50);
                border-radius: 15px;
                width: 100%;
            }

                .apolocinco-table-content .table-alertas-apolo > tbody > tr > th {
                    width: 100%;
                    border-bottom: 1px solid var(--primary-color-50);
                    background: transparent;
                    font-size: 12px;
                }

                .apolocinco-table-content .table-alertas-apolo > tbody > tr td {
                    word-wrap: anywhere;
                    overflow-wrap: anywhere;
                    font-size: 12px;
                }

                .apolocinco-table-content .table-alertas-apolo > tbody > tr td:nth-child(2) {
                    padding: 0px 0.5rem;
                    width: 100% !important;
                    border: 0px;
                }

                .apolocinco-table-content .table-alertas-apolo > tbody > tr td:nth-child(2) {
                    padding: 0px 0.5rem;
                    width: 100% !important;
                    border: 0px;
                }

                    .apolocinco-table-content .table-alertas-apolo > tbody > tr td:nth-child(3) {
                        position: absolute;
                        top: 0px;
                        right: 0px;
                        background: transparent;
                    }

                    .apolocinco-table-content .table-alertas-apolo > tbody > tr td:nth-child(4) {
                        padding: 0px 0.5rem;
                        border: 0px;
                        position: initial;
                        background: transparent;
                    }

                .apolocinco-table-content .table-alertas-apolo > tbody > tr td:nth-child(5) {
                    display: none;
                }

    .alerta-noleida {
        top: 5px;
        right: 5px;
    }

    .table-alertas-apolo{
        width: 100%;
    }

    .apolocinco-table-content .table-alertas-apolo > tbody > tr > td.alerta-option:hover {
        background-color: var(--secondary-color) !important;
    }

    .apolocinco-table-content .table-alertas-apolo.table-keywords > tbody > tr {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
    }

        .apolocinco-table-content .table-alertas-apolo.table-keywords > tbody > tr td:nth-child(2) {
            display: flex;
        }

        .apolocinco-table-content .table-alertas-apolo.table-keywords > tbody > tr td:nth-child(4) {
            width: 33.3%;
            border: 0px;
            padding: .5rem .5rem;
            background-color: #dee1e3;
            color: #333;
            font-size: 0.75rem;
        }

    .apolocinco-table-content .table-alertas-apolo.table-historico > tbody > tr td:nth-child(4) {
        display: none;
    }

    .apolocinco-table-content .table-alertas-apolo.table-keywords > tbody > tr td:nth-child(5),
    .apolocinco-table-content .table-alertas-apolo.table-historico > tbody > tr td:nth-child(5) {
        display: block;
        width: 33.3%;
        border: 0px;
        background-color: #dee1e3;
        color: #333;
        font-size: 0.75rem;
    }

    .apolocinco-table-content .table-alertas-apolo.table-keywords > tbody > tr td:nth-child(6),
    .apolocinco-table-content .table-alertas-apolo.table-historico > tbody > tr td:nth-child(6) {
        width: 33.3%;
        border: 0px;
        font-size: 0.75rem;
        filter: opacity(0.7);
    }
}

@media (max-width: 991.98px) {
    .tab-container .item-tab.active:before {
        width: 15px;
    }

    .icono-dashboard {
        max-height: 20px;
    }
}
@media (max-width: 575.98px) {

    .icono-dashboard {
        max-height: 20px;
    }

    .main-tab-apolo {
        background-color: var(--primary-color-50);
    }

        .main-tab-apolo .menu-title {
            display: flex;
        }

    .tab-container {
        flex-flow: column nowrap;
        border-bottom: 0px;
    }

        .tab-container:after {
            content: "";
            width: 0px;
        }

        .tab-container .item-tab {
            width: 100%;
        }

            .tab-container .item-tab:before,
            .tab-container .item-tab:first-child:before,
            .tab-container .item-tab:hover:before,
            .tab-container .item-tab.active:before,
            .tab-container .item-tab:after,
            .tab-container .item-tab:first-child:after,
            .tab-container .item-tab:hover:after,
            .tab-container .item-tab.active:first-child:after {
                content: "";
                width: 0px;
                /*height: 100%;
                border-top-left-radius: 10px;
                position: absolute;
                left: -10px;
                top: 0;
                z-index: 11;*/
            }

            .tab-container .item-tab:hover {
                background-color: var(--secondary-color) !important;
            }

            .tab-container .item-tab.active {
                background-color: #194270 !important;
            }

            .tab-container .item-tab.bg-apolotab-primary,
            .tab-container .item-tab.bg-apolotab-secondary,
            .tab-container .item-tab.bg-apolotab-third {
                background-color: var(--primary-color-50);
            }
    /*.tab-container .item-tab.bg-apolotab-primary:before {
                background-color: var(--primary-color-50);
            }

            .tab-container .item-tab.bg-apolotab-secondary:before {
                background-color: #0d56a6;
            }

            .tab-container .item-tab.bg-apolotab-third:before {
                background-color: #194270;
            }

            .tab-container .item-tab:hover:before {
                background-color: var(--secondary-color);
            }*/
    .contenido-apolo-amarillo {
        flex-flow: column nowrap;
        padding: 5px;
    }

        .contenido-apolo-amarillo .contenido-apolo.subtitle {
            font-size: 1rem;
            border-left: 0;
        }

    .close-content-apolo {
        padding: 5px 10px;
    }

    .content-apolo-text .text-nueva-alerta {
        flex-flow: column wrap;
        justify-content: center;
    }

        .content-apolo-text .text-nueva-alerta button {
            font-size: 0.75rem !important;
        }

    .content-apolo-text .apolo-alerta-input::placeholder {
        font-size: 0.75rem;
    }

    .container-nueva-alerta {
        padding: 0px !important;
    }

    .content-apolo-services {
        flex-direction: column;
    }

        .content-apolo-services .option-ingreso {
            width: 100%;
        }

            .content-apolo-text h2,
            .content-apolo-text h3,
            .content-apolo-services .option-ingreso .option-title {
                font-size: 1rem;
            }

    .content-apolo-particular {
        flex-flow: row wrap;
    }

        .content-apolo-particular .particular-title {
            cursor: pointer;
        }

        .content-apolo-particular .particular-card {
            width: 100%;
        }

    .apolocinco-title-content .apolocinco-title,
    .apolocinco-title-content .apolocinco-filtro-content {
        display: flex;
        flex-flow: row wrap;
        justify-content: start;
    }

    .apolocinco-filtro-content .apolocinco-filtro-text {
        text-align: center;
    }

    .apolocinco-filtro-content .apolocinco-filtro-select {
        font-size: 0.9rem;
    }

    
    .e-upload .e-upload-files .e-upload-file-list .e-file-container{
        margin-right:auto;
    }
}