/*
    WELS Specific Class
    CSS to override bootstrap
    Syncfusion control overrides should go in syncfusion.blazor.override.css
*/

/*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;
    --welsValidationRed: #e7000e;
    --welsValidationBackgroundRed: #fce9eA;
}

body {
    font-family: var(--welsFontFamily);
    color: var(--welsFontColor);
    font-size: var(--welsFontSize);
    padding-top: 0px;
    padding-bottom: 0px;
}

hr {
    color: var(--welsRed);
    height: 1px;
    background-color: var(--welsRed);
    margin-top: 20px;
    margin-bottom: 20px;
    border-top: 1px solid #eeeeee;
    border: 0;
    opacity: 1;
}

hr.light {
    color: #eeeeee;
    background-color: #eeeeee;
    border-top: none;
}

/*****************************************
*
*   Blazor Error UI & Boundary
*
*****************************************/

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

.blazor-error-boundary {
    /* Add image to the web application project. */
    background: url(/images/yellow-exclamation.svg) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

.blazor-error-boundary::after {
    content: "An error has occurred."
}


/*****************************************
*
*   Text, Titles and Headers
*
*****************************************/

.wels-body-heading {
    color: var(--welsRed);
    font-size: 18px;
    padding-bottom: 10px;
    padding-top: 10px;
}

.wels-red-text {
    color: var(--welsRed);
}

/*****************************************
*
*   Labels, Red Asterisk
*
*****************************************/

.control-label {
    margin-left: 10px;
    font-weight: bold;
    text-align: left;
}

.control-label.required:before {
    margin-left: -10px;
    content: "* ";
    font-weight: bold;
    color: #e7000e;
}

/*****************************************
*
*   Validation - Blazor's OOTB Classes: validation-message & invalid
*   ngreanya, 2025-08-08
*
*****************************************/

/* Blazor's EditForm DataAnnotationValidator Validation Message Class */
.validation-message {
    color: var(--welsValidationRed);
    font-size: smaller;
}

/* Red Bootstrap 5 Exclamation point in a solid circle */
.validation-message::before {
    content: "\f332";
    font-family: "bootstrap-icons";
    padding-right: .5em;
}

.invalid {
    outline: 1px solid var(--welsValidationRed);
    background-color: var(--welsValidationBackgroundRed);
}

.e-input-group.invalid
, .e-input-group.e-control-wrapper.invalid
, .e-input-group.e-error.invalid
, .e-input-group.e-error.e-control-wrapper.invalid {

    outline: 1px solid var(--welsValidationRed);
    background-color: var(--welsValidationBackgroundRed);
}

.e-input-group.invalid > .form-control
, .e-input-group.e-control-wrapper.invalid > .form-control
, .e-input-group.e-error.invalid > .form-control
, .e-input-group.e-error.e-control-wrapper.invalid > .form-control {

    background-color: var(--welsValidationBackgroundRed);
}

/*****************************************
*
*   Links
*
*****************************************/

a {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* ngreanya, 2025-08-08, Add nav-link class */
a, a:hover, a:visited, a:active, .nav-link, .nav-link:hover, .nav-link:focus, .nav-link:active {
    color: var(--welsLinkLightBlue);
}

/* ngreanya, 2025-08-07, Overwrite _nav.scss
    display: block turned the link into a block
    so you could lcik on white spac ein the middle of the page and activated the link without actually clicking it.
    Super Annoying. */
.nav-link {
    display: inline-block;
}

/*****************************************
*
*   Bootstrap Row Padding
*
*****************************************/

.row.wels-grid-row-height {
    padding-top: 6px;
    padding-bottom: 6px;
}