/******************/
/* 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;	
	*/
	flex: 1;
}

.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 Forms */
/* *************** */
.canvas-wrapper.uf-form{
}
.canvas-wrapper.uf-form form{
	background:#f8f8f8;
	border:1px solid #f0f0f0;
	padding:20px
}
.canvas-wrapper.uf-form > .canvas-row:not(:last-child),
.canvas-wrapper.uf-form form > .canvas-row:not(:last-child),
.canvas-wrapper.uf-form form{
	margin-bottom: 10px !important;
}
.canvas-wrapper.uf-form form > .canvas-row .canvas-col:first-child{
	min-width:140px
}
.canvas-wrapper.uf-form .form-label{
	max-width:100px;
}
.canvas-wrapper.uf-form form input[type="text"],
.canvas-wrapper.uf-form form input[type="password"]{
	min-width:280px;
}

.canvas-wrapper .sub-msg,
.canvas-wrapper .sub-msg a{
	color:#0000F7
}
.canvas-wrapper .sub-msg.error,
.canvas-wrapper .sub-msg.error a,
.canvas-wrapper .profile-photo-deleter{
	color:#F70000
}

/* *************** */
/* [End] Front End Forms */
/* *************** */













/* *********** */
/* user widget */
/* *********** */
.widget.uf-user > .canvas-wrapper > .canvas-row > .canvas-col:not(:last-child){
	margin-right:10px
}
.widget.uf-user a{
	min-width:120px;
}
/* *********** */
/* [end]user widget */
/* *********** */












/* ******************* */
/* Latest Users Widget */
/* ******************* */
.latest-users-widget .canvas-wrapper > .canvas-row{
	margin-bottom: 10px
}
.latest-users-widget .canvas-wrapper > .canvas-row > .canvas-col:first-child{
	max-width: 52px;/*fixed width*/
	/*flex: 0 1 20%;*//*percentage width*/
	margin-right: 10px;
}
.latest-users-widget .canvas-wrapper > .canvas-row > .canvas-col{
	display: flex;
  	align-items: center;
}
/* ******************* */
/* [End] Latest Users Widget */
/* ******************* */












/* **************** */
/* Menu Account Tab */
/* **************** */
a.uf-menu-avatar,
a.uf-menu-avatar *{ /* some themes include a tag between the a tag and the actual markup */
   display: flex !important;
   align-items:center !important;
}
a.uf-menu-avatar img{
	margin-left:5px;
}
/* **************** */
/* [End] Menu Account Tab */
/* **************** */
















/***********************************************/
/* categories and archive grid shortcode style */
/***********************************************/
.users-grid .canvas-row .canvas-col{    /* this class should match the shortcode file class value */
	border:1px solid #f0f0f0;
	padding:10px;
}
@media screen and (max-width: 920px){
.users-grid .canvas-row .canvas-col{    /* this class should match the shortcode file class value */
	min-width: 33% !important; /* two cols per row in small resolutions */
	max-width: 33% !important; /* two cols per row in small resolutions */
}
}
/***********************************************/
/* [end]categories and archive grid shortcode style */
/***********************************************/












/* ********* */
/* Dashboard */
/* ********* */
.canvas-wrapper.dashboard > .canvas-row:not(:last-child){
	margin-bottom: 16px
}
.canvas-wrapper.dashboard .canvas-row .canvas-col .canvas-row{
	display:block;
	text-align:center
}
.canvas-wrapper.dashboard .canvas-row .canvas-col .canvas-row:nth-child(1){
	font-size:32px;
}
.canvas-wrapper.dashboard .canvas-row .canvas-col .canvas-row:nth-child(2){
	font-size:18px;
}
.canvas-wrapper.dashboard .canvas-row .canvas-col .canvas-row:nth-child(3){
}
@media screen and (max-width: 920px){
.canvas-wrapper.dashboard .canvas-row .canvas-col{
	min-width: 50% !important; /* two cols per row in small resolutions */
}
}
/* ********* */
/* [End] Dashboard */
/* ********* */

















/* *************************************** */
/* Navigation menu user tab dropdown panel */
/* *************************************** */
/* the ID value has to match the in the main file*/
#uf-user-info{  
	width:100%; 
	z-index: 100000; 
	position: absolute; 
	
	background: #ffffff;
	padding: 10px
}
#uf-user-info ul{
	list-style: none; /* Removes bullet points */
	margin: 0;        /* Removes default margin */
	padding: 0;       /* Removes default padding */
}
/* *************************************** */
/* [end]Navigation menu user tab dropdown panel */
/* *************************************** */

















/* ******** */
/* Honeypot */
/* "form-row form-row-user-info" is the dummy class given to the hp row in the registration form */
/* ******** */
.uf-form .canvas-row.form-row-user-info{
	display: none !important;
	opacity: 0;
}
/* ******** */
/* Honeypot */
/* ******** */