.logs__container {
    background-color: #24292f;
    height: 100%;
    margin-left: 32px;
    width: 774px;
    border-radius: 12px;
    padding-bottom: 16px;
    min-height: 285px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
    box-shadow: rgb(0 0 0 / 60%) 0 0 10px;
}

.logs__header {
    padding: 16px;
    height: 80px;
    padding-left: 24px;
    border-bottom: 1px solid #32383f;
    margin-bottom: 8px;
    display: flex;
    justify-content: space-between;
}

.logs__header__container {
    flex: auto;
}

.logs__header__github {
    margin-right: 8px;
}

.logs__chart__window {
    width: 455px;
    height: 295px;
    background-color: #fff;
    border-radius: 9px 9px 9px 9px;
    position: absolute;
    left: 435px;
    display: block;
    bottom: -31px;
    z-index: 1;
    box-shadow: rgb(0 0 0 / 20%) 0 0 10px;
    overflow: hidden;
    border: 1px solid rgb(124 157 208);
}

.logs__chart__wrapper {
    position: relative;
    width: 100%;
    height: 262px;
    overflow: hidden;
    border-radius: 8px;
}

.logs__chart__wrapper::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: url(/assets/chart.svg);
    background-size: cover;
}

.logs__chart__title {
    font-size: 13px;
    color: white;
    position: absolute;
    bottom: 269px;
    left: 130px;
    user-select: none;
}

.logs__chart {
    margin-left: 4px;
    width: 100%;
    height: 100%;
    border-radius: 9px 9px 9px 9px;
}

.relative {
    position: relative;
}

.logs__header__title {
    color: white;
    font-weight: 600;
    display: block;
    font-size: 16px;
    height: 24px;
    margin-top: 4px;
}

.logs__header__status {
    font-size: 12px;
    height: 18px;
    display: block;
    color: #8c959f;
}

.logs__listing {
    height: 324px;
}

.logs__step__detail {
    padding-left: 8px;
    padding-right: 4px;
}

.logs__step__summary {
    padding: 8px;
    color: #8c959f;
    height: 36px;
    line-height: 20px;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    cursor: pointer;
    transition: 80ms cubic-bezier(0.33, 1, 0.68, 1);
    transition-property: color, background-color, box-shadow, border-color;
    border-radius: 6px;
}

.logs__step__summary:hover {
    background-color: #32383f;
    box-shadow: 0 -2px 0 2px #24292f;
}

.logs__step__title {
    color: #d0d7de;
    margin-left: -4px;
    margin-right: 4px;
    user-select: none;
    font-size: 14px;
}

.flex-1 {
    flex: 1 !important;
}

.svg-icon {
    fill: currentColor;
}

.flex-shrink-0 {
    flex-shrink: 0 !important;
}

.mr-2 {
    margin-right: 8px !important;
}

.mr-3 {
    margin-right: 16px !important;
}

.ml-1 {
    margin-left: 4px !important;
}

template {
    display: none;
}




/** PURE CSS WINDOW **/
.outer {
    background: linear-gradient(339deg, #6d97d8, #6d97d8);
    opacity: 1;
    margin: 0px auto;
    padding: 4px;
    padding-left: 12px;
    border-radius: 7px 7px 0px 0px;
    border-bottom: 1px solid rgb(240, 240, 240);
}

.dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    background: #f9f9f9;
    border-radius: 50%;
    margin: 0 4px 0 0;
}

.dot.red {
    background: #FF6057;
}

.dot.amber {
    background: #FFBD2E;
}

.dot.green {
    background: #27C93F;
}

.completion-badge {
    font-size: 11px;
    padding: 0px 6px;
    margin-left: -60px;
    transform: translateX(100%);
    border-radius: 6px;
    color: #00fb26;
    border: 1px solid #27C93F;
    position: relative;
    box-shadow: #27C93F80 0 0 10px;
    overflow: hidden;
    display: inline-block;
    background: linear-gradient(145deg, #27C93F40 0%, #27C93F70 100%);
}

.completion-badge::after {
    content: '';
    top: 0;
    width: 100%;
    transform: translateX(100%);
    height: 180px;
    position: absolute;
    z-index: 2;
    background: linear-gradient(90deg, #31f14e00 0%, #40cd5540 20%, #40cd55a0 50%, #40cd5530 80%, #31f14e00 100%);
    animation: shimmer 1.5s infinite 2s;
}

@keyframes shimmer {
    0% {
        transform: translateX(-200%);
    }

    50% {
        transform: translateX(0%);
    }

    100% {
        transform: translateX(0%);
    }
}