.main-page{
    background-color: #f8f8f8;
}

.subheader{
    margin: 1em 0;
}
/*************************************************************************************
 * Control Panel Container
 ************************************************************************************/
 .control_panel{
    border: 1px solid;
    padding: 0.5em;
    margin: 0.5em 0;
    background: blanchedalmond;
    
 }
/*************************************************************************************
 * Calculator Popup
 ************************************************************************************/
    #calculator-popup {
        position: absolute;
        top: 100px;
        left: 100px;
        width: 200px;
        background: #fff;
        border: 2px solid silver;
        border-radius: 5px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        padding: 10px 10px 10px 10px;
        display: none; 
    }
    .close-btn {
        position: absolute;
        top: 0;
        right: -55px;
        background: black;
        color: white;
        border: none;
        border-radius: 10%;
        cursor: pointer;
        text-align: center;
        line-height: 18px;   
    }
    .close-btn:hover{
        background-color: #eee;   
    }
    #display {
        width: 100%;
        height: 30px;
        margin-bottom: 10px;
        text-align: right;
        font-size: 16px;
        border: 1px solid #ccc;
        border-radius: 4px;
        padding: 5px;
    }
    .buttons {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 5px;
    }
    .btn {
        padding: 10px;
        background: #f1f1f1;
        border: 1px solid #ccc;
        border-radius: 4px;
        cursor: pointer;
        text-align: center;
        font-size: 16px;
    }
    .btn.operator {
        background: #ddd;
        color: #333;
    }

/*************************************************************************************
 * Main Page Login Grid Container
 ************************************************************************************/
.main-login-grid-container,.inside-grid-container {
    display: grid;
    grid-template-columns: 25% 50% 25%;
    width: 100%; /* Adjust as needed */
    background-color: #fff;
    padding: 0.3em;
}

.main-login-grid-cell,.inside-grid-element {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
}
.main-login-grid-cell p{
    word-wrap: break-word;
}


.login-top{
    z-index: 25;
}
#rowcontrol {
display:inline-block;
position:relative;
font-size:large;
}

.dot {
display:inline-flex;
align-items:center;
justify-content:center;
vertical-align:middle;
height:auto;
width:auto;
margin-right:0.35rem;
border-radius:0;
background:transparent !important;
font-family:'Material Symbols Rounded';
font-size:1.3rem;
font-variation-settings:'FILL' 0,'wght' 700,'GRAD' 0,'opsz' 24;
line-height:1;
color:#2f6f91;
}

.dotyellow {
background:transparent !important;
color:#9a3226;
}

.dotgreen {
background:transparent !important;
color:#2f6f91;
}

.dotyellow::before {
content:"history";
}

.dotgreen::before {
content:"fiber_new";
}

.question-view-status-icon {
display:inline-flex;
align-items:center;
justify-content:center;
vertical-align:middle;
margin-right:0.35rem;
font-size:1.3rem;
line-height:1;
color:#2f6f91;
}

.question-view-status-icon.is-viewed {
color:#9a3226;
}
/* Slider */
#slider {
border-left:0.2em solid;
border-color:#5298bc;
padding-left:1em;
}


.section {
border:0.2em solid gold;
margin:1em 0 1em 0;
padding:0.7em;
}

div.disabled {
pointer-events:none;
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
}

div.disabled *:focus {
outline:0;
}

#flashcard_break {
border:1px solid silver;
margin:1em 0 1em 0;
}

#keyword{
    height: 3em;
    color: #000;
}

body {
min-height:100%;
background-color: #f8f8f8;
}

.omt_section,.psych_dx_section,.psych_dsm5_section {
border:2px solid silver;
padding:0.3em;
margin:0.5em auto;
}

.body {
margin:0 auto;
max-width:100%;


padding:.5em;
background-color: #fff;
font-family:arial,helvetica;
width:1024px;
height:max-content;
position:relative;
top: 5em;
}

.sorter_button {
vertical-align:middle;
margin:0.3em;
}

.ck.ck-toolbar.ck-toolbar_grouping {
}

.ck-editor__editable {
height:40em;
}

.photo {
display:block;
height:auto;
width:8em;
cursor:pointer;
overflow:hidden;
white-space:nowrap;
text-indent:100%;
}

#expupdater,#sexplanation {
border:1px solid #5298bc;
}

.styler {
    margin: 5em auto;
    max-width: 70em;
    background: #fff;
    padding-bottom: 1em;
    border-bottom-right-radius: 1em;
    border-bottom-left-radius: 1em;
}

.strike-text {
text-decoration:line-through;
color:#ccc;
}

.strike-text input {
border:1px solid #ccc;
}

.logo,.tiny-logo {
height:auto;
vertical-align:middle;
margin:0px auto;
}

.logo {
max-width:150px;
}

.icon {
max-width:1.5em;
height:auto;
padding-bottom:.3em;
}

#qauthor {
text-align:center;
cursor:pointer;
}

.current_category {

color: #000;
font-size:1.4em;
}

.tiny-logo {
max-width:100px;
}

img.logo {
padding:0.3em;
}

#available_questions {
display:inline-block;
width:100%;
margin:0px auto;
text-align:center;
}

#copyright {
text-align:center;
margin:.5em auto;
font-size:0.8em;
color:grey;
}

.subpage-title {
}

.main-title,.subpage-title {

text-align:center;
font-weight:bold;
color:purple;
font-size:2em;
}

.login-header {

 align-items: center;
}

.page_header {
text-align:center;
font-weight:bold;
font-family:Arial;
color: #5298bc;
background:#fff;
background-image:url( '/images/blueberry-potato.jpg ');
background-position:left;
background-size:12%;
background-repeat:no-repeat;
}

.loading-animation {
width:30%;
max-height:100%;
}

#notice {
margin:1em 3em;
border:0.3em solid red;
padding:0.3em;
}

.logo-right-title {
font-size:1.7em;
color:#5298bc;
}

.left-align {
float:left;
width:45%;
}

.ui-widget-content a {
color:#337ab7;
}

#available_questions {
font-size:2em;

}

.qimage {
display:block;
max-width:500px;
max-height:500px;
width:auto;
height:auto;
}

#go_button {
margin:0px 1em;
color:#000;
height: 3em;
}

.question_block {
font-size:1.3em;
margin: 1em 0 1em;
}

.answer_block {
text-indent:1em;
margin:0.5em auto;
}

.correct {
font-weight:bold;
background:#d6f6d5;
padding:0.8em 0em 0.8em 0;
margin:0.5em 0em 0.5em 0;
}

.incorrect {
color:#999999;
background:#ffcccb;
padding:0.8em 0em 0.8em 0;
margin:0.5em 0em 0.5em 0;
}

.h4-header{
    font-weight: 800;
    font-family: arial;
    font-size: large;
  } 
.rate_response,#submit_status,#upexpl_msg {

color:purple;
font-weight:bold;
text-align:center;
}

.header {
font-weight:bold;
text-align:center;
font-size:1.4em;
padding:0.3em;


color:#5298bc;
}

.subtitle {
text-align:center;
font-family:arial;
color:#000;
}

.qlabel {
border:2px solid #fff;
line-height:28px;
padding:0.3em;
color: #555;
}

#answers {
    margin: 0px auto 1em;
    font-size: 1.3em;
    cursor: pointer;
}

.flashcard-mode-toolbar {
align-items:center;
display:flex;
flex-wrap:wrap;
gap:0.75rem;
justify-content:flex-start;
margin:0.85rem auto;
max-width:1120px;
padding:0 0.4rem;
}

.flashcard-mode-switch {
align-items:center;
cursor:pointer;
display:inline-flex;
gap:0.55rem;
margin:0;
}

.flashcard-mode-switch input {
height:1px;
opacity:0;
position:absolute;
width:1px;
}

.flashcard-mode-slider {
background:#c8d7df;
border:1px solid rgba(22,55,71,0.22);
border-radius:999px;
display:inline-flex;
height:1.55rem;
position:relative;
transition:background 0.2s ease;
width:2.9rem;
}

.flashcard-mode-slider::after {
background:#fff;
border-radius:999px;
box-shadow:0 2px 7px rgba(22,55,71,0.25);
content:"";
height:1.15rem;
left:0.18rem;
position:absolute;
top:0.16rem;
transition:transform 0.2s ease;
width:1.15rem;
}

.flashcard-mode-switch input:checked + .flashcard-mode-slider {
background:#2f6f91;
}

.flashcard-mode-switch input:checked + .flashcard-mode-slider::after {
transform:translateX(1.3rem);
}

.flashcard-mode-label {
color:#163747;
font-weight:900;
}

.flashcard-mode-status {
background:#eef6fb;
border:1px solid rgba(82,152,188,0.28);
border-radius:999px;
color:#315c70;
font-size:0.88rem;
font-weight:800;
padding:0.32rem 0.7rem;
}

.flashcard-explanation-switch {
background:#fff;
border:1px solid rgba(82,152,188,0.22);
border-radius:999px;
padding:0.28rem 0.62rem 0.28rem 0.35rem;
}

.flashcard-study-layout {
display:grid;
gap:1rem;
grid-template-columns:minmax(0,1fr) minmax(260px,0.34fr);
margin:0.85rem auto 1.1rem;
max-width:1120px;
padding:0 0.4rem;
}

.flashcard-card-column,
.flashcard-side-panel {
background:#fff;
border:1px solid rgba(82,152,188,0.24);
border-radius:10px;
box-shadow:0 10px 24px rgba(22,55,71,0.08);
padding:1rem;
}

.flashcard-card {
background:transparent;
border:0;
cursor:pointer;
display:block;
min-height:300px;
perspective:1200px;
position:relative;
text-align:left;
width:100%;
}

.flashcard-card-header {
align-items:center;
display:flex;
gap:0.75rem;
justify-content:space-between;
margin-bottom:0.75rem;
}

.flashcard-card-header-title {
color:#163747;
font-size:1rem;
font-weight:900;
}

.flashcard-help-button {
align-items:center;
background:#eef6fb;
border:1px solid rgba(82,152,188,0.32);
border-radius:8px;
color:#1e526c;
cursor:pointer;
display:inline-flex;
font-size:0.86rem;
font-weight:900;
gap:0.3rem;
min-height:34px;
padding:0.3rem 0.75rem;
}

.flashcard-help-button .material-symbols-rounded {
font-size:1.2rem;
line-height:1;
}

.flashcard-help-button:hover,
.flashcard-help-button:focus {
background:#dbeff8;
outline:none;
}

.question-focus-button {
align-items:center;
background:#163747;
border:1px solid rgba(22,55,71,0.16);
border-radius:8px;
box-shadow:0 6px 14px rgba(22,55,71,0.18);
color:#fff;
cursor:pointer;
display:inline-flex;
font-size:0.9rem;
font-weight:900;
gap:0.35rem;
margin-left:auto;
min-height:36px;
padding:0.35rem 0.8rem;
}

.question-focus-button .material-symbols-rounded {
font-size:1.15rem;
line-height:1;
}

.question-focus-button:hover,
.question-focus-button:focus,
.question-focus-button.is-on {
background:#2f6f91;
outline:3px solid rgba(82,152,188,0.28);
outline-offset:2px;
}

.flashcard-card-face {
backface-visibility:hidden;
background:linear-gradient(180deg,#ffffff,#eef7fb);
border:1px solid rgba(82,152,188,0.3);
border-radius:10px;
box-shadow:inset 0 1px 0 rgba(255,255,255,0.85);
display:flex;
flex-direction:column;
gap:0.8rem;
inset:0;
justify-content:center;
min-height:300px;
padding:1.2rem;
position:absolute;
transition:transform 0.42s ease;
}

/*************************************************************************************
 * Question Focus Mode
 ************************************************************************************/
.question-focus-modal {
align-items:center;
background:rgba(9,31,43,0.68);
bottom:0;
display:none;
justify-content:center;
left:0;
padding:1rem;
position:fixed;
right:0;
top:0;
z-index:10020;
}

.question-focus-modal.is-visible {
display:flex;
}

.question-focus-dialog {
background:#f7fbfd;
border:1px solid rgba(255,255,255,0.75);
border-radius:14px;
box-shadow:0 24px 70px rgba(9,31,43,0.34);
max-height:92vh;
max-width:1040px;
min-height:420px;
min-width:520px;
box-sizing:border-box;
overflow-x:hidden;
overflow-y:scroll;
padding:1rem;
scrollbar-gutter:stable;
width:min(1040px,96vw);
}

.question-focus-header {
align-items:center;
border-bottom:1px solid rgba(82,152,188,0.22);
display:flex;
gap:0.85rem;
justify-content:space-between;
padding:0.2rem 0.15rem 0.85rem;
touch-action:none;
}

.question-focus-heading {
min-width:0;
}

.question-focus-title {
color:#163747;
font-size:1.32rem;
font-weight:900;
line-height:1.15;
}

.question-focus-subtitle {
color:#5a7483;
font-size:0.93rem;
font-weight:800;
line-height:1.35;
margin:0.25rem 0 0;
}

.question-focus-explanation-switch {
background:#fff;
border:1px solid rgba(82,152,188,0.24);
border-radius:8px;
flex:0 0 auto;
padding:0.28rem 0.7rem 0.28rem 0.35rem;
}

.question-focus-close {
align-items:center;
background:#fff;
border:1px solid rgba(82,152,188,0.26);
border-radius:8px;
color:#163747;
cursor:pointer;
display:inline-flex;
font-size:1.55rem;
font-weight:900;
height:38px;
justify-content:center;
line-height:1;
width:38px;
}

.question-focus-icon-button {
align-items:center;
background:#fff;
border:1px solid rgba(82,152,188,0.26);
border-radius:8px;
color:#1e526c;
cursor:pointer;
display:inline-flex;
height:38px;
justify-content:center;
width:38px;
}

.question-focus-icon-button .material-symbols-rounded {
font-size:1.35rem;
line-height:1;
}

.question-focus-icon-button:hover,
.question-focus-icon-button:focus,
.question-focus-close:hover,
.question-focus-close:focus {
background:#eef6fb;
outline:3px solid rgba(82,152,188,0.28);
outline-offset:2px;
}

.question-focus-dialog .ui-resizable-handle {
background:transparent;
z-index:2;
}

.question-focus-dialog .ui-resizable-se {
bottom:0.35rem;
height:22px;
right:0.35rem;
width:22px;
}

.question-focus-dialog .ui-resizable-se:before,
.question-focus-dialog .ui-resizable-se:after {
background:rgba(82,152,188,0.5);
border-radius:999px;
content:"";
display:block;
height:2px;
position:absolute;
right:2px;
transform:rotate(-45deg);
}

.question-focus-dialog .ui-resizable-se:before {
bottom:7px;
width:16px;
}

.question-focus-dialog .ui-resizable-se:after {
bottom:12px;
width:10px;
}

.question-focus-content {
display:grid;
gap:1rem;
padding-top:1rem;
}

.question-focus-meta {
align-items:center;
background:#fff;
border:1px solid rgba(82,152,188,0.24);
border-radius:10px;
color:#315c70;
display:flex;
flex-wrap:wrap;
font-size:0.95rem;
font-weight:800;
gap:0.55rem 1rem;
line-height:1.35;
padding:0.72rem 0.9rem;
}

.question-focus-meta strong {
color:#163747;
font-weight:900;
}

.question-focus-image {
background:#fff;
border:1px solid rgba(82,152,188,0.24);
border-radius:10px;
padding:0.8rem;
text-align:center;
}

.question-focus-image img {
height:auto;
max-height:42vh;
max-width:100%;
object-fit:contain;
}

.question-focus-question,
.question-focus-flashcard {
background:#fff;
border:1px solid rgba(82,152,188,0.24);
border-radius:10px;
box-shadow:0 10px 24px rgba(22,55,71,0.08);
color:#163747;
font-size:1.35rem;
font-weight:800;
line-height:1.35;
padding:1.15rem;
}

.question-focus-flashcard {
cursor:pointer;
min-height:260px;
perspective:1200px;
position:relative;
}

.question-focus-card-face {
backface-visibility:hidden;
background:linear-gradient(180deg,#ffffff,#eef7fb);
border:1px solid rgba(82,152,188,0.25);
border-radius:10px;
display:flex;
flex-direction:column;
gap:0.75rem;
inset:1.15rem;
justify-content:center;
padding:1rem;
position:absolute;
transition:transform 0.42s ease;
}

.question-focus-card-back {
transform:rotateY(180deg);
}

.question-focus-flashcard.is-flipped .question-focus-card-front {
transform:rotateY(180deg);
}

.question-focus-flashcard.is-flipped .question-focus-card-back {
transform:rotateY(360deg);
}

.question-focus-kicker {
color:#2f6f91;
font-size:0.85rem;
font-weight:900;
text-transform:uppercase;
}

.question-focus-answers {
display:grid;
gap:0.7rem;
}

.question-focus-answer {
align-items:flex-start;
background:#fff;
border:1px solid rgba(82,152,188,0.25);
border-radius:10px;
color:#163747;
cursor:pointer;
display:flex;
font-size:1.05rem;
font-weight:800;
gap:0.7rem;
line-height:1.35;
padding:0.9rem 1rem;
text-align:left;
width:100%;
}

.question-focus-answer.is-selected {
border-color:#2f6f91;
box-shadow:0 0 0 3px rgba(47,111,145,0.12);
}

.question-focus-answer.correct {
background:#e5f6ec;
border-color:#2f6f91;
}

.question-focus-answer.incorrect {
background:#fbe4df;
border-color:#c26a54;
}

.question-focus-answer-letter {
color:#2f6f91;
font-weight:900;
min-width:1.35rem;
}

.question-focus-response {
color:#5a7483;
display:block;
font-size:0.92rem;
font-weight:800;
margin-top:0.35rem;
}

.question-focus-actions {
display:flex;
flex-wrap:wrap;
gap:0.65rem;
}

.question-focus-flashcard-primary-actions {
align-items:center;
justify-content:center;
}

.question-focus-action {
align-items:center;
border:0;
border-radius:8px;
box-shadow:0 6px 14px rgba(22,55,71,0.14);
cursor:pointer;
display:inline-flex;
font-size:0.96rem;
font-weight:900;
justify-content:center;
min-height:42px;
padding:0.58rem 1rem;
}

.question-focus-action.is-icon-only {
border-radius:8px;
height:42px;
min-height:42px;
padding:0;
width:42px;
}

.question-focus-action-icon {
font-size:1.2rem;
line-height:1;
}

.question-focus-action.is-secondary {
background:#fff;
border:1px solid rgba(82,152,188,0.35);
color:#163747;
}

.question-focus-action.is-primary {
background:linear-gradient(135deg,#f5c542,#d4a017);
color:#1f2933;
}

.question-focus-action.is-confirm {
background:linear-gradient(135deg,#5298bc,#2f6f91);
color:#fff;
}

.question-focus-action.is-focus-nav {
background:linear-gradient(135deg,#f5c542,#d4a017);
border:1px solid rgba(119,87,4,0.25);
color:#fff;
text-shadow:0 1px 1px rgba(22,55,71,0.18);
}

.question-focus-action.is-focus-nav:hover,
.question-focus-action.is-focus-nav:focus {
background:linear-gradient(135deg,#ffd95c,#d4a017);
color:#fff;
}

.question-focus-action.is-easy {
background:#dff5e8;
color:#17623a;
}

.question-focus-action.is-normal {
background:#e5f2fb;
color:#1e526c;
}

.question-focus-action.is-hard {
background:#fff1ce;
color:#7a5700;
}

.question-focus-action.is-missed,
.question-focus-action.is-danger {
background:#fbe4df;
color:#8a1c1c;
}

.question-focus-action:disabled {
cursor:not-allowed;
opacity:0.55;
}

.question-focus-explanation {
background:#eaf6fb;
border:1px solid rgba(82,152,188,0.28);
border-radius:10px;
color:#163747;
font-size:1rem;
font-weight:700;
line-height:1.5;
margin-top:1rem;
padding:1rem;
}

.question-focus-explanation img,
.question-focus-explanation figure,
.question-focus-explanation table {
height:auto;
max-width:100%;
}

.question-focus-explanation img {
display:block;
margin:0.75rem auto;
max-height:52vh;
object-fit:contain;
}

@media (max-width: 760px) {
.question-focus-modal {
align-items:flex-start;
padding:0.55rem;
}

.question-focus-dialog {
max-height:96vh;
min-height:0;
min-width:0;
padding:0.8rem;
width:100%;
}

.question-focus-header {
align-items:flex-start;
flex-wrap:wrap;
}

.question-focus-heading {
flex:1 1 100%;
}

.question-focus-explanation-switch {
order:2;
}

.question-focus-close {
position:absolute;
right:1rem;
top:1rem;
}

.question-focus-icon-button {
position:absolute;
right:3.7rem;
top:1rem;
}

.question-focus-question,
.question-focus-flashcard {
font-size:1.08rem;
}

.question-focus-flashcard {
min-height:310px;
}

.question-focus-card-face {
inset:0.65rem;
}

.question-focus-action {
flex:1 1 calc(50% - 0.4rem);
padding-left:0.75rem;
padding-right:0.75rem;
}

.question-focus-answer {
font-size:0.98rem;
}
}

.flashcard-card-back {
transform:rotateY(180deg);
}

.flashcard-card.is-flipped .flashcard-card-front {
transform:rotateY(180deg);
}

.flashcard-card.is-flipped .flashcard-card-back {
transform:rotateY(360deg);
}

.flashcard-card-kicker {
color:#2f6f91;
font-size:0.85rem;
font-weight:900;
letter-spacing:0.02em;
text-transform:uppercase;
}

.flashcard-card-text {
color:#163747;
font-size:1.58rem;
font-weight:800;
line-height:1.24;
}

.flashcard-card-hint {
color:#6a8493;
font-size:0.9rem;
font-weight:800;
}

.flashcard-rating-row {
display:grid;
gap:0.6rem;
grid-template-columns:repeat(4,minmax(0,1fr));
margin-top:0.85rem;
}

.flashcard-rating-button,
.flashcard-side-button {
border:0;
border-radius:8px;
cursor:pointer;
font-weight:900;
min-height:40px;
padding:0.55rem 0.7rem;
}

.flashcard-rating-button.is-easy {
background:#dff5e8;
color:#17623a;
}

.flashcard-rating-button.is-normal {
background:#e5f2fb;
color:#1e526c;
}

.flashcard-rating-button.is-hard {
background:#fff1ce;
color:#7a5700;
}

.flashcard-rating-button.is-missed,
.flashcard-side-button.is-danger {
background:#fbe4df;
color:#8a1c1c;
}

.flashcard-side-button.is-confirm {
background:#dff5e8;
color:#17623a;
}

.flashcard-side-button.is-secondary {
background:#f5f1e8;
color:#604615;
}

.flashcard-rating-button:disabled,
.flashcard-side-button:disabled {
cursor:not-allowed;
opacity:0.55;
}

.flashcard-eligible-control {
align-items:center;
align-self:flex-start;
color:#1e526c;
cursor:pointer;
display:inline-flex;
font-size:0.9rem;
font-weight:900;
gap:0.45rem;
margin-top:0.7rem;
}

.flashcard-eligible-control input {
position:absolute;
opacity:0;
pointer-events:none;
}

.flashcard-eligible-box {
background:#fff;
border:2px solid #5298bc;
border-radius:5px;
box-sizing:border-box;
height:18px;
position:relative;
width:18px;
}

.flashcard-eligible-control input:checked + .flashcard-eligible-box {
background:#5298bc;
border-color:#2f7599;
}

.flashcard-eligible-control input:checked + .flashcard-eligible-box:after {
border:solid #fff;
border-width:0 2px 2px 0;
content:"";
height:10px;
left:4px;
position:absolute;
top:1px;
transform:rotate(45deg);
width:5px;
}

.flashcard-eligible-control:has(input:disabled) {
cursor:not-allowed;
opacity:0.65;
}

.flashcard-review-message {
color:#315c70;
font-size:0.92rem;
font-weight:800;
min-height:1.25rem;
padding-top:0.55rem;
}

.flashcard-side-title {
color:#163747;
font-family:Oswald,Arial,Helvetica,sans-serif;
font-size:1.62rem;
font-weight:800;
margin:0;
}

.flashcard-side-heading {
align-items:center;
display:flex;
gap:0.75rem;
justify-content:space-between;
margin:0 0 0.75rem;
}

.flashcard-review-toggle {
background:#eef6fb;
border:1px solid rgba(82,152,188,0.32);
border-radius:8px;
color:#1e526c;
cursor:pointer;
font-size:0.82rem;
font-weight:900;
min-height:32px;
padding:0.3rem 0.8rem;
}

.flashcard-review-toggle:hover,
.flashcard-review-toggle:focus {
background:#dbeff8;
outline:none;
}

.flashcard-review-body[hidden] {
display:none;
}

.flashcard-section-body[hidden] {
display:none;
}

.flashcard-side-panel.is-collapsed {
align-self:start;
}

.flashcard-side-section {
border-top:1px solid rgba(82,152,188,0.18);
padding:0.75rem 0 0;
}

.flashcard-side-section + .flashcard-side-section {
margin-top:0.75rem;
}

.flashcard-side-section.is-collapsed {
padding-bottom:0;
}

.flashcard-section-heading {
align-items:center;
display:flex;
gap:0.65rem;
justify-content:space-between;
margin-bottom:0.65rem;
}

.flashcard-section-title {
color:#163747;
font-size:1.12rem;
font-weight:900;
}

.flashcard-stat-grid {
display:grid;
gap:0.55rem;
grid-template-columns:repeat(2,minmax(0,1fr));
}

.flashcard-stat-grid div {
background:#eef6fb;
border:1px solid rgba(82,152,188,0.22);
border-radius:8px;
display:grid;
gap:0.15rem;
padding:0.65rem;
}

.flashcard-stat-grid strong {
color:#163747;
font-size:1.35rem;
line-height:1;
}

.flashcard-stat-grid span,
.flashcard-next-due {
color:#42667a;
font-size:0.86rem;
font-weight:800;
}

.flashcard-next-due {
line-height:1.35;
margin:0.85rem 0;
}

.flashcard-filter-panel {
background:#f8fcfe;
border:1px solid rgba(82,152,188,0.22);
border-radius:8px;
display:grid;
gap:0.55rem;
grid-template-columns:1fr;
margin:0;
padding:0.65rem;
}

.flashcard-filter-panel label {
display:grid;
gap:0.25rem;
}

.flashcard-filter-panel label span {
color:#42667a;
font-size:0.78rem;
font-weight:900;
text-transform:uppercase;
}

.flashcard-filter-panel select {
background:#fff;
border:1px solid rgba(82,152,188,0.36);
border-radius:7px;
color:#163747;
font-size:0.9rem;
font-weight:800;
min-height:36px;
padding:0.35rem 0.45rem;
width:100%;
}

.flashcard-filter-clear {
background:#eef6fb;
border:1px solid rgba(82,152,188,0.3);
border-radius:7px;
color:#1e526c;
cursor:pointer;
font-size:0.86rem;
font-weight:900;
min-height:36px;
padding:0.35rem 0.55rem;
}

.flashcard-filter-clear:hover,
.flashcard-filter-clear:focus {
background:#dbeff8;
outline:none;
}

.flashcard-side-actions {
display:grid;
gap:0.55rem;
}

.flashcard-ai-body {
display:grid;
gap:0.6rem;
}

.flashcard-ai-token-grid {
display:grid;
gap:0.5rem;
grid-template-columns:repeat(2,minmax(0,1fr));
}

.flashcard-ai-token-grid div {
background:#f8fcfe;
border:1px solid rgba(82,152,188,0.24);
border-radius:7px;
padding:0.55rem;
}

.flashcard-ai-token-grid span {
color:#42667a;
display:block;
font-size:0.74rem;
font-weight:900;
text-transform:uppercase;
}

.flashcard-ai-token-grid strong {
color:#102f40;
display:block;
font-size:1rem;
line-height:1.2;
}

.flashcard-ai-note {
color:#23485a;
font-size:0.9rem;
line-height:1.35;
margin:0;
}

.flashcard-ai-type-group {
background:#f8fcfe;
border:1px solid rgba(82,152,188,0.24);
border-radius:7px;
display:grid;
gap:0.45rem;
margin:0;
padding:0.6rem;
}

.flashcard-ai-type-group legend {
color:#42667a;
font-size:0.74rem;
font-weight:900;
padding:0;
text-transform:uppercase;
}

.flashcard-ai-type-group label {
align-items:center;
color:#163747;
cursor:pointer;
display:flex;
font-size:0.88rem;
font-weight:900;
gap:0.45rem;
line-height:1.25;
}

.flashcard-ai-type-group input {
accent-color:#d69e0a;
height:16px;
width:16px;
}

.flashcard-ai-actions {
display:grid;
gap:0.5rem;
}

.flashcard-ai-preview,
.flashcard-ai-export-message {
background:#fff8e6;
border:1px solid rgba(214,158,10,0.42);
border-radius:7px;
color:#3f2c00;
line-height:1.35;
padding:0.65rem;
}

.flashcard-ai-preview-title {
font-size:1.08rem;
font-weight:900;
margin-bottom:0.4rem;
}

.flashcard-ai-preview-main {
margin-top:0.85rem;
}

.flashcard-ai-edit-note {
color:#604615;
font-size:0.85rem;
font-weight:800;
line-height:1.3;
margin:0 0 0.55rem;
}

.flashcard-ai-preview-row + .flashcard-ai-preview-row {
margin-top:0.4rem;
}

.flashcard-ai-preview-row {
display:grid;
gap:0.3rem;
}

.flashcard-ai-preview-row textarea {
background:#fff;
border:1px solid rgba(214,158,10,0.45);
border-radius:6px;
box-sizing:border-box;
color:#231b05;
font-family:inherit;
font-size:0.9rem;
font-weight:700;
line-height:1.35;
min-height:52px;
padding:0.45rem 0.55rem;
resize:vertical;
width:100%;
}

.flashcard-export-usage {
display:grid;
gap:0.5rem;
grid-template-columns:repeat(2,minmax(0,1fr));
}

.flashcard-export-usage div {
background:#f8fcfe;
border:1px solid rgba(82,152,188,0.24);
border-radius:7px;
padding:0.55rem;
}

.flashcard-export-usage span {
color:#42667a;
display:block;
font-size:0.74rem;
font-weight:900;
text-transform:uppercase;
}

.flashcard-export-usage strong {
color:#102f40;
display:block;
font-size:1rem;
line-height:1.2;
}

.bbp-token-modal-open {
overflow:hidden;
}

.bbp-token-purchase-modal {
align-items:center;
background:rgba(15,37,48,0.62);
display:flex;
inset:0;
justify-content:center;
padding:1rem;
position:fixed;
z-index:6000;
}

.bbp-token-modal-dialog {
background:#fff;
border:1px solid rgba(82,152,188,0.28);
border-radius:10px;
box-shadow:0 24px 60px rgba(15,37,48,0.3);
max-height:min(90vh,780px);
max-width:560px;
overflow:auto;
width:min(100%,560px);
}

.bbp-token-modal-header,
.bbp-token-modal-footer {
align-items:center;
display:flex;
gap:0.75rem;
justify-content:space-between;
padding:0.85rem 1rem;
}

.bbp-token-modal-header {
border-bottom:1px solid rgba(82,152,188,0.2);
}

.bbp-token-modal-footer {
border-top:1px solid rgba(82,152,188,0.2);
justify-content:flex-end;
}

.bbp-token-modal-header h3 {
color:#163747;
font-family:Oswald,Arial,Helvetica,sans-serif;
font-size:1.35rem;
font-weight:900;
margin:0;
}

.bbp-token-modal-close {
background:#eef6fb;
border:1px solid rgba(82,152,188,0.34);
border-radius:8px;
color:#1e526c;
cursor:pointer;
font-size:1.3rem;
font-weight:900;
line-height:1;
min-height:36px;
min-width:36px;
padding:0.35rem 0.6rem;
}

.bbp-token-modal-body {
display:grid;
gap:0.65rem;
padding:1rem;
}

.bbp-token-modal-status {
border-radius:8px;
font-weight:800;
line-height:1.3;
padding:0.65rem 0.75rem;
}

.bbp-token-modal-status.is-info {
background:#eef6fb;
border:1px solid rgba(82,152,188,0.32);
color:#1e526c;
}

.bbp-token-modal-status.is-success {
background:#dff5e8;
border:1px solid rgba(23,98,58,0.25);
color:#17623a;
}

.bbp-token-modal-status.is-warning {
background:#fff1ce;
border:1px solid rgba(122,87,0,0.25);
color:#7a5700;
}

.bbp-token-modal-status.is-danger {
background:#fbe4df;
border:1px solid rgba(138,28,28,0.25);
color:#8a1c1c;
}

.bbp-token-modal-label {
color:#163747;
font-weight:900;
}

.bbp-token-modal-select,
.bbp-token-modal-input {
background:#fff;
border:1px solid rgba(82,152,188,0.36);
border-radius:7px;
box-sizing:border-box;
color:#163747;
font:inherit;
font-weight:800;
min-height:38px;
padding:0.45rem 0.55rem;
width:100%;
}

.bbp-token-product-description,
.bbp-token-checkout-summary {
background:#f8fcfe;
border:1px solid rgba(82,152,188,0.24);
border-radius:8px;
color:#23485a;
display:none;
line-height:1.35;
padding:0.65rem;
}

.bbp-token-total-title {
color:#163747;
font-weight:900;
margin-bottom:0.35rem;
}

.bbp-token-total-row {
align-items:center;
display:flex;
justify-content:space-between;
gap:0.75rem;
padding:0.2rem 0;
}

.bbp-token-total-row.is-grand-total {
border-top:1px solid rgba(82,152,188,0.25);
font-size:1.05rem;
font-weight:900;
margin-top:0.35rem;
padding-top:0.5rem;
}

.bbp-token-muted,
.bbp-token-total-loading,
.bbp-token-modal-note {
color:#5f7480;
font-size:0.86rem;
line-height:1.35;
margin:0;
}

.bbp-token-card-container {
margin-top:0.4rem;
}

.bbp-token-modal-primary,
.bbp-token-modal-secondary {
border:1px solid transparent;
border-radius:8px;
cursor:pointer;
font-weight:900;
min-height:38px;
padding:0.45rem 0.9rem;
}

.bbp-token-modal-primary {
background:#d69e0a;
border-color:#d69e0a;
color:#fff;
}

.bbp-token-modal-secondary {
background:#eef6fb;
border-color:rgba(82,152,188,0.34);
color:#1e526c;
}

.bbp-token-modal-primary:disabled {
cursor:not-allowed;
opacity:0.6;
}

.flashcard-side-button {
background:#eef6fb;
border:1px solid rgba(82,152,188,0.25);
color:#1e526c;
}

.flashcard-help-modal {
align-items:center;
background:rgba(15,37,48,0.58);
display:flex;
inset:0;
justify-content:center;
padding:1rem;
position:fixed;
z-index:5000;
}

.flashcard-help-dialog {
background:#fff;
border:1px solid rgba(82,152,188,0.28);
border-radius:10px;
box-shadow:0 24px 60px rgba(15,37,48,0.28);
max-height:min(86vh,760px);
max-width:720px;
overflow:auto;
padding:1rem;
position:relative;
width:min(100%,720px);
}

.flashcard-help-close {
background:#eef6fb;
border:1px solid rgba(82,152,188,0.32);
border-radius:50%;
color:#1e526c;
cursor:pointer;
font-size:1.45rem;
font-weight:900;
height:36px;
line-height:1;
position:absolute;
right:0.85rem;
top:0.85rem;
width:36px;
}

.flashcard-help-heading {
align-items:flex-start;
display:flex;
gap:0.75rem;
padding:0 2.8rem 0.85rem 0;
}

.flashcard-help-heading .material-symbols-rounded {
background:#eef6fb;
border-radius:50%;
color:#1e526c;
font-size:1.65rem;
padding:0.35rem;
}

.flashcard-help-title {
color:#163747;
font-family:Oswald,Arial,Helvetica,sans-serif;
font-size:1.45rem;
line-height:1.1;
margin:0 0 0.35rem;
}

.flashcard-help-heading p,
.flashcard-help-topic-body p,
.flashcard-help-topic-body li {
color:#42667a;
font-size:0.96rem;
font-weight:750;
line-height:1.45;
}

.flashcard-help-heading p {
margin:0;
}

.flashcard-help-topics {
display:grid;
gap:0.65rem;
}

.flashcard-help-topic {
border:1px solid rgba(82,152,188,0.22);
border-radius:8px;
overflow:hidden;
}

.flashcard-help-topic-toggle {
align-items:center;
background:#f8fcfe;
border:0;
color:#163747;
cursor:pointer;
display:flex;
font-size:1rem;
font-weight:900;
justify-content:space-between;
min-height:44px;
padding:0.65rem 0.85rem;
text-align:left;
width:100%;
}

.flashcard-help-topic-toggle:hover,
.flashcard-help-topic-toggle:focus {
background:#eef6fb;
outline:none;
}

.flashcard-help-topic-body {
border-top:1px solid rgba(82,152,188,0.16);
padding:0.75rem 0.95rem 0.9rem;
}

.flashcard-help-topic-body p {
margin:0 0 0.55rem;
}

.flashcard-help-topic-body ul {
margin:0;
padding-left:1.2rem;
}

.flashcard-help-topic-body li + li {
margin-top:0.35rem;
}

.question-helper-text {
color:#42667a;
font-size:0.88rem;
font-weight:700;
line-height:1.35;
margin:0.25rem 0 0.75rem;
}

@media (max-width: 800px) {
.flashcard-study-layout {
grid-template-columns:1fr;
}

.flashcard-rating-row {
grid-template-columns:repeat(2,minmax(0,1fr));
}

.flashcard-card,
.flashcard-card-face {
min-height:260px;
}
}

@media (max-width: 520px) {
.flashcard-mode-toolbar {
align-items:flex-start;
flex-direction:column;
}

.flashcard-rating-row,
.flashcard-stat-grid {
grid-template-columns:1fr;
}

.flashcard-card-text {
font-size:1.2rem;
}
}

#explainer-box {
border:4px solid #5298bc;
padding:0.5em;
background:#fff;
margin-top:0.5em;
}

#ratings,#calculated_ratings {
display:inline-block;
font-size: medium;
}

#explain-section {
background:#fff;
font-size:1.3em;
}

.control-bg {
width:100%;
background: lightgrey;
color:#fff;
font-weight:bold;
font-size:1.0em;
text-align:center;
border: 1px solid #5298bc;
}

.ratings-bg {
color:#000;

font-size:1.3em;
}

.control-bg,.ratings-bg {
padding:0.7em;
display:inline-block;
}

#langscore {

font-weight:bold;
}

#login {
padding:0.5em 0;
position:relative;
left:59em;
bottom:8em;
width:30%;
}

#controls,#login {
background:#fff;
max-width:100%;
max-height:100%;
vertical-align:middle;
}

.reset {
width:40%;
margin:0.5em auto;
padding:0.5em;
border:0.5em solid silver;
color:#fff;
border-radius:1em;
background-image: linear-gradient(#1d6d86,#5d6d86);
font-family:arial,helvetica;
display:grid;
justify-content: center;
}

#question_controls {
margin:0 0 0.3em;
border:1px solid #5298bc;
padding:0.1em 0.1em 0.1em 0.3em;
font-size:larger;
}
#control-grid-container {
  display: grid;
  grid-template-columns: auto auto auto auto; /* 3 equal-width columns */
  grid-template-rows: repeat(2, auto);  /* 2 rows, height adjusts to content */
}
.control-grid-item {
  background-color: #ffffff; /* Optional item background color */
  padding: 0.5em;           /* Optional padding for items */
}
.right-control-grid-item{
    text-align: right;
}
.middle-control-grid-item{
    text-align: center;
}
.highlight_rectangle{
    display: inline-block;  /* Allows the rectangle to be inline with text */
    width: 25px;            /* Width of the rectangle */
    height: 10px;           /* Height of the rectangle */
    background-color: yellow; /* Yellow background color */
    vertical-align: middle; /* Aligns the rectangle with the text */
}

form {
display:inline-block;
width:100%;
}

#test-generators {
background:#fff;
text-align:center;
padding:0.5em;
font-size:1.5em;
border:1px solid #5298bc;
margin:1em 0;
}

.login_form {
display:block;
}

.response {
padding-left:0.5em;
font-weight:bold;
}

#exam_section {
margin:0px auto;
max-width:100%;
padding:0.5em;
background:#fff;
}

#submit_section {
max-width:100%;
padding:0.5em;
margin:0px auto;
background:#fff;
border-radius:0px 0px 1em 1em;
}

#error_message {
font-weight:bold;
color:#ff0000;
}

.error {
font-weight:bold;
color:#ff0000;
}

#qimage_block {
}

#submit_status,#cardaction,#basicaction {
font-weight:bold;
color:green;
}

.starrr {
display:inline-block;
}

#questions_found {
font-size:1em;
}

.starrr a {
font-size:16px;
padding:0 1px;
cursor:pointer;
color:#FFD119;
text-decoration:none;
}

.explanation {
margin:0.3em auto;
padding:0.3em;
display:inline-block;
}

.explain_box {
text-align:center;
}

.update_explanation {
display:none;
margin:1em;
}

#qoptions {
text-align:center;
color:#555;
}

/*************************************************************************************
 * Question Difficulty Rating
 ************************************************************************************/
.question-meta-row {
display:flex;
flex-wrap:nowrap;
align-items:center;
gap:0.85rem;
width:100%;
margin:1.35rem 0 1.15rem;
}

.question-copy-actions {
display:inline-flex;
align-items:center;
gap:0.45rem;
margin-right:0.75rem;
padding-right:1rem;
border-right:1px solid rgba(82,152,188,0.22);
}

.question-copy-button {
position:relative;
display:inline-flex;
align-items:center;
justify-content:center;
gap:0.35rem;
min-height:34px;
padding:0.4rem 0.75rem;
border:1px solid rgba(82,152,188,0.42);
border-radius:8px;
background:#fff;
box-shadow:0 3px 8px rgba(22,55,71,0.1);
color:#163747;
font-family:Arial,Helvetica,sans-serif;
font-size:13px;
font-weight:900;
line-height:1;
cursor:pointer;
transition:background 0.16s ease,border-color 0.16s ease,box-shadow 0.16s ease,transform 0.16s ease;
}

.question-copy-button .material-symbols-rounded {
font-family:'Material Symbols Rounded';
font-variation-settings:'FILL' 0,'wght' 500,'GRAD' 0,'opsz' 24;
font-size:1.05rem;
line-height:1;
}

.question-copy-button:hover,
.question-copy-button:focus {
background:#eef7fb;
border-color:#5298bc;
box-shadow:0 5px 12px rgba(47,111,145,0.18);
color:#163747;
}

.question-copy-button:focus {
outline:3px solid rgba(82,152,188,0.24);
outline-offset:2px;
}

.question-copy-button:active {
transform:translateY(1px);
}

.question-copy-button .copy-feedback {
position:absolute;
left:50%;
bottom:calc(100% + 8px);
z-index:10;
padding:0.35rem 0.55rem;
border-radius:8px;
background:#163747;
box-shadow:0 6px 16px rgba(22,55,71,0.22);
color:#fff;
font-size:12px;
font-weight:900;
line-height:1;
opacity:0;
pointer-events:none;
transform:translate(-50%,6px);
transition:opacity 0.18s ease,transform 0.18s ease;
white-space:nowrap;
}

.question-copy-button.is-copied .copy-feedback {
opacity:1;
transform:translate(-50%,0);
}

.difficulty-rating-panel {
display:flex !important;
flex:1 1 auto;
flex-wrap:nowrap;
align-items:center;
gap:0.7rem;
min-width:0;
margin:0;
padding:0;
color:#163747;
}

.difficulty-rating-summary {
display:inline-flex;
flex-wrap:wrap;
align-items:baseline;
gap:0.35rem;
font-size:14px;
}

.question-qbank-share-tools {
align-items:center;
display:inline-flex;
gap:0.3rem;
margin-right:0.85rem;
}

.question-qbank-share-label {
background:#1f4e68;
color:#fff;
display:inline-flex;
font-size:12px;
font-weight:900;
height:30px;
align-items:center;
padding:0 0.55rem;
line-height:1;
}

.question-qbank-share-button {
align-items:center;
background:#fff;
border:1px solid rgba(47,117,152,0.42);
border-radius:7px;
color:#1f4e68;
cursor:pointer;
display:inline-flex;
height:30px;
justify-content:center;
padding:0;
width:30px;
}

.question-qbank-share-button:hover,
.question-qbank-share-button:focus {
background:rgba(82,152,188,0.1);
border-color:#2f7598;
outline:none;
}

.question-qbank-share-button .material-symbols-rounded {
color:#1f4e68;
font-size:18px;
line-height:1;
}

.question-qbank-share-status {
color:#2c7a4b;
font-size:11px;
font-weight:900;
line-height:1;
min-width:0;
}

.difficulty-rating-label {
font-weight:900;
}

.difficulty-rating-summary strong {
font-size:15px;
}

.difficulty-rating-scale,
.difficulty-rating-count {
color:#6b8794;
font-weight:700;
}

.difficulty-rating-count {
font-size:12px;
}

.difficulty-question-id {
margin-left:auto;
padding-right:0.75rem;
color:#6b8794;
font-size:12px;
font-weight:800;
white-space:nowrap;
}

.difficulty-rating-buttons {
display:inline-flex;
align-items:center;
gap:0.35rem;
}

.difficulty-rate-button {
display:inline-flex;
align-items:center;
justify-content:center;
width:30px;
height:30px;
padding:0;
border:1px solid rgba(82,152,188,0.42);
border-radius:8px;
background:#fff;
box-shadow:0 3px 8px rgba(22,55,71,0.1);
color:#163747;
font-family:Arial,Helvetica,sans-serif;
font-size:14px;
font-weight:900;
line-height:1;
cursor:pointer;
transition:background 0.16s ease,border-color 0.16s ease,box-shadow 0.16s ease,transform 0.16s ease;
}

.difficulty-rate-button:hover,
.difficulty-rate-button:focus,
.difficulty-rate-button.is-selected {
background:#5298bc;
border-color:#2f6f91;
box-shadow:0 5px 12px rgba(47,111,145,0.22);
color:#fff;
}

.difficulty-rate-button:focus {
outline:3px solid rgba(82,152,188,0.24);
outline-offset:2px;
}

.difficulty-rate-button:active {
transform:translateY(1px);
}

.difficulty-rate-button:disabled {
cursor:not-allowed;
opacity:0.72;
}

.difficulty-rate-button.is-session-rated {
box-shadow:none;
cursor:not-allowed;
}

.difficulty-rate-button.is-session-rated:not(.is-selected),
.difficulty-rate-button.is-session-rated:not(.is-selected):hover,
.difficulty-rate-button.is-session-rated:not(.is-selected):focus {
background:#f4f8fa;
border-color:rgba(82,152,188,0.25);
color:#8aa1ad;
}

#rate_response {
min-height:1.3rem;
margin:0.2rem 0 0.6rem;
color:#2f6f91;
font-size:0.92rem;
font-weight:800;
}

@media (max-width: 700px) {
.question-meta-row {
flex-wrap:wrap;
justify-content:center;
}

.question-copy-actions {
justify-content:center;
margin-right:0;
padding-right:0;
border-right:0;
}

.difficulty-rating-panel {
flex:1 1 100%;
flex-wrap:wrap;
justify-content:center;
text-align:center;
}

.difficulty-rating-summary {
justify-content:center;
}

.difficulty-question-id {
width:100%;
margin-left:0;
padding-right:0;
text-align:center;
}
}

.fade-2 {
border-width:0 0 1px;
color:skyblue;

border-style:solid;
}

.selectdiv {
position:relative;
/*Don't really need this just for demo styling*/
display:inline-block;
vertical-align:middle;
}

select {
-webkit-appearance:none;
-moz-appearance:none;
background:transparent;
background-image:url("data:image/svg+xml;utf8, <svg fill= 'black 'height= '24 'viewBox= '0 0 24 24 'width= '24 'xmlns= 'http://www.w3.org/2000/svg ' > <path d= 'M7 10l5 5 5-5z '/ > <path d= 'M0 0h24v24H0z 'fill= 'none '/ > </svg > ");
background-repeat:no-repeat;
background-position-x: 100%;
background-position-y: 5px;
border:1px solid #dfdfdf;
border-radius:2px;
margin-right:2rem;
padding:1rem;
padding-right:2rem;
}

.selectdiv select {
-webkit-appearance:none;
-moz-appearance:none;
appearance:none;
/* Add some styling */
max-width:400px;
height:3em;
margin:5px 0px;
padding:0px 2em;
font-size:1.2em;
line-height:1.75;
color:#333;
background-color:#ffffff;
background-image:none;
border:1px solid silver;
-ms-word-break:normal;
word-break:normal;
}

input [type=password ] {
width:100%;
margin:5px 0px;
padding:0px 2em;
font-size:1.2em;
line-height:1.75;
box-sizing:border-box;
height:2em;
}

input [type=text ] {
height:3em;
margin:5px 0px;
padding:0px 1em;
font-size:1.2em;
line-height:1.75;
font-size:1.2em;
border:1px solid silver;
color:#000;
}

/*************************************************************************************
 * Question Filter Controls
 ************************************************************************************/
#controls .control-bg {
background:#eef7fb;
border:1px solid rgba(82,152,188,0.35);
border-radius:12px;
box-shadow:0 8px 22px rgba(22,55,71,0.08);
color:#163747;
}

#controls .filter-select-row {
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:0.75rem;
width:100%;
margin:0 0 0.75rem;
}

#controls .filter-search-row {
display:grid;
grid-template-columns:minmax(0,1fr) auto;
align-items:stretch;
gap:0.75rem;
width:100%;
margin:0 0 0.75rem;
}

#controls .filter-field {
position:relative;
display:block;
min-width:0;
margin:0;
padding:0.55rem 0.8rem 0.45rem;
background:#fff;
border:1px solid rgba(82,152,188,0.45);
border-radius:10px;
box-shadow:inset 0 1px 0 rgba(255,255,255,0.95),0 2px 7px rgba(22,55,71,0.08);
text-align:left;
transition:border-color 0.18s ease,box-shadow 0.18s ease,transform 0.18s ease;
}

#controls .filter-field:focus-within,
#controls .filter-field:hover {
border-color:#5298bc;
box-shadow:0 0 0 3px rgba(82,152,188,0.15),0 4px 12px rgba(22,55,71,0.12);
}

#controls .filter-field-label {
display:block;
margin:0 0 0.15rem;
color:#2f6f91;
font-size:0.68rem;
font-weight:800;
line-height:1;
letter-spacing:0;
text-transform:uppercase;
}

#controls .filter-field-select:after {
content:"";
position:absolute;
right:0.9rem;
bottom:1rem;
width:0.55rem;
height:0.55rem;
border-right:2px solid #5298bc;
border-bottom:2px solid #5298bc;
pointer-events:none;
transform:rotate(45deg);
}

#controls .filter-field-search:before {
content:"";
position:absolute;
right:1rem;
bottom:0.9rem;
width:0.62rem;
height:0.62rem;
border:2px solid #5298bc;
border-radius:50%;
pointer-events:none;
}

#controls .filter-field-search:after {
content:"";
position:absolute;
right:0.78rem;
bottom:0.82rem;
width:0.42rem;
height:2px;
background:#5298bc;
pointer-events:none;
transform:rotate(45deg);
transform-origin:right center;
}

#controls .filter-field select,
#controls .filter-field input {
display:block;
width:100%;
height:1.7rem;
min-width:0;
margin:0 !important;
padding:0 1.55rem 0 0;
background:transparent;
border:0;
border-radius:0;
box-shadow:none;
color:#163747;
font-size:1rem;
font-weight:700;
line-height:1.35;
outline:0;
}

#controls .filter-field input {
padding-right:2rem;
}

#controls .filter-field select {
-webkit-appearance:none;
-moz-appearance:none;
appearance:none;
background-image:none;
cursor:pointer;
}

#controls #categories,
#controls #subcategories,
#controls #instance {
max-width:none;
margin-top:0;
}

#controls .filter-field input::placeholder {
color:#7d98a5;
font-weight:600;
opacity:1;
}

#controls #go_button {
min-width:5.5rem;
height:auto;
margin:0;
padding:0 1.25rem;
border:0;
border-radius:10px;
background:#5298bc;
box-shadow:0 5px 14px rgba(82,152,188,0.25);
color:#fff;
font-weight:900;
letter-spacing:0;
transition:background 0.18s ease,box-shadow 0.18s ease,transform 0.18s ease;
}

#controls #go_button:hover,
#controls #go_button:focus {
background:#2f6f91;
box-shadow:0 7px 18px rgba(47,111,145,0.28);
}

@media (max-width: 900px) {
#controls .filter-select-row {
grid-template-columns:1fr;
}
}

@media (max-width: 700px) {
#controls .filter-search-row {
grid-template-columns:1fr;
}

#controls .filter-field {
padding:0.65rem 0.85rem 0.55rem;
}

#controls .filter-field select,
#controls .filter-field input {
min-height:1.8rem;
font-size:1rem;
}

#controls #go_button {
width:100%;
min-height:46px;
}
}

/*************************************************************************************
 * Question Action Buttons
 ************************************************************************************/
.question-action-bar {
display:flex;
flex-wrap:nowrap;
align-items:center;
justify-content:flex-start;
gap:0.6rem;
width:100%;
margin:0.9rem auto;
}

.question-action-bar-secondary {
margin-top:1.1rem;
padding-top:0.9rem;
border-top:1px solid rgba(82,152,188,0.22);
}

.flashcard-card-column .question-action-bar.is-flashcard-docked {
align-items:center;
border-top:1px solid rgba(82,152,188,0.2);
flex-wrap:wrap;
gap:0.85rem;
justify-content:flex-start;
margin:1rem 0 0;
padding:1rem 0 0.35rem;
}

.flashcard-card-column .question-action-bar.is-flashcard-docked .question-action-button {
flex:0 1 auto;
min-width:8.75rem;
padding-left:1.05rem;
padding-right:1.05rem;
}

.flashcard-card-column .question-action-bar.is-flashcard-docked #goback {
min-width:7.4rem;
}

.flashcard-card-column .question-action-bar.is-flashcard-docked .editor-question-tools {
display:flex;
flex:0 1 auto;
gap:0.65rem;
justify-content:flex-start;
margin:0;
min-width:0;
}

.flashcard-card-column .question-action-bar.is-flashcard-docked .editor-question-tools #toggleImageControl,
.flashcard-card-column .question-action-bar.is-flashcard-docked .editor-question-tools .save-editing-control {
min-height:42px;
padding-left:0.9rem;
padding-right:0.9rem;
}

.question-action-button {
display:inline-flex;
align-items:center;
justify-content:center;
gap:0.45rem;
min-height:44px;
min-width:0;
padding:0.65rem 1rem;
border:1px solid transparent;
border-radius:8px;
box-shadow:inset 0 1px 0 rgba(255,255,255,0.45),0 6px 14px rgba(22,55,71,0.16);
font-family:Arial,Helvetica,sans-serif;
font-size:0.98rem;
font-weight:900;
letter-spacing:0;
line-height:1.1;
text-decoration:none;
cursor:pointer;
transition:background 0.18s ease,border-color 0.18s ease,box-shadow 0.18s ease,transform 0.18s ease;
}

#goback {
min-width:7rem;
}

#question_clicker,
#answer_checker,
#feedback_button,
#edit_question_button {
min-width:9rem;
}

.question-action-button:hover,
.question-action-button:focus {
box-shadow:inset 0 1px 0 rgba(255,255,255,0.5),0 9px 20px rgba(22,55,71,0.22);
transform:translateY(-1px);
}

.question-action-button:active {
box-shadow:inset 0 2px 5px rgba(0,0,0,0.18),0 3px 9px rgba(22,55,71,0.16);
transform:translateY(1px);
}

.question-action-button:focus {
outline:3px solid rgba(82,152,188,0.28);
outline-offset:2px;
}

.question-action-icon {
display:inline-flex;
align-items:center;
justify-content:center;
width:1.55rem;
height:1.55rem;
border-radius:8px;
background:rgba(255,255,255,0.28);
font-size:1.05rem;
font-weight:500;
line-height:1;
}

.material-symbols-rounded.question-action-icon {
font-family:'Material Symbols Rounded';
font-variation-settings:'FILL' 0,'wght' 500,'GRAD' 0,'opsz' 24;
font-size:1.15rem;
}

.question-action-button-primary {
background:linear-gradient(135deg,#f5c542,#d4a017);
border-color:rgba(119,87,4,0.25);
color:#1f2933;
}

.question-action-button-primary:hover,
.question-action-button-primary:focus {
background:linear-gradient(135deg,#ffd95c,#e0ad1f);
color:#1f2933;
}

.question-action-button-secondary {
background:#fff;
border-color:rgba(82,152,188,0.45);
color:#163747;
}

.question-action-button-secondary:hover,
.question-action-button-secondary:focus {
background:#eef7fb;
border-color:#5298bc;
color:#163747;
}

.question-action-button-confirm {
background:linear-gradient(135deg,#5298bc,#2f6f91);
border-color:rgba(47,111,145,0.32);
color:#fff;
}

.question-action-button-confirm:hover,
.question-action-button-confirm:focus {
background:linear-gradient(135deg,#5aa8cf,#235b80);
color:#fff;
}

.question-action-button-feedback {
background:linear-gradient(135deg,#4f8f69,#73b88a);
border-color:rgba(45,105,70,0.28);
color:#fff;
}

.question-action-button-feedback:hover,
.question-action-button-feedback:focus {
background:linear-gradient(135deg,#5ca87a,#3f7858);
color:#fff;
}

.question-action-button-edit {
background:linear-gradient(135deg,#7a6bb4,#4f7fb0);
border-color:rgba(64,72,128,0.28);
color:#fff;
}

.question-action-button-edit:hover,
.question-action-button-edit:focus {
background:linear-gradient(135deg,#8a7ccc,#3d719e);
color:#fff;
}

.question-editor-action-message {
display:none;
width:max-content;
max-width:100%;
margin:0.35rem 0 0.85rem;
padding:0.55rem 0.8rem;
border-radius:8px;
font-weight:900;
box-shadow:0 6px 14px rgba(22,55,71,0.12);
}

.question-editor-action-message.is-success {
background:#e8f7ef;
border:1px solid rgba(36,128,83,0.28);
color:#216b48;
}

.question-editor-action-message.is-error {
background:#fff1f1;
border:1px solid rgba(190,64,64,0.3);
color:#a82d2d;
}

.question-inline-editor {
clear:both;
width:100%;
margin:0;
}

.question-inline-editor-close {
display:inline-flex;
align-items:center;
justify-content:center;
gap:0.35rem;
min-height:38px;
margin:0 0 0.6rem;
padding:0.45rem 0.85rem;
border:1px solid rgba(82,152,188,0.35);
border-radius:8px;
background:#fff;
color:#163747;
font-weight:900;
cursor:pointer;
}

.question-inline-editor-close:hover,
.question-inline-editor-close:focus {
background:#eef7fb;
border-color:#5298bc;
}

#accordion4 #question_inline_editor {
max-width:100%;
margin:0 auto;
padding:0.9rem 1rem 1.2rem;
border:1px solid rgba(82,152,188,0.35);
border-radius:12px;
background:linear-gradient(135deg,#fbfdfe,#eef7fb);
box-shadow:0 8px 22px rgba(22,55,71,0.08);
color:#163747;
font-size:1.06rem;
}

.question-inline-editor .account-question-editor {
width:100%;
box-sizing:border-box;
padding:0;
border:0;
border-radius:0;
background:transparent;
box-shadow:none;
color:#163747;
}

.question-inline-editor .account-question-edit-form {
height:auto;
margin:0;
}

.question-inline-editor .account-question-editor-heading {
margin:0.15rem 0 1rem;
padding:0.65rem 0.85rem;
border:1px solid rgba(82,152,188,0.22);
border-radius:10px;
background:rgba(255,255,255,0.72);
box-shadow:none;
}

.question-inline-editor .account-question-editor-heading h3 {
margin:0 0 0.25rem;
color:#2f6f91;
font-size:1.62rem;
font-weight:900;
line-height:1.2;
text-align:center;
}

.question-inline-editor #inline-edit-question-subheader {
color:#315c70;
font-size:0.98rem;
font-weight:800;
}

.question-inline-editor .question_rows {
width:100%;
margin:0 0 0.85rem;
}

.question-inline-editor .question_labels {
display:block;
width:auto;
margin:0 0 0.25rem;
color:#1f4e68;
font-size:0.88rem;
font-weight:900;
line-height:1;
text-transform:uppercase;
}

.question-inline-editor .account-edit-select-row,
.question-inline-editor .account-answer-grid {
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:0.75rem;
}

.question-inline-editor .account-select-card {
min-width:0;
padding:0.55rem 0.8rem 0.45rem;
border:1px solid rgba(82,152,188,0.45);
border-radius:10px;
background:#fff;
box-shadow:inset 0 1px 0 rgba(255,255,255,0.95),0 2px 7px rgba(22,55,71,0.08);
transition:border-color 0.18s ease,box-shadow 0.18s ease;
}

.question-inline-editor .account-select-card:hover,
.question-inline-editor .account-select-card:focus-within {
border-color:#5298bc;
box-shadow:0 0 0 3px rgba(82,152,188,0.15),0 4px 12px rgba(22,55,71,0.12);
}

.question-inline-editor .account-select-card.is-disabled {
background:#f4f8fa;
border-color:rgba(82,152,188,0.22);
box-shadow:none;
opacity:0.78;
}

.question-inline-editor .account-select-card.is-disabled .question_labels,
.question-inline-editor .account-select-card.is-disabled select {
color:#7d98a5;
}

.question-inline-editor .selectdiv {
position:relative;
display:block;
width:100%;
margin:0;
}

.question-inline-editor .selectdiv:after {
content:"";
position:absolute;
right:0.15rem;
top:50%;
width:0.55rem;
height:0.55rem;
border-right:2px solid #5298bc;
border-bottom:2px solid #5298bc;
pointer-events:none;
transform:translateY(-65%) rotate(45deg);
}

.question-inline-editor select,
.question-inline-editor input[type="text"],
.question-inline-editor textarea {
display:block;
width:100% !important;
box-sizing:border-box;
border:1px solid rgba(82,152,188,0.36);
border-radius:10px;
background:#fff;
box-shadow:inset 0 1px 0 rgba(255,255,255,0.95);
color:#163747;
font-family:Arial,Helvetica,sans-serif;
font-size:1.02rem;
font-weight:700;
line-height:1.35;
outline:0;
transition:border-color 0.18s ease,box-shadow 0.18s ease;
}

.question-inline-editor select {
height:1.8rem;
min-height:0;
padding:0 1.55rem 0 0;
border:0;
border-radius:0;
background:transparent;
box-shadow:none;
-webkit-appearance:none;
-moz-appearance:none;
appearance:none;
cursor:pointer;
}

.question-inline-editor input[type="text"] {
min-height:44px;
padding:0.62rem 0.8rem;
}

.question-inline-editor textarea {
min-height:8rem;
padding:0.75rem 0.85rem;
resize:vertical;
}

.question-inline-editor select:focus,
.question-inline-editor input[type="text"]:focus,
.question-inline-editor textarea:focus {
border-color:#5298bc;
box-shadow:0 0 0 3px rgba(82,152,188,0.15),0 4px 12px rgba(22,55,71,0.12);
}

.question-inline-editor .account-answer-grid .question_rows {
display:grid;
grid-template-columns:minmax(8.5rem,11rem) minmax(0,1fr);
align-items:center;
gap:0.65rem;
}

.question-inline-editor .account-answer-grid .question_labels {
margin:0;
font-size:0.9rem;
line-height:1.15;
}

.question-inline-editor .account-edit-image-row .submission_input {
border:1px dashed rgba(82,152,188,0.45);
border-radius:12px;
background:#fff;
padding:0.75rem;
}

.question-inline-editor .account-current-image {
margin-top:0.55rem;
font-weight:800;
color:#315c70;
}

.question-inline-editor .account-current-image img {
max-height:84px;
max-width:140px;
border-radius:8px;
vertical-align:middle;
}

.question-inline-editor .account-editor-row .ql-toolbar.ql-snow {
border:1px solid rgba(82,152,188,0.36);
border-bottom:0;
border-radius:12px 12px 0 0;
background:#eef7fb;
}

.question-inline-editor .account-editor-row .ql-container.ql-snow {
height:28rem;
min-height:28rem;
max-height:28rem;
border:1px solid rgba(82,152,188,0.36);
border-radius:0 0 12px 12px;
background:#fff;
font-size:1rem;
overflow:hidden;
}

.question-inline-editor .account-editor-row .ql-editor {
height:28rem;
min-height:28rem;
max-height:28rem;
overflow-y:auto;
color:#163747;
}

.question-inline-editor .account-edit-footer {
display:grid;
grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
align-items:center;
gap:0.75rem;
margin-top:1rem;
padding-top:0.85rem;
border-top:1px solid rgba(82,152,188,0.25);
}

.question-inline-editor .account-active-toggle {
display:inline-flex;
align-items:center;
gap:0.45rem;
justify-self:start;
font-weight:900;
color:#163747;
}

#inline_update_question {
display:inline-flex;
align-items:center;
justify-content:center;
justify-self:center;
min-height:42px;
padding:0.6rem 1.15rem;
border:1px solid rgba(119,87,4,0.25);
border-radius:8px;
background:linear-gradient(135deg,#f5c542,#d4a017);
box-shadow:inset 0 1px 0 rgba(255,255,255,0.45),0 6px 14px rgba(22,55,71,0.16);
color:#1f2933;
font-weight:900;
cursor:pointer;
transition:transform 0.16s ease,box-shadow 0.16s ease,background 0.16s ease,border-color 0.16s ease;
}

#inline_update_question:hover,
#inline_update_question:focus {
background:linear-gradient(135deg,#ffd964,#e4ae19);
border-color:rgba(119,87,4,0.45);
box-shadow:inset 0 1px 0 rgba(255,255,255,0.55),0 9px 18px rgba(22,55,71,0.22);
transform:translateY(-1px);
outline:0;
}

#inline_update_question:disabled {
opacity:0.8;
cursor:wait;
}

.question-inline-editor #inline_question_update_message {
display:none;
justify-self:end;
min-width:12rem;
text-align:center;
padding:0.55rem 0.8rem;
border-radius:8px;
font-weight:900;
font-size:0.98rem;
line-height:1.15;
box-shadow:0 6px 14px rgba(22,55,71,0.12);
}

.question-inline-editor #inline_question_update_message.is-working {
background:#eef7fb;
border:1px solid rgba(82,152,188,0.4);
color:#1d5b78;
}

.question-inline-editor #inline_question_update_message.is-success {
background:#e8f7ef;
border:1px solid rgba(36,128,83,0.28);
color:#216b48;
}

.question-empty-state {
display:grid;
gap:1rem;
width:100%;
max-width:760px;
margin:1rem 0;
padding:1.15rem;
border:1px solid rgba(82,152,188,0.28);
border-radius:14px;
background:#fff;
box-shadow:0 12px 28px rgba(22,55,71,0.11);
box-sizing:border-box;
color:#163747;
}

.question-empty-copy {
display:grid;
gap:0.25rem;
text-align:left;
}

.question-empty-copy strong {
font-size:1.15rem;
color:#1f4e68;
}

.question-empty-copy span {
font-size:1rem;
font-weight:800;
color:#315c70;
}

.question-empty-action-row {
display:flex;
align-items:center;
gap:0.8rem;
flex-wrap:wrap;
}

.question-empty-help {
font-size:0.98rem;
font-weight:900;
color:#315c70;
line-height:1.35;
}

.question-inline-editor #inline_question_update_message.is-error {
background:#fff1f1;
border:1px solid rgba(190,64,64,0.3);
color:#a82d2d;
}

.editor-request-modal {
position:fixed;
inset:0;
z-index:2147483000;
display:none !important;
align-items:center;
justify-content:center;
padding:1rem;
background:rgba(8,31,43,0.45);
}

.editor-request-modal.is-visible {
display:flex !important;
}

.editor-request-dialog {
position:relative;
width:min(94vw,520px);
padding:1.25rem;
border-radius:16px;
background:#fff;
box-shadow:0 24px 60px rgba(8,31,43,0.34);
color:#163747;
}

.editor-request-dialog h3 {
margin:0 2rem 0.35rem 0;
color:#1f4e68;
font-size:1.35rem;
font-weight:900;
}

.editor-request-subject {
margin:0 0 1rem;
font-weight:800;
color:#315c70;
}

.editor-request-close {
position:absolute;
top:0.75rem;
right:0.75rem;
width:2rem;
height:2rem;
border:0;
border-radius:8px;
background:#eef7fb;
color:#163747;
font-size:1.35rem;
font-weight:900;
cursor:pointer;
}

#question-editor-request-form {
display:grid;
gap:0.65rem;
}

#question-editor-request-form label {
font-weight:900;
color:#1f4e68;
}

#question-editor-request-form input,
#question-editor-request-form textarea {
width:100%;
box-sizing:border-box;
border:1px solid rgba(82,152,188,0.36);
border-radius:10px;
padding:0.65rem 0.75rem;
font-size:1rem;
font-weight:700;
color:#163747;
}

.editor-request-honeypot {
position:absolute;
left:-9999px;
opacity:0;
}

.editor-request-submit {
justify-self:start;
min-height:42px;
padding:0.6rem 1.1rem;
border:1px solid rgba(119,87,4,0.25);
border-radius:8px;
background:linear-gradient(135deg,#f5c542,#d4a017);
color:#1f2933;
font-weight:900;
cursor:pointer;
}

#question-editor-request-message {
font-weight:900;
}

.editor-request-success {
color:#216b48;
}

.editor-request-error {
color:#a82d2d;
}

@media (max-width: 860px) {
.question-action-bar {
flex-wrap:wrap;
justify-content:center;
}
}

@media (max-width: 700px) {
.question-action-bar {
display:flex;
justify-content:center;
gap:0.65rem;
}

.question-action-button {
width:min(100%,15rem);
min-width:0;
}

.question-inline-editor .account-edit-select-row,
.question-inline-editor .account-answer-grid,
.question-inline-editor .account-edit-footer,
.question-inline-editor .account-answer-grid .question_rows {
grid-template-columns:1fr;
display:grid;
}

.question-inline-editor .account-active-toggle,
#inline_update_question,
.question-inline-editor #inline_question_update_message {
justify-self:center;
}

.question-inline-editor .account-editor-row .ql-container.ql-snow,
.question-inline-editor .account-editor-row .ql-editor {
height:20rem;
min-height:20rem;
max-height:20rem;
}
}

.explanation img {
max-width:100%;
}
/* FAQ Styler */
.faq_container {
text-align: left;
cursor:pointer;
margin:0px auto;
width:100%;
}

#faqs_dl dt,#faqs_dl dd {

cursor:pointer;
}

#faqs_dl dt div,#faqs_dl dd div {
width:100%;
border:1px solid silver;
}

#faqs_dl dt {
font-size:1em;
color:#9d9d9d;
cursor:pointer;
height:37px;
line-height:37px;
margin:0 0 15px 25px
}

#faqs_dl dd {
font-size:1em;
margin:0 0 20px 25px
}

#faqs_dl dt {

}

#faqs_dl .expanded_image {

}

button {
display:inline-block;
background:gold;
padding:0.35em 1.2em;
border:1px solid #FFFFFF;
border-radius:0.3em;
box-sizing:border-box;
text-decoration:none;
font-family: 'Roboto ',sans-serif;
font-weight:300;
text-align:center;
transition:all 0.2s;
}

button:hover {
background-color:#FFFFFF;
border:1px solid gold;
}


/* Slider and switch */
.switch {
position:relative;
display:inline-block;
width:60px;
height:34px;
}

.switch input {
opacity:0;
width:0;
height:0;
}

.slider {
position:absolute;
cursor:pointer;
top:0;
left:0;
right:0;
bottom:0;
background-color:#ccc;
-webkit-transition:.4s;
transition:.4s;
}

.slider:before {
position:absolute;
content: " ";
height:26px;
width:26px;
left:4px;
bottom:4px;
background-color:white;
-webkit-transition:.4s;
transition:.4s;
}

input:checked + .slider {
background-color:gold;
}

input:focus + .slider {
box-shadow:0 0 1px gold;
}

input:checked + .slider:before {
-webkit-transform:translateX(26px);
-ms-transform:translateX(26px);
transform:translateX(26px);
}
/* Rounded sliders */
.slider.round {
border-radius:34px;
}

.slider.round:before {
border-radius:50%;
}

#cardtype_label {
display:inline-block;
position:absolute;
margin:2.3em 0 0 .7em;
}

#cloze_buttons {
display:inline-block;
position:relative;
left:75px;
top:24px;
line-height:26px;
}
/* Triple Toggle */
.tw-toggle {
background:#fff;
display:inline-block;
padding:2px 3px;

position:relative;

}

#timer{
    display: inline-block;
    text-align: right;
}
#qtyper {
display:inline-block;
position:relative;
left:34em;
padding:0.5em;
}

#qtype_title {
font-size:large;
}


/***********************************************************************
 * Landing Page
 **********************************************************************/
.outer,.left,.right,.right_top_left,.right_mid_left,.right_bottom_left,.right_top_right,.right_mid_right,.right_bottom_right {
border:0px;
}

.outer {
top:0;
left:0;
right:0;
bottom:0;
overflow:auto;
position:fixed;
height:100%;
}

.left,.right {
height:100%;
position:fixed;
}

.left {
width:33%;
height:inherit;
background-image:url(images/landing_wc.jpg);
background-position: top;

}

.right {
width:66%;
height:inherit;
left:33%;
}

.right_row {
max-width:100%;
height:33.34%;
}

.right_top_left,.right_mid_left,.right_bottom_left,.right_top_right,.right_mid_right,.right_bottom_right {
width:50%;
display:inline-block;
}

.right_top_right,.right_mid_right,.right_bottom_right {
background-color:seashell;
height:100%;
}

.right_top_left,.right_mid_left,.right_bottom_left {
float:left;
background-color:cyan;
height:100%;
}

.right_bottom_right {
background:rgb(2,0,36);
background:radial-gradient(circle,rgba(2,0,36,1) 0%,rgba(0,212,255,1) 0%,rgba(79,176,210,1) 100%);
}

.right_mid_right {
background:rgb(32,0,36);
background:radial-gradient(circle,rgba(32,0,36,1) 0%,rgba(201,160,244,1) 0%,rgba(208,80,252,1) 100%);
}

.right_top_right {
background-color:#e28743;
}

.right_bottom_left {
background-color:#76b5c5;
}

.right_mid_left {
background-color:#873e23;
}

.right_top_left {
background-color:#154c79;
}

.lander_text,.mainlander {
display:grid;
place-items:center;
margin: 1em;
height:100%;
}

.lander_text {
font-weight:bold;
font-size:x-large;
color:#fff;
font-family:arial;


grid-template-rows: [row1-start ]1em [row1-end ]auto [third-line ]1em [last-line ];
align-content:center;
}

.grid-cell {
grid-column-start:2;
grid-row-start:2;
}

.mainlander {

font-weight:bold;
font-size:2.7em;
font-family:arial;

text-align:center;
}
/***************************************************************************************
 * Landing page fonts
 **************************************************************************************/
#english {

font-size:0.6em;
font-weight:400;
}

#subtitle_english {

font-size:0.5em;
font-weight:300;
}

#title_english,#quickabout,#benefits {
background: #fff;
padding: 0.3em;
font-size:1.3em;
font-weight:bold;
border: 1px solid #ccc;
box-shadow: 10px 5px 5px silver;
}
#quickabout,#benefits{
    font-size: 12px;
    text-align: left;
    font-weight: normal;
    margin-top: 1.5em;
}
.grid_title {

font-size:1.0em;
font-weight:bold;
margin-bottom:0.5em;
text-align: center;
}

.links {

font-size:0.3em;
font-weight:300;
margin-top:0.5em;
}

#signup {
border:0.15em solid darkgoldenrod;

font-size:xx-large;
text-shadow:1px 1px 2px darkgoldenrod;
color:#fff;
}
/*****************************************************************************************
 * Top Fixed Header
 ****************************************************************************************/
#top-fixed{
        height: 5em;
        width: 100%;
        background-color: #5298bc;
        position: fixed;
        top: 0;
        z-index: 1;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
       
    }
    .top-grid-cell{
        display: flex;
        justify-content: center;
        color: #fff;
        height: 2em;
        padding: 0.3em;
        
    }
    .top-grid-cell-left{
        display: flex;
        justify-content: left;
        color: #fff;
        height: 2em;
        padding: 0.3em;
        
    }
    .top-grid-cell-left a:link{
        color: #fff;
    }
    .top-grid-cell-left a:hover{
        color: gold;
    }
    .top-grid-cell-left a:visited{
        color: #fff;
    }
  #mtg-grid-container{
    grid-template-columns: 1fr 1fr 1fr;
    display: flex;
    width: 100%;
}
.mtg-grid-item{
    width: 33.3%;
}
.mtg-grid-center{
    text-align: center;
}
.middle-top-grid{
        display: flex;
    justify-content: left;
    color: #fff;
    width: 1024px;    
}
.left-top-grid-item{
    text-align: right;   
}
/* Top Header Links */
a.toplink:link{
    color: #fff;
    font-size: 11px;
}
a.toplink:visited{
    color: #fff;
    font-size: 11px;
}
.main-grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    padding: 16px;
}

.main-grid-item {
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 16px;
    text-align: center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    text-align: left;
}
#factline{
    text-align: center;
    font-weight: 800;
    font-size: 1.5em;
    margin: 0.5em 0;
}
/********************************************************************************************
  * Header Font CSS
  *******************************************************************************************/
  .zen-dots-regular {
  font-family: "Zen Dots", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: xxx-large;
  }
/*******************************************************************************************/

/*******************************************************************************************
 * Question Highlighter
 ******************************************************************************************/
 .highlight {
    background-color: yellow;
    color: black;
}
/*******************************************************************************************
 * Video Background
 ******************************************************************************************/
/* Background video wrapper */
    .video-background {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
        z-index: -1; /* Behind everything */
    }

    /* Video fills the screen */
    .video-background video {
        width: 100%;
        height: 100%;
        object-fit: cover;  /* Prevent distortion */
    }

    /* Dark overlay for readability */
    .video-background::after {
        content: "";
        position: absolute;
        top: 0; left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.4); /* adjust darkness */
        z-index: 2;
    }

    @media (max-width: 768px) {
      .video-background video {
        display: none;
      }
      body {
        background: url('fallback.jpg') center/cover no-repeat;
      }
    }

    /******************************************************************************************
     * Updated CSS for mobile friendly log in page
     * ***************************************************************************************/
     /* Mobile-friendly login page refresh */
:root {
    --bbp-blue: #5298bc;
    --bbp-blue-dark: #2f6f91;
    --bbp-panel: rgba(255, 255, 255, 0.92);
    --bbp-text: #163747;
}

/* Keep background video from hurting readability */
.video-background::after {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(10, 35, 50, 0.38);
    z-index: -1;
}

.video-background video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Top header */
#top-fixed {
    width: 100%;
    background: rgba(82, 152, 188, 0.95);
    color: #fff;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
}

#mtg-grid-container {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 1rem;
    align-items: center;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0.75rem 1rem;
}

.h4-header {
    margin: 0;
    line-height: 1.2;
}

/* Main login shell */
.styler {
    width: min(1120px, calc(100% - 2rem));
    margin: 2rem auto;
}

.login-header {
    text-align: center;
    color: #fff;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
    margin-bottom: 1rem;
}

.main-login-grid-container {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 420px) minmax(0, 1fr);
    gap: 1.25rem;
    align-items: stretch;
}

/* Login card */
.main-login-grid-cell.login-top {
    background: var(--bbp-panel);
    border: 1px solid rgba(255, 255, 255, 0.65);
    border-radius: 22px;
    padding: 1.25rem;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.24);
    backdrop-filter: blur(8px);
}

.login_form {
    display: grid;
    gap: 0.85rem;
}

.form-control {
    width: 100%;
    min-height: 48px;
    box-sizing: border-box;
    border-radius: 12px;
    border: 1px solid rgba(47, 111, 145, 0.35);
    padding: 0.85rem 1rem;
    font-size: 16px; /* prevents iOS zoom */
}

.btn {
    min-height: 48px;
    border-radius: 12px;
    font-weight: 700;
    white-space: normal;
}

.btn-primary {
    background: var(--bbp-blue-dark);
    border-color: var(--bbp-blue-dark);
}

.btn-info,
.btn-success {
    background: var(--bbp-blue);
    border-color: var(--bbp-blue);
}

/* Carousel cards */
.carousel-container {
    display: flex;
    align-items: center;
    justify-content: center;
}

.owl-carousel {
    width: 100%;
}

.login-carousel-item,
.owl-carousel .item {
    min-height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(82, 152, 188, 0.9);
    color: #fff;
    border-radius: 18px;
    padding: 1rem;
    text-align: center;
    line-height: 1.45;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.20);
}

/* Fact line */
#factline {
    width: min(1120px, calc(100% - 2rem));
    margin: 1rem auto;
    padding: 0.85rem 1rem;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.92);
    color: var(--bbp-text);
    text-align: center;
    font-weight: 700;
}

/* Content sections */
.main-grid-container {
    width: min(1120px, calc(100% - 2rem));
    margin: 1.25rem auto;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.main-grid-item {
    background: rgba(255, 255, 255, 0.94);
    border-radius: 20px;
    padding: 1.25rem;
    color: var(--bbp-text);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16);
}

/* Modals on mobile */
.modal-dialog {
    width: min(640px, calc(100% - 1rem));
    margin: 0.5rem auto;
}

.modal-content {
    border-radius: 18px;
    overflow: hidden;
}

.modal-body {
    max-height: 70vh;
    overflow-y: auto;
}

/*************************************************************************************
 * Registration Modal
 ************************************************************************************/
.bbp-registration-modal .modal-dialog {
width:min(720px,calc(100% - 1rem));
}

.bbp-registration-modal .modal-content {
border:1px solid rgba(82,152,188,0.35);
border-radius:20px;
background:#f7fbfd;
box-shadow:0 24px 70px rgba(8,31,43,0.34);
color:#163747;
}

.bbp-registration-modal .modal-header {
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:1rem;
padding:1rem 1.15rem;
border-bottom:1px solid rgba(82,152,188,0.28);
background:linear-gradient(135deg,#235b80,#5298bc);
color:#fff;
}

.bbp-registration-modal .modal-title {
margin:0;
font-size:2.48rem;
font-weight:900;
line-height:1.1;
}

.registration-modal-subtitle {
margin:0.35rem 0 0;
font-size:1.5rem;
font-weight:700;
line-height:1.3;
}

.bbp-registration-modal .close {
border:0;
background:rgba(255,255,255,0.14);
border-radius:8px;
color:#fff;
font-size:2.48rem;
font-weight:900;
line-height:1;
width:3rem;
height:3rem;
cursor:pointer;
}

.bbp-registration-modal .modal-body {
padding:1.1rem;
background:linear-gradient(135deg,#fbfdfe,#eef7fb);
}

.bbp-registration-modal .form-group {
margin:0 0 0.85rem;
}

.registration-field {
display:block;
padding:0.6rem 0.8rem;
border:1px solid rgba(82,152,188,0.42);
border-radius:12px;
background:#fff;
box-shadow:inset 0 1px 0 rgba(255,255,255,0.95),0 2px 7px rgba(22,55,71,0.08);
}

.registration-field label,
.registration-field > span,
.bbp-registration-modal .registration-field > label,
.bbp-registration-modal .form-group > label {
display:block;
margin:0 0 0.25rem;
color:#1f4e68;
font-size:1.23rem;
font-weight:900;
line-height:1;
text-transform:uppercase;
}

.bbp-registration-modal .form-control {
display:block;
width:100%;
height:auto;
min-height:42px;
margin:0;
padding:0.58rem 0.7rem;
border:1px solid rgba(82,152,188,0.25);
border-radius:10px;
background:#fff;
color:#163747;
font-size:0.95rem;
font-weight:700;
box-shadow:none;
}

.bbp-registration-modal .form-control:focus {
border-color:#5298bc;
box-shadow:0 0 0 3px rgba(82,152,188,0.18);
outline:0;
}

.registration-secondary-button {
display:inline-flex;
align-items:center;
justify-content:center;
margin:0.6rem 0 0;
min-height:36px;
padding:0.45rem 0.85rem;
border:1px solid rgba(82,152,188,0.35);
border-radius:8px;
background:#eef7fb;
color:#163747;
font-weight:900;
cursor:pointer;
}

.registration-bank-panel {
padding:0.8rem;
border:1px solid rgba(82,152,188,0.32);
border-radius:14px;
background:rgba(255,255,255,0.72);
}

.registration-bank-panel h5 {
margin:0 0 0.4rem;
color:#2f6f91;
font-size:1.88rem;
font-weight:900;
}

.registration-bank-panel p {
margin:0 0 0.75rem;
font-size:1.47rem;
line-height:1.4;
}

.registration-bank-grid {
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:0.75rem;
}

.registration-select-field {
position:relative;
}

.registration-select-field:after {
content:"";
position:absolute;
right:1rem;
bottom:1.15rem;
width:0.55rem;
height:0.55rem;
border-right:2px solid #5298bc;
border-bottom:2px solid #5298bc;
pointer-events:none;
transform:rotate(45deg);
}

.registration-select-field select {
padding-right:1.9rem;
-webkit-appearance:none;
-moz-appearance:none;
appearance:none;
}

.bbp-registration-modal .modal-footer {
display:flex;
align-items:center;
justify-content:center;
gap:0.35rem;
padding:0.85rem 1.15rem 1.05rem;
border-top:1px solid rgba(82,152,188,0.25);
background:#fff;
}

.registration-submit-button,
.registration-cancel-button,
.registration-footer-resend {
display:inline-flex;
align-items:center;
justify-content:center;
min-height:42px;
padding:0.75rem 1.55rem;
border-radius:8px;
font-size:1.5rem;
font-weight:900;
cursor:pointer;
}

.registration-submit-button {
border:1px solid rgba(119,87,4,0.25);
background:linear-gradient(135deg,#f5c542,#d4a017);
box-shadow:inset 0 1px 0 rgba(255,255,255,0.45),0 6px 14px rgba(22,55,71,0.16);
color:#1f2933;
}

.registration-cancel-button {
border:1px solid rgba(82,152,188,0.35);
background:#fff;
color:#163747;
}

#registration_form #display_error,
#registration_form #display_status {
display:none;
margin:0.75rem 0 0;
border-radius:10px;
font-weight:800;
font-size:1.35rem;
}

.registration-code-panel {
    background: #f7fbfd;
    border: 1px solid rgba(18, 63, 96, 0.18);
    border-radius: 8px;
    display: grid;
    gap: 0.55rem;
    margin-top: 0.75rem;
    padding: 0.8rem;
    text-align: left;
}

.registration-code-panel h4 {
    color: #163747;
    font-size: 1.15rem;
    margin: 0;
}

.registration-code-panel p {
    color: #42667a;
    font-weight: 700;
    line-height: 1.35;
    margin: 0;
}

.registration-code-row {
    display: grid;
    gap: 0.5rem;
    grid-template-columns: minmax(0, 1fr) auto;
}

.registration-code-row input {
    border: 1px solid rgba(18, 63, 96, 0.24);
    border-radius: 8px;
    color: #163747;
    font-size: 1.25rem;
    font-weight: 900;
    letter-spacing: 0.18em;
    min-height: 40px;
    padding: 0.4rem 0.65rem;
    text-align: center;
}

.registration-code-row button,
.registration-code-panel .registration-resend-button {
    background: #d8a62a;
    border: 0;
    border-radius: 8px;
    color: #fff;
    cursor: pointer;
    font-weight: 900;
    min-height: 40px;
    padding: 0.45rem 0.8rem;
}

.registration-code-panel .registration-resend-button {
    background: transparent;
    border: 1px solid rgba(18, 63, 96, 0.22);
    color: #315c70;
    justify-self: start;
}

.registration-code-message.is-success {
    color: #17623a;
}

.registration-code-message.is-error {
    color: #8a1c1c;
}

.registration-code-modal {
    align-items: center;
    background: rgba(8, 31, 43, 0.68);
    display: none;
    inset: 0;
    justify-content: center;
    padding: 1rem;
    position: fixed;
    z-index: 2147483000;
}

.registration-code-modal.is-visible {
    display: flex;
}

.registration-code-modal-card {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 28px 70px rgba(8, 31, 43, 0.38);
    max-width: 540px;
    padding: 1.25rem;
    position: relative;
    width: min(94vw, 540px);
}

.registration-code-modal-close {
    align-items: center;
    background: #eef7fb;
    border: 0;
    border-radius: 999px;
    color: #163747;
    cursor: pointer;
    display: inline-flex;
    font-size: 1.4rem;
    font-weight: 900;
    height: 2.2rem;
    justify-content: center;
    position: absolute;
    right: 0.8rem;
    top: 0.8rem;
    width: 2.2rem;
}

.registration-code-modal .registration-code-panel {
    margin-top: 0;
    padding: 1rem;
}

.registration-code-modal .registration-code-panel h4 {
    font-size: 1.45rem;
    padding-right: 2.2rem;
}

.registration-resend-button {
display:inline-flex;
align-items:center;
justify-content:center;
min-height:36px;
padding:0.45rem 0.8rem;
border:1px solid rgba(82,152,188,0.35);
border-radius:8px;
background:#eef7fb;
color:#163747;
font-weight:900;
font-size:1.25rem;
cursor:pointer;
}

.registration-resend-button:disabled {
opacity:0.55;
cursor:not-allowed;
}

/*************************************************************************************
 * Account Recovery Modal
 ************************************************************************************/
.bbp-recovery-modal .modal-dialog {
width:min(680px,calc(100% - 1rem));
}

.bbp-recovery-modal .modal-content {
border:1px solid rgba(82,152,188,0.35);
border-radius:20px;
background:#f7fbfd;
box-shadow:0 24px 70px rgba(8,31,43,0.34);
color:#163747;
}

.bbp-recovery-modal .modal-header {
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:1rem;
padding:1rem 1.15rem;
border:0;
background:linear-gradient(135deg,#2f6f91,#5298bc);
color:#fff;
}

.bbp-recovery-modal .modal-title {
margin:0;
font-size:2.48rem;
font-weight:900;
line-height:1.1;
}

.recovery-modal-subtitle {
margin:0.35rem 0 0;
font-size:1.35rem;
font-weight:700;
line-height:1.3;
}

.bbp-recovery-modal .close {
border:0;
background:rgba(255,255,255,0.14);
border-radius:8px;
color:#fff;
font-size:2.48rem;
line-height:1;
opacity:1;
width:42px;
height:42px;
}

.bbp-recovery-modal .modal-body {
padding:1.1rem;
background:linear-gradient(135deg,#fbfdfe,#eef7fb);
}

.recovery-tabs {
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:0.5rem;
margin:0 0 0.85rem;
}

.recovery-tab {
display:inline-flex;
align-items:center;
justify-content:center;
min-height:44px;
padding:0.65rem 0.9rem;
border:1px solid rgba(82,152,188,0.35);
border-radius:12px;
background:#fff;
color:#1f4e68;
font-size:1.28rem;
font-weight:900;
}

.recovery-tab.is-active {
border-color:rgba(119,87,4,0.3);
background:linear-gradient(135deg,#f5c542,#d4a017);
color:#1f2933;
box-shadow:inset 0 1px 0 rgba(255,255,255,0.45),0 6px 14px rgba(22,55,71,0.12);
}

.recovery-panel {
display:none;
padding:0.8rem;
margin:0 0 0.85rem;
border:1px solid rgba(82,152,188,0.32);
border-radius:14px;
background:rgba(255,255,255,0.78);
}

.recovery-panel.is-active {
display:block;
}

.recovery-panel h5 {
margin:0 0 0.35rem;
color:#2f6f91;
font-size:1.75rem;
font-weight:900;
}

.recovery-panel p {
margin:0;
font-size:1.3rem;
line-height:1.4;
}

.recovery-field {
display:block;
padding:0.6rem 0.8rem;
border:1px solid rgba(82,152,188,0.42);
border-radius:12px;
background:#fff;
box-shadow:inset 0 1px 0 rgba(255,255,255,0.9);
}

.bbp-recovery-modal .form-group {
margin:0 0 0.85rem;
}

.bbp-recovery-modal .form-group > label {
display:block;
margin:0 0 0.25rem;
color:#1f4e68;
font-size:1.23rem;
font-weight:900;
}

.bbp-recovery-modal .form-control {
display:block;
width:100%;
height:auto;
min-height:42px;
margin:0;
padding:0.55rem 0.65rem;
border:1px solid rgba(82,152,188,0.36);
border-radius:10px;
background:#fff;
color:#163747;
font-size:1.47rem;
font-weight:700;
box-shadow:none;
}

.bbp-recovery-modal .form-control:focus {
border-color:#5298bc;
box-shadow:0 0 0 3px rgba(82,152,188,0.18);
outline:0;
}

.bbp-recovery-modal .modal-footer {
display:flex;
align-items:center;
justify-content:center;
gap:0.35rem;
padding:0.85rem 1.15rem 1.05rem;
border:0;
background:#f7fbfd;
}

.recovery-submit-button,
.recovery-cancel-button,
.recovery-resend-button {
display:inline-flex;
align-items:center;
justify-content:center;
min-height:42px;
padding:0.75rem 1.35rem;
border-radius:8px;
font-size:1.28rem;
font-weight:900;
line-height:1;
text-decoration:none;
transition:transform 0.15s ease,box-shadow 0.15s ease,background 0.15s ease;
}

.recovery-submit-button {
border:1px solid rgba(119,87,4,0.25);
background:linear-gradient(135deg,#f5c542,#d4a017);
box-shadow:inset 0 1px 0 rgba(255,255,255,0.45),0 6px 14px rgba(22,55,71,0.16);
color:#1f2933;
}

.recovery-cancel-button,
.recovery-resend-button {
border:1px solid rgba(82,152,188,0.35);
background:#fff;
color:#163747;
}

.recovery-submit-button:hover,
.recovery-cancel-button:hover,
.recovery-resend-button:hover {
transform:translateY(-1px);
box-shadow:0 8px 16px rgba(22,55,71,0.14);
}

.recovery-resend-button:disabled {
opacity:0.55;
cursor:not-allowed;
}

#forgot_form #display_error,
#forgot_form #display_status {
display:none;
margin:0.75rem 0 0;
border-radius:10px;
font-weight:800;
font-size:1.35rem;
}

.activation-card {
max-width:620px;
margin:3rem auto;
padding:1.5rem;
border:1px solid rgba(82,152,188,0.35);
border-radius:18px;
background:linear-gradient(135deg,#fbfdfe,#eef7fb);
box-shadow:0 18px 45px rgba(8,31,43,0.18);
color:#163747;
text-align:center;
}

.activation-card h2 {
margin:0 0 0.75rem;
color:#2f6f91;
font-size:1.8rem;
font-weight:900;
}

.activation-card p {
font-size:1.1rem;
font-weight:700;
line-height:1.45;
}

.activation-login-link {
display:inline-flex;
align-items:center;
justify-content:center;
min-height:42px;
padding:0.6rem 1.15rem;
border:1px solid rgba(119,87,4,0.25);
border-radius:8px;
background:linear-gradient(135deg,#f5c542,#d4a017);
box-shadow:inset 0 1px 0 rgba(255,255,255,0.45),0 6px 14px rgba(22,55,71,0.16);
color:#1f2933;
font-weight:900;
text-decoration:none;
}

@media (max-width: 700px) {
.bbp-registration-modal {
padding:0.5rem !important;
}

.bbp-registration-modal .modal-dialog {
display:flex;
align-items:stretch;
width:min(680px,100%);
max-height:calc(100vh - 1rem);
max-height:calc(100dvh - 1rem);
margin:0 auto;
}

.bbp-registration-modal .modal-content {
display:flex;
flex-direction:column;
max-height:calc(100vh - 1rem);
max-height:calc(100dvh - 1rem);
overflow:hidden;
}

.bbp-registration-modal form {
display:flex;
flex:1 1 auto;
flex-direction:column;
min-height:0;
}

.bbp-registration-modal .modal-header {
flex:0 0 auto;
padding:0.85rem 1rem;
}

.bbp-registration-modal .modal-title {
font-size:2rem;
}

.registration-modal-subtitle {
font-size:1.25rem;
}

.bbp-registration-modal .modal-body {
flex:1 1 auto;
min-height:0;
overflow-y:auto;
padding:0.85rem 1rem;
-webkit-overflow-scrolling:touch;
}

.registration-bank-grid {
grid-template-columns:1fr;
}

.bbp-registration-modal .modal-footer {
flex:0 0 auto;
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:0.3rem;
justify-content:stretch;
padding:0.7rem 0.6rem max(0.7rem,env(safe-area-inset-bottom));
position:relative;
}

.bbp-registration-modal .modal-footer:before,
.bbp-registration-modal .modal-footer:after {
content:none;
display:none;
}

.bbp-registration-modal .modal-footer .loading-animation {
position:absolute;
top:0.25rem;
left:50%;
transform:translateX(-50%);
width:34px;
max-width:34px;
height:auto;
margin:0 auto !important;
}

.registration-submit-button,
.registration-cancel-button,
.registration-footer-resend {
box-sizing:border-box;
display:flex;
flex:0 1 auto;
font-size:1rem;
line-height:1.1;
max-width:100%;
min-height:36px;
margin-left:0 !important;
margin-right:0 !important;
padding:0.45rem 0.3rem;
text-align:center;
white-space:normal;
width:100%;
}
}

/*************************************************************************************
 * Main Page Auth Modals
 ************************************************************************************/
.bbp-registration-modal .modal-dialog,
.bbp-recovery-modal .modal-dialog {
width:min(940px,calc(100% - 2rem));
max-width:940px;
margin:1rem auto;
}

.bbp-registration-modal .modal-content,
.bbp-recovery-modal .modal-content {
border:0;
border-radius:8px;
background:#fff;
box-shadow:0 28px 70px rgba(8,31,43,0.38);
color:#163747;
overflow:hidden;
}

.bbp-registration-modal form,
.bbp-recovery-modal form {
display:grid;
grid-template-columns:minmax(260px,0.86fr) minmax(320px,1fr);
gap:0;
max-height:min(92vh,780px);
min-height:0;
overflow:hidden;
}

.bbp-registration-modal .modal-header,
.bbp-recovery-modal .modal-header {
align-content:start;
align-items:start;
background:#eef7fb;
border:1px solid rgba(82,152,188,0.18);
border-radius:8px;
display:grid;
gap:0.75rem;
grid-row:1 / span 2;
padding:1.2rem;
position:relative;
}

.bbp-registration-modal .modal-header:before,
.bbp-recovery-modal .modal-header:before {
align-items:center;
background:#fff;
border-radius:8px;
box-shadow:0 8px 18px rgba(22,55,71,0.1);
color:#d5a427;
content:"person_add";
display:inline-flex;
font-family:"Material Symbols Outlined";
font-size:2rem;
font-weight:normal;
height:3rem;
justify-content:center;
line-height:1;
width:3rem;
}

.bbp-recovery-modal .modal-header:before {
content:"lock_reset";
}

.bbp-registration-modal .modal-header > div,
.bbp-recovery-modal .modal-header > div {
display:grid;
gap:0.45rem;
padding-right:2.4rem;
}

.bbp-registration-modal .modal-title,
.bbp-recovery-modal .modal-title {
color:#163747;
font-family:"Oswald",Arial,Helvetica,sans-serif;
font-size:2rem;
font-weight:900;
line-height:1.08;
margin:0;
}

.registration-modal-subtitle,
.recovery-modal-subtitle {
color:#42667a;
font-size:1rem;
font-weight:800;
line-height:1.45;
margin:0;
}

.bbp-registration-modal .close,
.bbp-recovery-modal .close {
align-items:center;
background:#fff;
border:0;
border-radius:999px;
color:#163747;
cursor:pointer;
display:inline-flex;
font-size:1.4rem;
font-weight:900;
height:2.2rem;
justify-content:center;
line-height:1;
opacity:1;
padding:0;
position:absolute;
right:0.8rem;
top:0.8rem;
width:2.2rem;
}

.bbp-registration-modal .modal-body,
.bbp-recovery-modal .modal-body {
background:#fff;
min-height:0;
overflow-y:auto;
padding:1.2rem 1.25rem 0.85rem;
}

.bbp-registration-modal .form-group,
.bbp-recovery-modal .form-group {
margin:0 0 0.8rem;
}

.registration-field,
.recovery-field,
.registration-bank-panel,
.recovery-panel {
background:#f7fbfd;
border:1px solid rgba(82,152,188,0.22);
border-radius:8px;
box-shadow:none;
}

.registration-bank-panel,
.recovery-panel {
padding:0.85rem;
}

.registration-field,
.recovery-field {
padding:0.65rem 0.75rem;
}

.registration-field label,
.registration-field > span,
.bbp-registration-modal .registration-field > label,
.bbp-registration-modal .form-group > label,
.bbp-recovery-modal .form-group > label {
color:#163747;
font-size:0.88rem;
font-weight:900;
line-height:1.2;
margin:0 0 0.32rem;
text-transform:none;
}

.bbp-registration-modal .form-control,
.bbp-recovery-modal .form-control {
background:#fff;
border:1px solid rgba(18,63,96,0.24);
border-radius:8px;
color:#163747;
font-size:0.98rem;
font-weight:700;
min-height:40px;
padding:0.55rem 0.65rem;
width:100%;
}

.bbp-registration-modal .form-control:focus,
.bbp-recovery-modal .form-control:focus {
border-color:#5298bc;
box-shadow:0 0 0 3px rgba(82,152,188,0.18);
outline:0;
}

.registration-bank-panel h5,
.recovery-panel h5 {
color:#163747;
font-family:"Oswald",Arial,Helvetica,sans-serif;
font-size:1.45rem;
font-weight:900;
line-height:1.1;
margin:0 0 0.35rem;
}

.registration-bank-panel p,
.recovery-panel p,
.registration-domain-rule-note,
.registration-exception-note {
color:#42667a;
font-size:0.95rem;
font-weight:800;
line-height:1.4;
margin:0;
}

.registration-bank-grid {
gap:0.7rem;
margin-top:0.7rem;
}

.registration-secondary-button {
background:#eef7fb;
border:1px solid rgba(82,152,188,0.24);
border-radius:8px;
color:#315c70;
font-size:0.92rem;
font-weight:900;
min-height:36px;
padding:0.45rem 0.75rem;
}

.registration-qbank-exception {
background:#fff8df;
border:1px solid rgba(216,166,42,0.28);
border-radius:8px;
color:#42667a;
margin-top:0.75rem;
padding:0.75rem;
}

.registration-qbank-exception strong {
color:#b07804;
display:block;
font-weight:900;
margin-bottom:0.3rem;
}

.recovery-tabs {
background:#eef7fb;
border:1px solid rgba(82,152,188,0.24);
border-radius:999px;
display:grid;
gap:0.25rem;
grid-template-columns:repeat(2,minmax(0,1fr));
margin:0 0 0.85rem;
padding:0.25rem;
}

.recovery-tab {
background:transparent;
border:0;
border-radius:999px;
color:#315c70;
cursor:pointer;
font-size:0.95rem;
font-weight:900;
min-height:38px;
padding:0.45rem 0.7rem;
}

.recovery-tab.is-active {
background:#fff;
box-shadow:0 6px 16px rgba(22,55,71,0.12);
color:#163747;
}

.bbp-registration-modal .modal-footer,
.bbp-recovery-modal .modal-footer {
align-items:center;
background:#fff;
border:0;
display:flex;
flex-wrap:wrap;
gap:0.55rem;
justify-content:flex-end;
padding:0 1.25rem 1.2rem;
position:relative;
}

.bbp-registration-modal .modal-footer:before,
.bbp-registration-modal .modal-footer:after,
.bbp-recovery-modal .modal-footer:before,
.bbp-recovery-modal .modal-footer:after {
content:none;
display:none;
}

.bbp-registration-modal .modal-footer .loading-animation {
height:auto;
margin:0 auto !important;
max-width:34px;
position:absolute;
width:34px;
}

.registration-submit-button,
.registration-cancel-button,
.registration-footer-resend,
.recovery-submit-button,
.recovery-cancel-button,
.recovery-resend-button {
align-items:center;
border-radius:8px;
cursor:pointer;
display:inline-flex;
font-size:0.98rem;
font-weight:900;
justify-content:center;
line-height:1.1;
min-height:40px;
padding:0.55rem 0.85rem;
text-align:center;
text-decoration:none;
transition:background 0.15s ease,box-shadow 0.15s ease,transform 0.15s ease;
}

.registration-submit-button,
.recovery-submit-button {
background:#d5a427;
border:1px solid #d5a427;
box-shadow:none;
color:#fff;
}

.registration-submit-button:hover,
.registration-submit-button:focus,
.recovery-submit-button:hover,
.recovery-submit-button:focus {
background:#b88514;
border-color:#b88514;
color:#fff;
}

.registration-cancel-button,
.registration-footer-resend,
.recovery-cancel-button,
.recovery-resend-button {
background:#eef7fb;
border:1px solid rgba(82,152,188,0.24);
color:#315c70;
}

.registration-cancel-button:hover,
.registration-cancel-button:focus,
.registration-footer-resend:hover,
.registration-footer-resend:focus,
.recovery-cancel-button:hover,
.recovery-cancel-button:focus,
.recovery-resend-button:hover,
.recovery-resend-button:focus {
background:#dbeef6;
box-shadow:none;
color:#163747;
transform:translateY(-1px);
}

.registration-resend-button:disabled,
.recovery-resend-button:disabled {
cursor:not-allowed;
opacity:0.58;
transform:none;
}

@media (max-width: 760px) {
.bbp-registration-modal .modal-dialog,
.bbp-recovery-modal .modal-dialog {
width:calc(100% - 1rem);
margin:0.5rem auto;
}

.bbp-registration-modal form,
.bbp-recovery-modal form {
display:flex;
flex-direction:column;
max-height:calc(100vh - 1rem);
max-height:calc(100dvh - 1rem);
}

.bbp-registration-modal .modal-header,
.bbp-recovery-modal .modal-header {
border-radius:8px 8px 0 0;
display:flex;
flex:0 0 auto;
gap:0.75rem;
grid-row:auto;
padding:0.85rem 3.4rem 0.85rem 0.9rem;
}

.bbp-registration-modal .modal-header:before,
.bbp-recovery-modal .modal-header:before {
flex:0 0 2.45rem;
font-size:1.6rem;
height:2.45rem;
width:2.45rem;
}

.bbp-registration-modal .modal-header > div,
.bbp-recovery-modal .modal-header > div {
padding-right:0;
}

.bbp-registration-modal .modal-title,
.bbp-recovery-modal .modal-title {
font-size:1.45rem;
}

.registration-modal-subtitle,
.recovery-modal-subtitle {
font-size:0.92rem;
line-height:1.35;
}

.bbp-registration-modal .modal-body,
.bbp-recovery-modal .modal-body {
flex:1 1 auto;
min-height:0;
overflow-y:auto;
padding:0.9rem;
}

.registration-bank-grid {
grid-template-columns:1fr;
}

.bbp-registration-modal .modal-footer,
.bbp-recovery-modal .modal-footer {
display:grid;
flex:0 0 auto;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:0.35rem;
justify-content:stretch;
padding:0 0.7rem max(0.75rem,env(safe-area-inset-bottom));
position:relative;
}

.registration-submit-button,
.registration-cancel-button,
.registration-footer-resend,
.recovery-submit-button,
.recovery-cancel-button,
.recovery-resend-button {
box-sizing:border-box;
font-size:0.86rem;
margin-left:0 !important;
margin-right:0 !important;
min-height:36px;
padding:0.42rem 0.28rem;
white-space:normal;
width:100%;
}
}

/* Decorative logo */
body > img[alt="Logo"] {
    max-width: 160px !important;
    right: 1rem !important;
    opacity: 0.9;
}

/* Tablet */
@media (max-width: 900px) {
    .main-login-grid-container {
        grid-template-columns: 1fr;
    }

    .carousel-container {
        order: 2;
    }

    .main-login-grid-cell.login-top {
        order: 1;
    }

    .main-grid-container {
        grid-template-columns: 1fr;
    }
}



@media (max-width: 700px) {
    .main-login-grid-container {
        display: block;
    }

    .carousel-container {
        display: none !important;
    }

    .main-login-grid-cell.login-top {
        width: 100%;
        max-width: 420px;
        margin: 0 auto;
        padding: 1rem;
        box-sizing: border-box;
    }

    body > img[alt="Logo"] {
        display: none !important;
    }

    .styler {
        width: calc(100% - 1rem);
        margin: 1rem auto;
    }

    .login_form {
        display: grid;
        gap: 0.85rem;
    }

    .form-control,
    .btn {
        width: 100%;
        min-height: 48px;
        font-size: 16px;
        box-sizing: border-box;
    }
}

html,
body {
    width: 100%;
    min-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
}

body.main-page {
    position: relative;
    min-height: 100vh;
    height: auto;
}

/* Prevent header text from forcing horizontal overflow */
#top-fixed,
.middle-top-grid,
#mtg-grid-container,
.mtg-grid-item,
.mtg-grid-center,
.h4-header {
    max-width: 100%;
    box-sizing: border-box;
}

.h4-header,
.mtg-grid-center div {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: normal;
}

/* Mobile header stack */
@media (max-width: 700px) {
    #top-fixed {
        position: relative;
        width: 100%;
    }

    #mtg-grid-container {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
        padding: 0.75rem 1rem;
        text-align: center;
    }

    .middle-top-grid {
        width: 100%;
        min-width: 0;
    }

    .mtg-grid-item,
    .mtg-grid-center {
        min-width: 0;
        width: 100%;
    }

    .h4-header {
        font-size: 1rem;
        line-height: 1.25;
    }

    .mtg-grid-center div {
        font-size: 0.9rem;
        line-height: 1.25;
    }

    .styler {
        padding-bottom: 2rem;
    }

    #copyright {
        margin-bottom: 1rem;
    }

    body > div[style*="height: 7em"] {
        height: 2rem !important;
    }
}

@media (max-width: 700px) {
    #top-fixed {
        position: relative;
        height: auto !important;
        min-height: unset !important;
        padding: 0.75rem 0;
        overflow: visible !important;
    }

    .middle-top-grid,
    #mtg-grid-container {
        height: auto !important;
        min-height: unset !important;
        overflow: visible !important;
    }

    #mtg-grid-container {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0.35rem;
        align-items: center;
        padding: 0.5rem 1rem 0.75rem;
    }

    .mtg-grid-center {
        display: block;
        width: 100%;
        min-width: 0;
        color: #fff;
    }

    .h4-header {
        margin: 0 0 0.25rem;
        color: #fff;
        white-space: normal;
        overflow-wrap: anywhere;
        line-height: 1.25;
    }

    .mtg-grid-center div {
        color: #fff;
        white-space: normal;
        overflow-wrap: anywhere;
        line-height: 1.25;
    }
}

@media (max-width: 700px) {
    #mtg-grid-container {
        display: grid;
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
    }

    .mtg-grid-item:first-child {
        width: 100%;
        text-align: center;
    }

    .mtg-grid-center {
        width: 100%;
        max-width: none;
        display: block;
        text-align: center;
    }

    .mtg-grid-center .h4-header,
    .mtg-grid-center div {
        width: 100%;
        max-width: 100%;
        display: block;
        text-align: center;
    }

    .left-top-grid-item {
        display: none;
    }
}

/* Desktop header repair */
@media (min-width: 701px) {
    #top-fixed {
        display: grid;
        grid-template-columns: 1fr minmax(760px, 1024px) 1fr;
        align-items: center;
        height: 5em;
        width: 100%;
        background-color: #5298bc;
        position: fixed;
        top: 0;
        z-index: 1;
    }

    #top-fixed > .top-grid-cell {
        display: block;
    }

    .middle-top-grid {
        display: block;
        width: 100%;
        color: #fff;
    }

    #mtg-grid-container {
        display: grid;
        grid-template-columns: 220px 1fr 220px;
        align-items: center;
        gap: 1rem;
        width: 100%;
        max-width: 1024px;
        margin: 0 auto;
        padding: 0;
        box-sizing: border-box;
    }

    .mtg-grid-item {
        width: auto;
        min-width: 0;
    }

    .mtg-grid-center {
        text-align: center;
        min-width: 0;
    }

    .left-top-grid-item {
        display: flex;
        justify-content: flex-end;
        gap: 0.75rem;
        text-align: right;
        white-space: nowrap;
    }

    .zen-dots-regular {
        display: block;
        text-align: left;
        line-height: 1;
    }

    .h4-header {
        margin: 0;
        text-align: center;
    }
}

/* FINAL mobile header override */
@media (max-width: 700px) {
    #top-fixed {
        display: block !important;
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        padding: 0.75rem 0 !important;
        overflow: visible !important;
        background: #5298bc !important;
    }

    #top-fixed > .top-grid-cell {
        display: none !important;
    }

    .middle-top-grid {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        color: #fff !important;
    }

    #mtg-grid-container {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 1rem !important;
        box-sizing: border-box !important;
        text-align: center !important;
    }

    .mtg-grid-item,
    .mtg-grid-center {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        text-align: center !important;
        box-sizing: border-box !important;
    }

    .left-top-grid-item {
        display: none !important;
    }

    .zen-dots-regular {
        display: block !important;
        font-size: 2rem !important;
        line-height: 1.1 !important;
        margin-bottom: 0.35rem !important;
    }

    .h4-header {
        display: block !important;
        width: 100% !important;
        margin: 0 0 0.25rem !important;
        color: #fff !important;
        font-size: 1rem !important;
        line-height: 1.25 !important;
        white-space: normal !important;
        overflow-wrap: normal !important;
        word-break: normal !important;
    }

    .mtg-grid-center div {
        display: block !important;
        width: 100% !important;
        color: #fff !important;
        font-size: 0.9rem !important;
        line-height: 1.3 !important;
        white-space: normal !important;
        overflow-wrap: normal !important;
        word-break: normal !important;
    }
}

/* Remove carousel shadows */
.login-carousel-item,
.owl-carousel .item {
    box-shadow: none !important;
}

/* Desktop: keep page content below fixed header */
@media (min-width: 701px) {
    body.main-page {
        padding-top: 5em;
    }

    .styler {
        margin-top: 0;
    }
}

/* Mobile header is relative, so no offset needed */
@media (max-width: 700px) {
    body.main-page {
        padding-top: 0;
    }
}
/* Index page mobile header links */
@media (max-width: 700px) {
    #top-fixed .left-top-grid-item {
        display: flex !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-top: 0.45rem !important;
        padding-top: 0.45rem !important;
        border-top: 1px solid rgba(255,255,255,0.35);
        justify-content: center !important;
        align-items: center !important;
        flex-wrap: wrap !important;
        gap: 0.35rem 0.55rem !important;
        text-align: center !important;
        white-space: normal !important;
    }

    #top-fixed .left-top-grid-item a.toplink {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        min-height: 32px;
        padding: 0.25rem 0.5rem;
        border-radius: 999px;
        background: rgba(255,255,255,0.14);
        color: #fff !important;
        font-size: 0.78rem !important;
        line-height: 1.1;
        text-decoration: none;
    }

    #top-fixed .left-top-grid-item a.toplink:hover {
        background: rgba(255,255,255,0.24);
        color: gold !important;
    }

    /* Hide the text separator pipes on mobile by making them visually collapse */
    #top-fixed .left-top-grid-item {
        font-size: 0;
    }

    #top-fixed .left-top-grid-item a.toplink {
        font-size: 0.78rem !important;
    }
}

@media (max-width: 700px) {
    .body {
        top: 0 !important;
        margin-top: 0 !important;
        padding-top: 0.5rem;
    }

    #accordion {
        margin-top: 0.5rem !important;
    }
}

/* Mobile-friendly search/filter controls */
@media (max-width: 700px) {
    #search_controls {
        display: block;
        width: 100%;
        margin: 0;
    }

    #controls {
        width: 100%;
        max-width: 100%;
        background: transparent;
    }

    #controls .control-bg {
        display: block;
        width: 100%;
        box-sizing: border-box;
        padding: 0.85rem;
        border-radius: 16px;
        background: #eef7fb;
        border: 1px solid rgba(82, 152, 188, 0.35);
        color: #163747;
        text-align: left;
    }

    #controls .selectdiv {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0.65rem;
        width: 100%;
        margin-bottom: 0.75rem;
    }

    #controls select,
    #keyword {
        display: block;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 46px;
        margin: 0 !important;
        box-sizing: border-box;
        border-radius: 12px;
        border: 1px solid rgba(82, 152, 188, 0.45);
        background-color: #fff;
        color: #163747;
        font-size: 16px;
        padding: 0.75rem 2.25rem 0.75rem 0.85rem;
    }

    #keyword {
        padding-right: 0.85rem;
        margin-bottom: 0.65rem !important;
    }

    #go_button {
        display: block;
        width: 100%;
        height: auto;
        min-height: 46px;
        margin: 0 0 0.75rem !important;
        border-radius: 12px;
        border: 0;
        background: #5298bc;
        color: #fff;
        font-weight: 800;
        font-size: 1rem;
    }

    #qoptions {
        margin-top: 0.75rem;
        padding-top: 0.75rem;
        border-top: 1px solid rgba(82, 152, 188, 0.25);
        color: #163747;
        text-align: left;
    }

    #qoptions legend {
        display: block;
        margin-bottom: 0.5rem;
        font-size: 0.95rem;
        font-weight: 800;
        color: #163747;
        border: 0;
    }

    #qoptions fieldset {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0.45rem;
        margin: 0;
        padding: 0;
        border: 0;
    }

    #qoptions label {
        display: inline-flex;
        align-items: center;
        min-height: 38px;
        padding: 0.35rem 0.55rem;
        border-radius: 999px;
        background: #fff;
        border: 1px solid rgba(82, 152, 188, 0.25);
        color: #163747;
        font-size: 0.92rem;
        font-weight: 700;
    }

    #qoptions .sorter_button {
        margin: 0 0.35rem 0 0.1rem;
        transform: scale(1.1);
    }
}

@media (max-width: 700px) {
    #qoptions fieldset {
        display: flex !important;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    #qoptions label,
    #qoptions .ui-checkboxradio-label {
        display: inline-flex !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        align-items: center;
        justify-content: center;
        min-height: 36px;
        padding: 0.35rem 0.65rem !important;
        margin: 0 !important;
        border-radius: 999px;
        white-space: nowrap;
    }

    #qoptions input[type="radio"],
    #qoptions .sorter_button {
        position: static !important;
        width: auto !important;
        height: auto !important;
        margin: 0 0.25rem 0 0 !important;
        vertical-align: middle;
    }

    #qoptions .ui-checkboxradio-icon {
        margin-right: 0.35rem !important;
    }
}

/*************************************************************************************
 * Question Filter Sort Controls
 ************************************************************************************/
#qoptions.question-sort-panel {
width:100%;
margin:0.9rem 0 0;
padding:0;
border-top:1px solid rgba(82,152,188,0.22);
color:#fff;
text-align:left;
}

#qoptions .question-sort-card {
display:flex;
flex-wrap:nowrap;
align-items:center;
justify-content:center;
gap:0.75rem;
width:100%;
box-sizing:border-box;
padding:0.72rem 0.85rem;
border:1px solid rgba(47,111,145,0.45);
border-radius:12px;
background:linear-gradient(135deg,#4f93b7,#2f6f91);
box-shadow:inset 0 1px 0 rgba(255,255,255,0.22),0 8px 18px rgba(22,55,71,0.16);
}

#qoptions .question-sort-summary {
display:inline-flex;
align-items:center;
justify-content:center;
gap:0.45rem;
min-height:38px;
width:fit-content;
max-width:100%;
margin:0;
padding:0.35rem 0.2rem;
border:0;
border-radius:999px;
background:transparent;
box-shadow:none;
color:#fff;
white-space:nowrap;
}

#qoptions .question-sort-count {
display:inline;
width:auto;
margin:0;
padding:0;
border:0;
color:#fff;
font-size:1.08rem;
font-weight:900;
line-height:1.1;
text-shadow:0 1px 2px rgba(0,0,0,0.16);
white-space:nowrap;
}

#qoptions .question-sort-summary-icon,
#qoptions .question-sort-icon {
font-family:'Material Symbols Rounded';
font-variation-settings:'FILL' 0,'wght' 500,'GRAD' 0,'opsz' 24;
line-height:1;
}

#qoptions .question-sort-summary-icon {
display:inline-flex;
align-items:center;
justify-content:center;
width:1.45rem;
height:1.45rem;
border-radius:8px;
background:#eef7fb;
color:#2f6f91;
font-size:1rem;
}

#qoptions .question-sort-options {
display:flex;
flex-wrap:nowrap;
align-items:center;
justify-content:center;
gap:0.5rem;
width:auto;
min-width:0;
margin:0;
padding:0;
border:0;
}

#qoptions .question-sort-input,
#qoptions input[type="radio"].question-sort-input,
#qoptions .sorter_button.question-sort-input {
position:absolute !important;
width:1px !important;
height:1px !important;
margin:0 !important;
padding:0 !important;
border:0 !important;
opacity:0;
overflow:hidden;
clip:rect(0 0 0 0);
}

#qoptions .question-sort-button,
#qoptions .ui-checkboxradio-label.question-sort-button {
position:relative;
display:inline-flex !important;
align-items:center;
justify-content:center;
gap:0.35rem;
min-height:38px;
min-width:0;
width:auto !important;
max-width:100%;
margin:0 !important;
padding:0.5rem 0.72rem !important;
border:1px solid rgba(255,255,255,0.48) !important;
border-radius:8px !important;
background:rgba(255,255,255,0.96) !important;
box-shadow:0 4px 10px rgba(22,55,71,0.14) !important;
color:#163747 !important;
font-family:Arial,Helvetica,sans-serif !important;
font-size:0.92rem !important;
font-weight:900 !important;
letter-spacing:0;
line-height:1.1;
text-align:center;
text-decoration:none;
white-space:nowrap;
cursor:pointer;
transition:background 0.18s ease,border-color 0.18s ease,box-shadow 0.18s ease,transform 0.18s ease,color 0.18s ease;
}

#qoptions .question-sort-button:hover,
#qoptions .question-sort-button:focus,
#qoptions .ui-checkboxradio-label.question-sort-button:hover,
#qoptions .ui-checkboxradio-label.question-sort-button:focus {
background:#eef7fb !important;
border-color:#fff !important;
box-shadow:0 7px 16px rgba(22,55,71,0.16) !important;
color:#163747 !important;
transform:translateY(-1px);
}

#qoptions .question-sort-input:checked + .question-sort-button,
#qoptions .question-sort-button.ui-checkboxradio-checked,
#qoptions .ui-checkboxradio-label.question-sort-button.ui-checkboxradio-checked {
background:#163747 !important;
border-color:rgba(255,255,255,0.62) !important;
box-shadow:inset 0 1px 0 rgba(255,255,255,0.18),0 7px 16px rgba(22,55,71,0.24) !important;
color:#fff !important;
}

#qoptions .question-sort-input:focus + .question-sort-button {
outline:3px solid rgba(82,152,188,0.26);
outline-offset:2px;
}

#qoptions .question-sort-button:active {
transform:translateY(1px);
}

#qoptions .question-sort-icon {
display:inline-flex;
align-items:center;
justify-content:center;
width:1.35rem;
height:1.35rem;
border-radius:999px;
background:rgba(82,152,188,0.12);
font-size:0.98rem;
}

#qoptions .question-sort-input:checked + .question-sort-button .question-sort-icon,
#qoptions .question-sort-button.ui-checkboxradio-checked .question-sort-icon {
background:rgba(255,255,255,0.24);
}

#qoptions .sort-feedback {
position:absolute;
left:50%;
bottom:calc(100% + 8px);
z-index:10;
padding:0.35rem 0.55rem;
border-radius:999px;
background:#163747;
box-shadow:0 6px 16px rgba(22,55,71,0.22);
color:#fff;
font-size:12px;
font-weight:900;
line-height:1;
opacity:0;
pointer-events:none;
transform:translate(-50%,6px);
transition:opacity 0.18s ease,transform 0.18s ease;
white-space:nowrap;
}

#qoptions .question-sort-button.is-sorted .sort-feedback {
opacity:1;
transform:translate(-50%,0);
}

#qoptions .ui-checkboxradio-icon,
#qoptions .ui-checkboxradio-icon-space {
display:none !important;
}

@media (max-width: 700px) {
#qoptions.question-sort-panel {
text-align:center;
}

#qoptions .question-sort-card {
flex-wrap:wrap;
gap:0.55rem;
padding:0.75rem;
}

#qoptions .question-sort-summary {
width:100%;
box-sizing:border-box;
white-space:normal;
}

#qoptions .question-sort-count {
white-space:normal;
}

#qoptions .question-sort-options {
flex-wrap:wrap;
gap:0.45rem;
width:100%;
}

#qoptions .question-sort-button,
#qoptions .ui-checkboxradio-label.question-sort-button {
flex:1 1 calc(50% - 0.45rem);
white-space:normal;
}
}

@media (max-width: 700px) {
    #question_controls {
        margin-top: 0.75rem !important;
        padding: 0.5rem !important;
        box-sizing: border-box;
        overflow-x: hidden;
    }

    #control-grid-container {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 0.5rem;
        width: 100%;
        box-sizing: border-box;
    }

    .control-grid-item {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        text-align: center;
    }

    /* Prevent overflow from long inline content */
    #question_controls * {
        max-width: 100%;
        box-sizing: border-box;
        overflow-wrap: break-word;
    }

    /* Timer + right-aligned content fix */
    .right-control-grid-item {
        text-align: center !important;
    }
}

@media (max-width: 700px) {
    #question_controls {
        margin-top: 0.75rem !important;
        padding: 0.85rem !important;

        /* Match search_controls card style */
        background: #eef7fb;
        border: 1px solid rgba(82, 152, 188, 0.35);
        border-radius: 16px;
        color: #163747;

        box-sizing: border-box;
        overflow-x: hidden;
    }

    #control-grid-container {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 0.6rem;
        width: 100%;
    }

    .control-grid-item {
        width: 100%;
        max-width: 100%;
        padding: 0.5rem;
        border-radius: 12px;
        background: #ffffff;
        border: 1px solid rgba(82, 152, 188, 0.2);
        box-sizing: border-box;
        text-align: center;
    }

    /* Score / title line */
    #langscore,
    #qtype_title {
        display: inline-block;
        font-weight: 800;
    }

    /* Timer styling */
    #timer {
        font-weight: 700;
        font-size: 0.95rem;
    }

    /* Calculator link cleanup */
    #open-calculator {
        display: inline-block;
        padding: 0.35rem 0.65rem;
        border-radius: 999px;
        background: rgba(82, 152, 188, 0.15);
        color: #163747;
        text-decoration: none;
        font-weight: 700;
    }

    /* Make radios cleaner */
    #question_controls input[type="radio"] {
        transform: scale(1.1);
        margin: 0 0.25rem;
    }

    /* Ensure no overflow */
    #question_controls * {
        max-width: 100%;
        box-sizing: border-box;
        overflow-wrap: break-word;
    }
}

/* Filter toggle button */
.filter-toggle {
    display: block;
    width: 100%;
    margin: 0 0 0.5rem;
    padding: 0.65rem;
    border-radius: 12px;
    border: 1px solid rgba(82, 152, 188, 0.4);
    background: #5298bc;
    color: #fff;
    font-weight: 800;
    text-align: center;
}

/* Hidden state */
.control-bg.collapsed {
    display: none;
}

/* Optional: smooth feel */
.control-bg {
    transition: all 0.2s ease;
}

@media (max-width: 700px) {
    .filter-toggle {
        position: sticky;
        top: 0.5rem;
        z-index: 20;

        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;

        width: 100%;
        margin: 0 0 0.6rem;
        padding: 0.7rem 0.9rem;

        border-radius: 999px;
        border: 1px solid rgba(82, 152, 188, 0.45);
        background: #5298bc;
        color: #fff;

        font-weight: 800;
        box-shadow: 0 6px 18px rgba(22, 55, 71, 0.18);
    }

    .filter-chevron {
        display: inline-block;
        font-size: 1.1rem;
        line-height: 1;
        transition: transform 0.22s ease;
    }

    .filter-toggle.is-collapsed .filter-chevron {
        transform: rotate(-90deg);
    }

    #controls > .control-bg {
        overflow: hidden;
    }
}

@media (max-width: 700px) {
    .filter-toggle,
    .filter-toggle:hover,
    .filter-toggle:focus,
    .filter-toggle:active {
        background: #5298bc !important;
        color: #fff !important;
        border: 1px solid rgba(82, 152, 188, 0.45) !important;
        text-decoration: none !important;
    }

    .filter-toggle .filter-toggle-label,
    .filter-toggle .filter-chevron {
        color: #fff !important;
    }

    .filter-toggle:hover,
    .filter-toggle:focus {
        background: #4689aa !important;
    }
}

/* Score pill */
#langscore {
    display: none; /* hide the label text, we'll merge it visually */
}

#calculated_score {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;

    padding: 0.35rem 0.7rem;
    border-radius: 999px;

    background: linear-gradient(135deg, #5298bc, #2f6f91);
    color: #fff;

    font-weight: 800;
    font-size: 0.9rem;

    box-shadow: 0 4px 10px rgba(22, 55, 71, 0.25);
}

/* Optional label prefix */
#calculated_score::before {
    content: "Score:";
    font-weight: 600;
    opacity: 0.85;
}

/* Controls row alignment */
#control-grid-container {
    align-items: center;
}

/* Calculator + Timer container row fix */
#control-grid-container .control-grid-item:nth-child(3),
#control-grid-container .control-grid-item:nth-child(4) {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Calculator pill */
#open-calculator {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0.35rem 0.7rem;
    border-radius: 999px;

    background: rgba(82, 152, 188, 0.15);
    color: #163747;

    font-weight: 700;
    text-decoration: none;

    border: 1px solid rgba(82, 152, 188, 0.3);
}

/* Timer pill */
#timer {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0.35rem 0.7rem;
    border-radius: 999px;

    background: rgba(82, 152, 188, 0.15);
    color: #163747;

    font-weight: 700;
    border: 1px solid rgba(82, 152, 188, 0.3);
}

/* Ensure both sit nicely next to each other on mobile */
@media (max-width: 700px) {
    #control-grid-container {
        grid-template-columns: 1fr !important;
    }

    #control-grid-container .control-grid-item:nth-child(3),
    #control-grid-container .control-grid-item:nth-child(4) {
        justify-content: center;
        gap: 0.5rem;
    }

    #timer,
    #open-calculator {
        min-height: 36px;
        font-size: 0.9rem;
    }
}

/* Mobile HUD-style question controls */
@media (max-width: 700px) {
    #question_controls {
        margin-top: 0.75rem !important;
        padding: 0.65rem !important;
        border-radius: 18px;
        background: linear-gradient(135deg, #eef7fb, #dceff7);
        border: 1px solid rgba(82, 152, 188, 0.45);
        box-shadow: 0 8px 22px rgba(22, 55, 71, 0.14);
        color: #163747;
        overflow: hidden;
    }

    #control-grid-container {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 0.5rem;
    }

    .control-grid-item {
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    /* Score row */
    #control-grid-container .control-grid-item:first-child {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 0.5rem;
        flex-wrap: wrap;
    }

    #langscore {
        display: none !important;
    }

    #calculated_score {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 34px;
        padding: 0.35rem 0.8rem;
        border-radius: 999px;
        background: linear-gradient(135deg, #5298bc, #2f6f91);
        color: #fff;
        font-weight: 900;
        font-size: 0.95rem;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.35),
                    0 5px 12px rgba(22,55,71,0.22);
    }

    #calculated_score::before {
        content: "Current Score: ";
        font-weight: 700;
        opacity: 0.85;
        margin-right: 0.25rem;
    }

    #reset_score {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 32px;
        padding: 0.3rem 0.65rem;
        border-radius: 999px;
        background: rgba(255,255,255,0.85);
        border: 1px solid rgba(82,152,188,0.28);
        color: #163747;
        font-weight: 700;
        text-decoration: none;
        font-size: 0.85rem;
    }

    #qtype_title {
        display: none !important;
    }

    /* Question visibility row */
    #control-grid-container .control-grid-item:nth-child(2) {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        gap: 0.4rem;
        padding: 0.45rem !important;
        border-radius: 14px !important;
        background: rgba(255,255,255,0.65) !important;
        border: 1px solid rgba(82,152,188,0.22) !important;
        font-size: 0.82rem;
        font-weight: 700;
    }

    #control-grid-container .control-grid-item:nth-child(2) input[type="radio"] {
        transform: scale(1.05);
        margin-right: 0.35rem;
    }

    /* Calculator + timer one-line HUD row */
    #control-grid-container .control-grid-item:nth-child(3),
    #control-grid-container .control-grid-item:nth-child(4) {
        display: contents !important;
    }

    #control-grid-container {
        grid-template-areas:
            "score"
            "filters"
            "actions";
    }

    #control-grid-container .control-grid-item:first-child {
        grid-area: score;
    }

    #control-grid-container .control-grid-item:nth-child(2) {
        grid-area: filters;
    }

    #control-grid-container::after {
        content: "";
        grid-area: actions;
        display: none;
    }

    #open-calculator,
    #timer {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        min-height: 38px;
        padding: 0.4rem 0.75rem;
        border-radius: 999px;
        background: rgba(22, 55, 71, 0.08);
        border: 1px solid rgba(82,152,188,0.35);
        color: #163747 !important;
        font-weight: 800;
        font-size: 0.9rem;
        text-decoration: none !important;
        white-space: nowrap;
    }

    #open-calculator::before {
        content: "🧮";
        margin-right: 0.35rem;
    }

   

    .right-control-grid-item {
        text-align: center !important;
    }

    /* Put Calculator and Timer together */
    #control-grid-container .control-grid-item:nth-child(3) .mtg-grid-item,
    #control-grid-container .control-grid-item:nth-child(4) {
        display: inline-flex !important;
        justify-content: center;
        align-items: center;
        width: auto !important;
    }

    #control-grid-container {
        justify-items: center;
    }
}

@media (max-width: 700px) {
    #timer {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        min-height: 38px;
        padding: 0.4rem 0.75rem;
        border-radius: 999px;
        background: rgba(22, 55, 71, 0.08);
        border: 1px solid rgba(82,152,188,0.35);
        color: #163747 !important;
        font-weight: 800;
        font-size: 0.9rem;
        text-decoration: none !important;
        white-space: nowrap;
        user-select: none;
        -webkit-user-select: none;
    }

    #timer::before {
        content: none !important;
    }

    #open-calculator::before {
        content: "🧮";
        margin-right: 0.35rem;
    }
}

@media (max-width: 700px) {
    #timer.timer-pill {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        min-height: 38px;
        padding: 0.4rem 0.85rem;
        border-radius: 999px;
        background: rgba(22, 55, 71, 0.08) !important;
        border: 1px solid rgba(82,152,188,0.35) !important;
        color: #163747 !important;
        font-weight: 800;
        font-size: 0.9rem;
        white-space: nowrap;
    }

    #timer.timer-pill:hover,
    #timer.timer-pill:focus,
    #timer.timer-pill:active {
        background: rgba(82, 152, 188, 0.18) !important;
        color: #163747 !important;
        border-color: rgba(82,152,188,0.45) !important;
    }

    #timer.is-hidden .timer-value {
        display: none;
    }

    #timer.is-visible .timer-label {
        display: none;
    }
}

@media (max-width: 700px) {
    .hud-action-row {
        display: grid !important;
        grid-template-columns: repeat(2, max-content);
        justify-content: center;
        align-items: center;
        gap: 0.55rem;
        padding: 0 !important;
        background: transparent !important;
        border: 0 !important;
    }

    .hud-pill,
    #open-calculator.hud-pill,
    #timer.hud-pill {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;

        /* Both pills match the longest likely text width */
        width: 9.75rem;
        min-height: 38px;

        padding: 0.4rem 0.75rem;
        border-radius: 999px;

        background: rgba(22, 55, 71, 0.08) !important;
        border: 1px solid rgba(82,152,188,0.35) !important;
        color: #163747 !important;

        font-weight: 800;
        font-size: 0.9rem;
        line-height: 1.1;
        text-align: center;
        text-decoration: none !important;
        white-space: nowrap;
        box-sizing: border-box;
    }

    .hud-pill:hover,
    .hud-pill:focus,
    #open-calculator.hud-pill:hover,
    #open-calculator.hud-pill:focus,
    #timer.hud-pill:hover,
    #timer.hud-pill:focus {
        background: rgba(82, 152, 188, 0.18) !important;
        color: #163747 !important;
        border-color: rgba(82,152,188,0.45) !important;
    }

    #timer.is-hidden .timer-value {
        display: none;
    }

    #timer.is-visible .timer-label {
        display: none;
    }

    #calculator-popup {
        grid-column: 1 / -1;
        justify-self: center;
    }
}

/* Shared HUD action row: desktop + mobile */
.hud-action-row {
    display: grid !important;
    grid-template-columns: repeat(2, max-content);
    justify-content: center;
    align-items: center;
    gap: 0.55rem;
}

.hud-pill,
#open-calculator.hud-pill,
#timer.hud-pill {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 9.75rem;
    min-height: 38px;
    padding: 0.4rem 0.75rem;
    border-radius: 999px;
    background: rgba(22, 55, 71, 0.08) !important;
    border: 1px solid rgba(82,152,188,0.35) !important;
    color: #163747 !important;
    font-weight: 800;
    font-size: 0.9rem;
    text-align: center;
    text-decoration: none !important;
    white-space: nowrap;
    box-sizing: border-box;
}

#timer.is-hidden .timer-value {
    display: none !important;
}

#timer.is-visible .timer-label {
    display: none !important;
}

/* Extra horizontal padding for timer pill */
#timer.hud-pill {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
}

@media (min-width: 701px) {
    #open-calculator.hud-pill,
    #timer.hud-pill {
        width: 11.5rem !important;
        padding-left: 1.25rem !important;
        padding-right: 1.25rem !important;
    }
}

/* Force Calculator + Timer to stay on the same row on mobile */
@media (max-width: 700px) {
    .hud-action-row {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 0.5rem !important;
        width: 100% !important;
    }

    #open-calculator.hud-pill,
    #timer.hud-pill {
        flex: 0 1 9.25rem !important;
        width: 9.25rem !important;
        min-width: 0 !important;
        max-width: calc((100vw - 3rem) / 2) !important;
        padding-left: 0.65rem !important;
        padding-right: 0.65rem !important;
        font-size: 0.85rem !important;
    }

    #calculator-popup {
        position: absolute;
    }
}

/* Premium Score Pill (all devices) */
#calculated_score {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;

    padding: 0.45rem 0.95rem;
    border-radius: 999px;

    /* Higher contrast gradient */
    background: linear-gradient(135deg, #3a7fa3, #1f4e68);
    color: #ffffff;

    font-weight: 900;
    font-size: 1rem;

    /* Depth + glow to stand out */
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.25),
        0 6px 16px rgba(22, 55, 71, 0.35);

    letter-spacing: 0.02em;
}

/* Label prefix */
#calculated_score::before {
    content: "Score:";
    font-weight: 700;
    opacity: 0.9;
}

@media (min-width: 701px) {
    #calculated_score {
        font-size: 1.15rem;
        padding: 0.55rem 1.2rem;
    }
}

#calculated_score {
    position: relative;
}

#calculated_score::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 999px;
    box-shadow: 0 0 12px rgba(82, 152, 188, 0.35);
    opacity: 0.6;
    pointer-events: none;
}

/* Reset Score pill (desktop + mobile) */
.reset-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0.35rem 0.7rem;
    border-radius: 999px;

    background: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(82, 152, 188, 0.35);
    color: #163747 !important;

    font-weight: 700;
    font-size: 0.85rem;
    text-decoration: none !important;

    transition: all 0.15s ease;
}

/* Hover = clearly interactive */
.reset-pill:hover,
.reset-pill:focus {
    background: rgba(82, 152, 188, 0.15);
    border-color: rgba(82, 152, 188, 0.5);
    color: #0f2d3a !important;
}

/* Subtle press feedback */
.reset-pill:active {
    transform: translateY(1px);
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.15);
}

/* Outer pill container (matches timer/calculator tone) */
.question-filter-pill {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.4rem;

    padding: 0.8rem 0 0 0;
    border-radius: 999px;

    background: rgba(22, 55, 71, 0.08);
    border: 1px solid rgba(82, 152, 188, 0.35);
}

/* Individual options */
.filter-option {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0.3rem 0.6rem;
    border-radius: 999px;

    background: transparent;
    color: #163747;

    font-weight: 700;
    font-size: 0.82rem;

    cursor: pointer;
    user-select: none;

    transition: all 0.15s ease;
}

/* Hide default radio */
.filter-option input {
    display: none;
}

/* Hover */
.filter-option:hover {
    background: rgba(82, 152, 188, 0.15);
}

/* Selected state */
.filter-option input:checked + span {
    background: #5298bc;
    color: #fff;
    padding: 0.3rem 0.6rem;
    border-radius: 999px;

    box-shadow: 0 2px 6px rgba(22, 55, 71, 0.25);
}

.question-filter-wrapper {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.4rem !important;
}

.question-filter-wrapper .filter-title {
    display: block !important;
    
    text-align: center !important;
    font-weight: 900 !important;
    color: #163747 !important;
    font-size: 0.9rem !important;
    line-height: 1.1 !important;
}

.question-filter-wrapper .question-filter-pill {
    display: inline-flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 0.4rem !important;
    padding: 0.4rem !important;
    border-radius: 999px !important;
    background: rgba(22, 55, 71, 0.08) !important;
    border: 1px solid rgba(82, 152, 188, 0.35) !important;
}

.question-filter-wrapper .filter-option {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    cursor: pointer;
}

.question-filter-wrapper .filter-option input {
    display: none !important;
}

.question-filter-wrapper .filter-option span {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0.3rem 0.65rem !important;
    border-radius: 999px !important;
    color: #163747 !important;
    font-weight: 800 !important;
    font-size: 0.82rem !important;
}

.question-filter-wrapper .filter-option input:checked + span {
    background: linear-gradient(135deg, #5298bc, #2f6f91) !important;
    color: #fff !important;
    box-shadow: 0 2px 6px rgba(22, 55, 71, 0.25) !important;
}

/*************************************************************************************
 * Question Control Dashboard
 ************************************************************************************/
#question_controls {
margin:0.95rem 0 0.9rem !important;
padding:0.7rem 0.8rem !important;
border:1px solid rgba(82,152,188,0.42) !important;
border-radius:12px;
background:linear-gradient(135deg,#f7fbfd,#e7f3f8);
box-shadow:0 8px 20px rgba(22,55,71,0.1);
color:#163747;
font-size:1rem !important;
}

#control-grid-container {
display:grid !important;
grid-template-columns:minmax(170px,0.95fr) minmax(260px,1.25fr) minmax(250px,auto) minmax(210px,0.95fr) !important;
grid-template-rows:1fr !important;
align-items:center !important;
gap:0.55rem !important;
width:100%;
}

#control-grid-container .control-grid-item {
min-width:0;
padding:0 !important;
background:transparent !important;
}

.question-score-card,
.question-status-card,
.question-filter-pill {
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
gap:0.45rem !important;
min-height:44px;
box-sizing:border-box;
padding:0.48rem 0.72rem !important;
border:1px solid rgba(82,152,188,0.32) !important;
border-radius:8px !important;
background:rgba(255,255,255,0.86) !important;
box-shadow:0 4px 12px rgba(22,55,71,0.08) !important;
}

.question-score-card,
.question-status-card {
width:100%;
justify-content:center !important;
}

.control-card-icon,
.control-action-icon {
font-family:'Material Symbols Rounded';
font-variation-settings:'FILL' 0,'wght' 500,'GRAD' 0,'opsz' 24;
line-height:1;
}

.control-card-icon {
display:inline-flex;
align-items:center;
justify-content:center;
flex:0 0 auto;
width:1.5rem;
height:1.5rem;
border-radius:999px;
background:#eef7fb;
color:#2f6f91;
font-size:1.05rem;
}

.control-action-icon {
display:inline-flex;
align-items:center;
justify-content:center;
flex:0 0 auto;
width:1.35rem;
height:1.35rem;
border-radius:999px;
background:rgba(255,255,255,0.26);
font-size:1rem;
line-height:1;
vertical-align:middle;
}

#langscore {
display:none !important;
}

#calculated_score {
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
gap:0.25rem !important;
min-height:0 !important;
padding:0 !important;
border-radius:0 !important;
background:transparent !important;
box-shadow:none !important;
color:#163747 !important;
font-size:1.08rem !important;
font-weight:900 !important;
letter-spacing:0 !important;
}

#calculated_score::before {
content:"Score:" !important;
margin-right:0.1rem;
color:#2f6f91;
font-weight:900;
opacity:1;
}

#calculated_score::after {
content:none !important;
}

#reset_score.reset-pill {
min-height:28px;
margin-left:0.2rem;
padding:0.28rem 0.62rem !important;
border:1px solid rgba(82,152,188,0.34) !important;
border-radius:8px !important;
background:#fff !important;
box-shadow:none !important;
color:#163747 !important;
font-size:0.82rem !important;
font-weight:900 !important;
line-height:1;
}

#qtype_title {
display:none !important;
}

.question-filter-wrapper {
display:flex !important;
align-items:center !important;
justify-content:center !important;
min-width:0;
}

.question-filter-wrapper .question-filter-pill {
width:100%;
padding:0.36rem 0.45rem !important;
}

.question-filter-wrapper .filter-title {
display:inline-flex !important;
align-items:center !important;
gap:0.35rem;
margin:0 0.2rem 0 0 !important;
color:#163747 !important;
font-size:0.88rem !important;
font-weight:900 !important;
line-height:1 !important;
white-space:nowrap;
}

.question-filter-wrapper .filter-option span {
min-height:30px;
padding:0.35rem 0.65rem !important;
border:1px solid transparent;
font-size:0.84rem !important;
transition:background 0.16s ease,border-color 0.16s ease,box-shadow 0.16s ease,color 0.16s ease;
}

.question-filter-wrapper .filter-option:hover span,
.question-filter-wrapper .filter-option:focus-within span {
background:#eef7fb !important;
border-color:rgba(82,152,188,0.3);
}

.question-filter-wrapper .filter-option input:checked + span {
background:linear-gradient(135deg,#5298bc,#2f6f91) !important;
border-color:rgba(47,111,145,0.28);
color:#fff !important;
box-shadow:0 3px 9px rgba(22,55,71,0.18) !important;
}

.hud-action-row {
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
gap:0.5rem !important;
min-width:0;
}

.hud-pill,
#open-calculator.hud-pill,
#timer.hud-pill {
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
gap:0.5rem !important;
width:auto !important;
min-width:8.6rem !important;
min-height:42px !important;
padding:0.55rem 0.8rem !important;
border:1px solid rgba(47,111,145,0.32) !important;
border-radius:999px !important;
background:linear-gradient(135deg,#5298bc,#2f6f91) !important;
box-shadow:inset 0 1px 0 rgba(255,255,255,0.28),0 6px 14px rgba(22,55,71,0.16) !important;
color:#fff !important;
font-size:0.94rem !important;
font-weight:900 !important;
line-height:1.1;
text-decoration:none !important;
white-space:nowrap;
transition:background 0.18s ease,border-color 0.18s ease,box-shadow 0.18s ease,transform 0.18s ease;
}

#open-calculator.hud-pill::before,
#timer.hud-pill::before {
content:none !important;
display:none !important;
}

#open-calculator.hud-pill > span,
#timer.hud-pill > span {
display:inline-flex;
align-items:center;
line-height:1;
}

.hud-pill:hover,
.hud-pill:focus,
#open-calculator.hud-pill:hover,
#open-calculator.hud-pill:focus,
#timer.hud-pill:hover,
#timer.hud-pill:focus {
background:linear-gradient(135deg,#5aa8cf,#235b80) !important;
box-shadow:inset 0 1px 0 rgba(255,255,255,0.3),0 8px 18px rgba(22,55,71,0.2) !important;
color:#fff !important;
transform:translateY(-1px);
}

#timer.is-hidden .timer-value {
display:none !important;
}

#timer.is-visible .timer-label {
display:none !important;
}

.question-status-card strong {
color:#2f6f91;
font-weight:900;
font-size:1.08rem;
white-space:nowrap;
}

.subscription-status-pill {
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
min-height:28px;
padding:0.3rem 0.7rem !important;
border-radius:999px !important;
box-shadow:none !important;
font-size:0.9rem !important;
font-weight:900 !important;
line-height:1;
white-space:nowrap;
}

.subscription-status-pill a {
color:inherit !important;
font-weight:900 !important;
text-decoration:none !important;
}

@media (max-width: 980px) {
#control-grid-container {
grid-template-columns:1fr 1fr !important;
}

.hud-action-row {
justify-content:flex-start !important;
}
}

@media (max-width: 700px) {
#question_controls {
padding:0.65rem !important;
}

#control-grid-container {
grid-template-columns:1fr !important;
gap:0.55rem !important;
}

.question-score-card,
.question-status-card,
.question-filter-pill {
justify-content:center !important;
}

.hud-action-row {
display:grid !important;
grid-template-columns:1fr 1fr;
width:100%;
}

.hud-pill,
#open-calculator.hud-pill,
#timer.hud-pill {
min-width:0 !important;
width:100% !important;
}
}

@media (max-width: 700px) {

    /* Container for header links */
    #top-fixed .left-top-grid-item {
        display: flex !important;
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.4rem;
        width: 100%;
    }

    /* All header link pills */
    #top-fixed .left-top-grid-item a.toplink {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;

        /* Equal width for all pills */
        width: 9.75rem; /* adjust if needed */
        min-height: 40px;

        padding: 0.4rem 0.75rem;
        border-radius: 999px;

        /* Gold style (match New Question button) */
        background: linear-gradient(135deg, #f5c542, #d4a017);
        border: 1px solid rgba(0,0,0,0.15);

        color: #1a1a1a !important;
        font-weight: 800;
        font-size: 0.9rem;
        text-align: center;
        text-decoration: none !important;

        box-shadow:
            inset 0 1px 0 rgba(255,255,255,0.4),
            0 4px 10px rgba(0,0,0,0.2);
    }

    /* Hover / tap feedback */
    #top-fixed .left-top-grid-item a.toplink:active,
    #top-fixed .left-top-grid-item a.toplink:hover {
        background: linear-gradient(135deg, #ffd95c, #e0ad1f);
        transform: translateY(1px);
    }
}

/*************************************************************************
 * Subscription Reminder Modal
 * **********************************************************************/
 #subscription-reminder-backdrop,
#subscription-reminder-modal {
    display: none;
}

#subscription-reminder-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.55);
    z-index: 4000;
}

#subscription-reminder-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(92vw, 520px);
    background: #fff;
    color: #222;
    border-radius: 18px;
    box-shadow: 0 24px 70px rgba(0,0,0,.38);
    z-index: 4001;
    overflow: hidden;
}

.subscription-reminder-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 18px;
    background: linear-gradient(135deg, #235b80, #5298bc);
    color: #fff;
}

.subscription-reminder-header h3 {
    margin: 0;
    font-size: 2rem;
}

#subscription-reminder-close {
    border: none;
    background: transparent;
    color: #fff;
    font-size: 28px;
    cursor: pointer;
}

.subscription-reminder-body {
    padding: 22px;
    text-align: center;
    line-height: 1.45;
}

.subscription-reminder-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 18px;
}

.subscription-reminder-button {
    border: none;
    border-radius: 999px;
    padding: 10px 16px;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
    min-width: 180px;
    text-align: center;
}

.subscription-reminder-button.primary {
    background: linear-gradient(135deg, #f6c343, #d4a017);
    color: #1f2933 !important;
}

.subscription-reminder-button.secondary {
    background: linear-gradient(135deg, #6f7f8f, #9aa8b5);
    color: #fff;
}

#subscription-reminder-backdrop,
#subscription-reminder-modal {
    display: none;
}

.subscription-status-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 8px;
    padding: 5px 11px;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(0,0,0,.14);
}

.subscription-status-green {
    background: linear-gradient(135deg, #4f8f69, #73b88a);
    color: #fff;
}

.subscription-status-yellow {
    background: linear-gradient(135deg, #f6c343, #d4a017);
    color: #1f2933;
}

.subscription-status-red {
    background: linear-gradient(135deg, #c0392b, #e74c3c);
    color: #fff;
}

/*************************************************************************************
 * Compact Question Filter Toggle
 ************************************************************************************/
#controls .question-toggle-row {
display:flex;
flex-wrap:wrap;
align-items:center;
justify-content:center;
gap:0.6rem;
width:100%;
margin:0 0 0.65rem;
}

#controls .filter-toggle {
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
gap:0.4rem;
width:auto !important;
max-width:100%;
min-height:38px;
margin:0 auto 0.65rem !important;
padding:0.48rem 0.95rem !important;
border:1px solid rgba(47,111,145,0.42) !important;
border-radius:8px !important;
background:linear-gradient(135deg,#5298bc,#2f6f91) !important;
box-shadow:inset 0 1px 0 rgba(255,255,255,0.28),0 6px 14px rgba(22,55,71,0.15) !important;
color:#fff !important;
font-family:Arial,Helvetica,sans-serif;
font-size:0.95rem;
font-weight:900;
line-height:1;
letter-spacing:0;
text-align:center;
text-decoration:none !important;
cursor:pointer;
transition:background 0.18s ease,box-shadow 0.18s ease,transform 0.18s ease;
}

#controls .question-toggle-row .filter-toggle {
margin:0 !important;
}

#controls .filter-toggle:hover,
#controls .filter-toggle:focus {
background:linear-gradient(135deg,#5aa8cf,#235b80) !important;
box-shadow:inset 0 1px 0 rgba(255,255,255,0.3),0 8px 18px rgba(22,55,71,0.2) !important;
transform:translateY(-1px);
}

#controls .filter-toggle:focus {
outline:3px solid rgba(82,152,188,0.26);
outline-offset:2px;
}

#controls .filter-toggle:active {
transform:translateY(1px);
}

#controls .filter-toggle-label {
color:#fff !important;
white-space:nowrap;
}

#controls .colorblind-mode-control {
align-items:center;
background:#fff;
border:1px solid rgba(47,111,145,0.32);
border-radius:8px;
box-shadow:0 4px 10px rgba(22,55,71,0.12);
color:#163747;
display:inline-flex;
flex-wrap:wrap;
font-family:Arial,Helvetica,sans-serif;
font-size:0.88rem;
font-weight:900;
gap:0.5rem;
min-height:38px;
padding:0.35rem 0.45rem;
}

#controls .colorblind-mode-control-title {
white-space:nowrap;
}

#controls .colorblind-mode-segmented {
display:inline-grid;
grid-template-columns:repeat(4,minmax(0,auto));
gap:0.2rem;
padding:0.16rem;
border:1px solid rgba(82,152,188,0.28);
border-radius:8px;
background:#eef6fb;
}

#controls .colorblind-mode-segmented input {
position:absolute;
opacity:0;
pointer-events:none;
}

#controls .colorblind-mode-segmented label {
align-items:center;
border:1px solid transparent;
border-radius:6px;
color:#163747;
cursor:pointer;
display:inline-flex;
justify-content:center;
line-height:1;
min-height:26px;
min-width:2.5rem;
padding:0.3rem 0.42rem;
white-space:nowrap;
}

#controls .colorblind-mode-segmented input:checked + label {
background:#0072b2;
border-color:#00598c;
box-shadow:0 2px 7px rgba(0,114,178,0.22);
color:#fff;
}

#controls .colorblind-mode-segmented #question_colorblind_tritan:checked + label {
background:#cc79a7;
border-color:#9e4f7e;
}

#controls .colorblind-mode-segmented #question_colorblind_mono:checked + label {
background:#3f3f3f;
border-color:#151515;
}

#controls .colorblind-mode-control:focus-within {
outline:3px solid rgba(0,114,178,0.24);
outline-offset:2px;
}

#controls .colorblind-mode-status {
color:#476878;
font-size:0.84rem;
white-space:nowrap;
}

html.bbp-colorblind-mode {
--bbp-cb-blue:#0072b2;
--bbp-cb-blue-soft:#eaf4fb;
--bbp-cb-orange:#d55e00;
--bbp-cb-orange-soft:#fff0e6;
--bbp-cb-yellow:#f0e442;
--bbp-cb-purple:#cc79a7;
--bbp-cb-text:#163747;
}

html.bbp-colorblind-mode-tritan {
--bbp-cb-blue:#3f3f3f;
--bbp-cb-blue-soft:#f2f2f2;
--bbp-cb-orange:#cc79a7;
--bbp-cb-orange-soft:#fff1f8;
--bbp-cb-yellow:#d55e00;
--bbp-cb-purple:#8b6fb2;
--bbp-cb-text:#16202a;
}

html.bbp-colorblind-mode-mono {
--bbp-cb-blue:#111111;
--bbp-cb-blue-soft:#f3f3f3;
--bbp-cb-orange:#555555;
--bbp-cb-orange-soft:#fafafa;
--bbp-cb-yellow:#e8e8e8;
--bbp-cb-purple:#777777;
--bbp-cb-text:#111111;
}

html.bbp-colorblind-mode-mono .correct,
html.bbp-colorblind-mode-mono .question-focus-answer.correct {
background:#f2f2f2 !important;
border-color:#111 !important;
}

html.bbp-colorblind-mode-mono .incorrect,
html.bbp-colorblind-mode-mono .question-focus-answer.incorrect {
background:repeating-linear-gradient(135deg,#fff 0,#fff 7px,#e1e1e1 7px,#e1e1e1 14px) !important;
border-color:#555 !important;
}

html.bbp-colorblind-mode-mono .correct:before,
html.bbp-colorblind-mode-mono .question-focus-answer.correct:after,
html.bbp-colorblind-mode-mono .incorrect:before,
html.bbp-colorblind-mode-mono .question-focus-answer.incorrect:after {
border-color:#111 !important;
color:#111 !important;
}

html.bbp-colorblind-mode .correct,
html.bbp-colorblind-mode .question-focus-answer.correct {
background:var(--bbp-cb-blue-soft) !important;
border:2px solid rgba(0,114,178,0.72) !important;
border-left-width:8px !important;
color:var(--bbp-cb-text) !important;
position:relative;
}

html.bbp-colorblind-mode .incorrect,
html.bbp-colorblind-mode .question-focus-answer.incorrect {
background:repeating-linear-gradient(135deg,var(--bbp-cb-orange-soft) 0,var(--bbp-cb-orange-soft) 9px,#ffe4d4 9px,#ffe4d4 18px) !important;
border:2px solid rgba(213,94,0,0.78) !important;
border-left-width:8px !important;
color:var(--bbp-cb-text) !important;
position:relative;
}

html.bbp-colorblind-mode .correct:before,
html.bbp-colorblind-mode .question-focus-answer.correct:after {
content:"Correct";
display:inline-flex;
align-items:center;
justify-content:center;
margin:0 0.65rem 0 0.35rem;
padding:0.16rem 0.42rem;
border:1px solid var(--bbp-cb-blue);
border-radius:6px;
background:#fff;
color:var(--bbp-cb-blue);
font-size:0.82rem;
font-weight:900;
line-height:1;
text-transform:uppercase;
}

html.bbp-colorblind-mode .incorrect:before,
html.bbp-colorblind-mode .question-focus-answer.incorrect:after {
content:"Incorrect";
display:inline-flex;
align-items:center;
justify-content:center;
margin:0 0.65rem 0 0.35rem;
padding:0.16rem 0.42rem;
border:1px solid var(--bbp-cb-orange);
border-radius:6px;
background:#fff;
color:#8b3d00;
font-size:0.82rem;
font-weight:900;
line-height:1;
text-transform:uppercase;
}

html.bbp-colorblind-mode .question-focus-answer.correct:after,
html.bbp-colorblind-mode .question-focus-answer.incorrect:after {
margin-left:auto;
margin-right:0;
white-space:nowrap;
}

html.bbp-colorblind-mode .question-focus-answer.is-selected,
html.bbp-colorblind-mode .difficulty-rate-button.is-selected {
border-color:var(--bbp-cb-blue) !important;
box-shadow:0 0 0 3px rgba(0,114,178,0.18) !important;
}

html.bbp-colorblind-mode .difficulty-rate-button:hover,
html.bbp-colorblind-mode .difficulty-rate-button:focus,
html.bbp-colorblind-mode .difficulty-rate-button.is-selected,
html.bbp-colorblind-mode .flashcard-rating-button.is-normal,
html.bbp-colorblind-mode .question-focus-action.is-normal {
background:var(--bbp-cb-blue-soft) !important;
border-color:var(--bbp-cb-blue) !important;
color:var(--bbp-cb-text) !important;
}

html.bbp-colorblind-mode .flashcard-rating-button.is-easy,
html.bbp-colorblind-mode .question-focus-action.is-easy {
background:#eef7fb !important;
border:2px solid var(--bbp-cb-blue) !important;
color:var(--bbp-cb-text) !important;
}

html.bbp-colorblind-mode .flashcard-rating-button.is-hard,
html.bbp-colorblind-mode .question-focus-action.is-hard {
background:#fff9c7 !important;
border:2px solid #8a7a00 !important;
color:#514900 !important;
}

html.bbp-colorblind-mode .flashcard-rating-button.is-missed,
html.bbp-colorblind-mode .flashcard-side-button.is-danger,
html.bbp-colorblind-mode .question-focus-action.is-missed,
html.bbp-colorblind-mode .question-focus-action.is-danger {
background:repeating-linear-gradient(135deg,var(--bbp-cb-orange-soft) 0,var(--bbp-cb-orange-soft) 8px,#ffe4d4 8px,#ffe4d4 16px) !important;
border:2px solid var(--bbp-cb-orange) !important;
color:#6f2f00 !important;
}

html.bbp-colorblind-mode .question-action-button-confirm,
html.bbp-colorblind-mode #controls .filter-toggle,
html.bbp-colorblind-mode #controls #go_button,
html.bbp-colorblind-mode .question-focus-action.is-confirm {
background:var(--bbp-cb-blue) !important;
border-color:#00598c !important;
color:#fff !important;
}

html.bbp-colorblind-mode .question-action-button-feedback {
background:var(--bbp-cb-purple) !important;
border-color:#9e4f7e !important;
color:#fff !important;
}

html.bbp-colorblind-mode .question-action-button-edit {
background:#6b5ca5 !important;
border-color:#524783 !important;
color:#fff !important;
}

html.bbp-colorblind-mode .question-action-button-primary,
html.bbp-colorblind-mode .question-focus-action.is-primary,
html.bbp-colorblind-mode .question-focus-action.is-focus-nav {
background:#f0e442 !important;
border-color:#9e9300 !important;
color:#1f2933 !important;
text-shadow:none !important;
}

html.bbp-colorblind-mode-mono .question-action-button-confirm,
html.bbp-colorblind-mode-mono #controls .filter-toggle,
html.bbp-colorblind-mode-mono #controls #go_button,
html.bbp-colorblind-mode-mono .question-action-button-feedback,
html.bbp-colorblind-mode-mono .question-action-button-edit,
html.bbp-colorblind-mode-mono .question-action-button-primary,
html.bbp-colorblind-mode-mono .question-focus-action.is-confirm,
html.bbp-colorblind-mode-mono .question-focus-action.is-primary,
html.bbp-colorblind-mode-mono .question-focus-action.is-focus-nav {
background:#111 !important;
border-color:#000 !important;
color:#fff !important;
text-shadow:none !important;
}

html.bbp-colorblind-mode-mono .flashcard-rating-button.is-easy,
html.bbp-colorblind-mode-mono .flashcard-rating-button.is-normal,
html.bbp-colorblind-mode-mono .question-focus-action.is-easy,
html.bbp-colorblind-mode-mono .question-focus-action.is-normal {
background:#f3f3f3 !important;
border:2px solid #111 !important;
color:#111 !important;
}

html.bbp-colorblind-mode-mono .flashcard-rating-button.is-hard,
html.bbp-colorblind-mode-mono .question-focus-action.is-hard {
background:#e8e8e8 !important;
border:2px dashed #333 !important;
color:#111 !important;
}

html.bbp-colorblind-mode-mono .flashcard-rating-button.is-missed,
html.bbp-colorblind-mode-mono .flashcard-side-button.is-danger,
html.bbp-colorblind-mode-mono .question-focus-action.is-missed,
html.bbp-colorblind-mode-mono .question-focus-action.is-danger {
background:repeating-linear-gradient(135deg,#fff 0,#fff 7px,#ddd 7px,#ddd 14px) !important;
border:2px solid #555 !important;
color:#111 !important;
}

html.bbp-colorblind-mode #error_message,
html.bbp-colorblind-mode .error,
html.bbp-colorblind-mode .question-editor-action-message.is-error {
background:var(--bbp-cb-orange-soft);
border:1px solid var(--bbp-cb-orange);
color:#6f2f00 !important;
}

html.bbp-colorblind-mode #submit_status,
html.bbp-colorblind-mode #cardaction,
html.bbp-colorblind-mode #basicaction,
html.bbp-colorblind-mode .question-editor-action-message.is-success {
background:var(--bbp-cb-blue-soft);
border:1px solid var(--bbp-cb-blue);
color:var(--bbp-cb-text) !important;
}

/*************************************************************************************
 * Question Page Color-Blind Theme Overrides
 ************************************************************************************/
html.bbp-colorblind-mode body,
html.bbp-colorblind-mode body[style],
html.bbp-colorblind-mode .body {
background:var(--bbp-cb-page-bg, #f5f7f8) !important;
color:var(--bbp-cb-text) !important;
}

html.bbp-colorblind-mode .bbp-site-header,
html.bbp-colorblind-mode #top-fixed.bbp-site-header {
background:var(--bbp-cb-header-bg, var(--bbp-cb-blue)) !important;
box-shadow:0 2px 8px rgba(0,0,0,0.22) !important;
color:var(--bbp-cb-header-text, #fff) !important;
}

html.bbp-colorblind-mode .bbp-site-brand .zen-dots-regular,
html.bbp-colorblind-mode .bbp-site-brand-icon,
html.bbp-colorblind-mode .bbp-site-heading .h4-header,
html.bbp-colorblind-mode .bbp-site-heading span,
html.bbp-colorblind-mode .bbp-site-menu-toggle {
color:var(--bbp-cb-header-text, #fff) !important;
}

html.bbp-colorblind-mode .bbp-site-menu-toggle {
background:var(--bbp-cb-header-button-bg, rgba(255,255,255,0.14)) !important;
border-color:var(--bbp-cb-header-border, rgba(255,255,255,0.55)) !important;
}

html.bbp-colorblind-mode .bbp-site-menu {
background:var(--bbp-cb-panel-bg, #fff) !important;
border-color:var(--bbp-cb-border, #9aa8b0) !important;
}

html.bbp-colorblind-mode .bbp-site-menu a {
color:var(--bbp-cb-text) !important;
}

html.bbp-colorblind-mode .bbp-site-menu a .material-symbols-rounded,
html.bbp-colorblind-mode .bbp-site-menu a .material-symbols-outlined {
color:var(--bbp-cb-accent, var(--bbp-cb-orange)) !important;
}

html.bbp-colorblind-mode .bbp-site-menu a:hover,
html.bbp-colorblind-mode .bbp-site-menu a:focus,
html.bbp-colorblind-mode .bbp-site-menu a.is-active {
background:var(--bbp-cb-panel-muted, var(--bbp-cb-blue-soft)) !important;
color:var(--bbp-cb-text) !important;
}

html.bbp-colorblind-mode #accordion .ui-accordion-header,
html.bbp-colorblind-mode #accordion2 .ui-accordion-header,
html.bbp-colorblind-mode #accordion3 .ui-accordion-header,
html.bbp-colorblind-mode #accordion4 .ui-accordion-header,
html.bbp-colorblind-mode #accordion5 .ui-accordion-header,
html.bbp-colorblind-mode #accordion6 .ui-accordion-header,
html.bbp-colorblind-mode #accordion7 .ui-accordion-header,
html.bbp-colorblind-mode .ui-accordion .ui-accordion-header {
background:var(--bbp-cb-header-bg, var(--bbp-cb-blue)) !important;
border:1px solid var(--bbp-cb-header-border, var(--bbp-cb-blue)) !important;
color:var(--bbp-cb-header-text, #fff) !important;
}

html.bbp-colorblind-mode .ui-accordion .ui-accordion-content,
html.bbp-colorblind-mode #exam_section,
html.bbp-colorblind-mode #submit_section,
html.bbp-colorblind-mode #question-section,
html.bbp-colorblind-mode .question_block,
html.bbp-colorblind-mode #answers,
html.bbp-colorblind-mode .question-focus-dialog,
html.bbp-colorblind-mode .flashcard-card-column,
html.bbp-colorblind-mode .flashcard-side-panel,
html.bbp-colorblind-mode .flashcard-side-section,
html.bbp-colorblind-mode .flashcard-help-dialog {
background:var(--bbp-cb-panel-bg, #fff) !important;
border-color:var(--bbp-cb-border, #9aa8b0) !important;
color:var(--bbp-cb-text) !important;
}

html.bbp-colorblind-mode .control-bg,
html.bbp-colorblind-mode #controls .control-bg,
html.bbp-colorblind-mode .question-score-card,
html.bbp-colorblind-mode .question-filter-pill,
html.bbp-colorblind-mode .question-sort-card,
html.bbp-colorblind-mode #qoptions .question-sort-card,
html.bbp-colorblind-mode .filter-field,
html.bbp-colorblind-mode .flashcard-mode-toolbar,
html.bbp-colorblind-mode .flashcard-filter-panel,
html.bbp-colorblind-mode .flashcard-ai-token-grid div,
html.bbp-colorblind-mode .flashcard-ai-type-group,
html.bbp-colorblind-mode .flashcard-export-usage div,
html.bbp-colorblind-mode .flashcard-ai-preview,
html.bbp-colorblind-mode .flashcard-ai-export-message,
html.bbp-colorblind-mode .bbp-token-modal-dialog,
html.bbp-colorblind-mode .bbp-token-product-description,
html.bbp-colorblind-mode .bbp-token-checkout-summary,
html.bbp-colorblind-mode .flashcard-stat-grid > div,
html.bbp-colorblind-mode .question-focus-meta,
html.bbp-colorblind-mode .question-focus-question,
html.bbp-colorblind-mode .question-focus-flashcard,
html.bbp-colorblind-mode .question-focus-explanation {
background:var(--bbp-cb-panel-muted, var(--bbp-cb-blue-soft)) !important;
border-color:var(--bbp-cb-border, #9aa8b0) !important;
color:var(--bbp-cb-text) !important;
}

html.bbp-colorblind-mode #qoptions .question-sort-card,
html.bbp-colorblind-mode #calculated_score,
html.bbp-colorblind-mode .flashcard-side-heading {
background:var(--bbp-cb-header-bg, var(--bbp-cb-blue)) !important;
color:var(--bbp-cb-header-text, #fff) !important;
}

html.bbp-colorblind-mode #qoptions .question-sort-summary,
html.bbp-colorblind-mode #qoptions .question-sort-count,
html.bbp-colorblind-mode #qoptions .question-sort-summary-icon,
html.bbp-colorblind-mode #qoptions .question-sort-icon,
html.bbp-colorblind-mode #calculated_score:before {
color:var(--bbp-cb-header-text, #fff) !important;
}

html.bbp-colorblind-mode #controls select,
html.bbp-colorblind-mode #controls input,
html.bbp-colorblind-mode .flashcard-filter-panel select,
html.bbp-colorblind-mode .flashcard-ai-preview-row textarea,
html.bbp-colorblind-mode .bbp-token-modal-select,
html.bbp-colorblind-mode .bbp-token-modal-input,
html.bbp-colorblind-mode .question_input,
html.bbp-colorblind-mode textarea {
background:var(--bbp-cb-input-bg, #fff) !important;
border-color:var(--bbp-cb-border, #9aa8b0) !important;
color:var(--bbp-cb-text) !important;
}

html.bbp-colorblind-mode .question-action-button-secondary,
html.bbp-colorblind-mode .question-copy-button,
html.bbp-colorblind-mode .flashcard-help-button,
html.bbp-colorblind-mode .flashcard-side-button,
html.bbp-colorblind-mode .flashcard-section-toggle,
html.bbp-colorblind-mode .flashcard-filter-clear,
html.bbp-colorblind-mode .bbp-token-modal-close,
html.bbp-colorblind-mode .bbp-token-modal-secondary,
html.bbp-colorblind-mode .question-focus-close,
html.bbp-colorblind-mode .question-focus-icon-button,
html.bbp-colorblind-mode .question-focus-action.is-secondary {
background:var(--bbp-cb-panel-bg, #fff) !important;
border-color:var(--bbp-cb-border, #9aa8b0) !important;
color:var(--bbp-cb-text) !important;
box-shadow:0 4px 10px rgba(0,0,0,0.14) !important;
}

html.bbp-colorblind-mode .flashcard-card-face,
html.bbp-colorblind-mode .question-focus-card-face {
background:var(--bbp-cb-card-bg, var(--bbp-cb-panel-bg, #fff)) !important;
border-color:var(--bbp-cb-border, #9aa8b0) !important;
color:var(--bbp-cb-text) !important;
}

html.bbp-colorblind-mode .flashcard-card-kicker,
html.bbp-colorblind-mode .question-focus-kicker,
html.bbp-colorblind-mode .flashcard-card-header-title,
html.bbp-colorblind-mode .flashcard-side-title,
html.bbp-colorblind-mode .flashcard-section-title,
html.bbp-colorblind-mode .flashcard-ai-token-grid span,
html.bbp-colorblind-mode .flashcard-ai-token-grid strong,
html.bbp-colorblind-mode .flashcard-export-usage span,
html.bbp-colorblind-mode .flashcard-export-usage strong,
html.bbp-colorblind-mode .flashcard-ai-type-group legend,
html.bbp-colorblind-mode .flashcard-ai-type-group label,
html.bbp-colorblind-mode .flashcard-ai-note,
html.bbp-colorblind-mode .flashcard-ai-edit-note,
html.bbp-colorblind-mode .bbp-token-modal-header h3,
html.bbp-colorblind-mode .bbp-token-modal-label,
html.bbp-colorblind-mode .bbp-token-total-title,
html.bbp-colorblind-mode .bbp-token-total-row,
html.bbp-colorblind-mode .bbp-token-muted,
html.bbp-colorblind-mode .bbp-token-total-loading,
html.bbp-colorblind-mode .bbp-token-modal-note,
html.bbp-colorblind-mode .filter-field-label,
html.bbp-colorblind-mode .question-sort-summary-icon {
color:var(--bbp-cb-accent, var(--bbp-cb-blue)) !important;
}

html.bbp-colorblind-mode .question-focus-header {
background:var(--bbp-cb-panel-bg, #fff) !important;
border-color:var(--bbp-cb-border, #9aa8b0) !important;
color:var(--bbp-cb-text, #163747) !important;
}

html.bbp-colorblind-mode .question-focus-title,
html.bbp-colorblind-mode .question-focus-subtitle,
html.bbp-colorblind-mode .question-focus-meta,
html.bbp-colorblind-mode .question-focus-meta span,
html.bbp-colorblind-mode .question-focus-meta strong,
html.bbp-colorblind-mode .question-focus-question,
html.bbp-colorblind-mode .question-focus-question *,
html.bbp-colorblind-mode .question-focus-flashcard,
html.bbp-colorblind-mode .question-focus-flashcard *,
html.bbp-colorblind-mode .question-focus-card-face,
html.bbp-colorblind-mode .question-focus-card-face *,
html.bbp-colorblind-mode .question-focus-answer,
html.bbp-colorblind-mode .question-focus-answer *,
html.bbp-colorblind-mode .question-focus-explanation,
html.bbp-colorblind-mode .question-focus-explanation *,
html.bbp-colorblind-mode .question-focus-explanation-switch,
html.bbp-colorblind-mode .question-focus-explanation-switch *,
html.bbp-colorblind-mode .question-focus-action,
html.bbp-colorblind-mode .question-focus-action * {
color:var(--bbp-cb-text, #163747) !important;
}

html.bbp-colorblind-mode .question-focus-action.is-primary,
html.bbp-colorblind-mode .question-focus-action.is-confirm,
html.bbp-colorblind-mode .question-focus-action.is-focus-nav,
html.bbp-colorblind-mode .question-focus-action.is-primary *,
html.bbp-colorblind-mode .question-focus-action.is-confirm *,
html.bbp-colorblind-mode .question-focus-action.is-focus-nav * {
color:var(--bbp-cb-header-text, #fff) !important;
}

html.bbp-colorblind-mode .question-focus-image,
html.bbp-colorblind-mode .question-focus-explanation img,
html.bbp-colorblind-mode #qimage_block,
html.bbp-colorblind-mode .explanation img {
background:var(--bbp-cb-panel-bg, #fff) !important;
border-color:var(--bbp-cb-border, #9aa8b0) !important;
}

html.bbp-colorblind-mode-red-green #qimage_block img,
html.bbp-colorblind-mode-red-green .question-focus-image img,
html.bbp-colorblind-mode-red-green .question-focus-explanation img,
html.bbp-colorblind-mode-red-green .explanation img {
filter:saturate(0.82) contrast(1.12) sepia(0.08) hue-rotate(8deg);
}

html.bbp-colorblind-mode-tritan #qimage_block img,
html.bbp-colorblind-mode-tritan .question-focus-image img,
html.bbp-colorblind-mode-tritan .question-focus-explanation img,
html.bbp-colorblind-mode-tritan .explanation img {
filter:saturate(0.88) contrast(1.12) hue-rotate(-14deg);
}

html.bbp-colorblind-mode-mono #qimage_block img,
html.bbp-colorblind-mode-mono .question-focus-image img,
html.bbp-colorblind-mode-mono .question-focus-explanation img,
html.bbp-colorblind-mode-mono .explanation img {
filter:grayscale(1) contrast(1.14);
}

html.bbp-colorblind-mode-mono {
--bbp-cb-page-bg:#f0f0f0;
--bbp-cb-header-bg:#111;
--bbp-cb-header-text:#fff;
--bbp-cb-header-border:#666;
--bbp-cb-header-button-bg:#333;
--bbp-cb-panel-bg:#fff;
--bbp-cb-panel-muted:#efefef;
--bbp-cb-card-bg:#fafafa;
--bbp-cb-input-bg:#fff;
--bbp-cb-border:#555;
--bbp-cb-accent:#111;
}

html.bbp-colorblind-mode-mono .bbp-site-menu a .material-symbols-rounded,
html.bbp-colorblind-mode-mono .bbp-site-menu a .material-symbols-outlined,
html.bbp-colorblind-mode-mono .flashcard-card-kicker,
html.bbp-colorblind-mode-mono .question-focus-kicker,
html.bbp-colorblind-mode-mono .flashcard-card-header-title,
html.bbp-colorblind-mode-mono .flashcard-side-title,
html.bbp-colorblind-mode-mono .flashcard-section-title,
html.bbp-colorblind-mode-mono .filter-field-label,
html.bbp-colorblind-mode-mono .question-sort-summary-icon {
color:#111 !important;
}

html.bbp-colorblind-mode-mono .ui-widget-content,
html.bbp-colorblind-mode-mono .control-bg,
html.bbp-colorblind-mode-mono #controls .control-bg,
html.bbp-colorblind-mode-mono .question-sort-card,
html.bbp-colorblind-mode-mono .filter-field,
html.bbp-colorblind-mode-mono .question-filter-pill,
html.bbp-colorblind-mode-mono .question-score-card,
html.bbp-colorblind-mode-mono .flashcard-mode-toolbar,
html.bbp-colorblind-mode-mono .flashcard-filter-panel,
html.bbp-colorblind-mode-mono .flashcard-stat-grid > div {
background:#efefef !important;
background-image:none !important;
color:#111 !important;
}

html.bbp-colorblind-mode-mono *,
html.bbp-colorblind-mode-mono *:before,
html.bbp-colorblind-mode-mono *:after {
text-shadow:none !important;
}

#controls .filter-chevron {
display:inline-flex !important;
align-items:center;
justify-content:center;
width:1.15rem;
height:1.15rem;
color:#fff !important;
font-family:'Material Symbols Rounded';
font-size:0;
font-variation-settings:'FILL' 0,'wght' 500,'GRAD' 0,'opsz' 24;
line-height:1;
transition:transform 0.22s ease;
}

#controls .filter-chevron::before {
content:"expand_less";
font-size:1.15rem;
line-height:1;
}

#controls .filter-toggle.is-collapsed .filter-chevron {
transform:rotate(180deg);
}

@media (max-width: 700px) {
#controls .question-toggle-row {
gap:0.45rem;
}

#controls .filter-toggle {
position:static !important;
width:auto !important;
margin:0 !important;
padding:0.52rem 1rem !important;
}
}

/*************************************************************************************
 * Create Question Rich Text Editor
 ************************************************************************************/
#sexplanation,
#expupdater {
background:#fff;
border:1px solid rgba(82,152,188,0.38);
border-radius:0 0 12px 12px;
color:#163747;
font-family:Arial,Helvetica,sans-serif;
}

#submit_explanation .ql-toolbar,
.explain_box .ql-toolbar {
border:1px solid rgba(82,152,188,0.38);
border-bottom:0;
border-radius:12px 12px 0 0;
background:#eef7fb;
}

#submit_explanation .ql-container,
.explain_box .ql-container {
min-height:10rem;
font-size:1rem;
}

#submit_explanation .ql-editor,
.explain_box .ql-editor {
min-height:10rem;
line-height:1.55;
}

#submit_explanation .ql-editor img,
.explain_box .ql-editor img {
max-width:100%;
height:auto;
border-radius:8px;
}

#submit_explanation .ql-editor.ql-blank::before,
.explain_box .ql-editor.ql-blank::before {
color:#7d98a5;
font-style:normal;
}

/*************************************************************************************
 * Create Question Form
 ************************************************************************************/
#accordion3 #submit_section {
max-width:100%;
margin:0 auto;
padding:0.9rem 1rem 1.2rem;
border:1px solid rgba(82,152,188,0.35);
border-radius:12px;
background:linear-gradient(135deg,#fbfdfe,#eef7fb);
box-shadow:0 8px 22px rgba(22,55,71,0.08);
color:#163747;
font-size:1.06rem;
}

#accordion3 #submit_section .header {
margin:0 0 0.6rem;
color:#2f6f91;
font-size:1.62rem;
font-weight:900;
line-height:1.2;
text-align:center;
}

#accordion3 #submit_section .subheader,
#accordion3 #submit_section .instructions {
max-width:70rem;
margin:0.55rem auto;
padding:0.65rem 0.85rem;
border:1px solid rgba(82,152,188,0.22);
border-radius:10px;
background:rgba(255,255,255,0.72);
line-height:1.45;
font-size:1.04rem;
}

#questionForm {
max-width:100%;
margin:0 auto;
}

#submit_question,
#submit_correct,
#submit_wrong_1,
#submit_wrong_2,
#submit_wrong_3,
#submit_wrong_4,
#submit_wrong_5,
#submit_wrong_6,
#submit_wrong_7,
#submit_explanation {
margin:0.85rem 0;
}

#questionForm label,
#squestion_cat strong,
#squestion_subcat strong {
display:block;
margin:0 0 0.25rem;
color:#red;
font-size:0.88rem;
font-weight:900;
line-height:1;
letter-spacing:0;
text-transform:uppercase;
}

#questionForm br {
display:none;
}

#questionForm .create-question-select-row {
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:0.75rem;
width:100%;
margin:0 0 0.9rem;
}

#squestion_cat,
#squestion_subcat {
min-width:0;
padding:0.55rem 0.8rem 0.45rem;
border:1px solid rgba(82,152,188,0.45);
border-radius:10px;
background:#fff;
box-shadow:inset 0 1px 0 rgba(255,255,255,0.95),0 2px 7px rgba(22,55,71,0.08);
transition:border-color 0.18s ease,box-shadow 0.18s ease;
}

#squestion_cat:hover,
#squestion_subcat:hover,
#squestion_cat:focus-within,
#squestion_subcat:focus-within {
border-color:#5298bc;
box-shadow:0 0 0 3px rgba(82,152,188,0.15),0 4px 12px rgba(22,55,71,0.12);
}

#squestion_subcat.is-disabled {
background:#f4f8fa;
border-color:rgba(82,152,188,0.22);
box-shadow:none;
opacity:0.78;
}

#squestion_subcat.is-disabled strong,
#squestion_subcat.is-disabled select {
color:#7d98a5;
}

#squestion_subcat.is-disabled .selectdiv:after {
border-color:#9fb5bf;
}

#questionForm .selectdiv {
position:relative;
display:block;
width:100%;
margin:0;
}

#questionForm .selectdiv:after {
content:"";
position:absolute;
right:0.15rem;
top:50%;
width:0.55rem;
height:0.55rem;
border-right:2px solid #5298bc;
border-bottom:2px solid #5298bc;
pointer-events:none;
transform:translateY(-65%) rotate(45deg);
}

#questionForm select,
#questionForm input[type="text"],
#questionForm textarea {
display:block;
width:100% !important;
max-width:100%;
box-sizing:border-box;
margin:0 !important;
border:1px solid rgba(82,152,188,0.36);
border-radius:10px;
background:#fff;
box-shadow:inset 0 1px 0 rgba(255,255,255,0.95);
color:#163747;
font-family:Arial,Helvetica,sans-serif;
font-size:1.08rem;
font-weight:700;
line-height:1.35;
outline:0;
transition:border-color 0.18s ease,box-shadow 0.18s ease;
}

#questionForm select {
height:1.8rem;
padding:0 1.55rem 0 0;
border:0;
border-radius:0;
background:transparent;
-webkit-appearance:none;
-moz-appearance:none;
appearance:none;
cursor:pointer;
}

#questionForm select:disabled {
cursor:not-allowed;
}

#questionForm input[type="text"] {
min-height:44px;
padding:0.62rem 0.8rem;
}

#questionForm textarea {
min-height:8rem;
padding:0.75rem 0.85rem;
resize:vertical;
}

#questionForm input[type="text"]:focus,
#questionForm textarea:focus {
border-color:#5298bc;
box-shadow:0 0 0 3px rgba(82,152,188,0.15),0 4px 12px rgba(22,55,71,0.12);
}

#questionForm input[type="file"] {
display:block;
width:100%;
box-sizing:border-box;
padding:0.65rem 0.8rem;
border:1px dashed rgba(82,152,188,0.45);
border-radius:10px;
background:#fff;
color:#163747;
font-weight:800;
font-size:1.02rem;
}

#submit_correct {
padding-top:0.35rem;
}

#submit_correct input {
border-color:rgba(79,143,105,0.45) !important;
}

#submit_wrong_1,
#submit_wrong_2,
#submit_wrong_3,
#submit_wrong_4,
#submit_wrong_5,
#submit_wrong_6,
#submit_wrong_7 {
display:grid;
grid-template-columns:minmax(10rem,14rem) minmax(0,1fr);
align-items:center;
gap:0.65rem;
}

#submit_wrong_1 label,
#submit_wrong_2 label,
#submit_wrong_3 label,
#submit_wrong_4 label,
#submit_wrong_5 label,
#submit_wrong_6 label,
#submit_wrong_7 label {
margin:0;
font-size:0.9rem;
line-height:1.15;
}

#submit_wrong_1 .submission_input,
#submit_wrong_2 .submission_input,
#submit_wrong_3 .submission_input,
#submit_wrong_4 .submission_input,
#submit_wrong_5 .submission_input,
#submit_wrong_6 .submission_input,
#submit_wrong_7 .submission_input {
min-width:0;
}

#send_question {
display:inline-flex;
align-items:center;
justify-content:center;
min-height:44px;
margin:0.65rem 0 0;
padding:0.65rem 1.2rem;
border:1px solid rgba(119,87,4,0.25);
border-radius:8px;
background:linear-gradient(135deg,#f5c542,#d4a017);
box-shadow:inset 0 1px 0 rgba(255,255,255,0.45),0 6px 14px rgba(22,55,71,0.16);
color:#1f2933;
font-family:Arial,Helvetica,sans-serif;
font-size:1.08rem;
font-weight:900;
line-height:1.1;
cursor:pointer;
transition:background 0.18s ease,box-shadow 0.18s ease,transform 0.18s ease;
}

#send_question:hover,
#send_question:focus {
background:linear-gradient(135deg,#ffd95c,#e0ad1f);
box-shadow:inset 0 1px 0 rgba(255,255,255,0.5),0 9px 20px rgba(22,55,71,0.22);
transform:translateY(-1px);
}

#send_question:disabled {
cursor:not-allowed;
opacity:0.68;
}

@media (max-width: 760px) {
#questionForm .create-question-select-row,
#submit_wrong_1,
#submit_wrong_2,
#submit_wrong_3,
#submit_wrong_4,
#submit_wrong_5,
#submit_wrong_6,
#submit_wrong_7 {
grid-template-columns:1fr;
}

#accordion3 #submit_section {
padding:0.75rem;
}
}

.editor-question-tools {
display:flex;
align-items:center;
gap:0.85rem;
margin:0.45rem 0 0.75rem;
flex-wrap:wrap;
}

.question-action-bar .editor-question-tools {
margin:0 0 0 auto;
gap:0.5rem;
justify-content:flex-end;
}

.question-action-bar .editor-question-tools #toggleImageControl,
.question-action-bar .editor-question-tools .save-editing-control {
min-height:38px;
padding:0.34rem 0.72rem;
}

.question-action-bar .editor-question-tools .save-editing-message {
font-size:0.82rem;
max-width:140px;
}

#toggleImageControl {
display:inline-flex;
align-items:center;
min-height:34px;
padding:0.35rem 0.8rem;
border:1px solid rgba(82,152,188,0.35);
border-radius:8px;
background:#eef7fb;
color:#163747;
font-weight:900;
text-decoration:none;
box-shadow:0 3px 9px rgba(22,55,71,0.1);
}

.save-editing-control {
display:inline-flex;
align-items:center;
gap:0.4rem;
min-height:34px;
padding:0.34rem 0.75rem;
border:1px solid rgba(82,152,188,0.42);
border-radius:8px;
background:#fff;
color:#163747;
font-weight:900;
cursor:pointer;
box-shadow:0 3px 9px rgba(22,55,71,0.08);
}

.save-editing-control input {
position:absolute;
opacity:0;
pointer-events:none;
}

.save-editing-box {
position:relative;
width:18px;
height:18px;
border:2px solid #5298bc;
border-radius:5px;
background:#fff;
box-sizing:border-box;
}

.save-editing-control input:checked + .save-editing-box {
background:#5298bc;
border-color:#2f7599;
}

.save-editing-control input:checked + .save-editing-box:after {
content:"";
position:absolute;
left:4px;
top:1px;
width:5px;
height:10px;
border:solid #fff;
border-width:0 2px 2px 0;
transform:rotate(45deg);
}

.save-editing-control:has(input:disabled) {
opacity:0.65;
cursor:not-allowed;
}

.save-editing-message {
opacity:0;
transform:translateY(4px);
transition:opacity 0.18s ease,transform 0.18s ease;
color:#2f7599;
font-weight:900;
}

.save-editing-message.is-visible {
opacity:1;
transform:translateY(0);
}

/************************************************************************************
 * Questions Page Header Refresh
 ************************************************************************************/
.question-header-brand {
display:inline-flex;
align-items:center;
justify-content:flex-start;
gap:0.45rem;
line-height:1;
white-space:nowrap;
}

.question-header-brand .zen-dots-regular {
display:inline-flex;
align-items:center;
margin:0;
}

.question-header-knowledge-icon {
display:inline-flex;
align-items:center;
justify-content:center;
font-size:3.15rem;
line-height:1;
color:#fff;
text-shadow:0 2px 8px rgba(22,55,71,0.28);
}

#top-fixed .left-top-grid-item {
align-items:center;
gap:0.28rem;
}

#top-fixed .left-top-grid-item a.toplink {
display:inline-flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:0.12rem;
padding:0.22rem 0.3rem;
border-radius:8px;
line-height:1;
text-decoration:none !important;
text-align:center;
white-space:nowrap;
min-width:5.55rem;
max-width:none;
}

#top-fixed .left-top-grid-item a.toplink .material-symbols-rounded {
font-size:2.35rem;
line-height:1;
color:#f5c542;
}

#top-fixed .left-top-grid-item a.toplink span:last-child {
display:block;
font-size:1.18rem;
line-height:1.05;
}

#top-fixed .left-top-grid-item a.toplink .toplink-label-nowrap {
white-space:nowrap;
}

#top-fixed .left-top-grid-item a.toplink:hover,
#top-fixed .left-top-grid-item a.toplink:focus {
background:rgba(255,255,255,0.16);
color:#fff7cf !important;
outline:0;
}

@media (min-width:701px) {
#mtg-grid-container {
grid-template-columns:170px 1fr 505px !important;
gap:0.65rem !important;
}

#top-fixed .left-top-grid-item {
justify-content:flex-end;
flex-wrap:wrap;
row-gap:0.18rem;
white-space:normal;
}

#top-fixed .left-top-grid-item a.toplink {
font-weight:800;
}
}

@media (max-width:700px) {
#top-fixed #mtg-grid-container {
display:grid !important;
grid-template-columns:auto minmax(0,1fr) !important;
align-items:center !important;
justify-items:stretch !important;
column-gap:0.7rem !important;
text-align:left !important;
}

.mtg-grid-item:first-child {
grid-column:1 !important;
grid-row:1 !important;
width:auto !important;
justify-self:start !important;
}

.mtg-grid-center {
grid-column:2 !important;
grid-row:1 !important;
width:auto !important;
min-width:0 !important;
text-align:right !important;
justify-self:end !important;
}

.mtg-grid-center .h4-header,
.mtg-grid-center span {
text-align:right !important;
}

.question-header-brand {
display:inline-flex !important;
align-items:center !important;
justify-content:flex-start !important;
width:auto !important;
margin-bottom:0;
}

.question-header-brand .zen-dots-regular {
display:inline-flex !important;
width:auto !important;
margin:0 !important;
}

.question-header-knowledge-icon {
font-size:2.85rem;
}

#top-fixed .left-top-grid-item {
grid-column:1 / -1 !important;
grid-row:2 !important;
display:flex !important;
flex-wrap:wrap !important;
justify-content:center !important;
gap:0.35rem !important;
width:100% !important;
margin-top:0.55rem !important;
}

#top-fixed .left-top-grid-item a.toplink {
flex-direction:column !important;
width:31% !important;
min-width:0 !important;
max-width:8.2rem !important;
min-height:34px !important;
padding:0.28rem 0.26rem !important;
background:linear-gradient(135deg,#f5c542,#d4a017) !important;
border:1px solid rgba(0,0,0,0.16) !important;
box-shadow:0 3px 8px rgba(22,55,71,0.14) !important;
color:#1a1a1a !important;
}

#top-fixed .left-top-grid-item a.toplink .material-symbols-rounded {
display:none !important;
}

#top-fixed .left-top-grid-item a.toplink span:last-child {
font-size:1.12rem !important;
color:#1a1a1a !important;
}
}

/*************************************************************************************
 * Questions Page Color-Blind Accordion Content Overrides
 * Keep this at the end so later accordion/editor styles cannot override the mode.
 ************************************************************************************/
html.bbp-colorblind-mode .ui-accordion-content,
html.bbp-colorblind-mode #accordion2 > div,
html.bbp-colorblind-mode #accordion3 > div,
html.bbp-colorblind-mode #accordion4 > section,
html.bbp-colorblind-mode #flashcard_section,
html.bbp-colorblind-mode #create_flashcard,
html.bbp-colorblind-mode #current_flashcard,
html.bbp-colorblind-mode #basic_flashcard_text,
html.bbp-colorblind-mode #cloze_flashcard_text,
html.bbp-colorblind-mode #rate_response,
html.bbp-colorblind-mode #question_inline_editor,
html.bbp-colorblind-mode .question-inline-editor,
html.bbp-colorblind-mode .question-inline-editor-shell,
html.bbp-colorblind-mode .account-question-editor,
html.bbp-colorblind-mode .account-select-card,
html.bbp-colorblind-mode .account-edit-footer,
html.bbp-colorblind-mode #submit_section,
html.bbp-colorblind-mode #questionForm,
html.bbp-colorblind-mode #submit_question,
html.bbp-colorblind-mode .create-question-select-row,
html.bbp-colorblind-mode .question_rows,
html.bbp-colorblind-mode .section_divider,
html.bbp-colorblind-mode .modal-content,
html.bbp-colorblind-mode .modal-body,
html.bbp-colorblind-mode .editor-request-dialog {
background:var(--bbp-cb-panel-bg, #fff) !important;
background-image:none !important;
color:var(--bbp-cb-text, #163747) !important;
border-color:var(--bbp-cb-border, #9aa8b0) !important;
box-shadow:0 8px 20px rgba(22,55,71,0.12) !important;
}

html.bbp-colorblind-mode #accordion3 #submit_section .subheader,
html.bbp-colorblind-mode #accordion3 #submit_section .instructions,
html.bbp-colorblind-mode .question-inline-editor .account-question-editor-heading,
html.bbp-colorblind-mode .account-edit-image-row .submission_input,
html.bbp-colorblind-mode .question-inline-editor .account-current-image,
html.bbp-colorblind-mode .save-editing-control,
html.bbp-colorblind-mode #toggleImageControl,
html.bbp-colorblind-mode .editor-question-tools,
html.bbp-colorblind-mode .explain_box,
html.bbp-colorblind-mode .ql-toolbar,
html.bbp-colorblind-mode .ql-container,
html.bbp-colorblind-mode .ql-editor {
background:var(--bbp-cb-panel-muted, var(--bbp-cb-blue-soft)) !important;
background-image:none !important;
color:var(--bbp-cb-text, #163747) !important;
border-color:var(--bbp-cb-border, #9aa8b0) !important;
}

html.bbp-colorblind-mode #accordion3 #submit_section .header,
html.bbp-colorblind-mode #flashcard_title,
html.bbp-colorblind-mode .question-inline-editor-heading,
html.bbp-colorblind-mode .account-question-editor-heading,
html.bbp-colorblind-mode #submit_question .header,
html.bbp-colorblind-mode .flashcard-help-modal-title {
background:var(--bbp-cb-header-bg, var(--bbp-cb-blue)) !important;
background-image:none !important;
color:var(--bbp-cb-header-text, #fff) !important;
border-color:var(--bbp-cb-header-bg, var(--bbp-cb-blue)) !important;
box-shadow:none !important;
}

html.bbp-colorblind-mode #accordion2 input,
html.bbp-colorblind-mode #accordion2 select,
html.bbp-colorblind-mode #accordion2 textarea,
html.bbp-colorblind-mode #accordion3 input,
html.bbp-colorblind-mode #accordion3 select,
html.bbp-colorblind-mode #accordion3 textarea,
html.bbp-colorblind-mode #accordion4 input,
html.bbp-colorblind-mode #accordion4 select,
html.bbp-colorblind-mode #accordion4 textarea,
html.bbp-colorblind-mode .submission_input,
html.bbp-colorblind-mode #squestion_cat,
html.bbp-colorblind-mode #squestion_subcat,
html.bbp-colorblind-mode #sexplanation,
html.bbp-colorblind-mode #inline_explaner_text,
html.bbp-colorblind-mode .question-inline-editor select,
html.bbp-colorblind-mode .question-inline-editor input,
html.bbp-colorblind-mode .question-inline-editor textarea {
background:var(--bbp-cb-input-bg, #fff) !important;
background-image:none !important;
color:var(--bbp-cb-text, #163747) !important;
border-color:var(--bbp-cb-border, #9aa8b0) !important;
box-shadow:none !important;
}

html.bbp-colorblind-mode #accordion2 button,
html.bbp-colorblind-mode #accordion3 button,
html.bbp-colorblind-mode #accordion4 button,
html.bbp-colorblind-mode #basic_copy_q,
html.bbp-colorblind-mode #basic_copy_a,
html.bbp-colorblind-mode #basic_add_file,
html.bbp-colorblind-mode #clozecopy,
html.bbp-colorblind-mode #cloze_add_file,
html.bbp-colorblind-mode #clearcard,
html.bbp-colorblind-mode #send_question,
html.bbp-colorblind-mode #inline_update_question,
html.bbp-colorblind-mode #upexpl,
html.bbp-colorblind-mode #close_upexp,
html.bbp-colorblind-mode .cloze,
html.bbp-colorblind-mode .save-editing-message.is-visible {
background:var(--bbp-cb-accent, var(--bbp-cb-blue)) !important;
background-image:none !important;
color:var(--bbp-cb-accent-text, #111) !important;
border-color:var(--bbp-cb-accent, var(--bbp-cb-blue)) !important;
text-shadow:none !important;
box-shadow:0 3px 9px rgba(22,55,71,0.16) !important;
}

html.bbp-colorblind-mode .ql-stroke {
stroke:var(--bbp-cb-text, #163747) !important;
}

html.bbp-colorblind-mode .ql-fill {
fill:var(--bbp-cb-text, #163747) !important;
}

html.bbp-colorblind-mode .ql-picker,
html.bbp-colorblind-mode .ql-picker-label,
html.bbp-colorblind-mode .ql-picker-item,
html.bbp-colorblind-mode #accordion2 label,
html.bbp-colorblind-mode #accordion3 label,
html.bbp-colorblind-mode #accordion4 label,
html.bbp-colorblind-mode .question-inline-editor label,
html.bbp-colorblind-mode #accordion2 p,
html.bbp-colorblind-mode #accordion3 p,
html.bbp-colorblind-mode #accordion4 p {
color:var(--bbp-cb-text, #163747) !important;
}

html.bbp-colorblind-mode-mono .ui-accordion-content,
html.bbp-colorblind-mode-mono #accordion2 > div,
html.bbp-colorblind-mode-mono #accordion3 > div,
html.bbp-colorblind-mode-mono #accordion4 > section,
html.bbp-colorblind-mode-mono #flashcard_section,
html.bbp-colorblind-mode-mono #create_flashcard,
html.bbp-colorblind-mode-mono #current_flashcard,
html.bbp-colorblind-mode-mono #basic_flashcard_text,
html.bbp-colorblind-mode-mono #cloze_flashcard_text,
html.bbp-colorblind-mode-mono #rate_response,
html.bbp-colorblind-mode-mono #question_inline_editor,
html.bbp-colorblind-mode-mono .question-inline-editor,
html.bbp-colorblind-mode-mono .question-inline-editor-shell,
html.bbp-colorblind-mode-mono .account-question-editor,
html.bbp-colorblind-mode-mono .account-select-card,
html.bbp-colorblind-mode-mono .account-edit-footer,
html.bbp-colorblind-mode-mono #submit_section,
html.bbp-colorblind-mode-mono #questionForm,
html.bbp-colorblind-mode-mono #submit_question,
html.bbp-colorblind-mode-mono .create-question-select-row,
html.bbp-colorblind-mode-mono .question_rows,
html.bbp-colorblind-mode-mono .section_divider,
html.bbp-colorblind-mode-mono .modal-content,
html.bbp-colorblind-mode-mono .modal-body,
html.bbp-colorblind-mode-mono .editor-request-dialog {
background:#fff !important;
background-image:none !important;
color:#111 !important;
border-color:#555 !important;
box-shadow:0 8px 20px rgba(0,0,0,0.12) !important;
}

html.bbp-colorblind-mode-mono #accordion3 #submit_section .subheader,
html.bbp-colorblind-mode-mono #accordion3 #submit_section .instructions,
html.bbp-colorblind-mode-mono .question-inline-editor .account-question-editor-heading,
html.bbp-colorblind-mode-mono .account-edit-image-row .submission_input,
html.bbp-colorblind-mode-mono .question-inline-editor .account-current-image,
html.bbp-colorblind-mode-mono .save-editing-control,
html.bbp-colorblind-mode-mono #toggleImageControl,
html.bbp-colorblind-mode-mono .editor-question-tools,
html.bbp-colorblind-mode-mono .explain_box,
html.bbp-colorblind-mode-mono .ql-toolbar,
html.bbp-colorblind-mode-mono .ql-container,
html.bbp-colorblind-mode-mono .ql-editor {
background:#efefef !important;
background-image:none !important;
color:#111 !important;
border-color:#555 !important;
}

html.bbp-colorblind-mode-mono #accordion3 #submit_section .header,
html.bbp-colorblind-mode-mono #flashcard_title,
html.bbp-colorblind-mode-mono .question-inline-editor-heading,
html.bbp-colorblind-mode-mono .account-question-editor-heading,
html.bbp-colorblind-mode-mono #submit_question .header,
html.bbp-colorblind-mode-mono .flashcard-help-modal-title {
background:#111 !important;
background-image:none !important;
color:#fff !important;
border-color:#111 !important;
}

html.bbp-colorblind-mode-mono #accordion2 button,
html.bbp-colorblind-mode-mono #accordion3 button,
html.bbp-colorblind-mode-mono #accordion4 button,
html.bbp-colorblind-mode-mono #basic_copy_q,
html.bbp-colorblind-mode-mono #basic_copy_a,
html.bbp-colorblind-mode-mono #basic_add_file,
html.bbp-colorblind-mode-mono #clozecopy,
html.bbp-colorblind-mode-mono #cloze_add_file,
html.bbp-colorblind-mode-mono #clearcard,
html.bbp-colorblind-mode-mono #send_question,
html.bbp-colorblind-mode-mono #inline_update_question,
html.bbp-colorblind-mode-mono #upexpl,
html.bbp-colorblind-mode-mono #close_upexp,
html.bbp-colorblind-mode-mono .cloze,
html.bbp-colorblind-mode-mono .save-editing-message.is-visible {
background:#111 !important;
background-image:none !important;
color:#fff !important;
border-color:#111 !important;
}

/*************************************************************************************
 * Questions Page Color-Blind Small Control Overrides
 ************************************************************************************/
html.bbp-colorblind-mode #controls .colorblind-mode-control,
html.bbp-colorblind-mode #controls .colorblind-mode-segmented,
html.bbp-colorblind-mode .flashcard-mode-status,
html.bbp-colorblind-mode .difficulty-rating-panel,
html.bbp-colorblind-mode #copyright {
background:var(--bbp-cb-panel-muted, var(--bbp-cb-blue-soft)) !important;
background-image:none !important;
color:var(--bbp-cb-text, #163747) !important;
border-color:var(--bbp-cb-border, #9aa8b0) !important;
}

html.bbp-colorblind-mode #controls .colorblind-mode-control-title,
html.bbp-colorblind-mode #question_colorblind_status,
html.bbp-colorblind-mode .flashcard-mode-label,
html.bbp-colorblind-mode .difficulty-rating-label,
html.bbp-colorblind-mode .difficulty-rating-scale,
html.bbp-colorblind-mode .difficulty-rating-count,
html.bbp-colorblind-mode .difficulty-question-id,
html.bbp-colorblind-mode #rate_response,
html.bbp-colorblind-mode .question-helper-text,
html.bbp-colorblind-mode #copyright,
html.bbp-colorblind-mode #copyright a {
color:var(--bbp-cb-text, #163747) !important;
}

html.bbp-colorblind-mode #controls .colorblind-mode-segmented label,
html.bbp-colorblind-mode #qoptions .question-sort-button,
html.bbp-colorblind-mode #qoptions .ui-checkboxradio-label.question-sort-button,
html.bbp-colorblind-mode .difficulty-rate-button {
background:var(--bbp-cb-panel-bg, #fff) !important;
background-image:none !important;
color:var(--bbp-cb-text, #163747) !important;
border-color:var(--bbp-cb-border, #9aa8b0) !important;
box-shadow:none !important;
}

html.bbp-colorblind-mode #controls .colorblind-mode-segmented input:checked + label,
html.bbp-colorblind-mode #qoptions .question-sort-button:hover,
html.bbp-colorblind-mode #qoptions .question-sort-button:focus,
html.bbp-colorblind-mode #qoptions .ui-checkboxradio-label.question-sort-button:hover,
html.bbp-colorblind-mode #qoptions .ui-checkboxradio-label.question-sort-button:focus,
html.bbp-colorblind-mode #qoptions .question-sort-input:checked + .question-sort-button,
html.bbp-colorblind-mode #qoptions .question-sort-button.ui-checkboxradio-checked,
html.bbp-colorblind-mode #qoptions .ui-checkboxradio-label.question-sort-button.ui-checkboxradio-checked,
html.bbp-colorblind-mode .difficulty-rate-button:hover,
html.bbp-colorblind-mode .difficulty-rate-button:focus,
html.bbp-colorblind-mode .difficulty-rate-button.is-selected {
background:var(--bbp-cb-header-bg, var(--bbp-cb-blue)) !important;
background-image:none !important;
color:var(--bbp-cb-header-text, #fff) !important;
border-color:var(--bbp-cb-header-bg, var(--bbp-cb-blue)) !important;
box-shadow:0 0 0 3px rgba(0,0,0,0.12) !important;
}

html.bbp-colorblind-mode .flashcard-mode-slider {
background:var(--bbp-cb-panel-bg, #fff) !important;
background-image:none !important;
border-color:var(--bbp-cb-border, #9aa8b0) !important;
}

html.bbp-colorblind-mode .flashcard-mode-slider::after {
background:var(--bbp-cb-text, #163747) !important;
}

html.bbp-colorblind-mode .flashcard-mode-switch input:checked + .flashcard-mode-slider,
html.bbp-colorblind-mode .question-focus-explanation-switch input:checked + .flashcard-mode-slider {
background:var(--bbp-cb-header-bg, var(--bbp-cb-blue)) !important;
border-color:var(--bbp-cb-header-bg, var(--bbp-cb-blue)) !important;
}

html.bbp-colorblind-mode .flashcard-mode-switch input:checked + .flashcard-mode-slider::after,
html.bbp-colorblind-mode .question-focus-explanation-switch input:checked + .flashcard-mode-slider::after {
background:var(--bbp-cb-header-text, #fff) !important;
}

html.bbp-colorblind-mode input[type="checkbox"],
html.bbp-colorblind-mode input[type="radio"] {
accent-color:var(--bbp-cb-header-bg, var(--bbp-cb-blue));
}

html.bbp-colorblind-mode .save-editing-box,
html.bbp-colorblind-mode .flashcard-eligible-box {
background:var(--bbp-cb-panel-bg, #fff) !important;
border-color:var(--bbp-cb-border, #9aa8b0) !important;
}

html.bbp-colorblind-mode .save-editing-control input:checked + .save-editing-box,
html.bbp-colorblind-mode .flashcard-eligible-control input:checked + .flashcard-eligible-box {
background:var(--bbp-cb-header-bg, var(--bbp-cb-blue)) !important;
border-color:var(--bbp-cb-header-bg, var(--bbp-cb-blue)) !important;
}

html.bbp-colorblind-mode .author-status-icon {
display:inline-flex;
align-items:center;
justify-content:center;
vertical-align:middle;
margin:0 0.18rem;
font-size:1.08rem;
line-height:1;
color:var(--bbp-cb-text, #163747) !important;
}

html.bbp-colorblind-mode .ql-toolbar button,
html.bbp-colorblind-mode .ql-toolbar .ql-picker-label,
html.bbp-colorblind-mode .ql-toolbar .ql-picker-item {
background:transparent !important;
background-image:none !important;
color:var(--bbp-cb-text, #163747) !important;
border-color:transparent !important;
box-shadow:none !important;
}

html.bbp-colorblind-mode .ql-toolbar button:hover,
html.bbp-colorblind-mode .ql-toolbar button:focus,
html.bbp-colorblind-mode .ql-toolbar .ql-picker-label:hover,
html.bbp-colorblind-mode .ql-toolbar .ql-picker-label:focus {
background:var(--bbp-cb-panel-bg, #fff) !important;
border-color:var(--bbp-cb-border, #9aa8b0) !important;
}

html.bbp-colorblind-mode .ql-toolbar .ql-stroke {
stroke:var(--bbp-cb-text, #163747) !important;
}

html.bbp-colorblind-mode .ql-toolbar .ql-fill {
fill:var(--bbp-cb-text, #163747) !important;
}

html.bbp-colorblind-mode-mono #controls .colorblind-mode-control,
html.bbp-colorblind-mode-mono #controls .colorblind-mode-segmented,
html.bbp-colorblind-mode-mono .flashcard-mode-status,
html.bbp-colorblind-mode-mono .difficulty-rating-panel,
html.bbp-colorblind-mode-mono #copyright {
background:#efefef !important;
background-image:none !important;
color:#111 !important;
border-color:#555 !important;
}

html.bbp-colorblind-mode-mono #controls .colorblind-mode-control-title,
html.bbp-colorblind-mode-mono #question_colorblind_status,
html.bbp-colorblind-mode-mono .flashcard-mode-label,
html.bbp-colorblind-mode-mono .difficulty-rating-label,
html.bbp-colorblind-mode-mono .difficulty-rating-scale,
html.bbp-colorblind-mode-mono .difficulty-rating-count,
html.bbp-colorblind-mode-mono .difficulty-question-id,
html.bbp-colorblind-mode-mono #rate_response,
html.bbp-colorblind-mode-mono .question-helper-text,
html.bbp-colorblind-mode-mono #copyright,
html.bbp-colorblind-mode-mono #copyright a {
color:#111 !important;
}

html.bbp-colorblind-mode-mono #controls .colorblind-mode-segmented label,
html.bbp-colorblind-mode-mono #qoptions .question-sort-button,
html.bbp-colorblind-mode-mono #qoptions .ui-checkboxradio-label.question-sort-button,
html.bbp-colorblind-mode-mono .difficulty-rate-button {
background:#fff !important;
background-image:none !important;
color:#111 !important;
border-color:#555 !important;
}

html.bbp-colorblind-mode-mono #controls .colorblind-mode-segmented input:checked + label,
html.bbp-colorblind-mode-mono #qoptions .question-sort-button:hover,
html.bbp-colorblind-mode-mono #qoptions .question-sort-button:focus,
html.bbp-colorblind-mode-mono #qoptions .ui-checkboxradio-label.question-sort-button:hover,
html.bbp-colorblind-mode-mono #qoptions .ui-checkboxradio-label.question-sort-button:focus,
html.bbp-colorblind-mode-mono #qoptions .question-sort-input:checked + .question-sort-button,
html.bbp-colorblind-mode-mono #qoptions .question-sort-button.ui-checkboxradio-checked,
html.bbp-colorblind-mode-mono #qoptions .ui-checkboxradio-label.question-sort-button.ui-checkboxradio-checked,
html.bbp-colorblind-mode-mono .difficulty-rate-button:hover,
html.bbp-colorblind-mode-mono .difficulty-rate-button:focus,
html.bbp-colorblind-mode-mono .difficulty-rate-button.is-selected {
background:#111 !important;
background-image:none !important;
color:#fff !important;
border-color:#111 !important;
box-shadow:0 0 0 3px rgba(0,0,0,0.18) !important;
}

html.bbp-colorblind-mode-mono .flashcard-mode-slider {
background:#fff !important;
border-color:#555 !important;
}

html.bbp-colorblind-mode-mono .flashcard-mode-slider::after {
background:#111 !important;
}

html.bbp-colorblind-mode-mono .flashcard-mode-switch input:checked + .flashcard-mode-slider,
html.bbp-colorblind-mode-mono .question-focus-explanation-switch input:checked + .flashcard-mode-slider {
background:#111 !important;
border-color:#111 !important;
}

html.bbp-colorblind-mode-mono .flashcard-mode-switch input:checked + .flashcard-mode-slider::after,
html.bbp-colorblind-mode-mono .question-focus-explanation-switch input:checked + .flashcard-mode-slider::after {
background:#fff !important;
}

html.bbp-colorblind-mode-mono input[type="checkbox"],
html.bbp-colorblind-mode-mono input[type="radio"] {
accent-color:#111;
}

html.bbp-colorblind-mode-mono .save-editing-box,
html.bbp-colorblind-mode-mono .flashcard-eligible-box {
background:#fff !important;
border-color:#555 !important;
}

html.bbp-colorblind-mode-mono .save-editing-control input:checked + .save-editing-box,
html.bbp-colorblind-mode-mono .flashcard-eligible-control input:checked + .flashcard-eligible-box {
background:#111 !important;
border-color:#111 !important;
}

html.bbp-colorblind-mode-mono .author-status-icon {
color:#111 !important;
}

html.bbp-colorblind-mode-mono .ql-toolbar button,
html.bbp-colorblind-mode-mono .ql-toolbar .ql-picker-label,
html.bbp-colorblind-mode-mono .ql-toolbar .ql-picker-item {
background:transparent !important;
color:#111 !important;
border-color:transparent !important;
box-shadow:none !important;
}

html.bbp-colorblind-mode-mono .ql-toolbar button:hover,
html.bbp-colorblind-mode-mono .ql-toolbar button:focus,
html.bbp-colorblind-mode-mono .ql-toolbar .ql-picker-label:hover,
html.bbp-colorblind-mode-mono .ql-toolbar .ql-picker-label:focus {
background:#fff !important;
border-color:#555 !important;
}

html.bbp-colorblind-mode-mono .ql-toolbar .ql-stroke {
stroke:#111 !important;
}

html.bbp-colorblind-mode-mono .ql-toolbar .ql-fill {
fill:#111 !important;
}

html.bbp-colorblind-mode #accordion3 .ql-toolbar button,
html.bbp-colorblind-mode #accordion4 .ql-toolbar button,
html.bbp-colorblind-mode #submit_explanation .ql-toolbar button,
html.bbp-colorblind-mode .explain_box .ql-toolbar button,
html.bbp-colorblind-mode .question-inline-editor .ql-toolbar button {
background:transparent !important;
background-image:none !important;
color:var(--bbp-cb-text, #163747) !important;
border-color:transparent !important;
box-shadow:none !important;
}

html.bbp-colorblind-mode #accordion3 .ql-toolbar button:hover,
html.bbp-colorblind-mode #accordion3 .ql-toolbar button:focus,
html.bbp-colorblind-mode #accordion4 .ql-toolbar button:hover,
html.bbp-colorblind-mode #accordion4 .ql-toolbar button:focus,
html.bbp-colorblind-mode #submit_explanation .ql-toolbar button:hover,
html.bbp-colorblind-mode #submit_explanation .ql-toolbar button:focus,
html.bbp-colorblind-mode .explain_box .ql-toolbar button:hover,
html.bbp-colorblind-mode .explain_box .ql-toolbar button:focus,
html.bbp-colorblind-mode .question-inline-editor .ql-toolbar button:hover,
html.bbp-colorblind-mode .question-inline-editor .ql-toolbar button:focus {
background:var(--bbp-cb-panel-bg, #fff) !important;
border-color:var(--bbp-cb-border, #9aa8b0) !important;
}

html.bbp-colorblind-mode-mono #accordion3 .ql-toolbar button,
html.bbp-colorblind-mode-mono #accordion4 .ql-toolbar button,
html.bbp-colorblind-mode-mono #submit_explanation .ql-toolbar button,
html.bbp-colorblind-mode-mono .explain_box .ql-toolbar button,
html.bbp-colorblind-mode-mono .question-inline-editor .ql-toolbar button {
background:transparent !important;
background-image:none !important;
color:#111 !important;
border-color:transparent !important;
box-shadow:none !important;
}

html.bbp-colorblind-mode-mono #accordion3 .ql-toolbar button:hover,
html.bbp-colorblind-mode-mono #accordion3 .ql-toolbar button:focus,
html.bbp-colorblind-mode-mono #accordion4 .ql-toolbar button:hover,
html.bbp-colorblind-mode-mono #accordion4 .ql-toolbar button:focus,
html.bbp-colorblind-mode-mono #submit_explanation .ql-toolbar button:hover,
html.bbp-colorblind-mode-mono #submit_explanation .ql-toolbar button:focus,
html.bbp-colorblind-mode-mono .explain_box .ql-toolbar button:hover,
html.bbp-colorblind-mode-mono .explain_box .ql-toolbar button:focus,
html.bbp-colorblind-mode-mono .question-inline-editor .ql-toolbar button:hover,
html.bbp-colorblind-mode-mono .question-inline-editor .ql-toolbar button:focus {
background:#fff !important;
border-color:#555 !important;
}

html.bbp-colorblind-mode .flashcard-eligible-control,
html.bbp-colorblind-mode .flashcard-eligible-control span,
html.bbp-colorblind-mode .flashcard-filter-panel label,
html.bbp-colorblind-mode .flashcard-filter-panel label span {
color:var(--bbp-cb-text, #163747) !important;
}

html.bbp-colorblind-mode-mono .flashcard-eligible-control,
html.bbp-colorblind-mode-mono .flashcard-eligible-control span,
html.bbp-colorblind-mode-mono .flashcard-filter-panel label,
html.bbp-colorblind-mode-mono .flashcard-filter-panel label span {
color:#111 !important;
}

html.bbp-colorblind-mode .question-focus-button,
html.bbp-colorblind-mode .question-focus-button:hover,
html.bbp-colorblind-mode .question-focus-button:focus,
html.bbp-colorblind-mode .question-focus-button.is-on {
background:var(--bbp-cb-header-bg, var(--bbp-cb-blue)) !important;
background-image:none !important;
color:var(--bbp-cb-header-text, #fff) !important;
border-color:var(--bbp-cb-header-bg, var(--bbp-cb-blue)) !important;
outline-color:var(--bbp-cb-border, #9aa8b0) !important;
box-shadow:0 3px 9px rgba(22,55,71,0.16) !important;
}

html.bbp-colorblind-mode .question-view-status-icon,
html.bbp-colorblind-mode .question-view-status-icon.is-new,
html.bbp-colorblind-mode .question-view-status-icon.is-viewed {
color:var(--bbp-cb-text, #163747) !important;
}

html.bbp-colorblind-mode .question-view-status-icon.is-viewed {
font-variation-settings:'FILL' 0,'wght' 700,'GRAD' 0,'opsz' 24;
}

html.bbp-colorblind-mode .question-inline-editor .question-inline-editor-heading h3,
html.bbp-colorblind-mode .question-inline-editor .account-question-editor-heading h3,
html.bbp-colorblind-mode .question-inline-editor #inline-edit-question-subheader {
color:var(--bbp-cb-header-text, #fff) !important;
}

html.bbp-colorblind-mode-mono .question-focus-button,
html.bbp-colorblind-mode-mono .question-focus-button:hover,
html.bbp-colorblind-mode-mono .question-focus-button:focus,
html.bbp-colorblind-mode-mono .question-focus-button.is-on {
background:#111 !important;
background-image:none !important;
color:#fff !important;
border-color:#111 !important;
outline-color:#555 !important;
}

html.bbp-colorblind-mode-mono .question-view-status-icon,
html.bbp-colorblind-mode-mono .question-view-status-icon.is-new,
html.bbp-colorblind-mode-mono .question-view-status-icon.is-viewed {
color:#111 !important;
}

html.bbp-colorblind-mode-mono .question-inline-editor .question-inline-editor-heading h3,
html.bbp-colorblind-mode-mono .question-inline-editor .account-question-editor-heading h3,
html.bbp-colorblind-mode-mono .question-inline-editor #inline-edit-question-subheader {
color:#fff !important;
}

html.bbp-colorblind-mode select,
html.bbp-colorblind-mode option,
html.bbp-colorblind-mode optgroup {
background:var(--bbp-cb-input-bg, #fff) !important;
color:var(--bbp-cb-text, #163747) !important;
}

html.bbp-colorblind-mode option:hover,
html.bbp-colorblind-mode option:focus,
html.bbp-colorblind-mode option:checked,
html.bbp-colorblind-mode option:active {
background:var(--bbp-cb-header-bg, var(--bbp-cb-blue)) !important;
background-color:var(--bbp-cb-header-bg, var(--bbp-cb-blue)) !important;
color:var(--bbp-cb-header-text, #fff) !important;
box-shadow:0 0 0 100vmax var(--bbp-cb-header-bg, var(--bbp-cb-blue)) inset !important;
}

html.bbp-colorblind-mode-mono select,
html.bbp-colorblind-mode-mono option,
html.bbp-colorblind-mode-mono optgroup {
background:#fff !important;
color:#111 !important;
}

html.bbp-colorblind-mode-mono option:hover,
html.bbp-colorblind-mode-mono option:focus,
html.bbp-colorblind-mode-mono option:checked,
html.bbp-colorblind-mode-mono option:active {
background:#111 !important;
background-color:#111 !important;
color:#fff !important;
box-shadow:0 0 0 100vmax #111 inset !important;
}

/*************************************************************************************
 * Questions Page Custom Select Menus
 ************************************************************************************/
.bbp-has-custom-select:after {
display:none !important;
}

.ui-selectmenu-button.bbp-question-selectmenu-button,
.ui-selectmenu-button.ui-button {
display:flex !important;
align-items:center;
justify-content:space-between;
width:100% !important;
min-height:2rem;
box-sizing:border-box;
border:1px solid rgba(82,152,188,0.36);
border-radius:8px;
background:#fff;
color:#163747;
font:inherit;
font-weight:800;
line-height:1.2;
padding:0.36rem 0.7rem;
box-shadow:none;
}

.ui-selectmenu-button.ui-button:hover,
.ui-selectmenu-button.ui-button:focus {
border-color:#5298bc;
background:#eef7fb;
color:#163747;
outline:3px solid rgba(82,152,188,0.15);
outline-offset:2px;
}

.ui-selectmenu-button .ui-selectmenu-text {
display:block;
min-width:0;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}

.ui-selectmenu-button .ui-selectmenu-icon {
flex:0 0 auto;
margin-left:0.5rem;
}

.bbp-question-selectmenu-menu,
.ui-selectmenu-menu {
z-index:10050 !important;
}

.bbp-question-selectmenu-menu .ui-menu,
.ui-selectmenu-menu .ui-menu {
max-height:18rem;
overflow-y:auto;
overflow-x:hidden;
border:1px solid rgba(82,152,188,0.36);
border-radius:8px;
background:#fff;
box-shadow:0 10px 24px rgba(22,55,71,0.18);
padding:0.25rem;
}

.bbp-question-selectmenu-menu .ui-menu-item-wrapper,
.ui-selectmenu-menu .ui-menu-item-wrapper {
border:1px solid transparent;
border-radius:6px;
color:#163747;
font-weight:800;
padding:0.4rem 0.55rem;
}

.bbp-question-selectmenu-menu .ui-menu-item-wrapper.ui-state-active,
.bbp-question-selectmenu-menu .ui-menu-item-wrapper.ui-state-focus,
.bbp-question-selectmenu-menu .ui-menu-item-wrapper:hover,
.ui-selectmenu-menu .ui-menu-item-wrapper.ui-state-active,
.ui-selectmenu-menu .ui-menu-item-wrapper.ui-state-focus,
.ui-selectmenu-menu .ui-menu-item-wrapper:hover {
border-color:rgba(82,152,188,0.32);
background:#163747;
color:#fff;
}

html.bbp-colorblind-mode .ui-selectmenu-button.ui-button {
background:var(--bbp-cb-input-bg, #fff) !important;
background-image:none !important;
color:var(--bbp-cb-text, #163747) !important;
border-color:var(--bbp-cb-border, #9aa8b0) !important;
box-shadow:none !important;
}

html.bbp-colorblind-mode .ui-selectmenu-button.ui-button:hover,
html.bbp-colorblind-mode .ui-selectmenu-button.ui-button:focus {
background:var(--bbp-cb-panel-muted, var(--bbp-cb-blue-soft)) !important;
color:var(--bbp-cb-text, #163747) !important;
border-color:var(--bbp-cb-header-bg, var(--bbp-cb-blue)) !important;
outline-color:var(--bbp-cb-border, #9aa8b0) !important;
}

html.bbp-colorblind-mode .ui-selectmenu-button .ui-selectmenu-icon {
filter:grayscale(1);
}

html.bbp-colorblind-mode .bbp-question-selectmenu-menu .ui-menu,
html.bbp-colorblind-mode .ui-selectmenu-menu .ui-menu {
background:var(--bbp-cb-panel-bg, #fff) !important;
border-color:var(--bbp-cb-border, #9aa8b0) !important;
}

html.bbp-colorblind-mode .bbp-question-selectmenu-menu .ui-menu-item-wrapper,
html.bbp-colorblind-mode .ui-selectmenu-menu .ui-menu-item-wrapper {
background:var(--bbp-cb-panel-bg, #fff) !important;
color:var(--bbp-cb-text, #163747) !important;
border-color:transparent !important;
}

html.bbp-colorblind-mode .bbp-question-selectmenu-menu .ui-menu-item-wrapper.ui-state-active,
html.bbp-colorblind-mode .bbp-question-selectmenu-menu .ui-menu-item-wrapper.ui-state-focus,
html.bbp-colorblind-mode .bbp-question-selectmenu-menu .ui-menu-item-wrapper:hover,
html.bbp-colorblind-mode .ui-selectmenu-menu .ui-menu-item-wrapper.ui-state-active,
html.bbp-colorblind-mode .ui-selectmenu-menu .ui-menu-item-wrapper.ui-state-focus,
html.bbp-colorblind-mode .ui-selectmenu-menu .ui-menu-item-wrapper:hover {
background:var(--bbp-cb-header-bg, var(--bbp-cb-blue)) !important;
background-image:none !important;
color:var(--bbp-cb-header-text, #fff) !important;
border-color:var(--bbp-cb-header-bg, var(--bbp-cb-blue)) !important;
}

html.bbp-colorblind-mode-mono .ui-selectmenu-button.ui-button {
background:#fff !important;
color:#111 !important;
border-color:#555 !important;
}

html.bbp-colorblind-mode-mono .ui-selectmenu-button.ui-button:hover,
html.bbp-colorblind-mode-mono .ui-selectmenu-button.ui-button:focus {
background:#efefef !important;
color:#111 !important;
border-color:#111 !important;
outline-color:#555 !important;
}

html.bbp-colorblind-mode-mono .bbp-question-selectmenu-menu .ui-menu,
html.bbp-colorblind-mode-mono .ui-selectmenu-menu .ui-menu {
background:#fff !important;
border-color:#555 !important;
}

html.bbp-colorblind-mode-mono .bbp-question-selectmenu-menu .ui-menu-item-wrapper,
html.bbp-colorblind-mode-mono .ui-selectmenu-menu .ui-menu-item-wrapper {
background:#fff !important;
color:#111 !important;
border-color:transparent !important;
}

html.bbp-colorblind-mode-mono .bbp-question-selectmenu-menu .ui-menu-item-wrapper.ui-state-active,
html.bbp-colorblind-mode-mono .bbp-question-selectmenu-menu .ui-menu-item-wrapper.ui-state-focus,
html.bbp-colorblind-mode-mono .bbp-question-selectmenu-menu .ui-menu-item-wrapper:hover,
html.bbp-colorblind-mode-mono .ui-selectmenu-menu .ui-menu-item-wrapper.ui-state-active,
html.bbp-colorblind-mode-mono .ui-selectmenu-menu .ui-menu-item-wrapper.ui-state-focus,
html.bbp-colorblind-mode-mono .ui-selectmenu-menu .ui-menu-item-wrapper:hover {
background:#111 !important;
background-image:none !important;
color:#fff !important;
border-color:#111 !important;
}

/*************************************************************************************
 * Questions Page Plain Custom Selects
 ************************************************************************************/
.bbp-native-select-hidden {
position:absolute !important;
width:1px !important;
height:1px !important;
opacity:0 !important;
pointer-events:none !important;
}

.bbp-custom-select {
position:relative;
width:100%;
}

.bbp-custom-select-button {
display:flex;
align-items:center;
justify-content:space-between;
gap:0.45rem;
width:100%;
min-height:2.25rem;
box-sizing:border-box;
border:1px solid rgba(82,152,188,0.36);
border-radius:8px;
background:#fff;
color:#163747;
font:inherit;
font-weight:850;
line-height:1.2;
padding:0.38rem 0.68rem;
text-align:left;
box-shadow:none;
cursor:pointer;
}

.bbp-custom-select-button:hover,
.bbp-custom-select-button:focus {
border-color:#5298bc;
background:#eef7fb;
outline:3px solid rgba(82,152,188,0.15);
outline-offset:2px;
}

.bbp-custom-select-button:disabled,
.bbp-custom-select-button.is-disabled {
cursor:not-allowed;
opacity:0.68;
background:#f4f8fa;
color:#6b8794;
}

.bbp-custom-select-text {
min-width:0;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}

.bbp-custom-select-icon {
flex:0 0 auto;
font-size:1.15rem;
line-height:1;
}

.bbp-custom-select-menu {
position:absolute;
top:calc(100% + 0.25rem);
left:0;
right:0;
z-index:10060;
display:grid;
gap:0.18rem;
max-height:16rem;
overflow:auto;
border:1px solid rgba(82,152,188,0.36);
border-radius:8px;
background:#fff;
box-shadow:0 10px 24px rgba(22,55,71,0.18);
padding:0.25rem;
}

.bbp-custom-select-menu[hidden] {
display:none;
}

.bbp-custom-select-option {
display:block;
width:100%;
box-sizing:border-box;
border:1px solid transparent;
border-radius:6px;
background:#fff;
color:#163747;
font:inherit;
font-weight:800;
line-height:1.2;
padding:0.42rem 0.55rem;
text-align:left;
cursor:pointer;
}

.bbp-custom-select-option:hover,
.bbp-custom-select-option:focus,
.bbp-custom-select-option.is-selected {
border-color:rgba(82,152,188,0.32);
background:#163747;
color:#fff;
outline:none;
}

html.bbp-colorblind-mode .bbp-custom-select-button {
background:var(--bbp-cb-input-bg, #fff) !important;
color:var(--bbp-cb-text, #163747) !important;
border-color:var(--bbp-cb-border, #9aa8b0) !important;
}

html.bbp-colorblind-mode .bbp-custom-select-button:hover,
html.bbp-colorblind-mode .bbp-custom-select-button:focus {
background:var(--bbp-cb-panel-muted, var(--bbp-cb-blue-soft)) !important;
color:var(--bbp-cb-text, #163747) !important;
border-color:var(--bbp-cb-header-bg, var(--bbp-cb-blue)) !important;
outline-color:var(--bbp-cb-border, #9aa8b0) !important;
}

html.bbp-colorblind-mode .bbp-custom-select-button:disabled,
html.bbp-colorblind-mode .bbp-custom-select-button.is-disabled {
background:var(--bbp-cb-panel-muted, var(--bbp-cb-blue-soft)) !important;
color:var(--bbp-cb-text, #163747) !important;
opacity:0.62;
}

html.bbp-colorblind-mode .bbp-custom-select-menu {
background:var(--bbp-cb-panel-bg, #fff) !important;
border-color:var(--bbp-cb-border, #9aa8b0) !important;
}

html.bbp-colorblind-mode .bbp-custom-select-option {
background:var(--bbp-cb-panel-bg, #fff) !important;
color:var(--bbp-cb-text, #163747) !important;
border-color:transparent !important;
}

html.bbp-colorblind-mode .bbp-custom-select-option:hover,
html.bbp-colorblind-mode .bbp-custom-select-option:focus,
html.bbp-colorblind-mode .bbp-custom-select-option.is-selected {
background:var(--bbp-cb-header-bg, var(--bbp-cb-blue)) !important;
color:var(--bbp-cb-header-text, #fff) !important;
border-color:var(--bbp-cb-header-bg, var(--bbp-cb-blue)) !important;
}

html.bbp-colorblind-mode-mono .bbp-custom-select-button {
background:#fff !important;
color:#111 !important;
border-color:#555 !important;
}

html.bbp-colorblind-mode-mono .bbp-custom-select-button:hover,
html.bbp-colorblind-mode-mono .bbp-custom-select-button:focus {
background:#efefef !important;
color:#111 !important;
border-color:#111 !important;
outline-color:#555 !important;
}

html.bbp-colorblind-mode-mono .bbp-custom-select-button:disabled,
html.bbp-colorblind-mode-mono .bbp-custom-select-button.is-disabled {
background:#efefef !important;
color:#111 !important;
opacity:0.62;
}

html.bbp-colorblind-mode-mono .bbp-custom-select-menu {
background:#fff !important;
border-color:#555 !important;
}

html.bbp-colorblind-mode-mono .bbp-custom-select-option {
background:#fff !important;
color:#111 !important;
border-color:transparent !important;
}

html.bbp-colorblind-mode-mono .bbp-custom-select-option:hover,
html.bbp-colorblind-mode-mono .bbp-custom-select-option:focus,
html.bbp-colorblind-mode-mono .bbp-custom-select-option.is-selected {
background:#111 !important;
color:#fff !important;
border-color:#111 !important;
}

/*************************************************************************************
 * Questions Page Color-Blind Question Controls
 ************************************************************************************/
html.bbp-colorblind-mode #question_controls {
background:var(--bbp-cb-panel-bg, #fff) !important;
background-image:none !important;
color:var(--bbp-cb-text, #163747) !important;
border-color:var(--bbp-cb-border, #9aa8b0) !important;
box-shadow:0 8px 20px rgba(22,55,71,0.12) !important;
}

html.bbp-colorblind-mode #question_controls #control-grid-container .control-grid-item,
html.bbp-colorblind-mode #question_controls .question-score-card,
html.bbp-colorblind-mode #question_controls .question-status-card,
html.bbp-colorblind-mode #question_controls .question-filter-pill,
html.bbp-colorblind-mode #question_controls .question-meta-row,
html.bbp-colorblind-mode #question_controls .question-copy-actions,
html.bbp-colorblind-mode #question_controls .difficulty-rating-panel {
background:var(--bbp-cb-panel-muted, var(--bbp-cb-blue-soft)) !important;
background-image:none !important;
color:var(--bbp-cb-text, #163747) !important;
border-color:var(--bbp-cb-border, #9aa8b0) !important;
box-shadow:0 4px 12px rgba(22,55,71,0.08) !important;
}

html.bbp-colorblind-mode #question_controls span,
html.bbp-colorblind-mode #question_controls strong,
html.bbp-colorblind-mode #question_controls a,
html.bbp-colorblind-mode #question_controls label {
color:var(--bbp-cb-text, #163747) !important;
}

html.bbp-colorblind-mode #question_controls .subscription-status-pill,
html.bbp-colorblind-mode #question_controls .subscription-status-pill a,
html.bbp-colorblind-mode #question_controls #calculated_score {
background:var(--bbp-cb-header-bg, var(--bbp-cb-blue)) !important;
background-image:none !important;
color:var(--bbp-cb-header-text, #fff) !important;
border-color:var(--bbp-cb-header-bg, var(--bbp-cb-blue)) !important;
}

html.bbp-colorblind-mode #question_controls .question-copy-button {
background:var(--bbp-cb-panel-bg, #fff) !important;
background-image:none !important;
color:var(--bbp-cb-text, #163747) !important;
border-color:var(--bbp-cb-border, #9aa8b0) !important;
box-shadow:none !important;
}

html.bbp-colorblind-mode #question_controls .question-copy-button:hover,
html.bbp-colorblind-mode #question_controls .question-copy-button:focus {
background:var(--bbp-cb-header-bg, var(--bbp-cb-blue)) !important;
color:var(--bbp-cb-header-text, #fff) !important;
border-color:var(--bbp-cb-header-bg, var(--bbp-cb-blue)) !important;
}

html.bbp-colorblind-mode #question_controls .question-copy-button:hover span,
html.bbp-colorblind-mode #question_controls .question-copy-button:focus span {
color:var(--bbp-cb-header-text, #fff) !important;
}

html.bbp-colorblind-mode-mono #question_controls {
background:#fff !important;
background-image:none !important;
color:#111 !important;
border-color:#555 !important;
box-shadow:0 8px 20px rgba(0,0,0,0.12) !important;
}

html.bbp-colorblind-mode-mono #question_controls #control-grid-container .control-grid-item,
html.bbp-colorblind-mode-mono #question_controls .question-score-card,
html.bbp-colorblind-mode-mono #question_controls .question-status-card,
html.bbp-colorblind-mode-mono #question_controls .question-filter-pill,
html.bbp-colorblind-mode-mono #question_controls .question-meta-row,
html.bbp-colorblind-mode-mono #question_controls .question-copy-actions,
html.bbp-colorblind-mode-mono #question_controls .difficulty-rating-panel {
background:#efefef !important;
background-image:none !important;
color:#111 !important;
border-color:#555 !important;
box-shadow:0 4px 12px rgba(0,0,0,0.08) !important;
}

html.bbp-colorblind-mode-mono #question_controls span,
html.bbp-colorblind-mode-mono #question_controls strong,
html.bbp-colorblind-mode-mono #question_controls a,
html.bbp-colorblind-mode-mono #question_controls label {
color:#111 !important;
}

html.bbp-colorblind-mode-mono #question_controls .subscription-status-pill,
html.bbp-colorblind-mode-mono #question_controls .subscription-status-pill a,
html.bbp-colorblind-mode-mono #question_controls #calculated_score {
background:#111 !important;
background-image:none !important;
color:#fff !important;
border-color:#111 !important;
}

html.bbp-colorblind-mode-mono #question_controls .question-copy-button {
background:#fff !important;
background-image:none !important;
color:#111 !important;
border-color:#555 !important;
box-shadow:none !important;
}

html.bbp-colorblind-mode-mono #question_controls .question-copy-button:hover,
html.bbp-colorblind-mode-mono #question_controls .question-copy-button:focus {
background:#111 !important;
color:#fff !important;
border-color:#111 !important;
}

html.bbp-colorblind-mode-mono #question_controls .question-copy-button:hover span,
html.bbp-colorblind-mode-mono #question_controls .question-copy-button:focus span {
color:#fff !important;
}

html.bbp-colorblind-mode #question_controls .filter-option span,
html.bbp-colorblind-mode #question_controls .reset-pill,
html.bbp-colorblind-mode #question_controls .hud-pill,
html.bbp-colorblind-mode #question_controls #open-calculator.hud-pill,
html.bbp-colorblind-mode #question_controls #timer.hud-pill {
background:var(--bbp-cb-panel-bg, #fff) !important;
background-image:none !important;
color:var(--bbp-cb-text, #163747) !important;
border-color:var(--bbp-cb-border, #9aa8b0) !important;
box-shadow:none !important;
}

html.bbp-colorblind-mode #question_controls .filter-option:hover span,
html.bbp-colorblind-mode #question_controls .filter-option:focus-within span,
html.bbp-colorblind-mode #question_controls .filter-option input:checked + span,
html.bbp-colorblind-mode #question_controls .reset-pill:hover,
html.bbp-colorblind-mode #question_controls .reset-pill:focus,
html.bbp-colorblind-mode #question_controls .hud-pill:hover,
html.bbp-colorblind-mode #question_controls .hud-pill:focus,
html.bbp-colorblind-mode #question_controls #open-calculator.hud-pill:hover,
html.bbp-colorblind-mode #question_controls #open-calculator.hud-pill:focus,
html.bbp-colorblind-mode #question_controls #timer.hud-pill:hover,
html.bbp-colorblind-mode #question_controls #timer.hud-pill:focus,
html.bbp-colorblind-mode #question_controls #timer.hud-pill:active {
background:var(--bbp-cb-header-bg, var(--bbp-cb-blue)) !important;
background-image:none !important;
color:var(--bbp-cb-header-text, #fff) !important;
border-color:var(--bbp-cb-header-bg, var(--bbp-cb-blue)) !important;
box-shadow:0 3px 9px rgba(22,55,71,0.16) !important;
}

html.bbp-colorblind-mode #question_controls .filter-option:hover span *,
html.bbp-colorblind-mode #question_controls .filter-option:focus-within span *,
html.bbp-colorblind-mode #question_controls .filter-option input:checked + span *,
html.bbp-colorblind-mode #question_controls .reset-pill:hover *,
html.bbp-colorblind-mode #question_controls .reset-pill:focus *,
html.bbp-colorblind-mode #question_controls .hud-pill:hover *,
html.bbp-colorblind-mode #question_controls .hud-pill:focus *,
html.bbp-colorblind-mode #question_controls #open-calculator.hud-pill:hover *,
html.bbp-colorblind-mode #question_controls #open-calculator.hud-pill:focus *,
html.bbp-colorblind-mode #question_controls #timer.hud-pill:hover *,
html.bbp-colorblind-mode #question_controls #timer.hud-pill:focus * {
color:var(--bbp-cb-header-text, #fff) !important;
}

html.bbp-colorblind-mode #calculator-popup,
html.bbp-colorblind-mode #calculator,
html.bbp-colorblind-mode #display {
background:var(--bbp-cb-panel-bg, #fff) !important;
background-image:none !important;
color:var(--bbp-cb-text, #163747) !important;
border-color:var(--bbp-cb-border, #9aa8b0) !important;
}

html.bbp-colorblind-mode #calculator .btn,
html.bbp-colorblind-mode #calculator-popup .close-btn {
background:var(--bbp-cb-panel-muted, var(--bbp-cb-blue-soft)) !important;
background-image:none !important;
color:var(--bbp-cb-text, #163747) !important;
border-color:var(--bbp-cb-border, #9aa8b0) !important;
}

html.bbp-colorblind-mode #calculator .btn:hover,
html.bbp-colorblind-mode #calculator .btn:focus,
html.bbp-colorblind-mode #calculator-popup .close-btn:hover,
html.bbp-colorblind-mode #calculator-popup .close-btn:focus {
background:var(--bbp-cb-header-bg, var(--bbp-cb-blue)) !important;
color:var(--bbp-cb-header-text, #fff) !important;
border-color:var(--bbp-cb-header-bg, var(--bbp-cb-blue)) !important;
}

html.bbp-colorblind-mode-mono #question_controls .filter-option span,
html.bbp-colorblind-mode-mono #question_controls .reset-pill,
html.bbp-colorblind-mode-mono #question_controls .hud-pill,
html.bbp-colorblind-mode-mono #question_controls #open-calculator.hud-pill,
html.bbp-colorblind-mode-mono #question_controls #timer.hud-pill {
background:#fff !important;
background-image:none !important;
color:#111 !important;
border-color:#555 !important;
box-shadow:none !important;
}

html.bbp-colorblind-mode-mono #question_controls .filter-option:hover span,
html.bbp-colorblind-mode-mono #question_controls .filter-option:focus-within span,
html.bbp-colorblind-mode-mono #question_controls .filter-option input:checked + span,
html.bbp-colorblind-mode-mono #question_controls .reset-pill:hover,
html.bbp-colorblind-mode-mono #question_controls .reset-pill:focus,
html.bbp-colorblind-mode-mono #question_controls .hud-pill:hover,
html.bbp-colorblind-mode-mono #question_controls .hud-pill:focus,
html.bbp-colorblind-mode-mono #question_controls #open-calculator.hud-pill:hover,
html.bbp-colorblind-mode-mono #question_controls #open-calculator.hud-pill:focus,
html.bbp-colorblind-mode-mono #question_controls #timer.hud-pill:hover,
html.bbp-colorblind-mode-mono #question_controls #timer.hud-pill:focus,
html.bbp-colorblind-mode-mono #question_controls #timer.hud-pill:active {
background:#111 !important;
background-image:none !important;
color:#fff !important;
border-color:#111 !important;
box-shadow:0 3px 9px rgba(0,0,0,0.16) !important;
}

html.bbp-colorblind-mode-mono #question_controls .filter-option:hover span *,
html.bbp-colorblind-mode-mono #question_controls .filter-option:focus-within span *,
html.bbp-colorblind-mode-mono #question_controls .filter-option input:checked + span *,
html.bbp-colorblind-mode-mono #question_controls .reset-pill:hover *,
html.bbp-colorblind-mode-mono #question_controls .reset-pill:focus *,
html.bbp-colorblind-mode-mono #question_controls .hud-pill:hover *,
html.bbp-colorblind-mode-mono #question_controls .hud-pill:focus *,
html.bbp-colorblind-mode-mono #question_controls #open-calculator.hud-pill:hover *,
html.bbp-colorblind-mode-mono #question_controls #open-calculator.hud-pill:focus *,
html.bbp-colorblind-mode-mono #question_controls #timer.hud-pill:hover *,
html.bbp-colorblind-mode-mono #question_controls #timer.hud-pill:focus * {
color:#fff !important;
}

html.bbp-colorblind-mode-mono #calculator-popup,
html.bbp-colorblind-mode-mono #calculator,
html.bbp-colorblind-mode-mono #display {
background:#fff !important;
background-image:none !important;
color:#111 !important;
border-color:#555 !important;
}

html.bbp-colorblind-mode-mono #calculator .btn,
html.bbp-colorblind-mode-mono #calculator-popup .close-btn {
background:#efefef !important;
background-image:none !important;
color:#111 !important;
border-color:#555 !important;
}

html.bbp-colorblind-mode-mono #calculator .btn:hover,
html.bbp-colorblind-mode-mono #calculator .btn:focus,
html.bbp-colorblind-mode-mono #calculator-popup .close-btn:hover,
html.bbp-colorblind-mode-mono #calculator-popup .close-btn:focus {
background:#111 !important;
color:#fff !important;
border-color:#111 !important;
}