#top{position: fixed; width:100%; height: 30px; background: #fff; margin-top: -10px;}
#main{padding-top: 0px;}
#version{color: #d0d0d0;font-weight:100;float:right;}
h1,h2,h3,h4{text-align:center;margin: 0;}
hr{width:100%;margin-bottom:50px;}
input[type=number]{border:none;text-align:center;width: 100%;height: 20px;padding: 0;}
.box { border-left:1px solid #bbb; border-right:1px solid #bbb; border-bottom: 1px solid #bbb; width:95%; min-height:20px; }
.quarter-box { border-left:1px solid #bbb; border-right:1px solid #bbb; border-top: 1px solid #bbb; border-bottom: 1px solid #bbb; width:67%; min-height:20px; }
.box div{display: inline-block;}
.box-left{ width:50%;float: left;}
.box-right{ width:50%;float: right;}
#pre-root, #root { max-width: 1200px; margin: 0 auto; }
.half{ width:45%; }
.quarter{ width:35%; text-align:right; }
.three-quarter{ width:65.9%; text-align:right; }
.left-line{border-left:1px solid #bbb; width:30%; text-align:center;}
.blank{border-left:none;border-right:none;}
.empty-cell{border:0;}
.empty-top{border-top:0;}
.empty-bottom{border-bottom:0;}
.double-top{border-top: 1px solid #bbb;}
.double-bottom{border-bottom: 1px solid #bbb;}
.money-input,.till-input{width:40% !important;height: 23px !important;margin:1px 0;border:1px solid #ccc !important;}
/* .input-div{height:26px;} */
#button-image img{cursor:pointer;}
input{display: inline !important;}
textarea{text-align:left !important;}
.date{margin-left: 5px;}
.btn-link:hover{color:#007bff;text-decoration: none;}

/*@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {*/
@media only screen and (min-width: 481px) and (max-width: 1020px) {
    /* For portrait layouts only */
    #pre-root,#clear-data{display:block !important;}
    .tbs-btn{display: none !important;}
    .three-quarter{ width:66.3%;}
}

/* loading animation */
  #loading{
      display: none;
      position: absolute;
      width: 100%;
      height: 100%;
      background-color: rgba(255,255,255,0.5);
      top: 0;
      bottom: 0;
      z-index: 9999;
  }
  .sk-cube-grid {
    width: 40px;
    height: 40px;
    margin: 300px auto;
  }
  
  .sk-cube-grid .sk-cube {
    width: 33%;
    height: 33%;
    background-color: #2c3e50;
    float: left;
    -webkit-animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
            animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out; 
  }
  .sk-cube-grid .sk-cube1 {
    -webkit-animation-delay: 0.2s;
            animation-delay: 0.2s; }
  .sk-cube-grid .sk-cube2 {
    -webkit-animation-delay: 0.3s;
            animation-delay: 0.3s; }
  .sk-cube-grid .sk-cube3 {
    -webkit-animation-delay: 0.4s;
            animation-delay: 0.4s; }
  .sk-cube-grid .sk-cube4 {
    -webkit-animation-delay: 0.1s;
            animation-delay: 0.1s; }
  .sk-cube-grid .sk-cube5 {
    -webkit-animation-delay: 0.2s;
            animation-delay: 0.2s; }
  .sk-cube-grid .sk-cube6 {
    -webkit-animation-delay: 0.3s;
            animation-delay: 0.3s; }
  .sk-cube-grid .sk-cube7 {
    -webkit-animation-delay: 0s;
            animation-delay: 0s; }
  .sk-cube-grid .sk-cube8 {
    -webkit-animation-delay: 0.1s;
            animation-delay: 0.1s; }
  .sk-cube-grid .sk-cube9 {
    -webkit-animation-delay: 0.2s;
            animation-delay: 0.2s; }
  
  @-webkit-keyframes sk-cubeGridScaleDelay {
    0%, 70%, 100% {
      -webkit-transform: scale3D(1, 1, 1);
              transform: scale3D(1, 1, 1);
    } 35% {
      -webkit-transform: scale3D(0, 0, 1);
              transform: scale3D(0, 0, 1); 
    }
  }
  
  @keyframes sk-cubeGridScaleDelay {
    0%, 70%, 100% {
      -webkit-transform: scale3D(1, 1, 1);
              transform: scale3D(1, 1, 1);
    } 35% {
      -webkit-transform: scale3D(0, 0, 1);
              transform: scale3D(0, 0, 1);
    } 
  }