@import url(https://fonts.googleapis.com/css2?family=Inter:slnt,wght@-10..0,100..900&display=swap);
:root {
  --clr-white: rgb(255, 255, 255);
  --clr-black: rgb(0, 0, 0);
  --clr-light: rgb(245, 248, 255);
  --clr-light-gray: #9d9d9d;
  --clr-blue: rgb(63, 134, 255);
  --clr-light-blue: rgb(171, 202, 255);
  --main-color: #4CAF50;
  --main-color-rgb: rgb(76, 175, 80);
  --main-color-darker: rgb(59, 131, 62);
  --main-color-light: rgb(76, 175, 80, 0.4);
  --main-font: 'Inter';
}

#icon_back {
  display: none;
  width: 100%;
}

#icon_back.finished {
  opacity: .6;
}

.upload-area {
  width: 100%;
  height: 100%;
  max-width: 550px;
  background-color: var(--clr-white);
  border-radius: 24px;
  margin: 0 auto;
  text-align: center;
  display: none;
  padding: 20px;
}

.upload-area .drop-zoon__paragraph {
  padding: 5px;
}

.upload-area--open {
  animation: slidDown .5s ease-in-out;
}

@keyframes slidDown {
  from {
    height: 28.125rem;
  }

  to {
    height: 35rem;
  }
}

.upload-area__title {
  margin-top: 10px;
  font-size: 16px;
  font-weight: 700;
  margin-bottom: .3125rem;
  color: #0b1a33;
}

.upload-area__paragraph {
  font-size: 12px;
  color: var(--clr-light-gray);
  margin-top: 0;
}

.icon-upload {
  position: absolute;
  top: 50%;
  left: 50%;
  color: #316f47;
  font-size: 36px;
  z-index: 1;
  transform: translate(-50%,-50%);
}

#icon-completed {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  max-width: 68px;
  z-index: 2;
  transform: translate(-50%,-50%);
}

#icon_back svg,
#icon_front svg {
  max-height: 295px;
}

.upload-area__drop-zoon {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  border: 1px dashed #ddd;
  border-radius: 15px;
  cursor: pointer;
  transition: border-color .3s ease-in-out;
  min-height: 314px;
  margin-bottom: 20px;
  width: 482px;
  margin: 0 auto;
}

.upload-area__drop-zoon:hover {
  border-color: var(--main-color);
}

.drop-zoon__icon {
  display: flex;
  font-size: 3.75rem;
  color: var(--main-color);
  transition: opacity .3s ease-in-out;
}

.drop-zoon__paragraph {
  font-size: .9375rem;
  color: var(--clr-light-gray);
  margin: 0;
  margin-top: .625rem;
  transition: opacity .3s ease-in-out;
  width: 100%;
  height: 100%;
  padding: 10px;
}

.drop-zoon__paragraph svg {
  opacity: .6;
}

.drop-zoon:hover .drop-zoon__icon,
.drop-zoon:hover .drop-zoon__paragraph {
  opacity: .7;
}

.drop-zoon__loading-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  display: none;
  color: var(--clr-light-blue);
  z-index: 10;
}

.drop-zoon__preview-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: .3125rem;
  border-radius: 10px;
  display: none;
  z-index: 1000;
  transition: opacity .3s ease-in-out;
}

.drop-zoon:hover .drop-zoon__preview-image {
  opacity: .8;
}

.drop-zoon__file-input {
  display: none;
}

.drop-zoon--over {
  border-color: var(--main-color);
}

.drop-zoon--over .drop-zoon__icon,
.drop-zoon--over .drop-zoon__paragraph {
  opacity: .7;
}

.upload-area__file-details {
  height: 0;
  visibility: hidden;
  opacity: 0;
  text-align: left;
  transition: none .5s ease-in-out;
  transition-property: opacity,visibility;
  transition-delay: .5s;
}

.file-details--open {
  height: auto;
  visibility: visible;
  opacity: 1;
}

.file-details__title {
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--clr-light-gray);
}

.upload-area .uploaded-file {
  display: flex;
  align-items: center;
  padding: .625rem 0;
  visibility: hidden;
  opacity: 0;
  transition: none .5s ease-in-out;
  transition-property: visibility,opacity;
}

.uploaded-file--open {
  visibility: visible;
  opacity: 1;
}

.uploaded-file__icon-container {
  position: relative;
  margin-right: .3125rem;
}

.uploaded-file__icon {
  font-size: 3.4375rem;
  color: var(--main-color);
}

.uploaded-file__icon-text {
  position: absolute;
  top: 1.5625rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: .9375rem;
  font-weight: 500;
  color: var(--clr-white);
}

.uploaded-file__info {
  position: relative;
  top: -.3125rem;
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.uploaded-file__info::before,
.uploaded-file__width {
  content: '';
  position: absolute;
  bottom: -.9375rem;
  width: 0;
  height: .5rem;
  background-color: #ebf2ff;
  border-radius: .625rem;
}

.uploaded-file__info::before {
  width: 100%;
}

.uploaded-file__width {
  width: 100%;
  background-color: var(--main-color);
}

.uploaded-file__width {
  animation: progressMove .8s ease-in-out;
  animation-delay: .3s;
}

@keyframes progressMove {
  from {
    width: 0%;
    background-color: transparent;
  }

  to {
    width: 100%;
    background-color: var(--main-color);
  }
}

@keyframes spinner {
  0% {
    transform: rotate(0);
  }

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

.uploaded-file__name {
  width: 100%;
  max-width: 6.25rem;
  display: inline-block;
  font-size: 1rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.uploaded-file__counter {
  font-size: 1rem;
  color: var(--clr-light-gray);
}

#images {
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 10px 14px;
  margin: 10px 0 5px 0;
  border-radius: 10px;
}

.upload-area .image_box {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: left;
  position: relative;
  border-radius: 5px;
  z-index: 2;
  width: 227px;
  height: 135px;
}

.upload-area .image_box img {
  width: 100%;
  height: 100%;
  z-index: 3;
  object-fit: contain;
}

.upload-area #wrap-images {
  display: flex;
  justify-content: space-around;
  margin-top: 15px;
}

.upload-area .wrap-image_box {
  position: relative;
  border: none;
  width: auto;
  height: 140px;
  border: 1px dashed #ddd;
  border-radius: 5px;
  min-width: 227px;
  display: none;
  margin-top: 35px;
}

.upload-area #wrap-img0:hover,
.upload-area #wrap-img1:hover {
  border-color: var(--main-color);
  cursor: pointer;
}

.upload-area .wrap-image_box:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  margin-top: -20px;
  margin-left: -20px;
  background-image: url("../images/mingcute_add-fill.svg");
}

.upload-area .wrap-image_box:before {
  content: "Mặt trước";
  position: absolute;
  top: -30px;
  left: 80px;
  font-weight: 600;
  font-size: 12px;
}

body.language-en .upload-area .wrap-image_box#wrap-img0:before {
  content: "Front side";
}

body.language-th .upload-area .wrap-image_box#wrap-img0:before {
  content: "ด้านหน้า";
}

.upload-area .wrap-image_box#wrap-img1:before {
  content: "Mặt sau";
}

.upload-area.passport .wrap-image_box:before {
  content: "Hình ảnh chứa thông tin hộ chiếu";
  width: 300px;
  left: -32px;
}

body.language-en .upload-area.passport .wrap-image_box#wrap-img0:before {
  content: "Image containing passport information";
}

body.language-th .upload-area.passport .wrap-image_box#wrap-img0:before {
  content: "รูปภาพที่มีข้อมูลหนังสือเดินทาง";
}

body.language-en .upload-area .wrap-image_box#wrap-img1:before {
  content: "Back side";
}

body.language-th .upload-area .wrap-image_box#wrap-img1:before {
  content: "ด้านหลัง";
}

.upload-area .image_close {
  position: absolute;
  top: -10px;
  right: -10px;
  cursor: pointer;
  background-color: red;
  color: #fff;
  border: 1.5px solid #fff;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 4;
}

.upload-area .image_close i {
  font-size: 10px;
  margin-top: 2px;
}

.upload-area #total-images {
  font-size: 20px;
  font-weight: 700;
  max-width: 400px;
  margin: 0 auto 10px auto;
}

.upload-area__header {
  margin-top: 10px;
}

#uploadError #btn-submit-again.loading .try-again {
  animation: spinner .8s linear infinite;
}

#gulp-version {
  margin-top: 50px;
  margin-right: 20px;
  text-align: right;
}

@media (max-width:479px) {
  .upload-area .upload-area__drop-zoon {
    width: auto;
    min-height: auto;
  }

  .upload-area #wrap-images {
    flex-direction: column;
    justify-content: center;
    gap: 30px;
    align-items: center;
  }

  .upload-area #uploadButton {
    width: 100%;
  }

  .upload-area #wrap-images {
    flex-direction: column;
  }
}
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
}

main {
  display: block;
}

h1 {
  font-size: 2em;
  margin: .67em 0;
}

hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible;
}

pre {
  font-family: monospace,monospace;
  font-size: 1em;
}

a {
  background-color: transparent;
}

abbr[title] {
  border-bottom: none;
  text-decoration: underline;
  text-decoration: underline dotted;
}

b,
strong {
  font-weight: bolder;
}

code,
kbd,
samp {
  font-family: monospace,monospace;
  font-size: 1em;
}

small {
  font-size: 80%;
}

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -.25em;
}

sup {
  top: -.5em;
}

img {
  border-style: none;
}

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
}

button,
input {
  overflow: visible;
}

button,
select {
  text-transform: none;
}

[type=button],
[type=reset],
[type=submit],
button {
  -webkit-appearance: button;
}

[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner,
button::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring,
button:-moz-focusring {
  outline: 1px dotted ButtonText;
}

fieldset {
  padding: .35em .75em .625em;
}

legend {
  box-sizing: border-box;
  color: inherit;
  display: table;
  max-width: 100%;
  padding: 0;
  white-space: normal;
}

progress {
  vertical-align: baseline;
}

textarea {
  overflow: auto;
}

[type=checkbox],
[type=radio] {
  box-sizing: border-box;
  padding: 0;
}

[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto;
}

[type=search] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}

[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}

details {
  display: block;
}

summary {
  display: list-item;
}

template {
  display: none;
}

[hidden] {
  display: none;
}

.show {
  display: block!important;
}

.disabled {
  pointer-events: none;
}

@keyframes spinner {
  0% {
    transform: rotate(0);
  }

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

.icon-loading {
  display: none;
  animation: spinner .8s linear infinite;
  border: 2px solid #fff;
  border-right-color: transparent;
  border-radius: 100%;
  width: 20px;
  height: 20px;
  z-index: 100;
  margin-left: 10px;
}

.icon-loading#main-loader {
  display: none;
  height: 60px;
  width: 60px;
  border: 4px solid var(--main-color);
  border-right-color: transparent;
}

.btn-common {
  width: 100%;
  padding: 10px 18px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  min-height: 44px;
}

.disabled {
  pointer-events: none!important;
}

.btn-link {
  background-color: transparent!important;
  color: var(--main-color);
  border: none;
  font-size: 12px;
  text-decoration: none;
}

.btn-link:hover {
  background-color: transparent!important;
  color: var(--main-color)!important;
}

.btn-check:checked+.btn,
.btn-common,
.btn-common:hover,
.btn-primary,
.btn-primary:hover,
.btn.active,
.btn.disabled,
.btn.show,
.btn:disabled,
.btn:first-child:active,
.btn:focus-visible,
.btn:hover,
:not(.btn-check)+.btn:active {
  background: var(--main-color);
  border-color: var(--main-color);
}

.btn-primary {
  font-size: 16px;
  font-weight: 600;
  height: 44px;
  box-shadow: 0 1px 2px 0 #1018280d;
  border-radius: 8px;
  width: 100%;
}

.btn-common:hover,
.btn-primary:hover,
.btn:hover {
  opacity: .85;
  color: #fff;
}

.btn:focus-visible {
  box-shadow: none;
}

@media (max-width:768px) {
  .vh-full-mb {
    min-height: calc(100vh - 32px);
  }

  .vh-full-mb {
    min-height: calc(var(--vh) - 32px);
  }
}

.swal2-confirm {
  background-color: var(--main-color)!important;
}

.flash {
  animation: flash .4s ease-in-out;
}

@keyframes flash {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.shake {
  animation: shake .5s ease-in-out;
}

@keyframes shake {
  0%, 100% {
    transform: translateX(0);
  }

  10%, 30%, 50%, 70%, 90% {
    transform: translateX(-5px);
  }

  20%, 40%, 60%, 80% {
    transform: translateX(5px);
  }
}

html {
  font-size: 12px;
  min-height: var(--vh);
}

body {
  font-family: var(--main-font),sans-serif;
  margin: 0 auto;
  color: #0b1a33;
  font-size: 14px;
  min-height: var(--vh);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: linear-gradient(167.8deg,#fff 45%,#e2e5ff 100%);
}

#demo-user-info {
  margin-top: 5%;
}

#kyc-library-outter-video-container {
  position: relative;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 600px;
  height: 520px;
  border-radius: 5px;
}

#kyc-library-outter-video-container:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  bottom: 29px;
  right: 29px;
  width: 348px;
  height: 448px;
  z-index: 99;
  border-radius: 9000px;
  border: 3px dashed;
  border-color: #ea5439;
  transform: translate(-50%,-50%);
}

#kyc-library-outter-video-container.active:before {
  border-color: #00aa34;
}

#kyc-library-outter-video-container #kyc-library-video-canvas {
  display: none;
}

#kyc-library-inner-video-container {
  width: 550px;
  height: 550px;
  overflow: hidden;
  transform: rotateY(180deg);
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  display: none;
}

#kyc-library-video {
  display: none;
}

#kyc-library-video-display-canvas {
  display: block;
  position: relative;
  width: 550px;
  height: 550px;
  border-radius: 10px;
  z-index: 2;
  clip-path: inset(50px 100px round 50%);
}

#kyc-library-progress {
  display: block;
  width: 550px;
  height: 550px;
  border-radius: 10px;
  z-index: 2;
  border-radius: 50%;
  border: 5px solid #ddd;
  transform: translate(-50%,-50%);
}

#kyc-library-overlay {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 560px;
  height: 560px;
  border-radius: 10px;
  background-color: transparent;
  z-index: 1;
}

#kyc-btn-wraper {
  padding: 20px 16px;
  background: #fff;
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
  box-shadow: 0 20px 24px -4px #10182814;
  margin-top: 40px;
}

#kyc-btn-wraper .progress {
  background-color: #c9d1d9;
}

#kyc-btn-wraper .progress-bar {
  background-color: var(--main-color);
}

#kyc-btn {
  margin: 0 auto;
  display: flex;
  align-items: flex-end;
  flex: 1;
}

#kyc-btn-submit {
  padding: 10px 20px;
  background-color: var(--main-color);
  color: #fff;
  border: 1px solid var(--main-color);
  margin: 0 auto;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
  min-width: 280px;
  height: 55px;
  flex: 1;
}

#btn-verify-later {
  padding: 10px 20px;
  background-color: #bed2c2;
  border: 1px solid #bed2c2;
  margin: 0 auto;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
  min-width: 280px;
  height: 45px;
  margin-top: 10px;
  color: #1e7e34;
  display: none;
}

#btn-verify-later:hover {
  background-color: #ccdccf;
  border-color: #b0c8b5;
  color: #1e7e34;
}

#kyc-root {
  display: none;
  background-color: #fff;
  border-radius: 20px;
  padding: 0 30px 30px 30px;
}

#kyc-progress-wraper {
  display: none;
}

#kyc-btn-submit {
  display: none;
}

#kyc-library-state-center {
  display: block;
}

#kyc-library-state-success {
  display: none;
  z-index: 3;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes flickerAnimation {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@-o-keyframes flickerAnimation {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@-moz-keyframes flickerAnimation {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@-webkit-keyframes flickerAnimation {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.animate-flicker {
  -webkit-animation: flickerAnimation .5s infinite;
  -moz-animation: flickerAnimation .5s infinite;
  -o-animation: flickerAnimation .5s infinite;
  animation: flickerAnimation .5s infinite;
}

#kyc-next {
  display: none;
  margin: 0 auto;
}

#uploadIcon {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}

#uploadButton img {
  margin-right: 5px;
  width: 20px;
}

#uploadSuccess {
  display: none;
}

#kyc-guide {
  max-width: 550px;
  display: none;
  flex-direction: column;
  text-align: center;
  margin: 0 auto;
}

#kyc-guide .description {
  background-color: #f3f3f3;
  border-radius: 18px;
  padding: 20px;
  text-align: left;
  margin: 0 auto 20px auto;
  max-width: 450px;
}

#kyc-guide .description .title {
  font-weight: 600;
  margin-bottom: 10px;
  font-size: 16px;
}

#kyc-guide h1 {
  font-size: 24px;
  font-weight: 700;
}

#kyc-guide p.sub-title {
  font-size: 12px;
  max-width: 430px;
  margin: 0 auto 20px auto;
}

#kyc-guide .description ul {
  margin-bottom: 0;
}

#kyc-guide .description ul li {
  font-size: 12px;
}

#kyc-guide #image-guide svg {
  max-width: 242px;
}

#kyc-guide #btn-verify-later {
  width: 450px;
  height: 55px;
  flex: none;
}

#image-guide {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  margin-bottom: 30px;
}

#image-guide svg {
  width: 50%;
  height: 50%;
}

#document-guide {
  display: none!important;
  max-width: 600px;
  display: flex;
  flex-direction: column;
  text-align: center;
  margin: 0 auto;
  padding: 0 15px;
}

#document-guide .description {
  border-radius: 18px;
  padding: 20px;
  text-align: left;
  margin: 0 auto 20px auto;
  margin-bottom: 25px;
  width: 100%;
}

#document-guide .description .title {
  font-weight: 600;
  margin-bottom: 10px;
  font-size: 16px;
  position: relative;
}

#document-guide h1 {
  font-size: 24px;
  font-weight: 700;
}

#document-guide p.sub-title {
  font-size: 12px;
  margin: 0 auto 20px auto;
}

#document-guide .description ul {
  margin-bottom: 0;
}

#document-guide .description ul li {
  font-size: 12px;
}

#document-guide #btn-verify-later {
  width: 450px;
  height: 54px;
  flex: none;
}

#document-guide .description.description-should {
  background-color: #f3f3f3;
}

#document-guide .description.description-should .title {
  color: #000;
}

#document-guide #btn-next-step-upload {
  background-color: var(--main-color);
  width: 100%;
  height: 54px;
  flex: none;
  color: #fff;
  font-size: 16px;
  margin: 0 auto;
  border-radius: 8px;
}

#document-guide #btn-verify-later {
  width: 100%;
  font-size: 16px;
  border-radius: 8px;
}

#document-guide .wrap-image {
  display: flex;
  gap: 20px;
  justify-content: space-around;
  margin-bottom: 40px;
  margin-top: 40px;
}

#document-guide .wrap-image .img-doc {
  width: 243px;
  height: 148px;
}

#document-guide .wrap-option-type {
  display: flex;
  justify-content: space-between;
  gap: 20px;
}

#document-guide .wrap-option-type .option-type {
  display: none;
  border: 1px solid #e9e7f0;
  padding: 13px 20px;
  flex: 1;
  line-height: 40px;
  border-radius: 12px;
  font-size: 15px;
  position: relative;
}

#document-guide span.recommend {
  position: absolute;
  right: 0;
  top: 0;
  line-height: 1;
  padding: 5px 7px;
  font-size: 10px;
  background: var(--main-color);
  color: #fff;
  border-radius: 0 11px 0 9px;
}

#document-guide span.radio-mark:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 16px;
  height: 16px;
  background: #fff;
  border-radius: 50%;
  border: 1px solid #c3c3c3;
}

#document-guide input[name=doc-type]:checked+span.radio-mark:before {
  border: 1px solid var(--main-color);
}

#document-guide span.radio-mark {
  padding-left: 25px;
  position: relative;
}

#document-guide span.radio-mark:after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 10px;
  height: 10px;
  background: var(--main-color);
  border-radius: 50%;
  display: none;
}

#document-guide input[name=doc-type]:checked+span.radio-mark:after {
  display: block;
}

#document-guide .wrap-option-type .option-type input[type=radio] {
  opacity: 0;
  position: absolute;
  left: -9999px;
}

#document-guide .wrap-option-type .option-type input[type=radio]:checked+span {
  color: var(--main-color);
}

#document-guide .wrap-option-type .option-type.active {
  border-color: var(--main-color);
}

#document-guide .text-error-select-doc-type {
  text-align: center;
  margin-top: 20px;
  color: red;
  font-size: 14px;
  font-weight: 700;
}

#document-guide .wrap-radio {
  display: none;
  gap: 40px;
  margin-bottom: 30px;
  text-align: left;
  border-top: 1px solid #e6e6e6;
  padding-top: 30px;
}

#document-guide .wrap-radio label {
  font-size: 16px;
}

#select-type-document .label-select-doc-type span {
  font-size: 15px;
  margin-bottom: 20px;
  font-weight: 700;
}

#select-type-document .label-select-doc-type .required {
  color: red;
}

.wrap-image .item-image .icon-info {
  max-width: 30px;
  position: absolute;
  right: -15px;
  top: -15px;
}

.wrap-image .item-image {
  position: relative;
}

#rotate-warning {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0,0,0,.95);
  color: #fff;
  font-size: 22px;
  text-align: center;
  padding: 30px;
  z-index: 9999;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

@media (max-width:768px) {
  #kyc-root {
    padding: 16px;
    overflow-x: hidden;
    border-radius: 0;
  }

  #kyc-library-outter-video-container {
    width: 340px;
    height: 500px;
  }

  #kyc-library-video-display-canvas {
    width: 448px;
    height: 448px;
    clip-path: inset(0 50px round 50%);
  }

  #kyc-library-overlay {
    width: 340px;
    height: 500px;
  }

  #kyc-library-info-message {
    margin-top: 10%;
  }

  #kyc-library-state-left {
    left: -30px;
    font-size: 36px;
  }

  #kyc-library-state-right {
    right: -30px;
    font-size: 36px;
  }
}

@media (max-width:576px) {
  #document-guide .wrap-image {
    margin: 0 auto 20px;
    gap: 20px;
    padding-right: 4px;
  }

  #document-guide .wrap-image .image-incorrect .img-doc {
    border: 1px solid #ea5339;
    border-radius: 10px;
  }

  #document-guide .wrap-image .image-correct .img-doc {
    border: 1px solid #03bf37;
    border-radius: 10px;
  }

  .wrap-image .item-image {
    display: inline-block;
    flex: 1;
  }

  .wrap-image .item-image .icon-info {
    max-width: 24px;
    right: -11px;
    top: -11px;
  }

  #document-guide .wrap-image .img-doc {
    width: 100%;
    height: auto;
  }

  #document-guide .wrap-option-type {
    flex-direction: column;
  }
}

@media (max-width:479px) {
  #kyc-guide #btn-verify-later {
    width: 100%;
  }
}
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
}

main {
  display: block;
}

h1 {
  font-size: 2em;
  margin: .67em 0;
}

hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible;
}

pre {
  font-family: monospace,monospace;
  font-size: 1em;
}

a {
  background-color: transparent;
}

abbr[title] {
  border-bottom: none;
  text-decoration: underline;
  text-decoration: underline dotted;
}

b,
strong {
  font-weight: bolder;
}

code,
kbd,
samp {
  font-family: monospace,monospace;
  font-size: 1em;
}

small {
  font-size: 80%;
}

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -.25em;
}

sup {
  top: -.5em;
}

img {
  border-style: none;
}

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
}

button,
input {
  overflow: visible;
}

button,
select {
  text-transform: none;
}

[type=button],
[type=reset],
[type=submit],
button {
  -webkit-appearance: button;
}

[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner,
button::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring,
button:-moz-focusring {
  outline: 1px dotted ButtonText;
}

fieldset {
  padding: .35em .75em .625em;
}

legend {
  box-sizing: border-box;
  color: inherit;
  display: table;
  max-width: 100%;
  padding: 0;
  white-space: normal;
}

progress {
  vertical-align: baseline;
}

textarea {
  overflow: auto;
}

[type=checkbox],
[type=radio] {
  box-sizing: border-box;
  padding: 0;
}

[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto;
}

[type=search] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}

[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}

details {
  display: block;
}

summary {
  display: list-item;
}

template {
  display: none;
}

[hidden] {
  display: none;
}

.show {
  display: block!important;
}

.disabled {
  pointer-events: none;
}

@keyframes spinner {
  0% {
    transform: rotate(0);
  }

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

.icon-loading {
  display: none;
  animation: spinner .8s linear infinite;
  border: 2px solid #fff;
  border-right-color: transparent;
  border-radius: 100%;
  width: 20px;
  height: 20px;
  z-index: 100;
  margin-left: 10px;
}

.icon-loading#main-loader {
  display: none;
  height: 60px;
  width: 60px;
  border: 4px solid var(--main-color);
  border-right-color: transparent;
}

.btn-common {
  width: 100%;
  padding: 10px 18px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  min-height: 44px;
}

.disabled {
  pointer-events: none!important;
}

.btn-link {
  background-color: transparent!important;
  color: var(--main-color);
  border: none;
  font-size: 12px;
  text-decoration: none;
}

.btn-link:hover {
  background-color: transparent!important;
  color: var(--main-color)!important;
}

.btn-check:checked+.btn,
.btn-common,
.btn-common:hover,
.btn-primary,
.btn-primary:hover,
.btn.active,
.btn.disabled,
.btn.show,
.btn:disabled,
.btn:first-child:active,
.btn:focus-visible,
.btn:hover,
:not(.btn-check)+.btn:active {
  background: var(--main-color);
  border-color: var(--main-color);
}

.btn-primary {
  font-size: 16px;
  font-weight: 600;
  height: 44px;
  box-shadow: 0 1px 2px 0 #1018280d;
  border-radius: 8px;
  width: 100%;
}

.btn-common:hover,
.btn-primary:hover,
.btn:hover {
  opacity: .85;
  color: #fff;
}

.btn:focus-visible {
  box-shadow: none;
}

@media (max-width:768px) {
  .vh-full-mb {
    min-height: calc(100vh - 32px);
  }

  .vh-full-mb {
    min-height: calc(var(--vh) - 32px);
  }
}

.swal2-confirm {
  background-color: var(--main-color)!important;
}

.flash {
  animation: flash .4s ease-in-out;
}

@keyframes flash {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.shake {
  animation: shake .5s ease-in-out;
}

@keyframes shake {
  0%, 100% {
    transform: translateX(0);
  }

  10%, 30%, 50%, 70%, 90% {
    transform: translateX(-5px);
  }

  20%, 40%, 60%, 80% {
    transform: translateX(5px);
  }
}
.top-panel-container {
  flex: 1;
  display: flex;
  align-items: center;
}

.section-indent-verification {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 16px;
}

.section-indent-verification .top-panel {
  padding: 12px;
  width: 100%;
}

.section-indent-verification .bottom-panel {
  width: 100%;
  padding: 20px 0;
}

.section-indent-verification .heading {
  font-weight: 600;
  font-size: 24px;
  text-align: center;
  color: var(--main-color);
}

.section-indent-verification .image-box svg {
  width: 100%;
}

.section-indent-verification .guide-text {
  font-weight: 400;
  font-size: 12px;
  text-align: center;
  color: #667085;
}

.section-indent-verification .container {
  width: 100%;
  max-width: 454px;
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 10px 24px -4px #10182814;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  padding: 32px;
  box-sizing: border-box;
  gap: 32px;
}

.section-indent-verification .icon-identity-verification .stroke {
  stroke: var(--main-color);
  stroke-width: 2;
}

.section-indent-verification .icon-identity-verification .primary-fill {
  fill: var(--main-color);
}

@media (max-width:480px) {
  .section-indent-verification .container {
    border-radius: 0;
    box-shadow: 0 0;
    background-color: transparent;
    padding: 0;
    justify-content: space-between;
    gap: 12px;
  }

  .section-indent-verification .top-panel {
    margin: 0;
  }

  .section-indent-verification .bottom-panel {
    padding: 20px 16px;
  }

  .section-indent-verification .bottom-panel,
  .section-indent-verification .top-panel {
    background-color: #fff;
    box-shadow: 0 8px 8px -4px #10182808;
    box-shadow: 0 20px 24px -4px #10182814;
    border-radius: 12px;
  }
}

.section-indent-verification .bottom-label {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  font-weight: 500;
  font-size: 14px;
  color: #9ca5a9;
  flex-wrap: wrap;
  letter-spacing: .5px;
}

.section-kyc-root .wrap-kycRoot__info_message {
  max-width: 500px;
  padding: 10px 15px;
  background-color: #000;
  border-radius: 6px;
}

.section-kyc-root #kyc-library-info-message {
  margin-top: auto;
  text-align: center;
  margin: 20px 0 0;
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  animation: fadeIn 1.5s ease-in;
}

.section-kyc-root #kyc-library-state-right {
  color: #00aa34;
  display: none;
  font-size: 18px;
}

.section-kyc-root #kyc-library-state-left {
  color: #00aa34;
  display: none;
  font-size: 18px;
}

.section-kyc-root #kyc-btn-note {
  margin-bottom: 20px;
}

.section-kyc-root .progress {
  background-color: #d0e2ff;
  --bs-progress-bar-bg: var(--main-color);
}

.section-kyc-root #kyc-progress-wraper {
  max-width: 540px;
  margin: 0 auto;
}

.section-kyc-root #kyc-btn-note ul li {
  font-weight: 600;
}

.section-kyc-root .btn-wrapper {
  padding-top: 32px;
  width: 100%;
  display: flex;
  justify-content: center;
}

@media (max-width:480px) {
  .section-kyc-root .wrap-kycRoot__info_message {
    max-width: 100%;
  }

  .section-kyc-root .wrap-kycRoot__info_message {
    padding: 10px 6px;
  }

  .section-kyc-root #kyc-library-info-message {
    font-size: 12px;
  }
}

.section-kyc-failed {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 16px;
}

.section-kyc-failed .container {
  width: 100%;
  max-width: 430px;
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 0 20px rgba(0,0,0,.1);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 70px;
  padding: 56px 32px 32px 32px;
  box-sizing: border-box;
}

.section-kyc-failed .button-container.btn-redirect-url {
  display: none;
}

.section-kyc-failed .info-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 55px;
}

.section-kyc-failed .error-label {
  font-weight: 500;
  font-size: 16px;
  line-height: 133%;
  letter-spacing: 0;
  text-align: center;
  color: red;
}

.section-kyc-failed .image-information {
  max-width: 100%;
  height: 145px;
}

.section-kyc-failed .support-link {
  text-decoration: none;
  cursor: pointer;
  font-weight: 400;
  font-size: 14px;
  line-height: 100%;
  letter-spacing: -.6%;
  text-align: center;
  vertical-align: middle;
  color: var(--main-color);
}

.section-kyc-failed .button-wrapper {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.section-kyc-failed .retry-button {
  cursor: pointer;
  border-radius: 10px;
  padding: 15px;
  font-weight: 600;
  font-size: 16px;
  line-height: 10.54px;
  letter-spacing: .05px;
  text-align: center;
  border: none;
  background-color: var(--main-color);
  color: #fff;
}

.section-kyc-failed .retry-button:hover {
  background-color: var(--main-color-darker);
}

@media (max-width:480px) {
  .section-kyc-failed .container {
    width: 100%;
    max-width: 430px;
    background-color: transparent;
    border-radius: 12px;
    box-shadow: 0 0 0 rgba(0,0,0,0);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    padding: 0;
    box-sizing: border-box;
  }

  .section-kyc-failed .button-container {
    padding: 20px 16px;
    background-color: #fff;
    box-shadow: 0 20px 24px -4px #10182814;
    border-radius: 12px;
  }

  .section-kyc-failed .error-label {
    font-weight: 600;
    font-size: 18px;
    line-height: 133%;
    letter-spacing: 0;
    text-align: center;
  }

  .section-kyc-failed .image-information {
    max-width: 100%;
    height: 170px;
  }

  .section-kyc-failed .info-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px 60px;
    border-radius: 12px;
    gap: 24px;
    box-shadow: 0 8px 8px -4px #10182808;
    box-shadow: 0 20px 24px -4px #10182814;
    background-color: #fff;
  }
}

.section-user-verification {
  width: 100%;
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 16px;
}

.section-user-verification .container {
  width: 100%;
  max-width: 480px;
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 10px 24px -4px #10182814;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 32px;
  gap: 24px;
}

.section-user-verification .button-wrapper {
  text-align: center;
  width: 100%;
  padding: 16px 0 0 0;
}

.section-user-verification .button-wrapper button {
  padding: 12px 30px;
  font-size: 16px;
  color: #fff;
  background-color: var(--main-color);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  width: 100%;
}

.section-user-verification .button-wrapper button:hover {
  background-color: var(--main-color-darker);
}

.section-user-verification .numbering {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 2px 8px;
  gap: 13.24px;
  width: 31.77px;
  height: 31.77px;
  background: var(--main-color);
  border: 2.64723px solid var(--main-color-light);
  border-radius: 132.362px;
  flex: none;
  order: 1;
  flex-grow: 0;
  color: #fff;
}

.section-user-verification .line {
  width: 0;
  height: 62px;
  border: 1px solid var(--main-color-light);
}

.section-user-verification .cont {
  text-align: center;
  display: flex;
  justify-content: center;
}

.section-user-verification .label-heading {
  font-weight: 500;
  font-size: 18px;
  line-height: 26.47px;
  letter-spacing: 0;
  color: var(--main-color);
}

.section-user-verification .heading {
  font-weight: 600;
  font-size: 24px;
  line-height: 37.06px;
  letter-spacing: 0;
  text-align: center;
  width: 100%;
  margin-bottom: 12px;
}

.section-user-verification .subheading {
  font-weight: 400;
  font-size: 14px;
  letter-spacing: 0;
  text-align: center;
  color: #667085;
}

.section-user-verification .steps-wrapper {
  padding: 22px;
  margin-top: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
}

.section-user-verification .numbering-column {
  display: flex;
  justify-content: center;
  align-items: start;
  padding-bottom: 16px;
}

.section-user-verification .step-details {
  display: none;
  flex-direction: column;
  gap: 48px;
}

.section-user-verification .step-description {
  font-weight: 400;
  font-size: 14px;
  letter-spacing: 0;
  color: #667085;
}

.section-user-verification .step-description-alt {
  font-weight: 400;
  font-size: 14px;
  color: #667085;
  flex-wrap: wrap;
  word-break: normal;
}

.section-user-verification .instructions-wrapper {
  width: 100%;
  text-align: center;
  padding: 20px 0 16px 0;
}

.section-user-verification .instructions-text {
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0;
  text-align: center;
  color: #667085;
}

@media (max-width:480px) {
  .section-user-verification .heading {
    font-size: 18px;
    margin-bottom: 8px;
  }

  .section-user-verification .label-heading,
  .section-user-verification .subheading {
    font-size: 14px;
  }

  .section-user-verification .container {
    border-radius: 0;
    box-shadow: 0 0;
    background-color: transparent;
    padding: 0;
    justify-content: space-between;
    gap: 12px;
  }

  .section-user-verification .top-panel {
    background-color: #fff;
    box-shadow: 0 20px 24px -4px #10182814;
    border-radius: 12px;
    padding: 12px;
  }

  .section-user-verification .instructions-wrapper {
    background-color: #fff;
    box-shadow: 0 20px 24px -4px #10182814;
    border-radius: 12px;
    padding: 20px 16px 16px 16px;
  }

  .section-user-verification .line {
    height: 64px;
  }

  .section-user-verification .steps-wrapper {
    padding: 16px;
  }

  .section-user-verification .step-details {
    gap: 32px;
  }

  .section-user-verification .numbering-column {
    padding-bottom: 32px;
    gap: 0;
  }

  .section-user-verification .steps-wrapper {
    gap: 12px;
  }
}

.section-finished-face-capture {
  width: 100%;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  display: none;
  padding: 16px;
}

.section-finished-face-capture-next-upload {
  display: none;
}

.section-finished-face-capture .image-information-id-card .stroke,
.section-select-document .image-information-driver .stroke,
.section-select-document .image-information-id-card .stroke,
.section-select-document .image-information-passport .stroke,
.section-upload-success-next-face-scan .image-information-id-card .stroke {
  stroke: var(--main-color);
  stroke-width: 1.5;
}

.section-select-document .image-information-passport .fill {
  fill: var(--main-color);
}

.section-finished-face-capture .container {
  width: 100%;
  max-width: 500px;
  background-color: #fff;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 32px;
  box-sizing: border-box;
  box-shadow: 0 27.55px 33.06px -5.51px #10182814;
}

.section-finished-face-capture .input-container {
  width: 100%;
}

.section-finished-face-capture .button-wrapper {
  padding-top: 25px;
  padding-bottom: 10px;
}

.section-finished-face-capture .face-capture-description {
  font-weight: 600;
  font-size: 16px;
  line-height: 133%;
  letter-spacing: 0;
  text-align: center;
  color: #101828;
  padding: 55px 0;
}

.section-finished-face-capture .image-information {
  max-width: 100%;
  height: auto;
}

.section-finished-face-capture .image-information-container {
  display: flex;
  justify-content: center;
  padding: 30px 0 0 0;
}

.section-finished-face-capture .image-logo {
  max-width: 100%;
  height: auto;
}

.section-finished-face-capture .image-logo-container {
  display: flex;
  justify-content: center;
  padding: 30px 0 0 0;
}

.section-finished-face-capture .logo-size {
  height: 177px;
}

.section-finished-face-capture .next-step-section {
  font-weight: 200;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0;
  color: #667085;
  padding: 10px 0 0 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.section-finished-face-capture .next-step-box {
  border: 1px solid #eaecf0;
  border-radius: 8px;
  border-width: 1px;
  padding: 16px 0 16px 12px;
}

.section-finished-face-capture .next-step-title {
  display: flex;
  justify-content: start;
  align-items: center;
  gap: 12px;
}

.section-finished-face-capture .next-step-heading {
  font-weight: 600;
  font-size: 16px;
  line-height: 20px;
  letter-spacing: 0;
  color: var(--main-color);
}

.section-finished-face-capture .next-step-description {
  display: flex;
  justify-content: start;
  align-items: center;
  gap: 12px;
}

.section-finished-face-capture .spacer {
  width: 2rem;
}

.section-finished-face-capture .next-step-text {
  padding: 0;
  margin: 0;
}

.section-finished-face-capture .desktop-message {
  display: block;
}

@media (max-width:480px) {
  .section-finished-face-capture .container {
    padding: 0;
  }

  .section-finished-face-capture-next-upload .container {
    background: 0 0;
    box-shadow: none;
    justify-content: space-between;
    gap: 12px;
  }

  .section-finished-face-capture .button-wrapper {
    width: 100%;
    padding-top: 18px;
    padding-bottom: 18px;
  }

  .section-finished-face-capture .next-step-box {
    border: 1px solid #eaecf0;
    border-radius: 8px;
    border-width: 1px;
    padding: 16px 16px 16px 16px;
  }

  .section-finished-face-capture .face-capture-description {
    font-weight: 600;
    font-size: 18px;
    line-height: 133%;
    letter-spacing: 0;
    text-align: center;
    font-weight: 600;
    font-size: 18px;
    text-align: center;
    color: #101828;
    padding: 24px 24px 24px 24px;
  }

  .section-finished-face-capture .next-step-heading {
    font-size: 14px;
    font-weight: 500;
  }

  .section-finished-face-capture label {
    font-size: 14px;
  }

  .section-finished-face-capture p {
    font-size: 12px;
  }

  .section-finished-face-capture .mobile-message {
    display: block;
    font-size: 16px;
  }

  .section-finished-face-capture .logo-container {
    background-color: #fff;
    box-shadow: 0 8px 8px -4px #10182808;
    box-shadow: 0 20px 24px -4px #10182814;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    margin: 64px 24px 0 24px;
  }

  .section-finished-face-capture .logo-size {
    height: 140px;
  }

  .section-finished-face-capture .input-container {
    background-color: #fff;
    box-shadow: 0 8px 8px -4px #10182808;
    box-shadow: 0 20px 24px -4px #10182814;
    border-radius: 12px;
    padding: 10px;
    width: 100%;
    padding-right: 16px;
    padding-left: 16px;
    padding-bottom: 0;
  }
}

.section-kyc-failed {
  display: none;
}

.section-country {
  display: none;
  height: 100%;
}

.section-country .gray-900 {
  color: #101828;
}

.section-country .gray-500 {
  color: #667085;
}

.section-country .container {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.section-country .card {
  max-width: 486px!important;
  padding: 32px;
  box-shadow: 0 13.24px 31.77px -5.29px #10182814!important;
}

.section-country .heading {
  font-size: 24px;
}

.section-country .sub-heading {
  font-size: 14px;
}

.section-country .guide-text {
  font-size: 12px;
  margin-bottom: 32px;
}

.section-country .dropdown {
  margin: 32px 0;
}

.section-country span.select2-selection.select2-selection--single {
  height: 52px;
  border-radius: 8px;
  border: 1px solid #eaecf0;
  background-color: #fff!important;
  display: flex;
  align-items: center;
  padding: 0 4px;
}

.section-country .select2-search--dropdown .select2-search__field,
.section-country span#country_name,
.section-country span#select2-countrySelect-container,
.section-country span.select2-selection__placeholder {
  color: #5b5b5b!important;
  font-size: 14px;
  display: flex;
}

.section-country span.select2-selection__arrow {
  height: 100%!important;
}

.section-country #countryList {
  max-height: 300px;
  overflow-y: auto;
}

.section-country #guide_text_mb,
.section-country #proceedBtn_mb,
.section-country button.select2-selection__clear {
  display: none;
}

.section-country #guide_text_pc,
.section-country #proceedBtn_pc {
  display: block;
}

.section-country span#flag {
  font-size: 27px;
  margin-right: .5rem;
}

.section-country .select2-results__option {
  padding: 0 16px;
  display: flex;
  align-items: center;
}

.section-country .select2-results__option--highlighted {
  background-color: #f8f9fa!important;
}

.section-country .select2-search--dropdown .select2-search__field {
  padding: 6px 12px;
}

.section-country .select2-container--default .select2-selection--single .select2-selection__arrow b {
  display: none;
}

.section-country .select2-container--default .select2-selection--single .select2-selection__arrow::after {
  content: url("../images/chevron-down.svg");
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  pointer-events: none;
}

@media (max-width:576px) {
  .section-country {
    padding: 16px;
  }

  .section-country .container {
    justify-content: space-between;
    flex-direction: column;
    height: 100%;
    gap: 12px;
  }

  .section-country .card {
    max-width: 100%!important;
    padding: 12px;
  }

  .section-country .heading {
    font-size: 18px;
  }

  .section-country .sub-heading {
    font-size: 14px;
  }

  .section-country .dropdown {
    margin: 16px 0 0 0;
  }

  .section-country .button-container {
    padding: 20px 16px 16px 16px;
    background: #fff;
    border-radius: 12px;
    width: 100%;
  }

  .section-country #guide_text_pc,
  .section-country #proceedBtn_pc {
    display: none;
  }

  .section-country #guide_text_mb,
  .section-country #proceedBtn_mb {
    display: block;
  }
}

.section-before-we-start-proceed {
  display: none;
}

.section-before-we-start-proceed .container-box {
  max-width: 480px;
  margin: auto;
  text-align: center;
  background-color: #fff;
  padding: 16px;
  border-radius: 16px;
  box-shadow: 0 10px 24px -4px #10182814;
}

.section-before-we-start-proceed .container-box .title {
  font-weight: 600;
  font-size: 24px;
  line-height: 28px;
  color: #101828;
  margin-bottom: 14px;
  letter-spacing: .5px;
}

.section-before-we-start-proceed .container-box .subtitle {
  font-weight: 400;
  font-size: 14px;
  color: #667085;
  margin-bottom: 24px;
  line-height: 133%;
}

.section-before-we-start-proceed .container-box .image-container {
  padding: 5px 15px 5px 15px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.section-before-we-start-proceed .container-box .box-child {
  margin-top: 20px;
}

.section-before-we-start-proceed .container-box .caption {
  margin-top: 0;
}

.section-before-we-start-proceed .container-box .caption-1 {
  font-size: 14px;
  font-weight: 400;
  color: #5b5b5b;
  line-height: 133%;
  margin-top: 22px;
}

.section-before-we-start-proceed .container-box .caption-2 {
  font-size: 12px;
  font-weight: 400;
  color: #667085;
  line-height: 133%;
  margin: 24px 0;
}

.section-before-we-start-proceed .container-box .btn-proceed {
  width: 100%;
  padding: 10px 18px;
  border-radius: 8px;
  margin-top: 16px;
  font-size: 16px;
  font-weight: 600;
  min-height: 44px;
}

@media (max-width:480px) {
  .section-before-we-start-proceed {
    width: 100%;
    padding: 16px;
  }

  .section-before-we-start-proceed .container-box {
    background-color: transparent;
    padding: 0;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    gap: 12px;
  }

  .section-before-we-start-proceed .container-box .image-container {
    padding: 12px;
    box-shadow: 0 10px 24px -4px #10182814;
    padding: 12px;
  }

  .section-before-we-start-proceed .button-container,
  .section-before-we-start-proceed .image-container {
    border-radius: 12px;
    background-color: #fff;
  }

  .section-before-we-start-proceed .button-container {
    padding: 20px 16px;
  }

  .section-before-we-start-proceed .container-box .title {
    font-size: 18px;
    margin-bottom: 8px;
  }

  .section-before-we-start-proceed .container-box .subtitle {
    font-size: 13px;
    margin-bottom: 16px;
  }

  .section-before-we-start-proceed .container-box .caption-1 {
    margin-top: 16px;
    font-size: 12px;
  }

  .section-before-we-start-proceed .container-box .caption-2 {
    margin: 0;
    margin-bottom: 12px;
  }
}

.section-select-document {
  display: none;
}

.section-select-document .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: column;
  padding: 0;
}

.section-select-document .card-wrapper {
  max-width: 460px;
  margin: 60px auto;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 8px 20px rgba(0,0,0,.05);
  padding: 32px;
}

.section-select-document .wrap-option-type {
  gap: 12px;
  display: flex;
  flex-direction: column;
}

.section-select-document .card-title {
  font-size: 24px;
  font-weight: 600;
  text-align: center;
  margin-bottom: 10px;
}

.section-select-document .card-subtitle {
  font-size: 14px;
  color: #6c757d;
  text-align: center;
  margin-bottom: 32px;
}

.section-select-document .id-option {
  border: 1.5px solid var(--main-color);
  border-radius: 8px;
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  background-color: var(--main-color-lightest);
  transition: .3s;
}

.section-select-document .id-option:not(.active):hover {
  background-color: var(--main-color-lightest);
  border-color: var(--main-color);
}

.section-select-document .id-option:not(.active) {
  background-color: #fff;
  border-color: #eaecf0;
}

.section-select-document .id-option.active {
  border-color: var(--main-color);
  background-color: var(--main-color-lightest);
}

.section-select-document .id-option-icon {
  font-size: 20px;
  color: var(--main-color);
}

.section-select-document .id-option span {
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  color: var(--main-color);
}

.section-select-document .id-option input[type=radio] {
  display: none;
}

.section-select-document .badge-recommend {
  background-color: var(--main-color);
  color: #fff;
  font-size: 9px;
  padding: 3px 8px;
  border-bottom-left-radius: 8px;
  border-top-right-radius: 8px;
  top: -1px;
  right: -1px;
}

.section-select-document .button-container {
  text-align: center;
  background-color: #fff;
  border-radius: 12px;
}

.section-select-document .button-container .btn-proceed {
  width: 100%;
  padding: 10px 18px;
  border-radius: 8px;
  margin-top: 16px;
  font-size: 16px;
  font-weight: 600;
  min-height: 44px;
}

.section-select-document .button-container .btn-back-change-country {
  background-color: transparent;
  border: none;
  text-align: center;
}

.section-select-document .button-container .btn-back-change-country:hover {
  color: var(--main-color);
}

.section-select-document .button-container.show-pc {
  display: block;
  padding-top: 64px;
}

.section-select-document .button-container.show-mb {
  display: none;
  padding: 20px 16px;
}

@media (max-width:480px) {
  .section-select-document {
    padding: 16px;
  }

  .section-select-document .button-container.show-pc {
    display: none;
  }

  .section-select-document .button-container.show-mb {
    display: block;
    width: 100%;
  }

  .section-select-document .card-wrapper {
    margin: 0;
    padding: 16px;
  }

  .section-select-document .card-title {
    font-size: 20px;
  }

  .section-select-document .card-subtitle {
    font-size: 13px;
    margin-bottom: 24px;
  }

  .section-select-document .id-option {
    padding: 14px 16px;
  }

  .section-select-document .id-option span {
    font-size: 14px;
  }
}

.section-upload-file {
  display: none;
}

.section-upload-file .container-box {
  width: 100%;
  max-width: 420px;
  margin: auto;
  text-align: center;
  background-color: #fff;
  padding: 32px;
  border-radius: 16px;
  box-shadow: 0 10px 24px -4px #10182814;
}

.section-upload-file .container-box .title {
  font-weight: 600;
  font-size: 24px;
  line-height: 28px;
  color: #101828;
  margin-bottom: 8px;
  letter-spacing: .5px;
}

.section-upload-file .container-box .subtitle {
  font-weight: 400;
  font-size: 14px;
  color: #667085;
  margin-bottom: 32px;
  line-height: 20px;
  letter-spacing: 1px;
}

.section-upload-file .container-box .image-container .image-box {
  border: 1px solid #eaecf0;
  border-radius: 8px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.section-upload-file .container-box .image-container .image-box .input-file {
  display: none;
}

.section-upload-file .container-box .image-container .image-box h3 {
  color: #002e96;
  font-weight: 600;
  font-size: 16px;
  line-height: 20px;
  letter-spacing: .5px;
  margin-top: 10px;
  word-break: break-all;
}

.section-upload-file .container-box .image-container .image-box p {
  color: #667085;
  font-weight: 400;
  font-size: 12px;
  line-height: 18px;
  letter-spacing: .5px;
  margin-bottom: 0;
}

.section-upload-file .container-box .image-container .image-box-0 {
  margin-bottom: 17px;
}

.section-upload-file.passport-upload-area .container-box .image-box-0 {
  width: 100%;
}

.section-upload-file #uploadFileBackLabel,
.section-upload-file #uploadFileFrontLabel {
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: pre;
  max-width: 250px;
}

.section-upload-file .container-box .image-container .wrap-image-upload {
  width: 250px;
  height: 150px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px dotted #eaecf0;
  border-radius: 16px;
}

.section-upload-file .container-box .image-container .wrap-image-upload img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  cursor: pointer;
  border-radius: 12px;
}

.section-upload-file .container-btn {
  max-width: 420px;
  margin: auto;
  text-align: center;
  background-color: #fff;
  padding: 20px;
  border-radius: 16px;
  box-shadow: 0 0 20px rgba(0,0,0,.05);
  margin-top: 10px;
}

.section-upload-file .container-btn .btn-proceed {
  width: 100%;
  padding: 10px 18px;
  background: var(--main-color);
  border-color: var(--main-color);
  border-radius: 8px;
}

.section-upload-file #btnConfirmDocument {
  display: none;
}

.section-upload-file.passport-upload-area .hide-passport {
  display: none!important;
}

@media (min-width:767px) {
  .section-upload-file .container-box {
    max-width: 753px;
  }

  .section-upload-file .image-container {
    flex-direction: row!important;
  }
}

@media (max-width:768px) {
  .section-upload-file {
    width: 100%;
    max-width: 100%;
    padding: 16px;
  }

  .section-upload-file .container-box {
    background: 0 0;
    box-shadow: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .section-upload-file .top-panel {
    border-radius: 12px;
    box-shadow: 0 0 20px rgba(0,0,0,.05);
    background: #fff;
    padding: 20px 16px;
  }

  .section-upload-file .button-container {
    margin: 0;
    background: #fff;
    padding: 20px 16px;
    border-radius: 12px;
  }

  .section-upload-file #btnConfirmDocument {
    margin-top: 20px;
  }

  .section-upload-file .image-container {
    flex-direction: column!important;
  }

  .section-upload-file .image-container .image-box-0 {
    margin-bottom: 0;
  }
}

@media (min-width:768px) {
  .section-upload-file .container-box .image-container .image-box-0 {
    margin-bottom: 0;
  }
}

.section-review-page {
  display: none;
  flex-direction: column;
  width: auto;
  max-width: 886px;
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 10px 24px -4px #10182814;
  padding: 32px 32px 32px 32px;
  align-items: center;
}

.section-review-page .container {
  display: flex;
  flex-direction: column;
  padding: 0;
  gap: 60px;
}

.section-review-page h2 {
  text-align: center;
  margin-bottom: 5px;
}

.section-review-page p.description {
  text-align: center;
  color: #555;
}

.section-review-page .image-container {
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  text-align: center;
  width: 356px;
  height: 213px;
  margin: 0 auto;
  border: 1px dotted gray;
  border-radius: 10px;
}

.section-review-page .image-container img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.section-review-page .form-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: center;
  gap: 32px;
}

.section-review-page .title-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  margin: 0;
  gap: 8px;
}

.section-review-page .title {
  width: 100%;
  font-weight: 600;
  font-size: 24px;
  text-align: center;
  padding: 0;
  margin: 0;
}

.section-review-page .title-description {
  width: 100%;
  font-weight: 400;
  font-size: 14px;
  text-align: center;
  color: #667085;
  padding: 0;
  margin: 0;
}

.section-review-page .form-outer-container {
  font-weight: 400;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0;
  vertical-align: middle;
  display: flex;
  padding: 24px;
  padding-left: 26px;
}

.section-review-page .form-inner-container {
  width: 100%;
  display: flex;
  gap: 24px;
}

.section-review-page .form-column-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.section-review-page .form-title {
  font-weight: 700;
  font-size: 14px;
  line-height: 100%;
  letter-spacing: 0;
}

.section-review-page .form-input-container {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.section-review-page .form-text-container {
  font-weight: 400;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0;
}

.section-review-page .text-style {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
}

.section-review-page .text-style label {
  width: 110px;
}

.section-review-page .text-style input,
.section-review-page .text-style select {
  flex: 1;
}

.section-review-page input {
  font-weight: 400;
  font-size: 14px;
  line-height: 16px;
  letter-spacing: 0;
  vertical-align: middle;
}

.section-review-page input,
.section-review-page select {
  border-width: 1px;
  padding: 7px 16px 7px 16px;
  background-color: #f7f7f7;
  border: 1px solid #e7e9ec;
  border-radius: 8px;
}

.section-review-page .text-style select {
  padding-left: 12px;
}

.section-review-page .button-wrapper {
  text-align: center;
  width: 100%;
}

.section-review-page .approve-button {
  width: 100%;
  font-size: 16px;
  color: #fff;
  background-color: var(--main-color);
  border: none;
  border-radius: 8px;
  border-width: 1px;
  cursor: pointer;
  padding-top: 10px;
  padding-right: 18px;
  padding-bottom: 10px;
  padding-left: 18px;
}

.section-review-page .button-wrapper .btn-common:hover {
  background-color: var(--main-color-darker);
}

.section-review-page .desktop-screen {
  display: flex;
}

.section-review-page .mobile-screen {
  display: none;
}

.section-review-page.passport-upload .form-column-container.back-side {
  display: none;
}

.section-review-page .form-text-container .text-style {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  height: 52px;
}

.section-review-page .input-and-error-container {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.section-review-page .error-message {
  color: red;
  font-size: .85em;
  margin-top: 1px;
  display: block;
}

#reviewPage .text-style.has-error input,
#reviewPage .text-style.has-error select {
  border: 1px solid red;
  box-shadow: 0 0 5px rgba(255,0,0,.5);
}

@media (max-width:991px) {
  .section-review-page {
    flex-direction: column;
    width: 100%;
    background-color: transparent;
    box-shadow: none;
    padding: 24px 16px;
    gap: 0;
  }

  .section-review-page .container {
    gap: 12px;
  }

  .section-review-page .desktop-screen {
    display: none;
  }

  .section-review-page .mobile-screen {
    display: block;
  }

  .section-review-page .upper-container {
    gap: 12px;
    display: flex;
  }

  .section-review-page .title {
    font-size: 18px;
  }

  .section-review-page .title-description {
    font-size: 12px;
  }

  .section-review-page .image-container {
    max-width: 120px;
    height: 80px;
    margin: 0;
  }

  .section-review-page .image-title {
    font-size: 14px;
    font-weight: 700;
  }

  .section-review-page .image-sub-title {
    font-size: 12px;
    font-weight: 500;
    color: #5b5b5b;
  }

  .section-review-page .form-outer-container {
    font-weight: 400;
    font-size: 12px;
    line-height: 20px;
    letter-spacing: 0;
    vertical-align: middle;
    display: flex;
    padding: 0;
    width: 100%;
  }

  .section-review-page .form-inner-container {
    border-radius: 8px;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 0;
  }

  .section-review-page .form-input-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-shadow: 0 20px 24px -4px #10182814;
    border-radius: 12px;
    background-color: #fff;
    padding: 14px;
  }

  .section-review-page .text-style {
    font-size: 12px;
    display: flex;
    align-items: center;
    width: 100%;
    margin: 0;
  }

  .section-review-page .text-style label {
    color: #5b5b5b;
  }

  .section-review-page .text-style input,
  .section-review-page .text-style select {
    font-size: 12px;
    line-height: 20px;
    background-color: #f5f5f5;
    padding: 6px 12px 6px 12px;
  }

  .section-review-page .text-style select {
    padding-left: 8px;
  }

  .section-review-page .button-wrapper {
    text-align: center;
    margin-top: 24px;
    padding: 12px;
    border: 1px solid #eaecf0;
    border-radius: 12px;
    background-color: #fff;
  }

  .section-review-page .approve-button {
    width: 100%;
    font-size: 16px;
    color: #fff;
    background-color: var(--main-color);
    font-weight: 600;
    font-size: 16px;
    line-height: 10.54px;
    letter-spacing: .05px;
    text-align: center;
    vertical-align: middle;
  }

  .section-review-page .cancel-button {
    width: 100%;
    font-weight: 400;
    font-size: 14px;
    line-height: 100%;
    letter-spacing: -.6%;
    text-align: center;
    vertical-align: middle;
    color: var(--main-color);
    background-color: #fff;
    border: none;
    border-radius: 8px;
    border-width: 1px;
    cursor: pointer;
    padding: 12px 0 12px 0;
    margin: 7px 0 7px 0;
  }

  .section-review-page .image-container-mobile {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 121px;
    max-height: 100px;
  }

  .section-review-page .image-container-mobile img {
    width: 100%;
    max-width: 121px;
    object-fit: contain;
    border: 1px solid #ccc;
    border-radius: 6px;
  }

  .section-review-page .header-info {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 500;
    font-size: 12px;
    line-height: 100%;
    letter-spacing: 0;
    color: #5b5b5b;
  }

  .section-review-page .header-description {
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: space-between;
    padding-top: 3px;
  }

  .section-review-page .header-description .header-title {
    font-weight: 500;
    font-size: 14px;
    line-height: 100%;
    letter-spacing: 0;
    color: #000;
  }
}

.section-upload-failed {
  display: none;
  width: 100%;
}

.section-upload-failed .gray-900 {
  color: #101828;
}

.section-upload-failed .gray-500 {
  color: #667085;
}

.section-upload-failed .container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 492px;
}

.section-upload-failed .card {
  padding: 32px;
  box-shadow: 0 13.24px 31.77px -5.29px #10182814!important;
  display: flex;
  align-items: center;
  gap: 32px;
}

.section-upload-failed .upper-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.section-upload-failed img#upload-failed {
  width: 180px;
}

.section-upload-failed .text-container {
  gap: 24px;
}

.section-upload-failed .support-text {
  font-size: 16px;
}

.section-upload-failed .guide-text {
  font-size: 12px;
}

.section-upload-failed .btn-primary {
  height: 44px;
  border: none!important;
  box-shadow: 0 1px 2px 0 #1018280d;
  border-radius: 8px;
}

.section-upload-failed .gap-42 {
  gap: 42px;
}

@media (max-width:576px) {
  .section-upload-failed .container {
    justify-content: space-between;
    flex-direction: column;
    width: 100%;
    padding: 16px;
  }

  .section-upload-failed .upper-container {
    background: #fff;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 20px 24px -4px #10182814;
    max-width: 305px;
  }

  .section-upload-failed .card {
    padding: 0;
    gap: 12px;
    background: 0 0;
    box-shadow: none!important;
    justify-content: space-between;
  }

  .section-upload-failed img#upload-failed {
    width: 130px;
  }

  .section-upload-failed .support-text {
    font-size: 16px;
    width: 265px;
  }

  .section-upload-failed .text-container {
    gap: 8px;
  }

  .section-upload-failed .button-container {
    padding: 20px 16px 16px 16px;
    background: #fff;
    border-radius: 12px;
    width: 100%;
  }
}

.section-upload-success {
  display: none;
}

.section-upload-success .gray-900 {
  color: #101828;
}

.section-upload-success .container {
  width: 100%;
  max-width: 500px;
  background-color: #fff;
  border-radius: 16px;
  box-shadow: 0 0 20px rgba(0,0,0,.1);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 32px;
  gap: 64px;
}

.section-upload-success .top-panel {
  gap: 24px;
  display: flex;
  flex-direction: column;
}

.section-upload-success .image-container {
  display: flex;
  justify-content: center;
}

.section-upload-success img#upload-success {
  width: 300px;
}

.section-upload-success .support-text {
  font-size: 24px;
  width: 365px;
}

@media (max-width:576px) {
  .section-upload-success .container {
    background-color: transparent;
    box-shadow: none;
  }

  .section-upload-success .top-panel {
    padding: 20px;
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 20px 24px -4px #10182814;
  }

  .section-upload-success img#upload-success {
    width: 240px;
  }

  .section-upload-success .support-text {
    font-size: 14px;
    width: 300px;
  }
}

.section-upload-success-next-face-scan {
  display: none;
}

.section-upload-success-next-face-scan .bottom-panel {
  width: 100%;
}

.section-upload-success-next-face-scan .button-wrapper {
  padding-top: 25px;
  padding-bottom: 10px;
}

.section-upload-success-next-face-scan .next-step-section {
  font-weight: 200;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0;
  color: #667085;
  padding: 10px 0 0 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.section-upload-success-next-face-scan .next-step-box {
  border: 1px solid #eaecf0;
  border-radius: 8px;
  border-width: 1px;
  padding: 16px 0 16px 12px;
}

.section-upload-success-next-face-scan .next-step-title {
  display: flex;
  justify-content: start;
  align-items: center;
  gap: 12px;
}

.section-upload-success-next-face-scan .next-step-heading {
  font-weight: 600;
  font-size: 16px;
  line-height: 20px;
  letter-spacing: 0;
  color: var(--main-color);
}

.section-upload-success-next-face-scan .next-step-description {
  display: flex;
  justify-content: start;
  align-items: center;
  gap: 12px;
}

.section-upload-success-next-face-scan .spacer {
  width: 2rem;
}

.section-upload-success-next-face-scan .next-step-text {
  padding: 0;
  margin: 0;
}

@media (max-width:576px) {
  .section-upload-success-next-face-scan {
    width: 100%;
    padding: 16px;
  }

  .section-upload-success-next-face-scan .container {
    justify-content: space-between;
    padding: 0;
    gap: 12px;
  }

  .section-upload-success-next-face-scan .bottom-panel {
    background-color: #fff;
    box-shadow: 0 20px 24px -4px #10182814;
    border-radius: 12px;
    padding: 20px 16px;
    width: 100%;
  }

  .section-upload-success-next-face-scan .next-step-section {
    padding: 0;
  }
}

.section-upload-process {
  display: none;
}

.section-upload-process .gray-900 {
  color: #101828;
}

.section-upload-process .gray-500 {
  color: #667085;
}

.section-upload-process .container {
  display: flex;
  align-items: center;
  justify-content: center;
}

.section-upload-process .card {
  max-width: 486px!important;
  padding: 32px;
  padding-bottom: 64px;
  box-shadow: 0 13.24px 31.77px -5.29px #10182814!important;
  display: flex;
  align-items: center;
  gap: 28px;
}

.section-upload-process img#upload-process {
  width: 300px;
}

.section-upload-process .text-container {
  gap: 1.5rem;
}

.section-upload-process .support-text {
  font-size: 24px;
  line-height: 28px;
}

.section-upload-process .guide-text {
  font-size: 14px;
  width: 349px;
}

.section-upload-process .process-img-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

@keyframes scanLine {
  0% {
    top: 0;
  }

  50% {
    top: 80%;
  }

  100% {
    top: 0;
  }
}

.section-upload-process #upload-process-line {
  position: absolute;
  top: 0;
  left: -10px;
  right: 0;
  animation: scanLine 3.5s ease-in infinite;
  z-index: 2;
}

@media (max-width:576px) {
  .section-upload-process .card {
    padding: 20px;
    gap: 20px;
  }

  .section-upload-process img#upload-process {
    width: 278px;
  }

  .section-upload-process #upload-process-line {
    left: -20px;
  }

  .section-upload-process .text-container {
    gap: 1rem;
  }

  .section-upload-process .support-text {
    font-size: 18px;
  }

  .section-upload-process .guide-text {
    font-size: 12px;
    width: 278px;
  }
}

.section-scan-upload-file {
  width: 100%;
  height: var(--vh);
  background: #000;
  margin: 0;
  display: none;
}

.section-scan-upload-file .container-fluid {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.section-scan-upload-file .back-btn {
  position: relative;
  color: #52abf9;
  font-weight: 400;
  font-size: 14px;
  text-decoration: none;
  display: flex;
  padding: 10px 20px 10px 18px;
}

.section-scan-upload-file .back-btn:hover {
  color: #52abf9!important;
  text-decoration: none;
  opacity: 1;
  background-color: transparent;
}

.section-scan-upload-file #back-btn:before {
  content: "";
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-right: 10px solid #52abf9;
  border-bottom: 6px solid transparent;
  position: absolute;
  top: 14px;
  left: 0;
}

.section-scan-upload-file #capture-icon {
  cursor: pointer;
}

.section-scan-upload-file .back-btn img {
  margin-right: 10px;
}

.section-scan-upload-file .switch-btn-wrapper {
  background-color: #fff;
  border-radius: 8px;
}

.section-scan-upload-file .switch-btn {
  height: 28px;
  border: 1px solid #52abf9;
  border-radius: 8px;
  background-color: #52abf94d;
  color: #52abf9;
}

.section-scan-upload-file .instruction {
  margin-top: 20%;
  text-align: center;
}

.section-scan-upload-file .instruction h4 {
  font-weight: 700;
  font-size: 18px;
  line-height: 20px;
  margin-bottom: 10px;
}

.section-scan-upload-file .instruction p {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .5;
}

.section-scan-upload-file .camera-box {
  margin: 5px auto 0;
  width: 100%;
  max-width: 350px;
  height: 230px;
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  background-color: #000;
}

.section-scan-upload-file #canvas,
.section-scan-upload-file #overlayCanvas {
  position: absolute;
  top: 0;
  left: 0;
  display: none;
}

.section-scan-upload-file video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.section-scan-upload-file .corner {
  width: 75px;
  height: 50px;
  border: 3px solid #00da43;
  position: absolute;
}

.section-scan-upload-file .corner.top-left {
  top: 15px;
  left: 15px;
  border-right: none;
  border-bottom: none;
  border-top-left-radius: 10px;
}

.section-scan-upload-file .corner.top-right {
  top: 15px;
  right: 15px;
  border-left: none;
  border-bottom: none;
  border-top-right-radius: 10px;
}

.section-scan-upload-file .corner.bottom-left {
  bottom: 15px;
  left: 15px;
  border-right: none;
  border-top: none;
  border-bottom-left-radius: 10px;
}

.section-scan-upload-file .corner.bottom-right {
  bottom: 15px;
  right: 15px;
  border-left: none;
  border-top: none;
  border-bottom-right-radius: 10px;
}

.section-scan-upload-file .center-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  opacity: .7;
  z-index: 2;
  pointer-events: none;
}

.section-scan-upload-file .frame-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 20px;
  pointer-events: none;
}

.section-scan-upload-file .capture-btn {
  margin-top: 15px;
}

.section-scan-upload-file .upload-section {
  text-align: center;
  margin: 30px 0;
}

.section-scan-upload-file .upload-section label {
  color: #52abf9;
  font-weight: 600;
  font-size: 14px;
  line-height: 16px;
  padding: 10px 20px;
  letter-spacing: .05px;
  cursor: pointer;
}

.section-scan-upload-file .upload-section small {
  display: block;
  color: #9ca5a9;
  font-weight: 400;
  font-size: 12px;
  margin-top: 12px;
}

.section-scan-upload-file input[type=file] {
  display: none;
}

.section-scan-upload-file .capture-icon .primary-fill {
  fill: #52abf9;
}

.section-check-information {
  width: 100%;
  display: none;
}

.section-check-information .container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 16px;
  gap: 12px;
}

.section-check-information .container-box {
  text-align: center;
  background-color: #fff;
  padding: 12px 14px;
  border-radius: 16px;
  box-shadow: 0 0 20px rgba(0,0,0,.05);
}

.section-check-information .container-box .title-main {
  font-weight: 700;
  font-size: 18px;
  line-height: 20px;
  color: #000;
  margin-bottom: 14px;
  letter-spacing: .5px;
}

.section-check-information .container-box .subtitle {
  font-weight: 400;
  font-size: 12px;
  color: #667085;
  margin-bottom: 10px;
  line-height: 133%;
}

.section-check-information .container-box .image-box {
  margin-top: 30px;
}

.section-check-information .container-box .caption {
  background: #f9f9f9;
  border-radius: 11.5px;
  padding: 11.5px;
  margin-top: 28px;
  text-align: left;
}

.section-check-information .container-box .caption .title {
  font-size: 12px;
  font-weight: 600;
}

.section-check-information .container-box .caption .content {
  font-size: 12px;
  font-weight: 400;
  color: #5b5b5b;
  padding: 4px 0;
}

.section-check-information .container-box .caption .content ul {
  padding-left: 20px;
  margin-bottom: 0;
}

.section-check-information .container-box-2 {
  text-align: center;
  background-color: #fff;
  padding: 20px 16px;
  border-radius: 16px;
  box-shadow: 0 0 20px rgba(0,0,0,.05);
}

.section-check-information .container-box-2 .title {
  text-align: center;
  color: var(--main-color);
  font-weight: 400;
  font-size: 14px;
  padding: 10px 20px;
}

.section-check-information .container-box-2 .btn-start {
  width: 100%;
  padding: 10px 18px;
  background: var(--main-color);
  border-color: var(--main-color);
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  margin-top: 16px;
}

.section-doc-error-page {
  display: none;
  flex-direction: column;
  width: auto;
  max-width: 753px;
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 13.24px 31.77px -5.29px #10182814;
  padding: 32px 32px 32px 32px;
  gap: 60px;
}

.section-doc-error-page .container {
  display: flex;
  flex-direction: column;
  padding: 0;
}

.section-doc-error-page h2 {
  text-align: center;
  margin-bottom: 5px;
}

.section-doc-error-page p.description {
  text-align: center;
  color: #555;
}

.section-doc-error-page .image-container {
  width: 100%;
  max-width: 300px;
  min-height: 200px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
}

.section-doc-error-page .image-container img {
  width: 100%;
  height: 200px;
  object-fit: contain;
  border-radius: 6px;
  border-radius: 15px;
}

.section-doc-error-page .form-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.section-doc-error-page .title-container {
  width: 100%;
  margin: 0;
  gap: 8px;
  margin-bottom: 20px;
  text-align: center;
}

.section-doc-error-page .title {
  width: 100%;
  font-weight: 600;
  font-size: 24px;
  text-align: center;
  padding: 0;
  margin: 0 0 10px 0;
}

.section-doc-error-page .title-description {
  width: 100%;
  font-weight: 400;
  font-size: 14px;
  text-align: center;
  color: #667085;
  padding: 0;
  margin: 0;
}

.section-doc-error-page .title-description.error {
  color: #e74747;
  background: #ffe0e0;
  display: block;
  padding: 6px 8px;
  border-radius: 6px;
  width: fit-content;
  margin: 0 auto;
}

.section-doc-error-page .form-outer-container {
  font-weight: 400;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0;
  vertical-align: middle;
  display: flex;
  padding-bottom: 24px;
}

.section-doc-error-page .form-inner-container {
  width: 100%;
  display: flex;
  gap: 24px;
  justify-content: center;
}

.section-doc-error-page .form-column-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 20px;
  border: 1px solid #eaecf0;
  border-radius: 8px;
}

.section-doc-error-page .form-title {
  font-weight: 700;
  font-size: 14px;
  line-height: 100%;
  letter-spacing: 0;
}

.section-doc-error-page .form-text-container {
  font-weight: 400;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0;
}

.section-doc-error-page .button-wrapper {
  text-align: center;
}

.section-doc-error-page .approve-button {
  width: 100%;
  height: 44px;
  font-size: 16px;
  color: #fff;
  background-color: var(--main-color);
  border: none;
  border-radius: 8px;
  border-width: 1px;
  cursor: pointer;
  padding-top: 10px;
  padding-right: 18px;
  padding-bottom: 10px;
  padding-left: 18px;
}

.section-doc-error-page .button-wrapper button:hover {
  background-color: var(--main-color-darker);
}

.section-doc-error-page .desktop-screen {
  display: flex!important;
}

.section-doc-error-page .mobile-screen {
  display: none!important;
}

.section-doc-error-page .error-label {
  width: 100%;
  max-width: 310px;
  background: #ffe0e0;
  margin: 0 auto;
  border-radius: 6px;
  padding: 6px 11.5px 6px 11.5px;
  font-family: Inter,sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 100%;
  letter-spacing: 0;
  color: #e74747;
}

.section-doc-error-page .form-input-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.section-doc-error-page.passport-upload .form-column-container.back-side {
  display: none;
}

@media (max-width:768px) {
  .section-doc-error-page .desktop-screen {
    display: none!important;
  }

  .section-doc-error-page .mobile-screen {
    display: block!important;
    font-size: 14px;
  }

  .section-doc-error-page {
    display: none;
    flex-direction: column;
    width: 100%;
    background-color: transparent;
    box-shadow: none;
    padding: 16px;
    gap: 0;
  }

  .section-doc-error-page .container {
    gap: 12px;
  }

  .section-doc-error-page .form-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
  }

  .section-doc-error-page .form-outer-container {
    font-weight: 400;
    font-size: 12px;
    line-height: 20px;
    letter-spacing: 0;
    vertical-align: middle;
    display: flex;
    padding: 0;
    width: 100%;
  }

  .section-doc-error-page .form-inner-container {
    border-radius: 8px;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .section-doc-error-page .form-column-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-shadow: 0 20px 24px -4px #10182814;
    border-radius: 12px;
    padding: 15px 0;
    background-color: #fff;
  }

  .section-doc-error-page .button-wrapper {
    text-align: center;
    padding: 12px;
    border: 1px solid #eaecf0;
    border-radius: 12px;
    background-color: #fff;
  }

  .section-doc-error-page .approve-button {
    width: 100%;
    font-weight: 600;
    font-size: 16px;
    line-height: 10.54px;
    letter-spacing: .05px;
    text-align: center;
    vertical-align: middle;
    color: #fff;
    background-color: var(--main-color);
  }

  .section-doc-error-page .image-container-mobile {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 121px;
    max-height: 100px;
  }

  .section-doc-error-page .image-container-mobile img {
    width: 100%;
    max-width: 121px;
    object-fit: contain;
    border: 1px solid #ccc;
    border-radius: 6px;
  }

  .section-doc-error-page .header-info {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 500;
    font-size: 12px;
    line-height: 100%;
    letter-spacing: 0;
    color: #5b5b5b;
  }

  .section-doc-error-page .header-description {
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: space-between;
    padding-top: 3px;
  }

  .section-doc-error-page .header-title {
    font-weight: 500;
    font-size: 14px;
    line-height: 100%;
    letter-spacing: 0;
    color: #000;
  }

  .section-doc-error-page .title {
    width: 100%;
    font-weight: 700;
    font-size: 18px;
    line-height: 20px;
    letter-spacing: 0;
    text-align: center;
  }

  .section-doc-error-page .title-description {
    width: 100%;
    font-weight: 400;
    font-size: 12px;
    line-height: 20px;
    letter-spacing: 0;
    text-align: center;
  }
}

input[type=date] {
  text-align: left!important;
  direction: ltr;
  text-align-last: left;
}

.highlight-text {
  color: var(--main-color);
}

.section-switch-device {
  width: 100%;
  display: none;
  flex-direction: column;
  align-items: center;
}

.section-switch-device .container-wrapper {
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 8px -4px #10182808,0 20px 24px -4px #10182814;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 20px 25px 20px;
  min-width: 345px;
}

.section-switch-device .back-button {
  font-family: Inter,sans-serif;
  border: none;
  margin-bottom: 24px;
  background-color: transparent;
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--main-color);
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
  line-height: 24px;
  letter-spacing: 0;
  width: 100%;
  max-width: 350px;
  justify-content: flex-start;
}

.section-switch-device .header {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 20px 0;
}

.section-switch-device .heading {
  font-family: Inter,sans-serif;
  font-weight: 600;
  font-size: 24px;
  line-height: 28px;
  letter-spacing: 0;
  text-align: center;
}

.section-switch-device .subheading {
  font-family: Inter,sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0;
  text-align: center;
}

.section-switch-device .steps-wrapper {
  border-radius: 12px;
  padding: 20px;
  background: #fafafa;
  text-align: center;
  margin-top: 12px;
}

.section-switch-device .scan-description {
  font-family: Inter,sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 20px;
  color: #444;
  margin: 0;
}

.section-switch-device .or-label {
  font-family: Inter,sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  margin: 16px 0;
}

.section-switch-device .instructions-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 12px;
  padding: 15px 5px;
  margin: 0;
  background: #fafafa;
}

.section-switch-device .instructions-text {
  font-family: Inter,sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 20px;
  color: #444;
  margin: 0 0 10px 0;
}

.section-switch-device .copy-url-container {
  width: calc(100% - 20px);
  border-radius: 4.51px;
  padding: 9.02px;
  border: 1px solid #e9e6eb;
  background: #fff;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.section-switch-device .copy-url-input {
  flex-grow: 1;
  font-family: Inter,sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 20px;
  letter-spacing: 0;
  vertical-align: middle;
  border: none;
  color: #9f9f9f;
  text-overflow: ellipsis;
}

.section-switch-device #iconURLCopied {
  display: none;
}

.section-switch-device .desktop-screen {
  display: block!important;
}

.section-switch-device .mobile-screen {
  display: none!important;
}

@media (max-width:768px) {
  .section-switch-device .desktop-screen {
    display: none!important;
  }

  .section-switch-device .mobile-screen {
    display: block!important;
  }

  .section-switch-device {
    width: 100%;
    flex-direction: column;
    align-items: center;
    padding: 0 0;
  }

  .section-switch-device .heading {
    font-family: Inter,sans-serif;
    font-weight: 600;
    font-size: 22px;
    line-height: 28px;
    letter-spacing: 0;
    text-align: center;
  }

  .section-switch-device .subheading {
    font-family: Inter,sans-serif;
    font-weight: 300;
    font-size: 12px;
    line-height: 20px;
    letter-spacing: 0;
    text-align: center;
  }

  .section-switch-device .scan-description {
    min-width: 270px;
    font-family: Inter,sans-serif;
    font-weight: 400;
    font-size: 12px;
    line-height: 20px;
    color: #444;
    margin: 0;
  }
}

.switch-btn-wrapper {
  background-color: #fff;
  border-radius: 8px;
  z-index: 2;
}

.switch-btn {
  height: 28px;
  line-height: 24px;
  border: 1px solid var(--main-color);
  border-radius: 8px;
  background-color: var(--main-color-lightest);
  color: var(--main-color);
}

.swal-confirm-custom {
  padding-bottom: 30px;
}