popup.css

h3,input{margin:2px}.button:active,.switch input:hover+.slider,input:active,input[type=text]:focus{box-shadow:2px 2px var(--height) rgba(0,0,0,.7) inset,-2px -2px var(--height) rgba(240,240,240,.3) inset}body,html{font-family:Raleway,Arial,sans-serif;background:linear-gradient(to top,#212121,#292929);background-size:cover;text-align:center;color:#d6d6d6;padding:0;margin:0;text-shadow:0 0 5px rgba(0,0,0,.7);width:260px}#mainheader,.formcontainer header,.sliderlabel,header{text-align:left}:root{--hover:#4f4f4f;--border:1px;--radius:45px;--height:3px}.formcontainer{background:#212121;padding:0 0 40px;width:500px;margin:10px 0;border-radius:var(--radius);box-shadow:2px 2px 5px rgba(0,0,0,.7),-2px -2px 5px rgba(240,240,240,.3)}.colors{background:linear-gradient(to left top,#f79817,#ffb042)}.button,input{transition:box-shadow .5s,border .5s;font-family:Arial,sans-serif;background:linear-gradient(to left top,#121212,#292929);color:currentColor;font-size:13px}.button{display:inline-flex;flex-direction:row;justify-content:center;align-content:center;align-items:center;cursor:pointer;border:var(--border) #292929 solid;box-shadow:2px 2px var(--height) rgba(0,0,0,.7),-2px -2px var(--height) rgba(240,240,240,.3);padding:8px;margin:4px;border-radius:var(--radius);width:140px}.button:hover,input:hover{border-color:var(--hover)}.button:active,input:active,input[type=text]:focus{border-color:transparent;background:linear-gradient(to left top,#292929,#121212)}.slider:before,input{box-shadow:2px 2px var(--height) rgba(0,0,0,.7),-2px -2px var(--height) rgba(240,240,240,.3)}input[type=file]{display:none}input{padding:10px;border:var(--border) #292929 solid;border-radius:var(--radius)}.disabled{background:#ffcb85!important;color:#595959!important;box-shadow:none!important}#mainheader{font-size:12px;margin-top:10px}.indent{margin:5px 10px}h2{font-size:17px;font-weight:600}h3,label{font-size:12px}h3{color:#bfbfbf;font-weight:500}#content{display:flex;flex-direction:column;flex-wrap:wrap;align-items:center}hr{border-color:#3d3d3d}.iconbutton{width:45px;height:45px}.icon{display:inline;height:25px;width:25px}.buttonicon,.slider:before{height:20px;width:20px}label.iconbutton{height:25px!important;width:25px!important}label{font-weight:600}.center-container-row{display:flex;flex-direction:row;justify-content:center;align-items:center}.contanter-padding{margin:5px;align-items:left}footer{margin:10px;font-size:10px}.switch{position:relative;display:inline-block;width:45px;height:25px;margin:0 3px 0 0}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background:linear-gradient(to left top,#8c8c8c,#b0b0b0);box-shadow:2px 2px var(--height) rgba(0,0,0,.7),-2px -2px var(--height) rgba(240,240,240,.3),#6a6a6a 0 1px inset;-webkit-transition:.4s;transition:.4s}.slider:before{position:absolute;content:"";left:3px;bottom:3px;background:linear-gradient(to left top,#babababa,#d1d1d1);-webkit-transition:.4s;transition:.4s}.switch input:checked+.slider{background:linear-gradient(to right bottom,#424242,#6b6b6b)}.switch input:checked+.slider:before{-webkit-transform:translateX(19px);-ms-transform:translateX(19px);transform:translateX(19px)}.slider.round{border-radius:34px}.slider.round:before{border-radius:50%}.vl{display:inline;border:1px outset #3d3d3d;height:23px;width:0}.sliderlabel{margin:5px}.slidercontainer{display:flex;justify-content:left;margin:5px;font-size:15px}.center-container-column{display:flex;flex-direction:column;align-items:center}