/******************/
/* general layout */
/******************/
.canvas-wrapper{
	overflow: hidden;
}

.canvas-row{
	display: flex;
	flex-wrap: wrap; /* is it really needed? */
	min-width: 100%;	
}	
.canvas-col{
	flex-grow: 1;
	flex-basis: 0;	
}

.canvas-label{
	max-width: 160px;
}				
.canvas-value{
	flex: 1;
}

/* this is to prevent flex container to strip spaces in betweer words (text and a tag (or span) for examples) */
.canvas-row:not(:has(.canvas-row)):not(:has(.canvas-col)){ 
	display:block;
	width:100%;
}

.canvas-row img,
.canvas-wrapper img{
	display: block;
}

/* 
only add this class to the image nested in an a tag and works like a charm
control the image width with the width attr
width: 10px !important; 
control the image height with this attribute
height:100px 
*/ 
.the-img{ 
	/* prevent image extra space at the bototm */
	vertical-align: middle; 
	display: block;
	
	/* fill parent container */
	width: 100% !important;
	max-width: 100% !important;
	aspect-ratio: 1/1 !important; /* defining the aspect ratio of the image */
  	object-fit: cover; /* cover, contain, fill, scale-down, none */
}

.halign{
	justify-content: center;
}
.valign,
.vertical-align{ /* remove after some time */
	display: flex;
  	align-items: center;
}

.red-face{ /* remove after some time */
	color: red !important;
}
/******************/
/* [end]general layout */
/******************/














/* ******************************** */
/* Front End Image Gallery Uploader */
/* ******************************** */
ul.gallery-wrapper{
	overflow:hidden;
	list-style:none;
	margin:0
}
ul.gallery-wrapper li{
	width: 20%;
	float: left
}
/* ******************************** */
/* [end]Front End Image Gallery Uploader */
/* ******************************** */














/* ***************** */
/* Front End Manager */
/* ***************** */
.canvas-wrapper.fes > .canvas-row:nth-child(1){
}
.canvas-wrapper.fes > .canvas-row:nth-child(2){
}
.canvas-wrapper.fes > .canvas-row:nth-child(3){
}

.canvas-wrapper.fes form{
	width: 100%	
}

.canvas-wrapper.fes > .canvas-row.controls > a{
	display: inline-block;
	
	padding: 3px 10px;
	
	background: #f0f0f0;
	text-decoration: none;
}
.canvas-wrapper.fes > .canvas-row.controls > a:not(:last-child){
	margin-right: 10px;
}


.canvas-wrapper.fes > .canvas-row.manager > .canvas-row{
	padding:10px 16px
}
.canvas-wrapper.fes > .canvas-row.manager > .canvas-row:first-child{
	background:#f0f0f0;
	font-weight:bold;
}

.canvas-wrapper.fes > .canvas-row.manager > .canvas-row:nth-child(2n+1){
	background:#f8f8f8;
}

/* records */
.canvas-wrapper.fes > .canvas-row.manager > .canvas-row > .canvas-col{
	display: flex;
  	align-items: center;
}
.canvas-wrapper.fes > .canvas-row.manager > .canvas-row > .canvas-col:not(:last-child){
	padding-right: 10px
}
.canvas-wrapper.fes > .canvas-row.manager > .canvas-row > .canvas-col:nth-child(1){
	max-width:100px !important
}
.canvas-wrapper.fes > .canvas-row.manager > .canvas-row > .canvas-col:nth-child(3){
	max-width:200px !important
}
.canvas-wrapper.fes > .canvas-row.manager > .canvas-row > .canvas-col:nth-child(4){
	max-width:240px !important
}

.canvas-wrapper.fes > .canvas-row.manager) > .canvas-row > .canvas-col:last-child a{
	display: inline-block;
	float:left;
}
.canvas-wrapper.fes > .canvas-row.manager > .canvas-row > .canvas-col:last-child a:not(:last-child){
	margin-right: 10px !important
}
/* ***************** */
/* [end]Front End Manager */
/* ***************** */



















/* *************** */
/* Front End Forms */
/* *************** */
.canvas-wrapper.fes form{
	background:#f8f8f8;
	border:1px solid #f0f0f0;
	padding:20px
}
.canvas-wrapper.fes > .canvas-row:not(:last-child),
.canvas-wrapper.fes form > .canvas-row:not(:last-child),
.canvas-wrapper.fes form{
	margin-bottom: 10px !important;
}
.canvas-wrapper.fes form input[type="text"],
.canvas-wrapper.fes form input[type="password"],
.canvas-wrapper.fes form textarea{
	min-width:280px;
}
.canvas-wrapper.fes .canvas-row.form-submit{
	text-align:center !important
}

.canvas-wrapper.fes .sub-msg,
.canvas-wrapper.fes .sub-msg a{
	color:#0000F7
}
.canvas-wrapper.fes .sub-msg.error,
.canvas-wrapper.fes .sub-msg.error a,
.canvas-wrapper.fes .profile-photo-deleter{
	color:#F70000
}
/* *************** */
/* [End] Front End Forms */
/* *************** */