/*
	Developed by
	
	Alexis Larrodé Álvaro
	
	alexis@cease.es
*/
body{
	opacity:0;
	transition:opacity .2s ease-in-out;
	font-family:"Roboto",sans-serif;
	background-color:#f7f7f7;
}
.noscroll{
	overflow:hidden !important;
}
button, a, div{
	-webkit-tap-highlight-color: transparent;
}
input:focus,
select:focus,
textarea:focus,
button:focus {
    outline-color:#a7101c;
}
#totalCont{
	display:block;
	position:relative;
	width:100%;
	max-width:1200px;
	margin:0 auto;
}
	#mainLogo{
		display:block;
		width:350px;
		height:auto;
		margin:50px auto 30px auto;
	}
	#mainLogo.small{
		width:80px;
		margin:10px auto 20px auto;
	}
	#mainBody{
		position:relative;
		width:100%;
		height:auto;
	}
		#mainBody .welcomeMessage{
			font-family:'Nunito';
			text-align:center;
			font-weight:600;
			font-size:18px;
			color:#495057;
			margin:20px auto 30px auto;
			max-width:350px;
		}
		#loginFormCont{
			position:relative;
			margin:20px auto 20px auto;
			width:100%;
			height:auto;
			max-width:350px;
			border-radius:10px;
			padding:20px;
			box-sizing:border-box;
			text-align:center;
			font-family:"Roboto", sans-serif;
			font-size:20px;
			color:#a7101c;
			background-color:#ffffff;
			box-shadow:0 3px 3px rgba(56,65,74,0.1);
		}
			#loginFormCont h4{
				margin-top:0;
				font-family:"Nunito", sans-serif;
			}
			#loginFormCont input, #loginFormCont select{
				width:100%;
				height:40px;
				border:solid #a7101c 1px;
				border-radius:5px;
				display:block;
				margin-bottom:20px;
				font-size:16px;
				box-sizing:border-box;
				padding:5px;
				font-family:"Roboto", sans-serif;
				color:#a7101c;
			}
			#loginFormCont select{
				cursor:pointer;
			}
			#loginFormCont a{
				color:#a7101c;
				font-size:14px;
				margin-bottom:20px;
				display:block;
				text-decoration:none;
			}
			#loginFormCont button{
				width:150px;
				height:40px;
				margin:0 auto;
				background-color:#a7101c;
				border:solid #a7101c 1px;
				color:#ffffff;
				box-sizing:border-box;
				border-radius:5px;
				padding:5px;
				display:block;
				cursor:pointer;
				font-size:16px;
				font-weight:400;
				transition:background-color .2s ease-in-out, color .2s ease-in-out;
				font-family:"Roboto", sans-serif;
			}
			#loginFormCont button:hover{
				background-color:#ffffff;
				color:#a7101c;
			}
			.errorMessageCont{
				position:relative;
				width:100%;
				height:0;
				overflow:hidden;
				transition:height .2s ease-in-out;
			}
				.errorMessageCont > div{
					height:auto;
					font-family:Roboto,sans-serif;
					font-size:16px;
					color:#a7101c;
					border:solid #a7101c 1px;
					box-sizing:border-box;
					padding:5px;
					margin-bottom:20px;
					white-space: break-spaces;
					border-radius:4px;
				}
				.noMarginError .errorMessageCont > div{
					margin-top:13px;
					margin-bottom:0;
				}
				
#backofficeBody{
	position:absolute;
	display:flex;
	left:0;
	top:0;
	width:100%;
	height:auto;
	flex-direction:row;
}
	#backofficeSidebar{
		position:relative;
		width:260px;
		min-height:100vh;
		flex-grow:0;
		flex-shrink:0;
		background-color:#ffffff;
		box-sizing:border-box;
		border-right:solid #e0e0e0 1px;
		transition:all .2s ease-in-out;
	}
		#backofficeSidebarWrapper{
			width:260px;
			height:auto;
			padding:20px 10px;
			box-sizing:border-box;
			transition:all .2s ease-in-out;
		}
			#backofficeLogoCont{
				display:block;
				position:absolute;
				width:calc(100% - 20px);
				padding:0 30px 20px 30px;
				box-sizing:border-box;
				transition:all .2s ease-in-out;
			}
			#backofficeLogoDummy{
				display:block;
				padding:0 30px 20px 30px;
				box-sizing:border-box;
				visibility:hidden;
				transition:all .2s ease-in-out;
			}
				#backofficeLogoCont img, #backofficeLogoDummy img{
					width:100%;
					height:auto;
					transition:all .2s ease-in-out;
				}
			#backofficeMenuCont{
				position:relative;
				width:100%;
			}
				#backofficeMenuCont > ul{
					list-style:none;
					padding:0;
				}
					#backofficeMenuCont > ul > li{
						padding-bottom:10px;
					}
					#backofficeMenuCont > ul > li:last-child{
						padding-bottom:0;
					}
						#backofficeMenuCont > ul > li > a{
							display:block;
							padding:15px 20px;
							box-sizing:border-box;
							display:flex;
							gap:10px;
						}

						.generalButtonMenu{
							display:inline-flex;
							background-color:transparent;
							border-radius:4px;
							padding:10px 16px;
							color:#a7101c;
							font-size:16px;
							text-decoration:none;
							transition:background-color .2s ease-in-out, color .2s ease-in-out;
							cursor:pointer;
							text-decoration:none !important;
						}
						.generalButtonMenu:hover{
							background-color:#a7101c;
							color:#ffffff !important;
						}
						.generalButtonMenu:hover span{
							background-color:#ffffff;
						}
						.generalButtonMenu.active{
							background-color:#a7101c;
							color:#ffffff !important;
						}
						.generalButtonMenu.active span{
							background-color:#ffffff;
						}
							.generalIconMenu{
								display:block;
								background-color:#a7101c;
								width:20px;
								height:20px;
								flex-grow:0;
								flex-shrink:0;
								transition:background-color .2s ease-in-out;
							}
							.generalIconMenu.iconHome{
								-webkit-mask:url(../resources/web/iconHome.svg);
								mask:url(../resources/web/iconHome.svg);
							}
							.generalIconMenu.iconUser{
								-webkit-mask:url(../resources/web/iconUser.svg);
								mask:url(../resources/web/iconUser.svg);
							}
							.generalIconMenu.iconCompany{
								-webkit-mask:url(../resources/web/iconCompany.svg);
								mask:url(../resources/web/iconCompany.svg);
							}
							.generalIconMenu.iconProject{
								-webkit-mask:url(../resources/web/iconProject.svg);
								mask:url(../resources/web/iconProject.svg);
							}
							.generalIconMenu.iconPerformance{
								-webkit-mask:url(../resources/web/iconPerformance.svg);
								mask:url(../resources/web/iconPerformance.svg);
							}
							.generalIconMenu.iconDocument{
								-webkit-mask:url(../resources/web/iconDocument.svg);
								mask:url(../resources/web/iconDocument.svg);
							}
							.generalIconMenu.iconLeftArrow{
								-webkit-mask:url(../resources/web/iconLeftArrow.svg);
								mask:url(../resources/web/iconLeftArrow.svg);
							}
							.generalIconMenu.iconRightArrow{
								-webkit-mask:url(../resources/web/iconRightArrow.svg);
								mask:url(../resources/web/iconRightArrow.svg);
							}
							.generalIconMenu.iconLogout{
								-webkit-mask:url(../resources/web/iconLogout.svg);
								mask:url(../resources/web/iconLogout.svg);
							}
							.generalIconMenu.iconFixedDocument{
								-webkit-mask:url(../resources/web/iconDocFixed.svg);
								mask:url(../resources/web/iconDocFixed.svg);
							}
							.generalIconMenu.iconAdditionalDocument{
								-webkit-mask:url(../resources/web/iconAdditionalDocument.svg);
								mask:url(../resources/web/iconAdditionalDocument.svg);
							}
							.generalIconMenu.iconDocChecked{
								-webkit-mask:url(../resources/web/iconDocChecked.svg);
								mask:url(../resources/web/iconDocChecked.svg);
							}
						#logoutButtonMenu{
							display:none !important;
						}
	#backofficeSidebar.closed{
		width:50px;
	}
		#backofficeSidebar.closed #backofficeSidebarWrapper{
			width:50px;
		}
			#backofficeSidebar.closed #backofficeSidebarWrapper #backofficeLogoCont{
				width:30px;
				height:40px;
				padding:0;
			}
			#backofficeSidebar.closed #backofficeSidebarWrapper #backofficeLogoDummy{
				width:30px;
				height:40px;
				padding:0;
			}
				#backofficeSidebar.closed #backofficeSidebarWrapper #backofficeLogoCont img{
					height:100%;
					object-fit:cover;
					object-position:left;
				}
				#backofficeSidebar.closed #backofficeSidebarWrapper #backofficeLogoDummy img{
					height:100%;
					object-fit:cover;
					object-position:left;
				}
				#backofficeSidebar.closed #backofficeSidebarWrapper #backofficeMenuCont .generalButtonMenu{
					padding:10px 5px;
					margin:9px 0;
					font-size:0;
				}
	#backofficeCont{
		position:relative;
		width:100%;
		background-color:#f7f7f7;
	}
		#backofficeContHeader{
			top:0;
			display:flex;
			width:100%;
			position:sticky;
			padding:20px;
			box-sizing:border-box;
			background-color:#f7f7f7;
			transition:box-shadow .2s ease-in-out;
			z-index:1;
		}
		#backofficeContHeader.scrolled{
			box-shadow:0 3px 3px rgba(56,65,74,0.1);
		}
			#pannelTitle{
				width:100%;
			}
				#pannelTitle h1{
					padding:0;
					margin:0;
					font-size:20px;
					font-weight:600;
					color:#a7101c;
				}
				#pannelTitle h2{
					padding:0;
					margin:0;
					font-size:16px;
					font-weight:500;
					color:#858585;
				}
			#buttonsCont{
				width:160px;
				flex-grow:0;
				flex-shrink:0;
				display:flex;
				gap:10px;
				justify-content:right;
				align-items:flex-start;
			}
		#backofficeContWrapper{
			padding:0 10px 20px 10px;
			box-sizing:border-box;
		}
			.boRow{
				display:flex;
				width:100%;
				flex-direction:row;
				padding-bottom:20px;
			}
			.boRow:last-child{
				padding-bottom:0;
			}
				.boColumnCont{
					padding-left:10px;
					padding-right:10px;
					box-sizing:border-box;
				}
				.boColumnCont.sizeOne{
					width:calc(100% / 6);
				}
				.boColumnCont.sizeTwo{
					width:calc(100% / 3);
				}
				.boColumnCont.sizeThree{
					width:calc(100% / 2);
				}
				.boColumnCont.sizeFour{
					width:calc(100% / 6 * 4);
				}
				.boColumnCont.sizeFive{
					width:calc(100% / 6 * 5);
				}
				.boColumnCont.sizeSix{
					width:100%;
				}
					.boColumn{
						border:solid #e0e0e0 1px;
						border-radius:4px;
						background-color:#ffffff;
						box-sizing:border-box;
					}
						.boColumn > .boColumnTitle{
							padding:10px;
							border-bottom:solid #e0e0e0 1px;
							font-weight:500;
							color:#a7101c;
							display:flex;
							justify-content:space-between;
						}
							.boColumn > .boColumnTitle > .generalButtonCreate{
								display:inline-flex;
								background-color:#a7101c;
								border-radius:4px;
								padding:2px 6px;
								border:solid #a7101c 1px;
								justify-content:center;
								align-items:center;
								text-decoration:none;
								transition:color .2s ease-in-out, background-color .2s ease-in-out;
								cursor:pointer;
								color:#ffffff;
								flex-shrink:0;
								flex-grow:0;
							}
							.boColumn > .boColumnTitle > .generalButtonCreate:hover{
								background-color:#ffffff;
								color:#a7101c !important;
							}
							.boColumn > .boColumnTitle > .generalButtonCreate:hover span{
								background-color:#a7101c;
							}
								.boColumn > .boColumnTitle > .generalButtonCreate > .generalIconCreate{
									display:block;
									background-color:#ffffff;
									width:12px;
									height:12px;
									transition:background-color .2s ease-in-out;
									margin:0;
									margin-left:5px;
								}
								.boColumn > .boColumnTitle > .generalButtonCreate > .generalIconCreate.iconPlus{
									-webkit-mask:url(../resources/web/iconPlus.svg);
									mask:url(../resources/web/iconPlus.svg);
								}
							.boColumn > .boColumnTitle > .pannelFiltersCont{
								position:relative;
								display:block;
								width:100%;
								max-width:150px;
								height:100%;
							}
								.boColumn > .boColumnTitle > .pannelFiltersCont > .pannelFilter{
									display:flex;
									border:solid #a7101c 1px;
									border-radius:4px;
									overflow:hidden;
									align-items:center;
								}
									.boColumn > .boColumnTitle > .pannelFiltersCont > .pannelFilter > input{
										width:100%;
										border:none;
										outline:none;
										box-sizing:border-box;
										-webkit-tap-highlight-color:transparent;
									}
									.boColumn > .boColumnTitle > .pannelFiltersCont > .pannelFilter > button{
										width:21px;
										height:21px;
										background-color:#a7101c;
										border:none;
										border-left:solid #a7101c 1px;
										box-sizing:border-box;
										-webkit-tap-highlight-color:transparent;
										flex-grow:0;
										flex-shrink:0;
										cursor:pointer;
										transition:color .2s ease-in-out, background-color .2s ease-in-out;
										display:flex;
										justify-content:center;
										align-items:center;
									}
										.boColumn > .boColumnTitle > .pannelFiltersCont > .pannelFilter > button > .generalIcon{
											display:block;
											background-color:#ffffff;
											width:12px;
											height:12px;
											transition:background-color .2s ease-in-out;
											margin:0;
											flex-shrink:0;
											flex-grow:0;
											
										}
										.boColumn > .boColumnTitle > .pannelFiltersCont > .pannelFilter > button > .generalIcon.iconSearch{
											-webkit-mask:url(../resources/web/iconSearch.svg);
											mask:url(../resources/web/iconSearch.svg);
										}
									.boColumn > .boColumnTitle > .pannelFiltersCont > .pannelFilter > button:hover{
										background-color:#ffffff;
										color:#a7101c !important;
									}
										.boColumn > .boColumnTitle > .pannelFiltersCont > .pannelFilter > button:hover span{
											background-color:#a7101c;
										}
						.boColumn > .boColumnBody{
							padding:10px;
						}
							#proyectInfoCont{
								text-align:center;
							}
								#proyectInfoCont > h3{
									font-size:16px;
									color:#a7101c;
									border-bottom:solid #a7101c 1px;
									padding-bottom:5px;
									margin-bottom:10px;
									font-weight:500;
								}
								#proyectInfoCont > span{
									color:#222222;
									font-weight:600;
								}
							#homeGraphicsCont{
								display:flex;
								gap:20px;
								width:100%;
								min-height:520px;
								justify-content:center;
							}
								.graphicsColumn{
									position:relative;
									width:calc(100% / 4);
									align-items:stretch;
								}
									.graphicsBarsCont{
										display:flex;
										align-items:flex-end;
										width:100%;
										height:calc(70% - 20px);
										box-sizing:border-box;
										border-bottom:solid #e0e0e0 1px;
									}
										.graphicBar{
											position:relative;
											left:0;
											top:0;
											width:100%;
											background-color:red;
											border-radius:4px 4px 0 0;
										}
									.graphicsDataCont{
										width:100%;
										height:30%;
										margin-top:20px;
										box-sizing:border-box;
										text-align:center;
									}
										.graphicsDataTitle{
											font-size:16px;
											color:#a7101c;
											padding-bottom:5px;
											margin-bottom:10px;
											font-weight:500;
										}
										.graphicsDataInfo{
											display:flex;
											flex-direction:row;
										}
											.dataInfoColumn{
												position:relative;
												width:50%;
											}
											.dataInfoColumn:first-child:after{
												content:"";
												position:absolute;
												left:calc(100% - 1px);
												top:0;
												height:100%;
												width:2px;
												background-color:#a7101c;
											}
												.dataInfoColumn > h3{
													font-size:16px;
													font-weight:500;
													margin:0;
													padding:10px;
													color:#222222;
												}
												.dataInfoColumn > span{
													font-size:16px;
													font-weight:400;
													padding:10px;
												}
						.boColumn table{
							position:relative;
							border-collapse:collapse;
							width:100%;
						}
							.boColumn table tr{
								position:relative;
								border-bottom:solid #eaeaea 1px;
							}
							.boColumn table tr:first-child{
								border-bottom:none;
							}
							.boColumn table tr:last-child{
								border-bottom:none;
							}
								.boColumn table tr th{
									position:relative;
									padding:0 5px;
									font-size:14px;
									font-weight:500;
									text-align:left;
									color:#858585;
								}
								.boColumn table tr th.checkCell{
									text-align:center;
								}
								.boColumn table tr th.centerCell{
									text-align:center;
								}
								.boColumn table tr th:first-child{
									padding-left:0;
								}
								.boColumn table tr th:last-child{
									text-align:right;
									padding-right:0;
								}
								.boColumn table tr td{
									position:relative;
									padding:15px 5px;
									font-size:14px;
									font-weight:400;
									text-align:left;
									color:#222222;
									
								}
								.boColumn table tr td.checkCell{
									text-align:center;
								}
								.boColumn table tr td a{
									color:#222222;
								}
								.boColumn table tr td a:hover{
									color:#aaaaaa;
								}
								.boColumn table tr td.centerCell{
									text-align:center;
								}
								.boColumn table tr:last-child td{
									padding-bottom:5px;
									border-bottom:none;
								}
								.boColumn table tr td:first-child{
									padding-left:0;
								}
								.boColumn table tr td:last-child{
									text-align:right;
									padding-right:0;
								}
								.actionsCell{
									display:flex;
									flex-direction:row;
									justify-content:right;
									gap:6px;
								}
									.boColumn table tr td span{
										position:relative;
										font-size:14px;
										font-weight:400;
										text-align:right;
										cursor:pointer;
										color:#858585;
									}
									.boColumn table tr td input[type=checkbox]{
										accent-color:#a7101c;
										cursor:pointer;
									}
									.actionsCell .generalButtonTable{
										display:inline-flex;
										background-color:#ffffff;
										border-radius:4px;
										padding:2px;
										border:solid #a7101c 1px;
										justify-content:center;
										align-items:center;
										text-decoration:none;
										transition:background-color .2s ease-in-out;
										cursor:pointer;
									}
									.actionsCell .generalButtonTable:hover{
										background-color:#a7101c;
										color:#ffffff !important;
									}
									.actionsCell .generalButtonTable:hover span{
										background-color:#ffffff;
									}
										.generalIconTable{
											display:block;
											background-color:#a7101c;
											width:12px;
											height:12px;
											transition:background-color .2s ease-in-out;
											margin:0;
										}
										.generalIconTable.iconEdit{
											-webkit-mask:url(../resources/web/iconEdit.svg);
											mask:url(../resources/web/iconEdit.svg);
										}
										.generalIconTable.iconRemove{
											-webkit-mask:url(../resources/web/iconRemove.svg);
											mask:url(../resources/web/iconRemove.svg);
										}
										.generalIconTable.iconDocument{
											-webkit-mask:url(../resources/web/iconDocument.svg);
											mask:url(../resources/web/iconDocument.svg);
										}
										.generalIconTable.iconEye{
											-webkit-mask:url(../resources/web/iconEye.svg);
											mask:url(../resources/web/iconEye.svg);
										}
										.generalIconTable.iconDownload{
											-webkit-mask:url(../resources/web/iconDownload.svg);
											mask:url(../resources/web/iconDownload.svg);
										}
										.generalIconTable.iconUpdate{
											-webkit-mask:url(../resources/web/iconUpdate.svg);
											mask:url(../resources/web/iconUpdate.svg);
										}
										.generalIconTable.iconSendDocs{
											-webkit-mask:url(../resources/web/iconSendDocs.svg);
											mask:url(../resources/web/iconSendDocs.svg);
										}
						.tableControlsCont{
							position:relative;
							width:100%;
							padding-top:12px;
							display:flex;
							flex-direction:row;
							gap:20px;
							justify-content:right;
						}
							.tableControlsCont .changePage{
								border-radius:4px;
								border:solid #a7101c 1px;
								width:200px;
								height:30px;
								color:#a7101c;
								box-sizing:border-box;
								padding:5px;
								cursor:pointer;
							}
								.tableControlsCont .generalButtonClean{
									display:flex;
									position:relative;
									left:0;
									bottom:0;
									background-color:#a7101c;
									border-radius:4px;
									padding:2px 6px;
									border:solid #a7101c 1px;
									justify-content:center;
									align-items:center;
									text-decoration:none;
									transition:color .2s ease-in-out, background-color .2s ease-in-out;
									cursor:pointer;
									color:#ffffff;
									flex-shrink:0;
									flex-grow:0;
									min-height:30px;
								}
								.tableControlsCont > .generalButtonClean:hover{
									background-color:#ffffff;
									color:#a7101c !important;
								}
								.tableControlsCont > .generalButtonClean:hover span{
									background-color:#a7101c;
								}
									.tableControlsCont > .generalButtonClean > .generalIconClean{
										display:block;
										background-color:#ffffff;
										width:12px;
										height:12px;
										transition:background-color .2s ease-in-out;
										margin:0;
										margin-left:5px;
									}
									.tableControlsCont > .generalButtonClean > .generalIconClean.iconSearch{
										-webkit-mask:url(../resources/web/iconSearch.svg);
										mask:url(../resources/web/iconSearch.svg);
									}
			.generalButton{
				display:inline-flex;
				background-color:#a7101c;
				border-radius:4px;
				padding:10px 16px;
				color:#ffffff !important;
				border:solid #a7101c 1px;
				justify-content:center;
				align-items:center;
				font-size:16px;
				text-decoration:none;
				transition:background-color .2s ease-in-out, color .2s ease-in-out;
				cursor:pointer;
				text-decoration:none !important;
			}
			.generalButton:hover{
				background-color:#ffffff;
				color:#a7101c !important;
			}
			.generalButton:hover span{
				background-color:#a7101c;
			}
				.generalIcon{
					display:block;
					margin:0 auto 20px auto;
					background-color:#ffffff;
					width:60px;
					height:60px;
					transition:background-color .2s ease-in-out;
				}
				.generalIcon.iconLogout{
					-webkit-mask:url(../resources/web/iconLogout.svg);
					mask:url(../resources/web/iconLogout.svg);
					background-color:#ffffff;
					display:inline-block;
					width:14px;
					height:14px;
					margin:0 0 0 6px;
				}
				
/*Floating forms styles*/
.formsBG{
	position:fixed;
	left:0px;
	top:0px;
	width:100%;
	height:100%;
	background-color:rgba(255,255,255,0.9);
	overflow:auto;
	display:none;
	opacity:0;
	transition:opacity .2s ease-in-out;
	justify-content:center;
	align-items:center;
	padding-top:50px;
	padding-bottom:50px;
	box-sizing:border-box;
	z-index:2;
}
	.formCont{
		position:relative;
		margin:auto;
		width:100%;
		max-width:422px;
		height:auto;
		padding:0;
		background-color:#fff;
		border:solid rgba(0, 0, 0, 0.1) 1px;
		box-shadow:0 3px 3px rgba(56,65,74,0.1);
		border-radius:0.2rem;
		text-align:center;
		font-family:'Roboto',sans-serif;
		font-size:16px;
		font-weight:normal;
		color:#222222;
		box-sizing:border-box;
	}
		.formClass{
			display:none;
		}
			.formClass .formTitle{
				display:flex;
				height:auto;
				padding:9px 15px;
				border-bottom:solid rgba(0, 0, 0, 0.1) 1px;
			}
				.formClass .formTitle img{
					width:20px;
					height:20px;
					margin-right:0.5rem;
					flex-grow:0;
					flex-shrink:0;
				}
				.formClass .formTitle span{
					display:flex;
					width:100%;
					text-align:left;
					font-size:14px;
					font-weight:500;
					color:#878a99;
					align-items: center;
				}
				.formClass .formTitle .closeButton{
					height:20px;
					width:20px;
					-webkit-mask: url(../resources/web/iconClose.svg);
					mask: url(../resources/web/iconClose.svg);
					-webkit-mask-size:75% 75%;
					mask-size:75% 75%;
					-webkit-mask-position:center center;
					mask-size-position:center center;
					-webkit-mask-repeat:no-repeat;
					mask-size-repeat:no-repeat;
					background-color:#7e7e7e;
					appearance: none;
					border:none;
					flex-grow:0;
					flex-shrink:0;
					cursor:pointer;
					transition:background-color .2s ease-in-out;
				}
				.formClass .formTitle .closeButton:hover{
					background-color:#3f3f3f;
				}
			.formClass .formBody{
				padding:15px;
			}
				.formClass .formBody p{
					margin:0;
				}
				.bodyInputsCont{
					padding:0;
					box-sizing:border-box;
					display:flex;
					flex-wrap:wrap;
					justify-content:space-between;
					align-items:flex-start;
				}
					.bodyInputsCont > p{
						width:100%;
					}
					.bodyInputsCont .inputCont{
						position:relative;
						margin-top:13px;
					}
					.bodyInputsCont .oneColumnInput{
						width:calc(100%);
					}
					.bodyInputsCont .twoColumnInput{
						width:calc(100% / 2 - 6px);
					}
					.bodyInputsCont .threeColumnInput{
						width:calc(100% / 3 - 10px);
					}
					.bodyInputsCont .fourColumnInput{
						width:calc(100% / 4 - 10px);
					}
						.bodyInputsCont .inputCont label{
							position:absolute;
							font-size:14px;
							margin-left:11px;
							margin-top:10px;
							color:#36835f;
						}
						.bodyInputsCont .inputCont input, .bodyInputsCont .inputCont select, .bodyInputsCont .inputCont textarea{
							width:100%;
							font-family:'Roboto',sans-serif;
							font-size:16px;
							color:#222222;
							padding:30px 10px 10px 10px;
							box-sizing:border-box;
							border:solid #dddddd 1px;
							border-radius:5px;
							box-sizing:border-box;
							background-color:#ffffff;
						}
						.bodyInputsCont .inputCont button{
							width:100%;
							font-size:16px;
							color:#a7101c;
							padding:10px 10px 10px 10px;
							box-sizing:border-box;
							border-radius:5px;
							box-sizing:border-box;
							background-color:#ffe6d3;
							height:61px;
							border:none;
							cursor:pointer;
							transition:background-color .2s ease-in-out, color .2s ease-in-out;
						}
						.bodyInputsCont .inputCont button:hover{
							color:#ffffff;
							background-color:#a7101c;
						}
						.bodyInputsCont .inputCont select{
							padding:30px 10px 8px 5px;
							cursor:pointer;
						}
						.bodyInputsCont .inputCont input:read-only{
							outline:none;
							cursor:not-allowed;
							color:#36835f;
						}
						.bodyInputsCont .inputCont input[type=file]{
							cursor:pointer;
							
						}
						.bodyInputsCont .inputCont input[type=file]::before{
							content:"Seleccionar archivo";
							background-color:#a7101c;
							color:#ffffff;
							display:flex;
							justify-content:center;
							align-items:center;
							border-radius:4px;
							position:absolute;
							left:10px;
							top:31px;
							width:157px;
							height:24px;
						}
						.bodyInputsCont .inputCont textarea{
							resize:none;
							height:120px;
						}
						.bodyInputsCont .inputCont .titleInput{
							display:block;
							padding-bottom:5px;
							text-align:left;
							border-bottom:solid #a7101c 1px;
							color:#a7101c;
							margin-bottom:10px;
						}
						.bodyInputsCont .inputCont .listCont{
							margin:0;
							list-style:none;
							padding:0;
						}
							.bodyInputsCont .inputCont .listCont li{
								position:relative;
								margin-bottom:10px;
								padding-left:20px;
								text-align:left;
								margin-left:5px;
							}
							.bodyInputsCont .inputCont .listCont li:before{
								content:"";
								position:absolute;
								left:0;
								top:3px;
								width:17px;
								height:17px;
								background-image:url('../resources/web/iconEmployee.svg');
								background-size:17px 17px;
							}
							.bodyInputsCont .inputCont .listCont li.noInfo{
								padding-left:0;
								color:#878a99;
								margin-left:0;
							}
							.bodyInputsCont .inputCont .listCont li.noInfo:before{
								background-image:none;
							}
								.bodyInputsCont .inputCont .listCont li .removeFromList{
									display:inline-block;
									height:10px;
									width:10px;
									-webkit-mask:url(../resources/web/iconClose.svg);
									mask:url(../resources/web/iconClose.svg);
									-webkit-mask-size:contain;
									mask-size:contain;
									-webkit-mask-position:center center;
									mask-size-position:center center;
									-webkit-mask-repeat:no-repeat;
									mask-size-repeat:no-repeat;
									background-color:#222222;
									appearance:none;
									border:none;
									cursor:pointer;
									transition:background-color .2s ease-in-out;
									margin-left:10px;
								}
								.bodyInputsCont .inputCont .listCont li .removeFromList:hover{
									opacity:0.6;
								}
						.bodyInputsCont .inputCont.documentsList,
						.bodyInputsCont .inputCont.documentsListEdit{
							width:100%;
						}
							.bodyInputsCont .inputCont.documentsList > ul,
							.bodyInputsCont .inputCont.documentsListEdit > ul{
								list-style:none;
								display:flex;
								width:100%;
								flex-wrap:wrap;
								padding:0;
								margin:0;
								gap:10px;
								box-sizing:border-box;
							}
							.bodyInputsCont .inputCont.documentsList > ul > li,
							.bodyInputsCont .inputCont.documentsListEdit > ul > li{
								width:calc(100% / 3 - (20px / 3));
								display:flex;
								flex-shrink:0;
								flex-grow:0;
								color:#a7101c;
								font-size:14px;
								align-items:center;
							}
							.bodyInputsCont .inputCont.documentsList > ul > li:before,
							.bodyInputsCont .inputCont.documentsListEdit > ul > li:before{
								content:"";
								width:14px;
								height:14px;
								background-color:#a7101c;
								margin-right:4px;
								-webkit-mask:url(../resources/web/iconDocument.svg);
								mask:url(../resources/web/iconDocument.svg);
							}
								.bodyInputsCont .inputCont.documentsList > ul > li > span,
								.bodyInputsCont .inputCont.documentsListEdit > ul > li > span{
									white-space:nowrap;
									max-width:calc(100% - 18px - 24px);
									overflow:hidden;
									text-overflow:ellipsis;
								}
								.bodyInputsCont .inputCont.documentsList > ul > li > button,
								.bodyInputsCont .inputCont.documentsListEdit > ul > li > button{
									width:18px;
									height:18px;
									margin-left:6px;
									background-color:#ffffff;
									border-radius:4px;
									padding:0;
									box-sizing:border-box;
									border:solid #a7101c 1px;
									display:flex;
									justify-content:center;
									align-items:center;
									transition:background-color .2s ease-in-out;
								}
								.bodyInputsCont .inputCont.documentsList > ul > li > button:hover,
								.bodyInputsCont .inputCont.documentsListEdit > ul > li > button:hover{
									background-color:#a7101c;
								}
									.bodyInputsCont .inputCont.documentsList > ul > li > button > span,
									.bodyInputsCont .inputCont.documentsListEdit > ul > li > button > span{
										width:14px;
										height:14px;
										background-color:#a7101c;
										transition:background-color .2s ease-in-out;
										cursor:pointer;
										-webkit-mask:url(../resources/web/iconDelete.svg);
										mask:url(../resources/web/iconDelete.svg);
									}
									.bodyInputsCont .inputCont.documentsList > ul > li > button:hover > span,
									.bodyInputsCont .inputCont.documentsListEdit > ul > li > button:hover > span{
										background-color:#ffffff;
										color:#a7101c !important;
									}
						.bodyInputsCont h2{
							margin:0;
							color:#a7101c !important;
							font-size:16px;
							border-bottom:solid #a7101c 2px;
							padding-bottom:10px;
						}
						.sliderTextCont{
							display:flex;
							overflow-x:auto;
							overflow-y:hidden;
							scroll-snap-type:x mandatory;
							-ms-overflow-style:none;
							scrollbar-width:none;
							scroll-behavior: smooth;
						}
						.sliderTextCont::-webkit-scrollbar{
							display: none;
						}
							.sliderText{
								display:flex;
								min-width:100%;
								scroll-snap-align:start;
								align-items:center;
								justify-content:center;
							}
								.docCont{
									width:100%;
								}
								.sliderText .documentInfoCont{
									position:relative;
									width:100%;
									border-radius:4px;
									background-color:#fdf0f1;
									padding:15px;
									color:#a7101c;
									box-sizing:border-box;
								}
									.sliderText .documentInfoCont h4{
										margin:0 0 10px 0;
									}
								.sliderText .documentActionsCont{
									display:flex;
									gap:20px;
									flex-direction:row;
									justify-content:center;
									padding:30px 0;
								}
									.sliderText .documentActionsCont .docsButton{
										display:flex;
										position:relative;
										width:60px;
										height:60px;
										border:solid #a7101c 2px;
										border-radius:50%;
										background-color:#ffffff;
										justify-content:center;
										align-items:center;
									}
										.sliderText .documentActionsCont .docsButton > span{
											width:80%;
											height:80%;
											background-color:#a7101c;
											transition:background-color .2s ease-in-out;
											cursor:pointer;
										}
										.sliderText .documentActionsCont .docsButton.downloadTemplate > span{
											-webkit-mask:url(../resources/web/iconDownload.svg);
											mask:url(../resources/web/iconDownload.svg);
										}
										.sliderText .documentActionsCont .docsButton.uploadDocument > span, .sliderText .documentActionsCont .docsButton.uploadDocumentVF > span{
											-webkit-mask:url(../resources/web/iconUpload.svg);
											mask:url(../resources/web/iconUpload.svg);
										}
										.sliderText .documentActionsCont .docsButton:hover > span{
											background-color:#ffffff;
										}
								.sliderText .documentListCont{
									width:100%;
									border:solid #a7101c 1px;
									border-radius:4px;
									box-sizing:border-box;
									padding:15px;
									color:#a7101c;
								}
									.sliderText .documentListCont > ul{
										list-style:none;
										display:flex;
										width:100%;
										flex-wrap:wrap;
										padding:0;
										margin:0;
										gap:10px;
										box-sizing:border-box;
									}
									.sliderText .documentListCont > ul > li{
										width:100%;
										display:flex;
										flex-shrink:0;
										flex-grow:0;
										color:#a7101c;
										font-size:14px;
										align-items:center;
									}
									.sliderText .documentListCont > ul > li:before{
										content:"";
										width:14px;
										height:14px;
										background-color:#a7101c;
										margin-right:4px;
										-webkit-mask:url(../resources/web/iconDocument.svg);
										mask:url(../resources/web/iconDocument.svg);
									}
									.sliderText .documentListCont .downloadDocsZip, .sliderText .documentListCont .downloadDocsZipVF{
										margin-top:14px;
										height:30px;
										background-color:#a7101c;
										border:solid #a7101c 1px;
										color:#ffffff;
										padding:3px;
									}
									.sliderText .documentListCont .downloadDocsZip:hover, .sliderText .documentListCont .downloadDocsZipVF:hover{
										background-color:#ffffff;
										color:#a7101c;
									}
										.sliderText .documentListCont > ul > li > span{
											white-space:nowrap;
											max-width:calc(100% - 18px - 24px);
											overflow:hidden;
											text-overflow:ellipsis;
										}
										.sliderText .documentListCont > ul > li > button{
											width:18px;
											height:18px;
											margin-left:6px;
											background-color:#ffffff;
											border-radius:4px;
											padding:0;
											box-sizing:border-box;
											border:solid #a7101c 1px;
											display:flex;
											justify-content:center;
											align-items:center;
											transition:background-color .2s ease-in-out;
										}
										.sliderText .documentListCont > ul > li > button:hover{
											background-color:#a7101c;
										}
											.sliderText .documentListCont > ul > li > button > span{
												width:14px;
												height:14px;
												background-color:#a7101c;
												transition:background-color .2s ease-in-out;
												cursor:pointer;
												-webkit-mask:url(../resources/web/iconDelete.svg);
												mask:url(../resources/web/iconDelete.svg);
											}
											.sliderText .documentListCont > ul > li > button.downloadDocument > span, .sliderText .documentListCont > ul > li > button.downloadDocumentVF > span{
												width:14px;
												height:14px;
												background-color:#a7101c;
												transition:background-color .2s ease-in-out;
												cursor:pointer;
												-webkit-mask:url(../resources/web/iconDownload.svg);
												mask:url(../resources/web/iconDownload.svg);
											}
											.sliderText .documentListCont > ul > li > button:hover > span{
												background-color:#ffffff;
												color:#a7101c !important;
											}
						.sliderPointsCont{
							width:100%;
							height:18px;
							margin:18px 0;
							display:flex;
							justify-content:center;
							
						}
							.sliderPoint{
								position:relative;
								width:18px;
								height:18px;
								border-radius:50%;
								box-sizing:border-box;
								border:solid #a7101c 1px;
								margin: 0 10px;
								cursor:pointer;
								-khtml-user-select: none;
								-o-user-select: none;
								-moz-user-select: none;
								-webkit-user-select: none;
								user-select: none;
								-webkit-tap-highlight-color: transparent;
							}
								.sliderPointFill{
									background-color:#a7101c;
								}
								.sliderPointChecked:after{
									content:"";
									position:absolute;
									left:0;
									top:0;
									width:100%;
									height:100%;
									background-color:#a7101c;
									-webkit-mask:url(../resources/web/iconCheck.svg);
									mask:url(../resources/web/iconCheck.svg);
									-webkit-mask-size:70% 70%;
									mask-size:70% 70%;
									-webkit-mask-position:50% 60%;
									mask-size-position:50% 60%;
									-webkit-mask-repeat:no-repeat;
									mask-size-repeat:no-repeat;
								}
								.sliderPointFill.sliderPointChecked:after{
									background-color:#ffffff;
								}
						#documentUploader, #documentUploaderVF{
							display:none;
						}
			.buttonsDown{
				position:relative;
				width:100%;
				height:auto;
				padding:0px 0px 15px 0px;
				display:flex;
				justify-content:center;
			}
				.OKButton, .cancelButton{
					position:relative;
					margin:0 5px;
					width:100px;
					height:30px;
					background-color:#a7101c;
					border:solid #a7101c 1px;
					color:#ffffff;
					box-sizing:border-box;
					border-radius:5px;
					padding:3px;
					display:block;
					cursor:pointer;
					font-size:16px;
					font-weight:400;
					transition:background-color .2s ease-in-out, color .2s ease-in-out, border-color .2s ease-in-out;
					font-family:Roboto,sans-serif;
					display:flex;
					justify-content:center;
					align-items:center;
				}
				.OKButton:hover, .cancelButton:hover{
					border-color:#a7101c;
					background-color:#ffffff;
					color:#a7101c;
				}
#ajaxLoaderCont{
		position:fixed;
		left:0px;
		top:0px;
		width:100%;
		height:100%;
		background-color:rgba(255,255,255,0.9);
		display:none;
		opacity:0;
		z-index:2;
		transition:opacity .2s ease-in-out;
	}
		@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
		@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
		@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
		#ajaxLoaderSpinner{
			position:absolute;
			left:50%;
			top:40%;
			width:150px;
			height:150px;
			margin-left:-75px;
			margin-top:-75px;
			background-image:url('../resources/web/loaderSpinnerRed.png');
			background-repeat:no-repeat;
			background-size:100%;
			font-size:40px;
			font-weight:normal;
			padding-top:0px;
			text-align:center;
			-webkit-animation:spin 4s linear infinite;
			-moz-animation:spin 4s linear infinite;
			animation:spin 4s linear infinite;
		}
@media (max-width:1385px){
	#homeGraphicsCont{
		flex-direction:column;
		align-items:center;
	}
		.graphicsColumn{
			width:50%;
		}
			.graphicsBarsCont{
				height:150px;
			}
	.boColumn table tr th.hiddeableColumn{
		display:none;
	}
	.boColumn table tr td.hiddeableColumn{
		display:none;
	}
}
@media (max-width:978px){
	.boRow{
		flex-direction:column;
	}
		.boColumnCont{
			padding-bottom:20px;
		}
		.boColumnCont:last-child{
			padding-bottom:0;
		}
		.boColumnCont.sizeOne{
			width:100%;
		}
		.boColumnCont.sizeTwo{
			width:100%;
		}
		.boColumnCont.sizeThree{
			width:100%;
		}
		.boColumnCont.sizeFour{
			width:100%;
		}
		.boColumnCont.sizeFive{
			width:100%;
		}
}
@media (max-width:768px){
	body{
		margin:0;
	}
	#mainBody{
		padding:0 20px 20px 20px;
		box-sizing:border-box;
	}
	#welcomeCont{
		display:block;
		position:relative;
		border-radius:0 0 10px 10px;
		text-align:center;
	}
	#mainLogo{
		width:250px;
		margin:20px auto 0 auto;
	}
	#mainBody .welcomeMessage{
		font-size:16px;
		line-height:20px;
	}
	#backofficeContHeader #buttonsCont{
		display:none;
	}
	#backofficeSidebar{
		width:50px;
	}
		#backofficeSidebar #backofficeSidebarWrapper{
			width:50px;
		}
			#backofficeSidebar #backofficeSidebarWrapper #backofficeLogoCont{
				width:30px;
				height:40px;
				padding:0;
			}
			#backofficeSidebar #backofficeSidebarWrapper #backofficeLogoDummy{
				width:30px;
				height:40px;
				padding:0;
			}
				#backofficeSidebar #backofficeSidebarWrapper #backofficeLogoCont img{
					height:100%;
					object-fit:cover;
					object-position:left;
				}
				#backofficeSidebar #backofficeSidebarWrapper #backofficeLogoDummy img{
					height:100%;
					object-fit:cover;
					object-position:left;
				}
				#backofficeSidebar #backofficeSidebarWrapper #backofficeMenuCont .generalButtonMenu{
					padding:10px 5px;
					margin:0;
					font-size:0;
				}
				#logoutButtonMenu{
					display:inherit !important;
				}
				#menuSwitch{
					display:none !important;
				}
}
@media (max-width:600px){
	.boColumn > .boColumnTitle > .generalButtonCreate{
		font-size:0;
		padding:2px;
		margin-left:5px;
		width:23px;
		height:23px;
	}
		.boColumn > .boColumnTitle > .generalButtonCreate > .generalIconCreate{
			margin-left:0;
		}
	.graphicsColumn{
		width:100%;
	}
	.boColumn > .boColumnTitle > .pannelFiltersCont{
		max-width:82px !important;
	}
	.userMailColumn{
		word-break:break-all;
	}
}