/**
 * 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;}

/*
 * App data form
 */
.data-list { margin-bottom: 40px; position: relative; }
.data-list .head { position: sticky; top: 0; z-index: 1; }
.data-list select, .data-list input {
    width: 100%;
    height: 30px;
    line-height: 30px;
    border: none;
    background: transparent;
    padding: 0 10px;
    font-size: 1em;
    color: #333;
    font-family: 'Open Sans', sans-serif;
}

.data-list .row.editing select, .data-list .row.editing input {
    border: 1px solid #a9a9a9;
    background: #fff;
}

.data-list select option:first { font-style: italic; }

.data-form .action-nav { text-align: right; }
.data-list .empty { display: none; }
.data-list .rows.active:empty + .empty { display: block; }
.data-form .head .column:not(.checkbox) { padding: 10px 19px; }

/*
 * 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, .login-form  input { width: 100%; }
.login-container .logo { margin-bottom: 25px; }
.login-container .logo img { display: block; width: 90%; max-width: 300px; margin: auto; }
.login-form button, .login-form  input { height: 50px; border: none; background-color: var(--main-color); font-size: 1em; color: #fff; cursor: pointer; text-align: center; transition: background-color .3s ease; border-radius: none; }
.login-form button:hover { background-color: var(--hover-color); }



/*
 *  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;}

/*
 *	Dashboard
 */
.dashboard-content-wrapper { display: flex; }
.dashboard-content-wrapper h1 { text-transform: uppercase; }
.dashboard-content-wrapper .panel-wrapper { width: calc(100% - 20px); }
.dashboard-content-wrapper .panel-wrapper.left {margin-right: 20px; }
.dashboard-content-wrapper .panel-wrapper.right { margin-left:  20px; }
.dashboard-content-wrapper .panel-wrapper .panel{ border-top: 3px solid var(--main-color); padding: 20px 10px; box-shadow: 3px 3px 7px 1px rgba(0,0,0,0.10); }
.dashboard-content-wrapper .panel-wrapper .panel:not(:first-child){ margin-top: 30px; }
.dashboard-content-wrapper .panel-wrapper .recent-listing { padding: 10px; }
.dashboard-content-wrapper .panel-wrapper .recent-listing a.widget-tabs-item.active { background: var(--secondary-color); }
.dashboard-content-wrapper .panel-wrapper .recent-listing .block-wrapper{ background: var(--secondary-color); margin: 0; padding: 10px;}
.dashboard-content-wrapper .panel-wrapper .recent-listing .block-wrapper .list{ width: 100%; background: #fff; display: block; max-height: 300px; overflow: auto;}
.dashboard-content-wrapper .panel-wrapper .recent-listing .block-wrapper .list .row.head { font-size: 0.9em; }
.dashboard-content-wrapper .panel-wrapper .recent-listing .block-wrapper .list .description { width: 100%; padding: 0px 10px 10px 10px; font-size: 0.9em; color: #a7a7a7; font-style: italic; }
.dashboard-content-wrapper .panel-wrapper .recent-listing h3 { margin: 0; font-size: 1em; }

.dashboard-content-wrapper .panel-wrapper nav.widget-tabs-element { display: flex; justify-content: space-between; padding: 0; background: #fff;}
.dashboard-content-wrapper .panel-wrapper nav.widget-tabs-element .widget-tabs-wrapper { display: flex; width: 65%; }
.dashboard-content-wrapper .panel-wrapper nav.widget-tabs-element a.widget-tabs-item.index-0 { width: 31%; text-align: center; }
.dashboard-content-wrapper .panel-wrapper nav.widget-tabs-element a.widget-tabs-item.index-1 { width: 53%; text-align: center; }

.dashboard-content-wrapper .panel-wrapper .panel-message .message-wrapper { position: relative; margin-top: 10px; font-weight: normal; background: var(--secondary-color); padding: 15px; }
.dashboard-content-wrapper .panel-wrapper .panel-message .message-wrapper i { font-size: 1.3rem; margin-right: 5px; color: var(--main-color); }
.dashboard-content-wrapper .panel-wrapper .panel-message .message-wrapper a { position: absolute; right: 10px; top: 10px; }