@import "https://fonts.googleapis.com/css2?family=League+Spartan:wght@100..900&display=swap";:root{--white:white;--light-50:#f8f8fb;--light-100:#dfe3fa;--light-300:#888eb0;--light-500:#7e88c3;--light-700:#9277ff;--light-900:#7c5dfa;--dark-50:#2d3055bb;--dark-100:#252945;--dark-300:#1e2139;--dark-500:#141625;--dark-700:#0c0e16;--red-100:#ff9797;--red-300:#ec5757;--green:#33d69f;--orange:#ff8f00;--bluey:#373b53;--font-family:"League Spartan", sans-serif;--font-weight-bold:bold;--font-weight-medium:medium;--font-heading-l-size:36px;--font-heading-l-line-height:33px;--font-heading-l-spacing:-1;--font-heading-m-size:24px;--font-heading-m-line-height:22px;--font-heading-m-spacing:-.75;--font-heading-s-size:15px;--font-heading-s-line-height:24px;--font-heading-s-spacing:-.25;--font-heading-sv-size:15px;--font-heading-sv-line-height:15px;--font-heading-sv-spacing:-.25;--font-body-size:13px;--font-body-line-height:18px;--font-body-spacing:-.1;--font-body-v-size:13px;--font-body-v-line-height:15px;--font-body-v-spacing:-.25}.light-theme{--bg-color:var(--light-50);--bg-color-II:var(--white);--bg-color-III:var(--light-50);--bg-color-IV:var(--bluey);--bg-color-V:var(--white);--bg-modal-color:white;--text-color-I:var(--dark-700);--text-color-II:var(--dark-500);--text-color-III:var(--light-500);--heading-color-I:var(--dark-700);--modal-btn-bg-color-I:var(--light-50);--modal-btn-bg-color-II:var(--red-300);--border-color:var(--light-100);--input-bg-color:transparent;--more-bg-color:#373b531a;--more-text-color:var(--light-500)}.dark-theme{--bg-color:var(--dark-500);--bg-color-II:var(--dark-100);--bg-color-III:var(--dark-50);--bg-color-IV:var(--dark-700);--bg-color-V:transparent;--bg-modal-color:var(--dark-300);--text-color-I:var(--light-50);--text-color-II:var(--light-300);--text-color-III:var(--white);--heading-color-I:var(--white);--modal-btn-bg-color-I:var(--dark-100);--modal-btn-bg-color-II:var(--red-100);--border-color:transparent;--input-bg-color:var(--dark-300);--more-bg-color:var(--dark-100);--more-text-color:var(--light-100)}*{box-sizing:border-box;margin:0;padding:0}body{box-sizing:border-box;width:100%;height:100vh;font-size:var(--font-body-size);font-family:var(--font-family);font-weight:var(--font-weight-medium);line-height:var(--font-body-line-height);letter-spacing:var(--font-body-spacing);margin:0;padding:0;overflow-x:hidden}a{font:inherit;color:inherit;text-decoration:none}button{cursor:pointer}.container{background-color:var(--bg-color);width:100%;height:100%;min-height:100vh;color:var(--text-color-I);justify-content:space-between;display:flex;position:relative}nav{background-color:var(--dark-100);z-index:3;border-radius:0 15px 15px 0;flex-direction:column;justify-content:space-between;width:60px;min-height:100vh;display:flex}nav>div{flex-direction:column;gap:20px;margin-bottom:20px;margin-right:0;display:flex}nav i{color:var(--light-500);align-self:center}nav hr{border:none;border-top:1px solid var(--light-300);opacity:.15}nav .profile-picture{object-fit:contain;border-radius:50%;align-self:center;width:30px;height:30px}main{width:100%;padding:3rem 15rem}.invoice-heading{justify-content:space-between;display:flex;position:relative}.invoice-heading>div:first-child h2{font-weight:var(--font-weight-bold);font-size:var(--font-heading-l-size);line-height:var(--font-heading-l-line-height);letter-spacing:var(--font-heading-l-spacing)}.invoice-heading>div:first-child p{color:var(--light-300);margin-top:5px}.invoice-heading>div:last-child{font-weight:var(--font-weight-bold);font-size:var(--font-heading-sv-size);line-height:var(--font-heading-sv-line-height);letter-spacing:var(--font-heading-sv-spacing);align-items:center;gap:4rem;display:flex}.invoice-heading-filter{font-weight:var(--font-weight-bold);font-size:var(--font-heading-sv-size);line-height:var(--font-heading-sv-line-height);letter-spacing:var(--font-heading-sv-spacing);align-items:center;gap:13px;display:flex}.invoice-heading-filter span:hover{cursor:pointer}.invoice-heading-filter span:before{content:"Filter by status"}.invoice-heading-filter i{color:var(--light-900);font-weight:var(--font-weight-bold)}.invoice-heading-filter__dropdown{font:inherit;background-color:var(--bg-color-II);z-index:1;border-radius:7px;flex-direction:column;gap:15px;width:150px;height:fit-content;padding:15px;display:flex;position:absolute;top:90%;left:57%;box-shadow:0 5px 12px #0000001c}.invoice-heading-filter__dropdown>div{align-items:center;gap:12px;display:flex}.invoice-heading-filter__dropdown>div input[type=radio]{accent-color:var(--light-700)}.invoice-heading-filter__dropdown>div:hover,.invoice-heading-filter__dropdown>div input[type=radio]:hover,.invoice-heading-filter__dropdown>div label:hover{cursor:pointer}.invoice-heading__add{background-color:var(--light-900);color:var(--white);font:inherit;font-size:var(--font-heading-s-size);line-height:var(--font-heading-s-line-height);letter-spacing:var(--font-heading-s-spacing);border:none;border-radius:30px;align-items:center;gap:15px;padding:6px 14px 6px 3px;transition:background-color,all .3s ease-in-out;display:flex}.invoice-heading__add:hover{cursor:pointer;background-color:var(--light-700)}.invoice-heading__add p:before{content:"New Invoice"}.invoice-heading__add i{font-size:32px}.invoice-empty--content{flex-direction:column;align-items:center;margin-top:6rem;display:flex}.invoice-empty--content strong{font-size:var(--font-heading-m-size);font-weight:var(--font-weight-bold);letter-spacing:var(--font-heading-m-spacing);line-height:var(--font-heading-m-line-height);margin:3.5rem 0 1.5rem}.invoice-empty--content p{color:var(--light-300);font-weight:var(--font-weight-medium);margin-bottom:.2rem}.invoice-empty--content p span{font-weight:var(--font-weight-bold)}.invoice-empty--content p span:hover{cursor:pointer}.invoices{margin-top:60px}.invoice{background-color:var(--bg-color-II);border-radius:8px;justify-content:space-between;align-items:center;gap:50px;height:55px;margin-bottom:20px;padding-left:30px;padding-right:20px;display:flex;box-shadow:0 3px 7px #00000018}.invoice:hover{cursor:pointer;border:1px solid var(--light-700)}.invoice strong{font-weight:var(--font-weight-bold);font-size:var(--font-heading-s-size);line-height:var(--font-heading-s-line-height);letter-spacing:var(--font-heading-s-spacing)}.invoice-id>span{color:var(--light-700)}.invoice-date,.invoice-name{color:var(--light-300);font-weight:var(--font-weight-medium)}.invoice-date{width:100px}.invoice-name{word-break:break-all;width:250px;overflow:hidden}.invoice-price{text-align:end;width:150px;overflow:hidden}.invoice>div{align-items:center;gap:15px;display:flex}.invoice>div>a{color:var(--light-700);font-size:12px}.invoice-status{width:100px;font-weight:var(--font-weight-bold);border-radius:5px;justify-content:center;align-items:center;gap:9px;padding:8px 0;display:flex}.invoice-status .fa-circle{font-size:7px}.invoice-status.paid{color:var(--green);background-color:#33d6a010}.invoice-status.pending{color:var(--orange);background-color:#ff910010}.invoice-status.draft{color:var(--light-300);background-color:#373b531a}.view-invoice{color:var(--light-300);flex-direction:column;gap:1.5rem;display:flex}.view-invoice-return{font-weight:var(--font-weight-bold);color:var(--heading-color-I);align-items:center;gap:10px;display:flex}.view-invoice-return:hover{color:var(--light-500);cursor:pointer}.view-invoice-return i{color:var(--light-700);font-size:10px}.view-invoice-heading{background-color:var(--bg-color-II);border-radius:5px;justify-content:space-between;align-items:center;padding:15px 30px;display:flex;box-shadow:0 1px 5px #0000000d}.view-invoice-heading .status{align-items:center;gap:15px;display:flex}.view-invoice-actions{align-items:center;gap:10px;display:flex}.view-invoice-actions.mobile{display:none}.view-invoice-actions button{font:inherit;font-weight:var(--font-weight-bold);border:none;border-radius:25px;padding:10px 20px}.view-invoice-actions button:hover{cursor:pointer}.view-invoice-actions button:first-child{background-color:var(--light-50);color:var(--light-700)}.view-invoice-actions button:first-child:hover{background-color:var(--light-100)}.view-invoice-actions button:nth-child(2){background-color:var(--red-300);color:var(--light-50)}.view-invoice-actions button:nth-child(2):hover{background-color:var(--red-100)}.view-invoice-actions button:nth-child(3){background-color:var(--light-900);color:var(--light-50)}.view-invoice-actions button:nth-child(3):hover{background-color:var(--light-700)}.view-invoice-content{background-color:var(--bg-color-II);border-radius:5px;flex-direction:column;gap:2rem;padding:40px 30px;display:flex;box-shadow:0 1px 5px #0000000d}.view-invoice-content strong{color:var(--heading-color-I);display:inline-block}.view-invoice-content .vendor-info{flex-wrap:wrap;justify-content:space-between;gap:1.5rem;display:flex}.view-invoice-content .client-info{flex-wrap:wrap;gap:10rem;display:flex}.view-invoice-content .client-info>div:first-of-type{flex-direction:column;gap:1.5rem;display:flex}.view-invoice-content .client-info strong{margin:10px 0}.view-invoice-content .billing-info{background-color:var(--bg-color-III);border-radius:7px}.billing-info>div{padding:2rem}.billing-info .first{width:300px}.billing-info .second,.billing-info .third,.billing-info .fourth{text-align:end;width:100px}.billing-info-heading{margin-bottom:1.5rem}.billing-info-heading,.billing-info-heading div,.billing-info-content,.billing-info-content div{justify-content:space-between;display:flex}.billing-info-heading>div>div,.billing-info-content>div>div{gap:3rem}.billing-info-content{word-break:break-all;line-height:3}.billing-info-content>div>div{font-weight:var(--font-weight-bold)}.billing-info-content .multiply{display:none}.billing-info-content .first{color:var(--heading-color-I);font-weight:var(--font-weight-bold)}.billing-info .grand-total{background-color:var(--bg-color-IV);color:var(--light-50);border-radius:0 0 7px 7px;justify-content:space-between;display:flex}.billing-info .grand-total p:last-child{font-weight:var(--font-weight-bold);font-size:var(--font-heading-m-size);line-height:var(--font-heading-m-line-height);letter-spacing:var(--font-heading-m-spacing)}.delete-modal{background-color:var(--bg-modal-color);width:400px;height:fit-content;font:inherit;border:none;border-radius:7px;margin:auto;padding:2rem}.delete-modal::backdrop{background:#000000a1}.delete-modal h2{font-weight:var(--font-weight-bold);font-size:var(--font-heading-m-size);line-height:var(--font-heading-m-line-height);letter-spacing:var(--font-heading-m-spacing);color:var(--heading-color-I)}.delete-modal p{color:var(--light-500);margin:20px 0;line-height:2}.delete-modal>div{justify-content:end;align-items:center;gap:10px;display:flex}.delete-modal>div button{font:inherit;font-weight:var(--font-weight-bold);letter-spacing:.75px;border:none;border-radius:25px;padding:13px 25px}.delete-modal>div button:hover{cursor:pointer}.delete-modal>div button:first-of-type{background-color:var(--modal-btn-bg-color-I);color:var(--text-color-III)}.delete-modal button:last-of-type{background-color:var(--red-300);color:var(--white)}.invoice-form{color:var(--light-300);background-color:var(--bg-color);z-index:2;border-radius:10px;width:35%;height:100%;position:absolute;top:0;left:40px;overflow:hidden scroll}.invoice-form-content{padding:2rem 1.5rem 1.5rem 3rem}.invoice-form-content h2{color:var(--dark-700)}.invoice-form-content>div{width:auto;margin-top:1.5rem}.invoice-form-content>div>p:first-of-type{font-weight:var(--font-weight-bold)}.invoice-form-content>div .bill{color:var(--light-700)}.invoice-form-content label{font-weight:var(--font-weight-medium);margin:1.2rem 0 .3rem;display:block}.invoice-form-content input,.invoice-form-content select{border:1px solid var(--border-color);color:var(--text-color-I);font-weight:var(--font-weight-bold);background-color:var(--input-bg-color);border-radius:3px;width:100%;padding:8px 12px;display:block}.invoice-form-content input:focus,.invoice-form-content select:focus{border:1px solid var(--light-700);caret-color:var(--light-700);outline:none}.invoice-form-content>div>div:hover{color:var(--light-700);cursor:pointer}.invoice-form-content input:hover{border:1px solid var(--light-700)}.invoice-form-content input::placeholder{color:var(--light-300);font:inherit;font-size:11px}.invoice-form-content .flex{align-items:center;gap:.8rem;display:flex}.invoice-form-content .item-lists .flex{gap:.4rem}.invoice-form-content .total p{padding:8px 8px 8px 0}.invoice-form-content .add-more-item{background-color:var(--more-bg-color);font:inherit;width:100%;color:var(--more-text-color);font-weight:var(--font-weight-bold);text-align:center;border:none;border-radius:15px;margin-top:1rem;padding:.7rem 0}.light-theme .invoice-form-content .add-more-item:hover{background-color:var(--light-100)}.invoice-form-actions{background-color:var(--bg-color-V);border-top-right-radius:10px;flex-wrap:wrap;justify-content:space-between;gap:1rem;padding:1.2rem 1.5rem 1.2rem 3rem;display:flex}.invoice-form-actions#edit{justify-content:end}.invoice-form-actions button{font:inherit;font-weight:var(--font-weight-bold);border:none;border-radius:20px;padding:10px 20px}.invoice-form-actions>div{align-items:center;gap:.5rem;display:flex}.invoice-form-actions>button:first-child{background-color:var(--light-50);color:var(--light-500)}.invoice-form-actions>div button:first-child{background-color:var(--dark-300);color:var(--light-300)}.invoice-form-actions>div button:nth-child(2){background-color:var(--light-900);color:var(--white)}.invoice-form-actions#edit button:first-child{color:var(--light-700)}.invoice-form-actions#edit button:nth-child(2){background-color:var(--light-900);color:var(--white)}.hide{display:none}.show{display:block}@media (width<=1024px){.container{flex-direction:column;justify-content:flex-start;gap:0}nav{border-radius:0;flex-direction:row;width:100%;height:60px;min-height:0}nav img{height:100%}nav>div{flex-direction:row;height:100%;margin-right:20px}nav hr{border:1px solid var(--light-300)}main{width:auto;padding:3rem 2rem}.invoice-heading-filter__dropdown{left:50%}.invoice{gap:20px;padding-left:20px;padding-right:15px}.invoice-name{width:200px}.invoice-price{width:100px}.billing-info .first{width:200px}.invoice-form{width:85%;top:10%;left:0}.invoice-form-content{padding:2rem 2.5rem}}@media (width<=768px){main{padding:1.5rem 1rem}.invoice-heading{flex-wrap:wrap;gap:2rem}.invoice-heading-filter span:before{content:"Filter"}.invoice-heading-filter__dropdown{right:150px}.invoice-heading__add p:before{content:"New"}.invoice-heading>div:last-child{gap:2rem}.invoice{grid-template-columns:repeat(2,1fr);gap:5px;height:fit-content;padding-top:15px;padding-bottom:15px;display:grid}.invoice-id{order:1}.invoice-name{order:2;width:fit-content}.invoice-date{order:3;width:fit-content}.invoice>div{order:4}.invoice>div i{display:none}.invoice-price{order:5;width:fit-content}.view-invoice-heading,.view-invoice-content{padding:25px}.view-invoice-actions.desktop{display:none}.view-invoice-content{gap:2rem}.view-invoice-content .client-info{gap:2rem 4rem}.billing-info>div{padding:1rem}.billing-info-heading{display:none}.billing-info-content{flex-wrap:wrap}.billing-info-content>div{flex-direction:column;gap:0}.billing-info-content>div>div{flex-wrap:wrap;justify-content:start;gap:.5rem}.billing-info-content .multiply{display:block}.billing-info-content .first,.billing-info-content .second,.billing-info-content .third .billing-info-content .fourth{width:fit-content}.billing-info-content .third{text-align:start}.billing-info .grand-total{flex-wrap:wrap;gap:1rem}.view-invoice-actions.mobile{background-color:var(--bg-color-II);flex-wrap:wrap;gap:1rem;margin-top:20px;padding:20px 25px;display:flex}.invoice-form{width:100%}.invoice-form-content{padding:1.5rem}.invoice-form-content .flex{display:block}.invoice-form-content input{width:100%;display:block}}@media (width<=320px){.view-invoice-actions.mobile button{width:100%}}