body{
    font-family:"Rajdhani", Sans-Serif;
    color:#ffffff;
}
*{
    outline:solid 0px #f00;
    margin :0;
}

/***************************************/
/* Styling Canvas */
#canvs,#canvH,#canvI{
    position :fixed;
    top:0;
    left :0;
    width:100%;
    background:#00000000;
    touch-action:none;
    z-index:1;
}
#canvs{background:#000000;}
/***************************************/


/***************************************/
/* Styling Sidebar, sidebar-elements */
#svgIco1{
    position:fixed;
    right:0;
    top:50px;
    height :48px;
    width :48px;
    fill:#00000000;
    stroke:#aaaaaa;
    stroke-width:5px;
    background :#333333;
    transform:translate(50%);
    z-index:3;
    border-radius:50%;
    border:solid 1px #000000;
    transition:400ms ease-out right;
    touch-action:none;
}
#sideBar{
    position:fixed;
    right:0;
    top:0;
    bottom:40px;
    width:12em;
    background:#212121;
    transition:0.5s ease;
    border-left:solid 2px #33333355 ;
    z-index:4;
    text-align:center;
    color:#fff;
    overflow:auto;
}
h5{
    background:#ffffff22;
    color:#ffffff;
    text-align:center;
    border-bottom:solid 1px #aaa;
    margin:10px;
    margin-top:8px;
    margin-bottom:0;
}
p{
    background:#ffffff11;
    margin-left:10px;
    margin-right:10px;
    text-align:left;
    padding:5px;
}
h1{
    user-select:none;
    color:#fff;
    padding-top :3px;
    font-size :1.9em;
    text-align:center;
    font-weight:100;
    margin:2px;
    border: solid 1px #aaa;
    border-radius:2px;
}
p>button{
    background:#33333377;
    color:#ffffff;
    font-family:inherit;
    border:1px solid #ffffff55;
    font-size:1.1em;
    padding:0px 20px;
    position:relative;
    margin:auto;
    display:block;
    user-select:none;
}
p>button:active{
    background:#00bfff55;
    border-color:#00bfff;
}

a{color: #6DBEE9;}
/***************************************/


/***************************************/
/* Styling Inputs */
input[type="range"]{
    position:relative;
    margin:0;
    width:90%;
    -webkit-appearance:none;
    background:#fff5;
    border:solid 1px #000;
    border-radius:1em;
    height:24px;
    margin-top:10px;
    margin-bottom:10px;
    box-shadow:0  -5px 10px #000000aa inset;
}
input[type="range"]::-webkit-slider-thumb{
    -webkit-appearance:none;
    width:24px;
    height:24px;
    background:#fff;
    border-radius:50%;
    box-shadow:5px 5px 5px #00005577 inset, -3px -3px 5px #00000077;
}
/*
input[type="color"]{
    position:relative;
    -webkit-appearance:none ;
    height:0;
    width:0;
    outline:none;
    background:#0000;
    border:none;
    display:block;
    top:-3px;
    left:10px;
}
input[type="color"]::-webkit-color-swatch-wrapper{
    -webkit-appearance:none;
    background:#0000;
    display:block;
    width:0;
    height:0;
}
input[type="color"]::-webkit-color-swatch{
    -webkit-appearance:none;
    width:24px;
    height:24px;
    display :block;
    border:solid 2px #aaa;
}
*/
input[type="text"]{
    height:24px;
    border:solid 1px #aaa;
    font-family:"Rajdhani",Courier;
    background:#fff3;
    text-align:center;
    color:#fff;
    font-weight:800;
    text-shadow:0 1px 1px #000;
    text-transform:uppercase;
}

input[type="checkbox"]{
    position:relative;
    bottom:-3px;
}
/***************************************/



/***************************************/
/* Styling Toolssets              
 * *************************************/
.toolb{
  position:fixed;
  bottom:0;
  width :100%;
  z-index:2;
  max-width: 600px;
  box-shadow: 2px 0 0 #444444;
}
.toolb::before{
  content: "";
  position:fixed;
  width: 100%;
  bottom:0;
  left: 602px;
  right:0;
  background: #111111;
  height:40px;
}



/***************************************/
/* Styling Tools[pencil, eraser... ] */
#shapesC>div{
    text-align:center;
    width:2.8em;
    margin:0 auto;
    text-shadow:3px 3px 10px #000000;
}
.shapes:active{
    background:#444444;
}
#shapesC{
    display:flex;
    justify-content:center;
    background:#212121;
    border-top:solid 2px #444444;
    overflow:hidden;
    z-index:2;
    user-select:none;
    touch-action:none;
}
.shapeIco{
    background:transparent;
    position:relative;
    bottom:-2px;
    width:32px;
    height:32px;
    margin:0;
    stroke:#aaaaaa;
    stroke-width:1px;
    fill:#000000;
    stroke-linecap:round;
    stroke-linejoin:round;
}
#clr:active{
    background:#ff0000;
}
#col{
    box-shadow:inset 0 0 0 10px #212121, 
    inset 0 0 0 12px #aaaaaa;
    background:#000;
}
/***************************************/


/***************************************/
/*Styling Color piker*
#color-pik{
    background:#33333399;
    backdrop-filter:blur(2px);
    position:fixed;
    display:grid;
    grid-template-rows:35px;
    grid-template-columns:35px auto 35px;
    width:98%;
    bottom:130px;
    left:50%;
    transform:translate(-50%);
    z-index:2;
}
#color-pik div{
  background:red;
}
/***************************************/


/***************************************/
/* Styling Mini Tool Box */
#stYl{
    background:#33333399;
    backdrop-filter:blur(2px);
    position:absolute;
    display:grid;
    grid-template-columns:60px auto auto 45px;
    grid-template-rows:45px 35px;
    grid-gap:2px;
    z-index:2;
    width:98%;
    left:50%;
    transform:translate(-50%);
    bottom:2.8em;
    overflow:hidden;
    border-radius:2px;
    text-align:center;
}
#stYl>div,
#stYl>svg,
#ersrT>div,
#ersrT>svg{background:#333333aa;}
.strokWidCnt{
    display:inline-block;
    padding-top:5px;
    grid-row:1/span 2;
}
#strokeWidthDemo{
    position:relative;
    display:inline-block;
    border-radius:50%;
    width:50%;
    border:solid 1px #000000;
    box-shadow:0 0 5px 1px #ffffff55;
}
#stroKwidH{
    background:#ffffff44;
    margin-top:2px;
}
.colOp{
    line-height:45px;
}
#inp1{
    grid-column:2/span 2;
    margin:0 auto;
    margin-top:4px;
    margin-bottom:3px
}
.filL{
    line-height:35px;
}
#closE, #closR{
    height:45px;
    width:45px;
    fill:transparent;
    stroke:#ffffffdd;
    stroke-width:5px;
    stroke-linecap:round;
}
#closE:active,#closR:active{
    stroke:#ff0000;
}

#ersrT{
    background:#33333399;
    backdrop-filter:blur(2px);
    position:absolute;
    display:grid;
    grid-template-columns:45px auto 45px;
    grid-template-rows:45px;
    grid-gap:2px;
    z-index:3;
    width:98%;
    left:50%;
    transform:translate(-50%);
    bottom:2.8em;
    overflow:hidden;
    border-radius:2px;
    text-align:center;
}
#ersrT>input{margin:auto;}
#eraser-size{
    text-align:center;
    line-height:45px;
}
/***************************************/


/***************************************/
/* Styling Color picker */
.colorPikr{
    background:#333333;
    color:#eeeeff;
    border:1px solid #555555;
}
.colorPikrC{
    background:#333333;
    color:#ffffff;
    outline:0;
    border:1px solid #aaaaaa;
    display:inline-block;
    touch-action:none;
    border-radius:4px;
}
.sp-palette-container{
    width:1.7em;
    border:0;
    overflow:auto;
}
sp-disabled{
    background:#555555;
}
.sp-picker-container{
    border:0;
    border-left:2px solid #aaaaaa;
}
.sp-cancel{
    background:#cdcdcd;
    font-weight:900;
    padding:5px;
    border:1px solid #333333;
    border-radius:4px ;
}
/***************************************/