/* global colors */
/* #60c5d7 */
:root {
    --q-accent-color: #50bbf0;
    --q-accent-color-2: #76d760;
    --q-accent-color-3: #fb9494;
    --q-reject-click-bg: #cd4d4d;
    --q-reject-click-border: #780202;
    --q-border-color: #111111;
    --q-toggled-border-color: black;
    --q-text-color: #222222;
    --q-toolbar-text-color: #DDDDDD;
    --q-window-color: #d5d0c3;
    --q-toolbar-color: rgb(57, 24, 0);
}

.main-window {
    background-color: var(--q-window-color);
    
    border-radius: 20px;
    
    border-color: var(--q-border-color);
    border-width: 3px;
    border-style: solid;
    box-shadow: inset 0px -1px 10px rgba(0, 0, 0, 0.5);
}

/* default QButton */
.q-button-default {
    border-color: var(--q-border-color);
    border-width: 1px;
    border-style: solid;
    border-radius: 12px; 
     
    
    background-color: var(--q-accent-color);
    padding: 5px 10px;
    font-size: 18px;
    font-weight: bold;
    color: var(--q-text-color);
    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.4);
}
.q-button-default:hover {
    background-color: color-mix(in srgb, var(--q-accent-color), white 20%);
    cursor: pointer;
    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.4);
}
.q-button-default:active {
    background-color: color-mix(in srgb, var(--q-accent-color), black 35%);
    box-shadow: inset 0px -1px 10px rgba(0, 0, 0, 0.5);
}
.q-button-default.toggled {
    background-color: color-mix(in srgb, var(--q-accent-color), black 30%);
    border-color: var(--q-toggled-border-color);
    color: var(--q-toggled-border-color);
    box-shadow: inset 0px -1px 10px rgba(0, 0, 0, 0.5);
}
.q-button-default.toggled:hover {
    background-color: color-mix(in srgb, var(--q-accent-color), black 25%);
    cursor: pointer;
    box-shadow: inset 0px -1px 10px rgba(0, 0, 0, 0.5);
}
.q-button-default.toggled:active {
    background-color: color-mix(in srgb, var(--q-accent-color), black 35%);
    box-shadow: inset 0px -1px 10px rgba(0, 0, 0, 0.5);
}

/* main menu QButton */
.q-button-main-menu {
    border-color: var(--q-border-color);
    border-width: 2px;
    border-style: solid;
    border-radius: 9px;
    
    
    background-color: var(--q-accent-color-2);
    padding: 15px 30px;
    font-size: 28px;
    font-weight: bold;
    color: var(--q-text-color);
    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.4);
}
.q-button-main-menu:hover {
    background-color: color-mix(in srgb, var(--q-accent-color-2), white 20%);
    cursor: pointer;
    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.4);
}
.q-button-main-menu:active {
    background-color: color-mix(in srgb, var(--q-accent-color-2), black 35%);
    box-shadow: inset 0px -1px 10px rgba(0, 0, 0, 0.5);
}
.q-button-main-menu.toggled {
    background-color: color-mix(in srgb, var(--q-accent-color-2), black 30%);
    border-color: var(--q-toggled-border-color);
    color: var(--q-toggled-border-color);
    box-shadow: inset 0px -1px 10px rgba(0, 0, 0, 0.5);
}
.q-button-main-menu.toggled:hover {
    background-color: color-mix(in srgb, var(--q-accent-color-2), black 25%);
    cursor: pointer;
    box-shadow: inset 0px -1px 10px rgba(0, 0, 0, 0.5);
}
.q-button-main-menu.toggled:active {
    background-color: color-mix(in srgb, var(--q-accent-color-2), black 35%);
    box-shadow: inset 0px -1px 10px rgba(0, 0, 0, 0.5);
}

/* round QButton */
.q-button-round {
    border-color: var(--q-border-color);
    border-width: 1px;
    border-style: solid;
    
    border-radius: 50em;
    
    background-color: var(--q-accent-color-3);
    padding: 0px;
    font-size: 24px;
    font-weight: bold;
    color: var(--q-text-color);
    min-width: 45px;
    min-height: 45px;
    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.4);
}
.q-button-round:hover {
    background-color: color-mix(in srgb, var(--q-accent-color-3), white 20%);
    cursor: pointer;
    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.4);
}
.q-button-round:active {
    background-color: color-mix(in srgb, var(--q-accent-color-3), black 35%);
    box-shadow: inset 0px -1px 10px rgba(0, 0, 0, 0.5);
}
.q-button-round.toggled {
    background-color: color-mix(in srgb, var(--q-accent-color-3), black 30%);
    border-color: var(--q-toggled-border-color);
    color: var(--q-toggled-border-color);
    box-shadow: inset 0px -1px 10px rgba(0, 0, 0, 0.5);
}
.q-button-round.toggled:hover {
    background-color: color-mix(in srgb, var(--q-accent-color-3), black 25%);
    cursor: pointer;
    box-shadow: inset 0px -1px 10px rgba(0, 0, 0, 0.5);
}
.q-button-round.toggled:active {
    background-color: color-mix(in srgb, var(--q-accent-color-3), black 35%);
    box-shadow: inset 0px -1px 10px rgba(0, 0, 0, 0.5);
}

/* toolbar QButton */
.q-button-toolbar {
    background-color: transparent;
    border-width: 0px;
    border-style: solid;
    
    padding: 5px 15px;
    font-size: 16px;
    color: var(--q-text-color);
}
.q-button-toolbar:hover {
    background-color: color-mix(in srgb, var(--q-window-color), black 10%);
    cursor: pointer;
}
.q-button-toolbar:active {
    background-color: color-mix(in srgb, var(--q-window-color), black 20%);
    box-shadow: inset 0px -1px 10px rgba(0, 0, 0, 0.4);
}
.q-button-toolbar.toggled {
    background-color: color-mix(in srgb, var(--q-window-color), black 15%);
    color: var(--q-toggled-border-color);
    box-shadow: inset 0px -1px 10px rgba(0, 0, 0, 0.2);
}
.q-button-toolbar.toggled:hover {
    background-color: color-mix(in srgb, var(--q-window-color), black 20%);
    cursor: pointer;
    box-shadow: inset 0px -1px 10px rgba(0, 0, 0, 0.2);
}
.q-button-toolbar.toggled:active {
    background-color: color-mix(in srgb, var(--q-window-color), black 30%);
    box-shadow: inset 0px -1px 10px rgba(0, 0, 0, 0.5);
}

/* default QDropDownMenu */
.q-dropdown-menu-default {
    border-color: var(--q-border-color);
    border-width: 1px;
    border-style: solid;
    border-radius: 12px;
    
    
    background-color: var(--q-accent-color);
    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.4);
}
.q-dropdown-menu-default:hover {
    background-color: color-mix(in srgb, var(--q-accent-color), white 20%);
    cursor: pointer;
}
.q-dropdown-menu-default:active {
    background-color: color-mix(in srgb, var(--q-accent-color), black 30%);
    box-shadow: inset 0px -1px 10px rgba(0, 0, 0, 0.5);
}
.q-dropdown-menu-default.showing {
    background-color: color-mix(in srgb, var(--q-accent-color), black 30%);
    box-shadow: inset 0px -1px 10px rgba(0, 0, 0, 0.5);
}
.q-dropdown-menu-default.showing:hover {
    background-color: color-mix(in srgb, var(--q-accent-color), black 25%);
    cursor: pointer;
}
.q-dropdown-menu-default > .list-cell {
    padding: 5px 10px;
    font-size: 18px;
    font-weight: bold;
    color: var(--q-text-color);
    background-color: transparent;
}
.q-dropdown-menu-default > .arrow-button {
    background-color: transparent;
    padding: 0px 15px 0px 0px;
}
.q-dropdown-menu-default > .arrow-button > .arrow {
    background-color: var(--q-text-color);
    font-size: 20px;
}
.q-dropdown-menu-default .list-view {
    background-color: var(--q-accent-color);
    border-color: var(--q-border-color);
    border-width: 1px;
    border-style: solid;
    border-radius: 12px;
    
    
    padding: 5px;
    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.4);
}
.q-dropdown-menu-default .list-view .list-cell {
    font-size: 16px;
    font-weight: bold;
    color: var(--q-text-color);
    padding: 5px 10px;
    background-color: transparent;
    
}
.q-dropdown-menu-default .list-view .list-cell:hover {
    background-color: color-mix(in srgb, var(--q-accent-color), white 20%);
    cursor: pointer;
}
.q-dropdown-menu-default .list-view .list-cell.selected {
    background-color: color-mix(in srgb, var(--q-accent-color), black 30%);
    color: var(--q-toggled-border-color);
}
.q-dropdown-menu-default .list-view .list-cell.selected:hover {
    background-color: color-mix(in srgb, var(--q-accent-color), black 25%);
    cursor: pointer;
}

/* default QScrollBar (not a java object) */
.scroll-bar {
    background-color: transparent;
    padding: 3px;
}
.scroll-bar .track {
    background-color: color-mix(in srgb, var(--q-accent-color), white 15%);
    
    border-width: 1px;
    border-style: solid;
    border-radius: 8px;
}
.scroll-bar .thumb {
    background-color: color-mix(in srgb, var(--q-border-color), white 20%);
    
    
    border-color: var(--q-border-color);
    border-width: 1px;
    border-style: solid; 
    border-radius: 8px;
    width: 5px;
}
.scroll-bar .thumb:hover {
    cursor: pointer;
    background-color: color-mix(in srgb, var(--q-border-color), white 40%);
}
.scroll-bar .increment-button, .scroll-bar .decrement-button {
    background-color: transparent;
    height: 0px;
}
.scroll-bar .increment-arrow, .scroll-bar .decrement-arrow {
    background-color: transparent;
    height: 0px;
}

/* QToolBar (inner class of QWindow) */
.q-toolbar {
    background-color: color-mix(in srgb, var(--q-accent-color), black 20%);
    
    padding: 10px 10px 10px 20px;
    border-color: var(--q-border-color);
    border-width: 0 0 1px 0;
    border-style: solid;
}
.q-toolbar-title {
    color: var(--q-toolbar-text-color);
    font-weight: bold;
    font-size: 32px;
    box-shadow: 0px 2px 10px rgba(0, 0, 0, 1);
}
.q-toolbar-button-box {
    background-color: var(--q-window-color);
    border-color: var(--q-border-color);
    border-width: 1px;
    border-style: solid;
    border-radius: 6px;
    
    
    padding: 2px 4px 2px 4px;
    
    box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.4);
}