/*
 * NextPatient Widget Stylesheet
 */
@media(max-width: 980px){
  	
  	/* Styling for the single widget area */
    #nextpatient-widget .nextpatient-provider{
        border: none;
    }
  	#nextpatient-widget .nextpatient-provider-provider-cell{
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
    }
  
  	/* Hide some elements like more info & date */
    #nextpatient-widget .nextpatient-provider-blurb,
  	#nextpatient-widget .nextpatient-slot-time-day{
        display: none;
    }
  
  	/* Custom styling for doc's name */
    #nextpatient-widget .nextpatient-provider-name{
      	margin-top: 3vw;
        color: #1b1172;
        font-family: 'Acumin Pro - Bold',Helvetica,Arial,Lucida,sans-serif;
        margin-bottom: 10px;
    }
  	
  	/* Custom styling for doc's rating */
    #nextpatient-widget .pink-star-rating{
      font-size: 20px;
      color: #ff6372;
    }
  
    /* Custom styling for doc's photo */
    #nextpatient-widget .nextpatient-provider-image-cell{
        width: 150px !important;
        height: 150px !important;
        clip-path: circle(70px at 50% 50%) !important;
        background-position-y: 0px !important;
    }

    /* Custom styling for time slots */
    #nextpatient-widget .nextpatient-provider-times{
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap;
    }
    #nextpatient-widget .nextpatient-provider-table .nextpatient-slot-time-time,
    #nextpatient-widget .nextpatient-slot-time-more {
        font-size: 14px;
        line-height: 16px;
    }
    #nextpatient-widget .nextpatient-slot-time{
        border: none;
        height: 30px;
        width: 75px !important;
        background-image: none;
        background-color: #fff04b;
    }
}
  
/* Custom styling for smaller devices */
@media(max-width: 500px){
    #nextpatient-widget .nextpatient-provider-name-block-left{
        width: 100px !important;
    }
    #nextpatient-widget .nextpatient-provider-small-photo {
        height: 100px;
        width: 100px;
        background-size: cover;
        clip-path: circle(40px at 45px 40px) !important;
        background-position-y: 0px !important;
    }
}