body {
    color: #000 !important;
    background: #fff !important;
}
#account { color: #000 !important;}

#ic_navProfile { margin:10px 0; top:0; }

#pageList-dropdown li a {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#mainLoading {
    z-index: 9000;
    background-color: var(--lite-50);
    position: fixed; width: 100%; height: 100%;
    left: 0; top: 0;
}

#mainLoading .wrap {
    text-align: center;
    font-size: 1em; font-weight: bold;
    color:var(--accent-color);
}

/* customModal  */
.customModal { transition-duration: 0.25s; }
.customModalTrigger { cursor: pointer; }

.customModalOv {
    position: fixed; width: 100%; height: 100%; z-index: 9999;
    display: none;
}
.customModalOv .wrap {
    transition-duration: 0.25s; transition-property: background-color;
    background-color: none; width: 100%; height: 100%;
}
.customModalOv .wrap.active { background-color: var(--dark-50)}

#churchSelectBox {
    position: fixed; left: -300px; top: 0; z-index: 9999; height: 100%; width: 300px;
    display: grid; grid-template-rows: 80px auto;
    background-color: var(--white); box-shadow: var(--shadow-lite); 
    transition-property: left;
}
#churchSelectSearchInput { text-indent: 0.75em; border: none;}
#churchSelectBox .search { box-shadow: var(--shadow-lite); padding-top: 1em; }
#churchSelectBox .churchSelectList {
    overflow: scroll; width: 100%; height: 100%;
    overflow-y: scroll;
}
#churchSelectBox .churchSelectList ul {
    display: block; height: auto;
}


#churchSelectBox li a { color: var(--hl-color); font-weight: bold; padding:0.75em 1em; display: block; border-top: 1px solid #ddd; }
#churchSelectBox li a:hover { background-color: rgba(0, 0, 0, 0.1); }

#churchSelectBox.active {
    left: 0;
}
/* customModal  */

#sidenav-left {
    display: grid; grid-template-rows: var(--nav-height) auto  var(--nav-height);
}

.logo-container { color: var(--hl-litest) }

.consoleNevFoot {
    display: grid; grid-template-columns: auto var(--nav-height); background-color: #00000022; cursor: pointer;
}

.consoleNevFoot .sideBarBtn:hover, .consoleNevFoot .sideBarIconBtn:hover {
    background-color: #00000022;
}

.consoleNevFoot a {
    margin: 0 1em; color: var(--white); height: var(--nav-height); width: 100%;
	display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: center; align-content: stretch;
}

.consoleNevFoot .sideBarBtn i {
    margin-right: 0.75em;
}

.statGridContainer {
    display: grid; grid-gap: 1px; background-color: #cccccc; border: 1px solid #ccc; border-radius: 0.5em; overflow: hidden;
}
.statGridContainer .statGridItem { background-color: #ffffff; padding: 1em 1.5em; }
.statGridContainer.g1 { grid-template-columns: 1fr; }
.statGridContainer.g2 { grid-template-columns: 1fr 1fr; }
.statGridContainer.g3 { grid-template-columns: 1fr 1fr 1fr; }
.statGridContainer.g4 { grid-template-columns: 1fr 1fr 1fr 1fr; }
.statGridContainer.g5 { grid-template-columns: 1fr 1fr 1fr 1fr 1fr; }
.statGridContainer.g6 { grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; }
.statGridContainer.g7 { grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr; }
.statGridContainer.g8 { grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; }


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

.card { margin:0; }
.page {
    display: none;
    margin: 0;
    padding: 0;
    position: fixed;
    width: calc(100% - var(--sidenav-width));
    height: calc(100% - var(--nav-height));
    overflow: hidden;
    /* overflow-y: scroll; */
}

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

.page .pageBody, .page-fixed-bar .pageBody {
    margin:2em;
    background-color: #ccc;
}

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

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

.page wrap {
    display: flex; flex-wrap: wrap; flex-direction: row; margin:0px; overflow-y: scroll;
    margin:1em; 
    width: 100%;
}

.page centerbox {
    margin:1em 2em;
}

.page .panelBox {
    display: grid;
    grid-template-columns: var(--userPanel-width) auto;
    background: var(--white);
}

.page .panel {
    display: grid;
    height: calc(100vh - var(--nav-height));    
    grid-template-rows: var(--nav-height) auto;
    width: 100%;
    /* width: var(--userPanel-width); */
    background: var(--white);
    z-index: 4000;
    /* box-shadow: var(--shadow-lite); */
}
.page .panel .wrap {
    padding-top: 50px;    
}
.page .panel .head {
    border-bottom:1px solid #ccc;
}
.page .panel-toggleBtn { position: fixed; bottom: 1em; left:1em; }

.page .panel .body {
    padding-bottom: 20px; overflow-y: scroll;
    box-shadow: none;
}
.page .panel .margin { margin-left: 1em; margin-right: 1em; }
.page .panelBody {
    height: calc(100vh - var(--nav-height));
    width: 100%;
    overflow-y: scroll;
    /* background: var(--white); */
    /* background: #f4f4f4; */
}
.page .panelBody .subPanel {
    display: none;
}

.page .panelBody .head {
    height: var(--nav-height);
    width: 100%;
    position: fixed;
    z-index: 10;
    border-bottom:1px solid #ccc;
}

.tag {
    display: inline-block;
    height: 22 px ;
    font-size: 11px; 
    line-height: 22px;
    font-weight: 500;
    color: rgba(0, 0, 0, 0.75);
    padding: 0 11px ;
    border-radius: 9px ;
    background-color: rgba(0, 0, 0, 0.1);
    margin: 0.5em ;
}

.tag.right { margin-right: 0; }

#toolsbar {
    height: var(--nav-height);
    padding: 0 1em;
    display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: center; align-content: stretch;        

}

.toolsbar {
    display: none; height: var(--nav-height);
    align-items: center;
    padding: 0 1em;
}

.toolsbar-toggle-wrap {
    display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: center;
	align-content: stretch;
}
.toolsbarToggleBtn { display: none; }

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

.shortkey {
    /* font-weight: bold; */
    display: inline-block;
    /* font-size:0.65em; */
    /* color: var(--white); */
    width: auto; padding: 0 0.5em; line-height: 1.75;
    border-color: 1px solid var-(--gray);
    border-radius: 0.35em; margin-bottom: 0.35em; margin-right: 0.5em;
    /* background-color: #00A1EB;  */
}

/* .badge.wait {
    background-color:#00A1EB;
} */

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

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

    #toolsbar {
        height: auto; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: baseline; align-content: stretch;
    }
    .toolsbarToggleBtn { display: flex; }
    .toolsbar-toggle {
        flex-direction: column;
        flex-wrap: nowrap;
        justify-content: flex-start;
        align-items: stretch;
        align-content: stretch;

        position:absolute;

        height: auto;
        background: var(--white);
        padding: 0; margin: 0 1em;
        /* transform: translateY(var(--nav-height)); */
    }

    .toolsbar-toggle.show {
        box-shadow: var(--shadow-lite);
        border: 1px solid var(--gray-liter);
    }

    .toolsbar-toggle-wrap {

        display: none;

        padding: 1em 0 0 0;
        flex-direction: column;
        flex-wrap: nowrap;
        justify-content: flex-start;
        align-items: stretch;
        align-content: stretch;
        border-top: 1px solid var(--gray-lite);

    }
    .toolsbar-toggle-wrap a { margin: 1em 0; }
    .toolsbar-toggle-wrap.show {
        display: flex;
    }

    .page .panelBox {
        grid-template-columns: auto 0 ;
    }

    .page .panel.hide {
        position: fixed; transform: translateX(-100%);
    }


    .page-fixed-bar-toolsbar {
        width: calc(100%);
    }

}

input[disabled] {
    pointer-events: none; /* Prevent interaction with disabled inputs */
}

.filterInputBox {
    width: auto; margin:0 1em;
}
.filterInputBox .filterInput {
    width: var(--userPanel-width);    
}

.userList li { cursor: pointer; color:var(--normal-dark-text)}
.userList li:hover { background: #f4f4f4; }

#schoolBody {
    display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: stretch; align-content: stretch;
    width: auto; height:100%;
}

.schoolBox {
    height: calc(100vh - var(--nav-height));
    width: auto;
    padding: 0.5em;
}

#scCourse .wrap {
    display:inline-block; z-index:10; width:auto; vertical-align: top; padding-right: 10px; border-right: 1px solid #ccc;
}

/* NEW UI */
.tr-form-item .delFC {
    position:absolute; width:auto;
    display:none; background: var(--card-bg); 
    box-shadow: var(--shadow-lite); padding: 10px; z-index: 10;
    transform: translate(-50%, -50%);
}
/* END NEW UI */

.displaynone { display: none !important; }
.pointor { cursor: pointer; }
.hover-lite:hover {
    background-color: var(--hover-lite);
}

.liteBg { background-color: var(--lite-bg); }
.imgCover { background-repeat: no-repeat; background-size: cover; }


.modal-title { font-size: 1.5em; margin-bottom: 1em; }

/* 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, .mediaCard.video { grid-template-columns: 170px auto 50px; }
.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); }


/* MEDIA SELECT MODAL */

/* #ic_mediaSelectorModal { } */

.icMSelCard { display: grid; grid-template-columns: 75px auto; }
@media only screen and (max-width: 414px) {
    .icMSelCard { grid-template-columns: 120px auto; }
}


.ic_mediaSelectorBtnInputBox {
    background: var(--hl-litest); border-radius: 0.5em; border: 1px solid var(--gray-lite);
    overflow: hidden;
}
.ic_mediaSelectorBtnInputBox .ic_mediaSelectorBtnInputBoxButton { padding:2em; }
.ic_mediaSelectorBtnInputBox .cardBox {
    background: var(--white); display: none;
}
.ic_mediaSelectorBtnInputBox .cardBox .grip-wrappers {
    display: grid; grid-template-columns: auto 54px;
}

/* END MEDIA  */

.textEllip {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fv h1, .fv h2, .fv h3, .fv h4, .fv h5 { font-weight: bold; padding:1em 0; margin:0; }
.fv h1 { font-size: 1.75em; }
.fv h2 { font-size: 1.5em; }
.fv h3 { font-size: 1.35em; }
.fv h4 { font-size: 1.2em; }

.capitalize { text-transform:capitalize; }

.hl-text { color: var(--hl-color); }

@media only screen and (max-width: 992px) {
    .page {
        width: 100%; height: calc(100% - var(--nav-height));
    }
}

@media only screen and (max-width: 414px) {
    .container { margin: 2em auto !important; width: 100% !important; }
}


@media only screen and (min-width: 993px) {

}

.answer { font-size:1.25em; color:var(--hl-color); font-weight: bold; padding:0.5em 0; }


.collection-item .title { font-size: 1.25em; color: var(--hl-color); font-weight: bold; padding: 0.25em 0; }
.collection-item .icon {
    background: var(--hl-color); color: var(--white);
    font-size: 1.5em;
    /* width: 60px; height: 60px; */
    margin: 0 0.75em 0 0.25em;
    padding: 0.75em;
}


.tabs li.tab {
    display: inline-block;
    border-bottom: 1px solid var(--accent-color);
    color: var(--accent-color);
    line-height: 3em;
    height: 3em;
}
.tabs li.tab.active {
    background-color: var(--accent-color);
    color: var(--white) !important;
}



.tab-content {
    display: none;
}

.tabs-content {

}