:root {

    --acentColor01: #F36F6F;
    --acentColor01-hover: #f79c9c;
    --acentColor01-transparent: #f36d6d4d;
    --acentColor02: #F0357D;
    --acentColor02-hover: #f58484;

    --backgroundColor01: #F2F2F2;
    --lightGray: #DCDCDC;
    --lightGray-hover: #e8e8e8;
    --darkGray: #4D4D4D;
    --black: #333333;
    --black-hover: #4d4d4d;
    --white-hover: #e6e6e6;
    --white-transparent: #FFFFFF4D;
    --green: #6EC200;
    --red: #ff0800;

    --overlay: hsla(0, 0%, 45%, 0.75);
    --margin-large: 16px;
    --margin-small: 8px;

    --smallborder: 4px;
    --largeborder: 16px;

    --border-small: 4px;
    --border-medium: 8px;
    --border-large: 16px;

    --font-small: 12px;
    --font-medium: 16px;
    --font-large: 24px;

    --font-lite: 300;
    --font-regular: 400;
    --font-bold: 900;

    --transition-normal: 0.2s;
}

html{
    font-family: 'Lato', sans-serif !important;
    color: var(--black);
    font-size: var(--font-medium);
    font-weight: var(--font-regular);
}

b{
    font-weight: var(--font-bold);
}

b, strong {
    font-weight: bolder;
}

.tag{
    padding-left: 0.4em;
    padding-right: 0.4em;
    padding-top: 0.3em;
    padding-bottom: 0.2em;
    z-index: 2;
    border-radius: var(--smallborder);
    color: white;

    text-transform: uppercase;
    font-weight: 300;

    margin-top: auto;
    margin-right: auto;
    margin-bottom: 0.8em;
    user-select: none;
}

label{
    font-size: var(--font-medium);
    margin: 0.5em 0em;
}

input, select{
    border: none;
    background-color: var(--lightGray);
    font-size: var(--font-medium) !important;
    padding: 0.3em 0.8em;

    border-radius: var(--largeborder);
    width: 100%;
}

input.l{
    padding: 0.5em 0.8em;
    border-radius: var(--largeborder);
}

input:focus{
    outline-style: none;
}

.white{
    color: white;
}

.btn{
    display: inline;
    background-color: var(--acentColor01);
    color: white;
    border-radius: var(--smallborder);
    transition: var(--transition-normal);

    padding: 0.4em 1.6em;
    margin: 4px;
    width: 100%;
    text-align: center;
    font-weight: var(--font-bold) !important;

    font-size: var(--font-medium) !important;
    cursor: pointer;
}

.btn:disabled{
    opacity: 0.4;
    cursor: default;
}

.btn.auto{
    width: auto;
}

.btn > i{
    margin-left: 8px;
    margin-right: 8px;
}

.btn.nomargin{
    margin: 4px 0;
}

.btn.white{
    background-color: white;
    color: black;
}

.btn.gray{
    background-color: var(--lightGray);
    color: black;
}

.btn:hover:not(:disabled){
    background-color: var(--acentColor01-hover);
}

.btn.white:hover:not(:disabled){
    background-color: var(--white-hover);
    color: var(--black);
}

.btn.gray:hover:not(:disabled){
    background-color: var(--lightGray-hover);
}

.btn.l{
    padding: 0.6em 2em;
    font-weight: var(--font-regular) !important;
}

.btn.s{
    font-size: var(--font-bold) !important;
    padding: 0.4em;
}

.brand-logo-01{
    margin-bottom: 48px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.notification{
    border-style: solid;
    border-width: 2px;
    border-color: var(--acentColor01);
    background-color: var(--acentColor01-transparent);
    border-radius: var(--largeborder);
    padding: 0.6em;
    font-size: var(--font-medium);
    text-align: center;
    font-weight: var(--font-regular);
    margin: 0.5em 0;
}

.main-grid{
    display: grid;
    height: 100vh;
    grid-template-columns: 72px 1fr;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
    "topnav topnav"
    "sidebar content"
    "botnav botnav";
}

.sidebar{
    grid-area: sidebar;
    background-color: var(--darkGray);
    color: white;

    display: flex;
    justify-content: center;
    flex-direction: column;

}

.content{
    grid-area: content;
    background-color: var(--backgroundColor01);
    overflow-y: hidden;
    padding: var(--margin-large);

    display: grid;
    grid-template-rows: auto auto 1fr;
    grid-gap: var(--margin-large);
}

.botnav{
    grid-area: botnav;
    background-color: var(--acentColor02-hover);
}

.topnav{
    grid-area: topnav;
    position: relative;
    background: linear-gradient(90deg, 
    var(--acentColor01), var(--acentColor02));
    color: white;

    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
    "brand title account";
}

.topnav > a > .brand{
    grid-area: brand;
    display: flex;
    background-image: url(/assets/svg/brand-logo-white-solid.svg);
    width: 72px;
    height: 40px;
    margin: 8px 0;
}

.topnav > .title{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: auto;
    text-align: center;
    font-weight: var(--font-lite);
}

.topnav > .title b{
    font-weight: var(--font-bold);
}

.topnav > .account{
    grid-area: account;
    display: flex;
    margin: auto;
    margin-right: 52px;
}

.topnav > .account > .name{
    grid-area: account;
    display: flex;
    margin: auto 16px;
}

.sidebar > a{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;

    transition: var(--transition-normal);
}

a:hover{
    background-color: var(--white-transparent);
}

.sidebar > a > i{
    padding: 16px;
    padding-bottom: 4px;
    margin-left: auto;
    margin-right: auto;
}

.sidebar > a > div{
    padding-bottom: 8px;
    margin-left: auto;
    margin-right: auto;
    font-size: var(--font-small);
}

.panel-list{
    height: 100%;
    width: 100%;
    display: grid;
    padding: 48px;
    grid-gap: 48px;

    grid-template-rows: auto 1fr;
    grid-template-areas:
    "btns"
    "panels";
}

.btns{
    grid-area: btns;
    display: grid;
    grid-template-columns: 250px 1fr auto;
    grid-template-areas:
    "search . nav";
}

.btns > .search{
    grid-area: search;
    margin: auto;
}

.btns > .nav{
    grid-area: nav;
    margin: auto;
    display: flex;
    flex-direction: row;
    justify-content: baseline;
}

.panels{
    grid-area: panels;
    margin:-8px
}

.panels .panel-card{
    width: 300px;
    height: auto;
    border-radius: 8px;

    background-color: white;
    margin: 8px;
    margin-bottom: auto;
}

.panels .panel-card > div{
    padding: var(--largeborder);
}

.panels .panel-card > .top > .status{
    text-align: right;
}
/*
.panels .panel-card > .top >.status::after{
    content: "";
    background-color: var(--green);
    width: 12px;
    height: 12px;
    border-radius: 6px;
    display: inline-block;
    margin-left: 6px;
}*/

.green{
    color: var(--green);
}

.red{
    color: var(--red);
}

.panels .panel-card > .top > .name{
    text-align: center;
}

.panels .panel-card > .top > img{
    height: 200px;
    width: 100%;
    margin: 16px 0px;
}

.panels .panel-card > .bot{
    border-top-style: solid;
    border-top-color: var(--black);
    border-top-width: 1px;
}

.panels .panel-card > .bot .id{
    background-color: var(--lightGray);
    margin: 4px 0;
    padding: 0.4em;
    padding-right: 1em;
    border-radius: var(--border-small);
    display: grid;
    grid-template-columns: 1fr auto;
}

.panels .panel-card > .bot .btns{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-gap: var(--margin-small);
}

.panels .panel-card > .bot > .zeit{
    font-weight: var(--font-bold);
    text-align: center;
    margin-bottom: var(--margin-large);
}

.panels .panel-card > .bot > .zeit > i{
    color: var(--green);
}

.panels .add-new{
    background-color: transparent;
    cursor: pointer;
    margin-top: 140px;
    margin-bottom: auto;
    padding: 32px;
    align-content: center;
    text-align: center;
    flex-grow: 10;
}

.panels .add-new:hover > *{
    color: var(--green);
}

.panels .add-new > i{
    transition: var(--transition-normal);
    color: var(--lightGray);
}

.panels .add-new > h3{
    font-size: var(--font-medium);
    transition: var(--transition-normal);
    margin: var(--margin-large);
}

.overlay{
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
}

.overlay.bg{
    background-color: var(--overlay);
    pointer-events: initial;
}

.overlay > .container{
    position: relative;
    height: 100%;
}

.overlay .box{
    pointer-events: initial;

    position: relative;
    width: 900px;

    background-color: white;
    border-radius: var(--border-medium);

    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
    "titlebar titlebar"
    "left right"
    "bot bot";
}

.overlay .box > .titlebar{
    grid-area: titlebar;
    margin: var(--margin-small);
    margin-bottom: 0px;
    align-items: right;
    text-align: right;
}


.overlay .box > .titlebar > button:hover{
    color: var(--black-hover);
}

.overlay .box > .left {
    margin: var(--margin-large);

    grid-area: left;
    display: grid;

    grid-gap: var(--margin-small);
    grid-template-columns: auto 1fr;
    grid-template-rows: 1fr auto;
    grid-template-areas:
    "image image"
    "left right";
}

.overlay .box > .left > img{
    grid-area: image;
    width: 100%;
    height: 300px;
    margin: var(--margin-large);
    margin-top: auto;
}

.overlay .box > .left > p{
    min-width: 96px;
}

.overlay .box > .right {
    margin: var(--margin-large);
    display: grid;
    grid-template-rows: auto 1fr;
    grid-template-columns: 1fr auto;
    grid-template-areas:
    "name btn"
    "box box";
    grid-gap: 8px;
    grid-area: right;
}

.qrcodes{
    background-color: var(--lightGray);
    border-radius: var(--border-medium);
    overflow-y: scroll;
    overflow-x: hidden;
    margin-top: var(--margin-large);

    height: 1fr;
}

.qrcode{
    background-color: white;
    border-radius: var(--border-small);

    display: grid;
    grid-template-columns: 0.25fr 128px 0.5fr 0.25fr auto auto;
    justify-content: baseline;
    margin: 6px;
    padding: 4px;
}

.qrcode p{
    margin: auto var(--margin-small);
}

.qrcode .js-remove{
    color: var(--lightGray);
    margin-left: var(--margin-small);
    margin-right: var(--margin-small);
}

.qrcode .js-remove:hover{
    color: var(--red);
}

.qrbtn{
    display: grid;
    grid-template-columns: 0.5fr 1fr auto;
    justify-content: baseline;
    grid-gap: var(--margin-large);
    margin-right: var(--margin-large);
}

.qrbtn > *{
    margin-top: auto;
    margin-bottom: auto;
}


.overlay .box > .bot {
    grid-area: bot;
    margin: var(--margin-large);
    display: grid;
    place-items: center;
}

.overlay .box > .bot > div{
    display: flex;
    flex-direction: row;
}

.overlay .msg{
    position: relative;

    background-color: white;
    border-radius: var(--border-medium);
    padding: var(--margin-large);
    padding-bottom: var(--margin-small);

    text-align: center;
    max-width: 500px;
}

.overlay .msg p {
    margin: var(--margin-large) 0;
}

.overlay .msg .btnbox {
    display: flex;
}

.overlay .msg .btns {
    display: flex;
    margin: 0 auto;
    width: auto;
    width: 300px;
}