* {box-sizing: border-box;margin: 0;padding: 0;}
body {font-family: system-ui, -apple-system, sans-serif;color: #333;background-color: #f5f5f5;line-height: 1.5;}
.container{max-width: 1320px;}
h2{font-size:24px;}
.h3, h3 {font-size: 20px;}
.btn{border-radius: 20px;position: relative;background-color: transparent;    padding: 0 20px;padding:5px 20px;font-size: 15px;}
/*.btn:hover{background-color: transparent;color: #08449c;}*/
.btn-danger {color:#dc3545;background-color: transparent;border-color: #dc3545;border: 2px dashed #dc3545;}
/*.btn:before {content: '';position: absolute;display: block;width: 35px;top: 5px;left: 5px;bottom: 5px;border-left: 2px solid #0a59ce;border-radius: 20px;}*/
/*.btn:after {content: '';position: absolute;display: block;width: 35px;top: 5px;right: 5px;bottom: 5px;border-right: 2px solid #0a59ce;border-radius: 20px;}*/
.btn-primary{color:#0d6efd;}
.btn-primary{border: 2px dashed #0d6efd;}

header {background:#522f91;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);padding:10px 0;}
header nav {display: flex;justify-content: space-between;align-items: center; gap:30px;}
.header-item {display: flex;align-items: center;justify-content: space-between;}
ul.menu {list-style-type: none;padding: 0;margin: 0;display: flex;align-items: center;gap: 20px;}
ul.menu li a {text-decoration: none;color: #fff;font-size: 16px;    font-weight: 500;}
/*.btn-primary {color: #fff;background-color: #031124;border-color: #031124;}*/
.invoice-container {margin: 2rem auto;padding: 2rem;background: white;border-radius: 8px;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);}
.invoice-header {display: flex;justify-content: space-between;margin-bottom: 2rem;}
.invoice-title {font-size: 2rem;font-weight: bold;    margin: 0;}
.logo-input {position: absolute;width: 0;height: 0;opacity: 0;}
.logo-label {display: block;width: 100%;height: 100%;cursor: pointer;}
.logo-preview {width: 100%;height: 100%;border: 2px dashed #0a59ce;border-radius: 8px;display: flex;align-items: center;justify-content: center;overflow: hidden;
background-color:#86b7fe24;transition: all 0.3s ease;}
.logo-preview:hover {border-color:#0a59ce;background-color: #e9ecef;}
.upload-text {color:#0a59ce;font-size:20px;}
.preview-image {width: 100%;height: 100%;object-fit: contain;}
/*.invoice-parties {display: grid;grid-template-columns: 1fr 1fr;gap: 2rem;margin-bottom: 2rem;}*/
.form-group {margin-bottom:0;}
.form-group label {display: block;margin-bottom: 0.5rem;color: #000;font-size:15px;}
.form-group input,.form-group select,.form-group textarea {width: 100%;padding:5px;border: 1px solid #ddd;border-radius: 4px;background-color: #fff;font-size:14px;}
.form-group textarea {min-height: 80px;resize: vertical;}
.item-form {background: #fff;border: 1px solid #ddd;border-radius: 8px;padding: 1.5rem;margin-bottom: 1.5rem;position: relative;}
.remove-item {position: absolute;top: 1.5rem;right: 1rem;background: none;border: none;color: #dc3545;cursor: pointer;font-size: 1rem;padding: 0;border: 1px solid #dc3545;width: 30px;height: 30px;border-radius: 15px;}
.add-another-item {display: block;border: 2px dashed #0a59ce;color:#0a59ce;font-size: 1rem;cursor: pointer;text-align: center;margin-bottom: 2rem;font-weight: bold;}
/*.add-another-item:hover {background:#0a59ce;border-color:#0a59ce;}*/
.form-row {display: flex;gap: 1rem;margin-bottom: 1rem;}
.quantity-input {display: flex;gap: 0.5rem;}
.quantity-input input {flex: 1;}
.quantity-input select {width: 80px;}
.invoice-summary {margin-left: auto;width: 300px;margin-top: 2rem;}
.summary-item {display: flex;padding: 0.5rem 0;border-bottom: 1px solid #ddd;}
.summary-item.total {font-weight: bold;margin-top: 0.5rem;}
.invoice-footer {margin-top:3rem;border-top: 1px solid #ddd;padding-top:20px;}
.notes-section textarea {width: 100%;height: 100px;padding: 0.5rem;border: 1px solid #ddd;border-radius: 4px;resize: vertical;}
.add-signature,.add-photo {padding: 0.5rem 1rem;background: none;border: 1px solid #ddd;border-radius: 4px;cursor: pointer;margin-top: 0.5rem;}
.invoice-actions {margin-top: 4rem;display: flex;justify-content: space-between;}
.create-invoice{padding: 0.5rem 1rem;background: none;border:2px dashed #084298;color:#084298;cursor: pointer;}
#signaturePad {width: 100%;height: 200px;border: 1px solid #ccc;touch-action: none; /* Important for touch support */}
/* For Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,input::-webkit-inner-spin-button {-webkit-appearance: none;margin: 0;}
/* For Firefox */
input[type=number] {-moz-appearance: textfield;}
.field-error {border: 2px solid red !important;background-color: #fff4f4;}
.invoiceDetail {position: relative;padding-right:175px;border-bottom: 1px solid #eee;margin-bottom: 50px;padding-bottom: 30px;    padding-top: 70px;}
.logo-upload {width: 150px;height: 150px;position: absolute;right: 0;    bottom: 34px;}
button#removeLogoBtn {position: absolute;top:5px;right:5px;padding: 0 5px;}
.invoice-header {display: flex;justify-content: space-between;margin-bottom: 2rem;position: absolute;top: -1px;left: -1px;background: #f5f5f5;padding: 0;border-radius: 0 0 50px;border-bottom: 1px solid rgba(0, 0, 0, .125);
border-right: 1px solid rgba(0, 0, 0, .125); box-shadow:inset -5px -2px 0px #0a59ce; padding-right: 40px;margin: 0;padding-bottom: 20px;}

.bill-to-section.card {padding: 30px;height: 100%;}
.from-section.card {padding: 30px;}

.addrs h3 {font-size: 20px;border-bottom: 2px solid #eee;padding-bottom: 10px;margin-bottom: 20px;}
.addrs .form-group {display: flex;align-items: center;margin-bottom: 20px;}
.addrs .form-group label {margin: 0;min-width: 130px;}

.invoice-items thead.table-light tr th {background: transparent;font-weight: 500;font-size: 14px; color:#fff;}
.invoice-items thead.table-light tr {background:linear-gradient(to bottom, #084298, #0d6efd);}
div#invoice-items {margin-top: 50px;border-bottom: 1px solid #eee;}
.invoice-items .form-control{    padding: 2px 10px;    font-size: 13px;}
.summary-item span.label {min-width: 130px;}
button#signatureRemoveBtn {position: absolute;top:5px;right:5px;padding: 0 5px;width: 30px;height: 30px;}
button#signatureRemoveBtn:before{display:none;}
button#signatureRemoveBtn:after{display:none;}
.signatureDisplay{    border-radius: 10px; height: 100px; border: 1px dashed #ccc; display: flex; align-items: center; justify-content: center;position: relative;}
.summary-item .form-control {background: #fff;padding: 0;border: 0;font-weight: bold;}

#invoiceTableContainer thead tr th {background: transparent;font-weight: 500;font-size: 14px; color:#fff;}
#invoiceTableContainer thead tr {background:linear-gradient(to bottom, #084298, #0d6efd);}
.login-btns {gap: 15px;display: flex;}
.login-btns .btn {border-color: #fff;color: #fff; height:40px;}
/* From Uiverse.io by KINGFRESS */ 
.dashbord{width: 130px;}
.add-another-item{width:200px;    height: 40px;}
.button {font-weight: bold;cursor: pointer;display: flex;justify-content: center;align-items: center;}
.button .span-mother {display: flex;overflow: hidden;}
.button:hover .span-mother {position: absolute;}
.button:hover .span-mother span {transform: translateY(1.2em);}
.button .span-mother span:nth-child(1) {transition: 0.2s;}
.button .span-mother span:nth-child(2) {transition: 0.3s;}
.button .span-mother span:nth-child(3) {transition: 0.4s;}
.button .span-mother span:nth-child(4) {transition: 0.5s;}
.button .span-mother span:nth-child(5) {transition: 0.6s;}
.button .span-mother span:nth-child(6) {transition: 0.7s;}
.button .span-mother span:nth-child(7) {transition: 0.8s;}
.button .span-mother span:nth-child(8) {transition: 0.9s;}
.button .span-mother span:nth-child(9) {transition: 1s;}
.button .span-mother span:nth-child(10) {transition: 1.1s;}
.button .span-mother span:nth-child(11) {transition: 1.2s;}
.button .span-mother span:nth-child(12) {transition: 1.3s;}
.button .span-mother span:nth-child(13) {transition: 1.4s;}
.button .span-mother span:nth-child(14) {transition: 1.5s;}
.button .span-mother span:nth-child(15) {transition: 1.6s;}
.button .span-mother span:nth-child(16) {transition: 1.7s;}
.button .span-mother span:nth-child(17) {transition: 1.8s;}
.button .span-mother span:nth-child(18) {transition: 1.9s;}
.button .span-mother span:nth-child(19) {transition: 2.1s;}
.button .span-mother span:nth-child(20) {transition: 2.2s;}

.button .span-mother2 {display: flex;position: absolute;overflow: hidden;}
.button .span-mother2 span {transform: translateY(-1.2em);}
.button:hover .span-mother2 span {transform: translateY(0);}
.button .span-mother2 span {transition: 0.2s;}
.button .span-mother2 span:nth-child(2) {transition: 0.3s;}
.button .span-mother2 span:nth-child(3) {transition: 0.4s;}
.button .span-mother2 span:nth-child(4) {transition: 0.5s;}
.button .span-mother2 span:nth-child(5) {transition: 0.6s;}
.button .span-mother2 span:nth-child(6) {transition: 0.7s;}
.button .span-mother2 span:nth-child(7) {transition: 0.8s;}
.button .span-mother2 span:nth-child(8) {transition: 0.9s;}
.button .span-mother2 span:nth-child(9) {transition: 1s;}
.button .span-mother2 span:nth-child(10) {transition: 1.1s;}
.button .span-mother2 span:nth-child(11) {transition: 1.2s;}
.button .span-mother2 span:nth-child(12) {transition: 1.3s;}
.button .span-mother2 span:nth-child(13) {transition: 1.4s;}
.button .span-mother2 span:nth-child(14) {transition: 1.5s;}
.button .span-mother2 span:nth-child(15) {transition: 1.6s;}
.button .span-mother2 span:nth-child(16) {transition: 1.7s;}
.button .span-mother2 span:nth-child(17) {transition: 1.8s;}
.button .span-mother2 span:nth-child(18) {transition: 1.9s;}
.button .span-mother2 span:nth-child(19) {transition: 2.1s;}
.button .span-mother2 span:nth-child(20) {transition: 2.2s;}

span.mobile-nav {font-size: 42px;position: fixed;top:8px;right:8px;display: none;line-height:0;    color: #fff;}
span.mobile-nav.open .bi-list {display: none;}
.bi-x{display: none;-webkit-transition: all .4s;-o-transition: all .4s;transition: all .4s;}
span.mobile-nav.open .bi-x {display: block;}

@media screen and (min-width:200px) and (max-width:991px){
span.mobile-nav{display: block;} 
.mainmenu {display: block;background: #000;position: fixed;left: 0;overflow: auto;top: 0;max-width: 75%;width: 350px;z-index: 999;left: -75%;-webkit-transition: all .4s;transition: all .4s;padding: 20px;bottom: 0;overflow: auto;}
.mainmenu.open{left:0;}
header nav{flex-wrap: wrap;}
ul.menu{flex-wrap: wrap;}
ul.menu li{width:100%;}
header{ z-index: 99;   position: fixed;top: 0;left: 0;right: 0;}
.logo img {max-width: 150px;}
.mainSection {margin-top: 90px;}
div#invoice-items{overflow: auto;}
.logo-upload {width: 100px;height: 80px;position: absolute;right: 0;bottom: auto;top: 0;}
.invoiceDetail{padding-right: 0;}
}