/*
    WELS CSS overrides for Syncfusion Blazor Bootstrap 5 Theme
*/

/* Common Standard Variables */
:root {
    --welsBlue: #122560;
    --welsLinkLightBlue: #0f71cb;
    --welsRed: #990000;
    --welsFontFamily: Lato, Tahoma, Helvetica, Arial, sans-serif;
    --welsFontColor: #333333;
    --welsFontSize: 15px;
    --welsGrayBorderColor: #cecece;
    --syncfusionFocusBlue: #317ab9;
    --welsLightGrayBackground: #f8f8f8;
    --welsDarkGray: #666666;
}

/*****************************************
*
*   Base: Set to WELS Font Family, size, color, etc.
*
*****************************************/

.e-control
, .e-css
, .e-dialog .e-dlg-content
, .e-tab .e-content .e-item
, .e-tab .e-tab-header .e-toolbar-item .e-tab-text
, .e-tab .e-tab-header .e-toolbar-item.e-active.e-ileft .e-tab-text
, .e-tab .e-tab-header .e-toolbar-item.e-active.e-iright .e-tab-text {
    font-family: var(--welsFontFamily);
    font-size: var(--welsFontSize);
    color: var(--welsFontColor);
}


/* ngreanya, 2024-04-17 */
.e-switch-wrapper .e-switch-on
, .e-switch-wrapper .e-switch-off
, .e-css.e-switch-wrapper .e-switch-on
, .e-css.e-switch-wrapper .e-switch-off
, input.e-input
, textarea.e-input
, .e-input-group
, .e-input-group.e-control-wrapper
, .e-ddl.e-input-group.e-control-wrapper .e-input
, .e-dropdownbase .e-list-item
, .e-dropdownbase .e-list-item.e-item-focus {

    font-family: var(--welsFontFamily);
    font-size: var(--welsFontSize);
}

.e-float-input input
, .e-float-input textarea
, .e-float-input.e-control-wrapper input
, .e-float-input.e-control-wrapper textarea 
, .e-float-input.e-control-wrapper:not(.e-error) input:focus ~ label.e-float-text
, .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
, .e-float-input.e-control-wrapper:not(.e-error) input[readonly] ~ label.e-label-top.e-float-text
, .e-float-input.e-control-wrapper:not(.e-error) input[disabled] ~ label.e-label-top.e-float-text
, .e-float-input.e-control-wrapper:not(.e-error) input label.e-float-text.e-label-top
, .e-float-input.e-control-wrapper.e-bigger:not(.e-error) input:focus ~ label.e-float-text
, .e-float-input.e-control-wrapper.e-bigger:not(.e-error) input:valid ~ label.e-float-text
, .e-float-input.e-control-wrapper.e-bigger:not(.e-error) input ~ label.e-label-top.e-float-text
, .e-float-input.e-control-wrapper.e-bigger:not(.e-error) input[readonly] ~ label.e-label-top.e-float-text
, .e-float-input.e-control-wrapper.e-bigger:not(.e-error) input[disabled] ~ label.e-label-top.e-float-text
, .e-bigger .e-float-input.e-control-wrapper:not(.e-error) input:focus ~ label.e-float-text
, .e-bigger .e-float-input.e-control-wrapper:not(.e-error) input:valid ~ label.e-float-text
, .e-bigger .e-float-input.e-control-wrapper:not(.e-error) input ~ label.e-label-top.e-float-text
, .e-bigger .e-float-input.e-control-wrapper:not(.e-error) input[readonly] ~ label.e-label-top.e-float-text
, .e-bigger .e-float-input.e-control-wrapper:not(.e-error) input[disabled] ~ label.e-label-top.e-float-text
, .e-float-input.e-control-wrapper:not(.e-error).e-input-focus input ~ label.e-float-text
, .e-float-input.e-control-wrapper.e-bigger:not(.e-error).e-input-focus input ~ label.e-float-text
, .e-bigger .e-float-input.e-control-wrapper:not(.e-error).e-input-focus input ~ label.e-float-text 
{
    font-family: var(--welsFontFamily);
    color: var(--welsFontColor);
}

.e-float-input input:focus ~ label.e-float-text
, .e-float-input input:valid ~ label.e-float-text
, .e-float-input input ~ label.e-label-top.e-float-text
, .e-float-input input[readonly] ~ label.e-label-top.e-float-text
, .e-float-input input[disabled] ~ label.e-label-top.e-float-text
, .e-float-input input label.e-float-text.e-label-top
, .e-float-input.e-control-wrapper input:focus ~ label.e-float-text
, .e-float-input.e-control-wrapper input:valid ~ label.e-float-text
, .e-float-input.e-control-wrapper input ~ label.e-label-top.e-float-text
, .e-float-input.e-control-wrapper input[readonly] ~ label.e-label-top.e-float-text
, .e-float-input.e-control-wrapper input[disabled] ~ label.e-label-top.e-float-text
, .e-float-input.e-control-wrapper input label.e-float-text.e-label-top
, .e-float-input.e-control-wrapper.e-input-focus input ~ label.e-float-text
, .e-float-input.e-input-focus input ~ label.e-float-text
, .e-tab .e-tab-header .e-toolbar-item.e-active .e-tab-text
{
    font-family: var(--welsFontFamily);
    font-size: var(--welsFontSize);
    font-weight: 700;
}

.e-btn.e-link, .e-css.e-btn.e-link {
    color: var(--welsLinkLightBlue);
}

/*****************************************
*
*   Grid Alt Row Class is not set by default in Bootstrap 5
*   ngreanya, 2023-11-07
*
*****************************************/

.e-grid .e-altrow {
    background-color: #fdfdfd;
}

/************************************************************************************************
*   Grid - Prevent the Grouping Caption from getting cut off due to column width being too small
*   ngreanya, 2024-04-12 - Synod Convention
*          
************************************************************************************************/

.e-grid .e-groupcaption {
    overflow: unset;
}

/************************************************************************************************
*   Grid - Column Filter Icon when Filtered - use Bootstrap 5 Filter-Active icon
*   ngreanya, 2024-04-18 - Azure DevOps #4907
*          
************************************************************************************************/
.e-grid .e-filtered::before, .e-grid .e-icon-filter.e-filtered::before {
    content: "\e735";
}

/************************************************************************************************/
/*Dialog Popup: These tab changes will only affect the dialogs with 
    cssClass="welsDialog"
    cssClass="welsDialogError"

    ngreanya, 2023-12-07
*/
/************************************************************************************************/

.welsDialog.e-dialog .e-footer-content,
.welsDialogError.e-dialog .e-footer-content {
    text-align: center;
}

.welsDialog.e-dialog .e-dlg-header,
.welsDialogError.e-dialog .e-dlg-header {
    color: var(--welsRed);
    font-weight: 700;
    font-size: 1.4rem;
    display: inline-flex; /*ngreanya, 2025-08-08, veritcally aligns center specifcally for the error exclamation icon. */
}

/* Bootstrap 5 Icon = Exclamation point in a solid circle */
.welsDialogError.e-dialog .e-dlg-header::before {
    content: "\f332";
    font-family: "bootstrap-icons";
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
    color: var(--welsRed);
    padding-right: .5em;
}

.welsDialog.e-dialog .e-dlg-header-content,
.welsDialogError.e-dialog .e-dlg-header-content {
    background-color: #fcfcfc;
    border-bottom: 1px solid #e6e6e6;
    line-height: inherit;
    padding: 6px 24px 8px 24px;
}

/*ngreanya, looks nicer with top padding*/
.welsDialog.e-dialog .e-dlg-header-content + .e-dlg-content,
.welsDialogError.e-dialog .e-dlg-header-content + .e-dlg-content {
    padding-top: 24px; /*This is the top padding for dialog content when there is no header*/
}

/*ngreanya, looks nicer with no bottom margin*/
.welsDialog.e-dialog .e-dlg-content,
.welsDialogError.e-dialog .e-dlg-content {
    margin-bottom: 0px;
}

/*ngreanya, 2025-08-08, allows for veritcally aligns center of the X close icon in the header */
.welsDialogError .e-dialog .e-dlg-header-content .e-btn.e-dlg-closeicon-btn
, .welsDialog .e-dialog .e-dlg-header-content .e-btn.e-dlg-closeicon-btn {
    position: static;
}

/************************************************************************************************
*
* Tab - Level 1: These tab changes will only affect the tab with cssClass="WelsTabsLevel1"
* ngreanya, 2024-04-12, added when updating Synod Convention to use Blazor Common Components
*
************************************************************************************************/

/* Unset/Clear the Style set by the theme */
.welsTabsLevel1.e-tab .e-tab-header .e-toolbar-items .e-toolbar-item.e-active::before {
    background-color: unset;
    bottom: unset;
    content: unset;
    height: unset;
    left: unset;
    position: unset;
    right: unset;
    transition: unset;
}

/* Add a border under the Tab Headers*/
.welsTabsLevel1.e-tab .e-tab-header::before {
    border-color: var(--welsRed);
    border-style: solid;
}

/* Add a border under the Tab Headers */
.welsTabsLevel1.e-tab .e-tab-header:not(.e-vertical)::before {
    border-width: 0 0 1px;
}

/* Add a top, left, right border on active tab */
.welsTabsLevel1.e-tab .e-tab-header .e-toolbar-item.e-active {
    border: 1px solid var(--welsRed);
    border-radius: 4px 4px 0 0;
}

/* Add white bottom border to essentially hide the main border */
.welsTabsLevel1.e-tab .e-tab-header:not(.e-vertical) .e-toolbar-item.e-active {
    border-bottom: 1px solid #fff;
}

.welsTabsLevel1.e-tab .e-tab-header .e-toolbar-items:not(.e-tbar-pos) .e-toolbar-item:last-child {
    margin: 0 0 0 0;
}

/* Move Hover background to the e-tab-wrap */
.welsTabsLevel1.e-tab .e-tab-header .e-toolbar-item:hover {
    background: none;
}

.welsTabsLevel1.e-tab .e-tab-header .e-toolbar-item .e-tab-wrap {
    height: 42px;
}

.welsTabsLevel1.e-tab .e-tab-header .e-toolbar-item .e-tab-wrap:hover {
    background: #edebe9;
    border: 1px solid #edebe9;
    border-radius: 4px;
}

.welsTabsLevel1.e-tab .e-content {
    padding-top: 20px;
}