body { font-family: 'Open Sans Condensed', sans-serif; font-size:150%; font-weight: 300; color: var(--text); }
a { color:var(--primary); text-decoration: none; }
.clearfloat { clear:both; height:0; font-size: 1px; line-height: 0px; }
.clearfix::after { content: ""; clear: both; display: table; }
.contentContainer { width:100%; max-width:1200px; margin:0 auto; }
h1, h2, h3, h4 { font-weight: 100; }
h3 { font-size: 140%; }
.footerContainer { background-color: var(--grey); }
.footer { width:100%; max-width:1200px; margin:60px auto 0 auto; line-height: 60px; font-size: 80%; text-align: right;position: relative;  }
.footer a { display: inline-block; padding:0 20px; }

b, strong { font-weight: 700; }

.feedbackbogenLink { display: inline-block; background: var(--primary); color: var(--white); line-height: 1; padding: 1rem; font-size: 120%; transition: all .5s ease-in-out; margin-top: 2rem; }
.feedbackbogenLink:before { margin: 0 .25rem 0 0; }
.feedbackbogenLink:hover { opacity: 0.8; }

.button { cursor: pointer; background: var(--grey); display: inline-block; padding: 5px 10px; }
.warning { background: rgba(255,0,0,0.2); }

.menu { display: block; margin: 0; padding: 0; }
.menu li { float: left; display: block; list-style: none; margin: 0 2px 0 0; padding: 0; }
.menu li a { display: block; padding: 5px 20px; color: var(--text); background: var(--grey); cursor: pointer; }
.menu li a.aktiv, .menu li a:hover { background: var(--primary); color: var(--white); }

table { width: 100%; text-align: left; border-collapse: collapse; }
table.inputTable td, table.inputTable th { padding: 0 10px; }
table.inputTable td:first-child, table.inputTable th:first-child { padding-left: 0; }
table.inputTable input { width: 100%; }
td .button { margin: 0; }

table.inputTable .codeColumn .icon-off { float: left; line-height: 35px; color: var(--warnung); }
table.inputTable .isLoggedin .codeColumn .icon-off { color: var(--erfolgreich); }
table.inputTable .codeColumn input { width: auto; float: left; }

#secondScreenText { height: 200px; border-color: var(--grey); }
#secondScreenText.readonly { cursor: default; background: var(--lightgrey); }
.secondScreenWrapper textarea { width: 90%; float: left; padding: 20px; }
.secondScreenWrapper #secondScreenButton { float: left; width: 10%; text-align: center; height: 200px; line-height: 200px; font-size: 200%; }
#secondScreenButton, #secondScreenButton:hover { background: var(--grey); color: var(--text); text-decoration: none; position: relative; }
#secondScreenButton span { position: absolute; top: 50%; left: 10%; width: 80%; height: 2px; background: var(--text); z-index: 5; transform: rotate(45deg); }
#secondScreenButton.active, #secondScreenButton.active:hover { background: var(--red); color: var(--white); text-decoration: none; }
#secondScreenButton.active span, #secondScreenButton.active:hover span { display: none; }

#secondScreenButton:hover span { display: none; }
#secondScreenButton.active:hover span { display: inline; background: var(--white); }

body.umfrage #secondScreenButton, body.multiple_choice #secondScreenButton { float: right; width: 5%; margin-left: 1%; line-height: 45px; text-align: center; }
body.umfrage #secondScreenButton span, body.multiple_choice #secondScreenButton span { height: 2px; }

.deleteUmfrageBtn { float: right; }

label { display: block; width: 100%; }
input, textarea, select { display: block; width: 100%; margin: 0 0 10px 0; border: 1px solid var(--darkGrey); }
input[type="submit"] { display: inline-block; width: auto; border: none; padding: 5px 10px; background: var(--grey); cursor: pointer; color: var(--text); }
input[type="submit"]:hover, .button:hover, .submitButton:hover { background: var(--primary); color: var(--white); }
input[readonly] { border: none; }
.checkboxWrapper { margin-bottom: 10px; }
.checkboxWrapper input[type="checkbox"], .checkboxWrapper label  { width: auto; float: left; margin: 0; }
.checkboxWrapper input[type="checkbox"] { margin-left: 10px; height: 27px; }
body.konfiguration textarea { height: 300px; }

#ds_container { margin: 10px 0 20px 0; }
#ds_container label { width: 95%; float: left; margin-left: 0.5%; margin-top: 0; }
#ds_container input[type="checkbox"] { margin-top: 7px; width: auto; float: left; }

.generateCodesWrapper input, .generateCodesWrapper .button { float: left; line-height: 33px; margin-right: 10px; }
.generateCodesWrapper .button { line-height: 29px; }

.chatContainer { border-bottom: 1px solid var(--grey); padding-bottom: 20px; }
.logoContainer { text-align: center; margin:0 0 40px 0; }
.logoContainer img { width:98%; height:auto; max-width:300px; }
.textContainer { margin:40px auto 0 auto; }
.qaContainer { width:100%; margin:40px auto 0 auto; padding-bottom: 20px; border-bottom: 1px solid var(--grey); }
.qaForm div { line-height: 40px; margin:15px 0; }
.qaForm label { width:10%; float:left; display: block;}
.qaForm input { border:1px solid var(--text); width:88%; float:right; line-height: 40px; }
.red { color:red; }

body.qa .row { display: inline-grid; grid-template-columns:10% 50% 20% 10%; width:100%; }
body.qa .row div { padding:10px 10px; border-style: solid; border-color:var(--grey); border-width:0px; border-bottom-width: 1px; border-right-width: 1px; }
body.qa .row div span { display:inline-block; line-height: 60px; padding:0 5px; color:var(--grey); cursor:pointer; font-size:150%; }
body.qa .row div span.icon-check.gesetzt { color:green; }
body.qa .row div span.icon-archive.gesetzt { color:black; }
body.qa .row div:nth-of-type(1) {  }
body.qa .row div:last-of-type { border-right-width: 0px; }

body.stream .frageWrapper .frageEl { border: none; }
.frageWrapper .frageEl { margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid var(--grey); }
.frageWrapper .frageEl:last-child { margin: 0; padding: 0; border: none; }
.frageWrapper .frageEl .top { margin-bottom: 10px; }
.frageWrapper .frageEl .top .frage { float: left; width: 62%; margin: 0; font-size: 150%;}
.frageWrapper .frageEl .top .frage:last-child { width: 100%; }
.frageWrapper .frageEl .top .activateBtn { user-select: none; cursor: pointer; display: block; float: left; width: 10%; text-align: center; background: var(--green); line-height: 55px; color: var(--text); }
.frageWrapper .frageEl .top .activateBtn:hover { text-decoration: underline; }
.frageWrapper .frageEl .top .activateBtn.active { background: var(--red); color: var(--white); }
.frageWrapper .frageEl input[type="submit"] { margin: 0; border: none; line-height: 40px; display: block; width: 100%; cursor: pointer; background: var(--grey); }
.frageWrapper .frageEl input[type="submit"]:hover { background: var(--primary); color: var(--white); }
.frageWrapper .frageEl .top .modusWrapper { float: left; width: 20%; margin: 0 1%; }
.frageWrapper .frageEl .top .modusWrapper .modusEl { float: left; width: 50%; background: var(--grey); line-height: 55px; text-align: center; cursor: pointer; user-select: none; }
.frageWrapper .frageEl .top .modusWrapper .modusEl.active { background: var(--darkGrey); color: var(--white); cursor: default; text-decoration: underline; }
.frageWrapper .frageEl .top .modusWrapper .modusEl:hover { text-decoration: underline; }
.frageWrapper .frageEl .top .modusWrapper .modusEl.active:hover { text-decoration: underline; }

.antwortenContainer { margin: 0 -0.5%; }
.antwortenContainer .antwortenWrapper { float: left; width: 49%; margin: 0.5%; }
.antwortenContainer .antwortenWrapper .antwortenEl { display: block; width: 100%; border: 1px solid var(--grey); }
.modus0 .antwortenContainer .antwortenWrapper .antwortenEl { padding: 10px; }
.frageWrapper .frageEl .gesamtanzahl { margin-top: 10px; }
.frageEl.angezeigt .antwortenContainer .antwortenWrapper .antwortenEl span, .frageEl.abgestimmt .antwortenContainer .antwortenWrapper .antwortenEl span { float: right; font-size: 70%; display: block; line-height: 27px; }

.frageEl.verborgen .antwortenContainer .antwortenWrapper .antwortenEl { position: relative; margin-bottom: 1%; }
.frageEl.verborgen .antwortenContainer .antwortenWrapper .antwortenEl input { position: relative; z-index: 2; background: none; margin: 0; }
.frageEl.verborgen .antwortenContainer .antwortenWrapper .antwortenEl span { position: absolute; top: 0; right: 5px; font-size: 70%; display: block; line-height: 39px; z-index: 2; }
.frageEl.verborgen .antwortenContainer .antwortenWrapper .antwortenEl .abstimmungsBalken { position: absolute; top: 0; left: 0; height: 20px; background: var(--grey); z-index: 1; height: 100%; }

#streamComponents .frageWrapper { margin: 40px 0 10px 0; padding-bottom: 50px; border-bottom: 1px solid var(--grey); }
#streamComponents .antwortenContainer .antwortenWrapper .antwortenEl { /*background: var(--grey); padding: 10px 10px;*/ margin-bottom: 10px; cursor: pointer; }
#streamComponents .antwortenContainer .antwortenWrapper .antwortenEl:hover, #streamComponents .antwortenContainer .antwortenWrapper .antwortenEl.active { background: var(--primary); color: var(--white); }
#streamComponents .frageWrapper .frageEl .top .frage { font-size: 140%; font-weight: 300; }
#streamComponents .frageWrapper .frageEl.abgestimmt .antwortenContainer .antwortenWrapper .antwortenEl, #streamComponents .frageWrapper .frageEl .antwortenContainer .antwortenWrapper .antwortenEl.active { cursor: not-allowed; }
#streamComponents .frageWrapper .frageEl.modus1.abgestimmt .antwortenContainer .antwortenWrapper .antwortenEl { cursor: default; }
#streamComponents .frageWrapper .frageEl.abgestimmt .antwortenContainer .antwortenWrapper .antwortenEl:hover { background: none; color: var(--text);/*background: var(--grey); color: var(--text);*/ }
#streamComponents .frageWrapper .frageEl.abgestimmt .antwortenContainer .antwortenWrapper .antwortenEl.active:hover { background: var(--primary); color: var(--white); }

body.umfrage .frageEl.angezeigt .antwortenContainer .antwortenWrapper .antwortenEl, body.multiple_choice .frageEl.angezeigt .antwortenContainer .antwortenWrapper .antwortenEl, .frageEl.abgestimmt .antwortenContainer .antwortenWrapper .antwortenEl { margin-bottom: 10px; border: 1px solid var(--grey); position: relative; }
body.umfrage .frageEl.angezeigt .antwortenContainer .antwortenWrapper .antwortenEl .abstimmungsBalken, body.multiple_choice .frageEl.angezeigt .antwortenContainer .antwortenWrapper .antwortenEl .abstimmungsBalken, .frageEl.abgestimmt .antwortenContainer .antwortenWrapper .antwortenEl .abstimmungsBalken { position: absolute; height: 20px; background: var(--grey); z-index: 1; height: 100%; }
body.umfrage .frageEl.angezeigt .antwortenContainer .antwortenWrapper .antwortenEl .antwort, body.multiple_choice .frageEl.angezeigt .antwortenContainer .antwortenWrapper .antwortenEl .antwort, .frageEl.abgestimmt .antwortenContainer .antwortenWrapper .antwortenEl .antwort { padding: 10px; position: relative; z-index: 2; }

.flex_container { display: -webkit-flex; display: -ms-flex; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; }
.flex_el { display: -webkit-flex; display: -ms-flexbox; display: flex; }
.flex_el .hilfscontainer { display: block; width: 100%; }

.logoutBtn { float: left; }
.logoutBtn div { display: inline; }

.note { display: inline-block; padding: 10px 20px; color: var(--white); background: var(--hinweis); margin-bottom: 20px; }
.note a { text-decoration: underline; color: var(--white); }
.note.warning { background: var(--warnung); }
.note.success { background: var(--erfolgreich); }

.activateBtnQa, .previewProgramBtn { user-select: none; cursor: pointer; display: block; float: left; width: auto; text-align: center; background: var(--green); line-height: 55px; margin-bottom: 20px; padding: 0 10px; color: var(--text); }
.activateBtnQa:hover, .previewProgramBtn:hover { text-decoration: underline; }
.activateBtnQa.active, .previewProgramBtn.active { background: var(--red); color: var(--white); }

#activateFeedbackBtn, #deactivateFeedbackBtn { float: right; }

.copyText, .copyTable { display: block; height: 0px; border: none; }
.copyBtn { margin-bottom: 10px; margin-left: 0.5%; }

#unsetFocus { display: block; position: fixed; right: -500px; top: 0; background: var(--primary); color: var(--white); transition: all .5s ease-in-out; -moz-transition: all .5s ease-in-out; -webkit-transition: all .5s ease-in-out; }
#unsetFocus.show { right: 0; }

#status { display: block; position: fixed; right: -600px; bottom: 0; background: var(--primary); color: var(--white); transition: all .5s ease-in-out; -moz-transition: all .5s ease-in-out; -webkit-transition: all .5s ease-in-out; padding: 5px 10px; } 
#status.show { right: 0; }

.angemeldeteCodes { margin-bottom: 20px; padding: 10px; border: 1px solid var(--grey); display: inline-block; width: auto; position: relative; min-width: 350px; }
.angemeldeteCodes span { font-size: 80%; position: absolute; bottom: 10px; right: 10px; }
.angemeldeteCodes .reloadBtn { margin-top: 10px; }

body.secondscreen { font-size: 200%; -ms-user-select: none; -webkit-user-select: none; -moz-user-select: none; user-select: none; }
body.secondscreen .logoContainer, body.secondscreen .footerContainer { display: none; }
body.secondscreen #secondScreenContainer {  min-height: 100vh; display: flex; align-items: center; justify-content: center; }
body.secondscreen .umfrage_secondscreen { width: 100%; max-width: 1000px; }

body.secondscreen .frage { display: block; margin: 0 0 20px 0; }
body.secondscreen .antwortenWrapper .antwortenEl { position: relative; margin-bottom: 1%; line-height: 65px; border: 1px solid var(--grey); }
body.secondscreen .antwortenWrapper .antwortenEl .antwort { padding: 0 10px; position: relative; z-index: 2; }
body.secondscreen .antwortenWrapper .antwortenEl span { position: absolute; top: 0; right: 10px; font-size: 70%; display: block; line-height: 65px; z-index: 2; }
body.secondscreen .antwortenWrapper .antwortenEl .abstimmungsBalken { position: absolute; top: 0; left: 0; background: var(--grey); z-index: 1; height: 100%; }
body.secondscreen .qa_secondscreen { font-size: 200%; line-height:1.2em; }

.showedAnswers { margin-bottom: 10px; }

#secondScreenLink { position: fixed; top: 0; right: 0; }
#secondScreenLink:before { margin-right: 10px; }

h3 div { float: left; margin-right: 5px; color: var(--primary); }

.fiftyWrapper { margin: -0.5%; }
.fiftyWrapper .fifty { float: left; width: 49%; margin: 0.5%; }

.aussageInput { margin: 0; }

table.aussageTable tr td, table.aussageTable tr th { padding: 0 15px 10px 0; }
table.aussageTable tr td:first-child { width: 100%; }
table.aussageTable input[readonly] { border: 1px solid var(--darkGrey); }

.feedbackBogen { background: var(--lightgrey); padding: 2rem; margin-bottom: 2rem; }
.feedbackBogen h2 { margin-top: 0; }
.feedbackBogen .feedbackAntwortenWrapper .feedbackAntwortenEl { float: left; width: 10%; display: block; }
.feedbackBogen .feedbackAntwortenWrapper .feedbackAntwortenEl .legend { font-size: 80%; text-align: center; margin-bottom: 5px; }
.feedbackBogen .feedbackAntwortenWrapper .feedbackAntwortenEl input { width: 100%; display: block; margin: 0; height: 50px; }
.feedbackBogen .feedbackAntwortenWrapper .feedbackAntwortenEl label { width: 100%; text-align: center; font-size: 60%; margin-top: 5px; text-align: center; }

.anmerkungWrapper { background: var(--lightgrey); padding: 2rem; margin-bottom: 2rem; }
.anmerkungWrapper textarea { margin-top: .5rem; height: 150px; padding: .5rem; }
.anmerkungWrapper h2 { margin: 0; }

.anregung { margin-bottom: 1rem; padding: 1rem; background: var(--lightgrey); }

.footerLogo { position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); width:30%; height:auto; max-height:65%; }
.footerLogo img { width:100%; height:auto; }

@media screen and (max-width:1200px)	{
    .textContainer, .qaContainer { width:96%; }
	#streamComponents { padding: 0 1.5%; }
}
@media screen and (max-width:970px)	{
    .videoContainer { float:none; width:100%; margin-bottom:40px; }
    .chatContainer { float:none; width:100%; }
    .qaForm label { width:20%; }
    .qaForm input { width:78%; }
	
}

@media screen and (max-width:850px)	{
	.feedbackBogen .feedbackAntwortenWrapper .feedbackAntwortenEl { width: 20%; margin-bottom: 2%; }
	.feedbackBogen .feedbackAntwortenWrapper .feedbackAntwortenEl input { height: 30px; }
}
@media screen and (max-width:600px)	{
    body { font-size: 120%; }
}
@media screen and (max-width:480px)	{
    .videoContainer { margin-bottom:20px; }
    .logoContainer { margin:0 0 20px 0; }
    .logoContainer img { width:60%; height:auto; max-width: none; }
	body { font-size: 100%; }
	#streamComponents .frageWrapper { padding-bottom: 20px; margin-top: 20px; }
}
@media screen and (max-width:390px)	{
    .qaForm label { display:none; }
    .qaForm input { width:100%; float:none; }
	body { font-size: 90%; }
	.antwortenContainer .antwortenWrapper { width: 98%; }
	.footer a { padding:0 5px; }
}