/* COMMON STYLES */

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

:root {
  /* Black */
  --main-black: #0E0E0E;
  /* Blue */
  --main-blue: #006bff;
  --md-blue: #0495f0;
  --lt-blue: #0ac3e3;
  /* Gray */
  --main-gray: #D3D4D5;
  --lt-gray: #E7E8EA;
  --md-gray: #DEDFE2;
  --dark-gray: #040413;
  /* REd */
  --main-red: #F15045;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  color: var(--main-black);
  font-size: 16px;
  font-family: 'Roboto', sans-serif;
}

body.ios .pclogo {
  height: 106px;
  padding-top: 40px;
}

a,
a:visited {
  color: var(--main-blue);
  text-decoration: none;
}

/* LOGOTYPE */

.pclogo {
  position: fixed;
  background: white;
  top: 0;
  left: 0;
  width: 100%;
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid var(--main-blue);
}

.pclogo img {
  height: 48px;
}

.hamburger {
  display: none !important;
}

.techspec,
.log-area,
.menu,
.stlogo,
.footer,
#enter-qr {
  display: none;
}

/* TYPOGRAPHY */

p {
  margin-bottom: 12px;
}

.h-1 {
  font-size: 20px;
  margin-bottom: 12px;
  font-weight: bold;
}

.w-md {
  font-weight: 500;
}

.sub-h {
  margin-bottom: 24px;
}

.sign-in a {
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  color: var(--dark-gray);
}

.sign-in:hover {
  text-decoration: underline;
}

/* INPUT FIELDS */

input {
  display: block;
  padding: 24px 16px 12px 16px;
  border-radius: 12px;
  width: 100%;
  outline: none;
  border: none;
  background-color: var(--main-gray);
  font-size: 16px;
}

input.error {
  border: 2px solid var(--main-red)
}

input.error~i {
  color: var(--main-red)
}

.input-field {
  position: relative;
  margin-bottom: 24px;
}

input~i {
  font-size: 14px;
  margin-top: 8px;
  display: block;
}

.input-field input:not(:placeholder-shown)~.input-ph,
.input-field input:focus~.input-ph {
  transform: translateY(-20px);
  color: #888;
  font-size: 14px;
}

.input-ph {
  position: absolute;
  top: 26px;
  left: 16px;
  transform: translate(0px, -50%);
  color: var(--dark-gray);
  transition: all 0.3s ease;
  pointer-events: none;
}

/* BUTTONS */

.btn,
.btn input {
  display: block;
  padding: 18px;
  border-radius: 12px;
  width: 100%;
  outline: none;
  border: none;
  cursor: pointer;
  text-align: center;
  font-weight: 600;
}


.btn:has(input) {
  padding: 0;
  background: none !important;
}

.btn a {
  text-decoration: none;
  display: block;
}

.primary {
  color: white;
  background-color: var(--main-blue);
}

.primary a {
  color: white;
}

.primary:hover,
.primary input:hover {
  background-color: var(--md-blue);
}

.primary:active,
.primary input:active {
  background-color: var(--md-blue);
}

.btn.secondary,
.btn.secondary input[type='submit'] {
  color: var(--dark-gray);
  background-color: var(--main-gray);
}

.secondary a {
  color: var(--dark-gray);
}

.secondary:hover,
.secondary input:hover {
  background-color: var(--md-gray);
}

.secondary:active,
.secondary input:active {
  background-color: var(--lt-gray);
}

.main {
  display: flex;
  min-height: calc(100vh - 96px);
  align-items: center;
  justify-content: center;
  text-align: center;
  max-width: 600px;
  margin: 0 auto;
  margin-top: 96px;
  flex-direction: column;
}

.main .container {
  width: 100%;
  padding: 12px;
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
}

.main form {
  text-align: left;
}

form#enter-form {
  /* padding: 24px; */
  /* padding-top: 60px; */
  padding-bottom: 60px;
  padding-left: 24px;
  padding-right: 24px;
  border: 1px solid var(--main-gray);
  border-radius: 12px;
  margin-top: 50px;
}

.form-container~.text {
  transform: translateY(-48px);
}

.form-container~.text a {
  text-decoration: none;
}

.login-email-header {
  position: absolute;
  top: 14px !important;
  left: 50% !important;
  font-size: 16px !important;
  background-color: white;
  padding: 0.5em;
  color: #ccc;
  transform: translateX(-50%);
  color: var(--main-black) !important;
  width: 100%;
  text-align: center;
}

form i {
  font-style: normal;
}

.kyc_switcher {
  display: none;
}

i[data-pc='registerDescEmail'] {
  display: none;
}

section#manual_form .text .heading {
  margin-bottom: 24px;
}

section#manual_form .text .small {
  display: none;
}

/* TOGGLE */

#choose_buttons {
  position: relative;
}

#toggle_block {
  display: none;
  position: absolute;
  width: 80%;
  bottom: 65px;
  left: 50%;
  transform: translateX(-50%);
  padding: 12px;
  background-color: #fff;
  box-shadow: 0 3px 15px rgba(0, 0, 0, 0.3);
  border-radius: 12px;
}

/* RES AREA */
body .results {
  position: fixed;
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
  z-index: 11;
  opacity: 0;
  pointer-events: none;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background-color: #fafafa;
  transition: opacity 0.3s ease;
}

body .results .res-content {
  max-width: 300px;
  overflow-y: auto;
  overflow-x: hidden;
  color: #888;
}

body .results .res-content p {
  margin-bottom: 2em;
}

body .results .res-content p img {
  width: 100%;
}

body .results .res-content .spoiler_body {
  max-height: 0px;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

body .results .res-content .spoiler_body.visible {
  max-height: 1000px;
}

/* RES AREA ACTIVE */
body.results-active .main .container {
  transform: perspective(900px) rotate3d(20, -45, 0, 45deg) scale(0.9);
  opacity: 0;
  pointer-events: none;
  transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

body.results-active .results {
  opacity: 1;
  pointer-events: all;
}

/* LK */
.greeting {
  display: flex;
  align-items: center;
  margin-bottom: 32px;
}

.greeting span {
  text-align: left;
  flex: 7;
}

#user_nav,
.tr_pdf_choose,
p.heading.pdf,
#tr_type_container,
#pdf-form {
  display: none;
}

.exit-link {
  flex: 3;
  display: block;
  padding: 8px;
  background-color: var(--main-gray);
  border-radius: 8px;
  text-decoration: none;
  color: var(--dark-gray);
  font-weight: 500;
}

.exit-link:hover {
  background-color: var(--md-gray);
}

.exit-link:active {
  background-color: var(--lt-gray);
}

.exit-link img {
  display: none;
}

.demo .h-1 {
  text-align: left;
  margin-bottom: 24px;
}

.footer-ext {
  padding: 1em;
}

body.ios .footer-ext {
  padding: 1em 1em 2em 1em;
}

.enter-btn {
  display: none;
}

.mobile__btn{
  border: 1px solid #006bff;
}

.small.italic {
  margin-top: 7px;
}