@import url("https://fonts.googleapis.com/css2?family=Lato:wght@400;700;900&display=swap");

@media (max-width: 600px) {
  .container {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    overflow: hidden;
  }
}

/* Dark theme */
html[theme="dark-mode"] {
  filter: invert(1) hue-rotate(180deg);
}
html[theme="dark-mode"] img {
  filter: invert(1) hue-rotate(180deg);
}

body {
  font-family: "Lato", sans-serif;
}

/*Scrollbar*/

@media (min-width: 1000px) {
  /* width */
  ::-webkit-scrollbar {
    width: 7px;
    height: 7px;
  }

  /* Track */
  ::-webkit-scrollbar-track {
    background: #ececec;
  }

  /* Handle */
  ::-webkit-scrollbar-thumb {
    background: #cbcbcb;
  }

  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover {
    background: #b4b4b4;
  }
}

/* Blocks */

.content-block {
  padding: 10px;
  background: var(--paper);
}

@media (max-width: 768px) {
  .content-block,
  .background-white {
    box-shadow: unset !important;
    border-radius: 0 !important;
  }
}

.content-block > *:first-child {
  margin-top: 0;
}
.content-block > *:last-child {
  margin-bottom: 0;
}

.content-block h2 {
  margin: 0;
  font-size: 1.2em;
  color: #999;
}

.content-block h3 {
  font-size: 1em;
}

.content-block,
.background-white {
  background-color: var(--paper);
}
.content-block-header {
  border-radius: 2px 2px 0 0;
  background: whitesmoke;
  padding: 10px;
  border-bottom: 1px solid #a0a0a0;
}
.content-block-header-big {
  border-radius: 2px 2px 0 0;
  background: whitesmoke;
  padding: 10px;
}
.content-block-header h3 {
  margin: 0;
}
.content-block-footer button {
  width: 100%;
  border-radius: 0;
  padding: 15px;
  font-size: 1.1em;
}
.content-block h3 {
  margin: 0;
  font-size: 1.2em;
  color: #999;
  border-bottom: 1px solid #eaeaea;
  padding-bottom: 5px;
  margin-top: 20px;
}
.content-block h3:first-child {
  margin-top: 0;
}

.content-block #publication-ec button
{
	background: #eee;
	border-radius: 15px;
	border: none;
}

/* Statut bar recap controles et fancybox controles */
#statut-bar .adv,#statut-bar .install, #edit-controles .adv,#edit-controles .install{
  border: 1px solid #ddd;
  padding: 1px 5px;
}

#edit-controles h2 div, #edit-controles h2 span{
  font-size: 13px;
}

#statut-bar fieldset.adv legend, #statut-bar fieldset.install legend, #edit-controles fieldset.adv legend, #edit-controles fieldset.install legend{
  border: none;
  padding: 0 5px;
  background: none;
}

#statut-bar fieldset.adv, #statut-bar fieldset.install, #edit-controles fieldset.adv, #edit-controles fieldset.install{
  background: none;
}

/* Taux de service */

.taux-service{
  border: 1px solid #ccc;
  width: 100px;
  padding: 10px;
  margin: 5px 30px;
}

.taux-service .taux{
  color: black;
  font-size: 25px;
}

.taux-service span{
  font-size: 10px;
}

.taux-service a{
  display: block;
}

/* Fancybox detail documents */

.societe-document-actions,.flex-100{
  flex: 0 0 100%;
}

.societe-documents li{
  border: 1px solid #CCC;
  border-bottom: none;
  padding: 2px;
}

.societe-documents li:last-child{
  border-bottom: 1px solid #CCC;
  border-bottom-left-radius: 2px;
  border-bottom-right-radius: 2px;
}

.societe-documents li:first-child{
  border-top-left-radius: 2px;
  border-top-right-radius: 2px;
}

/* Go top */

#gotop {
	display: none;
	position: fixed;
	right: 60px;
	top: 60px;
	z-index: 150;
	_display: none !important;
}
#gotop a{
	position: absolute;
	right: 0;
	width: 50px;
	height: 50px;
	background: url(../img/back_to_top.png) no-repeat 0 0;
	background-size: cover;
	filter: alpha(opacity=20);
	-ms-filter: "alpha(opacity=20)";
	opacity: .2;
	-moz-border-radius: 10px;
	border-radius: 10px;
	z-index: 5;
	-webkit-transition: all 200ms ease;
	-moz-transition: all 200ms ease;
	transition: all 200ms ease;
}
#gotop a:hover {
	background-color: white;
	filter: alpha(opacity=100);
	-ms-filter: "alpha(opacity=100)";
	opacity: 1;
}

/* Listing devis et commandes */

.biglist{
    margin: 0;
    list-style: none;
    padding: 0;
}

.biglist .controles{
  display: flex; 
  align-items: center;
}

.biglist .controles fieldset.adv, .biglist .controles fieldset.install{
  background: none;
  padding: 1px 5px;
}

.biglist .controles fieldset.adv legend, .biglist .controles fieldset.install legend{
  border: none;
  padding: 0 5px;
  background: none;
}

.biglist .controles div{
  margin-left: 0;
}

.biglist li:not(:last-child){
    border-bottom: 1px solid #eaeaea;
}
.biglist a{
    padding: 11px;
}
.biglist a:hover{
    text-decoration: none;
    background: #dfdfdf;
}

.biglist .active{
	background-color: #dfdfdf;
}

/* Custom error js validation form */
label.erreur-validation{
  display: block;
  color: #f44336;
}

/* ODOO */
#odoo{
	width: 65px;
	height: auto;
  display: inline-block;
}


/* STATUTS CMD*/

.statut,.priorite {
  border-radius: 3px;
  padding: 2px 10px;
  text-transform: uppercase;
  display: inline-block;
  text-align: center;
  font-weight: bold;
  background-color: #999;
  color: #fff;
}
.statut.small {
  font-size: 10px;
  line-height: 10px;
  letter-spacing: 0.5px;
  padding: 3px 3px;
}

.statut.a-mettre-en-prod,
.statut.warning,
.statut.non-conforme,
.statut.contrat-a-signer {
  background-color: #f44336;
  color: #fff;
}

.statut.commande {
  background-color: #4caf50;
  color: #fff;
}

.statut.client {
  background-color: #e2007a;
  color: #fff;
}
.statut.prospect {
  display: none;
}

.statut.reliquat,
.statut.reliquat-piscine,
.statut.vide,
.statut.rolling-deck,
.statut.rolling-decks,
.statut.murs-alu,
.statut.mur-separateur{
  background-color: #333;
  color: #fff;
}

.statut[class^='grande-terrasse'], .statut[class*=' grande-terrasse'], .statut.sav{
  background-color: #e36300;
  color: #fff;
}

.statut.express{
  background-color: #333;
}

.statut.en-prepa {
  background-color: #e2007a;
  color: #fff;
}
.statut.pret,
.statut.pret-partiel {
  background-color: #d600e2;
  color: #ffffff;
}
.statut.expedie,
.statut.expedie-partiel {
  background-color: #6e00e2;
  color: #ffffff;
}

.statut.facture,
.statut.facture-partiel {
  background-color: #01579b;
  color: #fff;
}

.statut.devis {
  background-color: #ffc107;
  color: #fff;
}

.statut.devis.internet, .statut.intervenant {
	background-color: #2196F3;
	color: #fff;
}

.statut.annule {
  background-color: #555;
  color: #fff;
}
.statut.statut-opportunite.piscinelle {
  background: #777;
}
.statut.statut-opportunite.rolling-deck {
  background: #ff7043;
}
.statut.statut-opportunite.petite-source {
  background: #10253f;
}

.grey-block {
  border: 1px solid #ccc;
  padding: 10px;
  border-radius: 2px;
  background: #f9f9f9;
}

.filter-block {
  background: #eee;
  padding-top: 10px;
  padding-bottom: 10px;
}
.filter-block h3 {
  margin: 0;
  margin-bottom: 10px;
  font-weight: bold;
  color: #999;
}

.flex-container {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}

.flex-block {
  /*flex-grow: 1;*/
}

.pointer {
  cursor: pointer;
}
tr.active {
  background: #e6c2d5 !important;
}

/** Supression preuves **/

#supprimer-preuves:hover{
  text-decoration: underline;
  cursor: pointer;
}

/* Dropdown */

.dropdown-content.show {
  opacity: 1;
  display: block;
}
@media only screen and (min-width: 769px) {
  .dropdown-content .close-dropdown {
    display: none;
  }
}
@media only screen and (max-width: 768px) {
  .dropdown-content.show {
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    position: fixed;
    overflow-x: auto;
  }
}

.dropdown-content {
  background-color: #fff;
  display: none;
  opacity: 0;
  min-width: 100px;
  overflow-y: auto;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 9999;
  list-style-type: none;
  -webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),
    0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),
    0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
}
ul.list-link {
  margin: 0;
  padding-left: 0;
}
ul.list-link li {
  clear: both;
  color: rgba(0, 0, 0, 0.87);
  cursor: pointer;
  min-height: 34px;
  line-height: 1.5rem;
  width: 100%;
  text-align: left;
  position: relative;
  list-style: none;
}

ul.list-link li .muted{
  color: #999;
}

ul.list-link li:hover {
  background-color: #eee;
}
ul.list-link li.active {
  background-color: #eaeaea;
}
ul.list-link li:hover a,
ul.list-link li.active a {
  text-decoration: none;
}
ul.list-link li > a,
ul.list-link li > span {
  display: block;
  line-height: 22px;
  padding: 6px 13px;
  padding-right: 38px;
  color: #222;
}
ul.list-link li:focus {
  outline: none;
}
ul.list-link li.divider {
  min-height: 0;
  height: 1px;
  overflow: hidden;
  background-color: #e0e0e0;
}

ul.list-link a.left-icon {
  padding-left: 35px;
}
ul.list-link a.left-icon > i:first-child {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%) translateX(-50%);
  color: #cecece;
  font-size: 1.5em;
}

span.badge {
  position: absolute;
  right: 13px;
  top: 50%;
  transform: translateY(-50%);
  color: #757575;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

/* Collaps */

.collapsed {
  display: none;
}
.collapsed.active {
  display: block;
}
.collapsible li > a:after {
  content: "▼";
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  color: #d0d0d0;
}
.collapsible li > a.active:after {
  content: "▲";
}

ul.collapsible {
  border-top: 1px solid #ddd;
  border-right: 1px solid #ddd;
  border-left: 1px solid #ddd;
  margin: 0.5rem 0 1rem 0;
  list-style-type: none;
  margin: 0;
  padding: 0;
  margin-bottom: 20px;
}
.collapsible li > a {
  display: block;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  line-height: 1.5;
  padding: 1rem;
  background-color: #fff;
  border-bottom: 1px solid #ddd;
  position: relative;
}
.collapsible li > div {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  line-height: 1.5;
  padding: 1rem;
  background-color: #fff;
  border-bottom: 1px solid #ddd;
}

/* tabs */

.tabs {
  padding: 0;
  position: relative;
  overflow-x: auto;
  overflow-y: hidden;
  width: 100%;
  margin: 0 auto;
  white-space: nowrap;
  /*height: 48px;*/
  height: 58px;
}
li.tab {
  display: inline-block;
  /*line-height: 48px;
  height: 48px;*/
  line-height: 58px;
  height: 58px;
  text-transform: uppercase;
}
.tabs li.tab a {
  color: rgb(153, 153, 153);
  display: block;
  width: 100%;
  height: 100%;
  padding: 0 24px;
  font-size: 14px;
  text-overflow: ellipsis;
  overflow: hidden;
  -webkit-transition: color 0.28s ease, background-color 0.28s ease;
  transition: color 0.28s ease, background-color 0.28s ease;
  text-decoration: none;
}
.tabs li.tab a.active {
  color: #e2007a;
  border-bottom: 2px solid #e2007a;
  background: #80808012;
}
.tabs li.tab a .on-active {
  display: none;
}
.tabs li.tab a.active .on-active {
  display: inline-block;
}
.tab a:hover {
  background: #8080800d;
}

.tabs .pill {
  border-radius: 50px;
  background: #4bca80;
  padding: 1px 5px;
  margin-left: 5px;
  color: white;
  font-size: 0.9em;
  font-weight: bold;
}

/* Auto size textarea */
.autosize {
  resize: none;
  overflow: hidden;
  min-height: 46px;
}

/* custom radios labels */

.radio-custom {
  display: none;
}
.radio-custom + label {
  --background: #c7c7c7;
  --text: black;
  background: #ecebea;
  color: black;
  padding: 10px;
  border-radius: 5px;
  cursor: pointer;
  display: inline-block;
  width: auto;
}
.radio-custom:checked + label {
  background: var(--background);
  color: var(--text);
}

/* Frise */

.frise {
  display: flex;
  background: #4bca80;
  text-align: center;
  margin: 10px 0;
  border-radius: 15px;
  overflow: hidden;
  overflow-x: auto;
}

.frise input[type="radio"] {
  display: none;
}

.frise .point {
  flex-grow: 1;
  padding: 7px 0px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.frise .point .link,
.frise .point {
  color: white;
}
.frise .point.active ~ .point,
.frise input[type="radio"]:checked + .point ~ .point,
.frise.no_checked .point {
  background: #ecebea;
  color: black;
}
.frise .point.active ~ .point .link {
  color: #e2007a;
}
.frise label.point {
  cursor: pointer;
}

.frise .point.active ~ .point:after,
.frise input[type="radio"]:checked + .point ~ .point:after,
.frise.no_checked input[type="radio"]:not(:checked) + .point:after {
  border-left: 16px solid #ecebea !important;
}

.frise .point:not(:first-of-type) {
  padding-left: 28px;
}
.frise .point:first-of-type {
  padding-left: 10px;
}
.frise .point:last-of-type {
  padding-right: 10px;
}
.frise .point:not(:last-child):before,
.frise .point:not(:last-child):after {
  content: "";
  z-index: 2;
  display: inline-block;
  height: 0;
  position: absolute;
}
.frise .point:not(:last-child):after {
  right: -16px;
  border-left: 16px solid #4bca80;
  border-top: 25px solid #ffffff00;
  border-bottom: 25px solid #ffffff00;
}

.frise .point:not(:last-child):before {
  right: -19px;
  border-left: 19px solid #ffffff;
  border-top: 31px solid #ffffff00;
  border-bottom: 31px solid #ffffff00;
}

.frise .point.active,
.frise input[type="radio"]:checked + .point {
  background: #005fb2;
  color: white;
  font-weight: bold;
}
.frise .point.active:not(:last-child):after,
.frise input[type="radio"]:checked + .point:not(:last-child):after {
  border-top: 25px solid #ffffff00;
  border-bottom: 25px solid #ffffff00;
  border-left: 16px solid #005fb2;
}

/* Opportunites */
.rappel-input-date {
  transition: background-color 0.3s ease 0s;
}

/* form part */
.form-part-header input,
.dropdown input {
  display: none;
}
.form-part-header label,
label.dropdown {
  color: #999;
  cursor: pointer;
}
.form-part-header label:hover,
label.dropdown:hover {
  text-decoration: underline;
}
.form-part-header input:checked + span:after,
.form-part-header input:not(:checked) + span:after,
.dropdown input:checked + span:after,
.dropdown input:not(:checked) + span:after {
  margin-left: 5px;
  display: inline-block;
}
.form-part-header input:checked + span:after,
.dropdown input:checked + span:after {
  content: "˄";
}
.form-part-header input:not(:checked) + span:after,
.dropdown input:not(:checked) + span:after {
  content: "˅";
}

.form-part-header.rappel input:checked + span:before {
  content: "Définir un rappel";
}
.form-part-header.rappel input:not(:checked) + span:before {
  content: "Ne pas définir de rappel";
}
.form-part-header.rdv input:not(:checked) + span:before {
  content: "Prévoir un nouveau rendez-vous";
}
.form-part-header.rdv input:checked + span:before {
  content: "Ne pas prévoir de rendez-vous";
}
.form-part-header.mail input:not(:checked) + span:before {
  content: "Envoyer un mail au contact";
}
.form-part-header.mail input:checked + span:before {
  content: "Ne pas envoyer un mail au contact";
}
.form-part-header.rappel input:checked + span:after {
  content: "˅";
}
.form-part-header.rappel input:not(:checked) + span:after {
  content: "˄";
}

/* Helpers */
.text-center {
  text-align: center;
}
.text-piscinelle {
  color: #e2007a;
}

.d-flex {
  display: flex;
}
.flex-row {
  flex-direction: row;
}
.flex-column {
  flex-direction: column;
}
.flex-row-reverse {
  flex-direction: row-reverse;
}
.justify-center {
  justify-content: center;
}
.justify-between {
  justify-content: space-between;
}
.justify-end {
  justify-content: flex-end;
}
.align-center {
  align-items: center;
}
.align-baseline {
  align-items: baseline;
}
.align-top{
	align-items:start;
}
.flex-wrap{
	flex-wrap: wrap;
}
.flex-hbetween-vcenter {
  align-items: center;
  display: flex;
  justify-content: space-between;
}
.flex-haround-vcenter {
  align-items: center;
  display: flex;
  justify-content: space-around;
}

.gap20{
  gap: 20px;
}

.gap10{
  gap: 10px;
}

.mr10 {
  margin-right: 10px;
}
.mb20{
	margin-bottom:20px;
}
.m0:not(.marche){
	margin:0!important;
}
.p0 {
  padding: 0 !important;
}
.pl {
  padding-left: 10px;
}
.hidden {
  display: none;
}
.inline-block {
  display: inline-block;
}
.loading {
  padding: 10px;
  text-align: center;
}
.loading:before {
  content: "\f110";
  display: inline-block;
  font-family: "Font Awesome 5 Pro";
  -webkit-animation: fa-spin 2s infinite linear;
  animation: fa-spin 2s infinite linear;
  margin-right: 5px;
}
.loading:after {
  content: "Chargement...";
}
.background-transition {
  transition: background-color 0.3s ease 0s;
}

.mt-1{
  margin-top: 10px;
}

.mt-2{
  margin-top: 20px;
}

.ml-1 {
  margin-left: 3px;
}
.ml-2 {
  margin-left: 6px;
}
.ml-3 {
  margin-left: 9px;
}
.ml-4 {
  margin-left: 12px;
}
.ml-5 {
  margin-left: 15px;
}

.ml-10 {
  margin-left: 30px;
}

.mr-1 {
  margin-right: 3px;
}
.mr-2 {
  margin-right: 6px;
}
.mr-3 {
  margin-right: 9px;
}
.mr-4 {
  margin-right: 12px;
}
.mr-5 {
  margin-right: 15px;
}

/* Flex auto ul */
.row-ul {
  display: flex;
  flex-wrap: wrap;
}
.row-li {
  margin-right: 30px;
  margin-top: 7px;
  margin-bottom: 7px;
}
.row-ul.row-content-center .row-li {
  margin-right: 15px;
  margin-left: 15px;
}

/* Fav star */
.fas.fav-star {
  color: #e2007a;
}
.far.fav-star {
  color: black;
}

/* Fancybox */

.fancybox-content .content-block-header-big h1,
.fancybox-content h2:first-of-type {
  margin: 0;
  color: #999;
  text-align: center;
}
@media (max-width: 768px) {
  .fancybox-content {
    padding: 10px !important;
    padding-top: 35px !important;
  }
}

/* Galery */
/* Images */
.files,.photos{
	display:flex;
	flex-wrap:wrap;
}

.photo{
	width: 150px;
	height: auto;
}

.file {
  display: inline-flex;
  width: 150px;
  height: 150px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
  margin: 5px;
  flex-direction: column;
  background: #f4f4f4;
  text-align: center;
  border: 1px solid #f4f4f4;
}
.file.small.doc {
  padding: 5px;
  padding-bottom: 18px;
  font-size: 0.8em;
}
.file.small {
  margin: 3px;
}
.file.doc {
  word-break: break-all;
  width: 100%;
}
.file.doc span {
  overflow: hidden;
}
.file:hover {
  text-decoration: none;
}
.file.small {
  width: 75px;
  height: 75px;
}
.file .date {
  position: absolute;
  bottom: 0px;
  background: rgba(0, 0, 0, 0.3);
  color: white;
  padding: 5px;
  width: 100%;
}
.file.small .date {
  font-size: 0.7rem;
  padding: 3px;
}
.file b {
  margin-bottom: 10px;
  font-size: 1.1em;
}
.file.small b {
  margin-bottom: 0px;
}
.file img.portrait {
  width: 100%;
  max-height: unset;
  height: auto;
}
.file img.landscape {
  height: 100%;
  max-width: unset;
  width: auto;
}
.file:not(.selection) input[type="checkbox"] {
  display: none;
}
.file.selection input[type="checkbox"] {
  position: absolute;
  right: 3px;
  bottom: 3px;
  height: 20px;
  width: 20px;
  opacity: 0.9;
  z-index: 10;
}
.file.selection .select:checked + img {
  opacity: 0.5;
}
.selection-actions {
  display: none;
}