/*foc appointment*/
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');
.view-appointment #sp-main-body {background: #f4f4f4!important;}
.view-appointment div#sp-component {font-family: 'Inter'!important;}


/*title*/
h1.appointment-header {font-family: 'Inter'!important;font-weight: 700;margin-bottom: 50px;}
@media (max-width: 767px){
h1.appointment-header {font-family: 'Inter'!important;font-weight: 700;margin-bottom: 50px;margin-left: -15px;}}

/*box*/
.row.appointment-data {background: #e1eee3;border-left: 6px solid #00b489;padding: 15px;border-radius: 0px 15px 15px 0;margin-bottom: 30px;}
.row.appointment-data a {display: flex;align-content: center;align-items: center;}
@media (max-width: 767px){
.row.appointment-data a {display: flex;align-content: center;align-items: flex-start;flex-direction: column;}
.col-xs-8.col-sm-8.col-md-8.appointment-product-details {width: 100%;}.col-xs-4.col-sm-4.col-md-4.appointment-expired-date {width: 100%;}}

/*text color*/
.appointment-product-details, .appointment-expired-date {color: #646464;}
b.car-plate,h2.expired-date {color: #000;}

/*left side*/
b.car-plate {font-size: 22px;}h2.expired-date {margin-top: 0;font-weight: 900;letter-spacing: 0;}
@media only screen and (min-width: 992px) {
p.created-date {/* position: relative; *//* bottom: 0; */}
.appointment-product-details, .appointment-expired-date {height: auto;display: flex;flex-direction: column;align-items: flex-start;}
p.product-shipping {line-height: 1.5;text-indent: -8px;padding-left: 16px;font-size: 12px;padding-top: 10px;padding-bottom: 30px!important;display: block!important;width: 80%;}}
@media (max-width: 767px){
p.product-shipping {padding: 15px 0;font-size: 12px;}}


/*right side*/
.appointment-expired-date {display: flex;flex-direction: column;justify-content: center;flex-wrap: nowrap;}


/*appointment page********************************************************************/


/*appointment dashboard content right*/

.view-appointment div#sp-component {padding-top: 50px;font-family: 'Inter';letter-spacing: 0;}
@media (max-width: 767px){
.view-appointment div#sp-component {padding-top: 0px;/* padding-left: 0px; *//* padding-right: 35px; */background: #f4f4f4;margin: 0 15px;padding-bottom: 120px;}}
@media (min-width: 768px) and (max-width: 991px){
.view-appointment div#sp-component {padding: 0 30px;}}
@media only screen and (min-width: 992px) {
.view-appointment div#sp-component {padding: 0 80px;padding-top: 80px;}}

/*content*/