/* ==== TELERIK CLASS OVERRIDES ==== *
 *  Place all telerik css overrides  *
 *   here for future management      *
 *  ================================ */

/* Override rad input text boxes to make sure they are responsive. Don't apply when we're flexing as it then pushes whatever we're flexing towards to the next line. */
/* Only do this in form fields, so it doesn't break filtering in grids (reporting framework). */
.formfieldclient .riSingle,
.formfieldclient > div > span.RadInput:not(.flex-grow-1),
.formfieldclient > div > div.RadInput:not(.flex-grow-1),
.formfieldclient > div > div > span.RadInput:not(.flex-grow-1),
.formfieldclient > div > div:not(.input-group) > div.RadInput:not(.flex-grow-1) {
    width: 100% !important;
}

/* 
    Bring the RadTextbox inline with the RadCombobox in regards to styling when disabled.    
*/
.providerPortal span.RadInputDisabled {
    opacity: 0.5;
}

/* Apply where a clear button is needed */
.rbClearButton {
    position: relative;
    background-color: transparent !important;
    border: none !important;
    color: #333 !important; /* optional, depending on the background */
}

/* Bootstrap caption conflicting with telerik caption element */
.rgCommandTable caption {
    padding: 0;
}

/* Bootstrap caption conflicting with telerik caption element */
.RadCalendar caption {
    display: none;
}

/* Improve rad tooltip styling */
.RadToolTip_Bootstrap {
    padding: 0 !important;
    margin-bottom: 20px !important;
    border: 1px solid transparent !important;
    border-radius: 4px !important;
}

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

    /*  Hide filter row in mobile view. Sacrificing filter functionality to do this 
        but it looks much better than the RenderMode=Auto alternative */
    .rgFilterRow {
        display: none !important;
    }
}

/*  Make the rad grid filter boxes expand to the full width of the column they are contained in */
.rgFilterBox {
    width: 100%;
}

/*  Now all buttons should be telerik and we are disabling the built in style sheets the icon
    spacing does not work for the telerik embedded icons.
    These overrides add margins to the icons to seperate them from the button text*/
.RadButton .rbText.rbSecondary {
    margin-right: 5px;
}

/* 
    Set the default padding for the icon when there is text to the right.
*/
.RadButton .rbPrimaryIcon {
    margin-right: 5px;
}

/*
    For the toggle buttons increase the space between toggle and text just to make it look better.
*/
.providerPortal .RadButton .rbPrimaryIcon.fa-toggle-on,
.providerPortal .RadButton .rbPrimaryIcon.fa-toggle-off {
    margin-right: 10px;
}

/*
    Add padding to the right of the icon so everything is spaced correctly.
*/
.providerPortal .RadButton .rbIcon.rbPrimaryIcon {
    margin-right: 10px;
}

/*
    Add padding to the left of the icon so everything is spaced correctly (spacing between the text and secondary icon is pretty small by default).
*/
.providerPortal .RadButton:not(.iconOnly) .rbIcon.rbSecondaryIcon {
    margin-left: 10px;
}

/*  When we're using font awesome as a secondary icon, give consistent padding between the icon and the end of the text
    by making the icons the same width. */
.RadButton span.rbSecondaryIcon.fa,
.RadButton span.rbSecondaryIcon.fas,
.RadButton span.rbSecondaryIcon.far,
.RadButton span.rbSecondaryIcon.fab {
    width: 20px;
}

/*  When a radbutton is set to have a splitter, the text needs more spacing to the right */
.RadButton.splitButton .rbText {
    margin-right: 10px;
}

/*  When a radcontextmenu is used with bootstrap, the background doesn't transition (slide) out like the inner menu. Hide the background and border.*/
.RadMenu_Bootstrap_Context.splitButton {
    border: none;
    background-color: transparent;
}

/*  When you need to implement your own styling of a rad panel bar there is no property to set the class of the ul which has a list style applied to it
    The below implements list-unstyled for this class */
.unstyledRadPanelBar .rpRootGroup {
    padding-left: 0;
    list-style: none;
}

/*  Sets a rad wizard step in the navigation bar to hidden if it has this class. There is no programatic way to hide a step */
.rwzDisabled {
    display: none !important;
}

/*  TODO - Remove after next Telerik update and test: Tom is contacting Telerik regarding the irregular padding seen in the radgrid cells  */
.RadGrid_Bootstrap .rgRow > td,
.RadGrid_Bootstrap .rgAltRow > td {
    padding: 9px 7px !important;
}

/*  Not really an override but a tweak to help identify grouped columns  */
.radGridGroupHeader {
    background-color: #83A3C5 !important;
    color: #fff !important;
}

/* 
    Stops the items being indented when you hover over them. This was causing issues with the report builder where
    we've got templates with a lot of text and it would flicker between one and two lines.    
*/
.providerPortal .RadComboBoxDropDown .rcbHovered {
    padding-left: 12px;
}

/*
    When you've just got a checkbox within a form field client, the alignment is off (vertically) - which is very
    apparent when you've got an icon displaying.  
*/
div.formfieldclient .control-content button.RadCheckBox {
    padding-top: 9px;
    padding-bottom: 1px;
}

/*
    When you've just got a rad button that is within a form field client, the alignment is off (vertically) - which is very
    apparent when you've got an icon displaying. This selector covers rad button as a toggle checkbox.
*/
div.formfieldclient .control-content .RadButton.rbLinkButton.btn {
    padding-top: 5px;
}

/*
    When you've just got a some text within a form field client, the alignment is off (vertically) - which is very
    apparent when you've got an icon displaying. This resolves issues with spans. Need to exclude .RadInputs as
    when telerik input controls have empty messages, so render as a span with an inner input.
*/
div.formfieldclient .control-content > div > span:not(.RadInput) {
    padding-top: 7px;
    display: block;
}

/*
    When you've just got a link within a form field client, the alignment is off (vertically) - which is very
    apparent when you've got an icon displaying.  
*/
div.formfieldclient .control-content > div > a {
    padding-top: 8px;
    display: block;
}

/*
    Not sure why, but on the rad grid filtering (reporting framework), when you've got a text box it only
    puts a radius on the left hand site of the boxes. The below resolves that.    
*/
.providerPortal .RadGrid_Bootstrap .rgFilterBox {
    border-radius: 4px;
}

.RadWizard .rwzContent {
    overflow: auto;
}

/*
    Not sure why but when we've got a combobox within a grid (edit form), there is a border within the combobox. The below
    fixes this issue.    
*/
.providerPortal .RadGrid .RadComboBox input {
    border-style: none !important;
}

/*
    When we have a svg in a grid it's going to be blue. When the user selects a row it also goes blue, so this ensures the icon is still visible.
*/
.providerPortal .rgSelectedRow svg {
    color: #ffffff;
}

/*
    The position of the drag icon was slightly off - so removing the padding resolves this.    
*/
.providerPortal .RadGrid .rgDragIcon {
    padding: 0;
}

.RadAjaxPanel {
    width: 100% !important;
}

.RadGrid .rgPagerCell {
    border: 0 !important;
}

.RadWindow_Bootstrap .rwTitleBar {
    min-height: 40px !important;
}

.radGridGroupHeader {
    background-color: #5bc0de !important;
}

.rbDisabled {
    opacity: 0.5;
    color: gray;
}

    .rbDisabled:hover {
        opacity: 0.7;
        color: #eee;
        cursor: not-allowed;
    }

/*
    The grid itself has a border, and the first header has a border, so there is a double border on the first header cell which looks weird.    
    Do first child on both, so that we don't remove borders from column groups. Be careful making any changes - you've got situations where
    there is the normal header, multi coliumn header, and when the header is after the command row.
*/
.providerPortal .RadGrid > table > thead > tr:first-child > th:first-child,
.providerPortal .RadGrid > table > thead > tr.rgCommandRow + tr > th:first-child {
    border-left-style: none;
}

/*
    For whatever reason, the button is smaller than the input box, so this makes them the same height. Also joins the button onto the textbox
    to make it look like an input group. Don't apply to the ruRemove class as this is the text / hyperlink to remove an uploaded file.
*/
.providerPortal .RadAsyncUpload button {
    height: 24px;
    border-radius: 0.25rem;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    margin-left: 0;
}

/*
    Joins the button onto the textbox to make it look like an input group. 
*/
.providerPortal .RadAsyncUpload span.ruFakeInput {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    flex: 1;
}

/*
    The RadAsyncUpload control has two states - uploading and listing uploaded files. The structure is different - the former is in one child
    element the latter is in two (remove button outside). This is the outer parent of the list - add a margin to bring the text in line with form field labels.
*/
.providerPortal .RadAsyncUpload .ruInputs {
    margin-top: calc(0.375rem + 1px);
}

/*
    The RadAsyncUpload control has two states - uploading and listing uploaded files. The structure is different - the former is in one child
    element the latter is in two (remove button outside). To allow us to flex both scenarios we need to flex the parent.
*/
.providerPortal .RadAsyncUpload .ruInputs > li {
    display: flex;
    align-items: center;
}

/*
    The radgrid rows have the border defined at the bottom, but so does the grid (div) itself. If you have paging enabled but have a page size greater
    than the rows, you get effectively a double border. This removes the border from the last row... but only if the head and body are next to each other.
    If they aren't then the pager is there (tfoot), so we WANT to keep the last border, as the pager doesn't have one at the top.    
    Make sure its applied just to children, as if you open this up too much, if you have a combobox within a grid it will lose its style as they are implemented
    as tables.
*/
.providerPortal .RadGrid > table > thead + tbody > tr:last-child > td {
    border-bottom-style: none;
}

/*
    We only use the tabstrip with the multipage and have a base line on that so if we don't have the below there are instances of double borders
    for example on the job details page (task list tabs).    
*/
.providerPortal div.RadTabStrip ul.rtsUL {
    border-bottom-style: none;
}

/*
    The inbuild functions (edit / delete / collapse etc) are icons so we can bring them inline with our colour scheme.    
*/
.providerPortal .RadTreeList button .t-font-icon,
.providerPortal .RadGrid tbody button .t-font-icon,
.providerPortal .RadGrid td.rgDragCol .rgDragIcon {
    color: #337ab7;
}

/*
    Default colour of font awesome icons if they are in a grid. Makes it look better than just plain black but any status
    related icons (active / deleted etc) will still have a higher priority. Lock it down to the TD>A so that when we've
    got controls (like buttons) we're not messing with the colour of the icons.
*/
.providerPortal .RadGrid td > a.fa-solid,
.providerPortal .RadGrid td > a.fas {
    color: #337ab7
}

    /*
        Delete should always be red.
    */
    .providerPortal .RadGrid td > a.fas.fa-trash-alt {
        color: red
    }

/*
    Trying to bring the panel bar into sync with the bootstrap accordion, so removing the box shadow and getting the background colour to match:
    https://getbootstrap.com/docs/5.3/components/accordion/
    Box shadow set to important as you get selected / hovered / focused / clicked all interferring with different styles.
*/
.providerPortal .RadPanelBar_Bootstrap .rpRootLink.rpSelected,
.providerPortal .RadPanelBar_Bootstrap .rpRootLink.rpHovered,
.RadPanelBar_Bootstrap .rpLink.rpSelected,
.providerPortal .RadPanelBar_Bootstrap .rpRootLink {
    box-shadow: none !important;
    background: var(--bs-primary-bg-subtle);
}

/*
    The panel bars have a separator by default, so it makes them look like they're not part of the same group (like the task lists). This brings them together.    
*/
.providerPortal .RadPanelBar ul.rpRootGroup {
    margin-bottom: 0;
}

/*
    The default, for the bootstrap skin is to have 4px padding top, 7px padding bottom. This makes them the same.    
*/
.providerPortal .RadGrid .rgFilterRow > td {
    padding-bottom: 4px;
}

/*
    The default colour for the delete icon is black. This makes it red. Also set it to display block so its vertically centered correctly. We set the colour to black
    as we're messing about with the filters we need to ensure the starting point is consistent.
*/
.providerPortal .RadGrid > table > tbody > tr > td > button > span.rgDelIcon,
.providerPortal .RadGrid > table > tbody > tr > td > input[title=Delete],
.providerPortal .RadGrid > table > tbody > tr > td > input[title=Remove],
.providerPortal .RadGrid > table > tbody > tr > td > input[title=Retire],
.providerPortal .RadGrid > table > tbody > tr > td > input[title=Cancel] {
    filter: invert(43%) sepia(41%) saturate(6888%) hue-rotate(332deg) brightness(86%) contrast(101%);
    display: block;
    color: #000000;
}

/*
    The default colour for the edit icon is black. This makes it blue.    
*/
.providerPortal .RadGrid > table > tbody > tr > td > input[title=Edit] {
    filter: invert(40%) sepia(85%) saturate(421%) hue-rotate(165deg) brightness(92%) contrast(90%);
}

/*
    Where the rad grid buttons are icons, replace with own font awesome icons (so we can have bigger differences between something not on and the delete icon - both crosses).    
*/
.providerPortal .RadGrid .t-font-icon.rgIcon.rgAddIcon:before,
.providerPortal .RadGrid .t-font-icon.rgIcon.rgRefreshIcon:before,
.providerPortal .RadGrid .t-font-icon.rgIcon.rgEditIcon:before,
.providerPortal .RadGrid .t-font-icon.rgIcon.rgDelIcon:before,
.providerPortal .RadGrid .t-font-icon.rgIcon.rgExpXLSIcon:before,
.providerPortal .RadGrid .t-font-icon.rgIcon.rgRefreshIcon:before {
    font-family: "Font Awesome 6 Pro";
    font-weight: 900;
}

/*
    Where the rad grid buttons are icons, replace with own font awesome icons (so we can have bigger differences between something not on and the delete icon - both crosses).    
*/
.providerPortal .RadGrid .t-font-icon.rgIcon.rgDelIcon:before {
    content: "\f2ed";
    color: red;
    padding-top: 3px;
}

/*
    Where the rad grid buttons are icons, replace with own font awesome icons (so we can have bigger differences between something not on and the delete icon - both crosses).    
*/
.providerPortal .RadGrid .t-font-icon.rgIcon.rgAddIcon:before {
    content: "\f067";
    color: #2e7d32;
}

/*
    Where the rad grid buttons are icons, replace with own font awesome icons (so we can have bigger differences between something not on and the delete icon - both crosses).    
*/
.providerPortal .RadGrid tr .t-font-icon.rgIcon.rgEditIcon:before {
    content: "\f044";
    color: #337ab7;
}

/*
    Where the rad grid buttons are icons, replace with own font awesome icons (so we can have bigger differences between something not on and the delete icon - both crosses).    
*/
.providerPortal .RadGrid .t-font-icon.rgIcon.rgExpXLSIcon:before {
    content: "\f1c3";
    color: #217346;
}

/*
    Where the rad grid buttons are icons, replace with own font awesome icons (so we can have bigger differences between something not on and the delete icon - both crosses).    
*/
.providerPortal .RadGrid .t-font-icon.rgIcon.rgRefreshIcon:before {
    content: "\f021";
    color: #337ab7;
}

/*
    When you hover over the rad async button it adds this extra class which makes the rad button grey / BS3 "primary" style. The below makes it BS4 primary style when hovered.
*/
.providerPortal input[type=button].ruBrowse.ruButtonHover {
    color: #fff;
    background-color: #0069d9;
    border-color: #0062cc;
    cursor: pointer;
}

/*
    On the async upload you can click on the file input to select a file, so give it a pointer to make this clear. Also the input control overlaps the button so if you don't only part of the button looks clickable.    
*/
.providerPortal input[type=file].ruFileInput {
    cursor: pointer;
}

/*
    By default the rad async upload control doesn't support dynamic width. You can set the width of the outer control but the controls inside can only be set by pixels
    and not percentages? Very strange. Anyways this will make the inner controls more responsive to the outer control set to percentage widths.
    Also needs to flex grow as we have a flex within a flex (due to different layouts when uploading vs listing uploaded files).
*/
.providerPortal .RadAsyncUpload span.ruFileWrap {
    display: flex;
    flex-grow: 1;
}

    /*
    By default the rad async upload control doesn't support dynamic width. You can set the width of the outer control but the controls inside can only be set by pixels
    and not percentages? Very strange. Anyways this will make the inner controls more responsive to the outer control set to percentage widths.
*/
    .providerPortal .RadAsyncUpload span.ruFileWrap input[type=text] {
        flex-grow: 1;
    }

/*
    By default the checkbox and text are pretty much on top of each other and not centrally aligned (horizontally with each other). This fixes that and makes it look more spacious.    
*/
.providerPortal .RadListBox .rlbGroup input[type=checkbox] {
    margin-right: 5px;
    margin-top: -2px;
}

/*
    By default a mixture of Telerik and Bootstrap, the items are too spaces apart. This brings them togther and makes them more central (vertically).
*/
.providerPortal .RadListBox .rlbItem,
.providerPortal .RadListBox .rlbCheckAllItems {
    padding-bottom: 0;
    padding-top: 6px;
}

/*
    In some instances (couldn't work out why as on one page there could be multiple comboboxes and they were a mixutre) there was a slight shadow being applied
    to the inside of the combobox. This made it look like there were two lines / borders at the top. This fixes it.    
*/
.providerPortal .RadComboBox_Bootstrap .rcbInputCell {
    box-shadow: none;
}

/*
    When you've got a combobox where you can enter text (filter) there is a border around the down arrow. When you can't there isn't which seems strange to me. This makes them consistent.    
*/
.providerPortal .RadComboBox_Bootstrap .rcbReadOnly .rcbArrowCell.rcbArrowCellRight {
    border-left-width: 1px;
}

/*
    Think this is a clash between actual bootstrap and the telerik bootstrap theme; the headers have double border so remove them from the telerik version.    
*/
.providerPortal .RadPanelBar.RadPanelBar_Bootstrap li.rpItem > a {
    border: none;
}

 /*
    Because of the border removal, we need to add them in at the top / bottom of the header (defaults to transparent colour).    
*/
.providerPortal .RadPanelBar.RadPanelBar_Bootstrap li.rpItem > a span.rpOut {
    border-top: 1px solid #dedede;
    border-bottom: 1px solid #dedede;
}

.providerPortal .RadPanelBar.RadPanelBar_Bootstrap li.rpItem.rpFirst > a span {
    border-top: none;
}


/*
    Trying to be clever - will see if this works. When we've got an input control (RadInput) that is in an input group but not the last child we want
    the inner textbox (remember most Telerik controls have a wrapper class) to "connect" to the div next to it (will be input-group-append). So this
    handles that if its not the last child. An example of this is in the NewTask custom action with the stock quantity and add button next to it.
*/
.providerPortal .input-group > .RadInput:not(:last-child) .riTextBox {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

/* 
    Bring the default checkboxes (when used in reporting etc) in line with our toggle buttons.
*/
.providerPortal button.RadButton .rbIcon.rbToggleCheckbox::before,
.providerPortal button.RadButton .rbIcon.rbToggleCheckboxChecked::before {
    font-family: "Font Awesome 6 Pro";
    font-weight: 900;
    content: "\f204";
    font-size: 1.33333em;
    line-height: .75em;
    vertical-align: -.0667em;
    color: #007bff;
}

/* 
    When checked make sure we've got the rigth font awesome icon.
*/
.providerPortal button.RadButton .rbIcon.p-i-checkbox-checked::before {
    content: "\f205";
}

/*
    When a checkbox is within a form field control the vertical alignment is slightly off. This brings it in line with the center of the first line of text of the label.
*/
.providerPortal .formfieldclient div button.RadCheckBox {
    padding-top: 7px;
}

/*
    When we have a combobox next to a button (input group) we want the toggle button to be flush against the appended button. Add this class (not coded for just a RadCombobox
    as some of our controls contain a RadCombobox but the hierarchy is different).
*/
.providerPortal .loadOnDemandComboBox.noRightRadius .RadComboBox .rcbArrowCell,
.providerPortal .loadOnDemandComboBox.noRightRadius .RadComboBox .rcbInner,
.providerPortal .noRightRadius.RadComboBox .rcbArrowCell,
.providerPortal .noRightRadius.RadComboBox .rcbInner {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

/*
    When we have a combobox next to a button (input group) we want the toggle button to be flush against the appended button. Add this class (not coded for just a RadCombobox
    as some of our controls contain a RadCombobox but the hierarchy is different).
*/
.providerPortal .loadOnDemandComboBox.noLeftRadius .RadComboBox .rcbArrowCell,
.providerPortal .loadOnDemandComboBox.noLeftRadius .RadComboBox .rcbInner,
.providerPortal .noLeftRadius.RadComboBox .rcbArrowCell,
.providerPortal .noLeftRadius.RadComboBox .rcbInner {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

/*
    When we have a textbox next to a combobox or button remove the left radius.
*/
.providerPortal .noLeftRadius.riTextBox {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

/*
    When we have a textbox next to a combobox or button remove the right radius.
*/
.providerPortal .noRightRadius.riTextBox {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

/*
    When we have a date/time picker next to a combobox or button remove the left radius.
*/
.providerPortal .RadPicker.noLeftRadius .riTextBox {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

/*
    When we have a date/time picker next to a combobox or button remove the right radius.
*/
.providerPortal .RadPicker.noRightRadius .riTextBox,
.providerPortal .RadPicker.noRightRadius .rcSelect {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

/*
    When we havea font awesome icon as a button, we don't want the button to be under lined like a number text hyperlink.    
*/
.providerPortal .RadGrid td > a.fas:hover {
    text-decoration: none;
}

/* 
    Not sure why but the number of items / pages text started to become left aligned. The follow resolves the issue pushing them to the right.
*/
.providerPortal .RadGrid .rgInfoPart {
    flex-grow: 1;
    text-align: right;
}

.providerPortal .RadGrid_Bootstrap .rgSelectedRow td {
    border-color: #dedede;
}

/* highlight row, setting the border color bc of the selected row border being transformed to white */
.providerPortal .RadGrid_Bootstrap .rgMasterTable .rgSelectedCell,
.providerPortal .RadGrid_Bootstrap .rgSelectedRow td,
.providerPortal .RadGrid_Bootstrap td.rgEditRow .rgSelectedRow,
.providerPortal .RadGrid_Bootstrap .rgSelectedRow td.rgSorted {
    color: #222 !important;
    background: #eee !important;
    border-color: #ccc;
}

/* Highlight color left indicator */
.providerPortal .RadGrid_Bootstrap .rgMasterTable tr.rgRow.rgSelectedRow > td:first-child:not(a),
.providerPortal .RadGrid_Bootstrap .rgMasterTable tr.rgAltRow.rgSelectedRow > td:first-child:not(a) {
    border-left: 6px solid #5bc0de;
}

/* to counter any movement caused by the highlight above ^ */
.providerPortal .RadGrid_Bootstrap .rgMasterTable tr.rgRow:not(.rgSelectedRow) > td:first-child:not(.rgDragCol),
.providerPortal .RadGrid_Bootstrap .rgMasterTable tr.rgAltRow:not(.rgSelectedRow) > td:first-child:not(.rgDragCol) {
    border-left: 6px solid transparent;
}

/* When there is an expanding column (drill down rows) the height of the clickable arrow is double the normal height of a row. The following brings it in line with a normal row. */
.providerPortal .RadGrid_Bootstrap .rgExpandCol > input.rgExpand {
    height: 16px;
    background-position-y: -169px;
}

/* Telerik default the plus icon in the command settings to top - as we've gone icon only, this makes it look out of place. Centre it. */
.providerPortal .RadGrid .t-font-icon.rgIcon.rgAddIcon {
    vertical-align: middle;
}

/* The delete button, when in font awesome mode, was left aligned (button column vs edit column outputs slightly differently). This centers the icon. */
.providerPortal .RadGrid td > button > span {
    margin: 0 auto;
}

/* When there is a combobox within a grid edit form, it gets double padding (from the td and the input). Remove the additional left padding so that comboboxes in and out the edit control look the same. */
.providerPortal .RadGrid .rgEditForm .RadComboBox table[summary="combobox"] > tbody > tr > td.rcbInputCell {
    padding-left: 0;
}

/* On the datasource page the padding of the rgEditForm was gone. This is temp - need to look into why. */
.providerPortal .RadGrid .rgEditForm {
    padding: 7px;
}

/* On a calendar popup, when you click the month to enable fast selection, the highlighted (blue) month and year has black text - make white. */
.providerPortal .RadCalendarMonthView_Bootstrap .rcSelected a {
    color: #ffffff;
}

/* 
    When we switched to "Auto" render mode, buttons within the grid were being squared off. This brings them back inline with bootstrap. 
    Don't round the inbuilt action buttons or the async upload button.
*/
.providerPortal .RadGrid button:not(.rcbActionButton):not(.rgActionButton):not(.upload-button) {
    border-radius: 0.25rem;
}

/* When we switched to "Auto" render mode, the buttons started reverting to Telerik WebComponent. This makes it standard. */
.providerPortal button.RadButton span.rbIcon {    
    font-family: "Font Awesome 6 Pro";
}

/*
    When we want the button to be a hyperlink, want to make it act like text rather than a button - so left aligned with no padding.
*/
.providerPortal .RadButton.btn-link {
    text-align: left; 
    padding-left: 0;
}

/*
    When we want the button to be a hyperlink, want to make it act like text rather than a button - so no margin on the internal text. Some properties from the "form-control-plaintext" class
    so that everything is lined up.
*/
.providerPortal .RadButton.btn-link .rbText {
    margin: 0;
    padding: 0.375rem 0;
}

/* So that icons used in toggle buttons are left aligned */
.providerPortal span.RadButton span.rbPrimaryIcon.iconLeft {
    text-align: left;
    width: 20px;
}
/* When you want to use a rad button within a grid, but only want to display the icon. Makes it as similar as possible with normal rad buttons in grid */
.providerPortal table td span.RadButton.iconOnly.btn.btn-link {
    text-align: center;
    margin: 0;
    padding: 0;
    border-width: 0;
}
/* When you want to use a rad button within a grid, but only want to display the icon. Hides the text element (has margin right) */
.providerPortal table td span.RadButton.iconOnly.btn.btn-link span.rbText {
    display: none;
    margin: 0;
}
/* When you want to use a rad button but only want to display the icon. Makes it as similar as possible with normal rad buttons in grid */
.providerPortal .RadButton.iconOnly.btn span.rbPrimaryIcon {
    margin: 0;
}
/* When you want to use a rad button but only want to display the icon. Hides the text element (has margin right)*/
.providerPortal .RadButton.iconOnly.btn span.rbText {
    display: none;
    margin: 0;
}
/* The telerik default background is white but we want it to be transparent for all wizard. */
.providerPortal .RadWizard {
    background-color: transparent;
}
/*
    In the calendar popup the day numbers were right aligned. Just looks a bit strange with single digits not aligned with the double digits of the later days of the month. 
*/
.providerPortal .RadCalendarPopup .rcRow td a {
    text-align: center;
}
/*
    In the calendar popup, the header row (M T W T F S S) wasn't aligned with te centered day numbers.
*/
.providerPortal .RadCalendarPopup .rcWeek th {
    text-align: center;
}
/*
    The "M" (first day of the week) isn't correctly aligned so add a bit of extra padding.
*/
.providerPortal .RadCalendarPopup .rcWeek th:nth-child(2) {
    padding-left: 10px;
}
/*
    Tab strip has a base line enabled so only rounding the bottom left and right corners of the tab content.
*/
.providerPortal .tab-content {
    background-color: rgb(255, 255, 255);
    padding: 5px;
    border: #ddd 1px solid;
    border-top: 0;
    border-radius: 0 0 4px 4px;
}
/*
    By default the wizard has full padding. Remove so we can be flush with the normal bootstrap grid system.
*/
.providerPortal .RadWizard .rwzHeader, .providerPortal .RadWizard .rwzContent, .providerPortal .RadWizard .rwzFooter {
    padding: 0;
}
/*
    By default the action button on the a combobox (the one containing the down arrow when a split button is being used) is white so you don't
    notice it has a radius. When you hover it gets a shadow - so this makes it noticable. Only remove the radius if the hierarchy has a no right 
    radius (typically inside an input group etc).
*/
.providerPortal .noRightRadius .rcbInner .rcbActionButton {
    border-radius: 0;
}
/*
    We inject the font awesome icon into the time line, but the default is the text gets pushed to the end because of the justify content. Adjust so they're next to each other.
    Important as the inbuilt style has a large number of selectors.
*/
.providerPortal .RadTimeline .k-card-title {
    justify-content: flex-start !important;
}
/*
    If we create an item template in the code behind for a checkbox enabled radcombobox, the checkbox is on its own line. The following brings the label inline with the checkbox.
*/
.providerPortal .inlineCheckBox li.rcbItem label {
    display: inline;
}
/*
    Give the picker a background colour that fits in with the rest of the colour scheme. Also pad slightly more to bring in line with radcombobox selection toggle.
*/
.providerPortal .RadPicker .rcSelect a {
    background-color: #007bff;
    color: #fff;
    padding-left: 7px;
    padding-right: 7px;
}
/*
    Update the font so it fits in line with the other buttons.
*/
.providerPortal .RadPicker .rcSelect a[class=rcCalPopup]::before {
        font: 16px "Font Awesome 6 Pro";
        content: "\f783";
    }
/*
    Update the font so it fits in line with the other buttons.
*/
.providerPortal .RadPicker .rcSelect a[class=rcTimePopup]::before {
    font: 16px "Font Awesome 6 Pro";
    content: "\f017";
}
/*
    Ensures that the split part of the button has enough space to display without the text behind "under" lapping.
*/
.providerPortal .RadButton .rbSplitPartRight + .rbText {
    padding: 0 1.78571429em 0 0;
}

/*
    Radcombobox when it's free text vs not - one has a divider on the toggle selection one doesn't. Bring them both inline.
    Increase the padding so the combobox buttons are same width as appended icon only buttons.
*/
.providerPortal .RadComboBox button.rcbActionButton {
    border-left-width: 1px;
    border-left-style: solid;
    padding-left: 7px;
    padding-right: 7px;
}

/* 
    The only exception to "make them all have toggles" is the radgrid / pager page size drop down as it's too small!
*/
.providerPortal .RadGrid tr.rgPager .RadComboBox button.rcbActionButton,
.providerPortal .RadDataPager .RadComboBox button.rcbActionButton {
    border: initial;
}

    /*
    Fix for a Telerik bug where you'd click on a combobox (where we'd "forced" the border) and it was coming through with a blue border.
*/
    .providerPortal .RadComboBox_Bootstrap .rcbFocused .rcbActionButton {
        border-color: #adadad;
    }

    /*
    Add a border to the outer most part of the panel. Makes it more Bootstrap.
*/
    .providerPortal .RadPanelBar {
    border-radius: 0.25rem;
}

    /*
    Pad the item templates to be inline with the rest of the site.
*/
    .providerPortal .RadPanelBar .rpTemplate {
        padding: 15px;
    }

    /*
    Remove the padding from the photo uploader infobox to bring inline with the command bar.
*/
    .providerPortal .RadPanelBar .taskFileUploader .InfoBox {
        margin-top: 0;
    }

/*
    The default arrow is slightly off - when you hover over. So fix and then adjust as it's too close to the edge of the header panel.
*/
.providerPortal .RadPanelBar_Bootstrap .rpRootLink .rpExpandHandle {
    padding: initial;
    border: none;
    right: 15px;
    top: 10px;
}

/*
    By default the "Page Size" in the rad data pager is flush against the previous / next paging. Add some padding.
*/
.providerPortal .RadDataPager .rdpPagerLabel {
    margin-left: 1rem;
}

/*
    When the chart is in a slide panel it doesn't display so boost it.
*/
.providerPortal .k-chart-tooltip {
    z-index: 100000 !important;
}

/*
    Ensure that regardless of icon, when we've got an icon only button it's a minimum width to bring them in line with combobox dropdown toggle buttons etc.
*/
.providerPortal .btn.iconOnly {
    min-width: 35px;
}

/*
    Not sure why but the first column header doesn't have the same padding as the other columns? Set it to match.
*/
.providerPortal .RadTreeList tr.rtlHeader .rtlCF {
    padding-left: 13px;
}

/*
    Telerik was forcing a height of 1em, which on larger buttons (like downloads) it was causing misalignment as it was visibly out of the bounds. Setting this "normalises" the layout.
*/
.providerPortal .RadButton span.p-icon {
    height: inherit;
}

/*
    If we have a link in the grid and the row is selected, but default the link goes white which in bootstrap mode is a bit
    awkward to see.
*/
.providerPortal .RadGrid_Bootstrap .rgSelectedCell a,
.providerPortal .RadGrid_Bootstrap .rgSelectedRow a {
    color: var(--bs-link-color);
}