@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@200;300;400;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Arvo:wght@700&display=swap");
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,500&display=swap');

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  
  /* .header-btn {
    @apply inline-flex relative z-50 focus:outline-none items-center rounded-md text-base px-2 py-1 hover:bg-gray-700 font-medium transition-all duration-100 hover:text-white text-gray-500;
  }

  .header-ul {
    @apply absolute hidden group-hover:block transition-all duration-300 top-8 right-0 bg-white drop-shadow-2xl rounded-lg border border-slate-300 text-blue-600;
  }

  .header-li {
    @apply border-b border-stone-300;
  }

  .header-link {
    @apply  rounded-lg block py-1 px-3 hover:text-blue-500 hover:bg-blue-100 transition-all duration-100;
  }

  .input {
    @apply block py-1.5 px-2 w-full text-gray-900 bg-gray-50 rounded-lg duration-300 border border-gray-300 sm:text-sm focus:ring-blue-500 focus:border-blue-500 focus:outline-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500;
  }

  .text-lable {
    @apply block text-xs font-medium text-gray-900 dark:text-gray-300;
  }

  .input-select {
    @apply absolute w-full bg-white rounded-lg shadow-2xl border border-neutral-200 top-12;
  }

  .btn-standart{
    @apply py-2 px-3 text-xs font-medium text-center text-white duration-200 inline-flex items-center bg-sky-600 rounded-lg hover:bg-sky-700 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800;
  }

  .title_li{
    @apply relative cursor-pointer py-1 px-2 text-sm hover:bg-sky-100 duration-200 rounded-lg;
  }

  .top_bottom{
    @apply w-9 h-9 flex items-center mr-1 justify-center bg-transparent text-zinc-700 text-2xl p-1 cursor-pointer border border-zinc-300 hover:-translate-y-0.5 hover:text-white hover:bg-zinc-700 disabled:bg-stone-400 disabled:hover:text-zinc-700 rounded-md duration-150;
  } */
}

@layer utilities {
  /* width */
::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 5px;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #454d55;
  border-radius: 5px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #000;
}

  .font-logo {
    font-family: 'DM Sans';
  }

  .bg_images{
    background-size: cover;
    background-origin: border-box;
    background-repeat: no-repeat;
    background-image: url("../images/bg.jpg");
  }

  .font-crm {
    font-family: Nunito;
  }
  
  .right-height {
    min-height: calc(100vh - 82px - 1rem);
  }
  
  .right-middle-height {
    min-height: calc(100vh - 160px - 1rem);
  } 

  .history_payment_area {
    max-height: calc(100vh - 256px);
  }

  .center-height {
    min-height: calc(100vh - 82px);
  }

  .left-max-height {
    max-height: calc(100vh - 204px);
  }

  .left-middle-height {
    max-height: calc(100vh - 276px);
  }

  .leads-body {
    height: calc(100vh - 86px);
  }

  .leads-table {
    height: calc(100vh - 140px);
  }

  .top_area {
    width: calc(100% - 1rem);
  }

  .box_start, .box_end{
    left:0;
  }

  .load_line{
    transition: 0.8s linear;
  }

  /*.candles {
    transition: all 1s linear;
  }*/

  #new-order{
    width: 800px;
  }


}

.shipment_alert::after {
    content: " ";
    position: absolute;
    top: 50%;
    right: 100%; /* To the left of the tooltip */
    margin-top: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent black transparent transparent;
}