@import "all.min.css";
@import "https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap";

:root{
    --primary: #21a649;
    --secondary: #11998e;
    --headings-color: #32325d;
    --text-color: #425466;
    --scrollbar-color: #ccc;
    --cat-size:6px;
    --places-font-size:.75rem;
    --places-desc-font-size:.625rem;
    --max-heading-width: 300px;
    --font-family:'Ubuntu', Arial, sans-serif;
    --popup-heading-size:.75rem;
    --popup-desc-size:.625rem;

    --campus:#21a649;
    --dormitory:#09c;
    --metro:#475bcc;
    --street_art:#4a4284;
    --art:#4a4284;
    --sculpture:#2e3192;
    --cantina:#f7931e;
    --club:#93278f;
    --hospital:#425466;

    --check-size: 1.25em;
    --check-border: 2px;
    --check-bg: linear-gradient(to left, #11998e, #21a649);
    --check-brd-color:#11998e;
}

*,
*:after,
*:before {
    box-sizing: border-box;
}

::-webkit-scrollbar {
    width: 3px;
    height: 3px;
    border-left: 0;
    background: rgba(0, 0, 0, 0.1);
}

::-webkit-scrollbar-track {
    background: none;
}

::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background: var(--scrollbar-color);
}

body {
    color: #404040;
    font: 400 15px/22px var(--font-family);
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
}

.sidebar {
    position: absolute;
    width: 20%;
    height: 100%;
    top: 0;
    left: 0;
    overflow: hidden;
}

.map {
    position: absolute;
    left: 20%;
    width: 80%;
    top: 0;
    bottom: 0;
}

.sidebar__heading{
    padding: .25rem 1rem;
    display: flex;
    align-items: center;
    background: linear-gradient(to left, #11998e, #21a649);

}
.sidebar__heading-text{
    font-weight: 500;
    letter-spacing: .025em;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,.1);
    margin-right: auto;
}

.sidebar__heading-btn{
    background: transparent;
    color: rgba(255,255,255,.8);
    padding: .5rem;
    border-radius:.25rem;
    border: none;
}
.sidebar__heading-btn.active{
    color: #fff;
    background: rgba(0,0,0,.1);
    box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
}

a{
    color: #404040;
    text-decoration: none;
}
.vt__link{
    color:#09c;
}
.vt__link:hover{
    color: #02bef8;
}

a:hover {
    color: #101010;
}

.listings {
    height: 100%;
    overflow: auto;
    padding-bottom: 60px;
}

.listings .item {
    position: relative;
    display: flex;
    gap: .125rem;
    flex-direction: column;
    border-bottom: 1px solid #eee;
    padding: 10px 10px 10px 1.5rem;
    text-decoration: none;
}

.listings .item:last-child {
    border-bottom: none;
}
.place__title{
    display: block;
    max-width: var(--max-heading-width);
    font-size: var(--places-font-size);
    color: #32325d;
    line-height: 1.25;
}
.place__desc{
    display: block;
    font-size: var(--places-desc-font-size);
    color: var(--text-color);
    line-height: 1.25;
}

.listings .item .title small {
    font-weight: 400;
}
.item.active .place__title,
.item .place__title:hover {
    color: #09c;
}
.listings .item.active {
    background-color: #f8f8f8;
}


.marker {
    border: none;
    cursor: pointer;
    height: 56px;
    width: 56px;
    background-image: url('../img/marker.svg');
}
.marker--dormitory{
    background-image: url('../img/marker-dormitory.svg');
}
.marker--metro{
    background-image: url('../img/marker-metro.svg');
}
.marker--street_art{
    background-image: url('../img/marker-street_art.svg');
}
.marker--cantina{
    background-image: url('../img/marker-cantina.svg');
}

.marker--club{
    background-image: url('../img/marker-club.svg');
}

.marker--hospital{
    background-image: url('../img/marker-hospital.svg');
}

.marker--art{
    background-image: url('../img/marker-art.svg');
}

.marker--sculpture{
    background-image: url('../img/marker-sculpture.svg');
}


.item::after{
    position: absolute;
    left: .5rem;
    top: 50%;
    transform: translateY(-50%) ;
    content:"";
    width: var(--cat-size);
    height: var(--cat-size);
    border-radius: 50%;
    display: block;
    font-size: .75rem;
}

.item--campus::after,
.location--campus{
    background:var(--campus);
}
.item--dormitory::after,
.location--dormitory{
    background:var(--dormitory);
}
.item--metro::after,
.location--metro{
    background:var(--metro);
}
.item--street_art::after,
.location--street_art{
    background:var(--street_art);
}
.item--cantina::after,
.location--cantina{
    background:var(--cantina);
}

.item--club::after,
.location--club{
    background:var(--club);
}

.item--hospital::after,
.location--hospital{
    background:var(--hospital);
}

.item--art::after,
.location--art{
    background:var(--art);
}

.item--sculpture::after,
.location--sculpture{
    background:var(--sculpture);
}


/* Marker tweaks */
.mapboxgl-popup {
    padding-bottom: 40px;
}

.mapboxgl-popup-close-button {
    display: none;
}
.mapboxgl-popup-content {
    font: 400 15px/22px var(--font-family);
    padding: 0;
}

.location__title {
    text-align: center;
    padding: .25rem 1rem;
    font-size: var(--popup-heading-size);
    color: #fff;
    border-radius: 3px 3px 0 0;
    font-weight: 500;
    margin: -15px 0 0 0;
    line-height: 1;
}
.location__desc {
    text-align: center;
    padding: .25rem 1rem;
    font-size: var(--popup-desc-size);
    line-height: 1.25;
}

.mapboxgl-popup-anchor-top > .mapboxgl-popup-content {
    margin-top: 15px;
}

.mapboxgl-popup-anchor-top > .mapboxgl-popup-tip {
    border-bottom-color: #21a649;
}

.mapboxgl-ctrl-pitchtoggle-3d {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMCIgaGVpZ2h0PSIzMCI+ICAgIDx0ZXh0IHg9IjUwJSIgeT0iNTAlIiBkeT0iLjM1ZW0iIHN0eWxlPSJmb250LXNpemU6IDE0cHg7IGZvbnQtZmFtaWx5OiAnSGVsdmV0aWNhIE5ldWUnLEFyaWFsLEhlbHZldGljYSxzYW5zLXNlcmlmOyBmb250LXdlaWdodDogYm9sZDsgdGV4dC1hbmNob3I6IG1pZGRsZTsiPjNEPC90ZXh0Pjwvc3ZnPg==);
}

.mapboxgl-ctrl-pitchtoggle-2d {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMCIgaGVpZ2h0PSIzMCI+ICAgIDx0ZXh0IHg9IjUwJSIgeT0iNTAlIiBkeT0iLjM1ZW0iIHN0eWxlPSJmb250LXNpemU6IDE0cHg7IGZvbnQtZmFtaWx5OiAnSGVsdmV0aWNhIE5ldWUnLEFyaWFsLEhlbHZldGljYSxzYW5zLXNlcmlmOyBmb250LXdlaWdodDogYm9sZDsgdGV4dC1hbmNob3I6IG1pZGRsZTsiPjJEPC90ZXh0Pjwvc3ZnPg==);
}

.mapboxgl-ctrl-extruded:before,
.mapboxgl-ctrl-not-extruded:before{
    content: "\f1b2";
    font-weight: 900;
    font-family: "Font Awesome 5 Free", sans-serif;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
}
.mapboxgl-ctrl-not-extruded:before{
    content: "\f0c8";
}

.slideshow{
    position: relative;
}
.slideshow__slide{
}
.slideshow__img{
    display: block;
    width: 100%;
    border-radius: .25rem;
}
.slideshow__caption{
    background:#eee;
}
.slideshow__prev{
    position: absolute;
    left: .25rem;
    top:50%;
}
.slideshow__next{
    position: absolute;
    right: .25rem;
    top:50%;
}
.filters{
    display: block;
    z-index: 1;
    position: absolute;
    margin: .25rem;
    border-radius: .25rem;
    background: #fff;
    padding: .5rem 1rem .5rem .5rem;
}

.filter__item{
    display: flex;
    align-items: center;
}

.filter__item +.filter__item{
    margin-top: .25rem;
}

.filter__checkbox{
    position: absolute;
    z-index: -1;
    opacity: 0;
}
.filter__checkbox+label {
    display: inline-flex;
    align-items: center;
    user-select: none;
}
.filter__checkbox+label::before {
    content: '';
    display: inline-block;
    width: var(--check-size);
    height: var(--check-size);
    flex-shrink: 0;
    flex-grow: 0;
    border: 1px solid var(--check-brd-color);
    border-radius: 0.25em;
    margin-right: 0.5em;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 50% 50%;
}
.filter__checkbox:checked+label::before {
    border-color: transparent;
    background: var(--check-bg);
}

.filter__checkbox:checked+label::after{
    content: "";
    display: inline-block;
    width: 8px;
    height: 4px;
    transform: rotate(-45deg) translate(3px, 2px);
    border-left: var(--check-border) solid #fff;
    border-bottom: var(--check-border) solid #fff;
    position: absolute;
}