﻿

/*#region Accepting Patients*/

.accepting-patients-banner {
    position: absolute;
    bottom: 0;
    left: 50%;
    right: 0;
    width: 110%;
    height: 20%;
    transform: translateX(-50%);
    overflow: visible !important;
}

.accepting-patients-banner-no-avatar {
    position: absolute;
    z-index: 1;
    bottom: 0;
    left: 50%;
    right: 0;
    height: 17%;
    transform: translateX(-50%);
    overflow: visible !important;
}

/*#endregion*/

/*#region Video Play Button*/
.video-badge-button {
    white-space: normal !important;
    padding: 0;
    position: absolute;
    top: -5px;
    left: 0;
    min-height: 40px;
    min-width: 40px;
    height: 25%;
    width: 25%;
    z-index: 5;
}

    .video-badge-button svg {
        overflow: visible;
    }

.circle-avatar.Large .video-play-button-circle {
    stroke-width: 2px;
}

.circle-avatar.Medium .video-play-button-circle {
    stroke-width: 3px;
}

.circle-avatar.Small .video-play-button-circle {
    stroke-width: 4px;
}

.circle-avatar.Small .video-badge-button {
    min-height: 30px;
    min-width: 30px;
}

.auto-background:nth-child(even) .video-play-button-circle,
.blue-background .video-play-button-circle {
    stroke: #f3f3f3 !important;
}

.auto-background:nth-child(odd) .video-play-button-circle {
    stroke: #ffffff !important;
}

.auto-background:nth-child(even) .card-heavy-shadow .video-play-button-circle,
.auto-background:nth-child(even) .card-light-shadow .video-play-button-circle {
    stroke: #ffffff !important;
}

.auto-background:nth-child(odd) .card-heavy-shadow .video-play-button-circle,
.auto-background:nth-child(odd) .card-light-shadow .video-play-button-circle {
    stroke: #f3f3f3 !important;
}


/*#endregion*/

/*#region Circle Avatar*/
.avatar-click-zone {
    z-index: 0;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.circle-avatar {
    border-radius: 100%;
    margin: 0 auto;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    z-index: 1;
}

    .circle-avatar.Large,
    .circle-avatar.Large ~ .icon-loading-background {
        height: 250px;
        width: 250px;
    }

    .circle-avatar.Medium,
    .circle-avatar.Medium ~ .icon-loading-background {
        height: 125px;
        width: 125px;
    }

    .circle-avatar.Medium
    {
        margin-bottom: 15px;
    }

    .circle-avatar.Small,
    .circle-avatar.Small ~ .icon-loading-background {
        height: 75px;
        width: 75px;
    }

    .circle-avatar.White{
        border: 3px solid #ffffff;
    }

    .circle-avatar.Blue {
        border: 3px solid #005792;
    }

    .circle-avatar.LightBlue {
        border: 3px solid #00add7;
    }


    /*#endregion*/

    /*Executive Avatars*/
.exec-avatar-click-zone {
    z-index: 0;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.exec-avatar {
    margin: 0 auto;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    z-index: 1;
    margin-bottom: 15px;
}

    .exec-avatar.Large,
    .exec-avatar.Large ~ .exec-icon-loading-background {
        height: 300px;
        width: 250px;
    }

    .exec-avatar.Medium,
    .exec-avatar.Medium ~ .exec-icon-loading-background {
        height: 225px;
        width: 175px;
    }

    .exec-avatar.Medium {
        margin-bottom: 15px;
    }

.exec-avatar.Small,
.exec-avatar.Small ~ .exec-icon-loading-background {
    height: 125px;
    width: 75px;
}

    .avatar.White {
        border: 3px solid #ffffff;
    }

    .avatar.Blue {
        border: 3px solid #005792;
    }

    .exec-avatar.LightBlue {
        border: 3px solid #00add7;
    }

    .exec-icon-loading-background {
        height: 100%;
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        margin: 0 auto;
        z-index: 0;
    }


/*End Executive Avatars*/

    .icon-loading-background {
        border-radius: 100%;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        margin: 0 auto;
        z-index: 0;
    }

.auto-background:nth-child(even) .icon-loading-background,
.auto-background:nth-child(even) .circle-avatar-no-image,
.blue-background .icon-loading-background, .exec-avatar-no-image {
    background-color: #ffffff;
}

.auto-background:nth-child(odd) .icon-loading-background,
.auto-background:nth-child(odd) .circle-avatar-no-image, .exec-avatar-no-image {
    background-color: #f3f3f3;
}

.practice-container {
    margin-top: 20px;
    text-align: center;
    position: relative;
}

    .practice-container > .circle-avatar {
        transition: all .2s ease-in-out;
    }

    .practice-container:hover .circle-avatar {
        box-shadow: 0 37px 70px -12px rgba(0,0,0,0.3);
    }

.circle-avatar.practice {
    display: block;
    border-color: #ffffff;
    border-width: 3px;
    border-style: solid;
}

.featured-doctor-container {
    width: 100%;
    display: flex;
}

.avatar-container-modal {
    position: relative;
}

.featured-doctor-parent-container
{
    margin-bottom: 30px;
}

@media (max-width:767px) {
    .featured-doctor-parent-container {
        width: 87%;
        margin-right: 10px;
        background-color: #fff;
        border-radius: 10px;
        padding: 10px;
        margin-bottom: 0px !important;
        box-shadow: none !important;
        scroll-snap-align: center;
        vertical-align: middle;
        float: none !important;
        position: relative;
        display: inline-block;
    }


        .featured-doctor-parent-container:first-child {
            margin-left: 15px;
        }

        .featured-doctor-parent-container:last-child {
            margin-right: 15px;
        }

    .featured-doctor-name {
        white-space: initial;
    }


    .location-avatar-parent {
        margin-right: 15px;
    }

    .location-name {
        margin-top: 0px;
    }

    .location-avatar-container {
        display: flex;
        text-align: left !important;
        padding: 15px 15px 50px 15px !important;
        align-items: center;
    }

        .location-avatar-container:last-child {
            padding: 15px !important;
        }
}

@media (max-width:320px) {

    .circle-avatar,
    .icon-loading-background {
        height: 115px;
        width: 115px;
    }
}
