.jch-practice {
--jch-blue: #398ad7;
--jch-blue-dark: #2f66a9;
--jch-teal: #08b6ce;
--jch-yellow: #fdd835;
--jch-charcoal: #3c4148;
--jch-muted: #68757e;
--jch-border: #e0e6eb;
--jch-panel: #f7fbfc;
--jch-white: #ffffff;
--jch-range: #398ad7;
width: 100%;
max-width: 860px;
margin: 1.5rem auto;
color: var(--jch-charcoal);
font-family: Lato, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
line-height: 1.55;
}
.jch-practice[data-jch-theme="google-sheets"] {
--jch-blue: #1a73e8;
--jch-blue-dark: #1765cc;
--jch-teal: #34a853;
--jch-yellow: #ccead6;
--jch-charcoal: #202124;
--jch-muted: #5f6368;
--jch-border: #dfe4ea;
--jch-panel: #f7fbf8;
--jch-range: #f9ab00;
}
.jch-practice[data-jch-theme="google-sheets"] .jch-practice__task,
.jch-practice[data-jch-theme="google-sheets"] .jch-practice__why,
.jch-practice[data-jch-theme="google-sheets"] .jch-practice__feedback,
.jch-practice[data-jch-theme="google-sheets"] .jch-practice__formula-bar {
background: #f8fbf8;
}
.jch-practice[data-jch-theme="google-sheets"] .jch-practice__grid thead th,
.jch-practice[data-jch-theme="google-sheets"] .jch-practice__row-heading,
.jch-practice[data-jch-theme="google-sheets"] .jch-practice__corner {
background: #f1f3f4;
}
.jch-practice[data-jch-theme="google-sheets"] .jch-practice__cell--header {
background: #eef7f0;
border-bottom-color: #cfe7d5 !important;
}
.jch-practice[data-jch-theme="google-sheets"] .jch-practice__cell--selected {
background: rgba(249, 171, 0, .07);
}
.jch-practice[data-jch-theme="google-sheets"] .jch-practice__cell--target.is-active,
.jch-practice[data-jch-theme="google-sheets"] .jch-practice__cell--formula.is-active {
background: rgba(26, 115, 232, .06);
outline-color: #1a73e8;
}
.jch-practice[data-jch-theme="google-sheets"] .jch-practice__why {
border-left-color: var(--jch-teal);
background: #f6fbf7;
}
.jch-practice *,
.jch-practice *::before,
.jch-practice *::after {
box-sizing: border-box;
}
.jch-practice__topline,
.jch-practice__status-row,
.jch-practice__actions,
.jch-practice__formula-bar {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: .65rem;
}
.jch-practice__topline { margin-bottom: .6rem; }
.jch-practice__eyebrow {
display: inline-flex;
align-items: center;
border: 1px solid var(--jch-border);
border-radius: 999px;
padding: .3rem .7rem;
font-size: .88rem;
font-weight: 700;
background: var(--jch-white);
}
.jch-practice__meta,
.jch-practice__status,
.jch-practice__tip {
color: var(--jch-muted);
font-size: .92rem;
}
.jch-practice__title,
.jch-practice h3 {
font-family: Poppins, Lato, system-ui, sans-serif;
color: var(--jch-charcoal);
}
.jch-practice__title {
font-size: clamp(1.35rem, 2.5vw, 1.9rem);
line-height: 1.25;
margin: 0 0 .45rem;
}
.jch-practice__intro { margin: 0 0 1.2rem; }
.jch-practice__task,
.jch-practice__why,
.jch-practice__feedback {
border: 1px solid var(--jch-border);
border-radius: 14px;
padding: 1rem 1.1rem;
background: var(--jch-panel);
margin: 0 0 1rem;
}
.jch-practice__task h3,
.jch-practice__why h3,
.jch-practice__feedback h3 {
margin: 0 0 .45rem;
font-size: 1rem;
}
.jch-practice__task p,
.jch-practice__why p,
.jch-practice__feedback p {
margin: .3rem 0;
}
.jch-practice__formula-bar {
flex-wrap: nowrap;
align-items: center;
border: 1px solid var(--jch-border);
border-radius: 10px;
background: var(--jch-panel);
padding: .5rem;
margin-bottom: .75rem;
}
.jch-practice__name-box {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: 56px;
height: 44px;
min-width: 56px;
min-height: 44px;
max-height: 44px;
border: 1px solid var(--jch-border);
border-radius: 7px;
text-align: center;
padding: 0 .55rem;
margin: 0;
background: var(--jch-white);
font-weight: 700;
line-height: 1.2;
}
.jch-practice__formula-input {
flex: 1 1 auto;
min-width: 0;
width: 100%;
height: 44px !important;
min-height: 44px !important;
max-height: 44px !important;
border: 1px solid var(--jch-border);
border-radius: 7px;
background: var(--jch-white);
color: var(--jch-charcoal);
padding: 0 .8rem !important;
margin: 0 !important;
font-family: inherit;
font-size: 16px !important;
font-weight: 400;
line-height: 1.2 !important;
}
.jch-practice__formula-input:focus {
outline: 3px solid rgba(57, 138, 215, .18);
border-color: var(--jch-blue);
}
.jch-practice__status-row {
justify-content: space-between;
margin-bottom: .65rem;
font-size: .9rem;
}
.jch-practice__grid-wrap {
position: relative;
overflow-x: auto;
border: 1px solid var(--jch-border);
border-radius: 12px;
background: var(--jch-white);
margin-bottom: 1rem;
}
.jch-practice__grid {
width: 100%;
min-width: 460px;
border-collapse: collapse;
table-layout: fixed;
font-size: .96rem;
user-select: none;
}
.jch-practice__grid th,
.jch-practice__grid td {
height: 44px !important;
min-height: 44px;
border-right: 1px solid var(--jch-border);
border-bottom: 1px solid var(--jch-border);
padding: 0 .65rem !important;
vertical-align: middle;
line-height: 1.25;
}
.jch-practice__grid tr:last-child th,
.jch-practice__grid tr:last-child td { border-bottom: 0; }
.jch-practice__grid th:last-child,
.jch-practice__grid td:last-child { border-right: 0; }
.jch-practice__grid thead th,
.jch-practice__row-heading,
.jch-practice__corner {
background: #f4f6f8;
text-align: center;
font-weight: 600;
color: var(--jch-muted);
}
.jch-practice__grid thead th:first-child,
.jch-practice__row-heading {
width: 48px;
}
.jch-practice__cell--header,
.jch-practice__cell--label { font-weight: 700; }
.jch-practice__cell--header {
background: #eef8fb;
border-bottom-color: #c8e6ec !important;
color: var(--jch-charcoal);
}
.jch-practice__cell--number { text-align: right; }
.jch-practice__cell--selectable { cursor: cell; }
.jch-practice__cell--selected {
background: rgba(57, 138, 215, .09);
}
.jch-practice__cell--target {
text-align: right;
font-weight: 700;
cursor: text;
}
.jch-practice__cell--target.is-active {
background: rgba(8, 182, 206, .07);
outline: 2px solid var(--jch-teal);
outline-offset: -2px;
} .jch-practice__marquee {
position: absolute;
display: none;
pointer-events: none;
z-index: 4;
padding: 2px;
background:
linear-gradient(90deg, var(--jch-range) 50%, transparent 50%) 0 0 / 8px 2px repeat-x,
linear-gradient(90deg, var(--jch-range) 50%, transparent 50%) 0 100% / 8px 2px repeat-x,
linear-gradient(0deg, var(--jch-range) 50%, transparent 50%) 0 0 / 2px 8px repeat-y,
linear-gradient(0deg, var(--jch-range) 50%, transparent 50%) 100% 0 / 2px 8px repeat-y;
animation: jch-marching-ants .9s linear infinite;
}
.jch-practice__marquee.is-visible { display: block; }
@keyframes jch-marching-ants {
to {
background-position: 8px 0, -8px 100%, 0 -8px, 100% 8px;
}
}
@media (prefers-reduced-motion: reduce) {
.jch-practice__marquee { animation: none; }
}
.jch-practice__actions {
margin-bottom: 1rem;
}
.jch-practice__button {
min-height: 44px;
border: 1px solid var(--jch-border);
border-radius: 9px;
background: var(--jch-white);
color: var(--jch-charcoal);
padding: .6rem .9rem;
font: inherit;
font-weight: 700;
cursor: pointer;
}
.jch-practice__button:hover,
.jch-practice__button:active {
border-color: var(--jch-blue-dark);
background: var(--jch-blue-dark);
color: var(--jch-white);
}
.jch-practice__button:focus-visible {
outline: 3px solid rgba(57, 138, 215, .22);
outline-offset: 2px;
}
.jch-practice__button--primary {
border-color: var(--jch-blue-dark);
background: var(--jch-blue-dark);
color: var(--jch-white);
}
.jch-practice__button--primary:hover,
.jch-practice__button--primary:active {
background: #285a97;
border-color: #285a97;
color: var(--jch-white);
}
.jch-practice__feedback.is-success {
border-color: #9bd6c0;
background: #f3fbf7;
}
.jch-practice__why {
border-left: 5px solid var(--jch-yellow);
background: #fffdf2;
}
@media (max-width: 560px) {
.jch-practice__status-row { align-items: flex-start; flex-direction: column; gap: .2rem; }
.jch-practice__formula-bar { align-items: center; gap: .45rem; }
.jch-practice__name-box { width: 48px; min-width: 48px; }
.jch-practice__actions .jch-practice__button { flex: 1 1 140px; }
} .jch-practice__grid--wide {
min-width: 780px;
}
.jch-practice__cell--formula {
position: relative;
text-align: right;
font-weight: 700;
cursor: cell;
}
.jch-practice__cell--fill-target {
text-align: right;
cursor: cell;
}
.jch-practice__cell--formula.is-active {
background: rgba(8, 182, 206, .07);
outline: 2px solid var(--jch-teal);
outline-offset: -2px;
}
.jch-practice__cell--formula.is-fill-preview {
background: rgba(57, 138, 215, .08);
box-shadow:
inset 2px 0 0 var(--jch-blue),
inset -2px 0 0 var(--jch-blue);
}
.jch-practice__cell--formula.is-fill-range-start {
box-shadow:
inset 2px 0 0 var(--jch-blue),
inset -2px 0 0 var(--jch-blue),
inset 0 2px 0 var(--jch-blue);
}
.jch-practice__cell--formula.is-fill-range-end {
box-shadow:
inset 2px 0 0 var(--jch-blue),
inset -2px 0 0 var(--jch-blue),
inset 0 -2px 0 var(--jch-blue);
}
.jch-practice__fill-handle {
position: absolute;
right: -5px;
bottom: -5px;
width: 11px;
height: 11px;
min-width: 11px;
min-height: 11px;
padding: 0;
margin: 0;
border: 2px solid var(--jch-white);
border-radius: 1px;
background: var(--jch-teal);
box-shadow: 0 0 0 1px var(--jch-teal);
cursor: crosshair;
z-index: 8;
}
.jch-practice__fill-handle:focus-visible {
outline: 3px solid rgba(57, 138, 215, .28);
outline-offset: 3px;
}
@media (max-width: 560px) {
.jch-practice__grid--wide {
min-width: 700px;
}
} .jch-practice[data-jch-exercise="moon-mallow-absolute-reference"] .jch-practice__grid--wide {
min-width: 650px;
}
.jch-practice[data-jch-exercise="moon-mallow-absolute-reference"] .jch-practice__grid th:nth-child(2),
.jch-practice[data-jch-exercise="moon-mallow-absolute-reference"] .jch-practice__grid td:nth-child(2) { width: 105px; }
.jch-practice[data-jch-exercise="moon-mallow-absolute-reference"] .jch-practice__grid th:nth-child(3),
.jch-practice[data-jch-exercise="moon-mallow-absolute-reference"] .jch-practice__grid td:nth-child(3) { width: 110px; }
.jch-practice[data-jch-exercise="moon-mallow-absolute-reference"] .jch-practice__grid th:nth-child(4),
.jch-practice[data-jch-exercise="moon-mallow-absolute-reference"] .jch-practice__grid td:nth-child(4) { width: 105px; }
.jch-practice[data-jch-exercise="moon-mallow-absolute-reference"] .jch-practice__grid th:nth-child(5),
.jch-practice[data-jch-exercise="moon-mallow-absolute-reference"] .jch-practice__grid td:nth-child(5),
.jch-practice[data-jch-exercise="moon-mallow-absolute-reference"] .jch-practice__grid th:nth-child(6),
.jch-practice[data-jch-exercise="moon-mallow-absolute-reference"] .jch-practice__grid td:nth-child(6) {
width: 38px;
padding-left: .2rem !important;
padding-right: .2rem !important;
}
.jch-practice[data-jch-exercise="moon-mallow-absolute-reference"] .jch-practice__grid th:nth-child(7),
.jch-practice[data-jch-exercise="moon-mallow-absolute-reference"] .jch-practice__grid td:nth-child(7) { width: 125px; }
.jch-practice[data-jch-exercise="moon-mallow-absolute-reference"] .jch-practice__grid th:nth-child(8),
.jch-practice[data-jch-exercise="moon-mallow-absolute-reference"] .jch-practice__grid td:nth-child(8) { width: 76px; }
.jch-practice__cell--editable-rate {
background: #fffdf2;
box-shadow: inset 0 0 0 2px rgba(253, 216, 53, .55);
padding-left: .25rem !important;
padding-right: .25rem !important;
}
.jch-practice__rate-editor {
display: inline-flex;
align-items: center;
justify-content: flex-end;
width: 100%;
gap: 2px;
}
.jch-practice__rate-input {
width: 48px;
height: 32px;
min-height: 32px;
margin: 0 !important;
padding: 0 .3rem !important;
border: 1px solid var(--jch-blue);
border-radius: 5px;
background: var(--jch-white);
color: var(--jch-charcoal);
font: inherit;
font-size: 15px !important;
text-align: right;
}
.jch-practice__rate-input:focus {
outline: 3px solid rgba(57, 138, 215, .18);
outline-offset: 1px;
}
.jch-practice__rate-suffix { font-weight: 700; }
.jch-practice__mini-challenge {
margin-top: .75rem;
padding: .7rem .8rem;
border-left: 4px solid var(--jch-yellow);
background: #fffdf2;
border-radius: 6px;
}
@media (max-width: 560px) {
.jch-practice[data-jch-exercise="moon-mallow-absolute-reference"] .jch-practice__grid--wide {
min-width: 650px;
}
} .jch-practice[data-jch-exercise="moon-mallow-if"] .jch-practice__grid--wide {
min-width: 755px;
}
.jch-practice[data-jch-exercise="moon-mallow-if"] .jch-practice__grid th:nth-child(2),
.jch-practice[data-jch-exercise="moon-mallow-if"] .jch-practice__grid td:nth-child(2) { width: 105px; }
.jch-practice[data-jch-exercise="moon-mallow-if"] .jch-practice__grid th:nth-child(3),
.jch-practice[data-jch-exercise="moon-mallow-if"] .jch-practice__grid td:nth-child(3) { width: 115px; }
.jch-practice[data-jch-exercise="moon-mallow-if"] .jch-practice__grid th:nth-child(4),
.jch-practice[data-jch-exercise="moon-mallow-if"] .jch-practice__grid td:nth-child(4) { width: 175px; }
.jch-practice[data-jch-exercise="moon-mallow-if"] .jch-practice__grid th:nth-child(5),
.jch-practice[data-jch-exercise="moon-mallow-if"] .jch-practice__grid td:nth-child(5),
.jch-practice[data-jch-exercise="moon-mallow-if"] .jch-practice__grid th:nth-child(6),
.jch-practice[data-jch-exercise="moon-mallow-if"] .jch-practice__grid td:nth-child(6) {
width: 38px;
padding-left: .2rem !important;
padding-right: .2rem !important;
}
.jch-practice[data-jch-exercise="moon-mallow-if"] .jch-practice__grid th:nth-child(7),
.jch-practice[data-jch-exercise="moon-mallow-if"] .jch-practice__grid td:nth-child(7) { width: 86px; }
.jch-practice[data-jch-exercise="moon-mallow-if"] .jch-practice__grid th:nth-child(8),
.jch-practice[data-jch-exercise="moon-mallow-if"] .jch-practice__grid td:nth-child(8) { width: 150px; }
.jch-practice[data-jch-exercise="moon-mallow-if"] .jch-practice__grid tbody tr:first-child td:nth-child(7),
.jch-practice[data-jch-exercise="moon-mallow-if"] .jch-practice__grid tbody tr:first-child td:nth-child(8) {
background: #fffdf2;
}
.jch-practice[data-jch-exercise="moon-mallow-if"] .jch-practice__cell--formula {
text-align: left;
} .jch-progress {
--jch-blue: #398ad7;
--jch-blue-dark: #2f66a9;
--jch-teal: #08b6ce;
--jch-yellow: #fdd835;
--jch-charcoal: #3c4148;
--jch-muted: #68757e;
--jch-border: #e0e6eb;
--jch-panel: #f7fbfc;
--jch-white: #ffffff;
width: 100%;
max-width: 860px;
margin: 1.25rem auto 1.75rem;
padding: 1.1rem 1.2rem 1.05rem 1.35rem;
border: 1px solid var(--jch-border);
border-left: 5px solid var(--jch-yellow);
border-radius: 12px;
background: var(--jch-white);
color: var(--jch-charcoal);
font-family: Lato, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
line-height: 1.5;
}
.jch-progress *,
.jch-progress *::before,
.jch-progress *::after {
box-sizing: border-box;
}
.jch-progress[data-jch-theme="google-sheets"] {
--jch-blue: #1a73e8;
--jch-blue-dark: #1765cc;
--jch-teal: #34a853;
--jch-yellow: #ccead6;
--jch-charcoal: #202124;
--jch-muted: #5f6368;
--jch-border: #dfe4ea;
--jch-panel: #f7fbf8;
border-left-color: var(--jch-teal);
}
.jch-progress__header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
margin-bottom: .8rem;
}
.jch-progress__title {
margin: 0 0 .2rem;
color: var(--jch-charcoal);
font-family: Poppins, Lato, system-ui, sans-serif;
font-size: 1.22rem;
line-height: 1.3;
}
.jch-progress__description {
margin: 0;
color: var(--jch-muted);
font-size: .95rem;
}
.jch-progress__count {
flex: 0 0 auto;
font-weight: 700;
white-space: nowrap;
}
.jch-progress__bar {
position: relative;
width: 100%;
height: 12px;
overflow: hidden;
border-radius: 999px;
background: #edf1f4;
margin: 0 0 .85rem;
}
.jch-progress__bar-fill {
display: block;
width: 0;
height: 100%;
border-radius: inherit;
background: linear-gradient(90deg, var(--jch-blue-dark), var(--jch-teal));
transition: width .28s ease;
}
@media (prefers-reduced-motion: reduce) {
.jch-progress__bar-fill { transition: none; }
}
.jch-progress__footer {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: .55rem 1rem;
}
.jch-progress__continue {
color: var(--jch-blue-dark);
font-weight: 700;
text-decoration: none;
}
.jch-progress__continue:hover,
.jch-progress__continue:focus-visible {
color: var(--jch-blue);
text-decoration: underline;
}
.jch-progress__continue:focus-visible {
outline: 3px solid rgba(57, 138, 215, .2);
outline-offset: 3px;
border-radius: 3px;
}
.jch-progress__note {
color: var(--jch-muted);
font-size: .84rem;
}
.jch-progress.is-complete {
border-left-color: var(--jch-teal);
}
@media (max-width: 640px) {
.jch-progress__header {
flex-direction: column;
gap: .45rem;
}
.jch-progress__count {
white-space: normal;
}
.jch-progress__footer {
align-items: flex-start;
flex-direction: column;
}
} .jch-practice[data-jch-theme="google-sheets"] .jch-practice__fill-handle {
right: -6px;
bottom: -6px;
width: 12px;
height: 12px;
min-width: 12px;
min-height: 12px;
border: 2px solid #ffffff;
border-radius: 50%;
background: #1a73e8;
box-shadow: 0 0 0 1px #1a73e8;
} .jch-practice--alternating-colours {
max-width: 980px;
}
.jch-sheets-sim {
border: 1px solid var(--jch-border);
border-radius: 12px;
background: #fff;
overflow: visible;
margin-bottom: 1rem;
}
.jch-sheets-menubar {
display: flex;
align-items: center;
gap: .2rem;
flex-wrap: wrap;
min-height: 44px;
padding: .35rem .55rem;
border-bottom: 1px solid #e3e7eb;
background: #f8fafd;
color: #202124;
font-size: .88rem;
}
.jch-sheets-menubar > span,
.jch-sheets-menu-button {
display: inline-flex;
align-items: center;
justify-content: center;
height: 32px;
padding: 0 .52rem;
margin: 0 !important;
border-radius: 5px;
white-space: nowrap;
line-height: 1 !important;
}
.jch-sheets-format-wrap {
position: relative;
display: flex;
align-items: center;
height: 32px;
margin: 0;
padding: 0;
}
.jch-sheets-menu-button {
appearance: none;
-webkit-appearance: none;
border: 0;
background: transparent;
color: inherit;
font: inherit;
cursor: pointer;
vertical-align: middle;
}
.jch-sheets-menu-button:hover,
.jch-sheets-menu-button[aria-expanded="true"] {
background: #e8f0fe;
}
.jch-sheets-format-menu {
position: absolute;
top: calc(100% + 4px);
left: 0;
z-index: 30;
width: 210px;
padding: .35rem 0;
border: 1px solid #dadce0;
border-radius: 6px;
background: #fff;
box-shadow: 0 5px 18px rgba(60, 64, 67, .22);
}
.jch-sheets-format-menu > span,
.jch-sheets-format-menu > button {
display: block;
width: 100%;
padding: .48rem .8rem;
border: 0;
background: transparent;
color: #202124;
font: inherit;
text-align: left;
}
.jch-sheets-format-menu .is-muted { color: #8a8d91; }
.jch-sheets-format-menu > button {
cursor: pointer;
font-weight: 600;
}
.jch-sheets-format-menu > button:hover { background: #f1f3f4; }
.jch-sheets-sim .jch-practice__status-row {
margin: 0;
padding: .55rem .75rem;
border-bottom: 1px solid #e3e7eb;
background: #fff;
}
.jch-sheets-workarea {
display: flex;
align-items: stretch;
min-width: 0;
}
.jch-sheets-grid-area {
flex: 1 1 auto;
min-width: 0;
padding: .75rem;
}
.jch-practice--alternating-colours .jch-practice__grid-wrap {
margin-bottom: 0;
border-radius: 6px;
}
.jch-practice--alternating-colours .jch-alt-grid {
min-width: 600px;
}
.jch-practice--alternating-colours .jch-alt-grid .jch-practice__cell--header {
background: #fff;
border-bottom-color: var(--jch-border) !important;
color: #202124;
}
.jch-alt-cell {
position: relative;
cursor: cell;
transition: background-color .12s ease;
}
.jch-alt-cell.is-selected {
background: rgba(26, 115, 232, .12) !important;
}
.jch-alt-selection-box {
position: absolute;
z-index: 8;
pointer-events: none;
border: 2px solid #1a73e8;
}
.jch-alt-selection-box::after {
content: "";
position: absolute;
right: -5px;
bottom: -5px;
width: 9px;
height: 9px;
border: 2px solid #fff;
border-radius: 50%;
background: #1a73e8;
box-shadow: 0 0 0 1px #1a73e8;
}
.jch-practice--alternating-colours[data-jch-alt-style="blue"] {
--jch-alt-header: #5b8def;
--jch-alt-band: #e8f0fe;
}
.jch-practice--alternating-colours[data-jch-alt-style="teal"] {
--jch-alt-header: #46bdc6;
--jch-alt-band: #e7f6f7;
}
.jch-practice--alternating-colours[data-jch-alt-style="green"] {
--jch-alt-header: #57bb8a;
--jch-alt-band: #e6f4ea;
}
.jch-practice--alternating-colours[data-jch-alt-style="yellow"] {
--jch-alt-header: #f6c344;
--jch-alt-band: #fef7e0;
}
.jch-alt-cell.jch-alt-header {
background: var(--jch-alt-header) !important;
color: #202124;
font-weight: 700;
}
.jch-alt-cell.jch-alt-band { background: var(--jch-alt-band) !important; }
.jch-alt-cell.jch-alt-plain { background: #fff !important; }
.jch-sheets-side-panel[hidden] {
display: none !important;
}
.jch-sheets-side-panel {
flex: 0 0 285px;
border-left: 1px solid #dadce0;
background: #fff;
padding: 0 0 .9rem;
}
.jch-sheets-side-panel__header {
display: flex;
justify-content: space-between;
align-items: center;
min-height: 54px;
padding: .75rem .9rem;
border-bottom: 1px solid #dadce0;
font-family: Poppins, Lato, sans-serif;
font-size: 1rem;
}
.jch-sheets-panel-close {
width: 34px;
height: 34px;
border: 0;
border-radius: 50%;
background: transparent;
color: #5f6368;
font-size: 1.45rem;
line-height: 1;
cursor: pointer;
}
.jch-sheets-panel-close:hover { background: #f1f3f4; }
.jch-sheets-panel-label {
display: block;
margin: .9rem .9rem .45rem;
color: #3c4043;
font-size: .9rem;
font-weight: 600;
}
.jch-sheets-panel-label input {
display: block;
width: 100%;
height: 40px;
margin-top: .35rem;
padding: 0 .6rem;
border: 1px solid #bdc1c6;
border-radius: 4px;
background: #fff;
color: #202124;
font: inherit;
}
.jch-sheets-style-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: .5rem;
padding: 0 .9rem .6rem;
}
.jch-sheets-style-choice {
min-width: 0;
padding: .2rem;
border: 2px solid transparent;
border-radius: 4px;
background: #fff;
cursor: pointer;
}
.jch-sheets-style-choice.is-active { border-color: #1a73e8; }
.jch-style-preview {
display: grid;
grid-template-rows: repeat(3, 10px);
border: 1px solid #dadce0;
}
.jch-style-preview i { display: block; }
.jch-style-preview--blue i:nth-child(1) { background: #5b8def; }
.jch-style-preview--blue i:nth-child(2) { background: #fff; }
.jch-style-preview--blue i:nth-child(3) { background: #e8f0fe; }
.jch-style-preview--teal i:nth-child(1) { background: #46bdc6; }
.jch-style-preview--teal i:nth-child(2) { background: #fff; }
.jch-style-preview--teal i:nth-child(3) { background: #e7f6f7; }
.jch-style-preview--green i:nth-child(1) { background: #57bb8a; }
.jch-style-preview--green i:nth-child(2) { background: #fff; }
.jch-style-preview--green i:nth-child(3) { background: #e6f4ea; }
.jch-style-preview--yellow i:nth-child(1) { background: #f6c344; }
.jch-style-preview--yellow i:nth-child(2) { background: #fff; }
.jch-style-preview--yellow i:nth-child(3) { background: #fef7e0; }
.jch-sheets-check-row {
display: flex;
align-items: center;
gap: .55rem;
margin: .5rem .9rem 1rem;
min-height: 40px;
color: #3c4043;
}
.jch-sheets-check-row input {
width: 19px;
height: 19px;
accent-color: #188038;
}
.jch-sheets-panel-actions {
display: flex;
justify-content: flex-end;
gap: .55rem;
padding: .3rem .9rem 0;
}
.jch-sheets-cancel,
.jch-sheets-done {
min-height: 40px;
padding: .45rem .85rem;
border-radius: 4px;
font: inherit;
font-weight: 700;
cursor: pointer;
}
.jch-sheets-cancel {
border: 1px solid #dadce0;
background: #fff;
color: #188038;
}
.jch-sheets-done {
border: 1px solid #188038;
background: #188038;
color: #fff;
}
.jch-sheets-cancel:hover { background: #f6f9f7; }
.jch-sheets-done:hover { background: #146c2e; }
@media (max-width: 760px) {
.jch-sheets-workarea { flex-direction: column; }
.jch-sheets-side-panel {
flex-basis: auto;
border-left: 0;
border-top: 1px solid #dadce0;
}
.jch-sheets-menubar { gap: .05rem; }
.jch-sheets-menubar > span,
.jch-sheets-menu-button { padding-left: .35rem; padding-right: .35rem; }
} .jch-practice[data-jch-exercise="cosmic-close-absolute-reference"] .jch-practice__grid--wide {
min-width: 650px;
}
.jch-practice[data-jch-exercise="cosmic-close-absolute-reference"] .jch-practice__grid th:nth-child(2),
.jch-practice[data-jch-exercise="cosmic-close-absolute-reference"] .jch-practice__grid td:nth-child(2) { width: 105px; }
.jch-practice[data-jch-exercise="cosmic-close-absolute-reference"] .jch-practice__grid th:nth-child(3),
.jch-practice[data-jch-exercise="cosmic-close-absolute-reference"] .jch-practice__grid td:nth-child(3) { width: 110px; }
.jch-practice[data-jch-exercise="cosmic-close-absolute-reference"] .jch-practice__grid th:nth-child(4),
.jch-practice[data-jch-exercise="cosmic-close-absolute-reference"] .jch-practice__grid td:nth-child(4) { width: 120px; }
.jch-practice[data-jch-exercise="cosmic-close-absolute-reference"] .jch-practice__grid th:nth-child(5),
.jch-practice[data-jch-exercise="cosmic-close-absolute-reference"] .jch-practice__grid td:nth-child(5),
.jch-practice[data-jch-exercise="cosmic-close-absolute-reference"] .jch-practice__grid th:nth-child(6),
.jch-practice[data-jch-exercise="cosmic-close-absolute-reference"] .jch-practice__grid td:nth-child(6) {
width: 38px;
padding-left: .2rem !important;
padding-right: .2rem !important;
}
.jch-practice[data-jch-exercise="cosmic-close-absolute-reference"] .jch-practice__grid th:nth-child(7),
.jch-practice[data-jch-exercise="cosmic-close-absolute-reference"] .jch-practice__grid td:nth-child(7) { width: 125px; }
.jch-practice[data-jch-exercise="cosmic-close-absolute-reference"] .jch-practice__grid th:nth-child(8),
.jch-practice[data-jch-exercise="cosmic-close-absolute-reference"] .jch-practice__grid td:nth-child(8) { width: 76px; }
@media (max-width: 560px) {
.jch-practice[data-jch-exercise="cosmic-close-absolute-reference"] .jch-practice__grid--wide { min-width: 650px; }
} .jch-practice[data-jch-exercise="cosmic-close-if"] .jch-practice__grid--wide {
min-width: 755px;
}
.jch-practice[data-jch-exercise="cosmic-close-if"] .jch-practice__grid th:nth-child(2),
.jch-practice[data-jch-exercise="cosmic-close-if"] .jch-practice__grid td:nth-child(2) { width: 105px; }
.jch-practice[data-jch-exercise="cosmic-close-if"] .jch-practice__grid th:nth-child(3),
.jch-practice[data-jch-exercise="cosmic-close-if"] .jch-practice__grid td:nth-child(3) { width: 115px; }
.jch-practice[data-jch-exercise="cosmic-close-if"] .jch-practice__grid th:nth-child(4),
.jch-practice[data-jch-exercise="cosmic-close-if"] .jch-practice__grid td:nth-child(4) { width: 175px; }
.jch-practice[data-jch-exercise="cosmic-close-if"] .jch-practice__grid th:nth-child(5),
.jch-practice[data-jch-exercise="cosmic-close-if"] .jch-practice__grid td:nth-child(5),
.jch-practice[data-jch-exercise="cosmic-close-if"] .jch-practice__grid th:nth-child(6),
.jch-practice[data-jch-exercise="cosmic-close-if"] .jch-practice__grid td:nth-child(6) {
width: 38px;
padding-left: .2rem !important;
padding-right: .2rem !important;
}
.jch-practice[data-jch-exercise="cosmic-close-if"] .jch-practice__grid th:nth-child(7),
.jch-practice[data-jch-exercise="cosmic-close-if"] .jch-practice__grid td:nth-child(7) { width: 86px; }
.jch-practice[data-jch-exercise="cosmic-close-if"] .jch-practice__grid th:nth-child(8),
.jch-practice[data-jch-exercise="cosmic-close-if"] .jch-practice__grid td:nth-child(8) { width: 150px; }
.jch-practice[data-jch-exercise="cosmic-close-if"] .jch-practice__grid tbody tr:first-child td:nth-child(7),
.jch-practice[data-jch-exercise="cosmic-close-if"] .jch-practice__grid tbody tr:first-child td:nth-child(8) {
background: #f6fbf7;
}
.jch-practice[data-jch-exercise="cosmic-close-if"] .jch-practice__cell--formula {
text-align: left;
} .jch-practice--pivot { max-width: 980px; }
.jch-excel-sim {
position: relative;
overflow: hidden;
margin: 0 0 1rem;
border: 1px solid #c8c8c8;
border-radius: 8px;
background: #fff;
box-shadow: 0 3px 14px rgba(0,0,0,.05);
color: #242424;
font-family: "Segoe UI", Arial, sans-serif;
}
.jch-excel-titlebar {
display: flex;
align-items: center;
gap: .55rem;
min-height: 38px;
padding: .35rem .65rem;
background: #217346;
color: #fff;
font-size: .88rem;
}
.jch-excel-appmark {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
background: rgba(255,255,255,.16);
font-weight: 700;
}
.jch-excel-ribbon-tabs {
display: flex;
align-items: stretch;
gap: 0;
min-height: 40px;
padding: 0 .4rem;
border-bottom: 1px solid #d9d9d9;
background: #fff;
overflow-x: auto;
}
.jch-excel-ribbon-tabs button {
flex: 0 0 auto;
min-height: 40px;
padding: 0 .72rem;
border: 0;
border-bottom: 3px solid transparent;
background: transparent;
color: #2b2b2b;
font: inherit;
font-size: .88rem;
cursor: pointer;
}
.jch-excel-ribbon-tabs button:hover:not(:disabled) { background: #f4f4f4; }
.jch-excel-ribbon-tabs button.is-active { border-bottom-color: #217346; color: #1f5f3c; font-weight: 600; }
.jch-excel-ribbon-tabs button.is-passive { cursor: default; }
.jch-excel-ribbon {
display: flex;
gap: .35rem;
min-height: 82px;
padding: .45rem .65rem;
border-bottom: 1px solid #d9d9d9;
background: #fafafa;
}
.jch-excel-ribbon[hidden] { display: none !important; }
.jch-excel-ribbon-command {
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: .25rem;
min-width: 82px;
padding: .35rem .55rem;
border: 1px solid transparent;
border-radius: 3px;
background: transparent;
color: #242424;
font: inherit;
font-size: .76rem;
line-height: 1.15;
cursor: pointer;
}
.jch-excel-ribbon-command:hover:not(:disabled) { border-color: #d0d0d0; background: #eee; }
.jch-excel-ribbon-command.is-muted { opacity: .55; cursor: default; }
.jch-pivot-icon { display: grid; grid-template-columns: repeat(2, 12px); grid-template-rows: repeat(2, 10px); gap: 1px; padding: 3px; border: 1px solid #217346; }
.jch-pivot-icon i { display: block; background: #d9eadf; }
.jch-pivot-icon i:first-child, .jch-pivot-icon i:nth-child(3) { background: #217346; }
.jch-pivot-icon--muted { filter: grayscale(1); }
.jch-excel-status { margin: 0; padding: .45rem .65rem; border-bottom: 1px solid #ddd; background: #f8f8f8; }
.jch-excel-grid-wrap { margin: 0; border: 0; border-radius: 0; }
.jch-pivot-source-grid { min-width: 720px; font-family: "Segoe UI", Arial, sans-serif; font-size: .88rem; }
.jch-pivot-source-grid .jch-practice__cell--header { background: #e2f0d9; color: #1f1f1f; font-weight: 600; }
.jch-pivot-source-cell.is-selected { background: rgba(33,115,70,.08) !important; }
.jch-pivot-selection-box {
position: absolute;
z-index: 6;
pointer-events: none;
border: 2px solid #217346;
box-shadow: inset 0 0 0 1px rgba(255,255,255,.8);
}
.jch-excel-sheet-tabs {
display: flex;
align-items: flex-end;
gap: .15rem;
min-height: 36px;
padding: .25rem .5rem 0;
border-top: 1px solid #d8d8d8;
background: #f3f3f3;
}
.jch-excel-sheet-tabs button {
min-height: 30px;
padding: .3rem .85rem;
border: 0;
border-bottom: 3px solid transparent;
background: transparent;
color: #333;
font: inherit;
font-size: .82rem;
cursor: pointer;
}
.jch-excel-sheet-tabs button.is-active { border-bottom-color: #217346; background: #fff; font-weight: 600; }
.jch-excel-sheet-tabs button[hidden] { display: none !important; }
.jch-pivot-dialog-backdrop {
position: absolute;
inset: 0;
z-index: 30;
display: flex;
align-items: center;
justify-content: center;
padding: 1rem;
background: rgba(0,0,0,.22);
}
.jch-pivot-dialog-backdrop[hidden] { display: none !important; }
.jch-pivot-dialog {
width: min(520px, 96%);
border: 1px solid #aaa;
border-radius: 4px;
background: #fff;
box-shadow: 0 14px 34px rgba(0,0,0,.28);
}
.jch-pivot-dialog__titlebar {
display: flex;
justify-content: space-between;
align-items: center;
min-height: 44px;
padding: .55rem .75rem;
border-bottom: 1px solid #ddd;
}
.jch-pivot-dialog__titlebar button { width: 30px; height: 30px; border: 0; background: transparent; font-size: 1.25rem; cursor: pointer; }
.jch-pivot-dialog__body { padding: .8rem 1rem .5rem; font-size: .9rem; }
.jch-pivot-dialog__body p { margin: .3rem 0 .65rem; }
.jch-pivot-dialog__body label:not(.jch-pivot-radio) { display: block; margin: .2rem 0 .85rem; }
.jch-pivot-dialog__body input[type="text"] { display: block; width: 100%; height: 38px; margin-top: .35rem; padding: 0 .55rem; border: 1px solid #b7b7b7; border-radius: 2px; font: inherit; }
.jch-pivot-radio { display: flex; align-items: center; gap: .45rem; margin: .45rem 0; }
.jch-pivot-radio input { accent-color: #217346; }
.jch-pivot-radio.is-disabled { opacity: .55; }
.jch-pivot-dialog__actions { display: flex; justify-content: flex-end; gap: .5rem; padding: .7rem 1rem .9rem; }
.jch-pivot-workspace { display: flex; min-height: 470px; }
.jch-pivot-workspace[hidden], .jch-pivot-source-view[hidden] { display: none !important; }
.jch-pivot-sheet-area { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; background: #fff; }
.jch-pivot-context-tabs { display: flex; gap: .25rem; min-height: 32px; padding: .35rem .6rem; border-bottom: 1px solid #ddd; background: #fafafa; font-size: .76rem; color: #7a287d; }
.jch-pivot-context-tabs span { padding: .2rem .45rem; border-bottom: 2px solid #7a287d; }
.jch-pivot-result-sheet {
flex: 1 1 auto;
min-height: 390px;
padding: 44px 34px;
background-color: #fff;
background-image: linear-gradient(#e7e7e7 1px, transparent 1px), linear-gradient(90deg, #e7e7e7 1px, transparent 1px);
background-size: 84px 24px;
}
.jch-pivot-placeholder { display: inline-flex; flex-direction: column; gap: .25rem; max-width: 330px; padding: .85rem 1rem; border: 1px dashed #999; background: rgba(255,255,255,.94); color: #555; font-size: .86rem; }
.jch-pivot-result { border-collapse: collapse; min-width: 330px; background: #fff; font-size: .88rem; box-shadow: 0 0 0 1px #d6d6d6; }
.jch-pivot-result th, .jch-pivot-result td { min-width: 150px; padding: .38rem .55rem; border: 1px solid #d6d6d6; text-align: left; }
.jch-pivot-result th { background: #d9eaf7; color: #1f1f1f; font-weight: 700; }
.jch-pivot-result td:nth-child(2) { text-align: right; }
.jch-pivot-result tr.is-grand-total td { background: #d9eaf7; font-weight: 700; }
.jch-pivot-fields-pane { flex: 0 0 285px; padding: 0 0 .7rem; border-left: 1px solid #cfcfcf; background: #fff; }
.jch-pivot-fields-pane__header { display: flex; justify-content: space-between; align-items: center; min-height: 44px; padding: .55rem .75rem; border-bottom: 1px solid #d9d9d9; background: #fafafa; font-size: .9rem; }
.jch-pivot-pane-help { margin: .65rem .7rem .4rem; font-size: .78rem; color: #444; }
.jch-pivot-pane-help--small { color: #666; font-size: .72rem; }
.jch-pivot-field-list { display: grid; gap: .18rem; max-height: 150px; overflow-y: auto; padding: .15rem .55rem .5rem; }
.jch-pivot-field { display: flex; align-items: center; gap: .45rem; min-height: 30px; padding: .25rem .4rem; border: 1px solid transparent; border-radius: 2px; background: #fff; color: #222; font: inherit; font-size: .8rem; text-align: left; cursor: grab; }
.jch-pivot-field:hover, .jch-pivot-field.is-selected { border-color: #8bb8a0; background: #f0f8f3; }
.jch-pivot-field.is-used .jch-pivot-checkbox { background: #217346; box-shadow: inset 0 0 0 3px #fff; }
.jch-pivot-checkbox { width: 14px; height: 14px; border: 1px solid #777; background: #fff; }
.jch-pivot-areas { display: grid; grid-template-columns: 1fr 1fr; gap: .45rem; padding: .25rem .55rem; }
.jch-pivot-area { min-height: 86px; padding: .32rem; border: 1px solid #bdbdbd; background: #fafafa; cursor: pointer; }
.jch-pivot-area:focus, .jch-pivot-area.is-drop-target { outline: 2px solid rgba(33,115,70,.28); border-color: #217346; }
.jch-pivot-area__label { display: block; margin-bottom: .3rem; color: #555; font-size: .72rem; }
.jch-pivot-area__content { display: grid; gap: .28rem; min-height: 45px; }
.jch-pivot-pill { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: .35rem; min-height: 30px; padding: .25rem .4rem; border: 1px solid #9eb6a9; border-radius: 2px; background: #edf5f0; color: #222 !important; font: inherit; font-size: .72rem; text-align: left; cursor: grab; }
.jch-pivot-pill:hover, .jch-pivot-pill:focus-visible { border-color: #6f9f80; background: #e3f0e7; color: #222 !important; outline: none; }
.jch-pivot-pill:hover span, .jch-pivot-pill:hover b, .jch-pivot-pill:focus-visible span, .jch-pivot-pill:focus-visible b { color: #222 !important; }
.jch-pivot-pill:active { cursor: grabbing; }
.jch-pivot-result tr.is-pivot-subtotal td { font-weight: 700; background: #eef5fb; }
.jch-pivot-result tr.is-pivot-child td:first-child { padding-left: 1.55rem; }
.jch-pivot-pill b { font-size: 1rem; font-weight: 400; }
.jch-pivot-course-cta { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 1rem 0; padding: 1rem 1.1rem; border: 1px solid #cde0d4; border-left: 5px solid #217346; border-radius: 10px; background: #f4faf6; }
.jch-pivot-course-cta[hidden] { display: none !important; }
.jch-pivot-course-cta div { display: flex; flex-direction: column; gap: .2rem; }
.jch-pivot-course-cta a { flex: 0 0 auto; padding: .55rem .8rem; border-radius: 6px; background: #217346; color: #fff !important; font-weight: 700; text-decoration: none; }
.jch-pivot-course-cta a:hover { background: #185c37; }
@media (max-width: 780px) {
.jch-pivot-workspace { flex-direction: column; }
.jch-pivot-fields-pane { flex-basis: auto; border-left: 0; border-top: 1px solid #cfcfcf; }
.jch-pivot-areas { grid-template-columns: 1fr 1fr; }
.jch-pivot-result-sheet { min-height: 310px; padding: 30px 20px; overflow-x: auto; }
.jch-pivot-course-cta { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 520px) {
.jch-excel-ribbon-tabs button { padding: 0 .5rem; font-size: .8rem; }
.jch-pivot-areas { grid-template-columns: 1fr; }
.jch-pivot-fields-pane { flex-basis: auto; }
} .jch-practice[data-jch-theme="libreoffice-calc"] {
--jch-blue: #1f7a3f;
--jch-blue-dark: #176232;
--jch-teal: #42a65a;
--jch-yellow: #d9f0dd;
--jch-charcoal: #252525;
--jch-muted: #666a70;
--jch-border: #cfd3d7;
--jch-panel: #f6f7f8;
--jch-range: #d14fc1;
}
.jch-practice[data-jch-theme="libreoffice-calc"] .jch-practice__task,
.jch-practice[data-jch-theme="libreoffice-calc"] .jch-practice__why,
.jch-practice[data-jch-theme="libreoffice-calc"] .jch-practice__feedback {
background: #f7faf7;
}
.jch-practice[data-jch-theme="libreoffice-calc"] .jch-practice__grid thead th,
.jch-practice[data-jch-theme="libreoffice-calc"] .jch-practice__row-heading,
.jch-practice[data-jch-theme="libreoffice-calc"] .jch-practice__corner {
background: #e9eaec;
color: #4f5358;
}
.jch-practice[data-jch-theme="libreoffice-calc"] .jch-practice__cell--header {
background: #eef6ef;
border-bottom-color: #bed7c3 !important;
}
.jch-practice[data-jch-theme="libreoffice-calc"] .jch-practice__cell--selected {
background: rgba(209, 79, 193, .07);
}
.jch-practice[data-jch-theme="libreoffice-calc"] .jch-practice__cell--target.is-active,
.jch-practice[data-jch-theme="libreoffice-calc"] .jch-practice__cell--formula.is-active {
background: rgba(0, 151, 230, .05);
outline-color: #0097e6;
}
.jch-practice[data-jch-theme="libreoffice-calc"] .jch-practice__marquee {
border-color: #d14fc1;
}
.jch-calc-chrome {
margin: .9rem 0 0;
border: 1px solid #c8ccd0;
border-bottom: 0;
border-radius: 7px 7px 0 0;
overflow: hidden;
background: #f5f5f5;
font-family: "Segoe UI", Arial, sans-serif;
color: #202124;
}
.jch-calc-menu {
display: flex;
align-items: center;
gap: 0;
min-height: 34px;
padding: 0 8px;
border-bottom: 1px solid #d6d8da;
background: #f4f4f4;
overflow-x: auto;
white-space: nowrap;
font-size: 14px;
}
.jch-calc-menu span {
display: inline-flex;
align-items: center;
height: 32px;
padding: 0 8px;
}
.jch-calc-toolbar {
display: flex;
align-items: center;
min-height: 38px;
gap: 5px;
padding: 4px 8px;
border-bottom: 1px solid #d6d8da;
background: #f1f1f1;
overflow-x: auto;
}
.jch-calc-toolbar > i {
display: block;
width: 1px;
height: 24px;
margin: 0 3px;
background: #c9cccf;
flex: 0 0 1px;
}
.jch-calc-tool {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 27px;
width: 27px;
height: 27px;
border: 1px solid transparent;
border-radius: 3px;
color: #42464b;
font-size: 20px;
line-height: 1;
}
.jch-calc-tool--document::before {
content: "";
width: 15px;
height: 19px;
border: 1.5px solid #555b60;
background: #fff;
box-shadow: inset 0 -6px 0 #dcefdc;
}
.jch-calc-tool--folder::before {
content: "";
width: 18px;
height: 12px;
margin-top: 4px;
border: 1.5px solid #6c6253;
border-radius: 2px;
background: #e4c373;
}
.jch-calc-tool--save::before {
content: "";
width: 16px;
height: 17px;
border: 1.5px solid #4e5962;
background: linear-gradient(to bottom, #7aa9d7 0 48%, #fff 48% 100%);
}
.jch-calc-toolbar-label {
display: inline-flex;
align-items: center;
min-width: 124px;
height: 27px;
padding: 0 8px;
border: 1px solid #bfc3c7;
border-radius: 2px;
background: #fff;
font-size: 13px;
}
.jch-calc-toolbar-label--small { min-width: 58px; }
.jch-practice[data-jch-theme="libreoffice-calc"] .jch-practice__formula-bar {
flex-wrap: nowrap;
gap: 0;
margin-top: 0;
padding: 4px 7px;
border: 1px solid #c8ccd0;
border-radius: 0;
background: #f1f1f1;
}
.jch-practice[data-jch-theme="libreoffice-calc"] .jch-practice__name-box {
width: 72px;
min-width: 72px;
height: 31px;
min-height: 31px;
max-height: 31px;
border-color: #bfc3c7;
border-radius: 2px;
font-size: 13px;
font-weight: 400;
}
.jch-practice[data-jch-theme="libreoffice-calc"] .jch-practice__formula-input {
height: 31px !important;
min-height: 31px !important;
max-height: 31px !important;
border-color: #bfc3c7;
border-radius: 2px;
padding: 0 .55rem !important;
font-family: "Segoe UI", Arial, sans-serif;
font-size: 14px !important;
}
.jch-calc-formula-control {
display: inline-flex !important;
align-items: center;
justify-content: center;
flex: 0 0 34px;
width: 34px;
min-width: 34px;
height: 31px !important;
min-height: 31px !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
border-radius: 2px !important;
background: transparent !important;
color: #35393d !important;
box-shadow: none !important;
font-family: "Segoe UI", Arial, sans-serif !important;
font-size: 14px !important;
font-weight: 600 !important;
line-height: 1 !important;
cursor: pointer;
}
.jch-calc-formula-control:hover,
.jch-calc-formula-control:focus-visible {
background: #dfe7ef !important;
color: #202124 !important;
outline: 1px solid #a8b8c8;
}
.jch-calc-formula-control--sum span {
margin-left: 2px;
font-size: 9px;
font-weight: 400;
}
.jch-practice[data-jch-theme="libreoffice-calc"] .jch-practice__grid-wrap {
margin-bottom: 0;
border-radius: 0;
border-top: 0;
}
.jch-calc-sheetbar {
display: flex;
align-items: stretch;
min-height: 34px;
margin-bottom: 1rem;
border: 1px solid #c8ccd0;
border-top: 0;
border-radius: 0 0 7px 7px;
background: #e7e8ea;
font-family: "Segoe UI", Arial, sans-serif;
font-size: 13px;
}
.jch-calc-sheet-plus {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
border-right: 1px solid #c8ccd0;
color: #4c5156;
font-size: 18px;
}
.jch-calc-sheet-tab {
display: inline-flex;
align-items: center;
padding: 0 18px;
border-right: 1px solid #c8ccd0;
background: #f6f6f6;
}
.jch-calc-sheet-tab.is-active {
border-bottom: 3px solid #1f7a3f;
background: #fff;
font-weight: 600;
}
.jch-calc-sheet-status {
display: inline-flex;
align-items: center;
margin-left: auto;
padding: 0 10px;
color: #666a70;
}
.jch-progress[data-jch-theme="libreoffice-calc"] {
--jch-blue: #1f7a3f;
--jch-blue-dark: #176232;
--jch-teal: #42a65a;
--jch-yellow: #d9f0dd;
--jch-charcoal: #252525;
--jch-muted: #666a70;
--jch-border: #d3d7da;
--jch-panel: #f7faf7;
border-left-color: var(--jch-teal);
}
@media (max-width: 680px) {
.jch-calc-menu { font-size: 13px; }
.jch-calc-menu span { padding: 0 6px; }
.jch-calc-toolbar-label { min-width: 105px; }
.jch-practice[data-jch-theme="libreoffice-calc"] .jch-practice__name-box { width: 58px; min-width: 58px; }
.jch-calc-formula-control { flex-basis: 30px; width: 30px; min-width: 30px; }
}
.jch-calc-formula-control--static { cursor: default; }
.jch-calc-formula-control--static:hover { background: transparent !important; outline: 0; }
.jch-calc-select-function {
position: relative;
display: inline-flex;
flex: 0 0 auto;
}
.jch-calc-function-menu[hidden] {
display: none !important;
}
.jch-calc-function-menu {
position: absolute;
z-index: 40;
top: calc(100% + 1px);
left: 0;
width: 150px;
padding: 5px 0;
border: 1px solid #8f9397;
background: #f8f8f8;
box-shadow: 2px 3px 7px rgba(0,0,0,.24);
font-family: "Segoe UI", Arial, sans-serif;
}
.jch-calc-function-menu button {
display: block !important;
width: 100% !important;
min-height: 27px !important;
margin: 0 !important;
padding: 3px 14px !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
color: #111 !important;
font: 15px/1.25 "Segoe UI", Arial, sans-serif !important;
text-align: left !important;
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 2px;
}
.jch-calc-function-menu button:hover,
.jch-calc-function-menu button:focus-visible {
background: #dce8f6 !important;
color: #111 !important;
outline: 0 !important;
} .jch-practice[data-jch-theme="libreoffice-calc"] .jch-practice__fill-handle {
right: -5px;
bottom: -5px;
width: 10px;
height: 10px;
min-width: 10px;
min-height: 10px;
border: 1px solid #ffffff;
border-radius: 0;
background: #0097e6;
box-shadow: 0 0 0 1px #0078b8;
}
.jch-practice[data-jch-theme="libreoffice-calc"] .jch-practice__cell--formula.is-fill-preview {
background: rgba(0, 151, 230, .06);
box-shadow:
inset 2px 0 0 #0097e6,
inset -2px 0 0 #0097e6;
}
.jch-practice[data-jch-theme="libreoffice-calc"] .jch-practice__cell--formula.is-fill-range-start {
box-shadow:
inset 2px 0 0 #0097e6,
inset -2px 0 0 #0097e6,
inset 0 2px 0 #0097e6;
}
.jch-practice[data-jch-theme="libreoffice-calc"] .jch-practice__cell--formula.is-fill-range-end {
box-shadow:
inset 2px 0 0 #0097e6,
inset -2px 0 0 #0097e6,
inset 0 -2px 0 #0097e6;
} .jch-practice--calc-filter { max-width: 980px; }
.jch-calc-titlebar {
display: flex;
align-items: center;
gap: 8px;
min-height: 30px;
padding: 0 9px;
border: 1px solid #c8ccd0;
border-bottom: 0;
border-radius: 7px 7px 0 0;
background: #eef0f3;
color: #202124;
font: 13px/1.2 "Segoe UI", Arial, sans-serif;
}
.jch-calc-titlebar__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
border-radius: 2px;
background: #18a15f;
color: #fff;
font-size: 12px;
}
.jch-practice--calc-filter .jch-calc-chrome {
margin-top: 0;
border-radius: 0;
}
.jch-calc-data-wrap {
position: relative;
display: inline-flex !important;
align-items: center;
height: 32px;
padding: 0 !important;
}
.jch-calc-menu-button {
display: inline-flex !important;
align-items: center;
height: 32px !important;
min-height: 32px !important;
margin: 0 !important;
padding: 0 8px !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
color: #202124 !important;
font: 14px/1 "Segoe UI", Arial, sans-serif !important;
font-weight: 400 !important;
cursor: pointer;
}
.jch-calc-menu-button:hover,
.jch-calc-menu-button:focus-visible,
.jch-calc-menu-button[aria-expanded="true"] {
background: #dbe8f7 !important;
color: #202124 !important;
outline: 0 !important;
}
.jch-calc-data-menu[hidden] { display: none !important; }
.jch-calc-data-menu {
position: absolute;
z-index: 70;
top: 31px;
left: 0;
width: 270px;
padding: 4px 0;
border: 1px solid #8d9298;
background: #f8f8f8;
box-shadow: 2px 4px 8px rgba(0,0,0,.25);
color: #111;
font: 14px/1.25 "Segoe UI", Arial, sans-serif;
}
.jch-calc-data-menu button {
display: grid !important;
grid-template-columns: 28px 1fr auto;
align-items: center;
width: 100% !important;
min-height: 31px !important;
margin: 0 !important;
padding: 4px 10px !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
color: #111 !important;
font: inherit !important;
font-weight: 400 !important;
text-align: left !important;
}
.jch-calc-data-menu button:not(.is-disabled):hover,
.jch-calc-data-menu button:not(.is-disabled):focus-visible,
.jch-calc-data-menu__autofilter:hover,
.jch-calc-data-menu__autofilter:focus-visible {
background: #cfe5fb !important;
color: #111 !important;
outline: 0 !important;
}
.jch-calc-data-menu button.is-passive { cursor: default; }
.jch-calc-data-menu button.is-disabled { color: #999 !important; cursor: default; }
.jch-calc-data-menu button b { justify-self: end; font-size: 18px; font-weight: 400; }
.jch-calc-data-menu kbd {
justify-self: end;
padding: 0;
border: 0;
background: transparent;
box-shadow: none;
color: #333;
font: 12px/1 "Segoe UI", Arial, sans-serif;
}
.jch-calc-menu-icon { color: #347aa6; text-align: center; }
.jch-calc-menu-separator {
display: block !important;
width: auto;
height: 1px !important;
margin: 3px 5px !important;
padding: 0 !important;
background: #c9c9c9;
}
.jch-practice--calc-filter .jch-practice__formula-bar {
margin-top: 0;
}
.jch-calc-filter-grid-wrap {
position: relative;
overflow: auto;
border-top: 0 !important;
border-radius: 0 !important;
}
.jch-calc-filter-grid {
min-width: 650px;
font-family: "Segoe UI", Arial, sans-serif;
font-size: 14px;
}
.jch-calc-filter-grid .jch-practice__cell,
.jch-calc-filter-grid .jch-practice__row-heading,
.jch-calc-filter-grid thead th {
height: 30px;
min-height: 30px;
}
.jch-calc-filter-grid .jch-practice__cell--header {
position: relative;
padding-right: 35px;
background: #d7ebe4;
color: #1d1d1d;
font-weight: 700;
}
.jch-calc-filter-cell.is-selected {
background: #c9e7f6 !important;
}
.jch-calc-filter-grid thead th.is-range-heading,
.jch-calc-filter-grid .jch-practice__row-heading.is-range-heading {
background: #1686ce !important;
color: #fff !important;
}
.jch-calc-filter-heading-text {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.jch-calc-filter-arrow[hidden] { display: none !important; }
.jch-calc-filter-arrow {
position: absolute !important;
top: 3px;
right: 3px;
display: inline-flex !important;
align-items: center;
justify-content: center;
width: 27px !important;
min-width: 27px !important;
height: 24px !important;
min-height: 24px !important;
margin: 0 !important;
padding: 0 !important;
border: 1px solid #64696d !important;
border-radius: 1px !important;
background: #d9dcde !important;
box-shadow: none !important;
color: #101010 !important;
font: 12px/1 "Segoe UI", Arial, sans-serif !important;
cursor: pointer;
}
.jch-calc-filter-arrow:hover,
.jch-calc-filter-arrow:focus-visible {
background: #c7d9e7 !important;
color: #101010 !important;
outline: 1px solid #2388d1 !important;
}
.jch-calc-filter-arrow.is-filtered {
background: #b9ddf5 !important;
border-color: #1686ce !important;
color: #005b91 !important;
}
.jch-calc-filter-popup[hidden] { display: none !important; }
.jch-calc-filter-popup {
position: absolute;
z-index: 80;
width: 285px;
max-height: 530px;
padding: 4px;
border: 1px solid #858a8f;
background: #f7f7f7;
box-shadow: 2px 4px 7px rgba(0,0,0,.26);
color: #1a1a1a;
font: 14px/1.25 "Segoe UI", Arial, sans-serif;
}
.jch-calc-filter-popup__command {
display: flex !important;
align-items: center;
justify-content: space-between;
width: 100% !important;
min-height: 29px !important;
margin: 0 !important;
padding: 4px 7px !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
color: #222 !important;
font: inherit !important;
font-weight: 400 !important;
text-align: left !important;
}
.jch-calc-filter-popup__command.is-passive { cursor: default; }
.jch-calc-filter-popup__command:hover { background: #d8e9fb !important; color: #222 !important; }
.jch-calc-filter-popup__separator { display: block; height: 1px; margin: 4px 1px; background: #c9c9c9; }
.jch-calc-filter-search {
width: 100%;
height: 31px;
margin: 2px 0 5px;
padding: 0 7px;
border: 1px solid #1686ce;
border-radius: 0;
background: #fff;
color: #222;
font: inherit;
}
.jch-calc-filter-list {
display: grid;
grid-template-columns: 1fr auto;
max-height: 220px;
overflow: auto;
border: 1px solid #aaaeb2;
background: #fff;
}
.jch-calc-filter-choice {
grid-column: 1 / -1;
display: flex;
align-items: center;
gap: 6px;
min-height: 28px;
padding: 3px 7px;
margin: 0;
color: #202124;
font-weight: 400;
}
.jch-calc-filter-choice--all {
grid-column: 1;
border-bottom: 1px solid #e0e0e0;
}
.jch-calc-filter-choice--lock {
grid-column: 2;
border-bottom: 1px solid #e0e0e0;
white-space: nowrap;
}
.jch-calc-filter-values {
grid-column: 1 / -1;
display: grid;
}
.jch-calc-filter-choice input {
width: 18px;
height: 18px;
margin: 0;
accent-color: #0b73c9;
}
.jch-calc-filter-choice:hover { background: #e6f1fc; }
.jch-calc-filter-popup__actions {
display: flex;
justify-content: center;
gap: 18px;
padding: 10px 4px 2px;
}
.jch-calc-filter-popup__actions button {
min-width: 84px !important;
min-height: 34px !important;
margin: 0 !important;
padding: 5px 16px !important;
border: 1px solid #c8ccd0 !important;
border-radius: 4px !important;
background: #fff !important;
box-shadow: none !important;
color: #202124 !important;
font: 14px/1 "Segoe UI", Arial, sans-serif !important;
font-weight: 400 !important;
}
.jch-calc-filter-popup__actions button:hover,
.jch-calc-filter-popup__actions button:focus-visible {
border-color: #1686ce !important;
background: #edf6fd !important;
color: #202124 !important;
outline: 0 !important;
}
.jch-calc-filter-grid tr[hidden] { display: none !important; }
@media (max-width: 680px) {
.jch-calc-data-menu { width: 245px; }
.jch-calc-filter-popup { width: 260px; }
.jch-calc-titlebar { font-size: 12px; }
} .jch-calc-data-menu {
display: block !important;
height: auto !important;
min-height: 0 !important;
}
.jch-calc-data-menu .jch-calc-menu-icon,
.jch-calc-data-menu button > span {
display: inline-block !important;
height: auto !important;
min-height: 0 !important;
padding: 0 !important;
}
.jch-calc-chrome--filter,
.jch-calc-chrome--filter .jch-calc-menu {
overflow: visible !important;
}
.jch-calc-filter-popup {
position: fixed;
} .jch-practice[data-jch-exercise="festival-hatch-absolute-reference"] .jch-practice__grid--wide {
min-width: 650px;
}
.jch-practice[data-jch-exercise="festival-hatch-absolute-reference"] .jch-practice__grid th:nth-child(3),
.jch-practice[data-jch-exercise="festival-hatch-absolute-reference"] .jch-practice__grid td:nth-child(3) {
width: 92px;
}
.jch-practice[data-jch-exercise="festival-hatch-absolute-reference"] .jch-practice__grid th:nth-child(5),
.jch-practice[data-jch-exercise="festival-hatch-absolute-reference"] .jch-practice__grid td:nth-child(5) {
width: 36px;
padding-left: .2rem !important;
padding-right: .2rem !important;
}
@media (max-width: 560px) {
.jch-practice[data-jch-exercise="festival-hatch-absolute-reference"] .jch-practice__grid--wide {
min-width: 650px;
}
} .jch-practice[data-jch-exercise="festival-hatch-if"] .jch-practice__grid--wide {
min-width: 650px;
}
.jch-practice[data-jch-exercise="festival-hatch-if"] .jch-practice__grid th:nth-child(3),
.jch-practice[data-jch-exercise="festival-hatch-if"] .jch-practice__grid td:nth-child(3) {
width: 72px;
}
.jch-practice[data-jch-exercise="festival-hatch-if"] .jch-practice__grid th:nth-child(5),
.jch-practice[data-jch-exercise="festival-hatch-if"] .jch-practice__grid td:nth-child(5) {
width: 34px;
padding-left: .2rem !important;
padding-right: .2rem !important;
}
.jch-practice[data-jch-exercise="festival-hatch-if"] .jch-practice__grid th:nth-child(7),
.jch-practice[data-jch-exercise="festival-hatch-if"] .jch-practice__grid td:nth-child(7) {
width: 72px;
}
@media (max-width: 560px) {
.jch-practice[data-jch-exercise="festival-hatch-if"] .jch-practice__grid--wide {
min-width: 650px;
}
}