:root {
    --main-bg-primary: #fff;
    --main-bg-secondary: rgba(43, 51, 62, 0.9);
    --main-bg-tertiary: rgba(13, 64, 110, 0.2);

    --main-shadow-primary: rgba(0,0,0,0.4);

    --main-text-primary: #2b333e;

    --feature-bg-color: #35404f;

    --accent-bg-primary: #70d6ff;
    --accent-bg-secondary: #ff70a6;
    --accent-bg-tertiary: #ff9770;
    --accent-bg-quaternary: #ffd670;
    --accent-bg-quinary: #e9ff70;
}

@media (prefers-color-scheme: dark) {
    :root {
        --main-bg-primary: #2b333e;
        --main-bg-secondary: rgba(255, 255, 255, 0.1);
        --main-bg-tertiary: rgba(0, 0, 0, 0.2);

        --main-text-primary: #fff;

        --main-shadow-primary: rgba(255,255,255,0.2);
    }
}

/* Reset default User Agent styles */
*
{
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-style: inherit;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

header,
nav,
main,
footer
{
    display: block;
}

*:before,
*:after
{
    -webkit-box-sizing: inherit;
    box-sizing: inherit;
}

:focus
{
    outline: 0;
}


/* LAYOUT */
body
{
    background-color: var(--main-bg-primary);
    font-family: 'Roboto', Helvetica, sans-serif;
    color: var(--main-text-primary);
}

header
{
    background-color: var(--main-bg-secondary);
    padding-top: 1em;
    color: #fff;
}

footer
{
    background-color: var(--main-bg-secondary);
    color: #fff;
}

.container
{
    margin: 0 auto 1em auto;
    padding: 1em;
    width: 1200px;
    max-width: 100%;
}

.-clearfix:before,
.-clearfix:after
{
    content: " ";
    display: table;
}

.-clearfix:after
{
    clear: both;
}

.inline {
    display: inline;
}

.text-left {
    text-align: left;
}

.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}

.mfp-content
{
    background-color: #fff;
    max-width: 800px;
    padding: 2em;
}

header h1
{
    background-image: url(../image/server.svg);
    background-repeat: no-repeat;
    background-attachment: 100% auto;
    padding-left: 2em;
}

/* CONTENT */
.accent-bg-primary { background-color: var(--accent-bg-primary) !important; }
.accent-bg-secondary { background-color: var(--accent-bg-secondary) !important; }
.accent-bg-tertiary { background-color: var(--accent-bg-tertiary) !important; }
.accent-bg-quaternary { background-color: var(--accent-bg-quaternary) !important; }
.accent-bg-quinary { background-color: var(--accent-bg-quinary) !important; }

h2,h3,h4,table
{
    margin: 1em 0;
}

p,li
{
    margin-bottom: 1em;
}

a:link,
a:visited
{
    color: #35ab75;
}

a:hover,
a:active,
a:focus
{
    color: #2d9c69;
}

.repo-list-item {
    cursor: pointer;
}

.repo-list-item a {
    color: inherit;
    text-decoration: none;
}

button,
.button
{
    background-color: #35ab75;
    border-radius: 0.5em;
    padding: 0.5em;
    line-height: inheirt;
    font: inherit;
    cursor: pointer;
    color: #fff;
    text-align: center;
}

.button:link,
.button:visited
{
    text-decoration: none;
    color: #fff;
}

button.button-primary,
.button.button-primary
{
    background-color: #35ab75;
}

button.button-secondary,
.button.button-secondary
{
    background-color: #87909c;
}

button.button-danger,
.button.button-danger
{
    background-color: rgb(151, 85, 92);
}

button.button-primary:hover,
button.button-primary:focus,
button.button-primary:active,
.button.button-primary:hover,
.button.button-primary:focus,
.button.button-primary:active
{
    background-color:#2d9c69;
}

button.button-secondary:hover,
button.button-secondary:focus,
button.button-secondary:active,
.button.button-secondary:hover,
.button.button-secondary:focus,
.button.button-secondary:active
{
    background-color: #656b74;
}

button.button-danger:hover,
button.button-danger:focus,
button.button-danger:active,
.button.button-danger:hover,
.button.button-danger:focus,
.button.button-danger:active
{
    background-color: rgb(150, 65, 74);
}

button:disabled,
button.disabled,
.button:disabled,
.button.disabled
{
    background-color: #b8babe !important;
    color: #fff;
    cursor: not-allowed;
}

.button-block {
    display: block;
    width: 100%;
}

.button-small {
    font-size: 0.8em;
    padding: 0.2em 0.5em;
}

input[type="text"],
input[type="password"]
{
    background-color: var(--main-bg-tertiary);
    border-radius: 0.2em;
    margin-bottom: 1em;
    padding: 0.5em;
    width: 100%;
    font-size: 1.1em;
    color: var(--main-text-primary);
}

textarea
{
    background-color: var(--main-bg-tertiary);
    border-radius: 0.2em;
    margin-bottom: 1em;
    padding: 0.5em;
    width: 100%;
    min-height: 125px;
    font: inherit;
    font-size: 1.1em;
    color: var(--main-text-primary);
    resize: vertical;
}

select
{
    background-color: #fff;
    border: 1px solid var(--main-text-primary);
    border-radius: 0.2em;
    padding: 0.3em;
    font-size: 1.1em;
    min-width: 160px;
}

input:active,
input:focus,
input:hover,
select:active,
select:focus,
.button:active,
.button:focus
{
    box-shadow: 0 0 2px 2px var(--main-shadow-primary);
}

input:disabled,
select:disabled
{
    cursor: not-allowed;
}

code {
    background-color: var(--main-bg-tertiary);
    color: var(--main-text-primary);
    padding: 3px 6px;
    border-radius: 3px;
}

code[data-copy-me] {
    cursor: pointer;
    display: inline-block;
    text-align: center;
}

.tag
{
    background-color: var(--accent-bg-primary);
    border-radius: 0.5em;
    padding: 0.5em;
    display: inline-block;
    border-radius: 0.3em;
    text-decoration: none;
    font-size: 0.8em;
    color: rgba(0,0,0,0.6) !important;
}

a.tag:hover {
    text-decoration: underline;
}

.repo-list .row
{
    margin-bottom: 1em;
    padding: 1em;
}

.repo-list .repo-list-item:nth-child(odd)
{
    background-color: var(--main-bg-tertiary);
}

.repo-list .row:hover,
.repo-list .row:active,
.repo-list .row:focus
{
    box-shadow: 0 0 2px 2px var(--main-shadow-primary);
}

.repo-image
{
    display: block;
    width: 3em;
    aspect-ratio: 1 /1;
    border-radius: 50%;
    overflow: hidden;
}

.repo-image img
{
    width: 100%;
}

.repo-icon
{
    display: inline-block;;
    width: 1em;
    aspect-ratio: 1 /1;
    border-radius: 50%;
    text-align: center;
    line-height: 1em;
    font-size: 3rem;
    color:rgba(0, 0, 0, 0.3);
}

.white-popup
{
    position: relative;
    background: #FFF;
    padding: 20px;
    width: auto;
    max-width: 700px;
    margin: 20px auto;
}
.white-popup > h3
{
    margin: 0 0 1em 0;
}
.white-popup > iframe
{
    border: 1px #ccc solid;
}

.info
{
    padding: 1em;
    margin: 1em 0;
    background: #f8f8f8;
}
.info.warning
{
    background: #E04D4D;
    border-left: 4px solid #B72323;
    color: #FFF !important;
}
.info.confirm
{
    color: #FFF !important;
    background: #6DBB5A;
    border-left: 4px solid #439230;
}

.info.warning a:link,
.info.warning a:visited,
.info.confirm a:link,
.info.confirm a:visited {
    color: #fff;
}

.info.warning a:hover,
.info.warning a:active,
.info.confirm a:hover,
.info.confirm a:active {
    color: #000;
}

hr
{
    margin: 2em 0;
    border-bottom: 1px solid var(--feature-bg-color);
}

.js-search-list
{
    background-image: url(../image/search.svg);
    background-size: auto 80%;
    background-repeat: no-repeat;
    background-position: 99% center;
}

.text-vertical-center
{
    display: flex;
    align-items: center;
}


.no-margin {
    margin: 0 !important;
}

.section {
    margin-top: 20px;
    margin-bottom: 20px;
}

.separator {
    margin-bottom: 1em;
    border-bottom: 1px solid;
    border-color: var(--feature-bg-color);
}

.separator.first-of-class {
    padding-top: 1em;
    border-top: 1px solid;
    border-color: var(--feature-bg-color);
}


.table {
    width: 100%;
    border-collapse: collapse;

    & td,
    & th {
        padding: 1em;
    }

    & thead tr {
        background-color: var(--main-bg-secondary);
    }

    &.table-striped {
        tbody tr:nth-child(odd) {
            background-color: var(--main-bg-tertiary);
        }
    }
}

.flex {
    display: flex;

    &.flex-wrap {
        flex-wrap: wrap;
    }

    &.justify-center {
        justify-content: center;
    }

    &.justify-around {
        justify-content: space-around;
    }

    &.justify-between {
        justify-content: space-between;
    }

    &.align-center {
        align-items: center;
    }

    &.flex-center {
        align-items: center;
        justify-content: center;
    }

    & .flex-grow {
        flex: 1 1 auto;
    }
}

/* Probably a bad idea. */
.grid {
    display: grid;
    container: grid / inline-size;
    grid-template-columns: repeat(12, 1fr);
    gap: 1em;

    & > .col\:1\/4 {
        grid-column: span 3;
    }
    & > .col\:1\/3 {
        grid-column: span 4;
    }
    & > .col\:1\/2 {
        grid-column: span 6;
    }
    & > .col\:2\/3 {
        grid-column: span 8;
    }
    & > .col\:3\/4 {
        grid-column: span 10;
    }
    & > .col {
        grid-column: span 12;
    }
}

@container grid (width < 768px) {
    .grid > .col\:1\/4 {
        grid-column: span 6;
    }
    .grid > .col\:1\/3 {
        grid-column: span 6;
    }
    .grid > .col\:1\/2 {
        grid-column: span 12;
    }
    .grid > .col\:2\/3 {
        grid-column: span 12;
    }
    .grid > .col\:3\/4 {
        grid-column: span 12;
    }
}


.form-fields {
    display: grid;
    container: form-fields / inline-size;
    grid-template-columns: 1fr 1fr;
    gap: 1.5em 1em;
}

@container form-fields (width < 520px) {
    .form-fields > * {
        grid-column: span 2;
    }
}

.field-element {
    display: block;

    & .field-label {
        margin-bottom: 0.5em;
    }

    &.width-100 {
        grid-column: 1 / -1;
    }

    &.align-end {
        grid-column: -2;
        justify-self: stretch;
    }

    & textarea {
        margin: 0;
    }

    & input:not([type="checkbox"]),
    & select,
    & textarea {
        width: 100%;
        margin: 0;
    }

    &.checkbox {
        display: grid;
        grid-template-columns: min-content 1fr;
        gap: 10px;

        & .field-label {
            grid-column: 2;
            grid-row: 1;
            margin: 0;
        }

        & input {
            grid-column: 1;
            grid-row: 1;
            align-self: center;
        }
    }

    & .checkbox-list {
        border-radius: 3px;
        background-color: var(--main-bg-tertiary);
        padding: 0.5em;
    }
}


.checkbox-list {
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-flow: row;
    align-content: start;
    gap: 1em;
    margin: 0 0 1em;

    & input {
        margin-right: 10px;
    }
}

.notes {
    white-space: pre-wrap;
    border-radius: 3px;
    background-color: var(--main-bg-tertiary);
    padding: 1em;
    margin: 1em 0
}