/************************************/
/*    GANTT                         */
/************************************/

/* "open gantt" button */
.cplace-projektplanung-open-gantt-diagram {
    padding: 20px;
    width: 100%;
    font-size: 1.25em;
    font-weight: 700;
    color: var(--surface-0);
    background: radial-gradient(black, var(--brand-primary));
    background-size: 500% 500%;
    transition: all .5s ease-in-out !important;
}

.cplace-projektplanung-open-gantt-diagram:hover {
    color: var(--surface-0);
    background-size: 100% 100%;
}


.x-grid-inner-locked .x-grid-item:not(.x-grid-item-selected) .cplace-gantt-customtype-cf-timebox.tricia-taskkind-readonly .x-grid-cell,
.cf-gantt-diagram .cplace-gantt-customtype-cf-timebox,
.sch-ganttpanel .cplace-gantt-customtype-cf-timebox,
.x-menu .cplace-gantt-customtype-cf-timebox,
.sch-gantt-column-dragdropx-unselectable {
    background: linear-gradient(to bottom, var(--surface-0) 22px, var(--surface-200) 22px);
    color: var(--brand-primary);
    font-weight: 700
}

.cf-gantt-diagram .cplace-gantt-customtype-cf-timebox-content,
.sch-ganttpanel .cplace-gantt-customtype-cf-timebox-content,
.x-menu .cplace-gantt-customtype-cf-timebox-content,
.x-grid-inner-locked .x-grid-item:not(.x-grid-item-selected) .cplace-gantt-customtype-cf-timebox-content.tricia-taskkind-readonly .x-grid-cell {
    background: var(--surface-0)
}


/* GANTT */
.cplace-gantt-container .my-toolbar .x-btn:hover,
.cplace-gantt-container .my-toolbar .x-btn.x-btn-menu-active,
.cplace-gantt-container .my-toolbar .x-btn.x-btn-pressed {
    background-color: var(--brand-primary);
}

.cplace-gantt-container .my-toolbar,
.cplace-gantt-container .my-toolbar .x-btn,
.cplace-gantt-container .my-toolbar .x-btn.x-btn-disabled,
.cplace-gantt-container .my-toolbar .x-form-item-body.x-form-item-body-default.x-field-body.x-field-body-default.x-slider-ct-horz:hover {
    background: white;
}

.cplace-gantt-container .my-toolbar .x-form-item-body.x-form-item-body-default.x-field-body.x-field-body-default.x-slider-ct-horz:hover .x-slider-thumb::before {
    background-color: var(--brand-primary);
    color: white !important;
    cursor: pointer;
}


.cplace-gantt-container .my-toolbar .x-btn.x-item-disabled:hover .x-btn-noicon,
.cplace-gantt-container .my-toolbar .x-btn.x-item-disabled.x-btn-menu-active .x-btn-noicon,
.cplace-gantt-container .my-toolbar .x-btn.x-item-disabled.x-btn-pressed .x-btn-noicon,
.cplace-gantt-container .my-toolbar .x-btn.x-item-disabled:hover .x-btn-inner,
.cplace-gantt-container .my-toolbar .x-btn.x-item-disabled.x-btn-menu-active .x-btn-inner,
.cplace-gantt-container .my-toolbar .x-btn.x-item-disabled.x-btn-pressed .x-btn-inner,
.cplace-gantt-container .my-toolbar .x-btn.x-item-disabled:hover .icon,
.cplace-gantt-container .my-toolbar .x-btn.x-item-disabled.x-btn-menu-active .icon,
.cplace-gantt-container .my-toolbar .x-btn.x-item-disabled.x-btn-pressed .icon {
    color: var(--brand-primary) !important;
}


.cplace-gantt-container .my-toolbar .x-btn.x-btn-pressed {
    background-color: var(--brand-primary);
}

.cplace-gantt-container .my-toolbar .x-btn.x-btn-menu-active .x-btn-noicon,
.cplace-gantt-container .my-toolbar .x-btn.x-btn-menu-active .x-btn-inner,
.cplace-gantt-container .my-toolbar .x-btn.x-btn-menu-active .icon,
.cplace-gantt-container .my-toolbar .x-btn.x-btn-pressed .icon 
.cplace-gantt-container .my-toolbar .x-btn.x-btn-pressed .x-btn-inner,
.cplace-gantt-container .my-toolbar .x-btn.x-btn-pressed .x-btn-noicon{
    color: white !important;
}

.cplace-simple-tree .cplace-simple-tree-node-wrapper:hover {
    background-color: #fff;
    color: var(--brand-primary);
}

.cplace-gantt-container .x-column-header-over, .cplace-gantt-container .x-column-header-open,
.cplace-gantt-container .x-column-header-over, .cplace-gantt-container .x-column-header-open .x-column-header-trigger{
    color: var(--brand-primary);
    box-shadow: none;
    background-color: #fff !important;
    cursor:pointer;
}


.cplace-gantt-container .x-column-header-over .x-column-header-trigger, 
.cplace-gantt-container .x-column-header-open .x-column-header-trigger{
    background:none;
    display:flex;
    align-items: center;
    justify-content: center;
}

.cplace-gantt-container .x-column-header-over .x-column-header-trigger::after, 
.cplace-gantt-container .x-column-header-open .x-column-header-trigger::after{
    content:'▼';
    font-size:.6rem;
}

/* PG preview */
body.cf-cplace-ppt-export-configurator .section-right-header .preview-state .preview-up-to-date {
    background-color: var(--brand-primary);
    color: var(--brand-secondary);
}
button.btn.btn-pg-sidebar.btn-block {
    color: var(--brand-primary) !important;
}

body.cf-cplace-ppt-export-configurator .content-all .sidebar .btn-pg-sidebar:active, 
body.cf-cplace-ppt-export-configurator .content-all .sidebar .btn-pg-sidebar.active, 
.open>.dropdown-togglebody.cf-cplace-ppt-export-configurator .content-all .sidebar .btn-pg-sidebar,
body.cf-cplace-ppt-export-configurator .content-all .sidebar .btn-pg-sidebar:focus,
body.cf-cplace-ppt-export-configurator .content-all .sidebar .btn-pg-sidebar.active:focus{
    background-color: var(--brand-primary);
    border-color: var(--brand-primary) !important;
    color: #fff !important;
}


body.cf-cplace-ppt-export-configurator .btn-default:hover,
body.cf-cplace-ppt-export-configurator section.collapsable-section header:hover {
    color: var(--brand-primary);
}

i.fa.fa-fw.fa-2x.preview-outdated::before {
    content: "\f06a";
}

/************************************/
/*    PAGE STYLE + WIDGETS          */
/************************************/

/* add a shadow to widgets */
.jarviswidget {
    box-shadow: 1px 1px 7px 1px #acacac;
    border: 0;
}

/* creates a ribbon at the bottom right, marking a dev installation */
#cplace-footer:after {
    content: attr(data-instance);
    position: fixed;
    right: -30px;
    width: 150px;
    bottom: 24px;
    background-color: var(--brand-secondary);
    filter: invert(1);
    transform: rotate(-45deg);
    color: var(--text-color);
    font-size: 16px;
    font-weight: 600
}

/* Styling for the "Generate report" widget button */
.generate-report-widget a.btn.btn-primary {
    padding: 20px;
    width: 100%;
    font-size: 1.25em;
    color: var(--brand-primary);
    font-weight: 700;
    background-color: var(--surface-0);
}

.generate-report-widget a.btn.btn-primary:hover {
    color: var(--l-nav-tnb-button-text-active-color);
    background-color: var(--surface-0);
}

/* Styling for the simple headlinge widget */
.cplace-page-view-alternative-headline {
    background: #fff;
    border-left: var(--widget-border-radius) solid var(--brand-primary);
    margin: 24px 0 32px;
    border-radius: 0
}

.cplace-page-view-alternative-headline .icon {
    display: none
}

.cplace-page-view-alternative-headline h1 {
    text-shadow: none;
    color: var(--l-nav-tnb-button-text-active-color);
    font-family: var(--font-family-sans-serif), sans-serif;
    left: 10px;
    font-size: 32px;
    font-weight: 400;
    padding: 0 10px 4px 0
}

.cplace-page-view-alternative-headline h2 {
    text-shadow: none;
    font-family: var(--font-family-sans-serif), sans-serif;
    color: var(--brand-primary);
    opacity: .75;
    left: 10px;
    font-size: 14px;
    font-weight: 400
}

/* Left side menu styling */
#hui-workspace-menu #hui-workspace-menu-content {
    background-image: var(--asset-workspace-menu-bgpng);
    background-position: bottom right;
    background-repeat: no-repeat
}

/* change color of header to secondary color */
hui-content-header .hui-content-header {
    background: var(--title-bar-bg-color);
    border-bottom: 1px solid var(--title-bar-bg-color);
}

/* add shadow to left side menu */
#hui-workspace-menu {
    box-shadow: 0 0 8px #acacac;
}

/* always use same bg color in matrix */
.cf-cplace-connected-matrix table tr td {
    background-color: inherit;
}

hui-content-header .hui-content-header .hui-ch-content-section .hui-ch-content-context-divider{
    background:#fff;
}

/* styles for overview image widget */

.cf-cplace-drag-and-drop-image-with-text-and-list-image.horizontal {
    background-position: bottom left;
    background-repeat: no-repeat;
}

.cf-cplace-drag-and-drop-image-with-text-and-list-view .cf-cplace-drag-and-drop-image-with-text-and-list-list li {
    background: none;
}

.cf-cplace-drag-and-drop-image-with-text-and-list-view .cf-cplace-drag-and-drop-image-with-text-and-list-list li a {
    background: linear-gradient(90deg, var(--brand-secondary) 0%, var(--brand-primary) 50%, var(--brand-primary) 100%) !important;
    border-radius: var(--widget-border-radius);
    color: #fff;
    background-size: 200% 100% !important;
    transition: all .5s;
    background-position: center right !important;
}

.cf-cplace-drag-and-drop-image-with-text-and-list-view .cf-cplace-drag-and-drop-image-with-text-and-list-list li a > i{
    pointer-events: none;
}

.cf-cplace-drag-and-drop-image-with-text-and-list-view .cf-cplace-drag-and-drop-image-with-text-and-list-list li a:hover {
    background-size: 100% 100% !important;
}

/* WIDGET task buttons */
.jarviswidget>header .jarviswidget-ctrls {
    transition: .5s all;
}

.jarviswidget>header .jarviswidget-ctrls i {
    color: var(--brand-primary);
}

.jarviswidget>header .jarviswidget-ctrls a.button-icon{
    background-color: var(--surface-100);
    border-radius:100%;
    transform:scale(.70);
}

.jarviswidget>header .jarviswidget-ctrls a.button-icon:not(:last-child) {
    border-right: 1px solid var(surface-0);
}

.jarviswidget>header .jarviswidget-ctrls a.button-icon:hover {
    background-color: var(--brand-secondary);
}

.jarviswidget>header{
    border-bottom:0;
}

/************************************/
/*    DASHBOARD                     */
/************************************/

/* dashboard card */

.glossy-card {
    background: var(--brand-primary);
    /*could add alpha-channel here, if color is specified as rgb instead of hex */
    border-radius: var(--widget-border-radius);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(7.7px);
    -webkit-backdrop-filter: blur(7.7px);
    border: 1px solid rgba(176, 11, 19, 0.1);
    padding: 1em;
    display: flex;
    flex-direction: column;
    padding-bottom: .5em;

    background-image: var(--asset-workspace-menu-bgpng);
    background-position: right top;
    background-size: 50%;
    background-repeat: no-repeat;
    box-shadow: 1px 1px 7px 1px #acacac; 
}


.glossy-card small {
    font-weight: bold;
    color: white;
}

.glossy-card .number.count-up {
    font-size: 2em;
    margin-bottom: 1em;
    width: 100%;
    text-align: right;
    color: white;
}