.panda {
 
  width: 50px;
  height: 50px;
}

.panda-logo{
  width: 90px;
  height: 90px;
}

.col-action {
	width: 100px;
	text-align: center;
}

.col-checkbox{
  width: 20px;
  text-align: center;  
}
 
.clickable-row{
  cursor: pointer;
}   

.alertmodal {
  text-align: center;
  padding: 0!important;
  margin-right: 3px;
}

.alertmodal:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: 0px;
}

.alertmodal-dialog {
  display: inline-block;
  text-align: center;
  vertical-align: middle;
  margin-right: 20px;
}
 
/* .form-checkbox
{
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  display: inline-block;
  position: relative;
  background-color: #e2e0e0;
  color: #666;  
  height: 15px;
  width: 15px;
  border-radius: 3px;
  border: 0;   
  cursor: pointer;        
  outline: none;
}*/
/*.form-checkbox:checked::before
{
  position: absolute;
  font: 12px/1 'Open Sans', sans-serif;
  left: 4px;
  top: 1px;
  content: '\02143';
  transform: rotate(40deg);
}
.form-checkbox:hover
{
  background-color: #d6d6d6;
}
.form-checkbox:checked
{
  background-color: #e2e0e0;
}

.form-checkbox:disabled
{
  pointer-events: none;
  background-color: #e2e0e0;
}
*/
.box-plain{
  overflow-y: auto;
  min-height: 75vh;
  max-height: 75vh;
}

.box-inner{
  overflow-y: auto;
  min-height: 315px;
  max-height: 315px;
}

.box-fix{  
  min-height: 315px;
  max-height: 315px;
}


.btn-gap {
  margin-right: 5px;
}

.btn-add {
  background-color: #00cfd6;
  border-color: #00bdc4;
  color: #ffffff;
  border-radius: 0;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  border-width: 1px;
}
.btn-add:hover,
.btn-add:active,
.btn-add.hover {
  background-color: #00bdc4;
  color: #ffffff;
}

.btn-reload {
  background-color: #2cbda4;
  border-color: #4bc7b2;
  color: #ffffff;
  border-radius: 0;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  border-width: 1px;
}

.btn-reload:hover,
.btn-reload:active,
.btn-reload.hover {
  background-color: #4bc7b2;
  color: #ffffff;
}

.btn-edit {
  background-color: #ffa84c;
  border-color: #ea9233;
  color: #ffffff;
  border-radius: 0;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  border-width: 1px;
}
.btn-edit:hover,
.btn-edit:active,
.btn-edit.hover {
  background-color: #ea9233;
  color: #ffffff;
}

.btn-delete {
  background-color: #ff4444;
  border-color: #ef3434;
  color: #ffffff;
  border-radius: 0;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  border-width: 1px;
}
.btn-delete:hover,
.btn-delete:active,
.btn-delete.hover {
  background-color: #ef3434;
  color: #ffffff;
}

.btn-retag {
  background-color: #001933;
  border-color: #002a54;
  color: #ffffff;
  border-radius: 0;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  border-width: 1px;
}
.btn-retag:hover,
.btn-retag:active,
.btn-retag.hover {
  background-color: #002a54;
  color: #ffffff;
}

.box-option-right {
  background-color: #e5e5e5;
  border: 2px solid #d2d2d2;
  z-index: 99;
  position: absolute;  
  right: -55px;
  width: 70px;
  height: 40px;
  padding-top: 8px;
  border-radius: 8px;
}

.box-option-left {
  background-color: #e5e5e5;
  border: 2px solid #d2d2d2;
  z-index: 99;
  position: absolute;  
  right: 55px;
  width: 70px;
  height: 40px;
  padding-top: 8px;
  border-radius: 8px;
}

.padding-top-10 {
  padding-top: 10px;  
}

.padding-top-20 {
  padding-top: 20px;  
}

.readonly:read-only {
  background-color: white;
}
.readonly:-moz-read-only { /* For Firefox */
  background-color: white;
}

@media (min-width: 768px) {
  .modal-xl {
    width: 90%;
   max-width:1200px;
  }
}

/*jimmy*/

.form-control{

background-color: aliceblue;


}

.father {

color: blue;

}

.price{

text-align: right;

}

@media (min-width: 768px){
.zeroheight_pcver {
    height: 0;
  }
}

@media (min-width: 768px){
.topfifty_pcver {
    top: 50px;
  }
}

tr.active td select{
    color: black;
}

.hidden-refno{

display: none;

}

  
.navbar-static-top > .logo:hover {
    background-color: #dbea38;
}
  
.table-bordered > thead > tr > th, .table-bordered > tbody > tr > th, .table-bordered > tfoot > tr > th, .table-bordered > thead > tr > td, .table-bordered > tbody > tr > td, .table-bordered > tfoot > tr > td {
    border: 1px solid #b7b7b7;
}

.table-bordered {
    border: 1px solid #b7b7b7;
}

.dropdown-menu {
    background-color: whitesmoke;
}

.box {
    margin-bottom: 0px;
}

  
.dataTables_filter >label> input { width: 100px !important}
.dataTables_filter >select { width: 100px !important}

#po_list_box > .box-solid > .box-plain{
  overflow-y: unset;
}

#grn_list_box > .box-solid > .box-plain{
  overflow-y: unset;
}

#so_list_box > .box-solid > .box-plain{
  overflow-y: unset;
}

#si_list_box > .box-solid > .box-plain{
  overflow-y: unset;
}

#list_box > .box-solid > .box-plain{
  overflow-y: unset;
}

#po_list > tbody > tr{
  cursor: pointer;
}

#grn_list > tbody > tr{
  cursor: pointer;
}
#so_list > tbody > tr{
  cursor: pointer;
}
#si_list > tbody > tr{
  cursor: pointer;
}
#list > tbody > tr{
  cursor: pointer;
}

.clickable >  tbody > tr{
  cursor: pointer;
}


.dt-button{

border-radius: 3px !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    border: 1px solid transparent !important;
    background-image: unset !important;
    padding: 1px 5px !important;
    font-size: 12px !important;
    line-height: 1.5 !important;
    border-radius: 3px !important;

}

.dt-button.active:not(.disabled){

background-color: #bbbbbb !important;

}

.main-footer {

    padding-top: 10px;
    padding-bottom: 10px;

}

.carousel-indicators li {

    background-color: white;
    border: black 1px solid;

}

.carousel-indicators .active {

    background-color: black;
    border: black;
}


.table{
width : 100% !important;
white-space: nowrap;
}

.treeview-menu > li > a {
    color: #777777;
    overflow: hidden;
    text-overflow: ellipsis;
}

.box-body>.nav>li>a {
    padding: 5px 10px;
}

.tab-pane>.nav>li>a {
    padding: 5px 8px;
}

.content {
    padding-top: 10px;
    padding-bottom: 0px;
  }

hr {
    margin-top: 10px;
    margin-bottom: 10px;
}

.item_image {
  transition: transform .2s;
  width: inherit;
  height: auto;
  margin-top: 10px;
  margin-bottom: 25px;
  border: 1px solid;
}

.item_image:hover {
  -ms-transform: scale(1.5); /* IE 9 */
  -webkit-transform: scale(1.5); /* Safari 3-8 */
  transform: scale(1.5); 
}

.search-input {
      display: block;
    width: 100%;
    margin: auto;
}


table{
  -webkit-user-select: none;/*disable highlight select*/
}/*desmond*/

.toolbar{

float: left;

}


/*Desmond for modal to scroll after second modal open*/
.modal { overflow: auto !important; }

#excel_table{

    max-height: 33vh;
    overflow: auto;
  
}

#table_paste_from_excel {
    width: 100%;

}

#table_paste_from_excel > tbody > tr > td {
    border: 1px solid;
}

.modal-control-size{

  overflow-y: auto;
  /*max-height: 70vh;*/
  max-height: 72vh;
}

.table_main_header th{

  text-align: center;

}


.alignright{

  text-align: right;

}


.alignleft{

  text-align: left;

}

/*desmond to remove the up down spinner because number right align will be push up by the spinner*/
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}

/*Desmond to add back number arrow but must before input element*/
.reset [type="number"] {
    -moz-appearance: spinner-textfield;
}

.reset input[type='number']::-webkit-outer-spin-button,
.reset input[type='number']::-webkit-inner-spin-button {
    -webkit-appearance: inner-spin-button;
}

/*this one is remove the page scrollbar*/
body::-webkit-scrollbar {
    display: none;
}



.active_button{
    background-color: #80ff80;
}

.active_button_2{
    background-color: #28a745;
    color: white !important;
}