.material-symbols-rounded {
    font-variation-settings:
            'FILL' 1,
            'wght' 600,
            'GRAD' 0,
            'opsz' 24;
    user-select: none;
    -webkit-user-select: none;
}

:root {
    --color-primary-rgb: 0, 134, 79;
    --color-primary-dark: #004530;
    --color-primary-medium: #005f42;
    --color-primary: #00864f;
    --color-secondary: #00baa0;
    --mdc-theme-secondary: var(--color-secondary);
    --mdc-theme-on-secondary: #f1fff9;
    --mdc-theme-primary: var(--color-primary);
    --mdc-theme-on-primary: #ffffff;
    --color-text: #000000;
    --color-background: #ffffff;
    --color-text-light: #2f2f2f;
    --mdc-switch-selected-track-color: rgba(0, 164, 135, 0.4);
    --mdc-switch-selected-hover-track-color: rgba(0, 164, 135, 0.5);
    --mdc-switch-selected-focus-track-color: rgba(0, 164, 135, 0.6);
    --mdc-switch-selected-pressed-track-color: rgba(0, 164, 135, 0.6);
    --mdc-switch-selected-hover-handle-color: var(--color-primary-medium);
    --mdc-switch-selected-focus-handle-color: var(--color-primary);
    --mdc-switch-selected-pressed-handle-color: var(--color-primary-dark);
    --text-scale-factor: 1;
    --margin-scale-factor: 1;
}

body, html {
    padding: 0;
    margin: 0;
    font-family: 'Roboto', sans-serif;
    --webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 300;
}

#title-bar {
    padding: calc(20px * var(--margin-scale-factor));
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
}

#back-button {

}

#title-bar .material-symbols-rounded {
    margin: 0 calc(20px * var(--margin-scale-factor)) 0 0;
    font-size: 27px;
}
#title-bar .icon-button .material-symbols-rounded {
    margin: 0 0 0 0;
}

.mdc-button.icon-button .mdc-button__icon {
    margin: 0;
    font-size: 24px;
    width: 24px;
    height: 24px;
}
.mdc-button.icon-button {
    width: 48px;
    height: 48px;
    min-width: 48px;
    min-height: 48px;
    border-radius: 24px;
    padding: 0;
    margin: 0;
}
.mdc-button.icon-button .mdc-button__ripple {
    border-radius: 24px;
}

#title-bar .mdc-button {
    width: 48px;
    height: 48px;
    border-radius: 24px;
}
#title-bar .mdc-button__icon {
    width: 27px;
    height: 27px;
}
#title-bar .mdc-button__ripple {
    border-radius: 32px;
}
.mdc-button.icon-button i {
    color: var(--color-primary-dark);
}
.mdc-button[disabled].icon-button i {
    opacity: 0.6;
}

#navigation-button {
    margin: 0 calc(15px * var(--margin-scale-factor)) 0 0;
}

.mdc-chip__icon {
    margin-right: 7px;
}

.mdc-button *[hidden] {
    display: none;
}

.mdc-fab {
    position: fixed;
    bottom: 16px;
    right: 16px;
    z-index: 1;
}

.button-red {
    --mdc-theme-primary: var(--mdc-theme-error);
    color: #6f0000;
}

.button-red.mdc-button.icon-button i {
    color: var(--mdc-theme-error);
}


.mdc-fab__icon[hidden] {
    display: none;
}

/* Styling the scrollbar */
.scrollbar-style-1::-webkit-scrollbar {
    width: calc(10px * var(--margin-scale-factor)); /* Adjust the width of the scrollbar */
    height: calc(10px * var(--margin-scale-factor)); /* Adjust the width of the scrollbar */
}

/* Making the scrollbar track transparent */
.scrollbar-style-1::-webkit-scrollbar-track {
    background: transparent; /* Hide the track */
}

/* Styling the scrollbar thumb */
.scrollbar-style-1::-webkit-scrollbar-thumb {
    background: #888; /* Visible part of the scrollbar */
    border-radius: 10px; /* Optional: if you want rounded corners */
}

.scrollbar-style-1::-webkit-scrollbar-thumb:hover {
    background: #555; /* Color when hovered */
}

.scrollbar-style-1::-webkit-scrollbar-thumb:active {
    background: #555; /* Color when pressed */
}

.scrollbar-style-1 {
    margin-right: calc(7px * var(--margin-scale-factor));
}

.svg-primary {
    fill: var(--color-primary);
}
.svg-neutral {
    fill: var(--color-text-light);
}

.svg-bg {
    fill: var(--color-background);
}
.svg-secondary {
    fill: var(--color-secondary);
}

.svg-primary-stroke {
    stroke: var(--color-primary);
}

.svg-grey {
    fill: #888;

}

.svg-grey-stroke {
    stroke: #888;
}

.svg-neutral-stroke {
    stroke: var(--color-text-light);
}

.svg-secondary-stroke {
    stroke: var(--color-secondary);
}

.svg-bg-stroke {
    stroke: var(--color-background);
}

.svg-no-fill {
    fill: none;
}

.mdc-text-field--focused:not(.mdc-text-field--disabled) .mdc-floating-label {
    color: var(--color-secondary);
}

.mdc-text-field--invalid:not(.mdc-text-field--disabled) .mdc-floating-label {
    color: var(--mdc-theme-error);
}

.mdc-list-item {
    height: 48px;
    display: flex;
    flex-direction: row;
    align-items: center;
}


input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type=number] {
    -moz-appearance: textfield;
}

space {
    flex-grow: 1;
}



#body-content h1,
#body-content h2,
#body-content h3,
#body-content p {
    margin: calc(7px * var(--margin-scale-factor)) calc(20px * var(--margin-scale-factor));
}

#body-content h6 {
    font-size: calc(16px * var(--text-scale-factor));
}

#body-content h5 {
    font-size: calc(18px * var(--text-scale-factor));
}

#body-content h4 {
    font-size: calc(18px * var(--text-scale-factor));
}

#body-content h3 {
    font-size: calc(20px * var(--text-scale-factor));
}

#body-content h2 {
    font-size: calc(22px * var(--text-scale-factor));
}
#body-content h1 {
    font-size: calc(27px * var(--text-scale-factor));
}

#body-content h5,
#body-content h6 {
    font-style: italic;
}


#title-bar>h1 {
    margin: 0;
    user-select: none;
    flex-grow: 1;
    font-size: calc(30px * var(--text-scale-factor));
    -webkit-user-select: none;
}


.button-red i {
    color: var(--mdc-theme-error);
}

.tooltip {
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.6);
    color: white;
    font-size: calc(14px * var(--text-scale-factor));
    padding: calc(10px * var(--margin-scale-factor));
    z-index: 10;
    opacity: 0;
    pointer-events: none;
    box-sizing: border-box;
    text-align: center;
}

.no-elements-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.no-elements-container .material-symbols-rounded {
    font-size: calc(60px * var(--text-scale-factor));
    margin: calc(50px * var(--margin-scale-factor)) calc(20px * var(--margin-scale-factor)) calc(20px * var(--margin-scale-factor));

    font-variation-settings:
            'FILL' 0,
            'wght' 300,
            'GRAD' 0,
            'opsz' 48;
}

.no-elements-container .no-elements-desc {
    font-size: calc(20px * var(--text-scale-factor));
    font-weight: 300;
    margin: calc(20px * var(--margin-scale-factor));
    text-align: center;
}

.mdc-dialog {
    user-select: none;
    -webkit-user-select: none;
}

@media (max-width: 600px) {
    .mdc-switch__icon {
        display: none;
    }
}

@media (max-width: 650px) {
    :root {
        --text-scale-factor: 0.8;
        --margin-scale-factor: 0.8;
    }
}

.untranslated {
    background-color: red !important;
    outline: solid 2px red !important;
}

.translation-overridden {
    background-color: yellow !important;
    outline: solid 2px yellow !important;
}