/* static/css/styles.css */
.navbar .fa-bars {
    color: white; /* Couleur de l'icône */
}
.navbar {
    background-color: #542b8b;
   color: white;
   border-bottom: 2px solid white;
}
.select2-container {
    width: 100% !important;
}
.select2-selection {
    width: 100% !important;
}
#header {
    background-color: #542b8b;
   color: white;
   border-bottom: 2px solid white;
}

.breadcrumbs {
    background-color: #003555 !important; /* Change la couleur des breadcrumbs */
}

#site-name a {
    color: #5ce1e6 !important; /* Remplace par la couleur souhaitée */
    text-decoration: none;     /* Supprime les soulignements */
}

/* Effet au survol du site-name */
#site-name a:hover {
    color: #1d3263 !important; /* Couleur au survol */
    text-decoration: underline;
}

.content#content-start {

    background: linear-gradient(135deg, #1d3263, #442063, #1f2d51, #342557, #2b233c);
}
.highlight-row {
  background-color: #ffeb3b !important;
}
.highlight-row td {
  background-color: transparent !important;
}
.module caption {
    background-color: #542b8b;
   color: white;
   border-bottom: 2px solid white;
}

.module h2 {
    background-color: #542b8b;
   color: white;
   }

.module p {
    color: white;
    }

.navbar .nav-link {
    color: white; /* Couleur du texte pour les liens */
}

.navbar .navbar-brand {
    color: white; /* Couleur du texte pour les liens */
}

html, body {
    background: linear-gradient(135deg, #1d3263, #442063, #1f2d51, #342557, #2b233c);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    width: 100%;
    height: auto;
    min-height: 100%;
}
.login {
    background-color: transparent;
}
.login .colM{
    background-color: #003555; /* Blanc pour les conteneurs */
}
.login .footer{
    background-color: transparent ! important; /* Blanc pour les conteneurs */
}
.container-main {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.container-transparent {
    width: 90%;
    margin-bottom: 20px;
    margin-top: 20px;
    padding: 10px;
}

.container-title,
.container-content {
    width: 90%;
    margin-bottom: 20px;
    margin-top: 20px;
    padding: 20px;
    background-color: #ffffff; /* Blanc pour les conteneurs */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.sub-container {
    background-color: #ffffff;
    margin-bottom: 20px;
    margin-top: 20px;
    padding: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);}
}

h1 {
    color: #2C3E50; /* Bleu marine pour les titres */
    font-family: LASTICA;
}

p {
    color: #2C3E50; /* Bleu marine pour le texte */
}

.btn-primary {
    background-color: #542b8b; /* Bleu ciel pour les boutons */
    color: #ECF0F1; /* Blanc cassé pour le texte des boutons */
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active {
    background-color: #3f7de0; /* Vert menthe pour les boutons au survol */
}

 .align-bottom {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 100%;
}
.btn-xs {
    padding: 0.5 0.5;
    margin: 0.5 0.5;
    font-size: .25rem;
    line-height: 0.5;
    border-radius: .2rem;
}

hr {
    border: 0;
    height: 2px;
    background-color: #542b8b;
    margin: 20px 0;
}

a {
    color: #3498DB; /* Bleu ciel pour les liens */
}

a:hover {
    color: #1ABC9C; /* Vert menthe pour les liens au survol */
}
.page-item {
    padding: 0.5 0.5;
    margin: 1 0.5;
    font-size: .25rem;
    line-height: 0.5;
    border-radius: .2rem;
}
.page-item.active .page-link{
    background-color: #542b8b !important;

}

.introjs-tooltip {
    background-color: #003555 !important;
    color: white;
    border-radius: 8px;
    padding: 20px;
}

/* Texte à l'intérieur de la boîte */
.introjs-tooltiptext {
    font-size: 16px;
    line-height: 1.5;
}

/* Boutons personnalisés */
.introjs-button {
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    padding: 10px 15px;
    cursor: pointer;
}

.introjs-button:hover {
    background-color: #0056b3;
}

/* Calque de mise en évidence */
.introjs-helperLayer {
    border: 2px solid #007bff;
}

/* Arrière-plan foncé */
.introjs-overlay {
    background: rgba(0, 0, 0, 0.7);
}

input[type="number"] {
    max-width: 100px;
    text-align: center; /* Aligne le texte dans l'input */
    font-size: 14px; /* Ajuste la taille de la police pour que l'input soit plus compact */
}

.date-select
{
    width: 100%;
    text-align: left; /* Aligne le texte dans l'input */
    font-size: 14px; /* Ajuste la taille de la police pour que l'input soit plus compact */
}