:root {
    /* these colors are set from MainPanel with OrganisationSettings. Make them yellow so you know you have a --var when editing the css */
    --menu-foreground: yellow;
    --menu-over: yellow;
    --menu-selected: yellow;
    --notification-channel-color: yellow;
    --application-border-color: yellow;
}

body {
    font-size: 14px;
    font-family: Roboto, Arial, sans-serif;
}

.customTabButton,
.customTabButtonOver,
.customTabButtonDisabled,
.customTabButtonDown,
.customTabButtonSelected,
.customTabButtonSelectedDown,
.customTabButtonSelectedOver,
.customTabButtonSelectedDisabled,
.customTabButtonSelectedFocused,
.customTabButtonSelectedFocusedOver,
.customTabButtonSelectedFocusedDown,
.customTabButtonFocused,
.customTabButtonFocusedOver,
.customTabButtonFocusedDown {
    text-align: left;
    background-image: none;
    background-color: transparent;
    margin: unset;
    border: none;
    border-radius: 6px;
    padding-right: 9px;
    padding-top: 9px;
    padding-bottom: 9px;
    font-size: 14px;
    font-family: Roboto, Arial, sans-serif;
    color: var(--menu-foreground);
}

.customTabButtonOver {
    background-color: var(--menu-over);
}

.customTabButtonSelected,
.customTabButtonSelectedOver,
.customTabButtonSelectedFocused,
.customTabButtonSelectedFocusedOver,
.customTabButtonSelectedFocusedDown,
.customTabButtonDown,
.customTabButtonSelectedDown {
    background-color: var(--menu-selected);
    font-weight: bold;
}

.toolStrip {
    border: none;
}

.sectionHeaderopened, .sectionHeaderclosed {
    background: none;
}

.windowBackground {
    background: white none;
}

.toolStripButton, .toolStripButtonOver, .toolStripButtonFocused, .toolStripButtonFocusedOver, .toolStripButtonDown, .toolStripButtonFocusedDown, .toolStripButtonSelected, .toolStripButtonSelectedFocused, .toolStripButtonSelectedDown, .toolStripButtonSelectedFocusedDown, .toolStripButtonSelectedOver, .toolStripButtonSelectedFocusedOver, .toolStripButtonDisabled, .toolStripButtonSelectedDisabled, .toolStripButtonOpened, .toolStripButtonOverOpened, .toolStripButtonDownOpened, .toolStripButtonFocusedOpened, .toolStripButtonFocusedDownOpened, .toolStripButtonFocusedOverOpened, .toolStripButtonSelectedOpened, .toolStripButtonSelectedDownOpened, .toolStripButtonSelectedOverOpened {
    background-image: none;
    box-shadow: none;
}

.tabSetContainer, .windowBody {
    border: none;
}

.toggleSwitchThumbOff {
    background-color: #FFFFFF;
}

.applicationFrame {
    background: var(--application-border-color);
    scrollbar-width: none; /* Voor Firefox */
    -ms-overflow-style: none; /* Voor Internet Explorer en Edge */
    padding-right: 0;
}

.menuButtons::-webkit-scrollbar {
    display: none; /* Voor Webkit-browsers */
}

.menuCollapseOpened,
.menuCollapseClosed {
    background: #2c2c2c;
    display: inline-block;
    position: sticky;
    bottom: 0;
    right: -20px;
}

.menuCollapseClosed img {
    transform: rotate(0deg); /* Draait het icoon 180 graden bij hover */
    transition: transform 0.25s ease-in-out; /* Zorgt voor soepele animatie */
}

.menuCollapseOpened img {
    transition: transform 0.25s ease-in-out; /* Zorgt voor soepele animatie */
    transform: rotate(180deg); /* Terug naar 0 graden bij unhover */
}

.menuCollapseClosed:hover img {
    transform: rotate(180deg); /* Draait het icoon 180 graden bij hover */
}

.menuCollapseClosed:not(:hover) img {
    transform: rotate(0deg); /* Terug naar 0 graden bij unhover */
}

.menuCollapseOpened:hover img {
    transform: rotate(0deg); /* Draait het icoon 180 graden bij hover */
}

.menuCollapseOpened:not(:hover) img {
    transform: rotate(180deg); /* Terug naar 0 graden bij unhover */
}

.show_loading_text {
    position: absolute;
    top: 50%;
    left: 50%;
}

/* Selected font color of a picklist is default dark and not adjustable in skin, should be white for all current themes */
.pickListCellSelected, .pickListCellSelectedOver {
    color: white;
}

/* Firefox-specific fixes */
@-moz-document url-prefix() {
    /* fixes height of buttons on generated styles (works ok on default Tahoe, so maybe it is fixable in the style too) */
    div[role="button"] {
        height: auto !important;
    }
}