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

/* GENERAL */
html,body {
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    padding: 0;
    margin: 0;
    color: #333;
    font-weight: 400;
    height: 100%;
    width: 100%;
    background: #EEF3F6;
    @include respond-down(sm) { background: #fff; border-top: 2px solid #A63297; }
}
a:hover { text-decoration: none; }
img { max-width: 100%; }

#wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-area {
    display: flex;
    max-width: 750px;
    margin-bottom: 5px;
    @include respond-down(sm) {
        flex-direction: column;
        max-width: 100%;
        width: 100%;
        padding: 0 20px;
    }
    .left {
        width: 50%;
        background: #A63297;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #FFF;
        text-align: center;
        padding: 30px;
        height: 500px;
        @include respond-down(sm) { width: 100%; order: 1;  height: auto;}
        h3 {
            font-size: 22px;
            margin-top: 15px;
            margin-bottom: 8px;
        }
        p {
            margin-bottom: 0;
        }
    }
    .right {
        width: 50%;
        background: #FFF;
        border-top: 2px solid #A63297;
        padding: 20px;
        @include respond-down(sm) { width: 100%; border: 0; padding: 0; margin-bottom: 30px; padding-top: 10px; }
        .verify {
            text-align: center;
            .img {
                text-align: center;
                margin-bottom: 20px;
                img { max-width: 90px; }
            }
            h3 {
                font-size: 28px;
                font-weight: 400;
                margin-bottom: 20px;
                margin-top: 20px;
            }
            p {
                margin-bottom: 10px;
                font-size: 16px;
                &:last-child { margin-bottom: 0; }
            }
            a {
                background: #1781e3;
                color: #FFF;
                width: 100%;
                border-radius: 5px;
                text-align: center;
                font-size: 16px;
                border: 0;
                transition: all 0.3s;
                display: block;
                padding: 12px;
                margin-top: 20px;
                &:focus {
                    outline: 0;
                    box-shadow: none;
                }
                &:hover {
                    background: #0851da;
                }
            }
        }
        form {
            legend {
                font-size: 36px;
                font-weight: 400;
                margin-bottom: 20px;
                margin-top: 20px;
                @include respond-down(sm) {
                    font-size: 24px;
                    text-align: center;
                }
                img {
                    display: block;
                }
            }
            .form-group {
                position: relative;
                .img {
                    position: absolute;
                    right: 12px;
                    top: 37px;
                }
            }
            p {
                font-size: 16px;
                display: flex;
                &.link {
                    display: block;
                    color: #1781e3;
                    font-size: 14px;
                    margin-bottom: 0;
                    cursor: pointer;
                    &:hover {
                        text-decoration: underline;
                    }
                }
            }
            .has-error {
                input {
                    border: 1px solid #d12;
                }
                .error-message {
                    margin-top: 3px;
                    color: #d12;
                    margin-bottom: 20px;
                    img { margin-right: 2px; }
                }
            }
            label {
                font-weight: 300;
                font-size: 13px;
                color: #666;
            }
            input {
                border: 1px solid #D6D6D6;
                height: 48px;
                border-radius: 5px;
                transition: all 0.3s;
                font-size: 16px;
                font-weight: 300;
                &:focus {
                    outline: 0;
                    box-shadow: none;
                    border: 1px solid #1781E3;
                }
                &::-webkit-input-placeholder { color: #D6D6D6; }
                &:-ms-input-placeholder { color: #D6D6D6; }
                &::placeholder { color: #D6D6D6; }
            }
            .remember {
                img { display: inline-block; margin-right: 10px; }
            }
            .btns {
                button {
                    background: #1781e3;
                    color: #FFF;
                    height: 48px;
                    width: 100%;
                    border-radius: 5px;
                    text-align: center;
                    font-size: 16px;
                    border: 0;
                    transition: all 0.3s;
                    &:focus {
                        outline: 0;
                        box-shadow: none;
                    }
                    &:hover {
                        background: #0851da;
                    }
                }
                &.btns2 {
                    display: flex;
                    justify-content: space-between;
                    div {
                        width: 48%;
                    }
                    button { font-size: 15px; }
                    button[type="button"] {
                        background: #CFD5D9;
                        color: #000;
                        &:hover { background: #b1b9be; }
                    }
                }
            }
        }
    }
}

/* FOOTER */
#footer {
    background: #CFD5D9;
    padding: 20px 0;
    .container {
        max-width: 1380px;
        display: flex;
        align-items: center;
    }
    .left {
        flex-grow: 1;
        align-items: center;
    }
    .right {
        p {
            margin-bottom: 0;
            font-weight: 400;
            font-size: 16px;
            display: inline-block;
            margin-right: 15px;
        }
        .lang {
            display: inline-block;
            cursor: pointer;
            position: relative;
            ul {
                padding: 0;
                margin: 0;
                position: absolute;
                left: 0;
                bottom: 48px;
                width: 100%;
                display: none;
                li {
                    list-style-type: none;
                    background: #FFF;
                    font-size: 16px;
                    border-top: 1px solid #d6d6d6;
                    border-left: 1px solid #d6d6d6;
                    border-right: 1px solid #d6d6d6;
                    width: 100%;
                    padding: 8px 15px;
                    &:hover {
                        background: #eef3f6;
                    }
                    &.active {
                        background: #1781e3;
                        color: #FFF;
                    }
                    &:first-child {
                        border-radius: 5px 5px 0 0;
                    }
                    &:last-child {
                        border-bottom: 1px solid #d6d6d6;
                    }
                }
            }
            .inner {
                display: flex;
                align-items: center;
                background: #FFF;
                font-size: 16px;
                border: 1px solid #d6d6d6;
                border-radius: 5px;
                position: relative;
                span.mm { padding: 10px 15px; }
                span.sym {
                    margin-left: 5px;
                    background: #fff;
                    width: 30px;
                    height: 48px;
                    display: inline-block;
                    position: relative;
                    border-radius: 0 5px 5px 0;
                    &:before {
                        content: '';
                        width: 10px;
                        height: 2px;
                        background: #1781E3;
                        left: 6px;
                        top: 50%;
                        position: absolute;
                        transform: rotate(32deg);
                    }
                    &:after {
                        content: '';
                        width: 10px;
                        height: 2px;
                        background: #1781E3;
                        right: 6px;
                        top: 50%;
                        position: absolute;
                        transform: rotate(-32deg);
                    }
                }
            }
            &:hover {
                span.sym {
                    background: #1781E3;
                    &:before { background: #fff; }
                    &:after { background: #fff; }
                }
            }
            &.active {
                span.sym {
                    background: #1781E3;
                    &:before { background: #fff; transform: rotate(-32deg); }
                    &:after { background: #fff; transform: rotate(32deg); }
                }
            }
        }
    }
}

#footer2 {
    padding: 30px 20px;
    p {
        margin-bottom: 0;
        color: #1781e3;
        cursor: pointer;
        &:hover {
            color: #0851da;
            text-decoration: underline;
        }
        span {
            margin: 0 10px;
        }
    }
}

.spinner-border {
    width: 40px;
    height: 40px;
    border: 3px solid #086ADB;
    border-right-color: transparent;
    margin-top: 30px;
    margin-bottom: 100px;
}