/* QAPT.IO */

#app {
    --sidebar-background: transparent linear-gradient(180deg, #2222DE 0%, #582EF5 40%, #2C177B 100%) 0% 0% no-repeat padding-box;
    --sidebar-version-background: #002CFB;
    --breadcrumb-link-text-color: #002CFB;
    --button-primary-background-color: #002CFB;
    --button-primary-background-color-active: #6680FC;
    --button-primary-border-color: #002CFB;
    --button-primary-border-color-active: #6680FC;
    --button-solid-background-color: #FFFFFF;
    --button-solid-background-color-active: #002CFB;
    --button-solid-border-color: #002CFB;
    --button-solid-border-color-active: #002CFB;
    --button-solid-text-color: #002CFB;
    --checkbox-border-color: #6680FC;
    --checkbox-background-color: #FFFFFF;
    --checkbox-check-color: brightness(0) saturate(100%) invert(10%) sepia(98%) saturate(7390%) hue-rotate(238deg) brightness(94%) contrast(110%);
    --drag-clue-background-color: #6680FC;
    --drag-clue-border-color: #6680FC;
    --drag-clue-text-color: #FFFFFF;
    --loading-color: #002CFB;
    --menu-link-background-color-active: #002CFB;
    --menu-link-text-color-active: #FFFFFF;
    --navmenu-item-img-color: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(93deg) brightness(103%) contrast(103%);
    --navmenu-item-text-color: #FFFFFF;
    --navmenu-item-text-color-filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7500%) hue-rotate(19deg) brightness(102%) contrast(110%);
    --picker-text-color: #6680FC;
    --switch-disabled-background-color: #6680FC;
    --switch-disabled-border-color: #6680FC;
    --switch-enabled-background-color: #002CFB;
    --switch-enabled-border-color: #002CFB;
    --tabstrip-img-color-active: brightness(0) saturate(100%) invert(10%) sepia(98%) saturate(7390%) hue-rotate(238deg) brightness(94%) contrast(110%);
    --tabstrip-img-color-inactive: brightness(0) saturate(100%) invert(42%) sepia(95%) saturate(604%) hue-rotate(199deg) brightness(102%) contrast(98%);
    --tabstrip-text-color-active: #002CFB;
    --tabstrip-text-color-inactive: #6680FC;
}

.header-logo-component {
    content: url(./../images/logo_white.svg);
    margin-left: auto;
    margin-right: auto;
    display: block;
}

.loading-logo-component {
    content: url(./../images/logo.svg);
}

.login-failed-logo {
    content: url(./../images/logo_login_failed.svg);
}

.k-picker .k-button.k-icon-button,
.k-input .k-button.k-icon-button {
    border-color: var(--button-primary-border-color) !important;
    background-color: var(--button-primary-background-color) !important;
    border-width: 0px !important;
}

.k-picker .k-button.k-icon-button.k-active, .k-picker .k-button.k-icon-button:active,
.k-input .k-button.k-icon-button.k-active, .k-input .k-button.k-icon-button:active,
.k-picker .k-button.k-icon-button.k-active, .k-picker .k-button.k-icon-button:focus,
.k-input .k-button.k-icon-button.k-active, .k-input .k-button.k-icon-button:focus,
.k-picker .k-button.k-icon-button.k-active, .k-picker .k-button.k-icon-button:hover,
.k-input .k-button.k-icon-button.k-active, .k-input .k-button.k-icon-button:hover {
    border-color: var(--button-primary-border-color-active) !important;
    background-color: var(--button-primary-background-color-active) !important;
    border-width: 0px !important;
}

.k-button-solid-primary {
    font-family: 'Montserrat', Helvetica, Arial, sans-serif !important;
    border-color: var(--button-primary-border-color) !important;
    background-color: var(--button-primary-background-color) !important;
}

.k-button-solid-primary:active,
.k-button-solid-primary.k-active {
    border-color: var(--button-primary-border-color) !important;
    background-color: var(--button-primary-background-color) !important;
    box-shadow: none !important;
}

.k-button-solid-base {
    font-family: 'Montserrat', Helvetica, Arial, sans-serif !important;
    font-weight: 400 !important;
    border-color: var(--button-solid-border-color) !important;
    background-color: var(--button-solid-background-color) !important;
    color: var(--button-solid-text-color) !important;
}

.k-button-solid-base.k-selected,
.k-button-solid-base:active,
.k-button-solid-base.k-active {
    border-color: var(--button-solid-border-color-active) !important;
    box-shadow: none !important;
    background-color: var(--button-solid-background-color-active) !important;
    color: #ffffff !important;
}

.k-checkbox.k-rounded-md {
    border-color: var(--checkbox-border-color) !important;
    border-width: 2px !important;
    border-radius: 6px !important;
    background-color: var(--checkbox-background-color) !important;
    height: 20px !important;
    width: 20px !important;
}

/*.k-checkbox.k-rounded-md:checked {
    filter: var(--checkbox-check-color) !important;
}*/

.k-pager-numbers-wrap .k-pager-numbers .k-button.k-selected {
    color: #ffffff !important;
    background-color: var(--button-primary-background-color-active) !important;
    border-color: var(--button-primary-border-color-active) !important;
}

.k-datetimepicker-popup .k-datetime-calendar-wrap .k-calendar-header .k-calendar-title {
    color: var(--picker-text-color) !important;
    font-weight: 500;
    font-family: 'Montserrat', Helvetica, Arial, sans-serif !important;
}

.k-datetimepicker-popup .k-datetime-calendar-wrap .k-calendar-header .k-calendar-nav .k-button {
    color: var(--picker-text-color) !important;
    font-weight: 500;
    font-family: 'Montserrat', Helvetica, Arial, sans-serif !important;
}

.k-tabstrip-items .k-active .k-link {
    color: var(--tabstrip-text-color-active) !important;
}

.k-tabstrip-items .k-state-default .k-link {
    color: var(--tabstrip-text-color-inactive) !important;
}

.k-tabstrip-items .k-active .k-link img {
    filter: var(--tabstrip-img-color-active) !important;
}

.k-tabstrip-items .k-state-default .k-link img {
    filter: var(--tabstrip-img-color-inactive) !important;
}

.loading-color,
.k-loader-primary {
    color: var(--loading-color) !important;
}

.k-breadcrumb-root-link,
.k-breadcrumb-link {
    color: var(--breadcrumb-link-text-color) !important;
    text-decoration: none !important;
}

.k-switch-on .k-switch-track {
    background-color: var(--switch-enabled-background-color) !important;
    border-color: var(--switch-enabled-border-color) !important;
}

.k-switch-on:disabled .k-switch-track,
.k-switch-on.k-disabled .k-switch-track {
    background-color: var(--switch-disabled-background-color) !important;
    border-color: var(--switch-disabled-border-color) !important;
}

.k-menu-group .k-item > .k-link:active,
.k-menu-group .k-item > .k-link.k-active,
.k-menu-group .k-item > .k-link.k-selected,
.k-menu.k-context-menu .k-item > .k-link:active,
.k-menu.k-context-menu .k-item > .k-link.k-active,
.k-menu.k-context-menu .k-item > .k-link.k-selected {
    color: var(--menu-link-text-color-active) !important;
    background-color: var(--menu-link-background-color-active) !important;
}

.k-drag-clue {
    /* border-color: var(--drag-clue-border-color) !important; */
    /* color: var(--drag-clue-text-color); !important; */
    /* background-color: var(--drag-clue-background-color) !important; */
}

.sidebar nav .nav-item .nav-menu-item-icon img {
    filter: var(--navmenu-item-img-color) !important;
}

.sidebar nav .nav-item .nav-menu-item-icon .nav-link-label {
    filter: var(--navmenu-item-text-color) !important;
}

.k-spinner-increase.k-button.k-icon-button.k-button-solid.k-button-solid-base > .k-button-icon.k-icon.k-svg-icon,
.k-spinner-decrease.k-button.k-icon-button.k-button-solid.k-button-solid-base > .k-button-icon.k-icon.k-svg-icon,
.k-input-button.k-button-solid.k-button-solid-base > .k-button-icon.k-icon.k-svg-icon {
    filter: var(--navmenu-item-text-color-filter) !important;
}

.k-checkbox.k-rounded-md:checked,
.k-checkbox.k-rounded-md.k-checked {
    background-image: url(../images/check.svg) !important;
    background-size: 75%;
}