* {
    box-sizing: border-box;
}

*:active {
    outline: none;
}

*:focus {
    outline: none;
    box-shadow: var(--const-global-focus);
}

input,
button {
    font-family: inherit;
    font-size: inherit;
}

.sr,
.sr button {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    white-space: nowrap;
}

.hidden,
[hidden] {
    display: none;
}

.invisible {
    visibility: hidden;
}


q2-radio {
    margin-top: var(--tct-radio-margin-vertical, var(--tct-scale-2, 10px));
    margin-right: var(--tct-radio-margin-horizontal, var(--tct-scale-3, 15px));
    display: block;
}

q2-radio .radio-container {
    margin-bottom: var(--tct-radio-margin-vertical, var(--tct-scale-2, 10px));
}

q2-radio .radio-container svg {
    border-radius: 50%;
    transition: box-shadow var(--tct-tween-1, var(--app-tween-1, 0.2s ease));
    outline: 0;
    margin: 2px var(--tct-scale-1, var(--app-scale-1, 5px)) 2px 2px;
}

q2-radio .radio-container circle:nth-child(1) {
    stroke-width: 2;
    stroke: var(--tct-radio-stroke-color, var(--tct-gray-l1, var(--app-gray-l1, #cccccc)));
}

q2-radio .radio-container input:focus ~ label.radio-label svg {
    box-shadow: var(--tct-global-focus, var(--const-global-focus, 0 0 0 2px #33b4ff));
}

q2-radio .radio-container input:checked ~ label.radio-label circle:nth-child(1) {
    background-color: var(--tct-radio-checked-bg, transparent);
    stroke: var(
        --tct-radio-checked-stroke-color,
        var(--tct-radio-stroke-color, var(--app-gray-l1, #cccccc))
    );
}

q2-radio input:checked + label .q2-radio-label-content {
    font-weight: var(--tct-checkbox-selected-font-weight, 600);
    letter-spacing: var(--tct-checkbox-selected-letter-spacing, 0.25);
}

q2-radio .radio-container input:focus ~ label.radio-label circle:nth-child(1) {
    stroke: var(
        --tct-radio-focus-stroke-color,
        var(--tct-checkbox-check-stroke-color, var(--t-checkbox-fill, #2e2e2e))
    );
}

q2-radio .radio-container input:checked ~ label.radio-label circle:nth-child(2) {
    fill: var(
        --tct-radio-checked-fill,
        var(--tct-checkbox-check-stroke-color, var(--t-checkbox-fill, #2e2e2e))
    );
}

q2-radio .radio-tile input:disabled ~ label.radio-label,
q2-radio .radio-container input:disabled ~ label.radio-label {
    cursor: not-allowed;
    opacity: var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4));
}

q2-radio .radio-container label.radio-label {
    font-weight: var(--tct-radio-font-weight, var(--tct-checkbox-font-weight, 400));
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    margin-right: 1rem;
}

q2-radio .radio-tile {
    flex-basis: 100px;
    flex-grow: 0;
    flex-wrap: wrap;
}

q2-radio .radio-tile label {
    align-items: center;
    border-radius: 3px;
    border: 2px solid var(--tct-radio-stroke-color, var(--app-gray-l1, #cccccc));
    cursor: pointer;
    display: block;
    padding: 1rem;
    position: relative;
    text-align: center;
    transition: border-color var(--tct-tween-1, var(--app-tween-1, 0.2s ease));
    white-space: nowrap;
}

q2-radio .radio-tile input:focus + label {
    border-color: #0079c1;
    box-shadow: var(--tct-global-focus, var(--const-global-focus, 0 0 0 2px #33b4ff));
}

q2-radio .radio-tile input:checked + label {
    border-color: var(--tct-checkbox-check-stroke-color, var(--t-checkbox-fill, #2e2e2e));
    box-shadow: inset 0 0 0 2px #ffffff;
}

q2-radio .radio-tile input:checked + label:after {
    border-bottom-width: 3px;
    border-bottom: 5px solid #0079c1;
    border-left-width: 5px;
    border-left: 8px solid transparent;
    border-right-width: 5px;
    border-right: 8px solid transparent;
    bottom: 0;
    content: '';
    height: 0;
    left: 50%;
    margin-left: -5px;
    position: absolute;
    width: 0;
}