.header {
    display: none;
}

.noPrint {
    display: none;
}

.no-print {
    display: none;
}

.age-4-5-background {
    background-color: #E5FFE5;
    border: 1px solid darkgray;
}

.age-5-7-background {
    background-color: #E99494;
    border: 1px solid #cc3333;
}

.age-6-8-background {
    background-color: #FFE0A3;
    border: 1px solid #FF9933;
}

.age-7-9-background {
    background-color: #FFFFD6;
    border: 1px solid darkgray;
}

.age-8-10-background {
    background-color: #85E0A3;
    border: 1px solid green;
}

.age-9-11-background {
    background-color: #A3E0FF;
    border: 1px solid navy;
}

.age-10-12-background {
    background-color: #E0C2FF;
    border: 1px solid #660099;
}

.age-11-13-background {
    background-color: #B7D6E5;
    border: 1px solid #539DC2;
}

.age-12-14-background {
    background-color: #FCB885;
    border: 1px solid #FF7216;
}

.high-school-1-background {
    background-color: #CBECD9;
    border: 1px solid #4E9258;
}

.box {
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: auto;
    background-color: darkgray;
    border-radius: 5px;
    grid-gap: 2px;
    padding: 2px;
    margin: 5px;
}

    .box > div {
        padding: 10px;
    }

/*
.box {    
    
    border:2px solid darkGray;
    border-radius:5px;
    background-color:#ffcc99;    
}
*/

.boxTitle {
    background-color: #ffcc99;
    font-weight: bold;
}

.boxFooter {
    background-color: gainsboro;
}

.boxContent {
    background-color: white;
}


.two-column-grid {
    display: grid;
    grid-template-columns: 25% auto;
    grid-gap: 1px;
    background-color: darkgray;
    padding: 1px;
    border-radius: 5px;
    margin-top: 10px;
    margin-bottom: 10px;
}

.two-column-grid-header {
    grid-column-start: span 2;
    padding: 10px;
    background-color: #B3C7Df;
}

.two-column-grid-footer {
    grid-column-start: span 2;
    background-color: #F4F5D2;
}

.two-column-grid-one-column {
    grid-column-start: span 2;
    background-color: white;
}

.paddedDiv {
    padding: 10px;
}

.progressBarBackground {
    border: 1px solid navy;
    background-color: lightblue;
    position: relative;
    text-align: center;
    padding: 4px;
    padding-left: 0;
}

.progressBarForeground {
    background-color: navy;
    height: 100%;
    position: absolute;
    top: 0;
    opacity: .33;
}


/* --------- iphone portrait -----------  */
@media only screen and (max-device-width: 540px) {
    .two-column-grid-one-column {
        grid-column-start: span 1;
    }
}

.two-column-grid-right {
    background-color: white;
    padding: 10px;
}

.two-column-grid-left {
    background-color: #C8EFCA;
    padding: 10px;
    display: flex;
    align-items: center;
}

.one-column-grid {
    display: grid;
    grid-template-columns: auto;
    grid-gap: 1px;
    background-color: darkgray;
    border: 1px solid darkgray;
    border-radius: 5px;
    margin-top: 10px;
    margin-bottom: 10px;
}

.one-column-grid-header {
    background-color: #B3C7Df;
}

.one-column-grid > div {
    padding: 10px;
}

.one-column-grid-body {
    background-color: white;
}

.one-column-grid-footer {
    background-color: #F4F5D2;
}

.one-column-grid-object-box {
    text-align: center;
    background-color: gray;
}


.invisible-template {
    display: none;
}