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

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


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

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




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

.central-form .container {
    display: flex;
    min-height: 100vh;
    align-items:center;
}
.central-form .content {
    width: 100%;
    margin: auto auto; padding: .5em;
    font-size: .78em;
}

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



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