@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;}
.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: underline; 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;
}

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; left: 0; top:0px; background: #fff; margin-top: 70px;border-right: 1px solid #e9e9e9;}

.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);min-height: calc(100vh - 70px);flex-direction: column; display: flex; padding: 20px;}

.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;}




.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;}

.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;}

.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;
    padding: 20px;
    border: 1px solid #888;
    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;
   
}






@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;
  }
}


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