@font-face {
    font-family: "StandardFont";
    src: url("fonts/Raleway-Regular.ttf") format("truetype");
    font-display: block;
}

@font-face {
    font-family: "StandardFontBold";
    src: url("fonts/Raleway-Bold.ttf") format("truetype");
    font-display: block;
}

::-webkit-scrollbar {
    width: 0.5rem;
    height: 0.5rem;
}

::-webkit-scrollbar-track {
    background: #777;
}

::-webkit-scrollbar-thumb {
    background: #999;
}

::-webkit-scrollbar-thumb:hover {
    background: #555;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"]::-webkit-input-placeholder {
    color: var(--themeDark2);
    font-style: italic;
}

body, html {
    height: 100vh;
    width: 100vw;
    padding: 0;
    margin: 0;
    background-color: var(--themePrimary);
}

body {
    overflow: hidden;
    font-family: 'StandardFont', sans-serif;
}

button {
    outline: none !important;
}

div#root {
    height: 100%;
    width: 100%;
}

:root {
    --epirocYellow: rgb(255, 199, 44);
    --epirocYellowAlpha: rgba(255, 199, 44, 0.35);
    --epirocGray: rgb(66, 85, 99);
    --darkerEpirocGray: rgb(62, 77, 87);
    --epirocGrayAlpha: rgb(66, 85, 99, 0.75);
    --epirocSlateGrey: rgb(56, 72, 84);
    --epirocWarmGray1: rgb(121, 110, 101);
    --epirocWarmGray2: rgb(188, 183, 178);
    --epirocWarmGray3: rgb(215, 210, 203);
    --epirocWarmGray4: rgb(235, 232, 229);
    --epirocWarmGray5: rgb(245, 244, 242);
    --epirocDarkBlue: rgb(0, 30, 50);
    --epirocArcticBlue: rgb(218, 234, 242);
    --epirocLightBlue: rgb(236, 244, 248);
    --epirocLightBlue1: rgb(72, 169, 197);
    --epirocLightBlue2: rgb(171, 211, 226);
    --epirocRed1: rgb(183, 49, 44);
    --epirocRed2: rgb(241, 166, 147);
    --epirocViolet1: rgb(97, 44, 81);
    --epirocViolet2: rgb(194, 164, 183);
    --epirocOrange1: rgb(216, 96, 24);
    --epirocOrange2: rgb(243, 188, 123);
    --epirocGreen1: rgb(76, 140, 43);
    --epirocGreen2: rgb(164, 197, 149);
    --electricGreen: rgb(134, 200, 188);

    --themePrimary: #535353;
    --themeLight1: #e6e6fa;
    --themeLight2: #C7C7C7;
    --themeLight3: #E6E6E6;
    --themeLight4: #B3B3B3;
    --themeLight5: #6A6A6A;
    --themeLight6: rgb(153, 153, 153);
    --themeDark1: rgb(74, 74, 74);
    --themeDark2: #333333;
    --themeDark3: #303030;
    --themeDark4: #3E3E3E;
    --themeDark5: #1E1E1E;
    --themeDark6: #231F20;
    --themeAccent1: #00BFFF;
    --themeAccent1Faded: rgba(0, 191, 255, .78);
    --themeAccent1Hover: #69CCFFFF;
    --themeAccent2: #86C8BC;
    --themeAccent3: #4CAF50;
    --themeAccent4: #F1737D;

    --font: "StandardFont";
    --fontBold: "StandardFontBold";
    --textFont: 9.5px var(--font);
    --textFontBold: 9.5px var(--fontBold);
    --defaultTextFontSize: 9.5px;
    --textFontMedium: 12px var(--textFont);
    --textFontMediumBold: 12px var(--fontBold);
    --textFontLarge: 16px var(--textFont);
    --textFontLargeBold: 16px var(--fontBold);
    --textColor: var(--themeLight1);
    --textColorFaded: var(--themeLight2);
    --textActive: var(--themeDark2);
    --disabledColor: var(--themeLight5);
    --disabledEmptyColor: var(--themeLight4);
    --hoverColor: var(--themeLight6);
    --hoverOverSelected: var(--themeDark3);
    --activeColor: var(--themeAccent1);
    --bgColor: var(--themeLight6);
    --warningColor: var(--themeAccent4);
    /* Element colors */
    --iconDisabledColor: var(--themeDark4);
    --iconFillColor: var(--themeLight1);
    --disabledTextColor: var(--disabledColor);
    --buttonColor: var(--themeDark1);
    --buttonBorderColor: transparent;
    --buttonDownColor: var(--themeDark2);
    --buttonDownHoverColor: var(--hoverOverSelected);
    --buttonDisabledColor: var(--disabledColor);
    --buttonHoverColor: var(--hoverColor);
    --buttonFocusedColor: var(--activeColor);
    --contentSeparatorColor: var(--themeDark2);
    --checkboxCheckedColor: var(--activeColor);
    --checkboxCheckedDisabledColor: var(--disabledColor);
    --checkboxUncheckedColor: var(--themeLight1);
    --checkboxUncheckedDisabledColor: var(--disabledEmptyColor);
    --checkBoxMarkColor: var(--themeLight1);
    --dialogColor: var(--themePrimary);
    --dialogBorderColor: var(--themeDark2);
    --dialogTitleColor: var(--themeDark1);
    --dialogItemBackgroundColor: var(--themeAccent1);
    --dialogItemFillColor: var(--themeLight1);
    --editBoxColor: var(--themeDark2);
    --editBoxDisabledColor: var(--themeLight5);
    --editBoxHoverColor: var(--hoverColor);
    --editBoxTextColor: var(--textColorFaded);
    --editBoxTextDisabledColor: var(--textColorFaded);
    --locatorButtonWarningColor: var(--epirocYellow);
    --locatorButtonInRangeColor: var(--epirocGreen1);
    --graphColor: var(--themeDark1);
    --graphTooltipColor: var(--themeDark2);
    --infoDisabledColor: var(--disabledColor);
    --listHoverColor: rgba(199, 199, 199, 0.25);
    --listItemEvenColor: var(--themeDark1);
    --listItemOddColor: var(--themeDark4);
    --lineSelectedColor: var(--activeColor);
    --placeHolderColorStart: var(--themeLight5);
    --placeHolderColorEnd: var(--themeLight3);
    --popoverBgColor: var(--themeDark1);
    --popoverOutlineColor: var(--bgColor);
    --tableBorderColor: var(--epirocWarmGray5);
    --tableHoverColor: var(--listHoverColor);
    --tableItemEvenColor: var(--listItemEvenColor);
    --tableItemOddColor: var(--listItemOddColor);
    --tableItemSelectedColor: var(--hoverColorAlpha);
    --tabPanelBackgroundColor: var(--themeDark2);
    --tabPanelButtonColor: var(--buttonColor);
    --tabPanelButtonHoverColor: var(--themeAccent1);
    --tabPanelButtonSelectedColor: var(--themeAccent1);
    --selectButtonColor: var(--themePrimary);
    --selectButtonBorderColor: var(--themeLight1);
    --selectOptionsBackgroundColor: var(--themePrimary);
    --selectOptionsOutlineColor: var(--bgColor);
    --selectOptionsBorderColor: var(--themeLight1);
    --selectOptionBackgroundColor: var(--themePrimary);
    --siteItemColor: var(--themeDark1);
    --toolBarSeparator: var(--themeLight4);
    --toolbarBackgroundColor: var(--themePrimary);
    --toolbarButtonFillColor: var(--themeLight1);

    /* ReSharper disable once RequiresFallbackColor */
    --bgColorAlpha: rgba(153, 153, 153, 0.25);
    --bgColorAlphaLess: rgba(153, 153, 153, 0.1);
    /* ReSharper disable once RequiresFallbackColor */
    --hoverColorAlpha: rgba(199, 199, 199, 0.25);
    --toolbarHeight: 45px;
}

* {
    color: var(--textColor);
    font-family: var(--font);
    font-size: var(--defaultTextFontSize);
    font-feature-settings: 'lnum' 1 !important; /* Fixing the number style for this font, so that the numbers are on the same height */
    letter-spacing: 0.05rem;
}

*:focus {
    outline: none;
}

.container {
    display: flex;
    position: relative;
    width: 100%;
    height: 100%
}

.blackText {
    color: black;
}

.textFaded {
    color: var(--textColorFaded);
}

#modal-root {
    position: relative;
    z-index: 999;
    height: 100%;
    width: 100%;
}