@font-face {
    font-family: 'FontAwesome';
    src: url('../Fonts/fa-regular-400.eot');
    src: url('../Fonts/fa-regular-400.eot') format('embedded-opentype'), url('../Fonts/fa-regular-400.woff') format('woff'), url('../Fonts/fa-regular-400.woff2') format('woff2'), url('../Fonts/fa-regular-400.ttf') format('truetype'), url('../Fonts/fa-regular-400.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'FontAwesomeSolid';
    src: url('../Fonts/fa-solid-900.eot');
    src: url('../Fonts/fa-solid-900.eot') format('embedded-opentype'), url('../Fonts/fa-solid-900.woff') format('woff'), url('../Fonts/fa-solid-900.woff2') format('woff2'), url('../Fonts/fa-solid-900.ttf') format('truetype'), url('../Fonts/fa-solid-900.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

/***** RATING START *****/

/*****

INFO :

THE HTML STRUCTURE NEEDS TO BE IN REVERSED ORDER -> STAR 5 TO STAR 1 INSTEAD OF STAR 1 TO STAR 5
REASON FOR THAT IS THAT YOU CANNOT SELECT ITEMS BEFORE THE CURRENT BUT YOU CAN SELECT THE ONES AFTER
THIS MAKES IT POSSIBLE TO APPLY STYLES TO E.G STAR 1 AND 2 WHEN YOU HOVER/CLICK STAR 3

YOU ACHIEVE THE DISPLAY OF THE CORRECT ORDER BY EITHER FLOATING THE LABELS/INPUTS RIGHT LIKE I DID HERE
-OR-
YOU CAN USE FLEX AND REVERSE THE FLEX DIRECTION
BOTH ACHIEVE THAT YOU CAN SHOW THE FIST ELEMENT IN THE HTML STRUKTURE (STAR 5) TO SHOW AS THE FIRST STAR FROM THE RIGHT

BY ABSOLUTE POSITIONING THE HALF STARS YOU ACHIEVE THAT THEY ARE DISPLAYED OVER THE NORMAL STARS THIS CREATES THE ILLUSION OF THE STARS BEING HALF FILLED
BUT YOU ACTUALLY FILL ONLY THE OVERLAYED HALF STAR

*****/

/* remove border and set float of fieldset/wrapper */
.dbayRatingStars {
    border: none;
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    position: relative;
}

/* hide inputs */
.dbayRatingStars > input[type="radio"] {
    display: none;
    height: 0;
    width: 0;
    opacity: 0;
}

/* set star style for all labels */
.dbayRatingStars > label:before {
    margin: 5px; /* spacing between stars */
    font-size: 2em; /* star size */
    font-family: FontAwesome, FontAwesomeSolid, sans-serif;
    display: inline-block; /* show stars inline */
    content: "\f005"; /* full star FontAwesome value */
}

.dbayRatingStars.solidStars > label:before {
    font-family: FontAwesomeSolid, FontAwesome, sans-serif;
}

/* override star style for half labels */
.dbayRatingStars > .halfRatingStar:before {
    content: "\f089"; /* half star FontAwesome value */
    position: absolute;
    width: 25px;
    margin: 0;
    padding: 5px 0 5px 5px;
    overflow: hidden;
}

/* set label color and float right so rating shows in correct direction */
.dbayRatingStars > label {
    color: #DDDDDD;
}

.dbayRatingStars > input[type="radio"][disabled] ~ label {
    color: #ddd !important;
}
.dbayRatingStars > input[type="radio"][disabled]:checked ~ label {
    color: var(--secondColor, #2d527c) !important;
}

.dbayRatingStars > input[type="radio"]:checked ~ label, /* show star colored when clicked */
    /*.dbayRatingStars:not(:checked) > label:hover, !* hover currently hovered star *!*/
.dbayRatingStars > input[type="radio"]:not(:checked):not(:disabled) ~ label:hover, /* hover currently hovered star if not disabled */
    /*.dbayRatingStars:not(:checked) > label:hover ~ label,  !* hover previous stars in list *!*/
.dbayRatingStars > input[type="radio"]:not(:checked):not(:disabled) ~ label:hover ~ label { /* hover previous stars in list if not disabled */
    color: var(--firstColor, #01427A);
}

.dbayRatingStars > input[type="radio"]:checked:not(:disabled) + label:hover, /* hover currently hovered star when changing rating if not disabled */
.dbayRatingStars > input[type="radio"]:checked:not(:disabled) ~ label:hover, /* hover currently hovered star when changing rating if not disabled */
.dbayRatingStars > label:hover ~ input:checked:not(:disabled) ~ label, /* lighten current selection when hovering again if not disabled */
.dbayRatingStars > input[type="radio"]:checked:not(:disabled) ~ label:hover ~ label { /* lighten current selection when hovering again if not disabled */
    color: var(--thirdColor, #34b2e7);
}

/***** Checkbox ******/
.dbayRatingStars > input[type='checkbox']:before {
    content: 'Keine Angabe';
    position: absolute;
    top: -20px;
    left: -15px;
    white-space: nowrap;
    font-size: 10px;
}
.dbayRatingStars > input[type='checkbox'] {
    -webkit-appearance: none;
    -moz-appearance: none;
    -o-appearance: none;
    appearance: none;
    border: 1px solid grey;
    border-radius: 5px;
    box-shadow: none;
    font-size: 0.8em;
    text-align: center;
    line-height: 1em;
    height: 25px;
    width: 25px;
    position: relative;
    display: flex;
    align-self: center;
    margin: 0 10px;
    margin-left: 25px;
}

.dbayRatingStars > input[type='checkbox']:checked {
    border: 1px solid transparent;
    border-radius: 5px;
}
.dbayRatingStars > input[type='checkbox']:checked:after {
    content: url("/typo3conf/ext/auc_thesaurus/Resources/Public/Icons/checkWhite.svg");
    height: 25px;
    width: 25px;
    background-color: #C40005;
    padding: 3px;
    border: 1px solid transparent;
    border-radius: 5px;
    box-sizing: border-box;
}




/***** RATING END *****/