* {
  font-family: "Montserrat", sans-serif;
}
a {
  text-decoration: none;
}

[data-id="undefined"] {
  display: none !important;
}
#loading {
  position: relative;
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
  background-color: rgba(255, 255, 255, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
.spinner {
  border: 8px solid #f3f3f3;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  animation: spin 1s linear infinite;
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.spinner-border {
  height: 20px;
  width: 20px;
}
.btn {
  /*background: rgba(0,0,0,0.25);*/
  transition: all 0.3s;
  color: #fff;
  text-transform: uppercase;
  font-weight: bold;
}
.btn-orange {
  border: none;
}
.text-orange {
  -webkit-background-clip: text; /* Primenjuje pozadinu na tekst u starijim WebKit pregledačima */
  background-clip: text; /* Standardno svojstvo za kompatibilnost */
  -webkit-text-fill-color: transparent;
}
.btn-sm {
  font-size: 9px;
  letter-spacing: -0.2px;
}
div:active,
div:hover,
div:focus {
  outline: none !important;
}
input:hover,
input:focus,
input:active,
button:hover,
button:focus,
button:active {
  outline: none !important;
  box-shadow: none !important;
}
.btn:hover,
.btn:focus,
.btn:active {
  opacity: 0.7;
  transition: all 0.3s;
}

.sidebar nav ul li {
  margin-bottom: 15px;
  transition: all 0.2s;
}

.sidebar nav ul li.cardList .dropdown-toggle {
  white-space: normal;
}

.sidebar nav ul li:hover,
.sidebar nav ul li a:hover {
  text-decoration: none;
  transition: all 0.2s;
}

.sidebar nav ul li i {
  width: 35px;
  text-align: center;
  font-size: 1.25rem;
}

.sidebar nav ul li ul {
  margin-left: 40px;
  margin-top: 5px;
}
.sidebar nav ul li ul li {
  margin-bottom: 5px;
  font-size: 0.8rem;
}

.sidebar nav,
.sidebar nav a {
  color: #fff;
  font-weight: 700;
  text-transform: uppercase;
  transition: all 0.2s;
}

.logo {
  width: 100%;
}

.username span {
  font-size: 16px;
  padding: 0 5px;
  color: #fff;
  border-radius: 0.2rem;
  font-weight: bold;
}
.username {
  font-family: "Mynerve", cursive;
  font-size: 21px;
  font-weight: normal;
  text-transform: capitalize;
  margin-bottom: 10px;
}

header {
  width: calc(100% + 1.5rem);
  background-color: #f9f9f9;
  box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.175);
}

.navbar {
  padding-left: 15px;
  padding-right: 15px;
}

.card {
  background: #f2f2f2;
  box-shadow: 3px 3px 15px rgba(0, 0, 0, 0.175);
  border-radius: 20px;
}

.card-body .btn {
  background: rgba(0, 0, 0, 0.25);
}

.card-body .btn-outline {
  background: rgba(255, 255, 255, 0.5);
  color: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(0, 0, 0, 0.25);
}

.card-body .value.btn-outline,
.card-body .transaction.btn-outline {
  text-align: left;
  font-weight: 500;
  color: #000;
}

.card-body .value:hover,
.card-body .transaction:hover {
  cursor: text;
}

.email-status-message {
  font-size: 13px;
  font-weight: 600;
}

.ui-datepicker {
  z-index: 9999 !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%);
}

/* BUTTONS START */

.addCard {
  background: none;
  border: none;
  height: 35px;
  line-height: 35px;
  display: flex;
}

.addCardIcon {
  border-radius: 0.25rem;
  height: 35px;
  width: 35px;
  padding: 0;
  z-index: 1;
}

.addCardIcon i {
  line-height: 35px;
  font-size: 23px;
}

.addCardText {
  border-top-right-radius: 0.25rem;
  border-bottom-right-radius: 0.25rem;
  padding: 0 6px;
  text-transform: uppercase;
  height: 25px;
  line-height: 25px;
  top: 50%;
  position: relative;
  transform: translateY(-50%);
  white-space: nowrap;
}

.refreshPage,
.archivePage {
  background: none;
  border: none;
  height: 25px;
  line-height: 25px;
  display: flex;
  color: #888;
}

.refreshPageIcon,
.archivePageIcon {
  /*background: #fdc52b;*/
  background: rgba(0, 0, 0, 0.1);
  border-radius: 0.25rem;
  height: 25px;
  width: 25px;
  padding: 0;
  z-index: 1;
}

.refreshPageIcon i,
.archivePageIcon i {
  line-height: 25px;
  font-size: 16px;
}

.refreshPageText,
.archivePageText {
  /*background: #fdc52b;*/
  background: rgba(0, 0, 0, 0.1);
  border-top-right-radius: 0.25rem;
  border-bottom-right-radius: 0.25rem;
  font-size: 12px;
  padding: 0 6px;
  text-transform: uppercase;
  height: 19px;
  line-height: 19px;
  top: 50%;
  position: relative;
  transform: translateY(-50%);
}

input.search,
input.filter {
  height: 25px;
  padding: 0 6px;
  border: none;
  background: rgba(0, 0, 0, 0.05);
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  font-size: 0.75rem;
  font-weight: bold;
}

input.search::placeholder,
input.filter::placeholder {
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

button.search,
button.search-mobile {
  height: 35px;
  width: 35px;
  left: 35px;
  padding: 0;
  background: rgba(0, 0, 0, 0.05);
  color: #212529;
}

button.search:hover,
button.search-mobile:hover {
  color: #fff;
}

/*.saveCard {
  border: none;
  background: none;
  position: absolute;
  right: -10px;
  bottom: 20px;
  font-size: 45px;
  color: #ff8f00;
}*/

.saveCard {
  border: none;
  background: none;
  position: relative;
  right: 10px;
  bottom: 20px;
  font-size: 45px;
}

.barsButton {
  font-size: 13px;
  position: absolute;
  bottom: 3px;
  color: rgba(0, 0, 0, 0.25);
  transition: all 0.3s;
}

.barsButton:hover {
  cursor: pointer;
  transition: all 0.3s;
}

/* Uklonite hover efekte */
/* .barsButton:hover + .cardButtons,
.cardButtons:hover {
    display: block;
    opacity: 1;
    animation: fadeIn 0.3s ease forwards;
} */

/* Dodajte novi stil za prikaz na klik */
.cardButtons.active {
  display: block;
  opacity: 1;
  animation: fadeIn 0.3s ease forwards;
}

#clients-page .cardButtons.active {
  display: block;
  opacity: 1;
  animation: fadeOut 0.3s ease forwards;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px); /* Početni položaj: pomera se 10px gore */
  }
  to {
    opacity: 1;
    transform: translateY(
      0
    ); /* Krajnji položaj: vraća se na normalan položaj */
  }
}

@keyframes fadeOut {
  from {
    opacity: 0;
    transform: translateX(10px); /* Početni položaj: pomera se 10px udesno */
  }
  to {
    opacity: 1;
    transform: translateX(
      0
    ); /* Krajnji položaj: vraća se na normalan položaj */
  }
}

.upload {
  margin: 0px;
}

.upload #fileLabel:hover {
  cursor: pointer;
}

/* BUTTONS END */

/* FAVORITE START */

label.favoriteCard {
  margin-bottom: 0px;
}

i.favoriteCard {
  height: 16px;
  line-height: 15px;
}

input.favoriteCard {
  display: none;
}

/* FAVORITE END */

/* SEND NOTIFICATION START */

label.sendNotificationToClient,
label.sendNotificationToClientCanceled {
  margin-bottom: 0px;
}

i.sendNotificationToClient,
i.sendNotificationToClientCanceled {
  height: 16px;
  line-height: 15px;
}

input.sendNotificationToClient,
input.sendNotificationToClientCanceled {
  display: none;
}

.cardButtons > .sendNotificationToClient > .sendNotificationToClient.btn:hover,
.cardButtons > .sendNotificationToClientCanceled > .sendNotificationToClientCanceled.btn:hover {
	color: #fff;
	opacity: 1 !important;
}

.cardButtons > .sendNotificationToClient > .sendNotificationToClient.btn:hover {
	background: #198754;
}

.cardButtons > .sendNotificationToClientCanceled > .sendNotificationToClientCanceled.btn:hover {
	background: #dc3545;
}

/* SEND NOTIFICATION END */

/* CANCEL REQUEST START */

label.cancelRequest {
  margin-bottom: 0px;
}

i.cancelRequest {
  height: 16px;
  line-height: 15px;
}
span.cancelRequest:hover {
  color: #fff;
}
span.cancelRequest.yes {
  cursor: default;
}
input.cancelRequest {
  display: none;
}
.request-solved,
.request-cancel {
  cursor: default;
}
.request-solved:hover,
.request-cancel:hover {
  color: #fff;
}

/* CANCEL REQUEST END */

/* INFO START */

.issuance-date {
  display: none;
}

.client-company-info,
.info-body {
  display: flex;
  flex-wrap: wrap;
  gap: 0 5px;
}

.info-body input {
  margin-bottom: 6px;
}

/* Stilovi za sve inpute */
.info-body > input {
  /*width: calc(50% - 2.5px);
    margin-bottom: 5px;*/
  background: rgba(255, 255, 255, 0.5);
  height: 20px;
  font-size: 12px;
  padding: 0 4px;
  font-weight: 500;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  flex: 0 0 calc(50% - 2.5px);
}

#general-page .info-body > input.company,
#offers-page .info-body > input.company,
#outgoing-invoices-page .info-body > input.company,
#incoming-invoices-page .info-body > input.company {
  flex: 0 0 calc(50% - 27.5px);
}

.info-body > .fa-sync-alt {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 20px;
  height: 20px;
  background: rgba(255, 255, 255, 0.5);
  font-size: 12px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  color: rgba(0, 0, 0, 0.25);
  transition: all 0.3s;
}

.info-body > .fa-sync-alt:hover {
  color: rgba(0, 0, 0, 0.5);
  cursor: pointer;
  transition: all 0.3s;
}

/* Placeholder za sve inpute */
.card-info-and-table-container > input.quote::placeholder,
.info-body > input::placeholder {
  color: rgba(0, 0, 0, 0.25);
}

.card-info-and-table-container > .invoice-details > div > .value-group > .value-text,
.card-info-and-table-container > .invoice-details > div > .value-group > .value,
.card-info-and-table-container > .invoice-details > div > .transaction-group > .transaction-text,
.card-info-and-table-container > .invoice-details > div > .transaction-group > .transaction,
.card-info-and-table-container > .operator-and-doc-type > .document-type,
.card-info-and-table-container > .operator-and-doc-type > .company-multiple-select,
.card-info-and-table-container > .operator-and-doc-type > .operator-show-hide > .operator,
.card-info-and-table-container > .operator-and-doc-type > .status-request-show-hide > .status-request {
  font-size: 11px;
  margin-bottom: 6px;
  text-wrap-mode: nowrap;
}

.card-info-and-table-container .transaction,
.card-info-and-table-container .value {
  width: 100%;
}

.info-body > .invoice-details > .value-group > .value-text:hover,
.info-body > .invoice-details > .transaction-group > .transaction-text:hover {
  cursor: default;
  color: #fff;
  opacity: 1;
}

.info-body > .invoice-details > .value-group > .value option,
.info-body > .invoice-details > .transaction-group > .transaction option,
.card-info-and-table-container > .operator-and-doc-type > .document-type option,
.card-info-and-table-container > .operator-and-doc-type > .company-multiple-select option,
.card-info-and-table-container
  > .operator-and-doc-type
  > .status-request-show-hide
  > .status-request
  option,
.card-info-and-table-container
  > .operator-and-doc-type
  > .operator-show-hide
  > .operator
  option {
  font-weight: 600;
}

/*.info-body > input:nth-child(odd) {
    margin-right: 2.5px;
}*/

/*.info-body > input:nth-child(even) {
    margin-left: 2.5px;
}*/

/* Stilovi specifični za .quote input */
.card-info-and-table-container .quote {
  /*margin-bottom: 5px;
    width: 100%;
  flex: 0 0 100%;*/
  width: 100%;
  background: rgba(255, 255, 255, 0.5);
  padding: 0 6px;
  font-weight: 600;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  height: 25px;
  flex: 0 0 100%;
  margin: 0 0 6px;
  color: #000;
}

/* INFO END */

/* TABLE START */

.table-container-header,
.table-container-content,
.table-container-footer-add-row {
  font-size: 11px;
}
.table-container-content .table-cell {
  border-top: 1px solid rgba(0, 0, 0, 0.175);
  border-bottom: none;
  border-left: 1px solid transparent;
  border-right: 1px solid transparent;
  background: rgba(255, 255, 255, 0.5);
}

.table-container-content:not(:empty):last-child {
  border-bottom: 1px solid rgba(0, 0, 0, 0.175);
}

#payments-page .table-container-content:not(:empty):last-child {
  border: none;
}

.table-container-header {
  color: rgba(0, 0, 0, 0.5);
  border-top: 1px solid rgba(0, 0, 0, 0.175);
}

.table-container-footer-add-row {
  color: rgba(0, 0, 0, 0.5);
  border-bottom: 1px solid rgba(0, 0, 0, 0.175);
  border-left: 1px solid rgba(0, 0, 0, 0.175);
  border-right: 1px solid rgba(0, 0, 0, 0.175);
  background: rgba(0, 0, 0, 0.05);
  padding-right: 2px;
  font-weight: bold;
  text-align: right;
  text-transform: uppercase;
  height: 20px;
  line-height: 20px;
  transition: .3s;
}

.table-container-footer-add-row:hover {
  cursor: pointer;
  opacity: .7;
  transition: .3s;
}

.table-container-header .article,
.table-container-header .quantity,
.table-container-header .price,
.table-container-header .total,
.table-container-header .item-code,
.table-container-header .color,
.table-container-header .size,
.table-container-header .invoice-date,
.table-container-header .invoice,
.table-container-header .credit,
.table-container-header .debit,
.table-container-header .saldo,
.table-container-header .delivery-date,
.table-container-header .delivery-recipient,
.table-container-header .delivery-address,
.table-container-header .delivery-phone,
.table-container-header .delivery-cod,
.table-container-header .delivery-note {
  display: inline-block;
  background: rgba(0, 0, 0, 0.05);
  font-weight: 500;
  padding: 0 2.5px;
}

.table-container-footer,
.table-container-footer-all {
  width: 100%;
  height: 20px;
  line-height: 20px;
  display: inline-block;
  background: rgba(0, 0, 0, 0.05);
  font-weight: 500;
  border-bottom: 1px solid rgba(0, 0, 0, 0.175);
  white-space: nowrap;
}
.table-container-footer:nth-child(2n + 1) {
  background: rgba(0, 0, 0, 0.015);
}
.table-container-footer:last-child {
  border-bottom: none;
  margin-bottom: 10px;
}
.table-container-footer.discount,
.table-container-footer.vat {
  height: 23px;
  line-height: 23px;
  text-align: right;
}
.table-container-footer.discount .total-full-price-only-discount,
.table-container-footer.vat .total-full-price-only-vat,
.table-container-footer.last-child .total-full-price-with-vat-and-discount {
  width: 25%;
  display: inline-block;
  padding-right: 2px;
}
.table-container-footer.discount .total-full-price-with-discount-title,
.table-container-footer.vat .total-full-price-with-vat-title,
.table-container-footer.last-child
  .total-full-price-with-vat-and-discount-title {
  width: 75%;
  display: inline-block;
  border-right: 1px solid rgba(0, 0, 0, 0.175);
  padding-right: 5px;
}
.table-container-footer.last-child {
  border-bottom: 1px solid rgba(0, 0, 0, 0.175);
  font-size: 17px;
  height: 23px;
  line-height: 23px;
  text-align: right;
  font-weight: 600;
  background: rgba(0, 0, 0, 0.1);
  font-size: 15px;
}
.table-container-footer.vat,
.table-container-footer.discount {
  font-size: 13px;
}
.table-container-footer .addTable {
  text-align: left;
  height: 15px;
}

.table-container-footer div.discount-div,
.table-container-footer div.vat-div,
.table-container-footer div.total-full-price {
  display: inline-block;
  font-weight: 500;
  line-height: 19px;
  white-space: nowrap;
}

.table-container-footer div.discount-div,
.table-container-footer div.vat-div {
  font-size: 12px;
}
.table-container-footer div.total-full-price {
  font-size: 14px;
}

.table-container-footer div.discount-div {
  width: calc(45% - 18px);
}

#payments-page .table-container-footer div.discount-div {
  width: calc(55% - 18px);
}

.table-container-footer div.vat-div {
  width: 30%;
  border-left: 1px solid rgba(0, 0, 0, 0.175);
}

#payments-page .table-container-footer div.vat-div {
  width: 20%;
  border-left: 1px solid rgba(0, 0, 0, 0.175);
}

.table-container-footer div.total-full-price {
  width: 25%;
  text-align: right;
  border-left: 1px solid rgba(0, 0, 0, 0.175);
  padding-right: 2px;
}

.table-container-footer span.discount-after {
  font-size: 12px;
}

.table-container-footer span.discount-span,
.table-container-footer span.vat-span {
  color: rgba(0, 0, 0, 0.25);
  padding-left: 5px;
}

.table-container-footer input.discount,
.table-container-footer input.vat {
  margin-left: 5px;
  background: none;
  font-size: 12px;
  padding: 0px;
  font-weight: 500;
  border: none;
}

.table-container-footer input.discount {
  max-width: 62%;
}
.table-container-footer input.vat {
  max-width: 59%;
}
#payments-page .table-container-footer input.vat {
  max-width: 70%;
}
.table-container-footer .discount::placeholder,
.table-container-footer .vat::placeholder {
  color: rgba(0, 0, 0, 0.25);
}

/* Table calculator - start */
.calculator .table-container-header .article,
.calculator .table-container-content .article {
  width: 45%;
  border-right: 1px solid rgba(0, 0, 0, 0.175);
}

.calculator .table-container-header .quantity,
.calculator .table-container-content .quantity {
  width: 10%;
  border-right: 1px solid rgba(0, 0, 0, 0.175);
  white-space: nowrap;
}

#payments-page .calculator .table-container-header .article,
#payments-page .calculator .table-container-content .article {
  width: 80%;
  border-left: 1px solid rgba(0, 0, 0, 0.175);
  border-right: 1px solid rgba(0, 0, 0, 0.175);
}

#payments-page .calculator .table-container-content .table-row:last-of-type {
  border-bottom: 1px solid rgba(0, 0, 0, 0.175);
}

.calculator .table-container-header .price,
.calculator .table-container-content .price {
  width: 20%;
  border-right: 1px solid rgba(0, 0, 0, 0.175);
  white-space: nowrap;
}

.calculator .table-container-header .total,
.calculator .table-container-content .total {
  width: 25%;
  text-align: right;
}
/* Table calculator - end */

/* Table order - start */
.order .table-container-header .article,
.order .table-container-content .article {
  width: 35%;
  border-right: 1px solid rgba(0, 0, 0, 0.175);
}
.order .table-container-header .item-code,
.order .table-container-content .item-code {
  width: 20%;
  border-right: 1px solid rgba(0, 0, 0, 0.175);
  white-space: nowrap;
}
.order .table-container-header .color,
.order .table-container-content .color,
.order .table-container-header .size,
.order .table-container-content .size {
  width: 15%;
  border-right: 1px solid rgba(0, 0, 0, 0.175);
  white-space: nowrap;
}
.order .table-container-header .quantity,
.order .table-container-content .quantity {
  width: 15%;
  white-space: nowrap;
}
/* Table order - end */

/* Table price list - start */
.price-list .table-container-header .article,
.price-list .table-container-content .article {
  width: 45%;
  border-right: 1px solid rgba(0, 0, 0, 0.175);
}
.price-list .table-container-header .quantity,
.price-list .table-container-content .quantity {
  width: 35%;
  border-right: 1px solid rgba(0, 0, 0, 0.175);
  white-space: nowrap;
}
.price-list .table-container-header .price,
.price-list .table-container-content .price {
  width: 20%;
  white-space: nowrap;
}
/* Table price list  - end */

/* Table outgoing invoices - start */

.table-container-status-footer {
  color: #fff;
}

/* Table outgoing invoices - end */

/* Table incoming invoices - start */

.incoming-invoices .table-container-header .invoice-date,
.incoming-invoices .table-container-content .invoice-date {
  width: 10%;
  border-right: 1px solid rgba(0, 0, 0, 0.175);
  white-space: nowrap;
}
.incoming-invoices .table-container-header .invoice,
.incoming-invoices .table-container-content .invoice {
  width: 35%;
  border-right: 1px solid rgba(0, 0, 0, 0.175);
  white-space: nowrap;
}
.incoming-invoices .table-container-header .credit,
.incoming-invoices .table-container-content .credit,
.incoming-invoices .table-container-header .debit,
.incoming-invoices .table-container-content .debit,
.incoming-invoices .table-container-header .saldo,
.incoming-invoices .table-container-content .saldo {
  width: 18.333%;
  border-right: 1px solid rgba(0, 0, 0, 0.175);
  white-space: nowrap;
}
.incoming-invoices .table-container-content .new-deposit .invoice {
  width: 53.3%;
}
.incoming-invoices .table-container-content .new-deposit .credit {
  display: none;
}
.table-container-footer > .total-title,
.table-container-footer > .credit-div,
.table-container-footer > .debit-div,
.table-container-footer > .saldo-div,
.table-container-footer > .delivery-pending-div,
.table-container-footer > .delivery-refunded-div,
.table-container-footer > .delivery-paid-div {
  display: inline-block;
  font-size: 12px;
  line-height: 18px;
  white-space: nowrap;
  padding: 0 5px;
}
.table-container-footer .total-title {
  width: calc(45% - 18px);
  padding: 0 5px;
}
.table-container-footer .credit-div,
.table-container-footer .debit-div,
.table-container-footer .saldo-div,
.table-container-footer .pending-div,
.table-container-footer .refunded-div,
.table-container-footer .paid-div,
.table-container-footer .delivery-pending-div,
.table-container-footer .delivery-refunded-div,
.table-container-footer .delivery-paid-div {
  width: 18.333%;
  border-left: 1px solid rgba(0, 0, 0, 0.175);
  text-align: right;
  padding: 0 2px;
}
/* Table incoming invoices  - end */

/* Table delivery - start */

.delivery-table .table-row {
  position: relative;
  height: 20px; /* Table color valign-middle (top: 50%) - important */
}

.delivery-table .table-row input {
  height: 20px;
}

.delivery-table .table-container-header .delivery-date,
.delivery-table .table-container-content .delivery-date {
  width: 9%;
  border-right: 1px solid rgba(0, 0, 0, 0.175);
  white-space: nowrap;
}
.delivery-table .table-container-header .delivery-recipient,
.delivery-table .table-container-content .delivery-recipient,
.delivery-table .table-container-header .delivery-address,
.delivery-table .table-container-content .delivery-address {
  width: 20%;
  border-right: 1px solid rgba(0, 0, 0, 0.175);
  white-space: nowrap;
}
.delivery-table .table-container-header .delivery-phone,
.delivery-table .table-container-content .delivery-phone {
  width: 15%;
  border-right: 1px solid rgba(0, 0, 0, 0.175);
  white-space: nowrap;
}
.delivery-table .table-container-header .delivery-cod,
.delivery-table .table-container-content .delivery-cod {
  width: 10%;
  border-right: 1px solid rgba(0, 0, 0, 0.175);
  white-space: nowrap;
}
.delivery-table .table-container-header .delivery-note,
.delivery-table .table-container-content .delivery-note {
  width: calc(26% - 54px);
  border-right: 1px solid rgba(0, 0, 0, 0.175);
  white-space: nowrap;
}
.delivery-table input.row-yellow[type="checkbox"],
.delivery-table input.row-green[type="checkbox"],
.delivery-table input.row-red[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  border: none;
  border-radius: 10px;
  outline: none;
  cursor: pointer;
}

/*.delivery-table .table-container-content.yellow-bg {
  background: linear-gradient(to right, rgba(255, 255, 0, 0.5), rgba(255, 255, 0, 0));
}
.delivery-table .table-container-content.green-bg {
  background: linear-gradient(to right, rgba(0, 255, 0, 0.5), rgba(0, 255, 0, 0));
}
.delivery-table .table-container-content.red-bg {
  background: linear-gradient(to right, rgba(255, 0, 0, 0.5), rgba(255, 0, 0, 0));
}*/

.delivery-table .table-container-content .row-yellow,
.delivery-table .table-container-content .row-green,
.delivery-table .table-container-content .row-red {
  width: 14px;
  height: 14px;
  top: 50%;
  position: relative;
  margin: 0 2px;
  transform: translateY(-50%);
  border: 1px solid rgba(0, 0, 0, 0.25) !important;
}
.delivery-table input.row-yellow[readonly="true"] {
  background: none !important;
}
.delivery-table input.row-yellow {
  background: yellow !important;
}
.delivery-table input.row-green[readonly="true"] {
  background: none !important;
}
.delivery-table input.row-green {
  background: #7eff5e !important;
}
.delivery-table input.row-red[readonly="true"] {
  background: none !important;
}
.delivery-table input.row-red {
  background: red !important;
}
/* Table delivery  - end */

/* Table earnings  - start */

.info-body > .earnings-day-and-date {
  width: auto;
  text-transform: capitalize;
  margin-bottom: 5px;
  background: rgba(255, 255, 255, 0.5);
  height: 20px;
  font-size: 12px;
  padding: 0 4px;
  font-weight: 500;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  width: 100%;
}

.info-body > .earnings-day-and-date[contenteditable="false"] {
  cursor: default;
}

.info-body > .earnings-day-and-date[contenteditable="true"] {
  cursor: text;
}

.earnings .table-container-header .article,
.earnings .table-container-content .article {
  width: 70%;
  border-right: 1px solid rgba(0, 0, 0, 0.175);
}
.earnings .table-container-header .price,
.earnings .table-container-content .price {
  width: 30%;
  white-space: nowrap;
}

.table-container-footer-heading {
  background: rgba(0, 0, 0, 0.05);
  border-bottom: 1px solid rgba(0, 0, 0, 0.175);
}

.table-container-footer-heading .cash-header,
.table-container-footer-heading .delivery-header,
.table-container-footer-heading .total-header {
  display: inline-block;
  color: rgba(0, 0, 0, 0.5);
  font-size: 11px;
  font-weight: 500;
  padding: 0 4px;
}

.table-container-footer-heading .cash-header,
.table-container-footer-heading .delivery-header {
  width: 35%;
  border-right: 1px solid rgba(0, 0, 0, 0.175);
}

.table-container-footer-heading .total-header {
  width: calc(30% - 18px);
}

.table-container-footer.earnings {
  background: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.175);
}

.table-container-footer.earnings div.cash-div,
.table-container-footer.earnings div.delivery-div,
.table-container-footer.earnings div.total-full-price {
  display: inline-block;
  font-size: 12px;
  font-weight: 500;
  line-height: 19px;
  white-space: nowrap;
}

.table-container-footer.earnings div.cash-div,
.table-container-footer.earnings div.delivery-div {
  width: 35%;
  border-right: 1px solid rgba(0, 0, 0, 0.175);
}

.table-container-footer.earnings div.total-full-price {
  width: 30%;
  text-align: right;
  padding-right: 2px;
  border-left: none;
}

.table-container-footer.earnings input.cash,
.table-container-footer.earnings input.delivery {
  margin-left: 5px;
  background: none;
  font-size: 12px;
  padding: 0px;
  font-weight: 500;
  border: none;
}

.table-container-footer.earnings input.cash,
.table-container-footer.earnings input.delivery {
  max-width: 100%;
}
.table-container-footer.earnings .cash::placeholder,
.table-container-footer.earnings .delivery::placeholder {
  color: rgba(0, 0, 0, 0.25);
}

/* Table earnings  - end */

/* Table earnings - Lists  - start */

.delivery-list,
.general-list,
.goods-list,
.price-list-list,
.invoicing-list,
.payments-list,
.invoices-list,
.earnings-list,
.offers-list,
.clients-list {
  top: 51px;
  height: calc(100vh - 51px);
  box-shadow: -3px 10px 15px rgba(0, 0, 0, 0.175);
  border-left: 1px solid rgba(0, 0, 0, 0.125);
  border-top: 1px solid rgba(0, 0, 0, 0.125);
  background: #f2f2f2;
  overflow-y: scroll;
  padding-bottom: 3rem !important;
}

#price-list-page #saldo-price-list,
#goods-page #saldo-goods {
  display: inline;
}

.table-container-list-heading {
  display: flex;
}

.table-container-list-heading,
.table-container-list-total {
  background: rgba(0, 0, 0, 0.05);
  border-bottom: 1px solid rgba(0, 0, 0, 0.175);
  white-space: nowrap;
}

.table-container-list-heading .article-header,
.table-container-list-heading .date-header,
.table-container-list-heading .cash-header,
.table-container-list-heading .delivery-header,
.table-container-list-heading .order-header,
.table-container-list-heading .total-header,
.table-container-list-heading .fullname-header,
.table-container-list-heading .quote-header,
.table-container-list-heading .company-header,
.table-container-list-heading .credit-header,
.table-container-list-heading .debit-header,
.table-container-list-heading .saldo-header,
.table-container-list-heading .pending-header,
.table-container-list-heading .refunded-header,
.table-container-list-heading .paid-header {
  display: inline-block;
  color: rgba(0, 0, 0, 0.5);
  font-size: 11px;
  font-weight: 500;
  padding: 0 4px;
}

#landing-page #goods-list .table-container-list-heading .article-header,
#landing-page #goods-list .table-container-list-heading .order-header,
#landing-page #goods-list .table-container-list .article-div,
#landing-page #goods-list .table-container-list .order-div {
  border-right: 1px solid rgba(0, 0, 0, 0.175);
}
#landing-page #goods-list .table-container-list-heading .order-header,
#landing-page #goods-list .table-container-list .order-div {
  width: 30%;
}
#landing-page #goods-list .table-container-list-heading .article-header,
#landing-page #goods-list .table-container-list .article-div {
  width: 50%;
}
.table-container-list-heading .date-header {
  width: 20%;
  border-right: 1px solid rgba(0, 0, 0, 0.175);
}
.table-container-list-heading .company-header {
  width: 40%;
  border-right: 1px solid rgba(0, 0, 0, 0.175);
}
.table-container-list-heading .quote-header {
  width: 70%;
  border-right: 1px solid rgba(0, 0, 0, 0.175);
}
.table-container-list-heading .fullname-header {
  width: 100%;
}
#landing-page .table-container-list-heading .company-header {
  width: 20%;
}

.table-container-list-heading .cash-header,
.table-container-list-heading .delivery-header,
.table-container-list-heading .credit-header,
.table-container-list-heading .debit-header,
.table-container-list-heading .pending-header,
.table-container-list-heading .refunded-header,
.table-container-list-heading .paid-header {
  border-right: 1px solid rgba(0, 0, 0, 0.175);
}

.table-container-list,
.table-container-list-total {
  display: flex; /* Postavljamo prikaz u red */
  border-bottom: 1px solid rgba(0, 0, 0, 0.175);
}

.table-container-list:nth-child(2n + 0) {
  background: rgba(0, 0, 0, 0.025);
}

.table-container-list .article-div,
.table-container-list-total .date-div,
.table-container-list-total .cash-div,
.table-container-list-total .delivery-div,
.table-container-list-total .total-full-price,
.table-container-list-total .fullname-div,
.table-container-list-total .quote-div,
.table-container-list-total .company-div,
.table-container-list-total .credit-div,
.table-container-list-total .debit-div,
.table-container-list-total .saldo-div,
.table-container-list-total .pending-div,
.table-container-list-total .refunded-div,
.table-container-list-total .paid-div,
.table-container-list-total .delivery-pending-div,
.table-container-list-total .delivery-refunded-div,
.table-container-list-total .delivery-paid-div,
.table-container-list > div {
  display: inline-block;
  font-size: 12px;
  line-height: 19px;
  padding: 0 2.5px;
  white-space: nowrap;
}

.table-container-list-total .date-div,
.table-container-list-total .cash-div,
.table-container-list-total .delivery-div,
.table-container-list-total .total-full-price,
.table-container-list-total .fullname-div,
.table-container-list-total .quote-div,
.table-container-list-total .company-div,
.table-container-list-total .credit-div,
.table-container-list-total .debit-div,
.table-container-list-total .saldo-div,
.table-container-list-total .pending-div,
.table-container-list-total .refunded-div,
.table-container-list-total .paid-div,
.table-container-list-total .delivery-pending-div,
.table-container-list-total .delivery-refunded-div,
.table-container-list-total .delivery-paid-div {
  font-weight: 600;
  background: rgba(0, 0, 0, 0.05);
}
.table-container-list > div {
  font-weight: 500;
}

#goods-list .table-container-list .article-div {
  width: 53.34%;
  border-right: 1px solid rgba(0, 0, 0, 0.175);
  overflow: hidden;
}

.table-container-list-total div.company-div,
.table-container-list div.company-div {
  width: 40%;
  border-right: 1px solid rgba(0, 0, 0, 0.175);
  overflow: hidden;
}

#invoicing-page .table-container-list-heading div.saldo-header,
#invoicing-page .table-container-list div.saldo-div,
#payments-page .table-container-list-heading div.saldo-header,
#payments-page .table-container-list div.saldo-div {
  width: 30%;
  text-align: right;
}

.table-container-list-total div.quote-div,
.table-container-list div.quote-div {
  width: 70%;
  border-right: 1px solid rgba(0, 0, 0, 0.175);
  overflow: hidden;
}

.table-container-list-total div.fullname-div,
.table-container-list div.fullname-div {
  width: 100%;
  overflow: hidden;
}

#landing-page .table-container-list-total div.company-div,
#landing-page .table-container-list div.company-div {
  width: 20%;
}

.table-container-list-total div.date-div,
.table-container-list div.date-div {
  width: 20%;
  border-right: 1px solid rgba(0, 0, 0, 0.175);
  overflow: hidden;
}

#goods-list .table-container-list div.date-div {
  border-right: 0;
}

.table-container-list div.credit-div,
.table-container-list div.debit-div,
.table-container-list div.saldo-div,
.table-container-list div.pending-div,
.table-container-list div.refunded-div,
.table-container-list div.paid-div,
.table-container-list div.delivery-pending-div,
.table-container-list div.delivery-refunded-div,
.table-container-list div.delivery-paid-div,
.table-container-list-total div.credit-div,
.table-container-list-total div.debit-div,
.table-container-list-total div.saldo-div,
.table-container-list-total div.pending-div,
.table-container-list-total div.refunded-div,
.table-container-list-total div.paid-div,
.table-container-list-total div.delivery-pending-div,
.table-container-list-total div.delivery-refunded-div,
.table-container-list-total div.delivery-paid-div,
.table-container-list-heading .total-header,
.table-container-list-heading .credit-header,
.table-container-list-heading .debit-header,
.table-container-list-heading .saldo-header,
.table-container-list-heading .pending-header,
.table-container-list-heading .refunded-header,
.table-container-list-heading .paid-header {
  width: 20%;
}

#clients-page .table-container-list div.saldo-div,
#clients-page .table-container-list-total div.saldo-div,
#offers-page .table-container-list div.saldo-div,
#offers-page .table-container-list-total div.saldo-div {
  width: 30%;
}

#landing-page .table-container-list div.credit-div,
#landing-page .table-container-list div.debit-div,
#landing-page .table-container-list div.saldo-div,
#landing-page .table-container-list div.pending-div,
#landing-page .table-container-list div.refunded-div,
#landing-page .table-container-list div.paid-div,
#landing-page .table-container-list div.delivery-div,
#landing-page .table-container-list-total div.credit-div,
#landing-page .table-container-list-total div.debit-div,
#landing-page .table-container-list-total div.saldo-div,
#landing-page .table-container-list-total div.pending-div,
#landing-page .table-container-list-total div.refunded-div,
#landing-page .table-container-list-total div.paid-div,
#landing-page .table-container-list-heading .total-header,
#landing-page .table-container-list-heading .credit-header,
#landing-page .table-container-list-heading .debit-header,
#landing-page .table-container-list-heading .saldo-header,
#landing-page .table-container-list-heading .pending-header,
#landing-page .table-container-list-heading .refunded-header,
#landing-page .table-container-list-heading .paid-header,
#landing-page .table-container-list-heading .delivery-header {
  width: 26.66%;
}

.table-container-list-heading .cash-header,
.table-container-list div.cash-div,
.table-container-list-total div.cash-div,
.table-container-list-heading .delivery-header,
.table-container-list div.delivery-div,
.table-container-list-total div.delivery-div,
.table-container-list div.total-full-price,
.table-container-list-total div.total-full-price {
  width: 26.66%;
}

#landing-page .table-container-list-heading .total-header,
#landing-page .table-container-list div.total-full-price,
#landing-page .table-container-list-total div.total-full-price {
  width: 30%;
}

#landing-page .table-container-list-heading .cash-header,
#landing-page .table-container-list div.cash-div,
#landing-page .table-container-list-total div.cash-div,
#landing-page .table-container-list-heading .delivery-header,
#landing-page .table-container-list div.delivery-div,
#landing-page .table-container-list-total div.delivery-div {
  width: 70%;
}

.table-container-list-total div.cash-div,
.table-container-list-total div.delivery-div,
.table-container-list-total div.total-full-price,
.table-container-list-total div.credit-div,
.table-container-list-total div.debit-div,
.table-container-list-total div.saldo-div,
.table-container-list-total div.pending-div,
.table-container-list-total div.refunded-div,
.table-container-list-total div.paid-div,
.table-container-list-total div.delivery-pending-div,
.table-container-list-total div.delivery-refunded-div,
.table-container-list-total div.delivery-paid-div {
  text-align: right;
}

.table-container-list div.cash-div,
.table-container-list div.delivery-div,
.table-container-list div.credit-div,
.table-container-list div.debit-div,
.table-container-list div.pending-div,
.table-container-list div.refunded-div,
.table-container-list div.delivery-pending-div,
.table-container-list div.delivery-refunded-div,
.table-container-list-total div.cash-div,
.table-container-list-total div.delivery-div,
.table-container-list-total div.credit-div,
.table-container-list-total div.debit-div,
.table-container-list-total div.pending-div,
.table-container-list-total div.refunded-div,
.table-container-list-total div.delivery-pending-div,
.table-container-list-total div.delivery-refunded-div {
  border-right: 1px solid rgba(0, 0, 0, 0.175);
  overflow: hidden;
}

.table-container-list div.total-full-price,
.table-container-list div.saldo-div,
.table-container-list div.delivery-paid-div,
.table-container-list-total div.total-full-price,
.table-container-list-total div.saldo-div,
.table-container-list-total div.delivery-paid-div {
  text-align: right;
  padding-right: 2px;
  border-left: none;
}

#incoming-invoices-page #invoices-list .table-container-list:hover,
#outgoing-invoices-page #invoices-list .table-container-list:hover,
#general-page #general-list .table-container-list:hover,
#goods-page #goods-list .table-container-list:hover,
#price-list-page #price-list-list .table-container-list:hover,
#invoicing-page #invoicing-list .table-container-list:hover,
#payments-page #payments-list .table-container-list:hover,
#earnings-page #earnings-list .table-container-list:hover,
#delivery-page #delivery-list .table-container-list:hover {
  cursor: pointer;
  background: rgba(0, 0, 0, 0.05);
}

/* Table earnings - Lists - end */

.statistics-title {
  font-size: 1rem;
  margin-bottom: 0;
}

.statistics-lightbox {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw;
  height: 100vh;
  background-color: #f2f2f2;
  z-index: 1050;
  overflow-y: auto;
  padding: 3rem;
  margin-top: 0px !important;
  border-radius: 0;
}

#landing-page .statistics-lightbox {
  position: fixed !important;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #f2f2f2;
  z-index: 1050;
  overflow-y: auto;
  padding: 3rem;
  margin-top: 0px !important;
  border-radius: 0;
}

/* TABLE END */

/* NOTE START */
.card-note-container .note {
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  min-height: 100px;
  padding: 5px 10px;
  font-size: 13px;
  font-weight: 500;
}

.card-note-container .note img {
  max-width: 100%;
}

.card-note-container .note ul {
  padding-left: 15px;
  margin: 2px 0;
}

.card-note-container .note ul li {
  line-height: normal;
}

.card-note-container .note:empty:after {
  color: rgba(0, 0, 0, 0.25);
  content: attr(placeholder);
}

/* NOTE END */

/* NOTE IMAGES START */

.card-body .images {
  display: flex;
  flex-wrap: wrap;
}

.card-body .images img {
  max-width: 100%;
}

.card-body .images .image-wrapper {
  width: calc(33.333% - 7px);
  margin: 0 10px 10px 0;
  position: relative;
}

.card-body .images .image-wrapper img[data-original="true"] {
  display: none;
}

.card-body .images .image-wrapper:nth-child(3n + 3) {
  margin: 0 0 10px 0;
}

.card-body .images .image-wrapper:last-of-type {
  margin: 0 0 10px 0;
}

.card-body .images .image-wrapper span i {
  position: absolute;
  right: 7px;
  top: 5px;
  font-size: 10px;
  color: #fefefe;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
}

.card-body .images .image-wrapper span i:hover {
  cursor: pointer;
  opacity: 0.5;
}

.card-body .images .image-wrapper img {
  border-radius: 12px;
  width: 100%;
  height: 100px;
  transition: all 0.3s;
}

.card-body .images .image-wrapper a img:hover {
  opacity: 0.7;
  transition: all 0.3s;
}

.card-body .images .image-wrapper a:hover {
  text-decoration: none;
}

/* NOTE IMAGES END */

/* NOTE - TEXT STYLE START */
.text-style {
  padding: 0 1.25rem;
  margin-top: -15px;
  margin-bottom: 10px;
}
.text-style button {
  font-size: 10px;
  height: 14px;
  line-height: 14px;
  padding: 0 4px;
  border: none;
  margin-right: 4px;
  background: rgba(255, 255, 255, 0.5);
  opacity: 0.5;
  transition: all 0.3s;
}
.text-style .bold {
  font-weight: bold;
}
.text-style .italic {
  font-style: italic;
}
.text-style .underline {
  text-decoration: underline;
}
.text-style .yellow,
.text-style .green,
.text-style .cyan,
.text-style .orange,
.text-style .red {
  width: 14px;
  color: transparent;
  opacity: 0.3;
  transition: all 0.3s;
}
.text-style button:hover,
.text-style .yellow:hover,
.text-style .green:hover,
.text-style .cyan:hover,
.text-style .orange:hover,
.text-style .red:hover {
  opacity: 1;
  transition: all 0.3s;
}
.text-style .yellow {
  background: yellow;
}
.text-style .green {
  background: #00ff00;
}
.text-style .cyan {
  background: cyan;
}
.text-style .orange {
  background: orange;
}
.text-style .red {
  background: red;
}
/* NOTE - TEXT STYLE END */

/* DATE START */
.card-note-container .date {
  position: absolute;
  bottom: 2px;
  font-size: 10px;
  font-weight: 600;
  width: calc(100% - 55px);
  right: 18px;
  text-align: right;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: rgba(0, 0, 0, 0.25);
}
.card-note-container .date:hover {
  cursor: pointer;
}
.card-note-container .date:active {
  overflow: visible;
  z-index: 9999;
  background: #f2f2f2; /* Poništava gradijent pozadinu */
  -webkit-background-clip: unset;
  color: #b5b5b5;
  width: auto;
  border-radius: 6px;
  cursor: pointer;
}
/* DATE END */

/* CLIENTS START */

#clients-page .list-group-item > div > div > div {
  overflow-x: auto; /* Omogućava horizontalno pomeranje sadržaja */
  white-space: nowrap; /* Sprečava prelom teksta u novi red */
}

#clients-page .list-group-item > div > div > div::-webkit-scrollbar {
  display: none; /* Sakriva scrollbar u WebKit/Blink preglednicima (Chrome, Safari, Edge) */
}

#clients-page .list-group-item > div > div > div {
  scrollbar-width: none; /* Sakriva scrollbar u Firefox-u */
  -ms-overflow-style: none; /* Sakriva scrollbar u Internet Explorer-u */
}

#clients-page ul.list-group li:nth-child(2n + 1) {
  background: rgba(0, 0, 0, 0.025);
}

#clients-page ul.list-group li {
  transition: all 0.3s;
}

#clients-page ul.list-group li:hover {
  background: rgba(0, 0, 0, 0.05);
  transition: all 0.3s;
}

#clients-page ul.list-group li > div > div .company-name,
#clients-page ul.list-group li > div > div .company-address,
#clients-page ul.list-group li > div > div .company-phone,
#clients-page ul.list-group li > div > div .company-email,
#clients-page ul.list-group li > div > div .company-tin,
#clients-page ul.list-group li > div > div .company-crn,
#clients-page ul.list-group li > div > div .company-current-account {
  cursor: pointer;
}

#clients-page ul.list-group,
#company-popup #file-list li {
  font-size: smaller;
}

#company-popup li:hover {
  cursor: pointer;
}

#company-popup .container-fluid > div > div {
  white-space: nowrap;
  overflow-x: hidden;
}

#clients-page .table-container-list-heading div.date-header,
#clients-page .table-container-list div.date-div {
  width: 20%;
}

#clients-page .table-container-list-heading div.quote-header,
#clients-page .table-container-list div.quote-div {
  width: 50%;
}

#clients-page .table-container-list-heading div.saldo-header,
#clients-page .table-container-list div.saldo-div {
  width: 30%;
}

#clients-page .dropdown-menu {
  background: #acacac;
  padding: 2px 0;
  font-size: 9px;
  text-transform: uppercase;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border: none;
  margin-top: 6px !important;
}

#clients-page .dropdown-menu li a {
  position: relative;
  cursor: pointer;
  padding: 2px 4px;
  font-weight: 600;
  color: #fff !important;
}

#clients-page .dropdown-menu li a:active {
  background-color: transparent !important;
}

#clients-page .dropdown-menu li a:hover {
  transition: all 0.3s;
  color: #333 !important;
  opacity: 0.7;
}

/* CLIENTS END */

/* MOVE CARD START */
.moveCardDiv {
  /*position: relative;*/
  display: inline-block;
}
.moveList {
  position: relative;
  list-style-type: none;
  margin: 0;
  padding: 0;
  font-size: 9px;
  text-transform: uppercase;
  font-weight: 600;
  width: 100%;
  color: #fff;
  display: none;
}
.moveList.active {
  display: inline-block;
}
.moveList li:first-child,
.moveList li:first-child:hover {
  color: #fff;
  cursor: default;
}
.moveList li {
  cursor: pointer;
  padding: 0 4px;
  display: inline-block;
  margin: 5px 5px 0 0;
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.25);
}
.moveList li:hover {
  transition: all 0.3s;
  color: #333;
}

#payments-page .moveCard,
#invoicing-page .moveCard {
  display: none !important;
}

/* MOVE CARD END */

/* LOGIN START */

.login-logo {
  width: 65%;
  margin-bottom: 30px;
}

.login-btn {
  left: 50%;
  position: relative;
  transform: translateX(-50%);
}

.centered-logo {
  text-align: center;
}

.centered-card {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh; /* Adjust if you don't want the card to take full height */
}

/* LOGIN END */

/* ARCHIVE CARDS START */

.archiveCardsDiv {
  position: static;
}
.archiveAllCards {
  height: 19px;
  line-height: 19px;
  font-size: 12px;
  padding: 0 6px;
  color: #888;
  background: rgba(0, 0, 0, 0.1);
}
.archiveListCards {
  position: absolute;
  list-style-type: none;
  padding: 16px 0 2px 0;
  font-size: 9px;
  text-transform: uppercase;
  font-weight: 600;
  color: #fff;
}
.archiveListCards li:first-child {
  padding-top: 4px;
}
.archiveListCards li:last-child {
  padding-bottom: 4px;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
}
.archiveListCards li {
  position: relative;
  cursor: pointer;
  padding: 2px 4px;
  background: #acacac;
}
.archiveListCards li:hover {
  transition: all 0.3s;
  color: #333;
  opacity: 0.7;
}

.archiveListCards {
  display: none;
  opacity: 0;
}

.archiveAllCards:hover + .archiveListCards,
.archiveListCards:hover {
  display: block;
  opacity: 1;
  animation: fadeIn 0.3s ease forwards; /* Dodajemo animaciju fadeIn kada je u fokusu */
}

.archive-container {
  font-size: smaller;
}
.archive-container-header {
  color: rgba(0, 0, 0, 0.5);
  font-weight: 500;
  padding: 4px 10px;
}

.archive-container-list {
  display: flex;
  border-bottom: 1px solid rgba(0, 0, 0, 0.175);
  font-weight: 500;
}

.archive-container > div:nth-child(2n + 1) {
  background: rgba(0, 0, 0, 0.025);
}

.archive-container > div {
  padding-left: 0.5rem;
}

.archive-container-list:last-child {
  border: none;
}

.archive-container-list:hover {
  background: rgba(0, 0, 0, 0.05);
}

.archive-container-list .card-list:hover {
  cursor: pointer;
}

.archive-container-list .date {
  color: rgba(0, 0, 0, 0.5);
  font-size: smaller;
}

.archive-container-list .date i {
  color: rgba(0, 0, 0, 0.25);
}

/* ARCHIVE CARDS END */

/* Printable - Empty inputs - Start */

.opacity-0 {
  opacity: 0 !important;
}

/* Printable - Empty inputs - End */

/* LANDING START */
.landing {
  position: relative;
}
.landing .title {
  font-size: 18px;
  text-transform: uppercase;
  font-weight: bold;
  border-bottom: 2px solid #343a40;
  color: #343a40;
  padding-bottom: 5px;
  margin-bottom: 20px;
}
.landing .title span a {
  color: #343a40;
}
.landing .title span {
  padding-bottom: 3px;
  border-bottom: 3px solid #343a40;
}
.landing .title i {
  position: absolute;
  right: 26px;
  font-size: 26px;
  top: 14px;
  color: rgba(0, 0, 0, 0.25);
}
.landing .number {
  font-weight: bold;
}
.landing ul.open-cards {
  padding: 0px;
}
.landing ul.open-cards a,
.landing ul.open-cards a:hover {
  color: #343a40;
  text-decoration: none;
}
.landing ul.open-cards li,
.landing ul.open-cards a li {
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  margin: 0;
  padding: 0;
  list-style-type: none;
  transition: all 0.2s;
  font-weight: 500;
}
.landing ul.open-cards li:nth-child(2n + 0),
.landing ul.open-cards a:nth-child(2n + 0) li {
  background: rgba(0, 0, 0, 0.025);
  transition: all 0.2s;
}
.landing ul.open-cards a:hover li {
  background: rgba(0, 0, 0, 0.05);
  transition: all 0.2s;
}
.landing .total-earningsTotal,
.landing .total-invoices,
.landing .total-bills,
.landing .total-goods,
.landing #total-delivery {
  color: #fff;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}
/* LANDING END */

/* RESPONSIVE START */
@media (min-width: 768px) {
  .logo-mobile,
  .search-mobile {
    display: none;
  }
  .sidebar {
    min-height: 100vh;
  }
  #navbarNav {
    height: auto;
    overflow: visible;
  }
}

@media (max-width: 768px) {
  .refreshPage,
  .archivePage,
  .archiveAllCards,
  .logo,
  .search,
  .filter,
  #notification-content {
    display: none!important;
  }
  button.search {
    z-index: 9999;
  }
  .search-show-hide {
    display: none; /* Početno skrivanje polja za pretragu na manjim ekranima */
  }
  .search-visible {
    display: inline-block !important;
    position: absolute;
    left: 15px;
    z-index: 999;
    background: #ececec !important;
    height: 35px !important;
    width: calc(100% - 70px) !important;
  }
  .logo-mobile {
    width: 50%;
  }
  button.navbar-toggler {
    color: #fff;
    position: absolute;
    top: 0;
    right: 0;
    font-size: 32px;
    z-index: 9999;
  }
  .sidebar nav {
    margin-top: 0px;
  }
  .sidebar nav ul li.cardList:first-child {
    margin-top: 1.5rem;
  }
  #navigation {
    height: 0;
    overflow: hidden;
    transition: height 0.3s ease-out;
  }
  #navigation.show {
    height: auto; /* Automatska visina sadržaja */
  }
  .client-company-info .input-group,
  .info-body .input-group,
  .info-body > input {
    flex: 100% !important
  }
  #general-page .info-body > input.company,
  #offers-page .info-body > input.company,
  #outgoing-invoices-page .info-body > input.company,
  #incoming-invoices-page .info-body > input.company {
    flex: 0 0 calc(100% - 27.5px);
  }
  .invoicing-list,
  .payments-list {
    height: auto;
    padding-bottom: 1rem !important;
  }
  #invoicing-page .sticky-top.invoicing-list,
  #payments-page .sticky-top.payments-list {
    position: static !important;
  }
  .table-container-content {
    font-size: 14px;
  }
  .table-container-footer > div, .table-container-footer > div > span, .table-container-footer > div > input {
    font-size: 16px !important;
  }
  .table-container-footer, .table-container-footer div.discount-div, .table-container-footer div.vat-div, .table-container-footer div.total-full-price, .table-container-footer.last-child {
    line-height: 25px !important;
  }
  #payments-page .client-company-info span, #payments-page .info-body span, #payments-page .client-company-info input, #payments-page .info-body input, #invoicing-page .client-company-info span, #invoicing-page .info-body span, #invoicing-page .client-company-info input, #invoicing-page .info-body input, .modal .client-company-info span, .modal .info-body span, .modal .client-company-info input, .modal .info-body input, .table-container-footer, .table-container-footer.last-child {
    height: 25px !important;
  }
  #payments-page .calculator .table-container-header .article,
  #payments-page .calculator .table-container-content .article,
  #payments-page .table-container-footer div.total-full-price-text {
    width: 70% !important;
  }
  #payments-page .calculator .table-container-header .price,
  #payments-page .calculator .table-container-content .price,
  #payments-page .table-container-footer div.total-full-price,
  #payments-page .table-container-footer-all div.total-full-price-all {
    width: 30% !important;
  }
  .card-info-and-table-container > .invoice-details > div > .value-group > .value-text,
  .card-info-and-table-container > .invoice-details > div > .transaction-group > .transaction-text {
    padding-top: 3px !important;
    padding-bottom: 3px !important;
  }
  .card-info-and-table-container > .invoice-details > div > .value-group > .value-text,
  .card-info-and-table-container > .invoice-details > div > .value-group > .value,
  .card-info-and-table-container > .invoice-details > div > .transaction-group > .transaction-text,
  .card-info-and-table-container > .invoice-details > div > .transaction-group > .transaction {
    text-wrap-mode: wrap;
    line-height: normal;
  }
}
/* RESPONSIVE END */

/* ADMIN START */

ul#sortable-list {
  padding-left: 0px;
  margin-bottom: 0px;
  list-style: none;
}

ul#sortable-list li {
  padding: 5px;
}

ul#sortable-list li:nth-child(2n + 0) {
  background: rgba(0, 0, 0, 0.05);
}

#navigationOptions ul#sortable-list li a i {
  width: 25px;
  text-align: center;
}

ul#sortable-list select {
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
}

#admin-page .navbar {
  padding: 0.5rem 1rem 0;
}

#admin-page .nav-item a.nav-link {
  color: #888;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 13px;
}

#admin-page .nav-item a.nav-link.active {
  background-color: rgba(0, 0, 0, 0.1);
  border-top-left-radius: 0.25rem !important;
  border-top-right-radius: 0.25rem !important;
}

#admin-page .nav-item a.nav-link.active,
#admin-page .nav-item a.nav-link:hover {
  color: #212529 !important;
}

#admin-page .nav-tabs,
#admin-page .nav-tabs .nav-link {
  border: none;
}

#admin-page .nav-tabs .nav-item {
  margin: 0;
}

#admin-page .nav-tabs .nav-item:after {
  content: "";
  width: 1px;
  height: 15px;
  position: absolute;
  background: rgba(0, 0, 0, 0.1);
  top: 41%;
}

#admin-page .nav-tabs .nav-item:first-child:after {
  content: "";
  width: 0px;
  height: 0px;
  position: relative;
}

#admin-page .footer {
  position: sticky;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: rgba(249, 249, 249, 0.5);
  padding: 1rem 0;
  text-align: center; /* centriranje sadržaja */
}

#admin-page .footer .btn:hover,
#admin-page .footer .btn:focus,
#admin-page .footer .btn:active {
  opacity: 1;
}

#admin-page .table .thead-light {
  white-space: nowrap;
}

/* ADMIN END */

/*.client-company-info {
  display: flex;
  flex-wrap: wrap;
  gap: 0px;
}

.client-company-info > input {
  width: calc(50% - 2.5px);
  margin-bottom: 5px;
  background: rgba(255, 255, 255, 0.5);
  height: 20px;
  font-size: 12px;
  padding: 0 4px;
  font-weight: 500;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 5px;
}*/

.client-company-info .input-group,
.info-body .input-group {
  flex: 0 0 calc(50% - 2.5px);
}

#payments-page .client-company-info span,
#payments-page .info-body span,
#payments-page .client-company-info input,
#payments-page .info-body input,
#invoicing-page .client-company-info span,
#invoicing-page .info-body span,
#invoicing-page .client-company-info input,
#invoicing-page .info-body input,
.modal .client-company-info span,
.modal .info-body span,
.modal .client-company-info input,
.modal .info-body input {
  margin-bottom: 6px; /* Razmak između redova */
  background: rgba(255, 255, 255, 0.5);
  height: 20px;
  font-size: 12px;
  padding: 0 4px;
  font-weight: 500;
  /*border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 5px;*/
}

#invoicing-page .client-company-info span,
#invoicing-page .info-body span,
#payments-page .client-company-info span,
#payments-page .info-body span,
.modal .client-company-info span,
.modal .info-body span {
  width: 25%;
  text-align: right;
}

.client-company-info input,
.info-body input {
  width: 100%;
}

.client-company-info input::placeholder,
.info-body input::placeholder {
  color: rgba(0, 0, 0, 0.25);
}

.client-company-info:hover,
.client-company-info > input:hover {
  cursor: default;
}

.client-company-info > input:nth-child(2n + 0) {
  margin-left: 5px;
}

/* Stilovi za sve inpute */
.card-info-and-table-container .date-of-request-submission,
.card-info-and-table-container .selected-operator,
.card-info-and-table-container .selected-status-request,
.card-info-and-table-container .request-sent-by {
  font-size: 12px;
  font-weight: 500;
}

.card-info-and-table-container .date-for-status {
  font-size: smaller;
}

.send-card {
  font-size: 14px;
  background: rgba(255, 255, 255, 0.5);
}
.send-card:hover {
  color: #fff;
}

.saveCard.sent .send-card:hover {
  cursor: default;
  background: rgba(255, 255, 255, 0.5);
}

.company-sending-heading,
.company-to-be-invoiced-heading,
.type-of-services-or-goods,
.next-company-for-payment {
  font-size: 14px;
  font-weight: 600;
}

.table-container-list-heading .sending-time-header,
.table-container-list-heading .request-type-header,
.table-container-list-heading .company-sending-header,
.table-container-list-heading .operator-header,
.table-container-list-heading .status-header,
.table-container-list-heading .date-for-status-header,
.table-container-list-heading .poslato-header,
.table-container-list-heading .payment-deadline-header {
  display: inline-block;
  color: rgba(0, 0, 0, 0.5);
  font-size: 11px;
  font-weight: 500;
  padding: 0 4px;
  overflow: hidden;
}

.table-container-list-heading .company-sending-header,
.table-container-list-heading .status-header,
.table-container-list-heading .date-for-status-header {
  width: 20%;
  border-right: 1px solid rgba(0, 0, 0, 0.175);
}

.table-container-list-heading .poslato-header {
  width: 5%;
  border-right: 1px solid rgba(0, 0, 0, 0.175);
}

.table-container-list-heading .operator-header {
  width: 13%;
  border-right: 1px solid rgba(0, 0, 0, 0.175);
}

.table-container-list-heading .request-type-header {
  width: 40%;
  border-right: 1px solid rgba(0, 0, 0, 0.175);
}

.table-container-list-heading .payment-deadline-header {
  width: 15%;
  border-right: 1px solid rgba(0, 0, 0, 0.175);
}

#payments-page .table-container-list-heading .company-sending-header {
  width: 30%;
  border-right: 1px solid rgba(0, 0, 0, 0.175);
}

#payments-page .table-container-list-heading .request-type-header {
  width: 20%;
  border-right: 1px solid rgba(0, 0, 0, 0.175);
}

.table-container-list-heading .sending-time-header {
  width: 27%;
  border-right: 1px solid rgba(0, 0, 0, 0.175);
  overflow: hidden;
}

.table-container-list-total .sending-time-div,
.table-container-list-total .request-type-div,
.table-container-list-total .company-sending-div,
.table-container-list-total .operator-div,
.table-container-list-total .status-div,
.table-container-list-total .date-for-status-div,
.table-container-list-total .poslato-div,
.table-container-list-total .payment-deadline-div,
.table-container-list > div {
  display: inline-block;
  font-size: 12px;
  line-height: 19px;
  padding: 0 2.5px;
  white-space: nowrap;
}

.table-container-list-total .sending-time-div,
.table-container-list-total .request-type-div,
.table-container-list-total .company-sending-div,
.table-container-list-total .operator-div,
.table-container-list-total .status-div,
.table-container-list-total .date-for-status-div,
.table-container-list-total .poslato-div,
.table-container-list-total .payment-deadline-div {
  font-weight: 600;
  background: rgba(0, 0, 0, 0.05);
}

.table-container-list-total div.sending-time-div,
.table-container-list-total div.request-type-div,
.table-container-list-total div.company-sending-div,
.table-container-list-total div.operator-div,
.table-container-list-total div.status-div,
.table-container-list-total div.date-for-status-div,
.table-container-list-total div.poslato-div,
.table-container-list-total div.payment-deadline-div,
.table-container-list div.sending-time-div,
.table-container-list div.request-type-div,
.table-container-list div.company-sending-div,
.table-container-list div.operator-div,
.table-container-list div.payment-deadline-div,
.table-container-list div.status-div,
.table-container-list div.date-for-status-div,
.table-container-list div.poslato-div {
  border-right: 1px solid rgba(0, 0, 0, 0.175);
  overflow: hidden;
}

.table-container-list-total div.payment-deadline-div,
.table-container-list div.payment-deadline-div {
  width: 15%;
}

.table-container-list-total div.sending-time-div,
.table-container-list div.sending-time-div,
.table-container-list-total div.sending-time-div,
.table-container-list div.sending-time-div {
  width: 27%;
}

.table-container-list-total div.company-sending-div,
.table-container-list div.company-sending-div,
.table-container-list div.status-div,
.table-container-list div.date-for-status-div,
#payments-page .table-container-list div.request-type-div {
  width: 20%;
}

.table-container-list div.poslato-div {
  width: 5%;
}

.table-container-list div.operator-div,
.table-container-list-total div.operator-div {
  width: 13%;
}

.table-container-list-total div.request-type-div,
.table-container-list div.request-type-div {
  width: 40%;
}

#payments-page .table-container-list div.company-sending-div {
  width: 30%;
}

.table-container-list:hover {
  cursor: pointer;
  background: rgba(0, 0, 0, 0.05);
}
span.selected-operator,
span.selected-status-request {
  font-weight: bold !important;
}

.no-hover-landing {
  color: #fff;
}

.addTableDiv {
  font-size: x-small;
}

.payment-table {
  background: rgba(0, 0, 0, 0.025);
  padding: 10px;
  border-radius: 7px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  margin-bottom: 15px;
}

#payments-page .table-container-footer,
#payments-page .table-container-footer-all {
  background: rgba(0,0,0,0.05);
  border: none;
  margin-bottom: 0px;
  display: flex; /* Postavljanje elemenata u red */
  align-items: center; /* Poravnanje po vertikali */
}

#payments-page .table-container-footer div.total-full-price-text,
#payments-page .table-container-footer div.total-full-price,
#payments-page .table-container-footer-all div.total-full-price-text,
#payments-page .table-container-footer-all div.total-full-price-all {
  height: 23px;
  line-height: 23px;
  text-align: right;
  font-weight: 600;
  font-size: 15px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.175);
  padding-right: 5px;
}

#payments-page .table-container-footer-all div.total-full-price-all {
  font-weight: 800;
}

#payments-page .table-container-footer div.total-full-price-text {
  width: 80%;
  padding-right: 3px;
}

#payments-page .table-container-footer div.total-full-price {
  width: 20%;
}

#payments-page .calculator .table-container-content input {
  height: 40px;
  padding: 0 5px;
  font-size: small;
  font-weight: 500;
}

#payments-page .payment-body > .table-container-footer-all {
  justify-content: flex-end;
}

#payments-page .payment-body > .table-container-footer-all > .total-full-price-text {
  padding-left: 5px;
}

#payments-page .payment-body > .table-container-footer-all > div {
  border: none;
}

.row-green {
  background: #7eff5e !important;
  color: #000 !important;
}

/* NOTIFICATIONS START */
  #notification-content {
    position: fixed;
    bottom: 20px;
    right: 20px;
    max-width: 350px;
    display: flex;
    flex-direction: column-reverse; /* novije gore */
    gap: 8px;
    z-index: 9999;
    font-family: Arial, sans-serif;
    font-size: 16px;
  }

  .notification {
    color: white;
    padding: 12px 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0,0,0,0.3);
    position: relative;
    word-wrap: break-word;
    transition: all .3s;
  }

  .notification:hover {
    cursor: pointer;
    filter: grayscale(80%) brightness(90%) contrast(120%);
    transition: all .3s;
  }

  .notification .quote {
    font-weight: bold;
  }

  .notification .info {
    font-size: small;
  }

  .notification button.close-btn {
    position: absolute;
    top: 4px;
    right: 8px;
    background: transparent;
    border: none;
    color: white;
    font-size: 20px;
    cursor: pointer;
    line-height: 1;
    padding: 0;
  }
/* NOTIFICATIONS END */

.sidebar-sync-time {
  text-transform: lowercase;
  font-weight: normal;
  font-size: small;
  text-align: right;
}