section {
    background: #fff;
    padding: 15px;
    box-shadow: 1px 1px 1px #aaa;
    border-radius: 10px;
    /* border-top: solid;
    border-width: 10px; */
    /* border-color:#11757a; */
    border-right: 1px solid #11757a;
    border-bottom: 1px solid #11757a;
    width: 100%;
}

.dataTables_wrapper .dataTables_length {
    display: none;
}

.nav-item a span {
    color: #fff;
}

.nav-item a i {
    color: #fff;
}

.sidebar {
    background-color: #27211e;
}

#header {
    background-color: #336699;
    color: #fff;
}

#header span {
    color: #fff;
}

.img_login {
    border-color: #336699;
    border: 5px inherit;
    height: 150px;
    /* width: 200px; */
}

.image_login {
    text-align: center;
    border-radius: 5px;
    box-shadow: 5px #fff;
}

#body_login {
    background-size: cover;
}

#profile {
    background: #fff;
    padding: 15px;
    box-shadow: 1px 3px 5px #aaa;
    border-radius: 5px;
    border-top: solid;
    border-width: 10px;
    border-color:#cc6633;
    background-color: #336699;
}

table {
    font-size: 13px;
}

.dashboard .revenues-card .card-icon {
    color: #e01212;
    background: #f3d9d9;
  }
#example {
    font-family: Arial, Helvetica, sans-serif;
    border-collapse: collapse;
    width: 100%;
}

#example td {
    text-align: left;
}

#example th {
    padding-top: 12px;
    padding-bottom: 12px;
    text-align: left;
    background-color: #336699;
    color: white;
}

.sidebar .nav-content li:hover {
    background-color:grey;
}

.sidebar .nav-content li.active {
    background-color:#336699;
}

.nav-item .text-dark {
    font-size: 13px;
}

tr.htmx-swapping td {
    opacity: 0;
    transition: opacity 1s ease-out;
}

.table-list-user tr th {
    text-transform: uppercase;
}

.errorlist {
    list-style-image: url('/static/assets/img/error.png');
    border: 1px, solid #e01212;
    color: #e01212;
    border-radius: 5px;
}

/* Modal window */
.parent-modal {
    background-color: #336699;
    color: white;
}

.btn-modal {
    background-color: #336699;
    color: white;
    text-transform: uppercase;
    border-radius: 3px;
    border: 3px, solid #336699;
    padding: 5px 5px 5px 5px;
}

.hour_class {
    background-color: #336699;
    color: #fff;
    padding: 0 5px 0 5px;
    border-radius: 3px;
}

.section-home .container h1 {
    text-align: center;
    color: #fff;
    text-transform: uppercase;
}

.tab-note .nav-link {
    text-transform: uppercase;
    color: #336699;
}

.bi-printer-btn {
    background-color: #11757a;
    border: none;
}

.bi-printer-btn:hover {
    background-color: grey;
    border: none;
}

/* DESIGN TABLE */
.table-design {
    font-family: Arial, Helvetica, sans-serif;
    border-collapse: collapse;
    width: 100%;
    border-radius: 5px;
}

.table-design .thead-light tr th {
    text-transform: uppercase;
}
  
.table-design tr:hover {
    background-color:rgb(201, 174, 165);
}

.table-design td {
    text-align: left;
}

.table-design th {
    padding-top: 12px;
    padding-bottom: 12px;
    text-align: left;
    background-color: #336699;
    color: white;
}
/* END DESIGN TABLE */

/* DESIGN HEADER */
.pagetitle {
    border-left: solid #11757a;
    border-width: 5px;
    padding-left: 10px;
}

/* SCHOOL YEAR */
.school-year {
    font-weight: bold;
    font-size: 20px;
    text-transform: uppercase;
}

/* SUBMIT BUTTON AND RESET*/

.btn-success {
    background-color: #11757a;
    border: none;
    padding-top: 10px;
    padding-bottom: 10px;
    margin-top: 10px;

}

.btn-success:hover {
    background-color: #d1e0e0;
    color: #11757a;
    border: none;
    
}

.btn-secondary {
    border: none;
    padding-top: 10px;
    padding-bottom: 10px;
    margin-top: 10px;
    background-color: grey;

}

.btn-submit {
    padding-bottom: 10px;
    background-color: #C0C0C0;
    border-radius: 5px;
    padding-left: 5px;
    margin-top: 20px;
}

table td ul {
    list-style: none;
    display: flex;
    margin-right: 10px;
}

/* TABLE LIST STYLE */
table td ul li{
    margin-right: 10px;
}


/* NOTIFICATION POP-UP */
.popup {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: #0fa07c;
    border: none;
    padding: 20px;
    z-index: 9999;
    animation: fadeInUp 1s ease-in-out; /* Animation d'entrée */
    color: white;
    border-radius: 5px;
}

.popup span {
    cursor: pointer;
    padding-left: 20px;
    color: white;
    font-weight: bold;
          
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}