/*@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/Montserrat-Medium.otf'), format('embedded-opentype'), 
    url('../fonts/Montserrat-Medium.woff') format('woff'),
    url('../fonts/Montserrat-Medium.woff2') format('woff2'),
    url('../fonts/Montserrat-Medium.ttf') format('truetype'),
}*/

/*@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/Montserrat-Regular.otf'), format('embedded-opentype'), 
    url('../fonts/Montserrat-Regular.woff') format('woff'),
    url('../fonts/Montserrat-Regular.woff2') format('woff2'),
    url('../fonts/Montserrat-Regular.ttf') format('truetype'),
}*/

@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/montserrat-semibold-webfont.woff') format('woff')
}

* {
box-sizing: border-box;
position: relative;
}
html {
  scroll-behavior: smooth;
  scrollbar-color:#1a3241 #011c2c;
}
::-webkit-scrollbar {
  width: 0.7vw;
}
::-webkit-scrollbar-track {
  background: #1a3241;
  background-color: #011c2c;
}
::-webkit-scrollbar-thumb {
  background: #1a3241;
}
::-webkit-scrollbar-thumb:hover {
  background: #ffffff;
}
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

body,html{
  height:100%;
  margin: 0;
}

p {
  margin: 1.4vw 0;
}

::-webkit-input-placeholder { /* WebKit, Blink, Edge */ color: #bdbdbd;}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color:#bdbdbd; opacity:1;}
::-moz-placeholder { /* Mozilla Firefox 19+ */ color:#bdbdbd; opacity:1;}
:-ms-input-placeholder { /* Internet Explorer 10-11 */ color: #bdbdbd;}

button, .marker, .w25, .CRN, .add, .delete, .delete svg, .item, .item:after, .expand:after,
.more:after, .editmore, .share, .thumbs, .checkbox, .checkmark, .checkmark:after,
 .ncd, .ncm, .nod, .nom, .media img,
 .edit-category, .social,
.icon, .o0, .o10, .o20, .o30, .maintitle, .popup, .overlay, .conf, .points-user, .text, .text .tooltip, .day, #wheel-astrology-aspects, .menu, .menu-header, .logo-text, .title-day, .iwrapper::after, .slider circle, .slider line, .tumbler {
  -webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out; -ms-transition:all .3s ease-in-out; transition:all .3s ease-in-out;
}



.rel {position: relative;}

.block {display: block;}
.inline {display: inline;}
.inline-block {display: inline-block;}
.max-content {width: max-content; width: auto;
  white-space: nowrap;}


.hidden {display:none !important;}
.open {display:block;}

body, .txt, select, input {
  position: relative;
  margin: 0;
  padding: 0;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600; 
  font-size: 1.35vw; 
  letter-spacing: -0.02vw;
  line-height: 1.8vw;
  color: #bdbdbdc9;;
  background-color: #001c2d;
  text-rendering: optimizeLegibility; shape-rendering: geometricPrecision;
  -moz-font-smoothing: antialiased;-webkit-font-smoothing: antialiased;
}

#content {
  -webkit-transition:all .1s ease-in-out;
  -moz-transition:all .1s ease-in-out;
  -o-transition:all .1s ease-in-out;
  -ms-transition:all .1s ease-in-out;
  transition:all .1s ease-in-out;
  margin-top: 4vw;
  position: relative;
  display: block;
  padding: 6vw 3vw 6vw 6vw;
}
#content.loading {
  opacity: 0.1;
  filter: blur(2px);
}
.article, article {
  position: relative;
}
.article.loading, article.loading {
  opacity: 0.1;  
  filter: blur(2px);
}
.overlay {
  position: fixed;
  top: 0;
  z-index: 999;
  width: 100%;
  height: 100vh;
  background-color: #000000;
  opacity: 0;
  visibility: hidden;
}
.overlay.open {
  opacity: 0.8;
  visibility: visible;
}

#app {
  display: grid; 
  grid-template-columns: 1.03fr 0.97fr; 
  grid-template-rows: auto 1.9fr 0.1fr; 
  gap: 0px 0px; 
  grid-template-areas: 
    "main wheel"
    "main nav"
    "main footer"; 
}

main {
	grid-area: main;
  padding-top: 4vw;
  overflow: hidden; 
  max-width: 100%; 
}

#wheel, .sky {
	grid-area: wheel;
}
#wheel canvas {
  width: 100% !important;
  height: 100% !important;
}
#wheel.transit #wheel-astrology-radix-planets,
#wheel.transit #wheel-astrology-radix-cusps  {
  display:  none;
}

nav {
	grid-area: nav;
  align-self: start;
  padding: 6vw 6vw 12vw 0;
  text-align: right;
}

.footer {
  grid-area: footer;
  align-self: end;
  padding: 6vw;
  text-align: right;
}



.sky{
  height: 40vw;
    width: 48vw;
}


nav, nav a {
  color: #bdbdbdf2;
}

nav li, nav a {
  width: fit-content;
  justify-self: end;
}

.language {z-index: 9;}

.item {  
  cursor: pointer;
}
.item:hover {
  color: white;
}
.item:focus {
  color: initial;
}
.item.current,
.item.current a,
.item.selected,
.item.selected a {
  color: #ffffff;
  cursor: auto;
}

.large {
  font-weight: 600;
  font-size: 1.8vw;
  line-height: 2.9vw;
}


.checkbox {
  position: relative;
  display: block;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  width: 3vw;
  height: 3vw;
  }

/* Hide the browser's default checkbox */
.checkbox input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 3vw;
  width: 3vw;
  top: 1vw;
  left: 1vw;
  z-index: 1;
}
/* Create a custom checkbox */
.checkmark {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  height: 3vw;
  width: 3vw;
  border: 1px solid #bdbdbd30;
}
.checkbox input:hover ~ .checkmark {  
  border-color: #cecece;
  }
/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
    left: 0.75vw;
    top: -0.1vw;
    width: 1vw;
    height: 1.8vw;
    border: solid #cecece;
    border-width: 0 4px 4px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

/* Show the checkmark when checked */
.checkbox input:checked ~ .checkmark:after {
  display: block;
}

.checkbox .label {
  margin-left: 3.9vw;
  line-height: 2.7vw;
}
.active {
  position: absolute;
  top: 0;
}

.filter-item {
  display: inline-block;
  position: relative;
  width: 100%;
  margin: 0 0 3.6vw 0;
}

#logo-wr {
    font-weight: 600;
    position: absolute;
    top: 1.5vw;
    left: 1.8vw;
    margin: 0;
    width: 22vw;
    z-index: 1;
}

#logo-wr a {
  cursor: default;
}

.logo-text {
  display: block;
  fill: #ffffff;
  font-size: 30px;
  opacity: 0.9;
}

.logo-text:hover {
  opacity: 1;
  cursor: pointer;
}

.orbit-line {
  fill: none;
  stroke: rgba(255, 255, 255, 0.12);
  stroke-width: 0.8;
  transform: rotate(25deg);
  transform-origin: 48px 52px;
}

.electron {
  fill: #27ae60;
}





.logo-text, #logo a {
  letter-spacing: 0.03vw;
}


img, canvas {width: 100%; display: block; margin: 0; padding: 0;}

h1, .h1, .title, input, textarea, button, select {
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 1.25vw;
  line-height: 1.8vw;
}
h1 {
  margin-bottom: -0.5vw;
}
h1, h2 {
  font-size: 1.8vw;
  line-height: 2.9vw;
  margin: 1.4vw 0;
  -webkit-margin-before: 0; -webkit-margin-after: 0;
}

ul {
  margin: 0;
  padding: 0;
  display: block;
}
li {
  list-style-type: none;
}

a {
  border: none;
  outline: none;
  text-decoration: none;
}

.z1 {
  z-index: 1;
}

.slide, .card25, input, textarea {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box;}


input, .input {
    color: #bdbdbd;
    user-select: text;
    cursor: auto;
    border: none;
    background-color: transparent;
    line-height: 3vw;
    width: 16vw;
    padding: 0 1vw;
    /*margin-left:-1vw;*/
    display: inline-block;
    border: 1px solid #bdbdbd30;
}
input:focus, .input:focus {
  color: #ffffff;
}
input.error,
.input.error {
  color: #ff4400cb;
  border: 1px solid #ff4400cb;
}

.input-s {
  width: 8vw;
}
.input-m {
  width: 14vw;
}

textarea {
  color: #ffffff;
  user-select: text;
  cursor: auto;
  border: none;
  background-color: #cecece10;
  resize: none;
  line-height: 1.8vw;
  width: 100%;
  height: 100%;
  overflow: hidden;
  min-width: 3.6vw;
  padding: 0 1vw;
  border: 2px solid transparent;
}

input:focus, textarea:focus {  
  outline: none;  
  background-color: transparent;
}
input:focus::placeholder, textarea:focus::placeholder, .input {  
  color: #bdbdbd;
}

input[type="radio"] {
  -webkit-appearance: none;
  appearance: none;
  background-color: #cecece10;
  font: inherit;
  margin: 0;
  height: 3vw;
  width: 3vw;
  border: 2px solid #cecece20;
  border-radius: 50%;
  transform: translateY(-0.59vw);
  display: grid;
  place-content: center;
}

input[type="radio"]::before {
  content: "";
  width: 1vw;
  height: 1vw;
  border-radius: 50%;
  transform: scale(0);
  transition: 120ms transform ease-in-out;
  box-shadow: inset 1vw 1vw #ff4400cb;
}

input[type="radio"]:checked::before {
  transform: scale(1);
}

input[type="radio"].agree::before {
  box-shadow: inset 1vw 1vw #27ae42da;
}

.agreement {
  display: grid;
  grid-template-columns: 3.9vw 13.5vw 3.9vw 12vw;
}


fieldset {
  display: block;
  border: none;
  padding: 0;
  margin: 0;
}

.abs, .atl, .atr, .abr, .abl {position: absolute;}
.fix, .ftl, .ftr, .fbr, .fbl {position: fixed;}
.atl, .atr, .ftl, .ftr {top: 0;}
.abl, .abr, .fbl, .fbr {bottom: 0;}
.atl, .abl, .ftl, .fbr {left: 0;}
.atr, .abr, .ftr, .fbr {right: 0;}
.fl {float: left;}
.fr {float: right;}
.max100 {max-width: 100%;}

.tac {text-align: center;} 
.tar {text-align: right;}
.jse {justify-self: end;}

.R50 {border-radius:50%;}
.WB {background-color: rgba(255, 255, 255, 0.3);}
.WT {color: #bdbdbd;}
.WB {background-color: white}
.GT {color: #464646;}
.GB {background-color: #464646;}

.w5{width: 8.0vw;}
.w12{width: 11%;}
.w25{width: 6.7vw;}
.w50{width: 49% !important;}
.w75{width: 75%;}
.w80{width: 83.5%;}
.w90{width: 93%;}
.w100{width: 100%;}
.h100{height: 100%;}


a {color: #bdbdbd;}
a:hover {color: #ffffff;}


.title {
  color: #000;
  padding: 0.9vw 3.6vw 0.9vw 3.6vw;
  margin: -3.6vw 0 0 0;
  min-width: 9vw;
  width: max-content;
  max-width: 100%;
  min-height: 3.6vw;
}

.ic::after {
  top: 1vw;
}

.bg { position: absolute; z-index: -1;}

.add {
  z-index: 3;
  height: 3.6vw;
  padding: 0.7vw;
  width: 100%;
  border: none;
  border-radius: 0;
  outline: 0;
  background-color: #ffffff20;
  position: relative;
  background-image: url(./add-slide.svg);
  background-size: 2vw;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.3;
}
.add:hover {
  background-color: #219721;
  opacity: 1;
}

.delete {
  position: absolute;
  display: block;
  top: 0;
  right: 0;
  z-index: 4;
  height: 3.6vw;
  width: 3.6vw;
  border: none;
  padding: 0.7vw;
  background-image: url(./delete-slide.svg);
  background-size: 1.7vw;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.3;
}
.delete:hover, .delete.confirm {
  background-color: rgba(255, 0, 0, 0.5);
  opacity: 1;
}
.delete.confirm {
  background-image: none;
  height: 100%;
  width: 100%;
}
.conf {
  transform: scale(1);
  transform-origin: top right;
  opacity: 1;
}
.conf.tiny {
  transform: scale(0.1);
  opacity: 0;
}

.edit-icon {
  position: absolute;
  width: 3.6vw;
  height: 3.6vw;
  top: 50%;
  right: -4.5vw;
  transform: translateY(-1.8vw);
  z-index: 1;
  background-image: url('./edit-icon.svg');
  background-size: 1vw;
  background-repeat: no-repeat;
  background-position: center left;
  opacity: 0.05;
}

.edit-icon .TT-TL {
  margin-left: -1vw;
  z-index: 9;
}
.edit-icon:hover {
  opacity: 1;
}
.edit-icon:hover .TT-TL {
  visibility: visible;
  opacity: 1;
}

.add-icon {
  position: absolute;
  width: max-content;
  min-width: 3.6vw;
  height: 3.6vw;
  top: 50%;
  right: -7.5vw;
  transform: translateY(-1.8vw);
  z-index: 1;
  background-image: url('./add-icon.svg');
  background-size: 1vw;
  background-repeat: no-repeat;
  background-position: center left;
  opacity: 0.05;
}
.add-icon .TT-TL {
  margin-left: -1vw;
  z-index: 9;
}
.add-icon:hover {
  opacity: 1;
}
.add-icon:hover .TT-TL {
  visibility: visible;
  opacity: 1;
}

.delete:hover .TT-BR {
  visibility: visible;
  opacity: 1;
  transition-delay:0.5s;
}
.add:hover .TT-BR {
  visibility: visible;
  opacity: 1;
  transition-delay:0.5s;
}

.edit-contacts {
  margin-top: -4.8vw;
}
.edit-c {
  display: inline-block;
  position: relative;
  right: -3.6vw;
}


.open-close {
  width: 2.2vw;
  height: 2.2vw;
  opacity: 0.15;
  top: -1vw;
  background-image: url(./add-slide.svg);
  background-size: 2vw;
  background-position: center;
  background-repeat: no-repeat;
  left: -1vw;
}
.open-close {
  transform: rotate(270deg);
}
.open-close.open {
  transform: rotate(225deg);
}


input.XS {
  width: 3.6vw;
  padding: 0.8vw;
}
input.S {
  width: 6.3vw;
  padding: 0.9vw;
}
input.M {
  width: 16vw;
}
input.L {
  width: 22vw;
}
input.XL {
  width: 32.33vw;
}
.input.label {
  bottom: -2vw;
}
.input.label.right {
  bottom: -2vw;
  right: 5.8vw;
}

.CTL, .CTR, .CBR, .CBL {
  width: 1.15vw;
  height: 1.15vw;
}
.CTL {
  border-top: 0.3vw solid #ffffff20;
  border-left: 0.3vw solid #ffffff20;
}
.CTR {
  border-top: 0.3vw solid #ffffff20;
  border-right: 0.3vw solid #ffffff20;
}
.CBR {
  border-bottom: 0.3vw solid #ffffff20;
  border-right: 0.3vw solid #ffffff20;
}
.CBL {
  border-bottom: 0.3vw solid #ffffff20;
  border-left: 0.3vw solid #ffffff20;
}

.disabled {
  opacity: 0.6;
  cursor: default;
}
.optional::placeholder {
  opacity: 0.5;
}
.optional:focus, .optional:hover {
  opacity: 1;
}
.valid {
  background-image: url(./checkmark.svg);
  background-repeat: no-repeat;
  background-position: right center;
  background-size: 4vw;
  background-color: rgb(255 255 255 / 2%) !important;
}

.notvalid {
  background-color: rgb(255 0 0 / 40%) !important;
}
.btn-tr {
  background-color: rgb(255 255 255 / 5%);
  color: #bdbdbd;
  text-align: center;
  padding: 0.9vw 3.6vw;
  width: max-content;
  cursor: pointer;
}
.btn-white:hover, .btn-tr:hover {
  background-color: #219721;
  color: white;
}
.btn-white:active {
  background-color: white !important;
  color: black !important;
}
.disabled:hover {
  background-color: red;
}
.delete-confirm:hover {
  background-color: rgba(255, 0, 0, 1);
}

.loading-container {
  position: fixed;
  top: 0;
  z-index: 999;
  width: 62%;
  overflow: hidden;
}
.indicator {
  height: 2px;
  width: 100%;
  background-color: #219721;
  opacity: .4;
}
.indicator.loading {
  opacity: 1;
  width: 95%;
}
.indicator.loaded {
  width: 100%;
}

.share {
  background-image: url(./share.svg);
  background-size: 40%;
  background-repeat: no-repeat;
  background-position: center;
  height: 5.6vw;
  width: 5.6vw;
  cursor: pointer;
  opacity: 0.3;
}
.share:hover {
  opacity: 1;
}
.social {
  position: absolute;
  right: 75.6vw;
  bottom: 0;
  width: 20vw;
  opacity: 0;
  z-index: 2;
}
.social.open {
  opacity: 1;
  right: 5.6vw;
}
.social .icon {
  opacity: 0.6;
  z-index: 1;
  position: relative;
  float: right;
  width: 5.6vw;
  height: 5.6vw;
  background-size: 40%;
  background-repeat: no-repeat;
  background-position: center;
  background-color: #464646;
}
.social .icon:hover {
  opacity: 1;
}
.facebook {
  background-image: url(./facebook.svg);
}
.twitter {
  background-image: url(./twitter.svg);
}
.pinterest {
  background-image: url(./pinterest.svg);
}
.cat-translate {
  top: 0.5vw;
}
.reg-canvas-wrapper {
  width: 15vw;
}
#reg_canvas {
  z-index: 2;
  background-color: white;
  letter-spacing: 0.05vw;
}

.error-top {
  position: fixed;
  top: 0;
  height: 6vw;
  padding-top: 1.5vw;
  background: linear-gradient(0deg,#011c2c00 0%, #011c2c 50%);
}

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}

.items-top {
  margin-top: 4.4vw;
}
.topitem {
  position: absolute;
  top: -4.5vw;
}

svg {
  background: transparent;
  width: 100%;
}

#universe {
    position: absolute;
    top: -11vw;
    min-height: 47vw;
    left: 51vw;
    width: 48vw;
    color: #cecece;
    /* transform-style: preserve-3d;
    transform-origin: center center;
    transform: rotateX(45deg) rotateZ(-11deg); */
}
.wheel-houses {
  border-radius: 50%;
  border: 1vw solid rgba(255, 255, 255, 0.3);
  background-color: #1a3241;
  width: 100%;
  height: 100%;
}


#chart-synastria-planets g, .chart-synastria .planet {
  filter: blur(1px);
  stroke: #ffffff10;
  opacity: 0.5;
}

.chart-synastria line, .chart-transit line {
  opacity: 0.7;
}

#wheel-astrology-bg > path {
  fill: transparent;
}

text {
  fill: #ccc;
  display: none;
}
#wheel {
    /*position: absolute;*/
    margin-top: 3vw;
    height: 46vw;
    /*left: 51vw;*/
    width: 46vw;
    color: #cecece;
}
#wheel.wheel-3d {
  margin-top: 0;
}

#wheel svg {
  background: transparent;
  position: relative; 
  overflow: hidden;
}

.radix-houses {
    opacity: 0.7;
  }
.radix-planets, .synastria-planets {
  opacity: 0.5;
}
.radix-planets g, .synastria-planets g {
  filter: blur(1px);
}

#wheel-astrology-transit-planets > line, #wheel-astrology-radix-planets > line { /*planet marker */
  display: none;
}

#wheel-astrology-transit-ruler, #wheel-astrology-radix-ruler, #wheel-astrology-radix-circles > circle:nth-child(2), #wheel-astrology-radix-circles > circle:nth-child(3) {
  display: none;
}
#wheel-astrology-transit-circles > circle {
  stroke: none;
}
#wheel-astrology-radix-planets, #chart-radix-planets {
  opacity: 0.5;
}
#wheel-astrology-radix-planets-Sun, #wheel-astrology-radix-planets-Moon, #wheel-astrology-radix-planets-Mercury, #wheel-astrology-radix-planets-Venus, #wheel-astrology-radix-planets-Mars, #wheel-astrology-radix-planets-Jupiter, #wheel-astrology-radix-planets-Saturn, #wheel-astrology-radix-planets-Uranus, #wheel-astrology-radix-planets-Pluto, #wheel-astrology-radix-planets-Neptune {
  filter: blur(1px);
  opacity: 0.5;
}
#wheel-astrology-radix-cusps {
  opacity: 0.7;
}
#wheel-astrology-radix-circles > circle:nth-child(1){
  opacity: 0.7;
  /*filter: blur(18px);*/
}
#wheel #wheel-astrology-aspects,
#wheel #wheel-astrology-transit-cusps {
  filter: none;
  opacity: 1;
}
#wheel.loading #wheel-astrology-aspects {
  filter: blur(1px);
  opacity: 0.3;
}
#wheel.loading #wheel-astrology-transit-cusps {
  filter: blur(3px);
  opacity: 0.3;
}

.line.harmony {
  stroke: #27ae5fcf;
  stroke-width: 1.8;
}

.line.tension {
  stroke: #ff4400cb;
  stroke-width: 1.8;
}

.list li {
  padding: 1vw 0;
}
.list li img {
  position: absolute;
  left: -6.3vw;
  top: 0.1vw;
  opacity: .7;
  width: 3.6vw;
}
.toggle-password {
  background-color: transparent;
  width: 4vw;
  height: 4vw;
}
.toggle-password .toggler {
  background-color: transparent;
}
.m { margin: 1vw; }
.mt { margin-top: 1vw; }
.mb { margin-bottom: 1vw; }
.ml { margin-left: 1vw; }
.mr { margin-right: 1vw; }

.mt1p { margin-top: 1.5vw; }
.mb1p { margin-bottom: 1.5vw; }
.ml1p { margin-left: 1.5vw; }
.mr1p { margin-right: 1.5vw; }

.mt2 { margin-top: 2vw; }
.mb2 { margin-bottom: 2vw; }
.ml2 { margin-left: 2vw; }
.mr2 { margin-right: 2vw; }

.mt3 { margin-top: 2.7vw; }
.mb3 { margin-bottom: 3vw; }
.ml3 { margin-left: 3vw; }
.mr3 { margin-right: 3vw; }

.mt4 { margin-top: 4vw; }
.mb4 { margin-bottom: 4vw; }
.ml4 { margin-left: 4vw; }
.mr4 { margin-right: 4vw; }

.mt5 { margin-top: 5vw; }
.mb5 { margin-bottom: 5vw; }
.ml5 { margin-left: 5vw; }
.mr5 { margin-right: 5vw; }

.mt6 { margin-top: 6vw; }
.mb6 { margin-bottom: 6vw; }
.ml6 { margin-left: 6vw; }
.mr6 { margin-right: 6vw; }

.mt9 { margin-top: 9vw; }
.mb9 { margin-bottom: 9vw; }
.ml9 { margin-left: 9vw; }
.mr9 { margin-right: 9vw; }

.mt11 { margin-top: 11vw; }
.mb11 { margin-bottom: 11vw; }
.ml11 { margin-left: 11vw; }
.mr11 { margin-right: 11vw; }

.pt3 { padding-top: 3vw; }
.pb3 { padding-bottom: 3vw; }
.pl3 { padding-left: 3vw; }
.pr3 { padding-right: 3vw; }

.pt { padding-top: 1vw; }
.pb { padding-bottom: 1vw; }
.pl { padding-left: 1vw; }
.pr { padding-right: 1vw; }

.lh3 {line-height: 3vw;}

.abr {position: absolute; right: 0;}
.hidden {display: none;}

.blur {
  filter: blur(4px);
}
.blur2 {
  filter: blur(2px);
}
.o5 {
  opacity: 0.5;
}
.o4 {
  opacity: 0.4;
}
.o3 {
  opacity: 0.3;
}
.o2 {
  opacity: 0.2;
}
.o15 {
  opacity: 0.15;
}
.o1 {
  opacity: 0.1;
}
.o05 {
  opacity: 0.05;
}
.o10 {opacity: 0.1;} .o10:hover {opacity: 1;}
.o20 {opacity: 0.2;} .o20:hover {opacity: 1;}
.o30 {opacity: 0.3;}

.radix {
  position: absolute;
  top: 0.5vw;
}
.chart {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.chart.transit {
  z-index: 2;
}
.flex {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
}
.row {
  flex-direction: row;
}
.evenly {
  justify-content: space-evenly;
}
.left {
  justify-content: left;
}
.asc {
  height: 3px;
  width: 3.6vw;
  background-color: #ccc;
  position: absolute;
}

.houses {
  position: absolute;
  display: none;
  height: 102%;
  left: 3vw;
  opacity: .1;
  width: 1.8vw;
}
.full .houses  {
  left: 5.2vw;
}

.house {
  position: absolute;
}
.orbit {
  width: 3.6vw;
}
.planet {
  position: absolute;
  width: 3.6vw;
  height: 3.6vw;
}
.planet img {
  position: absolute;
  width: 3.6vw;
  height: 3.6vw;
}
.info {
  position: absolute;
  transform: rotate(-90deg);
  transform-origin: left;
  top: -2.2vw;
  left: 1.8vw;
  width: 38vw;
  height: 3.6vw;
  line-height: 3.6vw;
}
.info.top {
  top: 40vw;
  text-align: right;
}


.htxt {
  position: relative;
  padding-right: 0;
  color: #011c2c !important;
}

.text .tooltip {
  display: block;
  height: 2.2vw;
  margin-top: -0.6vw;
}

.tsign {
  width: 2.5vw;
  margin: 0 0 0 -0.65vw;
  display: inline-block;
}
.blur-1 {
  filter: blur(1px);
}
.green {
  stroke: #27ae60;
  filter: brightness(0) saturate(100%) invert(51%) sepia(96%) saturate(360%) hue-rotate(93deg) brightness(90%) contrast(87%);
}
.red {
  stroke: #ff4500;
  filter: brightness(0) saturate(100%) invert(37%) sepia(77%) saturate(5080%) hue-rotate(7deg) brightness(105%) contrast(108%);
}
.gray {
  color: #bdbdbd70;
}
.gap {gap: 1vw;}
.gap-2 {gap: 2vw;}
.gap-3 {gap: 3vw;}

.menu::after, .menu-header::after {
  content: "";
  height: 1.65vw;
  width: 1.65vw;
  background-image: url(/static/image/triangle.svg);
  background-size: 1.65vw 1.65vw;
  display: inline-block;
  position: absolute;
  left: 0.2vw;
  bottom: -0.9vw;
  opacity: 0.3;
  transform: rotate(180deg);
}
.al3::after {
  left: 3vw;
}
.menu.open::after, .menu-header.open::after {
  transform: rotate(0deg);
  top: -0.9vw;
}

.menu .name-title, 
.menu .day-title,
.menu .month-title,
.menu .year-title {
  display: inline;
}
.menu .chart-title {
  display: none;
}

.menu.open .name-title, 
.menu.open .day-title,
.menu.open .month-title,
.menu.open .year-title,
.menu.open .tumbler {
  display: none;
}
.menu.open .chart-title {
  display: inline;
}

.small::after {
  bottom: -1.4vw;
}
.small.open::after {
  top: -1.4vw;
}

.calendar {
  position: relative;
  width: min-content;
}

.dropdown {
  position: relative;
  width: fit-content;
}

.calendar-title-clicker, .chart-title-clicker {
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 6.5vw;
  cursor: pointer;
}

.calendar-title-clicker:hover + .calendar-title {
  color: #ffffff;
}

.calendar-title {
  display: grid;
  grid-template-columns: auto auto auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 0.5vw;
  row-gap: 0;
  width: fit-content;
  margin-top: 0.7vw;
  color: #ffffff30;
  line-height: 3vw;
}

.clock-24, .clock-12 {
  display: grid;
  grid-template-columns: auto auto auto;
  margin-left: auto;
  margin-right: -1.2vw;
}
.clock-12 {
  grid-template-columns: auto auto auto auto;
}
.meridiem-title {
  margin-right: 0.6vw;
}

.place-title {
  margin-top: -1.2vw;
}

.calendar-title.open {
  color: #cecece;
}
.calendar-title.open .month-title, 
.calendar-title.open .year-wr {
  margin-left: 2vw;
}
.calendar-title.open .meridiem-wr {
  margin-left: 2.4vw;
}
.calendar-title.open .hour-wr {
  margin-left: 1.8vw;
}
.calendar-title.open .hour-separator,
.calendar-title.open .minute-wr {
  margin-left: 1.03vw;;
}
.title-place {
  grid-column: 1 / span 6
}

.months {
  position: absolute;
  background-color: #011c2c;
  z-index: 1;
  padding: 0 1vw;
  margin-left: -1vw;
  margin-top: 1px;
}
.month-name.selected {
  display: none;
}

.place-input {
  display: none;
  width: 42vw;
}

.day-input,
.hour-input,
.minute-input {
  width: 3.8vw;
  text-align: center;
  margin-top: -1px;
  margin-left: 0;
}
.year-input {
  width: 5.5vw;
  text-align: center;
  margin-top: -1px;
  margin-left: 0;
}
.calendar-title .hour-input,
.calendar-title .minute-input,
.calendar-title .year-input {
  display: none;
}

.calendar-title.open .place-title,
.calendar-title.open .hour-title,
.calendar-title.open .minute-title,
.calendar-title.open .year-title {
  display: none;
}

.calendar-title.open .place-input,
.calendar-title.open .hour-input,
.calendar-title.open .minute-input,
.calendar-title.open .year-input {
  display: block;
}

@keyframes fadein{
    0% { opacity:0; }
    66% { opacity:0; }
    100% { opacity:1; }
}

@-webkit-keyframes fadein{
    0% { opacity:0; }
    66% { opacity:0; }
    100% { opacity:1; }
}
.iwrapper::after,
.timer::after,
.manual::after,
.loading::after {
  position: absolute;
  right: -0.75vw;
  top: -0.75vw;
  font-size: 1vw;
  width: 1.5vw;
  height: 1.5vw;
  line-height: 1.5vw;
  text-align: center;
  border-radius: 50%;
  opacity: 0;
  content: "";
  background-color: #27ae42da;
  transition: opacity 0.5s ease-out;
}

.loading.g-dot::after, .timer.g-dot::after {
  right: 0;
  top: 0;
  font-size: 1.8vw;
  line-height: 3vw;
  width: 3vw;
  height: 3vw;
}

 .manual::after {
  content: attr(data-m);  
  background-color: #1a3241;
  opacity: 1;
  cursor: pointer;
}

.timer::after {
  content: attr(data-timer);  
  background-color: #1a3241;
  opacity: 1;
}

.loading::after {
  background-color: #27ae42da;
  opacity: 1;
}

.title-day:hover {
  color: #ffffff;
  cursor: pointer;
}

.calendar-days {
  display: grid;
  grid-template-columns: auto auto auto auto auto auto auto;
  gap: 0.4vw 2.9vw;
  margin: 2vw 0 2vw -0.8vw;
}

.prev-cover {
  z-index: 1;
  position: absolute;
  top: 0;
  width: 23vw;
  height: 3.3vw;
  background-image: linear-gradient(#011c2c, rgb(0 28 43 / 80%));
}
.next-cover {
  z-index: 1;
  position: absolute;
  top: 6.6vw;
  width: 23vw;
  height: 3.3vw;
  background-image: linear-gradient(rgb(0 28 43 / 80%), #011c2c);
}

.month-name {
  line-height: 3vw;
}

.day {
  line-height: 3.3vw;
  width: 3.3vw;
  text-align: center;
  border-radius: 50%;
  color: #bdbdbd;
  border: 1px solid transparent;
}

.day.today {
  background: #082536;
  color: #ffffff;
}

.day.selected {
  /* background: #143143; */
  color: #fff;
  border: 1px solid #cecece;
}

.day:hover, .day.today:hover {
  /*background: #4e616c;*/
  color: #ffffff;
  border: 1px solid #cecece;
  cursor: pointer;
}

.day.next-month, .day.prev-month {
  opacity: 0.3;
  filter: blur(1px);
}

.day:hover.next-month, .day:hover.prev-month {
  background: #4e616c;
  color: #ffffff;
  opacity: 1;
  filter: blur(0);
}

.place-results {
  width: 32.32vw;
  background-color: #011c2c;
  margin-top: -1px;
  padding-top: 1px;
  border-bottom: 1px solid #bdbdbd30;
  border-left: 1px solid #bdbdbd30;
  border-right: 1px solid #bdbdbd30;
}
.place-results.error {
  border-bottom: 1px solid #ff4400cb;
  border-left: 1px solid #ff4400cb;
  border-right: 1px solid #ff4400cb;
}
.place-results .item {
  margin: 0.6vw 0;
}


.grid {
  display: grid;
}

.grid-2 {
  display: grid;
  grid-template-columns: auto auto;
}

.grid-3 {
  display: grid;
  grid-template-columns: auto auto auto;
}

.grid-4 {
  display: grid;
  grid-template-columns: auto auto auto auto;
}

/*.chart-form {
  content-visibility: auto;
}*/

.chart-buttons {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1px;
}

.place-timezone {
  display: grid;
  grid-template-columns: 32.32vw auto;
  gap: 2.25vw;
}

.placelist-separator {
  height: 1px;
}

.title-details {
  display: grid;
  grid-template-columns: max-content max-content max-content  max-content max-content max-content max-content max-content max-content;
  line-height: 2.5vw;
  gap: 0.8vw;
  margin: 1vw 0; 
  max-width: 100%; 
}

.title-aspect {
  display: grid;
  grid-template-columns: max-content max-content max-content max-content;
  line-height: 2.5vw;
  gap: 0.8vw;
  margin: 1.3vw 0;
}

.details {
  display: grid;
  grid-template-columns: repeat(4, max-content);
  gap: 0.8vw;
  margin: 0;
}

tbody,
thead,
tr {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
}

.ML1 {margin-left: 0.5vw;}
.MLN1 {margin-left: -0.8vw;}
.MRN2 {margin-right: -3.6vw;}

.menu:hover {
  color: #ffffff;
  cursor: pointer;
}

.icon-expand {
  width: 1.65vw;
  margin-left: 0.7vw;
  position: absolute;
  transform: rotate(180deg);
}

.large + .icon-expand {
  margin-top: -0.4vw;
}

.largest + .icon-expand {
  margin-top: 0.6vw;
}

button {
  border: none;
  padding: 1.4vw 1vw;
  width: fit-content;
  background-color: #bdbdbd09;
  color: #bdbdbd;
  cursor: pointer;
}
button:hover {
  color: #ffffff;
}
button[disabled] {
  background-color: #bdbdbd06;
  color: #bdbdbd70;
  pointer-events: none;
}
button[disabled]::after {
  color: #bdbdbd;
}
button.small {
  padding: 0.7vw 1vw;
}
.encrypted {
  position: absolute;
  top: -1px;
  right: 1vw;
  z-index: -1;
}

.loom-line {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: drawLine 1s ease-out forwards;
  transition: stroke-opacity 1s ease; /* For smooth fading */
}
@keyframes drawLine { to { stroke-dashoffset: 0; } }

.red-line {
  /* Slower fade: 2.5 seconds instead of 0.8s */
  transition: stroke-opacity 2.5s ease-in-out; 
}

.absh {
  position: absolute;
  top: -50vw;
}

.error {
  color: #ff4400cb;
  fill: #ff4400cb;
}
.error::after {
  background-color: #ff4400cb;
  opacity: 1;
}

.tumbler {
  position: relative;
  display: inline-block;
  width: 4vw;
  height: 2.9vw;
  cursor: pointer;
}

.tumbler input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;  
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  transition: 0.3s;
  opacity: 0.7;
}

.slider svg {
  position: absolute;
  left: 0;
  top: 0.4vw;
  height: 1.7vw;
  transition: 0.3s;
  stroke: #cecece;
  stroke-width: 4px;
}

.slider svg circle {
  fill: none;
}
.tumbler:hover .slider {
  opacity: 1;
}

.tumbler input:focus-visible + .slider {
  outline: 0.2vw solid #cecece;
  outline-offset: 0.2vw;
}

.slider svg circle, .slider svg line {
  transition: 0.3s;
  transform-box: fill-box; 
  transform-origin: center;
}

input:checked + .slider svg circle {
  transform: translateX(29px);
  fill: #cecece;
}
input:checked + .slider svg line {
  transform: translateX(-17px);
}

.onlyharmony .tension {
  display: none;
}

.onlytension .harmony {
  display: none;
}

/* Hide the native radio button */
    .radio-wr input[type="radio"] {
      position: absolute;
      opacity: 0;
      width: 0;
      height: 0;
    }

    /* Style the label to act as the button */
    .radio-wr {
      display: inline-flex;
      align-items: center;
      cursor: pointer;
      margin-right: 1.4vw;
      user-select: none;
    }

    /* Style the SVG */
    .radio-wr svg {
      width: 1.4vw;
      height: 1.4vw;
      transition: 300ms;
      fill: #cecece00;
      stroke-width: 3;
      stroke: #cecece;
      opacity: 0.5;
      filter: blur(1px);
    } 
    /* Label text styling */
    .radio-wr span {
      margin-left: 1.4vw;
      filter: blur(1px);
      transition: 300ms;
    }

    /* Change appearance when checked */
    .radio-wr input[type="radio"]:checked + svg {
      fill: #cecece;
      filter: blur(0px);
    }

    .radio-wr input[type="radio"]:checked + svg + span {
      filter: blur(0px);
    }

    /* Hover and focus states */
    .radio-wr input[type="radio"]:hover + svg,
    .radio-wr input[type="radio"]:focus + svg,
    .radio-wr input[type="radio"]:hover + svg + span,
    .radio-wr input[type="radio"]:focus + svg + span {
      fill: #cecece;
      opacity: 1;
      filter: blur(0px);
    }

    .radio-wr input[type="radio"]:checked:hover + svg,
    .radio-wr input[type="radio"]:checked:focus + svg,
    .radio-wr input[type="radio"]:checked:hover + svg + span,
    .radio-wr input[type="radio"]:checked:focus + svg + span{
      fill: #cecece;
      opacity: 1;
      filter: blur(0px);
    }


   



@media (max-width: 490px) {

  #app {
    grid-template-columns: 1fr;
    grid-template-rows: max-content auto auto auto;
    grid-template-areas: 
    "wheel"
    "main"
    "nav"
    "footer"; 
  }


  nav, .footer {
    width: 100%;
    text-align: left;
  }

  nav {
    margin-top: 12vw;
  }

  nav li, nav a {
    justify-self: start;
  }

  .item {
    margin: 3.6vw 0;
  }
  .title-day:hover,
  .menu:hover,
  .item:hover {
  color: inherit;
  cursor: inherit;
  }

  input, .input {
    width: 83vw;
    margin: 0;
    line-height: 9vw;
    font-size: 4vw;
    padding: 0 3vw;
  }

  button {
    padding: 6vw 3vw;
  }

.day:hover, .day.today:hover {
  /*background: #4e616c;*/
  color: inherit;
  border: inherit;
  cursor: inherit;
}
.day:hover.next-month, .day:hover.prev-month {
  background: inherit;
  color: inherit;
  opacity: inherit;
  filter: inherit;
}
 

  main {
    width: 100%;
    padding-top: 0;
  }

  .calendar-title-clicker, .chart-title-clicker {
    height: 17vw;
}

  .mt { margin-top: 2vw; }
  .mb { margin-bottom: 2vw; }
  .ml { margin-left: 2vw; }
  .mr { margin-right: 2vw; }

  .mt2 { margin-top: 6vw; }
  .mb2 { margin-bottom: 6vw; }
  .ml2 { margin-left: 6vw; }
  .mr2 { margin-right: 6vw; }

  .mt3 { margin-top: 7.5vw; }
  .mb3 { margin-bottom: 7.5vw; }
  .ml3 { margin-left: 7.5vw; }
  .mr3 { margin-right: 7.5vw; }

  .mt5 { margin-top: 12vw; }
  .mb5 { margin-bottom: 12vw; }
  .ml5 { margin-left: 12vw; }
  .mr5 { margin-right: 12vw; }

  .mt11 { margin-top: 22vw; }
  .mb11 { margin-bottom: 22vw; }
  .ml11 { margin-left: 22vw; }
  .mr11 { margin-right: 22vw; }



  .calendar-title {
    column-gap: 1.5vw;
    margin-top: 6vw;
  }

  .menu::after, .menu-header::after {
    height: 3.65vw;
    width: 3.65vw;
    background-size: 3.65vw 3.65vw;
    left: 0.7vw;
    bottom: -2.8vw;
    top: auto;
  }

  .title-details.menu::after {
    height: 3.65vw;
    width: 3.65vw;
    background-size: 3.65vw 3.65vw;
    left: 2.2vw;
    bottom: -1.5vw;
    top: auto;
  }

  .small::after {
    bottom: -1vw;
}

   .menu.open::after, .menu-header.open::after {
    bottom: auto;
    top: -1.2vw;
  }

  .calendar-days {
    gap: 3.8vw;
    margin: 6vw -6vw 6vw -0.8vw;
  }

  

  #wheel, .sky {
	width: 100%;
  }

  #logo-wr {
        font-weight: 600;
        position: absolute;
        top: -1.5vw;
        left: -0.2vw;
        margin: 0;
        width: 58vw;
        z-index: 1;
    }

  p {
    margin: 6vw 0;
  }



  #content, nav, .footer {
    padding: 9vw;
  }

  #account-guest, #account-user {
    margin-top: 9vw;
  }

  .title-details {
        line-height: 9.5vw;
        gap: 1vw;
        margin: 6vw -1.5vw;
    }

  .title-aspect {
    line-height: 9.5vw;
    gap: 1vw;
    margin: 0.5vw -1.5vw;
  }

  .calendar {
    margin-left: 0.8vw;
  }

  .calendar-title.open {
    margin-right: -6vw;
  }
  


  .calendar-days {
    margin-left: -3.0vw;
  }

  .day {
    line-height: 9vw;
    width: 9vw;
  }

  .calendar-title {
    line-height: 9vw;
}


.calendar-title.open .year-wr {
  margin-left: 1vw;
}
.calendar-title.open .month-title {
  margin-left: 1vw;
}
.calendar-title.open .meridiem-wr {
  margin-left: 7vw;
} 

.calendar-title.open .hour-wr {
  margin-left: 7vw;
}
.calendar-title.open .clock-12 .hour-wr {
        margin-left: 1vw;
}
.calendar-title.open .hour-separator {
  margin-left: 1vw;
}
.calendar-title.open .minute-wr {
  margin-left: 1vw;
}

.months {
    padding: 0 15vw;
    margin-left: -15vw;
}
.month-name {
    line-height: 9vw;
}
.meridiem-option {
  position: relative;
}

  .place-title {
    margin-top: -3vw;
}

  .place-input {
    width: 82vw;
  }
  .year, .year-input {
    width: 17vw;
}

.day-input, .hour-input, .minute-input {
    width: 11.5vw;
}

.calendar-title.open .timer::after {
  right: -3vw;
  top: -4vw;
  font-size: 3vw;
  width: 6vw;
  height: 6vw;
  line-height: 6vw;
}

  .tsign {
    width: 9.5vw;
  }

  .loading-container { width: 88%; }

  body, select, .txt {
    font-size: 4vw;
    line-height: 5.6vw;
  }
  .lh3 { line-height: 9vw; }

  .login-register {
    padding-right: 0;
  }

  .birthtime {
    margin-right: -1.3vw;
    display: grid;
    grid-template-columns: 1.3fr 0.7fr;
    grid-template-rows: auto auto;
    gap: 0;
    grid-template-areas: 
      "legend legend"
      "date time";
  }

  .birthtime.en {
    margin-right: -1.3vw;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 6vw 0;
    grid-template-areas: 
      "legend time"
      "date date";
  }

  .checkbox {
    width: 9vw;
    height: 9vw;
  }

  .checkbox input {
    height: 9vw;
    width: 9vw;
    top: 1vw;
    left: 1vw;
  }
  .checkmark {
    height: 9vw;
    width: 9vw;
  }
  .checkmark:after {
    left: 2.1vw;
    top: -0.1vw;
    width: 3vw;
    height: 5.8vw;
    border: solid #cecece;
    border-width: 0 4px 4px 0;
}

  .checkbox .label {
    margin-left: 12vw;
    line-height: 9vw;
  }

  .sky, .full .sky {
    height: 96vw;
    margin: 7vw 0 18vw 1.8vw;
  }
  .planet {
    height: 9vw;
    width: 9vw;
  }
  .info {
    position: absolute;
    transform: rotate(-90deg);
    transform-origin: left;
    top: -2.2vw;
    left: 1.8vw;
    width: 40vw;
    height: 3.6vw;
    line-height: 9vw;
  }
  .info.top {
    top: 49vw;
  }
  .orbit-asc {
    display: none;
  }

  #wheel {
    position: relative;
    width: 100%;
    height: auto;
    left: 0;
    margin: 21vw 0 -7vw 0;
  }
  #wheel svg {
    height: auto;
  }

  #wheel-astrology-radix-planets {
    opacity: 1;
  }

  .AVR, .AVL {top: -6vw; height: 12vw; width: 12vw; }
  .AVR {right:-3.5vw;}
  .AVL {left:-3.5vw;}

  a .title {max-width:100%;}

  h1, h2, .h1, .large, .title, textarea, button {
    font-size: 4.9vw;
    line-height: 6.5vw;
  }
  
  
  .title { margin-top: -7.7vw; min-width: 15vw;}
  .add {
      height: 8.4vw;
      padding: 1.6vw;
  }
  .mt5 {
    margin-top: 12vw;
  }
  .mt { margin-top: 3.6vw; }
  .mt2 { margin-top: 6vw; }

  .SCR {display: none;}
  
  nav section {
      max-width: 100%;
  }
  .menu-items {
      position: relative;
      display: block;
  }


  .phone {
      margin-top: 1.8vw;
  }
  .messenger, .skype, .whatsup {

      width: 12vw;
      height: 12vw;
  }
  .contacts {
      min-height: 37.6vw;
  }
  .share {
    height: 15.6vw;
    width: 15.6vw;
  }

  .social {
      right: 75.6vw;
      width: 74vw;
      background-color: #464646;
  }
  .social.open {
      opacity: 1;
      right: 15.6vw;
  }
  .social .icon {
      width: 15.6vw;
      height: 15.6vw;
  }

  .cookies {
    margin-bottom: 11vw;
    margin-top: 4.5vw;
    opacity: 0.2;
    text-align: left;
    padding: 3vw 0 7.8vw 12vw;
  }

  #content-login {
    margin-top: 12vw;
  }
  
  #login-form {
    margin-top: 17vw;
  }

  .toggle-password {
    width: 12vw;
    height: 12vw;
  }
  .toggle-password svg {
    transform: translateY(-2.2vw);
  }

  .mt1p {
    margin-top: 5.5vw;
  }

  .place-timezone {
      grid-template-columns: 59.32vw auto;
      gap: 2.25vw;
  }

  .encrypted {
    position: relative;
    width: 100%;
    top: -1px;
    padding-right: 2vw;
  }

  .error-top {
    height: 18vw;
    padding-top: 6vw;
  }

  .tumbler {
      width: 14vw;
      height: 5vw;
  }

  .slider svg {
    height: 6vw;
    stroke-width: 4px;
  }


.error::after {
    background-color: #ff4400cb;
    opacity: 1;
}
.loading::after {
    background-color: #27ae42da;
    opacity: 1;
}
.iwrapper::after, .timer::after, .manual::after, .loading::after {
    right: -3vw;
    top: -3vw;
    font-size: 3vw;
    width: 6vw;
    height: 6vw;
    line-height: 4.5vw;
}

.radio-wr {
    display: block;
    margin-top: 6vw;
}

.radio-wr svg {
    width: 4.4vw;
    height: 4.4vw;
    top: 1vw;

}
}

@media print {
  @page {
    background: #011c2c;
  }
  html {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  #wheel {
    position: relative;
    margin-left: 40vw;
  }
  .article, article {
    margin-top: -18vw;
  }
  main {
    width: 100%;
  }
  nav {
    display: none;
  }
}