:root
{
    --circle-character: "• ";
    --circle-character-spacebefore: " • ";
    --colorOpgGreen: #6dbd43;
    --default-color-darkblue: darkblue;
    --default-color-error: red;
    --default-color-confirm: orange;
    --default-color-text: #666666;
    --default-color-fairlydarkblue: #396a93;
    --default-color-opgbrand: #74c04f; /*--default-color-opgbrand: goldenrod;*/
    --default-color-highlightgridcell: #ffff77;
    --default-color-highlightqualgridcell: #ccffff;
    --default-color-info: steelblue;
    --default-color-outlined: #2d6da3;
    --default-color-navy: #00004d;
    --default-color-note-left: #00004d;
    --default-color-note-right: #6dbd43;
    --default-color-question: steelblue;
    --default-color-steelblue: steelblue;
    --default-color-success: #5cb85c;
    --default-color-warning: yellow;
    --default-color-turquoise: #00e5ee;
    --default-color-warning: orange;
    --default-font-family: 'Helvetica Neue','Segoe UI',Helvetica,Verdana,sans-serif;
    --default-font-size: 14px;
    --default-font-weight: 700;
    --default-line-height: 1.7;
    --default-padding: 15px;
    --default-toolbar-margin-right: 0px;
    --footer-padding: 0.5rem;
    --menu-color: black;
    --opg-green-color: #6dbd43; /*#66cc00*/
    --popup-window-title-icon-content: "\f055";
    --shadow-color: black;
    --sidebar-width: 280px;
    --sidebar-width-mobile: 5.8rem;
    --header-height: 56px;
    --footer-height: 40px;
    --default-dialog-iconsize: 3rem;
}

-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
/* style for the fixed header */
.my-fixed-header
{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--header-height);
    z-index: 1000;
    background-color: black;
    color: white;
}

/* style for the fixed footer */
.my-fixed-footer
{
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: var(--footer-height);
    background-color: var(--opg-green-color);
    color: white;
}

/* style for the fixed sidebar */
.my-fixed-sidebar
{
    position: fixed;
    top: var(--header-height);
    bottom: var(--footer-height);
    width: var(--sidebar-width);
    background-color: #f8f9fa;
    overflow-y: auto;
}

.opgBackColorLightBlue
{
    background-color: lightblue;
}

.opgBackColorLightGray
{
    background-color: lightgray;
}

.opgBackColorSoftTeal
{
    background-color: #a8dadc;
}

.opgBackColorPaleAqua
{
    background-color: #e0f7fa;
}

.opgBackColorWarmBeige
{
    background-color: #f6e7d8;
}
.opgBackColorBlushPink
{
    background-color: #f9e2e3;
}
.opgBackColorMutedLavender
{
    background-color: #d8cfe8;
}
.opgBackColorPaleGold
{
    background-color: #ffe5b4;
}
.opgBackColorMistyGreen
{
    background-color: #cfe9b3;
}
.opgBackColorSoftCoral
{
    background-color: #f6b8a8;
}
.opgBackColorWhiteSmoke
{
    background-color: whitesmoke;
}

.opgBackColorPurplePastel
{
    background-color: #c5a3ff; /*brighter and more vibrant*/
}

.opgBackColorPurpleLilac
{
    background-color: #c8a2c8; /*rich lavender with a pinkish undertone*/
}

.opgBackColorPurpleLightOrchid
{
    background-color: #d4a5d8; /*  soft yet distinguishable */
}

.opgBackColorPurpleAmethyst
{
    background-color: #b39ddb; /*  muted but deeper than lavender */
}

.opgBackColorPurpleHeather
{
    background-color: #bf9bde; /*  balanced and elegant */
}

.opgBackColorPurpleWisteria
{
    background-color: #a99cd8; /*  distinctive pale purple */
}

.opgColorGreen
{
    color: var(--opg-green-color)!important;
}

/* style for the content area */
.my-content
{
    margin-left: var(--sidebar-width);
    margin-top: var(--header-height);
    margin-bottom: var(--footer-height);
    padding: 20px;
    overflow-y: auto;
    height: calc(100vh - var(--header-height) - var(--footer-height));
}

.go-to-top
{
    display: none; /* Hidden by default */
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 10000;
    font-size: 1rem;
    /*    border: none;
    outline: none;
*/ background-color: var(--default-color-steelblue);
    color: white;
    cursor: pointer;
    padding: 10px;
    border-radius: 4px;
    text-align: center;
    text-decoration: none;
}

    .go-to-top:hover
    {
        /*background-color: #333;*/
    }

.OpgTextBoxInfo
{
    color: var(--colorOpgGreen);
}


.allInitial
{
    all: initial !important;
}

a.navbar-brand
{
    white-space: normal;
    text-align: center;
    word-break: break-all;
}

.nav-item a
{
    color: var(--default-color-opgbrand) !important;
    text-decoration: none !important;
}

    .nav-item a:hover
    {
        color: var(--default-color-turquoise) !important;
    }

body.legal
{
    font-family: Arial,Tahoma,Sans-Serif !important;
}

.opgLetter
{
    max-width: 8.5in;
    margin-left: auto;
    margin-right: auto;
    background-color: whitesmoke;
    padding-left: 2rem;
    padding-right: 2rem;
    padding-top: 0.5rem;
    padding-bottom: 1rem;
    font-family: Arial,Tahoma,Sans-Serif !important;
}

ol.lowerAlpha
{
    list-style-type: lower-alpha;
}

ol.upperAlpha
{
    list-style-type: upper-alpha;
}

ol.decimal
{
    list-style-type: decimal
}

ol.upperAlpha
{
    counter-reset: list;
    text-indent: -24px; /* key property */
    margin-left: 24px; /* key property */
}

    ol.upperAlpha > li
    {
        list-style: none;
    }

        ol.upperAlpha > li:before
        {
            content: "(" counter(list, lower-alpha) ") ";
            counter-increment: list;
        }

ol.lowerAlpha
{
    counter-reset: list;
    text-indent: -24px; /* key property */
    margin-left: 24px; /* key property */
}

    ol.lowerAlpha > li
    {
        list-style: none;
    }

        ol.lowerAlpha > li:before
        {
            content: "(" counter(list, lower-alpha) ") ";
            counter-increment: list;
        }

.masterdetail
{
    overflow-y: visible !important;
    resize: vertical !important;
}

ul.disc
{
    list-style: disc;
}

.opgBackColorRed
{
    background-color: rgba(255,0,0,0.6) !important;
}

.opgBackColorOrange
{
    background-color: rgba(255,165,0,0.6) !important;
}



.opgHighlightGridCell
{
    background-color: yellow !important;
}

.opgGrayTextColor
{
    color: rgb(100,100,100) !important;
}

.opgNoteThreadInfo
{
    width: 80%;
    margin: 10px auto;
}

.opgLegal
{
    font-size: 1.1em;
    max-height: 1.11em;
    color: rgba(255,255,255,0.9);
    margin-top: auto;
    margin-bottom: auto;
}

.opgFooter
{
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 40px;
    z-index: 1000;
    background-color: #c5c5c5;
}


.opgFooterNavbar
{
    overflow: hidden;
    background-color: var(--opg-green-color);
    color: rgba(255,255,255,0.8);
    position: fixed;
    bottom: 0;
    width: 100%;
}

    .opgFooterNavbar span
    {
        float: right;
        display: block;
        color: white;
        text-align: center;
        font-size: 1rem;
        padding: var(--footer-padding) var(--footer-padding);
    }

    .opgFooterNavbar a
    {
        float: right;
        display: block;
        color: rgba(255,255,255,0.8);
        text-align: center;
        padding: var(--footer-padding) var(--footer-padding);
        text-decoration: none;
        font-size: 1rem;
    }

        .opgFooterNavbar a:hover
        {
            color: white;
        }

.footer-redirect-text
{
    position: absolute;
    left: .6rem;
    color: white;
    font-size: 0.85rem;
    white-space: nowrap;
}

.opgTextDecorationNone a
{
    text-decoration: none !important;
}

    .opgTextDecorationNone a:hover
    {
        text-decoration: none !important;
    }

    .opgTextDecorationNone a:active
    {
        text-decoration: none !important;
    }

.opgDefaultModuleColor
{
    color: var(--default-module-color);
}

.opg-modal-dialog
{
    z-index: 100000;
}

.opgDialogFontLook,
.opgDialogFontLook *
{
    font-size: 0.925rem !important;
}

    .opgDialogFontLook,
    .opgDialogFontLook *:not(i)
    {
        font-family: var(--default-font-family) !important;
    }

/*.opgTrainingModule
{
    color: var(--default-module-color);
    font-size: 1.2rem;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    cursor: default;
}

    .opgTrainingModule a
    {
        text-decoration: none !important;
    }

        .opgTrainingModule a:hover
        {
            text-decoration: none !important;
        }

        .opgTrainingModule a:active
        {
            text-decoration: none !important;
        }*/
.opg-menu-parent
{
    text-transform: uppercase;
    letter-spacing: 1.25px;
    background-color: var(--menu-color);
}

.opg-menu-nonparent
{
    text-transform: none !important;
    letter-spacing: normal !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    color: black !important;
}

    .opg-menu-nonparent a
    {
        color: black !important;
    }

.opg-menu-parent .opg-menu-nonparent a:hover
{
    color: var(--default-color-steelblue) !important;
}

.opgBold
{
    font-weight: 700;
}

.opgDevelopment
{
    color: red;
}

.opgDot
{
    margin-left: 0.25rem;
    margin-right: 0.25rem;
}

.opgEnvironmentCommon
{
    color: red;
    text-transform: uppercase;
    font-size: 1.2rem;
    font-weight: 700;
    margin-top: auto;
    margin-bottom: auto;
    cursor: default !important;
}

.opgVersion
{
    all: unset;
    font-family: var(--default-font-family);
    color: gray;
    font-size: 0.8rem !important;
    /*  margin-left:.1rem !important;*/
    /*  margin-top: auto !important;
    margin-bottom: auto !important;
    vertical-align: middle !important;*/
    cursor: default;
}

.opgUppercaseDropdown ~ .dx-dropdowneditor-overlay .dx-item
{
    text-transform: uppercase;
}

.opgLowercaseDropdown ~ .dx-dropdowneditor-overlay .dx-item
{
    text-transform: lowercase;
}

.opgNoteThreadBoxLeft
{
    width: 80%;
    margin: 10px auto 0px auto;
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    background: var(--default-color-note-left);
    color: white;
    padding: 20px;
    text-align: left;
    /*    font-weight: 900;*/
    font-family: arial;
    position: relative;
}

    .opgNoteThreadBoxLeft::before
    {
        content: "";
        width: 0px;
        height: 0px;
        position: absolute;
        border-left: 20px solid transparent;
        border-right: 20px solid var(--default-color-note-left);
        border-top: 20px solid var(--default-color-note-left);
        border-bottom: 20px solid transparent;
        left: -21px;
        top: 20px;
    }

.opgNoteThreadBoxRight
{
    width: 80%;
    margin: 10px auto 0px auto;
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    background: var(--default-color-note-right);
    color: white;
    padding: 20px;
    text-align: right;
    /*    font-weight: 900;*/
    font-family: arial;
    position: relative;
}

    .opgNoteThreadBoxRight::before
    {
        content: "";
        width: 0px;
        height: 0px;
        position: absolute;
        border-left: 20px solid var(--default-color-note-right);
        border-right: 20px solid transparent;
        border-top: 20px solid var(--default-color-note-right);
        border-bottom: 20px solid transparent;
        right: -21px;
        top: 20px;
    }

.opgGridMenu:not(.opgHeaderMenu) .dx-submenu
{
    background-color: var(--default-color-steelblue) !important;
    color: white !important;
}

    .opgGridMenu:not(.opgHeaderMenu) .dx-submenu .dx-menu-item-text
    {
        color: white !important;
    }

.opgMenuIcon
{
    margin-left: 0.5rem;
    margin-right: 0.75rem;
}

.opgMenuIcon
{
    margin-right: .2rem;
}

.opgGridMenuDefault
{
    background-color: white !important;
}

.opgList
{
    border: 1px solid lightgray !important;
}

.opgSuccessIcon::before
{
    color: var(--default-color-success);
    font-family: "Font Awesome 6 Pro";
    font-weight: 900;
    font-size: 2rem !important;
    content: "\f058"; /*check-circle*/
    margin-right: .5rem;
    vertical-align: middle;
}

.opgInfoIcon::before
{
    color: var(--default-color-steelblue);
    font-family: "Font Awesome 6 Pro";
    font-weight: 900;
    font-size: 1rem !important;
    content: "\f05a"; /*circle-info*/
    margin-right: .5rem;
    vertical-align: middle;
}

.text-with-icon
{
    display: flex;
    font-weight: 400;
    /* align-items: center; /* this will vertically center the icon with the text */ */
}

.opgDocumentForm
{
    width: 100%;
    height: 100%;
}

.opgCustomGridTypeDropDown
{
    vertical-align: bottom;
}

.opgGridLegend
{
    border: 1px solid lightgray;
    max-height: 1rem;
    max-width: 1rem;
    min-width: 1rem;
    padding-left: .5rem;
    padding-right: .5rem;
    margin-right: .25rem;
}

.opgColorBlue
{
    color:blue;
}

.opgMinWidth100
{
    min-width: 100% !important;
}

.opgApprove
{
    font-size: 1.25rem;
    margin-bottom: 1rem;
}

.opgDocumentApproveRow1
{
    vertical-align: bottom;
    font-size: 1rem;
}

.opgDocumentApproveRow2
{
    padding-bottom: .5rem !important;
}

.opgApprove-IsDocumentApprovedText
{
    margin-right: .25rem !important;
}

.opgApprove-IsDocumentApproved
{
}

.opgUpperCase input
{
    text-transform: uppercase !important;
}

.opgApprove-ExpiryDate
{
    width: 180px !important;
    margin-right: 6rem !important;
}

.opgApprove-ExpiryDateText
{
    margin-left: 6rem !important;
    margin-right: .25rem !important;
}

.opg100x100
{
    width: 100% !important;
    height: 100% !important;
    overflow-y: auto !important;
}

.opgEnvironmentCommon
{
    color: red;
    text-transform: uppercase;
    font-size: 1.2rem;
    font-weight: 700;
    margin-top: auto;
    margin-bottom: auto;
    cursor: default !important;
}

.opgBold
{
    font-weight: 700;
}

.opgDevelopment
{
    color: red;
}

.siteNavbar
{
    min-height: 2.5rem !important;
}

.siteNavbarContainer
{
    /*position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;*/ /* ensure navbar stays on top of other content */
    position: -webkit-sticky; /* For Safari */
    position: sticky;
    top: 0;
    z-index: 1000;
    min-height: 3.5rem !important;
    overflow: auto;
    background-color: black;
    /*  min-width: 100% !important;
    width: 100% !important; */ /* Sets the width to 100% of the viewport width */
    /*box-sizing: border-box !important*/ /* Includes padding and border in the element's total width and height */
    ;
}

.verticalText
{
    transform: rotate(-90deg);
    transform-origin: left bottom;
    white-space: nowrap;
}

.fsr1-5
{
    font-size: 1.5rem !important;
}

.fsr1-4
{
    font-size: 1.4rem !important;
}

.fsr1-3
{
    font-size: 1.3rem !important;
}

.fsr1-1
{
    font-size: 1.1rem !important;
}

.dx-checkbox-indeterminate .dx-checkbox-icon::before
{
    /*content: "\f128";*/
    /*    position: absolute;*/
    font-family: "Font Awesome 6 Pro";
    font-weight: 900;
    display: block;
    /*width: 16px;*/
    /*    top: 50%;
    margin-top: -8px;
    left: 50%;*/
    color: transparent;
    background-color: transparent;
    /*margin-left: -8px;*/
}

.dx-icon-save::before, .dx-icon-edit-button-save::before
{
    font-family: "Font Awesome 6 Pro" !important;
    content: "\f0c7" !important;
    font-weight: 900 !important;
}

.dx-icon-revert::before, .dx-icon-edit-button-cancel::before
{
    font-family: "Font Awesome 6 Pro" !important;
    content: "\f2ea" !important;
    font-weight: 900 !important;
}

.opgGridButton.fa-pen::before,
.dx-datagrid .dx-link.dx-link-edit.dx-icon-edit.dx-link-icon::before
{
    font-family: "Font Awesome 6 Pro" !important;
    content: "\f303" !important;
    font-weight: 900 !important;
}

.colorWhite
{
    color: white !important;
}

.colorOpgGreen
{
    color: var(--colorOpgGreen) !important;
}

.colorRed
{
    color: red !important;
}

.colorGray
{
    color: gray !important;
}

.redPillBadge
{
    padding-left: .5rem !important;
    padding-right: .5rem !important;
    cursor: pointer !important;
    text-decoration: none !important;
}



.opgRedCapsuleButton.dx-link.dx-icon
{
    color: white !important;
    background-color: var(--default-color-red) !important;
    min-width: 4rem !important;
    border-radius: 5px !important;
}

/*.opgDocsButton.fa-pen::before,
.dx-datagrid .dx-link.dx-link-edit.dx-icon-edit.dx-link-icon::before
{
    font-family: "Font Awesome 6 Pro" !important;
    content: "\f303" !important;
    font-weight: 900 !important;
}*/

.dx-datagrid .dx-link.dx-link-delete.dx-icon-trash.dx-link-icon::before
{
    font-family: "Font Awesome 6 Pro" !important;
    content: "\f2ed" !important;
    font-weight: 900 !important;
}

.opgGridButton.fa-pen-square::before
{
    font-family: "Font Awesome 6 Pro" !important;
    content: "\f872" !important;
    font-weight: 900 !important;
}

.dx-icon.dx-icon-overflow::before
{
    font-family: "Font Awesome 6 Pro" !important;
    content: "\e10a" !important;
    /*font-weight: 700 !important;*/
}

.dx-icon-xlsxfile::before
{
    font-family: "Font Awesome 6 Pro" !important;
    content: "\f1c3" !important;
    /*    font-weight: 900 !important;*/
    color: var(--default-color-steelblue) !important;
}

.dx-icon-exportselected
{
    color: var(--default-color-steelblue) !important;
}

.dx-icon-column-chooser, .dx-icon-refresh
{
    color: var(--default-color-steelblue) !important;
}

.dx-checkbox
{
    border: solid 1px #f4f4f4 !important;
}

.dx-icon.dx-icon-xlsxfile
{
    height: 20px !important;
}

.dx-icon.fas.fa-recycle.colorSteelBlue
{
    color: var(--default-color-steelblue) !important;
}

.popup-window-title-edit-app-option::before
{
    color: var(--default-color-opgbrand);
    font-family: "Font Awesome 6 Pro";
    font-weight: 900;
    content: "\e5e9";
    margin-right: .625rem;
}

.colorOutlined
{
    color: var(--default-color-outlined) !important;
}

.colorSteelBlue
{
    color: var(--default-color-steelblue) !important;
}

.colorDefault
{
    color: var(--bs-body-color);
}

.colorOpgGreen
{
    color: var(--default-color-opgbrand) !important;
}

.opg-main-menu
{
    left: 0;
}

.validation-summary-errors li:not(.help-block)::before
{
    content: var(--circle-character);
}

.do-not-render-bullets .validation-summary-errors li:not(.help-block)::before
{
    content: none !important;
    display: none !important;
}

.do-not-render-bullets .validation-summary-errors li
{
    list-style-type: disc !important;
    text-align: left !important;
    border-bottom: none !important;
    padding-left: 10px !important;
    list-style-position: outside !important;
    /*    margin-left: 0 !important;
    padding-left: 0 !important;*/
}



/*.do-not-render-bullets li::before,
.do-not-render-bullets li::marker
{
    content: none !important;
    display: none !important;
}

.do-not-render-bullets li
{
    list-style-type: none !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
}*/


.dx-validationsummary-item-content:not(.help-block)::before
{
    content: var(--circle-character);
}

.dx-link-icon
{
    color: var(--default-color-steelblue) !important;
}

.validation-summary-errors ul
{
    text-align: left;
    border-bottom: none;
    padding-left: 20px !important;
    list-style-position: outside !important;
    list-style-type: disc !important;
}

.validation-summary-errors
{
    font-weight: bold !important;
    border-bottom: none !important;
}

.dx-validationsummary-item-content 
{
    font-weight: bold !important;
    border-bottom: none !important;
    list-style-position: outside !important;
    padding-left: 1rem !important;
    text-indent: -1rem !important;
}

.dx-validationsummary-item
{
    font-weight: bold !important;
    border-bottom: none !important;
    list-style-position: outside !important;
    padding-left: 1rem !important;
    /*font-size: .925rem !important;*/
/*    text-indent: -1rem !important;*/
}


.validationExclude
{
    padding-left: initial !important;
    text-indent: initial !important;
}

#home-menu-button
{
    display: flex !important;
    /*flex-wrap: wrap;*/
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    margin-top: auto !important;
    margin-bottom: auto !important;
    cursor: pointer !important;
    max-width: 40px !important;
    max-height: 40px !important;
    background-color: transparent !important;
    color: white !important;
    border-color: white !important;
    border-width: 2px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

    #home-menu-button .dx-icon.fa.fa-2x
    {
        color: white !important;
        margin-top: 3px !important;
        margin-bottom: 1px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        display: block !important;
        text-align: center !important;
        font-weight: 900 !important;
    }



    #home-menu-button .dx-button-text
    {
        text-align: center !important;
        color: var(--default-color-opgbrand) !important;
        font-weight: 700 !important;
        font-size: 10px !important;
        min-height: 100% !important;
        overflow: visible !important;
    }

    #home-menu-button .dx-button-content
    {
        min-width: 100% !important;
        min-height: 100% !important;
        display: flex !important;
        /*flex-wrap: wrap;*/
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        padding-top: 0px !important;
    }

#home-sidebar-menu
{
    padding-top: 0rem;
    border-top: 1px solid white;
    background: var(--menu-color);
    background: lightgray;
    border-right: 1px solid darkgray !important;
    width: var(--sidebar-width);
    max-width: var(--sidebar-width) !important;
    /*height: -o-calc(100% - 56px);*/ /* opera */
    /*height: -webkit-calc(100% - 56px);*/ /* google, safari */
    /*height: -moz-calc(100% - 56px);*/ /* firefox */
    display: block;
    position: absolute;
    left: calc(var(--sidebar-width) * -1);
    margin-bottom: auto;
    min-height: calc(100% - 86px);
}

    #home-sidebar-menu.visible
    {
        left: 0px;
        transition: left 0.3s ease-in-out;
    }

.separator:after
{
    content: '';
    display: inline-block;
    height: 70%; /* Adjust this to your needs */
    vertical-align: middle;
    margin-left: .75rem; /* Space between the item and the line */
    margin-right: .75rem; /* Space between the line and the next item */
    border-right: 1px solid var(--default-color-opgbrand); /* Change color to suit your design */
}


.menuSeparator
{
    display: block !important;
    max-width: 120px !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
    margin-left: 15px !important;
    margin-right: 15px !important;
    border-left: 1px solid var(--default-color-opgbrand) !important;
    border-right: 1px solid var(--default-color-opgbrand) !important;
}

.opgGridColumnUppercase[role="gridcell"]:not(.dx-placeholder),
.opgGridColumnUppercase[role="gridcell"]:not(.dx-placeholder) input
{
    text-transform: uppercase !important;
}

.opgGridColumnUppercase[role="gridcell"] .dx-placeholder,
.opgGridColumnUppercase[role="gridcell"] .dx-placeholder *
{
    text-transform: none !important;
}


.opgGridColumnLowercase[role="gridcell"]:not(.dx-placeholder),
.opgGridColumnLowercase[role="gridcell"]:not(.dx-placeholder) input
{
    text-transform: lowercase !important;
}

.opgGridColumnLowercase[role="gridcell"] .dx-placeholder,
.opgGridColumnLowercase[role="gridcell"] .dx-placeholder *
{
    text-transform: none !important;
}

.dx-placeholder
{
    text-transform: none !important;
}

.dx-invalid-message-content
{
    text-transform: none !important;
}

.opgGreenColor
{
    color: var(--default-color-opgbrand);
}

.opg100x100Hidden
{
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
}

@media (max-width: 991px)
{
    .separator:after
    {
        display: none;
    }

    .menuSeparator
    {
        display: block !important;
        max-width: 120px !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
        margin-left: 15px !important;
        margin-right: 15px !important;
        border-left: none !important;
        border-right: none !important;
    }
}

.dx-overlay-content:has(.opgModalErrorDialog) .dx-toolbar-label > .dx-item-content > div::before
{
    font-family: "Font Awesome 6 Pro" !important;
    content: "\f06a" !important;
    font-weight: 900 !important;
    color: red;
    margin-right: .5rem;
}

.opgListStyleDisc li
{
    list-style-type: disc !important;
}

.opgDialog
{
    /*width: 100% !important;*/
    max-width: 500px !important;
}

    .opgDialog p
    {
        margin-bottom: 1rem !important;
    }

.opgModalErrorDialog
{
    color: red !important;
}

    .opgModalErrorDialog p
    {
        color: red !important;
    }

.opgModalWarningDialog
{
    color: grey !important;
}

    .opgModalWarningDialog p
    {
        color: grey !important;
    }


.opgModalSuccessDialog
{
    color: green !important;
}

    .opgModalSuccessDialog p,
    .opgModalSuccessDialog ul,
    .opgModalSuccessDialog li
    {
        color: green !important;
    }

.opgModalInfoDialog
{
    color: var(--default-color-info) !important;
}

    .opgModalInfoDialog p
    {
        color: green !important;
    }

.opgModalConfirmDialog
{
    color: green !important;
}

    .opgModalConfirmDialog p
    {
        color: green !important;
    }

.dx-overlay-content:has(.opgModalSuccessDialog) .dx-toolbar-label > .dx-item-content > div::before
{
    font-family: "Font Awesome 6 Pro" !important;
    content: "\f058" !important; /*fa-circle-check*/
    font-weight: 900 !important;
    color: var(--default-color-opgbrand);
    margin-right: .5rem;
}


.dx-overlay-content:has(.opgModalWarningDialog) .dx-toolbar-label > .dx-item-content > div::before
{
    font-family: "Font Awesome 6 Pro" !important;
    content: "\f071" !important; /*fa-triangle-exclamation*/
    font-weight: 900 !important;
    color: var(--default-color-warning);
    margin-right: .5rem;
}


.dx-overlay-content:has(.opgModalInfoDialog) .dx-toolbar-label > .dx-item-content > div::before
{
    /*font-family: "Font Awesome 6 Pro" !important;
    content: "\f058" !important;*/ /*fa-circle-check*/
    /*font-weight: 900 !important;
    color: var(--default-color-opgbrand);
    margin-right: .5rem;*/

    color: var(--default-color-steelblue);
    /* background-color: white !important;*/
    font-family: "Font Awesome 6 Pro";
    font-weight: 900 !important;
    content: "\f05a"; /*circle-info*/
    margin-right: .5rem;
    font-size: 1.25rem !important;
    vertical-align: middle !important;
}

.dx-overlay-content:has(.opgModalConfirmDialog) .dx-toolbar-label > .dx-item-content > div::before, .dx-overlay-content:has(.opg-confirmation-dialog-text) .dx-toolbar-label > .dx-item-content > div::before
{
    font-family: "Font Awesome 6 Pro" !important;
    content: "\f059" !important; /*fa-circle-question*/
    font-weight: 900 !important;
    color: orange; /*var(--default-color-opgbrand);*/
    margin-right: .5rem;
}

.dx-command-edit.dx-command-edit-with-icons
{
    height: 32px !important;
}

.dx-header-row .dx-command-edit.dx-command-edit-with-icons,
.dx-datagrid-filter-row .dx-command-edit.dx-command-edit-with-icons
{
    height: unset !important;
}

/*.dx-datagrid .dx-datagrid-rowsview .dx-data-row .dx-command-edit.dx-command-edit-with-icons*/ /*.dx-cell-focus-disabled*/
/*{
    display: flex;
    align-items: center;
    justify-content: flex-end;*/ /* Adjust if you need the content right-aligned */
/*}*/

.dx-datagrid .dx-datagrid-rowsview .dx-data-row .dx-command-edit.dx-command-edit-with-icons
{
    width: auto;
    white-space: nowrap;
    /*   text-overflow: ellipsis;
    overflow: hidden;*/
}

.opgFieldRequired::after
{
    content: "*";
    font-weight: 900;
    color: red;
    margin-left: .15rem;
}

.two-column-list ul
{
    display: flex;
    flex-wrap: wrap;
    /*list-style-type: none;*/
    padding: 0;
}

.two-column-list li
{
    flex: 1 1 50%; /* adjust the second 50% to control the minimum width of each column */
    /*padding: 5px; */
}

.three-column-list ul
{
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
}




.flex-box
{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.GridResizeWidthToMatchMaster
{
    width: 100% !important;
    min-width: 100% !important;
}


.opgSuccessIcon::before
{
    color: var(--default-color-success);
    font-family: "Font Awesome 6 Pro";
    font-weight: 900;
    content: "\f058"; /*check-circle*/
    margin-right: .5rem;
    vertical-align: middle;
}

.opgErrorIcon::before
{
    color: var(--default-color-error);
    font-family: "Font Awesome 6 Pro";
    font-weight: 900;
    content: "\f057"; /*times-circle*/
    margin-right: .5rem;
    vertical-align: middle;
}


.opgInfoIcon
{
    color: var(--default-color-opgbrand);
}

    .opgInfoIcon::before
    {
        color: var(--default-color-info);
        font-family: "Font Awesome 6 Pro";
        font-weight: 900;
        content: "\f05a"; /*info-circle*/
        margin-right: .5rem;
        vertical-align: middle;
    }

.opgInfoIconAfter
{
    color: var(--default-color-opgbrand);
}

    .opgInfoIconAfter::after
    {
        color: var(--default-color-info);
        font-family: "Font Awesome 6 Pro";
        height: 100%;
        font-weight: 900;
        content: "\f05a"; /*info-circle*/
        margin-left: .5rem;
        vertical-align: middle;
    }

.opgQuestionIcon::before
{
    color: var(--default-color-question);
    font-family: "Font Awesome 6 Pro";
    font-weight: 900;
    font-size: 2rem !important;
    content: "\f059"; /*question-circle*/
    margin-right: .5rem;
    vertical-align: middle;
}

.opg-align-bottom-right
{
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    height: 100%;
}

.opg-grid-wrap-text
{
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

@keyframes slow-flash
{
    0%, 100%
    {
        opacity: 1;
    }

    50%
    {
        opacity: 0.2;
    }
}

.slow-flash
{
    animation: slow-flash 2s infinite;
}

.small-caps
{
    font-variant: small-caps;
}

.dx-overlay-wrapper.dx-invalid-message
{
    width: 100% !important; /* Make the wrapper span the full width of the control */
}

.dx-overlay-content.dx-invalid-message-content
{
    width: 100% !important; /* Match the width of the wrapper */
    max-width: none !important; /* Remove max-width restriction */
    box-sizing: border-box; /* Include padding within the width */
}

.dx-field-item-required-mark
{
    font-size: 1rem !important;
    font-weight: 900 !important;
    vertical-align: bottom !important;
    line-height: 19px !important;
    /*    position: relative; 
    height: 100%; 
    display: inline-flex; 
    align-items: center; */
}

/*.opgDialog
{

}*/

.dx-dialog-message .context-icon.warning::before
{
    color: var(--default-color-warning);
    font-family: "Font Awesome 6 Pro";
    font-weight: 900;
    font-size: var(--default-dialog-iconsize) !important;
    content: "\f071"; /*triangle-exclamation*/
    margin-right: 1rem;
    vertical-align: middle;
}

.dx-dialog-message .context-icon.success::before
{
    color: var(--default-color-success);
    font-family: "Font Awesome 6 Pro";
    font-weight: 900;
    font-size: var(--default-dialog-iconsize) !important;
    content: "\f058"; /*check-circle*/
    margin-right: .5rem;
    vertical-align: middle;
    display: inline-block;
}

.dx-dialog-message .context-icon.error::before
{
    color: var(--default-color-error);
    font-family: "Font Awesome 6 Pro";
    font-weight: 900;
    font-size: var(--default-dialog-iconsize) !important;
    content: "\f06a"; /*circle-exclamation*/
    margin-right: .5rem;
    vertical-align: middle;
    display: inline-block;
}

.dx-dialog-message .context-icon.info::before
{
    color: var(--default-color-info);
    font-family: "Font Awesome 6 Pro";
    font-weight: 900;
    font-size: var(--default-dialog-iconsize) !important;
    content: "\f05a"; /*circle-info*/
    margin-right: .5rem;
    vertical-align: middle;
    display: inline-block;
}

.dx-dialog-message .context-icon.confirm::before
{
    color: var(--default-color-confirm);
    font-family: "Font Awesome 6 Pro";
    font-weight: 900;
    font-size: var(--default-dialog-iconsize) !important;
    content: "\f059" !important; /*fa-circle-question*/
    margin-right: .5rem;
    vertical-align: middle;
    display: inline-block;
}

.dx-dialog-message .opgDialogFontLook
{
    display: inline block;
    align-items: center;
}

.section-title
{
    font-size: 1rem;
    color: var(--default-color-steelblue);
    line-height: 1.1;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    text-align: center;
    width: 100%;
    display: block;
    font-weight: var(--default-font-weight);
}

.opgDialogWrapper
{
    max-width: 600px;
}