*{margin: 0; padding: 0; box-sizing: border-box;}
ul,li{ list-style: none; }
a{ text-decoration: none; }
img{ max-width: 100%; width: auto; display: block; margin: 0; padding: 0; }
input:focus{outline: 0;}

.akshar-sulekh{ overflow: hidden; }
.akshar-sulekh h1{font-size: 24px;}
.wrap {
    display: block;
    position: absolute;
    margin: auto;
    width: 90px;
    top: 131.5%;
    left: 8%;
    left: 5;
    border: 0;
    z-index: 9999;
}
.wrap-1 {
    top: 211%;
    left: 27%;
    width: 170px;
}
.wrap-2 {
    top: 172%;
    left: 79%;
}
.lect-qus-deta.mb-3{ margin: auto; }
input.keyboard.text-center.ui-keyboard-input.ui-widget-content.ui-corner-all {
    position: relative;
    font-size: 32px;
    word-spacing: 0px;
    margin: 0 auto;
    line-height: 0;
    padding: 0;
    background-color: transparent;
    border: 0 !important;
    border-radius: 0;
    background-color: #d2c88e; color: #fff; text-align: center;
    border-radius: 15px;
    box-shadow: 1px 1px 1px 1px #000;
}
input.keyboard:after{ content: ""; position: absolute; width: 100%; border-top: 1px solid #000; top: 50%; left: 50%; transform: translate(-50%, -50%); }

.ui-keyboard{ position: fixed; top: 100%; left: 50%; transform: translate(-50%, -100%);     background-color: #1c94c4; padding: 20px;  } 
.ui-keyboard-input-current{ box-shadow: none;  }

.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button{ background-image: none; }
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default{padding: 10px; line-height: 0;}

@media only screen and (max-width: 479px) {
  .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {  padding: 4px;  line-height: 0; }
  input.keyboard.text-center.ui-keyboard-input.ui-widget-content.ui-corner-all{ word-spacing: normal; font-size: 30px; }
}


.after-class:after{ content: ""; position: absolute; height: 100px; width: 1000px; background-color: #c7de84; top: 50%; left: -175%; transform: translate(0%,-50%); z-index: -1; }
.after-class-1:after{ content: ""; position: absolute; height: 100px; width: 1000px; background-color: #00aeef; top: 50%; left: -175%; transform: translate(0%,-50%); z-index: -1; }
.before-class-1:after{ content: ""; position: absolute; height: 100px; width: 1000px; background-color: #f9aa8f; top: 50%; right: -175%; transform: translate(0%,-50%); z-index: -1; }
.before-class:after{ content: ""; position: absolute; height: 100px; width: 1000px; background-color: #9b95c9; top: 50%; right: -175%; transform: translate(0%,-50%); z-index: -1; }



.toolbar {    z-index: 9; width: 100%; text-align: center;
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translate(-50%,0);
    padding: 15px;
    background-color: red;
    color: #fff;
}
.toolbar span{ margin-right: 15px; }
.picturepanel {
    text-align: center;
}
canvas {
    background: transparent;
    position: absolute;
    z-index: 2;
    top: 449px;
    left: 37%;
    width: 312px;
    cursor: crosshair;
    height: 614px;
}
.toolbar a, .toolbar div, .toolbar form{display: none;  }

#paint-app {
  margin-left: auto;
  margin-right: auto;

}


.placeholder {
  position:absolute;
  z-index:999;
}