﻿input.invalid, input.invalid:focus {
    border: 2px solid var(--red);
}

.validationInfo {
    color: var(--red);
    position: absolute;
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.validationBottomMargin,
.validationBottomMargin:has(.validation-with-margin .validationInfo).validationBottomMargin:has(.validation-no-margin .validationInfo)
{
    padding-bottom: 25px;
}

.validationBottomMargin:has(.validation-no-margin .validationInfo) {
    padding-bottom: 0;
} 

.nav-aside-link.invalid, .nav-aside-link.invalid:focus,
.nav-stage-link.invalid, .nav-stage-link.invalid:focus {
    display: flex;
    align-items: center;
    gap: 8px;
    transition: 0.2s ease-in-out;
}

.nav-stage-item .nav-stage-link.invalid::before {
    background: var(--red);
    border-radius: 4px 4px 0 0;
    bottom: 0;
    content: '';
    display: block;
    height: 4px;
    left: 0;
    position: absolute;
    width: 100%
}

.nav-stage-item .nav-stage-link.invalid.active:before {
    background: var(--violet);
}

.nav-aside-link.invalid:not(.nav-aside-link.invalid.active),
.nav-aside-link.invalid:focus:not(.nav-aside-link.invalid.active:focus),
.nav-stage-item .nav-stage-link.invalid:not(.nav-stage-link.invalid.active),
.nav-stage-item .nav-stage-link.invalid:focus:not(.nav-stage-link.invalid.active:focus) {
    color: var(--red);
}

.select2.invalid, .select2.invalid:focus {
    border: 2px solid var(--red);
    border-radius: 0.4rem;
}