.econ-index-column-header,
.ebv-column-header {
    color: #7f7f7f;
    font-size: 16px;
}

.econ-index-label,
.econ-index-name,
.econ-index-name .btn.expander {
    font-weight: 700;
    font-size: 14px;
}
.ebv-name {
    font-weight: 700;
    font-size: 14px;
}
.econ-index-name.sub-index-name {
    color: #7f7f7f;
    transition: color 0.3s ease;
}

.econ-index-name.sub-index-name:hover {
    color: rgb(189, 24, 67);
    cursor: pointer;
}

.econ-index-label,
.ebv-label {
    font-weight: bold;
    font-size: 14px;
}

.animal-ebv-container .el-slider__button-wrapper {
    display:none;
}

.animal-ebv-container .el-slider {
    margin-top: -15px;
}

.el-slider .el-slider__bar {
    z-index: 1;
}

.el-slider.ebv-btm .el-slider__bar {
    background-color: darkorange;
}

.el-slider.ebv-avg .el-slider__bar {
    background-color: darkorange;
}

.el-slider.ebv-top .el-slider__bar {
    background-color: #67c23a;
}

.animal-ebv-container .tile {
    margin-bottom: 15px;
    margin-top: 5px;
}

.expander,
.expander.btn-link {
    position: relative;
    padding: 0;
    z-index: 1;
    min-width: 20px;
    text-align: right;
    text-decoration: none;
    color: #212529;
    font-weight: 700;
}
.expander.position-absolute {
    position: absolute;
    top: 0;
    right: 0;
    padding-right: 15px;
    width: 100%;
    height: 100%;
    line-height: 20px;
}
.expander.btn-link .material-icons {
    color: #b50638;
}
.expander.btn-link:hover .material-icons,
.expander.btn-link:focus .material-icons {
    color: #8b134c;
}

.expander.collapsed .material-icons {
    transform: rotate(-180deg);
}

.tile.collapse-holder .row {
    padding-right: 40px;
    box-sizing: border-box;
    position: relative;
}

.tile.collapse-holder .row.analysis-date {
    padding-top: 20px;
}

.tile.collapse-holder .rows-holder .row:not(.analysis-date):after {
    content: '';
    border-bottom: 1px solid #f2f2f2;
    width: 100%;
    position: absolute;
    bottom: 0px;
    width: auto;
    right: 15px;
    left: 15px;
}

#indexcollapse > hr:first-child,
#traitcollapse > hr:first-child {
    margin-bottom: 0;
}

.econ-index-rows-holder .row {
    align-items: center;
}

.econ-index-rows-holder .collapse .row {
    background-color: #FAFAFA;
}

.trait-rows-holder .row {
    align-items: center;
}
.trait-rows-holder .row.related {
    background-color: #FAFAFA;
}
#trait-collapse-inner .row.related {
    display: none;
}

.row.related .ebv-name,
.row.related .econ-index-name {
    color: #b50638;
}

.divider-button-row {
    padding: 10px 0;
    margin-left: -1rem;
    margin-right: -1rem;
}

.divider-button-row hr {
    border-color: #7F7F7F;
}

#trait-inner-expander {
    top: 50%;
    left: 45%;
    right: auto;
    transform: translate(-50%,-50%);
    width: auto;
    background: #ffffff;
    padding: 0 5px;
    font-weight: 500;
    color: #7F7F7F;
    font-size: 1rem;
}

@media(max-width:789px) {
    .animal-ebv-container .tile {
        margin-bottom: 0;
        margin-top: 0;
        border-radius: 0;
    }

    .animal-ebv-container {
        width: 100%;
        padding: 0;
    }

    .trait-rows-holder .row,
    .econ-index-rows-holder .row,
    .tile.collapse-holder .row {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    
    #trait-inner-expander,
    .econ-index-column-header,
    .ebv-column-header {
        font-size: 14px;
    }

    #trait-inner-expander {
        left: 50%;
    }

    .econ-index-label,
    .econ-index-name,
    .econ-index-name .btn.expander {
        font-weight: 700;
        font-size: 12px;
    }

    .ebv-name {
        font-weight: 700;
        font-size: 12px;
    }

    .econ-index-label,
    .ebv-label {
        font-weight: bold;
        font-size: 12px;
    }

    .econ-index-label.ebv-btm,
    .ebv-label.ebv-btm {
        color: darkorange;
    }

    .econ-index-label.ebv-avg,
    .ebv-label.ebv-avg {
        color: darkorange;
    }

    .econ-index-label.ebv-top,
    .ebv-label.ebv-top {
        color: #67c23a;
    }
    
    .el-slider {
        display:none;
    }
}

@media(max-width:375px) {

    .econ-index-name .btn-link {
        font-size: 12px;
    }
    
    .terminal-sire-label {
        font-size: 12px;
    }

    .econ-index-label, 
    .econ-index-name, 
    .econ-index-name .btn.expander,
    .ebv-name {
        font-size: 10px;
    }

    .ebv-label {
        font-weight: bold;
        font-size: 10px;
    }
}