/* Please see documentation at https://docs.microsoft.com/aspnet/core/client-side/bundling-and-minification
for details on configuring this project to bundle and minify static web assets. */

:root
{

    --default-color-lightgray: lightgray;
    --default-color-steelblue: steelblue;
    --default-color-turquoise: #00e5ee;
    /*    --default-color1: #40e0d0;*/
    --default-color-opgbrand: goldenrod;
    --default-color-darkblue: darkblue;
    --default-color-fairlydarkblue: #396a93;
    --default-padding: 15px;
    --default-font-weight: 700;
    --default-font-size: 14px;
    --default-font-family: 'Helvetica Neue','Segoe UI',Helvetica,Verdana,sans-serif;
    --default-line-height: 1.7;
    --default-toolbar-margin-right: 0px;
    --circle-character: "• ";
    --circle-character-spacebefore: " • ";
    --sidebar-width: 280px;
    --menu-color: darkslategray;
    --menu-color: black;
    --popup-window-title-icon-content: "\f055";
    --default-color-success: #5cb85c;
    --default-color-error: red;
    --default-color-info: steelblue;
    --default-color-question: steelblue;
    --default-color-highlightgridcell: #ffff77;
    --default-color-highlightqualgridcell: #ccffff;
    /*--default-color-note-left: #e6e6e6;*/
    --default-color-note-left: #00004d;
    --default-color-note-right: #6dbd43;
}

-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;

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

.moduleicon
{
    font-size: 12rem;
    align-content:center;
    text-align:center;
}

.containermoduleicon
{
    align-content: center;
    text-align: center;
}

.portalcontainer
{
    padding:2rem;
    margin-top:3rem;
    text-transform:uppercase;
}

.portalmoduletext
{
    color:black;
    margin-left:auto;
    margin-right:auto;
    margin-top:1rem;

}

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

.color-lightyellow
{
    color: lightyellow;
}

.c-pointer
{
    cursor: pointer !important;
}

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

/*.dx-row dx-column-lines dx-master-detail-row
{
    background-color: lightgray !important;
}
.dx-master-detail-row
{
    background-color:lightgray !important;
}*/

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

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

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


.opgTrainingModule
{
    color: var(--default-color-opgbrand);
    font-size: 1.2rem;
    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;
        }

.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;
}


.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;
}


.opgTest
{
    color: red;
    text-transform: uppercase;
}

.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;
    }

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



.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;
    }


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




/*.dx-menu-item-text
{
    background-color: transparent !important;
    color: white !important;
}*/

#NotesThreadFormChild *
{
    max-width: 100% !important;
}

#NotesThreadFormChild p
{
    white-space: normal;
}

#NotesThreadFormChild h3
{
    white-space: normal;
}

/*.dx-context-menu:not(.dx-filter-menu):not(.opgHeaderMenu) .dx-submenu
{
    background-color: var(--default-color-steelblue) !important;
    color: white !important;
}*/

/*    .dx-context-menu:not(.dx-filter-menu):not(.opgHeaderMenu) .dx-submenu .dx-menu-item-text
    {
        color: white !important;
    }*/


/*.dx-icon dx-icon-context-menu-sort-asc
{
    color:black !important;
    background-color:white !important;
}*/

.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;
    }
/*.opgGridMenu
{
    background-color: var(--default-color-steelblue) !important;
    color: white !important;
}*/
/*    .opgGridMenu .dx-menu-item-text:not(.dx-icon)
    {
        background-color: var(--default-color-steelblue) !important;
        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 5 Pro";
    font-weight: 900;
    content: "\f058"; /*check-circle*/
    margin-right: .5rem;
    vertical-align: middle;
}

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

.opgCourseDropDownBox
{
    margin-top: auto !important;
    margin-bottom: 1px !important;
}

.opgUnlistedCourse
{
    line-height: 1.0 !important;
    /*top:-5px !important;*/
}

.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;
}
/*
#CheckboxDocumentApproveContainer
{
    margin-bottom: 1rem;
}*/

/*#DocumentNoteButtonContainer
{
    color: white;
    background-color: var(--default-color-steelblue);
}*/

.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
{
}

.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;
}

.opgAlignCenter
{
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.opgApprove-NoteButton
{
    color: white !important;
    background-color: var(--default-color-steelblue) !important;
    vertical-align: top !important;
    /*max-height: 36px !important;
    width: 190px !important;*/
}

    .opgApprove-NoteButton:hover
    {
        color: white !important;
        background-color: var(--default-color-steelblue) !important;
        vertical-align: top !important;
        /*        max-height: 36px !important;
        width: 190px !important;*/
    }

.opgApprove-SendEmailButton
{
    color: white !important;
    background-color: var(--default-color-steelblue) !important;
    vertical-align: top !important;
    max-height: 36px !important;
    width: 190px !important;
}

    .opgApprove-SendEmailButton:hover
    {
        color: white !important;
        background-color: var(--default-color-steelblue) !important;
        vertical-align: top !important;
        width: 190px !important;
        max-height: 36px !important;
    }


.opgHighlightQualGridCell
{
    background-color: var(--default-color-highlightqualgridcell) !important;
    color: lightgray !important;
}

.opgHighlightGridCell
{
    background-color: var(--default-color-highlightgridcell) !important;
}

.opgTriStateCheckboxColor
{
    color: #e8e8e8;
    background-color: #e8e8e8;
}

.opgErrorIcon::before
{
    color: var(--default-color-error);
    font-family: "Font Awesome 5 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 5 Pro";
        font-weight: 900;
        content: "\f05a"; /*info-circle*/
        margin-right: .5rem;
        vertical-align: middle;
    }

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

.opgHide
{
    visibility: hidden;
}

.opgDefaultButton
{
    color: white;
    background-color: var(--default-color-steelblue);
    min-width: 200px;
    height: 36px;
}

.opg-window-toolbar-button.last-button
{
    margin-right: var(--default-toolbar-margin-right);
}

.opg-dialog-first-button
{
    margin-left: 30px !important;
}

.opgWhiteIcon
{
    color: white !important;
}

.opgGridButton
{
    /*color: var(--default-color-turquoise);*/
    text-decoration: none !important;
}

.opgUploadMaxSizeMessage
{
    /*margin-left:1rem;*/
    margin-top: .2rem;
    margin-bottom: 1rem;
    color: var(--default-color-opgbrand);
}

    .opgUploadMaxSizeMessage::before
    {
        color: var(--default-color-info);
        font-family: "Font Awesome 5 Pro";
        font-weight: 900;
        content: "\f05a"; /*info-circle*/
        margin-right: 5px;
    }

.opg-main-menu
{
    line-height: 2.5;
    color: white;
    background-color: transparent;
    border: none;
    box-shadow: none;
    -webkit-box-shadow: none;
}

    .opg-main-menu:focus
    {
        /* outline:none;*/
    }

    .opg-main-menu li.dx-treeview-node-is-leaf::before
    {
    }

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

div.sticky
{
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 0;
    z-index: 100000;
}

.dx-popup-content
{
    margin-top: 20px !important;
    padding-top: 0px !important;
}

.coming-soon::before
{
    color: var(--default-color-steelblue);
    font-family: "Font Awesome 5 Pro";
    font-weight: 900;
    content: "\f0a4"; /*hand-point-right*/
    margin-right: 5px;
}


.masterdetail.ResizeWidthToMatchMasterGrid
{
    margin-left: unset !important;
    border-left: solid 5px lightgray;
    padding-left: 5px;
}

.grid-master-detail-title
{
    border-bottom: 1px solid var(--default-color-opgbrand) !important;
}

    .grid-master-detail-title::before
    {
        color: var(--default-color-opgbrand);
        font-family: "Font Awesome 5 Pro";
        font-weight: 900;
        content: "\f101"; /*angle-double-right*/
        margin-right: 0.625rem;
    }

#OpgAssignTrainingPersonText
{
    padding-bottom: .25rem;
}

/*.dx-popup-title::before
{
    color: var(--default-color-opgbrand);
    font-family: "Font Awesome 5 Pro";
    font-weight: 900;
    content: "\f128";*/ /*fa-question*/
/*margin-right: 0.625rem;
    display:inline;
}*/

.opg-dialog-confirmation-title:before
{
    color: var(--default-color-opgbrand);
    font-family: "Font Awesome 5 Pro";
    font-weight: 900;
    content: "\f128"; /*fa-question*/
    margin-right: 0.625rem;
}

.opg-text-double-arrow-before
{
    margin-bottom: .25rem;
    width: 100%;
    border-bottom: 1px solid var(--default-color-opgbrand) !important;
}

.opg-confirmation-dialog-text::before
{
    color: var(--default-color-opgbrand);
    font-family: "Font Awesome 5 Pro";
    font-weight: 900;
    font-size: x-large;
    content: "\f059"; /*fa-question-circle*/
    margin-right: 0.625rem;
}

.dx-button.dx-button-normal.dx-button-mode-contained.dx-widget.dx-button-has-text.dx-dialog-button:hover
{
    color: white !important;
    background-color: var(--default-color-fairlydarkblue) !important;
}

.dx-button.dx-button-normal.dx-button-mode-contained.dx-widget.dx-button-has-text.dx-dialog-button:focus
{
    color: white !important;
    border: 1px solid black;
}

.dx-button.dx-button-normal.dx-button-mode-contained.dx-widget.dx-button-has-text.dx-dialog-button
{
    color: white !important;
    background-color: var(--default-color-steelblue) !important;
}

.opg-title-text
{
    font-family: var(--default-font-family);
    color: black;
}

.opg-text-double-arrow-before::before
{
    color: var(--default-color-opgbrand);
    font-family: "Font Awesome 5 Pro";
    font-weight: 900;
    content: "\f101"; /*angle-double-right*/
    margin-right: 0.4rem;
}

.dx-popup-title
{
    background-color: black !important;
    color: white !important;
}

.popup-window-title-view-sendemail::before
{
    color: var(--default-color-opgbrand);
    font-family: "Font Awesome 5 Pro";
    font-weight: 900;
    content: "\f0e0";
    margin-right: .625rem;
}

.popup-window-title
{
    color: white !important;
    font-family: var(--default-font-family);
}

/*.popup-window-title::before
    {
        color: var(--default-color-opgbrand);
        font-family: "Font Awesome 5 Pro";
        font-weight: 900;*/
/*content: var(--popup-window-title-icon-content) ;*/
/*margin-right: .625rem;
    }*/

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

.popup-window-title-file-certificate::before
{
    color: var(--default-color-opgbrand);
    font-family: "Font Awesome 5 Pro";
    font-weight: 900;
    content: "\f5f3";
    margin-right: .625rem;
}

.popup-window-title-add::before
{
    color: var(--default-color-opgbrand);
    font-family: "Font Awesome 5 Pro";
    font-weight: 900;
    content: "\f055";
    margin-right: .625rem;
}

.popup-window-title-assign-training::before
{
    color: var(--default-color-opgbrand);
    font-family: "Font Awesome 5 Pro";
    font-weight: 900;
    content: "\f501";
    margin-right: .625rem;
}

.popup-window-title-edit-account-info::before
{
    color: var(--default-color-opgbrand);
    font-family: "Font Awesome 5 Pro";
    font-weight: 900;
    content: "\f023";
    margin-right: .625rem;
}

.popup-window-title-view-notes::before
{
    color: var(--default-color-opgbrand);
    font-family: "Font Awesome 5 Pro";
    font-weight: 900;
    content: "\f4b6";
    margin-right: .625rem;
}

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

.popup-window-title-view-note::before
{
    color: var(--default-color-opgbrand);
    font-family: "Font Awesome 5 Pro";
    font-weight: 900;
    content: "\f27a";
    margin-right: .625rem;
}

.popup-window-title-upload-document::before
{
    color: var(--default-color-opgbrand);
    font-family: "Font Awesome 5 Pro";
    font-weight: 900;
    /*content: "\f574";*/
    content: "\e494";
    margin-right: .625rem;
}


.popup-window-title-replace-document::before
{
    color: var(--default-color-opgbrand);
    font-family: "Font Awesome 5 Pro";
    font-weight: 900;
    content: "\f56f";
    margin-right: .625rem;
}

.popup-window-title-document-pdf::before
{
    color: var(--default-color-opgbrand);
    font-family: "Font Awesome 5 Pro";
    font-weight: 900;
    content: "\f1c1"; /*fa-file-pdf*/
    margin-right: .625rem;
}

.opgDocumentImage
{
    /*    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
*/
    object-fit: cover;
    width: 100%;
    height: 100vh;
    /*height: 875px;*/
}

.popup-window-title-document-image::before
{
    color: var(--default-color-opgbrand);
    font-family: "Font Awesome 5 Pro";
    font-weight: 900;
    content: "\f1c5"; /*fa-file-image*/
    margin-right: .625rem;
}

.popup-window-title-change-password::before
{
    color: var(--default-color-opgbrand);
    font-family: "Font Awesome 5 Pro";
    font-weight: 900;
    content: "\f084"; /*fa-key*/
    margin-right: .625rem;
}

.popup-window-title-edit-account-information::before
{
    color: var(--default-color-opgbrand);
    font-family: "Font Awesome 5 Pro";
    font-weight: 900;
    content: "\f4ff"; /*fa-user-edit*/
    margin-right: .625rem;
}

.popup-window-title-icon
{
    color: var(--default-color-opgbrand) !important;
    margin-right: .625rem !important;
}

.exception-dialog-content
{
    padding: 1rem;
    line-height: 1.5rem;
}

.opg-dialog-button
{
    color: white !important;
    background-color: var(--default-color-steelblue) !important;
}

.opg-window-toolbar-button
{
    color: white !important;
    background-color: var(--default-color-steelblue) !important;
    min-width: 150px !important;
}

.opg-save
{
    background-color: red !important;
    color: white !important;
}

.opg-custom-icon
{
    color: white !important;
    background-color: transparent !important;
}

.opg-custom-icon-inverse
{
    color: white !important;
    background-color: var(--default-color-steelblue) !important;
}

.opg-icon-reverse
{
    background-color: white !important;
    color: var(--default-color-steelblue) !important;
}

.exception-dialog-table
{
    vertical-align: top;
    display: -webkit-box; /* to make td as block*/
    word-break: break-word; /* to make content justify*/
}

.exception-dialog-header-text
{
    padding: 1rem;
    padding-top: .8rem;
}

.exception-dialog-table tr td
{
    vertical-align: top;
    white-space: normal;
}

.exception-dialog-icon
{
    color: red;
    vertical-align: top;
    font-size: 3rem;
}

.information-dialog-icon
{
    color: var(--default-color-steelblue);
    vertical-align: top;
    font-size: 3rem;
}

/*.warning-dialog-icon
{
    color: yellow;
    vertical-align: top;
    font-size: 3rem;
}*/

/*.popup-exception-title-header
{
}*/


.popup-exception-title::before
{
    color: red;
    font-family: "Font Awesome 5 Pro";
    font-weight: 900;
    content: "\f057"; /*fa-circle-xmark*/
    margin-right: .625rem;
}

/*.popup-warning-title::before
{
    color: yellow;
    font-family: "Font Awesome 5 Pro";
    font-weight: 900;
    content: "\f06a"; /*fa-exclamation-circle*/
    margin-right: .625rem;
}*/


.popup-information-title::before
{
    color: var(--default-color-info);
    font-family: "Font Awesome 5 Pro";
    font-weight: 900;
    content: "\f05a"; /*fa-info-circle*/
    margin-right: .625rem;
}

.grid-master-detail-footer
{
    margin-top: 0.45rem;
    border-top: 1px solid var(--default-color-opgbrand) !important;
}

    .grid-master-detail-footer::before
    {
        color: var(--default-color-opgbrand);
        font-family: "Font Awesome 5 Pro";
        font-weight: 900;
        content: "\f100"; /*angle-double-left*/
        margin-right: 5px;
    }

.grid-master-detail-title-append::before
{
    /*    content:var(--circle-character-spacebefore);*/
    color: var(--default-color-opgbrand);
    font-family: "Font Awesome 5 Pro";
    font-weight: 900;
    content: "\f105"; /*angle-right*/
    margin-left: 5px;
    margin-right: 5px;
}

.opg-main-menu li.dx-treeview-node-is-leaf:hover
{
    color: var(--default-color-opgbrand);
    cursor: pointer;
}

.opg-main-menu i.dx-icon
{
    /*color: var(--default-color-opgbrand);*/
    margin-right: 5px;
}

/* Provide sufficient contrast against white background */
/*a
{*/
/*color: #0366d6;*/
/*color: goldenrod;
}*/

.spacer
{
    clear: both;
    border: none;
    width: 100%;
}

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

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

.btn-primary
{
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.nav-pills .nav-link.active, .nav-pills .show > .nav-link
{
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

/* Sticky footer styles
-------------------------------------------------- */

.color-white
{
    color: white;
}

.home-bar-title
{
    font-weight: 700;
    font-size: 22px;
    text-transform: uppercase;
    text-decoration: none;
}

.close
{
    display: none;
}

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

.opg-account-logo
{
    max-width: 105px;
    max-height: 31px;
    padding-right: 0px;
    margin-right: 0px;
    /*border-right:1px solid goldenrod;*/
}

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

.dx-validationsummary-item-content
{
    font-weight: bold;
    border-bottom: none;
    list-style-position: outside;
}

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

.validation-summary-errors li:not(.help-block)::before
{
    content: var(--circle-character);
}
/*
.dx-item-content.dx-validationsummary-item
{
    list-style-position:outside !important;
    list-style-type:disc !important;
    margin-left:.5rem;
}*/

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

/*.dx-form-validation-summary.dx-validationsummary.dx-widget.dx-collection
{
    list-style-position: outside !important;
}*/
.menu-button
{
    text-transform: uppercase;
    font-size: 10px;
    font-weight: 700;
    text-align: center;
    color: var(--default-color-opgbrand);
    max-height: 40px;
}

.separator-default
{
    color: var(--default-color-opgbrand);
    margin-left: 6px;
    margin-right: 6px;
}

.fa-bars
{
    text-align: center;
    display: inline-block;
    */ background-color: black;
    color: white;
}

.fa-window-close
{
    text-align: center;
    display: inline-block;
    color: white;
}

.background-grey
{
    background-color: #e9ecef;
}

.background-black
{
    background-color: black;
}

@media (min-width: 768px)
{
    html
    {
        font-size: 16px;
    }
}

.border-top
{
    border-top: 1px solid #e5e5e5;
}

.border-bottom
{
    border-bottom: 1px solid #e5e5e5;
}

.box-shadow
{
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}

button.accept-policy
{
    font-size: 1rem;
    line-height: inherit;
}

/* Sticky footer styles
-------------------------------------------------- */
html
{
    position: relative;
    min-height: 100%;
    font-family: var(--default-font-family);
}

body
{
    /* Margin bottom by footer height */
    margin-bottom: 60px;
    font-family: var(--default-font-family);
    font-size: var(--default-font-size);
    background-color: var(--default-color-lightgray);
}

.lightgray
{
    color: var(--default-color-lightgray);
}

.pipe-left
{
    border-left: 1px solid var(--default-color-opgbrand);
    padding-left: 4px;
    margin-left: 4px;
}

.footer
{
    position: absolute;
    bottom: 0;
    width: 100%;
    white-space: nowrap;
    line-height: 60px; /* Vertically center the text there */
}

/*.dx-form .dx-field-item-label-text {
    font-weight: bold;
}*/

.dx-field-item-label-text
{
    font-weight: 700;
}

.marginLeft10
{
    margin-left: 10px;
}

.navbar.navbar-default
{
    background-color: black;
}

.navbar-brand
{
    margin-left: 1rem;
}

.nav-separator
{
}

.alignToBottom
{
    position: absolute;
    bottom: 0;
}

.hide-overflow
{
    overflow: hidden;
}

.nav-hide
{
    display: block;
}

.padding-top-2rem
{
    padding-top: 2rem;
}

.padding-top-20px
{
    padding-top: 20px;
}

.modal-title
{
    font-size: 20px;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-align: center;
    width: 100%;
    color: var(--default-color-turquoise);
    font-weight: var(--default-font-weight);
}

.modal-body
{
    font-size: var(--default-font-size);
    line-height: var(--default-line-height);
    color: black;
    font-family: var(--default-font-family);
}

.modal-footer
{
    width: 100%;
    float: right;
}

.box .row.header
{
    flex: 0 1 auto;
    /* The above is shorthand for:
  flex-grow: 0,
  flex-shrink: 1,
  flex-basis: auto
  */
}

.box
{
    display: flex;
    flex-flow: column;
    height: 100%;
}

.opg-main-menu-ul
{
    max-width: 279px;
    min-width: 279px;
    /*max-height: -o-calc(100% - 56px);*/ /* opera */
    /*max-height: -webkit-calc(100% - 56px);*/ /* google, safari */
    /*max-height: -moz-calc(100% - 56px);*/ /* firefox */
    /*min-height: -o-calc(100% - 56px);*/ /* opera */
    /*min-height: -webkit-calc(100% - 56px);*/ /* google, safari */
    /*min-height: -moz-calc(100% - 56px);*/ /* firefox */
}

.unset *
{
    all: initial;
}

/*#sidebar
{
    max-width: var(--sidebar-width) !important;
}*/

/*#home-sidebar-menu
{
    padding-top: 0rem;
    border-top: 1px solid white;
    background: var(--menu-color);
    background: gray;*/
    /*background: var(--default-color-steelblue);*/
    /*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: -280px;
    margin-bottom: auto;
}

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

#home-content-container
{
    padding: 10px;
    /* position:relative;*/
}

/*------------------------------------------------------------------
[ Responsive ]*/

@media (max-width: 1200px)
{
    .navbar
    {
        max-height: 70px;
        min-height:56px;
    }

    .nav-separator
    {
        display: none;
    }

    .nav-hide
    {
        display: block;
    }
}

@media (max-width: 992px)
{
    .hide-overflow
    {
        overflow: hidden;
    }

    .nav-separator
    {
        display: none;
    }

    .navbar
    {
        max-height: 70px;
        min-height: 56px;
    }

    .nav-hide
    {
        display: none;
    }
}

@media (max-width: 768px)
{
    .hide-overflow
    {
        overflow: auto;
    }

    .nav-separator
    {
        display: none;
    }

    .navbar
    {
    }

    .nav-hide
    {
        display: none;
    }
}

@media (max-width: 576px)
{
    .hide-overflow
    {
        overflow: auto;
    }

    .nav-separator
    {
        display: none;
    }

    .navbar
    {
    }

    .nav-hide
    {
        display: none;
    }
}

/*opg main menu*/

.opg-main-menu
{
    line-height: 2.5rem;
}

.opg-main-nav-link.collapsed:after
{
    /*content: " ▾";*/
    font-family: "Font Awesome 5 Pro";
    font-weight: 900;
    content: "\f105";
    padding-left: 1.5rem;
    color: white;
}

.opg-main-nav-link:not(.collapsed):after
{
    /*content: " ▴";*/
    font-family: "Font Awesome 5 Pro";
    font-weight: 900;
    content: "\f107";
    padding-left: 1.5rem;
    color: white;
}

.opg-menu-parent
{
    text-transform: uppercase;
    letter-spacing: 1.25px;
    background-color: var(--menu-color);
}

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

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

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

/*.opg-main-nav-item i
{
    padding-right: 1.5rem;
}*/

.opg-menu-button
{
    margin-top: 0px !important;
    border-width: 2px !important;
    border-radius: 5px !important;
    border-color: white !important;
}

    .opg-menu-button .dx-icon
    {
        color: white !important;
    }

#home-menu-button
{
    /*padding-left: 6px !important;*/
    cursor: pointer;
    max-width: 40px !important;
    background-color: transparent !important;
    color: white !important;
    border-color: var(--default-color-opgbrand) !important;
    border-color: white !important;
}

#home-menu-button
{
}

    #home-menu-button .dx-icon.fa.fa-2x
    {
        color: white !important;
        padding-left: 6px !important;
    }

    #home-menu-button .dx-button-content
    {
        padding-left: 3px;
        padding-top: 2px;
        text-transform: uppercase;
        font-size: 10px;
        font-weight: 700;
        text-align: center;
        color: var(--default-color-opgbrand);
        max-height: 36px;
        min-height: 36px;
        min-width: 40px;
        display: flex;
        flex-wrap: wrap;
        margin-top: 0;
    }



.opg-navigation-title
{
    color: black;
    /*    text-transform: uppercase;
    letter-spacing:1.1;*/
}

    .opg-navigation-title .fas
    {
        color: var(--default-color-opgbrand);
    }

/*#opg-navigation-title::after
{
    display: flex;
    flex-direction: row;
    content: "";
    flex: 1 1;
    border-bottom: 1px solid #000;
    margin: auto;
}*/
/*.opg-menu-nonparent i
{
    color:gainsboro;
}

    .opg-menu-nonparent i:hover
    {
        color: var(--default-color-steelblue);
    }*/
#MainMenuBottom
{
    background-image: url('../images/CameronFalls.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    filter: grayscale(100%);
}
/*end of opg main menu*/

/* devexpress*/

.opg-toolbar-button
{
    color: var(--default-color-steelblue) !important;
}

.dx-toolbar .dx-icon:not(.fa-window-close):not(.fa-bars):not(.opg-override)
{
    color: var(--default-color-steelblue) !important;
}

.dx-header-row, .dx-tab-text
{
    color: black !important;
    font-weight: bold;
    /*    text-shadow: 1px 1px 5px goldenrod;*/
}

.dx-form-group-with-caption > .dx-form-group-content
{
    border-top: 1px solid var(--default-color-opgbrand) !important;
    padding-bottom: 20px;
}

/*.dx-fileuploader-input-wrapper > .dx-button
{
    float:none !important;
}*/

.opgFormHeadingNoLeftPadding > .dx-field-item-content > .dx-form-group-with-caption
{
    padding-left: 0px !important;
}

.dx-fileuploader-button.dx-fileuploader-upload-button.dx-button.dx-button-normal.dx-button-mode-contained.dx-widget.dx-button-has-text
{
    visibility: hidden !important;
}

/*.dx-fileuploader-button.dx-fileuploader-upload-button.dx-button.dx-button-normal.dx-button-mode-contained.dx-widget.dx-button-has-text::before
    {
        color: white !important;
        font-family: "Font Awesome 5 Pro";
        font-weight: 900;
        content: "\f574";*/ /*file-upload*/
/*margin-right: 0.625rem;
    }*/

.dx-fileuploader-button
{
    background-color: var(--default-color-steelblue) !important;
    color: white !important;
}

.dx-form-group-caption
{
    color: black !important;
    font-weight: 500 !important;
    font-family: var(--default-font-family) !important;
    margin-bottom: 1rem !important;
}

    .dx-form-group-caption::before
    {
        color: var(--default-color-opgbrand);
        font-family: "Font Awesome 5 Pro";
        font-weight: 900;
        content: "\f101"; /*angle-double-right*/
        margin-right: 0.625rem;
    }

.dx-fileuploader-file-status-message
{
    color: green;
}

    .dx-fileuploader-file-status-message.opgError
    {
        color: red;
        font-weight: bold;
    }

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

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

/*.dx-checkbox-indeterminate .dx-checkbox-icon
{
    font: 16px/1 DXIcons;
    font-size: 16px;
    color: steelblue;
    text-align: center;
    line-height: 16px;
}
*/
/*.dx-fileuploader-input-container
{
    border: dotted 1px steelblue !important;
    width: 500px !important;
    height: 150px !important;
    margin-left:2rem !important;
    padding-left:2rem !important;
}*/

/* end of devexpress*/