/*
    When in mobile mode the padding around the header and h1 tags are
    too extream, so remove them (the surrounding "row" divs provide
    sufficient gaps between the elements).
*/
@media (max-width: 768px) {
    .providerPortal .page-header h1 {
        margin-top: 0;
    }
}

/*
    Modify the default breadcrumb look and feel - align to the right and 
    centralise with the H1 page title.    
*/
.providerPortal .breadcrumb {
    padding: 0;
    background: white;
    width: 100%;
    padding-right: 0;
}

/*
    When we are in mobile mode, we condense the breadcrumb menu and left align instead of right.
*/
@media (max-width: 768px) {
    .providerPortal .breadcrumb {
        margin-top: 0;
        margin-bottom: 0;
        padding-left: 0;
        padding-right: 0;
        float: left !important;
    }
}

/*
    Highlight the last entry in the breadcrumb list.    
*/
.providerPortal ol.breadcrumb li:last-child a {
    font-weight: 700;
    color: grey;
}

/*
    The warning button by default has black text which when part of a button group is jarring, so this brings it in line with the other buttons.    
*/
.providerPortal .btn-warning {
    color: #fff;
}

    /*
        The warning button by default has black text which when part of a button group is jarring, so this brings it in line with the other buttons.    
    */
    .providerPortal .btn-warning:hover {
        color: #fff;
    }

/*
    Make the text for the form element stand out from the rest of the site a bit more.    
*/
.providerPortal .col-form-label {
    font-weight: bold;
}

/*
    Default is flex, which means buttons are always pushed to the end (flex-mode: end). This means we can control the layout with floats.
*/
.providerPortal .modal-footer {
    display: block;
}

/*
    Default navbar has padding which pushes everything out of alignment - we handle the padding / margin of elements inside. Other settings just to tweak to content / colour scheme.
*/
.providerPortal .navbar {
    padding: 0;
    background-color: #1B96D2;
    color: #ffffff;
}

/* to fix missing class in Bootstrap 4 */
@media screen and (max-width: 576px) {
    .hidden-xs {
        display: none !important;
    }
}

/* 
    Bring the badge to the top right of the buttons and make sure they're coloured as per our scheme (used in a few places - dataviewcontainer, multiselecttextbox etc). 
    Badges are also used in grids so we need to not impact these as they should be rendered in their normal positions.
*/
.providerPortal .dataViewContainer .quickSearch .badge,
.providerPortal .multiSelectTextBox .badge,
.providerPortal .btn .badge {
    z-index: 2; 
}

/*
    When we've got a button next to a form control and join them as an input group, if we don't override the .btn line height
    the buttons "hang down" with more height than the joined input control. Typically these just have icons so in this situation adjust the line height.
*/
.providerPortal .input-group .btn.iconOnly {
    line-height: 1rem;
}

/*
    The default button text is slightly bigger - approx 16px when it's worked out. This is slightly jarring as the clickable links
    are noticably bigger than the text they're next too. Make them the same size as normal fonts.
*/
.providerPortal .btn.btn-link {
    font-size: inherit;
}

/* 
    Using the default button size, the buttons come out at 38px which, when next to form fields causes issues as the form controls are 35px.
    Setting this line height back to initial causes them to come out the same size. Setting the font size to inherit ensures that when there
    is text in the button it is the same height as the form fields as well.
    Adjust the padding so that when the button is just an icon, it's the same width as rad date picker buttons and rad combobox toggles.
*/
.providerPortal .btn {
    font-size: inherit;
    padding-left: 9px;
    padding-right: 9px;
}

/*
    By default bootstrap just stops the button being clickable. This makes it more clear that it's not going to happen!
*/
    .providerPortal .btn.disabled {
        cursor: not-allowed;
    }

    /*
        BS4 to BS5 they started underlining anything with btn-link, which for the toggle buttons doesn't look great. Might need to look at a toggle class, but for now looks fine.
    */
    .providerPortal button.RadButton.btn-link {
        text-decoration: none;
    }

    /* 
        If we have font awesome icon directly in the grid thats clickable, don't underline it. Looks better and keeps inline with the build in buttons.
    */
.providerPortal .RadGrid tr.rgRow > td > a.fas,
.providerPortal .RadGrid tr.rgAltRow > td > a.fas {
    text-decoration: none;
}

/*
    SVG icon from the BS5 docs. This limits the size of the infobox icons
*/
.providerPortal .bi {
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
    fill: currentcolor;
}

/* 
    Default text with padding makes the label go to 38px rather than 34px (form control). Reduce the font size.
*/
.providerPortal .input-group-text {
    font-size: 0.75rem;
}

/*
    Need to revisit this, but for some reason even though this was being correctly applied to the body tag, it wasn't doing anything. Going to the BS website
    and testing - everything is ok with the CSS below applied.
*/
.providerPortal.modal-open {
    overflow: hidden !important;
}

/*
    When the bootstrap "popper" tooltip is in a slide panel it's not visible, so boost the zindex so it appears above everything.
*/
.providerPortal .tooltip {
    z-index: 100000000;
}