@font-face {
  font-family: 'Rubik';
  src:
    url("../fonts/Rubik-Regular.47c8fd561d03.woff2") format('woff2'),
    url("../fonts/Rubik-Regular.8ce9e65172c1.woff") format('woff');
  font-style: normal;
}

@font-face {
  font-family: 'Rubik';
  font-weight: 500;
  src:
    url("../fonts/Rubik-Medium.545e770266c2.woff2") format('woff2'),
    url("../fonts/Rubik-Medium.98f809be718f.woff") format('woff');
  font-style: normal;
}

@font-face {
  font-family: 'Roboto';
  src:
    url("../fonts/Roboto-Regular.9feb0110b6df.woff2") format('woff2'),
    url("../fonts/Roboto-Regular.94dac78eee40.woff") format('woff');
  font-style: normal;
}

@font-face {
  font-family: 'Roboto';
  font-weight: 500;
  src:
    url("../fonts/Roboto-Medium.50d01d3e6c99.woff2") format('woff2'),
    url("../fonts/Roboto-Medium.9a3bf7acae14.woff") format('woff');
  font-style: normal;
}

::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 10px;
  height: 10px;
  background-color: transparent;
}

::-webkit-scrollbar-thumb {
  background: green;
  border-left: 6px solid transparent;
  background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
  border: 0;
  border-radius: 10px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-button {
  height: 5px;
  background: transparent;
}

:root {
  --light-grey: #eaecee;
  --dark-grey: #9e9f9e;
  --black-grey: #393838;
  --black-color: #1b1918;
  --black-color-2: #1d1b1a;
  --white-color: #fff;
  --white-color-1: #ccc;
  --green-color: #00843d;
  --light-green: #ebf6f0;
  --dark-green: #027638;
  --neon-green: #27ae60;
  --red-color: #ed465a;
  --light-red: #fef1f2;
  --light-blue: #93bfff;
  --soft-black: #333735;
  --soft-dark-grey: #505050;
  --middle-darck-grey: #292828;
  --uni-green: #27ae60;
  --grey-2: #f4f6f8;
  --grey-3: #e5e7eb;
  --grey-4: #dfdfdf;
  --grey-5: #9e9f9e;
  --grey-6: #808080;
  --neo-green: #59c182;
  --warning-color: #fece22;

  --alert-color: var(--red-color);

  --fs12: 0.75rem;
  --fs14: 0.875rem; /* 14px */
  --fs16: 1rem; /* 16px */
  --fs18: 1.125rem; /* 18px */
  --fs20: 1.25rem; /* 20px */
  --fs22: 1.375rem; /* 22px */
  --fs25: 1.5625rem; /* 25px */

  --app-height: 100%;
  --header-full-height: fit-content;
  --header-inner-height: fit-content;
  --header-search-width: 100%;
  --placeholder-color: #b9cad4;
  --global-radius: 16px;
  --icon-calendar: url('data:image/svg+xml,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13.5002 12H11V14.5H13.5002V12ZM12.8148 3V4.4H7.18521V3H5.7778V4.4H5.07409C4.29298 4.4 3.67372 5.03 3.67372 5.8L3.66669 15.6C3.66669 16.37 4.29298 17 5.07409 17H14.9259C15.7 17 16.3334 16.37 16.3334 15.6V5.8C16.3334 5.03 15.7 4.4 14.9259 4.4H14.2222V3H12.8148ZM14.9259 15.6H5.07409V7.9H14.9259V15.6Z" fill="%2300843D"/></svg>');
  --icon-warning: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjUiIHZpZXdCb3g9IjAgMCAyNCAyNSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTIzLjEgMTIuNTg1OEMyMy4xIDE4Ljc2OTcgMTguMTI0MyAyMy43NzE3IDEyIDIzLjc3MTdDNS44NzU2OCAyMy43NzE3IDAuOSAxOC43Njk3IDAuOSAxMi41ODU4QzAuOSA2LjQwMjAxIDUuODc1NjggMS40IDEyIDEuNEMxOC4xMjQzIDEuNCAyMy4xIDYuNDAyMDEgMjMuMSAxMi41ODU4WiIgc3Ryb2tlPSIjRUQ0NjVBIiBzdHJva2Utd2lkdGg9IjEuOCIvPgo8cGF0aCBkPSJNMTIuNzUgMTUuOTg0NkMxMi43NSAxNi42MTEgMTIuMjQ2OSAxNy4xMTc3IDExLjYyNSAxNy4xMTc3QzExLjAwMzEgMTcuMTE3NyAxMC41IDE2LjYxMSAxMC41IDE1Ljk4NDZDMTAuNSAxNS4zNTgyIDExLjAwMzEgMTQuODUxNiAxMS42MjUgMTQuODUxNkMxMi4yNDY5IDE0Ljg1MTYgMTIuNzUgMTUuMzU4MiAxMi43NSAxNS45ODQ2WiIgZmlsbD0iI0VENDY1QSIvPgo8cGF0aCBkPSJNMTEuODg5NCA3LjI5Njg4SDExLjM2MDZDMTAuODY2IDcuMjk2ODggMTAuNDc0IDcuNzI0ODYgMTAuNTAxMyA4LjIzMjc5TDEwLjc2NTcgMTMuMjU1N0MxMC43OTA4IDEzLjcyNiAxMS4xNjkyIDE0LjA5NTIgMTEuNjI1IDE0LjA5NTJDMTIuMDgzMSAxNC4wOTUyIDEyLjQ1OTIgMTMuNzI2IDEyLjQ4NDMgMTMuMjU1N0wxMi43NDg3IDguMjMyNzlDMTIuNzc2IDcuNzI0ODYgMTIuMzg0IDcuMjk2ODggMTEuODg5NCA3LjI5Njg4WiIgZmlsbD0iI0VENDY1QSIvPgo8L3N2Zz4K')
    center no-repeat;
  --global-font-weight: 500;
}

body {
  font-family: 'Roboto', 'Rubik', sans-serif;
  color: var(--text-color);
  background-color: var(--bkg-color);
  display: flex;
  flex-direction: column;

  --primary-color: var(--neo-green);
  --content-color: var(--black-color);
  --text-color: var(--black-color);
  --text-color-revers: var(--white-color);
  --bkg-color: var(--white-color);
  --bkg-color-head: var(--light-grey);
  --bkg-color-hover: var(--grey-2);
  --footer-bkg-color: var(--soft-dark-grey);
  --border-color: var(--light-grey);
  --shadow-1: 0 1px 30px 0 #1b191823;
  --shadow-2: 0 4px 4px rgb(0 0 0 / 10%);
  --icon-search: url('data:image/svg+xml; utf8, %3Csvg%20width%3D%2214%22%20height%3D%2214%22%20viewBox%3D%220%200%2014%2014%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M8.82214%205.65189C8.82214%207.40277%207.40277%208.82214%205.65189%208.82214C3.90101%208.82214%202.48164%207.40277%202.48164%205.65189C2.48164%203.90101%203.90101%202.48164%205.65189%202.48164C7.40277%202.48164%208.82214%203.90101%208.82214%205.65189ZM8.47222%209.74502C7.67093%2010.2982%206.69924%2010.6221%205.65189%2010.6221C2.9069%2010.6221%200.681641%208.39688%200.681641%205.65189C0.681641%202.9069%202.9069%200.681641%205.65189%200.681641C8.39688%200.681641%2010.6221%202.9069%2010.6221%205.65189C10.6221%206.69924%2010.2982%207.67093%209.74502%208.47222L13.3181%2012.0453L12.0453%2013.3181L8.47222%209.74502Z%22%20fill%3D%22%231B1918%22%2F%3E%0A%3C%2Fsvg%3E');
  --search-cancel-btn: url('data:image/svg+xml;base64,PHN2ZyBpZD0iZGFmODQ1MjktYzgxMC00ZTcyLTg5ODEtNmE1ZjI0OWQ2NDE4IiBkYXRhLW5hbWU9IkxheWVyIDEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjMwIiBoZWlnaHQ9IjMwIiB2aWV3Qm94PSIwIDAgMzAgMzAiPjx0aXRsZT5hcHAtaWNvbnMtb3B0aW1pc2VkPC90aXRsZT48cGF0aCBkPSJNMjAuNzA2MywxMC42NjlhMC4xOTUsMC4xOTUsMCwwLDAsMC0uMjc1bC0xLjEtMS4xYTAuMTk1LDAuMTk1LDAsMCwwLS4yNzUsMGwtNC4xOTQsNC4xOTM1YTAuMTk1LDAuMTk1LDAsMCwxLS4yNzUsMGwtNC4xOTQtNC4xOTM1YTAuMTk1LDAuMTk1LDAsMCwwLS4yNzUsMGwtMS4xLDEuMWEwLjE5NSwwLjE5NSwwLDAsMCwwLC4yNzVsNC4xOTQsNC4xOTM1YTAuMTk1LDAuMTk1LDAsMCwxLDAsLjI3NUw5LjI5MzcsMTkuMzMxYTAuMTk1LDAuMTk1LDAsMCwwLDAsLjI3NWwxLjEsMS4xYTAuMTk1LDAuMTk1LDAsMCwwLC4yNzUsMGw0LjE5NC00LjE5MzVhMC4xOTUsMC4xOTUsMCwwLDEsLjI3NSwwbDQuMTk0LDQuMTkzNWEwLjE5NSwwLjE5NSwwLDAsMCwuMjc1LDBsMS4xLTEuMWEwLjE5NSwwLjE5NSwwLDAsMCwwLS4yNzVsLTQuMTk0LTQuMTkzNWEwLjE5NSwwLjE5NSwwLDAsMSwwLS4yNzVaIiBzdHlsZT0iZmlsbDojMjcyMzIwOyIvPjwvc3ZnPgo=');
  --bkg-color-additional: var(--light-green);
  --bkg-color-popup: var(--white-color);
  --uni-color: var(--uni-green);
  --additional-color: var(--grey-2);
  --disabled-text: var(--white-color);

  --disabled-bkg: var(--soft-dark-grey);
  --disabled-background: var(--grey-3);
  --sub-text: var(--dark-grey);
}

body.theme-dark {
  --primary-color: var(--neo-green);
  --content-color: var(--white-color-1);
  --bkg-color: var(--black-color);
  --bkg-color-head: var(--black-grey);
  --bkg-color-hover: var(--middle-darck-grey);
  --footer-bkg-color: var(--black-color);
  --border-color: var(--black-grey);
  --shadow-1: 0 1px 3px 0 var(--black-grey);
  --shadow-2: 0 1px 2px var(--black-grey);
  --icon-search: url('data:image/svg+xml; utf8, %3Csvg%20width%3D%2214%22%20height%3D%2214%22%20viewBox%3D%220%200%2014%2014%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M8.82214%205.65189C8.82214%207.40277%207.40277%208.82214%205.65189%208.82214C3.90101%208.82214%202.48164%207.40277%202.48164%205.65189C2.48164%203.90101%203.90101%202.48164%205.65189%202.48164C7.40277%202.48164%208.82214%203.90101%208.82214%205.65189ZM8.47222%209.74502C7.67093%2010.2982%206.69924%2010.6221%205.65189%2010.6221C2.9069%2010.6221%200.681641%208.39688%200.681641%205.65189C0.681641%202.9069%202.9069%200.681641%205.65189%200.681641C8.39688%200.681641%2010.6221%202.9069%2010.6221%205.65189C10.6221%206.69924%2010.2982%207.67093%209.74502%208.47222L13.3181%2012.0453L12.0453%2013.3181L8.47222%209.74502Z%22%20fill%3D%22%2300843D%22%2F%3E%0A%3C%2Fsvg%3E%0A');
  --search-cancel-btn: url('data:image/svg+xml; utf8, %3Csvg%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%2032%2032%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cg%20clip-path%3D%22url%28%23clip0%5f869%5f38574%29%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M22.8317%2010.9515L10.9523%2022.8309L9.06667%2020.9453L20.9461%209.06592L22.8317%2010.9515Z%22%20fill%3D%22%23ccc%22%2F%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M9.27301%2010.9515L21.1524%2022.8309L23.038%2020.9453L11.1586%209.06592L9.27301%2010.9515Z%22%20fill%3D%22%23ccc%22%2F%3E%0A%3C%2Fg%3E%0A%3Cdefs%3E%0A%3CclipPath%20id%3D%22clip0%5f869%5f38574%22%3E%0A%3Crect%20width%3D%2232%22%20height%3D%2232%22%20fill%3D%22black%22%2F%3E%0A%3C%2FclipPath%3E%0A%3C%2Fdefs%3E%0A%3C%2Fsvg%3E%0A');
  --bkg-color-additional: var(--soft-black);
  --bkg-color-popup: var(--soft-black);
  --uni-color: var(--green-color);
  --additional-color: var(--black-color-2);
  --text-color: var(--white-color);
  --disabled-text: var(--dark-grey);
  --disabled-bkg: var(--light-grey);
  --sub-text: var(--light-grey);
}

.invalidated:invalid {
  border-color: var(--red-color) !important;
}