@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto-Bold.woff2') format('woff2'),
        url('../fonts/Roboto-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto-Medium.woff2') format('woff2'),
        url('../fonts/Roboto-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto-Black.woff2') format('woff2'),
        url('../fonts/Roboto-Black.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto-Regular.woff2') format('woff2'),
        url('../fonts/Roboto-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'FontAwesome';
    src: url('../fonts/FontAwesome.woff2') format('woff2'),
        url('../fonts/FontAwesome.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

:focus{ box-shadow: none !important;}

.account-box{
    background-color: rgba(var(--primary), 0.05);
        padding: 48px 30px;
    border-radius: 20px;
}

/*login css*/
.login-sec .login-error {max-width: 600px;margin: 0 auto;border-radius: 0;}
.login-sec .login-error button {width: auto;height: auto;padding: 0;background: none;font-size: 30px;line-height: normal;top: -8px;position: relative;}
.login-logo .logo-container {padding-bottom: 0;}
/*.login-sec {box-shadow: 0 0 1px rgba(0, 0, 0, .125), 0 1px 3px rgba(0, 0, 0, .2) !important;border-top: 3px solid #136161;
    padding: 15px 0px 40px !important; max-width: 700px; width: 100%; margin-bottom: 30px;}*/
.login-sec form.login-form {max-width: 600px; width: 100%; margin: 0 auto;}
.login-sec .login-form h3 {font-size: 36px;text-align: center;border-bottom: 1px solid #ccc;padding: 15px 0;margin: 0 0 20px;}
.login-sec .login-form h2.h3 {text-align: center;margin: 0 0 20px;color: #136161;font-weight: 600;font-size: 30px;}
.login-logo .logo-container img {max-width: 230px !important;height: auto !important;margin: auto;}

.login-sec .login-form-inner .input-login{ position: relative;margin: 0 0 15px;}
.login-sec .login-form-inner .input-login span.input-icon {position: absolute;top: 1px;right: 0;background-color: #e9ecef;border: 1px solid #ced4da;width: 39px;
height: 50px;border-radius: 0 5px 5px 0;display: flex;align-items: center;justify-content: center;}
.login-sec .login-form-inner .input-login span.input-icon img {width: 21px;}
.login-sec .login-form-inner .input-login span.input-icon img.login-lock {width: 15px;}
.login-sec input.input-text, .login-sec select.input-sec {background: none;display: block;width: 100%;padding: 10px 20px;font-size:16px;font-weight: 400;
line-height: 30px;color: #495057;background-color: #fff;background-clip: padding-box;border: 1px solid #ced4da;border-radius: .25rem;box-shadow: inset 0 0 0 transparent;transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;}
.login-sec select.input-sec{margin-bottom: 10px;}
.login-sec a.forgat-pass {color: #136161;font-weight: 600;text-decoration: none;font-size: 16px;transition: all 0.5s ease;}
.login-sec .remember-chckout span {color: #136161;font-weight: 600;text-decoration: none;font-size: 16px;transition: all 0.5s ease;}
.login-sec a.forgat-pass:hover, .login-sec .login-form .remember-chckout span:hover{ color: #8DC0B9; transition: all 0.5s ease;}
.login-sec .button.button--primary{font-family: 'Outfit';
    font-weight: normal;
    text-transform: uppercase;
    text-decoration: none;
    padding: 10px 35px;
    line-height: 28px;
    font-size: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    column-gap: 7px;
    text-align: center;
    transition: 0.4s;
    border: 1px solid rgba(var(--primary), 1);
    border-radius: 40px;
}

.login-sec .button.button--primary:hover{
    background: rgba(var(--white), 1) !important;
    color: rgba(var(--primary), 1) !important;
    border-color: rgba(var(--primary), 1) !important;
}    

.login-sec .login-sign-acc{ text-align: center;}
.login-sec .login-sign-acc, .login-sec .login-form .login-sign-acc a {color: #136161;font-weight: 600;text-decoration: none;font-size: 16px;transition: all 0.5s ease;}
.login-sec .login-sign-acc a:hover{color: #8DC0B9; transition: all 0.5s ease;}
.login-sec button.errorclose {padding: 0;background: none;display: inline-block;}
/*login css end*/

/*forgot css*/
.login-sec  .forgot-password-main {padding: 0 20px;width: 100%;margin: 0 auto;}
.login-sec .forgot-desc {margin: 18px 0;color: #000;}
/*forgot css end*/


/*register css*/
.subscription-options{
    display: flex;
    flex-wrap: wrap;
    column-gap: 10px;
    row-gap: 10px;
}

.login-sec .login-form .login-form-inner .form-field-reg {display: flex;align-items: center;justify-content: space-between; margin: 0 0 10px;}
.login-sec .login-form .login-form-inner .form-field-reg .input-sec {width: 48.5%;}
.login-sec .login-form .subscription-register label.sub-head {font-size: 18px;font-weight: 600;margin: 18px 0 6px;color: #136161;}
.login-sec .login-form .subscription-register .test-subscription {background: #e9e9e9;padding: 10px 14px;border-radius: 6px;color: #136161;font-weight: 500; flex: 1 1 auto;}
/*.login-sec .login-form .login-form-inner .card-number {border: 1px solid #ccc;padding: 10px 10px;border-radius: 6px;}*/
.login-sec .login-form .subscription-register .test-subscription input:focus {outline: none !important;box-shadow: none;}
.login-sec .login-form .login-form-inner .card-number label {font-weight: 600;color: #136161;width: 100%;display: inline-block;margin: 0 0 1px;
font-size: 16px;}
.login-sec .login-form .login-form-inner .card-number .form-control {border: 1px solid #ced4da;padding: 5px 7px;margin: 0 0 8px;border-radius: 3px; min-height: 50px;}

.card-number{
    display: flex;
    flex-wrap: wrap;
    column-gap: 10px;
}
.card-number > div:first-child{
    width: 100%;
}
.card-number > div:not(:first-child){
    flex: 1 1 auto;
}

/*register css end*/

/*forgot password css*/
.forgot-password-main{
    max-width: 600px;
    margin: 0 auto;
}
.login-sec .login-form a.forgot-register {color: #136161;font-weight: 600;text-decoration: none;font-size: 16px;transition: all 0.5s ease;}
.login-sec .login-form a.forgot-register:hover{color: #8DC0B9; transition: all 0.5s ease;}
/*forgot password css end*/

@media(max-width:639px){
/*.login-sec {max-width: 90%; padding: 15px 20px 40px !important;}*/
.account-box{
        padding: 24px 16px;
    }
}

@media(max-width:575px){
/*    .login-sec form.login-form{padding: 30px 20px;}*/
.login-sec .login-form a.forgot-register{ font-size: 14px;}

/*register css*/
.login-sec .login-form .login-form-inner .form-field-reg{ display: block; margin-bottom: 0;}
.login-sec .login-form .login-form-inner .form-field-reg .input-sec{ width: 100%;margin: 0;}
.login-sec .login-form .subscription-register .test-subscription label {font-size: 11px;}
.login-sec .login-form .login-form-inner .card-number{ margin-bottom: 0;}
/*register css end*/
.subscription-options{
    column-gap: 6px;
    row-gap: 6px;
}
.login-sec .login-form .subscription-register .test-subscription{
    padding: 6px 8px;
    flex: 1 1 calc(50% - 6px * 2/3);
}

}