* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /* font-family: 'Arimo', sans-serif; */
    /* letter-spacing: -0.5px; */
    font-family: "Rubik", sans-serif;
}
body {
    width: 100%;
    background-color: #f2f5f7;
}
#landingPage {
    display: flex;
    width: 100%;
    height: 100vh;
}
    #landingPage .info-zone {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-flow: column;
        position: relative;
    }
        #landingPage .info-zone .app-logo-placement {
            width: 1px;
            height: 1px;
        }
        #landingPage .info-zone .app-logo {
            max-width: 100px;
            display: block;
            margin-bottom: 1rem;
            position:absolute;
        }
        #landingPage .info-zone h2 {
            margin-bottom: 1rem;
            color: #3e474c;
            font-size: 2rem;
        }
        #landingPage .info-zone p {
            color:#8f9ca3;
            max-width: 50%;
            font-size: 1.5rem;
            text-align: center;
        }
        #landingPage .info-zone hr {
            border:0;
            width: 50%;
            margin: 1rem 0;
            border-bottom: 1px #dbebf3 solid;
        }
    #landingPage .login-zone {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-flow: column;
    }
        #landingPage .login-zone .form-holder {
            width: 50%;
            max-width: 50%;
            min-height: 200px;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-flow: column;
            box-shadow:0px 2px 4px rgba(0,0,0,.1), 0px 8px 16px rgba(0,0,0,.1);
            background-color: #ffffff;
            border-radius: 1rem;
        }
            #landingPage .login-zone .form-holder p {
                margin-bottom: 1rem;
            }
    #landingPage .login-zone .version {
        font-size: 11px;
        padding: 1rem 0;
    }
        #landingPage .login-zone .version a {
            color: #3e474c;
            text-decoration: none;
            border-bottom: 1px #3e474c dotted;
        }

.app-bar {
    height: 64px;
    background: #ffffff;
    display: flex;
    box-shadow: rgba(0, 0, 0, 0.08) 0 0 50px;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    border-top:1px #ddd solid;
}
    .app-bar .nav-container {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        height: 100%;
        width: 100%;
    }
    
    .app-bar .nav-container .search-bar {
        background-color: #e5e9eb;
        border-radius: 48px;
        width: 200px;
        max-width: 100%;
        height: 40px;
        border:0;
        outline:none !important;
        padding:0 1rem;
    }
    .app-bar .logo {
        height:100%;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0 1rem;
    }
        .app-bar .logo img {
            height: 60%;
            display: block;
        }
    .app-bar .actions {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-shrink: 0;
    }
        .app-bar .actions .action-notifications {
            height: 64px;
            width: 48px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 20px;
            color: #444;
            border-left:1px #ddd solid;
            border-right:1px #ddd solid;
            position: relative;
        }
        .app-bar .actions .action-notifications.new {
            color:#000;
        }
        .app-bar .actions .action-notifications.new i {
            position: absolute;
            left: 10px;
            top: 18px;
        }
        .app-bar .actions .action-notifications .counter {
            display: flex;
            position: absolute;
            bottom: 12px;
            right: 4px;
            background-color: #008f2f;
            color: #fff;
            width: 20px;
            font-size: 11px;
            border-radius: .25rem;
            height: 18px;
            justify-content: center;
            align-items: center;
        }
        .app-bar .actions .action-profile {
            height: 64px;
            width: 64px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
            .app-bar .actions .action-profile img {
                height: 60%;
                width: 60%;
                border-radius: 50%; 
                /* border-radius: .25rem;  */
            }
.page-content {
    max-width: 1200px;
    margin:0 auto;
    min-height:calc(100vh - 64px);
    padding: 0 .5rem;
}
.alert-perm {
    background: #411c1c;
    border: 2px solid #ff4e4e;
    border-radius: .15em;
    margin-bottom: 1em;
    padding: 1em;
    color: #ff4e4e; 
}
    .alert-perm span {
        color: #888;
        letter-spacing: 1px;
    }

.dash-title {
    color: #3e474c;
    padding: 0 1rem;
    font-weight: bold;
    font-size: 1.2rem;
}
.dash-title-sub {
    color: #3e474c;
    padding: .5rem 1rem;
    font-weight: bold;
    border-bottom: 1px #dbebf3 solid;
}
.dash-title-sub-single {
    color: #000;
    padding-bottom: .5rem;
    font-weight: bold;
    border-bottom: 1px #dbebf3 solid;
    margin-bottom: 1rem;
}   
.dash-title-sub-single i {
    vertical-align: middle;
    position: relative;
    top:-2px;
}
.dash-title-sub-single:not(:first-child) {
    margin-top: 1.5rem;
}
.dash-title-settings {
    color: #3e474c;
    padding: 0 0 .5rem 0;
    font-weight: bold;
    border-bottom: 1px #dbebf3 solid;
    margin-bottom: .5rem;
}
.dash-subtitle {
    color:#8f9ca3;
    padding: 0 1rem;
    border-bottom: 1px #d5e3ea solid;
    padding-bottom: .25rem;
}
.dash-controls {
    display: flex;
    flex-flow: wrap;
    padding: .5rem;
}
.dash-controls.mobilemenu {
    flex-flow: column;
    padding: 1rem;
}
.dash-controls.mobilemenu .control {
    width:100%;
    margin: 0;
}
.dash-controls.mobilemenu .control:first-child {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
.dash-controls.mobilemenu .control:not(:first-child) {
    border-radius: 0;
}
.dash-controls.mobilemenu .control:last-child {
    margin-bottom: 0;
    border-bottom-left-radius: .5rem;
    border-bottom-right-radius: .5rem;
}

    .dash-controls .control {
        padding: 1rem;
        margin: .5rem;
        background-color: #fff;
        width: calc(50% - 1rem);
        display: flex;
        justify-content: space-between;
        flex-flow: row-reverse;
        align-items: center;
        border-radius: .5rem;
        box-shadow:0px 2px 4px rgba(0,0,0,.1), 0px 8px 16px rgba(0,0,0,.1);
        text-decoration: none;
        color: #121212;
    }
        .dash-controls .control i {
            margin-right: .5rem;
        }

        
.dash-controls.sidenav {
    flex-flow: column;
    padding: 0 .5rem;
}
.dash-controls.sidenav .control {
    width: 300px;
    margin: 0;
    margin-bottom: .5rem;
    box-shadow: none;
    background-color: transparent;
}
.dash-controls.sidenav .control.active,
.dash-controls.sidenav .control:hover {
    width: 300px;
    max-width: 100%;
    margin: 0;
    margin-bottom: .5rem;
    box-shadow:0px 2px 4px rgba(0,0,0,.1), 0px 8px 16px rgba(0,0,0,.1);
    background-color: #fff;
}
.guest-user {
    background-color: #008f2f;
    color: #ffffff;
    padding: 1rem;
    width: 100%;
    display: flex;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 99999;
}
    .guest-user .gu-title {
        font-size: 1.25rem;
        margin-bottom: .5rem;
        display: flex;
        justify-content: flex-start;
        align-self: center;
    }
        .guest-user .gu-title i {
            margin-right: .5rem;
        }
    .guest-user .gu-info {
        opacity: 0.8;
        margin-bottom: .5rem;
    }
    .guest-user .gu-action {
    }
    .guest-user .gu-signin {
        border-radius: .25rem;
        padding: 1rem;
        border:1px #fff solid;
        display: inline-block;
        text-decoration: none;
        color: #ffffff !important;
    }
    .bc-holder {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .breadcrumb {
        list-style: none;
        padding: 0;
        display: inline-flex;
        flex-wrap: wrap;
        font-size: 14px;
        background-color: #fff;
        padding: .5rem 1rem;
        border-radius: 3rem;
        margin-bottom: 1rem;
      }

      .bc-action {
        display: inline-flex;
        flex-wrap: wrap;
        font-size: 14px;
        background-color: #008f2f;
        color: #fff;
        padding: .5rem 1rem;
        border-radius: 3rem;
        margin-bottom: 1rem;
        text-decoration: none;
        border:1px transparent solid;
        cursor: pointer;
      }
      .bc-action.invert {
        border:1px #008f2f solid;
        background-color: #fff;
        color: #008f2f;
      }
      .bc-disabled {
        background-color: #858585;
        color: #b9b9b9;
      }
      .bc-block {
        display: block;
        width: 100%;
      }
      .bc-action i {
        margin-left: .25rem;
      }
      .bc-action.apply-job {
        margin-bottom: 0;
      }
      
      .breadcrumb li + li::before {
        content: "›";
        padding: 0 8px;
        color: #888;
      }
      
      .breadcrumb a {
        text-decoration: none;
        color: #0066cc;
      }
      
      .breadcrumb a:hover {
        text-decoration: underline;
      }
      
      .breadcrumb span {
        color: #555;
      }

      .category-list {
        padding: .5rem 1rem;
      }
        .category-list li {
            list-style: none;
        }
        .category-list li a {
            display: block;
            width: 100%;
            padding: 1rem 1rem;
            background-color: #fff;
            border-bottom: 1px #dbebf3 solid;
            text-decoration: none;
            color: #121212;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-flow: row-reverse;
        }
        .category-list li a i {
            
        }
        .wiki-links {
            padding-top: .5rem;
            display: flex;
            justify-content: space-between;
        }
        .wiki-links a {
            color: #333;
            text-decoration: none;
            background-color: #eee;
            border: 1px #d5e3ea solid;
            border-bottom: 0px;
            display: inline-block;
            padding: .25rem 1rem;
        }
        .wiki-links a.active {
            background-color: #ffffff;
            color: #121212;
        }
        .wiki-article {
            background-color: #ffffff;
            padding: 1rem;
            border: 1px #d5e3ea solid;
            font-size: 1.125rem;
        }
        .wiki-edit {

        }
        .wiki-edit textarea {
            box-shadow:inset rgba(0,0,0,0.1) 0 0 5px;
            background-color: #ffffff;
            padding: 1rem;
            border: 1px #d5e3ea solid;
            font-size: 1.125rem;
            max-width: 100%;
            width: 100%;
            outline: none !important;
        }
        .settings-table {
            width: 100%;
        }
            .settings-table td {
                padding: .25rem;
                vertical-align: top;
            }
            .settings-table input:not([type="checkbox"]),
            .settings-table select,
            .settings-table textarea {
                width: 100%;
                padding: .65rem;
                margin-bottom: .5rem;
                border: 1px solid #ccc;
                border-radius: 4px;
            }

            .input-control {
                width: 100%;
                padding: .65rem;
                margin-bottom: .5rem;
                border: 1px solid #ccc;
                border-radius: 4px;
            }
            .label-control {
                padding-bottom: .5rem;
                font-size: .9rem;
                display: block;
            }
            
        .settings-page {
            background-color: #ffffff;
            padding: 1rem;
            border: 1px #d5e3ea solid;
            border-top: 0;
            margin-top: 1rem;
        }
        .settings-page.no-padding {
            padding: 0;
        }
        .settings-page.owner-actions {
            margin-top: 0;
        }
        .bc-content {
            padding:1rem;
        }
        button {
            display: inline-flex;
            flex-wrap: wrap;
            font-size: 14px;
            background-color: #008f2f;
            color: #fff;
            padding: .5rem 1rem;
            border-radius: 3rem;
            text-decoration: none;
            border: 0;
            letter-spacing: 0;
        }
        label.multiselect {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            width: 100%;
            padding: .65rem;
            margin-bottom: .5rem;
            border: 1px solid #ccc;
            border-radius: 4px;
        }
            label.multiselect input {
                margin-left: .5rem;
            }
.notification-item {
    border-radius: .25rem;
    border:1px #ddd solid;
    display: flex;
    margin: .5rem 0;
    color: #222 !important;
    text-decoration: none;
    background-color: #fff;
    box-shadow:0px 2px 4px rgba(0,0,0,.05), 0px 8px 16px rgba(0,0,0,.05);
}
.notification-item.jobs {
    margin:0;
    margin-bottom: 1rem;
    text-decoration: none !important;
}
.notification-item.jobs.viewed {
    background-color: #f6f6f6;
    border-color: #e6e6e6;
}
    .notification-item.jobs.viewed .icon-type {
        border-color: #e6e6e6;
    }
.notification-item.jobs.no-margin:not(:last-child) {
    margin:0;
    margin-bottom: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom: 0;
}
.notification-item.jobs.no-margin:not(:first-child) {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}
.notification-item.jobs.no-margin:last-child {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}
.notification-item .icon-type {
    border-left: 1px #ddd solid;
    padding: .5rem;
}
.notification-item .no-content {
    padding: .5rem;
    width: 100%;
}

.notification-item .no-company {
    color:#008f2f;
    margin-bottom: .5rem;
}
.settings-page .no-time,
.notification-item .no-time {
    color:#666;
    font-size:13px;
    margin-bottom: .5rem;
}
.settings-page .no-time i,
.notification-item .no-time i {
    position: relative;
    vertical-align: middle;
    top:-1px;
}
.notification-item .no-title {
    color:#008f2f;
    font-size:18px;
    margin-bottom: .5rem;
}
.notification-item .no-info {
    margin-bottom: .5rem;
}
.notification {
    padding:1rem;
    border-bottom: 1px #ddd solid;
}
.notification.unseen {
    background-color: #fffced;
}
.no-tags {
    display: flex;
    flex-flow: wrap;
}
.no-tags .tag {
    margin-left: .25rem;
    margin-bottom: .5rem;
    border:1px #ddd solid;
    padding:.25rem .5rem;
    border-radius: 4rem;
}

.markdown-content p {
    margin-bottom: .5rem;
}
.markdown-content ol,
.markdown-content ul {
    margin-bottom: .5rem;
    margin-right: 1rem;
}
.markdown-content h1,
.markdown-content h2,
.markdown-content h3,
.markdown-content h4,
.markdown-content h5 {
    margin-bottom: .5rem;
}

.bc-actions {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px #d5e3ea solid;
}
.bc-actions .actions-left,
.bc-actions .actions-right {
    display: flex;
    justify-content: center;
    align-items: center;
}
.bc-actions .bc-item {
    padding:1rem;
    transition: transform 0.05s ease-in-out !important;
    text-decoration: none !important;
}
.bc-actions .bc-item i {
    position: relative;
    vertical-align: middle;
    top:-2px;
}
.bc-actions .bc-item:active {
    transform: rotate(4deg) scale(0.8,0.8);
}
.not-timeago {
    font-size:13px;
    color: #999;
}
.page-footer {
    height: 132px;
    background-color: #bfcbd4;
    margin-top: .5rem;
}
.modal {
    background-color: rgba(0,0,0,0.2);
    position: fixed;
    top:0;
    right:0;
    width:100%;
    height:100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
.modal.hidden {
    display: none;
}
.modal .modal-content {
    padding: 1rem;
    margin: 1rem;
    width: 680px;
    max-width: 100%;
    min-height: 200px;
    box-shadow:0px 2px 4px rgba(0,0,0,.1), 0px 8px 16px rgba(0,0,0,.1);
    background-color: #ffffff;
    border-radius: .5rem;
    max-height: 90%;
    overflow-y: scroll;
}
.form-error {
    color: red;
    padding: 1rem;
    border: 1px red solid;
    border-radius: .25rem;
}
.form-notice {
    color: #006b23;
    padding: 1rem;
    border: 1px #006b23 solid;
    border-radius: .25rem;
}


.special-notice {
    background-color: #008f2f;
    color: #ffffff;
    padding: 1rem;
    letter-spacing: normal !important;
    border-radius: .5rem;
}
.special-notice h2 {
    margin-bottom: .5rem;
    letter-spacing: normal !important;
}
.special-notice p {
    margin-bottom: .5rem;
    letter-spacing: normal !important;
    opacity: .8;
}
.special-notice p.special {
    border-radius: .5rem;
    padding:1rem;
    border:1px #fff solid;
}
.info-notice {
    color: darkgoldenrod;
    background: #ffffdd;
    padding: .5rem;
    border: 1px darkgoldenrod solid;
    border-radius: 4px;
}
span.new-item {
    position: relative;
    top:-1px;
    margin-left: .5rem;
    box-shadow: #008f2f 0 0 15px 2px;
    width: 8px;
    height: 8px;
    background-color: #008f2f;
    vertical-align: middle;
    border-radius: 50%;
    display: inline-block;
}
.app-desktop {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
}
.desktop-holder {
    width: 720px;
    max-width: 100%;
    order: 2;
    flex-shrink: 0;
}
.desktop-nav {
    order:1;
    width: 100%;
    min-height: calc(100vh - 64px);
    /* border-left: 1px #ddd solid; */
    margin-left: 4rem;
    flex-shrink: 1;
    position: sticky;
    top: 1rem;
}
.desktop-side {
    order:3;
    width: 100%;
    border-right: 1px #ddd solid;
    margin-right: 4rem;
    flex-shrink: 1;
}
.tag-generic {
    margin-left: .25rem;
    margin-bottom: .5rem;
    border: 1px #ddd solid;
    padding: .25rem .5rem;
    border-radius: 4rem;
    display: inline-block;
}
.tag-generic i {
    vertical-align: middle;
}

.pagination {
    /* border-radius: .25rem;
    border: 1px #ddd solid; */
    display: flex;
    color: #222 !important;
    text-decoration: none;
    justify-content: center;
    align-items: center;
    /* background-color: #fff;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, .05), 0px 8px 16px rgba(0, 0, 0, .05); */
}
    .pagination a {
        width: 30px;
        height: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #000 !important;
        text-decoration: none !important;
        margin: 0 .25rem;
        background-color: #fff;
    }
    .pagination a.active {
        background-color: #008f2f;
        color: #fff !important;
        font-weight: bold;
        border-radius: 50%;
    }
    .pagination a.hidden {
        display: none;
    }

    .menu-mobile {
        width: 50px;
        display: none;
        justify-content: center;
        align-items: center;
        font-size: 1.75rem;
        height: 100%;
    }
    
body {
    position: relative;
    transition: transform 0.2s ease;
  }
  
  #body-wrapper {
    position: relative;
    transition: transform 0.2s ease;
  }
  body.menu-open {
    /* overflow: hidden; */
  }
  body.menu-open #body-wrapper {
    transform: translateX(-250px);
    overflow: hidden;
  }
  
  #mobile-menu {
    position: fixed;
    top: 0;
    transform: translateX(250px);
    width: 250px;
    height: 100vh;
    background-color: #e1eaf0;
    color: #fff;
    transition: transform 0.2s ease;
    display: flex;
    flex-direction: column;
    z-index: 9999;
  }
  
  body.menu-open #mobile-menu {
    transform: translateX(0px);
  }

.profile-card {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: column;
    position: relative;
    border-radius: .5rem;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, .05), 0px 8px 16px rgba(0, 0, 0, .05);
    overflow: hidden;
}
.profile-card .profile-cover {
    min-height: 100px;
    background-color: #f3f3f3;
    width: 100%;
}
.profile-card .profile-meta {
    min-height: 120px;
    width: 100%;
}
.profile-card .profile-avatar {
    position: absolute;
    top: calc(100px - 40px);
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
    right: 1rem;
}
.profile-card .profile-avatar img {
    width: 100%;
}
.profile-card .profile-meta {

}

.profile-card .profile-meta .meta-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
    padding: .5rem;
}
.profile-card .profile-meta .meta-actions .bc-action {
    margin-bottom: 0;
}
.profile-card .profile-meta .meta-info {
    padding: 0 1rem;
    padding-bottom: 1rem;
}
.profile-card .profile-meta .meta-info i {
    position:relative;
    top: -1px;
    vertical-align: middle;
}
.profile-card .profile-meta .meta-info .profile-bio {
    margin: .5rem 0;
}
.profile-card .profile-meta .meta-info .profile-name {
    font-size: 1.25rem;
    font-weight: bold;
}
.metinf-sec {
    color: #888;
    /* display: inline-block; */
    margin-bottom: .25rem;
}
.profile-card .followers {
    padding-top: .5rem;
}
.profile-card .followers b {
    font-size: 1.125rem;
}
.profile-card .followers span {
    color: #888;
    margin-left: 1rem;
}

.new-post-feed {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.new-post-feed .post-feed-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    margin-left: 1rem;
}
.new-post-feed .post-feed-avatar img {
    width: 100%;
}
.new-post-feed .post-feed {
    width: 100%;
    border-radius: 3rem;
    padding:.5rem 1rem;
    background-color: #f0f0f0;
}

.new-post-overlay {
    display: flex;
    flex-flow: column;
    height:100vh;
    width: 100%;
    position:fixed;
    top:0;
    right:0;
    background-color: rgba(0,0,0,0.5);
    justify-content: flex-start;
    align-items: center;
    z-index: 9999;
}
.new-post-overlay .poverlay-inner {
    width: 680px;
    max-width: 100%;
    background-color: #fff;
    height:calc(100vh - 64px);
}   
.new-post-overlay.hidden {
    display: none;
}
.new-post-overlay .overlay-nav {
    height: 64px;
    border-bottom:1px #eee solid;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #fff;
    width: 100%;
}
.new-post-overlay .overlay-nav .overlay-nav-btn i {
    vertical-align: middle;
    position: relative;
    top:-1px;
}
.new-post-overlay .overlay-nav .overlay-nav-btn {
    padding: 0 1rem;
    font-weight: bold;
}
.new-post-overlay .overlay-nav .overlay-nav-btn.overlay-action .bc-action {
    margin-bottom: 0;
}
.new-post-overlay .overlay-content {
    padding: 1rem;
}
.new-post-overlay .overlay-content .overlay-settings {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    margin-bottom: .5rem;
}
.new-post-overlay .overlay-content .overlay-settings .overlay-avatar {
    width:48px;
    height:48px;
    border-radius: 50%;
    overflow: hidden;
    margin-left: .5rem;
}
.new-post-overlay .overlay-content .overlay-settings .overlay-info {
    font-weight: bold;
}
.new-post-overlay .overlay-content .overlay-settings .overlay-avatar img {
    width: 100%;
}
.new-post-overlay textarea {
    border-style: solid;
    border-width: 1px;
    border-color: rgba(212, 211, 216, 1.0);
    border-radius: 8px 8px 8px 8px;
    background-color: rgba(247, 248, 250, 1.0);
    width: 100%;
    display: block;
    margin-bottom: 1rem;
    min-height: 200px;
    font-size: 1rem;
    padding: .5rem;
}

.generic-alert {
    position: fixed;
    bottom: 1rem;
    width: calc(100% - 2rem);
    right:1rem;
    padding: 1rem;
    font-size: 1.25rem;
    color: #fff;
    background-color: rgba(0,0,0,0.5);
    text-align: center;
    opacity: 1;
    transition:opacity .2s ease;
    z-index:99999;
}
.generic-alert.hidden {
    opacity: 0;
    display: none;
}

.filter {
    border: 1px #bbb solid;
    border-radius: 4px;
    padding: .5rem;
    margin-bottom: 1rem;
    background-color: #fff;
    box-shadow: inset #fff 0 1px 0;
}
.filter fieldset {
    border:1px #ddd solid;
    padding: .5rem;
    margin-bottom: .5rem;
    background-color: #fff;
}
.filter fieldset label {
    margin-left: .25rem;
    margin-bottom: .5rem;
    border:1px #ddd solid;
    padding:.25rem .5rem;
    border-radius: 4rem;
    cursor: pointer;
    display: inline-block;
}
.filter fieldset label input {
    vertical-align: middle;
}
.filter.hidden {
    display: none;
}

.post-feed-single {
    background-color: #fff;
    
    border: 1px #d5e3ea solid;
    border-top: 0;
    margin-bottom: .5rem;
}
    .post-feed-single .post-feed-header {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding: .5rem;
    }
        .post-feed-single .post-feed-header .post-feed-avatar {
            width:40px;
            height:40px;
            border-radius: 50%;
            overflow: hidden;
            margin-left: .5rem;
            flex-shrink: 0;
        }
            .post-feed-single .post-feed-header .post-feed-avatar img {
                width: 100%;
            }
        .post-feed-single .post-feed-header .post-feed-meta {
            width: 100%;
        }
            .post-feed-single .post-feed-header .post-feed-meta .post-feed-name {
                font-weight: bold;
            }
            .post-feed-single .post-feed-header .post-feed-meta .post-feed-time {
                font-size: 13px;
                color:#888;
            }
        .post-feed-single .post-feed-header .post-feed-more {
            font-size: 1.25rem;
            font-weight: bold;
            width:26px;
            height: 26px;
            border-radius: 50%;
            cursor: pointer;
        }
    .post-feed-single .post-feed-content {
        border-top:1px #eee solid;
        border-bottom:1px #eee solid;
        padding: 1rem .5rem;
    }
    .post-feed-single .post-feed-content p {
        margin-bottom: 1rem;
    }
    .post-feed-single .post-feed-content p:last-child {
        margin-bottom: 0;
    }
    .post-feed-single .post-feed-interactions {
        padding: .5rem 1rem;
        padding-bottom: 0;
        display: flex;
        font-size: 13px;
        background: linear-gradient(to top, #fff, #f3f3f3);
    }
    .post-feed-single .post-feed-interactions span {
        display: inline-block;
        margin-left: .5rem;
    }
    .post-feed-single .post-feed-interactions i {
        vertical-align: middle;
        position:relative;
        top:-1px;
    }
    .post-feed-single .post-feed-images {
        
    }
        .post-feed-single .post-feed-images .image-single img {
            max-width:100%;
        }
        .post-feed-single .post-feed-images .image-two {
            display: flex;
            width: 100%;
        }
        .post-feed-single .post-feed-images .image-two .image-holder {
            overflow: hidden;
            width: 100%;
        }
        .post-feed-single .post-feed-images .image-two .image-holder img {
            max-width:100%;
        }
    .post-feed-single .post-feed-actions {
        padding: .5rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
        .post-feed-single .post-feed-actions .pfa-single {
            padding: .25rem .5rem;
            text-align: center;
            transition: transform 0.05s ease-in-out !important;
            text-decoration: none !important;
        }
        .post-feed-single .post-feed-actions .pfa-single:active {
            transform: rotate(4deg) scale(0.8,0.8);
        }
        .post-feed-single .post-feed-actions .pfa-single i {
            vertical-align: middle;
            position:relative;
            top:-1px;
            
        }
.ad-old {
    padding: 1rem;
    border:2px red solid;
    color: red;
    border-radius: .25rem;
    margin-bottom: .5rem;
    display: flex;
}
.ad-old i {
    margin-left: .5rem;
    font-size: 22px;
}
.user-name-badge {
    margin-right: .25rem;
}
.user-name-badge i {
    position: relative;
    top: 2px;
    color: #008f2f;
}

.admin-user-info {
    padding:1rem;
    border:1px #ccc solid;
    margin-bottom: 1rem;
    border-radius: .5rem;
}
.g-hidden {
    display: none !important;
}
.system-actions {
    width: 100%;
    overflow-x: initial;
    padding-bottom: 1rem;
    margin-bottom: 0;
}
.system-actions .inner {
    display: flex;
    flex-flow: wrap;
    justify-content: center;
}
.system-actions .inner .sa-single {
    display: block;
    width: calc(25% - 1rem);
    background-color: #fff;
    flex-shrink: 0;
    min-height: 155px;
    margin-left: .5rem;
    margin-right: .5rem;
    border-radius: .5rem;
    overflow: hidden;
    margin-bottom: 1rem;
    box-shadow:0px 2px 4px rgba(0,0,0,.1), 0px 8px 16px rgba(0,0,0,.1);
}
.system-actions .inner .sa-single img {
    max-width: 90%;
    display: block;
    margin: 0 auto;
}
.system-actions .inner .sa-single span {
    display: block;
    text-align: center;
    padding: .5rem 0;
}
.system-actions .inner .sa-single:last-child {
    margin-left: 0;
}
.system-title {
    font-size: 1.125rem;
    font-weight: bold;
    text-align: center;
    margin-bottom: .25rem;
    color: #006200;
}
.system-subtitle {
    font-size: 1rem;
    text-align: center;
    margin-bottom: .5rem;
    display: block;
}
.system-sep {
    margin: 0 auto;
    height: 3px;
    background-color: #008f2f;
    border-radius: 2px;
    width: 30px;
    margin-bottom: 1rem;
}
@media only screen and (max-width: 1024px) {
    .desktop-side,
    .desktop-nav {
        display: none;
    }
    .app-desktop {
        justify-content: center;
    }
    .menu-mobile {
        display: flex;
    }

    .system-actions {
        width: 100%;
        overflow-x: scroll;
        padding-bottom: 1rem;
        margin-bottom: .5rem;
    }
    .system-actions .inner {
        display: flex;
        flex-flow: row;
        justify-content: flex-start;
    }
    .system-actions .inner .sa-single {
        width: 35%;
    }
}

@media only screen and (max-width: 700px) {
    .guest-user {
        flex-flow: column;
    }
    #landingPage {
        flex-flow: column;
        height: calc(100vh - 100px);
    }
    #landingPage .info-zone h2 {
        margin-bottom: 1rem;
        font-size: 1.5rem;
    }
    #landingPage .info-zone p {
        max-width: 80%;
        font-size: 1.2rem;
    }
    #landingPage .login-zone .form-holder p {
        font-size: 1.2rem;
        font-weight: bold;
    }
    #landingPage .info-zone hr {
        width: 90%;
        margin: 1rem 0;
    }
    #landingPage .login-zone {
        justify-content: flex-start;
    }
    #landingPage .login-zone .form-holder {
        width: 90%;
        max-width: 90%;
        min-height: 150px;
    }
    #landingPage .login-zone .form-holder p {
        margin-bottom: 1rem;
    }
    #landingPage .info-zone .app-logo {
        position:static !important;
        top: 0;
    }
}

.loading {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100vh;
    position: fixed;
    top:0;
    right:0;
}
.loading.hidden {
    display: none;
}
.loader {
    width: 50px;
    aspect-ratio: 1;
    --_c:no-repeat radial-gradient(farthest-side,#87bb00 92%,#0000);
    background: 
      var(--_c) top,
      var(--_c) left,
      var(--_c) right,
      var(--_c) bottom;
    background-size: 12px 12px;
    animation: l7 1s infinite;
  }
  @keyframes l7 {to{transform: rotate(.5turn)}}

  a:not(.bc-action):not(.control) {
    color: #008f2f;
    text-decoration: none;
    transition: color 0.2s ease;
}

a:not(.bc-action):not(.control):hover {
    color: #006b23;
    text-decoration: underline;
}

a:not(.bc-action):not(.control):active {
    color: #004d19;
}

a:not(.bc-action):not(.control):visited {
    color: #008f2f;
}