*{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video, textarea{
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	vertical-align: baseline;
	font-family: proxima-nova, sans-serif;
    font-weight: 300;
    font-style: normal;
}

header{border-right:solid thin #4c4c4c; background:#e9e9e9; width:15rem; position:fixed; top:0px; left:0px; height:100vh; padding:1rem 1rem; overflow:hidden;}
.header_min{width:calc(44px + 2rem);}
.logo{width:100%; margin:0px 0px 2rem; display:flex; justify-content:flex-start; align-items:center; gap:1rem;}
.logo img{width:44px; height:44px; object-fit:cover;}
.logo div{font-weight:900; font-size:1.5rem; letter-spacing:.25rem;}
.menu{width:100%; list-style:none; display:flex; justify-content:flex-start; align-items:flex-start; flex-direction:column;}
.menu li{overflow:hidden; width:100%; display:flex; justify-content:flex-start; align-items:center; height:55px;}
.menu li a{width:100%; display:flex; justify-content:flex-start; align-items:center; height:55px; gap:1rem;}
.menu_icon{width:44px; height:44px; border:solid thin red;}
.header_min .menu_title{display:none;}

.wrapper{width:calc(100% - 44px - 2rem); margin-left:calc(44px + 2rem); display:flex; justify-content:center; align-items:flex-start; min-height:100vh;}
.container{width:100%; min-height:100vh; display:flex; justify-content:flex-start; align-items:flex-start; flex-direction:column;}

.playground{width:100%; min-height:calc(100vh); display:flex; justify-content:flex-start; align-items:flex-start; flex-direction: column; background:#e9e9e9; gap:8px; padding:8px;}
.playground_areas{width:100%; display:flex; justify-content:flex-start; align-items:flex-start; flex-wrap:wrap; gap:8px;}
.playground_box{width:calc(50% - 4px); background:#fff; height:0px; border-radius:5px; overflow:hidden; display:none;}

.playground_box_active{display:initial !important; height:calc(50vh - 16px - 22px) !important; overflow:auto !important;}
.playground_title{height:44px; padding:0px 2rem; display:flex; justify-content:flex-start; align-items:center; color:#fff;}
.playground_html{background:#4c4c4c;}
.playground_css{background:#4c4c4c;}
.playground_js{background:#4c4c4c;}
.playground_php{background:#4c4c4c;}
.playground_toolbar{width:calc(100% - 8px); height:44px; display:flex; justify-content:space-between; align-items:center; gap:1rem; background:#231c14; border-radius:5px; padding:0px 1rem;}
.playground_toolbar .class_title{color:#fff; font-weight:bold; font-size:20px;}
.playground_toolbar .playground_buttons{width:max-content; height:44px; display:flex; justify-content:flex-end; align-items:center; gap:1rem; } 
.playground_toolbar_item{height:28px; border-radius:5px; width:max-content; padding:0px 1rem; background:#fff; display:flex; justify-content:flex-start; align-items:center; gap:.5rem; cursor:pointer;}
.playground_toolbar_item_bullet{width:8px; aspect-ratio:1; border-radius:20px; background:#999;}
.active_toolbar_item .playground_toolbar_item_bullet{background:orange !important;}
.CodeMirror{height:calc(100% - 44px) !important;}

.field_cont{width:100%; padding:0px 1rem; border:solid thin red; display:flex; justify-content:flex-start; align-items:center; flex-wrap:wrap; gap:2rem;}
.field{display:flex; justify-content:flex-start; align-items:flex-start; flex-direction:column; flex-grow:2;}
.field input{width:100%; height:44px; padding:0px 1rem; border:solid thin #999; font-family: proxima-nova, sans-serif; font-size:16px; font-weight:300; outline:none; border-radius:.5rem; }
.error_field{color:red; font-size:12px; padding:0px .5rem;}