/** Office sections
 * (main layout css-classes)
 * -----------------------------------------------------------------------------
 *  .office {
 *      .top-bar {
 *          .breadcrumb
 *          .admin
 *      }
 *      .side-bar {
 *          .search
 *          .categories
 *      }
 *      .content
 *  }
 * -----------------------------------------------------------------------------
 */


/* Variables
 * ----------------------------------------------------------------------------
 */

:root {
    --bs-heading-color: #458; /* header color */
    --class-blue: #337ab7;
    --class-blue-opaque: #337ab799;
    --class-blue-dark: #082e44;
    --class-orange: #f47920;
    --class-orange-opaque: #f4792099;
    --class-grey-background: #eeedeb;
    --class-red: #d13;
    --light-grey-bgr: #f5f6f7;
    --light-grey-layer-bgr: #eeeded;
    --light-grey-shade: 1px 5px 7px #7773;
    --form-content-font-size: .87rem;
    --form-input-height: 31px;
    --form-layer-bgr: #dddb; /* form layer background */
    --select2-arrow-top: 8px;
    --background-image: #fafafa; /* main background */
    --menu-hover-bgr: #def /* <-- spring-04 ; default: #def */;
    --info-text-color: #554e;

        /* image credits */
    --img-credit-bgr: #fff5;
    --img-credit-bgr-hover: #fffa;
    --img-credit-color: #333e;
    --img-credit-hover-color: #f77;

    
}


html, body,
select, select option {
    font-family: "Fira Sans", sans-serif;
    font-weight: 400;
    font-size: 1rem;
}
body {
    padding: 0;
    background: var(--background-image);
    background-size: cover;
    background-position: center;
}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 { font-weight: 400; };

html, body {
    padding:0; margin:0;
    font-size:1.25em;
    color: #037; background: var(--light-grey-bgr);
    line-height:1.2em; 
}

.office h3 {
    font-size: 2em; font-style: normal;
    color: #05a;
    margin: 0; padding: 5px;
    opacity: 0.27;
    border-bottom: 1px solid #05a;
}


.btn-back2panel,
.btn-preview { border: 1px solid #aaa7; background: #ddd; }

.btn-back2panel { float: right; margin-top: calc(-1 * var(--bs-btn-padding-y)); }

.btn-back2panel:hover,
.btn-preview:hover { border: 1px solid #7777; background: #f5f5f5; }

.info .list-group-item a { display: block; text-decoration: none; font-size: 14px; color: #444; padding: 8px 16px; }
.info li.list-group-item { margin:0; padding: 0; }
.info li.list-group-item:hover { background: #f2f2f2; }
.info li.list-group-item.separator {
    border: none; padding:2px 8px 1px;
    background: #f2f2f299; color: #345;
}



.info p { font-size: 14px; line-height: 200%; margin-bottom: .33em; }
.info h4 { font-size: 16px; font-weight: 400; }

/** micro-positioning classes
 * -----------------------------------------------------------------------------
 */

.max320px { max-width: 320px; width: 100%; }
.max420px { max-width: 420px; width: 100%; }
.max480px { max-width: 480px; width: 100%; }
.max540px { max-width: 540px; width: 100%; }
.max720px { max-width: 720px; width: 100%; }
.bottom3em { padding-bottom: 3em; }

.container { max-width: 1400px; }


/** central form
 * -----------------------------------------------------------------------------
 * includes login / invitation / reset password forms
 */

.central-form .container {
    display: flex;
    min-height: 100vh;
    align-items:center;
}
.central-form.left-menu .container { align-items: start; }

.central-form .content {
    width: 100%;
    margin: auto auto; padding: .5em;
    font-size: .78em;
}
.central-form.left-menu .content { margin: 1em auto; }

.central-form .content-form {
    padding: 1.5em;
    background: var(--form-layer-bgr);
    border-radius: 8px;
    box-shadow: var(--light-grey-shade);
    border: 1px solid var(--form-layer-bgr);
}

.central-form .content .info { padding: 1.5em; font-size: .92em; }
.central-form .content .info p {
    color: var(--info-text-color);
    font-size: .9rem;
    line-height: 150%;
}

.central-form form label { font-size: 14px; }

.central-form h4 { font-size: 1.24rem; }


.central-form .x3-lines textarea { height: 74; }
.central-form .x5-lines textarea { height: 124px; }
.central-form .x7-lines textarea { height: 156px; }


/* main layout classes
 * ----------------------------------------------------------------------------
 */

.office .top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    border-bottom: 1px solid #ddd;
    box-shadow: 1px 1px 7px #9997;
    background: var(--light-grey-bgr);
}

.office .top-bar .fa,  
.office .top-bar .fas {
    width: 32px;
    text-align: center;
}


.office .main-content {
    padding: 1.5em;
    max-width: 1440px;
    min-height: calc(100vh - 345px);
}

.office .page-container { max-width: 1024px; }

.image-credits { position: fixed;
    bottom: 8px; right: 8px;
    border-radius: 4px;
    background: var(--img-credit-bgr);
    transition: ease background .15s;
}
.image-credits:hover { background: var(--img-credit-bgr-hover); transition: ease background .15s; }
.image-credits a { font-size: 12px; padding: 2px 14px;
    color: var(--img-credit-color);
}
.image-credits a:hover { color: var(--img-credit-hover-color); }

.manage .table tbody tr:hover { background: #eeea; }