:root {
    /* Main */
    --primary-color: 	#ffffff;
    --secondary-color: 	#e6e6e6;
    --tertiary-color: 	#d9d9d9;
    --accent-color:		hsl(9, 95%, 64%);

    --primary-hover: #e6e6e6;
    --primary-active: #d6d6d6;

    /* Text */
    --text-hi-color: #262626;
    --text-lo-color: #808080;
    --text-mt-color: #e6e6e6;

    /* Header buttons */
    --header-button-color:	#a6a6a6;
    --header-button-hover:	#737373;
    --header-button-active:	#595959;

    /* Filled buttons */
    --button-text-color: #ffffff;
    --button-lighter-border: #fca697;
    --button-color: linear-gradient(0, #ef583e, #fb7b65);
    --button-hover: linear-gradient(0, #e24c32, #f16d55);
    --button-active: #e24c32;
    --button-active-border: #b93d27;

    /* UI buttons */
    --ui-button-color: hsl(0, 0%, 50%);
    --ui-button-hover: hsl(0, 0%, 30%);

    /* Specific colors */
    --bar-active-color: 	#b994c7;
    --cafe-active-color: 	#bc8e7f;
    --club-active-color: 	#7fadbc;
    --park-active-color: 	#6cb179;
    --pub-active-color: 	#ce8d8d;
    --social-active-color:  #deb47d;

    --shadow: #00000030;
    --map-background-color: #d7dbdb;

    /* Font */
    --ff: "Nunito", sans-serif;
    --fw-regular: 500;
    --fw-bold: 600;
    --fs-xs: 0.750rem;
    --fs-s: 0.875rem;
    --fs-m: 1.000rem;
    --fs-l: 1.125rem;

    /* Spacing */
    --gap-xxs: 0.125rem;
    --gap-xs: 0.250rem;
    --gap-s: 0.500rem;
    --gap-m: 1.000rem;
    --gap-l: 2.000rem;
    --gap-xl: 4.000rem;
    --gap-xxl: 8.000rem;
}

:root[data-theme="dark"] {
    /* Main */
    --primary-color:	#333333;
    --secondary-color:	#1a1a1a;
    --tertiary-color:	#262626;
    --accent-color:		hsl(9, 85%, 64%);

    --primary-hover: #424242;
    --primary-active: #525252;
    
    /* Text */
    --text-hi-color:	#e6e6e6;
    --text-lo-color:	#858585;
    --text-mt-color:	#454545;

    /* Header button */
    --header-button-color:	#4d4d4d;
    --header-button-hover:	#808080;
    --header-button-active:	#999999;

    /* Filled buttons */
    --button-lighter-border: hsl(9, 79%, 74%);
    --button-color: linear-gradient(0, hsl(9, 60%, 54%), hsl(9, 80%, 64%));
    --button-hover: linear-gradient(0, hsl(9, 50%, 49%), hsl(9, 70%, 59%));
    --button-active: hsl(9, 50%, 49%);
    --button-active-border: hsl(9, 50%, 39%);

    /* UI buttons */
    --ui-button-color:	hsl(0, 0%, 60%);
    --ui-button-hover:	hsl(0, 0%, 90%);

    /* Specific colors */
    --bar-active-color: 	#8e5ea1;
    --cafe-active-color: 	#875d4f;
    --club-active-color: 	#4f7987;
    --park-active-color: 	#42704b;
    --pub-active-color: 	#ac5353;
    --social-active-color:  #c68939;

    --map-background-color: #272727;
}

/*_  __          _____ _   _ 
|  \/  |   /\   |_   _| \ | |
| \  / |  /  \    | | |  \| |
| |\/| | / /\ \   | | | . ` |
| |  | |/ ____ \ _| |_| |\  |
|_|  |_/_/    \_\_____|_| \_|*/

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

html {
    font-size: 16px;
}

html, body {
    height: 100%;
}

body {
    display: flex;
    flex-direction: column;
    background-color: var(--primary-color);
    font-family: var(--ff);
}

/*______ ________   _________ 
|__   __|  ____\ \ / /__   __|
   | |  | |__   \ V /   | |   
   | |  |  __|   > <    | |   
   | |  | |____ / . \   | |   
.  |_|  |______/_/ \_\  |_|*/

.text--family { font-family: "Nunito", sans-serif; }

.text--sm { font-size: var(--fs-s); }
.text--md { font-size: var(--fs-m); }
.text--lg { font-size: var(--fs-l); }

.text--regular { font-weight: var(--fw-regular); }
.text--bold { font-weight: var(--fw-bold); }

.text--primary { color: var(--text-hi-color); }
.text--secondary { color: var(--text-lo-color); }
.text--accent { color: var(--accent-color); }
.text--muted { color: var(--text-mt-color); }

.text--clickable { cursor: pointer; }
.text--clickable:hover { text-decoration: underline; }

/*____ _______      _______ 
|  __ \_   _\ \    / / ____|
| |  | || |  \ \  / / (___  
| |  | || |   \ \/ / \___ \ 
| |__| || |_   \  /  ____) |
|_____/_____|   \/  |_____/ */

.status-container {
    position: relative;
}

.content {
    margin-inline: 10%;
    margin-top: 3rem;
}

.mainframe {
    display: flex;
    flex-grow: 1;
    position: relative;
    overflow: hidden;
}

/*    _ _____ 
| |  | |_   _|
| |  | | | |  
| |  | | | |  
| |__| |_| |_ 
.\____/|_____|*/

.button {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--ff);
    font-size: var(--fs-s);
    padding: var(--gap-xs) var(--gap-m);
    border: thin solid transparent;
    border-radius: var(--gap-s);
    cursor: pointer;
    white-space: nowrap;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: -moz-none;
    -o-user-select: none;
    user-select: none;
}

.button__icon {
    fill: var(--button-text-color);
}

.button--large {
    padding: var(--gap-m);
}

.button--filled {
    color: var(--button-text-color);
    background: var(--button-color);
    background-origin: border-box;
    border-top: thin solid var(--button-lighter-border);
    box-shadow: 0 2px 4px var(--shadow);
}

.button--outlined {
    color: var(--accent-color);
    background-color: transparent;
    border: thin solid var(--accent-color);
}

.button--filter {
    font-weight: var(--fw-bold);
    color: var(--text-hi-color);
    background-color: #88888850;
}

.ui-button {
    position: absolute;
    top: var(--gap-s);
    right: var(--gap-s);
    background: none;
    border: none;
    cursor: pointer;
    fill: var(--ui-button-color);
}

.button--place {
    display: flex;
    position: absolute;
    align-items: center;
    justify-content: center;
    gap: var(--gap-xs);
    bottom: var(--gap-l);
    left: 50%;
    transform: translate(-50%, 0);
    z-index: 1000;
}

/*    _ ______          _____  ______ _____  
| |  | |  ____|   /\   |  __ \|  ____|  __ \ 
| |__| | |__     /  \  | |  | | |__  | |__) |
|  __  |  __|   / /\ \ | |  | |  __| |  _  / 
| |  | | |____ / ____ \| |__| | |____| | \ \ 
|_|  |_|______/_/    \_\_____/|______|_|  \_\*/

.header {
    display: flex;
    height: 3rem;
    background-color: var(--secondary-color);
    justify-content: space-between;
    border-bottom: thin solid #00000020;
    z-index: 1050;
}

.header__section {
    display: flex;
    align-items: center;
    height: 100%;
}

.header__button {
    display: flex;
    flex-shrink: 0;
    width: 1.5rem;
    height: 1.5rem;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    fill: var(--header-button-color);
}

.header__button--outer {
    margin-inline: var(--gap-m);
}

.user-menu {
    display: flex;
    position: relative;
    width: auto;
    height: 100%;
    padding: 0 var(--gap-m);
    font-size: var(--fs-s);
    align-items: center;
    justify-content: center;
    gap: var(--gap-xs);
    color: var(--text-hi-color);
    user-select: none;
    cursor: pointer;
    z-index: 405;
}

.user-menu--active {
    text-decoration: underline;
    background-color: var(--primary-color);
    box-shadow: 0 0 3px var(--shadow);
}

.user-menu--active .dropdown {
    display: block;
}

.user-menu__label {
    overflow-x: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-menu__icon {
    flex-shrink: 0;
    fill: var(--header-button-color);
}

.dropdown {
    display: none;
    position: absolute;
    width: 100%;
    top: 100%;
    right: 0;
    padding: var(--gap-s) 0;
    border-radius: 0 0 var(--gap-xs) var(--gap-xs);
    background-color: var(--primary-color);
    list-style-type: none;
    box-shadow: 0 4px 3px var(--shadow);
    cursor: default;
}

.dropdown__item {
    display: flex;
    align-items: center;
    padding: var(--gap-s) var(--gap-m);
    gap: var(--gap-s);
    color: var(--text-lo-color);
    cursor: pointer;
}

.dropdown__icon {
    width: 1.3rem;
    height: 1.3rem;
    fill: var(--text-lo-color);
    flex-shrink: 0;
}

/*_____ _____ _____  ______   __  __ ______ _   _ _    _ 
 / ____|_   _|  __ \|  ____| |  \/  |  ____| \ | | |  | |
| (___   | | | |  | | |__    | \  / | |__  |  \| | |  | |
 \___ \  | | | |  | |  __|   | |\/| |  __| | . ` | |  | |
 ____) |_| |_| |__| | |____  | |  | | |____| |\  | |__| |
|_____/|_____|_____/|______| |_|  |_|______|_| \_|\____/ */

.side-menu {
    display: flex;
    flex-direction: column;
    position: absolute;
    padding: var(--gap-m);
    height: 100%;
    left: -15rem;
    width: 15rem;
    background-color: var(--primary-color);
    box-shadow: 0 0 5px var(--shadow);
    transition: left 200ms;
    z-index: 1050;
}

.side-menu.open {
    left: 0px;
}

.side-menu__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 1050;
    animation: dim-in 300ms forwards;
}

.category {
    display: flex;
    flex-direction: column;
    gap: var(--gap-s);
}

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

.category__label {
    font-weight: var(--fw-regular);
    font-size: var(--fs-m);
    color: var(--text-hi-color)
}

.floating__filters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-xs);
}

.menu-interruption {
    border: none;
    border-top: thin solid var(--tertiary-color);
    margin: var(--gap-m) 0;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: -moz-none;
    -o-user-select: none;
    user-select: none;
}

.disabled {
    cursor: default;
    pointer-events: none;
    user-select: none;
    color: var(--text-mt-color);
}

.disabled svg {
    fill: var(--text-mt-color);
}

@keyframes dim-in {
    from { background-color: #00000000; }
    to { background-color: #00000040; }
}

/*_____ ____  _____  __  __ 
|  ____/ __ \|  __ \|  \/  |
| |__ | |  | | |__) | \  / |
|  __|| |  | |  _  /| |\/| |
| |   | |__| | | \ \| |  | |
|_|    \____/|_|  \_\_|  |_|*/

.popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    animation: blur-in 300ms forwards;
    z-index: 1100;
}

.popup-container {
    visibility: hidden;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1100;
}

.popup-content {
    display: flex;
    flex-direction: column;
    position: relative;
    top: 50%;
    left: 50%;
    width: 23rem;
    gap: var(--gap-m);
    visibility: visible;
    padding: var(--gap-l);
    transform: translate(-50%, -50%);
    background-color: var(--primary-color);
    border-radius: var(--gap-s);
    box-shadow: 0 0 10px var(--shadow);
}

.form-layout {
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: space-between;
    gap: var(--gap-l);
}

.form-groups-container {
    display: flex;
    flex-direction: column;
    gap: var(--gap-m);
}

.form-group {
    display: flex;
    flex-direction: column;
    position: relative;
}

.form-field {
    width: 100%;
    padding: var(--gap-s);
    color: var(--text-hi-color);
    background-color: var(--primary-color);
    border: thin solid var(--tertiary-color);
    border-radius: var(--gap-s);
}

.form-field:focus {
    border: thin solid transparent;
    outline: thin solid var(--accent-color);
}

.form-select-custom {
    appearance: none;
    background: var(--primary-color) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 6"><path d="M0 0l5 6 5-6H0z" fill="%2388888888"/></svg>') no-repeat right var(--gap-s) center;
    background-size: 10px;
}

.form__caption {
    margin-top: var(--gap-xs);
}

.suggestions-container {
    margin-top: var(--gap-xs);
    visibility: hidden;
    position: absolute;
    top: 100%;
    width: 100%;
    max-height: 150px;
    overflow-y: auto;
    list-style-type: none;
    background-color: var(--primary-color);
    box-shadow: 0 0 5px var(--shadow);
    z-index: 1000;
}

.suggestions-container li {
    font-size: 0.875rem;
    padding: 10px;
    cursor: pointer;
}

.suggestion-primary {
    color: var(--text-hi-color);
    user-select: none;
}

.suggestion-secondary {
    color: var(--text-lo-color);
    user-select: none;
}

.form-alert {
    display: none;
    align-items: center;
    gap: var(--gap-s);
    font-family: Arial, Helvetica, sans-serif;
    font-size: var(--fs-s);
    color: indianred;
}

.failure-icon {
    flex-shrink: 0;
    width: 1.5rem;
    height: 1.5rem;
    fill: indianred;
}

.required:after {
    content: "*";
    color: var(--accent-color);
}

.hidden {
    display: none;
}

@keyframes blur-in {
    from {
        background-color: #00000000;
    }
    to {
        background-color: #00000040;
        backdrop-filter: blur(5px);
    }
}

/*______       ____  _      ______  _____ 
|__   __|/\   |  _ \| |    |  ____|/ ____|
   | |  /  \  | |_) | |    | |__  | (___  
   | | / /\ \ |  _ <| |    |  __|  \___ \ 
   | |/ ____ \| |_) | |____| |____ ____) |
.  |_/_/    \_\____/|______|______|_____/*/

.table-title {
    font-weight: var(--fw-bold);
    color: var(--text-hi-color);
    margin-bottom: var(--gap-m);
}

.table-main {
    margin-bottom: 10%;
    width: 100%;
    overflow: hidden;
    border-collapse: collapse;
    text-align: left;
    border-radius: var(--gap-s) var(--gap-s) 0 0;
    border-bottom: 2px solid var(--tertiary-color);
}

.table-header {
    color: var(--text-hi-color);
    background-color: var(--secondary-color);
}

.table-body {
    color: var(--text-lo-color);
}

.table-row {
    height: 100%;
    border-bottom: 1px solid var(--tertiary-color);
}

.table-cell {
    height: 100%;
    padding: var(--gap-m);
}

.table-action {
    display: flex;
    height: 100%;
    align-items: center;
    white-space: nowrap;
    gap: var(--gap-xs);
}

/*_____ _______    _______ _    _  _____ 
 / ____|__   __|/\|__   __| |  | |/ ____|
| (___    | |  /  \  | |  | |  | | (___  
 \___ \   | | / /\ \ | |  | |  | |\___ \ 
 ____) |  | |/ ____ \| |  | |__| |____) |
|_____/   |_/_/    \_\_|   \____/|_____/ */

.server-message {
    position: absolute;
    width: 100%;
    z-index: 1000;
}

.info {
    margin: var(--gap-s);
    padding: var(--gap-s) 2.3rem;
    color: #355d9b;
    background: #d3ebff url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="%23355d9b"><path d="M480-280q17 0 28.5-11.5T520-320v-160q0-17-11.5-28.5T480-520q-17 0-28.5 11.5T440-480v160q0 17 11.5 28.5T480-280Zm0-320q17 0 28.5-11.5T520-640q0-17-11.5-28.5T480-680q-17 0-28.5 11.5T440-640q0 17 11.5 28.5T480-600Zm0 520q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Z"/></svg>') no-repeat left var(--gap-s) center;
    border-radius: var(--gap-s);
}

.success {
    margin: var(--gap-s);
    padding: var(--gap-s) 2.3rem;
    color: #189a18;
    background: #91ee91 url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="%23189a18"><path d="m424-408-86-86q-11-11-28-11t-28 11q-11 11-11 28t11 28l114 114q12 12 28 12t28-12l226-226q11-11 11-28t-11-28q-11-11-28-11t-28 11L424-408Zm56 328q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Z"/></svg>') no-repeat left var(--gap-s) center;
    border-radius: var(--gap-s);
}

.error {
    margin: var(--gap-s);
    padding: var(--gap-s) 2.3rem;
    color: #8b0000;
    background: #f08080 url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="%238b0000"><path d="m480-424 116 116q11 11 28 11t28-11q11-11 11-28t-11-28L536-480l116-116q11-11 11-28t-11-28q-11-11-28-11t-28 11L480-536 364-652q-11-11-28-11t-28 11q-11 11-11 28t11 28l116 116-116 116q-11 11-11 28t11 28q11 11 28 11t28-11l116-116Zm0 344q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Z"/></svg>') no-repeat left var(--gap-s) center;
    border-radius: var(--gap-s);
}

/*      ______          ______ _      ______ _______ 
| |    |  ____|   /\   |  ____| |    |  ____|__   __|
| |    | |__     /  \  | |__  | |    | |__     | |   
| |    |  __|   / /\ \ |  __| | |    |  __|    | |   
| |____| |____ / ____ \| |    | |____| |____   | |   
|______|______/_/    \_\_|    |______|______|  |_|   */

.leaflet-container {
    background-color: var(--map-background-color) !important;
}

.leaflet-tile-pane.dark {
    filter: grayscale(1) invert(1);
}

.leaflet-control-attribution {
    color: var(--text-lo-color) !important;
    background-color: var(--primary-color) !important;
}

.leaflet-popup-content-wrapper, .leaflet-popup-tip {
    background-color: var(--primary-color) !important;
}

.marker-cluster-unique {
    display: flex !important;
    justify-content: center;
    align-items: center;
    background-image: url('../res/cluster.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.marker-cluster-unique span {
    color: white;
    font-weight: bold;
    text-shadow: 0 0 2px #4A0404;
    padding-bottom: var(--gap-xxs);
}

.leaflet-popup-content .marker-popup-text {
    margin: 1em 0;
}

.marker-popup-title {
    font-family: var(--ff);
    font-weight: var(--fw-bold);
    color: var(--text-hi-color);
}

.marker-popup-text {
    color: var(--text-lo-color);
}

.marker-popup-tag {
    font-family: var(--ff);
    font-weight: var(--fw-bold);
    font-size: var(--fs-xs);
    display: inline-block;
    padding: var(--gap-xxs) 0.6rem;
    border-radius: 100px;
    color: var(--text-hi-color) !important;
}

/*____ _____      
|_   _|  __ \     
  | | | |  | |___ 
  | | | |  | / __|
 _| |_| |__| \__ \
|_____|_____/|___/*/

#searchbar {
    width: 10rem;
    padding: 0.3rem var(--gap-s);
    color: var(--text-hi-color);
    background-color: var(--primary-color);
    border: none;
    border-radius: var(--gap-s);
}

#bar.active, #bar-popup-tag {
    background-color: var(--bar-active-color);
}

#cafe.active, #cafe-popup-tag {
    background-color: var(--cafe-active-color);
}

#club.active, #club-popup-tag {
    background-color: var(--club-active-color);
}

#park.active, #park-popup-tag {
    background-color: var(--park-active-color);
}

#pub.active, #pub-popup-tag {
    background-color: var(--pub-active-color);
}

#social.active, #social-popup-tag {
    background-color: var(--social-active-color);
}

#map {
    flex-grow: 1;
    transition: filter 200ms;
}

/*_  __ ______ _____ _____          
|  \/  |  ____|  __ \_   _|   /\    
| \  / | |__  | |  | || |    /  \   
| |\/| |  __| | |  | || |   / /\ \  
| |  | | |____| |__| || |_ / ____ \ 
|_|  |_|______|_____/_____/_/    \_\*/ 

@media only screen and (max-width: 500px) {
    .button--filter {
        padding: var(--gap-s) var(--gap-m);
    }

    .header {
        border-top: thin solid #00000020;
    }

    .popup-content {
        position: fixed;
        padding: var(--gap-l);
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: var(--primary-color);
        margin: unset;
        transform: unset;
        border-radius: unset;
        box-shadow: unset;
    }

    .form-field, .button--large {
        font-size: var(--fs-m);
    }

    .side-menu {
        left: -80vw;
        width: 80vw;
    }
}

@media (hover: hover) {
    .button--filled:hover {
        background: var(--button-hover);
        background-origin: border-box;
    }
    
    .button--filled:active {
        background: var(--button-active);
        background-origin: border-box;
        border-top: thin solid var(--button-active-border);
        box-shadow: none;
    }

    .button--outlined:hover {
        background-color: #ff634730;
    }
    
    .button--outlined:active {
        border: thin solid transparent;
        background-color: #ff634730;
    }

    .button--filter:hover {
        background-color: #88888880;
    }

    .button--filter:active {
        background-color: #888888b0;
    }

    .header__button:hover {
        fill: var(--header-button-hover);
    }

    .header__button:active {
        fill: var(--header-button-active);
    }

    .ui-button:hover {
        fill: var(--ui-button-hover);
    }

    .user-menu:hover {
        text-decoration: underline;
        background-color: var(--primary-color);
        box-shadow: 0 0 3px var(--shadow);
    }

    .user-menu:hover .dropdown {
        display: block;
    }

    .dropdown__item:hover {
        color: var(--text-hi-color);
    }

    .dropdown__item:hover #account-icon {
        fill: rgb(85, 159, 233);
    }
    
    .dropdown__item:hover #favorites-icon {
        fill: rgb(255, 179, 37);
    }
    
    .dropdown__item:hover #logout-icon {
        fill: rgb(255, 99, 71);
    }

    .menu-element:hover {
        background-color: var(--primary-hover);
    }
    
    .menu-element:active {
        background-color: var(--primary-active);
    }

    #suggestions li:hover {
        background-color: var(--primary-hover);
    }

    #suggestions li:hover h4 {
        color: var(--accent-color);
    }

    .table-row:hover {
        color: var(--text-hi-color);
    }
}

@media (hover: none) {
    .button--filled:active {
        background: var(--button-active);
        background-origin: border-box;
        border-top: thin solid var(--button-active-border);
        box-shadow: none;
    }
    
    .button--outlined:active {
        border: thin solid transparent;
        background-color: #ff634730;
    }

    .button--filter:active {
        background-color: #888888b0;
    }
    
    .menu-element:active {
        background-color: var(--primary-active);
    }
}