html,
body {
   padding: 0;
   margin: 0;
}

body{
   overflow: hidden;
}

.button_double_big {
   padding: 10px 0;
   border-radius: 20px;
   width: 50%;
   /* font-size: 16px; */
   font-size: calc(1rem * var(--app-font-size));
}

#pwa_double_buttons {
   display: flex;
   width: calc(100vw - 52px);
   /* background: aqua; */
   gap: 10px;
   /* display: none; */
   justify-content: center;
}

#pwa_double_left_button {
   background-color: transparent !important;
   border: gray solid 1px;
   color: #0d57d1;
}

#pwa_double_right_button {
   background-color: gray;
}

#clicker_block {
   position: fixed;
   width: 100%;
   height: 130vh;
   background: linear-gradient(0deg, black, #00000086);
   opacity: 0;
   z-index: 11111;
   overflow: hidden;
   transition: 1600ms;
}

.clicker_block--data {
   position: relative;
   display: flex;
   width: 80%;
   height: 80vh;
   background-color: #ffc2c2f7;
   margin: 10%;
   justify-content: center;
   align-items: center;
   flex-direction: row;
   border-radius: 12px;
}

.button_main {
   display: flex;
   flex-direction: row;
   justify-content: center;
   align-items: center;
}

.loader {
   width: 48px;
   height: 48px;
   border-radius: 50%;
   display: inline-block;
   position: relative;
   border: 3px solid;
   border-color: #fff #fff transparent transparent;
   box-sizing: border-box;
   animation: rotation 1s linear infinite;
}

.loader::before {
   width: 32px;
   height: 32px;
   border-color: #fff #fff transparent transparent;
   animation: rotation 1.5s linear infinite;
}

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

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

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

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

.loader_loaging {
   /* top: 45%;
	margin-top: -0.5em;
	right: 50%;
	margin-right: -0.5em;
	position: absolute; */
}

.loader_parent {
   scale: 0.5;
   height: 0;
   transform: translateY(-25px);
}

.loaderDiv {
   width: 500px;
   margin: 0 auto;
   border-radius: 10px;
   border: 4px solid transparent;
   position: relative;
   padding: 1px;
}

.loaderDiv:before {
   content: "";
   border: 1px solid #fff;
   border-radius: 10px;
   position: absolute;
   top: -4px;
   right: -4px;
   bottom: -4px;
   left: -4px;
}

.loaderDiv .loaderDivBar {
   position: absolute;
   border-radius: 10px;
   top: 0;
   bottom: 0;
   left: 0%;
   right: 0%;
   width: 0%;
   background: #fff;
}

.button_main {
   gap: 5%;
   padding-right: 20% !important;
   padding-left: 20% !important;
}

.loaderMarket {
   width: 100% !important;
   aspect-ratio: 1;
   border-radius: 50%;
   border: 2px solid var(--app_button_main_color);
   /* border: 8px solid #514b82; */
   animation: l20-1 0.9s infinite linear alternate,
      l20-2 1.8s infinite linear;
}

@keyframes l20-1 {
   0% {
      clip-path: polygon(50% 50%,
            0 0,
            50% 0%,
            50% 0%,
            50% 0%,
            50% 0%,
            50% 0%);
   }

   12.5% {
      clip-path: polygon(50% 50%,
            0 0,
            50% 0%,
            100% 0%,
            100% 0%,
            100% 0%,
            100% 0%);
   }

   25% {
      clip-path: polygon(50% 50%,
            0 0,
            50% 0%,
            100% 0%,
            100% 100%,
            100% 100%,
            100% 100%);
   }

   50% {
      clip-path: polygon(50% 50%,
            0 0,
            50% 0%,
            100% 0%,
            100% 100%,
            50% 100%,
            0% 100%);
   }

   62.5% {
      clip-path: polygon(50% 50%,
            100% 0,
            100% 0%,
            100% 0%,
            100% 100%,
            50% 100%,
            0% 100%);
   }

   75% {
      clip-path: polygon(50% 50%,
            100% 100%,
            100% 100%,
            100% 100%,
            100% 100%,
            50% 100%,
            0% 100%);
   }

   100% {
      clip-path: polygon(50% 50%,
            50% 100%,
            50% 100%,
            50% 100%,
            50% 100%,
            50% 100%,
            0% 100%);
   }
}

@keyframes l20-2 {
   0% {
      transform: scaleY(1) rotate(0deg);
   }

   49.99% {
      transform: scaleY(1) rotate(135deg);
   }

   50% {
      transform: scaleY(-1) rotate(0deg);
   }

   100% {
      transform: scaleY(-1) rotate(-135deg);
   }
}