body { text-align: center}
    h1 { font-size: 50px; }
    body { font: 20px Helvetica, sans-serif; color: #333; }
    article { max-width: 650px ;display: block; text-align: left; margin: 20px;}
    a { color: #ce0580; text-decoration: none; }
    a:hover { text-decoration: underline; }
    .icon { width: 150px; height: 150px; }
    .light { color: #999; }
    .small { font-size: 12px; }

	.calcpanel { display: inline-block; text-align: left}
	.inputparams {display: inline; margin: auto;}
	.resultpanel {display: inline-block; text-align: left; padding-left:10px;}
	/* .calc {display: flex; flex-wrap: nowrap; justify-content: center;} */
	main {text-align: center;} */
	input {width:20%; padding: 3px; border: none; border-bottom: 2px solid #ce0580;}
	select {padding: 3px;border: none; border-bottom: 2px solid #ce0580;}
	
	.aboutbtn {
		background-color: white;
  		color: #ce0580;
		border: none;
	}

	.typebtn {
		background-color: white; 
  		color: #ce0580; 
  		border: 2px solid #ce0580;
		transition-duration: 0.4s;
		cursor: pointer;
	}
	.typebtnselected {
		background-color: #ce0580; 
  		color: white; 
  		border: 2px solid #ce0580;
	}
	.typebtn:hover {
		background-color: #ce0580; 
  		color: white; 
  		border: 2px solid #ce0580;
	}
	.inputpoga {
		background-color: #ce0580; 
  		color: white; 
  		border: 2px solid #ce0580;
		cursor: pointer;
		max-width: 200px;
		height: 30px;
	}
	.periodbtn {
		background-color: white; 
  		color: #ce0580; 
  		border: 2px solid #ce0580;
		transition-duration: 0.4s;
		cursor: pointer;
	}
	.periodbtnselected {
		background-color: #ce0580; 
  		color: white; 
  		border: 2px solid #ce0580;
	}
	.periodbtn:hover {
		background-color: #ce0580; 
  		color: white; 
  		border: 2px solid #ce0580;
	}
	.middlebtn {
		border-left-style: none;
	}
	.middlebtn:hover {
		background-color: #ce0580; 
  		color: white; 
  		border: 2px solid #ce0580;
		border-left-style: none;
	}
	.pogugrupa {
		/*border-left: 2px solid #ce0580;*/
		
	}

	/* for responsiveness */
	@media only screen and (max-width: 400px) {
		.pogugrupa{
			display: flex;
  			flex-direction: column;
		}
		.middlebtn {
			border-top: none;
			border-left: 2px solid #ce0580;
		}
		.middlebtn:hover {
			background-color: #ce0580; 
			color: white; 
			border: 2px solid #ce0580;
			border-top: none;
		}
	}
	
	

	/* The container */
.taxbook {
width: 275px;
  display: block;
  position: relative;
  padding-left: 0px;
  margin-bottom: 5px;
  cursor: pointer;
  font-size: 20px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
.taxbook input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 3px;
  right: 3px;
  height: 20px;
  width: 20px;
  background-color: #eee;
}

/* On mouse-over, add a grey background color */
.taxbook:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.taxbook input:checked ~ .checkmark {
  background-color: #ce0580;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.taxbook input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.taxbook .checkmark:after {
  right: 5px;
  top: 3px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}