body{
	background:#eee;
	font-family: 'Encode Sans Semi Expanded', sans-serif;
}


ul {
	list-style-type: none;
}
select:focus{
	outline: none;
}

a:hover, a:visited, a:link, a:active{
	text-decoration:none;
}

input[type='date']{
	text-align:center;
}

.template{
	display:none;
}


/*-------- Changing Bootstrap Classes ----------*/
.container{
	max-width: 800px;
}
.btn{
	border-radius: 0
}
.btn-default{
	color:rgb( 252 ,255 ,0 );
	background:rgb( 21, 52 ,103 );
}
.btn-default:hover{
	color:rgb( 252 ,255 ,0 );
	background:rgb( 13, 30 ,58 );
}

.form-control ,
.btn-default{
	border-radius:0;
}

.form-control:focus,
.btn-default:focus{
	border-color: #6265e4 ;
	box-shadow: 0 0 5px rgb( 21, 52 ,103 ) ;
}

.form-control:disabled, .form-control[readonly]{
	background:#fff !important;
}

.form-control:disabled:focus,
.form-control[readonly]:focus {	
	border-color: #c46666;
	box-shadow: 0 0 5px #c46666;
}
/*-------- End Changing Bootstrap Classes ----------*/


/*-------- Main Website ----------*/
#validationForm,
#tryForFreeForm,
#recoverPasswordForm,
#topBanner{
	text-align:center;
	position:relative;
	margin-top: -30px;
	padding: 10vh 5vw;
}
#validationForm{
	background:url('/images/banner_login.jpg') no-repeat;
	background-position: center top;
	background-size:cover;
	min-height: 80vh;
}
#tryForFreeForm{
	background:url('/images/banner_register.jpg') no-repeat;
	background-position: center top;
	background-size:cover;
	display:none;
	min-height: 80vh;
}
#recoverPasswordForm{
	background:url('/images/banner_password.jpg') no-repeat;
	background-position: center top;
	background-size:cover; 
	display:none;
	min-height: 80vh;
}
#topBanner{
	background:url('/images/banner.jpg') no-repeat;
	background-position: center top;
	background-size:cover;
	text-shadow: 1px 1px #aaa;
	min-height: 30vh;
}
#topBanner h2{
	padding-top: 5vh;
}

.blueBadges{
	border-radius: 15px 30px;
	background:rgba( 21, 52 ,103, 0.8 );
	padding: 30px;
	box-shadow: 4px 4px 5px #888;
}
.blueBadges.central{
	margin-left: 10px;
	margin-right: 10px;
}
.blueBadges i{
	font-size: 60px;
	margin-bottom: 10px
}


#cellFaqs, #cellDemoVideos{
	background: #fff;
	padding-bottom:15px;
	cursor: pointer;
}
#cellDemoVideos{
	border-right: 2px solid #ccc;
	border-bottom: none
}
#cellFaqs i, #cellDemoVideos i {
	padding: 15px;
	color: #aaa;
	font-size: 80px;
}
.termsAndConditionsBlockTitle{
	background-color:rgb( 21, 52 ,103 );
	color:#fff;
	padding: 10px 20px
}
/*-------- End Main Website ----------*/
	
	
/*-------- Header ----------*/

#headerBlock{
	background:#fff;
	border-bottom: 1px solid #aaa;
	position: fixed;
	top:0;
	left: 0;
	width: 100%;
	z-index:5010;
}

#sideMenu{
	background:rgb( 21, 52 ,103 );
	border-bottom: 1px solid #aaa;
	position: fixed;
	width: 250px;
	margin-left: 100%;
	height:1500px;
	top:72px;
	color:rgb( 252 ,255 ,0 );
	padding: 20px 0 20px 1px;
	z-index:5000;
    transition: all 0.5s;
}
#sideMenu.show {
	display: block;
	margin-left: calc(100% - 250px);
}



.sideMenuOption{
	padding: 0px 0 0 0;
	cursor:pointer;
	font-weight: bold;
}

.sideMenuOptionTitle{
	padding: 5px 5px 3px 20px;
	cursor:pointer;
	font-weight: bold;
}

.sideMenuOption .chevronRight{
	float: right;
	margin:8px
}

.sideMenuOption .chevronDown{
	float: right;
	margin:8px;
	display:none;
}

.sideMenuSubOption{
	padding: 2px 5px 2px 30px;
	font-size: 14px;
	cursor:pointer;
	font-weight: normal;
	display:none;
	color:#fff;
}

.sideMenuOption .sideMenuSubOption:last-of-type{
	margin-bottom:10px
}

.sideMenuOption:hover {
	background: #eee;
	color: rgb( 21, 52 ,103 );
}

.sideMenuOption:hover .sideMenuSubOption{
	color: #333;
}

.sideMenuOption:hover .sideMenuOptionTitle{
	background-color: #ccc;
}

.sideMenuSubOption:hover{
	color:#444 !important;
	background:#bbb;
}


#headerLogo{
	height:58px; 
	margin-top: 5px;
	margin-left: 10px
}
#hotworksWording{
	color: #DF6615;
	font-size: 40px;
	font-weight: bold;
	text-shadow: 2px 2px #ddd;
	position: absolute;
	left: 100px;
	top: 7px
}
#menuIcon{
	float:right;
	font-size: 40px;
	margin:16px;
	color:rgb( 21, 52 ,103 );
	cursor: pointer;
}
#renovationIcon{
	float:right;
	font-size: 32px;
	padding:0px 16px;
	margin-top: 20px;
	cursor: pointer;
	color: orange;
	display:none;
}
#spinner{
	font-size:8vh;
	position:fixed;
	right: 50vw;
	top: 10px;
	display: none;
	z-index:5500;
}

#cookieUsageWarning{
	position:fixed;
	bottom: 0;
	background:rgb(252,255,0,0.9);
	width: 100%;
	z-index:3000;
	font-size: 1.2rem;
	padding: 20px 10vw;
	display:none;
}

#userMessageContainer{
	z-index:5031;
	background-color: rgb( 21, 52 ,103, 0.9 );
	width: 100%;
	position:fixed;
	padding: 3vh 2vw;
	height:75px;
	display: none;
	text-align:center;
	border-bottom:1px solid #aaa;
	font-size:1.4rem;
	top:0;
	left: 0;
	color: rgb( 255, 255 ,0 )
}

#topWindowBackLayer{
	background: rgba(0,0,0,0.4) ;
	z-index: 5011; 
	width: 100%;
	display:none;
	position: fixed;
	top: 0;
}

#topWindow{
	position:absolute;
	display:none;
	z-index: 5012; 
	margin-top: 130px;
	padding-top: 30px;
	padding-bottom: 30px;
	top:0px;
	background:#fff
}

#closeX{
	margin-top: 115px;
	position:absolute;
	padding: 18px 20px;
	border-radius:35px;
	cursor:pointer;
	display:none;
	right: -15px;
	z-index: 5013;
	background:#fafafa;
}

#topWindow.col{
	max-width: 800px;
}

/*-------- End Header ----------*/


/*-------- Aplication specific classes ----------*/
.link{
	cursor:pointer;
}
.applicationTitle{
	font-size: 1.2rem;
	font-weight: bold;
	color: rgb( 21, 52 ,103 );
}

.downloadFileButton{
	cursor:pointer;
	font-size:32px;
	background:rgb( 21, 52 ,103 );
}
.slidingDowloadIcon{
	background:#FFF;
	color:rgb( 21, 52 ,103 );
	cursor: pointer;
	font-size: 32px;
	margin-top:3px;
	margin-bottom: 3px
}
.optionsContainer{
	display:none;
	padding: 0;
	border:1px solid #ccc;
	position:absolute;
	width:calc(100% - 30px);
	z-index:1000;
	white-space: nowrap;
	overflow-x: hidden;
	overflow-y: hidden;
	border-color: #6265e4 !important;
	box-shadow: 0 0 5px rgba( 21, 52 ,103 , 1) !important;
}

.optionsContainer>div{
	padding: 2px 5px;
	cursor: pointer;
}
.optionsContainer>div:hover{
	color:#444 !important;
	background:#ccc;
}

.formHeaderButtonContainer *{
	float: right;
}

#menuHiddenIcons{
	position:absolute;
	width: 160px;
	top: 40px;
	z-index:1000;
	background:#fff;
	border: 1px solid #ccc;
	padding: 5px 0;
	display: none;
	margin-left: -123px;
}


.formMenuOption{
	display: block;
	font-size: 14px;
	margin:0;
	padding: 3px 5px;
	text-align: left;
	cursor: pointer;
	width: 100%
}
.formMenuOption:hover{
	background-color: #888;
	color:#fff
}


/*-------- End Header ----------*/




/*-------- Tablelike stuctures ----------*/


.tableCell{
	background: #fff;
	border: 1px solid #eee;
	padding-top:3px;
	padding-bottom:3px;
}

.tableHead .tableCell{
	text-align: center;
	background: rgba( 21, 52 ,103, 0.8 );
	color:#fff;
}

.tableBody:hover{
	color: #B55826;
}

.zebraOn{
	background:#FAFAFA;
}


.tableCellHovered{
	background:rgba( 21, 52 ,103, 0.7 );
	color:rgb( 252 ,255 ,0 );
}

/*-------- End Tablelike stuctures ----------*/


/*-------- FAQS form ----------*/
#faqContainer .row{
	margin-bottom: 2px;
	background: #FFF;
	border: 1px solid #ddd;
}
#faqContainer .btn{
	display: block;
	text-align: left;
	cursor:pointer
}
#faqContainer .col{
	margin-left : 0;
	margin-right : 0;
	padding-left : 0;
	padding-right : 0;
}
#faqContainer .row{
	margin-left : -15px;
	margin-right : -15px;
	padding: 0;
}
#faqContainer .faqList{
	display: none;
}
#faqContainer .faqTitle{
	padding: 6px 15px;
	font-weight: bold;
	cursor:pointer;
}


#faqContainer .answer{
	color:#000;
	padding: 6px 15px 6px 20px;
	text-align:left;
	display: none;
	font-weight: normal;
	background: #e1e1e1;
	text-align: justify;
}
#faqContainer .answer button{
	margin:auto;
}


#faqContainer .fa-chevron-down,
#faqContainer .fa-chevron-up{
	float: right;
	position: relative; 
	top: 5px;
}
#faqContainer .fa-chevron-up{
	display:none;
}

/*-------- End FAQS form ----------*/




/*-------- Service form ----------*/
.serviceLineRow .col-md-8{
	padding-right: 0;
}
.serviceLineRow .col-md-4{
	padding-left: 0px;
}
.serviceLineDescriptionCell{
	border: 1px solid #ced4da;
	border-right: none;
	background:#fff;
	height: 100%;
}
.serviceLineDescriptionCell i{
	margin: 10px 5px 5px 15px;
	color:rgb( 21, 52 ,103 );
	cursor: pointer;
}
.serviceLineDescriptionCell>div{
	padding: 5px 15px;
}
.serviceLineDescriptionCell>div:not(:last-child){
	border-bottom: 1px solid #ced4da;
}
.serviceLineTable {
	width:100%;
	height:100%;
	border: none;
}
.serviceLineTable td{
	background:#fff;
	border: 1px solid #ced4da;
	padding: 5px;
}
.serviceLineTable .tableValue{
	text-align:right;
}
.serviceLineTable tr>td:first-of-type{
	width: 120px;
}
.serviceLineTable td:not(.tableValue){
	background:rgb( 21, 52 ,103 );
	color:#fff;
}
.serviceLineTable.totalBlock td:not(.tableValue){
	color:rgb( 252 ,255 ,0 );
	background:rgb( 13, 30 ,58 );
}
.serviceLineTable.totalBlock .tableValue{
	background:#fcfcfc;
	border: 1px solid #ddd;
}


/*-------- End Service form ----------*/




@media (max-width: 1200px) {
	
	
	
}

@media (max-width: 992px) {
}

@media (max-width: 768px) {
	
	/*-------- Service form ----------*/
	.serviceLineRow{
		padding-bottom: 20px;
	}
	.serviceLineRow .col-md-8{
		padding-right: 15px;
	}
	.serviceLineRow .col-md-4{
		padding-left: 15px;
	}
	.serviceLineDescriptionCell{
		border: 1px solid #ced4da;
	}
	/*-------- End Service form ----------*/
	
	
	
	/*-------- Tablelike stuctures ----------*/
	.tableHead .tableCell{
		display:none;
	}
	.tableCell{
		padding:0;
	}
	/*-------- End Tablelike stuctures ----------*/
	
	/*-------- Main Website ----------*/
	#cellDemoVideos{
		border-right: none;
		border-bottom: 2px solid #ccc
	}
	
	.blueBadges, .blueBadges.central {
		border-radius: 15px;
		padding: 30px;
		margin: 15px;
	}

	
	#cookieUsageWarning{
		height:40vh;
		font-size: 1rem;
		padding: 10px 5vw;
		display:none;
	}
	/*-------- End Main Website ----------*/
}

@media (max-width: 576px) {
	#headerLogo{
		display:none
	}
	#hotworksWording{
		left: 15px;
		font-size:30px;
		top: 15px
	}
	#userMessageContainer{
		font-size: 18px
	}