.note-editor.note-frame {
    background-color: #fff !important;
}
.note-editor.note-frame .note-editing-area .note-editable {
    background-color: #fff !important;
}

:root {
    --color-red: #E73153;
    --color-red-hover: #f0617a;
    --color-green: #44986C;
    --color-green-hover: #5bbd8b;
    --color-blue: #0f4789;
    --color-blue-hover: #2161ba;
    --color-light: #ffffff;
    --color-light-hover: #cccccc;
    --color-dark: #231f20;
}

html {
    overflow-x: hidden;
}

body {
    font-family: 'Montserrat', sans-serif;
    min-height: 100vh;
}

.bg-light {
    background-color: var(--color-light) !important;
    color: var(--color-dark);

    a:hover,
    a.active,
    a[aria-current="page"] {
        font-weight: bold;
    }

    a::after {
        display: block;
        content: attr(title);
        font-weight: bold;
        height: 1px;
        color: transparent;
        overflow: hidden;
        visibility: hidden;
    }
}

.bg-dark {
    background-color: var(--color-dark) !important;
    color: var(--color-light);

    a {
        color: var(--color-light);
        text-decoration: none;
    }

    a:hover {
        color: var(--color-light-hover);
    }
}

.bg-red {
    background-color: var(--color-red) !important;
    color: var(--color-light);
}

.bg-green {
    background-color: var(--color-green) !important;
    color: var(--color-light);
}

.bg-blue {
    background-color: var(--color-blue) !important;
    color: var(--color-light);
}

.text-red {
    color: var(--color-red) !important;
}

.text-green {
    color: var(--color-green) !important;
}

.text-blue {
    color: var(--color-blue) !important;
}

.text-playful {
    font-family: 'MuseoModerno', sans-serif;
}

.teacher-profile-overlap {
    width: 260px;
    height: 260px;
    object-fit: cover;
    border-radius: 50%;
    border: 8px solid white;
    margin-top: -160px;
    position: relative;
    z-index: 20;
    background-color: white;
}

.teacher-view-dark {
    color: var(--color-dark);
}

.teacher-name-caps {
    font-family: 'MuseoModerno', sans-serif;
    text-transform: uppercase;
    font-weight: 900;
}

/* Elements */

.nav-center-button {
    border-radius: 50rem;
    padding: 0.5rem 1.5rem;
    text-decoration: none;
}

.nav-center-button:hover,
.nav-center-button.active,
.nav-center-button[aria-current="page"] {
    font-weight: bold;
    color: white !important;
    text-decoration: none;
    transition: none;
}

.nav-center-button.bg-red:hover {
    background-color: var(--color-red-hover) !important;
}

.nav-center-button.bg-green:hover {
    background-color: var(--color-green-hover) !important;
}

.nav-center-button.bg-blue:hover {
    background-color: var(--color-blue-hover) !important;
}

.btn-dark {
    --bs-btn-bg: var(--color-dark);
    --bs-btn-border-color: var(--color-dark);
    --bs-btn-hover-bg: var(--color-dark);
    --bs-btn-hover-border-color: var(--color-dark);
    --bs-btn-active-bg: var(--color-dark);
    --bs-btn-active-border-color: var(--color-dark);
    --bs-btn-color: white;
}

.btn-outline-dark {
    --bs-btn-color: var(--color-dark);
    --bs-btn-border-color: var(--color-dark);
    --bs-btn-hover-bg: var(--color-dark);
    --bs-btn-hover-border-color: var(--color-dark);
    --bs-btn-active-bg: var(--color-dark);
    --bs-btn-active-border-color: var(--color-dark);
    --bs-btn-hover-color: white;
}

.btn-primary {
    --bs-btn-bg: var(--color-blue);
    --bs-btn-border-color: var(--color-blue);
    --bs-btn-hover-bg: var(--color-blue-hover);
    --bs-btn-hover-border-color: var(--color-blue-hover);
    --bs-btn-active-bg: var(--color-blue-hover);
    --bs-btn-active-border-color: var(--color-blue-hover);
    --bs-btn-color: var(--color-light);
}

.btn-secondary {
    --bs-btn-bg: #6c757d;
    --bs-btn-border-color: #6c757d;
    --bs-btn-hover-bg: #5c636a;
    --bs-btn-hover-border-color: #565e64;
    --bs-btn-active-bg: #565e64;
    --bs-btn-active-border-color: #51585e;
}

.btn-outline-primary {
    --bs-btn-color: var(--color-blue);
    --bs-btn-border-color: var(--color-blue);
    --bs-btn-hover-bg: var(--color-blue);
    --bs-btn-hover-border-color: var(--color-blue);
    --bs-btn-active-bg: var(--color-blue);
    --bs-btn-active-border-color: var(--color-blue);
    --bs-btn-hover-color: var(--color-light);
}

.card {
    --bs-card-border-radius: 1rem;
    --bs-card-border-color: var(--color-dark);
}

.bg-blue {
    background-color: var(--color-blue) !important;
    color: var(--color-light) !important;
}

.bg-red {
    background-color: var(--color-red) !important;
    color: var(--color-light) !important;
}

.bg-green {
    background-color: var(--color-green) !important;
    color: var(--color-light) !important;
}

.admin-wrapper {
    margin-top: 2rem;
}

.admin-wrapper h1 {
    font-family: 'MuseoModerno', sans-serif;
    text-transform: uppercase;
    font-weight: 900;
}

.border-2 {
    border-width: 2px !important;
}

#brand-image {
    height: 60px;
    width: 300px;
    object-fit: none;
    object-position: center;
    scale: 0.8;
}

.static-content-index {
    max-width: 800px;
}

/* Layouts */

.full-width-banner {
    width: 100%;
    height: 267px;
    object-fit: cover;
    display: block;
    z-index: 1;
    border-radius: 1rem;
}

@media (min-width: 992px) {
    .side-content {
        position: sticky;
        top: 100px;
        z-index: 10;
    }

    .overlap-banner {
        margin-top: -150px;
        margin-right: 16px;
    }
}

/* honeypot */
.website-field {
    position: absolute;
    left: -9999px;
    height: 1px;
    width: 1px;
    overflow: hidden;
}

.contact-form {
    padding: 1em;
    border: 1px solid var(--color-dark);
    border-radius: 1rem;
    background: white;
}

/* Result Cards */
:root {
    --result-card-height: 180px;
}

.result-card {
    height: var(--result-card-height);
    border-radius: 1rem;
    overflow: hidden;
    border: 1px solid white;
    background: white;
}

.result-card:hover {
    cursor: pointer;
}

.result-card-course:hover .card-header-red {
    background-color: var(--color-red-hover);
}

.result-card-teacher:hover .teacher-info-container {
    background-color: var(--color-green-hover);
}

.result-card-course:hover .arrow-box i {
    color: var(--color-red-hover);
}

.result-card-teacher:hover .arrow-box i {
    color: var(--color-green-hover);
}

.result-card-course .card-header-red {
    height: 25%;
    background-color: var(--color-red);
    color: white;
    padding: 0 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background-color 0.2s ease-out;
}

.result-card-course .card-header-red h5 {
    font-size: 1.1rem;
    font-weight: bold;
    max-width: 80%;
}

.result-card-course .card-body-image {
    height: 75%;
    overflow: hidden;
}

.result-card-course .zoom-on-hover, .result-card-teacher .zoom-on-hover {
    transition: transform 0.2s ease-out;
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.result-card-course:hover .zoom-on-hover, .result-card-teacher:hover .zoom-on-hover {
    transform: scale(1.1) rotate(-1deg);
}

.result-card-teacher {
    display: flex;
    flex-direction: row;
}

.result-card-teacher .teacher-image-container {
    width: 40%;
    height: 100%;
    overflow: hidden;
}

.result-card-teacher .teacher-image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.result-card-teacher .teacher-info-container {
    width: 60%;
    height: 100%;
    background-color: var(--color-green);
    color: white;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    position: relative;
    text-align: right;
    transition: background-color 0.2s ease-out;
}

.arrow-box {
    width: 32px;
    height: 32px;
    background-color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
}

.arrow-box i {
    font-weight: 900 !important;
    -webkit-text-stroke: 1px currentColor;
}

.result-card-course .arrow-box i {
    color: var(--color-red);
    transition: color 0.2s ease-out;
}

.result-card-teacher .arrow-box i {
    color: var(--color-green);
    transition: color 0.2s ease-out;
}

.result-card-teacher .arrow-box {
    position: absolute;
    top: 1rem;
    right: 1rem;
    /* Since it's on the top right, we need it to be at the corner or with some margin? */
    /* "on the top right" */
}

.result-card-teacher .teacher-courses {
    font-size: 0.85rem;
    opacity: 0.9;
    /* "underneath their courses" */
}

.result-card-teacher .teacher-name {
    font-weight: bold;
    font-size: 1.1rem;
    margin-bottom: 0.2rem;
}

.search-form-container {
    max-width: 400px; /* Approx 1 card width */
    flex: 1 1 300px;
    position: relative;
}

.search-input-group {
    display: flex;
    align-items: center;
    position: relative;
}

.search-input {
    border-radius: 50rem !important;
    border: 2px solid var(--color-dark) !important;
    padding-right: 3rem !important;
    height: 48px;
    font-size: 1rem;
    box-shadow: none !important;
}

.search-input::placeholder {
    color: #6c757d;
    opacity: 0.8;
}

.search-submit-btn {
    position: absolute;
    right: 0.25rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--color-dark);
    padding: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    transition: opacity 0.2s;
}

.search-submit-btn:hover {
    opacity: 0.7;
}

.search-submit-btn i {
    font-size: 1.25rem;
}

.search-categories-container {
    flex: 10 1 auto;
}

.rich-text a {
    color: inherit;
    text-decoration: underline;
}

.rich-text a::after {
    content: "\f470";
    font-family: "bootstrap-icons";
    display: inline-block;
    margin-left: 0.2rem;
    font-size: 0.8em;
    vertical-align: middle;
    text-decoration: none;
}

.rich-text a:hover {
    color: var(--color-dark);
    text-decoration: underline;
}

.agenda-description .description-short,
.agenda-description .description-full {
    cursor: pointer;
}

.agenda-description .description-short {
    color: var(--color-dark);
    opacity: 0.8;
    transition: opacity 0.2s ease-in-out;
}

.agenda-description .description-short:hover {
    opacity: 1;
}