body {
    background-color: var(--body-color);
    background-image: url("/img/companies/roobit/login_bg.png");
    background-repeat: no-repeat;
    background-size: cover;
    object-fit: none;
}

#signupForm #pills-tab {
    background: var(--login-form-control-bg) !important;
}
fieldset {
    max-width: 600px;
    border-radius: 21px;
    flex-direction: column;
    align-items: flex-start;
    padding: 91.3px 100px;
}
#msform fieldset:not(:first-of-type) {
    display: none;
}

.btn-devam-et {
    height: 63px;
}

#signupForm .qrImage {
    width: 218px;
}
.field-icon {
    float: right;
    position: relative;
    z-index: 2;
    top: -37px;
    right: 15px;
}

.span-kod-gelmedi-mi {
    font-family: OpenSans;
    font-size: 12px;
    font-weight: 300;
    font-stretch: normal;
    font-style: normal;
    line-height: 2.79;
    letter-spacing: normal;
    text-align: center;
    color: var(--white);
}

.span-sifremi-unuttum{
    text-decoration: underline;
}

.span-sifremi-unuttum:hover {
    color: var(--bright-green);
}

#inputEmailPassword-error {
    position: absolute;
    bottom: -25px;
}

#signupForm #inputEmailPassword,
#signupForm #inputPhonePassword {
    border-right: 0.4px solid transparent !important;
}

.socialMediaIcon{
    width: 50px;
    height: 50px;
    object-fit: contain;
}
.socialMediaIcon:hover {
    filter: invert(35%) sepia(13%) saturate(10000%) hue-rotate(66deg) brightness(100%) contrast(100%);
}

.scroll-container {
    transform: none;
}

@media screen and (max-width: 480px) {
    body:has(.login-mobile) {
        background-color: var(--login-mobile-page-bg);
        background-image: var(--login-mobile-page-gradient);
        width: 100%;
        overflow-x: hidden;
        overflow-y: auto;
    }

    .login-mobile-caption-wrap {
        gap: 10px;
    }

    .login-mobile-caption {
        font-size: 12px;
        font-weight: 500;
        letter-spacing: 0.08em;
        color: var(--mobile-primary-light);
    }

    .login-mobile-caption-line {
        width: 28px;
        height: 2px;
        background-color: var(--mobile-primary-light);
        border-radius: 1px;
    }

    .login-mobile-headline-line1 {
        font-size: 28px;
        line-height: 1.2;
        color: var(--login-mobile-text-primary);
    }

    .login-mobile-headline-line2 {
        font-size: 20px;
        color: var(--login-mobile-text-primary);
    }

    .login-mobile-headline-highlight {
        color: var(--mobile-primary-light);
    }

    .login-mobile-subtitle {
        font-size: 12px;
        color: var(--login-mobile-text-secondary);
    }

    .login-mobile-card {
        background-color: var(--login-mobile-surface);
        border: 1.5px solid var(--login-mobile-border);
        border-radius: 16px;
        padding: 20px 16px;
    }

    .login-mobile-container {
        position: relative;
    }

    .login-mobile-logo-link {
        position: absolute;
        top: 24px;
        left: 0px;
        z-index: 2;
    }

    .login-mobile-logo {
        height: 32px;
        object-fit: contain;
    }

    .login-mobile-field.has-error .login-mobile-input,
    .login-mobile-field.has-error .login-mobile-input-group {
        border-color: var(--mobile-primary-light) !important;
    }

    .login-mobile-field.has-error .login-mobile-input-group:focus-within {
        border-color: var(--mobile-primary-light) !important;
    }

    .login-mobile-label {
        font-size: 11px;
        font-weight: 500;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--login-mobile-text-muted);
    }

    .login-mobile-field-error {
        font-size: 12px;
    }

    .login-mobile-input-group {
        min-height: 56px;
        background-color: var(--login-mobile-bg);
        border: 1.5px solid var(--login-mobile-border);
        border-radius: 12px;
        overflow: hidden;
        transition: border-color 0.2s ease;
    }

    .login-mobile-input-group:focus-within {
        border-color: var(--login-mobile-text-muted);
    }

    .login-mobile-input-icon {
        width: 44px;
        color: var(--login-mobile-text-muted);
        font-size: 16px;
    }

    .login-mobile-input-icon--left {
        padding-left: 4px;
    }

    .login-mobile-input {
        min-width: 0;
        height: 54px;
        border: none !important;
        background: transparent !important;
        box-shadow: none !important;
        color: var(--login-mobile-text-primary) !important;
        font-size: 14px;
    }

    .login-mobile-input::placeholder {
        color: var(--login-mobile-text-muted);
    }

    .login-mobile-input-group--password .login-mobile-input {
        border-right: none !important;
    }

    .login-mobile-input-toggle {
        width: 44px;
        height: 54px;
        border: none !important;
        background: transparent !important;
        color: var(--login-mobile-text-muted) !important;
    }

    .login-mobile-link {
        font-size: 12px;
        color: var(--mobile-primary-light);
        text-decoration: underline;
    }

    .login-mobile-link:hover {
        color: var(--mobile-primary-light);
    }

    body{
        background-image: unset;
        width: 100%;
        overflow-x: hidden;
        overflow-y: hidden;
    }
    fieldset {
        padding: 0;
        width: 100%;
     
    }
    .scroll-container{
        transform: translateY(-60px);
    }
    .fieldset-webmobile {
        padding: 50px 20px;
        width: 100%;
        background: none;
    }
    .customWrapper button {
        background: var(--login-form-control-bg) !important;
    }
    .tab-style2.nav-pills .nav-link{
        padding: unset !important;
        border-radius: 12px !important;
        width : 100px;
    }
    #inputUsername,
    #inputEmailPassword,
    #InputPhoneNumber,
    #InputPhonePassword,
    .input-group-textbox2 {
        background: var(--login-form-control-bg) !important;
        box-shadow: none !important;
        height: 56px;
    }

    fieldset.login-mobile #inputUsername,
    fieldset.login-mobile #inputEmailPassword,
    fieldset.login-mobile .input-group-textbox2 {
        background: transparent !important;
    }

    #signupForm .qrImage {
        width: 200px;
    }
    .div-fieldset {
        padding-right: 0;
        padding-left: 0;
        width: 100%;
    }
    .div-fieldset .area-backcolor {
        padding: 91.3px 19px !important;
        background-color: var(--port-gore);
    }

    #firstFieldset {
        min-height: 550px;
    }

    .customRegisterWrapper {
        display: flex;
        margin-top: 20px;
        flex-direction: column;
        gap: 35px;
    }

    .customRegisterRow {
        margin: 0 !important;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .customWrapper {
        text-wrap:wrap;
        width: 33.3%;
    }

    .customWrapper button {
        width: 100%;
        padding: 6px 10px;
    }

}