#root.trc-aforms-theme-blue {
    --trc-blue-main: #1f4e79;
    --trc-blue-action: #2f6fb0;
    --trc-selected-bg: #dceeff;
    --trc-selected-bg-hover: #cfe6fb;
    --trc-selected-border: #2f6fb0;
    --trc-selected-text: #173b5c;
    --trc-blue-light: #eaf3fb;
    --trc-blue-hover: #edf6ff;
    --trc-blue-focus: rgba(47, 111, 176, .30);
}

/* 金額・合計など、通常時のアクセント。 */
#root.trc-aforms-theme-blue .wq-Option > .wq--label > .wq--main > .wq--prices > .wq--price,
#root.trc-aforms-theme-blue .wq-Option > .wq--label > .wq--main > .wq--quantity,
#root.trc-aforms-theme-blue .wq-Monitor > .wq--footer > .wq--entry.wq-for-total > .wq-for-value {
    color: var(--trc-blue-main);
}

/* 未選択は白、選択済みは薄い青。濃色の全面反転は行わない。 */
#root.trc-aforms-theme-blue .wq-Option > .wq--label,
#root.trc-aforms-theme-blue .wq-Checkbox > label,
#root.trc-aforms-theme-blue .wq-Radio > label {
    border-color: #b8c3cf;
    transition: background-color .12s linear, border-color .12s linear, color .12s linear, box-shadow .12s linear;
}

#root.trc-aforms-theme-blue .wq-Option > .wq--input:checked + .wq--label,
#root.trc-aforms-theme-blue .wq-Option > .wq--select.wq-is-selected + .wq--label {
    background-color: var(--trc-selected-bg) !important;
    border-color: var(--trc-selected-border) !important;
    color: var(--trc-selected-text) !important;
    box-shadow: inset 0 0 0 1px var(--trc-selected-border) !important;
}

#root.trc-aforms-theme-blue .wq-Option > .wq--input:checked + .wq--label *,
#root.trc-aforms-theme-blue .wq-Option > .wq--select.wq-is-selected + .wq--label * {
    color: var(--trc-selected-text) !important;
}

/* 属性Checkbox/Radioは一般的な四角・丸マークに統一。 */
#root.trc-aforms-theme-blue .wq-Checkbox > label,
#root.trc-aforms-theme-blue .wq-Radio > label {
    position: relative;
    min-height: 46px;
    height: auto;
    line-height: 1.45;
    white-space: normal;
    overflow: visible;
    border-radius: 8px;
    padding: 10px 16px 10px 46px;
    cursor: pointer;
    background: #fff !important;
    border: 1px solid #b8c3cf !important;
    color: #121212 !important;
    box-shadow: none;
}

#root.trc-aforms-theme-blue .wq-Checkbox > label::before,
#root.trc-aforms-theme-blue .wq-Radio > label::before {
    content: '' !important;
    position: absolute;
    left: 13px;
    top: 50%;
    width: 22px;
    height: 22px;
    box-sizing: border-box;
    border: 2px solid #718090 !important;
    background: #fff !important;
    margin: 0 !important;
    transform: translateY(-50%) !important;
}

#root.trc-aforms-theme-blue .wq-Checkbox > label::before {
    border-radius: 4px !important;
    color: transparent !important;
    font-family: Arial, sans-serif !important;
    font-size: 16px !important;
    font-weight: 700;
    line-height: 18px !important;
    text-align: center;
}

#root.trc-aforms-theme-blue .wq-Radio > label::before {
    border-radius: 50% !important;
}

#root.trc-aforms-theme-blue .wq-Checkbox > label::after,
#root.trc-aforms-theme-blue .wq-Radio > label::after {
    animation: none !important;
    transform: none !important;
}

#root.trc-aforms-theme-blue .wq-Checkbox > label::after {
    display: none !important;
    content: none !important;
}

#root.trc-aforms-theme-blue .wq-Radio > label::after {
    content: '' !important;
    display: none !important;
}

#root.trc-aforms-theme-blue .wq-Checkbox > input:checked + label,
#root.trc-aforms-theme-blue .wq-Radio > input:checked + label {
    background: var(--trc-selected-bg) !important;
    border-color: var(--trc-selected-border) !important;
    color: var(--trc-selected-text) !important;
    box-shadow: inset 0 0 0 1px var(--trc-selected-border) !important;
}

#root.trc-aforms-theme-blue .wq-Checkbox > input:checked + label *,
#root.trc-aforms-theme-blue .wq-Radio > input:checked + label * {
    color: var(--trc-selected-text) !important;
}

#root.trc-aforms-theme-blue .wq-Checkbox > input:checked + label::before {
    content: '✓' !important;
    background: var(--trc-blue-action) !important;
    border-color: var(--trc-blue-action) !important;
    color: #fff !important;
}

#root.trc-aforms-theme-blue .wq-Radio > input:checked + label::before {
    background: #fff !important;
    border-color: var(--trc-blue-action) !important;
}

#root.trc-aforms-theme-blue .wq-Radio > input:checked + label::after {
    content: '' !important;
    display: block !important;
    position: absolute;
    left: 19px;
    top: 50%;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--trc-blue-action) !important;
    transform: translateY(-50%) !important;
}

@media (hover:hover), screen and (-ms-high-contrast:active), screen and (-ms-high-contrast:none) {
    #root.trc-aforms-theme-blue .wq-Option > .wq--label:hover,
    #root.trc-aforms-theme-blue .wq-Checkbox > input:not(:checked) + label:hover,
    #root.trc-aforms-theme-blue .wq-Radio > input:not(:checked) + label:hover {
        background-color: var(--trc-blue-hover) !important;
        border-color: var(--trc-blue-action) !important;
    }

    #root.trc-aforms-theme-blue .wq-Option > .wq--input:checked + .wq--label:hover,
    #root.trc-aforms-theme-blue .wq-Option > .wq--select.wq-is-selected + .wq--label:hover,
    #root.trc-aforms-theme-blue .wq-Checkbox > input:checked + label:hover,
    #root.trc-aforms-theme-blue .wq-Radio > input:checked + label:hover {
        background-color: var(--trc-selected-bg-hover) !important;
        border-color: var(--trc-blue-action) !important;
    }
}

#root.trc-aforms-theme-blue .wq-TextArea:focus,
#root.trc-aforms-theme-blue .wq-TextInput:focus,
#root.trc-aforms-theme-blue .wq-Select > .wq--input:focus,
#root.trc-aforms-theme-blue .wq-Button:focus,
#root.trc-aforms-theme-blue .wq-Checkbox > input:focus + label,
#root.trc-aforms-theme-blue .wq-Radio > input:focus + label {
    animation: none;
    box-shadow: 0 0 0 4px var(--trc-blue-focus) !important;
}

#root.trc-aforms-theme-blue .wq-Checkbox > input:disabled + label,
#root.trc-aforms-theme-blue .wq-Radio > input:disabled + label {
    opacity: .48;
    cursor: not-allowed;
}

#root.trc-aforms-theme-blue .wq-for-action .wq-Button.wq-for-confirm,
#root.trc-aforms-theme-blue .wq-for-action .wq-Button.wq-for-submit {
    background: var(--trc-blue-action);
    border-color: var(--trc-blue-action);
    color: #fff;
}

#root.trc-aforms-theme-blue .wq-for-action .wq-Button.wq-for-confirm:hover,
#root.trc-aforms-theme-blue .wq-for-action .wq-Button.wq-for-submit:hover {
    background: #245d94;
    border-color: #245d94;
}
