@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap");

* {
  margin: 0;
  padding: 0;
  font-size: 62.5%;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-family: Poppins, "sans-serif";
}
/* delete the standard eye-icon password for edge browser*/
input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear{
  display: none;
}

/* @ 27/05 applied the color red for all field that use auth-content-form-field class with error messages*/
.auth-content-form-field:has(.inputErrorMsgContainer:not([style*="display: none"])>.inputErrorMsg) input,
.auth-content-form-field:has(.inputErrorMsgContainer:not([style*="display: none"])>.inputErrorMsg) select {
  background-color: #E400461A;
}


.btn {
  cursor: pointer;
  font-size: 2.2rem;
  font-weight: 400;
  color: #fff;
  outline: none;
  border: none;
  padding: 1rem 2.5rem;
  border-radius: 5rem;
}
/* @update 15/05 */
.btn-primary {
  font-size: 1.8rem;
  background: #0A71B4;
}
/* @update 15/05 */
.btn-outline {
  font-size: 1.8rem;
  background: transparent;
  color: #03122B;
  border: 1px solid #03122B;
}
/* @update 15/05 */
.btn-hyperlink {
  cursor: pointer;
  background: transparent;
  outline: none;
  border: none;
  color: #0A71B4;
  font-size: 1.6rem;
  padding-left: 0;
}

.btn-margin-top {
  margin-top: 1rem;
}

.container-main {
  width: 100%;
  height: 100vh;
}


/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {
    opacity: 0.4;
  }

  to {
    opacity: 1;
  }
}

@keyframes fade {
  from {
    opacity: 0.4;
  }

  to {
    opacity: 1;
  }
}

.auth-container {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 3fr 2fr;
  grid-template-columns: 3fr 2fr;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  height: 100%;
}

.auth-image {
  height: 100%;
  background-image: -webkit-gradient(
      linear,
      left top,
      right top,
      from(rgba(3, 18, 43, 0.75)),
      to(rgba(3, 18, 43, 0))
    ),
    url("https://digitalhub.fifa.com/transform/81fd58d0-ca8a-411b-8bce-85c745d8b04c/FIFAPLS_SignIn_Hero_02");
  background-image: linear-gradient(
      90deg,
      rgba(3, 18, 43, 0.75) 0%,
      rgba(3, 18, 43, 0) 100%
    ),
    url("https://digitalhub.fifa.com/transform/81fd58d0-ca8a-411b-8bce-85c745d8b04c/FIFAPLS_SignIn_Hero_02");
  background-position: center;
  background-size: cover;
}

.auth-image-content {
  max-width: 56rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3rem;
}

.auth-image-content-container {
  height: 100%;
  padding: 6rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  color: #fff;
}

.auth-image-content h1 {
  font-size: 6rem;
  font-weight: 600;
  line-height: 5.5rem;
}

.auth-image-content p {
  font-size: 2.4rem;
  font-weight: 500;
  line-height: 3.6rem;
}
/* @update 15/05 */
.auth-content {
  height: 100%;
  overflow-y: auto;
  padding: 2rem 6rem;
  background:#FFFFFF;
  display: grid;
}

.auth-content-logo {
  display: none;
}
/* @update 15/05 */
.auth-content-form {
  color: #03122B;
  width: 100%;
  /* height: 100%; */
}

.auth-content-form-container {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  height: 100%;
  gap: 2rem;
}
/* @update 16/05 */
.auth-content-form-header {
  margin-top: 4rem;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  gap: 2rem;
  color: #03122B;
}

.auth-content-form-header-steps-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.auth-content-form-header-steps-container svg {
  display: none;
}

.auth-content-form-header-steps {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 1rem;
}
/* @update 16/05 */
.auth-content-form-header-steps .step {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  border: 1px solid #505B73;
}
/* @update 16/05 */
.auth-content-form-header-steps .step.active {
  background-color: #505B73;
}

.auth-content-form-cover {
  display: none;
  width: 100vw;
}
.auth-content-form-cover-sub {
  display: none;
  width: 100%;
}

.auth-content-form-header p,
.auth-content-form-header button {
  font-size: 2.2rem;
  text-decoration: none;
}

.auth-content-form-header p {
  white-space: nowrap;
}
/* @update 15/05 */
.auth-content-form-header button {
  color: #0A71B4;
}

.auth-content-form-header > img {
  display: none;
}

.auth-content-form-title h1 {
  font-size: 4.2rem;
  font-weight: 500;
  margin-bottom: 1rem;
}

.auth-content-form-title h2 {
  font-size: 2.4rem;
  font-weight: 500;
}

.auth-content-form-title-tab {
  display: none;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
}

.auth-content-form-field {
  position: relative;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
}

.auth-content-form-field-suggestion-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  scroll-snap-type: y mandatory;
  max-height: 29rem;
  overflow-y: auto;
  list-style: none;
  padding-right: 2rem;
  margin-top: 1rem;
}

.auth-content-form-field-suggestion {
  display: flex;
  align-items: center;
  scroll-snap-align: end;
  gap: 1rem;
  padding: 1rem 0rem;
  cursor: pointer;
}

.auth-content-form-field-suggestion-container::-webkit-scrollbar {
  width: 10px;
}

.auth-content-form-field-suggestion-container::-webkit-scrollbar-track {
  background-color: transparent;
}

.auth-content-form-field-suggestion-container::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.4);
  border-radius: 100vw;
}

.auth-content-form-field-suggestion div {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 2rem;
}

.auth-content-form-field-suggestion div img {
  /* background-color: #e4e8f0;
  padding: 0.5rem; */
  border-radius: 50%;
}
/* @update 24/05 */
.auth-content-form-field-suggestion div p {
  width: 100%;
  font-size: 1.4rem;
  color: #03122B;
}

.auth-content-form-field-suggestion label {
  display: flex;
  cursor: pointer;
  max-width: fit-content;
}

.auth-content-form-field-suggestion label svg {
  position: relative;
  top: auto;
}

.auth-content-form-field-suggestion input[type="checkbox"] {
  display: none;
}

.auth-content-form-field-suggestion
  input[type="checkbox"]:checked
  + label
  svg
  path {
  stroke: white;
}

/* Multi select styling */
/* div[data-fav*="selected"] > span {
  display: none;
} */

.auth-content-form-field-favorites__margin {
  margin: 0 !important;
}

.donot-suggest {
  display: none !important;
}

.show-flex {
  display: flex;
}

.auth-content-form-field select option {
  color: #000;
  font-size: 2rem;
}
/* @update 15/05 */
.auth-content-form-field label,
.auth-content-form-field a {
  text-decoration: none;
  font-size: 1.6rem;
  font-weight: 500;
  color: #03122B;
}
/* @update 15/05 */
.auth-content-form-field p {
  font-size: 1.4rem;
  font-weight: 400;
  color: #03122B;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  gap: 2rem;
}

.auth-content-form-field svg {
  position: absolute;
  right: 0;
  top: 3.5rem;
}
/* @update 15/05 */
.auth-content-form-field input {
  width: 100%;
  color: #03122B;
  border: none;
  outline: none;
  font-size: 1.4rem;
  padding: 1rem;
  background: transparent;
  border-bottom: 1px solid #A5ACBB;
}
/* @update 16/05 */
.auth-content-form-field-row input[type="checkbox"] {
  -webkit-appearance: none;
  width: 1.25rem;
  height: 1.25rem;
  border: 1px solid #03122B;
  border-radius: 5px;
  vertical-align: sub;
  transform: translateY(0%);
  left: 1rem;
  outline: none;
  cursor: pointer;
}
.auth-content-form-field-row input[type="checkbox"]:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 0px;
  height: 0px;
  transform: rotate(-45deg);
}
.auth-content-form-field-row input[type="checkbox"]:checked:after {
  left: 3px;
  top: 4px;
  height: 5px;
  width: 11px;
  border-left: 2px solid;
  border-bottom: 2px solid;
}

.auth-content-form-field .form-field-input-search {
  position: relative;
  color: #000;
  background: #fff;
  border-radius: 3rem;
  padding: 1rem;
  padding-left: 5rem;
  margin-top: 1rem;
}

.auth-content-form-field-search-input svg {
  position: absolute;
  left: 2rem;
  top: 2rem;
  z-index: 1;
}

.auth-content-form-field-search-input {
  width: 100%;
  position: relative;
}

.auth-content-form-field-search-input input {
  width: 100%;
}

.auth-content-form-field-search-chips {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin: 1.5rem 0;
}

.auth-content-form-field-search-chips > span {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1rem;
  background-color: #e4e8f0;
  color: #000;
  padding: 0.25rem 1rem;
  border-radius: 3rem;
  font-size: 1.2rem;
  cursor: pointer;
}

.auth-content-form-field-search-chips span b {
  font-size: 1.2rem;
}

.auth-content-form-field input::-webkit-calendar-picker-indicator {
  cursor: pointer;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="15" viewBox="0 0 24 24"><path fill="%23bbbbbb" d="M20 3h-1V1h-2v2H7V1H5v2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 18H4V8h16v13z"/></svg>');
}

.auth-content-form-field-row {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 1rem;
}

.auth-content-form-field-row span {
  width: 100%;
}

.auth-content-form-field-row input {
  width: auto;
  padding: 1rem;
  background: transparent;
  border: none;
  outline: none;
  width: 2.5rem;
  height: 2.5rem;
}
/* @update 16/05 */
.auth-content-form-field-row label,
.auth-content-form-field-row a {
  color: #03122B;
  font-size: 1.4rem;
  font-weight: 400;
}

.auth-content-form-field-row a {
  color: #00b8ff;
}

.auth-content-form-field-row label {
  width: 100%;
}

.auth-content-form-field-row label a {
  color: #fff;
}

.auth-content-form-field-row-text {
  font-size: 1.4rem;
  display: inline;
}

.auth-content-form-field-row-text a {
  text-decoration: underline;
}

.auth-content-form form {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  gap: 3rem;
  margin-top: 3rem;
}
/* @update 16/05 */
.auth-content-form form select {
  color: #03122B;
  cursor: pointer;
  width: 100%;
  border: none;
  outline: none;
  font-size: 1.4rem;
  padding: 1rem;
  background: transparent;
  border-bottom: 1px solid #A5ACBB;
}

.auth-content-form form select option {
  font-size: 1.4rem;
}

.inputErrorMsg {
  font-size: 1rem;
  font-weight: 500;
  color: #fff;
  padding: 0.5rem 0rem;
  padding-left: 3rem;
}
/* @update 26/05 logo error  */
.inputErrorMsgContainer {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 1rem;
    white-space: nowrap;
    width: 100%;
    background: #e40046;
    background-image: url(https://digitalhub.fifa.com/transform/51ca19e6-8987-4fa2-ac1e-d30cc69152bf/field-error-white?io=transform:fit,width:20,height:20);
    background-repeat: no-repeat;
    background-position: 1rem 0.35rem;
    padding: 0 1rem;
}



.auth-content-form-tab {
  display: none;
  width: 100%;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  gap: 1rem;
}

.auth-content-form-footer {
  width: 100%;
  margin-top: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 2rem;
}
/* @update 15/05 */
.auth-content-form-footer p,
.auth-content-form-footer a {
  font-size: 1.4rem;
  color: #03122B;
  text-decoration: none;
}

.auth-content-close {
  position: absolute;
  top: 0;
  right: 0;
  font-size: 1.8rem;
  color: #fff;
  text-decoration: none;
  cursor: pointer;
}
 /* update 26/05 */
.auth-forgot-popup {
  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    color-stop(20.2%, #03122b),
    color-stop(99.64%, #00287a)
  );
  background: linear-gradient(180deg, #FFFFFF 5.21%, #EEF2FB 73.96%);
  border-radius: 0.5rem;
  padding: 3rem;
  max-width: 80rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  gap: 2rem;
}
/* @update 26/05 */
.auth-forgot-popup-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: absolute;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  background: rgba( 3, 18, 43, 0.7);
}

.auth-forgot-popup-field {
  width: 100%;
}
/* @update 26/05 */
.auth-forgot-popup-field input {
  color: #fff;
  width: 100%;
  border: none;
  outline: none;
  font-size: 1.4rem;
  padding: 1rem;
  background: transparent;
  border-bottom: 1px solid #A5ACBB;
}
/* @update 26/05 */
.auth-forgot-popup h1,
.auth-forgot-popup p,
.auth-forgot-popup h4,
.auth-forgot-popup input {
  color: #03122B;
}

.auth-forgot-popup h1 {
  font-size: 3.6rem;
  font-weight: 500;
}

.auth-forgot-popup p {
  font-size: 1.8rem;
  font-weight: 500;
}
/* update 26/05 */
.auth-forgot-popup label {
  font-size: 1.4rem;
  font-weight: 500;
  color: #03122B;
;
}

.auth-forgot-popup-btn {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.auth-forgot-popup form {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  gap: 2rem;
}

.toggle-eye-with-subtitle {
  top: 5.75rem !important;
}

.verify-container {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr;
  grid-template-columns: 1fr;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  height: 100%;
}
/* @update 16/05 */
.verify-content {
  height: 100%;
  padding: 4rem 8rem;
  background: #FFFFFF;
}
/* 1@update 16/05 */
.verify-content-form {
  color: #03122B;
  width: 100%;
  text-align: center;
}

.verify-content-form-container {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  height: 100%;
  gap: 2rem;
}

.loading-content-form-container {
  justify-content: center;
}

.loading-content-form-container h1 {
  font-size: 2rem;
  font-weight: 400;
  color: white;
}

/* CSS Spinner  */
.lds-ring {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
}

.lds-ring div {
  box-sizing: border-box;
  display: block;
  position: absolute;
  width: 64px;
  height: 64px;
  margin: 8px;
  border: 8px solid #fff;
  border-radius: 50%;
  animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  border-color: #fff transparent transparent transparent;
}

.lds-ring div:nth-child(1) {
  animation-delay: -0.45s;
}

.lds-ring div:nth-child(2) {
  animation-delay: -0.3s;
}

.lds-ring div:nth-child(3) {
  animation-delay: -0.15s;
}

@keyframes lds-ring {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.verify-content-form-header {
  margin-top: 4rem;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 2rem;
  color: #fff;
}

.verify-content-form-header-steps {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 1rem;
}

.verify-content-form-header-steps div {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  border: 1px solid #fff;
}

.verify-content-form-header-steps div:first-child {
  background-color: #fff;
}

.verify-content-form-header p,
.verify-content-form-header a {
  font-size: 1.8rem;
  text-decoration: none;
}

.verify-content-form-header a {
  color: #00b8ff;
}

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

.verify-content-form-title h1 {
  font-size: 4.2rem;
  font-weight: 500;
  margin-bottom: 1rem;
}

.verify-content-form-title h2 {
  font-size: 2.4rem;
  font-weight: 400;
}

.verify-content-form-title p,
.verify-content-form-title a {
  font-size: 1.8rem;
  font-weight: 400;
}

.verify-content-form-title p a,
.verify-content-form-title a a {
  text-decoration: none;
  color: #00b8ff;
}

.verify-content-form-field {
  position: relative;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  gap: 0.5rem;
}

.verify-content-form-field select option {
  font-size: 2rem;
}

.verify-content-form-field h4,
.verify-content-form-field a {
  text-decoration: none;
  font-size: 1.6rem;
  font-weight: 500;
  color: #a5acbb;
}

.verify-content-form-field p {
  font-size: 1.2rem;
  font-weight: 400;
  color: #a5acbb;
}

.verify-content-form-field img {
  position: absolute;
  right: 0;
  bottom: 1rem;
}

.verify-content-form-field input {
  width: 100%;
  color: #fff;
  border: none;
  outline: none;
  font-size: 1.4rem;
  padding: 1rem;
  background: transparent;
  border-bottom: 1px solid #01b8ff;
}

.verify-content-form-field-row {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 2rem;
}

.verify-content-form-field-row input {
  width: auto;
  padding: 1rem;
  background: transparent;
  border: none;
  outline: none;
  width: 2.5rem;
  height: 2.5rem;
}

.verify-content-form-field-row h4,
.verify-content-form-field-row a {
  color: #fff;
  font-size: 1.6rem;
  font-weight: 400;
}

.verify-content-form-field-row a {
  color: #00b8ff;
}

.verify-content-form-field-row h4 {
  width: 100%;
}

.verify-content-form form {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 4rem;
  margin-top: 5rem;
}

.verify-content-form form select {
  color: #fff;
  cursor: pointer;
  width: 100%;
  border: none;
  outline: none;
  font-size: 1.4rem;
  padding: 1rem;
  background: transparent;
  border-bottom: 1px solid #01b8ff;
}

.verify-content-form form select option {
  font-size: 1.4rem;
}

.verify-content-form form button {
  cursor: pointer;
  font-size: 1.6rem;
  font-weight: 400;
  color: #fff;
  outline: none;
  border: none;
  padding: 1rem 2.5rem;
  background: linear-gradient(111.98deg, #00b8ff 18.07%, #1574c4 90.31%);
  border-radius: 5rem;
}

.verify-content-form-footer {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 2rem;
}
/* @update 16/05 */
.verify-content-form-footer p,
.verify-content-form-footer a {
  font-size: 1.4rem;
  color: #03122B;
  text-decoration: none;
}

.verify-content-close {
  position: absolute;
  top: 0;
  right: 0;
  font-size: 1.8rem;
  color: #fff;
  text-decoration: none;
  cursor: pointer;
}

/* General large devices  */
/* @media screen and (min-width: 768px) and (max-width: 1023px) { */
/* Eliminated the min-width media screen requirement for implements devices with screen sizes from 1023px and below. (Allign bottom Image)*/
@media screen and (max-width: 1023px) {
  .container-main {
    /* min-height: 100vh; */
    height: auto;
  }

  .auth-container {
    display: flex;
    flex-direction: column-reverse;
    align-items: initial;
    min-height: 100vh;
  }

  .auth-image .filler {
    display: none;
  }

  .auth-image-content {
    width: 40vw;
  }

  .auth-image-content h1 {
    font-size: 3.6rem;
  }

  .auth-image-content p {
    font-size: 1.6rem;
  }

  .auth-image {
    background-repeat: no-repeat;
    height: auto;
  }

  .auth-image-content-container {
    min-height: 35vh;
    justify-content: center;
  }

  .auth-image-content-container:first-child svg {
    display: none;
  }

  /* @Update 27/05 */
  .auth-content {
    padding: 4rem;
    /* display: flex;
    flex-grow: 1; */
  }

  .auth-content-logo {
    display: block;
    width: 25%;
    margin-top: 4rem;
  }

  .auth-content-form-top {
    margin-top: 3.5rem;
  }

  .auth-content-form-header {
    gap: 2rem;
    margin-top: 3.5rem;
  }

  .auth-content-form-header-login {
    display: none;
  }

  .auth-content-form-header p,
  .auth-content-form-header p button div,
  .auth-content-form-header p span {
    font-size: 1.4rem;
  }

  .auth-content-form-header h1 {
    font-size: 1.4rem;
  }

  /* @Update 27/05 */
  .auth-content-form-container {
    gap: 4rem;
    width: 100%; /* 60% */
  }

  .auth-btn-submit button * {
    font-size: 1.4rem;
  }

  .auth-content-form-title h1,
  .auth-content-form-title a {
    font-size: 2.4rem;
  }

  .auth-content-form-title h2 {
    font-size: 1.6rem;
  }

  .auth-content-form-field-acc {
    text-align: center;
  }

  .auth-content-form form button {
    width: 100%;
    font-size: 1.4rem;
    padding: 1rem 1.5rem;
  }

  .auth-content-form-footer {
    justify-content: center;
  }

  .verify-content {
    height: 100vh;
  }

  .container-main-campaign .auth-image {
    display: none;
  }
  .container-main-campaign .auth-content-form-cover-sub {
    display: block;
  }
}

/* Ipad Air and mini  */
@media screen and (min-width: 800px) and (max-width: 1023px) {
  .verify-content {
    height: 100vh;
  }
}

/* Surface pro 7 */
@media screen and (width: 912px) and (height: 1368px) {
  .verify-content {
    height: 100vh;
  }
}

/* Iphone SE @update 15/05 */
@media screen and (max-width: 375px) {
  .auth-content-form-field label,
  .auth-content-form-field a {
    color: #03122B;
  }
}

/* Surface Duo  */
/* @media screen and (width: 540px) and (height: 720px) {
  .auth-content-form-cover {
    height: 35vh;
  }
} */

/* Normal Mobiles */
@media screen and (max-width: 767px) and (min-width: 376px) {
  .auth-container {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
}

  /* Toggle visible image for 375px max-width */
  /* .auth-image {
    display: none;
  } */

  .auth-content {
    padding: 0rem;
  }

  .auth-content-form-cover {
    display: block;
  }

  .auth-content-form-header {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding: 0 2rem;
  }

  /* @Update 27/05 */
  .auth-content-logo {
    padding: 0 2rem;
  }

  .auth-content-form {
    padding: 0 2rem;
  }

  .auth-content-form-field-suggestion div p {
    font-size: 1.4rem;
  }

  .auth-content-form-field .form-field-input-search {
    font-size: 1.2rem;
  }

  .auth-content-form-header > img {
    display: block;
  }

  .auth-content-form-field svg {
    top: 3.25rem;
  }

  .auth-content-form-field-acc {
    text-align: center;
  }

  .auth-content-form-field-search-input svg {
    top: 2rem;
  }

  .auth-content-form-header p,
  .auth-content-form-header a,
  .auth-content-form-header span,
  .auth-content-form-header button,
  .auth-content-form-header button div {
    font-size: 1.4rem;
  }

  .auth-content-form-header-steps-container {
    margin-bottom: 2rem;
  }

  .auth-content-form-header-steps-container svg {
    display: block;
  }

  .toggle-eye-with-subtitle {
    top: 4.75rem !important;
  }

  .auth-content-form-title h1 {
    margin-bottom: 1rem;
    font-size: 2.4rem;
  }

  .auth-content-form-title h2 {
    font-size: 2rem;
  }

  .auth-content-form-field label {
    font-size: 1.2rem;
  }

  .auth-content-form-field label a {
    font-size: 1.2rem;
  }

  .auth-content-form-field p {
    font-size: 1rem;
  }

  .auth-content-form-field-row-text,
  .auth-content-form-field-row a {
    font-size: 1.2rem;
  }

  .auth-content-form form select {
    font-size: 1.2rem;
  }

  .auth-content-form form select option {
    font-size: 1rem;
  }

  .auth-btn-submit {
    width: 100%;
  }

  .auth-content-form form button {
    width: 100%;
    font-size: 1.2rem;
    padding: 1rem 1.5rem;
  }

  .auth-btn-submit button * {
    font-size: 1.4rem;
  }

  .auth-content-form-footer {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin-bottom: 2rem;
  }

  .auth-content-form-footer p,
  .auth-content-form-footer a {
    font-size: 1.2rem;
  }

  .auth-content-form-title h1,
  .auth-content-form-title a {
    font-size: 2.4rem;
  }

  .auth-content-form-title h2 {
    font-size: 2rem;
  }

  .verify-content {
    padding: 4rem;
  }

  .verify-content-form-title h2 {
    font-size: 1.8rem;
  }
}

/* Galaxy Fold */
@media screen and (max-width: 280px) {
  .inputErrorMsg {
    max-width: 70vw;
    margin-left: 3rem;
    padding-left: 0;
    overflow-x: auto;
  }
  .auth-content-form-container {
    width: 100vw;
  }
}

/* Nest hub */
@media screen and (width: 1024px) and (height: 600px) {
  .auth-container {
    grid-template-columns: 1fr 1fr;
  }
  .auth-image-content h1 {
    font-size: 4rem;
  }
  .auth-image-content p {
    font-size: 2rem;
  }
}

/* To Support Arabic language right align */
h2,
p,
label,
select {
  display: block !important;
  width: 100%;
}
.auth-btn-container {
  width: 100%;
}
.auth-content-form-footer {
  width: 100%;
}
.auth-content-form-footer a,
.auth-content-form-footer p,
.verify-content-form-footer a,
.verify-content-form-footer p {
  width: auto;
}
.ar h1,
.ar h2,
.ar p,
.ar label,
.ar select,
.ar option,
.ar a,
.ar button,
.ar input,
.ar .inputErrorMsgContainer,
.ar .auth-content-form-footer {
  direction: rtl;
}
.ar .auth-btn-container button {
  float: right;
}

.ar .auth-content-form-field svg {
  left: 2rem;
}

[id^="ot-"], 
[id^="onetrust-"], 
[id^="onetrust-"] *, 
[id^="ot-"] * {
    font-size: 100%;
}

@media screen and (max-width: 766px) and (min-width: 376px ) {
  #ARTWORK2 {
	  display: none;
  }
}

.auth-reload-popup-btn {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: flex-end;
}
 
 
.auth-reload-popup-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  background: rgba( 3, 18, 43, 0.7);
}
 
.auth-reload-popup h1 {
  font-size: 3.6rem;
  font-weight: 500;
}
 
.auth-reload-popup p {
  font-size: 1.8rem;
  font-weight: 500;
}
/* update 26/05 */
.auth-reload-popup label {
  font-size: 1.4rem;
  font-weight: 500;
  color: #03122B;
}
 
.auth-reload-popup h1,
.auth-reload-popup p,
.auth-reload-popup h4,
.auth-reload-popup input {
  color: #03122B;
}
 
.auth-reload-popup form {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  gap: 2rem;
}
 
.auth-reload-popup {
  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    color-stop(20.2%, #03122b),
    color-stop(99.64%, #00287a)
  );
  background: linear-gradient(180deg, #FFFFFF 5.21%, #EEF2FB 73.96%);
  border-radius: 0.5rem;
  padding: 3rem;
  max-width: 80rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  gap: 2rem;
}