* {
  padding: 0;
  margin: 0;
  outline: none;
  box-sizing: border-box;
  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
}
html {
  overflow: hidden;
}
html,
body {
  height: 100%;
  width: 100%;
  
} 
body.blue {
  background-color: #4795DD;
}

body {
  display: flex;
  flex-direction: column;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  margin-bottom: 20px;
}
.wrap h1,
.wrap h2,
.wrap h3,
.wrap h4,
.wrap h5,
.wrap h6 {
  margin-bottom: 0;
}
.hidden {
  display: none;
}
button {
  cursor: pointer;
}
.error {
  color: red;
  padding-bottom: 10px;
}

/* ===== Установка ===== */
/* .installContainer {
  width: 100%;
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fff;
  z-index: 9999;
  bottom: 0;
  border-radius: 10px 10px 0 0;
  -webkit-box-shadow: 0px -4px 30px 8px rgba(71, 149, 221, 0.6);
  -moz-box-shadow: 0px -4px 30px 8px rgba(71, 149, 221, 0.6);
  box-shadow: 0px -4px 30px 8px rgba(71, 149, 221, 0.6);
} */
.installContainer.hidden {
  display: none;
}
.installContainer .wrap-install {
  display: flex;
  width: fit-content;
  flex-direction: column;
  align-items: center;
  gap: 15px;
}
.installContainer .wrap-install .text-install {
  color: #000000;
  width: fit-content;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-top: 10px;
}
.installContainer .wrap-install .title {
  font-weight: 700;
  width: fit-content;
}
.installContainer .wrap-install span {
  text-align: center;
}
@media all and (display-mode: standalone) {
  .installContainer.hidden {
    display: none;
  }
  /* body {
    height: 100vh;
    min-height:calc(100%);
    max-height:calc(100vh - 56px);
  } */
}
.start-button {
  display: flex;
  gap: 20px;
  flex-direction: row;
  margin-bottom: 10px;
}
.start-button button {
  border: 0;
  background: unset;
}
.start-button button img {
  width: 30px;
}
/* Card */
.wrap-card .swiper {
  width: 100%;
  margin: 10px 0;
  max-width: 800px;
}
.wrap-card .swiper-slide {
  background-position: center;
  background-size: cover;
  width: 300px;
  height: 200px;
}
.wrap-card .swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.wrap-card .info {
  max-width: 800px;
  margin-bottom: 20px;
  font-size: 20px;
}
.wrap-card .info .popularity .title,
.wrap-card .info .workload .title {
  font-weight: 700;
  margin: 10px 0 5px 0;
}
.wrap-card .info .workload .title {
  margin-top: 20px;
}
.wrap-card .info .workload,
.wrap-card .info .organization {
  margin-bottom: 20px;
}
.wrap-card .info .popularity .line-popularity,
.wrap-card .info .workload .line-workload {
  width: 100%;
  height: 13px;
  border: 1px solid #3b5bcb;
  border-radius: 5px;
}
.wrap-card .info .popularity .line-popularity .filling,
.wrap-card .info .workload .line-workload .filling {
  height: 100%;
  border-radius: 5px;
  background-color: #3b5bcb;
}
.wrap-card .info .organization {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.wrap-card .info .organization .name {
  margin-bottom: 5px;
}
.wrap-card .info .action-btn {
  display: flex;
  justify-content: center;
  height: 40px;
}
.wrap-card .info .action-btn a {
  margin-right: 50px;
}
.wrap-card .info .action-btn a:last-child {
  margin-right: 0;
}
.wrap-card .action .btn,
.wrap-card .action .btn_not_painted {
  width: 230px;
}

/* Wrapper */
.marker-cluster span {
  line-height: 30px;
}
.marker-cluster-small div {
  background-color: #6ecc3999;
}
.marker-cluster div {
  width: 30px;
  height: 30px;
  margin-left: 5px;
  margin-top: 5px;
  text-align: center;
  border-radius: 15px;
  font: 12px Helvetica Neue, Arial, Helvetica, sans-serif;
}

/* .wrapper {
  height: calc(100% - 100px);
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  flex: 1 1 auto;
  position: relative;
  overflow: hidden;
} */
.wrap {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 20px;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Menu */
/* .menu {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 51px;
  padding: 5px 0;
  bottom: 0px;
  z-index: 1000;
  border-radius: 20px 20px 0 0;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='134'%3E%3Cpath d='M291.64,0a10,10,0,0,0-9.84,8.24A134,134,0,0,1,150,118,134,134,0,0,1,18.2,8.24,10,10,0,0,0,8.36,0H0V134H300V0Z' fill='%234795DD'/%3E%3C/svg%3E"),
    radial-gradient(circle at 50% -6px, transparent 45px, #4795DD 45px);
  background-size: 89px, 100%;
  background-repeat: no-repeat;
  background-position: center top;
  position: absolute;
} */
.blue .menu {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='134'%3E%3Cpath d='M291.64,0a10,10,0,0,0-9.84,8.24A134,134,0,0,1,150,118,134,134,0,0,1,18.2,8.24,10,10,0,0,0,8.36,0H0V134H300V0Z' fill='%ffffffDD'/%3E%3C/svg%3E"), radial-gradient(circle at 50% -6px, transparent 44px, #ffffff 45px);
  position: sticky;
  margin-top: 20px;
}
.menu ul {
  display: flex;
  list-style-type: none;
  justify-content: space-around;
  width: 100%;
}
.menu ul li {
  width: 51px;
  /* height: 33px; */
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: flex-end;
  font-size: 10px;
  color: #fff;
  z-index: 1100;
  gap: 1px;
}
.menu ul li .link-name {
  width: 51px;
  text-align: center;
}
.menu ul li a span {
  width: 26px;
  height: 26px;
  display: block;
  background-size: cover;
}
.menu ul li a span.map {
  background-image: url(../images/main-map.svg);
}
.menu ul li a span.receipt {
  background-image: url(../images/receipt-item.svg);
}
.menu ul li a span.bill-menu {
  background-image: url(../images/bill-menu.svg);
}
.menu ul li a span.setting-menu {
  background-image: url(../images/setting.svg);
}
.menu ul li a span.qr-cod-menu {
  background-image: url(../images/QR-cod.svg);
}
.menu ul li.soaring a {
  position: absolute;
  top: -13px;
  filter: drop-shadow(0px 8px 3px rgba(0, 0, 0, 0.26));
  width: 39px;
  height: 39px;
}
.menu ul li.soaring a,
.menu ul li.soaring a img,
.menu ul li.soaring a span {
  width: 40px;
  height: 40px;
}
.menu ul a,
.menu ul a img {
  height: 26px;
  width: 26px;
}
/* .menu ul a.active {
  width: 44px;
  height: 28px;
  background-position: 2px 0px;
  background-repeat: no-repeat;
  background-size: 90%;
  display: flex;
  justify-content: center;
  align-items: center;
} */
.blue .menu li {
  color: #4795DD;
}
.blue .menu ul li a span.map {
  background-image: url(../images/main-map-blue.svg);
}
.blue .menu ul li a span.receipt {
  background-image: url(../images/receipt-item-blue.svg);
}
.blue .menu ul li a span.bill-menu {
  background-image: url(../images/bill-menu-blue.svg);
}
.blue .menu ul li a span.setting-menu {
  background-image: url(../images/setting-blue.svg);
}
.blue .menu ul li a span.qr-cod-menu {
  background-image: url(../images/QR-cod-blue.svg);
}

/* Auth */
.auth,
.auth form .confirm.active,
.auth form .password.active,
.auth form .profile-data.active,
.auth .number.active,
.auth form .floor {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.auth {
  height: 100%;
}
.auth form {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 320px;
}
.auth form label.label {
  text-align: center;
  /* max-width: 200px; */
  margin-bottom: 20px;
  width: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
}
.auth form .info {
  margin-bottom: 5px;
  font-weight: 300;
  display: flex;
  /* padding: 0 20px; */
  flex-direction: column;
  align-items: center;
  color: #fff;
  font-size: 13px;
}
.auth form .wrap-form .info {
  flex-direction: row;
}
.auth form .wrap-form.row {
  flex-direction: row;
  gap: 15px 25px;
  flex-wrap: wrap;
  align-content: center
}
.auth form .wrap-form.row .btn_not_painted {
  height: 164px;
  background-repeat: no-repeat;
  display: flex;
  justify-content: flex-end;
  background-size: contain;
}
.auth form .info a {
  color: #585656;
  text-decoration: none;
}
.auth form .info label {
  text-align: left;
  margin-bottom: 10px;
  display: flex;
  flex-direction: row;
}
.auth form .confirm .btn_not_painted {
  width: 180px;
  height: 30px;
}
.auth form .btn_not_painted {
  width: 135px;
  background: unset;
  color: #fff;
  gap: 5px;
  flex-direction: column;
  align-items: flex-start;
  font-size: 20px;
  border: none;
  height: auto;
  font-weight: 900;
  margin-bottom: 0;
}
.choice form .info {
  margin-top: 10px;
}
.choice form .info a {
  color: #000;
}
.auth form .confirm {
  display: none;
}
.auth form .confirm span {
  margin-bottom: 10px;
}
.auth form .sms__wrap {
  margin-bottom: 20px;
}
.auth form .sms__wrap .sms-input {
  border: 1px solid #3b5bcb;
  border-radius: 5px;
  width: 25px;
  height: 30px;
  font-size: 14px;
  text-align: center;
}
.auth .number {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20px;
}
.auth .number a {
  color: #3b5bcb;
  text-decoration: none;
}
.auth form .password,
.auth form .profile-data,
.auth .profile-title,
.auth .number {
  display: none;
}
.auth form .profile-data #date {
  margin-top: 10px;
}
.auth form .floor {
  margin-bottom: 20px;
}
.auth form .floor span {
  margin-bottom: 10px;
}
.auth form .wrap-floor {
  display: flex;
  justify-content: space-between;
  width: 150px;
}
.auth .btn-send-info {
  display: flex;
    flex-direction: column;
    align-items: center;
}

/* Map */
.wrap.map {
  padding: 0;
}
.map .top-nav {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  width: 100%;
  position: absolute;
  z-index: 1000;
  top: 0;
  left: 0;
}
.map .top-nav .wrap-top {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.map .top-nav .top-gps {
  cursor: pointer;
}
.map .bottom-nav {
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: 0 10px;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 1000;
  align-items: center;
  margin-bottom: 5px;
}

/* Filter */
.wrap .title {
  display: flex;
  justify-content: space-between;
  margin: 20px;
  max-width: 800px;
  width: 100%;
  z-index: 3;
}
.wrap .tree {
  /* margin-bottom: 20px; */
}
.tree .wrap-tree,
.tree .branch,
.tree .no-line {
  display: flex;
  justify-content: space-between;
  position: relative;
}
.tree .wrap-tree {
  border-bottom: 1px solid rgba(227, 227, 227, 0.2);
  padding-bottom: 10px;
}
.tree details .wrap-tree {
  border: none;
  padding-bottom: 0;
}
.tree .branch::before {
  content: '';
  border-bottom: 1px solid rgba(227, 227, 227, 0.2);
  position: absolute;
  bottom: 0;
  left: -30px;
  right: 8px;
}
.tree .branch.mr-0::before {
  left: 0;
}
.tree .branch .wrap-branch {
  padding: 0;
  width: 100%;
}
.tree .branch .root {
  position: absolute;
  top: 0;
  right: 0;
}
.tree details div.wrap-branch:not(:last-child),
.tree details div.wrap-branch:before {
  /* необязательно */
  border: none;
}

/* Search */
.search .title {
  justify-content: center;
  flex-direction: column;
  align-items: center;
}
.search .title h2 {
  margin-bottom: 10px;
}
.search .title p {
  min-width: 150px;
  margin-top: 10px;
}
.search .title .h-line {
  min-width: 180px;
  background-color: rgba(255, 255, 255, 0.2);
}
.search form {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
.wrpa-search .i-search {
  height: 42px;
  width: 100%;
  max-width: 250px;
  padding: 0 15px 0 42px;
  border: none;
  background-color: #fff;
  border-radius: 10px;;
  font-size: 16px;
  position: relative;
  background-image: url(../images/search-small.svg);
  background-repeat: no-repeat;
  background-position: 10px;
}
.wrpa-search .i-search::placeholder {
  font-size: 13px;
  color: #AFAFAF;
}
.wrpa-search {
  margin-bottom: 20px;
  width: 100%;
  display: flex;
  justify-content: center;
}
.search ul {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  margin-top: 30px;
  gap: 15px;
}
.search ul li {
  display: flex;
  /* margin-right: 15px;
  margin-bottom: 15px; */
  width: 280px;
  flex: 1 1 auto;
}
.search ul .title {
  font-size: 18px;
  margin: 0 0 10px 0;
  align-items: flex-start;
}
.search ul a {
  text-decoration: none;
  color: #4795dd;
  padding: 9px 15px;
  border-radius: 5px;
  width: 100%;
  background-color: #fff;
  font-weight: 700;
}
.search ul .address {
  font-size: 16px;
  font-weight: 500;
}

/* Buy checks */
.buy-checks {
  font-size: 20px;
  /* padding: 0; */
}
.buy-checks .title {
  align-items: center;
  justify-content: space-around;
}
.buy-checks .top-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 800px;
  width: 100%;
}
@media (max-width: 764px) {
  .buy-checks .title {
    flex-direction: column;
  }
}
.buy-checks .title .balance {
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  font-size: 24px;
}
.buy-checks .title .balance p {
  margin-right: 30px;
  font-size: 20px;
}
.buy-checks .warp-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 800px;
  margin-bottom: 20px;
}
.buy-checks .warp-info .timer {
  display: flex;
  justify-content: center;
  flex-direction: column;
}
.buy-checks .warp-info .timer img {
  width: 40px;
  height: 40px;
}
.buy-checks .warp-info .timer input {
  font-size: 18px;
}
.buy-checks .warp-info .timer .info-timer {
  
}
@media (max-width:600px) {
  .buy-checks .warp-info .timer {
    max-width: 170px;
  }
  .buy-checks .warp-info .timer input {
    font-size: 16px;
    margin-top: 10px;
  }
  .buy-checks .warp-info .timer .info-timer {
  font-size: 18px;
  }
  .buy-checks .warp-info .data {
    flex-direction: column;
    margin-right: 10px;
  }
}
.buy-checks .warp-info .data {
  display: flex;
  margin-top: 10px;
}
.buy-checks .warp-info .data .time {
  margin-right: 10px;
  font-weight: 700;
}
.buy-checks .buying-checks {
  list-style: none;
  width: 100%;
}

.buy-checks .buying-checks .check-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: all 0.3s ease;
}
.buy-checks .buying-checks .check-card .wrap-check-card {
  min-width: 300px;
  max-width: 800px;
  width: 100%;
  /* height: 65px; */
  /* border: 1px solid #3b5bcb; */
  /* border-radius: 5px; */
  /* margin-bottom: 20px; */
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.buy-checks .buying-checks .check-card .wrap-check-card.mr-0 {
  margin: 0 0 4px;
}
.buy-checks .buying-checks .check-card {
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  padding: 10px 0;
}
.buy-checks .buying-checks .check-card:last-child {
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.buy-checks .buying-checks .check-card .wrap-check-card .exclamatory {
  color: #fff;
  font-size: 36px;
  height: 100%; 
  width: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0;
}
.buy-checks .buying-checks .check-card .wrap-check-card.mr-0 .exclamatory {
  width: 31px;
  border-left: 2px dashed #fff;
  margin-left: 25px;
  min-height: 53px;
  position: relative;
}
.buy-checks .buying-checks .check-card .wrap-check-card.mr-0 .exclamatory::after {
  content: '';
  height: 20px;
  width: 20px;
  background-color: #4795dd;
  position: absolute;
  top: 0px;
  left: -11px;
}
.buy-checks .buying-checks .check-card .wrap-check-card.mr-0 .exclamatory::before {
  content: '';
  height: 20px;
  width: 20px;
  background-image: url(/assets/images/plus-small.svg);
  background-color: #fff;
  background-repeat: no-repeat;
  background-position: 53% 45%;
  border-radius: 50%;
  position: absolute;
  top: 20px;
  left: -11px;
}
.buy-checks .buying-checks .check-card .wrap-check-card.mr-0 .exclamatory.active::before {
  transform: rotate(45deg);
}
.buy-checks .buying-checks .check-card .wrap-check-card .info {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 110px;
  height: 100%;
  width: 100%;
  /* border-right: 1px solid #3b5bcb;
  border-left: 1px solid #3b5bcb; */
  margin-bottom: 0;
}
.buy-checks .buying-checks .check-card .wrap-check-card.mr-0 .info {
  /* border-left: 2px dashed #fff; */
}
.buy-checks .buying-checks .check-card .wrap-check-card .info .name {
  padding: 0 5px 5px;
}
.buy-checks .buying-checks .check-card .wrap-check-card .info .price {
  font-weight: 700;
  margin-bottom: 0;
}
.buy-checks .buying-checks .check-card .wrap-check-card .action {
  display: flex;
  align-items: center;
  justify-content: space-around;
  min-width: 130px;
  margin-bottom: 0;
  gap: 20px;
}
.buy-checks .buying-checks .check-card .wrap-check-card .action .wrpa-amount {
  display: flex;
  width: 100%;
  gap: 5px;
  align-items: center;
}
.buy-checks .buying-checks .check-card .wrap-check-card .action .amount {
  display: flex;
  align-items: center;
  width: 125px;
  margin-bottom: 0;
  flex-direction: column;
  height: 100%;
  justify-content: center;
}
.buy-checks .buying-checks .check-card .wrap-check-card .action .amount .raz {
  all: unset;
  width: 100%;
  -moz-appearance: textfield;
  text-align: center;
  font-size: 24px;
  margin-bottom: 0;
}
.buy-checks
  .buying-checks
  .check-card
  .wrap-check-card
  .action
  .amount
  .raz::-webkit-inner-spin-button {
  display: none;
  margin-bottom: 0;
}
.buy-checks .buying-checks .check-card .wrap-check-card .action .amount button {
  border: 0;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  /* width: 40px; */
  margin-bottom: 0;
  color: #4795dd;
  border-radius: 50%;
  padding: 5px;
}
.buy-checks .buying-checks .check-card .wrap-check-card .action .check {
  display: flex;
  align-items: center;
  margin-bottom: 0;
}

.buy-checks .buying-checks .check-card .tree-checks {
  margin-left: 0;
  margin-right: 0;
  padding-left: 25px;
  display: none;
  transition: all 0.3s ease;
}
.buy-checks .buying-checks .check-card .tree-checks .wrap-tree {
  border: none;
}
.buy-checks .buying-checks .check-card .tree-checks.active {
  display: block;
}
.buy-checks .buying-checks .check-card .tree-checks .wrap-tree {
  margin-bottom: 0;
  padding-left: 30px;
  padding-bottom: 10px;
}
.buy-checks .buying-checks .check-card .tree-checks div:not(:last-child) {
  /* необязательно */
  /* border-left: 1px solid #3b5bcb; */
  border-left: 2px dashed #fff;
}
.buy-checks .buying-checks .check-card .tree-checks div:before {
  /* необязательно */
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 1.1em;
  height: 0.5em;
  /* border-bottom: 1px solid #3b5bcb; */
  border-bottom: 2px dashed #fff;
}
.buy-checks .buying-checks .check-card .tree-checks div:last-child:before {
  /* необязательно */
  /* border-left: 1px solid #3b5bcb; */
  border-left: 2px dashed #fff;
  margin-top: 4px;
}
.buy-checks .payment {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 20px;
}
.buy-checks .payment span {
  font-size: 25px;
  font-weight: 700;
}
.buy-checks .payment .sum {
  font-size: 24px;
  /* margin-right: 20px; */
}
.buy-checks .payment .btn-payment {
  background-color: #397DBC;
  padding: 8px 10px;
  border-radius: 22px;
  height: auto;
}
.buy-checks .payment .btn-payment:hover {
  border: none;
  color: #fff;
}

/* Session selection */
.sessions .title h1 {
  font-size: 22px;
}
.sessions .session-wrap {
  display: flex;
  flex-direction: column;
  max-width: 800px;
  z-index: 3;
}
.sessions .session-wrap .session {
  display: flex;
  margin-bottom: 20px;
  cursor: pointer;
}
.sessions .session-wrap .session img {
  margin-right: 10px;
}
.sessions .session-wrap .session .info {
  display: flex;
  flex-direction: column;
}
.sessions .session-wrap .session .info .title {
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 5px 0;
  justify-content: normal;
  align-items: flex-end;
}
.sessions .session-wrap .session .info .title .duration {
  font-size: 14px;
  font-weight: 400;
  margin-left: 10px;
}
.sessions .session-wrap .session .info .genres {
  margin-bottom: 5px;
  font-style: 16px;
}
.sessions .session-wrap .session .info .age {
  font-size: 14px;
  /* background-color: #3b5bcb; */
  background-color: #F3395E;
  border-radius: 5px;
  padding: 2px 5px;
  color: #fff;
  max-width: 35px;
  text-align: center;
}
.sessions .session-wrap .session .info .description {
  margin-top: 10px;
}

/* Session schedule */
.sessions .session-wrap .timeline .date {
  margin-bottom: 10px;
  background-color: #4795DD;
  padding: 10px 9px;
  border-radius: 10px;
  gap: 15px;
  display: flex;
  align-items: center;
}
.sessions .session-wrap .timeline .date input {
  border: none;
  padding: 8px;
  border-radius: 10px;
  font-size: 16px;
}
.sessions .session-wrap .timeline .date span {
  font-size: 20px;
  margin-right: 10px;
}
.sessions .session-wrap .timeline .time-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
.sessions .session-wrap .timeline .time-wrap .time {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* margin-right: 10px; */
  flex: 1 1 auto;
  max-width: 253px;
}
.sessions .session-wrap .timeline .time-wrap .time .btn-time {
  display: flex;
  width: 100%;
}
.sessions .session-wrap .timeline .time-wrap .time .btn-time .value {
  z-index: 3;
}
.sessions .session-wrap .timeline .time-wrap .time .custom-radio + label  {
  /* gap: 15px; */
  width: 100%;
  padding: 15px 9px;
  justify-content: space-between;
}
.sessions .session-wrap .timeline .time-wrap .time .custom-radio + label::after {
  width: 100%;
  height: 100%;
  background-color: #4795DD;
  border: none;
}
.sessions .session-wrap .timeline .time-wrap .time .custom-radio:checked + label::after {
  border-color: #ffffff;
  background-color: #397DBC;
}
.sessions .session-wrap .wrap-btn {
  display: flex;
  justify-content: center;
  margin-top: 30px;
}

/* Seat selection */
.seat-selection .title {
  flex-direction: column;
  align-items: center;
  justify-content: normal;
}
.seat-selection .title h2 {
  margin-bottom: 20px;
}
.seat-selection .title .info {
  display: flex;
  width: 100%;
  justify-content: space-between;
}
.seat-selection .title .info .amount,
.seat-selection .title .info .time {
  font-weight: 700;
}

.choice-location {
  margin-bottom: 20px;
  display: flex;
  justify-content: center;
  width: 100%;
  flex-direction: column;
  gap: 50px;
}
.wrap-choice-location {
  display: flex;
  justify-content: center;
  width: 100%;
}


.seat-selection .wrap {
  min-width: 1200px;
}
.cinemaHall {
  text-align: center;
  /* display: inline-block; */
  display: flex;
  vertical-align: top;
  flex-wrap: wrap;
  justify-content: center;
  gap: 5px 8px;
  flex: 1 1;
}
.screen {
  background-image: url(/assets/images/Ellipse.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: calc(100% - 37%);
  width: 100%;
  max-height: 100px;
  min-height: 24px;
}
.seat {
  height: 25px;
  width: 25px;
  background-color: #13C7A8;
  display: inline-block;
  cursor: pointer;
  border-radius: 8px;
}
.passageBetween {
  height: 1px;
  width: 100%;
  display: block;
}
.bay.no {
  background-color: #F3395E;
  cursor: not-allowed;
}
.bay {
  background-color: #397DBC;
}
.result {
  font-size: 16px;
  display: inline-block;
  max-height: 200px;
  overflow-y: auto;
  margin-right: 30px;
  max-width: 135px;
  width: 100%;
  flex: 1 1 auto;
  font-weight: bold;
}
.navigation-down #getBayTiket {
  display: flex;
    gap: 50px;
}
.navigation-down #getBayTiket span {
  flex: 1;
  display: flex;
}
.navigation-down .wrap-itog {
  width: 40%;
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  background: #f1f1f1;
  padding-right: 50px;
  border-right: 1px solid #4795dd;
  border-radius: 20px 0 0 0;
}
.navigation-down .wrap-itog .info {
  display: flex;
  gap: 30px;
  justify-content: flex-end;
}

/* Successfully */
.wrap-status {
  overflow: auto;
  display: block;
}
.wrap-status .wrap {
  height: auto;
}
.wrap-status .successfully {
  background-color: #86ff73;
  width: 100%;
  height: 40px;
  flex: 1 0 auto;
}
.wrap-status .title {
  width: 100%;
  display: flex;
  flex-direction: column;
  text-align: center;
  margin-top: 10px;
}
.wrap-status .title img {
  height: 250px;
  object-fit: contain;
  width: 100%;
}
.wrap-status .info {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 20px;
  margin: 20px 0;
}
.wrap-status .info .date,
.wrap-status .info .time,
.wrap-status .info .sec {
  margin-bottom: 5px;
}
.wrap-status .info .name {
  font-size: 24px;
  margin-bottom: 10px;
}
.wrap-status .qr {
  margin-bottom: 20px;
}
.wrap-status .action {
  display: flex;
}
.wrap-status .action .min {
  width: 40px;
  margin-left: 10px;
}

/* Card */
.card-wrap .title {
  flex-direction: column;
  align-items: center;
  gap: 15px;
}
.card-wrap .title .action-btn {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
.card-wrap .title .action-btn a {
  padding: 10px;
}
.wrap-card .swiper {
  width: 100%;
  margin: 10px 0;
  max-width: 800px;
  border-radius: 10px;
  min-height: 143px;
}
.wrap-card .swiper-slide {
  background-position: center;
  background-size: cover;
  width: 300px;
  height: 200px;
}
.wrap-card .swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.wrap-card .info {
  max-width: 800px;
  margin-bottom: 20px;
  font-size: 20px;
}
.card-wrap .info {
  width: 100%;
}
.card-wrap .action {
  display: flex;
  /* flex-direction: column; */
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}
.card-wrap .action .btn {
  background-color: #397DBC;
  height: 40px;
  border-radius: 10px;
  font-size: 20px;
  margin-bottom: 0;
}
.card-wrap .action .btn_not_painted {
  background-color: #fff;
  color: #4795DD;
  border: none;
  border-radius: 10px;
  font-weight: 700;
  font-size: 20px;
  margin-bottom: 0;
}
.card-wrap .action .btn:hover {
  color: #fff;
  background-color: #397DBC;
}
.wrap-card .info .popularity .title,
.wrap-card .info .workload .title {
  font-weight: 700;
  margin: 10px 0 5px 0;
  /* justify-content: center; */
}
.wrap-card .info .workload .title {
  margin-top: 20px;
}
.wrap-card .info .workload,
.wrap-card .info .organization {
  margin-bottom: 20px;
}
.wrap-card .info .popularity .line-popularity,
.wrap-card .info .workload .line-workload {
  width: 100%;
  height: 16px;
  border: none;
  border-radius: 10px 10px 5px 5px;
  background-color: #fff;
  display: flex;
  align-items: center;
  padding: 0 3px;
}
.wrap-card .info .popularity .line-popularity .filling,
.wrap-card .info .workload .line-workload .filling {
  height: 12px;
  border-radius: 10px 10px 5px 5px;
  /* background-color: #3b5bcb; */
  background-image: url(/assets/images/dashed-line.svg);
}
.wrap-card .info .organization {
  display: flex;
  flex-direction: column;
  /* align-items: center; */
  align-items: flex-start;
  font-weight: bold;
}
.wrap-card .info .organization .name {
  margin-bottom: 5px;
}
.wrap-card .info .action-btn {
  display: flex;
  justify-content: center;
  height: 40px;
}
.wrap-card .info .action-btn a {
  margin-right: 50px;
}
.wrap-card .info .action-btn a:last-child {
  margin-right: 0;
}
.wrap-card .action .btn,
.wrap-card .action .btn_not_painted {
  width: 100%;
}
.wrap-card .action #resultStaff {
  /* padding: 10px; */
  background-color: rgb(255 255 255 / 20%);
  border-radius: 10px;
}

/* Rent */
.rent-wrap h1 {
  margin-top: 20px;
}
.rent-wrap p {
  margin: 20px 0;
  font-size: 20px;
}
.rent-wrap .timer {
  border-radius: 5px;
  border: 3px solid #3b5bcb;
  width: 180px;
  height: 70px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 48px;
  font-weight: 700;
  margin-bottom: 20px;
}

/* Completion */
.completion-wrap {
  justify-content: center;
}
.completion-wrap p {
  max-width: 800px;
  font-size: 20px;
}
.completion-wrap .qr {
  margin: 20px 0;
}

/* Extension */
.extension-wrap h1 {
  margin-top: 20px;
}
.extension-wrap .tickets {
  margin: 10px 0 20px;
  font-size: 20px;
}
.extension-wrap .term {
  display: flex;
}
.extension-wrap .term .min {
  width: 80px;
  height: 30px;
  margin-right: 10px;
}
.extension-wrap .term .min:last-child {
  margin-right: 0;
}
.extension-wrap .or {
  font-size: 20px;
}
.extension-wrap .inp {
  margin: 10px 0 15px;
}
.extension-wrap .inp input {
  text-align: center;
}
.extension-wrap .balance {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 10px;
}

/* Checks */
.checks .title {
  justify-content: center;
  margin: 20px 0 20px -32px;
}
.checks ul {
  list-style: none;
}
.checks ul li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* border: 1px solid #3b5bcb; */
  border-radius: 5px;
  width: 280px;
  height: 70px;
  margin-bottom: 10px;
  padding: 0 15px;
  background: #fff;
}
.checks ul li .link-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-decoration: none;
  color: #000;
  width: 100%;
}
.checks ul li .info {
  margin-left: 15px;
  flex: 1;
  font-size: 20px;
}
.checks ul li .grade-status {
  display: flex;
  align-items: center;
}
.checks ul li .grade-status .grade {
  margin-right: 10px;
}

/* Check */
.check {
  font-size: 20px;
}
.check .title {
  justify-content: center;
}
.check .info .title {
  margin: 10px 0;
}
.check .info .date-start,
.check .info .date-end {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 10px;
}
.check .info .line {
  width: 130px;
  height: 1px;
  background-color: #000;
}
.check .btn {
  margin-top: 20px;
  font-size: 16px;
}
.check .grade-wrap .title {
  margin: 20px 0 10px;
}
.check .grade-wrap .grade {
  display: flex;
  justify-content: center;
}
.check .grade-wrap .grade .like-wrap {
  margin-right: 20px;
}
.check .grade-wrap .grade .like-wrap,
.check .grade-wrap .grade .dislike-wrap {
  display: flex;
  align-items: flex-start;
  cursor: pointer;
}
.check .grade-wrap .grade img {
  margin-right: 10px;
}
.check .grade-wrap .grade img.like-no,
.check .grade-wrap .grade img.dislike-no,
.check .grade-wrap .grade img.like,
.check .grade-wrap .grade img.dislike {
  display: none;
}
.check .grade-wrap .grade img.like-no.active,
.check .grade-wrap .grade img.dislike-no.active,
.check .grade-wrap .grade img.like.active,
.check .grade-wrap .grade img.dislike.active {
  display: block;
}

/* Check info */
.check-info {
  /* z-index: 9;
  background-image: url(/assets/images/check.png);
  background-position: top;
  background-size: auto;
  background-repeat: no-repeat;
  width: 286px;
  height: 385px;
  padding: 0;
  font-size: 16px */
}
.check-info .swiper {
  width: 100%;
  height: 100%;
}
.check-info .swiper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.check-info .img {
  width: 100%;
  height: 158px;
  /* min-height: 158px; */
  position: relative;
}
.check-info .img .close {
  position: absolute;
  z-index: 9;
  right: 9px;
  top: 9px;
}
.check-info .title {
  align-items: center;
  flex-direction: column;
  margin-top: 6px;
  margin-bottom: 0px;
  text-align: center;
}
.check-info .title span {
  font-size: 20px;
}
.check-info h1 {
  font-size: 20px;
}
.wrap-check-info {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 20px;
  gap: 8px;
}
.footer-check-info .info,
.check-info .info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* padding: 0 20px; */
  font-size: 16px;
  width: 100%;
  border-bottom: 1px solid #E3E3E3;
}
.check-info .date {
  width: 100%;
  padding: 0 12px;
  display: flex;
  justify-content: center;
}
.check-info .date span {
  border-bottom: 1px solid #E3E3E3;
  width: 100%;
  text-align: center;
}
.check-info .see-tickets {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: #000;
  margin-top: 10px;
}
.check-info .see-tickets span {
  margin-right: 10px;
}
.check-info .btn.mr {
  width: 230px;
  margin-top: 20px;
}
.check-info .action {
  display: flex;
}
.check-info .action .btn.min {
  width: 40px;
  margin-right: 10px;
}
.check-info .action .btn.min:hover {
  background-color: #3b5bcb;
}
.check-info .id {
  margin-top: 10px;
  font-size: 16px;
}
.footer-check-info {
  background-color: #fff;
  /* height: 100px; */
  width: 286px;
  z-index: 9;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
}
.footer-check-info .btn {
  background-color: #4795DD;
  width: 100%;
  border-radius: 0;
  margin-top: 10px;
  margin-bottom: 0;
}
.footer-check-info .btn:hover {
  color: #fff;
  border: none;
  background-color: #4795DD;
}
.footer-check-info .btn_not_painted {
  background-color: #397DBC;
  width: 100%;
  border-radius: 0;
  margin: 0px;
  color: #fff;
  border: none;
  border-top: 1px solid #fff;
}

/* Return */
.return h2 {
  margin-bottom: 5px;
}
.return .line {
  width: 130px;
  height: 1px;
  background-color: #000;
  margin-bottom: 10px;
}
.return .btn {
  margin-top: 20px;
}

/* Not valid */
.wrap-status .not-valid {
  width: 100%;
  height: 30px;
  background-color: #ff7373;
}

/* Settings */
.settings .navigation-up {
  max-width: 800px;
  display: flex;
  align-items: center;
  width: 100%;
}
.settings .title {
  justify-content: center;
  font-size: 20px;
  /* margin: 20px -32px 20px -32px; */
  font-weight: bold;
}
.settings .exit {
  z-index: 9;
}
.settings .settings-wrap {
  display: flex;
  flex-direction: column;
  max-width: 250px;
  width: 100%;
}
.settings .settings-wrap label {
  font-weight: 700;
}
.settings .btn-payment {
  width: 100%;
  margin-top: 20px;
  border-radius: 10px;
  background-color: #ffffff;
  color: #4795dd;
  font-weight: bold;
}
.settings .dropdown-item {
  background-color: #397DBC;
  padding: 8px 10px;
  border-radius: 22px;
  height: auto;
  color: #fff;
  text-decoration: none;
  width: 100%;
  max-width: 250px;
  margin-top: 30px;
  text-align: center;
}
.settings .settings-wrap input {
  border: 0;
  /* border-bottom: 1px solid; */
  margin-bottom: 10px;
  font-size: 16px;
  /* padding: 0 3px; */
}
.settings .settings-wrap h2 {
  font-size: 18px;
  margin-bottom: 10px;
  margin-top: 20px;
  text-align: center;
}
.settings .settings-wrap .btn {
  margin-top: 20px;
}
.settings .inp-auth {
  height: 42px;
  width: 100%;
  max-width: 250px;
  padding: 0 12px;
  border: none;
  background: #fff;
  border-radius: 10px;
  border: none;
  padding: 0 10px;
}

.settings .inp-auth::placeholder {
  font-size: 13px;
  color: #AFAFAF;
}

/* QR scan */
.qr-scan {
  justify-content: center;
}
.qr-scan img {
  margin-bottom: 30px;
}
.qr-scan .btn {
  /* margin-bottom: 10px; */
}

@media (max-width:370px) {
  h1, h2, h3, h4, h5, h6 {
    width: 300px;
    text-align: center;
  }
}












@media (max-width: 600px) {
  /* .choice-location {
    flex-direction: column-reverse;
  } */
  /* .cinemaHall {
    width: 360px;
  } */
  #btnSession {
    
  }
  .navigation-down #getBayTiket {
    gap: 15px;
    position: absolute;
    bottom: -567px;
  }
  .navigation-down .wrap-itog {
    width: 100%;
    padding-right: 15px;
  }
  .navigation-down #getBayTiket span {
    width: 50%;
    flex: auto;
  }
  .seat-selection {
    min-height: 100%;
  }
  .screen {
    background-position: 80%;
  }
}
