html, body {
  font-family: Arial, Helvetica, sans-serif;
  height: 100%;
  margin: 0;
}


/* id box_menu */
#box-menu {
  width: 150px;
  float:left;  
  padding: 0px 10px; 
  display: block;
}

div.box-menu {
  width: 150px;
  float:left;  
  padding: 0px 10px; 
  display: block;
}

img.mainmenu-img {
  width: 100px; 
  height: 100px
}

#tabel_transaksi td:hover {
  cursor: pointer;
}


@media print {
            body {
                padding-top: 0;
            }

            #action-area {
                display: none;
            }
        }

        @media screen and (min-width: 1025px) {
            .btn-download {
                display: none !important;
            }

            .btn-back {
                display: none !important;
            }
        }

        @media screen and (max-width: 1024px) {
            .content-area>div {
                width: auto !important;
            }

            .btn-print {
                display: none !important;
            }
        }

        @media screen and (max-width: 720px) {
            .content-area>div {
                width: auto !important;
            }
        }

        @media screen and (max-width: 420px) {
            .content-area>div {
                width: 790px !important;
            }
        }

        @media screen and (max-width: 430px) {
            .content-area {
                transform: scale(0.59) translate(-35%, -35%)
            }

            .content-area>div {
                width: 720px !important;
            }

            .btn-print {
                display: none !important;
            }
        }

        @media screen and (max-width: 380px) {
            .content-area {
                transform: scale(0.45) translate(-58%, -62%);
            }

            .content-area>div {
                width: 790px !important;
            }

            .btn-print {
                display: none !important;
            }
        }

        @media screen and (max-width: 320px) {
            .content-area>div {
                width: 700px !important;
            }
        }



    .col-span-2, .col-span-8{
      float:left;
      min-height:1px;
    }
    .col-span-2{
      width:20%;
    }
    .col-span-8{
      width:60%;
    }
    .sticky-container{
      
      height:100%;
      position:relative;
      
    }
    .sticky-box{
      position: -webkit-sticky;
      position: sticky;
      /*the following is how far from the top of the screen you want your element to stick if you change it to 20px it will start to stick 20px from the top of the screen*/
      top: 55px;
    }

    .fixed_header tbody{
      display:block;
      overflow:auto;
      height:200px;
      width:100%;
    }
    .fixed_header thead tr{
      display:block;
    }border-collapse: 

    .sticky {
      position: fixed;
      top: 55;
      /*width: 100%;*/
    }

    .sticky + .content {
      padding-top: 50px;
    }

    th {
      background: white;
      position: sticky;
      top: 0;
      box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.4);
    }

.card-header {
    padding: 5px 10px 10px 10px;
} 

/*
#tabel_transaksi tr:hover {
    background-color: #ccc;
}
*/




/* INPUT WITH AUTO COMPLETE */
/*the container must be positioned relative:*/
.autocomplete {
  position: relative;
  display: inline-block;
}

input {
  border: 1px solid transparent;
  background-color: #f1f1f1;
  padding: 10px;
  font-size: 16px;
}

input[type=text] {
  background-color: #f1f1f1;
  width: 100%;
}

input[type=submit] {
  background-color: DodgerBlue;
  color: #fff;
  cursor: pointer;
}

.autocomplete-items {
  position: absolute;
  border: 1px solid #d4d4d4;
  border-bottom: none;
  border-top: none;
  z-index: 99;
  /*position the autocomplete items to be the same width as the container:*/
  top: 100%;
  left: 0;
  right: 0;
}

.autocomplete-items div {
  padding: 10px;
  cursor: pointer;
  background-color: #fff; 
  border-bottom: 1px solid #d4d4d4; 
}

/*when hovering an item:*/
.autocomplete-items div:hover {
  background-color: #e9e9e9; 
}

/*when navigating through the items using the arrow keys:*/
.autocomplete-active {
  background-color: DodgerBlue !important; 
  color: #ffffff; 
}