/** 
 * Dark Mode 
 **/

/* Navigation slider */
nav .switch {
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1em;
}

nav .switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

nav .slider {
    position: absolute;
    width: 40px;
    height: 21px;
    background-color: #ccc;
    -webkit-transition: 0.4s;
    transition: 0.4s;
    border-radius: 20px;
    right: 0;
}

nav .slider:before {
    position: absolute;
    content: '';
    height: 17px;
    width: 17px;
    left: 2px;
    bottom: 2px;
    background-color: white;
    -webkit-transition: 0.4s;
    transition: 0.4s;
    border-radius: 20px;
}

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

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

nav input:checked + .slider:before {
    transform: translateX(19px);
}

/* Background  and font color */
body.dark {
    background: linear-gradient(135deg, #333740, #292b32, #18191c);
    color: #bbb;
}

body.dark a {
    color: #4ea1ff;
}

/* Forms background and font color */
body.dark input,
body.dark select {
    background: #181818;
    border: 1px solid #121212;
    color: #bbb;
}

body.dark input[type='checkbox'],
body.dark input[type='radio'] {
    filter: invert(100%) hue-rotate(180deg);
}

body.dark textarea {
    background-color: #121212;
    color: #bbb;
}

body.dark input[type='button']:hover {
    background-color: #363636;
}

body.dark input[type='button']:disabled {
    background-color: #242424;
    color: #555;
    border-color: #111;
}

/* Category title color */
body.dark .category-title {
    color: #ccc;
}

body.dark .category-title:after {
    background-color: #ccc;
}

/* Squadron */
body.dark #squadron .excluded input,
body.dark #squadron .excluded select {
    background-color: #666521;
}

body.dark #squadron .missing-data input,
body.dark #squadron .missing-data select {
    background-color: #6c0000;
}

body.dark #squadron .image-chemistry {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 133.33"><polygon points="25,0 70,0 40,47 95,47 20,133 40,73 0,73" fill="%23000000" stroke="%23222222" stroke-width="1" stroke-linejoin="arcs"/></svg>');
}

body.dark #squadron .image-chemistry.active {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 133.33"><polygon points="25,0 70,0 40,47 95,47 20,133 40,73 0,73" fill="%23ADD8E6" stroke="%235A7B91" stroke-width="1" stroke-linejoin="arcs"/></svg>');
}

/* Training */
body.dark .training-icon {
    border: 2px solid #121212;
}

body.dark #training-list div:not(#apply-training):not(#apply-training *) {
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-color: #242424;
}

body.dark #training-list .training-icon {
    border: 2px solid #121212;
}

body.dark #training-list .active {
    border: 2px solid #060606;
    background-color: #303030 !important;
}

/* Results */
#results .result-line:not(:last-child)::after {
    background-color: #ccc;
}

/* Overlays */
body.dark #window-export,
body.dark #window-import,
body.dark #window-chemistry,
body.dark #window-manage,
body.dark #window-clear {
    background: #3a3d45;
    color: #bbb;
    border-color: #121212;
}

body.dark .title-window {
    background: #121212;
    color: #bbb;
}

body.dark .category-title-manage {
    background: rgba(0, 0, 0, 0.3);
}