@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-6:              #808080;
    --neo-green:           #59c182;
    --warning-color:       #fece22;

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

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

    --app-height:          100%;
    --app-scroll-height:   0;
    --header-full-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(--light-grey);
    --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;
}