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


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

:root {
    --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-border: 1px solid #e7e5e5;
    --select2-arrow-top: -1px;
}

html, body,
select, select option {
    font-family: "Fira Sans", sans-serif;
    font-weight: 400;
    font-size: 1rem;
}
body { margin: 1em 0; }

.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; }

.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: 2px solid #f2f2f2; background: #f2f2f2; padding:1px 8px; color: #666; }



.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(--light-grey-layer-bgr);
    border-radius: 8px;
    box-shadow: var(--light-grey-shade);
    border: var(--form-layer-border);
}

.central-form .content .info { padding: 1.5em; font-size: .92em; }
.central-form .content .info p {
    color: #554e;
    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; }