header {
  background-color: #f8344e;
  color: white;
  margin-bottom: 20px;
}

#download {
  margin-top: 20px;
}

#subt {
  border-bottom: 3px solid #f8344e;
}

.center-div{
  font-size: 22px; 
  padding: 5px;
  border-radius: 3px;
  -webkit-box-shadow: 9px 12px 12px -10px rgba(0,0,0,0.75);
-moz-box-shadow: 9px 12px 12px -10px rgba(0,0,0,0.75);
box-shadow: 9px 12px 12px -10px rgba(0,0,0,0.75);
    margin: 0 auto;
    width: 40%; /* value of your choice which suits your alignment */
    border: 1px solid black; 
}

.tbox {
  display: flex;
    justify-content: space-between;
  -webkit-border-radius: 10px 10px 10px 0px;
  border-radius: 10px 10px 10px 0px;
  resize: both;
  overflow: auto;
  min-width: 60px; /*suggest a min-width & min-height*/
  min-height: 60px;
  border: 3px solid #f8344e;
  background: rgba(255,255,255,0);
  background: -moz-linear-gradient(left, rgba(255,255,255,0) 100%, rgba(241,54,30,NaN) 100%);
  background: -webkit-gradient(left top, right top, color-stop(100%, rgba(255,255,255,0)), color-stop(100%, rgba(241,54,30,NaN)));
  background: -webkit-linear-gradient(left, rgba(255,255,255,0) 100%, rgba(241,54,30,NaN) 100%);
  background: -o-linear-gradient(left, rgba(255,255,255,0) 100%, rgba(241,54,30,NaN) 100%);
  background: -ms-linear-gradient(left, rgba(255,255,255,0) 100%, rgba(241,54,30,NaN) 100%);
  background: linear-gradient(to right, rgba(255,255,255,0) 100%, rgba(241,54,30,NaN) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f1361e', GradientType=1 );
}

.btn-delete {
  display: none;
}

.tbox:hover > .btn-delete {
  display: inline-block;
}

.mainDiv:hover > .bubble {
  display: inline-block;
}


.number {
  border-radius: 200px 200px 200px 200px;
    -moz-border-radius: 200px 200px 200px 200px;
    -webkit-border-radius: 200px 200px 200px 200px;
     border: 3px solid #f8344e;
     margin-right: auto;
     margin-left: 0px;
     top: -5px;
     left: -5px;
     background-color: white;
     height: 20px
}

.bubble {
   display: none;
   position: relative;
   width: 150%;
   height: 48px;
   color: #000000;
   text-align: center;
   padding: 0px;
   background: #ffffff;
   border-radius: 0px 10px 10px 10px;
   border: 3px solid #f8344e;
}

.bubble:after {
   content: '';
   position: absolute;
   border-style: solid;
   border-width: 0 23px 24px;
   border-color: #000000 transparent;
   display: block;
   width: 0;
   z-index: 1;
   top: -24px;
   left: 42px;
}
/*
canvas {
  border: 3px solid black; 
  min-height: 800;
  min-width: 800;
  max-height: 1500px;
}
*/
.disablediv {
    pointer-events: none;
    opacity: 0.4;
}