@media print
{    
    .no-print, .no-print * {
        display: none !important;
    }

    body {
	font-size: 70%;
    }
}

.flexcontainer, .mod_flexcontainer {
    display: flex;
    flex-wrap: wrap;
    border: #f0f0f0 solid 1px;
}

caption div.flexcaption{
    /**
     * un élément caption peut avoir un successeur div
     * avec ces propriétés afin de répartir correctement les
     * sous-blocs en les espaçant.
     **/
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
}

.flex-vertical {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    width: 80px;
}

.flexcontained {
    width: 300px;
    height: 225px;
    background: lightblue;
    border: navy solid 1px;
    border-radius: 8px;
    padding: 8px;
    margin: 4px;
}

.mod_flex {
    width: 350px;
    height: 65px;
    background:  #ffffc0;
    border: navy solid 1px;
    border-radius: 8px;
    padding: 8px;
    margin: 4px;
    color: lightgrey;
}

.mod_flex button{
    float: right;
    display: none;
}

.mod_flex.eligible {
    background: lightblue;
    color: black;
}

.mod_flex.traite {
    background: lightgreen;
    color: black;
}

.mod_flex.traite button{
    display: inline-block;
}


.mod_flex.eligible.hoveredByCSV{
    background: rgb(230,250,255);
    box-shadow: 1px 1px 5px #555;

}

.mod_flex.erreur{
    background: rgb(255,180,180);
}

.mod_flex * {
    pointer-events: none; /* évite que les paragraphes interfèrent avec le drag */
}
.mod_flex img {
    pointer-events: initial;
}



.mod_flex p{
    margin: 0;
}

.flexmini {
    width: 100px;
    height: 30px;
    background: #FFEE7C;
    border: navy solid 1px;
    border-radius: 8px;
    padding: 2px;
    margin: 2px;
}

.flexmini {
    width: 100px;
    height: 30px;
    background: #FFEE7C;
    border: navy solid 1px;
    border-radius: 8px;
    padding: 2px;
    margin: 2px;
}

.medium {
    height: 80px;
}

.flexcontainer.eleves .flexmini {
    width: 250px;
    height:50px;
}

.flexmini p, .flexmoyen p {
    margin: 5px 0;
    text-align: center;
}
.flexmini a {
    text-decoration: none;
}

.flexmoyen {
    width: 300px;
    height: 30px;
    background: #FFEE7C;
    border: navy solid 1px;
    border-radius: 8px;
    padding: 2px;
    margin: 2px;
}

.flexordinaire{
    width: 300px;
    background: #FFEE7C;
    border: navy solid 1px;
    border-radius: 8px;
    padding: 8px;
    margin: 2px;
}

a.title {
    text-decoration: none;
    font-weight: bold;
    font-size: 240%;
    margin-left: 5px;
    display: inline-block;
    width: 80%;
}

div.histogramme-prets {
    display: inline-block;
    vertical-align: top;
}

table.tableau_prets {
    margin: 25px 0 10px 0;
    background: orange;
    border-collapse: collapse;
    display: inline-block;
}

table.tableau_prets caption {
    background: #FFEE7C;
    color: #2C254C;
    border: 1px solid #2C254C;
    padding: 8px;
    border-radius: 8px;
    font-size: 120%;
    font-weight: bold;
}

table.tableau_prets th, table.tableau_prets td {
    border: 1px solid #2C254C;
    padding: 4px;
}

table.tableau_prets th:nth-child(even), table.tableau_prets td:nth-child(even) {
    background: rgba(0,0,0,0.05);
}

table.tableau_prets tr:nth-child(even) {
    background:  rgb(250, 100, 80);
}

table.tableau_prets tr.clean:nth-child(odd) {
    background: rgba(0,128,0.8);
    color: white;
}

table.tableau_prets tr.clean:nth-child(even) {
    background: rgba(0,255,0.8)
}

ul.onglets li {
    display: inline-block;
    padding: 5px;
    margin: 0 2px;
    font-size: 120%;
    font-weight: 500;
    background: #ffffe0;
    /* border-radius: 5px; */
    border-top: 1px lightblue solid;
    border-right: 1px lightblue solid;
    border-left: 1px lightblue solid;
    position: relative;
    z-index: 0;
}

ul.onglets li:target {
    background: #ffffc0;
    border-top: 1px navy solid;
    border-right: 1px navy solid;
    border-left: 1px navy solid;
    z-index: 20;
}

ul.onglets li a {
    text-decoration: none;
    color: #888888;
}

ul.onglets li:target a {
    text-decoration: none;
    color: black;
}

ul.onglets {
    margin: 0;
}

#donnees_utilisateur {
    background:  #ffffc0;
    border: 1px navy solid;
    border-radius: 5px;
    cursor: pointer;
}

#contents {
    background:  #ffffc0;
    border: 1px navy solid;
    border-radius: 5px;
    z-index: 10;
    position: relative;
    margin-top: -2px;
    padding: 5px;
}

p.bandeau-images {
    background: white;
    margin: 5px;
    border: 1px black solid;
    border-radius: 8px;
    padding: 5px;
}

p.bandeau-images img{
    height: 60px;
    margin: 0 3px;
}

.fond-blanc {
    background: white;
    padding: 5px;
    border: 1px navy solid;
    border-radius: 5px;
    margin: 5px;
}

fieldset.fond-blanc legend {
    padding: 5px 10px;
    border: 1px navy solid;
    border-radius: 25px;
    font-size: 120%;
    font-weight: bold;
    background: rgb(255,200,100);
    margin-left: 1em;
}

.notif {
    position: fixed;
    top: 40%;
    left: 20%;
    max-width: 70%;
    text-align: center;
    background: lightcyan;
    color: black;
    padding: 1ex;
    font-size: 160%;
    border: 1px darkorange solid;
    display: inline-block;
}

.version {
    font-size: 70%;
    display: inline-block;
    width: 100%;
    text-align: center;
}

.tableau-donnees{
    border-collapse: collapse;
    background: white;
    margin: 1ex;
}

.petitbouton{
    vertical-align: top;
}

.tableau-donnees img, .petitbouton img {
    width: 32px;
    margin: 2px;
    cursor: pointer;
}

.tableau-donnees td, .tableau-donnees th{
    border: 1px solid black;
    padding: 3px;
}

ul.errorlist {
    border: red 2px solid;
    background: white;
    padding: 1ex;
    border-radius: 1ex;
}

ul.errorlist li{
    margin-left: 3ex;
}

ul.errorlist::before {
    font-weight: bold;
    font-size: 140%;
    color: darkred;
    content: "Il y a une ou plusieurs erreurs";
}

table.deux-colonnes-formulaire th {
    text-align: right;
    padding-right: 1ex;
}

.liste-livres {
    margin: 10px 0;
    padding: 5px;
    border-radius: 5px;
    width: 85%;
    height: 200px;
    box-shadow: 1px 1px 5px #555 inset;
    overflow: scroll;
}

.liste-eleves {
    background: white;
    border: navy 1px solid;
    display: inline-block;
    padding: 5px;
    border-radius: 5px;
}

.liste-eleves li{
    cursor: pointer;
}

.linkcursor {
    cursor: pointer;
}

.actionbuttons img {
    width: 64px;
    margin: 4px;
    cursor: pointer;
}

.minibutton img {
    width: 18px;
    margin: 1px;
    cursor: pointer;
}

.ui-widget-overlay {
    opacity: .3 !important;
}

p.message_preview {
    background: white;
    border: solid 1px navy;
    padding: 5px;
    border-radius: 5px;
    margin: 5px 0;
    width: 580px;
}

#nouveaux_livres table,  #livres-rendus table{
    border-collapse: collapse;
    border: 1px black solid;
    margin: 5px 0;
    min-width: 450px;
}

#nouveaux_livres tr:nth-child(even),  #livres-rendus tr:nth-child(even) {
    background: rgba(0,0,0,0.05);
}

#livres-rendus tr.rendu {
    background: rgb(200,255,200);
}

#livres-rendus tr.rendu:nth-child(even) {
    background: rgb(190,240,190);
}

#livres-rendus tr.degrade {
    background: rgb(255, 200,10);
}

#livres-rendus tr.degrade:nth-child(even) {
    background: rgb(237,190,9);
}

#livres-rendus tr.perdu {
    background: rgb(255, 10,10);
}

#livres-rendus tr.perdu:nth-child(even) {
    background: rgb(235,9,9);
}

#livres-rendus tr.est-paye {
    background: lightgrey;
}

#nouveaux_livres td,  #nouveaux_livres th,  #nouveaux_livres caption,
.livres_rendus td,  .livres_rendus th,  .livres_rendus caption
{
    border: 1px black solid;
    text-align: center;
    padding: 5px;
}

.hidden {
    display: none;
}

tr.manuel.rendu td.perdu input {
    display: none;
}

.liste-eleves-prets, .liste-eleves-sans-prets {
    margin: 10px 0;
    padding: 5px;
    border-radius: 5px;
    width: 85%;
    height: 200px;
    box-shadow: 1px 1px 5px #555 inset;
    overflow: scroll;
}

.tout-l-ecran {
    top: 0;
    bottom: 0;
}

#should_login{
    display: inline-block;
    width: 300px;
    text-align: center;
}

html,body {
    height: 99%;
}

body {
    padding-bottom: 3px;
}

div.page {
    display: flex;
    flex-flow: column;
    height: 100%;
}

#page_header {
    flex: 0 1 auto;
}

#page_header h1, #page_header h2, #page_header h3 {
    text-align: center;
}

#page_footer {
    flex: 0 1 28px;
    background: rgb(255,240,230);
    border: 1px navy solid;
    border-radius: 5px;
    margin: 2px 0;
    padding: 1px 10px;
    text-align: right;
}

#contents {
    flex: 1 1 auto;
}

img.mini {
    height: 24px;
    vertical-align: middle;
}

span.mini{
    vertical-align: middle;
}

#aide {
    position: fixed;
    top: 100px;
    right: 50px;
    z-index: 100;
    opacity: 0.5;
}

#aide:hover {
    opacity: 1;
}

p.simple_link {
    cursor: pointer;
    color: navy;
}

.csvfile {
    font-family: monospace;
    font-size: 90%;
    color: darkred;
}

/** pour l'url /cartes **/
#classes {
    display: inline-block;
}
#classes li {
    padding: 0 2px;
    border: 1px solid black;
}
#classes li:hover {
    background: yellow;
}
#classes li.ui-selected {
    background: orange;
}

.grise {
    /* fond grisé après une opération qui désactive un élément*/
    background: grey;
}

.grise button {
    /* quand un élément est grisé on n'y trouve plus de boutons à cliquer */
    display: none;
}

.grise button.toujoursvisible {
    /* à moins que le bouton soit toujours visible ? */
    display: initial;
}

button.big {
    font-size: 140%;
    font-weight: bold;
}

button[type='button'] {
    cursor: pointer;
}

div.liste_eleves {
    display: inline-block;
    width: 380px;
}

div.liste_eleves textarea {
    width: 370px;
    height: 240px;
}



div.targetSiecle {
    margin: 3px;
    padding: 3px;
    text-align: center;
    border: navy 1px solid;
    border-radius: 3px;
    background: #eeff00;
}
div.targetSiecle.hoveredByCSV {
    background: #ffee00;
}

.inline400 {
    display: inline-block;
    width: 400px;
    margin: 2px;
    border: 1px black solid;
    border-radius: 5px;
    padding: 5px;
    vertical-align: top;
}

#meme-classe {
    min-width: 50px;
    min-height: 50px;
    border: 1px navy solid;
    padding: 5px;
    border-radius: 5px;
    margin: 0 10px;
}

#meme-classe  table {
    background: #ffeeff;
    border: 1px navy solid;
    margin: 2px;
}

#meme-classe  tr:nth-child(even) {
    background: #ffddff;
}

#meme-classe .meme-eleve {
    background: rgba(0,0,0,0.2)
}

.liste-scroll-y {
    max-height : 200px;
    overflow-y: scroll;
}



#all-contents {
    display: flex;
}

.warn {
    border: 1px solid navy;
    padding: 5px;
    border-radius: 5px;
    box-shadow: 0 0 20px #aa00aa;
    font-weight: bold;
    color: #d00;
    background: #EDFF2F;
}

.paragraphe_tasse p {
    margin: 1px 0;
}

input.enorme {
    font-size: 240px;
    font-weight: bold;
    width: 99%;
    text-align: center;
}

div.bien_visible {
    font-size: 36px;
    font-weight: bold;
    color: yellow;
    background: navy;
    padding: 20px;
    border-radius: 20px;
}

div.login-form {
    width: 180px;
    height: 200px;
    background: ivory;
    border: 1px black solid;
    padding: 15px;
    margin: 5px 15px;
    float: left;
}

div.login-form label {
    display: block;
    line-height: 2em;
}

div.login-form .submit-row {
  padding: 1em 0 0 0;
  margin: 0;
  text-align: center;
}

div.login-form h3 {
    line-height: 2em;
    margin: 0;
    padding: 0 2px;
    background: navy;
    color: white;
    border-radius: 2px;
    /* test-align: center; */
}

.conseil {
    font-size: 70%;
    color: grey;
    margin: 0;
}

.livre {
    margin: 2px;
    border: 1px black solid;
    padding: 5px;
    border-radius: 5px;
    display: inline-block;
    background: lightyellow;
    position: relative;
}

.livre.semi-transparent {
    opacity: 0.33;
}

.livre .container{
    width: 150px;
    height: 60px;
    text-align: center;
    display: table;
    position: relative;
}

.livre .container.fixe::after{
    content: url('/static/img/fixe.svg');
    display: inline-block;
    position: absolute;
    top: 0px;
    left: 5px;
}

.livre .info {
    display: table-cell;
    vertical-align: middle;
    font-weight: bold;
    user-select: none;
}

.livre .ids {
    display: none;
}

div.fondvert {
    margin: 5px;
    padding: 10px;
    border-radius: 10px;
    background: #ddffdd;
    display: inline-block;
    min-width: 60px;
    min-height: 50px;
}

div.fondvert.sensitive:hover{
    background: #99ff99;
}

div.fondrose {
    margin: 5px;
    padding: 10px;
    border-radius: 10px;
    background: #ffddff;
    display: inline-block;
    min-width: 60px;
    min-height: 50px;
}

div.fondrose.sensitive:hover{
    background: #ff99ff;
}

.python-code {
    /* like pre */
    display: block;
    unicode-bidi: embed;
    font-family: monospace;
    white-space: pre;
    background: black;
    color: lightgreen;
    padding: 20px;
    border-radius: 10px;
}

.separateur-noir {
    padding: 5px;
    text-align: center;
    background: black;
    color: white;
    font-size: 140%;
    font-weight: bold;
}

.separateur-noir .flechehaut {
    color: lightgreen;
}

.separateur-noir .flechebas {
    color: lightpink;
}

#choix-boutique-ok {
    background: darkgreen;
    color: lightyellow;
    margin: 2px;
    border: 1px red solid;
    padding: 5px;
    border-radius: 5px;
    display: inline-block;
    cursor: pointer;
}

#choix-boutique-ok .container{
    width: 150px;
    height: 60px;
    text-align: center;
    display: table;
}

#choix-boutique-ok .ok {
    font-size: 140%;
    font-weight: bold;
}

#coches li {
    display: inline-block;
    padding: 3px;
    margin: 3px;
    border: 1px solid black;
    border-radius: 3px;
    background: peachpuff;
    font-size: 50%;
}

ul#coches {
    margin: 0px;
    padding: 0px;
}

#coches input{
    height: 25px;
    width: 25px;
}

#coches li.checked {
    background: lightgreen;
}

.qr-reader {
    width: 98%;
    padding: 5px;
}

.qr-reader.ok, .qr-reader .ok{
    background: green;
    text-align: center;
    font-size: 32px;
}
.qr-reader.ko, .qr-reader .ko{
    background: red;
    text-align: center;
    font-size: 32px;
}
.qr-reader.kk, .qr-reader .kk{
    background: yellow;
    text-align: center;
    font-size: 32px;
}
.qr-reader button {
    vertical-align: middle;
    font-size: 32px;
    margin: 0 10px;
    cursor: pointer;
}

#qr-reader {
    margin: 0 auto;
    max-width: 500px;
}

#qr-reader-results{
    font-size: 70%;
    margin: 1px;
}

p.mi-largeur {
    display: inline-block;
    width: 45%;
    vertical-align: middle;
}

p.instructions{
    background: lightyellow;
    border: 2px navy dashed;
    border-radius: 10px;
    padding: 10px;
    text-align: center;
}

.overflowing-cell {
    height: 40px;
    width: 200px;
    overflow: auto;
    display: inline-block;
    padding-right: 12px;
}

.img-small{
    max-width: 50px;
    max-height: 50px;
    vertical-align: middle;
}

input.large{
    min-width: 360px;
}

div.bouton-suppr{
    display: inline-block;
    border: 1px solid black;
    padding: 5px;
    border-radius: 5px;
    background: rgba(0,255,0,0.5);
}

div.bouton-suppr img{
    width: 10px;
}

div.bouton-classe{
    display: inline-block;
    border: 1px solid navy;
    color: lightgreen;
    padding: 5px;
    border-radius: 5px;
    background: #444;
}

div.bouton-classe img{
    width: 10px;
}

/**
 * styles inspirés de https://matthewjamestaylor.com
 ***************************************************
 * les conteneurs horizontaux doivent être de classes "padded-boxes", pour
 * mettre deux colonnes par ligne, et de classe "padded-boxes twice", pour
 * mettre une seule colonne en pleine largeur. Quand la largeur diminue,
 * les parties en double colonne occupent toute la largeur.
 * chaque <section> va ocuper une ligne.
 * les contenus de classe "heading" permettent de faire des en-têtes
 **/

/* container */
.padded-boxes {
    display:flex;
    flex-wrap:wrap;
    gap:0.2rem 1rem;
}

/* boxes */
.padded-boxes > * {
    width:100%;
    background:#eee;
    border-radius:.4rem;
    /* border: 1px navy solid; */
}

/* headings */
.padded-boxes .heading {
    background:#f97171;
    margin:0;
    padding:1rem;
    border-top-left-radius:.4rem;
    border-top-right-radius:.4rem;
    border: 1px solid navy;
}

.padded-boxes .headingnext {
    background:#f97171;
    margin:0;
    padding:0.2rem 1rem;
    border-top-left-radius:.4rem;
    border-top-right-radius:.4rem;
    border: 1px solid navy;
}

/* padded content */
.padded-boxes .padded {
    padding:.1rem 1rem;
    border: 1px solid navy;
}

.padded-boxes .padded input, .padded-boxes .padded textarea {
    width: 100%;
}

/* phone breakpoint */
@media (min-width:600px) {
    .padded-boxes > * {
        width:calc(50% - 0.5rem);
    }

    .rightalign > * {
	text-align: right;
    }

    .padded-boxes.twice > * {
        width: 100%;
    }  
}

button.une-etiquette{
    width: 180px;
    height: 97px;
    margin: 0 2px;
    vertical-align: middle;
    text-align: center;
    background: lightgreen;
    border: 1px solid black;
    border-radius: 5px;
    cursor: pointer;
}

button.une-etiquette:hover{
    background: yellow;
}

p.tableau-etiquettes{
    background: white;
    border: 1px solid black;
    padding: 32px 18px;
    display: inline-block;
}

a.button {
    font-size: 90%;
    text-decoration: none;
    background-color: #EEEEEE;
    color: #333333;
    padding: 2px 6px 2px 6px;
    border-top: 1px solid #CCCCCC;
    border-right: 1px solid #333333;
    border-bottom: 1px solid #333333;
    border-left: 1px solid #CCCCCC;
    border-radius: 4px;
    margin: 0 2px;
}

table.column {
    flex-wrap: wrap;
    border-collapse: collapse;
    margin: 0 10px 0 0;
}

table.column th, table.column td {
    border: 1px solid black;
}

table.rose {
    background: #ffeeff;
    border: 1px navy solid;
    margin: 2px;
}

table.rose  tr:nth-child(even) {
    background: #ffddff;
}

/* pour le rectangle de choix des langues */
div.flag-container {
    display: flex;
    flex-flow: row wrap;
    width: 80px;
    border: 1px dotted black;
}

div.lang {
    border: 2px solid white;
    width: 22px;
    flex-shrink: 0;
    margin:0;
}

div.lang-chosen {
    border: 1px solid navy;
    background: #ffffc0;
}

fieldset.frame {
    border: 1px solid navy;
    border-radius: 10px;
    padding: 10px;
    background: #ffffff;
}

legend.strong {
    border: 1px solid navy;
    border-radius: 10px;
    padding: 5px;
    background: orange;
    font-size: 140%;
    font-weight: bold;
}


table.etiquettes td {
    width: 200px;
    height: 80px;
    text-align: center;
    background: lightgreen;
    border: 1px solid black;
    border-radius: 3px;
}

table.etiquettes td.tabou {
    background: lightpink;
}

.gros-bouton-texte {
    width: 107px;
    height: 107px;
    vertical-align: top;
    font-size: 140%;
    font-weight: bold;
    color: green;
}

a.discret {
    text-decoration: none;
    color: inherit;
}