.btn-filled {
    background-color: var(--b-opacity-10);
    padding: 8px 15px;
    border: 1px solid transparent;
    border-radius: 10px;
    font-weight: bold;
    transition-duration: 300ms;
}
.btn-filled:hover {
    background-color: transparent;
    border: 1px solid var(--primary);
    color: var(--primary);
    cursor: pointer;
}
.btn-icon-w-filled {
    background-color: var(--background);
    padding: 10px 15px;
    border-radius: 30px;
}
.btn-icon-filled {
    background-color: var(--primary);
    padding: 10px 15px;
    color: #FFFFFF;
    border-radius: 30px;
}
.btn-icon-w-filled-red {
    color: var(--red);
    transition-duration: 300ms;
}
.btn-icon-w-filled-red:hover {
    background-color: var(--red);
    color: var(--background);
    transform: scale(0.90);
    cursor: pointer;
}
.btn-submit-full {
    display: block;
    width: 100%;
    background-color: var(--primary);
    border-radius: 10px;
    padding: 10px;
    color: var(--background);
    font-weight: bold;
    font-family: var(--font-title);
    transition-duration: 300ms;
}
.btn-submit-full:hover {
    letter-spacing: 0.1em;
    transform: scale(0.90);
    cursor: pointer;
}
.text-link:hover {
    cursor: pointer;
    border-bottom: 1px dashed var(--primary);
}
.btn-table {
    font-size: 13px;
    padding: 10px;
    display: inline-block;
    border-radius: 10px;
}
.btn-table:hover {
    background-color: var(--b-opacity-10);
}
.btn-synchronize {
    display: block;
    color: var(--background);
    background-color: var(--primary);
    text-align: center;
    padding: 10px;
    border-radius: 10px;
    border: 1px solid transparent;
    transition-duration: 300ms;
}
.btn-synchronize-mobile {
    display: block;
    color: var(--background);
    background-color: var(--primary);
    text-align: center;
    padding: 15px;
    border-radius: 10px;
    border: 1px solid transparent;
    transition-duration: 300ms;
}
.btn-synchronize:hover {
    border: 1px solid var(--primary);
    background-color: transparent;
    color: var(--primary);
    cursor: pointer;
}
.btn-synchronize-gray {
    display: block;
    background-color: var(--b-opacity-10);
    text-align: center;
    padding: 10px 15px;
    border-radius: 10px;
    border: 1px solid transparent;
    transition-duration: 300ms;
}
.btn-synchronize-gray:hover {
    background-color: var(--primary);
    color: var(--background);
    cursor: pointer;
}
.btn-control {
    display: block;
    color: var(--background);
    background-color: var(--primary);
    padding: 10px;
    border-radius: 10px;
    border: 1px solid transparent;
    transition-duration: 300ms;
}
.btn-control-mobile {
    display: block;
    color: var(--background);
    background-color: var(--primary);
    text-align: center;
    padding: 15px;
    border-radius: 10px;
    border: 1px solid transparent;
    transition-duration: 300ms;
}
.btn-control:hover {
    border: 1px solid var(--primary);
    background-color: transparent;
    color: var(--primary);
    cursor: pointer;
}
.btn-control-gray {
    display: block;
    background-color: var(--b-opacity-10);
    text-align: center;
    padding: 10px 15px;
    border-radius: 10px;
    border: 1px solid transparent;
    transition-duration: 300ms;
}
.btn-control-gray:hover {
    background-color: var(--primary);
    color: var(--background);
    cursor: pointer;
}
.btn-grid {
    text-align: center;
    background-color: var(--b-opacity-10);
    min-width: 150px;
    padding: 10px 0;
    border-radius: 10px;
    transition-duration: 300ms;
}
.btn-grid:hover {
    cursor: pointer;
    transform: scale(0.95);
    color: var(--background);
    background-color: var(--primary);
}
.btn-icon-full div {
    text-align: center;
    padding: 50px;
    border: 2px solid var(--b-opacity-10);
    border-radius: 5px;
    transition-duration: 300ms;
}
.btn-icon-full div:hover {
    background-color: var(--b-opacity-10);
    cursor: pointer;
}
.btn-icon-full p {
    margin-top: 10px;
    font-size: 18px;
    font-weight: bold;
}
#btn-follow-home {
    position: absolute;
    margin-top: 50px;
    margin-left: 50px;
    border: 2px solid var(--b-opacity-10);
    padding: 10px 15px;
    border-radius: 10px;
    transition-duration: 300ms;
}
#btn-follow-home:hover {
    background-color: var(--primary);
    color: #FFFFFF;
}
.btn-icon-logout-mobile {
    display: block;
    padding: 10px;
    background-color: var(--b-opacity-10);
    text-align: center;
    border-radius: 10px;
}

/*---------------
--- CONTAINERS
----------------*/
#setting-page .entry-header, #document-page .entry-header {
    padding-bottom: 15px;
    border-bottom: 2px solid var(--b-opacity-10);
}
#login-page .container-filled {
    background-color: var(--background);
    box-shadow: 0px 3px 5px var(--b-opacity-30);
    width: 500px;
    padding: 20px;
    border-radius: 10px;
}
#login-page .container-filled-full {
    background-color: var(--background);
    box-shadow: 0px 3px 5px var(--b-opacity-30);
    width: 800px;
    padding: 20px;
    border-radius: 10px;
}
.container-more {
    border-left: 1px solid var(--primary);
    padding-left: 15px;
}
.container-filled {
    background-color: var(--b-opacity-10);
    border-radius: 10px;
    padding: 20px;
}
.stats_card_small {
    background-color: var(--b-opacity-10);
    border-radius: 10px;
    text-align: left;
    overflow: hidden;
    transition-duration: 300ms;
}
.stats_card_small .entry-header {
    padding: 15px;
}
.stats_card_small .entry-footer {
    background-color: var(--b-opacity-20);
    padding: 10px;
}
.stats_card_small:hover {
    box-shadow: 0 5px 10px var(--b-opacity-30);
    transform: scale(0.97);
}
.switch_container {
    padding: 10px;
}
.container-update .entry-content {
    margin-top: 10px;
    background-color: var(--background-01);
    padding: 10px 15px;
    border-radius: 10px;
}
.container-update .entry-content h3 {
    font-size: 18px;
    color: var(--primary);
    font-weight: bold;
}
.container-update .entry-content li {
    margin-left: 25px;
}

/*---------------
--- POPUPS
----------------*/
#popup .entry-header {
    padding: 20px 30px;
    background-color: var(--b-opacity-10);
    border-bottom: 2px solid var(--b-opacity-10);
}
#popup .entry-header h2 {
    font-size: 20px;
    font-weight: bold;
}
#popup .entry-content {
    padding: 20px;
}
#popup .entry-footer {
    border-top: 2px solid var(--b-opacity-10);
    padding: 20px 30px;
}
#popup .entry-content h3 {
    font-size: 18px;
    color: var(--primary);
    font-weight: bold;
}
.flash-message {
    position: absolute;
    top: 0;
    right: 0;
    margin-top: 10px;
    margin-right: 10px;
    padding: 15px 20px;
    border-radius: 10px;
    box-shadow: 0 3px 10px var(--b-opacity-30);
    z-index: 1;
}


/*---------------
--- GRID
----------------*/
.grid-item {
    background-color: var(--b-opacity-10);
    width: 150px;
    text-align: center;
    padding: 15px;
    border-radius: 15px;
}
.grid-item h3 {
    color: var(--primary);
    font-size: 25px;
}
.import-grid_item {
    background-color: var(--b-opacity-10);
    text-align: center;
    padding: 20px 30px;
    border-radius: 10px;
    border: 1px solid var(--b-opacity-5);
}
.import-grid_item h2 {
    font-size: 30px;
}

/*---------------
--- TABLE
----------------*/
.table-container {
    width: 100%;
    overflow-x: auto;
    border: 2px solid var(--b-opacity-10);
    border-radius: 10px;
}
.table-container table {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.table-container thead {
    background-color: var(--b-opacity-10);
}
.table-container th, .table-container td {
    padding: 10px;
    text-align: center;
}
.table-container tbody tr {
    border-top: 1px solid var(--b-opacity-10);
}
.table-container .tr-click:hover {
    cursor: pointer;
    background-color: var(--b-opacity-5);
    transition-duration: 300ms;
}
.table-container .bl {
    border-left: 1px solid var(--b-opacity-10);
}

.list_docs {
    border: 1px solid var(--b-opacity-10);
    background-color: var(--b-opacity-5);
    border-radius: 10px;
    margin-bottom: 10px;
    padding: 15px 20px;

}

/*---------------
--- TEXT
----------------*/
.text-none {
    text-align: center;
    border: 1px solid var(--b-opacity-10);
    padding: 10px 20px;
    border-radius: 10px;
}
.text-small-tag {
    font-size: 13px;
    border: 1px solid var(--b-opacity-30);
    border-radius: 5px;
    padding: 3px 5px;
}
.text-container {
    display: block;
    width: 100%;
}
.text-container-text {
    background-color: var(--b-opacity-10);
    padding: 10px;
    border-radius: 10px;
    margin-top: 3px;
    font-weight: bold;
}
.text-container-text-notvalid {
    background-color: var(--red);
    color: var(--background);
    padding: 10px;
    border-radius: 10px;
    margin-top: 3px;
    font-weight: bold;
}

.text-container .progress-bar {
    width: 100%;
    display: block;
    height: 45px;
    border-radius: 10px;
    overflow: hidden;
    margin-top: 3px;
}
.text-container .progress-bar::-webkit-progress-bar {
    background-color: var(--b-opacity-10);
    padding: 5px;
}
.text-container .progress-bar::-webkit-progress-value {
    background-color: var(--primary);
    border-radius: 5px;
}
.text-container-progress .count {
    position: absolute;
    margin-top: -35px;
    margin-left: 15px;
    text-shadow: 0 3px 5px var(--b-opacity-30);
    font-weight: bold;
    color: var(--background);
}
.stats_card_small .entry-header h3 {
    color: var(--gray);
    text-transform: uppercase;
    font-size: 13px;
}
.stats_card_small .entry-header h4 {
    font-weight: 700;
    font-size: 18px;
}
.stats_small_up {
    font-size: 13px!important;
    color: var(--green);
}
.stats_small_down {
    font-size: 13px!important;
    color: var(--red);
}
.text-badge-version {
    position: absolute;
    background-color: var(--background);
    padding: 3px 7px;
    border-radius: 10px;
}
.tag-libelle {
    display: inline-flex;
    font-size: 13px;
    padding: 7px 10px;
    border-radius: 5px;
    background-color: var(--b-opacity-10);
}
.tag-libelle .color {
    padding: 10px;
    margin-right: 10px;
    border-radius: 5px;
}
.tag-count {
    border: 1px solid var(--primary);
    background-color: #eeedff;
    border-radius: 10px;
    font-size: 13px;
    font-weight: bold;
    padding: 10px 30px;
}
.text-info-tag {
    border: 1px solid #ffce2c;
    background-color: #ffce2c30;
    color: #c79500;
    font-weight: bold;
    padding: 10px;
    border-radius: 10px;
}

/* Style pour cacher la checkbox et créer un switch stylisé */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.peer {
    display: none;
}

.peer + .peer-checked:after {
    transform: translateX(100%);
}

.peer-checked + .peer-checked:after {
    transform: translateX(100%);
}

.toggle-switch {
    display: inline-block;
    position: relative;
    width: 2.5rem;
    height: 1.25rem;
    background-color: #ddd;
    border-radius: 9999px;
    transition: background-color 0.3s;
}

.toggle-switch::after {
    content: "";
    position: absolute;
    top: 0.25rem;
    left: 0.25rem;
    width: 0.75rem;
    height: 0.75rem;
    background-color: #fff;
    border-radius: 50%;
    transition: transform 0.3s;
}

.peer:not(:checked) + .relative {
    background-color: #ddd; /* Gris par défaut */
}

/* Style pour le switch avec la couleur personnalisée */
.peer-checked\:bg-custom-color {
    background-color: #5a5597;
}

/* Ajustement pour le curseur du switch */
.peer:checked ~ .peer-checked\:bg-custom-color > span {
    transform: translateX(20px); /* Ajuste pour la bonne position */
}
/*---------------
--- TEXTFIELDS
----------------*/
.textfield label {
    margin-bottom: 3px;
    margin-left: 15px;
    font-weight: bold;
}
.textfield input, .textfield select, .textfield textarea {
    display: block;
    width: 100%;
    padding: 10px 15px;
    border-radius: 10px;
    border: 1px solid var(--b-opacity-10);
    border-bottom: 1px solid var(--b-opacity-10);
    transition-duration: 300ms;

}
.textfield input:hover, .textfield select:hover, .textfield textarea:hover {
    background-color: var(--b-opacity-5);
    letter-spacing: 0.1em;
}
.textfield > .textfield-error {
    border-left: 5px solid var(--red);
    background-image: linear-gradient(-60deg, #ff4d4d 5%, #FFFFFF 100%);
}
.textfield-error-text {
    color: var(--red);
    font-size: 13px;
    font-weight: bold;
    margin-left: 15px;
}
.textfield-info-text {
    color: var(--gray);
    font-size: 13px;
    font-style: italic;
    margin-left: 15px;
}
.textfield-table {
    display: block;
    width: 100%;
    transition-duration: 300ms;
    text-align: center;
}
.textfield-table:hover {
    letter-spacing: 0.1em;
}
.textfield-search {
    border: 1px solid var(--b-opacity-20);
    padding: 7px 10px;
    border-radius: 10px;
}
.textfield select {
    background-image:
        linear-gradient(45deg, transparent 50%, gray 50%),
        linear-gradient(135deg, gray 50%, transparent 50%),
        linear-gradient(to right, #ccc, #ccc);
    background-position:
        calc(100% - 20px) calc(1em + 2px),
        calc(100% - 15px) calc(1em + 2px),
        calc(100% - 2.5em) 0.5em;
    background-size:
        5px 5px,
        5px 5px,
        1px 1.5em;
    background-repeat: no-repeat;

    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-appearance: none;
    -moz-appearance: none;
}

.textfield-table.inputquty{
    width: 15% !important;
    border-bottom: 1px solid grey;
    text-align:center;
    margin-left: 40%;
    

}

@media screen and (max-width: 768px) {
    .flash-message {
        position: absolute;
        bottom: 0;
        top: auto;
        right: 0;
        margin-top: 0;
        margin-bottom: 10px;
        margin-right: 10px;
        padding: 15px 20px;
        border-radius: 10px;
        box-shadow: 0 3px 10px var(--b-opacity-30);
        z-index: 1;
    }
}