/* General Styles */
html {
}
:root {
    /* Colors */
    --Spacing-8: 0.5rem;
    --blue-color: #4B5262;
    --background-color: #CDEE52;
    --dark-background-color: #252525;
    --light-text-color: #E0E5F2;
    --gray-color: #949494;
    --primary-button-color: #CDEE52;
    --secondary-button-color: #252525;
    --main-heading-color: #0F172A;
    /* Font Properties */
    --font-family: 'Manrope', sans-serif;
    --font-size-small: 0.875rem;
    --font-size-medium: 1rem;
    --font-size-large:  clamp(1rem, 4vw, 1.325rem);
    --font-size-heading: 3.45rem;
    --font-weight-light: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 700;
    /* Spacing */
    --spacing-small: 0.5rem;
    --spacing-medium: 0.625rem;
    --spacing-large: 1rem;
    --spacing-xl: 1.5rem;
    /* Sizes */
    --button-width: 25.625rem;
    --button-height: 3.375rem;
    --input-width: 25.625rem;
    --input-height: 3.125rem;
    --container-padding: 12.5rem;
    --border-radius: 0.5rem;
    /* Line Heights */
    --line-height-default: 1.62;
    --line-height-heading: 1.19;
    /* Letter Spacing */
    --letter-spacing-tight: -0.02rem;
    --letter-spacing-heading: -0.25rem;
    /* Responsive Font Size */
    --font-size-responsive: 1vw;
}

/* Container Styles */
.container {
    padding: var(--spacing-medium) var(--spacing-small);
    justify-content: center;
    align-items: center;
    gap: var(--spacing-medium);
    flex-shrink: 0;
    border-radius: var(--spacing-small);
    background: var(--background-color);
}

/* Text Styles */
.sub-text {
    color: var(--blue-color);
    font-family: var(--font-family);
    font-size: var(--font-size-large);
    font-weight: var(--font-weight-light);
    line-height: var(--line-height-default);
}

/* Button Container Styles */
.button-container {
    display: flex;
    align-items: center;
    gap: var(--spacing-large);
}

/* Button Styles */
.register-btn, .login-btn {
    display: flex;
    width: var(--button-width);
    height: var(--button-height);
    padding: var(--spacing-medium) var(--spacing-small);
    justify-content: center;
    align-items: center;
    gap: var(--spacing-medium);
    flex-shrink: 0;
}

.resend-btn {
    display: flex;
    width: 25.625rem;
    height: 2rem;
    padding: 1rem;
    justify-content: center;
    align-items: center;
    gap: 0.625rem;
    border-radius: var(--Spacing-8, 0.5rem);
    background: rgba(205, 238, 82, 0.50);
    color: #9DB24B;
    font-family: Manrope;
    font-size: 1rem;
    font-style: normal;
    font-weight: bold;
    line-height: 100%; /* 1rem */
    transition: background-color 0.3s;
}

@keyframes buttonClick {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(0.9);
    }

    100% {
        transform: scale(1);
    }
}

/* Style for the resend button */

/* Optionally change background color on hover */
.resend-btn:hover {
    background-color: var(--primary-button-color, #CDEE52);
}

/* Apply the animation on click */
.resend-btn:active {
    animation: buttonClick 0.2s;
}

/* Content Wrapper and Button Container Styles */
.content-wrapper,
.button-container {
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

.auth-btn {
    display: flex;
    width: var(--input-width);
    height: var(--input-height);
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-medium);
    flex-shrink: 0;
    border-radius: var(--border-radius);
    background: var(--dark-background-color);
    color: var(--light-text-color);
    font-family: var(--font-family);
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-medium);
    line-height: 1.25rem; /* 142.857% */
    letter-spacing: -0.0175rem;
}

.dx-overlay-content.dx-popup-normal.dx-resizable
{
    width: clamp(100px, 95vw, 600px) !important;
}
.container-index{
    height: auto;
    padding: 2.5%;
}
.cp-container-index{
    padding-top: 2rem;
    margin-left: 4.5%;
    margin-right: auto;}

.content-area {
    display: flex;
    padding: var(--container-padding) 10.21438rem 12.4375rem 10.3125rem;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: var(--border-radius);
    background: var(--dark-background-color);
}

.content-wrapper {
    display: flex;
    gap: 6.25rem;
    flex-direction: row-reverse;
}

.top-side {
    display: flex;
    flex-direction: row-reverse;
}


.last-group {
    margin-top: 20px;
}

.top-links {
    display: inline-flex;
    gap: 2.44rem;
    margin-bottom: 4%;
}

.top-links a {
    color: var(--gray-color) !important;
    text-align: center;
    font-family: var(--font-family);
    font-size: var(--font-size-medium);
    font-weight: var(--font-weight-medium);
    line-height: normal;
}

.image-section {
    display: flex;
    width: 34.75rem;
    flex-direction: column;
    align-items: flex-start;
    gap: 3.5rem;
}

.main-text-container {
    width: 100%;
    height: clamp(3.5rem,30vw,16rem);
    overflow: hidden;
}

.login {
    height: auto;
}

.login span {
    color: var(--dark-background-color);
    font-family: var(--font-family);
    font-size: 2.25rem;
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-large);
    letter-spacing: var(--letter-spacing-tight);
}

.login-2 span {
    color: var(--gray-color);
    font-family: var(--font-family);
    font-size: var(--font-size-medium);
    font-weight: var(--font-weight-light);
    line-height: 100%; /* 1rem */
    letter-spacing: var(--letter-spacing-tight);
}

.notification {
    height: auto;
}

.notification-2 span {
    align-content: center;
    color: var(--gray-color);
    font-family: var(--font-family);
    font-size: var(--font-size-medium);
    font-weight: var(--font-weight-light);
    line-height: 100%; /* 1rem */
    letter-spacing: var(--letter-spacing-tight);
}

.notification span {
    color: var(--dark-background-color);
    font-family: var(--font-family);
    font-size: 2.25rem;
    font-weight: var(--font-weight-bold);
    line-height: 3.5rem;
    letter-spacing: var(--letter-spacing-tight);
}


.login-section {
    width: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start !important;
    gap: var(--spacing-xl);
    align-items: center;
}

.dx-texteditor-input {
    width: 100%;
    height: 50px;
    flex-shrink: 0;
}



.dx-checkbox-text {
    color: #252525;
    font-family: Manrope;
    font-size: clamp(0.7rem, 2vw, 0.865em);
    font-style: normal;
    font-weight: 700;
    line-height: 1.25rem; /* 142.857% */
    letter-spacing: -0.0175rem;
}

last-group {
    display: flex;
}

.dx-field-item-label-content span {
    color: #252525 !important;
    font-family: Manrope;
    font-size: 1rem;
    font-style: normal;
    font-weight: 500;
    line-height: 100%; /* 0.875rem */
    letter-spacing: -0.0175rem;
}

#main-text {
    color: var(--main-heading-color);
    font-family: var(--font-family);
    font-size: var(--font-size-heading);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-heading);
    letter-spacing: var(--letter-spacing-heading);
}

#login,
#login-btn,
#confirm,
#continue,
#continueKpi{
    display: flex;
    width: 100%; /* Assuming you want to keep the width as 100% */
    height: 100%; /* Assuming you want to keep the height as 100% */
    padding: var(--spacing-medium) var(--spacing-small);
    justify-content: center;
    align-items: center;
    gap: var(--spacing-medium);
    flex-shrink: 0;
    border-radius: var(--border-radius);
    background: var(--primary-button-color);
    font-family: var(--font-family);
    font-size: var(--font-size-medium);
    font-weight: var(--font-weight-bold);
    line-height: 1;
    letter-spacing: var(--letter-spacing-tight);
}
#login-btn{
    background-color: #252525 !important;
    color:white;
}

[id^="accept"],
#acceptKvkk,
#acceptBioKvkk,
#acceptUserAgreement {
    display: flex;
    width: 100%;
    height: 100%;
    padding: var(--spacing-medium) var(--spacing-small);
    justify-content: center;
    align-items: center;
    gap: var(--spacing-medium);
    flex-shrink: 0;
    color: #252525;
    border-radius: var(--border-radius);
    background: var(--primary-button-color);
    font-family: var(--font-family);
    font-size: var(--font-size-medium);
    font-weight: var(--font-weight-bold);
    line-height: 1;
    letter-spacing: var(--letter-spacing-tight);
    background-color: var(--primary-button-color);
}

#confirm {
    margin-top: 10px;
}

#registerButton {

    display: flex;
    margin-top: 10px;
    width: 100%; /* Assuming you want to keep the width as 100% */
    height: 100%; /* Assuming you want to keep the height as 100% */
    padding: var(--spacing-medium) var(--spacing-small);
    justify-content: center;
    align-items: center;
    gap: var(--spacing-medium);
    flex-shrink: 0;
    border-radius: var(--border-radius);
    background:#cdee52;
    font-family: var(--font-family);
    font-size: var(--font-size-medium);
    font-weight: var(--font-weight-bold);
    line-height: 1;
    letter-spacing: var(--letter-spacing-tight);
}

#login span,
#confirm span,
#register span,
#confirm span,
#continue span,
#continueKpi span,
#cancel span {
    text-transform: capitalize;
}
#continue span,
#continueKpi span{
    color: black !important;
}
#continueKpi .dx-field-item:not(.dx-field-item-has-group):not(.dx-field-item-has-tabs):not(.dx-first-row):not(.dx-label-v-align)
{
    padding-top: 5px !important;
}
#continue,
#continueKpi{
    margin-top: 10px;
}
#cancel,
#rejectKvkk,
#rejectBioKvkk {
    display: flex;
    width: 45%; /* Assuming you want to keep the width as 100% */
    height: 100%; /* Assuming you want to keep the height as 100% */
    padding: var(--spacing-medium) var(--spacing-small);
    justify-content: center;
    align-items: center;
    gap: var(--spacing-medium);
    flex-shrink: 0;
    border-radius: var(--border-radius);
    background: var(--secondary-button-color);
    font-family: var(--font-family);
    font-size: var(--font-size-medium);
    font-weight: var(--font-weight-bold);
    line-height: 1;
    letter-spacing: var(--letter-spacing-tight);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .50);
}

.popup-footer {
    display: flex;
    flex-direction: row;
}

.buttons-group,
.buttons-group-2{
    justify-content: flex-end !important; /* Optional: aligns the button to the end */
    width: 100% !important; /* Make sure the group takes full width */
    flex-direction: column;
}
.buttons-group{
    display: flex;
}
.buttons-group-2{
    display: none;
}


.buttons-group .dx-button ,
    .buttons-group-2 .dx-button {
    flex: 1 !important; /* Allow the button to grow and fill the space */
    min-width: 0 !important; /* Prevent overflow issues in flex items */
}


/* Make everything adjustable on shrink */
html {
    font-size: var(--font-size-responsive); /* This makes 1rem equal to 1% of viewport width */
}

@media (min-width: 1920px) {
    html {
        font-size: 16px; /* Cap the scaling at 1920px viewport width */
    }
}

.content-area,
.image-section,
.main-text-container,
.sub-text,
.button-container {
    max-width: 100%;
}
@media (max-width: 600px) {

    .content-area,
    .image-section,

    .button-container {
        max-width: 100%;
        text-align: left;
        display: flex;
        flex-direction: column;
        gap: clamp(0.3rem, 3vh, 1rem);
    }
    .main-text-container,
    .sub-text{

        max-width: 100%;
        display: flex;
        flex-direction: column;
        gap: clamp(0.3rem, 3vh, 1rem);
        text-align: center;
        line-height: var(--line-height-heading);
    }

}

.otp-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-medium, 0.625rem); /* Use a consistent gap */
}

.otp-content {
    display: flex;
    height: 4.625rem; /* Make height equal to width for square shape */
    justify-content: center;
    align-items: center;
    font-size: 1.5rem; /* Adjust font size as necessary */
    text-align: center; /* Center the text inside the block */
    gap: 0.3rem;
}

.otp-question {
    color: #252525;
    text-align: center;
    font-family: Manrope;
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: 120%; /* 1.2rem */
    align-self: stretch;
    margin-top:30px;
}

.block {
    display: flex;
    width: 4.625rem; /* Fixed width */
    height: 4.625rem; /* Make height equal to width for square shape */
    justify-content: center;
    align-items: center;
    font-size: 1.5rem; /* Adjust font size as necessary */
    text-align: center; /* Center the text inside the block */
    border-radius: var(--Spacing-8, 0.5rem);
    border: 1px solid var(--primary-button-color);
}

/* Optional: To style the input fields inside blocks */
.block input {
    width: 100%; /* Full width to fill the block */
    height: 100%; /* Full height to fill the block */
    border: none; /* Remove default border */
    text-align: center; /* Center the text */
    font-size: 1.5rem; /* Make the font size larger */
    outline: none; /* Remove focus outline */
    background: transparent; /* Make background transparent */
}


.content-area-register {
    display: flex;
    width: auto;
    height: auto;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: var(--Spacing-32, 2rem);
    background: white;
    background: linear-gradient(-135deg transparenti #fff 0);
}

.content-area-register img {
    width: clamp(18rem, 26vw, 40rem);
    height: clamp(23rem, 36vw, 40rem);
}


#activate-notifications {
    display: flex;
    height: 3.4375rem;
    padding: 1rem;
    justify-content: center;
    align-items: center;
    gap: 0.625rem;
    align-self: stretch;
    border-radius: var(--Spacing-8, 0.5rem);
    background: #CDEE52;
}

#pass-notifications {
    display: flex;
    height: 3.4375rem;
    padding: 1rem;
    justify-content: center;
    align-items: center;
    gap: 0.625rem;
    align-self: stretch;
    border-radius: var(--Spacing-8, 0.5rem);
    background: #252525;
}

.remember-forgot-group {
    display: flex;
    flex-direction: column;
}

/* Styling for the remember-forgot group */
.remember-forgot-group .forgot-pass {


}
.forgot-password{
    padding: 0px!important;
}
.remember-forgot-group .dx-item-content.dx-box-item-content.dx-box-flex.dx-box.dx-widget.dx-collection {
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
    flex-direction: row;

}

.forgot-pass {
    color: #252525 !important;
    font-family: Manrope;
    font-style: normal;
    font-weight: 500;
    line-height: 1.25rem; /* 111.111% */
    letter-spacing: -0.0225rem;
}

.dx-field-item-label.dx-field-item-label-location-top {
    padding-left: 0px;
    padding-bottom: 13px;
}

.remember-forgot-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.remember-forgot-wrapper .dx-checkbox {
    margin-right: 10px;
}

.remember-forgot-group .dx-button {
    padding: 0;
    border: none;
    background: none;
    color: var(--blue-color);
    text-decoration: underline;
    font-size: var(--font-size-medium);
}

.remember-forgot-wrapper .dx-button:hover {
    text-decoration: none;
    color: var(--primary-button-color);
}

.bottom-text {
    color: #949494 !important;
    font-size:clamp(0.85rem, 3.75vw, 1.25rem) !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: 130% !important;
    letter-spacing: -0.025rem !important;
}

#submitButton {
    display: flex;
    width: 25.625rem;
    height: 3.4375rem;
    padding: 1rem;
    justify-content: center;
    align-items: center;
    gap: 0.625rem;
    border-radius: var(--Spacing-8, 0.5rem);
    background: #CDEE52;
}

#submitButton span {
    color: #252525;
    font-family: Manrope;
    font-size: 1rem;
    font-style: normal;
    font-weight: bold;
    line-height: 100%; /* 1rem */
    text-transform: capitalize !important;
}

.notification-section {
    display: flex;
    flex-direction: column;
    align-items: center !important;
    gap: var(--spacing-xl);
    align-items: center;
}

.otp-container {

}

.otp-content {
    width: 100%;
    display: flex;
    justify-content: space-around;
}
.otp-content .input {
    display: flex;
    height: clamp(3rem, 14.5vw, 5rem);
    padding: 1rem;
    justify-content: center;
    align-items: center;
    gap: var(0.5rem);
    width: clamp(3rem, 14.5vw, 5rem);
    border: 2px solid #dad9df;
    outline: none;
    text-align: center;
    font-size: clamp(1em, 3vw, 1.5em);
    border-radius: 0.3em;
    background-color: #ffffff;
    outline: none;
    /*Hide number field arrows*/
    -moz-appearance: textfield
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.otp-section {

    display: flex;
    flex-direction: column;
    gap: 4rem;
}

#submit {
    margin: 1em auto 0 auto;
    cursor: pointer;
    display: flex;
    width: 29.0625rem;
    height: 4.0625rem;
    padding: 0.625rem var(0.5rem);
    justify-content: center;
    align-items: center;
    gap: 0.625rem;
    flex-shrink: 0;
    border-radius: var(0.5rem);
    text-align: center;
    font-family: Manrope;
    font-style: normal;
    font-weight: bold;
    line-height: 100%;
    background: #CDEE52;

}

#submit span {
    color: #252525;
    font-size: 1rem;
    text-transform: capitalize !important;
}

.show {
    display: block;
}

.hide {
    display: none;
}

.input:disabled {
    color: #89888b;
}

.input:focus {
    border: 3px solid #ccee52;
}

#main-text\ login {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    align-self: stretch;
}

.otp-bottom {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--Spacing-24, 1.5rem);
    align-self: stretch;
}

.confirmUserInfo-wrapper {
    color: #000;
    margin-top: 10px;
    font-family: Manrope;
    font-size: 1.5rem !important;
    font-style: normal;
    font-weight: 500;
    line-height: 100%;
    letter-spacing: initial !important;
    height: auto;
    text-align: center;
}


.ct-context,
.ct-title {
    color: rgba(37, 37, 37, 0.55);
    font-family: Manrope;
    font-size: 0.9375rem;
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 1.40625rem */
    align-self: stretch;
}

.pu-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--Spacing-32, 2rem);
    align-self: stretch;
}


#userForm .dx-texteditor-container {
    border-radius: var(--Spacing-8, 0.5rem);
    border: 1px solid #D9D9D9;

}

#userForm .dx-field-item-label-text {
    color: #252525;
    font-family: Manrope;
    font-size: 0.9375rem;
    font-style: normal;
    font-weight: 400;
    line-height: 120%; /* 1.125rem */
    align-self: stretch;
}

#userForm .dx-first-col.dx-last-col.dx-field-item.dx-col-0.dx-field-item-optional.dx-flex-layout.dx-label-v-align {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    align-self: stretch;
}
#userForm .dx-item.dx-box-item{
    flex-grow: 0 !important;
    width: 100%;
}

.pop-up-wrapper {
    display: flex;
    flex-direction: column;
    margin: 4rem;
}

.pop-up-image {
    width: 9.0625rem;
    height: 9.0625rem;
    padding-bottom: 2rem;
}

.in-title {
    color: #000;
    font-family: Manrope;
    font-size: 1.5rem;
    font-style: normal;
    font-weight: 500;
    line-height: 100%;
    padding-bottom: 2.5rem;
}

.dx-overlay-content.dx-popup-normal.dx-resizable {

}
.dx-texteditor-input {
    padding-inline-end: 0px !important;
}
.pop-up-footer {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    align-self: stretch;
    margin-top: 2rem !important;
}


.dx-overlay-content.dx-popup-normal.dx-resizable {

}

.popup-footer {
    gap: 1rem;
    align-items: center;
    justify-content: center;
    margin-top:2rem;
}

.dx-popup-content.dx-popup-content-scrollable{
}


.c-content-wrapper {
    width: 100%;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}
.c-container-index {
    display: block;
    width: 100%;
    position: relative;
    margin-top: 4%;
}
.c-pass-form {
    width: 100% !important;
}
.c-main-text-container.confirmUserInfo {
    margin-bottom: 10%;
}
.btn.btn-secondary {
    display: flex;
    width: clamp(5rem,100%,25.625rem);
    height: 3.375rem;
    padding: 0.625rem 0.5rem;
    justify-content: center;
    align-items: center;
    gap: 0.625rem;
    flex-shrink: 0;
    border-radius: 0.5rem;
    border:0px;
    background: #CDEE52;
    color: #252525;
    text-align: center;
    font-family: Manrope;
    font-size: 1rem;
    font-style: normal;
    font-weight: 700;
    line-height: 100%; /* 1rem */
    letter-spacing: -0.02rem;
}


@media(max-width:855px)
{
    form#registerForm
    {
        align-self: center !important;
    }
    .otp-content {
        width: 100%;
        display: flex;
        justify-content: center;
    }
    img-ad-1 {
        display: none;
    }
    .main-text-container, .sub-text{
        text-align: center;
    }
    #main-text\ login{
        align-items: center;
    }
    .responsive-cut{
        display: none;
    }
    .container-index {
        display: flex;
        flex-direction: column-reverse;
        margin-top: 40%;
        gap: 1.5rem;
    }

    .phone-lb-group .dx-box-flex.dx-box.dx-widget.dx-collection {
        flex-direction: row !important;
        gap: 8px;
    }
    .dx-box-flex.dx-box.dx-widget.dx-collection {
        flex-direction: column !important;
        height: auto !important;
    }
    .dx-first-row.dx-first-col.dx-last-row.dx-field-item.dx-col-0.dx-field-item-required.dx-flex-layout.dx-label-v-align {
        padding: 0px;
    }
    #phonePrefixBox input{
        width:50px;
    }
    .top-side {
        display: flex;
        flex-direction: row-reverse;
        align-items: center;
        justify-content: center;
    }

    .login span{
        font-size: var(--font-size-xlarge)
    }
    .sub-text span{
        font-size:var(--font-size-large)
    }
    .container-index{
        margin-top: 2.5rem !important;
    }
    .otp-content{
        gap: 0.2rem;
    }
    form#loginForm {
        width: 100%;
    }
    form#forgotPasswordForm {
        width: 100%;
    }
    .dx-texteditor-input-container input {
        width: 100%;
        height: auto;
        padding: 9px;
    }


    .content-section {
        display: none;
    }


    span.dx-button-text {
        display: block !important;
    }
}

.country-item {
    display: flex;
    width: 80px;
    height: 50px;
    padding: 16px;
    align-items: center;
    gap: 8px;
    font-size: 1.2em;
    border-radius: 8px;
    border: 1px solid #D9D9D9;
    background: white;
    border-radius: var(--Spacing-8, 0.5rem);
    border-color: #949494;

}

.country-flag {
    width: 25px;
    height: 25px;
}


.dx-item-content.dx-box-item-content {
    align-self: flex-end;
}
.dx-layout-manager .dx-field-item:not(.dx-first-col) {
    padding-inline-start: 0px !important;
}
.popup-footer {
    position: fixed !important;
    bottom: 23px !important;
    width: 89% !important;
    left: 5% !important;
    display: flex !important;
    justify-content: center !important;
}
.btn.btn-secondary.second{
    background-color: gray !important;
}
.list-item {
    display: flex;
    align-items: center;
    padding: 10px 0;
    cursor: pointer;
    gap: 1rem;
    width: 100%;
}

.item-icon-svg {
    width: var(--Spacing-32, 2rem);
    height: var(--Spacing-32, 2rem);
}

.item-content img{
    width: 23px !important;
    height: 23px !important;
}

.item-badge {
    color: rgba(37, 37, 37, 0.75);
    font-family: Manrope;
    font-size: 0.8125rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.25rem;
    /* 153.846% */
}

.help-expand img {
    width: 46px;
    height: 46px;
    margin-right: 10px;
}
.t-in-title {
    color: #000;
    font-family: Manrope;
    font-size: 1.5rem;
    font-style: normal;
    font-weight: 500;
    line-height: 100%;
}

form#registerForm {
    align-self: baseline;
}

@media (max-width: 600px)
{


    form#registerForm {
        align-self:center;
    }
    .otp-container
    {
        width: 100% !important;
    }
    .otp-section{
        width: 100% !important;
    }
    .otp-content input
    {
        padding:3px !important;
    }
    form#otpForm {
        justify-items: center !important;
    }
}
@media (max-width: 400px) {

    .dx-first-row.dx-first-col.dx-last-row.dx-field-item.dx-col-0.dx-field-item-required.dx-flex-layout.dx-label-v-align {
        width: 100px;
    }
}

.c-container-g-index{
    display: block;
    width: 100%;
    position: relative;
    padding-top: 2rem;
    margin-left: 4.5%;
    margin-right: auto;
    padding-right: 2rem;
}
.email span{
    color: #000;
    font-family: manrope;
    font-size: clamp(1rem, 7.5vw, 1.5rem);
    font-style: normal;
    font-weight: 500;
    line-height: 100%;
    align-self: stretch;
}
.email-subtext{
    color: rgba(0, 0, 0, 0.40) !important;
    font-family: Manrope !important;
    font-size: clamp(0.85rem, 3.75vw, 1rem) !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: normal !important;
}
@media (min-width: 799px)
{
    .email{
        align-items: flex-start !important;
    }
    .email span{
        text-align: left;
    }
    .otp-container-email{
        align-items: flex-start;
        justify-content: flex-start;
    }
    .otp-email-bottom{
        align-items:flex-start;
    }
}

div#loginFormDx {
    width: 100%;
    max-width: 25rem;
    align-self: center;
}

.force-css{
    width:clamp(19rem, 38vw, 30rem) !important;
}

.force-img-css img{
    width: clamp(18rem, 36vw, 46rem) !important;
    height: clamp(23rem, 36vw, 40rem) !important;
}
