/*html {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  background-color: white;
}

h2 {
  margin: 0;
  font-size: 22px;
}

body {
  font-family: 'Avenir', sans-serif;
  width: 100%;
  background-color: white !important;
}

.container {
  display: flex;
  flex-direction: row;
  gap: 120px;
  justify-content: center;
}

.media-image img {
  max-width: 477px;
  width: 100%;
}

.login-portal {
  display: flex;
  flex-direction: column;
}

.login-portal h2 {
  margin-bottom: 36px;
}

.logo-image {
  align-self: center;
}

.logo-image img {
  max-width: 354px;
  width: 100%;
}

.login {
  display: flex;
  flex-direction: row;
  width: 100%;
  gap: 35px;
}

.btn {
     height: 83px;
     width: 100%;
     display: flex;
     justify-content: center;
     align-items: center;
     box-shadow: 0px 1px 9px rgba(108, 108, 108, 0.25);
     border-radius: 20px;
     cursor: pointer;
}

.btn img {
  height: 36px;
}

.cc {
  position: fixed;
  bottom: 30px;
  left: 30px;
}

.cc p {
  margin: 0;
  color: #818181;
  font-weight: 500;
}

.dd {
  position: fixed;
  bottom: 30px;
  right: 30px;
}

.dd p {
  margin: 0;
  color: #818181;
  font-weight: 500;
}

.dd p:hover {
  color: #0071BC; 
  cursor: pointer;
  font-weight: 800;
}

.row {
  width: 1200px;
  display: flex;
}*/

/* Create two equal columns that sits next to each other */
/*.column1 {
  flex: 40%;
  padding: 10px;
}

.column2 {
  flex: 60%;
  padding: 10px;
}

.card {
  display: flex;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transform-origin: center right;
  transition: transform 1s;
}

.card-sso-login {
    border: 0px hidden #fff;
}

.card.is-flipped {
  transform: translateX(-100%) rotateY(-180deg);
}

.card-logo {
  flex: 1;
  width: 400px;
  height: 500px;
  background-color: black;
}

.card-login-form {
  width: 600px;
  height: 500px;
  background-color: #0dcaf0;
}

.card-face {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

.card-face--front {
}

.card-face--back {
  transform: rotateY(180deg);
}

.form-container {
    padding: 2rem 0rem;
}

.form-title {
    margin: -2rem 0rem 2rem;
}

.btn-round {
    border-radius: 3rem;
}

.delimiter {
    padding: 1rem;
}

.div-error-message {
    text-align: left;
    font-weight: 800;
    padding-top: 10px;
}

.error {
    height: 50px;
    line-height: 50px;
    text-align: center;
    background-color: firebrick;
    color: antiquewhite;
    font-weight: 800;
    font-size: 1rem;
}

.img-loading-hide {
    display: none;
}

.img-loading-show {
    display: block;
}

.login-submit-hide {
    display: none;
}

.login-submit-show {
    display: block;
}

.otp-input {
    height: 80px;
    font-size: 1.5rem;
}

.password-input {
    height: 70px;
}

.ref-code-input {
    border: 0px;
    height: 80px;
    font-size: 1.5rem;
}

.signup-section {
    padding: 0.3rem 0rem;
}

.user-input {
    height: 70px;
    font-size: 1rem;
}


.h2-client-login {
    text-align: center;
}

@media screen and (max-width: 1180px) {
  html {
    align-items: flex-start;
    height: calc(100vh - 90px);
    margin-top: 90px;
  }

  body {
    padding-bottom: 160px;
  }

  .container {
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  
  .media-image {
    display: flex;
    justify-content: center;
  }

  .media-image img {
    max-width: 423px;
  }

  .login {
    gap: 29px;
    width: unset;
  }

  .logo-image img {
    max-width: 368px;
    padding: 58px 0 30px;
  }

  .login-group {
    padding: 0 90px;
  }

  .btn {
    height: 75px;
    width: 100%;
  }
}

@media screen and (max-width: 640px) {
  .login-group {
    padding: 0 40px;
  }
}


@media screen and (max-width: 500px) {
  html {
    align-items: flex-start;
    height: calc(100vh - 83px);
    margin-top: 83px;
  }

  .media-image img {
    max-width: 287px;
  }

  .logo-image img {
    max-width: 269px;
    padding: 28px 0;
  }

  h2 {
    font-size: 18px;
  }

  .login-portal h2 {
    margin-bottom: 28px;
  }

  .login {
    gap: 12px;
  }

  .btn {
    height: 50px;
    width: 100%;
  }

  .btn img {
    height: 20px;
  }
 }

 @media screen and (max-width: 500px) and (max-height: 500px) {
  html {
    align-items: flex-start;
    height: calc(100vh - 50px);
    margin-top: 50px;
  }

  .media-image img {
    max-width: 200px;
  }

  .logo-image img {
    max-width: 230px;
    padding: 0;
  }

  h2 {
    font-size: 14px;
  }

  .login-portal h2 {
    margin-bottom: 16px;
  }

  .btn {
    height: 44px;
    width: 100%;
  }

  .cc {
    bottom: 10px;
    left: 10px;
  }

  .cc p {
   font-size: 10px;
  }
}*/


html {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    background-color: white;
}

h2 {
    margin: 0;
    font-size: 22px;
}

body {
    font-family: 'Avenir', sans-serif;
    width: 100%;
    background-color: white !important;
}

.container {
    display: flex;
    flex-direction: row; /* gap: 120px; */
    justify-content: center;
}

.media-image img {
    max-width: 477px;
    width: 100%;
}

.login-portal {
    display: flex;
    flex-direction: column;
}

    .login-portal h2 {
        margin-bottom: 36px;
    }

.logo-image {
    align-self: center;
}

    .logo-image img {
        max-width: 354px;
        width: 100%;
    }

.login {
    display: flex;
    flex-direction: row;
    width: 100%;
    gap: 35px;
}

.btn {
    height: 83px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0px 1px 9px rgba(108, 108, 108, 0.25);
    border-radius: 20px;
    cursor: pointer;
}

    .btn img {
        height: 36px;
    }

.cc {
    z-index: 2;
}

.bottom-left {
    left: 30px;
    position: fixed;
    bottom: 30px;
}

.bottom-right {
    right: 30px;
    position: fixed;
    bottom: 30px;
}

.cc p {
    margin: 0;
    color: #818181;
    font-weight: 500;
}

.dd {
    position: fixed;
    bottom: 30px;
    right: 30px;
}

    .dd p {
        margin: 0;
        color: #818181;
        font-weight: 500;
    }

        .dd p:hover {
            color: #0071BC;
            cursor: pointer;
            font-weight: 800;
        }

.row {
    width: 100%; /* max-height: 100vh; */
    height: fit-content;
    display: grid;
    grid-template-rows: 1fr;
    grid-template-columns: 1fr 1fr;
}

@media screen and (max-width: 500px) {
    .row {
        grid-template-rows: 1fr 1fr;
        grid-template-columns: 1fr;
    }

    .media-image {
        width: 50%;
        align-self: center;
        justify-self: center;
    }
}

@media screen and (max-width: 1180px) and (min-height: 800px) {
    html {
        margin-top: 2rem !important;
    }

    .row {
        grid-template-rows: 1fr 1fr;
        grid-template-columns: 1fr;
    }

    .media-image {
        width: 100%;
        align-self: center;
        justify-self: center;
        padding-bottom: 2rem;
    }
}

@media screen and (max-width: 500px) and (min-height: 700px) {
    .row {
        grid-template-rows: 1fr 1fr !important;
        grid-template-columns: 1fr;
    }

    .media-image {
        width: 100%;
        align-self: center;
        justify-self: center;
        padding-bottom: 2rem;
    }
}
/* Create two equal columns that sits next to each other */

.column1 {
    flex: 40%;
    padding: 10px;
    height: fit-content;
}

.column2 {
    flex: 60%; /* padding: 10px; */
    height: fit-content;
}

.card {
    display: flex;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transform-origin: center right;
    transition: transform 1s;
}

.card-sso-login {
    border: 0px hidden #fff;
}

.card.is-flipped {
    transform: translateX(-100%) rotateY(-180deg);
}

.card-logo {
    flex: 1;
    width: 400px;
    height: 500px;
    background-color: black;
}

.card-login-form {
    width: 600px;
    height: 500px;
    background-color: #0dcaf0;
}

.card-face {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
}

.card-face--front {
}

.card-face--back {
    transform: rotateY(180deg);
}

.form-container {
    padding: 2rem 0rem;
}

.form-title {
    margin: -2rem 0rem 2rem;
}

.btn-round {
    border-radius: 3rem;
}

.delimiter {
    padding: 1rem;
}

.div-error-message {
    text-align: left;
    font-weight: 800;
    padding-top: 10px;
}

.error {
    height: 50px;
    line-height: 50px;
    text-align: center;
    background-color: firebrick;
    color: antiquewhite;
    font-weight: 800;
    font-size: 1rem;
}

.img-loading-hide {
    display: none;
}

.img-loading-show {
    display: block;
}

.login-submit-hide {
    display: none;
}

.login-submit-show {
    display: block;
}

.otp-input {
    height: 80px;
    font-size: 1.5rem;
}

.password-input {
    height: 70px;
}

.ref-code-input {
    border: 0px;
    height: 80px;
    font-size: 1.5rem;
}

.signup-section {
    padding: 0.3rem 0rem;
}

.user-input {
    height: 70px;
    font-size: 1rem;
}

.h2-client-login {
    text-align: center;
}

@media screen and (max-width: 500px) and (max-height: 500px) {
    .column1 {
        display: none !important;
    }
}

@media screen and (min-width: 500px) and (min-height: 500px) {
    .column1 {
        display: block !important;
    }
}

@media screen and (max-width: 1180px) {
    html {
        align-items: flex-start;
        height: calc(100vh - 90px);
        margin-top: 90px;
    }

    body { /* padding-bottom: 160px; */
    }

    .container {
        display: flex; /* flex-direction: column; */
        gap: 0; /* margin-top: 2rem; */
    }

    .media-image {
        display: flex;
        justify-content: center;
    }

        .media-image img {
            max-width: 423px;
        }

    .login {
        gap: 29px;
        width: unset;
    }

    .logo-image img {
        max-width: 368px; /* padding: 58px 0 30px; */
    }

    .login-group { /* padding: 0 90px; */
    }

    .btn {
        height: 75px;
        width: 100%;
    }
}

@media screen and (max-width: 640px) {
    .login-group {
        padding: 0 40px;
    }
}

@media screen and (max-width: 500px) {
    html {
        align-items: flex-start;
        height: calc(100vh - 83px);
        margin-top: 1rem;
    }

    .media-image img {
        max-width: 287px;
    }

    .logo-image img {
        max-width: 269px; /* padding: 28px 0; */
    }

    h2 {
        font-size: 18px;
    }

    .login-portal h2 {
        margin-bottom: 28px;
    }

    @media screen and (max-height: 500px) {
        .login-portal h2 {
            margin-bottom: .5rem;
        }
    }

    .login {
        gap: 12px;
    }

    .btn {
        height: 50px;
        width: 100%;
    }

        .btn img {
            height: 20px;
        }
}

@media screen and (max-width: 500px) and (max-height: 450px) {
    html {
        align-items: flex-start;
        height: calc(100vh - 50px);
        margin-top: 50px;
    }

    .media-image img {
        max-width: 200px;
    }

    .logo-image img {
        max-width: 230px;
        padding: 0;
    }

    h2 {
        font-size: 14px;
    }

    .login-portal h2 {
        margin-bottom: 16px;
    }

    .btn {
        height: 44px;
        width: 100%;
    }

    .cc {
        z-index: 2;
    }

    .bottom-left {
        position: fixed;
        bottom: 10px;
        left: 10px;
    }

    .bottom-right {
        position: fixed;
        bottom: 10px;
        right: 10px
    }

    .cc p {
        font-size: 10px;
    }
}

@media screen and (max-height: 500px) {
    html {
        margin-top: 1rem;
    }
}

.cursor-pointer {
    cursor: pointer;
}