.drawer {display:none; position:absolute; top:0; left:0; width:100%; height:100%; z-index:1000;}
.drawer canvas {width:100%; height:100%;}
.drawer.active {display:block;}
.drawer.underlay {z-index:0;}


.drawer-toolbar {display:none; position:absolute; top:0; right:0; z-index:10000;}
.drawer-toolbar.active {display:block;}
.drawer-toolbar .minimize-toggle {height:20px; margin:3px 0; border-radius:8px; background:rgba(255,255,255,0.35) url(../svg/chevron-down.svg) 50% 50% no-repeat; transform:rotateZ(180deg); cursor:pointer; transition:all 0.3s;}
.drawer-toolbar .tools {padding:5px; max-height:500px; background-color: rgb(53, 53, 53); transition:all 0.3s;}
.drawer-toolbar .tools hr {height:1px; color:rgba(255,255,255,0.7); border:none;}
.drawer-toolbar .tools .btn {display:block; width:20px; height:20px; margin-bottom:10px; border:none; background:transparent 50% 50% no-repeat; background-size:contain; filter:invert(1); opacity:0.7; transition:all 0.3s;}
.drawer-toolbar .tools .btn:hover {opacity:1;}
.drawer-toolbar .tools .btn.selected {opacity:1;}
.drawer-toolbar .tools .btn.toggle-underlay {background-image:url(../svg/toggle-underlay.svg);}
.drawer-toolbar .tools .btn.selection {background-image:url(../svg/cursor.svg);}
.drawer-toolbar .tools .btn.pencil {background-image:url(../svg/pencil.svg);}
.drawer-toolbar .tools .btn.rectangle {background-image:url(../svg/square.svg);}
.drawer-toolbar .tools .btn.circle {background-image:url(../svg/circle.svg);}
.drawer-toolbar .tools .btn.line {background-image:url(../svg/minus.svg);}
.drawer-toolbar .tools .btn.arrow {background-image:url(../svg/arrow-fat.svg);}
.drawer-toolbar .tools .btn.simple-arrow {background-image:url(../svg/arrow-simple.svg);}
.drawer-toolbar .tools .btn.text {background-image:url(../svg/drawer-text.svg);}
.drawer-toolbar .tools .btn.clear {background-image:url(../svg/trash.svg);}
.drawer-toolbar .tools .btn:last-child {margin-bottom:0;}

.drawer-toolbar .tools .styles {position:relative;}
.drawer-toolbar .tools .styles .btn {}
.drawer-toolbar .tools .styles .btn.color {filter:invert(0); opacity:1;}
.drawer-toolbar .tools .styles .btn.color.stroke {background-color:#ff0000;}
.drawer-toolbar .tools .styles .btn.color.fill {background-color:#ffffff;}
.drawer-toolbar .tools .styles .btn.toggle-subbar {background-image:url(../svg/sliders.svg);}

.drawer-toolbar .tools .styles .subbar {display:none; position:absolute; bottom:0; right:calc(100% + 6px); padding:5px 15px; background-color:rgb(53, 53, 53); color:#ffffff;}
.drawer-toolbar .tools .styles .subbar.active {display:block;}
.drawer-toolbar .tools .styles .subbar .param {margin-bottom:10px;}
.drawer-toolbar .tools .styles .subbar .param .title {margin-bottom:5px; font-size:12px;}
.drawer-toolbar .tools .styles .subbar .param .slider {width:150px; height:5px;}
.drawer-toolbar .tools .styles .subbar .param .slider .ui-slider-handle {width:10px; height:14px; margin-left:-5px;}


.drawer-toolbar.minimized .minimize-toggle {transform:rotateZ(0);}
.drawer-toolbar.minimized .tools {max-height:0; padding-top:0; padding-bottom:0; box-shadow:none; overflow:hidden;}