/* REPORT */

#reportContainer, #reportViewContainer {
    display: grid; width: 100%; grid-gap: 0.25em; padding:2em 1em;
}

/* .reportCard {
} */

.warnBanner {
    font-size: 1.25em;
    padding: 0.75em 2em; margin: 2em auto; width: auto; max-width: 600px;
    background-color: #ddfadd; border-radius: 1em; border: 1px solid #96ca96;
}

.warnBanner a, .warnBanner a:visited {
    color: #fff;
}
.warnBanner span, .warnBanner a {
    margin: 0.5em; display: inline-block;
}

#floatBox {
    position: fixed; bottom: 1em; right: 1em;
}

.reportCard .wrap {
    display: block;
    margin: 1em;
}

.fileBox {
    border: 1px solid #4D894D; margin: 0.5em 0;
    border-radius: 8px; background-color: #E5F6E1;
    display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: center; align-content: stretch;
}
.fileBox span { margin:12px; }
.fileBox i {
    margin:6px; padding:6px; border-radius: 50%; cursor: pointer;
}
.fileBox i:hover {
    background: var(--dark-overlay); color: #fff;
}

.photoContainer {
    display: grid; width: 100%;
    grid-gap: 0.75em; padding: 0 0;
    grid-template-columns: repeat(3, 1fr);
}
.photoBox {
    border: 3px solid #cccccc; margin: 0; text-align: right;
    border-radius: 8px; overflow: hidden;
}
.photoBox span { margin:12px; }
.photoBox i {
    padding:4px; background: var(--dark-overlay); position: absolute; color: #ccc;
    border-radius: 50%; transform: translate(-120%, 20%); cursor: pointer;
}
.photoBox i:hover { background: #222222; color: #fff;}
.photoBox .img { width: 100%; padding-top: 100%; overflow: hidden; }

.reportSecTitle {
    display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: center; align-content: stretch;
    font-size: 18px; color: #666666; text-align: left;
    padding-top:1em;
}



/* HOME */

.scroll {
    padding:0 1em;
}

#seasonHome {
    margin:2em auto; cursor: pointer; padding: 0 1em;
}

.seasonHomeBtn {
    /* text-align: left; padding: 1em 3em;  */
    /* color: #000; */
    margin: 0.5em; border-radius: 0.5em; background: #8BE7FE;
    /* display: grid; grid-template-columns: auto 64px; */
    padding-top: 56.25%;
    /* background:#fff; list-style:none; cursor: pointer; width: auto; */
    box-shadow: 0px 2px 3px rgba(0, 0, 0, .2);



}
.seasonHomeBtn .title {
    font-size: 1.5em; font-weight: bold;
}
#seasonHome a { color: #000; }

#seasonHome a:hover {
    color: #a00;
}

.imgCover { background-repeat: no-repeat; background-size: cover; }
.sectionTitle {
    font-size: 2em; color: var(--card-link); font-weight: bold; text-align: left;
    padding: 0.5em; padding-top: 1em; 

}

#season { padding: 1em; }
#lesson { background: var(--white); padding:1em 2em; }

.vdoCard, .listCard {
    background:#fff; list-style:none; cursor: pointer; width: auto;
    box-shadow: 0px 2px 3px rgba(0, 0, 0, .2);
}
.vdoCard:hover, .listCard:hover {
    background: #FFE;
    box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.2);
    -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;
}

.sb_container { max-width: 1200px; margin: 0 auto; }

#seasonHome, .vidContainer, .vidGuideContainer {
    display: grid; width: 100%;
    grid-gap: 1em 1%; padding: 0; grid-template-columns: 24.24% 24.24% 24.24% 24.24%;
}

.vdoCard { 
    display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: flex-start; align-items: stretch; align-content: stretch;
    border-radius: 0.5em; overflow: hidden;
 }

.vdoCard .vidImg { width: 100%; padding-top: 55%; overflow: hidden; background-repeat: no-repeat; background-size: cover; }

.vdoCard .cardInfo { padding:10px 15px; text-align:left; }
.vdoCardInfoTitle { color:var(--pri-color); height: 45px; font-size: 1.25em; padding:0; font-weight: bold; }

.vdoCardInfoPastorName { color:#999; padding:10px 0; font-size:14px; }
.vdoCardInfoDate { color:#999; padding:0px 0; font-size:12px; }


.vidViewContainer {
    display: grid; width: 100%; grid-gap: 1em;
}

.vidMatContainer {
    display: grid; width: 100%; 
    grid-gap: 1em 1%; padding: 0; grid-template-columns: 49.5% 49.5%;
}

/* CARD */

.sb_lessonCover {
    display: grid; width: 100%; margin: 1em 0;
    grid-gap: 0; padding: 0; grid-template-columns: 50% 50%;
}

.sb_lessonCover .img {
    width:100%; padding-top:56%; margin: 1em 0; background-repeat: no-repeat; background-size: cover;
    box-shadow: 0px 2px 3px rgba(0, 0, 0, .2); border-radius: 0.5em; overflow: hidden;
}
.sb_lessonCover .info {
    font-size: 1em; padding: 3em; text-align: left;
}
.sb_lessonCover .info .title {
    font-size: 2em; color:var(--card-link);
}

.sb_vdoCard, .sb_listCard {
    background:#fff; list-style:none; cursor: pointer; width: auto;
    box-shadow: 0px 2px 3px rgba(0, 0, 0, .2); border-radius: 0.5em; overflow: hidden;
    
}
.sb_vdoCard:hover, .sb_listCard:hover {
    background: #FFE;
    box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.2);
    -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;
}

.sb_vdoCard { 
    display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: flex-start; align-items: stretch; align-content: stretch;
    color: #333333; font-size:16px; font-weight: bold; 
 }

.sb_vdoCard .vidImg { width: 100%; padding-top: 55%; overflow: hidden; background-repeat: no-repeat; background-size: cover; }
.sb_vdoCard .cardInfo { padding:10px 15px; text-align:left; }
.sb_vdoCardInfoTitle { color:#333; height: 45px; padding:0; font-weight: bold; }

.sb_vdoCardInfoPastorName { color:#999; padding:10px 0; font-size:14px; }
.sb_vdoCardInfoDate { color:#999; padding:0px 0; font-size:12px; }

.sb_listCard { 
    display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: stretch; align-content: stretch;
    color: #333333; font-size:16px; font-weight: bold; 
}
.sb_listCard .icon {
    min-width:40px; margin:10px; text-align:center;
    font-size:40px; color:var(--accent-color);
}
.sb_listCard .vidImg { width: 30%; padding-top: 25%; }
.sb_listCard .matImg { width: 30%; padding-top: 20%; margin: 0.5em; }

.sb_listCard .cardInfo {
    padding:10px; padding-left: 0; text-align:left;
    display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: center; align-content: stretch;
}
.sb_listCardTitle { color:var(--accent-color); padding:0; font-weight: bold; }



@media screen and (max-width: 1280px) {
    .sb_container { max-width: 1024px; }
    #seasonHome, .vidContainer, .vidGuideContainer { grid-template-columns: 32.66% 32.66% 32.66%; }
}
   
@media screen and (max-width: 1080px) {
    .sb_container { margin: 0 1em;}
}

@media screen and (max-width: 800px) {
    #lesson { padding: 1.5em; }
    #seasonHome, .vidContainer, .vidGuideContainer { grid-gap: 1em 2%; grid-template-columns: 49% 49%; }
    .vidMatContainer { grid-gap: 0.5em; grid-template-columns: 100%; }
    .sb_lessonCover { grid-template-columns: 100%; grid-template-rows: auto auto; }
    .sb_lessonCover .info { padding: 1em 0.5em; }
}

@media screen and (max-width: 600px) {

    #lesson { padding: 1em; }
    #seasonHome, .vidContainer { grid-template-columns: auto; }
    .sb_lessonCover .info .title { font-size: 1.5em; }

    .sectionTitle { font-size: 1.5em; }
    
}


footer { margin:3em 0 0 0; font-size:0.85em; }

footer img { width:110px; margin-bottom:0.5em; }
footer .version { padding:1em 0 0.5em 0; }
footer a:hover { text-decoration:underline; }