@charset "UTF-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');

*{box-sizing: border-box;}
body{ margin: 0; padding: 0; padding-top: 70px;font-family: 'Ubuntu', sans-serif; background: #f8f9fa;}
h1,h2,h3,h4,h5,h6,p,ul,li{margin: 0; padding: 0; list-style: none; text-decoration: none;}
.pad0{padding: 0 !important;}
.pt0{padding-top: 0 !important;}
.pad10{padding:0px 15px 0px 0px;}
.padt35{padding-top: 35px !important;}
.mgt15{margin-top: 15px;}
.marb30{margin-bottom: 20px;}
.d-f{display: flex;}
.db{display: block;}
.row{display: flex;}
.col-1{width: 10%;}
.col-2{width: 20%;}
.col-3{width: 30%;}
.col-4{width: 40%;}
.col-5{width: 50%;}
.col-6{width: 60%;}
.col-7{width: 70%;}
.col-8{width: 80%;}
.col-9{width: 90%;}
.col-10{width: 100%;}
.t-r{text-align: right;}
.t-l{text-align: left}
.t-c{text-align: center}
.jc-sbw{justify-content: space-between;}
.fs-20{font-size: 20px;}
.spa-heading{font-size: 14px; border-bottom: 1px solid #e2e5e7; margin: 20px 0px; padding-bottom: 10px;}
.spa-heading.mrt{margin-top: 0;}
.spritimg{background: url(../images/sprit.png) no-repeat;}
.dashboard{background-position: -6px -5px;}
.order{background-position: -29px -5px;}
.billing{background-position: -53px -5px;}
.savequt{background-position: -77px -5px;}
.flex{background-position: -102px -5px;}
.visitcard{background-position: -131px -7px; width: 30px;}
.other{background-position: -159px -7px;}
.status{background-position: -185px -7px;}
.sitevisit{background-position: -209px -7px;}
.expenses{background-position: -232px -7px;}
.overview{background-position: -281px -7px;}
.dailysale{background-position: -258px -7px;}
.copartner{background-position: -8px -60px;}
.multicolor{background-position: -39px -62px;}
.singlecolor{background-position: -311px -8px;}
.gift{background-position: -336px -8px;}

.whatcont{background-position: -100px -59px; display: inline-block; width: 33px; height: 33px;}

.fs-18{font-size: 16px;}
.fs-19{font-size: 19px;
    line-height: 40px;}
.clr-gray{color: #989898;}
.hide{display: none;}

.editicon{float: right; width: 25px;}

.form-text{width: 100%; height: 33px; border: 1px solid #ccc; border-radius: 5px; outline: none; padding: 0px 10px;font-size: 16px;}

.table-head{display: flex; justify-content: space-between; margin-bottom: 18px; padding-bottom: 15px; border-bottom: 1px solid #ccc;}
.table-head .date-filer{display: flex;}
.table-head .date-filer .form-date{padding: 0px 15px 0px 0px;}
.table-head .date-filer .form-date label{font-size: 14px;}
.table-head .date-filer input{width: 120px; height: 30px; border: 1px solid #ccc; font-size: 12px; padding: 0px 4px;}
.table-head .search input{width: 200px; height: 30px; border: 1px solid #ccc; padding: 0px 10px; outline: none;}

.pagination {
  display: inline-block;
	margin-top: 20px;
	float: right;
}

.pagination a {
  color: black;
  float: left;
  padding: 8px 16px;
  text-decoration: none;
  transition: background-color .3s;
  border: 1px solid #ddd;
}

.pagination a.active {
  background-color: #4462a7;
  color: white;
  border: 1px solid #4462a7;
}

.pagination a:hover:not(.active) {background-color: #ddd;}

.coustomer-details{display: flex; justify-content: space-between; border-bottom: 1px solid #ccc; padding-top: 15px; margin-bottom: 20px}
.coustomer-details .invoice h1{font-size:22px;}

.addmoreoption{position: fixed; width: 100%; height: 100%; left: 0; right: 0; top: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.8); z-index: 10; display: none; justify-content: center; align-items: center;}
.addmoreoption.show{display: flex;}
.addmoreoption .popbox{background: #fff; padding: 15px;}
.addmoreoption .popbox h3{font-size: 16px; border-bottom: 1px solid #ccc; margin-bottom: 15px; padding: 0px 0px 10px;}


.unpaid{padding: 3px 4px; color: #fff; background: #FF0000;}
.paid{padding: 3px 4px; color: #fff; background: #007D88;}
.draft{padding: 3px 4px; color: #262a2e; background: #eaeaea;}

.flex-details a{text-decoration: none; color: #4262a6;}
.flex-details select{width: 100px; height: 30px; border: 1px solid #ccc; outline: none;}

.custom-dropdown {
  position: relative;
  width: 250px;
}

.dropdown-header {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  cursor: pointer;
 
  display: flex;
  justify-content: space-between;
  align-items: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 14px;
}

.dropdown-header:after {
  content: "▼";
  font-size: 12px;
  margin-left: 10px;
}

.dropdown-options {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #fff;
  max-height: 150px;
  overflow-y: auto;
  z-index: 1000;
}

.dropdown-options label {
  display: block;
  padding: 10px;
  cursor: pointer;
}

.dropdown-options label:hover {
  background-color: #f0f0f0;
}

.dropdown-options input[type="checkbox"] {
  margin-right: 10px;
}

.custom-dropdown.open .dropdown-options {
  display: block;
}
.dropdown-options label{display: block !important; width: 100%;}

table{width: 100%;}
th{font-size: 12px;
    color: #8392AB;
    font-weight: 500;
    border-bottom: 1px solid #e9ecef; padding-bottom: 8px; white-space: nowrap;
    padding: 5px 20px 10px 0px; text-align: left;}

 td {
  border-bottom: 1px solid #e9ecef; padding: 10px 5px; font-size: 13px; text-align: left;
}
table tr td a{text-decoration: none; color: #000;}

table tr td .edit{background: #198ae3; color: #fff; border: none; cursor: pointer; padding: 3px 5px;}
table tr td .delete{background: #FF0000; color: #fff; border: none; cursor: pointer; padding: 3px 5px;}

.table-noline tr td{border: none; font-size: 15px;}
.table-noline tr td span{width: 30px; display: flex; align-items: center;}
.table-noline tr td span img{width: 100%; margin-right: 5px;}
.table-noline tr td a{text-decoration: none; color: #000;}
.table-noline tr td small{display: block; color: #495057b5; padding: 5px 0px; font-weight: 100;}

.bill-infrom tr td h5 a{text-decoration: none; color: #4262a6;}
.bill-infrom tr td{border: none;}
.bill-infrom tr td span{display: block;}

.bill-inner{background: #f8f9fa; border-radius: 10px;}
.bill-inner tr td{padding: 15px; font-weight: 100; font-size: 12px;}
.bill-inner tr td h5{font-size: 15px; padding: 15px 15px 0;}
.bill-inner tr td.pad0{padding: 0;}
.bill-inner tr td span{display: block; padding: 5px 0px; font-weight: 400; font-size: 13px;}

.total-amount{width: 100%; padding: 10px 15px;}
.total-amount tr td:last-child{text-align: right;}

.total-amount tr td{border-bottom: none;}
.total-amount tr td .form-control{border: 1px solid #d9dbe1;
    width: 100%;
    height: 30px;
    outline: none;
    padding: 5px 10px;}

    .total-amount tr td input[type='submit']{background-color: #198ae3; border-radius: 5px; color: #fff; width: 100%; font-size: 16px; padding: 12px 10px; outline: none; border: none; cursor: pointer;}
    .total-amount tr td input.addreark{background-color: #FBAB7E;
      background-image: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%); color: #000; width: auto;
      }

.upload-tabbox .card{padding: 0; margin-top: 20px;}
.upload-tabbox .tabpanel .tabbox ul{width: 100%; border-bottom: 1px solid #ccc;}


.heading-btn{display: flex; justify-content: space-between; margin-bottom: 20px;}
.heading-btn h4{padding: 5px 0px 0px !important;}
.heading-btn .btn-default{padding: 9px 15px; font-size: 14px;}


input:read-only {
  background-color: #F8F9FA;
}

.fw-l{font-weight: 100 !important;}

.mrt25{margin-top: 25px;}



.card{padding: 10px;}
.card-body{background: #fff; border-radius: 10px; padding: 15px;box-shadow: 0px 8px 24px rgba(27, 46, 94, 0.12);}
.card-body h3{padding: 10px;}
.card-body h4{padding: 5px 0px 30px; font-weight: 400;}

.top-calc{background: url("../images/img-status-9.svg") no-repeat right top,#f2f8ff;
    border: 2px solid #DBE0E5;}


.btn-default{border: 1px solid #4262a6; color: #4262a6; display: inline-block; text-decoration: none;cursor: pointer; border-radius: 5px;}
.btn-danger{border: 1px solid #fe7c96; background: #fe7c96; color: #ffffff; cursor: pointer; border-radius: 5px;}
.btn-danger-dark{border: 1px solid #de2f52; background: #de2f52; color: #ffffff; cursor: pointer; border-radius: 5px;}
.btn-prime{border: 1px solid #198ae3; background: #198ae3 !important; color: #ffffff; cursor: pointer; border-radius: 5px; text-decoration: none;}
.btn-sucess{background: #209B20; border: 1px solid #198ae3; color: #ffffff; cursor: pointer; border-radius: 5px; text-decoration: none;}


.btn-sm{padding: 8px 15px;}
.btn-lg{padding: 10px 20px; font-size: 18px;}

.leftbar{width: 22%; position: fixed; height: 100%; left: 0; top: 0; bottom: 0; background: #F2F5F8; padding: 25px;}
.leftbar figure{width: 83px;}
.leftbar figure img{width: 100%; margin-bottom: 40px;}
.leftbar ul li a{font-size: 16px; line-height: 25px; color: #646464; padding: 8px 15px; display: block;}
.leftbar ul li a:hover{background: #fff;border-radius: 5px;color: #6765FE;}
.leftbar ul li.acive a{background: #fff;border-radius: 5px;color: #6765FE;}
.leftbar ul li ul li a{font-size: 14px; line-height: 21px; padding-left: 25px;}
.mainbox{width: 78%; right: 0; top: 0; bottom: 0; position: fixed; height: 100%; padding: 25px; overflow: auto;}
.mainbox h1{font-size: 26px; line-height: 39px; font-weight: 600; margin-bottom: 40px;}

.mainbox h1 a{background: #6765FE 0% 0% no-repeat padding-box; border-radius: 3px; font-size: 16px; font-weight: 400; color: #fff; padding: 3px 20px; float: right; margin-right: 30px;}

.mainbox h2{font-weight: 500;}
.mainbox h2 a{background: #000000; border-radius: 25px; color: #fff;padding: 5px 12px;}



.leftbar.bg{background: url("../images/Group 253.png") no-repeat; background-size: cover; display: flex; justify-content: center; align-items: center; flex-direction: column;}
.leftbar.bg form{width: 100%;}
.leftbar.bg .form-group{width: 100%; padding-right: 0;}
.leftbar.bg h2{font-weight: 600; font-size: 21px; line-height: 38px; margin-bottom: 15px; color: #fff;}
.leftbar.bg h2 span{font-weight: 100;}
.leftbar.bg .form-group a{font-size: 14px; text-align: right; display: block; padding: 6px 0px; color: #fff; font-weight: 100;}

.leftbar.bg .form-group input[type="submit"]{background: #25E3A8;box-shadow: 0px 3px 6px #00000029;
border-radius: 5px;color: #fff; font-size: 14px; text-transform: uppercase; cursor: pointer;}

.login{display: flex; flex-direction: column; justify-content: center; align-items: center;}
.login p{width: 500px;color: #24274E; font-size: 14px; line-height: 21px; text-align: center; margin-top: 20px;}

/* .sticky {
  position: fixed;
  top: 0;
background: #fff;
	box-shadow: 0px 8px 24px rgba(27, 46, 94, 0.12);
	border-radius: 5px;
} */

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

.leftslid{width: 30px;}
.leftslid img{width: 100%; cursor: pointer;}

header{ height: 70px; position: fixed; top: 0; right: 0; left: 0; padding: 5px 20px; display: flex; justify-content: space-between; align-items: center; z-index:9; background: #fff; border-bottom: 1px solid #e9e9e9;}
header .logo{width: 260px; position: relative; top: 2px; padding: 5px 0px 5px 0px;}
header .logo img{width: 100%;}
header .logo h2{font-size: 20px; font-weight: bold; color: #4462a7;}
header .logo h2 span{font-size: 13px; font-weight: lighter; display: block; color: #000;}
header .logout a{display: inline-block; padding: 3px 0px; border-radius: 5px; text-decoration: none;}

header .logout .profile{display: flex;}
header .logout .profile .icon{width: 40px; height: 40px; border-radius: 50%;}
header .logout .profile .icon img{width: 100%;}
header .logout .profile .name{padding: 0px 10px; font-weight: 500; color: #4262a6;}
header .logout .profile .name small{display: block; text-align: right; font-weight: 100; color: #000;}

.bredcrum ul{display: flex; padding: 10px 0px;}
.bredcrum ul li{padding: 0px 20px 0px 0px; font-size: 16px; position: relative; font-weight: lighter;}
.bredcrum ul li a{opacity: 0.5; color: #344767;}
.bredcrum ul li a::after{content: '/'; position: absolute;right: 7px; font-size: 12px; line-height: 18px; }
.bredcrum ul li.active::after{content: '';}
.bredcrum ul li a{text-decoration: none;}

.top-menu ul{display: flex;}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

.tabs li.active {
    font-weight: bold; /* Example styling for the active tab */
}

.hiddennew{visibility: hidden;}

.loader {
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background-color: #ffffffcf;
display: flex; justify-content: center; align-items: center;
}


.right-header{width: 100%; display: flex; justify-content: space-between; padding: 15px 15px;}
.right-header .rightdetails{display: flex; align-items: center;}

.right-header .rightdetails .notifaction{position: relative; width:25px; margin-right: 30px;}
.right-header .rightdetails .notifaction img{width: 100%; cursor: pointer;}
.right-header .rightdetails .notifaction span{position: absolute; width: 17px; height: 17px; border-radius: 50%; background: #4462a7; color: #fff;    right: -9px; top: -8px; text-align: center;}
.right-header .rightdetails .notifaction .notibox{position: fixed; width: 30%; height: 100%; background: #fff; top: 0; z-index: 10; box-shadow: 0px 0px 10px rgba(0,0,0,0.15); padding: 15px 20px; right: -30%; transition: .3s;}

.right-header .rightdetails .notifaction .notibox.active{right: 0; transition: .3s;}

.overlay{ width: 70%; height: 100%; background-color: rgba(0,0,0,0.8); position: fixed; right: 0; top: 0; bottom: 0; z-index: 20; left: -70%; transition: .3s;}
.overlay.active{left: 0; transition: .3s;}



.right-header .rightdetails .notifaction .notibox h4{font-size: 18px; padding-bottom: 20px;}
.right-header .rightdetails .notifaction .notibox h4 small{width: 12px; float: right; display: inline-block;}

.right-header .rightdetails .notifaction .notibox .tab-btn ul{display: flex; border-bottom: 1px solid #ebeced; padding-bottom: 3px;}
.right-header .rightdetails .notifaction .notibox .tab-btn ul li{padding: 5px 10px; font-size: 14px; cursor: pointer; position: relative; margin-right: 6px;}
.right-header .rightdetails .notifaction .notibox .tab-btn ul li.active::after{content: ''; position: absolute; width: 100%; height: 3px; background: #f00; bottom: -3px; left: 0; right: 0;}
.right-header .rightdetails .notifaction .notibox .tab-btn ul li.active{font-weight: 500;}
.right-header .rightdetails .notifaction .notibox .tab-btn ul li span{width: 19px; height: 19px;font-size: 11px; line-height: 20px;}

.right-header .rightdetails .notifaction .notibox .tab-content {height: calc(100vh - 95px); overflow: auto; padding-right: 15px;}
.right-header .rightdetails .notifaction .notibox .tab-content h5{padding: 15px 0px; color: #4462a7;}
.right-header .rightdetails .notifaction .notibox .tab-content .notlist{border-bottom: 1px solid #ebeced; padding-bottom: 5px; display: flex; justify-content: space-between; align-items: center; margin: 7px 0px;}
.right-header .rightdetails .notifaction .notibox .tab-content .notlist .invoicedetails{width: 200px;}
.right-header .rightdetails .notifaction .notibox .tab-content .notlist h6{font-size: 14px;}
.right-header .rightdetails .notifaction .notibox .tab-content .notlist h6 a{text-decoration: none; color: #000;}
.right-header .rightdetails .notifaction .notibox .tab-content .notlist p{font-size: 12px; padding: 3px 0px; color: #8392AB; font-weight: 400;}
.right-header .rightdetails .notifaction .notibox .tab-content .notlist small{background: #e9edf1; padding: 3px 6px; font-size: 11px; margin: 3px 0px; display: inline-block;}

.right-header .rightdetails .notifaction .notibox .tab-content .notlist .action ul{display: flex;}
.right-header .rightdetails .notifaction .notibox .tab-content .notlist .action ul li{width: 18px;}


.right-header .rightdetails .cart-icon{position: relative; width:25px; margin-right: 30px;}
.right-header .rightdetails .cart-icon img{width: 100%; cursor: pointer;}
.right-header .rightdetails .cart-icon span{position: absolute; width: 17px; height: 17px; border-radius: 50%; background: #f00; color: #fff;    right: -15px; top: -8px; text-align: center;}


.right-header .rightdetails .cart-icon .cart-dropdown{position: absolute; width: 400px; right: -20px; display:none;}
.right-header .rightdetails .cart-icon .cart-dropdown.active{display:block;}
.right-header .rightdetails .cart-icon .cart-dropdown::after{width: 0; height: 0; border-right: 10px solid transparent; border-left: 10px solid transparent; border-bottom: 15px solid #ffffff; border-top: 0; content: ''; position: absolute;top: 0; right: 22px;}
.right-header .rightdetails .cart-icon .cart-dropdown h3{margin: 0; padding: 0; font-size: 16px; border-bottom: 1px solid #ece3e3; padding-bottom: 10px;color: #4462a7;}
.right-header .rightdetails .cart-icon .cart-dropdown h3 a{font-size: 14px; float: right; font-weight: 400; text-decoration: none; color: #198ae3;}
.right-header .rightdetails .cart-icon .cart-dropdown .cartbox{border-bottom: 1px solid #eef0f2;}
.right-header .rightdetails .cart-icon .cart-dropdown .cartbox p{color: #8392AB; font-weight: 500;  text-transform: uppercase; font-size: 13px;padding-bottom: 10px;}
.right-header .rightdetails .cart-icon .cart-dropdown .cartbox h4{ font-size: 16px;padding: 10px 0px; font-weight: 500;}
.right-header .rightdetails .cart-icon .cart-dropdown .cartbox .sizenrate{display: flex;}
.right-header .rightdetails .cart-icon .cart-dropdown .cartbox .sizenrate li{margin-right: 20px; font-size: 14px;}
.right-header .rightdetails .cart-icon .cart-dropdown .cartbox .sizenrate li small{font-size: 14px;color: #8392AB; font-weight: 500; margin-right: 5px;}

.right-header .rightdetails .cart-icon .cart-dropdown .cartbox .qtyndis{display: flex; margin: 10px 0px;}
.right-header .rightdetails .cart-icon .cart-dropdown .cartbox .qtyndis li{background: #e9eaec; margin-right: 15px; font-size: 14px; padding: 5px 7px; border-radius: 5px;font-weight: 500; color: #4462a7;}
.right-header .rightdetails .cart-icon .cart-dropdown .cartbox .qtyndis li:last-child{color: #a2a207; background: #e4eeb4;}
.right-header .rightdetails .cart-icon .cart-dropdown .cartbox .qtyndis li small{font-size: 14px;}

.right-header .rightdetails .cart-icon .cart-dropdown .cartbox .price{font-size: 18px; font-weight: 500; padding: 7px 0px; text-align: right; display: flex; justify-content: space-between; border-top: 1px solid #eef0f2; margin-top: 20px;}
.right-header .rightdetails .cart-icon .cart-dropdown .cartbox .price .delete-cart{width: 16px;}
.right-header .rightdetails .cart-icon .cart-dropdown .scrollbox{max-height: 450px; overflow-y: auto;}




.right-header .rightdetails .add-coustomer{width: 33px; cursor: pointer; margin-right: 20px;}
.right-header .rightdetails .add-coustomer img{width: 100%;}

.page{display: flex; justify-content: right;}
.left-menu{width: 260px; position: fixed; transition: .3s; left: 0; top:0px; background: #fff; margin-top: 70px;border-right: 1px solid #e9e9e9;}
.left-menu.slide{left: -260px; transition: .3s;}
.left-menu .logo{ position: relative; padding: 15px 20px 5px;}
.left-menu .logo img{width: 100%;}
.left-menu .logo h2{font-size: 20px; font-weight: bold; color: #4462a7;}
.left-menu .logo h2 span{font-size: 13px; font-weight: lighter; display: block; color: #000;}
.left-menu .logout a{display: inline-block; padding: 3px 0px; border-radius: 5px; text-decoration: none;}


.left-menu .scrollbox{height: calc(100vh - 70px); overflow: auto;}


.left-menu h1{border-bottom: 1px solid #ccc; font-size: 18px; text-align: center; padding: 15px 0px;}
.left-menu ul{margin: 0px 0px; padding: 0px 20px;}
.left-menu ul h4{font-size: 12px; padding: 12px 0px 15px; font-weight: 500; text-transform: uppercase; color: #4262a6;}
.left-menu ul li{margin-bottom: 5px; position:relative;}
.left-menu ul li.disable{cursor: not-allowed;}
.left-menu ul li.disable a{cursor: not-allowed; opacity: 0.3;}
.left-menu ul li a+span{font-size: 10px;
    background: #f00;
    color: #fff;
    padding: 3px 5px;
    position: absolute;
    right: 0;
top: 10px;}
.left-menu ul li a+span.updatestatus{right: 49px; top: 7px; background: #4462a7;}
.left-menu ul li a{color: #344767; text-decoration: none; padding: 3px 15px; border-radius: 10px; font-size: 13px; font-weight: 300; display: flex; align-items: center;}
.left-menu ul li a:hover{font-weight: 400;}
.left-menu ul li .caretdown{width: 0; 
    height: 0; 
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 7px solid black; position: absolute; top: 15px; right: 0;}
/*.left-menu ul li.acive a{box-shadow: 0 20px 27px 0 rgba(0, 0, 0, 0.05); background: #fff; font-weight: 500;}*/
.left-menu ul li a span{width: 25px; height: 25px; display: inline-block; margin-right: 10px;}
.left-menu ul li a span img{width: 100%}
.left-menu ul li ul{margin: 5px 0px; padding-left: 50px;}
.left-menu ul li ul li{margin-bottom: 0; position: relative;}
.left-menu ul li ul li a{font-size:12px; padding:4px 20px;}
.left-menu ul li ul li a i{width: 20px;
    display: inline-block;
    height: 17px;
    background: #d3d3d3;
    text-align: center;
    line-height: 17px;
    font-style: normal;
    margin-left: 12px;
    font-weight: 700;
    font-size: 10px;
    position: absolute;
    right: 0;}
.left-menu ul li ul li::after{content: ''; position: absolute; width: 10px; height: 2px; background: #4462a7; top: 12px;}


 .submenu {
            display: none;
        }

 .rotated {
            transform: rotate(180deg);
        }



.main-content{width: calc(100% - 260px); transition: .3s;min-height: calc(100vh - 70px);flex-direction: column; display: flex; padding: 20px;}
.main-content.slide{width: calc(100% - 0px); transition: .3s;}
.main-content .invoicedetais h1{font-size: 20px; padding-bottom: 5px;}
.main-content .invoicedetais p{color: #585656; font-size: 12px; font-weight: 400;}

.buttonaction ul{display: flex; justify-content: end;}
.buttonaction ul li{margin-left: 10px;}
.buttonaction ul li a{font-size: 14px; background: #fff; padding: 8px 11px; display: flex; text-decoration: none; border-radius: 5px;box-shadow: 0px 8px 24px rgba(27, 46, 94, 0.12);}
.buttonaction ul li a em{width: 20px; height: 19px; background: url(../images/sprit.png); display: inline-block;}

.buttonaction ul li.downloadinvoice a{background: #242acf; color: #fff;}
.buttonaction ul li.downloadinvoice a em{background-position: -5px -40px;}
.buttonaction ul li.downloadformat a{background: #2e703b; color: #fff; opacity: 0.3; cursor: no-drop;}
.buttonaction ul li.downloadformat.active a{opacity: 1; cursor: pointer;}
.buttonaction ul li.downloadformat a em{background-position: -22px -40px;}
.buttonaction ul li.contact a{background: #243748; color: #fff;}
.buttonaction ul li.contact a em{background-position:-42px -40px}
.buttonaction ul li.settlement a{background: #c5302e; color: #fff; opacity: 0.3; cursor: no-drop;}
.buttonaction ul li.settlement.active a{opacity: 1; cursor: pointer;}
.buttonaction ul li.settlement a em{background-position: -64px -40px;}
.buttonaction ul li.designapp a{background: #d58b11; color: #fff; opacity: 0.3; cursor: no-drop;}
.buttonaction ul li.designapp.active a{opacity: 1; cursor: pointer;}
.buttonaction ul li.designapp a em{background-position: -64px -40px;}
.buttonaction ul li.designupload a{background:#da1a87; color: #fff; opacity: 0.3; cursor: no-drop;}
.buttonaction ul li.designupload.active a{opacity: 1; cursor: pointer;}
.buttonaction ul li.designupload a em{background-position: -64px -40px;}




.invoicedetailsbox{padding: 0px; margin-top: 20px;}
.invoicedetailsbox .card-body{padding: 0;}
.invoicedetailsbox .card-body .col-7{padding: 15px 40px 15px 25px;}

.invoicedetailsbox .cosdetails h3{font-size: 18px; padding: 0; padding: 5px 10px 26px 0px;}

.invoicedetailsbox .cosdetails .coustomer-con{display: flex; margin-bottom: 30px; justify-content: space-between; border: 1px solid #e5e5e5; padding: 10px 0px; background: #f1f1f152;}
.invoicedetailsbox .cosdetails .coustomer-con .name{min-width: 25%; padding-left: 20px;}
.invoicedetailsbox .cosdetails .coustomer-con .name span{font-size: 14px; font-weight: bold;}
.invoicedetailsbox .cosdetails .coustomer-con .name h2{ font-size: 14px; padding: 5px 0px; margin: 0;}

.jcsw{justify-content: space-between; align-items: center;}
.wallet{border: 1px solid #ccc; margin-bottom: 20px;}
.wallet ul{display: flex;}
.wallet ul li{padding: 10px 15px; font-size: 13px; max-height: 58px;}
.wallet ul li:last-child{background: #c5302e; color: #fff;}
.wallet ul li span{display: block; padding: 4px 0px; font-size: 20px; font-weight: 500;}


.ordertable{margin: 20px 0px;}
.ordertable h4{font-size: 14px; padding: 0; font-weight: 500; border-bottom: 1px solid #e5e5e5; padding-bottom: 10px;color: #545454;}
.ordertable table{margin-bottom: 40px;}


.invoicedetailsbox .card-body .col-3{border-left: 2px solid #d5d5d5;}

.update-status{padding: 15px; border-bottom: 2px solid #d5d5d5;}
.remark{padding: 0px 10px; font-size: 14px; color: #F00;}

.upbox{padding:0px 0px 0px 15px;}

.uploadfile{flex-direction: column;}
.tab-menu .top-tab{border-bottom: 1px solid #ccc; margin-bottom: 15px; }
.tab-menu .top-tab ul{display: flex;}
.tab-menu .top-tab ul li{margin-right: 25px; padding-bottom: 10px; cursor: pointer; font-size: 13px; color: #898787; font-weight: 500;}
.tab-menu .top-tab ul li.active{border-bottom: 3px solid #242acf; font-weight: 500; color: #242acf;}

.fileapproval{background: #2e703b;}



.remarkcard{padding: 0; margin-top: 20px;}

.remarkbox{text-align: left;}
.remarkbox label{font-weight: bold; margin-bottom: 10px; display: block;}
.remarkbox textarea{width: 100%;border: 1px solid #d9dbe1; outline: none; padding: 10px;}

.remark-table{margin: 0px 5px;}
.page-heading{padding-bottom: 5px;}
.page-heading h2{font-weight: 100; font-size: 16px; font-weight: 500; margin-top: 10px; padding: 12px 0px;}


.ps-section-title { font-size: 22px; font-weight: 600; margin-bottom: 25px; color: #222; }
    .ps-card { background: #fff; border: 1px solid #d9dee3; border-radius: 10px; margin-bottom: 20px; padding: 18px 20px; box-shadow: 0 2px 6px rgba(0,0,0,0.05);}
    .ps-card-header { font-size: 18px; font-weight: 600; color: #1d1d1d; border-bottom: 1px solid #eee; padding-bottom: 8px; margin-bottom: 15px;}
    .ps-label { font-size: 14px; font-weight: 600; color: #333;}
    .ps-radio-group { margin: 8px 0 15px 0;}
    .ps-radio-group label { margin-right: 20px; font-weight: 500; cursor: pointer;}
    .ps-radio-group input[type="radio"] { accent-color: #007bff; margin-right: 5px;}
    .ps-file-input { display: block; width: 100%; margin-top: 6px; padding: 8px; border: 1px solid #ccc; border-radius: 6px; background: #fafafa; font-size: 14px;}
    .ps-file-list { margin: 10px 0;}
    .ps-file-item { background: #eef1f5; border-radius: 5px; padding: 7px 10px; margin-bottom: 5px; font-size: 13px; display: flex; justify-content: space-between; align-items: center;}
    .ps-file-status { display: inline-block; padding: 2px 10px; font-size: 12px; border-radius: 20px;}
    .ps-file-attached { background: #007bff; color: #fff;}
    .ps-file-notattached { background: #d6d6d6; color: #666;}
    .ps-file-delete { background: #dc3545; border: none; color: #fff; border-radius: 4px; padding: 2px 10px; cursor: pointer; margin-left: 10px;}
    .ps-upload-btn { background: #28a745; color: #fff; padding: 7px 26px; border: none; border-radius: 6px; margin-top: 10px; margin-bottom: 3px; cursor: pointer; font-size: 14px; transition: 0.2s;}
    .ps-upload-btn:hover { background: #218838;}
    .ps-attach-btn { background: #007bff; color: #fff; border: none; border-radius: 6px; padding: 4px 14px; cursor: pointer; font-size: 13px; margin-top: 7px;}
    .ps-attach-btn:disabled { background: #8bb6f5;}
    .ps-alert { padding: 10px 12px; border-radius: 5px; margin-top: 12px; font-size: 14px;}
    .ps-alert-success { background: #d4edda; color: #155724; border: 1px solid #c3e6cb;}
    .ps-alert-info { background: #e8f4ff; color: #004085; border: 1px solid #b8daff;}

.filesend{padding-left: 15px; margin-top: 20px;}
.filesend .card{padding: 0;}
.filesend .card h4{font-weight: 500; font-size: 18px;}

.timeline{padding-left: 15px;}
.timeline .card{padding: 0;}
.timeline .card h4{font-weight: 500; font-size: 18px;}
.timeline .stepbox ul li{display: flex; position: relative;}
.timeline .stepbox ul li::after{content: ''; position: absolute; width: 2px; height: 100%; background: #ededed; left: 13px;}
.timeline .stepbox ul li em{background: #e3e1e1; display: inline-block; width: 30px; height: 30px; border-radius: 50%;text-align: center;
    line-height: 28px;font-weight: 600; font-style: normal; margin-right: 10px; position: relative; z-index: 5;}
    .timeline .stepbox ul li:last-child::after{display: none;}
    .timeline .stepbox ul li .activity{width: 100%;}
    .timeline .stepbox ul li .activity h5{font-size: 14px; font-weight: 400; position: relative;}
.timeline .stepbox ul li .activity h5 small{display: block; padding: 4px 0px; font-weight: 400; color: #767676;}
.timeline .stepbox ul li .activity .activitybox{border: 1px solid #ccc; margin: 10px 0px 20px 0px; width: 100%; padding: 10px; font-size: 14px; border-radius: 5px;}
.timeline .stepbox ul li .activity .activitybox h6{font-size: 14px;}
.timeline .stepbox ul li .activity .activitybox p{font-size: 13px; color: #6e6d6d; padding: 3px 0px; line-height: 18px;}
.timeline .stepbox ul li .activity h5 i{ position: absolute; right: 0; top: -17px;display: flex; justify-content: center; align-items: center;}
.timeline .stepbox ul li .activity h5 i a{width: 33px; height: 48px; background: url(../images/sprit.png); display: inline-block;background-position: -65px -51px;}


.oldorder .card{padding: 0; margin-top: 20px;}
.oldorder .card h3{margin-bottom: 15px;}

.pdfdownload{text-decoration: none; color: #000;}
.pdfdownload span{display: flex; align-items: center;}
.pdfdownload span strong{margin-left: 5px;}



/* Alert box styling */
.alert {
  display: block;
  position: fixed;
  right: 0;
  top: 60px;
  padding: 15px 20px;
  margin: 20px auto;
  border-radius: 8px;
  background-color: #d4edda;
  color: #155724;
  font-size: 16px;
  font-family: Arial, sans-serif;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  border: 1px solid #c3e6cb;
  animation: fadeOut 4s ease-in-out forwards, collapse 4s ease-in-out forwards;
}

/* Bold heading inside the alert */
.alert strong {
  font-weight: 600;
  font-size: 18px;
}

/* Keyframes for fade-out effect */
@keyframes fadeOut {
  0%, 75% {
      opacity: 1;
      height: auto; /* Visible state */
  }
  100% {
      opacity: 0;
      visibility: hidden; /* Invisible but space still occupied */
  }
}





.page-heading .search-coustomer{position: relative; width: 280px; padding: 0;}
.page-heading .search-coustomer input[type='text']{border: 1px solid #d9dbe1; width: 100%;height: 40px;outline: none;padding: 5px 10px;}
.page-heading .search-coustomer .tablebox{position: absolute; background: #fff; box-shadow: 0px 8px 24px rgba(27, 46, 94, 0.12); width: 100%; left: 0; right: 0; padding: 10px;display: none; max-height:400px; overflow-y:auto;}

.page-heading .search-coustomer .tablebox #dataTable{border-collapse: collapse;}
.page-heading .search-coustomer .tablebox #dataTable tr{text-align: left;}
.page-heading .search-coustomer .tablebox #dataTable tr:hover{background: #f6f6f6;}
.page-heading .search-coustomer #noRecord{display: none;position: absolute; background: #e8eaec; width: 100%; padding: 10px;}


.search-cos{display: flex; justify-content: flex-end; padding: 0px 10px; align-items: center; margin-bottom: 10px;}
.search-cos span{margin: 0px 15px;}
.search-cos button{font-size: 16px; padding: 10px 20px;}

.cos-details label{font-weight: 400;color: #7a7a7a; font-size: 13px; padding-bottom: 5px; display: inline-block;}

.rightcarddetails{padding:15px 0;}
.rightcarddetails h3{font-size:15px; margin-bottom:10px;}
.rightcarddetails p{font-size:14px; line-height:20px;}
.rightcarddetails figure{margin:0px; border:1px solid #ccc; background: #fff;}
.rightcarddetails figure img{width: 100%;}

.rightcarddetails .cardsize{padding: 0px 15px;}

.form-group{width: 100%; margin-bottom: 15px; padding: 0px 10px;}
.form-group .form-control{border: 1px solid #d9dbe1; width: 100%; height: 40px; outline: none; padding: 5px 10px;background: #fff;}
.form-group label{padding-bottom: 10px; display: inline-block; font-size: 14px; font-weight: 600;}
.form-group label + a{text-decoration: none; font-size: 12px; float: right; padding-top: 6px;}

.form-group .checkinput{display: flex; padding: 15px 0px;}
.form-group .checkinput label{padding: 0;}
.form-group .checkinput span{background: #f1f1f1; width: 50px; border: 1px solid #d9dbe1; display: flex; justify-content: center; align-items: center;}
.form-group .checkinput span input[type='checkbox']{transform: scale(1.2);}

.popup-bg{background: rgba(0,0,0,0.8); position: fixed; width: 100%; height: 100%; left: 0; right: 0; top: 0; bottom: 0; justify-content: center; align-items: center; display: none; z-index:10;}
.popup-bg.show{display: flex;}
.popup-bg .popup-form{width: 480px; background: #fff; padding: 15px; position: relative; display: none; }
.popup-bg .popup-form.show{display: block; z-index: 99;}
.popup-bg .popup-form .close{position: absolute; right: 10px; top: 10px;}
.popup-bg .popup-form h6{padding: 10px 0px; font-size: 18px; border-bottom: 1px solid #ccc; margin: 0px 10px 20px;}

.dashboardboxnew {
  border: 2px solid #DBE0E5; margin: 10px 15px 10px 0px; padding: 15px 0 0px; overflow: hidden;
}

.dashboardbox {
    background: url(../images/img-status-9.svg) no-repeat right top,#fff;
    border: 2px solid #DBE0E5; margin: 10px 15px 10px 0px;
}
.dashboardbox h2{font-size: 26px; padding: 0; font-weight: 400; padding-bottom: 10px;}
.dashboardbox h2.expenses{color: #f00; font-weight: 700;}
.dashboardbox h4{padding-bottom: 20px;}

.dashboardbox ul{display: flex; justify-content: space-between;}
.dashboardbox ul li{font-size: 13px; font-weight: 200; background: #fff; padding: 5px 12px 5px 0px;}
.dashboardbox ul li span{display: block; font-size: 18px; font-weight: 500; padding: 3px 0px; color: #4462a7;}
.dashboardbox ul li span.expenses{color: #f00;}
.expenses{color: #f00;}

.redzone{display: flex; justify-content: center;align-items: center;}

@keyframes blink {
  0% { color: red; }
  50% { color: transparent; }
  100% { color: red; }
}

.redzone .blink-text {
  animation: blink 1s infinite;
  font-weight: bold;
  font-size: 20px;
}

.activityimg{width: 35px; height: 35px; margin-right: 20px; position: relative; cursor: pointer;}
.activityimg {
  background-position: -135px -57px;
}

.activityimg .cart-dropdown{position: absolute; width: 400px; right: -12px; display:none; top: 35px; cursor: auto;}
.activityimg.active .cart-dropdown{display:block;}
.activityimg .cart-dropdown::after{width: 0; height: 0; border-right: 10px solid transparent; border-left: 10px solid transparent; border-bottom: 15px solid #ffffff; border-top: 0; content: ''; position: absolute;top: 0; right: 22px;}
.activityimg .cart-dropdown h3{margin: 0; padding: 0; font-size: 14px; border-bottom: 1px solid #ece3e3; padding-bottom: 10px;}
.activityimg .cart-dropdown .scrollbox ul{margin: 0; padding: 0;}
.activityimg .cart-dropdown .scrollbox ul li{padding: 10px 0px;}
.activityimg .cart-dropdown .scrollbox ul li:hover{background: #f6f6f6;}
.activityimg .cart-dropdown .scrollbox ul li a{text-decoration: none; color: #000;}
.activityimg .cart-dropdown .scrollbox ul li h5{font-size: 14px; font-weight: 400;}
.activityimg .cart-dropdown .scrollbox ul li h5 a{font-weight: 600;}
.activityimg .cart-dropdown .scrollbox ul li P{font-size: 13px; padding: 5px 0px; color: #747474; font-weight: 300;}
.activityimg .cart-dropdown .scrollbox ul li P block{white-space: nowrap;  display: inline-block; 
  overflow: hidden;  
  text-overflow: ellipsis;  
  width: 220px; font-size: 12px; font-weight: 400;}
.activityimg .cart-dropdown .scrollbox ul li P small{float: right; color: #000; background: #f6f6f6; padding: 3px 5px; position: relative; top: 10px;}

.activityimg .cart-dropdown .scrollbox ul li .timer{font-size: 12px; color: #b5b5b5; font-weight: 400;}

.activityimg span{position: absolute;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: #f00;
  color: #fff;
  right: -2px;
  top: -3px;
  text-align: center;}

.btn-blue{background: #4262a6; border: none; color: #fff; padding: 12px 10px; cursor: pointer;}
.turnover{padding: 0px 10px; display: flex; border-top: 1px solid #ccc; justify-content: center; align-items: center;background-color: #85FFBD;
  background-image: linear-gradient(45deg, #85FFBD 0%, #FFFB7D 100%); min-height: 92px;
  }
.turnover h3{font-size: 33px;padding: 19px 20px;}
.turnover span{font-size: 33px;}

.upbox h3{font-size: 14px; padding:0px 10px 10px 0px;}
.upbox .uploadbox{border: 3px dashed #ccc; text-align: center; padding: 15px;}
.upbox .uploadbox input{width:100%; color:#000;}
.upbox .uploadbox figure{text-align: center;}
.upbox .uploadbox figure img{width: 60px; display: inline-block;}

.upbox p{text-align: center; font-size: 14px; padding: 10px 0px; color: #abaaaa; line-height: 22px;}
.upbox .btn-lg{width: 100%; font-size: 14px;}
.upbox .remark{text-align: left; color: #000; padding: 0;}

.format-download ul li{padding: 30px 0px;}
.format-download ul li a{text-decoration: none; width: 100%; text-align: center; display: inline-block;}

.all-services{flex-direction: column;}

.all-services ul{padding: 5px 40px 5px 5px;}
.all-services ul li{display: flex; margin-bottom: 10px;}
.all-services ul li label{display: inline-block;}

.all-services h5{font-size: 15px;padding: 10px 0px 15px; color: #4262a6; font-weight: 500;}




.dashboard-design .card{padding: 0;}
.recentupi{padding: 0px 15px !important;}

.left-menu .scrollbox::-webkit-scrollbar {
    height: 12px;
    width: 5px;
    background: #ccc;
    display: none; /* Hide scrollbar by default */
}

.left-menu .scrollbox:hover::-webkit-scrollbar {
    display: block; /* Show scrollbar on hover */
}

.left-menu .scrollbox::-webkit-scrollbar-thumb {
    background: #4262a6;
    -webkit-border-radius: 5px;
    -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.75);
}

.left-menu .scrollbox::-webkit-scrollbar-corner {
    background: #000;
}

    header .hamburger,.menu-close{display:none;}
    div.dt-container{display: contents;}
    
.cart-page .order-summary h4{border-bottom:1px solid #000; padding-bottom:10px; font-weight:500;}

.cart-page .order-summary table tr td{border-bottom:1px solid #42424238;}
  
.cart-page .cartbox{margin-bottom:20px; padding:0px 15px;}
.cart-page .cartbox p{color: #8392AB; font-weight: 500;  text-transform: uppercase; font-size: 13px;padding-bottom: 10px;}
.cart-page .cartbox h4{ font-size: 20px;padding: 10px 0px 15px; font-weight: 500;}
.cart-page .cartbox .sizenrate{display: flex;}
.cart-page .cartbox .sizenrate li{margin-right: 20px; font-size: 14px;}
.cart-page .cartbox .sizenrate li small{font-size: 14px;color: #8392AB; font-weight: 500; margin-right: 5px;}

.cart-page .cartbox .qtyndis{display: flex; margin: 10px 0px;}
.cart-page .cartbox .qtyndis li{background: #e9eaec; margin-right: 15px; font-size: 14px; padding: 5px 7px; border-radius: 5px;font-weight: 500; color: #4462a7;}
.cart-page .cartbox .qtyndis li:last-child{color: #a2a207; background: #e4eeb4;}
.cart-page .cartbox .qtyndis li small{font-size: 14px;}

.cart-page .cartbox .price{font-size: 18px; font-weight: 500; padding: 7px 0px; text-align: right; display: flex; justify-content: space-between; border-top: 1px solid #dcdfe1; margin-top: 10px; border-bottom: 1px solid #dcdfe1;}
.cart-page .cartbox .price .delete-cart a{font-size: 14px; background:#f00; color:#fff; padding:4px 8px; display:inline-block;text-decoration: none;
    font-weight: 100;
    border-radius: 5px;}

.cart-page table tr:last-child td{border-bottom:none;}
.cart-page table tr td:last-child,.cart-page table tr th:last-child{text-align:right;}    
    
    .customer-summary{margin-bottom:20px;background-color: #4158D0;
background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
}
    .customer-summary h4{border-bottom:1px solid #e1e0e06e; padding-bottom:10px; margin-bottom:15px; color:#fff; font-weight:500;}
    .customer-summary .form-group label{text-transform: uppercase; font-size: 14px; color: #ff0; font-weight: 600; padding-bottom:5px;}
    .customer-summary .form-group p{font-size:14px; color:#fff;}
    
    
    .order-details{margin-bottom:20px;}
    .order-summary{background-image: radial-gradient( circle 918px at 13.1% 25.5%,  rgba(249,107,107,1) 0%, rgba(247,231,172,1) 48.9%, rgba(173,247,172,1) 90% );}
    
    
/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 9; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.8); /* Black w/ opacity */
  }
  
  /* Modal Content */
  .modal-content {
    background-color: #fefefe;
    margin: auto;
    border: none;
    width: 600px;
    border-radius: 5px;
  }
  
  .modal-content h4{margin-bottom: 15px;}
  .modal-content textarea{width: 100%; height: 100px; border-radius: 5px; border:none; outline: none; border: 1px solid #ccc;}
  .modal-content input[type='submit']{font-size: 14px; padding: 10px 15px; background: #c5302e; color: #fff; outline: none; cursor: pointer; margin-top: 10px;border: none;
    border-radius: 5px; text-transform: uppercase;}

  /* The Close Button */
  .close {
    color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
  }
  
  .close:hover,
  .close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
  }
  
  .table-responsive {
    width: 100%;
   
    overflow-x: auto;
    border-collapse: collapse;
}

.table-responsive table {
    width: 100%;
  
    border-spacing: 0;
}

.table-responsive th, 
.table-responsive td {
   
    text-align: left !important;
   
}


  .total-assest p{font-size: 14px; font-weight: 500; color: #696969;}
  .total-assest p + span{font-size: 24px; font-weight: 600; padding-top: 10px; display: inline-block; color: #6765FE;}
  .total-assest ul li{text-align: center; font-size: 15px; font-weight: 400;}
  .total-assest ul li span{font-size: 25px; color: #000;}

   /* Table container ka overflow handle karne ke liye */
   div.dataTables_wrapper {
    width: 100%;
    overflow: auto;
}

.tab-menu{border-bottom: 1px solid #ccc; flex: auto; display: flex;}
.tab-menu li{margin-right: 30px;}
.tab-menu li a{padding: 7px 10px; display: inline-block; text-decoration: none; color: #000;}
.tab-menu li.acive{border-bottom: 2px solid #6765FE;}
.tab-menu li.acive a{color: #6765FE; font-weight: 500;}
.tab-menu li:hover{border-bottom: 2px solid #6765FE;}
.tab-menu li:hover a{color: #6765FE; font-weight: 500;}


.search-filter{ margin-top: 15px;}
.search-filter .rightbtn{display: flex; justify-content: flex-end;}
.search-filter .rightbtn li{margin-left: 10px;}



.search-filter .rightbtn .dropdown {
        position: relative;
        display: inline-block;
    }

.search-filter .rightbtn .dropdown-content {
        display: none;
        position: absolute;
        background-color: #f9f9f9;
        min-width: 160px;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        z-index: 1;
	right: 0;
    }

.search-filter .rightbtn .dropdown-content a {
        color: black;
        padding: 10px 16px;
        text-decoration: none;
        display: block;
	text-align: left;
	font-size: 14px;
    }

.search-filter .rightbtn .dropdown-content a:hover {
        background-color: #f1f1f1;
    }

.search-filter .rightbtn .show {
        display: block;
    }





.tocl-table{margin-top: 30px;}
.tocl-table table{text-align: left;}
/* Fixed column ke liye shadow effect */
.dataTables_wrapper .dataTables_scrollBody {
    overflow: auto !important;
}

.checkradio ul{display: block; box-sizing: border-box; padding:5px 15px;}
.checkradio ul li{display: inline-block; width: 49%; font-size: 14px; margin-bottom: 15px;}
.checkradio ul li label{font-size: 13px; color: #565656;}
.checkradio ul li .checkinput{display: flex; align-items: center;}
.checkradio ul h3{font-size: 14px; padding: 0 0px 5px 0px; border-bottom: 1px solid #dddcdc; width: 100%; margin-bottom: 10px;}

.justify-content-between{justify-content: space-between;}

 .sort-btn {
      background: #007bff;
      color: white;
      border: none;
      padding: 10px 15px;
      border-radius: 6px;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 5px;
    }

    /* Dropdown Container */
    .dropdown {
      position: relative;
      display: inline-block;
    }

    .dropdown-content {
      display: none;
      position: absolute;
      top: 40px;
      left: 0;
      background: white;
      border: 1px solid #ddd;
      border-radius: 6px;
      box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
      padding: 5px;
      z-index: 10;
    }

    .dropdown-content select {
      padding: 5px;
      font-size: 16px;
      width: 150px;
    }

    /* Show class to make dropdown visible */
    .show {
      display: block;
    }


@media screen and (max-width:767px)
{
    
    .login p{display:none;}
    header{z-index:10; background:#fff;}
    .right-header{width:100%;left: 0;right: 0;padding: 0;justify-content: center; top:15px;}
    header .hamburger{width: 60px;position: fixed;left: 14px;top: 5px;cursor: pointer; display:inline-block;}
    header .hamburger img{width:100%;}
    .menu-close{position: absolute;right: 20px;top: 20px;cursor: pointer; display:inline-block;}
    header .logout .profile .name{display:none;}
    .leftbar{width:100%;}
    header .logo{width:70%;}
    .login{display:none;}
    .left-menu .scrollbox{padding-bottom:30px;}
	.right-header .rightdetails{position: absolute; right: 30px;}
	
	.bredcrum{display: none;}
	.left-menu{background:#fff; width:100%; z-index:999; left:-100%;transition: .3s;height: 100%;}
	.left-menu.active{left:0%;transition: .3s;}
	.main-content{width:100%;}
	.jc-sbw{flex-direction: column;}
	.col-4,.col-6,.col-3,.col-7,.col-5,.col-1,.col-2{width:100%; padding:0px;}
	.row{flex-direction: column;}
	.card{ padding:0px;}
	.dashboardbox{margin: 0px 0px 15px;}
	.search-cos{flex-direction: column;}
	.page-heading .search-coustomer{width:100%;}
	.page-heading .search-cos span{margin:10px 0px;}
	.search-cos button{width: 100%;margin-bottom: 15px;}
	.cos-details{margin-bottom:15px;}
	.card-body{margin-bottom:15px;}
	.padt35{padding-top: 15px !important;}
	.form-group.t-r.mrt25 a{display:block;text-decoration: none;}
	.form-group.t-r.mrt25 .btn-lg{display:block;width: 100%;
        text-align: center;
        margin-bottom: 10px;}
        .small-table{width:100%; margin-bottom:20px;margin-left: 0 !important;}
        .form-group.t-r a{display:block;text-align: center;
        margin-bottom: 10px;}
        .form-group.t-r button{width:100%;}
        .table-responsive{width: 100%; overflow-y: auto;}
.table-responsive table tr td{padding:10px 13px 10px 0px;}
        div.dt-container div.dt-layout-row{overflow-y: auto;}
        .table-head .date-filer{flex-direction: column;}
        .table-head .date-filer .form-date{margin-bottom:15px;}
        .table-head .date-filer .form-date label{display:block; padding-bottom:5px;}
        .table-head{display:block;}
        .table-head .date-filer input{width:100%;}
}


@media (min-width: 1200px) and (max-width:1600px){

}




@media (max-width: 768px) {
  .table-responsive th, 
  .table-responsive td {
      font-size: 0.9rem;
      white-space: nowrap;
  }
}


/* Advanced Filter Styles */
.filter-header {
    display: flex;
    gap: 8px;
    height: 35px;
}

.filter-btn, .sort-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    font-size: 14px;
    color: #495057;
    cursor: pointer;
    transition: all 0.2s;
    height: 35px;
}

.filter-btn:hover, .sort-btn:hover {
    background: #e9ecef;
    border-color: #adb5bd;
}

.filter-btn.active {
    background: #007bff;
    color: white;
    border-color: #007bff;
}

/* Filter Modal Styles */
.filter-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.filter-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(2px);
}

.filter-modal-content {
    position: relative;
    background: white;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    max-width: 600px;
    width: 90%;
    max-height: 80vh;
    overflow: hidden;
    animation: modalSlideIn 0.3s ease-out;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.filter-modal-header {
    padding: 20px 24px;
    border-bottom: 1px solid #e9ecef;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.filter-header-content {
    flex: 1;
}

.filter-modal-header h4 {
    margin: 0 0 4px 0;
    font-size: 20px;
    color: white;
    font-weight: 600;
}

.filter-subtitle {
    margin: 0;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 400;
}

.filter-modal-close {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    font-size: 22px;
    color: white;
    cursor: pointer;
    padding: 8px;
    border-radius: 6px;
    transition: all 0.2s;
    line-height: 1;
    backdrop-filter: blur(10px);
}

.filter-modal-close:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.1);
}

.filter-modal-body {
    padding: 30px 24px;
    max-height: 50vh;
    overflow-y: auto;
    background: #fafbfc;
}

.filter-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.filter-row-horizontal {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.filter-label {
    font-size: 14px;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 2px;
    display: block;
}

.filter-select {
    padding: 12px 16px;
    border: 2px solid #e1e8ed;
    border-radius: 8px;
    font-size: 14px;
    background: white;
    width: 100%;
    outline: none;
    transition: all 0.3s ease;
    font-family: inherit;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.filter-select:focus {
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
    transform: translateY(-1px);
}

.filter-input {
    padding: 12px 16px;
    border: 2px solid #e1e8ed;
    border-radius: 8px;
    font-size: 14px;
    width: 100%;
    outline: none;
    transition: all 0.3s ease;
    font-family: inherit;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.filter-input:focus {
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
    transform: translateY(-1px);
}

.filter-input::placeholder {
    color: #a0a9b8;
    font-style: italic;
}



.filter-modal-footer {
    padding: 20px 24px;
    border-top: 1px solid #e9ecef;
    background: white;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
}

.btn-apply-filters {
    padding: 12px 24px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.btn-apply-filters:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}

.clear-filters-btn {
    padding: 12px 24px;
    background: #f8f9fa;
    border: 2px solid #e9ecef;
    color: #6c757d;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.clear-filters-btn:hover {
    background: #e9ecef;
    color: #495057;
    transform: translateY(-2px);
    border-color: #dee2e6;
}

.addmorepopup .popup-header{padding: 20px 24px 10px;
    border-bottom: 1px solid #e9ecef;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;}

.addmorepopup .popup-footer{padding: 20px 24px;
    border-top: 1px solid #e9ecef;
    background: white;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;}

.addmorepopup  .popup-body{padding: 30px 24px;
    max-height: 50vh;
    overflow-y: auto;
    background: #fafbfc;}


.addbtn{padding: 12px 24px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 18px;
     cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);}

.addmorepopup .form-row {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 10px;
  }

  .addmorepopup .form-group {
    flex: 1;
    min-width: 150px;
  }

  .addmorepopup .checkbox-group {
    display: flex;
    align-items: center;
    gap: 5px;
  }

  .addmorepopup h2{margin-bottom: 20px;}
  .addmorepopup .form-group label{font-weight: 600; display: block;}
  .addmorepopup .form-group .form-control{width: 100%;}

  .breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    padding: 10px 15px 0px 0px;
    font-size: 20px;
    font-weight: 500; margin-bottom: 20px;
  }

  .breadcrumb a {
    text-decoration: none;
    color: #fff;
    font-weight: bold;
    transition: color 0.3s ease;
  }

  .breadcrumb a:hover {
    color: #fff;
  }

  .breadcrumb span {
    margin: 0 10px;
    color: #fff;
  }

  .breadcrumb .current {
    color: #ff0;
    font-weight: bold;
  }


  
.updaterate .popup-header{padding: 20px 24px 10px; position: relative;
    border-bottom: 1px solid #e9ecef;
    justify-content: space-between;
    align-items: flex-start;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;}

.updaterate .popup-footer{padding: 20px 24px;
    border-top: 1px solid #e9ecef;
    background: white;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;}

.updaterate  .popup-body{padding: 30px 24px;
    max-height: 50vh;
    overflow-y: auto;
    background: #fafbfc;}

.updaterate .close{position: absolute; right: 10px; top: 10px;}

.addbtn{padding: 12px 24px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 18px;
     cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);}


.tooltip {
  position: relative;
  display: inline-block;
}

/* Tooltip text */
.tooltip .tooltiptext {
  visibility: hidden;
    background-color: #333;
  color: #fff;
  text-align: center;
  padding: 6px;
  border-radius: 4px;

  position: absolute;
  z-index: 1;
  bottom: 125%; /* Show above the icon */
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity 0.3s;
  font-size: 13px;
}

/* Show the tooltip on hover */
.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}




.calculator {
  background: white;
  padding: 30px 40px;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  width: 500px;
}

.calculator h2 {
  margin-bottom: 20px;
  color: #333;
  text-align: center;
}

.calculator label {
  display: block;
  margin-top: 15px;
  font-weight: bold;
}

.calculator input[type='number'] {
  width: 100%;
  padding: 8px;
  margin-top: 5px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.calculator button {
  margin-top: 20px;
  width: 100%;
  padding: 10px;
  background: #3498db;
  color: white;
  border: none;
  font-size: 16px;
  border-radius: 5px;
  cursor: pointer;
}

.calculator button:hover {
  background: #2980b9;
}

.calculator .btn-sucess{background: #209B20;}

#results {
  margin-top: 25px;
  background: #f9f9f9;
  padding: 15px;
  border-radius: 8px;
  border: 1px solid #ddd;
}

.calculator select {
  width: 100%;
  padding: 8px;
  font-size: 16px;
  border-radius: 5px;
  border: 1px solid #ccc;
  margin-top: 5px;
}

.support-type-toggle {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  flex-wrap: wrap;
  gap: 8px;
}

.support-type-toggle input[type="radio"] {
  display: none;
}

.support-type-toggle label {
  padding: 10px 15px;
  background: #e0e0e0;
  border-radius: 5px;
  cursor: pointer;
  user-select: none;
  flex: 1 1 auto;
  text-align: center;
  font-weight: 500;
  border: 1px solid transparent;
  transition: all 0.3s ease;
}

.support-type-toggle input[type="radio"]:checked + label {
  background-color: #3498db;
  color: white;
  border-color: #2980b9;
}

.standy-options {
  display: flex;
  gap: 15px;
  margin-top: 5px;
  flex-wrap: wrap;
}

.standy-options input[type="radio"] {
  display: none;
}

.standy-options label {
  padding: 8px 12px;
  background: #e0e0e0;
  border-radius: 5px;
  cursor: pointer;
  border: 2px solid transparent;
  font-size: 14px;
  transition: all 0.3s ease;
}

.standy-options input[type="radio"]:checked + label {
  background-color: #3498db;
  color: white;
  border-color: #2980b9;
}

.standycheck{display:flex;}

#frame-div{position: relative;}

#frame-div .frameca{position: absolute; right: 9px; height: 39px; border-radius: 0;}

#framecalc .popup-body{display: flex; justify-content: center; align-items: center;}

  :root{
    --bg:#fff; --ink:#2b2f38; --muted:#8a94a6; --brand:#2f7df6; --ring:#95b8ff;
  }
  .orientation-toggle{
    display:inline-flex; gap:12px; align-items:center;
  }
  /* Hide native radio, keep it accessible */
  .orientation-toggle input[type="radio"]{
    position:absolute; opacity:0; width:0; height:0;
  }
  .orientation-btn{
    display:inline-flex; align-items:center; justify-content:center;
    width:72px; height:35px; /* big enough to be obvious */
    border:1px solid #d7dce5; border-radius:12px; background:var(--bg);
    cursor:pointer; transition:transform .06s ease, border-color .2s, box-shadow .2s;
    box-shadow:0 1px 2px rgba(0,0,0,.05);
  }
  .orientation-btn:hover{ transform:translateY(-1px); }
  /* Focus ring for keyboard users */
  .orientation-toggle input[type="radio"]:focus-visible + .orientation-btn{
    outline:0; box-shadow:0 0 0 3px var(--ring);
  }
  /* Selected state */
  .orientation-toggle input[type="radio"]:checked + .orientation-btn{
    border-color:var(--brand);
    box-shadow:0 2px 8px rgba(47,125,246,.18);
  }
  /* Icon styling */
  .icon{ width:28px; height:18px; }
  .line{ stroke:var(--muted); stroke-width:4; stroke-linecap:round; }
  .block{ fill:#e9eef8; }
  /* Color shift when selected */
  .orientation-toggle input[type="radio"]:checked + .orientation-btn .line{ stroke:var(--brand); }
  .orientation-toggle input[type="radio"]:checked + .orientation-btn .block{ fill:#e7f0ff; }

  /* Optional caption chips (no text inside labels, but small hint below) */
  .hint{
    font:500 12px/1.2 system-ui, -apple-system, Segoe UI, Roboto, Arial;
    color:#5f6b7a; text-align:center; margin-top:6px;
  }
  .wrap{ display:inline-flex; flex-direction:column; align-items:center; }

.vertical{width: 45px; height: 60px;}
.horizontal{width: 80px;}

.upload-container {
      background: #fff;
      padding: 20px;
      border-radius: 12px;
      width: 400px;
      text-align: center;
    }

    h2 {
      margin-bottom: 15px;
      color: #333;
    }

    .file-input {
      display: none;
    }

    .custom-label {
      display: inline-block;
      padding: 10px 20px;
      background: #007BFF;
      color: white;
      border-radius: 8px;
      cursor: pointer;
      transition: background 0.3s;
    }

    .custom-label:hover {
      background: #0056b3;
    }

    .file-list {
      margin-top: 15px;
      font-size: 14px;
      color: #555;
    }

    .file-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 5px 10px;
      background: #f9f9f9;
      border-radius: 6px;
      margin-bottom: 5px;
    }

    .delete-btn {
      background: #dc3545;
      color: white;
      border: none;
      padding: 4px 8px;
      border-radius: 5px;
      cursor: pointer;
      font-size: 12px;
    }

    .delete-btn:hover {
      background: #b02a37;
    }

    .upload-btn {
      margin-top: 15px;
      padding: 10px 20px;
      border: none;
      border-radius: 8px;
      background: #28a745;
      color: white;
      cursor: pointer;
    }

    .upload-btn:disabled {
      background: #aaa;
      cursor: not-allowed;
    }

    /* Loader */
    .loader {
      border: 4px solid #f3f3f3;
      border-top: 4px solid #007BFF;
      border-radius: 50%;
      width: 30px;
      height: 30px;
      animation: spin 1s linear infinite;
      margin: 10px auto;
      display: none;
    }

    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }


/* Old Rate Input - readonly */
#oldRate {
  width: 100%;
  padding: 8px;
  font-size: 16px;
  background-color: #f4f4f4;
  border: 1px solid #ccc;
  border-radius: 5px;
}

/* New Rate Input */
#newRateInput {
  width: 100%;
  padding: 8px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 5px;
  margin-top: 5px;
}

/* Minimum Rate Message */
.min-rate-msg {
  font-size: 14px;
  color: #ff0; /* Red color for warning */
  margin-top: 10px;
}

/* Apply Button */
#applyRateBtn {
  background-color: #4CAF50;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  width: 100%;
  font-size: 16px;
  margin-top: 15px;
}

#applyRateBtn:hover {
  background-color: #45a049;
}

/* Toast Notification Styles */
.toast {
    position: fixed;
    top: 20px;
    right: 20px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    padding: 16px;
    z-index: 10000;
    transform: translateX(400px);
    opacity: 0;
    transition: all 0.3s ease;
    border-left: 4px solid #007bff;
}

.toast.show {
    transform: translateX(0);
    opacity: 1;
}

.toast.toast-success {
    border-left-color: #28a745;
}

.toast.toast-info {
    border-left-color: #17a2b8;
}

.toast.toast-warning {
    border-left-color: #ffc107;
}

.toast.toast-error {
    border-left-color: #dc3545;
}

.toast-content {
    display: flex;
    align-items: center;
    gap: 12px;
}

.toast-icon {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-weight: bold;
    font-size: 12px;
    color: white;
}

.toast-success .toast-icon {
    background: #28a745;
}

.toast-info .toast-icon {
    background: #17a2b8;
}

.toast-message {
    font-size: 14px;
    color: #495057;
    font-weight: 500;
}

@media (max-width: 768px) {
    .filter-modal-content {
        width: 95%;
        margin: 20px;
        max-width: none;
    }
    
    .filter-modal-header {
        padding: 16px;
        flex-direction: row;
        align-items: flex-start;
    }
    
    .filter-modal-header h4 {
        font-size: 18px;
    }
    
    .filter-subtitle {
        font-size: 13px;
    }
    
    .filter-modal-body {
        padding: 20px 16px;
    }
    
    .filter-form {
        gap: 16px;
    }
    
    .filter-row-horizontal {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    
    .filter-modal-footer {
        padding: 16px;
        flex-direction: column-reverse;
        gap: 10px;
    }
    
    .btn-apply-filters,
    .clear-filters-btn {
        width: 100%;
        justify-content: center;
        padding: 14px 24px;
    }
    
    .toast {
        right: 10px;
        left: 10px;
        transform: translateY(-100px);
    }
    
    .toast.show {
        transform: translateY(0);
    }
}

@media print {
  .no-print {
      display: none;
  }
}

.float-right{
    float:right;
}