/* COLORS */
/*https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties*/

:root {
    --Color_Toolbar_BG: #2d3e4f;
    --Color_Toolbar_Text: #ecf0f1;
    --Color_Toolbar_Text_Hover: #ffffff;
    --Color_Toolbar_Secondary_BG: #226cab;
    --Color_Toolbar_Secondary_Text: #ffffff;
    --Color_Toolbar_Secondary_Text_Hover: #ffffff;
    --Color_Toolbar_Badge: #226CAB;
    --Color_Toolbar_Badge_Text: #ffffff;
    --Color_Toolbar_Badge_Highlight: #ff0000;
    --Color_Toolbar_Badge_Highlight_Text: #fcfc77;
    /*Login Screen*/
    --Color_Login_BG: #e8e8e8;
    --Color_Login_Text: #000000;
    --Color_Login_BG_Left: #226CAB;
    --Color_Login_Text_Left: #e8e8e8;
    --Color_Login_Input_Left: #3779B3;
    --Color_Login_Button_BG_Left: #57B7B3;
    --Color_Login_Button_Text_Left: #ffffff;
    --Color_Login_BG_Right: #000000;
    --Color_Login_Text_Right: #e8e8e8;
    --Color_Login_Input_Right: #e8e8e8;
    --Color_Login_Button_BG_Right: #57B7B3;
    --Color_Login_Button_Text_Right: #e8e8e8;
    /*Pages and Panels*/
    --Color_Panel_Header_BG: #226CAB;
    --Color_Panel_Header_Text: #e8e8e8;
    --Color_Panel_Header_Border: initial;
    --Color_Panel_Header_Button_BG: initial;
    --Color_Panel_Header_Button_Text: initial;
    --Color_Panel_Header_Button_Border: initial;
    --Color_Panel_Body_BG: #ffffff;
    --Color_Panel_Body_Text: #000000;
    --Color_Button_BG: #226CAB;
    --Color_Button_Text: #ffffff;
    --Color_Button_Border: #cccccc;
    --Color_ButtonAction_BG: initial;
    --Color_ButtonAction_Text: initial;
    --Color_ButtonAction_Border: initial;
    --Color_Heading_Header_BG: #3f586e;
    --Color_Heading_Header_Text: #e8e8e8;
    --Color_Heading_Header_Border: initial;
    --Color_Heading_Header_Button_BG: initial;
    --Color_Heading_Header_Button_Text: initial;
    --Color_Heading_Header_Button_Border: initial;
    --Color_Heading_SubHeader_BG: #b3b6b9;
    --Color_Heading_SubHeader_Text: #3e3e3e;
    /*Modals*/
    --Color_Modal_Header_BG: #226CAB;
    --Color_Modal_Header_Text: #e8e8e8;
    --Color_Modal_Footer_BG: #cccccc;
    --Color_Modal_Footer_Text: #000000;
    --Color_Thumb_Selected: #ff0000;
    /*Please Wait*/
    --Color_PleaseWait_BG: #2d3e4f;
    --Color_PleaseWait_Text: #ecf0f1;
    --Color_PleaseWait_Progress_BG: #ffffff;
    --Color_PleaseWait_Progress_Text: #3273ab;
    --Color_PleaseWait_Sparkle_Light: #85B7EB;
    --Color_PleaseWait_Sparkle_Dark: #3BA0E0;
}

.dm-navbar {
    background-color: var(--Color_Toolbar_BG) !important;
    color: var(--Color_Toolbar_Text) !important;
}

    .dm-navbar .badge {
        background-color: var(--Color_Toolbar_Badge);
        color: var(--Color_Toolbar_Badge_Text);
    }

        .dm-navbar .badge.filtered {
            background-color: var(--Color_Toolbar_Badge_Highlight) !important;
            color: var(--Color_Toolbar_Badge_Highlight_Text) !important;
        }

    .dm-navbar .nav-link, .dm-navbar .nav-link:active, .dm-navbar .nav-link:focus, .dm-navbar .nav-link:visited,
    .navbar-brand, .navbar-brand:active, .navbar-brand:focus, .navbar-brand:visited {
        color: var(--Color_Toolbar_Text) !important;
    }

        .dm-navbar .nav-link:hover,
        .dm-navbar .navbar-brand:hover {
            color: var(--Color_Toolbar_Text_Hover);
        }

    .dm-navbar a.nav-link.router-link-active {
        background-color: var(--Color_Toolbar_Dark) !important;
    }

    .dm-navbar .navbar-toggler {
        color: var(--Color_Toolbar_Text) !important;
    }

    .dm-navbar a.list-group-item.router-link-active {
        background-color: var(--Color_Toolbar_Dark) !important;
        color: var(--Color_Toolbar_Text_Hover) !important;
    }

    .dm-navbar .dm-nav-text {
        color: var(--Color_Toolbar_Text) !important;
        border: 1px solid var(--Color_Toolbar_Text) !important;
    }

.dm-navbar-secondary {
    background-color: var(--Color_Toolbar_Secondary_BG) !important;
    color: var(--Color_Toolbar_Secondary_Text) !important;
}

    .dm-navbar-secondary:hover {
        color: var(--Color_Toolbar_Secondary_Text_Hover) !important;
    }


.dmbanner {
}

    .dmbanner .dmbanneroverlay {
        position: fixed;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        background-color: rgba(0,0,0,0.3);
        z-index: 1100;
    }

    .dmbanner .dmbannercontainer {
        width: 400px;
        min-height: 150px;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: var(--Color_PleaseWait_Text);
        background-color: var(--Color_PleaseWait_BG);
        font-size: 1.2em;
        text-align: center;
        border-radius: 8px;
        z-index: 1101;
        border: 1px solid rgba(0, 0, 0, 0.1);
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 2px 8px rgba(0, 0, 0, 0.15);
    }
    .dmbanner .dmbannerdescription {
        padding: 8px 16px;
        word-wrap: break-word;
        text-align: left;
        font-size: 0.75em;
    }

@media (max-width: 700px) {
    .dmbanner .dmbannercontainer {
        max-width: 90%;
        margin-left: -45%;
    }
}

.dmbanner .dmbannertitle {
    font-size: .8em;
    /*height: 20px;*/
}

.dmbanner .dmbannertext {
}

.dmbanner .dmbannerprogress {
    height: 25px;
}

    .dmbanner .dmbannerprogress .progress-bar {
        color: var(--Color_PleaseWait_Progress_BG);
        background-color: var(--Color_PleaseWait_Progress_Text);
    }

.dm-modal {
}

    .dm-modal .modal-header {
        background-color: var(--Color_Modal_Header_BG);
        color: var(--Color_Modal_Header_Text);
    }

    .dm-modal .modal-footer {
        background-color: var(--Color_Modal_Footer_BG);
        color: var(--Color_Modal_Footer_Text);
    }

.offcanvas {
}

    .offcanvas .offcanvas-header {
        background-color: var(--Color_Modal_Header_BG);
        color: var(--Color_Modal_Header_Text);
    }

    .offcanvas .footer {
        background-color: var(--Color_Modal_Footer_BG);
        color: var(--Color_Modal_Footer_Text);
    }

.btn.btn-docmgt {
    background-color: var(--Color_Button_BG);
    color: var(--Color_Button_Text);
    border-color: var(--Color_Button_Border);
}

    .btn.btn-docmgt .badge {
        background-color: var(--Color_Toolbar_Badge) !important;
        color: var(--Color_Toolbar_Badge_Text) !important;
    }

.btn.btn-action {
    background-color: var(--Color_ButtonAction_BG);
    color: var(--Color_ButtonAction_Text);
    border-color: var(--Color_ButtonAction_Border);
}

    .btn.btn-action .badge {
        background-color: var(--Color_Toolbar_Badge) !important;
        color: var(--Color_Toolbar_Badge_Text) !important;
    }

.dm-panel {
}

    .dm-panel > .card-header {
        background-color: var(--Color_Panel_Header_BG);
        color: var(--Color_Panel_Header_Text);
        border: 1px solid var(--Color_Panel_Header_Border);
    }

        .dm-panel > .card-header.btn.btn-docmgt {
            background-color: var(--Color_Panel_Header_Button_BG);
            color: var(--Color_Panel_Header_Button_Text);
            border-color: var(--Color_Panel_Header_Button_Border);
        }

        .dm-panel > .card-header.dm-panel-subheader {
            padding: .3rem .5rem;
            background-color: var(--Color_Heading_Header_BG);
            color: var(--Color_Heading_Header_Text);
            border: 1px solid var(--Color_Heading_Header_Border);
        }

            .dm-panel > .card-header.dm-panel-subheader .btn.btn-docmgt {
                background-color: var(--Color_Heading_Header_Button_BG);
                color: var(--Color_Heading_Header_Button_Text);
                border-color: var(--Color_Heading_Header_Button_Border);
            }

    .dm-panel .card-body .list-group .active {
        font-weight: bold;
        background-color: #f1f1f1;
        color: black;
        border: 1px solid var(--Color_Thumb_Selected);
    }

.drophighlight {
    border: 1px solid orange !important;
    background-color: lightgray !important;
    color: black !important;
}

.dm-readonly {
    border: 1px solid yellow !important;
    background-color: #ffff0030 !important;
}

.dm-search-recordtype-header {
    background-color: var(--Color_Panel_Header_BG);
    color: var(--Color_Panel_Header_Text);
    border-color: var(--Color_Panel_Header_Border);
}

.dm-search-header {
    background-color: var(--Color_Heading_Header_BG);
    color: var(--Color_Heading_Header_Text);
}

.dm-search-footer {
    background-color: var(--Color_Heading_Header_BG);
    color: var(--Color_Heading_Header_Text);
    opacity: .75;
}

.accordion .accordion-item .accordion-header button.accordion-button {
    background-color: var(--Color_Panel_Header_BG) !important;
    color: var(--Color_Panel_Header_Text) !important;
}

    .accordion .accordion-item .accordion-header button.accordion-button.accordion-button-sub {
        background-color: var(--Color_Heading_Header_BG) !important;
        color: var(--Color_Heading_Header_Text) !important;
    }

    .accordion .accordion-item .accordion-header button.accordion-button.collapsed {
        background-color: initial !important;
        color: initial !important;
    }

        .accordion .accordion-item .accordion-header button.accordion-button.collapsed.accordion-button-sub {
            background-color: initial !important;
            color: initial !important;
        }


.progress-bar.progress-docmgt {
    background-color: var(--Color_PleaseWait_Progress_Text);
    color: var(--Color_PleaseWait_Progress_BG);
}



/*        
        Login Screen
*/

#loginv4 .boxOuter {
    margin-top: 25px;
    box-shadow: 10px 10px 14px #888888;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

#loginv4 .boxBody {
    padding: 15px;
    padding-left: 40px;
    padding-right: 40px;
    height: 320px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

    #loginv4 .boxBody .row {
        padding-top: 7px;
        padding-bottom: 10px;
    }

    #loginv4 .boxBody a, .boxBody a:hover {
        color: white;
        font-weight: bold;
    }

#loginv4 .boxLeft {
    background-color: var(--Color_Login_BG_Left);
    color: var(--Color_Login_Text_Left);
}

    #loginv4 .boxLeft input {
        background-color: var(--Color_Login_Input_Left) !important;
        color: var(--Color_Login_InputText_Left) !important;
        border-radius: 0px !important;
        outline: none !important;
        border: none !important;
        -webkit-box-shadow: none !important;
        -moz-box-shadow: none !important;
        box-shadow: none !important;
    }

    #loginv4 .boxLeft .btn {
        background-color: var(--Color_Login_Button_BG_Left);
        color: var(--Color_Login_Button_Text_Left);
        border: none;
        border-width: 0px;
    }
        #loginv4 .boxLeft .btn:focus {
            border: 1px solid var(--Color_Login_Button_Text_Left);
            border-width: 1px;
        }

#loginv4 .boxRight {
    background-color: var(--Color_Login_BG_Right);
    color: var(--Color_Login_Text_Right);
    position: relative;
    padding: 10px;
}

    #loginv4 .boxRight .bgImage {
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        width: 100%;
        height: 300px;
    }

    #loginv4 .boxRight .contents {
        position: absolute;
        top: 5%;
        left: 5%;
        width: 90%;
        height: 90%;
        text-align: center;
    }

    #loginv4 .boxRight h3, .boxRight h4, .boxRight h5 {
        padding-top: 0px;
        padding-bottom: 10px;
    }