@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap");

.verificated-center {
  opacity: 0;
  z-index: 0;
  margin: 3em;
  display: grid;
}

.verificated-center.active {
  opacity: 100;
  z-index: 1;
}

.verificated-message {
  font-family: "Montserrat", 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";
}

.verificated-description {
  font-size: small;
  margin-left: 5em;
  font-family: "Montserrat", 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";
}

.verificated-center-identity {
  font-family: "Montserrat", 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: small;
  background-color: rgb(249, 250, 252);
  margin: 0 2em;
  display: flex;
  align-items: center;
  padding: 1em;
  grid-column: 2/4;
  grid-row: 1;
}

.usr-image {
  padding-right: 1em;
  height: 2.4em;
}

.verificated-expedition {
  color: rgb(107, 112, 119);
  font-family: "Montserrat", 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: small;
  display: flex;
  grid-column: 2;
  grid-row: 2;
  padding: 0.5em;
  margin: 1em 1.5em;
}

.date-expedition {
  font-family: "Montserrat", 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: small;
  display: flex;
  grid-column: 2;
  grid-row: 2;
  padding: 0.5em;
  margin: 2.5em 1.5em;
  color: rgb(78, 58, 70);
}

.verificated-caduc {
  color: rgb(107, 112, 119);
  font-family: "Montserrat", 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: small;
  display: flex;
  grid-column: 3;
  grid-row: 2;
  padding: 0.5em;
  margin: 1em 0.5em;
}

.date-caduc {
  color: rgb(78, 58, 70);
  font-family: "Montserrat", 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: small;
  display: flex;
  grid-column: 3;
  grid-row: 2;
  padding: 0.5em;
  margin: 2.5em 0.5em;
}

.verificated-button {
  cursor: pointer;
  z-index: 1;
  font-family: "Montserrat", 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: small;
  border: solid 0.2em;
  border-radius: 0.5em;
  border-color: rgb(238, 240, 237);
  width: 19em;
  padding: 0.5em;
  margin: 2em 2em;
  display: flex;
  justify-content: center;
  grid-column: 2;
  grid-row: 4;
  background-color: rgb(238, 240, 237);
}

.verificated-button:hover {
  background-color: rgb(220, 220, 220);
}

.verificated-button:active {
  border-color: rgb(212, 212, 212);
}

.verificated-button.hide {
  opacity: 0;
  z-index: 0;
  cursor:default;
}


.verificated-back-button {
  cursor: pointer;
  z-index: 1;
  font-family: "Montserrat", 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: small;
  border: solid 0.2em;
  border-radius: 0.5em;
  border-color: rgb(238, 240, 237);
  width: 19em;
  padding: 0.5em;
  margin: 0 2em;
  display: flex;
  justify-content: center;
  grid-column: 2;
  grid-row: 3;
  background-color: rgb(238, 240, 237);
}

.verificated-back-button:hover {
  background-color: rgb(220, 220, 220);
}

.verificated-back-button:active {
  border-color: rgb(212, 212, 212);
}

.center {
  font-size: 16px;
  z-index: 1;
  position: absolute;
  top: 67%;
  left: 52%;
  margin-top: -12.5em;
  margin-left: -12.5em;
  width: 21.87em;
  height: 18.75em;
  background: rgb(229, 231, 234);
  box-shadow: 8px 10px 15px 0 rgba(0, 0, 0, 0.2);
  border-radius: 3px;
  font-family: "Montserrat", 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";
}

.center.done {
  opacity: 0;
  z-index: 0;
}

.message {
  font-size: 16px;
  z-index: 0;
  align-items: center;
  display: flex;
  justify-content: center;
  position: absolute;
  padding-top: 0.62em;
  top: 100%;
  left: 52%;
  margin-top: -12.5em;
  margin-left: -12.5em;
  width: 21.87em;
  height: 6.25em;
  background: rgb(229, 231, 234);
  box-shadow: 8px 10px 15px 0 rgba(0, 0, 0, 0.2);
  border-radius: 3px;
  font-family: 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";

  opacity: 0;
}

.message.active {
  z-index: 1;
  opacity: 100;
}
.message.check {
  border: 5px solid;
  border-color: rgb(76, 168, 152);
  color: rgb(76, 168, 152);
}
.message.err {
  border: 5px solid;
  border-color: rgb(215, 90, 87);
  color: rgb(215, 90, 87);
}

.message-text {
  margin: auto;
  font: bold;
  font-family: 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";
}

.title {
  font-size: 1em;
  color: #676767;
  line-height: 3.12em;
  height: 3.12em;
  border-bottom: 1px solid #d8d8d8;
  text-align: center;
}

.dropzone {
  position: absolute;
  z-index: 1;
  box-sizing: border-box;
  display: table;
  table-layout: fixed;
  width: 12.5em;
  height: 6.25em;
  top: 5.37em;
  left: 4.68em;
  border: 1px dashed #a4a4a4;
  border-radius: 3px;
  text-align: center;
  overflow: hidden;
  color: #676767;
}
.dropzone.is-dragover {
  border-color: #666;
  background: #eee;
}
.dropzone .content {
  display: table-cell;
  vertical-align: middle;
}

.img-status {
  margin: 0.62em;
  height: 2.5em;
  width: 2.5em;
}

.dropzone .upload {
  margin: 6px 0 0 2px;
}
.dropzone .filename {
  display: block;
  color: #676767 bold;
  font-size: 0.87em;
  line-height: 1.12em;
}
.dropzone .input {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
}
.input {
  cursor: pointer;
}
.upload-btn {
  color: white;
  position: absolute;
  width: 140px;
  height: 40px;
  left: 101px;
  bottom: 1.5em;
  background: rgb(14, 74, 109);
  border-radius: 15px;
  text-align: center;
  line-height: 40px;
  font-size: 0.87em;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}
.upload-btn:hover {
  box-shadow: #0000;
}

.syncing {
  position: absolute;
  top: 109px;
  left: 134px;
  opacity: 0;
}
.syncing.active {
  -webkit-animation: syncing 3.2s ease-in-out;
  animation: syncing 3.2s ease-in-out;
}

.done {
  position: absolute;
  top: 112px;
  left: 132px;
  opacity: 0;
}
.done.active {
  -webkit-animation: done 0.5s ease-in 3.2s;
  animation: done 0.5s ease-in 3.2s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.container-sync {
  position: absolute;
  top: 47%;
  left: 50%;
  transform: translate(-50%, -50%);
  transform-style: preserve-3d;
  perspective: 2000px;
  transform: rotateX(-30deg) rotateY(-45deg);
  opacity: 0;
}
.container-sync.active {
  opacity: 1;
}

.holder {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transform-style: preserve-3d;
  transform: translate3d(0em, 3em, 1.5em);
}
.holder:last-child {
  transform: rotateY(-90deg) rotateX(90deg) translate3d(0, 3em, 1.5em);
}
.holder:first-child {
  transform: rotateZ(-90deg) rotateX(-90deg) translate3d(0, 3em, 1.5em);
}
.holder:nth-child(1) .box {
  background-color: #1fbcd3;
}
.holder:nth-child(1) .box:before {
  background-color: #126d7a;
}
.holder:nth-child(1) .box:after {
  background-color: #1894a7;
}
.holder:nth-child(2) .box {
  background-color: #cbe2b4;
}
.holder:nth-child(2) .box:before {
  background-color: #98c66a;
}
.holder:nth-child(2) .box:after {
  background-color: #b2d48f;
}
.holder:nth-child(3) .box {
  background-color: #f6b6ca;
}
.holder:nth-child(3) .box:before {
  background-color: #eb5b88;
}
.holder:nth-child(3) .box:after {
  background-color: #f089a9;
}

.box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transform-style: preserve-3d;
  animation: ani-box 6s infinite;
  width: 3em;
  height: 3em;
}
.box:before,
.box:after {
  position: absolute;
  width: 100%;
  height: 100%;
  content: "";
}
.box:before {
  left: 100%;
  bottom: 0;
  transform: rotateY(90deg);
  transform-origin: 0 50%;
}
.box:after {
  left: 0;
  bottom: 100%;
  transform: rotateX(90deg);
  transform-origin: 0 100%;
}

@keyframes ani-box {
  8.33% {
    transform: translate3d(-50%, -50%, 0) scaleZ(2);
  }
  16.7% {
    transform: translate3d(-50%, -50%, -3em) scaleZ(1);
  }
  25% {
    transform: translate3d(-50%, -100%, -3em) scaleY(2);
  }
  33.3% {
    transform: translate3d(-50%, -150%, -3em) scaleY(1);
  }
  41.7% {
    transform: translate3d(-100%, -150%, -3em) scaleX(2);
  }
  50% {
    transform: translate3d(-150%, -150%, -3em) scaleX(1);
  }
  58.3% {
    transform: translate3d(-150%, -150%, 0) scaleZ(2);
  }
  66.7% {
    transform: translate3d(-150%, -150%, 0) scaleZ(1);
  }
  75% {
    transform: translate3d(-150%, -100%, 0) scaleY(2);
  }
  83.3% {
    transform: translate3d(-150%, -50%, 0) scaleY(1);
  }
  91.7% {
    transform: translate3d(-100%, -50%, 0) scaleX(2);
  }
  100% {
    transform: translate3d(-50%, -50%, 0) scaleX(1);
  }
}

@-webkit-keyframes syncing {
  0% {
    transform: rotate(0deg);
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: rotate(360deg);
    opacity: 0;
  }
}

@keyframes syncing {
  0% {
    transform: rotate(0deg);
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: rotate(360deg);
    opacity: 0;
  }
}
@-webkit-keyframes done {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes done {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* X-Large devices (large desktops, less than 1400px)*/
@media (max-width: 1399.98px) {
  .center {
    top: 64%;
  }
}

/* Large devices (desktops, less than 1200px)*/
@media (max-width: 1199.98px) {
  .center {
    top: 61%;
  }
  .message {
    top: 97%;
  }
}

/* Medium devices (tablets, less than 992px)*/
@media (max-width: 991.98px) {
  .center {
    top: 64%;
  }
  .message {
    top: 100%;
  }
}

/* Small devices (landscape phones, less than 768px)*/
@media (max-width: 767.98px) {
  .center {
    top: 58%;
  }
  .message {
    top: 94%;
  }
}

/* X-Small devices (portrait phones, less than 576px)*/
@media (max-width: 575.98px) {
  .center {
    top: 54%;
  }
  .message {
    top: 90%;
  }
}

/* XX-Large devices (larger desktops)*/
/* No media query since the xxl breakpoint has no upper bound on its width*/