html,body,#if_app{background-color:#fff;height:100%}#if_content{height:calc(100% - 100px);padding:0 2rem;overflow:hidden}aside,main{float:left;height:100%}main{width:calc(100% - 40px - 2rem);overflow:auto;position:relative}aside{width:40px;margin-right:2rem;overflow:auto;transition:width 0.15s ease}aside.hidden{width:0;margin:0}aside.hidden + main{width:100%;float:none;padding-left:0}@media (max-width:768px){#if_content{height:calc(100% - 60px - 2rem);padding:0 1rem}main{width:100%}#if_canvas{padding-left:0;width:100%}}header{height:100px;padding:0 2rem;width:100%;position:relative}header *{font-style:normal}header .l,header .r{height:100%;float:left}header .l > *,header .r > *{position:relative;transform:translateY(-50%);top:50%;display:block;float:left}header #logo{box-sizing:content-box;width:40px;float:left;margin-right:2rem}header .back{color:var(--colorPrimary);font-size:1.25rem;margin-right:0;width:18px;opacity:1;margin-right:1rem;transition:width 0.25s ease-out,opacity 0.1s}header .back.hide{width:0;opacity:0;margin-right:0}header .title,header .subtitle{font-size:1.5rem}header .title{margin-right:1rem}header .subtitle{opacity:0.618}header .r{float:right}header .tbar > *{box-sizing:content-box;display:inline-block;width:32px;margin:0 0.25rem;text-align:center;position:relative}header .tbar .fas{padding:5px;font-size:20px;opacity:0.5}header .tbar-open{opacity:0.5}header .r > *:not(.tbar){height:32px;width:32px;text-align:center;line-height:32px;margin:0 0.25rem;border-radius:50%;transition:border-radius 0.1s ease-in-out}header .r > *:not(.tbar):last-child{margin-right:0}header .avatar{background-color:var(--colorPrimary);color:#f6f6f6;cursor:pointer;text-align:center;font-size:0.85rem}header .r > *.active{border-radius:0.25rem 0.25rem 0 0}header #usermenu{background-color:var(--colorPrimary);border-radius:0.25rem;font-size:0.75rem;padding:0.5rem 0;position:absolute;top:64px;right:2rem;width:200px;z-index:100;animation:slidedown 0.2s ease-out}@keyframes slidedown{from{max-height:0}to{max-height:200px}}header #usermenu > *{display:block;color:#f6f6f6;padding:0.5rem 1rem}header #usermenu .data{font-size:1rem}header #usermenu > a:hover{background-color:#f6f6f617}header .r .tbar_open{opacity:0.5;cursor:pointer;display:none}header .r .tbar_open.active{background-color:var(--colorPrimary);color:#fff;opacity:1}@media (max-width:768px){header{height:60px;margin-bottom:2rem;padding:0 1rem;box-shadow:0 1px 9px 0 #00000017}header .l{float:left;overflow:hidden}header #logo{margin-right:1rem;padding:10px 0;width:24px}header .title{font-size:1rem;margin:0 0 0 0.5rem}header .subtitle{display:none}header .back > *{font-size:14px;padding:5px}header #usermenu{right:1rem;top:45px}header .tbar{background-color:var(--colorPrimary);position:absolute;top:74px;right:51px;z-index:100;box-shadow:10px 10px 10px #00000017;padding:1rem}header .r .tbar_open{display:inline-block}}.btns{border-top:1px solid #00000017;margin:3rem 0 2rem 0;padding-top:2rem}.btns > *{margin-bottom:1rem}@media (max-width:768px){.btns > *{display:block;width:100%}}.center_vertical_offset_header{margin-top:-100px}.height100{height:100%}.if_modal{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000017;z-index:100;animation:fadein 0.25s}.if_modal > *{background-color:#fff;border:1px solid #0000002a;border-radius:0.5rem;box-shadow:0 17px 50px 0 rgba(0,0,0,0.19),0 12px 15px 0 rgba(0,0,0,0.24);position:absolute;padding:2rem;width:500px;height:auto;max-height:calc(100% - 4rem);top:50%;left:50%;overflow:auto;transform:translate(-50%,-50%);animation:slideup 0.25s ease-out}@media (max-width:768px){.if_modal > *{width:calc(100% - 2rem)}}.if_modal.hide{animation:fadeout 0.1s ease-out}@keyframes fadein{from{opacity:0}to{opacity:1}}@keyframes fadeout{from{opacity:1}to{opacity:0}}@keyframes slideup{from{margin-top:10px}to{margin-top:0}}.if_dashboard_indicator{display:inline-block;text-align:center;border:1px solid rgba(0,0,0,0.1);padding:1rem;border-radius:0.5rem}.if_dashboard_indicator > *:first-child{display:block;font-size:3rem;font-weight:300;line-height:100%}.if_dashboard_indicator > *:last-child{display:block;font-size:0.75rem;margin-top:0.5rem}.if_transmitting{background:transparent url(res/transmitting.gif) no-repeat center center;display:inline-block;width:30px;height:30px}#if_debug{background:#ca5e59;color:#fff;font-size:10px;font-weight:bold;position:absolute;padding:5px;text-align:center;z-index:100;top:0;left:0;border-radius:0 0 5px 0}@media (max-width:768px){.if_transmitting{width:32px;height:32px}}