html, body {
    width: auto !important;
    overflow-x: hidden !important
}

a.nav-link .fas {
    color: var(--main);
    !important;
}

a.nav-link .fab {
    color: var(--main);
    !important;
}

.bg-primary {
    background-color: var(--main);
    !important;
}



.btn-primary {
    color: #fff;
    border-color: var(--main);
    ;
    background-color: var(--main);
    ;
    box-shadow: 0 4px 6px rgba(50, 50, 93, .11), 0 1px 3px rgba(0, 0, 0, .08);
}

    .btn-primary:hover {
        color: #fff;
        border-color: var(--main);
        ;
        background-color: var(--main);
        ;
    }

    .btn-primary:focus,
    .btn-primary.focus {
        box-shadow: 0 4px 6px rgba(50, 50, 93, .11), 0 1px 3px rgba(0, 0, 0, .08), 0 0 0 0 rgba(94, 114, 228, .5);
    }

    .btn-primary.disabled,
    .btn-primary:disabled {
        color: #fff;
        border-color: var(--main);
        ;
        background-color: var(--main);
        ;
    }

    .btn-primary:not(:disabled):not(.disabled):active,
    .btn-primary:not(:disabled):not(.disabled).active,
    .show > .btn-primary.dropdown-toggle {
        color: #fff;
        border-color: var(--main);
        ;
        background-color: #324cdd;
    }

        .btn-primary:not(:disabled):not(.disabled):active:focus,
        .btn-primary:not(:disabled):not(.disabled).active:focus,
        .show > .btn-primary.dropdown-toggle:focus {
            /*box-shadow: none, 0 0 0 0 rgba(94, 114, 228, .5);*/
        }

a {
    text-decoration: none;
    color: var(--main);
    ;
    background-color: transparent;
}

    a:hover {
        text-decoration: none;
        color: #233dd2;
    }

    a:not([href]) {
        text-decoration: none;
        color: inherit;
    }

        a:not([href]):hover {
            text-decoration: none;
            color: inherit;
        }

/* Record ids (#1234) on board/kanban cards. These sit on drag-sortable cards whose
   cursor is `grab`, so the id needs an obvious link affordance of its own. The global
   `a` rule above strips underlines app-wide, so the hover underline is re-added here. */
.record-id-link {
    font-weight: 600;
    white-space: nowrap;
}

    .record-id-link:hover {
        text-decoration: underline;
    }


.text-primary {
    color: var(--main);
    !important;
}

a.text-primary:hover,
a.text-primary:focus {
    color: #233dd2 !important;
}

.text-secondary {
    color: #f7fafc !important;
}

a.text-secondary:hover,
a.text-secondary:focus {
    color: #bfd7e7 !important;
}

.bg-gradient-primary {
    background: linear-gradient(87deg, var(--main);
    0, rgba(25, 179, 148, 0.5) 100%) !important;
}

.bg-secondary {
    background-color: white !important;
}

a.bg-secondary:hover,
a.bg-secondary:focus,
button.bg-secondary:hover,
button.bg-secondary:focus {
    background-color: #d2e3ee !important;
}

.bg-default {
    background-color: white !important;
}

a.bg-default:hover,
a.bg-default:focus,
button.bg-default:hover,
button.bg-default:focus {
    background-color: #0b1526 !important;
}

.fill-default {
    fill: white;
}

.nav-pills .nav-link {
    font-size: .875rem;
    font-weight: 500;
    padding: .75rem 1rem;
    transition: all .15s ease;
    color: var(--main);
    ;
    background-color: #fff;
    /*box-shadow: 0 4px 6px rgb(50 50 93 / 11%), 0 1px 3px rgb(0 0 0 / 8%);*/
}

    .nav-pills .nav-link.active, .nav-pills .show > .nav-link {
        color: #fff;
        background-color: var(--main);
        !important;
    }

    .nav-pills .nav-link:hover {
        color: rgba(25, 179, 148, 0.5);
    }

.page-item.active .page-link {
    border-color: var(--main) !important;
    background-color: var(--main) !important
}

.btn-neutral {
    color: var(--main) !important
}

.breadcrumb-links {
}

.breadcrumb-dark {
}

.btn.btn-sm.btn-neutral {
    margin-bottom: 0.5rem;
    margin-left: 0.25rem !important;
    margin-right: 0.25rem !important;
}

#fr-logo {
    display: none !important;
}

.moreOptionClass {
    background-color: var(--main) !important;
    color: white !important;
}

/*a.btn.btn-sm.btn-danger {
    margin-bottom: 8px !important;
}*/


.no-bottom-margin {
    margin-bottom: 0 !important;
}

/* ---------- Top navbar: keep icons white ---------- */
.navbar-dark a.nav-link .fas,
.navbar-dark a.nav-link .fab,
.navbar-dark a.nav-link span {
    color: rgba(255, 255, 255, .85) !important;
}

.navbar-dark a.nav-link:hover .fas,
.navbar-dark a.nav-link:hover .fab,
.navbar-dark a.nav-link:hover span {
    color: #fff !important;
}


.card-edit {
    background-color: #d2f9f1 !important;
}

/* ---------- Sidenav: header density ----------
   Argon's `.navbar-brand-img { max-height: 100% }` (argon.css:21395) is a no-op
   - the percentage resolves against an auto-height inline-block anchor - so the
   logo renders at its natural size and overflows the 100px `.sidenav-header`.
   The generated `img/brand/brand.css` compensated by pushing the whole menu
   down with `margin-top: ...px !important`. Cap the logo instead and let the
   header size to its content. This deliberately overrides the "Sidenav Top
   Margin (px)" field on the Logo settings page, which exists only for that
   workaround. */
#sidenav-main .navbar-brand-img {
    max-height: 2.75rem;
    height: auto;
}

/* Two ids so this outranks `#sidenav-collapse-main { ... !important }` in the
   generated brand.css, which loads earlier but is also !important. */
#sidenav-main #sidenav-collapse-main {
    margin-top: 0 !important;
}

/* Was a fixed 100px box the logo overflowed; now hugs the capped logo. */
.sidenav-header {
    height: auto;
}

.sidenav .navbar-brand {
    padding: 1rem 1.5rem .75rem;
}

/* Argon drops an empty 0.5rem spacer above the first <ul> at >=768px
   (argon.css:21407). Nothing else depends on it. */
.navbar-vertical .navbar-collapse:before {
    display: none;
}