.body-content {
    width: 100%;
    padding-left: 0;
    padding-right: 0;
}

.ReportCardDivider {
    display: grid;
    grid-template-columns: 55% 45%;
    height: 100vh;
}

.ReportCard-Header {
    position: absolute;
    left: 35%;
    top: 3%;
    font-size: x-small;
}

.ReportCard-Left {
    background-color: #f7f7f3;
    padding: 0 6%;
    padding-left: 45%;
}

.summaryBlock {
}

.summaryBlock-header {
    color: #f74f5c;
    font-size: xx-large;
    grid-column: span 2;
}

    .summaryBlock-header .fa-bars {
        position: relative;
        top: -10px;
        left: -10px;
    }

.sexToggle {
    color: #764b4e;
    cursor: pointer;
    font-size: .8em;
    transition: .1s;
}

    .sexToggle:hover {
        color: #b82e38;
    }

    .sexToggle.active:hover {
        color: #ff1627;
    }

    .sexToggle.active {
        color: #f74f5c;
        font-size: 1em;
    }

.gradeSelector {
    padding: 7px;
    border-radius: 15px;
    margin-left: 7px;
    cursor: pointer;
}

    .gradeSelector.active {
        background-color: #3cd5c1;
    }

    /*.gradeSelector:hover {
        background-color: #cbebe7;
    }*/

.disabledButton {
    cursor: not-allowed;
}



.summaryBlock-subHeader {
    font-size: large;
}

.summaryBlock-count {
    font-size: smaller;
    /*border-top: 1px solid #dfead6;*/
    margin-top: 20px;
}

.summaryBlock-content {
    margin-top: 5%;
}

.summaryBlock-subcontent {
    margin-top: 5%;
    font-style: italic;
}

.periods {
    margin-top: 5%;
}

.periodSelector {
    display: inline-block;
    color: #f74f5c;
    border: solid 1px #f74f5c;
    background-color: white;
    padding: 7px;
    border-radius: 25px;
    margin: 7px;
    cursor: pointer;
}

    .periodSelector.active {
        color: white;
        background-color: #f74f5c;
    }

.paddingOnTop {
    padding-top: 6%;
}

.ReportCard-Right {
    background-color: #232321;
    padding: 0 6%;
    padding-right: 45%;
}

.rateBlock {
    padding-top: 20px;
}

    .rateBlock:first-child {
        padding: 0;
    }

    .rateBlock .rateBlock-Heading {
        font-style: italic;
        color: #238768;
    }

    .rateBlock .rateBlock-Value {
        font-size: 5em;
        color: #3cd5c1;
    }

    .rateBlock .rateBlock-Subscript {
        font-style: italic;
        color: white;
    }

.percentBlock-block {
    margin-top: 10%;
}

    .percentBlock-block:first-child {
        margin-top: 0;
    }

.gradeColumn {
    padding-top: 20px;
}

.gradeColumn-Header {
    font-style: italic;
    color: #238768;
}

.subjectGradeBlock {
    padding-top: 5px;
    padding-bottom: 10px;
}

.subjectGradeBlock-Header {
    color: white;
    font-style: italic;
    font-size: small;
}

.subjectGradeBlock-Value {
    font-size: 4em;
    color: #3cd5c1;
}

#ReportCard-PrintPage {
    display: none;
}

#RaceToggle {
    cursor: pointer;
}

.raceFilter-toggleButton {
    cursor: pointer;
}

#RaceFilters {
    position: fixed;
    width: 100%;
    top: -60%;
    padding: 3% 5% 1% 5%;
    background-color: #3cd5c1;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-gap: 10px;
    transition: 1S;
    -moz-box-shadow: 0px 1px 4px 1px rgb(91, 116, 113);
    -webkit-box-shadow: 0px 1px 4px 1px rgb(91, 116, 113);
    box-shadow: 0px 1px 4px 1px rgb(91, 116, 113);
    z-index: 1;
}

    #RaceFilters.raceFiltersActive {
        top: 0%;
    }

    #RaceFilters span {
        text-align: center;
        border-radius: 25px;
        padding: 10px;
        cursor: pointer;
        background-color: #cdcdc5;
        min-height: 60px;
        -moz-box-shadow: inset -0.5px 1px 5px rgba(35, 35, 33, .2);
        -webkit-box-shadow: inset -0.5px 1px 5px rgba(35, 35, 33, .2);
        box-shadow: inset -0.5px 1px 5px rgba(35, 35, 33, .2);
    }

        #RaceFilters span.active {
            background-color: #f7f7f3;
            -moz-box-shadow: none;
            -webkit-box-shadow: none;
            box-shadow: none;
        }

.raceFilter-toggleButton {
    text-align: center;
    grid-column: span 6;
    color: white;
    /*transform: rotate(180deg);*/
    /*position: relative;
    top: 160px;
    left: 50%;
    height: 55px;
    transform: rotate(60deg)*/
}

/*Loading screen*/
#loading {
    background-color: #e7edee;
    width: 100%;
    position: fixed;
    top: 0;
    height: 100%;
    z-index: 1;
    -webkit-transition: 3s ease-in-out;
    -o-transition: 3s ease-in-out;
    transition: 3s ease-in-out;
}

    #loading > img {
        position: inherit;
        left: 45%;
        display: block;
        top: 45%;
    }

.loadingText {
    position: inherit;
    left: 48%;
    top: 45%;
    font-size: large;
}

@-webkit-keyframes rotator {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(270deg);
        transform: rotate(270deg);
    }
}

@keyframes rotator {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(270deg);
        transform: rotate(270deg);
    }
}

#loader {
    stroke-dasharray: 187;
    stroke-dashoffset: 0;
    -webkit-transform-origin: center;
    -ms-transform-origin: center;
    transform-origin: center;
    -webkit-animation: dash 1.4s ease-in-out infinite;
    animation: dash 1.4s ease-in-out infinite;
}

.spinner {
    -webkit-animation: rotator 1.4s linear infinite;
    animation: rotator 1.4s linear infinite;
    position: fixed;
    top: 50%;
    left: 48%;
}

@-webkit-keyframes dash {
    0% {
        stroke-dashoffset: 187;
    }

    50% {
        stroke-dashoffset: 25;
        -webkit-transform: rotate(135deg);
        transform: rotate(135deg);
    }

    100% {
        stroke-dashoffset: 187;
        -webkit-transform: rotate(450deg);
        transform: rotate(450deg);
    }
}

@keyframes dash {
    0% {
        stroke-dashoffset: 187;
    }

    50% {
        stroke-dashoffset: 25;
        -webkit-transform: rotate(135deg);
        transform: rotate(135deg);
    }

    100% {
        stroke-dashoffset: 187;
        -webkit-transform: rotate(450deg);
        transform: rotate(450deg);
    }
}
/*Loading screen*/

@media screen and (max-width: 1400px) {
    .ReportCard-Left {
        padding-left: 10%;
    }
/*
    .ReportCard-Right {
        padding: 10%;
    }
*/
    .ReportCard-Header {
        left: 10%;
    }

    .gradeSelectors {
        display: inline-block;
        padding-top: 12px;
    }
}

@media screen and (max-width: 1000px) {
    #RaceFilters {
        grid-template-columns: 1fr 1fr 1fr;
    }

    .raceFilter-toggleButton {
        grid-column: span 3;
    }
}

@media screen and (max-width: 700px) {
    #RaceFilters {
        grid-template-columns: 1fr 1fr;
    }

    .raceFilter-toggleButton {
        grid-column: span 2;
    }

    .ReportCardDivider {
        grid-template-columns: 100%;
    }

    .ReportCard-Left {
        padding-left: 6%;
    }
/*
    .ReportCard-Right {
        padding: 6%;
    }*/

    .ReportCard-Header {
        left: 12%;
    }

    .gradeSelectors {
        display: inline-block;
        padding-top: 12px;
    }
}

@media screen and (max-width: 390px) {
    #RaceFilters {
        grid-template-columns: 1fr;
    }

    .raceFilter-toggleButton {
        grid-column: span 1;
    }

    .spinner {
        left: 42%;
    }

    .loadingText {
        left: 40%;
    }
}

@media print {
    #ReportCard-MainPage {
        display: none;
    }

    #ReportCard-PrintPage {
        display: initial;
    }

    .ReportCardDivider {
        page-break-after: always;
    }

    .ReportCard-Left {
        padding-left: 6%;
    }
/*
    .ReportCard-Right {
        padding-right: 6%;
    }
*/
    .sexToggleDevider {
        display: none;
    }

    .gradeSelector, .sexToggle {
        display: none;
    }

    #PrintPageMale06 .maleToggle, #PrintPageMale06 .grade6, #PrintPageMale09 .maleToggle, #PrintPageMale09 .grade9, #PrintPageMale12 .maleToggle, #PrintPageMale12 .grade12, #PrintPageFemale06 .femaleToggle, #PrintPageFemale06 .grade6, #PrintPageFemale09 .femaleToggle, #PrintPageFemale09 .grade9, #PrintPageFemale12 .femaleToggle, #PrintPageFemale12 .grade12 {
        display: initial;
    }

}