:root {
    --brand-black: #12203b;
    --brand-blue: #5187e9;
    --brand-pinkish-orange: #f06868;
    --brand-brown: #c38800;
    --brand-green-1: #67ce97;
    --brand-violet: #922ae3;
    --brand-gray-1: #6a768a;
    --brand-green-2: #2ad24f;
    --brand-gray-2: #5c6060;
    --brand-bluish-green: #115e67;
    --additional-orange: #ff8d12;
    --additional-orange-2: #e07400;
    --additional-yellow: #ffbb12;
    --additional-gray-1: #d7d7d7;
    --additional-gray-2: #33373e;
    --additional-gray-3: #dfe2e5;
    --additional-green-1: #36a66a;
}

.circle-img {
    width: 48px;
    height: 48px;
    overflow: hidden;
    border: 2px solid white;
    border-radius: 50% !important;
}

.circle-img img {
    height: 100%;
    transform: translateX(-50%);
    margin-left: 50%;
}


.is-decision-button {
    width: 36px;
    height: 36px;
}

@media screen and (max-width: 768px) {
    .is-decision-button {
        width: 32px;
        height: 32px;
    }
}


.is-decision-button-wide {
    width: 72px;
    height: 36px;
}

@media screen and (max-width: 768px) {
    .is-decision-button-wide {
        width: 64px;
        height: 32px;
    }
}


.vehicle-health-meter {
    /*background: linear-gradient(to right, #ff3860, #ffdd57,#23d160);*/
    background: linear-gradient(to right, #f06868, #ffbb12, #36a66a);
    border: 2px solid white;
    border-radius: 8px;
    height: 24px;
}

    .vehicle-health-meter .health-meter-marker {
        bottom: -10px;
        color: black;
        display: block;
        font-size: 2rem;
        position: relative;
        text-align: left;
    }




.is-arrow {
    border-style: dashed;
    border-color: transparent;
    border-width: 0.20em;
    display: -moz-inline-box;
    display: inline-block; /* Use font-size to control the size of the arrow. */
    font-size: 100px;
    height: 0;
    line-height: 0;
    position: relative;
    vertical-align: middle;
    width: 0;
    background-color: #fff; /* change background color acc to bg color */
    border-left-width: 0.2em;
    border-left-style: solid;
    border-left-color: #ff0000;
    left: 0.25em;
}

.is-dark-lighter {
    background-color: #444 !important;
}


.vehicle-health-overview .color-legend {
    border-radius: 5px;
    display: inline-block;
    position: relative;
    top: -3px;
    height: 6px;
    width: 20px;
}

.vehicle-health-overview .legend-passed,
.filter-wrapper .filter-btn-wrapper .btn-filter.passed {
    background: #68BD45;
}

.vehicle-health-overview .legend-nonurgent,
.filter-wrapper .filter-btn-wrapper .btn-filter.nonurgent {
    background: #FFDF00;
}

.vehicle-health-overview .legend-urgent,
.filter-wrapper .filter-btn-wrapper .btn-filter.urgent {
    background: #EF3E23;
}

.filter-wrapper .filter-btn-wrapper .btn-filter i {
    visibility: hidden;
    vertical-align: middle;
}

.filter-wrapper .filter-btn-wrapper .btn-filter.active i {
    visibility: visible;
    color: white;
    text-align: center;
}

.is-inspection-detail {
    display: none;
}

.is-inspection-detail.active {
    display: block;
}

#financing-easy-pay ul {
    margin-left: 1.2em;
    list-style: disc;
}



@media screen and (min-width: 1024px) {
    .is-float-desktop {
        position: fixed;
        width: inherit;
    }
}

.is-inspection-header {
    background-color: white !important;
    height: 80px !important;
    width: 100% !important;
    position: fixed !important;
    -webkit-box-shadow: 0px 3px 5px -5px #222 !important;
    -moz-box-shadow: 0px 3px 5px -5px #222 !important;
    box-shadow: 0px 3px 5px -5px #222 !important;
    z-index: 9999 !important;
}

.is-inspection-header-columns {
    height: 80px !important;
    margin-top: 6px !important;
    margin-left: 6px !important;
    margin-right: 6px !important;
    margin-bottom: 0px !important;
}


.is-inspection-point-component-label {
    width: 140px;
    text-align:left;
}

.button.is-success {
    background-color: var(--additional-green-1);
}

    .button.is-success:hover {
        background-color: #2c8a57;
    }

    .button.is-success:active {
        background-color: #257349;
    }

.button.is-warning {
    color: black !important;
    background-color: var(--additional-yellow);
}

    .button.is-warning:hover {
        background-color: #bf8c0d;
    }

    .button.is-warning:active {
        background-color: #bf8c0d;
    }

.button.is-danger {
    background-color: var(--brand-pinkish-orange);
}

    .button.is-danger:hover {
        background-color: #b23129;
    }

    .button.is-danger:active {
        background-color: #b23129;
    }


.tag:not(body).is-warning {
    background-color: var(--additional-yellow);
    color: black;
}

.tag:not(body).is-danger {
    background-color: var(--brand-pinkish-orange);
}

.tag:not(body).is-success {
    background-color: var(--additional-green-1);
}

@media screen and (max-width: 768px) {
    .is-inspection-point-component-label {
        text-align: left;
        width: auto;
    }
}


@media screen and (max-width: 1023px) {
    .is-inspection-point-component-label {
        width: 120px;
    }
}



@media screen and (max-width: 768px) {
    .is-padding-top-0-mobile {
        padding-top:0;
    }
}

@media screen and (max-width: 768px) {
    .is-padding-bottom-0-mobile {
        padding-bottom: 0;
    }
}



@media screen and (max-width: 768px) {
    .is-inspection-point-component-text {
        padding-left: 32px;
    }
}


.is-inspection-detail-container {
    margin-left: 10px;
    margin-right: 10px;
}

@media screen and (min-width: 768px) {
    .is-inspection-detail-container {
        margin-left: 8%;
        margin-right: 8%;
    }
}