/* NOTES:
   1. Expand or Collapse All with CTRL + M + L
   2. To address a specific element use the "#" sign as in this example: #GridAccounts.e-grid .e-altrow { background-color: lightblue; }  AND <SfGrid @ref="GridAccounts">
*/

/* Customization for Dropdown popup*/
.e-custom-dropdown.e-dropdown-popup {
    /* To chnge borde thickness */
    border: 1px solid;
    /*To change border color*/
    /*border-color: black;*/
    /* To change background color*/
    /*background-color: khaki;*/
    /* To change Item Text color*/
    /*color: black;*/
}

.e-custom-dropdown.e-dropdown-btn.e-dropdown-btn.e-btn:active.e-btn:focus {
    background-color: black !important;
    color: white;
}

.e-custom-dropdown.e-dropdown-btn.e-dropdown-btn.e-btn:hover {
    background-color: black !important;
    color: white;
}

/*#region SfTabs*/
/*Use the following CSS to customize the Tab.*/
.e-tab {
}
    /*Use the following CSS to customize the header of Tab control.*/
    .e-tab .e-tab-header {
    }
        /*The font size the tab header text*/
        .e-tab .e-tab-header .e-toolbar-item .e-tab-wrap,
        .e-tab .e-tab-header .e-toolbar-item .e-tab-wrap .e-tab-icon {
            color:blue;
        }

            /*Font color of the tab header text*/
            .e-tab .e-tab-header .e-toolbar-item .e-tab-text,
            .e-tab .e-tab-header .e-toolbar-item .e-tab-wrap .e-tab-icon {
                font-weight: bold;
            }

        /*Use the following CSS to customize the header items of Tab.*/
        .e-tab .e-tab-header .e-toolbar-items {
          
        }

        /*Use the following CSS to customize the header item icon of Tab control.*/
        .e-tab .e-tab-header .e-toolbar-item .e-tab-icon {
        }

        /*Use the following CSS to customize the tab item when hovering.*/
        .e-tab .e-tab-header .e-toolbar-item .e-tab-wrap:hover {
            /* background-color: #08c;*/
            background-color: #e9ecef;
        }
            .e-tab .e-tab-header .e-toolbar-item .e-tab-wrap:hover .e-tab-text,
            .e-tab .e-tab-header .e-toolbar-item .e-tab-wrap:hover .e-tab-icon {
               /* color: white;*/
            }

        /*Use the following CSS to customize the selected tab item.*/
        .e-tab .e-tab-header .e-toolbar-item.e-active.e-ileft .e-tab-text {
            color: red;
            font-weight: bold;
        }

        /*Use the following CSS to customize the selected tab item text and icon.*/
        .e-tab .e-tab-header .e-toolbar-item.e-active .e-tab-text,
        .e-tab .e-tab-header .e-toolbar-item.e-active .e-tab-icon {
        }

    /*Use the following CSS to customize the content items of Tab.*/
    .e-tab .e-content .e-item {
        padding: 0 10px;
    }

    /*Use the following CSS to customize the content of the selected item */
    .e-tab .e-content > .e-item.e-active {
        background: transparent;
    }


/*.default-tab .e-content .e-item {
    font-size: 12px;
    padding: 10px;
}
*/

/*#endregion SfTabs*/



/*#region ToolbarItem*/
.selectBtn .e-tbar-btn-text {
    color: red !important;
    font-weight: 900;
    font-variant: small-caps;
}
/*#endregion ToolbarItem*/


/*#region SFDialog */
.e-dialog .e-dlg-header-content {
    border-radius: 4px;
    background-color: #007bff;
/*    background-color: #d9edf7;*/  /*lighting blue kind of*/
    font-weight: bold;
}

.e-dialog.e-control.e-popup, .e-dialog.e-control.e-popup .e-dlg-header-content .e-dlg-header {
    /*color: black;*/
    color: white;
    font-weight: bold;
}

.e-dialog .e-dlg-header-content .e-icon-dlg-close {
    /*color: black;*/
    color: white;
    font-weight: bold;
}

.e-dialog .e-dlg-header-content .e-btn.e-dlg-closeicon-btn:active .e-icon-dlg-close,
.e-dialog .e-dlg-header-content .e-btn.e-dlg-closeicon-btn:focus .e-icon-dlg-close,
.e-dialog .e-dlg-header-content .e-btn.e-dlg-closeicon-btn:hover .e-icon-dlg-close {
 /*   color: black;*/
    color: white;
    font-weight: bold;
}

.e-dialog .e-dlg-header-content .e-btn.e-dlg-closeicon-btn {
    height: 25px;
    width: 34px;
}

/*#endregion */

/*#region SFGrid */
.e-grid {
    border: 1px solid gray;
    border-radius: 0;
}

    .e-grid .e-gridfooter {
        border-bottom: 1px solid gray;
        border-left: 1px solid gray;
        border-right: 1px solid gray;
        border-radius: 0;
    }

    .e-grid .e-gridheader {
    }

    /* To customize grid column header  NOTE: Adding #Grid.e-grid will apply styles to particulate grid with ID=Grid */
    .e-grid .e-headercell {
        background-color: #f1f2f6;
        border-top: 1px solid gray !important;
        /*border-bottom: 1px solid gray !important;*/
    }

    /* This is necessary only if using Bootstrap theme*/
    .e-grid .e-headercelldiv {
        /*  font-weight: normal !important;*/
    }

    .e-grid .e-columnheader {
        color: black; /* IMPORTANT: works for both column header and grid header*/
    }

    /* This is the grid's built-in toolbar*/
    .e-grid .e-toolbar {
        /*  border-bottom: 1px solid gray !important;
 */
    }

    /* To apply color to group drop area */
    .e-grid .e-groupdroparea {
        background-color: #e9ecef;
        /*border: 1px solid black;*/
    }

    /*to apply styles to toolbar button using below highlighted button text cssclass*/
    /*change color color-profile icons input toolbar*/
    .e-grid .e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn-text,
    e-grid .e-toolbar .e-toolbar-items .e-toolbar-item .e-icons {
        color: black;
    }

        /*To Apply background color while select/hover/focus the toolbar btn*/
        .e-grid .e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn-text:hover,
        .e-grid .e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn-text:active,
        .e-grid .e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn-text:focus {
            color: white !important;
        }

    /*to apply style to toolbar and button*/
    .e-grid .e-toolbar,
    .e-grid .e-toolbar .e-toolbar-items,
    .e-grid .e-toolbar .e-toolbar-items .e-toolbar-item {
        background-color: transparent;
        border: none;
        padding: 5px;
    }
        /*to apply style to toolbar and button*/
        .e-grid .e-toolbar .e-toolbar-items .e-toolbar-item button {
            background-color: #dee2e6;
        }

    /*to apply style to row selected */
    .e-grid .e-rowcell.e-selectionbackground {
        /* background-color: aqua !important;*/
    }

    /*to apply style to HOVER */
    .e-grid.e-gridhover tr.e-row:hover .e-rowcell:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell) {
        background-color: Highlight !important;
        color: white !important;
    }

/* This is a button used on grid row as dropdown menu */
.e-grid-splitbtn.e-btn {
    background-color: #e9ecef;
    border-color: #e9ecef;
    color: black;
}

.e-grid .e-grid-splitbtn.e-btn .e-icons {
    color: black;
}

/*To Apply background color while select/hover/focus the dropdown item*/
/*.e-grid-splitbtn.e-btn.e-btn:hover,
.e-grid-splitbtn.e-btn.e-btn:active,
.e-grid-splitbtn.e-btn.e-btn:focus {
    background-color: red !important;
    color: white;
}
*/

/* Disable grid row */
.disablerow {
    opacity: .5;
    pointer-events: none;
    -ms-touch-action: none;
    touch-action: none;
    cursor: no-drop;
}


/*To change alternate row color*/
.e-grid .e-altrow {
    /*background-color: #fafafa;*/
}

/*To style a specific column*/
.e-attr {
    /*      background: #5DADE2;
        font-family: "Bell MT";
        color: red;
        font-size: 5px;*/
}
/*#endregion */

/*#region UserRights */
.e-changeaccess {
    padding: 4px 8px;
    font-size: 12px;
    background-color: white;
    border-color: white;
    color: blue;
    text-decoration: underline;
}

.hasaccess {
    background-color: lightgreen;
    color: darkgreen;
}

.noaccess {
    background-color: orangered;
    color: white;
}
/*#endregion */


/*#region GridColumnColors */
.e-grid .e-gridcontent .e-rowcell.bkcolorBlue {
    background-color: blue;
    color: white;
}

.e-grid .e-gridcontent .e-rowcell.bkcolorRed {
    background-color: red;
    color: white;
}

.e-grid .e-gridcontent .e-rowcell.bkcolorGreen {
    background-color: green;
    color: white;
}

.e-grid .e-gridcontent .e-rowcell.bkcolorYellow {
    background-color: yellow;
    color: black;
}

.e-grid .e-gridcontent .e-rowcell.bkcolorGold {
    background-color: gold;
    color: black;
}

.e-grid .e-gridcontent .e-rowcell.bkcolorBlack {
    color: white;
    background-color: black;
}

.e-grid .e-gridcontent .e-rowcell.colorBlack {
    color: black;
}

.e-grid .e-gridcontent .e-rowcell.colorTransparent {
    color: transparent;
}

.e-grid .e-gridcontent .e-rowcell.colorBlue {
    color: blue;
}

.e-grid .e-gridcontent .e-rowcell.colorRed {
    color: red;
}

.e-grid .e-gridcontent .e-rowcell.colorGreen {
    color: green;
}

.e-grid .e-gridcontent .e-rowcell.colorYellow {
    color: yellow;
}

.e-grid .e-gridcontent .e-rowcell.colorBold {
    font-weight: bold;
}

.e-grid .e-gridcontent .e-rowcell.colorFileCanceled {
    /*text-decoration: line-through;*/
    color: white;
    background-color: black;
}

.e-grid .e-gridcontent .e-rowcell.colorRaStatusOpen {
    color: black;
    background-color: lightgreen;
}

.e-grid .e-gridcontent .e-rowcell.colorRaStatusDueToday {
    color: black;
    background-color: yellow;
}

.e-grid .e-gridcontent .e-rowcell.colorRaStatusDueTomorrow {
    color: black;
    background-color: orange;
}

.e-grid .e-gridcontent .e-rowcell.colorRaStatusOverdue {
    color: white;
    background-color: red;
}

.e-grid .e-gridcontent .e-rowcell.colorRaStatusClosed {
    color: white;
    background-color: blue;
}

.e-grid .e-gridcontent .e-rowcell.colorRaStatusVoid {
    color: white;
    /*text-decoration: line-through;*/
    background-color: black;
}

.e-grid .e-gridcontent .e-rowcell.colorReservBooked {
    color: white;
    background-color: blue;
}

.e-grid .e-gridcontent .e-rowcell.colorReservOpen {
    color: black;
    background-color: lightgreen;
}

.e-grid .e-gridcontent .e-rowcell.colorReservNoShow {
    color: black;
    background-color: yellow;
}

.e-grid .e-gridcontent .e-rowcell.colorReservCanceled {
    color: white;
    /*text-decoration: line-through;*/
    background-color: black;
}

.e-grid .e-gridcontent .e-rowcell.colorReservQuote {
    color: white;
    background-color: darkgoldenrod;
}

.e-grid .e-gridcontent .e-rowcell.colorDanger {
    color: white;
    background-color: red;
}

.e-grid .e-gridcontent .e-rowcell.colorWarning {
    color: black;
    background-color: yellow;
}
/*#endregion */

/*#region Common*/
.e-spinner-pane.e-customClass .e-spinner-inner {
    background-color: lightgoldenrodyellow;
    padding: 20px;
}

.e-custom.e-float-input.e-control-wrapper:not(.e-error) input:valid ~ label.e-float-text, .e-float-input.e-control-wrapper:not(.e-error) input ~ label.e-label-top.e-float-text {
   /* font-size: 12px;
    font-weight: bold;*/
}

.e-custom.e-float-input.e-control-wrapper.e-disabled input[disabled] ~ label.e-float-text,
.e-custom.e-float-input.e-control-wrapper:not(.e-error):not(.e-input-focus):not(.e-disabled) input:not(:focus):not(:valid) ~ label.e-float-text:not(.e-label-top),
.e-custom.e-float-input.e-ddl.e-control-wrapper:not(.e-error) input ~ label.e-label-top.e-float-text,
.e-custom.e-float-input.e-input-group.e-ddl.e-control-wrapper input[disabled].e-dropdownlist ~ label.e-float-text {
   /* font-size: 12px;
    font-weight: bold;*/
}

/*#endregion Common*/