@tailwind base;
@tailwind components;
@tailwind utilities;

#content {
    
display: flex;
  flex-wrap: wrap; 
  gap: 20px;
  justify-content: left;


}

#general {
    
    display: flex;
  flex-wrap: wrap; /* pour que ça passe en colonne sur mobile */
    max-width: 1280px;

}

#generalContent {

    width: 32%;
}


.separator {
  width: 1px;
  background-color: #ccc;
  margin: 0 10px;
}


#sidebar {
    width: 300px;
}



.slidecontainer {
    width: 100%;
}

.banner {
    height: 2.5rem;
    background: rgb(32 177 201);
    max-width: 100%;
}

/* The slider itself */
.slider {
    -webkit-appearance: none;
    /* Override default CSS styles */
    appearance: none;
    width: 100%;
    /* Full-width */
    height: 15px;
    border-radius: 5px;
    background: #d3d3d3;
    /* Grey background */
    outline: none;
    /* Remove outline */
    opacity: 0.7;
    /* Set transparency (for mouse-over effects on hover) */
    -webkit-transition: .2s;
    /* 0.2 seconds transition on hover */
    transition: opacity .2s;
}

/* Mouse-over effects */
.slider:hover {
    opacity: 1;
    /* Fully shown on mouse-over */
}

/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    /* Override default look */
    appearance: none;
    width: 25px;
    /* Set a specific slider handle width */
    height: 25px;
    border-radius: 50%;
    background: #04AA6D;
    /* Green background */
    cursor: pointer;
    /* Cursor on hover */
}

.slider::-moz-range-thumb {
    width: 25px;
    /* Set a specific slider handle width */
    height: 25px;
    border-radius: 50%;
    background: #04AA6D;
    /* Green background */
    cursor: pointer;
    /* Cursor on hover */
}

.footer-content {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    gap: 0.5rem;
    align-items: center;
    display: flex;
    font-family: "Inter var", sans-serif;
    font-weight: 300;
    font-size: 16px;
}


.footer-content a {
  color: #0077cc;
  text-decoration: underline;
}


.eu-flag {
    height: 25px;
}


#reportTextArea {
  width: 100%;
  max-width: 960px;
  box-sizing: border-box;
}


/*@property --val {
    syntax: '<integer>';
    inherits: true;
    initial-value: 0;
}*/

/*label {
    --c: #547980;*/
/* slider color */
/*--g: round(.3em,1px);*/
/* the gap */
/*--l: round(.2em,1px);*/
/* line thickness*/
/*--s: round(1.3em,1px);*/
/* thumb size*/
/*--t: round(.8em,1px);*/
/* tooltip tail size */
/*--r: round(.8em,1px);*/
/* tooltip radius */

/*timeline-scope: --thumb-view;
    position: relative;*/
/* No, It's not useless so don't remove it (or remove it and see what happens) */
/*font-size: 24px;
}*/

/*input {
    width: 400px;
    height: var(--s);*/
/* needed for Firefox*/
/*--_c: color-mix(in srgb, var(--c), #000 var(--p,0%));
    appearance: none;
    background: none;
    cursor: pointer;
    overflow: hidden;
    font-size: inherit;
}

    input:focus-visible,
    input:hover {
        --p: 25%;
    }

    input:active,
    input:focus-visible {
        --_b: var(--s)
    }*/
/* chromium */
/*input[type="range" i]::-webkit-slider-thumb {
        height: var(--s);
        aspect-ratio: 1;
        border-radius: 50%;
        box-shadow: 0 0 0 var(--_b,var(--l)) inset var(--_c);
        border-image: linear-gradient(90deg,var(--_c) 50%,#ababab 0) 0 1/calc(50% - var(--l)/2) 100vw/0 calc(100vw + var(--g));
        -webkit-appearance: none;
        appearance: none;
        transition: .3s;
        anchor-name: --thumb;
        view-timeline: --thumb-view inline;
    }*/
/* Firefox */
/*input[type="range"]::-moz-range-thumb {
        height: var(--s);
        width: var(--s);
        background: none;
        border-radius: 50%;
        box-shadow: 0 0 0 var(--_b,var(--l)) inset var(--_c);
        border-image: linear-gradient(90deg,var(--_c) 50%,#ababab 0) 0 1/calc(50% - var(--l)/2) 100vw/0 calc(100vw + var(--g));
        -moz-appearance: none;
        appearance: none;
        transition: .3s;
        anchor-name: --thumb;
        view-timeline: --thumb-view inline;
    }*/
/*
output {
    position-anchor: --thumb;
    position: absolute;
    position-area: top;
    inset: 0 -4em;
    color: #fff;
    font-weight: bold;
    font-family: sans-serif;
    text-align: center;
    padding-block: .5em;
    width: 4em;
    border-bottom: var(--t) solid #0000;
    border-radius: var(--r)/var(--r) var(--r) calc(var(--r) + var(--t)) calc(var(--r) + var(--t));
    --_m: 100%/var(--t) var(--t) no-repeat;
    --_g: 100%,#0000 99%,#000 102%;
    mask: linear-gradient(#000 0 0) padding-box, radial-gradient(100% 100% at 100% var(--_g)) calc(50% + var(--t)/2) var(--_m), radial-gradient(100% 100% at 0 var(--_g)) calc(50% - var(--t)/2) var(--_m);
    animation: range linear both;
    animation-timeline: --thumb-view;
    animation-range: entry 100% exit 0%;
}

    output.bottom {
        position-area: bottom;
        border-top: var(--t) solid #0000;
        border-bottom: none;
        border-radius: var(--r)/calc(var(--r) + var(--t)) calc(var(--r) + var(--t)) var(--r) var(--r);
        --_m: 0%/var(--t) var(--t) no-repeat;
        --_g: 0%,#0000 99%,#000 102%;
    }

    output:before {
        content: counter(num);
        counter-reset: num var(--val);
    }
@keyframes range {
    0% {
        background: #8A9B0F;
        --val: var(--max)
    }

    100% {
        background: #CC333F;
        --val: var(--min)
    }
}

@supports not (anchor-name: ---) {
    output {
        display: none;
    }
}*/