* {
	font-family: Open Sans, Arial;
	margin: 0px;
	padding: 0px; 
}

body {
	background-color: #F0F2F5;
	
}


#mainlogo {
	margin-left: auto; 
	margin-right: auto; 
	margin-bottom: -10px;
}

@media only screen and (max-width: 600px) {
	#mainlogo {
		max-width: 120px; 
	}
}

hr {
	border: none;
	border-bottom: 1px dashed #37C195;
	margin: 10px 0px; 
}

.flags {
	max-width: 760px;
	margin-left: auto;
	margin-right: auto;		
	padding-top: 15px;	
	text-align: right;
	margin-bottom: -35px;
}

.flag {
	border-radius: 3px;
	width: 30px;
	height: 20px;
	background-size: cover;
	display: inline-block;
	opacity: 0.8;
}

.flag:hover {
	opacity: 1;
}

.paper {
	background-color: white;
	max-width: 760px; 
	border-radius: 10px;
	padding: 20px;
	margin: 20px; 
	margin-left: auto;
	margin-right: auto;	
	box-shadow: 4px 2px 5px -2px rgba(0,0,0,0.27);
	-webkit-box-shadow: 4px 2px 5px -2px rgba(0,0,0,0.27);
	-moz-box-shadow: 4px 2px 5px -2px rgba(0,0,0,0.27);
	position: relative; 
}


a.std {
	text-decoration: none; 
	color: black; 
}

a.std:hover {
	text-decoration: underline;
}

.qrurl {
	overflow-wrap: break-word;
}

.break {
	clear: both; 
}


input[type=text].std {
	padding: 10px 20px; 
	border-radius: 20px;
	border: none;
	background-color: #F0F2F5;
	font-size: 16px; 
	width: 100%;	
	max-width: 400px; 
}

input[type=button].submit, .button {
	padding: 10px 20px; 
	border-radius: 20px;
	border: none;	
	background-color: #37C195;
	font-size: 18px; 	
	cursor: pointer; 	
	color: white; 
	display: inline-block;	
	text-decoration: none; 
}


input[type=button].submit:hover, .button:hover {
	background-color: #5DD1AA;

}

.button.red {
	padding: 10px 20px; 
	border-radius: 20px;
	border: none;	
	background-color: red;
	font-size: 18px; 	
	cursor: pointer; 	
	color: white; 
	display: inline-block;	
	text-decoration: none; 
}

.button.red {
	padding: 10px 20px; 
	border-radius: 20px;
	border: none;	
	background-color: #C10000;
	font-size: 18px; 	
	cursor: pointer; 	
	color: white; 
	display: inline-block;	
	text-decoration: none; 
}

.button.red:hover {

	background-color: red;

}

.button.small {
	padding: 5px 10px; 
	font-size: 14px; 
	border-radius: 4px; 
}

#menuicon {
	width: 30px;
	height: 22px;
	
	position: absolute;
	right: 20px;
	top: 20px; 
	cursor: pointer; 
}


ul.benefit {
    list-style-type: none;
    margin-left: 10px;
}

ul.benefit li {
    margin-bottom: 12px;
    margin-left: -10px;
    display: flex;
    align-items: center;
}

ul.benefit li::before {
    color: transparent;
    font-size: 1px;
    content: " ";
    margin-left: -1.3em;
    margin-right: 15px;
    padding: 10px;
    background-color: #37C195;
    -webkit-mask-image: url("/img/check-circle-solid.svg");
    -webkit-mask-size: cover;
}

#menu {
	display: none; 
	position: fixed;
	z-index: 100;
	top: 0px;
	padding-top: 10px;
	bottom: 0px; 
	background-color: #F0F2F5;
	top: 0px;
	left: 0px;
	bottom: 0px;
	right: 0px; 
}

#menu #menucontent {
	max-width: 800px;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	position: fixed;
	margin-top: 10px; 
	left: 50%;
	transform: translate(-50%);	
	height: 90%;	
	border-radius: 10px; 
	background-color: white; 
}

#menu #menuitems {
	margin-top: 80px; 
}

#menu #menuitems a {
	
	display: block;
	padding: 10px;
	padding-left: 30px; 
	font-size: 30px; 
	text-decoration: none;
	color: black;
	text-align:left;		
}

#menu #menuitems a:hover {
	background-color: #37C195;
	color: white; 
}

#menu #menuitems a:hover img {
	filter: invert(100%);
}

@media only screen and (max-width: 840px) {
	.paper {
		margin: 20px; 
	}
	
	.flags {
		padding-right: 20px;
	}
	
	#menu #menucontent {
		position: fixed;
		left: 20px;
		right: 20px;
		top: 10px;
		bottom: 20px;
		transform: translate(0);	
		width: auto; 
	}
	
	
}


.closeicon {
	background-image: url('/img/close.png?1');
	background-size: cover;
	width: 30px;
	height: 30px; 
	cursor: pointer;
	right: 20px;
	top: 20px; 
	position: absolute;
	opacity: 0.8;
}

.closeicon:hover {
	opacity: 1;
}

.edit_icon {
	cursor: pointer; 
	filter: invert(0.5) sepia(1) saturate(3) hue-rotate(110deg);
	max-height: 19px; 
}

.edit_icon:hover {
	filter: invert(0.5) sepia(1) saturate(6) hue-rotate(110deg);
}

.nastaveni_icon {
	cursor: pointer; 
	filter: invert(0.5) sepia(1) saturate(3) hue-rotate(110deg);
	max-height: 33px; 	
}

.nastaveni_icon:hover {
	filter: invert(0.5) sepia(1) saturate(6) hue-rotate(110deg);
}



.history_icon {
	cursor: pointer; 
	filter: invert(0.5) sepia(1) saturate(3) hue-rotate(110deg);
	max-height: 19px; 
}

.history_icon:hover {
	filter: invert(0.5) sepia(1) saturate(6) hue-rotate(110deg);
}



.modalcontent {
	display: none; 
}

#modalwindow {
	position: fixed; 
	display: none;
	z-index: 200;
	background-color: white;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	border-radius: 10px;
	max-width: 500px;
	width: 100%;
	max-height: 90%;
	overflow-y: auto;
}

@media only screen and (max-width: 600px) {
	#modalwindow {
		width: 95%;
		left: 10px; 
		right: 10px; 
		transform: translate(0%, -50%);				
	}

}

#modalwindow #modalwindow-content {
	margin: 18px 20px 30px 20px;
}

#cover {
	display: none; 
	position: fixed;
	left: 0px;
	right: 0px;
	top: 0px;
	bottom: 0px;
	background-color: rgba(0,0,0,0.5); 	
	z-index: 150;
}

.boxik {
	background-color: #F0F2F5;
	border-radius: 10px; 
	padding: 15px; 
	text-align: left;
	margin-bottom: 20px; 	
	position: relative;
}

.boxik p {
	margin-bottom: 10px; 
}

.qravatar {
	cursor: pointer;
	background-image: url('/img/qr-avatar.png?xxx');
	width: 100px;
	height: 100px;
	float: right;
	margin-left: 10px; 
}

.boxik-date {
	font-size: 13px; 	
}


@media only screen and (max-width: 600px) {
	
	.boxik-date {
		margin-top: -30px; 	
	}
	
	.qravatar {
		float: none; 
		margin-bottom: -25px; 
		margin-left: auto;
		margin-right: auto; 		
	}	
	.boxik-date { text-align: center; } 
	
	.boxik-data {				
		margin-left: auto;
		margin-right: auto; 
		text-align: center; 
	}
	
	.respocenter {
		text-align: center; 
	}
}

.qravatar:hover {
	cursor: pointer;
	background-image: url('/img/qr-avatar-over.png');
	width: 100px;
	height: 100px;
	
}

.flr {
	float: right; 
	text-align: right;
}

@media only screen and (max-width: 600px) {
		
	.flr {
		float: none;
		margin-left: auto;
		margin-right: auto; 
		text-align: center; 
	}
	
	.flr .switch {
		float: none;
		margin-left: auto;
		margin-right: auto; 
		text-align: center; 
	}
	
}

table.settings {
	width: 100%;
	border-collapse: collapse;
	
}


table.settings td {
	border-bottom: 8px solid white; 
	background-color: #F0F2F5;
	padding: 10px; 	
	
}

table.settings td .switch {
	
	float: right; 
	vertical-align: center; 
	
}