/*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;}

/*box*/
.row.appointment-data-cancel{background: #ff1a1a14;border-left: 6px solid #ff0000;padding: 15px;border-radius: 0px 15px 15px 0;margin-bottom: 30px;}
.row.appointment-data-pending{background: #439dc921;border-left: 6px solid #1c80f1;padding: 15px;border-radius: 0px 15px 15px 0;margin-bottom: 30px;}
.row.appointment-data-timeout{background: #fab52630;border-left: 6px solid #ffcf00;padding: 15px;border-radius: 0px 15px 15px 0;margin-bottom: 30px;}


/*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 #39b54a;padding: 15px;border-radius: 0px 15px 15px 0;margin-bottom: 30px;}

/*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;margin-bottom: 0px;}
p.start-time {font-size: 18px; color:#000;}
p.product-name {font-weight: 700;}
p.product-status {margin-top: 30px;}
p.product-address {margin-bottom: 10px;/* min-height: 308px!important; */}
p.product-price {background: grey;width: fit-content;padding: 0px 8px;border-radius: 100px;color: #fff;font-size: 12px!important;}
@media only screen and (min-width: 992px) {
p.created-date {position: absolute;bottom: 0;}
.appointment-product-details, .appointment-expired-date {min-height: 200px;}}

/*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 {/* background: #f4f4f4; */}
.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*/