.property-block .property-block__result-info {
    display: none;
    margin: 20px 0px 0px 0px;
    text-align: left;
}

.property-block.property-result-valid .property-block__result-info,
.property-block.property-result-invalid .property-block__result-info {
    display: block;
}

.property-block.property-result-valid,
.property-block.property-result-invalid {
    border-left: 3px solid;
    border-right: 3px solid;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;
    padding: 5px 10px;
}

.property-block.property-result-valid {
    border-color: green;
}

.property-block.property-result-invalid {
    border-color: red;
}

.property-block .property-block__result-info.result-valid {
    color: green;
}

.property-block .property-block__result-info.result-invalid {
    color: red;
}

.property-block .property-block__result-info {
    display: none !important;
}

.property-block.property-result-valid .property-block__result-info.result-valid {
    display: block !important;
}

.property-block.property-result-invalid .property-block__result-info.result-invalid {
    display: block !important;
}

input[name="speaker-name"],
input[name="room-name"],
input[name="room-value"],
input[name="level-attenuation-value"] {
    display: none !important;
}

.property-block:has(select[name="speaker"] > option[value="-1"]:checked) input[name="speaker-name"] {
    display: block !important;
}

.property-block:has(select[name="room"] > option[value="-1"]:checked) input[name="room-name"],
.property-block:has(select[name="room"] > option[value="-1"]:checked) input[name="room-value"] {
    display: block !important;
}

.property-block:has(select[name="level-attenuation"] > option[value="-1"]:checked) input[name="level-attenuation-value"] {
    display: block !important;
}

.info-block {
    display: inline-block;
    position: relative;
    --offset-x: -5px;
}

.info-block:before {
    content: '?';
    color: #ff4500;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    aspect-ratio: 1/1;
    display: block;
    text-align: center;
    background-color: #333;
    border-bottom: 0px solid;
    -webkit-transition: opacity 0.1s;
    -moz-transition: opacity 0.1s;
    -o-transition: opacity 0.1s;
    -ms-transition: opacity 0.1s;
    transition: opacity 0.1s;
    padding: 2px 6px;
    -webkit-opacity: 80%;
    -moz-opacity: 80%;
    opacity: 80%;
    transform: scale(0.75);
}

.info-block:hover:before {
    -webkit-opacity: 95%;
    -moz-opacity: 95%;
    opacity: 95%;
}

.info-block .info-block__content {
    position: absolute;
    background: #333333cc;
    color: #fff;
    padding: 8px 7px;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    -ms-border-radius: 7px;
    -o-border-radius: 7px;
    border-radius: 7px;
    top: 120%;
    max-width: 30vw;
    -webkit-opacity: 0%;
    -moz-opacity: 0%;
    opacity: 0%;
    left: var(--offset-x);
    -webkit-transition: opacity 0.5s ease 0.1s, translate 0.3s ease-in 0.1s;
    -moz-transition: opacity 0.5s ease 0.1s, translate 0.3s ease-in 0.1s;
    -o-transition: opacity 0.5s ease 0.1s, translate 0.3s ease-in 0.1s;
    -ms-transition: opacity 0.5s ease 0.1s, translate 0.3s ease-in 0.1s;
    transition: opacity 0.5s ease 0.1s, translate 0.3s ease-in 0.1s;
    pointer-events: none;
    translate: 0px 20px;
    min-width: 200px;
    z-index: 1000;
}

.info-block:hover .info-block__content {
    -webkit-transition: opacity 0.4s ease, translate 0.25s ease-out;
    -moz-transition: opacity 0.4s ease, translate 0.25s ease-out;
    -o-transition: opacity 0.4s ease, translate 0.25s ease-out;
    -ms-transition: opacity 0.4s ease, translate 0.25s ease-out;
    transition: opacity 0.4s ease, translate 0.25s ease-out;
    -webkit-opacity: 100%;
    -moz-opacity: 100%;
    opacity: 100%;
    translate: 0px 0px;
}