:root {
    --active-tracker-color: blue;
    --inactive-tracker-color: grey;
    /*--navbar-color: #444647;*/
    /*--blue: #444647;*/
}

html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

html {
    position: relative;
    min-height: 100%;
}

body {
}

.card.card-frame {
    margin-top: 15px;
}

    .card.card-frame .card-header {
        background-color: transparent;
        color: black;
        border-bottom: none;
        position: relative;
        padding-top: 0px;
        padding-bottom: 0px;
        top: -14px;
        width: fit-content;
    }

        .card.card-frame .card-header .card-title {
            background-color: white;
            padding-left: 5px;
            padding-right: 5px;
            font-weight: bold;
        }

    .card.card-frame .card-body {
        padding-top: 0px;
        position: relative;
        top: -14px;
        padding-bottom: 8px;
    }

.track-line {
    height: 5px !important;
    background-color: var(--inactive-tracker-color);
    opacity: 1;
}


.jobtracker {
    position: relative;
}

.dot {
    height: 15px;
    width: 15px;
    margin-top: 0px;
    background-color: var(--inactive-tracker-color);
    border-radius: 50%;
    display: inline-block
}

.dot-label {
    position: relative;
    top: 18px;
    font-weight: bold;
    color: var(--inactive-tracker-color);
    font-size: 13px;
    text-transform: uppercase;
    white-space: nowrap !important;
}


.big-dot {
    height: 25px;
    width: 25px;
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 0px;
    background-color: var(--inactive-tracker-color);
    border-radius: 50%;
    display: inline-block;
}

    .big-dot .icon {
        font-size: 12px;
        position: relative;
        /* right: -25px; */
        color: white;
        left: 24px;
    }

    .big-dot > .dot-label {
        top: 25px;
        right: 13px;
    }

.icon.done {
    display: none;
}

.icon.notdone {
    display: inherit;
}


.set-level0 > :is(.level0) {
    background-color: var(--active-tracker-color);
}

    .set-level0 > :is(.level0) > .dot-label {
        color: var(--active-tracker-color);
    }


.set-level1 > :is(.level0, .level1) {
    background-color: var(--active-tracker-color);
}

    .set-level1 > :is(.level0, .level1) > .dot-label {
        color: var(--active-tracker-color);
    }

.set-level2 > :is(.level0, .level1, .level2) {
    background-color: var(--active-tracker-color);
}

    .set-level2 > :is(.level0, .level1, .level2) > .dot-label {
        color: var(--active-tracker-color);
    }

.set-level3 > :is(.level0, .level1, .level2, .level3) {
    background-color: var(--active-tracker-color);
}

    .set-level3 > :is(.level0, .level1, .level2, .level3) > .dot-label {
        color: var(--active-tracker-color);
    }



.set-level3 > :is(.level3.big-dot) > .icon.notdone {
    display: none;
}

.set-level3 > :is(.level3.big-dot) > .icon.done {
    display: inherit;
}



/*.set-level4 > :is(.level0, .level1, .level2, .level3, .level4) {
    background-color: var(--active-tracker-color);
}

    .set-level4 > :is(.level0, .level1, .level2, .level3, .level4) > .dot-label {
        color: var(--active-tracker-color);
    }
*/

.attTableCellName {
    max-width: 400px;
}

@media(max-width: 770px) {
    .attTableCellName {
        max-width: 300px;
    }
    .big-dot .icon {
        left: 25px;
    }
}

@media(max-width: 590px) {
    .dot-label {
        white-space: normal !important;
        font-size: 10px;
    }

    .attTableCellName {
        max-width: 200px;
    }

    .big-dot .icon {    
        left: 19px;
    }
}

@media(max-width: 380px) {
 
    .attTableCellName {
        max-width: 150px;
    }
}

.collapsing {
    position: relative;
    height: 0;
    overflow: hidden;
    -webkit-transition-property: height, visibility;
    transition-property: height, visibility;
    -webkit-transition-duration: 0.35s;
    transition-duration: 0.35s;
    -webkit-transition-timing-function: linear;
    transition-timing-function: linear;
}

    .collapsing.width {
        -webkit-transition-property: width, visibility;
        transition-property: width, visibility;
        width: 0;
        height: auto;
    }

.wo-title {
    font-weight: bold;
    font-style: italic;
    color: #666666;
}