@import url('https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap');
* { margin: 0; padding: 0; border: 0; -webkit-print-color-adjust: exact !important; color-adjust: exact !important; }
img { vertical-align: middle; }
.clear { clear: both; }
html { overflow-x: hidden; }
body { width: 100vp; font-family: 'Roboto', sans-serif; font-size: 14px; color: #333; overflow-x: hidden; }
.container { padding: 0 20px; margin: 0 auto; }
header { height: 64px; background: rgba(69,90,100,1); }
header .container { display: flex; justify-content: space-between; }
header .menu { width: 44px; height: 44px; }
header .menu input { display: none; }
header .menu label { display: block; width: 44px; height: 44px; margin: 10px 0; border-radius: 22px; cursor: pointer; background: rgba(255,255,255,0.1); }
header .menu label:hover { background: rgba(255,255,255,0.2); }
header .menu label img { display: block; padding: 16px 13px; }
header .title { }
header .title span { display: block; text-align: center; font-size: 20px; line-height: 64px; color: #fff; }
header .logo { width: 44px; height: 44px; border-radius: 22px; margin: 10px 0; background: #fff; overflow: hidden; }
header .logo img { display: block; height: 44px; }
#sliding-content { background: #fafafa; transition: all 100ms ease-in-out; }
main {  }
main .title { width: 102%; margin: 0 -1%; height: 64px; box-shadow: 0 8px 6px -6px rgba(0,0,0,0.33); }
main h1 { background: rgba(255,255,255,1); line-height: 64px; margin: -64px 0 20px 0; font-weight: normal; font-size: 20px; }
main .box { padding: 20px 20px 10px 20px; margin: 0 0 20px 0; border-radius: 2px; box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2); }
main .box h2 { margin: 0 0 10px 0; padding: 0 0 10px 0; font-weight: normal; font-size: 18px; border-bottom: 1px rgba(0,0,0,0.1) solid; }
main .box table { width: 100%; border-collapse: collapse; margin: 0 0 10px 0; }
main .box table thead { font-weight: bold; }
main .box table thead tr { background: rgba(0,0,0,0.20); }
main .box table thead tr td { padding: 16px 10px; }
main .box table thead tr td.left { text-align: left; }
main .box table thead tr td.center { text-align: center; }
main .box table thead tr td.right { text-align: right; }
main .box table tbody tr:nth-of-type(odd) { background: rgba(0,0,0,0.05); }
main .box table tbody tr:nth-of-type(even) { background: rgba(0,0,0,0.10); }
main .box table tbody tr:hover { background: rgba(0,0,0,0.15); }
main .box table tbody tr td { padding: 8px 10px; }
main .box table tbody tr td.left { text-align: left; }
main .box table tbody tr td.center { text-align: center; }
main .box table tbody tr td.right { text-align: right; }
main .box table tbody tr td a { color: rgba(0,0,0,0.90); text-decoration: none; }
main .box table tbody tr td a:hover { color: rgba(0,0,0,1); }
main .box form { width: 100%; margin: 0 0 10px 0; }
main .box form fieldset { margin: 0 0 5px 0; }
main .box form fieldset legend { margin: 0 0 2px 0; }
main .box form fieldset input { box-sizing: border-box; width: 100%; padding: 5px; border: 1px rgba(0,0,0,0.1) solid; background: rgba(0,0,0,0.05); }
main .box form fieldset select { box-sizing: border-box; width: 100%; padding: 5px; border: 1px rgba(0,0,0,0.1) solid; background: rgba(0,0,0,0.05); }
main .box form fieldset textarea { box-sizing: border-box; width: 100%; padding: 5px; height: 250px; border: 1px rgba(0,0,0,0.1) solid; background: rgba(0,0,0,0.05); }
main .box button { display: block; width: 100%; padding: 10px; margin: 0 0 10px 0; color: #fff; text-decoration: none; cursor: pointer; text-shadow: 0 0 10px rgba(0,0,0,0.5); }
main .box button:nth-of-type(1) { background: rgba(66,133,244,1); }
main .box button:nth-of-type(1):hover { background: rgba(66,133,244,0.95) }
main .box button:nth-of-type(2) { background: rgba(0,0,0,0.5); }
main .box button:nth-of-type(2):hover { background: rgba(0,0,0,0.45) }
#navigation { background: #fafafa; z-index: 9999; position: fixed; top: 64px; left: 0; width: 300px; height: calc(100% - 64px); margin: 0 0 0 -300px; transition: all 100ms ease-in-out; }
nav { height: 100%; border-right: 1px rgba(0,0,0,0.10) solid; display: flex; flex-direction: column; justify-content: space-between; }
nav .top div { height: 64px; text-align: center; display: flex; flex-direction: column; justify-content: center; margin: 0 0 -10px 0; }
nav .top div span:nth-of-type(1) { font-weight: bold; }
nav .top div span:nth-of-type(2) { font-style: italic; }
nav .top hr { display: block; margin: 10px 0; height: 1px; background: rgba(0,0,0,0.10); }
nav .top ul { list-style-type: none; }
nav .top ul li { border-bottom: 1px rgba(255,255,255,0.25) solid; }
nav .top ul li:last-child { border-bottom: 0; }
nav .top ul li a { display: block; padding: 10px 20px; color: #262626; text-decoration: none; }
nav .top ul li a:hover, nav ul li a.active { background: rgba(0,0,0,0.1); }
nav .top ul li a i { margin: 0 15px 0 0; }
nav .bottom hr { display: block; margin: 10px 0; height: 1px; background: rgba(0,0,0,0.10); }
nav .bottom div { height: 64px; text-align: center; display: flex; flex-direction: column; justify-content: center; margin: -10px 0 0 0; }
nav .bottom div span a { color: #262626; text-decoration: none; }