*{box-sizing:border-box;margin:0}input[type=range].slider{-webkit-appearance:none;width:100%;margin:9px 0}input[type=range].slider:focus{outline:0}input[type=range].slider:focus::-webkit-slider-runnable-track{background:rgba(87,75,84,.32)}input[type=range].slider:focus::-ms-fill-lower{background:rgba(29,25,28,.32)}input[type=range].slider:focus::-ms-fill-upper{background:rgba(87,75,84,.32)}input[type=range].slider::-webkit-slider-runnable-track{width:100%;height:2px;cursor:pointer;box-shadow:0 0 0 #000,0 0 0 #0d0d0d;background:rgba(29,25,28,.32);border-radius:1px;border:0 solid #fff}input[type=range].slider::-webkit-slider-thumb{box-shadow:0 0 4px #2c0000,0 0 0 #460000;border:7.2px solid rgba(255,255,255,.31);height:20px;width:20px;border-radius:10px;background:#4e73df;cursor:pointer;-webkit-appearance:none;margin-top:-9px}input[type=range].slider::-moz-range-track{width:100%;height:2px;cursor:pointer;box-shadow:0 0 0 #000,0 0 0 #0d0d0d;background:rgba(29,25,28,.32);border-radius:1px;border:0 solid #fff}input[type=range].slider::-moz-range-thumb{box-shadow:0 0 4px #2c0000,0 0 0 #460000;border:7.2px solid rgba(255,255,255,.31);height:20px;width:20px;border-radius:10px;background:rgba(255,255,255,.9);cursor:pointer}input[type=range].slider::-ms-track{width:100%;height:2px;cursor:pointer;background:0 0;border-color:transparent;color:transparent}input[type=range].slider::-ms-thumb{box-shadow:0 0 4px #2c0000,0 0 0 #460000;border:7.2px solid rgba(255,255,255,.31);width:20px;border-radius:10px;background:rgba(255,255,255,.9);cursor:pointer;height:2px}input[type=range].slider::-ms-fill-lower{background:rgba(0,0,0,.32);border:0 solid #fff;border-radius:2px;box-shadow:0 0 0 #000,0 0 0 #0d0d0d}input[type=range].slider::-ms-fill-upper{background:rgba(29,25,28,.32);border:0 solid #fff;border-radius:2px;box-shadow:0 0 0 #000,0 0 0 #0d0d0d}.app--container{display:block;position:relative;background-color:#fcfcfc;border:2px solid #4e73df;border-radius:10px;overflow:hidden}.app--container>div{float:left}.app--title{padding:16px;font-size:20px;background-color:#fff;border-bottom:2px solid #cacaca}.app--values--wrapper{width:40%;height:62.5%;border-right:2px solid rgba(0,0,0,.2);overflow-y:auto}.app--values--wrapper .values--description{width:80%;display:flex;flex-direction:row;justify-content:center;align-items:center;position:relative;margin-left:20%;color:rgba(0,0,0,.7)}.app--values--wrapper .values--description>div{padding-top:10px;padding-bottom:10px;font-size:16px}.app--values--wrapper .values--description-name{width:70%;text-align:right;padding-right:10px;border-right:1px solid rgba(0,0,0,.2)}.app--values--wrapper .values--description-value{width:30%;text-align:left;padding-left:10px}.app--values--wrapper .values--list .values--value-item>*{float:right;outline:0}.app--values--wrapper .values--list .values--value-item-name{width:56%;padding-right:10px;text-align:right;line-height:50px;border-right:1px solid rgba(0,0,0,.2);height:100%;overflow:hidden}.app--values--wrapper .values--list .values--value-item-value{width:24%;padding-left:10px;line-height:50px}.app--values--wrapper .values--list .values--value-item>button{width:25px;height:25px;margin:12.5px;border-radius:50%;line-height:100%;border:0;outline:0;background-color:transparent;color:rgba(0,0,0,.5);cursor:pointer;transform:scale(1);transition:transform .1s ease-out}.app--values--wrapper .values--list .values--value-item>button:hover{transform:scale(1.2);transition:transform .1s ease-out}.app--values--wrapper .values--input{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;position:relative;width:100%;height:65px;background-color:#fff;border-top:2px solid #cacaca}.app--values--wrapper .values--input>*{border:0;outline:0;background-color:#fff;padding:0}.app--values--wrapper .values--input .values--input-submit{border:1px solid rgba(0,0,0,.2);border-radius:50%;transform:rotateZ(45deg);color:rgba(0,0,0,.6);height:30px;width:30px}.app--values--wrapper .values--input .values--input-name{width:56%;height:100%;padding-right:10px;text-align:right}.app--values--wrapper .values--input .values--input-value{width:24%;padding-left:10px;height:100%}.app--canvas--wrapper{width:60%;height:62.5%;overflow:auto}.app--controls--wrapper{width:100%;height:220px;border-top:2px solid rgba(0,0,0,.2);position:relative}.app--controls--wrapper .app--controls--holder{width:100%;height:calc(100% - 55px - 15px);padding:0 100px;position:relative}.app--controls--wrapper .app--controls--input{height:50%;padding:0;margin:0;display:flex;flex-direction:column;justify-content:center;align-items:center}@media only screen and (max-width :768px){#dd{overflow:auto}}@media only screen and (max-width :1025px){.app--values--wrapper{border-bottom:2px solid #cacaca}.app--canvas--wrapper,.app--values--wrapper{width:100%}.app--title{padding:4px;font-size:24px}}