@charset "utf-8";


/*
  ==============================================================================================
  -------------------------|                                         |--------------------------
  -------------------------|              CSS CGLib 2019             |--------------------------
  -------------------------|               Iconographie              |--------------------------
  -------------------------|                                         |--------------------------
  ==============================================================================================
*/



/*======================================= Généralités ========================================*/

.icon {
	display: inline-block;
	position: relative;
	vertical-align: middle;
	overflow: hidden;
}
.icon.disabled {
	opacity: .4;
	 -webkit-filter: grayscale(100%);
		-moz-filter: grayscale(100%);
		 -ms-filter: grayscale(100%);
		  -o-filter: grayscale(100%);
			 filter: grayscale(100%);
			 filter: gray;
}



/*================================= Menu principal (50x50px) =================================*/

.icon.accueil, 
.icon.profil, 
.icon.annuaire, 
.icon.annonces, 
.icon.zapping, 
.icon.webcams, 
.icon.forums, 
.icon.courrier,
.icon.options {
	width: 50px;
	height: 50px;
}

.icon.accueil {
	background-position: 0 0;
}
.icon.profil {
	background-position: -50px 0;
}
.icon.annuaire {
	background-position: -100px 0;
}
.icon.annonces {
	background-position: -150px 0;
}
.icon.zapping {
	background-position: -200px 0;
}
.icon.webcams {
	background-position: 0 -100px;
}
.icon.forums {
	background-position: -250px 0;
}
.icon.courrier {
	background-position: -300px 0;
}
.icon.options {
	background-position: -350px 0;
}

.active .icon.accueil, 
.icon.primary.accueil {
	background-position: 0 -50px;
}
.active .icon.profil,
.icon.primary.profil {
	background-position: -50px -50px;
}
.active .icon.annuaire,
.icon.primary.annuaire {
	background-position: -100px -50px;
}
.active .icon.annonces,
.icon.primary.annonces {
	background-position: -150px -50px;
}
.active .icon.zapping,
.icon.primary.zapping {
	background-position: -200px -50px;
}
.active .icon.webcams,
.icon.primary.webcams {
	background-position: 0 -150px;
}
.active .icon.forums,
.icon.primary.forums {
	background-position: -250px -50px;
}
.active .icon.courrier,
.icon.primary.courrier {
	background-position: -300px -50px;
}
.active .icon.options,
.icon.primary.options {
	background-position: -350px -50px;
}



/*================================== Modale Promo (50x50px) ==================================*/

.icon.promo-dial, 
.icon.promo-webcam, 
.icon.promo-courrier, 
.icon.promo-reserved,
.icon.promo-photos, 
.icon.promo-annuaire, 
.icon.promo-conseils,
.icon.promo-astuce {
	width: 50px;
	height: 50px;
}

.icon.promo-dial {
	background-position: -50px -100px;
}
.icon.promo-webcam {
	background-position: -100px -100px;
}
.icon.promo-courrier {
	background-position: -150px -100px;
}
.icon.promo-reserved {
	background-position: -200px -100px;
}
.icon.promo-photos {
	background-position: -50px -150px;
}
.icon.promo-annuaire {
	background-position: -100px -150px;
}
.icon.promo-conseils {
	background-position: -150px -150px;
}
.icon.promo-astuce {
	background-position: -200px -150px;
}



/*============================ En attente de validation (50x50px) ============================*/

.icon.pending-photo, 
.icon.pending-video {
	width: 50px;
	height: 50px;
}

.icon.pending-photo {
	background-position: -250px -100px
}
.icon.pending-video {
	background-position: -250px -150px
}



/*================================= Menu secondaire (40x40px) ================================*/

.icon.parametres, 
.icon.aide, 
.icon.deconnexion,
.icon.sonmain {
	width: 40px;
	height: 40px;
}

.icon.parametres {
	background-position: 0 -200px;
}
.icon.aide {
	background-position: -40px -200px;
}
.icon.deconnexion {
	background-position: -80px -200px;
}
.icon.sonmain {
	background-position: -120px -200px;
}
.icon.sonmain.off {
	background-position: -160px -200px;
}



/*================================= Notifications (40x40px) ==================================*/

.icon.notif-dials, 
.icon.notif-courriers, 
.icon.notif-contacts {
	width: 40px;
	height: 40px;
}

.icon.notif-dials {
	background-position: -200px -200px;
}
.icon.notif-courriers {
	background-position: -240px -200px;
}
.icon.notif-contacts {
	background-position: -280px -200px;
}



/*==================================== Webcams (40x40px) =====================================*/

.icon.play, 
.icon.webcam {
	width: 40px;
	height: 40px;
}

.icon.play {
	background-position: -320px -200px;
}
.icon.webcam {
	background-position: -360px -200px;
}



/*================================== Menu mobile (40x40px) ===================================*/

.icon.menu, 
.icon.vuecompacte,
.icon.vuephotos {
	width: 40px;
	height: 40px;
}

.icon.menu {
	background-position: 0 -240px;
}
.icon.vuecompacte {
	background-position: -40px -240px;
}
.icon.vuephotos {
	background-position: -80px -240px;
}



/*=================================== Validation (40x40px) ===================================*/
 
.icon.valid-round, 
.icon.error-round,
.icon.valid, 
.icon.error {
	width: 40px;
	height: 40px;
}

.icon.valid-round {
	background-position: -120px -240px;
}
.icon.error-round {
	background-position: -160px -240px;
}
.icon.valid {
	background-position: -200px -240px;
}
.icon.error {
	background-position: -240px -240px;
}



/*==================================== Fiche (1) (40x40px) ===================================*/

.icon.user-add, 
.icon.user-added {
	width: 40px;
	height: 40px;
}

.icon.user-add {
	background-position: -280px -240px;
}
.icon.user-added {
	background-position: -320px -240px;
}



/*====================================== Profil(40x40px) =====================================*/

.icon.profil-profil, 
.icon.profil-photos, 
.icon.profil-webcam, 
.icon.profil-videos, 
.icon.profil-contacts, 
.icon.profil-bloques, 
.icon.profil-forfait, 
.icon.profil-identification, 
.icon.profil-notifications, 
.icon.profil-donnees,
.icon.profil-plus {
	width: 40px;
	height: 40px;
}

.icon.profil-profil {
	background-position: 0 -280px;
}
.icon.profil-photos {
	background-position: -40px -280px;
}
.icon.profil-webcam {
	background-position: -80px -280px;
}
.icon.profil-videos {
	background-position: -120px -280px;
}
.icon.profil-contacts {
	background-position: -160px -280px;
}
.icon.profil-bloques {
	background-position: -200px -280px;
}
.icon.profil-forfait {
	background-position: -240px -280px;
}
.icon.profil-identification {
	background-position: -280px -280px;
}
.icon.profil-notifications {
	background-position: -320px -280px;
}
.icon.profil-donnees {
	background-position: -360px -280px;
}
.icon.profil-plus {
	background-position: 0 -360px;
}

.icon.profil-profil.black {
	background-position: 0 -320px;
}
.icon.profil-photos.black {
	background-position: -40px -320px;
}
.icon.profil-webcam.black {
	background-position: -80px -320px;
}
.icon.profil-videos.black {
	background-position: -120px -320px;
}
.icon.profil-contacts.black {
	background-position: -160px -320px;
}
.icon.profil-bloques.black {
	background-position: -200px -320px;
}
.icon.profil-forfait.black {
	background-position: -240px -320px;
}
.icon.profil-identification.black {
	background-position: -280px -320px;
}
.icon.profil-notifications.black {
	background-position: -320px -320px;
}
.icon.profil-donnees.black {
	background-position: -360px -320px;
}
.icon.profil-plus.black {
	background-position: 0 -400px;
}



/*==================================== Messagerie(40x40px) ===================================*/

.icon.courrier-reception, 
.icon.courrier-envoyes, 
.icon.courrier-corbeille {
	width: 40px;
	height: 40px;
}

.icon.courrier-reception {
	background-position: -40px -360px;
}
.icon.courrier-envoyes {
	background-position: -80px -360px;
}
.icon.courrier-corbeille {
	background-position: -120px -360px;
}

.icon.courrier-reception.black {
	background-position: -40px -400px;
}
.icon.courrier-envoyes.black {
	background-position: -80px -400px;
}
.icon.courrier-corbeille.black {
	background-position: -120px -400px;
}



/*================================ Best / Good / Bad (40x40px) ===============================*/

.icon.best, 
.icon.good, 
.icon.bad {
	width: 40px;
	height: 40px;
}

.icon.best {
	background-position: -160px -360px;
}
.icon.good {
	background-position: -200px -360px;
}
.icon.bad {
	background-position: -240px -360px;
}

.icon.best.black {
	background-position: -160px -400px;
}
.icon.good.black {
	background-position: -200px -400px;
}
.icon.bad.black {
	background-position: -240px -400px;
}



/*==================================== Fiche (2) (40x40px) ===================================*/

.icon.unblock, 
.icon.admin, 
.icon.note {
	width: 40px;
	height: 40px;
}

.icon.unblock {
	background-position: -280px -360px;
}
.icon.admin {
	background-position: -320px -360px;
}
.icon.note {
	background-position: -360px -360px;
}

.icon.unblock.black {
	background-position: -280px -400px;
}
.icon.admin.black {
	background-position: -320px -400px;
}
.icon.note.black {
	background-position: -360px -400px;
}



/*===================================== Upload (40x40px) =====================================*/

.icon.upload {
	width: 40px;
	height: 40px;
}

.icon.upload {
	background-position: 0 -440px;
}

.icon.upload.black {
	background-position: 0 -480px;
}



/*================================= Pivoter mobile (40x40px) =================================*/

.icon.rotate-device {
	width: 40px;
	height: 40px;
}

.icon.rotate-device {
	background-position: -40px -440px;
}

.icon.rotate-device.black {
	background-position: -40px -480px;
}



/*===================================== Sexy (40x40px) =======================================*/

.icon.sexy {
	width: 40px;
	height: 40px;
}

.icon.sexy {
	background-position: -80px -440px;
}

.icon.sexy.black {
	background-position: -80px -480px;
}



/*================================== Filtres dial (30x30px) ==================================*/

.icon.dialfilter-zone, 
.icon.dialfilter-genre,
.icon.dialfilter-plus {
	width: 30px;
	height: 30px;
}

.icon.dialfilter-zone {
	background-position: 0 -520px;
}
.icon.dialfilter-genre {
	background-position: -30px -520px;
}
.icon.dialfilter-plus {
	background-position: -60px -520px;
}

.icon.dialfilter-zone.black {
	background-position: 0 -550px;
}
.icon.dialfilter-genre.black {
	background-position: -30px -550px;
}
.icon.dialfilter-plus.black {
	background-position: -60px -550px;
}



/*==================================== Flèches (30x30px) =====================================*/

.icon.arrow-left, 
.icon.arrow-top,
.icon.arrow-right,
.icon.arrow-bottom {
	width: 30px;
	height: 30px;
}

.icon.arrow-left {
	background-position: -90px -520px;
}
.icon.arrow-top {
	background-position: -120px -520px;
}
.icon.arrow-right {
	background-position: -150px -520px;
}
.icon.arrow-bottom {
	background-position: -180px -520px;
}

.icon.arrow-left.black {
	background-position: -90px -550px;
}
.icon.arrow-top.black {
	background-position: -120px -550px;
}
.icon.arrow-right.black {
	background-position: -150px -550px;
}
.icon.arrow-bottom.black {
	background-position: -180px -550px;
}



/*================================= Check / croix (30x30px) ==================================*/

.icon.check,
.icon.remove {
	width: 30px;
	height: 30px;
}

.icon.check {
	background-position: -210px -520px;
}
.icon.remove {
	background-position: -240px -520px;
}

.icon.check.black {
	background-position: -210px -550px;
}
.icon.remove.black {
	background-position: -240px -550px;
}



/*====================================== Dock (30x30px) ======================================*/

.icon.dock-left, 
.icon.dock-top,
.icon.dock-right,
.icon.dock-bottom {
	width: 30px;
	height: 30px;
}

.icon.dock-left {
	background-position: -270px -520px;
}
.icon.dock-top {
	background-position: -300px -520px;
}
.icon.dock-right {
	background-position: -330px -520px;
}
.icon.dock-bottom {
	background-position: -360px -520px;
}

.icon.dock-left.black {
	background-position: -270px -550px;
}
.icon.dock-top.black {
	background-position: -300px -550px;
}
.icon.dock-right.black {
	background-position: -330px -550px;
}
.icon.dock-bottom.black {
	background-position: -360px -550px;
}



/*====================================== +/- (30x30px) =======================================*/

.icon.more, 
.icon.less,
.icon.more-bg, 
.icon.less-bg {
	width: 30px;
	height: 30px;
}

.icon.more {
	background-position: 0 -580px;
}
.icon.less {
	background-position: -30px -580px;
}
.icon.more-bg {
	background-position: -60px -580px;
}
.icon.less-bg {
	background-position: -90px -580px;
}

.icon.more.black {
	background-position: 0 -610px;
}
.icon.less.black {
	background-position: -30px -610px;
}
.icon.more-bg.black {
	background-position: -60px -610px;
}
.icon.less-bg.black {
	background-position: -90px -610px;
}



/*===================================== Image (30x30px) ======================================*/

.icon.image {
	width: 30px;
	height: 30px;
}

.icon.image {
	background-position: -120px -580px;
}

.icon.image.black {
	background-position: -120px -610px;
}



/*====================================== Info (30x30px) ======================================*/

.icon.info {
	width: 30px;
	height: 30px;
}

.icon.info {
	background-position: -150px -580px;
}

.icon.info.color {
	background-position: -150px -610px;
}



/*============================ Dial / Courrier / Visite (30x30px) ============================*/

.icon.godial,
.icon.gocourrier,
.icon.visite {
	width: 30px;
	height: 30px;
}

.icon.godial {
	background-position: -180px -580px;
}
.icon.godial.color {
	background-position: -180px -610px;
}

.icon.gocourrier {
	background-position: -210px -580px;
}
.icon.gocourrier.color {
	background-position: -210px -610px;
}

.icon.visite {
	background-position: -240px -580px;
}
.icon.visite.color {
	background-position: -240px -610px;
}



/*====================================== Lock (30x30px) ======================================*/

.icon.lock, 
.icon.unlock {
	width: 30px;
	height: 30px;
}

.icon.lock {
	background-position: -270px -580px;
}
.icon.unlock {
	background-position: -270px -610px;
}



/*================================== Flèche angle (30x30px) ==================================*/

.icon.arrow-angle {
	width: 30px;
	height: 30px;
}

.icon.arrow-angle {
	background-position: -300px -580px;
}
.icon.arrow-angle.black {
	background-position: -300px -610px;
}



/*===================================== Warning (30x30px) ====================================*/

.icon.warning {
	width: 30px;
	height: 30px;
}

.icon.warning {
	background-position: -330px -580px;
}
.icon.warning.color {
	background-position: -330px -610px;
}



/*=============================== Bulle / Push / SMS(30x30px) ===============================*/

.icon.notif-bulle,
.icon.notif-push,
.icon.notif-sms {
	width: 30px;
	height: 30px;
}

.icon.notif-bulle {
	background-position: -360px -580px;
}
.icon.notif-bulle.black {
	background-position: -360px -610px;
}

.icon.notif-push {
	background-position: 0 -640px;
}
.icon.notif-push.black {
	background-position: 0 -670px;
}

.icon.notif-sms {
	background-position: -30px -640px;
}
.icon.notif-sms.black {
	background-position: -30px -670px;
}



/*==================================== Fiche (3) (30x30px) ===================================*/

.icon.edit,
.icon.webcamreq,
.icon.webcamok,
.icon.webcamnok {
	width: 30px;
	height: 30px;
}

.icon.edit {
	background-position: -60px -640px;
}
.icon.edit.black {
	background-position: -60px -670px;
}
.icon.webcamreq {
	background-position: -90px -640px;
}
.icon.webcamreq.black {
	background-position: -90px -670px;
}
.icon.webcamok {
	background-position: -120px -640px;
}
.icon.webcamok.black {
	background-position: -120px -670px;
}
.icon.webcamnok {
	background-position: -150px -640px;
}
.icon.webcamnok.black {
	background-position: -150px -670px;
}



/*======================================= Son (30x30px) ======================================*/

.icon.son {
	width: 30px;
	height: 30px;
}

.icon.son {
	background-position: -180px -640px;
}
.icon.son.black {
	background-position: -180px -670px;
}



/*================================== Courrier (2) (30x30px) ==================================*/

.icon.read {
	width: 30px;
	height: 30px;
}

.icon.read {
	background-position: -210px -640px;
}
.icon.read.color {
	background-position: -210px -670px;
}



/*================================== Actions dial (30x30px) ==================================*/

.icon.send {
	width: 30px;
	height: 30px;
}

.icon.send {
	background-position: -240px -640px;
}
.icon.send.black {
	background-position: -240px -670px;
}



/*=============================== Plus/moins d'info (30x30px) ================================*/

.icon.moreinfo,
.icon.lessinfo {
	width: 30px;
	height: 30px;
}

.icon.moreinfo {
	background-position: -270px -640px;
}
.icon.moreinfo.color {
	background-position: -270px -670px;
}
.icon.lessinfo {
	background-position: -300px -640px;
}
.icon.lessinfo.color {
	background-position: -300px -670px;
}



/*============================== Maximiser/minimiser (30x30px) ===============================*/

.icon.maximize,
.icon.minimize {
	width: 30px;
	height: 30px;
}

.icon.maximize {
	background-position: -330px -640px;
}
.icon.maximize.black {
	background-position: -330px -670px;
}
.icon.minimize {
	background-position: -360px -640px;
}
.icon.minimize.black {
	background-position: -360px -670px;
}



/*==================================== Avatars (21x21px) =====================================*/

.icon.neutral,
.icon.femme,
.icon.homme,
.icon.couple {
	width: 21px;
	height: 21px;
	border-radius: 50% !important;
}
.icon.femme {
	background-position: 0 -700px;
}
.icon.homme {
	background-position: -21px -700px;
}
.icon.couple {
	background-position: -42px -700px;
}


/*------------------ Icône en médaillon "white" (21x21px) -----------------*/

.icon.neutral.white,
.icon.femme.white,
.icon.homme.white {
	background-position: 16.6% 99.95%;
}
.icon.couple.white {
	background: none;
}
.icon.neutral.white {
	background-color: #e6e6e6;
}
.icon.femme.white {
	background-color: #f35f9a;
}
.icon.homme.white {
	background-color: #87d5f9;
}
.icon.couple.white::before,
.icon.couple.white::after {
	display: block;
	position: absolute;
	content: '';
}
.icon.couple.white::before {
	width: 100%;
	height: 100%;
	background: #c189ff;
	background: -moz-radial-gradient(bottom left, ellipse cover, #f35f9a 0%, #87d5f9 75%);
	background: -webkit-radial-gradient(bottom left, ellipse cover, #f35f9a 0%, #87d5f9 75%);
	background: radial-gradient(ellipse at bottom left, #f35f9a 0%, #87d5f9 75%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f35f9a', endColorstr='#87d5f9', GradientType=1);
}
.icon.couple.white::after {
	width: 100%;
	height: 100%;
	background-position: 22.2% 99.95%;
}


/*----------------- Icône en médaillon "white" (180x180px) ----------------*/

.icon.neutral.white.s180,
.icon.femme.white.s180,
.icon.homme.white.s180,
.icon.couple.white.s180,
.icon.neutral.white.s180::after,
.icon.femme.white.s180::after,
.icon.homme.white.s180::after,
.icon.couple.white.s180::after {
	width: 180px;
	height: 180px;
	background-size: 3438px auto;
}


/*----------------- Icône en médaillon "white" (140x140px) ----------------*/

.icon.neutral.white.s140,
.icon.femme.white.s140,
.icon.homme.white.s140,
.icon.couple.white.s140,
.icon.neutral.white.s140::after,
.icon.femme.white.s140::after,
.icon.homme.white.s140::after,
.icon.couple.white.s140::after {
	width: 140px;
	height: 140px;
	background-size: 2674px auto;
}


/*----------------- Icône en médaillon "white" (120x120px) ----------------*/

.icon.neutral.white.s120,
.icon.femme.white.s120,
.icon.homme.white.s120,
.icon.couple.white.s120,
.icon.neutral.white.s120::after,
.icon.femme.white.s120::after,
.icon.homme.white.s120::after,
.icon.couple.white.s120::after {
	width: 120px;
	height: 120px;
	background-size: 2292px auto;
}


/*----------------- Icône en médaillon "white" (100x100px) ----------------*/

.icon.neutral.white.s100,
.icon.femme.white.s100,
.icon.homme.white.s100,
.icon.couple.white.s100,
.icon.neutral.white.s100::after,
.icon.femme.white.s100::after,
.icon.homme.white.s100::after,
.icon.couple.white.s100::after {
	width: 100px;
	height: 100px;
	background-size: 1910px auto;
}


/*------------------ Icône en médaillon "white" (80x80px) -----------------*/

.icon.neutral.white.s80,
.icon.femme.white.s80,
.icon.homme.white.s80,
.icon.couple.white.s80,
.icon.neutral.white.s80::after,
.icon.femme.white.s80::after,
.icon.homme.white.s80::after,
.icon.couple.white.s80::after {
	width: 80px;
	height: 80px;
	background-size: 1528px auto;
}


/*------------------ Icône en médaillon "white" (64x64px) -----------------*/

.icon.neutral.white.s64,
.icon.femme.white.s64,
.icon.homme.white.s64,
.icon.couple.white.s64,
.icon.neutral.white.s64::after,
.icon.femme.white.s64::after,
.icon.homme.white.s64::after,
.icon.couple.white.s64::after {
	width: 64px;
	height: 64px;
	background-size: 1219px auto;
}


/*------------------ Icône en médaillon "white" (54x54px) -----------------*/

.icon.neutral.white.s54,
.icon.femme.white.s54,
.icon.homme.white.s54,
.icon.couple.white.s54,
.icon.neutral.white.s54::after,
.icon.femme.white.s54::after,
.icon.homme.white.s54::after,
.icon.couple.white.s54::after {
	width: 54px;
	height: 54px;
	background-size: 1028px auto;
}


/*------------------ Icône en médaillon "white" (40x40px) -----------------*/

.icon.neutral.white.s40,
.icon.femme.white.s40,
.icon.homme.white.s40,
.icon.couple.white.s40,
.icon.neutral.white.s40::after,
.icon.femme.white.s40::after,
.icon.homme.white.s40::after,
.icon.couple.white.s40::after {
	width: 40px;
	height: 40px;
	background-size: 762px auto;
}


/*------------------ Icône en médaillon "white" (30x30px) -----------------*/

.icon.neutral.white.s30,
.icon.femme.white.s30,
.icon.homme.white.s30,
.icon.couple.white.s30,
.icon.neutral.white.s30::after,
.icon.femme.white.s30::after,
.icon.homme.white.s30::after,
.icon.couple.white.s30::after {
	width: 30px;
	height: 30px;
	background-size: 573px auto;
}



/*================================= Check primary (21x21px) ==================================*/

.icon.check.primary {
	width: 21px;
	height: 21px;
	background-position: -105px -700px;
}