@import url('https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700');
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

body {
  font-family: "Ubuntu", sans-serif;
  font-size: 14px;
  margin: 0;
  color: #999;
  background: url('../images/ux-1.png') no-repeat center center;
  height: 100vh;
  background-size: contain;
  background-attachment:fixed;
  align-items: center; }

:focus {
  outline: none; }
hr {
  margin-top: 10px;
  margin-bottom: 10px;  
}

legend
{
	margin-top:10px;
	margin-bottom: 5px;	
	font-size:16px;
}

.container.main
{
	background:#fff;
	margin:0px 0;
	padding:0;
  width:100%;
  overflow-x: hidden;
}

textarea {
  resize: none; }

input, textarea, select, button {
  font-size: 14px;
  color: #333; }

select {
  -moz-appearance: none;
  -webkit-appearance: none;
  cursor: pointer; }
  select option[value=""][disabled] {
    display: none; }

p, h1, h2, h3, h4, h5, h6, ul {
  margin: 0; }

ul {
  padding: 0;
  margin: 0;
  list-style: none; }

a {
  text-decoration: none; }

textarea {
  resize: none; }

img {
  vertical-align: middle; }

.main-container{
  background: #4f5057 url('../images/bgcheck.png') no-repeat;
    background-size: contain;
  height:100vh;
  overflow: hidden;
  padding:30px 25px 50px 25px;
  width: 24%;
  position: fixed;
}
.wrapper .row{
  width:100%;
  display: table;
}
.wrapper .col{
  display: table-cell;
}

img.brand{
  width:200px;
  height:auto
}

.social{
  position: absolute;
  bottom:40px;
  width:100%;
}

.social ul{
  width:100%;
  list-style-type: none;
  display: block;

}
.social ul li {
  float: left;
  padding: 0px;
  display: block;
}
.social ul li a{
  width:auto;
  display: block;
  cursor: pointer;
  padding: 5px;
}

@media(max-width: 768px){
  .social{
    position: relative;
    bottom:10px;
    width:100%;
    margin:auto;
    display: none;
  }
}



.main-container h2
{
	font-weight:300;
	line-height:1.2;
	margin:34px 0;	
	font-size:46px;
	color:#fff;
}

@media(max-width:1120px){
  .main-container h2
{
  font-size:36px;
}
}

@media(max-width:950px){
  .main-container h2
{
  font-size:28px;
}
}
.main-container p
{
	font-size:14px;
	line-height:1.6;
	color:#fff;
  font-weight: 300;
  margin-bottom: 24px;
}


@media(max-width:768px){
  .main-container{
    position: relative;
    height:auto;
    overflow-y: auto;
    padding:30px 25px 50px 30px;
    width: 100%;
  }
  .wrapper .row{
    width:100%;
    display: block;
    margin:0px;
    padding: 0px;
  }
  .wrapper .col{
    display: block;
    padding: 0px;
  }

  img.brand{
    width:auto;
    height:50px
  }

.main-container h2
{
	font-weight:300;
	line-height:1.2;
	margin:14px 0;	
	font-size:26px;
	color:#fff;
  
  text-align: center;
}

.main-container p
{
	font-size:14px;
	line-height:1.6;
	color:#fff;
  font-weight: 300;
  margin-bottom: 10px;
  text-align: center;
}


}
.wrapper {
  width: 100%;
  margin: auto;
  padding: 0px; 
min-height:100vh}

.formwizard {
  position: relative;  
  display:none 
}
.form-container
{
	width:96%;
    height: auto;
    padding: 30px 10px 0;
}
.consent-form h5
{
	color:#333;
	font-size:16px;
	line-height:1.6;
	font-weight:500;
	margin:10px auto	
}

h3 {
font-size: 34px;
color: #4f5057;
text-align: left;
font-weight: 400;
letter-spacing: normal;
margin-bottom: 10px; 
border-bottom: px solid #f1f1f1;
}

p.small{
  font-size: 12px;
  line-height: 1.6;
}
.form-container p{
  color: #333;
  margin-bottom: 4px;
  display:inline-block;
  font-weight:300;
  font-size:14px; 
  line-height: 1.3;
}
.form-container p.content{
 
  font-size:16px; 
  line-height: 1.5;
}

.form-row {
  display: flex;
  margin-top:10px;
  margin-bottom:25px; }
.form-row .form-col {
   width: 50%;
   padding:0 10px 0;  }
.form-row .form-col:last-child {
  padding-right: 0; }

.form-col label, label {
  color: #333;
  margin-bottom: 4px;
  display:inline-block;
  font-weight:500;
  font-size:16px; 
  margin-top:5px;}

  label.radio-container{
    font-size:14px;
    line-height: 1.5;
  }
.form-holder {
  position: relative; }
  .form-holder i:not(.zmdi-chevron-down) {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 15px;
    font-size: 17px; }
  .form-holder i.zmdi-chevron-down {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 15px;
    font-size: 17px; }
  .form-holder.password i {
    cursor: pointer; }

.form-control {
  height: 44px;
  border: 1px solid #ccc;
  width: 100%;
  background: none;
  font-size: 16px;
  margin-bottom: 8px;
  padding: 4px 18px;
  color: #797979;
  font-family: 'Ubuntu';
  border-radius: 25px;
  box-shadow: none;
}
.form-control:focus {
  border-color: #fcdc54;
  box-shadow: none }


@media (max-width: 767px) {
  body {
    background: none;
    height: auto;
    display: block; }
  h3 { font-size: 20px; }
  .wrapper { width: auto; padding: 0; }
  .wizard { height: auto; padding: 60px 20px 20px; }
  .form-row { display: block; }
  .form-row .form-col { width: 100%;  margin-right: 0; margin-bottom: 25px; }
}
.form-control
{
	background-color:#fff;	
}
.custom-btn, .grey-btn
{
	padding:5px 10px;
	background-color:#4f5057;
	color:#fff;
	font-size:16px;	
	font-family:'Ubuntu', sans-serif;
}
.grey-btn
{
	background:#999	;
	padding:3px 8px;
	font-size:12px;
}
.custom-btn.next
{
	float:right;	
}
.custom-form table.table
{
	width:100%;
	border:1px solid #e1e1e1;
	padding:0px;
	margin:0px	
}
.custom-form table.table th
{
	font-weight:600;
	font-size:14px;	
	vertical-align:middle;
}

.custom-form table.table td
{
	vertical-align:middle;
}

.fd-block
{
	width:100%;
	padding:8px 12px;
	background-color:#f9f9f9;
	border:1px dashed #eee;
	margin:5px 0;	
}

.fd-block .form-control
{
	padding-left:5px;
	margin-bottom:4px;	
}

.consent-form p
{
	color:#444;
	font-size:14px;
	line-height:1.6;
	margin-bottom:15px;	
}

.consent-form p span, .consent-form  input.cform-text
{
	width:auto;
	border:none;
	display:inline-block;
	border-bottom:1px dashed #999; padding:2px 30px;
	margin:0px 10px;
	color:#000;	
}

#image_preview_signature, #image_preview_photo,  #image_preview_chq
{
	margin:5px auto	
}

#image_preview_signature > img, #image_preview_photo > img,  #image_preview_chq img
{
	display:inline-block;
	width:auto;	
	height:auto;
	max-height:100px;
	position:relative
}

.consent-form ul li 
{
	padding-left:15px;
}


.mr-1
{
	margin-right:10px	
}

.custom-btn.skip
{
	background-color:#999;	
}

.place-txt
{
	padding:2px 5px;
	border:none;
	box-shadow:none;
	border-bottom:1px dashed #999;
	width:150px;	
}

#uploadopt label.box-label
{
 	display:block;
	width:100%		
}

.soption
{
	width:100%;
	padding:10px 10px;
	border:1px solid #aaa;
	display:block;
	position:relative	
}


.optblock label
{
	margin-top:8px	
}


h5{
  font-size:20px;
  color:#4f5057;
}

.radioBlock{
  width:10%;
  padding: 1%;
  float: left;
  text-align: center;
  height: 58px;
}



.radioBlock-2x{
  width:100%;
  padding: 0 1%;
  float: left;
  text-align: center;
  height: 58px;
}

.radio-container, .morefeedback_radio {
  display: block;
  position: relative;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  text-align: center;
}
.morefeedback_radio{
  padding-left:30px;
}

/* Hide the browser's default radio button */
.radio-container input, .morefeedback_radio input {
  position: relative;
  top:0px;
  opacity: 0;
  cursor: pointer;
}

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

.radioBlock-2x .checkmark {
  position: absolute;
  top: 10px;
  left: -7px;
  height: 25px;
  width: 25px;
  background-color: #eee;
  border-radius: 50%;
}

.morefeedback_radio .checkmark{
  position: absolute;
  top: 0px;
  left: 0px;
  height: 25px;
  width: 25px;
  background-color: #eee;
  border-radius: 50%;
}

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

/* When the radio button is checked, add a blue background */
.radio-container input:checked ~ .checkmark , .morefeedback_radio 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 */
.radio-container input:checked ~ .checkmark:after ,.morefeedback_radio input:checked ~ .checkmark:after {
  display: block;
}

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

.radiotext > p {
  margin-top:22px;
}

table.form-grid{
  table-layout: fixed;
}

table.form-grid td, table.form-grid th{
text-align: center;
vertical-align: middle;
}

table.form-grid td p{
  text-align: left;
  width: 100%;
  font-weight: 500;
}

table.form-grid th p{
  
  width: 100%;
  padding: 2px 8px;
  font-weight: 500;
}