:root {
    --ft-green: #008f4c;
    --ft-green-dark: #006b39;
    --ft-green-soft: #e8f6ef;
}

body {
    background: #f5f7f9;
}

.ft-sidebar {
    width: 270px;
    background: #10251b;
}

.ft-sidebar .menu-link {
    color: rgba(255, 255, 255, .7);
}

.ft-sidebar .menu-link:hover,
.ft-sidebar .menu-link.active {
    color: #fff;
    background: rgba(255, 255, 255, .08);
}

.ft-brand-mark {
    width: 42px;
    height: 42px;
    border-radius: 8px;
    background: var(--ft-green);
    display: grid;
    place-items: center;
}

.ft-main {
    margin-left: 270px;
    min-height: 100vh;
}

.ft-kpi {
    min-height: 150px;
}

.ft-kpi-icon {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    background: var(--ft-green-soft);
    color: var(--ft-green);
}

.text-ft-green {
    color: var(--ft-green) !important;
}

.bg-ft-green {
    background: var(--ft-green) !important;
}

.ft-status-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    display: inline-block;
}

.ft-timeline-item {
    position: relative;
    padding-left: 30px;
    border-left: 2px solid #e8f6ef;
    margin-left: 8px;
}

.ft-timeline-dot {
    position: absolute;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    left: -8px;
    top: 3px;
    background: var(--ft-green);
    border: 3px solid #fff;
    box-shadow: 0 0 0 2px var(--ft-green-soft);
}

@media (max-width: 991.98px) {
    .ft-sidebar {
        display: none;
    }

    .ft-main {
        margin-left: 0;
    }
}