.loader {
    border: 16px solid #f3f3f3;
    border-radius: 50%;
    border-top: 8px solid blue;
    border-right: 8px solid green;
    border-bottom: 8px solid red;
    border-left: 8px solid pink;
    width: 10px !important;
    height: 10px !important;
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
}

@-webkit-keyframes spin {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.required-border {
    border: 1px solid red !important;
}

/*h1 {*/
/*    text-align: center;*/
/*}*/

.form-group>label {
    display: block;
    font-weight: 700;
    margin-bottom: 10px;
    font-size: 18px;
    color:#ffffff;
}

.form-group {
    margin-bottom: 20px;
}

.form-group input[type="date"] {
    width: 100%;
    height: 42px;
    padding: 10px;
}

.form-group textarea {
    width: 100%;
    height: 100px;
	font-size: 17px;
	padding: 10px 15px;
}

.appoinment-form{
    width: 100%;
    max-width: 100% !important;
}

.appoinment-form input[type=text], .appoinment-form input[type=tel], .appoinment-form input[type=email], .appoinment-form select {
    padding: 10px;
    width: 100%;
    font-size: 17px;
    font-family: "Roboto", sans-serif;
    border: 1px solid #aaaaaa;
}

/* Mark input boxes that gets an error on validation: */
.appoinment-form input.invalid {
    background-color: #ffdddd;
}

/* Hide all steps by default: */
.appoinment-form .tab {
    display: none;
}

.appoinment-form button {
    background-color: #ff5c00;
    color: #fff;
    border: none;
    padding: 10px 20px 8px;
    cursor: pointer;
    margin-top: 20px;
    border-width: 0px !important;
    border-color: #ff5c00;
    border-radius: 5px;
    letter-spacing: 1px;
    font-size: 20px;
    font-family: 'Bebas Neue', display !important;
    text-transform: uppercase !important;
}

.appoinment-form button:hover {
    opacity: 0.9;
}

.appoinment-form #prevBtn {
    background-color: #ffffff;
    color: #000;
}

/* Make circles that indicate the steps of the form: */
.appoinment-form .step {
    height: 15px;
    width: 15px;
    margin: 0 2px;
    background-color: #bbbbbb;
    border: none;
    border-radius: 50%;
    display: inline-block;
    opacity: 0.5;
}

.appoinment-form .step.active {
    opacity: 1;
}

/* Mark the steps that are finished and valid: */
.appoinment-form .step.finish {
    background-color: #04AA6D;
}

/* Package section css */

.servicesandprices {
    display: flex;
    gap: 30px;
}


.servicesandprices .single-package-col {
    width: 100%;
    box-shadow: -1px 0px 15px #00000057;
    padding: 20px;
    border-radius: 10px;
}

.package-title {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 15px;
}

.package-items {
    margin-bottom: 10px;
}
.total-price {
    font-size: 22px;
    font-weight: 700;
    margin-top: 20px;
}


/*  Price Section CSS */

.service-tab-container {
    display: flex;
    gap: 30px;
	align-items: flex-start;
	flex-direction: column;
}

.prices-column {
    padding: 20px;
    border: 1px solid #dddddd;
    border-radius: 5px;
    width: 100%;
	text-align: right;
}

.services-column {
    border-radius: 5px;
    width: 100%;
}
.price-label{
	float: left;
    width: 50%;
text-align: left;
}

.price-field {
    float: right;
    width: 50%;
    display: flex;
    gap: 4px;
    align-items: baseline;
}

.general-price {
    float: left;
	width: 100%;
}

.general-price label {
    margin-bottom: 0px !important;
	text-align: left;
}

.addon-prices{
	 float: left;
	width: 100%;
}

.addon-prices label {
    margin-bottom: 0px !important;
	text-align: left;
}

.total-prices {
	float: left;
    margin-bottom: 0;
    border-top: 1px solid #ccc;
    padding-top: 10px;
	width: 100%;
}

.total-prices label {
    margin-bottom: 0px !important;
	text-align: left;

}

.general-price input[type=text] {
    border: none !important;
    padding: 0;
    font-weight: 700;
    font-size: 24px;
	text-align: right;
}


.addon-prices input[type=text] {
    border: none !important;
    padding: 0;
    font-weight: 700;
    font-size: 24px;
	text-align: right;
}

.total-prices input[type=text] {
    border: none !important;
    padding: 0;
    font-weight: 700;
    font-size: 24px;
	text-align: right;
}

@media(max-width:767px){
	.service-tab-container{
		flex-direction: column;
	}

	.services-column{
		width: 100%;
	}

	.prices-column{
		width: 100%;
		text-align: left;
	}
}


/* Custom CSS for inline buttons */



.btn-group-toggle label.btn {
    display: block;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 5px 10px;
    cursor: pointer;
    text-align: center;
    text-transform: uppercase;
}

.btn-group-toggle label.btn img {
    max-width: 65px !important;
    display: block;
    margin: 0 auto;
}

.btn-group-toggle label.btn:hover {
    background-color: #f0f0f0;
}


.btn-group-toggle label.btn.active, .btn-group-toggle label.btn:hover, .btn-group-toggle label.btn:focus{
    border: 2px solid #c14601 !important;
}

.btn-group-toggle label.btn input[type="radio"] {
    /* display: none; */
    margin-left: 0px;
}

.btn-group-toggle label.btn {
    /* margin: 5px 0; */
    /* margin-right: 5px; */
    display: inline-block;
    background-color: #fff;
    border: 2px solid #ccc;
    border-radius: 5px;
    padding: 5px 10px;
    cursor: pointer;
}

.btn-group-toggle label.btn input[type=radio]{
opacity: 0;
width: 0px;
}
.btn-group.btn-group-toggle {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    margin-left: -10px;
    margin-right: -10px;
}

.btn-group.btn-group-toggle>label, .btn-group.btn-group-toggle>.service-box{
    width: 33.33%;
    flex: 1 1 calc(33.33% - 20px);
    max-width: calc(33.33% - 20px);
}

.booking-sucess h3 {
    color: #88B04B;
    font-family: "Nunito Sans", "Helvetica Neue", sans-serif;
    font-weight: 900;
    font-size: 40px;
    margin-bottom: 10px;
}

.booking-sucess p {
    color: #404F5E;
    font-family: "Nunito Sans", "Helvetica Neue", sans-serif;
    font-size: 20px;
    margin: 0;
}

.booking-sucess i {
    color: #9ABC66;
    font-size: 100px;
    line-height: 160px;
    margin-left: -15px;
}

.booking-sucess {
    /*background: white;*/
    display: block;
    text-align: center;
    margin-bottom: 20px;
}

.book-again-btn {
    color: #fff;
    background: #5892FF;
    border: none;
    padding: 10px 50px;
    margin: 23px 0;
    border-radius: 30px;
    text-transform: capitalize;
    box-shadow: 0 10px 16px 1px rgba(174, 199, 251, 1);
    display: inline-block;
    text-decoration: none;
}

.book-again-btn:hover, .book-again-btn:focus {
    background: #333333;
}

@media(min-width:981px) and (max-width:1200px){
    .btn-group.btn-group-toggle>label, .btn-group.btn-group-toggle>.service-box {
        width: 50%;
        flex: 1 1 calc(50% - 20px);
        max-width: calc(50% - 20px);
    }
}

@media(min-width:981px) and (max-width:1170px){
    .service-tab-container {
        flex-direction: column;
    }

    .services-column {
        width: 100%;
    }

    .prices-column {
        width: 100%;
    }
}

@media(max-width:980px){
    .btn-group.btn-group-toggle>label, .btn-group.btn-group-toggle>.service-box {
        width: 50%;
        flex: 1 1 calc(50% - 20px);
        max-width: calc(50% - 20px);
    }
}

@media(max-width:600px){
    .btn-group.btn-group-toggle>label, .btn-group.btn-group-toggle>.service-box {
        width: 100%;
        flex: 1 1 calc(100% - 20px);
        max-width: calc(100% - 20px);
    }
}




/* new css feb5,25 */

.breadcrumb {
    display: flex;
    align-items: center;
    margin-bottom: 75px;
}

  .breadcrumb a {
    padding: 4px 20px;
    background-color: #777;
    color: white;
    text-decoration: none;
    font-weight: bold;
    clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 0 100%, 15px 50%);
    margin-right: -15px;
  }

  .breadcrumb a.active {
    background-color: #ff5c00;
    display: flex
;
    align-items: center;
}

  .breadcrumb a.active svg {
    margin-right: 8px;
  }


div#kundtyp_group {
    max-width: 800px;
    display: block;
    margin: 0 auto;
}

label.btn.tidecarbooking_package_radio, label.btn.tidecarbooking_color_code_select{
    background: #3479e1;
    color: #ffffff;
    border-color: #347ae1;
}

label.btn.tidecarbooking_package_radio {
    line-height: 1.3;
    display: flex;
    align-items: center;
    justify-content: center;
}
label.btn.tidecarbooking_package_radio:hover,
label.btn.tidecarbooking_package_radio:focus,
label.btn.tidecarbooking_package_radio.active,
label.btn.tidecarbooking_color_code_select:hover,
label.btn.tidecarbooking_color_code_select:focus,
label.btn.tidecarbooking_color_code_select.active
{
    background: #ff5c00;
    border-color: #ff5c00 !important;
}

.nav-btn-top button {
    margin-top: 0;
    background: #ff5c00 !important;
    border-radius: 100%;
    padding: 9px !important;
    line-height: 0;
}

.nav-btn-top button img {
    max-width: 22px;
}

.nav-btn-top {
    margin-bottom: 20px;
    position: absolute;
    top: 0;
    right: 0;
}


div#service_type_id .btn-group-toggle label.btn input[type="radio"] {
    display: none;
}

.car_type_radio_input span.itemtext, .tidecarbooking_category_radio span.itemtext, .service_type_radio_input span.itemtext, .kund_type_radio_input span.itemtext{
	text-align: left;
	padding-left: 10px;
}


.car_type_radio_input span.itemicon, .tidecarbooking_category_radio span.itemicon, .service_type_radio_input span.itemicon, .kund_type_radio_input span.itemicon{
    padding: 5px 15px;
    background: #ffffff;
}

.car_type_radio_input, .tidecarbooking_category_radio, .service_type_radio_input, .kund_type_radio_input{
    display: flex !important;
    align-items: center;
    padding: 0 !important;
    background: #dddddd !important;
    font-weight: 700;
    color: #000000;
}

.car_type_radio_input.active, .tidecarbooking_category_radio.active, .service_type_radio_input.active, .kund_type_radio_input.active{
    background: #ff5c00 !important;
    color: #ffffff;
}


.step-caption {
    text-align: center;
    margin-bottom: 45px;
}

.step-caption h2 {
    color: #fff;
    font-size: 34px;
}

.step-caption p {
    color: #fff;
    line-height: 1.3;
    padding-bottom: 10px;
}



div#tidecarbooking_addon_content label.form-check-label, div#tidecarbooking_is_one_years_old label.form-check-label{
    color: #fff;
}
.prices-column .price-label, .prices-column .price-field{
    color: #fff;
}

.prices-column input[type=text] {
    background: transparent;
    color: #fff;
}


table#summery_table {
    margin-bottom: 30px;
}


table#summery_table th {
    padding: 5px;
    line-height: 1.3;
    color: #fff;
    border: 1px solid #333;
    font-weight: 500;
}

.booking-sucess p {
    color: #fff;
}



/* New css */

.booking-table-wrapper {
    max-width: 100%;
    overflow-x: auto;
    color: #ffffff;
  }

  .service-comparison-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 2rem;
  }

  .service-comparison-table th,
  .service-comparison-table td {
    border: 1px solid #ccc;
    padding: 10px;
    text-align: center;
    min-width: 100px;
    color: #ffffff !important;
  }

  .service-comparison-table th {
    font-size: 20px;
    background: #444;
  }

  .center-cell {
    text-align: center;
    color: #ffffff;
  }

  .select-package-btn {
    margin-top: 5px !important;
    padding: 6px 20px !important;
    background-color: #ff5c00;
    color: #fff;
    border: none;
    cursor: pointer;
    border-radius: 4px !important;
  }

  .toggle-extra-service {
    padding: 5px 7px 1px 7px !important;
    width: 30px;
    height: 30px;
    font-size: 22px !important;
    line-height: 1;
    border: none;
    background: #ddd !important;
    cursor: pointer;
    border-radius: 100px !important;
    color: #000000 !important;
    margin-right: 5px;
    margin-top: 0px !important;
    top: 3px !important;
    position: relative;
  }

  th.package-heading.active {
    background: #347ae1;
  }

  button.toggle-extra-service.active {
    background: #347ae1 !important;
    color: #ffffff !important;
  }

  .toggle-extra-service.active {
    background: #f44336;
    color: #fff;
  }

  .extra-price {
    font-size: 0.9em;
    color: #ffffff;
    display: block;
  }

  tr.total-row td {
    font-size: 22px;
    text-transform: uppercase;
  }

  .overall-total-wrapper {
    font-size: 1.2rem;
    margin-top: 10px;
  }

  .additional-service-row {
    background: #453023 !important;
  }

  td.additional-service-heading {
    font-weight: 700;
    font-size: 22px;
    height: 60px;
    background: #453023;
    text-align: center;
    color: #ffffff;
  }
  
  .overall-total-wrapper {
    color: #fff;
    font-size: 22px;
}

  /* Responsive Collapse Layout */
  @media screen and (max-width: 980px) {
    .service-comparison-table {
      border: none !important;
    }

    .service-comparison-table,
    .service-comparison-table thead,
    .service-comparison-table tbody,
    .service-comparison-table th,
    .service-comparison-table td,
    .service-comparison-table tr {
      display: block;
    }

    .service-comparison-table thead {
      display: none;
    }

    .service-comparison-table tr {
      margin-bottom: 15px;
      border: 1px solid #555 !important;
      border-radius: 6px;
      padding: 0px;
      background: #2c2c2c;
    }

    .service-comparison-table td {
      text-align: left;
      padding-left: 50%;
      position: relative;
      border: none;
      border-bottom: 1px solid #444 !important;
      color: #fff !important;
      border-top: 0 !important;
      padding: 8px 12px !important;

    }

    .service-comparison-table td::before {
      content: attr(data-label);
      position: relative;
      left: 0;
      top: 0;
      width: 100% !important;
      font-weight: bold;
      white-space: nowrap;
      display: block;
    }

    td.table-service-title {
      font-size: 22px;
    }

    td.table-service-title:before {
      font-size: 22px;
    }

    .service-comparison-table td img {
      display: block;
    }

    .service-comparison-table td:last-child {
      border-bottom: 0 !important;
    }

    .select-package-btn {
      width: 100%;
    }

    .additional-service-row {
      background: #453023 !important;
    }

    td.additional-service-heading {
      background: transparent;
      height: auto;
    }

  }
  
  /* Hide mobile cards on desktop */
.mobile-package-cards {
    display: none;
  }
  
  /* Responsive rules */
  @media screen and (max-width: 980px) {
    .service-comparison-table {
      display: none;
    }
  
    .mobile-package-cards {
      display: block;
    }
  
    .package-card {
        border: 1px solid #28252a;
        border-radius: 8px;
        margin-bottom: 20px;
        padding: 15px;
        background: #2c2c2c;
    }
    
    .package-card-title {
        margin-bottom: 10px;
        color: #ffffff;
        font-size: 24px;
        letter-spacing: 1px;
        background: #347ae1;
        padding: 10px 10px 7px;
        border-radius: 10px 10px 0 0;
    }
    .package-card h4 {
        color: #ffffff;
    }
  
    .default-services ul,
    .additional-services ul {
      padding-left: 20px;
      list-style: none;
    }
  
    .default-services li,
    .additional-services li {
      margin-bottom: 8px;
      display: flex;
      align-items: center;
    }
  
    .default-services img {
      width: 16px;
      height: 16px;
      margin-right: 8px;
    }
  
    .select-package-btn {
      margin-top: 10px;
      display: inline-block;
      padding: 6px 12px;
      background-color: #0073aa;
      color: #fff;
      border: none;
      border-radius: 4px;
    }
  
    .toggle-extra-service {
      margin-left: 0px;
      padding: 2px 8px;
      background: #eee;
      border: 1px solid #aaa;
      border-radius: 4px;
      cursor: pointer;
      top: 0px !important;
    }
    span.extra-price {
        font-weight: 700;
        font-size: 18px;
        color: #ff5c00;
    }
    .package-total {
        font-size: 22px;
    }
    
  }

.mobile-package-cards .package-card.active{
    background: #08090a;
}

.table-required{
    border: 3px solid red;
}
  
span.service-title {
    color: #fff;
    display: block;
    font-size: 16px;
}  
  
.service-comparison-table td.active {
    background-color: #0f2f5e;
    transition: background-color 0.3s ease;
}