body {
  font-family: Verdana, sans-serif;
  background: #f5f5f5;
  padding: 20px;
  color: #222;
  font-size:0.7em;
  width:80%;
  margin:0 auto;
}
nav {
	position: absolute;
    top: 60px;
    left: 8%;
    width: 24px;
}
nav a {
	display:inline-block;
	margin-right:7px;
	text-decoration:none;
	color:#CCCCCC;
}
nav a.active,
nav a:hover {
	color:#545454;
	text-decoration:none;
}
h1, h2 {
  margin: 0 0 10px 10px;
  font-weight:normal;
}
a {
  text-decoration:none; color:black;
}
a:hover {
  text-decoration:underline;
}

.dashboard {
  display: flex;
  gap: 20px;
  margin-bottom:30px;
}

.colonne {
  flex: 1;
  background: white;
  padding: 15px;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
.clientList .colonne {
	padding:30px;
}
.titre {
  font-size:12px; 
  font-weight:bold;
  padding: 4px 8px;
}
.titre td:first-child {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}
.titre td:last-child {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

table + table {
	margin-top:30px;
}
.titre.vert {
  background: #8bc34a;
}

.titre.jaune {
  background: #ffeb3b;
}
.titre.gris {
  background: #cccccc;
}
.titre.lightgray {
 background: #f2f2f2;

}


table {
  width: 100%;
  border-collapse: collapse;
}

thead th {
  font-style:italic;
  font-weight: normal;
  font-size:0.8em;
}
.titre.big td {
	font-size:16px;
	font-weight:normal;
	padding: 8px 16px
}
table .titre + tr:not(.spacer) td {
	padding-top:10px;
}
tbody tr:last-child:not(.titre) td {
	padding-bottom:10px;
}
th, td {
  font-size:11px;
  padding: 4px 8px;
  /*border-bottom: 1px solid #ccc;*/
  text-align: left;
}

tfoot {
  background: #333;
  color: white;
  font-weight: bold;
}
tfoot th:first-child {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}
tfoot th:last-child {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}


.droite {
  text-align: right;
}

h2 + table {
  margin-top: 5px;
}

.clientColor {
	display:inline-block;
	width:10px; height:10px;
	border-radius:3px;
	margin-right:5px;
}

tbody.closed tr.titre td:first-child:before,
tbody.open tr.titre td:first-child:before {
    display: inline-block;
    font-size: 9px;
    line-height: 8px;
    margin-right: 10px;
}
tbody.closed tr.titre td:first-child:before {
	content: "\002B";
}
tbody.open tr.titre td:first-child:before {
	content: "\2212";
}
tbody.closed tr {
	display:none;
}
tbody.closed tr.titre,
tbody.closed tr.spacer {
	display:table-row;
}

tbody.accordionClosed tr {
	display:none;
}
tbody.accordionClosed tr.titre,
tbody.accordionClosed tr.spacer 	{ display:table-row; }


table.scroll tbody { display:block; max-height:108px; overflow-y:auto; position:relative; }
table.scroll tbody tr { display:table; width:100%; table-layout:fixed; }
table.scroll tfoot { display:table; width:100%; table-layout:fixed; }
table.scroll thead { display:table; width:100%; table-layout:fixed; }

@media screen and (max-width: 768px) {
  .dashboard {
    flex-direction: column;
  }
}
.dashboard.annees { display:flex; justify-content:center; align-items:center; padding:20px; }
.dashboard.annees .colonne { width:90%; max-width:1200px; }
canvas { width:100%!important; }

button { background:#e6e6e6; border:none; padding:5px 10px; margin:10px 0 20px; border-radius:4px; font-size:11px; cursor:pointer; }
button:hover { background:#f2f2f2; }


.modal { display:none; }
.modal.is-open { display:block; }
.modal__overlay { position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.6); display:flex; align-items:center; justify-content:center; z-index:1000; }
.modal__container { background:#fff; border-radius:12px; padding:20px 24px; max-width:600px; width:90%; max-height:90vh; overflow-y:auto; box-shadow:0 5px 30px rgba(0,0,0,0.2); animation:modal-slide-down .25s ease; }
.modal__header { display:flex; justify-content:space-between; align-items:top; border-bottom:1px solid #eee; margin-bottom:10px; }
.modal__title { font-size:1.2em; margin:0; font-weight:bold; }
.modal__dates { margin-top:0; margin-left: auto; width:auto; }
.modal__dates td { padding-top:0; font-size:9px; }
.modal__close:hover { color:#000; }
.modal__content { font-size:.95em; }
#facture-details { width:100%; border-collapse:collapse; margin-top:40px; margin-bottom:20px; border-bottom:1px solid #eee; }
#facture-total { text-align:right; margin-top:12px; margin-right:8px; }
#facture-total table { margin-left:auto; width:auto; }
#facture-total table td  { padding-right:0; padding-left:40px; text-align: right; }
#facture-total tr:last-child td { font-size:14px; }
@keyframes modal-slide-down { from { transform:translateY(-10px); opacity:0; } to { transform:translateY(0); opacity:1; } }

#add-task-form label 	{ display:inline-block; width:100px; font-size:11px; }
#add-task-form input[type='date'] 	{ display:inline-block; width:403px; font-size:11px; }
#add-task-form input[type='text']	{ display:inline-block; width:400px; font-size:11px; }
#add-task-form select 	{ display:inline-block; width:408px; font-size:11px; padding-top:1px; padding-bottom:1px; }