@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&display=swap');
@import "helpers/_responsive";

/* GENERAL */
html,body {
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    padding: 0;
    margin: 0;
    color: #000;
    font-weight: 400;
}
a:hover { text-decoration: none; }
img { max-width: 100%; }
.container {
    @include respond-up(md) {
        max-width: 1455px;
    }
    @include respond-down(md) {
        max-width: 100%;
        padding-left: 20px;
    }
}

#header {
    max-width: 95%;
    margin: 0 auto;
    overflow: hidden;
    display: flex;
    align-items: center;
    padding: 20px 0;
    @include respond-down(md) { display: block; }
    @include respond-down(sm) { max-width: 100%; padding-left: 20px; padding-right: 20px; }
    .logo {
        flex-grow: 1;
        display: flex;
        align-items: center;
        p {
            margin-left: 30px;
            color: #666666;
            margin-bottom: 0;
            font-size: 12px;
        }
    }
    .header-right {
        p {
            color: #666666;
            margin-bottom: 0;
            font-size: 12px;
            @include respond-down(md) { text-align: right; }
        }
    }
}

#main {
    background-image: url(../imgs/bg1.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    max-width: 95%;
    margin: 0 auto;
    padding-bottom: 40px;
    padding-top: 120px;
    @include respond-down(sm) { max-width: 100%; padding-left: 20px; padding-right: 20px; }
    .inner {
        background-image: url(../imgs/bg2.png);
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        padding: 0 20px;
        @include respond-down(md) { background-image: none; }
    }
    .demo {
        text-align: right;
        margin-top: 20px;
        button {
            background: #1B589C;
            color: #FFF;
            text-align: center;
            border-radius: 30px;
            padding: 0 20px;
            height: 40px;
            border: 0;
            &:focus {
                outline: 0;
                box-shadow: none;
            }
        }
    }
    .form {
        max-width: 430px;
        margin: 0 auto;
        .title {
            color: #1b589c;
            text-align: center;
            margin-bottom: 30px;
            h3 {
                font-weight: 500;
                font-size: 22px;
            }
            p {
                margin-bottom: 0;
                font-size: 16px;
            }
        }
        #forma {
            .error {
                color: red;
                font-size: 12px;
                margin-bottom: 10px;
            }
            .form-group {
                position: relative;
                .err-logo {
                    position: absolute;
                    right: 8px;
                    top: 10px;
                    display: none;
                    img {
                        width: 18px;
                        height: 18px;
                    }
                }
            }
            .has-error {
                input {
                    border: 1px solid #dc3545;
                    &:focus {
                        border-color: #dc3545;
                        box-shadow: 0 0 0 0.2rem #dc354540;
                    }
                }
                .err-logo { display: block; }
            }
            input {
                height: 46px;
                width: 100%;
                box-shadow: 0 3px 6px 0 #00000029;
                border-radius: 10px;
                font-size: 16px;
            }
            .remember {
                overflow: hidden;
                p {
                    float: left;
                    margin-bottom: 0;
                    color: #1b589c;
                    font-size: 12px;
                    position: relative;
                    padding-left: 15px;
                    &:before {
                        content: '';
                        width: 13px;
                        height: 13px;
                        border-radius: 3px;
                        border: 1px solid #767676;
                        position: absolute;
                        left: 0;
                        top: 0;
                    }
                    img { margin-left: 5px; }
                }
                ul {
                    float: right;
                    margin: 0;
                    padding: 0;
                    li {
                        list-style-type: none;
                        color: #1b589c;
                        font-size: 12px;
                        text-align: right;
                    }
                }
            }
            .btns {
                max-width: 300px;
                margin: 0 auto;
                margin-top: 20px;
                button {
                    height: 40px;
                    width: 100%;
                    border-radius: 30px;
                    color: #fff;
                    background: #1B589C;
                    text-align: center;
                    border: 0;
                    margin-bottom: 20px;
                    &:focus {
                        outline: 0;
                        box-shadow: none;
                    }
                    &[type="button"] {
                        background: #FFF;
                        border: 2px solid #1B589C;
                        color: #1B589C;
                        margin-bottom: 0;
                    }
                }
            }
        }
        .login-bottom {
            background: #fff;
            max-width: 360px;
            margin: 0 auto;
            padding: 15px;
            border-radius: 10px;
            margin-top: 90px;
            h4 {
                color: #666;
                font-weight: 700;
                text-align: center;
                font-size: 12px;
                margin-bottom: 5px;
            }
            .con {
                display: flex;
                .sym {
                    margin-right: 10px;
                }
                p {
                    color: #1b589c;
                    margin-bottom: 0;
                    font-size: 11px;
                }
            }
            .bulls {
                display: flex;
                align-items: center;
                justify-content: center;
                margin-top: 10px;
                div {
                    margin-right: 10px;
                    height: 3px;
                    background: #C2C2C2;
                    width: 30px;
                    &:last-child { margin-right: 0; }
                    &:first-child { background: #858585; }
                }
            }
        }
    }
}

#footer {
    margin-top: 30px;
    .inner {
        max-width: 95%;
        margin: 0 auto;
        border-top: 7px solid #144F91;
        @include respond-down(sm) { max-width: 100%; padding: 0 20px; }
    }
    p {
        text-align: center;
        font-size: 12px;
        padding: 20px 0;
        span {
            color: #666;
            display: inline-block;
            margin: 0 5px;
        }
    }
}

#header2 {
    .inner {
        padding: 30px 0;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: space-between;
        &:after {
            content: '';
            height: 7px;
            background: linear-gradient(90deg,#00244d 0,#2378d7 80%);
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            border-radius: 10px;
        }
    }
    .title {
        font-weight: 600;
        color: #1C5BA2;
        font-size: 18px;
        margin: 0;
        @include respond-down(xs) { display: none; }
    }
}

#main2 {
    .icons {
        @include respond-down(lg) {
            padding: 20px 0;
            border-bottom: 1px solid #CDD4D9;
        }
        ul {
            padding: 0;
            margin: 0;
            @include respond-down(lg) {
                display: flex;
                justify-content: space-between;
            }
            li {
                list-style-type: none;
                text-align: center;
                margin-bottom: 25px;
                @include respond-down(lg) {
                    margin-bottom: 0;
                }
                &:last-child { margin-bottom: 0; }
                .icon {
                    width: 70px;
                    height: 70px;
                    margin: 0 auto;
                    box-shadow: 0 3px 6px 0 #0000000d;
                    background-color: #FFF;
                    border: solid 1px #ebebeb;
                    border-radius: 100%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }
                p {
                    color: #1b589c;
                    font-weight: 600;
                    font-size: 15px;
                    margin-bottom: 0;
                    margin-top: 5px;
                }
            }
        }
    }
    .page-title {
        justify-content: space-between;
        padding: 20px 0;
        p {
            margin-bottom: 0;
            color: #2378d7;
            font-size: 18px;
            font-weight: 500;
            svg { display: inline-block; margin: 0 5px; }
        }
    }
    .details-area {
        padding: 30px;
        background: #F0F2F5;
        border-radius: 100px 10px 10px 10px;
        .tt {
            text-align: center;
            h3 {
                font-weight: 700;
                font-size: 20px;
                color: #2378D7;
            }
            p {
                margin-bottom: 0;
                color: #666;
                font-size: 16px;
            }
        }
        .steps {
            margin-bottom: 30px;
            ul {
                max-width: 650px;
                padding: 0;
                margin: 0 auto;
                display: flex;
                justify-content: space-between;
                li {
                    list-style-type: none;
                    position: relative;
                    color: #2378d7;
                    padding-top: 30px;
                    width: 33.33%;
                    text-align: center;
                    font-size: 12px;
                    &:before {
                        content: '';
                        width: 20px;
                        height: 20px;
                        background: #FFF;
                        top: 0;
                        left: calc(50% - 10px);
                        position: absolute;
                        border-radius: 100%;
                        z-index: 99;
                    }
                    &:after {
                        content: '';
                        width: 100%;
                        height: 1px;
                        background: #CDD4D9;
                        right: 50%;
                        top: 10px;
                        position: absolute;
                    }
                    &:first-child {
                        &:after { display: none; }
                    }
                    &.active {
                        font-weight: 600;
                        &:before {
                            border: 5px solid #2378D7 !important;
                        }
                        &:after {
                            background: #2378D7;
                        }
                    }
                }
            }
        }
        .details {
            background: #FFF;
            padding: 30px;
            box-shadow: 0 3px 6px 0 #00000029;
            border-radius: 10px;
            .has-error {
                input {
                    border: 1px solid red;
                }
                .error-message {
                    font-size: 13px;
                    color: red;
                    margin-top: 3px;
                }
            }
            label {
                text-align: right;
                font-size: 16px;
                margin: 0;
                @include respond-down(sm) {
                    margin-bottom: 3px;
                    text-align: left;
                }
            }
            input {
                height: 46px;
                width: 100%;
                border-radius: 10px;
                font-size: 16px;
                &:focus {
                    outline: 0;
                    box-shadow: none;
                    border-color: #2378D7;
                }
            }
        }
    }
    .btns {
        text-align: center;
        margin-top: 20px;
        button {
            background: #1B589C;
            color: #FFF;
            text-align: center;
            border-radius: 30px;
            padding: 0 30px;
            height: 40px;
            border: 0;
            &:focus {
                outline: 0;
                box-shadow: none;
            }
        }
    }
}

#footer2 {
    @include respond-down(lg) {
        margin-top: 50px;
    }
    .inner {
        padding: 30px 0;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: space-between;
        @include respond-down(sm) {
            display: block;
            text-align: center;
            p {
                margin: 20px 0;
            }
        }
        &:after {
            content: '';
            height: 7px;
            background: linear-gradient(90deg,#00244d 0,#2378d7 80%);
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            border-radius: 10px;
        }
    }
    p {
        font-weight: 600;
        color: #1C5BA2;
        font-size: 12px;
        margin: 0;
        span {
            display: inline-block;
            margin: 0 5px;
        }
    }
}

#sms_area {
    .modal-dialog {
        max-width: 650px;
        .modal-body {
            .top {
                text-align: center;
                border-bottom: 1px solid #EBEBEB;
                padding-bottom: 10px;
                img {
                    max-width: 195px;
                }
            }
            .bottom {
                padding-top: 50px;
                padding-bottom: 20px;
                #forma {
                    legend {
                        text-align: center;
                        color: #2378d7;
                        font-size: 17px;
                    }
                    .form-group {
                        margin: 30px 0;
                    }
                    .has-error {
                        input {
                            border: 1px solid red;
                        }
                        .error-message {
                            color: red;
                            margin-top: 10px;
                        }
                    }
                    input {
                        border: 1px solid #2377d7;
                        color: #2377d7;
                        border-radius: 10px;
                        height: 40px;
                        max-width: 180px;
                        margin: 0 auto;
                        text-align: center;
                        &:focus {
                            box-shadow: 0 3px 6px 0 rgba(0,0,0,.1);
                            border: 1px solid #1b589c;
                        }
                    }
                    .btns {
                        text-align: center;
                        button {
                            background: #1B589C;
                            border: 2px solid #1B589C;
                            color: #FFF;
                            font-weight: 600;
                            text-align: center;
                            border-radius: 30px;
                            height: 40px;
                            padding: 0 20px;
                            min-width: 124px;
                            margin-right: 10px;
                            &:last-child { margin-right: 0; }
                            &[type="button"] {
                                background: transparent;
                                color: #1B589C;
                            }
                        }
                    }
                    p {
                        font-size: 13px;
                        color: #6d7073;
                        text-align: center;
                        margin-top: 20px;
                        margin-bottom: 20px;
                    }
                }
                .infos {
                    display: flex;
                    align-items: center;
                    background: #FFF;
                    box-shadow: 2px 3px 10px 3px rgba(0,0,0,.1)!important;
                    max-width: 516px;
                    margin: 0 auto;
                    border-radius: 10px;
                    padding-right: 10px;
                    padding-top: 5px;
                    padding-bottom: 5px;
                    .circle {
                        border-right: 1px solid #CDD4D9;
                        padding: 0 10px;
                        margin-right: 10px;
                        img {
                            min-width: 40px;
                        }
                    }
                    p {
                        color: #6d7073;
                        font-size: 12px;
                        margin-bottom: 0;
                    }
                }
            }
        }
    }
}

.loader {
    position: relative;
    .spinner-border {
        width: 130px;
        height: 130px;
        vertical-align: text-bottom;
        border: 5px solid #d7d7d7;
        border-right-color: transparent;
    }
    .logo {
        position: absolute;
        left: calc(50% - 25px);
        top: calc(50% - 25px);
        img {
            height: 50px;
            width: 50px;
        }
    }
}