:root{
    --change-location-modal-width-desktop: 950px;
    --change-location-modal-height-desktop: 650px;
}

.location-modal{
    top: 0;
    height: 100dvh;
    height: -webkit-fill-available;
    background-color: rgb(0, 0, 0, 0.5);
    padding-right: 0 !important;
    z-index: 1100;
    max-width: 100dvw;
    max-height: 100dvh;
}

.location-modal .modal-dialog {
    max-width: var(--change-location-modal-width-desktop);
    width: 100%;
    margin: 0 auto;
    background-color: white;
    height: 100%;
    max-height: var(--change-location-modal-height-desktop);
    top: 50%;
    transform: translate(0, -50%) !important;
    border: 1px solid var(--pahoehoe);
    z-index: 1100;
    position: relative;
}

.location-modal .modal-content .row.header{
    padding: 24px;
    border-bottom: 1px solid var(--pahoehoe);
}

.location-modal .modal-content .row.content{
    max-height: 60%;
    padding-top: 24px;
    padding-left: 24px;
    padding-right: 24px;
}

.location-modal .modal-content .row.content > .col-12{
    padding-left: 0;
    padding-right: 0;
}

.location-modal .modal-content .row.bottom{
    text-align: center;
    padding: 24px;
}

.location-modal .header button{
    float: right;
    background-color: transparent;
    border: none;
    padding: 0;
    opacity: 0.5;
    z-index: 100;
}

.location-modal .header button img{
    height: 40px;
    width: 40px;
}

.location-modal .header button img.compare-close.dealership-select-close{
    height: 20px;
    width: 20px;
}

.location-modal .header h3{
    float: left;
    width: 80%;
    margin-bottom: 0;
}

#change-location-map{
    overflow: hidden;
    height: 450px;
    width: 100%px;
}

#change-location-map .map-height{
    height: 100%;
}

.change-location-container{
    max-height: 450px;
    overflow-y: auto;
    overflow-x: hidden;
    height: 100%;
    padding-right: 6px;
    margin-right: 12px;
}

.change-location-container a{
    text-decoration: underline;
}

.change-location-container a:hover{
    opacity: 0.6;
}

.change-location-container::-webkit-scrollbar {
    width: 6px;
	background-color: #F5F5F5;
}
 
.change-location-container::-webkit-scrollbar-track {
    padding-left: 12px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	border-radius: 10px;
	background-color: rgba(0, 0, 0, 0.05);
}
.change-location-container::-webkit-scrollbar-thumb {
    border-radius: 10px;
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3); 
    box-shadow: inset 0 0 6px rgba(0,0,0,.3);
	background-color: #111;
}

.change-location-container .change-location{
    -webkit-box-shadow:inset 0px 0px 0px 1px var(--pahoehoe);
    -moz-box-shadow:inset 0px 0px 0px 1px var(--pahoehoe);
    box-shadow:inset 0px 0px 0px 1px var(--pahoehoe);
    padding-right: 24px;
    padding-left: 24px;
    padding-top: 12px;
    padding-bottom: 12px;
    cursor: pointer;
}

.change-location-container .change-location a{
    color: black;
}

.change-location-header-div {
    padding-left: 0px;
    padding-right: 0px;
}

.change-location-container .change-location a span{
    white-space: nowrap;
}

.change-location-container .change-location .col-2, .change-location-container .change-location .col-3{
    text-align: right;
    white-space: nowrap;
}

.change-location-container .contact-content-weekday-space{
    display: none;
}

.change-location-container .location-hours{
    padding-top: 12px;
}

.change-location-container .location-hours label.active{
    color:  #4CAA4F;
}

.change-location-container .change-location.selected{
    -webkit-box-shadow:inset 0px 0px 0px 2px black;
    -moz-box-shadow:inset 0px 0px 0px 2px black;
    box-shadow:inset 0px 0px 0px 2px black;
    position: relative;
}

.vehicle-location.change-location-container .change-location.selected{
    -webkit-box-shadow:inset 0px 0px 0px 2px var(--primary-1);
    -moz-box-shadow:inset 0px 0px 0px 2px var(--primary-1);
    box-shadow:inset 0px 0px 0px 2px var(--primary-1);
    position: relative;
}

:not(.vehicle-location).change-location-container .change-location.active{
    -webkit-box-shadow:inset 0px 0px 0px 2px var(--primary-1);
    -moz-box-shadow:inset 0px 0px 0px 2px var(--primary-1);
    box-shadow:inset 0px 0px 0px 2px var(--primary-1);
    position: relative;
    padding-top: 36px;
}

:not(.vehicle-location).change-location-container .change-location.active::before{
    content: "Your Location";
}

.change-location-container .change-location.active::before{
    color: white;
    padding-top: 6px;
    padding-bottom: 6px;
    padding-left: 12px;
    padding-right: 12px; 
    background-color: var(--primary-1);
    position: absolute;
    font-family: var(--tertiary-font);
    font-size: 12px;
    line-height: 1.5;
    top: 0;
    left: 0;
}

.change-location-container .change-location:not(:last-child){
    margin-bottom: 8px;
}

.change-location-container .change-location:hover{
    -webkit-box-shadow:inset 0px 0px 0px 2px black;
    -moz-box-shadow:inset 0px 0px 0px 2px black;
    box-shadow:inset 0px 0px 0px 2px black;
}

.change-location-container .change-location.selected:hover{
    -webkit-box-shadow:inset 0px 0px 0px 2px black;
    -moz-box-shadow:inset 0px 0px 0px 2px black;
    box-shadow:inset 0px 0px 0px 2px black;
}

.vehicle-location.change-location-container .change-location:hover{
    -webkit-box-shadow:inset 0px 0px 0px 2px var(--primary-1);
    -moz-box-shadow:inset 0px 0px 0px 2px var(--primary-1);
    box-shadow:inset 0px 0px 0px 2px var(--primary-1);
}

.vehicle-location.change-location-container .change-location.selected:hover{
    -webkit-box-shadow:inset 0px 0px 0px 2px var(--primary-1);
    -moz-box-shadow:inset 0px 0px 0px 2px var(--primary-1);
    box-shadow:inset 0px 0px 0px 2px var(--primary-1);
}

.change-location-container .distance-col p{
    margin-bottom: 0;
}

.change-location-container .change-location a.service-address{
    font-size: 12px;
    color: black !important;
    text-decoration: none;
    pointer-events: none;
}

.location-modal .location-map-show{
    display: none;
}

.checkbox-accordion input[type=checkbox] {
    display: none;
}

.checkbox-accordion > div {
    display: none;
}

.checkbox-accordion input[type=checkbox]:checked ~ div {
    display: block;
    margin-top: 0;
    margin-bottom: 0px;
    padding-left: 0;
    padding-bottom: 0px;
}

.checkbox-accordion input[type=checkbox] + label{
    position: relative;
    margin-bottom: 0;
    padding-right: 28px;
    padding-bottom: 0;
}


.checkbox-accordion input[type=checkbox] + label::after {
    content: "";
    border: solid black;
    border-width: 0 1px 1px 0;
    display: inline-block;
    padding: 3px;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    position: absolute;
    right: 0;
    margin-top: 0.2em;
    font-size: inherit;
}

.checkbox-accordion input[type=checkbox]:checked + label::after {
    content: "";
    border: solid black;
    border-width: 0 1px 1px 0;
    display: inline-block;
    padding: 3px;
    transform: rotate(-135deg);
    -webkit-transform: rotate(-135deg);
    position: absolute;
    right: 0;
    margin-top: 0.4em;
    font-size: inherit;
}

.mobile-select-dealership {
    display: none;
}

#view-vehicle-inventory:not([href]), #contact-call:not([href]), #contact-send-message:disabled, #select-dealership:disabled {
    color: white;
    background-color: #E5E4E5;
}

.location-name {
    padding-left: 0px;
}

.store-information {
    padding-right: 0px !important;
}

.parts-modal-cta, .inventory-modal-cta {
    text-align: right;
    align-self: center;
    padding-left: 0px !important;
    padding-right:12px !important;
}

.parts-modal-cta a, .inventory-modal-cta a{
    color: white !important;
    text-decoration: none !important;
    font-size: 16px;
}

.addr-table {
    display: table;
    width: 100%;
}

.addr-col {
    display: table-cell;
    width: 80%;
}

.distance-col {
    display: table-cell;
    width: 20%;
}

.distance-text {
    text-align: end;
    padding-left:0px;
}

.location-map-show {
    padding-bottom: 16px;
}

.view-inventory-button {
    padding-left: 12px !important;
    padding-right: 12px !important;
}

@media screen and (min-width: 1199.98px){
    .location-modal .modal-dialog {
        max-width: 1200px;
    }

    .vehicle-contact .row.bottom {
        justify-content: center;
    }

    .distance-text {
        text-align: end;
        padding-left:12px;
    }
}

@media screen and (max-width: 991.98px), 
    screen and (max-height: 699.87px){
    .location-modal{
        padding-left: 0 !important;
    }

    .location-modal .modal-dialog {
        width: 100%;
        max-width: 100vw;
        height: 100%;
        height: -webkit-fill-available;
        max-height: 100dvh;
        max-height: -webkit-fill-available;
        top: 0;
        transform: translate(0, 0) !important;
        border: none;
    }

    .location-modal .modal-content {
        max-height: 100%;
        border: none;
        height: 100dvh;
        height: -webkit-fill-available;
    }

    .location-modal .modal-content .row.header{
        border-bottom: none;
        padding-bottom: 0px;
        padding-top: 16px;
        padding-right: 16px;
        padding-left: 16px;
    }

    #change-location-map{
        max-height: 66.6vw;
        margin-bottom: 12px;
        height: 30vh;
        min-height: 200px;
    }

    .change-location-container {
        max-height: calc(100dvh - 94px - 22dvh);
        height: 100%;
        min-height: 212px;
        margin-right: -12px;
        padding-right: 12px;
    }

    .change-location-container.shrunk{
        max-height: calc(100dvh - 94px - 52dvh);
        min-height: 212px;
    }

    .change-location-header-div {
        padding-left: 8px !important;
        padding-right: 15px !important;
    }
    
    /* Used for one button location selection
    .location-modal .change-location-set, .location-modal #view-vehicle-inventory, .location-modal .action-btn{
        position: fixed;
        bottom: 0;
        width: 100%;
        left: 0;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        z-index: 2000;
        display: flex;
    }

    .location-modal .change-location-set:disabled, .location-modal #view-vehicle-inventory:disabled{
        background-color: #CCDCEB;
        opacity: 1;
    }

    .location-modal .header button{
        float: initial;
        position: absolute;
        top: 16px;
        right: 16px;
    }

    .location-modal .modal-content .row.header .col-12{
        padding-right: 0;
        padding-left: 0;
    }

    .location-modal .modal-content .row.content {
        max-height: calc(100dvh - 20dvh);
        overflow-y: auto;
        padding-top: 0;
        min-height: 260px;
        padding-right: 16px;
        padding-left: 16px;
    }

    .location-modal .change-location-set, .location-modal #view-vehicle-inventory, .location-modal .action-btn{
        position: fixed;
        bottom: 0;
        width: 100%;
        left: 0;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        z-index: 2000;
        display: flex;
    }

    .location-modal .change-location-set:disabled, .location-modal #view-vehicle-inventory:disabled{
        background-color: #CCDCEB;
        opacity: 1;
    }

 .vehicle-contact-btn {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    #change-location-map{
        max-height: 66.6vw;
        margin-bottom: 12px;
        height: 30vh;
        min-height: 200px;
    }

    .change-location-container {
        max-height: calc(100dvh - 94px - 22dvh);
        height: 100%;
        min-height: 212px;
        margin-right: -12px;
        padding-right: 12px;
    }

    .change-location-container.shrunk{
        max-height: calc(100dvh - 94px - 52dvh);
        min-height: 212px;
    }
    
    .change-location-container .location-hours{
        padding-top: 8px;
    }
        */

    .location-modal .location-map-show{
        display: inline-block;
    }


    .map-show-hide-accordion input[type=checkbox] + label{
        margin-bottom: 0;
        padding-bottom: 4px;
        z-index: 3;
    }

    .map-show-hide-accordion input[type=checkbox] + label::before{
        content: "Show Map";
        font-family: var(--primary-font);
        font-size: 16px;
        text-decoration: underline;
    }

    .map-show-hide-accordion input[type=checkbox]:checked + label::before{
        content: "Hide Map";
        font-family: var(--primary-font);
        font-size: 16px;
        text-decoration: underline;
    }

    .location-modal .map-show-hide-accordion .content{
        padding-left: 0;
        margin-top: 0;
    }

    .change-location-container .change-location{
        padding-right: 12px;
        padding-left: 12px;
    }

    .location-modal .mobile-select-dealership {
        display: flex;
        margin-bottom: 24px;
    }

    .location-modal #contact-call.btn {
        margin: 12px;
    }

    .parts-modal-cta, .inventory-modal-cta {
        text-align: center;
        padding-top: 20px;
        padding-right: 0px !important;
    }

    .parts-modal-cta a, .inventory-modal-cta a {
        width: 85%;
        padding: 0px;
    }

    .distance-text {
        text-align: end;
        padding-left:0px;
    }
}

@supports (-webkit-touch-callout: none) {

    #change-location-map{
        max-height: 66.6vw;
        margin-bottom: 12px;
        height: calc(35vh - 60px);
    }

    .change-location-container {
        max-height: calc(100dvh - 260px);
    }

    .change-location-container.shrunk{
        max-height: calc(100dvh - 210px - 35dvh);
    }

    .location-modal .modal-content .row.content {
        max-height: calc(100dvh - 60px);
    }
  }

@media (min-width: 992px) and (max-height: 699.87px){
        .location-modal .location-map-show {
            display: none;
        }

        .location-modal .modal-content .row.content {
            margin-bottom: 0;
        }
        .location-modal .change-location-container{
            margin-right: 12px;
            max-height: calc(100dvh - 148px);
            margin-bottom: 0;
        }

        #change-location-map {
            margin-bottom: 0;
            height: 100dvh;
            max-height: calc(100dvh - 1px);
        }
    }

@media (max-height: 600px){
    .location-modal .modal-content .row.content {
        padding-bottom: 20px;
    }

    .location-modal .header button {
        top: -6px;
        right: -6px;
    }
}

@media screen and (min-width: 992px), 
       screen and (min-height: var(--change-location-modal-height-desktop)){
        .location-modal .map-show-hide-accordion .content{
            display: block;
        }
       }