html,body{
		width:100%;
		height:100%;
		padding:0;
		margin:0;
		overflow-x: hidden;
}

.contentStyle {
     padding: 32px 122px 32px 122px;
}

.breadcrumb-desc {
     display:block;
}

#certRequestHeader {
     height: 40px;
     padding: 7px 11px 7px 11px;  
     background: #186ADE;
     color: #fff;
}

#certRequestInfo {
     padding: 7px 11px 7px 11px;
     background: #F3F3F3;
}

#certRequestPanel {
     height: 117px;
     width: 100%;
     padding: 7px 11px 7px 11px;
     background: #F3F3F3;
     display : flex;
     align-items : center;
}

#certRequestSpace {
     width: 769px;
     height: 16px;
     background: #fff;
}

#certRequestInputInfo {
     font-size: 14px;
}

.font-breadcrumb{
     font-size:1.1rem;
     padding: 0px 0px 32px 0px;
}

.tube-step{
     float: left;
     width: 80% !important;
     margin: auto;
     padding-left:15px;
     margin-bottom:14px;
}

#javaScriptCertName {
     margin-top: 26px;
     margin-bottom:5px;
     max-width: 100%;
}

#javaScriptPassword1 {
     margin-top: 33px;
     margin-bottom:5px;
     max-width: 100%;
}

#javaScriptPassword2 {
     margin-top: 26px;
     margin-bottom:5px;
     max-width: 100%;
}

.progress-label {
     float: left;
     margin-left: 50%;
     font-weight: bold;
     padding: 0px;
}

.ros_sign_progress {
     margin: 0px 4px 15px 9px;
}

div#progressbar {
     height: 27px;
}

.login-message-error {
     color: #ff5655;
}

.ui-widget-header {
     background: #4297D7 !important;
}

.ui-widget-overlay {
     opacity: 0.5;
}

.error-icon {
  width: 34px;
  height: 24px;
}

.infoBox {
     display: none;
     position: absolute;
     background-color: #CFE4E7;
     margin: 0px 0px 0px -3px; 
     padding: 10px 10px 10px 10px;
     z-index: 6;
     width: 260px;
     font-weight: normal;
     line-height: 1.3em;
}

.infoBox-top {
     padding:20px 5px 5px 5px;
}

.infoBox-bottom {
     padding:5px 5px 10px 5px;
}
.infoBox span.tri {
     position: absolute;
     top: -7px;
     left: 5px;
}

.infoBox span.tri img {
     width: 23px;
     height: 12px;
     float: left;
}

.infoBox p {
     float: left;
     width: 95% !important; 
     margin: 0; 
     padding: 0;
}

.infoBox .close {
     display: block;
     position: absolute;
     right: 12px;
     top: 10px;
     width: 18px;
     height: 18px;
     background-image: url(images/fe_close.png);
     background-repeat: no-repeat;
}

.infoBox .close a {
     text-indent: -9999px;
     display: block;
}

@media only screen and (max-width: 998px){	
	html,body{
		width:100%;
		height:100%;
		padding:0;
		margin:0;
		overflow-x: hidden;
	}

	#certRequestPanel {
		width: 100%;
		height: 100%;		
	}

	.step1,.step2,.reset-step1,.reset-step2,.reset-step3{
		display:none;
	}
	
	.margin-top-breadcrumb .reset-step4{
		float:left !important;
	}
	.margin-top-breadcrumb .pull-right{
		float:left !important;
	}
	
}

@media only screen and (min-width: 451px) and (max-width: 768px){	
	
	.contentStyle {
		padding: 32px 75px;
	}
	.col-form-label{
		white-space: normal !important;
	}
	.margin-top-breadcrumb .pull-right{
		float:left !important;
	}
	.margin-top-breadcrumb .reset-step4{
		float:left !important;
		left:10px;
	}
	#certRequestPanel {
		width: 100%;
		height: 100%;			
	}
}

@media only screen and (max-width: 450px){	

	.contentStyle {
		padding: 32px;
	}
	.col-form-label{
		white-space: normal !important;
	}
	
	#certRequestPanel {
		width: 100%;
		height: 100%;		
	}
	.margin-top-breadcrumb .reset-step4{
		float:left !important;
		left:5px;
	}
	
	.margin-top-breadcrumb .pull-right{
		float:left !important;
		left:5px;
	}

}

@media only screen and (max-width: 380px){
	#certRequestHeader {
    height: 50px;
	}
	.contentStyle {
		padding: 32px 45px;
	}
}

@media only screen and (max-width: 300px){
	.contentStyle {
		padding: 20px 20px;
	}
}