/* julius-sans-one-regular - latin */
@font-face {
   font-family: "Julius Sans One";
   font-style: normal;
   font-weight: 400;
   src: local(""), url("../assets/fonts/julius.woff2") format("woff2"),
      /* Chrome 26+, Opera 23+, Firefox 39+ */ url("../assets/fonts/julius.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* roboto-regular - latin */
@font-face {
   font-family: "Roboto";
   font-style: normal;
   font-weight: 400;
   src: local(""), url("../assets/fonts/roboto.woff2") format("woff2"),
      /* Chrome 26+, Opera 23+, Firefox 39+ */ url("../assets/fonts/roboto.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* raleway-regular - latin */
@font-face {
   font-family: "Raleway";
   font-style: normal;
   font-weight: 400;
   src: local(""), url("../assets/fonts/raleway.woff2") format("woff2"),
      /* Chrome 26+, Opera 23+, Firefox 39+ */ url("../assets/fonts/raleway.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/*
FONTS
font-family: 'julius', sans-serif;
*/

html,
body {
   margin: 0;
   padding: 0;
   padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
   width: 100%;
   height: 100vh;
   font-family: "Raleway", "Arial", sans-serif;
   font-size: 16px;
   color: rgba(30, 20, 10, 0.9);
   background: black;

   -ms-overflow-style: -ms-autohiding-scrollbar;
}

a {
   color: #6a9e03;
   text-decoration: none;
}

#cover {
   position: absolute;
   left: 0;
   top: 0;
   z-index: 99;
   background: black;
   width: 100%;
   height: 2000px;
}

/* Positionierung des Hintergrundbildes */
#bgWrapper {
   background-size: cover;
   background-position: bottom left;
   background-repeat: no-repeat;
   background-image: url(../images/bgFull.jpg);
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100vh;
}

.wrapper {
   width: 100%;
   padding: 0 12px;
   margin: 0 auto;
   text-align: center;
}

.wrapper ul li,
.wrapper ol li {
   text-align: left;
   padding-bottom: 3px;
}
.wrapper ul,
.wrapper ol {
   margin-left: 0;
   padding-left: 1.3em;
   font-size: 90%;
}

.page {
   position: absolute;
   left: 0;
   top: 0;
   width: 100%;
   height: 88vh;
   overflow-y: scroll;
   z-index: 1;
}

#popup {
   z-index: 3;
}

h2 {
   font-family: "Raleway", sans-serif;
   text-align: center;
   margin-bottom: 0;
}

.wrapper > h2 {
   backdrop-filter: blur(3px);
   -webkit-backdrop-filter: blur(3px);
}

label {
   font-family: "Julius Sans One", sans-serif;
   display: inline-block;
   font-size: 16px;
   font-weight: bold;
   text-transform: uppercase;
   opacity: 0.85;
  
   color: rgba(255, 255, 255, 0.95);

   padding: 3px 6px;
   margin: 6px 0;

   backdrop-filter: blur(8px);
   -webkit-backdrop-filter: blur(8px);

}

* {
   box-sizing: border-box;
}

.sliderVal {
   float: right;
   text-transform: none;
   font-size: 80%;
   letter-spacing: 2px;
}

#boxCountIn {
   font-family: "roboto", sans-serif;
   position: absolute;
   top: 50%;
   left: 50%;
   aspect-ratio: 1 / 1; /* Keeps the box square */
   transform: translate(-50%, -50%);
   width: 50%; /* Box width is 50% of its container */
   display: flex; /* Use flexbox for centering */
   align-items: center; /* Vertically align text */
   justify-content: center; /* Horizontally align text */
   text-align: center; /* Center align text inside */
   font-size: 120px;
   color: white;
   border-radius: 25px;
   background: rgba(0, 0, 0, 0.6);
   z-index: 9;
}

span.val {
   font-size: 130%;
}

label.xxlight {
   padding: 4px 10px;
   background: rgba(212, 199, 190, 0.6);
}

label#txtInterval {
   float: right;
   font-size: 120%;
   text-transform: none;
}

/* Hide the default checkbox */
.boxCheckbox input[type="checkbox"] {
   display: none;
}

.boxCheckbox label {
   display: block;
}

/* Style for the custom checkbox */
.boxCheckbox div.customCheckbox {
   width: 30px; /* Custom size */
   height: 30px; /* Custom size */
   display: inline-block;
   border: 2px solid white;
   border-radius: 4px; /* Rounded corners */
   background-color: #8f7f6f;
   cursor: pointer;
   position: relative; /* For the checkmark positioning */
   transition: background-color 0.3s, border-color 0.3s; /* Smooth transitions */
}

/* Checked state styles */
.boxCheckbox input[type="checkbox"]:checked + div.customCheckbox {
   background-color: #6a9e03; /* Active color */
}

/* Checkmark styling */
.boxCheckbox div.customCheckbox:after {
   content: '';
   position: absolute;
   top: 4px;
   left: 9px;
   width: 6px;
   height: 12px;
   border: solid #fff;
   border-width: 0 3px 3px 0;
   transform: rotate(45deg);
   display: none;
}

/* Display the checkmark when checked */
.boxCheckbox input[type="checkbox"]:checked + div.customCheckbox:after {
   display: block;
}



.footer {
   width: 100%;
   position: absolute;
   left: 0;
   bottom: 10px;
   opacity: 0.9;
   z-index: 2;
}

#bottomMenu {
   list-style-type: none;
   margin: 0;
   padding: 0;
}
#bottomMenu li {
   float: left;
   width: 25%;
   height: 40px;
   text-align: center;
   color: rgba(255, 255, 255, 0.9);
   cursor: pointer;
}

#bottomMenu img {
   height: 100%;
   opacity: 0.5;
}

#bottomMenu li.active img {
   opacity: 1;
}

#debug {
   position: absolute;
   padding: 10px;
   top: 50%;
   color: rgba(255, 255, 255, 0.8);
   background: rgba(50, 100, 50, 0.8);
   z-index: 99;
}

select,
#boxStatsTotal,
.btnOption {
   display: block;
   width: 100%;
   margin: 0 auto 15px auto;
   padding: 8px;
   background-color: rgba(100, 83, 81, 0.8);
   border: none;
   font-size: 18px;
   color: #d7ccc4;
   box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);

   outline: none;
   -webkit-appearance: none;
   cursor: pointer;
}



.grid2x2 {
   display: grid;
   grid-template-columns: 1fr 1fr;
   grid-template-rows: 1fr 1fr;   /* Two equal rows */
   grid-gap: 20px;
   margin: 25px auto;
}


.btnOption {
   padding: 30px;
   margin: 0;
   border-radius: 20px;
}

.btnOption img {
   display: block;
   width: 60px;
   margin: 15px auto;
}

.btnOption span {
   display: block;
   margin: 0 auto;
}

select option {
   padding: 25px;
}

#boxStatsTotal {
   box-sizing: border-box;
   margin: 30px auto;
   width: 95%;
   text-align: center;
   padding: 10px 25px;
   border-radius: 10px;
   font-size: 40px;
}

/* Viewport styling */
#boxGong {
   width: 225px; /* Scaled frame width */
   height: 250px; /* Scaled frame height */
   overflow: hidden; /* Hide overflowing sprite frames */
   position: relative; /* For centering */
   left: 50%; /* Center horizontally */
   transform: translateX(-50%); /* Adjust centering */
}

/* Sprite element */
.sprite {
   width: 100%; /* Frame width matches the viewport */
   height: 100%; /* Frame height matches the viewport */
   background: url("../images/gongSheet.png") left top no-repeat; /* Sprite sheet */
   background-position: 0 -10250px; /* Start at the last frame (0 -200px) */
   background-size: 225px 10500px; /* Total scaled width of the sprite sheet */
}

.playGong {
   animation: playGong 3s steps(41) forwards; /* Play through all 42 frames in 2 seconds */
}

/* Animation keyframes */
@keyframes playGong {
   from {
      background-position: 0 -10250px; /* Start at the last frame (0 -200px) */
   }
   to {
      background-position: 0 0; /* End at the last frame (8384 -200px) */
   }
}

#boxTime {
   width: 100%;
   margin: 100px auto 65px auto;
}

#time {
   font-family: "Roboto", sans-serif;
   width: 100%;
   text-align: center;
   font-size: 40px;
   color: rgba(30, 20, 10, 0.9);
   text-shadow: -1px 0px 3px rgba(0, 0, 0, 0.4), 1px 0px 0 rgba(255, 255, 255, 0.3);
}

.glass {
   color: rgba(0, 0, 0, 0.5);
   backdrop-filter: blur(5px);
   -webkit-backdrop-filter: blur(5px);
   box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1), 0 -2px 3px rgba(0, 0, 0, 0.05);
}

#time.glass {
   box-sizing: border-box;
   padding: 16px;
   font-weight: bold;

   text-shadow: none;
}

.boxSlider {
   position: relative;
   width: 75%;
   margin: 16px auto;
}

.btnSliderChange,
.btnCloseOption {
   position: absolute;
   top: 36px;
   width: 28px;
   height: 28px;
   background-size: 100% 100%;
   opacity: 0.8;
}

.btnMinusSlider {
   left: -35px;
   background-image: url(../images/sd/btn-minus.png);
   background-size: 100% 100%;
}

.boxBorder {
   border: 1px dotted #8f7f6f;
   padding: 15px;
   border-radius: 15px;
   margin: 16px auto
}

.btnPlusSlider {
   right: -35px;
   background-image: url(../images/sd/btn-plus.png);
}

.btnCloseOption {
   top: -5px;
   right: -5px;
   width: 35px;
   height: 35px;
   background-image: url(../images/sd/btn-close.png);
   opacity: 1;
   border: 2px solid #a64f1f;
   border-radius: 50%;
}

#options .boxSlider {
   margin-top: 0;
}

#options .boxOptions {
   position: absolute;
   left: 3%;
   top: 3%;
   right: 3%;
   padding: 4%;
   width: auto;
   min-height: 200px;
   margin: 0 0 30px 0;
}

.boxOptions h2 {
   margin: 0 0 12px 0;
}

#options label {
   color: rgb(100, 83, 81);
}

#options .sliderVal {
   color: #a64f1f;
}

.wrapper .boxSlider {
   width: 100%;
}

#titel {
   font-size: 25px;

   float: right;
   margin-right: 5%;
   margin-top: 1%;
   color: rgb(22, 89, 22);
}

html head + body .ui-btn.ui-btn-b {
   background-color: transparent;
   border-color: Transparent;
   color: #fff;
   text-shadow: 0 1px 0 #111;
}

#slider3 {
   margin-left: 50%;
   margin-top: 3%;
}

#slider4 {
   margin-left: 50%;
   margin-top: 0%;
}

#buttons {
   margin-left: 50%;
   margin-top: 0%;
   margin-right: 3%;
}

#untertitel {
   font-size: 30px;

   float: right;
   margin-right: 5%;
   margin-top: 0%;
   color: rgb(197, 120, 56);
}

#kreis {
   position: absolute;
   float: left;
   width: 500px;
   height: 500px;
   margin-left: 17%;
   margin-top: -8%;
}

/* TEACHING */

#teachings .content {
   overflow-y: scroll;
   height: calc(90vh - 50px);
}

#teachings .text {
   position: absolute;
   left: 2%;
   top: 55px;
   width: 96%;
   padding: 8%;
   height: calc(80vh - 55px);
   background-image: url(../images/sd/bgPaper.png);
   background-size: cover;
   border-radius: 6px;

   overflow-y: scroll;

   xdisplay: none;
   box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.15);
}

.timestamp {
   display: none;
}

#teachings .lehre h2 {
   font-size: 1.15em;
   text-shadow: -5px 0px 5px rgba(255, 250, 200, 0.5), 5px 0px 5px rgba(255, 250, 250, 0.6);
   font-family: "Julius Sans One", sans-serif;

   xbackground: rgba(255, 255, 255, 0.4);
   backdrop-filter: blur(10px);
   -webkit-backdrop-filter: blur(10px);
   margin-bottom: 0.5em;
   padding: 0.5em;
   cursor: pointer;
   transition: all 3s ease;

   border-image: gradient(linear, left top, right top, from(#00abeb), to(#fff), color-stop(0.5, #fff), color-stop(0.5, #66cc00)) 21 30 30 21 repeat repeat;

   background-image: url(../images/sd/line-fade.png);
   background-repeat: no-repeat;
   background-position: center top;
   background-size: 100% 1px;
   will-change: backdrop-filter;
}

@keyframes blur {
   from {
      backdrop-filter: blur(0px);
      -webkit-backdrop-filter: blur(0px);
   }
   to {
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
   }
}

#teachings .text h3.title {
   margin-top: 0;
}

#boxButtons {
   position: absolute;
   left: 10px;
   top: 10px;
   width: 26px;
   height: 60px;
   z-index: 9;
}

.icon {
   display: block;
   font-size: 28px;
   color: rgba(100, 83, 81, 0.8);
   margin-bottom: 12px;
   opacity: 0.8;
   cursor: pointer;
}

#boxMT {
   writing-mode: vertical-rl;
   position: absolute;
   top: 18px;
   right: 10px;
   font-family: "Julius Sans One", sans-serif;
   font-size: 1.3em;
   color: rgba(255, 255, 255, 0.8);
}

/* guided */
.bgPaper {
   margin-top: 12px;
   padding: 7%;
   width: 100%;
   background-image: url(../images/sd/bgPaper.png);
   background-size: cover;
   box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.2), 0 0 300px black;
}

.bgPaper h2:first-child {
   margin: 0 0 8px 0;
   text-align: center;
}

.boxGuided {
   text-align: left;
}

.boxGuided h3 {
   margin: 6px 0;
}

.boxGuided h5 {
   margin: 0;
   color: rgba(200, 100, 40, 1);
}
.buyItem {
   color: rgba(255, 255, 255, 0.8);
   text-align: left !important;
}
.buyItem i {
   color: white;
   float: left;
   margin: 0 10px 0px 0;
}
.buyItem .price {
   font-weight: bold;
   color: white;
}

.boxGuided audio {
   width: 100%;
   zoom: 1.3;
}

.boxBuy {
   padding: 10px;
   background: rgba(100, 80, 80, 0.2);

   backdrop-filter: blur(10px);
}

.boxGuided h4.preview {
   text-align: center;
   margin: 6px 0 0 0;
   padding: 6px 0;
   background-image: url(../images/sd/line-fade.png);
   background-repeat: no-repeat;
   background-position: center top;
   background-size: 100% 1px;
}

.boxDesc {
   font-size: 85%;
}

.boxGuided h4 {
   /* beschreibung */
   margin: 6px 0px 0 0;
   padding-left: 16px;
   opacity: 0.6;
   text-align: left;
}

.arrowRight,
.arrowDown {
   background-image: url(../images/sd/arrowRight.png);
   background-repeat: no-repeat;
   background-position-y: 2px;
}
.arrowDown {
   background-image: url(../images/sd/arrowDown.png);
   background-position-y: 5px;
}

.hidden {
   display: none !important;
}

.line3 {
   width: 100%;
   height: 6px;
}

#boxStars {
   display: block;
   clear: both;
   text-align: center;
}

#boxStars img {
   width: 15%;
   margin: 1%;
   display: inline-block;
}

hr {
   display: block;
   clear: both;
   margin: 12px 0;
   border: none;
   height: 1px;
   background: rgba(155, 147, 134, 0.7);
}

hr.hand {
   width: 100%;
   height: 6px;
   background: none;
   background-image: url(../images/sd/line.png);
   background-repeat: no-repeat;
   background-size: cover;
   background-position-x: center;
}

input {
   font-size: 1.2em;
}

.btn,
.btn1 {
   font-size: 1.2em;
   display: block;
   padding: 9px 12px;
   text-align: center;
   margin: 10px;
   background: #6a9e03;
   color: rgba(255, 255, 255, 0.9);
   border-radius: 3px;
}

.btn2 {
   display: block;
   background: none;
   color: rgba(100, 90, 80, 1);
   border: 1px solid rgba(155, 147, 134, 1);
   border-radius: 3px;
}

.btn3 {
   color: #a65020;
   border: 1px solid #a65020;
   background: none;
}

.center {
   text-align: center;
}

#previewDim {
   color: white;
   box-sizing: border-box;
   width: 100%;
   margin-top: -15px;
   border-radius: 100px;
   border: 1px solid rgba(255, 255, 255, 0.6);
   background: #392315;
   opacity: 0.5;
   text-align: center;
   padding: 10px;
}

.small {
   font-size: 15px;
   opacity: 0.8;
}

p.small {margin: 0}

.green {
   color: #6a9e03;
   font-weight: bold;
   background: rgba(255, 255, 255, 0.2);
   padding: 2px 6px;
   border-radius: 4px;
}

option.new {
   color: #66cc00;
}

.invalid {
   border: 1px solid crimson;
}

#msg {
   position: absolute; 
   left: 5%;
   right: 5%;
   top: 5%; 
   padding: 15px;
   background: rgba(100, 83, 81, 0.94);
   color: orange;
   z-index: 6
}

 .boxMsg {
   padding: 12px;
   margin: 10px 0;
   background-color: rgba(100, 83, 81, 0.8);
   color: orange;
}


.donateTable {
   width: 100%;
   margin: 10px auto;
   padding: 0;
   border-collapse: collapse;
   border-spacing: 5px;

}

.donateTable th {
   padding: 6px 8px;
   background: rgba(100, 83, 81, 0.94);
   color: white;
}

.donateTable td {
   padding: 4px 8px;
   border: 1px solid rgba(100, 83, 81, 0.94);
}

.boxLoadBar {
   width: 100%;
   height: 28px;
   line-height: 28px;
   font-size: 110%;
   background: rgba(100, 83, 81, 0.8);
   color: white;
   border-radius: 4px;
   margin: 20px 0;
}