/* common.css */

/*
    Chrome had an update where for accessibility everything has a thick black border added when in focus. The following removes all instances.    
*/
*,
*:focus,
*:hover {
    outline: none;
}

/* ==== FORM FIELD OVERRIDES ==== */
.formfield.isBootStrap {
    clear: none;
}

.formfield div.label {
    color: black;
    font-size: 100%;
    font-weight: 600;
    text-align: left;
}

/* If you have just text in a form field control, the label is given padding by bootstrap, but the content isn't... so add this class to level them */
.formfieldclient .control-content.topPadding {
    padding-top: 7px;
}

/* ==== LAYOUT FIXES ==== */
.inline-block {
    float: none;
    display: inline-block;
    margin: 0 -0.125em;
    vertical-align: top;
}

@media only screen and (max-width: 766px) {
    .inline-block {
        float: none;
        display: block;
        margin: 0;
        width: 100%;
    }
}

/*
    For some reason, on the users page, the logo was going full height / width in mobile mode. Force the height in CSS rather than on the object (getting removed?).
*/
.providerPortal .logoContainer img {
    height: 52px;
}

.form-control-static {
    overflow-y: auto;
    overflow-x: hidden;
}

/* ==== LAYOUT HELPERS ==== */
.providerPortal .fullWidth {
    width: 100% !important;
}

/* ==== RAG COLOURS ==== */
.providerPortal .green {
    color: green;
}

.providerPortal .amber {
    color: #daa520;
}

.providerPortal .red {
    color: red;
}

/* ==== NAMED COLOURS ==== */
.providerPortal .primaryColour,
.providerPortal .RadGrid .primaryColour,
.providerPortal .RadGrid td.primaryColour span {
    color: #1B96D2;
}

.providerPortal .textWhite {
    color: #ffffff;
}

/* ==== BACKGROUNDS ==== */
.providerPortal .gray-bg {
    background-color: #f3f3f4;
}

.providerPortal .white-bg {
    background-color: #ffffff;
}

.providerPortal .navy-bg {
    background-color: #1ab394;
    color: #ffffff;
}

.providerPortal .green-bg {
    background-color: #5AD14F;
    color: #ffffff;
}

.providerPortal .blue-bg {
    background-color: #1b96d2;
    color: #ffffff;
}

.providerPortal .lazur-bg {
    background-color: #23c6c8;
    color: #ffffff;
}

.providerPortal .yellow-bg {
    background-color: #f8ac59;
    color: #ffffff;
}

.providerPortal .orange-bg {
    background-color: #F7881F;
    color: #ffffff;
}

.providerPortal .red-bg {
    background-color: #ed5565;
    color: #ffffff;
}

.providerPortal .black-bg {
    background-color: #262626;
}

/* ==== MARGIN HELPERS ==== */
.providerPortal .marginTopNone {
    margin-top: 0 !important;
}

.providerPortal .marginBottomNone {
    margin-bottom: 0 !important;
}

.providerPortal .marginTopBottom {
    margin: 10px 0;
}

.marginTop5 {
    margin-top: 5px;
}

.marginTop10 {
    margin-top: 10px;
}

.marginTop20 {
    margin-top: 20px;
}

.marginTopBottomSm {
    margin: 3px 0;
}

.marginRight15 {
    margin-right: 15px;
}

.marginRight5 {
    margin-right: 5px;
}

.marginLeft5 {
    margin-left: 5px;
}

.marginLeft10 {
    margin-left: 10px;
}

.marginLeft15 {
    margin-left: 15px;
}

.marginLeft20 {
    margin-left: 20px;
}

.marginBottom10 {
    margin-bottom: 10px;
}

.inlineButtonRight {
    margin-left: 5px;
}

/* ==== CURSOR HELPERS ==== */
.cursorPointer {
    cursor: pointer;
}

.cursorHelp {
    cursor: help;
}

/* ==== WIDGETS ==== */
.widget {
    border-radius: 5px;
    padding: 15px 20px;
    margin-bottom: 10px;
    margin-top: 10px;
    width: 100%;
}

    .widget h2,
    .widget h3 {
        margin-top: 5px;
        margin-bottom: 0;
    }

.widget-text-box {
    padding: 20px;
    border: 1px solid #e7eaec;
    background: #ffffff;
}

.widget-head-color-box {
    border-radius: 5px 5px 0 0;
    margin-top: 10px;
}

.widget .img-responsive {
    display: initial;
}

.blue-bg .text-muted,
.bg-primary .text-muted,
.yellow-bg .text-muted {
    color: #ffffff;
}

img.circle-border {
    border: 3px solid #FFFFFF;
    border-radius: 50%;
    background-color: #fff;
}

.centre-text {
    text-align: center;
}

.divider .innerDivider {
    padding-left: 7px;
    font-style: italic;
    color: grey;
    font-weight: 700;
}

.left {
    float: left;
}

.right {
    float: right;
}

.overflowHidden {
    overflow: hidden;
}

.paddingTopNone {
    padding-top: 0 !important;
}

/*
    For some reason the radio list doesn't show a pointer when you hover, so this style just brings it in line with other clickable items.    
*/
.providerPortal table.radioButtonList input {
    cursor: pointer;
}

/*
    By default the radio list is a bit compressed. This spaces them out a bit more but keeps the first item flush with the left hand side like other form elements.  
*/
.providerPortal table.radioButtonList td:not(:first-child) {
    padding-left: 1rem;
}

/* 
    Override the defaults that bootstrap applies. As they're rendered as labels the font defaults to bold etc. Also change the position
    value so that the text is inline (centrally) with the radio button, rather than top aligned.
*/
.providerPortal .radioButtonList label {
    font-weight: normal;
    margin-right: auto;
    margin-left: 6px;
    cursor: pointer;
    position: relative;
    top: -2px;
    margin-bottom: 0;
}

/****   Override the magnific popup cursor from the zoom out cursor  ****/
.mfp-zoom-out-cur, .mfp-zoom-out-cur .mfp-image-holder .mfp-close {
    cursor: pointer !important;
}

/* Apply this class to combobox / dropdowntree sliders within a modal window, so they appear above the modal window */
div.rddtSlide {
    z-index: 90011;
}

/**** Min height fix for ajax loaded rad grid loading panels ****/
.minHeight100 {
    min-height: 100px !important;
}

/****   Apply to a div to transform in to a circle e.g. Post code area display    ****/
.dotDisplay {
    border: 7px solid #00ced1;
    background-color: #00ced1;
    -webkit-border-radius: 50%;
    height: 35px;
    width: 35px;
    z-index: 1000;
    color: #fff;
    font-size: 1em;
    text-align: center;
    line-height: 20px;
    white-space: nowrap;
}

@media (max-width: 768px) {
    .dotDisplay {
        font-size: 1em;
    }
}

@media (min-width: 768px) {
    .cursorZoom {
        cursor: zoom-in;
    }

    .textTruncated {
        display: block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

        .textTruncated:hover {
            overflow: visible;
            position: absolute;
            background: #ffffff;
        }
}

.colorGreen {
    color: #44aa44 !important;
}

/* bc this was overriding the above ^^ */
.RadGrid_Bootstrap .rgAltRow > td {
    color: inherit !important;
}

.colorOrange {
    color: #dd6633 !important;
}

.colorGray {
    color: gray !important;
}

.panel-heading-icons h3 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: normal;
    padding-top: 8px;
    display: inline-block;
}

@media screen and (min-width:769px) {
    .panel-heading-icons h3 {
        width: 50%;
    }
}

@media screen and (max-width:768px) {
    .panel-heading-icons h3 {
        width: 50%;
    }
}

.clearBoth {
    clear: both;
}

/*
    When we have a svg that is clickable (font awesome icon in a grid) make sure it is coloured and acts like a link (i.e. pointer).    
*/
.providerPortal svg[onclick] {
    color: #337ab7;
    cursor: pointer;
    text-decoration: none;
}


.userContextMenuMainNavbar {
    max-height: 90px;
    max-width: 70px;
    padding-top: 10px;
    margin-left: 15px;
}

.userContextMenuIcon {
    cursor: pointer;
}

.userContextMenuMainNavbar .modal-content div.formfieldclient {
    color: #000;
}

@media (max-width: 768px) {   
    .providerPortal ul.nav.navbar-nav.navbar-right li {
        width: 70%;
    }

    .providerPortal .userContextMenuMainNavbar {
        width: 25%;
    }
}

.navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form {
    border-color: #1B96D2 !important;
}

@media only screen and (max-width: 766px) {
    .navbar .collapsing, .navbar .in {
        background-color: #59D04E;
    }

        .navbar .collapsing ul li a, .navbar .in ul li a {
            color: #fff !important;
        }

            .navbar .collapsing ul li a:hover, .navbar .in ul li a:hover {
                color: #F7881F;
            }
}

/* ===== SIDEBAR ==== */

@media (min-width: 768px) {
    .sidebar {
        position: fixed !important;
        top: 56px;
        bottom: 0;
        left: 0;
        z-index: 1000;
        /*padding: 20px;*/
        overflow-x: hidden;
        overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
        background-color: #f5f5f5;
        border-right: 1px solid #eee;
    }
}

/* 
    Position the sub menu directly under the title horizontal rule.
    We need to do negative margin-top to counter the navbar "row".
*/
@media (max-width: 767px) {
    div.sidebar {
        padding-left: 0;
        padding-right: 0;
        margin-top: -20px;
        margin-bottom: 20px;
    }
}

/* Sidebar navigation */

.nav-sidebar {
    margin-right: -21px; /* 20px padding + 1px border */
    margin-bottom: 20px;
    margin-left: -20px;
}

    .nav-sidebar > li > a {
        padding-right: 20px;
        padding-left: 20px;
    }

    .nav-sidebar > .active > a,
    .nav-sidebar > .active > a:hover,
    .nav-sidebar > .active > a:focus {
        color: #fff;
        background-color: #428bca;
    }

.xsSubMenu .btn.btn-warning.dropdown-toggle {
    border-radius: 0;
}


/* ===== MAIN CONTENT ==== */

.main {
    padding: 0;
    margin-bottom: 50px;
}

@media (max-width: 768px) {
    .main {
        padding: 0;
    }
}

@media (min-width: 768px) {
    .main {
        padding-right: 40px;
        padding-left: 40px;
    }
}

.page-header {
    margin-bottom: 15px;
    margin-top: 0;
    border-bottom: 1px solid #eee;
}

.pull-bottom {
    bottom: 0;
    position: absolute;
    width: 100%;
    padding: 10px;
}

/* ===== FILTER BAR (the drop down filter control containers e.g. QC filters ==== */

.filterBarHeader {
    color: #31708f;
    background-color: #B8E1F6;
    border-color: #bce8f1;
    padding: 10px;
    margin-bottom: 0;
    border: 1px solid transparent;
    border-radius: 4px 4px 0 0;
    cursor: pointer;
}

.filterBarContent {
    border-radius: 0 0 4px 4px !important;
    border-top: 0 !important;
}


/* ===== DB CONNECTION INFO ==== */

.dbInfoContainer {
    color: #fff !important;
    background-color: #F7881F;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=33)";
    filter: alpha(opacity=66);
    -moz-opacity: 0.66;
    -khtml-opacity: 0.66;
    opacity: 0.66;
    position: fixed;
    bottom: 0;
    width: 100%;
    padding: 5px;
}

/* ==== SWITCH OFF RADBUTTON TEXT IN DESKTOP VIEW ==== */
@media (min-width: 768px) {
    .ResponsiveButtonContainer .RadButton .rbText {
        display: none;
    }
}

/* ==== QUERY COUNT HOLDER ==== */
.JobQueryCountContainer {
    border-radius: 10px;
    width: 20px;
    height: 20px;
    background-color: red;
    color: #fff;
}

/* ====== Z-INDEX ====== */
/*
    A specific section for setting the z-index
    of these elements to ensure no strange
    behaviour is observed

    Modals
    Navbar
    Slide panel
    db Info
    Loading
*/

.actionBarModal {
    z-index: 90001 !important;
}

.dbInfoContainer, 
.actionBarIcon, 
.actionBarPanel {
    z-index: 90002 !important;
}

.providerPortal .slidePanel {
    z-index: 90003;
}

.providerPortal .modal-backdrop {
    z-index: 90007;
}

.providerPortal .modal {
    z-index: 90008;
}


/*  Place bespoke loading panel classes here to display the loading panel over the slide panel and in the modal window. */
.RadAjax.slideLoadingPanel {
    z-index: 90010 !important;
}

.RadToolTip {
    z-index: 90009 !important;
}

.modalLoadingPanel {
    z-index: 90010 !important;
}

.mfp-wrap, 
.mfp-gallery, 
.mfp-close-btn-in, 
.mfp-auto-cursor, 
.mfp-img-mobile, 
.mfp-ready {
    z-index: 90011 !important;
}

.mfp-bg, 
.mfp-img-mobile, 
.mfp-ready, 
.RadWindow {
    z-index: 90012 !important;
}

.rcbSlide, 
.RadCalendarPopup, 
.modalOverMfpGallery {
    z-index: 90013 !important;
}

/* Rad control z-index overrides */
.RadCalendarFastNavPopup {
    z-index: 90014 !important;
}

/* ===== MISC ==== */

/* Use this to remove padding from grid wrapped by row/col-/table-responsive */
.providerPortal .paddingLeftRightNone {
    padding: 0;
}

.providerPortal .table-responsive {
    border: none;
}

.providerPortal .table-bordered {
    border: 1px solid #dedede;
}

@media (max-width: 768px) {
    .providerPortal .table-responsive {
        font-size: 0.8em;
    }
}

/*
    Need to investigate why this is needed. When this isn't specified the height
    of the button is wrong and is way to thin with no text being displayed at all.
*/
.providerPortal .multiSelectComboBox span.rbText {
    font-size: 14px;
}

.setings-item {
    padding: 10px 30px;
}

/* tiles css */

div.tiles .overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #d9edf7;
    background-color: rgba(217, 237, 247, 0.90);
    z-index: 9999;
    color: #31708f;
    display: inline-block;
    opacity: 0;
    padding-top: 10px;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

    div.tiles .overlay:hover {
        opacity: 1;
    }

    div.tiles .overlay.hover {
        opacity: 1;
    }

div.tiles .panel-body {
    position: relative;
}

/*
    By default the data pager has padding and its own border etc, which looks out of place when it's solo at the bottom of the tiles. So if a "nostyle" is applied then remove all of that.
*/
.providerPortal .RadDataPager.noStyle {
    border: none;
    background-color: transparent;
    padding: 0;
}

div.tiles .form-group {
    margin-bottom: 0 !important;
}

div.tiles .form-control-static {
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
    padding-top: 7px;
}

/*
    When you've got a button group on the right of the tile, the text doesn't centre align (button height is 22px, text 17px), so
    add some padding to the child with text-nowrap (will be the header text) to bring it inline.    
*/
div.tiles .panel .panel-heading .panel-title > .text-nowrap h4 {
    padding-top: 3px;
    margin-top: 0;
    margin-bottom: 0;
}

/* new styles */

html, body {
    padding-top: 0 !important;
    min-height: 100%;
    height: 100%;
    margin: 0;
}

body {
    position: relative;
    font-size: 14px;
}

#pageWrapper {
    margin: 0 -6px 0 0 !important;
    min-height: 100%;
    height: 100%;
    width: 100%;
    padding: 0;
    /*margin: 0 auto;*/
    background-color: #f8f9fa;
}

.bg-light {
    min-height: calc(100vh - 60px);
    height: 100%;
    background-color: transparent !important;
}

#newFooter {
    clear: both;
    bottom: 0;
    min-height: 30px;
    background-color: #e5e5e5;
    text-align: center;
    font-size: 11px;
    width: 100%;
    padding: 5px 0 5px 0;
    font-weight: 300;
    margin-top: 30px;
}

.footerNew {
    clear: both;
    bottom: 0;
    height: 60px;
    background-color: #ededed;
    text-align: center;
    font-size: 11px;
    width: 100% !important;
    padding: 5px 0 5px 0;
    font-weight: 300;
    margin: 0;
    z-index: 2147483638 !important;
}

#content {
    height: 100% !important;
}

.chartArea {
    height: 360px;
    background-color: #f2f2f2;
    float: left;
    position: relative;
    overflow: hidden;
    width: 100%;
}

.chartAreaHeader {
    position: absolute;
    top: 0;
    left: 0;
    height: 50px;
    background-color: #e5e5e5;
    border-bottom: 1px solid #d7d7d7;
    width: 100%;
}

    .chartAreaHeader i {
        margin: 4px 0 0 0;
        text-align: center;
        font-size: 24px;
        width: 60px;
        position: absolute;
        display: inline-block;
        color: #858585;
        line-height: 42px;
        height: 50px;
        float: left;
        top: 0;
        left: 0;
    }

.chartAreaFooter {
    height: 28px;
    background-color: #e5e5e5;
    text-align: left;
    position: absolute;
    bottom: 0;
    left: 0;
    border-top: 1px solid #d7d7d7;
    line-height: 28px;
    width: 100%;
    color: #b2b2b2 !important;
}

    .chartAreaFooter i {
        padding: 2px 10px;
        font-size: 20px;
        cursor: pointer;
    }

.dateTimeSummary {
    clear: both;
    font-size: 11px;
    color: #444;
    display: block;
}

.headerTextDiv {
    position: absolute;
    left: 60px;
    top: 0;
    height: 50px;
    text-align: left;
    padding-top: 8px;
    line-height: 18px;
    font-size: 14px;
    overflow: hidden;
    white-space: nowrap;
}

.chartContainer {
    width: 100%;
    height: 280px;
    position: relative;
    top: 50px;
    padding: 20px 10px 0 10px;
}

.chartContainerFullHeight {
    min-height: 720px;
}

.chartContainer i {
    position: absolute;
    top: 10px;
    right: 10px;
    color: #777;
    font-size: 18px;
    cursor: pointer;
}

.card-type {
    width: 30%;
    text-align: center;
    height: 130px;
}

    .card-type i {
        font-size: 68px;
        color: #fff;
        line-height: 120px;
    }

@media screen and (max-width: 1300px) and (min-width: 768px) {

    .card-type {
        width: 50px !important;
    }

        .card-type i {
            font-size: 28px !important;
        }
}

.widgetBox {
    background-color: #f2f2f2;
    width: 100%;
    height: 130px;
    margin-top: 10px;
}

.widgetBoxNumberContainer {
    width: 70%;
    background-color: #f2f2f2;
    line-height: 35px;
    text-align: right;
    height: 130px;
    overflow: hidden;
}

.widgetBoxNumbersDiv {
    float: right;
    padding-right: 5%;
    padding-top: 20px;
    white-space: nowrap;
    font-size: 16px;
    width: 100% !important;
    text-align: right;
}

.widgetDivValue1 {
    margin-top: -10px;
    float: none;
    line-height: 30px;
    display: inline-block;
    white-space: nowrap;
    margin-right: 20px;
}

.widgetDivValue2 {
    margin-top: -10px;
    float: none;
    line-height: 30px;
    display: inline-block;
    white-space: nowrap;
}

.widgetValuesTopText {
    display: block;
    font-size: 14px;
}

.widgetValuesNumericValue {
    font-size: 34px;
    font-weight: 700;
    display: block;
}

@media screen and (max-width: 1300px) and (min-width: 768px) {
    .widgetValuesNumericValue {
        font-size: 28px;
    }
}

.bgGreen {
    background-color: #1ab394;
}

.bgPale-green {
    background-color: #d1f0ea;
}

.bgBlue {
    background-color: #1b96d2;
}

.bgPale-blue {
    background-color: #c6e5f4;
}

.bgYellow {
    background-color: #f8ac59;
}

.bgPale-yellow {
    background-color: #fdead5;
}

.chartBlockElement {
    display: block;
}

h1 {
    font-size: 2.25em;
}

@media screen and (max-width: 768px) {

    #displaySubmenu {
        display: inline-block;
    }

    #menuListItems {
        width: 100% !important;
    }

    #displayMenu {
        display: none;
    }

    #bodyContainer {
        padding-top: 0;
    }
}

.rotate {
    -moz-transition: all 2s linear;
    -webkit-transition: all 2s linear;
    transition: all 2s linear;
}

    .rotate.down {
        -ms-transform: rotate(180deg);
        -moz-transform: rotate(180deg);
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
    }

.main {
    padding-top: 60px;
}

#body-row {
    margin-left: 0;
    margin-right: 0;
}

.logo-separator {
    background-color: #333;
    height: 60px;
}

#body-row {
    margin-left: 0;
    margin-right: 0;
    /* this added as a result of having to add :fixed 
        to the body when the slide panel opens to prevent body 
        scrolling! This div not going full width without the 100vw tag */
    width: 100vw;
}

#body-col {
    background-color: #333;
}

.list-group {
    border-radius: 0 !important;
    -moz-border-radius: 0 !important;
}

/* Style the list */
ol.breadcrumbs {
    padding: 0;
    list-style: none;
    background-color: transparent;
    white-space: nowrap;
    /*overflow: scroll;*/
    overflow-x: scroll;
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
}

    ol.breadcrumbs::-webkit-scrollbar {
        display: none;
        width: 0px;
        background: transparent;
    }

    /* Display list items side by side */
    ol.breadcrumbs li {
        display: inline;
        font-size: 15px;
    }

        /* Add a slash symbol (/) before/behind each list item */
        ol.breadcrumbs li + li:before {
            padding: 8px;
            color: black;
            content: "/\00a0";
        }

        ol.breadcrumbs li:last-child a {
            font-weight: 700;
            color: grey;
        }

        /* Add a color to all links inside the list */
        ol.breadcrumbs li a {
            color: #0275d8;
            text-decoration: none;
        }

            /* Add a color on mouse-over */
            ol.breadcrumbs li a:hover {
                color: #01447e;
                text-decoration: underline;
            }

.hpSpacer {
    clear: both;
    height: 20px;
}

@media screen and (max-width: 480px) and (min-width: 320px) {
    #hamBurger {
        left: calc(50% - 7px) !important;
    }

    #topMenuPlusUserIcon i {
        width: 40px;
    }

    #topMenuPlusUserIcon a {
        width: 40px !important;
    }
}

@media screen and (max-width: 480px) {

    ol.breadcrumbs {
        padding-top: 10px;
        display: block;
        width: 100%;
    }

    #logoContainer {
        position: relative;
        left: -13px;
    }

    .topRightLogosContainer {
        /*width: 155px;*/
    }

    #hamBurger {
        left: 162px;
    }

    .hpSpacer {
        height: 0 !important;
    }

    #topMenuPlusUserIcon i {
        width: 45px;
    }

    #topMenuPlusUserIcon a {
        width: 45px !important;
    }
}

@media screen and (max-width: 767.98px) and (min-width: 480px) {
    .hpSpacer {
        height: 0 !important;
    }

    #hamBurger {
        left: 180px;
    }
}

#mainContent {
    overflow-x: auto;
    padding-bottom: 30px;
    padding-top: 10px;
    flex-grow: 1;
    max-width: 100%;
    flex-basis: 0;
}

.exportModal {
    margin: 0 auto !important;
}

@media (min-width: 576px) {
    .providerPortal {
        padding-right: 0 !important;
        overflow-x: hidden !important;
    }
}

.toast {
    width: 100% !important;
    min-height: 50px;
    font-size: 15px !important;
    color: #fff !important;
    min-width: 60vw !important;
}

@media screen and (max-width: 767.98px) {
    .toast {
        min-width: 80vw !important;
    }
}

.actionBarIcon .fa-cogs:before {
    font-size: 24px !important;
}

.userImg {
    max-height: 110px;
    width: auto;
}

/* Min Widths */

.min-width-25 {
    min-width: 25px !important;
}

.min-width-50 {
    min-width: 50px !important;
}

.min-width-75 {
    min-width: 75px !important;
}

.min-width-100 {
    min-width: 100px !important;
}

.min-width-125 {
    min-width: 125px !important;
}

.min-width-150 {
    min-width: 150px !important;
}

.min-width-175 {
    min-width: 175px !important;
}

.min-width-200 {
    min-width: 200px !important;
}

.min-width-225 {
    min-width: 225px !important;
}

.min-width-250 {
    min-width: 250px !important;
}

.min-width-275 {
    min-width: 275px !important;
}

.min-width-300 {
    min-width: 300px !important;
}

/* Max Widths */

.max-width-25 {
    max-width: 25px !important;
}

.max-width-50 {
    max-width: 50px !important;
}

.max-width-75 {
    max-width: 75px !important;
}

.max-width-100 {
    max-width: 100px !important;
}

.max-width-125 {
    max-width: 125px !important;
}

.max-width-150 {
    max-width: 150px !important;
}

.max-width-175 {
    max-width: 175px !important;
}

.max-width-200 {
    max-width: 200px !important;
}

.max-width-225 {
    max-width: 225px !important;
}

.max-width-250 {
    max-width: 250px !important;
}

.max-width-275 {
    max-width: 275px !important;
}

.max-width-300 {
    max-width: 300px !important;
}

.fa-close {
    cursor: pointer;
}

.fade-in {
    opacity: 1;
    animation-name: fadeInOpacity;
    animation-iteration-count: 1;
    animation-timing-function: ease-in;
    animation-duration: 0.2s;
}

@keyframes fadeInOpacity {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

small.text-muted {
    font-size: 13px;
    color: #fff !important;
}

.marginBottom20 {
    margin-bottom: 20px;
}

.control-label {
    font-weight: bold;
}

.formfieldclient {
    clear: both;
}

.input-group-addon,
.input-group-btn {
    width: 1%;
    white-space: nowrap;
    vertical-align: middle;
}

.heading-default {
    background-color: #f5f5f5;
    color: #222;
    font-size: 17px;
}

.card-body .pageList {
    height: 210px;
}

.card h3 {
    font-size: 28px;
    margin-bottom: 30px;
}

.heading-pale-blue {
    background-color: #d9edf7;
    color: #337ab7;
    font-size: 15px;
    font-weight: bold;
}

.heading-pale-green {
    background-color: #dff0d8;
    color: #3c763d;
    font-size: 15px;
    font-weight: bold;
}

.count {
    font-weight: bold;
    font-size: 15px;
    line-height: 28px;
}

.bgPale {
    background-color: #fafafa;
}

.quickSearchTextBoxContainer {
    height: 35px;
    border: 0;
    padding: 0;
}

.actionBarIcon {
    cursor: pointer;
}

.clientTile {
    float: left;
}

/* forces cards not to jumble on card-grids with logos i.e. ClientList*/
.cardMinHeight210px {
    min-height: 210px;
}

/*
    When a button group is next to a button group, add some margin to spread them out.
*/
.btn-group-vertical:has(+ .btn-group-vertical) {
    margin-bottom: 1rem;
}


    @media screen and (max-width: 768px) {
    .compactSearch {
        display: none;
    }
}

/* fixes button align right wrapping issue */
.riSingle {
    flex: 1;
}

.formfieldicon.pull-right, 
.formfieldicon.pull-left {
    line-height: 25px;
}

.mw-200 {
    min-width: 200px;
}

/* top right menu option submenu */
#userSubMenu {
    display: none;
    z-index: 2147483638 !important; /* this absolutely has to be on top of everything else on the page */
    position: absolute;
    top: 56px;
    right: 15px;
    background-color: #e4e4e4;
    color: #222;
}

    #userSubMenu a:hover {
        text-decoration: none;
    }

    #userSubMenu div {
        background-color: #1b96d2;
        opacity: 0.8;
        -moz-opacity: 0.8;
        width: 200px;
        font-size: 12px;
        white-space: nowrap;
    }

    #userSubMenu li {
        width: 100%;
        height: 35px;
        border-bottom: 1px solid #87cefa;
        padding: 3px 0 0 15px;
        list-style: none;
        line-height: 30px;
        font-size: 13px;
        color: #f2f2f2;
    }

        #userSubMenu li:hover {
            opacity: 0.5;
            -moz-opacity: 0.5;
            text-decoration: none;
        }

        #userSubMenu li i {
            font-size: 18px;
            padding: 0 10px 0 0;
            color: #f2f2f2;
        }

.RadComboBoxDropDown .rcbList > li:hover {
    background-color: #e7e7e7;
    cursor: pointer;
}

.cboOption.LabelLine1 {
    font-weight: bold;
    display: block;
    width: 100%;
}

.cboOption.LabelLine2 {
    font-weight: normal;
    display: block;
    width: 100%;
    font-size: 12px;
}

.k-button {
    font-style: normal;
}

.card .overlay {
    margin-top: 52px;
}

    .card .overlay .row {
        padding-left: 20px;
        padding-right: 5px;
    }

.transparent {
    background: transparent;
    border: 0;
}

.isActive.True {
    color: green;
}

.isActive.False {
    color: red;
}

.iconBlue {
    color: #337ab7;
}

.float-center {
    margin: 0 auto;
}

.upload-button {
    border-radius: 0 3px 3px 0;
}

.spnlGridLabel {
    font-size: 1.2em;
    padding-bottom: 15px;
    font-weight: bold;
}

.photoButtonContainer {
    float: left;
}

.pnlButtonContainerPadding {
    clear: both;
    padding: 15px 0 7px 0;
}

@media screen and (max-width: 992px) {
    .photoButtonContainer {
        overflow: hidden;
        white-space: nowrap;
        width: 100%;
        padding: 10px 0 0 21px;
    }
}

.exportModalFileSizeText {
    font-size: 11px;
    color: #444;
    display: block;
    margin: 0 auto;
    line-height: 13px;
    width: 100%;
    text-align: center;
}

/* stop the icons wrapping on an an actions menu */
.providerPortal .btn-group-vertical > .btn,
.providerPortal .btn-group-vertical > .btn-group {
    white-space: nowrap;
}

/*
    For instances where we want a button to be a center piece (such as the main focal point of the page i.e. on the download modal) use this class.
*/
.providerPortal .largeButton {
    padding: 10px;
    background-color: transparent;
    border: none;
}

/*
    Give the span a width else it doesn't appear to have a size (maybe with how font awesome is applied. If we don't do this it doesn't center correctly.
*/
    .providerPortal .largeButton span {
        width: 60px;
    }

    /*
        We want the icon to be font awesome and colour to be the primary blue used throughout the site.
    */
        .providerPortal .largeButton span::before {
            font: 50px "Font Awesome 6 Pro" !important;
            color: #007bff
        }

/*
    When we inject a font awesome icon into the timeline card, add a bit of padding to bring in line with the title and also space it out.
*/
.providerPortal .k-card-title .fas {
    padding-top: 6px;
    padding-right: 10px;
}

/*
    As part of the migration from BS4 to BS5 the floats changed due to RTL support. Rather than changing loads of files, this is temp just incase we need to roll back.
*/
.float-right {
    float: right !important;
}

/*
    As part of the migration from BS4 to BS5 the floats changed due to RTL support. Rather than changing loads of files, this is temp just incase we need to roll back.
*/
.float-left {
    float: left !important;
}

/*
    As part of the migration from BS4 to BS5 gutters were reworked. We only use the defaults or no gutters (renamed to g-0), this is temp just incase we need to roll back.
*/
.no-gutters {
    --bs-gutter-y: 0;
    --bs-gutter-x: 0;
}

/*

*/
.providerPortal .RadGrid .rgDragCol a {
    text-decoration: none;
}

/*
    Flex and align so text is inline with buttons etc.
*/
.providerPortal .card-header {
    display: flex;
    align-items: center;
}

    /* 
        Increase the size of text for a title and also ensure it takes all the available space (pushing any buttons to the end).
    */
    .providerPortal .card-header .title {
        font-size: 18px;
        flex: 1 1 0;
    }

/*
    Buttons by default (in the header) are way to big. Shrink font and padding so they're inline with the header.
*/
.providerPortal .card-header button {
    font-size: 14px;
    padding-top: 4px;
    padding-bottom: 4px;
}