form .grid,
form .simple-grid,
.grid .group,
.simple-grid .input {
    margin: var(--gap) 0
}
.grid .group {
    display: flex;
    width: 100%
}
.grid .group:last-of-type {
    margin-bottom: 0
}
.grid .group .label {
    flex: 0 0 20%
}
.grid .group:not(.concatenated) .input,
.grid .group:not(.concatenated)>.radio,
.grid .group:not(.concatenated)>.check,
.grid .group:not(.concatenated)>.note {
    flex: 0 0 80%
}
form .inline,
form.inline .buttons,
form .inline .buttons {
    display: flex;
    flex-direction: row
}
form .inline,
form.inline .buttons {
    align-content: stretch
}
form .inline .group,
form .concatenated {
    align-items: center
}
form .inline .group .label {
    margin-right: calc(var(--gap) / 2)
}
.input textarea {
    height: unset
}
.input select:not([multiple]) {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right .75rem center;
    background-size: 16px 12px;
    padding-right: 2.25rem
}
.input input:hover,
.input textarea:hover,
.input select:hover {
    border-color: var(--bcg-light)
}
.input input:focus,
.input textarea:focus,
.input select:focus {
    color: #18113c;
    background-color: #fff;
    border-color: #754ffe;
    outline: 0;
    box-shadow: 0 0 0 3px rgb(231 225 253 / 75%)
}
.radio,
.check {
    display: block;
    min-height: 1.5rem;
    line-height: 1.5;
    margin-bottom: .5rem
}
.radio input,
.check input {
    width: 1rem;
    height: 1rem;
    margin: .25em calc(var(--gap) / 2) 0 0;
    vertical-align: top;
    background-color: #fff;
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: contain;
    background-clip: unset;
    border: 1px solid rgba(0,0,0,.25);
    appearance: none;
    -webkit-print-color-adjust: exact;
    color-adjust: exact;
    float: left;
    padding: 0
}
.radio input:focus,
.check input:focus {
    border-color: #86b7fe;
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgb(13 110 253 / 25%)
}
.radio input:checked,
.check input:checked {
    border-color: var(--bcg-blue);
    background-color: var(--bcg-blue)
}
.radio input[type=radio] {
    border-radius: 50%
}
.radio input:checked[type=radio] {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='2' fill='%23fff'/%3E%3C/svg%3E")
}
.check input[type=checkbox] {
    border-radius: .25em
}
.check input:checked[type=checkbox] {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e")
}
form .explainer,
form .description {
    margin-bottom: var(--gap);
    color: #6c757d
}
form .explainer {
    margin-top: calc(var(--gap) / 4);
    font-size: .875em
}
fieldset {
    padding: calc(var(--gap) * 2);
    padding-top: 0;
    border-radius: var(--border-radius);
    border: 1px solid rgba(0,0,0,.1);
    margin: calc(var(--gap) * 2) 0
}
fieldset legend {
    padding-inline: calc(var(--gap) / 2);
    float: none;
    width: auto
}
form h2:not(:first-of-type) {
    margin-top: calc(var(--gap) * 4)
}
form :not(h2) + h3 {
    margin-top: calc(var(--gap) * 3)
}
form *:disabled {
    background-color: rgba(61, 51, 51, 0.068);
    opacity: .8;
    cursor: not-allowed 
}
.input-group {
    display: flex;
    flex-wrap: nowrap
}
.input-group .input-group-addon {
    flex: 1 1 1%
}
.input-group .input-group-addon:not(:first-child),
.input-group .input-group-addon+input,
.input-group .input-group-addon+select,
.input-group input+.input-group-addon,
.input-group select+.input-group-addon {
    border-left: none;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    padding-left: 0
}
.input-group .input-group-addon:not(:last-child) {
    border-right: none;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0
}
input.user-invalid {
    border-color: red;
    background-color: #f7d4d8
}
form [visible-when-invalid] {
    display: block;
    font-weight: 500
}
form h3,
form h4,
form h5,
form h6,
.quiz-question {
    margin: var(--gap) 0 calc(var(--gap) / 2)
}
form h3 {
    font-size: 1.8rem
}
form h4 {
    font-size: 1.65rem
}
form h5 {
    font-size: 1.5rem
}
form h6 {
    font-size: 1.35rem
}
button+button,
button+a {
    margin-left: var(--gap)
}
.submit.register {
    color: #2163e8;
    background-color: rgba(33, 99, 232, 0.1)
}
.submit.register:hover {
    color: #fff;
    background-color: #2163e8
}
button.delete {
    color: #fff;
    background-color: #d6293e;
    border-color: #d6293e
}
button.delete:hover {
    color: #fff;
    background-color: #b62335;
    border-color: #ab2132
}
form.filter,
form.list-filter {
    border-radius: var(--border-radius);
    background-color: var(--light-bg);
    padding: var(--gap)
}
.list-filter .inline .buttons {
    display: flex;
    justify-content: center
}
.list-filter button.advanced {
    color: rgb(0, 79, 138);
    background-color: rgba(79, 158, 248, 0.1)
}
.list-filter button.advanced:hover {
    color: #fff;
    background-color: #4f9ef8
}
.list-filter #list-filter-advanced {
    display: block
}
form .grid .show,
.shop-search {
    margin-bottom: var(--gap)
}
.input.separated {
    display: flex;
    justify-content: space-between
}
.shop-search {
	border-radius: var(--border-radius);
    background-color: var(--light-bg);
    padding: var(--gap)
}

@media screen and (max-width: 767px) {
    .grid .group,
    .inline .group,
    .group.concatenated,
    form .inline {
        flex-direction: column;
    }
    .inline .group {
        margin-bottom: var(--gap)
    }
    .list-filter {
        margin-bottom: calc(var(--gap) * 2);
    }
}

@media screen and (min-width: 768px) {
    .inline .group+.group {
        margin-left: var(--gap)
    }
    .grid .group {
        flex-direction: row;
        align-items: center
    }
    .grid .group .label {
        padding-right: var(--gap)
    }
    .grid .group .input.labelless,
    .grid .group .label+.input,
    .grid .group>.radio,
    .grid .group>.check,
    .grid .group>.note {
        padding-left: var(--gap);
        margin-left: 20%
    }
    .grid .group .label+.input {
        margin-left: 0
    }
    .grid .group .label.top {
        align-self: start;
        padding-top: .75rem;
        line-height: 1.6
    }
    .group.concatenated .lead-in {
        margin-right: var(--gap)
    }
    .group.concatenated .input {
        display: flex
    }
    .group.concatenated .input input,
    .group.concatenated .input select {
        display: inline-block;
        flex: 1 1 auto;
        width: 1%;
        min-width: 200px
    }
    .group.concatenated .input :not(:first-child) {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }
    .group.concatenated .input-group:not(:last-child) input,
    .group.concatenated .input-group:not(:last-child) select,
    .group.concatenated .input :not(:last-child) {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
        border-right: 0
    }
    .inline button {
        margin-left: var(--gap);
        flex: 0 0 auto
    }
}
.input .form-control.dropdown input {
    display: unset;
    width: unset;
    height: unset;
    padding: unset
}