.formdiv {

    display: flex;

    align-items: center;

    gap: 10px;

}



.formular {

    display: flex;

    flex-direction: column;

    width: 100%;

    max-width: 1000px;

    gap: 20px;

}

.formular .table {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 20px;

    width: 100%;

    align-items: center;

    justify-content: center;

}

.formular .other {

    display: flex;

    flex-direction: column;

    gap: 20px;

    width: 100%;

    align-items: stretch;

    justify-content: center;

}

.formular .table label {

    text-align: end;

}

@media (max-width: 850px) {

    .formular .table {

        grid-template-columns: 1fr;

    }

    .formular .table label {

        text-align: start;

    }

}

.formular input,

.formular select,

.formular textarea {

    background: var(--dark2);

    font-size: calc(var(--font-size) - 2px);

    color: var(--white);

    padding: 10px;

    border: 2px solid var(--muted);

    border-radius: 8px;

    outline: none;

}

.formular input:focus,

.formular select:focus,

.formular textarea:focus {

    border: 2px solid var(--accent);

}

.formular textarea {

    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;

    resize: none;

    overflow: hidden;

    /* min-height: calc(var(--font-size) + 5px); */

    min-height: 100px;

    height: 100px;

}



.formular .field2 {

    display: flex;

    flex-direction: column;

    gap: 10px;

}



.formular .box {

    display: flex;

    flex-direction: column;

    justify-content: flex-start;

    align-items: flex-start;

    padding: 24px;

    border: 1px solid color-mix(in srgb, var(--dark2) 60%, transparent);

    border-radius: 8px;

    background: transparent;

    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);

    box-sizing: border-box;

    transition: all 0.3s ease;

}

.formular .box:hover {

    border-color: color-mix(in srgb, var(--dark2) 90%, transparent);

    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);

}



.formular .field3 {

    display: flex;

    flex-direction: row;

    align-items: center;

    gap: 10px;

    cursor: pointer;

}

.formular .field3 input {

    opacity: 0;

    position: absolute;

    cursor: pointer;

}

.formular .field3 .checkbox {

    display: flex;

    background: var(--dark2);

    background-position: center;

    background-size: 0px;

    height: 30px;

    aspect-ratio: 1 / 1;

    border-radius: 8px;

    border: 2px solid transparent;

}

.formular .field3:hover .checkbox {

    border: 2px solid var(--accent);

}

.formular .field3:has(input:checked) .checkbox {

    background-color: var(--theme);

    background-image: url("/ikony/check.svg");

    background-repeat: no-repeat;

    background-size: 30px;

}



.formular .sendform {

    display: flex;

    justify-content: center;

    gap: 5px;

}



.point:not(:has(input:checked)) {

    border-color: #be0000a1;

    animation: shake 0.4s ease-in-out 1;

}

@keyframes shake {

    0%, 100% {

        transform: translateX(0);

    }

    20% {

        transform: translateX(-5px);

    }

    40% {

        transform: translateX(5px);

    }

    60% {

        transform: translateX(-4px);

    }

    80% {

        transform: translateX(4px);

    }

}



.valuefield {

    display: flex;

    flex-direction: row;

    align-items: center;

    justify-content: space-between;

    background: var(--dark2);

    font-size: calc(var(--font-size) - 2px);

    color: var(--white);

    padding: 0pxx;

    border: 2px solid var(--muted);

    border-radius: 8px;

    outline: none;

    gap: 10px;

    overflow: none;

}

.valuefield * {

    display: flex;

    align-items: center;

    justify-content: center;

}

.valuefield .value {

    padding: 10px;

}

.valuefield button {

    cursor: pointer;

    border: none;

    background: transparent;

    box-shadow: none;

    aspect-ratio: 1 / 1;

    width: 10px;

    margin: 0;

    border-radius: 6px;

}

.valuefield button:hover {

    transform: none;



}



.btn {

    width: auto;

    height: auto;

    padding: 16px 26px !important;

    font-size: var(--font-size) !important;

    font-weight: 500 !important;

    color: var(--white);

    background: rgba(255, 255, 255, 0.12);

    border: 1px solid rgba(255, 255, 255, 0.2) !important;

    border-radius: 12px !important;

    backdrop-filter: blur(8px);

    -webkit-backdrop-filter: blur(8px);

    box-shadow:

        0 4px 16px rgba(0, 0, 0, 0.08),

        inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;

    cursor: pointer;

    transition: all 0.25s ease;

}

.btn:hover {

    background: rgba(255, 255, 255, 0.18);

    border-color: rgba(255, 255, 255, 0.3) !important;

    transform: translateY(-2px);

    box-shadow:

        0 7px 22px rgba(0, 0, 0, 0.12),

        inset 0 1px 0 rgba(255, 255, 255, 0.18);

}

.btn:active {

    transform: translateY(0);

    background: rgba(255, 255, 255, 0.14);

    box-shadow:

        0 2px 8px rgba(0, 0, 0, 0.1),

        inset 0 1px 3px rgba(0, 0, 0, 0.08);

}

.btn.bright {

    color: var(--white);

    background:

        linear-gradient(

            135deg,

            rgba(216, 180, 92, 0.72),

            rgba(168, 118, 1, 0.72)

        );

    border: 1px solid rgba(216, 180, 92, 0.55);

    backdrop-filter: blur(10px);

    -webkit-backdrop-filter: blur(10px);

    box-shadow:

        0 4px 18px rgba(168, 118, 1, 0.18),

        inset 0 1px 0 rgba(255, 255, 255, 0.25);

    transition: all 0.25s ease;

}

.btn.bright:hover {

    background:

        linear-gradient(

            135deg,

            rgba(216, 180, 92, 0.86),

            rgba(194, 146, 33, 0.82)

        );

    border-color: rgba(216, 180, 92, 0.75);

    transform: translateY(-2px);

    box-shadow:

        0 8px 26px rgba(168, 118, 1, 0.28),

        inset 0 1px 0 rgba(255, 255, 255, 0.3);

}

.btn.bright:active {

    transform: translateY(0);

    background:

        linear-gradient(

            135deg,

            rgba(194, 146, 33, 0.78),

            rgba(168, 118, 1, 0.78)

        );

    box-shadow:

        0 3px 10px rgba(168, 118, 1, 0.2),

        inset 0 2px 4px rgba(0, 0, 0, 0.12);

}

.btn.bright.beauty {

    position: relative;

    overflow: hidden;

    isolation: isolate;

}

.btn.bright.beauty::after {

    content: "";

    position: absolute;

    inset: -40%;

    background:

        linear-gradient(

            110deg,

            transparent 35%,

            rgba(255, 255, 255, 0.38) 50%,

            transparent 65%

        );

    transform: translateX(-100%) skewX(-15deg);

    transition: transform 1s ease;

    pointer-events: none;

    z-index: -1;

}

.btn.bright.beauty:hover::after {

    transform: translateX(100%) skewX(-15deg);

}



.formular:has(input:invalid) #submit-btn {

    filter: brightness(60%);

    background-color: transparent !important;

    transform: translateY(0);

    cursor: not-allowed;

}



.infobox {

    background: transparent;

    border: 1px solid var(--theme);

    padding: 10px 15px;

    border-radius: 16px;

    display: flex;

    flex-direction: column;

    align-items: stretch;

    width: 100%;

    max-width: 1000px;

}

.infobox p {

    width: 100%;

    display: flex;

    flex-direction: column;

    margin: 10px 0;

}

.infobox h4 {

    font-size: 1.6rem;

}

#messageContent {

    background: var(--dark3);

    font-size: calc(var(--font-size) - 2px);

    color: var(--white);

    padding: 10px;

    border: 2px solid var(--muted);

    border-radius: 8px;

    outline: none;

    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;

    resize: none;

    overflow: hidden;

    min-height: 100px;

    height: auto;

}

.fail {

    border-color: #be0000a1;

    scroll-margin-top: calc(var(--header-height) + 50px);

}

img.fail {

    background-color: #be0000a1;

    filter: invert(0);

}

.infobox#info {

    border-color: var(--muted);

}