/*  style1.css
version 5/6/2025  réduction de la taille des colonnes latérales et alignement du texte à gauche
dans les tables
   version  8/1/25    ajout   suggestions-container
  version 3 du 13-12-2024  
vert   et  clic sur cellule de table + couleurs et taille

*/
* {
    box-sizing: border-box;
}

body {
    margin: 5px;
    background: #fefef6;
    font-size: 1em;
    font-family: "Hevetica Neue", Helvetica, Arial, sans-serif;
}

/* Style the header */
.header {

    background-color: #0a6829;
    /* background-color: #df7f7f;*/
    color: #fffffff1;
    padding: 4px;
    text-align: center;
}

/* Style the top navigation bar ex font-size: 1.5rem; */
.topnav {
    font-size: 1em;
    overflow: hidden;
    background-color: #0a6829;
    color: #fffffff1;
    padding: 4px;
}

/* Style the topnav links */
.topnav a {
    color: rgba(251, 8, 8, 0.59);
    float: left;
    width: 33%;
    display: block;
    color: inherit;
    text-align: center;
    padding: 3px 10px;
    text-decoration: none;
}

/* Change color on hover */
.topnav a:hover {
    /*   color: rgba(69, 8, 251, 0.59); */
    color: rgba(251, 8, 8, 0.59);
    background-color: #ddd;

}

table {
    border-collapse: collapse;
    width: 100%;
    text-align: left;
}

caption {
    font-size: 1.52em;
    font-weight: bold;
    font-style: italic;
    margin: 4px;
}

table,
th,
td {
    border: 1px solid gray;
}

th,
td {
    height: 36px;
    padding: 4px;
    vertical-align: middle;
}
td a {
    color: #5686f5;
    float: left;
    font-weight: bold;
    display: block;

    text-align: left;
    padding: 3px 10px;
    text-decoration: none;
}

/* Change color on hover */
a:hover {
    color: rgba(251, 8, 8, 0.59);
    background-color: #ddd;

}

th {
    background-color: #0a6829;
    color: #fffffff1;
}

.rowtitle {
    background: #9CF;
    font-weight: bold;
}

input {
    padding: 8px 20px;
    margin: 8px 0;
    box-sizing: border-box;
    border-radius: 6px;
    border-width: 2px;
    padding: 5px;
}

input.larger {
    transform: scale(3);
    margin: 30px;
}

input:invalid {
    border: 2px dashed red;
    background-color: #FDD;
}

label {
    padding: 12px 12px 12px 0;
    display: inline-block;
}

span.couleur_rouge {
    color: rgb(197, 14, 14);
}

span.couleur_verte {
    color: rgb(35, 185, 42);
    font-size: 20px;
}

span.couleur_bleu {
    color: #3b08f0;
}

.button,
button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
    padding: 0 2em;
    color: rgb(88, 17, 229);
    text-align: center;
    font-size: 1em;
    font-weight: 600;
    line-height: 1.5rem;
    letter-spacing: .1rem;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    border-radius: 6px;
    border: 1px solid #bbb;
    cursor: pointer;
}


/* Create three unequal columns that floats next to each other */
.column {
    float: left;
    padding: 8px;
}

/* Left and right column */
.column.side {
    width: 8%;
}

/* Middle column */
.column.middle {
    width: 84%;
}

/* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
}

#suggestions-container {
    border: 1px solid #ccc;
    max-height: 200px;
    overflow-y: auto;
    position: absolute;
    background-color: white;
    width: 100%;
    z-index: 1000;
}

.suggestion-item {
    padding: 10px;
    cursor: pointer;
}

.suggestion-item:hover {
    background-color: #ddd;
}

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 580px) {

    .column.side,
    .column.middle {
        width: 100%;
    }

    /* Style the topnav links */
    .topnav a {
        font-size: 0.8em;
        float: left;
        /*  width: 25%;  */
        /*   display: block; */
        color: inherit;
        /* color: rgb(35, 185, 42);  */
        text-align: center;
        padding: 3px 3px;
        /*   padding: 3px 10px;  */
        text-decoration: none;
    }
}