/*
 * Licensed to the Apache Software Foundation (ASF) under one
 * or more contributor license agreements.  See the NOTICE file
 * distributed with this work for additional information
 * regarding copyright ownership.  The ASF licenses this file
 * to you under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance
 * with the License.  You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing,
 * software distributed under the License is distributed on an
 * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
 * KIND, either express or implied.  See the License for the
 * specific language governing permissions and limitations
 * under the License.
 */
* {
    -webkit-tap-highlight-color: rgba(0,0,0,0); /* make transparent link selection, adjust last value opacity 0 to 1.0 */
}

body {
    -webkit-touch-callout: none;                /* prevent callout to copy image, etc when tap to hold */
    -webkit-text-size-adjust: none;             /* prevent webkit from resizing text to fit */
    -webkit-user-select: none;                  /* prevent copy paste, to allow, change 'none' to 'text' */
    font-family:Verdana;
	font-size:1em;
	color:#000080;
    background-attachment:fixed;
    font-size:10px;
    height:100%;
    margin:0px;
	padding:0px;
    width:100%;
}



h1 {
    font-size:18px;
    font-weight:bold;
    text-align:center;
	color:navy;
	text-transform : uppercase;
	text-shadow: 2px 2px #808080;
}

h2 {
    font-size:16px;
    font-weight:bold;
    text-align:center;
	color:#3338F3;
	text-shadow: 2px 2px lightgray;
}

h3 {
    font-size:12px;
    
	color:#3338F3;
	text-shadow: 2px 2px lightgray;
}

#map {
	bottom : 30px;
	top : 125px;
	left : 5%;
	width : 90%;
	position:absolute;
	box-shadow:4px 4px rgb(192,192,192,0.5);
}

#mainDiv {
	
	font-size:18px;
	font-family:Arial, Sans serif;
	color:#3338F3;
	font-weight:bold;
	position:absolute;
	height : 12%;
	top : 50px;
	left : 5%;
	width : 90%;
	text-shadow:2px 2px seam;
	
}
#version {
	position:absolute;
	top:240px;
	text-align:center;
	left:10%;
	width:80%;
	font-size:12px;
	color:#3338F3;
	font-weight:bold;
	text-shadow: 2px 2px lightgray;
}
#header {
		text-align:center;
		padding-top:7px;
}
.pastille {
	float:right;
	background:#3338F3;
	color:white;
	font-size:24px;
	border-radius:50%;
	width:24px;
	height:24px;
	margin-top:-5px;
	margin-right:15px;
	box-shadow : 2px 2px rgb(192,192,192,0.5);
}
.picto {
	font-size:12px;
	margin-top: 3px;
	text-align:center;
}

.etiquette {
	border:1px solid gray;
	border-radius:5px;
	box-shadow:4px 4px rgb(192,192,192,0.5);
	height:60px;
	width:100%;
	background:white;
	color:black;
	padding-left:10px;
	margin-bottom:5px;
}

.etiquette1 {
	border:1px solid gray; 
	border-radius:5px;
	box-shadow:4px 4px rgb(192,192,192,0.5);
	height:80px;
	width:100%;
	background:white;
	color:black;
	padding-left:10px;
	margin-bottom:5px;
}

.containerEtiquette {
	z-index:0;
	position:fixed;
	top:125px;
	bottom:5%;
	left:10%;
	right:5%
	
}
.menuEtiquette {
	position:relative;
	display:none;
	overflow:hidden;
}

.signalementOK {
		text-align:center;
		position:absolute;
		padding-top:9px;
		font-weight:bold;
		font-size:12px;
		color:black;
		background:white;
		text-shadow:2px 2px rgb(192,192,192,0.5);
		width:80%;
		left:10%;
		top:50%;
		display:none;
		margin-top : -30px;
		
}
.signalementOn {
	animation-name: faddin;
	animation-duration: 1s;
	z-index:20;
}

.signalementOff {

	animation-name: faddout;
	animation-duration: 1s;
	
}

.waitProcess {
	position:absolute;
	bottom : 10%;
	left:5%;
	text-align:center;
	width:90%;
}
.step {
	width:10px;
	height:10px;
	display:inline-block;
	border:1px solid #3338F3
}

.stepOk {
	width:10px;
	height:10px;
	display:inline-block;
	border:1px solid #3338F3;
	background: #3338F3;
}
@keyframes faddin {
	0% {

		opacity:0;
	}
	100% {
		opacity:1;
	}
} 

@keyframes faddout {
	0% {
		opacity:1;
	}
	100% {
		opacity:0;
		
	}
} 
.slideInDown {
  animation-name: slideInDown;
  animation-duration: 0.3s;
  //animation-fill-mode: both;
 }
 
@keyframes slideInDown {
  0% {
	height:0%;
	//opacity:0;
  }
  100% {
	//opacity:100%;
	height:100%;
  }
} 

.slideInUp {
  display:none;
  opacity:0;
}
  @keyframes slideInUp {
  0% {
  height:100%;
  //opacity:100%;
  }
  100% {
  //opacity:0%;
  height:0%;
  }
} 
.title {
	font-size:14px;
	color:black;
	text-shadow:2px 2px lightgray;
}

.subTitle {
	font-size : 12px;
	color:black;
	text-shadow:2px 2px lightgray;
}

#signaler {
    position: absolute;
    top: 50px;
    left: 10%;
    width: 80%;
    text-align: center;
    background: black;
    border-radius: 5px;
    border: 1px solid navy;
    color: white;
    font-weight: bold;
    
    height: 40px;
    padding-top: 10px;	
}

.categorie{
	background: rgb(53,44,201);
	background: linear-gradient(176deg, rgba(53,44,201,1) 0%, rgba(0,212,255,1) 100%);
	color:white;
	height:40px;
	width:4000px;
	font-size:20px;
}
.listeCategories {
	z-index:20;
	display: block;
	align-items : center;
	position: fixed;
	top: 100px;
	left: 10%;
	right: 10%;
	bottom: 10%;
	background-color:transparent;
}

.jaquette {
	font-size:14px;
	color:black;
	font-weight:bold;
	text-shadow:2px 2px lightgray;
	display : block;
	text-align:center;
	background: white;
	width:100%;
	height:40px;
	padding-top:10px;
	margin-bottom:5px;
	border:1px solid black;
	border-radius:5px;
	box-shadow:3px 3px rgba(53,44,201,0.5);
}


.snapshot {
	padding : 2px;
	width:64px;
	height:48px;
}

.logo-fading{animation:fading 2s;animation-iteration-count:1}
@-webkit-keyframes fading{0%{opacity:0}25%{opacity:0.5}50%{opacity:1}75%{opacity:0.5}100%{opacity:0}}
.logo {
	animation: bounce 2s ease 0s alternate;
}
@keyframes bounce{
	 0%  {transform: translateY(0);}
     25%   {transform: translateY(200%);}
	 50%   {transform: translateY(100%);}
	 75%   {transform: translateY(200%);}
	 100%   {transform: translateY(150%);}
}



.waitPanel {
	background : white;
	z-index:10;
	position:fixed;
	top:0px;
	left:0px;
	right:0px;
	bottom:0px;
	opacity:1;
}

.w3-bold {
	font-weight:bold;
	padding: 10px 10px 10px 10px;
}

tr {
	//text-align:left;
	border-radius:10px;
}


select {
	height:23px;
}

.colorPanel {
	text-align:right;
	height:23px;
}

.panel {
	top : 0px;
	left: 0px;
	width : 100%;
	height : 100%
}

.resume {
	text-align : center;
	line-height : 30px;
	border : 1px black solid;
}

input:focus, input:active {
    outline:none;
}
input {
	border-radius:7px 7px;
	color:rgb(49,38,135);
	box-shadow:2px 2px #808080;
}
input[type=button]{
	border-radius:7px 7px;
	color:white;
	background-color:#3338F3;
	font-size:12px;
	font-weight:bold;
	box-shadow:2px 2px lightGray;
}


#tutorial {
	font-family:Helvetica;
	display: block;
	top: 2%;
	left: 2%;
	position: fixed;
	right: 2%;
	bottom: 2%;
	border:1px solid black;
	background:white;
	color:black;
	box-shadow:2px 2px lightgray;
	text-align:center;
	z-index: 30;
	padding:5px;
	border-radius: 10px;
	overflow-y:auto;
}

.imgTuto {
	border: 1px solid #3338F3; 
	border-radius:10px;
	box-shadow:2px 2px lightGrey;

}

.pageTuto {
	display:none;
}