/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

 :root {
  --black: #000;
  --white: #FFF;
  --yellow-100: #FDF1DF; /* Lightest yellow */
  --yellow-300: #f7CC86; /* Light yellow */
  --yellow-400: #F5BB5E; /* Medium yellow */
  --green-300: #81aa6d; /* Light green */
  --green-400: #578E3D; /* Medium green */
  --blue-100: #EEF5F8; /* Lightest blue */
  --blue-300: #599EBA; /* Light blue */
  --blue-700: #3D778E; /* Dark blue */
  --grey-100: #fafafa; /* Lightest grey */
  --grey-200: #f9fafb; /* Slightly darker than lightest grey */
  --grey-300: #ebebeb; /* Light grey */
  --grey-400: #dddddd; /* Medium light grey */
  --grey-700: #5b5b5b; /* Dark grey */
}

html,
body {
   display: flex;
   flex-direction: column;
   height: 100%;
   margin: 0;
   font-size: 16px;
 }

 main {
   flex-grow: 1;
 }

body {
  user-select: none;
}

@keyframes spinner {
  to {transform: rotate(360deg);}
}

.spinner {
  display: inline-block;
  width: 1.2em;
  height: 1.2em;
  vertical-align: text-bottom;
  border: 0.2em solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spinner 0.75s linear infinite;
  margin-right: 0.5em;
}

input[type="search"]::-webkit-search-cancel-button {
  margin-left: 8px;
}