body {
    background: linear-gradient( to bottom, #508d5f 0%, #1c2541 100% );
    overflow: auto;
}
#ajax-grid {
    white-space: nowrap;
}
.box-header {
    color: #fff;
    display: block;
    padding: 10px 0 0 10px;
    position: relative;
}

#logo a img {
    max-width:150px;
    transition: transform 0.2s ease;
}
#logo a:hover img{ /* Styles appliqués au survol de la souris */
    transform: scale(1.1); /* Augmente légèrement la taille de l'image au survol */
}
.navbar {
    display:block;
}
.navbar-custom-menu {
    padding:10px 20px;
}
.navbar-nav {
    display:inline;
}
.navbar-nav li a {
    padding:2px 20px;
}
.navbar-nav .open{
    background:none;
}
.nav li a.dropdown-toggle{
    color:#666;
    padding:2px;
    margin:0;
    background:none;
}
.nav li a.dropdown-toggle:hover{
    background:none;
}
.open>a:hover{
    background:none;
}
.navbar-custom-menu>.navbar-nav>li>.dropdown-menu p{
    color:#666;
}
.navbar-custom-menu>.navbar-nav>li>.dropdown-menu{
    top : 143%;
    right:-10px;
}
.obs-matiere{
    width:300pt;
}
.obs-periode{
    width:300pt;
}
.btn-rose {
    background-color: #FFC0CB;
    border:1px solid #ce8483;
}
.autocomplete-bloc{
    border:1px solid #ccc;
    padding:10px;
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
    position:absolute;
    top:60px;
    z-index:19;
    background-color:#fff;
    width:100%;
}
.autocomplete-result {
    list-style: none;
    margin:0;
    padding:15px 0 0 0;
}
.autocomplete-result li{
    padding:5px;
    border-bottom:1px solid #eee;
}
.autocomplete-result li:hover{
    background-color: #eee;
    cursor: pointer;
}
.box-container {
    border:1px solid #ccc;
    background-color: #D9E0E7;
    display: inline-block;
    min-width:100%;
}
.bloc {
    margin-bottom:10px;
}
.bloc h2{
    font-size: 14px;
    font-weight:bold;
    margin:2px;
}
.btn-eca {
    margin-right:6px;
    cursor:pointer;
}
.box-header h3.box-title {
    padding:0 0 10px 0;
}
.button-form {
    margin-top:25px;
    margin-right:10px;
}
#caisse_session {
    font-size: 14px;
}
.etat-ecolage {
    margin:4px;
}
.frais-payables {
    padding-top:5px;
}
.frais-payables button{
    width:100%;
    margin:2px;
    overflow: hidden;
}
h2.separator{
    font-size:16px;
    border-bottom : 1px solid #666;
    margin-top:0;
}
.bulletin h1 {
    font-size: 18px;
}
.bulletin h2 {
    font-size: 14px;
    font-weight: bold;
}
.bulletin table tfoot u {
    font-weight: bold;
}

.certificat-entete h2 {
    font-size: 14px;
}
.certificat-entete p {
    line-height: 8px;
}
.ck.ck-editor {
    min-width:700px;
}

.delete-file{
    cursor:pointer;
}
.dropdown.notif span.bulle, .dropdown.notif span#notif-depense {
    position:relative;
    border-radius: 50%;
    top:-10px;
    left:-7px;
    padding:5px 10px 5px 10px;
    background-color: red;
}
.dropdown.notif a.dropdown-toggle::after{
    display: none;
}
.dropdown.notif ul.dropdown-menu {
    width:400px;
    box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.5) !important;
    max-height:400px;
    overflow-y: auto;
    overflow-x: hidden;
    padding:10px;
}
.dropdown.notif ul.dropdown-menu li{
    padding:10px;
    font-size:12px;
}
.dropdown.notif ul.dropdown-menu h4{
    background-color: #00a65a;
    color:#fff;
    padding:10px;
    margin:0;
}
.dropdown.notif ul.dropdown-menu span.demandeur{
    width:450px;
    border-radius: 50%;
    padding:10px;
    background-color: green;
    margin-right: 10px;
}
.dropdown.notif ul li.notif-depense-list{
    background-color:#fff;
    padding:10px 0 10px 0px;
    border-bottom: 1px solid #666;
    display: block;
}
.dropdown.notif ul li.notif-depense-list a {
    padding:0;
}
#dataList table{
    width:100%;
}
#dataList table tr td{
    padding:3px;
}
.etudiant-grid-element {
    min-height: 305px;
    margin-bottom: 4px;
}
.etudiant-grid-element a{
    color:#fff;
}
.etudiant-grid-element .photo-box{
    height:145px;
    overflow:hidden;
    width:60%;
    margin:0 auto;
    background-color: #fff;
}
.etudiant-grid-element .photo-etudiant{
    height:100%;
    max-height:145px;
}
.etudiant-grid-element .img-bandeau-paid {
    background-image: url(../../../images/paid.png);
    background-size: 63px;
    position: absolute;
    z-index: 1;
    width: 56%;
    height: 54%;
    top: 36px;
    background-position: top right;
    background-repeat: no-repeat;
}
.etudiant-grid-element .genre-image{
    opacity: 0.1;
}
.etudiant-grid-element p.etudiant-nom{
    white-space: normal;
    height:60px;
}
.etudiant-grid-element span.etudiant-imagefilename{
    position: absolute;
    left: 60px;
    top: 97px;
    color: #000;
    font-weight: bold;
}
.field-group .personne_link p{
    margin-top : 10px;
}
.field-group .personne_link .btn{
    margin-top : 0;
}
.form-check-label {
    padding-left:2px;
}

.item-suggested {
    margin:3px;
}
.item-suggested i {
    color: #999;
    padding: 0px 6px 3px 6px;
    border-radius: 50%;
    background-color: #fff;
    font-style: normal;
    margin: 6px 0px 6px 6px;
    text-align: center;
}
.login-form {
    padding:40px;
    color:#fff;
    text-align:center;
}
.login-form .error {
    color:red;
}
.main-header {
    width:100%;
}
.main-header h1 {
    font-size:18px;
    margin:0;
    padding:14px 0 0 0;
    display:inline-block;
}
.main-header h1 a{
    color:#fff;
    font-weight: bold;
    transition: all 0.2s ease;
}
.main-header h1 a:hover { /* Styles appliqués au survol de la souris */
    color: #008749; /* Change la couleur du texte au survol */
    text-shadow: 0 0 5px #007bff; /* Ajoute un léger effet d'ombrage */
}
.main-sidebar {
    width:180px;
    padding: 10px 0 0 0;
    margin-right:10px;
}
.main-sidebar h1{
    margin:0;
    padding: 20px 0 20px 10px;
    font-size: 18px;
}
.gridmenu {
    padding:0;
    margin-top:0;
    top:-20px;
    position:relative;
}
.gridmenu h2{
    padding:10px;
    color:#fff;
    text-align: center;
    font-size:24px;
    border-bottom:1px solid #fff;
}
.gridmenu a {
    color:#fff;
    margin:10px 10px 10px 10px;
    padding:20px;
    background:none;
    background-image:url('../img/button-bg.png');
    background-repeat : no-repeat;

    background-size:360% 350%;
    border:none;
    width:130px;
}
.gridmenu a:hover {
    color:#ccc;
}
.gridmenu a.my-btn-primary{
    background-position : 50% 5%;
}
.gridmenu a.my-btn-success{
    background-position : 92% 5%;
}
.gridmenu a.my-btn-info {
    background-position : 50% 48%;
}
.gridmenu a.my-btn-warning {
    background-position : 92% 48%;
}
.gridmenu a.my-btn-danger {
    background-position : 9% 92%;
}
.gridmenu a.my-btn-link {
    background-position : 9% 5%;
}
.gridmenu a.my-btn-off {
    background-position : 9% 48%;
}
.main-container {
    width:100%;
    padding-right:5px;
}
.modal-header h1{
    font-size:16px;
    margin:0;
    padding:0
}

.panel {
    /* for text on pannel */
    margin: 10px !important;
}

.panel-body {
    padding-top: 30px !important;
}
.panel-body .row{
    padding:4px 0 4px 0;
}

.paiement ul {
    margin:0;
    padding:0;
}
.paiement ul li{
    list-style: none;
    margin: 10px 0 0 0;
}
.remove-panier {
    cursor: pointer;
}
#result-personne button{
    margin-top:0;
}
.sticky-column {
    position: sticky;
    left: 0;
    z-index: 10;
    background: none;
    white-space: nowrap;
    text-overflow: ellipsis;
    background: rgba(255, 255, 255, .9);
    border-bottom: 1px solid #dee2e6 !important;
}
.sticky-column-2 {
    left:220px;
}
.table-etudiant-evenement .btn {
    margin-top:1px;
}
.table-etudiant-evenement th {
    background-color:#3f87a6;
    color:#fff;
}
.table-recap-note tr td {
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
}
.text-on-pannel {
    background: #fff none repeat scroll 0 0;
    height: auto;
    margin-left: 10px;
    padding: 3px 5px;
    position: absolute;
    margin-top: -40px;
    border: 1px solid #337ab7;
    border-radius: 8px;
    font-size:12px;
}
.text_filter {
    border:1px solid #ccc !important;
    height:30px;
    padding:4px !important;
    text-wrap: nowrap;
}
#dataList table tr td.totfrais {
    min-width:75px;
}
.tr-disabled {
    background-color:#f8d7da !important;
}
.tr-success {
    background-color:#d0e9c6 !important;
}

#dataList table tr td .btn-group {
    display:inline-flex;
}
#dataList table tr td .btn-group a{
    margin-right:10px;
}
#dataList table tr td .btn-group a i.fa-undo{
    color:red;
}
#dataList table tr td {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.hidden {
    visibility:hidden;
}

body#home header, body#auth header {
    color:#fff;
    width:100%;
    padding:10px;
}
body#home header h1, body#auth header h1 {
    text-align:center;
    font-size:18px;
    margin:0;
    padding-bottom: 8px;
}
.slogan {
    padding:150px 150px ;
    color:#ccc;
    text-align:right;
}
.slogan i {
    font-size:2em;
    display:block
}
.home {
    background-image: url(../img/upschool-bg.jpg);
    background-size: 100%;
    background-repeat: no-repeat;
}
.home footer {
    color:#ccc;
    position:absolute;
    text-align: center;
    width:100%;
    bottom:0;
    font-size:10px;
    padding:10px;
}

.datepicker {
    z-index:1100 !important;
}
.datepicker .month, .datepicker .year {
    padding:0 4px 0 4px;
    border-right:1px solid #000;
}

.sidebar h3{
    color:#fff;
    text-align:center;
    font-size:16px;
}

.selectors .my-filter{
    padding: 10px 0 0 0;
}
.selectors .my-filter label{
    padding: 4px 4px 0 0;
}
.selectors .my-filter .stats{
    padding: 5px 0 0 0;
}

.table-hover>tbody>tr:hover {
    background-color: #dbe1d5;
}
@media print{
    input[type=text]{
        border:none;
    }
}

.printable{
    background:#fff;
    margin:0 auto;
    padding: 40px;
    width:60%;
}

.printable img.logo{
    width: 350px;
}