/*
 * app page
 */
/*
 * variables
 */
 .sign-in {
  padding: 40px 0;
}
.tabs {
  max-width: 540px;
  margin: auto;
}
.tab__title {
  margin: 0 0 15px;
  font-weight: 700;
  font-size: 24px;
}
.tab__subtitle {
  margin: 0 0 15px;
  font-size: 13px;
  color: #666f8f;
}
.tab__subtitle {
  margin: 0 0 15px;
  font-weight: 600;
  font-size: 15px;
  color: #232323;
}
.tab__description {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  margin: 0 0 15px;
  font-size: 13px;
  color: #666f8f;
}
.tab__content {
  margin: 15px 0 0;
  padding: 15px;
  background: #fff;
  border-radius: 10px;
}
.tab__content > *:last-child {
  margin: 0;
}
.tab .input-container {
  margin: 0 0 15px;
}
.tab .btn {
  width: 100%;
  height: 50px;
  margin: 0 0 15px;
  font-weight: 600;
  font-size: 16px;
  color: #fff;
  border-radius: 10px;
}
.tab .action-link {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin: 0 0 15px;
}
.tab .action-link .link {
  font-weight: 500;
  font-size: 12px;
  line-height: 1.3;
  color: var(--color-primary);
  text-align: center;
}
.tab .phone-recovery {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.tab .phone-recovery .icon {
  display: inline-block;
  vertical-align: margin;
  width: 12px;
  height: 11px;
  margin: 0 2px 0 0;
  background: url("../images/icons/attention.svg") no-repeat center;
}
.tab .phone-recovery .text {
  font-weight: 500;
  font-size: 12px;
  line-height: 1.3;
  color: #c1c1c1;
  text-align: center;
}
.tab .message-answer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.tab .message-answer__icon {
  -ms-flex-negative: 0;
      flex-shrink: 0;
}
.tab .message-answer__icon.note {
  width: 20px;
  height: 20px;
  margin: 0 10px 0 0;
  background: url("../images/icons/note.svg") no-repeat center;
}
.tab .message-answer__text {
  font-size: 13px;
  color: #666f8f;
  line-height: 1.3;
}
.tab .hint {
  margin: 10px 0 0;
  font-size: 13px;
  color: #666f8f;
}
.tab .upload-photo {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  margin: 0 0 15px;
}
@media (min-width: 768px) {
  .tab .upload-photo {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
  }
}
.tab .upload-photo label[for="file"] {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  margin: 0 auto;
}
@media (min-width: 768px) {
  .tab .upload-photo label[for="file"] {
    width: auto;
    margin: 0;
  }
}
.tab .upload-photo input:valid ~ .photo-label {
  background: #d9d9d9;
}
.tab .photo-label {
  width: 100%;
  height: 170px;
  margin: 0 auto 15px;
  border-radius: 15px;
  background: #d9d9d9;
  overflow: hidden;
  cursor: pointer;
}
@media (min-width: 768px) {
  .tab .photo-label {
    margin: 0 42px 0 0;
  }
}
.tab .photo-label[for="file-1"] {
  background: #f5f5f5 url("../images/pictures/passport_1@2x.png") no-repeat center;
  background-size: 96px;
}
.tab .photo-label[for="file-2"] {
  background: #f5f5f5 url("../images/pictures/passport_2@2x.png") no-repeat center;
  background-size: 174px;
}
.tab .photo-label[for="file-3"] {
  background: #f5f5f5 url("../images/pictures/selfie@2x.png") no-repeat center bottom;
  background-size: 148px;
}
.tab .photo-label[for="file-4"] {
  background: #f5f5f5 url("../images/pictures/card@2x.png") no-repeat center;
  background-size: 172px;
}
.tab .photo-preview {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.tab .buttons-container {
  margin: auto;
}
@media (min-width: 768px) {
  .tab .buttons-container {
    max-width: 180px;
    margin: 0;
  }
}
.tab .buttons-container .btn {
  width: 100%;
  height: 50px;
  margin: 0 0 10px;
  font-weight: 500;
  font-size: 14px;
  background: var(--color-primary-muted);
}
.tab .buttons-container .btn:hover {
  background: var(--color-primary);
  color: #FFFFFF;
  border: none;
}
.tab .buttons-container .btn:last-child {
  margin: 0;
}
.tab .buttons-container .btn.btn-transparent {
  background: #fff;
  border: 2px solid var(--color-primary-muted);
  color: var(--color-primary-muted);
}
.tab .buttons-container .btn.btn-transparent:hover {
  border: 2px solid var(--color-primary);
  color: var(--color-primary);
}
/*
 * reset
 */
/*
 * variables
 */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 30px #fff inset !important;
  -webkit-background-clip: text;
  -webkit-transition: background-color 5000s ease-in-out 0s;
  transition: background-color 5000s ease-in-out 0s;
}
input[type=number] {
  -moz-appearance: textfield;
}
.swiper {
  overflow: visible;
}
.modal-backdrop {
  background: rgba(36,36,36,0.7);
}
.modal-backdrop.show {
  opacity: 1;
}
.modal-dialog {
  pointer-events: auto;
}
.modal-header,
.modal-footer {
  border: none;
}
.btn-close {
  opacity: unset;
}
.suggestions-suggestions {
  margin: -1px 0 0;
  padding: 10px 10px 0;
  border: 1px solid #c1c1c1;
  border-radius: 5px;
}
.suggestions-hint {
  margin: 0 0 10px;
  font-size: 12px;
  color: #c1c1c1;
}
.suggestions-suggestion {
  line-height: 1.2;
  margin: 0 0 10px;
  font-size: 13px;
  color: #232323;
  cursor: pointer;
}
.suggestions-suggestion:last-child {
  margin: 0;
}
.suggestions-nowrap strong {
  color: var(--color-primary-muted);
}