.ec-form,
.ec-reply-form,
.ec-message,
.ec-reply,
.ec-d-rating {
    --ec-background-color: #f9f9f9;
    --ec-alert-background-color: #ffffd0;
    --ec-disabled-color: #d8d8d8;
    --ec-primary-color: #337ab7;
    --ec-muted-text-color: #8b8b8b;
    --ec-border-color: #d8d8d8;
}
/*
| Forms
*/
.ec-error {
    color: darkred;
}

.ec-antispam {
    display: none;
}
.ec-d-none {
    display: none;
}

.ec-reply-form {
    margin-left: 3rem;
}
.ec-form__row,
.ec-reply-form__row {
    margin-bottom: 1rem;
}
.ec-form__cols,
.ec-reply-form__cols {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    flex-direction:row;
    gap: 0 1rem;
}
.ec-form__col,
.ec-reply-form__col {
    flex: 0 1 calc(50% - 0.5rem);
}
@media (max-width: 480px)  {
    .ec-form__col,
    .ec-reply-form__col {
        flex: 0 1 100%;
    }
}

/*
| List of messages
*/

.ec-message {
    padding: 1rem;
    margin-bottom: 1rem;
    background-color: var(--ec-background-color);
    border-radius: 0.25rem;
}
.ec-message p:last-child {
    margin-bottom: 0;
}
.ec-message__header {
    margin: 0 0 0.5rem 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.ec-message__meta {
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    gap: 0.125rem 1.5rem;
}
.ec-message__author {
    font-weight: bold;
}
.ec-message__date {
    color: var(--ec-muted-text-color);
}
.ec-message__votes {
    margin-left: auto;
}

.ec-message__reply {
    background: #fff;
    padding: 0.5rem;
    margin-left: 1.5rem;
}
.ec-message__reply p:last-child {
    margin-bottom: 0;
}
.ec-message__footer {
    margin-top: 1rem;
}
.ec-message__footer-link {
    color: var(--ec-muted-text-color);
    text-decoration: none;
}
.ec-message__footer-link:hover,
.ec-message__footer-link:focus {
    color: var(--ec-primary-color);
    text-decoration: none;
}

/*
| List of files
*/
.ec-message__files {
    margin-top: 1rem;

    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    align-items: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    gap: 0.5rem;
}

.ec-file {
    min-width: 80px;
    max-width: 160px;
    height: 80px;
    background: #f0f0f0;
    border-radius: 0.25rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0.5rem;
    overflow: hidden;
    text-decoration: none;

    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
.ec-file:hover,
.ec-file:active,
.ec-file:focus {
    text-decoration: none;
    background: #f4f4f4;
}
.ec-file--thumb {
    padding: 0;
}
.ec-file--thumb img {
    max-height: 100%;
    width: auto;
}
.ec-file__name {
    font-size: 0.75rem;
    color: var(--ec-primary-color);
    font-weight: 600;
}
.ec-file__meta {
    margin-top: 0.25rem;
    font-size: 0.625rem;
    color: var(--ec-muted-text-color);
}

/*
| List of replies
*/

.ec-reply {
    padding: 1rem;
    margin-left: 2rem;
    position: relative;
}
.ec-reply::before {
    content: "";
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="24" viewBox="0 0 20 24" fill="none"><path d="M19.5898 15.5899C19.4882 15.5899 19.3828 15.629 19.3046 15.7071L11.8242 22.9336C11.6601 23.0899 11.6562 23.3516 11.8124 23.5157C11.9687 23.6797 12.2304 23.6836 12.3945 23.5274L19.8749 16.3008C20.039 16.1446 20.0429 15.8829 19.8867 15.7188C19.8046 15.629 19.6953 15.5899 19.5898 15.5899Z" fill="%23D9D9D9"/><path d="M12.1094 8.35938C12 8.35938 11.8945 8.40234 11.8125 8.48438C11.6562 8.64844 11.6602 8.91016 11.8242 9.06641L18.5703 15.5859L7.13672 15.5859C3.65625 15.5859 0.824219 4.75391 0.824219 1.27344V0.773438C0.824219 0.546875 0.640625 0.363281 0.414062 0.363281C0.1875 0.363281 0 0.542969 0 0.773438V1.27734C0 5.21094 3.19922 16.4141 7.13672 16.4141H19.5898C19.7578 16.4141 19.9102 16.3125 19.9727 16.1562C20.0352 16 19.9961 15.8242 19.8789 15.707L12.3984 8.48047C12.3125 8.39844 12.2109 8.35938 12.1094 8.35938Z" fill="%23D9D9D9"/></svg>');
    width: 20px;
    height: 24px;
    position: absolute;
    top: 0.75rem;
    left: -1.5rem;
}
.ec-reply + .ec-reply {
    border-top: 1px solid var(--ec-border-color);
}
.ec-reply + .ec-reply::before {
    content: none;
}
.ec-reply + .ec-message {
    margin-top: 2rem;
}
.ec-reply p:last-child {
    margin-bottom: 0;
}
.ec-reply__header {
    margin: 0 0 0.5rem 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.ec-reply__meta {
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    gap: 0.125rem 1.5rem;
}
.ec-reply__author {
    font-weight: bold;
}
.ec-reply__date {
    color: var(--ec-muted-text-color);
}
.ec-reply__footer {
    margin-top: 1rem;
}
.ec-reply__footer-link {
    color: var(--ec-muted-text-color);
    text-decoration: none;
}
.ec-reply__footer-link:hover,
.ec-reply__footer-link:focus {
    color: var(--ec-primary-color);
    text-decoration: none;
}
.ec-alert {
    background: var(--ec-alert-background-color);
    padding: 0.5rem 1rem;
    border-radius: 0.25rem;
    margin-bottom: 0.5rem;
    font-size: 0.875rem
}

/*
| Default stars
*/
.ec-stars,
.ec-rating-stars {
    --ec-star-width: 16px;
    --ec-star-height: 16px;
    --ec-star-gap: 4px;
}
.ec-stars,
.ec-stars span,
.ec-rating-stars span {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAgCAYAAAASYli2AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA0ZJREFUeNqUVs9PE0EUfrtdWuBAoCkkJiRYITGUQmIMt9ps+Q8MMRLPHPCi8S9o+w+YmJjowZMmGiG9ejFxFzBoFCUpFS4SSwIhKgIpKbS023W+Ybfuz1In+Zi3733vzZuZ96YIW/PUaujGLPgRrtzSbd9So0E0cnvLRfz+ejgTjt/n8kHhUYZxMh4cl5+oad4rM306PHaPAMg+HJ+AWtmGjRcsu9jd5jdk6Jw8r4CCrrMzOFu2KddfJvXxO0tOHTGd/SyDN1wBpbVnAs7GtqVL4zNE9QMbsX90htaeJ3WHf/barG47W+HTE9In59ilVItElR/U1uiMEoUu0+enwzQ5p9uylup1yn54PJwem5qlnoFoW/FKux/p27tnPEPXGS4+5LPMoEykpql3YLBlsKNfO5RXchBTDGrygf0URJYhMaXK5tTXtzk63F0nqv30BGzggGv4uMvGVE7dTHGCXj/0DQgbOODCp2XAN68UGXK4l/2p7XsCNnDApc0J74C8ONcHUaTyyNWe83Ix8Gdvj8OqAwdcyF6FLXHl+A5p80I63HfGOuCI9n9r9H6pArtq8OREspMi/QEK92nnragdZfwDfhH4apFwhTYLRBsb3Jaanj4PmMuRvKhUlFiMaHTU6GGf1hPx2tB1ndicXVggKhQoy2SBQcU3ABk62Ixvc3b38vLyvz4OhUJ2oyDwImP9buuGarXalBOJhD3DFjWcibE9ApCpzSE6V67X6xwsq3RXVxcBkE29NbsLAzqzM8f/ZCm6X2GNZ9Td3Y2Zw5DTmt/z7giYMX6MmkBGZjATRpa6A+6sVVXVG42GzlbXa7VaWwAXPvB1LsxaT8sqikInJyesrhptAVz4wNdzy+z2UisrK3R6enphMHDAhY/Xls1LUdlqPGi5XOYX4wXYwAHX0uf2Xj4+Pm4eZyAQIHZGJEmS5w3CZgRX/W7Z6imDjGBw9CQzm1E6sl+GouV85Gg0yoOZKJVKHFYdOOCafh7PV7NY08FgkDvhFgvsabG+h/F4nBc4OMwn7dc5knWVjo4O2mMv9Pb2Nn8PRVHkAZFRPp9XhoaGKBKJeGbW3LKlKLOrq6tULBazxr9v1jOCLMAGDrimn3P8FWAAEtbR4/v4jFEAAAAASUVORK5CYII=');
    background-size: calc(var(--ec-star-width) + var(--ec-star-gap)) calc(var(--ec-star-height) * 2);
}

/*
| Input element
*/
.ec-rating {

}
.ec-rating-stars {
    float:left;
    margin-right: 1.5rem;
}
.ec-rating-stars span {
    display:block;
    float:left;
    width: calc(var(--ec-star-width) + var(--ec-star-gap));
    height: var(--ec-star-height);
    margin: 0;
    background-position: 0 calc(-1 * var(--ec-star-height));
    background-repeat: no-repeat;
    cursor:pointer;
}
.ec-rating-stars span.active {
    background-position: 0 0;
}
.ec-rating-stars span.active2 {
    background-position: 0 0;
}
.ec-rating-stars span.active-disabled {
    background-position: 0 calc(-1 * var(--ec-star-height));
}
.ec-rating-description {
    float:left;
    padding-top: 1px;
    color: var(--ec-muted-text-color);
    line-height: 1;
}

/*
| Stars
*/
.ec-stars {
    margin: 0.5rem 0;

    width: calc(5 * var(--ec-star-width) + 4 * var(--ec-star-gap));
    height: var(--ec-star-height);

    background-position: 0 calc(-1 * var(--ec-star-height));
    background-repeat: repeat-x;
}
.ec-stars span {
    display: block;
    width: var(--ec-star-width);
    height: var(--ec-star-height);
    background-position: 0 0;
    background-repeat: repeat-x;
}

.ec-stars span.rating-0 {width: 0;}
.ec-stars span.rating-1 {width: var(--ec-star-width);}
.ec-stars span.rating-2 {width: calc(2 * var(--ec-star-width) + 1 * var(--ec-star-gap));}
.ec-stars span.rating-3 {width: calc(3 * var(--ec-star-width) + 2 * var(--ec-star-gap));}
.ec-stars span.rating-4 {width: calc(4 * var(--ec-star-width) + 3 * var(--ec-star-gap));}
.ec-stars span.rating-5 {width: calc(5 * var(--ec-star-width) + 4 * var(--ec-star-gap));}

/*
| Votes
*/
.ec-message__votes {
    position: relative;
    padding: 0.25rem 1rem;
    background: #ffffff;
    border-radius: 0.125rem 0.125rem 0 0;
    display: flex;
    flex-wrap: nowrap;
}
.ec-message__votes-item {
    display: block;
}
.ec-message__votes-item + .ec-message__votes-item {
    margin-left: 1rem;
}
.ec-message__votes-button {
    display: block;
    height: 22px;
    line-height: 22px;
    padding-left: 20px;
    cursor: default;

    color: var(--ec-muted-text-color);
    text-decoration: none;
}
.ec-message__votes-button:hover,
.ec-message__votes-button:active,
.ec-message__votes-button:focus {
    text-decoration: none;
}
.ec-message__votes-button:hover,
.ec-message__votes-button:active,
.ec-message__votes-button:focus {
    color: var(--ec-muted-text-color);
}
.ec-message__votes-button.enabled {
    cursor: pointer;
}
.ec-message__votes-button.enabled:hover,
.ec-message__votes-button.enabled:active,
.ec-message__votes-button.enabled:focus {
    color: var(--ec-primary-color);
}
.ec-message__votes-button.active {
    color: var(--ec-primary-color);;
}
.ec-message__votes-button-like {
    background: url('../../img/web/vote.svg#like') 0 center no-repeat;
    filter: grayscale(100%) brightness(5) brightness(80%);
}
.ec-message__votes-button-dislike {
    background: url('../../img/web/vote.svg#dislike') 0 center no-repeat;
    filter: grayscale(100%) brightness(5) brightness(80%);
}
.ec-message__votes-button-like.enabled:hover,
.ec-message__votes-button-dislike.enabled:hover {
    filter: none;
}
.ec-message__votes-button-like.active,
.ec-message__votes-button-dislike.active {
    filter: none;
}
.ec-message__votes-bar {
    display: block;
    position: absolute;
    height: 2px;
    bottom: -2px;
    left: 0;
    right: 0;
    background: var(--ec-disabled-color);
}
.ec-message__votes-bar span {
    display: block;
    width: 0;
    height: 2px;
    background: var(--ec-primary-color);
}

/*
| Detailed Rating
*/
.ec-d-rating {
    width: 100%;
    max-width: 500px;
    background: var(--ec-background-color);
    padding: 1.25rem;
    border-radius: 0.125rem;
    display: flex;
}
.ec-d-rating:after {
    content: "";
    clear: both;
    display: table;
}
.ec-d-rating__col-info {
    width: 130px;
    padding-top: 12px;
}
.ec-d-rating__col-lines {
    width: 250px;
    width: calc(100% - 130px);
}
.ec-d-rating__value {
    font-size: 50px;
    line-height: 1;
}
.ec-d-rating__stars {

}
.ec-d-rating__desc {
    margin-top: 12px;
    color: var(--ec-muted-text-color);
}

.ec-d-rating__lines {

}
.ec-d-rating__line {
    position: relative;
    line-height: 1;
    color: var(--ec-muted-text-color);
    margin: 10px 0;
}
.ec-d-rating__line:after {
    content: "";
    clear: both;
    display: table;
}
.ec-d-rating__line-rate {
    float: left;
    text-align: left;
    padding-left: 5px;
}
.ec-d-rating__line-progress {
    position: absolute;
    left: 30px;
    right: 60px;
    top: 50%;
    margin-top: -2px;
    background-color: var(--ec-disabled-color);
}
.ec-d-rating__line-progress > span {
    display: block;
    height: 4px;
    background-color: var(--ec-primary-color);
}
.ec-d-rating__line-volume {
    float: right;
    width: 60px;
    text-align: right;
}

/*
| common
*/
.ec-clearfix::after {
    content: "";
    clear: both;
    display: table;
}

/*
| Theme "stars2"
*/
.ec-stars--stars2,
.ec-rating-stars--stars2 {
    --ec-star-width: 20px;
    --ec-star-height: 20px;
    --ec-star-gap: 4px;
}

.ec-stars--stars2,
.ec-stars--stars2 span,
.ec-rating-stars--stars2 span {
    background-image: url('../../img/web/stars2.svg');
    background-size: calc(var(--ec-star-width) + var(--ec-star-gap)) calc(var(--ec-star-height) * 2);
}

/*
| Theme "stars3"
*/
.ec-stars--stars3,
.ec-rating-stars--stars3 {
    --ec-star-width: 20px;
    --ec-star-height: 20px;
    --ec-star-gap: 4px;
}
.ec-stars--stars3,
.ec-stars--stars3 span,
.ec-rating-stars--stars3 span {
    background-image: url('../../img/web/stars3.svg');
    background-size: calc(var(--ec-star-width) + var(--ec-star-gap)) calc(var(--ec-star-height) * 2);
}

/*
| Theme "hearts"
*/
.ec-stars--hearts,
.ec-rating-stars--hearts {
    --ec-star-width: 20px;
    --ec-star-height: 20px;
    --ec-star-gap: 4px;
}
.ec-stars--hearts,
.ec-stars--hearts span,
.ec-rating-stars--hearts span {
    background-image: url('../../img/web/hearts.svg');
    background-size: calc(var(--ec-star-width) + var(--ec-star-gap)) calc(var(--ec-star-height) * 2);
}
.ec-rating-stars--hearts span {
    transition: all 0.3s;
}