body {
    font-family: "Roboto-Web", Roboto, "Helvetica Neue", Arial, sans-serif;
    background-color: #fff;
    color: #212529;
}

.body-content.br-section-wrapper {
    padding: 0;
    border-radius: 0;
}

.login-box {
    width: 100%;
}

@media (min-width: 400px) {
    .login-box {
        width: 350px;
    }
}

.header-image,
.footer-image {
    overflow: hidden;
}

    .header-image img,
    .footer-image img {
        width: 100%;
    }

@media (min-width: 1200px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl {
        max-width: 1200px;
    }

    .header-image img,
    .footer-image img {
        max-width: 1200px;
    }
}

.br-pageheader .breadcrumb-item.active {
    font-weight: bold;
}

    .br-pageheader .breadcrumb-item.active::before {
        font-weight: normal;
    }

.social-media-top a {
    margin-left: 1rem;
    font-size: 18px;
}

.social-media-bottom {
    font-size: 13px;
    padding: .5rem 15px;
}

    .social-media-bottom a {
        margin-left: 1rem;
        font-size: 18px;
    }

.page-title {
    font-weight: bold;
    margin-bottom: 1rem;
    font-size: 16px;
}

.card-header,
.card-body {
    padding: .5rem 15px;
}

.wd-130-force {
    width: 130px !important;
}

.wd-140-force {
    width: 140px !important;
}

.wd-220-force {
    width: 220px !important;
}

.tx-1em {
    font-size: 1em;
}

.text-underline {
    text-decoration: underline;
}

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

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

.help-icon {
    position: absolute;
    right: 15px;
    top: 7px;
}

.support-icon {
    position: absolute;
    right: 45px;
    top: 7px;
}

.RadButton:not(.RadRadioButton) {
    box-sizing: border-box !important;
    border-width: 1px !important;
}

.btn {
    padding: .375rem .75rem;
    border-radius: 3px !important;
}

.btn-sm, .btn-group-sm > .btn, .sp-container .btn-group-sm > button {
    padding: 0.25rem 0.5rem;
}

.form-control,
.RadInput_Bootstrap .riTextBox,
.RadComboBox_Bootstrap .rcbInner {
    height: calc(1.5em + .75rem + 2px) !important;
    padding: .375rem .75rem !important;
    font-size: 1em !important;
}

.RadInput_Bootstrap .riTextBox,
.RadInputMgr_Bootstrap,
.RadComboBox_Bootstrap .rcbInputCell {
    border-color: #ced4da;
}

textarea.form-control {
    height: auto !important;
}
/*.RadComboBox.RadComboBox_Bootstrap {
    width: auto;
}*/
.RadComboBox .rcbActionButton {
    height: 1.5em !important;
}

.RadGrid_Bootstrap .RadComboBox .rcbInput {
    height: 1.42857143em !important;
}

.RadListBox_Bootstrap .rlbGroup {
    border: 1px solid #ced4da !important;
    border-radius: 4px;
}

.col-form-label {
    padding-top: calc(.375rem + 1px);
    padding-bottom: calc(.375rem + 1px);
}

.rdContent {
    overflow: hidden !important;
}

.mandatory,
.error,
.red-text {
    color: red;
}

.border {
    border: groove;
    height: 680px;
    overflow: auto;
}

.rbl input[type="radio"] {
    margin-left: 20px;
    margin-right: 1px;
}

.RadGrid_Bootstrap.grid-nohighlight .rgMasterTable .rgSelectedCell,
.RadGrid_Bootstrap.grid-nohighlight .rgSelectedRow td,
.RadGrid_Bootstrap.grid-nohighlight td.rgEditRow .rgSelectedRow,
.RadGrid_Bootstrap.grid-nohighlight .rgSelectedRow td.rgSorted {
    background: #fff;
    border-color: #dedede;
}
.RadGrid_Bootstrap.grid-nohighlight tr.rgAltRow.rgSelectedRow td {
    background-color: #eceef1;
}

.grid-header-checkbox label {
    margin-bottom: 0;
    margin-left: .25rem;
}
.grid-item-checkbox input[type=checkbox] {
    vertical-align: middle;
}

.grid-header-checkbox input {
    display: inline !important;
    vertical-align: middle !important;
    margin-top: 2px !important;
}

.HURStyle {
    width: 35px !important;
    height: 15px;
    background: url('../Images/ReportIcon1.gif') !important;
}

.WWCMStyle {
    width: 35px !important;
    height: 15px;
    background: url('../Images/ReportIcon2.gif') !important;
}

.ORStyle {
    width: 35px !important;
    height: 15px;
    background: url('../Images/ReportIcon3.gif') !important;
}

.CPRStyle {
    width: 35px !important;
    height: 15px;
    background: url('../Images/ReportIcon4.gif') !important;
}


/** Columns */
.rcbHeader ul,
.rcbFooter ul,
.rcbItem ul,
.rcbHovered ul,
.rcbDisabled ul {
    margin: 0;
    padding: 0;
    width: 100%;
    display: inline-block;
    list-style-type: none;
}

.colChk {
    margin: 0;
    padding: 0 5px 0 0;
    width: 10%;
    line-height: 14px;
    float: left;
}

.col1,
.col2,
.col3 {
    margin: 0;
    padding: 0 5px 0 0;
    width: 30%;
    line-height: 14px;
    float: left;
}

.colDouble {
    margin: 0;
    padding: 0 5px 0 0;
    width: 60%;
    line-height: 14px;
    float: left;
}

/** Multiple rows and columns */
.multipleRowsColumns .rcbItem,
.multipleRowsColumns .rcbHovered {
    float: left;
    margin: 0 1px;
    min-height: 13px;
    overflow: hidden;
    padding: 2px 19px 2px 6px;
    width: 193px;
}

.label-padding {
    padding-top: 6px !important;
}

.list-flex {
    margin-bottom: 0;
    display: flex;
}

    .list-flex li {
        display: inline-flex;
        flex-grow: 1;
        align-items: center;
    }

        .list-flex li label {
            margin-bottom: 0;
            padding: 3px 5px;
            line-height: 1.5;
        }

.list-flex.list-inline li {
    flex-grow: 0;
    padding-right: 20px;
}

.list-condensed li label {
    padding: 0 5px;
}

.border-bottom-1px {
    border-bottom: solid 1px black;
}

.RadTabStrip_Bootstrap.rtsLeft .rtsLevel1 {
    border-right-width: 0;
    float: none;
    display: block;
}

    .RadTabStrip_Bootstrap.rtsLeft .rtsLevel1 .rtsUL {
        margin-right: 0;
    }

    .RadTabStrip_Bootstrap.rtsLeft .rtsLevel1 .rtsLink {
        border-radius: 3px !important;
    }

.RadTabStrip_Bootstrap .rtsLevel1 .rtsLink,
.RadTabStrip_Bootstrap .rtsLevel1 .rtsSelected .rtsLink {
    padding: 0.5rem 1rem !important;
    border: 0 !important;
}

.RadTabStrip_Bootstrap .rtsLevel1 .rtsHovered .rtsLink {
    border: 0 !important;
    background-color: transparent !important;
}

/* other tabstrip properties are set in the customer stylesheets */

.RadDockZone_Bootstrap {
    border: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

.RadDock_Bootstrap,
.RadDock_Bootstrap .rdTitleWrapper,
.RadDock_Bootstrap .rdTitleWrapper * {
    box-sizing: border-box !important;
}

    .RadDock_Bootstrap .rdTitleWrapper {
        height: auto !important;
        padding: .5rem 15px !important;
        line-height: 1.5 !important;
    }

    .RadDock_Bootstrap .rdContent {
        margin: 0 !important;
        padding: .5rem 15px;
    }

    .RadDock_Bootstrap.rdRoundedCorner {
        border-radius: 3px !important;
    }

        .RadDock_Bootstrap.rdRoundedCorner .rdTitleWrapper,
        .card .card-header {
            border-radius: calc(.25rem - 1px) calc(.25rem - 1px) 0 0 !important;
        }

        .RadDock_Bootstrap.rdRoundedCorner .rdContentWrapper {
            border-radius: 0 0 3px 3px !important;
        }

.RadGrid .rgMasterTable,
.RadGrid .rgDetailTable,
.RadGrid .rgEditForm table {
    border-collapse: collapse !important;
    border-spacing: initial !important;
}

.RadGrid_Bootstrap .rgRow > td,
.RadGrid_Bootstrap .rgAltRow > td,
.RadGrid_Bootstrap .rgEditRow > td,
.RadGrid_Bootstrap .rgFooter > td,
.RadGrid_Bootstrap .rgFilterRow > td,
.RadGrid_Bootstrap .rgHeader,
.RadGrid_Bootstrap .rgResizeCol,
.RadGrid_Bootstrap .rgGroupHeader td,
.RadGrid .rgPagerCell {
    padding: .3rem .4rem !important;
    height: auto !important;
}

.RadGrid_Bootstrap .rgRow,
.RadGrid_Bootstrap .rgAltRow,
.RadGrid_Bootstrap .rgEditRow,
.RadGrid_Bootstrap .rgFooter,
.RadGrid_Bootstrap .rgGroupHeader {
    height: auto !important;
}

.RadGrid_Bootstrap .rgPagerCell .rgNumPart {
    line-height: 1.5;
}


/* make radio buttons skinnable -- colours are defined in the customer stylesheets */
input[type="radio"] {
    visibility: hidden;
}

    input[type="radio"]::after {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        top: -1px;
        left: 0;
        position: relative;
        content: '';
        display: inline-block;
        visibility: visible;
        /* mimic chrome default colours for unselected radio button */
        background-color: white;
        border: 2px solid white;
        box-shadow: 0 0 0 1px rgba(118, 118, 118, 1);
    }

    input[type="radio"]:checked::after {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        top: -1px;
        left: 0;
        position: relative;
        content: '';
        display: inline-block;
        visibility: visible;
        border: 2px solid white;
        /* colours are in customer stylesheet */
    }

.rgFilterRow > td {
    padding: 0 !important;
}

.rgFilterBox {
    width: 70% !important;
}

.RadGrid .rgFilterRow img, .RadGrid .rgFilterRow input {
    height: 20px !important;
}

.RadGrid_Bootstrap .rgFilter {
    background-position: -14px -4513px !important;
    width: 20px !important;
}

.control-max-width {
    max-width: 280px;
}
/*Graph Styles*/

.OVChargeBreakdown, .HUMostFrequent, .HUMostFrequentCli, .HULongestDuration, .HUMostExpensive, .HULongestDurationCli, .HUMostExpensiveCli,
.WMWeekdays, .WMHours, .WMMonthDays, .WMPeakPeriod, .CTBSummaryQty, .CTBSummaryDuration, .CTBSummaryCost, .CTBDetailQty, .CTBDetailDuration, .CTBDetailCost {
    width: 50%;
    margin-left: 0;
}

.navbar .nav-link {
    padding-right: .5rem;
    padding-left: .5rem;
}

    .navbar .nav-link.active {
        font-weight: bold;
    }

.form-checkbox input[type="checkbox"] {
    position: absolute;
    margin-top: 0.3rem;
    margin-left: -1.25rem;
}

.form-checkbox label {
    margin-top: 0.1rem;
    margin-bottom: 0;
}

.form-check-inline .form-checkbox input[type="checkbox"] {
    position: static;
    margin-top: 0;
    margin-right: 0.3125rem;
    margin-left: 0;
}

@media (max-width: 768px) {
    .navbar-expand-custom .nav {
        flex-direction: column;
    }
}

@media (min-width: 769px) {
    .navbar-expand-custom {
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: flex-start;
    }

        .navbar-expand-custom .nav {
            flex-direction: row;
        }

        .navbar-expand-custom .navbar-collapse {
            display: flex !important;
        }

        .navbar-expand-custom .navbar-toggler {
            display: none;
        }
}

.usage-graph {
    float: left;
    width: 450px;
}


.RadRadioButton.RadButton .rbText, .RadCheckBox.RadButton .rbText {
    padding: 0 !important;
}

.BarContainer td {
    width: 33%;
}

.BarContainer tr:nth-child(even) {
    background-color: white;
}

.BarContainer tr:nth-child(odd) {
    background-color: white;
}

.invalid {
    background-color: rgba(255, 0, 0, 0.1);
    border-color: red;
}

.hide {
    display: none;
}

.checkRtl {
    direction: rtl;
}


.RadPanelBar .rpItem {
    margin-bottom: 10px !important;
    border: 1px !important;
    border-style: solid !important;
    border-color: #dedede !important;
}

.rpSlide {
    padding-left: 10px !important;
}

.RadPanelBar_Bootstrap {
    border-style: none !important;
}

.breakdownLink {
    text-decoration: underline;
    cursor: pointer;
}

/*.RadEditor_Default .reToolBar {
    display: none !important;
}
.reToolBarWrapper {
    display: none !important;
}*/
.RadEditor_Default {
    padding-bottom: 0px !important;
    padding-left: 9px !important;
    padding-right: 9px !important;
}

.reContent {
    height: 80% !important;
}

.rightPad {
    padding-right: .625rem;
}

.reRealFontSize {
    width: 60px !important;
}


.CTBSummaryQty table tbody tr:last-child td {
    font-weight: bolder !important;
}

.CTBSummaryQty table tbody td {
    width: 16%;
}

.CTBSummaryDuration table tbody tr:last-child td {
    font-weight: bolder !important;
}

.CTBSummaryDuration table tbody td {
    width: 20%;
}

.CTBSummaryCost table tbody tr:last-child td {
    font-weight: bolder !important;
}

.CTBSummaryCost table tbody tr:first-child td {
    width: 10%;
}

.CTBSummaryCost table tbody td {
    width: 6%;
}

.CTBSummaryCost table tbody tr td:first-child {
    width: 8%;
}

.CTBSummaryCost table tbody tr td:nth-of-type(2) {
    width: 8%;
}

.CTBDetailQty table tbody tr:last-child td {
    font-weight: bolder !important;
}

.CTBDetailQty table tbody td {
    width: 20%;
}

.CTBDetailQty table tbody tr td:first-child {
    width: 8%;
}

.CTBDetailQty table tbody tr td:nth-of-type(2) {
    width: 8%;
}

.CTBDetailQty table tbody tr td:nth-of-type(3) {
    width: 24%;
}

.CTBDetailCost table tbody tr:last-child td {
    font-weight: bolder !important;
}

.CTBDetailCost table tbody td {
    width: 6%;
}

.CTBDetailCost table tbody tr td:first-child {
    width: 8%;
}

.CTBDetailCost table tbody tr td:nth-of-type(2) {
    width: 8%;
}

.CTBDetailCost table tbody tr td:nth-of-type(3) {
    width: 24%;
}

.CTBDetailDuration table tbody tr:last-child td {
    font-weight: bolder !important;
}

.CTBDetailDuration table tbody td {
    width: 30%;
}

.CTBDetailDuration table tbody tr td:first-child {
    width: 8%;
}

.CTBDetailDuration table tbody tr td:nth-of-type(2) {
    width: 8%;
}

.CTBDetailDuration table tbody tr td:nth-of-type(3) {
    width: 24%;
}

.CTBSummaryCombined table tbody tr:last-child td {
    font-weight: bolder !important;
}

.checkbox label .toggle, .checkbox-inline .toggle {
    margin-left: -1.25rem;
    margin-right: .35rem;
}

.toggle .p-icon {
    width: auto;
    height: 100%;
}

.toggle {
    position: relative;
    overflow: hidden;
}

    .toggle.btn.btn-light, .toggle.btn.btn-outline-light {
        /* bootstrap-4 - add a border so toggle is delineated */
        border-color: rgba(0, 0, 0, .15);
    }

    .toggle input[type="checkbox"] {
        display: none;
    }

.toggle-group {
    position: absolute;
    width: 100%;
    top: 0;
    bottom: 0;
    left: 0;
    transition: left 0.35s;
    -webkit-transition: left 0.35s;
    -moz-user-select: none;
    -webkit-user-select: none;
}

    .toggle-group label, .toggle-group span {
        cursor: pointer;
    }

.toggle.off .toggle-group {
    left: -100%;
}

.toggle-on {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 50%;
    margin: 0;
    border: 0;
    border-radius: 0;
    width: 100%;
}

.toggle-off {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0%;
    right: 0;
    margin: 0;
    border: 0;
    border-radius: 0;
    width: 100%;
    box-shadow: none;
}

.toggle-handle {
    position: relative;
    margin: 0 auto;
    padding-top: 0px;
    padding-bottom: 0px;
    height: 100%;
    width: 0px;
    border-width: 0 1px;
    background-color: #fff;
}

.toggle-on + .toggle-handle {
    left: 50%;
}

.toggle-off + .toggle-handle {
    right: 50%;
}

/* `sm` (bootstrap-4.1.3 - .btn - h:31px) */
.toggle.btn-sm {
    min-width: 3.125rem;
    /*min-height: 1.938rem;*/
    min-height: 1.75rem;
}

.toggle.btn-sm, .toggle > .btn-sm {
    padding-top: 0;
    padding-bottom: 0;
}

.toggle-on.btn-sm {
    padding-right: 1rem;
}

.toggle-off.btn-sm {
    padding-left: 1rem;
}

.card-details {
    border-radius: .5rem;
    border-width: 2px;
}

.character-count {
    color:black;
    font-size: 0.8em;
    opacity: 0.8;
}

.modal-dialog-right {
    right: -90px;
}
.RadGrid .rgGroupItem input, .RadGrid .rgCommandRow img, .RadGrid .rgCommandRow a, .RadGrid .rgHeader input {
    vertical-align: top !important;
    display:block;
}
.col-center-align{
    display:flex;
    align-items:center;
}