@font-face {
    font-family: Fieldwork;
    src: url(../../libs.fonts/Fieldwork/Fieldwork1GeoHair.otf);
    font-display: swap;
}

@font-face {
    font-family: FieldworkBold;
    src: url(../../libs.fonts/Fieldwork/Fieldwork7GeoLight.otf);
    font-display: swap;
}

html,body,h1,h2,h3,h4,h5 {font-family: Arial, Helvetica, sans-serif;}

:root {
    --primary: #03A9F4;
    --appBgColor: #0778ac;
    --appBgColorLight: #8acceb;
    --appBgColor2: red;
    --appBgColor3: #BF1B22;
    --appColor: #ffffff;
    --appHeaderBgColor: #0D6ECF;
    --appErrorColorTransparent: #ECC5BF;
    --appErrorColorTransparentSelected: #998480;
    --appHeaderDarkBgColor: #08498A;
    --appSheetsBgColor: #20a8d8;
    --appErrorColor: #DC4B3E;
    --appSuccessColor: #0DC143;
    --appGrayColor: #9F9F9F;
    --levelTreatedBgColor: #24444A;
    --accountTreated: #bce7c3;
    --terror: #F86C6B;
    --tsuccess: #1F7246;
    --tnormal: #20a8d8;
    --toast-text: #fff;
    --blue: #20a8d8;
    --indigo: #6610f2;
    --purple: #6f42c1;
    --pink: #e83e8c;
    --red: #f86c6b;
    --orange: #f8cb00;
    --yellow: #ffc107;
    --green: #4dbd74;
    --teal: #20c997;
    --cyan: #63c2de;
    --white: #fff;
    --gray: #536c79;
    --gray-dark: #29363d;
    --blue: #20a8d8;
    --indigo: #6610f2;
    --purple: #6f42c1;
    --pink: #e83e8c;
    --red: #f86c6b;
    --orange: #f8cb00;
    --yellow: #ffc107;
    --green: #4dbd74;
    --teal: #20c997;
    --cyan: #63c2de;
    --white: #fff;
    --gray: #536c79;
    --secondary: #a4b7c1;
    --success: #4dbd74;
    --info: #63c2de;
    --warning: #ffc107;
    --danger: #f86c6b;
    --light: #f0f3f5;
    --dark: #29363d;
    --blue: #20a8d8;
    --indigo: #6610f2;
    --purple: #6f42c1;
    --pink: #e83e8c;
    --red: #f86c6b;
    --orange: #f8cb00;
    --yellow: #ffc107;
    --green: #4dbd74;
    --teal: #20c997;
    --cyan: #63c2de;
    --gray-100: #f0f3f5;
    --gray-200: #c2cfd6;
    --gray-300: #a4b7c1;
    --gray-400: #869fac;
    --gray-500: #678898;
    --gray-600: #536c79;
    --gray-700: #3e515b;
    --gray-800: #29363d;
    --gray-900: #151b1e;
    --breakpoint-xs: 0;
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
    --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }

.fa{ cursor: pointer; }
.fa.primary{ color: var(--primary); }

file-drop-zone{
    display: block;
    border: 2px dashed #8E8E8E;
    border-radius: 10px;
    width: 80vw;
    max-width: 480px;
    min-height: 250px;
    font-family: sans-serif;
    margin: 3% auto;
    padding: 20px;
    background-color: #E2E2E2;
}

file-drop-zone input[type="file"] {
    display: none;
}


file-drop-zone .button{
    padding: 5px;
    background-color: var(--appBgColor);
    color: var(--appColor);
    cursor: pointer;
}

file-drop-zone.highlight {
    border: 4px dashed var(--appBgColor);
}

.import-file-options{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 90%;
    height: auto;
    gap: 10px;
}

ul.import-file-options{
    justify-content: center;
}

.import-file-options li{
    display: block;
    list-style: none;
    padding: 2px 5px 2px 5px;
    background-color: var(--appBgColor);
    color: var(--appColor);
    border-radius: 10px;
    /* box-shadow: 1px 1px 2px 1px #7C7E8B; */
    cursor: pointer;
}

.cellCenterText{
    text-align: center !important;
}

.cellCapitalize{
    text-transform: capitalize !important;
}

.cellUpperCase{
    text-transform: uppercase !important;
}

select.form-control {
    color: black !important;
}

md-toast, .md-toast-content{
    z-index: 99999999999999 !important;
}
.md-toast-content {
    display: block !important;
    /* width: 500px !important; */
    max-width: 500px !important;
    white-space: nowrap !important;
    overflow: hidden !important; 
    text-overflow: ellipsis !important;
    height: 50px;
    line-height: 50px;
}
.md-toast-content .fa{
    font-size: 1.8em;
    float: left;
    margin-top: 11px;
}


.form-group {
    margin-top: 25px;
}

.w3-blue {
    background-color: var(--appBgColor) !important;
}

.w3-modal {
    z-index: 991 !important;
}

.w3-modal-content {
    box-shadow: 1px 1px 10px 5px #fff;
    width: fit-content !important;
    min-width: 500px !important;
}

footer {
    display: block;
    width: 100%;
    text-align: center;
    font-size: 1rem;
    color: #aaa;
    margin-top: 30px;
    margin: 0 auto;
}

footer a{
   text-decoration: none;
}

.w3-table {
    width: 100%;
    table-layout: auto; /* Permet à la table de s'adapter au contenu */
    border-collapse: collapse;
}
.w3-table tr th, .w3-table tr td{
    border: solid 1px var(--appBgColor);
    min-width: fit-content;
}

.col-1 {
    width: 5%; /* Petite largeur pour la numérotation */
}

.col-2 {
    width: auto; /* Cette colonne prendra automatiquement tout l'espace disponible */
}

.col-6, .col-5 {
    white-space: nowrap; /* Empêche le texte de passer à la ligne et réduit la largeur de la colonne */
    width: 1%; /* Réduit l'espace de la colonne au minimum nécessaire */
}

/* =============
    ::Selectors
   ============= */

/* Selection */
::selection {
    color: hsl(var(--white));
    background: hsla(var(--primary), .33);
}
/* Scrollbar */
::-webkit-scrollbar-track {
    background-color: hsl(var(--background));
}
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
    background-color: hsl(var(--background));
}
::-webkit-scrollbar-thumb {
    background-color: hsl(var(--primary));
}

.table-hover tbody tr:hover {
    background-color: rgba(255,255,255, 0.8);
}