/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ODVS Master Page and Bootstrap 5.0.0 CSS Customizations ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* Change Log                                                                                                                        */
/* -----------                                                                                                                       */
/* 10/03/2023 JRO Modified to support bootstrap 5.0.0. These changes are not compatible with previous versions of bootstrap.         */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/*                                                                                                                                   */
/*    DO NOT EDIT THE BOOTSTRAP CLASSES IN ANY OF THE BOOTSTRAP.CSS FILES.  COPY CLASSES TO THIS FILE AND MAKE THE CHANGES HERE      */
/*                                                                                                                                   */
/* These are implemented as overrides by setting the master page body tag id = custom and prefixing bootstrap classes with #custom.  */
/* When the need to customize a boostrap class is identified; locate and copy the the class into this file, prefix it with #custom,  */
/* remove what you don't need to change then make your changes.  These classes will overide bootstrap classes with the same name.    */
/* This method lets us update bootstrap without overwriting our modifications when upgrading bootstrap files.                        */
/*                                                                                                                                   */
/* NOTE: These customizations have been tested (quickly) with MVC Razor and appear to be compatible.  Implementation of the master   */
/* page in MVC is different but no changes had to be made to this CSS.                                                               */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

body {
    background-image: url('../Images/background.png');
    background-repeat: repeat-x;
    max-width: 1022px;
    margin: 0 auto;
}

/* overides the settings in site.css */
#custom .body-content {
    margin-top: 0;
    padding-left: 15px;
    padding-right: 15px;
    background-color: white;
    max-width: 800px;
}

/* The html and body elements cannot have any padding or margin. */
html, body {
    height: 100%;
}

.button-format {
    margin-top: 10px;
    margin-bottom: 10px;
}

#contentWrapper {
    border-style: none solid solid solid;
    position: relative;
    display: block;
    max-width: 1024px;
    width: 100%;
    clear: both;
    background-color: white;
    border-right-color: #C0C0C0;
    border-bottom-color: #C0C0C0;
    border-left-color: #C0C0C0;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    overflow: hidden;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}

.cust-btn-sm-width {
    min-width: 150px;
}

.cust-btn-md-width {
    min-width: 200px;
}

.cust-btn-lg-width {
    min-width: 300px;
}

#custom .jumbotron {
    padding: 2rem 1rem;
    margin-bottom: 2rem;
    background-color: #e9ecef;
    border-radius: .3rem;
}

.errorText {
    width: 100%;
    min-height: 300px;
    margin-bottom: 20px;
}
/* Sets the NullText (Placeholder on asp.net controls) color on Devexpress controls to match the color on the asp.net controls. */
#custom .dxh0 {
    color: #999 !important;
}

/* Removes the cursor from disabled/read only text boxes and changes the background color to white. */
#custom [disabled].form-control, [readonly].form-control, fieldset[disabled] .form-control {
    cursor: not-allowed;
    background-color: #fff;
}

/* Fixes an issue where the bottom of the selected hamburger outline is blocked by the expanded navbar when > 768px wide*/
#custom .navbar-collapse {
    margin-top: 5px;
}

/* @media tags to control the collapse of the body content. */

@media (min-width:992px) {
    #custom .body-content {
        max-width: 1022px
    }
}

@media (min-width:768px) {
    #custom .body-content {
        max-width: 1022px
    }
    /* Adjustment for innter ccontent wrapper width */
    #innerContentWrapper {
        /*max-width: 900px;*/
        max-width: 962px;
        margin: auto;
    }
}

@media (max-width:768px) {
    #custom .body-content {
        max-width: 768px
    }
}

/* adjustment to the navbar to keep it below the banner and fix its height*/
#custom .navbar {
    position: relative;
    /*height: 52px;*/
    z-index: 100;
    max-width: 1022px; /* has to be a few pixels smaller in ver 5 */
    border-top-style: solid;
    border-top-width: thin;
    border-top-color: #c0c0c0;
    border-bottom-style: solid;
    border-bottom-width: thin;
    border-bottom-color: #c0c0c0;
}

/* removes nav text padding from top and bottom, retains left and right padding, sets bottom padding to place text in the vertical center */
#custom .nav-link {
    padding: 0 0.5rem 0 0.5rem;
    padding-bottom: 5px;
}

#custom nav ul li {
    position: relative;
}

#custom nav ul ul {
    position: absolute;
    width: 100%;
}

/* Banner content begins ~~~~~~~~~~~~~~~~~~~~~~~~~~ */

#masthead {
    height: 100px;
    max-width: 1022px;
    font-family: Arial, Helvetica, sans-serif;
    background-color: #FFFFFF;
}

#mastLeft {
    float: left;
    max-width: 450px;
    margin-top: 5px;
    margin-left: 5px;
    height: 90px;
}

#mastLeftLogo {
    float: left;
    width: 85px;
}

.dvsLogo {
    height: 80px;
    margin-top: 5px;
    overflow: hidden;
}

#mastLeftDvs1 {
    float: left;
    max-width: 475px;
    margin-top: 13px;
}

.ohioText {
    height: 30px;
    margin-left: 5px;
    margin-bottom: 3px;
}

.dvsText {
    margin-left: 25px;
}

#mastLeftDvs2 {
    float: left;
    max-width: 475px;
    margin-top: 6px;
}

.appName {
    font-size: 20px;
    display: block;
    font-family: Arial, Helvetica, sans-serif;
    float: left;
    color: #5D5D5D;
    margin-left: 23px;
}

#mastRight {
    float: right;
    max-width: 375px;
    margin-top: 5px;
    margin-right: 5px;
    height: 90px;
}

#loggedInUser {
    float: right;
    height: 22px;
    margin-top: 10px;
}

#loadedFormName {
    float: right;
    height: 22px;
    margin-top: 25px;
    clear: right;
    margin-right: 10px;
}

.loadedFormName {
    font-size: 18px;
    font-family: Arial, Helvetica, sans-serif;
    color: #808080;
}

.loggedInUserLabel {
    font-size: 12px;
    float: left;
    margin-top: 2px;
    padding-right: 12px;
}

.loggedInUserLink {
    font-size: 12px;
    float: left;
    margin-top: 2px;
    text-decoration: none;
    color: #000000;
    margin-right: 10px;
    text-align: center;
}

.loggedInUserIcons {
    float: left;
    margin-right: 10px;
    margin-top: 1px;
}

#navbarImage {
    margin-top: 1.5px;
    margin-left: 2px;
    float: left;
    width: 48px;
    height: 37px;
    background-image: url('../Images/nav-bar-ODVS-logo.png');
}

.dvs-text-sm {
    color: #5d5d5d;
    float: left;
    margin-top: 16px;
    margin-left: 5px;
}
/* Banner contents end ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

/* Banner Transitions begin ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

@media (max-width: 768px) {
    #mastLeft {
        display: none;
    }

    #mastRight {
        max-width: 100%;
        width: 100%;
        height: 30px;
        margin-top: 0;
    }

    #loggedInUser {
        float: left;
        margin-top: 5px;
        margin-left: 20px
    }

    #loadedFormName {
        margin-top: 3px;
    }

    #masthead {
        height: 30px;
    }
}

/* hide image */
@media (min-width: 768px) {
    #navbarImage {
        display: none;
    }

    #odvsText {
        display: none;
    }
}
/* End Banner Transitions ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */


/* Options and Help Overlays ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

.loggedInUserIcons:hover {
    float: left;
    border: 1px solid #E5C365;
    margin: -1px 8px -1px -2px;
    background-color: #FFF0D0;
    padding: 1px;
}

.loggedInUserLink:hover {
    padding: 1px;
    float: left;
    border: 1px solid #E5C365;
    background-color: #FFF0D0;
    font-size: 12px;
    margin-top: 0px;
    text-decoration: none;
    color: #000000;
    margin-right: 8px;
    text-align: center;
}

.darkOverlay {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    /*height: 100%;*/
    background-color: black;
    z-index: 1001;
    -moz-opacity: 0.5;
    opacity: .50;
    filter: alpha(opacity=50);
    display: none;
}

/* @media tags to control the height of the dark overlay in different states of collapse */

@media (min-width:992px) {
    #custom .darkOverlay {
        /*height: 2000px;*/
        height: 100%;
    }
}

@media (min-width:768px) {
    #custom .darkOverlay {
        /*height: 1500px;*/
        height: 100%;
    }
}

@media (max-width:768px) {
    #custom .darkOverlay {
        /*height: 2200px;*/
        height: 100%;
    }
}

.helpOverlayContent {
    display: none;
    position: absolute;
    top: 25%;
    left: 25%;
    width: 50%;
    height: 300px;
    padding: 16px;
    border: 1px solid #E5C365;
    background-color: white;
    z-index: 1002;
    overflow: auto;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
}

.helpCloseButton {
    text-align: center;
    margin-top: 70px;
}

.buildNumber {
    font-size: 12px;
    font-family: Arial, Helvetica, sans-serif;
    color: #808080;
    float: right;
}

.msgOverlayContent {
    z-index: 1002;
    position: absolute;
    overflow: auto;
    /*border-radius: 3px;*/
    margin-top: 25px;
}

#custom .msgBorder {
    border-radius: 8px !important;
}

/*--------------------------------------------------------------*/
/* Validation */
.validator {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 12px;
    margin-left: 3px;
    color: Red;
    font-weight: bold;
    float: left;
    overflow: hidden;
}

.validatorSummary {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 12px;
    display: block;
    float: left;
    margin-left: 50px;
    margin-bottom: 20px;
    width: 90%;
    text-align: left;
    color: Red;
    margin-top: 10px;
}
/* End Validation */
/*--------------------------------------------------------------*/
/*--------------------------------------------------------------*/
/* DevExpress Grid */
.gridCommandColumn {
    font-size: 12pt !important;
}

.gridHeader {
    font-size: 11pt !important;
}

.gridData {
    font-size: 12pt !important;
}

/*--------------------------------------------------------------*/
.gridFilter input {
    font-size: small !important;
    /*padding: 2px 2px 2px 2px !important;*/
    /*margin: 2px 2px 2px 2px !important;*/
    /*max-height: 25px;*/
}

#custom .gridCommandColumn.btn.btn-link.dxbs-button {
    padding-left: 2px;
    padding-right: 2px;
}

/*#custom span.dxbs-edit-btn {*/
/*font-size: small !important;*/
/*padding: 2px 2px 2px 2px !important;*/
/*}*/
/*.gridFilter .dxbs-edit-btn {
    font-size: small !important;
    padding: 2px 2px 2px 2px !important;
}
*/
/*.gridFilter .dxbs-dropdown-edit {
    font-size: small !important;
    padding: 2px 2px 2px 2px !important;
}
*/
/*--------------------------------------------------------------*/

/*.dx-invalid.dx-texteditor {
    border-color: silver;
}
*/

#custom .col-form-label {
    display: inline-block;
    font-weight: 600;
}

#custom .card {
    /* The bottome rounded corners on the dev express scheduler are not rendering correctly with bootstrap 5.3.2 and dev express 23.1.5.0 */
    /* so we are removing the radius until this is fixed. */
    /*border-radius: var(--bs-card-border-radius);*/
    border-radius: 0;
}

#custom .dxbs-edit-btn {
    background: #ffffff;
    color: #212529;
    border-color: lightgray;
    /*border-left: none;*/
}

#custom .dxbs-clear-btn {
    background: #ffffff;
    color: #212529;
    border-color: lightgray;
    border-style: solid;
    border-width: 1px;
}

#custom .dropDownStyle input {
    height: 38px;
}

#custom .dropDownStyle .dropdown-toggle {
    height: 38px; /*the down arrow in the button center which controls the height of the button */
    padding-top: 6px; /*for the down arrow */
}