.sidenav {text-align:left;color: #fff; height: 100%; background: rgba(0,0,0,1); width:0; position: fixed; top: 0; left:0; z-index:1050; border-right: 1px solid #fff; overflow-x:hidden; overflow-y:auto;  -moz-box-shadow: 0 6px 10px rgba(0, 0, 0, .15); -webkit-box-shadow: 0 6px 10px rgba(0, 0, 0, .15); box-shadow: 0 6px 10px rgba(0, 0, 0, .15);     font-family: 'Open Sans'; font-size: 12px;  overflow-x: hidden;  padding-top: 10px ; transition: 0.5s;}
.sidenav .container-demo {padding: 0 5px}
.sidenav .closebtn {display:block; margin: 0 10px; border: 1px solid #eee; padding:5px 10px; font-size: 13px;  color: #eee; text-align:center}
.sidenav .closebtn:hover {background: #333}
.sidenav h3 {font-family: 'Open Sans'; font-size: 17px; color: #d6ae48; padding:0; margin: 10px 0}
.demobutton {position: fixed; top: 30%; left:0; z-index:3;background: #02ad0f; color: #fff; border:0; padding: 15px;}
.demobutton i {font-size: 20px}
.demobutton:hover {background: #09ca17;}
.demo_toolbar .colors {width: 100px; display: inline-block;}
.demo_toolbar .colors span.pickcolor:hover {cursor:pointer}
.demo_toolbar .colors span.pickcolor {height: 20px; width: 20px; border: 1px solid #fff; display: inline-block}
.demo_toolbar .colors span.violet {background: #520e68}
.demo_toolbar .colors span.black {background: #000}
.demo_toolbar .colors span.blue {background: #0e3668}
.demo_toolbar .colors span.green {background: #0e6826}
.demo_toolbar .colors span.yellow {background: #e89e2d}
.demo_toolbar .colors span.red {background: #680e0e}
.demo_toolbar .colors span.brown {background: #362209}
.demo_toolbar .colors span.teal {background: #0e5c68}

.demo_toolbar .colors span.violet2 {background: #9D426B}
.demo_toolbar .colors span.black2 {background: #333}
.demo_toolbar .colors span.blue2 {background: #2e81e9}
.demo_toolbar .colors span.green2 {background: #3e9b2d}
.demo_toolbar .colors span.yellow2{background: #a79452}
.demo_toolbar .colors span.red2 {background: #c10808}
.demo_toolbar .colors span.brown2 {background: #6b3b00}
.demo_toolbar .colors span.teal2 {background: #4a606b}

.demo_toolbar .colors span.violet3 {background: #a7004b}
.demo_toolbar .colors span.black3 {background: #555}
.demo_toolbar .colors span.blue3 {background: #249aff}
.demo_toolbar .colors span.green3 {background: #3a6c31}
.demo_toolbar .colors span.yellow3{background: #938948}
.demo_toolbar .colors span.red3 {background: #f50632}
.demo_toolbar .colors span.brown3 {background: #7a6a46}
.demo_toolbar .colors span.teal3 {background: #0f71a3}

.demo_toolbar .colors span.violet4 {background: #f10239}
.demo_toolbar .colors span.black4 {background: #777}
.demo_toolbar .colors span.blue4 {background: #0263b7}
.demo_toolbar .colors span.green4 {background: #518907}
.demo_toolbar .colors span.yellow4{background: #ddb33c}
.demo_toolbar .colors span.red4 {background: #9d0823}
.demo_toolbar .colors span.brown4 {background: #7e7c58}
.demo_toolbar .colors span.teal4 {background: #4ebbf1}
.demo_toolbar input[type="color"]{height: 20px; width: 20px; border: 1px solid #fff; padding:0; vertical-align: text-bottom}
.demo_toolbar input::-webkit-color-swatch-wrapper {padding: 0;  margin:0;   background:none;}
.demo_toolbar input::-webkit-color-swatch {border: none;}
.demo_toolbar .choose {margin-top:5px}
.demo_toolbar .choose span {border: 1px solid #eee; padding:3px;}
.demo_toolbar .choose p {margin-top:5px}
.demo_toolbar .themes-slides {display:flex; flex-wrap: wrap; justify-content: left; padding-right:10px}
.demo_toolbar .themes-slides a {margin:5px; color: #fff; text-align:center}
.demo_toolbar .themes-slides a img{width:95px; opacity:0.9 }
.demo_toolbar .themes-slides a:hover {color:#d6ae48 }
.demo_toolbar .themes-slides a:hover img {opacity: 1}
.welcome .button {border: 0; padding:2px 10px; font-size:11px; background: #09ca17}
.welcome .theme-images div {text-align:center; padding:4px}
.welcome .theme-images a { text-decoration: none; display: block; padding: 10px; border: 1px solid #eee; border-radius: 5px; line-height: 14px;}