.text-black-1c{color:#1c1c1e !important;}
.text-blue{color:#1c84c6 !important;}
.text-blue-f6{color:#0095f6 !important;}
.text-blue-48{color:#485EA7 !important;}
.text-red{color:#f65959 !important;}
.text-red-2{color:#f86161 !important;}
.text-green{color:#2cA01C !important;}
.text-green-2{color:#00bf0e !important;}
.text-yellow{color:#eeb42e !important;}
.bg-blue{background-color:#1c84c6 !important;}
.bg-blue-f6{background-color:#0095f6 !important;}
.bg-green{background-color:#2cA01C !important;}
.bg-teal {background-color: #1ab394 !important;}
.bg-orange { background-color: #e77200 !important;}
.bold{ font-weight:bold !important;}
.fw-6{ font-weight:600 !important;}
.fw-5{ font-weight:500 !important;}
.fw-4{ font-weight:400 !important;}
.text-12px{font-size: 12px;}
.text-14px{font-size: 14px;}
.text-16px{font-size: 16px;}
.text-18px{font-size: 18px;}
.text-20px{font-size: 20px;}
.text-22px{font-size: 22px;}
.text-25px{font-size: 25px;}
.text-30px{font-size: 30px;}
.no-border{border: none !important;}
.pull-left{float: left;}
.pull-right{float: right;}
.box-shadow-one{box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; }
.br-radi-15{border-radius: 15px;}
.br-radi-50{border-radius: 50px;}
.sidebar-link.active{background-color: var(--invoicePrimaryColor) !important; box-shadow: none !important; margin-left: 15px; padding-left: 10px; border-radius: 10px 0 0 10px;}
a{text-decoration: none; color: #0095f6}

.bwt-edit-icon, .bwt-delete-icon, .bwt-view-icon{ background-color: #fff; border: 1px solid #0094DA ; border-radius: 5px; color:#0094DA ; font-size: 14px; padding: 3px 7px; margin: 0 3px; transition: .5s;}
.bwt-edit-icon:hover, .bwt-delete-icon:hover, .bwt-view-icon:hover{ background-color: #0094DA;color:#fff; border: 1px solid #bbb; }
.bwt-view-icon{}
.bwt-delete-icon{border: 1px solid #dc3545;color:#dc3545}
.bwt-delete-icon:hover{background-color:#dc3545;color:#fff}

.table{font-size: 16px;}
.table thead, .table thead{box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;}
.table thead, .table thead th{background-color: #eee; color: #1c1c1e; white-space: nowrap; padding: 6px 10px; }
.table tbody, .table tbody th{font-size: 16px;}
.un-circle-Badge{background-color: var(--invoicePrimaryColor); width: 26px; height: 26px; text-align: center; margin: auto; line-height: 26px; border-radius: 5px; color: #fff; font-size: 14px; font-weight: bold; }
.nav-tabs .nav-link{font-weight: 600}
/*loginpage*/
.LoginBBd{font-family: 'Poppins'; background-image: url("/Assets/Image/bg-Invoice.png"); background-size: cover; background-repeat: no-repeat; background-position: center; padding: 75px 0; height: 100vh;display: flex;justify-content: center;align-items: center; }
.LoginM20{width: 60%; margin: auto; margin-top: 0px; border-radius: 15px; background-color: #fff; box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px; padding: 8px 0;display: flex;justify-content: center;align-items: center;margin: 0;}
.LoginM20 .left{float: left; width: 50%; padding: 15px; border-right: 2px solid #ddd; }
.LoginM20 .left h1{color: #1c1c1e; font-size: 20px; font-weight: bold;margin: 10px 0 5px;}
.LoginM20 .left h1 span{color: #D83B01;}
.LoginM20 .left h2{font-weight: 600;font-size:26px; color: var(--bs-primary, #0d6efd); line-height: 1.15; margin-bottom: 0.65rem;}
.LoginM20 .left h4{color: #676a6c; font-weight: bold; font-size: 18px;}
.LoginM20 .right{float: right; width: 50%;}
.LoginM20 .loginForm{margin: 0px 0;}
.LoginM20 .loginForm .form-floating > label{ font-weight: 600; color: #1c1c1e; }
.LoginM20 .loginForm .form-control{ border: 2px solid #ccc; border-radius: 12px;}
.LoginM20 .loginForm .btn.btn-primary{padding:8px 0px;border-radius:5px;}
.LoginM20 .footMsge{margin: 25px 0 10px; font-size: 13px; color: #676a6c;}
.LoginM20 .signUpMsge{margin: 25px 0; font-size: 16px; color: #1c1c1e; font-weight: 500;}
.LoginM20 .carousel .carousel-indicators [data-bs-target]{background-color: #bbb; width: 30px; height: 5px;}
.LoginM20 .carousel .carousel-indicators .active{background-color: #0d6efd;}
.LoginM20 .carousel .carousel-item{text-align: center;}
.LoginM20 .carousel .carousel-item img{width: 250px; margin: auto; margin-top: 0px;}
.LoginM20 .carousel .carousel-item h1{font-weight: bold; color: #1c1c1e;font-size: 20px;}
.LoginM20 .carousel .carousel-item p{font-weight: 500; color: #676a6c;font-size: 14px;padding:0px 5px;}

/*registerpage*/
.RegBBd{font-family: 'Poppins'; background-image: url("/Assets/Image/bg-Invoice.png"); background-size: cover; background-repeat: no-repeat; background-position: center; padding: 75px 0;}
.RegM20 { width: 50%; margin: auto; margin-top: 0px; border-radius: 15px; background-color: #fff; box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px; padding: 20px; }
.RegM20 h1 { color: #1c1c1e; font-size: 32px; font-weight: bold; margin: 10px 0 15px; text-align: center; }
.RegM20 h1 span { color: #D83B01; }
.RegM20 h4 { font-weight: 500; color: #676a6c; font-size: 22px; text-align: center; margin-bottom: 0; }
.RegM20 h5 { font-weight: 400; color: #676a6c; font-size: 18px; text-align: center; padding-bottom: 10px; margin-bottom: 20px; }
.RegM20 .loginForm { margin: 30px 0; }
.regForm .form-group { margin-bottom: 20px; }
.regForm .form-group label { font-weight: 600; color: #1c1c1e; font-size: 16px; }
.regForm .form-group input { margin-top: 5px; padding: 12px 10px; box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 6px; border: 1px solid #ccc; border-radius: 8px; }
.regForm .form-group input:invalid[required]:not(:placeholder-shown) { border-color: #dc3545; }
.stage-div { display: none; }
.stage-div.active { display: block; }
.step { padding: 0; list-style: none; margin: auto; display: flex; justify-content: center; gap: 100px; }
.step li { border: 2px solid #ccc; position: relative; font-weight: 600; background-color: #fff; color: #676a6c; padding: 8px 25px; border-radius: 50px; cursor: pointer; transition: .5s; width: 175px; text-align: center; }
.step li.active { background-color: #0096F5; color: #fff; border: 2px solid #0096F5; }
.step li.complete { background-color: #07A312; color: #fff; border: 2px solid #07A312; }
.step li:hover { background-color: #ccc; color: #fff; }
.step li:not(:last-child)::after { content: ""; position: absolute; top: 50%; left: 175px; width: 100px; height: 2px; background: #ccc; transform: translateY(-50%); }
.step li.active:not(:last-child)::after { background: #0096F5; }
.step li.complete:not(:last-child)::after { background: #07A312; }
.text-danger { color: #dc3545; font-size: 12px; margin-top: 5px; display: none; }

/*loader*/
#preloader { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: #fff; z-index: 9999; display: flex; justify-content: center; align-items: center; } 
#ajaxLoader { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255,255,255,0.7); z-index: 1050; display: flex; align-items: center; justify-content: center; }

/*Dashboard*/
.dash9-panels{box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;border-radius: 10px}
.dash9-panels .dp-head{padding: 10px;display: flex; justify-content: space-between; align-items: center;margin-bottom: 0px;}
.dash9-panels .dp-head .name{ font-size: 22px; color: #1c1c1e; font-weight: 600; float: left; }
.dash9-panels .dp-head .action{ float: right; }
.glass-panel { padding: 20px 30px 10px; border-radius: 20px; background: linear-gradient(135deg, #FFECFB, #eee); box-shadow: 6px 6px 12px rgba(0, 0, 0, 0.1), -6px -6px 12px rgba(255, 255, 255, 0.7); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.3); color: #333; }
.glass-panel h2 { margin-bottom: 12px; font-size: 40px; font-weight: 600; }
.glass-panel p { font-size: 20px; margin-bottom: 5px; }
.glass-panel .itemsList { text-align: left; }
.glass-panel .itemsList ul { list-style: none; padding: 0; margin: 0; display: flex; justify-content: flex-end; }
.glass-panel .itemsList ul li { margin: 0 15px; }
.glass-panel .itemsList ul li .icons { height: 30px; width: 30px; display: inline-block; background-color: #ddd; border-radius: 50px; text-align: center; line-height: 30px; position: relative; top: -7px; color: #676a6c; font-size: 12px; }
.glass-panel .itemsList ul li .count { font-size: 45px; margin-left: 5px; color: #22055d; }
.glass-panel .itemsList ul li .labelName { color: #19162A; font-weight: 400; line-height: 0; }
.timeline-container { position: relative; max-width: 700px; width: 100%; margin-bottom: 8px; }
.timeline-container::before { content: ""; position: absolute; top: 0; left: 27px; width: 3px; height: 100%; background: #bbb; }
.event { position: relative; padding-left: 60px; margin-bottom: 30px; }
.event::before { content: ""; position: absolute; top: 6px; left: 20px; width: 16px; height: 16px; background-color: #6c63ff; border-radius: 50%; border: 3px solid #f1f3f6; box-shadow: 0 0 0 2px #bbb; }
.event-time { font-size: 13px; color: #888; margin-bottom: 4px; }
.event-action { font-size: 16px; font-weight: 600; color: #222; }
.event-details { font-size: 14px; color: #555; }
.badge { display: inline-block; background-color: #6c63ff; color: #fff; font-size: 11px; padding: 2px 8px; border-radius: 20px; margin-left: 6px; }
.income-tracker { background: #fff; border-radius: 16px; padding: 24px; padding-top: 0px; }
.income-tracker-header { display: flex; justify-content: space-between; align-items: center; }
.income-tracker-title { font-size: 24px; font-weight: 600; color: #333; }
.deskdropdown { background-color: #f5f5f7; border: none; border-radius: 8px; padding: 6px 12px; font-size: 14px; cursor: pointer; }
.income-description { margin-top: 8px; font-size: 14px; color: #666; }
.chart { display: flex; justify-content: space-around; align-items: flex-end; margin-top: 0px; height: 180px; position: relative; width: 50%; margin: 0; float: left; min-height: 220px; }
.bar { width: 20px; background-color: #d0e4ff; border-radius: 8px; position: relative; }
.bar.highlight { background-color: #4a90e2; }
.bar-value { position: absolute; top: -32px; left: 50%; transform: translateX(-50%); background: #333; color: #fff; padding: 4px 8px; border-radius: 6px; font-size: 12px; white-space: nowrap; }
.bar-label { margin-top: 8px; text-align: center; font-size: 12px; color: #999; }
.income-change { margin-top: 50px; font-size: 45px; font-weight: 600; color: #4caf50; text-align: right; }
.income-note { font-size: 14px; color: #666; margin-top: 4px; }
.glass-card { background: rgba(255, 255, 255, 0.25); border-radius: 1.5rem; box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.18); padding: 2rem; padding-top: 0px; padding-bottom: 0px; width: 100%; color: #1a1a1a; text-align: center; }
#invoiceChart { max-width: 150px; height: 150px; margin: 0 auto 0rem; }
.status-list { margin-top: 1rem; text-align: left; }
.status-item { display: flex; align-items: center; margin-bottom: 0.8rem; font-weight: 600; color: #222; }
.status-color { width: 16px; height: 16px; border-radius: 50%; margin-right: 0.8rem; box-shadow: 0 0 5px rgba(0,0,0,0.15); }
.draft { background-color: #3b82f6; }
.paid { background-color: #10b981; }
.expired { background-color: #ef4444; }
.status-text { flex-grow: 1; }
.status-count { font-weight: 700; color: #444; }
.nav-logout{color: var(--hrhub-TopTxt); display: block; font-size: 16px; line-height: 1.4; padding: 7px; transition: background .1s ease-in-out, color .1s ease-in-out;}

.bookMarkPlane{padding: 10px;border-bottom: 1px solid #ddd;}
.bookMarkPlane .PageAddress{ font-size: 20px; font-weight: bold; float: right; text-decoration: none; }
.pageHeader{display: flex; justify-content: space-between; padding: 15px; border-radius: 5px; align-items: center; box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;background: #EEE; background: linear-gradient(176deg, rgba(238, 238, 238, 1) 0%, rgba(250, 250, 250, 1) 100%); margin-bottom: 15px;}
.pageHeader .pull-left{float: left;}
.pageHeader .pull-left h2{ margin-bottom: 0px; font-size: 20px; font-weight: bold;color: #1c1c1e; }
.pageHeader .pull-right{float: right;}
.formCase{margin: 0; padding: 17px 10px; border-bottom: 1px solid #ddd; flex-wrap: wrap;}
.formCase .col-md-6{padding: 0px;}
.formCase .labelName{float: left; width: 30%; font-size: 16px; font-weight: 500;padding-top: 6px; color: #1c1c1e;}
.formCase .labelName sup{font-size: 17px;}
.formCase .InputField{float: left; width: 65%;}
.formCase .InputField input, .formCase .InputField select, .formCase .InputField textarea {width: 70%; border: 1px solid #ccc; outline: none; padding: 8px; box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px; border-radius: 8px;}
.formCase .InputField.dropdown{  }
.formCase .InputField.dropdown .dropdown-menu{ box-shadow: rgba(0, 0, 0, 0.15) 0px 5px 15px 0px; position: absolute; inset: 40px auto auto 0px !important; margin: 0px; width: 100%; border-radius: 8px; border: 2px solid #eee; padding: 5px; }
.formCase .InputField.dropdown .dropdown-menu .searchSet{ display: flex; border: 2px solid #ddd; border-radius: 4px; padding: 2px 8px !important; align-items: center; }
.formCase .InputField.dropdown .dropdown-menu .searchSet input{ border: none; box-shadow: none; padding: 5px; width: 100%; margin-left: 6px; font-size: 16px; height: 30px; }
.formCase .InputField.dropdown .dropdown-menu ul{ margin: 7px 0; padding: 2px; list-style: none;  max-height: 240px; overflow-y: auto; }
.formCase .InputField.dropdown .dropdown-menu ul li{ padding: 10px 4px; transition: .5s; border-radius: 5px; cursor: pointer; }
.formCase .InputField.dropdown .dropdown-menu ul li:hover{ background-color: #eee }
.formCase .InputField.dropdown .dropdown-menu ul li h3{ font-size: 16px; font-weight: 600; margin: 0 0 4px; color: #48484a }
.formCase .InputField.dropdown .dropdown-menu ul li p{ font-size: 13px; font-weight: 400; margin: 0; color: #676a6c }
.formCase .InputField.dropdown .dropdown-menu .bottom{ border-top: 1px solid #ccc; padding: 8px; font-weight: 600; }
.formCase .InputField.dropdown .dropdown-menu .bottom a{ }
.zipCodInput{ display: flex; align-items: center; outline: none; padding: 0px; padding-right: 10px; border-radius: 8px; margin-left: 10px; background-color: #fff;}
.zipCodInput input{ width: 120px; margin-right: 5px }
.filterHeader{display: flex; justify-content: space-between; padding: 10px 0px; align-items: center; margin-bottom: 5px;}
.selectWithSer{ border: 1px solid #ccc; outline: none; padding: 8px; box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px; border-radius: 8px; display: flex; justify-content: space-between; align-items: center; }
.selectWithSer:after{content: none !important; display: none !important; background: none !important; border: none !important; position: static !important; width: 0 !important; height: 0 !important; }
.InputFieldDrpJ13 .selectWithSer {width: 70%;}
.InputFieldDrpJ13 .dropdown-menu {width: 70% !important;}
.inputshadowBorder { box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px; border: 1px solid #aaa !important; border-radius: 8px; font-size: 18px; font-weight: 500; background-color: #fff !important; outline: none !important; width: 100%; padding: 5px 10px;}
.inputshadowBorder:hover, .inputshadowBorder:active, .inputshadowBorder:focus {box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0), 0 3px 1px -2px rgba(0, 0, 0, 0.01), 0 1px 5px 0 #1c84c6 !important; color: #1c84c6; font-weight: 500; outline: none !important;}
.inputshadowBorderforSearch {box-shadow: 0 2px 2px 0 rgb(0 0 0 / 0%), 0 3px 1px -2px rgb(0 0 0 / 1%), 0 1px 5px 0 #1c84c6 !important; border: none !important; border-radius: 25px; font-size: 18px; font-weight: 400; background-color: #fff !important; outline: none !important;}
.unitField{display: flex;box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px; border-radius: 8px; width: 45% !important; border: 1px solid #aaa; }
.unitField input, .unitField select{border: none !important; box-shadow: none !important;}
.unitField input{width: 50% !important;}
.unitField select, .unitField input:nth-child(2) {width: 50% !important; border-left: 2px solid #ddd !important; border-radius: 0 25px 25px 0 !important;}
.scroll-block {
    position: fixed;
    top: 0;
    width: 100%;
    background: #222;
    color: white;
    padding: 15px;
    text-align: center;
    transition: top 0.3s ease;
    z-index: 999;
}

.hidden {
    top: -100px;
}

/* Upload file */
.upload-container { max-width: 300px; margin: auto; }
input[type="file"] { display: none; }
.upload-panel { width: 200px; height: 200px; border: 2px dashed #aaa; border-radius: 10px; background-color: white; cursor: pointer; position: relative; overflow: hidden; margin: auto; display: flex; align-items: center; justify-content: center; color: #555; font-size: 16px; transition: border-color 0.3s; background-size: cover; background-position: center; }
.upload-panel:hover { border-color: #007BFF; }
.upload-text { z-index: 2; text-align: center; }
.upload-panel.has-image .upload-text { display: none; }
.delete-icon { position: absolute; top: 8px; right: 8px; background-color: rgba(0, 0, 0, 0.6); color: white; border: none; border-radius: 50%; width: 28px; height: 28px; cursor: pointer; font-size: 18px; z-index: 3; display: none; }
.upload-panel.has-image .delete-icon { display: block; }
.error { color: red; margin-top: 10px; font-size: 13px; }
.productTab{}


.productTab thead{}
.productTab thead td{padding: 7px 12px; font-weight: 600; text-transform: uppercase; color: #1c1c1e; font-size: 14px;}
.productTab tbody>tr>td{vertical-align: top; border-right: 2px solid #ddd;padding: 10px;}
.productTab tbody>tr>td:nth-last-child(1){border-right: none !important;}
.productTab tbody input, .productTab tbody select{border: 1px solid #ddd; border-radius: 8px; transition: .5s; padding: 8px; }
.productTab tbody input:hover, .productTab tbody select:hover{border: 1px solid #0095f6;}
.productTab tbody .item{width: 400px; height: 60px; }
.productTab tbody .paraInput{ border: 1px solid #ddd; border-radius: 8px; width: 100%; padding: 8px; outline: none }
.productTab tbody .inp-am{width: 100px; }
.productTab tbody .close{ border: none; background: none; font-size: 22px; padding: 0;color: #f65959}
.drag-handle{opacity: .5; cursor: move; border-right: none !important; font-size: 20px;}
.totalPanel{background-color: #00bf0e1c;}
.totalPanel input, .totalPanel select{ border: none; outline: none; height: 40px; padding: 5px 10px; border-radius: 6px; }

.panel-J4{}
.panel-J4 .list-Plane { width: 25%; border-right: 2px solid #ddd; height: 100vh; float: left }
.panel-J4 .list-Plane .header{ padding: 15px 10px; border-bottom: 2px solid #ddd; padding-bottom: 0;}
.panel-J4 .list-Plane .namePanel{display: flex; justify-content: space-between; align-items: center;}
.panel-J4 .list-Plane .headerText{font-size: 25px; font-weight: bold; color: #1c1c1e; text-transform: uppercase}
.panel-J4 .list-Plane .searchPanel{ display: flex; align-items: center; border: 1px solid #ddd; margin: 10px 0 15px; padding: 6px 8px; color: #676a6c; border-radius: 4px; transition: .5s}
.panel-J4 .list-Plane .searchPanel:hover{ border: 1px solid #0095f6; color: #0095f6; }
.panel-J4 .list-Plane .searchPanel input{ border: none; outline: none; margin-left: 5px }
.panel-J4 .list-Plane .eachFiles{list-style: none;padding: 0}
.panel-J4 .list-Plane .eachFiles li{padding: 10px; border-bottom: 1px solid #ddd; cursor: pointer; transition: .2s; border-left: 5px solid #fff; }
.panel-J4 .list-Plane .eachFiles li:hover{background-color: #eee }
.panel-J4 .list-Plane .eachFiles li.active{ border-left: 5px solid #2cA01C; background-color: #2ca01c14; }
.panel-J4 .list-Plane .eachFiles li .planeOne{font-size: 18px; font-weight: 600; padding-bottom: 5px;}
.panel-J4 .list-Plane .eachFiles li .planeOne .pull-left{color: #0095f6;}
.panel-J4 .list-Plane .eachFiles li .planeOne .pull-right{color: #1c1c1e;}
.panel-J4 .list-Plane .eachFiles li .planeTwo{ padding-bottom: 5px;}
.panel-J4 .Det-Plane{ width: 75%; float: right }
.panel-J4 .Det-Plane .header{ padding: 12px 15px; }
.panel-J4 .Det-Plane .header .fileName{ font-weight: bold; font-size: 30px; color: #1c1c1e }
.panel-J4 .Det-Plane .header .dropdown{ margin-top: 10px; }
.panel-J4 .Det-Plane .header .dropdown-menu{ inset: 34px auto auto -60px !important; padding: 6px !important; }
.panel-J4 .Det-Plane .header .dropdown-menu li a{ font-size: 15px; font-weight: 600; padding: 6px 7px; border-radius: 6px; }
.panel-J4 .Det-Plane .header .dropdown-menu li i{ color: #0094DA; margin-left: 3px; margin-right: 6px; font-size: 13px; }
.panel-J4 .Det-Plane .header .dropdown-menu li:hover a{ background-color: #0094DA !important; color: #fff }
.panel-J4 .Det-Plane .header .dropdown-menu li:hover a i{ color: #fff; }
.panel-J4 .Det-Plane .infoPlane{ background-color: #e3e3e3; }
.panel-J4 .Det-Plane .infoPlane ul{ padding: 0px; list-style: none; display: flex; margin-bottom: 0 }
.panel-J4 .Det-Plane .infoPlane ul li{ padding: 7px 12px; font-weight: 600; border-right: 2px solid #ccc; }
.panel-J4 .Det-Plane .filePreviewPanel{ background-color: #f3f3f3; margin-bottom: 30px; }
.panel-J4 .Det-Plane .fileView{ padding: 30px 60px; }

/*MASTERdATA Setup*/
.masterPanJ13{}
.masterPanJ13 .PanJ13left{border-right: 1px solid #ccc; height: 77dvh; padding: 0;}
.masterPanJ13 .PanJ13left ul{ display: inline-block; width: 100%; }
.masterPanJ13 .PanJ13left ul button{ width: 100%; text-align: justify; padding: 16px 12px; }
.masterPanJ13 .PanJ13left ul button i{ float: right; font-size: 16px; padding-top: 3px; }
.masterPanJ13 .PanJ13left ul .submenu{ display: none; position: relative; top: 100%; left: 0; background-color: white; border: 1px solid #ccc; min-width: 160px; border-radius: 4px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); z-index: 1; width: 100%; }
.masterPanJ13 .PanJ13left ul .submenu.show{ display: block !important; }
.masterPanJ13 .PanJ13left ul .submenu.show a{  display: block; padding: 10px; text-decoration: none; color: #333; }
.masterPanJ13 .PanJ13left ul .submenu.show a:hover{ background-color: #f1f1f1; }
.masterPanJ13 .PanJ13right{padding: 15px;}
.headerJ27{ display: flex; font-size: 18px; justify-content: space-between; align-items: center; font-weight: 600; color: #1c1c1e; border-bottom: 1px solid #ddd; padding: 0px 10px 8px;}
.tmplteCard{ border: 1px solid #bbb; padding: 8px; height: 270px; overflow: hidden; position: relative; }
.tmplteCard img{ width: -webkit-fill-available; }
.tmplteCard .bttnPanel{opacity: 0; top: 215px; position: absolute; width: 100%; left: 0px; padding: 10px; background-color: #22055d; text-align: center; transition: .6s}
.tmplteCard:hover .bttnPanel{ opacity: 1; }

footer{text-align: center;position: inherit;padding: 4px 10px 15px;background-color: #eee;}



.tblmbllst {border-radius: 5px;margin-bottom: 15px;border: 1px solid #e9e6e6;}
.tblmbllst .top {background-color: #efefef;margin: 0px 0px 5px 0px;padding: 6px 5px 3px !important;position: relative;border-radius: 5px 5px 0px 0px;color: #1c84c6;border-bottom: 1px solid #e9e6e6;}
.tblmbllst span.circle-badge {position: relative;z-index: 7;display: inline-block;float: left;width: 25px;height: 25px;line-height: 25px;}
.tblmbllst .top h3 {float: left;margin-bottom: 0px;padding-left: 5px;font-size: 18px;padding-top: 2px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
.tblmbllst .top .pull-right .btn {padding: 2px 6px;margin: 0 0px;}
.tblmbllst ul {padding-left: 0px;}
.tblmbllst ul li {list-style: none;}
.tblmbllst ul li {border-bottom: 1px solid #e1dede;padding: 4px 5px;display: inline-block;width: 100%;}
.tblmbllst ul li:last-child{border-bottom:0px;padding-bottom: 0px;}
.tblmbllst ul p{margin-bottom:0px;font-size:15px;}
.tblmbllst ul p:first-child {margin-bottom: 0px;font-weight: 600;display: inline-block;float: left;width: 150px;font-size:14px;}
.tblmbllst ul p:last-child {float: left;width: calc(100% - 150px);padding-left:10px;}
.tblmbllst ul p a {word-wrap: break-word;}

.productsPge .tblmbllst .top h3{width: calc(100% - 85px);}
.productsPge .tblmbllst ul li:last-child p:last-child{width:100%;padding-left:0px;}



#Estimation_rightmbl .modal-dialog{max-width:99% !important;}
#Estimation_rightmbl .modal-body{padding:10px;}
#Estimation_rightmbl .header{padding:3px 5px;}
#Estimation_rightmbl .header .dropdown,#Estimation_rightmbl .header .btn-close{float:right;}
#Estimation_rightmbl .header .btn-close{font-size: 20px;padding: 1px 5px 6px;border: 1px solid #ddd;margin-left: 5px;}
#Estimation_rightmbl .table-responsive{width: 82%;display: inline-block;}

/* Estimation Status Badges */
.badge.estimation-status-draft {
    background-color: #6c757d;
    color: white;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
    display: inline-block;
}

.badge.estimation-status-sent {
    background-color: #ffc107;
    color: #333;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
    display: inline-block;
}

.badge.estimation-status-viewed {
    background-color: #17a2b8;
    color: white;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
    display: inline-block;
}

.badge.estimation-status-accepted {
    background-color: #28a745;
    color: white;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
    display: inline-block;
}

.badge.estimation-status-declined {
    background-color: #dc3545;
    color: white;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
    display: inline-block;
}