@import url('../../Common/css/variable.css');
:root {
    /*--font-family-base: var(--font_regular);*/
    --font-family-base: 'Roboto';
    --font-roboto: "Roboto", sans-serif;
    --font-arial: "Arial", sans-serif;
    --font-courier: "Courier New", monospace;
    --font-georgia: "Georgia", serif;
    --font_regular: "Roboto", sans-serif; /*--font_w_4*/
    --font_medium: 'Roboto-Medium'; /*--font_w_5*/
    --font_bold: 'Roboto-Bold'; /*--font_w_6*/
}
.main-wrapper {
  display: flex;
  height: 100%;
  padding: var(--spacing-xl);
  flex-direction: row;
}

.right-form-container {
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-4xl);
    gap: var(--spacing-4xl);
    flex-direction: column;
    flex-flow: column-reverse;
}

.right-form {
  display: flex;
  align-items: center;
  width: 576px;
  height: 100%;
}
.verification-container, .all-set-container {
    display: flex;
    align-items: center;
    width: 600px;
    height: 100%;
    top: 23%;
}

.form-container {
    width: 100%;
    max-width: 100%;
    border-radius: var(--border-radius-md);
    padding: var(--spacing-4xl);
    gap: var(--spacing-lg);
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
}

.caption-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-lg);
    text-transform: uppercase;
    padding: var(--spacing-sm);
    text-align: center;
    font-size: 14px;
    background-color: transparent;
    width: 100%;
    /*color: var(--text-muted);*/
    border-radius: var(--border-radius-sm);
    text-decoration: none;
    letter-spacing: 1.25px;
    border: 1px solid var(--border-color);
    color: var(--on-surface-high-emphasis)
}
#h-continue-with-art, #registration-form h3 {
    color: var(--on-surface-high-emphasis)
}

.form-field,
.form-footer {
    width: 100%;
}

.form-footer {
    display: flex;
    gap: var(--spacing-xl);
    flex-direction: column;
}

.form-section {
    display: flex;
    gap: var(--spacing-xl);
    flex-direction: column;
}


@media (max-width: 768px) {
  body,
  html {
    overflow: auto;
  }

  .main-wrapper {
    flex-direction: column;
  }
/*
  .right-form-container {
    width: 100%;
    height: 50vh;
    order: 1;
  }*/
}

.f-pwd a {
    color: var(--text-link)
}

.footerTnC {
    font-weight: var(--font-weight-regular);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-sm);
    letter-spacing: var(--letter-spacing-none);
    text-align: center;
    vertical-align: middle;
    color: var( --text-quaternary);
    display: none
}
.footerTnC a {
    color: var( --text-quaternary);
}
.terms {
    position: absolute;
    bottom: 15px;
    color: var(--color-gray-600) !important;
}
.text-danger {
    font-size: 11px;
    line-height: 16px;
    top: 2px;
    position: relative;
}
.t-24 {
    top: 24px;
}
.top-23 {
    top: 23%;
    position: relative;
}
.w-regular {
    font-weight: var(--font-weight-regular);
}

[data-theme='dark'] .svg_img {
    filter: invert(100%);
}

@media only screen and (device-width: 991px), only screen and (max-width: 991px) {
    .left-carousel{
        display: none;
    }
    .right-form-container {
        width: 100%;
        padding: 32px 8px;
    }
    .right-form {
        width: 94%;
    }
    .form-container {
        padding: 32px 16px;
    }
    .caption-btn {
        font-size: 13px !important;
    }
    .verification-container {
        width: 94%;
    }
    .top-23{
        top: 10%;
    }
}
.fade.error.in {
    opacity: 1;
}
#modal-scrollable-common-alert-modal .modal-backdrop.fade.in {
    opacity: 0.3;
}