[touch-action="none"]{ -ms-touch-action: none; touch-action: none; touch-action-delay: none; }
[touch-action="auto"]{ -ms-touch-action: auto; touch-action: auto; touch-action-delay: none; }
[touch-action="pan-x"]{ -ms-touch-action: pan-x; touch-action: pan-x; touch-action-delay: none; }
[touch-action="pan-y"]{ -ms-touch-action: pan-y; touch-action: pan-y; touch-action-delay: none; }
[touch-action="pan-x pan-y"],[touch-action="pan-y pan-x"]{ -ms-touch-action: pan-x pan-y; touch-action: pan-x pan-y; touch-action-delay: none; }
body,html{width:100%;height:100%;padding:0;margin:0;overflow:hidden;position:fixed;font-family:"Segoe WP","Segoe UI",Verdana,Arial;touch-action:none;-ms-touch-action:none}
.warning{color:red}
#fps{position:absolute;left:20px;top:1em;font-size:20px;color:#fff;text-shadow:2px 2px 0 #000}
#stats{position:absolute;right:20px;top:11em;font-size:14px;color:#fff;text-align:right;text-shadow:2px 2px 0 #000}
#status{position:absolute;right:20px;top:15em;font-size:14px;color:#fff;text-shadow:2px 2px 0 #000}
a{color:#000;text-decoration:none}
a:hover{text-decoration:underline}
a:visited{color:#fff}
button{border:1px solid #888;background-color:#dedede;color:#888}
button:hover{background-color:#eee}
button:active{transform:scale(.98);-webkit-transform:scale(.98)}
#notSupported{color:red;width:100%;height:60px;position:absolute;top:50%;margin-top:-30px;background-color:#eee;border:1px solid #888;text-align:center;padding-top:10px;font-size:30px;z-index:3;cursor:default}
#renderCanvas{width:100%;height:100%;outline:0}
.hidden{display:none}
@-webkit-keyframes spin1 {0% { -webkit-transform: rotate(0deg);}100%{ -webkit-transform: rotate(360deg);}}                
@keyframes spin1 {0% { transform: rotate(0deg);}100% { transform: rotate(360deg);}}
#mensaje{position:absolute;right:20px;top:10em;font-size:20px;color:#fff;text-shadow:2px 2px 0 #000}
#loadingScreen {
    position: fixed;
    inset: 0;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999999;
    transition: opacity 0.8s ease-out;
}

.loader-content {
    text-align: center;
    width: 100%;
    max-width: 400px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.loader-logo {
    width: 240px;
    height: auto;
    margin-bottom: 0px;
    position: relative;
}

.loader-logo img {
    width: 100%;
    height: auto;
    object-fit: contain;
    animation: pulse-logo 2.5s infinite ease-in-out;
}

@keyframes pulse-logo {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.02); opacity: 0.9; }
}

.loader-title {
    color: #1a1a2e;
    font-size: 24px;
    font-weight: 300;
    margin: -10px 0 8px 0;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-family: 'Inter', sans-serif;
    opacity: 0.8;
}

.loader-title span {
    color: #0066ff;
    font-weight: 600;
}

.loader-status {
    color: #666666;
    font-size: 14px;
    margin-top: 16px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.loader-progress-container {
    width: 200px;
    height: 4px;
    background: #eeeeee;
    border-radius: 10px;
    overflow: hidden;
    margin-top: 24px;
}

.loader-progress-bar {
    width: 40%;
    height: 100%;
    background: linear-gradient(90deg, #0066ff, #00f2ff);
    border-radius: 10px;
    animation: loader-progress 2s infinite ease-in-out;
}

@keyframes loader-progress {
    0% { transform: translateX(-100%); width: 30%; }
    50% { width: 60%; }
    100% { transform: translateX(200%); width: 30%; }
}

.center {display: block;margin-left: auto;margin-right: auto;width: 75%;}
.center2 {display: block;margin-left: auto;margin-right: auto;width: 90%;}
.content {position: absolute;left: 50%;top: 50%;-webkit-transform: translate(-50%, -50%);transform: translate(-50%, -50%);}
.content2 {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  background-color: black;
  color: white;
  opacity: 0.8;
  cursor: not-allowed;
  caret-color: rgba(0,0,0,0);
  padding: 20px;
  border: 3px solid rgb(42, 42, 42, 0.8);
  border-radius:  1.5rem 1.5rem 1.5rem 1.5rem;
  text-align:center;
  z-index: 99;
}
@media (orientation: landscape) {
  .content2 h2 {
    margin: 0rem;
  }
  .center2{
      width: auto;
  }
  br{
      display: none;
  }
}
.multi-spinner-container {width: 150px;height: 150px;position: relative;margin: 30px auto;overflow: hidden;}
.multi-spinner {position: absolute;width: calc(100% - 9.9px);height: calc(100% - 9.9px);border: 5px solid transparent;border-top-color: #ff5722;border-radius: 50%;-webkit-animation: spin 5s cubic-bezier(0.17, 0.49, 0.96, 0.76) infinite;animation: spin 5s cubic-bezier(0.17, 0.49, 0.96, 0.76) infinite;}
@-webkit-keyframes spin {from {-webkit-transform: rotate(0deg);transform: rotate(0deg);}to {-webkit-transform: rotate(360deg);transform: rotate(360deg);}}
@keyframes spin {from {-webkit-transform: rotate(0deg);transform: rotate(0deg);}to {-webkit-transform: rotate(360deg);transform: rotate(360deg);}}
#me {-webkit-animation: rotation 2s infinite linear;}   
@-webkit-keyframes rotation {from {-webkit-transform: rotate(0deg);}to   {-webkit-transform: rotate(359deg);}}
#buttonx {
  border-radius: 1.5rem 1.5rem 1.5rem 1.5rem;
  color:#444;
  font-size:20px;
  height: 2.7rem;
}
@keyframes load {
  0%{
      opacity: 0.08;
      filter: blur(5px);
      letter-spacing: 3px;
      }
  100%{
      }
  }
  .animate {
      display:flex;
      justify-content: center;
      align-items: center;
      height:15%;
      margin: auto;
      font-family: Helvetica, sans-serif, Arial;
      animation: load 1.2s infinite 0s ease-in-out;
      animation-direction: alternate;
      text-shadow: 0 0 1px white;
  }
  .center {
      display: block;
      margin-left: auto;
      margin-right: auto;
      width: 100%;
  }

input[type="text" i] {
  padding: 1px 2px;
  caret-color: #333333;
} 

/* Session Timer Styles */
.session-timer-container {
    position: absolute;
    top: 24px;
    right: 24px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    z-index: 1000;
}

.time-left-container {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    background: rgba(45, 45, 60, 0.95);
    backdrop-filter: blur(10px);
    padding: 8px 16px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    font-family: 'Poppins', sans-serif;
}

.time-left-label {
    font-family: 'Poppins', sans-serif;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 600;
}

.time-left-value {
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    color: #fff;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}

.session-timer {
    display: flex;
    align-items: center;
    background: rgba(45, 45, 60, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 4px;
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    transition: all 0.2s;
    font-family: 'Poppins', sans-serif;
}

.timer-content {
    padding: 4px 12px;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.timer-display {
    display: flex;
    align-items: baseline;
    gap: 4px;
    color: white;
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    font-weight: 600;
}

.timer-label {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.6);
    margin-right: 4px;
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
}

.timer-add-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #4ade80;
    background: transparent;
    border: none;
    cursor: pointer;
    border-radius: 8px;
}

.timer-add-btn:hover {
    background: rgba(74, 222, 128, 0.1);
}

.timer-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 8px;
    background: rgba(45, 45, 60, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 8px;
    min-width: 200px;
    backdrop-filter: blur(10px);
    font-family: 'Poppins', sans-serif;
}

.timer-dropdown.hidden {
    display: none;
}

.timer-dropdown-item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    color: white;
    background: transparent;
    border: none;
    cursor: pointer;
    border-radius: 8px;
    font-size: 14px;
    text-align: left;
    font-family: 'Poppins', sans-serif;
}

.timer-dropdown-item:hover {
    background: rgba(255, 255, 255, 0.1);
}