@charset "UTF-8";
/*  Accent sur les bleus */
/*$primary-color        : hsl(211, 39%, 23%);
$secondary-color      : hsl(211, 39%, 23%)43;

$darkgray             : hsl(209, 61%, 16%);
$darkestgray             : hsl(209, 61%, 16%);
$mediumgray           : hsl(209, 28%, 39%);
$lightgray            : #BCCCDC;
$extralightgray       : hsl(210, 36%, 96%);
*/
/* Neutre et gris */
/* Status de couleurs : */
/************************************************** STATUS *****************************************/
.status {
  color: #fff;
  border-radius: 30px;
  padding: 5px 15px;
  display: inline-block;
  background-color: #39bbd5;
}

.status.inline {
  padding: 2px 8px 3px 8px;
  font-size: 90%;
  line-height: 1em;
}

.status.green {
  background-color: #97BF0D;
}

.status.red {
  background-color: hsl(0, 79%, 32%);
}

.status.orange {
  background-color: hsl(43, 89%, 70%);
}

.status.blue {
  background-color: hsl(200, 59%, 43%);
}

.status.grey {
  background-color: hsl(211, 13%, 65%);
}

/************************************************** BUTTONS *****************************************/
.button {
  font-size: 14px;
  padding: 8px 10px;
  color: hsl(221, 68%, 93%);
  background-color: hsl(227, 50%, 59%);
  border-color: hsl(227, 50%, 59%);
  box-shadow: 0 4px 6px hsla(0, 0%, 0%, 0.2);
  display: inline-block;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  background-image: none;
  border: 1px solid transparent;
  white-space: nowrap;
  font-weight: bold;
  border-radius: 5px;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  transition: background-color 0.5s;
}
.button:hover {
  background-color: hsl(228, 45%, 45%);
  border-color: hsl(228, 45%, 45%);
  color: white;
}
.button:active {
  box-shadow: 0 1px 3px hsla(0, 0%, 0%, 0.2);
}
.button.secondary {
  /*background-color: $secondarycolor;
  border-color: $secondarycolor;
  color: $white;
  &:hover {
  	background-color: $secondarycolorhover;
  	border-color: $secondarycolorhover;
  	color: $white;
  }
  	*/
}

.button[disabled] {
  cursor: default;
  opacity: 0.5;
}

.button i.fa {
  margin-right: 5px;
}

/**** Delete button ***/
.button.delete {
  color: white;
  background-color: hsl(0, 79%, 32%);
  border-color: hsl(0, 79%, 32%);
}

.red {
  color: hsl(0, 79%, 32%);
}

/****** Add or green button ****/
.button.add, .button.green {
  color: white;
  background-color: hsl(227, 50%, 59%);
  border-color: hsl(227, 50%, 59%);
}

/**** do not use. Only to show that font-awesome works and it's vectorial */
.button.big {
  font-size: 5em;
  border-radius: 10px;
}

/************************************************** FORMS *****************************************/
input[type=text], input[type=number], input[type=date], input[type=time],
input[type=password], input[type=email], textarea, select {
  padding: 8px 9px;
  border: solid 1px hsl(214, 15%, 91%);
  outline: 0;
  width: 230px;
  background-color: hsl(216, 33%, 97%);
}

/* Style pour les champs input[type="time"] */
input[type=time], form .row .time {
  width: 80px; /* Définit la largeur du champ */
  height: 35px; /* Définit la hauteur du champ */
  padding: 5px; /* Espace intérieur pour améliorer la lisibilité */
  font-size: 16px; /* Taille de police pour améliorer la lisibilité */
  border: 1px solid #ccc; /* Bordure légère */
  border-radius: 5px; /* Coins arrondis */
  box-sizing: border-box; /* Inclut la bordure et le padding dans la largeur totale */
}

/* Style supplémentaire pour améliorer l'apparence */
input[type=time]:focus {
  outline: none; /* Supprime le contour par défaut lors du focus */
  box-shadow: 0 0 5px rgba(0, 123, 255, 0.5); /* Effet d'ombre pour le focus */
}

input[type=text][size] {
  width: auto;
}

td select {
  padding: 5px;
}

input[type=text], input[type=password], input[type=email], textarea {
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}

input:hover, textarea:hover, input:focus, textarea:focus {
  border-color: hsl(214, 15%, 91%);
  background: hsl(216, 33%, 97%);
}

input:focus, textarea:focus {
  border-color: hsl(211, 13%, 65%);
  outline: 0;
}

select, input[type=radio], input[type=checkbox] {
  width: auto;
}

input.errorform {
  border: 1px solid hsl(0, 79%, 32%);
  color: hsl(0, 79%, 32%);
  background: none;
  background-color: hsl(0, 100%, 97%);
}

input.errorform:focus, input.errorform:hover {
  border: 1px solid hsl(0, 79%, 32%);
  background-color: hsl(0, 100%, 97%);
  -webkit-box-shadow: 0 1px 2px hsl(0, 79%, 32%) inset;
  -moz-box-shadow: 0 1px 2px hsl(0, 79%, 32%) inset;
}

.errorform::-webkit-input-placeholder {
  color: hsl(0, 79%, 32%);
}

.errorform:-moz-placeholder {
  color: hsl(0, 79%, 32%);
}

.errorform:-ms-input-placeholder {
  color: hsl(0, 79%, 32%);
}

textarea.dialog, textarea.dialog:focus {
  border: 0px;
  background: none;
  box-shadow: none;
}

input, textarea {
  border: 1px solid hsl(214, 15%, 91%);
  outline: medium none;
  background-color: hsl(216, 33%, 97%);
  margin: 0;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -webkit-background-clip: padding-box;
  border-radius: 4px;
}

input[type=button] {
  padding: 6px 8px;
}

input.color {
  background: white;
}

input.invalid, textarea.invalid {
  border: 1px solid hsl(0, 79%, 32%);
}

input.invalid:focus, textarea.invalid:focus {
  border: 1px solid hsl(0, 79%, 32%);
  -webkit-box-shadow: 0 1px 2px hsl(0, 79%, 32%) inset;
  -moz-box-shadow: 0 1px 2px hsl(0, 79%, 32%) inset;
}

input[type=checkbox] {
  border: 0px;
  padding: 0px;
  margin-right: 5px;
}

textarea {
  resize: none;
}

input.number, .row input.number {
  width: 40px;
}

/************************************************** TAGS *****************************************/
li.tags, .tags a {
  float: left;
  height: 20px;
  line-height: 20px;
  position: relative;
  list-style: none;
  margin-bottom: 2px;
  white-space: nowrap;
}

.tags a {
  margin-left: 20px;
  padding: 0 10px 0 12px;
  background: hsl(200, 59%, 43%);
  border-color: transparent hsl(200, 59%, 43%) transparent transparent;
  color: #fff;
  text-decoration: none;
  font-size: 0.8em;
}

.tags a:before {
  content: "";
  float: left;
  position: absolute;
  top: 0;
  left: -12px;
  width: 0;
  height: 0;
  border-color: inherit;
  border-style: solid;
  border-width: 10px 12px 10px 0;
}

.tags a:after {
  content: "";
  position: absolute;
  top: 10px;
  left: 0;
  float: left;
  width: 4px;
  height: 4px;
  border-radius: 3px;
  background: #fff;
}

.tags a:hover {
  background: #555;
  border-color: transparent #555 transparent transparent;
  text-decoration: none;
  color: #fff;
}

.tags a:hover:before {
  border-color: inherit;
}

/************************************************** RIBBON *****************************************/
div.ribbon {
  position: absolute;
  right: 0px;
}

/* for correct centering, do not use float right */
h1 div.ribbon {
  float: none;
  margin-left: 20px;
  display: inline;
  font-size: 16px;
}

li.ribbon, .ribbon span {
  float: left;
  height: 30px;
  line-height: 30px;
  position: relative;
  list-style: none;
  margin-bottom: 2px;
}

.ribbon span {
  margin-left: 30px;
  padding: 0 10px 0 12px;
  background: hsl(200, 59%, 43%);
  color: #fff;
  text-decoration: none;
  font-size: 1em;
}

.ribbon span:before {
  content: "";
  float: left;
  position: absolute;
  top: 0;
  left: -12px;
  width: 0;
  height: 0;
  border-color: inherit;
  /* MUST BE SET ON SPAN */
  /* transparent #0089e0 transparent transparent; */
  border-style: solid;
  border-width: 15px 12px 15px 0;
}

.ribbon span:after {
  content: "";
  position: absolute;
  top: 15px;
  left: 0;
  float: left;
  width: 4px;
  height: 4px;
  border-radius: 3px;
  background: #fff;
}

.ribbon.draft span {
  background-color: #d1d1d1;
}

.ribbon.draft span:before {
  border-color: transparent hsl(200, 59%, 43%) transparent transparent;
}

.ribbon.sent span {
  background-color: #97BF0D;
}

.ribbon.sent span:before {
  border-color: transparent #97BF0D transparent transparent;
}

/************************************************** jQuery UI customization *****************************************/
.ui-progressbar {
  position: relative;
}

.progress-label {
  position: absolute;
  left: 50%;
  margin-left: -70px;
  top: 4px;
  font-weight: normal;
}

#selector_calendar_content #dateinterval_from,
#selector_calendar_content #dateinterval_to {
  font-size: 1.25em;
  width: 100px;
}

div.selector_content {
  max-height: 500px;
}

/************************************************** Fast click *****************************************/
html {
  touch-action: manipulation;
}

/************************************************** Quick add *****************************************/
div.quick_add_in_select {
  display: inline-block;
  vertical-align: bottom;
  margin-left: 10px;
  margin-bottom: 3px;
}

div.quick_add_in_select i {
  font-size: 1.5em;
  cursor: pointer;
}

/* cols */
.cols .col30 {
  width: 33.33333%;
  float: left;
}

.cols .col30 > div {
  margin: 20px;
}

.cols .col30 > div img {
  max-width: 100%;
  height: auto;
}

.cols .col30 > div img.resp {
  width: 100%;
}

.cols .col50 {
  width: 50%;
  float: left;
}

.cols .col50 > div {
  margin: 20px;
  position: relative;
}

.cols .col25 {
  width: 25%;
  float: left;
}

.cols .col25 > div {
  margin: 20px;
}

.cols .col75 {
  width: 75%;
  float: left;
}

.cols .col25 > div {
  margin: 20px;
}

.cols .col25 div > div {
  margin: 10px 20px 20px 0px;
}

/** iphone 2 -> 4 portrait and landscape */
@media screen and (max-width: 480px) {
  .cols .col25, .cols .col30, .cols .col50, .cols .col75 {
    width: auto;
    float: none;
  }
}
/* inventory event */
.event_inventory {
  margin: 10px 0px;
  position: relative;
  padding: 10px;
  border-bottom: 1px solid #f1f1f1;
}

.event_inventory:hover {
  background-color: #f1f1f1;
}

.event_inventory_user {
  font-weight: bold;
  font-size: 1.2em;
  float: left;
}

.event_inventory_user i {
  font-size: 1.5em;
}

.event_inventory_date {
  float: right;
}

.event_inventory_comment {
  font-style: italic;
  clear: both;
  padding: 5px 0px;
}

.event_inventory_action {
  display: none;
  position: absolute;
  right: 10px;
  bottom: 10px;
}

.event_inventory:hover .event_inventory_action {
  display: block;
}

span.task_color_marker {
  display: inline-block;
  min-width: 80px;
  padding: 2px 10px;
  border-radius: 5px;
  text-align: center;
  font-size: 0.85em;
  border: 0;
  font-weight: bold;
  text-transform: uppercase;
}

/* Totaux dans les rapports */
.totals {
  margin: 10px 0px;
  font-size: 1.2em;
}

.totals span {
  margin-right: 10px;
  font-weight: bold;
}

.totals .trashed {
  background-color: hsl(0, 79%, 32%);
  border-radius: 10px;
  padding: 4px 12px;
  color: #fff;
}

.totals .sold {
  background-color: #97BF0D;
  border-radius: 10px;
  padding: 4px 12px;
  color: #fff;
}

.totals .pcttrashed {
  background-color: #313131;
  border-radius: 10px;
  padding: 4px 12px;
  color: #fff;
}

.totals .ordered {
  background-color: hsl(200, 59%, 43%);
  border-radius: 10px;
  padding: 4px 12px;
  color: #fff;
}

/* Tags */
li.tags,
.tags a {
  float: left;
  height: 20px;
  line-height: 20px;
  position: relative;
  list-style: none;
  margin-bottom: 2px;
  white-space: nowrap;
  text-decoration: none;
}

.datagrid .tags a {
  text-decoration: none;
}

.tags a {
  margin-left: 20px;
  padding: 0 10px 0 12px;
  background: hsl(200, 59%, 43%);
  border-color: transparent hsl(200, 59%, 43%) transparent transparent;
  color: #fff;
  text-decoration: none;
  font-size: 0.8em;
}

.tags a:before {
  content: "";
  float: left;
  position: absolute;
  top: 0;
  left: -12px;
  width: 0;
  height: 0;
  border-color: inherit;
  border-style: solid;
  border-width: 10px 12px 10px 0;
}

.tags a:after {
  content: "";
  position: absolute;
  top: 10px;
  left: 0;
  float: left;
  width: 4px;
  height: 4px;
  border-radius: 3px;
  background: #fff;
  /*
  -moz-box-shadow:-1px -1px 2px #004977;
  -webkit-box-shadow:-1px -1px 2px #004977;
  box-shadow:-1px -1px 2px #004977;
  */
}

.tags a:hover {
  background: #555;
  border-color: transparent #555 transparent transparent;
  text-decoration: none;
  color: #fff;
}

.tags a:hover:before {
  border-color: inherit;
}/*# sourceMappingURL=components.css.map */