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

.max-height-form {
  max-height: 90%;
}

.height-42 {
  height: 42px;
}

.td-bg-color {
  background-color: #12284b;
}

.td-text-color {
  color: #12284b;
}

.td-border-color {
  border-color: #12284b;
}

.whitesmoke {
  background-color: #f5f5f5;
}

/* Used to add styling the pagination bar */
@layer components {
  .pagination .page,
  .first,
  .prev,
  .next,
  .last {
    @apply whitesmoke text-gray-700 p-3 text-center hover:cursor-pointer;
  }

  .pagination .current {
    @apply bg-gray-300;
  }

  /* Custom styling for the thumb for the slider to set the endpoint when trimming a video */
  input[data-video-upload-target="endSlider"]::-webkit-slider-thumb,
  input[data-video-upload-target="endSlider"]::-moz-range-thumb,
  .slider-thumb::-webkit-slider-thumb,
  .slider-thumb::-moz-range-thumb {
    @apply w-5 h-5 bg-gray-200 rounded-full cursor-pointer;
  }

  /* Custom styling for the slider bar when trimming a video tp upload */
  .slider-thumb::-webkit-slider-runnable-track,
  .slider-thumb::-moz-range-progress {
    background-color: #6666ff;
    height: 8px;
  }

  .slider-thumb::-webkit-slider-runnable-track,
  .slider-thumb::-moz-range-track {
    background-color: #f2f2f2;
    height: 8px;
  }
}
/*Override SlimSelect CSS*/
.ss-main {
  font-size: 1rem;
  height: 42px;

  .ss-single-selected {
    height: 200px;
    padding: 20px 24px;
  }
  .ss-content .ss-list {
    padding: 5px 0;
  }
  .ss-content .ss-list .ss-option {
    padding: 15px 24px;
  }
  .ss-single-selected .placeholder,
  .ss-single-selected .placeholder * {
    overflow: visible;
  }

  strong + sup {
    margin-left: 1ch;
    text-transform: uppercase;
    font-size: 0.5em;
    top: -0.9em;
  }
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */