body {
    position:fixed;
    background:#f4f4f4; color: var(--dark-text);
    margin:0px; text-align: center;
    width: 100%; height: 100%;
    font-family: 'Sukhumvit Set', 'Thai Sans Neue', 'Kanit', sans-serif;
}

body.fixed-nav {
    display: grid;
    grid-template-rows: var(--nav-height) auto;
}

/* NAV */
nav { z-index: 990; }
nav .wrap { margin: 0 1em; }
nav .logo { height: 40px; margin-right: 0.5em; margin:0.75em; }
nav .churchTitle {
    font-weight: bold; font-size: 1.5em; color: var(--pri-color);
    transform: translateY(3px);
}

/* The dropdown container */
.nav-dropdown { float: left; overflow: hidden;
    /* cursor: pointer; */
}
/* Dropdown button */
.nav-dropdown .dropbtn {
    color: var(--accent-color);
    font-size: 16px; border: none; outline: none;
    padding: 14px 12px; background-color: inherit;
    font-family: inherit; /* Important for vertical align on mobile phones */
    margin: 0; /* Important for vertical align on mobile phones */
}
/* Add a red background color to navbar links on hover */
.nav-dropdown a:hover, .nav-dropdown:hover .dropbtn { background-color: rgba(0,0,0,0.1); }

/* Dropdown content (hidden by default) */
.nav-dropdown-content {
    display: none;
    position: absolute;
    background: var(--white);
    color: var(--dark-text);
    /* margin-top: 50px;  */
    min-width: 160px;
    box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.3); z-index: 1;
}
/* Links inside the dropdown */
.nav-dropdown-content a {
    float: none;
    /* color: rgba(255,255,255,0.8); */
    height: auto;
    /* background-color: rgba(0,0,0,0.1); */
    padding: 1em;
    text-decoration: none; display: block;
    text-align: left; cursor: pointer; line-height: 1.5;
}
/* Add a grey background color to dropdown links on hover */
.nav-dropdown-content a:hover { background-color: rgba(0,0,0,0.1); color: var(--accent-color); }
/* Show the dropdown menu on hover */
/* .nav-dropdown:hover .nav-dropdown-content .nav-dropdown-content { display: block; } */
.nav-dropdown:hover .nav-dropdown-content { display: block; }
/* .nav-dropdown:hover { background: #000; } */

/* End NAV */

/* main */

main {
    margin: 0;
    padding: 0;
    position: fixed;
    width: 100%;
    height: calc(100% - var(--nav-height));
    overflow: hidden;
}

main .scroll {
    width: 100%; height: 100%; overflow-y: scroll;
    /* padding-right: 17px; */
}

.badge {
    font-weight: bold; display: inline-block;
    font-size:0.65em;
    color: var(--white); width: fit-content; padding: 0 0.5em; line-height: 1.75;
    border-radius: 0.35em; margin-bottom: 0.35em; background-color: #00A1EB; margin-right: 0.5em;
}

.floatBtnBox { position: fixed; bottom: 1em; right: 1em; }
#memberRecheck {
    width: 100px; border: 1px solid var(--gray); 
    background: var(--success-color-lite); margin: 1em auto;
}
#memberCheckBg {
    height: 5px;
    background-color: var(--success-color); width: 0%;
}

.nodata { padding:2em; font-weight: bold; color:var(--gray); width: max-content; }
.nodata.inline { display: grid; grid-template-columns: auto auto ; }
.nodata.inline div { width: max-content; }


.page-fixed-bar-toolsbar {
    /* width: calc(100% - var(--sidenav-width)); */
    width:100%;
    position:fixed;
    padding-top: 0.5em;
    /* border-bottom: 1px solid var(--gray-lite) ; */
    z-index: 10;
}

.page-fixed-bar-toolsbar .bar {
    background-color: var(--white); border-bottom: 1px solid var(--gray-lite);
}

.page-fixed-bar-toolsbar .wrap { margin:0 2em; }
.page-fixed-bar .pageBody {
    margin-top: calc(var(--nav-height) + 3em);
}

/* Home */

#churchhome { margin: 1em auto; max-width: 600px;}

.homeCard {
    border-radius: 1em; color: var(--white); margin: 1em; text-align: left; 
    background-color: var(--hl-color); cursor: pointer;
}
.homeCard .wrap { background-color: #00000000; padding: 1em 1.5em; border-radius: 1em; text-shadow: 0px 0px 2px #333; }
.homeCard .wrap:hover { background-color: #00000011; text-shadow: 0px 0px 4px #333; }
.homeCard:hover { box-shadow: var(--shadow-lite-3); }
.homeCard .title { font-size: 1.75em; font-weight: bold; }
.homeCard .tag { font-size: 1em; }
.homeCard i { font-size: 4em; margin: 0.25em 0; }

/* GIVE */

#giveFloaBtn { 
    position: fixed; background-color: var(--pri-color);
    bottom: 1em; right: 1em;
}

/* FEED */

    #feedList { max-width: 600px; margin: 1em auto;; }
    #feedList li { background: var(--white); margin: 1em; text-align: left; box-shadow: var(--shadow-lite-1); border-radius: 0.5em; overflow: hidden; }
    #feedList li:hover { box-shadow: var(--shadow-lite-3); }
    #feedList li .img { background: #ccc; padding-top: 56%; background-position: center center; background-size: cover; }
    #feedList li .profile-img { width:35px; height: 35px; box-shadow: var(--shadow-lite-1); }
    #feedList li .profile-text { margin:1em; }
    #feedList li .feed-img { background: #ccc; width: 100%; }
    #feedList li .feed-btn { background: #f0f0f0; width: 100%; padding:0.5em; text-align: center; }
    #feedList li .feed-btn button { background: #f0f0f0; width: 100%; padding:0.5em; text-align: center; }



/* FEED VOTE */

#feedVoteBox {  }
#feedVoteBox ul {  }
#feedVoteBox ul li {
    /* background-color: var(--gray-liter); */
    padding:0.5em; margin: 0.25em 0.5em;
    font-size: 1.25em; font-weight: bold;
    cursor: pointer;
    border-radius: 10px; border: 1px var(--accent-color) solid;
}

#feedVoteBox ul li:hover {
    /* background-color: var(--gray-lite); */
}
.feedVoteSelect {

}
.feedVoteSelect.selected {
    background-color: var(--pri-color);
    color: #fff;
}
    

/* EVENT */

#eventFloatBtn { background-color: var(--pri-color); display: none; }

#eventList { max-width: 600px; margin: 1em auto; }
#eventList li { background: var(--white); margin: 1em 0; text-align: left; box-shadow: var(--shadow-lite-1); border-radius: 0.5em; overflow: hidden; }
#eventList li:hover { box-shadow: var(--shadow-lite-3); }
#eventList li .img { background: #ccc; padding-top: 56%; background-position: center center; background-size: cover; }

#eventList li .info { padding: 1em; display: block; height: fit-content; }
#eventList li .info .material-icons { font-size:2em; color: var(--pri-color); }
#eventList li .info .title { font-size:1.25em; margin: 0em; text-align: left; font-weight: bold; color: var(--pri-color); }
#eventList li .info .date { font-size:1em; }
#eventList li .info .desc { font-size:1em; padding: 1em 0.5em 0 0.5em; }

#eventView { max-width: 600px; margin: 1em auto; background: var(--white); border-radius: 0.5em; box-shadow: var(--shadow-lite-1); overflow: hidden; }

#eventView #eventEmbed { border-radius: 0.5em; overflow: hidden; }

#eventView .img { padding-top: 56%; background-position: center center; background-size: cover; }

#eventView .livestatus { padding: 0.75em 1em; color: var(--white); font-size: 1.25em; text-align: center; font-weight: bold; text-shadow: var(--shadow-lite-3); }

#eventView .info { border-bottom: 1px solid var(--gray-lite); padding: 1em; display: block; height: fit-content; text-align: left; }
/* #eventView .info .livestatus { padding: 0.75em 1em; font-size: 1.25em; text-align: center; font-weight: bold; border-radius: 0.5em; text-shadow: var(--shadow-lite-3); }
#eventView .info .livestatus.live { border: 1px solid #00aa00; color: #00aa00; background: #00aa0011; }
#eventView .info .livestatus.check { border: 1px solid #d7a101; color: #d7a101; background: #fff70019; } */

#eventView .info .icon { padding: 0.75em 0; color: var(--pri-color); }
#eventView .info .title { font-size:1.25em; margin: 0em; text-align: left; font-weight: bold; color: var(--pri-color); }
#eventView .info .date { font-size:1em; }
#eventView .info .evstatus { padding: 0.75em 0; font-weight: bold; }
#eventView .info .desc { padding: 0.75em 0; text-align: left; font-weight: bold; }

#eventView .link { border-bottom: 1px solid var(--gray-lite); }
#eventView .link button { font-size:1em; width: 75%; margin: 1em; }

#eventView .checkin { border-bottom: 1px solid var(--gray-lite); }
#eventView .checkin label { margin: 1em 0; }
#eventView .checkin button { font-size:1em; width: 80%; margin: 0.5em; }
#eventView .detail { text-align: left; }

#eventView #eventEmbed { background: #000; }
#eventView #eventEmbed .player { background: #000; }


#eventView #eventGiveBox { border-bottom: 1px solid var(--gray-lite); display: block; height: fit-content; }
#eventView #eventGiveBox button { font-size:1em; width: 75%; margin: 1em; }
#giveModal iframe { border: none; width: 100%; height: 100%; }


.eventJobCard { box-shadow: var(--shadow-lite-2); margin-bottom: 0.5em; padding: 0.5em 1em; }
.eventJobCard .desc { padding: 1em 0; }

@media screen and (max-width: 415px) {
    #eventList li .info .material-icons { font-size:1.5em; }
}

.eventCheckList {
    display: grid; grid-template-columns: 100%;
}
.eventCheckList li {
    width: 100%; height: fit-content;
}

/* MEDIA ---------------------------------------- */

.mediaCard {
    margin: 0.25em 0; background-color: var(--card-bg); cursor: pointer; box-shadow: var(--shadow-lite);
    background: var(--white); width: auto; display: grid;
}
.mediaCard.school { grid-template-columns: 170px auto 50px; }
.mediaCard.video { grid-template-columns: auto; grid-template-rows: auto 80px; }
.mediaCard.sound, .mediaCard.pdf { grid-template-columns: 120px auto 50px; }
.mediaCard .preview { width: 100%; padding: 0.5em; }

.mediaCard .preview .img { background-size: cover; display: block; width: 100%; background-position:center; }
.mediaCard.school .preview .mediaImg, .mediaCard.video .preview .mediaImg { padding-top: 56%; }
.mediaCard.sound .preview .mediaImg, .mediaCard.pdf .preview .mediaImg { padding-top: 100%; }

.mediaCard .preview .mediaImg { background-size: cover; display: block; width: 100%; padding-top: 100%; background-position:center; }

.mediaCard .icon { min-width:40px; margin:10px 10px 5px 10px; text-align:center; font-size:40px; color:var(--accent-color); } 

.mediaCard .content { padding: 0.5em; }
.mediaCard .content .title { font-size:1.25em; font-weight: bold; color: var(--hl-color); }
.mediaCard .content .capiton { font-size:0.85em; color: var(--gray-dark); }

.mediaCard .pdfViewBtn a:link { color: var(--hl-color); }
.mediaCard .pdfViewBtn a:hover { text-decoration: underline; }
.mediaCard .pdfViewBtn a:visited { color: var(--hl-color); }


/* TEAM ---------------------------------------- */

.teamCard {
    margin: 0.25em 0; background-color: var(--hl-color); cursor: pointer; box-shadow: var(--shadow-lite);
    width: auto;
    display: grid; grid-template-columns: auto 33px;
    margin:1em 0; text-align:left;
    background: var(--hl-color); color: var(--white);
}
.teamCard a:link { color: var(--white); }
.teamCard:hover { box-shadow: var(--shadow-lite-3); }
.teamCard .content { padding: 1em; }
.teamCard.selected { background: var(--hl-dark); }
.teamCard label { margin:0.5em; color: var(--gray-lite); }
.teamCard .title { margin:0.5em; font-weight: bold; color: var(--white); font-size: 1.25em; }
.teamCard .teamCard-dd-trigger { padding-left:0.5em; padding-right:0.5em; }
.teamCard.group { background: var(--hl-color); color: var(--white); }
.teamCard.group i { color:var(--lite-50); }



#teamList, #jobList {
    margin: 0 auto; max-width: 600px; padding: 1em; display: block;
}

.teamView { display:block; background:#fff; box-shadow: var(--shadow-lite-1); margin: 1em auto; width: 100%; }

.teamEventListCard { 
    display:block; background:#fff; border-top:1px solid #ccc;
    display: grid; grid-template-columns: 300px auto; grid-template-rows: auto;
}
.teamEventListCard .img { padding: 0.5em; }
.teamEventListCard .img .imgCover { width:100%; padding-top:56%; }
.teamEventListCard .content { margin:0.5em; text-align:left; }

@media only screen and (max-width: 1200px) {
    .teamEventListCard { grid-template-columns: 250px auto; }
}

@media only screen and (max-width: 800px) {
    .teamEventListCard { grid-template-columns: 200px auto; }
}

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

    .teamEventListCard { grid-template-columns: auto; grid-template-rows: auto auto ; }
    .teamEventListCard .content { margin:0.5em 1em; }

}

/* TEAM JOB ---------------------------------------- */


/* ONE --------------*/

#oneFloatBtn { background-color: var(--pri-color); display: none; }

#one { max-width: 600px; margin: 1em auto; }
#one .head { font-size: 2em; text-align: left; font-weight: bold; color: var(--accent-color); padding: 0 1em; }

#oneList { max-width: 600px; margin: 1em auto; }
#oneList li { background: var(--white); margin: 1em 0; text-align: left; box-shadow: var(--shadow-lite-1); border-radius: 0.5em; overflow: hidden; }
#oneList li:hover { box-shadow: var(--shadow-lite-3); }

#oneList li.weekCard { font-weight: bold; color: var(--accent-color); }
#oneList li.weekCard span { padding: 0.5em 1em; display: block; }


/* #oneList li .img { background: #ccc; padding-top: 56%; background-position: center center; background-size: cover; }

#oneList li .info { padding: 1em; display: block; height: fit-content; }
#oneList li .info .material-icons { font-size:2em; color: var(--pri-color); }
#oneList li .info .title { font-size:1.25em; margin: 0em; text-align: left; font-weight: bold; color: var(--pri-color); }
#oneList li .info .date { font-size:1em; }
#oneList li .info .desc { font-size:1em; padding: 1em 0.5em 0 0.5em; } */


/* UI ---------------------------------------- */

.modalLoading {
    width: 100%; height: 100%; position:absolute;
    background-color: #000000aa; color: var(--gray-lite);
    z-index: 100;
}

footer { text-align:center; }
ul.tabs { margin: 0; }

a { text-decoration: none; }
a:link { color:var(--card-link); }
a:hover { color: var(--card-link-hover); }
a:visited { color: var(--card-link); }

a:link.btn { color: var(--white); }

.btn:hover { background: var(--card-link-hover); }
    
h1, h2, h3, h4, h5, h6 { margin: 0; padding: 0; line-height: 1.5 }

h1 big { font-size: 150%; line-height: 0; text-transform: none; }
h1 small, h2 small, h3 small, h4 small, h5 small, h6 small { font-size: 60%; line-height: 0; text-transform: none; }

h1 { font-weight:200; font-size: 44px;}
h2 { font-weight:200; font-size: 37px;}
h3 { font-weight:500; font-size: 27px;}
h4 { font-weight:500; font-size: 23px;}
h5 { font-weight:900; font-size: 17px;}
h6 { font-weight:900; font-size: 14px; text-transform: uppercase; }
    
.hilight0 { background-color: #ffffff; }
.hilight1 { background-color: #F6E676; }
.hilight2 { background-color: #ADD85F; }
.hilight3 { background-color: #76E5FC; }

.success, .warning, .alert { color: var(--white); padding: 1em; }
.success { background: var(--success-color); }
.warning { background: var(--warning-color); }
.alert { background: var(--alert-color); }

.successLite, .warningLite, .alertLite { color: var(--black); padding: 1em; }
.successLite { background: var(--success-color-lite); }
.warningLite { background: var(--warning-color-lite); }
.alertLite { background: var(--alert-color-lite); }

.flexcenter {
    display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: center; align-content: stretch;
}
.flexBetween  {
    display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: top; align-content: center;    
}
.flexBetweenCenter  {
    display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: center; align-content: center;    
}
.flexLeftCenter, .leftBox {
    display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: center; align-content: stretch;        
}
.flexRightCenter, .rightBox {
    display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-end; align-items: center; align-content: stretch;
}
.flexLeft {
    display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: stretch; align-content: stretch;
}
.flexRight {
    display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-end; align-items: stretch; align-content: stretch;
}

.displaynone { display: none; }
.flex { display: flex; }