/* your CSS goes here*/


#regForm {  margin: 0px auto;}

/*input {  width: 100%; background-color:transparent; border-radius:0; border-bottom:1px solid #000; border-top:none; border-left:none; border-right:none; font-size:16px; margin-top:15px}*/
input.invalid,
select.invalid { background-color: rgba(255,79,205,0.4)!important;}

.tab {display: none}

.btn-wizard { background-color: rgba(0,193,207,1); color:rgba(255,255,255,1); padding:10px 40px; border-radius:0.8rem; text-decoration:none; box-shadow: 0 2px 3px rgba(0,0,0,0.2); font-weight:bold; cursor: pointer; border:none; font-size:16px; line-height:1}
.btn-wizard:hover {text-decoration:none; color:rgba(255,255,255,1); background-color: rgba(0,193,207,0.8);}

#prevBtn {border:2px solid rgba(0,193,207,1); color: rgba(0,193,207,1); background-color:rgba(255,255,255,0); padding:8px 38px; border-radius:0.8rem; text-decoration:none; box-shadow: 0 2px 3px rgba(0,0,0,0.2); font-weight:bold}
#prevBtn:hover{text-decoration:none; color: rgba(0,193,207,0.8); border:2px solid rgba(0,193,207,0.8);}


.content{ padding:80px 160px 0 60px; height:85%;}
.content h3{ color:rgba(255,255,255,1)!important; font-size: 28px;}
.content p{ color:rgba(255,255,255,1); font-weight:bold; font-size:16px; margin-top:30px}

.step { height: 8px; width: 8px; margin: 0 2px; background-color: rgba(0,193,207,1); border: none; border-radius: 50%; display: inline-block; opacity: 0.7}
.step.active { opacity: 1}
.step.finish { background-color: rgba(255,79,205,1)}
.all-steps { text-align: center; height:15%}

.thanks-message { display: none}
.container2 { display: block; position: relative; padding-left: 35px; margin-bottom: 12px; cursor: pointer; font-size: 22px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}

/* Hide the browser's default radio button */
.container input[type="radio"] { position: absolute; opacity: 0; cursor: pointer;}

/* Create a custom radio button */
.checkmark { position: absolute; top: 0; left: 0; height: 25px; width: 25px; background-color: #eee; border-radius: 50%;}

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

/* When the radio button is checked, add a blue background */
.container input:checked~.checkmark { background-color: #2196F3;}

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

/* Show the indicator (dot/circle) when checked */
.container input:checked~.checkmark:after { display: block;}

/* Style the indicator (dot/circle) */
.container .checkmark:after { top: 9px; left: 9px; width: 4px; height: 4px; border-radius: 50%; background: white;}