/* Write your custom CSS here */
:root {
    --primary-color: #0071BC;
    --secondary-color: #FF7E00;
    --white: #fff;
}

.btn-secondary {
    background-color: var(--secondary-color) !important;
    border: 1px solid var(--secondary-color) !important;
    color: var(--white) !important;
    border-radius: 0px;
    font-weight: 500;
}

.btn-secondary:hover {
    background-color: #EC7C0F !important;
    border: 1px solid var(--secondary-color) !important;
    color: var(--white);
}

.font--14 {
    font-size: 14px;
}

nav .logout {
    background-color: var(--secondary-color);
    border: 1px solid var(--secondary-color) !important;
    color: var(--white) !important;
    border-radius: 0px;
    font-weight: 500;
}

nav .logout:hover {
    background-color: #EC7C0F;
    border: 1px solid var(--secondary-color) !important;
    color: var(--white);
}


.auth--bg {
    background-image: url(../images/9996.jpeg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 100vh;
    max-height: 180vh;
}

.auth label {
    font-size: 14px;
}

.auth .form-control,
.auth .custom-select {
    height: 50px;
    border: 1px solid #C4C4C4;
}

.auth .form-control::placeholder {
    color: #8F92A1;
    font-weight: 300;
}

.auth .auth__submit {
    color: var(--white);
    height: 50px;
    border-radius: 0px;
    font-weight: 500;
}

.auth .auth__submit:hover {
    background-color: #EC7C0F;
    color: var(--white);
}

.auth .auth__social {
    border: 1px solid #C4C4C4;
    border-radius: 0px;
    padding: 5px 35px;
}

.auth__wrapper {
    padding: 30px 150px 0px 150px;
}

.auth__wrapper a {
    color: var(--primary-color);
    font-size: 14px;
    font-weight: 500;
}

.auth__wrapper h3 {
    color: var(--primary-color);
    font-weight: 700;
    font-size: 30px;
    line-height: 1.2;
}

.auth__wrapper p {
    color: #2F465C;
    font-size: 15px;
}

@media (min-width:320px) and (max-width:720px) {
    .auth__wrapper {
        padding: 1em;
    }

    .kyc--wrapper {
        padding: 1em;
    }

    .calculator .input-group > .custom-select {
        width: 15%;
    }

    .calculator .input-group-prepend {
        width: 65%;
    }

    .banner {
        height: auto;
        position: relative;
    }

    .banner--bg {
        height: auto;
    }

}