:root {
    --search-bar-height: 52px;
    --toolbar-height: 48px;
    --price-bands-height: 72px;
    --motormouth-logo-height: 48px;
    --fuel-select-height: 45px;
    --price-reveal-bar: 20px;
    --site-details-component: 95px;
}

@media only screen and (max-width: 600px) {
    .band-font {
        font-size: 3vmin !important;
        margin-top: 0.25rem !important;
    }
}

/* smaller than 960px */
@media only screen and (max-width: 960px) {
    html{
        height:100%;
    }
    body{
        height:100%;
    }
    .bottom-menu {
        position: fixed;
        bottom: 0px;
        width: 100%;
        flex-direction: column-reverse;
        display: block;
    }

    .bottom-menu .mud-tabs-toolbar-content .mud-tabs-toolbar-wrapper {
        width: initial;
        transform: none !important;
    }

    .bottom-menu .mud-tooltip-root.mud-tooltip-inline {
        flex-grow: 1;
        width: calc(100% / 5) !important;
    }

    .bottom-menu .mud-tabs-scroll-button {
        content-visibility: hidden;
        display: none !important;
    }

    .bottom-menu .mud-tab-slider.mud-tab-slider-horizontal.mud-tab-slider-horizontal-reverse {
        width: calc(100% / 5) !important;
    }

    .bottom-menu .mud-tab {
        min-width: unset;
    }

    .copyright {
        display: none!important;
    }

    .index-page {
        margin-bottom: 55px;
    }

    .index-page .map-layout {
        display: flex !important;
        flex-direction: column-reverse;
    }

    .index-page .side-bar {
        width: auto;
    }

    .index-page .map-wrapper { 
        height: calc(var(--vh, 1vh) * 100 - var(--price-bands-height) - var(--toolbar-height) - var(--fuel-select-height) - var(--motormouth-logo-height) ) !important;
    }

    .index-page .map-wrapper-search {
        height: calc(var(--vh, 1vh) * 100 - var(--price-bands-height) - var(--toolbar-height) - var(--fuel-select-height) - var(--motormouth-logo-height) - var(--search-bar-height)) !important;
    }

    .index-page .map-wrapper-site-details {
        height: calc(var(--vh, 1vh) * 100 - var(--price-bands-height) - var(--toolbar-height) - var(--fuel-select-height) - var(--motormouth-logo-height) - var(--site-details-component) - 10px) !important;
    }

    .index-page .map-wrapper-site-details-price-reveal-bar {
        height: calc(var(--vh, 1vh) * 100 - var(--price-bands-height) - var(--toolbar-height) - var(--fuel-select-height) - var(--motormouth-logo-height) - var(--price-reveal-bar) - var(--site-details-component) - 10px) !important;
    }

    .index-page .map-wrapper-search-site-details {
        height: calc(var(--vh, 1vh) * 100 - var(--price-bands-height) - var(--toolbar-height) - var(--fuel-select-height) - var(--motormouth-logo-height) - var(--site-details-component) - 10px - var(--search-bar-height)) !important;
    }

    .index-page .map-wrapper-search-site-details-price-reveal-bar {
        height: calc(var(--vh, 1vh) * 100 - var(--price-bands-height) - var(--toolbar-height) - var(--fuel-select-height) - var(--motormouth-logo-height) - var(--price-reveal-bar) - var(--site-details-component) - 10px - var(--search-bar-height)) !important;
    }

    .index-page .map-wrapper-site-details-extended {
        height: calc(var(--vh, 1vh) * 100 - 421px) !important;
    }

    .index-page .map-wrapper-search-site-details-extended {
        height: calc(var(--vh, 1vh) * 100 - 421px - var(--search-bar-height)) !important;
    }

    .index-page .select-a-site {
        font-size: x-large;
        font-weight: 400;
        padding-top: 20px;
        margin-left: 10px;
    }

    .site-details {
        display: flex;
        flex-direction: column;
        padding-left: 15px;
        padding-right: 15px;
    }

    .site-details .site-details-inner{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }

    .site-details .site-details-inner .brand-price-row{
        display: flex;
        flex-direction: row;
        gap: 12px;
    }

    .site-details .brand-price-row .site-price-available {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    .site-details .brand-price-row .site-price-available .fuel-and-last-updated {
        font-size:0.75rem;
        margin-left: 35px;
    }

    .site-details .site-price-available .band-icon-price {
        display: flex !important;
        justify-content: start;
        align-items: center;
        font-size: 1.5rem;
        font-weight: 400;
        margin-bottom: 4px;
    }

    .site-details .brand-logo-image {
        height: 61px;
        width: 61px;
    }





    /*.site-details {
        display: flex !important;
    }

    .site-details .band-icon-price {
        display: flex !important;
        justify-content: start;
        align-items: center;
        font-size: 18px;
        font-weight: 400;
        flex: auto;
        margin-bottom: 4px;
    }

    .site-details .brand-address .brand-image {
        padding-left: 10px;
        padding-right: 10px;
    }

    .site-details .brand-address .brand-image .brand-logo-image {
        height: 51px;
        width: 51px;
    }

    .site-details .brand-address .site-address {
        padding-left: 10px;
        padding-right: 10px;
    }

    .site-details .site-details-address-wrapper {
        font-size: 11px;
    }*/

    .site-details-address {
        display: none !important;
    }

    .extended-site-details {
        height: 51px;
    }

    .fuel-select {
        position: inherit;
    }

    .faq-questions {
        min-width: 95% !important;
        flex-basis: 95% !important;
    }

    .faqs .bannertext {
        font-size: 2rem !important;
    }

    .faqs .bannersubtext {
        font-size: 0.66rem !important;
    }

    .reports {
        margin-bottom: 55px;
    }

    .navmenu .mud-nav-item {
        border-width: thin;
        border-radius: 4px;
        margin: 10px 10px 10px 10px;
        width: calc(100% - 20px);
        border-style: outset;
        box-shadow: 1px 1px 6px #aaaaaa;
        height: 7.5vh;
        align-items: center;
    }

    .side-bar-hr {
        display: none;
    }

    .grey-scale-icon {
        margin-right: 8px;
    }

    .chart-min-height {
        min-height: 150px;
    }

    .mud-table-container {
        min-height: 150px !important;
    }
}

/* bigger than 960px */
@media only screen and (min-width: 960px) {
    .bottom-menu {
        display: none !important;
    }

    .copyright {
        position: fixed;
        bottom: 0px;
        margin: 0 0 5px 10px;
        font-size: 11.5px;
        font-weight: 500;
    }

    .index-page .map-layout {
        display: flex !important;
    }

    .index-page .side-bar {
        width: 375px;
    }

    .index-page .map-wrapper {
        flex: auto;
        height: calc(100vh - 48px) !important;
    }

    .index-page .select-a-site {
        display: none !important;
    }

    .site-details {
        display: flex;
        flex-direction: column;
        padding-left: 15px;
        padding-right: 15px;
    }

    .site-details .site-details-inner {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }

    .site-details .brand-price-row{
        display: flex;
        flex-direction: row;
        gap: 12px;
    }

    .site-details .brand-price-row .site-price-available {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    .site-details .brand-price-row .site-price-available .fuel-and-last-updated {
        font-size:0.75rem;
        margin-left: 35px;
    }

    .site-details .site-price-available .band-icon-price {
        display: flex !important;
        justify-content: start;
        align-items: center;
        font-size: 1.5rem;
        font-weight: 400;
        margin-bottom: 4px;
    }

    .site-details .brand-logo-image {
        height: 61px;
        width: 61px;
    }

    .side-bar .searchbarandfuelselect {
        order: 1;
    }

    .side-bar .pricerevealcomponent {
        order: 2;
    }

    .side-bar .sitedetailscomponent {
        order: 3;
        margin-bottom: 0.5rem;
        animation: fadein 2s;
    }

    @keyframes fadein {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    .side-bar .pricebandcomponent {
        order: 4;
    }

    .side-bar-hr {
        width: 90%;
        margin-left: 5%;
        margin-top: 1rem;
    }

    .side-bar-hr hr {
        display: block;
        height: 1px;
        border: 0;
        border-top: 1px solid #ccc;
        margin: 1em 0;
        padding: 0;
    }

    .index-page .search-bar {
        padding-right: 12px;
    }
}

.map-wrapper {
    position: relative;
}

.site-label-popup {
    position: absolute;
    z-index: 2;
    background: white;
    border-color: black;
    padding: 1px 2px !important;
    color: black !important;
    top: 0px;
    left: 0px;
    visibility: hidden;
    width: fit-content;
    transform: translate(-100%, 0);
    white-space: nowrap
}

.price-reveal-entry-buttons {
    height: 35px;
    width: 35px;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 5px;
    font-size: 11px !important;
}

.price-reveal-entry-buttons:hover {
    cursor:pointer;
}
.mapboxgl-ctrl-geocoder {
    width: 100% !important;
    max-width: 100% !important;
    line-height: 20px !important;
}

.map-geolocator {
    color: black;
    background-color: white;
    padding-top: 3px !important;
}

.mapbox-container {
    width: 100%;
    height: 0px;
}

.mapboxgl-ctrl-geocoder--input {
    height: 36px !important;
}

.mapboxgl-ctrl-geocoder--icon-search {
    top: 8px !important;
}

.mapboxgl-ctrl-geocoder--icon-close {
    margin-top: 2px !important;
}

.site-details .brand-address .site-address .brand-sitename {
    font-size: 16px;
}

.site-details .band-icon-price .price-band-image {
    margin-right: 10px;
    height: 25px;
    width: 25px;
}

.site-details {
    margin-top: 6px;
}

.index-page .search-bar {
    display: flex !important;
    width: 100%;
}

.search-bar-background {
    background-color: #037b8b;
    z-index: 2;
}

.fuel-select-and-brand-filter-background {
    background-color: rgb(2,89,100);
}

.mud-list-item-gutters {
    padding-left: 8px !important;
    padding-right: 8px !important;
}


/*---------------------- TERMS AND CONDITIONS -------------------*/
.terms p {
    margin-bottom: 12px;
}

.terms ul {
    margin-bottom: 12px;
}

.terms h4 {
    margin-bottom: 8px;
    padding-top: 12px;
}

.terms .mud-grid-spacing-xs-3 {
    margin: 0 !important;
    width: 100% !important;
}

.terms {
    margin-bottom: 40px;
}

@media (max-width: 768px) {
    .terms .bannertext {
        font-size: 2rem;
    }
}

/*----------------------------- FAQS ----------------------------*/
.faqs .mud-expand-panel-text {
    color: var(--mud-palette-primary);
    font-size: larger;
    font-weight: 500;
}

.faqs .mud-expand-panel-text:hover {
    text-decoration: underline;
    text-decoration-color: var(--mud-palette-primary);
    text-decoration-thickness: 0.1rem;
}

.faqs p {
    margin-bottom: 10px;
}

.faqs .mud-grid-spacing-xs-3 {
    margin: 0 !important;
    width: 100% !important;
}

.faqs .bannerdiv {
    width: 100% !important;
}

.faqs {
    margin-bottom: 40px;
}

.faq-questions {
    padding-top: 8px !important;
}


/*----------------------------- Contact Us ----------------------------*/
.contactuswrapper {
    margin-bottom: 80px;
}

.contactusintro {
    padding: 12px 0 8px;
}

.contactus-paper {
    background: var(--mud-palette-background);
}

@media (max-width: 768px) {
    .contactuswrapper .bannertext {
        font-size: 2rem;
    }
}

/*----------------------------- Banner ----------------------------*/
.bannerdiv {
    position: relative;
    text-align: left;
    display: grid;
}

.bannertextdiv {
    display: flex;
    flex-direction: column;
    justify-content: left;
    margin: auto;
    padding: 20px;
    width: 1100px;
    grid-area: 1/2;
}

.bannertext {
    color: white;
    font-size: 3rem;
    font-weight: 400;
}

.bannerimage {
    max-height: 280px;
    min-height: 100px;
    width: 100vw;
    object-fit: cover;
    grid-area: 1/2;
}

.bannersubtext {
    font-size: large;
    color: #ffcc33ff;
    padding-bottom: 10px;
}

/*----------------------------- Errors ----------------------------*/
.errorwrapper {
    color: var(--mud-palette-error);
}

.mud-input-control > .mud-input-control-input-container > div.mud-input.mud-input-text {
    padding-bottom: 4px;
}

/*----------------------------- Pricebands ----------------------------*/
.band-region {
    background-color: #f8f4f4;
}

.band-font {
    font-size: 2.8vmin;
    margin-top: -0.2vh;
}

/* dark green */
.band-1.color {
    color: #333333;
    background-color: #00b300;
}

.band-1.grey {
    color: #FFFFFF;
    background-color: #000000;
}

/* light green */
.band-2.color {
    color: #333333;
    background-color: #A6FF4D;
}

.band-2.grey {
    color: #FFFFFF;
    background-color: #4D4D4D;
}

/* yellow */
.band-3.color {
    color: #333333;
    background-color: #FFD032;
}

.band-3.grey {
    color: #FFFFFF;
    background-color: #808080;
}

/* orange */
.band-4.color {
    color: #333333;
    background-color: #FF7200;
}

.band-4.grey {
    background-color: #BFBFBF;
    color: #000000 !important;
}

/* red */
.band-5.color {
    background-color: #FF0000;
    color: #FFFFFF
}

.band-5.grey {
    background-color: #FFFFFF;
    color: #000000 !important;
}

.highlighted-band {
    border-bottom-width: 2px;
    border-left-width: 2px;
    border-right-width: 2px;
    border-color: #000000;
}

/*----------------------------- Fuel Search -----------------------------*/
.fuel-select-color div {
    color: #ffffff !important;
}

.combined-fuels-header {
    border-top-style: solid;
    border-top-width: 0.5px;
    border-top-color: rgb(87,87,87,0.2) !important;
}

.combined-fuels-header.mud-list-item.mud-list-item-disabled p {
    font-weight: 600 !important;
    font-size: 0.72rem !important;
    color: var(--mud-palette-text-secondary) !important;
    opacity: 0.7 !important;
}

.search-bar-cross-icon {
    color: #ffffff !important;
}
/*----------------------------- About Us -----------------------------*/
.aboutus .breakout {
    padding: 30px;
    margin-top: 30px;
    margin-bottom: 30px;
    border-radius: 3px;
    font-size: 1rem;
    border-width: 2px;
}

.aboutus .hightlight {
    color: var(--mud-palette-primary-lighten);
    font-weight: 600;
}

.aboutus ul {
    list-style: disc !important;
    padding-left: 30px;
}

.aboutus .container {
    max-width: 970px;
    margin: auto;
    padding: 20px;
}

/*----------------------------- Privacy ---------------------------------*/

.privacy ul {
    list-style: disc !important;
    padding-left: 30px;
    margin-bottom: 12px;
}

.privacy a {
    color: var(--mud-palette-primary);
    font-size: 15px;
    font-weight: 600;
}

.privacy h4 {
    padding-top: 12px;
    margin-bottom: 8px;
}

.privacy .container {
    max-width: 970px;
    margin: auto;
    padding: 20px;
}

.privacy p {
    margin-bottom: 12px;
}

/*----------------------------- Price Reveal -----------------------------*/
.flash-bg {
    color: #fff;
    animation: blinkingBackground 0.5s infinite
}

.price-reveal-normal-background {
    color: #fff;
    background-color: rgb(2,89,100);
}

.price-reveal-50-background {
    color: #fff;
    background-color: rgb(255,193,7);
}

.price-reveal-10-background {
    color: #fff;
    background-color: rgb(244,67,54);
}

@keyframes blinkingBackground {
    0% {
        background-color: var(--mud-palette-dark);
    }

    50% {
        background-color: var(--mud-palette-primary);
    }

    100% {
        background-color: var(--mud-palette-dark);
    }
}

.expand-regions-link:hover {
    cursor: pointer;
}

/*----------------------------- Price Entry -----------------------------*/
.price-entry-container {
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 1400px;
    margin: auto;
    /* Firefox */
    /*height: -moz-calc(100% - 144px);*/
    /* WebKit */
    /*height: -webkit-calc(100% - 144px);*/
    /* Opera */
    /*height: -o-calc(100% - 144px);*/
    /* Standard */
    /*height: calc(100% - 144px);*/
}

.price-entry-card {
    flex-grow: 1;
    max-width: 400px;
    margin: 10px;
}

.price-entry-action-buttons-container {
    position: fixed;
    bottom: 58px;
    right: 10px;
}

/*----------------------------- Camera Feed -----------------------------*/
.camera-feed-container {
    height: 100vh;
    width: 100%;
    z-index: 9999;
}

.camera-capture-container {
    bottom: 0px;
    left: 50%;
    padding-bottom: 20px;
    position: fixed;
    transform: translateX(-50%);
}

.camera-cancel-container {
    position: fixed;
    top: 10px;
    right: 10px;
}

.camera-video-container {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.camera-video-container video {
    /* Make video to at least 100% wide and tall */
    min-width: 100%;
    min-height: 100%;
    /* Setting width & height to auto prevents the browser from stretching or squishing the video */
    width: auto;
    height: auto;
    /* Center the video */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

.grey-scale-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 2rem !important;
}

.grey-scale-icon {
    width: 30px;
    height: 30px;
}

/*----------------------------- Profile -----------------------------*/
.profile-image:hover {
    /*opacity: .5;*/
    -webkit-filter: brightness(70%);
    /*    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;*/
    cursor: pointer;
}

.profile-image.selected {
    border: 4px dashed var(--mud-palette-primary);
}

.profile-action-buttons-container {
    position: sticky;
    bottom: 58px;
    right: 10px;
}

/*----------------------------- Authentication -----------------------------*/
.startup-auth-flex-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    max-width: 470px;
    height: 100%;
    margin: auto;
}

.startup-auth-flex-row {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: white;
    padding: 40px 30px;
    width: 100%;
}

.startup-background {
    width: 100vw;
    height: 100vh;
    background-color: #037b8b;
    background-image: url(../assets/app_bg.png);
}

/*----------------------------- Switch Component Layout -----------------------------*/
.switch-layout-container {
    position: relative;
}

.switch-layout-label {
    margin-right: 58px;
}

.switch-layout-switch-position {
    margin-right: 0px;
    width: 58px;
    position: absolute;
    top: 0;
    right: -15px;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}
.mapboxgl-ctrl-logo {
    display: none !important;
}

/*----------------------------- Brand Filter -----------------------------*/
.mud-list-item-icon {
    min-width: 5px;
    margin-right: 5px;
    margin-left: 0px;
}

/*----------------------------- Static Page ----------------------------*/
.static-page .container {
    max-width: 1100px;
    margin: auto;
    padding: 20px;
}

.static-page .breakout {
    padding: 30px;
    margin-top: 30px;
    margin-bottom: 30px;
    border-radius: 3px;
    font-size: 1rem;
    border-width: 2px;
}

.static-page .hightlight {
    color: var(--mud-palette-primary-lighten);
    font-weight: 600;
}

.static-page ul {
    list-style: disc !important;
    padding-left: 30px;
}

.features .bannerdiv {

}

/*----------------------------- Features Page ----------------------------*/
.marketing .panel-default {
    height: 428px;
    min-height: 420px;
    margin-bottom: 30px;
    border-radius: 3px;
    border-width: 2px;
}

.marketing .panel-body {
    padding: 30px !important;
}

.circle-icon {
    height: 180px;
    display: block;
    text-align: center;
    line-height: 180px;
    margin: 0 auto;
}

@media (min-width: 768px) {
    .marketing .col {
        width: 33.33333333%;
        float: left;
        position: relative;
        padding-right: 15px;
        padding-left: 15px;
        text-align:center;
    }
}