/*************************************************/
/* Paradise ~ centerkey.com/paradise             */
/* GPLv3 ~ Copyright (c) individual contributors */
/*************************************************/

/* Administrator Console */

/* Page layout */
body { padding: 10px; margin: 20px 0px 0px 0px; }
body >header, body >main, body >footer { width: 900px; clear: both; margin: 0px auto 20px auto; }
body >header h1 { font-size: 1.4rem; margin: 0px; }
body >header h2 { font-size: 1.1rem; font-weight: normal; }
body >header aside { text-align: right; }
body >footer { display: flex; justify-content: space-between; align-items: center; }
body >footer { font-size: 0.8rem; color: white; background-color: darkgray; padding: 10px; }
body >footer a { color: white; }
body >footer >div:last-child:not(:first-child) { text-align: right; }

/* Style */
.flat button { font-size: 0.9rem; }
#status-msg { font-weight: bold; }

/* Utilities */
i.fa.icon-popup-anchor + div { position: absolute; bottom: 15px; left: 20px; visibility: hidden; opacity: 0; transition: all 0.5s; white-space: nowrap; font-weight: bold; text-align: right; color: firebrick; background-color: white; border: 3px solid steelblue; border-radius: 5px; padding: 15px 25px; }
i.fa.icon-popup-anchor:hover + div,
i.fa.icon-popup-anchor + div:hover { visibility: visible; opacity: 1; }

/* Component: Security */
.component-security.create h3:first-child { display: none; }
.component-security.create h3:first-child { display: none; }
.component-security.invite p.for-create   { display: none; }
.component-security .for-create           { display: none; }
.component-security.create .for-create    { display: block; }
.component-security .invite-code          { display: none; }
.component-security.invite .invite-code   { display: block; }
.component-security >p { color: firebrick; }

/* Component: Image Portfolio */
.portfolio-image { position: relative; background-color: gainsboro; border: 2px solid silver; }
.portfolio-image { padding: 10px; margin: 10px 0px 0px 0px; }
.portfolio-image figure { float: right; text-align: center; margin: 0px; }
.portfolio-image figure img { max-width: 180px; max-height: 170px; border: 2px solid black; transition: all 0.4s; }
.portfolio-image figure img:hover { border-color: darkgray; }
.portfolio-image figure figcaption { font-size: 0.7rem; }
.portfolio-image >label >span { transition: color 0.4s; }
.portfolio-image >label.display-off >span:first-child { color: firebrick; }
.portfolio-image >label >input[type=checkbox] { margin: 12px 0px 0px 3px; }
.portfolio-image >label >[name] { max-width: 200px; }
.portfolio-image >label >[name=badge] { width: 100px; }
.portfolio-image .actions { position: absolute; left: 0px; bottom: 0px; text-align: center; padding: 5px 15px 0px 2px; opacity: 0; transition: all 0.5s; }
.portfolio-image .actions:hover { opacity: 1; }
.portfolio-image .actions i.fa { display: block; font-size: 1.6rem; margin: 4px; opacity: 1; transition: all 0.5s; }
.portfolio-image .actions i.fa:hover { color: black; }
.portfolio-image:first-child .actions i.fa[data-move=up],
.portfolio-image:last-child  .actions i.fa[data-move=down] { opacity: 0.2; pointer-events: none; }

/* Component: File Uploader */
.qq-upload-button { display: inline-block; width: auto; font-size: 1.1rem; font-weight: bold;
   background-color: steelblue; border-radius: 0.4em; padding: 0.6em 1.2em; margin-bottom: 10px;
   transition: background-color 0.4s; }
.qq-upload-button:hover { background-color: royalblue; }
.qq-upload-list li.qq-upload-success { background-color: lightslategray; }
#processing-files { float: right; font-size: 2.0rem; }

/* Component: Gallery Settings */
section.gallery-settings fieldset { text-align: right; }
fieldset >label { display: flex; justify-content: flex-end; align-items: center; }
fieldset >label { width: auto; margin-bottom: 15px; }
fieldset >label:last-child { margin-bottom: 5px; }
fieldset >label >* { margin: 0px; }
fieldset >label >span:first-child { width: auto; padding: 0px 8px 0px 0px; }
fieldset >label >input { width: 70%; }
fieldset >label >input[type=checkbox] { width: auto; margin: 0px 5px 0px 0px; }
fieldset >label i.fa { font-size: 120%; padding-left: 5px; }
fieldset >div >span >label { display: inline-block; margin: 0px 0px 15px 0px; }
fieldset >div >span >label span.small-caps { font-size: 70%; text-transform: uppercase; }
fieldset >div >span >label input[type=checkbox] { margin: 0px 0px 0px 8px; }
fieldset >div >div >label { display: inline-block; }
fieldset >div >div >label:first-child span { width: auto; }
fieldset >div >div >label:first-child input { width: 140px; }
fieldset >div >div >label:last-child input { margin: 0px 0px 0px 10px; }
fieldset >div >div:first-child >label:last-child { visibility: hidden; }

/* Component: Administrator Accounts */
.admin-accounts .send-invite { text-align: right; padding-top: 10px; }
.admin-accounts .send-invite >button+div { display: none; }
.admin-accounts .send-invite label span { width: auto; }
.admin-accounts .send-invite label input { width: 80%; }