.roi-form{
padding: 20px 40px;
background-color: aliceblue;
box-shadow: 0 0 8px 0px rgb(10 177 242 / 12%);
border-radius: 10px;
border: 1px solid #dcdcdc;
}
.roi-form label{
width:100%;
font-size: 14px;
line-height: 20px;
}

.roi-form label small{
width:100%;
}

.roi-result{
margin-top:40px;	
}
.roi-form .controls{
margin-top:30px;
}
.roi-form button{
margin:0;
width: 100%;
max-width: 100%;
}
.roi-form input:invalid:not(:focus):not(:placeholder-shown) {
border-color: #e74c3c;
}
.error-text {
color: #e74c3c;
font-size: .85rem;
margin-top: .25rem;
}

.roi-result canvas#roiChart{
max-height: 380px;
width: 100% !important;
}
.payback{    
padding: 20px;
border-radius: 10px;
margin:30px 0;
}
.payback--fail{
background-color:#ffd2d2;
color:#e11d48;
}
.payback--success{
background-color: #e6ffd2;
color:#047857;
}
.hint{
margin:10px 0;
padding:10px;
border-radius:6px;
font-size:14px;
}
.hint.warn{
background:#fff8c5;
border:1px solid #facc15;
color:#92400e;
}
.hint.info{
background:#e0f2fe;
border:1px solid #38bdf8;
color:#075985;
}
.hint.info::after{display:none;}

.roi-form input[name=website]{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}

.roi-result button.pdf{
margin:30px auto;
display:block;
background-color: var(--gray-color);
border-color: var(--dark-gray-color);
color:var(--black-color);
}
.roi-result button.pdf:hover{
color: var(--white-color);
background-color: var(--extra-dark-gray-color);
cursor: pointer;
border-color: var(--contra-color);
}

@media screen and (max-width:768px){
	.roi-form .column1-2	{width:100%;}
}
@media screen and (max-width:480px)
{
	.roi-form{
	padding: 10px 20px;	
	}
	.roi-form input,
	.roi-form button{
	width: 100%;
	max-width: 100%;
	}
}