:root {
  --color-primary: #fafafa;
  --color-over: #55A2FB;
  --color-active: #0082FB;
  --color-feborder:ccf;


  --color-btntxt: #666666;

 --primary-h-YLEStarters: 15;   /* Warm Red-Orange */
--primary-s-YLEStarters: 100%;
--primary-l-YLEStarters: 50%;
--bg-YLEStarters: hsla(var(--primary-h-YLEStarters), var(--primary-s-YLEStarters), var(--primary-l-YLEStarters), 1);

--primary-h-YLEMovers: 220;  /* Deep Blue */
--primary-s-YLEMovers: 100%;
--primary-l-YLEMovers: 40%;
--bg-YLEMovers: hsla(var(--primary-h-YLEMovers), var(--primary-s-YLEMovers), var(--primary-l-YLEMovers), 1);

--primary-h-YLEFlyers: 130;  /* Vibrant Green */
--primary-s-YLEFlyers: 100%;
--primary-l-YLEFlyers: 35%;
--bg-YLEFlyers: hsla(var(--primary-h-YLEFlyers), var(--primary-s-YLEFlyers), var(--primary-l-YLEFlyers), 1);

  --primary-h-A2KET: 327;
  --primary-s-A2KET: 100%;
  --primary-l-A2KET: 45%;
  --bg-A2KET:hsla(var(--primary-h-A2KET), var(--primary-s-A2KET), var(--primary-l-A2KET), 1);

  --primary-h-B1PET: 198;
  --primary-s-B1PET: 100%;
  --primary-l-B1PET: 45%;
  --bg-B1PET:hsla(var(--primary-h-B1PET), var(--primary-s-B1PET), var(--primary-l-B1PET), 1);

  --primary-h-B2FCE: 43;
  --primary-s-B2FCE: 100%;
  --primary-l-B2FCE: 49%;
  --bg-B2FCE:hsla(var(--primary-h-B2FCE), var(--primary-s-B2FCE), var(--primary-l-B2FCE), 1);

  --primary-h-C1CAE: 181;
  --primary-s-C1CAE: 100%;
  --primary-l-C1CAE: 34%;
  --bg-C1CAE:hsla(var(--primary-h-C1CAE), var(--primary-s-C1CAE), var(--primary-l-C1CAE), 1);

  --primary-h-C2CPE: 288;
  --primary-s-C2CPE: 58%;
  --primary-l-C2CPE: 32%;
  --bg-C2CPE:hsla(var(--primary-h-C2CPE), var(--primary-s-C2CPE), var(--primary-l-C2CPE), 1);

  --font-family: "Segoe UI", Roboto, "Helvetica Neue", system-ui, -apple-system, BlinkMacSystemFont,  Arial, sans-serif;

  --space-std: .5rem;
  --space-s: .25rem;
  --space-m: 1rem;
  --space-l:1.5rem;
  --space-xl:2rem;
  --space-xxl:3rem;

}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html, body {
  padding:0;
  margin:0;
  min-width:360px;
  width:100%!important;
  font-family: var(--font-family);
  font-size: var(--fs-400);
  line-height: 1.6;
  background: rgb(255,255,255);
background: linear-gradient(0deg, rgba(245,241,241,.5) 0%rgba(255,255,255,1) 30%,, rgba(255,255,255,1) 70%, rgba(245,241,241,.5) 100%);
  
}
button,label  {
    padding: 0;           /* Reset padding */
  border: none;         /* Remove border */
  margin: 0;            /* Reset margin */
  font: inherit;        /* Inherit font from parent */
  cursor: pointer;      /* Restore pointer cursor */
  background: none;     /* Remove default background */
  -webkit-appearance: none; /* Fix for Safari/WebKit */
  -moz-appearance: none;    /* Fix for Firefox */
}

h1 {
    font-weight:600;
    font-size:2.5rem;
}
h2 {
    font-weight:500;
    font-size:2rem;
}
h3 {
    font-weight:500;
    font-size:1.75rem;
}
h4 {
    font-weight:400;
    font-size:1.3rem;
    display:block;
}

h5{
    font-size:1.25rem;
    margin:0.2rem 0;
}
h6{
    font-size: 1rem;
}

hr {
    border-top:1px solid #ccc;
    margin:2rem;

}


.debugHide{
    display:none;
}



.lazy{width: 100%;
  content-visibility: auto;
  contain-intrinsic-size: 1000px 474px; /* Fixed hint size */
}



/*
    XL: 1366px (Large desktops)
    L: 1024px (Small desktops and tablets)
    M: 768px (Tablets)
    S: 480px (Mobile phones and other small devices)

*/

/* Default */

.cg {
    min-width:360px;
        --padding-inline: 1rem;
        --content-max-width: 90%;
        --breakout-max-width: 95%;
        background: linear-gradient(0deg, rgba(245,241,241,.5) 0%rgba(255,255,255,1) 30%,, rgba(255,255,255,1) 70%, rgba(245,241,241,.5) 100%) !important
        }

@media screen and (min-width: 480px) {
    .cg {
        --padding-inline: 1rem;
        --content-max-width: 90%;
        --breakout-max-width: 95%;
        }
}

@media screen and (min-width: 768px) {
    .cg {
        --padding-inline: 1rem;
        --content-max-width: 85%;
        --breakout-max-width: 95%;
        }

}

@media screen and (min-width: 1024px) {
    .cg {
        --padding-inline: 1rem;
        --content-max-width: 900px;
        --breakout-max-width: 950px;

    }
}

@media screen and (min-width: 1366px) {
    .cg {
        --padding-inline: 1rem;
        --content-max-width: 1000px;
        --breakout-max-width: 1200px;
        }
        
}


.cg {
    --breakout-size: calc((var(--breakout-max-width) - var(--content-max-width)) / 2);

        display: grid;
        grid-template-columns:
            [full-width-start] minmax(var(--padding-inline), 1fr)
            [breakout-start] minmax(0, var(--breakout-size))
            [content-start] min(100% - (var(--padding-inline) * 2), var(--content-max-width))
            [content-end] minmax(0, var(--breakout-size))
            [breakout-end] minmax(var(--padding-inline), 1fr) [full-width-end];
}



.cg > :not(.breakout, .cg-fw, button),
.cg-fw > :not(.breakout, .full-width, button) {
  grid-column: content;
}

.cg > .cg-bo {
  grid-column: breakout;
}

.cg > .cg-fw {
  grid-column: full-width;

  display: grid;
  grid-template-columns: inherit;
}

img.cg-fw {
  width: 100%;
  max-height: 45vh;
  object-fit: cover;
}


.cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(275px, 100%), 1fr));
    gap:1rem;

}


/*.flow > * + * {
  margin-top: var(--flow-spacing, 1em);
}
*/
/* New Container Definitions END */










.clCont{
    display:flex;
    flex-wrap:wrap;

}
.clBox {
    flex:none;
    flex: 1 1 auto; 
  min-width: 250px; /* Minimum width before wrapping */
  margin: 0.5rem; /* Add spacing between boxes */

}
.clBox div.heading{
    color:#fff;
    width:auto;
    padding:1rem 2rem;
}

.YLEStarters {
    background-color: hsla(var(--primary-h-YLEStarters), var(--primary-s-YLEStarters), var(--primary-l-YLEStarters), 0.2);
}
.YLEStarters div.heading {
    background-color: var(--bg-YLEStarters);
}

.YLEMovers {
    background-color: hsla(var(--primary-h-YLEMovers), var(--primary-s-YLEMovers), var(--primary-l-YLEMovers), 0.2);
}
.YLEMovers div.heading {
    background-color: var(--bg-YLEMovers);
}

.YLEFlyers {
    background-color: hsla(var(--primary-h-YLEFlyers), var(--primary-s-YLEFlyers), var(--primary-l-YLEFlyers), 0.2);
}
.YLEFlyers div.heading {
    background-color: var(--bg-YLEFlyers);
}


.A2KET {
    background-color:hsla(var(--primary-h-A2KET),var(--primary-s-A2KET),var(--primary-l-A2KET),.2);
}
.A2KET div.heading {
    background-color:var(--bg-A2KET);
}

.B1PET {
    background-color:hsla(var(--primary-h-B1PET),var(--primary-s-B1PET),var(--primary-l-B1PET),.2);
}
.B1PET div.heading {
    background-color:var(--bg-B1PET);
}

.B2FCE {
    background-color:hsla(var(--primary-h-B2FCE),var(--primary-s-B2FCE),var(--primary-l-B2FCE),.2);
}
.B2FCE div.heading {
    background-color:var(--bg-B2FCE);
}

.C1CAE {
    background-color:hsla(var(--primary-h-C1CAE),var(--primary-s-C1CAE),var(--primary-l-C1CAE),.2);
}
.C1CAE div.heading {
    background-color:var(--bg-C1CAE);
}

.C2CPE {
    background-color:hsla(var(--primary-h-C2CPE),var(--primary-s-C2CPE),var(--primary-l-C2CPE),.2);
}
.C2CPE div.heading {
    background-color:var(--bg-C2CPE);
}

/* Apply border-box to everything */
*,
*::before,
*::after {
  box-sizing: border-box;
}



.noselect {
  user-select: none;              /* Standard property */
  -webkit-user-select: none;      /* Safari/Chrome */
  -moz-user-select: none;         /* Firefox (older) */
  -ms-user-select: none;          /* Internet Explorer/Edge (older) */
}




#hero {
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    text-align:center;
}

#hero img { max-width:100%;}


.itembox-std {
    display:block;
    border:1px solid red;
}

.error-message { color: red; font-size: 1rem; font-weight: 500; margin: 2rem 2rem; }

.truncated-cell {
    max-width: 50rem;          /* Adjust as needed */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

}


.cropper-example {
    max-height: 400px; /* Or any height you want */
    max-width: 100%;
}


.text-editor-container {
    width: 100%;
    min-height: 40rem;
    padding: 1.5rem;
    font-family: monospace;
    font-size: 1.1rem;
    line-height: 1.6;
    border: 2px solid #ccc;
    border-radius: 5px;
    resize: vertical;
    box-sizing: border-box;
    margin:2rem 0;
}

.editable-textarea {
    min-width: 100%;
                 min-height: 40rem;
                 padding: 1.5rem;
                 border: 2px solid #ccc;
                 border-radius: 5px;
                 resize: horizontal; /* Allow horizontal resize */
                 overflow-x: auto; /* Add scrollbar if needed */

                 max-width: 100%; /* Prevent overflow */
                 box-sizing: border-box;
                 white-space: pre-wrap;
                 
}


.std-inputtext {
    border: 1px solid var(--color-feborder);
    padding: 0.5rem 1rem;
    border-radius:0.2rem;
}


button.btn-std,
label.btn-std  {
    display:inline-block;
    background-color:var(--color-active);
    color:var(--color-primary);
    font-size:1rem;
    font-weight:500;
    padding:.5rem 1rem !important;
    border-radius: .3rem;
    margin:1rem;
}

.btn-icon-icon {
  width: 2rem; /* Uses root font size */
  height: 2rem;
}


.btn-std:hover{
    background-color:var(--color-over);
}

.btn-std svg {width:2.5rem; height:2.5rem;}

.btn-fline-std {
    border: 1px solid var(--color-btntxt);
    color: var(--color-btntxt);
    padding:0.3rem 0.5rem;
    font-size: 0.8rem;
    border-radius:.3rem;
    margin:.2rem 1rem;
    cursor:pointer;
}

.btn-fline-std:hover {
    border:1px solid var(--color-over);
    color: var(--color-over);
}


    .rhc-header {
 
        margin: 2rem auto;
        display: flex;

        gap: .5rem;
        user-select:none;
        width:100%;
    }
/*    .rhc-item {
        flex: 1 1 20%;
        text-align: center;
        padding: 0.6rem;
        box-sizing: border-box;
        cursor: pointer;
        font-weight:bold;
        border-bottom:0px;
        border-top-right-radius:.3rem;
        font-size:1rem;
        border:1px solid #eee;
        background-color:hsla(211, 100%, 0%,.05);
        color:#888;
    }*/


.rhc-item {
    flex: 1 1 20%;
    text-align: center;
    padding: 0.6rem;
    box-sizing: border-box;
    cursor: pointer;
    font-weight: bold;
    /* No bottom border here */
    border-bottom: 0;
    border-top-right-radius: .3rem;
    font-size: 1rem;
    border: 1px solid #eee;
    background-color: hsla(211, 100%, 0%, .05);
    color: #888;
    position: relative; /* Needed so the pseudo-element positions relative to the item */
}

/* Only for items that are not the last one */
.rhc-item:not(:last-child)::after {
    content: "";
    position: absolute;
    bottom: -1px;
    right: -.6rem;        
    height:100%;/* Start right at the edge of the item */
    width: 0.6rem;         /* Set this to match the gap between items */
    border-bottom: 1px solid #eee;
}





    .rhc-item > span {
        display:block;
    }
    .rhc-selected {
        background-color:  	hsla(255, 100%, 100%,1);
        color: #444;
        border-color:#ddd;
        border-bottom: 1px solid #fff;
    }

    .rhc-item:hover {
        background-color: var(--color-active);
        color:#fff;
        border-color: var(--color-active);

    }

    .rhc-panel {

        border: 0px solid #ccc;
/*        max-width:900px;
        margin:1rem auto;*/
    }

.table-answersheet-exampart {
    border-collapse: collapse;
    margin: 2rem 2rem;
    font-size: 0.9rem;
    font-family: sans-serif;
    width:auto;
    max-width:95vw!important;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
}

.table-answersheet-exampart thead tr {
    background-color:var(--color-active);
    color: #ffffff;
    text-align: left;
}
.table-answersheet-exampart th,
.table-answersheet-exampart td {
    border:1px solid #ccc;
    text-align:center;
    font-weight:700;
    font-size:1rem;
}

.table-answersheet-exampart th {
    text-align:center;
    padding: 0.9rem 1rem;
}
.table-answersheet-exampart td label{
    display:block;
    text-align:center;
    padding: 0.9rem 1rem;
}

.table-answersheet-exampart td input[type="text"] {
    display: block;
    text-align: left;
    padding: 0.9rem 1rem;
    font-weight: 500;
    min-width: 26rem;
    background-color: transparent;
    border: none !important;
    outline: none !important; /* Add this */
    box-shadow: none !important; /* Add this */
    transition: background-color 0.2s ease;
    text-transform: uppercase;
}

.table-answersheet-exampart td input[type="text"]:focus {
    background-color: hsla(60, 100%, 50%, 0.1);
    border: none !important;
    outline: none !important; /* Explicitly remove focus outline */
    box-shadow: none !important; /* Remove any residual shadow */
}

/* Autofill override */
.table-answersheet-exampart td input[type="text"]:-webkit-autofill,
.table-answersheet-exampart td input[type="text"]:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px transparent inset;
    transition: background-color 5000s ease-in-out 0s;
}


.table-answersheet-exampart tbody tr {
    border-bottom: 1px solid var(--color-primary);
}

.table-answersheet-exampart tbody tr:nth-of-type(even) {
    background-color: #f3f3f3;
}

.table-answersheet-exampart tbody tr:last-of-type {
    border-bottom: 2px solid #ccc;
}

.clear-button {
    color:red;
    font-weight:500;
}


.selected-answer {
    background-color: #e3f2fd;
    border-radius: 4px;
    padding: 2px;
}

.hidden{
    display:none;
}

input[type='text'], input[type='password'] {
    border:1px solid #aaa;
    margin:.5rem;
    background-color:#ffffe0;
    padding:.2rem;
    border-radius:.3rem;
}




.annotated-sentence + .annotated-sentence {
  margin-left: 0.5rem;
}


.camera_video_display {width:80vw; max-height:80vh; border:1px solid #ccc;}

.display_block {display:block;}
.display_none {display:none;}

.table-std {
    border-collapse: collapse;
    margin: 2rem 0;
    font-size: 0.9rem;
    font-family: sans-serif;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
    width:100%;
    max-width:100%;
}

.table-std thead tr {
    background-color:var(--color-btntxt);
    color: #ffffff;
    text-align: left;
}
.table-std th,
.table-std td {
    padding: 0.4rem .5rem;
}

.table-std tbody tr {
    border-bottom: 1px solid var(--color-primary);
}

.table-std tbody tr:nth-of-type(even) {
    background-color: #f3f3f3;
}

.table-std tbody tr:last-of-type {
    border-bottom: 2px solid var(--color-primary);
}


/*.standardSection{
    max-width: 1400px;
    margin:auto;
    padding:0 0.3rem;
}*/


/* Vertical scale on the left */
.scale {
    width: 60px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 10px 5px;
    border-right: 1px solid #ccc;
}

.tick {
    text-align: right;
    font-size: 0.9rem;
    color: #333;
    border:1px solid red;
}

/* Right side: subject columns */
.columns {
    display: flex;
    flex: 1;
    justify-content: space-around;
    padding: 10px;
}

.column {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    margin: 0 5px;
}

.subject {
    font-weight: bold;
    margin-bottom: 10px;
    text-align: center;
}

/* The chart area for each subject */
.chart-area {
    position: relative;
    height: 300px;  /* This height can be adjusted or made relative */
    width: 100%;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
    background: #f7f7f7;
}

/* The marker indicating the candidate’s score */
.marker {
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background: red;
    /* Center the marker vertically around its computed position */
    transform: translateY(50%);
}

/* The score label (displayed near the marker) */
.score {
    position: absolute;
    left: 50%;
    transform: translate(-50%, -150%);
    background: red;
    color: #fff;
    padding: 2px 5px;
    font-size: 0.8rem;
    border-radius: 3px;
}































.apexcharts-annotation-rect {
   /* rx: 10px !important;
    ry: 10px !important;*/
}

/* Rounded text backgrounds */
.apexcharts-yaxis-annotations > rect {
    rx: 0 !important;
    ry: 0 !important;
    
}
rect.apexcharts-annotation-rect + rect {
  /* Your styles here */
  rx:50%!important;
  ry:50%!important;
  font-size:40px!important;
  width:32px!important;
  height:32px!important;
  align-content:center!important;
  text-align:center!important;

}

    .rounded-label {border-radius:50%;}


/*---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/* Container for the entire report */
.vr-panel {
    width:100%;
    background-color: #ffffff;

}


.vr-part-card h4 {
    font-weight:bold;
    display:block;
    padding-left:1rem;
    border-bottom:1px solid #ddd;
    margin-bottom:.4rem;
}

/* Table styling */
.vr-table {
    width: 100%;
    border-collapse: collapse; /* ensures border-spacing is applied */
    border-spacing:.5rem;
    margin-bottom: 1rem;

    border-radius:.3rem;
    margin-top:1rem;
    
}

.vr-table tr {border-radius:0.3rem;} 
.vr-table th, 
.vr-table td {

    padding: 0.5rem;
    text-align: left;
    border-radius:.15rem!important;
    margin:1rem 1rem 0 0;
    border:1px solid #ddd;
}
.vr-table th {
    text-align:center;
    font-weight:bold;
}
.vr-table td {
    color:#666;
    font-weight:600;
    letter-spacing:.2rem;
}
.vr-table th.vr-header {
    background-color:#ddd;
    
}
.vr-table td.vr-part-total-title{
    background-color:#ddd;
    letter-spacing:unset;
}
.vr-table td.vr-part-total{
    text-align:center!important;
    background-color:rgba(224, 82, 60, .1);
}
/* Flex container for the answer parts */
.vr-flex-container {
    display: flex;
    flex-basis:auto;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 1.5rem;
    margin:2rem 0;
    padding:2rem 0;
    border-top:1px solid #ddd;
    border-bottom:1px solid #ddd;
}

/* Card style for each answer part */
.vr-part-card {
    flex: 0 1 auto;
    margin: 0 0rem;
    box-sizing: border-box;
}

/* Background color classes */
.vr-row-alt {
    background-color: #f5f5f5;  /* Light gray */
}
.vr-row {
    background-color:#fdfdfd;
}
.vr-bg-dusty-gray-200 {
    background-color: #e0e0e0;  /* Slightly darker gray */
}

.vr-part-total {
    font-weight:bold;
    text-align:center;

}

/* Text color classes */
.vr-text-dusty-gray-600 {
    color: #757575;
}
.vr-correct {
    color: #84cc16;  /* Approximate lime shade */
}
.vr-partially-correct {
    color: #57534e;  /* Approximate stone shade */
}
.vr-incorrect {
    color: #dc2626;  /* Approximate red shade */
}
.vr-text-xs {
    font-size: 0.75rem;
}
.vr-text-sm {
    font-size: 0.875rem;
}

/* Status classes */
.vr-text-success {
    color: green;
}
.vr-text-danger {
    color: red;
}

/* Additional utility class */
.vr-qNumber {
    width: 3rem;
}
/*---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
























.results-chart-container {
    width: 100%;
    max-width: 900px;
    margin: auto;
    font-family: Arial, sans-serif;
}

.results-chart {
    display: flex;
    flex-direction: row;
    border: 1px solid #ccc;
    background: #fff;
}





/* For thinner screens */
@media (max-width: 600px) {
  .WritingReportHeader {
    display: grid;
    /* Three columns: first column for "Student Name"/"Exam", then two columns for "OOT" and "CES" */
    grid-template-columns: 1fr auto auto;
    grid-template-rows: auto auto;
    grid-template-areas:
      "name oot ces"
      "exam exam exam";
    gap: 10px;
  }
  
  .WritingReportHeader > div:nth-child(1) { /* Student Name */
    grid-area: name;
  }
  .WritingReportHeader > div:nth-child(2) { /* Exam */
    grid-area: exam;
  }
  .WritingReportHeader > div:nth-child(3) { /* OOT */
    grid-area: oot;
  }
  .WritingReportHeader > div:nth-child(4) { /* CES */
    grid-area: ces;
  }
}



/* SPELLCHECK ERRORS GRID --------------------------------------------------------------------- */


/* GRADING GRID --------------------------------------------------------------------- */
.grading-grid {
    /*display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
    padding: 1rem;*/
    
}

.grading-item {
    /*border: 1px solid #aaa;
    border-radius: .3rem;*/
    overflow: hidden;
    background-color: #fff;
    display: flex;
    flex-direction: column;
}

.item-header {
    background-color: #fff;
    padding: 0rem 0 0 0;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    font-weight: 600;
    border-bottom: 1px solid #aaa;
    font-size:1.25rem;
    color:#555;
    vertical-align:bottom;
    align-items:flex-end;
}

.item-notes {
    padding: 1rem 0;
    font-size: 1rem;
    color: #333;
    line-height:1.8rem;
    color:#555;


}





.criteria{ }
.grade-value{
    background-color:#e0523c;
    display:inline-block;
    min-width:6rem;
    text-align:center;
    font-size:1.25rem;
    color:#fff;
}


/* LOADER --------------------------------------------------------------------- */
/* Fullscreen overlay with high z-index */
.spinner-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none;
}

/* Container for the spinner and text */
.spinner-container {
  position: relative;
  width: 6.25em; /* Fixed width matching spinner */
  /* You can also set a fixed height if needed */

  border-radius:1rem;
}



/*

.card{
  margin: 0 auto;
  padding: 2em;
  width: 300px;
  background: #1c1f2b;
  text-align: center;
  border-radius: 10px;
  position: relative;
}
*/






/* New wrapper to fix the dimensions of the rotating spinner */
.spinner-figure-wrapper {
  width: 6.25em;
  height: 6.25em;
  position: relative;
}

/* Spinner styling */
figure { 
  margin: 0;
  width: 100%;
  height: 100%;
  animation: rotate 2.4s linear infinite;
  position: absolute;
  top: 0;
  left: 0;
}
.white { 
  top: 0;
  bottom: 0;
  left: 0;
  right: 0; 
  background: white; 
  animation: flash 2.4s linear infinite;
  opacity: 0;
}
.dot {
  position: absolute;
  margin: auto;
  width: 2.4em;
  height: 2.4em;
  border-radius: 100%;
  transition: all 1s ease;
}
.dot:nth-child(2) { top: 0; bottom: 0; left: 0; background: #FF4444; animation: dotsY 2.4s linear infinite; }
.dot:nth-child(3) { left: 0; right: 0; top: 0; background: #FFBB33; animation: dotsX 2.4s linear infinite; }
.dot:nth-child(4) { top: 0; bottom: 0; right: 0; background: #99CC00; animation: dotsY 2.4s linear infinite; }
.dot:nth-child(5) { left: 0; right: 0; bottom: 0; background: #33B5E5; animation: dotsX 2.4s linear infinite; }








/* Positioning wait text below the fixed spinner */
.wait-text-container {
  width: 300px;
  overflow: hidden;
  text-align: center;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: calc(100% + 1rem); /* 1rem below the spinner container */
}

/* Animation for the message when it changes */
.message {
  display: inline-block;
  animation: scrollFade 0.5s ease-out;
  font-size:1.5rem;
  font-weight:200;
}

/* Keyframes for scrolling left and fading out */
@keyframes scrollFade {
  0% {
    transform: translateX(0);
    opacity: 1;
  }
  100% {
    transform: translateX(-100%);
    opacity: 0;
  }
}

/* Simplified rotate keyframes – no width/height changes */
@keyframes rotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes dotsY {
  66% { opacity: 0.1; width: 2.4em; }
  77% { opacity: 1; width: 0; }
}
@keyframes dotsX {
  66% { opacity: 0.1; height: 2.4em; }
  77% { opacity: 1; height: 0; }
}
@keyframes flash {
  33% { opacity: 0; border-radius: 0%; }
  55% { opacity: 0.6; border-radius: 100%; }
  66% { opacity: 0; }
}
















.api-call-log {
    margin: 1rem 0;
    border: 1px solid #dee2e6;
    border-radius: 4px;
}

.prompt-box, .response-box {
    padding: 1rem;
}

.prompt-box {
    background-color: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
}

.response-box {
    background-color: white;
}

.response-box.error {
    background-color: #fff5f5;
    color: #dc3545;
}

pre {
    white-space: pre-wrap;
    word-wrap: break-word;
    margin: 0;
}

.debug-html {
    display: none !important;
    font-size: 0.8rem;
    color: red;
}

/* Show debug info on hover */
.paragraph-container:hover .debug-html {
    display: inline !important;
    background: white;
    z-index: 1000;
}

/* Writing Report Header --------------------------------------------------------------------- */

.drop-zone { border: 2px dashed #ccc; padding: 2rem; text-align: center; border-radius: 5px; transition: border-color 0.3s; }
.drop-zone.hover { border-color: #007bff; background-color: #f8f9fa; }
.image-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem; margin: 1rem 0; }
.image-item { position: relative; padding: 0.5rem; border: 1px solid #dee2e6; border-radius: 0.25rem; }
.order-badge { position: absolute; top: 5px; left: 5px; background: rgba(0,0,0,0.7); color: white; padding: 2px 5px; border-radius: 3px; }
.debug-box { position: relative; bottom: 0; right: 0; width: 400px; height: 300px; overflow: auto; background: white; padding: 1rem; border: 1px solid #ccc; box-shadow: -2px -2px 5px rgba(0,0,0,0.1); }
    
.crop-actions { margin-top: 10rem; display: block; gap: 0.5rem; justify-content: flex-end; }
.camera-controls { display: block; gap: 0.5rem; margin-top: 1rem;  }

.cropper-container { 
    display: block;
    width:90%;
/*    height:100cqh;*/
/*overflow:hidden;*/
/*container-type: size;*/
    margin:1rem auto;
}
.cropper-container { display: block; max-width:100cqw; object-fit: contain; }

.cropperComponent { 
    max-width:10%;
}

.big-img { object-fit: contain; }
.drop-zone { border: 2px dashed #ccc; padding: 2rem; text-align: center; border-radius: 5px; transition: border-color 0.3s; }
.drop-zone.hover { border-color: #007bff; background-color: #f8f9fa; }
.image-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem; margin: 1rem 0; }
.image-item { position: relative; padding: 0.5rem; border: 1px solid #dee2e6; border-radius: 0.25rem;justify-content:center;text-align:center; }
.img-thumbnail{object-fit:contain;max-width:10rem;}
.order-badge { position: absolute; top: 5px; left: 5px; background: rgba(0,0,0,0.7); color: white; padding: 2px 5px; border-radius: 3px; }
.debug-box { position: relative; bottom: 0; right: 0; width: 400px; height: 300px; overflow: auto; background: white; padding: 1rem; border: 1px solid #ccc; box-shadow: -2px -2px 5px rgba(0,0,0,0.1); }

.crop-actions { margin-top: 10rem; display: block; gap: 0.5rem; justify-content: flex-end; }
.camera-controls { display: block; gap: 0.5rem; margin-top: 1rem; }
.camera_video_display { max-width:100%;}
.display_block {}

.placeholder-cont {
    width:20rem;
    text-justify:inter-word;
}
/* This pseudo-element ensures the span takes up the width of 20 characters */

/* The inline span with an animated gradient background */
.placeholder {
    margin-right:1rem;
    color: transparent;
    opacity: .5;
    display: inline; /* Flow inline like text */
    font-family: monospace;
    background: linear-gradient(
        315deg,
        #ddd,             /* Darker base */
        #ccc 40%,         /* Start of band */
        #eee 50%,         /* Lighter band */
        #ddd 60%,         /* End of band */
        #ccc              /* Darker base continues */
    );
    /* Make the background large enough so the band can travel */
    background-size: 300% 300%;
    /* Animate the background position */
    animation: band-flow 4s ease-in-out infinite reverse;
    border-radius: .5rem;
}

/* Keyframes to move the gradient from top left to bottom right,
   with a pause in the middle */
.placeholderv2 {
    margin-right:1rem;
    color: transparent;
    opacity: .5;
    display: inline; /* Flow inline like text */
    font-family: monospace;
    background: linear-gradient(
        315deg,
        #ddd,             /* Darker base */
        #ccc 40%,         /* Start of band */
        #eee 50%,         /* Lighter band */
        #ddd 60%,         /* End of band */
        #ccc              /* Darker base continues */
    );
    /* Make the background large enough so the band can travel */
    background-size: 300% 300%;
    /* Animate the background position */
    animation: band-flow2 7s ease-in-out infinite;
    border-radius: .5rem;
}

/* Keyframes to move the gradient from top left to bottom right,
   with a pause in the middle */
@keyframes band-flow {
    0% {
        background-position: -100% -100%;
    }
    100% {
        background-position: 150% 150%;
    }
}

@keyframes band-flow2 {
    0% {
        background-position: -150% -150%;
    }
    100% {
        background-position: 100% 100%;
    }
}

/* Default: Wider screens */
.WritingReportHeader {
    width:50%;
    display: grid;
    grid-template-columns: 3fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 1rem;
    color: #555;
    font-weight: 600;
}

/* Place items by their order */
.WritingReportHeader > div:nth-child(1) {
    grid-column: 1;
    grid-row: 1;
    background-color: #d7d7d7;
    font-size: 1.4rem;
    padding: 1rem;
    border: 1px solid #999;
    border-radius: .5rem;
}
.WritingReportHeader > div:nth-child(2) {
    grid-column: 1;
    grid-row: 2;
    background-color: #d7d7d7;
    font-size: 1.4rem;
    font-weight: 400;
    padding: 1rem;
    border: 1px solid #999;
    border-radius: .5rem;
}
.WritingReportHeader > div:nth-child(3) {
    grid-column: 2;
    grid-row: 1;
    background-color: antiquewhite;
    text-align: center;
    min-width: 6rem;
    border: 1px solid #999;
    border-radius: .5rem;
    font-size: 3rem;
}
.WritingReportHeader > div:nth-child(4) {
    grid-column: 2;
    grid-row: 2;
    text-align: center;
    background-color: antiquewhite;
    min-width: 6rem;
    border: 1px solid #999;
    border-radius: .5rem;
    font-size: 3rem;
}

.error-debug { display: none; }
.grammar-error {
    background-color: #e6e6fa;
    /* The entire block is tinted. */
    padding: .3rem .5rem 0 .1rem;
    position: relative;
    margin: .2rem;
    border-radius: .3rem;
}

.spelling-error {
    background-color: #ffe6e6;
    padding: .3rem .5rem 0 .1rem;
    position: relative;
    margin: .2rem;
    border-radius: .3rem;
}

.wETTA.tooltip-host {
    font-weight: bold;
    cursor: pointer; /* So user knows it’s interactive */
    position: relative;
    display: inline-block;
    vertical-align: super;
    font-size: 0.8rem;
    margin: .3rem;
    font-weight: normal;
    color: #766;
    white-space: normal !important;
}

.wETTCont {
    display: none;
    position: absolute;
    bottom: 100%;       /* position above the bracket */
    left: 50%;          /* default centered */
    transform: translateX(-50%);
    /* Removed margin to avoid interfering with positioning */
    /* margin: 2rem .4rem!important; */
    border: 1px solid #ccc;
    padding: 0.6rem;
    z-index: 999;
    font-weight: normal;
    min-width: 250px;
    max-width: 450px;
    width: auto;
    overflow-wrap: break-word;
    word-wrap: break-word;
    white-space: normal;
    border-radius: .3rem;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    font-size: 0.9rem;
    white-space: normal !important;
}

/* Background colours inherited from parent classes */
.grammar-error .wETTCont {
    background-color: hsla(240, 45%, 98%, 1);
}

.spelling-error .wETTCont {
    background-color: hsl(0, 100%, 98%, 1);
}

/* Show tooltip on hover */
.wETTA.tooltip-host:hover .wETTCont {
    display: block;
}

/* Alignment overrides */
.wETTCont.align-right {
    right: 0;
    left: auto;
    transform: none;
}

.wETTCont.align-left {
    left: 0;
    transform: none;
}

.wETTCont.align-center {
    left: 50%;
    transform: translateX(-50%);
}
/* Lines inside the tooltip */
.wETTLine {
    margin-bottom: 4px;
    display: block;
}

.wETTKey {
    display: block;
    font-weight: bold;
    margin-right: 4px;
}

.word-count-display {
    position: absolute;
    top: -1rem;
    right: 0;
    padding: 0.3rem;
    font-size: 1rem;
    font-weight: bold;
    color: #666;
}

.modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.modal-content {
    background-color: #fff;
    padding: 1rem;
    border-radius: 5px;
    max-width: 400px;
    width: 90%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.summary-error {
    font-size: 1rem;
    margin-bottom: 1.5rem;
    padding: 1rem;
    border-radius: .2rem;
    border:1px solid #eee
}


.error-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(275px, 100%), 1fr));
    gap:1rem;

}

.error-id { font-weight: bold; padding:.2rem 0.5rem; }
.error-original strong, .error-correction strong, .error-explanation strong { display: block; }

.error-summary.grammar .error-id { color: hsla(258, 90%, 61%, .5); }
.error-summary.spelling .error-id { color: hsla(6, 68%, 53%, 1); }

.error-summary.grammar .error-id { background-color: hsla(240, 67%, 94%, 1); }
.error-summary.spelling .error-id { background-color: hsl(0, 100%, 95%, 1); }

.error-summaries {
    font-size: 1rem;
    margin: 1rem 0;

}


.error-summary h3 {
    display: block;
    /*font-size: 1.6rem;
    padding: 0 1.5rem;
    margin: 1rem;*/
}

.error-summary.grammar { flex: 2; }

.writingTitle {
    margin: 1rem auto 1rem auto;
    display: block;
    width: 100%;
    text-align: center;
    font-size: 1.5rem;
    color: #aaa;
    font-weight: 200;
}

.annotated-text {
    font-size: 1rem;
    line-height: 2rem;
    border: 1px solid #ccc;
    /*border-radius: .5rem;*/
    padding: 1.5rem 2rem;
    margin: 1rem 0;
    width: 100%;
    min-height: 40rem;
    resize: vertical; /* Allow horizontal resize */
    /*overflow-x: auto;  Add scrollbar if needed */
    /*min-width: 50rem;*/ /* Set minimum reasonable width */
    max-width: 100%; /* Prevent overflow */
    box-sizing: border-box;
    white-space: pre-wrap;
}

.annotated-text p {
    margin-bottom: 1rem;
}

.simulated-row {
    display: flex;
    flex-wrap: wrap;
    padding: 0.5em 0;
    border-bottom: 1px solid #ccc;
}

.simulated-row div:first-child {
    text-align: left;
    padding-left: 2rem;
    font-weight: bold;
    color: #777;
}

.simulated-row .cell {
    padding: 0 0.5em; /* Default: each cell gets equal space */
    flex: 1;
    text-align: center;
    border: 1px solid #ccc;
}

/* If you want the name cell to take more space, you can adjust its flex value: */
.cell-name {
    flex: 2;
    text-align: left;
}

span.CESScore { font-size: 1.2rem;display:block; }
span.OOTScore { font-size: 1rem; display:block;}
.ScorePass { color: #44cc44; }
.ScoreFail { color: #cc4444; }





/*.rg-rsummary {
    display: grid;*/
    /*grid-template-columns: clamp(10rem, 10%, 15rem) clamp(7rem, 10%, 10rem) clamp(7rem, 10%, 10rem);*/
    /*grid-template-columns: repeat(auto-fit, 
        minmax(min(100%, clamp(7rem, 10%, 10rem)), 1fr));
    grid-auto-flow: column;*/ /* Forces additional items to be added in the same row */
    /*gap: .5rem;*/ /* Creates space between grid items */
    /*margin-bottom: 1rem;
  }*/
.rg-rsummary {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.rg-rsummary > *:first-child {
    flex: 1 0 50%;  /* Larger base size */
    min-width: 7rem;
    max-width: 10rem;
}

.rg-rsummary > *:not(:first-child) {
    flex: 1 1 25%;  /* Smaller base size */
    min-width: 5rem;
    max-width: 7rem;
}

.rg-rsummary-h {
    font-size:.9rem;
    margin:.15rem 0;
    white-space: nowrap;
    font-weight:600;

}

.rg-rtitle-comp{
    margin:0;
}

.rg-rsummary-n {
    font-size:1rem;
    background: #dddddd;
    color: #000000;
    padding:.3rem .5rem;
    position:relative;
    min-width: 100%;

    font-weight:bold;
}


.rg-rsummary-d {
    font-size:1rem;
    background: #e0523c;
    color: #fff;
    padding:.3rem .5rem;
    position:relative;
    width:auto;
    font-weight:bold;
    text-align:center;
}
.rg-oot {
    display:inline;
    color:#ff0;
    /*position:absolute;
    right: 5%;*/
    font-weight:normal;
    font-size: clamp(.55rem, -0.275rem + 2.5vw, .9rem);
    margin-left:2%;
    /*top:50%;*/
    /*transform: translateY(-50%);*/
}

.eb-outer {
    position:relative;
    display:flex;
    width:100%;
    align-items:flex-end;
    justify-content:flex-end;
    border-radius:.2rem;
}
.eb-inner {
    
    
    border:1px solid #eee;
    padding:.5rem 1rem 0rem 1rem;
    color:#777;
    cursor:pointer;
    border-radius:.5rem;

}
.eb-inner button span, .rhc-item span, .rhc-item a span {
    display:block!important;
    font-size:.8rem;
    margin-top:0;
    padding-top:0;
    position:relative;
    top:-.5rem;
    font-weight:600;
}
.eb-inner:hover{
    background-color:var(--color-active);
    color:#fff!important;
}

button.btn-img-only{
    background-color:unset;
    padding:0;
    border:unset;
    color:inherit;

}


table.rtable {
  border: 1px solid #ccc;
  border-collapse: collapse;
  margin: 0;
  padding: 0;
  width: 100%;
  table-layout: fixed;
}

table.rtable caption {
  font-size: 1.5em;
  margin: .5em 0 .75em;
}

table.rtable tr {
  background-color: #f8f8f8;
  border: 1px solid #ddd;
  padding: .35em;
}

table.rtable th,
table.rtable td {
  padding: .625em;
  text-align: center;
}

table.rtable th {
  font-size: .85em;
  letter-spacing: .1em;
  text-transform: uppercase;
}

@media screen and (max-width: 600px) {
  table.rtable {
    border: 0;
  }

  table.rtable caption {
    font-size: 1.3em;
  }
  
  table.rtable thead {
    border: none;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }
  
  table.rtable tr {
    border-bottom: 3px solid #ddd;
    display: block;
    margin-bottom: .625em;
  }
  
  table.rtable td {
    border-bottom: 1px solid #ddd;
    display: block;
    font-size: 1em;
    text-align: right;
  }
  
  table.rtable td::before {
    /*
    * aria-label has no advantage, it won't be read inside a table
    content: attr(aria-label);
    */
    content: attr(data-label);
    float: left;
    font-weight: bold;
    text-transform: uppercase;
  }
  
  table.rtable td:last-child {
    border-bottom: 0;
  }
}











@media print {
    html {
        font-size: 10px !important; /* Default is 16px, adjust as needed */
    }
    .noprint {
        display: none !important;
    }
}