.baseColourLight {
    color: #2971C5;
}

.baseColourLightBackGround {
    background-color: #2971C5;
}

.baseColourDark {
    color: #005CAB;
}

.app-grey-background {
    background-color: #f2f2f2;
}

.sh-colour-complete {
    background-color: #00a300 !important;
}

.sh-colour-complete-font {
    color: #00a300 !important;
}

.sh-colour-complete:hover {
    opacity: .7 !important;
}


.sh-colour-alerts {
    color: #FF2E12;
    background-color: #FF2E12 !important;
}

.sh-colour-alerts-font {
    color: #FF2E12 !important;
}

/*.sh-colour-alerts:hover {
        opacity: .7 !important;
    }*/

.sh-colour-notes {
    color: #F4B300;
    background-color: #F4B300 !important;
}

    .sh-colour-notes:hover {
        opacity: .7 !important;
    }

.sh-colour-extra {
    color: #9575CD;
    /*background-color: #9575CD !important;*/
    background-color: #c24361 !important;
}

.sh-colour-extra-font {
    color: #9575CD;
}

.sh-colour-extra:hover {
    opacity: .7 !important;
}


.sh-colour-patientEdit {
    color: #2971C5;
    background-color: #2971C5 !important;
}

.sh-colour-patientEdit-font {
    color: #2971C5 !important;
}

.sh-colour-patientEdit:hover {
    opacity: .7 !important;
}

.sh-colour-print {
    color: #976CBE;
    background-color: #976CBE !important;
}

.sh-colour-print-font {
    color: #976CBE !important;
}

.sh-colour-patientAttachment {
    color: #858585;
    background-color: #858585 !important;
}

    .sh-colour-patientAttachment:hover {
        opacity: .7 !important;
    }

.sh-colour-dansac {
    color: #f79239;
    background-color: #f79239 !important;
}

/*sh-patientBanner styles*/

.sh-popup-colour-patientAlerts.dx-popup-wrapper .dx-overlay-content .dx-popup-title {
    background-color: #FF2E12 !important;
    color: white !important;
}

.sh-popup-colour-patientAlerts.dx-popover-wrapper .dx-popover-arrow:after {
    border: #FF2E12 solid 2px;
    background: #F44336 !important;
}

.sh-popup-colour-patientAlerts.dx-popover-wrapper .dx-overlay-content {
    border: #FF2E12 solid 2px;
}

.sh-popup-colour-patientAlerts.dx-popup-wrapper .dx-overlay-content .dx-popup-title .dx-button {
    background-color: #FF2E12 !important;
}


.sh-popup-colour-patientNotes.dx-popup-wrapper .dx-overlay-content .dx-popup-title {
    background-color: #f4b300 !important;
    color: white !important;
}

    .sh-popup-colour-patientNotes.dx-popup-wrapper .dx-overlay-content .dx-popup-title .dx-button {
        background-color: #f4b300 !important;
    }

.sh-popup-colour-patientNotes.dx-popover-wrapper .dx-popover-arrow:after {
    border: #f4b300 solid 2px;
    background: #f4b300 !important;
}

.sh-popup-colour-patientNotes.dx-popover-wrapper .dx-overlay-content {
    border: #f4b300 solid 2px;
}


.sh-popup-colour-patientAttachments.dx-popup-wrapper .dx-overlay-content .dx-popup-title {
    background-color: #696969 !important;
    color: white !important;
}

    .sh-popup-colour-patientAttachments.dx-popup-wrapper .dx-overlay-content .dx-popup-title .dx-button {
        background-color: #696969 !important;
    }

.sh-popup-colour-patientAttachments.dx-popover-wrapper .dx-popover-arrow:after {
    border: #696969 solid 2px;
    background: #696969 !important;
}

.sh-popup-colour-patientAttachments.dx-popover-wrapper .dx-overlay-content {
    border: #696969 solid 2px;
}

/*typography*/

.dx-theme-generic-typography h1, h2, h3, h4, h5, h6 {
    font-weight: 300 !important;
}

.dx-theme-generic-typography h6 {
    font-size: 14px;
}

.dx-theme-generic-typography h2 {
    font-size: 25px;
}

.dx-theme-generic-typography h3 {
    font-size: 21px;
}

/*Patient banner gender colours*/
.colourGenderFemale {
    background-color: #bd87fe;
}

.colourGenderMale {
    background-color: #51aefb;
}

.colourGenderNotSpecified {
    background-color: #f86c6e;
}

.colourGenderUnknown {
    background-color: #b5b5b5;
}

.colourDeceased {
    background-color: black;
    font-weight: bold;
}

.postcode input {
    text-transform: uppercase;
}

/* Centers any text in a container */
.centerText {
    position: absolute;
    text-align: center;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    -o-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
}

.centerTextRelative {
    position: relative !important;
    text-align: center;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    -o-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
}

/* Apply to any div which contains text with line feeds/carridge returns */
.notes-text {
    white-space: pre-wrap; /* CSS3 */
    word-wrap: break-word; /* Internet Explorer 5.5+ */
}

/* coloured popup banner styles (with showTitle: false and applying your own padding)*/
.alertsPopupBanner {
    border-bottom: none;
    text-transform: none;
    font-size: 1.7rem;
    font-weight: 300;
    text-align: left;
    color: #fff;
    background-color: #FF2E12;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 36px;
    padding: 10px 20px;
}

.notesPopupBanner {
    border-bottom: none;
    text-transform: none;
    font-size: 1.7rem;
    font-weight: 300;
    text-align: left;
    color: #fff;
    background-color: #f4b300;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 36px;
    padding: 10px 20px;
}
/*Alerts banner style end*/

/*Mandatory style (shows a lable field if it's mandatory')*/

.isMandatory:before {
    content: " *";
}

.isMandatory {
    color: red;
}

.warningText {
    color: #FF2E12;
    margin-bottom: 10px;
}

.warningBannerThin {
    background-color: #FF2E12;
    color: #fff;
    padding: 5px 20px;
    position: absolute;
    left: 0;
    right: 0;
    z-index: 10;
    -webkit-box-shadow: 0px -4px 10px -5px #fff;
    -moz-box-shadow: 0px -4px 10px -5px #fff;
    box-shadow: 0px -4px 10px -5px #fff;
}

.warningBannerThin-smallBanner {
    background-color: #FF2E12;
    color: #fff;
    padding: 2px 20px;
    position: absolute;
    left: 0;
    right: 0;
    z-index: 0;
    -webkit-box-shadow: 0px -4px 10px -5px #fff;
    -moz-box-shadow: 0px -4px 10px -5px #fff;
    box-shadow: 0px -4px 10px -5px #fff;
}

.warningBannerThick {
    background-color: #FF2E12;
    color: #fff;
    padding: 10px 20px 10px 15px;
    position: absolute;
    left: 0;
    right: 0;
    z-index: 2000;
}

.alertbar-arrow-up {
    width: 0;
    height: 0;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-bottom: 20px solid #FF2E12;
    z-index: 20;
}

.alertBannerClose {
    font-size: 20px;
    position: relative;
    right: 5px;
}

.alertBannerClose-smallBanner {
    font-size: 17px;
    position: relative;
    right: 5px;
}

.alert-blink {
    -webkit-animation-name: blinkerAlert;
    -webkit-animation-duration: 1s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: 3;
    -moz-animation-name: blinkerAlert;
    -moz-animation-duration: 1s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: 3;
    animation-name: blinkerAlert;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-iteration-count: 3;
}

@-moz-keyframes blinkerAlert {
    /*0% { opacity: 1.0; }
    50% { opacity: 0.7; }
    100% { opacity: 1.0; }*/
    0% {
        background-color: #FF2E12;
    }

    50% {
        background-color: #FF6B98;
    }

    100% {
        background-color: #FF2E12;
    }
}

@-webkit-keyframes blinkerAlert {
    0% {
        background-color: #FF2E12;
    }

    50% {
        background-color: #FF6B98;
    }

    100% {
        background-color: #FF2E12;
    }
}

@keyframes blinkerAlert {
    0% {
        background-color: #FF2E12;
    }

    50% {
        background-color: #FF6B98;
    }

    100% {
        background-color: #FF2E12;
    }
}


.alert-blink-arrow {
    -webkit-animation-name: blinkerAlertArrow;
    -webkit-animation-duration: 1s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: 3;
    -moz-animation-name: blinkerAlertArrow;
    -moz-animation-duration: 1s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: 3;
    animation-name: blinkerAlertArrow;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-iteration-count: 3;
}

@-moz-keyframes blinkerAlertArrow {
    0% {
        border-bottom-color: #FF2E12;
    }

    50% {
        border-bottom-color: #FF6B98;
    }

    100% {
        border-bottom-color: #FF2E12;
    }
}

@-webkit-keyframes blinkerAlertArrow {
    0% {
        border-bottom-color: #FF2E12;
    }

    50% {
        border-bottom-color: #FF6B98;
    }

    100% {
        border-bottom-color: #FF2E12;
    }
}

@keyframes blinkerAlertArrow {
    0% {
        border-bottom-color: #FF2E12;
    }

    50% {
        border-bottom-color: #FF6B98;
    }

    100% {
        border-bottom-color: #FF2E12;
    }
}

/*validation*/

.error span {
    color: red;
    font-size: 12px;
}

.error > div {
    border: 1px solid red;
}


/*dxValidatorSummary*/

.validationSummaryLogin {
    padding: 10px 30px 0px 30px;
}

.sh-validation-summary {
    display: none;
}

    .sh-validation-summary.header {
        font-size: 14px;
        margin-bottom: 5px;
    }

    .sh-validation-summary.bottom {
        margin-bottom: 15px;
        padding: 5px;
        border-bottom: solid 2px red;
        display: none;
    }

    .sh-validation-summary.content {
        height: 25px;
        line-height: 25px;
    }

        .sh-validation-summary.content div {
            display: inline;
            vertical-align: middle;
        }

        .sh-validation-summary.content .icon {
            font-size: 12px;
            margin-right: 2px;
        }

        .sh-validation-summary.content .text {
            color: black;
        }

/*.dx-invalid.dx-texteditor.dx-show-clear-button .dx-texteditor-container:after {
    right: 8px;
}*/


/* hyperink dxDataGrid styles (set cssClass to this) */

.dx-datagrid-nodata {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.dataGrid-hyperlink {
    color: #2971C5;
}

.dx-datagrid-rowsview .dx-selection.dx-row > td,
.dx-datagrid-rowsview .dx-selection.dx-row:hover > td {
    background-color: #2971C5;
}

.dx-datagrid-rowsview .dx-selection.dx-row.dx-row-lines:first-child > td, .dx-datagrid-rowsview .dx-selection.dx-row:hover.dx-row-lines:first-child > td {
    border-top: 1px solid #2971C5;
}


.dataGrid-wrapText {
    white-space: pre-wrap; /* css-3 */
    word-wrap: break-word; /* Internet Explorer 5.5+ */
    white-space: -webkit-pre-wrap; /* Newer versions of Chrome/Safari*/
}

.dx-datagrid-rowsview .dx-select-checkboxes-hidden > tbody > tr > td > .dx-select-checkbox {
    display: inline-block;
}

/* hyperink dxDataGrid styles end */


/* Reading detail table */

.detailTableScrollWithButtons {
    position: absolute;
    height: auto !important;
    top: 0;
    bottom: 65px;
    left: 10px;
    right: 0;
}

.detailTableScroll {
    position: absolute;
    height: auto !important;
    top: 0;
    bottom: 0px;
    left: 0;
    right: 0;
}

.detailsTable {
    width: 100%;
}

    .detailsTable td {
        padding: 7px 0;
        vertical-align: top;
    }

        .detailsTable td h5 {
            font-weight: 600 !important;
            font-size: 14px;
        }

        .detailsTable td div {
            font-weight: 600 !important;
            font-size: 14px;
        }

        .detailsTable td h5:empty {
            width: 5px !important;
            height: 2px !important;
            background: #000 !important;
            margin-left: 2px !important;
            margin-top: 4px !important;
            padding-left: 0 !important;
            padding-right: 0 !important;
        }

    .detailsTable.whiteFont td h5:empty {
        background: #fff !important;
    }
/* Reading detail table end */


/*new reading pane css only table layout ***use this*** */
.sh-readingPane-container {
    display: table;
    table-layout: fixed;
    width: 50%;
}

.sh-readingPane-fieldset {
    display: table-row;
    line-height: 25px;
}

    .sh-readingPane-fieldset:nth-child(even) {
        background-color: #f6f6f6;
    }

.sh-readingPane-field {
    display: table-cell;
    padding: 10px;
}

    .sh-readingPane-field:nth-child(odd) {
        width: 140px;
        color: #818181;
    }

    .sh-readingPane-field div:empty {
        width: 5px !important;
        height: 1px !important;
        background: #000 !important;
        margin-left: 2px !important;
        margin-bottom: 4px;
    }

/*new reading pane css only table layout end */

/*generic table*/

.table-container {
    display: table;
}

.table-row {
    display: table-row;
}

.table-cell {
    display: table-cell;
}

/*generic table end*/

.cursorPointer {
    cursor: pointer;
}

.noDataText {
    color: #a8a8a8;
    font-size: 17px !important;
}

/*Give text a ... if it overflows*/
.ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    width: 100%;
}

/*List tiles*/
.listTileParent {
    float: left;
    display: block;
    width: 30%;
}

.dx-list-item.listTileChild.dx-state-active {
    background-color: none !important;
    opacity: .8;
}

.listTileChild {
    height: 90px;
    margin: 15px 20px 0 20px;
    display: block !important;
    color: #fff;
}

/*landscape styles for tiles*/

/*@media screen and (orientation:landscape ) {*/
/* Tile styles */

.tile-control {
    height: 350px !important;
    padding-left: 5px;
    display: inline-block;
    float: left;
}

    .tile-control.iOS {
        height: 450px !important;
        padding-left: 5px;
        display: inline-block;
        float: left;
    }


#tile #iosImage {
    display: block;
    margin: auto;
    width: 90px;
    height: 90px;
    padding-top: 40px;
}


.tile-control.desktop {
    height: 240px !important;
    padding-left: 5px;
    display: inline;
    float: left;
}

.tile-wrapper {
    color: #fff;
}

.tile-text-bottomLeft {
    position: absolute;
    bottom: 5px;
    left: 10px;
}

.tile-text-topLeft {
    position: absolute;
    top: 5px;
    left: 10px;
}

#tile img {
    margin: auto;
    width: 45px;
    height: 45px;
    margin-top: 10px;
    /*padding-top: 10px;
    padding-left: 5px;*/
}

#tile h4 {
    padding-left: 5px;
    padding-top: 5px;
}

#tile.desktop img {
    display: block;
    margin: auto;
    width: 88px;
    height: 88px;
    padding-top: 45px;
    padding-left: 0;
}

.tile-header {
    padding-left: 15px;
}

.tile-group {
    font-size: 14px;
    font-weight: 600;
}

/*}*/

/*List Item Separator Styles*/
.listParent .listChild:nth-child(2n) {
    background-color: rgba(243, 243, 243, 1);
}

/*Mobile List item style*/

.listItemUpperLeft {
    font-weight: 400;
    font-size: 1pc;
    padding-top: 10px;
    float: left;
}

.listItemUpperRight {
    font-weight: 400;
    font-size: 1pc;
    float: right;
}

.listItemLowerLeft {
    clear: both;
    font-size: 1pc;
    font-weight: 400;
    float: left;
}

.listItemLowerRight {
    font-weight: 400;
    font-size: 1pc;
    float: right;
}

.removePadding {
    padding: 0;
}

/*End mobile List item style*/


/* Popup footer */

.popout .footer {
    position: absolute;
    bottom: 10px;
    right: 20px;
    left: 20px;
    vertical-align: middle;
}

.popout .label {
    text-align: left;
    color: grey;
    /*font-size: 20px;*/
    padding-bottom: 5px;
    padding-top: 15px;
}

    .popout .label.firstLabel {
        padding-top: 0;
    }

/*Popup Buttons*/

.popupHeaderButtons {
    float: right;
}

    .popupHeaderButtons .buttonImage {
        height: 36px;
        width: 36px;
        vertical-align: middle;
    }

    .popupHeaderButtons div {
        margin-left: 5px;
        cursor: pointer;
    }

    /*Needs to be desktop only*/
    /*.popupHeaderButtons span img:hover {
    background-color: lightgrey;
    border-radius: 50px;
}*/

    .popupHeaderButtons span div:active {
        opacity: 0.5;
        /*background-color: grey;
    border-radius: 50px;*/
    }

/*bottom bar popup footer style*/

.footerBar {
    position: absolute;
    bottom: 0;
    height: 45px;
    right: 0;
    width: 100%;
    vertical-align: middle;
}

.footerBarMenu {
    background-color: #2971C5;
    line-height: 45px;
    padding-top: 4px;
    text-align: center;
}

/*bottom bar popup footer style end*/

.close-button {
    background-image: url(images/Hospital_white_circle_64.png);
    background-size: 32px;
    background-repeat: no-repeat;
    vertical-align: middle;
    width: 32px;
    height: 45px;
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
    margin-left: 20px;
}

.save-button {
    background-image: url(images/Edit_white_circle_64.png);
    background-size: 32px;
    background-repeat: no-repeat;
    vertical-align: middle;
    width: 32px;
    height: 45px;
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
    margin-left: 20px;
}

.dxList-withDelete .dx-button-danger .dx-icon {
    color: darkred;
}

/*Replacement for dx-fieldset*/

.sh-field-label {
    margin-bottom: 4px;
    display: inline-block;
    font-size: 14px;
    color: #666;
}

.sh-field-value {
    margin-bottom: 12px;
}

.sh-form-section {
    margin-top: 20px;
    margin-bottom: 10px;
    font-size: 17px !important;
    font-weight: 600;
}

.sh-form-section-top {
    margin-bottom: 10px;
    font-size: 17px !important;
    font-weight: 600;
}

/*Override generic theme for metro style*/

/* typography */

.bold {
    font-weight: bold !important;
}

.semi-bold {
    font-weight: 600;
}

.dx-theme-generic-typography {
    background: none;
    font-family: Segoe UI Web, Segoe UI, -apple-system, BlinkMacSystemFont, Roboto, Helvetica Neu, sans-serif;
    -webkit-font-smoothing: antialiased;
}

.dx-widget input, .dx-widget textarea {
    font-family: Segoe UI Web, Segoe UI, -apple-system, BlinkMacSystemFont, Roboto, Helvetica Neu, sans-serif;
    -webkit-font-smoothing: antialiased;
}

.dx-lookup-empty .dx-lookup-field {
    font-weight: inherit;
}

.dx-lookup-field {
    font-family: Segoe UI Web, Segoe UI, -apple-system, BlinkMacSystemFont, Roboto, Helvetica Neu, sans-serif;
    -webkit-font-smoothing: antialiased;
    font-weight: normal;
}

.dx-theme-generic .navbar-layout .layout-content {
    background: none;
    background-color: #fff;
}

.desktop-layout .dx-toolbar .dx-toolbar-label {
    font-size: 21px;
    padding-bottom: 2px;
}

/*Fixed for DX adding dx-device-mobile*/
.dx-device-mobile .dx-toolbar {
    padding: 0 10px;
}

.dx-popup-title.dx-toolbar {
    padding: 0px 20px;
    /*padding: 6px 20px;*/
}

.dx-popup-bottom.dx-toolbar {
    padding: 0 20px 20px;
}

/* Top level Layout content */
.dx-slideout-menu {
    max-width: 280px;
}

@media (max-width: 550px) {
    .dx-theme-generic .slideout-layout .layout-content {
        left: 0;
        right: 0;
        width: auto;
        top: 46px !important;
    }
}

@media (min-width: 551px) {
    .dx-theme-generic .slideout-layout .layout-content {
        left: 0px;
        right: 0;
        width: auto;
        top: 46px !important;
    }
}

.dx-theme-generic .slideout-layout .layout-header {
    height: 0 !important;
}

.slideout-layout .layout-frame, .slideout-layout .layout-frame .layout-header, .slideout-layout .layout-frame .layout-header .dx-toolbar {
    border-radius: 0 !important;
}


.dx-theme-generic .dx-content-background {
    background-color: white;
}

/* End Top level Layout content */

/* Popover */

.dx-popup-wrapper .dx-overlay-content {
    border: none;
    /*-webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;*/
    /*font-family: Segoe UI Light, Segoe UI Web Light, Segoe UI Web Regular, Segoe UI, Tahoma, Arial, Helvetica, Sans-Serif;*/
    font-family: Segoe UI Web, Segoe UI, -apple-system, BlinkMacSystemFont, Roboto, Helvetica Neu, sans-serif;
    -webkit-font-smoothing: antialiased;
    border-radius: 4px;
}

.dx-popover-wrapper.dx-position-bottom .dx-popover-arrow:after {
    background: #fff;
}

.dx-popover-wrapper .dx-popup-title .dx-closebutton .dx-icon {
    color: black !important;
}

.dx-popover-wrapper .dx-popup-title .dx-closebutton {
    background-color: transparent !important;
}

.sh-popover-noPadding .dx-popup-content {
    padding: 10px;
}

/* Used where you have a popover with a list of menu items in */
.sh-popover-menu .dx-popup-content {
    padding: 5px;
}

.sh-popover-withScroll .dx-popup-content {
    padding: 20px 0 20px 20px;
}

    .sh-popover-withScroll .dx-popup-content .dx-scrollable-content {
        margin-right: 20px;
    }

/* popup */

.dx-theme-generic .dx-popup-wrapper .dx-overlay-content .dx-popup-title {
    border-bottom: none;
    text-transform: none;
    text-align: left;
    color: #fff;
    background-color: #2971C5;
}

.dx-popup-title {
    border-bottom: none;
}

.dx-toolbar {
    border-bottom: none;
}

.dx-popup-bottom .dx-toolbar-button {
    padding: 0 5px;
}

.dx-popup-title.dx-toolbar .dx-toolbar-label {
    font-size: 17px;
}

.dx-toolbar .dx-toolbar-label {
    font-size: 17px;
}

.dx-popup-wrapper .dx-button {
    margin: 0;
}

.dx-theme-generic .dx-popup-wrapper.dx-dropdownmenu-popup-wrapper .dx-overlay-content .dx-popup-content .dx-scrollview-content {
    background: none;
}

.dx-theme-generic .dx-popup-wrapper.dx-dropdownmenu-popup-wrapper .dx-overlay-content .dx-popup-content .dx-list-item {
    /*background: none;*/
    color: #323a45;
}

/*.dx-list:not(.dx-list-select-decorator-enabled) .dx-list-item.dx-state-hover {
    background-color: rgba(96,96,96, .0);
    opacity: 0.7;
}*/


/*.dx-list:not(.dx-list-select-decorator-enabled) .dx-list-item.dx-state-hover {
    background-color: rgba(96,96,96, .0);
    opacity: 0.7;
}*/

.sh-login-popup .dx-popup-content {
    padding: 0 !important;
}

.dx-invalid-message .dx-tooltip-wrapper .dx-overlay-content .dx-popup-content {
    padding: 10px !important;
}

/*Tooltip*/

.sh-tooltip-green.dx-tooltip-wrapper .dx-overlay-content {
    /*border: 1px solid #c2c2c2;*/
    border: none !important;
    background-color: yellowgreen !important;
    color: #fff;
}

.sh-tooltip-green.dx-tooltip-wrapper .dx-popover-arrow:after {
    background: yellowgreen !important;
    border: none !important;
}

.sh-tooltip-green.dx-popover-arrow:after {
    background-color: #fff !important;
}


/* Dropdown menu */

.dx-dropdownlist-popup-wrapper .dx-popup-content {
    border: 1px solid lightgray;
}


/* Popover */

.dx-theme-generic .dx-popover-wrapper .dx-overlay-content {
    border: 1px solid lightgray;
    -webkit-box-shadow: 0 0 4px rgba(0,0,0,.30);
    box-shadow: 0 0 4px rgba(0,0,0,.30);
}

.dx-theme-generic .dx-popover-wrapper .dx-popover-arrow:after {
    border: 1px solid lightgray;
    -webkit-box-shadow: 0 0 4px rgba(0,0,0,.30);
    box-shadow: 0 0 4px rgba(0,0,0,.30);
}

.dx-theme-generic .dx-popover-wrapper .dx-overlay-content .dx-popup-title {
    color: #2971C5;
    background-color: transparent;
}

.dx-popover-arrow {
    z-index: 30000;
}

/* end popup */

.dx-theme-generic .dx-widget {
    color: #323a45;
    background-color: inherit;
    /*font-size: 11pt;*/
    /*font-weight: 300;*/
    font-family: Segoe UI Web, Segoe UI, -apple-system, BlinkMacSystemFont, Roboto, Helvetica Neu, sans-serif;
    -webkit-font-smoothing: antialiased;
    line-height: 1.3636;
}

.dx-theme-generic .dx-editbox {
    border: 1px solid #A9A9A9;
    padding-left: 10px !important;
    padding-right: 10px !important;
    background: #fff;
}

.dx-texteditor {
    border-radius: 0 !important;
}

.dx-texteditor-input {
    background: none;
    color: inherit;
    border-radius: 0 !important;
}

.dx-device-mobile .dx-field {
    margin: 0;
}

.dx-device-mobile .dx-fieldset {
    margin: 10px 15px;
    padding: 0;
}

.dx-theme-generic .dx-field-value:not(.dx-widget) > .dx-widget:not(.dx-button) {
    padding-left: inherit;
    padding-right: inherit;
}

.dx-theme-generic .dx-field:not(:last-child):not(:only-child) {
    border-bottom: none;
}

.dx-theme-generic .dx-autocomplete .dx-textbox .dx-editbox-input {
    padding: 0;
}

.dx-theme-generic .dx-fieldset:not(:last-child):not(:only-child) {
    border-bottom: none;
}

.dx-theme-generic .dx-field {
    padding: 0;
    padding-top: 16px;
    min-height: 35px;
}

.dx-theme-generic .dx-toolbar {
    height: 50px;
    /*font-weight: 300!important;*/
    color: #fff;
    border-bottom: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    -ms-box-shadow: none;
    -o-box-shadow: none;
}

/* toolbar slideout layout */

.layout-toolbar.dx-toolbar {
    /*height: initial;*/
    background: #2971C5 !important;
    height: 46px;
    padding: inherit;
}

    .layout-toolbar.dx-toolbar .dx-toolbar-label {
        font-size: 21px;
    }

.dx-toolbar .dx-toolbar-item, .dx-toolbar .dx-toolbar-menu-container {
    padding: 0 0 0 0;
}

/****************************************************** Tiles *************************************************************/

.dx-state-hover-enabled .dx-tile:hover {
    background-image: none;
}

.dx-tile {
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    -o-border-radius: 0;
    border-radius: 0;
    background-image: none;
    padding: 0;
    font-weight: 200;
    border: none;
}

.dx-state-hover.dx-tile {
    opacity: .8 !important;
    background-image: none;
    cursor: pointer;
}


/****************************************************** Buttons ************************************************************/

.dx-theme-generic .dx-button {
    /*font-weight: 300 !important;*/
    -moz-border-radius: 0px;
    -ms-border-radius: 0px;
    -o-border-radius: 0px;
    border-radius: 0px;
    border: none;
    color: #fff;
    background-color: #2971C5;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    -ms-box-shadow: none;
    -o-box-shadow: none;
    box-shadow: none;
}

.dx-button:hover {
    opacity: 0.5;
}

/*.dx-theme-generic .dx-button .dx-button-content {
    display: inline-block;
    width: 100%;
    height: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}*/

.dx-theme-generic .dx-button .dx-button-text {
    color: #FFF;
    /*line-height: 27px;
    padding: 0 5px;*/
    text-transform: capitalize;
}

.dx-theme-generic .dx-button.dx-button-danger {
    background: #FF2E12;
}

.dx-theme-generic .dx-button.dx-button-success {
    background: #099f21;
}

.dx-theme-generic .dx-button.dx-state-active.dx-button-success {
    background: #0de730;
}

.dx-theme-generic .dx-list .dx-list-item-left-bag .dx-icon-toggle-delete {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAHgSURBVGhD7Zm9SgNBFEavMQZ/wCj4ChbWCgloZWVjZ+MLaBuxtUhhZ6GtvoCNnYWIIpY2PoT400oEkWBY5QszEBYnM/fegSE4B0J2k5Ccs8vOzpCx1wX6oRGmYp5HlhyQmhyQmhyQmhyQmv8dMLW5RbPtI7PHZ2a31X9oGN+fprbZZgH5+bNzqjXXqFKfo+7dtXknDIjXD49pcn2Dio8OfT8+mHd4iAKsPFWr/f3aSpMVYeUtmgh2QFneEhpRlrdII1gBLnmLL8Ilb5FEsC7iieWGU97ikvTJW2qNVbMVBusMdO9v+kcYR3oY5TMRKv91eUHvO9tERWFe8cO+BiDFiaguLvHkez3zShjiJSWkcGRjIJUH4htZ52CPPk9PzJ4cjTxQ3Ym1EVp5oJ4LSSNiyAN1AOBGxJIHUQJA7/nJbPkp3l6iyIMoAaHjvIX7+WGoA6QysSJUAVqJGBHigFhHUPs9ooDQH8VoEzI6aSLYcyGOPIbK7u2VaAIYCiuAK2+HSu4EkBMRZRgdxHWTijV3KsM6A1gpYcWEldNf+O6wvjOBQIRyYF8DrgifvMUVIZEH7ABQjgiVt5QjpPJA9R8ZLmqsYTnyg9gBQSoP8p98qckBqckBqckBqckBqRnxAKJfO5Ed/l/4pgoAAAAASUVORK5CYII=);
}

.dx-icon-remove:before {
    content: "\f03e ";
}

.dx-theme-generic .dx-list .dx-list-item-left-bag .dx-toggle-delete-switch {
    margin-left: 0;
    background: transparent;
    border: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    -ms-box-shadow: none;
    -o-box-shadow: none;
    box-shadow: none;
    padding: 0;
    padding-top: 5px;
    min-width: 0;
}

.dx-theme-generic .dx-popup-wrapper .dx-overlay-content .dx-button.dx-list-toggle-delete-switch {
    min-width: 0;
}

.dx-theme-generic .dx-popup-wrapper .dx-overlay-content .dx-button {
    min-width: 100px;
    margin-bottom: 0;
}

.dx-theme-generic .sh-calendar-inpopup .dx-popup-wrapper .dx-overlay-content .dx-button {
    min-width: 0;
    margin-bottom: 0;
}

.dx-theme-generic .dx-list .dx-button {
    min-width: 0;
}

.dx-theme-generic .dx-button:active {
    opacity: 0.5;
}


.dx-theme-generic .dx-button.dx-button-back .dx-button-back-arrow {
    display: inline-block;
    width: 32px;
    height: 32px;
    background-image: url(data:image/png;base64,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);
    -webkit-background-size: contain;
    -moz-background-size: contain;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    padding-top: 6px;
}

.dx-button-back-arrow {
    width: 48px;
}

.dx-button-back {
    width: 48px;
}

.dx-theme-generic.dx-device-phone .dx-popup-wrapper.dx-action-sheet-popup-wrapper .dx-overlay-content .dx-popup-content .dx-button {
    font-size: 14pt;
}

.dx-theme-generic .dx-popup-wrapper.dx-action-sheet-popup-wrapper .dx-overlay-content .dx-popup-content .dx-button {
    padding: 0;
    border: 0;
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    color: black;
    line-height: 27px;
}

    .dx-theme-generic .dx-popup-wrapper.dx-action-sheet-popup-wrapper .dx-overlay-content .dx-popup-content .dx-button .dx-button-text {
        color: black;
        font-size: 22px;
        font-weight: 200;
    }

.dx-button.dx-state-hover-enabled:hover {
    background-color: #2971C5;
    background-image: none;
}


.dx-toolbar .dx-toolbar-item .dx-button-has-text .dx-button-content {
    padding: 9px 11px 9px;
}

/* dxButton/sh-button-transparent */
.sh-button-transparent .dx-theme-generic .dx-button {
    background-color: transparent !important;
}

    .sh-button-transparent .dx-theme-generic .dx-button .dx-button-text {
        color: black !important;
    }

.sh-button-transparent .dx-button .dx-icon {
    color: #fff !important;
}

.sh-button-tile {
    min-width: 0 !important;
    width: 40px !important;
    height: 40px !important;
    color: #fff !important;
}

    .sh-button-tile.dx-button .dx-icon {
        color: #fff !important;
    }

/* Slider */

.dx-slider-bar {
    margin: 13px 9.5px;
    height: 10px;
    border: none;
    background: #b9bbbe;
}

.dx-slider-handle {
    margin-top: 0px;
    margin-right: -10px;
    width: 15px;
    height: 10px;
    border: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    -o-border-radius: 0;
    border-radius: 0;
    background-color: #eae9e9;
    background-repeat: no-repeat;
    background-image: none;
    background-image: -moz-linear-gradient(-90deg,#eae9e9 0%,#eae9e9 100%);
    background-image: -ms-linear-gradient(-90deg,#eae9e9 0%,#eae9e9 100%);
    background-image: -o-linear-gradient(-90deg,#eae9e9 0%,#eae9e9 100%);
    background-image: linear-gradient(180deg,#eae9e9 0%,#eae9e9 100%);
}

.dx-slider-range.dx-slider-range-visible {
    background: #2971C5;
    border: none !important;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    -o-border-radius: 0;
    border-radius: 0;
}

.dx-slider-range {
    margin-top: 0px;
    height: 10px;
}

.dx-state-focused.dx-slider-handle:not(.dx-state-active) {
    border: none;
}

.dx-state-hover.dx-slider-handle:not(.dx-state-active) {
    border: none;
}

.dx-state-active.dx-slider-handle {
    border: none;
}

.sh-color-button {
    background-color: transparent !important;
    min-width: 42px !important;
}

/* Toast */

.dx-theme-generic .dx-toast-wrapper .dx-toast-content {
    border: none;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    -o-border-radius: 0;
    border-radius: 0;
    color: #FFF;
}

.dx-toast-message {
    font-weight: 300;
}

.dx-toast-wrapper .dx-toast-content .dx-toast-icon {
    width: 25px;
    height: 25px;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
}


/* dialog box */

.dx-dialog-root .dx-overlay-content .dx-dialog-message {
    padding: 0 10px 20px 0px;
    white-space: pre-wrap; /* CSS3 */
    white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
    white-space: -pre-wrap; /* Opera 4-6 */
    white-space: -o-pre-wrap; /* Opera 7 */
    word-wrap: break-word; /* Internet Explorer 5.5+ */
}

@media (min-width: 1200px) {
    .dx-theme-generic .dx-dialog-root .dx-overlay-content {
        width: 50% !important;
    }
}

@media (max-width: 1199px) {
    .dx-theme-generic .dx-dialog-root .dx-overlay-content {
        width: 70% !important;
    }
}

.dx-theme-generic .dx-dialog-root .dx-overlay-content {
    /*width: 70% !important;*/
    /*padding: 30px 20%;*/
    padding: 10px;
    color: #000;
    background: #fff;
}

    .dx-theme-generic .dx-dialog-root .dx-overlay-content .dx-popup-title {
        border: none;
        background: none !important;
        background-image: none;
        font-size: 150%;
        padding: 0 20px;
        font-weight: 300;
        color: #2971C5;
    }

    .dx-theme-generic .dx-dialog-root .dx-overlay-content .dx-dialog-buttons {
        width: auto;
        min-height: 30px;
        float: right;
        /*padding-top: 14px;*/
    }

    .dx-theme-generic .dx-dialog-root .dx-overlay-content .dx-dialog-button.dx-button.dx-state-active .dx-button-text {
        color: #fff;
    }

@media (max-width: 550px) /* make mobile smaller */
{
    .dx-theme-generic .dx-dialog-root .dx-overlay-content {
        width: 100% !important;
        padding: 0;
        color: #000;
        background: #fff;
    }

        .dx-theme-generic .dx-dialog-root .dx-overlay-content .dx-popup-title {
            border: none;
            background: none;
            background-image: none;
            font-size: 150%;
            padding: 10px;
            font-weight: 300;
        }

    .dx-dialog-root .dx-overlay-content .dx-dialog-message {
        padding: 0px 10px 5px 0px;
    }
}


/*popup background fade*/

.dx-theme-generic .dx-overlay-wrapper.dx-overlay-shader {
    background-color: rgba(50,58,69,.4);
    /*z-index: 1000000 !important;*/
}

.dx-overlay-shader {
    -webkit-transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    -webkit-transition: all 0.4s ease;
    -moz-backface-visibility: hidden;
    -moz-transition: all 0.4s ease;
    -moz-transform: translateZ(0);
    -ms-transition: all 0.4s ease;
    -ms-backface-visibility: hidden;
    -ms-transform: translateZ(0);
    -o-backface-visibility: hidden;
    -o-transform: translateZ(0);
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
    transform: translateZ(0);
    backface-visibility: hidden;
}


/* Switch */


.dx-switch-container {
    height: 20px;
    min-width: 44px;
    border: 2px solid #333333;
    background-color: #ffffff;
    padding: 3px;
    margin-top: 3px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;
}

.dx-switch.dx-state-readonly .dx-switch-container {
    background: #e8e8e8;
}

.dx-switch-inner {
    height: 100%;
    width: 100%;
    display: block;
}

.dx-switch-on,
.dx-switch-off {
    display: none;
}

/* fix for dx 18.1 to offset transform 50% */
:not(.dx-switch-on-value) .dx-switch-inner {
    padding-right: 6px;
}

.dx-switch-on-value .dx-switch-inner {
    padding-right: 0px;
}

.dx-switch-handle {
    height: 10px;
    width: 0px;
    position: relative;
    float: right;
    margin-top: inherit;
}

.dx-rtl .dx-switch-handle {
    float: left;
}

.dx-switch-handle:before {
    content: "";
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    height: 10px;
    width: 10px;
    background-color: #333333;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
}

.dx-switch-on-value .dx-switch-container {
    border-color: #F09609;
    background-color: #F09609;
}

.dx-switch-on-value .dx-switch-handle:before {
    background-color: #ffffff;
}

.dx-state-hover.dx-switch .dx-switch-container,
.dx-state-focused.dx-switch .dx-switch-container {
    border-color: #000000;
}

.dx-state-hover.dx-switch .dx-switch-handle:before,
.dx-state-focused.dx-switch .dx-switch-handle:before {
    background-color: #000000;
}

.dx-state-hover.dx-switch-on-value .dx-switch-container,
.dx-state-focused.dx-switch-on-value .dx-switch-container {
    background-color: #F09609;
    border-color: #F09609;
}

.dx-state-hover.dx-switch-on-value .dx-switch-handle:before,
.dx-state-focused.dx-switch-on-value .dx-switch-handle:before {
    background-color: #ffffff;
}

.dx-switch.dx-state-active .dx-switch-container {
    background-color: #666666;
    border-color: #666666;
}

.dx-switch.dx-state-active .dx-switch-handle:before {
    background-color: #ffffff;
}

.dx-switch.dx-state-disabled .dx-switch-container {
    border-color: #cccccc;
}

.dx-switch.dx-state-disabled .dx-switch-handle:before {
    background-color: #cccccc;
}

.dx-switch.dx-state-disabled.dx-switch-on-value .dx-switch-container {
    background-color: #cccccc;
}

.dx-switch.dx-state-disabled.dx-switch-on-value .dx-switch-handle:before {
    background-color: #a3a3a3;
}

.dx-field-value.dx-widget.dx-switch,
.dx-field-value > .dx-widget.dx-switch {
    display: inline-block;
    width: auto;
}

.dx-switch-label {
    display: inline;
    margin-left: 7px;
    vertical-align: middle;
}

/* Checkbox */
.dx-checkbox-icon {
    background-color: #fff;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

.dx-checkbox-checked .dx-checkbox-icon {
    -webkit-background-size: 50%;
    -moz-background-size: 50%;
    background-size: 50%;
}

.dx-state-disabled .dx-checkbox-icon {
    background: #ebebeb;
    color: inherit;
}


/* Radio buttons */

.dx-radiobutton {
    line-height: 28px;
}

.dx-radiobutton-icon:before {
    display: block;
    width: 20px;
    height: 20px;
    border: 2px solid #ddd;
    background-color: #fff;
    content: "";
    -webkit-border-radius: 11px;
    -moz-border-radius: 11px;
    -ms-border-radius: 11px;
    -o-border-radius: 11px;
    border-radius: 50%;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}

.dx-radiobutton-checked .dx-radiobutton-icon-dot {
    display: block;
    margin-top: -18px;
    margin-left: 6px;
    width: 12px;
    height: 12px;
    background: #337ab7;
    content: "";
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 50%;
}

.dx-radiobutton.dx-state-focused:not(.dx-state-active) .dx-radiobutton-icon:before {
    border: 2px solid #337ab7;
}

/********************** DateBox***********************/

.dx-state-disabled .dx-texteditor-input {
    padding: 7px 9px 8px;
    background: #ebebeb;
    color: inherit;
}


/******************** dxCalendar ********************/
.dx-calendar.dx-calendar-with-footer .dx-calendar-footer .dx-button {
    background: #2971C5;
}

.dx-calendar.dx-calendar-with-footer .dx-calendar-footer {
    height: 27px;
}

.dx-calendar-cell {
    border-radius: 0;
}

    .dx-calendar-cell.dx-calendar-today {
        text-shadow: none;
        color: #2971C5;
        font-weight: 600;
    }

    .dx-calendar-cell.dx-calendar-selected-date.dx-calendar-contoured-date, .dx-calendar-cell.dx-calendar-selected-date.dx-calendar-today.dx-calendar-contoured-date {
        box-shadow: none;
    }

.dx-calendar-navigator .dx-calendar-caption-button {
    font-weight: 600;
}
/******************************************************* Lists ******************************************************************/
/*.dx-list-item:hover {
    background-color: rgba(96,96,96,.0);
    color: #2b2b2b;
}*/
.dx-list-item.dx-state-active {
    background: #d9d9d9 !important;
    color: #000;
}

#sh-noPadding-dxList .dx-list-item.dx-state-active {
    background: transparent !important;
}



.dx-list-item .dx-icon-toggle-delete {
    /*background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAHgSURBVGhD7Zm9SgNBFEavMQZ/wCj4ChbWCgloZWVjZ+MLaBuxtUhhZ6GtvoCNnYWIIpY2PoT400oEkWBY5QszEBYnM/fegSE4B0J2k5Ccs8vOzpCx1wX6oRGmYp5HlhyQmhyQmhyQmhyQmv8dMLW5RbPtI7PHZ2a31X9oGN+fprbZZgH5+bNzqjXXqFKfo+7dtXknDIjXD49pcn2Dio8OfT8+mHd4iAKsPFWr/f3aSpMVYeUtmgh2QFneEhpRlrdII1gBLnmLL8Ilb5FEsC7iieWGU97ikvTJW2qNVbMVBusMdO9v+kcYR3oY5TMRKv91eUHvO9tERWFe8cO+BiDFiaguLvHkez3zShjiJSWkcGRjIJUH4htZ52CPPk9PzJ4cjTxQ3Ym1EVp5oJ4LSSNiyAN1AOBGxJIHUQJA7/nJbPkp3l6iyIMoAaHjvIX7+WGoA6QysSJUAVqJGBHigFhHUPs9ooDQH8VoEzI6aSLYcyGOPIbK7u2VaAIYCiuAK2+HSu4EkBMRZRgdxHWTijV3KsM6A1gpYcWEldNf+O6wvjOBQIRyYF8DrgifvMUVIZEH7ABQjgiVt5QjpPJA9R8ZLmqsYTnyg9gBQSoP8p98qckBqckBqckBqckBqRnxAKJfO5Ed/l/4pgoAAAAASUVORK5CYII=);
    -webkit-background-size: 100%;
    -moz-background-size: 100%;
    background-size: 100%;*/
}

.dx-list-item-before-bag .dx-icon-toggle-delete {
    margin: 0;
    width: 25px;
    height: 25px;
}

.white-text-dx-list .dx-list-item,
.white-text-dx-list .dx-list .dx-empty-message {
    color: #fff !important;
}

/* Grouped list */

.dx-theme-generic .dx-list .dx-list-group-header {
    border-color: #fff;
    border-top: none;
    border-bottom: none;
    background-color: transparent;
    font-weight: 600 !important;
    padding: 15px 10px 5px 10px;
}

/* End Grouped list */

.dx-theme-generic .dx-popup-wrapper.dx-autocomplete-popup-wrapper .dx-overlay-content .dx-popup-content .dx-list .dx-list-item {
    font-weight: 200;
}

.dx-device-mobile .dx-list-item:last-of-type, .dx-device-mobile .dx-list .dx-empty-message:last-of-type {
    border-bottom: none;
}

.dx-device-mobile .dx-list-item-after-bag.dx-list-static-delete-button-container {
    width: 24px;
}

.listInPopover .dx-list-item-content, .dx-list .dx-empty-message {
    padding: 10px 0;
}

.smallListItems .dx-list-item-content, .dx-list .dx-empty-message {
    padding: 3px 0;
}

/*.dxFixList .dx-list-item, .dx-list-item-content {
    overflow: visible;
}*/




/* Navbar */

.dx-theme-generic .dx-navbar.dx-tabs {
    height: 65px;
    padding: 0;
    margin-top: 11px;
    background-color: none;
}

    .dx-theme-generic .dx-navbar.dx-tabs .dx-tab {
        height: 65px;
        padding: 0;
        margin-top: 11px;
        background: #2971C5;
        display: table-cell;
    }

.dx-theme-generic .dx-tabs.dx-navbar {
    table-layout: fixed;
    display: inline-table;
    width: 100%;
    padding: 0;
    border: 0;
    height: 35px;
    border-top: none;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
}

.dx-theme-generic .dx-navbar.dx-tabs .dx-tab.dx-tab-selected {
    background: #005CAB;
}

.dx-theme-generic .dx-tabs.dx-navbar .dx-tab.dx-tab-selected .dx-tab-text {
    color: #fff;
    font-weight: 300;
}

.dx-theme-generic .dx-tabs.dx-navbar .dx-tab-text {
    color: #fff;
}

.dx-theme-generic .dx-navbar.dx-tabs .dx-tab .dx-icon {
    opacity: 1;
}


/* Lookup */

.dx-theme-generic .dx-list .dx-list-item.lookupChild:nth-child(even) {
    background-color: #f6f6f6;
}

.dx-theme-generic .dx-field-value:not(.dx-widget) > .dx-widget.dx-lookup {
    margin-top: -4px;
    text-align: left;
}

/*.dx-lookup-popup-wrapper .dx-popup-content {
    position: absolute;
    top: 55px;
    right: 0;
    bottom: 0;
    left: 0;
}*/

/*make the clear button appear right aligned in lookup popup*/
.dx-lookup-popup-wrapper .dx-popup-bottom .dx-toolbar-center {
    margin: 0;
    position: absolute;
    right: 0;
}

.dx-lookup-arrow:before {
    content: "\f027 ";
}

/* Slideout menu */

.dx-theme-generic .dx-slideout .dx-slideout-menu {
    /*background: #fff;*/
    font-size: 22px;
    font-weight: 200;
    background: #2971C5;
    color: #fff;
    /*background: #005CAB;*/
}

.dx-theme-generic .dx-slideout .dx-navigation-item {
    padding: 5px;
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dx-theme-generic .dx-list .dx-list-item,
.dx-theme-generic .dx-list .dx-empty-message {
    border-bottom: none;
    border-top: none;
}

.dx-theme-generic .sh-listLinesOn .dx-list-item,
.dx-theme-generic .sh-listLinesOn .dx-list .dx-empty-message {
    font-weight: 200;
    border-bottom: none;
    border-top: 1px solid #d3d3d3;
}

.dx-lookup-popup-wrapper .dx-list-item.dx-lookup-selected {
    background-color: #2971C5;
    color: #fff;
}

.dx-lookup-popup-wrapper .dx-popup-bottom .dx-popup-cancel.dx-button, .dx-lookup-popup-wrapper .dx-popup-bottom .dx-popup-clear.dx-button, .dx-lookup-popup-wrapper .dx-popup-bottom .dx-popup-done.dx-button {
    margin: 5px 5px 5px;
}



/* calendar popup */

.dx-calendar-cell.dx-calendar-selected-date, .dx-calendar-cell.dx-calendar-selected-date.dx-calendar-today {
    background-color: #2971C5;
    webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

.dx-calendar .dx-calendar-navigator span {
    text-transform: none;
}

.dx-theme-generic .dx-popover-wrapper .dx-overlay-content .dx-calendar {
    border: none;
    /*font-family: Segoe UI Light, Segoe UI Web Light, Segoe UI Web Regular, Segoe UI, Tahoma, Arial, Helvetica, Sans-Serif;*/
    font-family: Segoe UI Web, Segoe UI, -apple-system, BlinkMacSystemFont, Roboto, Helvetica Neu, sans-serif;
    -webkit-font-smoothing: antialiased;
}

.dx-calendar .dx-calendar-body table td:first-child {
    border-left: 1px solid transparent;
}

.dx-calendar-body thead {
    border-bottom: none;
}

/*.dx-calendar {
    height: 280px;
}

    .dx-calendar .dx-calendar-body {
        width: 282px;
        height: 240px;
    }*/

.dx-calendar-picker-overlay.dx-calendar-picker-bottom .dx-overlay-content {
    clip: rect(0,290px,285px,-7px);
}



.dx-calendar-navigator .dx-button {
    background-color: transparent !important;
    min-width: inherit !important;
    color: black;
}

.dx-calendar .dx-calendar-navigator span {
    color: black !important;
    font-size: 14px;
}


/*dx Scheduler*/

.dx-scheduler-navigator .dx-button {
    background-color: transparent !important;
    color: black !important;
}

    .dx-scheduler-navigator .dx-button .dx-button-text {
        color: black !important;
    }

.dx-scheduler-work-space {
    border: none;
}

.dx-scheduler-header {
    border: none;
}

.dx-scheduler-header-panel, .dx-scheduler-time-panel {
    font-size: 15px;
}

.dx-scheduler-appointment-popup .dx-popup-content {
    padding-top: 20px;
}

.dx-scheduler .dx-loadpanel-content {
    display: none;
}

.dx-scheduler-view-switcher.dx-tabs .dx-tab .dx-tab-text {
    font-size: 18px !important;
    height: 31px !important;
}

.dx-scheduler-view-switcher.dx-tabs .dx-tab {
    overflow: hidden;
}

.dx-scheduler-view-switcher.dx-tabs .dx-tab {
    width: 50px;
}

.dx-scheduler-work-space-all-day-collapsed .dx-scheduler-all-day-table {
    height: 35px;
}

.dx-scheduler-work-space-all-day-collapsed .dx-scheduler-all-day-title {
    height: 35px;
    line-height: 32px;
}

.dx-scheduler-all-day-panel {
    background-color: #E0E0E0;
}

.dx-scheduler-work-space-both-scrollbar .dx-scheduler-all-day-title {
    background-color: #E0E0E0;
}

.dx-scheduler-time-panel-cell {
    border-bottom: none;
}
/*Remove border on bottom of all-day header*/
.dx-scheduler-all-day-panel .dx-scheduler-all-day-table-cell {
    border-bottom: solid #fff 1px;
}

.dx-scheduler-all-day-title {
    border-bottom: solid #fff 1px;
    font-weight: 600;
}

.dx-scheduler-timeline .dx-scheduler-group-header {
    padding: 0 10px 0 5px;
}

.dx-scheduler-appointment {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

.dx-scheduler-header-panel .dx-scheduler-group-row .dx-scheduler-group-header {
    font-size: 15px;
}

.dx-scheduler-work-space-both-scrollbar.dx-scheduler-work-space.dx-scheduler-work-space-all-day.dx-scheduler-work-space-all-day-collapsed .dx-scheduler-header-scrollable {
    height: 86px;
}

.dx-scheduler-dropdown-appointments.dx-button {
    border-radius: 20px;
}

.dx-scheduler-all-day-appointment .dx-scheduler-appointment-reduced-icon {
    top: 22%;
}

.dx-scheduler-header-panel .dx-scheduler-group-header, .dx-scheduler-work-space-vertical-group-table .dx-scheduler-group-header {
    font-weight: 600;
}

.dx-tabs-wrapper {
    font-weight: 300;
}

/*.dx-scheduler-group-header {
    font-weight: 600;
}*/

/*dx scheduler end*/


/* Icons */

.dx-icon-menu:before {
    /*font-size: 20px;*/
    color: #fff;
}

/*.dx-theme-generic .dx-icon-user {
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADgAAAA4CAQAAAACj/OVAAACIklEQVRYw+XYL0hDQRzA8Stq02ZZEZxFjCIDmVmRp2gUMRlkINZnF6yiKA+tgqaHwSiIaDFsxeBbGmsLwgSZTkG/BsOcvPfubnfv+e+3toUPHHfHfScQ6X7ETwdzuPgENGgQ4OOSSw7M41Hn69TxyCcBFgiImoCCbXCdJnHTZN0mWJBwH2TBFpiPWcz2hc3bAT1Ux7MB5kJ2ZtTU5YdEDrrojGsO+lqgbw4GWmBgDja1wKYpmOVVC3wlawauoDsrZuChNnhoBt5ogzdm4IM2+PDLwNSXNPVNk/qxyHKpxV2aHnzBDCXelLA3SszYeWIcK4HH9t40czxKuUfmbL7atqXgtt1n4ghnsdwZI7YfwlOUIrkSU0k89R2uQrkrnKRiZpR9XtqwF/YZTTbXptnimnvuuWaL6WRzbYh5utq+6WKeoaTADEfAKWuM0UcfY6xxChyRSQIc4CBylx4wYBuc5CT2HJ4waRPcpCa9aWpsdgp+7vhn+hFUlC7vCoJ+nuP7X97xjnKweQgcWf/LO34PwUTMtda63iYQ7Mn6X97xdywgcLiI5S5wECxwJ+t/lY4vMotgmA3Kob+X2WAYwSxFef+rdfwtq3QjGGSJHc6p8sQTVc7ZYYlBBN2scqvS/+od77NIb+hW72VRIVu9z6BqxxfZZZlxMvTQQ4ZxltmNXMjQ/u+k4zsdtwX6qYB+CwxSAYMW2EgFbHwjmNb8I/Av/6v/DgxUkyaqTtrSAAAAAElFTkSuQmCC) 0 0 no-repeat;
}*/

.dx-theme-generic .dx-icon-save {
    /*background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADgAAAA4CAQAAAACj/OVAAAAs0lEQVRYw+3YMQrCMBjF8UxeIgco9Hjeo/cQAl29hKs3EDoVMjkV/g4iFP2CqPlCkfeyBb78Esj0AqHtCgI9wciBC+u8G7fy2F84MdCVwY7ZHP4WvOfKvgSmwvBvIMCRnQVmNxAGC8QRXOjbgqs3tgLPrcHcGkSgQIFO4KcX2R5YMwIFChQoUKBAgQK3CD6fK9AfzK5fxigVRldwfAV7o9yrldlqogKRxFQdm0hEVdD/BN4A7YKsNfj/GckAAAAASUVORK5CYII=) 0 0 no-repeat;*/
    background-size: 100%;
}

.dx-theme-generic.dx-icon {
    background-position: 50% 50%;
}

.dx-icon-clear:before {
    content: "\f00a ";
}


.dx-theme-generic .dx-toolbar .dx-button .dx-icon {
    width: 26px;
    height: 26px;
    -webkit-background-size: 26px 26px;
    -moz-background-size: 26px 26px;
    background-size: 26px 26px;
    background-repeat: no-repeat;
    line-height: 26px;
    color: #fff;
}

.dx-button-has-icon.dx-button-has-text .dx-icon {
    margin-right: 5px;
}

.dx-state-disabled.dx-button .dx-button-text, .dx-state-disabled .dx-button .dx-button-text {
    filter: alpha(opacity=100);
    -khtml-opacity: 1;
    -moz-opacity: 1;
    opacity: 1;
}

/*font-icons*/

.sh-icon-grey {
    font-size: 20px;
    color: darkgrey;
}


/*sh toolbar styles */

.sh-toolbar-colour {
    background-color: #2971C5 !important;
}

    .sh-toolbar-colour .dx-button {
        background-color: transparent !important;
        padding-right: 0;
    }

        .sh-toolbar-colour .dx-button:hover {
            opacity: 0.5;
        }

/* Place the user profile icon on the right of the toolbar text */
.sh-toolbar-iconfix .dx-toolbar-after .dx-item:last-child .dx-icon {
    float: right;
    margin-left: 10px;
}

.sh-toolbar-iconfix .dx-toolbar-after .dx-item:last-child .dx-button-text {
    margin-top: 5px;
}

.sh-toolbar-colour .dx-toolbar-after .dx-item:last-child .dx-icon {
    float: right;
    margin-left: 10px;
}

/* Move login text down inline*/
.sh-toolbar-colour .dx-toolbar-after .dx-item:last-child .dx-button-text {
    margin-top: 5px;
}


.sh-toolbar-footer {
    position: absolute;
    bottom: 10px;
    right: 10px;
}

    .sh-toolbar-footer .dx-button {
        min-width: 100px;
        margin-left: 5px;
    }

.sh-toolbar-transparent.dx-toolbar .dx-toolbar-item, .dx-toolbar .dx-toolbar-menu-container {
    padding: 0 0 0 0;
}

.sh-toolbar-transparent .dx-button {
    background-color: transparent !important;
    color: darkgray !important;
    min-width: 0 !important;
    /*padding: 0px 8px;*/
}

    /*.sh-toolbar-transparent .dx-button:last-of-type {
        padding: 0 0 0 8px;
    }*/

    .sh-toolbar-transparent .dx-button .dx-button-text {
        color: #2971C5;
    }

    .sh-toolbar-transparent .dx-button .dx-icon {
        color: #2971C5 !important;
    }

.sh-toolbar-transparent .dx-toolbar-label {
    color: #333;
    font-size: 17px !important;
    font-weight: 600;
}

.sh-toolbar-popup.dx-toolbar {
    height: 38px;
}

/*.dx-list:not(.dx-list-select-decorator-enabled) .dx-list-item .dx-icon {
    color: inherit;
}*/

.sh-toolbar-noBackground .dx-button {
    background-color: transparent !important;
    color: darkgray !important;
    min-width: 0 !important;
    padding: 0px 8px;
}

    .sh-toolbar-noBackground .dx-button .dx-button-text {
        color: #333;
    }

    .sh-toolbar-noBackground .dx-button .dx-icon {
        color: #2971C5 !important;
    }

.sh-toolbar-noBackground .dx-toolbar-label {
    color: #333;
}

/*sh toolbar end*/

/*dx-closebutton*/

.dx-popup-title .dx-closebutton .dx-icon {
    width: 100% !important;
    color: #fff;
    font-size: 20px;
    line-height: 20px !important;
}

.dx-popup-title .dx-closebutton.dx-state-hover .dx-button-content {
    border: none;
}

.dx-popup-title .dx-closebutton.dx-state-hover {
    background-color: transparent;
    opacity: 0.5;
}

.dx-popup-title.dx-toolbar .dx-toolbar-items-container {
    height: 100%;
}

.dx-popup-title.dx-toolbar .dx-toolbar-item, .dx-popup-title.dx-toolbar .dx-toolbar-menu-container {
    padding: 0;
}

.dx-theme-generic .sh-login-popup .dx-overlay-content .dx-toolbar .dx-button {
    min-width: 0;
}



/* Tab Panel */

.dx-tabs {
    border: none !important;
}

.dx-tabpanel .dx-multiview-wrapper {
    border: none !important;
}

.dx-tabpanel-tabs {
    /*margin: 10px !important;*/
}

.dx-tabpanel .dx-tab {
    text-align: left !important;
    width: auto !important;
}

    .dx-tabpanel .dx-tab:after {
        border: none !important;
    }

.dx-theme-generic .dx-tabs .dx-tab .dx-tab-text {
    font-size: 18px;
    /*color: lightgrey;*/
    color: #A0A0A0;
    height: 35px;
}

.dx-tabpanel .dx-tab .dx-state-hover {
    background-color: none;
}

/* End Tabl Panel */


/* small tabs */

.shTabsOptions.dx-tabs {
    padding-left: 10px;
}

    .shTabsOptions.dx-tabs .dx-tab {
        overflow: hidden;
        background-color: transparent;
        padding: 8px 9px 8px 9px;
    }

    .shTabsOptions.dx-tabs .dx-indent-wrapper {
        display: block;
    }

    .shTabsOptions.dx-tabs .dx-tabs-wrapper {
        display: inherit;
    }

    .shTabsOptions.dx-tabs .dx-tab .dx-tab-text {
        font-size: 15px !important;
        /*color: #fff;*/
        height: 27px;
        color: lightGrey;
    }

    .shTabsOptions.dx-tabs .dx-tab.dx-tab-selected {
        color: #fff !important;
        /*font-weight: bold;*/
        background-color: transparent;
    }

        .shTabsOptions.dx-tabs .dx-tab.dx-tab-selected .dx-tab-text {
            color: #fff !important;
            border-bottom: 2px solid #fff !important;
            /*border-bottom: none!important;*/
        }

    .shTabsOptions.dx-tabs .dx-tab.dx-state-hover:not(.dx-tab-selected) {
        background-color: transparent;
    }

/* Pivot */

.dx-theme-generic .dx-pivottabs .dx-pivottabs-tab.dx-pivottabs-tab-selected, .dx-theme-generic .dx-pivottabs .dx-pivottabs-ghosttab.dx-pivottabs-tab-selected {
    color: #2971C5;
}

.dx-pivottabs-tab > span:hover {
    cursor: pointer;
}

.dx-theme-generic .dx-pivottabs .dx-pivottabs-tab, .dx-theme-generic .dx-pivottabs .dx-pivottabs-ghosttab {
    /*font-size: 40px;*/
    /*font-size: 25px;*/
    font-size: 20px;
    /*color: #b9b9b9;*/
    color: #CACACA;
    cursor: pointer;
}

.dx-pivottabs {
    height: 60px;
    font-weight: 300;
}

.dx-pivot-itemcontainer {
    top: 60px;
}

/* End pivot */


/* Style hyperlinks */
.dx-theme-generic-typography a {
    text-decoration: none;
    color: #2971C5;
    font-size: 15px;
    font-weight: 300;
    cursor: pointer;
}

.sh-hyperlink {
    text-decoration: none;
    color: #2971C5;
    font-weight: 300;
    cursor: pointer;
}

.sh-hyperlink-disabled {
    text-decoration: none;
    color: lightgray;
    font-weight: 300;
    cursor: initial;
}

.sh-hyperlink-underline {
    text-decoration: underline;
    cursor: pointer;
}
/* End Style hyperlinks */

/* Search box wrapper */

/*.dx-theme-generic .search-wrapper.dx-editbox {
    border: none; 
    padding-left: 10px!important;
    padding-right: 10px!important;
    background: #fff;
}*/

/* Adjust navbar layout */

/*.dx-theme-generic .navbar-layout .layout-footer {
    bottom: 0;
    height: 65px;
}*/

/**************************************** Data Grid ************************************************/

.dx-datagrid-rowsview .dx-selection.dx-row-lines:first-child > td, .dx-datagrid-rowsview .dx-selection.dx-row:hover.dx-row-lines:first-child > td {
    border-top: none;
}

.dx-datagrid-rowsview {
    border-top: none;
}

.dx-datagrid .dx-row-lines > td {
    border-bottom: none;
}

.dx-datagrid-headers .dx-datagrid-table .dx-row > td {
    border-bottom: none;
}

.dx-row .dx-data-row:hover {
    cursor: pointer;
}

.dx-datagrid-headers {
    font-size: 15px;
    border-bottom: 1px solid #c8c8c8;
}

.dx-row.dx-freespace-row > td:hover {
    cursor: initial !important;
}

.dx-datagrid-table .dx-row > td {
    /*padding: 7px 7px 7px 7px;*/
    cursor: pointer;
}

.disable-grid-pointer .dx-datagrid-table .dx-row > td {
    cursor: initial;
}

.dx-datagrid-table .dx-row:active {
    cursor: pointer;
}

.dx-pager .dx-pages .dx-page {
    padding: 8px 15px;
}

/*grouping*/
.dx-datagrid-rowsview .dx-group-row {
    /*color: #fff;*/
    /*color: #2971C5;*/
    /*background: #2971C5;*/
    color: black;
    background: #e5e5e5;
}

/*paging*/
.dx-datagrid-pager {
    border-top: 1px solid #d2d2d2;
}

.dx-pager {
    padding-top: 5px;
    padding-bottom: 5px;
}

    .dx-pager .dx-pages .dx-selection, .dx-pager .dx-page-sizes .dx-selection {
        background-color: #2971C5;
        color: white !important;
    }

.dx-datagrid-rowsview .dx-row.dx-group-row {
    background-color: transparent;
}

    .dx-datagrid-rowsview .dx-row.dx-group-row td {
        border-top-color: transparent;
        /*border-bottom-color: transparent;*/
    }

.dx-datagrid-rowsview .dx-selection.dx-row > td.dx-focused {
    color: #333 !important;
}

/********************************* TimeBox *****************************************/
.dx-timebox-popup-wrapper .dx-overlay-content {
    border: 1px solid black;
}

.dx-timebox .dx-dropdowneditor-icon {
    background-image: url('data:image/png;base64,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');
}

/******************************** SelectBox ****************************************/

.dx-autocomplete-popup-wrapper .dx-popup-content {
    margin: 0;
    padding: 0;
    height: 100%;
    border: 2px solid lightGray;
}

/*.dx-dropdowneditor-icon {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border-left: 1px solid transparent;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAE8SURBVGhD7dexTcNgEMVx21BQ0HkDyyNQsgAtomELNskYjMACzACdR3CFEAWSuUcOKSEB333fXQPvJ0X+HCny+zeJ0hARERHRPzEMw6Ue04zjeKdHk06vJm3bPmRG6PjN9s7GG3CeFVEyHlwBkBFROh7cARAZUTMeigIgIqJ2PBQHQE1ExHioCoCSiKjx4ApYluVdj3s8EWvj5RkvejRxBcjI25oIy3h5XemtSatXMxlxIw+5l7Gn+taerxHTND3qW5+s479/bo07ALwRWeOhKACsEV3XXchtyngoDoC1CPEmr7Pt8VDteDjRa5F5np/6vn+WEdcScewL4aewkPFQFQCGiANR46E6ADwRkeMhJAAsEdHjISwAfovIGA+hAXAsIms8hAfAboTcvmaNT4ffiZr/C0RERET0pzXNB6+zDDtELtLjAAAAAElFTkSuQmCC);
    background-size: 24px 24px;
}*/

.dx-dropdowneditor-button {
    background-color: transparent;
}


/*datepicker internetExplorer*/
.dx-datepicker-wrapper .dx-popup-bottom {
    padding-bottom: 5px;
    margin-right: 20px;
    border: none;
}




/*********************************Desktop styling*********************************/

.page {
    /*font-family: Segoe UI Light, Segoe UI Web Light, Segoe UI Web Regular, Segoe UI, Helvetica, Arial, sans-serif !important;*/
    font-family: Segoe UI Web, Segoe UI, -apple-system, BlinkMacSystemFont, Roboto, Helvetica Neu, sans-serif !important;
    -webkit-font-smoothing: antialiased;
}

/*Top left app icon and titles*/
.sh-desktop-logoLeft {
    position: absolute;
    left: 65px;
    top: 5px;
    height: 40px;
    width: 40px;
}

.sh-desktop-titleTop {
    position: absolute;
    top: 1px;
    left: 60px;
    color: #fff;
}

.sh-desktop-titleBottom {
    top: 13px;
    position: absolute;
    left: 60px;
    color: #fff;
}

.sh-desktop-titleCenter {
    top: 5px;
    position: absolute;
    left: 60px;
    color: #fff;
}

.sh-desktop-menuButton {
    position: absolute !important;
    left: 0 !important;
    top: 5px !important;
    z-index: 20 !important;
    padding: 11px 15px !important;
}

/* Add this after to content wrapper to size to available screen*/
/*e.g. <div class="content-wrapper">
        <div class="content sh-desktop-content" data-options="dxContentPlaceholder : { name: 'content', contentCssPosition: 'static' } "></div>
    </div>*/

.sh-desktop-content {
    position: absolute;
    width: 100%;
    top: 50px;
    bottom: 0;
    left: 0;
}


/* Add this class in css binding to cater for devices in portrait*/
/*e.g. <div class="content-wrapper">
        <div class="content sh-desktop-content" data-bind="css: { 'sh-desktop-content-device': DevExpress.devices.current().deviceType === 'desktop' && (DevExpress.devices.real().deviceType === 'tablet' || DevExpress.devices.real().deviceType === 'mobile') }" data-options="dxContentPlaceholder : { name: 'content', contentCssPosition: 'static' } ">
    </div>*/
.sh-desktop-content-device {
    left: 0;
    width: 100%;
}

.desktop-layout .main-menu {
    width: 100%;
}

.dx-theme-generic .dx-tabs.dx-navbar .dx-tab.dx-tab-selected .dx-tab-text {
    font-weight: 300;
    -webkit-transition: color .5s; /* For Safari 3.1 to 6.0 */
    transition: color .5s;
}

.dx-theme-generic .dx-tabs.dx-navbar .dx-tab-text {
    -webkit-transition: color .5s; /* For Safari 3.1 to 6.0 */
    transition: color .5s;
}

.desktop-layout #navBar .dx-nav-item {
    background: none !important;
    border-right-color: #005CAB;
}

.centerText div input {
    text-align: center;
}

.dx-widget input {
    text-align: left;
}

.desktop-layout .toolbar {
    border: none !important;
    height: 46px !important;
    margin: 0 !important;
}

.dx-theme-generic .dx-tabs.dx-navbar .dx-tab-text:active {
    transition: .5s;
}

.desktop-layout .wrapper {
    margin: 0 auto;
    max-width: 1024px !important;
}

.desktop-layout #navBar .dx-tab {
    padding-left: 0px;
}

/*Changes to generic*/

.dx-tabs .dx-indent-wrapper {
    /*display: inherit !important; 
    padding-top: 5px !important;*/
}

.dx-theme-generic .dx-tabs.dx-navbar {
    display: inherit !important;
    width: 100%;
    padding: 0;
    border: 0;
    height: 50px !important;
    border-top: none;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    -o-border-radius: 0;
    border-radius: 0;
    margin-top: 0 !important;
}

.desktop-layout #navBar .dx-tab {
    margin: 0;
    padding-left: 15px !important;
}


.sh-fullscreen-BackgroundImage {
    min-height: 100%;
    min-width: 1024px;
    /* Set up proportionate scaling */
    width: 100%;
    height: auto;
    /* Set up positioning */
    position: fixed;
    top: 0;
    left: 0;
}

/*14.2 changes*/

.dx-tile-content {
    padding: 0px;
    height: 100% !important;
}

.dx-popup-title .dx-closebutton .dx-button-content {
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    -o-border-radius: 0;
    border-radius: 0;
    border: none;
}

.dx-popup-title .dx-button {
    min-width: 0 !important;
    padding-right: 0;
}

.dx-state-focused.dx-overlay-content {
    outline: none;
}

.dx-popup-title .dx-closebutton.dx-state-focused .dx-button-content {
    background: none;
    border: none;
}

/****************** Gallery ******************* */

.dx-gallery .dx-gallery-nav-button-prev, .dx-gallery .dx-gallery-nav-button-next {
    width: 0;
    font-family: DXIcons;
}

.dx-gallery .dx-gallery-nav-button-prev, .dx-gallery .dx-gallery-nav-button-prev {
    width: 0;
    font-family: DXIcons;
}

.dx-gallery-wrapper > .dx-empty-message {
    color: #a8a8a8;
    font-size: 17px;
}

.dx-gallery .dx-gallery-nav-button-next:before {
    color: darkgray;
}

.dx-gallery .dx-gallery-nav-button-prev:before {
    color: darkgray;
}

.dx-gallery-indicator-item {
    border: 1px solid grey;
    width: 13px;
    height: 13px;
}

.dx-gallery-indicator-item-active, .dx-gallery-indicator-item-selected {
    width: 14px;
    height: 14px;
    background: grey;
    margin: 1px 6px;
}

.dx-state-focused.dx-gallery .dx-gallery-indicator-item-selected {
    background: grey;
}

/****** animated hamburger menu to back button *******/

.material-button {
    position: absolute;
    top: 3px;
    left: 4px;
    z-index: 20 !important;
}

    .material-button:hover {
        opacity: 0.8;
    }

    .material-button section {
        /*width: 50%;
	height: 50%;*/
        float: left;
        position: relative;
        overflow: hidden;
        cursor: pointer;
        user-select: none;
    }

@keyframes materialResponse {
    0% {
        width: 0;
        height: 0;
        margin: 0;
        background: rgba(255,255,255,0.1);
    }

    100% {
        width: 250%;
        height: 250%;
        margin: -125%;
        background: rgba(255,255,255,0.4);
    }
}

.material-button section:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 999px;
    cursor: pointer;
}

.material-button section:active:before {
    animation: materialResponse 0.4s ease;
    z-index: 2;
}

.material-icon {
    width: 30px;
    height: 20px;
    margin: 10px;
    position: relative;
}

    .material-icon span,
    .material-icon {
        transition: all 500ms ease;
        -webkit-transition: all 500ms ease;
        -o-transition: all 500ms ease;
        -moz-transition: all 500ms ease;
        -ms-transition: all 500ms ease;
    }

        .material-icon span {
            background-color: #fff;
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
        }

/*icon*/

.hamburger span {
    height: 3px;
    -webkit-transform: translateY(29px);
    -o-transform: translateY(29px);
    transform: translateY(29px);
    -moz-transform: translateY(29px);
}

.hamburger .second {
    -webkit-transform: translateY(0);
    -o-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
}

.hamburger .third {
    -webkit-transform: translateY(20px);
    -o-transform: translateY(20px);
    -moz-transform: translateY(20px);
    -ms-transform: translateY(20px);
    transform: translateY(20px);
}

/* This part is added to the hamburger css so they have the same height and positioning. */
.hamburger span, .arrow span {
    height: 3px;
    -webkit-transform: translateY(10px);
    -o-transform: translateY(10px);
    -moz-transform: translateY(10px);
    -ms-transform: translateY(10px);
    transform: translateY(10px);
}

.arrow {
    -webkit-transform: rotate(180deg) translateX(-3px);
    -o-transform: rotate(180deg) translateX(-3px);
    -ms-transform: rotate(180deg) translateX(-3px);
    -moz-transform: rotate(180deg) translateX(-3px);
    transform: rotate(180deg) translateX(-3px);
    padding-top: 4px;
}

    .arrow .second,
    .arrow .third {
        -webkit-transform: rotate(-45deg) translateY(23px);
        -o-transform: rotate(-45deg) translateY(23px);
        -ms-transform: rotate(-45deg) translateY(23px);
        -moz-transform: rotate(-45deg) translateY(23px);
        transform: rotate(-45deg) translateY(23px);
        width: 20px;
    }

    .arrow .second {
        /*-webkit-transform: rotate(45deg) translateY(-15px) translateX(40px);*/
        -webkit-transform: rotate(45deg) translateY(-9px) translateX(15px);
        -o-transform: rotate(45deg) translateY(-9px) translateX(15px);
        -ms-transform: rotate(45deg) translateY(-9px) translateX(15px);
        -moz-transform: rotate(45deg) translateY(-9px) translateX(15px);
        transform: rotate(45deg) translateY(-9px) translateX(15px);
    }
/*animated hambuger to back button end*/


/*No data placeholder*/

.sh-noDataPlaceholder-bg {
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    text-align: center;
    padding: 50px;
    z-index: 99;
    -webkit-filter: blur(5px);
    filter: blur(5px);
    background-color: white;
    background: rgba(255,255,255,0.80);
    height: 400px;
}

.sh-noDataPlaceholder {
    background-color: rgba(255,255,255,.6);
    z-index: 100;
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    text-align: center;
    padding: 50px;
    background: rgba(255,255,255,0.95);
}

    .sh-noDataPlaceholder .dx-icon-comment {
        color: lightgrey;
        font-size: 170px;
    }

    .sh-noDataPlaceholder h2:nth-of-type(1) {
        color: grey;
    }

    .sh-noDataPlaceholder h2:nth-of-type(2) {
        color: darkgrey;
    }

    .sh-noDataPlaceholder div:nth-of-type(2) {
        margin-top: 15px;
    }

/*small*/

.sh-noDataPlaceholder-small-card {
    position: relative;
    top: 40%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    -o-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    text-align: center;
    background-color: #fff;
    padding: 40px;
}

    .sh-noDataPlaceholder-small-card h4:nth-of-type(1) {
        color: darkgrey;
        margin-bottom: 20px;
    }

    .sh-noDataPlaceholder-small-card .dx-icon-comment {
        color: lightgrey;
        font-size: 80px;
    }

.sh-noDataPlaceholder-small {
    position: relative;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    -o-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    text-align: center;
    background-color: #fff;
    padding: 50px;
}

    .sh-noDataPlaceholder-small h2:nth-of-type(1) {
        color: darkgrey;
        /*margin-bottom: 10px;
        margin-top: 10px;*/
    }

    .sh-noDataPlaceholder-small h3:nth-of-type(1) {
        color: darkgrey;
        margin-bottom: 15px;
        margin-top: 10px;
    }

    .sh-noDataPlaceholder-small h4 {
        color: darkgrey;
        margin-top: 20px;
    }

    .sh-noDataPlaceholder-small .dx-icon-comment {
        color: lightgrey;
        font-size: 100px;
    }

    .sh-noDataPlaceholder-small div {
        color: lightgrey;
        font-size: 90px;
    }

.sh-phone-container {
    height: 210px;
}



.sh-noDataPlaceholder-small.phone .dx-icon-comment {
    color: lightgrey;
    font-size: 70px;
}


.sh-noDataPlaceholder-absolute {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    -o-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    text-align: center;
    background-color: #fff;
    padding: 50px;
}

    .sh-noDataPlaceholder-absolute h2:nth-of-type(1) {
        color: darkgrey;
        margin-bottom: 10px;
        margin-top: 10px;
    }

    .sh-noDataPlaceholder-absolute h3:nth-of-type(1) {
        color: darkgrey;
        margin-bottom: 20px;
        margin-top: 10px;
    }

    .sh-noDataPlaceholder-absolute h4 {
        color: darkgrey;
        margin-top: 20px;        
    }

    .sh-noDataPlaceholder-absolute .title {
        color: #565656;
        margin-top: 20px;
        margin-bottom: 10px;
        font-weight: bold !important;
        font-size: 20px;
    }
    .sh-noDataPlaceholder-absolute .subtitle {
        color: #8e8e8e;        
        font-size: 15px;
    }

    .sh-noDataPlaceholder-absolute div {
        color: lightgrey;        
        font-size: 100px;
    }

.sh-phone-container {
    height: 210px;
}

.sh-noDataPlaceholder-absolute.phone .dx-icon-comment {
    color: lightgrey;
    font-size: 70px;
}

/*No data placeholder end*/


/* 15.1 changes */

.dx-fieldset {
    margin: 0px 10px;
    padding: 0;
}

.dx-field {
    margin: 0;
}

.dx-toolbar .dx-toolbar-items-container {
    height: 100% !important;
    overflow: visible;
}

.dx-lookup-popup-wrapper .dx-popup-bottom {
    padding-top: 0;
}

.dx-overlay-wrapper {
    font-family: Segoe UI Web, Segoe UI, -apple-system, BlinkMacSystemFont, Roboto, Helvetica Neu, sans-serif !important;
    -webkit-font-smoothing: antialiased;
}

.dx-dialog-root .dx-popup-title.dx-toolbar .dx-toolbar-label {
    font-size: 25px;
}

.dx-theme-generic .dx-popup-wrapper .dx-overlay-content .dx-list .dx-button {
    min-width: 0;
}

.dx-list-item-after-bag.dx-list-static-delete-button-container {
    width: 24px;
}

.dx-theme-generic .dx-list .dx-button {
    background: none;
}

.dx-theme-generic .dx-list .dx-list-next-button .dx-button {
    /*background: #2971C5;*/
    background: grey;
    min-width: 80px !important;
}


/* animation */
.sh-animation {
    /* Force Hardware Acceleration in WebKit */
    -webkit-transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    -webkit-transition: all 0.2s ease;
    -moz-backface-visibility: hidden;
    -moz-transition: all 0.2s ease;
    -moz-transform: translateZ(0);
    -ms-transition: all 0.2s ease;
    -ms-backface-visibility: hidden;
    -ms-transform: translateZ(0);
    -o-backface-visibility: hidden;
    -o-transform: translateZ(0);
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;
    transform: translateZ(0);
    backface-visibility: hidden;
}

.sh-AnimationSmoother {
    -webkit-transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -moz-transform: translateZ(0);
    -ms-backface-visibility: hidden;
    -ms-transform: translateZ(0);
    -o-backface-visibility: hidden;
    -o-transform: translateZ(0);
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* Encompassing styles */

.flex {
    display: -webkit-box !important; /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box !important; /* OLD - Firefox 19- (buggy but mostly works) */
    display: -ms-flexbox !important; /* TWEENER - IE 10 */
    display: -webkit-flex !important; /* NEW - Chrome */
    display: flex !important; /* NEW, Spec - Opera 12.1, Firefox 20+ */
}

.flex-row-wrap {
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
}

.flex-column-wrap {
    -webkit-flex-flow: column wrap;
    flex-flow: column wrap;
}


.flexRatio1 {
    flex: 1;
    -ms-flex: 1;
    -o-flex: 1;
    -webkit-box-flex: 1;
    -moz-flex: 1;
}

.flexRatio2 {
    flex: 2;
    -ms-flex: 2;
    -o-flex: 2;
    -webkit-box-flex: 2;
    -moz-flex: 2;
}

/*custom dark background style for dx Controls*/
.sh-pivot-withBackground .dx-pivottabs .dx-pivottabs-tab.dx-pivottabs-tab-selected, .dx-theme-generic .dx-pivottabs .dx-pivottabs-ghosttab.dx-pivottabs-tab-selected {
    color: #fff !important;
}

.sh-textbox-withBackground .dx-texteditor-input {
    color: #fff !important;
}

.sh-textbox-withBackground .dx-icon {
    color: #fff !important;
}

.sh-textbox-withBackground.dx-texteditor.dx-state-focused {
    border-color: #fff !important;
}

.sh-textbox-withBackground .dx-dropdowneditor-icon {
    color: #fff !important;
}

.sh-textbox-withBackground.dx-datebox-calendar.dx-dropdowneditor-active .dx-texteditor-input {
    background: none !important;
}


/*dxPivot FIX REMOVE WHEN 1.7 released*/

/*.dx-pivot-wrapper {
    overflow: hidden;
}*/


.dx-slideout-item, .dx-slideout-item-content {
    height: 0;
    width: 0;
    display: none;
}

/*fix form dx-scrollbar bug on tileview*/
.dx-device-android .dx-scrollable-native.dx-scrollable-scrollbars-hidden ::-webkit-scrollbar {
    display: none;
}




/* Font fix for textareas */
.dx-textarea .dx-texteditor-input {
    /*font-family: 'Helvetica Neue','Segoe UI',Helvetica,Verdana,sans-serif !important;*/
    font-family: Segoe UI Web, Segoe UI, -apple-system, BlinkMacSystemFont, Roboto, Helvetica Neu, sans-serif !important;
    -webkit-font-smoothing: antialiased;
}


/* Fix for 1.9 upgrade - content in textboxes is grey, changing back to black */
.dx-texteditor.dx-state-readonly .dx-texteditor-input {
    color: black;
    background: #e8e8e8;
}


.SelectDifferentChartButtons {
    /*display: inline;*/
    /*margin: 40px;*/
    padding: 0;
    width: 250px;
    cursor: pointer;
    background: white !important;
    flex: 1;
    -ms-flex: 1;
    -o-flex: 1;
    -webkit-box-flex: 1;
    -moz-flex: 1;
}

    .SelectDifferentChartButtons .dx-button-content .dx-button-text {
        color: #2971C5;
        font-size: 15pt;
    }


/* Adds padding to the bottom of dashboard configuration popup so that validation text shows up */
#ScrollView .dx-scrollable-content .dx-scrollview-content {
    padding-bottom: 20px !important;
}

/* Use this for when the scrollview bar overlaps content and set the absoulte right property of the scrollview to 5px */
.scrollViewMargin {
    margin-right: 15px;
}



.noUserSelect {
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}

/*grid status indicator*/
.sh-grid-statusIndicator {
    width: 4px;
    height: 20px;
}


/*Breaking style changes form dx 16.1*/

/* Devexpress override */
/* Removed grey border on clicking in popup content */
.dx-popup-wrapper .dx-state-focused.dx-overlay-content {
    border: none !important;
}

.dx-calendar-navigator .dx-button .dx-icon {
    font-size: 16px;
    color: black !important;
}

.dx-datebox-wrapper-calendar > .dx-overlay-content {
    border: 1px solid lightgrey !important;
}

/* Popup Overrides */
.dx-popup-wrapper .dx-overlay-content {
    border-radius: 0 !important;
}

.dx-pager .dx-page, .dx-pager .dx-page-size {
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    -o-border-radius: 0;
}

.dx-datagrid-rowsview .dx-selection.dx-row:not(.dx-row-lines) > td, .dx-datagrid-rowsview .dx-selection.dx-row:hover:not(.dx-row-lines) > td {
    color: white;
}

.dx-datagrid-content .dx-datagrid-table .dx-row > td {
    position: relative;
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Chrome/Safari/Opera */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none;
}

/* Remove stupid padding on filter row edit column */
.dx-row.dx-datagrid-filter-row .dx-command-edit:not(.dx-selection) {
    padding: 0 !important;
}


/* Tab Overrides */
.dx-tabpanel .dx-tab:not(.dx-state-hover):before {
    border: none !important;
}

.dx-tabpanel .dx-state-hover:before {
    border: none !important;
}

.dx-state-hover:not(.dx-tab-selected) .dx-tab-text {
    opacity: .7;
}

.dx-button .dx-icon {
    color: inherit;
}


/*  Login Footer Styles  */
#content-dansac {
    color: #fff;
    position: absolute;
    top: 10px;
    bottom: 20px;
    left: 20px;
}

#content-sh {
    color: #fff;
    position: absolute;
    top: 5px;
    bottom: 20px;
    left: 255px;
}

.h5-mypen {
    font-size: 16px;
    font-weight: 300;
    padding: 0px;
    display: block;
    color: white !important;
}

    .h5-mypen:hover {
        text-decoration: underline;
    }

.footer-header {
    margin-bottom: 10px;
    margin-top: 0;
    font-size: 22px;
}

/* override tag box content - set border radius to 0 to remove curved edges*/
.dx-tag-content {
    margin: 4px 0 0 4px;
    padding: 3px 25px 4px 6px;
    min-width: 40px;
    background-color: #ddd;
    border-radius: 0px !important;
    color: #333;
    vertical-align: top;
}


.greyScale {
    filter: grayscale(100%) !important;
}

.strikeout-text {
    text-decoration: line-through !important;
}

    .strikeout-text .dx-texteditor-input {
        text-decoration: line-through !important;
    }


/*DX fix for non webkit browser toolbar descriptions*/
/*.dx-toolbar-label .dx-toolbar-item-content > div {
    overflow: visible;
}*/
.sh-fluent-shadow-left {
    border-right: 1px solid #eaeaea;
    box-shadow: 30px 0px 30px -30px rgba(0,0,0,0.2);
}

.sh-fluent-shadow-right {
    box-shadow: -30px 0px 30px -30px rgba(0,0,0,0.2);
    border-left: 1px solid #eaeaea;
}

.sh-fluent-shadow-bottom {
    /*box-shadow: 0 0 10px 0px rgba(0,0,0,0.5) !important;*/
    box-shadow: 0 0 2px rgba(0,0,0,0.12), 0 2px 2px rgba(0,0,0,0.24) !important;
    -webkit-box-shadow: 0 0 2px rgba(0,0,0,0.12), 0 2px 2px rgba(0,0,0,0.24) !important;
}


/*tinymce control styles*/

#letter-container {
    height: 100%;
    width: 100%;     
}

    #letter-container .mce-tinymce.mce-container.mce-panel,
    #letter-container .mce-container-body.mce-stack-layout {
        height: 100%;        
    }

    #letter-container .mce-edit-area.mce-container.mce-panel.mce-stack-layout-item {
        height: calc(100% - 38px);
        height: -webkit-calc(100% - 38px);
        height: -moz-calc(100% - 38px);
        height: calc(100% - 38px);       
    }

#letter-container iframe {
    height: 100% !important;
}

i.mce-i-resize {
    display: none;
}

@supports (-webkit-overflow-scrolling: touch) {
    #letter-container .mce-edit-area.mce-container.mce-panel.mce-stack-layout-item {       
        -webkit-overflow-scrolling: touch !important;
        overflow-y: scroll;
    }
}