.page-wrapper {
    .custom-radio {
        cursor: pointer;
        font-size: 14px;

        input[type="radio"] {
            position: absolute;
            opacity: 0;

            +.radio-label {
                position: relative;

                &:before {
                    content: '';
                    border-radius: 100%;
                    border: 2px solid var(--Stroke);
                    display: inline-block;
                    width: 18px;
                    height: 18px;
                    position: relative;
                    top: -2px;
                    margin-right: 8px;
                    vertical-align: top;
                    cursor: pointer;
                    text-align: center;
                    transition: all .25s ease;
                }

                &.green {
                    &:before {
                        border: 2px solid var(--Green) !important;
                    }
                }

                &.yellow {
                    &:before {
                        border: 2px solid var(--Yellow) !important;
                    }
                }

                &.red {
                    &:before {
                        border: 2px solid var(--Red) !important;
                    }
                }
            }

            &:hover {
                +.radio-label {
                    &:before {
                        border-color: var(--Main2);
                    }
                }
            }

            &:checked {
                +.radio-label {
                    &:before {
                        border-color: var(--Main2);
                        background-color: var(--Main2);
                        box-shadow: inset 0 0 0 2.5px #fff;
                    }

                    &.green {
                        &:before {
                            border-color: var(--Green) !important;
                            background-color: var(--Green) !important;
                        }
                    }

                    &.yellow {
                        &:before {
                            border-color: var(--Yellow) !important;
                            background-color: var(--Yellow) !important;
                        }
                    }

                    &.red {
                        &:before {
                            border-color: var(--Red) !important;
                            background-color: var(--Red) !important;
                        }
                    }
                }
            }

            &:focus {
                +.radio-label {
                    &:before {
                        outline: none;
                        border-color: var(--Main2);
                    }
                }
            }

            &:disabled {
                +.radio-label {
                    &:before {
                        border-color: var(--Stroke);
                        opacity: 0.5;
                    }
                }
            }

            +.radio-label {
                &:empty {
                    &:before {
                        margin-right: 0;
                    }
                }
            }
        }
    }
}