/* background */

#background{
	position : fixed;
	background-color : rgba(255, 255, 255, 0.7);
	left : 10%;
	right : 10%;
	height : 100%;
	box-shadow : 0px 0px 20px rgba(0, 0, 0, 0.75);
}

@media only screen and (max-width:1024px) {
    #background{
        left : 65px;
        right : 15px;
    }
}

/* Page */

#page{
	position : absolute;
	top : 0px;
	left : 0px;
	right : 0px;

	padding-left : 10%;
	padding-right : 10%;
}

@media only screen and (max-width:1024px) {
    #page{
        padding-left : 65px;
        padding-right : 15px;
    }
}

#page #ajax-content #loading{
	margin-top: 50vh;
	transform: translateY(-50%);
}

/* Shared (common) */

#page .header{
    padding : 20px 10px;
    background-image : url(../imgs/header-background.jpg);
    background-position : center bottom;
    border-bottom: 3px solid #ffffff;
}

#page .white-bloc{
	padding : 1px 0px;
	background-color : #ffffff;
	border-top : 1px solid #cccccc;
	border-bottom : 1px solid #cccccc;
	margin : 20px 0;
}

#page .white-bloc .padding{
	padding : 10px 12px 10px 10px;
}

#page .white-bloc .padding .action-buttons .button,
#page .white-bloc .padding .action-buttons .button-gray,
#page .white-bloc .padding .action-buttons .button-orange,
#page .white-bloc .padding .action-buttons .button-red{
	margin-left : 0px;
	margin-right : 5px;
}

#page .white-bloc .padding .action-buttons .align-right .button,
#page .white-bloc .padding .action-buttons .align-right .button-gray,
#page .white-bloc .padding .action-buttons .align-right .button-orange,
#page .white-bloc .padding .action-buttons .align-right .button-red{
	margin-left : 5px;
	margin-right : 0px;
}

#page .white-bloc .save-bloc{
	position : absolute;
	background-color : #2ecc71;
	border : 3px solid #ffffff;
	box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.5);
	padding : 4px;
	border-radius : 24px;
	cursor : pointer;
    left : auto;
	top : 4px;
    right : 15px;
	
	-webkit-transition : .3s ease-in-out, border-color ease-in-out .15s, background-color ease-in-out .15s;
	transition : .3s ease-in-out, border-color ease-in-out .15s, background-color ease-in-out .15s;
}

#page .white-bloc .buy{
	position : absolute;
	background-color : #3498db;
	border : 3px solid #ffffff;
	box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.5);
	padding : 4px;
	border-radius : 24px;
	cursor : pointer;
    left : auto;
	top : 4px;
    right : 15px;
	
	opacity : 0;
	-webkit-transform: rotate(25deg) scale(0);
	transform: rotate(25deg) scale(0);
	
	-webkit-transition : .3s ease-in-out, border-color ease-in-out .15s, background-color ease-in-out .15s;
	transition : .3s ease-in-out, border-color ease-in-out .15s, background-color ease-in-out .15s;
}

#page .white-bloc .delete,
#page .white-bloc .delete-bloc{
	position : absolute;
	background-color : #e74c3c;
	border : 3px solid #ffffff;
	box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.5);
	padding : 4px;
	border-radius : 24px;
	cursor : pointer;
    left : auto;
	top : 4px;
    right : 15px;
	
	opacity : 0;
	-webkit-transform: rotate(25deg) scale(0);
	transform: rotate(25deg) scale(0);
	
	-webkit-transition : .3s ease-in-out, border-color ease-in-out .15s, background-color ease-in-out .15s;
	transition : .3s ease-in-out, border-color ease-in-out .15s, background-color ease-in-out .15s;
}

#page .white-bloc .modify,
#page .white-bloc .modify-bloc{
	position : absolute;
	background-color : #3498db;
	border : 3px solid #ffffff;
	box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.5);
	padding : 4px;
	border-radius : 24px;
	cursor : pointer;
    left : auto;
	top : 4px;
    right : 65px;
	
	opacity : 0;
	-webkit-transform: rotate(25deg) scale(0);
	transform: rotate(25deg) scale(0);
	
	-webkit-transition : .3s ease-in-out, border-color ease-in-out .15s, background-color ease-in-out .15s;
	transition : .3s ease-in-out, border-color ease-in-out .15s, background-color ease-in-out .15s;
}

#custom-popup .search-input,
#page .white-bloc .search-input{
	position : absolute;
    left : auto;
	top : 4px;
    right : 65px;
}

#custom-popup .search,
#page .white-bloc .search{
	position : absolute;
	background-color : #3498db;
	border : 3px solid #ffffff;
	box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.5);
	padding : 4px;
	border-radius : 24px;
	cursor : pointer;
    left : auto;
	top : 4px;
    right : 15px;
}

#custom-popup .content-element,
#page .white-bloc .content-element{
	display : inline-block;
	position: relative;
	width : 256px;
	margin : 30px;
}

#page .white-bloc .content-element .buy,
#page .white-bloc .content-element .delete{
	top : 17px;
    right : 70px;
    z-index: 2;
}

#page .white-bloc .content-element .modify{
	top : 17px;
    right : 117px;
    z-index: 2;
}

#page .white-bloc .content-element .element{
	position: relative;
	width : 250px;
	height : 175px;
	overflow : hidden;
	border-radius : 10px;
	border : 1px solid #ffffff;
	box-shadow: 0px 0px 0px 3px #dbdbdb;
	cursor : pointer;
    z-index: 1;
	
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}

#page .white-bloc .content-element .element img{
	object-fit : cover;
	background-color : #3498db;
	width : 250px;
	height : 175px;
    z-index: 0;
	
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}

#page .white-bloc .content-element .element div{
	position : absolute;
	background-color : rgba(0, 0, 0, 0.5);
	top : 0px;
	left : 0px;
	right : 0px;
	padding : 10px;
	color : #ffffff;
	font-weight : bold;
	text-align : left;
}

#page .white-bloc .content-element .share-round{
	position : absolute;
	background-color : #3498db;
	overflow : hidden;
	right : 8px;
	top : 5px;
	width : 50px;
	height : 50px;
	border-radius : 50px;
	border : 3px solid #ffffff;
	box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.5);
	text-align : center;
	cursor : default;
	z-index : 1;
}

#page .white-bloc .content-element .share-round span{
	color : #ffffff;
	line-height : 50px;
	text-align : center;
	font-weight : bold;
	font-size : 20px;
	
	opacity : 1;
	
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}

#page .white-bloc .content-element .new{
	position : absolute;
	background-color : #e67e22;
	overflow : hidden;
	padding : 5px;
	right : 16px;
	bottom : 16px;
	border-radius : 50px;
	border : 3px solid #ffffff;
	box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.5);
	text-align : center;
	cursor : default;
	z-index : 1;
	
	-webkit-transition : border-color ease-in-out .15s, background-color ease-in-out .15s;
	transition : border-color ease-in-out .15s, background-color ease-in-out .15s;
}

#page .white-bloc .content-element .new img{
	-webkit-transform: rotate(0deg) scale(0.8);
	transform: rotate(0deg) scale(0.8);
	
	-webkit-transition : .3s ease-in-out;
	transition : .3s ease-in-out;
}

#custom-popup .title,
#page .white-bloc .title,
#page .group-bloc .title{
	position : relative;
	background : #e9e9e9;
	color : #333333;
	font-weight : bold;
	padding : 15px 45px;
	border-bottom : 1px solid #cccccc;
}

#page .white-bloc .title img{
	position: absolute;
	top : 11px;
	left : 12px;
}

#page .white-bloc .title .button{
	float : right;
	margin-top : -7px;
	margin-right : -30px;
}

#page .white-bloc .list-details .title .modify,
#page .white-bloc .title .delete{
    left : auto;
	top : 4px;
    right : 15px;
}

#page .white-bloc .title .modify{
    left : auto;
	top : 4px;
    right : 65px;
}

#page .white-bloc .title .save-bloc{
    left : auto;
	top : 4px;
    right : 190px;
}

#page .white-bloc .title .delete-bloc{
    left : auto;
	top : 4px;
    right : 190px;
}

#page .white-bloc .title.list .delete-bloc{
	opacity : 1;
	-webkit-transform: rotate(0deg) scale(1);
	transform: rotate(0deg) scale(1);
	
    left : auto;
	top : 4px;
    right : 240px;
}

#page .white-bloc .title .modify-bloc{
    left : auto;
	top : 4px;
    right : 240px;
}

/* Shared by me */

#page .shared-by-me .content-element .share-round{
	-webkit-transition: .15s ease-in-out;
	transition: .15s ease-in-out;
}

#page .shared-by-me .content-element .share-round img{
	position : absolute;
	height : 30px;
	width : 30px;
	top : 10px;
	left : 10px;
	
	opacity : 0;
	-webkit-transform: rotate(90deg) scale(0);
	transform: rotate(90deg) scale(0);
	
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}

/* Shared with me */

#page .shared-with-me .content-element .share-round img{
	object-fit : cover;
	width : 50px;
	height : 50px;
    z-index: 0;
	
	-webkit-transition: ;
	transition: .3s ease-in-out;
}

/* One list & New list */

#page .one-list,
#page .new-list{
	margin-bottom : 300px;
}

#page .one-list .content-element .element,
#page .new-list .content-element .element{
	cursor : default;
}

#page .one-list .content-element .share-round,
#page .new-list .content-element .share-round{
	cursor : pointer;
	
	-webkit-transition: .15s ease-in-out;
	transition: .15s ease-in-out;
}

#page .one-list .content-element .share-round img,
#page .new-list .content-element .share-round img{
	position : absolute;
	height : 34px;
	width : 34px;
	top : 8px;
	left : 8px;
	
	opacity : 0;
	-webkit-transform: rotate(90deg) scale(0);
	transform: rotate(90deg) scale(0);
	
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}

#page .one-list .content-element.buyed .element img,
#page .new-list .content-element.buyed .element img{
	-webkit-filter: grayscale(100%);
    filter: grayscale(100%);
}

#page .shared-by-me .content-element.shared .share-round,
#page .shared-with-me .content-element.shared .share-round,
#page .one-list .content-element.buyed .share-round,
#page .new-list .content-element.buyed .share-round{
	cursor : default;
}

#page .shared-by-me .content-element.shared .share-round img,
#page .shared-with-me .content-element.shared .share-round img,
#page .one-list .content-element.buyed .share-round img,
#page .new-list .content-element.buyed .share-round img{
	object-fit : cover;
	position : absolute;
	width : 50px;
	height : 50px;
    top: 0px;
    left: 0px;
    z-index: 0;
	
    opacity: 1;
    -webkit-transform: rotate(0deg) scale(1);
    transform: rotate(0deg) scale(1)
	
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}

#page .new-list .content-element-custom,
#page .one-list .content-element-custom{
	height: auto !important;
}

#page #div-selector{
	height: 120px;
	width: 100%;
	background: #e9e9e9;
    border-top: 1px solid #cccccc;
    border-bottom: 1px solid #cccccc;
}

#page #div-selector  #div-result{
	white-space : nowrap;
	line-height : 91px;
	margin : 10px;
}

#page #div-selector #div-result .round-preview{
    display : inline-block;
	position : relative;
	width : 81px;
	margin : 3px 5px;
}

#page #div-selector #div-result .round-preview .element{
	position : relative;
	width : 75px;
	height : 75px;
	overflow : hidden;
	border-radius : 75px;
	border : 3px solid #ffffff;
	box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.5);
    z-index: 1;
}

#page #div-selector #div-result .round-preview .element img{
	object-fit : cover;
	position : absolute;
	background-color : #3498db;
	width : 75px;
	height : 75px;
    z-index: 0;
	
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}

/* One list & New list & Relationships */

#custom-popup .content-element,
#page .relationships .content-element,
#page .new-list .content-element-custom,
#page .one-list .content-element-custom{
	height: 200px;
	width: 100%;
	background: #e9e9e9;
    border-top: 1px solid #cccccc;
    border-bottom: 1px solid #cccccc;
	margin : 20px 0px;
}

#custom-popup .content-element .title,
#page .relationships .content-element .title,
#page .new-list .content-element-custom .title,
#page .one-list .content-element-custom .title{
	height: auto;
	max-height: 500px;
	background-color : #dfdfdf;
    border-bottom: 1px solid #ffffff;
	padding-left : 15px;
}

/* Relationships popup */

#custom-popup .content-element{
    border-top: 1px solid #ffffff;
	border-radius : 5px 5px 0px 0px;
	margin : 0px;
}

#custom-popup .content-element .title{
	border-radius : 5px 5px 0px 0px;
}

#custom-popup .new-relationship .content-element input{
    box-sizing : border-box;
	width : 100%;
    margin : 0px;
}

#custom-popup .new-relationship .content-element #ajax-new-relation{
    background-image : url(../imgs/header-background.jpg);
    background-position : center bottom;
    height : 150px;
    width : 100%;
    position : relative;
    border-top : 1px solid #ffffff;
    border-bottom : 1px solid #cccccc;
    overflow : hidden;
}

#custom-popup .new-relationship .content-element #ajax-new-relation .waiting-code{
	text-align : center;
    font-size : 40px;
    color : #ffffff;
    line-height : 150px;
}

/* List detail recipient */

#page .new-list .list-details,
#page .one-list .list-details{
    margin-top : 25px;
	border-spacing: 0px;
	border-collapse: separate;
    border-top: 1px solid #cccccc;
    border-bottom: 1px solid #cccccc;
	width : 100%;
}

#page .new-list .list-details .title,
#page .one-list .list-details .title{
    height : auto;
    max-height : 500px;
    background-color : #dfdfdf;
    border-bottom : 1px solid #ffffff;
    padding-left : 15px;
    margin : -1px;
}

#page .new-list .list-details .list-recipient,
#page .one-list .list-details .list-recipient{
	background: #365e5e url(../imgs/header-background.jpg);
    background-position : center bottom;
    border-bottom: 3px solid #ffffff;
    height : 170px;
}

#page .one-list .list-details .list-author{
	background: #365e5e url(../imgs/header-background.jpg);
    background-position : center bottom;
    border-left : 1px solid #ffffff;
    border-bottom: 3px solid #ffffff;
    width : 150px;
    height : 170px;
}

/* Relationships popup & List detail recipient */

#page .new-list .list-recipient .user,
#page .one-list .list-recipient .user,
#page .one-list .list-author .user,
#custom-popup .new-relationship .content-element #ajax-new-relation .user{
	border-spacing: 0px;
	border-collapse: separate;
	height : 100%;
	
	-webkit-transition : .5s ease-in-out;
	transition : .5s ease-in-out;
}

#page .new-list .list-recipient .user,
#page .one-list .list-recipient .user,
#page .one-list .list-author .user{
	height : 150px;
}

#page .one-list .list-author .user{
    margin : 0 auto;
}

#page .new-list .list-recipient .user td:first-child,
#page .one-list .list-recipient .user td:first-child,
#custom-popup .new-relationship .content-element #ajax-new-relation .user td:first-child{
	padding : 25px
}

#page .new-list .list-recipient .user td:last-child,
#page .one-list .list-recipient .user td:last-child,
#custom-popup .new-relationship .content-element #ajax-new-relation .user td:last-child{
	color : #ffffff;
}

#page .new-list .list-recipient .user td:last-child .username,
#page .one-list .list-recipient .user td:last-child .username,
#custom-popup .new-relationship .content-element #ajax-new-relation .user td:last-child .username{
	padding-right : 25px;
	font-size : 30px;
	font-weight : bold;
}

#page .new-list .list-recipient .user .profil-round,
#page .one-list .list-recipient .user .profil-round,
#page .one-list .list-author .user .profil-round,
#custom-popup .new-relationship .content-element #ajax-new-relation .user .profil-round{
	position: relative;
	width : 75px;
	height : 75px;
	overflow : hidden;
	border-radius : 75px;
	border : 3px solid #ffffff;
	box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.5);
    z-index: 1;
}

#page .new-list .list-recipient .user .profil-round img,
#page .one-list .list-recipient .user .profil-round img,
#page .one-list .list-author .user .profil-round img,
#custom-popup .new-relationship .content-element #ajax-new-relation .user .profil-round img{
	object-fit : cover;
	width : 75px;
	height : 75px;
    z-index: 0;
	
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}

/* Relationships & Relationships popup */

#custom-popup .content-element .padding-element,
#page .relationships .content-element .padding-element{
	height: 150px;
}

#custom-popup .content-element .padding-element .group-element,
#page .relationships .content-element .padding-element .group-element{
	white-space : nowrap;
	height: 135px;
	margin : 10px;
}

#page .relationships .content-element .padding-element .group-element .add-round{
	display : inline-block;
	background-color : #3498db;
    margin-right: 5px;
	position: relative;
	width : 92px;
	height : 109px;
	overflow : hidden;
	border-radius : 5px;
	border : 3px solid #ffffff;
	box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.25);
	cursor : pointer;
    z-index: 1;
	
	-webkit-transition : border-color ease-in-out .15s, background-color ease-in-out .15s;
	transition : border-color ease-in-out .15s, background-color ease-in-out .15s;
}

#page .relationships .content-element .padding-element .group-element .add-round img{
	position : absolute;
	height : 65px;
	width : 65px;
	top : 5px;
	left : 5px;
	
	border : 8px solid #44a8eb;
	background : #44a8eb;
	border-radius : 65px;
	
	-webkit-transform: scale(0.8);
	transform: scale(0.8);
	
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}

#page .relationships .content-element .padding-element .group-element .add-round span{
	position : absolute;
	width : 92px;
	bottom : 5px;
	text-align : center;
	color : #ffffff;
	font-size : 12px;
    font-weight : bold;
}

#custom-popup .content-element .padding-element .group-element .profil-round,
#page .relationships .content-element .padding-element .group-element .profil-round {
	display : inline-block;
	position: relative;
	margin-right : 5px;
	
    border-radius: 5px;
    background: #ffffff;
    border: 3px solid #ffffff;
    box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.25);
}

#page .relationships .content-element .padding-element .group-element .profil-round .deny{
	position : absolute;
	background-color : #e74c3c;
	border : 3px solid #ffffff;
	box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.5);
	padding : 4px;
	border-radius : 24px;
	cursor : pointer;
    left : auto;
	top : 0px;
	left : 0px;
	z-index : 2;
	
	-webkit-transform: rotate(0deg) scale(0.8);
	transform: rotate(0deg) scale(0.8);
	
	-webkit-transition : .3s ease-in-out, border-color ease-in-out .15s, background-color ease-in-out .15s;
	transition : .3s ease-in-out, border-color ease-in-out .15s, background-color ease-in-out .15s;
}

#page .relationships .content-element .padding-element .group-element .profil-round  .allow{
	position : absolute;
	background-color : #2ecc71;
	border : 3px solid #ffffff;
	box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.5);
	padding : 4px;
	border-radius : 24px;
	cursor : pointer;
	top : 0px;
	right : 0px;
	z-index : 2;
	
	-webkit-transform: rotate(0deg) scale(0.8);
	transform: rotate(0deg) scale(0.8);
	
	-webkit-transition : .3s ease-in-out, border-color ease-in-out .15s, background-color ease-in-out .15s;
	transition : .3s ease-in-out, border-color ease-in-out .15s, background-color ease-in-out .15s;
}

#page .relationships .content-element .padding-element .group-element .profil-round  .selected,
#custom-popup .relationships .content-element .padding-element .group-element .profil-round  .selected {
	position : absolute;
	background-color : #2ecc71;
	border : 3px solid #ffffff;
	box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.5);
	padding : 4px;
	border-radius : 24px;
	top : 0px;
	left : 0px;
	z-index : 2;
	
    opacity : 0;
	-webkit-transform: rotate(0deg) scale(0.8);
	transform: rotate(0deg) scale(0.8);
	
	-webkit-transition : .3s ease-in-out, border-color ease-in-out .15s, background-color ease-in-out .15s;
	transition : .3s ease-in-out, border-color ease-in-out .15s, background-color ease-in-out .15s;
}

#page .relationships .content-element .padding-element .group-element .profil-round.active  .selected,
#custom-popup .relationships .content-element .padding-element .group-element .profil-round.active  .selected {
    opacity : 1;
}

#page .relationships .content-element .padding-element .group-element .profil-round  .delete{
	position : absolute;
	background-color : #e74c3c;
	border : 3px solid #ffffff;
	box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.5);
	padding : 4px;
	border-radius : 24px;
	cursor : pointer;
	top : 0px;
	right : 0px;
	z-index : 2;
	
	opacity : 0;
	-webkit-transform: rotate(25deg) scale(0);
	transform: rotate(25deg) scale(0);
	
	-webkit-transition : .3s ease-in-out, border-color ease-in-out .15s, background-color ease-in-out .15s;
	transition : .3s ease-in-out, border-color ease-in-out .15s, background-color ease-in-out .15s;
}

#custom-popup .content-element .padding-element .group-element .profil-round .round,
#page .relationships .content-element .padding-element .group-element .profil-round .round{
	display : inline-block;
	position: relative;
	width : 94px;
	height : 94px;
	overflow : hidden;
	border-radius : 3px;
    z-index: 1;
}

#custom-popup .content-element .padding-element .group-element .profil-round .round img,
#page .relationships .content-element .padding-element .group-element .profil-round .round img{
	object-fit : cover;
	position : absolute;
	width : 94px;
	height : 94px;
    z-index: 0;
	
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}

#custom-popup .content-element .padding-element .group-element .profil-round .group-round,
#page .relationships .content-element .padding-element .group-element .profil-round .group-round{
	background-image : url(../imgs/header-background.jpg);
	background-position : center bottom;
    background-size: 500%;
	
	display : inline-block;
	position: relative;
	width : 94px;
	height : 94px;
	overflow : hidden;
	border-radius : 3px;
    z-index: 1;
}

#custom-popup .content-element .padding-element .group-element .profil-round .group-round img,
#page .relationships .content-element .padding-element .group-element .profil-round .group-round img{
	object-fit : cover;
	/*position : absolute;*/
	width : 47px;
	height : 47px;
    z-index: 0;
	
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}

#custom-popup .content-element .padding-element .group-element .profil-round .group-round .count,
#page .relationships .content-element .padding-element .group-element .profil-round .group-round .count{
	background : #3498db;
    float : right;
	width : 47px;
	height : 47px;
    z-index: 0;
	
	color : #ffffff;
	line-height : 47px;
	text-align : center;
	font-size : 14px;
    font-weight : bold;
	
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}

#custom-popup .content-element .padding-element .group-element .profil-round .ab-name,
#page .relationships .content-element .padding-element .group-element .profil-round .ab-name{
	width : 88px;
	text-align : center;
	font-size : 11px;
	color : #333333;
	cursor : default;
	padding : 3px 3px 3px 3px;
	
	white-space : nowrap;
	overflow : hidden;
	text-overflow : ellipsis;
}

/* My profil */

#page .my-profil > table{
	width : 100%;
}

#page .my-profil > table td:first-child{
	text-align : center;
	width : 322px;
}

#page .my-profil > table td:last-child{
	vertical-align : top;
}

#page .my-profil > table td:last-child .group-bloc{
	margin : 10px 30px 10px 0px;
    background : #e9e9e9;
    border : 1px solid #cccccc;
    border-radius : 3px;
}

#page .my-profil > table td:last-child .group-bloc .title{
    background-color : #dfdfdf;
    border-bottom : 1px solid #ffffff;
    padding-left : 15px;
}

#page .my-profil .content-element-left{
	display : inline-block;
    background-color : #e9e9e9;
	border-radius : 3px;
	border : 3px solid #ffffff;
	box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.25);
    padding : 10px 0px;
	width : 256px;
    
	-webkit-transition : .3s ease-in-out, border-color ease-in-out .15s, background-color ease-in-out .15s;
	transition : .3s ease-in-out, border-color ease-in-out .15s, background-color ease-in-out .15s;
}

#page .my-profil .content-element-left .profil-round{
	position: relative;
	width : 75px;
	height : 75px;
	overflow : hidden;
	border-radius : 75px;
	border : 3px solid #ffffff;
	box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.5);
    z-index: 1;
}

#page .my-profil .content-element-left .profil-round img {
    object-fit: cover;
    width: 75px;
    height: 75px;
    z-index: 0;
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
}



/*TO REMOVE*/
#page  #div-preview .share-round span{
	overflow : hidden;
	font-size : 17px;
}

/* ANIMATIONS */

/* Shared (common) */
#page .white-bloc:hover .delete-bloc,
#page .white-bloc:hover .modify-bloc,
#page .white-bloc .list-details:hover .modify,
#page .white-bloc .content-element:hover .buy,
#page .white-bloc .content-element:hover .delete,
#page .white-bloc .content-element:hover .modify,
#page .relationships .content-element .padding-element .group-element .profil-round:hover .delete,
#page .relationships .content-element .padding-element .group-element .profil-round:hover .modify{
    opacity : 1;
	-webkit-transform: rotate(0deg) scale(1);
	transform: rotate(0deg) scale(1);
}

#page .relationships .content-element .padding-element .group-element .profil-round:hover .selected,
#custom-popup .relationships .content-element .padding-element .group-element .profil-round:hover .selected{
	-webkit-transform: rotate(-10deg) scale(1);
	transform: rotate(-10deg) scale(1);
}

#page .white-bloc:hover .save-bloc:hover{
	background : #3edc81;
	border : 3px solid #3edc81;
}

#page .relationships .content-element .padding-element .group-element .profil-round:hover .deny:hover{
	background : #f75c4c;
	border : 3px solid #f75c4c;
}

#page .relationships .content-element .padding-element .group-element .profil-round:hover .allow:hover{
	background : #2ecc71;
	border : 3px solid #2ecc71;
}

#page .white-bloc:hover .delete-bloc:hover,
#page .white-bloc .content-element .delete:hover,
#page .one-list .title .delete:hover,
#page .relationships .content-element .padding-element .group-element .profil-round:hover .delete:hover{
	background : #f75c4c;
	border : 3px solid #f75c4c;
}

#page .white-bloc:hover .modify-bloc:hover,
#page .white-bloc .content-element .buy:hover,
#page .white-bloc .content-element .modify:hover,
#page .one-list .title .modify:hover,
#page .relationships .content-element .padding-element .group-element .profil-round:hover .modify:hover{
	background : #44a8eb;
	border : 3px solid #44a8eb;
}

#page .white-bloc .content-element:hover .element{
	box-shadow: 0px 0px 0px 3px #bbbbbb;
}

#page .white-bloc .content-element:hover .element img{
	-webkit-transform: rotate(5deg) scale(1.2);
	transform: rotate(5deg) scale(1.2);
}

#page .white-bloc .content-element .element::before{
	position: absolute;
	top: 0;
	left: -75%;
	z-index: 2;
	display: block;
	content: '';
	width: 50%;
	height: 100%;
	
	background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
	background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
	
	-webkit-transform: skewX(-25deg);
	transform: skewX(-25deg);
}

#page .white-bloc .content-element:hover .element::before{
	-webkit-animation: shine .75s;
	animation: shine .75s;
}

#page .white-bloc .content-element:hover .new img{
	-webkit-transform: rotate(5deg) scale(1);
	transform: rotate(5deg) scale(1);
}

#page .white-bloc .content-element .new:hover{
	background : #f68e32;
	border : 3px solid #f68e32;
}

/* Shared by me */

#page .shared-by-me .content-element .share-round:hover{
	background : #44a8eb;
	border : 3px solid #44a8eb;
}

#page .shared-by-me .content-element:hover .share-round span{
	opacity : 0;
}

#page .shared-by-me .content-element:hover .share-round img{
	opacity : 1;
	-webkit-transform: rotate(0deg) scale(1);
	transform: rotate(0deg) scale(1);
}

/* Shared with me */

#page .shared-with-me .content-element:hover .share-round img{
	-webkit-transform: rotate(-5deg) scale(1.2);
	transform: rotate(-5deg) scale(1.2);
}

/* One list & New list */

#page .one-list .content-element .share-round:hover,
#page .new-list .content-element .share-round:hover{
	background : #44a8eb;
	border : 3px solid #44a8eb;
}

#page .one-list .content-element:hover .share-round span,
#page .new-list .content-element:hover .share-round span{
	opacity : 0;
}

#page .one-list .content-element:hover .share-round img,
#page .new-list .content-element:hover .share-round img{
	opacity : 1;
	-webkit-transform: rotate(0deg) scale(1);
	transform: rotate(0deg) scale(1);
}

#page .shared-by-me .content-element.shared:hover .share-round,
#page .shared-with-me .content-element.shared:hover .share-round,
#page .one-list .content-element.buyed .share-round:hover,
#page .new-list .content-element.buyed .share-round:hover{
	border : 3px solid #ffffff;
}

#page .shared-by-me .content-element.shared:hover .share-round img,
#page .shared-with-me .content-element.shared:hover .share-round img,
#page .one-list .content-element.buyed:hover .share-round img,
#page .new-list .content-element.buyed:hover .share-round img{
	-webkit-transform: rotate(-5deg) scale(1.2);
	transform: rotate(-5deg) scale(1.2);
}

/* Relationships */

#page .relationships .content-element .title .delete:hover{
	background : #f75c4c;
	border : 3px solid #f75c4c;
}

#page .relationships .content-element .title .modify:hover{
	background : #44a8eb;
	border : 3px solid #44a8eb;
}

#page .relationships .content-element .padding-element .group-element .add-round:hover{
	background : #44a8eb;
	border : 3px solid #44a8eb;
}

#page .relationships .content-element .padding-element .group-element .add-round:hover img{
	-webkit-transform: rotate(-90deg) scale(1);
	transform: rotate(-90deg) scale(1);
}

#custom-popup .content-element .padding-element .group-element .profil-round .round:hover img,
#page .relationships .content-element .padding-element .group-element .profil-round .round:hover img,
#custom-popup .content-element .padding-element .group-element .profil-round .group-round:hover img,
#page .relationships .content-element .padding-element .group-element .profil-round .group-round:hover img,
#custom-popup .content-element .padding-element .group-element .profil-round .group-round:hover .count,
#page .relationships .content-element .padding-element .group-element .profil-round .group-round:hover .count{
	-webkit-transform: rotate(-5deg) scale(1.2);
	transform: rotate(-5deg) scale(1.2);
}

/* Relationships popup & List detail recipient */

#page .new-list .list-recipient:hover .user .profil-round img,
#page .one-list .list-recipient:hover .user .profil-round img,
#page .one-list .list-author:hover .user .profil-round img,
#custom-popup .new-relationship .content-element #ajax-new-relation:hover .profil-round img{
	-webkit-transform: rotate(-5deg) scale(1.2);
	transform: rotate(-5deg) scale(1.2);
}

/* New list */

#page #div-selector #div-result .round-preview:hover .element img{
	-webkit-transform: rotate(5deg) scale(1.2);
	transform: rotate(5deg) scale(1.2);
}

/* My profil */

#page .my-profil .content-element-left:hover{
	border-radius : 3px;
	border : 3px solid #e9e9e9;
}

#page .my-profil .content-element-left:hover .profil-round img{
	-webkit-transform: rotate(-5deg) scale(1.2);
	transform: rotate(-5deg) scale(1.2);
}