


.packageitem {
    font-size: 14px;
    font-weight:400;
}

.packagesubpackage {
    font-size: 14px;
    font-weight: 700;
}

.packagemainpackage {
    font-weight: 700;
    font-size: 15px;
}


.inputerror {
    border: 1px red dotted;
}

.taocol1 ul {
    padding-inline-start:10px;
    margin-bottom:0px;
}

.priceitem {
    /*
    color: darkmagenta;
    font-family: monospace;
    font-size: 13px;
        */
}

.pricesubitem {
    /*color: #888;*/
    font-size: 13px;
    display: inline;
}


.priceitemsingle {
    margin-top: 5px;
}

.priceexclvat {
    display:none;
}

.priceinclexclvat {
    display: none;
    /*
    color: darkmagenta;
    font-family: monospace;
        font-size: 13px;
        */
}


.mileagerequired_highlight {
    display: none;
    color: red;
    font-weight: 400;
}

.historyrow {
    padding: 10px;
}

.taorow {
    padding: 2px;
    margin-bottom: 2px;
}

.taocol1 {
    width: calc(100% - 224px);
    vertical-align: top;
}

.taocol2 {
    width: 222px;
    vertical-align: top;
    text-align: right;
}

.taocol1split {
    width: 50%;
    vertical-align: top;
}

.taocol2split {
    width: 50%;
    vertical-align: top;
    text-align: right;
}

.taocol1small {
    width: 200px;
    vertical-align: top;
}
.taocol2small {
    width: calc(100% - 208px);
    vertical-align: top;
    text-align: right;
}

.oemcol1 {
    width: 330px;
    vertical-align: top;
}

.oemcol2 {
    width: calc(100% - 338px);
    vertical-align: top;
    text-align: right;
}


.choosebuttonrow {
    margin-top: 8px;
}

.productrow {
    border-radius: 8px;
    border: 1px solid #bbb;
    margin-bottom: 20px;
}

    .productrow:hover {
        border: 1px solid #eee;
        background-color: #ddd;
    }


    .productrow .historycol3 {
        font-size: 14px;
        line-height: 16px;
        font-weight: 700;
        min-width: 300px;
    }

.gaugerow .historycol3 {
    width: 168px;
}

.gaugerow .historycol2 {
    width: calc(100% - 64px - 180px);
}

.historyrowcompact {
    padding: 3px;
}

.historycolcompact1 {
    width: 300px;
    font-weight: 700;
    display: inline-block;
}

.historycolcompact3 {
    display: inline-block;
    width: calc(100% - 310px);
    vertical-align: top;
    text-align: right;
}


.evenrow {
    background-color: #f0fbff;
}

.equipmentcol {
    display: inline-block;
}

    .equipmentcol li {
        list-style-type: '- ';
        line-height: 19px;
        margin-bottom: 4px;
    }

.equipmentcol1 {
    width: 300px;
    vertical-align: top;
    padding: 10px;
}

.equipmentcol2 {
    width: calc(100% - 310px);
    vertical-align: top;
    padding: 4px;
    text-align: right;
}


.historycol {
    display: inline-block;
}

.historycol1 {
    width: 64px;
    vertical-align: top;
    padding: 10px;
}

.historycol2 {
    width: calc(100% - 64px - 150px);
}

.productrow .historycol2 {
    width: calc(100% - 64px - 320px);
}


.historycol3 {
    width: 120px;
    vertical-align: top;
    padding: 4px;
    text-align: right;
}

.historyheading {
    font-size: 1.2rem;
    line-height: 1.5rem;
    margin: 0;
    padding: 0;
    font-weight: 700 !important;
}

.historyevent {
    font-size: .9rem;
    font-style: italic;
    line-height: 120%;
}

.historyresult {
    font-size: .9rem;
    font-style: italic;
    line-height: 120%;
}

.event-lowprio {
    display: none;
    color: #888;
}

.historyicon {
    max-width: 32px;
}

.form-radio {
    margin-left: 16px;
    display: inline-block;
    padding-left: 1.25rem;
    position: relative;
    cursor: pointer;
}

    .form-radio label {
        cursor: pointer;
    }

.servicelocation {
    font-weight: 700;
    /*color: #f90;*/
}




/* Gauge */
.gauge-container {
    display: flex;
    background-color: #eee; /* Background of unfilled gauge */
    border-radius: 3px; /* Makes the ends rounded */
    overflow: hidden; /* Ensures the inner divs conform to the container's border radius */
    width: 120px; /* Total width of the gauge */
    height: 18px; /* Height of the gauge */
}

.gauge-segment {
    border-radius: 3px; /* Makes the ends rounded */
    height: 100%;
    margin-right: 1px;
    transition: width 0.5s ease-in-out; /* Smooth transition for animation purposes */
}

/* Define the different colors of the gauge segments */
.segment-0 {
    background-color: #ccc;
    width: 18%;
}

.segment-1 {
    background-color: #4CAF50;
    width: 18%;
}
/* Adjust the width to your value */
.segment-2 {
    background-color: #8BC34A;
    width: 18%;
}
/* Adjust the width to your value */
.segment-3 {
    background-color: #CDDC39;
    width: 18%;
}
/* Adjust the width to your value */
.segment-4 {
    background-color: #FFEB3B;
    width: 18%;
}
/* Adjust the width to your value */
.segment-5 {
    /*background-color: #FFC107;*/
    width: 18%;
    background-color: #F90;
}
/* Adjust the width to your value */
.segment-6 {
    background-color: #FF9800;
    width: 18%;
}
/* Adjust the width to your value */
.segment-7 {
    background-color: #FF5722;
    width: 18%;
}
/* Adjust the width to your value */

.gauge-value {
    display: flex;
    margin-left: 8px;
    font-size: 13px;
    font-weight: 700;
    margin-top: -18px;
    float: right;
}













button.load-button {
    span

{
    transition: all 1s;
    opacity: 1;
}

svg {
    display: none;
    margin: 0 auto;
    transition: all 1s;
    path,rect

{
    fill: #fff;
}

}
}

button.loading-start {
    span

{
    display: none;
    opacity: 0;
}

svg {
    display: block;
    opacity: 1;
}

}


.recentsearchmore {
    display:none;
}

@media print {
    .no-print {
        display: none;
    }
}


.cardsearchadvanced {
    background-color: #eee;
    padding: 20px;
}
