.sis-screen-picker .custom-btn-check {
    position: absolute;
    clip: rect(0, 0, 0, 0);
    pointer-events: none;
}

.sis-screen-picker .custom-btn-check:not(:checked) + .btn:hover {
    color: #be8e14;
    background-color: rgba(190, 142, 20, 0.12);
    border-color: #be8e14;
}

.sis-screen-picker .custom-btn-check:checked + .btn {
    color: #fff;
    background-color: #be8e14;
    border-color: #be8e14;
}

.sis-screen-picker .custom-btn-check:checked + .btn:hover {
    color: #fff;
    background-color: #a77910;
    border-color: #a77910;
}

.sis-screen-picker .custom-btn-check:focus + .btn,
.sis-screen-picker .custom-btn-check:focus-visible + .btn {
    box-shadow: 0 0 0 0.2rem rgba(199, 129, 7, 0.774);
}

.rating {
    display: inline-flex;
    flex-direction: row-reverse;
}

.rating input {
    display: none;
}

.rating label {
    font-size: 32px;
    color: #ccc;
    cursor: pointer;
}

.rating input:checked ~ label,
.rating label:hover,
.rating label:hover ~ label {
    color: gold;
}

.rating label {
    position: relative;
}

.rating label:hover::after {
    content: attr(data-tooltip);

    position: absolute;
    bottom: 120%;
    left: 50%;
    transform: translateX(-50%);

    background: #222;
    color: white;

    padding: 5px 8px;
    border-radius: 4px;

    font-size: 12px;
    white-space: nowrap;
}



.ser_rating {
    display: inline-flex;
    flex-direction: row-reverse;
}

.ser_rating input {
    display: none;
}

.ser_rating label {
    font-size: 32px;
    color: #ccc;
    cursor: pointer;
}

.ser_rating input:checked ~ label,
.ser_rating label:hover,
.ser_rating label:hover ~ label {
    color: gold;
}

.ser_rating label {
    position: relative;
}

.ser_rating label:hover::after {
    content: attr(data-tooltip);

    position: absolute;
    bottom: 120%;
    left: 50%;
    transform: translateX(-50%);

    background: #222;
    color: white;

    padding: 5px 8px;
    border-radius: 4px;

    font-size: 12px;
    white-space: nowrap;
}



.stf_rating {
    display: inline-flex;
    flex-direction: row-reverse;
}

.stf_rating input {
    display: none;
}

.stf_rating label {
    font-size: 32px;
    color: #ccc;
    cursor: pointer;
}

.stf_rating input:checked ~ label,
.stf_rating label:hover,
.stf_rating label:hover ~ label {
    color: gold;
}

.stf_rating label {
    position: relative;
}

.stf_rating label:hover::after {
    content: attr(data-tooltip);

    position: absolute;
    bottom: 120%;
    left: 50%;
    transform: translateX(-50%);

    background: #222;
    color: white;

    padding: 5px 8px;
    border-radius: 4px;

    font-size: 12px;
    white-space: nowrap;
}

.star {
    font-size: 24px;
}

.star.filled {
    color: gold;
}

.star.empty {
    color: #ccc;
}