@media only screen and (min-width: 1024px) {
    #cms-header .logo {
        height: 120px !important;
    }
}

#app #footer-f1 .app-link {
    height: 48px;
}

.top-bar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.5em;
    height: 40px;
    padding-left: 40px;
    padding-right: 40px;
    background-color: #000;

    & a {
        height: 24px;
        width: 24px;
        transition: transform 0.3s ease;

        &:hover {
            transform: scale(1.4);
        }
    }

    & a:nth-child(1),
    & a:nth-child(2) {
        display: flex;
        justify-content: center;
        align-items: center;
        background: #fff;

        border-radius: 50%;

        img {
            width: 80%;
            height: 80%;
        }
    }

    & a:nth-child(3) img,
    & a:nth-child(4) img {
        height: 100%;
        width: 100%;
    }
}


/* START Events */
#app #events-e4 .events-time {
    flex-direction: column;

    & .tag-tooltip {
        background: var(--primary-color);
        color: var(--primary-color-contrast);
        padding-inline: 0.25em;
        width: fit-content;

        & .event-tag {
            font-size: 12px;
        }
    }
}

/* END Events */

/* START Events page */
#app .eventsCustomButtons a {
    background-color: var(--custom-event-button-hover-bg-color, var(--primary-color));
    color: var(--custom-event-button-hover-link-color, var(--primary-color-contrast))
}

#app .eventsCustomButtons a:hover {
    background-color: var(--custom-event-button-bg-color, #f2f2f2);
    border: 1px solid var(--custom-event-button-border-color, var(--custom-event-button-link-color, var(--primary-color)));
    color: var(--custom-event-button-link-color, var(--primary-color));
}

/* END Events page */

/* ========= START Custom icons on CMS pages ========= */
#page .pb-text[class*="custom-"] p::before {
    content: "";
    display: inline-block;
    width: 2em;
    height: 2em;
    margin-right: 0.25em;
    background-position: center;
    background-size: 2em 2em;
    background-repeat: no-repeat;
    transform: translateY(0.8em);

    background-image: var(--icon-url);
}

/* icon mapping */
#page .pb-text.custom-outlook       { --icon-url: url('images/cms-pages/outlook.png'); }
#page .pb-text.custom-onedrive      { --icon-url: url('images/cms-pages/onedrive.png'); }
#page .pb-text.custom-office        { --icon-url: url('images/cms-pages/office365.jpeg'); }
#page .pb-text.custom-logout-office { --icon-url: url('images/cms-pages/logouto365.jpeg'); }

#page .pb-text.custom-schooltool-parent { --icon-url: url('images/cms-pages/schooltoolparent.png'); }
#page .pb-text.custom-schooltool-student { --icon-url: url('images/cms-pages/schooltoolstudent.png'); }
#page .pb-text.custom-frontline-pw      { --icon-url: url('images/cms-pages/frontlinepw.png'); }
#page .pb-text.custom-frontline-am      { --icon-url: url('images/cms-pages/frontlineabsence.png'); }
#page .pb-text.custom-staff             { --icon-url: url('images/cms-pages/staffdirectory.png'); }
#page .pb-text.custom-ml-schedules      { --icon-url: url('images/cms-pages/MLSchedules.png'); }
#page .pb-text.custom-ml-work-orders    { --icon-url: url('images/cms-pages/MLWorkOrders.png'); }
#page .pb-text.custom-boarddocs         { --icon-url: url('images/cms-pages/boarddocs.png'); }
#page .pb-text.custom-mail-archiver     { --icon-url: url('images/cms-pages/mailarchiver.png'); }
#page .pb-text.custom-helpnet           { --icon-url: url('images/cms-pages/helpnet.png'); }
#page .pb-text.custom-tech              { --icon-url: url('images/cms-pages/techtoolbox.png'); }

#page .pb-text.custom-nwea       { --icon-url: url('images/cms-pages/nwea.jpeg'); }
#page .pb-text.custom-nextera    { --icon-url: url('images/cms-pages/nextera.jpeg'); }
#page .pb-text.custom-schoology  { --icon-url: url('images/cms-pages/schoology.png'); }
#page .pb-text.custom-clever     { --icon-url: url('images/cms-pages/clever.png'); }
#page .pb-text.custom-classkick  { --icon-url: url('images/cms-pages/classkick.png'); }
#page .pb-text.custom-edgenuity  { --icon-url: url('images/cms-pages/edgenuity.jpeg'); }
#page .pb-text.custom-lanschool  { --icon-url: url('images/cms-pages/lanschoolair.png'); }
#page .pb-text.custom-vivi       { --icon-url: url('images/cms-pages/vivi.png'); }
#page .pb-text.custom-onetoone   { --icon-url: url('images/cms-pages/onetooneplus.png'); }
#page .pb-text.custom-vizor      { --icon-url: url('images/cms-pages/vizor.png'); }

#page .pb-text.custom-ecsd           { --icon-url: url('images/cms-pages/opals.png'); }
#page .pb-text.custom-discovery      { --icon-url: url('images/cms-pages/discoveryeducation.png'); }
#page .pb-text.custom-swank          { --icon-url: url('images/cms-pages/swankstreaming.png'); }
#page .pb-text.custom-featured-films { --icon-url: url('images/cms-pages/featurefilms.jpeg'); }

#page .pb-text.custom-cleartrack { --icon-url: url('images/cms-pages/cleartracknew.png'); }
#page .pb-text.custom-naviance   { --icon-url: url('images/cms-pages/naviance.jpeg'); }
#page .pb-text.custom-mtss       { --icon-url: url('images/cms-pages/mtssedge.png'); }
#page .pb-text.custom-lunch      { --icon-url: url('images/cms-pages/lunchcount.png'); }
#page .pb-text.custom-minime     { --icon-url: url('images/cms-pages/minime.png'); }
#page .pb-text.custom-stem       { --icon-url: url('images/cms-pages/stem.png'); }

#page .pb-text.custom-schoolpay   { --icon-url: url('images/cms-pages/schoolpay.jpeg'); }
#page .pb-text.custom-familyid   { --icon-url: url('images/cms-pages/familyid.png'); }
#page .pb-text.custom-qrcode-icon         { --icon-url: url('images/cms-pages/QRcodeicon.jpeg'); }
#page .pb-text.custom-nweareadingfluency { --icon-url: url('images/cms-pages/nweareadingfluency.jpeg'); }
#page .pb-text.custom-castlelearning       { --icon-url: url('images/cms-pages/castlelearning.png'); }
#page .pb-text.custom-choices { --icon-url: url('images/cms-pages/choices.png'); }
#page .pb-text.custom-learning { --icon-url: url('images/cms-pages/learning.png'); }
#page .pb-text.custom-razkids { --icon-url: url('images/cms-pages/razkids.png'); }
#page .pb-text.custom-sora { --icon-url: url('images/cms-pages/sora.jpeg'); }
#page .pb-text.custom-amplify { --icon-url: url('images/cms-pages/amplify.png'); }

/* ========= END Custom icons on CMS pages ========= */