/* ===== interface_v2.css ===== */
.notification {
  transition: 0.5s;
  background-color: #474757;
  position: absolute;
  right: 2vh;
  font-size: 3vh;
  color: white;
  top: 8vh;
  visibility: hidden;
  opacity: 0.0;
  /* border-radius: 0.8vh; */
  box-shadow: 0.2vh 0.5vh 1vh #0000003b;
  padding: 2vh;
  z-index: 300000;
}

.orange_text {
  color: #f96854;
  font-weight: 600;
}


.in_main_menu {right: 2vh;}

.in_main_menu_link {right: 3vh !important;}

.preview_menu_old {
  background: white;
  height: 81.5vh;
  position: absolute;
  width: 50vh;
  margin-left: 58vh;
  bottom: 9vh;
  border-radius: 0.8vh;
}

#play_v1 {
  width: 15vh;
}

#play_v2 {
  width: 15vh;
  margin-right: 2vh;
}

b {
  font-weight: 700;
}

#play_game {
  position: absolute;
  margin-top: 15vh;
  right: 4vh;
}

.credits_text_walkthrough {
  height: 5vh;
  margin-bottom: -1vh;
}

.paywalls {
  margin-left: 35vh;
  display: none;
}

.patreon_button_orange {
  background: linear-gradient(198deg, #FF6B81 24.03%, #ff6aff 199.29%);
  box-shadow: 0px 0.3vh 0.4vh rgb(0 0 0 / 14%), 0px 0.2vh 0.8vh rgb(0 0 0 / 12%), 0px 0.2vh 0.3vh rgb(0 0 0 / 20%);
  border-radius: 0.3vh;
  outline: none;
  border: none;
  font-family: 'Avenir Next';
  font-style: normal;
  font-weight: 600;
  font-size: 2vh;
  color: #292929;
  width: 12vh;
  height: 4.6vh;
  cursor:pointer;
  text-decoration: none;
  display:flex;
  align-items: center;
  justify-content: center;
}

.promo_image {
  width: 100%;
  height: 32.5vh;
  /* margin-top: 1.5vh; */
  /* margin-bottom: 2.5vh; */
}

.plz_donate {
  width: 100%;
  margin-top: 1.4vh;
}
.profile_menu, .profile_menu_game {
  visibility: hidden;
  display: none;
  opacity: 0.0;
  transition: 0.5s;
}

.profile_menu {
  margin-top: 9vh !important;
}

.profile_menu_game {
  margin-top: 2vh;
}

.inventory_menu_button:hover {
  height: 7vh;
  background-position: 50% 47%;
}





.benefits {padding: 0.5vh 2vh 0.8vh 2vh;color: white;}

.benefits_item {font-size: 2vh;font-weight: 600;margin-bottom: 1.5vh;}

.benefits_item.inactive {color: #c3c3c3;text-decoration: line-through;}



.buttons_container {
  display: flex;
  padding: 0 0 0 3vh;
}

.hidden_scene_text {
  font-size: 2vh;
  line-height: 3.7vh;
  padding: 3vh 2vh 0vh 3vh;
  width: 37vh;
  color: white;
  font-weight: 600;
}

#log_in_gallery.log_in_button_hidden_scene {
  text-decoration: none;
  margin-left: 2vh;
  background: linear-gradient(to right, #ff6aff 4%, #FF6B81 100%);
  box-shadow: 0px 0.3vh 0.4vh rgb(0 0 0 / 14%), 0px 0.2vh 0.8vh rgb(0 0 0 / 12%), 0px 0.2vh 0.3vh rgb(0 0 0 / 20%);
  border-radius: 0.3vh;
  outline: none;
  border: none;
  font-family: 'Avenir Next';
  font-style: normal;
  font-weight: 700;
  font-size: 2vh;
  margin-top: 2.2vh;
  color: white;
  width: 12vh;
  height: 4.6vh;
  display: flex;
  cursor: pointer;
  justify-content: center;
  align-items: center;
}

#log_in_gallery_2.log_in_button_hidden_scene {
  text-decoration: none;
  margin-left: 2vh;
  background: linear-gradient(to right, #ff6aff 4%, #FF6B81 100%);
  box-shadow: 0px 0.3vh 0.4vh rgb(0 0 0 / 14%), 0px 0.2vh 0.8vh rgb(0 0 0 / 12%), 0px 0.2vh 0.3vh rgb(0 0 0 / 20%);
  border-radius: 0.3vh;
  outline: none;
  border: none;
  font-family: 'Avenir Next';
  font-style: normal;
  font-weight: 700;
  font-size: 2vh;
  margin-top: 2.2vh;
  color: white;
  width: 12vh;
  height: 4.6vh;
  display: flex;
  cursor: pointer;
  justify-content: center;
  align-items: center;
}

#log_in_button_hidden_scene.log_in_button_hidden_scene {
  text-decoration: none;
      margin-left: -4vh;
    background: linear-gradient(198deg, #FF6B81 24.03%, #ff6aff 199.29%);
    box-shadow: 0px 0.3vh 0.4vh rgb(0 0 0 / 14%), 0px 0.2vh 0.8vh rgb(0 0 0 / 12%), 0px 0.2vh 0.3vh rgb(0 0 0 / 20%);
    border-radius: 0.3vh;
    outline: none;
    border: none;
    font-family: 'Avenir Next';
    font-style: normal;
    font-weight: 600;
    font-size: 2vh;
    margin-top: 2.6vh;
  
    color: #292929;
    width: 12vh;
    height: 4.6vh;
    display: flex;
    cursor: pointer;
    justify-content: center;
    align-items: center;
}

.link_improve {
  right: 2vh;
  position: absolute;
  text-decoration: none;
  color: #ff6aff;
}

.active_opacity {
  opacity: 1.0 !important;
  visibility: visible !important;
}

.locked_choice {
  background-color: rgba(88, 88, 88, 0.54) !important;
  color: #ffffff !important;
  /* border: 0.35vh solid #333333 !important; */
  opacity: 0.7;
}



.edit_text {
  font-size: 2vh;
  color: white;
  font-weight: 600;
}


.skip_menu {
  /* display: none; */
  visibility: hidden;
  opacity: 0.0;
  transition: 0.5s;
  background-color: white;
  width: 42vh;
  position: absolute;
  left: 0;
  right: 0;
  border-radius: 1vh;
  padding-bottom: 1vh;
  margin-left: auto;
  margin-right: auto;
  bottom: 40vh;
}


.patreon_button {
    width: 23vh;
    height: 9.8vh;
    margin-right: 2vh;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url("../../static/images/become_a_patron_button.webp");
}

.patreon_choice {
  text-align: center;
  transition: 0.5s;
  background-size: 200% auto;
  color: white;
  font-weight: 600;
  text-shadow: none !important;
  /* border: #f9ffbd3b 0.3vh solid; */
  /* box-shadow: 0.2vh 0.2vh 1vh #00000059; */
  background-image: linear-gradient(to right, #f6a165 0%, #f86854 51%, #f6a165 100%);
}

.patreon_choice:hover {
  background-position: right center;
}

.mood_effect {
  font-size: 3vh;
  position: absolute;
  color: #6d71fd;
  padding: 1vh 2.5vh;
  top: 55vh;
  background-color: white;
  left: 105vh;
  font-weight: 600;
  visibility: hidden;
  opacity: 0.0;
  border-radius: 7vh;
  transition: 1s;
  box-shadow: 0.2vh 0.5vh 1vh #0000003b;
}

.active_mood {
  top: 40vh;
}


.dialog_transparent {
  background: rgb(71 71 87 / 17%) !important;
}

.text_transparent {
  /* text-shadow: 2px 5px 10px rgb(0, 0, 0); */
}

.text_small {
  font-size: 2.1vh;
}

.transparent_button {
  background-color: rgb(255 255 255 / 8%) !important;
}


.skip_button {
  transition: 0.7s ease;
  position: absolute;
  bottom: 1.75vh;
  left: 133.5vh;
}


.button_container {
  /* background-color: white; */
  padding: 3.25vh 6.2vh;
  /* border-radius: 1vh; */
  cursor: pointer;
  color: white;
  background: rgba(255, 255, 255, 0.14);
  border-radius: 1vh;
  background-size: 45%;
  background-position: 49% 56%;
  background-image: url(../../static/images/skip_button.svg);
  background-repeat:no-repeat;
}


.game_menu_button {
  position: absolute;
  background-image: url(../../static/images/interface/new_burger.png);
  background-size: 2.5vh;
  background-repeat: no-repeat;
  cursor: pointer;
  width: 5vh;
  box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12);
  height: 6vh;
  right: 2vh;
  /* filter: brightness(100) !important; */
  background-color: #474757;
  /*   border-radius: 0vh 0vh 1vh 1vh; */
  /*   box-shadow: 0.2vh 0.2vh 1vh #00000059; */
  background-position: center;
  transition: 0.2s;
  top: 0;
}


.game_menu {
  transition: 0.35s;
  /* display: none; */
  z-index: 2;
  visibility: hidden;
  opacity: 0.0;
  background-color: #474757;
  position: absolute;
  top: 8vh;
  right: 2vh;
  width: 39vh;
  /* border-radius: 0.8vh; */
  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);
}

.game_menu_item {
  color: white;
  font-size: 3vh;
  cursor: pointer;
  text-decoration: none;
  margin: 2.5vh 12.5vh 2.5vh 3vh;
  display: block;
  transition: 0.2s cubic-bezier(.22,.61,.36,1);
  font-weight: 500;
}

.game_menu_item:hover {
  color: #ff6aff;
}

.patreon:hover, .game_menu_button:hover {
  height: 7vh;
  background-position: 50% 37%;
  filter: brightness(1.1);
}

.overlay, .overlay_hidden, .inventory_overlay {
  transition: 0.35s;
  z-index: 1;
  visibility: hidden;
  opacity: 0.0;
  background-color: #00000060;
  position: absolute;
}

.close {
  width: 3vh;
  height: 3vh;
  margin-left: auto;
  margin-right: 0;
  position: absolute;
  right: 0;
  cursor: pointer;
  background-image: url(../../static/images/close.webp);
  background-size: 5vh;
  background-position: 50%;
  padding: 2.5vh;
  filter: brightness(100);
  background-repeat: no-repeat;
}

.menu_header {
  display: flex;
  font-weight: 600;
  height: 7vh;
}

.title {font-size: 3vh;color: white;padding: 2.8vh;}

.preview_menu_new {
  background: white;
  position: absolute;
  height: 81.5vh;
  width: 56vh;
  border-radius: 0.8vh;
  bottom: 9vh;
}

.preview_text {font-size: 1.55vh;padding: 0vh 0vh 0vh 2.8vh;font-weight: 400;line-height: 3.4vh;width: 51vh;}

.big_text {
  font-size: 2.8vh;
  font-weight: 600;
}


.walkthrough_menu {
  width: 85vh;
  bottom: 14vh;
}


.eight_choices {
  display: flex !important;
  flex-wrap: wrap;
  flex-direction: column;
  height: 30vh;
  width: 120vh;
  align-content: space-between;
  bottom: 25vh;
  left: -14vh;
}

.eight_choice_button {
  font-size: 2vh;
  width: 56vh;
  margin-right: 3vh;
  margin-bottom: 1.5vh;
}

.eight_choice_button:hover {
  /*! width: 58vh; */
  margin-right:0vh;
}


.patreon {
  position: absolute;
  width: 20vh;
  height: 6vh;
  right: 20.5vh;
  top: 0vh;
  /* border-radius: 0vh 0vh 1vh 1vh; */
  background-size: 100%;
  background-repeat: no-repeat;
  background-image: url("../../static/images/become_a_patron_button.png");
  cursor: pointer;
  background-position: center;
  background-color: #f96854;
  /* box-shadow: 0.2vh 0.2vh 1vh #00000059; */
  box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12);
  transition: 0.2s;
}

.patreon_small {
  width: 4.75vh;
  background-position: 0%;
  background-size: 21vh;
}


.sound {
  /* position: relative; */
  height: 6vh;
  background-repeat: no-repeat;
  width: 9.5vh;
  background-image: url(../../static/images/sound.svg);
  /* right: 9vh; */
  cursor: pointer;
  filter: none !important;
  /* background-color: white; */
  background-color: #474757;
  background-size: 2.7vh;
  /* box-shadow: 0.2vh 0.2vh 1vh #00000059; */
  background-position: 18% 50%;
  transition: 0.2s;
  box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12);
}

.patreon:hover, .game_menu_button:hover {
  height: 7vh;
  background-position: 50% 47%;
  filter: brightness(1.2);
}


.patreon_small:hover {
  background-size: 21vh;
  background-position: left;
}

.sound_clicked {
  background-image: url(../../static/images/sound_clicked.svg);
}

.offer_edit {
  transition: 0.7s ease;
  background-image: url("../../static/images/suggest_button.svg");
  height: 6.5vh;
  background-repeat: no-repeat;
  width: 6.8vh;
  left: 140.5vh;
  bottom: 1.75vh;
  z-index: 1;
  background-size: 38%;
  background-position: center;
  border-radius: 1vh;
  cursor: pointer;
  position: absolute;
  cursor: pointer;
  color: white;
  background-color: #ffffff1f;
  border-radius: 1vh;
}

.hidden_choice {
  visibility: hidden;
}

.suggestion {
  padding: 2.6vh 3vh 2.3vh 2.3vh;
}

.edit_text_second {
  margin-top: 3.5vh;
  color: white;
  font-weight: 600;
}

.disabled_textarea {font-family: "Avenir Next";font-weight: 500;margin-top: 2vh;height: 7.8vh;padding: 1.8vh 1.6vh 1.6vh 2.2vh;width: 52.5vh;font-size: 2vh;border-radius: 0.5vh;color: #ffffff47;border: #6c6c6c 0.15vh solid;background-color: #555a66;resize: none;}
.active_textarea {/* margin-top: 2vh; *//* height: 10.5vh; *//* width: 56vh; */font-family: "Avenir Next";font-weight: 500;margin-top: 2vh;height: 7.8vh;padding: 1.8vh 1.6vh 1.6vh 2.2vh;width: 52.5vh;font-size: 2vh;border-radius: 0.5vh;color: white;border: #212227 0.15vh solid;background-color: #323338;resize: none;}


.edit {
  /* display: none; */
  transition: 0.5s;
  visibility: hidden;
  opacity: 0.0;
  position: absolute;
  height: 54.4vh;
  /* border-radius: 1vh; */
  width: 61vh;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  top: 0;
  bottom: 0;
  margin-top: auto;
  margin-bottom: auto;
  background-color: #474757;
  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);
  /* box-shadow: 0.5vh 1vh 1vh #00000061; */
}

.active {
  visibility: visible !important;
  opacity: 1.0 !important;
  display: block !important;
}

.rotate {
  height: 100%;
  position: absolute;
  left: -5vh;
}

.rotate_text {
  font-size: 4.5vh;
  color: white;
  position: absolute;
  width: 30vh;
  padding: 3vh;
  top: 2vh;
  left: 2vh;
  font-weight: 700;
  /* left: 62.5vh; */
  box-shadow: 0px 0.3vh 0.4vh rgb(0 0 0 / 14%), 0px 0.2vh 0.8vh rgb(0 0 0 / 12%), 0px 0.2vh 0.3vh rgb(0 0 0 / 20%);
  background-color: #673AB7;
}

.hidden_scene, .hidden_scene_pre, .hidden_scene_pre_2 {
  visibility: hidden;
  opacity: 0.0;
  background-color: #474757;
  width: 43vh;
  height: 67vh;
  position: absolute;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
  /* border-radius: 0.5vh; */
  bottom: 13vh;
  box-shadow: 0.2vh 0.2vh 1vh #00000059;
}

.hidden_scene_pre, .hidden_scene_pre_2 {
    height: 27vh;
    bottom: 33vh;
}

.hidden_scene_image {
  height: 24vh;
  width: 43vh;
  /* height: min-content; */
  /* margin-bottom: 1vh !important; */
}

.hidden_dialog {
  visibility: hidden;
  opacity: 0.0;
}

.hide_spinner {
  display: none;
}

.container_buttons {
  display: flex;
  /* justify-content: space-between; */
}

.hide_interface {
  opacity: 0.0;
  visibility: hidden;
}


.next {
  font-size: 2.5vh;
  width: 20vh;
  margin-top: -9.5vh;
  padding: 1.6vh;
  text-align: center;
  transition: 0.5s;
  background-size: 200% auto;
  color: white;
  font-weight: 600;
  border: #f9ffbd3b 0.3vh solid;
  box-shadow: 0.2vh 0.2vh 1vh #00000059;
  background-image: linear-gradient(to right, #00bcd4 0%, #8ef382 51%, #00bcd4 100%);
}

.next:hover {
  width:20vh;
  transform: scale(1.05);
  background-position: right center;
}

.next_locked {
  font-size: 2.5vh;
  width: 20vh;
  padding: 1.5vh;
  text-align: center;
  transition: 0.5s;
  background-size: 200% auto;
  color: white;
  font-weight: 600;
  border: #f9ffbd3b 0.3vh solid;
  box-shadow: 0.2vh 0.2vh 1vh #00000059;
}

.next_locked:hover {
  width:20vh;
  transform: scale(1.05);
  background-position: right center;
}


.luna_counter {
  bottom: 4vh;
  left: 4vh;
  padding: 2vh 2.3vh;
  /* width: 26vh; */
  /* height: 10vh; */
  border-radius: 1vh;
  position: absolute;
  background-color: white;
  display: none;
  box-shadow: 0.2vh 0.2vh 1vh #00000059;
}

.full_counter {
  height: 2vh;
  background-color: #e0e0e0;
  width: 26vh;
  margin-top: 2vh;
  border-radius: 4vh;
  overflow: hidden;
}

#first_fragment_counter {
  height: 2vh;
  background-image: linear-gradient(to right, #f665d0 0%, #f85454 100%);
  width: 10vh;
  border-radius: 1vh;
}

.text_counter {
  font-weight: 600;
  font-size: 2.4vh;
  color: #353535;
}

#vertical_line_counter1, #vertical_line_counter2, #vertical_line_counter3, #vertical_line_counter4 {position: absolute;height: 2vh;width: 2px;background-color: white;margin-top: -2vh;}

#vertical_line_counter1 {left: 6.5vh;}

#vertical_line_counter2 {left: 11.8vh;}

#vertical_line_counter3 {
  left: 16.9vh;
}

#vertical_line_counter4 {
  left: 22vh;
}

#volume-control {
  margin-left: 1.4vh;
  margin-top: 1.45vh;
  width: 19vh;
  height: 1.2vh;
}

.sound_container:hover .sound {
  height: 7vh;
    background-position: 18% 50%;
}

.sound_container:hover .show_slider {
    top: 1.5vh;
}

.show_slider {
  transition: 0.2s;
  width: 4vh;
  cursor: pointer;
  background-repeat: no-repeat;
  height: 4vh;
  background-size: cover;
  border-left: 0.2vh solid #7d7d7d57;
  top: 1vh;
  left: 5vh;
  background-size: 39%;
  background-position: 50%;
  position: absolute;
  background-image: url(../../static/images/interface/arrow_down.svg);
}


.sound_container {
  transition: 0.3s;
  position: absolute;
  right: 9vh;
  top: 0;
}


.sound_container:hover {filter: brightness(1.3);}

.range_container {
  transition: 0.5s;
  /* background-color: white; */
  background-color: #474757;
  position: absolute;
  right: 0.3vh;
  width: 22vh;
  height: 4vh;
  border-radius: 1vh;
  top: -14vh;
  transform: rotate(270deg);
  /* box-shadow: 0.2vh 0.5vh 1vh #0000003b; */
}

.range_active {
  top: 17vh;
}

.range_active_arrow {
  background-image: url(../../static/images/interface/arrow_top.svg);
}

input[type='range'] {
    overflow: hidden;
    -webkit-appearance: none;
}

input[type='range']::-webkit-slider-thumb {
    width: 1.5vh;
    -webkit-appearance: none;
    height: 1.5vh;
    cursor: pointer;
    background: #ff6aff;
    box-shadow: -10vh 0 0 10vh #ff6aff;
}

input[type=range]:focus {
    outline: none;
}

.thnx {
  overflow-y: scroll;
  height: 42.5vh !important;
  width: 36vh;
}


.button_send {
  position:absolute;
  right:2.5vh;
  bottom:3vh;
  background: linear-gradient(198deg, #FF6B81 24.03%, #ff6aff 199.29%);
  box-shadow: 0px 0.3vh 0.4vh rgb(0 0 0 / 14%), 0px 0.2vh 0.8vh rgb(0 0 0 / 12%), 0px 0.2vh 0.3vh rgb(0 0 0 / 20%);
  border-radius: 0.8vh;
  outline: none;
  border: none;
  font-family: 'Avenir Next';
  font-style: normal;
  font-weight: 700;
  font-size: 2vh;
  color: white;
  width: 12vh;
  height: 4.6vh;
}

#click_zone {
  cursor: pointer;
}

/* ===== error.css ===== */
.errors_window {
  background-color: white;
  color: red;
  padding: 1.5vh;
  font-size: 2vh;
  font-weight: 300;
  display: none;
  position: absolute;
  border-radius: 1vh;
  top: 1vh;
  left: 1vh;
  z-index: 400000;
}

.error_active {
  display: block;
}

/* ===== services.css ===== */
@charset "UTF-8";

.services-container {
  display: flex;
  margin: auto;
  width: max-content;
}

.service_item {
  position: relative;
  overflow: hidden;
  width: 306px;
  width: 32.5vh;
  height: 607px;
  height: 64.5vh;
  margin: 61px 18px;
  margin: 6.8vh 1.8vh;
  background-color: #535367;
  filter: drop-shadow(0px 6px 10px rgba(0, 0, 0, 0.14)) drop-shadow(0px 1px 18px rgba(0, 0, 0, 0.12)) drop-shadow(0px 3px 5px rgba(0, 0, 0, 0.2));
  border-radius: 6px;
  border-radius: 0.6vh;
}

.services_image {height: 169px;height: 18vh;}

.services_title {
  margin-left: 6px;
  margin-left: 0.8vh;
  margin-top: 2.5vh;
  font-family: 'Avenir Next';
  font-style: normal;
  font-weight: 600;
  font-size: 21px;
  font-size: 2.3vh;
  line-height: 29px;
  line-height: 3vh;
  color: #FFFFFF;
}

.services_description {
  margin-top: 14px;
  margin-top: 1.4vh;
  font-family: 'Avenir Next';
  font-style: normal;
  font-weight: 600;
  font-size: 14px;
  font-size: 1.5vh;
  line-height: 21px;
  line-height: 2.3vh;
  color: #FFFFFF;
  background-color: #5C5C77;
  padding: 16px;
  padding: 1.8vh;
  border-radius: 4px;
  border-radius: 0.2vh;
}

.services_buffs {
  /* margin-top: 17px; */
  margin-top: 1.9vh;
  font-family: 'Avenir Next';
  font-style: normal;
  font-weight: 600;
  /* font-size: 15px; */
  font-size: 1.6vh;
  /* margin-left: 3px; */
  margin-left: 0.2vh;
  /* line-height: 22px; */
  line-height: 2.4vh;
  color: #FFFFFF;
}

.services_upgrade_container {
  bottom: 25px;
  bottom: 2.5vh;
  position: absolute;
  left: 27px;
  left: 2.7vh;
  right: 27px;
  right: 2.7vh;
}

.services_buff_description {margin-bottom: 7px;margin-bottom: 0.8vh;}

.services_button {
  margin-top: 10px;
  margin-top: 1vh;
  width: 100%;
  height: 43px;
  height: 4.5vh;
  font-family: 'Avenir Next';
  font-style: normal;
  font-weight: 600;
  font-size: 20px;
  font-size: 2vh;
  line-height: 27px;
  line-height: 2.9vh;
  border: none;
  border-radius: 4px;
  border-radius: 0.4vh;
  color: #292929;
}

.service_content_container {
  padding: 0 20px;
  padding: 0 2.1vh;
}

.services_cost::before {
/* width: 37px; */
width: 4vh;
/* height: 37px; */
height: 4vh;
content: "";
float: left;
display: block;
/* margin-right: 6px; */
margin-right: 0.6vh;
background: url("../../static/images/tavern_menu_images/interface_icons/money_icon.png") no-repeat;
background-size: contain;
}

.services_cost {
font-family: 'Avenir Next';
font-style: normal;
font-weight: 700;
font-size: 18px;
font-size: 1.9vh;
line-height: 37px;
line-height: 4.2vh;
color: #FFFFFF;
text-shadow: 0px 0.876872px 0.876872px rgba(0, 0, 0, 0.14), 0px 1.75374px 0.876872px rgba(0, 0, 0, 0.12), 0px 0.876872px 2.63062px rgba(0, 0, 0, 0.2);
}

.services_button_active {
background: #535367;
color: #FA816E;
border: 2px solid #FA816E;
border: 0.2vh solid #FA816E;
}

.services_button_available {
background: linear-gradient(137.23deg, #FAA161 24.03%, #F71C92 199.29%);
box-shadow: 0px 4px 5px rgba(0, 0, 0, 0.14), 0px 1px 10px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.2);
}

.services_button_cooldown, .services_button_unavailable{
background: #C4C4C4;
box-shadow: 0px 4px 5px rgba(0, 0, 0, 0.14), 0px 1px 10px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.2);
}

.services_badge {
  font-size: 1.7vh;
  position: absolute;
  top: 1vh;
  right: 1vh;
  z-index: 100500;
  width: max-content;
  padding: 1vh 1.5vh 1vh 1.2vh;
  box-shadow: 0px 4px 5px rgba(0, 0, 0, 0.14), 0px 1px 10px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.2);
  border-radius: 4px;
}

.services_badge::before {
  content: '';
  width: 2vh;
  height: 2vh;
  background: url(../../static/images/interface/clock.png) no-repeat;
  display: block;
  background-size: contain;
  float: left;
  margin-right: 1vh;
}


.starts_in_badge {
  background: linear-gradient(137.23deg, #FAA161 24.03%, #F71C92 199.29%);

}

.days_left_badge {

background: linear-gradient(137.23deg, #D2FA61 24.03%, #1C8EF7 199.29%);
}

.cooldown_badge {


background: linear-gradient(137.23deg, #97A8FF 24.03%, #1C8EF7 199.29%);
}

.services_badge:empty {
  display: none;
}

/* ===== shaking.css ===== */
.fast {
  transition: 0.1s;
}

.right_position {
  margin-left: 5px;
}
.left_position {
  margin-left: -5px;

}

.top_position {
  margin-top: 5px;
}
.bottom_position {
  margin-top: -5px;

}

/* ===== paywall_v4.css ===== */
/* Базовые стили пейвола */
.paywall_menu {
    background-size: 101%;
    background-image: url("../../static/images/sprite/Intro.webp");
    /* padding: 4vh 8vh 3vh; */
    overflow-y: auto;
}

/* В неактивном состоянии пейвол всегда скрыт,
 * даже несмотря на общий класс .full-window */
.paywall_menu:not(.active) {
    display: none !important;
}

/* Активный пейвол показываем поверх игры */
.paywall_menu.active {
    display: block !important;
}

/* Верхняя промо секция */
.paywall_promo_section {
    margin-bottom: 4vh;
}

.paywall_promo_card {
    background-color: #474757;
    border-radius: 1.5vh;
    overflow: hidden;
    box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);
    display: flex;
    max-width: 154vh;
    min-height: 39vh;
    margin: auto;
    margin-top: 7vh;
}

.promo_content {
    flex: 1;
    padding: 4vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: white;
    max-width: 62vh;
}

.promo_description {
    width: 64vh;
    margin-bottom: 3vh;
    font-size: 2.25vh;
}

.promo_features {
   width:55vh;
   margin-top: 2vh;
}

.promo_feature {
    width:55vh;
    margin: 1vh 0vh;
    font-size: 2.25vh;
}

.promo_header {
    display: flex;
    align-items: center;
    gap: 2vh;
    margin-bottom: 2vh;
}

.promo_badge {
    border-radius: 5vh;
    padding: 1vh;
    width: 12vh;
    display: flex;
    gap: 1vh;
    background-color: #ff6aff;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 2.2vh;
}

.promo_title {
    font-size: 3.2vh;
    font-weight: 800;
    line-height: 1.2;
    margin: 0;
}

.promo_button {
    background: linear-gradient(257deg, #ae82ff 24%, #b78bff 100%);
    color: white;
    padding: 1.5vh 3vh;
    border-radius: 1vh;
    font-size: 2.4vh;
    font-weight: 700;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    cursor: pointer;
    transition: transform 0.2s;
    box-shadow: 0px 0.3vh 0.4vh rgb(0 0 0 / 14%), 0px 0.2vh 0.8vh rgb(0 0 0 / 12%), 0px 0.2vh 0.3vh rgb(0 0 0 / 20%);
}

.promo_button:hover {
    transform: scale(1.05);
}

.promo_image {
    flex: 1;
    position: relative;
    overflow: hidden;
}


.promo_image {
  width: 100%;
  height: 48vh;
  /* margin-top: 1.5vh; */
  /* margin-bottom: 2.5vh; */
  /* max-width: 78vh; */
  width: 82vh;
}

/* Карусель глав */
.chapters_carousel {
    width: 153vh;
    margin: auto;
    margin-top: 6vh;
}

.chapter_selector_header {
    width: 31vh;
    height: 6vh;
    border-radius: 1vh;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1vh;
    color: white;
    font-size: 2.5vh;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1vh;
    background-color: #474757;
    margin: auto;
    margin-bottom: 3vh;
    box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);
}

.chapter_selector_header svg {
    width: 2vh;
    height: 2vh;
}

.chapters_container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 3vh;
}

.chapter_card {
    background-color: #474757;
    border-radius: 1.5vh;
    overflow: hidden;
    box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);
    transition: transform 0.3s;
    cursor: pointer;
    max-width: 75vh;
    display: flex;
}

.chapter_card:hover {
    transform: translateY(-1vh);
}

.chapter_video_container {
    /* width: 100%; */
    width: 35vh;
    height: 25vh;
    /* overflow: hidden; */
    position: relative;
}

.chapter_video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.chapter_info {
    padding: 2.5vh 3vh 3vh;
    color: white;
    max-width: 30vh;
}

.chapter_title {
    font-size: 2.8vh;
    font-weight: 800;
    width: 30vh;
    margin-bottom: 1.5vh;
}

.chapter_description {
    font-size: 1.8vh;
    color: #e0e0e0;
    margin-bottom: 2.5vh;
    line-height: 1.5;
    width: 30vh;
}

.chapter_button {
    background: linear-gradient(257deg, #ae82ff 24%, #b78bff 100%);
    color: white;
    padding: 1.5vh 3vh;
    border-radius: 1vh;
    font-size: 2vh;
    font-weight: 700;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.2s;
    border: none;
    outline: none;
    box-shadow: 0px 0.3vh 0.4vh rgb(0 0 0 / 14%), 0px 0.2vh 0.8vh rgb(0 0 0 / 12%), 0px 0.2vh 0.3vh rgb(0 0 0 / 20%);
}

.chapter_button:hover {
    transform: scale(1.05);
}

/* Старые стили (оставлены для совместимости) */
.main_paywall_block {
    color: white;
    background-color: #474757;
    margin: 2vh 3vh;
    height: 75vh;
    box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);
}

.paywall_header {
    font-weight: 700;
    font-size: 2.4vh;
    width: 50vh;
    line-height: 4vh;
}

.pink_text {color: #ff6aff;}

.paywall_list {margin: 0;text-indent: 0;list-style-type: none;padding: 0;margin-bottom: 3vh;margin-top: 2vh;}

.paywall_item {margin: 1.2vh 0vh;font-size: 2vh;font-weight: 600;margin-top: 2.5vh;width: 57vh;line-height: 3.5vh;}

.paywall_bottom_text {
    font-weight: 700;
    font-size: 2.4vh;
}

.buttons_paywall {display: flex;}

#log_in_paywall {text-decoration: none;margin-right:2vh;background: linear-gradient(257deg, #ae82ff 24%, #b78bff 100%);box-shadow: 0px 0.3vh 0.4vh rgb(0 0 0 / 14%), 0px 0.2vh 0.8vh rgb(0 0 0 / 12%), 0px 0.2vh 0.3vh rgb(0 0 0 / 20%);border-radius: 1vh;outline: none;border: none;font-family: 'Avenir Next';font-style: normal;font-weight: 700;font-size: 2vh;margin-top: 2.5vh;color: #ffffff;width: 12vh;height: 5.6vh;display: flex;cursor:pointer;justify-content: center;align-items: center;}

.patreon_paywall  {width: 22vh;box-shadow: 0px 0.3vh 0.4vh rgb(0 0 0 / 14%), 0px 0.2vh 0.8vh rgb(0 0 0 / 12%), 0px 0.2vh 0.3vh rgb(0 0 0 / 20%);height: 5vh;cursor: pointer;background-position: center;background-size: 92%;border-radius: 0.8vh;margin-top: 2vh;background-image: url(../../static/images/become_a_patron_button.png);}

.main_paywall_image {
    width: 62.5vh;
    height: 35vh;
    object-fit: cover;
}

.paywall_main {position: absolute;display: flex;left: 22vh;top: 15vh;}

.paywall_container {
    margin: 2.2vh 2vh 0  3.5vh;
}

.logline {
    width: 55vh;
    line-height: 3.6vh;
    font-weight: 600;
    font-size: 2vh;
    margin-top: 1.5vh;
}

#play_game_old {
    text-decoration: none;
    margin-right:2vh;
    background: linear-gradient(257deg, #ae82ff 24%, #b78bff 100%);
    box-shadow: 0px 0.3vh 0.4vh rgb(0 0 0 / 14%), 0px 0.2vh 0.8vh rgb(0 0 0 / 12%), 0px 0.2vh 0.3vh rgb(0 0 0 / 20%);
    border-radius: 1vh;
    outline: none;
    border: none;
    font-family: 'Avenir Next';
    font-style: normal;
    font-weight: 700;
    font-size: 2vh;
    margin-top: 8.2vh;
    color: #ffffff;
    width: 26vh;
    height: 5.6vh;
    display: flex;
    cursor:pointer;
    justify-content: center;
    align-items: center;
}

#play_game_new {
    text-decoration: none;
    margin-right:2vh;
    background: linear-gradient(to right, #ff6aff 4%, #FF6B81 100%);
    box-shadow: 0px 0.3vh 0.4vh rgb(0 0 0 / 14%), 0px 0.2vh 0.8vh rgb(0 0 0 / 12%), 0px 0.2vh 0.3vh rgb(0 0 0 / 20%);
    border-radius: 1vh;
    outline: none;
    border: none;
    font-family: 'Avenir Next';
    font-style: normal;
    font-weight: 700;
    font-size: 2vh;
    margin-top: 2.5vh;
    color: #ffffff;
    width: 25vh;
    height: 5.6vh;
    display: flex;
    cursor:pointer;
    justify-content: center;
    align-items: center;
}

.choose_version {
    margin: auto;
    background-color: #474757;
    color: white;
    font-size: 3vh;
    padding: 2vh 3vh;
    left: 25vh;
    top: 7vh;
    position: absolute;
    font-weight: 800;
    box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);
}

#play_game_big {
    position:absolute;
    text-decoration: none;
    top: 61vh;
    box-shadow: 0px 0.3vh 0.4vh rgb(0 0 0 / 14%), 0px 0.2vh 0.8vh rgb(0 0 0 / 12%), 0px 0.2vh 0.3vh rgb(0 0 0 / 20%);
    border-radius: 0.3vh;
    font-family: 'Avenir Next';
    font-style: normal;
    font-weight: 600;
    font-size: 5vh;
    margin-top: 1.2vh;
    color: #292929;
    width: 50vh;
    height: 12.6vh;
    left:60vh;
    z-index: 500;
}

#play_game_big {
    background-image: linear-gradient(to right, #FF6B81 0%, #ff6aff  51%, #FF6B81  100%);
    text-align: center;
    transition: 0.5s;
    background-size: 200% auto;
    color: white;
    line-height: 13vh;
    font-weight: 700;
    border-radius: 2vh;
    display: block;
}

#play_game_big:hover {
    background-position: right center;
    color: #fff;
    text-decoration: none;
}

/* Mobile adaptation for landscape orientation */
@media only screen and (max-width: 1024px) and (orientation: landscape) {
    .paywall_menu {
        padding: 0;
        overflow-y: auto;
    }

    /* Промо баннер - вертикальный справа */
    .paywall_promo_section {
        position: absolute;
        /* right: 2vh; */
        /* top: 2vh; */
        left: 88vh;
        /* bottom: 2vh; */
        margin: 0;
        z-index: 100;
    }

    .paywall_promo_card {
        flex-direction: column;
        height: 100vh;
        min-height: unset;
        margin: 0;
        width: 88vh;
        border-radius: 0;
    }

    .promo_content {
        flex: 0 0 auto;
        max-width: 100%;
        padding: 3vh 2.5vh;
        /* order: 1; */
        width: 83vh;
    }

    .promo_header {
        gap: 1.5vh;
        margin-bottom: 1.5vh;
        flex-direction: row;
    }

    .promo_badge {
        width: 18vh;
        padding: 0.8vh;
        gap: 0.8vh;
        font-size: 3vh;
        font-weight: 700;
    }

    .promo_title {
        font-size: 3.5vh;
        line-height: 1.3;
    }

    .promo_description {
        width: 100%;
        font-size: 3vh;
        margin-bottom: 2vh;
        line-height: 1.4;
    }

    .promo_features {
        width: 100%;
        margin-top: 1.5vh;
    }

    .promo_feature {
        width: 100%;
        margin: 0.8vh 0;
        font-size: 3vh;
        line-height: 1.4;
    }

    .promo_button {
        padding: 1.2vh 2.5vh;
        font-size: 3.5vh;
        width: 46vh;
        height: 5vh;
        justify-content: center;
        margin-top: 1vh;
    }

    .promo_image_container {
        flex: 1;
        order: 2;
        overflow: hidden;
        display: flex;
        align-items: flex-end;
    }

    .promo_image {
        width: 92vh;
        height: 49vh;
        /* max-height: 35vh; */
        object-fit: cover;
        object-position: top;
    }

    /* Chapters section - стопкой слева */
    .chapters_carousel {
        margin: 2vh 0 2vh 2vh;
        margin-top: 2vh;
        padding-right: 2vh;
        width: 81vh;
    }

    .chapter_selector_header {
        /* width: 100%; */
        height: 9vh;
        font-size: 3.5vh;
        margin-bottom: 2vh;
        margin-left: 0;
        width: 43vh;
        margin-top: 11vh;
    }

    .chapter_selector_header svg {
        width: 1.8vh;
        height: 1.8vh;
    }

    .chapters_container {
        display: flex;
        flex-direction: column;
        gap: 2vh;
        /* width: 85vh; */
        grid-template-columns: none;
    }

    .chapter_card {
        /* max-width: 100%; */
        width: 89vh;
        min-height: auto;
        max-width: 82vh;
        border-radius: 0;
    }

    .chapter_card:hover {
        transform: translateY(-0.5vh);
    }

    .chapter_video_container {
        order: 2;
    }

    .chapter_video {
        object-fit: cover;
        width: 35vh;
        height: 35vh;
    }

    .chapter_info {
        padding: 2vh 2.5vh;
        max-width: 100%;
        width: 45vh;
        order: 2;
    }

    .chapter_title {
        font-size: 4.5vh;
        width: 43vh;
        margin-bottom: 1.2vh;
    }

    .chapter_description {
        font-size: 3vh;
        width: 100%;
        margin-bottom: 2vh;
        line-height: 1.5;
    }

    .chapter_button {
        padding: 1.2vh 2.5vh;
        font-size: 3.5vh;
        width: 17vh;
    }

    /* Old paywall blocks adjustments */
    .main_paywall_block {
        margin: 2vh 45vh 2vh 2vh;
        height: auto;
        min-height: 50vh;
    }

    .paywall_main {
        position: relative;
        left: 0;
        top: 0;
        flex-direction: column;
    }

    .main_paywall_image {
        width: 100%;
        height: auto;
        max-height: 30vh;
    }

    .paywall_container {
        margin: 2vh 2.5vh;
    }

    .paywall_header {
        font-size: 2.8vh;
        width: 100%;
        line-height: 4vh;
    }

    .logline {
        width: 100%;
        line-height: 3.2vh;
        font-size: 2vh;
    }

    .paywall_item {
        width: 100%;
        font-size: 2vh;
        line-height: 3.2vh;
    }

    .paywall_bottom_text {
        font-size: 2.2vh;
    }

    .buttons_paywall {
        flex-wrap: wrap;
    }

    #log_in_paywall {
        width: 100%;
        margin-right: 0;
        margin-bottom: 1.5vh;
        font-size: 2.2vh;
        height: 5vh;
    }

    .patreon_paywall {
        width: 100%;
        height: 4.5vh;
        margin-top: 0;
    }

    #play_game_old,
    #play_game_new,
    #play_game_new_left,
    #play_game_new_right {
        width: 100%;
        margin-right: 0;
        margin-bottom: 1.5vh;
        font-size: 2.5vh;
        height: 6vh;
    }

    .choose_version {
        position: relative;
        left: 0;
        top: 0;
        font-size: 2.5vh;
        padding: 1.5vh 2.5vh;
        margin-bottom: 2vh;
    }

    #play_game_big {
        position: relative;
        width: 100%;
        left: 0;
        top: 0;
        height: 8vh;
        font-size: 3.5vh;
        line-height: 8vh;
        margin-top: 2vh;
    }
}

/* Mobile adaptation for portrait orientation (phones) */
@media only screen and (max-width: 768px) and (orientation: portrait) {
    .paywall_menu {
        padding: 2vh 1vh;
        overflow-y: auto;
    }

    .paywall_promo_section {
        margin-bottom: 3vh;
    }

    .paywall_promo_card {
        flex-direction: column;
        max-width: 100%;
        min-height: unset;
        margin: 0;
    }

    .promo_content {
        max-width: 100%;
        padding: 3vh 2vh;
        order: 1;
    }

    .promo_header {
        gap: 1.5vh;
        margin-bottom: 1.5vh;
        flex-direction: row;
        align-items: center;
    }

    .promo_badge {
        width: 12vh;
        padding: 0.8vh;
    }

    .promo_title {
        font-size: 3vh;
        line-height: 1.3;
    }

    .promo_description {
        width: 100%;
        font-size: 2.2vh;
        margin-bottom: 2vh;
    }

    .promo_features {
        width: 100%;
        margin-top: 1.5vh;
    }

    .promo_feature {
        width: 100%;
        margin: 1vh 0;
        font-size: 2vh;
    }

    .promo_button {
        padding: 1.5vh 3vh;
        font-size: 2.4vh;
        width: 100%;
        margin-top: 1.5vh;
    }

    .promo_image_container {
        order: 2;
        width: 100%;
    }

    .promo_image {
        width: 100%;
        height: 35vh;
        object-fit: cover;
        object-position: center;
    }

    /* Chapters section - стопкой, на всю ширину */
    .chapters_carousel {
        width: 100%;
        margin: 3vh auto;
    }

    .chapter_selector_header {
        width: 100%;
        max-width: 40vh;
        height: 6vh;
        font-size: 2.5vh;
        margin-bottom: 2.5vh;
    }

    .chapters_container {
        display: flex;
        flex-direction: column;
        gap: 2.5vh;
        grid-template-columns: none;
    }

    .chapter_card {
        max-width: 100%;
        flex-direction: column;
    }

    .chapter_video_container {
        width: 100%;
        height: 30vh;
        order: 2;
    }

    .chapter_info {
        padding: 2.5vh 2vh;
        max-width: 100%;
        order: 1;
    }

    .chapter_title {
        font-size: 3vh;
        width: 100%;
        margin-bottom: 1.5vh;
    }

    .chapter_description {
        font-size: 2vh;
        width: 100%;
        margin-bottom: 2.5vh;
    }

    .chapter_button {
        padding: 1.5vh 3vh;
        font-size: 2.2vh;
        width: 100%;
    }

    /* Old paywall blocks */
    .main_paywall_block {
        margin: 2vh 1vh;
        height: auto;
    }

    .paywall_main {
        position: relative;
        left: 0;
        top: 0;
        flex-direction: column;
    }

    .main_paywall_image {
        width: 100%;
        height: auto;
        max-height: 35vh;
    }

    .paywall_container {
        margin: 2vh;
    }

    .paywall_header {
        font-size: 3vh;
        width: 100%;
        line-height: 4vh;
    }

    .logline {
        width: 100%;
        line-height: 3.5vh;
        font-size: 2.2vh;
    }

    .paywall_list {
        margin-bottom: 2.5vh;
    }

    .paywall_item {
        width: 100%;
        font-size: 2.2vh;
        line-height: 3.5vh;
    }

    .paywall_bottom_text {
        font-size: 2.5vh;
    }

    .buttons_paywall {
        flex-direction: column;
    }

    #log_in_paywall {
        width: 100%;
        margin-right: 0;
        margin-bottom: 2vh;
        font-size: 2.5vh;
        height: 6vh;
    }

    .patreon_paywall {
        width: 100%;
        height: 5vh;
        margin-top: 0;
        margin-left: 0;
    }

    #play_game_old,
    #play_game_new,
    #play_game_new_left,
    #play_game_new_right {
        width: 100%;
        margin-right: 0;
        margin-bottom: 2vh;
        font-size: 3vh;
        height: 7vh;
    }

    .choose_version {
        position: relative;
        left: 0;
        top: 0;
        font-size: 3vh;
        padding: 2vh 3vh;
        margin-bottom: 2vh;
    }

    #play_game_big {
        position: relative;
        width: 100%;
        left: 0;
        top: 0;
        height: 9vh;
        font-size: 4vh;
        line-height: 9vh;
        margin-top: 2vh;
    }
}

/* ===== gallery_v3.css ===== */
.gallery_menu {
  /* display: none; */
  transition: 0.5s;
  opacity: 0.0;
  visibility: hidden;
  /* border-radius: 1vh; */
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  bottom: 17vh;
  position: absolute;
  background-color: #474757;
  width: 93vh;
  height: 65vh;
}

.gallery_container {height: 88%;position: absolute;padding: 0vh 1.5vh;}

.gallery_footer {position: relative;top: 56.5vh;height: 8.5vh;z-index: 1;background: #474757;box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.4);/* border-radius: 0px 0px 1vh 1vh; */}

.version_gallery_container {
  display: flex;
  flex-wrap: wrap;
}

.gallery_image {
  background-color: #afafaf;
  border-radius: 1vh;
  width: 26vh;
  height: 14vh;
  position: absolute;
}

.gallery_overlay, .gallery_overlay_walkthrough {
  transition: 0.5s;
  visibility: hidden;
  opacity: 0.0;
  position: absolute;
  z-index: 100;
  background-color: #00000042;
  height: 56.5vh;
  /* border-radius: 0.5vh; */
  top: 6vh;
  width: 100%;
}


.gallery_locked_popup, .gallery_walkthrough_popup {
  background-color: #474757;
  width: 42vh;
  /* border-radius: 1vh; */
  padding: 0vh 0vh 1vh 0vh;
  left: 0;
  height: 23vh;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  bottom: 16vh;
  position: absolute;
  box-shadow: 0.1vh 0.2vh 1vh #00000052;
}

.version_gallery_text {
  padding: 1.5vh 2vh;
  color: #ff6aff;
  font-weight: 700;
  margin: auto;
  margin-top: 3vh;
  font-size: 2.4vh;
  width: max-content;
  border-radius: 0.5vh;
  background-color: #4f4f6b;
}


.switch {
  position: relative;
  display: inline-block;
  width: 4.8vh;
  margin-left: 1.5vh;
  height: 4vh;
  user-select: none;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.switch_container {
  padding: 2.5vh;
  display: flex;
  position: absolute;
  right: 0;
}

.switch_text {
  font-size: 2vh;
  margin-top: 0.5vh;
  font-weight: 600;
  color: rgb(255 255 255);
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 1vh;
  left: 0;
  right: 0;
  bottom: 1vh;
  background-color: rgba(0, 0, 0, 0.38);
  border-radius: 1.75vh;
  -webkit-transition: background-color .4s;
  transition: background-color .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 2.5vh;
  width: 2.5vh;
  left: 0;
  bottom: -0.2vh;
  background-color: white;
  border-radius: 50%;
  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
  -webkit-transition: -webkit-transform .4s, background-color .4s;
  transition: transform .4s, background-color .4s;
}

input:checked + .slider {
  background-color: #ff6aff;
}

input:checked + .slider:before {
  -webkit-transform: translateX(2.3vh);
  -ms-transform: translateX(2.3vh);
  transform: translateX(2.3vh);
}

input:focus + .slider {
  outline: none;
  box-shadow: 0 0 0 0.2rem rgba(255, 106, 255, 0.25);
}

/* Rounded sliders */
.slider.round {
  border-radius: 1.75vh;
}

.slider.round:before {
  border-radius: 50%;
}


.roadmap_image {max-width: 100%;background-size: contain;}


.gallery_items {
  /* display: flex; */
  flex-wrap: wrap;
  position: relative;
  height: 99%;
  width: 91.5vh;
  overflow-y: scroll;
  /* overflow: hidden; */
}

.item {
  cursor: pointer;
  width: 26vh;
  position: relative;
  height: 19vh;
  padding: 3vh 1.5vh;
}

.locked_item {
  transition: 0.5s;
  height: 4vh;
  width: 4vh;
  right: 2.5vh;
  background-size: contain;
  top: 4.4vh;
  background-position: center;
  background-image: url(../../static/images/lock.svg);
  background-repeat: no-repeat;
  position: absolute;
  z-index: 1;
  visibility: hidden;
  opacity: 0.0;
}

.locked_item_money {
  background-image: url(../../static/images/interface/monetization_on-24px.svg) !important;
  height: 4.5vh;
  width: 4.5vh;
}

.locked_item_timer {
  background-image: url(/static/images/interface/timer.svg) !important;
  height: 4.5vh;
  width: 4.5vh;
}

.gallery_image {
  background-color: #575757;
  border-radius: 1vh;
  width: 26vh;
  height: 14vh;
  position: absolute;
}

.item_text {
  width: 20vh;
  top: 17vh;
  line-height: 2.5vh;
  position: absolute;
  padding: 2vh 1vh;
  font-size: 1.8vh;
  color: #ffffff;
  font-weight: 400;
}

.randomizer {
  position: absolute;
  transition: 0.2s;
  font-weight: 600;
  background-color: #535367;
  padding: 1vh 2vh;
  display: flex;
  left: 3vh;
  color: white;
  top: 1.7vh;
  font-size: 2vh;
  cursor: pointer;
  line-height: 3.2vh;
  vertical-align: middle;
  border-radius: 0.5vh;
  box-shadow: 0px 0.1vh 0.3vh rgba(0, 0, 0, 0.25);
}
.randomizer::before {
  background-image: url("../../static/images/interface/dice.webp");
  height: 3.1vh;
  transition: 0.2s;
  width: 3vh;
  background-size: contain;
  margin-right: 1.2vh;
  background-repeat: no-repeat;
  content: "";
  display: block;
  position:relative;
  filter: brightness(3);
}

.randomizer.changed::before {
    filter: brightness(2.5);
}

.paid_image {
  position: absolute;
  height: 15.1vh;
  top: 2.5vh;
  left: 1vh;
  border-radius: 1.5vh;
  width: 27vh;
  background-image: linear-gradient(to right, #FF6B81 0%, #ff6aff 100%);
  border-image-slice: 1;
}

.walkthrough_badge {
  background-image: url(/static/images/interface/help-24px.svg);
  background-color: #474757;
  width: 4vh;
  height: 4vh;
  position: absolute;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 1vh;
  background-size: 55%;
  top: 19vh;
  left: 23vh;
  box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.4);
}

.walkthrough_menu_gallery {
  width: 60vh;
  font-size: 1.8vh;
  line-height: 3vh;
  background-color: #474757;
  /* border-radius: 1vh; */
  /* max-height: 40vh; */
  /* overflow-y: scroll; */
  z-index: 100500;
  margin: auto;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  /* padding: 2.5vh 0 0vh 2.5vh; */
  box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.4);
}

.scene_title_walkthrough {/* font-size: 2vh !important; *//* padding: 0 !important; */}

.close_scene_walkthrough {/* padding: 0 2.5vh !important; */}

.walkthrough_badge:after {
    content:'';
    position:absolute;
    top:-1vh;
    /* bottom:-1vh; */
    left:-1vh;
    right:-1vh;
}

.walkt_header {
  /* height: 5vh !important; */
}

.walkthrough_gal_text {
  overflow-y: scroll;
  max-height: 30vh;
  padding-bottom: 2.5vh;
  padding-right: 3vh;
  padding-left: 2.5vh;
  padding-top: 1.5vh;
  color: white;
}

.walkt_pay_text {margin: 0.1vh !important;width: 38vh !important;height: 10vh !important;font-size: 2vh !important;line-height: 3.7vh !important;padding: 2vh 0vh 0vh 3vh !important;overflow-y: hidden !important;}

.walkt_pay_buttons {padding: 0vh 3vh !important;}

.smol_walkt {
    width: 43vh;
}

.unpaid_walkt { overflow-y: hidden !important; }


.gallery_items::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 1vh rgba(0,0,0,0.3);
	background-color: #474757;
}

.gallery_items::-webkit-scrollbar
{
	width: 10px;
	background-color: #616177;
}

.gallery_items::-webkit-scrollbar-thumb
{
	background-color: #616177;
	border: 0.1vh solid #555555;
}

.pay_plz {
  position: absolute;
  transition: 0.2s;
  font-weight: 600;
  background-color: rgb(83, 83, 103);
  padding: 1vh 2vh;
  display: flex;
  right: 3vh;
  top: 1.7vh;
  font-size: 2vh;
  cursor: pointer;
  line-height: 3.2vh;
  vertical-align: middle;
  border-radius: 0.5vh;
  color:white;
  
  box-shadow: 0px 0.1vh 0.3vh rgba(0, 0, 0, 0.25);
}
.pay_plz::before {
  background-image: url("../../static/images/interface/hearttt.png");
  height: 3.1vh;
  transition: 0.2s;
  width: 3vh;
  background-size: contain;
  margin-right: 1.2vh;
  background-repeat: no-repeat;
  content: "";
  display: block;
  position:relative;
  filter:brightness(100)
}

.pay_plz.changed::before {
    filter: brightness(2.5);
}

/* ===== base_v3.css ===== */
@charset "UTF-8";


* {-webkit-font-smoothing: antialiased;}

@font-face {
  font-family: "Avenir Next";
  src: url("../fonts/AvenirNext-Medium.ttf");
  font-weight: 400;
}

@font-face {
  font-family: "Avenir Next";
  src: url("../fonts/AvenirNext-Demi.ttf");
  font-weight: 600;
}

@font-face {
  font-family: "Avenir Next";
  src: url("../fonts/AvenirNext-Bold.ttf");
  font-weight: 900;
}


@media only screen and (orientation:portrait){
  #wrapper { display:none; }
  #warning-message {display:block;}
}
@media only screen and (orientation:landscape){
  #warning-message { display:none; }
}

.icon_rotate {
  position: absolute;
  filter: invert(1);
  top: 26vh;
  left: 5vh;
}

:root {
    --aspect-ratio: calc(16/9);
    --game-width: calc(100vh * var(--aspect-ratio));
    --outline:
        2px 0px 0 black,
        1px 1px 0 black,
        0px 2px 0 black,
       -1px 1px 0 black,
       -1px 0px 0 black,
      -1px -1px 0 black,
       0px -1px 0 black,
       1px -1px 0 black;
}

.talking {
  filter: brightness(1.2)
}

.sprites img {
  user-select: none;
  pointer-events: none;
}

.scene_effects {
  user-select: none;
  pointer-events: none;
}

.background {
  user-select: none;
  pointer-events: none;
}

.full-window {
    position: absolute;
    height: 100vh;
    width: var(--game-width);
}

body {
  -webkit-font-smoothing: antialiased;
    background-color: #29292e;
    margin: 0px;
    left:0;
    right:0;
    margin: auto;
    font-family: Avenir Next;
    user-select: none;
    overflow-x: hidden;
    /*     left: 50%;  /* center game window */
    /*     transform: translate(-50%, 0); */
}


.main-menu {
  display: none;
  overflow: hidden;
}

.game-menus {
    /*background-color: wheat;*/
}

.select-type-of-ui {
    position: absolute;
    left: 30vh;
}

.ui_item {
    display: none;
}

.active {
    display: block !important;
}

/* .active_menu {
    display: flex !important;
} */

.close-menu {
    background-image: url(../../static/images/interface/close.png);
    height: 6vh;
    background-repeat: no-repeat;
    width: 6vh;
    position: absolute;
    background-size: 40%;
    background-position: 47%;
    border-left: 0.1vh solid #6C6C6C;
    right: 0;
    cursor: pointer;
}

.close_game_menu {
    border-left: 0.0vh solid #6C6C6C;

    background-size: 40%;
  margin-top: 0.3vh;
}


.hide_spinner {
    display: none;
}

.overlay, .overlay_hidden, .inventory_overlay {
    transition: 0.35s;
    z-index: 1;
    visibility: hidden;
    opacity: 0.0;
    background-color: #00000060;
    position: absolute;
}

.hidden {
    display: none;
}


.dialog {
  transition: 0.7s ease;
  position: absolute;
  height: 83px;
  height: 12vh;
  width: 1167px;
  padding: 2vh 1vh;
  /* margin: auto; */
  /* border: 2px solid #00000045; */
  width: 118vh;
  /* background-color: rgb(255 255 255 / 35%); */
  /* display: none; */
  margin-left: auto;
  background: rgba(71, 71, 87, 0.4);
  margin-right: auto;
  left: 0;
  right: 0;
  bottom: 4vh;
  cursor: pointer;
  /* border-radius: 0.5vh; */
}

.name {
  font-weight: 400;
  color: white;
  font-size: 3vh;
  margin-top: -7.4vh;
  position: absolute;
  /* text-shadow: var(--outline); */
  left: 2.8vh;
  color: #FFFFFF;

/* 04 dp */
text-shadow: 0px 1px 3px rgb(0 0 0 / 33%), 0px 1px 18px rgb(0 0 0), 0px 3px 5px rgb(0 0 0 / 48%);
}


.text {
  font-weight: 400;
  color: white;
  font-size: 3.5vh;
  font-size: 2.9vh;
  /* display: none; */
  margin-top: -0vh;
  margin-left: 2vh;
  font-weight: 600;
  line-height: 3.9vh;
  width: 91vh;
  text-shadow: 0px 1px 3px rgb(0 0 0 / 33%), 0px 1px 18px rgb(0 0 0), 0px 3px 5px rgb(0 0 0 / 48%);
}
.blackout_all_game {
  visibility: hidden;
  opacity: 0;
  transition: 0.5s linear;
  z-index: 300500;
  background-color: black;
}

.active_blackout {
  visibility: visible;
  opacity: 1;
}

.choices {display: flex;position: absolute;flex-direction: column;bottom: 25vh;justify-content: center;margin-left: calc(1/2 *(var(--game-width) - 75vh));}

.choice-button {font-weight: 700;width: 75vh;background-color: #535367cc;margin-bottom: 2vh;font-size: 2.4vh;text-align: center;cursor: pointer;padding: 1vh;/* border-radius: 0.5vh; */transition: 0.5s;box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.1), 0px 2px 2px 0px rgba(0, 0, 0, 0.07), 0px 3px 1px -2px rgba(0, 0, 0, 0.06);color: white;border: 0.2vh solid rgb(255 255 255 / 7%);text-shadow: 0px 6px 10px rgba(0, 0, 0, 0.14), 0px 1px 18px rgba(0, 0, 0, 0.12), 0px 3px 5px rgba(0, 0, 0, 0.2);}

.choice-button:hover {/* width: 80vh; */transform: scale(1.05);filter: brightness(1.2);box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);}

.blackout {
  transition: 0.5s;
  background-color: black;
  opacity: 0;
}

.lightning {
  transition: 0.5s;
  background-color: white;
  opacity: 0;
}

.pink {
  transition: 0.5s;
  background-color: #ff4cc4;
  opacity: 0;
}

.active_effect {
  opacity: 1;
}


.interactive_object {
  opacity: 1.0;
  transition: 0.5s;
  position: absolute;
  cursor: pointer;
}

.unscalable_object {
  opacity: 1.0;
  transition: 0.5s;
  position: absolute;
  cursor: pointer;
}

.unscalable_object:hover {
  filter: brightness(1.2);
}

.interactive_object:hover {
  filter: brightness(1.2);
  transform: scale(1.15);
}

.hide_interactive {
  opacity: 0.0;
}

.menu {
  visibility: hidden;
  opacity: 0.0;
}

.game {
  visibility: hidden;
  opacity: 0.0;
  overflow: hidden;
}

.skip_intro {
  visibility: hidden;
  opacity: 0.0;
  text-align: center;
  transition: 0.5s;
  background-size: 200% auto;
  color: white;
  width: 15vh;
  position: absolute;
  font-weight: 600;
  padding: 1vh;
  bottom: 4vh;
  right: 5vh;
  font-size: 2.5vh;
  border-radius: 1vh;
  border: #f9ffbd3b 0.3vh solid;
  box-shadow: 0.2vh 0.2vh 1vh #00000059;
}

.skip_intro:hover {
  background-position: right center;
  width: 18vh;
}

.tabcontent, .char_tabcontent, .info_tabcontent  {
  /* flex-grow: 1; */
}

.tabcontent.visible, .char_tabcontent.visible, .info_tabcontent.visible  {
  visibility: visible;
}

.tabcontent.hidden, .char_tabcontent.hidden, .info_tabcontent.hidden {
  display: none !important;
  visibility: collapse;
}


.tablinks, .char_tablinks, .info_tablinks {
  font-family: 'Avenir Next';
  font-style: normal;
  font-weight: 600;
  /* font-size: 18px; */
  font-size: 1.9vh;
  /* line-height: 25px; */
  line-height: 2.7vh;
  color: rgba(255, 255, 255, 0.8);
  background: none;
  border: none;
  /* padding: 15px 30px; */
  padding: 1.5vh 3.2vh;
}

.tablinks.active_link, .char_tablinks.active_link, .info_tablinks.active_link {
  color: white;
  background-size: contain;
  background-position: bottom -5.2vh left 0;
  background-image: linear-gradient(90.09deg, #FBA262 -5.72%, #F96F74 100.31%);
  background-repeat: no-repeat;
  transition: 0.5s cubic-bezier(0.6, -0.28, 0.74, 0.05);
}


.tab, .char_tab, .info_tab {
  margin: auto;
  width: max-content;
}

.scene_effects {
  clip-path: inset(1px 1px);
}

.dotavalve {
  color: #ffffff42;
  margin-top: 3.5vh;
  display: block;
  line-height: 3.7vh;
}

.one_play_blocked {
    pointer-events: none;
}

.eight_choices {
  display: flex !important;
  flex-wrap: wrap;
  flex-direction: column;
  height: 30vh;
  width: 120vh;
  align-content: space-between;
  bottom: 25vh;
  left: -22vh;
}

.eight_choice_button {
  font-size: 2vh;
  width: 56vh;
  margin-right: 3vh;
  margin-bottom: 1.5vh;
}

.eight_choice_button:hover {
  /* width: 58vh; */
  margin-right:0vh;
}

/* ===== main_menu_v4.css ===== */
@charset "UTF-8";

.images_menu {
    position: absolute;
    height: 100vh;
}

#main_background {
    height: inherit;
}

.main_buttons {
    position: absolute;
    right: 10vh;
    bottom: 5vh;
}

.main_menu_buttons {
    width: 35vh;
    cursor: pointer;
    height: 10vh;
    border-radius: 1vh;
    font-family: 'Avenir Next';
    font-style: normal;
    font-weight: 700;
    font-size: 5.2vh;
    text-align: center;
    margin: 2.2vh 0;
    line-height: 10.5vh;
    color: white;
    transition:0.5s;
    background: linear-gradient(to right, #FF6B81 0%, #ff6aff  51%, #FF6B81  100%);
    background-size: 200% auto;
    border: #f9ffbd3b 0.3vh solid;
    box-shadow: 0px 0.3vh 0.4vh rgb(0 0 0 / 14%), 0px 0.2vh 0.8vh rgb(0 0 0 / 12%), 0px 0.2vh 0.3vh rgb(0 0 0 / 20%);
}

.main_menu_buttons:hover {
  transform: scale(1.05);
    background-position: 80% 47%;
    filter: brightness(1.2);
    box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);
}

.log_in_button {position: absolute;width: 18vh;height: 7vh;right: 3vh;text-decoration: none;top: 0vh;font-size: 2vh;background-size: 24%;background-position: 10.2vh;background-repeat: no-repeat;cursor: pointer;background-color: #373737;transition: 0.2s;}

#log_in_button_game:hover {
  height: 7vh !important;
  filter: brightness(1.2);
}

#log_in_button_game:hover .log_in_text {
  margin-top:0.5vh;
}

.log_in_text {
    padding: 2.2vh 1.9vh;
    font-weight: 600;
    transition: 0.2s;
    color: white;
  }
  
.profile.profile_game {
  left:2vh;
}

.profile {position: relative;width: max-content;max-width: 17vh;top: 0;position: absolute;}

.profile_menu, .profile_menu_game {
  /* visibility: hidden; */
  display: none;
  /* opacity: 0.0; */
  /* transition: 0.5s; */
}

.profile_menu {
  margin-top: 8vh !important;
}

.profile_menu_game {
  margin-top: 2vh;
}

.profile_button, .profile_button_game {background-color: #474757;height: 5.1vh;/* position: absolute; */transition: 0.2s;color: white;cursor: pointer;display: flex;/* border-radius: 0 0 1vh 1vh; */padding: 1vh 1.2vh 0 1.5vh;box-shadow: 0.2vh 0.2vh 1vh #00000059;}

.profile_button:hover, .profile_button_game:hover {
  padding: 1.6vh 1.2vh 0.5vh 1.5vh;
}

.profile_button_game {
  position: relative;
  flex: 0 0 auto;
}

.avatar {background-image: url("https://c8.patreon.com/2/200/9576401");width: 4.1vh;height: 4.1vh;background-size: contain;border-radius: 5vh;}

.nickname {font-size: 2.4vh;padding: 0.5vh 0.5vh 0 1.5vh;max-width: 9.5vh;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}

.profile_menu, .profile_menu_game {width: 31vh;position: relative;background-color: #474757;box-shadow: 0.2vh 0.2vh 1vh #00000059;right: 0;    /* ❌ можно не указывать */left: auto;  /* ❌ тоже не надо */}

.profile_title {font-size: 2vh;display: flex;padding: 2vh;padding-top: 2.3vh;font-weight: 700;color: white;flex-wrap: nowrap;}

.log_out {position: relative;cursor: pointer;font-size: 2vh;bottom: 0;display:flex;border-top: 0.1vh solid #979797;padding: 1.7vh 2vh;color: #ff6aff;text-decoration: none;font-weight: 700;}

.log_out::after {
  background-image: url("../images/exit.svg");
  width: 2.8vh;
  height: 2.8vh;
  background-size: cover;
  background-repeat: no-repeat;
  content: "";
  display:block;
  position: absolute;
  right: 2vh;
  filter: hue-rotate(43deg) brightness(1.3);
}

.base_long_text {
  color: white;
  font-size: 2.2vh;
  line-height: 4vh;
  margin-left: 2.8vh;
  margin-top: 3vh;
  overflow-y: scroll;
  /* text-align: center; */
  /* overflow: hidden; */
  padding: 0vh 2vh  0vh 0vh;
  height: 61vh;
  width: 79vh;
}

.version_container {position: absolute;bottom: 15vh;left: 2vh;}
.version {font-size: 4.2vh;color: white;font-weight: 800;}


.roadmap_image {max-width: 100%;background-size: contain;}


.roadmap:hover {
  
  transform: scale(1.05);
    filter: brightness(1.2);
   background-position: right center; /* change the direction of the change here */
/*     color: #fff; */
    text-decoration: none;
    box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);
}


.credits_menu, .roadmap_menu, .walkthrough_menu, .preview_menu, .faq_menu {
  position: absolute;
  z-index: 101;
  width: 85vh;
  height: 72vh;
  background-color: #474757;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
  /* border-radius: 0.7vh; */
  box-shadow: 0.1vh 0.2vh 1vh #00000052;
  bottom: 12vh;
  
  visibility: hidden;
  opacity: 0.0;
}

.credits_menu {
  height: 53.5vh;
  width: 57vh;
  left: -40vh;
  bottom: 24vh;
}


.special_thanks {
  position: absolute;
  background-color: #474757;
  width: 41vh;
  height: 53.5vh;
  bottom: 24vh;
  left: 100vh;
  /* border-radius: 1vh; */
  box-shadow: 0.1vh 0.2vh 1vh #00000052;
}

.credits_text, .roadmap_text, .credits_text_walkthrough {
  color: white;
  font-size: 2.2vh;
  line-height: 4vh;
  overflow-y: scroll;
  /* text-align: center; */
  /* overflow: hidden; */
  padding: 2vh 2vh  3vh 3vh;
  height: 60.9vh;
  /* width: 79vh; */
  font-weight: 600;
}

.walkthrough_gal_text::-webkit-scrollbar-track, .credits_text::-webkit-scrollbar-track, .roadmap_text::-webkit-scrollbar-track, .credits_text_walkthrough::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 1vh rgba(0,0,0,0.3);
	background-color: #474757;
}

.walkthrough_gal_text::-webkit-scrollbar, .credits_text::-webkit-scrollbar, .roadmap_text::-webkit-scrollbar, .credits_text_walkthrough::-webkit-scrollbar
{
	width: 10px;
	background-color: #616177;
}

.walkthrough_gal_text::-webkit-scrollbar-thumb, .credits_text::-webkit-scrollbar-thumb, .roadmap_text::-webkit-scrollbar-thumb, .credits_text_walkthrough::-webkit-scrollbar-thumb
{
	background-color: #616177;
	border: 0.1vh solid #555555;
}


.credits_text_walkthrough {
  height: 5vh;
}

.credits_menu, .special_thanks {
  transition: 0.5s;
  visibility: hidden;
  opacity: 0.0;
  overflow-y: hidden;
  overflow-x: hidden;
}

#log_in_button_game {
	left: 2vh;
	height: 6.1vh;
	width: 17.4vh;
	background-size: 20%;
	background-position: 9.9vh;
	box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12);
	background-color: #474757;
}

.logomain {
  position: absolute;
  top: 4vh;
  left: 2vh;
  height: 38vh;
  pointer-events: none;
}

#log_in_button_game .log_in_text {
	padding: 1.8vh 1.75vh;
}

.login_wrapper {
   position: relative;
   top: 0vh;
   right: 2vh;
   z-index: 1;
   display: flex;
   flex-direction: column;
   align-items: flex-end;
}

.dirty_deeds_container {
  position: absolute;
  background-color: #535367;
  display: flex;
  width: 65vh;
  bottom: 2vh;
  color: white;
  /* border: #535367 0.5vh solid; */
  left: 2vh;
  border-radius: 0;
  overflow: hidden;
  box-shadow: 0.2vh 0.2vh 1vh #00000059;
}

.dirty_image {
  width: 29.5vh;
  /* height: 9vh; */
}

.dirty_name {font-size: 2vh;display: flex;margin-bottom: 1vh;justify-content: center;}

.dirty_button {
  cursor: pointer;
  width: 30vh;
  display: block;
  height: 3.4vh;
  text-decoration: none;
  border: #ff6aff 0.3vh solid;
  font-size: 2vh;
  color: #ff6aff;
  text-align: center;
  padding-top: 0.7vh;
  font-weight: 600;
}

.dirty_container {
  margin: auto;
}

.container_buttons {
  display: flex;
}

.profile_wrapper {
  display: flex;
  align-items: center;
  gap: 1vh; /* расстояние между ником и рюкзаком */
}

.profile_button_game {
  /* display: flex; */
  /* align-items: center; */
  background-color: #474757;
  padding: 1.1vh 1.2vh 0 1.5vh;
  box-shadow: 0.2vh 0.2vh 1vh #00000059;
  /* border-radius: 0.7vh; */
  width: auto;
  max-width: 30vh;
  overflow: hidden;
}


.inventory_menu_button {
  background-image: url(../../static/images/interface/icons8-school-backpack-90.webp);
  background-size: 2.8vh;
  background-repeat: no-repeat;
  cursor: pointer;
  transition: 0.2s;
  width: 5vh;
  height: 6.1vh;
  background-color: #474757;
  background-position: 51% 47%;
  box-shadow: none;
  margin-left: 1.5vh;
  flex-shrink: 0;
  box-shadow: 0.2vh 0.2vh 1vh #00000059;
}

.profile_menu,
.profile_menu_game {
  display: none;
}

.profile_menu.active,
.profile_menu_game.active {
  display: block;
}

/* ===== skill.css ===== */
@charset "UTF-8";


.base-menu {
  left: 25.5vh;
  top: 7vh;
  display: flex;
  flex-direction: column;
  width: 127vh;
  height: 84vh;
  background-color: #474757;
  z-index: 10;
  position: absolute;
  box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.14), 0px 1px 18px rgba(0, 0, 0, 0.12), 0px 3px 5px rgba(0, 0, 0, 0.2);
  border-radius: 5px;
}

.money_counter {
  display: flex;
  position: absolute;
  background-color: #474757;
  box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.14), 0px 1px 18px rgba(0, 0, 0, 0.12), 0px 3px 5px rgba(0, 0, 0, 0.2);
  border-radius: 5px;
  align-items: center;
  padding: 1vh 2vh 1vh 1vh;
  left: 151vh;
  bottom: 5vh;
  z-index: 100;
}

.money_icon {
  background: url("../../static/images/tavern_menu_images/interface_icons/money_icon.png") no-repeat;
  width: 5vh;
  background-size: cover;
  height: 5vh;
}

.money_count {
  font-size: 2vh;
  font-weight: 700;
  color: white;
  margin-left: 0.5vh;
}

#Tavern, #Talents {
  /* display: grid; */
  /* grid-template-columns: 1fr 1fr; */
  /* column-gap: 20px; */
  display: flex;
  flex-wrap: nowrap;
}

.skill-tree {
  /* align-self: center; */
  /* justify-self: flex-end; */
}

.skill_item, .talent_item {
  border: none;
  outline: none;
  display: flex;
  width: 6vh;
  height: 6vh;
  background-color: #C4C4C4;
  border-radius: 0.1vh;
  box-shadow: 0 0.2vh 0.2vh rgba(0, 0, 0, 0.14), 0 0.3vh 0.1vh rgba(0, 0, 0, 0.12), 0 0.1vh 0.5vh rgba(0, 0, 0, 0.2);
  align-items: center;
  justify-content: center;
  transition: 0.5s ease;
  z-index: 100;
}

.skill_item.item-unavailable, .talent_item.item-unavailable {
  box-shadow: 0 0.2vh 0.2vh rgba(0, 0, 0, 0.14), 0 0.3vh 0.1vh rgba(0, 0, 0, 0.12), 0 0.1vh 0.5vh rgba(0, 0, 0, 0.2);
  border: none;
  outline: none;
  border-radius: 0px;
  z-index: 100;
}

.skill_item.item-available, .talent_item.item-available {
  border-radius: 0px;
  /* margin: 17px; */
  background-color: white;
}

.skill_item.item-active, .talent_item.item-active {
  border-radius: 0px;
  /* margin: 17px; */
  background: linear-gradient(137.23deg, #FAA161 24.03%, #F71C92 199.29%);
}

.skill_item.selected_item, .talent_item.selected_item {
  box-shadow: 0px 0px 0.8vh 0.2vh rgb(255 255 255 / 58%) !important;
  border: 0.4vh solid #474757 !important;
  outline: 0.2vh solid white !important;
}

.skill_item.item-active, .talent_item.item-active {
  border: none;
  outline: none;
  border-radius: 0px;
  /* margin: 20px; */
  background: linear-gradient(137.23deg, #FAA161 24.03%, #F71C92 199.29%);
}

.skill_item.item-available, .talent_item.item-available {
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.14), 0px 3px 1px rgba(0, 0, 0, 0.12), 0px 1px 5px rgba(0, 0, 0, 0.2);
  border: none;
  outline: none;
  border-radius: 0px;
  z-index: 100;
  /* margin: 20px; */
  /* background-color: white; */
}

.skill_item .icon, .talent_item .icon  {
  background-repeat: no-repeat;
  background-position: center;
  max-width: 3.4vh;
  max-height: 3.4vh;
}

.info-container, .talents-info-container {/* width: max-content; *//* position: absolute; *//* right: 0; *//* display: flex; *//* margin-top: 7vh; */justify-content: center;/* padding: 26vh; */border-left: 0.15vh solid #6c6c6c;}

.info_item_container {
  position: absolute;
  /* width: 52vh; */
  /* inset: 0; */
  /* z-index: 100500; */
  padding: 6.5vh 5vh;
  /* flex-direction: column; */
  /* align-items: center; */
  /* justify-content: center; */
}

.infocontent, .char_infocontent {
  transition: 0.5s ease-out;
  position: absolute;
}

.info_image {
  border-radius: 10px;
  background-size: contain;
  width: 43.5vh;
  height: 16vh;
}

.info_title {
  font-style: normal;
  font-weight: 600;
  font-size: 2.2vh;
  width: 40vh;
  line-height: 3vh;
  color: #FFFFFF;
  margin-top: 2.7vh;
  margin-left: 2.1vh;
}

.info_description {
  font-style: normal;
  font-weight: 400;
  font-size: 1.6vh;
  line-height: 2.6vh;
  color: #FFFFFF;
  background-color: #41414F;
  padding: 2.5vh 2.7vh;
  border-radius: 3px;
  width: 38vh;
  margin-top: 1.6vh;
}

.info_buffs {
  margin-top: 21px;
  margin-top: 2.5vh;
}

.info_buff_description {
  font-family: 'Avenir Next';
  font-style: normal;
  font-weight: 600;
  font-size: 1.55vh;
  line-height: 2.6vh;
  color: #FFFFFF;
  margin-top: 0.6vh;
}

.info_cost::before {
  width: 40px;
  width: 5vh;
  height: 40px;
  height: 5vh;
  content: "";
  float: left;
  display: block;
  margin-right: 6px;
  margin-right: 0.6vh;
  background: url("../../static/images/tavern_menu_images/interface_icons/money_icon.png") no-repeat;
  background-size: contain;
}

.info_cost {
  font-family: 'Avenir Next';
  font-style: normal;
  font-weight: 700;
  font-size: 1.9vh;
  line-height: 4.3vh;
  /* margin-left: 14px; */
  margin-left: 1.8vh;
  color: #FFFFFF;
}

.info_button {
  font-family: 'Avenir Next';
  font-style: normal;
  font-weight: 600;
  font-size: 1.9vh;
  line-height: 4.5vh;
  color: #292929;
  padding: 0 3vh;
  border-radius: 0.4vh;
  border: none;
}

.info_button_available {background: linear-gradient(137.23deg, #FAA161 24.03%, #F71C92 199.29%);/* 04 dp */box-shadow: 0px 4px 5px rgba(0, 0, 0, 0.14), 0px 1px 10px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.2);}

.info_button_unavailable {
  background-color: #C4C4C4;
}

.info_button_active {
  background-color: #474757;
  color: #FA836D;
  border: 0.25vh solid #FA836D;
}

.info_upgrade_container {
  display: flex;
  margin-top: 2.5vh;
}

.text_orange {
  color: #FA836D;
}


.menu-header {
  border-bottom: 0.1vh solid #6C6C6C;
  display: flex;
  height: 6vh;
  align-items: center;
}

.first_level_container {
  display: flex;
}

.second_level_container {
  display: flex;
  flex-direction: column;
  /* margin-top: -78px; */
  margin-top: -8vh;
}

.third_level_container {
  margin: 24px 0;
  margin: 2.5vh 0;
  display: flex;
}

.border_vert {
  width: 0px;
  background-color: #949494;
  border: 0.1vh solid #949494;
  height: 90px;
  height: 9.1vh;
  margin: 0 25px;
  margin: 0px 2.85vh;
}

.border_vert_top {
  width: 0px;
  background-color: #949494;
  border: 0.1vh solid #949494;
  height: 90px;
  height: 17.1vh;
  margin: 0 25px;
  margin: 0 2.85vh;
  margin-top: -8vh;
}

.border_center_horizontal_short {
  width: 40px;
  width: 4.2vh;
  background-color: #949494;
  border: 1px solid #949494;
  border: 0.1vh solid #949494;
  height: 0;
  margin: 25px 0;
  margin: 2.85vh 0;
}

.border_top_horizontal_short {
  /* width: 30px; */
  width: 3vh;
  background-color: #949494;
  border: 0.1vh solid #949494;
  height: 0px;
  /* margin: 0 0px; */
  margin-top: -25px;
  margin-top: -2.63vh;
}

.border_bottom_horizontal_short {
  width: 30px;
  width: 3vh;
  background-color: #949494;
  border: 0.1vh solid #949494;
  height: 0px;
  margin: 0 0px;
  margin-top: 98px;
  margin-top: 10.8vh;
}

.border_vertical_short {
  width: 0px;
  background-color: #949494;
  border: 1px solid #949494;
  border: 0.1vh solid #949494;
  height: 100px;
  height: 11vh;
  margin: 0 0;
  margin-top: -25px;
  margin-top: -2.65vh;
}

.border_container {
  display: flex;
  flex-direction: column;
}

.skill-tree-container, .talents-tree-container {
  overflow-y: scroll;
  /* overflow: hidden; */
  position: relative;
  /* width: 75vh; */
  height: 64.2vh;
  /* left: 13vh; */
  padding: 7vh 11vh;
  /* direction: rtl; */
  display: flex;
  justify-content: center;
}

.talents-tree-container  {
  padding: 7vh 16vh;
}


#skill-tree > :last-child {
  padding-bottom: 10vh;
}

#talents-tree > :first-child {
  padding-top: 6vh;
}


.border_vertical_long {
  width: 0px;
  background-color: #949494;
  border: 1px solid #949494;
  border: 0.1vh solid #949494;
  height: 100px;
  height: 22vh;
  margin: 0 0;
  margin-top: -25px;
  margin-top: 2.85vh;
}

.border_vert_top_long {
  width: 0px;
  background-color: #949494;
  border: 0.1vh solid #949494;
  height: 90px;
  height: 28.1vh;
  margin: 0 25px;
  margin: 0 2.85vh;
  margin-top: -25vh;
}

.border_vert_top_short {
  width: 0px;
  background-color: #949494;
  border: 0.1vh solid #949494;
  height: 90px;
  height: 13.1vh;
  margin: 0 25px;
  margin: 0 2.85vh;
  margin-top: -8vh;
}

.border_center_center_horizontal_short_triple {width: 40px;width: 3vh;background-color: #949494;border: 1px solid #949494;border: 0.1vh solid #949494;height: 0;margin: 25px 0;margin: 7.95vh 0;}

.border_bottom_horizontal_short_triple {width: 40px;width: 3vh;background-color: #949494;border: 1px solid #949494;border: 0.1vh solid #949494;height: 0;margin: 25px 0;margin: 2.85vh 0;}

.border_top_horizontal_short_triple {
  width: 40px;
  width: 3vh;
  background-color: #949494;
  border: 1px solid #949494;
  border: 0.1vh solid #949494;
  height: 0;
  margin: 25px 0;
  margin: 2.85vh 0;
}

.second_level_container_triple {
  margin-top: -2.5vh;
}

/* ===== info.css ===== */
.points_container {
    display: flex;
}

.doll {text-align: center;margin-top: 4.8vh;margin-left: 5vh;margin-right: 3vh;}

.doll .name_character {font-family: 'Avenir Next';font-style: normal;font-weight: 600;font-size: 2.5vh;color: #FFFFFF;margin: 1vh 0;}

.doll .title_character {font-family: 'Avenir Next';font-style: normal;font-weight: 600;font-size: 1.9vh;margin-bottom: 4vh;color: rgba(255, 255, 255, 0.67);}

.doll .doll_image {height: 62vh;}

.points_info {margin: auto;}

.points_info .main_points {
    display: flex;
}

.points_info .main_points .big_item {
    display: flex;
    align-items: center;
    margin-right: 6vh;
}

.points_info .main_points .big_item .icon {
    max-height: 5vh;
}

.points_info .main_points .big_item .title {
    padding: 0;
    color:white;
    font-style: normal;
    font-weight: 600;
    font-size: 2.5vh;
    margin: 0 1.5vh;
}

.points_info .main_points .big_item .content {font-family: 'Avenir Next';font-style: normal;font-weight: 600;font-size: 2.5vh;color: #FA836D;margin-left: 1vh;}

.points_info .secondary_points {
    margin-top: 6vh;
}

.points_info .header {
    display: flex;
    align-items: center;
}

.points_info .header .icon {
    max-width: 5vh;
    height: 5vh;
    background-size: contain;
    display: flex;
}

.points_info .header .title {
    padding: 0;
    color:white;
    font-style: normal;
    font-weight: 600;
    font-size: 2.5vh;
    margin-left: 2vh;
}

.points_info .bottom {
    display: flex;
}

.points_info .bottom .bottom_container {
    display: flex;
    margin-top: 1.5vh;
    margin-right: 6vh;
}

.points_info .bottom .bottom_container .title {
    font-style: normal;
    font-weight: 600;
    font-size: 2vh;
    color: white;
    padding: 0;
    width: 24vh;
}

.points_info .bottom .content {font-style: normal;font-weight: 600;font-size: 2vh;color: #FA836D;}

/* ===== saves_v3.css ===== */

@charset "UTF-8";

.title_menu {font-family: 'Avenir Next';font-style: normal;font-weight: 600;font-size: 1.9vh;line-height: 3vh;color: #FFFFFF;padding: 1.5vh 2.5vh;}

.saves_and_pr {
    display: flex;
    justify-content: center;
    z-index: 301;
}

.saves-menu {
    /* display: none; */
    left: 25.5vh;
    bottom: 16vh;
    /* display: flex; */
    flex-direction: column;
    width: 125.5vh;
    height: 67vh;
    background-color: #474757;
    z-index: 301;
    position: absolute;
    box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.14), 0px 1px 18px rgba(0, 0, 0, 0.12), 0px 3px 5px rgba(0, 0, 0, 0.2);
}

.save_item {
    position: relative;
    /* overflow: hidden; */
    width: 24vh;
    height: 48vh;
    margin: 6.4vh 1.8vh;
    background-color: #535367;
    box-shadow: 0px 0.2vh 0.8vh 0.2vh #00000024;
}

.saves_container {
    display: flex;
    /* justify-content: center; */
}

.empty_save_item_container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: inherit;
}

.save_icon {max-width: 4.5vh;max-height: 4.5vh;margin-bottom: 1.5vh;}

.create_button, .start_button {
    background: linear-gradient(198deg, #FF6B81 24.03%, #ff6aff 199.29%);
    box-shadow: 0px 0.3vh 0.4vh rgb(0 0 0 / 4%), 0px 0.2vh 0.8vh rgb(0 0 0 / 12%), 0px 0.2vh 0.3vh rgb(0 0 0 / 20%);
    border-radius: 0.8vh;
    outline: none;
    border: none;
    font-family: 'Avenir Next';
    font-style: normal;
    font-weight: 700 !important;
    font-size: 1.6vh;
    color: white;
    width: 20vh;
    height: 3.8vh;
    cursor:pointer;
}


.first_saves_container .screenshot {height: 13.3vh;margin-bottom: 1.8vh;object-fit: cover;width: 100%;}

.first_saves_container .sprite_preview {position:absolute;height: 13.3vh;margin-bottom: 1.8vh;object-fit: cover;width: 100%;}

.first_saves_container .pr_title {font-family: 'Avenir Next';font-style: normal;font-weight: 600;font-size: 1.9vh;color: #FFFFFF;margin-bottom: 1vh;padding: 0 1.7vh;}

.first_saves_container .pr_description {font-family: 'Avenir Next';font-style: normal;font-weight: 600;font-size: 1.5vh;line-height: 2.2vh;color: #D3D3D3;padding: 0 1.7vh;}

.first_saves_container .pr_button {
    background: linear-gradient(113.66deg, #C47DFC -50.64%, #8B9BF1 112.22%);
    box-shadow: 0px 0.3vh 0.3vh rgb(0 0 0 / 9%), 0px 0.1vh 0.7vh rgb(0 0 0 / 12%), 0px 0.1vh 0.2vh rgb(0 0 0 / 20%);
    border-radius: 0.8vh;
    font-family: 'Avenir Next';
    font-style: normal;
    font-weight: 700;
    font-size: 1.6vh;
    color: white;
    height: 3.8vh;
    text-decoration: none;
    outline: none;
    display: flex;
    border: none;
    position: absolute;
    bottom: 2.5vh;
    left: 2.2vh;
    right: 2.2vh;
    justify-content: center;
    align-items: center;
}

.first_saves_container .saves_small_title {font-family: 'Avenir Next';font-style: normal;font-weight: 600;font-size: 1.5vh;color: #D3D3D3;padding: 0 2vh;}

.first_saves_container .saves_description {font-family: 'Avenir Next';font-style: normal;font-weight: 600;font-size: 1.9vh;color: #FFFFFF;padding: 0 2vh;margin-top: 0.7vh;margin-bottom: 1vh;display: flex;}

.first_saves_container .start_button {
    left: 2vh;
    position: absolute;
    bottom: 2.5vh;
}

.first_saves_container .money_text {
    margin-bottom: 0.7vh;
}

.first_saves_container .money_text::after {width: 3.5vh;height: 3.5vh;content: "";margin-top: -0.4vh;display: block;margin-left: 0.6vh;background: url("../../static/images/tavern_menu_images/interface_icons/money_icon.png") no-repeat;background-size: contain;}





.autosave .screenshot {height: 13.3vh;margin-bottom: 1.8vh;object-fit: cover;width: 100%;}

.autosave .sprite_preview {position:absolute;height: 13.3vh;margin-bottom: 1.8vh;object-fit: cover;width: 100%;}


.autosave .pr_title {font-family: 'Avenir Next';font-style: normal;font-weight: 600;font-size: 1.9vh;color: #FFFFFF;margin-bottom: 1vh;padding: 0 1.7vh;}

.autosave .pr_description {font-family: 'Avenir Next';font-style: normal;font-weight: 600;font-size: 1.5vh;line-height: 2.2vh;color: #D3D3D3;padding: 0 1.7vh;}

.autosave .pr_button {
    background: linear-gradient(113.66deg, #C47DFC -50.64%, #8B9BF1 112.22%);
    box-shadow: 0px 0.3vh 0.3vh rgb(0 0 0 / 14%), 0px 0.1vh 0.7vh rgb(0 0 0 / 12%), 0px 0.1vh 0.2vh rgb(0 0 0 / 20%);
    border-radius: 0.2vh;
    font-family: 'Avenir Next';
    font-style: normal;
    font-weight: 600;
    font-size: 1.6vh;
    color: #292929;
    height: 3.6vh;
    text-decoration: none;
    outline: none;
    border: none;
    position: absolute;
    bottom: 2.5vh;
    left: 2.2vh;
    right: 2.2vh;
}

.autosave .saves_small_title {font-family: 'Avenir Next';font-style: normal;font-weight: 600;font-size: 1.5vh;color: #D3D3D3;padding: 0 2vh;}

.autosave .saves_description {font-family: 'Avenir Next';font-style: normal;font-weight: 600;font-size: 1.9vh;color: #FFFFFF;padding: 0 2vh;margin-top: 0.7vh;margin-bottom: 1vh;line-height: 2.8vh;display: flex;}

.autosave .start_button {
    left: 2vh;
    position: absolute;
    bottom: 2.5vh;
}

.autosave .money_text {
    margin-bottom: 0.7vh;
}

.autosave .money_text::after {width: 3.5vh;height: 3.5vh;content: "";margin-top: -0.4vh;display: block;margin-left: 0.6vh;background: url("../../static/images/tavern_menu_images/interface_icons/money_icon.png") no-repeat;background-size: contain;}

.save_menu_container {
    display: none;
}

.unwrapped_saves {
    display: none;
}

.unwrapped_saves.active {
    display: flex !important;
}


.first_saves_container {
    display: none;
}

.first_saves_container.active {
    display: flex !important;
    justify-content: center; 
}

.autosave {
    position: relative;
    /* overflow: hidden; */
    width: 24vh;
    height: 48vh;
    /* margin: 6.4vh 1.8vh; */
    box-shadow: 0px 0.2vh 0.8vh 0.2vh #00000024;
    background-color: #535367;
}

.manual_container {
    /* margin: auto; */
    margin: 1.5vh 2.5vh;
}

.manual {
    position: relative;
    /* overflow: hidden; */
    width: 86vh;
    display: flex;
    height: 10vh;
    margin-bottom: 2.7vh;
    background-color: #535367;
    box-shadow: 0px 0.2vh 0.8vh 0.2vh #00000024;
    align-items: center;
}

.unwrapped {
    display: none;
}

.unwrapped.active {
    display: flex !important;
}


.manual .screenshot {width: 17.3vh;height: 100%;/* background-size: cover; */object-fit: cover;margin-right: 1vh;}

.manual .sprite_preview {position:absolute;height: 10.3vh;/* margin-bottom: 1.8vh; */object-fit: cover;width: 20%;}


.manual .pr_title {font-family: 'Avenir Next';font-style: normal;font-weight: 600;font-size: 1.9vh;color: #FFFFFF;margin-bottom: 1vh;padding: 0 1.7vh;}

.manual .pr_description {font-family: 'Avenir Next';font-style: normal;font-weight: 600;font-size: 1.5vh;line-height: 2.2vh;color: #D3D3D3;padding: 0 1.7vh;}

.manual .pr_button {
    background: linear-gradient(113.66deg, #C47DFC -50.64%, #8B9BF1 112.22%);
    box-shadow: 0px 0.3vh 0.3vh rgb(0 0 0 / 14%), 0px 0.1vh 0.7vh rgb(0 0 0 / 12%), 0px 0.1vh 0.2vh rgb(0 0 0 / 20%);
    border-radius: 0.2vh;
    font-family: 'Avenir Next';
    font-style: normal;
    font-weight: 600;
    font-size: 1.6vh;
    color: #292929;
    height: 3.6vh;
    text-decoration: none;
    outline: none;
    border: none;
    position: absolute;
    bottom: 2.5vh;
    left: 2.2vh;
    right: 2.2vh;
}

.manual .saves_small_title {font-family: 'Avenir Next';font-style: normal;font-weight: 600;font-size: 1.5vh;margin: 0.8vh 1.5vh;color: #D3D3D3;/* padding: 0 2vh; */}

.manual .saves_description {font-family: 'Avenir Next';font-style: normal;font-weight: 600;font-size: 1.9vh;color: #FFFFFF;/* max-width: 12vh; *//* text-overflow: ellipsis; *//* display: inline-block; *//* overflow: hidden; */white-space: nowrap;margin: 0 1.5vh;max-width: 15vh;/* padding: 0 2vh; *//* margin-top: 0.7vh; *//* margin-bottom: 1vh; *//* display: flex; */}

.manual .saves_description.location_name {font-family: 'Avenir Next';font-style: normal;font-weight: 600;font-size: 1.9vh;color: #FFFFFF;/* max-width: 12vh; */text-overflow: ellipsis;display: inline-block;overflow: hidden;white-space: nowrap;margin: 0 1.5vh;max-width: 35vh;/* padding: 0 2vh; *//* margin-top: 0.7vh; *//* margin-bottom: 1vh; *//* display: flex; */}


.manual .start_button {
    right: 2vh;
    width: 7vh;
    position: absolute;
    bottom: 2.5vh;
}

.manual .money_text {
    /* margin-bottom: 0.7vh; */
    display: flex;
    align-items: center;
    margin-right: 3.5vh;
}

.manual .money_text::after {width: 3.5vh;height: 3.5vh;content: "";position: absolute;/* margin-top: -2vh; */display: block;margin-left: 5vh;background: url("../../static/images/tavern_menu_images/interface_icons/money_icon.png") no-repeat;background-size: contain;}

.manual .delete_button {
    position: absolute;
    right: 0;
    margin-right: -2vh;
    margin-top: -9vh;
    width: 4vh;
    height: 4vh;
    background-color: #535367;
    border: none;
    background-image: url(../../static/images/interface/delete.png);
    background-size: 50%;
    background-repeat: no-repeat;
    background-position: 50%;
    border-radius: 0.5vh;
    box-shadow: 0px 4px 5px rgba(0, 0, 0, 0.14), 0px 1px 10px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.2);
}

.delete_button {
    position: absolute;
    right: 0;
    margin-right: -2vh;
    margin-top: -2vh;
    width: 4vh;
    height: 4vh;
    background-color: #535367;
    border: none;
    background-image: url(../../static/images/interface/delete.png);
    background-size: 50%;
    background-repeat: no-repeat;
    background-position: 50%;
    cursor:pointer;
    border-radius: 0.5vh;
    box-shadow: 0px 4px 5px rgba(0, 0, 0, 0.14), 0px 1px 10px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.2);
}

.manual.empty_manual {
    justify-content: center;
}

.manual .save_icon {
    margin: 0;
    margin-right: 2vh;
}

.back_button {
    cursor:pointer;
    background-image: url(../../static/images/interface/back_button.png);
    width: 3vh;
    height: 3vh;
    background-repeat: no-repeat;
    border-right: solid #6c6c6c 0.1vh;
    padding: 1.5vh;
    background-size: 50%;
    background-position: center;
}

#profile_header, #play_header {
    display: none;
}

#profile_header.active, #play_header.active {
    display: flex !important;
}

.autosave_title, .manual_title {
        font-family: 'Avenir Next';
        font-style: normal;
        font-weight: 600;
        font-size: 1.9vh;
        line-height: 3vh;
        color: #FFFFFF;
        padding: 2vh 0.5vh;
}

.autosave_container {
    margin: 1.5vh 2.5vh;
}

/* ===== services.css ===== */
@charset "UTF-8";

.services-container {
  display: flex;
  margin: auto;
  width: max-content;
}

.service_item {
  position: relative;
  overflow: hidden;
  width: 306px;
  width: 32.5vh;
  height: 607px;
  height: 64.5vh;
  margin: 61px 18px;
  margin: 6.8vh 1.8vh;
  background-color: #535367;
  filter: drop-shadow(0px 6px 10px rgba(0, 0, 0, 0.14)) drop-shadow(0px 1px 18px rgba(0, 0, 0, 0.12)) drop-shadow(0px 3px 5px rgba(0, 0, 0, 0.2));
  border-radius: 6px;
  border-radius: 0.6vh;
}

.services_image {height: 169px;height: 18vh;}

.services_title {
  margin-left: 6px;
  margin-left: 0.8vh;
  margin-top: 2.5vh;
  font-family: 'Avenir Next';
  font-style: normal;
  font-weight: 600;
  font-size: 21px;
  font-size: 2.3vh;
  line-height: 29px;
  line-height: 3vh;
  color: #FFFFFF;
}

.services_description {
  margin-top: 14px;
  margin-top: 1.4vh;
  font-family: 'Avenir Next';
  font-style: normal;
  font-weight: 600;
  font-size: 14px;
  font-size: 1.5vh;
  line-height: 21px;
  line-height: 2.3vh;
  color: #FFFFFF;
  background-color: #5C5C77;
  padding: 16px;
  padding: 1.8vh;
  border-radius: 4px;
  border-radius: 0.2vh;
}

.services_buffs {
  /* margin-top: 17px; */
  margin-top: 1.9vh;
  font-family: 'Avenir Next';
  font-style: normal;
  font-weight: 600;
  /* font-size: 15px; */
  font-size: 1.6vh;
  /* margin-left: 3px; */
  margin-left: 0.2vh;
  /* line-height: 22px; */
  line-height: 2.4vh;
  color: #FFFFFF;
}

.services_upgrade_container {
  bottom: 25px;
  bottom: 2.5vh;
  position: absolute;
  left: 27px;
  left: 2.7vh;
  right: 27px;
  right: 2.7vh;
}

.services_buff_description {margin-bottom: 7px;margin-bottom: 0.8vh;}

.services_button {
  margin-top: 10px;
  margin-top: 1vh;
  width: 100%;
  height: 43px;
  height: 4.5vh;
  font-family: 'Avenir Next';
  font-style: normal;
  font-weight: 600;
  font-size: 20px;
  font-size: 2vh;
  line-height: 27px;
  line-height: 2.9vh;
  border: none;
  border-radius: 4px;
  border-radius: 0.4vh;
  color: #292929;
}

.service_content_container {
  padding: 0 20px;
  padding: 0 2.1vh;
}

.services_cost::before {
/* width: 37px; */
width: 4vh;
/* height: 37px; */
height: 4vh;
content: "";
float: left;
display: block;
/* margin-right: 6px; */
margin-right: 0.6vh;
background: url("../../static/images/tavern_menu_images/interface_icons/money_icon.png") no-repeat;
background-size: contain;
}

.services_cost {
font-family: 'Avenir Next';
font-style: normal;
font-weight: 700;
font-size: 18px;
font-size: 1.9vh;
line-height: 37px;
line-height: 4.2vh;
color: #FFFFFF;
text-shadow: 0px 0.876872px 0.876872px rgba(0, 0, 0, 0.14), 0px 1.75374px 0.876872px rgba(0, 0, 0, 0.12), 0px 0.876872px 2.63062px rgba(0, 0, 0, 0.2);
}

.services_button_active {
background: #535367;
color: #FA816E;
border: 2px solid #FA816E;
border: 0.2vh solid #FA816E;
}

.services_button_available {
background: linear-gradient(137.23deg, #FAA161 24.03%, #F71C92 199.29%);
box-shadow: 0px 4px 5px rgba(0, 0, 0, 0.14), 0px 1px 10px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.2);
}

.services_button_cooldown, .services_button_unavailable{
background: #C4C4C4;
box-shadow: 0px 4px 5px rgba(0, 0, 0, 0.14), 0px 1px 10px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.2);
}

.services_badge {
  font-size: 1.7vh;
  position: absolute;
  top: 1vh;
  right: 1vh;
  z-index: 100500;
  width: max-content;
  padding: 1vh 1.5vh 1vh 1.2vh;
  box-shadow: 0px 4px 5px rgba(0, 0, 0, 0.14), 0px 1px 10px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.2);
  border-radius: 4px;
}

.services_badge::before {
  content: '';
  width: 2vh;
  height: 2vh;
  background: url(../../static/images/interface/clock.png) no-repeat;
  display: block;
  background-size: contain;
  float: left;
  margin-right: 1vh;
}


.starts_in_badge {
  background: linear-gradient(137.23deg, #FAA161 24.03%, #F71C92 199.29%);

}

.days_left_badge {

background: linear-gradient(137.23deg, #D2FA61 24.03%, #1C8EF7 199.29%);
}

.cooldown_badge {


background: linear-gradient(137.23deg, #97A8FF 24.03%, #1C8EF7 199.29%);
}

.services_badge:empty {
  display: none;
}

/* ===== spinkit.min.css ===== */
:root {
    --sk-size: 40px;
    --sk-color: #333
}

.sk-center {
    margin: auto
}

.sk-plane {
    width: var(--sk-size);
    height: var(--sk-size);
    background-color: var(--sk-color);
    animation: sk-plane 1.2s infinite ease-in-out
}

@keyframes sk-plane {
    0% {
        transform: perspective(120px) rotateX(0) rotateY(0)
    }

    50% {
        transform: perspective(120px) rotateX(-180.1deg) rotateY(0)
    }

    100% {
        transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg)
    }
}

.sk-chase {
    width: var(--sk-size);
    height: var(--sk-size);
    position: relative;
    animation: sk-chase 2.5s infinite linear both
}

.sk-chase-dot {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    animation: sk-chase-dot 2.0s infinite ease-in-out both
}

.sk-chase-dot:before {
    content: '';
    display: block;
    width: 25%;
    height: 25%;
    background-color: var(--sk-color);
    border-radius: 100%;
    animation: sk-chase-dot-before 2.0s infinite ease-in-out both
}

.sk-chase-dot:nth-child(1) {
    animation-delay: -1.1s
}

.sk-chase-dot:nth-child(2) {
    animation-delay: -1.0s
}

.sk-chase-dot:nth-child(3) {
    animation-delay: -0.9s
}

.sk-chase-dot:nth-child(4) {
    animation-delay: -0.8s
}

.sk-chase-dot:nth-child(5) {
    animation-delay: -0.7s
}

.sk-chase-dot:nth-child(6) {
    animation-delay: -0.6s
}

.sk-chase-dot:nth-child(1):before {
    animation-delay: -1.1s
}

.sk-chase-dot:nth-child(2):before {
    animation-delay: -1.0s
}

.sk-chase-dot:nth-child(3):before {
    animation-delay: -0.9s
}

.sk-chase-dot:nth-child(4):before {
    animation-delay: -0.8s
}

.sk-chase-dot:nth-child(5):before {
    animation-delay: -0.7s
}

.sk-chase-dot:nth-child(6):before {
    animation-delay: -0.6s
}

@keyframes sk-chase {
    100% {
        transform: rotate(360deg)
    }
}

@keyframes sk-chase-dot {
    80%,100% {
        transform: rotate(360deg)
    }
}

@keyframes sk-chase-dot-before {
    50% {
        transform: scale(0.4)
    }

    100%,0% {
        transform: scale(1.0)
    }
}

.sk-bounce {
    width: var(--sk-size);
    height: var(--sk-size);
    position: relative
}

.sk-bounce-dot {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: var(--sk-color);
    opacity: .6;
    position: absolute;
    top: 0;
    left: 0;
    animation: sk-bounce 2s infinite cubic-bezier(0.455,0.03,0.515,0.955)
}

.sk-bounce-dot:nth-child(2) {
    animation-delay: -1.0s
}

@keyframes sk-bounce {
    0%,100% {
        transform: scale(0)
    }

    45%,55% {
        transform: scale(1)
    }
}

.sk-wave {
    width: var(--sk-size);
    height: var(--sk-size);
    display: flex;
    justify-content: space-between
}

.sk-wave-rect {
    background-color: var(--sk-color);
    height: 100%;
    width: 15%;
    animation: sk-wave 1.2s infinite ease-in-out
}

.sk-wave-rect:nth-child(1) {
    animation-delay: -1.2s
}

.sk-wave-rect:nth-child(2) {
    animation-delay: -1.1s
}

.sk-wave-rect:nth-child(3) {
    animation-delay: -1.0s
}

.sk-wave-rect:nth-child(4) {
    animation-delay: -0.9s
}

.sk-wave-rect:nth-child(5) {
    animation-delay: -0.8s
}

@keyframes sk-wave {
    0%,40%,100% {
        transform: scaleY(0.4)
    }

    20% {
        transform: scaleY(1)
    }
}

.sk-pulse {
    width: var(--sk-size);
    height: var(--sk-size);
    background-color: var(--sk-color);
    border-radius: 100%;
    animation: sk-pulse 1.2s infinite cubic-bezier(0.455,0.03,0.515,0.955)
}

@keyframes sk-pulse {
    0% {
        transform: scale(0)
    }

    100% {
        transform: scale(1);
        opacity: 0
    }
}

.sk-flow {
    width: calc(var(--sk-size) * 1.3);
    height: calc(var(--sk-size) * 1.3);
    display: flex;
    justify-content: space-between
}

.sk-flow-dot {
    width: 25%;
    height: 25%;
    background-color: var(--sk-color);
    border-radius: 50%;
    animation: sk-flow 1.4s cubic-bezier(0.455,0.03,0.515,0.955) 0s infinite both
}

.sk-flow-dot:nth-child(1) {
    animation-delay: -0.30s
}

.sk-flow-dot:nth-child(2) {
    animation-delay: -0.15s
}

@keyframes sk-flow {
    0%,80%,100% {
        transform: scale(0.3)
    }

    40% {
        transform: scale(1)
    }
}

.sk-swing {
    width: var(--sk-size);
    height: var(--sk-size);
    position: relative;
    animation: sk-swing 1.8s infinite linear
}

.sk-swing-dot {
    width: 45%;
    height: 45%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
    background-color: var(--sk-color);
    border-radius: 100%;
    animation: sk-swing-dot 2s infinite ease-in-out
}

.sk-swing-dot:nth-child(2) {
    top: auto;
    bottom: 0;
    animation-delay: -1s
}

@keyframes sk-swing {
    100% {
        transform: rotate(360deg)
    }
}

@keyframes sk-swing-dot {
    0%,100% {
        transform: scale(0.2)
    }

    50% {
        transform: scale(1)
    }
}

.sk-circle {
    width: var(--sk-size);
    height: var(--sk-size);
    position: relative
}

.sk-circle-dot {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0
}

.sk-circle-dot:before {
    content: '';
    display: block;
    width: 15%;
    height: 15%;
    background-color: var(--sk-color);
    border-radius: 100%;
    animation: sk-circle 1.2s infinite ease-in-out both
}

.sk-circle-dot:nth-child(1) {
    transform: rotate(30deg)
}

.sk-circle-dot:nth-child(2) {
    transform: rotate(60deg)
}

.sk-circle-dot:nth-child(3) {
    transform: rotate(90deg)
}

.sk-circle-dot:nth-child(4) {
    transform: rotate(120deg)
}

.sk-circle-dot:nth-child(5) {
    transform: rotate(150deg)
}

.sk-circle-dot:nth-child(6) {
    transform: rotate(180deg)
}

.sk-circle-dot:nth-child(7) {
    transform: rotate(210deg)
}

.sk-circle-dot:nth-child(8) {
    transform: rotate(240deg)
}

.sk-circle-dot:nth-child(9) {
    transform: rotate(270deg)
}

.sk-circle-dot:nth-child(10) {
    transform: rotate(300deg)
}

.sk-circle-dot:nth-child(11) {
    transform: rotate(330deg)
}

.sk-circle-dot:nth-child(1):before {
    animation-delay: -1.1s
}

.sk-circle-dot:nth-child(2):before {
    animation-delay: -1s
}

.sk-circle-dot:nth-child(3):before {
    animation-delay: -0.9s
}

.sk-circle-dot:nth-child(4):before {
    animation-delay: -0.8s
}

.sk-circle-dot:nth-child(5):before {
    animation-delay: -0.7s
}

.sk-circle-dot:nth-child(6):before {
    animation-delay: -0.6s
}

.sk-circle-dot:nth-child(7):before {
    animation-delay: -0.5s
}

.sk-circle-dot:nth-child(8):before {
    animation-delay: -0.4s
}

.sk-circle-dot:nth-child(9):before {
    animation-delay: -0.3s
}

.sk-circle-dot:nth-child(10):before {
    animation-delay: -0.2s
}

.sk-circle-dot:nth-child(11):before {
    animation-delay: -0.1s
}

@keyframes sk-circle {
    0%,80%,100% {
        transform: scale(0)
    }

    40% {
        transform: scale(1)
    }
}

.sk-circle-fade {
    width: var(--sk-size);
    height: var(--sk-size);
    position: relative
}

.sk-circle-fade-dot {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0
}

.sk-circle-fade-dot:before {
    content: '';
    display: block;
    width: 15%;
    height: 15%;
    background-color: var(--sk-color);
    border-radius: 100%;
    animation: sk-circle-fade 1.2s infinite ease-in-out both
}

.sk-circle-fade-dot:nth-child(1) {
    transform: rotate(30deg)
}

.sk-circle-fade-dot:nth-child(2) {
    transform: rotate(60deg)
}

.sk-circle-fade-dot:nth-child(3) {
    transform: rotate(90deg)
}

.sk-circle-fade-dot:nth-child(4) {
    transform: rotate(120deg)
}

.sk-circle-fade-dot:nth-child(5) {
    transform: rotate(150deg)
}

.sk-circle-fade-dot:nth-child(6) {
    transform: rotate(180deg)
}

.sk-circle-fade-dot:nth-child(7) {
    transform: rotate(210deg)
}

.sk-circle-fade-dot:nth-child(8) {
    transform: rotate(240deg)
}

.sk-circle-fade-dot:nth-child(9) {
    transform: rotate(270deg)
}

.sk-circle-fade-dot:nth-child(10) {
    transform: rotate(300deg)
}

.sk-circle-fade-dot:nth-child(11) {
    transform: rotate(330deg)
}

.sk-circle-fade-dot:nth-child(1):before {
    animation-delay: -1.1s
}

.sk-circle-fade-dot:nth-child(2):before {
    animation-delay: -1.0s
}

.sk-circle-fade-dot:nth-child(3):before {
    animation-delay: -0.9s
}

.sk-circle-fade-dot:nth-child(4):before {
    animation-delay: -0.8s
}

.sk-circle-fade-dot:nth-child(5):before {
    animation-delay: -0.7s
}

.sk-circle-fade-dot:nth-child(6):before {
    animation-delay: -0.6s
}

.sk-circle-fade-dot:nth-child(7):before {
    animation-delay: -0.5s
}

.sk-circle-fade-dot:nth-child(8):before {
    animation-delay: -0.4s
}

.sk-circle-fade-dot:nth-child(9):before {
    animation-delay: -0.3s
}

.sk-circle-fade-dot:nth-child(10):before {
    animation-delay: -0.2s
}

.sk-circle-fade-dot:nth-child(11):before {
    animation-delay: -0.1s
}

@keyframes sk-circle-fade {
    0%,39%,100% {
        opacity: 0;
        transform: scale(0.6)
    }

    40% {
        opacity: 1;
        transform: scale(1)
    }
}

.sk-grid {
    width: var(--sk-size);
    height: var(--sk-size)
}

.sk-grid-cube {
    width: 33.33%;
    height: 33.33%;
    background-color: var(--sk-color);
    float: left;
    animation: sk-grid 1.3s infinite ease-in-out
}

.sk-grid-cube:nth-child(1) {
    animation-delay: .2s
}

.sk-grid-cube:nth-child(2) {
    animation-delay: .3s
}

.sk-grid-cube:nth-child(3) {
    animation-delay: .4s
}

.sk-grid-cube:nth-child(4) {
    animation-delay: .1s
}

.sk-grid-cube:nth-child(5) {
    animation-delay: .2s
}

.sk-grid-cube:nth-child(6) {
    animation-delay: .3s
}

.sk-grid-cube:nth-child(7) {
    animation-delay: 0s
}

.sk-grid-cube:nth-child(8) {
    animation-delay: .1s
}

.sk-grid-cube:nth-child(9) {
    animation-delay: .2s
}

@keyframes sk-grid {
    0%,70%,100% {
        transform: scale3D(1,1,1)
    }

    35% {
        transform: scale3D(0,0,1)
    }
}

.sk-fold {
    width: var(--sk-size);
    height: var(--sk-size);
    position: relative;
    transform: rotateZ(45deg)
}

.sk-fold-cube {
    float: left;
    width: 50%;
    height: 50%;
    position: relative;
    transform: scale(1.1)
}

.sk-fold-cube:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--sk-color);
    animation: sk-fold 2.4s infinite linear both;
    transform-origin: 100% 100%
}

.sk-fold-cube:nth-child(2) {
    transform: scale(1.1) rotateZ(90deg)
}

.sk-fold-cube:nth-child(4) {
    transform: scale(1.1) rotateZ(180deg)
}

.sk-fold-cube:nth-child(3) {
    transform: scale(1.1) rotateZ(270deg)
}

.sk-fold-cube:nth-child(2):before {
    animation-delay: .3s
}

.sk-fold-cube:nth-child(4):before {
    animation-delay: .6s
}

.sk-fold-cube:nth-child(3):before {
    animation-delay: .9s
}

@keyframes sk-fold {
    0%,10% {
        transform: perspective(140px) rotateX(-180deg);
        opacity: 0
    }

    25%,75% {
        transform: perspective(140px) rotateX(0);
        opacity: 1
    }

    90%,100% {
        transform: perspective(140px) rotateY(180deg);
        opacity: 0
    }
}

.sk-wander {
    width: var(--sk-size);
    height: var(--sk-size);
    position: relative
}

.sk-wander-cube {
    background-color: var(--sk-color);
    width: 20%;
    height: 20%;
    position: absolute;
    top: 0;
    left: 0;
    --sk-wander-distance: calc(var(--sk-size) * 0.75);
    animation: sk-wander 2.0s ease-in-out -2.0s infinite both
}

.sk-wander-cube:nth-child(2) {
    animation-delay: -0.5s
}

.sk-wander-cube:nth-child(3) {
    animation-delay: -1.0s
}

@keyframes sk-wander {
    0% {
        transform: rotate(0)
    }

    25% {
        transform: translateX(var(--sk-wander-distance)) rotate(-90deg) scale(0.6)
    }

    50% {
        transform: translateX(var(--sk-wander-distance)) translateY(var(--sk-wander-distance)) rotate(-179deg)
    }

    50.1% {
        transform: translateX(var(--sk-wander-distance)) translateY(var(--sk-wander-distance)) rotate(-180deg)
    }

    75% {
        transform: translateX(0) translateY(var(--sk-wander-distance)) rotate(-270deg) scale(0.6)
    }

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

/* ===== dialog_features_v2.css ===== */
.hidden_menu {
  transition: 0.5s;
  visibility: hidden;
  opacity: 0.0;
  position: absolute;
  bottom: 2.9vh;
  left: 5vh;
}

.hidden_menu_active {
  visibility: visible;
  opacity: 1.0;
}

.loop_button {
  transition: 0.5s ease-in;
  height: 5vh;
  width: 5vh;
  background-size: 4vh;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 0.5vh;
  cursor: pointer;
  background-color: #474757;
  box-shadow: 0.2vh 0.2vh 1vh #00000059;
}

.loop_image {
  transition: 0.5s ease-in;
  background-image: url("../images/interface/loop.svg");
  background-size: 2.7vh;
  width: 5vh;
  height: 5vh;
  background-position: center;
  background-repeat: no-repeat;
}

.loop_image_clicked {
  filter: brightness(3);
}

.next_button {
  cursor: pointer;
  margin-top: 1.5vh;
  margin-bottom: 1.5vh;
  height: 5vh;
  background-image: url(../images/interface/skip_next.svg);
  width: 5vh;
  background-size: 2vh;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: 0.2vh 0.2vh 1vh #00000059;
  border-radius: 0.5vh;
  background-color: #474757;
}

.repeat_button {
  cursor: pointer;
  height: 5vh;
  background-color: #474757;
  border-radius: 0.5vh;
  background-image: url(../images/interface/replay.svg);
  width: 5vh;
  background-size: 2.6vh;
  background-position: 45% 43%;
  background-repeat: no-repeat;
  box-shadow: 0.2vh 0.2vh 1vh #00000059;
}

.hide_menu_button {
  transition: 0.5s;
  height: 4.5vh;
  cursor: pointer;
  width: 4vh;
  background-image: url(../images/interface/arrow_left.svg);
  background-size: 4.5vh;
  background-position: center;
  position: absolute;
  filter: invert(1);
  border-radius: 0.5vh;
  bottom: 9.4vh;
  left: 21vh;
  background-color: rgba(0, 0, 0, 0.08);
  border: 2px solid #0000001f;
  opacity: 0.0;
  visibility: hidden;
}

.features_button_active {
  opacity: 1.0;
  visibility: visible;
}

.hide_menu_button_active {
  left: 12vh;
  background-image: url(../images/interface/arrow_right.svg);
}

.switched {
  left: -295vh;
}

.switched_skip {
  left: -20vh;

}

.switched_offer {
  left: -9vh;

}

.switched_autoplay {
  left: -26vh !important;
}

.clicked_loop {
  background-color: #ff6aff;
  filter: brightness(100%);
}

body.stop-transitions * {
  transition: none !important;
}

/* ===== sprite_position_new_v2.css ===== */
.new_sprite {
animation: appearing .5s;
animation-fill-mode: both
}
  
.new_sprite_delay {
animation: appearing .5s;
animation-fill-mode: both;
animation-delay: .25s;
}

.hidden_sprite {
opacity: 0;
}


@keyframes appearing {
    from {
        opacity:0
    }
    to {
        opacity:1
    }
}

.new_sprite_disappear {
animation: appearing .5s;
animation-fill-mode: both;
}

.disappear  {
  animation: disappearing .5s;
  animation-fill-mode: both
}


.disappear_slow  {
  animation: disappearing 1s;
  animation-fill-mode: both
}


.disappear_delay  {
  animation: disappearing .5s;
  animation-fill-mode: both;
  animation-delay: .25s;
}

@keyframes disappearing {
  from {
      opacity:1
  }
  to {
      opacity:0
  }
}


.second {
    left: -44vh;
    top: 4.5vh;
}

.forth {
    left: 40vh;
    top: 4.5vh;
}

.forthx2 {
    left: 0vh;
    height: 150vh;
    top: 5.5vh;
}

.transparent_sprite {
    opacity: 0.0;
}  

.owner_left {
    -moz-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    left: -33vh;
}


.slow_showing_beer {
    opacity: 0;
    transition: opacity 1s ease-in;
    animation: showImage 3.75s forwards;
  }
  
  @keyframes showImage {
    0% {
      opacity: 0;
    }
    75% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
  
  .hide_beer_hand {
    opacity: 1;
    transition: opacity 1s ease-out;
    animation: hideImage 5s forwards;
    top: 0.2vh;
    left: 0.1vh;
  }
  
  @keyframes hideImage {
    0% {
      opacity: 1;
    }
    80% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }

  .game_scenex2 {
      height: 187vh;
      width: auto;
      left: -104vh;
  }

  .game_scene1x2 {
    height: 140vh;
    width: 400vh;
    top: -0.5vh;
    left: -98vh;
  }

    .lyralei_intro_first {
  
    -moz-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
   left: -5vh;
}

.goodkind_intro_first {
  
    -moz-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
  left: -10vh;
}


.luna_bar {
  
    -moz-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
  left: 65vh;
}

.goodkind_bar {
  left: -30vh;
}

.lyralei_bar, .lyralei_bar2 {
  left: -35vh;
}

/* ===== inventory_v5.css ===== */
.div-table {
  display: table;
  width: auto;
  /* background-color: #eee; */
  /* border: 1px solid #666666; */
   /* cellspacing:poor IE support for  this */
  margin-left: 2.3vh;
  margin-top: 0.1vh;
}
.div-table-row {
  display: table-row;
  width: auto;
  clear: both;
}
.div-table-col, .div-table-col-active {
  float: left; /* fix for  buggy browsers */
  display: table-column;
  position: relative;
  width: 8.3vh;
  margin: 0.65vh;
  height: 7.8vh;
  background-color: #474757;
  border: 1px #0000000d solid;
  border-radius: 0.5vh;
}

.inventory {position: absolute;margin-left: auto;margin-right: auto;left: 0;right: 0;width: 82vh;bottom: 21.7vh;/* overflow: hidden; */display: flex;}

.main_inventory {background-color: #535367;width: 47vh;height: 56.5vh;overflow: hidden;position: relative;/* border-radius: 1vh; */}

.items_inventory {background-color: #535367;width: 33.8vh;height: 56.5vh;/* border-radius: 1vh; */position: relative;overflow: visible;margin-left: 1.6vh;}

.current_outfit {
    margin-top: 1.1vh;
    margin-left: 32vh;
    position: absolute;
}

.char_state, .lina_arc_state, .lanaya_arc_state {width: 17vh;position: relative;top: 32vh;float: right;right: 1.5vh;display:none;white-space: nowrap;}

.state_label {color: white;font-weight: 600;border-radius: 0.5vh;display: inline-block;margin-top: 1vh;float: right;font-size: 2vh;padding: 0.8vh 1.7vh;box-shadow: 0.1vh 0.2vh 1vh #00000052;}

.state_label_lina {
  background-color: #ff7600;
  margin-right: 1vh;
}

.state_label_rylai {
  background-color: #00adff;
  margin-right: 1vh;
}

.state_label_rating {
  background-color: #ff00eb;
  margin-right: 1vh;
}

.state_label_lanaya {
  background-color: #e01dc4;
  margin-right: 1vh;
}

.state_label_luna {
  background-color: #524aff;
  margin-right: 1vh;
}

.state_label_alcohol {
  background-color: #46d9d5;
  margin-right: 1vh;
}

.green_label {
    background-color: #49d249;
    margin-right: 1vh;
}

.yellow_label {
  background-color: #f7b600;
  margin-right: 1vh;
}

.red_label {
  background-color: #fd3a3a;
  margin-right: 1vh;
}

.char_sprite, .char_emotion {
  position: absolute;
  height: 55vh;
  left: -14vh;
}

.char_emotion {
  transition: 0.5s;
  opacity: 0.0;
}

.coins {display: flex;justify-content: center;margin-top: 1vh;color: white;}

.coins_icon {background-image: url(../../static/images/interface/icons8-coins-100.webp);width: 5.5vh;background-size: 150%;background-position: center;}

.coins_text {
  line-height: 7vh;
  font-size: 2.2vh;
  font-weight: 600;
  margin-left: 1vh;
}

.menu_header_inventory {
  position: relative;
  display: flex;
  font-weight: 400;
  height: 7vh;
}

.outfit_container {display: flex;}

.type_icon {
  width: 3vh;
  background-size: contain;
  height: 3vh;
  margin-top: 3vh;
  filter: opacity(0.2);
  margin-right: 0.3vh;
  filter: invert(1) opacity(0.6);
}

.label_container {
  float: right;
  display: flex;
}

.thing {
  width: 7vh;
  height: 7vh;
  padding: 0.5vh;
}

.thing_menu {
  width: 32vh;
  /* height: 18.5vh; */
  background-color: #656589;
  position: relative;
  padding: 0 2vh 0 0;
  z-index: 101;
  border-radius: 0.8vh;
  margin-top: 0.5vh;
  color: white;
  box-shadow: 0.2vh 0.2vh 1vh #00000059;
}

.thing_title {
  text-align: left;
  font-size: 2vh;
  font-weight: 600;
  padding: 1.5vh 2vh 0vh;
}

.thing_button {
  margin-top: 2vh;
  text-align: left;
  font-size: 2vh;
  padding: 2vh;
  padding-top: 0;
  z-index: 101;
  cursor: pointer;
}

.thing_line {
  margin-top: 1.5vh;
  border: #ffffff1f 1px solid;
  width: 105%;
}

.thing_description {
  text-align: left;
  margin-top: 1vh;
  margin-left: 2vh;
  font-size: 2vh;
  color: white;
}

.arrow_up {
  background-image: url(/static/images/interface/arrow_inventory.svg);
  width: 2vh;
  left: 0vh;
  height: 2vh;
  position: absolute;
  margin-top: -1vh;
  background-size: cover;
  margin-left: 3vh;
  filter: drop-shadow(0.1vh -0.1vh 0.1vh #90909059);
}

.thing_counter {
  position: absolute;
  right: -0.5vh;
  top: -0.5vh;
  font-size: 2vh;
  font-weight: 600;
  background-color: #656589;
  padding: 0.2vh 0.8vh;
  color: white;
  border-radius: 0.5vh;
  box-shadow: 0vh 0.2vh 0.4vh #00000059;
}

.clickable_overlay {
  position: fixed; /* вместо absolute */
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 100; /* убедись, что выше, чем инвентарь */
}

.left_notify {
  left: 19vh;
  right: initial;
}

.speech_bubble {
  transition: 0.5s;
  background-color: white;
  position: absolute;
  color: black;
  visibility: hidden;
  opacity: 0.0;
  box-shadow: 0.2vh 0.5vh 1vh #0000003b;
  padding: 2vh;
  background: #ffffff;
  z-index: 100500;
  margin: auto;
  margin-left: auto;
  margin-right: auto;
  left: -35vh;
  right: 0;
  top: 50vh;
  width: fit-content;
  border-radius: 12vh;
  font-size: 2vh;
  width: max-content;
}

.speech_bubble:after {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 0;
  height: 0;
  border: 2.5vh solid transparent;
  border-bottom-color: #ffffff;
  border-top: 0;
  border-left: 0;
  margin-left: -1vh;
  margin-top: -2vh;
}

.free_inventory {
  left: 19.7vh;
  display: block;
  position: absolute;
}

/* ===== mobile_mode_v2.css ===== */
@media only screen and (max-width: 1024px) and (orientation: landscape) {
    .skip_button {
        bottom: 1.75vh;
        left: 130.5vh;
    }

    .button_container {
        padding: 4.9vh 8.2vh;
        border-radius: 1vh;
        background-size: 45%;
    }

    .name {
        font-size: 4.3vh;
        margin-top: -9.4vh;
        left: 2.8vh;
    }

    .text {
        font-size: 4.2vh;
        margin-top: -0vh;
        margin-left: 2vh;
        line-height: 5.8vh;
        width: 118vh;
    }

    .dialog {
        height: 18vh;
        padding: 2vh 1vh;
        width: 130vh;
        left: 0;
        right: 0;
        bottom: 4vh;
    }

    .offer_edit {
        height: 9.5vh;
        width: 9.8vh;
        left: 148.5vh;
        bottom: 1.75vh;
        background-size: 38%;
        border-radius: 1vh;
        border-radius: 1vh;
    }

    .main_menu_buttons {
        width: 40vh;
        height: 11vh;
        border-radius: 1vh;
        font-size: 5.8vh;
        margin: 2vh 0;
        line-height: 11.6vh;
        border: #f9ffbd3b 0.4vh solid;
    }

    .main_buttons {
        position: absolute;
        right: 4vh;
        bottom: 3vh;
    }

       .log_in_button, #log_in_button_game {
        position: absolute;
        width: 30.5vh;
        height: 12vh;
        right: 3vh;
        text-decoration: none;
        top: 0vh;
        font-size: 3.8vh;
        line-height: 8vh;
        background-size: 21%;
        background-position: 16.2vh;
    }

    #log_in_button_game {
        /* left: 10vh; */
        font-size: 3.8vh;
            line-height: 8vh;
            width: 30vh;
            left: 2vh !important;
    }

    .patreon {
        height: 10vh;
    }

    .patreon_small {
        right: 31.5vh;
        width: 7.4vh;
        background-position: 1%;
        background-size: 35vh;
    }

    .gallery_menu {
        bottom: 0vh;
        width: 150vh;
        height: 100vh;
    }

    .gallery_items {
        height: 99%;
        width: 144.3vh;
    }

    .gallery_footer {
        top: 71vh;
        height: 15.5vh;
        z-index: 1;
    }

    .version_gallery_text {
        padding: 2vh 3vh;
        margin-top: 3vh;
        font-size: 5vh;
        border-radius: 1.5vh;
        background-color: #4f4f6b;
    }

    .item {
        width: 42vh;
        height: 45vh;
        padding: 3vh 1.5vh;
    }

    .gallery_image {
        border-radius: 1vh;
        width: 41vh;
        height: 23vh;
    }

    .paid_image {
        height: 25vh;
        top: 2vh;
        left: 0.5vh;
        border-radius: 1.5vh;
        width: 43vh;
    }

    .item_text {
        width: 30vh;
        height: 6vh;
        align-items: center;
       
        font-size: 3.4vh;
        line-height: 5vh;
        margin-top: 11vh;
    }

    .menu-header {
        border-bottom: 0.1vh solid #6C6C6C;
        display: flex;
        height: 12vh;
        align-items: center;
    }

    .title_menu {
        font-size: 4.2vh;
        line-height: 5vh;
        padding: 3.5vh 3.5vh;
    }

    .gallery_container {
        height: 80%;
        padding: 0vh 5.5vh;
    }

    .locked_item {
        height: 8.5vh;
        width: 8.5vh;
        left: 2vh;
        top: 4.4vh;
    }

    .locked_item_money {
        height: 10.5vh;
        width: 10.5vh;
        left: 2vh;
        top: 4.4vh;
    }

    .randomizer {
        padding: 2vh 4vh;
        left: 4vh;
        top: 2vh;
        font-size: 4vh;
        line-height: 7vh;
        border-radius: 1.5vh;
        box-shadow: 0 0.4vh 0.6vh rgba(0, 0, 0, 0.2), 0 0.1vh 0.3vh rgba(0, 0, 0, 0.1);
    }

    .randomizer::before {
        height: 7.1vh;
        width: 7vh;
        margin-right: 2.2vh;
    }

    .close-menu {
        height: 12vh;
        width: 12vh;
        background-size: 40%;
        background-position: 47%;
        right: 0;
    }

    .game_menu {
        top: 14vh;
        right: 2vh;
        width: 50vh;
    }

    .game_menu_item {
        font-size: 4.5vh;
        margin: 3.5vh 15.5vh 4.5vh 5vh;
    }

    .credits_menu, .roadmap_menu, .walkthrough_menu, .preview_menu, .faq_menu {
        width: 150vh;
        height: 100vh;
        bottom: 0vh;
    }

    .credits_menu {
        height: 100vh;
        width: 97vh;
        left: -63vh;
        bottom: 0vh;
    }

    .special_thanks {
        width: 61vh;
        height: 100vh;
        bottom: 0vh;
        left: 109vh;
    }

    .credits_text, .roadmap_text, .credits_text_walkthrough {
        font-size: 4.2vh;
        line-height: 7.5vh;
        padding: 3vh 4vh 4vh 5vh;
        height: 80.9vh;
    }

    .thnx {
        height: 80.9vh !important;
        width: 52vh;
    }

    .switch {
        width: 11vh;
        margin-left: 4vh;
        height: 8.5vh;
    }

    .switch_container {
        /* display: none; */
        padding: 4vh;
        right: 0;
    }

    .switch_text {
        font-size: 5vh;
    }

    .slider {
        top: 1vh;
        left: 0;
        right: 0;
        bottom: 1.5vh;
        border-radius: 1.75vh;
    }

    .slider:before {
        height: 6.5vh;
        width: 6.5vh;
        left: 0;
        border-radius: 50%;
    }

    input:checked + .slider:before {
        -webkit-transform: translateX(5vh);
        -ms-transform: translateX(5vh);
        transform: translateX(5vh);
    }

    /* Rounded sliders */
    .slider.round {
        border-radius: 5vh;
    }

    .slider.round:before {
        border-radius: 50%;
    }

    .gallery_overlay, .gallery_overlay_walkthrough {
        height: 71.5vh;
        top: 12vh;
        width: 100%;
    }

    .gallery_locked_popup, .gallery_walkthrough_popup {
        width: 76vh;
        padding: 2vh 2vh;
        height: 40vh;
        bottom: 16vh;
    }

    .hidden_scene_text {
        position: absolute;
        font-size: 3.5vh;
        line-height: 6vh;
        padding: 3vh 3vh 0vh 4vh;
        width: 63vh;
    }

    .patreon_paywall {
        width: 40vh;
        height: 9vh;
        box-shadow: 0 0.4vh 0.8vh rgba(0, 0, 0, 0.3), 0 0.2vh 0.5vh rgba(0, 0, 0, 0.2);
        background-size: 92%;
        border-radius: 1.5vh;
        margin-top: 27vh;
    }

    #patreon_paywall1 {
    }

    #patreon_paywall2 {
        margin-top: 19vh;
        margin-left: 1vh;
        width: 43vh;
        height: 9.5vh;
    }

    #patreon_paywall3 {
    }

    #patreon_paywall4 {
        margin-top: 27vh;
        margin-left: 1vh;
        width: 43vh;
        height: 9.5vh;
    }

    #log_in_gallery.log_in_button_hidden_scene {
        margin-left: 3vh;
        border-radius: 1vh;
        font-size: 4vh;
        box-shadow: 0 0.4vh 0.8vh rgba(0, 0, 0, 0.3), 0 0.2vh 0.5vh rgba(0, 0, 0, 0.2);
        margin-top: 27vh;
        width: 25vh;
        height: 9vh;
    }

    .saves-menu {
        left: 0;
        bottom: 0;
        width: 178vh;
        height: 100vh;
        box-shadow: 0 0.4vh 0.8vh rgba(0, 0, 0, 0.3), 0 0.2vh 0.5vh rgba(0, 0, 0, 0.2);
    }

    .save_item {
        width: 40vh;
        height: 80vh;
        margin: 3.4vh 1.8vh;
        box-shadow: 0 0.4vh 0.8vh rgba(0, 0, 0, 0.3), 0 0.2vh 0.5vh rgba(0, 0, 0, 0.2);
    }

    .first_saves_container .screenshot {
        height: 20.3vh;
        margin-bottom: 2vh;
    }

    .first_saves_container .sprite_preview {
        height: 13.3vh;
        margin-bottom: 1.8vh;
        object-fit: cover;
        width: 100%;
    }

    .first_saves_container .pr_title {
        font-size: 4vh;
        margin-bottom: 1vh;
        padding: 1vh 2vh;
    }

    .first_saves_container .pr_description {
        font-size: 3.4vh;
        line-height: 4.6vh;
        padding: 0 2.5vh;
    }

    .first_saves_container .pr_button {
        box-shadow: 0px 0.3vh 0.3vh rgb(0 0 0 / 14%), 0px 0.1vh 0.7vh rgb(0 0 0 / 12%), 0px 0.1vh 0.2vh rgb(0 0 0 / 20%);
        border-radius: 1vh;
        font-size: 3.5vh;
        text-align: center;
        height: 8.6vh;
        bottom: 2.5vh;
        left: 2.2vh;
        right: 2.2vh;
        white-space: normal;
        line-height: 5vh;
        word-wrap: break-word;
        padding: 0vh 4vh;
    }

    .first_saves_container .saves_small_title {
        line-height: 5vh;
        font-size: 3.5vh;
        padding: 0 3vh;
    }

    .first_saves_container .saves_description {
        font-size: 3.5vh;
        line-height: 4.7vh;
        padding: 0 3vh;
        margin-top: 0.7vh;
        margin-bottom: 1vh;
    }

    .create_button, .start_button {
        border-radius: 1.5vh;
        font-weight: 600;
        font-size: 3.9vh;
        width: 36vh;
        height: 8.6vh;
    }

    .delete_button {
        width: 10vh;
        height: 10vh;
        border-radius: 1vh;
        box-shadow: 0px 0.3vh 0.3vh rgb(0 0 0 / 14%), 0px 0.1vh 0.7vh rgb(0 0 0 / 12%), 0px 0.1vh 0.2vh rgb(0 0 0 / 20%);
    }

    .save_icon {
        max-width: 10vh;
        max-height: 10vh;
        margin-bottom: 3.5vh;
    }

    .autosave_container {
        margin: 1.5vh 2.5vh;
    }

    .autosave_title, .manual_title {
        font-size: 4.5vh;
        line-height: 6vh;
        padding: 2vh 0.5vh;
    }

    .autosave {
        width: 45vh;
        height: 72vh;
        box-shadow: 0px 0.2vh 0.8vh 0.2vh #00000024;
    }

    .manual_container {
        margin: 1.5vh 2.5vh;
    }

    .manual {
        width: 119vh;
        height: 15.95vh;
        margin-bottom: 2.7vh;
        box-shadow: 0px 0.2vh 0.8vh 0.2vh #00000024;
    }

    .autosave .saves_small_title {
        font-size: 3.5vh;
        padding: 0 3vh;
    }

    .autosave .saves_description {
        font-size: 3.5vh;
        padding: 0 3vh;
        margin-top: 1.2vh;
        margin-bottom: 1vh;
        line-height: 4.7vh;
    }

    .autosave .start_button {
        left: 3vh;
        position: absolute;
        bottom: 2.5vh;
        width: 39vh;
    }

    .autosave .screenshot {
        height: 22.3vh;
        margin-bottom: 1.8vh;
        object-fit: cover;
        width: 100%;
    }

    .back_button {
        width: 10vh;
        height: 10vh;
        padding: 1.2vh;
    }

    .manual .save_icon {
        margin-right: 4vh;
    }

    .manual .screenshot {
        width: 27.3vh;
        margin-right: 2vh;
    }

    .manual .saves_small_title {
        font-size: 3.5vh;
        margin: 0.8vh 1.5vh;
        /* padding: 0 2vh; */
    }

    .manual .saves_description {
        font-size: 3.5vh;
        margin: 0.5vh 1.5vh;
        max-width: 15vh;
    }

    .manual .saves_description.location_name {
        font-size: 3.5vh;
        margin: 0px 1.5vh;
        max-width: 24vh;
    }

    .manual .start_button {
        right: 10vh;
        width: 19vh;
        bottom: 2.5vh;
    }

    .manual .delete_button {
        right: 0;
        margin-right: -3vh;
        margin-top: -9vh;
        width: 10vh;
        height: 10vh;
        border-radius: 1vh;
        box-shadow: 0px 0.2vh 0.8vh 0.2vh #00000024;
    }

    .sound {
        height: 10vh;
        width: 19.5vh;
        background-size: 4.7vh;
        background-position: 18% 50%;
        transition: 0.2s;
        box-shadow: 0px 0.2vh 0.8vh 0.2vh #00000024;
    }

    .sound_container:hover .sound {
        height: 10vh;
        background-position: 18% 50%;
    }

    .sound_container:hover .show_slider {
        top: 0vh;
    }

    .show_slider {
        width: 10vh;
        height: 9vh;
        top: 0.5vh;
        left: 10vh;
        background-size: 39%;
        background-position: 43%;
    }

    .sound_container {
        right: 11vh;
    }

    .range_container {
        right: 5.1vh;
        width: 25vh;
        height: 8vh;
        border-radius: 1vh;
        top: -20vh;
        transform: rotate(270deg);
    }

    .range_active {
        top: 21vh;
    }

    #volume-control {
        margin-left: 1.4vh;
        margin-top: 2.45vh;
        width: 21vh;
        height: 3.2vh;
    }

    .game_menu_button {
        background-size: 4.5vh;
        width: 9vh;
        box-shadow: 0px 0.2vh 0.8vh 0.2vh #00000024;
        height: 10vh;
        right: 1vh;
        top: 0;
    }

    .hidden_scene_image {
        height: 30vh;
        width: 70vh;
        object-fit: cover;
        /* height: min-content; */
        /* margin-bottom: 1vh !important; */
    }

    .hidden_scene, .hidden_scene_pre, .hidden_scene_pre_2 {
        width: 78vh;
        height: 46vh;
        left: 0;
        right: 0;
        bottom: 25vh;
        box-shadow: 0.2vh 0.2vh 1vh #00000059;
    }

    #log_in_gallery.log_in_button_hidden_scene, #log_in_gallery_2.log_in_button_hidden_scene {
        left: 49vh;
        font-size: 4vh;
        /* margin-top: 25.8vh; */
        width: 21vh;
        bottom: 5.2vh;
        border-radius: 1vh;
        position: absolute;
        height: 9.6vh;
    }

    #log_in_button_hidden_scene.log_in_button_hidden_scene {
        left: 46vh;
        font-size: 4vh;
        /* margin-top: 25.8vh; */
        width: 21vh;
        bottom: 5vh;
        position: absolute;
        height: 9.6vh;
    }

    .patreon_button {
        width: 37vh;
        object-fit: contain;
        height: 18.8vh;
        margin-top: 37.8vh;
        border-radius: 1vh;
    }

    .main_paywall_block {
        margin: 0vh 0vh;
        height: 100vh;
        margin: 0vh 3vh 0vh 6vh;
        box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);
    }

    .paywall_header {
        font-size: 3.5vh;
        line-height: 5vh;
    }

    .paywall_list {
        padding: 0;
        margin-bottom: 3vh;
        margin-top: 2vh;
    }

    .paywall_item {
        margin: 1.2vh 0vh;
        font-size: 3.2vh;
        margin-top: 0vh;
        width: 65vh;
        line-height: 5vh;
        display: none;
    }

    .paywall_bottom_text {
        font-size: 2.4vh;
    }

    #log_in_paywall {
        margin-left: 1vh;
        box-shadow: 0px 0.3vh 0.4vh rgb(0 0 0 / 14%), 0px 0.2vh 0.8vh rgb(0 0 0 / 12%), 0px 0.2vh 0.3vh rgb(0 0 0 / 20%);
        border-radius: 1vh;
        font-size: 3.5vh;
        margin-top: 0.2vh;
        width: 22vh;
        height: 9.6vh;
    }

    #patreon_paywall {
        width: 44vh;
        box-shadow: 0px 0.3vh 0.4vh rgb(0 0 0 / 14%), 0px 0.2vh 0.8vh rgb(0 0 0 / 12%), 0px 0.2vh 0.3vh rgb(0 0 0 / 20%);
        height: 9.5vh;
        cursor: pointer;
        background-position: center;
        background-size: 92%;
        border-radius: 0.5vh;
        margin-top: 27vh;
        margin-left: 1vh;
        background-image: url(../../static/images/become_a_patron_button.png);
    }

    .main_paywall_image {
        width: 78vh;
        object-fit: cover;
        object-position: top;
        height: 37.5vh;
    }

    .paywall_main {
        left: 0;
        /* bottom: 31vh; */
        top: 0vh;
    }

    .paywall_container {
        margin: 3.2vh 4vh 0 3.5vh;
    }

    .logline {
        width: 66vh;
        line-height: 5.5vh;
        font-size: 3.2vh;
        margin-top: 1.5vh;
        margin-bottom: 2.5vh;
    }

    .paywall_menu {
        background-size: 101%;
    }

    #play_game_old {
        margin-right: 2vh;
        box-shadow: 0px 0.5vh 0.7vh rgb(0 0 0 / 14%), 0px 0.2vh 0.8vh rgb(0 0 0 / 12%), 0px 0.2vh 0.3vh rgb(0 0 0 / 20%);
        border-radius: 1.3vh;
        font-size: 3.5vh;
        margin-top: 3.4vh;
        width: 45vh !important;
        height: 9.6vh;
    }

    #play_game_new_right {
        margin-right: 2vh;
        box-shadow: 0px 0.5vh 0.7vh rgb(0 0 0 / 14%), 0px 0.2vh 0.8vh rgb(0 0 0 / 12%), 0px 0.2vh 0.3vh rgb(0 0 0 / 20%);
        border-radius: 1.3vh;
        font-size: 3.5vh;
        margin-top: 0.4vh;
        width: 27vh;
        height: 9.6vh;
    }

    #play_game_new_left {
        margin-right: 2vh;
        box-shadow: 0px 0.5vh 0.7vh rgb(0 0 0 / 14%), 0px 0.2vh 0.8vh rgb(0 0 0 / 12%), 0px 0.2vh 0.3vh rgb(0 0 0 / 20%);
        border-radius: 1.3vh;
        font-size: 3.5vh;
        margin-top: 0.4vh;
        width: 39vh;
        height: 9.6vh;
    }

    .suggestion {
        padding: 3.6vh 4vh 2.3vh 4.3vh;
    }

    .edit_text {
        font-size: 4vh;
    }

    .edit_text_second {
        margin-top: 3.5vh;
    }

    .disabled_textarea {
        margin-top: 4vh;
        height: 17.8vh;
        padding: 2.8vh 2.6vh 2.6vh 3.2vh;
        width: 94.5vh;
        font-size: 4vh;
        line-height: 5.5vh;
        border-radius: 1.5vh;
    }

    .active_textarea {
        margin-top: 4vh;
        height: 17.8vh;
        padding: 2.8vh 1.6vh 1.6vh 3.2vh;
        width: 95.5vh;
        font-size: 4vh;
        border-radius: 1.5vh;
    }

    .edit {
        height: 99.4vh;
        width: 108vh;
        box-shadow: 0px 0.5vh 0.7vh rgb(0 0 0 / 14%), 0px 0.2vh 0.8vh rgb(0 0 0 / 12%), 0px 0.2vh 0.3vh rgb(0 0 0 / 20%);
    }

    .button_send {
        right: 3.5vh;
        bottom: 3vh;
        box-shadow: 0px 0.5vh 0.7vh rgb(0 0 0 / 14%), 0px 0.2vh 0.8vh rgb(0 0 0 / 12%), 0px 0.2vh 0.3vh rgb(0 0 0 / 20%);
        border-radius: 1.3vh;
        font-size: 4.6vh;
        width: 23vh;
        height: 9.6vh;
    }

    .notification {
        right: 2vh;
        font-size: 5vh;
        top: 13vh;
        box-shadow: 0.2vh 0.5vh 1vh #0000003b;
        padding: 2vh;
    }

    #autoplayBtn {
        left: 118.2vh;
        border-radius: 1vh;
        height: 10.5vh;
        width: 10.5vh;
        bottom: 1.75vh;
        background-size: 49%;
    }

    .hide_menu_button {
        height: 10.5vh;
        width: 7vh;
        background-size: 10.5vh;
        border-radius: 0.5vh;
        bottom: 14vh;
        left: 13vh;
    }

    .switched {
        left: -295vh;
    }

    .switched_skip {
        left: -20vh;
    }

    .switched_offer {
        left: -9vh;
    }

    .switched_autoplay {
        left: -26vh !important;
    }

    .loop_button {
        height: 10vh;
        width: 10vh;
        background-size: 4vh;
        border-radius: 0.5vh;
    }

    .hide_menu_button_active {
        left: 20vh;
    }

    .loop_image {
        background-size: 5.7vh;
        width: 10vh;
        height: 10vh;
    }

    .next_button {
        margin-top: 1.5vh;
        margin-bottom: 1.5vh;
        height: 10vh;
        width: 10vh;
        background-size: 5vh;
        border-radius: 1.3vh;
    }

    .repeat_button {
        height: 10vh;
        border-radius: 1vh;
        width: 10vh;
        background-size: 5.6vh;
        background-position: 45% 43%;
    }

    .spinner_hint {
        font-size: 3vh !important;
        border-radius: 1vh !important;
        width: 73vh !important;
        padding: 3.1vh !important;
        left: -97vh !important;
        bottom: 0vh !important;
    }

    .spinner_back {
        bottom: 40vh !important;
    }

    .sk-flow {
        --sk-size: 7.1vh !important;
    }

    #spinner {
        background-size: 70vh !important;
        background-position: 95% 55% !important;
    }

    .profile_button, .profile_button_game {
        height: 8vh;
        display: flex;
        /* border-radius: 0 0 1vh 1vh; */
        padding: 1.9vh 1.2vh 0 2.5vh;
        box-shadow: 0.2vh 0.2vh 1vh #00000059;
    }

    .profile_button:hover, .profile_button_game:hover {
        padding: 1.9vh 1.2vh 0 2.5vh;
    }

    .profile.stream_interface {
        left: 3vh;
        top: 0;
    }

    .profile_menu, .profile_menu_game {
        width: 45vh;
        box-shadow: 0.2vh 0.2vh 1vh #00000059;
    }

    .profile_title {
        font-size: 3.5vh;
        padding: 3vh 3vh 2vh 2.8vh;
    }

    .log_out {
        font-size: 4vh;
        bottom: 0;
        border-top: 0.1vh solid #979797;
        padding: 2.7vh 3vh;
    }

    .log_out::after {
        width: 4.8vh;
        height: 4.8vh;
        right: 3vh;
    }

    .profile_menu {
        margin-top: 12vh !important;
    }

    .profile_menu_game.stream_mode {
        margin-top: 2vh;
    }

    .benefits {
        padding: 0.5vh 2vh 0.8vh 3vh;
        color: white;
    }

    .benefits_item {
        font-size: 3.8vh;
        margin-bottom: 1.5vh;
    }

    .infodota {
        line-height: 6vh !important;
        margin-top: 13.5vh !important;
    }

    .patreon:hover {
        height: 10vh;
        background-position: 3%;
        background-size: 35vh;
    }

    .game_menu_button:hover {
        height: 10vh;
    }

    .choices {
        bottom: 28vh;
        margin-left: 47vh;
    }

    .choice-button {
        width: 95vh;
        margin-bottom: 3vh;
        font-size: 4.5vh;
        padding: 2vh;
        box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.1), 0px 2px 2px 0px rgba(0, 0, 0, 0.07), 0px 3px 1px -2px rgba(0, 0, 0, 0.06);
        color: white;
        /* border: 0.2vh solid rgba(0, 0, 0, 0.45); */
        text-shadow: 0px 6px 10px rgba(0, 0, 0, 0.14), 0px 1px 18px rgba(0, 0, 0, 0.12), 0px 3px 5px rgba(0, 0, 0, 0.2);
    }




    #log_in_button_game:hover {
        height: 11vh !important;
        margin-top: 0vh;
    }

    .patreon_small:hover {
        height: 10vh;
        background-position: 1%;
        background-size: 35vh;
    }

    .profile_button_game.stream_mode {
        border-right: 0.1vh solid #777777;
        max-width: 24.1vh;
        height: 8vh;
    }

    .profile_button_game:hover.stream_mode {
        height: 8.1vh;
        padding: 1.9vh 1.2vh 0 2.5vh;
    }

    .profile.stream_mode {
        right: 11vh !important;
        left: unset;
    }

    .profile_menu_game.stream_mode {
        right: 0;
    }

    .nickname {
        font-size: 4.4vh;
        padding: 0.5vh 1vh 0 2.5vh;
        max-width: 8.5vh;
    }

    .avatar {
        width: 6.1vh;
        height: 6.1vh;
        border-radius: 5vh;
    }

    .walkthrough_badge {
        width: 7.6vh;
        height: 10vh;
        position: absolute;
        border-radius: 1vh;
        background-size: 55%;
        top: 30vh;
        left: 35vh;
    }

    .walkthrough_menu_gallery {
        width: 110vh;
        font-size: 1.8vh;
        line-height: 3vh;
        top: 50%;
        transform: translateY(-50%);
    }

    .walkthrough_gal_text {
        max-height: 45vh;
        padding-bottom: 3.5vh;
        padding-right: 3vh;
        padding-left: 3.5vh;
        padding-top: 2.5vh;
        font-size: 4vh;
        line-height: 6vh;
        color: white;
    }

    .dotavalve {
        bottom: 4vh;
        line-height: 6vh;
        width: 84vh;
        position: absolute;
    }

    .version {
        font-size: 5.2vh;
        margin-bottom: 5vh;
    }

    .logomain {
        top: 6vh;
        left: 2vh;
        height: 42vh;
    }

    .profile {
        max-width: 32vh;
    }

    .login_wrapper .nickname {
        max-width: 20.5vh;
    }

    #play_game_new {
        margin-right: 2vh;
        box-shadow: 0px 0.3vh 0.4vh rgb(0 0 0 / 14%), 0px 0.2vh 0.8vh rgb(0 0 0 / 12%), 0px 0.2vh 0.3vh rgb(0 0 0 / 20%);
        border-radius: 1vh;
        font-size: 3.5vh;
        margin-top: 0.2vh;
        width: 43vh;
        height: 9.6vh;
    }

    .walkt_pay_text {
        margin: 0.1vh !important;
        width: 64vh !important;
        height: 24vh !important;
        font-size: 4vh !important;
        line-height: 6.7vh !important;
        padding: 4vh 0vh 0vh 4vh !important;
        overflow-y: hidden !important;
    }

    .walkt_pay_buttons {
        padding: 0vh 3vh !important;
        height: 14vh;
    }

    .smol_walkt {
        width: 73vh;
    }

    .walkt_pay_buttons .patreon_button {
        margin: 0;
        margin-left: 1vh;
        margin-top: -5vh;
    }

 .inventory_menu_button {
    background-size: 4.8vh;
    width: 8vh;
    height: 12.1vh;
    margin-left: 14.5vh;
  }

    .inventory_menu_button:hover {
        height: 10.1vh;
    }

    .inventory {
        bottom: 0;
        top: 0;
        width: 139vh;
    }

    .main_inventory {
        width: 82vh;
        height: 100vh;
    }

    .items_inventory {
        width: 55vh;
        height: 100vh;
    }

    .div-table-col, .div-table-col-active {
        width: 13.5vh;
        margin: 1.2vh;
        height: 13.5vh;
    }

    .coins_icon {
        width: 10.5vh;
    }

    .coins_text {
        line-height: 15vh;
        font-size: 4.2vh;
        margin-left: 1vh;
    }

    .thing {
        width: 12vh;
        height: 12vh;
        padding: 0.5vh;
    }

    .thing_menu {
        width: 49vh;
        padding: 0 2vh 0 0;
        border-radius: 1vh;
        margin-top: 0.5vh;
        box-shadow: 0.2vh 0.2vh 1vh #00000059;
    }

    .thing_title {
        font-size: 4vh;
        padding: 3.5vh 4vh 0vh;
    }

    .thing_button {
        margin-top: 0vh;
        margin-left: 2vh;
        font-size: 4vh;
        padding: 3vh 2vh 4vh;
    }

    .thing_line {
        margin-top: 1.5vh;
        width: 103%;
    }

    .thing_description {
        margin-top: 2vh;
        margin-left: 2vh;
        font-size: 4vh;
        padding: 0vh 2vh 2vh 2vh;
    }

    .arrow_up {
        width: 4vh;
        left: 0vh;
        height: 4vh;
        margin-top: -2vh;
        margin-left: 4.8vh;
    }

    .thing_counter {
        right: -1.5vh;
        top: -2vh;
        font-size: 3.5vh;
        padding: 1vh 2vh;
    }

    .char_sprite, .char_emotion {
        height: 90vh;
        left: -23vh;
    }

    .type_icon {
        width: 5vh;
        height: 5vh;
        margin-top: 5vh;
        margin-right: 1.3vh;
    }

    .current_outfit {
        margin-top: 4.1vh;
        margin-left: 56vh;
    }

    .char_state, .lina_arc_state, .lanaya_arc_state {
        width: 17vh;
        top: 50vh;
        right: 3.5vh;
    }

    .state_label {
        border-radius: 0.5vh;
        margin-top: 2vh;
        font-size: 5vh;
        padding: 1.5vh 2.8vh;
    }

    .speech_bubble {
        box-shadow: 0.2vh 0.5vh 1vh #0000003b;
        padding: 4vh 5vh;
        left: -65vh;
        right: 0;
        top: 48vh;
        width: fit-content;
        border-radius: 12vh;
        font-size: 5vh;
        white-space: normal;
        /* Разрешаем перенос */
        word-break: break-word;
        max-width: 81vh;
    }

    .speech_bubble:after {
        top: 0;
        left: 50%;
        width: 0;
        height: 0;
        border: 2.5vh solid transparent;
        border-bottom-color: #ffffff;
        border-top: 0;
        border-left: 0;
        margin-left: -1vh;
        margin-top: -2vh;
    }

    .choose_version {
        display: none;
    }

    #paywall_item_visible {
        display: block;
    }

    .desktop_only {
        display: none;
    }

    
.dirty_deeds_container {
  width: 99vh;
  bottom: 2vh;
  left: 2vh;
}

.dirty_image {
  width: 42.5vh;
}

.dirty_name {font-size: 3.2vh;margin-bottom: 1vh;}

.dirty_button {
  width: 49vh;
  height: 5.4vh;
  font-size: 3vh;
  border: 0.5vh #ff6aff solid;
  padding-top: 1.7vh;
  font-weight: 600;
}


        .eight_choices {
        height: 50vh;
        width: 120vh;
        bottom: 28vh;
        left: 15vh;
    }
    
    .choices.eight_choices {
        left:-43vh;
        height: 50vh;
    }

    .eight_choice_button {
        font-size: 3.5vh;
        width: 80vh;
        margin-right: 3vh;
        margin-bottom: 2.5vh;
    }

    .eight_choice_button:hover {
        margin-right: 0vh;
    }

  .pay_plz {
    padding: 1.5vh 3vh;
    right: 3vh;
    top: 1.7vh;
    font-size: 5vh;
    line-height: 9.2vh;
    border-radius: 1vh;
  }
 .pay_plz::before {
    height: 7.1vh;
    width: 7vh;
    margin-right: 3.2vh;
    top: 1vh;
  }

}

/* ===== dark.css ===== */
/*
* @sweetalert2/themes v4.0.5
* Released under the MIT License.
*/

.swal2-popup.swal2-toast {
    flex-direction: column;
    align-items: stretch;
    width: auto;
    padding: 1.25em;
    overflow-y: hidden;
    background: #19191a;
    box-shadow: 0 0 0.625em #d9d9d9; }
    .swal2-popup.swal2-toast .swal2-header {
      flex-direction: row;
      padding: 0; }
    .swal2-popup.swal2-toast .swal2-title {
      flex-grow: 1;
      justify-content: flex-start;
      margin: 0 0.625em;
      font-size: 1em; }
    .swal2-popup.swal2-toast .swal2-loading {
      justify-content: center; }
    .swal2-popup.swal2-toast .swal2-input {
      height: 2em;
      margin: .3125em auto;
      font-size: 1em; }
    .swal2-popup.swal2-toast .swal2-validation-message {
      font-size: 1em; }
    .swal2-popup.swal2-toast .swal2-footer {
      margin: 0.5em 0 0;
      padding: 0.5em 0 0;
      font-size: 0.8em; }
    .swal2-popup.swal2-toast .swal2-close {
      position: static;
      width: 0.8em;
      height: 0.8em;
      line-height: 0.8; }
    .swal2-popup.swal2-toast .swal2-content {
      justify-content: flex-start;
      margin: 0 0.625em;
      padding: 0;
      font-size: 1em;
      text-align: initial; }
    .swal2-popup.swal2-toast .swal2-html-container {
      padding: .625em 0 0; }
      .swal2-popup.swal2-toast .swal2-html-container:empty {
        padding: 0; }
    .swal2-popup.swal2-toast .swal2-icon {
      width: 2em;
      min-width: 2em;
      height: 2em;
      margin: 0 .5em 0 0; }
      .swal2-popup.swal2-toast .swal2-icon .swal2-icon-content {
        display: flex;
        align-items: center;
        font-size: 1.8em;
        font-weight: bold; }
        @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
          .swal2-popup.swal2-toast .swal2-icon .swal2-icon-content {
            font-size: .25em; } }
      .swal2-popup.swal2-toast .swal2-icon.swal2-success .swal2-success-ring {
        width: 2em;
        height: 2em; }
      .swal2-popup.swal2-toast .swal2-icon.swal2-error [class^='swal2-x-mark-line'] {
        top: .875em;
        width: 1.375em; }
        .swal2-popup.swal2-toast .swal2-icon.swal2-error [class^='swal2-x-mark-line'][class$='left'] {
          left: .3125em; }
        .swal2-popup.swal2-toast .swal2-icon.swal2-error [class^='swal2-x-mark-line'][class$='right'] {
          right: .3125em; }
    .swal2-popup.swal2-toast .swal2-actions {
      flex: 1;
      flex-basis: auto !important;
      align-self: stretch;
      width: auto;
      height: 2.2em;
      height: auto;
      margin: 0 .3125em;
      margin-top: .3125em;
      padding: 0; }
    .swal2-popup.swal2-toast .swal2-styled {
      margin: .125em .3125em;
      padding: .3125em .625em;
      font-size: 1em; }
      .swal2-popup.swal2-toast .swal2-styled:focus {
        box-shadow: 0 0 0 1px #19191a, 0 0 0 3px rgba(138, 176, 213, 0.5); }
    .swal2-popup.swal2-toast .swal2-success {
      border-color: #a5dc86; }
      .swal2-popup.swal2-toast .swal2-success [class^='swal2-success-circular-line'] {
        position: absolute;
        width: 1.6em;
        height: 3em;
        transform: rotate(45deg);
        border-radius: 50%; }
        .swal2-popup.swal2-toast .swal2-success [class^='swal2-success-circular-line'][class$='left'] {
          top: -.8em;
          left: -.5em;
          transform: rotate(-45deg);
          transform-origin: 2em 2em;
          border-radius: 4em 0 0 4em; }
        .swal2-popup.swal2-toast .swal2-success [class^='swal2-success-circular-line'][class$='right'] {
          top: -.25em;
          left: .9375em;
          transform-origin: 0 1.5em;
          border-radius: 0 4em 4em 0; }
      .swal2-popup.swal2-toast .swal2-success .swal2-success-ring {
        width: 2em;
        height: 2em; }
      .swal2-popup.swal2-toast .swal2-success .swal2-success-fix {
        top: 0;
        left: .4375em;
        width: .4375em;
        height: 2.6875em; }
      .swal2-popup.swal2-toast .swal2-success [class^='swal2-success-line'] {
        height: .3125em; }
        .swal2-popup.swal2-toast .swal2-success [class^='swal2-success-line'][class$='tip'] {
          top: 1.125em;
          left: .1875em;
          width: .75em; }
        .swal2-popup.swal2-toast .swal2-success [class^='swal2-success-line'][class$='long'] {
          top: .9375em;
          right: .1875em;
          width: 1.375em; }
      .swal2-popup.swal2-toast .swal2-success.swal2-icon-show .swal2-success-line-tip {
        -webkit-animation: swal2-toast-animate-success-line-tip .75s;
                animation: swal2-toast-animate-success-line-tip .75s; }
      .swal2-popup.swal2-toast .swal2-success.swal2-icon-show .swal2-success-line-long {
        -webkit-animation: swal2-toast-animate-success-line-long .75s;
                animation: swal2-toast-animate-success-line-long .75s; }
    .swal2-popup.swal2-toast.swal2-show {
      -webkit-animation: swal2-toast-show 0.5s;
              animation: swal2-toast-show 0.5s; }
    .swal2-popup.swal2-toast.swal2-hide {
      -webkit-animation: swal2-toast-hide 0.1s forwards;
              animation: swal2-toast-hide 0.1s forwards; }
  
  .swal2-container {
    display: flex;
    position: fixed;
    z-index: 1060;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 0.625em;
    overflow-x: hidden;
    transition: background-color 0.1s;
    -webkit-overflow-scrolling: touch; }
    .swal2-container.swal2-backdrop-show, .swal2-container.swal2-noanimation {
      background: rgba(25, 25, 26, 0.75); }
    .swal2-container.swal2-backdrop-hide {
      background: transparent !important; }
    .swal2-container.swal2-top {
      align-items: flex-start; }
    .swal2-container.swal2-top-start, .swal2-container.swal2-top-left {
      align-items: flex-start;
      justify-content: flex-start; }
    .swal2-container.swal2-top-end, .swal2-container.swal2-top-right {
      align-items: flex-start;
      justify-content: flex-end; }
    .swal2-container.swal2-center {
      align-items: center; }
    .swal2-container.swal2-center-start, .swal2-container.swal2-center-left {
      align-items: center;
      justify-content: flex-start; }
    .swal2-container.swal2-center-end, .swal2-container.swal2-center-right {
      align-items: center;
      justify-content: flex-end; }
    .swal2-container.swal2-bottom {
      align-items: flex-end; }
    .swal2-container.swal2-bottom-start, .swal2-container.swal2-bottom-left {
      align-items: flex-end;
      justify-content: flex-start; }
    .swal2-container.swal2-bottom-end, .swal2-container.swal2-bottom-right {
      align-items: flex-end;
      justify-content: flex-end; }
    .swal2-container.swal2-bottom > :first-child,
    .swal2-container.swal2-bottom-start > :first-child,
    .swal2-container.swal2-bottom-left > :first-child,
    .swal2-container.swal2-bottom-end > :first-child,
    .swal2-container.swal2-bottom-right > :first-child {
      margin-top: auto; }
    .swal2-container.swal2-grow-fullscreen > .swal2-modal {
      display: flex !important;
      flex: 1;
      align-self: stretch;
      justify-content: center; }
    .swal2-container.swal2-grow-row > .swal2-modal {
      display: flex !important;
      flex: 1;
      align-content: center;
      justify-content: center; }
    .swal2-container.swal2-grow-column {
      flex: 1;
      flex-direction: column; }
      .swal2-container.swal2-grow-column.swal2-top, .swal2-container.swal2-grow-column.swal2-center, .swal2-container.swal2-grow-column.swal2-bottom {
        align-items: center; }
      .swal2-container.swal2-grow-column.swal2-top-start, .swal2-container.swal2-grow-column.swal2-center-start, .swal2-container.swal2-grow-column.swal2-bottom-start, .swal2-container.swal2-grow-column.swal2-top-left, .swal2-container.swal2-grow-column.swal2-center-left, .swal2-container.swal2-grow-column.swal2-bottom-left {
        align-items: flex-start; }
      .swal2-container.swal2-grow-column.swal2-top-end, .swal2-container.swal2-grow-column.swal2-center-end, .swal2-container.swal2-grow-column.swal2-bottom-end, .swal2-container.swal2-grow-column.swal2-top-right, .swal2-container.swal2-grow-column.swal2-center-right, .swal2-container.swal2-grow-column.swal2-bottom-right {
        align-items: flex-end; }
      .swal2-container.swal2-grow-column > .swal2-modal {
        display: flex !important;
        flex: 1;
        align-content: center;
        justify-content: center; }
    .swal2-container.swal2-no-transition {
      transition: none !important; }
    .swal2-container:not(.swal2-top):not(.swal2-top-start):not(.swal2-top-end):not(.swal2-top-left):not(.swal2-top-right):not(.swal2-center-start):not(.swal2-center-end):not(.swal2-center-left):not(.swal2-center-right):not(.swal2-bottom):not(.swal2-bottom-start):not(.swal2-bottom-end):not(.swal2-bottom-left):not(.swal2-bottom-right):not(.swal2-grow-fullscreen) > .swal2-modal {
      margin: auto; }
    @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
      .swal2-container .swal2-modal {
        margin: 0 !important; } }
  
  .swal2-popup {
    display: none;
    position: relative;
    box-sizing: border-box;
    flex-direction: column;
    justify-content: center;
    width: 32em;
    max-width: 100%;
    padding: 1.25em;
    border: none;
    border-radius: 5px;
    background: #474757;
    font-family: inherit;
    font-size: 1rem;
    }
    .swal2-popup:focus {
      outline: none; }
    .swal2-popup.swal2-loading {
      overflow-y: hidden; }
  
  .swal2-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 1.8em; }
  
  .swal2-title {
    position: relative;
    max-width: 100%;
    margin: 0 0 0.4em;
    padding: 0;
    color: #e1e1e1;
    font-size: 1.875em;
    font-weight: 600;
    text-align: center;
    text-transform: none;
    word-wrap: break-word; }
  
  .swal2-actions {
    display: flex;
    z-index: 1;
    box-sizing: border-box;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 1.25em auto 0;
    padding: 0; }
    .swal2-actions:not(.swal2-loading) .swal2-styled[disabled] {
      opacity: .4; }
    .swal2-actions:not(.swal2-loading) .swal2-styled:hover {
      background-image: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)); }
    .swal2-actions:not(.swal2-loading) .swal2-styled:active {
      background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)); }
  
  .swal2-loader {
    display: none;
    align-items: center;
    justify-content: center;
    width: 2.2em;
    height: 2.2em;
    margin: 0 1.875em;
    -webkit-animation: swal2-rotate-loading 1.5s linear 0s infinite normal;
            animation: swal2-rotate-loading 1.5s linear 0s infinite normal;
    border-width: 0.25em;
    border-style: solid;
    border-radius: 100%;
    border-color: #2778c4 transparent #2778c4 transparent; }
  
  .swal2-styled {
    margin: 0.3125em;
    padding: 0.625em 1.1em;
    box-shadow: none;
    font-weight: 500; }
    .swal2-styled:not([disabled]) {
      cursor: pointer; }
    .swal2-styled.swal2-confirm {
      border: 0;
      border-radius: 0.25em;
      background: initial;
      background-color: #c427a2;
      color: #fff;
      font-size: 1em; }
    .swal2-styled.swal2-deny {
      border: 0;
      border-radius: 0.25em;
      background: initial;
      background-color: #d14529;
      color: #fff;
      font-size: 1em; }
    .swal2-styled.swal2-cancel {
      border: 0;
      border-radius: 0.25em;
      background: initial;
      background-color: #757575;
      color: #fff;
      font-size: 1em; }
    .swal2-styled:focus {
      outline: none;
      box-shadow: 0 0 0 1px #19191a, 0 0 0 3px rgba(138, 176, 213, 0.5); }
    .swal2-styled::-moz-focus-inner {
      border: 0; }
  
  .swal2-footer {
    justify-content: center;
    margin: 1.25em 0 0;
    padding: 1em 0 0;
    border-top: 1px solid #555;
    color: #bbbbbb;
    font-size: 1em; }
  
  .swal2-timer-progress-bar-container {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 0.25em;
    overflow: hidden;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px; }
  
  .swal2-timer-progress-bar {
    width: 100%;
    height: 0.25em;
    background: rgba(225, 225, 225, 0.6); }
  
  .swal2-image {
    max-width: 100%;
    margin: 1.25em auto; }
  
  .swal2-close {
    position: absolute;
    z-index: 2;
    top: 0;
    right: 0;
    align-items: center;
    justify-content: center;
    width: 1.2em;
    height: 1.2em;
    padding: 0;
    overflow: hidden;
    transition: color 0.1s ease-out;
    border: none;
    border-radius: 5px;
    background: transparent;
    color: #cccccc;
    font-family: serif;
    font-size: 2.5em;
    line-height: 1.2;
    cursor: pointer; }
    .swal2-close:hover {
      transform: none;
      background: transparent;
      color: #f27474; }
    .swal2-close:focus {
      outline: none;
      box-shadow: inset 0 0 0 3px rgba(100, 150, 200, 0.5); }
    .swal2-close::-moz-focus-inner {
      border: 0; }
  
  .swal2-content {
    z-index: 1;
    justify-content: center;
    margin: 0;
    padding: 0 1.6em;
    color: #e1e1e1;
    font-size: 1.125em;
    font-weight: normal;
    line-height: normal;
    text-align: center;
    word-wrap: break-word; }
  
  .swal2-input,
  .swal2-file,
  .swal2-textarea,
  .swal2-select,
  .swal2-radio,
  .swal2-checkbox {
    margin: 1em auto; }
  
  .swal2-input,
  .swal2-file,
  .swal2-textarea {
    box-sizing: border-box;
    width: 100%;
    transition: border-color 0.3s, box-shadow 0.3s;
    border: 1px solid #d9d9d9;
    border-radius: 0.1875em;
    background: #323234;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.06);
    color: #e1e1e1;
    font-size: 1.125em; }
    .swal2-input.swal2-inputerror,
    .swal2-file.swal2-inputerror,
    .swal2-textarea.swal2-inputerror {
      border-color: #f27474 !important;
      box-shadow: 0 0 2px #f27474 !important; }
    .swal2-input:focus,
    .swal2-file:focus,
    .swal2-textarea:focus {
      border: 1px solid #b4dbed;
      outline: none;
      box-shadow: 0 0 0 3px rgba(100, 150, 200, 0.5); }
    .swal2-input::-moz-placeholder, .swal2-file::-moz-placeholder, .swal2-textarea::-moz-placeholder {
      color: #cccccc; }
    .swal2-input:-ms-input-placeholder, .swal2-file:-ms-input-placeholder, .swal2-textarea:-ms-input-placeholder {
      color: #cccccc; }
    .swal2-input::placeholder,
    .swal2-file::placeholder,
    .swal2-textarea::placeholder {
      color: #cccccc; }
  
  .swal2-range {
    margin: 1em auto;
    background: #19191a; }
    .swal2-range input {
      width: 80%; }
    .swal2-range output {
      width: 20%;
      color: #e1e1e1;
      font-weight: 600;
      text-align: center; }
    .swal2-range input,
    .swal2-range output {
      height: 2.625em;
      padding: 0;
      font-size: 1.125em;
      line-height: 2.625em; }
  
  .swal2-input {
    height: 2.625em;
    padding: 0 0.75em; }
    .swal2-input[type='number'] {
      max-width: 10em; }
  
  .swal2-file {
    background: #323234;
    font-size: 1.125em; }
  
  .swal2-textarea {
    height: 6.75em;
    padding: 0.75em; }
  
  .swal2-select {
    min-width: 50%;
    max-width: 100%;
    padding: .375em .625em;
    background: #323234;
    color: #e1e1e1;
    font-size: 1.125em; }
  
  .swal2-radio,
  .swal2-checkbox {
    align-items: center;
    justify-content: center;
    background: #19191a;
    color: #e1e1e1; }
    .swal2-radio label,
    .swal2-checkbox label {
      margin: 0 .6em;
      font-size: 1.125em; }
    .swal2-radio input,
    .swal2-checkbox input {
      margin: 0 .4em; }
  
  .swal2-input-label {
    display: flex;
    justify-content: center;
    margin: 1em auto; }
  
  .swal2-validation-message {
    align-items: center;
    justify-content: center;
    margin: 0 -2.7em;
    padding: 0.625em;
    overflow: hidden;
    background: #323234;
    color: #e1e1e1;
    font-size: 1em;
    font-weight: 300; }
    .swal2-validation-message::before {
      content: '!';
      display: inline-block;
      width: 1.5em;
      min-width: 1.5em;
      height: 1.5em;
      margin: 0 .625em;
      border-radius: 50%;
      background-color: #f27474;
      color: #fff;
      font-weight: 600;
      line-height: 1.5em;
      text-align: center; }
  
  .swal2-icon {
    position: relative;
    box-sizing: content-box;
    justify-content: center;
    width: 5em;
    height: 5em;
    margin: 1.25em auto 1.875em;
    border: 0.25em solid transparent;
    border-radius: 50%;
    border-color: #000;
    font-family: inherit;
    line-height: 5em;
    cursor: default;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none; }
    .swal2-icon .swal2-icon-content {
      display: flex;
      align-items: center;
      font-size: 3.75em; }
    .swal2-icon.swal2-error {
      border-color: #f27474;
      color: #f27474; }
      .swal2-icon.swal2-error .swal2-x-mark {
        position: relative;
        flex-grow: 1; }
      .swal2-icon.swal2-error [class^='swal2-x-mark-line'] {
        display: block;
        position: absolute;
        top: 2.3125em;
        width: 2.9375em;
        height: .3125em;
        border-radius: .125em;
        background-color: #f27474; }
        .swal2-icon.swal2-error [class^='swal2-x-mark-line'][class$='left'] {
          left: 1.0625em;
          transform: rotate(45deg); }
        .swal2-icon.swal2-error [class^='swal2-x-mark-line'][class$='right'] {
          right: 1em;
          transform: rotate(-45deg); }
      .swal2-icon.swal2-error.swal2-icon-show {
        -webkit-animation: swal2-animate-error-icon .5s;
                animation: swal2-animate-error-icon .5s; }
        .swal2-icon.swal2-error.swal2-icon-show .swal2-x-mark {
          -webkit-animation: swal2-animate-error-x-mark .5s;
                  animation: swal2-animate-error-x-mark .5s; }
    .swal2-icon.swal2-warning {
      border-color: #facea8;
      color: #f8bb86; }
    .swal2-icon.swal2-info {
      border-color: #9de0f6;
      color: #3fc3ee; }
    .swal2-icon.swal2-question {
      border-color: #c9dae1;
      color: #87adbd; }
    .swal2-icon.swal2-success {
      border-color: #a5dc86;
      color: #a5dc86; }
      .swal2-icon.swal2-success [class^='swal2-success-circular-line'] {
        position: absolute;
        width: 3.75em;
        height: 7.5em;
        transform: rotate(45deg);
        border-radius: 50%; }
        .swal2-icon.swal2-success [class^='swal2-success-circular-line'][class$='left'] {
          top: -.4375em;
          left: -2.0635em;
          transform: rotate(-45deg);
          transform-origin: 3.75em 3.75em;
          border-radius: 7.5em 0 0 7.5em; }
        .swal2-icon.swal2-success [class^='swal2-success-circular-line'][class$='right'] {
          top: -.6875em;
          left: 1.875em;
          transform: rotate(-45deg);
          transform-origin: 0 3.75em;
          border-radius: 0 7.5em 7.5em 0; }
      .swal2-icon.swal2-success .swal2-success-ring {
        position: absolute;
        z-index: 2;
        top: -.25em;
        left: -.25em;
        box-sizing: content-box;
        width: 100%;
        height: 100%;
        border: 0.25em solid rgba(165, 220, 134, 0.3);
        border-radius: 50%; }
      .swal2-icon.swal2-success .swal2-success-fix {
        position: absolute;
        z-index: 1;
        top: .5em;
        left: 1.625em;
        width: .4375em;
        height: 5.625em;
        transform: rotate(-45deg); }
      .swal2-icon.swal2-success [class^='swal2-success-line'] {
        display: block;
        position: absolute;
        z-index: 2;
        height: .3125em;
        border-radius: .125em;
        background-color: #a5dc86; }
        .swal2-icon.swal2-success [class^='swal2-success-line'][class$='tip'] {
          top: 2.875em;
          left: .8125em;
          width: 1.5625em;
          transform: rotate(45deg); }
        .swal2-icon.swal2-success [class^='swal2-success-line'][class$='long'] {
          top: 2.375em;
          right: .5em;
          width: 2.9375em;
          transform: rotate(-45deg); }
      .swal2-icon.swal2-success.swal2-icon-show .swal2-success-line-tip {
        -webkit-animation: swal2-animate-success-line-tip .75s;
                animation: swal2-animate-success-line-tip .75s; }
      .swal2-icon.swal2-success.swal2-icon-show .swal2-success-line-long {
        -webkit-animation: swal2-animate-success-line-long .75s;
                animation: swal2-animate-success-line-long .75s; }
      .swal2-icon.swal2-success.swal2-icon-show .swal2-success-circular-line-right {
        -webkit-animation: swal2-rotate-success-circular-line 4.25s ease-in;
                animation: swal2-rotate-success-circular-line 4.25s ease-in; }
  
  .swal2-progress-steps {
    flex-wrap: wrap;
    align-items: center;
    max-width: 100%;
    margin: 0 0 1.25em;
    padding: 0;
    background: inherit;
    font-weight: 600; }
    .swal2-progress-steps li {
      display: inline-block;
      position: relative; }
    .swal2-progress-steps .swal2-progress-step {
      z-index: 20;
      flex-shrink: 0;
      width: 2em;
      height: 2em;
      border-radius: 2em;
      background: #2778c4;
      color: #fff;
      line-height: 2em;
      text-align: center; }
      .swal2-progress-steps .swal2-progress-step.swal2-active-progress-step {
        background: #2778c4; }
        .swal2-progress-steps .swal2-progress-step.swal2-active-progress-step ~ .swal2-progress-step {
          background: #58585b;
          color: #fff; }
        .swal2-progress-steps .swal2-progress-step.swal2-active-progress-step ~ .swal2-progress-step-line {
          background: #58585b; }
    .swal2-progress-steps .swal2-progress-step-line {
      z-index: 10;
      flex-shrink: 0;
      width: 2.5em;
      height: .4em;
      margin: 0 -1px;
      background: #2778c4; }
  
  [class^='swal2'] {
    -webkit-tap-highlight-color: white;
    color: white;
    }
  
  .swal2-show {
    -webkit-animation: swal2-show 0.3s;
            animation: swal2-show 0.3s; }
  
  .swal2-hide {
    -webkit-animation: swal2-hide 0.15s forwards;
            animation: swal2-hide 0.15s forwards; }
  
  .swal2-noanimation {
    transition: none; }
  
  .swal2-scrollbar-measure {
    position: absolute;
    top: -9999px;
    width: 50px;
    height: 50px;
    overflow: scroll; }
  
  .swal2-rtl .swal2-close {
    right: auto;
    left: 0; }
  
  .swal2-rtl .swal2-timer-progress-bar {
    right: 0;
    left: auto; }
  
  @supports (-ms-accelerator: true) {
    .swal2-range input {
      width: 100% !important; }
    .swal2-range output {
      display: none; } }
  
  @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .swal2-range input {
      width: 100% !important; }
    .swal2-range output {
      display: none; } }
  
  @-webkit-keyframes swal2-toast-show {
    0% {
      transform: translateY(-0.625em) rotateZ(2deg); }
    33% {
      transform: translateY(0) rotateZ(-2deg); }
    66% {
      transform: translateY(0.3125em) rotateZ(2deg); }
    100% {
      transform: translateY(0) rotateZ(0deg); } }
  
  @keyframes swal2-toast-show {
    0% {
      transform: translateY(-0.625em) rotateZ(2deg); }
    33% {
      transform: translateY(0) rotateZ(-2deg); }
    66% {
      transform: translateY(0.3125em) rotateZ(2deg); }
    100% {
      transform: translateY(0) rotateZ(0deg); } }
  
  @-webkit-keyframes swal2-toast-hide {
    100% {
      transform: rotateZ(1deg);
      opacity: 0; } }
  
  @keyframes swal2-toast-hide {
    100% {
      transform: rotateZ(1deg);
      opacity: 0; } }
  
  @-webkit-keyframes swal2-toast-animate-success-line-tip {
    0% {
      top: .5625em;
      left: .0625em;
      width: 0; }
    54% {
      top: .125em;
      left: .125em;
      width: 0; }
    70% {
      top: .625em;
      left: -.25em;
      width: 1.625em; }
    84% {
      top: 1.0625em;
      left: .75em;
      width: .5em; }
    100% {
      top: 1.125em;
      left: .1875em;
      width: .75em; } }
  
  @keyframes swal2-toast-animate-success-line-tip {
    0% {
      top: .5625em;
      left: .0625em;
      width: 0; }
    54% {
      top: .125em;
      left: .125em;
      width: 0; }
    70% {
      top: .625em;
      left: -.25em;
      width: 1.625em; }
    84% {
      top: 1.0625em;
      left: .75em;
      width: .5em; }
    100% {
      top: 1.125em;
      left: .1875em;
      width: .75em; } }
  
  @-webkit-keyframes swal2-toast-animate-success-line-long {
    0% {
      top: 1.625em;
      right: 1.375em;
      width: 0; }
    65% {
      top: 1.25em;
      right: .9375em;
      width: 0; }
    84% {
      top: .9375em;
      right: 0;
      width: 1.125em; }
    100% {
      top: .9375em;
      right: .1875em;
      width: 1.375em; } }
  
  @keyframes swal2-toast-animate-success-line-long {
    0% {
      top: 1.625em;
      right: 1.375em;
      width: 0; }
    65% {
      top: 1.25em;
      right: .9375em;
      width: 0; }
    84% {
      top: .9375em;
      right: 0;
      width: 1.125em; }
    100% {
      top: .9375em;
      right: .1875em;
      width: 1.375em; } }
  
  @-webkit-keyframes swal2-show {
    0% {
      transform: scale(0.7); }
    45% {
      transform: scale(1.05); }
    80% {
      transform: scale(0.95); }
    100% {
      transform: scale(1); } }
  
  @keyframes swal2-show {
    0% {
      transform: scale(0.7); }
    45% {
      transform: scale(1.05); }
    80% {
      transform: scale(0.95); }
    100% {
      transform: scale(1); } }
  
  @-webkit-keyframes swal2-hide {
    0% {
      transform: scale(1);
      opacity: 1; }
    100% {
      transform: scale(0.5);
      opacity: 0; } }
  
  @keyframes swal2-hide {
    0% {
      transform: scale(1);
      opacity: 1; }
    100% {
      transform: scale(0.5);
      opacity: 0; } }
  
  @-webkit-keyframes swal2-animate-success-line-tip {
    0% {
      top: 1.1875em;
      left: .0625em;
      width: 0; }
    54% {
      top: 1.0625em;
      left: .125em;
      width: 0; }
    70% {
      top: 2.1875em;
      left: -.375em;
      width: 3.125em; }
    84% {
      top: 3em;
      left: 1.3125em;
      width: 1.0625em; }
    100% {
      top: 2.8125em;
      left: .8125em;
      width: 1.5625em; } }
  
  @keyframes swal2-animate-success-line-tip {
    0% {
      top: 1.1875em;
      left: .0625em;
      width: 0; }
    54% {
      top: 1.0625em;
      left: .125em;
      width: 0; }
    70% {
      top: 2.1875em;
      left: -.375em;
      width: 3.125em; }
    84% {
      top: 3em;
      left: 1.3125em;
      width: 1.0625em; }
    100% {
      top: 2.8125em;
      left: .8125em;
      width: 1.5625em; } }
  
  @-webkit-keyframes swal2-animate-success-line-long {
    0% {
      top: 3.375em;
      right: 2.875em;
      width: 0; }
    65% {
      top: 3.375em;
      right: 2.875em;
      width: 0; }
    84% {
      top: 2.1875em;
      right: 0;
      width: 3.4375em; }
    100% {
      top: 2.375em;
      right: .5em;
      width: 2.9375em; } }
  
  @keyframes swal2-animate-success-line-long {
    0% {
      top: 3.375em;
      right: 2.875em;
      width: 0; }
    65% {
      top: 3.375em;
      right: 2.875em;
      width: 0; }
    84% {
      top: 2.1875em;
      right: 0;
      width: 3.4375em; }
    100% {
      top: 2.375em;
      right: .5em;
      width: 2.9375em; } }
  
  @-webkit-keyframes swal2-rotate-success-circular-line {
    0% {
      transform: rotate(-45deg); }
    5% {
      transform: rotate(-45deg); }
    12% {
      transform: rotate(-405deg); }
    100% {
      transform: rotate(-405deg); } }
  
  @keyframes swal2-rotate-success-circular-line {
    0% {
      transform: rotate(-45deg); }
    5% {
      transform: rotate(-45deg); }
    12% {
      transform: rotate(-405deg); }
    100% {
      transform: rotate(-405deg); } }
  
  @-webkit-keyframes swal2-animate-error-x-mark {
    0% {
      margin-top: 1.625em;
      transform: scale(0.4);
      opacity: 0; }
    50% {
      margin-top: 1.625em;
      transform: scale(0.4);
      opacity: 0; }
    80% {
      margin-top: -.375em;
      transform: scale(1.15); }
    100% {
      margin-top: 0;
      transform: scale(1);
      opacity: 1; } }
  
  @keyframes swal2-animate-error-x-mark {
    0% {
      margin-top: 1.625em;
      transform: scale(0.4);
      opacity: 0; }
    50% {
      margin-top: 1.625em;
      transform: scale(0.4);
      opacity: 0; }
    80% {
      margin-top: -.375em;
      transform: scale(1.15); }
    100% {
      margin-top: 0;
      transform: scale(1);
      opacity: 1; } }
  
  @-webkit-keyframes swal2-animate-error-icon {
    0% {
      transform: rotateX(100deg);
      opacity: 0; }
    100% {
      transform: rotateX(0deg);
      opacity: 1; } }
  
  @keyframes swal2-animate-error-icon {
    0% {
      transform: rotateX(100deg);
      opacity: 0; }
    100% {
      transform: rotateX(0deg);
      opacity: 1; } }
  
  @-webkit-keyframes swal2-rotate-loading {
    0% {
      transform: rotate(0deg); }
    100% {
      transform: rotate(360deg); } }
  
  @keyframes swal2-rotate-loading {
    0% {
      transform: rotate(0deg); }
    100% {
      transform: rotate(360deg); } }
  
  body.swal2-shown:not(.swal2-no-backdrop):not(.swal2-toast-shown) {
    overflow: hidden; }
  
  body.swal2-height-auto {
    height: auto !important; }
  
  body.swal2-no-backdrop .swal2-container {
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    max-width: calc(100% - 0.625em * 2);
    background-color: transparent !important; }
    body.swal2-no-backdrop .swal2-container > .swal2-modal {
      box-shadow: 0 0 10px rgba(25, 25, 26, 0.75); }
    body.swal2-no-backdrop .swal2-container.swal2-top {
      top: 0;
      left: 50%;
      transform: translateX(-50%); }
    body.swal2-no-backdrop .swal2-container.swal2-top-start, body.swal2-no-backdrop .swal2-container.swal2-top-left {
      top: 0;
      left: 0; }
    body.swal2-no-backdrop .swal2-container.swal2-top-end, body.swal2-no-backdrop .swal2-container.swal2-top-right {
      top: 0;
      right: 0; }
    body.swal2-no-backdrop .swal2-container.swal2-center {
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%); }
    body.swal2-no-backdrop .swal2-container.swal2-center-start, body.swal2-no-backdrop .swal2-container.swal2-center-left {
      top: 50%;
      left: 0;
      transform: translateY(-50%); }
    body.swal2-no-backdrop .swal2-container.swal2-center-end, body.swal2-no-backdrop .swal2-container.swal2-center-right {
      top: 50%;
      right: 0;
      transform: translateY(-50%); }
    body.swal2-no-backdrop .swal2-container.swal2-bottom {
      bottom: 0;
      left: 50%;
      transform: translateX(-50%); }
    body.swal2-no-backdrop .swal2-container.swal2-bottom-start, body.swal2-no-backdrop .swal2-container.swal2-bottom-left {
      bottom: 0;
      left: 0; }
    body.swal2-no-backdrop .swal2-container.swal2-bottom-end, body.swal2-no-backdrop .swal2-container.swal2-bottom-right {
      right: 0;
      bottom: 0; }
  
  @media print {
    body.swal2-shown:not(.swal2-no-backdrop):not(.swal2-toast-shown) {
      overflow-y: scroll !important; }
      body.swal2-shown:not(.swal2-no-backdrop):not(.swal2-toast-shown) > [aria-hidden='true'] {
        display: none; }
      body.swal2-shown:not(.swal2-no-backdrop):not(.swal2-toast-shown) .swal2-container {
        position: static !important; } }
  
  body.swal2-toast-shown .swal2-container {
    background-color: transparent; }
    body.swal2-toast-shown .swal2-container.swal2-top {
      top: 0;
      right: auto;
      bottom: auto;
      left: 50%;
      transform: translateX(-50%); }
    body.swal2-toast-shown .swal2-container.swal2-top-end, body.swal2-toast-shown .swal2-container.swal2-top-right {
      top: 0;
      right: 0;
      bottom: auto;
      left: auto; }
    body.swal2-toast-shown .swal2-container.swal2-top-start, body.swal2-toast-shown .swal2-container.swal2-top-left {
      top: 0;
      right: auto;
      bottom: auto;
      left: 0; }
    body.swal2-toast-shown .swal2-container.swal2-center-start, body.swal2-toast-shown .swal2-container.swal2-center-left {
      top: 50%;
      right: auto;
      bottom: auto;
      left: 0;
      transform: translateY(-50%); }
    body.swal2-toast-shown .swal2-container.swal2-center {
      top: 50%;
      right: auto;
      bottom: auto;
      left: 50%;
      transform: translate(-50%, -50%); }
    body.swal2-toast-shown .swal2-container.swal2-center-end, body.swal2-toast-shown .swal2-container.swal2-center-right {
      top: 50%;
      right: 0;
      bottom: auto;
      left: auto;
      transform: translateY(-50%); }
    body.swal2-toast-shown .swal2-container.swal2-bottom-start, body.swal2-toast-shown .swal2-container.swal2-bottom-left {
      top: auto;
      right: auto;
      bottom: 0;
      left: 0; }
    body.swal2-toast-shown .swal2-container.swal2-bottom {
      top: auto;
      right: auto;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%); }
    body.swal2-toast-shown .swal2-container.swal2-bottom-end, body.swal2-toast-shown .swal2-container.swal2-bottom-right {
      top: auto;
      right: 0;
      bottom: 0;
      left: auto; }