:root {
    --bs-primary: #014F4A;
    --bs-secondary: #E69100;
    --bs-danger: #EC1A80;
    --bs-warning: #D0C82A;
}

body {
    font-family: "Plus Jakarta Sans", sans-serif;
    background-color: #014F4A;
    color: #ffffff !important;
    overflow-x: hidden;
    overflow-y: hidden;
}

.main{
    background: radial-gradient(50% 50% at 50% 50%, #EAA32A 0%, rgba(234, 163, 42, 0) 100%);
}

.bg-brand-500 {
    margin-top: 38px !important;
}

.image-login-portal{
    position: absolute;
    top: -70px;
    left: 130px;
    max-width: 100%;
}
.landing-page {
    min-height: 100vh;
}

.portal-title{
    font-size: 72px;
    font-weight: 400;
    line-height: 90px;
}
.portal-text{
    font-size: 30px;
    font-weight: 400;
    line-height: 38px;
}

.btn-primary {
    background-color: var(--bs-secondary) !important;
    border-color: var(--bs-secondary) !important;
}

.btn-primary:hover {
    background-color: #C07900;
    border-color: #C07900;
}

.btn-style {
    width: 177px;
    height: 44px;
    font-size: 16px;
    line-height: 26px;
    font-family: 'Inter', sans-serif;
    border-radius: 80px;
    font-weight: 600;
}

h1 {
    font-weight: 500;
}

.btn {
    border-radius: 2rem;
}

.btn-outline-light {
    background-color:  transparent;
    color: #ffffff;
    border-color: var(--bs-secondary) !important;
}

.btn-outline-light:hover,
.btn-outline-light:focus {
    background-color:  transparent;
    color: #ffffff;
    border-color: var(--bs-secondary) !important;
}

.custom-modal-width {
    max-width: 393px;
    width: 90%;
}

.custom-referral-modal-width {
    max-width: 490px;
    width: 90%;
}

.modal-title {
    font-size: 24px;
    font-weight: 600;
    line-height: 32px;
    color: rgba(0, 0, 0, 1);
}

.text-orange {
    color: #EAA32A !important;
}

.modal-content {
    background-color: #ffffff;
    border-radius: 8px;
}

.modal-header {
    border-bottom: none;
    padding: 16px 24px;
}

.modal-body {
    padding: 12px 24px 12px 24px;
}

.input-label {
    font-weight: 600;
    font-size: 18px;
    line-height: 28px;
}

.form-label-input,
.form-label-input input {
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 24px;
    color: #414651 !important;
}

.forgot-login {
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 20px;
    color: #414651 !important;
}

.multiple-text {
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #414651;
}

.btn-sign-in {
    height: 44px;
    font-size: 16px;
    line-height: 24px;
    font-family: 'Inter', sans-serif;
    border-radius: 80px;
    font-weight: 600;
    gap: 6px;
}

.form-control {
    border-radius:  32px;
    padding: 16px 24px 16px 24px !important;
    border-color: rgba(233, 234, 235, 1) !important;
    gap: 10px;
}

.modal-btn-close {
    width: 10px;
    height: 10px;
    padding: 0 !important;
}

.bg-close{
    right: -45px;
    width: 36px;
    height: 36px;
    padding: 8px;
    color: #111827 !important;
    background-color: #FFFFFF !important;
    border-radius: 32px;
    gap: 10px;
    border: none !important;
}

.footer-text {
    font-weight: 400;
    font-size: 14px !important;
    line-height: 20px !important;
    color: #414651 !important;
}

.body-text {
    font-weight: 400;
    font-size: 14px !important;
    line-height: 20px !important;
    color: #414651;
}

.referral-body-text {
    font-weight: 400;
    font-size: 18px !important;
    line-height: 24px !important;
    color: #414651;
}

.modal-close {
    border-color: #414651 !important;
    font-weight: 700;
}

.btn-outline-light {
    background-color: #ffffff;
    color: #414651;
}

.btn-outline-light:hover {
    background-color: #ffffff;
    color: #414651;
}

.btn-continue{
    border-radius: 80px !important;
    padding: 10px 16px 10px 16px;
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 24px !important;
    color: #FFFFFF !important;
}

.password-input {
    border-right: none;
}

.btn-show-password{
    padding-right: 24px;
    border: 1px solid #dee2e6 !important;
    border-left: none !important;
    line-height: 0 !important;
}
.password-invalid-border {
    border: 1px solid #dc3545 !important;
}
.form-control.is-invalid {
    background-image: none !important;
}

#deal {
    padding: 16px 24px;
    border-radius: 32px;
    border: 1px solid #E9EAEB
}

@media (max-width: 576px) {
    .portal-title {
        font-size: 56px;
        line-height: 70px;
    }
    .text-block {
        padding: 0 !important;
    }
    .modal-dialog {
        margin-right: auto;
        margin-left: auto;
    }
}

@media (max-width: 480px) {
    .bg-close {
        right: 0;
        top: 2px !important;
    }
    .button-group {
        flex-wrap: nowrap !important;
    }
}

@media (max-width: 767px) {
    .container, .container-sm {
         max-width: 100vh !important;
    }

    .image-login-portal{
        left: 0px;
        top: 0px;
    }
    .portal-title {
        font-size: 34px;
        line-height: 42px;
    }

    body {
        overflow-y: scroll;
    }

    .bg-brand-500 {
        margin-top: 10px !important;
    }

    .portal-text {
        font-size: 22px;
    }

    .min-vh-100 {
        min-height: 94vh !important;
    }
}