body.root{display:flex;flex-direction:column;height:100vh-30px;color:#5c5c5c;font-family:Roboto, Arial, sans-serif;background:#fff;margin:0;line-height:1.5}main{flex-grow:1;position:relative}main .content{height:50%}main .article-container{padding:24px 0}main .article{background-color:#fff;color:#202124;box-shadow:0 1px 2px 0 rgba(60,64,67,0.3),0 1px 3px 1px rgba(60,64,67,0.15);padding:40px}main #root{height:calc(100vh) !important;width:100% !important}main.has-tabs #root{height:calc(100vh - 150px) !important ; width:calc(100vw) !important}.banner{background-color:#fff;box-shadow:0 3px 6px -3px #bdbdbd;padding:24px 0}.site-width{margin:0 auto;max-width:1024px;width:90vw}.drop-shadow{box-shadow:inset 0 5px 6px -3px rgba(0,0,0,0.4);height:6px;left:0;right:0;top:0;opacity:1;pointer-events:none;position:absolute;transition:opacity .5s}h1,h2,h3,h4{font-family:'Roboto', 'Noto', sans-serif;-webkit-font-smoothing:antialiased}h1{font-size:45px;font-weight:400;letter-spacing:-.018em;line-height:48px}h2{font-size:34px;font-weight:400;letter-spacing:-.01em;line-height:40px}h3{font-size:24px;font-weight:400;letter-spacing:-.012em;line-height:32px}a{text-decoration:none;color:#0F79D0;text-shadow:none}nav#toolbar{width:100%;height:64px;padding:16px;display:flex;align-items:center;box-sizing:border-box;background:#2BB4CA;font-family:'Google Sans', Roboto, Arial, sans-serif}nav#toolbar .logo-devs{height:36px;margin-top:5px;border:0;box-shadow:none;margin:0 16px 0 0;display:flex}nav#toolbar .title-grow{flex-grow:1}nav#toolbar .title{text-decoration:none;font-weight:bold;color:#fff;margin-right:8px}nav#toolbar .subtitle{color:#fff}.icon-search{fill:currentcolor}.icon{box-sizing:border-box !important;cursor:pointer;display:inline-block;height:40px;line-height:1;outline:none;padding:8px;position:relative;user-select:none;width:40px;z-index:0}nav#toolbar .layout{align-items:center}nav#toolbar .input-container{display:flex;align-items:center;color:#fff}#search-box{-webkit-appearance:none;appearance: none;background:transparent;border:none;box-shadow:none;color:#fff;max-width:100%;outline:none;padding:0;position:relative;text-align:inherit;vertical-align:bottom;width:100%;-webkit-font-smoothing:antialiased;font-family:Roboto,Noto,sans-serif;font-size:16px;font-weight:400;line-height:24px}.input-container input::placeholder{color:#fff;opacity:.5}#arrow-back{color:#fff;display:flex;align-items:center}#arrow-back i{margin-right:1rem}#tabs{list-style-type:none;width:100%;background:#7fcbce;padding:0;margin:0;display:flex}#tabs_toolbar{list-style-type:none;width:100%;background:#7fcbce;padding:0;margin:0;margin-top:-5px;display:flex}#msg_toolbox{list-style-type:none;width:100%;background:#ecf1f1;padding:0;margin:0;margin-top:-5px;display:flex;border-radius: 100px 0 0 100px;}#msg_code{list-style-type:none;width:100%;background:#ecf1f1;padding:0;margin:0;margin-top:-5px;display:flex;border-radius: 0 100px 100px 0;}#tabs_tools{list-style-type:none;width:100%;background:#7fcbce;padding:0;margin:0;display:inline-block;text-align:right}#tabs li{display:flex}#tabs li a{color:#5c5c5c;padding:0.2rem 1rem;border:2px solid transparent}#tabs li a:hover,#tabs li a:focus{background:#ECEFF1;outline:none}#footer{background-color:#fff;font-size:13px;padding:10px 0}#footer .footer-wrapper{display:flex}#footer .link-list{flex:1;margin-right:32px}#footer .link-list label{display:block;margin:8px 0}#footer li,#footer ul{list-style:none;margin:0;padding:0}#footer a{color:#9e9e9e}#footer a:hover,#footer a:focus{color:#000;outline:none}@media (max-width: 767px){#footer .footer-wrapper{flex-direction:column}}a.button{background-color:#fff;border:2px solid transparent;border-radius:3px;color:#3c4043;font-size:14px;font-weight:600;padding:8px 16px;margin:0 8px;text-decoration:none;white-space:nowrap}a.button:hover,a.button:focus{background-color:#F5F7F7}a.button:focus{border-color:#01656E;outline:none}main.index ul{list-style-type:none;padding:0;display:flex;margin:1rem 0;flex-wrap:wrap;line-height:2rem}main.index ul.fluid{float:left}main.index li{padding:1rem;flex-shrink:0}main.index li a{background-color:#fff;max-width:200px;height:100px;border:2px solid transparent;border-radius:3px;box-shadow:0 1px rgba(0,0,0,0.15);flex:1 0 330px;flex-direction:column;margin:0 16px 16px 0;max-width:330px;position:relative;border-bottom-color:#4285f4;padding:1rem}main.index li a:hover,main.index li a:focus,main.index li a.selected{border-color:#4285f4}main.index h1{font-family:"Google Sans",Roboto,Arial,sans-serif;font-weight:400;letter-spacing:0;font-size:1.5rem;line-height:2rem;padding:1rem 0}main.index h2:not(.banner-title){letter-spacing:.07272727em;font-family:Roboto,Arial,sans-serif;font-size:.6875rem;font-weight:500;line-height:1rem;text-transform:uppercase}main.index .container{padding:1rem 0}#banner_bar{list-style-type:none;width:100%;height:64px;background:#7fcbce;padding:0;margin:0;display:flex;position:relative;}#tools_bar{list-style-type:none;width:100%;background:#7fcbce;padding:0;margin:0;display:flex;position:relative;}

a.li_msg_toolbox{&.selected{a{background-color:#ffffff}}} a.li_code{&.selected{a{background-color:#000000}}}

main .code_content{height: calc(100vh - 87px); padding: 2ex; color:white; background:gray; overflow: auto;}
#arduino_content { width: 450px; height: calc(100vh - 123px); left: calc(100vw - 490px); top: 64px; padding: 0em; position: absolute !important; font-size: 14px !important; }
#arduino_title { width: calc(100%); height: 40px; left: -1px; top: 0px; margin: 0; font-size: 16px !important; }
#arduino_code { width: calc(100% - 0px); height:calc(100% - 40px); padding:0px; overflow: scroll; background:white; border: 0px solid #8E8E8E;}
#code_content { z-index:999999 !important; display:none; }
#dialog_toolbox  { display: none; }
#dialog_putty  { display: none; }
#dialog_upload  { overflow: hidden; display: none; width: calc(100% - 0px) !important; padding:0px !important;}
#tabs_upload { width: 100%; height: 100%; white-space:nowrap; overflow: hidden; resize: none; padding:0px; background-color: white;}
#tabs-1 { width: 100%; height:calc(100% - 45px); white-space:nowrap; overflow: hidden; resize: none; padding:0px; border:none;}
#tabs-2 { width: 100%; height:calc(100% - 45px); white-space:nowrap; overflow: hidden; resize: none; padding:0px; border:none;}
#upload_code { width: calc(100% - 4px); height: calc(100% - 6px);  white-space:nowrap; overflow: scroll; resize: none; border:none;}
#upload_state { width: calc(100% - 4px); height: calc(100% - 6px);  white-space:nowrap; overflow: scroll; resize: none; border:none;}
.contentzoom { position:absolute; left:5px; top:-2px}
.contentzoom_right { position:absolute; left:calc(100% - 40px); top:-2px}
.button-fixed {
  min-width: 40px;
  white-space: nowrap;
  display: inline-block;
  text-align: center;
}