.top-form {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px;
    border: 1px solid #ccc;
    margin-bottom: 30px;
    background: #f5f5f5;
}

.top-form form {
    display: flex;
    gap: 10px;
    align-items: center;
}

.top-form form .wrapper {
    display: flex;
    flex-direction: column;
}
.top-form form  .wrapper label{font-size:14px}
.top-form form  .wrapper input, .top-form form .wrapper select {
    height: 40px;
    padding: 5px;
    box-sizing: border-box;
    margin: 5px 0;
    border: 1px #ccc solid;
    font-size: 16px;
} 

button[type='submit']{background: #f3b21c;height: 50px;font-family: inherit;font-size: 16px;font-weight: bold;border: none;padding: 0 20px;}
button#export{background: #57a957;color:white;height: 40px;border: none;padding: 0 20px;}
.login-btn{background:#f5f5f5;padding:5px 10px;cursor:pointer;border:1px #ccc solid}

table td .multi-select-wrapper{width:100px}

.wrapper {
    display: flex;
    flex-direction: column;
    align-items: start;
}

.multi-select-wrapper {
  display: inline-block;
  position: relative;
  width: 250px;
  margin: 5px 0;
}

.multi-select-display {
  border: 1px solid #ccc;
  padding: 5px;
  background-color: #fff;
  cursor: pointer;
  user-select: none;
  height: 40px;
  box-sizing: border-box;
  align-items: center;
  display: flex;
}

.multi-select-options {
  position: absolute;
  top: 100%;
  left: 0;
  background: white;
  border: 1px solid #ccc;
  width: 100%;
  min-width: 250px;
  max-height: 150px;
  overflow-y: auto;
  display: none;
  z-index: 10;
}

.multi-select-options label {
  display: flex;
  padding: 5px;
  align-items: center;
  gap: 10px;
  height: 26px;
}

.multi-select-options label:hover {
  background: #f0f0f0;
}


form#editCustomerForm {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}
  
  .form-group {
    margin-bottom: 15px;
	width:30%;
	min-width:220px
  }

  .form-group2{width:100%}

  .form-group label {
    font-weight: bold;
    display: block;
    margin-bottom: 5px;
  }

  .form-control {
    width: 100%;
    padding: 6px 10px;
    box-sizing: border-box;
    font-size: 14px;
  }

  .checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-left: 10px;
  }

 


table input[type="text"] {
    width: 60px;
    text-align: center;
    height: 40px;
}

.tbl-product-pic{width:100px}

.category-sum-line {
	border-bottom:1px solid #ccc;min-width:90px;
}
.category-sum span:nth-child(1) {
    font-size: 12px;
	color:#777;
}

.category-sum {
    display: flex;
    flex-direction: column;
    border: 1px solid #ccc;
	box-sizing:border-box;
	min-width:90px;
	border-bottom:0
}

.category-sum.edit {
    padding-right: 30px;
    position: relative;
	padding-left:6px
}

.category-sum.edit .prod-quantity{
    position: absolute;
    right: 0;
    top: 9px;
    width: 30px;
    height: 30px;
    }

.category-sum.edit a {
    font-size: 0;
    position: absolute;
    right: 0;
    top: 2px;
    width: 30px;
    height: 30px;
    background-image: url(/assets/img/compose.svg);
    background-size: 20px;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.5;
    cursor: pointer;
}

.category-sum.edit input{display:none}
.category-sum.edit.in-edit input{display:block;margin:5px auto 4px}
.category-sum.edit.in-edit span{display:none}
.category-sum.edit.in-edit a{background-image:url(/assets/img/accept.svg);opacity:1}

.select-budget-type{display:flex;gap:10px}
.select-budget-type label{padding:3px 5px}
.select-budget-type label:nth-child(1),#customers-table td div.category-sum:nth-child(1),#customers-table th div.category-sum:nth-child(1) {background-color: #f9e0a4;}
.select-budget-type label:nth-child(2),#customers-table td div.category-sum:nth-child(2),#customers-table th div.category-sum:nth-child(2) {background-color: #effd75;}
.select-budget-type label:nth-child(3),#customers-table td div.category-sum:nth-child(3),#customers-table th div.category-sum:nth-child(3) {background-color: #b2ffc3;}
.select-budget-type label:nth-child(4),#customers-table td div.category-sum:nth-child(4),#customers-table th div.category-sum:nth-child(4) {background-color: #c4f4ff;}
#tbl-top:not(.Proposed) + #customers-table td div.category-sum:nth-child(1){display:none}
#tbl-top:not(.Agreed) + #customers-table td div.category-sum:nth-child(2){display:none}
#tbl-top:not(.On-Progress) + #customers-table td div.category-sum:nth-child(3){display:none}
#tbl-top:not(.Supplied) + #customers-table td div.category-sum:nth-child(4){display:none}

#tbl-top2:not(.Proposed) + #customers-table th div.category-sum:nth-child(1){display:none}
#tbl-top2:not(.Agreed) + #customers-table th div.category-sum:nth-child(2){display:none}
#tbl-top2:not(.On-Progress) + #customers-table th div.category-sum:nth-child(3){display:none}
#tbl-top2:not(.Supplied) + #customers-table th div.category-sum:nth-child(4){display:none}


.tbl-top{display:flex;justify-content: space-between;align-items: center;}

.tbl-tabs {
    display: flex;
    gap: 5px;
}

.tbl-tabs .tbl-tab {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    padding: 0 10px;
    cursor: pointer;
    background: #f5f5f5;
}

.tbl-tabs .tbl-tab.active {
    background: white;
}


#customers-table tr >*:not(.all){display:none}
#customers-table.byG tr > *.byG{display:table-cell}
#customers-table:not(.byG) tr > *.notG{display:table-cell}
#customers-table.byC tr > *.byC{display:table-cell}
#customers-table.bySP tr > *.bySP{display:table-cell}