#grid {
    display:grid;
}

@media only screen and (min-width: 750px) {
    #grid {
	grid-template-areas: 'switch report fetch';
    }
}
@media only screen and (max-width: 749px) {
    #grid {
	grid-template-areas:
	    'switch'
	    'fetch'
	    'report';
    }
}


:root {
  --base03:    #002b36;
  --base02:    #073642;
  --base01:    #586e75;
  --base00:    #657b83;
  --base0:     #839496;
  --base1:     #93a1a1;
  --base2:     #eee8d5;
  --base3:     #fdf6e3;
  --yellow:    #b58900;
  --orange:    #cb4b16;
  --red:       #dc322f;
  --magenta:   #d33682;
  --violet:    #6c71c4;
  --blue:      #268bd2;
  --cyan:      #2aa198;
  --green:     #859900;
}


#fetch {
    display: inline-grid;
    grid-area: fetch;
}

#report {
    display: inline-grid;
    grid-area: report;
}

/* The switch - the box around the slider */
#switch {
    display: inline-grid;
    grid-area: switch;
}

.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
}

/* Hide default HTML checkbox */
.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

/* The slider */
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: 0.4s;
    transition: 0.4s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 40px;
    width: 40px;
    left: 0px;
    bottom: 4px;
    top: 0;
    bottom: 0;
    margin: auto 0;
    -webkit-transition: 0.4s;
    transition: 0.4s;
    box-shadow: 0 0px 15px #2020203d;
    background: white url('night.png');
    background-repeat: no-repeat;
    background-position: center;
}

input:checked + .slider {
    background-color: #2196f3;
}

input:focus + .slider {
    box-shadow: 0 0 1px #2196f3;
}

input:checked + .slider:before {
    -webkit-transform: translateX(24px);
    -ms-transform: translateX(24px);
    transform: translateX(24px);
    background: white url('sunny.png');
    background-repeat: no-repeat;
    background-position: center;
}

/* Rounded sliders */
.slider.round {
    border-radius: 34px;
}

.slider.round:before {
    border-radius: 50%;
}


.dark {
    --texte: white; /* var(--base0); */
    --textn: var(--base3); /* var(--base0); */
    --back3: var(--base00);
    --back2: var(--base01);
    --back1: var(--base02);
    --back0: var(--base03);
    --backh: #ffffff18; /* #eee8d520 */
}
.light {
    --textb: black; /* var(--base01); */
    --textn: var(--base03); /* var(--base00); */
    --back3: var(--base0);
    --back2: var(--base1);
    --back1: var(--base2);
    --back0: var(--base3);
    --backh: #00000018; /* #07364220 */
}


body,
li span,
li output {
	background: var(--back0);
	color: var(--textn);
}
*:selection,
li span:selection,
li output:selection {
	color: var(--texte);
	background: var(--back1);
}
tbody tr:nth-child(6n+4):selection,
tbody tr:nth-child(6n+5):selection,
tbody tr:nth-child(6n+0):selection,
tbody td:nth-child(6n+4):selection,
tbody td:nth-child(6n+5):selection,
tbody td:nth-child(6n+0):selection {
	color: var(--texte);
	background: var(--backh);
}
.collapsible-content .content-inner {
	color: var(--textn);
	background: var(--back1);
	border: 1px solid var(--back2);
}
tbody tr:nth-child(6n+4),
tbody tr:nth-child(6n+5),
tbody tr:nth-child(6n+0),
tbody td:nth-child(6n+4),
tbody td:nth-child(6n+5),
tbody td:nth-child(6n+0) {
	background: var(--backh);
	color: var(--textn);
}
.lbl-toggle {
	color: var(--textn);
	background: var(--back2);
}
/*.lbl-toggle:hover {
	color: var(--back2);
	background: var(--texte);
}
.lbl-toggle:selection {
	background: var(--back3);
	color: var(--texte);
}
.lbl-toggle:hover:selection {
	background: var(--back3);
	color: var(--texte);
}
.collapsible-content .content-inner:selection {
	background: var(--back3);
	color: var(--texte	);
}*/


:link {
	color: var(--blue);
}
:visited {
	color: var(--red);
}