:root {
  color-scheme: light;
}

html {
  color-scheme: light;
}

body {
  font-family: 'Rubik', sans-serif;
  font-weight: 500;
  font-size: 1em;
  color: #000;
  margin-top: 0;
  margin-bottom: 0;
  background: rgb(245, 248, 255);
  -webkit-font-smoothing: antialiased;
}

@font-face {
  font-family: 'Rubik';
  src: url('/api/ecs/get/rubik/Rubik-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: 'Rubik';
  src: url('/api/ecs/get/rubik/Rubik-Regular.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: 'Rubik';
  src: url('/api/ecs/get/rubik/Rubik-Medium.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: 'Rubik';
  src: url('/api/ecs/get/rubik/Rubik-SemiBold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: 'Rubik';
  src: url('/api/ecs/get/rubik/Rubik-Bold.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
}

h1 {
  font-weight: 800;
  font-size: 2.4em;
  padding: 0;
  margin: 0;
  display: inline;
}
h2 {
  font-weight: 600;
  font-size: 2.2em;
  padding: 0;
  margin: 0;
  display: inline;
}
h3 {
  font-weight: 600;
  font-size: 1.6em;
  padding: 0;
  margin: 0;
  display: inline;
}
h4 {
  font-weight: 400;
  font-size: 1.2em;
  padding: 0;
  margin: 0;
  display: inline;
}
h5 {
  font-weight: 600;
  font-size: 1.2em;
  padding: 0;
  margin: 0;
  display: inline;
}

.bigger {
  font-weight: 600;
  font-size: 4.8em;
}

a[href^="tel"] {
    color: inherit !important;
    text-decoration: none !important;
    pointer-events: none;
    cursor: default;
}

.nw {white-space: nowrap}
.line {box-shadow: 0 -1px rgba(0,0,0,0.1);}
.line-left {box-shadow: -1px 0 rgba(0,0,0,0.1);}
.shadow {box-shadow: 0 .1em .1em 0 rgba(204,204,204,.3), 0 .2em .2em 0 rgba(204,204,204,.2), 0 .4em .4em 0 rgba(204,204,204,.1);}
.shadow-text {text-shadow: 0em .1em .05em rgba(0, 0, 0, 0.3); }
.mono {font-family: monospace;}

.line-top {box-shadow: 0 -1px rgba(0,0,0,1)}
.line-center {box-shadow: 0 -1px rgb(245, 248, 255), -1px 0 rgb(245, 248, 255), 1px 0 rgb(245, 248, 255)}


.round-5 {border-radius: .5em;}
.round-10 {border-radius: 1em;}
.round-15 {border-radius: 1.5em;}
.round-20 {border-radius: 2em;}

a:link, a:visited, a:focus, a:hover, a:active {
  font-size: 1em;
  word-break: normal;
  text-decoration: none;
  outline: none;
  color: #fff;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  -moz-tap-highlight-color: rgba(0,0,0,0);
}
a.link-blue:link, a.link-blue:visited, a.link-blue:focus, a.link-blue:hover, a.link-blue:active {color: #0099FF;}
a.link-black:link, a.link-black:visited, a.link-black:focus, a.link-black:hover, a.link-black:active {color: #000;}

.btn-light {
  background-color: rgba(0,153,255,0.1);
  border-radius: 1.25em;
  padding: 1.5em;
}

.btn-white {
  background-color: #fff;
  border-radius: 1.25em;
  padding: 1.5em;
  box-shadow: 0 .1em .1em 0 rgba(204,204,204,.3), 0 .2em .2em 0 rgba(204,204,204,.2), 0 .4em .4em 0 rgba(204,204,204,.1);
}

.btn-white-gradient {
  background-color: #fff;
  background: linear-gradient(to right, #fff 80%, rgba(255,92,0,.1));
  border-radius: 1.25em;
  padding: 1.5em;
  box-shadow: 0 .1em .1em 0 rgba(204,204,204,.3), 0 .2em .2em 0 rgba(204,204,204,.2), 0 .4em .4em 0 rgba(204,204,204,.1);
}

.btn-white-gradient:hover {
  background: linear-gradient(to right, #fff 70%, rgba(255,92,0,.15));
}

.btn-orange {
  background-color: #FF5C00;
  border-radius: 1.25em;
  padding: 1.5em;
  box-shadow: 0 .1em .1em 0 rgba(255,51,0,.3), 0 .2em .2em 0 rgba(255,51,0,.2), 0 .4em .4em 0 rgba(255,51,0,.1);
}
#sendSmsBtn.disabled {
  opacity: 0.5;
  pointer-events: none;
  -border-radius: 1.25em;
  -padding: 1.5em;
  -box-shadow: 0 .1em .1em 0 rgba(255,51,0,.3), 0 .2em .2em 0 rgba(255,51,0,.2), 0 .4em .4em 0 rgba(255,51,0,.1);
}

.btn-gift {
  background: radial-gradient(
    circle at 30% 30%,
    #ffffff 0%,
    #fbf8f3 25%,
    #f2ebdf 45%,
    #e5ded0 65%,
    #e0ebf5 80%,
    #f5e6eb 92%,
    #d1c7b7 100%
  );
}

.btn-orange-round {
  background-color: #FF5C00;
  border-radius: 4em;
  padding: 1.5em;
  box-shadow: 0 .1em .1em 0 rgba(255,51,0,.3), 0 .2em .2em 0 rgba(255,51,0,.2), 0 .4em .4em 0 rgba(255,51,0,.1);
}

.btn-brainbox {
  background-color: #2E85EC;
  color: #fff;
  border-radius: 4em;
  padding: .75em 3em .75em 3em;
}

.btn-sbp {
  background-color: #1B0A40;
  border-radius: 4em;
  padding: 1.5em;
}
.btn-sbp-success {
  background-color: #1B0A40;
  border-radius: 4em;
  padding: 1.5em;
}

.btn-warning {
  background-color: transparent;
  border-radius: 1.25em;
  padding: 1.5em;
}

.cell {
  background-image: radial-gradient( circle farthest-corner at 100% 0%, #ffe600 0%, #f84000);
  border-radius: 2em;
  padding: 2em;
  box-shadow: 0 .2em .2em 0 rgba(204,102,51,0.2), 0 .4em .4em 0 rgba(204,102,51,.1), 0 .8em .8em 0 rgba(204,102,51,.1);
}

.cell-ticket {
  background-image: radial-gradient( circle farthest-corner at 100% 0%, #ffe600 0%, #f84000);
  border-radius: 2em;
  padding: 2em;
  mask:
        radial-gradient(circle 0.75em at left center, transparent 100%, black 100%) left,
        radial-gradient(circle 0.75em at right center, transparent 100%, black 100%) right,
        linear-gradient(black, black);
  mask-size: 0.75em 100%, 0.75em 100%, calc(100% - 1.5em) 100%;
  mask-repeat: no-repeat;
  mask-position: left, right, center;
  box-shadow: 0 .2em .2em 0 rgba(204,102,51,0.2), 0 .4em .4em 0 rgba(204,102,51,.1), 0 .8em .8em 0 rgba(204,102,51,.1);
}



.cell-old {
  background-image: radial-gradient( circle farthest-corner at 100% 0%,  rgba(255,209,67,1) 0%, rgba(255,145,83,1) 50% );
  border-radius: 2em;
  padding: 2em;
  box-shadow: 0 .2em .2em 0 rgba(204,102,51,0.2), 0 .4em .4em 0 rgba(204,102,51,.1), 0 .8em .8em 0 rgba(204,102,51,.1);
}

.cell-kids {
  background-image: radial-gradient( circle farthest-corner at 100% 0%, rgba(228,107,232,1) 0%, rgba(87,27,226,1) 80% );
  border-radius: 2em;
  padding: 2em;
  box-shadow: 0 .2em .2em 0 rgba(102,0,255,0.2), 0 .4em .4em 0 rgba(102,0,255,.1), 0 .8em .8em 0 rgba(102,0,255,.1);
}

.cell-code {
  background: #000;
  border-radius: 2em;
  padding: 1.5em;
}

.cell-light {
  background-color: rgba(0,153,255,0.1);
  border-radius: 4em; /*2em*/
  padding: 1.5em;
}

.cell-purple {
  background-color: #6633FF;
  border-radius: 2em;
  padding: 1.5em;
}

.cell-gradient {
  border-radius: 2em;
  padding: 1.5em;
  background: linear-gradient(rgba(255, 255, 255, 0) 0%, rgba(253, 187, 45, .1) 100%);
}

.cell-warning {
  background-color: rgba(255,102,0,0.1);
  border-radius: 2em;
  padding: 1.5em;
}

.point {cursor: pointer;}
.padding-0 {  padding: 0 !important;}
.padding-10 { padding: 1em !important;}
.padding-15 { padding: 1.5em !important;}
.padding-20 { padding: 2em !important;}
.padding-15-5 { padding: 1.5em .5em !important;}

.disabled {cursor: default;}
.cell-disabled {opacity: 0.5;}

.o-20 {opacity: 0.2;}
.o-30 {opacity: 0.3;}
.o-50 {opacity: 0.5;}

.mg {margin: 0;}

.hidden {opacity: 0;}
.hide {display: none !important;}

.fix-anchor-price {padding-right: 1em;}
.anchor-price {
  color: rgba(255,255,255,.7);
  position: relative;
  display: inline-block;
  font-size: 1.8em;
  font-weight: 600;
}
.anchor-price img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;         
  height: 100%;
  pointer-events: none;
}

.img-fix {transform: translateY(1.5em);}

.footer {
  border-radius: 2em 2em 0 0;
  background-color: #000;
}

.time {
    background: rgba(0,0,0,.15);
    box-shadow: inset 0 .2em .2em 0 rgba(0,0,0,.1);
    padding: .2em .6em;
    border-radius: .5em;
    color: #fff;
    white-space: nowrap;
    display: inline-block;
}

.tag {
    background: #FF5C00;
    padding: .2em .4em;
    border-radius: .5em;
    color: #fff;
    white-space: nowrap;
    display: inline-block;
}

.tag-orange {
    background: #FF5C00;
    padding: .5em 1em;
    border-radius: 2em;
    color: #fff;
    white-space: nowrap;
    display: inline-block;
}

.tag-none {
    background: transparent;
    padding: .5em 1em;
    border-radius: 2em;
    color: #000;
    white-space: nowrap;
    display: inline-block;
}

.tag-black {
    background: #000;
    padding: .5em 1em;
    border-radius: 2em;
    color: #fff;
    white-space: nowrap;
    display: inline-block;
}

.btn-black {
    cursor: pointer;
    background: #000;
    padding: .5em 1em;
    border-radius: 2em;
    color: #fff;
    border: none;
    white-space: nowrap;
    display: inline-block;
}

.tag-footer {
    background: rgba(255,255,255,.2);
    padding: .5em 1em;
    border-radius: 2em;
    color: #fff;
    white-space: nowrap;
    display: inline-block;
    margin: .5em .25em;
}

.drop-footer {
    background: transparent;
    border: .1em solid rgba(255,255,255,.2);
    padding: .5em 1em;
    border-radius: .5em;
    color: rgba(255,255,255,.5);
    white-space: nowrap;
    display: inline-block;
}

.tag-light {
    background-color: rgba(0,153,255,0.1);
    padding: .5em 1em;
    border-radius: 2em;
    color: #0099FF;
    white-space: nowrap;
    display: inline-block;
}

.tag-purple {
    background-color: #6633FF;
    padding: .5em 1em;
    border-radius: 2em;
    color: #fff;
    white-space: nowrap;
    display: inline-block;
    border: none;
}

#city {
    display: inline-block;
    transition: opacity 1s ease;
}

.hit {
  -webkit-animation: slidein 1s; /* Safari, Chrome and Opera > 12.1 */
     -moz-animation: slidein 1s; /* Firefox < 16 */
      -ms-animation: slidein 1s; /* Arialnet Explorer */
       -o-animation: slidein 1s; /* Opera < 12.1 */
          animation: slidein 1s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  background-color: red;
  border-radius: .2em;
}

.hit-hide {
  -webkit-animation: slidein 1s; /* Safari, Chrome and Opera > 12.1 */
     -moz-animation: slidein 1s; /* Firefox < 16 */
      -ms-animation: slidein 1s; /* Arialnet Explorer */
       -o-animation: slidein 1s; /* Opera < 12.1 */
          animation: slidein 1s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  background-color: transparent;
  border-radius: .2em;
}

.purple { color: #6633FF;}
.orange { color: #FF5C00;}
.green {  color: #009933;}
.blue {   color: #0099FF;}
.black {  color: #000;}
.black-50 { color: rgba(0,0,0,.5);}
.white {  color: #fff;}
.white-50 { color: rgba(255,255,255,.5);}

.black-bg {   background-color: #000;}
.purple-bg {  background-color: #6633FF;}
.orange-bg {  background-color: #FF5C00;}



.brainbox-gradient {
  background: linear-gradient(to top, rgba(46, 133, 236,.2), rgba(255,255,255,0));
}

.purple-radial {
  background: radial-gradient(closest-side,#6633FF, rgb(245, 248, 255));
}

.full {width: 100%;}
.v-middle {vertical-align: middle}
.icon { height: 1.2em;}
.icon-support { height: 2em;}
.icon-3em { height: 3em;}

.icon-big { height: 8em;}
.fav {  max-height: 3em;}
.logo { max-height: 5em;}
.img {  max-height: 8em;}
.img-social {
    height: 3em;
    padding: 1em;
}
.img-partner {
    height: 5em;
    padding: 1em;
    opacity: .5;
}

.top-2 {    padding-top: .25em;}
.top-5 {    padding-top: .5em;}
.bottom-5 { padding-bottom: .5em;}
.top-10 {   padding-top: 1em;}
.bottom-10 {padding-bottom: 1em;}
.top-20 {   padding-top: 2em;}
.bottom-20 {padding-bottom: 2em;}
.top-40 {   padding-top: 4em;}
.bottom-40 {padding-bottom: 4em;}

.btn-white-input {
  font-family: 'Rubik', sans-serif;
  font-weight: 600;
  font-size: 1.2em;
  margin: 0;
  display: inline;
  text-align: center;
  color: #000;

  cursor: pointer;
  width: 100%;
  background-color: #fff;
  border-radius: 1.25em;
  padding: 1.5em;
  box-shadow: 0 .1em .1em 0 rgba(204,204,204,.3), 0 .2em .2em 0 rgba(204,204,204,.2), 0 .4em .4em 0 rgba(204,204,204,.1);
  border: none;
  outline: none;
}

.btn-round {
  width: 100%;
  aspect-ratio: 1/1;
  background-color: rgba(0,153,255,0.1);;
  border-radius: 5em;
  display: flex;
  align-items: center;
  justify-content: center;
}


.input-light {
  font-family: 'Rubik', sans-serif;
  font-weight: 600;
  font-size: 1.2em;
  margin: 0;
  display: inline;
  text-align: center;
  color: #000;
 
  width: 100%;
  box-shadow: inset 0 .1em .1em 0 rgba(204,204,204,.5), inset 0 .2em .2em 0 rgba(204,204,204,.3), inset 0 .4em .4em 0 rgba(204,204,204,.2);
  border-radius: 1.25em;
  padding: 1.5em;
  border: none;
  outline: none;
}
.input-light::placeholder {color: rgba(0,0,0,0.25);}
.input-light:focus::placeholder {color: rgba(0,0,0,0.25);}

.input-new {
    font-family: 'Rubik', sans-serif;
    box-shadow: 0 .1em .1em 0 rgba(204,204,204,.5);
    width: 100%;
    padding: 1rem;
    border-radius: 1.5rem;
    font-size: 2.2em;
    font-weight: 600;
    border: none;
    background: transparent;
    text-align: center;
}
.input-new::placeholder {color: rgba(0,0,0,0.25);}
.input-new:focus::placeholder {color: rgba(0,0,0,0.25);}

.font1 {font-size: 1em !important;}

select {
  font-family: 'Rubik', sans-serif;
  font-weight: 500;
  font-size: 1em;
	border: none; 
  background-color: #fff;
	cursor: pointer; 
  padding: 1em;
  width: 100%;
  border-radius: 1em;
  outline: none;
  color: #000;
  box-shadow: inset 0 .1em .1em 0 rgba(204,204,204,.5), inset 0 .2em .2em 0 rgba(204,204,204,.3), inset 0 .4em .4em 0 rgba(204,204,204,.2);
  -webkit-appearance: none;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  -moz-tap-highlight-color: rgba(0,0,0,0);
}

.map {
  border-radius: 1.5rem !important;
  width:100%;
  aspect-ratio: 5/3;
  box-shadow: 0 1em 1em rgba(0,102,255,0.10);
}

#map {
  touch-action: pan-x pan-y;
}

.map-yandex {
  border-radius: 1.5rem !important;
  overflow: hidden;
  box-shadow: 0 1em 1em rgba(0,102,255,0.10);
}

.round {  border-radius: 1.5rem !important;}

.color-line {       box-shadow: 0 .1em .1em 0 rgba(204,204,204,.3), 0 .2em .2em 0 rgba(204,204,204,.2), 0 .4em .4em 0 rgba(204,204,204,.1);}
.color-line-blue {  box-shadow: 0 .1em .1em 0 rgba(0,153,255,.3), 0 .2em .2em 0 rgba(0,153,255,.2), 0 .4em .4em 0 rgba(0,153,255,.1);}
.color-line-darkblue {  box-shadow: 0 0em .1em .35em rgba(0,102,255,.2), 0 .1em .1em 0 rgba(0,51,204,.3), 0 .2em .2em 0 rgba(0,102,255,.2), 0 .6em .6em 0 rgba(0,153,255,.1);}
.color-line-violet {box-shadow: 0 .1em .1em 0 rgba(153,0,255,.3), 0 .2em .2em 0 rgba(153,0,255,.2), 0 .4em .4em 0 rgba(153,0,255,.1);}
.color-line-cherry {box-shadow: 0 .1em .1em 0 rgba(204,51,102,.3), 0 .2em .2em 0 rgba(204,51,102,.2), 0 .4em .4em 0 rgba(204,51,102,.1);}
.color-line-tiger { box-shadow: 0 .1em .1em 0 rgba(255,153,0,.3), 0 .2em .2em 0 rgba(255,153,0,.2), 0 .4em .4em 0 rgba(255,153,0,.1);}
.color-line-orange {box-shadow: 0 .1em .1em 0 rgba(255,204,51,.3), 0 .2em .2em 0 rgba(255,204,51,.2), 0 .4em .4em 0 rgba(255,204,51,.1);}

.fade {
    -webkit-animation: fadein 1s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 1s; /* Firefox < 16 */
        -ms-animation: fadein 1s; /* Arialnet Explorer */
         -o-animation: fadein 1s; /* Opera < 12.1 */
            animation: fadein 1s;
}

@keyframes fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@-webkit-keyframes fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes slidein {
  from { box-shadow: 0 0 0 .25em red; }
  to   { box-shadow: 0 0 0 .35em red; }
}
@-webkit-keyframes slidein {
  from { box-shadow: 0 0 0 .25em red; }
  to   { box-shadow: 0 0 0 .35em red; }
}

.checkbox-wrapper-5 .check {
  --size: 40px;

  position: relative;
  background: #00CC00;
  line-height: 0;
  perspective: 400px;
  font-size: var(--size);
}

.checkbox-wrapper-5 .check input[type="checkbox"],
.checkbox-wrapper-5 .check label,
.checkbox-wrapper-5 .check label::before,
.checkbox-wrapper-5 .check label::after,
.checkbox-wrapper-5 .check {
  appearance: none;
  display: inline-block;
  border-radius: var(--size);
  border: 0;
  transition: .35s ease-in-out;
  box-sizing: border-box;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  -moz-tap-highlight-color: rgba(0,0,0,0);
}

.checkbox-wrapper-5 .check label {
  width: calc(1.8 * var(--size));
  height: var(--size);
  background: #CCCCCC;
  overflow: hidden;
}

.checkbox-wrapper-5 .check input[type="checkbox"] {
  position: absolute;
  z-index: 1;
  width: calc(.8 * var(--size));
  height: calc(.8 * var(--size));
  top: calc(.1 * var(--size));
  left: calc(.1 * var(--size));
  background: linear-gradient(45deg, #dedede, #ffffff);
  box-shadow: 0 6px 7px rgba(0,0,0,0.3);
  outline: none;
  margin: 0;
}

.checkbox-wrapper-5 .check input[type="checkbox"]:checked {
  left: calc(0.9 * var(--size));
}

.checkbox-wrapper-5 .check input[type="checkbox"]:checked + label {
  background: transparent;
}

.checkbox-wrapper-5 .check label::before,
.checkbox-wrapper-5 .check label::after {
  content: "· ·";
  position: absolute;
  overflow: hidden;
  left: calc(.15 * var(--size));
  top: calc(.5 * var(--size));
  height: var(--size);
  letter-spacing: calc(-0.04 * var(--size));
  color: #9b9b9b;
  font-family: "Times New Roman", serif;
  z-index: 2;
  font-size: calc(.6 * var(--size));
  border-radius: 0;
  transform-origin: 0 0 calc(-0.5 * var(--size));
  backface-visibility: hidden;
}

.checkbox-wrapper-5 .check label::after {
  content: "●";
  top: calc(.65 * var(--size));
  left: calc(.2 * var(--size));
  height: calc(.1 * var(--size));
  width: calc(.35 * var(--size));
  font-size: calc(.2 * var(--size));
  transform-origin: 0 0 calc(-0.4 * var(--size));
}

.checkbox-wrapper-5 .check input[type="checkbox"]:checked + label::before,
.checkbox-wrapper-5 .check input[type="checkbox"]:checked + label::after {
  left: calc(1.15 * var(--size));
  top: calc(.4 * var(--size));
  line-height: calc(.1 * var(--size));
  transform: rotateY(360deg);
}

.checkbox-wrapper-5 .check input[type="checkbox"]:checked + label::after {
  height: calc(.16 * var(--size));
  top: calc(.55 * var(--size));
  left: calc(1.2 * var(--size));
  font-size: calc(.6 * var(--size));
  line-height: 0;
}

.rules-box {
  transition: all 0.3s ease;
}
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-8px); }
  40%, 80% { transform: translateX(8px); }
}
.shake {
  animation: shake 0.5s;
}

.pay-panel {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: all .3s ease;
}

.pay-panel.open {
    max-height: 10em;
    opacity: 1;
}

#bindMessage {
    opacity: 0;
    transform: translateY(-5px);

    transition:
        opacity 0.4s ease,
        transform 0.4s ease;
}

#bindMessage.show {
    opacity: 1;
    transform: translateY(0);
}

#bindMessage.bind-success {
    color: #4caf50;
}

#bindMessage.bind-error {
    color: #e53935;
}

#bindMessage.hide {
    display: block;
    visibility: hidden;
    opacity: 0;
}

#bindMessage.show {
    visibility: visible;
    opacity: 1;
}