* {
    -webkit-font-smoothing: antialiased;
    /* overflow-x: auto; */
}

body {
    /* background: #E5E5E5; */
    /* background: #F2EBE9; */
    background: #e9edf0;
    /* background: #f3f7f6; */
 
    font-size: .80em;
    /*font-family: "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif;*/
    /* font-family: 'Roboto', sans-serif; */
    font-family: 'Rubik', sans-serif;
    margin: 0px;
    padding: 0px;
    color: #696969;
    width: 100% !important;
    /* overflow-x: hidden; */
    /* THE BELOW SETTING IS TO ALLOW TOUCH EVENTS IN EDGE 
        http://stackoverflow.com/questions/33300962/touch-api-e-g-touchstart-not-working-in-ms-edge
    */
    /*-ms-touch-action: none;*/
}

body.default {
    background: #e9edf0;
    border-bottom: solid 1px #e9edf0;
}

body.modern {
    background: #F2EBE9;
    border-bottom: solid 1px #F2EBE9;
}

body.highContrast {
    background: #e6e6e6;
    border-bottom: solid 1px #e6e6e6;
}

body.blueSky {
    background: #E1EAEE;   
    border-bottom: solid 1px #E1EAEE;
}


#baseContainer #_contentsContainer_   {
    overflow: scroll;
    height: 95vh;
  }

.helpDisplayContainer {
    z-index: 9999;
    position: fixed;
    top: 5vh;
    left: 2vw;
}

.mainContainerContents {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
}

/*Note - added a little margin here since the message is right up against the top bar and harder to read because of it.*/
.pageMessageContainer {
    display: flex;
    flex-direction: column;
    margin: 35px;
}

/*Aug 2022 - had to add this color when setting the nav to fixed so that when it is collapsed, the container showing matches*/
#mainContainer {
    background-color:white;
}

.MessageBullet {
    font-size: large;
    color: Black;
}

.MessageHeader {
    color: #465c71;
    text-align: center;
    font-variant: small-caps;
    font-size: xx-large;
    text-transform: capitalize;
    font-weight: 800;
}

.MessageSubHeader {
    color: #465c71;
    text-align: center;
    font-variant: small-caps;
    font-size: x-large;
    text-transform: uppercase;
    font-weight: 600;
}

.MessageText {
    font-size: large;
    color: Black;
    font-weight: bold;
 
}

.copyrightFooter {
    width: 100%;
    text-align: center;
    color: #243A73;
    margin-top: 1rem;
    letter-spacing: 0.3px;
    position: absolute;
    bottom: 10%
}

.copyrightFooter a {
    /* color: #2d3b55; */

    letter-spacing: 0.3px;

}

.versionDetails {
    width: 95vw;
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin-top: 2vh;
    font-weight: 600;
    padding: 1vw;
}

.versionDetails>div {
    padding: 1vw;
}

.loadingDivDisplay {
    position: fixed;
    left: 40vw;
    top: 60vh;
    z-index: 1000;
}

.basetable {
padding: 0px;
margin: 25px 15px 15px 25px;
border-collapse: collapse;
border-spacing: 0px;
table-layout: inherit;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
justify-content: flex-start;
flex-wrap: wrap;
width: 85vw;
gap: 1rem;
}

/* .basetable .smallCheckItem {
    display: grid;
    grid-template-columns: repeat(3, 30%);
    grid-gap: 1rem;
    justify-content: center;
    align-items: center;
    width: 89vw;
    padding: 0;
    margin: 0px;

} */
.bubbleNavBar {
    display: flex;
    flex-direction: column;
    width: 3.5vw;
}

.bubbleNavBar img {
    cursor: pointer;
    width: 3vw;
    height: 3vw;
    margin: 0.2vw;
}

.bubbleNavContents {
    position: absolute;
    left: 3.5vw;
    z-index: 1050;
}

/* .loginContainerDiv>.dropshadow {
    position: fixed;
    width: 100vw;
    height: 100vh;
    background-color: black;
    opacity: 0.3;
    left: 0;
    top: 0;
    z-index: 9900;
} */

.themeRemoveNote {
    font-size: 2vh;
    font-weight: 600;
}

/*Css below is for the loading indicator animation. Was generated using: http://loading.io/*/

@-webkit-keyframes uil-default-anim {
    0% {
        opacity: 1
    }

    100% {
        opacity: 0
    }
}

@keyframes uil-default-anim {
    0% {
        opacity: 1
    }

    100% {
        opacity: 0
    }
}

.uil-default-css>div:nth-of-type(1) {
    -webkit-animation: uil-default-anim 1s linear infinite;
    animation: uil-default-anim 1s linear infinite;
    -webkit-animation-delay: -0.5s;
    animation-delay: -0.5s;
}

.uil-default-css {
    position: relative;
    background: none;
    width: 200px;
    height: 200px;
}

.uil-default-css>div:nth-of-type(2) {
    -webkit-animation: uil-default-anim 1s linear infinite;
    animation: uil-default-anim 1s linear infinite;
    -webkit-animation-delay: -0.4166666666666667s;
    animation-delay: -0.4166666666666667s;
}

.uil-default-css {
    position: relative;
    background: none;
    width: 200px;
    height: 200px;
}

.uil-default-css>div:nth-of-type(3) {
    -webkit-animation: uil-default-anim 1s linear infinite;
    animation: uil-default-anim 1s linear infinite;
    -webkit-animation-delay: -0.33333333333333337s;
    animation-delay: -0.33333333333333337s;
}

.uil-default-css {
    position: relative;
    background: none;
    width: 200px;
    height: 200px;
}

.uil-default-css>div:nth-of-type(4) {
    -webkit-animation: uil-default-anim 1s linear infinite;
    animation: uil-default-anim 1s linear infinite;
    -webkit-animation-delay: -0.25s;
    animation-delay: -0.25s;
}

.uil-default-css {
    position: relative;
    background: none;
    width: 200px;
    height: 200px;
}

.uil-default-css>div:nth-of-type(5) {
    -webkit-animation: uil-default-anim 1s linear infinite;
    animation: uil-default-anim 1s linear infinite;
    -webkit-animation-delay: -0.16666666666666669s;
    animation-delay: -0.16666666666666669s;
}

.uil-default-css {
    position: relative;
    background: none;
    width: 200px;
    height: 200px;
}

.uil-default-css>div:nth-of-type(6) {
    -webkit-animation: uil-default-anim 1s linear infinite;
    animation: uil-default-anim 1s linear infinite;
    -webkit-animation-delay: -0.08333333333333331s;
    animation-delay: -0.08333333333333331s;
}

.uil-default-css {
    position: relative;
    background: none;
    width: 200px;
    height: 200px;
}

.uil-default-css>div:nth-of-type(7) {
    -webkit-animation: uil-default-anim 1s linear infinite;
    animation: uil-default-anim 1s linear infinite;
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
}

.uil-default-css {
    position: relative;
    background: none;
    width: 200px;
    height: 200px;
}

.uil-default-css>div:nth-of-type(8) {
    -webkit-animation: uil-default-anim 1s linear infinite;
    animation: uil-default-anim 1s linear infinite;
    -webkit-animation-delay: 0.08333333333333337s;
    animation-delay: 0.08333333333333337s;
}

.uil-default-css {
    position: relative;
    background: none;
    width: 200px;
    height: 200px;
}

.uil-default-css>div:nth-of-type(9) {
    -webkit-animation: uil-default-anim 1s linear infinite;
    animation: uil-default-anim 1s linear infinite;
    -webkit-animation-delay: 0.16666666666666663s;
    animation-delay: 0.16666666666666663s;
}

.uil-default-css {
    position: relative;
    background: none;
    width: 200px;
    height: 200px;
}

.uil-default-css>div:nth-of-type(10) {
    -webkit-animation: uil-default-anim 1s linear infinite;
    animation: uil-default-anim 1s linear infinite;
    -webkit-animation-delay: 0.25s;
    animation-delay: 0.25s;
}

.uil-default-css {
    position: relative;
    background: none;
    width: 200px;
    height: 200px;
}

.uil-default-css>div:nth-of-type(11) {
    -webkit-animation: uil-default-anim 1s linear infinite;
    animation: uil-default-anim 1s linear infinite;
    -webkit-animation-delay: 0.33333333333333337s;
    animation-delay: 0.33333333333333337s;
}

.uil-default-css {
    position: relative;
    background: none;
    width: 200px;
    height: 200px;
}

.uil-default-css>div:nth-of-type(12) {
    -webkit-animation: uil-default-anim 1s linear infinite;
    animation: uil-default-anim 1s linear infinite;
    -webkit-animation-delay: 0.41666666666666663s;
    animation-delay: 0.41666666666666663s;
}

.uil-default-css {
    position: relative;
    background: none;
    width: 200px;
    height: 200px;
}

/* Aug 2022 - changed width to 92vw because it was overflowed across at 100 - not sure why; */
.scheduleContainer {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    /* width: 100vw; */
    width: 92vw;
    margin-top: 10px;
}

.scheduleContainerHeader {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    width: 98vw;
    font-size: 2vh;
    margin-bottom: 10px;
}

.scheduleContainerHeader>div {
    margin-left: 1vw;
}

.scheduleContainerHeader>div>a {
    margin-right: 1vw;
}

.scheduleContainer .infoText {
    font-size: 0.9rem;
    margin-left: 10px;

}

.scheduleGroup {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    /* min-width: 10vw; */
    margin: 1vh;
    padding: 1vh;
    box-shadow: 5px 4px 31px 0px rgba(107, 107, 107, 0.75);
    border: solid #e5ffff 2px;
    border-radius: 1vw;
    flex: 1 0 10vw;
}

.scheduleGroupContents {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    min-width: 10vw;
    margin: 1vh;
    padding: 1vh;
    border-radius: 1vw;
    flex: 1 0 10vw;
}

.scheduleGroup>.scheduleGroupTitle {
    width: 100%;
}

.scheduleGroupContents .scheduleSelection {
    padding: 10px;
}

.baseTableEditorPages {
    display: flex;
    margin: 5px 0px;
    color: black;
}

.baseTableEditorPageButtons {
    background-color: #7986cb;
    margin: 0px 10px;
}

.navigationStyleList {
    width: 25vw;
    font-size: 1.5em;
}


.scheduleSelection {
    width: 10vw;
    height: 10vh;
    /* font-size: 2vh; */
    cursor: pointer;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-around;
    background-color: #e5ffff;
    margin: 1vh;
    /* box-shadow: 5px 4px 31px 0px rgba(107, 107, 107, 0.75); */
    box-shadow: rgb(100 100 111 / 25%) 0px 3px 50px 0.5px;
    border-radius: 8px;
    position: relative;
}

.navContainer .scheduleSelection {
    height: 90%;
    width: 95%;
    cursor: pointer;
    display: flex;
    border-radius: 5px;
    font-weight: 800;
    flex-direction: column;
    justify-content: center;
    background-color: #acddf2;
    align-items: center;
    box-shadow: none;
    margin: 0px;
    position: relative;
}

.navigationStyleListItem {
    min-height: 50px;
    background: white !important;
    cursor: pointer;
    margin-top: 10px !important;
    border: 1px solid black;
    box-shadow: 4px 4px 4px 0px rgba(120, 120, 120, 1) !important;
    transition: background .25s ease-in-out;
    list-style-type: none;
    border-radius: 5px;
}

.navigationStyleListItem:hover {
    background: rgb(216, 216, 216) !important;
}

.navContainer .scheduleSelectionContainer {
    width: 10vw;
    height: 10vh;
    background-color: white;
    margin: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2px;
    box-shadow: none;
    margin: initial;
}

.scheduleContainer .fontIcon {
    font-size: 2vh;
    cursor: pointer;
    margin: 2px;
}

.scheduleContainer .floatingControls {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 50vh;
    width: 5vw;
    background-color: #e1f5fe;
    z-index: 500;
    border-radius: 0 1vw 1vw 0;
    box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.35);
}

.scheduleContainer .floatingControls.collapsed {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 50vh;
    /* margin-left: -7vw; */
    width: 5vw;
    background-color: #e1f5fe;
    z-index: 500;
    border-radius: 0 1vw 1vw 0;
    box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.35);
}

.scheduleContainer .loadingIcon {
    position: fixed;
    top: 50vh;
    left: 40vw;
    z-index: 1000;
}

.scheduleContainer .copyDisplay {
    position: fixed;
    bottom: 0px;
    left: 5vw;
    height: 10vh;
    width: 90vw;
    border-radius: 1vw 1vw 0 0;
    /* background-color: #d1d9ff; */
    background-color: #f8fdff;
    padding: 1vh 1vh 0 1vh;
    color: black;
    box-shadow: 1px -3px 22px 0px rgba(0, 0, 0, 0.68);
    z-index: 1000;
    display: grid;
    grid-template-columns: 40fr 50fr 10fr;
    grid-template-rows: 5vh 5vh;
    grid-template-areas: "header header header""source target continue";
}

.copyDisplay.expanded {
    height: 70vh;
    bottom: 15vh;
    border-radius: 1vw;
    display: grid;
    grid-template-columns: 40fr 50fr 10fr;
    grid-template-rows: 5vh 10vh 20vh 30vh 5vh;
    grid-template-areas: "header header header""source targetSelect targetSelect""source target target""source target target""footer footer footer";
}

.copyDisplay .fontIcon {
    font-size: 2vh;
    cursor: pointer;
}

.copyDisplay .header {
    grid-area: header;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    font-size: 2.5vh;
}

.copyDisplay .source {
    grid-area: source;
    display: flex;
    flex-direction: column;
    border-right: solid 1px grey;
    margin-right: 1vw;
}

.copyDisplay.expanded .source {
    font-size: 2vh;
    margin-top: 3vh;
}

.copyDisplay.expanded .source>.sub {
    margin-left: 1vw;
    ;
}

.copyDisplay .targetControls {
    grid-area: targetSelect;
    /* display: flex;
    flex-direction: column; */
    display: grid;
    grid-template-columns: 60fr 40fr;
    grid-template-rows: 32fr 32fr 32fr;
    grid-template-areas: "cs .""plan .""station clear";
}

.copyDisplay .targetControls>.csBtn {
    grid-area: cs;
}

.copyDisplay .targetControls>.planBtn {
    grid-area: plan;
}

.copyDisplay .targetControls>.stnBtn {
    grid-area: station;
}

.copyDisplay .targetControls>.clearBtn {
    grid-area: clear;
}

.copyDisplay .targets {
    grid-area: target;
    display: flex;
    flex-direction: column;
    margin-top: 2vh;
}

.copyDisplay .targets .filterCard {
    overflow-x: hidden;
    height: 40vh;
    max-height: 40vh;
}

.copyDisplay .continueControls {
    grid-area: continue;
}

.copyDisplay .footer {
    grid-area: footer;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}

.copyDisplay .title {
    font-size: 1.8vh;
    font-weight: 600;
}


/* .siteSettingsWindow {
    position: fixed;
    width: 100vw;
    height: 95vh;
    top: 5vh;
    /* left: 2vw; */
    /* background-color: white;
    z-index: 9000; */
    /* box-shadow: 1px 3px 15px 4px rgba(89, 89, 89, 0.84); */
    /* display: grid;
    grid-template-columns: 12vw auto 5vw;
    grid-template-rows: 10vh auto;
    grid-template-areas: "nav header close""nav content content";
    column-gap: 1vh;
    row-gap: 1vh; */
    /* box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; */
    /* margin: 0 auto;

} */

/*.siteSettingsNav {
    grid-area: nav;
    display: flex;
    flex-direction: column;
    /* background-color: #b1bfca; */
    /* background-color: #7c3e66;
    color: #f2ebe9;
} */

/*
.siteSettingsNav .search {
    height: 6vh;
    display: flex;
    flex-direction: row;
   
    flex-wrap: nowrap;
    font-size: 1rem;
    justify-content: space-around;
    align-items: center;
    margin-top: 25px;
    margin-bottom: 2rem;
}

.siteSettingsNav .search>input {
    margin-top: 1vh;
    height: 3vh;
    font-size: 2vh;
    width: 8vw;
    color: #243A73;
}

.siteSettingsNav .menuOptions {
    display: flex;
    flex-direction: column;
    font-size: 0.9rem; 
    transition: 0.3s;
}


.siteSettingsNav .menuOptions a {
    color: white;
    text-decoration: none;
    margin-top: 10px;
    margin-left: 0;
    margin-right: 5px;
    padding-left: 10px;
    margin-bottom: 15px;
    letter-spacing: 0.3px;
    border-left: 3px solid #7C3E66;
    transition: 0.3s ease-in-out;
    width: 92%;
}

.siteSettingsNav .menuOptions a:hover,
.siteSettingsNav .menuOptions a:focus,
.siteSettingsNav .menuOptions a:active {
    background-color: #995681;
    border-left: 3px solid #F2EBE9;
    width: 92%;
}

.siteSettingsNav .menuOptions>a {
    cursor: pointer;
}

.siteSettingsTitle {
    grid-area: header;
    font-size: 2.4rem;
    color: #2c3146;
    margin: 25px;
    margin-bottom: 15px;
}

.siteSettingsClose {
    grid-area: close;
    font-size: 3.5vh;
    cursor: pointer;
    justify-self: end;
}


.site-setting-close {
    margin-top: 10px;
    margin-right: 10px;
    color:#2c3146;
}

.siteSettingsContent {
    grid-area: content;
    overflow: auto;
    padding: 0px 5px 5px 5px;
    
} */

/* .moduleSelectorDiv {
    width: 80%;
    height: 100%;
    display: flex;
    flex-direction: column;
    margin-left: 3vw;
} */

/* .moduleSelectorHeader {
    font-size: 3vh;
    margin-bottom: 2vh;
} */

.modulePartDisplay {
    display: flex;
    flex-direction: row;
    margin-left: 3vw;
    font-size: 2.5vh;
    width: 50%;
    justify-content: space-between;
    cursor: default;
}

.modulePartDisplay .icon-filled {
    color: #80e27e;
}

/* .siteSettingsLandingDisplay {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    font-size: 2vh;
    /* font-weight: 600; */
    /* letter-spacing: 0.3px;
    margin: 35px;
    color: #2c3146;
} */ 

/* /* .site-settings-release-links {
    margin-top: 1rem;
}
.siteSettingsLandingDisplay .site-setting-subhead {
    font-weight: bold;
} */

/* .siteSetting-subDiv {
    margin-top: 2rem;
}

.siteSettingsLandingDisplay a {
    color: #7C3E66;
    cursor: pointer;
    text-decoration: none;
    margin-top: 10px;
    border-bottom: 1px solid white;
}

.siteSettingsLandingDisplay a:hover,
.siteSettingsLandingDisplay a:focus,
.siteSettingsLandingDisplay a:active {
    border-bottom: 1px solid #7C3E66;
} */


/* .siteSettingsLandingDisplay .poweredBy  {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    margin: 1vw;
    padding-bottom: 2.5rem;
    color: #7C3E66;
    font-size: 0.7rem;
    font-weight: 500;
    text-align: right;
}

.site-settings-logo {
    width: 100px;
  
} */
 */

.bsTableEditForm {
    height: 55vh !important;
    top: 5vh !important;
}

.isoTestClass {
    max-height: 45vh;
}

/* .releaseNotes {
    width: 100%;
} */

.releaseNotes>h1 {
    border-bottom: solid #42a5f5 2px;
    margin-top: 3vh;
}

.releaseNotes .notes {
    margin-left: 2vw;
}

.releaseNotes .notes img {
    max-width: 70vw;
}

/* 2020 styling */
/*NOTE - I am moving this nav css to the 2020Nav.js file as styled components! Kept here - blacked out for reference.

/* .navContainer {
    width: 100vw;
    height: 95vh;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    background-color: white;
}

.navContainer .navBar {
    width: 3vw;
    /* background-color: #c5cae9; */
    /* color: black; */
    /* background-color: #7C3E66;
    color: white;
 padding-left: 4px;
    /* display: flex;
    flex-direction: column; */
    /* border-right: solid 1px #a4a4a4; */
    /* display: grid;
    grid-template-columns: 3vw;
    grid-template-rows: 85vh 5vh 5vh;
    grid-template-areas: "nav""copyright""collapse";
    z-index: 502;
} */ 

/* .navContainer .navBar.expanded {
    width: 10vw;
    grid-template-columns: 7vw 3vw;
    grid-template-rows: 90vh 5vh;
    grid-template-areas: "nav nav""copyright collapse";
}

.navContainer .navBar .navSelection {
    cursor: pointer;
    font-size: .95rem;
    margin-bottom: 1.2rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
    width: 15vw;

}

.navContainer .navBar .navSelection.navSelected {
    /* background-color: #e8eaf6; */
    /* background-color: #995681;
    width: 14.3vw;
    margin-left: -5px;
} */

/* .navContainer .navBar .navSelected-collapsed {
    /* background-color: #e8eaf6; */
    /* background-color: #995681;
    width: 7.83vw;
    margin-left: -5px;
} 


.navContainer .navBar .navItems {
    grid-area: nav;
    margin-top: 20px;
    font-size: 1.4rem;
    letter-spacing: 0.3px; 
}

.navContainer .navBar .expandIcon {
    justify-self: flex-end;
    grid-area: collapse;
}

.navContainer .navBar .expandIcon .icon-angle-double-left {
    margin-right: 0;
}

.navContainer .navBar .copyrightIcon {
    grid-area: copyright;
    /* font-size:  */
/* } */
/*
.navContainer .navBar .fontIcon {
    cursor: pointer;
    font-size: 3vh;
    margin-left: 0.5vw;
}

.navContainer .navBar .titleDisp {
    /* font-weight: 600; */
/* } */

/**/

/*Left this here as I can't see what it refers to in Nav*/
.navContainer>.content {
    height: 95vh;
    max-height: 95vh;
    overflow: auto;
    width: 98vw;
    max-width: 96vw;
    /* margin-top: 35px; */
    /* margin-left: 35px;  */
}

.navContainer>.content.small {
    width: 89vw;
    max-width: 89vw;
}   

/* .navContainer .userSettingsPane {
    top: 5vh;
    height: calc(100vh - 5vh);
}

.bottom-nav-items {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: absolute;
    bottom: 3px;
    left: 5px;
}

.bottom-nav-items .icon-angle-double-left {
    position: absolute;
    bottom: 3px;
    left: 10vw;
} */ 

.mlmPageHeader.mlmPageHeaderSmall {
    height: 5vh;
    background-color: white;
    /* border-bottom: solid 1px #a4a4a4; */
    border-bottom: solid 1px #A5BECC;

}

.mlmPageHeader.mlmPageHeaderSmall img {
    height: 4.5vh;
}

/*NOTE - july 2022 - moved to mainContainer as styled components
/* .mlmPageHeader.mlmPageHeaderSmall .processIcon {
    font-size: 4vh;
    /* margin-left: 0.5vw;
    margin-right: 0.5vw; */
    /* display: flex;
    justify-content: center;
    margin: 3px auto;
    color: #243A73; */
/* } */ */

/* .mlmPageHeader.mlmPageHeaderSmall .siteSettingIcon {
    font-size: 4vh;
    /* margin-left: 0.5vw;
    margin-right: 0.5vw; */
    /* display: flex;
    justify-content: center;
    margin: 3px auto;
    color: #243A73;
} */ */

.mlmPageHeader.mlmPageHeaderSmall .userIconDiv {
    font-size: 3vh;
    /* margin-left: 0.5vw;
    margin-right: 0.5vw; */
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 3px auto;
    padding-top: 3px;
    color: white;
}

/*NOTE - this is a Test -  my order is reversed from what is on the HTML so this is to fix it and to test taking out settings and processing and
 moving to side nav. Changed to flex since grid is not necessary and is maybe making things more difficult */
.mlmPageHeader.mlmPageHeaderSmall .aimscoBranding {
    /* max-width: 30vw;
    max-height: 5vh;
    grid-template-columns: 30fr 30fr auto auto auto;
    grid-template-rows: 4vh;
    grid-template-areas: "logo name process settings user"; */
    max-width: 25vw;
    max-height: 5vh;
    margin-right: 15px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.mlmPageHeader.mlmPageHeaderSmall .aimscoBranding .aimsLogo {
    /* display: none; */
    height: 4vh;
    /* margin-right: 10px; */

}

/* 
2020 theme overrides go here
 */

.navContainer .content .scheduleContainer {
    width: 96vw;
}

.navContainer .content.small .scheduleContainer {
    width: 89vw;
}

.navContainer .content .scheduleContainerHeader {
    width: 96vw;
}

.navContainer .content.small .scheduleContainerHeader {
    width: 89vw;
}

.navContainer .content .reportPageBase {
    width: 94vw;
}

.navContainer .content.small .reportPageBase {
    width: 87vw;
}

.navContainer .content .reportRenderSecondaryControls {
    width: 96vw;
}

.navContainer .content.small .reportRenderSecondaryControls {
    width: 89vw;
}

.navContainer .content .reportParameters {
    width: 94vw;
}

.navContainer .content.small .reportParameters {
    width: 87vw;
}

.navContainer .content .renderReportButtonContainer {
    width: 94vw;
}

.navContainer .content.small .renderReportButtonContainer {
    width: 87vw;
}

.navContainer .content .floatingControls {
    left: 3.5vw;
    z-index: 1000;
}

.navContainer .content .floatingControls.collapsed {
    /* left: -1.2vw */
    /* left: 10vw; */
}

.navContainer .content.small .floatingControls {
    left: 10.5vw;
}



.navContainer .content .reviewPage {
    min-height: 95vh;
}

.navContainer .content .reviewCard {
    width: 93vw;
}

.navContainer .content.small .reviewCard {
    width: 85vw;
}

.navContainer .content .powerBiContainerClass {
    width: 94vw;
}

.navContainer .content.small .powerBiContainerClass {
    width: 87vw;
}

.navContainer .content .repairPageContainer {
    width: 94vw;
    min-width: 94vw;
    max-width: 94vw;
}

.navContainer .content.small .repairPageContainer {
    width: 87vw;
    min-width: 87vw;
    max-width: 87vw;
}

.navContainer .content .repairPageHeader {
    width: 94vw;
}

.navContainer .content.small .repairPageHeader {
    width: 87vw;
}

.navContainer .content .repairGroup {
    width: 92vw;
}

.navContainer .content.small .repairGroup {
    width: 85vw;
}

.navContainer .content .ncmDataGridContainer {
    width: 96vw;
    height: 90vh;
    max-height: 90vh;
}

.navContainer .content .ncmDataGridContainer>.gridTableLight {
    width: 94vw;
}

.navContainer .content.small .ncmDataGridContainer {
    width: 89vw;
    height: 90vh;
    max-height: 90vh;
}

.navContainer .content.small .ncmDataGridContainer>.gridTableLight {
    width: 87vw;
}

.navContainer .content .ptPage {
    width: 20vw;
    min-height: 93vh;
    background-color: #F0F0F0;
}

.navContainer .content.small .ptPage {
    width: 100%;
    min-height: 93vh;
    /* background-color: #F0F0F0; */
    background-color: #A5BECC;
    border-radius: 8px;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
 
}

.navContainer .content .pageTitle {
    width: 96vw;
    height: 5vh;
    margin-left: 0;
    color: #243A73;
    margin-top: 35px;
    font-size: 2.4rem;
    font-weight: normal;
}

.navContainer .content.small .pageTitle {
    /* width: 89vw; */
    height: 5vh;
    background: #A5BECC;
}

/* .navContainer .content .sourceDetails {
    flex: 0 0 46vw;
}

.navContainer .content.small .sourceDetails {
    flex: 0 0 42vw;
}

.navContainer .content .destDetails {
    flex: 0 0 46vw;
}

.navContainer .content.small .destDetails {
    flex: 0 0 42vw;
} */

/* .navContainer .content .ptResults {
    flex: 0 0 94vw;
}

.navContainer .content.small .ptResults {
    flex: 0 0 87vw;
} */

.navContainer .content .singlePageBase {
    width: 94vw;
}

.navContainer .content.small .singlePageBase {
    width: 87vw;
}

.navContainer .content .singlePageHeader {
    width: 93.5vw;
}

.navContainer .content.small .singlePageHeader {
    width: 86.5vw;
}

.navContainer .content .runningOperationPopup {
    box-shadow: 3px 0px 22px -9px rgba(0, 0, 0, 0.72);
}

.navContainer .content.small .reviewAdvancedHistory {
    width: 80vw;
    /* left: 15vw; */
    /* top:  calc(3.5vh + var(--draggable-container-top, 12vh));
    left: calc(12.5vw + var(--draggable-container-left, 15vw)); */
    top: calc(15vh + var(--draggable-container-top, 12vh));
    left: calc(15vw + var(--draggable-container-left, 15vw));

}

.navContainer .content.small .reviewAdvancedHistory .DraggableHandle h1 {
    /* font-size:0.8em; */
    font-size: 1.1rem;
}

.navContainer .content.small .reviewAdvancedHistory .reviewCard {
    width: 78vw;
    height: 100%;
}

/* checksheet controls */

.navContainer .content .sideloadChecksheetContainer {
    width: 96vw;
}

.navContainer .content.small .sideloadChecksheetContainer {
    width: 89vw;
}

.navContainer .content .checksheetDisplay {
    width: 96vw;
    background-color: #f8fdff;
    min-height: 95vh;
    flex: 0 0 96vw;
}

.navContainer .content.small .checksheetDisplay {
    width: 89vw;
    background-color: #f8fdff;
    flex: 0 0 89vw;
}

.navContainer .content .checksheetHeaderMain {
    width: 94vw;
}

.navContainer .content.small .checksheetHeaderMain {
    width: 87vw;
}

.navContainer .content .basetable {
    width: 94vw;
}

.navContainer .content.small .basetable {
    width: 87vw;
}

.navContainer .content .checksheetControlButtonsContainer .fontIcon {
    margin: 1vw;
    cursor: pointer;
    font-size: 3vh;
}

.navContainer .content .checksheetControlButtonsContainer textarea {
    margin: 1.2vw auto 1vh auto;
}

@media only screen and (orientation: landscape) and (min-device-width: 700px) {
    .navContainer .content .checksheetHeaderMain {
        font-size: 2.4vh;
        /* font-weight: 600; */
        font-style: italic;
        font-size: 2vh;
    }
}

/* check item sizes */

.navContainer .content .CheckItem_Group {
    width: 94vw;
    margin-left: 0.5vw;
}

.navContainer .content .stepByStepPopupBase .CheckItem_Group {
    width: 48.5vw;
    margin-left: auto;
    margin-right: auto;
}

.navContainer .content.small .CheckItem_Group {
    width: 87vw;
    margin-left: 0.5vw;
}

.navContainer .content .largeCheckItem {
    width: 93vw;
    max-width: 93vw;
}

.navContainer .content.small .largeCheckItem {
    width: 86vw;
    max-width: 86vw;
}

.navContainer .content .mediumCheckItem {
    width: 45vw;
    max-width: 45vw;
}

.navContainer .content.small .mediumCheckItem {
    width: 42vw;
    max-width: 42vw;
}

.navContainer .content .mediumCheckItem .checkItemControlInstructions {
    width: 43.5vw;
    max-width: 43.5vw;
}

.navContainer .content.small .mediumCheckItem .checkItemControlInstructions {
    width: 40.5vw;
    max-width: 40.5vw;
}

.navContainer .content .smallCheckItem {
    width: 29vw;
    max-width: 29vw;
}

.navContainer .content.small .smallCheckItem {
    width: 27vw;
    max-width: 27vw;
}

.navContainer .content .smallCheckItem .checkItemControlInstructions {
    width: 27.5vw;
    max-width: 27.5vw;
}

.navContainer .content.small .smallCheckItem .checkItemControlInstructions {
    width: 25.5vw;
    max-width: 25.5vw;
}

.navContainer .content .CheckItem_StepByStep {
    width: 94vw;
}

.navContainer .content.small .CheckItem_StepByStep {
    width: 87vw;
}

.navContainer .content .checkItemContainer {
    border-radius: 10px;
    padding: 10px;
    /* box-shadow: 3px 0px 22px -4px rgba(0,0,0,0.72); */
    box-shadow: 3px 0px 22px -9px rgba(0, 0, 0, 0.72);
}

.navContainer .content .CheckItemHoverMoveBefore {
    margin-left: 5vw;
}

.navContainer .content .condensedCheckItem.CheckItemHoverMoveBefore {
    margin-top: 5vh;
    margin-left: 0;
}

.navContainer .content .x {
    width: 96vw;
}

.navContainer .content.small .x {
    width: 89vw;
}

/* Phone Modern theme changes */

@media only screen and (min-device-width: 300px) and (max-device-width: 700px) {

    /* .navContainer {
        width: 100vw;
        height: 95vh;
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        background-color: white;
    }
    .navContainer .navBar {
        width: 10vw;
        background-color: #c5cae9;
        color: black;
        border-right: solid 1px #a4a4a4;
        display: grid;
        grid-template-columns: 10vw;
        grid-template-rows: 10vh 5vh 5vh;
        grid-template-areas: "nav" "copyright" "collapse";
        z-index: 502;
    }
    .navContainer .navBar.expanded {
        background-color: #c5cae9;
        color: black;
        border-right: solid 1px #a4a4a4;
        display: grid;
        z-index: 502;

        width: 34vw;
        grid-template-columns: 15vw 19vw;
        grid-template-rows: 90vh 5vh;
        grid-template-areas: "nav nav" "copyright collapse";
    }
    .navContainer .content .checksheetControlButtonsContainer {
        display: flex;
        flex-wrap: wrap;
    }
    .navContainer .content .flex {
        height: 20vh;
        width: 85vw;
    } */
    .mlmPageHeader.mlmPageHeaderSmall .aimscoBranding {
        max-width: 60vw;
        max-height: 5vh;
         grid-template-columns: 30fr 30fr 20fr 20fr;
        grid-template-rows: 4vh;
     grid-template-areas: "logo name settings user"; 
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        width: 60vw;
    }

    /*
    .navContainer {
        width: 100vw;
        height: 95vh;
        display: flex;
        flex-direction: column-reverse;
        flex-wrap: nowrap;
        background-color: white;
    }

    .navContainer .navBar {
        width: 100vw;
        background-color: #c5cae9;
        color: black;
        border-right: solid 1px #a4a4a4;
        display: grid;
        grid-template-columns: 80vw 10vw 10vw;
        grid-template-rows: 2vh;
        grid-template-areas: "nav nav nav";
        z-index: 502;
    }

    .navContainer .navBar .navItems {
        display: flex;
        flex-wrap: wrap;
    }

    .navContainer .navBar.expanded {
        width: 100vw;
        background-color: #c5cae9;
        color: black;
        border-right: solid 1px #a4a4a4;
        display: grid;
        grid-template-columns: 80vw 10vw 10vw;
        grid-template-rows: 2vh;
        grid-template-areas: "nav nav nav";
        z-index: 502;
    }

    .navContainer .navBar .fontIcon {
        cursor: pointer;
        font-size: 4vh;
        margin-left: 2vw;
    }

    .navContainer .navBar .navSelection .titleDisp {
        display: none;
    }

    .navContainer>.content.small {
        width: 99vw;
        max-width: 99vw;
    }

    .navContainer>.content {
        height: 95vh;
        max-height: 95vh;
        overflow: auto;
        width: 99vw;
        max-width: 99vw;
    } */

    .scheduleContainer {
        width: 99vw;
    }

    .scheduleContainerHeader {
        width: 99vw;
    }

    .navContainer .content .checksheetControlButtonsContainer {
        display: flex;
        flex-wrap: wrap;
    }

    .navContainer .content .flex {
        height: 20vh;
        width: 85vw;
    }

    .navContainer .content .scheduleSelection {
        width: 40vw;
        height: 10vh;
        font-size: 2vh;
        cursor: pointer;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-around;
        background-color: #e5ffff;
        margin: 1vh;
        box-shadow: 5px 4px 31px 0px rgba(107, 107, 107, 0.75);
    }

    .navContainer .content .floatingControls {
        display: none;
    }

    .userSettingsPane {
        position: fixed;
        right: 0px;
        top: 5vh;
        background-color: white;
        z-index: 10000;
        width: 80vw;
        height: calc(100vh - 12vh);
        /* box-shadow: -6px 1px 9px 0px rgba(0, 0, 0, 0.8); */
        box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
        border-radius: 8px;
        display: grid;
        grid-template-columns: 40fr 40fr 20fr;
        grid-template-rows: 4vh 3vh 0.5vh 0.5vh 5vh 5vh;
        grid-template-areas: "header header close""logout switch .""userName userName userName""email email shift""fontTitle fontSelect fontSelect""themeTitle themeSelect themeSelect";
        row-gap: 4vh;
    }

  
    /* .userSettingsLogout {
        font-size: 2vh;
    } */

    /* .userSettingsSwitch {
        font-size: 2vh;
    }

    .userSettingsUserName {
        font-size: 2vh;
    }

    .userSettingsEmail {
        font-size: 1.8vh;
    }

    .userSettingsShift {
        font-size: 1.8vh;
    } */

    .userSettingsFontSelect {
        /* width: 30vw; */
    }

    .themeSelectorPopup {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background-color: white;
        display: grid;
        grid-template-columns: 95vw;
        grid-template-rows: 5vh 85vh 5vh;
        grid-template-areas: "header""content""footer";
        box-shadow: 0px -1px 28px 0px rgba(0, 0, 0, 0.75);
    }

    .themeSelectorPopup .contentDiv {
        width: 95vw;
    }

    .themeSelectorPopup .contentDiv img {
        width: 70vw;
    }

    .themeSelectorPopup .contentDiv .themeCard {
        height: 30vh;
        font-size: 2vh;
        margin-left: 15vw;
    }

    .themeSelectorPopup .contentDiv .themeCard.selectedThemeItem {
        height: 32vh;
    }

    .themeSelectorPopup .footerDiv input {
        font-size: 2vh;
        width: 30vw;
    }

    .navContainer .content .checksheetDisplay {
        width: 98vw;
        flex: 0 0 98vw;
    }

    .navContainer .content.small .checksheetDisplay {
        width: 98vw;
        flex: 0 0 98vw;
    }

    .navContainer .content.small .checksheetHeaderMain {
        width: 98vw;
        font-size: 2vh;
    }

    .navContainer .content .checksheetHeaderMain {
        width: 98vw;
        font-size: 2vh;
    }

    .navContainer .content .checksheetHeaderMain .togleSelector {
        height: 0;
        /* this color is a hack to make the item not display. super weird but whatever */
        color: #f8fdff;
    }

    .navContainer .content .basetable {
        padding-left: 3vw;
    }

    .navContainer .content .CheckItem_Display_Contents_SpecContainer {
        transform: scale(2);
        transform-origin: top left;
    }

    .navContainer .content .icon-editsquare {
        display: none;
    }

    .navContainer .content .repairPageContainer {
        width: 95vw;
        min-width: 95vw;
        max-width: 95vw;
    }

    .navContainer .content.small .repairPageContainer {
        width: 95vw;
        min-width: 95vw;
        max-width: 95vw;
    }

    .navContainer .content .repairPageHeader {
        width: 95vw;
    }

    .navContainer .content.small .repairPageHeader {
        width: 95vw;
    }

    .navContainer .content .scheduleSelectionContainer {
        width: auto;
        height: auto;
    }

    .navContainer .content.small .scheduleContainer {
        width: 96vw;
    }
}

:root {
    --draggable-container-left: 0px;
    --draggable-container-top: 0px;
}

.DraggableHandle {
    height: 20px;
    /* cursor: move; */
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    user-select: none;
}

.DraggableHandleNotCentered {
    height: 20px;
    /* cursor: move; */
    width: 100%;
    display: flex;
    justify-content: flex-end;
    margin-right: 10%;
    align-items: center;
    user-select: none;
}

.DraggableHandleLeft {
    height: 20px;
    /* cursor: move; */
    width: 100%;
    display: flex;
    justify-content: flex-start;
    margin-left: 10%;
    align-items: center;
    user-select: none;

}

.BottomDraggableHandle {
    background-color: white;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    margin-top: -30px;
}

.BottomDraggableDots {
    font-size: 18px;
    padding-bottom: 16px;
}


.DraggableContainer {
    cursor: move;
    position: fixed;
    /* left: var(--draggable-container-left);
    top: var(--draggable-container-top); */
    z-index: 1000;
    background: white;
    padding: 15px;
    width: 75vw;
    margin: 0 auto;
    border-radius: 8px;
}



.DraggableChildren {
    cursor: initial;
    height: 100%;
    width: 100%;
}


.mlmPageHeaderOpenReport {
    display: none;
}

.mainContainerOpenReport {
    min-height: 95vh;
    margin-top: 1vh;
    margin-left: 1vw;
}


/*normal landscape*/

@media only screen and (orientation: landscape) and (min-device-width: 700px) {
    .mlmPageHeader {
         height: 15vh; 
    }

    /* .mlmPageHeader .aimscoBranding {
        display: flex;
        flex-direction: row;
        max-width: 30vw;
    }
    .mlmPageHeader .aimscoBranding>div {
        display: flex;
        flex-direction: column;
        width: 100%;
        justify-content: flex-end;
    } */
    .mlmPageHeader .aimscoBranding {
        max-width: 22vw;
        display: grid;
        grid-template-columns: 40fr 30fr 30fr;
        grid-template-rows: 2vh 13vh;
        /* grid-template-areas: "logo name name""logo settings user"; */
        grid-template-areas: "logo name"
    }

    .mlmPageHeader .aimscoBranding .aimsLogo {
        grid-area: logo;
    }

    .mlmPageHeader .aimscoBranding .loggedInUser {
        grid-area: name;
        padding-top: 0;
        /* margin-top: -25px; */
        color: #242e42;
    }

    .mlmPageHeader .aimscoBranding .settingGear {
        grid-area: settings;
        text-align: center;
    }

    .mlmPageHeader .aimscoBranding .userIconBtn {
        grid-area: user;
    }

    /*NOTE - moved this to mainContainer as a styled component;*/
    /* .userIconDiv {
        width: 4vh;
        height: 4vh;
        font-size: 3vh;
        border-radius: 9999px;
        cursor: pointer;
        text-align: center;
        /* background-color: #e6ceff; */
        /* background-color: #243A73; */
        /* box-shadow: 2px 5px 15px 1px rgba(0, 0, 0, 0.41); */
        /* box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; */
        /* padding-top: 1vh; */
        /* vertical-align: middle;
        background-clip: padding-box;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
    } */ */

    .siteSettingIcon {
        font-size: 4vh;
        cursor: pointer;
    }

    .processIcon {
        font-size: 4vh;
        cursor: pointer;
    }

    .mlmPageHeader>div {
        width: 100vw;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-between;
        margin-bottom: 10px;
    }

    .mlmPageHeader.default {
        background: #e9edf0;
        border-bottom: solid 1px #e9edf0;
    }

    .mlmPageHeader.modern {
        background: #F2EBE9;
        border-bottom: solid 1px #F2EBE9;
    }

    .mlmPageHeader.highContrast {
        background: #e6e6e6;
        border-bottom: solid 1px #e6e6e6;
    }

    .mlmPageHeader.blueSky {
        background: #E1EAEE;   
        border-bottom: solid 1px #E1EAEE;
    }

    
    .mlmPageHeader img {
        /*see portrait and landscape media queries above*/
        max-height: 6vh;
        margin: 2px 0 0 10px;
    }


    /*NOTE - I am now handling all media queries for Login in the Login file with styled components.
    Kept but greyed out for reference

    .aimsLoginPrompt {
        position: fixed;
        top: 20vh;
        left: 30vw;
        background: #fff;
        width: 90%;
        max-width: 600px;
        margin: 65px auto;
        display: -webkit-box;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        flex-direction: column;
        border-radius: 4px;
        box-shadow: 0 2px 25px rgba(0, 0, 0, 0.2);
    }


    .aimsLoginPrompt .loginControlDiv {
        display: grid;
        grid-template-columns: repeat(2, 50%);
        width: 100%;
        margin: 0 auto;
        margin-top: 2rem;
    }

    .aimsLoginPrompt .loginControlDiv .login-button {
        border-bottom-left-radius: 4px;
        letter-spacing: 0.3px;
        color: #243A73;
        font-size: 1.05rem;
        /* background: #F2EBE9; */
        background-color: #A5BECC;
        border: none;
    }

    /* .microsoft-login-button {
        /* background-color: #2d3b55; */
        /* background: #004e98; */
        /* background: #243A73;
        color: white;
        border: none;
        border-bottom-right-radius: 4px;
        font-size: 1rem;
        letter-spacing: 0.3px;
        cursor: pointer;
    } */ */

    /* .aimsLoginPrompt .loginControlDiv>.fontIcon {
        font-size: 2rem;
        cursor: pointer;
        margin-right: 1vw;
    } */


    /* .aimsLoginPrompt>div {
        flex: 1 0 60%;
        padding: 35px 35px 0 0px;
        font-weight: 300;
        font-family: 'Rubik', sans-serif;
        text-align: left;
    }

    .aimsLoginPrompt .login-message {
        text-align: center;
        font-family: 'Rubik', sans-serif;
        margin-bottom: -18px;

    }

    .aimsLoginPrompt .login-message-div {
        display: flex;
        justify-content: center;
        margin: 0 auto;
        margin-bottom: -1.6rem;
        width: 100%;
    }

    .aimsLoginPrompt input {
        width: 100%;
        font-size: 16px;
        display: block;
        font-family: 'Rubik', sans-serif;
        padding: 10px 1px;
        border: 0;
        border-bottom: 1px solid #747474;
        outline: none;
        -webkit-transition: all .2s;
        transition: all .2s;
        cursor: pointer;
    }

    .aimsLoginPrompt>.loginPromptPart {
        /* flex: 1 0 60%; */
        text-align: center;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-between;
        font-size: 3vh;
        margin: 0 2rem;

    }

    .aimsLoginPrompt .loginPromptPart input {
        font-size: 2vh;
        height: 3vh;
        margin-left: 30px;
        color: #A5BECC;

     
    }

    .aimsLoginPromptFooter>input {
        margin-left: 8vw;
    }

    .logo-cover {
        position: absolute; 
        top: 90px;
        width: 100%;
        height: 80px;
        z-index: 2;
        background: #F2EBE9;
    }

    .loginPicker {
        position: fixed;
        width: 30vw;
        height: 40vh;
        max-height: 40vh;
        overflow: auto;
        background-color: white;
        left: 35vw;
        top: 30vh;
    }

    .loginPicker .loginPickerHeader {
        width: 30vw;
        text-align: center;
        font-size: 2vh;
    }

    .loginPicker .loginSelection {
        background-color: #eceff1;
        font-size: 2vh;
        cursor: pointer;
        width: 28vw;
        margin-top: 1vh;
        margin-bottom: 2vh;
        margin-left: 1vw;
        height: 8vh;
        text-align: center;
        box-shadow: 1px 5px 5px 0px rgba(0, 0, 0, 0.47);
    } */

    /* .signedInUserDisplay {

    } */

    .aimsLoginPromptHeader {
        height: 10vh;
        flex: 1 0 60%;
        text-align: center;
        font-size: 4vh;
        font-weight: 500;
        margin-left: 35px;
        color: #243A73;
    }

    .navigationTabContainer {
        width: 98.5vw;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        font-size: 3vh;
        cursor: pointer;
        /*margin: 1vw;*/
        background-color: #465c71;
        color: #dde4ec;
        margin-bottom: 0.5vh;
    }

    .navigationTabContainer>div {
        padding: 0 0.5vw 0 0.5vw;
    }

    .navigationTabContainer>.currentSelected {
        background-color: #dde4ec;
        color: #465c71;
        border-bottom: 1px #465c71 solid;
    }

    .navigationTabContainer>div:hover {
        background-color: #dde4ec;
        color: #465c71;
        border-bottom: 1px #465c71 solid;
    }

    .subNavigationTabContainer {
        width: 98vw;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        font-size: 2.4vh;
        cursor: pointer;
    }

    .subNavigationTabContainer>div {
        margin: 1vh 1vw 0 1vw;
    }

    .singlePageBase {
        max-width: 98vw;
     
    }

    .singlePageBase .singlePageHeader {
        margin-top: 25px;
        width: 98.5vw;
        font-size: 1.8rem;
        /*padding-left: 1vw;*/
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        /*align-content: space-between;*/
        padding-top: 10px;
        margin-left: 1rem;
    }

    .singlePageBase .singlePageHeader div {
        margin-left: 25px;
    
        cursor: pointer;

        padding-left: 0.6vw;
        padding-right: 0.6vw;
    }

    .singlePageBase .singlePageHeader .selected {
        font-size: 3vh;
        z-index: 105;
        padding-top: 0.8vh;
        /* font-weight: 600; */
    }

    .singlePageHeader .tab {
        cursor: pointer;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        margin-right: 0px;
        transition: all 300ms;
    }

    .singlePageHeader .tab span {
        margin: 0;
        z-index: 100;
    }

    .singlePageHeader .selected.yellow {
        border-bottom: solid #CDDC39 5px;
    }

    .singlePageHeader .selected.green {
        border-bottom: solid #81C784 5px;
    }

    .singlePageHeader .selected.brown {
        border-bottom: solid #BCAAA4 5px;
    }

    .singlePageHeader .selected.blue {
        border-bottom: solid #90CAF9 5px;
    }

    .singlePageHeader .selected.orange {
        border-bottom: solid #FFCC80 5px;
    }

    .singlePageHeader .selected.bluegrey {
        border-bottom: solid #B0BEC5 5px;
    }

    .singlePageHeader .selected.purple {
        border-bottom: solid #B39DDB 5px;
    }

    .singlePageHeader .tab .arrowClassLeft {
        border-style: solid;
        border-width: 2vh 2vh 2vh 2vh;
        height: 0;
        width: 0;
        bottom: 0px;
        z-index: 100;
        margin: 0;
        background-color: transparent;
    }

    .singlePageHeader .tab .arrowClassRight {
        border-style: solid;
        border-width: 2vh 2vh 2vh 2vh;
        height: 0;
        width: 0;
        bottom: 0px;
        background-color: transparent;
        position: relative;
        z-index: 100;
        margin: 0;
    }

    .singlePageHeader .yellow .arrowClassRight {
        border-color: transparent transparent #CDDC39 #CDDC39;
    }

    .singlePageHeader .green .arrowClassRight {
        border-color: transparent transparent #81C784 #81C784;
    }

    .singlePageHeader .brown .arrowClassRight {
        border-color: transparent transparent #BCAAA4 #BCAAA4;
    }

    .singlePageHeader .blue .arrowClassRight {
        border-color: transparent transparent #90CAF9 #90CAF9;
    }

    .singlePageHeader .brown .arrowClassRight {
        border-color: transparent transparent #BCAAA4 #BCAAA4;
    }

    .singlePageHeader .orange .arrowClassRight {
        border-color: transparent transparent #FFCC80 #FFCC80;
    }

    .singlePageHeader .bluegrey .arrowClassRight {
        border-color: transparent transparent #B0BEC5 #B0BEC5;
    }

    .singlePageHeader .purple .arrowClassRight {
        border-color: transparent transparent #B39DDB #B39DDB;
    }

    .singlePageHeader .yellow .arrowClassLeft {
        border-color: transparent #CDDC39 #CDDC39 transparent;
    }

    .singlePageHeader .green .arrowClassLeft {
        border-color: transparent #81C784 #81C784 transparent;
    }

    .singlePageHeader .brown .arrowClassLeft {
        border-color: transparent #BCAAA4 #BCAAA4 transparent;
    }

    .singlePageHeader .blue .arrowClassLeft {
        border-color: transparent #90CAF9 #90CAF9 transparent;
    }

    .singlePageHeader .orange .arrowClassLeft {
        border-color: transparent #FFCC80 #FFCC80 transparent;
    }

    .singlePageHeader .bluegrey .arrowClassLeft {
        border-color: transparent #B0BEC5 #B0BEC5 transparent;
    }

    .singlePageHeader .purple .arrowClassLeft {
        border-color: transparent #B39DDB #B39DDB transparent;
    }

    /* .singlePageHeader .yellow>span, .singlePageHeader .yellow>div {
        background-color: #CDDC39;
    }
    .singlePageHeader .green>span, .singlePageHeader .green>div {
        background-color: #81C784;
    }
    .singlePageHeader .brown>span, .singlePageHeader .brown>div {
        background-color: #BCAAA4;
    }
    .singlePageHeader .blue>span, .singlePageHeader .blue>div {
        background-color: #90CAF9;
    }
    .singlePageHeader .orange>span, .singlePageHeader .orange>div {
        background-color: #FFCC80;
    }
    .singlePageHeader .bluegrey>span, .singlePageHeader .bluegrey>div {
        background-color: #B0BEC5;
    }
    .singlePageHeader .purple>span, .singlePageHeader .purple>div {
        background-color: #B39DDB;
    } */
    .singlePageHeader .selectionBorder {
        width: 100%;
        margin-top: 0px;
        height: 5px;
    }

    .singlePageHeaderMobile {
        display: none;
    }

    .errorDisplayContainer {
        position: fixed;
        top: 30vh;
        left: 20vw;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        width: 40vw;
        height: 30vh;
        background-color: white;
        z-index: 10000;
        box-shadow: 1px 1px 1px grey;
    }

    .errorDisplayContainer .errorHeader {
        width: 40vw;
    }

    .errorDisplayContainer .errorBody {
        width: 40vw;
        max-height: 25vh;
        overflow-y: auto;
    }

    .errorDisplayContainer .errorDisplayFooter {
        display: flex;
        flex-direction: row;
        width: 40vw;
        justify-content: space-around;
    }

    .errorDisplayContainer .errorDisplayFooter>input {
        width: 10vw;
        height: 3vh;
        font-size: 2.5vh;
    }

    .continueButtonIcon {
        min-width: 5vw;
        border-radius: 10vh;
        text-align: center;
        align-content: center;
        color: white;
        cursor: pointer;
        padding-left: 2vh;
        padding-right: 2vh;
        font-size: 1vw;
    }

    .gridTableLight {
        width: 92vw;
        display: flex;
        flex-direction: column;
        margin-top: 1rem;
    }

    .gridRowLight {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-between;
        width: 100%;
        text-align: center;
    }

    .gridCellLight {
        /*flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 15vw;*/
        flex: 0 1 15vw;
    }

    .gridEditCellLight {
        /*flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 15vw;*/
        flex: 0 0 5vw;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .gridHeaderCellLight {
        flex: 0 1 15vw;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .gridHeaderEditCellLight {
        /*flex-grow: 1;*/
        flex: 0 0 5vw;
        display: table-cell;
        flex-direction: row;
        flex-wrap: wrap;
        text-align: justify;
        /*display: flex;
    flex-direction: row;
    flex-wrap: wrap;*/
    }

    .filterCard {
        height: 25vh;
        max-height: 25vh;
        min-width: 15vw;
        overflow-y: auto;
        position: relative;
        z-index: 50;
        background-color: white;
    }

    .filterCard .container {
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    .filterCard .searchBox {}

    .filterCard .menuitem {}

    .filterCard .filterIsoSection {
        height: 15vh;
    }

    .filterCard .filterCardSelectAll {
        font-weight: 600;
        font-size: 1.2em;
        color: #5870cb;
    }

    .collapsedFilterCard {
        top: auto;
    }

    .collapsedFilterCard>.currentValueDisplay {
        display: flex;
        justify-content: space-between;
    }

    .collapsedFilterCard>.currentValueDisplay>.closeButtonDiv {
        /*display: inline-flex;*/
        cursor: pointer;
        /*border: 1px solid red;*/
        /*border-radius: 1vh;*/
        height: 3vh;
        width: 3vh;
        flex: 0 0 auto;
        justify-content: space-around;
        text-align: center;
        display: flex;
        font-size: 1.8vh;
    }

    .collapsedFilterCard>.currentValueDisplay>.closeButtonDiv>img {
        height: 3vh;
        width: 3vh;
    }

    .collapsedFilterCard>.currentValueDisplay>div {
        flex: 0 0 1vw;
    }

    .collapsedFilterCard>.filterCardContainer {
        /*position: fixed;*/
        background-color: white;
        /*top: inherit;*/
        /*position: relative;*/
    }

    /* .collapsedFilterCard:focus>.filterCardContainer {
        display: block;
    } */

    .ReportParameterDatePicker>.DayPickerInput>.DayPickerInput-OverlayWrapper>.DayPickerInput-Overlay {
        position: static !important;
        z-index: 10000;
    }

    /*.collapsedFilterCard .DayPickerInput-OverlayWrapper {
            position: static;
            z-index: 10000;
        }*/
    /*.datePicker div {
            z-index: 5000;
        }*/
    .reportRenderPage .reportParameters {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        background-color: white;
        margin-top: 1vh;
        width: 95vw;
    }
}

/*portrait large tablet*/

@media only screen and (orientation: portrait) and (min-device-width: 1000px) {
    body {
        max-width: 100%;
        overflow-x: hidden;

    }

    .mlmPageHeader {
        max-height: 15vh;
    }

    .mlmPageHeader .aimscoBranding {
        display: flex;
        flex-direction: column;
        display: grid;
        /* grid-template-columns: 40fr 30fr 30fr; */
        grid-template-rows: 2vh 13vh;
        grid-template-areas: "logo name name""logo settings user";
    }

    .mlmPageHeader .aimscoBranding .aimsLogo {
        grid-area: logo;
    }

    .mlmPageHeader .aimscoBranding .loggedInUser {
        grid-area: name;
    }

    .mlmPageHeader .aimscoBranding .settingGear {
        grid-area: settings;
        text-align: center;
    }

    .mlmPageHeader .aimscoBranding .userIconBtn {
        grid-area: user;
    }

    /* .userIconDiv {
        width: 4vw;
        height: 4vw;
        font-size: 3vw;
        border-radius: 3vw;
        cursor: pointer;
        text-align: center;
        background-color: #e6ceff;
        box-shadow: 2px 5px 15px 1px rgba(0, 0, 0, 0.41);
        /* padding-top: 1vh; */
        /* vertical-align: middle;
        background-clip: padding-box;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
    } */ 

    .siteSettingIcon {
        font-size: 4vw;
        cursor: pointer;
    }

    .mlmPageHeader .aimscoBranding>img {
        transform: scale(0.5);
    }

    .mlmPageHeader .aimscoBranding>div {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        /*width: 100%;*/
        /*justify-content: flex-end;*/
    }

    .mlmPageHeader .aimscoBranding>div>span, a {
        margin-left: 1vw;
    }

    .mlmPageHeader>div {
        width: 98vw;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-between;
    }

    .mlmPageHeader img {
        /*see portrait and landscape media queries above*/
        max-height: 14vh;
    }

    /* .aimsLoginPrompt { */
        /* width: 90vw;
        height: 50vh;
        position: fixed;
        top: 30vh;
        left: 5vw;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        /*background-color: cornsilk;*/
        /* justify-content: space-between;
        background-color: white;
        z-index: 10000;
        font-size: 3vh; */
        /* position: fixed;
        top: 20vh;
        left: 30vw; */

        /* background: #fff;
        width: 500px;
        margin: 65px auto;
        display: -webkit-box;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        flex-direction: column;
        border-radius: 4px;
        box-shadow: 0 2px 25px rgba(0, 0, 0, 0.2);
    } */

    /* .aimsLoginPrompt>div {
        flex: 1 0 60%;
        padding: 35px 35px 0 0px;
        font-weight: 300;
        text-align: left;
        color: #2d3b55;
    } */

    /* .aimsLoginPrompt input {
        width: 100%;
        font-size: 16px;
        display: block;
        font-family: 'Rubik', sans-serif;
        padding: 10px 1px;
        border: 0;
        border-bottom: 1px solid #747474;
        outline: none;
        -webkit-transition: all .2s;
        transition: all .2s;
        cursor: pointer;
    } */

    /* .aimsLoginPrompt .loginControlDiv {
        display: grid;
        grid-template-columns: repeat(2, 50%);
        width: 100%;
        margin: 0 auto;
        margin-top: 2rem;
    }


    .microsoft-login-button {
        background-color: #2d3b55;
        color: white;
        border: none;
        font-size: 1rem;
        cursor: pointer;
    } */

    /* .aimsLoginPrompt .loginControlDiv>.fontIcon {
        font-size: 2rem;
        cursor: pointer;
        margin-right: 1vw;
    } */


    /* .aimsLoginPrompt>div {
        flex: 1 0 60%;
        padding: 35px 35px 0 0px;
        font-weight: 300;
        text-align: left;
        color: #2d3b55;
    } */

    /* .aimsLoginPrompt input {
      
        width: 100%;
        font-size: 16px;
        display: block;
        font-family: 'Rubik', sans-serif;
        padding: 10px 1px;
        border: 0;
        border-bottom: 1px solid #747474;
        outline: none;
        -webkit-transition: all .2s;
        transition: all .2s;
        cursor: pointer;
    }

    .aimsLoginPrompt>.loginPromptPart {
        flex: 1 0 60%;
        text-align: center;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-around;
    }

    .aimsLoginPrompt .loginPromptPart input {
        font-size: 2.8vh;
        height: 2.8vh;
    } */

    .loginPicker {
        position: fixed;
        width: 80vw;
        height: 40vh;
        max-height: 40vh;
        overflow: auto;
        background-color: white;
        left: 10vw;
        top: 30vh;
    }

    .loginPicker .loginPickerHeader {
        width: 80vw;
        text-align: center;
        font-size: 2vh;
    }

    .loginPicker .loginSelection {
        background-color: #eceff1;
        font-size: 2vh;
        cursor: pointer;
        width: 72vw;
        margin-top: 1vh;
        margin-bottom: 2vh;
        margin-left: 4vw;
        height: 8vh;
        text-align: center;
        box-shadow: 1px 5px 5px 0px rgba(0, 0, 0, 0.47);
    }
/* 
    .signedInUserDisplay {} */

    .aimsLoginPromptHeader {
        height: 10vh;
        flex: 1 0 60%;
        text-align: center;
        font-size: 4vh;
        font-weight: 500;
    }

    .aimsLoginPromptFooter {}

    .navigationTabContainer {
        width: 100vw;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        font-size: 3vh;
        cursor: pointer;
        /*margin: 1vw;*/
        background-color: #465c71;
        color: #dde4ec;
        margin-bottom: 0.5vh;
    }

    .navigationTabContainer>div {
        /*margin: 1vw;*/
        padding: 0 0.5vw 0 0.5vw;
    }

    .navigationTabContainer>.currentSelected {
        background-color: #dde4ec;
        color: #465c71;
        border-bottom: 1px #465c71 solid;
    }

    .navigationTabContainer>div:hover {
        background-color: #dde4ec;
        color: #465c71;
        border-bottom: 1px #465c71 solid;
    }

    .subNavigationTabContainer {
        width: 98vw;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        font-size: 2.4vh;
        cursor: pointer;
    }

    .subNavigationTabContainer>div {
        margin: 1vh 1vw 0 1vw;
    }

    .mlmLightPageContainer {
        min-height: 480px;
        /* max-width: 99.9vw; */
        max-width: 95vw;
        overflow-x: hidden;
        margin: 2px;
        /* background-color: #F0F0F0; */
        /*overflow-y: hidden;*/
      
    }

    .singlePageBase {
        max-width: 100vw;
    }

    .singlePageBase .singlePageHeader {
        margin-top: 25px;
        width: 98.5vw;
        font-size: 1.8rem;
        /*padding-left: 1vw;*/
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        margin-left: 1rem;
        /*align-content: space-between;*/
    }

    .singlePageBase .singlePageHeader div {
        margin-left: 25px;
        /* margin-right: -3.6vw; */
        cursor: pointer;
    }

    .singlePageBase .singlePageHeader .selected {
        font-size: 3vw;
        z-index: 105;
    }

    .singlePageBase .headerShowHide {
        display: none;
    }

    .singlePageBase .singlePageHeaderMobile {
        display: none;
    }

    .singlePageHeader .tab {
        cursor: pointer;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        margin-right: 0px;
    }

    .singlePageHeader .tab span {
        margin: 0;
        z-index: 100;
    }

    .singlePageHeader .tab .arrowClassLeft {
        border-style: solid;
        border-width: 2vw 2vw 2vw 2vw;
        height: 0;
        width: 0;
        bottom: 0px;
        z-index: 100;
        margin: 0;
        background-color: transparent;
    }

    .singlePageHeader .tab .arrowClassRight {
        border-style: solid;
        border-width: 2vw 2vw 2vw 2vw;
        height: 0;
        width: 0;
        bottom: 0px;
        background-color: transparent;
        position: relative;
        z-index: 100;
        margin: 0;
    }

    .singlePageHeader .yellow .arrowClassRight {
        border-color: transparent transparent #CDDC39 #CDDC39;
    }

    .singlePageHeader .green .arrowClassRight {
        border-color: transparent transparent #81C784 #81C784;
    }

    .singlePageHeader .brown .arrowClassRight {
        border-color: transparent transparent #BCAAA4 #BCAAA4;
    }

    .singlePageHeader .blue .arrowClassRight {
        border-color: transparent transparent #90CAF9 #90CAF9;
    }

    .singlePageHeader .brown .arrowClassRight {
        border-color: transparent transparent #BCAAA4 #BCAAA4;
    }

    .singlePageHeader .orange .arrowClassRight {
        border-color: transparent transparent #FFCC80 #FFCC80;
    }

    .singlePageHeader .bluegrey .arrowClassRight {
        border-color: transparent transparent #B0BEC5 #B0BEC5;
    }

    .singlePageHeader .purple .arrowClassRight {
        border-color: transparent transparent #B39DDB #B39DDB;
    }

    .singlePageHeader .yellow .arrowClassLeft {
        border-color: transparent #CDDC39 #CDDC39 transparent;
    }

    .singlePageHeader .green .arrowClassLeft {
        border-color: transparent #81C784 #81C784 transparent;
    }

    .singlePageHeader .brown .arrowClassLeft {
        border-color: transparent #BCAAA4 #BCAAA4 transparent;
    }

    .singlePageHeader .blue .arrowClassLeft {
        border-color: transparent #90CAF9 #90CAF9 transparent;
    }

    .singlePageHeader .orange .arrowClassLeft {
        border-color: transparent #FFCC80 #FFCC80 transparent;
    }

    .singlePageHeader .bluegrey .arrowClassLeft {
        border-color: transparent #B0BEC5 #B0BEC5 transparent;
    }

    .singlePageHeader .purple .arrowClassLeft {
        border-color: transparent #B39DDB #B39DDB transparent;
    }

    .singlePageHeader .yellow>span, .singlePageHeader .yellow>div {
        background-color: #CDDC39;
    }

    .singlePageHeader .green>span, .singlePageHeader .green>div {
        background-color: #81C784;
    }

    .singlePageHeader .brown>span, .singlePageHeader .brown>div {
        background-color: #BCAAA4;
    }

    .singlePageHeader .blue>span, .singlePageHeader .blue>div {
        background-color: #90CAF9;
    }

    .singlePageHeader .orange>span, .singlePageHeader .orange>div {
        background-color: #FFCC80;
    }

    .singlePageHeader .bluegrey>span, .singlePageHeader .bluegrey>div {
        background-color: #B0BEC5;
    }

    .singlePageHeader .purple>span, .singlePageHeader .purple>div {
        background-color: #B39DDB;
    }

    .singlePageHeader .selectionBorder {
        width: 100%;
        margin-top: 0px;
        height: 5px;
    }

    .singlePageHeaderMobile {
        display: none;
    }

    .singlePageBase .reportRenderPage .reportContainer {
        max-width: 99vw;
        overflow-x: auto;
    }

    .errorDisplayContainer {
        position: fixed;
        top: 10vh;
        left: 10vw;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        width: 80vw;
        height: 80vh;
        background-color: white;
        z-index: 10000;
        box-shadow: 1px 1px 1px grey;
    }

    .errorDisplayContainer .errorHeader {
        width: 78vw;
    }

    .errorDisplayContainer .errorBody {
        width: 80vw;
        max-height: 78vh;
        overflow-y: auto;
        font-size: 3vh;
    }

    .errorDisplayContainer .errorDisplayFooter {
        display: flex;
        flex-direction: row;
        width: 80vw;
        justify-content: space-around;
    }

    .errorDisplayContainer .errorDisplayFooter>input {
        width: 20vw;
        height: 3vh;
        font-size: 2.5vh;
    }

    .continueButtonIcon {
        min-width: 5vw;
        border-radius: 10vw;
        text-align: center;
        align-content: center;
        color: white;
        cursor: pointer;
        padding-left: 2vw;
        padding-right: 2vw;
        font-size: 2vw;
    }

    .reportPageBase {
        max-width: 100vw;
        overflow-x: scroll;
        overflow-y: hidden;
    }

    .gridTableLight {
        width: 92vw;
        display: flex;
        flex-direction: column;
    }

    .gridRowLight {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-between;
        width: 100%;
        text-align: center;

    }

    .gridCellLight {
        /*flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 15vw;*/
        flex: 0 1 15vw;
    }

    .gridEditCellLight {
        /*flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 15vw;*/
        flex: 0 0 5vw;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .gridHeaderCellLight {
        /*flex: 0 0 15vw;*/
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        /* border: 1px solid; */
        padding-bottom: 5px;
    }

    .gridHeaderEditCellLight {
        /*flex-grow: 1;*/
        flex: 0 0 5vw;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        /*display: flex;
    flex-direction: row;
    flex-wrap: wrap;*/
    }

    .filterCard {
        height: 25vh;
        max-height: 25vh;
        min-width: 15vw;
        overflow-y: auto;
        position: relative;
        z-index: 50;
        background-color: white;
    }

    .filterCard .container {
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    .filterCard .searchBox {}

    .filterCard .menuitem {}

    .filterCard .filterIsoSection {
        height: 15vh;
    }

    .collapsedFilterCard {
        top: auto;
    }

    .collapsedFilterCard>.currentValueDisplay {
        display: flex;
        justify-content: space-between;
    }

    .collapsedFilterCard>.currentValueDisplay>.closeButtonDiv {
        /*display: inline-flex;*/
        cursor: pointer;
        /*border: 1px solid red;*/
        /*border-radius: 1vh;*/
        height: 3vh;
        width: 3vh;
        flex: 0 0 auto;
        justify-content: space-around;
        text-align: center;
        display: flex;
        font-size: 1.8vh;
    }

    .collapsedFilterCard>.currentValueDisplay>.closeButtonDiv>img {
        height: 3vh;
        width: 3vh;
    }

    .collapsedFilterCard>.currentValueDisplay>div {
        flex: 0 0 1vw;
    }

    .collapsedFilterCard>.filterCardContainer {
        /*position: fixed;*/
        background-color: white;
        /*top: inherit;*/
        /*position: relative;*/
    }

    /* .collapsedFilterCard:focus>.filterCardContainer {
        display: block;
    } */

}

/*portrait small tablet*/

@media only screen and (orientation: portrait) and (min-device-width: 500px) and (max-device-width: 1000px) {

    body {
        max-width: 100%;
        overflow-x: hidden;
    }

    .mlmPageHeader {
        max-height: 15vh;
    }

    .mlmPageHeader .aimscoBranding {
        /* display: flex;
        flex-direction: column; */
        display: grid;
        width: 30vw;
        grid-template-columns: 15vw 5vw 5vw 5vw;
        grid-template-rows: 3vh 12vh;
        grid-template-areas: ". user user user""logo logo settings userSettings";
    }

    .mlmPageHeader .aimsLogo {
        grid-area: logo;
        margin-top: auto;
        margin-bottom: auto;

    }

    .mlmPageHeader .loggedInUser {
        grid-area: user;
        font-size: 1.3vh;
    }

    .mlmPageHeader .settingGear {
        grid-area: settings;
        font-size: 3vh;
    }

    .mlmPageHeader .userIconBtn {
        grid-area: userSettings;
        font-size: 3vh;
    }

    .mlmPageHeader .aimscoBranding>img {
        transform: scale(0.6);
    }

    .mlmPageHeader .aimscoBranding>div {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        /*width: 100%;*/
        /*justify-content: flex-end;*/
    }

    .mlmPageHeader .aimscoBranding>div>span, a {
        margin-left: 1vw;
    }

    .mlmPageHeader>div {
        width: 98vw;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-between;
    }

    .mlmPageHeader img {
        /*see portrait and landscape media queries above*/
        max-height: 14vh;
    }

    /*NOTE -JULY 2022 - MOVED ALL LOGIN STYLING TO THE LOGIN PAGE AS STYLED COMPONENTS!!! 
    SOME OF THIS LEFT HERE  WAS OLD STYLING ANYWAY>

    /* .aimsLoginPrompt {
        width: 90vw;
        height: 50vh;
        position: fixed;
        top: 30vh;
        left: 5vw;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        /*background-color: cornsilk;*/
    /* justify-content: space-between;
        background-color: white;
        z-index: 10000;
        font-size: 3vh;

    } */

    /* .aimsLoginPrompt>div {
        flex: 1 0 60%;
        text-align: center;
        /* background: #fff;
        width: 500px;
        margin: 65px auto;
        display: -webkit-box;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
                flex-direction: column;
        border-radius: 4px;
        box-shadow: 0 2px 25px rgba(0, 0, 0, 0.2); */
}

/* .aimsLoginPrompt input {
        font-size: 2.8vh;
    } */

/* NEW STYLE ADDED //////////////////////////////////////////////////////
.aimsLoginPrompt {
    position: fixed;
    top: 20vh;
    left: 50vw;
    transform: translateX(-50%);
    background: #fff;
    width: 95%;
    max-width: 600px;
    margin: 65px auto;
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    border-radius: 4px;
    box-shadow: 0 2px 25px rgba(124, 62, 102, 0.2);



.login-background-div {
    /* background: #7C3E66; */
    /* position: fixed;
    top: 12vh;
    left: 50vw;
    height: 460px;
    transform: translateX(-50%);
    width: 95%;
    max-width: 800px;
    border-radius: 6px;
    box-shadow: 0 2px 25px rgba(0, 0, 0, 0.2); */
    /* border-top: 1px solid #7C3E66;
    border-width: 50%; */
/* }

 .logo-cover {
    position: absolute;
    z-index: 999;
    background: #F2EBE9;
    top: 0;
    right: 0;
    width: 300px;
    height: 120px;
} 


.aimsLoginPrompt .loginControlDiv {
    display: grid;
    grid-template-columns: repeat(2, 50%);
    width: 100%;
    margin: 0 auto;
    margin-top: 2rem;
} 


.login-button {
    border: none;
    border-bottom-left-radius: 6px;
    background-color: #A5BECC;
}

.microsoft-login-button {
    background: #004e98;
    color: white;
    border: none;
    /* border-bottom-right-radius: 6px; */
    /* font-size: 1rem;
    cursor: pointer;
}

.login-background-div {
    background-color: #7C3E66;
    position: absolute;
    top: 14vh;
    left: 50vw;
    height: 440px;
    transform: translateX(-50%);
    width: 95%;
    max-width: 800px;
    margin: 65px auto;
    border-radius: 6px;
    box-shadow: 0 2px 25px rgba(0,0,0,0.2);
    transition: 0.2s;
    z-index: -10 ;
} */ 



/* .login-colored-div {
    width: 100%;
    position: absolute;
    bottom: 0;

    background: #7C3E66;
    height: 10px;
    z-index: -1000;
} */


/* .aimsLoginPrompt>div {
    flex: 1 0 60%;
    padding: 35px 35px 0 0px;
    font-weight: 300;
    text-align: left;
    color: #243A73;
}

.aimsLoginPrompt input {
    width: 100%;
    font-size: 16px;
    display: block;
    font-family: 'Rubik', sans-serif;
    padding: 10px 1px;
    border: 0;
    border-bottom: 1px solid #A5BECC;
    /* border-bottom: 1px solid #747474; */
    /* outline: none;
  
    -webkit-transition: all .2s;
    transition: all .2s;
    cursor: pointer;
} */

/* .aimsLoginPrompt>.loginPromptPart {
    /* flex: 1 0 60%; */
    /* text-align: center;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    font-size: 3vh;
    margin: 0 2rem;

} */


/* .aimsLoginPrompt .loginPromptPart input {
    font-size: 2vh;
    height: 3vh;
    margin-left: 30px;
    color: #243A73;
} */

/* .aimsLoginPrompt ::placeholder {
  color: #8aa5b4;
} */ 


.loginPicker {
    position: fixed;
    width: 80vw;
    height: 40vh;
    max-height: 40vh;
    overflow: auto;
    background-color: white;
    left: 10vw;
    top: 30vh;
} 

 .loginPicker .loginPickerHeader {
    width: 80vw;
    text-align: center;
    font-size: 2vh;
}

.loginPicker .loginSelection {
    background-color: #eceff1;
    font-size: 2vh;
    cursor: pointer;
    width: 72vw;
    margin-top: 1vh;
    margin-bottom: 2vh;
    margin-left: 4vw;
    height: 8vh;
    text-align: center;
    box-shadow: 1px 5px 5px 0px rgba(0, 0, 0, 0.47);
} */

/* .signedInUserDisplay {} */

/* .aimsLoginPromptHeader {
    height: 10vh;
    flex: 1 0 60%;
    text-align: center;
    font-size: 4vh;
    font-weight: 500;
    margin-left: 35px;
} */

/* .aimsLoginPromptFooter {} */

.navigationTabContainer {
    width: 100vw;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    font-size: 3vh;
    cursor: pointer;
    /*margin: 1vw;*/
    background-color: #465c71;
    color: #dde4ec;
    margin-bottom: 0.5vh;
}

.navigationTabContainer>div {
    /*margin: 1vw;*/
    padding: 0 0.5vw 0 0.5vw;
}

.navigationTabContainer>.currentSelected {
    background-color: #dde4ec;
    color: #465c71;
    border-bottom: 1px #465c71 solid;
}

.navigationTabContainer>div:hover {
    background-color: #dde4ec;
    color: #465c71;
    border-bottom: 1px #465c71 solid;
}

.subNavigationTabContainer {
    width: 98vw;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    font-size: 2.4vh;
    cursor: pointer;
}

.subNavigationTabContainer>div {
    margin: 1vh 1vw 0 1vw;
}

.mlmLightPageContainer {
    /* /* min-height: 480px;
        max-width: 99.9vw;
        overflow-x: hidden; */
    /* margin: 2px; */
    /*  background: #FFE5B4;
    background: #DFF6FF; */
    /* width: 90vw; */
    /* margin-left: 10vw; */
    /* overflow-y: scroll; */
        /*overflow-y: hidden;*/
        height: 95vh;
}

.singlePageBase {
    max-width: 95vw;
    min-height: 92vh;
}

.singlePageBase .singlePageHeader {
    width: 98.5vw;
    font-size: 1.8rem;
    /*padding-left: 1vw;*/
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin-left: 1rem;
    /*align-content: space-between;*/
}

.singlePageBase .singlePageHeader div {
    margin-left: 25px;
    cursor: pointer;
}

.singlePageBase .singlePageHeader .selected {
    font-size: 3vw;
    z-index: 105;
}

.singlePageBase .headerShowHide {
    display: none;
}

.singlePageBase .singlePageHeaderMobile {
    display: none;
}

.singlePageHeader .tab {
    cursor: pointer;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    margin-right: 0px;
}

.singlePageHeader .tab span {
    margin: 0;
    z-index: 100;
}

.singlePageHeader .tab .arrowClassLeft {
    border-style: solid;
    border-width: 2vw 2vw 2vw 2vw;
    height: 0;
    width: 0;
    bottom: 0px;
    z-index: 100;
    margin: 0;
    background-color: transparent;
}

.singlePageHeader .tab .arrowClassRight {
    border-style: solid;
    border-width: 2vw 2vw 2vw 2vw;
    height: 0;
    width: 0;
    bottom: 0px;
    background-color: transparent;
    position: relative;
    z-index: 100;
    margin: 0;
}

.singlePageHeader .yellow .arrowClassRight {
    border-color: transparent transparent #CDDC39 #CDDC39;
}

.singlePageHeader .green .arrowClassRight {
    border-color: transparent transparent #81C784 #81C784;
}

.singlePageHeader .brown .arrowClassRight {
    border-color: transparent transparent #BCAAA4 #BCAAA4;
}

.singlePageHeader .blue .arrowClassRight {
    border-color: transparent transparent #90CAF9 #90CAF9;
}

.singlePageHeader .brown .arrowClassRight {
    border-color: transparent transparent #BCAAA4 #BCAAA4;
}

.singlePageHeader .orange .arrowClassRight {
    border-color: transparent transparent #FFCC80 #FFCC80;
}

.singlePageHeader .bluegrey .arrowClassRight {
    border-color: transparent transparent #B0BEC5 #B0BEC5;
}

.singlePageHeader .purple .arrowClassRight {
    border-color: transparent transparent #B39DDB #B39DDB;
}

.singlePageHeader .yellow .arrowClassLeft {
    border-color: transparent #CDDC39 #CDDC39 transparent;
}

.singlePageHeader .green .arrowClassLeft {
    border-color: transparent #81C784 #81C784 transparent;
}

.singlePageHeader .brown .arrowClassLeft {
    border-color: transparent #BCAAA4 #BCAAA4 transparent;
}

.singlePageHeader .blue .arrowClassLeft {
    border-color: transparent #90CAF9 #90CAF9 transparent;
}

.singlePageHeader .orange .arrowClassLeft {
    border-color: transparent #FFCC80 #FFCC80 transparent;
}

.singlePageHeader .bluegrey .arrowClassLeft {
    border-color: transparent #B0BEC5 #B0BEC5 transparent;
}

.singlePageHeader .purple .arrowClassLeft {
    border-color: transparent #B39DDB #B39DDB transparent;
}

.singlePageHeader .yellow>span, .singlePageHeader .yellow>div {
    background-color: #CDDC39;
}

.singlePageHeader .green>span, .singlePageHeader .green>div {
    background-color: #81C784;
}

.singlePageHeader .brown>span, .singlePageHeader .brown>div {
    background-color: #BCAAA4;
}

.singlePageHeader .blue>span, .singlePageHeader .blue>div {
    background-color: #90CAF9;
}

.singlePageHeader .orange>span, .singlePageHeader .orange>div {
    background-color: #FFCC80;
}

.singlePageHeader .bluegrey>span, .singlePageHeader .bluegrey>div {
    background-color: #B0BEC5;
}

.singlePageHeader .purple>span, .singlePageHeader .purple>div {
    background-color: #B39DDB;
}

.singlePageHeader .selectionBorder {
    width: 100%;
    margin-top: 0px;
    height: 5px;
}

.singlePageHeaderMobile {
    display: none;
}

.singlePageBase .reportRenderPage .reportContainer {
    max-width: 99vw;
    overflow-x: auto;
}

.errorDisplayContainer {
    position: fixed;
    top: 10vh;
    left: 10vw;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 80vw;
    height: 80vh;
    background-color: white;
    z-index: 10000;
    box-shadow: 1px 1px 1px grey;
}

.errorDisplayContainer .errorHeader {
    width: 78vw;
}

.errorDisplayContainer .errorBody {
    width: 80vw;
    max-height: 78vh;
    overflow-y: auto;
    font-size: 3vh;
}

.errorDisplayContainer .errorDisplayFooter {
    display: flex;
    flex-direction: row;
    width: 80vw;
    justify-content: space-around;
}

.errorDisplayContainer .errorDisplayFooter>input {
    width: 20vw;
    height: 3vh;
    font-size: 2.5vh;
}

.continueButtonIcon {
    min-width: 5vw;
    border-radius: 10vw;
    text-align: center;
    align-content: center;
    color: white;
    cursor: pointer;
    padding-left: 2vw;
    padding-right: 2vw;
    font-size: 2vw;
}

.reportPageBase {
    max-width: 100vw;
    overflow-x: scroll;
    overflow-y: hidden;
}

.gridTableLight {
    width: 92vw;
    display: flex;
    flex-direction: column;
}

.gridRowLight {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    width: 95%;
    text-align: center;

}

.gridCellLight {
    /*flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 15vw;*/
    flex: 0 1 15vw;
}

.gridEditCellLight {
    /*flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 15vw;*/
    flex: 0 0 5vw;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.gridHeaderCellLight {
    /*flex: 0 0 15vw;*/
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    /* border: 1px solid; */
    padding-bottom: 5px;
}

.gridHeaderEditCellLight {
    /*flex-grow: 1;*/
    flex: 0 0 5vw;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    /*display: flex;
    flex-direction: row;
    flex-wrap: wrap;*/
}

.filterCard {
    height: 25vh;
    max-height: 25vh;
    min-width: 15vw;
    overflow-y: auto;
    position: relative;
    z-index: 50;
    background-color: white;
}

.filterCard .container {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.filterCard .searchBox {}

.filterCard .menuitem {}

.filterCard .filterIsoSection {
    height: 15vh;
}

.collapsedFilterCard {
    top: auto;
}

.collapsedFilterCard>.currentValueDisplay {
    display: flex;
    justify-content: space-between;
}

.collapsedFilterCard>.currentValueDisplay>.closeButtonDiv {
    /*display: inline-flex;*/
    cursor: pointer;
    /*border: 1px solid red;*/
    /*border-radius: 1vh;*/
    height: 3vh;
    width: 3vh;
    flex: 0 0 auto;
    justify-content: space-around;
    text-align: center;
    display: flex;
    font-size: 1.8vh;
}

.collapsedFilterCard>.currentValueDisplay>.closeButtonDiv>img {
    height: 3vh;
    width: 3vh;
}

.collapsedFilterCard>.currentValueDisplay>div {
    flex: 0 0 1vw;
}

.collapsedFilterCard>.filterCardContainer {
    /*position: fixed;*/
    background-color: white;
    /*top: inherit;*/
    /*position: relative;*/
}

/* .collapsedFilterCard:focus>.filterCardContainer {
    display: block;
} */

.userSettingsPane {
    width: 40vw;
}

.navContainer .navBar {
    width: 8vw;
    grid-template-columns: 7vw;
}

.navContainer .navBar.expanded {
    /* width: 21vw; */
    width: 15vw;
    /* margin-right: 2rem; */
}

/*Note - moving this to flex**/
.mlmPageHeader.mlmPageHeaderSmall .aimscoBranding {
    /* grid-template-columns: 1fr 1fr 1fr 1fr; */
    /* grid-template-areas: "logo user settings userSettings"; */
    /* grid-template-columns: 1fr  1fr;
    grid-template-areas: "logo user  userSettings"; */
    max-width: 25vw;
    max-height: 5vh;
    margin-right: 15px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

/*This is to counteract an odd occurence where the name has a huge margin introduced at smaller screen sizes due to a capa styling (line 1859 here)*/
#signedInUserDisplay {
    margin-bottom: 0;
    margin-right: 0;
}
.checksheetControlButtonsContainer {
    display: flex;
}

.closeBtn {
    width: 5vw;
}

.closeBtnAbsolute {
    position: absolute;
    top: 10px;
    right: 10px;
    transform: scale(1.6);
}

.iqMapDisplayBase .iqMapShapeControls {
    flex-direction: column;
    /* margin-left: 10vw; */
    font-size: 2em;
    margin-right: 6vw;
    margin-left: .5vw;
    margin-bottom: 2vh;
}

/* .icon-csdetails {
    font-size: 5em;
} */


/*phone screen*/

@media only screen and (min-device-width: 300px) and (max-device-width: 700px) {
    body {
        max-width: 100%;
        overflow-x: hidden;
    }

    .mlmPageHeader {
        max-height: 15vh;
        background-color:  #F2EBE9;
    }

    .mlmPageHeader .aimscoBranding {
        display: flex;
        flex-direction: column;
    
    }

    .mlmPageHeader .aimscoBranding>img {
        transform: scale(0.5);
    
    }

    .mlmPageHeader .aimscoBranding>div {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        /*width: 100%;*/
        /*justify-content: flex-end;*/
    }

    .mlmPageHeader .aimscoBranding>div>span, a {
        /* margin-left: 1vw; */
    }

    .mlmPageHeader>div {
        width: 98vw;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-between;
    }

    .mlmPageHeader img {
        /*see portrait and landscape media queries above*/
        max-height: 14vh;
        width: 150px;
        margin: 2px 0 0 15px;
    }

    .pageFooterDiv {
        font-size: 1.4vh;
    }

    .copyrightFooter {
        font-size: 1.4vh;
    }

    .aimsLoginPrompt {
        width: 100vw;
        height: 500px;
        position: fixed;
        top: 20vh;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        /*background-color: cornsilk;*/
        justify-content: space-between;
        background-color: white;
        z-index: 10000;
        font-size: 3vh;
    }

    .login-background-div {
        position: fixed;
        top: 14vh;
        left: 50vw;
        height: 650px;
        transform: translateX(-50%);
        width: 95%;
        max-width: 800px;
        margin: 65px auto;
        border-radius: 6px;
        box-shadow: 0 2px 25px rgba(0,0,0,0.2);
        transition: 0.2s;
    }

    .aimsLoginPrompt>div {
        /* flex: 1 0 60%;
        text-align: center; */
        height: 100px;
    }

    .aimsLoginPrompt input {
        /* font-size: 2.8vh; */
        font-size: 1.2rem;
    }

    .aimsLoginPrompt>.loginPromptPart {
        flex: 1 0 60%;
        text-align: center;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-around;
    }

    .aimsLoginPrompt .loginPromptPart input {
        font-size: 2.8vh;
        height: 2.8vh;
        max-width: 40vw;
    }

    .loginPicker {
        position: fixed;
        width: 100vw;
        height: 60vh;
        max-height: 60vh;
        overflow: auto;
        background-color: white;
        left: 0;
        top: 20vh;
    }

    .loginPicker .loginPickerHeader {
        width: 100vw;
        text-align: center;
        font-size: 2vh;
    }

    .loginPicker .loginSelection {
        background-color: #eceff1;
        font-size: 2vh;
        cursor: pointer;
        width: 80vw;
        margin-top: 1vh;
        margin-bottom: 2vh;
        margin-left: 10vw;
        height: 8vh;
        text-align: center;
        box-shadow: 1px 5px 5px 0px rgba(0, 0, 0, 0.47);
    }

    .signedInUserDisplay {}

    .aimsLoginPromptHeader {
        height: 10vh;
        flex: 1 0 60%;
        text-align: center;
        font-size: 4vh;
        font-weight: 500;
    }

    .aimsLoginPromptFooter {}

    .navigationTabContainer {
        width: 100vw;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        font-size: 3vh;
        cursor: pointer;
        /*margin: 1vw;*/
        background-color: #465c71;
        color: #dde4ec;
        margin-bottom: 0.5vh;
    }

    .navigationTabContainer>div {
        /*margin: 1vw;*/
        padding: 0 0.5vw 0 0.5vw;
    }

    .navigationTabContainer>.currentSelected {
        background-color: #dde4ec;
        color: #465c71;
        border-bottom: 1px #465c71 solid;
    }

    .navigationTabContainer>div:hover {
        background-color: #dde4ec;
        color: #465c71;
        border-bottom: 1px #465c71 solid;
    }

    .subNavigationTabContainer {
        width: 98vw;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        font-size: 2.4vh;
        cursor: pointer;
    }

    .subNavigationTabContainer>div {
        margin: 1vh 1vw 0 1vw;
    }

    .mlmLightPageContainer {
        min-height: 480px;
        max-width: 99.9vw;
        overflow-x: hidden;
        margin: 2px;
        /* background-color: #F0F0F0; */
        background: #F2EBE9;
        /*overflow-y: hidden;*/
    }

    .singlePageBase {
        max-width: 100vw;
    }

    .singlePageBase .singlePageHeader {
        margin-top: 25px;
        width: 98.5vw;
        font-size: 1.8rem;
        /*padding-left: 1vw;*/
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        margin-left: 1rem;
        /*align-content: space-between;*/
    }

    .singlePageBase .singlePageHeader div {
        margin-left: 25px;
        cursor: pointer;
    }

    .singlePageBase .singlePageHeader .selected {
        font-size: 3vw;
        z-index: 105;
    }

    .singlePageBase .headerShowHide {
        display: none;
    }

    .singlePageBase .singlePageHeaderMobile {
        display: none;
    }

    .singlePageHeader .tab {
        cursor: pointer;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        margin-right: 0px;
    }

    .singlePageHeader .tab span {
        margin: 0;
        z-index: 100;
    }

    .singlePageHeader .tab .arrowClassLeft {
        border-style: solid;
        border-width: 2vw 2vw 2vw 2vw;
        height: 0;
        width: 0;
        bottom: 0px;
        z-index: 100;
        margin: 0;
        background-color: transparent;
    }

    .singlePageHeader .tab .arrowClassRight {
        border-style: solid;
        border-width: 2vw 2vw 2vw 2vw;
        height: 0;
        width: 0;
        bottom: 0px;
        background-color: transparent;
        position: relative;
        z-index: 100;
        margin: 0;
    }

    .singlePageHeader .yellow .arrowClassRight {
        border-color: transparent transparent #CDDC39 #CDDC39;
    }

    .singlePageHeader .green .arrowClassRight {
        border-color: transparent transparent #81C784 #81C784;
    }

    .singlePageHeader .brown .arrowClassRight {
        border-color: transparent transparent #BCAAA4 #BCAAA4;
    }

    .singlePageHeader .blue .arrowClassRight {
        border-color: transparent transparent #90CAF9 #90CAF9;
    }

    .singlePageHeader .brown .arrowClassRight {
        border-color: transparent transparent #BCAAA4 #BCAAA4;
    }

    .singlePageHeader .orange .arrowClassRight {
        border-color: transparent transparent #FFCC80 #FFCC80;
    }

    .singlePageHeader .bluegrey .arrowClassRight {
        border-color: transparent transparent #B0BEC5 #B0BEC5;
    }

    .singlePageHeader .purple .arrowClassRight {
        border-color: transparent transparent #B39DDB #B39DDB;
    }

    .singlePageHeader .yellow .arrowClassLeft {
        border-color: transparent #CDDC39 #CDDC39 transparent;
    }

    .singlePageHeader .green .arrowClassLeft {
        border-color: transparent #81C784 #81C784 transparent;
    }

    .singlePageHeader .brown .arrowClassLeft {
        border-color: transparent #BCAAA4 #BCAAA4 transparent;
    }

    .singlePageHeader .blue .arrowClassLeft {
        border-color: transparent #90CAF9 #90CAF9 transparent;
    }

    .singlePageHeader .orange .arrowClassLeft {
        border-color: transparent #FFCC80 #FFCC80 transparent;
    }

    .singlePageHeader .bluegrey .arrowClassLeft {
        border-color: transparent #B0BEC5 #B0BEC5 transparent;
    }

    .singlePageHeader .purple .arrowClassLeft {
        border-color: transparent #B39DDB #B39DDB transparent;
    }

    .singlePageHeader .yellow>span, .singlePageHeader .yellow>div {
        background-color: #CDDC39;
    }

    .singlePageHeader .green>span, .singlePageHeader .green>div {
        background-color: #81C784;
    }

    .singlePageHeader .brown>span, .singlePageHeader .brown>div {
        background-color: #BCAAA4;
    }

    .singlePageHeader .blue>span, .singlePageHeader .blue>div {
        background-color: #90CAF9;
    }

    .singlePageHeader .orange>span, .singlePageHeader .orange>div {
        background-color: #FFCC80;
    }

    .singlePageHeader .bluegrey>span, .singlePageHeader .bluegrey>div {
        background-color: #B0BEC5;
    }

    .singlePageHeader .purple>span, .singlePageHeader .purple>div {
        background-color: #B39DDB;
    }

    .singlePageHeader .selectionBorder {
        width: 100%;
        margin-top: 0px;
        height: 5px;
    }

    .singlePageHeaderMobile {
        display: none;
    }

    .singlePageBase .reportRenderPage .reportContainer {
        max-width: 99vw;
        overflow-x: auto;
    }

    .singlePageContainer {
        /* max-width: 100vw;
        overflow: auto; */
    }

    .errorDisplayContainer {
        position: fixed;
        top: 10vh;
        left: 10vw;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        width: 80vw;
        height: 80vh;
        background-color: white;
        z-index: 10000;
        box-shadow: 1px 1px 1px grey;
    }

    .errorDisplayContainer .errorHeader {
        width: 78vw;
    }

    .errorDisplayContainer .errorBody {
        width: 80vw;
        max-height: 78vh;
        overflow-y: auto;
        font-size: 3vh;
    }

    .errorDisplayContainer .errorDisplayFooter {
        display: flex;
        flex-direction: row;
        width: 80vw;
        justify-content: space-around;
    }

    .errorDisplayContainer .errorDisplayFooter>input {
        width: 20vw;
        height: 3vh;
        font-size: 2.5vh;
    }

    .continueButtonIcon {
        min-width: 5vw;
        border-radius: 10vw;
        text-align: center;
        align-content: center;
        color: white;
        cursor: pointer;
        padding-left: 2vw;
        padding-right: 2vw;
        font-size: 2vw;
    }

    .reportPageBase {
        max-width: 100vw;
        overflow-x: scroll;
        overflow-y: hidden;
    }

    .gridTableLight {
        width: 92vw;
        display: flex;
        flex-direction: column;
    }

    .gridRowLight {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-between;
        width: 100%;
        text-align: center;

    }

    .gridCellLight {
        /*flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 15vw;*/
        flex: 0 1 15vw;
    }

    .gridEditCellLight {
        /*flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 15vw;*/
        flex: 0 0 5vw;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .gridHeaderCellLight {
        /*flex: 0 0 15vw;*/
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        /* border: 1px solid; */
        padding-bottom: 5px;
        text-align: center;
    }

    .gridHeaderEditCellLight {
        /*flex-grow: 1;*/
        flex: 0 0 5vw;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        /*display: flex;
    flex-direction: row;
    flex-wrap: wrap;*/
    }

    .filterCard {
        height: 25vh;
        max-height: 25vh;
        min-width: 15vw;
        overflow-y: auto;
        position: relative;
        z-index: 50;
        background-color: white;
    }

    .filterCard .container {
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    .filterCard .searchBox {}

    .filterCard .menuitem {}

    .filterCard .filterIsoSection {
        height: 15vh;
    }

    .collapsedFilterCard {
        top: auto;
    }

    .collapsedFilterCard>.currentValueDisplay {
        display: flex;
        justify-content: space-between;
    }

    .collapsedFilterCard>.currentValueDisplay>.closeButtonDiv {
        /*display: inline-flex;*/
        cursor: pointer;
        /*border: 1px solid red;*/
        /*border-radius: 1vh;*/
        height: 3vh;
        width: 3vh;
        flex: 0 0 auto;
        justify-content: space-around;
        text-align: center;
        display: flex;
        font-size: 1.8vh;
    }

    .collapsedFilterCard>.currentValueDisplay>.closeButtonDiv>img {
        height: 3vh;
        width: 3vh;
    }

    .collapsedFilterCard>.currentValueDisplay>div {
        flex: 0 0 1vw;
    }

    .collapsedFilterCard>.filterCardContainer {
        /*position: fixed;*/
        background-color: white;
        /*top: inherit;*/
        /*position: relative;*/
    }

    /* .collapsedFilterCard:focus>.filterCardContainer {
        display: block;
    } */
}



/*Adding a media query for the branding logo - currently it was increasing and decreasing in size when changes in screen size
 and sometimes it blows up huge
Making sure it stays constant*/

@media (max-width: 1200px) {
    #brandingLogo {
        max-width: 140px;
    }
}