.define-card {
    width: 100%;
    height: 144px;
    box-shadow: none !important;
}

.define-card .mud-button-label {
    flex-direction: column;
    font-size: 1rem;
}

.define-card .mud-button-icon-start {
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-inline-start: 0 !important;
    margin-inline-end: 0 !important;
    color: rgb(var(--primary-color));
    margin-bottom: .25rem;
}

.define-card .mud-svg-icon {
    font-size: 1.75rem !important; 
}

/*C104R01，跟 dashboard 有關的*/

.dashborad .default-state {
    border: 1px solid rgba(var(--black-color), var(--opacity-1));
    transition: all 0.3s;
}

    .dashborad .default-state:hover {
        background-color: rgba(var(--black-color), 0.05);
    }

.default-state .light,
.default-state-chip .light {
    background-color: rgba(var(--black-color), 0.05);
    color: rgba(var(--black-color), var(--opacity-3));
    border-radius: 100px;
}

.dashborad .run-state {
    background-color: rgba(var(--success-color), var(--opacity-1));
    transition: all 0.3s;
}

    .dashborad .run-state:hover {
        background-color: rgba(var(--success-color), var(--opacity-2));
    }

.run-state .light,
.run-state-chip .light {
    background-color: rgba(var(--success-color), var(--opacity-1));
    color: rgb(var(--success-color));
    border-radius: 100px;
}

.dashborad .idle-state {
    background-color: rgba(var(--info-color), var(--opacity-1));
    transition: all 0.3s;
}

    .dashborad .idle-state:hover {
        background-color: rgba(var(--info-color), var(--opacity-2));
    }

.idle-state .light,
.idle-state-chip .light {
    background-color: rgba(var(--info-color), var(--opacity-1));
    color: rgb(var(--info-color));
    border-radius: 100px;
}

.dashborad .error-state {
    background-color: rgba(var(--error-color), var(--opacity-1));
    transition: all 0.3s;
}

    .dashborad .error-state:hover {
        background-color: rgba(var(--error-color), var(--opacity-2));
    }

.error-state .light,
.error-state-chip .light {
    background-color: rgba(var(--error-color), var(--opacity-1));
    color: rgb(var(--error-color));
    border-radius: 100px;
    transition: all 0.3s;
}

    .error-state .light:hover,
    .error-state-chip .light {
        background-color: rgba(var(--error-color), var(--opacity-2));
    }

.state-chip .light {
    min-width: 90px;
    padding: 8px 16px !important;
}

.state-chip .mud-badge-root {
    margin: 0 !important;
}

.state-chip .light .mud-typography {
    line-height: 1.75;
    font-size: .9375rem;
}

.machine-card .title {
    width: 36%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.machine-error {
    position: fixed;
    right: 1.5rem;
    bottom: 4rem;
    z-index: 1;
}

@keyframes move01 {
    0% {
        opacity: 0;
        -webkit-transform: translateY(30px);
        -moz-transform: translateY(30px);
        -ms-transform: translateY(30px);
        -o-transform: translateY(30px);
        transform: translateY(30px);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(0px);
        -moz-transform: translateY(0px);
        -ms-transform: translateY(0px);
        -o-transform: translateY(0px);
        transform: translateY(0px);
    }
}

.machine-error .mud-alert {
    box-shadow: 4px 4px 10px rgba(var(--black-color), var(--opacity-2)) !important;
    animation: 1000ms ease normal forwards 1 move01;
    opacity: 0;
}

.machine-card {
    width: calc(100% - 1rem);
    display: block;
    height: calc(100% - 1rem);
    position: absolute;
}

    .machine-card.mud-link.mud-link-underline-hover:hover {
        text-decoration: none !important;
    }

.dashborad-machine .mud-paper {
    background-color: rgb(244, 245, 246) !important;
}

.dashborad-machine .text-feild {
    border-style: dashed;
    padding-bottom: .25rem;
}

    .dashborad-machine .text-feild p {
        font-size: var(--font-size-sm);
        width: initial !important;
    }

    .dashborad-machine .text-feild h6 {
        min-height: 32px;
    }

.back-btn:hover {
    background-color: transparent !important;
    color: rgb(var(--primary-color)) !important;
}

.dashboard-card-icon {
    background-color: rgb(var(--white-color));
    width: 64px !important;
    height: 64px !important;
    padding: 1rem;
    border-radius: 100px;
    box-shadow: 4px 4px 10px rgba(var(--black-color), var(--opacity-1)) !important;
}