/* elements default styling modifications */
fieldset {
    border: none;
}
/* bootstrap icons default size */
#pageContent .bi {
    font-size: 0.85em;
}

/*** Wizard form ***/
#wizard-form {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 25px;
    column-gap: 25px;
    align-items: flex-start;
    text-align: center;
}
#wizard-form h3, #wizard-form-buttons {
    text-align: left;
    flex-basis: 100%;
}
#wizard-form h3 {
    font-size: 2.5rem;
}
#wizard-form-buttons {
    text-align: center;
}
.wizard-item {
    display: block;
    box-sizing: border-box;
    width: 180px;
    margin: 10px;
    /*padding: 15px;*/
    text-align: center;
}
.wizard-item-title {
    text-align: center;
    white-space: nowrap;
    font-size: 1.2rem;
}
.wizard-item-icon {
    width: 100px;
    height: 100px;
    margin: 5px;
    border-radius: 10px;
    padding: 5px;
}
.wizard-item-answers {
    margin: 15px auto;
}
.wizard-item-answer:hover {
    background-color: var(--grey-lighter);
}
.wizard-item-answer-input:hover {
    cursor: default;
}
.wizard-item-answer-option label:hover {
    cursor: pointer;
}
.wizard-item-answers .list-group-sm {
    font-size: 0.75em;
}
.wizard-item-answers .list-group-sm .list-group-item {
    padding: 5px 5px;
    line-height: 1.4;
}
.wizard-item-answer.selected {
    background-color: lightblue;
}
/*.wizard-item-answer input:not([type="radio"]):valid,
.wizard-item-answer input[type="radio"]:checked ~ label {
    background-color: lightblue;
}*/
.wizard-item-answer-input input {
    text-align: center;
    width: 50%;
    margin: 0 5px;
    padding: 0;
    background-color: transparent;
    border: none;
    border-bottom: 1px grey dotted;
}
.wizard-item-answer-input input:focus {
    outline: none;
}
.wizard-item-answer-input span {
    display: inline-block;
    text-align: center;
    padding: 0 5px;
}
.wizard-item input[type=radio] {
    display: none;
}
.wizard-item label:hover {
    cursor: pointer;
}
/* invalid input */
/*input:invalid {
    background-color: indianred;
}*/

/* submit busy */
#submit-busy-icon {
    display: none;
    width: 1em;
    height: 1em;
}

/** Tooltip (top) **/
.wizard-item {
    position: relative;
}
.tooltip-icon {
    font-size: 0.9em;
}
.tooltip-icon:hover {
    cursor: pointer;
}
.tooltip-top {
    display: block;
    position: absolute;
    bottom: 95%;
    background-color: black;
    color: white;
    border-radius: 4px;
    padding: 5px;
    font-size: 0.65em;
    text-align: left;
    width: 275px;
    left: -40px;
    visibility: hidden; /* TODO: make visible by clicking on question-mark */
}
.tooltip-top::after {
    content: " ";
    position: absolute;
    top: 100%; /* At the bottom of the tooltip */
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: black transparent transparent transparent;
}