.calculator-paroxon {
	font-family: "Roboto", sans-serif;
	font-weight: 800;
	color: #0060a4;
}
.calculator-trigger {
	border-top-left-radius: 10px;
	border-bottom-left-radius: 10px;
	background-color: #2c4c9c;
	width: 57px;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	padding: 27px 0px;
	min-height: 242px;
	cursor: pointer;
	min-width: 40px;
}

.calculator-trigger > span {
	font-family: "Roboto", sans-serif;
	font-weight: 500;
	/*font-size:18px;*/
	-webkit-transform: rotate(-90deg);
	        transform: rotate(-90deg);
	white-space: nowrap;
}

.calculator-paroxon-box {
	display: flex;
	align-items: stretch;
	justify-content: flex-start;
	position: relative;
	z-index: 10;
	border-top-left-radius: 5px;
	border-bottom-left-radius: 10px;
}

.calculator-paroxon-content {
	width: 600px;
	box-sizing: border-box;
	padding: 28px 36px 9px 13px;
	background-color: #dfe6e9;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: flex-start;
}

.calculator-paroxon-trigger {
	border-top-left-radius: 10px;
	border-bottom-left-radius: 10px;
	background-color: #fab02e;
	width: 57px;
	color: #002946;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	padding: 27px 0px;
	min-height: 242px;
	cursor: pointer;
	min-width: 40px;
}

.calculator-paroxon-content {
	border-radius: 5px;
	width: 565px;
	box-sizing: border-box;
	padding: 28px 36px 9px 13px;
	background-color: #d2d2d2;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: flex-start;
}

.calculator-paroxon-form {
	display: flex;
	flex-direction: column;
	width: 100%;
	position: relative;
	align-items: stretch;
	justify-content: flex-start;
}

.calculator-paroxon-form input[type="text"],
select,
input[type="number"] {
	width: 100%;
	border-color: transparent !important;
	height: 29px;
	box-sizing: border-box;
	transition: all 0.15s ease-in-out;
}

.choose {
	border: solid 1px red;
}

.calculator-paroxon-form label {
	font-weight: bolder;
	font-size: 22px;
}

.check {
	height: 40px;
	width: 100%;
	border-radius: 4px;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #df165c;
	color: white;
	cursor: pointer;
	margin-top: 20px;
	margin-bottom: 20px;
}

.check:hover {
	background-color: #df164a;
}

.apotelesmata {
	width: 100%;
	display: flex;
	justify-content: space-between;
	margin-top: 10px;
}

.f-block {
	width: calc(100%/2);
	max-width: 252px;
}

.apotelesmata .f-block {
	width: 21%;
	position: relative;
	max-width: 107px;
	display: flex;
	flex-direction: column;
}

.apotelesmata .f-block:nth-child(1)::before {
	content: "+";
	position: absolute;
	left: 100%;
	top: 50%;
	-webkit-transform: translate(100%, -50%);
	        transform: translate(100%, -50%);
}

.apotelesmata .f-block:nth-child(2)::before {
	content: "=";
	position: absolute;
	left: 100%;
	top: 50%;
	-webkit-transform: translate(100%, -50%);
	        transform: translate(100%, -50%);
}

.f-title {
	background-color: grey;
	color: white;
	display: flex;
	text-align: center;
	justify-content: center;
	align-items: center;
	height: 28px;
	width: 100%;
}

.moni-grammi {
	display: flex;
	justify-content: flex-start;
	width: 100%;
}

.dipli-grammi {
	display: flex;
	justify-content: space-between;
	width: 100%;
}

.blue-paroxon {
	background-color: #2b4e97;
	color: white;
}

.f-content {
	background-color: white;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 30px;
}

.sm-detail {
	color: grey;
	margin-top: 10px;
	font-size: 12px;
	padding-bottom: 10px;
}

.calculator-paroxon-title {
	margin-bottom: 20px;
	font-weight: 400;
	font-size: 20px;
}

@media screen and (max-width: 600px) {
	
	
	.calculator-paroxon-box {
		width: 100%;
		height: 100%;
		box-shadow: 2px 5px 8px rgba(0, 0, 0, 0);
	}

	.calculator-paroxon-box-content {
		width: 100%;
		overflow-y: scroll;
		overflow-x: hidden;
	}
	

	.dipli-grammi {
		display:block;

	}

	.apotelesmata {
		width:100%;
		display:block;
		position:relative;
		clear:both;
	}

	.f-block {
		width: 100%;
		max-width: unset;
		margin-bottom: 20px;
	
	}
	
	.apotelesmata .f-block{
		width:100%;
		display:block;
		max-width:unset;
		text-align:center;
		
	}

	.f-block:nth-child(1)::before {
		display:none;
		
	}

	.f-block:nth-child(2)::before {
		display:none;
	}
	
	.f-content{
		display:block;
		width:100%;
		padding-top:5px;
	}
	
	.check{
		clear:both;
	}
	
	.calculator-trigger > span {
		font-family: "Roboto", sans-serif;
		font-weight: 500;
		/*font-size:18px;*/
		/*transform: rotate(-90deg);*/
		white-space: nowrap;
		clear: both;
	}
}