@font-face {
	font-family: "SourceSans";
	src: url("fonts/static/SourceSans3-SemiBold.ttf");
  	font-weight: bold;	
}
@font-face {
	font-family: "SourceSans";
	src: url("fonts/static/SourceSans3-Bold.ttf");
  	font-weight: 900;	
}
@font-face {
	font-family: "SourceSans";
	src: url("fonts/static/SourceSans3-Medium.ttf");
  	font-weight: normal;	
}

/**ALLGEMEIN**/

:root {
  --main-bg-color: #e8e8e8;
  --main: #851876;
}

body{
	margin: 0px;
	font-family: 'SourceSans'!important;
	font-weight: 600;
}

h2 {
    width: 90%;
    max-width: 1080;
    margin: 60px auto 40px auto;
	font-weight: 900;
}

.gruppen-container {
    display: flex;
    width: 100%;
    max-width: 1080px;
    margin: auto;
    margin-top: 20px;
    gap: 10px;
}

div.form-container {
	position: absolute;
    left: 50%;
    width: max-content;
    max-width: 1080px;
    margin: 20px auto;
    padding: 20px 20px;
    top: 50%;
    border-radius: 15px;
    transform: translate(-50%, -50%);
    box-shadow: 0px 0px 20px #00000085;
    position: fixed;
}
div#overlay {
    width: 100%;
    height: 100%;
    background: black;
    opacity: 0.6;
    position: fixed;
	display: none;
    top: 0px;
    z-index: 1;
}

form#popupForm {
    display: grid;
}

form {
    padding: 0px;
    margin: 0px;
}

label {
    margin-top: 15px;
    font-weight: bold;
    margin-bottom: 5px;
}

select#popupMonitorgruppe, input#popupAblaufdatum, input#monitorgruppen_name, #new_post select, #new_post input, #login-form input {
    border: none;
    background: var(--main-bg-color);
    border-radius: 7px;
    padding: 7px;
}

button, #new_post input[type="submit"], #login-form input[type="submit"] {
    border: none;
    border-radius: 7px;
    background: var(--main);
    padding: 10px;
    color: white;
    font-weight: bold;
	margin-top: 10px;
    transition-duration: 0.3s;
}

button.secBtn {
    background: var(--main-bg-color);
    color: black;
}

button:hover, select:hover, input:hover {
    opacity: 0.75;
    transform: scale(1.02);
    transition-duration: 0.15s;
}

table {
    margin: auto;
    border-spacing: 0px 0px;
    width: 100%;
    /*max-width: 1080px;*/
}

tbody tr:nth-child(2n) {
    background: #d3d3d340;
}

tr {
    height: 40px;
}

th {

    background: var(--main);
    color: white;
}
td {
    text-align-last: center;
}

tr td:nth-child(1) {
    width: 400px;
}

#bearbeitenPopup {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    padding: 20px;
    border: none;
    z-index: 1000;
    box-shadow: 0px 0px 20px #00000085;
    border-radius: 15px;
}
.headline {
    display: inline-flex;
    padding-bottom: 20px;
    justify-content: space-between;
    align-items: start;
    width: 100%;
}

.headline h3 {
    margin: 0px;
}

input[type="checkbox"] {
    margin-right: 20px;
    margin-bottom: 10px;
    transform: scale(1.5);
}

input#update_monitorgruppen_name {
    border: none;
    background: whitesmoke;
    border-radius: 7px;
    padding: 10px;
    width: -webkit-fill-available;
    margin: 10px 0px 20px;
}

.form-container button {
    width: -webkit-fill-available;
}

form#new_monitorgruppe {
    display: flex;
    align-items: center;
    border-radius: 10px;
    padding: 0px;
}

input#monitorgruppen_name {
}

div#spacer {
    height: 10px;
    position: relative;
    width: -webkit-fill-available;
}


input#monitorgruppen_name {width: -webkit-fill-available;background: whitesmoke;padding: 10px;margin: 10px 10px 0px 0px;}

form#new_post {
    max-width: 1080px;
    width: 50%;
    position: fixed;
    margin: 20px auto;
    background: whitesmoke;
    border-radius: 15px;
    padding: 20px;
    top: 50%;
    left: 50%;
	z-index: 2;
    transform: translate(-50%, -50%);
}

#new_post h2 {
    margin: 0px 0px 20px;
}

#new_post input {
    margin-bottom: 10px;
}

input#bild {
    border: none;
}

#new_post label {
    width: 150px;
    min-width: 150px;
    display: inline-flex;
}

#new_post input[type="submit"] {
    width: 100%;
    margin-top: 30px;
}

#new_post select, #new_post input {
    padding: 12px 15px;
    background: white;
    width: -webkit-fill-available;
}

button#delete_btn {
    background: white;
    color: orangered;
    box-shadow: 0px 0px 10px 0px lightgray;
}

.gruppen-container button {
    width: -webkit-fill-available;
    padding: 5px 10px;
}

div#header-logo {
    width: 100%;
    box-shadow: gray 0px -6px 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0px;
    background: white;
}

#header-logo img {
    height: 35px;
    margin-top: -5px;
    margin-right: 20px;
}

#header-logo i {
    font-size: 24px;
    color: gray;
    padding: 0px 50px;
}

#header-logo i:hover {
    color: var(--main);
    transition-duration: 0.2s;
    transform: rotate(90deg);
}

#header-logo div {
    display: inline-flex;
    align-items: center;
    padding: 0px 50px;
}

div#group-settings {
	z-index: 2;
    position: fixed;
    background: white;
    box-shadow: 0px 0px 20px #00000085;
    border-radius: 15px;
    left: 50%;
    top: 50%;
    padding: 20px;
    transform: translate(-50%, -50%);
}

#group-settings h2 {
    margin: 0px;
    margin-bottom: 10px;
}

form#login-form {
    width: 50%;
    min-width: 360px;
    max-width: 720px;
    background: white;
    border-radius: 15px;
    padding: 20px 20px;
    left: 50%;
	top: 50%;
    position: absolute;
    transform: translate(-50%, -60%);
}

#login-form input {
    width: -webkit-fill-available;
    margin-bottom: 20px;
    margin-top: 10px;
    padding: 12px;
	background: smokewhite;
}

#login-form h2 {
    padding: 0px;
    margin: 10px 0px 40px 0px;
}


#thumbnailImgEdit {
    width: 100%!important;
    border-radius: 10px;
}
#thumbnailImgEdit:hover {
	opacity: 0.35;
	cursor: pointer;
}

#popupBildContainer {
    background: black;
    width: 100%;
    height: 100%;
    border-radius: 10px;
}
#popupBildContainer:hover::after {
	pointer-events: none;
    content: "BILD ÄNDERN";
    position: absolute;
    color: white;
    width: 100%;
    top: 60%;
    text-align: center;
    font-weight: bold;
    left: 0px;
}

#popupBildUpload {
	display: none;
}

#bearbeitenPopup h2 {
	margin: 0px;
	margin-bottom: 10px;
}

div#controll-icons i {
    padding: 20px;
}

tbody tr:nth-child(1) {
    position: sticky;
    top: 64px;
}

#header-logo h1 {
    padding: 0px;
    margin: 0px;
    font-weight: 900;
}

tr th:nth-child(4) {
    width: 110px;
}
tr th:nth-child(5) {
    width: 110px;
	padding-right: 20px;
}

tbody tr:not(:nth-child(1)) {
    height: 217px;
}