.con-sub-form{
margin-bottom:10px;
border:dashed 0px #FF0000;
}

.img-left{
float:left;
height:200px;
margin-top:10px;
border:dashed 0px #FF0000;
}

.img-right{
float: right;
margin-top:10px;
border:dashed 0px #FF0000;
}

.clear{clear:both;}

.sub-form-leftx{
float:left;
width:25%;
margin-top:10px;
border:dashed 0px #FF0000;
}

.sub-form-rigx{
float:left;
width:75%;

}

.sub-form-leftX{
float:left;
width:15%;
margin-top:10px;
margin-left:5%;
border:dashed 0px #FF0000;
overflow:hidden;
}
.sub-form-rigX{
float:left;
width:30%;
border:dashed 0px #FF0000;
text-align:left;
}



.sub-form-left{
float:left;
width:20%;
margin-top:10px;
border:dashed 0px #FF0000;
overflow:hidden;
}



.sub-form-left2{
float:left;
width:20%;
margin-top:10px;


}

.sub-form-left2{
float:left;
width:20%;
margin-top:10px;
}

.sub-form-left2Z{
float:left;
width:20%;
margin-top:10px;
text-align:right;

}


.sub-form-left2X{
float:left;
width:20%;
margin-top:10px;
border:dashed 0px #FF0000;
overflow:hidden;
}

.sub-form-left3{
float:left;
width:13%;
margin-top:10px;
border:dashed 0px #FF0000;

}

.sub-form-rig{
float:left;
width:80%;
border:dashed 0px #FF0000;
text-align:left;
}

.sub-form-rig0{
float:left;
width:30%;
}

.sub-form-rig1{
float:left;
width:40%;
}

.sub-form-rig2{
float:left;
width:60%;
}

.sub-form-rig2X{
float:left;
width:15%;
border:dashed 0px #FF0000;
}

.sub-form-rig2XX{
float:left;
width:65%;
border:dashed 0px #FF0000;
}


.sub-form-rig2XXZ{
float:left;
width:20%;
height:35px;
padding:10px 10px 10px 10px ;
border:dashed 0px #FF0000;
}



.user-back{
top:0;
height:60px;
background:#337ab7;
box-shadow:1px 4px 0px 0px rgba(229,229,229,1.00);
right:0;
z-index:9999;
border:0px dashed #FF0000;
}



.hb-helo-xx{
display:flex;
flex-wrap:wrap;
justify-content:flex-start;
align-content:center;
align-items:center;
margin-top:8px;
border:0px dashed #FF0000;
}


.img-user{
border-radius:100%;
background:#E1E1E1;
padding:2px;
display: block;
margin-left: auto;
margin-right: auto;
cursor:pointer;
}





.info{
width:80%;
margin-top:100px;
margin-left:auto;
margin-right:auto;
padding:30px;
background:#FFFFFF;
text-align:center;
display:none;
font-weight:bold;
font-size:30px;
}
.red{color:rgba(245,52,56,1.00);}
.green{color:#05C734;}

.blue{
color:#0898BC;
font-family:Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
font-size:14px;
}




/*--------------------------------cekbok-----------------------------------*/
.checkbox-a{
	border:1px solid #DCDCDC;
	padding:0 10px 0 10px;
	height:25px;
	background:#337ab7;
	transition:border 200ms ease;
	color:#337ab7;
	font-size:14px;
	
}



.pure-radiobuttonX input[type="checkbox"] {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}
.pure-radiobuttonX input[type="checkbox"]:focus + label:before,
.pure-radiobuttonX input[type="checkbox"]:hover + label:before {
  border-color: #4f8196;
  background-color: #f2f2f2;
}
.pure-radiobuttonX input[type="checkbox"]:active + label:before {
  transition-duration: 0s;
}
.pure-radiobuttonX input[type="checkbox"] + label {
  position: absolute;
  vertical-align: middle;
  user-select: none;
  cursor: pointer;
  font-size:18px;
  height:60px;
  padding:20px;
  font-family:Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
  color:#535353;
}
.pure-radiobuttonX input[type="checkbox"] + label:before {
  box-sizing: content-box;
  content: '';
  color: #4f8196;
  position: absolute;
  left: 0;
  top:0;
  width:100%;
  height:60px;
  border: 1px solid #4f8196;
  text-align: center;
  transition: all 0.4s ease;
}
.pure-radiobuttonX input[type="checkbox"] + label:after {
  box-sizing: content-box;
  content: '';
  background-color: #4f8196;
  position: absolute;
  left: 0;
  top:-1px;
  width:100%;
  height:60px;
  transform: scale(0);
  transform-origin: 50%;
  transition: transform 200ms ease-out;
  color:#ffffff;
}
.pure-radiobuttonX input[type="checkbox"]:disabled + label:before {
  border-color: #cccccc;
}
.pure-radiobuttonX input[type="checkbox"]:disabled:focus + label:before,
.pure-radiobuttonX input[type="checkbox"]:disabled:hover + label:before {
  background-color: inherit;
}
.pure-radiobuttonX input[type="checkbox"]:disabled:checked + label:before {
  background-color: #cccccc;
}

.pure-radiobuttonX input[type="checkbox"]:checked + label:before {
  animation: borderscale 300ms ease-in;
  background-color: white;
}
.pure-radiobuttonX input[type="checkbox"]:checked + label:after {
  transform: scale(1);
}