@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

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

body {
  line-height: 1.42857143;
  font-family: "Open Sans", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
}


@layer components {
  .containerMode {
    /* @apply container mx-auto px-5 xxs:max-w-full sm:max-w-[98%] lg:max-w-[1100px]; */
    @apply container mx-auto px-5 max-w-[1500px]
  }

  .custom-btn{@apply min-w-[100px] transition-all duration-300 p-2 rounded-full}


  /* MODAL COMPONENT */
  .modal-container{
    animation-name: zoom;
    animation-duration: .2s;
    animation-timing-function: linear;
    @apply w-4/5 max-w-[600px] bg-white shadow-md rounded-2xl overflow-hidden
  }
  .modal-header { 
    @apply w-full flex items-center justify-between p-5 py-8 border-b bg-sky-500
  }
  .modal-title { 
    @apply text-2xl leading-8 font-bold text-white dark:text-white tracking-wide flex items-center
  }
  .modal-close-btn { 
    @apply text-white dark:text-red-500
  }
  .modal-body { 
    @apply w-full p-5 min-h-[150px] max-h-[500px] overflow-y-auto break-words flex flex-col justify-center items-center
  }
  .modal-footer { 
    @apply w-full p-5 border-t flex justify-between items-center gap-4
  }
  /* MODAL COMPONENT */


}