/* LOGIN BOX
-------------------------------------------------- */
.loginContainer {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    /*background-image: var(--light-blue-gradient);*/
}
.loginBox {
    max-width: 300px;
    text-align: center;
}
.loginBox h1 {
    /*color: var(--ultra-light-grey);*/
}
.loginForm {
    padding: 20px;
    background-color: rgba(255,255,255,.5);
}
.loginField {
    margin: .5rem 0;
}
.loginForgPwd {
    /*color: var(--ultra-light-grey);*/
    font-size: .9rem;
    border-bottom: 1px solid #fff;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    margin-top: .5rem;
    transition: all ease .5s;
}
.loginForgPwd:hover {
    color: #fff;
    /*border-bottom: 1px solid var(--middle-grey);*/
}
.loginBtn {
    /*background-color: var(--light-green);*/
    /*background-image: var(--light-green-gradient);*/
}
.couleurFond1 {
    background-color: #ff7171;
    --bs-table-bg: transparent; /* Réinitialise l'effet pour toute utilisation */
}
.clickable {
    cursor: pointer;
    padding-left :10px;
}
th {
    font-weight: normal !important;
    font-size: 14px;
}
.pagination-link {
    cursor: pointer;
    border: 1px solid #ff7171;
    padding: .125rem .375rem;
    border-radius: .25rem;
}
.current-page{
    font-weight: bold;
}

tr {
    --bs-table-bg: transparent;
}
td{
    font-size: 12px;
}
th {
    font-weight: bold !important;
}
.tie-statut-10 {
    background-color: #b9b9f6 !important;
}
.tie-statut-20 {
    background-color: #6df679 !important;
}
.tie-statut-15 {
    background-color: #f6b925 !important;
}
.tie-statut-17 {
    background-color: #f6b925 !important;
}



table > tbody > tr.statut-tie-10 {
    background: linear-gradient(to right, #b9b9f6,#ffffff );
}

table > tbody > tr.statut-tie-20 {
    background: linear-gradient(to right, #6df679,#ffffff );
}

table > tbody > tr.statut-tie-15 {
    background: linear-gradient(to right, #f6b925,#ffffff );
}

table > tbody > tr.statut-tie-17 {
    background: linear-gradient(to right, #f6b925,#ffffff );
}


table > tbody > tr.statut-tie-retard {
    background: linear-gradient(to right, #FF643F,#ffffff );
}

table > tbody > tr.statut-marchandises-parti {
    background-color: #CACACA;
}

table > tbody > tr.statut-marchandises-charger {
    background-color: #8AE197 !important;
}

.menuEntry{
    color:#fff !important;
    padding-top:7px;
    padding-right: 7px;
    cursor: pointer;
}

table{
    border-collapse: collapse;
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10+ and Edge */
    user-select: none; /* Standard syntax */
}

.move{
    cursor: move;
}
.openti{
    cursor: pointer;
}
.sunday {
    background-color: #787878 !important;
}
.row {
    padding-top: 10px;
}

ul{
    margin:0;
    padding-left: 1rem;
}

.form-group {
    display: flex; /* Disposition en ligne */
    align-items: center; /* Aligne les éléments de manière centrale */
    margin-bottom: 15px; /* Espacement entre chaque groupe */
}

.form-group label {
    width: 150px; /* Largeur des labels, ajustez selon vos besoins */
    margin-right: 15px; /* Espacement entre le label et le champ */
    text-align: right; /* Alignement à droite pour les labels */
}

.form-group input,
.form-group select,
.form-group textarea {
    flex: 1; /* Les champs remplissent l'espace restant */
}
label {
    font-weight: bold;
    font-size: 14px;
}
body{
    font-size: 15px;
}
.form-control{
    font-size: 0.9rem;
}
.retard {
    color:red;
}
.cross-icon {
    position: relative;
    width: 23px;
    height: 12px;
    display: inline-block;
}

.cross-icon::before,
.cross-icon::after {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 2px;
    height: 100%;
    background-color: red;
    transform-origin: center;
    transform: translateX(-50%) rotate(45deg);
}

.cross-icon::after {
    transform: translateX(-50%) rotate(-45deg);
}

.pasdeboule {
        list-style: none; /* Supprime les puces */
        padding: 0;       /* Optionnel : retirer le padding du ul */
        margin: 0;        /* Optionnel : retirer la marge du ul */
}

select.form-control {
    border: 2px solid red; /* Une bordure de couleur bleue */
    border-radius: 5px;       /* Coins arrondis */
    padding: 5px;             /* Espacement intérieur pour un aspect agréable */
    background-color: #f8f6f6; /* Couleur de fond légère */
    cursor: pointer;          /* Ajoute un curseur en forme de "main", incitant à cliquer */
}

select.form-control:hover {
    background-color: #e2e6ea; /* Change légèrement la couleur au survol pour un effet interactif */
}
select.form-control {
    appearance: none; /* Supprime le style natif du navigateur */
    background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="%23000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down"><polyline points="6 9 12 15 18 9"></polyline></svg>');
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 14px;
    padding-right: 30px; /* Veillez à laisser de l'espace pour l'icône */
}
select.form-control:focus {
    border-color: red;    /* Mise en surbrillance de la bordure au focus */
    outline: none;            /* Désactive l'outline par défaut */
    box-shadow: 0 0 5px rgba(179, 20, 60, 0.5); /* Ajoute un effet lumineux au focus */
}

.btn-light {
    background-color: #f6bbbb;
}
.btn-light:hover{
    background-color: #9e6666;
    color: #fff;
}

.td_left-content {
    float: left;
}

.td_right-content {
    float: right;
    display: flex; /* Utiliser flexbox pour aligner les icônes */
    gap: 10px; /* Espace horizontal entre les icônes */
    align-items: center; /* Centrer verticalement les icônes */
}

/* Style de l'icône */
.material-symbols-outlined {
    font-size: 24px;
    color: #333;
    cursor: pointer;
    transition: color 0.3s ease; /* Animation pour hover */
}

.material-symbols-outlined:hover {
    color: #007bff; /* Couleur au survol */
}

/* Tooltip Styling */
.icon-container {
    position: relative;
}

.icon-container .tooltip {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    top: -50%;
    left: 50%;
    transform: translateY(-50%);
    background-color: #f6bbbb;
    color: #000;
    text-align: center;
    padding: 5px 10px;
    border-radius: 4px;
    white-space: nowrap;
    font-size: 12px;
    transition: opacity 0.3s ease;
    z-index: 10;
}

.icon-container .tooltip::after {
    content: "";
    position: absolute;
    top: 50%;
    left: -6px;
    transform: translateY(-50%);
    border-width: 6px;
    border-style: solid;
    border-color: transparent red transparent transparent;
}

.icon-container:hover .tooltip {
    visibility: visible;
    opacity: 1;
}
.fromvdb {
    text-decoration: underline;
}
.material-symbols-outlined {
    font-size:20px !important;
}
.tdPlanningIcons {
    width:36px;
    font-size:20px !important;
    padding: .1rem .5rem !important;
}
.tdPlanningIconsVdb {
    border: 1px solid #000;
}
.table, .table td, .table th {
    user-select: auto !important;
    -webkit-user-select: auto !important;
    -moz-user-select: auto !important;
    -ms-user-select: auto !important;
}

.txt_alerte {
    color: red;
    padding-left: 10px;
    font-size: small;
}