/*CSS für index.php der Abstimmseite in eduvote.de/vote/*/
	
	body { 
	  font-family: "Gill Sans Extrabold", Helvetica, sans-serif;
	}
	.header {
	  position: fixed;
	  left: 0;
	  top: 0;
	  width: 100%;
	  background-color: var(--dunkel);
	  color: white;
	  text-align: center;
	  border-width: 1px 0px;
	  border-style: solid;
	  border-color: var(--rahmen);
	}
	.menue {
  	  width: 30px;
  	  height: 3px;
	  background-color: white;
	  margin-right: 10px;
	  margin-left: 10px;
	  margin-top: 3px;
	  margin-bottom: 3px;
	}
	#burgermenue:hover {
		opacity: 0.7;
	}
	.header-container {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.header-item img {
		padding-left: 10px;
		padding-right: 10px;
		padding-top: 4px;
	}
	.header-item img:hover {
		opacity: 0.7;
	}
	.header-item p {
		margin: 10px;
		font-size: 20px;
	}
	.footer {
	  position: fixed;
	  left: 0;
	  bottom: 0;
	  width: 100%;
	  background-color: var(--dunkel);
	  color: var(--schrift);
	  text-align: center;
	  z-index: -1 !important;
	  border-width: 1px 0px;
	  border-style: solid;
	  border-color: var(--rahmen);
	}
	.footer img {
		width: 34px;
		height: 34px;
		padding-top: 4px;
		padding-bottom: 0px;
	}
	.flip-container {
		display: flex;
		justify-content: center;
		margin-top: 55px;
	}
	.flip-item {

	}
	.scene {
	  width: 300px;
	  height: 270px;
	  border: 0px solid #CCC;
	  /*margin: 40px 0;*/
	  perspective: 600px;
	  z-index: 1000 !important;
	}
	.card {
	  width: 100%;
	  height: 100%;
	  transition: transform 1s;
	  transform-style: preserve-3d;
	  cursor: pointer;
	  position: relative;
	}
	.card.is-flipped {
	  transform: rotateY(180deg);
	}
	.card__face {
	  position: absolute;
	  width: 100%;
	  height: 100%;
	  line-height: auto;
	  color: white;
	  text-align: left;
	  font-size: 20px;
	  -webkit-backface-visibility: hidden;
	  backface-visibility: hidden;
	}
	.card__face--front {
	  background: var(--hintergrund);
	  border: 1px solid var(--hell);
	}
	.card__face--back {
	  background: var(--hintergrund);
	  transform: rotateY(180deg);
	  border: 1px solid var(--hell);
	}
	.karten-inhalt {
		margin: 10px;
	}
	.karten-inhalt-rueckseite {
		margin: 10px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-direction: column;
		flex-wrap: wrap;
	}
	/* Full-width inputs */
	input[type=text] {
	  width: 100%;
	  padding: 12px 20px;
	  margin: 8px 0;
	  display: inline-block;
	  border: 1px solid var(--hell);
	  border-radius: 0px !important;
	  box-sizing: border-box;
	  font-size: 18px;
	}
	.voteSite {
		display: flex;
		height: 100%;
		flex-direction: column;
		justify-content: space-between;
	}

	.abc-container {
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
	}
	.abc-item {
		padding-left: 10px;
		padding-right: 10px;
	}
	.button-container {
		display: flex;
		justify-content: center;
	}
	.btn {
	  border: 2px solid black;
	  background-color: white;
	  cursor: pointer;
	  margin: 10px;
	  border-color: var(--dunkel);
	  color: var(--dunkel);
	  font-weight: bold;
	}
	.btn:hover {
	  background-color: var(--dunkel);
	  color: white;
	  font-weight: bold;
	}
	/* vote */
	.vote {
		font-size: 16px;
		padding: 14px 28px;	 
	}
	/* scButton */
	.scButton {
		width: 200px !important;
		height: 30px !important;
		font-size: 20px !important;
		margin-top: 0px !important;
	}
	
	.votebtn {
		display: flex; /*partnerlogo und vote-buttom*/
		flex-direction: column; /*partnerlogo und vote-buttom*/
		/*position: absolute;*/
		bottom: 0px;
		right: 0px;
		width: 100%;
		-webkit-backface-visibility: hidden;
	  	backface-visibility: hidden;
	}
	.votebtn img {
		height: auto;
		width: auto;
	}
	 /* The container must be positioned relative: */
	.custom-select {
	  position: relative;
	  font-family: Arial;
	  -webkit-backface-visibility: hidden;
	  backface-visibility: hidden;
	}
	.custom-select select {
	  display: none; /*hide original SELECT element: */
	}
	.select-selected {
	  background-color: var(--hell);
	}
	/* Style the arrow inside the select element: */
	.select-selected:after {
	  position: absolute;
	  content: "";
	  top: 14px;
	  right: 10px;
	  width: 0;
	  height: 0;
	  border: 6px solid transparent;
	  border-color: #fff transparent transparent transparent;
	  -webkit-backface-visibility: hidden;
	  backface-visibility: hidden;
	}
	/* Point the arrow upwards when the select box is open (active): */
	.select-selected.select-arrow-active:after {
	  border-color: transparent transparent #fff transparent;
	  top: 7px;
	}
	/* style the items (options), including the selected item: */
	.select-items div,.select-selected {
	  color: var(--schrift);
	  padding: 8px 16px;
	  border: 1px solid transparent;
	  border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;
	  cursor: pointer;
	}
	/* Style items (options): */
	.select-items {
	  position: absolute;
	  background-color: var(--dunkel);
	  top: 100%;
	  left: 0;
	  right: 0;
	  z-index: 99;
	}
	/* Hide the items when the select box is closed: */
	.select-hide {
	  display: none;
	}
	.select-items div:hover, .same-as-selected {
	  background-color: rgba(0, 0, 0, 0.1);
	} 
	 /* Customize the label (the container) */
	.check-container {
	  display: block;
	  position: relative;
	  padding-left: 50px;
	  margin-bottom: 12px;
	  cursor: pointer;
	  font-size: 28px;
	  color: var(--dunkel);
	  -webkit-user-select: none;
	  -moz-user-select: none;
	  -ms-user-select: none;
	  user-select: none;
	}
	.voteButton.is-hidden {
		display: none;
	}
	.final.is-hidden {
		display: none;
	}
	/* Hide the browser's default checkbox */
	.check-container input {
	  position: absolute;
	  opacity: 0;
	  cursor: pointer;
	  height: 0;
	  width: 0;
	}
	/* Create a custom checkbox */
	.checkmark {
	  position: absolute;
	  top: 0;
	  left: 0;
	  height: 34px;
	  width: 34px;
	  background-color: var(--hell);
	}
	/* On mouse-over, add a grey background color */
	.check-container:hover input ~ .checkmark {
	  background-color: var(--hell);
	}
	/* When the checkbox is checked, add a blue background */
	.check-container input:checked ~ .checkmark {
	  background-color: var(--dunkel);
	}
	/* Create the checkmark/indicator (hidden when not checked) */
	.checkmark:after {
	  content: "";
	  position: absolute;
	  display: none;
	}
	/* Show the checkmark when checked */
	.check-container input:checked ~ .checkmark:after {
	  display: block;
	}
	/* Style the checkmark/indicator */
	.check-container .checkmark:after {
	  left: 11px;
	  top: 3px;
	  width: 10px;
	  height: 20px;
	  border: solid white;
	  border-width: 0 3px 3px 0;
	  -webkit-transform: rotate(45deg);
	  -ms-transform: rotate(45deg);
	  transform: rotate(45deg);
	} 
	/* The side navigation menu */
	.sidenav {
	  height: 100%; /* 100% Full-height */
	  width: 0; /* 0 width - change this with JavaScript */
	  position: fixed; /* Stay in place */
	  z-index: 100000; /* Stay on top */
	  top: 0; /* Stay at the top */
	  right: 0;
	  background-color: #111; /* Black*/
	  overflow-x: hidden; /* Disable horizontal scroll */
	  padding-top: 60px; /* Place content 60px from the top */
	  transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
	}

	/* The navigation menu links */
	.sidenav a {
	  padding: 8px 8px 8px 32px;
	  text-decoration: none;
	  font-size: 25px;
	  color: #818181;
	  display: block;
	  transition: 0.3s;
	}

	/* When you mouse over the navigation links, change their color */
	.sidenav a:hover {
	  color: #f1f1f1;
	}

	/* Position and style the close button (top right corner) */
	.sidenav .closebtn {
	  position: absolute;
	  top: 0;
	  right: 10px;
	  font-size: 36px;
	  margin-left: 50px;
	}

	/* The container for radio Buttons Menue */
	.radio-container {
	  display: block;
	  position: relative;
	  padding-left: 35px;
	  margin-bottom: 12px;
	  cursor: pointer;
	  font-size: 22px;
	  color: #818181;
	  -webkit-user-select: none;
	  -moz-user-select: none;
	  -ms-user-select: none;
	  user-select: none;
	}
	/* Hide the browser's default radio button */
	.radio-container input {
	  position: absolute;
	  opacity: 0;
	  cursor: pointer;
	}
	/* Create a custom radio button */
	.radiobtn {
	  position: absolute;
	  top: 0;
	  left: 0;
	  height: 25px;
	  width: 25px;
	  background-color: #eee;
	  border-radius: 50%;
	}
	/* On mouse-over, add a grey background color */
	.radio-container:hover input ~ .radiobtn {
	  background-color: #ccc;
	}
	/* On mouse-over, Schrift heller */
	.radio-container:hover {
	  color: #f1f1f1;
	}
	/* When the radio button is checked, add a grey background */
	.radio-container input:checked ~ .radiobtn {
	  background-color: grey;
	}
	/* Create the indicator (the dot/circle - hidden when not checked) */
	.radiobtn:after {
	  content: "";
	  position: absolute;
	  display: none;
	}
	/* Show the indicator (dot/circle) when checked */
	.radio-container input:checked ~ .radiobtn:after {
	  display: block;
	}
	/* Style the indicator (dot/circle) */
	.radio-container .radiobtn:after {
	 	top: 9px;
		left: 9px;
		width: 8px;
		height: 8px;
		border-radius: 50%;
		background: white;
	}
	/* The container for radio Buttons Menü - END */

	/* The container for radio Buttons abc - START */
	.radio-container-abc {
	  display: block;
	  position: relative;
	  padding-left: 35px;
	  margin-bottom: 12px;
	  cursor: pointer;
	  font-size: 22px;
	  color: var(--dunkel);
	  -webkit-user-select: none;
	  -moz-user-select: none;
	  -ms-user-select: none;
	  user-select: none;
	}
	/* Hide the browser's default radio button */
	.radio-container-abc input {
	  position: absolute;
	  opacity: 0;
	  cursor: pointer;
	}
	/* Create a custom radio button */
	.radiobtn-abc {
	  position: absolute;
	  top: 0;
	  left: 0;
	  height: 25px;
	  width: 25px;
	  background-color: var(--hell);
	  border-radius: 50%;
	}
	/* On mouse-over, add a grey background color */
	.radio-container-abc:hover input ~ .radiobtn-abc {
	  background-color: var(--hell);
	}
	/* On mouse-over, Schrift heller */
	.radio-container-abc:hover {
	  color: var(--hell);
	}
	/* When the radio button is checked, add a grey background */
	.radio-container-abc input:checked ~ .radiobtn-abc {
	  background-color: var(--dunkel);
	}
	/* Create the indicator (the dot/circle - hidden when not checked) */
	.radiobtn-abc:after {
	  content: "";
	  position: absolute;
	  display: none;
	}
	/* Show the indicator (dot/circle) when checked */
	.radio-container-abc input:checked ~ .radiobtn-abc:after {
	  display: block;
	}
	/* Style the indicator (dot/circle) */
	.radio-container-abc .radiobtn-abc:after {
	 	top: 9px;
		left: 9px;
		width: 8px;
		height: 8px;
		border-radius: 50%;
		background: white;
	}
	/* The container for radio Buttons abc - END */

	.radiogroup-container {
		display: flex;
		justify-content: space-around;
	}
	.radiogroup-item-abc {
		margin: 10px;
	}

	#alert-box {
		position: absolute;
		z-index: 10000;
		width: 100%;
		bottom: 0px;
		left: 0px;
		padding-top: 15px;
		padding-bottom: 15px;
		color: white;
	    background-color: black;
	    border-color: black;
	    opacity: 0;
  		transition: opacity 1s;
	}
	#alert-box.fade {
		opacity: 1;
	}
	.scodeinput.is-hidden {
		display: none;
	}
	.custom-select.is-hidden {
		display: none;
	}
	#alert-box.is-hidden {
		display: none;
	}