@font-face {
  font-family: "Open Sans Regular";
  src: url(/assets/fonts/OpenSans-Regular.woff2) format("woff2");
}

@font-face {
  font-family: "OpenSans Semibold";
  src: url(/assets/fonts/OpenSans-Semibold.woff2) format("woff2");
}


@font-face {
  font-family: "Vazir";
  src: url(/assets/fonts/Vazir.ttf) format("truetype");
}

@font-face {
  font-family: "Vazir-Medium";
  src: url(/assets/fonts/Vazir-Medium.ttf) format("truetype");
}

* {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

html {
  overflow: hidden;
  -webkit-user-select: none; 
  user-select: none;
}

body {
  font-family: "Open Sans Regular";
  overflow: hidden;
  -webkit-text-stroke: 0px !important;
  -webkit-font-smoothing: antialiased !important;
  height: 100vh;
  margin: 0;
  image-rendering: -webkit-optimize-contrast;
  color: #777;
}

img {
  transform: translateZ(0) scale(0.9999999999);
}

@media screen and (-webkit-min-device-pixel-ratio:0) and (min-resolution:.001dpcm) {
  img { image-rendering: -webkit-optimize-contrast !important; }
}

@media not all and (min-resolution:.001dpcm) { 
  @supports (-webkit-appearance:none) and (stroke-color:transparent) {
    img { image-rendering: unset !important; }
  }
}







.menu {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 200%;
  height: 100%;
  z-index: 100;
  opacity: 1;
  transition: opacity 1s ease;
  left: -50%;
  background: url(https://www.porsanesh.com/app/img/hexellence.png) #eee7fc;
}


.menu .head {
  /*position: absolute;*/
  margin: 0;
  /*left: 130px;
  top: 48px;*/
  text-shadow: 0px 1px 1px #fefdffd4;
  color: #80799eed;
  transform: translateY(0px);
  opacity:0;
}

.title-container {
  display: none;
  width: 1536px;
  height: 670px;
  grid-template-columns: repeat(7, 1fr);
  gap: 0px;
  position: relative;
  z-index: 1;
  transform: translateY(20px);
}

.title-container .back .name {
  font-size: 20px;
  color: #9376f1;
  font-family: "OpenSans Semibold";
}

.title-container .back .description {;
  line-height: 142%;
  color: #3a353e;
  font-family: "Open Sans Regular";
  font-size: 15px;
  text-align: justify;
  margin-top: 0;
}

.title-container .back .description span {
  display: block;
  direction: rtl;
  margin: -3px;
  font-size: 12px;
  text-align: right;
}

.title > .front,
.title > .back {
  display: block;
  transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition-duration: 0.75s;
  transition-property: transform, opacity;
  will-change: transform, opacity;
}

.title > .front {
  transform: rotateY(0deg);
}

.title > .back {
  position: absolute;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  opacity: 0;
  top: 0px;
  left: 0px;
  transform: rotateY(-180deg);
  background: linear-gradient(0deg, rgb(108 6 222 / 95%), rgb(174 103 255 / 71%)), url(/app/img/questions/mcq.png);
}

.title:not(.clicked):hover > .front {
  transform: rotateY(180deg);
}

.title:not(.clicked):hover > .back {
  opacity: 1;
  transform: rotateY(0deg);
}

.title.clicked > .front {
  transform: rotateY(180deg);
}

.title.clicked > .back {
  opacity: 1;
  transform: rotateY(0deg);
  background: linear-gradient(0deg, rgb(108 6 222), rgb(174 103 255 / 92%));
}

.title-container .clicked .back .name {
  color: #4d286e;
}

.title-container .clicked .back .description {
  color: #000000;
}

.title {
  position: relative;
  display: inline-block;
  cursor: pointer;
  margin: 5px;
  user-select: none;
  opacity: 0;
  width: 208px;
}

.title .title-title {
  font-size: 20px;
  font-weight: 200;
}

.title > .front,
.title > .back {
  height: 135px;
  border-radius: 10px;
  padding: 10px 6px;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  box-shadow: 0px 1px 4px 2px #3e374399;
  box-shadow: 0px 1px 3px 1px #4c4c4cb8;
  background: linear-gradient(#f6f6f65c, #e4e0e645, #cdc8dd82, #f5f2f261, #cbc3d400);
  text-shadow: 0px 1px 1px #fefdffd4;
  color: #80799eed;
}

.title > .back {
  background-position: center center !important;
  background: linear-gradient(#e7e0f2, #dfdaed, #cfc9e0, #dfd8ed, #e2daf3);
}


.title .front .icon {
  font-size: 50px;
  height: 70px;
  color: #9777e6;
  text-shadow: 0px 1px 2px #353239e6;
}

.title .front .text {
  font-family: "OpenSans Semibold";
  transform: translateY(8px);
}

.title .front .sub {
  font-family: "Open Sans Regular";
  font-size: 12px;
  text-align: center;
  margin-top: 15px;
}

.fadeDownMovie {
  -webkit-animation-name: fadeInMovie;
  animation-name: fadeInMovie;
  -webkit-animation-duration: 1.4s;
  animation-duration: 1.4s;
  animation-delay: 1.5s; /* delay */
  animation-fill-mode: forwards;
}

.fadeInMovie {
  -webkit-animation-name:fadeInMovie;
  animation-name:fadeInMovie;
  -webkit-animation-duration:0.5s;
  animation-duration:0.5s;
  animation-fill-mode: forwards;
}

@-webkit-keyframes fadeInMovie {
  0%{
    opacity:0;
    transform: translateY(-3%);
    -webkit-transform:translateY(-3%);
  }
  to{
    opacity:1;
    transform: translateY(3%);
    -webkit-transform:translateY(3%);
  }
}

@keyframes fadeInMovie {
  0%{
    opacity:0;
    transform: translateY(-3%);
    -webkit-transform:translateY(-3%);
  }
  to{
    opacity:1;
    transform: translateY(3%);
    -webkit-transform:translateY(3%);
  }
}

@keyframes fadeDownMovie {
  0%{
    opacity:0;
    transform: translateY(-5%);
    -webkit-transform:translateY(-5%);
  }
  to{
    opacity:1;
    transform: translateY(3%);
    -webkit-transform:translateY(3%);
  }
}





.title > .front {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
}













































































.scale-container {
  width: 1536px;
  height: 864px;
  text-align: center;
  position: relative;
  left: 50%;
  transform-origin: center center;
  z-index: 1;
}

#avatar {
  width: 810px;
  height: 810px;
  transform: translate(-210px, 55px);
  pointer-events: none;
}

.textarea-box {
	position: absolute;
  bottom: 20px;
  right: -50px;
  width: 1104px;
  display: flex;
  justify-content: flex-start;
}

.textarea-box textarea {
  font-family: "OpenSans Semibold";
  width: 100%;
  height: 102px;
  padding: 4px 115px 2px 10px;
  font-size: 25px;
  border-radius: 9px;
  border: none;
  background: #ffffff;
  resize: none;
  outline: none;
  transition: all .25s ease;
  /*color: #6e6679;*/
  color: #807aa9;
}

.textarea-box textarea::placeholder {
  color:#b2a9c8;
}

.prompt {
  height: 100%;
  transform: translateX(-108px);
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.prompt .indicator-container {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 20%;
  right: 82%;
  z-index: 1;
}

.prompt .record-dot {
  opacity: 0;
  background-color: #b70000;
  box-shadow: #e20000 0px 0px 8px 2px;
  height: 13px;
  width: 13px;
  border-radius: 4px;
  position: absolute;
}

.prompt .record-dot-container {
  position: absolute;
  background-color: #302c38;
  z-index: 2;
  height: 11px;
  width: 11px;
  border-radius: 4px;
  position: absolute;
}

.prompt.disable .btn {
  filter: grayscale(0.85);
}

.prompt:not(.disable) .btn {
  filter: grayscale(0); 
}

.prompt[data-mode="mic"]:not(.disable) .record-dot-container {
  background-color: #ff007e;
  box-shadow: inset #c70202 0px -3px 2px 1px;
}

.prompt[data-mode="mic"]:not(.disable) .record-dot {
  animation: record-ready 1.65s ease infinite;
}

@keyframes record-ready {
  50% { opacity: 1; }
}

.prompt.active .btn {
  box-shadow: rgb(0 0 0 / 65%) 0px 0px 3px 1px, rgba(0, 0, 0, 0.22) 0px -2px 15px inset !important;
  background: linear-gradient(rgb(155 79 235), rgb(54 11 108)) !important;
}

.prompt.active[data-mode="mic"] .record-dot-container {
  background-color: #39ff00;
  box-shadow: inset #02a1c7 0px 0px 2px 1px;
  height: 12px;
  width: 12px;
}

.prompt.active[data-mode="mic"] .record-dot {
  opacity: 1;
  background-color: #00b722;
  box-shadow: #0fe200 0px 0px 8px 3px;
  height: 10px;
  width: 10px;
}

.prompt.active .btn p {
  font-size: 0.76em;
}

.prompt.active .record {
  transform: scale(0.95);
}

.prompt .btn {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 108px;
  width: 120px;
  overflow: hidden;
  border-radius: 13px;
  border-top-left-radius: 0px;
  border-bottom-left-radius: 37px;
  transition: filter 0.4s ease;
}

.prompt .btn::before {
  content: "";
  opacity: 0.35;
  top: 0px;
  left: 0px;
  bottom: 0px;
  right: 0px;
  position: absolute;
  background-image: url(/assets/images/hexellence-dark.png);
}

.prompt .btn p {
  color: rgb(185, 183, 183);
  font-family: "OpenSans Semibold";
  font-size: 0.8em;
  margin-top: 62px;
  z-index: 1;
  transition: opacity 0.3s ease-in-out;
  opacity: 0.5;
}

mobile .prompt .btn p {
  font-size: 0.9em;
  margin-top: 68px;
}

.prompt:not(.disable) .btn p {
  opacity: 1;
}




.prompt .btn svg {
  opacity: 0;
  transform: translateY(-30px);
  transition: opacity 0.35s ease, transform 0.35s ease;
  position: absolute;
}

.prompt[data-mode="mic"] .btn .record {
  opacity: 1;
  transform: translateY(-13px);
}

.prompt[data-mode="push"] .btn .arrow-up {
  opacity: 1;
  transform: translateY(-13px);
}

.taskbar {
  position: absolute;
  left: -50%;
  width: 200%;
  height: 58px;
  z-index: 99;
}

.info-container {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  position: absolute;
  width: 500px;
  right: 794px;
  top: 10px;
  transform: scale(0.9);
}

.coins-container {
  width: 148px;
  font-size: 1.3em;
  font-family: "OpenSans Semibold";
  display: flex;
  justify-content: center;
  align-items: center;
}

.coins-container img {
  width: 27%;
  z-index: 33;
  transform: translate(-25px, -1px);
}

.coins-container p {
  z-index: 33;
  transform: translate(-6px, -1px);
  margin: 0;
  text-shadow: 0px 0px 2px #0002c3b5;
}

#diamond-count {
  color: #0389d7;
  text-shadow: 0px 0px 2px #0002c3b5;
}

#coins-count {
  color: #ff6b00;
  text-shadow: 0px 0px 2px #c46c00b5;
}

.info-container .rectangle {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  background: #d4cedb63;
  border-radius: 10px;
  box-shadow: inset -1px 1px 2px 1px rgb(114 110 119 / 34%);
  height: 32px;
}

.stopwatch-container {
  width: 165px;
  transition: all 0.3s ease;
  color: #d3d0c9;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  z-index: 345;
}

.stopwatch-container img {
  width: 23%;
  z-index: 33;
  transform: translate(-22px, -5px);
}

.display-stopwatch {
  font-size: 19px;
  font-family: 'Open Sans Regular', sans-serif;
  transform: translateX(-10px);
  color: #e81300;
  text-shadow: 0px 0px 2px #be00009c;
}

.stopwatch-numbers {
  width: 100%;
  text-align: center;
}

body.dark {
  background: #474747 url('/assets/images/bg_gray.jpg');
}

body.light {
  background: #ffffff00 url(/assets/images/hexellence-opacity.png);
  background: #baaadc24 url(/assets/images/hexellence.png);
}

body.dark .taskbar.dark {
  background: #524c4c4f;
  box-shadow: 0px 0px 4px 0px #000000;
}

body.light .taskbar {
  background: #be9eff00;
  /*box-shadow: rgb(118 117 124 / 72%) 0px 0px 6px 1px;*/
  box-shadow: rgb(66 62 87 / 63%) 0px 0px 6px 1px;
}

body.dark .prompt path {
  fill: #303030;
}

body.light .prompt path {
  fill: #9975c6;
}

body.light .prompt .btn {
  box-shadow: rgb(0 0 0 / 78%) 0px 2px 6px 2px, rgba(0, 0, 0, 0.25) 0px 10px 10px;
  background: linear-gradient(rgb(175 99 255), rgb(64 21 118));
}

body.dark .prompt .btn {
  box-shadow: rgba(0, 0, 0, 0.78) 0px 2px 6px 2px, rgba(0, 0, 0, 0.25) 0px 10px 20px;
  background: linear-gradient(rgb(80 77 87), rgb(29 27 33));
}

body.dark .textarea-box textarea {
  box-shadow: rgba(82, 77, 86, 0.75) 0px 0px 1px 8px, rgb(17, 17, 17) 0px 2px 2px inset, rgb(57, 55, 60) 0px -3px 3px inset;
}

body.light .textarea-box textarea {
  box-shadow: 0 0px 1px 8px rgb(178 166 187 / 75%), inset 0 2px 2px #9f93ae, inset 0 -2px 4px #494352a1, inset 3px 0px 4px #49435254;
  box-shadow: 0px 1px 4px 1px #4c4c4c96;
  background: linear-gradient(#f6f6f663, #e4e0e645, #ffffff9c, #f5f2f261, #cbc3d485);
}

.left-scroll {
  direction: rtl;          
  text-align: left;        
  unicode-bidi: plaintext; 
  width: 300px;
  height: 150px;
  padding: 10px;
  font-size: 14px;
  border-radius: 10px;
  border: 1px solid #ccc;
  resize: vertical;
}

.left-scroll::placeholder,
.left-scroll * {
  direction: ltr;
}

.left-scroll::-webkit-scrollbar {
  width: 8px;
}

.left-scroll::-webkit-scrollbar-track {
  border-radius: 20px;
}

.left-scroll::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #8b5cff, #8b7cff);
  border-radius: 10px;
}

.left-scroll::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #ffbd46, #ffa400);
}

.chat::-webkit-scrollbar {
  width: 6px;
}

.chat::-webkit-scrollbar-track {
  border-radius: 20px;
  box-shadow: inset 0 0 4px 1px #7664b28f;
}

.chat::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #8f70ff, #8a6aff);
  border-radius: 20px;
}

.chat::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #ffbd46, #ffa400);
}

.progress {
  position: absolute;
  font-family: "Open Sans Regular";
  top: 72px;
  left: 120px;
  width: 240px;
  box-shadow: inset 0px 2px 3px -1px rgb(12 12 12 / 84%);
  font-size: 1.2em;
  height: 22px;
  background: #6967924f;
  border-radius: 5px;
  border: 1px dashed #2b2a4780;
  display: none;
}

.progress--active .progress__bar {
  opacity: 1;
  height: 20px;
  transform: translateY(1px);
}

.progress__text {
  width: 200px;
  position: absolute;
  left: 0;
}

.progress__text em {
  font-style: normal;
}

.progress__bar {
  color: white;
  font-size: 13px;
  font-weight: normal;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.6);
  line-height: 20px;
  display: block;
  position: relative;
  top: -1px;
  /*left: -1px;*/
  width: 0%;
  height: 100%;
  opacity: 0;
  border: 1px solid;
  border-radius: 4px 0 0 4px;
  background-size: 100px 30px, 130px 30px, 130px 30px;
  background-position: -20% center, right center, left center;
  background-repeat: no-repeat, no-repeat, no-repeat;
  transition: opacity 0.2s ease, width 0.8s ease-out, background-color 1s ease, border-color 0.3s ease, box-shadow 1s ease;
  /*-webkit-animation: pulse 2s ease-out infinite;
          animation: pulse 2s ease-out infinite;*/
  background-color: rgba(201, 4, 20, 0.95);
  background-image: linear-gradient(90deg, rgba(226, 4, 22, 0) 10%, rgba(250, 6, 26, 0.8) 30%, #fb1f31 70%, rgba(250, 6, 26, 0.8) 80%, rgba(226, 4, 22, 0) 90%), linear-gradient(to right, rgba(251, 31, 49, 0) 0%, #fb1f31 100%), linear-gradient(to left, rgba(251, 31, 49, 0) 0%, #fb1f31 100%);
  border-color: #fb3848;
  box-shadow: 0 0 0.6em #fa061a inset, 0 0 0.4em #e20416 inset, 0 0 0.5em rgba(201, 4, 20, 0.5), 0 0 0.1em rgba(254, 206, 210, 0.5);
}
.progress__bar--orange {
  background-color: rgba(201, 47, 0, 0.95);
  background-image: linear-gradient(90deg, rgba(227, 53, 0, 0) 10%, rgba(252, 59, 0, 0.8) 30%, #ff4d17 70%, rgba(252, 59, 0, 0.8) 80%, rgba(227, 53, 0, 0) 90%), linear-gradient(to right, rgba(255, 77, 23, 0) 0%, #ff4d17 100%), linear-gradient(to left, rgba(255, 77, 23, 0) 0%, #ff4d17 100%);
  border-color: #ff6030;
  box-shadow: 0 0 0.6em #fc3b00 inset, 0 0 0.4em #e33500 inset, 0 0 0.5em rgba(201, 47, 0, 0.5), 0 0 0.1em rgba(255, 214, 201, 0.5);
}
.progress__bar--yellow {
  background-color: rgba(232, 158, 0, 0.95);
  background-image: linear-gradient(90deg, rgba(255, 174, 3, 0) 10%, rgba(255, 183, 28, 0.8) 30%, #ffbf36 70%, rgba(255, 183, 28, 0.8) 80%, rgba(255, 174, 3, 0) 90%), linear-gradient(to right, rgba(255, 191, 54, 0) 0%, #ffbf36 100%), linear-gradient(to left, rgba(255, 191, 54, 0) 0%, #ffbf36 100%);
  border-color: #ffc74f;
  box-shadow: 0 0 0.6em #ffb71c inset, 0 0 0.4em #ffae03 inset, 0 0 0.5em rgba(232, 158, 0, 0.5), 0 0 0.1em rgba(255, 248, 232, 0.5);
}
.progress__bar--green {
  background-color: rgba(0, 178, 23, 0.95);
  background-image: linear-gradient(90deg, rgba(0, 204, 26, 0) 10%, rgba(0, 229, 30, 0.8) 30%, #00ff21 70%, rgba(0, 229, 30, 0.8) 80%, rgba(0, 204, 26, 0) 90%), linear-gradient(to right, rgba(0, 255, 33, 0) 0%, #00ff21 100%), linear-gradient(to left, rgba(0, 255, 33, 0) 0%, #00ff21 100%);
  border-color: #19ff37;
  box-shadow: 0 0 0.6em #00e51e inset, 0 0 0.4em #00cc1a inset, 0 0 0.5em rgba(0, 178, 23, 0.5), 0 0 0.1em rgba(178, 255, 188, 0.5);
}
.progress__bar--blue {
  /*background-color: rgba(18, 135, 204, 0.95);
  background-image: linear-gradient(90deg, rgba(20, 151, 227, 0) 10%, rgba(37, 162, 236, 0.8) 30%, #3dacee 70%, rgba(37, 162, 236, 0.8) 80%, rgba(20, 151, 227, 0) 90%), linear-gradient(to right, rgba(61, 172, 238, 0) 0%, #3dacee 100%), linear-gradient(to left, rgba(61, 172, 238, 0) 0%, #3dacee 100%);
  border-color: #54b6f0;
  box-shadow: 0 0 0.6em #25a2ec inset, 0 0 0.4em #1497e3 inset, 0 0 0.5em rgba(18, 135, 204, 0.5), 0 0 0.1em rgba(225, 242, 252, 0.5);
  */
  background-color: rgb(120 18 204 / 95%);
  background-image: linear-gradient(90deg, rgba(20, 151, 227, 0) 10%, rgb(37 125 236 / 80%) 30%, #3d62ee 70%, rgb(37 98 236 / 80%) 80%, rgba(20, 151, 227, 0) 90%), linear-gradient(to right, rgba(61, 172, 238, 0) 0%, #3d70ee 100%), linear-gradient(to left, rgba(61, 172, 238, 0) 0%, #3d53ee 100%);
  border-color: #546df0;
  box-shadow: 0 0 0.6em #256bec inset, 0 0 0.4em #1476e3 inset, 0 0 0.5em rgb(18 100 204 / 50%), 0 0 0.1em rgb(225 242 252 / 50%);

}
.progress__bar:before, .progress__bar:after {
  content: "";
  position: absolute;
  right: -1px;
  top: -10px;
  width: 1px;
  height: 40px;
}
.progress__bar:before {
  width: 10px;
  right: -6px;
  background: radial-gradient(ellipse at center, rgb(152 158 162 / 78%) 0%, rgba(255, 255, 255, 0) 75%);
}
.progress__bar:after {
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 25%, rgba(255, 255, 255, 0.3) 75%, rgba(255, 255, 255, 0) 100%);
}
.progress--complete .progress__bar {
  -webkit-animation: none;
          animation: none;
  border-radius: 2px;
}
.progress--complete .progress__bar:after, .progress--complete .progress__bar:before {
  opacity: 0;
}

/*@-webkit-keyframes pulse {
  0% {
    background-position: -50% center, right center, left center;
  }
  100% {
    background-position: 150% center, right center, left center;
  }
}

@keyframes pulse {
  0% {
    background-position: -50% center, right center, left center;
  }
  100% {
    background-position: 150% center, right center, left center;
  }
}*/

.progress .progress-info {
  color: #f1f1f1;
  display: flex;
  flex-direction: column;
  transform: translateY(7px);
  overflow: hidden;
  width: 325px;
  height: 70px;
}
.progress .progress-info p {
  margin: 1px 0 0 0;
  font-size: 11px;
  text-align: left;
  /*transform: translateX(-20px);
  opacity: 0;*/
  display: flex;
  justify-content: flex-start;
  align-items: center;
  align-items: center;
  font-family: 'OpenSans Semibold';
  font-size: 12.5px;
}

.mobile .progress .progress-info p {
  font-size: 13px;
}

.progress .progress-info .info {
  text-shadow: 0px 1px 1px #dcd8e1d4;
  background-color: #8c60b8c9;
  color: transparent;
  -webkit-background-clip: text;
  -moz-background-clip: text;
  background-clip: text;
}
.progress .progress-info .dot {
  color: #ff0000bd;
  font-family: 'OpenSans Semibold';
  text-shadow: 0px 0px 2px #ff0000bf;
  margin-left: 3px;
}
.progress .progress-info .sec {
  color: #ff7500;
}
.progress .progress-info .count {
  color: #9721e1;
  font-size: 1.12em;
  font-family: "OpenSans Semibold";
  text-shadow: 0px 1px 1px #dcd8e1d4;
  background-color: #9d00ff;
  color: transparent;
  -webkit-background-clip: text;
  -moz-background-clip: text;
  background-clip: text;
}



.day-performance {
  position: absolute;
  left: 874px;
  top: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.day-performance .marker {
  bottom: 8px;
  left: -18px;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform 0.5s ease-out;

}

.day-performance .marker img {
  transform: scale(0.9);
  opacity: 0.75;
}


.day-performance .marker p {
  position: absolute;
  color: #fbf0ff;
  margin: 0;
  padding-bottom: 3px;
  font-family: "OpenSans Semibold";
  font-size: 11px;
}



.day-performance .spectrum {
  width: 272px;
  height: 13px;
  border-radius: 6px;
  background: linear-gradient(
      90deg,
      rgba(255, 0, 0, 1) 0%,
      rgba(255, 154, 0, 1) 10%,
      rgba(208, 222, 33, 1) 20%,
      rgba(79, 220, 74, 1) 30%,
      rgba(63, 218, 216, 1) 40%,
      rgba(47, 201, 226, 1) 50%,
      rgba(28, 127, 238, 1) 60%,
      rgba(95, 21, 242, 1) 70%,
      rgba(186, 12, 248, 1) 80%,
      rgba(251, 7, 217, 1) 90%
  );
  /*box-shadow: 0px 0px 3px 6px #a192b33d;*/
  box-shadow: 0px 0px 3px 7px #c7b5de7d;
}

.day-performance form * {
  display: grid;
  margin: 0;
  padding: 0;
}

.day-performance datalist {
  place-content: center;
}

.day-performance form, .day-performance option {
  place-items: center;
}

.day-performance label {
  font-size: 137.5%;
}

.day-performance input {
  width: calc(var(--track-w) + 1.75em);
  background: linear-gradient(90deg, #15b190 25%, #f7c742 0 75%, #b1154c 0) 50%/var(--track-w) 0.375em no-repeat;
  cursor: pointer;
}
.day-performance input::-webkit-slider-runnable-track, .day-performance input::-webkit-slider-thumb, .day-performance input {
  -webkit-appearance: none;
}

.day-performance input:focus {
  outline: none;
}
.day-performance input + output {
  --rng: calc(var(--max) - var(--min));
  --pos: calc((var(--val) - var(--min))/var(--rng)*var(--track-w));
  display: var(--js, none);
  grid-row: 2;
  justify-self: start;
  transform: translate(calc(.5*1.75em + var(--pos) - 50%));
  counter-reset: val var(--val);
}
.day-performance input + output::after {
  content: counter(val);
}

.day-performance datalist {
  grid-auto-flow: column;
  width: 269px;
  background: linear-gradient(90deg, rgb(133 123 145 / 28%) 1px, transparent 0) repeat-x;
  background-size: 10.76px 4px;
}

.day-performance option {
  width: 53.8px;
  transform-origin: 50% 0;
  color: #817689;
  font-family: "Open Sans Regular";
  font-size: 11px;
}

.mobile .day-performance option {
  font-size: 12px;
}

.day-performance option::before {
  width: 1px;
  height: 8.75px;
  background: #cabddcfc;
  content: "";
}
























.tutors-container {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 96px;
  height: 51%;
  top: 26%;
  z-index: 99;
  right: 37px;
  border: 3px dotted #000000;
  border: 3px dashed #8a8592;
  border-radius: 10px;
  border-bottom-left-radius: 30px;
  border-bottom-right-radius: 40px;
  box-shadow: 0px 0px 4px 4px #605074d1;
  background: url(/assets/images/hexellence.png) #eee3ff96;
}

.tutors-container .wrapper {
  overflow-y: scroll;
  width: 100%;
  height: 102%;
}

.tutors-container .wrapper::-webkit-scrollbar {
  width: 0px;
}

.tutors-container::-webkit-scrollbar {
  width: 3px;
}

.tutor {
  opacity: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 11px 3px;
  width: 77px;
  height: 56px;  
  box-shadow: 0 1px 6px rgb(135 0 255);
  background: -webkit-radial-gradient(center, ellipse cover, #ae4bef 0%, #9410e2 80%, #6c0efb 100%);
}

.tutors-container .container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 92px;
}

.tutor img {
  border-radius: 6px;
  height: 70px;
  width: 74px;
}

.tutors-container .recorder {
  font-size: 80px;
  color: #e1caff;
  cursor: pointer;
  text-shadow: 3px 2px 4px #7151ca;
  width: 96px;
  height: 77px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform 0.1s ease-in-out;
  box-shadow: 0px -4px 6px -2px #000000c7;
  z-index: 100;
}

.tutors-container .recorder img:nth-child(1) {
  transform: translate(-19px, 0px);
  height: 41px;
  position: absolute;
  z-index: 1;
}

.tutors-container .recorder img:nth-child(2) {
  transform: translate(0px, -1px);
  height: 73px;
  position: absolute;
  opacity: 0.95;
}

.tutors-container .recorder p {
  position: absolute;
  font-size: 11px;
  transform: translate(11px, -1px);
  font-family: "Open Sans Regular";
}

.tutors-container .recorder:hover {
  color: #ff6400;
  text-shadow: 0 0px 8px #ff6400;
}

.tutors-container .recorder:active {
  transform: translateY(1px);
}

.tutors-container .recorder.active p {
  color: #ff0000;
  text-shadow: 0px 0px 8px #ff0000;
}

.tutors-container .recorder .recorder-dot {
  opacity: 0;
  background-color: #ff0000;
  box-shadow: 0 0 8px 2px #ff2222;
  z-index: 3;
  height: 6px;
  width: 6px;
  border-radius: 50%;
  transform: translate(-18px, 0px);
}

.tutors-container .recorder.active .recorder-dot {
  animation: record-ready 1.65s ease infinite;
}

.tutors-container .icon:hover {
  color: #ff2c2c;
}

.tutors-container .icon:hover i,
.tutors-container .icon:hover .count {
   color: #ff2c2c;
}

.votes-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transition: all 0.3s ease-in-out;
  transform: translateY(-5px);
}

.votes-container i {
  color: #a640ff;
  font-size: 42px;
  cursor: pointer;
  text-shadow: 0px -1px 2px #000000;
}

.tutor-actions-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transition: all 0.3s ease-in-out;
  gap: 3px;
}

.tutor-actions-container i {
  color: #a640ff;
  font-size: 21px;
  cursor: pointer;
  text-shadow: 0px 1px 1px #706384;
}

.tutors-container .count {
  font-family: "OpenSans Semibold";
  margin: 0;
  font-size: 22px;
  color: #9d9d9d;
  cursor: pointer;
}

.tutor-actions-container .count {
  font-size: 15px;
}

.tutors-container .votes-container .count {
  margin: -17px;
}

.tutors-container .arrow {
  position: absolute;
  width: 0;
  height: 0;
  border-top: 25px solid transparent;
  border-left: 12px solid #88779982;
  border-bottom: 25px solid transparent;
  left: 36px;
  top: 34px;
}

.tutors-container .icons {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  height: 238px;
  width: 35px;
  border-radius: 5px 5px 20px 12px;
  border: 2px dotted #a797b9;
  transform: translate(-83px, 53px) scale(.85);
  box-shadow: 0px 0px 5px 2px #635c6dd1;
  background: url(/assets/images/hexellence.png) #ffffff96;
}

.tutors-container .markers {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.tutors-container .icons i {
  color: #945eff;
  cursor: pointer;
  text-shadow: 0px 1px 1px #706384db;
}

.tutors-container .tutor.tools-button {
  background: -webkit-radial-gradient(center center, ellipse cover, rgb(56 34 70) 0%, rgb(119 8 184) 80%, rgb(108, 14, 251) 100%);
}

.tools-button {
  opacity: 0;
  position: relative;
  text-decoration: none;
  margin: 4px;
  padding: 10px 3px;
  font-size: 15px;
  width: 80px;
  height: 56px;
  transition: all 0.2s;
  user-select: none;
  cursor: pointer;
  transform: translateY(0);
  border-radius: 12px;
  color: rgba(255, 255, 255, 0.7);
  font-family: sans-serif;
  text-decoration: none;
  text-shadow: 0 -1px 0 maroon;
  border: 2px solid black;
  box-shadow: 0 2px 6px rgb(0 0 0 / 70%), 0 1px 1px rgb(0 0 0 / 70%), 0 0 8px rgb(255 255 255 / 20%), 0 0px 0 rgb(0 0 0 / 70%), inset 0 3px 1px #b41aff, inset 0 5px 1px -5px rgb(255 255 255 / 80%);
  /* background: -webkit-linear-gradient(top, #9900cc 0%, #580099 100%); */
  background: -webkit-linear-gradient(top, #9600cc 0%, #510099 100%);
  margin: 5px 0;
  overflow: hidden;
}

.tutor {
  opacity: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 11px 3px;
  width: 74px;
  height: 56px;
  box-shadow: 0 1px 6px rgb(135 0 255);
  background: -webkit-radial-gradient(center, ellipse cover, #ae4bef 0%, #9410e2 80%, #6c0efb 100%);
}












.counter-container {
  position: absolute;
  transform: scale(0.16);
  display: flex;
  justify-content: flex-end;
  align-items: center;
  left: 23.6%;
  top: -55px;
  box-shadow: rgba(161, 146, 179, 0.24) 0px 0px 3px 38px;
  border-radius: 20px;
}

.digit-container {
  display: flex;
  height: 171px;
  align-items: center;
  justify-content: center;
}

.flex-digits {
  display: flex;
  border-radius: 15%;
  width: 208px;
  height: 181px;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  box-shadow: 0px 0px 4px 13px #a7a5aea3;
  background: #766d92;
}

.digits {
  position: relative;
  width: 167px;
  height: 161px;
  border-left: 8px solid white;
  border-right: 8px solid white;
  border-image: linear-gradient(to bottom, #a59cac, rgb(186 175 203), #f6effe, rgb(152 152 162), #7f7f87) 1;
  border-radius: 10%;
  font-family: 'OpenSans Semibold';
  font-weight: 500;
  font-style: normal;
  font-size: 136px;
  text-align: center;
  perspective:233px;
}

.digit {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  border-radius: 10%;
  color: rgb(119 112 137);
  background: -webkit-linear-gradient(#c0c0c0, #c5c5c5, #ffffff, #d7d7d7, #cbc3d4);
  /*background-size: 100% 176px;
  background-position-y: center;
  background-repeat: repeat-y;*/
  mix-blend-mode: multiply;
  backface-visibility: hidden;
  transition: transform 0.25s ease, background 0.25s ease;
  transform-origin: center center 280px;
  will-change: auto;
  border: 1px solid #ffffff;
}














.chat-container {
  width: 987px;
  height: 500px;
  background: #fefdff url(/assets/images/paven-texture.png);
  display: flex;
  flex-direction: column;
  position: absolute;
  right: 62px;
  top: 145px;
  border: 2px dashed #ad85ffd1;
  border-radius: 10px;
  box-shadow: 1px 1px;
  box-shadow: 0px 1px 3px 1px #4c4c4cb8;
  background: linear-gradient(#f6f6f65c, #e4e0e67d, #dad5e882, #f3f0fc5e, #f4eaff6e);
}

.chat {
  flex:1;
  padding:15px;
  overflow-y: scroll;
  background-size: contain;
}

.bubble {
  position: relative;
  font-family: "OpenSans Semibold";
  max-width: 70%;
  min-width: 45px;
  width: fit-content;
  padding: 8px 12px 18px 12px;
  margin: 10px 0;
  border-radius: 8px;
  font-size: 19.5px;
  line-height: 1.4;
  /*text-align: left;*/
  text-align: justify;
  box-shadow: 0px 1px 2px 0px #4c4c4c4d;
  /*box-shadow: 0px 1px 2px 0px #2724335c;*/
  opacity: 0;            
  transform: translateY(16px); 
  animation: bubbleIn 0.3s ease-out forwards;
}

@keyframes bubbleIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.received {
  background:white;
  align-self:flex-start;
}

.received::before {
  content:"";
  position:absolute;
  left:-6px;
  top:0;
  border-width:8px;
  border-style:solid;
  border-color:white white transparent transparent;
}

.sent {
  background: #d9d7ff;
  margin-left:auto;
  color: #5e5463;
}

.sent::before {
  content:"";
  position:absolute;
  right:-6px;
  top:0;
  border-width:8px;
  border-style:solid;
  /*border-color:#dcf8c6 transparent transparent #dcf8c6;*/
  border-color: #d9d7ff transparent transparent #d9d7ff;
}



.time {
  font-size:11px;
  color:#667781;
  position:absolute;
  bottom:4px;
  right:8px;
}

.ticks {
  font-size:11px;
  margin-left:4px;
  color:#4fc3f7;
}

.close-container {
  position: absolute;
  display: flex;
  flex-direction: row;
  align-items: center;
  top: 9%;
  right: 4%;
  z-index: 99;
  gap: 15px;
  cursor: pointer;
  transform: scale(.85);
}

.close-container svg,
.close-container img {
  opacity: 0.4;
  transition: opacity 0.3s ease;
}

.close-container svg:hover,
.close-container img:hover {
  opacity: 0.8;
}


















.settings-container {
  position: absolute;
  display: flex;
  flex-direction: row;
  gap: 20px;
  left: 228px;
  bottom: 11%;
  transform: scale(0.45) translateY(-15px);
  opacity: 1;
  transition: 0.5s ease-in-out;
}

.mobile .settings-container {
  left: 13%;
  bottom: 10.5%;
}

.option-container p {
  font-family: "Open Sans Regular";
  font-size: 28px;
  color: #533968;
  margin-top: 15px;
  text-shadow: 0px 1px 1px #dcd8e1d4;
  background-color: #5a4470c9;
  color: transparent;
  -webkit-background-clip: text;
  -moz-background-clip: text;
  background-clip: text;

}

.mobile .option-container p {
  font-size: 34px;
  text-shadow: 0px 0px 0px #aaa8add4;
  font-family: "OpenSans Semibold";
  color: #908aa3;
}



.option-strategy {
  width: 222px;
  height: 50px;
  background: #fff;
  margin: 3px auto;
  border-radius: 34px;
  box-shadow: inset 0 30px 50px #d1d1d1;
  position: relative;
  /*filter: drop-shadow(0px 5px 4px #494755e6);*/
}
  
.option-strategy:before {
  content: "";
  width: 206px;
  height: 46px;
  border-radius: 29px;
  background: #e9d7be;
  box-shadow: inset 0 30px 50px #a5a4a4;
  position: absolute;
  left: 5px;
  top: 5px;
}

.option-strategy:after {
  content: "";
  width: 200px;
  height: 39px;
  border-radius: 26px;
  background: -webkit-linear-gradient(top, #6a6770 0%, #b6afc4 61%, #a69eb9 91%, #b095ff 100%);
  box-shadow: inset 0 2px 20px rgb(0 0 0 / 80%);
  position: absolute;
  left: 8px;
  top: 6px;
}

.option-strategy:has(a.on)::after {
  background: -webkit-linear-gradient(top, #260c4f 0%,#815cd3 61%,#8364d1 91%,#b095ff 100%);
}

.option-strategy a {
  display: inline-block;
  width: 115px;
  height: 39px;
  border-radius: 30px;
  background: -webkit-linear-gradient(top, #efeeee 0%,#bcb9b8 100%);
  border-top: solid 1px #fafafa;
  border-bottom: solid 1px #ada39d;
  box-shadow: 1px 6px 7px rgb(0 0 0 / 50%), 0 0 5px rgb(0 0 0 / 40%);
  position: relative;
  top: 3px;
  z-index: 99;
  cursor: pointer;
  transition: left 0.05s ease-in-out;
  left: -45px;
}

.option-strategy a:before {
  content: "";
  width: 31px;
  height: 31px;
  border-radius: 50%;
  background: -webkit-linear-gradient(top, #c2c0be 0%,#d6d6d6 100%);
  position: absolute;
  top: 4px;
  right: 9px;
}

.option-strategy a.on {
  left: 43px;
}


.scores-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  font-size: 16px;
  font-family: "OpenSans Semibold";
}

.scores-container .container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 2px;
}

.scores-container .container > * {
  margin: 0;
}

.scores-container > .container:first-of-type {
  color: #9a68ff;
  font-size: 18.5px;
  margin-bottom: 4px;
}

.bubble:has(.scores-container) {
  background: #f8f7ff;
}

.bubble.received:has(.scores-container)::before {
  border-color: #f8f7ff #f8f7ff transparent transparent;
}

.clockCantainer {
  transform: scale(0.5);
  display: block;
  position: absolute;
  left: 829px;
  top: 53px;
}

.flip-clock-divider .flip-clock-label {
  display: none;
}

.flip-clock-wrapper ul{
  float:none!important;
  display:inline-block
}

.flip-clock-divider{
  float:none!important
}

.flip-clock-wrapper{
  margin:0!important
}

.flip-clock-label{
  font-size:18px;
  font-family:iransansdnlight;
  color:#b5b2b8!important
}

.switch-container {
  position: absolute;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 76.5%;
  top: 62%;
  font-size: 90px;
  right: -30px;
  text-shadow: 0px 1px 1px #dcd8e1d4;
  background-color: #8c60b8c9;
  color: transparent;
  -webkit-background-clip: text;
  -moz-background-clip: text;
  background-clip: text;
}

.mobile .switch-container {
  width: 80%;
  top: 58%;
  font-size: 120px;
  right: -57px;
}

.switch-container i:hover {
  color: #b56aff;
}

.accents {
  margin-left: 15px;
}

.accents img {
  width: 106px;
  margin: 0 8px;
  cursor: pointer;
}
/*
.accents img.disabled {
  filter: grayscale(100%) brightness(80%) contrast(85%);
  opacity: 0.3;
}*/


/*.pager {
    position: absolute;
    right: 0;
    bottom: 112px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.pager img {
  box-shadow: 0px 1px 4px 1px #4c4c4c96;
  background: linear-gradient(#f6f6f663, #e4e0e645, #ffffff9c, #f5f2f261, #cbc3d485);
  width: 62px;
  border-radius: 5px;
}
*/


.toolbox-container {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  right: 67px;
  bottom: 152px;
  gap: 10px;
}

.toolbox-container .btn {
  box-shadow: 0px 1px 4px 1px #4c4c4c96;
  background: linear-gradient(#f6f6f663, #e4e0e645, #ffffff9c, #f5f2f261, #cbc3d485);
  width: 152px;
  border-radius: 7px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 50px;
  width: 64px;
}

.toolbox-container .btn {
  cursor: pointer;
}

.toolbox-container .btn:active {
  box-shadow: inset 0px 1px 4px 1px #4c4c4c96;
}

.toolbox-container .btn .accent {
  width: 57px;
  margin-left: 2px;
  margin-top: 1px;
}

.toolbox-container .btn .replay {
  width: 50px;
  margin-left: 0px;
  margin-top: 6px;
  position: absolute;
}

.toolbox-container .btn[data-replay="disable"] {
  position: relative;
}

.toolbox-container .btn[data-replay="disable"]::after {
  content: "";
  position: absolute;
  top: 46%;
  left: 5%;
  width: 88%;
  height: 5px;
  background: red;
  transform: rotate(-45deg);
  pointer-events: none;
  border-radius: 5px;
}


.toolbox-container .btn .eraser {
  width: 55px;
  margin-left: 2px;
  margin-top: 1px;
}

.toolbox-container .btn .state {
  width: 52px;
  margin-left: 0px;
  margin-top: 2px;
  position: absolute;
}

.toolbox-container .btn .delay {
  width: 28px;
  transform: translate(15px, 5px);
}

.toolbox-container .btn .delay {
  display: none;
}

.toolbox-container .btn[data-state="chat-delay"] .delay {
  display: block;
}

.toolbox-container .btn[data-state="chat-hide"] {
  position: relative;
}

.toolbox-container .btn[data-state="chat-hide"]::after {
  content: "";
  position: absolute;
  top: 44%;
  left: 8%;
  width: 84%;
  height: 5px;
  background: red;
  transform: rotate(-45deg);
  pointer-events: none;
  border-radius: 5px;
}


.msg.btn-warning {
  color: #18191b;
  border-color: #d39e00;
  background-color: #ff8207eb;
  /*background-color: #ff2f05ed;*/
}

.msg.btn-warning:hover {
  /*background-color: #ff8207eb;*/
  background-color: #ff2f05ed;
}

.msg {
  display: none;
  position: fixed;
  left: 50%;
  padding: 10px 20px;
  border-radius: 5px;
  color: white;
  font-size: 14px;
  z-index: 99;
  box-shadow: 0 1px 12px -1px rgb(94 89 86);
  font-family: "Open Sans Regular";
  direction: ltr;
}

.msg.animate {
  opacity: 0;
  transition: all 0.7s;
}

.msg.animate.active {
  opacity: 0.95;
  transform: translateX(-50%) translateY(-70%);
}

.msg.slide-in-down {
  transform: translateY(-100%) translateX(-50%);
}

.overlay {
  position: fixed;
  inset: 0;
  background: #201e23d4;
  backdrop-filter: blur(3px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  z-index: 99;
}

.overlay.show {
  opacity: 1;
  pointer-events: auto;
}

.modal.show {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  pointer-events: auto;
}

.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(.8);
  opacity: 0;
  pointer-events: none;
  background: #fff;
  padding: 25px;
  width: 750px;
  border-radius: 14px;
  box-shadow: 0 5px 30px 7px rgb(0 0 0 / 64%);
  z-index: 99;
  text-align: center;
  font-size: 22px;
  font-family: 'OpenSans Semibold';
  transition:
    opacity 0.2s ease,
    transform 0.25s cubic-bezier(.17,1.55,.45,1);
}

.modal .buttons {
  margin-top: 40px;
  display: flex;
  justify-content: center;
  gap: 25px;
}

.modal .yes, .modal .no {
  padding: 10px 24px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  transition: 0.2s ease;
  width: 150px;
  height: 50px;
  font-size: 18px;
}

.modal .yes {
  background: #ff4d4d;
  color: white;
}

.modal .no {
  background: #ddd;
  color: black;
}

.modal .yes:hover { 
  background: #e60000; 
}
.modal .no:hover {
  background: #ccc; 
}

.modal p {
  font-family: 'Open Sans Regular';
  color: #8e899e;
  margin-top: 15px;
}

.modal h3 {
  font-family: 'OpenSans Semibold';
  font-size: 30px;
  color: #736f81;
  margin-bottom: 0px;
}