/** 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;
    /*
    --background-image: url(https://static.vecteezy.com/system/resources/previews/001/946/670/original/abstract-template-grey-geometric-shine-and-layer-background-with-light-blue-effect-technology-style-free-vector.jpg);

    --background-image: url(https://e0.pxfuel.com/wallpapers/512/865/desktop-wallpaper-grey-background-vectors-stock-psd-light-gray.jpg);

    https://img.freepik.com/free-vector/blue-sky-abstract-light-background_1182-1758.jpg

    https://wallpaperaccess.com/full/2661986.jpg

    https://i.pinimg.com/originals/4d/b7/72/4db7721932b839f545f474363bf5288c.jpg

    https://images.pexels.com/photos/7130555/pexels-photo-7130555.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1

    https://img.freepik.com/free-vector/white-abstract-background-paper-style_23-2148385754.jpg?w=2000

    https://wallpaperaccess.com/full/1216514.jpg


    https://img.freepik.com/free-vector/beige-blurred-background_1034-247.jpg

    https://img.freepik.com/premium-photo/smoke-abstract-background-light-pastel-colors_89245-89.jpg

    https://img.freepik.com/premium-vector/light-blurred-bokeh-background-vector-illustration_64749-4578.jpg?w=2000


    ++ https://c4.wallpaperflare.com/wallpaper/425/710/482/evening-night-picnic-blur-wallpaper-preview.jpg

    ++ #ffc61c
    ++ #88cefa

    https://static.vecteezy.com/system/resources/previews/003/127/954/original/abstract-template-blue-background-white-squares-free-vector.jpg

    https://c4.wallpaperflare.com/wallpaper/280/619/719/light-stains-faded-dull-wallpaper-preview.jpg

    https://static.vecteezy.com/system/resources/previews/003/273/882/original/wave-blue-background-wallpaper-free-vector.jpg

    https://cdn.wallpapersafari.com/70/12/Zgvomn.jpg


    https://img.freepik.com/free-photo/abstract-luxury-gradient-blue-background-smooth-dark-blue-with-black-vignette-studio-banner_1258-101399.jpg?w=2000

    https://wallpapercave.com/wp/wp629432.jpg

    ++ https://e0.pxfuel.com/wallpapers/82/720/desktop-wallpaper-aesthetic-pastel-blue-baby-blue-sky-blue-aesthetic.jpg

    https://images.unsplash.com/photo-1503756234508-e32369269deb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NXx8c2VhfGVufDB8fDB8fHww&w=1000&q=80

    ++ https://i.pinimg.com/750x/22/9d/e6/229de6f66b1b14333c154507c6169c1e.jpg

    +++ https://static.vecteezy.com/system/resources/previews/006/691/305/original/abstract-background-with-soft-gradient-color-and-dynamic-shadow-on-background-background-for-wallpaper-eps-10-free-vector.jpg



.central-form .content .info p { 
    color: #332;
    text-shadow: 0px 1px #fff;
}

.central-form .content .info p {
    color: #223;
    text-shadow: 0px 0px 3px #fff;
  }
  
  

  
    
    */

    --background-image: url(https://static.vecteezy.com/system/resources/previews/006/691/305/original/abstract-background-with-soft-gradient-color-and-dynamic-shadow-on-background-background-for-wallpaper-eps-10-free-vector.jpg);
}


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

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


/* themed OVERIDES */


/* class.css | http://localhost/assets/css/class.css */

.central-form .content-form {
    /* background: var(--light-grey-layer-bgr); */
    background: #dddb;
}