html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}
.vendingContainer {
    padding-left: 50px;
    padding-right: 50px;
}
.scrollableTable {
    height: 75vh;
    overflow-y: auto;
}

.mapboxgl-popup {
    max-width: 150px !important;
}

.mapboxgl-popup-content {
    background: rgba(255,255,255,.90);
    border-radius: 15px;
}

.custom-marker-style {
    background-color: black;
}

.markerImage {
    width: 100px;
}

.zoomBtn {
    border-radius: 10px;
    font-size: 12px;
    background-color: #ffb300;
}

table tr td {
    padding: 10px;
    text-align: center;
}

th {
    text-align: center;
}

.beverageKey {
    background-color: #0E87CC;
    height: 15px;
    width: 25px;
    display: inline-block;
}

.keyDescription {
    display: inline-block;
    padding-right: 50px;
}

.foodKey {
    display: inline-block;
    background-color: #ffae42;
    height: 15px;
    width: 25px;
}

.bothKey {
    display: inline-block;
    background-color: #ff5c00;
    height: 15px;
    width: 25px;
}
.style--right {
    font-weight: bold;
    font-size: 12px;
    float:right;
    display:inline-block;
}
.style--right a {
    color: black;
}
.chkLabel {
    padding-right: 2%;
}
.chkGroup {
    border: 3px solid black;
    padding: 30px 10px 10px 10px;
    border-radius:14px;
    margin-bottom:20px;
}
@media all and (min-width:960px) and (max-width: 1024px) {

}
@media all and (min-width:801px) and (max-width: 959px) {
    .vendingContainer {
        min-width: 100%;
        padding-left: 10px;
        padding-right: 20px;
    }

    .phoneMap {
        position: relative;
        top: 0vh;
        min-width: 100vw;
        min-height: 50vh;
    }

    .phoneSearch {
        position: relative;
        padding-top: 20px;
    }
}
@media all and (min-width:769px) and (max-width: 800px) {
    .vendingContainer {
        min-width: 100%;
        padding-left: 10px;
        padding-right: 20px;
    }

    .phoneMap {
        position: relative;
        top: 0vh;
        min-width: 100vw;
        min-height: 50vh;
    }

    .phoneSearch {
        position: relative;
        padding-top: 20px;
    }
}
@media all and (min-width:569px) and (max-width: 768px) {
    .vendingContainer {
        min-width: 100%;
        padding-left: 10px;
        padding-right: 20px;
    }

    .phoneMap {
        position: relative;
        top: 0vh;
        min-width: 100vw;
        min-height: 50vh;
    }

    .phoneSearch {
        position: relative;
        padding-top: 20px;
    }
}
@media all and (min-width:481px) and (max-width: 568px) {
    .vendingContainer{
        min-width: 100%;
        padding-left: 10px;
        padding-right: 20px;
    }
    .phoneMap {
        position: relative;
        top: 0vh;
        min-width: 100vw;
        min-height: 40vh;
    }
    .phoneSearch {
        position:relative;
        padding-top: 20px;
        /*top:100vh;*/
       /* left:-40%;*/
        /*min-width:50%;*/ /*PUT THIS TO 100% AND THE MAP WONT SHOW UP EVEN WHEN THE CONTAINER IS AT 100 PERCENT NEED TO TROUBLESHOOT ON WHERE THE MAP IS GOING TO AND HOW TO GET IT TO SHOW UP???*/
    }
    .ptfooter {
        /*top:100vh;*/
    }
    .vcu-brandbar__container {
       /* display: none;
        opacity: 0;*/
    }

}
/*TARGETS ANDRIOD RAZOR FLIP PHONE*/
@media all and (min-width:321px) and (max-width: 413px) {
    .vendingContainer {
        min-width: 100%;
        padding-left: 10px;
        padding-right: 20px;
    }

    .phoneMap {
        position: relative;
        top: 0vh;
        min-width: 100vw;
        min-height: 40vh;
    }

    .phoneSearch {
        position: relative;
        padding-top: 20px;
    }
}
/*TARGETS IPHONE UP TO 14*/
@media all and (min-width:414px) and (max-width: 480px) {
    .vendingContainer {
        min-width: 100%;
        padding-left: 10px;
        padding-right: 20px;
    }

    .phoneMap {
        position: relative;
        top: 0vh;
        min-width: 100vw;
        min-height: 40vh;
    }

    .phoneSearch {
        position: relative;
        padding-top: 20px;
    }
}
@media all and (min-width:0px) and (max-width: 320px) {
    .vendingContainer {
        min-width: 100%;
        padding-left: 10px;
        padding-right: 20px;
    }

    .phoneMap {
        position: relative;
        top: 0vh;
        min-width: 100vw;
        min-height: 40vh;
    }

    .phoneSearch {
        position: relative;
        padding-top: 20px;
    }
}