:root{
/** Base colors */
--clr-dark-a0: #000000;
--clr-light-a0: #ffffff;

/** Theme primary colors */
--clr-primary-a0: #f74f16;
--clr-primary-a10: #ec5826;
--clr-primary-a20: #e06033;
--clr-primary-a30: #d5673f;
--clr-primary-a40: #c96c4a;
--clr-primary-a50: #bc7155;

/** Theme surface colors */
--clr-surface-a0: #fafaff;
--clr-surface-a10: #ececf0;
--clr-surface-a20: #dedee1;
--clr-surface-a30: #d0d0d3;
--clr-surface-a40: #c2c2c5;
--clr-surface-a50: #b4b4b6;

/** Theme tonal surface colors */
--clr-surface-tonal-a0: #ffdacf;
--clr-surface-tonal-a10: #f0d0c6;
--clr-surface-tonal-a20: #e2c5bd;
--clr-surface-tonal-a30: #d3bbb4;
--clr-surface-tonal-a40: #c5b1ab;
--clr-surface-tonal-a50: #b7a7a2;
}
html {
    font-family: "Rubik", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    color: var(--clr-dark-a0);
    background-color: var(--clr-surface-a0);
}
body {
    padding: 1rem 0;
    margin: 0;
}
.p100 { display: block; background-color: var(--clr-primary-a20); }
.c { text-align: center !important; }
.l { text-align: left !important; }
.r { text-align: right !important; }
.lp3 { padding-left: 1.5rem; }
.h { display: none; }
.m1 { margin: 1.5rem; }
.mauto { margin: auto; }
.fitc { width: fit-content; }
.iconlink { width: 1rem; max-height: 1rem; padding-right: 0.5rem; }

.headtitle{
    font-size: 16pt;
    font-weight: 900;
    letter-spacing: 0.5rem;
    display: inline;
    border-radius: 3rem;
    padding: 0.5rem 4rem;
    border: solid var(--clr-primary-a50) 2px;
    color: var(--clr-primary-a0);
    background-color: var(--clr-surface-a0);
}
.container {
    --ideal-size: 20rem;
    --max-column-count: 4;
    --gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(min(max(100% / var(--max-column-count) - var(--gap), var(--ideal-size)), 100%), 1fr));
    gap: var(--gap);
    display: grid;
    padding: 1rem;
}

.item {
    border-radius: 1rem;
    border: solid var(--clr-surface-a30) 1px;
    padding: 0.5rem;
    transition: transform .2s ease;
}

.p { cursor: pointer; }
.p:hover { transform: scale(1.05); z-index: 9000; }

.icon {
    background-size: 32px;
    background-repeat: no-repeat;
    background-position: right top, left top;
    background-origin: content-box;
}

.item:hover { border: solid var(--clr-dark-a0) 1px; }

.item h1,.item h2{
    color: var(--clr-primary-a20);
    text-align: center;
}

.type-public { background-color: var(--clr-surface-a30); }
.type-deltagare { background-color: var(--clr-surface-a40); }
.type-funkis { background-color: var(--clr-surface-a50); }

.type-static { background-color: var(--clr-surface-tonal-a40); }

.type-public:hover { background-color: var(--clr-surface-tonal-a30); }
.type-deltagare:hover { background-color: var(--clr-surface-tonal-a40); }
.type-funkis:hover { background-color: var(--clr-surface-tonal-a50); }

.icon_map { background-image: url("/img/map.svg"), url("/img/globe.svg"); }
.icon_results { background-image: url("/img/results.svg"), url("/img/globe.svg"); }
.icon_lists { background-image: url("/img/list.svg"), url("/img/globe.svg"); }

.icon_toilet { background-image: url("/img/toilet.svg"), url("/img/walking.svg"); }
.icon_food { background-image: url("/img/food.svg"), url("/img/walking.svg"); }

.icon_pacer { background-image: url("/img/pacer.svg"), url("/img/megaphone.svg");; }

.icon_frs { background-image: url("/img/system.svg"), url("/img/lock.svg");; }

.img_info{
    width: 1rem;
}

.list {
    --gap: 0.2rem;
    grid-template-columns: 3rem 1fr 10rem;
    gap: var(--gap);
    display: grid;
    padding: 1rem;
}

.list2{
    --gap: 0.2rem;
    grid-template-columns: 1fr 10rem;
    gap: var(--gap);
    display: grid;
    padding: 1rem;
    margin: 0.5rem;
    border: solid var(--clr-dark-a0) 1px;
    border-radius: 0.3rem;
}

.list_span3 {
    grid-column: 1 / span 3;
}

.list_header {
    font-weight: 700;
}

.list_row,.list_row2 {
    display: inline;
}

.list_row:nth-child(6n+1),
.list_row:nth-child(6n+2),
.list_row:nth-child(6n+3),
.list2_row:nth-child(4n+1),
.list2_row:nth-child(4n+2){
    background-color: var(--clr-surface-a50);
}
.list_row:nth-child(6n+4),
.list_row:nth-child(6n+5),
.list_row:nth-child(6n+6),
.list2_row:nth-child(4n+3),
.list2_row:nth-child(4n+4){
    background-color: var(--clr-surface-a20);
}

.lag { font-size: 0.7rem; }
.toatid { font-size: 0.8rem; }
.yellow_bib { 
    background-color: yellow !important;
}
footer{
    z-index: -1;
    text-align: center;
    font-size: 0.8rem;
    color: var(--clr-surface-a50);
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
}