html[data-theme="dark"] {
    --bg-color: #222222;
    --text-color: #D2DBDB;
    --verify_button-text-color: black;
    --modal-text-color: white;
    --text-link: #949494;
    --text-observe:#e0e0e0;
    --text-observe-2:#e0e0e0;
    --id-color: #D2DBDB;
    --border-color: #7B7B7B;
    --modal-border-color: #979797;
    --border-color-checkbox: #EAEAEA;
    --checkbox: #515151;
    --verify_button-color: #ff6633;
    --verify_button-color-hover: #8a7de2;
    --verify_button-os: #3d3d3d;
    --verify_button-os-border: #a9a9a9;
}
html[data-theme="light"] {
    --bg-color: white;
    --text-color: black;
    --verify_button-text-color: black;
    --modal-text-color: white;
    --text-link:#2e2d2d;
    --text-observe:#000000;
    --text-observe-2:#4f4f4f;
    --id-color: #7c7c7c;
    --border-color: #E2E2E2;
    --modal-border-color: #cbcbcb;
    --border-color-checkbox: #D7D7D7;
    --checkbox: white;
    --verify_button-color: #ff6633;
    --verify_button-color-hover: #070033;
    --verify_button-os: #eae9e987;
    --verify_button-os-border: #dbdbdbc4;
}

html {
  font-size: 16px;
}

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

body {
  font-family: 'Roboto', sans-serif;
  background-color: var(--bg-color);
  color: var(--text-color);
  overflow-x: hidden;
  overflow-y: hidden;
}
.back{
  position: absolute;
}

/* Recaptcha section */
.recaptcha-section {
  display: flex;
  position: absolute;
  width: 100vw;
  height: 100vh;
  opacity: 1;
  transition: opacity 0.5s ease;
  z-index: 10;
  justify-content: center;
  align-items: center;
  background-color: var(--bg-color);
}

.main {
  position: relative;
  flex-direction: column;
  justify-items: left;
  width: auto;
  height: auto;
  padding-left: 7%;
}

.owner {
  display: block;
  font-size: 1vh;
  height: auto;
  gap: 0px;
  margin-bottom: 35px;
  line-height: 1.5;
}

.owner-link {
  text-decoration: none;
  color: var(--text-color);
  font-size: 44px !important;
  font-weight: 400;
}
.owner span{
  font-size: 22px;
  font-weight: 500;
}
.owner-link-footer{
  text-decoration: none;
  color: var(--text-color);
  font-size: 22px;
  font-weight: 500;
  text-decoration: none;
  margin-top: 20px;
  display: block;
}
.owner-link-footer a{
  text-decoration: none;
  color: inherit;
}
.owner-link:hover,
.owner-link-footer a:hover {
  text-decoration: underline;
  text-decoration-thickness: 0.2vh;
}

.captcha {
  position: relative;
  display: none;
  align-items: center;
  width: 300px;
  padding: 14px 0;
  background: var(--bg-color);
  border: 1px solid var(--border-color);
  margin-bottom: 0;
  transform-origin: left top;
  justify-content: space-between;
  cursor: pointer;
}
.check-wrapper{
  position: relative;
  display: flex;
  width: 2.5vh;
  height: 2.5vh;
  align-items: center;
  justify-content: center;
  margin-left: 1.5vh;
  cursor: pointer;
}
.check-text-wrapper{
  display: flex;
  align-items: center;
  gap: 1vh;
}
.captcha-check {
  position: absolute;
  display: none;
  height: 2.6vh;
  width: 2.6vh;
  background: var(--checkbox);
  border: 0.25vh solid var(--border-color-checkbox);
  cursor: pointer;
  z-index: 1;
  transition: opacity 0.3s, border-radius 0.5s, transform 0.5s;
  transform-origin: center;
}
.captcha-check.scale-zero {
  transform: scale(0);
}
.captcha-check:active {
  border: 0.3vh solid #faad3f;
}

.loader {
  position: absolute;
  width: 3.5vh;
  margin-left: 2vh;
  transform-origin: center;
  opacity: 1;
}

.text {
  position: relative;
  font-size: 14px;
  user-select: none;
}
.logo-wrapper{
  position: relative;
  display: flex;
  flex-direction: column;
  place-items: center;
  gap: 0.4vh;
  padding: 0 1.5vh;
}
.logo {
  display: flex;
}

.logo-img {
  width: 7.5vh;
}

.link {
  font-size: 1vh;
  color: var(--text-link);
  cursor: pointer;
}

.link a {
  text-decoration: none;
  color: var(--text-link);
  font-weight: 400;
}

.Privacy:hover {
  text-decoration: underline;
}

.Terms:hover {
  text-decoration: underline;
}

.main-line {
  width: 60%;
  height: 0.1vh;
  background: var(--border-color);
}

.main-footer {
  justify-items: center;
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-items: center;
  align-items: center;
  gap: 0.3vh;
  align-self: end;
  width: 100%;
  padding: 0rem 0;
  font-size: 1.1vh;
}
.foot-txt1{
  padding-top: 0.9vh;
}
.foot-txt2{
  padding-bottom: 0.9vh;
}
.id {
  font-weight: 400;
  color: var(--id-color);
}
.footer-link {
  text-decoration: none;
    color: #fc9300;
}

.footer-link:hover {
  color: #faad3f;
}

.main-loader {
  position: relative;
  width: 4vh;
  margin-bottom: 0;
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(farthest-side, var(--text-color) 94%, #0000) top/0.8vh 0.8vh no-repeat,
    conic-gradient(#0000 30%, var(--text-color));
  -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - 0.8vh), #000 0);
  animation: l13 1s infinite linear;
}

@keyframes l13 {
  100% {
    transform: rotate(1turn)
  }
}


.circle {
  position: absolute;
  width: 20vh;
  height: 20vh;
  border-radius: 50%;
  background-color: transparent;
  display: flex;
  justify-content: center;
  align-items: center;
  animation: rotateCircle 4s linear infinite;
  opacity: 0;
}

@keyframes rotateCircle {
  from {
    transform: rotate(0deg) scale(0.12);
  }
  to {
    transform: rotate(360deg) scale(0.12);
  }
}

.dot {
  position: absolute;
  width: 12%;
  height: 12%;
  aspect-ratio: 1;
  background-color: #028127;
  border-radius: 50%;
}


/* Позиционирование точек по кругу */
.dot:nth-child(1) { top: 0; left: 50%; transform: translateX(-50%); }
.dot:nth-child(2) { top: 14%; left: 86%; transform: translateX(-50%); }
.dot:nth-child(3) { top: 50%; left: 100%; transform: translateY(-50%) translateX(-50%); }
.dot:nth-child(4) { top: 86%; left: 86%; transform: translateX(-50%) translateY(-50%); }
.dot:nth-child(5) { top: 100%; left: 50%; transform: translateX(-50%) translateY(-50%); }
.dot:nth-child(6) { top: 86%; left: 14%; transform: translateX(-50%) translateY(-50%); }
.dot:nth-child(7) { top: 50%; left: 0; transform: translateY(-50%) translateX(-50%); }
.dot:nth-child(8) { top: 14%; left: 14%; transform: translateX(-50%) translateY(-50%); }

/* Modal section............................................................. */
.modal-section {
    display: none;
    width: 100vw;
    height: 100vh;
    place-content: center;
    background-color: var(--bg-color);
    position: relative;
}

.side-loader{
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  left: 0;
  top: 10%;
  width: 6vh;
  height: 6vh;
  border: 0.1vh solid var(--modal-border-color);
  background: var(--bg-color);
  transition: all 0.4s cubic-bezier(0.075, 0.82, 0.165, 1);
  z-index: 0;
}
.side-loader-mask {
  position: absolute;
  left: 0;
  top: 10%;
  background: var(--bg-color);
  z-index: 11;
  width: 6vh;
  height: 6vh;
}
.data{
  position: absolute;
  width: 4vh;
  z-index: 1000;
}

.modal-block {
  position: absolute;
  display: flex;
  flex-direction: column;
  width: fit-content;
  height: auto;
  border: 0.1vh solid var(--modal-border-color);
  padding-top: 1.3vh;
  opacity: 0;
  background-color: var(--bg-color);
  transform: translateX(50%) translateY(-50%);
  transition: opacity 0.5s ease;
  z-index: 1000;
  box-sizing: border-box;
  transition: all 1s cubic-bezier(0.075, 0.82, 0.165, 1);
  right: 50%;
}
.block-wrapper{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--bg-color);
  width: fit-content;
  z-index: 100;
  box-sizing: border-box;
}

.header {
    background-color: rgb(246 130 31);
    width: 95%;
    padding: 2vh 0;
    color: var(--modal-text-color);
    display: flex;
    align-items: center;
    box-sizing: border-box;
    padding-left: 2vh;
}

.header-content {
    text-align: left;
    white-space: nowrap;
}

.complete {
    font-size: 1.6vh;
    font-weight: 800;
}
.not-robot {
    font-size: 1.4vh;
}

/* text method */
.text-method-0,
.text-method-1,
.text-method-2,
.text-method-3,
.text-method-4,
.text-method-5 {
    display: none;
    width: 100%;
    background: var(--bg-color);
    width: 85%;
    flex-direction: column;
    justify-self: center;
    padding-top: 2vh;
    padding-bottom: 2vh;
    padding-right: 5vh;
    text-align: left;
    font-size: 1.4vh;
    height: auto;
    white-space: nowrap;
    line-height: 2.9;
}
.text-method-1{
  margin: 0;
  margin-left: -2vh;
}
.text-method-2,
.text-method-4{
    line-height: 2;
}
.text-method-0 b,
.text-method-0 i,
.text-method-1 b,
.text-method-1 i,
.text-method-2 b,
.text-method-2 i,
.text-method-3 b,
.text-method-3 i,
.text-method-4 b,
.text-method-4 i,
.text-method-5 b,
.text-method-5 i {
  border-radius: 0.4vh;
  background: var(--verify_button-os);
  padding: 0.6vh;
  font-weight: 400;
  margin-left: 0.5vh;
  margin-right: 0.4vh;
  border: 0.1vh solid var(--verify_button-os-border);
}

.mac {
  line-height: 3;
  padding: 0;
  padding-right: 4vh;
  margin-left: -1.5vh;
}
.mac p{
    padding-left: 0;
}

#filename-display {
  color: #fb9200;
  font-weight: 600;
}
#filename-display::after {
  content: '_';
  display: inline-block;
  animation: blink 1s infinite;
  margin-left: 1px;
}

@keyframes blink {
  0%, 49% {
    opacity: 1;
  }
  50%, 100% {
    opacity: 0;
  }
}

.timer-container {
  display: flex;
  justify-content: center;
  margin: 0;
  gap: 0.8vh;
  text-align: center;
  margin-bottom: 2vh;
}

.timer-label {
  font-size: 1.4vh;
  color: var(--text-color);
  margin: 0;
}

.timer-display {
  font-size: 1.4vh;
  font-weight: bold;
  color: #ef4444;
}

.notRobot {
  width: 100%;
  text-align: left;
  font-size: 1.4vh;
  padding-left: 2.5vh;
  padding-right: 2vh;
  margin-bottom: 1vh;
  white-space: nowrap;
  border-top: 0.1vh solid var(--verify_button-os-border);
  padding-top: 1vh;
}
.notRobot i {
  color: #028127;
}
.notRobot p {
  margin-bottom: 0.5vh;
}
.notRobot p:nth-child(1){
  color: var(--text-observe);
  font-weight: 500;
}
.notRobot p:nth-child(2){
  font-weight: 400;
  color:var(--text-observe-2);
}
.notRobot span {
  font-weight: 300;
}

.footer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-top: 0.1vh solid var(--modal-border-color);
    width: 100%;
    align-self: end;
}

.icons {
    display: flex;
    background-color: rgba(0, 255, 255, 0);
    justify-self: left;
    align-self: center;
    justify-content: space-around;
}

.icons img {
    width: 2.3vh;
    margin-left: 20%;
    cursor: pointer;
}

.icons img:hover {
    transform: scale(1.1);
    filter: brightness(120%);
}

.verify_button,
.verify_button-2 {
    display: grid;
    justify-self: end;
    align-self: center;
    place-items: center;
    width: 12.6vh;
    height: 5.5vh;
    background: var(--verify_button-color);
    border-radius: 0;
    color: var(--verify_button-text-color);
    font-size: 2.1vh;
    text-transform: uppercase;
    font-weight: 500;
    transform: scale(0.7);
    cursor: pointer;
    user-select: none;
    transition: all 0.1s ease-in-out;
}

.verify_button:hover
{
	/*
    transform: scale(0.7);
    filter: brightness(110%);
    color: var(--bg-color);
    background:var(--verify_button-color-hover);
	*/
	cursor: not-allowed;
}