body {
    /* */
}

/*
    Styling the scrollbar - slimmer and more colour coordinated. Part of a number of settings that are all needed for the better visuals.
*/
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
    background-color: #F5F5F5;
}

/*
    Styling the scrollbar - slimmer and more colour coordinated. Part of a number of settings that are all needed for the better visuals.
*/
::-webkit-scrollbar-thumb {
    background-color: lightskyblue;
}

/*
    Styling the scrollbar - slimmer and more colour coordinated. Part of a number of settings that are all needed for the better visuals.
*/
::-webkit-scrollbar-track {
    box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    background-color: #F5F5F5;
}

/*
    There are times where you'll have a number of controls stacked with varying visibility, but you want the top one to have
    no margin or padding as that has been taken care in the container (slide panel for example). Put this class on the container.
    Originally tried to put this on the slide panel, but if the container has ajax, or using ajax manager proxy it becomes impossible.    
*/
.providerPortal .firstChildNoTopSpacing > * {
    padding-top: 0;
    margin-top: 0;
}

/*
    On the drop down options menu (data view container) the clickable items are too close together. Bring them in line with typical button spacing.
*/
.providerPortal ul.OptionsMenuPanel li {
    padding-left: 15px;
    padding-top: 5px;
    padding-bottom: 5px;
}

/*
    Modal windows have consistent padding inside the main content, so remove any margin from the first child.
*/
.providerPortal .modal-body .mainContent:first-child {
    margin-top: 0;
}

/*
    Style the overlay that sits over each gallery item showing whether there is a comment etc. Needs to consume as little space as possible!
*/
.providerPortal .galleryCollection .galleryItem .galleryOverlay {
    position: absolute;
    bottom: 10px;
    padding: 2px;
    background: white;
    border-radius: 0.5rem;
    color: var(--bs-primary);
    left: 10px;
    border: var(--bs-primary) 1px solid;
}

    /*
        Make it clear for deleted items - show the icon as red.
    */
    .providerPortal .galleryCollection .galleryItem .galleryOverlay .fa-eye-slash {
        color: var(--bs-danger);
    }

    /*
        Make it clear for undeleted items - show the icon as green.
    */
    .providerPortal .galleryCollection .galleryItem .galleryOverlay .fa-eye {
        color: var(--bs-success);
    }

    /*
        Make it clear for undeleted items - show the icon as green.
    */
    .providerPortal .galleryCollection .galleryItem .galleryOverlay .fa-eye {
        color: var(--bs-success);
    }

    /*
        Make it clear for items that have been uploaded from the gallery - show the icon as orange.
    */
    .providerPortal .galleryCollection .galleryItem .galleryOverlay .fa-images {
        color: var(--bs-warning);
    }

    /* 
        Only pad the first item to the left to push it away from the left hand border.
    */
    .providerPortal .galleryCollection .galleryItem .galleryOverlay span:first-child {
        padding-left: 5px;
    }

    /*
        Space the icons out a bit - give them a padding to the right.
    */
    .providerPortal .galleryCollection .galleryItem .galleryOverlay i {
        padding-right: 5px;
    }

/*
    When migrating from BS4 to BS5, the form buffer between each item was removed. This puts it back in (equal to mb-2).
*/
.providerPortal .form-horizontal .formfieldclient {
    margin-bottom: 0.5rem;
}

/*
    If we have a clickable badge in the radgrid, don't underline it (bring it inline with other clickable items in the grid).
*/
.providerPortal .RadGrid td a.badge {
    text-decoration: none;
}

/*
    The build in Telerik column buttons (edit / delete etc) are 16px so this brings them in line. They also have more padding than
    normal columns, so adjust our font awesome icons (buttons) so they have the same dimensions (45px overall).
    Target "spans" (where we're using a template column with the purpose of just showing an icon) or "a" (GridButtonColumn) only so we don't impact where we're placing
    icons in more complicated / specific scenarios, such as the booking wizard.
*/
.providerPortal .RadGrid td > span.fas,
.providerPortal .RadGrid td > span.fa-solid,
.providerPortal .RadGrid td > a.fas,
.providerPortal .RadGrid td > a.fa-solid {
    font-size: 16px;
    padding: 7px;
}

/*
    Set a minimum width - this is ideal for dates and times.
*/
.providerPortal .min-width-126 {
    min-width: 126px;
}

/*
    Set a minimum width - this is ideal for free text fields that are used for names.
*/
.providerPortal .min-width-150 {
    min-width: 150px;
}


.providerPortal .middle-truncate {
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}