body{font-family: "Figtree", sans-serif; font-size: 14px; font-optical-sizing: auto;}
a,a:hover{text-decoration: none;}
strong{font-weight: 600}
.account{position: absolute; right: .5rem; top:25px;}
.account button{border-radius:50%; width: 35px; height: 35px; font-size: 22px !important}
.logo{max-height: 35px}
.list-group-flush .material-symbols-outlined{width: 24px; height: 24px; overflow: hidden; float: left; margin-right: 1.5rem}
.menu{display: none;}
.show-menu {display: block !important;}
.menu a{border: none !important; font-size: 15px; margin-top: .5rem; margin-bottom: .5rem; color: #222}
.menu a:hover{background:#f1f6fa;}
.menu .active{background:#fff; border-right: 3px solid #0052cc !important; color: #0052cc; font-weight: 500}
.full-height {min-height: 100vh;}
.stats p{line-height: 1rem}
.stats h5{clear: both;}

.custom-tab{border-color: #ededed!important}
.custom-tab .nav-link{color: #444 !important; padding: 5px 12px; border:none;  border-radius:0px; font-size: 14px; font-weight: 500}
.custom-tab .active{color: #5878eb !important; border-bottom: 3px solid #5878eb !important; background: transparent !important; font-weight: 600}
.nav-pills .nav-link{color: #666; font-weight: 500; border-radius: 0}
.nav-pills .active{background-color: #0052cc !important}
.bg-light{background: #f3f5f7 !important}
.table td, .table th{vertical-align: middle; border-color: #ededed !important; font-weight: 500; padding-top: .9rem !important; padding-bottom: .9rem !important}
.table th{color: #000; font-weight: 600}
.table th .material-symbols-outlined{font-size: 16px; float: left; margin-right: .25rem; margin-top: .1rem; height: 17px; width: 17px; overflow: hidden;}
.table td{color: #444;}
.table td .btn-light{color: #0052cc; border-color: #eee;}
.table td .btn-light:hover{color: #fff; border-color: #0052cc; background-color: #0052cc}
.table-sm td, .table-sm th{font-weight: 500; padding-top: .4rem !important; padding-bottom: .4rem !important}

.sticky-col {position: -webkit-sticky; position: sticky; z-index: 2;}
.end-col {right: -2px;}
.end-col .dropdown-menu{right: 42px !important;  background: #fff;}

.up{background: #dbf3f5; font-size: 16px !important; padding: 2px; border-radius: 50%; color: #46b8c6; float: left; margin-right: .5rem}
.down{background: #f4dcdc; font-size: 16px !important; padding: 2px; border-radius: 50%; color: #d74545; float: left; margin-right: .5rem}
.nil{background: #eee; font-size: 16px !important; padding: 2px; border-radius: 50%; color: #aaa; float: left; margin-right: .5rem}
.of-hide{overflow: hidden !important;}
.btn-search .material-symbols-outlined{font-size: 20px !important; width: 26px; height: 20px; overflow: hidden;}
.btn-primary{background: #0052cc !important}
.btn-primary:hover{background: #1f68ef !important}
.text-success{color: #36d280 !important}

.customer{width: 32px !important; height: 32px; border-radius: 50%; display: block; font-size: 20px; 
	font-weight: 600; text-align: center; line-height: 25px; float: left; margin-right: 1rem !important; margin-top:4px; margin-bottom: 20px }

.light-info{background: #dbf3f5;}
.light-danger{background: #f4dcdc;}
.light-success{background: #eefce6;}
.light-primary{background: #e0e9fe;}

.form .form-control, .form .form-select{border-color: #aaa!important; min-height: 52px; border-radius: 16px}
.form-control, .form-select{border-color: #aaa!important}
.form-control-sm, .form-select-sm{border-color: #999!important; max-height: 30px !important; min-height: 30px !important; border-radius: 12px}
.btn-submit{min-height: 52px; border-radius: 16px}
.border-secondary{border-color: #aaa!important;}
.building-ico{width: 40px !important; height:40px !important; border-radius: 50%; float: left; margin-right: 1rem !important;}
.pay-ico{width: 30px !important; height:30px !important; border-radius: 50%; float: left; margin-right: 1rem !important;}
.modal-body .table th{background: #eff5fb; padding-top: .4rem !important; padding-bottom: .4rem !important}
.modal-body .table td, .offcanvas-body .table td{vertical-align: middle; border-bottom-color: #ddd !important; color: #333; padding: .4rem !important;}
.modal-body .table-sm td, .offcanvas-body .table-sm td{padding: .4rem .2rem !important;}

.modal-body .table tr td:first-child, .modal-body .table th:first-child, .offcanvas-body .table tr td:first-child, .offcanvas-body .table tr th:first-child{padding-left: .2rem !important;}
.table-sm tr td:first-child, .table-sm tr th:first-child{padding-left: .2rem !important;}

.footer-menu{position: fixed; padding: 0 !important; bottom: 0; left: 0; width: 100%; z-index: 99; border-top: 1px solid #e0f0ff !important; background: #f8fbfe;}
.menu-border{border-right: 1px solid #e0f0ff !important;}
.footer-menu a{font-size: 11px; text-align: center; display: block; color: #444; width: 20%; float: left; 
  border-top:2px solid #f8fbfe; padding: .25rem 0;}
.footer-menu-ico {max-height: 30px}
.footer-menu .active{background:#e0f0ff !important; color: #222}

.oneline, .oneline-toggle {
  display: block;
  max-width: 170px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: all 0.5s ease-in-out;
  position: relative;
  z-index: 1;
  text-align: left;
}
.oneline-toggle {
  white-space: normal;
  max-width: 170px;
  min-width: 170px;
}

.btn-success{background-color: #22b051; border-color: #22b051}


/* For Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: #888 transparent;
}

/* For WebKit browsers (Chrome, Safari, Edge) */
*::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  background-color: #888;
  border-radius: 10px;
}

*::-webkit-scrollbar-thumb:hover {
  background-color: #555;
}

/* Chrome, Safari, Edge, Opera */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

.success-tick{display: inline-block; width: 20px; height: 20px; overflow: hidden; color: #fff; background: #36d280 !important; border-radius: 50%; font-size: 18px !important; line-height: 20px; text-align: center; float: right;}
.filter-btn{height: 30px; line-height: 20px; padding: 4px 8px; border:1px solid #e5e5e5;}

@media (min-width: 1360px) and (max-width: 6000px){
.menu{display: block !important;}
.stats{text-align: right;}
.stats h5{font-size: 24px; font-weight: 600}
.menu-bg{min-height: 100vh}
.lg-show{display: block;}
.lg-hide{display: none !important;}
.footer-menu{display: none !important}
.table tr td:first-child, .table tr th:first-child{padding-left: 1.5rem !important}
.table-sm tr td:first-child, .table-sm tr th:first-child{padding-left: .4rem !important;}
.custom-tab .nav-link{font-size: 16px !important; padding-bottom: .75rem}
.nav-pills .nav-link{font-size: 16px !important; padding-left: 2rem; padding-right: 2rem}
}

@media (min-width: 1000px) and (max-width: 1360px) and (orientation: landscape) {
 .table tr td:first-child, .table tr th:first-child{padding-left: 1rem !important}
 .footer-menu{display: none !important;}
 .menu{display: block !important;}
 .menu-bg{min-height: 100vh}
 .lg-hide{display: none !important;}
 .lg-show{display: block !important;}
}

@media (min-width: 1000px) and (max-width: 1080px) and (orientation: portrait) {
  .footer-menu{display: none !important;}
  .menu{display: block !important;}
  .menu-bg{min-height: 100vh}
  .lg-hide{display: none !important;}
  .lg-show{display: block !important;}
  .filter .sm-hide{display: block !important;}
  .table td .btn-light{color: #0052cc; border-color: #eee; display: block; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; max-width: 120px;}
}

@media (min-width: 760px) and (max-width: 1080px) and (orientation: portrait) {
.right-top{position: absolute; right: 1rem; top:.5rem; min-width: 90px}
 .sm-hide{display: none;}
 .filter .sm-hide{display: block !important;}
 .table tr td:first-child, .table tr th:first-child{padding-left: 1.5rem !important}
 .lg-show{display: block !important;}
 .menu-btn{font-size: 32px !important}
}

@media (min-width:320px) and (max-width: 699px){
  body{padding-bottom: 50px}
  .lg-show{display: none;}
  .sm-hide{display: none;}
  .account{ right: 1rem; top:6px;}
  .account button{width: 38px; height: 38px; font-size: 22px !important}
  .stats img{max-height: 55px; margin-bottom: 20px}
  .menu-bg{border-bottom: 1px solid #e0f0ff !important;}
  .menu-btn{font-size: 32px !important}
  .action-bottom{border-top:1px solid #ddd; position: fixed; padding: 0px; bottom: 54px; left: 0; z-index: 777; background: #fff; width: 100%;}
  .action-bottom .single-btn{width: 100%; border-radius: 0 !important; height: 50px; line-height: 36px}
  .right-top{position: absolute; right: 1rem; top:.5rem; min-width: 90px}
  .table tr td:first-child, .table tr th:first-child{padding-left: .4rem !important}
  .table td .btn-light{color: #0052cc; border-color: #eee; display: block; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; max-width: 100px;}
  .table td .btn-sm{font-size: 13px}
  .sticky-col{border-left: 1px solid #eee !important}
  .stats .material-symbols-outlined{margin-bottom: .5rem !important}
  .sticky-top{position: -webkit-sticky; position: sticky;}

}
@media (min-width:320px) and (max-width: 340px){
  .footer-menu a{font-size: 10px;}
  }


.paid-stamp {
  position: absolute;
  top: 120px;
  right: 100px;
  font-size: 30px;
  font-weight: bold;
  color: rgba(0, 128, 0, 0.3); /* green transparent */
  transform: rotate(-20deg);
  border: 3px solid rgba(0, 128, 0, 0.3);
  padding: 8px 16px;
  border-radius: 10px;
  z-index: 1000;
  pointer-events: none;
  font-family: 'Arial Black', sans-serif;
}

  @media print {
  body * { visibility: hidden; }
  .invoice-head { margin-top: 100px; }
  .modal-body, .modal-body * { visibility: visible !important; }
  .modal-body { position: absolute; left: 0; top: 0; width: 100%; z-index: 9999; background: white; font-size: 13px; }
  #print-header, #print-footer { position: fixed; width: 100%; background: white; padding: 10px 0; z-index: 1000; }
  #print-header { top: 0; }
  #print-footer { bottom: 0; }
  .modal-body .page{ page-break-before: always !important; break-before: always !important; }
  .modal {position: absolute; left: 0; top: 0; width: 100%; height: auto; overflow: visible !important;}
  .modal-header{display: none !important;}
  @page { margin: 10mm 20px; margin-bottom: 0px !important; }
  thead { display: table-header-group; }
  tfoot { display: table-footer-group; }
}