/*===================================================================================*/
/* GENERAL                                                                           */
/*===================================================================================*/
html, body {
    margin: 0;
    padding: 0;
    font-family: 'Segoe UI', Helvetica, 'Droid Sans', Tahoma, Geneva, sans-serif;
    font-size: 100%;
}

h1 {
    font-size: 5vw;
}

h2 {
    font-size: 200%;
}

h3 {
    font-size: 150%;
}

h4 {
    margin-top: 10px;
    margin-bottom: 10px;
    font-size: 125%;
}


/*===================================================================================*/
/* DEBUGGING                                                                         */
/*===================================================================================*/
.debug {
    display: none;
    position: absolute;
    left: 2px;
    top: 2px;
    z-index: 9999;
    background-color: #FFFFFF;
}

    .debug span {
        font-size: 0.5rem;
    }

/*===================================================================================*/
/* EMBEDDED FONTS                                                                    */
/*===================================================================================*/
@font-face {
    font-family: 'Glyphicons Halflings';
    src: url('https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/fonts/glyphicons-halflings-regular.eot');
    src: url('https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/fonts/glyphicons-halflings-regular.woff2') format('woff2'), url('https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/fonts/glyphicons-halflings-regular.woff') format('woff'), url('https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}


/*===================================================================================*/
/* GLYPH ICONS                                                                       */
/*===================================================================================*/
.glyphicon {
    position: relative;
    top: 1px;
    display: inline-block;
    font: normal normal 16px/1 'Glyphicons Halflings';
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    /*margin-right: 4px;*/
}

/* Add icons you will be using below */
/* https://www.w3schools.com/bootstrap/bootstrap_ref_comp_glyphs.asp */
/* https://glyphicons.bootstrapcheatsheets.com/ */
.glyphicon-refresh:before {
    content: '\e031';
}

.glyphicon-list-alt:before {
    content: '\e032';
}

.glyphicon-ok:before {
    content: '\e013';
}

.glyphicon-remove:before {
    content: '\e014';
}

.glyphicon-plus:before {
    content: '\2b';
}

.glyphicon-minus:before {
    content: '\2212';
}

.glyphicon-user:before {
    content: '\e008';
}

.glyphicon-trash:before {
    content: '\e020';
}

.glyphicon-arrow-left:before {
    content: '\e091';
}

.glyphicon-download-alt:before {
    content: '\e025';
}

.glyphicon-download:before {
    content: '\e026';
}

.glyphicon-upload:before {
    content: '\e027';
}

.glyphicon-thumbs-up:before {
    content: '\e125';
}

.glyphicon-thumbs-down:before {
    content: '\e126';
}

.glyphicon-log-out:before {
    content: '\e163';
}

.glyphicon-collapse-down:before {
    content: '\e159';
}

.glyphicon-collapse-up:before {
    content: '\e160';
}

.glyphicon-flash:before {
    content: '\e162';
}

.glyphicon-edit:before {
    content: '\e065';
}

.glyphicon-user:before {
    content: '\e008';
}

.glyphicon-calendar:before {
    content: '\e109';
}

.glyphicon-print:before {
    content: '\e045';
}

.glyphicon-wrench:before {
    content: '\e136';
}

.glyphicon-credit-card:before {
    content: '\e177';
}

.glyphicon-calendar:before {
    content: '\e109';
}

.glyphicon-chevron-left:before {
    content: '\e079';
}

.glyphicon-chevron-right:before {
    content: '\e080';
}

.glyphicon-sort-by-order:before {
    content: '\e153';
}


/*===================================================================================*/
/* DevExpress Added Styles                                                           */
/*===================================================================================*/
/* iOS */
.dxsplVSeparator_iOS,
.dxsplHSeparator_iOS {
    border-width: 0px !important;
}

.dxsplPane_iOS.leftPane,
.dxsplPane_iOS.rightPane,
.dxsplPane_iOS.contentPane {
    border-width: 1px !important;
}

.dxsplControl_iOS .templateTitle {
    margin-top: 3px;
}

    .dxsplControl_iOS .templateTitle a {
        color: #303030;
        font-size: 26px;
        line-height: 1em;
        font-weight: bold;
    }

.dxsplControl_iOS .headerTop,
.dxsplControl_iOS .content {
    font-family: HelveticaNeue,Helvetica,Verdana,sans-serif;
}

.dxsplControl_iOS .loginControl {
    margin-top: 4px;
}

    .dxsplControl_iOS .loginControl a {
        color: #0160E7;
        text-decoration: underline;
        font-size: 20px;
        font-weight: bold;
    }

.dxsplControl_iOS .headerTop {
    height: 33px;
}

.dxsplControl_iOS .headerMenu {
    margin-top: 0px;
}

.dxsplPane_iOS.mainContentPane {
    border-width: 0px !important;
    box-shadow: initial;
    -webkit-box-shadow: initial;
    -moz-box-shadow: initial;
}

.dxsplPane_iOS.footerPane {
    border-width: 1px !important;
}

.dxsplControl_iOS .accountHeader p {
    color: #303030;
    font-size: 18px;
}

.dxsplControl_iOS .accountHeader h2 {
    color: #303030;
    font-size: 26px;
    margin-bottom: 10px;
}



/* DevEx */
.dxsplControl_DevEx {
    font-family: Verdana;
    color: #201F35;
}

    .dxsplControl_DevEx .headerPane,
    .dxsplControl_DevEx .footerPane,
    .dxsplControl_DevEx .footerMenu li {
        background-color: #F2F3F4;
    }

    .dxsplControl_DevEx .templateTitle a,
    .dxsplControl_DevEx .loginControl,
    .dxsplControl_DevEx .loginControl a {
        color: #4B4B57;
    }

        .dxsplControl_DevEx .loginControl a {
            border-bottom-color: #4B4B57;
        }

    .dxsplControl_DevEx .headerMenu {
        margin-top: 13px;
    }

    .dxsplControl_DevEx .accountHeader p {
        font-size: 11px;
    }





/*===================================================================================*/
/* NAMED COLOR STYLES                                                                */
/*===================================================================================*/

.darkblue {
    color: #1a4b7f;
}

.white {
    color: white;
}

.yellow {
    color: yellow;
}

.green {
    color: #008800;
}

.darkgreen {
    --rgb: 17, 119, 17;
    color: rgba(var(--rgb), 1);
}

.red {
    color: #880000;
}

.orange {
    color: #FA840E;
}

.purple {
    --rgb: 84, 22, 180;
    color: rgba(var(--rgb), 1);
}

.gold {
    --rgb: 203, 171, 0;
    color: rgba(var(--rgb), 1);
}

.greenBackground {
    background-color: #009000;
}

.blueBackground {
    background-color: #000090;
}

.lightGrayBackground {
    background-color: #EDEDED;
}

.redBackground {
    background-color: #900000;
}

.goldBackground {
    background-color: #cbab00;
}

.purpleBackground {
    background-color: #5416b4;
}

.purpleOutline {
    border: 1px solid #5416b4;
}

.errorText {
    color: #BB0000;
}

.bold {
    font-weight: 700;
}


/*===================================================================================*/
/* Other Common Named Styles                                                         */
/*===================================================================================*/
.floatRight {
    float: right;
}

.floatLeft {
    float: left;
}


/*===================================================================================*/
/* DevEx Grid-specific Syles                                                         */
/*===================================================================================*/

.hiddenCell {
    display: none;
}

.disabledCellStyle {
    background: #888888;
    color: #444444;
}

.commandColumn {
    cursor: pointer;
}

/* Set external padding for card view to minimize white space */
.dxcvCard_Office365, .dxcvFlowCard_Office365, .dxcvBreakpointsCard_Office365, .dxcvEmptyCard_Office365, .dxcvEmptyHiddenCard_Office365 {
    padding: 0 2px 0 0 !important;
}

/*===================================================================================*/
/* ABOUT                                                                            */
/*===================================================================================*/
.aboutProduct {
    font-family: 'Alegreya Sans SC', sans-serif;
    font-weight: 700;
    font-size: 1.5rem;
}

.aboutSubtitle {
    font-family: 'Alegreya Sans SC', sans-serif;
    font-style: italic;
    font-size: 0.8rem;
    font-weight: 300;
}

.about {
    font-family: 'PT Sans', sans-serif;
    margin: auto;
    width: 300px;
    border: 3px solid #3c4f8f;
    padding: 10px;
    margin-top: 15px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-size: 100%;
    border-radius: 20px;
    box-shadow: 5px 5px rgba(64, 79, 135, 0.20);
}

.aboutLogos {
    display: flex;
    justify-content: center;
    flex-direction: row;
    margin: 5px;
    flex-wrap: wrap;
}

.aboutLogos img {
    transform: scale(0.75);
}

.aboutTitle {
    display: flex;
    justify-content: center;
    flex-direction: row;
    margin: 5px;
    font-size: 200%;
}

    .aboutTitle img {
        transform: scale(0.75);
    }

.aboutDeveloper {
    display: flex;
    justify-content: center;
    flex-direction: row;
    font-size: 0.8rem;
    margin: 5px 0 0 0;
}

.aboutInfo {
    font-size: 0.6rem;
}


/*===================================================================================*/
/* HEADER                                                                            */
/*===================================================================================*/
.headerPane {
    background-color: #EDEDED;
    background-position: left top;
    background-repeat: no-repeat;
    font-family: 'Segoe UI';
}

    .headerPane .headerTop {
        height: 45px;
        font-family: 'Segoe UI', Helvetica, 'Droid Sans', Tahoma, Geneva, sans-serif;
        font-size: 80%;
    }

.siteTitle {
    font-family: 'Alegreya Sans SC', sans-serif;
    font-size: 200%;
}

.templateTitle {
    float: left;
    margin-left: 15px;
    margin-top: 7px;
}

    .templateTitle a {
        text-decoration: none;
        font-size: 200%;
        color: black;
        font-weight: 600;
    }

.loginControl {
    float: right;
    margin-top: 17px;
    margin-right: 25px;
    font-size: 100%;
}

    .loginControl a {
        color: black;
        text-decoration: none;
        border-bottom: dashed 1px black;
        display: inline-block;
    }

.headerMenu {
    margin-top: 2px;
}

#TopMenu > ul > li > .dxm-content {
    padding-top: 4px;
    padding-bottom: 4px;
}

.templateTitle > a > img {
    vertical-align: middle;
}

.selectedView {
    text-align: center;
    /*outline: 1px dotted blue;*/ /* to show content box limits */
    margin: 0 125px;
    padding-top: 14px;
    font-size: 150%;
    font-weight: 600;
    color: #000099;
    font-family: 'Montserrat', sans-serif;
}


/*#addProjectButton {
    margin: 1px 10px 0 0;
}

#addProjectButton:active {
    box-shadow: 1px 1px 5px #888888;
    margin: 3px 8px 0 0;
}

#addProjectButton:hover {
    background-color: #f87c1d;
}*/


#oorStatusBar {
    width: 100%;
    height: 35px;
}

#oorStatusBar {
    width: 100%;
}

#oorStatusBarTable {
    width: 100%;
}

#oorStatusBarTable td {
    /*width: 25%;*/
    padding: 5px 1px 0 0;
}

#oorCardView_DXSearchPanel {
    padding: 5px;
}

.oorStatusBarText {
    color: #000099;
    font-weight: 600;
}


/*===================================================================================*/
/* FOOTER                                                                            */
/*===================================================================================*/
.footerPane {
    background-color: #EDEDED;
    height: 100%;
}

.footerMenu {
    float: right;
    padding-top: 7px;
}

.copyright {
    float: left;
    margin-left: 15px;
    margin-top: 10px;
}


/*===================================================================================*/
/* CONTENT AREA                                                                      */
/*===================================================================================*/
.content {
    padding: 5px;
}


/*===================================================================================*/
/* ACCOUNT                                                                            */
/*===================================================================================*/
.accountHeader h2 {
    margin: 10px 0 7px 0;
    font-size: 100%;
}

.accountHeader p {
    font-size: 80%;
    margin: 0;
    padding: 0;
}

.accountHeader {
    margin-bottom: 20px;
}

.loginPane {
    margin: 0 auto;
    width: 300px;
}

/*===================================================================================*/
/* GRID/CARD EDITORS                                                                 */
/*===================================================================================*/
.editorWrapper {
    padding: 0;
}


/*===================================================================================*/
/* CONTROLS                                                                          */
/*===================================================================================*/

.brown {
    --rgb: 118, 76, 41;
}

.sea {
    --rgb: 50, 200, 100;
}

.darkgreenbtn {
    --rgb: 17, 119, 17;
}

.bluebtn {
    --rgb: 26, 75, 127;
}

.goldbtn {
    --rgb: 203, 171, 0;
}

.purplebtn {
    --rgb: 84, 22, 180;
}

.orangebtn {
    --rgb: 221, 94, 71;
}

.redbtn {
    --rgb: 144, 0, 0;
}

.bluebtn, .darkgreenbtn, .goldbtn, .purplebtn, .orangebtn, .redbtn {
    --alpha: 0;
    background-color: rgba(var(--rgb), var(--alpha));
    border: 1px solid rgba(var(--rgb),0.5);
}


.roundedButton {
    border-radius: 13px;
    padding: 6px 6px;
    /*margin: -3px 0px 5px 0;*/
    display: table-cell;
    vertical-align: middle;
    cursor: pointer;
    /* box-shadow: 2px 2px 3px #505050; */
}

.roundedButton:active {
    box-shadow: 1px 1px 5px orange;
    /*margin: -1px -2px 3px 0;*/
}

.darkgreenbtn:hover, .darkgreenbtn:hover span,
.goldbtn:hover, .goldbtn:hover span,
.purplebtn:hover, .purplebtn:hover span,
.orangebtn:hover, .orangebtn:hover span,
.redbtn:hover, .redbtn:hover span,
.bluebtn:hover, .bluebtn:hover span {
    --alpha: 1;
    color: white;
}

.roundedButton .standardButtonText {
    display: block;
    float: right;
    font: 80% 'Segoe UI';
}

.roundedButton .hidingButtonText {
    display: none;
    float: right;
    font: 80% 'Segoe UI';
}

.roundedButton:hover .hidingButtonText {
    display: block;
}

.roundedButton .glyphicon {
    font-size: 100%;
    float: right;
}


.notification_button {
    margin: 4px 4px 4px 0px;
    float: right;
}

.editFormButton {
    cursor: pointer;
}

.editFormLink {
    cursor: pointer;
}

.oorActionButton {
    margin: 5px 5px 0 0;
    z-index: 10;
}

.addProjectButton {
    display: block !important;
}

.oorDockPanelButton {
    margin: -5px 5px 0 0;
    font-size: 14px;
    font-weight: 600;
    font-family: Montserrat, sans-serif;
}

.oorItemHeaderButton {
    margin: -1px 0px 0 0;
    font-size: 14px;
    font-weight: 600;
    font-family: Montserrat, sans-serif;
}


/*===================================================================================*/
/* TRACKER                                                                           */
/*===================================================================================*/


.trxStatusX {
    color: #666666;
}

.trxStatusA {
    color: #117711;
}

.trxStatusB {
    color: #111177;
}

.trxStatusC {
    color: #117777;
}

.trxStatusD {
    color: #771111;
}

.trxStatusP {
    color: #771177;
}


.no-edit {
    border:none;
}

#trackerCardView_tcTitle {
    padding-top: 5px;
}

.searchBar {
    width: calc(100vw - 350px - 140px - 100px);
    max-width: calc(100vw - 350px - 140px - 100px);
    float: left;
}

.card-filters {
    float: left;
    width: 345px;
    height: 35px;
}

#userComboSpan {
    font-size: 80%;
    float: left;
    margin: 5px 6px 0px 6px;
}

#userComboDiv {
    float: left;
    margin-top: 1px;
}

.card-controls {
    float: right;
    width: 40px;
    height: 35px;
}


.collapseButton {
    margin-top: 2px;
    width: 35px;
    height: 25px;
    border-radius: 4px;
    background-color: darkgray;
    float: right;
    padding-top: 2px;
    opacity: 50%;
    padding-left: 2px;
}

.collapseButton:hover {
    background-color: darkblue;
    transition-duration: 250ms;
    opacity: 100%;
}


#trackerCardView_DXSearchPanel {
    padding: 5px;
    width: calc(100vw - 350px - 140px );
    max-width: calc(100vw - 350px - 140px );
    float: left;
    display: inline;
}

#trackerCardView td.dxic {
    padding: 5px;
}

.trxBody {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}

.trxPanel {
    /*float: left;*/
    padding: 2px;
    max-height: 150px;
    height: 200px;
    min-height: 200px;
    /*margin-left: 5px;*/
    line-height: 1em;
    overflow-y: auto;
}

.trxPanel.half {
    /*float: left;*/
    padding: 2px;
    max-height: 94px !important;
    height: 94px !important;
    min-height: 94px !important;
    /*margin-left: 5px;*/
    line-height: 1em;
    overflow-y:inherit;
}

.trxPanel p {
    margin-top: 5px;
    margin-bottom: 5px;
}


.trxDetailGrid {
    width: 50%;
    float: left;
}

.trxCostGrid {
    width: 50%;
    float: left;
}

.trxGridTable {
    width: 100%;
    display: table;
}

    td.first {
        /*flex: 0 0 12rem;*/
        width: 12rem;
        max-width: 12rem;
        margin-left: 5px;
        margin-right: 5px;
    }

td.second {
    /*flex: 0 0 24rem;*/
    width: 24rem;
    max-width: 24rem;
    float: left;
    /*overflow: auto;*/
    border: 1px solid rgba(0,0,0,0.1);
}


    td.third {
        /*flex: 0 0 48rem;*/
        /*float: left;*/
        width: calc(100vw - 12rem - 24rem - 1rem );
        max-width: calc(100vw - 12rem - 24rem - 1rem );
        overflow: auto;
        border-left: 1px solid rgba(0,0,0,0.1);
    }

    td.fourth {
        /*flex: 0 0 12rem;*/
        width: 12rem;
        max-width: 12rem;
        overflow: auto;
        margin-left: 4px;
        border: 1px solid rgba(0,0,0,0.1);
    }

    td.last {
        /*flex: 0 0 12rem;*/
        width: 12rem;
        max-width: 12rem;
        overflow: auto;
    }

    .trxPanel .smaller {
        font-size: 75%;
    }

    .trxPanel .label {
        font-family: 'Segoe UI', Helvetica, 'Droid Sans', Tahoma, Geneva, sans-serif;
        font-size: 90%;
        font-weight: 600;
        width: 8em;
        display: inline-block;
        color: #404080;
    }

    .trxPanel .label-flow {
        font-family: 'Segoe UI', Helvetica, 'Droid Sans', Tahoma, Geneva, sans-serif;
        font-size: 90%;
        font-weight: 600;
        display: inline-block;
        color: #404080;
    }

    .trxPanel .value {
        font-family: 'Segoe UI', Helvetica, 'Droid Sans', Tahoma, Geneva, sans-serif;
        font-size: 90%;
        margin-left: 10px;
        margin-right: 5px;
    }

    .trxPanel .proj_num {
        font-size: 120%;
        font-weight:700;
        cursor: pointer;
    }

.trxGrid {
    font-size:80%;
}

.arNotes {
    width: 100%;
    height: 175px;
}


div.trxNotes {
    /*font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;*/
    font-size: 80%;
    width: 100%;
    text-align: left;
    border-collapse: collapse;
    /*border: 1px solid #69c;*/
    /*margin: 2px;*/
    /*    overflow: scroll;*/
    overflow: auto;
    height: 100px;
    max-height: 100px;
    
}

table.trxNotes {
    width: 100%;
    overflow: scroll;
    height: 90px;
    max-height: 90px;
}

td.trxNotes th {
    font-weight: normal;
    font-size: 80%;
    color: #039;
    border-bottom: 1px dashed #69c;
    padding: 4px 10px;

}

    .trxNotes td {
        color: #669;
        padding: 4px 10px;
    }

.trxNotes .trxNotesHeader {
    color: #339;
    background: #f0f0f0;
    font-weight: 700;
    height: 22px;
    max-height: 22px;
}


.trxNotesDetail img {
    max-width: 500px;
}

.trxDateConfirmed {
    color: darkgreen;
    font-weight: 700;
}


.divTrxNotes {
    position: relative;
    width: 100%;
    height:100%;
}

.floater{
    float: right;
    background: darkblue;
    width: 40px;
    height: 40px;
    z-index: 999;
    top: 5px;
    right: 12px;
    position:absolute;
    border-radius: 50%;
    opacity: 5%;
}

.floater:hover {
    opacity: 100%;
    transition-duration: 250ms;
}

.largeButton {
    margin-left: 9px;
    margin-top: 6px;
    font-size: 175%;
}




/*===================================================================================*/
/* PROJECTS/OOR                                                                      */
/*===================================================================================*/
.projectCard {
    position: relative;
    height: 200px !important;
    width: 400px !important;
}

.projectHeader {
    font-size: 150%;
    font-weight: 700;
    color: #CCDDEE;
    font-family: 'Montserrat', sans-serif;
    /*text-align: center;*/
    padding: 5px 20px;
    background: #000099;
}

.projectAside {
    width: 33%;
    height: 180px;
    line-height: 180px;
    float: left;
    /*background: #eeeeee;*/
    text-align: center;
    /*padding: 20px;*/
}

.projectInfo {
    font-family: 'Segoe UI', Helvetica, 'Droid Sans', Tahoma, Geneva, sans-serif;
    font-size: 80%;
    font-weight: 400;
    float: left;
    padding-left: 15px;
    color: black;
    margin: 0;
}

    .projectInfo .label {
        font-family: 'Segoe UI', Helvetica, 'Droid Sans', Tahoma, Geneva, sans-serif;
        font-size: 80%;
        font-weight: 600;
        width: 150px;
        display: inline-block;
        color: #404080;
    }

div.projectInfo > p {
    margin: 2px 0;
}

.oorCard {
    position: relative;
    height: 180px !important;
    width: 100% !important;
}

#oorCardView td.dxic {
    padding: 5px;
}

.oorHeader {
    font-size: 100%;
    font-weight: 600;
    color: #CCDDEE;
    font-family: 'Montserrat', sans-serif;
    /*text-align: center;*/
    /*padding: 5px 20px; */
    background: #000099;
    height: 40px;
    width: 100%;
    display: block;
}

/*.oorHeader > span {
    display: table-cell;
    vertical-align: middle;
}*/

.oorProjectNumber {
    /*flex: 1 1 auto;*/
    float: left;
    padding-right: 5px;
    padding-left: 5px;
    vertical-align: middle;
}

    .oorProjectNumber > span {
        vertical-align: middle;
        line-height: 40px;
    }

.oorProjectLocation {
    /*flex: 1 1 5rem;*/
    float: left;
    padding-right: 5px;
    vertical-align: middle;
}

    .oorProjectLocation > span {
        vertical-align: middle;
        line-height: 40px;
    }

.oorProjectName {
    /*flex: 1 1 5rem;*/
    float: left;
    vertical-align: middle;
}

    .oorProjectName > span {
        vertical-align: middle;
        line-height: 40px;
    }

.oorProjectActions {
    /*flex: 1 1 5rem;*/
    float: right;
    vertical-align: middle;
}



.oorBody {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}

.oorPanel {
    float: left;
    padding: 2px;
    max-height: 150px;
    height: 150px;
    /*margin-left: 5px;*/
}

.oorPanel.first {
    min-width: 15rem;
    flex: 1 1 5rem;
    height: auto;
}

.oorPanel.second {
    min-width: 30rem;
    flex: 0 0 30rem;
    overflow: auto;
    height: auto;
}

.oorPanel.third {
    min-width: 15rem;
    flex: 2 1 15rem;
    width: auto;
    overflow: auto;
    height: auto;
}

.oorPanel.last {
    min-width: 15rem;
    flex: 1 1 15rem;
    float: left;
    overflow: auto;
    height: auto;
}

    .oorPanel .label {
        font-family: 'Segoe UI', Helvetica, 'Droid Sans', Tahoma, Geneva, sans-serif;
        font-size: 80%;
        font-weight: 600;
        width: 9em;
        display: inline-block;
        color: #404080;
    }

    .oorPanel .value {
        font-family: 'Segoe UI', Helvetica, 'Droid Sans', Tahoma, Geneva, sans-serif;
        font-size: 80%;
    }

    .oorPanel > p {
        margin: 0;
    }

.oorChecklistTable {
    table-layout: fixed;
    border-collapse: collapse;
    margin-top: -10px;
}

th.oorRotate {
    /* Something you can count on */
    height: 110px;
    white-space: nowrap;
}

    th.oorRotate > div {
        transform:
        /* Magic Numbers */
        translate(-10px, 51px)
        /* 45 is really 360 - 45 */
        rotate(315deg);
        width: 25px;
        font-family: 'Segoe UI', Helvetica, 'Droid Sans', Tahoma, Geneva, sans-serif;
        font-size: 80%;
    }

        th.oorRotate > div > span {
            /*border-bottom: 1px solid #ccc;*/
            padding: 5px 10px;
            color: #404080;
            font-weight: 500;
        }


.unknownProjectType {
    background: #D0D0D0;
    border: 2px solid #444444;
    color: #444444;
}

.completeProjectType {
    background: #F6F6F6;
    border: 2px solid #117711;  /* Green */
    color: #117711;
}

.pipeDeliveredProjectType {
    background: #F6F6F6;
    border: 2px solid #111177;  /* Blue */
    color: #111177;
}

.kickedOffProjectType {
    background: #F6F6F6;
    border: 2px solid #117777;   /* Cyan */
    color: #117777;
}

.bookingChecklistProjectType {
    background: #F6F6F6;
    border: 2px solid #999911;  /* Yellow */
    color: #999911;
}

.orderReceivedProjectType {
    background: #F6F6F6;
    border: 2px solid #771111;  /* Red */
    color: #771111;
}

.proposalProjectType {
    background: #F6F6F6;
    border: 2px solid #771177;  /* Purple */
    color: #771111;
}


span.oorMoreTag {
    background: red;
    color: white;
    border-radius: 6px;
    margin-left: 10px;
    font-size: 9pt;
    padding: 1px 4px;
    cursor: pointer;
}

.oorItemHeader {
    font-size: 80%;
    font-weight: 700;
    color: #EEEEEE;
    font-family: 'Montserrat', sans-serif;
    /*text-align: center;*/
    padding: 5px 10px;
    background: #888888;
    height: 26px;
    line-height: 28px;
}

.oorPipeCard {
    position: relative;
    height: 200px !important;
    width: 460px !important;
}

.oorPipeInfo {
    font-family: 'Segoe UI', Helvetica, 'Droid Sans', Tahoma, Geneva, sans-serif;
    font-size: 80%;
    font-weight: 400;
    float: left;
    padding-left: 15px;
    color: black;
    margin: 0;
}

    .oorPipeInfo .label {
        font-family: 'Segoe UI', Helvetica, 'Droid Sans', Tahoma, Geneva, sans-serif;
        font-size: 80%;
        font-weight: 600;
        width: 150px;
        display: inline-block;
        color: #404080;
    }

div.oorPipeInfo > p {
    margin: 2px 0;
}

.oorPipeAside {
    width: 180px;
    height: 200px;
    line-height: 180px;
    float: left;
    background: #eeeeee;
    text-align: center;
    /*padding: 20px;*/
}

.oorPipeAside > span {
    display: inline-block;
    vertical-align: bottom;
    line-height: normal;
    padding-bottom: 30px;
    font-family: 'Segoe UI', Helvetica, 'Droid Sans', Tahoma, Geneva, sans-serif;
    font-size: 125%;
    font-weight: 700;
}

.oorContactCard {
    position: relative;
    height: 100px !important;
    /*width: 500px !important;*/
}


table.oorContactCard > tbody > tr > td.dxcvCard_Office365 {
    height: 100px !important;
}


.oorContactInfo {
    font-family: 'Segoe UI', Helvetica, 'Droid Sans', Tahoma, Geneva, sans-serif;
    font-size: 80%;
    font-weight: 400;
    float: left;
    padding-left: 15px;
    color: black;
    margin: 0;
}

.oorContactInfo .label {
    font-family: 'Segoe UI', Helvetica, 'Droid Sans', Tahoma, Geneva, sans-serif;
    /*font-size: 80%;*/
    font-weight: 600;
    width: 100px;
    display: inline-block;
    color: #404080;
    margin-left: 10px;
}

div.oorContactInfo > p {
    margin: 2px 0;
}

/*table.oorUsersCard > tbody > tr > td.dxcvCard_Office365 {
    height: 160px !important;
}*/

.oorUserCard {
    position: relative;
    height: 120px !important;
    /*width: 500px !important;*/
}

table.oorUserCard > tbody > tr > td.dxcvCard_Office365 {
    height: 120px !important;
}

.oorUserInfo {
    font-family: 'Segoe UI', Helvetica, 'Droid Sans', Tahoma, Geneva, sans-serif;
    font-size: 80%;
    font-weight: 400;
    float: left;
    padding-left: 15px;
    color: black;
    margin: 0;
}

.oorUserInfo .label {
    font-family: 'Segoe UI', Helvetica, 'Droid Sans', Tahoma, Geneva, sans-serif;
    /*font-size: 80%;*/
    font-weight: 600;
    width: 100px;
    display: inline-block;
    color: #404080;
    margin-left: 10px;
}

div.oorUserInfo > p {
    margin: 2px 0;
}



.oorAddressCard {
    position: relative;
    height: 100px !important;
    /*width: 500px !important;*/
}


table.oorAddressCard > tbody > tr > td.dxcvCard_Office365 {
    height: 100px !important;
}


.oorAddressInfo {
    font-family: 'Segoe UI', Helvetica, 'Droid Sans', Tahoma, Geneva, sans-serif;
    font-size: 80%;
    font-weight: 400;
    float: left;
    padding-left: 15px;
    color: black;
    margin: 0;
}

.oorAddressInfo .label {
    font-family: 'Segoe UI', Helvetica, 'Droid Sans', Tahoma, Geneva, sans-serif;
    /*font-size: 80%;*/
    font-weight: 600;
    width: 90px;
    display: inline-block;
    color: #404080;
    margin-left: 10px;
}

div.oorAddressInfo > p {
    margin: 2px 0;
}



.projectEditLeftZone,
.projectEditMiddleZone,
.projectEditRightZone {
    float: left;
}

.projectEditMiddleZone {
    max-width: 33%;
    margin-right: 5px;
    min-width: 550px;
}

.projectEditRightZone {
    max-width: 33%;
    min-width: 550px;
}

.projectEditLeftZone {
    min-width: 550px;
    max-width: 750px;
    margin-right: 5px;
}


.oorExPipeCard {
    position: relative;
    height: 200px !important;
    /*width: 460px !important;*/
}

.oorExPipeAside {
    width: 180px;
    height: 200px;
    line-height: 180px;
    float: left;
    background: #eeeeee;
    text-align: center;
    /*padding: 20px;*/
}

.oorExPipeAside > span {
    display: inline-block;
    vertical-align: bottom;
    line-height: normal;
    padding-bottom: 30px;
    font-family: 'Segoe UI', Helvetica, 'Droid Sans', Tahoma, Geneva, sans-serif;
    font-size: 125%;
    font-weight: 700;
}

.oorExPipeInfo {
    font-family: 'Segoe UI', Helvetica, 'Droid Sans', Tahoma, Geneva, sans-serif;
    font-size: 80%;
    font-weight: 400;
    float: left;
    padding-left: 15px;
    color: black;
    margin: 0;
}

.oorExPipeInfo .label {
    font-family: 'Segoe UI', Helvetica, 'Droid Sans', Tahoma, Geneva, sans-serif;
    font-size: 80%;
    font-weight: 600;
    width: 150px;
    display: inline-block;
    color: #404080;
}

div.oorExPipeInfo > p {
    margin: 2px 0;
}

.oorExContactCard {
    position: relative;
    height: 200px !important;
    /*width: 460px !important;*/
}

.oorExUserCard {
    position: relative;
    height: 160px !important;
    /*width: 460px !important;*/
}

table.oorExUserCard > tbody > tr > td.dxcvCard_Office365 {
    height: 150px !important;
}

div.oorDockPanelHeader {
    background-color: #EDEDED !important;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
}

.oorNotes {
    /*font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;*/
    font-size: 80%;
    width: 100%;
    text-align: left;
    border-collapse: collapse;
    border: 1px solid #69c;
    margin: 2px;
}

.oorNotes th {
    font-weight: normal;
    font-size: 80%;
    color: #039;
    border-bottom: 1px dashed #69c;
    padding: 4px 10px;
}

.oorNotes td {
    color: #669;
    padding: 4px 10px;
}

/*.oorNotes tbody tr:hover td {
color: #339;
background: #d0dafd;
}*/

.oorNotes .oorNotesHeader {
/*    color: #339;
    background: #d0dafd;
*/
    color: #339;
    background: #f0f0f0;
    font-weight: 700;
}


.oorNotesDetail img {
    max-width: 500px;
}


.oorPipeTable {
    /*font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;*/
    font-size: 80%;
    width: 100%;
    text-align: left;
    border-collapse: collapse;
    border: 1px solid #69c;
    margin: 2px;
}

.oorPipeTable th {
    font-weight: normal;
    font-size: 80%;
    color: #039;
    border-bottom: 1px dashed #69c;
    padding: 4px 10px;
}

.oorPipeTable td {
    color: #669;
    padding: 4px 10px;
}

.oorPipeTable tbody tr:hover td {
    color: #339;
    background: #d0dafd;
}

.pipe_color_B {
    /*color: #0000A0 !important;*/
    background-color: #0A00D2;
    color: white !important;
}

.pipe_color_G {
    /*color: #009000 !important;*/
    background-color: #027C00;
    color: white !important;
}

.pipe_color_P {
    /*color: #FF00FF !important;*/
    background-color: #DD80FF;
    color: white !important;
}

.pipe_color_W {
    /*color: #000000 !important;*/
    background-color: white;
    color: black !important;
}

.pipe_color_Y {
    /*color: #777777 !important;*/
    background-color: #C0C0C0;
    color: black !important;
}

.pipe_color_X {
    /*color: #FF9500 !important;*/
    background-color: #FFFFB0;
    color: black !important;
}


.oorContactTable {
    /*font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;*/
    font-size: 80%;
    width: 100%;
    text-align: left;
    border-collapse: collapse;
    border: 1px solid #69c;
    margin: 2px;
}

    .oorContactTable th {
        font-weight: normal;
        font-size: 80%;
        color: #039;
        border-bottom: 1px dashed #69c;
        padding: 4px 10px;
    }

    .oorContactTable td {
        color: #669;
        padding: 4px 10px;
    }

tr.evenRow {
    color: #339;
    background: #f0f0f0;
}

tr.oddRow {
    color: #000000;
    background: #ffffff;
}

/* Override the card size defined by DevExpress */
/*.dxcvCard_Office365, .dxcvFlowCard_Office365, .dxcvBreakpointsCard_Office365, .dxcvEmptyCard_Office365, .dxcvEmptyHiddenCard_Office365 {
    width: 500px !important;
    height: 300px !important;
    padding: 0 2px 18px !important;
    vertical-align: top !important;
}*/
/*===================================================================================*/
/* LOTS                                                                              */
/*===================================================================================*/
.lotCard {
    position: relative;
    height: 200px !important;
    width: 400px !important;
}

.pipeLotHeader {
    font-size: 125%;
    font-weight: 700;
    color: #CCDDEE;
    font-family: 'Montserrat', sans-serif;
    /*text-align: center;*/
    padding: 5px 20px;
    background: #000099;
}

.pipeLotAside {
    width: 180px;
    height: 180px;
    line-height: 180px;
    float: left;
    background: #eeeeee;
    text-align: center;
    /*padding: 20px;*/
}

    .pipeLotAside > span {
        display: inline-block;
        vertical-align: bottom;
        line-height: normal;
        padding-bottom: 30px;
        font-family: 'Segoe UI', Helvetica, 'Droid Sans', Tahoma, Geneva, sans-serif;
        font-size: 125%;
        font-weight: 700;
    }

.lotInfo {
    font-family: 'Segoe UI', Helvetica, 'Droid Sans', Tahoma, Geneva, sans-serif;
    font-size: 80%;
    font-weight: 400;
    float: left;
    padding-left: 15px;
    color: black;
    margin: 0;
}

    .lotInfo .label {
        font-family: 'Segoe UI', Helvetica, 'Droid Sans', Tahoma, Geneva, sans-serif;
        font-size: 80%;
        font-weight: 600;
        width: 150px;
        display: inline-block;
        color: #404080;
    }

div.lotInfo > p {
    margin: 2px 0;
}



.addLotButton {
    float: right;
    border-radius: 20px;
    background: #73AD21;
    padding: 6px 10px;
    margin-top: 6px;
}

    .addLotButton:hover {
        background-color: #f87c1d;
    }

.editLotButton {
    float: right;
    border-radius: 15px;
    background: #73AD21;
    padding: 4px 8px;
}

    .editLotButton:hover {
        background-color: #f87c1d;
    }


.pipe_white {
    background-image: url("Images/pipe_white.png");
}

.pipe_blue {
    background-image: url("Images/pipe_blue.png");
}

.pipe_green {
    background-image: url("Images/pipe_green.png");
}

.pipe_gray {
    background-image: url("Images/pipe_gray.png");
}

.pipe_purple {
    background-image: url("Images/pipe_purple.png");
}


/*===================================================================================*/
/* Daily Reports                                                                              */
/*===================================================================================*/

#dailyReportEditorFrame {
    margin-top: 8px;
}

#dailyReportDetailsEditorFrame {
    margin-top: 8px;
}


.dailyReportTable {
    /*font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;*/
    font-size: 80%;
    width: 100%;
    text-align: left;
    border-collapse: collapse;
    border: 1px solid #69c;
    margin: 4px 0px;
}

table.dailyReportTable tbody tr:nth-child(even) {
    background: #F5F5FF;
}

.dailyReportTable th {
    font-weight: normal;
    font-size: 80%;
    color: #039;
    border-bottom: 1px dashed #69c;
    padding: 4px 10px;
}

.dailyReportTable td {
    color: #669;
    padding: 4px 10px;
}

.dailyReportTable th.timeColumn {
    width: 40px;
}

.dailyReportTable tbody tr:hover td {
    color: #339;
    background: #d0dafd;
}


.oorDailyReportButton {
    margin: -2px 0 0 0;
    font-size: 11px;
    font-weight: 500;
    font-family: Montserrat, sans-serif;
    color: #F5F5FF;
}

.dailyReportNewCommentTable {
    /*font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;*/
    font-size: 80%;
    width: 100%;
    text-align: left;
    border-collapse: collapse;
    border: 1px solid #69c;
    margin: 4px 0px;
}

.dailyReportNewCommentTable td {
    color: #669;
    padding: 4px 10px;
}

.newDailyComment {
    width: 100%;
}

.dailyReportNewCommentTable col.col1 {
    width:100px;
}

.dailyReportNewCommentTable col.col2 {
    width: auto;
}

.dailyReportNewCommentTable col.col3 {
    width: 75px;
}
/*
    https://www.smashingmagazine.com/2018/02/media-queries-responsive-design-2018/

    @media (hover) {
        .can-i-hover::after {
            content: "You look like you can hover.";    
        } 
    }

    @media  (hover:none) {
        .can-i-hover::after {
            content: "I don't think you can hover.";    
        } 
    }


*/
/*@media (hover:none) {
    .oorProjectName {
        display: none;
    }

    .editProjectButton, .changeOrderButton, .deleteProjectButton {
        display: none;
    }
}*/
/* Intermediate size */
@media screen and (max-width: 900px) {
    .oorProjectName {
        display: none;
    }


    .oorPanel.first {
        /*width: 25%;*/
    }

    .oorPanel.second {
    }

    .oorPanel.third {
        width: 20%;
    }

    .oorPanel.last {
        /*display: none;*/
    }

    .headerTop .selectedView {
        display: none;
    }

    table.oorCard {
        padding: 1px;
    }


    .debug {
        background-color: #DDFFDD;
    }
}
/* Mobile Screen */
/*
iPhone 7+: 375x533
iPhone 8: 375x533
WP Lumia620: 360x544
Android Emu 5": 392x573
*/
@media screen and (max-width: 600px) {

    #ContentSplitter {
        border: 0;
    }

    .headerTop .selectedView {
        display: none;
    }

    .oorPanel.first {
        min-width: 100%;
        flex: 1 1 100%;
        width: 100%;
        height: auto;
    }

    .oorPanel.second {
        min-width: 100%;
        flex: 1 1 100%;
        width: 100%;
        height: auto;
    }

    .oorPanel.third {
        min-width: 100%;
        flex: 1 1 100%;
        width: 100%;
        height: auto;
    }

    .oorPanel.last {
        min-width: 100%;
        flex: 1 1 100%;
        width: 1vw;
        height: auto;
    }

    .oorHeader {
        font-size: 90%;
        font-weight: 500;
        color: #CCDDEE;
        font-family: 'Montserrat', sans-serif;
        /*text-align: center;*/
        /*padding: 5px 20px; */
        /*height: 30px;*/
        width: 100%;
        display: table;
    }

        .oorHeader > span {
            display: table-cell;
            vertical-align: middle;
            padding-left: 10px;
        }

    .oorProjectName {
        display: none;
    }

    #oorStatusBar {
        display: none;
    }

    .selectedView {
        font-size: 120%;
    }

    /*.roundedButton {
        
        margin: -3px 0px 5px 0;
        display: table-cell;
        vertical-align: middle;
        cursor: pointer;
       
        font-size: 90%;
    }

        .roundedButton:active {
            box-shadow: 1px 1px 5px #888888;
            margin: -1px -2px 3px 0;
        }*/

    .oorActionButton {
        /*margin: 3px 10px 0 0;*/
        z-index: 10;
    }

    table.oorPipeTable {
        margin: 0;
    }

    table.oorNotes {
        margin: 0;
    }

    table.oorContactTable {
        margin: 0;
    }


    .oorPipeTable th {
        padding: 3px 5px;
    }

    .oorPipeTable td {
        padding: 3px 5px;
    }

    .editProjectButton, .changeOrderButton, .deleteProjectButton {
        display: none;
    }

    .debug {
        background-color: #FFDDDD;
    }
}