.fatura .box-invoice .box-item :root {
  font-family: Inter;
}

@supports (font-variation-settings: normal) {
  :root {
    font-family: InterVariable, sans-serif;
  }
}

@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter/InterDisplay-Regular.woff2') format('woff2');
  /* Add additional font weights and styles as needed */
}

/* Apply Inter font to all elements */

body {
  font-family: 'Inter', sans-serif !important;
}

* {
  margin: 0px;
  padding: 0px;
}

.icon-remove {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 35px;
}

button.item-delete {
  background: none;
}

.icon-remove:nth-child(1) {
  display: none;
}

.invoices-box {
  box-shadow: 0px 17px 45px #00000014;
  width: 100%;
  background: #ffffff 0% 0% no-repeat padding-box;
  opacity: 1;
  padding: 44px 65px;
  margin: 0 auto;
}

.new-invoice-item-button {
  padding-bottom: 20px;
  border-bottom: 1px solid gray;
  padding: 0px 47px 0px 59px;
}

.new-invoice-button button.save-btn,
.new-invoice-button button.save-btn-1 {
  padding: 10px 34px;
  font-size: 13px;
  margin: 20px 0px;
  font-weight: 600;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 6px;
  color: #141414;
}

.new-invoice-button button.save-btn {
  background: #f3f3f3;
  border: 1px solid #707070;
}

.new-invoice-button button.save-btn-1 {
  background: linear-gradient(81deg, #fec446 -6.34%, #fff8b6 102.72%);
  border: none;
}

.new-invoice-button button:nth-child(3) {
  border: none;
  background: none;
}

.new-invoice-item-button h2 {
  color: "#2B2B2B";
  font-size: "45px";
}

.invoice-form-item {
  padding: 31px 47px 31px 59px;
}

.invoice-form-item-button {
  width: 320px;
  padding: 11px 21px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 34px;
  background: transparent linear-gradient(254deg, #fff3ad 0%, #fec951 100%) 0%
    0% no-repeat padding-box;
  border-radius: 8px;
  opacity: 1;
  color: #2b2b2b !important;
}

.invoice-client {
  display: flex;
  gap: 139px;
}

.invoice-client button {
  width: 22px;
  height: 22px;
  border-radius: 100%;
  font-size: 12px;
  padding: 10px;
  display: flex;
  font-weight: 700;
  color: #141414 !important;
  justify-content: center;
  align-items: center;
  border: none;
  background: transparent
    linear-gradient(220deg, #ffaf00 0%, #fffdf8 100%, #ffffff 100%) 0% 0%
    no-repeat padding-box;
  font-weight: bold;
}

input,
select,
textarea {
  background: #f7f7f7 0% 0% no-repeat padding-box;
  box-shadow: 0px 17px 45px #0000000f;
  border: 1px solid #dcdcdc;
  border-radius: 3px;
}

.invoice-all-form select,
.invoice-all-form input#country {
  width: 100%;
  height: 40px;
  color: #a5a5a5 !important;
  font-size: 16px;
  border-radius: none;
  box-shadow: none;
  background-color: #f7f7f7;
  border: none;
  margin: 11px 0px;
}

.invoice-all-form textarea {
  width: 100%;
  height: 130px;
  color: #a5a5a5;
  font-size: 16px !important;
  background: #f7f7f7;
  margin: 11px 0px;
  border: none;
}

.invoice-quantity-all-item {
  width: 15%;
  border: none !important;
}

.invoice-quantity-all-item input {
  border-top-right-radius: 0;
  border: none !important;
  border-bottom-right-radius: 0;
}

.invoice-quantity-all-item span {
  width: 45px;
  background: #dcdcdc;
  border: none !important;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 5px;
}

.invoice-all-form-small input.price_single {
  width: 120px !important;
}

.invoice-quantity-all-item select {
  width: 50%;
  height: 43px;
  box-shadow: 0px 17px 45px #0000000f;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 5px;
  border-left: none;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.invoice-quantity-all-item {
  font-size: 16px !important;
}

.invoice-quantity-all-item input {
  width: 100%;
  margin-top: 5px;
  height: 40px;
  border: none;
  padding: 10px 8px !important;
  background: #f7f7f7;
}

.invoice-quantity-all-item div {
  display: flex;
  align-items: center;
}

.invoice-quantity-all-item div input {
  width: 50%;
}

.invoice-quantity-all-item div select {
  width: 60%;
  border: none;
  background: #f7f7f7;
}

.invoice-content {
  padding: 31px 47px 31px 59px;
  display: flex;
  gap: 5px;
  flex-direction: column;
  border-top: 1px solid gray;
  border-bottom: 1px solid gray;
}

.invoice-content-reminder {
  display: flex;
  gap: 5px;
  flex-direction: column;
  border-top: 1px solid gray;
  border-bottom: 1px solid gray;
}

.invoice-content-reminder textarea {
  height: 140px;
  width: 100%;
  border: none;
  background: #f7f7f7;
}
.invoice-content textarea {
  height: 140px;
  width: 100%;
  border: none;
  background: #f7f7f7;
}

.invoice-quantity {
  padding: 31px 15px 31px 59px;
  flex-direction: column;
}

.invoice-quantity-item {
  flex-direction: column;
}

.Add-More-Line-Item {
  display: flex;
  gap: 4px;
  align-items: center;
  cursor: pointer;
}

.total {
  padding: 31px 47px 31px 59px;
}
.total.total-reminder {
  padding: 20px 0px;
}
.total-item {
  display: flex;
  justify-content: space-between;
  padding: 15px 10px;
  border-bottom: 1px dashed gray;
}

.invoice-add-div {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.Add-More-Line-Item button {
  width: 30px;
  height: 30px;
  font-weight: bold;
  border-radius: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  border: none;
  background: transparent
    linear-gradient(220deg, #ffaf00 0%, #fffdf8 100%, #ffffff 100%) 0% 0%
    no-repeat padding-box;
  font-weight: bold;
}

.Add-More-Line-Item p {
  font-size: 0.729vw;
}
.total .total-item.total-dunning-reminder p {
  font-size: 18px;
  color: #4e4e4e;
  font-weight: 500;
}
.total .total-item.total-reminder {
  font-size: 18px;
  color: #141414;
  font-weight: 600;
}
.total .total-item.full-total.total-balance {
  font-size: 28px;
  color: #141414;
  font-weight: 700;
  border-bottom: none;
}

.total div:nth-child(1),
.total div:nth-child(2) {
  font-size: 18px;
  color: #141414;
  font-weight: 600;
}

.total div:nth-child(3) {
  font-size: 24px;
  color: #141414;
  font-weight: 700;
}

.total div:nth-child(4) {
  font-size: 0.938vw;
  color: #141414;
  font-weight: bold;
}

.total div:nth-child(5) {
  font-size: 0.938vw;
  color: #141414;
  font-weight: bold;
}

.total div:nth-child(6) {
  font-size: 1.25vw;
  color: #141414;
  font-weight: bold;
  border: none !important;
}

.invoice-list {
  gap: 50px;
}

.invoice-all-form-small {
  width: 229px;
  display: block;
}

.invoice-all-form-small input {
  display: block;
  width: 100%;
  height: 40px;
  margin: 11px 0px;
  border-radius: 5px;
  box-shadow: none;
  color: #a5a5a5 !important;
  font-size: 16px;
  background-color: #f7f7f7;
  border: none !important;
}

.row-group {
  display: flex;
  gap: 25px;
  width: 100%;
  flex-wrap: wrap;
}

.invoice-all-form-small label {
  color: #141414;
  font-size: 16px;
  margin: 0px;
  font-style: Inter;
}

.invoice-all-form label {
  font-size: 16px;
  color: #141414;
  margin: 0px;
}

#add-item-btn {
  background: transparent;
  text-align: left;
  padding: 10px 0;
}

span#add i.fas.fa-plus-circle {
  font-size: 21px;
}

/* End Invoices Add Page */
#main .box {
  width: 100%;
  margin-top: 30px;
}

.settingsAllItem .box-item {
  /* padding: 15px; */
  /* border: 1px solid #ffaf00; */
  padding: 0px 67px 0px 44px;
  border-radius: 8px;
  margin-bottom: 35px;
}

.settingsAllItem .box-item h2 {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 15px;
}

.settingsAllItem .box-item p {
  font-size: 14px;
}

.box-img-desc button.invite-buttton {
  font-size: 22px;
  background: linear-gradient(
    241deg,
    rgba(255, 243, 173, 1) 0%,
    rgba(254, 201, 81, 1) 100%
  );
  font-family: "Inter";
  font-weight: 700;
  padding: 12px 81px;
  width: 100%;
}

.custom-select {
  position: relative;
  display: inline-block;
}

.select-trigger {
  display: flex;
  align-items: center;
  cursor: pointer;
  border: 1px solid #ccc;
  padding: 5px;
  border-radius: 5px;
}

.option-icon {
  width: 20px;
  height: 20px;
  margin-right: 5px;
}

.options-list {
  display: none;
  position: absolute;
  list-style: none;
  background-color: #fff;
  border: 1px solid #ccc;
  border-top: none;
  border-radius: 0 0 5px 5px;
  margin-top: -1px;
  padding: 0;
  width: 100%;
}

.options-list li {
  padding: 5px;
  display: flex;
  align-items: center;
  cursor: pointer;
}

.credit-note-item p:nth-child(1) {
  font-size: 14px;
  margin-bottom: 5px;
}

.credit-note-item p:nth-child(2) {
  font-size: 16px;
  font-weight: bold;
}

.custom-select.open .options-list {
  display: block;
}

.credit-note,
.credit-note-modal {
  display: flex;
  justify-content: space-between;
}

.options-list {
  font-size: 12px;
}

.select-trigger {
  font-size: 12px;
}

.custom-select {
  width: 140px;
  background: #f6f6f6 0% 0% no-repeat padding-box;
}

.credit-note {
  padding-bottom: 40px;
  border-bottom: 1px solid #d4d4d4;
}

.prices {
  padding: 30px 0px;
  border-bottom: 1px solid #d4d4d4;
}

.price-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
}

.price-item-cu-am input {
  margin-top: 7px;
  display: block;
  height: 40px;
  width: 200px;
  border-radius: 3px;
  border: 1px solid #dcdcdc;
  box-shadow: 0px 17px 45px #0000000f;
}

.price-item-cu-am label {
  padding-left: 10px;
  font-weight: bold;
  font-size: 16px;
}

.price-checkbox {
  display: flex;
  gap: 15px;
  align-items: center;
}

.custom-checkbox {
  display: inline-block;
  position: relative;
  padding-left: 30px;
  margin-bottom: 10px;
  cursor: pointer;
  height: 35px;
}

.custom-checkbox input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

.checkbox-icon {
  position: absolute;
  top: 0;
  left: 0;
  width: 35px;
  height: 100%;
  background-color: #ffaf00;
  border: 1px solid #ffaf00;
}

.custom-checkbox input[type="checkbox"]:checked + .checkbox-icon::after {
  content: "\2713";
  font-size: 16px;
  color: white;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.reason {
  padding-top: 30px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 40px;
}

.reason-item select {
  margin-top: 10px;
  width: 200px;
  height: 40px;
  color: #a5a5a5;
  font-size: 14px;
  box-shadow: 0px 17px 45px #0000000f;
  border: 1px solid #dcdcdc;
  border-radius: 3px;
}

.recipt-invoice {
  width: 251px;
  height: 88px;
  border-radius: 11px;
  border: 1px dashed #707070;
}

.recipt-invoice-desc {
  justify-content: center;
  display: flex;
  gap: 10px;
  align-items: center;
  height: 100%;
  width: 100%;
}

.recipt-invoice img {
  width: 30px;
  height: 30px;
}

.recipt-invoice p {
  font-size: 14px;
  width: 187px;
}

.footer-modal {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.footer-modal p {
  font-weight: bold;
  font-size: 14px;
}

.footer-modal-button {
  display: flex;
  gap: 15px;
  align-items: center;
}

.footer-modal-button button {
  width: 132px;
  height: 35px;
  border-radius: 6px;
  font-size: 14px;
}

#main {
  margin: 0 auto;
  background: #ffffff 0% 0% no-repeat padding-box;
  box-shadow: 0px 17px 45px #00000014;
  padding: 47px 25px;
  border-radius: 10px;
  margin-bottom: 100px;
}

#main [type="button"]:focus,
#main [type="button"]:hover,
#main [type="submit"]:focus,
#main [type="submit"]:hover,
#main button:focus,
#main button:hover {
  /* color: #fff; */
  background-color: transparent !important;
  text-decoration: none;
  color: #141414 !important;
}

.button-tabs-second [type="button"]:focus,
.button-tabs-second [type="button"]:hover,
.button-tabs-second [type="submit"]:focus,
.button-tabs-second [type="submit"]:hover,
.button-tabs-second button:focus,
.button-tabs-second button:hover {
  color: #141414 !important;
  outline: none !important;
}

.ct_buttons-choose .person-btn {
  border: 1px solid #707070;
  border-radius: 3px;
  opacity: 1;
  width: 160px;
  padding: 10px auto;
}

.organization-btn {
  background: linear-gradient(
    241deg,
    rgba(255, 243, 173, 1) 0%,
    rgba(254, 201, 81, 1) 100%
  ) !important;
  border-radius: 8px;
  border: none !important;
  opacity: 1;
}

.organization-btn:hover,
.organization-btn:active,
.organization-btn:focus,
.organization-btn:focus-visible {
  background: linear-gradient(
    241deg,
    rgba(255, 243, 173, 1) 0%,
    rgba(254, 201, 81, 1) 100%
  ) !important;
  outline: none;
  opacity: 1;
  border: none;
}

.ct_buttons-choose .button-tabs {
  margin: 35px 0 39px 0;
  display: flex;
  gap: 20px;
}

.row {
  display: flex;
  flex-direction: row;
  margin-bottom: 10px;
}

.input-container {
  display: grid;
  width: 280px;
  margin: 0 10px;
}

.input-container.second {
  width: 175px;
  margin: 0 10px;
}

label {
  display: block;
}

.first-inputs {
  width: 100%;
  margin-bottom: 10px;
}

#orgname {
  width: 280px;
  height: 40px;
}

#legalname {
  width: 280px;
  height: 40px;
}

#cusnumber {
  width: 175px;
  height: 40px;
}

#type {
  width: 175px;
  height: 40px;
}

.input-container label {
  margin-bottom: 10px;
  margin-left: 10px;
  color: #141414;
  font-size: 18px;
}

.input-container input {
  border: none;
  border-radius: 5px;
  background: #f7f7f7;
}

.input-container input::placeholder {
  color: #a5a5a5;
  font-size: 14px;
}

.line hr {
  border: 1px solid #141414;
  margin: 30px 0 !important;
}

.button-tabs-second .tabs {
  margin: 0;
  padding: 0;
}

.button-tabs-second .tab {
  background-color: #ccc;
  border: 1px solid #fff;
  border-radius: 4px;
  cursor: pointer;
  margin-right: 2px;
  padding: 10px 15px;
  width: 125px;
}

.button-tabs-second .tab:hover,
.button-tabs-second .tab:focus,
.button-tabs-second .tab:focus-visible {
  background-color: transparent;
}

.button-tabs-second .tab.active {
  background-color: #fff;
  color: #ccc;
}

.button-tabs-second .tab input {
  display: none;
}

.button-tabs-second .tab input:checked + .content {
  display: block;
}

.content {
  display: none;
}

.button-tabs-second .tab-button {
  border: none;
  color: #c3c3c3;
  font-size: 16px;
  background: none;
}

.button-tabs-second .progressbar hr {
  background: #dedede 0% 0% no-repeat padding-box;
  height: 4px;
  border: none;
  border-radius: 8px;
}

.progressbar hr {
  margin-top: 1rem !important;
  margin-bottom: 1rem !important;
}

.second-row {
  margin-left: 10px;
}

.tab-button-item {
  display: flex;
  width: 70%;
  justify-content: space-between;
}

.button-tabs-second .tab-button {
  position: relative;
}

.button-tabs-second .tab-button.active {
  color: #141414;
  font-size: 14px;
  font-weight: Bold;
}

.button-tabs-second .tab-button.active::before {
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  top: 50px;
  left: 0;
  background-color: #ffaf00;
  border-radius: 10px;
}

.button-tabs-second .activeTab {
  display: block !important;
}

.input-container.address input,
.input-container.address select {
  width: 180px;
  height: 40px;
  border: none;
  border-radius: 5px;
  background: #eeeeee;
}

.row-container {
  display: flex;
  justify-content: space-between;
}

#main .col-md-6 {
  width: 50%;
}

.input-row {
  display: flex;
  gap: 25px;
}

.input-row .input input {
  width: 200px;
  height: 40px;
  display: grid;
  border-radius: 5px;
  margin-right: 25px;
  background: #eeeeee;
  border: none;
}

.input-row .input input#debtor {
  width: 450px;
}

.input-row .input label {
  color: #141414;
  font-size: 16px;
  margin-left: 5px;
  margin-bottom: 10px;
}

#main .mt-5 {
  margin-top: 20px;
}

#main .col-md-8 {
  width: 70%;
}

.input-container.payment input {
  width: 280px;
  height: 40px;
  display: grid;
  border-radius: 5px;
  margin-right: 25px;
  background: #eeeeee;
  border: none;
}

/* New Input  checked*/
.input-container.switch-class {
  display: flex;
  justify-content: start;
  align-items: center;
  margin-left: 0px;
  margin-right: 0px;
  margin-top: 35px;
}
.switch {
  position: relative;
  display: inline-flex;
  width: 72px;
  height: 34px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 8px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

.toggle input:checked + .slider {
  background-color: #ffaf00;
}

.toggle input:focus + .slider {
  box-shadow: 0 0 1px #ffaf00;
}

.toggle input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}
.input-container.switch-class span {
  margin-left: 5px;
}

.input-container.description input {
  width: 500px;
  height: 140px;
  box-shadow: 0px 17px 45px #0000000f;
  border: 1px solid #dcdcdc;
  border-radius: 3px;
}

.third-row {
  display: flex;
  justify-content: end;
  margin-top: 10px;
}

.save-form {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  margin-top: 25px;
}

.btn.btn-save,
.button-footer .btn.btn-save,
.footer-modal-button .btn.btn-save {
  width: 130px;
  height: 35px;
  font-size: 14px;
  font-family: "Inter";
  color: #141414 !important;
  border: none;
  background: linear-gradient(
      241deg,
      rgba(255, 243, 173, 1) 0%,
      rgba(254, 201, 81, 1) 100%
    )
    0% 0% no-repeat padding-box;
  border-radius: 6px;
}

.button-footer {
  display: flex;
  justify-content: end;
  gap: 20px;
}

.btn.btn-cancel,
.button-footer .btn.btn-cancel,
.footer-modal-button .btn.btn-cancel {
  width: 130px;
  height: 35px;
  border: 1px solid #707070;
  border-radius: 6px;
  background: #fff;
  color: #a5a5a5 !important;
}

button#person\ person-update,
button#organization\ organization-update {
  padding: 10px 60px;
}

.div-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.div-header h1 {
  margin: 0;
}

.button-tab button.btn-import {
  background: #f3f3f3 0% 0% no-repeat padding-box;
  border: 1px solid #707070;
  border-radius: 6px;
  width: 160px;
  padding: 10px 27px;
  align-items: center;
  justify-content: center;
  display: inline-flex;
  text-align: center;
  color: #141414 !important;
}

.button-tab button.btn-addcontact {
  background: transparent linear-gradient(244deg, #fff3ad 0%, #fec951 100%) 0%
    0% no-repeat padding-box;
  border-radius: 6px;
  border: none;
  width: 200px;
  padding: 10px 32px;
  align-items: center;
  justify-content: center;
  display: inline-flex;
  color: #141414 !important;
}

.button-tabs-second {
  display: flex;
  justify-content: space-between;
}

.btn-export {
  background: #f3f3f3 0% 0% no-repeat padding-box;
  border: 1px solid #707070;
  border-radius: 6px;
  width: 100px;
  height: 35px;
  margin-right: 10px;
}

.btn-filter {
  background: #f3f3f3 0% 0% no-repeat padding-box;
  border: 1px solid #707070;
  border-radius: 6px;
  width: 100px;
  height: 35px;
}

.table-head {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

.table-head-elements {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 10px;
  border-bottom: 1px solid black;
  width: 100%;
  font-weight: bold;
  padding-left: 10px;
  font-size: 16px;
  gap: 15px !important;
}

.table-body {
  align-items: center;
  background-color: white;
  padding: 20px 0px;
  border-radius: 20px;
}

.table-body .row-element {
  display: flex;
  align-items: center;
  background: #ffffff 0% 0% no-repeat padding-box;
  box-shadow: 0px 5px 30px #00000012;
  border-radius: 7px;
  margin-bottom: 18px;
  padding-left: 10px;
  width: 100%;
}
.elements .button-details {
  width: 7%;
  display: flex;
  align-items: center;
  position: absolute;
  left: 93%;
  right: 0%;
  bottom: 25px;
}
.elements {
  position: relative;
  width: 100%;
}
button.showmore {
  border: none;
  background: transparent;
}

.elements button.showmore:focus,
button.showmore:hover button.showmore:focus-visible {
  background: transparent !important;
  border: none;
  outline: none;
}

.showmoremodal {
  display: none;
  justify-content: center;
  flex-direction: column;
  align-items: start;
  box-shadow: 0px 17px 45px #0000000f;
  border: 1px solid #dcdcdc;
  opacity: 1;
  width: 220px;
  border-radius: 3px;
  position: absolute;
  background-color: white;
  z-index: 9999999;
  right: 10%;
  padding: 10px;
}

.showmoremodal a {
  text-decoration: none;
  text-align: left;
  color: #a5a5a5 !important;
  font-size: 16px;
  border: none;
  border-bottom: 1px solid #7070706e;
  width: 100%;
  padding: 5px 5px;
  cursor: pointer;
}

.showmoremodal a:hover {
  color: black;
}

.showmoremodal a:nth-last-child(1) {
  border-bottom: none;
}

.longselect {
  height: 40px;
  width: 200px;
  border: none;
  margin-right: 25px;
  background: #f7f7f7;
}

.shortselect {
  height: 40px;
  width: 175px;
  border: none;
  background-color: #f7f7f7;
  margin-right: 25px;
}

.clientTypeImage {
  height: 25px;
}

.tableImg {
  margin-right: 10px;
}

.invoiceType {
  margin-right: 5px;
  height: 20px;
}

.alert {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 38%;
  margin: 0 auto;
  height: 50px;
  border-radius: 15px;
  font-weight: 400;
  font-size: 16px;
  justify-content: space-evenly;
}

.alert-success {
  border: 1px solid #ffaf00 !important;
}

.alert-warning {
  border: 1px solid #ed4040;
}

.elements:nth-of-type(odd) {
  height: 70px;
}

.elements:nth-of-type(even) {
  background-color: #fff;
  height: 70px;
}

.end-buttons button {
  border: none;
  width: 100px;
  color: black !important;
  border-radius: 6px;
  height: 35px;
  border: 1px solid #707070;
  background: #f3f3f3 !important;
  padding: 0px;
}

.v-none {
  visibility: hidden;
}

.v-show {
  visibility: visible;
}

/* End Add Clinets Page  */

/* Page Credits card */

#PayModal.active {
  display: grid !important;
  overflow: hidden;
}

#PayModal {
  overflow: hidden;
  align-self: center;
}

#PayModal.modal {
  display: none;
  position: fixed;
  z-index: 1001 !important;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: rgba(0, 0, 0, 0.4);
}

#PayModal .modal-content {
  background-color: #fefefe;
  padding: 20px;
  border: 1px solid #888;
  width: 60%;
  box-shadow: 0px 17px 45px #00000014;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  top: 101px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

#main .box {
  width: 100%;
  margin-top: 30px;
}

#main .box-item {
  padding: 15px;
  border-radius: 8px;
  margin-bottom: 35px;
}

#main .box-item h2 {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 15px;
}

#main .box-item p {
  font-size: 14px;
  margin-bottom: 15px;
}

.fatura .box-invoice .box-item {
  border: 1px solid #ffaf00;
  background: #f6f6f6;
  padding: 10px;
  margin-bottom: 20px;
}

#PayModal {
  overflow: hidden;
}

#main .box-item button img {
  padding-right: 5px;
}

.settings {
  margin: 0 auto;
  background: #ffffff 0% 0% no-repeat padding-box;
  box-shadow: 0px 17px 45px #00000014;
}

.settingsAllItem {
  display: flex;
  justify-content: center;
  flex-direction: column;
}

.settings-body {
  /* width: 80%; */
  display: flex;
  margin: 0 auto;
}

.setting-header h1 {
  font-size: 45px;
  margin-bottom: 30px;
}

.settings-box {
  padding: 20px;
  border: 1px solid #ffaf00;
  background: #f6f6f6 0% 0% no-repeat padding-box;
  border-radius: 8px;
  margin-bottom: 30px;
}

.settings-box p {
  margin: 0;
  font-size: 14px;
}

.settings-box p:nth-child(1) {
  margin-bottom: 4px;
}

.basic-settings h2 {
  font-size: 30px;
  margin-bottom: 11px;
}

.basic-settings p {
  margin: 0;
  font-size: 14px;
  margin-bottom: 3px;
}

.settings-item {
  padding: 37px 130px 30px 130px;
}

.settings .box-item {
  padding-top: 20px;
}

.settings .box-all-item {
  padding: 35px 90px;
  border: 1px solid #dfdfdfdf;
  border-radius: 8px;
  margin-bottom: 40px;
}

.settings .box-name h2 {
  font-size: 24px;
  margin-bottom: 5px;
}

.settingsAllItem .box-name p {
  font-size: 14px;
  margin: 0;
}

.settingsAllItem .box-name {
  margin-bottom: 14px;
}

.settingsAllItem .box-img-desc {
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.sales-box-items {
  width: 48%;
  display: flex;
  border-radius: 8px;
  align-items: center;
  gap: 20px;
  padding: 12px;
  background: #f7f7f7;
}

.sales-box-items.active {
  border: 1px solid #ffaf00;
}

.sales-box-items p {
  margin: 0px;
  font-size: 14px;
}

.sales-box-items img {
  width: 50px;
  height: 50px;
}

.invite-button {
  background: linear-gradient(
    241deg,
    rgba(255, 243, 173, 1) 0%,
    rgba(254, 201, 81, 1) 100%
  );
  width: 402px;
  height: 49px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: 8px;
  justify-content: center;
  border: none;
  color: #141414 !important;
  font-size: 22px;
  font-weight: bold;
}

.box-inputs {
  width: 75%;
  display: flex;
  gap: 27px;
}

.box-input-label {
  width: 50% !important;
  margin-bottom: 15px;
}

.box-input-label input {
  display: block;
  border-radius: 5px;
  border: none !important;
  height: 40px;
  width: 100%;
  margin-top: 5px;
  background: #f7f7f7;
  padding: 0.5rem 1rem !important;
}

.input-label-address {
  width: 100% !important;
}

.input-address {
  flex-wrap: wrap;
}
/* 
.label-zip-city {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  justify-content: space-between;
} */

/* .label-zip-city input:nth-child(1) {
  width: 20% !important;
}

.label-zip-city input:nth-child(2) {
  width: 75% !important;
} */

.label-zip-city select {
  height: 40px;
  margin-top: 10px;
  width: 100% !important;
  border: 1px solid #dcdcdc;
}

.box-input-label select {
  width: 100%;
  height: 40px;
  border: none;
  background: #f7f7f7;
  border-radius: 5px;
}

.two-inputs {
  display: flex !important;
  justify-content: space-between !important;
}

.two-inputs input {
  width: 75% !important;
}

.image-container {
  width: 60%;
  height: 100%;
  border: 2px dashed #ccc;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.custom-upload {
  cursor: pointer;
  display: flex;
  flex-direction: column;
  padding: 20px 0px;
}

.custom-upload img {
  max-width: 50% !important;
  max-height: 200px;
  object-fit: cover;
  align-self: center;
}

#imageUpload {
  display: none;
}

.settingsAllItem .box-name {
  flex-direction: column;
  align-items: start;
  margin-top: 25px;
}

/* End General Setting Page */

/* Parital Modal */

button.btn-partial-modal {
  padding: 5px 20px;
  background: linear-gradient(
    241deg,
    rgba(255, 243, 173, 1) 0%,
    rgba(254, 201, 81, 1) 100%
  );
  color: #141414 !important;
  border: none;
  border-radius: 8px;
  font-size: 12px;
  line-height: 15px;
  font-family: "Inter";
}

/* End Partial Modal */
.custom-select {
  position: relative !important;
  width: 200px !important;
}

.selected-option {
  display: block;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  cursor: pointer;
}

.options-list {
  display: none;
  position: absolute;
  list-style: none;
  padding: 0;
  margin: 0;
  border: 1px solid #ccc;
  border-top: none;
  border-radius: 0 0 4px 4px;
}

.options-list li {
  padding: 8px;
  cursor: pointer;
}

.options-list li:hover {
  background-color: #f0f0f0;
}

.option-icon {
  vertical-align: middle;
  margin-right: 5px;
}

.elements,
.row-element {
  display: flex;
}

/* Mobile Responsive Invoice */
@media (max-width: 767px) {
  /* Modal Invoice */
  #PayModal .modal-content {
    width: 100% !important;
  }
  #PayModal {
    overflow-y: scroll !important;
    overflow-x: hidden;
  }
  .box-invoice {
    /* width: 76%; */
  }
  .fatura .box-invoice .box-item {
    padding: 10px;
  }
  .credit-note-modal {
    flex-wrap: wrap;
    /* width: 75%; */
  }
  .credit-note-item {
    width: 50%;
  }
  .custom-select {
    width: 100% !important;
  }
  .price-item {
    flex-wrap: wrap;
  }
  .prices {
    /* width: 75%; */
  }
  .price-item-cu-am {
    width: 100%;
  }
  .price-item-cu-am input {
    width: 100%;
  }
  .price-item-cu-am label.text-right {
    text-align: left !important;
  }
  .reason {
    flex-wrap: wrap;
    gap: 20px;
  }
  .reason-item,
  .reason-item select {
    width: 100%;
  }
  .recipt-invoice {
    width: 100%;
  }
  .footer-modal {
    flex-wrap: wrap;
  }
  .footer-modal-button {
    justify-content: end;
    width: 100%;
  }
  /* Modal Invoice */
  .tabs {
    width: fit-content;
  }
  #main .hr.mt-3 {
    margin-top: 15px !important;
  }

  .new-invoice-item-button {
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom: 1px solid gray;
    padding: 0 1.5vw 20px 4.167vw;
    flex-direction: column;
  }

  .new-invoice-button {
    width: 100%;
    display: flex;
    gap: 15px !important;
  }

  .new-invoice-button button:nth-child(1) {
    width: 48%;
    height: 35px;
    border-radius: 6px;
    background: #f3f3f3;
    font-size: 12px;
    border: 1px solid #707070;
    padding: 0px;
    color: #141414 !important;
  }

  .new-invoice-button button:nth-child(2) {
    width: 48%;
    height: 35px;
    border-radius: 6px;
    background: linear-gradient(81deg, #fec446 -6.34%, #fff8b6 102.72%);
    font-size: 12px;
    border: none;
    padding: 0;
    color: #141414 !important;
  }

  .invoice-list {
    flex-direction: column;
  }

  .invoice-list-items {
    width: 100%;
  }

  .invoice-list-items.right {
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    flex-direction: column;
  }

  .row-group {
    flex-direction: column;
  }

  .invoice-all-form-small,
  .invoice-all-form input,
  .invoice-all-form textarea,
  .invoice-all-form select {
    width: 100%;
  }

  .inviocess {
    flex-direction: column;
  }

  .invoice-quantity-all-item {
    width: 100%;
  }

  .Add-More-Line-Item p {
    font-size: 20px;
  }

  .total div:nth-child(3),
  .total div:nth-child(2),
  .total div:nth-child(1) {
    font-size: 14px;
    color: #141414 !important;
    font-weight: bold;
  }

  .container {
    padding: 0px !important;
    margin: 0px !important;
  }
  .row-container {
    flex-direction: column;
  }

  .input-row {
    flex-direction: column;
  }

  #main {
    width: 100%;
    padding: 45px 20px !important;
  }

  #main .col-md-6 {
    width: 100%;
  }

  .input-row input {
    width: 100%;
  }

  .input-row select {
    width: 100%;
  }

  .input-row .input input {
    width: 100% !important;
  }

  .input-row textarea {
    width: 100%;
  }

  .second-row {
    margin: 0px !important;
  }
  .content-tab,
  .input-container,
  .content-tab .row,
  .content-tab .row .input-row,
  .content-tab .row .input-row input,
  .input-container.address,
  .input-container.address input,
  .input-container.address select,
  .input-container.description input,
  .input-container.second #cusnumber,
  #legalname,
  #orgname,
  .shortselect {
    width: 100% !important;
  }

  #main .col-md-8 {
    width: 100% !important;
    padding: 0px;
    margin: 0px;
  }

  .paymentInformation-tab .row {
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
  }
  .input-container {
    margin: 0px !important;
  }

  #main .button-tabs {
    display: flex;
  }
  .table-body .tabs .table-head {
    max-width: 100%;
    overflow-x: scroll;
  }

  .invoice-form-item-button {
    width: 100%;
    justify-content: center;
  }

  .invoice-page .second-row .button-tabs-second.button-tabs-second {
    flex-direction: column;
  }
  .second-row .button-tabs-second {
    flex-direction: row;
    overflow-x: scroll;
    overflow-y: hidden;
    max-width: 100%;
  }

  .end-buttons {
    margin-top: 15px;
  }

  .button-tabs-second div {
    display: flex;
    width: 100%;
    overflow-x: scroll;
    overflow-y: hidden;
  }

  /* Responsive adjustments for mobile */
  .table-body {
    overflow-x: scroll;
  }

  .table-head-elements > div,
  .elements > div {
    min-width: 100px; /* Set a minimum width for columns on mobile */
  }

  .table-head-elements div,
  .elements div {
    font-size: 14px;
  }

  .button-tabs-second .tabs {
    overflow: auto;
  }

  .elementor-container .elementor-column-gap-narrow {
    display: flex;
    flex-wrap: wrap;
    padding: 0 40px;
    row-gap: 40px;
  }
  .elementor-column {
    width: 100% !important;
  }

  .invoices-box,
  .settings-item,
  .settingsAllItem .box-item {
    padding: 40px 20px;
  }
  .invoice-form-item,
  .invoice-content,
  .invoice-quantity,
  .total,
  .settings .box-all-item {
    padding: 30px 25px;
  }

  .total-item {
    padding: 10px 0px;
  }
  .w-50.invoice-list-items,
  .w-75.invoice-list-items {
    width: 100% !important;
  }
  .invoice-client {
    justify-content: space-between;
  }
  .div-header {
    flex-wrap: nowrap;
  }
  .div-header .button-tab {
    display: flex;
    justify-content: space-between;
    width: 50%;
    padding: 0px;
    margin: 0px;
    gap: 30px;
  }
  .div-header.client-list {
    display: block;
  }
  .div-header.client-list .button-tab {
    width: 100%;
  }
  .button-tab button.btn-import,
  .button-tab button.btn-addcontact {
    padding: 8px 10px !important;
    width: 200px !important;
  }
  .div-header,
  .elements {
    flex-direction: row;
  }
  .button-tab button {
    width: 80%;
    margin: 0 auto;
  }
  .showmoremodal {
    display: none;
    justify-content: center;
    flex-direction: column;
    align-items: start;
    box-shadow: 0px 17px 45px #0000000f;
    border: 1px solid #dcdcdc;
    opacity: 1;
    width: 220px !important;
    border-radius: 3px;
    flex-wrap: wrap;
    position: absolute;
    right: 10%;
    background-color: white;
    z-index: 1;
    padding: 10px;
  }

  .showmoremodal a {
    text-decoration: none;
    text-align: left;
    color: #a5a5a5 !important;
    font-size: 14px;
    border: none;
    border-bottom: 1px solid #7070706e;
    width: 100%;
    padding: 5px 5px;
    cursor: pointer;
  }

  .settingsAllItem .box-img-desc {
    flex-wrap: wrap;
    gap: 10px;
  }
  .sales-box-items,
  .box-input-label {
    width: 100% !important;
  }
  .box-inputs {
    flex-wrap: wrap;
    width: 100%;
    gap: 15px;
  }
  .box-title h1 {
    font-size: 31px;
    font-weight: 700;
  }
}
/* End Mobile Responsive  */
.box-title h1 {
  font-weight: 700;
}

/* Tablet Responsive */
@media (min-width: 768px) and (max-width: 1024px) {
  /* Modal Invoice */
  #PayModal .modal-content {
    width: 90% !important;
  }
  .fatura .box-invoice .box-item {
    padding: 10px;
  }
  .credit-note-modal {
    margin-top: 10px;
  }
  /* Modal Invoice */
  .tabs {
    width: fit-content;
  }
  #main .hr.mt-3 {
    margin-top: 15px !important;
  }
  .new-invoice-item-button {
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom: 1px solid gray;
    padding: 0 1.5vw 20px 4.167vw;
    flex-direction: column;
  }

  .new-invoice-button {
    width: 100%;
    display: flex;
    gap: 15px !important;
  }

  .new-invoice-button button:nth-child(1) {
    width: 48%;
    height: 35px;
    border-radius: 6px;
    background: #f3f3f3;
    font-size: 12px;
    border: 1px solid #707070;
    padding: 0px;
    color: #141414 !important;
  }

  .new-invoice-button button:nth-child(2) {
    width: 48%;
    height: 35px;
    border-radius: 6px;
    background: linear-gradient(81deg, #fec446 -6.34%, #fff8b6 102.72%);
    font-size: 12px;
    border: none;
    padding: 0;
    color: #141414 !important;
  }

  .invoice-list {
    flex-direction: column;
  }

  .invoice-list-items {
    width: 100%;
  }

  .invoice-list-items.right {
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    flex-direction: column;
  }

  .row-group {
    flex-direction: column;
  }

  .invoice-all-form-small {
    width: 100%;
  }

  .invoice-all-form input {
    width: 100%;
  }

  .invoice-all-form textarea {
    width: 100%;
  }

  .invoice-all-form select {
    width: 100%;
  }

  .inviocess {
    flex-direction: column;
  }

  .invoice-quantity-all-item {
    width: 100%;
  }

  .Add-More-Line-Item p {
    font-size: 20px;
  }

  .total div:nth-child(3) {
    font-size: 14px;
    color: #141414;
    font-weight: bold;
  }

  .total div:nth-child(2) {
    font-size: 14px;
    color: #141414;
    font-weight: bold;
  }

  .total div:nth-child(1) {
    font-size: 14px;
    color: #141414;
    font-weight: bold;
  }

  .container {
    padding: 0px !important;
    margin: auto !important;
  }
  .row-container {
    flex-direction: column;
  }

  .input-row {
    flex-direction: column;
  }

  #main {
    width: 100%;
    padding: 45px 20px !important;
  }

  #main .col-md-6 {
    width: 100%;
    max-width: 100% !important;
  }

  .input-row input {
    width: 100%;
  }

  .input-row select {
    width: 100%;
  }

  .input-row .input input {
    width: 100% !important;
  }

  .input-row textarea {
    width: 100%;
  }

  .second-row .button-tabs-second {
  }

  .content-tab {
    width: 100%;
  }

  .content-tab .row {
    width: 100%;
  }

  .content-tab .row .input-row {
    width: 100%;
  }

  .content-tab .row .input-row input {
    width: 100%;
  }

  .input-container.address {
    width: 100%;
  }

  .input-container.address input,
  .input-container.address select {
    width: 100% !important;
  }

  /* Invoice */
  #main .button-tabs {
    display: flex;
    padding: 0px 20px;
  }
  .table-body.client-table {
    overflow: hidden !important;
  }
  .table-body .tabs .table-head {
    max-width: 100%;
    overflow-x: scroll;
  }

  .invoice-form-item-button {
    width: 90%;
  }

  .button-tabs-second {
    flex-direction: row;
  }
  .tab-button-item {
    width: 60% !important;
  }

  .button-tabs-second div {
    display: flex;
  }

  .table-head-elements {
    display: flex;
    flex-direction: row;
  }

  .table-head-elements div,
  .elements div {
    font-size: 14px;
  }
  .table-head-elements > div,
  .elements > div {
    min-width: 120px;
  }

  .button-tabs-second .tabs {
    overflow: auto;
  }
  .elementor-container .elementor-column-gap-narrow {
    display: flex;
    flex-wrap: wrap;
    padding: 0 40px;
    row-gap: 40px;
  }

  /* .elementor-column {
    width: 100% !important;
  } */

  .div-header,
  .elements {
    flex-direction: row;
  }

  .invoices-box,
  .settings-item,
  .settingsAllItem .box-item {
    padding: 40px 20px;
  }
  .invoice-form-item,
  .invoice-content,
  .invoice-quantity,
  .total,
  .settings .box-all-item {
    padding: 30px 25px;
  }

  .button-tab button {
    width: 80%;
    margin: 0 auto;
  }

  .w-50.invoice-list-items,
  .w-75.invoice-list-items {
    width: 100% !important;
  }
  .settingsAllItem .box-img-desc {
    flex-wrap: wrap;
    gap: 10px;
  }
  .sales-box-items,
  .box-input-label {
    width: 100% !important;
  }
  .box-inputs {
    flex-wrap: wrap;
    width: 100%;
    gap: 15px;
  }
  .box-title h1 {
    font-size: 31px;
    font-weight: 700;
  }
}

/* Reminder Css */

.rm-alert {
  display: flex;
  gap: 5px;
  font-size: 14px;
}

.reminder_box {
  gap: 10px;
  border: 1px solid #ffd97b;
  border-radius: 10px;
  padding: 10px;
  width: 25%;
}