/*
 * START - Definition of colors.
 * If you change this part of the CSS-file you must also update
 * the admin-Layout file!
 * @cgusmini, 20.01.2015
 */
:root {
    --color-alpha: 1;
    --color-app-h: 196deg;
    --color-app-s: 84%;
    --color-app-l: 47%;
    --color-main-h: 0deg;
    --color-main-s: 0%;
    --color-main-l: 28%;
    --color-red-h: 8deg;
    --color-red-s: 61%;
    --color-red-l: 51%;
    --color-green-h: 128deg;
    --color-green-s: 50%;
    --color-green-l: 50%;
    --color-orange-h: 35deg;
    --color-orange-s: 100%;
    --color-orange-l: 50%;
}

* {
    --color-app: hsl(var(--color-app-h) var(--color-app-s) var(--color-app-l) / var(--color-alpha));
    --color-main: hsl(var(--color-main-h) var(--color-main-s) var(--color-main-l) / var(--color-alpha));
    --color-red: hsl(var(--color-red-h) var(--color-red-s) var(--color-red-l) / var(--color-alpha));
    --color-red-light: hsl(var(--color-red-h) var(--color-red-s) 60% / var(--color-alpha));
    --color-orange: hsl(var(--color-orange-h) var(--color-orange-s) var(--color-orange-l) / var(--color-alpha));
    --color-green: hsl(var(--color-green-h) var(--color-green-s) var(--color-green-l) / var(--color-alpha));
    --color-grey-light: hsl(0, 0%, 88%);
    --color-grey: hsl(0, 0%, 68%);
}

.colorBg {
    background: var(--color-app);
}

.colorBgRed {
    background: #ce4934;
}

.colorBgHover:hover {
    background: var(--color-app);
}

.colorBgImportant {
    background: var(--color-app) !important;
}

.colorBgRedImportant {
    background: #a53928 !important;
}

.colorFont,
.colorFont .icon {
    color: var(--color-app);
}

.colorFontHover:hover,
.colorFontHover:hover .icon {
    color: var(--color-app);
}

#mainLeftCol .colorFont .icon {
    color: var(--color-app);
}

.colorFontImportant {
    color: var(--color-app) !important;
}

.colorHover:hover,
.colorHover:hover .icon {
    color: var(--color-app);
}

.colorBorder,
#mainLeftCol .border {
    border-color: var(--color-app);
}

.colorBorderImportant {
    border-color: var(--color-app) !important;
}

.hasChange {
    --highlight-color: hsl(from var(--color-app) h s min(35, l));
    font-weight: bold;
    color: var(--highlight-color);

    .borderHelper {
        border-color: var(--color-app) !important;
    }

    :is(input, textarea):not(:focus) {
        font-weight: bold;
        color: var(--highlight-color);
    }

    input[type="checkbox"] {
        accent-color: var(--highlight-color);
    }

    .uiCheckBox .checkBoxLabel {
        font-weight: bold;
        color: var(--highlight-color);
    }

    .cke_top, .cke_contents {
        border-color: var(--highlight-color);
    }
}

.colorBgActive.active,
.colorBgSelected.selected,
.colorBgSelected.selected .icon {
    background: var(--color-app);
}

.colorFontSelected.selected,
.colorFontSelected.selected .icon {
    color: var(--color-app);
}

.iconButton.colorFontImportant {
    color: var(--color-app) !important;
}

input,
textarea {
    outline-color: var(--color-app);
}

.contextBox .arrowBg {
    border-color: var(--color-app);
}

.button:hover {
    background: var(--color-app);
}

/*
 * END - Definition of colors.
 */

.text-boring {
    color: currentColor !important;
}

.text-red {
    color: var(--color-red) !important;
}

.text-orange {
    color: var(--color-orange) !important;
}

.text-green {
    color: var(--color-green) !important;
}

.text-red-hover:hover {
    color: var(--color-red) !important;
}

.text-orange-hover:hover {
    color: var(--color-orange) !important;
}

.text-green-hover:hover {
    color: var(--color-green) !important;
}