.custom-sidebar {
    max-width: 14rem !important;
    z-index: 150;
    left: 0;
  }

  .custom-sidebar-space {
    margin-left: 14rem !important;
  }

  .custom-sidebar-full-space {
    margin-left: 3rem !important;
  }

  .v-toast {
    z-index: 9999999 !important;
  }

  table {
    font-size: 12px !important
  }

  .required {
    color: red;
  }

  .apexcharts-toolbar {
    display: none !important;
  }

  .loaderxx {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    position: relative;
    animation: rotate 1s linear infinite
  }

  .loaderxx::before,
  .loaderxx::after {
    content: "";
    box-sizing: border-box;
    position: absolute;
    inset: 0px;
    border-radius: 50%;
    border: 5px solid #FFF;
    animation: prixClipFix 2s linear infinite;
  }

  .loaderxx::after {
    inset: 8px;
    transform: rotate3d(90, 90, 0, 180deg);
    border-color: #FF3D00;
  }

  @keyframes rotate {
    0% {
      transform: rotate(0deg)
    }

    100% {
      transform: rotate(360deg)
    }
  }

  @keyframes prixClipFix {
    0% {
      clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0)
    }

    50% {
      clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0)
    }

    75%,
    100% {
      clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%)
    }
  }

  .modal {
    background: #323232c7 !important;
  }

  .v-toast__item {
    z-index: 99999999 !important;
  }

  .nav-item .active svg {
    color: white !important;
  }

  h6 {
    font-size: 1em;
  }

  .container {
    width: 100%;
    min-height: 100%;
  }

  .invoice {
    background: #fff;
    width: 100%;
    padding: 50px;
  }

  .logo {
    width: 3cm;
  }

  .document-type {
    text-align: right;
    color: #444;
  }

  .conditions {
    font-size: 0.7em;
    color: #666;
  }

  .bottom-page {
    font-size: 0.7em;
  }

  .autocomplete-result-list li {
    font-size: 16px
  }
  
  @media only screen and (min-width: 570px) and (max-width: 1250px) {

    .form-control{
      font-size:16px !important
    }

    .px-8 {
      padding-right: .5rem !important;
      padding-left: .5rem !important;
    }
    .py-8 {
      padding-top: .5rem !important;
      padding-bottom: .5rem !important;
    }
    .modal .form-control {
      padding: 3px 5px !important;
    }

    .modal .custom-auto-complete input{
      padding: 3px 5px 5px 40px !important
    }
  }

  .modal-custom-xl {
    max-width: 85% !important;
  }

  @media only screen and (max-width: 990px) {
    .bar-container {
      display: none !important;
    }

    .modal-custom-xl {
      max-width: 100% !important;
    }

    #login-image,
    #signup-image {
      display: none;
    }

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

    .custom-sidebar-space {
      margin-right: 0 !important;
      margin-left: 0 !important
    }

    .custom-sidebar-full-space {
      margin-right: 0 !important;
      margin-left: 0 !important
    }
  }


  .modal-invoice-template {
    /* margin-top: -2rem !important; */
    width: 100% !important;
  }

  .modal-xl {
    width: 100% !important;
  }

  .modal-invoice-template .modal-content {
    transform: scale(.9)
  }


  /* custom css */
  /* .modal.show,.modal-dialog,.modal-content,.modal-content{ */
    /* height:100% !important */
  /* } */

  .modal-invoice-template{
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }


  .nav .nav-link{
    padding : 0rem 0.8rem !important;
  }
  
  .grecaptcha-badge {
    z-index: -10 !important;
    display: none !important;
  }

  .invoice-builder [data-invoicly ] {
    border: 0.3px dashed #ddd;
    padding: 5px;
  }
  
  
  /* Pulse effect for the input */
.custom-auto-complete input {
  border: 1px solid #d4d6d8; /* Blue border */
  animation: pulseShadow 3s cubic-bezier(0.4, 0, 0.6, 1) 1;
}

@keyframes pulseShadow {
  0% {
    box-shadow: 0 0 0 0 rgba(223, 225, 228, 0.5);
  }
  50% {
    box-shadow: 0 0 10px 5px rgba(190, 190, 190, 0.5);
  }
  100% {
    box-shadow: 0 0 0px 0px rgba(236, 236, 236, 0.5);
  }
}

/* Financial Insights Card Select */
.card-body .form-select.small {
  text-align: left !important;
  width: 33%;
  float: right;
  border: none;
}