/*
 * 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;
  --yellow-300: #f7CC86;
  --yellow-400: #F5BB5E;
  --green-300: #81aa6d;
  --green-400: #578E3D;
  --blue-100: #EEF5F8;
  --blue-300: #599EBA;
  --blue-700: #3D778E;
  --grey-100: #fafafa;
  --grey-200: #f9fafb;
  --grey-300: #ebebeb;
  --grey-400: #dddddd;
  --grey-700: #5b5b5b;
  --teal-50: #f4f9f9;
  --teal-700: #2f5256;
  --teal-950: #111f22;
  --teal-800: #144035;
  --surface-sidebar: #1d2c2e;
  --primary-bg: #f3ab1b;
  --border-default: #d1d5dc;

  --text-heading: #101828;
  --text-body: #1e2939;
  --text-muted: #6a7282;
  --text-title: #1a2d3d;
  --text-on-dark: #ffffff;

  --success-bg: #eaf5f1;
  --success-default: #319977;

  --blue-bg: #b9e8fe;
  --blue-surface: #eef4f8;
  --primary-subtle: #E7F2F2;
}

html,
body {
   display: flex;
   flex-direction: column;
   height: 100%;
   margin: 0;
   font-size: 16px;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-rendering: optimizeLegibility;
 }

 main {
   flex-grow: 1;
 }


@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;
}