@techabl/core-components/lib/src/index.css

Easy use restyle components in React applications.

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

@layer base {
  @font-face {
    font-family: 'ArimaRegular';
    src: url('./library/assets/fonts/arima/arima-regular.ttf');
  }
}

@layer components {
  table {
    @apply text-black dark:text-white;
  }
  table tr:hover {
    @apply dark:bg-white;
  }

  select {
    @apply dark:text-black;
  }
  .main {
    @apply bg-white;
  }
  .headerView {
    @apply bg-white;
  }
  .headerView {
    @apply dark:bg-boxdark;
  }
}

body {
  font-size: 14px;
  font-family: 'Arima Regular';
}

.ps__rail-y {
  background: none !important;
}

.scrollbar-container {
  width: 97% !important;
}
.dropdown-menu {
  min-width: 3rem;
}

.w-md-editor-show-live {
  height: 800 !important;
}

.bg-orange1 {
  background-color: '#EF4444';
}

.react-pdf__Page__canvas {
  min-height: 100vh !important;
  max-width: 100vw !important;
}

/* :root {
  scrollbar-color: transparent transparent;
} */

/* Outer box for reference */
.outer-box {
  position: relative;
  width: 300px;
  height: 400px;
  border: 2px solid #333;
  overflow: hidden; /* Ensure the menu does not spill out */
}

/* Parent container */
.parent-container {
  position: relative;
  padding: 20px;
  background: #f0f0f0;
}

/* Menu styling */
.menu {
  position: absolute; /* Allows the menu to exist independently */
  top: 100%; /* Position it just below the parent */
  left: 0;
  width: 100%;
  max-height: 200px; /* Define a max height for scrolling */
  overflow-y: auto; /* Enable vertical scrolling */
  background: #fff;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  border: 1px solid #ccc;
}

/* Styling for the menu items */
.menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu li {
  padding: 10px;
  border-bottom: 1px solid #ddd;
}

.menu li:last-child {
  border-bottom: none;
}

.border-t-2 {
  border-top-width: 2px;
}

.border-b-2 {
  border-bottom-width: 2px;
}