<commit_before>@import '../_utils/globals/variables.css';
@import '../_utils/globals/screens.css';

.breadcrumbsGroup {
    width: 100%;
}

.breadcrumbsContainer{
    display: flex;
    flex-direction: row;
}

.breadcrumb{
    position: relative;
    width: 200px;
    text-align: center;
}

.breadcrumb > a{
    display: block;
    font-size: 13px;
    text-decoration: none;
    padding-top:15px;
    padding-bottom: 15px;
    color: #e0e0e0;
    border-bottom: 1px solid #efefef;
}

.activeBreadcrumb a{
    color: var(--moosendBlue);
    border-bottom: 2px solid  var(--moosendBlue);
}

.breadcrumb > a:before{
    position: absolute;
    content: '';
    background: url(../../assets/images/arrows/icon_arrow_phases.png) center no-repeat;
    top: 18px;
    left: 0;
    width:6px;
    height: 9px;
    display: block;
}

.breadcrumb:first-child > a:before{
    background: none;
}

.breadcrumbBody{
    padding: 10px;
}


@media (--deviceSmall){
    .breadcrumbsContainer{
        position: fixed;
        width: 100%;
        top: 0;
        left: 0;
        z-index: 1;
        background: #fff;
    }
}

@media (--deviceXsmall){
    .breadcrumbsContainer{
        display: flex;
        width: 100%;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 1;
        background: #fff;
    }

    .breadcrumb{
        width: 100%;
    }

    .breadcrumb > a{
        font-size: 3vw;
        padding-top: 2vw;
        padding-bottom: 2vw;
    }

}<commit_msg>changed breadcrump styles for small devices.<commit_after>@import '../_utils/globals/variables.css';
@import '../_utils/globals/screens.css';

.breadcrumbsGroup {
    width: 100%;
}

.breadcrumbsContainer{
    display: flex;
    flex-direction: row;
}

.breadcrumb{
    position: relative;
    width: 200px;
    text-align: center;
}

.breadcrumb > a{
    display: block;
    font-size: 13px;
    text-decoration: none;
    padding-top:15px;
    padding-bottom: 15px;
    color: #e0e0e0;
    border-bottom: 1px solid #efefef;
}

.activeBreadcrumb a{
    color: var(--moosendBlue);
    border-bottom: 2px solid  var(--moosendBlue);
}

.breadcrumb > a:before{
    position: absolute;
    content: '';
    background: url(../../assets/images/arrows/icon_arrow_phases.png) center no-repeat;
    top: 18px;
    left: 0;
    width:6px;
    height: 9px;
    display: block;
}

.breadcrumb:first-child > a:before{
    background: none;
}

.breadcrumbBody{
    padding: 10px;
}


@media (--deviceSmall){
    .breadcrumb{
        width: 100%;
    }

    .breadcrumb > a{
        font-size: 3vw;
        padding-top: 2vw;
        padding-bottom: 2vw;
    }

}

@media (--deviceXsmall){

    .breadcrumb{
        width: 100%;
    }

    .breadcrumb > a{
        font-size: 3vw;
        padding-top: 2vw;
        padding-bottom: 2vw;
    }

}
{'fraction_non_alphanumeric': 0.14214641080312723, 'fraction_numerical': 0.02771855010660981, 'mean_word_length': 2.2581018518518516, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 12, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2256658', 'n_tokens_mistral': 1114, 'n_tokens_neox': 1041, 'n_words': 212}