
:root {
    /*
    Used this site to choose the colors: https://html-color.codes/green 
    */
    /*Idle*/
    --machine-solid-background-idle: #c0c0c0;
    --machine-solid-foreground-idle: #000000;
    --machine-light-background-idle: #f5f5f5;
    --machine-light-foreground-idle: #000000;
    --machine-solid-icon-idle: #000000;
    --machine-light-icon-idle: #ffffff;
    /*Active*/
    --machine-solid-background-active: #32cd32;
    --machine-solid-foreground-active: #000000;
    --machine-light-background-active: #e9ffdb;
    --machine-light-foreground-active: #000000;
    --machine-solid-icon-active: #000000;
    --machine-light-icon-active: lightyellow;
    --machine-progress-foreground-active: #f5f5f5;
    /*Active Employee*/
    --machine-solid-background-activeemployee: #32cd32;
    --machine-solid-foreground-activeemployee: #000000;
    --machine-light-background-activeemployee: #e9ffdb;
    --machine-light-foreground-activeemployee: #000000;
    --machine-solid-icon-activeemployee: #000000;
    --machine-light-icon-activeemployee: lightyellow;
    --machine-progress-foreground-activeemployee: #f5f5f5;
    /*Active Others*/
    --machine-solid-background-activeothers: #32cd32;
    --machine-solid-foreground-activeothers: #f5f5f5;
    --machine-light-background-activeothers: #e9ffdb;
    --machine-light-foreground-activeothers: #a9a9a9;
    --machine-solid-icon-activeothers: #000000;
    --machine-light-icon-activeothers: lightyellow;
    --machine-progress-foreground-activeothers: #f5f5f5;
    /*In Failure*/
    --machine-solid-background-infailure: #ff6347;
    --machine-solid-foreground-infailure: #f5f5f5;
    --machine-light-background-infailure: #ffa07a;
    --machine-light-foreground-infailure: #000000;
    --machine-solid-icon-infailure: #000000;
    --machine-light-icon-infailure: lightyellow;
    /*In Setup*/
    --machine-solid-background-insetup: #00ced1;
    --machine-solid-foreground-insetup: #f5f5f5;
    --machine-light-background-insetup: #e0ffff;
    --machine-light-foreground-insetup: #000000;
    --machine-solid-icon-insetup: #000000;
    --machine-light-icon-insetup: lightyellow;
    --machine-progress-foreground-insetup: #f5f5f5;
    /*In Setup Employee*/
    --machine-solid-background-insetupemployee: #00ced1;
    --machine-solid-foreground-insetupemployee: #000000;
    --machine-light-background-insetupemployee: #e0ffff;
    --machine-light-foreground-insetupemployee: #000000;
    --machine-solid-icon-insetupemployee: #000000;
    --machine-light-icon-insetupemployee: lightyellow;
    --machine-progress-foreground-insetupemployee: #f5f5f5;
    /*In Setup Others*/
    --machine-solid-background-insetupothers: #00ced1;
    --machine-solid-foreground-insetupothers: #f5f5f5;
    --machine-light-background-insetupothers: #e0ffff;
    --machine-light-foreground-insetupothers: #a9a9a9;
    --machine-solid-icon-insetupothers: #000000;
    --machine-light-icon-insetupothers: lightyellow;
    --machine-progress-foreground-insetupothers: #f5f5f5;
    /*Setup Suspended*/
    --machine-solid-background-setupsuspended: #008b8b;
    --machine-solid-foreground-setupsuspended: #f5f5f5;
    --machine-light-background-setupsuspended: #b2ffff;
    --machine-light-foreground-setupsuspended: #000000;
    --machine-solid-icon-setupsuspended: #000000;
    --machine-light-icon-setupsuspended: lightyellow;
    --machine-progress-foreground-setupsuspended: #f5f5f5;
    /*In Maintenance*/
    --machine-solid-background-inmaintenance: #a67b5b;
    --machine-solid-foreground-inmaintenance: #f5f5f5;
    --machine-light-background-inmaintenance: #e3dac9;
    --machine-light-foreground-inmaintenance: #000000;
    --machine-solid-icon-inmaintenance: #000000;
    --machine-light-icon-inmaintenance: lightyellow;
    /*Ready*/
    --machine-solid-background-ready: #ffd700;
    --machine-solid-foreground-ready: #000000;
    --machine-light-background-ready: #f5f5dc40;
    --machine-light-foreground-ready: #000000;
    --machine-progress-foreground-ready: black;
    --machine-solid-icon-ready: #000000;
    --machine-light-icon-ready: lightyellow;
    /*Employee Activity*/
    --employee-activity-solid-background: #191970;
    --employee-activity-solid-foreground: #e7feff;
    --employee-activity-light-background: #87cefa;
    --employee-activity-light-foreground: #002147;
    --employee-activity-progress-foreground: #002147;
    /*Badge*/
    --machine-badge-icon-size: 2.0rem;
    --machine-badge-size: 3.4rem;
    --machine-badge-label-size: 1.0rem;
    --machine-state-label-size: 0.85rem;
    /*Progress Bar*/
    --progressbar-label-size: 0.85rem;
    --progressbar-label-color: black;
    --progressbar-success-color: #00fa9a;
    --progressbar-warning-color: #ffa07a;
}



.lm-machine-card.lm-machine-card-container {
    margin: 0.5rem;
    border-radius: 1rem;
    border-width: 0.2rem;
    border-style: solid;
    box-shadow: 0.125rem 0.125rem 8px var(--brand-color-25);
}

    .lm-machine-card.lm-machine-card-container.lm-machine-idle {
        background-color: var(--machine-light-background-idle);
        color: var(--machine-light-foreground-idle);
        border-color: var(--machine-solid-background-idle);
    }

    .lm-machine-card.lm-machine-card-container.lm-machine-unknown {
        background-color: var(--machine-light-background-idle);
        color: var(--machine-light-foreground-idle);
        border-color: var(--machine-solid-background-idle);
    }

    .lm-machine-card.lm-machine-card-container.lm-machine-active {
        background-color: var(--machine-light-background-active);
        color: var(--machine-light-foreground-active);
        border-color: var(--machine-solid-background-active);
    }

    .lm-machine-card.lm-machine-card-container.lm-machine-activeemployee {
        background-color: var(--machine-light-background-activeemployee);
        color: var(--machine-light-foreground-activeemployee);
        border-color: var(--machine-solid-background-activeemployee);
    }

    .lm-machine-card.lm-machine-card-container.lm-machine-activeothers {
        background-color: var(--machine-light-background-activeothers);
        color: var(--machine-light-foreground-activeothers);
        border-color: var(--machine-solid-background-activeothers);
    }

    .lm-machine-card.lm-machine-card-container.lm-machine-infailure {
        background-color: var(--machine-light-background-infailure);
        color: var(--machine-light-foreground-infailure);
        border-color: var(--machine-solid-background-infailure);
    }

    .lm-machine-card.lm-machine-card-container.lm-machine-insetup {
        background-color: var(--machine-light-background-insetup);
        color: var(--machine-light-foreground-insetup);
        border-color: var(--machine-solid-background-insetup);
    }

    .lm-machine-card.lm-machine-card-container.lm-machine-insetupemployee {
        background-color: var(--machine-light-background-insetupemployee);
        color: var(--machine-light-foreground-insetupemployee);
        border-color: var(--machine-solid-background-insetupemployee);
    }

    .lm-machine-card.lm-machine-card-container.lm-machine-insetupothers {
        background-color: var(--machine-light-background-insetupothers);
        color: var(--machine-light-foreground-insetupothers);
        border-color: var(--machine-solid-background-insetupothers);
    }

    .lm-machine-card.lm-machine-card-container.lm-machine-setupsuspended {
        background-color: var(--machine-light-background-setupsuspended);
        color: var(--machine-light-foreground-setupsuspended);
        border-color: var(--machine-solid-background-setupsuspended);
    }

    .lm-machine-card.lm-machine-card-container.lm-machine-inmaintenance {
        background-color: var(--machine-light-background-inmaintenance);
        color: var(--machine-light-foreground-inmaintenance);
        border-color: var(--machine-solid-background-inmaintenance);
    }

    .lm-machine-card.lm-machine-card-container.lm-machine-ready {
        background-color: var(--machine-light-background-ready);
        color: var(--machine-light-foreground-ready);
        border-color: var(--machine-solid-background-ready);
    }

    .lm-machine-card.lm-machine-card-container.lm-employee-activity {
        background-color: var(--employee-activity-light-background);
        color: var(--machine-light-background-ready);
        border-color: var(--employee-activity-solid-background);
    }
