.document button {
    cursor: pointer;
    padding: 0 calc(var(--document_general_size_font) * 0.25);
    font-weight: var(--document_general_font_semi_bold);
    border: solid 1px var(--document_general_color_use);
    color: var(--document_general_color_base);
    background-color: var(--document_general_color_use);
    transition-property: color, background-color;
    transition: 0.25s;
}
.document button:hover {
    color: var(--document_general_color_use);
    background-color: var(--document_general_color_base);
    transition-property: color, background-color;
    transition: 0.25s;
}
.document button.rejection {
    cursor: not-allowed;
    border: solid 1px var(--document_general_color_half);
    color: var(--document_general_color_base);
    background-color: var(--document_general_color_half);
    transition-property: color, background-color;
    transition: 0.25s;
}
.document button.rejection:hover {
    background-color: var(--document_general_color_use);
    background-image: repeating-linear-gradient(-45deg, var(--document_general_color_half), 6px, transparent 0, transparent 12px);
    transition-property: color, background-color;
    transition: 0.25s;
}

.document input[type='search'],
.document input[type='password'],
.document input[type='text'] {
    width: calc(var(--document_general_size_font) * 4);
    padding: 0 calc(var(--document_general_size_font) * 0.25);
    text-align: left;
    border-top: solid 1px transparent;
    border-bottom: solid 1px var(--document_general_color_use);
    color: var(--document_general_color_use);
    background: var(--document_general_color_base);
}
.document input[type='checkbox'],
.document input[type='radio'] {
    display: none;
}
.document input[type='checkbox'] + label,
.document input[type='radio'] + label {
    cursor: pointer;
    position: relative;
    padding-left: var(--document_list_size_indent);
    background-color: transparent;
    transition-property: background-color, opacity;
    transition: 0.25s;
}
.document input[type='checkbox'] + label:hover,
.document input[type='radio'] + label:hover {
    background-color: var(--document_general_color_half);
    transition-property: background-color, opacity;
    transition: 0.25s;
}
.document input[type='checkbox']:disabled + label,
.document input[type='radio']:disabled + label {
    cursor: not-allowed;
    opacity: 0.5;
    transition-property: background-color, opacity;
    transition: 0.25s;
}
.document input[type='checkbox']:disabled + label:hover,
.document input[type='radio']:disabled + label:hover {
    background-color: transparent;
    transition-property: background-color, opacity;
    transition: 0.25s;
}
.document input[type='checkbox'] + label:before {
    content: '';
    position: inherit;
    display: inline-block;
    width: calc(var(--document_general_size_font) * 0.75);
    height: calc(var(--document_general_size_font) * 0.75);
    margin-left: calc(var(--document_general_size_font) * -0.375 - 1px);
    margin-right: calc(var(--document_list_size_indent) - var(--document_general_size_font) * 0.375 - 1px);
    border: solid 1px var(--document_general_color_use);
    background: var(--document_general_color_base);
}
.document input[type='checkbox'] + label:after {
    content: '';
    position: absolute;
    display: inline-block;
    top: calc(var(--document_general_size_font) * 0.5);
    left: calc(var(--document_list_size_indent) - var(--document_general_size_font) * 0.375 - 3px);
    width: 0;
    height: calc(var(--document_general_size_font) * 0.25);
    border-bottom: solid 3px var(--document_general_color_use);
    border-left: solid 3px var(--document_general_color_use);
    opacity: 0;
    transform: rotate(-45deg);
    transform-origin: calc(100% + var(--document_general_size_font) * 0.125) calc(50% - var(--document_general_size_font) * 0.375);
    transition-property: width, opacity, transform, transform-origin;
    transition: 0.25s;
}
.document input[type='checkbox']:checked + label:after {
    width: calc(var(--document_general_size_font) * 0.75);
    opacity: 1;
    transform-origin: calc(50% - var(--document_general_size_font) * 0.125) calc(50% - var(--document_general_size_font) * 0.375);
    transition-property: width, opacity, transform-origin;
    transition: 0.25s;
}
.document input[type='radio'] + label:before {
    content: '';
    position: inherit;
    display: inline-block;
    width: calc(var(--document_general_size_font) * 0.75);
    height: calc(var(--document_general_size_font) * 0.75);
    margin-left: calc(var(--document_general_size_font) * -0.375 - 1px);
    margin-right: calc(var(--document_list_size_indent) - var(--document_general_size_font) * 0.375 - 1px);
    border-radius: 50%;
    border: solid 1px var(--document_general_color_use);
    background: var(--document_general_color_base);
}
.document input[type='radio'] + label:after {
    content: '';
    position: absolute;
    display: inline-block;
    top: calc(var(--document_general_size_font) * 0.5);
    left: calc(var(--document_list_size_indent) - var(--document_general_size_font) * 0.25);
    width: calc(var(--document_general_size_font) * 0.5);
    height: calc(var(--document_general_size_font) * 0.5);
    border-radius: 50%;
    background: var(--document_general_color_use);
    opacity: 0;
    transition-property: opacity;
    transition: 0.25s;
}
.document input[type='radio']:checked + label:after {
    opacity: 1;
    transition-property: opacity;
    transition: 0.25s;
}

.document textarea {
    width: 100%;
    height: auto;
    text-align: left;
    border: solid 1px var(--document_general_color_use);
}

.document .interface {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.document .interface > * {
    margin: 0 calc(var(--document_general_size_font) * 0.5);
}
.document .interface > *:first-child {
    margin-left: 0;
}
.document .interface > *:last-child {
    margin-right: 0;
}

.document .interface.list {
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    margin: var(--document_block_size_margin) 0;
}
.document .interface.list:first-child {
    margin-top: 0;
}
.document .interface.list:last-child {
    margin-bottom: 0;
}

.document .interface.list > * {
    margin: 0;
}