.rate {
    float: left;
    height: 46px;
    padding: 0 10px;
}

.rate:not(:checked)>input {
    position: absolute;
    top: -9999px;
}

.rate:not(:checked)>label {
    float: right;
    width: 1em;
    overflow: hidden;
    white-space: nowrap;
    cursor: pointer;
    font-size: 30px;
    color: #ccc;
}

.rate:not(:checked)>label:before {
    content: '★ ';
}

.rate>input:checked~label {
    color: #ffc700;
}

.rate:not(:checked)>label:hover,
.rate:not(:checked)>label:hover~label {
    color: #deb217;
}

.rate>input:checked+label:hover,
.rate>input:checked+label:hover~label,
.rate>input:checked~label:hover,
.rate>input:checked~label:hover~label,
.rate>label:hover~input:checked~label {
    color: #c59b08;
}
.rounded {
    cursor: pointer;
}

.modal-close {
    cursor: pointer;
    font-size: 2rem;
    /* Adjust size as needed */
    position: absolute;
    top: 10px;
    /* Adjust to move up or down */
    right: 10px;
    /* Adjust to move left or right */
    color: #000;
    /* Adjust color as needed */
    z-index: 1051;
    /* Ensure it's above the modal-navigation icons */
}


.modal-navigation {
    cursor: pointer;
    font-size: 2rem;
    position: absolute;
    top: 50%;
    z-index: 1051;
    /* Ensure it's above modal content */
    color: #fff;
    /* Adjust color as needed */
}

.modal-navigation.left {
    left: 10px;
}

.modal-navigation.right {
    right: 10px;
}

.thumbnail.selected {
    border: 2px solid blue;
    /* Adjust border style as needed */
}