/* SR Site CSS - New Version (by Dylan) */

#page { position: relative; width: 100%; height: 100%; }
#page * { box-sizing: border-box; }

/* topbar - sidebar-toggle, brand, topnav, mininav-toggle, mininav, logout */
#topbar { position: fixed; top: 0; left: 0; width: 100%; height: 50px; color: white; background-color: var(--left-nav-background); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); overflow: hidden; z-index: 100; }
#topbar * a { transition: color 200ms, background-color 200ms; }
#sidebar-toggle { position: absolute; top: 0; left: 0; display: table; width: 50px; height: 50px; text-align: center; z-index: 101; }
#sidebar-toggle:hover { cursor: pointer; }
#sidebar-toggle i { display: table-cell; font-size: 24px; vertical-align: middle; }
#brand { position: absolute; top: 0; left: 50px; display: table; width: 170px; height: 50px; font-size: 20px; text-align: center; border-left: 1px solid #737373; box-shadow: -1px 0 0 #737373 inset; }
#brand a { display: table-cell; width: 100%; height: 100%; color: white; text-decoration: none; vertical-align: middle; }
#topnav { position: absolute; top: 0; left: 220px; display: none; height: 50px; overflow: hidden; }
#topnav a { display: inline-block; padding: 15px 18px; color: white; text-decoration: none; }
#mininav-toggle { position: absolute; top: 0; left: 220px; display: table; width: 50px; height: 50px; text-align: center; z-index: 101; }
#mininav-toggle:hover { cursor: pointer; }
#mininav-toggle i { display: table-cell; font-size: 24px; vertical-align: middle; }
#mininav { position: absolute; top: 50px; left: 50px; width: 220px; flex-direction: column; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); transition: all ease 250ms; -webkit-transition: all ease 250ms; z-index: 200; }
#mininav a { display: block; padding: 15px 20px; color: white; background-color: var(--left-nav-background); text-decoration: none; border-top: 1px solid #737373; z-index: 200; }
#logout { position: absolute; top: 0; right: 0px; display: table; padding: 15px 18px; color: white; background-color: var(--left-nav-background); border-left: 1px solid #737373; text-decoration: none; transition: color 200ms, background-color 200ms; -webkit-transition: color 200ms, background-color 200ms; float: right; }
/* #logout i { display: table-cell; font-size: 24px; vertical-align: middle; } */
#logout span { display: table-cell; vertical-align: middle; }
#appSwitcher { display:none; cursor:pointer; position: absolute; top: 0px; right: 0px; padding: 15px; float: right; border-left: 1px solid #737373; width: 50px; height: 50px;}

/* wrapper & sidebar/content */
#wrapper { display: flex; width: 100%; min-height: 100vh; padding-top: 50px; overflow-x: hidden; overflow-y: auto; }

#sidebar { position: relative; width: 220px; padding-top: 16px; color: white; background-color: var(--left-nav-background); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); flex-shrink: 0; transform: translate(-100%, 0); transition: all ease 333ms; -webkit-transition: all ease 333ms; overflow: auto; z-index: 50; }
#sidebar.open { transform: translate(0, 0); }
#sidebar-header { margin-bottom: 16px; padding: 32px 16px 16px; background-color: var(--left-nav-block); }
#sidebar-header img { display: block; width: 80px; height: 80px; margin: 0 auto; }
#loggedin { display: block; width: 100%; padding-top: 16px; font-size: 85%; text-align: center; }
#sidebar a { display: flex; width: 100%; margin-bottom: 6px; padding: 15px 20px; color: white; text-decoration: none; background-color: var(--left-nav-block); }
#sidebar a i { padding-top: 2px; padding-right: 10px; flex-shrink: 0; vertical-align: middle; }
#sidebar::-webkit-scrollbar { display: none; }  /*Hide scrollbar for Chrome, Safari and Opera*/
#sidebar { -ms-overflow-style: none; }  /*Hide scrollbar for IE and Edge*/

#content { width: 100%; flex-grow: 1; flex-shrink: 0; transform: translate(-220px, 0); } /* transition: all ease 500ms; -webkit-transition: all ease 500ms; */
#content.slide { width: calc(100% - 220px); transform: translate(0, 0); }
#content-wrap { width: 100%; padding: 15px 15px 0; overflow: auto; }
.content-header { margin-top: 0; margin-bottom: 20px; padding: 30px 15px 25px; font-size: 24px; font-weight: bold; color: var(--main-header); line-height: 18px; border-top: 1px solid #e6e6e6; border-bottom: 1px solid #e6e6e6; }
.content-header span { font-size: 14px; font-weight: normal; }
#content-foot { margin-top: 25px; padding: 50px 0; font-size: 16px; font-style: italic; text-align: center; border-top: 1px solid #e6e6e6; }
.content-sub-header {
	padding: 0px 15px 25px;
	font-size: 14px;
	font-weight: normal;
	color: var(--main-header);
}
/* current navigation item(s) selected */
a.nav-selected { color: var(--primary-color) !important; background-color: white !important; border: none !important; }

/* Media Queries */
@media screen and (max-width: 350px) {
	#brand { width: 140px; font-size: 16px; }
	#sidebar-toggle i, #mininav-toggle i { font-size: 22px; }
	#mininav-toggle { left: 190px; }
	#mininav { left: 20px; }
}
@media screen and (max-width: 768px) {
	#sidebar { position: fixed; top: 0; left: 0; visibility: hidden; height: 100%; max-height: calc(100%); padding-top: 66px; }
	#content { width: 100%; transform: translate(0, 0); }
}
@media screen and (min-width: 1025px) {
	/* a:hover */
	#topbar * a:hover, #logout:hover, #sidebar a:hover { color: var(--primary-color); background-color: white; }
}
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
	/* IE10+ CSS styles go here */
	#page { width: calc(100% - 16px); }
	#topbar { width: calc(100% - 16px); }
}


.app-switcher-modal {
    display: none;
    position: fixed;
    z-index: 999;
    border-radius: 10px;
    background-color: #fff;
    right: 10px;
    top: 52px;
    width: 260px;
    height: 335px;
    overflow: auto;
    box-shadow: inset 0 3px 6px rgba(0,0,0,0.16), 0 4px 6px rgba(0,0,0,0.45);
}

.app-switcher-modal-content {
    position: relative;
    background-color: #fefefe;
    margin: auto;
    padding: 0;
    border: 1px solid #e6e6e6;
    width: 100%;
    height: 100%;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
}
.app-switcher-modal-header {
    padding: 2px 16px;
    border-bottom: 1px solid #e6e6e6;
    color: #444;
}

.app-switcher-modal-body {
    padding: 2px 16px;
}

.as-row {
    width: 100%;
    padding: 10px 0px;
    color: #333;
    font-size: 12px;
}
.asr-c1 {
    width:20%;
}
.asr-c2 {
    width: 40%;
    padding-left: 10px;
}
.asr-c3 {
    width: 35%;
    text-align: right;
    text-decoration: underline;
}
.asr-c3>a {
    color: #333;
    cursor: pointer;
    text-decoration: underline;
}