@font-face {
	font-family: 'primary-font';
	src: url('../fonts/FiraSans/Regular.woff2') format('woff2');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'primary-font';
	src: url('../fonts/FiraSans/Bold.woff2') format('woff2');
	font-weight: bold;
	font-style: normal;
}

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

/** /
* {
  outline: 1px dotted rgba( 0, 0, 0, .2 );
}
/**/

:root {
  --text-color: #111;
  --primary-color: rgb(20,194,20);
  --color-m: rgb(96,152,255);
  --color-w: rgb(240,130,254);
  --color-s: rgb(244,66,46);
  --lite-bg: rgb(244, 246, 230);
  --error-bg: rgb(255, 210, 218);
  --required-color: #c00;
  --info-color: #c00;
}

html {
  font-size: 62.5%;
  line-height: 1.333em;
  min-height: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 38rem;
}

body {
  background-color: #fff;
  /* border: .5rem dashed #c00; */
  border-bottom: 0;
  border-top: 0;
  color: var(--text-color);
  font: normal 1.6rem/1.3 'primary-font';
  min-height: 100%;
  overflow-x: hidden;
  /*
  padding: 
    env(safe-area-inset-top) 
    env(safe-area-inset-right) 
    env(safe-area-inset-bottom) 
    env(safe-area-inset-left);
  */
  width: 100dvw;
}

h1,
h2,
h3,
h4,
h5,
h6,
ol,
ul,
p {
    margin-bottom: 2rem;
}

ol,
ul,
p {
    font-size: 2.1rem;
}

#map {
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 8rem;
}

body.dev #map {
    bottom: 3.5rem !important;
}

header {
    /* background-color: #fff; */
    /* backdrop-filter: saturate(180%) blur(10px); */
    height: 8rem;
    left: 0;
    max-width: 96rem;
    padding: 1rem;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
    @media( width > 960px ) {
        left: calc( ( 100vw - 96rem ) / 2 );
    }
    & > a#logo {
        color: #000c;
        display: flex;
        font-size: 2.4rem;
        text-decoration: none;
        width: 26rem;
        & > div {
            margin-top: .3rem;
            & > span {
                color: #999;
            }
        }
    }
    nav {
        display: flex;
        gap: 1rem;
        position: absolute;
        right: 1rem;
        top: 2.5rem;
        a {
            color: #000c;    
            font-size: 1.3rem;
            text-decoration: none;
        }
    }
    &:before {
        background-image: linear-gradient( 90deg, #fff, var(--lite-bg) );
        border-bottom: .1rem solid var(--lite-bg);
        content: '';
        display: block;
        height: 8rem;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: -1;
    }
}

main {
    margin: 12rem auto 2rem;
    max-width: 96rem;
    padding: 2rem;
    a {
        color: #009;
        text-decoration-color: #0093;
        &:hover {
            text-decoration-color: #009c;
        }
    }
    body.admin.users & {
        max-width: 100%;
    }
}

img {
    max-width: 100%;
}

ul {
    list-style-type: none;
    li {
        &:before {
            content: '– ';
        }
    }
}

.leaflet-popup-content {
    font-size: 1.3rem !important;
    margin-left: 1rem !important;
    & > a {
        border-left: .5rem solid var(--color-m);
        color: #000 !important;
        display: inline-block;
        font-size: 1.3rem;
        text-decoration-color: #0003;
        padding-left: .5rem;
        &.popup-w {
            border-color: var(--color-w);
        }
        &:hover {
            text-decoration-color: #0009;
        }
    }
}

.leaflet-control-attribution {
    font-size: 1.2rem;
}

.required {
    color: #c00;
}

form[action*='admin/users'] {
    display: flex;
    float: right;
    gap: .5rem;
    input {
        border: .1rem solid var(--text-color);
        border-radius: .3rem;
        display: inline-block;
        font: normal 1.6rem/1.3 'primary-font';
        padding: .5rem;
        &[type="submit"] {
            background-color: var(--primary-color);
            background-image: url('../img/icons/submit.svg');
            background-position: center;
            background-repeat: no-repeat;
            background-size: 1.6rem;
            border: none;
            cursor: pointer;
            padding-inline-start: 1rem;
            padding-inline-end: 2rem;
            transition: transform .15s ease-in-out;
            &:hover {
                box-shadow: 0 .2rem 1rem #0003;
                transform: translateY(-.1rem)
            }
        }
    }
}

form[action*="login"] {
    background-color: #f3f4f5;
    border: .1rem solid #ccc;
    border-radius: .3rem;
    padding: 1rem 2rem 2rem 2rem;
    max-width: 30rem;
    label[for] {
        display: block;
        padding: .5rem 0;
    }
    input:not([type=checkbox]) {
        border: .1rem solid var(--text-color);
        border-radius: .3rem;
        display: block;
        font: normal 1.6rem/1.3 'primary-font';
        margin-bottom: 1rem;
        padding: .5rem;
        &[name='freitext'] {
            width: 100%;
        }
        &[type="submit"] {
            background-color: var(--primary-color);
            background-image: url('../img/icons/submit.svg');
            background-position: calc( 100% - .2rem) .8rem;
            background-repeat: no-repeat;
            background-size: 1.6rem;
            border: none;
            
            cursor: pointer;
            margin-bottom: 2rem;
            margin-top: 2rem;
            padding-inline-start: 1rem;
            padding-inline-end: 2rem;
            transition: transform .15s ease-in-out;
            &:hover {
                box-shadow: 0 .2rem 1rem #0003;
                transform: translateY(-.1rem)
            }
        }
    }
    select {
        appearance: none;
        background-image: url('../img/icons/select.svg');
        background-position: calc( 100% - .6rem) .7rem;
        background-repeat: no-repeat;
        background-size: 1.6rem;
        border: .1rem solid var(--text-color);
        border-radius: .3rem;
        display: block;
        font: normal 1.6rem/1.3 'primary-font';
        margin-bottom: 1rem;
        padding: .5rem;
        position: relative;
        width: 100%;
    }
    .info {
        border-top: .1rem solid #0003;
        display: block;
        padding-top: 1.6rem;
    }
}

form[action*="admin/edit_therapy"],
form[action*="admin/profile"] {
    fieldset {
        /* background-color: #f3f4f5; */
        background-color: var(--lite-bg);
        border: .1rem solid #ccc;
        border-radius: .3rem;
        margin: 2rem 0;
        padding: 1rem 2rem 2rem 2rem;
        position: relative;
    }
    legend {
        font-weight: bold;
        text-transform: uppercase;
    }
    label {
        display: inline-block;
        padding: .5rem 0;
        width: 17rem;
        @media( width < 720px ) {
            width: 100%;
        }
    }
    textarea,
    select,
    input {
        appearance: none;
        background-color: #fff;
        border: .1rem solid var(--text-color);
        border-radius: .3rem;
        display: inline-block;
        font: normal 1.6rem/1.3 'primary-font';
        /* margin-bottom: 1rem; */
        padding: .5rem;
        width: calc( 100% - 18rem );
        @media( width < 720px ) {
            width: 100%;
        }
        &#plz {
            margin-left: .6rem;
            /* margin-right: .5rem; */
            width: 8rem;
            @media( width < 720px ) {
                margin-left: 0;
                width: 14rem;
            }
        }
        &#ort {
            width: 61.3rem;
            @media( width < 960px ) {
                width: calc( 100vw - 34.8rem );
            }
            @media( width < 720px ) {
                width: calc( 100vw - 22.65rem );
            }
        }
        &.error {
            background-color: var(--error-bg)
        }
        &[type="submit"] {
            background-color: var(--primary-color);
            background-image: url('../img/icons/submit.svg');
            background-position: calc( 100% - .2rem) .8rem;
            background-repeat: no-repeat;
            background-size: 1.6rem;
            border: none;
            
            cursor: pointer;
            margin-bottom: 2rem;
            margin-top: 2rem;
            padding-inline-start: 1rem;
            padding-inline-end: 2rem;
            transition: transform .15s ease-in-out;
            width: 16rem;
            &:hover {
                box-shadow: 0 .2rem 1rem #0003;
                transform: translateY(-.1rem)
            }
        }
    }
    textarea {
        min-height: 12rem;
    }
    select {
        background-image: url('../img/icons/select.svg');
        background-position: calc( 100% - .6rem) .7rem;
        background-repeat: no-repeat;
        background-size: 1.6rem;
    }
    .therapyselector {
        border: .1rem solid var(--text-color);
        border-radius: .3rem;
        /* display: none; */
        height: 16rem;
        overflow-x: scroll;
        overscroll-behavior: contain;
        padding: 1rem;
        width: calc( 100% - 18rem );
        @media( width < 720px ) {
            width: 100%;
        }
        a {
            display: block;
        }
    }
    .info {
        border-top: .1rem solid #0003;
        display: block;
        padding-top: 1.6rem;
    }
    .buttonbar {
        input[type="submit"] {
            margin-right: 1rem;
        }
    }
}

#registrierung {
    position: relative;
    margin: 2rem 0;
}

form[action*="admin/konto_loeschen"],
form[action*="admin/vertrag_"] {
    display: inline-block;
    position: absolute;
    right: 0;
    top: 0;
    input {
        appearance: none;
        background-color: #fff;
        border: .1rem solid var(--text-color);
        border-radius: .3rem;
        display: inline-block;
        font: normal 1.6rem/1.3 'primary-font';
        padding: .5rem;
        @media( width < 720px ) {
            width: 100%;
        }
        &[type="submit"] {
            background-color: var(--info-color);
            border: none;
            color: #fff;
            cursor: pointer;
            padding: .5rem 1rem;
            transition: transform .15s ease-in-out;
            width: auto;
            &:hover {
                box-shadow: 0 .2rem 1rem #0003;
                transform: translateY(-.1rem)
            }
        }
    }
}

form[action*="admin/konto_loeschen"] {
    top: auto;
    bottom: 2rem;
}

form[action*="admin/upload_therapy_images"] {
    input {
        appearance: none;
        background-color: #fff;
        border: .1rem solid var(--text-color);
        border-radius: .3rem;
        display: inline-block;
        font: normal 1.6rem/1.3 'primary-font';
        padding: .5rem;
        @media( width < 720px ) {
            width: 100%;
        }
        &[type="submit"] {
            background-color: var(--primary-color);
            background-image: url('../img/icons/submit.svg');
            background-position: calc( 100% - .2rem) .8rem;
            background-repeat: no-repeat;
            background-size: 1.6rem;
            border: none;
            
            cursor: pointer;
            margin-bottom: 2rem;
            margin-top: 2rem;
            padding-inline-start: 1rem;
            padding-inline-end: 2rem;
            transition: transform .15s ease-in-out;
            width: auto;
            &:hover {
                box-shadow: 0 .2rem 1rem #0003;
                transform: translateY(-.1rem)
            }
        }
    }
}

.input-help {
    color: #0006;
    font-size: 1.3rem;
    width: 17rem;
    @media( width < 720px ) {
        margin-top: 1rem;
        width: 100%;
    }
    span {
        white-space: nowrap;
    }
}

.help-block {
    color: var(--info-color);
    display: block;
    font-size: 1.3rem;
    margin-bottom: 2rem;
}

.input-row {
    display: flex;
    gap: 1rem;
    margin-bottom: 2rem;
    @media( width < 720px ) {
        flex-direction: column;
        gap: 0;
    }
}

#input-row--plz,
#input-row--ort {
    display: inline-block;
}

#input-row--plz {
    @media( width < 720px ) {
        width: 14rem;
    }
}

.entry {
    background-color: var(--lite-bg);
    border: .1rem solid #ccc;
    border-radius: .3rem;
    margin-bottom: 2rem;
    padding: 1rem 2rem 2rem 2rem;
    .details,
    .image {
        display: flex;
        gap: 2rem;
        margin-bottom: 2rem;
        div:first-of-type,
        img {
            width: calc( 100% - 12rem );
        }
        b {
            text-transform: uppercase;
        }
    }
}

.button {
    background-color: #ccc;
    border-radius: 1.3rem;
    color: #fff;
    display: block;
    font-size: 1.3rem;
    padding: .1rem .5rem;
    width: 11rem;
    text-decoration: none;
    &:hover {
        background-color: #999;
    }
    i {
        display: inline-block;
        margin-top: .3rem;
    }
    &.button--approve {
        background-color: #0c0;
        &:hover {
            background-color: #090;
        }
    }
    &.button--delete {
        background-color: #c00;
        &:hover {
            background-color: #900;
        }
    }
    &.button--edit {
        background-color: #fc0;
        width: auto;
        &:hover {
            background-color: #c90;
        }
    }
    &.button--right {
        float: right;
    }
}

.buttons {
    .button {
        margin: .5rem 0;
    }
}

table {
    .button {
        padding: .1rem .5rem;
    }
}

table {
    width: 100%;
    tr {
        &.freigabe--1 {
            color: #900;
        }
        &.freigabe-1 {
            color: #090;
        }
        &.freigabe-0 {
            color: #fc0;
        }
        th {
            border-top: .1rem solid #ccc;
            padding: .5rem;
            text-align: right;
            width: 16rem;
            table#users & {
                border-top: 0;
                text-align: left;
            }
            &.selected_col {
                background-color: #eee;
            }
            span {
                color: var(--text-color);
            }
            a.sort-dir {
                float: right;
                padding-right: .2rem;
            }
        }
        td {
            border-top: .1rem solid #ccc;
            padding: .5rem;
            vertical-align: top;
        }
    }
}


ul.pagination {
    background-color: var(--lite-bg);
    display: flex;
    justify-content: center;
    gap: 1rem;
    list-style-type: none;
    margin: 2rem 0;
    padding: .25rem .5rem;
    li {
        &.active {
            a {
                text-decoration: none;
            }
        }
        &:before {
            content: '';
        }
        a {
            color: var(--text-color);
            display: inline-block;
            position: relative;
            &[aria-label=Erste],
            &[aria-label=Zurück],
            &[aria-label=Weiter],
            &[aria-label=Letzte] {
                background-image: url(../img/icons/pagination--first.svg);
                background-repeat: no-repeat;
                background-position: center;
                background-size: 1.7rem;
                content: '';
                display: inline-block;
                height: 2.1rem;
                top: .4rem;
                width: 2.1rem;
            }
            &[aria-label=Zurück] {
                background-image: url(../img/icons/pagination--previous.svg);
            }
            &[aria-label=Weiter] {
                background-image: url(../img/icons/pagination--next.svg);
            }
            &[aria-label=Letzte] {
                background-image: url(../img/icons/pagination--last.svg);
            }
            & > span[aria-hidden=true] {
                display: none;
            }
        }
    }
}

.gallery {
    border: .1rem solid var(--primary-color);
    border-radius: .3rem;
    display: flex;
    gap: 1rem;
    margin-top: 5rem;
    padding: 1rem;
    width: 100%;
    & > div,
    & > img {
        width: calc( 25% - 1rem );
        object-fit: contain;
    }
    & > div {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        justify-content: space-between;
    }
}

#therapyselector--therapiesp,
#therapyselector--therapien {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

#input-row--therapiesp,
#input-row--therapien {
    margin-bottom: -.1rem;
    textarea {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }
}

.hidden {
    display: none;
}