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

@font-face {
  font-family: "IBM Plex Mono";
  src: url("fonts/IBMPlexMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "IBM Plex Sans";
  src: url("fonts/IBMPlexSans-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "IBM Plex Serif";
  src: url("fonts/IBMPlexSerif-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "IBM Plex Serif";
  src: url("fonts/IBMPlexSerif-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: "IBM Plex Sans Condensed";
  src: url("fonts/IBMPlexSansCondensed-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
}


/* a:hover {
  text-decoration-color: #ff4400;
  color: rgb(254, 185, 160);
  transition: all 0.2s ease-out;
} */

/* form label {
  @apply dark:text-slate-400;
} */

.responsive-table {
  @apply dark:text-white mx-auto table-fixed;
}

.responsive-table tr:nth-child(even) {
  @apply bg-slate-800
}

.responsive-table tbody tr:nth-child(odd) {
  @apply bg-slate-900
}

.responsive-table thead th {
  @apply text-left border-b-2 border-b-slate-500 text-xl;
}

.responsive-table thead th:not(:first-child),
.responsive-table td:not(:first-child) {
  @apply border-l border-l-slate-500;
}

@layer utilities {
  .min-w-20char {
    min-width: 20ch;
  }
  .max-w-20char {
    max-width: 20ch;
  }
  .min-w-30char {
    min-width: 30ch;
  }
  .max-w-30char {
    max-width: 30ch;
  }
  .max-w-35char {
    max-width: 35ch;
  }
  .max-w-40char {
    max-width: 40ch;
  }
}

/* form input,
select,
textarea {
  @apply dark:border dark:border-slate-900 dark:bg-slate-500 dark:text-slate-100;
} */

form input:disabled,
select:disabled,
textarea:disabled {
  @apply dark:bg-slate-800 dark:text-slate-500 cursor-not-allowed;
}

.errorlist {
  @apply mt-4 mb-1 pl-3 py-2 bg-red-600 text-slate-200 w-[300px];
}

/* @media screen and (min-width: 768px) {
  form input,
  select,
  textarea {
    width: 300px;
  }
} */

/* @media screen and (max-width: 768px) {
  form input,
  select,
  textarea {
    width: 150px;
  }
} */

#button-container button {
  @apply mx-1;
}

.basic-button-container {
  @apply flex space-x-2 justify-center;
}

.basic-button {
  @apply inline-block px-6 py-2.5 bg-blue-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out;
}

.markdown-content ul {
  list-style-type: disc;
  list-style-position: inside;
  padding-left: 1em;
}

.markdown-content ol {
  list-style-type: decimal;
  list-style-position: inside;
  padding-left: 1em;
}

.markdown-content ul, 
.markdown-content ol {
    list-style-position: outside;
    padding-left: 1em;
}

.markdown-content ul ul, 
.markdown-content ul ol, 
.markdown-content ol ul, 
.markdown-content ol ol {
    list-style-type: circle;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    padding-left: 1em;
}

/* .truncate-container {
  @apply inline-block relative;
  a {
    @apply inline-block truncate max-w-20char transition-all group-hover:absolute group-hover:max-w-none group-hover:-top-8 group-hover:-left-6 group-hover:min-w-60 group-hover:px-6 group-hover:py-3.5 group-hover:bg-purple-600 group-hover:rounded-sm group-hover:outline-dashed group-hover:outline-purple-400 group-hover:outline-4;
    
  }  
} */

label {
  @apply dark:text-slate-500;
}

[type="text"], [type="password"], [type="datetime-local"], [type="datetime"], [type="date"], [type="number"], select, textarea {
  @apply dark:bg-slate-600 dark:text-slate-300;
}

[type="submit"] {
  @apply dark:text-white font-bold dark:bg-blue-600 px-4 py-2;
}

form div label {
  @apply dark:text-white;
}

form div {
  @apply flex flex-col;
}

div [type="submit"] {
  @apply mt-3;
}