.visits-page-head { display: flex; justify-content: space-between; align-items: center;}
.visits-page-head .visits-title { color: #E35205; font-weight: 700; line-height: 125%; font-family: 'GT-Walsheim-Bold', 'Poppins', sans-serif;}
.visits-page-head .go-to-dashboard {padding: 12px; display: flex; align-items: center; cursor: pointer; justify-content: space-between; gap: 8px; min-width: 300px; min-height: 48px;}
.visits-page-content .go-to-dashboard::before { border-width: 4px !important; border-color: #F8D4C0 !important;}
.visits-page-head .go-to-dashboard:hover{text-decoration:none !important;}
.visits-page-head .go-to-dashboard:hover::before { border-color: #E35205 !important;}
.visits-page-head .sec-title-content { flex-direction: row; align-items: center;}
.visits-page-content .go-to-dashboard .sec-text { color: #BF4200; font-weight: 700; line-height: 1.5;}
.visits-appointment-lists{margin-top:10px;}
.timeline-date{width:64px; height:64px;flex: 0 0 64px; padding: 6px 0px;  display: flex; flex-direction: column; justify-content: center; align-items: center; border-radius: 16px; background-color: #F8D4C0; color: #BF4200;}
.timeline-date > span:first-of-type {color: #BF4200; font-weight: 700; font-size: 0.875rem;line-height: 100%;}
.timeline-date > span:nth-of-type(2) { font-family: 'GT-Walsheim-Bold', 'Poppins', sans-serif;color: #BF4200; font-weight: 700; font-size: 1.5rem;line-height: 100%;}
.timeline-date > span:last-of-type {font-weight: 500;font-size: 0.75rem;line-height: 100%;letter-spacing: 0.6px;}
.timeline-appointment-card{display: flex;min-height: 64px;padding: 12px 8px 12px 12px;gap: 12px;align-self: stretch;margin-bottom: 12px;cursor: pointer;}
.timeline-appointment-card:last-child{margin-bottom:0;}
.visit-card-left{display: flex; flex-direction: column; gap:12px;}
.timeline-item{display: flex;gap:8px;}
.visit-appnt-pet-info{display: flex;gap:5px;}
.visit-appnt-pet-image{height:32px;flex:0 0 32px;width:32px;border-radius: 8px;}
.visit-appnt-pet-details{padding-left: 8px;}
.visit-appnt-pet-name{font-weight: 600;line-height: 100%;text-overflow: ellipsis;}
.visit-appnt-time{font-weight: 500;line-height: 100%; margin-top:5px;}
.visit-appnt-info{display: flex;gap:12px;align-items: flex-end; padding-bottom: 7px;}/* align-items: center; */
.visit-appnt-reason{font-size: 0.938rem;font-weight: 700;line-height: 16px;color:#333436; text-box-trim: trim-end; text-box-edge: text alphabetic;}
.visit-appnt-loc{font-weight: 500;line-height: 16px;text-box-trim: trim-end; text-box-edge: text alphabetic;}
.visit-appnt-type{font-size: 0.938rem;font-weight: 600;line-height: 125%;display: flex; align-items: center; gap: 5px;text-box-trim: trim-end; text-box-edge: text alphabetic; display: inline; font-weight: 500;}
.visit-appnt-type img {
    position: relative;
    top: -1px;
}
.visit-type {
    font-weight: 500;
}
.visit-appnt-pet-info {
    position: relative;
}
.visit-appnt-pet-info:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 40px;
    width: 40px;
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, 0.075);
}
.timeline-appointment-card .appointment-action a{display: inline-flex;gap:8px;flex-shrink: 0;}
.timeline { position: relative; margin-left:32px;  padding-left: 42px; border-left: 2px solid #F26322; /* The vertical line */}
.timeline::after {content: ""; position: absolute; bottom: -8px; left: 0; width: 10px; height: 10px; background: #F26322; clip-path: polygon(0 0, 100% 0, 50% 100%); transform: translateX(-52%);}
.timeline-item { position: relative; margin-bottom: 12px;}
.timeline-date { position: absolute; left: -74px; top: 0;}
.timeline-content { position: relative;width:100%}
.visits-section{display: flex; gap:20px;margin-top:20px;}
.visits-suggestion-section{flex: 0 0 33%; max-width:440px; min-width:335px;}
.visits-appointment-section{flex:1 0 0;}
.visits-suggestion-lists { display: flex; gap: 12px; flex-direction: column;margin-top:10px;}
.visits-suggestion-lists .pet-item-image {width: 64px; height: 64px; position: relative; flex: 0 0 64px;}
.timeline-appointment-card .orange-right-arrow-icon{margin-left: auto;}
.visit-note{font-weight: 400;line-height: 125%;font-size:0.813rem; min-height: 32px; display: flex; align-items: center;}
.timeline-appointment-card .appointment-action{display: flex;gap:12px;align-items: center;}
.visits-upcoming-section{margin-bottom:40px;}
.visits-past-lists{ display: flex; flex-direction: column;margin-top:10px;}
.visits-past-year-item{padding-top:16px; border-top: 1px solid #D9D9D9;}
.visits-past-year-item .collapsing{transition: height 0.3s ease;}
.visits-past-year-item .show{padding-bottom:24px;}
.visit-past-accordion{display: flex; cursor: pointer; gap:12px; align-items: center;margin-bottom:12px;}
.visit-past-accordion:hover{text-decoration: none !important;}
.visit-past-accordion .visit-past-year{font-size:1.5rem; font-weight: 700; line-height: 125%; color:#0A8AB1;font-family: 'GT-Walsheim-Bold', 'Poppins', sans-serif;}
.visit-past-accordion[aria-expanded="true"] .visit-past-year{color:#E35205;}
.visit-past-accordion .orange-down-arrow-icon{margin-left: auto; transition: transform .3s ease-in-out;}
.visit-past-accordion[aria-expanded="true"] .orange-down-arrow-icon { transform: rotate(-180deg);}
.visit-appointment-title{font-size:1.5rem;font-weight:700;line-height:125%; font-family: 'GT-Walsheim-Bold', 'Poppins', sans-serif;color: #E35205; margin-bottom:24px;}
.visitAppointmentModal .modal-body > div {margin-bottom: 20px; display: flex; flex-direction: column;  gap: 12px;}
.visitAppointmentModal .pet-location-address{margin-top:0px; border:1px solid #d9d9d9;border-radius: 16px;}
.visit-reminder-details { display: flex; gap: 12px; padding: 16px; border-radius: 16px; border: 1px solid #D8DADC; flex-direction: column;}
.visit-reminder-item { display: flex; align-items: flex-start; gap: 8px; font-weight: 400; line-height: 150%;color:#333436;}
.visit-appointment-type img{width:24px; height:24px;cursor: pointer;}
.visitAppointmentModal .rc-appointment-type{flex-wrap:wrap;}
.visitAppointmentModal .visit-sub-reasons{flex-direction: column; padding-left:29px;flex:0 0 100%;}
.visit-appointment-notes-content{padding-left:29px;flex: 0 0 100%;font-weight: 400;}
.visitAppointmentModal .rc-appointment-info .lightblue-bg-button{width:100%;}
.visitAppointmentModal .pet-location-mark-preferred{border:0;}
.visit-appointment-location .pet-location-address-text{padding-left:29px;margin-bottom:0;}
.visit-appointment-location .pet-location-petsmartlogo{padding-left:29px;}
.visit-appointment-location .pet-location-other-info{padding-left:29px;}
.visit-appointment-notes{flex-wrap:wrap;}
.visit-action-row{display: flex; gap: 12px;}
.visit-appointment-actions .orange-bg-button{justify-content: center;}
.visitAppointmentInroomModal .modal-dialog, .visitAppointmentDropoffModal .modal-dialog, .visitAppointmentVirtualModal .modal-dialog, .visitAppointmentCancelModal .modal-dialog, .visitAppointmentCancelSuccessModal .modal-dialog{max-width:400px;}
.visit-note-text{margin-bottom:20px;}
.visitAppointmentInroomModal .orange-bg-button, .visitAppointmentDropoffModal .orange-bg-button, .visitAppointmentVirtualModal .orange-bg-button{justify-content: center; width:100%;}
.visitAppointmentCancelModal .visit-action-row a{flex:1; justify-content: center; gap:5px;}
.visitAppointmentCancelModal .visit-action-row a.lightgreen-bg-button{pointer-events: none;}
.visit-appointment-actions .loading-state{width:auto !important; height:auto;}
.visit-appointment-actions .lightorange-bg-button.loading{justify-content: center;}
.visits-suggestion-lists .pet-item-image img {  border-radius: 8px;}
.visit-appointment-location .pet-location-address{gap:6px;}
.timeline-appointment-card:hover:before {
    border: 2px solid rgba(0, 0, 0, 0.4);
    transition: none; 
}

.timeline-appointment-card .appointment-action {
    align-items: flex-start;
}
.visit-card-left {
    gap: 8px;
}
.visit-appnt-pet-image {
    height: 40px;
    flex: 0 0 40px;
    width: 40px;
    border-radius: 8px;
}
.visit-appnt-pet-details {
    display: flex;
    /* justify-content: space-between; */
    flex-direction: column;
    justify-content: flex-end;
    gap:8px;
}
.visit-appnt-time {
    margin-top: 0;
}
/* .visit-appnt-info {
    gap: 8px;
} */
.visit-appnt-type {
    line-height: 16px;
}
.visits-past-year-item, .visits-past-year-item .visit-past-year {
    transition: .15s ease-out;
}

.visits-past-year-item:has(a:hover),
.visits-past-year-item:has(a:hover) + .visits-past-year-item {
    border-color: rgba(0, 0, 0, 0.4);
    transition: none;
}

.visits-past-year-item a:hover .visit-past-year{
    color: #005F81;
    transition: none;
}

.visit-past-accordion[aria-expanded="true"]:hover .visit-past-year {
    color: #d74100;
    transition: none;
}
.virtual-visit-action-row > .btn {
    padding: 0 8px;
    border-radius: 16px;
    min-height: 48px;
    height: 32px;
    display: inline-flex;
    justify-content: space-between;
    align-items: center;
    z-index: 3;
    position: relative;
    gap:8px;
    flex-shrink: 0;
}
.virtual-visit-action-row > .btn img {
    background-color: transparent;
    padding: 0;
    border-radius: 0;
    width: 16px;
}
.visit-appointment-actions .lightgreen-bg-button{justify-content: space-between;  pointer-events: none; padding: 0 8px; gap: 5px; margin-right: auto;height:32px;}
.visit-appointment-actions .orange-bg-button{justify-content: space-between;  padding: 0 8px; gap: 5px; margin-right: auto;height: 32px; line-height: 115%;}
.visit-appointment-actions .lightorange-bg-button.loading { padding: 0 8px; margin-right: auto; height: 32px;}
.visits-upcoming-section .promo-section {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    padding-top: 16px;
}

.visit-appointment-actions{display: flex; padding: 16px; flex-direction: column; align-items: flex-start;gap: 16px; border-radius: 16px; border: 2px solid #DCF0F6; background: #FFF;}
.red-link{color: #D00 !important; font-size: 15px; font-weight: 700; line-height: 125%;display: flex; align-items: center; gap: 5px; cursor: pointer;}
.visit-action-row{ width: 100%; justify-content: flex-end;align-items: center;}
.visit-action-row .blue-link{align-items: center;}
.virtual-visit-action-row{justify-content: flex-start;flex-wrap: wrap;}
.virtual-visit-action-row .line-separator{flex: 100%;}
.virtual-visit-action-row .orange-bg-button{margin-right: unset;}
.blue-link.disabled{color: #74787B; pointer-events: none;}
.blue-link.disabled img { filter: grayscale(1); }

.schedule-appnt-title{color: #E35205; font-family: "GT-Walsheim-Bold", "Poppins", sans-serif; font-size: 24px; font-weight: 700; line-height: 125%; }
.schedule-appointment-details-section{display: flex; flex-direction: column; gap:32px;}
.schedule-appointment-details-section h1{color:#E35205; font-family: "GT-Walsheim-Bold", "Poppins", sans-serif; font-size: 32px; font-weight: 700; line-height: 115%;}

.schedule-appnt-section{display: grid; grid-template-columns: 1fr 1fr; /* Two columns */  gap: 20px; row-gap: 24px;}
.schedule-appnt-section .rc-appointment-for{display: flex; flex-direction: column; gap: 12px; grid-column: 1; grid-row: 1;}
.schedule-appnt-section .visit-appointment-location{display: flex; flex-direction: column; gap: 12px; grid-column: 1;  grid-row: 2;}
.schedule-appnt-section .rc-appointment-info{ display: flex; flex-direction: column; gap: 12px;  grid-column: 2; grid-row: 1 / span 3; /* Span full height */}
.schedule-appnt-section .visit-reminders{display: flex; flex-direction: column; gap: 12px; grid-column: 1; grid-row: 3;}
.schedule-appnt-section .visit-appointment-location .pet-location-address {margin-top: 0px; border: 1px solid #d9d9d9; border-radius: 16px;}
.schedule-appnt-section .rc-appointment-type {flex-wrap: wrap;}
.schedule-appnt-section .visit-sub-reasons { flex-direction: column; padding-left: 29px; flex: 0 0 100%;}
.schedule-appnt-section .rc-appointment-details .lightblue-bg-button{width: 100%;}
.visit-sub-reasons > div{font-weight: 400;}
.visit-action-row > .lightorange-bg-button.loading { height: 32px; }
.visitAppointmentCancelSuccessModal .orange-bg-button{justify-content: center;}
.virtual-visit-note{     max-width: 200px; font-weight: 400; line-height: 125%; font-size: 0.813rem;}
.visit-action-row .blue-link{min-width: fit-content;}
.visit-action-row .red-link{min-width: fit-content;}

@media (min-width: 1200px) {
    .visits-page .layout-content {
        padding: 0px 0px 0px 16px;
        max-width: calc(100% - 110px);
    }
}

@media(max-width:991px){
    .visits-section{flex-direction: column;}
    .visits-appointment-section{flex:none; width:100%;}
    .visits-suggestion-section{flex: none; max-width:100%; min-width:100%;margin-bottom: 40px;}
    
}

@media(max-width:767.5px){
    .visits-page{padding-left:15px; padding-right:15px;}
    .visits-page-head{flex-direction:column;align-items: flex-start; gap: 12px;}
    .visit-appnt-info{flex-direction:column;align-items: flex-start;}
    .timeline-appointment-card .appointment-action{flex-direction:column;align-items: flex-start;}
    .visits-upcoming-section .promo-section {
        grid-template-columns: 1fr;
    }

    .visit-action-row{flex-wrap: wrap;justify-content: center;}
    .visit-appointment-actions .orange-bg-button, .visit-appointment-actions .lightgreen-bg-button{flex: 100%;justify-content: center;}
    .schedule-appnt-section{grid-template-columns: 1fr;}
    .schedule-appnt-section .rc-appointment-for { grid-column: 1; grid-row: 1; }
    .schedule-appnt-section .visit-appointment-location { grid-column: 1; grid-row: 2; }
    .schedule-appnt-section .rc-appointment-info { grid-column: 1; grid-row: 3; }
    .schedule-appnt-section .visit-reminders { grid-column: 1; grid-row: 4; }
    .virtual-visit-note{flex: 0 0 100%;padding-left: 0;text-align: center; text-wrap: balance;    max-width: 100%;}

    .visitAppointmentModal .visit-note{text-align: center; text-wrap: balance;}
    .schedule-appointment-details-section .visit-note{text-align: center; text-wrap: balance;}

}

@media (max-width: 1199.5px) {
    .visits-page .layout-content {
        padding-top: 75px !important;
        /* padding-left: 16px;
        padding-right: 16px; */
    }
}