div#cartoon_form, div#cartoon_form_results{
    display: block;
    margin:3rem auto 10rem auto;
    width:800px;
    height:324px;
    box-shadow: 0 0 15px rgba(0,0,0,.9);
  /*  background-color: #fefefe; */
      background-color: rgba(255, 255, 255, 0.4);
    overflow: hidden;
}

div#cartoon_form_results{
    display:none;
}




div#cartoon_form div#settings{
    width:500px;
    float:left;
    padding:3rem;
}

div#cartoon_form div#settings span{
    padding: 0px 2rem;
    color:#000;
    font-size: 1.4rem;
    font-weight: bold;
}

div#cartoon_form div#settings{
    color:#333;
}

div#cartoon_form div#settings p{
    color:#333;
    margin: 0 0 6px;
}

div#cartoon_form div#settings input[type="radio"]{
    -ms-transform: scale(1.5); /* IE 9 */
    -webkit-transform: scale(1.5); /* Chrome, Safari, Opera */
    transform: scale(1.5);
}

div#cartoon_form div#settings input[type="text"]{
    width: 100%;
    border: 1px solid #ddd;
    padding: 0rem 2rem;
}


p#from_disk_controls{
    display:inline-block;
    border: 1px solid #eee;
    border-radius: 5px;
    padding: 0.5rem;
}

p#from_url_controls{
    display:none;
    border: 1px solid #eee;
    border-radius: 5px;
    padding: 0.5rem;
}

div#cartoon_form div#settings span#alert{
    font-size: 1.4rem;
    color: #cc0000;
    display: none;
}

button#cartoonize{
    padding: 0.3rem 4rem;
}


img#progress-img{
    display: none;
}

div#cartoon_form div#banner{
    width:300px;
    float:left;
}

div#cartoon_form div#banner img{
    width:100%;
        padding: 10px;
}

div#cartoon_form_results div#cartoon>p{
    overflow: hidden;
}

div#cartoon_form_results div#cartoon img#result_img{
    max-height: 900px;
    position:relative;
}

div#cartoon_form_results div#cartoon #cartoonCanvas{
    position:absolute; 
    z-index:2;
    /*border: 1px solid #ff0000;*/
}


div#cartoon_form_results div#cartoon div#progress{
    display:none;
    position:relative;
    width:100%;
    z-index:100;
    text-align: center;
}

div#cartoon_form_results div#cartoon img#zoom-in{
    position: absolute;
    z-index:5;
    top: 0px;
    cursor:pointer;
}

div#cartoon_form_results div#cartoon img#zoom-out{
    position: absolute;
    z-index:5;
    top: 0px;
    cursor:pointer;
}

div#cartoon_form_results div#cartoon img#rotate{
    position: absolute;
    z-index:5;
    top: 0px;
    cursor:pointer;
}

div#cartoon_form_results div#cartoon p#cartoon_url{
    display:inline-block;
    border: 1px solid #eee;
    border-radius: 5px;
    padding: 0.3rem;
    width:90%;
    color: #222;
    margin-bottom: 2px;
}

div#cartoon_form_results div#cartoon p#cartoon_url input{
    width: calc(100% - 200px);
    border: 1px solid #ddd;
    padding: 0rem 1rem;
}


div#cartoon_form_results div#cartoon p#cartoon_buttons {
    display: inline-block;
    width: 99%;
    color: #222;
}


/*    Other effects                     */
div#other_effects{
    display:none;
    position:absolute;
    top: 100px;
    left:0px;
    width:260px;
    height:calc(100vh - 200px);
    box-shadow: 0 0 15px rgba(0,0,0,.9);
    background-color:#fff;    
    overflow-y: scroll;
    overflow-x: hidden;
    z-index: 10;
}


div#other_effects div.effect{
    display: block;
    margin: 20px;
    width: calc(100% - 40px);
    height: auto;
    float: left;
}

div#other_effects div.effect div{
    font-weight: bold;
    color: #232323;
    float:left;
    width:100%;
    text-align: center;
}

div#other_effects div.effect img{
    width:100%;
    height:auto;
    object-fit: cover;
    border:1px solid #ccc;
    float:left;
    cursor:pointer;
}




/*    Tools                     */
div#tools{
    display:none;
    position:absolute;
    top: 100px;
    right:0px;
    width:260px;
    height:max-content;
    box-shadow: 0 0 15px rgba(0,0,0,.9);
    background-color:#fff;    
    z-index: 10;
    padding: 0px 0px 2rem 0px;
}

div#tools div.title{
    width:100%;
    background: rgb(240, 240, 240) none repeat scroll 0% 0% / auto padding-box border-box;
    color:#222;
    font-size:1.8rem;
    padding:0.2rem 0rem 0.2rem 2rem;
    text-align: left;
    font-weight:bold;
}

div#tools div.ctrl-row{
    width:100%;
    padding:0.5rem 2rem;
}

div#tools button{
    color: #222;
    padding: 0.1rem 2rem;    
}

input#font-picker{
    width:100%;
}
div.font-select{
    width:100% !important;
}


div#font-size label{
    float:left;
    color:#333;
}

div#font-size-range{
    width:160px;
    margin-top:1rem;
}

input#font-size-value{
    float:right;
    width:40px;
    color:#222;
    text-align: center;
}

.rangeinner, .rangeselector{
    background-color: #ea9312 !important;
}

div#color-picker{
    height:40px;
}

div#color-picker label{
    float:left;
    color:#333;    
}

div#background{
    height:40px;
}

input#use-backround{
    float:left;
    -ms-transform: scale(1.5);
    -webkit-transform: scale(1.5);
    transform: scale(1.5);  
    margin: 0.6rem 1rem 0rem 0rem;
}

div#background label{
    float:left;
    color:#333;    
}

div#text-row label{
    float:left;
    color:#333;    
}

input#the_text{
    width:100%;
    color:#000;
}


div.asColorPicker-wrap{
    width:100px;
    float:right;
}
input.asColorPicker-input{
    width:80px;
    color:#222;
}

.asColorPicker-dropdown{
    min-width: 260px !important;
}

div.buttons{
    display:inline-flex;
}

div.buttons button{
    margin:0px 5px;
}

button#text_delete{
    display:none;
}

div#equalizer>div.ctrl-row{
    padding:0.2rem 2rem;
}

div#equalizer label{
    float:left;
    color:#333;        
}

div#equalizer  div.range-ctrl{
    width:160px;
    margin-top:1rem;
}

div#equalizer input.eq-value{
    float:right;
    width:40px;
    color:#222;
    text-align: center;    
}