@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fira+Sans+Condensed:ital,wght@1,600;1,700&family=Merriweather:ital@1&display=swap');

.none {
    display: none !important;
}

.acceso_pp {
    background-image: url("../img/Fondo_practicas.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.acceso_ss {
    background-image: url("../img/Fondo_practicas.jpg");
}

.acceso_content {
    height: 400px;
    margin-bottom: 30px;
    margin-top: 30px;
    padding: 50px;
}

.acceso_ss h1,
.acceso_pp h1 {
    margin: 0px;
    color: #ffff;
    text-align: center;
    text-transform: uppercase;
    font-size: 29px;
    margin-bottom: 35px;
}

#buton_ss_a,
#buton_pp_a {
    background-color: #fff;
    display: block;
    width: 120px;
    margin: 0 auto;
    text-align: center;
    margin-top: 20px;
    border-radius: 57px;
    padding: 6px;
    font-weight: bold;
    text-transform: uppercase;
    cursor: pointer;
}

#buton_pp_r,
#buton_ss_r {
    background-color: #fff;
    display: block;
    width: 300px;
    margin: 0 auto;
    text-align: center;
    margin-top: 28px;
    border-radius: 57px;
    padding: 6px;
    font-weight: bold;
    text-transform: uppercase;
    cursor: pointer;
}

.acceso_pp .ul.list_content {
    padding: 0px;
}

.acceso_pp ul.list_content {
    padding: 0px;
    margin-top: 50px;
    position: relative;
    float: left;
    width: 100%;
}

.acceso_pp ul.list_content li {
    position: relative;
    float: left;
    width: 50%;
}

.acceso_pp ul.list_content li a {
    background-color: #E10023;
    padding: 6px;
    display: block;
    font-size: 14px;
    font-family: 'Roboto';
    font-weight: bold;
    width: 133px;
    border-radius: 37px;
    margin: 0 auto;
}

#buton_ss_a a,
#buton_pp_a a {
    color: #000;
    text-decoration: none;
}

.divider-container {
    background-color: #1D335B;
    padding: 10px;
    margin-left: -1.5rem;
    clip-path: polygon(0 0, 100% 0, 93% 100%, 0% 100%);

    p {
        color: white;
        font-weight: 800;
        margin: 0;
    }
}

#national-group-field {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

@media only screen and (max-width: 768px) and (min-width: 300px) {
    .acceso_content {
        height: 340px;
        margin-bottom: 0px;
        margin-top: 20px;
        padding: 20px;
    }

    .acceso_ss h1,
    .acceso_pp h1 {
        font-size: 23px;
    }

    #buton_pp_r,
    #buton_ss_r {
        width: 100%;
    }

    .acceso_pp ul.list_content li a {
        font-size: 13px;
        width: 115px;
    }

    .acceso_content.acceso_ss {
        height: 226px;
        margin-bottom: 20px;
    }
}

.icons__container {
    background: #EFEFEF;
}

.icons__content {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: 30px;
    padding: 50px 0;
}


.icons__content a {
    position: relative;
    border-radius: 15px;
    border: 1px solid rgb(235, 235, 235);
    box-shadow: 1px 1px 2px #00000066;
    background-color: #FFFFFF;
    padding: 30px;
    margin-bottom: 15px;
    height: 290px;
    padding-left: 40px;
    padding-right: 40px;
}

.icons__content img {
    width: 95px !important;
    margin: 0 auto;
    object-fit: contain;
    height: 112px;
    display: block;
}

.icons__content h2 {
    text-align: center;
    letter-spacing: 0px;
    color: #000000;
    opacity: 1;
    font-family: 'Fira Sans Condensed', sans-serif;
    line-height: normal;
    font-size: 21px;
    padding: 10px;
    padding-left: 0px;
    padding-right: 0px;
}

.icons__content span {
    cursor: pointer;
    font-family: 'Merriweather', serif;
    background: #FFCC00 0% 0% no-repeat padding-box;
    border-radius: 11px;
    color: #000000;
    font-size: 12px;
    padding: 3px 12px;
    text-decoration: none;
    display: block;
    width: 108px;
    margin: 0 auto;
    text-align: center;
    font-style: italic;
}

.register-p {
    text-align: center;
    font-size: 25px;
    padding: 0 1.5rem;
    margin: 0;
}

.flex-radios {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1rem 0;
}

#Modal {
    max-width: 100%;
    width: 90%;
}

.three-fields {
    display: flex;
    flex-direction: column;
}

.disabled-input {
    background-color: #e9e9e9;
    cursor: not-allowed;
}

.curp-input,
.rfc-input {
    display: flex;
    align-items: center;
    gap: 5px;

    i {
        margin-bottom: 15px;
        cursor: pointer;
        display: none;
    }
}

.upaep__radios {
    margin: 0 auto;
    gap: 70px !important;
}

.upaep__modal-body {
    display: flex;
    flex-direction: column;
    gap: 17px;
    padding-top: 0 !important;
}

.upaep__checkboxs {
    align-items: unset !important;
    padding: 0 1.5rem !important;
}

.input-error {
    border: 2px solid #c52727 !important;
}

.double-input-phone {
    position: relative;
    width: 100%;

    select {
        position: absolute;
        top: 0;
        left: 0;
        width: 140px;
        height: 100%;
        z-index: 2;
    }

    input {
        margin-bottom: 5px;
        padding-left: 150px;
        width: 100%;
        box-sizing: border-box;
        z-index: 1;
    }
}

#send-form {
    min-height: 40px;
    align-self: center;
    min-width: 130px;
}

.required-field {
    color: #E10023;
    font-weight: 400;
}

.no-curp-input,
.tehuacan-campus-field {
    display: flex;
    padding: 0 15px;
    gap: 15px;
    margin-left: 10px;
    color: #858585;

    label {
        margin: 0;
    }
}

.tehuacan-campus-field {
    flex-direction: column;
}

.tehuacan-container {
    display: flex;
    gap: 10px;
}

.company-found,
.legal-company-found {
    color: #1D335B;
    font-weight: 700;
    font-style: italic;
    font-size: 15px;
}

.tool-tip-container {
    position: relative;

    img {
        cursor: pointer;

        &:hover+.manual-tooltip {
            display: block;
        }
    }
}

.manual-tooltip {
    background-color: #DCDCDC;
    border-radius: 7px;
    padding: 0.5rem;
    position: absolute;
    z-index: 3;
    min-width: 200px;
    margin-top: 10px;
    display: none;
    right: 15px;

    p {
        margin: 0;
        color: black;
        font-size: 13px;
    }
}

.important {
    color: #a52121;
}

#show-tooltip:hover .manual-tooltip {
    display: block !important;
}

#modal-success {
    max-width: 100%;
    width: 90%;

    .upaep__modal-body {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;

        p {
            margin: 0;
        }

        img {
            width: 200px;
        }

        .success-text {
            font-size: 23px;
            font-weight: 600;
            color: #D90000;
        }

        .normal-text {
            font-size: 17px;
            font-weight: 600;
            color: #003e74;
        }
    }
}

#modal-code {
    max-width: 100%;
    width: 90%;

    .upaep__modal-body {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;

        i {
            text-align: center;
            font-size: 100px;
        }

        .success-text {
            font-size: 23px;
            font-weight: 600;
            color: #03255b;
        }

        #verification-code {
            max-width: 300px;
        }

        .normal-text {
            margin: 0;
        }

        .resend {
            border: none;
            background: none;
            cursor: pointer;
            text-decoration: underline;
        }

        .resend.disabled {
            cursor: unset;
        }

    }
}

.span-link {
    text-decoration: none;
    cursor: pointer;
    color: var(--upaep-color-blue-link);
}

.upaep-field {
    min-height: unset !important;
}

.inline {
    display: inline !important;
}

.curp-icon::before {
    content: var(--upaep-notification-content-icon-content);
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    margin-right: 8px;
    font-size: 20px;
    color: white;
}

.curp-message {
    display: flex;
    align-items: center;

    p {
        color: white;
        font-weight: 500;
        margin: 0;
    }

    a {
        color: white;
        font-weight: 600;
        text-decoration: underline;
    }
}

.yellow-badge{
    background-color: #ffeeb3;
    padding: 1rem 2rem;
    border-radius: 10px
}

.bold-text{
    font-weight: 600;
}

.here{
    text-decoration: none;
    font-weight: 600;
    color: black;
}

.email-text{
    text-decoration: underline;
}

@media(width>768px) {
    #Modal {
        width: 60%;
    }

    .three-fields {
        flex-direction: row;
    }

    .flex-radios {
        flex-direction: row;
    }

    #modal-success,
    #modal-code {
        width: 70%;
    }
}

@media(width>1068px) {

    #modal-success,
    #modal-code {
        width: 50%;
    }

    .manual-tooltip {
        right: unset;
    }
}

@media(width>1368px) {

    #modal-success,
    #modal-code {
        width: 35%;
    }
}