:root{
  --FormCouleurTour: gray;
  --FormCouleurFond:#93e3dc;
  --FormEpaisseurTour: 1px;
  --FormCouleurCarac: #254893;
  --FormTailleTitre: 60px;
  --FormTailleSousTitre: 30px;
  --FormPoliceChamp: FredokaLight;
  --FormTailleChamp: 16px;
  --FormCouleurValid: #4CAF50;
  --FormMargeHeight: 62px;
  --FormFontSize: 16px;
  --FormTailleTitreCarte: var(--FormTailleTitre);
  --bg: rgb(243, 243, 243);
  --green: var(--FormCouleurValid);
  --red: rgba(221, 8, 8, 0.644);
  --yellow: rgb(255, 153, 0);
  --transition-easing: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --FormCouleurOmbre: dodgerblue;
  --FormCouleurSpin: #04203a;
  --FormFontEpaisseur: 700;
  --FormFontSizeCarac: 23px;
  --FormFontSizeError: 18px;
  --FormTitreText: 48px;
  -webkit-tap-highlight-color: transparent;
  --BorderRaduisMap: 25px;
  --BackgroundObservation: #3AA2C3;
  --BackgroundWiki: white;
}

/*//////////////////////////////////////////////////////////////////
[ FONT ]*/
@font-face {
  font-family: RobotoBlack;
  src: url('../fonts/Roboto/Roboto-Black.ttf');
}

/* @font-face {
font-family: FredokaLight;
src: url('../fonts/Fredoka/Fredoka-Light.ttf');
} */
@font-face {
font-family: FredokaLight;
  src: url('../fonts/Fredoka/Fredoka-Light.eot');
  src: url('../fonts/Fredoka/Fredoka-Light.eot?#iefix') format('embedded-opentype'),
       url('../fonts/Fredoka/Fredoka-Light.woff2') format('woff2'),
       url('../fonts/Fredoka/Fredoka-Light.woff') format('woff'),
       url('../fonts/Fredoka/Fredoka-Light.ttf') format('truetype'),
       url('../fonts/Fredoka/Fredoka-Light.svg#Fredoka-Light') format('svg');
  font-style: normal;
  font-display: swap;

}
/* @font-face {
font-family: FredokaBold;
src: url('../fonts/Fredoka/Fredoka-Bold.ttf');
} */
@font-face {
font-family: 'FredokaBold';
src: url('../fonts/Fredoka/Fredoka-Bold.eot');
src: url('../fonts/Fredoka/Fredoka-Bold.eot?#iefix') format('embedded-opentype'),
    url('../fonts/Fredoka/Fredoka-Bold.woff2') format('woff2'),
    url('../fonts/Fredoka/Fredoka-Bold.woff') format('woff'),
    url('../fonts/Fredoka/Fredoka-Bold.ttf') format('truetype'),
    url('../fonts/Fredoka/Fredoka-Bold.svg#Fredoka-Bold') format('svg');
font-weight: bold;
font-style: normal;
font-display: swap;
}

.image-icon img {
background-color: var(--BackgroundObservation) !important;
}

.image-icon-public img {
background-color: var(--BackgroundObservation) !important;
}

*:focus {
outline: none;
}

.formMap {
  background-color: var(--FormCouleurFond);
  font-family: var(--FormPoliceChamp);
  border: var(--FormEpaisseurTour) solid transparent;
}

input,
input::-webkit-input-placeholder {
  font-size: var(--FormFontSizeCarac);
  color: var(--FormCouleurCarac);
  font-weight: var(--FormFontEpaisseur);
  font-family: var(--FormPoliceChamp);
}

#groupeselect,#groupeselectA,#date11, #date12
{
padding: .3125rem 3rem .3125rem 1rem;
background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');
background-repeat: no-repeat, repeat;
background-position: right 1rem center;
border-radius: .25rem;
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
border: 1px solid snow;
color: var(--FormCouleurCarac);
background-size: 10px 12px;
background-color: #fff;
box-shadow: 0 1px 2px rgba(0,0,0,0.075);
outline:none;
border-radius: 20px;
font-size: var(--FormFontSizeCarac);
}

#date11 option, #date12 option {
margin-left: -4px;
}

input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
font-size: var(--FormFontSizeCarac);
color: var(--FormCouleurCarac);
-webkit-text-fill-color: var(--FormCouleurCarac);
}


input:-ms-input-placeholder, textarea:-ms-input-placeholder {
font-size: var(--FormFontSizeCarac);
color: var(--FormCouleurCarac);
-webkit-text-fill-color: var(--FormCouleurCarac);
font-family: var(--FormPoliceChamp);
}
input::-moz-placeholder, textarea::-moz-placeholder {
font-size: var(--FormFontSizeCarac);
color: var(--FormCouleurCarac);
-webkit-text-fill-color: var(--FormCouleurCarac);
font-family: var(--FormPoliceChamp);
}
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
font-size: var(--FormFontSizeCarac);
color: var(--FormCouleurCarac);
-webkit-text-fill-color: var(--FormCouleurCarac);
font-family: var(--FormPoliceChamp);
}
input:hover, textarea:hover {
color: var(--FormCouleurCarac);
-webkit-text-fill-color: var(--FormCouleurCarac);
font-family: var(--FormPoliceChamp);
font-size: var(--FormFontSizeCarac);
}
input:focus, textarea:focus,
textarea:focus-within {
color: var(--FormCouleurCarac);
-webkit-text-fill-color: var(--FormCouleurCarac);
font-family: var(--FormPoliceChamp);
font-size: var(--FormFontSizeCarac);
}
input:-webkit-autofill:active,
input:-webkit-autofill:first-line {    font-size: var(--FormFontSizeCarac);}

:-internal-autofill-previewed {
font-size: var(--FormFontSizeCarac);
color: var(--FormCouleurCarac);
}

input:-webkit-autofill,
input:-webkit-autofill:focus {
  transition: background-color 600000s 0s, color 600000s 0s;
  font-size: var(--FormFontSizeCarac);
 color: var(--FormCouleurCarac);
}

label {
display: block;
}

h1 { line-height: 1;margin-bottom: 30px;}

input[type=checkbox]:checked {
background-color: var(--FormCouleurCarac);
}

input[type=radio]:checked {
background-color: var(--FormCouleurCarac);
}

#btnHome, .cssLeftButton {
display: none;
}

#pleaserotate-graphic{
  fill: #fff;
}

#pleaserotate-backdrop {
  color: #fff;
  background-color: #000;
}


.icon-hr {
position: relative;
margin: 5px 0px 0px 5px;
padding: 0px;
width: 100%;
height: 50px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
overflow: hidden;
float: left;
}

.title-icon {
font-weight: bolder;
font-size: var(--FormTailleTitreCarte);
color:var(--FormCouleurCarac);
text-align: center;
}

.icon-hr-create {
position: relative;
margin: 5px 0px 0px 5px;
padding: 0px;
width: 100%;
height: 10px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
overflow: hidden;
}

.title-icon-create {
font-weight: bolder;
font-size: var(--FormTailleTitreCarte);
color: var(--FormCouleurCarac);
text-align: center;
position: relative;
}

@media screen and (max-width:780px) and (max-height:900px) {

:root{
  --BorderRaduisMap: 0px;
}

form {
  border-radius: 0px !important;
  overflow-y: auto;
  overflow-x: hidden;
}

.multi-button {transform: scale(1.3, 1.1) !important; }

.obsStyle {
  z-index: 1 !important;
}

.icon-hr {
  position: relative;
  margin: 5px 0px 0px 5px;
  padding: 0px;
  width: 100%;
  height: 50px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  overflow: hidden;
  float: left;
}

.title-icon {
  font-weight: bolder;
  font-size: var(--FormTailleTitreCarte);
  color:var(--FormCouleurCarac);
  text-align: center;
}

.icon-hr-create {
  position: relative;
  margin: 5px 0px 0px 5px;
  padding: 0px;
  width: 100%;
  height: 10px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  overflow: hidden;
}

.title-icon-create {
  font-weight: bolder;
  font-size: var(--FormTailleTitreCarte);
  color: var(--FormCouleurCarac);
  text-align: center;
  position: relative;
}

html{
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -o-transition: none !important;
  transition: none !important;
}

.likeCss{
  width: 120px;
  height: 120px;
}

.icon-select .selected-box:hover {
  width: 100% !important;
}

.icon-select .selected-icon {
  width: 100% !important;
}
}

#my-icon-select-box-scroll, #my-icon-select2-box-scroll,#my-icon-select3-box-scroll,#my-icon-select4-box-scroll,#my-icon-select5-box-scroll,#my-icon-select6-box-scroll{
  background-color: var(--FormCouleurFond);
}

.marginForm { margin: 0px 2vw 2vw 2vw;}

.fredoka-700 {
  font-family: "Fredoka", serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}


.textLabelclass{
  white-space:nowrap;
  background-color: white;
  color: #254893;
  font-family: 'FredokaLight';
  font-size: 23px;
  line-height: 20px;
  font-weight: bold;
  border-radius: 25px;

}


.divLabel { background-color: white; width: 250px;box-shadow: 0 3px 14px rgba(127, 255, 0, 0.4); border:1px solid chartreuse;}
.divLabel2 { background-color: white; width: 250px;box-shadow: 0 3px 14px rgba(0, 0, 0, 0.4); border:1px solid #254893;}
.divLabelT { background-color: white; width: 250px;box-shadow: 0 3px 14px rgba(134,83,55, 0.4); border:1px solid #865337;}

.linkLabel:hover {text-decoration: underline;}