@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700;800&family=Ubuntu:wght@500;700&display=swap');
@import "_responsive";
*{
    margin:0;
    padding:0;
    box-sizing: border-box;
    font-family: 'Libre Franklin';
}
@font-face {
    font-family: 'Libre Franklin';
    src: url('../FONT/LibreFranklin-Regular.eot');
    src: url('../FONT/LibreFranklin-Regular.eot?#iefix') format('embedded-opentype'),
        url('../FONT/LibreFranklin-Regular.woff2') format('woff2'),
        url('../FONT/LibreFranklin-Regular.woff') format('woff'),
        url('../FONT/LibreFranklin-Regular.ttf') format('truetype'),
        url('../FONT/LibreFranklin-Regular.svg#LibreFranklin-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Libre Franklin';
    src: url('../FONT/LibreFranklin-Bold.eot');
    src: url('../FONT/LibreFranklin-Bold.eot?#iefix') format('embedded-opentype'),
        url('../FONT/LibreFranklin-Bold.woff2') format('woff2'),
        url('../FONT/LibreFranklin-Bold.woff') format('woff'),
        url('../FONT/LibreFranklin-Bold.ttf') format('truetype'),
        url('../FONT/LibreFranklin-Bold.svg#LibreFranklin-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Public Sans';
    src: url('../FONT/PublicSans-Regular.eot');
    src: url('../FONT/PublicSans-Regular.eot?#iefix') format('embedded-opentype'),
        url('../FONT/PublicSans-Regular.woff2') format('woff2'),
        url('../FONT/PublicSans-Regular.woff') format('woff'),
        url('../FONT/PublicSans-Regular.ttf') format('truetype'),
        url('../FONT/PublicSans-Regular.svg#PublicSans-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'outline';
    src: url('../FONT/outline.eot');
    src: url('../FONT/outline.eot?#iefix') format('embedded-opentype'),
        url('../FONT/outline.woff2') format('woff2'),
        url('../FONT/outline.woff') format('woff'),
        url('../FONT/outline.ttf') format('truetype'),
        url('../FONT/outline.svg#outline') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
/*
=====================
===  login Login  ===
=====================
*/
.header_1{
    box-shadow:0 2px 8px 0 rgba(0, 0, 0, 0.25);
    background-color:#f5f5f5;
    .container_header_1{
        padding:11px 24px;
        @media (max-width:767px) {
            padding:20px 24px;
        }
        .part_left{
            gap:130px;
            .logo{
                .sm_logo{
                    display: none;
                    @media (max-width:767px) {
                        display: flex;
                    }
                }
                .lg_logo{
                    display: flex;
                    @media (max-width:767px) {
                        display: none;
                    }
                }
            }
            .links{
                list-style: none;
                position: relative;
                top:12px;
                @media (max-width:1440px) {
                    display: none !important;
                }
                li{
                    color:#006dff;
                    padding:12px 16px;
                    &.active{
                        border-bottom:3px solid #006dff;
                        color: black;
                    }
                }
            }            
        }
        .part_right{
            gap:22px;
            @media (max-width:767px) {
                gap:10px;
            }
            .btns{
                gap:8px;
                list-style: none;
                li{
                    button{
                        background-color:white;
                        border:1px solid #006dff;
                        padding:7px 22px;
                        color: #006dff;
                        display: flex;
                        gap:7px;
                        display: flex;
                        align-items: center;
                        height:48px;
                        border-radius:4px;
                        @media (max-width:767px) {
                            height:32px;
                        }
                        p{
                            margin-bottom:0;
                        }
                        &.active{
                            background-color: #006dff;
                            color: white;
                            font-weight: 500;
                            box-shadow:0 10px 12px -8px rgba(0, 0, 0, 0.5), 0 10px 12px -8px rgba(0, 109, 255, 0.5);
                        }
                        .p_info{
                            @media (max-width:1025px) {
                                display: none !important;
                            }
                        }
                        &.b_info{
                            @media (max-width:1025px) {
                                padding:7px 13px;
                            }
                        }
                        &.b_user{
                            @media (max-width:767px) {
                                display: none !important;
                            }
                        }
                        &.b_info{
                            @media (max-width:767px) {
                                padding:5px 6px;
                            }
                        }
                        .p_bars{
                            @media (max-width:767px) {
                                display: none !important;
                            }
                        }
                        &.b_bars{
                            @media (max-width:767px) {
                                padding:5px 6px;
                            }
                        }
                        img{
                            &.user{
                                width:19px;
                            }
                            &.info{
                                width:21px;
                            }
                            &.bars{
                                width:22px;
                            }
                        }
                    }
                }
            }
        }
    }
}
.wrapper_login{
    width:100%;
    padding:57px 0;
    .container_login{
        width:1400px;
        margin:0 auto;
        align-items: center;
        @media (max-width:1440px) {
            width:1250px;
        }
        @media (max-width:1311px) {
            width:1000px;
        }
        @media (max-width:1081px) {
            width:750px;
        }
        @media (max-width:860px) {
            display: flex;
            flex-direction: column;
            align-items: center;
            width:450px;
            gap:80px 0;
        }
        @media (max-width:480px) {
            width:100%;
            padding:0 7px;
        }
        .part_left , .part_right{
            width:100%;
        }
        .part_left{
            .title{
                h1{
                    font-weight: 700;
                    color:#000000;
                    @media (max-width:860px) {
                        font-size:32px;
                    }
                }
                p{
                    margin-bottom:0;
                    font-family: 'Public Sans';
                    font-size:17.8px;
                    a{
                        text-decoration: none;
                        margin-left:5px;
                        color:#006dff;
                    }
                    img{
                        width:16.5px;
                        margin-bottom:7px;
                        margin-right:7px;
                    }
                }
            }
            form{
                padding:24px;
                box-shadow:0 16px 20px 2px rgba(0, 0, 0, 0.05), 0 6px 20px 3px rgba(0, 0, 0, 0.05), 0 16px 14px -5px rgba(0, 0, 0, 0.06);
                border-radius:16px;
                margin-top:24px;
                width:540px;
                @media (max-width:1081px) {
                    width:450px;
                }
                @media (max-width:480px) {
                    width:100%;
                }
                .title_form{
                    p{
                        font-weight: 700;
                        font-size:24px;
                        font-family: 'Libre Franklin';
                        line-height:23px;
                    }
                }
                .error{
                    display: flex;
                    gap:10px;
                    align-items: center;
                    color: #000000;
                    border-radius:5px;
                    img{
                        // margin-bottom:10px;
                        width:18px;
                    }
                    font-size:14px;
                }
                .inputes{
                    width:100%;
                    display: flex;
                    flex-direction: column;
                    gap:15px;
                    margin-top:25px;
                    .form-group{
                        position: relative;
                        input{
                            width:100%;
                            display: flex;
                            align-items: center;
                            padding:16px;
                            background-color:#F5F5F5;
                            justify-content: space-between;
                            border: none;
                            border-bottom:3px solid #000000 !important;
                            padding: 29px 16px 3px;
                            outline: none;
                            &.good_input{
                                border-bottom-color:#239d45 !important;
                            }
                            &.error_input{
                                border-bottom-color:#be0028 !important;
                            }
                        }
                        label{
                            position: absolute;
                            top:50%;
                            transform: translateY(-50%);
                            left:16px;
                            transition: all 0.25s;
                            &.focus{
                                color: #757575;
                                font-size: 14px;
                                top: 18px;
                            }
                        }
                        .error{
                            position: absolute;
                            top:50%;
                            transform: translateY(-50%);
                            right:10px;
                            display: none;
                            color: #be0028;
                            font-size:23px;
                        }
                        .good{
                            position: absolute;
                            top:50%;
                            transform: translateY(-50%);
                            right:10px;
                            display: none;
                            color: #239d45;
                            font-size:23px;
                        }
                        .eye{
                            position: absolute;
                            top:50%;
                            transform: translateY(-50%);
                            right:10px;                            
                            width:21px;
                            cursor: pointer;
                        }
                    }
                    .error_txt{
                        color:#be0028;
                        font-size:14px;
                        margin-left:16px;
                        margin-top:3px;
                        display: none;
                    }
                    .inputes_top{
                        width:100%;
                        display: flex;
                        justify-content: space-between;
                        gap:10px;
                        @media (max-width:480px) {
                            display: flex;
                            flex-direction: column;
                            gap:15px;
                        }
                        .left_input{
                            width:27%;
                            @media (max-width:1081px) {
                                width:35%;
                            }
                            @media (max-width:480px) {
                                width:100%;
                            }
                            position: relative;
                            .current{
                                width:100%;
                                display: flex;
                                align-items: center;
                                padding:16px;
                                background-color:#F5F5F5;
                                justify-content: space-between;
                                border-bottom:3px solid #000000;
                                cursor: pointer;
                                p{
                                    margin-bottom:0;
                                    font-weight: 500;
                                    font-family: 'Libre Franklin';
                                    width:72px;
                                    text-overflow: ellipsis;
                                    overflow: hidden;
                                    white-space: nowrap;
                                }
                                img{
                                    width:20px;
                                }
                            }
                            .selects{
                                display: none;
                                position: absolute;
                                flex-direction: column;
                                width:100%;
                                list-style: none;
                                z-index:1000;
                                background-color: #FFFFFF;
                                box-shadow:0 2px 4px 0 rgba(0, 0, 0, 0.25);
                                padding-left:0;
                                margin-bottom:0;
                                li{
                                    width:100%;
                                    padding: 16px;
                                    background-color: #F5F5F5;
                                    border-bottom:1px solid #e0e0e0;
                                    cursor: pointer;
                                    &.active{
                                        font-weight: 600;
                                        background-color:#E1F7FF;
                                    }
                                }
                            }
                        }
                        .right_input{
                            width:73%;
                            @media (max-width:480px) {
                                width:100%;
                            }
                        }
                    }
                }
                .Remember{
                    margin-top:10px;
                    input[type="checkbox"]{
                        appearance: none;
                        width:32px;
                        height:32px;
                        border: 1px solid #9e9e9e;
                        cursor: pointer;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        margin:0;
                        border-radius:1px;
                    }
                    input[type="checkbox"]::after{
                        font-family:"Font Awesome 5 Free";
                        font-weight:900;
                        content:"\f00c";
                        color:black;
                        display: none;
                        font-size:15px;
                        border-radius:1px;
                    }
                    input[type="checkbox"]:checked{
                        background-color: #006dff;
                        border: none;
                        border-radius:1px;
                    }
                    input[type="checkbox"]:checked::after{
                        display: block;
                        color:white;
                        border-radius:1px;
                    }
                    label{
                        margin-bottom:0;
                        display: inline;
                        margin-left:8px;
                        font-size:16px;
                        color:#3b3331;
                        font-weight: 300;
                        font-family: 'Public Sans';
                    }
                }    
                .btn_sub{
                    margin-top:20px;
                    button{
                        width:100%;
                        background-color: #006dff;
                        color: white;
                        height:48px;
                        border: none;
                        outline: none;
                        border-radius:4px;
                        box-shadow:0 10px 12px -8px rgba(0, 0, 0, 0.3), 0 10px 12px -8px rgba(0, 109, 255, 0.5);
                    }
                }    
                .forget{
                    text-align: center;
                    margin-top:25px;
                    a{
                        color: #006dff;
                        text-decoration: none;
                    }
                }
                hr{
                    margin-top:35px;
                    color:#8f8f8f;
                } 
                .link_form{
                    list-style: none;
                    display: flex;
                    justify-content: center;
                    margin-bottom:0;
                    padding-left:0;
                    gap:13px;
                    li{
                        color: #006dff;
                    }
                }       
            }
        }
        .part_right{
            .infos{
                margin-left:25px;
                h2{
                    font-weight: 700;
                    margin-top:32px;
                }
                button{
                    margin-top:48px;
                    background-color: white;
                    border: 1px solid #006dff;
                    padding: 7px 22px;
                    color: #006dff;
                    gap: 7px;
                    display: flex;
                    align-items: center;
                    height: 56px;
                    border-radius: 4px;                    
                }
            }
        }
    }
}
.wrapper_emergency{
    width:100%;
    background-color: white;
    padding:64px 0;
    @media (max-width:860px) {
        padding:34px 0;
    }
    .container_emergency{
        width:1150px;
        margin:0 auto;
        gap:20px 40px;
        @media (max-width:1440px) {
            width:1250px;
        }
        @media (max-width:1311px) {
            width:1000px;
        }
        @media (max-width:1081px) {
            width:750px;
        }
        @media (max-width:860px) {
            display: flex;
            flex-direction: column-reverse;
            align-items: center;
            width:450px;
            gap:20px 80px;
        }
        @media (max-width:480px) {
            width:100%;
            padding:0 45px;
        }        
        .infos{
            h2{
                font-weight: 700;
                font-size: 40px;
            }
            p{
                font-size:15px;
                color:#000000;
                font-family: 'Public Sans';
                a{
                    color:#0051db;
                    font-family: 'Public Sans';
                }
            }
            button{
                background-color: #006dff;
                color: white;
                font-weight: 500;
                box-shadow: 0 10px 12px -8px rgba(0, 0, 0, 0.5), 0 10px 12px -8px rgba(0, 109, 255, 0.5);
                align-items: center;
                height: 48px;
                border-radius: 4px;
                border-color: #006dff;
                align-items: center;
                height: 48px;
                border-radius: 4px;
                border: none;
                padding: 7px 22px;
                margin-top:10px;
            }
        }
    }
}
.wrapper_asks{
    margin-top:100px;
    @media (max-width:860px) {
        margin-top:30px;
    }
    .conatiner_asks{
        width:1400px;
        margin:0 auto;
        @media (max-width:1440px) {
            width:1250px;
        }
        @media (max-width:1311px) {
            width:1000px;
        }
        @media (max-width:1081px) {
            width:750px;
        }
        @media (max-width:860px) {
            display: flex;
            flex-direction: column;
            align-items: center;
            width:450px;
            gap:20px 0;
        }
        @media (max-width:480px) {
            width:100% !important;
            padding:0 35px;
        }       
        .title{
            text-align: center;
            margin-bottom:50px;
            h2{
                font-weight: 700;
                @media (max-width:860px) {
                    font-size:30px;
                }
            }
        }
        .wrapper_ask{
            width:100%;
            display: flex;
            justify-content: space-between;
            gap:20px 30px;
            @media (max-width:467px) {
                width:100% !important;
            }
            @media (max-width:860px) {
                display: flex;
                flex-direction: column;
                align-items: center;
                width:450px;
            }
            .ask{
                width:100%;
                display: flex;
                flex-direction: column;
                align-items: center;
                .cercle{
                    width:90px;
                    height:90px;
                    background-color:#E1F7FF;
                    border-radius:50%;
                    display:flex;
                    justify-content: center;
                    align-items: center;
                    @media (max-width:860px) {
                        width:70px;
                        height:70px;
                    }
                }
                .txt{
                    text-align: center;
                    h2{
                        font-size:24px;
                        font-weight: 700;
                        margin-top:20px;
                    }
                    p{
                        margin-bottom:0;
                        margin-top:10px;
                        a{
                            color:#0000EE;
                            margin:5px 0;
                            display: contents;
                            text-decoration: none;
                        }
                    }
                }
            }
        }
    }
}
.footer_1{
    background-color:#000000;
    margin-top:80px;
    padding:56px 32px;
    .container_footer_1{
        .part_top{
            display: flex;
            justify-content: space-between;
            @media (max-width:767px) {
                display: flex;
                flex-direction: column;
                gap:20px 0;
            }
            .links_footer{
                display: flex;
                align-items: center;
                list-style: none;
                gap:7px 15px;
                flex-wrap: wrap;
                padding-left:0;
                margin-bottom:0;
                @media (max-width:480px) {
                    display: grid;
                    grid-template-columns: repeat(2,1fr);
                }
                li{
                    color: white;
                    font-size:14px;
                }
            }
        }
        hr{
            color: white;
            margin-top:25px !important;
        }
        .part_bottom{
            display: flex;
            justify-content: space-between;
            margin-top:25px;
            @media (max-width:767px) {
                display: flex;
                flex-direction: column-reverse;
                gap:20px 0;
            }
            p{
                font-size:11.5px;
                color:#C7C7C7;
                width:77%;
                @media (max-width:767px) {
                    width:100%;
                }
                a{
                    color:#C7C7C7;
                }
            }
            button{
                background: transparent;
                border:1px solid white;
                color: white;
                padding:5px 12px 5px 8px;
                border-radius:50px;
                height:33px;
                font-size:14px;
                display: flex;
                align-items: center;
                gap:5px;
                width:fit-content;
                i{
                    font-size:20px;
                    font-weight: 200;
                }
            }
        }
    }
}
.contact{
    padding: 12px 22px;
    border-radius: 999rem;
    border: none;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .6px;
    position: fixed;
    bottom: 0;
    right: 0;
    cursor: pointer;
    margin: 16px;
    background-color: #0a59ff !important;
    color: white;   
    gap:10px; 
    @media (max-width:767px) {
        bottom: 180px;
    }
    p{
        @media (max-width:767px) {
            display: none;
        }
    }
}

/*
=======================
===  login success  ===
=======================
*/
.header_2{
    padding:20px 25px;
    height:65px;
    .wel{
        p{
            display: flex;
            align-items: center;
            margin-bottom:0;
            cursor: pointer;
            i{
                font-size:20px;
            }
        }
    }
}
.wrapper_success{
    width:100%;
    .container_success{
        height:calc(100vh - 130px);  
        width:1000px;
        margin:0 auto; 
        display: flex;
        justify-content:center;
        flex-direction: column;  
        @media (max-width:1080px) {
            width:100%;
            padding:0px 25px;
        } 
        @media (max-width:700px) {
            justify-content: flex-start;
            padding-top: 74px;
        } 
        .infos_success{
            margin-bottom:60px;
            @media (max-width:700px) {
                margin-bottom:0px;
            } 
            .check{
                width:32px;
                height:32px;
                background-color: #239d45;
                display: flex;
                justify-content: center;
                align-items: center;
                border-radius:50%;
                i{
                    color: white;
                    font-size:23px;
                }
            }
            h5{
                font-weight: 700;
                margin-top:10px;
                position: relative;
                &::after{
                    position: absolute;
                    content:'';
                    width:70px;
                    height:5px;
                    background-color: #239d45;
                    left:0;
                    bottom:-10px;
                }
            }
            p{
                margin-top:25px;
                margin-bottom:20px;
                color: #000000;
            }
            button{
                background-color: #0a59ff;
                width:100%;
                border: none;
                outline: none;
                padding:10px 20px;
                color: white;
            }
        }  
    }
}
.copyghit{
    padding:20px 25px;
    height:65px;
    display: flex;
    justify-content: center;
    p{
        font-size:12px;
        margin-bottom:0;
        color:#b1b1b1;
    }
}

/*
===================
===  login sms  ===
===================
*/
.wrapper_code{
    width:100%;
    .container_code{
        min-height:calc(100vh - 130px);  
        width:550px;
        margin:0 auto; 
        display: flex;
        justify-content:center;
        flex-direction: column;  
        @media (max-width:700px) {
            justify-content: flex-start;
            padding-top: 74px;
        } 
        @media (max-width:603px) {
            width:100%;
            padding:74px 30px;
        } 
        .infos_code{
            margin-bottom:60px;
            @media (max-width:700px) {
                margin-bottom:0px;
            } 
            .check{
                width:32px;
                height:32px;
                background-color: #239d45;
                display: flex;
                justify-content: center;
                align-items: center;
                border-radius:50%;
                i{
                    color: white;
                    font-size:23px;
                }
            }
            h5{
                font-weight: 700;
                margin-top:10px;
                position: relative;
                img{
                    width:16px;
                    margin-bottom:11px;
                    margin-right:7px;
                }
                &::after{
                    position: absolute;
                    content:'';
                    width:70px;
                    height:5px;
                    background-color: #239d45;
                    left:0;
                    bottom:-10px;
                }
            }
            p{
                margin-top:25px;
                margin-bottom:5px;
                color: #000000;
                &.pin_txt{
                    font-size:15px;
                }
            }
            span{
                color: #8f8f8f;
                font-size:13px;
            }
            .error{
                display: flex;
                gap:10px;
                align-items: center;
                color: #000000;
                border-radius:5px;
                img{
                    // margin-bottom:10px;
                    width:18px;
                }
                font-size:14px;
            }
            form{
                width:100%;
                .inputes{
                    display: flex;
                    flex-direction: column;
                    gap:15px;
                    margin-top:20px;
                    .form-group{
                        position: relative;
                        .input_box{
                            position: relative;
                        }
                        input{
                            width:100%;
                            display: flex;
                            align-items: center;
                            padding:16px;
                            background-color:#F5F5F5;
                            justify-content: space-between;
                            border: none;
                            border-bottom:3px solid #000000 !important;
                            padding: 24px 16px 3px;
                            outline: none;
                            font-size:14px;
                            &.good_input{
                                border-bottom-color:#239d45 !important;
                            }
                            &.error_input{
                                border-bottom-color:#be0028 !important;
                            }
                        }
                        .error_txt{
                            color:#be0028;
                            font-size:14px;
                            margin-left:16px;
                            margin-top:3px;
                        }
                        label{
                            position: absolute;
                            top:50%;
                            transform: translateY(-50%);
                            left:16px;
                            transition: all 0.25s;
                            &.focus{
                                color: #757575;
                                font-size: 14px;
                                top: 14px;
                            }
                        }
                        .error{
                            position: absolute;
                            top:50%;
                            transform: translateY(-50%);
                            right:10px;
                            display: none;
                            color: #be0028;
                            font-size:23px;
                        }
                        .good{
                            position: absolute;
                            top:50%;
                            transform: translateY(-50%);
                            right:10px;
                            display: none;
                            color: #239d45;
                            font-size:23px;
                        }
                        .eye{
                            position: absolute;
                            top:50%;
                            transform: translateY(-50%);
                            right:10px;                            
                            width:21px;
                            cursor: pointer;
                        }
                    }                     
                }
                .btn_sub{
                    button{
                        background-color: #99C5FF;
                        width:100%;
                        border: none;
                        outline: none;
                        padding:10px 20px;
                        color: white;
                        margin-top:30px;
                        &.active{
                            background-color: #0a59ff;
                        }
                    }
                }               
            }
        }  
    }
}


// loading
.loading{
    display: flex;
    justify-content: center;
    gap:5px;
    align-items: center;
    justify-content: center;
    width:100%;
    height:100vh;
}

.loading{
    display: flex;
    justify-content: center;
    gap:9px;
    align-items: center;
    justify-content: center;
    width:100%;
    height:100vh;
    img.s{
        -webkit-animation: spin 2s linear infinite;
        animation: spin .88s linear infinite;
        width: 27px;
        margin-top: 2px;
    }
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.pos_inputes{
    width:100%;
    display: flex;
    input{
        text-align: center;
        width:100%;
        outline: none;
        border: 2px solid #9e9e9e;
        height:40px;
        font-size:20px;
        font-size:30px;
        color: #0A59FF;
        &::placeholder{
            font-size:30px;
            top:0px;
            position: relative;
        }
    }
}