@charset "utf-8";

@import url("/assets/css/basic.css");
@import url("/assets/css/dropzone.css");

@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url(/assets/fonts/Figtree.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

*               		          { margin: 0; padding: 0; box-sizing: border-box!important; }													
html													{ font-family: 'Figtree', sans-serif; font-size: 16px; font-weight: 300; line-height: 1.35; }

h1														{ color: #e14d28; font-size: 1.75rem; font-weight: 300; margin: 0 0 1.5rem; }
h2														{ color: #9d2c79; }
h3														{ font-size: 1.25rem; margin: 0 0 1rem; }
h4														{ font-size: 1rem; text-transform: uppercase; }

a															{ cursor: pointer; font-size: 1.125rem; text-decoration: none; }
img														{ display: block; max-width: 100%; }
p															{ font-size: 1.125rem; margin: 0 0 1.25rem; }
p a														{ color: #cd1150; }

header												{ background: #282320; color: #f8f3ec; font-size: 1.25rem; font-weight: 500; text-transform: uppercase; }
header a											{ color: #e14d28; }
header a:hover								{ color: #f8f3ec; }
main													{ padding: 2rem 0; }

.content											{ width: 100%; max-width: 100rem; margin: 0 auto; position: relative; }
.flex													{ display: flex; flex-wrap: wrap; }
.flexalign										{ display: flex; flex-wrap: wrap; align-content: center; }
.flexstart										{ display: flex; flex-wrap: wrap; align-content: flex-start; }
.flexspace										{ display: flex; flex-wrap: wrap; justify-content: space-between; }
.flexaround										{ display: flex; flex-wrap: wrap; justify-content: space-around; }
.flexcenter										{ display: flex; flex-wrap: wrap; justify-content: center; }
.flexend											{ display: flex; flex-wrap: wrap; justify-content: flex-end; }

.full													{ width: 100%; }
.fourfifth										{ width: 80%; }
.threequarter									{ width: 75%; }
.twothird											{ width: 66.666%; }
.half, .fullhalf							{ width: 50%; }
.third												{ width: 33.333%; }
.quarter											{ width: 25%; }
.fifth												{ width: 20%; }
.sixth												{ width: 16.666%; }
.seventh											{ width: 14.285%; }

.back													{ background: #f8f3ec; }
.bold													{ font-weight: 700!important; }
.button												{ background: #282320; border: none; color: #ffffff; cursor: pointer; display: inline-block; font-family: 'Figtree', sans-serif; font-size: 0.875rem; font-weight: 400; line-height: 1; padding: 0.5rem 0.75rem; text-transform: uppercase; transition: ease 0.5s; }
.button:hover									{ background: #e14d28; transition: ease 0.25s; }
.button	img										{ display: inline-block; filter: invert(99%) sepia(1%) saturate(1845%) hue-rotate(182deg) brightness(115%) contrast(100%); height: 0.875rem; margin: 0 0 -0.125rem; }
.ui .button img								{ height: 1.5rem; }
.center												{ text-align: center; }
.headline											{ background: #282320; color: #ffffff; display: block; font-size: 1.125rem; font-weight: 500; padding: 0.625rem 1rem; text-transform: uppercase; }
.icon.green										{ filter: invert(100%) sepia(25%) saturate(3529%) hue-rotate(28deg) brightness(93%) contrast(69%); }
.icon.orange									{ filter: invert(83%) sepia(62%) saturate(5026%) hue-rotate(317deg) brightness(103%) contrast(101%); }
.icon.red											{ filter: invert(49%) sepia(21%) saturate(5660%) hue-rotate(321deg) brightness(101%) contrast(87%); }
.logout												{ font-size: 1rem; }
.note													{ border: 0.0625rem solid #282320; margin: 0 0 1.5rem; padding: 1rem; }
.note.green										{ border-left: 0.5rem solid #99cc66; }
.note.orange									{ border-left: 0.5rem solid #fd9b63; }
.note.red											{ border-left: 0.5rem solid #ef5a6f; }
.note p:last-child						{ margin: 0; }
.right												{ text-align: right; }
.row													{ background: rgba(255,255,255,0.5); cursor: default; margin: 0 0 0.75rem; transition: ease 0.5s; width: 100%; }
.row:hover										{ background: rgba(255,255,255,0.85); transition: ease 0.25s; }
.space												{ padding: 1.25rem; }

.nav													{  }
.nav ul												{ list-style: none; position: relative; }
.nav ul	li										{ background: #9d2c79; margin: 0 0 0.5rem; position: relative; transition: ease 0.5s; }
.nav ul	li:hover:before,
.nav ul	li.current:before			{ border-style: solid; border-width: 1.5rem 0 1.5rem 1rem; border-color: transparent transparent transparent #f8f3ec; bottom: 0; content: ""; z-index: 1; height: 0; left: 0; opacity: 0.5; position: absolute; -webkit-transform:rotate(360deg); top: 0; transition: ease 0.5s; width: 0; }
.nav ul	li:hover:after,
.nav ul	li.current:after			{ border-style: solid; border-width: 1.5rem 1rem 1.5rem 0; border-color: transparent #f8f3ec transparent transparent ; bottom: 0; content: ""; z-index: 1; height: 0; opacity: 0.5; position: absolute; -webkit-transform:rotate(360deg); right: 0; top: 0; transition: ease 0.5s; width: 0; }
.nav ul	li a									{ color: #f8f3ec; display: block; padding: 0.75rem; text-align: center; text-transform: uppercase; }
.nav ul	li:hover a						{ color: #ffffff; }


/* FORMULARE */

form input              			{ background: #fff; border: 0.0625rem solid #dadada; border-radius: 0; display: block; font-family: 'Figtree', sans-serif; font-size: 1rem; padding: 0.75rem;}
form input[type="text"],
form input[type='date'],
form input[type='number'],
form input[type="password"]		{ width: 100%; }

form input[type="submit"]			{ background: #cd1150; color: #ffffff; cursor: pointer; margin: 0 auto; min-width: 33.333%; padding: 1rem; text-transform: uppercase; }

form textarea									{ font-family: 'Figtree', sans-serif; font-size: 1.125rem; padding: 0.75rem; }
form select										{ background: #fff; border: 0.0625rem solid #dadada; display: block; font-family: 'Figtree', sans-serif; font-size: 1rem; padding: 0.75rem; width: 100%; }

form a												{ color: #282320; border-bottom: 0.0625rem solid #282320; }
form label										{ display: block; padding: 0 0.5rem; margin: 0 0 0.25rem; }
form .accent									{ color: #9d2c79; font-size: 1.125rem; font-weight: 700; line-height: 1; margin: 0 0.25rem; }
::placeholder									{ color: #bbbbbb; opacity: 1; }

/* Checkboxen */
/* The container */
.container { display: block; margin: 2.125rem 0 0; position: relative; padding-left: 2.25rem; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
/* Hide the browser's default checkbox */
.container input { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; }
/* Create a custom checkbox */
.checkmark { border: 0.0625rem solid #dadada; position: absolute; top: 0; left: 0; height: 1.675rem; width: 1.675rem; background-color: #ffffff;}
/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark { background-color: #999999; }
/* When the checkbox is checked, add a background */
.container input:checked ~ .checkmark { background-color: #cd1150; }
/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after { content: ""; position: absolute; display: none; }
/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after { display: block; }
/* Style the checkmark/indicator */
.container .checkmark:after { left: 0.5rem;  top: 0.25rem;  width: 0.5rem; height: 0.75rem;  border: solid white;  border-width: 0 0.125rem 0.125rem 0;  -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); }