@media screen {
    :root{
        --color-light: #F0FEFF;
        --color-dark: #CCFCFF;
        --transition: background-color 250ms linear;
    }

    body{
        background-color: var(--color-light);
        transition:var(--transition);
    }

    header {
        box-shadow: 0 0 10px black;
    }

    .navbar{
        min-height: 50px;
    }

    .bg-white{
        background-color: white;
    }

    .bg-dark-blue{
        background-color: var(--color-dark);
        transition:var(--transition);
    }

    .bg-light-blue{
        background-color: var(--color-light);
        transition:var(--transition);
    }

    .logo-img, .logo-img a{
        width: 100px;
        height: 70px;
    }

    .logo-img a img{
        max-width: 100%;
        max-height: 100%;
    }

    .f-1 {
        flex: 1;
    }

    .block-accueil{
        min-width: 200px;
    }

    .cursor-pointer {
        cursor: pointer;
    }

    button.btn.btn.danger.m-2 {
        margin-left: 50px !important;
    }

    th a:hover{
        text-decoration: underline;
        color: var(--color-light);
    }

    th a {
        text-decoration: none;
        color: var(--color-light);
    }

    th.sorted a{
        color: var(--color-dark);
    }

    th.sorted.dir_asc a::after{
        content: "▲";
        color: var(--color-dark);
    }

    th.sorted.dir_desc a::after{
        content: "▼";
        color: var(--color-dark);
    }

    .pagination span{
        margin-right: 10px;
    }

    caption {
        caption-side: top;
    }

    #btn-print {
        position: fixed; 
        right: 0;
        bottom: 0;
        z-index: 17322;
    }

    .sous-menu {
        max-height: 20rem;
    }
}
@media print {
    :root{
        --color-light: #FFFFFF;
        --color-dark: #CFCFCF;
    }
    
    *{
        color-adjust: exact !important;  
        -webkit-print-color-adjust: exact !important;
        -moz-print-color-adjust: exact !important;
        background-color: white !important;
        print-color-adjust: exact !important;
        margin: 0  auto;
    }
    
    header {
        display: none;
    }
    
    .bg-white{
        background-color: white !important;
    }
    
    .bg-dark-blue{
        background-color: #ffffff !important;
    }
    
    .bg-light-blue{
        background-color: #ffadad !important;
    }
    
    .logo-img, .logo-img a{
        width: 100px;
        height: 70px;
    }
    
    .logo-img a img{
        max-width: 100%;
    }
    
    .f-1 {
        flex: 1;
    }
    
    button.btn.btn.danger.m-2 {
        margin-left: 50px !important;
    }
    
    .pagination span{
        margin-right: 10px;
    }
    
    caption {
        caption-side: top;
    }

    .print-button, hr {
        display: none;
    }

    .chart{
        display: block;
        width: 100vw;
        margin-left: 0;
        padding-left: 0;
    }

    .chart-group{
        height: 200vh;
    }

    .tab-group{
        height: 50vh;
    }

    .chart-group, .tab-group{
        width: 100vw !important;
    }
}