@media only screen and (max-width: 1100px) {
    #overdiv #it_page .button {
        min-height: 40px;
    }
    #overdiv #it_page h1 {
        font-size: var(--24px);
    }
    #overdiv #it_page h2 {
        font-size: var(--18px);
    }
    #overdiv #it_page .p-18 {
        font-size: var(--16px);
    }
    .component:not([data-component="it-title-and-field"]) .it-title-and-field {
        padding-bottom: 0;
    }
    .it-title-and-field .max-791 {
        padding-top: 0;
    }
    .it-title-and-field h1 + div {
        margin-top: 8px;
    }

    #it_main .component iframe {
        max-height: calc(100vh - 232px);
    }

    #it_page.open #it_main {
        padding-right: 0;
    }

    #it_sidebar {
        position: fixed;
    }
    #it_sidebar i {
        display: block;
        position: absolute;
        content: "\f00d";
        font-family: "Font Awesome 6 Sharp", sans-serif;
        inset: 14px 24px auto auto;
        cursor: pointer;
        color: var(--black);
    }
    #it_sidebar h4 {
        font-size: var(--16px);
    }
    #it_sidebar_top {
        padding: 14px 24px 0;
    }
    .progress {
        margin: 24px 0;
    }
    #it_sidebar_menu .multi-chapter-no {
        font-size: var(--12px);
        margin-bottom: 4px;
    }
    #it_sidebar_menu .multi-chapter {
        font-size: var(--14px);
        margin: 0 24px 8px;
        padding-bottom: 8px;
    }
    #overdiv #it_sidebar button {
        margin-top: 8px;
    }

    #it_header {
        gap: 24px;
        padding: 8px 24px;
    }
    #it_header_logo {
        width: 64px;
        height: 32px;
    }
    #it_header_title {
        font-size: var(--14px);
    }
    #it_header_right {
        gap: 16px;
    }
    #it_header_right button > span {
        display: none;
    }

    .it-component-height {
        min-height: calc(100vh - 84px);
        max-height: calc(100vh - 84px);
    }

    .chapter-top-nav {
        gap: 8px;
        border-radius: 15px 15px 0 0;
        padding: 16px 24px;
        min-height: 80px;
    }
    .chapter-top-nav .chapter-no,
    #overdiv .chapter-top-nav h3 {
        font-size: var(--16px);
    }
    .it-component-margin {
        margin: 0 24px 24px;
    }

    .multi-it-cards-container {
        grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
    }
    .multi-it-cards-container .multi-it-card {
        min-height: 152px;
    }
    .multi-it-cards-container .multi-it-card .multiField_0 {
        font-size: var(--18px);
        padding: 24px;
    }
    .multi-it-cards-container .multi-it-card .multiField_1 {
        font-size: var(--16px);
        padding: 24px;
    }

    .component[data-component="it-begin-chapter"] .chapter-no {
        font-size: var(--18px);
        margin-bottom: 16px;
    }
    .component[data-component="it-begin-chapter"] .max-648 {
        padding: 64px 0;
    }

    .component[data-component="it-columns"] .multi-it-blocks-container-2 {
        gap: 32px;
    }
    .component[data-component="it-columns"] .multi-it-blocks-container-3,
    .component[data-component="it-columns"] .multi-it-blocks-container-4 {
        gap: 16px;
    }
    .component[data-component="it-columns"] .multi-it-blocks-container .rectangular .multiField_2,
    .component[data-component="it-columns"] .multi-it-blocks-container .rectangular-rounded .multiField_2 {
        padding: 8px 16px;
    }
    .component[data-component="it-columns"] .multi-it-blocks-container > div {
        font-size: var(--16px);
        gap: 8px;
    }
    .component[data-component="it-columns"] .multi-it-blocks-container .elliptical .multiField_2 {
        font-size: var(--18px);
        padding: 32px 24px;
    }
    .component[data-component="it-columns"] .multi-it-blocks-container .elliptical .multi-it-block + .multi-it-block {
        margin-top: 0;
    }

    .component[data-component="it-image-text-cards"] .multi-it-img-text-cards-2 {
        gap: 32px;
    }
    .component[data-component="it-image-text-cards"] .multi-it-img-text-card .multiField_1 {
        padding: 24px;
        font-size: var(--16px);
    }

    .component[data-component="it-bullet-points"] .multi-it-bullet-point {
        font-size: var(--16px);
        margin: 0 0 16px 24px;
        padding-bottom: 16px;
    }
    .component[data-component="it-bullet-points"] .multi-it-bullet-point::before {
        width: 12px;
        height: 12px;
        inset: 6px auto auto -24px;
    }
    .component[data-component="it-bullet-points"] .multi-it-bullet-point:last-child {
        margin-bottom: 0;
    }

    .component[data-component="it-multiple-choice"] h1 {
        margin-bottom: 24px;
    }
    .component[data-component="it-multiple-choice"] .multi-it-choices {
        margin-top: 32px;
        grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
        gap: 16px;
    }
    .component[data-component="it-multiple-choice"] .multi-it-choice .multiField_0 {
        padding: 24px;
        min-height: 112px!important;
        font-size: var(--16px);
    }
    .component[data-component="it-multiple-choice"] .multi-it-choice .multiField_2 {
        font-size: var(--14px);
    }
    .component[data-component="it-multiple-choice"] .score {
        display: none;
    }
    .component[data-component="it-multiple-choice"] .multi-it-choice .answer-icon {
        width: 32px;
        height: 32px;
    }
    #overdiv .component[data-component="it-multiple-choice"] .multi-it-choice button.next-question {
        margin-top: 16px;
    }
    .component[data-component="it-multiple-choice"] .multiple-choice-desc .final-text {
        font-size: var(--16px);
    }

    .component[data-component="it-image-with-notes"] .image-container {
        width: calc(100% - 400px);
        min-width: 336px;
    }
    .component[data-component="it-image-with-notes"] .image-container .left-notes,
    .component[data-component="it-image-with-notes"] .image-container .right-notes {
        width: 216px;
        top: -8px;
    }
    .component[data-component="it-image-with-notes"] .image-container .left-notes {
        left: -200px;
    }
    .component[data-component="it-image-with-notes"] .image-container .right-notes {
        right: -200px;
    }
    .component[data-component="it-image-with-notes"] .image-container .note {
        padding: 8px 16px;
        min-height: 88px!important;
        font-size: var(--14px);
    }

    #overdiv:not(.admin) .component[data-component="it-image-hint"] .multi-it-sign.selected,
    #overdiv:not(.admin) .component[data-component="it-image-hint"] .multi-it-sign.hint {
        width: calc(100% - 48px);
    }
    .component[data-component="it-image-hint"] .spot-signs-image {
        max-width: 432px !important;
    }
    .component[data-component="it-image-hint"] .spot-signs-top {
        inset: 24px auto auto 24px;
        width: calc(100% - 48px);
    }
    .component[data-component="it-image-hint"] .spot-signs-top-left {
        max-width: 216px;
        font-size: var(--16px);
        gap: 0;
    }
    .component[data-component="it-image-hint"] .spot-signs-top-right {
        position: relative;
    }
    .component[data-component="it-image-hint"] .spot-signs-top-right .spot-signs-buttons {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding-left: 24px;
        position: absolute;
        top: calc(100% + 70px);
        width: 100%;
    }
    .component[data-component="it-image-hint"] .spot-signs-top-right .spot-signs-buttons span {
        display: none;
    }
    .component[data-component="it-image-hint"] .spot-signs-top-right i {
        background-color: white;
        width: 32px;
        height: 32px;
        font-size: var(--18px);
        font-weight: 300;
    }
}

@media only screen and (max-width: 900px) {
    .max-no-buttons,
    .component[data-component="it-columns"] .multi-it-blocks-container-1 {
        max-width: 600px;
    }
    .it-title-and-field > div:has(iframe) {
        max-width: 360px!important;
        margin: 0 auto;
    }
    #it_main .component iframe {
        max-height: calc(100vh - 220px);
    }
    #certificate-container .overdiv-1240 {
        gap: 24px;
    }
}

@media only screen and (max-width: 768px) {
    .component[data-component="it-image-hint"] .spot-signs-top-right .spot-signs-buttons {
        align-items: flex-end;
    }
    #certificate-container .overdiv-1240 {
        grid-template-columns: 1fr;
        gap: 32px;
    }
}

@media only screen and (max-width: 600px) {
    .component[data-component="it-image-hint"] .spot-sign-found {
        padding: 8px 12px;
    }
    .component[data-component="it-image-hint"] .spot-signs-top-right .spot-signs-buttons {
        top: calc(100% + 86px);
    }
    .component[data-component="it-image-hint"] .spot-signs-top-right i {
        width: 24px;
        height: 24px;
        font-size: var(--14px);
    }
}