.input-validation-error {
    border: 2px solid red;
    border-radius: 2px;
}

.field-validation-error {
    background-color: rgba(223, 12, 12, 0.3);
    color: rgb(255, 255, 255);
    padding-left: 4px;
    padding-right: 4px;
    border: 2px solid rgb(164, 8, 8);
    border-radius: 10px;
}

.field-validation-valid {
    background-color: bisque;
}

body {
    background-color: aliceblue;
}

#survey-form {
    max-width: 100%;
}

.survey-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.question-divider {
    margin-top: 1rem;
    margin-bottom: 1rem;
    border-top: 1px solid black;
}

.question {
    max-width: 1200px;
    border: 1px solid black;
    border-radius: 1rem;
    margin: 1rem;
    padding: 1rem;
    background-image: url("../res/img/Summer26/kc-paper-texture.png");
    background-size: cover;
}

.question-label {
    font-size: x-large;
    font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

td {
    font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

label {
    font-size: large;
    font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

.submit-btn {
    background-color: #078081;
    border-radius: 999px;
    border: 3px solid #1aafb0;
    padding-bottom: 6px;
    padding-top: 6px;
    padding-left: 12px;
    padding-right: 12px;
    color: #eeeeee;
    font-weight: 700;
    font-size: x-large;
}

.submit-btn:hover {
    background-color: #1aafb0;
}

.text-input {
    background-color: #f7f1eb;
    border: 2px solid #037a7c;
    border-radius: 5px;
    font-size: large;
    margin: 10px;
}

.text-input:focus {
    outline: none;
}

input[type="number"] {
    -webkit-appearance:textfield;
    background-color: #f7f1eb;
    border: 2px solid #037a7c;
    border-radius: 5px;
    font-size: medium;
    margin: 10px;
}

input[type="number"]:focus {
    outline: none;
}

.ratings {
    display: flex;
    flex-flow: row;
}

.ratings span {
    text-align: center;
    padding: 2px 2px;
}

.ratings input {
    margin-bottom: 4px;
}

@media screen and (max-width: 510px) {
    .ratings span {
        flex-grow: 1;
        flex-basis: 60px;
        max-width: 10%;
    }
}

@media screen and (max-width: 435px) {
    .ratings {
        flex-flow: row wrap;
    }

    .ratings span {
        flex-grow: 1;
        flex-basis: 60px;
        max-width: 18%;
    }
}

.ship-selection {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
    }

.ship-option {
    position: relative;
}

@media screen and (max-width: 700px) {
    .ship-option {
        flex-grow: 1;
    }

    .ship-image {
        max-width: 90%;
        aspect-ratio: 160/40;
    }
}

@media screen and (max-width: 425px) {
    .ship-selection {
        gap: 0px;
    }

    .ship-option {
        flex-grow: 2;
        flex-basis: 50%;
    }
}

@media screen and (max-width: 320px) {
    .ship-option {
        flex-grow: 2;
        flex-basis: 100%;
        max-width: unset;
    }
}

.ship-checkbox {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.ship-radio {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.ship-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    user-select: none;
}

.ship-image {
    width: 160px;
    object-fit: cover;

    filter: grayscale(100%);
    border: 2px solid transparent;
    border-radius: 6px;

    transition:
        filter 0.15s ease,
        border-color 0.15s ease,
        box-shadow 0.15s ease,
        transform 0.15s ease;
}

.ship-label:hover .ship-image {
    filter: grayscale(0%);
    border-color: #66ccff;
    box-shadow:
        0 0 5px #66ccff,
        0 0 10px rgba(102, 204, 255, 0.7);
}

.ship-checkbox:checked + .ship-label .ship-image {
    filter: grayscale(0%);
    border-color: #66ccff;
    box-shadow:
        0 0 5px #66ccff,
        0 0 10px rgba(102, 204, 255, 0.7);
}

.ship-radio:checked + .ship-label .ship-image {
    filter: grayscale(0%);
    border-color: #66ccff;
    box-shadow: 0 0 10px #66ccff;
}

.ship-radio:checked + .ship-label .ship-image {
    filter: grayscale(0%);
}

.ship-name {
    margin-top: 4px;
    text-align: center;
}


.abyss-selection {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.abyss-option {
    position: relative;
    text-wrap: balance;
}

@media screen and (max-width: 700px) {
    .abyss-option {
        flex-grow: 1;
    }

    .abyss-image {
        max-width: 90%;
        aspect-ratio: 160/40;
    }
}

@media screen and (max-width: 425px) {
    .abyss-selection {
        gap: 0px;
    }

    .abyss-option {
        flex-grow: 2;
        flex-basis: 50%;
        /*overflow: hidden; fuck long names >:C */
    }
}

@media screen and (max-width: 360px) {
    .abyss-option span {
        font-size: x-small;
    }
}

@media screen and (max-width: 320px) {
    .abyss-option {
        flex-grow: 2;
        flex-basis: 100%;
        max-width: unset;
    }
}

.abyss-checkbox {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.abyss-radio {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.abyss-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    user-select: none;
}

.abyss-image {
    width: 160px;
    object-fit: cover;

    filter: grayscale(100%);
    border: 2px solid transparent;
    border-radius: 6px;

    transition:
        filter 0.15s ease,
        border-color 0.15s ease,
        box-shadow 0.15s ease,
        transform 0.15s ease;
}

.abyss-label:hover .abyss-image {
    filter: grayscale(0%);
    border-color: #eb0e12;
    box-shadow:
        0 0 5px #eb0e12,
        0 0 10px rgba(223, 12, 12, 0.7);
}

.abyss-checkbox:checked + .abyss-label .abyss-image {
    filter: grayscale(0%);
    border-color: #eb0e12;
    box-shadow:
        0 0 5px #eb0e12,
        0 0 10px rgba(223, 12, 12, 0.7);
}

.abyss-radio:checked + .abyss-label .abyss-image {
    filter: grayscale(0%);
    border-color: #eb0e12;
    box-shadow: 0 0 10px #eb0e12;
}

.abyss-radio:checked + .abyss-label .abyss-image {
    filter: grayscale(0%);
}

.abyss-name {
    width: 160px;
    font-size: small;
    margin-top: 4px;
    text-align: center;
}

.difficulty-option {
    padding: 4px;
}

.diffchoice {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.diff-label {
    display: block;
    cursor: pointer;
    user-select: none;
}

.diff-image {
    width: 50px;
    height: 50px;
    object-fit: contain;

    filter: grayscale(100%);
    opacity: 0.65;

    border: 2px solid transparent;
    border-radius: 6px;

    transition:
        filter 0.15s ease,
        opacity 0.15s ease,
        border-color 0.15s ease,
        box-shadow 0.15s ease,
        transform 0.15s ease;
}

.diff-label:hover .diff-image {
    filter: grayscale(0%);
    opacity: 1;
    transform: scale(1.05);
}

.diffchoice:checked + .diff-label .diff-image {
    filter: grayscale(0%);
    opacity: 1;
    transform: scale(1.05);
}

.difficulty-table {
    margin: auto;
}

.difficulty-table td {
    border-top: 1px solid rgb(36, 17, 1);
}

thead th {
    font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

.table-perception {
    border-collapse: collapse;
    margin: auto;
}

.table-perception td {
    border-top: 1px solid rgb(36, 17, 1);
    text-align: center;
    font-size: larger;
}

.table-perception th {
    width: 100px;
}

.radio-toreplace {
    appearance: none;
    -webkit-appearance: none;
    position: relative;
    top: 4px;
    width: 24px;
    height: 24px;

    opacity: 0.5;
    background: url("../res/img/Summer26/Icon_Equipment_Lock_Unchecked.png") center / contain no-repeat;
    cursor: pointer;
}

.radio-toreplace:checked {
    opacity: 1;
    background: url("../res/img/Summer26/Icon_Equipment_Lock.png") center / contain no-repeat;
}

.radio-toreplace:hover {
    opacity: 1;
    background: url("../res/img/Summer26/Icon_Equipment_Lock_Unchecked.png") center / contain no-repeat;
}

.radio-toreplace:checked:hover {
    opacity: 1;
    background: url("../res/img/Summer26/Icon_Equipment_Lock.png") center / contain no-repeat;
}

.check-toreplace {
    appearance: none;
    -webkit-appearance: none;
    position: relative;
    top: 4px;
    width: 24px;
    height: 24px;

    background: url("../res/img/Summer26/checkmark unchecked.png") center / contain no-repeat;
    cursor: pointer;
}

.check-toreplace:checked {
    background: url("../res/img/Summer26/checkmark checked.png") center / contain no-repeat;
}

.check-toreplace:hover {
    background: url("../res/img/Summer26/checkmark checked fade.png") center / contain no-repeat;
}

.check-toreplace:hover:checked {
    background: url("../res/img/Summer26/checkmark checked.png") center / contain no-repeat;
}

.resources-table {
    display: flex;
    flex-flow: row wrap;
    width: 575px;
    max-width: 100%;
    margin: 0 auto;
}

.resources-table.triplet {
    width: 860px;
}

.resources-table > div {
    padding: 2.5px 10px;
    flex-grow: 1;
}

.resources-table input {
    width: 75%;
}

.resources-table img {
    height: 25px;
    position:relative;
    top:6px;
}

#allvalidationerror:not(:has(ul > li:not([style*="display:none"]))) {
    display: none;
}

.title {
    font-size: xx-large;
    margin:auto;
}

.hover-wrapper {
    position: relative;
    display: inline-block;
}

.abyss-image:hover +  .ship-hover-container {
    display: block;
}

.ship-image:hover +  .ship-hover-container {
    display: block;
}

.ship-hover-container {
    display: none;

    padding: 10px;
    
    border: 10px solid;
    border-width: 6px;
    border-image-slice: 1;
    border-image-source: linear-gradient(to top, #44736b, #75b2b4, #44736b);
    background-color: #efe5da;
    filter: drop-shadow(10px 10px 30px #000);

    max-height: 40vh;
    max-width: 48vw;

    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
}