:root{
/* --base_color:#e7eaed; */
--base_color:#d3d6da;
--base_color_less:#eef2f7;
--base_color_more:#bcbec4;
--action_color:#48a5ee;
--action_color: rgb(60,150,255);
--action_color_less:#4ac6ff;
--action_color_less_less:#78d3fd;
--base_letter:black;
}

a:link {
text-decoration:none;
color:var(--action_color);
}
a:visited {
text-decoration:none;
color:var(--action_color);
}
a:hover {
text-decoration:none;
color:var(--action_color_less);
}
a:active {
text-decoration:none;
color:var(--action_color);
}
::placeholder {
color:#c0c0c0;
font-family: arial, sans-serif;
font-weight: 100;
}
li{
list-style-type: none;
}
select{
height:30px;
border:#333 1px solid;
text-align:left;
text-indent:10px;
font-size:16px;
text-decoration:none;
}

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 40px white inset;
}
input[type=number], input[type=text] {
  padding: 5px 10px;
}
.input_form {
  width: 95%;
  margin-bottom: 30px;
  padding: 15px 30px;
  font-size: 14px;
  border-radius: 30px;
  text-align: center;
  border: 1px solid #ececec;
  box-shadow: 6px 0px 43px rgba(131, 131, 131, 0.13);
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
}

.input_form:focus {
  border: 1px solid #3c9cfd;
  outline: none;
  box-shadow: none;
}

.btn {
  font-size: 14px;
  padding: 12px 30px;
  margin: 10px;
  border-radius: 30px;
  font-family: 'Poppins', sans-serif;
  letter-spacing: 1px;
  white-space:nowrap;
  font-weight: 600;
  color: white;
  border: none;
  text-transform: uppercase;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  cursor: pointer;
  -webkit-appearance: none; /***  Annule le style des inputs pour safari***/
  appearance: none;
}
.btn_commun{
  background-color: var(--action_color) !important;
  color: white;
}
.btn_commun:hover {
  color: #fff;
  box-shadow: 0px 8px 9px 0px rgba(96, 94, 94, 0.17);
}
.btn_commun_unavailable{
  background-color: #a0c5e2 !important;  
  color: white;
}
.btn_second_action{
  background-color: transparent !important;  
  border: 2px solid var(--action_color) !important;
  color: var(--action_color);
}
.btn_second_action_unavailable{
  background-color: #e6e8e8 !important;  
  border: 2px solid #c7c8c8 !important;
  color: white !important;
}
.btn_second_action:hover {
  box-shadow: 0px 8px 9px 0px rgba(96, 94, 94, 0.17);
}

.btn_option{
  text-transform: none;
  font-size: 12px;
  padding: 8px 20px;
  border-style: solid;
  border: 2px solid var(--action_color) !important;
  background-color: transparent !important;
  color: var(--action_color);
}
.btn_option:hover {
  box-shadow: 0px 8px 9px 0px rgba(96, 94, 94, 0.17);  
}
.btn_option_unavailable{
  text-transform: none;
  font-size: 12px;
  padding: 8px 20px;
  border-style: solid;
  border: 2px solid #a0a0a0 !important;
  background-color: transparent !important;
  color: #a0a0a0 !important;
}
.btn_logout {
  background: #fff;
  color:var(--action_color);
  margin-top: 30px;
  float:right;
}
.btn_logout:hover {
  box-shadow: 0px 8px 9px 0px rgba(96, 94, 94, 0.17);
}
.btn_explication{
  border-style: solid;
  border-width: 2px;
  cursor: pointer;
  background-color: transparent !important;
  border-color: var(--action_color) !important;
  color: var(--action_color);}
.btn_explication:hover {
  box-shadow: 0px 8px 9px 0px rgba(96, 94, 94, 0.17);
}
.error_span{
display: block;
visibility: hidden;
color: red;
font-size: 14px;
margin:0px 0px 30px 0%;
}
/* SUPPRIMER LES FLECHES */
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
/***************  TEXTAREA READONLY  **********************/
.folder_timesheet textarea[readonly]{
border: none;
background-color: transparent;
}
/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
  appearance: textfield;
}

input:-moz-read-only, textarea:-moz-read-only {
background-color: transparent;
outline:none;
cursor:default;
}
input:read-only, textarea:read-only {
background-color: transparent;
outline:none;
cursor:default;
}
textarea{
resize : none;
padding: 0px;
}

/* *********  checkbox toggle  *************** */
.switch {
  position: relative;
  display: inline-block;
  width: 34px;
  height: 20px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 2px;
  bottom: 2px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: var(--action_color);
}

input:focus + .slider {
  box-shadow: 0 0 1px var(--action_color);
}

input:checked + .slider:before {
  -webkit-transform: translateX(14px);
  -ms-transform: translateX(14px);
  transform: translateX(14px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}
/*  *****************************  */
.lien_bouton{
color: black;
border: 1px solid;
border-radius: 5px;
padding:2px 10px 2px 10px;
margin: 2px 6px 2px 6px;
background-color: white;
}



input:hover{
cursor:pointer;
}


.div_input_form{
	float:left;
	padding-left:32px;
	padding-right:32px;
	padding-bottom:15px;
	padding-top:10px;
	text-align:left;
}


.popup_icon{
display: inline;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
cursor: pointer;
}
.popup_icon img{
width: 20px;
height: 20px;  
}
.popup_text {
display: inline-block;
position: relative;
right:-10px; top:10px;
bottom: 0px;
max-width: 500px;
background-color: #555;
color: #fff;
font-size: 14px;
text-align: center;
border-radius: 9px;
padding: 8px;
opacity:0.7;

}
/*;
.popup_icon:hover .popup_text{
opacity:0.7;
transform:scale(1);
}
.popup_text{
transition: opacity 1s;
}
*/



@media (min-width: 768px) and (max-width: 1200px) {

} 

/* tablets horizontale */
@media (min-width: 768px) and (max-width: 1024px) {

}

/* only small tablets vertical*/
@media (min-width: 768px) and (max-width: 991px) {

}

/* Only horizontal mobile */
@media only screen and (max-width: 767px) { 
.btn {
  font-size: 10px;
  padding: 5px 20px;
  margin: 5px;
}
}
/* Only vertical mobile  */
@media (min-width: 320px) and (max-width: 480px) {
.popup_text {
position: relative;
right:-10px; top:10px;
bottom: 0px;
width: 90%;
font-size: 16px;
}
}