/* Définition des couleurs */
:root {
  /* Header & Footer */
  --color-theme: #D572B4;

  /* Couleurs principales */
  --color-primary: #7B5BE3; /* header, footer, bouton principal */
  --color-secondary: #6C757D; /* bouton secondaire */

  /* Status / UI */
  --color-success: #1CC88A; /* Barre de progression réussit, succès */
  --color-warning: #F6C23E; /* alert / warning */
  --color-danger: #E74A3B; /* alert / danger */
  --color-info: #36B9CC; /* info / badges / infos bars */
  
  /* DataTable */
  --color-dt-header: var(--color-theme); /* header de la datatable */
  --color-dt-row-alt: #F8F9FC; /* Lignes alternées de la table */

  /* Progress bar */
  --color-progress-done: #c5cee7;
  --color-progress-todo: white;
}

html, body {
  background-color: whitesmoke;
  font-family: "Lato", Helvetica, Arial, sans-serif;
	line-height: 1.72222;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-weight: 700;
  line-height: 1.1;
}

h1, .h1 {
  font-size: 3rem;
}

h4, h5, h6, .h4, .h5, .h6 {
  margin: 15px auto;
}

main {
  font-size: 18px;
  flex: 1;
}

#wrap {
  padding: 20px;
	display: table;
	width: 100%;
}

#content {
  background-color: whitesmoke;
	height: auto;
	margin: 5px auto;
	padding : 15px 0px 0px 0px;
	max-width: 768px;
}

fieldset {
    border-style: solid;
    border-width: 1px;
    border-color: color-mix(in srgb, var(--color-theme) 10%, black);
    border-radius: 5px;
    padding: 5px 12px 10px 12px;
    overflow: auto;
    margin-bottom: 15px;
}

fieldset.first {
  border-top-left-radius: 0;
}

legend {
    color: color-mix(in srgb, var(--color-info) 10%, black);
    border-bottom: none;
    display: block;
    width: inherit;
    padding: 0;
    font-size: 16px;
    font-weight: bold;
    line-height: inherit;
    float: none;
    margin-left: auto;
}

legend a.btnLegend {
  color: inherit;
  text-decoration: underline;
}

legend a.btnLegend:hover {
  cursor: pointer;
}

label {
  font-weight: bold;
  line-height: 2;
}

label.control-label{
  color: color-mix(in srgb, var(--color-info) 80%, black);
}

.bundle {
  color: #FFFFFF;
  background-color: #0096c7;
  border: none;
  margin: 10px auto;
  border-radius:5px;
}

.nav-tabs {
  border-bottom: none;
  margin-bottom: -13px;
}

.nav-tabs .nav-link {
  color: black;
}

.nav-tabs .nav-link.active {
  background-color: whitesmoke;
  border-color: color-mix(in srgb, var(--color-theme) 10%, black);
  border-bottom-color: transparent;
}

.alert-primary {
  border-color: #219ebc;
  margin-top: 15px;
}