/* ride utilisateur : recherche */
#rideSearch{
	display: flex;
	position: sticky;
	top: 50px;
}
#rideFindInput{
	width: calc(100% - 100px);
	padding: 0.4em 0.6em;
	font-size: 0.9em;
	background-color: #fff;
	border: 1px solid #aaa;
	border-top-left-radius: 5px;
	border-bottom-left-radius: 5px;
	text-align: center;
}
#rideSearch #rideFindOptionToggle, #rideFindReset{
	flex: 0 0 50px;
	height: 33px;
	margin: 0;
	border: 0;
	border-top-right-radius: 5px;
	border-bottom-right-radius: 5px;
	background-color: #aaa;
	background-image: url(../img/picto/more-W@50.png);
	background-position: center;
	background-size: 20px;
	background-repeat: no-repeat;
	font-size: 0;
	cursor: pointer;
}
#rideSearch #rideFindOptionToggle.on{
	background-color: var(--colorContraste);
}
#rideFindReset{
	opacity: 0;
	position: absolute;
	top: 10px;
	left: 20px;
	width: 25px;
	height: 25px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background-image: url(../img/picto/close-W@50.png);
	background-size: 15px;
}
#rideFindReset.on{
	opacity: 1;
}
#rideFindOption{
	display: none;
	flex: 0 0 100%;
	padding: 10px;
	font-size: 0.9em;
}
#rideFindOption.open{
	display: block;
}
#rideFindGroup ul{
	display: flex;
	flex-wrap: wrap;
}
#rideFindGroup li{
	list-style: none;
}
#rideFindGroup input[type=radio]{
	display: none;
}
#rideFindGroup label{
	display: inline;
	width: auto;
	float: none;
	margin: 0;
	text-align: center;
}
#rideFindGroup span{
	display: inline-block;
	margin: 0 10px 6px;
	padding: 4px 8px;
	background-color: #ccc;
	border-radius: 3px;
	cursor: pointer;
}
#rideFindGroup input[type=radio] + span:hover{
	background-color: #bbb;
}
#rideFindGroup input[type=radio]:checked + span{
	background-color: var(--colorContraste);
	color: #fff;
}

/* ride utilisateur : liste */
#rideLstWarp{
	max-height: calc(100vh - 140px);
	overflow-y: auto;
	text-align: center;
}
#rideLst{
	margin: 0 auto;
}
#rideLstEmpty{
	margin-top: 20px;
	padding: 170px 0 20px;
	background-image: url(../img/image-noFriend@400.png);
	background-position: top center;
	background-repeat: no-repeat;
	background-size: 150px;
	font-size: 1.5em;
	text-align: center;
}
#rideLst .ride{
	list-style: none;
	width: 100%;
}
#rideLst .ride a{
	position: relative;
	display: block;
	margin: 10px 10px 0 10px;
	border: none;
	border-radius: 3px;
	transition: background-color 0.25s ease-in, box-shadow 0.25s ease-in, transform 0.25s ease-in;
	-webkit-transition: background-color 0.25s ease-in, box-shadow 0.25s ease-in, transform 0.25s ease-in;
}
#rideLst .ride a:hover{
	background-color: #fff;
	box-shadow: 0 0 2px var(--colorContraste);
}
#rideLst .ride.error a{
	box-shadow: 0 0 3px #fb0007;
}
#rideLst .ride .rideImg{
	width: 100%;
	height: 120px;
}
#rideLst .ride img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 3px;
}
#rideLst .ride .rideInfo{
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	background-color: rgba(0, 0, 0, 0.35);
	color: #fff;
	text-align: center;
}
.rideInfo h2{
	padding: 5px 0;
	font-size: 1em;
}
.rideInfo p{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}
.rideInfo p span{
	flex: 1;
	list-style: none;
	font-size: 0.8em;
}
#rideLst .ride input{
	border: none;
	background-color: transparent;
	cursor: pointer;
}
#rideLst .ride input.rideDeleteYes, #rideLst .ride input.rideDeleteNo{
	background-color: #fff;
}
#rideLst .ride input, .rideDate, .rideCity, .rideDistance, .rideDenivUp, .rideLike, .rideLikeTotal, .rideCom, .rideComTotal{
	background-repeat: no-repeat;
	background-size: 20px;
}
.rideLike, .rideLikeTotal, .rideCom, .rideComTotal{
	display: flex;
	align-items: center;
}
.rideDateDay, .rideDenivUp, .rideCity, .rideDate{
	display: none;
}
#rideLoadBt{
	margin: 10px 0;
}
#rideLst .ride .rideLike, #rideLst .ride .rideLikeTotal, #rideLst .ride .rideCom, #rideLst .ride .rideComTotal{
	flex: 0 1;
	background-position: 5px center;
}
#rideLst .ride .rideLike, #rideLst .ride .rideLikeTotal{
	background-image: url(../img/picto/like-W@100.png);
}
#rideLst .ride .rideCom, #rideLst .ride .rideComTotal{
	background-image: url(../img/picto/com-W@100.png);
}
#rideLst .ride .rideLike{
	background-position: center;
}
#rideLst .ride .rideLikeTotal, #rideLst .ride .rideComTotal{
	height: 40px;
	padding: 0 5px 0 35px;
}
#rideLst .ride .rideComTotal{
	margin-left: 20px;
}
#rideLst .ride .rideLike{
	flex: 0 0 40px;
	height: 40px;
	font-size: 0;
}
#rideLst .ride .rideOptionsToggle, #ride .rideOptionsToggle{
	flex: 0 0 40px;
	height: 40px;
	padding: 0;
	background-image: url(../img/picto/more-W@50.png);
	background-position: center;
	font-size: 0;
	outline: none;
}
.rideOptions{
	position: absolute;
	right: 0;
	z-index: 1000;
	display: flex;
	flex-direction: column;
	opacity: 0;
	visibility: hidden;
	background-color: #fff;
	border: 1px solid #ddd;
	box-shadow: 0 0 6px #ccc;
	transition: opacity 0.15s ease-in, visibility 0s linear 0.15s;
	-webkit-transition: opacity 0.15s ease-in, visibility 0s linear 0.15s;
}
.rideOptions input{
	display: block;
	flex: 0 0 40px;
	width: 100%;
	padding: 0 50px 0 20px;
	background-position: right 10px center;
	border-bottom: 1px solid #ddd;
	text-align: right;
	font-size: 0.9em;
	color: #222;
	transition: color 0.2s ease-in;
	-webkit-transition: color 0.2s ease-in;
}
#rideLst .ride input:last-child{
	border-bottom: none;
}
#rideLst .ride .rideImgEdit{
	background-image: url(../img/userHome/camera-B@100.png);
}
#rideLst .ride .rideImgEdit:hover{
	color: var(--colorContraste);
}
#rideLst .ride .rideEdit{
	background-image: url(../img/picto/edit-B@100.png);
}
#rideLst .ride .rideEdit:hover{
	color: var(--colorContraste);
}
#rideLst .ride .rideDelete{
	background-image: url(../img/picto/del-B@100.png);
}
#rideLst .ride .rideDelete:hover{
	color: #fb0007;
}
#rideLst .ride .rideDownload{
	background-image: url(../img/picto/ride-download-B@100.png);
}
#rideLst .ride .rideDownload:hover{
	color: #8A435F;
}
#rideLst .ride .rideShare{
	background-image: url(../img/picto/share-B@50.png);
}
#rideLst .ride .rideShare:hover{
	color: var(--colorContraste);
}
#rideLst .ride .rideLike.full{
	background-image: url(../img/picto/like-full-W@100.png);
}

/* liste des segments */
#rideSegments{
	position: fixed;
	z-index: 1000;
	top: 50px;
	right: 5px;
	max-height: calc(100vh - 180px);
	overflow-y: auto;
}
#rideSegments li{
	display: flex;
	padding: 8px;
	margin-top: 5px;
	background: #000;
	background-color: rgba(0, 0, 0, 0.75);
	border-radius: 3px;
	color: #fff;
	font-size: 0.9em;
	list-style: none;
}
#rideSegments li span, #rideSegments li input[type=button]{
	margin-left: 19px;
	background-repeat: no-repeat;
	background-size: 20px;
}
#rideSegments li span{
	padding-left: 20px;
	background-position: left center;
}
#rideSegments li span:first-child{
	height: 16px;
	width: 16px;
	margin: 0;
	padding: 0;
	border-radius: 50%;
}
#rideSegments li span.d1{
	background-image: url(../img/picto/ride-deniv-W@100.png);
}
#rideSegments li span.d2{
	background-image: url(../img/picto/ride-deniv-down-W@100.png);
}
#rideSegments li span.dist{
	background-image: url(../img/picto/ride-distance-W@100.png);
}
#rideSegments li input[type=button]{
	width: 20px;
	height: 20px;
	margin-left: 20px;
	background-color: transparent;
	background-image: url(../img/picto/close-W@50.png);
	background-position: center;
	border: 0;
	font-size: 0;
}

/* ajout d'une sortie ou photo */
#rideUploadManager{
	opacity: 0;
	visibility: hidden;
	position: absolute;
	top: 50%;
	left: 50%;
	width: 90%;
	transform: translate(-150%, -50%);
	-webkit-transform: translate(-150%, -50%);
	transition: transform .3s ease-in, opacity .3s ease-in, visibility 0s linear .3s;
	-webkit-transition: transform .3s ease-in, opacity .3s ease-in, visibility 0s linear .3s;
}
#rideUploadManager.open{
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	transition: transform .3s ease-in, opacity .3s ease-in, visibility 0s;
	-webkit-transition: transform .3s ease-in, opacity .3s ease-in, visibility 0s;
}
#imgUpload{
	margin: 60px auto;
}
#rideUploadManager nav ul, #imgUpload nav ul{
	display: flex;
	justify-content: flex-end;
}
#rideUploadManager nav ul li, #imgUpload nav ul li{
	flex: 0 0 60px;
	height: 40px;
	margin-right: 10px;
	list-style: none;
	background-position: center;
	background-repeat: no-repeat;
	background-size: 25px;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	font-size: 0;
	cursor: pointer;
}
#rideUploadManager nav ul li.on, #imgUpload nav ul li.on{
	background-color: #fcfcfc;
}
#rideUploadManager #fileUpload{
	background-image: url(../img/picto/file-gpx-B@50.png);
}
#rideUploadManager #manualUpload{
	background-image: url(../img/picto/write-B@50.png);
}
#rideUploadManager #stravaUpload{
	background-image: url(../img/social/strava-B@50.png);
}
#imgUpload #uploaderHome{
	background-image: url(../img/userHome/camera-B@50.png);
}
#imgUpload #uploaderinstagram{
	background-image: url(../img/social/instagram@50.png);
}
#imgUpload #uploadergoogle{
	background-image: url(../img/social/google-photos@50.png);
}
#imgUpload #rideImgLst{
	background-color: #fcfcfc;
}
#imgUpload #rideImgLst h1{
	font-size: 1.2em;
	text-align: left;
}
#rideUploadManager > div, #imgUpload > div{
	overflow-y: auto;
	max-height: calc(100vh - 150px);
	padding: 30px;
	background-color: #fcfcfc;
	border-radius: 5px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}
#imgUpload > div{
	padding: 0;
}
#rideUploadManager > div:last-child, #imgUpload > div:last-child{
	padding: 20px 30px;
}
#rideUploadManager h1, #rideUploadManager h2, #imgUpload h1, #imgUpload h2{
	font-size: 1.1em;
	margin-bottom: 20px;
}
#rideUploadManager h3, #imgUpload h3{
	font-size: 0.9em;
	margin-top: 20px;
}
#rideUploadManager form{
	text-align: left;
}
#rideManualAddBt, #rideUploadAddBt{
	margin-top: 20px;
	color: #aaa;
	font-size: 0.8em;
	text-align: center;
	cursor: pointer;
	transition: color 0.2s ease-in;
	-webkit-transition: color 0.2s ease-in;
}
#rideManualAddBt:hover, #rideUploadAddBt:hover{
	color: var(--colorContraste);
}
.rideManualDuration select{
	width: auto;
}
#rideUploadManager .optionShow, #rideUploadManager .optionHide{
	position: relative;
	padding-left: 30px;
	cursor: pointer;
}
#manualUploader .optionShow:before, #manualUploader .optionHide:before{
	display: block;
	position: absolute;
	left: 0;
	width: 18px;
	height: 18px;
	margin: 0;
	padding: 0;
	content: "-";
	border: 1px solid #999;
	text-align: center;
	line-height: 20px;
}
#manualUploader .optionHide:before{
	content: "+";
}
#manualUploaderOptions{
	padding: 10px 5px;
	background-color: #f7f7f7;
}

/* bouton d'envoi */
.rideUploadChoose{
	position: relative;
	overflow: hidden;
}
#rideUploadFileTitle{
	display: block;
	margin: 2px 0;
	padding: 20px 0;
	width: 98% !important;
	border: 1px solid #aaa;
	line-height: 1.6em;
	text-align: center;
	transition: background-color 0.2s ease-in, color 0.2s ease-in, border-color 0.2s ease-in;
	-webkit-transition: background-color 0.2s ease-in, color 0.2s ease-in, border-color 0.2s ease-in;
}
.rideUploadChoose:hover #rideUploadFileTitle{
	border-color: var(--colorContraste);
}
#rideUploadFileTitle{
	height:	90%;
}

/* affichage d'un ride */
#ride{
	display: flex;
	flex-direction: column;
	/*height: 100vh;
	max-height: 100vh;*/
	overflow: hidden;
	top: 50px;
	left: 0;
	right: 0;
	bottom: 0;
	position: absolute;
}
#ride.ridePrivate h1{
	margin-top: 10vh;
	height: 80vh;
	background-image: url(../img/image-ride-prive.jpg);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	font-size: 0;
}
#ride #rideMap{
	flex: 1;
}
#ride.open #rideMap{
	flex: 0 0 50vh;
}

/* control leaflet */
#ride #rideMap .leaflet-popup-content p{
	display: flex;
	margin: 0.4em 0;
}
#ride #rideMap .leaflet-popup-content p span{
	flex: 2;
}
#ride #rideMap .leaflet-popup-content p span:last-child{
	flex: 1;
	font-weight: bold;
}
.leaflet-control-layers-base label{
	display: block;
	float: none;
	width: auto;
	text-align: left;
}
.leaflet-container a{
	border: none;
}
.rideMapUserPosition{
	background-image: url('../img/picto/map-center-B@100.png');
	background-size: 20px;
}

/* photo utilisateurs */
#userImgsWrap{
	margin: 3px 0 3px 3px;
}

/* photo plein écran */
#userImgFullScreen{
	position: absolute;
	z-index: 15000;
	top: 0;
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100vh;
	background-color: #222;
	color: #eee;
	border-radius: 0;
}
#userImgFullScreen #back{
	position: absolute;
	left: 10px;
	top: 10px;
	width: 30px;
	height: 30px;
	background-image: url(../img/arrow/left-off-W@100.png);
	background-size: contain;
	font-size: 0;
	cursor: pointer;
}
#userImgFullScreen #imgLike{
	position: absolute;
	left: 50%;
	top: 10px;
	width: 30px;
	height: 30px;
	border: none;
	background-color: transparent;
	background-image: url(../img/picto/like-W@100.png);
	background-size: contain;
	font-size: 0;
	cursor: pointer;
}
#userImgFullScreen #userImg a{
	color: #eee;
}
#userImgFullScreen #userAvatar, #userImgFullScreen #imgGallery li img{
	width: 50px;
	height: 50px;
	margin: 0;
	border: 3px solid #fff;
	border-radius: 50%;
	cursor: pointer;
}
#userImgFullScreen #userAvatar{
	position: absolute;
	right: 5px;
	top: 5px;
	left: auto;
	transform: none;
	overflow: hidden;
}
#userImgFullScreen #userAvatar img{
	width: 100%;
	height: 100%;
}
#userImgFullScreen h1{
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	top: 0;
	left: 50px;
	right: 50px;
	height: 50px;
	font-size: 1em;
}
#userImgFullScreen #imgSrc{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: calc(100vw - 100px);
	height: calc(100vh - 100px);
	object-fit: contain;
}
#userImgFullScreen #otherImg{
	display: none;
}
#userImgFullScreen #imgGallery{
	display: flex;
	align-items: baseline;
	position: absolute;
	max-width: 100%;
	overflow-x: auto;
	left: 50%;
	bottom: 5px;
	transform: translateX(-50%);
}
#userImgFullScreen #imgGallery li{
	flex: 0 0 auto;
	list-style: none;
	margin: 0 10px;
}
#userImgFullScreen #imgGallery li img{
	display: block;
	object-fit: cover;
	width: 40px;
	height: 40px;
	filter: grayscale(25%);
}
#userImgFullScreen #imgGallery li[data-view="1"] img{
	border-color: #888;
	opacity: 0.75;
	filter: grayscale(50%);
}
#userImgFullScreen #imgGallery li.on img{
	width: 50px;
	height: 50px;
	border-color: var(--colorContraste);
	opacity: 1;
	filter: grayscale(0);
}



/* statistiques */
#rideStat{
	display: flex;
	flex-direction: column;
	max-height: 55vh;
	background-color: rgb(59, 59, 59);
	color: #fff;
	text-align: left;
}
#rideStat p, #rideStat li{
	padding: 0.35em 20px;
}
/*#rideStat label{
	float: left;
	width: 60%;
	margin: 0 4px 0 0;
	color: #eee;
	text-align: left;
}*/
#rideInfo, #rideImgs, #rideComs{
	position: absolute;
	z-index: 1000;
	width: 100%;
	height: 50vh;
	bottom: 0;
	background-color: rgb(59, 59, 59);
	color: #fff;
	text-align: left;
	transform: translateY(100%);
	transition: transform 0.3s ease-in;
	-webkit-transition: transform 0.3s ease-in;
}
#rideInfo{
	overflow-y: auto;
}
#rideImgs, #rideComs{
	display: flex;
	flex-direction: column;
}
#rideComs{
	display: flex;
}
#rideImgs.show, #rideInfo.show, #rideComs.show{
	transform: translateY(0);
}
#rideImgs #rideImgLst{
	flex: 1;
	justify-content: center;
	/*height: calc(100% - 20px);*/
	overflow-y: auto;
	margin: 10px;
}
/*#rideInfo .rideInfoNav{
	position: sticky;
	top: 0;
	background-color: rgb(59, 59, 59);
}*/
.rideInfoNav{
	flex: 0 1 auto;
	display: flex;
	position: sticky;
	z-index: 1;
	top: 0;
	background-color: rgb(59, 59, 59);
}
.rideInfoNav a{
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 55px;
	background-color: transparent;
	background-position: center;
	background-size: 25px;
	background-repeat: no-repeat;
	border-radius: 0;
	border: none;
	border-right: 1px solid rgb(108, 108, 108);
	box-sizing: border-box;
	outline: none;
	font-size: 0;
	cursor: pointer;
}
.rideInfoNav a.full b{
	padding: 0 2px;
	border-radius: 2px;
	background-color: #fff;
	color: #000;
	font-size: 10px;
}
.rideInfoNav #rideDeleteYes, .rideInfoNav #rideDeleteNo{
	position: absolute;
	left: 0;
	width: 50%;
	opacity: 0;
	visibility: hidden;
	background-color: #000;
}
.rideInfoNav #rideDeleteYes.open, .rideInfoNav #rideDeleteNo.open{
	opacity: 1;
	visibility: visible;
}
.rideInfoNav #rideDeleteNo.open{
	left: 50%;
}
.rideInfoNav #rideStatToggle{
	background-image: url(../img/picto/ride-stat-W@100.png);
}
.rideInfoNav #rideImgsToggle{
	background-image: url(../img/userHome/camera-W@100.png);
}
.rideInfoNav #rideComsToggle{
	background-image: url(../img/picto/com-W@100.png);
}
.rideInfoNav #rideComsToggle.full{
	background-image: url(../img/picto/com-full-W@100.png);
}
.rideInfoNav #rideEdit{
	background-image: url(../img/picto/edit-W@100.png);
}
.rideInfoNav #rideDelete{
	background-image: url(../img/picto/del-W@100.png);
}
.rideInfoNav #rideDeleteYes{
	background-image: url(../img/picto/yes@50.png);
}
.rideInfoNav #rideDeleteNo{
	background-image: url(../img/picto/no@50.png);
}
.rideInfoNav #rideDownload{
	background-image: url(../img/picto/ride-download-W@100.png);
}
.rideInfoNav #rideLike.full{
	background-image: url(../img/picto/like-full-W@100.png);
}
.rideInfoNav #rideLike{
	background-image: url(../img/picto/like-W@100.png);
}
.rideInfoNav #rideShare{
	background-image: url(../img/picto/share-W@50.png);
}
.rideInfoNav #rideMoreOptionToggle{
	background-image: url(../img/picto/more-W@50.png);
}
#rideImgs .rideInfoNav, #rideComs .rideInfoNav, #rideInfo .rideInfoNav, #rideInfo .rideData > div{
	border-bottom: 1px solid rgb(108, 108, 108);
}
#rideInfo .rideInfoNav input{
	flex: 1;
	height: 45px;
	font-size: 0.7em;
	border: none;
	background-color: transparent;
	color: #fff; 
}
#rideMoreOptionWrap{
	position: absolute;
	right: 0;
	bottom: 0;
	display: flex;
	width: 200px;
	background-color: #000;
	transition: transform 0.3s ease-in;
	-webkit-transition: transform 0.3s ease-in;
	transform: translate(100%, -100%);
	-webkit-transform: translate(100%, -100%);
}
#rideMoreOptionWrap.open{
	transition: transform 0.3s ease-in;
	-webkit-transition: transform 0.3s ease-in;
	transform: translate(0, -100%);
	-webkit-transform: translate(0, -100%);
}
#rideImgs .rideInfoNav #rideImgsClose, #rideComs .rideInfoNav #rideComsClose{
	background-image: url(../img/picto/close-W@50.png);
	background-position: center;
	background-repeat: no-repeat;
	background-size: 15px;
}
#rideInfoClose{
}
#rideElevationToggle{
}
#rideAltitudeToggle{
}
#rideDurationToggle{
}
#rideOption{
	border-top: 1px solid rgb(108, 108, 108);
}
#ride #rideMoreOptionsToggle{
	flex: 0 0 60px;
	background-repeat: no-repeat;
	background-position: center 12px;
	background-size: 20px;
}
#rideMoreOptions{
	transform: translateY(-100%);
}
.rideData h3{
	display: none;
}
.rideData p, .rideData li{
	padding: 0.4em 20px;
}
.rideData p{
	border-bottom: 1px solid #444;
}
.rideData label{
	flex: 1;
	margin: 0;
	text-align: left;
	color: #ddd;
}
.rideData p:hover label{
	color: #fff;
}

/* alerte */
#rideHeader{
	position: relative;
	flex: 0 0 55px;
}
#rideHeader p{
	padding: 0;
}
#rideHeader #rideUser{
	position: absolute;
	display: block;
	top: 5px;
	left: 10px;
	width: 40px;
	height: 40px;
	overflow: hidden;
	border: none;
	border-radius: 50%;
	border: 3px solid transparent;
	font-size: 0;
}
#rideHeader #rideUser .noAvatar{
	color: #fff;
	font-size: 2rem;
}
#rideHeader #rideUser img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}
#rideHeader #rideUser:hover{
	border-color: #fff;
}
#rideHeader h1, #rideHeader h2{
	position: absolute;
	left: 70px;
}
#rideHeader h1{
	top: 5px;
	font-size: 1em;
	overflow: hidden;
	white-space: nowrap;
}
#rideHeader h2{
	top: 20px;
	padding-top: 10px;
	font-size: 1em;
	font-weight: normal;
}
#rideResume{
	display: flex;
	align-content: center;
}
#rideResume p{
	flex: 1 1 auto;
	padding-top: 30px;
	background-repeat: no-repeat;
	background-position: top center;
	background-size: 30px;
	text-align: center;
	font-size: 0.8em;
}
#rideResumeDeniv, #rideResumeDenivP{
	background-image: url(../img/picto/ride-deniv-W@100.png);
}
#rideResumeDenivM{
	background-image: url(../img/picto/ride-deniv-down-W@100.png);
}
#rideResumeDistance{
	background-image: url(../img/picto/ride-distance-W@100.png);
}
#rideResumeMoyenne{
	background-image: url(../img/picto/ride-distance-W@100.png);
}
#rideInfoAltitude p, #rideInfoDuration p, #rideInfoUpAndDown p{
	display: flex;
}
#rideResume label{
	display: none;
}
#rideInfoUpAndDownContent p{
	display: flex;
}
#rideInfoUpAndDownContent p span{
	flex: 1;
	text-align: center;
}
#rideInfoUpAndDownContent p span.up, #rideInfoUpAndDownContent p span.down{
	flex: 0 0 50px;
	background-repeat: no-repeat;
	background-position: top center;
	background-size: 25px;
	font-size: 0;	
}
#rideInfoUpAndDownContent p span.up{
	background-image: url(../img/picto/ride-deniv-W@100.png);
}
#rideInfoUpAndDownContent p span.down{
	background-image: url(../img/picto/ride-deniv-down-W@100.png);
}

/* liste des parcours */
#rideTrackLst{
	max-height: 25vh;
	overflow-y: auto;
}
#rideTrackLst li{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	color: #999;
	font-size: 0.85em;
	cursor: pointer;
}
#rideTrackLst li div{
	flex: 1;
	display: flex;
	flex-wrap: wrap;
}
#rideTrackLst li div:first-child{
	flex: 0 0 12px;
	height: 12px;
	margin-right: 5px;
	border-radius: 50%;
	border: 3px solid transparent;
}
#rideTrackLst li div span{
	flex: 1;
}
#rideTrackLst li div span:first-child{
	flex: 1 0 100%;
	font-size: 1.25em;
	color: #ddd;
}
#rideTrackLst li:hover{
	color: #fff;
}

/* denivele */
#rideElevation > div{
	width: 100%;
	height: 33vh;
}
#rideElevationSVG{
	width: 100%;
	height: 100%;
}
.rideElevationSVGLink:hover:before{
	content: " ";
	display: block;
	width: 2px;
	height: 100%;
	background-color: red;
}

/* images */
#rideImgLst, #userImgLst, #externalImgLst{
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 100px;
	grid-auto-rows: 100px;
	grid-gap: 10px;
}
#userImgLst, #externalImgLst{
	padding: 10px;
	color: #fff;
}
#rideImgLst li, #userImgLst li, #externalImgLst li{
	justify-items: stretch;
	align-items: stretch;
	position: relative;
	list-style: none;
	cursor: pointer;
}
#rideImgLst li img, #userImgLst li img, #externalImgLst li img{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 3px;
}
#rideImgLst li .imgTitle, #userImgLst li .imgTitle, #rideImgLst li .imgDate, #userImgLst li .imgDate, #rideImgLst li .imgEdit{
	position: absolute;
	font-size: 0.7em;
}
#rideImgLst li .imgTitle, #userImgLst li .imgTitle{
	display: none;
}
#rideImgLst li .imgDate, #userImgLst li .imgDate{
	bottom: 0;
}
#rideImgLst li .imgDelete:hover, #userImgLst li .imgDelete:hover{
	border-color: #fb0007;
	background-size: 10px;
}
#rideImgLst li .imgLike, #userImgLst li .imgLike, #userImgLst li .imgCom{
	position: absolute;
	bottom: 0;
	right: 0;
	width: 40px;
	height: 40px;
	padding: 0;
	background-color: transparent;
	background-repeat: no-repeat;
	background-size: 20px;
	background-position: right 5px bottom 5px;
	background-image: url(../img/picto/like-W@100.png);
	border: none;
	font-size: 0;
	cursor: pointer;
}
#userImgLst li .imgCom{
	right: 40px;
	background-position: center bottom 5px;
	background-image: url(../img/picto/com-W@100.png);
}
#rideImgLst li .imgLike.full, #userImgLst li .imgLike.full, #userImgFullScreen #imgLike.full{
	background-image: url(../img/picto/like-full-W@100.png);
}
#userImgLst li .imgCom.full{
	background-image: url(../img/picto/com-full-W@100.png);
}

/* commentaires */
#rideComLst{
	flex: 1;
	overflow-y: auto;
	padding: 10px;
}
#rideComLst li, #rideComLst p{
	display: flex;
}
#rideComLst li{
	margin-bottom: 10px;
}
#rideComLst li:last-child{
	margin-bottom: 0;
}
#rideComLst li.currentUser{
	flex-direction: row-reverse;
}
#rideComLst .userInfo{
	position: relative;
	padding-right: 20px;
}
#rideComLst li.currentUser .userInfo{
	flex-direction: row-reverse;
	padding: 0 0 0 20px;
}
#rideComLst .userInfo::after{
	position: absolute;
	content: ' ';
	display: block;
	right: 0;
	top: 7px;
	width: 10px;
	height: 10px;
	background-color: #fff;
	transform: translateX(50%) rotateZ(45deg);
}
#rideComLst li.currentUser .userInfo::after{
	right: auto;
	left: 0;
	transform: translateX(-50%) rotateZ(45deg);
}
#rideComLst .userInfo span{
	display: none;
}
#rideComLst .text{
	padding: 5px 10px;
	margin-bottom: 5px;
	background-color: #fff;
	border-radius: 4px;
	color: #333;
	font-size: 0.9em;
	white-space: pre-line;
}
#rideComLst .date{
	color: #aaa;
	font-size: 0.8em;
}
#rideComLst img{
	width: 35px;
	height: 35px;
	border-radius: 50px;
}
#rideComAdd{
	position: sticky;
	bottom: 0;
	display: flex;
	flex-direction: row;
	padding: 0 5px 5px;
}
#rideComAdd textarea{
	flex: 1;
	margin: 0 5px 0 0;
	resize: vertical;
}
#rideComAdd textarea, #rideComAdd input[type=button]{
	background-color: #fff;
	border: none;
	border-radius: 3px;
	outline: none;
}
#rideComAdd input[type=button]{
	width: 60px;
	background-image: url(../img/picto/message-send@100.png);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 35px;
	font-size: 0;
	cursor: pointer;
}
#rideComAdd input[type=button]:disabled{
	opacity: 0.75;
	cursor: default;
}

/* ride edit */
main#rideEdit{
	width: 100%;
	height: 100vh;
	overflow: hidden;
}
main#rideEdit.open{
	overflow: auto;
}
main#rideEdit > div{
	opacity: 0;
	visibility: hidden;
	padding-bottom: 0;
	transform: translate(-100%, 0);
	-webkit-transform: translate(-100%, 0);
	transition: transform .3s ease-in, opacity .3s ease-in, visibility 0s linear .3s;
	-webkit-transition: transform .3s ease-in, opacity .3s ease-in, visibility 0s linear .3s;
}
main#rideEdit.open > div{
	opacity: 1;
	visibility: visible;
	transform: translate(0, 0);
	-webkit-transform: translate(0, 0);
	transition: transform .3s ease-in, opacity .3s ease-in, visibility 0s;
	-webkit-transition: transform .3s ease-in, opacity .3s ease-in, visibility 0s;
}
main#rideEdit h1, main#rideEdit h2{
	padding-left: 35px;
	background-repeat: no-repeat;
	background-size: 25px;
	background-position: left center;
}
main#rideEdit #rideEditTitle{
	background-image: url(../img/picto/ride-B@50.png);
}
main#rideEdit #rideConfTitle{
	background-image: url(../img/picto/cadenas-close-B@50.png);
	background-size: 20px;
}
main#rideEdit #rideStatTitle{
	background-image: url(../img/picto/ride-stat-2-B@100.png);
}
main#rideEdit #rideMapTitle{
	background-image: url(../img/picto/map-B@50.png);
}

/* confidentialité */
main#rideEdit #rideEditConf{
	display: flex;
	justify-content: space-around;
	margin-top: 10px;
}
main#rideEdit #rideEditConf > div{
	flex: 0 0 auto;
}
main#rideEdit #rideEditConf p{
	margin: 5px 0;
}
main#rideEdit #rideEditConf label{
	float: none;
	display: inline;
	text-align: left;
	width: auto;
}

/* visible */
#rideInvisibleCheck label{
	display: inline;
	width: auto;
	float: none;
}

/* stat */
main#rideEdit #rideEditStat label{
	width: 50%;
	display: inline-block;
	text-align: left;
}

/* carte */
main#rideEdit #rideMap{
	height: 50vh;
	margin: 10px;
}
main#rideEdit #rideElevationSVG{
	height: 25vh;
}
main#rideEdit #saveCloseBar{
	position: sticky;
	z-index: 1000;
	bottom: 0;
}

/* enregistre ou ferme le GPX */
#rideSaveBt::after{
	background-image: url(../img/picto/check-GREEN@100.png);
}
#rideCloseBt::after{
	background-image: url(../img/picto/close-RED@100.png);
}





@media screen and (min-width: 300px){
#rideImgLst, #userImgLst{
	grid-template-columns: 1fr 1fr;
}
}





@media screen and (min-width: 500px){
/* liste ride */
#rideFindInput{
	width: calc(100% - 150px);
}
#rideFindReset{
	left: 45px;
}
#rideLstWarp{
	max-height: calc(100vh - 180px);
}
#rideLst .ride a{
	display: flex;
	margin: 5px 1%;
	padding: 10px 0 10px 10px;
	text-align: left;
	align-items: center;
}
#rideLst .ride::after{
	display: block;
	content: ' ';
	width: 75%;
	height: 1px;
	margin: auto;
	background-color: #e5e5e5;
}
#rideLst .ride:last-child::after{
	display: none;
}
#rideLst .ride .rideImg{
	width: 90px;
	height: 90px;
}
#rideLst .ride .rideInfo{
	flex: 1;
	margin: 0 0 0 15px;
	padding: auto;
	position: static;
	background: transparent;
	color: inherit;
	text-align: left;
}
#rideLst .ride h2{
	padding: 0;
}

/* liste ride */
#rideLst .ride .rideLike:hover, #rideLst .ride .rideCom:hover, #rideLst .ride .rideOptionsToggle:hover{
	background-color: #eee;
}
.rideDistance, .rideDenivUp, .rideLikeTotal{
	display: block;
	padding-left: 23px;
}
.rideLikeTotal{
	display: flex;
}
.rideDistance{
	background-image: url(../img/picto/ride-distance-B@100.png);
}
.rideDenivUp{
	background-image: url(../img/picto/ride-deniv-B@100.png);
}
#rideLst .ride .rideOptionsToggle{
	background-image: url(../img/picto/more-B@50.png);
}
#rideLst .ride .rideLike, #rideLst .ride .rideLikeTotal{
	background-image: url(../img/picto/like-B@100.png);
}
#rideLst .ride .rideLike.full{
	background-image: url(../img/picto/like-full-B@100.png);
}
#rideLst .ride .rideCom, #rideLst .ride .rideComTotal{
	background-image: url(../img/picto/com-B@100.png);
}
#rideLst .ride .rideCom.full{
	background-image: url(../img/picto/com-full-B@100.png);
}
.rideInfoButton{
	height: auto;
	padding: 4px 16px 4px 36px;
	background-position: 10px center, 0, 0;
}
#userImgLst{
	grid-template-columns: 1fr 1fr 1fr;
}
}





@media screen and (min-width: 600px){
#rideImgLst, #userImgLst{
	grid-template-rows: 150px;
	grid-auto-rows: 150px;
}
#imgUpload #rideImgLst{
	grid-template-columns: 1fr 1fr 1fr;	
}
/* liste ride */
.rideInfo p span{
	font-size: 1em;
}
.rideDistance, .rideDenivUp, .rideLikeTotal{
	padding-left: 28px;
}
}





@media screen and (min-width: 800px){
/* import GPX */
#rideUploadManager, #imgUpload{
	width: 60%;
}

/* ride utilisateur */
.rideInfo p span{
	font-size: 0.9em;
}
.rideDate{
	display: block;
}

/* ride stat */
#ride{
	flex-direction: row;
}
#ride #rideMap{
	flex: 0 0 100%;
	transition: flex-basis 0.3s ease-in;
	-webkit-transition: flex-basis 0.3s ease-in;
}
#ride.open #rideMap{
	flex: 0 0 calc(100% - 400px);
}
#rideStat{
	position: absolute;
	z-index: 10000;
	top: 0;
	right: 0;
	width: 400px;
	max-height: auto;
	background-color: rgba(0, 0, 0, 0.75);
}
#rideHeader{
	flex: 0 0 70px;
}
#rideHeader #rideUser{
	top: 10px;
	width: 50px;
	height: 50px;
}
#rideHeader h1, #rideHeader h2{
	left: 80px;
}
#rideHeader h1{
	top: 10px;
}
#rideHeader h2{
	top: 30px;
}
#rideInfo, #rideImgs, #rideComs{
	flex: 1 1 auto;
	width: 400px;
	top: 178px;
	left: auto;
	right: 0;
	bottom: 0;
	height: auto;
	border-top: 1px solid rgb(108, 108, 108);
	font-size: 0.9em;
	transform: translateX(100%);
}
#ride #rideInfo.show, #ride #rideImgs.show, #ride #rideComs.show{
	transform: translateX(0);
}
.rideInfoNav{
	background-color: transparent;
}
#rideInfo .rideInfoNav, #rideImgs .rideInfoNav, #rideComs .rideInfoNav{
	display: none;
}
#rideMoreOptionWrap{
	transform: translate(100%, 100%);
}
#rideMoreOptionWrap.open{
	transform: translate(0, 100%);
}
#rideInfo h3{
	display: block;
	margin: 0;
	padding: 5px 0 5px 30px;
	font-size: 1em;
	font-weight: normal;
	border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}
#rideElevation > div{
	height: 300px;
}

/*#ride{
	display: block;
	height: auto;
}
#rideStat{
	position: fixed;
	z-index: 10000;
	top: 0;
	right: 0;
	width: 400px;
	max-height: 100vh;
	background-color: rgba(0, 0, 0, 0.75);
}
#rideImgs, #rideInfo{
	bottom: -50px;
}
#rideInfo{
	flex: 1 1 auto;
	width: 400px;
	top: 178px;
	left: auto;
	right: 0;
	bottom: 0;
	height: auto;
	background-color: rgba(0, 0, 0, 0.75);
	border-top: 1px solid rgb(108, 108, 108);
	font-size: 0.9em;
}
#rideMoreOptions{
	top: auto;
	bottom: 0;
	transform: translateY(100%);
}
.rideInfoNav{
	background-color: transparent;
}
#rideInfo .rideInfoNav{
	display: none;
}
#rideElevation > div{
	height: 300px;
}
#rideInfo h3{
	display: block;
	margin: 0;
	padding: 5px 0 5px 30px;
	font-size: 1em;
	font-weight: normal;
	border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}
#rideImgs .rideInfoNav{
	width: 50px;
	border: none;
}
#rideImgs{
	top: auto;
	bottom: 0;
	width: calc(100% - 401px);
	max-height: 300px;
	padding: 3px;
	transform: translateY(100%);
	background-color: rgba(0, 0, 0, 0.75);
}
#rideImgs .rideInfoNav{
	position: absolute;
	top: 0;
	background-color: rgba(0, 0, 0, 0.75);
	transition: top 0.4s ease-in;
}
#rideImgs.show .rideInfoNav{
	top: -50px;
}
#rideMap{
	margin-top: 0;
	height: 100vh;
}*/

/* ride */
.rideData h3{
	background-image: url(../img/picto/rideSection-off@100.png);
	background-repeat: no-repeat;
	background-position: 10px center;
	background-size: 10px;
	color: #eee;
	cursor: pointer;
}
.rideData h3:hover{
	color: #fff;
}
.sectionOpen h3{
	background-image: url(../img/picto/rideSection-on@100.png);
	color: #fff;
}
.sectionOpen, .sectionClose{
	position: relative;
}
.sectionOpen > div, .sectionClose > div{
	overflow: hidden;
	transform-origin: center top 0;
	width: 100%;
}
.sectionOpen > div{
	transform: scaleY(1);
	-webkit-transform: scaleY(1);
	transition: transform 0.2s ease-in, visibility 0s linear;
	-webkit-transition: transform 0.2s ease-in, visibility 0s linear;
	visibility: visible;
}
.sectionClose > div{
	position: absolute;
	transform: scaleY(0);
	-webkit-transform: scaleY(0);
	transition: transform 0.2s ease-in, visibility 0s;
	-webkit-transition: transform 0.2s ease-in, visibility 0s;
	visibility: hidden;
}

#rideSegments{
	top: 220px;
	transition: right 0.3s ease-in;
	-webkit-transition: right 0.3s ease-in;
}
#ride.open #rideSegments{
	right: 410px;
}
#rideSegments li span, #rideSegments li input[type=button]{
	margin-left: 24px;
}
#rideSegments li span:first-child{
	height: 20px;
	width: 20px;
}

/* ride edit */
/* stat */
main#rideEdit #rideEditStat label{
	width: 200px;
}

/* groupe */
#rideGroupManageLabel{
	display: flex;
}
#rideGroupManageLabel select{
	width: calc(60% - 42px);
}
#rideGroupManageLabel #rideGroupManage{
	width: 40px;
	padding: 0;
	font-size: 0;
	background-image: url(../img/userHome/configure-B@50.png);
	background-size: 20px;
	background-repeat: no-repeat;
	background-position: center;
	cursor: pointer;
}
}





@media screen and (min-width: 1000px){
#userImgLst, #imgUpload #rideImgLst{
	grid-template-rows: 200px;
	grid-auto-rows: 200px;
}
#imgUpload #rideImgLst{
	grid-template-columns: 1fr 1fr 1fr 1fr;	
}

/* import GPX */
#rideUploadManager{
	width: 500px;
}

/* ride edit */
#rideGroupManageLabel select{
	width: calc(50% - 42px);
}

/* stat */
main#rideEdit #rideEditStat label{
	width: 30%;
	text-align: right;
}

/* ride utilisateur : liste */
#rideLoadBt{
	width: auto;
}
}





@media screen and (min-width: 1200px){
/* ride utilisateur */
.rideCity, .rideDateDay{
	display: block;
}
.rideInfo p span.rideCity{
	flex: 2;
}
.rideInfo p span.rideDateDay{
	flex: 0 0 auto;
	margin-right: 4px;
}
}





@media screen and (min-width: 1400px){
#userImgLst{
	grid-template-columns: 1fr 1fr 1fr 1fr;
	grid-template-rows: 250px;
	grid-auto-rows: 250px;
}
/* ride edit */
#rideGroupManageLabel select{
	width: calc(40% - 42px);
}
}





@media screen and (min-width: 2000px){
#userImgLst{
	grid-template-rows: 300px;
	grid-auto-rows: 300px;
}
}