/* eRevision should be programmed to support max 1440px width (restrict content to this width for sensibility, even if the screen is wider, eg a 60" TV) */
/* eRevision should be programmed to support min 320px width (smallest mobile width iPhone 5) (smallest mobile width iPhone 5) */
/* eRevision should be programmed to support unlimited max height */
/* eRevision should be programmed to support min 320 height (smallest mobile width in landscape) */

/*
MAKING CHANGES? PLEASE READ THIS FIRST!

We have been encountering problems where changes made to a CSS file do not take effect for all our users, as their device has cached the file, and does not know when to refresh the content.
To resolve this, there is a get variable on the end of the .css links; when this variable changes, the browser will refresh the contents of the file.
The variable is *filename*.css?version=091526032024

Where did the 301120202359 come from, and what are you meant to change it to?
30=30th day
06=6th month
2020=the year
15=24hr hour value
35=minute value

Any time changes are made to this CSS file, update the version value in accordance with the above scheme by searching the repository and updating relevant locations.

Note: Some instances use filemtime() to get the last modified time of the file, and this is used to update the version number. This is not always the case, so please check the file before updating the version number.
*/

#globalTopNav {
    position: sticky; /* this is at the top of the flex of the body tag */
    display: block;
    font-family: 'Patua One', Arial, sans-serif;
    font-size: 17px;
    width: 100%;
    z-index: 5000; /* should always be on top of everything */
    user-select: none; /* prevent text selection for everything in the nav */
    top: 0;
    height: fit-content;
}

.copyrightForPrintOnly {
    display: none;
    position: fixed;
    font-size: 16px;
    top: 55px;
    right: 5px;
    width: auto;
    background-color: rgba(255, 255, 255, 0.6);
    z-index: 5000;
}

@media print {
    .copyrightForPrintOnly {
        display: block;
    }
}

#globalTopNav .mobile-nav-toggle-background {
    position: relative;
    display: none;
    background: #006a98;
}

.switchRoleSchool{
    border: white 1px solid;
    border-radius: 5px;
    padding: 2px;
}

/* Mobile Navigation Toggle */
#globalTopNav .mobile-nav-toggle-background .mobile-nav-toggle .mobile-nav-toggle-section {
    padding: 6px;
    color: white;
    width: 90%;
    margin: 0 auto;
    display: inline-flex;
}

.right-mobile-nav-toggle {
    display: inline-flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    cursor: pointer;
}

.right-mobile-nav-toggle:hover .mobile-nav-toggle-icon {
    color: #ffe600;
}

#globalTopNav .mobile-nav-toggle-background .mobile-nav-toggle .mobile-nav-toggle-section .mobile-nav-toggle-icon {
    position: relative;
}

#globalTopNav .nav-container {
    position: relative;
    display: inline-block;
    top: 0;
    left: 0;
    width: 100%;
    margin: 0;
    padding: 0;
    text-align: center;
    box-sizing: border-box;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
    background-color: #006a98;
}

#globalTopNav .nav-container .nav-background {
    position: relative;
    display: block;
    width: 100%;
    margin: 0 auto;
    padding: 0;
    box-sizing: border-box;
}

#globalTopNav .upper-nav-background {
    background: #006a98;
    line-height: 1.5;
}

#globalTopNav .lower-nav-background {
    background: #004f6f;
    line-height: 0.5;
}

#globalTopNav .nav {
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: center;
    list-style: none;
    width: 85%;
    height: 100%;
    max-width: 1440px; /* 1440px is the maximum width of any screen displayed content */
    padding: 0;
    margin: 0 auto;
    box-sizing: border-box;
}

#globalTopNav .upper-nav {
    background-color: #006a98;
}

#globalTopNav .lower-nav {
    background-color: #004f6f;
}

/* FIRST LEVELS OF NAVIGATION (including upper and lower) */

/* All main-nav unordered lists in the container */
#globalTopNav .nav-section {
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    list-style: none;
    width: 100%;
    padding: 0;
    margin: 0;
    top: 0px;
}

/* Left main-nav unordered lists in the container */
#globalTopNav .nav-section.left-nav {
    justify-content: left;
}

/* Right main-nav unordered lists in the container */
#globalTopNav .nav-section.right-nav {
    justify-content: right;
}

/* eRevision Logo - on main-nav unordered upper left list in the container */
#globalTopNav .upper-nav .left-nav .navbarLogo {
    background-color: #FFF;
    border-radius: 10px;
    padding-top: 0px;
    padding-left: 5px;
    padding-right: 5px;
    padding-bottom: 0px;
    white-space: nowrap;
    color: rgba(0, 0, 0, 0.9);
    font-family: 'Montserrat', sans-serif;
    font-size: 1.25rem;
    font-weight: bold;
    line-height: 1.5;
}

/* User Role - on main-nav unordered lower left list in the container */
#globalTopNav .lower-nav .left-nav .navbarLogo {
    background: none;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    font-size: 16px;
    border-radius: 0;
    padding-top: 7px;
    padding-bottom: 7px;
    margin-bottom: 0px;
    border-right: rgba(255, 255, 255, 0.3) solid 4px;
    font-family: 'Montserrat', sans-serif;
    white-space: nowrap;
    font-weight: bold;
}

#globalTopNav .upper-nav .left-nav a.navbarLogo:hover,
#globalTopNav .lower-nav .left-nav label.navbarLogo:hover {
    text-decoration: none;
}

#globalTopNav .mobile-nav-toggle-background .mobile-nav-toggle .navbarLogoMobile,
#globalTopNav .mobile-nav-toggle-background .mobile-nav-toggle .mobile-nav-toggle-icon {
    display: none;
}

/* All list items on the first nav level - regardless if they contain open or closed sub-navs */
#globalTopNav .nav-section > li {
    position: relative;
    display: block;
    width: unset;
    white-space: nowrap;
}

/* All list item text holders on all nav level - regardless if they contain open or closed sub-navs */
#globalTopNav .nav-section li > a,
#globalTopNav .nav-section li > span {
    position: relative;
    display: block;
    padding: 7px;
    text-align: left;
    color: white;
}

/* All list items on the first nav levels - those that contain sub-navs */
#globalTopNav .nav-section.right-nav > li.dropdown-toggle {
    padding-left: 10px;
}

/* All list items on the first nav levels - those that contain sub-navs */
#globalTopNav .nav-section.left-nav > li.dropdown-toggle {
    padding-right: 10px;
}

/* All list item text holders on the first nav levels - those that contain sub-navs */
#globalTopNav .nav-section.right-nav li.dropdown-toggle > span,
#globalTopNav .nav-section.right-nav li.dropdown-toggle > a {
    padding-left: 20px;
}

/* All list item text holders on the first nav levels - those that contain sub-navs */
#globalTopNav .nav-section.left-nav li.dropdown-toggle > span,
#globalTopNav .nav-section.left-nav li.dropdown-toggle > a {
    padding-right: 20px;
}

/* All list item text holders on the first nav levels - when hovered */
#globalTopNav .nav-section li > span:not(.noLink):hover,
#globalTopNav .nav-section li > a:hover {
    color: #ffe600;
}

/* All list item text holders on the first nav levels - those that contain sub-navs which are open */
#globalTopNav .nav-section li.dropdown-toggle.dropdown-open > span {
    color: #ffc107;
}

/* SUB-LEVELS OF NAVIGATION (for both upper and lower) */

/* The first sub-nav opens down */
#globalTopNav .nav-section li.dropdown-toggle:not(.dropdown-open) > ul.dropdown {
    display: none;
}

#globalTopNav .nav-section li.dropdown-toggle.dropdown-open > ul.dropdown {
    display: block;
    position: absolute;
    z-index: 1000;
    left: 0;
    min-width: 5rem;
    padding: 0;
    margin: 0;
    margin-top: -1px;
    font-size: 1rem;
    color: #212529;
    text-align: left;
    list-style: none;
    background-clip: padding-box;
    border-left: 1px solid rgba(0, 0, 0, 0.175);
    border-right: 1px solid rgba(0, 0, 0, 0.175);
    border-bottom: 1px solid rgba(0, 0, 0, 0.175);
    border-top: 0;
    border-radius: 0rem 0rem 0.375rem 0.375rem;
    line-height: 1.5;
}

/* Subsequent sub-nav opens to the right */
#globalTopNav .nav-section li.dropdown-toggle.dropdown-open ul.dropdown li.dropdown-toggle:not(.dropdown-open) > ul.dropdown {
    display: none;
}

#globalTopNav .nav-section li.dropdown-toggle.dropdown-open ul.dropdown li.dropdown-toggle.dropdown-open > ul.dropdown {
    position: absolute;
    left: 99%;
    top: 0;
    list-style: none;
    padding: 0;
    margin: 0;
    border-left: 0;
    border-right: 1px solid rgba(0, 0, 0, 0.175);
    border-bottom: 1px solid rgba(0, 0, 0, 0.175);
    border-top: 1px solid rgba(0, 0, 0, 0.175);
    border-radius: 0rem 0.375rem 0.375rem 0.375rem;
    line-height: 1.5;
}

/* Adjust sub-nav to open to the left for right-aligned parent items */
#globalTopNav .nav-section.right-nav li.dropdown-toggle.dropdown-open ul.dropdown li.dropdown-toggle.dropdown-open > ul.dropdown {
    right: 100%;
    left: auto;
    border-radius: 0.375rem 0rem 0.375rem 0.375rem;
}

#globalTopNav .nav-section.right-nav li.dropdown-toggle.dropdown-open ul.dropdown li.dropdown-toggle.dropdown-open ul.dropdown li.dropdown-toggle.dropdown-open > ul.dropdown {
    right: 100%;
    left: auto;
}

/* All list items on all sub-nav levels - regardless if they contain open or closed sub-navs */
#globalTopNav .nav-section li.dropdown-toggle.dropdown-open > ul.dropdown li {
    text-align: left;
}

/* All list item text holders on all sub-nav levels */
#globalTopNav .nav-section > ul.dropdown li a,
#globalTopNav .nav-section > ul.dropdown li span {
    display: block;
    padding: 10px;
    text-align: left;
}

/* All list items on all sub-nav levels - those that contain sub-navs */
#globalTopNav .nav-section li.dropdown-toggle.dropdown-open > ul.dropdown > li.dropdown-toggle {
    /* nothing special about these */
}

/* All list items on all sub-nav levels - those that contain sub-navs which are open */
#globalTopNav .nav-section li.dropdown-toggle.dropdown-open > ul.dropdown > li.dropdown-toggle.dropdown-open {
    display: block;
    z-index: 1000;
    position: relative;
}

/* All list item text holders on all sub-nav levels */
#globalTopNav .nav-section > li > a,
#globalTopNav .nav-section > li > span {
    display: block;
    padding: 12px;
    color: white;
    text-decoration: none;
    cursor: pointer;
    transition: color 0.3s;
}

#globalTopNav .nav > li.left {
    margin-left: 0;
}

#globalTopNav .nav > li.right {
    margin-right: auto;
}

/* Style for nested sub-navs */

#globalTopNav .upper-nav ul.nav-section li ul.dropdown {
    background: #006a98; /* First level of upper sub-nav */
}

#globalTopNav .lower-nav ul.nav-section li ul.dropdown {
    background: #004f6f; /* First level of lower sub-nav */
}

#globalTopNav .upper-nav ul.nav-section li ul.dropdown li ul.dropdown {
    background: #004f6f; /* Second level of upper sub-nav */
}

#globalTopNav .lower-nav ul.nav-section li ul.dropdown li ul.dropdown {
    background: #003f5f; /* Second level of lower sub-nav */
}

#globalTopNav .upper-nav ul.nav-section li ul ul.dropdown li ul.dropdown {
    background: #003f5f; /* Third level of upper sub-nav */
}

#globalTopNav .lower-nav ul.nav-section li ul ul.dropdown li ul.dropdown {
    background: #001f3f; /* Third level of lower sub-nav */
}

/* Ensure deeper levels of sub-navs are also styled */
#globalTopNav .upper-nav ul.nav-section li ul ul ul.dropdown li ul.dropdown {
    background: #001f3f;
}

#globalTopNav .lower-nav ul.nav-section li ul ul ul.dropdown li ul.dropdown {
    background: #001f3f;
}

/* Eventually everything becomes the same dark color, leaving the yellow text, triangle pointers, and nav placement to identify deep hierarchy */

/* Indicate the selected parent of the sub-nav by matching the color of the parent to the sub-nav */
#globalTopNav .upper-nav ul.nav-section li.dropdown-toggle.dropdown-open ul.dropdown li.dropdown-toggle.dropdown-open {
    background-color: #004f6f; /* First level of upper sub-nav selected dropdown parent list item */
}

#globalTopNav .upper-nav ul.nav-section li.dropdown-toggle.dropdown-open ul.dropdown li.dropdown-toggle.dropdown-open ul.dropdown li.dropdown-toggle.dropdown-open {
    background-color: #003f5f; /* Second level of upper sub-nav selected dropdown parent list item */
}

#globalTopNav .upper-nav ul.nav-section li.dropdown-toggle.dropdown-open ul.dropdown li.dropdown-toggle.dropdown-open ul li.dropdown-toggle.dropdown-open ul li.dropdown-toggle.dropdown-open {
    background-color: #002f4f; /* Third level of upper sub-nav selected dropdown parent list item */
}

#globalTopNav .upper-nav ul.nav-section li.dropdown-toggle.dropdown-open ul.dropdown li.dropdown-toggle.dropdown-open ul li.dropdown-toggle.dropdown-open ul li.dropdown-toggle.dropdown-open ul li.dropdown-toggle.dropdown-open {
    background-color: #001f3f; /* Fourth level of upper sub-nav selected dropdown parent list item */
}

#globalTopNav .lower-nav ul.nav-section li.dropdown-toggle.dropdown-open ul.dropdown li.dropdown-toggle.dropdown-open {
    background-color: #003f5f; /* First level of lower sub-nav selected dropdown parent list item */
}

#globalTopNav .lower-nav ul.nav-section li.dropdown-toggle.dropdown-open ul.dropdown li.dropdown-toggle.dropdown-open ul.dropdown li.dropdown-toggle.dropdown-open {
    background-color: #001f3f; /* Second level of lower sub-nav selected dropdown parent list item */
}

#globalTopNav .lower-nav ul.nav-section li.dropdown-toggle.dropdown-open ul.dropdown li.dropdown-toggle.dropdown-open ul li.dropdown-toggle.dropdown-open ul li.dropdown-toggle.dropdown-open {
    background-color: #001f3f; /* Third level of lower sub-nav selected dropdown parent list item */
}

#globalTopNav .lower-nav ul.nav-section li.dropdown-toggle.dropdown-open ul.dropdown li.dropdown-toggle.dropdown-open ul li.dropdown-toggle.dropdown-open ul li.dropdown-toggle.dropdown-open ul li.dropdown-toggle.dropdown-open {
    background-color: #001f3f; /* Fourth level of lower sub-nav selected dropdown parent list item */
}

/* Dropdown Toggle Indicator */

#globalTopNav .nav-section li.dropdown-toggle::after {
    display: none; /* Hide the bootstrap default for this menu instance, we choose to append it to the inner text element with customizations and interaction */
}

#globalTopNav .nav-section.left-nav li.dropdown-toggle > span::after {
    display: inline-block;
    margin-left: 0.355em;
    content: "";
    border-top: 0.3em solid white;
    border-right: 0.3em solid transparent;
    border-bottom: 0;
    border-left: 0.3em solid transparent;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

#globalTopNav .nav-section.right-nav > li.dropdown-toggle > span::before {
    display: inline-block;
    margin-left: -0.855em;
    content: "";
    border-top: 0.3em solid white;
    border-right: 0.3em solid transparent;
    border-bottom: 0;
    border-left: 0.3em solid transparent;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    margin-right: 10px;
}

#globalTopNav .nav-section.left-nav li.dropdown-toggle ul.dropdown li.dropdown-toggle > span::after {
    display: inline-block;
    margin-left: 0.355em;
    content: "";
    border-top: 0.3em solid white;
    border-right: 0.3em solid transparent;
    border-bottom: 0;
    border-left: 0.3em solid transparent;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    margin-right: 10px;
}

#globalTopNav .nav-section.left-nav li.dropdown-toggle ul.dropdown li.dropdown-toggle > span:hover::after {
    border-top: 0.3em solid transparent;
    border-right: 0;
    border-bottom: 0.3em solid transparent;
    border-left: 0.3em solid #ffe600;
}

#globalTopNav .nav-section.left-nav li.dropdown-toggle.dropdown-open ul.dropdown li.dropdown-toggle.dropdown-open > span::after {
    border-top: 0.3em solid transparent;
    border-right: 0;
    border-bottom: 0.3em solid transparent;
    border-left: 0.3em solid #ffc107;
}

#globalTopNav .nav-section.right-nav li.dropdown-toggle ul.dropdown li.dropdown-toggle > span::before {
    display: inline-block;
    margin-left: 0;
    content: "";
    border-top: 0.3em solid white;
    border-right: 0.3em solid transparent;
    border-bottom: 0;
    border-left: 0.3em solid transparent;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 7px;
}

#globalTopNav .nav-section.right-nav li.dropdown-toggle ul.dropdown li.dropdown-toggle > span:hover::before {
    border-top: 0.3em solid transparent;
    border-right: 0.3em solid #ffe600;
    border-bottom: 0.3em solid transparent;
    border-left: 0;
}

#globalTopNav .nav-section.right-nav li.dropdown-toggle.dropdown-open ul.dropdown li.dropdown-toggle.dropdown-open > span::before {
    border-top: 0.3em solid transparent;
    border-right: 0.3em solid #ffc107;
    border-bottom: 0.3em solid transparent;
    border-left: 0;
}

#globalTopNav .nav-section li.dropdown-toggle:hover > span::after {
    border-top: 0.3em solid #ffe600;
}

#globalTopNav .nav-section li.dropdown-toggle.dropdown-open > span::after {
    border-top: 0.3em solid #ffc107;
}

#globalTopNav .nav-section li.dropdown-toggle:hover > span::before {
    border-top: 0.3em solid #ffe600;
}

#globalTopNav .nav-section li.dropdown-toggle.dropdown-open > span::before {
    border-top: 0.3em solid #ffc107;
}

/* Interaction Feedback */
#globalTopNav .nav-section li.dropdown-toggle.dropdown-open ul.dropdown li > a:focus,
#globalTopNav .nav-section li.dropdown-toggle.dropdown-open ul.dropdown li > span:focus,
#globalTopNav .nav-section li.dropdown-toggle.dropdown-open ul.dropdown li > a:hover,
#globalTopNav .nav-section li.dropdown-toggle.dropdown-open ul.dropdown li > span:not(.noLink):hover {
    color: #ffe600;
}

#globalTopNav .nav-section li.dropdown-toggle.dropdown-open ul.dropdown li.dropdown-toggle.dropdown-open > a,
#globalTopNav .nav-section li.dropdown-toggle.dropdown-open ul.dropdown li.dropdown-toggle.dropdown-open > span {
    color: #ffc107;
}

.navUnreadMessagesCount {
    background: #f54454;
    border-radius: 50%;
    color: white;
    display: inline-block;
    font-weight: 500;
    line-height: 20px;
    margin-right: 5px;
    text-align: center;
    width: 22px;
    font-size: 15px;
    height: 22px;
    vertical-align: text-bottom;
    text-shadow: 0px 0px 4px #000;
    font-family: Calibri, Candara, Segoe, Segoe UI, Optima, Arial, sans-serif;
}

.cookieConsentBackground {
    width: 100%;
    background: #006a98;
    padding-top: 0.5vh;
    padding-bottom: 0.5vh;
}

.cookieConsentBackground #cookieConsent {
    width: 98%;
    margin: 0 auto;
    font-family: Arial, sans-serif;
    background-color: rgb(245, 245, 245);
    display: flex;
    flex-direction: row;
    justify-content: center;
    border: black;
    border-style: solid;
    border-width: thin;
    border-radius: 1vw;
    padding-top: 0.25vw;
    padding-bottom: 0.25vw;
    position: relative;
    align-items: stretch;
}

.cookieConsentBackground #cookieConsent #cookieText {
    float: left;
    width: 80vw;
    flex-grow: 1;
    padding-left: 2%;
    padding-right: 2%;
    color: darkblue;
    white-space: initial;
}

.cookieConsentBackground #cookieConsent #cookieAcceptBtn {
    float: right;
    width: 20vw;
    max-width: 200px;
    background-color: #0178C3;
    flex-grow: 1;
    border-radius: 1vw;
    margin-right: 0.5vw;
    cursor: pointer;
}

.cookieConsentBackground #cookieConsent #cookieAcceptBtn:hover {
    background-color: #006a98;
}

.cookieConsentBackground #cookieConsent #cookieAcceptBtn #cookieAcceptBtnTxt {
    position: relative;
    color: white;
    top: 50%;
    transform: translateY(-50%);
    display: block;
}

.cookieConsentBackground #cookieConsent #cookieAcceptBtn:hover #cookieAcceptBtnTxt {
    color: #ffe600;
}

.cookieConsentBackground #cookieConsent #cookieText #cookiePolicyLink {
    color: blue;
}

.cookieConsentBackground #cookieConsent #cookieText #cookiePolicyLink:hover {
    text-decoration: underline;
    color: rgb(65, 96, 197);
}

#globalTopNav .nav-container #stopMockingNavBtn {
    color: rgb(194, 5, 5);
    font-family: 'Montserrat', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 0.9em;
}

#globalTopNav .nav-container #stopMockingNavBtn:hover {
    color: red;
    user-select: none;
    border: 1px solid red;
    border-radius: 0.25rem;
}

#globalTopNav .mobile-nav-toggle-background #stopMockingNavBtn {
    color: rgb(194, 5, 5);
    font-family: 'Montserrat', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 0.9em;
    margin-left: 2vw;
    align-content: center;
    white-space: nowrap;
    overflow: visible;
}

#globalTopNav .mobile-nav-toggle-background #stopMockingNavBtn:hover {
    color: red;
    user-select: none;
    border: 1px solid red;
    border-radius: 0.25rem;
}