/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/Inter-400-latinext.woff2') format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/Inter-500-latin.woff2') format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/Inter-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}

/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/Poppins-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/Poppins-600-latinext.woff2') format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

[class*=" uds-flag-"],[class^=uds-flag-] {
  font-family: uds-flags;
  speak: never;
  font-style: normal;
  font-weight: 400;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale
}

* {
  color: #262626;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system,
    BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans',
    sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
    'Noto Color Emoji';
  font-size: 16px;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
}


h1, h2, h3, h4, h5 {
    letter-spacing: 0px!important;
}

#client_fullname {
  text-transform: uppercase;
}

.error_text {
  text-align: center;
  display: block;
  width: 100%;
  font-size: 15px;
  color: rgb(247 22 22);
}

.info-alert {
  display: flex;
  align-items: center;
  padding: 10px;
  border-radius: 5px;
  background-color: #cee8f7;
}

.danger-alert {
  display: flex;
  align-items: center;
  padding: 10px;
  border-radius: 5px;
  background-color: #f7cece;
}

.success-alert {
  display: flex;
  align-items: center;
  padding: 10px;
  border-radius: 5px;
  background-color: rgba(40, 199, 111, 0.12);
}

.alert-text {
  font-size: 14px;
  line-height: normal;
  color: #353535;
  margin-left: 10px;
}

.color-info {
  color: #1a98d2;
}

.color-red {
  color: #f56b6b!important;
}

.color-green {
  color: #47bd57!important;
}

.color-error {
  color: rgb(230, 131, 131);
}

.avatar-card {
  background-color: #e7e7e7;
  border-radius: 50%;
  padding: 25px;
}

.select-card {
  border: 1px solid rgb(216, 216, 216);
  border-radius: 5px;
  padding: 3px 10px;
}

.flex-center {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.flex-between {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.start-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
  }
  
.btn-start {
    width: 100%;
    max-width: 445px;
    height: 48px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    box-sizing: border-box;
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 165%;
    color: white;
    background: #262626;
    border-radius: 8px;
    text-decoration: none;
    border: none;
  }

  .btn-load {
    display: flex;
    justify-content: center;
    border: 1px solid #e3e3e3;
    background-color: #e3e3e3;
    color: #b5b5b5;
    letter-spacing: 0.5px;
    border-radius: 12px;
    font-size: 15px!important;
    font-weight: 300!important;
    padding: 10px;
    width: 100%;
  }

  .btn-confirm {
    display: flex;
    justify-content: center;
    color: #222222;
    background-color: #ffe007;
    border: 1px solid #ebd005;
    letter-spacing: 0.5px;
    border-radius: 12px;
    font-size: 15px!important;
    font-weight: 300!important;
    padding: 10px;
    width: 100%;
  }

  .btn-confirm:disabled {
    border: none;
    background-color: #e3e3e3;
    color: #8d8d8d;
  }

  .confirm-active {
    background-color: #4d8fe8!important;
  }
  
  select,
  input[type=text],
  input[type=number] {
    background: none;
    border-bottom: 1px solid rgb(206, 206, 206);
    color: #2e2e2e;
    font-size: 16px;
  }

  select:focus,
  input:focus {
    outline: none;
    border-bottom: 2px solid #fee101;
  }

  input::placeholder, select::placeholder, textarea, select {
    font-size: 16px;
    color: #c4c4c4;
  }
  
  input[name=login] {
    width: 100%;
  }
  input[name=day] {
    width: 25%;
  }
  select[name=mouth] {
    width: 70%;
  }

  .title-input {
    margin-top: 70px;
    margin-bottom: 100px;
  }

  /* ====== Modal Style ======= */

  .modal-content {
    display: flex;
    flex-direction: column;
    background-color: #fff;
    border-radius: 10px;
    padding: 20px;
  }

  .modal-content-header {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .modal-confirm-text {
    color: #21416c;
    margin-bottom: 10px;
    font-weight: 700;
    font-size: 18px;
    text-align: center;
  }

  .modal-input {
    width: 100%;
    height: 48px;
    background: #fff;
    border-bottom: 0px;
    border: 1px solid #A3B5C9!important;
    border-radius: 5px;
    padding: 0 20px!important;
    font-size: 15px;
    /* border-bottom: none; */
  }

  .modal-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: "Source Sans Pro", sans-serif;
    font-weight: 500;
    font-size: 18px;
    padding: 0px 20px;
    width: 100%;
    height: 45px;
    color: #fff;
    border-radius: 10px;
    background: #1a67d2;
  }

  .modal-btn:hover {
    color: #fff!important;
  }

  .forgot_login {
    display: flex;
    justify-content: center;
    color: #bbb;
    margin: 15px;
  }

  .forgot_login:hover {
    color: #bbb!important;
  }

  .forgot_login_gif {
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
  }

  .btn_close_modal {
    width: 100%;
    text-align: center;
    padding: 10px;
    background-color: #3461ae;
    color: #fff;
    font-size: 18px;
  }

  .btn_close_modal:hover {
    color: #fff!important;
  }

  h4[data="_timer"] {
    color: #21416c;
    font-size: 50px;
  }

  #sms-code input::placeholder {
    color: #1c1c1e!important;
  }

  .m-footer-text {
    text-align: center;
    font-weight: 600;
    font-size: 17px;
  }

  .custom-loader {
    width: 30px;
    height: 30px;
    border-radius:50%;
    display: inline-flex;
    background: conic-gradient(#ffffff29 10%,#ffffff);
    -webkit-mask:radial-gradient(farthest-side,#0000 calc(100% - 3px),#000 0);
    animation:s3 1s infinite linear;
  }
  @keyframes s3 {to{transform: rotate(1turn)}}

  .custom-spinner {
    display: flex;
    width: 25px;
    aspect-ratio: 1;
    border-radius: 50%;
    border: 2px solid;
    animation:
      s10-1 0.8s infinite linear alternate,
      s10-2 1.6s infinite linear;
  }
  @keyframes s10-1{
     0%    {clip-path: polygon(50% 50%,0       0,  50%   0%,  50%    0%, 50%    0%, 50%    0%, 50%    0% )}
     12.5% {clip-path: polygon(50% 50%,0       0,  50%   0%,  100%   0%, 100%   0%, 100%   0%, 100%   0% )}
     25%   {clip-path: polygon(50% 50%,0       0,  50%   0%,  100%   0%, 100% 100%, 100% 100%, 100% 100% )}
     50%   {clip-path: polygon(50% 50%,0       0,  50%   0%,  100%   0%, 100% 100%, 50%  100%, 0%   100% )}
     62.5% {clip-path: polygon(50% 50%,100%    0, 100%   0%,  100%   0%, 100% 100%, 50%  100%, 0%   100% )}
     75%   {clip-path: polygon(50% 50%,100% 100%, 100% 100%,  100% 100%, 100% 100%, 50%  100%, 0%   100% )}
     100%  {clip-path: polygon(50% 50%,50%  100%,  50% 100%,   50% 100%,  50% 100%, 50%  100%, 0%   100% )}
  }
  @keyframes s10-2{ 
    0%    {transform:scaleY(1)  rotate(0deg)}
    49.99%{transform:scaleY(1)  rotate(135deg)}
    50%   {transform:scaleY(-1) rotate(0deg)}
    100%  {transform:scaleY(-1) rotate(-135deg)}
  }
  

 /* PIN CODE */

 #restartbtn {
  text-align: center;
  color: #fff;
  cursor: pointer;
  margin: 20px;
}
.table {
  display: table;
  height: 100%;
  width: 100%;
  position: relative;
}

.cell {
  display: table-cell;
  vertical-align: middle;
  position: relative;
  width: 100%;
  text-align: center;
}


/*------
# Pincode
----*/

#pincode {
  display: block;
  height: 100%;
  width: 100%;
  background-size: cover;
  background-position: center;
  color: #fff;
  text-align: center;
}

#numbers {
  max-width: 300px;
  padding: 0 20px;
  margin: 0 auto;
  position: relative;
  display: block;
  -webkit-transition: all 1s ease-out;
  -moz-transition: all 1s ease-out;
  transition: all 1s ease-out;
  opacity: 1;
}

#numbers.hide {
  opacity: 0.3;
}

#pincode button {
  width: 70px;
  height: 70px;
  margin-bottom: 10px;
  background-color: transparent;
  border: 0;
  color: #292929;
  font-size: 25px;
  line-height: 50px;
  border-radius: 100%;
  opacity: 1;
  outline: 0;
  border: 2px solid #d9d9d9;
}

#pincode button:active {
  background-color: rgba(218, 218, 218, 0.432);
  outline: 0;
}

#fields {
  max-width: 200px;
  padding: 0 20px;
  margin: 30px auto;
  position: relative;
  display: block;
}

#fields .numberfield {
  text-align: center;
}

#fields .numberfield span {
  height: 15px;
  width: 15px;
  border-radius: 100%;
  position: relative;
  display: inline-block;
  text-align: center;
}

#fields .numberfield.active span {
  background-color: #313131;
}

#fields .numberfield.right span {
  background-color: #272a2f;
  border-color: #272a2f;
  transition: all .5s ease-in-out;
  -webkit-transition: all .5s ease-in-out;
}

.btn_loader {
  width: 35px;
  height: 35px;
  border: 3px solid #FFF;
  border-bottom-color: transparent;
  border-radius: 50%;
  display: inline-block;
  box-sizing: border-box;
  animation: rotation 1s linear infinite;
  margin-top: 14px;
  }

  @keyframes rotation {
  0% {
      transform: rotate(0deg);
  }
  100% {
      transform: rotate(360deg);
  }
  } 

.pin-submit-active {
  background-color: #0c49d6!important;
  color: #d4d4d4!important;
}
.pin-arrow-right {
  display: flex;
  justify-content: center;
  font-size: 40px!important;
}
button#submit:disabled {
  opacity: 0.5!important;
}
/*------
# Toast Grid
----*/

.grid {
  list-style: none;
  margin-left: -20px;
}

.grid__col--1-of-3,
.grid__col--2-of-6,
.grid__col--4-of-12 {
  width: 33.33333%;
}

.grid__col--1-of-4,
.grid__col--2-of-8,
.grid__col--3-of-12 {
  width: 25%;
}

.grid__col {
  box-sizing: border-box;
  display: inline-block;
  margin-right: -.25em;
  min-height: 1px;
  padding-left: 20px;
  vertical-align: top;
}

.grid__col--centered {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.grid__col--d-first {
  float: left;
}

.grid__col--d-last {
  float: right;
}

.grid--no-gutter {
  margin-left: 0;
  width: 100%;
}

.grid--no-gutter .grid__col {
  padding-left: 0;
}

.grid--no-gutter .grid__col--span-all {
  margin-left: 0;
  width: 100%;
}

.grid__col--ab {
  vertical-align: bottom;
}

.grid__col--am {
  vertical-align: middle;
}

.miss {
  -webkit-animation: miss .8s ease-out 1;
  animation: miss .8s ease-out 1;
}

@-webkit-keyframes miss {
  0% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
  10% {
    -webkit-transform: translate(-25px, 0);
    transform: translate(-25px, 0);
  }
  20% {
    -webkit-transform: translate(25px, 0);
    transform: translate(25px, 0);
  }
  30% {
    -webkit-transform: translate(-20px, 0);
    transform: translate(-20px, 0);
  }
  40% {
    -webkit-transform: translate(20px, 0);
    transform: translate(20px, 0);
  }
  50% {
    -webkit-transform: translate(-10px, 0);
    transform: translate(-10px, 0);
  }
  60% {
    -webkit-transform: translate(10px, 0);
    transform: translate(10px, 0);
  }
  70% {
    -webkit-transform: translate(-5px, 0);
    transform: translate(-5px, 0);
  }
  80% {
    -webkit-transform: translate(5px, 0);
    transform: translate(5px, 0);
  }
  100% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
}

@keyframes miss {
  0% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
  10% {
    -webkit-transform: translate(-25px, 0);
    transform: translate(-25px, 0);
  }
  20% {
    -webkit-transform: translate(25px, 0);
    transform: translate(25px, 0);
  }
  30% {
    -webkit-transform: translate(-20px, 0);
    transform: translate(-20px, 0);
  }
  40% {
    -webkit-transform: translate(20px, 0);
    transform: translate(20px, 0);
  }
  50% {
    -webkit-transform: translate(-10px, 0);
    transform: translate(-10px, 0);
  }
  60% {
    -webkit-transform: translate(10px, 0);
    transform: translate(10px, 0);
  }
  70% {
    -webkit-transform: translate(-5px, 0);
    transform: translate(-5px, 0);
  }
  80% {
    -webkit-transform: translate(5px, 0);
    transform: translate(5px, 0);
  }
  100% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
}

#hastylink {
  position: fixed;
  bottom:5px;
  left: 0;
  right: 0;
  font-size: 13px;
  color: #fff;
  text-decoration: none;
  text-align: center;
}

@media only screen and (max-width: 650px) {
  body {
      font-size: 16px;
  }
}



.blist_choice {
  margin: 70px auto 0 auto;
  display: flex;
  flex-wrap: wrap;
  max-width: 856px;
  padding-left: 24px;
}

@media only screen and (max-width: 1060px) {
  .blist_choice {
    margin: 48px auto 0 auto;
    align-items: center;
    justify-content: center;
    max-width: 824px;
    padding-left: 16px;
  }
}

@media only screen and (max-width: 520px) {
  .blist_choice {
    padding: 0;
    margin-right: -16px;
  }
}

@media only screen and (max-width: 358px) {
  .blist_choice li {
    width: 100%;
    margin-right: -6px;
  }
}

.b-card {
  width: 190px;
  height: 168px;
  margin: 0 18px 18px 0;
  padding: 24px;

  background: #fff;
  border: 1px solid #e5e5e5;
  box-sizing: border-box;
  box-shadow: 0px 4px 8px rgba(8, 35, 48, 0.1);
  border-radius: 8px;
  cursor: pointer;

  display: flex;
  flex-direction: column;
  align-items: center;

  font-size: 14px;
  color: #3a3a3a;
}

.disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

@media only screen and (max-width: 1060px) {
  .b-card {
    width: 190px;
    margin: 0 16px 16px 0;
    padding: 16px;
  }
}

@media only screen and (max-width: 520px) {
  .b-card {
    width: 156px;
  }
}

@media only screen and (max-width: 358px) {
  .b-card {
    width: calc(100% - 20px);
  }
}

.b-card:not(.disabled):hover,
.b-card:focus {
  border: 2px solid #0A6AFA;
}

.card-logo {
  max-height: 100%;
  max-width: 100%;
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.card-logo img {
  align-self: stretch;
  object-fit: contain;
  max-height: 100%;
  max-width: 100%;
}

.card:not(.disabled):hover,
.card:focus {
  border: 2px solid #0A6AFA;
}

ul {
  list-style-type: none;
  padding: 0;
}

.personal-info-disclaimer {
  padding: 0 32px;
  max-width: 920px;
  margin: 48px auto 0 auto;
  font-size: 14px;
  color: #737373;
}

.footer {
  padding: 20px;
  background: #262626;
  color: #fff;
  font-size: 16px;
}

.footer-copy {
  margin-top: 5px;
  margin-bottom: 0px;
}