/* Digital Clock Extension Styles */
.clockButton {
    color: black;
    background: #fff;
    border: 1px solid #0af;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    padding: 4px 10px;
    transition: box-shadow 0.2s, transform 0.2s;
    box-shadow: 0 1px 4px #0001;
    margin: 0 2px;
}

.clockButton:focus {
    outline: 1px solid #0af;
}

.clockButton:hover {
    background: #eaf6ff;
    box-shadow: 0 2px 8px #0af2;
    transform: scale(1.08);
}

.clockAccessPanel {
    position: absolute;
    top: 0px;
    left: 8px;
    z-index: 3;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    background: #fff;
    border: 1px solid #0af;
    border-radius: 6px;
    padding: 6px;
    box-shadow: 0 2px 8px #0002;
    gap: 6px;
    min-width: 180px;
}

.clockAccessPanelBtn {
    background: #f8f8ff;
    border: 1px solid #0af;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    padding: 4px 8px;
    margin: 2px;
    transition: background 0.2s, transform 0.2s;
}

.clockAccessPanelBtn:hover {
    background: #eaf6ff;
    transform: scale(1.12);
}

.clockButtonRow {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
}

#mathTaskDescriptionWrapper {
    display: flex;
    justify-content: center;
    /* move the div abit to the right to account for the speaker icon */
    margin-left: 1rem;
    padding-inline: 2rem;

}


#mathTaskDescription {
    font-size: x-large;
    text-align: center;
    color: black;
    padding: 0.5rem;
    /* max-width: 85%; */
    word-wrap: break-word;
}


/* speaker icon */
#mathTaskDescriptionTTS {
    /*a small margin to account for the padding of the text */
    margin-top: 0.25rem;

    background-image: url("../img/speaker.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    
    width: 2rem;
    height: 2rem;
    opacity: 0.05;
    background-color: transparent;
    border-radius: 100%;
}

#mathTaskDescriptionTTS[data-nodesc="true"] {
    visibility: hidden;
}


#mathTaskDescriptionTTS:hover {
    cursor: pointer;
    /* make it a bit bigger */
    transform: scale(1.4);
    transition: transform 0.2s;
    opacity: 1;

}

#mathTaskDescriptionTTS:focus {
    outline: 1px solid black;
    /* Optional: shows a focus indicator */
    opacity: 1;
}


/* when hovering */

/* #mathTaskDescription:not(:empty):hover {
    background-image: url("../img/speaker.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
} */


/* pulsing loading animation */

@keyframes pulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
    }
}


.voiceloading {

    animation: pulse 1s infinite;

}

#anyWidgetDiv {

    width: 100%;
    max-width: 100%;
    overflow: hidden;
}


.connectWrapperDiv {
    display: flex;
    justify-content: space-around;
    position: relative;

}

.connectDiv {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    max-width: 49%;
    min-width: 30%;
}



.connectButton {
    margin-top: 0.2rem;
    margin-bottom: 0.2rem;
    font-size: x-large;
    border-radius: 1rem;
    border: 0.1rem solid var(--color);
    cursor: pointer;
    z-index: 1;
    position: relative;
}

.connectButton:hover {

    z-index: 2;
    outline: 2px solid currentColor;
    outline-offset: 2px;

}




/* dataset selected is true */

.connectButton[data-selected="true"] {
    background-color: var(--bgcolor);
    color: var(--color);

}

#connectCanvas {
    position: absolute;
}



/* sorter css */

.sortButton {
    font-size: x-large;
    padding: 0.5rem;
    border-radius: 5px;
    margin-inline: 0.3rem;
}

.sortWrapperDiv {
    display: flex;
    margin-bottom: 0.5rem;
    border: 1px solid var(--color);
    min-width: 70%;
    margin-inline: auto;
    padding: 0.5rem;
    border-radius: var(--border-radius);
    background-color: rgba(255, 255, 255, 0.472);
    flex-wrap: nowrap;
    width: fit-content;
    justify-content: center;

}

@media (max-width: 480px) {
    .sortWrapperDiv {
        min-width: 95%;
        padding: 0.25rem;
    }

    .sortButton {
        font-size: small;
        padding: 0.25rem 0.3rem;
        margin-inline: 0.15rem;
    }
}





.nextTaskButton,
.mathTaskAnswerButton {
    /* the margin bottom should be twice that of the margin inline to make it look better */
    margin-bottom: 0.4rem;
    border-radius: 5px;
    margin-inline: 0.2rem;
    padding-inline: 0.5rem;
    color: var(--color);
    padding: 0.25rem;
    font-size: x-large;
    border: 0.1rem solid rgba(0, 0, 0, 0.458)
}

#answerCheckerDiv {
    width: 100%;
    text-align: center;

    justify-content: center;
    margin-top: 1em;
}

.mathTaskAnswerInputWrapper {
    display: flex;
    justify-content: center;
    margin-bottom: 0.5rem;
}

.mathTaskanswerInput {
    border-radius: 5px;
    margin-inline: 0.5em;
    color: var(--color);
    font-size: x-large;
    text-align: center;



}



.mathTaskanswerInputDiv {
    border-radius: 5px;
    margin-inline: 0.5em;
    color: var(--color);
    font-size: x-large;
    text-align: center;
    background-color: var(--bgcolor);
    padding: 0.25em;
    min-width: 50%;

}

.mathTaskUnit {

    display: flex;
    align-items: center;
    font-size: x-large;
    color: black;

}




#mathTaskMain {
    background-color: rgb(170, 170, 170);
    border-radius: calc(var(--border-radius) - 3px) calc(var(--border-radius) - 3px) 0 0;
    text-align: center;
    padding-top: 2rem;
    padding-bottom: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    aspect-ratio: 2/1;
    transition: all 0.5s ease-in-out;
    position: relative;


}

#mathTaskMain:hover #mathTaskDescriptionTTS {
    opacity: 1;
}



#mathTaskMain[data-mode="light"] {
    background-color: rgb(255, 255, 255);


}


#taskCredit {
    position: absolute;
    right: 0;
    bottom: 0;
    padding: 0.1rem;
    padding-inline: 0.5rem;
    font-size: 0.8rem;
    /* color: var(--color); */
    color: black;
    font-style: italic;
    max-width: 70%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}









/* Define the keyframes for the animation */
@keyframes badJobAnimation {

    0%,
    100% {
        transform: scale(1) rotate(0deg);
        border: 3px solid transparent;
        background-color: initial;
        /* Assuming the card has a defined background color */
    }

    25% {
        transform: scale(1.05) rotate(2deg);
        border: 3px solid rgba(255, 85, 85, 0.8);
        /* Bright red border */
        background-color: rgba(255, 200, 200, 0.5);
        /* Light red tint */
    }

    50% {
        transform: scale(1.1) rotate(-2deg);
        border: 3px solid rgba(200, 30, 30, 0.8);
        /* Darker red border */
        background-color: rgba(255, 180, 180, 0.5);
        /* Slightly darker red tint */
    }

    75% {
        transform: scale(1.05) rotate(2deg);
        border: 3px solid rgba(255, 55, 55, 0.8);
        /* Another shade of red border */
        background-color: rgba(255, 160, 160, 0.5);
        /* Again, slightly darker red tint */
    }
}



/* @keyframes goodJobAnimation {
    0% {
        text-shadow: none;
        filter: brightness(1) drop-shadow(0 0 5px transparent);
    }
    40% {
        text-shadow: 0 0 10px rgba(106, 255, 121, 0.8), 0 0 20px rgba(106, 255, 121, 0.8);
        filter: brightness(1.2) drop-shadow(0 0 10px rgba(106, 255, 121, 0.8));
    }
    80% {
        text-shadow: none;
        filter: brightness(1) drop-shadow(0 0 5px transparent);
        opacity: 0.8;
    }
    100% {
        text-shadow: none;
        filter: brightness(1) drop-shadow(0 0 5px transparent);
        opacity: 0.3;
    }
} */



/* Apply the animation when the class is added */
/* .correctanimation {
    animation: goodJobAnimation 0.5s ease-in-out;
} */

.wronganimation {
    animation: badJobAnimation 1s forwards;
}

/* .wronganimation * {
    
    
    
} */


/* styling for the grid of buttons */

/* Initial flex setup */

.gridWrapperDiv {
    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(30%, 1fr));

    gap: 0.5rem;
    padding: 1rem;

}

.gridWrapper2 {
    grid-template-columns: repeat(auto-fill, minmax(40%, 1fr));
}

.gridWrapper3 {
    grid-template-columns: repeat(auto-fill, minmax(30%, 1fr));
}

.gridWrapper4 {
    grid-template-columns: repeat(auto-fill, minmax(20%, 1fr));
}


.gridButton {
    font-size: large;
    border-radius: 0.2rem;
    padding: 0.5rem;
}

.gridButton[data-selected="true"] {
    color: var(--bgcolor);

    background-color: var(--color);

    /* brightness */

    filter: drop-shadow(0 0 0.5rem var(--bgcolor));

}


/* GRID EXTENSTION STUFF */

.gridExtDiv {
    width: 90%;
    margin-inline: auto;
    color: black;
}

.gridExtRow {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-bottom: 0em;
    width: 100%;

}

.gridExtElement {
    border: 1px solid rgba(0, 0, 0, 0.42);
    aspect-ratio: 1/1;
    flex-grow: 1;
    background-color: white;
}

.gridExtElement:hover {
    cursor: pointer;
    /* increase size, but without moveing the other elements */
    transform: scale(1.2);
}

.gridExtRowLabelLeft {

    width: 2rem;

}

.gridExtRowLabelOrigio {
    width: 2rem;
    cursor: pointer;
    text-align: right;
}

.gridExtColumnLabelWrapper>div {
    flex: 1 0 0;
    text-align: center;
}



.gridExtColumnLabelWrapper {
    width: 100%;
    display: flex;

}



.gridExtElementSplit {
    border-left-width: 3px;

}





/* mathjax styling */

mjx-container[display="true"] {
    margin: .5em 0 ! important
}

.MathJax,
.mjx {
    pointer-events: none;
}

g[data-mml-node="maction"] {
    pointer-events: none;
}



/* numberline styling */







/*tables extension styling */

.tableWidgetWrapper {
    margin: 1rem;
    display: flex;
    max-width: 100%;
    overflow-x: auto;


}


.tableWidgetWrapper>div {

    /* Two div are in this wrapper, the table and the graph. They need to have a gap between them. They are placed horizontally. 
    If any of them is not present, the gap should be 0. If there is only one it should take up the whole width, and be centered.
    If both are present, they should take up half of the width each. */


    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 50%;
    margin-inline: 0.5rem;
    max-width: 100%;
    overflow-x: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 0.5rem;


}

.tableWidgetFlexColumn {
    display: flex;
    flex-direction: column;

}



.tableWidget {
    overflow-x: auto;
}


/* make sure all cells have a min width of 2rem, and a min height of 1rem */
.tableWidgetTableElement td {
    min-width: 2rem;
    min-height: 1rem;
}

.tableWidgetTableElement th {
    padding: 0.5rem;
}



.editableTableCell:hover {

    cursor: pointer;
    background-color: rgba(0, 0, 0, 0.2);

}

.tableWidgetGraph {
    min-width: 50%;

    /* for the + - buttons */
    position: relative;

}

.tableWidget table thead tr th:first-of-type {
    font-size: larger;
}

/* DEFAULT STYLE */
.tableWidget[data-styleclass="default"] {
    border: 1px solid black;

    color: black;
}

.tableWidget[data-styleclass="default"] table {
    border-collapse: collapse;
    width: 100%;
    margin-inline: auto;

}

.tableWidget[data-styleclass="default"] table td {
    border: 1px solid black;
    padding: 0.5rem;
    text-align: center;
}



.tableWidget[data-styleclass="default"] table tr th {
    border: 1px solid black;
    font-weight: bold;
}


/* MODERN STYLE */

.tableWidget[data-styleclass="modern"] {

    border: 0;
    margin: 1rem;
    color: white;
}

.tableWidget[data-styleclass="modern"] table {
    border-collapse: collapse;
    width: 100%;
    margin-inline: auto;
    /* make a linear gradient */
    background: linear-gradient(45deg, #49a9a6, #532473);
}

.tableWidget[data-styleclass="modern"] table td {
    border: 0;
    padding: 0.5rem;
    text-align: center;
    border-bottom: 0.5px solid rgba(255, 255, 255, 0.483);
}

.tableWidget[data-styleclass="modern"] table tr th {
    border: 0;
    font-weight: bolder;
    border-bottom: 0.5px solid rgba(255, 255, 255, 0.483);
}


/* MINIMALIST STYLE */

.tableWidget[data-styleclass="minimalist"] {

    border: 0;
    margin: 1rem;
    color: var(--color);
    background-color: var(--bgcolor);
}

.tableWidget[data-styleclass="minimalist"] table {
    border-collapse: collapse;
    width: 100%;
    margin-inline: auto;
    border: 3px solid var(--color);
}

.tableWidget[data-styleclass="minimalist"] table td {
    border: 0;
    padding: 0.5rem;
    text-align: center;
}

.tableWidget[data-styleclass="minimalist"] table tr th {
    border: 0;

}


/* BUSINESS STYLE */

.tableWidget[data-styleclass="business"] {

    border: 0;
    margin: 1rem;
    color: var(--color);

}

.tableWidget[data-styleclass="business"] table {
    border-collapse: collapse;
    width: 100%;
    margin-inline: auto;
    border: 3px solid var(--color);
    background-color: var(--bgcolor);
}

.tableWidget[data-styleclass="business"] table td {
    border: 0;
    padding: 0.5rem;
    text-align: center;
    border-left: 0.5px solid rgba(7, 164, 31, 1);
}

.tableWidget[data-styleclass="business"] table thead tr th {
    background-color: rgba(40, 172, 0, 0.5);
    border-left: 0.5px solid rgba(7, 164, 31, 1);
    border-bottom: 0.5px solid rgba(7, 164, 31, 1);
    font-weight: bold;
}

.tableWidget[data-styleclass="business"] table tr th {
    border: 0;

}


.tableWidget[data-styleclass="business"] table tr:nth-child(even) {
    background-color: rgba(111, 116, 111, 0.2);
}









/* hiding the rows and columns of the table if empty */

.tableWidgetTableElement[data-nocolheader="true"] thead {
    display: none;
}

/* hide the row headers, but not the rest of the table */

.tableWidgetTableElement[data-norowheader="true"] tbody tr th:first-child::before,
.tableWidgetTableElement[data-norowheader="true"] tbody tr td:first-child::before {

    width: 0;
    min-width: 0;

}


.tableWidgetGraphButtonWrapper {
    display: flex;
    flex-direction: column;
    position: absolute;
    justify-content: center;
    user-select: none;

}


.tableWidgetGraphButton {

    /* place text in the center  */
    display: flex;
    align-items: center;
    justify-content: center;
    color: black;
    font-weight: bolder;
    padding: 0.1rem;
    background-color: transparent;


    font-size: x-large;
    padding: 0;
}

.tableWidgetGraphButton:hover {

    cursor: pointer;
    transform: scale(1.7);
    /* place text in the center  */
    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0.1rem;
    background-color: transparent;


    font-size: x-large;
    font-weight: bolder;
    padding: 0;


}


.tasblesWidgetsumRow {
    font-weight: bold;
    border-top-width: 3px;
    border-top-style: solid;

    border-bottom-width: 3px;
    border-bottom-style: solid;

}

.editableTableCell {
    /* background-color: rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(0, 0, 0, 0.5) !important; */

    border: var(--logo-color) solid 4px !important;
    font-weight: bold;
    box-shadow: -2px 2px 5px var(--color);




}

.tableWidgetGraphWrapper {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* position: relative; */

}

.tableWidgetGraphWithLegend {
    display: flex;
    gap: 0.5rem;
    flex-direction: column;

}

/* taskcheckeradvanced */

.fractionWrapper {
    margin-inline: 1rem;
}

.outerfractionWrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.mathTaskFractionInputDiv {

    min-width: 2rem;
    height: 2rem;
    font-size: x-large;
    text-align: center;
    border: 1px solid white;
    background-color: var(--bgcolor);
    border-radius: 0.5rem;
    padding: 0.2rem;

}

.bigWholeInput {
    min-width: 3rem;
    height: 3rem;
    font-size: xx-large;
}

.fractionLine {
    width: 100%;
    margin-block: 0.1rem;
    background-color: black;
    height: 2px;
}



/* Clock */
.clocksWrapper {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    margin-top: 1rem;
}







@media screen and (max-width: 1300px) {
    #mathTaskDescription {
        font-size: large;
    }
}


@media screen and (max-width: 900px) {
    .gridButton {
        font-size: small;
    }
}



@media screen and (orientation: portrait) {
    #mathTaskDescription {
        font-size: medium;
    }


    .gridWrapperDiv {
        display: grid;

        grid-template-columns: repeat(auto-fill, minmax(40%, 1fr));

        gap: 0.5rem;
        padding: 0.5rem;

    }
}

@media screen and (orientation: portrait) and (max-width: 400px) {
    #mathTaskDescription {
        font-size: medium;
    }

    .gridWrapperDiv {
        display: grid;

        grid-template-columns: repeat(auto-fill, minmax(60%, 1fr));

        gap: 0.5rem;
        padding: 0.5rem;

    }
}

/* These buttons are transparent hit areas above the canvas, including on hover. */
.clickableDiv,
.clickableDiv:hover,
.clickableDiv:active {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    cursor: pointer;
}

.numberLineKeyboardControl {
    position: absolute;
    left: 0;
    width: 100%;
    margin: 0;
    opacity: 0;
    pointer-events: none;
}

.numberLineKeyboardControl:focus-visible ~ .numberLineSelectionArrow {
    outline: 3px solid #164a9c;
    outline-offset: 3px;
    box-shadow: 0 0 0 6px white;
}

.clickableDiv:focus-visible,
.gridExtElement[role="button"]:focus-visible {
    outline: 3px solid #164a9c;
    outline-offset: -3px;
    box-shadow: inset 0 0 0 5px white;
}

#taskAnswerFeedback {
    color: #661812;
    text-align: center;
    font-size: 1rem;
    padding-inline: 0.5rem;
}

#mathTaskMain[data-mode="light"] #taskAnswerFeedback {
    color: #922c20;
}

#taskAnswerFeedback:empty {
    margin: 0;
    padding: 0;
}

/* These widgets follow their task container, including narrow split/editor panes. */
.gridWrapperDiv { min-width: 0; width: 100%; box-sizing: border-box; padding: .5rem; }
.gridWrapperDiv.gridWrapper2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.gridWrapperDiv.gridWrapper3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); }
.gridWrapperDiv.gridWrapper4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 7rem), 1fr)); }
.gridButton { min-width: 0; max-width: 100%; white-space: normal; overflow-wrap: anywhere; word-break: normal; }
.tableWidgetWrapper { margin: 1rem 0; width: 100%; min-width: 0; flex-wrap: wrap; align-items: flex-start; gap: 1rem; overflow: visible; }
.tableWidgetWrapper > div { flex: 1 1 24rem; min-width: 0; margin: 0; box-sizing: border-box; overflow: auto; align-items: stretch; justify-content: flex-start; }
.tableWidgetWrapper > .tableWidgetGraphWrapper { overflow-x: auto; align-items: flex-start !important; }
.tableWidgetGraph { width: 100%; min-width: 0; }

.tableWidgetGraphCanvas, .tableWidgetGraphWithLegend > canvas { flex-shrink: 0; max-width: none; }
.tableWidgetGraphDrawing { position: relative; width: fit-content; max-width: 100%; margin-inline: auto; overflow-x: auto; }
.tableWidgetWrapper[data-visualize="both"] > .tableWidget { flex-basis: 16rem; }
.tableWidgetCompactLegend { display: flex; flex-wrap: wrap; gap: .5rem 1rem; box-sizing: border-box; list-style: none; margin: .5rem 0; padding: 0 .5rem; font: 16px/1.4 Arial, sans-serif; }
.tableWidgetCompactLegend li { display: flex; align-items: baseline; gap: .35rem; min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.tableWidgetCompactLegend li > span { display: inline-block; flex: 0 0 16px; height: 12px; }

.tableWidgetGraphButtonWrapper[hidden] { display: none; }
.tableWidgetAccessButton { position: absolute; top: 8px; right: 8px; z-index: 2; }
.tableWidgetAccessButton[aria-pressed="true"] { outline: 2px solid currentColor; }