.tryfields-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6); 
    display: none;
    /* caché par défaut */
    justify-content: center;
    align-items: center;
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.3s ease;
    flex: 1;
    /*flex-direction: column;*/
}

/* Affichage actif */
.tryfields-overlay.active {
    display: flex;
    opacity: 1;
}

.popuptryfields-content {
    background: #fff;
    padding: 2rem;
    max-width: 400px;
    width: 90%;
    max-height: 600px;
    overflow: hidden;
    border-radius: 10px;
    position: relative;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
    animation: slideIn 0.3s forwards;
}

.config-form,
.config-form2,
.config-formb2 {
    display: flex;
    flex-direction: column;
}

.input-group {
    margin-bottom: 1rem;
}

.tryfields-overlay label,
.connect-field-container label,
.connect-field-region label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: bold;
}

.tryfields-overlay input,
.connect-field-container input,
.connect-field-region input {
    width: 90%;
    padding: 0.75rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 1rem;
    transition: border-color 0.3s;
}

input:focus,
.connect-field-container input:focus,
.connect-field-region input:focus {
    border-color: #6c63ff;
    outline: none;
}

.tryfields-overlay form button,
.connect-field-container button,
.connect-field-region button {
    padding: 0.75rem;
    background-color: #6c63ff;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.3s;
    width: 100%;
}

.tryfields-overlay form button:hover,
.connect-field-container button:hover,
.connect-field-region button:hover {
    background-color: #d45252ff;
}

.error {
    color: red;
    margin-top: 1rem;
    text-align: center;
}

section {
    width: 100%;
    /*Each section takes half of the wrapper's width*/
    padding: 2rem;
    box-sizing: border-box;
}

.login,
.register {
    flex: 1;
}

.login {
    visibility: visible;
}

.register {
    visibility: hidden;
}


.connect-field-container,
.connect-field-region {
    position: fixed;
    /* pour le centrer sur l'écran */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.1);
    /* état initial, petit et invisible */
    visibility: hidden;
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
    z-index: 1000;
    /* pour bien le superposer */
    background: #fff;
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    max-width: 400px;
    width: 90%;
}

.connect-field-wrapper {
    display: flex;
    transition: transform 0.5s ease-in-out;
    width: 200%;
}


.hiddena {
    transform: translateX(-50%);
}

.connect-field-container.open_app_naviapro {
    transform: translate(-50%, -50%) scale(1);
    visibility: visible;
    opacity: 1;
}

.connect-field-region.open_region {
    transform: translate(-50%, -50%) scale(1);
    visibility: visible;
    opacity: 1;
}

.inputbox,
.inputmpbox,
.inputmpibox,
.inputcbox,
.input-group {
    position: relative;
    margin: 0.5rem 0;
}

.input-group i {
    position: absolute;
    right: 20px;
    font-size: 14px;
    top: 50px;
}

.inputmpbox i,
.inputmpibox i,
.inputcbox i {
    position: absolute;
    right: 20px;
    font-size: 14px;
    top: 50px;
    cursor: pointer;
}

.inputmpbox i.active::before,
.inputmpibox i.active::before,
.inputcbox i.active::before,
.input-group i.active::before {
    content: '\f070';
    color: #5256ad;
}

input:focus~label,
input:valid~label {
    top: -5px;
}

.cancelbtn {
    width: auto;
    height: auto;
    top: 0px;
    display: flex;
    flex-direction: row;
    right: 0;
    margin-bottom: 10px;
    align-content: center;
    text-align: center;
    justify-content: space-between;
}

.close-windows ion-icon {
    align-items: center;
    top: -50px;
    font-size: 36px;
    color: red;
    cursor: pointer;
}

.rotate-text {
    position: absolute;
    /* Position absolue par rapport au parent */
    margin-top: 30px;
    margin-left: -70px;
    transform: rotate(-45deg);
    transform-origin: top left;
    color: sienna;
    font-size: 14px;
    font-weight: 900;
}

.card_image {
    width: 5em;
    height: 5em;
    border-radius: 50%;
    border: 5px solid #9176ff;
    padding: 3px;
    top: 10px;
    position: relative;

    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 20px;
}

.card_image img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

/* Loader style */
.loader,
.loader1,
.loader2,
.loader3 {
    display: none;
    /* caché par défaut */
    position: absolute;
    /* ou fixed si tu veux overlay */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999;
}

.loader-icon,
.loader-icon1,
.loader-icon2,
.loader-icon3 {
    width: 80px;
    height: 80px;
    border: 10px solid #ccc;
    border-top-color: #fa1433ff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

/* div.ma-bordure-image {
             border-style: solid;
             border-width: 30px;
             border-image-source: url(assets/images/border.avif);
             border-image-slice: 142 142 142 142;
             border-image-width: 50px;

         }*/

.headerinfo {
    width: auto;
    max-width: 100%;
    height: 50px;
    max-height: 100%;
    display: flex;
    flex-direction: row;
    top: 10px;
    position: relative;
    margin-bottom: 20px;
    border-radius: 12px;
    border-bottom: 1px solid rgba(51, 47, 66, 1);
}

/* Optionnel : personnaliser la couleur du fond pour faire ressortir la courbe */

.headerinfo p {
    margin-top: 0px;
    margin-bottom: 60px;
    margin-left: 10px;
    font-size: 18px;
    font-weight: 700;
    position: relative;
    color: #c974ebff;
    justify-content: center;
    text-align: center;
}

/* Animation de rotation */
@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.dropdown-group {
    width: auto;
    min-width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: auto;
    margin-top: 1rem;
}

.dropdown-group select {
    width: 100%;
    min-width: 90%;
    height: 48px;
    padding: 0.75rem;
    border: 1px solid #ccc;
    border-radius: 0.25em;
    font-size: 1.1rem;
    cursor: pointer;
    line-height: 1.1;
    background-color: #fff;
    background-image: linear-gradient(to top, #f9f9f9, #fff 33%);
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-right: 2.5em;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-chevron-down'><line x1='12' y1='5' x2='12' y2='19'></line><polyline points='19 12 12 19 5 12'></polyline></svg>");
    background-position: calc(100% - 1em) center;
    background-repeat: no-repeat;
}

form fieldset {
    width: auto;
    min-width: 50%;
    max-width: 90%;
    height: auto;
    max-height: 300px;
    display: flex;
    flex-direction: column;
    margin-bottom: 10px;
    overflow: hidden;
    overflow-y: auto;
}

textarea {
    height: auto;
    min-height: 150px;
}

.select2-results__option .flag {
    width: 24px;
    height: 18px;
    margin-right: 8px;
    vertical-align: middle;
}

/* Style pour l'affichage dans le champ après sélection */
.select2-selection__rendered .flag {
    width: 24px;
    height: 18px;
    margin-right: 8px;
    vertical-align: middle;
}

@media(max-width: 800px) {

    body {
        grid-template-columns: 1fr;
    }

    .tryfields-overlay,
    .connect-field-container,
    .connect-field-region {
        flex-direction: column;
    }

    .open_app_naviapro {
        visibility: visible;
        transform: translate(-50%, -50%) scale(1);
    }

    .open_region {
        visibility: visible;
        transform: translate(-50%, -50%) scale(1);
    }

    .rotate-text {
        position: absolute;
        /* Position absolue par rapport au parent */
        margin-top: -50px;
        margin-left: 120px;
        transform: rotate(45deg);
        transform-origin: top left;
        color: sienna;
        font-size: 14px;
        font-weight: 900;
    }

    .dropdown-group select {
        width: auto;
        min-width: 10ch;
        max-width: 300px;
        border: 1px solid var(--select-border);
        border-radius: 0.25em;
        padding: 0.25em 0.5em;
        font-size: 1.1rem;
        cursor: pointer;
        line-height: 1.1;
        background-color: #fff;
        background-image: linear-gradient(to top, #f9f9f9, #fff 33%);
        box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2);
    }
}

/* Formulaires */
.form-wrapper {
    width: 100%;
    background: #fff;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Masquer tous sauf le visible */
.form {
    display: none;
}

.form.active {
    display: block;
}

/* Styles des formulaires individuels */
form {
    display: flex;
    flex-direction: column;
}

label {
    margin-top: 10px;
    margin-bottom: 5px;
    font-weight: bold;
}

/* Footer avec boutons ronds */

.filter-tabs {
    display: block;
    width: 100%;
    border-radius: 1rem;
    padding: 0.3rem;
    overflow: hidden;
    background-color: #fff3e0;
}

.footer {
    display: flex;
    justify-content: center;
    margin-top: 5px;
}

.round-button {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #007bff;
    border: none;
    margin: 0 10px;
    cursor: pointer;
    font-size: 1.2em;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease;
}

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

/* Responsive */
@media (max-width: 600px) {
    .form-wrapper {
        padding: 20px;
    }

    .round-button {
        width: 40px;
        height: 40px;
        font-size: 1em;
        margin: 0 8px;
    }
}

#myTable,
#TableRegion,
#TableInst,
#TableAgence {
    font-size: 12px;
    width: 100%;
    height: 200px;
    overflow: hidden;
    overflow-y: scroll;
    overflow-x: scroll;
}

.containerdesc {
    padding: min(1em, 15%);
    width: 95%;
    height: 95%;
}

.headspace {
    height: 60px;
    width: auto;
    background-color: burlywood;
    text-align: center;
    align-content: center;
}

table.dataTable thead,
table.dataTable tfoot {
    font-size: 12px;
}

.myTable tbody,
.TableRegion tbody,
.TableInst tbody,
.TableAgence tbody {
    display: table-row-group;
    vertical-align: middle;
    unicode-bidi: isolate;
    border-color: inherit;
}

.myTable thead th.active span.icon-arrow,
.TableRegion thead th.active span.icon-arrow,
.TableInst thead th.active span.icon-arrow,
.TableAgence thead th.active span.icon-arrow {
    background-color: #6c00bd;
    color: #fff;
}

.myTable thead th.asc span.icon-arrow,
.TableRegion thead th.asc span.icon-arrow,
.TableInst thead th.asc span.icon-arrow,
.TableAgence thead th.asc span.icon-arrow {
    transform: rotate(180deg);
}

.myTable thead th.active,
.TableRegion thead th.active,
.TableInst thead th.active,
.TableAgence thead th.active,
tbody td.active {
    color: #6c00bd;
}

.myTable tbody tr.hide,
.TableRegion tbody tr.hide,
.TableInst tbody tr.hide,
.TableAgence tbody tr.hide {
    opacity: 0;
    transform: translateX(100%);
}

.myTable tbody tr:hover,
.TableRegion tbody tr:hover,
.TableInst tbody tr:hover,
.TableAgence tbody tr:hover {
    background-color: #fff6 !important;
}

.ecoTable thead th,
.myTable thead th,
.TableRegion thead th,
.TableInst thead th,
.TableAgence thead th {
    position: sticky;
    top: 0;
    left: 0;
    background-color: #d5d1defe;
    cursor: pointer;
    text-transform: capitalize;
}

.space-center2 tbody tr:nth-child(even) {
    background-color: #0000000b;
}

.myTable tbody tr,
.TableRegion tbody tr,
.TableInst tbody tr,
.TableAgence tbody tr {
    --delay: .1s;
    transition: .5s ease-in-out var(--delay), background-color 0s;
}

.myTable tbody tr.hide td,
.TableRegion tbody tr.hide td,
.TableInst tbody tr.hide td,
.TableAgence tbody tr.hide td,
.myTable tbody tr.hide td p,
.TableRegion tbody tr.hide td p,
.TableInst tbody tr.hide td p,
.TableAgence tbody tr.hide td p {
    padding: 0;
    font: 0 / 0 sans-serif;
    transition: .2s ease-in-out .5s;
}

/* Styles pour les appareils mobiles */
@media (max-width: 768px) {

    .splitpane {
        flex-direction: column;
        overflow: hidden;
        overflow-y: scroll;
        /* Change la direction en colonne */
    }

    .space-center {
        width: auto;
        height: auto;
        max-height: 400px;
        overflow: hidden;
        overflow-y: scroll;
        color: #000;
        text-align: left;
        margin: 10px;
        padding: 15px;
        font-size: 10px;
        text-wrap: nowrap;
        box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
        border: none;
    }

    .pane {
        width: 100%;
        overflow: hidden;
        overflow-y: scroll;
        /* Panneaux prennent toute la largeur en mode mobile */
    }


    .space-center {
        width: 90%;
        height: auto;
        font-size: 12px;
        max-height: 300px;
        overflow: hidden;
        overflow-y: scroll;
        overflow-x: scroll;
        color: #000;
        text-align: left;
        margin: 5px;
        padding: 10px;
        font-size: 10px;
        box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
        border: none;
    }

    .space-center table {
        overflow: hidden;
        overflow-y: scroll;
        overflow-x: scroll;
        font-size: 10px;
    }
}