body {
    background: #DDDDDD;
    height: 100%;
}

.navbar {
    background-color: #800000;
    color: #DDDDDD;
}

.page-container {
    margin-top: 75px;
}

.draggable-mirror {
    opacity: 100%;
}

.draggable-container--over {
    /*border: 3px solid black;*/
    /*opacity: 0.9;*/
    background-color: #cecece;
}

.quarterColumn>.draggable-source--is-dragging {
    /*opacity: 0.5;*/
    border-style: dashed;
    border-radius: 10px;
    background-color: rgba(0, 0, 0, 0) !important;
    color: rgba(0, 0, 0, 0) !important;
    border-width: 3.5px;
}

#fab {
    position: fixed;
    right: 10px;
    bottom: 10px;
    background: #800000;
    color: #DDDDDD;
    z-index: 999;
}

#fab:active {
    opacity: 0.8;
    transform: translateY(2px);
}

#gradText {
    text-align: center;
}

#year1,
#year1Label {
    border-right: 1px solid black;
}

#year4,
#year4Label {
    border-left: 1px solid black;
}

#year2,
#year3,
#year2Label,
#year3Label {
    border-left: 1px solid black;
    border-right: 1px solid black;
}

.winterColumn {
    border-left: 1px solid black;
    border-right: 1px solid black;
}

.quarterColumn {
    border-bottom: 1px solid black;
    border-top: 1px solid black;
}

#gradText {
    margin-top: 15px;
}

#flowChartArea {
    display: grid;
    grid-template-columns: 25% 25% 25% 25%;
    grid-template-rows: auto;
    border: 2px solid black;
    border-radius: 15px;
    margin-top: auto;
    margin-bottom: auto;
}

#flowChartArea>.yearColumn {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto;
}

#flowChartArea .yearColumn .quarterColumn {
    height: 650px;
    max-height: 65vh;
    display: grid;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
    grid-auto-rows: 1fr;
    padding: 0 2px;
    margin-bottom: 0;
}

#navbarBrand {
    padding-bottom: 8px;
}

.credits {
    font-size: 12px;
}

#flowChartArea .yearColumn .credits {
    display: block;
    text-align: center;
}

#flowChartArea .yearLabel {
    display: block;
    text-align: center;
}

#flowChartArea .yearColumn .termLabel {
    display: block;
    text-align: center;
}

.classItem {
    height: 65px;
    border-width: 3px;
    border-style: solid;
    border-color: black;
    border-radius: 3px;
    margin: 3px;
    font-size: 10px;
    padding: 0;
    grid-column: 1;
    text-align: center;
    background-color: white;
}

#smallScreenWarning {
    visibility: hidden;
    display: none;
}

@media screen and (max-width: 768px) {
    #flowChartArea {
        visibility: hidden;
        clear: both;
        float: left;
        margin: 10px auto 5px 20px;
        width: 28%;
        display: none;
    }
    #gradText {
        visibility: hidden;
        clear: both;
        float: left;
        margin: 10px auto 5px 20px;
        width: 28%;
        display: none;
    }
    #smallScreenWarning {
        margin: 75px 10px 10px;
        visibility: visible;
        display: block;
        text-align: center;
    }
}

@media screen and (max-height: 500px) {
    .classItem {
        height: auto;
        font-size: 9px;
        max-height: 100px;
    }
}

.test2 {
    background-image: url('https://www.nintendo.com//content/dam/noa/en_US/games/switch/x/xenoblade-chronicles-2-switch/xenoblade-chronicles-2-switch-hero.jpg');
}

.test {
    background-image: url('https://images.squarespace-cdn.com/content/v1/56d725b88a65e2c48c079abf/1594642543419-I9057477EDP6MN96JFOS/ke17ZwdGBToddI8pDm48kNvT88LknE-K9M4pGNO0Iqd7gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z5QPOohDIaIeljMHgDF5CVlOqpeNLcJ80NK65_fV7S1USOFn4xF8vTWDNAUBm5ducQhX-V3o VjSmr829Rco4W2Uo49ZdOtO_QXox0_W7i2zEA/xenobladechronicles_defed_switch_review.jpg?format=2500w');
}

.is-focused [class*=" bmd-label"],
.is-focused [class^=bmd-label] {
    color: #800000;
}

#loginPage{
    text-align: center;
}


#roseLogo {
    margin-top: 10px;
    max-width: 300px;
    border-radius: 10px;
}

#loginPage{

}
.modal-open {
    padding-right: 0 !important;
}

.bmd-layout-drawer>header {
    background-color: #800000;
    color: white;
}

#devInputLabel {
    padding-top: 0px !important;
}

.bmd-layout-drawer>ul {
    background-color: #ddd;
}

#sideBarToggle {
    border: none;
    color: white;
}

@media (min-width: 576px) {
    #flowPage,
    .container {
        max-width: 100%;
    }
}

@media (min-width: 768px) {
    #flowPage,
    .container {
        max-width: 100%;
    }
    .classItem {
        font-size: 10px;
    }
}

@media (min-width: 850px) {
    #flowPage,
    .container {
        max-width: 100%;
    }
    .classItem {
        font-size: 11px;
    }
}

@media (min-width: 992px) {
    #flowPage,
    .container {
        max-width: 100%;
    }
    .classItem {
        font-size: 12px;
    }
}

@media (min-width: 1200px) {
    .container,
    #flowPage {
        max-width: 1140px
    }
    .classItem {
        font-size: 13px;
    }
}

.autocomplete {
    /*the container must be positioned relative:*/
    position: relative;
    display: inline-block;
}

input[type=submit] {
    background-color: #800000;
    color: #fff;
}

.autocomplete-items {
    position: absolute;
    border: 1px solid #d4d4d4;
    border-bottom: none;
    border-top: none;
    z-index: 99;
    /*position the autocomplete items to be the same width as the container:*/
    top: 100%;
    left: 0;
    right: 0;
}

.autocomplete-items div {
    padding: 10px;
    cursor: pointer;
    background-color: #fff;
    border-bottom: 1px solid #d4d4d4;
}

.autocomplete-items div:hover {
    /*when hovering an item:*/
    background-color: #e9e9e9;
}

.autocomplete-active {
    /*when navigating through the items using the arrow keys:*/
    background-color: #800000 !important;
    color: #ffffff;
}

#rosefireButton {
    display: block;
    margin: 40px auto;
    color: #DDDDDD;
    background: #800000;
    font-size: 1.1em;
    padding: 10px 30px;
    border-radius: 5px;
}

.firebaseui-card-content button {
    border-radius: 5px;
}