/**
 * Custom customer landingpage css
 */
html {
  min-height: 800px;
  box-sizing: border-box;
}

input, select, .dispWithArial{
	font-family: Arial !important;
	font-weight: bold !important;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button{
	-webkit-appearance: none;
	margin: 0;
}

input[type=number]{
	-moz-appearance: textfield;
}

.topHeader{
	margin-top: 85px;
}

.infobox{
	display: none;
	position: fixed;
	
	top: 5px;
	right: 5px;
	
	padding: 10px 20px;
	background-color: #258731;
	color: #eee;
	border: 2px groove	#C19B4B;
	border-radius: 5px;
	
	font-weight: bold;	
}

.headerLettering{
	display: block;
  	z-index: -1;
  	width: 100%;
  	text-align: center;
}

.headerLettering img{
	width: 42%;
}

.logo{
	position: absolute;
	right: 25px;
	top: 25px;
	z-index: -1;
}

.headerLanguageSwitch{
	position: absolute;
	left: 25px;
	top: 25px;
}

.langOption{
	cursor: pointer;
}

.langOptionBreak{
	color: rgba(255,255,255,1)
}
 
.Block{
	position: absolute;
	display: block;
	
	padding: 0px 20px 20px 20px;
	
	min-height: 500px;
  	width: 60%;
  	left: 20%;
    right: 20%;
    top: 20%;
		
	text-align: center;
	background-color: rgba(30,49,72,0.9);
  	border-radius: 5px;
}

.goldenBorder{
	border: 2px groove #C19B4B;
	border-radius: 5px;
}

.Block .content{
	display: none;
	z-index: 99;
}

.Block .spinnerBoxHolder{
	display: block;
	width: 100%;
	height: 100%;
}
.Block .spinnerBoxHolder .spinnerBoxes{
	margin-top: calc(50% - 175px);
	margin-left: calc(50% - 40px);
}

.Block  .content .header{
	text-align: left;
}

.Block  .content .inputRow .inputTitle{
	display: inline-block;
	overflow: hidden;
	vertical-align: top;
	width: 30%;
    margin-top: 10px;
}
.Block  .content .inputRow .inputTitleSmall{
	display: inline-block;
	overflow: hidden;
	vertical-align: top;
	width: 25%;
}
.Block  .content .inputRow .inputField {
	display: inline-block;
	overflow: hidden;
	width: 60%;
}

.Block  .content .inputRow .inputField .inputFieldHint {
	display: none;
	position: absolute;
	background-color: #123456;
	color: #fff;
	border: 1px solid #BC9A53;
	font-weight: bold;
	z-index: 999;
	max-width: 400px;
	padding: 5px;
}

.Block  .content .inputRow .inputRadio{
	text-align: left !important;
}

.Block  .content .inputRow .inputCheckbox{
	text-align: left !important;
}

.Block .content .inputRow label{
	min-width: 50px;
}

.Block .content .inputRow .evalSmilie{
	padding: 5px;
	margin: 5px;
	border: 5px solid transparent;
	border-radius: 10px;
}

.Block .content .inputRow .evalSmilieSelected{
	border: 5px solid #118888;
	border-radius: 10px;
}

.Block  .content .inputRow #DebitorStreet, .Block  .content .inputRow #DebitorTown {
	width: 40%;
}
.Block  .content .inputRow #DebitorStreetNo, .Block  .content .inputRow #DebitorPostCode {
	width: 18%;
}

.Block  .content .inputRow .inputRequired {
	display: inline-block;
	overflow: hidden;
}

.Block  .content .inputFieldHint {
	font-size: 14px;
	margin-left: 10px;
}

.Block  .content .inputHint {
	display: block;
	width: 100%;
	padding: 10px;
	float: right;
	text-align: right;
	font-size: 12px;
	font-style: italic;
}

.Block  .content .buttons {
	display: block;
	width: 100%;
}

.Block  .content .buttons .inputButtons{
	display: inline-block;
	margin: 5px;
}

.Block  .content .displayVersion{
	display: none;
	font-size: 10px;
	font-style: italic;
	text-align: right;
	margin-top: 40px;
}

.Block  .content .submitMessage{
	color: #22aa22;
	display: block;
	font-weight: bold;
	font-size: 25px;
}

.Block  .content .failedMessage{
	color: #C90000;
	display: block;
	font-weight: bold;
	font-size: 25px;
}

.footer {
	position: fixed;
	display: block;
	width: 100%;
	right: 0px;
	bottom: 0px;
	margin-top: 50px;
	padding: 1rem;
	text-align: right;
	float: right;
  	cursor: pointer;
	z-index: -1;
}

.footer a{
	text-decoration: none;
	color: #dbdbdb;
    color: var(--text-main);
}

.footer2{
	z-index: -2;
}

#hamburger-input{
	visibility: hidden;
}

#hamburger-menu {
    visibility: hidden;
	width: 30px;
    height: 30px;
    display: block;
	position:absolute;
	left: 25px;
	top: 70px;
    background: linear-gradient(
      to bottom, 
      rgba(255,255,255,1), rgba(255,255,255,1) 20%, 
      rgba(255,255,255,0) 20%, rgba(255,255,255,0) 40%, 
      rgba(255,255,255,1) 40%, rgba(255,255,255,1) 60%, 
      rgba(255,255,255,0) 60%, rgba(255,255,255,0) 80%, 
      rgba(255,255,255,1) 80%, rgba(255,255,255,1) 100%
    );
}

#hamburger-input:checked + #hamburger-menu{
	visibility: hidden;
	width: 300px;
    height: 300px;
	right: 0px;
	top: 0px;
	z-index: 10;
}

#hamburger-menu #sidebar-menu {
    visibility: hidden;
}

#hamburger-menu #sidebar-menu li{
	list-style-type: square;
  	color: rgba(157,157,157,1);
 }

#hamburger-menu #sidebar-menu h2 {
  	color: rgba(30,49,72,1);  
  	padding: 20px;
}

#hamburger-menu #sidebar-menu a, #hamburger-menu #sidebar-menu span {
  color: rgba(157,157,157,1);
  font-size: 16px;
  text-decoration: none;
  cursor: pointer;
  font-weight: bold;
}

#hamburger-input:checked + #hamburger-menu #sidebar-menu{
	visibility: visible;
	display:block;
  	position: fixed;
  	left: 0px;
  	top: 0px;
	width: 30%;
	min-width: 300px;
	height: 100em;
	background-color: rgba(255,255,255,1);
	
}

@media screen and (max-width: 750px) {
  	body{
  		line-height: 1.2;
        font-size: 14px;
  	}
  	
  	.headerLettering{
    	margin-top: 110px;  
  	}
  
  	.Block{
  		width: 80%;
  		left: 5%;
    	right: 5%;
    	top: 20%;
  	}
  	
  	.footer{
		visibility: hidden;
	}
	
	#hamburger-menu{
		visibility: visible;
	}
}

@media screen and (min-width: 750px) {
	body{
  		line-height: 1.4;
        font-size: 18px;
  	}
  	
  	.headerLettering{
  		margin-top: 0px;  
  	}
  
  	.Block{
  		width: 60%;
  		left: 20%;
    	right: 20%;
    	top: 20%;
 	}
  
  	.footer{
		visibility: visible;
	}

	#hamburger-menu{
		visibility: hidden;
	}
}

.footer2{
	/*position: -webkit-sticky;*/
	position: absolute;
	display: none;
	right: 0;
	bottom: 0;
	left: 0;
	padding: 1rem;
	text-align: left;
	background-color: #eee;
	color: #333;
	float: left;
}

.footer2 #footerHeader{
	font-weight: bold;
	text-align: right;
	float: right;
	margin: 20px;
}

.footer2 #footerHeaderClose{
	display: none;
	color: darkred;
	font-weight: bold;
	text-align: right;
	float: right;
	margin: 20px;
	cursor: pointer;
}

.footer2 #footerContent{
	margin-left: 10px;
	margin-top: 35px;
	width: 85%;
	height: 200px;
	overflow-x: auto;
	overflow-y: auto;
	padding: 5px;
	background-color: #eee
}

/* CREATION */
.createPollCol{
	display: block;
	width: 90%;
	padding: 10px 20px;
	margin-top: 10px;
	text-align: left;
}
.createPollCol:after{
	content: "\25B7";
	font-size: 20px;
	float: right;
}
.createPollCell{
	display: inline-block;
	padding: 5px 20px;
}
.createPollContent{
	display: none;
	width: 90%;
	padding: 10px 20px;
	text-align: left;
}
.createPollContent .inputRow .inputTitle{
	display: inline-block;
	overflow: hidden;
	vertical-align: top;
	width: 25%;
    margin-top: 10px;
}
.createPollContent  .inputRow .inputTitleSmall{
	display: inline-block;
	overflow: hidden;
	vertical-align: top;
	width: 25%;
}
.createPollContent .inputRow .inputField{
	display: inline-block;
	overflow: hidden;
	width: 60%;
}
.createPollContent .buttons{
	display: block;
	margin: 20px;
}
.createPollContent .buttons .inputButtons{
	display: inline-block;
	margin: 0px 20px;
}