body {
    background-color: lightgray;
}

.root {
    background-color: white;
    max-width: 1024px;
    margin: auto;
    padding: 16px;
    height: 100vh;
}

.header {
    margin-left: 18px;
    margin-top: 18px;
    margin-bottom: 18px;
    font-size: 34px;
    line-height: 41px;
}

.toolbar {
    margin-left: 18px;
}
.items-list {
    display: flex;
    flex-wrap: wrap;
}

.item {
    border: 1px solid white;
    padding: 16px;
    overflow: hidden;
    border-radius: 5px;
    box-shadow: 1px 1px 4px rgba(225, 225, 225, 0.5);
}

@media (max-width: 512px) {
    .item {
        flex-basis: 100%;
    }
}


@media (min-width: 512px) and (max-width: 720px) {
    .item {
        flex-basis: 50%;
    }
}


@media (min-width: 720px) {
    .item {
        flex-basis: 33%;
    }
}

.item .item-text {
    height: calc(min(100% - 30px, 100px));
    max-height: 100px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.item-id {
    color: white;
    font-size: 8px;
}

.item .item-rating{
    width: 100%;
    color: #9c27b0;
}

.item .rate {
    margin-left: auto;
}

.item-avg-stars .rate {
    cursor: pointer !important;
    position: relative;
    margin: auto;
    font-size: 35px;
    top: -5px;
}

textarea.textarea-autosize {
    height: 2.25rem;
    min-height: 2.25rem;
    resize: none;
    overflow-y:hidden;
}

.margin-top {
    margin-top: 10px;
}

.align-right {
    text-align: right;
}

a.no-styling {
    text-decoration: none;
    color: inherit;
    outline: 0;
    cursor: pointer;
}

.item-avg {
    height: 105px;
    border-radius: 5px;
    background-color: #9c27b0;
    color: white;
    margin-left: 18px;
    margin-right: 18px;
}

.item-avg-number {
    width: 100%;
    text-align: center;
    font-size: 34px;
}

.item-avg-inscription {
    position: relative;
    top: -10px;
    width: 100%;
    text-align: center;
    font-size: 7px;
    font-style: italic;
}

.item-full {
    border: 1px solid white;
    padding: 16px;
    overflow: hidden;
    border-radius: 5px;
    box-shadow: 1px 1px 4px rgba(225, 225, 225, 0.5);
    margin: 18px;
}

.hist-container {
    border: 1px solid #9c27b0;
    border-radius: 5px;
    margin: 18px;
}

.hist-bar-container {
    position: relative;
    display: flex;
    margin: 9px;
}

.hist-bar {
    position: relative;
    display: flex;
    flex-basis: calc(100% - 110px);
}

.hist-value {
    background-color: #9c27b0;
    height: 20px;
}

.hist-value-rest {
    background-color: #e7e7e7;
    height: 20px;
}

.hist-text {
    flex-basis: 110px;
    text-align: right;
}