header {padding: 0; position: fixed; top: 0; left: 0; width: 100%; color: var(--black); border-bottom: 1px solid var(--border); height: 90px; z-index: 100}
html.website header {background-color: var(--white); border: none; position: unset; top: 0; left: 0;}

header .center-main {height: 100%; padding: 25px 0; display: none;}
body.loggedin header .center-main,
html.website body header .center-main {display: block}
header .center-main .header-left {float: left; height: 100%}
header .center-main .header-right {float: right; height: 100%}
header .center-main .header-right .search-field,
header .center-main .header-right .notifications,
header .center-main .header-right .profile {display: inline-block;}

main,
aside {height: 100%; transition: width var(--animtime) ease-in-out, margin var(--animtime) ease-in-out, left var(--animtime) ease-in-out, right var(--animtime) ease-in-out; position: relative;}
main > section {height: 100%; overflow-y: auto;}
aside .aside-inner {height: 100%; overflow-y: auto;}
main {overflow: hidden; margin-left: 40px; width: calc(100% - 80px)}
aside {width: 60px; background-color: var(--sidebar); height: calc(100vh - 47px); position: fixed; top: 0; z-index: 1000;}
  aside .aside-main {}
  aside.right .aside-main {height: 100%;}
aside.left {border-right: 1px solid var(--border); left: 0}
aside.right {border-left: 1px solid transparent; right: 0; display: none; background-color: transparent; transition: all var(--animtime)}
aside.right .aside-inner {opacity: 0; transition: opacity var(--animtime)}
body.loggedin aside.right {display: block}


header main,
header aside {border: none}

header main {overflow: visible; display: inline-block; vertical-align: middle; padding: 0 60px}
html.website header main {padding: 0 30px; margin-left: 40px}


aside.left {padding: 0 16px 0 16px}
aside.right {padding: 0 16px 0 16px}

body.left_sidebar aside.left,
body.left_sidebar_mobile aside.left {width: var(--leftsidebar)}
body.right_sidebar aside.right,
body.right_sidebar_mobile aside.right {width: var(--rightsidebar); border-left: 1px solid var(--border); background-color: var(--sidebar);}

body.right_sidebar aside.right .aside-inner,
body.right_sidebar_mobile aside.right .aside-inner {opacity: 1}

body.left_sidebar main,
body.left_sidebar header main {width: calc(100% - var(--leftsidebar) - 60px); margin-left: var(--leftsidebar)}
body.right_sidebar main,
body.right_sidebar header main {width: calc(100% - var(--rightsidebar) - 60px)}
body.left_sidebar.right_sidebar main,
body.left_sidebar.right_sidebar header main {width: calc(100% - (var(--leftsidebar) + var(--rightsidebar))) }


header .logo,
aside .logo {width: 100%; height: 80.5px; padding: 27px 0; background: transparent url(../images/logo.png) 14px 50% / 126px 26.5px no-repeat; margin: 0 0 33px 0}
html.website header .logo {padding: 0; width: 106px; height: 44px; margin: 0; background-position: 0 50%; background-image: url(../images/QDU-logo.png); background-size: 106px 44px; float: left}

.main-container {overflow: hidden; width: 100%; height: calc(100vh - 140px); position: relative; top: 90px;}
.main-container main {padding: 30px 30px}
html.website .main-container {top: 0; height: auto}
html.website .main-container main {padding: 50px 30px 0 30px; max-width: 1100px;}
html.website .main-container main .main-inner {padding: 50px 30px; max-width: 1100px; background-color: var(--white)}

html.website .main-container {background-color: var(--background)}


body.mobile aside.left {left: -60px;}
body.mobile aside.right {right: -60px;}

body.mobile.left_sidebar_mobile aside.left {left: calc(-1 * var(--leftsidebar));}
body.mobile.right_sidebar_mobile aside.right {right: calc(-1 * var(--rightsidebar));}

body.mobile aside.left .collapse {opacity: 1; transform: rotate(180deg) !important; right: -40px; transition: var(--animtime) all; width: 30px; height: 30px; top: 5px;}
body.mobile aside.right .collapse {opacity: 1; left: -40px; top: 0; transition: var(--animtime) all;  width: 30px; height: 30px; top: 5px;}

body.mobile.left_sidebar_mobile aside.left {left: 0}
body.mobile.right_sidebar_mobile aside.right {right: 0}

body.mobile.left_sidebar_mobile aside.left .collapse {opacity: 1; transform: rotate(0deg) !important; right: -20px; width: 55px; height: 55px; top: 20px;}
body.mobile.right_sidebar_mobile aside.right .collapse {opacity: 1; left: -20px; width: 55px; height: 55px; top: 20px;}



.extra {position: fixed; right: -400px; width: 400px; transition: all var(--animtime); background-color: var(--white); height: 100vh; top: 0; z-index: 10000; overflow: scroll}
.extra .extra-inner {padding: 100px 20px 100px 20px;}
.extra.loaded {right: 0px;}
.extra .collapse {cursor: pointer; width: 40px; height: 40px; position: absolute; top: 10px; left: 10px; background: transparent url(../images/cross-icon.png) 50% 50% / 100% no-repeat;}
.extra h3 {margin: 0 0 4px 0}
.extra input {margin: 0 0 14px 0 !important}
.extra .block-wrapper {margin-bottom: 40px}



footer {padding: 10px; position: fixed; bottom: 0; left: 0; width: 100%; background-color: var(--trim); color: var(--white); z-index: 20; overflow: hidden; z-index: 3000}
  footer .info {float: left; border-radius: 4px;  padding: 5px 10px}
  footer .logged-in-notice {float: left; margin-left: 34px; border-radius: 4px; background-color: var(--green); color: var(--white); padding: 5px 20px; display: none}
  body.is_mimicked footer .logged-in-notice {display: block;}
  footer .loader-animation {float: right; width: 32px; height: 27px; background: transparent url(../images/loader.png) 50% 50% / 27px 27px no-repeat; opacity: 0; transition: var(--animtime) opacity}
  body.loading footer .loader-animation {opacity: 1}

html.website footer {position: unset; bottom: unset; left: unset; background-color: var(--dark-grey)}
 html.website  footer .info {}
 html.website  footer .loader-animation {}

.loader {position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: none; z-index: -1; opacity: 0; transition: 5s all; background-color: transparent; background: var(--white-transparent) url(../images/loader-large.gif) 50% 50% / 100px no-repeat;}
body.loading:not(.is-system-call) .loader {display: block; z-index: 10000; opacity: 1;}



.mobile-top-bar {height: 40px; position: fixed; top: 0; left: 0; width: 100%; background-color: var(--trim)}

.form-row {display: grid; gap: 10px; grid-template-columns: 1fr;}

.section {padding: 30px;}
.section.white {background: white;}

.grid-layout {display: grid;}
.gtc-1, .cards.gtc-1 {grid-template-columns: 1fr;}
.gtc-2, .cards.gtc-2 {grid-template-columns: 1fr 1fr;}
.gtc-3, .cards.gtc-3 {grid-template-columns: 1fr 1fr 1fr;}
.gtc-4, .cards.gtc-4 {grid-template-columns: 1fr 1fr 1fr 1fr;}
.gtc-5, .cards.gtc-5 {grid-template-columns: 1fr 1fr 1fr 1fr 1fr;}
.gtc-6, .cards.gtc-6 {grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;}
.gtc-1-1 {grid-template-columns: 1fr 1fr;}
.gtc-1-2 {grid-template-columns: 1fr 2fr;}
.gtc-1-3 {grid-template-columns: 1fr 3fr;}
.gtc-1-4 {grid-template-columns: 1fr 4fr;}
.gtc-2-1 {grid-template-columns: 2fr 1fr;}
.gtc-2-2 {grid-template-columns: 2fr 2fr;}
.gtc-2-3 {grid-template-columns: 2fr 3fr;}
.gtc-2-4 {grid-template-columns: 2fr 4fr;}
.gtc-3-1 {grid-template-columns: 3fr 1fr;}
.gtc-3-2 {grid-template-columns: 3fr 2fr;}
.gtc-3-3 {grid-template-columns: 3fr 3fr;}
.gtc-3-4 {grid-template-columns: 3fr 4fr;}
.gtc-4-1 {grid-template-columns: 4fr 1fr;}
.gtc-4-2 {grid-template-columns: 4fr 2fr;}
.gtc-4-3 {grid-template-columns: 4fr 3fr;}
.gtc-4-4 {grid-template-columns: 4fr 4fr;}

.grid {font-size: 0}

.grid > .grid-block,
.grid-float-wrapper > .grid-float {font-size: 1rem; padding: 15px 30px; display: inline-block; vertical-align: top}
.grid-float-wrapper > .grid-float {padding: 0}

form.grid > .grid-block {padding: 10px 20px;}
  .grid > .grid-block > .grid-block-inner {}

.grid > .grid-block-d-1   {width: calc(100% / (12 / 1 ) - 1px)}
.grid > .grid-block-d-2   {width: calc(100% / (12 / 2 ) - 1px)}
.grid > .grid-block-d-3   {width: calc(100% / (12 / 3 ) - 1px)}
.grid > .grid-block-d-4   {width: calc(100% / (12 / 4 ) - 1px)}
.grid > .grid-block-d-5   {width: calc(100% / (12 / 5 ) - 1px)}
.grid > .grid-block-d-6   {width: calc(100% / (12 / 6 ) - 1px)}
.grid > .grid-block-d-7   {width: calc(100% / (12 / 7 ) - 1px)}
.grid > .grid-block-d-8   {width: calc(100% / (12 / 8 ) - 1px)}
.grid > .grid-block-d-9   {width: calc(100% / (12 / 9 ) - 1px)}
.grid > .grid-block-d-10  {width: calc(100% / (12 / 10) - 1px)}
.grid > .grid-block-d-11  {width: calc(100% / (12 / 11) - 1px)}
.grid > .grid-block-d-12  {width: calc(100% / (12 / 12) - 1px)}


@media(max-width: 1024px){
  .grid > .grid-block-t-1   {width: calc(100% / (12 / 1 ) - 1px)}
  .grid > .grid-block-t-2   {width: calc(100% / (12 / 2 ) - 1px)}
  .grid > .grid-block-t-3   {width: calc(100% / (12 / 3 ) - 1px)}
  .grid > .grid-block-t-4   {width: calc(100% / (12 / 4 ) - 1px)}
  .grid > .grid-block-t-5   {width: calc(100% / (12 / 5 ) - 1px)}
  .grid > .grid-block-t-6   {width: calc(100% / (12 / 6 ) - 1px)}
  .grid > .grid-block-t-7   {width: calc(100% / (12 / 7 ) - 1px)}
  .grid > .grid-block-t-8   {width: calc(100% / (12 / 8 ) - 1px)}
  .grid > .grid-block-t-9   {width: calc(100% / (12 / 9 ) - 1px)}
  .grid > .grid-block-t-10  {width: calc(100% / (12 / 10) - 1px)}
  .grid > .grid-block-t-11  {width: calc(100% / (12 / 11) - 1px)}
  .grid > .grid-block-t-12  {width: calc(100% / (12 / 12) - 1px)}
}


@media(max-width: 767px){
  .grid > .grid-block-m-1   {width: calc(100% / (12 / 1 ) - 1px)}
  .grid > .grid-block-m-2   {width: calc(100% / (12 / 2 ) - 1px)}
  .grid > .grid-block-m-3   {width: calc(100% / (12 / 3 ) - 1px)}
  .grid > .grid-block-m-4   {width: calc(100% / (12 / 4 ) - 1px)}
  .grid > .grid-block-m-5   {width: calc(100% / (12 / 5 ) - 1px)}
  .grid > .grid-block-m-6   {width: calc(100% / (12 / 6 ) - 1px)}
  .grid > .grid-block-m-7   {width: calc(100% / (12 / 7 ) - 1px)}
  .grid > .grid-block-m-8   {width: calc(100% / (12 / 8 ) - 1px)}
  .grid > .grid-block-m-9   {width: calc(100% / (12 / 9 ) - 1px)}
  .grid > .grid-block-m-10  {width: calc(100% / (12 / 10) - 1px)}
  .grid > .grid-block-m-11  {width: calc(100% / (12 / 11) - 1px)}
  .grid > .grid-block-m-12  {width: calc(100% / (12 / 12) - 1px)}
}

.grid-float-wrapper {overflow: hidden}
.grid-float {float: left; margin: 0 2% 10px 0;}
.grid-float-6 {width: 49%}
.grid-float-4 {width: 31.33%}
.grid-float-6:nth-child(2n) {margin-right: 0}
.grid-float-6:nth-child(2n + 1) {clear: both}

.grid-float-6 {margin-right: 0}
.grid-float-6:nth-child(2n) {padding-left: 1%}