/**
 * Farbtastic Color Picker 1.2
 * © 2008 Steven Wittens
 * Modified by Mohannad El-Barachi
 * 
 **** Code adapté par Paulo Silva - pour que le code du programme soit responsive! ****
 ****     htpps://www.paulo.lu/francais/codecouleurs.php - fait le 16/06/2021      ****
 *
 * This program is free software; you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation; either version 2 of the License, or
 * (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License
 * along with this program; if not, write to the Free Software
 * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301  USA
 */
 
.farbtastic { position: relative; }
.farbtastic * { position: absolute; cursor: crosshair; }
.farbtastic, .farbtastic .wheel { width: 195px; height: 195px; }
.farbtastic .color, .farbtastic .overlay { top: 47px; left: 47px; width: 101px; height: 101px; }
.farbtastic .wheel { background: url('../images_site/wheel.png') no-repeat; width: 195px; height: 195px; }
.farbtastic .overlay { background: url('../images_site/mask.png') no-repeat; }
.farbtastic .marker { width: 17px; height: 17px; margin: -8px 0 0 -8px; overflow: hidden; background: url('../images_site/marker.png') no-repeat; }
/*/.quick_select_colors { width:  /*76px;*//* top: 0px; margin-left: 220px; margin-top: 8px; }
/*.quick_select_colors .Grid { width: 76px; /* border: 1px solid #0000ff; */ /*}  /* grille autour des carrés de couleur */
/*.quick_select_colors .Grid span.QuickColor { position: relative; width: 19px; border: 1px outset #c0c0c0; cursor: pointer; display: inline-block; height: 15px; line-height: 15px; margin: 0px;  padding: 0px; }
.quick_select_colors .Grid span[class="QuickColor"] { width: 17px; padding-left: 5px; padding-right: 5px; } /* taille des carrés de couleur dans la grille */
/*.quick_select_colors .Grid span[class="QuickColor"]:hover { border: 1px inset #0000ff; }*/

.colorwell {
	 background-color: transparent;
     border: 1px solid #0000ff;
     width: 6em;
	 margin-left: 0px;
	 margin-right: auto;
	 padding-top: 0.18rem;
	 padding-bottom: 0.18rem;
     text-align: center;
     cursor: pointer;
 }
.colorwell-selected {
     border: 1px solid #ffffff;
     font-weight: bold;
 }

/************************************************/
/*  media query pour le farbtastic responsive  */
/************************************************/

/* écran smartphone très petit - exemple iPhone 12 */
@media only screen and (max-width: 575px) {
	#picker { 
	margin-top: 12px;
	margin-left: 6% !important; /*10%*/ 
	margin-right: 25%; /*auto;*/
	width: 40%;
  }
}

/* écran smartphone petit */
@media only screen and (max-width: 600px) {
	#picker { 
	margin-top: 12px;
	margin-left: 20% !important;
	margin-right: 25%; /*auto;*/
	width: 40%;
  }
}

/* écran tablette portrait et smartphone large */
@media only screen and (min-width: 600px) {
	#picker { 
	margin-top: 12px;
	margin-left: 34.5% !important;
	margin-right: auto;
	width: 40%;
  }
}

/* écran tablette paysage et smartphone large */
@media only screen and (min-width: 768px) {
	#picker { 
	margin-top: 12px;
	margin-left: 39% !important;
	margin-right: auto;
	width: 40%;
  }
}

/* écran laptops/desktop */
@media only screen and (min-width: 992px) {
	#picker { 
	margin-top: 12px;
	margin-left: 28% !important;
	margin-right: auto;
	width: 40%;
  }
}

/* écran smartphone très petit - exemple iPhone 12 */
@media only screen and (max-width: 575px) {
	#codehex {
	margin-top: 12px;
	margin-left: 25%; /*0px;*/
	margin-right: 25% !important; /* auto; */
	width: auto;
  }
}

/* écran smartphone petit */
@media only screen and (max-width: 575px) {
	#color1 {
	letter-spacing: 0.20rem;
	font: bold;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 12px;
	padding-top: 2px;
	padding-bottom: 2px;
	width: auto;
  }
}

/* écran smartphone petit */
@media only screen and (max-width: 600px) {
	#codehex {
	margin-top: 12px;
	margin-left: 0px;
	margin-right: auto;
	width: auto;
  }
}

/* écran smartphone petit */
@media only screen and (max-width: 600px) {
	#color1 {
	letter-spacing: 0.20rem;
	font: bold;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 12px;
	padding-top: 2px;
	padding-bottom: 2px;
	width: auto;
  }
}

/* écran tablette portrait et smartphone large */
@media only screen and (min-width: 600px) {
	#codehex {
	float: none;/**/
	margin-top: 12px;
	margin-left: auto;
	margin-right: auto;
	width: auto;
  }
}

/* écran tablette portrait et smartphone large */
@media only screen and (min-width: 600px) {
	#color1 {
	letter-spacing: 0.20rem;
	margin-left: auto;
	margin-right: auto;
	width: auto;
  }
}

/* écran tablette paysage et smartphone large */
@media only screen and (min-width: 768px) {
	#codehex {
	margin-top: 12px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 12px;
	width: auto;
  }
}

/* écran tablette paysage et smartphone large */
@media only screen and (min-width: 768px) {
	#color1 {
	letter-spacing: 0.20rem;
	margin-left: auto;
	margin-right: auto;
	width: auto;
  }
}

/* écran laptops/desktop */
@media only screen and (min-width: 992px) {
	#codehex {
	margin-top: 12px;
	margin-left: auto;
	margin-right: auto;
	width: auto;
  }
}

/* écran laptops/desktop */
@media only screen and (min-width: 992px) {
	#color1 {
	letter-spacing: 0.20rem;
	margin-left: auto;
	margin-right: auto;
	width: auto;
  }
}