@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inconsolata:wght@200..900&display=swap');

:root {
    --colorHeaderBG: #0f0f0f;
    --colorWidgetBG: #0f0f0f;
    --colorText: #f2f2f2;
    --colorProgress: #ff1f8e;
    --colorAltBG: #f2f2f2;
    --borders: 8px;
}

#module-firewords {
    display: flex;
    flex-direction: column;
    font-size: 14px;
    font-family: "Manrope", sans-serif;
    border-radius: var(--borders);
    box-shadow: rgba(0, 0, 0, 0.35) 1.95px 1.95px 2.6px;
}

.progress-timer {
    display: flex;
    flex-direction: column-reverse;
    width: 5px;
    padding: 5px 0 0 0;
    margin-right: auto;
    margin-left: 4px;
}

.progress-bar-vert {
    height: 100%;
    width: 8px;
    border-radius: var(--borders);
    background: var(--colorProgress);
    transition: height 1s linear;
}

.module-column {
    display: flex;
    flex-direction: column;
}

.rowsample {
    display: flex;
    gap: 10px;
    line-height: 1;
    font-weight: 500;
    font-size: 1.5em;
    text-transform: uppercase;
    background: var(--colorWidgetBG);
    font-family: "Inconsolata", monospace;
    border-left: 4px solid var(--colorProgress);
    border-right: 4px solid var(--colorProgress);
}

.module-header .rowsample:first-of-type {
    border-top: 4px solid var(--colorProgress);
}

.module-column .rowsample:last-of-type {
    border-radius: 0 0 var(--borders) var(--borders);
}

.module-column .rowsample:last-of-type span:nth-child(3) {
    border-bottom-right-radius:var(--borders);
}

.fw-header {
    border-radius: var(--borders) var(--borders) 0 0;
    background: var(--colorHeaderBG);
    font-size: 1.65em;
}

.rowsample span {
    display: flex;
    align-items: center;
    padding: 8px 10px;
    color: var(--colorText);
}

.rowsample span:first-child {
    overflow: hidden;
    text-wrap: nowrap;
    text-overflow: ellipsis;
    font-weight: 700;
}

.rowsample span:nth-child(2) {
    margin-left: auto;
    font-weight: 800;
    color: var(--colorProgress);
}

.rowsample span:nth-child(3) {
    width: 2.5em;
    justify-content: right;
    text-align: right;
    color: var(--colorAltBG);
    font-weight: 900;
}

.rowsample img {
    height: .9em;
    margin: auto .5em auto;
}

.module-column .rowsample:first-child {
    padding-top: 6px;
}

.module-column .rowsample:last-of-type {
    padding-bottom: 6px;
    border-radius: 0 0 var(--borders) var(--borders);
    border-bottom: 4px solid var(--colorProgress);
}

.module-column .rowsample:last-of-type span:nth-child(3) {
    border-bottom-right-radius: var(--borders);
}

.app-name {
    font-weight: 900 !important;
}

.total-count {
    display: flex;
    margin-left: auto;
}

.total-count span {
    margin: auto 0;
}

.svg-element svg {
    fill: var(--colorText);
    height: 1rem;
    margin-left: auto;
    margin-bottom: -1px;
}

.count {
    color: var(--colorText);
}

.hide {
    display: none;
}