/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */

@media(max-width:789px){
	.member-description{
		text-align:left!important;
	}
	.member-grid{
		grid-template-columns: 1fr!important;
	}
}
@media(max-width:599px){
	.member-grid article{
		grid-template-columns: 1fr!important;
	}
	.member-grid .member-avatar,.member-grid .member-content{
		text-align:center;
	}
	.member-links{
		justify-content: center!important;
	}
}
.member-grid{
	display:grid;
	grid-template-columns: 1fr 1fr;
	grid-column-gap: 20px;
	grid-row-gap: 20px;
}
.member-grid .member-col{
	position:relative;
	border-radius:3px;
	border: 1px solid #efefef;
    padding: 10px;
}
@media(min-width:1200px){
.member-grid .member-avatar img{
	height:160px!important;	
	}
}
@media(min-width:787px) and (max-width: 1200px){
.member-grid .member-avatar img{
	height:130px!important;	
	}
}

@media(max-width:787px){
.member-grid .member-avatar img{
	height:160px!important;	
	}
}
.member-grid .member-avatar img{
	width: 160px;
    border-radius: 100px;
    height: auto;
    object-fit: cover;
	object-position: top;
}
.member-grid .member-name{
	margin-top:10px;
}
.member-grid .member-name h3{
	padding-bottom:10px;
}
.member-grid .member-name h5{
	padding-bottom:15px;
}
.member-grid .member-col:hover .member-social{
	opacity:1;
	left:-5px;
	transition:all 0.45s ease-in-out;
}
.member-social{
	text-align:center;
	transition:all 0.45s ease-in-out;
	opacity:0;
	left:-20px;
	position: absolute;
	top: 45%;
    bottom: 55%;
	writing-mode: vertical-rl;
	display: flex;
    justify-content: center;
	margin:7px;
}
.member-links{
	text-align:center;
	transition:all 0.45s ease-in-out;
	display: flex;
	flex-wrap:wrap;
    justify-content: flex-start;
	margin:12px 0px;
}
.social_facebook:before {
	content: "\e093";
}
.social_instagram:before {
	content: "\e09a";
}
.social_linkedin:before {
	content: "\e09d";
}
.social_pinterest:before {
	content: "\e095";
}
.social_youtube:before {
	content: "\e0a3";
}
.member-social a{
	margin:4px 6px;
}
.icon_phone:before {
	content: "\e090";
}
.member-social span:before{
	background-color:#efe6d7;
	font-family: ETmodules;
    speak: none;
    font-style: normal;
	border-radius:100px;
    font-weight: 400;
    -webkit-font-feature-settings: normal;
    font-feature-settings: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-shadow: 0 0;
    direction: ltr;
	height: 32px;
    width: 32px;
    font-size: 16px;
    line-height: 32px;
    display: block;
    color: #52312A;
    -webkit-transition: color .3s;
    transition: color .3s;
    position: relative;
    z-index: 10;
}
.member-links span{
	display:flex;align-items:center;
}
.member-links span:before{
	margin-right:10px;
	background-color:#efe6d7;
	font-family: ETmodules;
    speak: none;
    font-style: normal;
	border-radius:100px;
    font-weight: 400;
    -webkit-font-feature-settings: normal;
    font-feature-settings: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-shadow: 0 0;
    direction: ltr;
	height: 32px;
    width: 32px;
    font-size: 16px;
    line-height: 32px;
    display: block;
    color: #52312A;
    -webkit-transition: color .3s;
    transition: color .3s;
    position: relative;
    z-index: 10;
}
.icon_link:before {
	content: "\e02c";
}
.icon_mail:before {
	content: "\e076";
}
.member-edit{
	position: absolute;
    top: 0px;
    padding: 4px 9px;
    right: 0;
    color: white;
    background: #9e6f43;
}
.member .member-edit{
	 top: 33px!important;
}
.member-edit a{
	 color: white;
}
.member-col article{
	display:grid;
	grid-template-columns:1fr 2fr;
	grid-column-gap: 15px;
}

@media(max-width:789px){
	.update-member-profile .two_fields{
		grid-template-columns: 1fr!important;
		grid-row-gap:10px!important;
	}
}

.update-member-profile .two_fields{
	margin-bottom: 10px;
	display:grid;
	grid-template-columns:1fr 1fr;
	grid-column-gap:30px;
	grid-row-gap: 20px;
}

.update-member-profile .one_field{
	margin-bottom: 10px;
	display:grid;
	grid-template-columns:1fr;
	grid-row-gap: 20px;
}
.update-member-profile .form-field input[type="text"],.update-member-profile .form-field input[type="tel"],.update-member-profile .form-field input[type="url"],.update-member-profile .form-field input[type="email"],.update-member-profile textarea,.member-filters select,.update-member-profile select{
	padding:8px 7px;
	border-radius:4px;
	width:100%;
	font-size:16px;
	border: 1px solid #bbb;
}
.update-member-profile input[type="text"]:active,.update-member-profile select:active,.update-member-profile select:focus,.update-member-profile select:active,.update-member-profile input[type="text"]:focus,.update-member-profile input[type="url"]:active,.update-member-profile input[type="url"]:focus,.update-member-profile input[type="email"]:active,.update-member-profile input[type="email"]:focus,.update-member-profile textarea:active,.update-member-profile textarea:focus,.member-filters select:focus{
	border:1px solid #9E6F43!important;
}
.member-filters select{
	border-radius:20px!important;
}
.update-member-profile .member-update-btn{
	color: #ffffff!important;
    border: 2px solid #f9f9f9!important;
    background-color: #BA9C78;
	border-radius: 25px;
	font-size: 16px;
	padding: 0.3em 1em!important;
    border-width: 1px!important;
	width:max-content;
	font-weight:600;
}
.filter_button{
	color: #ffffff!important;
    border: 2px solid #9e6f43!important;
    background-color: #9e6f43;
	border-radius: 25px;
	font-size: 16px;
	padding: 0.6em 2em!important;
    border-width: 1px!important;
	width:max-content;
	margin-left:20px;
	font-weight:600;
}
.update-member-profile .member-update-btn:hover{
	cursor:pointer!important;
	background-color:#9e6f43!important;
}
.filter_button:hover{
	cursor:pointer!important;
	background-color:#8a613b!important;
}
.member-profile-avatar label{
	position:relative;
}
.member-profile-avatar label:hover::before{
	  margin-top: 70px;
	  opacity:1;
	  visibility:visible;
	  cursor:pointer;
	  transition:all 0.24s ease-in;
}
.member-profile-avatar label::before {
	transition:all 0.25s ease-in;
    border-radius: 20px;
	visibility:hidden;
	opacity:0px;
    content: 'Mettre à jour';
    position: absolute;
    top: 1;
    left: 15%;
    box-shadow: 2px 2px 12px 0px #ccc;
    margin-top: 30px;
    background: #fff;
    padding: 5px 12px;
}
#member-profile-form .member-profile-avatar img{
    height: 160px!important;
}
.member-profile-avatar img{
	width: 160px;
    border-radius: 100px;
    height: auto;
    object-fit: cover;
}

.member-grid-pagination{
	text-align:center;
	margin:20px;
}
@media(min-width:725px) and (max-width:830px){
	.member-filters{
		display: grid!important;
		grid-template-columns: 1fr 1fr;
		grid-row-gap: 20px;
		grid-column-gap: 15px;
		text-align: left;
	}
	.member-filters select{
		margin-left:0px!important;	
	}
	.filter_button{
		margin-left:0px!important;	
		width: -webkit-fill-available;
	}
}
.member-filters{
	display:flex;
	justify-content:center;
	align-items:center;
	margin:20px 0;
}

.select2{
	width:100%!important;
}

.active{
	display: flex!important;
}
.member_loading{
	display: none;
    position: absolute;
    z-index: 999;
    height: 100%;
    background: #ffffffad;
    width: 100%;
}

.filters{
	display:flex;
	justify-content:center;
	align-items:center;
	width: max-content;
    margin: auto;
	margin-bottom:10px;
}
.reset_filter{
	display:flex;
	justify-content:center;
	align-items:center;
	width: max-content;
    margin: auto;
	margin-bottom:30px;
}
.filters p{
	padding-bottom:0px!important;
	padding: 4px 9px !important;
	margin:0px 15px;
}
@media(max-width:807px){
	.filters p{
		padding: 4px 5px !important;
		margin:0px 8px;
	}
}
.filters p:hover,.reset:hover{
	cursor:pointer;
	color:#9e6f43!important;
}
.filters p.active{
	color:#9e6f43!important;
}
@media(max-width:725px){
	.filters{
		margin-bottom:30px!important;
	}
	.member-filters{
		flex-wrap:wrap;
	}
	.member-filters select{
		width: 100%!important;
		margin-bottom:10px;
		margin-left:0px!important;
	}
	.member-filters .filter_button{
		width: 100%!important;
		margin-left:0px!important;
	}
}


.response{
	margin: 20px 0px;
    padding: 8px 12px;
	opacity:0;
}
.response.danger{
	background: red;
	opacity:1!important;
    color: #fff;
    border-left: 6px solid #ff5353;
}

.response.success{
	
    background: #9ebf9f;
	opacity:1!important;
    color: #fff;
    border-left: 6px solid #79a67a;
}

.member-badge p{
	padding: 3px 6px!important;
	position:absolute;
	top:0;
	right:0;
	width:max-content;
	margin-bottom:6px;
	border-radius: 0px;
	background: #9ebf9f;
	color: #fff;
}

.connexion-form{
    display: grid;
    grid-template-columns: 1fr 1fr;
}
.connexion-form .col-1 .xoo-el-reg-tgr{
	display:none!important;
}
.connexion-form .col-2 .xoo-el-login-tgr{
	display:none!important;
}
@media(max-width:980px){
	.connexion-form{
		display: grid;
		grid-template-columns: 1fr;
	}
}