:root {
    --color-background-modal: hsl(0deg 0% 98%);
}

#dev-emails-container {
    .header {
        position: fixed;
    }

    .config-options {
        text-align: right;
    }

    .emails {
        padding-top: 100px;
    }

    #smtp_form_status,
    .hide {
        display: none;
    }

    #forward_email_modal {
        .modal__content label {
            font-size: 1rem;
        }

        #forward_address_sections {
            margin-top: 20px;
        }

        & label.radio {
            padding-left: 20px;
        }

        & input[type="radio"] {
            float: left;
            width: auto;
            cursor: pointer;
            margin: 4px 0 0 -20px;
            line-height: normal;

            &:focus {
                outline: 1px dotted hsl(0deg 0% 20%);
                outline: 5px auto -webkit-focus-ring-color;
                outline-offset: -2px;
            }
        }

        & input[type="text"] {
            padding: 4px 6px;
            color: hsl(0deg 0% 33%);
            border-radius: 4px;
            border: 1px solid hsl(0deg 0% 80%);
            box-shadow: inset 0 1px 1px hsl(0deg 0% 0% / 7.5%);
            transition:
                border linear 0.2s,
                box-shadow linear 0.2s;
            margin-bottom: 10px;
            width: 206px;

            &:focus {
                border-color: hsl(206deg 80% 62% / 80%);
                outline: 0;
                box-shadow:
                    inset 0 1px 1px hsl(0deg 0% 0% / 7.5%),
                    0 0 8px hsl(206deg 80% 62% / 60%);
            }
        }
    }

    & input[type="checkbox"] {
        width: auto;
        cursor: pointer;

        &:focus {
            outline: 1px dotted hsl(0deg 0% 20%);
            outline: 5px auto -webkit-focus-ring-color;
            outline-offset: -2px;
        }
    }
}