* {
  box-sizing: border-box;
}


html, body {
    padding: 0px;
    margin: 0px;
}

body {
    background: #1f1f1f;
    background-image: linear-gradient(#2b2a2a, #131313);
    font-family: Tahoma, sans-serif;
    min-height: 100vh;
}

header {
    background: #3e3e3e;

    display: flex;
    flex-direction: row;
    align-items: space-around;
    margin: 20px;
    border-radius: 10px;
    /*
    box-shadow: 0px 1px 2px #000;
    */
}

h1 {
    flex: 0 0 110px;
    height: 35px;
    background-size: auto 25px;

    background-image: url("/static/images/logo_dark.svg");
    background-repeat: no-repeat;
    background-position-x: 17px;
    background-position-y: 5px;

    margin: 8px;
    padding: 0;

    overflow: hidden;
    text-indent: -1000px;

    border-radius: 5px;
}

.light-switch {
    flex: 1 1;
    display: flex;
    justify-content: flex-end;
}

.light-switch a {
    display: flex;
    border-radius: 30px;
    background: #afafaf;

    justify-content: center;
    align-items: center;

    margin: 10px;
    padding: 0px 5px;
}

.light-switch a img {
    height: 25px;  
    color: white;
}


.light-switch .light {
    display: none;
}

.light-switch .dark {
    filter: invert() opacity(75%);
}

.container {
    display: flex;
    flex-direction: column;
    margin: 0px;
    padding: 0px;
}

nav {
    flex: 0 1;
    display: flex;
    flex-direction: column;
    padding-left: 0px;
}

main {
    flex: 1;
}

main section {
    color: #efefef;
    margin: 20px;
    margin-top: 0px;
    background: #3e3e3e;   
    border-radius: 5px;
    padding-bottom: 25px;
}

nav section {
    flex: 0 0;
    background: #3e3e3e;

    margin: 20px;
    margin-top: 0px;
    border-radius: 5px;
    /* box-shadow: 0px 2px 8px #000; */
    font-size: 14px;

    color: #c7c7c7;
}


nav section h4 {
    margin: 5px 0px;
    padding: 0px;
}

/* 
 * For non mobile devices,
 * reduce the width of the section cards and
 * align them to the left.
 */
@media screen and (min-width: 961px) {
    html, body {
        height: 100vh;
        overflow: hidden;
    }
    .container {
        flex-direction: row;
        height: calc(100vh - 110px);
    }
    nav {
        flex: 0 0 30%;
        max-width: 30%;
        height: 100%;
        overflow-y: scroll;

        scrollbar-width: thin;
        scrollbar-color: #3e3e3e #1f1f1f;
    }
    main {
        order: 2;
    }
}

section > a  {
    color: #cacaca;
    text-decoration: none;
}

section > a h2,
section > h2 {
    color: #cacaca;

    margin: 0;
    padding: 8px 15px;
    font-weight: 800;
    font-size: 20px;

    border-bottom: 3px dotted #c7c7c7;
}

section .content {
    padding: 15px;
}

section .content ul {
    padding-left: 1.5rem;
    list-style: disclosure-closed;
}

section .content ul a {
    text-decoration: none;
    padding-left: 5px;
    transition: all .8s;
}


section .content ul a,
section .content ul a:visited {
    color: #9ebf7d;
}

section .content ul a:hover {
    transition: all .8s;
    color: #ffffff;
    text-decoration: underline;
}

nav .actions {
    padding: 10px;
    display: flex;
    flex-direction: row;
    justify-content: end;
}

nav .actions ul,
main .actions ul {
    display: flex;
    flex-direction: row;
    list-style: none;
    padding: 0px;
    margin: 0px;
    justify-content: center;
}

main .actions ul li,
nav .actions ul li {
    justify-content: center;
    background: #4f4f4f;
    border-radius: 10px;
    padding: 3px 8px;
}

main .actions ul a,
nav .actions ul a {
    text-decoration: none;
    color: #9ebf7d;
    font-weight: bold;
}

img.btn-icon {
    height: 30px;  
    color: white;
    margin-top: 3px;
    margin-left: 1px;
}

/**
 * Extensions (dark mode)
 */
.extension-select {
    margin: 1rem 0;
}

.extension-select .extension {
    background: #2e2e2e;
    border: none;
    border-radius: 3px;
}

.extension-select .extension .chk-enabled .input-group {
    background: #3c3c3c;
    font-family: monospace;
    font-weight: bold;
    line-height: 25px;
}

.extension p.title {
    margin: 0px;
}

.extension .group.header {
    margin-bottom: 1rem;
}

.extension p.description {
   color: #dbdbdb;
   font-size: 0.85rem;
}



main .actions {
    padding: 10px 15px;
    display: flex;
    flex-direction: row;
    justify-content: start;
}

main .actions li {
    margin-right: 10px;
}

main .actions .btn {
    padding: 5px;
}

.extension .chk-enabled a {
    text-decoration: none;
    color: #dbdbdb;
}

.extension.extension-enabled {
    border-left: 4px solid #5b8f4c;
}  

.action-icon {
    height: 20px;  
    color: white;
    margin-top: 5px;
    margin-left: 1px;
    margin-right: 10px;
    filter: opacity(60%);
}


.chk-enabled .input-group {
    margin: 5px;
}

.chk-icon {
    margin-top: 2px;
    margin-bottom: -4px;
    height: 20px;  
    color: white;
    margin-right: 0px;
    filter: opacity(60%);
}


body.light {
    background: #fafafa;
}

.light header {
    background: #eaeaea;
    box-shadow: 0px 2px 3px #bbb;
}

.light h1 {
    background-image: url("/static/images/logo.svg");
}

.light section {
    background: #eaeaea;
    color: #555;
    box-shadow: 0px 2px 3px #bbb;
}

.light section h2,
.light section > a h2 {
    border-bottom: 3px dotted #ccc;
    color: #555;
}

.light section > a {
    color: #555;
}

.light section .content ul a,
.light section .content ul a:visited {
    color: #788a65;
}

.light section .content ul a:hover {
    color: #222;
}

.light .extension-select .extension {
    background: #e0e0e0;
}

.light .extension-select .extension .description {
    color: #222;
}

.light main .actions ul li,
.light nav .actions ul li {
    background: #f4f4f4;
    box-shadow: 0px 2px 3px #ccc;
}

.light .extension-select .extension .chk-enabled {
    filter: invert();
}

.light .extension-select .extension .chk-enabled .input-group {
}

.light .action-icon {
    filter: invert();
}

.light nav {
    scrollbar-color: #e3e3e3 #ffffff;
}

body.light .light-switch .light {
    display: flex;
}

body.light .light-switch .dark {
   display: none; 
}