@import url(https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap);

:root {
    --civic-blue: #0e1a2e;
    --civic-green: #c5fd2a;

}

body {
    /*background: #0e1a2e;*/
    background: #ddd;
    color: #fff;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    padding: 0;
    margin: 0;
}

strong {
    font-weight:900;
}

.wait, .wait * {
    cursor:wait !important;
}

.inline {
    display:inline-block;
}

.block {
    display:block;
}

.hidden, .bar.hidden {
    display:none;
}

.noselect {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

header{
    display:block;
    padding:2.065rem;
    position:relative;
    background: var(--civic-blue);
    box-shadow:0 0 0.5rem 0.1rem rgba(0,0,0,0.95);
}
header > img {
    margin:0 2.065rem 0 0;
    display:inline-block;
    position:relative;
}

header h1 {
    display:inline-block;
    margin:0;
    vertical-align:top;
    font-weight:600;
    font-family: Raleway, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

header .version {
    position:absolute;
    right:1em;
    bottom:1em;
    font-size:small;
    opacity:0.5;
}

.form-wrapper {
    /* margin:4em; */
    /* position:relative; */
    /* background:rgba(0,0,0,0.8); */
    /* backdrop-filter:blur(10px); */
    /* padding:2rem; */
    /*box-shadow:0 0 0.5rem 0.1rem rgba(0,0,0,0.95);*/
    color:#222;
    padding:3em;
}

.form-wrapper p {
    max-width:70em;
}

form {
    position:relative;
    display:inline-block;
}

form div {
    vertical-align:top;
    margin-bottom:1em;
}

form div:last-child {
    margin-bottom:0;
}

label {
    cursor:pointer;
    margin-bottom:0.5em;
    font-size:normal;
    color: var(--civic-blue);
    font-weight:600;
}

form textarea, textarea.field {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    min-width:100%;
    width:100%;
    max-width:100%;
    height:7.5em;
    margin:1em 0 0 0;
    padding:0.5em;
    font-size:large;
    transition: background-color 0.6s ease;
}

html input.field.collect-passphrase {
    width:30em;
    margin-bottom:0;
}

form .input-counter {
    position: absolute;
    right: 0.5em;
    font-size:small;
}

form #attach {
    margin-top:0.5em;
}

.leftmost {
    margin-left:0;
}


.logo {
    height:1rem;
    vertical-align:middle;    
}

form #file {
    visibility: hidden;
    position: absolute;
    top: -1000px;
}

td[rowspan] {
    vertical-align:top;
}

input.field {
    padding:0.5em;
    font-size:large;
    margin:1em 0;
    min-width:25rem;
    display:block;
}

h2 {
    font-weight:600;
    margin-top:0;
}

div.bar {
    display:block;
    margin:0;
}

div.bar span {
    margin-left:1em;
}

div.bar button {
    margin-right:0;
}

div.bar > div {
    display:inline-block;
}

form div > input[type="submit"]:first-child {
    margin-left:0;
}

button, input[type=submit] {
    background: var(--civic-blue);
    border:solid 3px var(--civic-blue);
    color:var(--civic-green);

    padding:0.5em;
    font-size:large;
    margin:1em;

    font-family: Raleway, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-weight: 600;
    cursor:pointer;
}

button:disabled, input[type=submit]:disabled {
    opacity:0.25;
    cursor:default;
}

button:focus, input[type=submit]:focus {
    border:solid 3px white;
}

img#shape {
    position:absolute;
    z-index:-1000;
    bottom:0;
    left:-400;
    
}

header h1, header h2 {
    color:var(--civic-green);
}

a {
    color:var(--civic-blue);
}

td h2 {
    
    font-weight:400;
    font-style:italic;
}

td h2, .m {
    margin-left:1rem;
}

td h2 span {
    font-style:normal;
}

.showpassword {
    display:block;
    margin:0 1em;
    color:#fff;
}
.showpassword input {
    display:inline;
    margin-right:0.6rem;
}

#suggestionlist {
    font-family:monospace;
    line-height:150%;
    margin-left:0;
    min-width:20rem;
}

#suggestionlist li {
    margin-left:0;
}

div.m {
    margin-top:-0.25rem;
    margin-bottom:1.25rem;
}

.error {
    background-color: #fdd;
}

input, button, textarea {
    transition: background-color 0.6s ease;
}

#success, #error, #siferror {
    display:none;
    position:absolute;
    left:0%;
    top:0%;
    width:100%;
    height:100%;
    /* border:solid 1px #fff; */
    padding:2rem;
    font-size:150%;
    /* box-shadow:0 0 0.5rem 0.1rem rgba(0,0,0,0.95); */
    /* backdrop-filter:blur(10px); */
}

#success {
    background-color:#226622cc;
}

#error, #siferror {
    background-color:#662222cc;
}
#errorp {
    font-size:smaller;
}
#errorspan {
    font-weight:600;
}

a, #error h2, #siferror h2 {
    color:var(--civic-blue);
    font-weight:800;
}

#siferror input {
    zoom:1.5;
    margin:0;
}

label, button, input[type=submit] {
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}
label, button, input[type=submit] {
    -webkit-tap-highlight-color: transparent;
}


#result input.field {
    min-width: 52rem;
}

#result img.qrcode {
    padding: 0.5em;
    vertical-align: top;
    background: white;
    margin: 1em;
    display: inline-block;
    height: 8em;
    width: auto;
}

/* #retrieve_password {
    color: rgba(0, 0, 0, 0);
    transition: color 0.3s ease;
    background: url(../images/noise.png);    
}

#retrieve_password:hover, #retrieve_password:focus {
    color: inherit;
} */


/* The log window */

#cursor {
    display: inline-block;
    width: 1ex;
    height: 1em;
    background: var(--civic-green);
    animation: blink-cursor 1.2s steps(1) infinite;
    vertical-align: text-top;
}

@keyframes blink-cursor {
    0%, 49% {
        background: var(--civic-green);
    }
    50%, 100% {
        background: transparent;
    }
}

#log h3 {
    margin-top: 0;
    font-family: raleway, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

#log {
    margin-top:1.5em;
    border-top: solid 1px rgba(0,0,0,1);
    padding:1em;
    /*background:white;*/
    background:var(--civic-blue);
    color:var(--civic-green);
}
#logwindow {

    font-family:monospace;
    font-size:large;
    font-weight:bold;
}

#logstatus{
    margin-top:0.25em;
}

#logwindow table {
    border-collapse: collapse;
}

#logtable td {
    padding: 0.25em 1em;
    border-right: solid 1px rgba(0,0,0,0.25);
}
#logtable td.logip {
    padding-left: 0;
}

#logtable td.logmsg {
    border-right: none;
}

#result {
    display:none;
}
#result.success, #result.error {
    display:block;
    background:transparent;
}

#download {
    margin: 1em 0em;
}

#download a {
    margin-right:10px;
    padding:10px;
    padding-right:20px;
    border-radius:6px;
    background:white;
    border:solid 1px rgb(169,169,169);
    color:#555;
    display:inline-block;
    text-decoration:none;
}

#download a span {
    font-size: 200%;
    vertical-align: middle;
    padding-bottom: 10px;
    color: #555;
}
#download a:hover span {
    text-decoration:none !important;
}

#download a:hover {
    background:rgba(255,255,255,0.5);
    /*text-decoration:underline;*/
}


/* End of file. */