﻿.Emotions_Table_Header img,
.Emotions_Table_Header_Icon {
    width: 30px;
    margin: 5px 8px;
}

.Emotions {
    background-color: var(--background2);
    border-radius: var(--border-radius-small);
    box-shadow: var(--box-shadow);
    display: inline-block;
    margin-right: 10px;
    white-space:nowrap;
}

.Emotions_Table {
    margin-right: 0px;
}

.Emotions .Emotion {
    width: 50px;
    height: 50px;
    display: inline-block;
    float: left;
}
.Emotions_Table .Emotion {
    float: none;
}

.Emotions_Table .Emotion {
    height: 39px;
}

.Emotions .Emotion .Emotion_Value_Blur {
    width: 100%;
    height: 100%;
    background: var(--background-blur);
    opacity: .8;
    transition: var(--transition-size);
    transform: translate(0px, -13px);
}

.Emotions_Table .Emotion .Emotion_Value_Blur {
    margin-top: -26px;
}

.Emotions .Emotion .Emotion_Label {
    width: 50px;
    font-size: var(--font-size-very-small);
    margin-top: -13px;
    text-align: center;
    color: var(--color-fade);
}

.Emotions .Emotion .Emotion_Value {
    font-size: var(--font-size-very-small);
    color: var(--color-fade);
    width: 50px;
    text-align: center;
    transform: translate(0px, 51px);
    z-index: 1;
}

.Emotions_Table .Emotion .Emotion_Value {
    margin-top: 15px;
    color: var(--color2);
    position: relative;
    transform: translate(0px, -4px);
}


.Emotion_0 {
    background: var(--color-emotions-0);
    border-radius: var(--border-radius-small-left);
}
    .Emotion_0 .Emotion_Value_Blur {
        border-radius: 5px 0px 0px 0px;
    }

.Emotion_1 {
    background: var(--color-emotions-1);
}

.Emotion_2 {
    background: var(--color-emotions-2);
}

.Emotion_3 {
    background: var(--color-emotions-3);
}

.Emotion_4 {
    background: var(--color-emotions-4);
    border-radius: var(--border-radius-small-right);
}
    .Emotion_4 .Emotion_Value_Blur {
        border-radius: 0px 5px 0px 0px;
    }


.ERS_Small_Horizontal {
    height: 20px;
    width: 200px;
    background-color: var(--background2);
    border-radius: var(--border-radius-small);
    box-shadow: var(--box-shadow);
    background: linear-gradient( 90deg, rgba(188,51,37,1) 0%, rgba(185,162,19,1) 50%, rgba(30,158,74,1) 100%);
}
    .Table_Logs .Table_Cell .ERS_Small_Horizontal {
        width: 100px;
    }

.ERS_Small_Horizontal .ERS_Label_Negative,
.ERS_Small_Horizontal .ERS_Label_Title,
.ERS_Small_Horizontal .ERS_Label_Positive,
.ERS_Small_Horizontal .ERS_Label_Value {
    /*position: absolute;*/
    color: var(--color-fade);
    font-size: var(--font-size-very-small);
}

.ERS_Small_Horizontal .ERS_Label_Positive {
    margin-left: 180px;
    transform: translate(-100%, -15px);
}

    .ERS_Small_Horizontal .ERS_Label_Negative {
        transform: translate(0px, -26px);
    }

.ERS_Small_Horizontal .ERS_Label_Title {
    margin-left: 100px;
    transform: translate(-50%, -39px);
    text-align:center;
}
.ERS_Small_Horizontal .ERS_Label_Value {
    margin-left: 100px;
    transform: translate(-50%, -17px);
    text-align: center;
}



.Emotions .Emotion[disabled='true'] .Emotion_Label,
.Emotions .Emotion[disabled='true'] .Emotion_Value {
    text-decoration: line-through;
}
.Emotions .Emotion[disabled='true'] .Emotion_Value_Blur {
    height: 100% !important;
    background: #444444;
}

.ERS_Small_Horizontal .Indicator_Ball {
    transform: translate(0px, -52px);
}