:root {
    --color-white: #FFFFFF;
    --color-gray-dark: #505050;
    --color-gray-darker: #383838;
    --color-gray-darker-hover: #2e2e2e;
    --color-gray-light: #6F6F6F;
    --color-gray-lighter: #707070;
    --color-orange: #FF8618;
    --color-orange-light: #FF8617;
    --color-purple: #46298C;
    --color-purple-hover: #5933a2;
    --color-purple-active: #4a2785;
    --color-purple-visited: #6f42c1;
    --color-cream: #F8E6B4;
    --color-teal: #B0D5D4;
    --color-mint: #DAFAE8;
    --color-purple-light: #77669E;
    --color-pink-light: #F4AAD7E3;
    --color-green: #117F54;
    --color-blue: #1A72BD;
    --color-orange-dark: #AB5A09;
    --color-green-hover: #147c53;
    --color-blue-hover: #1d7dc9;
    --color-orange-dark-hover: #cc6f0f;
    --color-light-blue: #F1F9FF;
    --color-teal-medium: #71ADAC;
    --color-purple-darker: #8976B9;
    --color-pink: #E56A6A;
    --color-purple-medium: #785EB5;
    --color-green-light: #6BC792;
    --color-yellow-bright: #FCD569;
    --color-teal-strong: #0E9595;
    --color-red-strong: #B11616;

    --font-family-arial: "Arial", sans-serif;
}

* {
    font-family: var(--font-family-arial);
}

html {
    font-size: 16px;
}

@media (max-width: 1200px) {
    html {
        font-size: 16px;
    }
}

@media (max-width: 992px) {
    html {
        font-size: 15px;
    }
}

@media (max-width: 768px) {
    html {
        font-size: 15px;
    }
}

@media (max-width: 576px) {
    html {
        font-size: 15px;
    }
}

@media (max-width: 360px) {
    html {
        font-size: 14px;
    }
}

body {
    background-color: var(--color-white);
    overflow-x: hidden;
    overflow-y: auto;
}

p {
    line-height: 1.5 !important;
}

.custom-container {
    margin-bottom: 120px;
    border-radius: 10px;
}

@media (min-width: 1000px) and (max-width: 1920px) {
    .message-container,
    .custom-container {
        max-width: 80% !important;
    }
}
@media (max-width: 1200px) {
    .custom-container {
        margin-bottom: 100px;
    }
}
@media (max-width: 992px) {
    .custom-container {
        margin-bottom: 70px;
    }
}
@media (max-width: 768px) {
    .custom-container {
        margin-bottom: 40px;
    }
}
@media (max-width: 576px) {
    .custom-container {
        margin-bottom: 30px;
    }
}

.main-container {
    margin-top: 3.5rem;
}

.btn-primary {
    --bs-btn-color: var(--color-white);
    --bs-btn-bg: var(--color-purple);
    --bs-btn-border-color: var(--color-purple);
    --bs-btn-hover-color: var(--color-white);
    --bs-btn-hover-bg: #381d70;
    --bs-btn-hover-border-color: #381d70;
    --bs-btn-focus-shadow-rgb: 70, 41, 140;
    --bs-btn-active-color: var(--color-white);
    --bs-btn-active-bg: #381d70;
    --bs-btn-active-border-color: #381d70;
    --bs-btn-active-shadow: inset 0 0.1875rem 0.3125rem rgba(0, 0, 0, 0.125); /* inset 0 3px 5px */
    --bs-btn-disabled-color: var(--color-white);
    --bs-btn-disabled-bg: var(--color-purple);
    --bs-btn-disabled-border-color: var(--color-purple);
}

.btn-primary {
    background: var(--color-purple) 0 0 no-repeat padding-box !important;
    border-radius: 0.25rem !important; /* 4px */
    opacity: 1 !important;
    color: white !important;
    border: none !important;
}

.btn-primary:hover {
    background: #5A3BB4 !important;
    color: white !important;
}

.btn-primary:active {
    background: #3B2075 !important;
    color: white !important;
}

.btn-primary:disabled,
.btn-primary[disabled],
.btn-primary.disabled {
    --bs-btn-disabled-color: #ffffff;
    --bs-btn-disabled-bg: #6c757d;
    --bs-btn-disabled-border-color: #6c757d;

    background: #6c757d !important;
    color: #ffffff !important;
    border-color: #6c757d !important;
    cursor: not-allowed;
    opacity: 0.65 !important;
    pointer-events: none;
}

.btn-secondary {
    --bs-btn-color: var(--color-white);
    --bs-btn-bg: var(--color-purple-light);
    --bs-btn-border-color: var(--color-purple-light);
    --bs-btn-hover-color: var(--color-white);
    --bs-btn-hover-bg: #725E96;
    --bs-btn-hover-border-color: #725E96;
    --bs-btn-focus-shadow-rgb: 138, 119, 182;
    --bs-btn-active-color: var(--color-white);
    --bs-btn-active-bg: #725E96;
    --bs-btn-active-border-color: #725E96;
    --bs-btn-active-shadow: inset 0 0.1875rem 0.3125rem rgba(0, 0, 0, 0.125); /* 3px 5px */
    --bs-btn-disabled-color: var(--color-white);
    --bs-btn-disabled-bg: var(--color-purple-light);
    --bs-btn-disabled-border-color: var(--color-purple-light);
}

.btn-secondary {
    background: var(--color-purple-light) 0 0 no-repeat padding-box !important;
    border-radius: 0.25rem !important; /* 4px */
    opacity: 1 !important;
    color: white !important;
    border: none !important;
}

.btn-secondary:hover {
    background: #725E96 !important;
    color: white !important;
}

.btn-secondary:active {
    background: #594678 !important;
    color: white !important;
}

.btn-warning {
    --bs-btn-color: #080808;
    --bs-btn-bg: #F4A669;
    --bs-btn-border-color: #F4A669;
    --bs-btn-hover-color: #080808;
    --bs-btn-hover-bg: #E28C56;
    --bs-btn-hover-border-color: #E28C56;
    --bs-btn-focus-shadow-rgb: 244, 166, 105;
    --bs-btn-active-color: #080808;
    --bs-btn-active-bg: #D37A43;
    --bs-btn-active-border-color: #D37A43;
    --bs-btn-active-shadow: inset 0 0.1875rem 0.3125rem rgba(0, 0, 0, 0.125); /* inset 0 3px 5px */
    --bs-btn-disabled-color: #080808;
    --bs-btn-disabled-bg: #F4A669;
    --bs-btn-disabled-border-color: #F4A669;
}

.btn-warning {
    background: #F4A669 0% 0% no-repeat padding-box !important;
    border-radius: 0.3125rem !important; /* 5px */
    opacity: 1 !important;
    color: #080808 !important;
    border: none !important;
}

.btn-warning:hover {
    background: #E28C56 !important;
    color: #080808 !important;
}

.btn-warning:active {
    background: #D37A43 !important;
    color: #080808 !important;
}

.btn-warning:disabled,
.btn-warning[disabled],
.btn-warning.disabled {
    --bs-btn-disabled-color: #ffffff;
    --bs-btn-disabled-bg: #6c757d;
    --bs-btn-disabled-border-color: #6c757d;

    background: #6c757d !important;
    color: #ffffff !important;
    border-color: #6c757d !important;
    cursor: not-allowed;
    opacity: 0.65 !important;
    pointer-events: none;
}

.btn-info {
    --bs-btn-color: #080808;
    --bs-btn-bg: #78AFDE;
    --bs-btn-border-color: #78AFDE;
    --bs-btn-hover-color: #080808;
    --bs-btn-hover-bg: #659BCE;
    --bs-btn-hover-border-color: #659BCE;
    --bs-btn-focus-shadow-rgb: 120, 175, 222;
    --bs-btn-active-color: #080808;
    --bs-btn-active-bg: #5487BE;
    --bs-btn-active-border-color: #5487BE;
    --bs-btn-active-shadow: inset 0 0.1875rem 0.3125rem rgba(0, 0, 0, 0.125); /* 3px 5px */
    --bs-btn-disabled-color: #080808;
    --bs-btn-disabled-bg: #78AFDE;
    --bs-btn-disabled-border-color: #78AFDE;
}

.btn-info {
    background: #78AFDE 0% 0% no-repeat padding-box !important;
    border-radius: 0.3125rem !important; /* 5px */
    opacity: 1 !important;
    color: #080808 !important;
    border: none !important;
}

.btn-info:hover {
    background: #659BCE !important;
    color: #080808 !important;
}

.btn-info:active {
    background: #5487BE !important;
    color: #080808 !important;
}

.dropdown-toggle {
    text-decoration: none !important;
}
.navigation-link,
.dropdown-toggle {
    display: flex;
    align-items: center;
    height: 100%;
    padding-top: 0;
    padding-bottom: 0;
}

.dropdown-menu .dropdown-item:active {
    background-color: var(--color-purple-active) !important;
    color: var(--color-white) !important;
}

.navbar-new {
    background-color: var(--color-orange);
    z-index: 2;
}

.footer-new {
    position: relative;
    background-color: var(--color-orange);
}
footer {
    width: 100%;
    position: relative;
    bottom: 0;
    left: 0;
    display: table;
}
footer > div {
    display: table-cell;
    vertical-align: middle;
}

.footer-custom {
    color: black;
}

.logo-dark {
    width: 30%;
    height: auto;
}

.bg-new {
    background-color: var(--color-white);
}

.index-separator {
    height: 0.1875rem; /* 3px */
    background-color: var(--color-purple);
    opacity: 1;
}

.index-album {
    margin-bottom: 9.6875rem; /* 155px */
}

@media (max-width: 1200px) {
    .index-album {
        margin-bottom: 6.25rem; /* 100px */
    }
}

@media (max-width: 992px) {
    .index-album {
        margin-bottom: 4.375rem; /* 70px */
    }
}

@media (max-width: 768px) {
    .index-album {
        margin-bottom: 2.5rem; /* 40px */
    }
}

@media (max-width: 576px) {
    .index-album {
        margin-bottom: 1.875rem; /* 30px */
    }
}

.card {
    border-radius: 0.3125rem !important;
    overflow: hidden !important;
}
.card .card-header {
    background-color: var(--color-purple);
    color: var(--color-white);
    font: normal normal bold 1.25rem/1.875rem var(--font-family-arial);
    border-bottom: 0.125rem solid var(--color-purple);
}
.card .card-footer {
    background-color: var(--color-white);
    border-top: 0.125rem solid var(--color-purple);
}
.card:not(.index-card-1):not(.index-card-2):not(.index-card-3) {
    border: 0.125rem solid var(--color-purple);
}

.card-title {
    font: normal normal bold 1.25rem/1.875rem var(--font-family-arial);
    margin-bottom: 0.5rem;
}
.card-heading {
    text-align: left;
    font: normal normal bold 1.25rem/1.875rem Arial; /* 20px/30px */
    letter-spacing: 0;
    color: var(--color-gray-darker);
    opacity: 1;
}
.card-text {
    text-align: left !important;
    font: normal normal normal 1.125rem/1.375rem Arial !important; /* 18px/22px */
    letter-spacing: 0 !important;
    color: var(--color-gray-dark) !important;
    opacity: 1 !important;
}

.index-card-1 {
    border: 0.125rem solid var(--color-mint) !important; /* 2px */
    border-radius: 0.3125rem !important; /* 5px */
    opacity: 1 !important;
}
.index-card-2 {
    border: 0.125rem solid var(--color-cream) !important; /* 2px */
    border-radius: 0.3125rem !important; /* 5px */
    opacity: 1 !important;
}
.index-card-3 {
    border: 0.125rem solid var(--color-teal) !important; /* 2px */
    border-radius: 0.3125rem !important; /* 5px */
    opacity: 1 !important;
}

.index-card-bg1 {
    background-color: var(--color-mint);
}
.index-card-bg2 {
    background-color: var(--color-cream);
}
.index-card-bg3 {
    background-color: var(--color-teal);
}

.index-card-1 p,
.index-card-2 p,
.index-card-3 p {
    line-height: 1.5 !important;
}

.auswertung-card {
    border: 0.125rem solid var(--color-purple) !important; /* 2px */
    max-width: 34.375rem; /* 550px */
    width: 100%;
}
.auswertung-card-teacher {
    border: 0.125rem solid var(--color-purple) !important; /* 2px */
}
.auswertung-card-header {
    background-color: var(--color-purple) !important;
    color: var(--color-white) !important;
}
.auswertung-card-separator {
    height: 0.125rem; /* 2px */
    background-color: var(--color-purple);
    opacity: 0.5;
}

.auswertung-card:hover,
.auswertung-card-teacher:hover,
.index-card-1:hover,
.index-card-2:hover,
.index-card-3:hover {
    transform: scale(1.02);
    transition: transform 0.2s ease;
}

.index-button {
    width: 90%;
}

.auswertung-link {
    font: normal normal normal 1rem/1.125rem Arial; /* 16px/18px */
    letter-spacing: 0;
    text-align: left;
    text-decoration: underline;
    color: var(--color-gray-darker);
    opacity: 1;
}

.blog-post {
    border: 0.125rem solid var(--color-purple); /* 2px */
    border-radius: 0.3125rem; /* 5px */
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
}
.blog-post-teacher {
    border: 0.125rem solid var(--color-purple); /* 2px */
    border-radius: 0.3125rem; /* 5px */
}

.blog-comment {
    overflow: auto;
    word-wrap: break-word;
}
.symbols {
    float: right;
}
.icon-inactive {
    color: #d3d3d3;
}

.post-content {
    margin-left: 3.5rem; /* 56px */
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
}
.post-content-teacher {
    margin-left: 4rem; /* 64px */
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
}

/* Custom CSS for pagination */
.pagination {
    justify-content: center;
    border: none;
    display: flex;
    list-style: none;
    padding: 0;
}
.pagination li a,
.pagination li span {
    color: var(--color-purple-light);
    font-size: 1.25rem;
    border: none;
    background: none;
    text-decoration: none;
}
.pagination li a:hover,
.pagination li span:hover {
    color: var(--color-purple);
    background: none;
}
.pagination li.active a,
.pagination li.active span {
    color: var(--color-purple);
    background: none;
    text-decoration: underline;
}
.pagination li {
    margin: 0 0.3125rem; /* 5px */
}
.pagination li a:focus,
.pagination li a:active {
    outline: none;
    box-shadow: 0 0 0 0.1875rem var(--color-purple-light); /* 3px */
    color: var(--color-purple) !important;
}

/* Override default link color */
a.text-primary-custom {
    color: var(--color-blue) !important;
}
a.text-primary-custom:hover,
a.text-primary-custom:focus {
    color: var(--color-blue-hover) !important;
}

a.text-success-custom {
    color: var(--color-green) !important;
}
a.text-success-custom:hover,
a.text-success-custom:focus {
    color: var(--color-green-hover) !important;
}

a.text-warning-custom {
    color: var(--color-orange-dark) !important;
}
a.text-warning-custom:hover,
a.text-warning-custom:focus {
    color: var(--color-orange-dark-hover) !important;
}

a.text-custom-gray {
    color: var(--color-gray-darker);
}
a.text-custom-gray:hover,
a.text-custom-gray:focus {
    color: var(--color-gray-darker-hover);
}

a.text-custom-purple {
    color: var(--color-purple);
}

a.text-custom-purple:hover,
a.text-custom-purple:focus {
    color: var(--color-purple-hover);
}

.divider-gray {
    border-color: var(--color-gray-dark) !important;
}

.divider-gray-vertical {
    border-left-color: var(--color-gray-darker) !important;
    width: 0.125rem !important; /* 2px */
    opacity: 1 !important;
}

.icon-new {
    width: 1.875rem; /* 30px */
    height: 1.875rem; /* 30px */
    vertical-align: middle;
    fill: currentColor;
    position: relative;
    margin-right: 0.1875rem; /* 3px */
}
.icon-inactive {
    opacity: 0.5;
}
.user-icon {
    width: 2.5rem; /* 40px */
    height: 2.5rem; /* 40px */
}

.comment-badge-new {
    top: 0.125rem; /* 2px */
    left: 85%;
    background-color: var(--color-pink);
    color: var(--color-white);
}

.index-heading {
    text-align: left;
    font: normal normal bold 3.4375rem/3.75rem Arial; /* 55px/60px */
    letter-spacing: 0;
    color: var(--color-gray-darker);
    opacity: 1;
}
.index-text {
    text-align: left;
    font: normal normal normal 1.5625rem/1.875rem Arial; /* 25px/30px */
    letter-spacing: 0;
    color: var(--color-gray-dark);
    opacity: 1;
}
.footer-link-new {
    text-align: left;
    font: normal normal normal 1.25rem/1.25rem Arial; /* 20px/20px */
    letter-spacing: 0;
    color: var(--color-gray-darker);
    opacity: 1;
    text-decoration: none;
}
.navigation-link {
    text-align: left;
    text-decoration: none;
    font: normal normal normal 1.25rem/1.25rem Arial; /* 20px/20px */
    letter-spacing: 0;
    color: var(--color-gray-darker);
    opacity: 1;
}
.start-heading {
    text-align: center;
    font: normal normal bold 2.8125rem/3.25rem Arial; /* 45px/52px */
    letter-spacing: 0;
    color: var(--color-gray-darker);
    opacity: 1;
}
.start-heading2 {
    text-align: center;
    font: normal normal normal 2.1875rem/2.5rem Arial; /* 35px/40px */
    letter-spacing: 0;
    color: var(--color-gray-light);
    opacity: 1;
}

@media (max-width: 992px) {
    textarea {
        height: 14.375rem; /* 230px */
    }
}

.page-heading {
    text-align: left;
    font: normal normal bold 1.875rem/2.5rem Arial; /* 30px/40px */
    letter-spacing: 0;
    color: var(--color-gray-darker);
    opacity: 1;
}
.page-heading2 {
    text-align: left;
    font: normal normal normal 1.875rem/1.5rem Arial; /* 30px/24px */
    letter-spacing: 0;
    color: var(--color-gray-darker);
    opacity: 1;
}
.page-text {
    text-align: left;
    font: normal normal normal 1.125rem/1.375rem Arial; /* 18px/22px */
    letter-spacing: 0;
    color: var(--color-gray-dark);
    opacity: 1;
}
.page-label {
    text-align: left;
    font: normal normal bold 1.25rem/1.4375rem Arial; /* 20px/23px */
    letter-spacing: 0;
    color: var(--color-gray-darker);
    opacity: 1;
    margin-bottom: 0.9375rem; /* 15px */
}

.page-text-field {
    text-align: left;
    font: italic normal normal 1.125rem/1.375rem Arial; /* 18px/22px */
    letter-spacing: 0;
    color: var(--color-gray-dark);
    opacity: 1;
}
.teacher-heading {
    text-align: left;
    font: normal normal bold 2.1875rem/2.5rem Arial; /* 35px/40px */
    letter-spacing: 0;
    color: var(--color-gray-darker);
    opacity: 1;
    text-decoration: underline;
}
.teacher-subheading {
    text-align: left;
    font: normal normal bold 1.875rem/2.125rem Arial; /* 30px/34px */
    letter-spacing: 0;
    color: var(--color-gray-dark);
    opacity: 1;
}
.teacher-heading2 {
    text-align: left;
    font: normal normal bold 1.25rem/1.4375rem Arial; /* 20px/23px */
    letter-spacing: 0;
    color: var(--color-gray-darker);
    opacity: 1;
}
.teacher-subheading2 {
    text-align: left;
    font: normal normal normal 1.375rem/1.625rem Arial; /* 22px/26px */
    letter-spacing: 0;
    color: var(--color-gray-lighter);
    opacity: 1;
}
.teacher-subheading3 {
    text-align: left;
    font: normal normal normal 1.375rem/1.625rem Arial; /* 22px/26px */
    letter-spacing: 0;
    color: var(--color-gray-darker);
    opacity: 1;
}
.teacher-info-text {
    text-align: left;
    font: normal normal normal 1.125rem/1.375rem Arial; /* 18px/22px */
    letter-spacing: 0;
    color: var(--color-gray-lighter);
    opacity: 1;
}
.teacher-table-heading {
    text-align: left;
    font: normal normal bold 1.5rem/1.75rem Arial; /* 24px/28px */
    letter-spacing: 0;
    color: var(--color-white);
    opacity: 1;
}
.teacher-table-heading2 {
    text-align: left;
    font: normal normal bold 1.25rem/1.5rem Arial; /* 20px/24px */
    letter-spacing: 0;
    color: var(--color-gray-darker);
    opacity: 1;
}
.teacher-table-content {
    text-align: left;
    font: normal normal normal 1.125rem/1.5rem Arial; /* 18px/24px */
    letter-spacing: 0;
    color: var(--color-gray-dark);
    opacity: 1;
}
.teacher-table-content-bold {
    text-align: left;
    font: normal normal bold 1.125rem/1.375rem Arial; /* 18px/22px */
    letter-spacing: 0;
    color: var(--color-gray-darker);
    opacity: 1;
}
.teacher-table-subheading {
    text-align: left;
    font: normal normal bold 1.5rem/1.75rem Arial; /* 24px/28px */
    letter-spacing: 0;
    color: var(--color-gray-darker);
    opacity: 1;
}
.teacher-table-success-link {
    text-align: left;
    font: normal normal normal 1.125rem/1.5rem Arial; /* 18px/24px */
    letter-spacing: 0;
    color: var(--color-green);
    opacity: 1;
    text-decoration: none;
}
.teacher-table-purple-link {
    text-align: left;
    font: normal normal normal 1.125rem/1.5rem Arial; /* 18px/24px */
    letter-spacing: 0;
    color: var(--color-purple);
    opacity: 1;
    text-decoration: none;
}
.teacher-table-teal-link {
    text-align: left;
    font: normal normal normal 1.125rem/1.5rem Arial; /* 18px/24px */
    letter-spacing: 0;
    color: var(--color-teal-strong);
    opacity: 1;
    text-decoration: none;
}
.teacher-table-warning-link {
    text-align: left;
    font: normal normal normal 1.125rem/1.5rem Arial; /* 18px/24px */
    letter-spacing: 0;
    color: var(--color-orange-dark);
    opacity: 1;
    text-decoration: none;
}
.teacher-table-danger-link {
    text-align: left;
    font: normal normal normal 1.125rem/1.5rem Arial; /* 18px/24px */
    letter-spacing: 0;
    color: var(--color-red-strong);
    opacity: 1;
    text-decoration: none;
}
.teacher-table-primary-link {
    text-align: left;
    font: normal normal normal 1.125rem/1.5rem Arial; /* 18px/24px */
    letter-spacing: 0;
    color: var(--color-blue);
    opacity: 1;
    text-decoration: none;
}
.teacher-table-muted-link {
    text-align: left;
    font: normal normal normal 1.125rem/1.5rem Arial; /* 18px/24px */
    letter-spacing: 0;
    color: var(--color-gray-dark);
    opacity: 1;
    text-decoration: none;
}
.link-text {
    text-decoration: underline;
}
.purple-span {
    color: var(--color-purple);
}

.bubble {
    position: absolute;
    z-index: 3;
}
.bubble-img {
    width: 100%;
    height: 100%;
}
.bubble-left {
    width: 320px;
    height: 220px;
    top: 55px;
    left: -99px;
    overflow: hidden;
}
.bubble-right {
    width: 285px;
    height: 185px;
    position: absolute;
    bottom: 133px;
    right: -60px;
    overflow: hidden;
}
@media (max-width: 1799px) {
    .bubble-left,
    .bubble-right {
        display: none;
    }
}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="search"],
textarea,
textarea.form-control,
select {
    border: 0.125rem solid rgba(128, 0, 128, 0.6); /* 2px */
    border-radius: 0.3125rem; /* 5px */
    transition: border-color 0.3s;
}

input[type="text"]::placeholder,
input[type="password"]::placeholder,
input[type="email"]::placeholder,
input[type="number"]::placeholder,
input[type="search"]::placeholder,
textarea::placeholder,
textarea.form-control::placeholder {
    text-align: left;
    opacity: 1 !important;
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
textarea:focus,
textarea.form-control:focus,
select:focus {
    outline: none;
    border-color: rgba(128, 0, 128, 0.6);
    box-shadow: 0 0 0 0.2rem rgba(128, 0, 128, 0.25);
}

.textarea-like {
    border: 0.125rem solid rgba(128, 0, 128, 0.6) !important; /* 2px */
    border-radius: 0.3125rem !important; /* 5px */
    transition: border-color 0.3s !important;
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
}

.input-dark-border {
    border-color: var(--color-purple) !important;
}

.label-item {
    display: flex;
    align-items: center;
    margin-bottom: 0.3125rem; /* 5px */
}

.color-box {
    width: 1.25rem; /* 20px */
    height: 1.25rem; /* 20px */
    margin-right: 0.625rem; /* 10px */
    display: inline-block;
}

.chart-container {
    background-color: var(--bs-text-opacity);
    max-width: 350px;
}

.chart-container-new {
    max-width: 21.875rem; /* 350px */
}
.chart-div-new {
    position: relative;
}

.image-25 {
    max-width: 25% !important;
    height: auto;
}
.image-50 {
    max-width: 50% !important;
    height: auto;
}

.image-left-06 {
    position: relative;
    left: -18vw;
    height: 24.2vw;
}
.image-left-07 {
    position: relative;
    left: -18vw;
    height: 24vw;
}
.image-left-08 {
    position: relative;
    left: -19vw;
    height: 25.7vw;
}
.image-left-09 {
    position: relative;
    left: -20vw;
    height: 31vw;
}
.image-start {
    position: relative;
    top: -17vw;
    height: 54vw;
    margin-bottom: -16.5vw;
    z-index: 1;
}

.container-start {
    margin-top: 7.5vw;
}

.teacher-table-wrapper {
    border: 0.125rem solid var(--color-purple); /* 2px */
    border-radius: 0.3125rem; /* 5px */
    overflow: hidden;
}
.teacher-table {
    margin-bottom: 0 !important;
}
.teacher-table thead th {
    background-color: var(--color-purple);
    color: var(--color-white);
}
.teacher-table tbody tr td {
    padding: 0.625rem; /* 10px */
    border-bottom: 0.125rem solid var(--color-purple-light); /* 2px */
}
.teacher-table tbody tr:last-of-type td {
    border-bottom: none !important;
}

.class-table th:last-child {
    text-align: left;
}
.class-table tr td:last-child {
    white-space: nowrap;
}
.class-table th:first-child, .class-table td:first-child {
    padding-left: 1.25rem !important; /* 20px */
}
.class-table th:last-child, .class-table td:last-child {
    padding-right: 1.25rem !important; /* 20px */
}
.class-table th {
    border-bottom: 0.25rem solid var(--color-purple) !important; /* 4px */
}
.class-table tr {
    border-bottom: 0.125rem solid var(--color-purple-light) !important; /* 2px */
}
.class-table td {
    padding-top: 0.625rem !important; /* 10px */
    padding-bottom: 0.625rem !important; /* 10px */
}

.breadcrumb .breadcrumb-item a {
    font: normal normal bold 1.5rem/1.75rem var(--font-family-arial); /* 24px/28px */
    letter-spacing: 0;
    text-align: left;
    text-decoration: underline;
    color: var(--color-gray-dark);
}
.breadcrumb .breadcrumb-item.active {
    font: normal normal bold 1.5rem/1.75rem var(--font-family-arial); /* 24px/28px */
    letter-spacing: 0;
    text-align: left;
    color: var(--color-gray-dark);
}
.breadcrumb > li + li::before {
    content: "/";
    font-style: normal;
    font-weight: bold;
    font-size: 1.5rem; /* 24px */
    line-height: 1.75rem; /* 28px */
    font-family: var(--font-family-arial);
    letter-spacing: 0;
    text-align: left;
    color: var(--color-gray-dark);
}

.comment-list-item {
    border: 0.125rem solid var(--color-purple) !important; /* 2px */
    padding: 0.9375rem; /* 15px */
    margin-bottom: 0.9375rem; /* 15px */
    border-radius: 0.3125rem; /* 5px */
    position: relative;
}

select.custom-dropdown {
    border: 0.125rem solid rgba(128, 0, 128, 0.6); /* 2px */
    border-radius: 0.25rem; /* 4px */
    padding: 0.625rem 0 0.625rem 1.25rem; /* 10px 0 10px 20px */
    transition: border-color 0.3s, box-shadow 0.3s;
}

select.custom-dropdown:focus {
    border-color: rgba(128, 0, 128, 0.6);
    box-shadow: 0 0 0.3125rem rgba(128, 0, 128, 0.6);; /* 5px */
    outline: none;
}

.form-check-input:checked {
    background-color: rgba(128, 0, 128, 0.6); !important;
    border-color: rgba(128, 0, 128, 0.6); !important;
}

.form-check-input:focus {
    box-shadow: 0 0 0 0.25rem rgba(128, 0, 128, 0.6); !important;
    border-color: rgba(128, 0, 128, 0.6); !important;
}

.form-check-input:active {
    background-color: rgba(128, 0, 128, 0.6); !important;
    border-color: rgba(128, 0, 128, 0.6); !important;
    box-shadow: none !important;
}

textarea:disabled, textarea[readonly] {
    background-color: var(--color-white) !important;
    color: var(--color-gray-dark) !important;
    opacity: 1 !important;
}

.auto-resize {
    resize: none;
    max-height: 18.75rem; /* 300px */
}

.upload-area {
    border: 0.125rem dashed var(--color-purple-light); /* 2px */
    padding: 1.25rem; /* 20px */
    text-align: center;
    border-radius: 0.5rem; /* 8px */
    cursor: pointer;
    transition: background-color 0.3s, box-shadow 0.3s;
}

.upload-area.dragging {
    background-color: var(--color-white);
    border-color: var(--color-purple-visited);
    box-shadow: 0 0 0.625rem var(--color-purple-active); /* 10px */
}

.upload-text {
    font-size: 1rem; /* 16px */
    font-weight: bold;
    color: var(--color-purple-active);
}

.upload-subtext {
    font-size: 0.875rem; /* 14px */
    color: var(--color-purple-light);
}

.file-browser {
    color: var(--color-purple-active);
    font-weight: bold;
    text-decoration: underline;
    cursor: pointer;
}

.file-browser:hover {
    color: var(--color-purple-light);
}

.file-icon {
    font-size: 1.125rem; /* 18px */
    margin-right: 0.625rem; /* 10px */
    color: var(--color-purple-active);
}

.remove-file {
    background-color: transparent;
    border: none;
    color: #d9534f;
    font-size: 1rem; /* 16px */
    cursor: pointer;
    padding: 0;
    margin-left: 0.625rem;
    transition: color 0.2s ease;
}

.remove-file:hover {
    color: #c9302c;
}

.image-gallery-wrapper {
    border: 2px solid var(--color-purple-active);
    border-radius: 5px;
    padding: 20px;
    background-color: var(--color-white);
}

.image-container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    text-align: center;
}

.image-container.teacher {
    height: 200px;
}

.image-container.student {
    height: 150px;
}

.image-frame {
    flex-grow: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 3px solid var(--color-purple-active);
    border-radius: 5px;
    padding: 10px;
    background-color: var(--color-white);
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    max-height: 150px;
    width: 100%;
}

.image-frame:hover {
    transform: scale(1.05);
}

img.img-fluid {
    max-height: 120px;
    width: auto;
    border-radius: 5px;
}

.blog-post-image:hover {
    transform: scale(1.05);
    cursor: pointer;
}

#imageModal img#fullImage {
    max-height: 100%;
    width: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
    object-fit: contain;
}

.gray-scale {
    filter: grayscale(100%);
}

.thumbnail-box {
    width: 100%;
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.thumbnail-img {
    max-width: 100%;
    max-height: 100%;
}
.thumbnail-font {
    font-size: 15px
}

.thumbnail-wrapper {
    position: relative;
    display: inline-block;
    margin: 10px;
}

.thumbnail-wrapper img {
    max-width: 100px;
    max-height: 100px;
}

.thumbnail-wrapper .gray-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(128, 128, 128, 0.5);
    pointer-events: none;
}

.close-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background-color: #ff5f56;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
    position: absolute;
    top: -5px;
    right: -5px;
}

.close-button svg {
    width: 18px;
    height: 18px;
}

.close-button svg path {
    fill: white;
}

.close-button:hover {
    background-color: #ff2e1c;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
}

.hiddenAdditionalError {
    background-color: #fee481;
    cursor: pointer;
}
.hiddenSpellError {
    background-color: rgba(255, 0, 0, 0.2);
    cursor: pointer;
}
.hiddenTeacherFeedback {
    background-color: rgba(0, 255, 0, 0.2);
    cursor: pointer;
}
[id^="popover-"] {
    cursor: pointer !important;
}

.upload-error-message {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 4px;
    font-size: 0.9em;
    display: flex;
    align-items: center;
}

.upload-error-message svg {
    margin-right: 8px;
}

.upload-error-message.hide {
    display: none;
}

.progress-bar {
    background-color: #795da3 !important;
    color: #ffffff;
}

.action-box {
    border: 0.125rem solid var(--color-purple);
    border-radius: 0.625rem;
    position: relative;
    width: 22rem;
}

.action-btn {
    width: 100%;
    background-color: transparent;
    color: var(--color-purple);
    font-weight: bold;
    font-size: 1.1rem;
    padding: 0.625rem 0.9375rem;
    border: none;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.action-btn i {
    transition: transform 0.3s;
}

.action-btn.expanded i {
    transform: rotate(180deg);
}

.custom-action-dropdown {
    display: none;
}

.action-links {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.2rem;
}

.action-link {
    display: flex;
    align-items: center;
    padding: 0.5rem 0.625rem;
    text-decoration: none;
}

.action-link:hover {
    background-color: #f8f9fa;
}

.action-link i {
    margin-right: 0.5rem;
    font-size: 1.1rem;
}

.action-cell {
    position: relative;
    min-width: 9.375rem;
}

.faq ul {
    list-style: none;
    padding-left: 0;
    margin-left: 0;
}

.policy-container {
    max-height: 50vh;
    overflow-y: auto;
}