@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);
}

/**
 * Wrapper and content
 */

.wrapper {
    width: 90%;
    max-width: 1200px;
    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: 12%;
}

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

#log_entry div:nth-child(9n), #log .logRow div:nth-child(9n) {
    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: 12%;
    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);
}

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

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

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

@media (max-width: 700px) {
    html {
        height: 100%;
        display: table;
    }

    body {
        min-height: 100%;
        display: table-cell;
        overflow-y:scroll;
    }
    .container label {
        width: 100%;
    }
    .container input, .container select, .container textarea {
        width: 100%;
    }
    button#locate_me {
        float: right;
        margin-top: 2em;
    }
    #my_callsign, #my_locator {
        font-size: 2em;
    }
}

@media (max-width: 320px) {
    input, select {
        max-width: 254px;
    }
}