@import "bretzel_layouts.css";
html, body {font-family: consolas, monospace; }

body {
    margin: 0;
    padding: 0;
}

header{
    position: sticky;
    top: 0;
    padding: 10px 5px;
    z-index:25;
    background-color: rgba(255,255,255,0.9);
    box-shadow: 2px 4px 5px rgba(0,0,0,0.6);
}

footer{
    margin:20px 0 0;
    padding: 10px 5px;
    background-color: rgba(255,255,255,0.9);
    box-shadow: 0px -2px 5px rgba(0,0,0,0.6); 
}

h1{font-size:1.8rem; margin: 35px 5px 0 0}

#lk_legend{
    position: fixed;
    top: 0;
    right: 0px;
    z-index: 30;
    background-color: rgba(255,255,255,0.9);
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-shadow: 2px 4px 5px rgba(0,0,0,0.6);
    cursor:pointer;
}

.container{ padding: 0 5px;}


#contyears{position:relative; z-index:10;}

.drapeau{
    width: 20px;
    height: 15px;
    margin: 0 5px;
    display: inline-block;  
}
.num {text-align: right;    }
.lst_clst{padding: 50px 0;}

.card {
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 5px;
    margin: 20px 0;
    background-color: rgba(255,255,255,0.8);
    box-shadow: 2px 2px 5px rgba(0,0,0,0.1);
    cursor:pointer;
}

.card{
    position:relative;
}
.clst{
    position:absolute;
    top:-17px;
    left:4px;
    padding:4px;
    font-size: 18px;
    font-weight: bold;
    border: 1px solid #ccc;
    border-radius: 50px;
    background-color: rgba(255,255,255,0.8);
    color: #333;
}

.satisfaction{
    position:absolute;
    top:-10px;
    right:5px;
    color:#2fdb04;
    text-shadow: 1px 1px 0px rgba(0,0,0,1), -1px -1px 0px rgba(0,0,0,1), -1px 1px 0px rgba(0,0,0,1), 1px -1px 0px rgba(0,0,0,1); 
}

[data-layout*="reel"]{
    overflow: visible;
    --item-size: 15%;
}
/*
.item.empty{ width: 40px !important; 
    flex-basis: var(--null);
  margin-left: -20px; 
  margin-right: -20px;
}
*/

[data-layout*="switcher"] {
  & > .item.empty {
    flex-basis: calc((var(--switcher-min-size) - 100%) * 999);
    flex-grow: 0;
  }
}
.item.empty h2{font-size: 1rem;}

.item.hidden h2{visibility: hidden; height:0; margin:0; padding:0;}

h2{text-align:center;}

.years{ align-items: center;}

.card.highlight {
    border-color: #ff0000;
    box-shadow: 0 0 10px rgba(255, 0, 0, 0.5);
}
.jquery-modal{z-index:100}

.modal h2 { margin:0}
.modal h3 { margin:0;}
.modal hr { margin:0 0 10px; color:#ccc}

.trois_cols{
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.tablemodal {
    border-collapse: collapse;
    margin-top: 10px;
    border:1px solid #ddd;
}

.tablemodal td, .tablemodal th {
        border:1px solid #ddd;  
        padding:4px;
}

.tablemodal td{
    text-align: right;
}

@media (max-width: 1630px) { 
    .item.empty {display:none;}
}

@media (max-width: 1132px) { 
    [data-layout*="switcher"] {
        & > * {
            flex-basis: 100%;
            flex-grow: 1;
        }
    }

    #headeryears{ display:none;}

    #bigchart h2 { visibility: visible; height: auto;}
}