/**
 * Editable json application
 */
.json-row {background:rgba(0,0,0,0.1);padding:7px 0px 7px 5px;margin-top:-7px;}
.json-row * {vertical-align: top;margin-bottom:5px}
.json-row .json-key   { width: calc(20% - 4px);}
.json-row .json-value { width: 80%; }
.json-row input {margin-top:8px;}
.json-row .json-key > input {border:1px solid rgba(0,0,0,0.5); color:#555}
.json-row .json-value > input {border:1px solid #fff}
.json-row .json-add {float:right;margin-right:5px;}
.json-filename {margin:7px 0; line-height:40px;font-size:25px;background:#444;color:#fff;font-weight:bold;padding:5px 10px;}
.json-filename .readonly {float:right;font-size:0.666em; color:#bfbfbf;}

/*
 * Login form
 */
.login-container { display: flex; width: 100%; height: 100%; align-items: center; background-color: var(--main-color); }
.login-form { width: 85%; max-width: 400px; margin: auto; padding: 40px 40px; background-color: #fff; }
.login-form label { display: none; }
.login-form button { width: 100%; }
.login-container .logo { margin-bottom: 25px; }
.login-container .logo img { display: block; width: 90%; max-width: 300px; margin: auto; }
.login-form button { height: 50px; }
.login-form .field-wrapper { margin: 0; }
.login-container .password-reset { display: block; margin-top: 20px; font-size: .85rem; text-align: center; color: #777; transition: all .15s ease; }
.login-container .password-reset:hover { color: #333; }
/* Login form: password reset */
eckinox-popup#password-reset { width: 400px; max-width: 90%; }
eckinox-popup#password-reset header { display: flex; justify-content: space-between; align-items: center; }
eckinox-popup#password-reset header .close { margin-right: 20px; font-size: 20px; color: var(--grey); cursor: pointer; transition: all .15s ease; }
eckinox-popup#password-reset header .close:hover { color: var(--black); }
eckinox-popup#password-reset .message p { margin: 1em 0; }
eckinox-popup#password-reset .message p:first-child { margin-top: 0; }
eckinox-popup#password-reset .message form { padding-top: 20px; margin-top: 20px; border-top: 1px solid #eeee; }
eckinox-popup#password-reset .message form .field-wrapper { padding: 0; margin-bottom: 15px; }
eckinox-popup#password-reset .message form button { margin-left: auto; }
/* Password reset form */
.password-reset-form h3 { margin-top: 0; }
.password-reset-form .field-wrapper { padding: 0; }
.password-reset-form form > * > div + div { margin-top: 15px; }
.password-reset-form form ul li { padding: 8px 10px; margin-bottom: 15px; font-size: .85rem; font-weight: 600; line-height: 1.35em; color: white; background-color: var(--red); border-radius: 3px; }

/*
 *  Software
*/
.software-update .count {display:inline-block;padding-right:5px;font-weight:bold; text-decoration: underline}
.software-update .current-version {margin:1em auto;}
.software-update .shell-output {white-space: pre-line;font-size: 0.8em;line-height: 1.7em;}
.software-update .status {padding:6px 0; font-weight:600}
.software-update .status.up-to-date {color:#31ac5f}
.software-update .status.not-up-to-date {color:#fec202}
.software-update button[value="update"] {display:inline-block;margin-top:15px;}