/*#region  Container Principal */

/* Container Principal **/
    .container__contenido {
        width: var(--container-width-lg);
        margin: 0 auto;
        /*background:cyan;*/
    }

    section {
        padding: 0rem 0;
    }

    section h2 {
        text-align: center;
        margin-bottom: 4rem;
    }

    img {
        width: 100%;
        display: block;
        object-fit: cover;
    }



/*#endregion */

/*#region CINTURON SEARCH */

/* CINTURON SEARCH*/

.entidades__empleos {
    position: relative;
}

.busqueda__selection {
    width: var(--container-width-lg);
    padding: 20% 20% 20% 20%;

    margin: 1rem auto;
    background-color: var(--color-bg0);
    box-shadow: 1px 1px 11px var(--primary-color);
    height: 100%;
    border-radius: .3rem;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    align-items: center;
}


.data_button_entidades span {
    color: var(--color-primary);
}

.elemento_busqueda label input {
    color: var(--color-primary1);
    font-family: "Font-Subtitulo";
    font-size: .7rem;
}

.elemento_busqueda p {
    font-family: "Font-Subtitulo";
    font-size: .8rem;
    padding: 0rem 0;
    font-weight: 500;
    color: var(--color-dark);
}



label {
    display: grid;
    gap: 1px;
    padding: 2rem;
    cursor: text;
}

    label:focus-within {
        border: 1px solid #000;
    }

    label > input {
        outline: none;
        border: none;
        background: transparent;
    }
/*#endregion */

/*#region ACORDEON */

/* ACORDEON*/

/*#endregion */

/*#region HEADER Y CONTENEDORES */
/* HEADER SECTION ------------------------------------*/

header {
    position: relative;
    top: 5rem;
    overflow: hidden;
    height: 70vh;
    margin-bottom: 0rem;
}

.header__container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
    gap: 0rem;
    height: 100%;

}

.header__container__single {
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
    height: 100%;
    margin: .5rem 0 .5rem 0; 

  
   
}

.header__container__single_entidades {
    display: grid;
    grid-template-columns: 1fr;
    height: 100%;

}
.alinear_elemento {
    display:flex;
}

.header__container__title {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    height: 100%;
    gap:01rem;
}

.header__container__three {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    align-items: center;
    gap: 1rem;
    height: 100%;
    padding-bottom: 1rem;
}
.header__container__three_sn {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    align-items: center;
    height: 100%;
    gap: .5rem;
}


.header__container__contador {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    align-items: center;
    gap: 4rem;
    height: 100%;
    padding-bottom: 1rem;
}

.header__container__contador_space {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    align-items: center;
    gap: 1rem;
    height: 100%;
    padding-bottom: 1rem;
}


/* HEADER SECTION ------------------------------------*/


.general__encabezado__title {
    display: flex;
    /*grid-template-columns: 1fr 1fr;*/
    /*align-items: center;*/
    justify-content: space-between;
    /* gap: 5rem;*/
    height: 100%;
}

.header__left p {
    margin: 1rem 0 2.4rem;
}


/*Busqueda de empleos */

.subtitle__sub {
    color: var(--color-primary1);
}



@media (400px <= width <= 450px) {

    /** HEADER*/


    header {
        height: 100%;
        top: 2rem;
    }

    .header__container {
    display: grid;
    grid-template-columns: 1fr;
    align-items: end;
    gap: 0rem;
    height: 100%;
    }

    .header__left {
    
    }

    .header__left h1 {
    font-size: 1rem;
    }

    .header__left p {
    margin: .5rem 0rem;
    font-size: .9rem;
    }

    .elements_button {
        margin: .9rem 0rem 0rem 0rem;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
    }

    .elements_button a {
    margin: 3%;
    font-size: .8rem;
    }

    .header__right {
        
    }


    /*Cinta Busqueda empleo*/
    .busqueda__selection {
        margin-top: 4rem;
        width: 90%;
        height: 100%;
        background: var(--color-bg0);
        grid-template-columns: 1fr;
        align-items: center;
    }

    .elemento_busqueda {
        padding: 2% 5%;
    }

        .elemento_busqueda a {
            padding: 1rem 1rem;
            font-weight: 300;
            font-size: .8rem;
        }

    /** */
    .header__right h1 {
        font-size: 1.5rem;
    }

    .header__right p {
        font-size: .9rem;
    }
}


/*#endregion */

/*#region FORMULARIO FERIAS LOCALES */

/**FERIAS --------------------------------------------------- */
    .contenedor-ferias {

        margin: 0rem auto;
        margin-bottom:2rem;
        width: 95%;
        max-width: 100%;
        padding: 0rem 0rem 0rem 0rem;
   
    }
    .contenedor-ferias-datos{
        margin: 0rem 0rem 0rem 0rem;
        width: 100%;
        max-width: 100%;
        padding: 0rem 5% 0rem 5%;
   
    }

    .contenedor-ferias > ul {
        list-style-type: none;
    }

    .progress-container_form {
        margin: 0 auto;
    }

    .contenedor-ferias .li {
        padding: 1em 1.3em;
        border-radius: 50%;
        background: var(--color-bg0);
        width: 50px;
        height: 50px;
        cursor: pointer;
        /*margin: 0 1em 0 0;*/
        text-decoration: none;
        transition: all .5s ease;
    }

    .contenedor-ferias .subcontenedor {
        /*min-height: 100vh;*/
        /* min-height: 80vh;*/
        /* background-color: blanchedalmond;*/
        position: relative;
    }


    .contenedor-ferias .bloque {
        position: absolute;
        /* top: 1em;*/
        transform: translateY(-100%);
        transition: all .5s ease;
        opacity: 0;
        background: var(--color-bg);
        width: 100%;
        /* background: cyan;*/
    }


    .contenedor-ferias .bloque.bloque_active {
        opacity: 1;
        transform: translateY(0%);
       
        z-index: 1000;
    }


    .general__encabezado {
        display: flex;
        /*grid-template-columns: 1fr 1fr;*/
        /*align-items: center;*/
        justify-content: space-between;
        /* gap: 5rem;*/
        height: 100%;

    }

    
    .body__formularios__button {
        padding: 0rem;
        text-align:center;
        z-index:1000;
        transition: all .54s ease;
        /*background:red;*/
    }


    .body__formularios__button > i:hover {
         background:#285C4D;
         transition: all .5s ease;
    }


    /** Slider menu active*/

    .container_menu_form {
        margin: 7rem 0rem 1rem 0rem;
        text-align: center;
        width: 100%;
    }

    .progress-container_form {
        display: flex;
        justify-content: space-between;
        position: relative;
        /*margin-bottom: 100px;*/
        max-width: 100%;
        width: 100%;
    }

    .progress-container_form::before {
        content: "";
        background-color: var(--primary-color);
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        height: .1rem;
        width: 100%;
        z-index: -1;
        border-radius: 1rem;
    }

    .progress {
        background-color: var(--primary-color);
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        height: 10px;
        width: 0%;
        z-index: -1;
        transition: 0.4s ease;
    }

    .circle_form {
        background-color: #fff;
        color: var(--primary-color);
        border-radius: 50%;
        width: 25px;
        height: 25px;
        display: flex;
        justify-content: center;
        align-items: center;
        border: .1rem solid var(--primary-color);
        transition: 0.4s ease;
    }
    
    .circle_form a{

    }

    .circle_form.active_form_menu {
        border-color: var(--primary-color);
    }


    /* Botones de accion*/

    .btn_active_form_menu {
        background-color: var(--primary-color);
        color: #fff;
        border: 0;
        font-family: inherit;
        padding: 8px 30px;
        margin: 1rem 0px 0px 0px;
        font-size: 1rem;
        cursor: pointer;
        border-radius: .5rem;
    }

    .btn_active_form_menu:active {
        transform: scale(0.98);
    }

    .btn_active_form_menu:disabled {
        background-color: var(--secondary-color);
        cursor: not-allowed;
    }





/*#endregion */

/*#region MEDIA */
/**Media    ------  */
    @media (200px <= width <= 400px) {
        .header__container__contador_space {
            display: grid;
            grid-template-columns: 1fr;
            align-items: center;
            gap: 1rem;
            height: 100%;
            padding-bottom: 1rem;
        }
    }

    @media (400px <= width <= 500px) {
        .general__encabezado__title {
            display: grid;
            grid-template-columns: 1fr;
            align-items: center;
            gap: 1rem;
            height: 100%;
        }

        .header__container__title {
            display: grid;
            grid-template-columns: 1fr;
            align-items: center;
            gap: 1rem;
            height: 100%;
        }

        .header__container__contador {
            display: grid;
            grid-template-columns: 1fr;
            align-items: center;
            gap: 1rem;
            height: 100%;
            /* padding-bottom: 1rem;*/
        }

        .header__container__contador_space {
            display: grid;
            grid-template-columns: 1fr;
            align-items: center;
            gap: 1rem;
            height: 100%;
            padding-bottom: 1rem;
        }

        .header__container__contador_Form {
            display: grid;
            grid-template-columns: 1fr 1fr;
            align-items: center;
            gap: 1rem;
            height: 100%;
            padding-bottom: 1rem;
        }


    }

    @media (500px <= width <= 700px) {
        .general__encabezado__title {
            display: grid;
            grid-template-columns: 1fr;
            align-items: center;
            gap: 1rem;
            height: 100%;
        }

        .header__container__title {
            display: grid;
            grid-template-columns: 1fr;
            align-items: center;
            gap: 1rem;
            height: 100%;
        }

        .header__container__contador {
            display: grid;
            grid-template-columns: 1fr;
            align-items: center;
            gap: 1rem;
            height: 100%;
            /* padding-bottom: 1rem;*/
        }

        .header__container__contador_space {
            display: grid;
            grid-template-columns: 1fr;
            align-items: center;
            gap: 1rem;
            height: 100%;
            padding-bottom: 1rem;
        }
    }

    @media (700px <= width <= 800px) {
        .general__encabezado__title {
            display: grid;
            grid-template-columns: 1fr;
            align-items: center;
            gap: 1rem;
            height: 100%;
        }

        .header__container__title {
            display: grid;
            grid-template-columns: 1fr;
            align-items: center;
            gap: 1rem;
            height: 100%;
        }

        .header__container__contador {
            display: grid;
            grid-template-columns: 1fr;
            align-items: center;
            gap: 1rem;
            height: 100%;
        
        }

        .header__container__contador_space {
            display: grid;
            grid-template-columns: 1fr 1fr;
            align-items: center;
            gap: 1rem;
            height: 100%;
            padding-bottom: 1rem;
        }

    }

    @media (800px <= width <= 1100px) {
        .header__container__contador_space {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            align-items: center;
            gap: 1rem;
            height: 100%;
            padding-bottom: 1rem;
        }
    }

/*#endregion */

.menu-mixto {
    display: flex;
}

.btn-menu-select {
    cursor: pointer;
    border: none;
    padding: 1em .5em;
    color: #fff;
    font-size: .5rem;
    width: 20%;
    cursor: pointer;
    font-size: 1em;
    text-align: left;
}


.btn-menu {
    cursor: pointer;
    border: 1px solid var( --primary-color);
    padding: 1em .5em;
    color: black;
    font-size: .5rem;
    width: 20%;
    cursor: pointer;
    font-size: 1em;
    text-align: left;
}



.operatorClicked {
    background: var( --color-primary);
}
   
/*.btn-menu:hover {
    background: var( --color-primary);
}*/

/*.content-mixto {
    margin-top: 2rem;
}

[data-content] {
    display: none;
}

.active[data-content] {
    display: block;*/
    /*background: red;*/
/*}

.dispercion_estatal {

}

.dispercion_federal {
}*/



.swal2-container {
    z-index: 100000 !important;
}

.contenedor_otra_actividad_seccion_4 {
display: none;
}




.texto_box {
}

.texto_box textarea {
    width: 100%;
    border: 1px solid var( --color-primary);
    outline: none;
    resize: none;
    padding: .5rem;
}


.contador_box {
    display: grid;
    justify-content: center;
    align-items: center;
    
}

.contador_box input {
    outline: none;
    text-align: center;
    height: 50px;
    background: var( --color-primary0);
  border: 1px solid var( --color-primary);
}




.chart {
    background: var( --color-primary);
    border-radius: 1px;
    align-items: center;
    padding: 0 10px;
    display: flex;
    height: 20px;
    width: 96%;
    margin: 10px 10px;

}

.chart span {
        /* You can modify the value below to change the distance between the percentage number and the bar */
    margin-left: 5px;
    color: #fff;
    font-weight: bolder;
  }

.bar {
    animation: proegress-var-01 3s normal forwards;
    box-shadow: 0 10px 40px -10px #fff;
    border-radius: 100px;
    background: #fff;
    height: 5px;
    width: 0;
}

.bar_2 {
    animation: proegress-var-02 3s normal forwards;
    box-shadow: 0 10px 40px -10px #fff;
    border-radius: 100px;
    background: #fff;
    height: 5px;
    width: 0;
}

.bar_3 {
    animation: proegress-var-03 3s normal forwards;
    box-shadow: 0 10px 40px -10px #fff;
    border-radius: 100px;
    background: #fff;
    height: 5px;
    width: 0;
}

.bar_4 {
    animation: proegress-var-04 3s normal forwards;
    box-shadow: 0 10px 40px -10px #fff;
    border-radius: 100px;
    background: #fff;
    height: 5px;
    width: 0;
}

.bar_5 {
    animation: proegress-var-05 3s normal forwards;
    box-shadow: 0 10px 40px -10px #fff;
    border-radius: 100px;
    background: #fff;
    height: 5px;
    width: 0;
}

.bar_1_2 {
    animation: proegress-var-01_2 3s normal forwards;
    box-shadow: 0 10px 40px -10px #fff;
    border-radius: 100px;
    background: #fff;
    height: 5px;
    width: 0;
}

.bar_2_2 {
    animation: proegress-var-02_2 3s normal forwards;
    box-shadow: 0 10px 40px -10px #fff;
    border-radius: 100px;
    background: #fff;
    height: 5px;
    width: 0;
}

.bar_3_2 {
    animation: proegress-var-03_2 3s normal forwards;
    box-shadow: 0 10px 40px -10px #fff;
    border-radius: 100px;
    background: #fff;
    height: 5px;
    width: 0;
}

.bar_4_2 {
    animation: proegress-var-04_2 3s normal forwards;
    box-shadow: 0 10px 40px -10px #fff;
    border-radius: 100px;
    background: #fff;
    height: 5px;
    width: 0;
}

.bar_5_2 {
    animation: proegress-var-05_2 3s normal forwards;
    box-shadow: 0 10px 40px -10px #fff;
    border-radius: 100px;
    background: #fff;
    height: 5px;
    width: 0;
}





.left-value {
    width:100%;
}
:root {
    --my-start-width: 0;
    --my-end-width: 0%;
    --my-start-width-2: 0;
    --my-end-width-2: 0%;
    --my-start-width-3: 0;
    --my-end-width-3: 0%;
    --my-start-width-4: 0;
    --my-end-width-4: 0%;
    --my-start-width-5: 0;
    --my-end-width-5: 0%;

    --my-start-width-1-2: 0;
    --my-end-width-1-2: 0%;
    --my-start-width-2-2: 0;
    --my-end-width-2-2: 0%;
    --my-start-width-3-2: 0;
    --my-end-width-3-2: 0%;

    --my-start-width-4-2: 0;
    --my-end-width-4-2: 0%;
    --my-start-width-5-2: 0;
    --my-end-width-5-2: 0%;
}


@keyframes proegress-var-01 {
    0% {
        width: var(--my-start-width);
    }

    100% {
        width: var(--my-end-width);
    }
}

@keyframes proegress-var-02 {
    0% {
        width: var(--my-start-width-2);
    }

    100% {
        width: var(--my-end-width-2);
    }
}

@keyframes proegress-var-03 {
    0% {
        width: var(--my-start-width-3);
    }

    100% {
        width: var(--my-end-width-3);
    }
}

@keyframes proegress-var-04 {
    0% {
        width: var(--my-start-width-4);
    }

    100% {
        width: var(--my-end-width-4);
    }
}

@keyframes proegress-var-05 {
    0% {
        width: var(--my-start-width-5);
    }

    100% {
        width: var(--my-end-width-5);
    }
}



@keyframes proegress-var-01_2 {
    0% {
        width: var(--my-start-width-1-2);
    }

    100% {
        width: var(--my-end-width-1-2);
    }
}

@keyframes proegress-var-02_2 {
    0% {
        width: var(--my-start-width-2-2);
    }

    100% {
        width: var(--my-end-width-2-2);
    }
}

@keyframes proegress-var-03_2 {
    0% {
        width: var(--my-start-width-3-2);
    }

    100% {
        width: var(--my-end-width-3-2);
    }
}

@keyframes proegress-var-04_2 {
    0% {
        width: var(--my-start-width-4-2);
    }

    100% {
        width: var(--my-end-width-4-2);
    }
}

@keyframes proegress-var-05_2 {
    0% {
        width: var(--my-start-width-5-2);
    }

    100% {
        width: var(--my-end-width-5-2);
    }
}