body {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}

main {
    flex: 1 0 auto;
}

/*
 *  Navigation
 */
nav a.brand-logo{
    display: flex;
    flex-direction: row;
    align-items: center;
    font-size: 2.5em;
    padding: 0;
    margin: 0 20px;
}

nav a .material-icons{
    /*margin: 0 !important; */
    font-size: 1.05em !important;
}

.myLoginWrapper {
    margin: 0 20px 0 20px;
    display: block;
    position: relative;
}

.myLoginFormWrapper {
    overflow: hidden;
    position: absolute;
    z-index: 200;
    display: block;
    max-height: 0;
    left: -213px;
    top: 52px;
    transition: all .2s ease-out;
    -webkit-transition: all .2s ease-out;
    -moz-transition: all .2s ease-out;
}

.myLoginWrapper > input[type="checkbox"]{
    position: absolute;
    left: -100vw;
}

.myLoginFormWrapper > form > div {
    width: auto;
}

#myLoginDropdownCheckbox:checked ~ .myLoginFormWrapper {
    /*display: block;*/
    max-height: 800px;
}

/*
 * Modal
 */


.myModal {
    /*overflow: hidden;*/
    overflow-x: hidden;
    -ms-overflow-x: hidden;
    overflow-y:auto;
    -ms-overflow-y: auto;
    display: flex;
    background-color: white;
    position: fixed;
    z-index: 100;
    opacity: 0;
    max-height: 0;
    max-width: 0;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    transition: all .2s ease-out;
    -webkit-transition: all .2s ease-out;
    -moz-transition: all .2s ease-out;
}

.myModalCheckbox{
    position: absolute;
    left: -100vw;
}

.myModalCheckbox:checked ~ .myModal {
    opacity: 1;
    max-height: 90vh;
    max-width: 80vw;
}

.myModalCheckbox:checked ~ .myModalBackground {
    position: fixed;
    top: 50%;
    left: 50%;
    background-color: black;
    height: 100vh;
    width: 100vw;
    opacity: 75%;
    transform: translate(-50%,-50%);
    overflow: hidden;
    z-index: 99;
}

.closeModal {
    position: fixed;
    top: 30px;
    right: 30px;
    display: block;
    cursor: pointer;
}

.datepicker-modal.open {
    overflow: hidden;
}

.myModalContent{
    padding: 20px;
}

/*
 * Speziell für Kalender
*/
.registrationModal.modal {
    width: auto;
    transform: scale(0.8) !important;
}

.card-panel{
    padding: 0 0 20px 0;
    margin: 3px;
}

.card-content.startpage{
    padding: 0 5% 0;
    line-height: 2em;
}

.card-image img {
    width: 100%;
}

span.card-title {
    padding: 08%;
    font-size: 2em;
}

li .material-icons{
    margin: 0;
    /*padding: 0 10px 0 0;*/
    padding: 0;
}

li .valign-wrapper{
    line-height: 1.2em;
}

.card-content ul {
    margin: 0;
    font-size: 0.85em;
}

.icon-rot{
    color: red;
}
.icon-green{
    color: green;
}

.loginArea {
    margin: 20px;
    width: 40vw;
    max-width: 400px;
    min-width: 250px;
}

.personal-container{
    text-align: center;
}

.personal-collapsible-container {
    text-align: left;
}

.link-badge {
    margin: auto 10px auto auto;
}

span.show {
    width: auto;
    border-radius: 4px;
    background: black;
    position: absolute;
    color: white;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -160%);
    display: none;
    padding: 10px 10px 10px 10px;
    z-index: 100;
}

span.show:after {
    content: '';
    position: absolute;
    margin-left: -10px;
    left: 50%;
    bottom: -8px;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid black;
}

span.hover {
    position: relative;
    cursor:pointer;
    width: auto;
}

span.hover:hover span.show{
    display: block;
}

.opacity70 {
    opacity: 0.7;
}

.marginLeft10px {
    margin-left: 10px;
}

.marginRight10px {
    margin-right: 10px;
}

.tableCenter {
    text-align: center !important;
}

/*
 * Abschnitt um Seite auch ohne Javascript nutzbar zu machen (wird durch JS deaktiviert):
 */
/* Label für input-Felder hochziehen*/
label.js-safe {
    margin-top: -30px;
}
/* Collapsibles aufklappen: */
.collapsible-body.js-safe {
    display: block;
}
/* Select-Inputs anzeigen: */
select.js-safe{
    display: block;
}

.graph .labels.x-labels {
  text-anchor: middle;
}

.graph .labels.y-labels {
  text-anchor: end;
}


.graph {
  height: 500px;
}

.graph .grid {
  stroke: #ccc;
  stroke-dasharray: 5;
  stroke-width: 2;
}
.graph .grid .achse{
  stroke: #ccc;
  stroke-dasharray: 0;
  stroke-width: 2;
}

.labels {
  font-size: 13px;
}

.label-title {
  font-weight: bold;
  text-transform: uppercase;
  font-size: 12px;
  fill: black;
}

.dataAusgaben {
  fill: red;
  stroke-width: 1; 
}
.dataEinnahmen {
  fill: green;
  stroke-width: 1; 
}
.dataUmsatz {
  fill: blue;
  stroke-width: 1;
}

.dataEinkauf {
  fill: blue;
  stroke-width: 1; 
}
.dataGehalt {
  fill: green;
  stroke-width: 1; 
}
.dataLaufendeKosten {
  fill: orange;
  stroke-width: 1; 
}
.dataMitgliedsbeitrag {
  fill: blue;
  stroke-width: 1; 
}
div.scrollmenu {
  background-color: white;
  overflow: auto;
  white-space: nowrap;
}

div.scrollmenu a {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px;
  text-decoration: none;
}

div.scrollmenu a:hover {
  background-color: #777;
}

.pie {
	height: calc(var(--size, 200) * 1px);
	position: relative;
	width: calc(var(--size, 200) * 1px);
	background:  #C0392B;
	overflow:hidden;
	border-radius: 100%;
}

.pie__segment {
	--a: calc(var(--over50, 0) * -100%);
	--b: calc((1 + var(--over50, 0)) * 100%);
	--degrees: calc((var(--offset, 0) / 100) * 360);
	height: 100%;
	
	position: absolute;
	transform: translate(0, -50%) rotate(90deg) rotate(calc(var(--degrees) * 1deg));
	clip-path: polygon(var(--a) var(--a), var(--b) var(--a), var(--b) var(--b), var(--a) var(--b));
	-webkit-clip-path: polygon(var(--a) var(--a), var(--b) var(--a), var(--b) var(--b), var(--a) var(--b));
	transform-origin: 50% 100%;
	width: 100%;
}

.pie__segment:before {
	--degrees: calc((var(--value, 45) / 100) * 360);
	content: attr(data-label);
	font-size:x-large;
	transform: translate(0, 100%) rotate(calc(var(--degrees) * 1deg));
	transform-origin: 50% 0;
}

.pie__segment:after {
	opacity: var(--over50, 0);
}

.pie__segment:before,
.pie__segment:after{
	background: var(--bg, #e74c3c);
	height: 100%;
	position: absolute;
	width: 100%;
}

.material-icons.left {
    margin: 0 7px 0 0;
}