@import url('https://fonts.googleapis.com/css?family=Roboto:400,700&subset=latin-ext');


body { margin:0; font-family: 'Roboto', sans-serif; font-weight: 400; font-size:12px; background: #fff; color: #1d3557; }
body.loginPage { background:#1d3557; padding-top:80px; }
a { color:inherit; }
h1 { font-size: 32px; font-weight: normal; margin:0 0 40px 0; padding:0; color: #1d3557; }
h1 i { margin-right: 8px; font-size: 32px; vertical-align: middle; color: #adadad; }
h2 { font-size: 22px; font-weight: bold; margin: 50px 0 30px 0; padding:0; color: #e63946; }
h3 { font-size: 16px; font-weight: bold; margin: 30px 0 15px 0; padding:0; color: #000; }
hr { height:5px; background: #1d3557; margin:30px 0; border:none; }
p, ul, ol { margin:0 0 15px 0; }
ul, ol { padding: 0 0 0 40px; }


#hpLay { display: flex; }
#hpLay > aside { width: 280px; background: #1d3557; color:#fff; position: relative; }
#hpLay > .main { width: 1px; flex-grow: 1; overflow-x: auto; }
#hpLay > .main > header { background: #f8f8f8; padding: 18px 50px; display: flex; align-items: center; flex-wrap: wrap; justify-content: space-between; position: relative; z-index: 10; }
#hpLay > .main > main { padding: 40px 50px; }

#adminNav { width: 280px; box-sizing: border-box; display: flex; flex-direction: column; position: sticky; left: 0; top: 0; height: 100vh; overflow-y: auto; z-index: 99; }
#adminNav .spaceReserve { height: 1px; flex-grow: 1; }
#adminNav .search { margin: 0 18px 18px 18px; height: 34px; border-radius: 3px; background: #fff; display: flex; }
#adminNav .search input { width:100%; box-sizing: border-box; height: 34px; line-height: 34px; padding:0 15px; border: none; background: transparent; width: 1px; flex-grow: 1; }
#adminNav .search button { width: 34px; background: transparent; color: #a7d9dc; padding: 0; }

#adminNav > header { display: flex; align-items: center; justify-content: space-between; margin: 18px; }
#adminNav > header .l { display: flex; }
#adminNav > header a { text-decoration: none; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; }
#adminNav > header a:hover { color: #e63946; }
#adminNav > header img { height: 16px; }

#adminNav ul { list-style: none; margin:0; padding:0; }
#adminNav ul ul { display:none; }
#adminNav li { display: block; }
#adminNav .row { display: flex; align-items: flex-start; }
#adminNav .row > a { width: 1px; flex-grow: 1; display: flex; align-items: center; min-height: 40px; box-sizing: border-box; padding: 4px 18px; text-decoration: none; position: relative; }
#adminNav .row > a small { display: block; font-size: 10px; color: #adadad; }
#adminNav .row > button { height: 40px; width: 40px; background: transparent; border:none; border-left: 1px solid rgba(255,255,255,0.15); padding: 0; }
#adminNav .row > button:hover { background:#e63946; }
#adminNav .row > button::before { display: inline-block; content: ''; width: 6px; height: 6px; border-width: 2px 2px 0 0; border-style: solid; border-color: #fff; transform: rotate(45deg); transition: transform 200ms; }
#adminNav li.revealed > ul { display:block; }
#adminNav li.revealed > .row > button::before { transform: rotate(135deg); }
#adminNav li.active > .row > a,
#adminNav .row > a:hover { background:#e63946; color:#fff; }
#adminNav li.lvl2 > .row > a { padding-left: 30px; }
#adminNav li.lvl3 > .row > a { padding-left: 40px; }
#adminNav li.lvl4 > .row > a { padding-left: 60px; }
#adminNav li.lvl5 > .row > a { padding-left: 80px; }
#adminNav li.lvl6 > .row > a { padding-left: 90px; }
#adminNav a i { margin-right: 10px; font-size:16px; width:20px; text-align: center; }

#adminNav hr { height: 1px; border: none; margin: 10px 18px; background: rgba(255,255,255,0.15); }
#adminNav .h { color: #adadad; margin: 10px 18px; }
#adminNav .about { text-align: center; color: #fff; line-height: 1.5em; margin-bottom: 30px; opacity: 0.5; }
#adminNav .about img { height: 40px; }
#adminNav .about a { text-decoration: none; }

#adminNavOpenBtn { display: none; height: 46px; padding: 0 22px; color: #fff; background: #1d3557; margin-right: 20px; }
#adminNavOpenBtn::before { display: inline-block; vertical-align: middle; content: ''; width: 20px; height: 3px; background: #fff; margin-right: 11px; box-shadow: 0 6px #fff, 0 -6px #fff; position: relative; top: -1px; }
#adminNavCloseBtn { display: none; align-self: flex-end; width: 40px; height: 40px; padding: 0; color: #fff; font-size: 20px; }
#adminNavCloseOverlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255,255,255,0.8); z-index: 99; }

#hpLay > .main > header .path { width: 1px; flex-grow: 1; display: flex; flex-wrap: wrap; align-items: center; font-size: 16px; }
#hpLay > .main > header .path a { color: inherit; text-decoration: none; margin: 5px 10px 5px 0; display: flex; align-items: center; }
#hpLay > .main > header .path a:hover { color: #e63946; }
#hpLay > .main > header .path a::after { display: inline-block; content: ''; width: 6px; height: 6px; border-width: 1px 1px 0 0; border-style: solid; border-color: #adadad; transform: rotate(45deg); margin-left: 5px; }
#hpLay > .main > header .path i { font-size: 16px; margin-right: 8px; color: #adadad; }
#hpLay > .main > header .path .here { color: #adadad; }

#hpLay > .main > header .user { margin-left: 80px; position: relative; }
#hpLay > .main > header .user > button { background: transparent; color: #1d3557; font-weight: 400; padding:0 18px; outline: none; font-size: 16px; height:40px; }
#hpLay > .main > header .user > button:hover { color: #e63946; }
#hpLay > .main > header .user > button i { font-size: 16px; margin-right: 8px; color: #adadad; width: 20px; text-align: center; }
#hpLay > .main > header .user > button:after { display: inline-block; content: ''; width: 6px; height: 6px; border-width: 1px 1px 0 0; border-style: solid; border-color: #1d3557; transform: translate(0, -4px) rotate(135deg); margin-left: 5px; }
#hpLay > .main > header .user > .dropdown { display: none; position: absolute; top: 100%; right: 0; width: 150px; min-width: 100%; padding:0; margin:0; list-style: none; background: #f8f8f8; color: #1d3557; box-shadow: 0 3px 3px rgba(0,0,0,0.5); }
#hpLay > .main > header .user > .dropdown li { padding: 0; margin: 0; }
#hpLay > .main > header .user > .dropdown a { display: flex; align-items: center; text-decoration: none; padding:4px 18px; min-height: 32px; }
#hpLay > .main > header .user > .dropdown a:hover { background: #e63946; color: #fff; }
#hpLay > .main > header .user > .dropdown a i { font-size: 16px; margin-right: 8px; width: 20px; text-align: center; }
#hpLay > .main > header .user.dropped > .dropdown { display: block; }

#loginContainer { width:400px; max-width:90%; position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); }
#loginContainer h1 { color:#fff; text-decoration:none; font-size:30px; text-align:center; display:block; margin-bottom:25px; }
#loginContainer h1 a { text-decoration: none; color: inherit; }
#loginContainer .loginBox { background:#fff; padding:20px; width:250px; max-width:100%; margin:0 auto; }
#loginContainer .formItem { display:block; }
#loginContainer .formItem_label,
#loginContainer .formItem_input { width:100%; text-align: left; font-weight: normal; margin:5px 0; }
#loginContainer .buttons { border: none; text-align: center; }
#loginContainer .buttons button { width:100%; }
#loginContainer .buttons a { display: block; background: #A5A5A5; font-size: 14px; color: #fff; padding: 10px 0; text-decoration: none; }
#loginContainer .buttons span { margin:10px 0; display: block; }

@media only screen and (max-width: 1200px) {
  #hpLay > aside { position: fixed; left: -280px; top: 0; transition: left 500ms; z-index: 99; }
  #hpLay.menuShow > aside { left: 0px; }
  #hpLay.menuShow #adminNavCloseOverlay { display: block; }
  #hpLay > .main > header,
  #hpLay > .main > main { padding:20px; }
  #adminNavCloseBtn { display: inline-block; }
  #adminNavOpenBtn { display: inline-block; }
}
@media only screen and (max-width: 800px) {
  #hpLay > .main > header .path { order: 10; width: 100%; margin-top: 18px; }
  #hpLay > .main > header .user { margin: 0; }
  #hpLay > .main > header .user > button i { margin-right: 0; }
  #hpLay > .main > header .user .name { display: none; }
}

@media print {
  #hpLay > aside,
  #hpLay > .main > header,
  .toolbar { display:none; }
  #hpLay > .main > main { padding: 0 }
}