.row {
  margin-right: 0px;
  margin-left: 0px;
}

#fullpage>div.section.fp-section.active.fp-completely>div.fp-slidesNav.bottom>ul>li>a>span {
  background-color: #e06125;
}

#fp-nav>ul>li>a>span {
  background-color: #e06125;
}

#fp-nav ul li .fp-tooltip {
  color: #e06125;
}

#questions,
#f_answers,
#users_wa .panel {
  background-color: #040c0e;
}

#questions .panel-heading .row {
  background-color: #132226ff;
}

#questions .panel-body {
  background-color: #132226ff;
}

#questions .panel-body .row {
  background-color: #032229;
  border-radius: 5px;
  color: #ffebdc;
  margin: 0px 0;
}

#questions span.head {
  color: #a4978e;
}

#questions .row_head>div {
  background-color: #032229;
  border-radius: 5px;
  /*color: #ffebdc;*/
  margin: 0px 0;
}

#questions .ui-progressbar {
  background-color: #846038;
  margin: 2px 0px;
  color: #f1e2bc;
  box-shadow: 4px -5px 6px 1px #8e7f7f
}

#questions .ui-progressbar-value {
  height: 100%;
  background: #7173ab;
  margin: 2px;
  box-shadow: 0px 0px 4px 0px #d8ef7b;
}

#questions ::-webkit-scrollbar {
  background-color: #000000;
}

#questions ::-webkit-scrollbar-button {
  background-color: #032229ee;
}

#questions ::-webkit-scrollbar-track {
  background-color: #0000ff;
}

#questions ::-webkit-scrollbar-track-piece {
  background-color: #a4978eee;
}

#questions ::-webkit-scrollbar-thumb {
  background-color: #ffebdcee;
}

#questions ::-webkit-scrollbar-corner {
  background-color: #032229ee;
}

#questions ::-webkit-resizer {
  background-color: #ff0000;
}

#questions .progress-label {
  display: flex;
  align-items: center;
  text-shadow: none;
}

#questions .testcase {
  padding-right: 5px;
  padding-left: 5px;
  margin: 2px 0;
}

#questions div[id^=ex_] {
  display: flex;
  align-items: center;
}

/*
.row_head > div{
   background-color: #9ac4d9 !important;
 }
 */
#questions .ui-widget-header {
  background: #51612b;
}

#f_answers .panel {
  background-color: #040c0f;
  padding-bottom: 2%;
}

#f_answers div#ans_panel {
  background-color: #0e4552;
}

#f_answers div#txt_area,
div#ttyd_area {
  background-color: #334f67;
  box-shadow: 0px 0px 3px 4px #337ab7;
}

#f_answers .panel-default>.panel-heading,
#ed_footer {
  color: #f7eeee;
  background-color: #402c16;
  border-color: #337ab7;
  box-shadow: 0px 0px 15px 3px #6b4821;
}

#f_answers .btn-default {
  color: #f5eded;
  background-color: #8a6d3b;
  border-color: #841a1a;
  padding-left: 4px;
  padding-right: 4px;
}

#ans_head {
  width: 100%;
  height: 6%;
  min-height: 52px;
  position: relative;
}

#ans_body {
  width: 100%;
  height: 80%;
  position: relative;
}

#ed_foot {
  width: 100%;
  height: 12%;
  min-height: 70px;
  position: relative;
}

/* Dropdown Button */
.kkdropbtn {
  background-color: #3498DB;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

/* Dropdown button on hover & focus */
.kkdropbtn:hover,
.kkdropbtn:focus {
  background-color: #2980B9;
}

/* The container <div> - needed to position the dropdown content */
.kkdropdown {
  position: relative;
  display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.kkdropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

/* Links inside the dropdown */
.kkdropdown-content i {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  cursor: pointer;
}

/* Change color of dropdown links on hover */
.kkdropdown-content a:hover {
  background-color: #ddd
}

/* Show the dropdown menu (use JS to add this class to the .kkdropdown-content container when the user clicks on the dropdown button) */
.show {
  display: block;
}

.jj-lblue {
  color: cyan;
  background: #7600ff;
}

.jj-lgreen {
  color: #a1e7a1;
  background: #114225;
}

.jj-lred {
  color: #f81818;
  background: #e58e8e;
}

.jj-green {
  color: green;
}

.jj-yellow {
  color: yellow;
}

.jj-red {
  color: red;
}

.jjc-PDF {
  color: rgb(247 168 195);
  cursor: pointer;
}

.jjc-PPT {
  color: rgb(230 74 25);
  cursor: pointer;
}

.jjc-DOC {
  color: rgb(66 124 252);
  cursor: pointer;
}

.jjc-VIDEO {
  color: rgb(246 0 0);
  cursor: pointer;
}

.jjc-HTML {
  color: rgb(55 160 41);
  cursor: pointer;
}

.c-pointer {
  cursor: pointer;
}

/*
@keyframes shadowPulse {
  0% {
      box-shadow: 0px 0px 0px 0px hsla(0, 0%, 0%, 1);
  }
  50% {
      box-shadow: 0px 0px 10px 10px hwb(64 1% 1%);
  }
  100% {
    box-shadow: 0px 0px 0px 0px hsla(0, 0%, 0%, 1);
  }
}

.shadow-pulse {
  animation-name: shadowPulse;
  animation-duration: 0.5s;
  animation-iteration-count: 1;
  animation-timing-function: linear;
}
*/

.gpt-ques {
  white-space: pre-wrap;
  color: #f99292;
  font-size: medium;
  text-align: left;
  background-color: #003700;
}

.black-bean {
  white-space: pre-wrap;
  color: snow;
  font-size: medium;
  display: inline-block;
  padding: 0;
  margin: 0;
  list-style: none;
}

.black-bean pre code,
.black-bean pre {
  color: snow;
  background-color: black;
}

.ai-hints pre code {
  color: black;
  background-color: snow;
}

.r-nav {
  position: absolute;
  right: 9px;
  top: 0px;
  height: 45px;
}

.r-nav li {
  list-style: none;
  float: right;
  display: inline-block;
  width: 30px;

  text-align: center;
}

.r-nav li a {
  margin: 0;
  padding: 0;
  line-height: 18px;
  font-size: 16px;
  color: #979797;

}

.loading-img {
  width: 100px;
  display: inline;
  margin: 10px 80px;
  height: 100px;
}

.buttonx {
  background: #0070ff;
  ;
  padding: 5px 30px;
  margin: 5px 5px 5px 0px;
  border: 1px solid #0070ff;
  color: #fff;
  border-radius: 10px;
}

.buttony {
  background: transparent;
  padding: 5px 30px;
  margin: 5px 5px 5px 0px;
  border: 1px solid #0070ff;
  color: #0070ff;
  ;
  border-radius: 10px;
}

/*--------------------
  Chat
  --------------------*/


.message-box input[type="range"] {
  -webkit-appearance: none;
  width: 340px;
  height: 2px;
  background: #0070ff;
  background-position: center;
  background-repeat: no-repeat;
  position: absolute;
  top: 0px;
  bottoM: 0px;
  left: 0px;
  right: 0px;
  margin: auto;
  display: block;
  margin-top: 90px;
}

.message-box input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 100%;
  background: #434343;
  position: relative;
  border: 3px solid #0070ff;
  z-index: 3;
  cursor: pointer;
  content: counter(3)
}

.chat,
.chat::before,
.chat::after,
.chat-title,
.chat-title::before,
.chat-title::after,
.message-box,
.message-box::before,
.message-box::after,
.message,
.message::before,
.message::after {
  box-sizing: border-box;
}


.chat {
  background: -webkit-linear-gradient(315deg, #044f48, #2a7561);
  background: linear-gradient(135deg, #044f48, #2a7561);
  background-size: cover;
  font-family: 'Open Sans', sans-serif;
  font-size: 12px;
  line-height: 1.3;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  z-index: 2;
  overflow: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

/*--------------------
  Chat Title
  --------------------*/
.chat-title {
  -webkit-box-flex: 0;
  -ms-flex: 0 1 45px;
  flex: 0 1 45px;
  position: relative;
  z-index: 2;
  background: rgba(0, 0, 0, 0.2);
  color: #fff;
  text-align: left;
  padding: 10px 10px 10px 50px;
}

.chat-title h1,
.chat-title h2 {
  font-weight: normal;
  font-size: 10px;
  margin: 0;
  padding: 0;
}

.chat-title h2 {
  color: rgba(255, 255, 255, 0.5);
  font-size: 8px;
  letter-spacing: 1px;
}

.jsPanel-title .avatar {
  position: absolute;
  z-index: 1;
  border-radius: 30px;
  width: 30px;
  height: 30px;
  overflow: hidden;
  margin-left: 4px;
  margin-top: 0px;
  padding: 0;
  border: 2px solid rgba(177, 103, 103, 0.24);
  cursor: pointer
}

.jsPanel-title .avatar img {
  width: 100%;
  height: auto;
}

.webui-popover-title .avatar {
  position: absolute;
  z-index: 1;
  border-radius: 30px;
  width: 25px;
  height: 25px;
  overflow: hidden;
  margin-left: 10px;
  margin-top: -5px;
  padding: 0;
  border: 2px solid rgba(255, 255, 255, 0.24);
}

.webui-popover-title .avatar img {
  width: 100%;
  height: auto;
}


.chat-title .avatar {
  position: absolute;
  z-index: 1;
  top: 8px;
  left: 9px;
  border-radius: 30px;
  width: 30px;
  height: 30px;
  overflow: hidden;
  margin: 0;
  padding: 0;
  border: 2px solid rgba(255, 255, 255, 0.24);
}

.chat-title .avatar img {
  width: 100%;
  height: auto;
}

/*--------------------
  Messages
  --------------------*/
.messages {
  -webkit-box-flex: 1;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  color: rgba(255, 255, 255, 0.5);
  overflow: hidden;
  position: relative;
  width: 100%;
}

.messages .messages-content {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

.messages .message {
  clear: both;
  float: left;
  padding: 6px 10px 7px;
  border-radius: 10px 10px 10px 0;
  background: rgba(0, 0, 0, 1);
  margin: 8px 0;
  font-size: 14px;
  line-height: 1.4;
  margin-left: 35px;
  position: relative;
  color: white;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
  overflow-wrap: anywhere;
}

.messages .message .timestamp {
  position: absolute;
  bottom: -15px;
  font-size: 9px;
  color: rgba(255, 255, 255, 0.5);
  z-index: -1;
  width: max-content;
}

.messages .message::before {
  content: '';
  position: absolute;
  bottom: -6px;
  border-top: 6px solid rgba(0, 0, 0, 0.5);
  left: 0;
  border-right: 7px solid transparent;
}

.messages .message .avatar {
  position: absolute;
  z-index: 1;
  bottom: -15px;
  left: -35px;
  border-radius: 30px;
  width: 30px;
  height: 30px;
  overflow: hidden;
  margin: 0;
  padding: 0;
  border: 2px solid rgba(255, 255, 255, 0.24);
}

.messages .message .avatar img {
  width: 100%;
  height: auto;
}

.messages .message.message-personal {
  float: right;
  color: black;
  text-align: right;
  background: #003700;
  border-radius: 10px 10px 10px 0;
  margin-top: 20px;
}

.messages .message.message-personal::before {
  left: auto;
  right: 0;
  border-right: none;
  border-left: 5px solid transparent;
  border-top: 4px solid #257287;
  bottom: -4px;
}

.messages .message:last-child {
  margin-bottom: 30px;
}

.messages .message.new {
  -webkit-transform: scale(0);
  transform: scale(0);
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
  -webkit-animation: bounce 100ms linear both;
  animation: bounce 100ms linear both;
  max-width: 94%;
  border: 1px solid lightgreen;
}

.messages .message.loading::before {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  content: '';
  display: block;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  z-index: 2;
  margin-top: 4px;
  -webkit-animation: ball 0.45s cubic-bezier(0, 0, 0.15, 1) alternate infinite;
  animation: ball 0.45s cubic-bezier(0, 0, 0.15, 1) alternate infinite;
  border: none;
  -webkit-animation-delay: .1s;
  animation-delay: .1s;
}

.messages .message.loading span {
  display: block;
  font-size: 0;
  width: 20px;
  height: 10px;
  position: relative;
}

.messages .message.loading span::before {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  content: '';
  display: block;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  z-index: 2;
  margin-top: 4px;
  -webkit-animation: ball 0.45s cubic-bezier(0, 0, 0.15, 1) alternate infinite;
  animation: ball 0.45s cubic-bezier(0, 0, 0.15, 1) alternate infinite;
  margin-left: -7px;
}

.messages .message.loading span::after {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  content: '';
  display: block;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  z-index: 2;
  margin-top: 4px;
  -webkit-animation: ball 0.45s cubic-bezier(0, 0, 0.15, 1) alternate infinite;
  animation: ball 0.45s cubic-bezier(0, 0, 0.15, 1) alternate infinite;
  margin-left: 7px;
  -webkit-animation-delay: .1s;
  animation-delay: .1s;
}

/*--------------------
  Message Box
  --------------------*/
.message-box {
  -webkit-box-flex: 0;
  -ms-flex: 0 1 40px;
  flex: 0 1 40px;
  width: 100%;
  height: fit-content;
  background: rgba(0, 0, 0, 0.3);
  padding: 10px;
  padding-top: 4px;
  position: relative;
}

.message-box .message-input {
  background: none;
  border: none;
  outline: none !important;
  resize: auto;
  color: rgba(255, 255, 255, 0.7);
  background: rgba(0, 0, 0, 0.5);
  font-size: 15px;
  margin: 0;
  padding-left: 5px;
  padding-right: 5px;
  width: 100%;
  border-radius: 10px;
  border: 1px solid #556677;
  height: 80px;
  overflow: auto;
  white-space: pre-wrap;
}

.message-box textarea:focus:-webkit-placeholder {
  color: transparent;
}

.message-box .message-submit {
  position: absolute;
  z-index: 1;
  top: 9px;
  right: 10px;
  color: #fff;
  border: none;
  text-transform: uppercase;
  line-height: 1;
  padding: 6px 10px;
  border-radius: 10px;
  outline: none !important;
  -webkit-transition: background .2s ease;
  transition: background .2s ease;
}

.message-box .message-submit:hover {
  background: #1D7745;
}

.message-box .message-type {
  position: relative;
  z-index: 1;
  padding-left: 5px;
  padding-bottom: 4px;
  color: aqua;
  cursor: pointer;
}

/*--------------------
  Custom Srollbar
  --------------------*/
.mCSB_scrollTools {
  margin: 1px -3px 1px 0;
  opacity: 0;
}

.mCSB_inside>.mCSB_container {
  margin-right: 0px;
  padding: 0 10px;
}

.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  background-color: rgba(0, 0, 0, 0.5) !important;
}

/*--------------------
  Bounce
  --------------------*/
@-webkit-keyframes bounce {
  0% {
    -webkit-transform: matrix3d(0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }

  4.7% {
    -webkit-transform: matrix3d(0.45, 0, 0, 0, 0, 0.45, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(0.45, 0, 0, 0, 0, 0.45, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }

  9.41% {
    -webkit-transform: matrix3d(0.883, 0, 0, 0, 0, 0.883, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(0.883, 0, 0, 0, 0, 0.883, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }

  14.11% {
    -webkit-transform: matrix3d(1.141, 0, 0, 0, 0, 1.141, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(1.141, 0, 0, 0, 0, 1.141, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }

  18.72% {
    -webkit-transform: matrix3d(1.212, 0, 0, 0, 0, 1.212, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(1.212, 0, 0, 0, 0, 1.212, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }

  24.32% {
    -webkit-transform: matrix3d(1.151, 0, 0, 0, 0, 1.151, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(1.151, 0, 0, 0, 0, 1.151, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }

  29.93% {
    -webkit-transform: matrix3d(1.048, 0, 0, 0, 0, 1.048, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(1.048, 0, 0, 0, 0, 1.048, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }

  35.54% {
    -webkit-transform: matrix3d(0.979, 0, 0, 0, 0, 0.979, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(0.979, 0, 0, 0, 0, 0.979, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }

  41.04% {
    -webkit-transform: matrix3d(0.961, 0, 0, 0, 0, 0.961, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(0.961, 0, 0, 0, 0, 0.961, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }

  52.15% {
    -webkit-transform: matrix3d(0.991, 0, 0, 0, 0, 0.991, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(0.991, 0, 0, 0, 0, 0.991, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }

  63.26% {
    -webkit-transform: matrix3d(1.007, 0, 0, 0, 0, 1.007, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(1.007, 0, 0, 0, 0, 1.007, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }

  85.49% {
    -webkit-transform: matrix3d(0.999, 0, 0, 0, 0, 0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(0.999, 0, 0, 0, 0, 0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }

  100% {
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
}

@keyframes bounce {
  0% {
    -webkit-transform: matrix3d(0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }

  4.7% {
    -webkit-transform: matrix3d(0.45, 0, 0, 0, 0, 0.45, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(0.45, 0, 0, 0, 0, 0.45, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }

  9.41% {
    -webkit-transform: matrix3d(0.883, 0, 0, 0, 0, 0.883, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(0.883, 0, 0, 0, 0, 0.883, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }

  14.11% {
    -webkit-transform: matrix3d(1.141, 0, 0, 0, 0, 1.141, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(1.141, 0, 0, 0, 0, 1.141, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }

  18.72% {
    -webkit-transform: matrix3d(1.212, 0, 0, 0, 0, 1.212, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(1.212, 0, 0, 0, 0, 1.212, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }

  24.32% {
    -webkit-transform: matrix3d(1.151, 0, 0, 0, 0, 1.151, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(1.151, 0, 0, 0, 0, 1.151, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }

  29.93% {
    -webkit-transform: matrix3d(1.048, 0, 0, 0, 0, 1.048, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(1.048, 0, 0, 0, 0, 1.048, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }

  35.54% {
    -webkit-transform: matrix3d(0.979, 0, 0, 0, 0, 0.979, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(0.979, 0, 0, 0, 0, 0.979, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }

  41.04% {
    -webkit-transform: matrix3d(0.961, 0, 0, 0, 0, 0.961, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(0.961, 0, 0, 0, 0, 0.961, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }

  52.15% {
    -webkit-transform: matrix3d(0.991, 0, 0, 0, 0, 0.991, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(0.991, 0, 0, 0, 0, 0.991, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }

  63.26% {
    -webkit-transform: matrix3d(1.007, 0, 0, 0, 0, 1.007, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(1.007, 0, 0, 0, 0, 1.007, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }

  85.49% {
    -webkit-transform: matrix3d(0.999, 0, 0, 0, 0, 0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(0.999, 0, 0, 0, 0, 0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }

  100% {
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
}

@-webkit-keyframes ball {
  from {
    -webkit-transform: translateY(0) scaleY(0.8);
    transform: translateY(0) scaleY(0.8);
  }

  to {
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);
  }
}

@keyframes ball {
  from {
    -webkit-transform: translateY(0) scaleY(0.8);
    transform: translateY(0) scaleY(0.8);
  }

  to {
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);
  }
}


video::cue {
  color: white;
  font-size: 20px;
  background: none;
}

video::cue i {
  font-style: italic;
}

video::cue(v) {
  color: #c00;
}

video::cue(c) {
  color: white;
  opacity: 0.4;
}

/*
@media (prefers-reduced-motion: reduce) {
  * {
    animation: auto !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation: no-preference !important;
    transition: no-preference !important;
  }
}
*/
dai-role {
  display: none;
}

[contenteditable=true]:empty:not(:focus):before {
  content: attr(placeholder);
  color: grey;
  font-style: italic;
}

.xbox {
  padding: 6px;
  width: 100px;
  min-width: 50px;
  /*border: 1px solid red;*/
}

.xbox img {
  width: 100%;
}

.jj-custom-handle {
  width: 3em;
  height: 1.6em;
  top: 50%;
  margin-top: -.8em;
  text-align: center;
  line-height: 1.6em;
}

/*
.role_teacher .gpt-ques {
  white-space: pre-wrap;
  color: rgb(3, 5, 31);
  font-size: medium;
  text-align: left;
}

.role_r_teacher {
  color: grey;
}

.role_student {
  color: grey;
}

.role_e_student {
  color: grey;
}

.role_dai {
  color: grey;
}
*/
.jjswal2-popup {
  background-color: #0f08dd;
  border-radius: 15px;
}

.jjswal2-title {
  color: #333;
  font-size: 22px;
}

#jjswal2-header {
  color: #e30707;
  font-size: 22px;
}

/* Dark theme 样式 */
body.care-settings-style {
  background-color: #121212;
  color: #e0e0e0;
}

/* 自訂樣式，讓面板和表格也符合暗色主題 */
.panel {
  background-color: #1e1e1e;
  border-color: #444;
}

.panel-heading {
  background-color: #2c2c2c;
  border-bottom: 1px solid #444;
}

.panel-title {
  color: #e0e0e0;
}

.panel-body {
  background-color: #032229;
  /*color: #e0e0e0;*/
}

/* 表格樣式 */
.settings-table {
  background-color: #1e1e1e;
}

.settings-table th,
.settings-table td {
  background-color: #1e1e1e;
  color: #e0e0e0;
  border: 1px solid #444;
}

/* JSON 編輯器樣式 */
.json-editor {
  width: 100%;
  height: 400px;
  background-color: #2c2c2c;
  color: #00ff00;
  font-family: monospace;
  resize: none;
}

/* 編輯名稱區塊 */
.editable-name {
  display: flex;
  align-items: center;
}

.editable-name input {
  margin-right: 5px;
  flex-grow: 1;
  background-color: transparent;
  border: 1px solid #444;
  color: #e0e0e0;
}


.record-table {
  width: 98%;
  border-collapse: collapse;
  margin-top: 15px;
  margin-right: 5px;
  margin-left: 5px;
  background: rgb(222, 128, 5);
  font-size: medium;
  color: azure;
}

.record-table th,
.record-table td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}

.record-table th {
  background-color: brown;
  color: antiquewhite;
}

.record-table tr:nth-child(even) {
  background-color: #f9f9f9;
  color: darkblue;
}

.duration-cell {
  font-weight: bold;
}

.unit_classify_0 {
  color: lightyellow;
}

.unit_classify_1 {
  color: lightskyblue;
}

.unit_classify_2 {
  color: lightpink;
}

.unit_classify_3 {
  color: lightgreen;
}

.unit_classify_4 {
  color: lightsalmon;
}

.unit_classify_5 {
  color: lightblue;
}

.unit_classify_6 {
  color: lightcoral;
}

.unit_classify_7 {
  color: lightseagreen;
}

.unit_classify_8 {
  color: lightgoldenrodyellow;
}

.unit_classify_9 {
  color: darkgoldenrod;
}

.unit_classify_10 {
  color: hotpink;
}

.unit_classify_11 {
  color: chartreuse;
}

.unit_classify_12 {
  color: aqua;
}

.unit_classify_13 {
  color: burlywood
}

.unit_classify_14 {
  color: aquamarine;
}

.unit_classify_15 {
  color: blueviolet;
}

.unit_classify_16 {
  color: lightcoral;
}

.unit_classify_17 {
  color: chocolate;
}

.unit_classify_18 {
  color: coral;
}

.unit_classify_19 {
  color: cornflowerblue;
}

.unit_classify_20 {
  color: cornsilk;
}

.unit_classify_21 {
  color: crimson;
}

.unit_classify_22 {
  color: cyan;
}

.unit_classify_23 {
  color: darkcyan;
}

.unit_classify_24 {
  color: greenyellow;
}

.unit_classify_25 {
  color: darkblue;
}

.unit_classify_26 {
  color: darkgreen;
}

.unit_classify_27 {
  color: darkorange;
}

.unit_classify_28 {
  color: darkorchid;
}

.unit_classify_29 {
  color: darkseagreen;
}

.unit-edit-table {
  margin: 6px;
  background: darkslategrey;
  color: gold;
  font-size: 16px;
}


.unit-edit-table th,
.unit-edit-table td {
  padding-right: 8px;
  padding-left: 8px;
}


.unit-edit-table td:nth-child(odd) {
  color: cyan;
}

.unit-edit-table input {
  background: linear-gradient(45deg, black, transparent);
  color: azure;
  font-style: 16px;
}

.jj-webui-content {
  background: darkolivegreen;
  color: ghostwhite;
  overflow-y: auto;
  padding: 10px;
  margin-bottom: 10px;
}

.jj-webui-content pre {
  background: black;
  color: white;
}

.jjwarning {
  color: red;
}

.jj-del {
	text-decoration: none;
	color: #b30000;
	background: #fadad7;
}

.jj-ins {
	background: #eaf2c2;
	color: #406619;
	text-decoration: none;
}

.jj-chunk-header {
	color: #8a008b;
	text-decoration: none;
}