:root {
    --formula-stripe-height: 28px;
    --formula-stripe-bottom-border-size: 1px;
    --row-header-cell-width: 45px;
    --standard-cell-width: 94px;
    --standard-cell-height: 22px;
    --active-cell-border-color: #4848ff;
    --cell-ref-color1-solid: rgb(66 171 66);
    --cell-ref-color1-faded: rgb(216 255 216 / 28%);
    --cell-ref-color2-solid: rgb(66 95 171);
    --cell-ref-color2-faded: rgb(216 222 255 / 28%);
    --cell-ref-color3-solid: rgb(249 72 72);
    --cell-ref-color3-faded: rgb(255 216 216 / 28%);
    --cell-ref-color4-solid: rgb(2 206 202);
    --cell-ref-color4-faded: rgb(144 250 255 / 28%);
    --cell-ref-color5-solid: rgb(255 43 204);
    --cell-ref-color5-faded: rgb(255 197 250 / 28%);
    --cell-ref-color6-solid: rgb(255 132 43);
    --cell-ref-color6-faded: rgb(255 230 197 / 28%);
    --cell-ref-color7-solid: rgb(183 96 255);
    --cell-ref-color7-faded: rgb(240 204 255 / 28%);
    --output-cell-background-color: hsl(199.57deg 100% 95.54%);
    /* --output-cell-background-color: linear-gradient(90deg, #ffffff, #ddeaff); */
    --input-cell-background-color: hsl(0deg 0% 95.14%);
    /* --input-cell-background-color: repeating-linear-gradient(45deg, #ebebeb, #ffffff 10px); */
    --default-font-family: Calibri, sans-serif;
}

html {
    scroll-behavior: auto;
}

body {
    margin: 0;
    font-family: var(--default-font-family);
    scroll-behavior: auto;
    line-height: 1;
}

button {
    cursor: pointer;
    border: 0;
    background: transparent;
}

#header {
    padding: 5px 20px;
}

#headerLogo {
    width: 40px;
}

#mainGrid {
    display: grid;
    grid-template-columns: 1fr;
    background: #ffffff;
    font-weight: normal;
    font-family: var(--default-font-family);
    font-style: normal;
    text-decoration-skip-ink: none;
    text-decoration: none;
    font-size: 13px;
    border-left: solid 1px lightgray;
    border-top: solid 1px lightgray;
    width: min-content;
    cursor: default;
}

.row,
.headerRow {
    display: grid;
    grid-template-columns: repeat(27, min-content);
}

.cell,
.row > div {
    color: #000000;
    border-right: solid 1px lightgray;
    border-bottom: solid 1px lightgray;
    margin: 0;
    width: var(--standard-cell-width);
    height: var(--standard-cell-height);
    align-content: end;
    position: relative;
}

#topLeftCorner {
    color: #000000;
    background: white;
    margin: 0;
    width: 41px;
    height: 18px;
    border-right: solid 5px #d0cfcf;
    border-bottom: solid 5px #d0cfcf;
    position: sticky;
    left: 0;
}

.colHeaderCell {
    color: #000000;
    border-right: solid 1px lightgray;
    border-bottom: solid 1px lightgray;
    margin: 0;
    width: var(--standard-cell-width);
    height: var(--standard-cell-height);
    background-color: #f9f9f9;
    text-align: center;
    font-size: 10px;
    display: grid;
    align-content: center;
}

.rowHeaderCell {
    color: #000000;
    border-right: solid 1px lightgray;
    border-bottom: solid 1px lightgray;
    margin: 0;
    width: var(--row-header-cell-width);
    height: var(--standard-cell-height);
    background-color: #f9f9f9;
    text-align: center;
    font-size: 10px;
    display: grid;
    align-content: center;
    position: sticky;
    left: 0;
    z-index: 140;
}

.colHeaderCellActive, .rowHeaderCellActive {
    background-color: #ededff;
}

#activeCellBox {
    border: solid 2px var(--active-cell-border-color);
    width: calc(100% - 2px);
    height: calc(100% - 2px);
    position: absolute;
    left: -1px;
    top: -1px;
    z-index: 99;
}

#activeCellBoxCircle {
    border: solid 1px white;
    width: 8px;
    height: 8px;
    position: absolute;
    right: -5px;
    bottom: -5px;
    border-radius: 100px;
    background: var(--active-cell-border-color);
    z-index: 99;
    cursor: crosshair;
}

.cellRefBox,
#copyCutBox {
    width: calc(100% - 2px);
    height: calc(100% - 2px);
    position: absolute;
    left: -1px;
    top: -1px;
    z-index: 99;
}

#dragBox {
    position: absolute;
    border: solid 2px #4848ff54;
    background: transparent;
    left: -1px;
    top: -1px;
    z-index: 100;
    width: calc(100% - 2px);
    height: calc(100% - 2px);
}

#copyCutBox {
    border: dashed 2px var(--active-cell-border-color);
    background: transparent;
}

.cellRefTextType1 {
    color: var(--cell-ref-color1-solid);
}

.cellRefTextType2 {
    color: var(--cell-ref-color2-solid);
}

.cellRefTextType3 {
    color: var(--cell-ref-color3-solid);
}

.cellRefTextType4 {
    color: var(--cell-ref-color4-solid);
}

.cellRefTextType5 {
    color: var(--cell-ref-color5-solid);
}

.cellRefTextType6 {
    color: var(--cell-ref-color6-solid);
}

.cellRefTextType7 {
    color: var(--cell-ref-color7-solid);
}

.cellRefBoxType1 {
    border: dashed 2px var(--cell-ref-color1-solid);
    background: var(--cell-ref-color1-faded);
}

.cellRefBoxType2 {
    border: dashed 2px var(--cell-ref-color2-solid);
    background: var(--cell-ref-color2-faded);
}

.cellRefBoxType3 {
    border: dashed 2px var(--cell-ref-color3-solid);
    background: var(--cell-ref-color3-faded);
}

.cellRefBoxType4 {
    border: dashed 2px var(--cell-ref-color4-solid);
    background: var(--cell-ref-color4-faded);
}

.cellRefBoxType5 {
    border: dashed 2px var(--cell-ref-color5-solid);
    background: var(--cell-ref-color5-faded);
}

.cellRefBoxType6 {
    border: dashed 2px var(--cell-ref-color6-solid);
    background: var(--cell-ref-color6-faded);
}

.cellRefBoxType7 {
    border: dashed 2px var(--cell-ref-color7-solid);
    background: var(--cell-ref-color7-faded);
}

#headerRowWrapper {
    display: grid;
    grid-template-columns: min-content auto;
    position: sticky;
    top: calc(var(--formula-stripe-height) + var(--formula-stripe-bottom-border-size));
    z-index: 150;
}

.rowWrapper {
    display: grid;
    grid-template-columns: min-content auto;
}

#typingPipe {
    font-size: 16px;
    color: black;
}

#alertBackground,
#alertBackgroundBlocking {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 200;
}

#alertBackgroundBlocking {
    background: #003fff4f;
}

.alertBox {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translatey(-50%) translatex(-50%);
    box-shadow: 0 0 10px gray;
    display: grid;
    justify-content: center;
    justify-items: center;
    text-align: center;
    padding: 20px;
    border-radius: 6px;
    background-color: #f6f6f6;
    width: 250px;
    max-width: calc(100% - 80px);
    z-index: 201;
}

#formulaSubmissionErrorTitle,
#submitErrorTitle,
#submitProcessingTitle,
#submitSuccessTitle {
    font-weight: bold;
    font-size: 1.1rem;
    margin: 0;
    padding: 0;
    line-height: 1.5;
}

#formulaSubmissionErrorMessage {
    margin: 30px 0;
}

#submitErrorMessage {
    margin: 0 0 20px 0;
}

.popupButton,
.popupButton:hover,
.popupButton:active,
.popupButton:focus,
#submitErrorLoginButton,
#solveMoreProblemsButton,
#submitSuccessCloseButton {
    width: 100%;
    border-radius: 2px;
    padding: 10px 0;
    border: 0;
    background: #344eff;
    box-shadow: 0 0 2px gray;
    color: white;
    font-weight: bold;
}

#submitErrorLoginButton {
    background: transparent;
    color: blue;
    border: solid 1px blue;
}

#solveMoreProblemsButton {
    margin: 20px 0 0 0;
    background: #10ab01;
}

#submitSuccessCloseButton {
    margin: 10px 0 0 0;
    background: transparent;
    border: solid 1px #10ab01;
    color: #10ab01;
}

#submitProcessing {
    border: solid 5px #908fff;
    box-shadow: 0 0 10px white;
    animation: submit-processing-border 2s infinite ease-in-out;
}

#submitSuccess {
    border: solid 5px #10ab01;
    box-shadow: 0 0 10px white;
    animation: submit-success-border 2s 2 ease-in-out;

}

#submitProcessingTitle,
#submitSuccessTitle {
    color: #908fff;
    font-size: 1.5rem;
}

#submitSuccessTitle {
    color: #10ab01;
}

#submitProcessingMessage,
#submitSuccessMessage {
    margin:  10px 0 0 0;
}

@keyframes submit-processing-border {
    0% {
        border: solid 5px #908fff;
    }
    50% {
        border: solid 5px #ffffff;
    }
    100% {
        border: solid 5px #908fff;
    }
}

@keyframes submit-success-border {
    0% {
        border: solid 5px #10ab01;
    }
    50% {
        border: solid 5px #ffffff;
    }
    100% {
        border: solid 5px #10ab01;
    }
}

#formulaStripe {
    display: grid;
    grid-template-columns: min-content min-content auto;
    width: 100%;
    height: var(--formula-stripe-height);
    align-content: start;
    align-items: start;
    padding: 0;
    margin: 0;
    border: solid var(--formula-stripe-bottom-border-size) lightgray;
    border-left: 0;
    border-right: 0;
    font-size: 13px;
}

#activeCellLocationDisplayWr {
    background: white;
    height: 100%;
    display: grid;
    align-content: start;
    align-items: start;
    padding: 0 40px 0 10px;
    border-right: solid 1px lightgray;
    font-size: 15px;
}

#activeCellLocationDisplay {
    width: 5ch;
    margin: 0;
    margin-top: 5px;
}

#formulaBarIcons {
    font-family: "Apple Chancery";
    background: white;
    font-weight: bolder;
    color: #737373;
    margin: 0;
    display: grid;
    align-content: center;
    align-items: center;
    height: 100%;
    grid-template-columns: auto auto;
}

#formulaBarIcons span,
#formulaBarIcons p {
    padding: 0 15px 0 15px;
    margin: 0;
}

#lock {
    width: 1.5rem;
}

#formulaStripe-formulaDisplayWrapper {
    position: relative;
    height: var(--formula-stripe-height);
}

#formulaStripe-formulaDisplay,
#formulaStripe-formulaInput,
#formulaStripe-formulaInput:focus,
#formulaStripe-formulaInput:hover,
#formulaStripe-formulaInput:active,
.formulaDisplay,
.formulaInput,
.formulaInput:focus,
.formulaInput:hover,
.formulaInput:active {
    background: transparent;
    color: transparent;
    caret-color: black;
    border: none;
    margin: 0;
    padding: 0;
    border-radius: 0;
    outline: none;
    resize: none;
    line-height: inherit;
    height: calc(100% - 10px);
    overflow: hidden;
    overflow-wrap: break-word;
    position: absolute;
    top: 0;
    left: 0;
    font-size: 1rem;
    font-family: var(--default-font-family);
    width: 100%;
    padding: 5px 0;
    white-space: pre-wrap;
}

#formulaStripe-formulaDisplay {
    color: black;
}

.cellDisplayWrapper {
    width: 100%;
    height: 100%;
    background: white;
}

.formulaDisplay,
.formulaInput,
.formulaInput:focus,
.formulaInput:hover,
.formulaInput:active {
    width: unset;
    min-width: calc(100% - 9px);
    min-height: calc(var(--standard-cell-height) - 4px);
    height: fit-content;
    margin: 0;
    padding: 0;
    padding-top: 2px;
    padding-left: 5px;
    padding-right: 2px;
    z-index: 101;
    top: -1px;
    left: -1px;
    border: solid 2px var(--active-cell-border-color);
}

.formulaDisplay {
    background: white;
    color: black;
    z-index: 100;
}

.valueDisplay {
    border: none;
    margin: 0;
    padding: 0;
    border-radius: 0;
    outline: none;
    resize: none;
    line-height: inherit;
    overflow: hidden;
    overflow-wrap: break-word;
    white-space: pre;
    position: absolute;
    top: 0;
    left: 0;
    font-size: 1rem;
    font-family: var(--default-font-family);
    padding: 5px 0;
    min-height: calc(var(--standard-cell-height) - 4px);
    height: fit-content;
    margin: 0;
    padding: 0;
    padding-top: 2px;
    padding-left: 5px;
    min-width: calc(var(--standard-cell-width) - 5px);
    background: transparent;
    color: black;
    z-index: 98;
}

#typingHelper {
    background: transparent;
    color: transparent;
    width: 0px;
    height: 0px;
    margin: 0;
    padding: 0;
    position: fixed;
}

.activeRangeBox {
    border-color: var(--active-cell-border-color);
    border-style: solid;
    width: var(--standard-cell-width);
    height: var(--standard-cell-height);
    position: absolute;
    top: -1px;
    left: -1px;
    background: #00000017;
    z-index: 99;
}

#activeCellBox {
    background: transparent;
}

#problemWrapperOuter,
#problemWrapperOuterBuffer {
    display: grid;
    justify-content: center;
    justify-items: start;
    background: #f0f0f0;
    width: 100vw;
}

#problemWrapperInner,
#problemWrapperInnerBuffer {
    margin: 10px;
    border-radius: 8px;
    box-shadow: 0 0 3px #a8a8a8;
    background: white;
    width: calc(100vw - 20px);
}

.contentSection {
    border-top: solid 1px #e4e4e4;
}

#descriptionTitle,
#descriptionTitleBuffer,
#solutionTitle,
#submissionsTitle {
    margin: 0;
    font-weight: bold;
    font-size: 1.2rem;
    padding: 0 40px;
    margin-top: 20px;
}

#descriptionTitle,
#descriptionTitleBuffer {
    padding: 0;
    margin-top: 0;
}

#submissionsMsg {
    padding: 0 40px;
    margin: 20px 0;
}

#submissionsMsg a {
    text-decoration: underline;
}

#descriptionContentWrapper,
#descriptionContentWrapperBuffer,
#solutionContentWrapper,
#hintContentWrapper {
    display: grid;
    grid-template-columns: auto;
    column-gap: 40px;
    line-height: 1.5;
    padding: 20px 40px;
    padding-top: 0;
}

#descriptionContent,
#descriptionContentBuffer,
#solutionContent,
#hintContent {
    margin: 0;
    margin-top: 20px;
    max-width: 650px;
}

#buttonsWrapper {
    display: grid;
    grid-template-columns: auto auto;
    justify-content: space-between;
    align-content: center;
    align-items: center;
    background: #fafafa;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    line-height: 0;
}

#buttonsWrapperLeft {
    display: grid;
    grid-template-columns: repeat(4, min-content);
    column-gap: 0px;
    max-width: calc(100vw - 100px);
    overflow-x: auto;
}

.contentButton,
.contentButton:hover,
.contentButton:active,
.contentButton:focus {
    padding: 10px 10px;
    border-radius: 0;
    width: min-content;
    border-bottom: solid 1px transparent;
    color: #737373;
}

.contentButton:nth-child(1) {
    padding-left: 20px;
}

.contentButtonActive,
.contentButtonActive:hover,
.contentButtonActive:active,
.contentButtonActive:focus {
    border-bottom: solid 1px black;
    color: black;
}

#collapseSection {
    max-height: max(min(300px, calc(100vh - 500px)), 150px);
    /* max-height: 300px; */
    overflow-y: auto;

}

#expandToggle {
    height: min-content;
    margin: 5px 20px;
    font-size: 1.5rem;
    border-top-right-radius: 8px;
}

#controlsStripe {
    background: #f0f0f0;
    display: grid;
    grid-template-columns: auto auto;
    justify-content: space-between;
    padding: 0px 10px;
    align-content: center;
    align-items: center;
    padding-bottom: 5px;
}

#controlsStripeLeft {
    display: grid;
    grid-template-columns: auto auto;
    column-gap: 10px;
    align-content: center;
    align-items: center;
}


#reset {
    width: 20px;
}

#testCasesWrapperOuter,
#solutionApproachWrapperOuter,
#hintWrapperOuter {
    border: none;
    background: #fafafa;
    box-shadow: 0 0 3px #a8a8a8;
    display: grid;
    grid-template-columns: auto auto;
    column-gap: 10px;
    padding: 5px 10px;
    border-radius: 2px;
    align-content: center;
    align-items: center;
    font-size: 0.9rem;
    justify-content: center;
    justify-items: center;
    row-gap: 10px;
    white-space: nowrap;
}

#testCaseToolTipTitleWrapper {
    display: grid;
    grid-template-columns: auto auto;
    column-gap: 5px;
    padding: 0;
    margin: 0;
    align-content: center;
    align-items: center;
}

#testCaseToolTip {
    width: 1rem;
}

#solutionApproachWrapperOuter,
#hintWrapperOuter {
    background: transparent;
    box-shadow: none;
    margin: 10px 40px 0;
    justify-content: start;
    justify-items: start;
    border-bottom: solid 1px #e0e0e0;
    padding-left: 0;
    padding-bottom: 10px;
}

#testCasesWrapperInner,
#solutionApproachWrapperInner,
#hintWrapperInner {
    display: flex;
    column-gap: 2px;
    /* grid-template-columns: repeat(3, auto); */
}

.testCase,
.testCase:active,
.testCase:hover,
.testCase:focus,
.solutionApproach,
.solutionApproach:active,
.solutionApproach:hover,
.solutionApproach:focus,
.hint,
.hint:active,
.hint:hover,
.hint:focus {
    background: none;
    padding: 5px 10px;
    border-radius: 2px;
    color: #6a6a6a;
}

.activeTestCase,
.activeTestCase:active,
.activeTestCase:hover,
.activeTestCase:focus,
.activeSolutionApproach,
.activeSolutionApproach:active,
.activeSolutionApproach:hover,
.activeSolutionApproach:focus,
.activeHint,
.activeHint:active,
.activeHint:hover,
.activeHint:focus,
.testCase:hover,
.solutionApproach:hover,
.hint:hover {
    background: #1d1d1d;
    color: white;
}

#expectedCellValueWrapper,
#mobileExpectedCellValueWrapper {
    display: grid;
    grid-template-columns: auto;
    column-gap: 0px;
    align-content: center;
    align-items: center;
    padding: 5px 10px;
    background: var(--output-cell-background-color);
    box-shadow: 0 0 3px #a8a8a8;
    justify-content: start;
    justify-items: start;
}

#mobileExpectedCellValueWrapperOuter {
    background: #f0f0f0;
    padding-bottom: 10px;
}

#mobileExpectedCellValueWrapperOuterBuffer {
    height: 10px;
}

#mobileExpectedCellValueWrapper {
    display: none;
    margin: 0 10px;
}

.expectedCellValue {
    padding: 5px 0;
    font-size: 0.9rem;
    margin: 0;
}

.expectedValueShowHideButton,
.expectedValueShowHideButton:focus,
.expectedValueShowHideButton:active,
.expectedValueShowHideButton:hover {
    color: blue;
    display: inline-block;
    padding: 0;
    margin: 0;
}

.submitButton,
.submitButton:active,
.submitButton:focus,
.submitButton:hover {
    font-size: 0.9rem;
    background: #0dab00;
    background: var(--principal-green);
    color: white;
    font-weight: bold;
    padding: 10px 20px;
    border-radius: 2px;
    box-shadow: 0 0 3px #a8a8a8;
}

.submitButtonInactive,
.submitButtonInactive:active,
.submitButtonInactive:focus,
.submitButtonInactive:hover {
    background: #a4a4a4;
    color: #4c4c4c;
    cursor: unset;
}

.outputCells,
.inputCells {
    background: var(--output-cell-background-color);
    padding: 3px 5px;
    border: solid 1px lightgray;
    display: inline-block;
    line-height: 1;
    margin: 0;
}

.inputCells {
    background: var(--input-cell-background-color);
    /* color: blue; */
}

#goBackWrapper,
#submitFailedWrapper {
    background: hsl(0deg 0% 22.8%);
    color: white;
    display: grid;
    grid-template-columns: auto auto;
    justify-content: center;
    justify-items: center;
    align-content: center;
    align-items: center;
    padding: 5px 0;
}

#submitFailedWrapper {
    background: hsl(354.94deg 100% 31.93%);
    color: white;
}

#goBackMsg,
#submitFailedMsg {
    margin: 10px 20px;
    text-align: center;
}

#submitFailedTitle {
    font-weight: bold;
    margin: 10px 20px 0 20px;
}

#goBackButton,
#submitFailedButton {
    padding: 8px 16px;
    margin: 5px;
    border: solid 1px lightgray;
    border-radius: 100px;
    background: white;
    color: black;
    font-size: 0.9rem;
    cursor: pointer;
}

#submissionsContainer {
    display: grid;
    grid-template-columns: auto;
    margin: 20px 40px;
}

.submission,
.submission:active,
.submission:focus {
    border-top: solid 1px transparent;
    border-bottom: solid 1px transparent;
}

.activeSubmission,
.submission:hover {
    background: #efefef;
    border-top: solid 1px #e0e0e0;
    border-bottom: solid 1px #e0e0e0;
}

.submissionInnerWrapper {
    display: grid;
    grid-template-columns: auto auto;
    justify-content: start;
    justify-items: start;
    column-gap: 50px;
}

.submissionTitle {
    width: 100px;
    text-align: left;
}

.submissionTitlePassed {
    color: green;
}

.submissionTitleFailed {
    color: red;
}

#submissionFailedReason {
    text-align: left;
    color: red;
    font-style: italic;
    margin-top: 0;
}

#descriptionTagsContainer,
#descriptionTagsContainerBuffer {
    display: flex;
    flex-flow: wrap;
    column-gap: 5px;
    row-gap: 5px;
    margin: 0;
    margin-top: 20px;
    line-height: 1;
}

#titleIconWrapper,
#titleIconWrapperBuffer {
    display: grid;
    grid-template-columns: auto auto;
    justify-content: space-between;
    align-content: center;
    align-items: center;
    padding: 0 40px;
    margin-top: 20px;
    column-gap: 10px;
    row-gap: 10px;
}

.tagIcon,
.tagIcon:hover,
.tagIcon:focus,
.tagIcon:active {
    margin: 0;
    background: var(--tag-icon-background);
    color: #ffffff;
    padding: 4px 10px;
    font-size: 0.8rem;
    border-radius: 2px;
    white-space: nowrap;
    cursor: pointer;
}

.statusIcon,
.statusIcon:hover,
.statusIcon:active,
.statusIcon:focus {
    margin: 0;
    padding: 4px 10px;
    font-size: 0.8rem;
    border-radius: 2px;
    white-space: nowrap;
    background: #f8f8f8;
    color: #7d7d7d;
    border: solid 1px #7d7d7d;
    border-radius: 50px;
    font-weight: bold;
}

.statusIconEasy,
.statusIconEasy:hover,
.statusIconEasy:active,
.statusIconEasy:focus {
    color: var(--easy-color);
}

.statusIconMedium,
.statusIconMedium:hover,
.statusIconMedium:active,
.statusIconMedium:focus {
    /* color: #3030ff; */
    color: var(--medium-color);
}

.statusIconHard,
.statusIconHard:hover,
.statusIconHard:active,
.statusIconHard:focus {
    color: var(--hard-color);
}

#statusIconSolved,
#statusIconSolved:hover,
#statusIconSolved:active,
#statusIconSolved:focus {
    background: var(--solved-background);
    color: var(--solved-color);
    border: solid 1px var(--solved-color);
}

#seeHideTags,
#seeHideTagsBuffer {
    font-size: 0.8rem;
    text-decoration: underline;
    margin: 0;
    color: #757575;
    padding: 4px 0;
}

.confetti-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
    z-index: 200;
}

.confetti-container div {
    position: absolute;
    pointer-events: none;
}

#cannotEditWrapper {
    position: absolute;
    bottom: 0;
    left: 0;
    white-space: nowrap;
    background: white;
    border: solid 1px lightgrey;
    padding: 3px 0px;
    transform: translateY(calc(100% + 3px));
    box-shadow: 0 0 3px black;
    font-family: var(--default-font-family);
    color: black;
    font-weight: normal;
    display: none;
}

#lock:hover + #cannotEditWrapper {
    display: block;
}

#formulaStripe-formulaStructureReference {
    position: absolute;
    top: 100%;
    padding: 5px;
    margin: 2px 2px 0 0;
    background: white;
    box-shadow: 0 0 5px black;
    pointer-events: none;
}

.formulaStructureReferenceActiveArg {
    font-weight: bold;
}

#formulaStripe-formulaAutoSuggestions {
    position: absolute;
    top: 100%;
    padding: 5px;
    margin: 2px 2px 0 0;
    background: white;
    box-shadow: 0 0 5px black;
    display: flex;
    padding: 0;
    /* column-gap: 5px; */
    max-width: calc(100vw - 135px);
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    cursor: pointer;
}

#formulaStripe-formulaAutoSuggestions::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.formulaAutoSuggestion {
    margin: 0;
    padding: 5px;
}

.formulaAutoSuggestionActive {
    background: #1d1d1d;
    color: white;
}

#contextMenu {
    display: block;
    position: fixed;
    z-index: 180;
    background: white;
    border: 1px solid #ccc;
    font-size: 0.9rem;
}

.contextMenuItem {
    margin: 0;
    padding: 6px 15px;
    cursor: pointer;
    display: grid;
    grid-template-columns: auto auto;
    justify-content: space-between;
    align-content: center;
    align-items: center;
    column-gap: 20px;
}

.contextMenuItem:hover {
    background: black;
    color: white;
}

.contextMenuShortcut {
    color: #8f8f8f;
}

@keyframes confetti-fall {
    0% {
        transform: translateY(-100%) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: translateY(200vh) rotate(360deg);
    }
}

@media screen and (max-width: 630px) {
    #titleIconWrapper,
    #titleIconWrapperBuffer {
        grid-template-columns: auto;
    }
}

@media screen and (max-width: 660px) {
    #controlsStripeLeft {
        grid-template-columns: auto;
    }

    #expectedCellValueWrapper {
        display: none;
    }

    #mobileExpectedCellValueWrapper {
        display: grid;
    }

    #mobileExpectedCellValueWrapperOuterBuffer {
        height: 46.5px;
    }
}

@media screen and (max-width: 455px) {
    #descriptionTitle,
    #descriptionTitleBuffer,
    #solutionTitle,
    #submissionsTitle {
        font-size: 1rem;
    }

    .contentButton,
    .contentButton:hover,
    .contentButton:active,
    .contentButton:focus {
        font-size: 0.9rem;
    }

    .contentButtonActive,
    .contentButtonActive:hover,
    .contentButtonActive:active,
    .contentButtonActive:focus {
        border-bottom: solid 1px transparent;
    }

    #descriptionContentWrapper,
    #descriptionContentWrapperBuffer,
    #solutionContentWrapper,
    #hintContentWrapper {
        font-size: 0.9rem;
    }

    #controlsStripeLeft {
        column-gap: 10px;
    }

    .tagIcon,
    .tagIcon:hover,
    .tagIcon:focus,
    .tagIcon:active,
    .statusIcon {
        font-size: 0.7rem;
    }
}