@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,700;0,900;1,400&display=swap');
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Roboto', sans-serif;
}

:root {
    /* --------- COLOR --------- */
    --primary-clr: #006FAE;
    --hover-clr: #2a72df;
    --blue-color: #2d85d8;
    --secondary-clr: #fae9d9;
    --normal-clr: #fff;
    --danger-clr: #DC4C64;
    --text-clr: #797979;
    --blue-bdrclr: #789FCC;
    /* --------- BORDER-RADIUS --------- */
    --Brad-05: .5rem;
    --Brad-02: .2rem;
}


body{
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--secondary-clr) !important;
}

.login_page{
    max-height: 40rem;
    width: 25rem;
    overflow: hidden;
    background-color: var(--normal-clr);
    border-radius: var(--Brad-05);
}

/* ---------------------------- CPN_LOGO ---------------------------- */
.cpn_logo{
    height: 3rem;
    background-color: var(--primary-clr);
    display: flex;
    justify-content: center;
    align-items: center;

}

.cpn_logo img{
    width: 2.5rem;
    border-radius: 50%;
    margin-right: .8rem;
    cursor: pointer;
}

.cpn_logo  span{
    font-size: 1.5rem;
    color: var(--normal-clr);
    cursor: pointer;
}

/* ---------------------------- FORM ---------------------------- */
.form_sec{
    padding:.5rem; 
}

.form{
    display: flex;
    flex-direction: column;
}

.form label{
    font-size: 1rem;
    color: var(--text-clr);
    margin-top: .5rem;
}

.form_data{
    height: 2rem;
    padding: 0 .5rem;
    font-size: 1rem;
    border: 1px solid var(--text-clr);
    outline: none;
    border-radius: var(--Brad-02);
    border-left: .3rem solid var(--primary-clr);
}

.form_data:active{
    box-shadow: 0px 2px 8px var(--text-clr);
}

.icon{
    width: 100%;
}

.sign-in{
    padding: .5rem;
    font-size: 1.2rem;
    font-weight: 500;
    width: 15rem;
    border: none;
    border-radius: var(--Brad-02);
    border: .1rem solid transparent;
    background-color: var(--primary-clr);
    color: var(--normal-clr);
    cursor: pointer;
}

    .sign-in:hover {
        background-color: var( --blue-bdrclr);
        /*color: var(--primary-clr);*/
        box-shadow: 0px 2px 8px var(--text-clr);
        border: .1rem solid var(--text-clr);
    }

.sign_in{
    margin-top: .5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.sign_in a{
    font-size: .85rem;
    text-decoration: underline;
    color: var(--primary-clr);
    margin-top: .5rem;
}

    .sign_in label {
        color: var(--danger-clr);
        font-size: 1rem;
        font-weight: 500;
        letter-spacing: .05rem;
        padding: .3rem .2rem;
    }

    .info {
        padding: .2rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        background-color: var(--primary-clr);
        color: var(--normal-clr);
    }

.info a{
    font-size: 1.2rem;
    font-weight: 500;
    text-decoration: none;
    color: var(--normal-clr);
}

.info p{
    font-size: .8rem;   
    margin: 0;
}

/*------------------------- Modal -------------------------*/
.modal-content {
    border-radius: 0 !important;
}

.modal-content h2 {
    font-size: 1.5rem;
    font-weight: 600;
    padding: .2rem .65rem;
    background: linear-gradient( 0.25turn, var(--hover-clr), var(--blue-color));
    color: var(--normal-clr);
}

.closeModel {
    position: absolute;
    top: 0;
    right: 0;
    -webkit-transform: translate(-30%, 30%);
    -ms-transform: translate(-30%, 30%);
    -moz-transform: translate(-30%, 30%);
    -o-transform: translate(-30%, 30%);
    transform: translate(-30%, 30%);
    background-color: var(--danger-clr);
    color: var(--normal-clr);
    cursor: pointer;
    border-radius: 50%;
    width: 1.3rem;
    height: 1.3rem;
    text-align: center;
}

.Model_container{
    text-align: center;
    padding: 1rem;
}

.Model_container select{
    width: 25rem;
}