styles.css

body{
margin: 0;
}
.do-editor{
  margin:0px;
  padding: 0px;
  overflow: hidden;
}
.do-top{
  height:20%;
  background-color: #009688;
  /*background-color: rgb(114, 19, 142);*/
  color:#fff;
  box-shadow: 2px 2px 2px #009688;    
}
.do-topleft{
  font-size:50px;
  padding-left: 46px;
  font-family: cursive;
}
.do-topright{
  padding-top: 15px;
  padding-left: 40px;
  opacity: 0.9;
}
.do-topright:hover{  
  opacity: 1;
}
.do-middle{
  height:70%;
  margin-top:5px;
}
.do-bottom{
  height:10%;  
  color:#009688;
 text-align: center;  
}
.editor-container{
  margin: 50px 50px 50px 60px;
  height:100%;
}
#doodler_host{
  box-shadow: 2px 2px 34px black;
}
/****************************** Accordion ***************************/
article.accordion section
{
	height: 45px;		
	color: #333;
	background-color: #EEE;
	overflow: hidden;	    
}
article.accordion section:last-child
{	
  border-bottom:1px solid #EEE;
}
article.accordion section a
{
	font-size: 20px;		
	line-height: 45px;		  
	display: block;
	width: 100%;	
	text-decoration: none;
	color: inherit;
	outline: 0 none;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  text-align: center;
}
article.accordion section:target
{
	height: auto;  
  border-right:1px solid #EEE;
}
article.accordion section:target div {
	background-color: #fff;  
}
.image-upload > input
{
    display: none;
}
table{
  width: 100%;
}

td{
  display: table-cell;
  padding: 12px 12px 12px 35px;  
  vertical-align: middle;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 15px;
}
.do-fileurl{
  width:100%;
  border: 1px solid #EEE;
}
input[type=range] {
  -webkit-appearance: none; /* Hides the slider so that custom slider can be made */
  width: 100%; /* Specific width is required for Firefox. */
}

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
}

input[type=range]:focus {
  outline: none; /* Removes the blue border. You should probably do some kind of focus styling for accessibility reasons though. */
}

input[type=range]::-ms-track {
  width: 100%;
  cursor: pointer;
  background: transparent; /* Hides the slider so custom styles can be added */
  border-color: transparent;
  color: transparent;
}
           /* Special styling for WebKit/Blink */
input[type=range]::-webkit-slider-thumb {
 -webkit-appearance: none;
 border: 0.5px #000000  solid;
 height: 26px;
 width: 8px;
 border-radius: 3px;
 background: #ffffff ;
 cursor: pointer;
 margin-top: -12px; /* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */
 box-shadow: 0.5px 0.5px 0.5px #000000 ; /* Add cool effects to your sliders! */
}

/* All the same stuff for Firefox */
input[type=range]::-moz-range-thumb {
  border: 0.5px #000000   solid;
 height: 26px;
 width: 8px;
 border-radius: 3px;
 background: #ffffff ;
 cursor: pointer;  
 box-shadow: 0.5px 0.5px 0.5px #000000 ; /* Add cool effects to your sliders! */
}

/* All the same stuff for IE */
input[type=range]::-ms-thumb {
border: 0.5px  #000000  solid;
 height: 26px;
 width: 8px;
 border-radius: 3px;
 background: #ffffff ;
 cursor: pointer;  
 box-shadow: 0.5px 0.5px 0.5px #000000 ; /* Add cool effects to your sliders! */
}
input[type=range]::-webkit-slider-runnable-track {
 width: 100%;
 height: 8.4px;
 cursor: pointer;
 box-shadow: 0.5px 0.5px #000;
 background: #009688 ;
 border-radius: 1.3px;
 border: 0.2px solid #010101 ;
}

input[type=range]:focus::-webkit-slider-runnable-track {
 background: #009688 ;
}

input[type=range]::-moz-range-track {
width: 100%;
 height: 8.4px;
 cursor: pointer;
 box-shadow: 0.5px 0.5px #000;
 background: #009688 ;
 border-radius: 1.3px;
 border: 0.2px solid #010101 ;
}

input[type=range]::-ms-track {
 width: 100%;
 height: 8.4px;
 cursor: pointer;
 background: transparent;
 border-color: transparent;
 border-width: 16px 0;
 color: transparent;
}
input[type=range]::-ms-fill-lower {
 background: #009688 ;
 border: 0.2px #010101 ;
 border-radius: 2.6px;
 box-shadow: 0.5px 0.5px 0.5px #000000 ;
}
input[type=range]:focus::-ms-fill-lower {
 background: #009688 ;
}
input[type=range]::-ms-fill-upper {
 background: #009688 ;
 border: 0.2px solid #010101 ;
 border-radius: 2.6px;
 box-shadow: 0.5px 0.5px 0.5px #000000 ;
}
input[type=range]:focus::-ms-fill-upper {
 background: #009688 ;
}

.vc-container{
  position: absolute;
    padding: 5% 5% 2% 5%;
    margin: auto 20%;
    display: block;
    top: 2%;
    background-color: white;
    box-shadow: 0px 0px 1px #000;
    border-radius: 25px;    
}

.btn-default:hover{
  background-color:#b2dfdb;
}
.btn-default{
  width: 50%;
  border-radius: 0px;
}