:root 
{
    --main-bg-color-matrix: white;
    --main-color-matrix: black;
    --main-border-color-matrix: grey;
    --active-bg-color-matrix: brown;
    --active-color-matrix: black;
}
.matrixAppointment .e-grid,
.matrixResource .e-grid
{
    border: none;
}

.matrixAppointment .e-grid .e-headercell, .matrixAppointment .e-grid .e-detailheadercell,
.matrixResource .e-grid .e-headercell, .matrixResource .e-grid .e-detailheadercell {
    /* overflow: unset; resizing nicht möglich */
    padding: 0px !important;
}

.matrixAppointment .e-grid .e-rowcell:first-child,
.matrixResource .e-grid .e-rowcell:first-child{
    padding-left: 0px !important;
}

/* immer scrollbar auf x-Ebene anzeigen */
.matrixAppointment .e-content,
.matrixResource .e-content{
    overflow-x: scroll !important;
}

/* extra Klasse zum drehen des Textes */
.matrixAppointment.e-treegrid .e-headercell.orientationCSS div,
.matrixResource.e-treegrid .e-headercell.orientationCSS div{
    writing-mode: vertical-rl;
    margin: 0;
    position: absolute;
    /* top: 50%; */
    top: 10%;
    left: 50%;
    transform: translate(-50%, -50%);

    /* writing-mode: vertical-rl;
    transform: rotate(-180deg);
    margin: 0;
    position: absolute;
    top: 88%;
    right: -28%; */
}

.matrixAppointment.e-treegrid .e-checkbox-wrapper .e-label, 
.matrixResource.e-treegrid .e-checkbox-wrapper .e-label, 
.matrixAppointment.e-treegrid .e-css.e-checkbox-wrapper .e-label,
.matrixResource.e-treegrid .e-css.e-checkbox-wrapper .e-label {
    margin-left: 0px;
}

.matrixAppointment .e-grid.e-responsive .e-rowcell, .matrixAppointment .e-grid.e-responsive .e-headercelldiv,
.matrixResource .e-grid.e-responsive .e-rowcell, .matrixResource .e-grid.e-responsive .e-headercelldiv {
    text-overflow: clip;
}

/* volle Textanzeige der Überschriften */
.matrixAppointment .e-grid .e-headercelldiv,
.matrixResource .e-grid .e-headercelldiv {
    overflow: unset !important;
}

/* bei focus auf eine Zeile */
.matrixAppointment .e-grid td.e-active, .matrixAppointment .e-grid td.e-active .e-treecell,
.matrixResource .e-grid td.e-active, .matrixResource .e-grid td.e-active .e-treecell {
    background: var(--active-bg-color-matrix) !important;
    color: var(--active-color-matrix) !important;
}

/* alle Zellen (außer Headerzellen) immer auf eine gleiche Größe setzen */
.matrixAppointment .e-grid.e-bothlines .e-rowcell,
.matrixResource .e-grid.e-bothlines .e-rowcell {
    height: 36.8px !important;/* height: 10px !important; */
    padding: 3px 3px;
    text-align: center;
}

.matrixAppointment .e-control *,
.matrixResource .e-control * {
	color: var(--main-color-matrix) !important; 
	border-color: var(--main-border-color-matrix) !important;
}

.matrixAppointment .e-grid .e-gridheader tr:first-child th,
.matrixResource .e-grid .e-gridheader tr:first-child th
{
    background-color: var(--main-bg-color-matrix);
}

.matrixAppointment .e-grid .e-gridheader,
.matrixResource .e-grid .e-gridheader
{
    background-color: var(--main-bg-color-matrix);
}

.matrixAppointment tr,
.matrixResource tr
{
    background-color: var(--main-bg-color-matrix);
}

.matrixAppointment .e-checkbox-wrapper.e-checkbox-disabled .e-frame.e-check, .matrixAppointment .e-css.e-checkbox-wrapper.e-checkbox-disabled .e-frame.e-check,
.matrixResource .e-checkbox-wrapper.e-checkbox-disabled .e-frame.e-check, .matrixResource .e-css.e-checkbox-wrapper.e-checkbox-disabled .e-frame.e-check
{
    background-color: var(--main-bg-color-matrix);
}

.matrixAppointment .e-checkbox-wrapper.e-checkbox-disabled .e-frame, .matrixAppointment .e-css.e-checkbox-wrapper.e-checkbox-disabled .e-frame,
.matrixResource .e-checkbox-wrapper.e-checkbox-disabled .e-frame, .matrixResource .e-css.e-checkbox-wrapper.e-checkbox-disabled .e-frame
{
    background-color: var(--main-bg-color-matrix);
}

.matrixAppointment .e-table .e-inline-edit,
.matrixResource .e-table .e-inline-edit {
    outline: auto;
}
.matrixAppointment .e-checkbox-wrapper .e-checkbox:focus+.e-frame.e-check, .matrixAppointment .e-css.e-checkbox-wrapper .e-checkbox:focus+.e-frame.e-check,
.matrixResource .e-checkbox-wrapper .e-checkbox:focus+.e-frame.e-check, .matrixResource .e-css.e-checkbox-wrapper .e-checkbox:focus+.e-frame.e-check {
    background-color: var(--main-bg-color-matrix);
}

.matrixAppointment .e-contextmenu-wrapper ul .e-menu-item.e-selected, .matrixAppointment .e-contextmenu-container ul .e-menu-item.e-selected, .matrixAppointment .e-contextmenu-wrapper ul .e-menu-item.e-focused, .matrixAppointment .e-contextmenu-container ul .e-menu-item.e-focused,
.matrixResource .e-contextmenu-wrapper ul .e-menu-item.e-selected, .matrixResource .e-contextmenu-container ul .e-menu-item.e-selected, .matrixAppointment .e-contextmenu-wrapper ul .e-menu-item.e-focused, .matrixAppointment .e-contextmenu-container ul .e-menu-item.e-focused{
    background-color: #eee !important;
    color: rgba(0,0,0,0.87) !important;
}

.matrixAppointment .e-contextmenu-wrapper ul .e-menu-item, .matrixAppointment .e-contextmenu-container ul .e-menu-item,
.matrixResource .e-contextmenu-wrapper ul .e-menu-item, .matrixResource .e-contextmenu-container ul .e-menu-item
{
    background-color: white !important;
    color: rgba(0,0,0,0.87) !important;
}
/*scrollbar*/
/*
::-webkit-scrollbar-track
{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.6);
    box-shadow: inset 0 0 6px rgba(0,0,0,0.6);
	background-color: #00bf00;
}
::-webkit-scrollbar
{
	background-color: #F5F5F5;
}
::-webkit-scrollbar-thumb
{
    background-color: #33af3a;
	background-image: -webkit-linear-gradient(90deg,
	                                          rgba(0, 0, 0, 1) 0%,
											  rgba(0, 0, 0, 1) 25%,
											  transparent 100%,
											  rgba(0, 0, 0, 1) 75%,
											  transparent)
}
::-webkit-scrollbar-corner {
    background: #094f00;
} */
/* toolbar */
.matrixAppointment .e-toolbar .e-tbar-btn,
.matrixResource .e-toolbar .e-tbar-btn {
    background: var(--main-bg-color-matrix);
    color: var(--main-fg-color-matrix);
}

.matrixAppointment .e-toolbar .e-tbar-btn:active, .matrixAppointment .e-toolbar .e-tbar-btn:hover,
.matrixResource .e-toolbar .e-tbar-btn:active, .matrixResource .e-toolbar .e-tbar-btn:hover {
    background: var(--active-bg-color-matrix);
    border-color: var(--active-color-matrix);
}

.matrixAppointment .e-toolbar .e-toolbar-items.e-tbar-pos,
.matrixResource .e-toolbar .e-toolbar-items.e-tbar-pos {
    background-color: var(--main-bg-color-matrix);
}

.matrixAppointment .e-checkbox-wrapper .e-frame.e-check, .matrixAppointment .e-css.e-checkbox-wrapper .e-frame.e-check,
.matrixResource .e-checkbox-wrapper .e-frame.e-check, .matrixResource .e-css.e-checkbox-wrapper .e-frame.e-check
{
    background-color: var(--main-bg-color-matrix);
}

.matrixAppointment .e-checkbox-wrapper:hover .e-frame.e-check, .matrixAppointment .e-css.e-checkbox-wrapper:hover .e-frame.e-check,
.matrixResource .e-checkbox-wrapper:hover .e-frame.e-check, .matrixResource .e-css.e-checkbox-wrapper:hover .e-frame.e-check {
    background-color: var(--main-bg-color-matrix);
}

.matrixAppointment .e-checkbox-wrapper:hover .e-label, .matrixAppointment .e-css.e-checkbox-wrapper:hover .e-label,
.matrixResource .e-checkbox-wrapper:hover .e-label, .matrixResource .e-css.e-checkbox-wrapper:hover .e-label {
    opacity: 0.7;
}

.matrixAppointment .e-dialog, .e-dialog .e-dlg-header-content, .matrixAppointment .e-dialog .e-dlg-content, .matrixAppointment .e-grid .e-ccdlg .e-footer-content,
.matrixResource .e-dialog, .e-dialog .e-dlg-header-content, .matrixResource .e-dialog .e-dlg-content, .matrixResource .e-grid .e-ccdlg .e-footer-content {
    background-color: var(--main-bg-color-matrix);
}

.matrixAppointment .e-input-group:not(.e-float-icon-left):not(.e-float-input)::before, .matrixAppointment .e-input-group:not(.e-float-icon-left):not(.e-float-input)::after, .matrixAppointment .e-input-group.e-float-icon-left:not(.e-float-input) .e-input-in-wrap::before, .matrixAppointment .e-input-group.e-float-icon-left:not(.e-float-input) .e-input-in-wrap::after, .matrixAppointment .e-input-group.e-control-wrapper:not(.e-float-icon-left):not(.e-float-input)::before, .matrixAppointment .e-input-group.e-control-wrapper:not(.e-float-icon-left):not(.e-float-input)::after, .matrixAppointment .e-input-group.e-control-wrapper.e-float-icon-left:not(.e-float-input) .e-input-in-wrap::before, .matrixAppointment .e-input-group.e-control-wrapper.e-float-icon-left:not(.e-float-input) .e-input-in-wrap::after,
.matrixResource .e-input-group:not(.e-float-icon-left):not(.e-float-input)::before, .matrixResource .e-input-group:not(.e-float-icon-left):not(.e-float-input)::after, .matrixResource .e-input-group.e-float-icon-left:not(.e-float-input) .e-input-in-wrap::before, .matrixResource .e-input-group.e-float-icon-left:not(.e-float-input) .e-input-in-wrap::after, .matrixResource .e-input-group.e-control-wrapper:not(.e-float-icon-left):not(.e-float-input)::before, .matrixResource .e-input-group.e-control-wrapper:not(.e-float-icon-left):not(.e-float-input)::after, .matrixResource .e-input-group.e-control-wrapper.e-float-icon-left:not(.e-float-input) .e-input-in-wrap::before, .matrixResource .e-input-group.e-control-wrapper.e-float-icon-left:not(.e-float-input) .e-input-in-wrap::after {
    background-color: var(--main-color-matrix);
}

.matrixAppointment .e-btn, .matrixAppointment .e-css.e-btn,
.matrixResource .e-btn, .matrixResource .e-css.e-btn {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    text-transform: none;
}

.matrixAppointment .e-btn.e-flat.e-primary:hover, .matrixAppointment .e-css.e-btn.e-flat.e-primary:hover,
.matrixResource .e-btn.e-flat.e-primary:hover, .matrixResource .e-css.e-btn.e-flat.e-primary:hover {
    background-color: rgba(0,0,0,0.0348);
}

.e-splitter .e-split-bar.e-split-bar-horizontal {
    background-color: var(--main-border-color-matrix);
    color: var(--main-border-color-matrix);
}

.e-splitter .e-split-bar.e-split-bar-horizontal.e-split-bar-hover .e-resize-handler,.e-splitter .e-split-bar.e-split-bar-horizontal.e-split-bar-active .e-resize-handler {
    background: var(--main-bg-color-matrix) !important;
    color: var(--main-border-color-matrix) !important;
}

.e-splitter .e-split-bar.e-split-bar-horizontal.e-split-bar-hover, .e-splitter .e-split-bar.e-split-bar-horizontal.e-split-bar-active
{
    background-color: var(--main-border-color-matrix) !important;
    color: var(--main-color-matrix) !important;
}

.e-splitter .e-split-bar.e-split-bar-horizontal-hover .e-resize-handler {
    background-color: var(--main-color-matrix);
    color: var(--main-color-matrix);
}

.matrixAppointment .e-columnheader{
    height: 286.2px;
    border-top: none;
}

.matrixAppointment .e-grid .e-gridheader{
    border-top: none;
} 