@import url(https://fonts.googleapis.com/css?family=Quicksand);
@import url(https://fonts.googleapis.com/css2?family=Dosis&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400&display=swap);

/**
 * Color scheme
 *
 * Light (Grayish blue): #A4B3C8
 * Dark (Rich Black FOGRA 29): #010513
 * Red (Ruby Red): #A31621
 * Green (Ao English): #157F1F
 * Yellow (Maximum Yellow Red): #FFC857
 */

:root {
    --main-colorschema-bg: #010513;
    --main-colorschema-fg: #A4B3C8;
    --main-colorschema-red: #A31621;
    --main-colorschema-green: #157F1F;
    --main-colorschema-yellow: #FFC857;
}

/**
 * General styles
 */

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    border: 0;
    box-sizing: border-box;
    list-style: none;
    font-family: 'Roboto Mono', sans-serif;
}

html, body {
    width: 100%;
    height: 100%;
    background-color: var(--main-colorschema-bg);
    color: var(--main-colorschema-fg);
}

a {
    color: inherit;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

header, footer {
    margin: 2em;
    text-align: center;
}

hr {
    width: 100%;
    margin: 1em 0;
    border-bottom: 1px solid var(--main-colorschema-fg);
}

.corner {
    position: fixed;
    top: 0.5em;
    right: 0.5em;
}

/**
 * Wrapper and content
 */

.wrapper {
    width: 90%;
    max-width: 1000px;
    margin: 0 auto;
}

.container {
    width: 100%;
}

.centered {
    text-align: center;
}

.framed {
    border: 1px solid #748CAB;
}

.button {
    display: inline-block;
    padding: 0 2em;
}

input, textarea, select, button, .button {
    border: 1px solid #748CAB;
    color: #25283D;
    width: 30em;
    padding: 0.2rem;
    font-size: 0.9em;
    background-color: var(--main-colorschema-fg);
    color: var(--main-colorschema-bg);
}

input::placeholder {
    color: #dddddd;
    -webkit-transition: .4s;
    transition: .4s;
}

input:disabled {
    color: #25283D;
    -webkit-transition: .4s;
    transition: .4s;
}

button, .button {
    background-color: var(--main-colorschema-fg);
    color: var(--main-colorschema-bg);
    width: 15em;
}

textarea {
    width: 50em;
    height: 30em;
}

label {
    display: inline-flex;
    width: 25%;
}

#locator {
    width: 25em;
    max-width: 100%;
    font-size: 1.3em;
    text-align: center;
}

/* Logs */
#log_entry {
    display: flex;
    flex-wrap: wrap;
}

#log_entry div {
    width: 16%;
}

#log_entry input {
    text-align: center;
    font-weight: bold;
}

#log_entry div:nth-child(7n), #log .logRow div:nth-child(7n) {
    width: 4%;
    border: 0;
}

#log {
    display: table;
    width: 100%;
}

#log .logRow {
    display: table-row;
}

#log .logRow:nth-child(5n+0) div {
    background-color: #25283D;
}

#log .logRow div {
    display: table-cell;
    width: 16%;
    border: 1px solid #748CAB;
}

.short {
    width: 100%
}

button.short {
    width: 2em
}

/* Tabs */
.tabs-container {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.tabs-header {
    background-color: #748CAB;
    display: flex;
    flex-wrap: wrap;
}

.tabs-header > li {
    color: #010513;
    cursor: pointer;
    flex-grow: 1;
    padding: .375rem;
    font-size: 1.125rem;
    width: 25%;
    text-align: center;
}

.tabs-header > li.active {
    background-color: #25283D;
    color: #F4FAFF;
}

.tabs {
    display: flex;
}

.tab {
    padding: 1rem;
    flex-direction: column;
}

/* Table */

table {
    border: 1px solid #748CAB;
    color: #25283D;
}

tr {
    background: #748CAB;
}

/* Switch */

.switch {
    position: relative;
    display: inline-block;
    width: 46px;
    height: 26px;
}

/* 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: .4s;
    transition: .4s;
    border-radius: 20px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
    border-radius: 50%;
}

input:checked + .slider {
    background-color: #748CAB;
}

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

input:checked + .slider:before {
    -webkit-transform: translateX(20px);
    -ms-transform: translateX(20px);
    transform: translateX(20px);
}

/* My info */
.my_info {
    display: flex;
}

.my_info > div {
    width: 50%;
    font-size: 1em;
}

#my_callsign, #my_locator {
    font-size: 3em;
    font-weight: bolder;
    line-height: 1.4em;
}

#my_callsign_fonetic, #my_locator_fonetic {
    font-size: 0.7em;
    font-weight: bold;
    background-color: var(--main-colorschema-fg);
    color: var(--main-colorschema-bg);
}

/* Dark mode */

body.dark_mode {
    color: #748CAB;
    background-color: #010513;
    -webkit-transition: .4s;
    transition: .4s;
}

.dark_mode .tabs-header {
    background-color: #748CAB;
    -webkit-transition: .4s;
    transition: .4s;
}

.dark_mode input, .dark_mode textarea, .dark_mode select, .dark_mode button, .dark_mode .button {
    border: 1px solid #010513;
    background-color: #748CAB;
    color: #010513;
    -webkit-transition: .4s;
    transition: .4s;
}

.dark_mode input::placeholder {
    color: #5A7496;
    -webkit-transition: .4s;
    transition: .4s;
}

.dark_mode input:disabled {
    color: #dddddd;
    background-color: #010513;
    border: 1px solid #748CAB;
    -webkit-transition: .4s;
    transition: .4s;
}

.dark_mode #my_callsign_fonetic, .dark_mode #my_locator_fonetic {
    color: #010513;
    -webkit-transition: .4s;
    transition: .4s;
}

/* hack for locate-me button */
label {
    position: relative;
}

label > button {
    position: absolute;
    right: 0;
    width: 3em;
}

/* Field completion check */
.missing {
    border-color: #DD6031 !important;
}