/**
Advent Calendar CSS
Author: Dinah C 2021.11.10
 */

#coll_prize {
  background-color: #7f5a30;
  border: none;
  color: #ffe490;
  padding: 16px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 20px;
  font-weight: bold;
  margin: 4px 2px;
  transition-duration: 0.4s;
  cursor: pointer;
  border-radius: 8px;
  text-transform: uppercase;
}

#coll_prize:hover {
  background-color: #c48d4a;
  color: #ffffdb;
}

#adventPrizePopupBody,
#adventBonusPopupBody {
  width: 90%;
  margin: auto;
}

#adventPrizePopupBody a,
#adventBonusPopupBody a {
  text-decoration: none;
}

#adventPrizePopupBody .adventPrizeList {
  max-width: 400px;
  margin: 1em auto;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: start;
  gap: 1em;
}

#adventPrizePopupBody .adventPrizeList .adventPrizeItem {
  max-width: 150px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5em;
}

#adventPrizePopupBody .adventPremium {
  color: darkred;
  font-weight: bold;
}

#adventPrizePopupBody .adventPremium::before {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-right: 1px;
  background: url(../../../premium/portal/images/anchor-star.png) center / 100% no-repeat;
  vertical-align: text-top;
}

#adventPrizePopupBody .adventPremiumPrize {
  position: relative;
  width: 95%;
  padding: 1em 2em;
  margin: 1em auto;
  border: 3px solid red;
  border-radius: 15px;
  overflow: hidden;
  box-sizing: border-box;
}

#adventPrizePopupBody .adventPremiumPrize::before,
#adventPrizePopupBody .adventPremiumPrize::after {
  content: "";
  position: absolute;
  display: block;
  background: url(../../../premium/portal/images/corner-right.svg) center / 100% no-repeat;
  width: 40px;
  height: calc(40px * 1.2);
  bottom: 0;
  right: 0;
}

#adventPrizePopupBody .adventPremiumPrize::after {
  bottom: unset;
  right: unset;
  top: 0;
  left: 0;
  transform: rotate(180deg);
}

#adventPrizePopupBody .adventPremiumPrize p {
  margin-top: 0;
}

#adventBonusPopupBody .prizeName {
  font-weight: bold;
}

#adventBonusPopupBody p {
  width: 100%;
  margin: 16px auto;
}

#container__2020 .adventH5Loading {
  width: 64px;
  height: 64px;
  position: absolute;
  margin: auto;
}

#container__2020 #adventH5Wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: auto;
  min-height: 200px;
  overflow-x: auto;
  height: max-content;
  position: relative;
}

#container__2020 #adventH5VideoWrapper {
  max-width: 800px;
  max-height: 582px;
  width: 100%;
  position: relative;
  margin: auto;
}

#container__2020 .adventH5 {
  width: 100%;
  position: relative;
  max-width: 600px;
}

#container__2020 .adventH5Image {
  min-height: 200px;
  width: 100%;
  max-width: 600px;
  /*padding-top: 100px;*/
  /*margin: 0 auto 150px;*/
  margin: 0 auto;
  border-image-slice: 100 100 100 100 fill;
  border-image-width: 100px 100px 100px 100px;
  border-image-repeat: stretch stretch;
  border-image-source: url(AC2022_Border.png);

}

#container__2020 .adventH5ImageWritings {
    min-height: 200px;
    width: 100%;
    max-width: 600px;
    /*padding-top: 100px;*/
    /*margin: 0 auto 150px;*/
    margin: 0 auto;
    border-image-slice: 100 100 100 100 fill;
    border-image-width: 100px 100px 100px 100px;
    border-image-repeat: stretch stretch;
    border-image-source: url(storybacking.svg);
}

#container__2020 .adventH5Img {
  /*border-image-slice: 100 100 100 100 fill;
	border-image-width: 100px 100px 100px 100px;
	border-image-outset: 80px 80px 80px 80px;
	border-image-repeat: stretch stretch;
	border-image-source: url(AC2022_Border.png);
	max-width: 50%;*/
  display: block;
  width: 100%;
  padding: 100px;
  box-sizing: border-box;
  box-shadow: none;
  margin: auto;
  position: relative;
}

#container__2020 .adventH5ComicImage {
  min-height: 200px;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
}

#container__2020 .adventH5ComicImg {
  display: block;
  width: 100%;
  box-sizing: border-box;
  box-shadow: none;
  margin: auto;
  position: relative;
}

#container__2020 .adventH5ImageGif {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

@media screen and (max-width: 300px) {
  #container__2020 #adventH5Wrapper {
    align-items: unset;
    width: 100%;
  }

  #container__2020 .adventH5,
  #container__2020 .adventH5Video {
    min-width: 300px;
    align-self: start;
  }

  #container__2020 .adventH5Loading {
    align-self: center;
  }
}

.advent-popup-exit {
  width: 40px;
  height: 35px;
  position: absolute;
  right: 5px;
  top: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.advent-popup-exit-icon {
  background: url(/themes/h5/basic/images/x-icon.svg) center center no-repeat;
  background-size: contain;
  width: 18px;
  height: 20px;
  margin: 5px auto auto;
}

#adventLoginPopup {
  width: 550px;
  height: 260px;
  top: 40%;
  background: url(/winter/advent/2011/popup/bg.png) 0 0 no-repeat;
}

#adventLoginPopup .popup-header__2020,
#adventLoginPopup .popup-body__2020,
#adventLoginPopup .popup-footer__2020 {
  background: none;
}

#adventLoginPopup .popup-body__2020 {
  padding: 0;
  height: inherit;
}

#adventLoginPopup #loginText {
  position: absolute;
  width: 330px;
  height: 180px;
  top: 20px;
  left: 185px;
  text-align: center;
}

#adventLoginPopup .advent-popup-exit {
  width: 35px;
  height: 35px;
  position: absolute;
  right: 5px;
  top: 20px;
  border-radius: 50%;
}

#adventLoginPopup .popup-body__2020 h3 {
  font-size: 1.5em;
  font-weight: bold;
  font-family: "Cafeteria", "Arial Bold", sans-serif;
  margin: 0.1em auto 0.5em;
}

#adventLoginPopup .popup-body__2020 p {
  font-size: 11pt;
  font-family: "MuseoSansRounded500", "Arial", sans-serif;
}

#adventOrionPrizesPopup .popup-prize {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

#adventOrionPrizesPopup .popup-prizes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

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

.faq-button__2020 {
  width: 35px !important;
  height: 35px !important;
  position: absolute !important;
  right: 10px;
  top: 2px;
  border-radius: 50% !important;
}

.adventH5Image .adventH5Writings {
  width: 70%;
  padding: 90px;
  margin: auto;
  text-align: center;
  /*font-size: 11pt;*/
  /*font-family: "MuseoSansRounded500", 'Arial', sans-serif;*/
}

.adventH5ImageWritings .adventH5Writings {
    width: 70%;
    padding: 90px;
    margin: auto;
    text-align: center;
    /*font-size: 11pt;*/
    /*font-family: "MuseoSansRounded500", 'Arial', sans-serif;*/
}

.adventH5ImageWritings .adventH5Writings .adventH5Writing {
  text-indent: 2em;
}

.adventH5Image .adventH5Writings .adventH5Writing {
    text-indent: 2em;
}

.adventH5Image .adventH5Writings .adventH5Writing:not(:last-child) {
  margin-bottom: 10px;
}

.adventH5ImageWritings .adventH5Writings .adventH5Writing:not(:last-child) {
    margin-bottom: 10px;
}

.adventH5Image .adventH5Writings .adventH5Writing.textItalic {
  font-style: italic;
}

.adventH5ImageWritings .adventH5Writings .adventH5Writing.textItalic {
    font-style: italic;
}

.adventH5Image .adventH5Writings .adventH5Writing.compressedLine {
  margin: 5px auto !important;
}

.adventH5ImageWritings .adventH5Writings .adventH5Writing.compressedLine {
    margin: 5px auto !important;
}

.adventH5Image .adventH5Writings .adventH5Writing.textRed {
  color: #DC143C;
}

.adventH5ImageWritings .adventH5Writings .adventH5Writing.textRed {
    color: #DC143C;
}

.textRed {
  color: #DC143C;
}

#adventPrizePopup .togglePremiumPrizes {
    font-family: "MuseoSansRounded500", 'Arial', sans-serif;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin: auto;
    text-align: center;
    gap: 10px;
}

.switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 23px;
}

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

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 15px;
    width: 15px;
    left: 5px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
}

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

input:focus + .slider {
    box-shadow: 0 0 1px #2196F3;
}

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

/* Rounded sliders */
.slider.round {
    border-radius: 34px;
}

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