@font-face {
    font-family: Walone;
    src: url('../fonts/Walone/Z06-Walone-Regular.ttf');
}


html {
    font-size: 14px;
    font-family: 'Walone', sans-serif;
}



.polar-container {
    width: 350.06px;
    /* Full container width */
    height: 50px;
    /* Height to accommodate thumb */
    position: relative;
}

.boxes {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
}

.box {
    width: 32px;
    /* Fixed box width */
    height: 20px;
    /* Box height */
    background-color: #FFFFFF;
    /* Inactive background */
    border: 1px solid #9CBDD6;
    /* Inactive border */
    transition: background-color 0.3s, border-color 0.3s;
    /* Smooth transition */
}

.box+.box {
    margin-left: 3.34px;
    /* Gap between boxes */
}

.first {
    border-top-left-radius: 50%;
    /* Left corner radius */
    border-bottom-left-radius: 50%;
}

.last {
    border-top-right-radius: 50%;
    /* Right corner radius */
    border-bottom-right-radius: 50%;
}

/* Active state for boxes */
.box.active {
    background-color: #C3E6FF;
    /* Active background */
    border: 1px solid #2A79B4;
    /* Active border */
}



.rating {
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

.rating-item {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.rating img {
    margin-right: 5px;
    cursor: pointer;
    transition: transform 0.2s, filter 0.3s;
    vertical-align: baseline;
}

/* Custom scrollbar styles */
.custom-scrollbar::-webkit-scrollbar {
    width: 8px;
    /* width of the scrollbar */
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: #f1f1f1;
    /* track color */
    border-radius: 10px;
    margin: 10px 10px;
    /* decreases visible track height */

}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background-color: #9CBDD6;
    /* scrollbar thumb color */
    border-radius: 10px;
    border: 2px solid #CAE2F4;
    /* padding around thumb */
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background-color: #6A9CB8;
    /* thumb color on hover */
}