del {
	text-decoration: none;
	color: #b30000;
	background: #fadad7;
}
ins {
	background: #eaf2c2;
	color: #406619;
	text-decoration: none;
}
.chunk-header {
	color: #8a008b;
	text-decoration: none;
}

.float-feedback-btn {
    position: fixed;
    width: 60px;
    height: 60px;
    bottom: 40px;
    left: 40px;
    background-color: #0084ff;
    color: #FFF;
    border-radius: 50px;
    text-align: center;
    box-shadow: 2px 2px 3px #999;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 1000;
  }
  
  .float-feedback-btn:hover {
    transform: scale(1.1);
    background-color: #0073e6;
  }
  
  .float-feedback-btn i {
    font-size: 24px;
  }
  
  /* Thêm animation cho button */
  @keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
  }
  
  .float-feedback-btn:active {
    animation: pulse 0.3s ease;
  }
  
  .ranking-table, .overall-ranking-table {
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    overflow: hidden;
    max-height: 520px;
  }
  
  .ranking-table table, .overall-ranking-table table {
    width: 100%;
    border-collapse: collapse;
  }
  
  .ranking-table thead, .overall-ranking-table thead {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #f8f9fa;
  }
  
  .ranking-table tbody, .overall-ranking-table tbody {
    display: block;
    overflow-y: auto;
    max-height: 480px;
    width: 100%;
  }
  
  .ranking-table thead tr, .overall-ranking-table thead tr {
    display: table;
    width: 100%;
    table-layout: fixed;
  }
  
  .ranking-table tbody tr, .overall-ranking-table tbody tr {
    display: table;
    width: 100%;
    table-layout: fixed;
  }
  
  .ranking-table th, .ranking-table td, .overall-ranking-table th, .overall-ranking-table td {
    padding: 12px;
    text-align: left;
  }
  
  /* Adjust column widths */
  .ranking-table th:nth-child(1), 
  .ranking-table td:nth-child(1) { /* Rank */
    width: 60px;
  }
  
  .ranking-table th:nth-child(2), 
  .ranking-table td:nth-child(2) { /* Name */
    width: 25%;
  }
  
  .ranking-table th:nth-child(3), 
  .ranking-table td:nth-child(3) { /* Age Group */
    width: 16%;
  }

  .ranking-table th:nth-child(4), 
  .ranking-table td:nth-child(4) { /* Gender */
    width: 15%;
  }
  
  .ranking-table th:nth-child(5), 
  .ranking-table td:nth-child(5) { /* Score */
    width: 80px;
  }
  
  .ranking-table th:nth-child(6), 
  .ranking-table td:nth-child(6) { /* Correct */
    width: 120px;
  }
  
  .ranking-table th:nth-child(7), 
  .ranking-table td:nth-child(7) { /* Memorization time */
    width: 120px;
  }
  
  .ranking-table th:nth-child(8), 
  .ranking-table td:nth-child(8) { /* Date */
    width: 100px;
  }
  
  /* Adjust overall column widths */
  .overall-ranking-table th:nth-child(1),
  .overall-ranking-table td:nth-child(1) { /* Rank */
    width: 10%;
  }

  .overall-ranking-table th:nth-child(2),
  .overall-ranking-table td:nth-child(2) { /* Name */
    width: 38%;
  }

  .overall-ranking-table th:nth-child(3),
  .overall-ranking-table td:nth-child(3) { /* Age Group */
    width: 20%;
  }

  .overall-ranking-table th:nth-child(4),
  .overall-ranking-table td:nth-child(4) { /* Gender */
    width: 17%;
  }

  .overall-ranking-table th:nth-child(5),
  .overall-ranking-table td:nth-child(5) { /* Score */
    width: 15%;
  }
  
  /* Ensure text doesn't wrap in numeric columns */
  .ranking-table td:nth-child(1),
  .ranking-table td:nth-child(4),
  .ranking-table td:nth-child(5),
  .ranking-table td:nth-child(6),
  .overall-ranking-table td:nth-child(1),
  .overall-ranking-table td:nth-child(4) {
    white-space: nowrap;
  }
  
  /* Add ellipsis for long text in name and email */
  .ranking-table td:nth-child(2),
  .ranking-table td:nth-child(3),
  .overall-ranking-table td:nth-child(2),
  .overall-ranking-table td:nth-child(3) {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  .ranking-table tr:hover, .overall-ranking-table tr:hover {
    background: #f8f9fa;
  }
  
  .ranking-table tr:last-child td, .overall-ranking-table tr:last-child td {
    border-bottom: none;
  }
  
  /* Thêm thanh scroll tùy chỉnh */
  .ranking-table tbody::-webkit-scrollbar, .overall-ranking-table tbody::-webkit-scrollbar {
    width: 8px;
  }
  
  .ranking-table tbody::-webkit-scrollbar-track, .overall-ranking-table tbody::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
  }
  
  .ranking-table tbody::-webkit-scrollbar-thumb, .overall-ranking-table tbody::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
  }
  
  .ranking-table tbody::-webkit-scrollbar-thumb:hover, .overall-ranking-table tbody::-webkit-scrollbar-thumb:hover {
    background: #555;
  }
  
  .ranking-container {
    padding: 20px;
    max-width: 1200px;
    margin: 0 auto;
  }
  
  .ranking-filters {
    display: flex;
    gap: 20px;
    margin-bottom: 30px;
    background: #f5f5f5;
    padding: 20px;
    border-radius: 8px;
  }
  
  .filter-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  
  .filter-group label {
    font-weight: bold;
    color: #333;
  }
  
  .filter-group select {
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    min-width: 200px;
  }
  
  /* .ranking-table table {
    width: 100%;
    border-collapse: collapse;
  }
  
  .ranking-table th {
    background: #f8f9fa;
    padding: 12px;
    text-align: left;
    font-weight: bold;
    color: #333;
    border-bottom: 2px solid #dee2e6;
  }
  
  .ranking-table td {
    padding: 12px;
    border-bottom: 1px solid #dee2e6;
  }
  
  .ranking-table tr:hover {
    background: #f8f9fa;
  }
  
  .ranking-table tr:last-child td {
    border-bottom: none;
  } */

  /* The snackbar - position it at the bottom and in the middle of the screen */
  #snackmessagebar {
    visibility: hidden; /* Hidden by default. Visible on click */
    min-width: 450px; /* Set a default minimum width */
    margin-left: -225px; /* Divide value of min-width by 2 */
    background-color: #007c27; /* Black background color */
    color: #fff; /* White text color */
    text-align: center; /* Centered text */
    border-radius: 2px; /* Rounded borders */
    padding: 16px; /* Padding */
    position: fixed; /* Sit on top of the screen */
    z-index: 1; /* Add a z-index if needed */
    left: 50%; /* Center the snackbar */
    top: 90px; /* 30px from the top */
    font-size: 30px;
  }
  
  /* Show the snackbar when clicking on a button (class added with JavaScript) */
  #snackmessagebar.show {
    visibility: visible; /* Show the snackbar */
    /* Add animation: Take 0.5 seconds to fade in and out the snackbar.
    However, delay the fade out process for 2.5 seconds */
    /* -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
    animation: fadein 0.5s, fadeout 0.5s 2.5s; */
  }
  
  /* The snackbar - position it at the bottom and in the middle of the screen */
  #snackbar {
    visibility: hidden; /* Hidden by default. Visible on click */
    min-width: 250px; /* Set a default minimum width */
    margin-left: -125px; /* Divide value of min-width by 2 */
    background-color: #fd2727; /* Black background color */
    color: #fff; /* White text color */
    text-align: center; /* Centered text */
    border-radius: 2px; /* Rounded borders */
    padding: 16px; /* Padding */
    position: fixed; /* Sit on top of the screen */
    z-index: 1; /* Add a z-index if needed */
    left: 50%; /* Center the snackbar */
    bottom: 30px; /* 30px from the bottom */
  }
  
  /* Show the snackbar when clicking on a button (class added with JavaScript) */
  #snackbar.show {
    visibility: visible; /* Show the snackbar */
    /* Add animation: Take 0.5 seconds to fade in and out the snackbar.
    However, delay the fade out process for 2.5 seconds */
    -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
    animation: fadein 0.5s, fadeout 0.5s 2.5s;
  }
  
  /* Animations to fade the snackbar in and out */
  @-webkit-keyframes fadein {
    from {bottom: 0; opacity: 0;}
    to {bottom: 30px; opacity: 1;}
  }
  
  @keyframes fadein {
    from {bottom: 0; opacity: 0;}
    to {bottom: 30px; opacity: 1;}
  }
  
  @-webkit-keyframes fadeout {
    from {bottom: 30px; opacity: 1;}
    to {bottom: 0; opacity: 0;}
  }
  
  @keyframes fadeout {
    from {bottom: 30px; opacity: 1;}
    to {bottom: 0; opacity: 0;}
  }
  
  .mot_lichsu{
    background-color: #fff;
    float: left;
    border-right: 10px solid #f3f3f3;
    border-bottom: 10px solid #f3f3f3;
    padding: 10px;
  }
  
  @media screen and (orientation: portrait) {
    body::before {
        content: "Vui lòng xoay ngang màn hình để có trải nghiệm tốt nhất.";
        display: flex;
        align-items: center;
        justify-content: center;
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: rgba(0, 0, 0, 0.9);
        color: #fff;
        font-size: 24px;
        text-align: center;
        z-index: 9999;
        padding: 20px;
        box-sizing: border-box;
    }
  }
  
  .mot_lichsu .logo{
    padding: 0px;
  }
  .mot_lichsu .logo .ten_game{
    position: absolute;
    bottom: 10px;
    text-align: center;
    width: 100%;
    font-size: smaller;
  }
  
  .game_random_binary .logo{
    background: #dbec70 50% 30% url(images/game_random_binary.svg) no-repeat;
    background-size: 60px;
  }
  .game_random_number .logo{
    background: #a2ebeb 50% 30% url(images/game_random_number.svg) no-repeat;
    background-size: 50px;
  }
  .game_speed_number .logo{
    background: #a3c2d8 50% 30% url(images/game_speed_number.svg) no-repeat;
    background-size: 50px;
  }
  .game_random_word .logo{
    background: #abe4a9 50% 30% url(images/game_random_word.svg) no-repeat;
    background-size: 60px;
  }
  .game_random_card .logo {
    background: #8eee91 50% 30% url(images/game_random_card.svg) no-repeat;
    background-size: 60px;
  }
  .game_speed_card .logo{
    background: #c49fff 50% 30% url(images/game_speed_card.svg) no-repeat;
    background-size: 60px;
  }
  .game_name_face .logo{
    background: #feafaf 50% 30% url(images/game_name_face.svg) no-repeat;
    background-size: 60px;
  }
  .game_spoken_number .logo{
    background: #dbbf93 50% 30% url(images/game_spoken_number.svg) no-repeat;
    background-size: 40px;
  }
  .game_historic_date .logo{
    background: #f9c991 50% 30% url(images/game_historic_date.svg) no-repeat;
    background-size: 50px;
  }
  .game_abstract_image .logo{
    background: #f4b1f1 50% 30% url(images/game_abstract_image.svg) no-repeat;
    background-size: 60px;
  }
  
  .competitionSubjectCell{
    padding: 15px;background: #c1fab4;border-collapse: separate;border-radius: 25px;overflow: hidden;margin-top: 15;height: 180;width: 200;display: flex;flex-direction: column;align-items: center;
  }
  
  .competitionCell{
    padding: 15px;
    background: #ffffff;
    border-collapse: separate;
    border-radius: 25px;
    overflow: hidden;
    margin-top: 15;
  }
  
  .competitionCell .logo{
    width: 40px;
    height: 40px;
    background: transparent center center url('images/Next.png') no-repeat;
    background-size: 100%;
  }
  
  .competitionCell .SettingsTitle{
    font-size: 22px;
    font-weight: bold;
    text-align: left;
  }
  
  .competitionCell .SettingsSubTitle{
    font-size: 11px;
    text-align: left;
    color: #14121263;
  }
  
  /*make orange yellow line at left of competitionCell */
  /*make animation move from left to right of selected cell*/
  .competitionCellSelected{
    position: relative;
  }
  .competitionCellSelected::before{
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 95%;
    height: 100%;
    background: #ffd2ee;
    border-radius: 25px;
    animation: moveFromLeftToRight 0.3s linear ;
  }
  
  @keyframes moveFromLeftToRight {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(0%); }
  }
  
  
  /* HTML: <div class="loader"></div> */
  .loader_ball {
    width: 100px;
    height: 60px;
    display: flex;
    animation: l12-0 2s infinite linear;
  }
  .loader_ball::before,
  .loader_ball::after  {
    content:"";
    flex:4;
    background: 
      radial-gradient(at 50% 20%,#0000,#000a) bottom left/20px 20px repeat-x,
      linear-gradient(red 0 0) bottom/100% 20px no-repeat
      #ddd;
    -webkit-mask:
      repeating-linear-gradient(90deg,#000 0 4px,#0000 0 20px) 8px 0,
      radial-gradient(farthest-side,#000 90%,#0000) left bottom/20px 20px repeat-x;
  }
  .loader_ball::after {
    flex: 1;
    transform-origin: top;
    animation: l12-1 1s cubic-bezier(0,20,1,20) infinite;
  }
  @keyframes l12-0 { 
    0%,49.9% {transform: scaleX(1)}
    50%,100% {transform: scaleX(-1)}
  }
  @keyframes l12-1 { 
    100% {transform: rotate(-2deg)}
  }
  
  /* HTML: <div class="loader"></div> */
  .loader {
    width: fit-content;
    font-size: 40px;
    line-height: 1.5;
    font-family: system-ui,sans-serif;
    font-weight: bold;
    text-transform: uppercase;
    color: #0000;
    -webkit-text-stroke: 1px #000;
    background:
      radial-gradient(1.13em at 50% 1.6em,#000 99%,#0000 101%) calc(50% - 1.6em) 0/3.2em 100% text,
      radial-gradient(1.13em at 50% -0.8em,#0000 99%,#000 101%) 50% .8em/3.2em 100% repeat-x  text;
    animation: l9 2s linear infinite;
  }
  .loader:before {
    content: "Loading";
  }
  @keyframes l9 {
    to {background-position: calc(50% + 1.6em) 0,calc(50% + 3.2em) .8em}
  }
  
  /* The Modal (background) */
  .modal-fullscreen {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 4; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
    align-items: center;
    justify-content: center;
  }
  
  /* The Modal (background) */
  .modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 4; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  }
  
  /* Modal Content */
  .modal-content {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
  }
  
  /* The Close Button */
  .close {
    color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
  }
  
  .close:hover,
  .close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
  }
  
  .SettingsTitle{
    font-size: 22px;
    font-weight: bold;
    text-align: left;
  }
  
  .SettingsSubTitle{
    font-size: 11px;
    text-align: left;
    color: #14121263;
  }
  
  #countdown ul {
    /* background: 49px 7px url(images/line_vertical.svg) no-repeat;
    background-size: auto 80px; */
  }
  #countdown li {
    font-weight:bold;
    text-align: left;
    list-style: none;
    background: transparent left center url('/images/list_icon.svg') no-repeat;
    background-size: 20px;
    padding-left: 30px;
    padding-top: 5px;
    padding-bottom: 5px;
    color: #ccc;
  }
  #countdown li.duocchon{
    list-style: none;
    background: transparent left center url('/images/list_icon_active.svg') no-repeat;
    background-size: 20px;
    color: #000;
  }

  input, td, .slash, .digitMarkingSup, .digitMarkingSup2,.digitMarkingSupWord, .digitMarkingSub, .supermethemerowNumber, .separation {
    transform: translateZ(0);
    pointer-events: auto;
    z-index: 1;
    position: relative;
    backface-visibility: hidden;
    will-change: transform;
  }

  .supermethemerecallTable td {
    position: relative;
    transform-origin: center;
  }

  .supermethemerowNumber {
    position: relative;
    transform-origin: left center;
  }

  .separation {
    position: relative;
    transform-origin: center;
  }

  .separation::after {
    content: '';
    position: absolute;
    right: -1px;
    top: 0;
    height: 100%;
    width: 1px;
    background-color: #222;
    transform: translateZ(0);
    backface-visibility: hidden;
    will-change: transform;
  }

  .supermethemenumbersRecallTD.separation {
    border-right: none;
  }

  .slash {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
  }

  .digitMarkingSup, .digitMarkingSup2, .digitMarkingSupWord, .digitMarkingSub {
    position: absolute;
    transform-origin: center;
  }

  .scoreAtRow {
    position: absolute;
    transform: translateZ(0);
    backface-visibility: hidden;
    will-change: transform;
    transform-origin: left center;
  }

  body,
  html {
    color-scheme: light;
    margin: 0;
    height: 100%;
    padding: 0;
  }
  
  @media (prefers-color-scheme: dark) {
    html {
      background-color: white;
      color: black;
    }
  }
  
  body,
  html {
    margin: 0;
    height: 100%;
    padding: 0;
  }
  .supermetheme #darkenVignette,
  .supermetheme #hiddenDiv {
    position: fixed;
    height: 110%;
    opacity: 0;
    top: 0;
    left: 0;
    right: 0;
    pointer-events: none;
    width: 100%;
    z-index: 2;
    display: block;
    bottom: 0;
    cursor: pointer;
  }
  #bottomRow,
  #container,
  .overlay {
    position: absolute;
  }
  #countdownRecallTable,
  #countdownTable,
  .scoreTable,
  .settingsTable,
  .supermethemerecallTable {
    border-collapse: collapse;
  }
  .markCards,
  .markOther {
    filter: brightness(60%);
  }
  #dialog,
  #logoRow {
    height: 100px;
  }
  #header {
    height: 80px;
    margin: auto;
    padding: 8px 0;
  }
  #header div#logo {
    float: left;
    color: transparent;
    background: url(../images/logo.svg) center center/100% no-repeat;
    width: 100px;
    height: 50px;
  }
  #header div#menu {
    float: right;
    height: 100%;
    display: flex;
    justify-content: flex-end;
    align-content: center;
    align-items: center;
    flex-direction: row;
  }
  #header div#menu .menu-item {
    padding: 10px;
    display: inline-flex;
  }
  #header div#menu .menu-item.logout {
    padding-left: 30px;
  }
  .menu-item i {
    color: #00008b;
  }
  #header div#menu .menu-item.active,
  #header div#menu .menu-item:hover,
  .selection * {
    font-weight: 700;
  }
  #header .language_code,
  .supermecombobox {
    padding: 0 20px 0 10px;
    background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E")
      right 0.75rem center/10px 10px no-repeat #fff;
    border-radius: 30px;
    -webkit-appearance: none;
    -moz-appearance: none;
  }
  .bg-purple {
    background: #300032;
  }
  .bg-gray {
    background: #4a4a4a;
  }
  .bg-blue {
    background: #3265c4;
  }
  .bg-red {
    background: #c43235;
  }
  .selectionSkin,
  body {
    background-color: #000;
  }
  body {
    font-family: "Noto Sans SC", Arial, "Noto Sans", "News Cycle", sans-serif;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    --highlightColor: #eee;
    --optionColor: #eee;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
  }
  #container {
    width: 1300px;
    height: 830px;
    background-color: #ffffff;
    background-image: url("https://s3.superme.tamtriluc.vn/competitions/images/background.jpg");
    transform-origin: center;
    background-size: cover;
  }
  .scale-container {
    transform: scale(var(--scale-ratio));
  }
  .btn,
  .supermethemeboxGreen .btnSuperMe:hover {
    background-color: #222;
  }
  input[type="checkbox"] {
    -ms-transform: scale(2);
    -moz-transform: scale(2);
    -webkit-transform: scale(2);
    -o-transform: scale(2);
    transform: scale(2);
    padding: 10px;
    margin: 2px;
  }
  .supermetheme {
    color: rgba(53, 18, 18, 0.78);
    font-weight: 700 !important;
  }
  .container-fluid {
    overflow-y: hidden;
    overflow-x: hidden;
  }
  #bottomRow {
    top: 80%;
  }
  .supermetheme #hiddenDiv {
    background-image: radial-gradient(transparent 50%, #000 95%);
    background-color: rgba(0, 0, 0, 0);
  }
  .supermetheme #darkenVignette {
    background-image: radial-gradient(transparent 45%, #000 115%);
    background-color: rgba(0, 0, 0, 0.2);
  }
  .btn {
    color: #ededed;
  }
  .centred {
    text-align: center;
    margin: auto;
  }
  .selection {
    background-color: #ededed;
    font-weight: 700;
    border: 6px solid #3ce;
  }
  .supermethemeboxA,
  .supermethemeboxB {
    background-color: #ffffff;
  }
  .skinOptionImg {
    height: 125px;
  }
  .settingsTable {
    margin: 0 auto;
    font-size: inherit;
    width: 300px;
    font-weight: 700;
    color: inherit;
  }
  #countdownRecallText,
  #countdownText {
    font-size: 18pt;
  }
  #countdownTime {
    font-size: 250pt;
  }
  #countdownRecallTime {
    font-size: 300pt;
  }
  #countdownTable {
    margin: 0 auto;
    text-align: center;
    width: 100%;
  }
  #countdownRecallTable {
    margin: 0 auto;
    text-align: center;
  }
  .full-height,
  .supermethemememoHeight {
    height: 100%;
  }
  #topMargin {
    height: 10px;
  }
  #supermethemeMemoTimeInner,
  #supermethemeRecallTimeInner {
    font-size: 14pt;
  }
  .supermethemeboxA {
    font-weight: 700 !important;
    background-position: tope left;
    background-size: 100% auto;
    padding: 20px;
    border-radius: 0 !important;
  }
  .supermethemeboxAsingle,
  .supermethemeboxB,
  .supermethemeboxBsingle {
    font-weight: 700 !important;
    background-position: top left;
    background-size: 100% auto;
    padding: 20px;
    border-radius: 0 !important;
  }
  .supermethemeboxAsingle,
  .supermethemeboxBsingle {
    background-image: url("hugeWoodPaperAMatch.jpg");
    box-shadow: 0 2px 2px 1px rgba(0, 0, 0, 0.35),
      0 0 20px rgba(0, 0, 0, 0.1) inset;
    -moz-box-shadow: 0 2px 2px 1px rgba(0, 0, 0, 0.35),
      0 0 20px rgba(0, 0, 0, 0.1) inset;
    -webkit-box-shadow: 0 30px 1px 2px rgba(0, 0, 0, 0.38),
      15px -10px 60px 15px rgba(0, 0, 0, 0.08) inset;
  }
  .focusBox {
    margin: auto auto 8px;
    padding: 0 20px;
    text-align: center;
    border: 1px solid #000;
    border-radius: 3px;
  }
  .focusBoxBinary {
    font-size: 4em;
  }
  .focusBoxBinaryGrid {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .focusBoxBinaryGrid-row {
    display: flex;
    align-items: center;
  }
  .focusBoxBinaryGrid-digit {
    padding-left: 0.1em;
    padding-right: 0.1em;
    display: inline-block;
  }
  .focusBoxBinaryGrid-sep {
    width: 30px;
    display: inline-block;
  }
  .focusBoxNumbers {
    font-size: 5em;
  }
  .focusBoxWords {
    font-size: 4em;
    width: 100%;
  }
  .supermethemeboxGreen {
    background-image: url(felt2.png);
    background-size: 159px 159px;
    background-repeat: repeat;
    color: #eee;
    padding: 20px;
    box-shadow: 0 0 3px 2px rgba(0, 0, 0, 0.47);
    -moz-box-shadow: 0 0 3px 2px rgba(0, 0, 0, 0.47);
    -webkit-box-shadow: 0 0 3px 2px rgba(0, 0, 0, 0.47);
  }
  .supermethemeboxA:after,
  .supermethemeboxA:before,
  .supermethemeboxB:after,
  .supermethemeboxB:before {
    position: absolute;
    content: "";
    z-index: -1;
    top: -1;
    bottom: 0;
    left: 190px;
    right: 10px;
    border-radius: 100px/10px;
  }
  .supermethemeboxA:after,
  .supermethemeboxB:after {
    right: 10px;
    left: auto;
    transform: skew(4deg) rotate(3deg);
    -webkit-transform: skew(4deg) rotate(3deg);
    -moz-transform: skew(4deg) rotate(3deg);
    -o-transform: skew(4deg) rotate(3deg);
    -ms-transform: skew(4deg) rotate(3deg);
  }
  .overlay {
    width: 60%;
    left: 22%;
    top: 5rem;
    background-color: #3eb5c8;
    color: #222;
    font-size: 4rem;
    z-index: 2;
    opacity: 0.8;
  }
  .recallContent,
  .scoreContent {
    top: 130px;
    z-index: 4;
  }
  .supermethemepagelink {
    background-color: #000;
    opacity: 0.55;
    color: #eee;
  }
  .supermethemepagelinkred {
    background-color: #3eb5c8;
    opacity: 0.55;
    color: #eee;
  }
  #menuRecallDiv .menu,
  #menuScoreDiv .menu,
  .menu {
    background-color: transparent;
    list-style-type: none;
    padding-bottom: 20px;
    position: relative;
  }
  .menu a {
    text-decoration: none !important;
  }
  .menu li {
    float: left;
  }
  .menu li a {
    display: block;
    padding: 4px;
  }
  .menu li a:hover {
    color: #000;
    background-color: #ccc;
  }
  .menu {
    color: #000;
  }
  #menuDiv {
    z-index: 1;
  }
  #menuRecallDiv,
  #menuScoreDiv {
    position: absolute;
    left: 4%;
    top: 75px;
    z-index: 1;
  }
  #wrapper {
    position: relative;
    width: 80%;
    margin: 0 auto;
  }
  .footerDiv {
    position: absolute;
    bottom: 0;
    padding: 20px;
    width: 100%;
  }
  .memoContent,
  .recallContent,
  .scoreContent {
    padding: 2px;
    width: 100%;
    margin: 0 auto;
  }
  .scoreContent {
    position: absolute;
  }
  .supermethemerowNumber {
    border: none;
    color: red;
    width: 30px !important;
    opacity: 0.5 !important;
  }
  .supermethemebinaryMemo,
  .supermethemenumbersMemo {
    font-size: 18pt;
    width: 24px;
    padding-bottom: 2px;
    text-align: center;
    text-shadow: 0 0 1px rgba(30, 15, 15, 0.2);
    color: rgba(53, 18, 18, 0.78);
  }
  .supermethemebinarySelected,
  .supermethemenumbersSelected {
    background-color: var(--highlightColor);
    color: rgba(53, 18, 18, 0.9);
  }
  .supermethemewordsMemo {
    font-size: 14pt;
    padding-bottom: 2px;
    color: #222;
    opacity: 0.9;
  }
  .supermethemedatesSelected,
  .supermethemewordsSelected {
    background-color: var(--highlightColor);
    opacity: 0.88;
    transform: translateZ(0);
    backface-visibility: hidden;
    will-change: transform;
    position: relative;
    transform-origin: center;
  }
  .supermethemewordsRecall {
    background-color: rgba(0, 0, 0, 0);
    height: 23px !important;
    border-color: #222;
    border-width: 1px;
    border-style: none none dotted;
    opacity: 0.95;
    font-weight: 400 !important;
    color: rgba(0, 0, 230, 0.88) !important;
    text-shadow: 0 0 1px rgba(0, 0, 200, 0.25);
  }
  .supermethemedatesSelectedRecall,
  .supermethemewordsSelectedRecall {
    background-color: var(--highlightColor);
    border-style: solid;
  }
  .supermethemewordsInGroup {
    border-style: solid;
  }
  .supermethemedatesRecallTD {
    padding: 0;
    white-space: nowrap;
    position: relative;
  }

  .supermethemewordsRecallTD {
    padding: 0;
    white-space: nowrap;
    position: relative;
    width: 150px;
    max-width: 200px;
  }
  .supermethemedatesMemo,
  .supermethemedatesYearMemo,
  .supermethemewordsNum {
    padding-bottom: 2px;
    opacity: 0.9;
    color: #222;
  }
  /* Hide legacy appeal button; replaced by double-click interaction */
  .appealBtn { display: none !important; }
  .binaryRecallTD,
  .faceMemo {
    padding-top: 10px;
  }
  .supermethemewordsNum {
    font-size: 10pt;
    width: 30px !important;
  }
  .speaking_number {
    background: url(/images/listen.svg) center
      center/100px no-repeat;
    width: 100%;
    height: 500px;
  }
  .wordsTable {
    width: 95%;
  }
  .datesRecallTable,
  .datesTable,
  .wordsRecallTable {
    margin: 0 auto;
    /* width: 95%; */
    table-layout: fixed;
  }
  .supermethemedatesMemo {
    font-size: 1.9rem;
  }
  .supermethemedatesYearMemo {
    font-size: 1.9rem;
    padding-right: 10px;
  }
  .supermethemedatesYearRecall,
  .supermethemeimagesRecall {
    opacity: 0.95;
    font-weight: 400 !important;
    text-shadow: 0 0 1px rgba(0, 0, 200, 0.25);
    background-color: rgba(0, 0, 0, 0);
  }
  .supermethemedatesEventRecall {
    background-color: rgba(0, 0, 0, 0);
    font-weight: 400 !important;
    font-size: 1.9rem;
  }
  .supermethemedatesYearRecall {
    font-size: 2.2rem;
    color: rgba(0, 0, 230, 0.88) !important;
    animation: 899s infinite alternate glow;
    border-width: 1px;
    border-color: #222;
    border-style: none none dotted;
    height: 2.8rem;
    width: 7rem;
  }
  .imageNum,
  .imageRowNumCell {
    font-size: 10pt;
    text-align: center;
  }
  .bigCards {
    height: 240px;
  }
  .cardTable {
    background-image: url("Green.jpg");
    color: #eee;
  }
  .supermethemeboxGreen a:visited,
  .textCardTable {
    color: #eee;
  }
  .reverseCards {
    flex-direction: row-reverse;
    justify-content: flex-end;
    gap: 0;
  }
  .supermethemecardOneMemo,
  .supermethemecardOtherMemo {
    -webkit-box-shadow: 3px 3px 7px rgba(0, 0, 0, 0.3);
    box-shadow: 3px 3px 7px rgba(0, 0, 0, 0.3);
  }
  .supermethemecardImgSmall {
    height: 110;
    position: absolute;
    -webkit-box-shadow: 3px 3px 7px rgba(0, 0, 0, 0.3);
    box-shadow: 3px 3px 7px rgba(0, 0, 0, 0.3);
  }
  .supermethemecardImgBig {
    height: 200;
    border: 0.5px solid rgba(0, 0, 0, 0.22);
    border-radius: 10px;
    position: absolute;
    -webkit-box-shadow: 0.6px 0.75px 2.5px 0.75px rgba(0, 0, 0, 0.43);
    box-shadow: 0.6px 0.75px 1.75px 0.75px rgba(0, 0, 0, 0.45);
    z-index: 2;
  }
  .supermethemecardMemoFan {
    height: 100;
    transform-origin: center 750%;
    position: absolute;
    border: 0.5px solid rgba(0, 0, 0, 0.2);
    top: -80;
    left: 10%;
    -webkit-box-shadow: 0 1px 0.5px 0.5px rgba(0, 0, 0, 0.08);
    -moz-box-shadow: 0 1px 0.5px 0.5px rgba(0, 0, 0, 0.08);
    box-shadow: 0 1px 0.5px 0.5px rgba(0, 0, 0, 0.08);
  }
  .supermethemecardBoneyardDiv,
  .supermethemecardMemoFanDiv {
    position: relative;
    max-width: 100em;
    transform: rotate(-24deg);
  }
  .imageTable {
    width: 80%;
    margin: 0 auto;
  }
  .imageClass {
    text-align: center;
  }
  .imageRowNumCell {
    color: red;
    width: 5em;
  }
  .supermethemeimagesSelected {
    background-color: var(--highlightColor); 
  }

  .supermethemeimagesMemoSelected {
    border-radius: 8px;
    box-shadow: 0 0 6px 6px var(--highlightColor),
      6px 6px var(--highlightColor) inset;
    background-color: var(--highlightColor); 
  }

  .supermethemeimagesRecall {
    height: 25px !important;
    width: 25px !important;
    text-align: center;
    border-color: #222;
    border-width: 1px;
    border-style: none dotted ridge none;
    color: rgba(0, 0, 230, 0.88) !important;
    margin: 10;
  }
  .cardBoneyard {
    -webkit-transition: rotate 0.3s;
    -moz-transition: top 0.3s, left 0.3s;
    -o-transition: top 0.3s, left 0.3s;
    -ms-transition: top 0.3s, left 0.3s;
    transition: 0.6s;
    transform: rotate(0);
  }
  .cardBoneyardFan,
  .supermethemecardBoneyard {
    transform-origin: center 750%;
    position: absolute;
  }
  .cardBoneyardFan {
    height: 100;
    top: -150;
    left: 20%;
    -webkit-transition: top 0.3s, left 0.3s;
    -moz-transition: top 0.3s, left 0.3s;
    -o-transition: top 0.3s, left 0.3s;
    -ms-transition: top 0.3s, left 0.3s;
    transition: top 0.3s, left 0.3s;
  }
  .supermethemecardBoneyard {
    height: 130;
    top: -80;
    left: 10%;
    -webkit-box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.1);
    box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.1);
    border: 0.5px solid rgba(0, 0, 0, 0.28);
  }
  .supermethemebinaryRecall,
  .supermethemenumbersRecall {
    border-color: rgba(53, 18, 18, 0.78);
    border-width: 1px;
    opacity: 0.95;
  }
  .cardRecallNum {
    position: absolute;
  }
  .cardContainer {
    display: flex;
    max-width: 100em;
  }
  .cardRecall {
    flex: 1;
    height: 110;
    width: 80;
    -webkit-box-shadow: 3px 3px 7px rgba(0, 0, 0, 0.3);
    box-shadow: 3px 3px 7px rgba(0, 0, 0, 0.3);
  }
  .supermethemebinaryInGroup,
  .supermethemebinaryRecall,
  .supermethemebinarySelectedRecall,
  .supermethemenumbersRecall {
    height: 25px !important;
    width: 20px !important;
    text-align: center;
    color: rgba(0, 0, 230, 0.88) !important;
    font-weight: 400 !important;
    font-size: 21;
  }
  .supermethemeboxGreen .cardRecallSelected {
    border-radius: 8px;
    box-shadow: 0 0 4px 3px #ddd, 5px 5px #ddd inset;
  }
  .cardRecallCorrect {
    border-radius: 8px;
    box-shadow: 0 0 3px 3px #3f3, 5px 5px #3f3 inset;
  }
  .cardRecallIncorrect {
    border-radius: 8px;
    box-shadow: 0 0 3px 3px #f33, 5px 5px #f33 inset;
  }
  .cardRecallCorrected {
    border-radius: 8px;
    box-shadow: 0 0 3px 3px #3a3, 5px 5px #3a3 inset;
  }
  .supermethemebinaryRecallTD,
  .supermethemenumbersRecallTD {
    padding-top: 10px;
    -webkit-box-shadow: 0 0 1px 1px rgba(30, 30, 30, 0);
    text-shadow: 0 0 1px 1px #000;
    position: relative;
  }
  .supermethemebinaryInGroup,
  .supermethemebinaryRecall,
  .supermethemebinarySelectedRecall,
  .supermethemenameRecall,
  .supermethemenumbersRecall {
    text-shadow: 0 0 1px rgba(0, 0, 200, 0.25);
    padding-left:0px;
    padding-right:0px;
  }
  .supermethemeimagesRecallTD {
    position: relative;
  }
  @keyframes glow {
    to {
      text-shadow: 0 0 4px rgba(0, 0, 200, 0.6);
    }
  }
  .supermethemenumbersRecall {
    background-color: rgba(0, 0, 0, 0);
    border-style: none dotted dotted none;
  }
  .supermethemenumbersInGroup,
  .supermethemenumbersSelectedRecall {
    background-color: var(--highlightColor) !important;
  }

  .highlight {
    background-color: var(--highlightColor) !important;
  }
  .supermethemebinaryRecall {
    background-color: rgba(0, 0, 0, 0);
    border-style: none dotted ridge none;
    font-size: 35;
  }
  .supermethemebinarySelectedRecall {
    background-color: var(--highlightColor);
    border: 1px solid #222;
    font-size: 35;
  }
  .supermethemebinaryInGroup {
    background-color: rgba(0, 0, 0, 0);
    border: 1px solid rgba(53, 18, 18, 0.78);
    font-size: 35;
  }
  .binaryInGroup,
  .binaryRecall,
  .binarySelectedRecall {
    height: 30px !important;
    width: 30px !important;
  }
  .binaryRecall {
    background-color: #ededed;
    text-align: center;
    opacity: 0.82;
  }
  .binarySelectedRecall {
    background-color: var(--highlightColor);
    text-align: center;
    opacity: 0.82;
  }
  .binaryInGroup {
    background-color: #add8e6;
    text-align: center;
  }
  .nameTable,
  .supermethemerecallTable {
    width: 80%;
    margin: 0 auto;
    text-align: center;
  }
  .supermethemerecallTable {
    opacity: 0.82;
  }
  .locusStart {
    border-left: 1px solid #222;
  }
  .separation {
    border-right: 1px solid #222;
  }
  .separationRecall {
    border-right: 3px solid #000;
  }
  .nameTable {
    white-space: nowrap;
  }
  .faceMemo {
    text-align: center;
  }
  .nameMemo {
    text-align: center;
    padding-bottom: 10px;
  }
  .supermethemenameRecall {
    background-color: rgba(0, 0, 0, 0);
    height: 23px !important;
    width: 90%;
    margin-left: 5px;
    margin-right: 5px;
    border-color: #222;
    border-width: 1px;
    border-style: none none dotted;
    opacity: 0.95;
    text-align: center;
    font-weight: 400 !important;
    font-size: 16;
    color: rgba(0, 0, 230, 0.88) !important;
  }
  #spanShift {
    font-size: 16px;
    position: relative;
    left: 30px;
    top: 10px;
  }
  #cardsMemoTimeScore,
  .supermethemeboxGreen #cardsMemoTime {
    font-size: 16px;
    color: #eee;
    position: relative;
    top: 10px;
  }
  #cardSet {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
  }
  #divDecks,
  .flexChild {
    flex: 1;
  }
  .scoreTable {
    text-align: center;
    margin: 0 auto;
    table-layout: fixed;
  }
  .supermethemescore {
    border: 1px solid #d3d3e3;
    height: 26px;
    width: 40px;
    text-align: center;
    padding: 0;
    font-weight: 400 !important;
    font-size: 25;
    color: rgba(0, 0, 230, 0.7) !important;
    text-shadow: 0 0 3px rgba(0, 0, 230, 0.3) !important;
  }
  #spanOuterScore,
  .countdownDisciplineTitle,
  .disciplineTitle {
    font-size: 20pt;
    vertical-align: middle;
  }
  #spanScore {
    font-size: 40pt;
    vertical-align: middle;
  }
  #spanCorrect {
    font-size: 14pt;
    vertical-align: middle;
  }
  .disciplineTitle {
    display: inline;
  }
  #btnBackToSelection2 {
    position: absolute;
    left: 40px;
    top: 20px;
  }
  .disciplineTitleMemo {
    font-size: 18pt;
    vertical-align: top;
    font-style: italic;
  }
  .disciplineHeadingTable {
    position: relative;
    left: 40px;
    table-layout: fixed;
    width: 95%;
    color: inherit;
  }
  .dateMarkingSub,
  .slash,
  .wordMarkingSub {
    position: absolute;
  }
  .disciplineHeadingTable td {
    padding-right: 20px;
  }
  .supermetheme button,
  .supermethemeboxGreen button {
    font-size: 1.8rem;
    display: inline-block;
    text-transform: uppercase;
    border-image: initial;
    padding: 0.25rem 1rem;
    background-color: transparent;
  }
  .digitMarkingSup {
    top: 0 !important;
    left: -0.001em !important;
  }

  .digitMarkingSupWord {
    top: 0 !important;
    right: -0.001em !important;
  }

  .digitMarkingSup2 {
    top: 7 !important;
    left: 5 !important;
  }
  .binaryMarkingSup {
    top: -0.7em !important;
    left: -0.4em !important;
    font-size: 135% !important;
  }
  .digitMarkingSub {
    left: -0.8em !important;
    bottom: 0.0em !important;
    font-size: 130% !important;
    color: #009e00;
    font-size: 15px !important;
  }
  .imageMarkingSup {
    top: -1.3em !important;
    left: -4.1em !important;
    font-size: 125% !important;
  }
  .imageMarkingSub {
    left: -4em !important;
    bottom: -0.1em !important;
    font-size: 120% !important;
  }
  .wordMarkingSup {
    top: -1.3em !important;
    left: -2em !important;
    font-size: 85% !important;
  }
  .dateMarkingSub {
    bottom: 0.5em !important;
    left: -0.8em !important;
    font-size: 200% !important;
  }
  .dateMarkingSup {
    top: -0.8em !important;
    left: -1.2em !important;
    font-size: 75% !important;
  }
  .wordMarkingSub {
    bottom: 0.7em !important;
    left: -3em !important;
    font-size: 150% !important;
  }
  .nameFMarkingSup {
    top: -2.9em !important;
    left: -16.5em !important;
    font-size: 80% !important;
  }
  .nameFMarkingSub {
    left: -5.5em !important;
    top: -0.7em !important;
    font-size: 200% !important;
  }
  .nameSMarkingSup {
    top: -2.9em !important;
    left: -4.7em !important;
    font-size: 80% !important;
  }
  .nameSMarkingSub {
    left: -3em !important;
    top: -0.7em !important;
    font-size: 200% !important;
  }
  .slash,
  .slashNames {
    color: rgba(242, 0, 0, 0.6) !important;
    z-index: 2;
    text-shadow: 0 0 2px rgba(242, 0, 0, 0.3) !important;
    font-size: 15pt;
    font-weight: 400 !important;
  }
  .supermethemenamesSelectedRecall {
    background-color: var(--highlightColor);
  }
  .tableRToL,
  .tableRToL tr td input {
    text-align: right;
  }
  .slashNames {
    position: relative;
    top: 30px;
  }
  #scoreRow,
  #competitionContentView,
  .no-close .ui-dialog-titlebar-close {
    display: none;
  }
  .keybutton {
    border: 1px solid #000;
    border-radius: 3px;
    padding: 1px;
  }
  .supermethemeboxGreen .keybutton {
    border: 1px solid #eee;
    border-radius: 3px;
    padding: 1px;
  }
  .keycombo {
    color: #777;
    font-size: smaller;
  }
  .supermethemeboxGreen .keycombo {
    color: #eee;
    font-size: smaller;
  }
  #divInstructions {
    width: 60%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: center;
  }
  .markOther {
    opacity: 0.9;
    background: #90c3f2;
  }
  .markOther2 {
    opacity: 0.9;
    background: rgb(231, 241, 255);
    box-shadow: rgb(77, 171, 247) 0px 0px 0px 2px inset;
    
  }
  .markOtherImage2 {
    opacity: 0.9;
    border-radius: 8px;
    box-shadow: 0 0 6px 6px rgb(77, 171, 247),
      6px 6px rgb(77, 171, 247) inset;
  }
  .inverted {
    -webkit-filter: invert(0.8);
    filter: invert(0.8);
  }
  .instructionsTable {
    margin: 0 auto;
    width: 700px;
  }
  .supermethemeboxGreen .instructionsTable th {
    color: #eee;
    font-size: larger;
  }
  .instructionsTable tr {
    border-bottom: 1px solid #d3d3d3;
  }
  .supermethemeboxGreen .instructionsTable tr td {
    font-weight: 700;
    color: #eee;
  }
  .instructionsTable tr td:first-child {
    font-weight: 700;
    color: #191970;
  }
  .supermetheme .instructionsTable tr td:first-child {
    font-weight: 700;
    color: #000;
  }
  .highlighterListItemBlank {
    flex: 1;
    height: 40px;
  }
  .highlighterListItemSelected {
    box-shadow: 0 0 6px 4px var(--highlightColor);
  }
  .noHighlightListItemSelected {
    box-shadow: 0 0 6px 4px #bc8f8f;
  }
  .flexContainer {
    flex: 4;
    height: 40px;
    display: flex;
    justify-content: space-around;
  }
  .highlighterListItem {
    flex: 3;
    height: 40px;
    opacity: 0.8;
    cursor: pointer;
    border-radius: 5px;
  }
  .highlighterListItem:hover {
    animation: 1s linear infinite alternate colourbuttonglow;
  }
  .noHighlightItem {
    flex: 3;
    height: 40px;
    border: 2px dashed #ccc;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1em;
    color: #333;
    cursor: pointer;
    border-radius: 5px;
  }
  .noHighlightItem:hover {
    animation: 1s linear infinite alternate nocolourbuttonglow;
  }
  
  .btnSuperMe {
    border-radius: 30px;
      border: 0px solid #3b8cbf;
      background-color: #439fd8;
      padding: 10px 30px;
      color: #eee;
  }
  .btnSuperMe:hover {
    background-color: #439fd8;
  }
  .flexParent {
    display: flex;
  }
  .dialogFlex {
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .settingsButtons {
    position: absolute;
    width: 100%;
    margin: 0 auto;
    justify-content: space-around;
    bottom: 20px;
  }
  #spanCorrect,
  #spanOuterScore,
  .supermetheme #countdownRecallText,
  .supermetheme #countdownText,
  .supermetheme #divInstructions,
  .supermetheme #divPreview,
  .supermetheme #scoreContentDiv,
  .supermetheme #spanScore,
  .supermetheme #supermethemememoTimeInner,
  .supermetheme h3 {
    text-shadow: 0 0 1px rgba(30, 15, 15, 0.2);
  }
  .supermetheme
    > :not(.supermethemeboxGreen)
    > #settingsBox
    > input[type="text"] {
    background-color: transparent;
    border-width: 1px;
    color: rgba(0, 0, 230, 0.88) !important;
    font-weight: 400 !important;
    font-size: 35;
    text-shadow: 0 0 1px rgba(0, 0, 200, 0.25);
    --highlightColor: transparent;
  }
  .supermetheme #inpMiniGroupings,
  .supermetheme > #settingsBox > :not(.supermethemeboxGreen) > input {
    background-color: transparent;
    border-color: #111;
    border-style: solid;
    border-width: 1px;
    border-top: none;
    border-left: none;
    border-right: none;
    line-height: normal;
    color: rgba(0, 0, 230, 0.88) !important;
    font-weight: 400 !important;
    font-size: 35;
    --highlightColor: transparent;
  }
  .supermethemeboxGreen input[type="text"] {
    background-color: transparent;
    border-width: 1px;
    -webkit-mask-image: none;
    color: #eee !important;
    font-weight: 400 !important;
    font-size: 25;
    --highlightColor: transparent;
  }
  .supermethemeboxGreen select {
    color: #222;
  }
  .supermetheme #inpSeparation,
  .supermetheme #inpSeparationBin {
    background-color: transparent;
    border-color: #111;
    border-style: solid;
    border-width: 1px;
    border-top: none;
    border-left: none;
    border-right: none;
    line-height: normal;
    color: rgba(0, 0, 230, 0.88) !important;
    font-weight: 400 !important;
    font-size: 35;
  }
  supermetheme #divGrouping {
    font-size: 17;
    text-shadow: 0 0 1px rgba(30, 15, 15, 0.2);
  }
  .supermetheme #divHighlightColour {
    text-shadow: 0 0 1px rgba(30, 15, 15, 0.2);
    opacity: 0.65;
  }
  .supermetheme #countdownRecallTime,
  .supermetheme #countdownTime {
    color: rgba(38, 18, 18, 0.81);
    text-shadow: 0 0 1px rgba(30, 15, 15, 0.2);
  }
  .supermethemeboxGreen #countdownRecallText,
  .supermethemeboxGreen #countdownRecallTime,
  .supermethemeboxGreen #countdownText,
  .supermethemeboxGreen #countdownTime {
    color: #eee;
    text-shadow: 0 0 1px rgba(30, 15, 15, 0.2);
  }
  .supermetheme #memoContentDiv,
  .supermetheme .paperContent .disciplineTitleMemo {
    color: rgba(53, 18, 18, 0.78);
    text-shadow: 0 0 1px rgba(30, 15, 15, 0.2);
  }
  .supermethemeboxGreen a {
    color: #add8e6;
  }
  .glowButton {
    animation: 1.6s infinite alternate buttonglow;
  }
  @keyframes buttonglow {
    0% {
      box-shadow: 0 0 7px 1px var(--highlightColor);
    }
    100% {
      box-shadow: 0 0 7px 6px var(--highlightColor);
    }
  }
  @keyframes colourbuttonglow {
    0% {
      box-shadow: 0 0 7px 1px var(--optionColor);
    }
    100% {
      box-shadow: 0 0 7px 6px var(--optionColor);
    }
  }
  @keyframes nocolourbuttonglow {
    0% {
      box-shadow: 0 0 7px 1px #fff;
    }
    100% {
      box-shadow: 0 0 7px 6px #fff;
    }
  }
  #dialog {
    background-color: #3eb5c8;
    text-align: center;
    padding: 10px;
    line-height: 100px;
  }
  .supermetheme button {
    color: rgba(0, 180, 180, 0.8);
    font-weight: 700;
    border-width: 0.125rem;
    border-style: solid;
    border-color: rgb(0, 180, 180, 0.7);
    border-radius: 0.75rem;
  }
  .supermetheme button:hover {
    color: #000;
    animation: 1.1s infinite alternate forwards buttonglo;
  }
  .supermethemeboxGreen button {
    color: #eee;
    font-weight: 700;
    border: 0.125rem solid #eee;
    border-radius: 0.75rem;
  }
  .supermethemeboxGreen button:hover {
    color: #ddd;
    animation: none;
  }
  .cardSettings {
    border: 2px solid #333;
    padding: 5px;
    margin: 5px;
  }
  .groupingSettings {
    font-size: 1.5em;
    font-weight: 700;
  }
  #intermediateDiv,
  #intermediateDivSR {
    font-size: 60;
  }
  @keyframes buttonglo {
    0%,
    100% {
      border-color: rgb(0, 180, 180, 0.8);
      color: rgba(0, 180, 180, 0.7);
      background-color: transparent;
      box-shadow: 0 0 0 0 #3eb5c8;
    }
    25% {
      border-color: rgb(0, 180, 180, 0.6);
      color: rgba(0, 180, 180, 0.5);
      background-color: transparent;
      box-shadow: 0 0 0 0 #3eb5c8;
    }
    75% {
      border-color: #00b4b4;
      color: rgba(0, 180, 180, 0.9);
      background-color: transparent;
      box-shadow: 0 0 6px 4px, rgb(0, 180, 180, 0.85);
    }
  }
  .flash {
    -webkit-animation-name: flash-animation;
    -webkit-animation-duration: 0.9s;
    animation-name: flash-animation;
    animation-duration: 0.9s;
  }
  @-webkit-keyframes flash-animation {
    from {
      box-shadow: 0 0 1px 1px #fff;
    }
    to {
      box-shadow: default;
    }
  }
  @keyframes flash-animation {
    from {
      box-shadow: 0 0 1px 1px #fff;
    }
    to {
      box-shadow: default;
    }
  }
  .bigflash {
    -webkit-animation-name: bigflash-animation;
    -webkit-animation-duration: 1.5s;
    animation-name: bigflash-animation;
    animation-duration: 1.5s;
  }
  @-webkit-keyframes bigflash-animation {
    from {
      box-shadow: 0 0 10px 6px #eee;
    }
    to {
      box-shadow: default;
    }
  }
  @keyframes bigflash-animation {
    from {
      box-shadow: 0 0 10px 6px #eee;
    }
    to {
      box-shadow: default;
    }
  }
  .btnSuperMe:disabled,
  .btnSuperMe[disabled] {
    opacity: 0.5;
  }
  .supermethemeboxGreen #btnStartMemoCountdown {
    --highlightColor: #eee;
  }
  
  .feedback-modal {
    display: none;
    position: fixed;
    z-index: 1001;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
  }
  
  .feedback-modal-content {
    background-color: #fefefe;
    margin: 5% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 60%;
    max-width: 700px;
    max-height: 700px;
    border-radius: 8px;
    position: relative;
    overflow-y: auto;
  }
  
  .feedback-close {
    position: absolute;
    right: 20px;
    top: 10px;
    color: #aaa;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
  }
  
  .feedback-close:hover {
    color: #000;
  }
  
  .feedback-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding-right: 10px; /* Thêm padding để tránh bị che bởi thanh scroll */
  }
  
  .feedback-form-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
  }
  
  .feedback-form-group label {
    font-weight: bold;
    color: #333;
  }
  
  .feedback-form-group input,
  .feedback-form-group textarea {
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
  }
  
  .feedback-form-group textarea {
    min-height: 150px;
    resize: vertical;
  }
  
  .feedback-form-group input:focus,
  .feedback-form-group textarea:focus {
    outline: none;
    border-color: #0084ff;
    box-shadow: 0 0 0 2px rgba(0,132,255,0.2);
  }
  
  .feedback-attachments {
    border: 2px dashed #ddd;
    padding: 20px;
    text-align: center;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
  }
  
  .feedback-attachments:hover {
    border-color: #0084ff;
    background-color: rgba(0,132,255,0.05);
  }
  
  .feedback-attachments-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
  }
  
  .feedback-attachment-item {
    position: relative;
    width: 100px;
    height: 100px;
    border-radius: 4px;
    overflow: hidden;
  }
  
  .feedback-attachment-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  .feedback-attachment-item video {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  .feedback-attachment-remove {
    position: absolute;
    top: 5px;
    right: 5px;
    background: rgba(0,0,0,0.5);
    color: white;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 12px;
  }
  
  .feedback-submit-btn {
    background-color: #0084ff;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    transition: all 0.3s ease;
  }
  
  .feedback-submit-btn:hover {
    background-color: #0073e6;
  }
  
  .feedback-submit-btn:disabled {
    background-color: #ccc;
    cursor: not-allowed;
  }
  
  .playButton {
    width: 140px;
    height: 140px;
    border: none;
    background: transparent url(/images/listen.svg) center center no-repeat;
    background-size: 30px;
    cursor: pointer;
    padding: 0;
    font-size: 0; /* Hide text content */
  }
  
  .playButton:hover {
    transform: scale(1.1);
    transition: transform 0.2s ease;
  }
  
  /* Competition Dropdown Menu */
  .competition-dropdown {
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    z-index: 1000;
  }
  
  .dropdown-item {
    padding: 8px 16px;
    cursor: pointer;
    transition: background-color 0.2s;
  }
  
  .dropdown-item:hover {
    background-color: #f5f5f5;
  }
  
  /* Print Memo View */
  .print-memo-container {
    padding: 20px;
  }
  
  .print-memo-header {
    display: flex;
    gap: 20px;
    align-items: center;
    margin-bottom: 20px;
  }
  
  .examiner-filter {
    flex: 1;
  }
  
  .examiner-select {
    width: 100%;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
  }
  
  .print-memo-actions {
    display: flex;
    gap: 10px;
  }
  
  .btn-view, .btn-print {
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.2s;
  }
  
  .btn-view {
    background-color: #0084ff;
    color: white;
  }
  
  .btn-print {
    background-color: #28a745;
    color: white;
  }
  
  .btn-view:hover {
    background-color: #0073e6;
  }
  
  .btn-print:hover {
    background-color: #218838;
  }
  
  .print-memo-content {
    height: 600px;
    background-color: #f8f9fa;
    border: 1px solid #ddd;
    border-radius: 4px;
  }
  
  /* Competition Dropdown Styles */
  .competition-dropdown {
    position: absolute;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    z-index: 10000;
    min-width: 120px;
    animation: fadeIn 0.2s ease;
  }
  
  .dropdown-item {
    padding: 8px 12px;
    cursor: pointer;
    border-bottom: 1px solid #eee;
    transition: background-color 0.2s ease;
  }
  
  .dropdown-item:hover {
    background-color: #f8f9fa;
  }
  
  .dropdown-item:last-child {
    border-bottom: none;
  }
  
  /* Appeal Status Styles */
  .appeal-pending {
    background-color: rgba(255, 165, 0, 0.1);
    border: 1px solid rgba(255, 165, 0, 0.3);
  }
  
  .appeal-approved {
    background-color: rgba(76, 175, 80, 0.1);
    border: 1px solid rgba(76, 175, 80, 0.3);
  }
  
  .appeal-rejected {
    background-color: rgba(244, 67, 54, 0.1);
    border: 1px solid rgba(244, 67, 54, 0.3);
  }
  
  /* Appeal Button Styles */
  .appealBtn {
    transition: all 0.2s ease;
    opacity: 0.8;
  }
  
  .appealBtn:hover {
    opacity: 1;
    transform: scale(1.1);
  }
  
  /* Animation */
  @keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
  }