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

#dev-email-log-container {
    .dev-email-log-header {
        position: fixed;
        font-family: sans-serif;
        font-size: 14px;
    }

    .dev-email-log-header,
    .dev-forward-email-alert {
        padding: 10px;
        border: 1px solid hsl(190deg 65% 84%);
        border-radius: 4px;
        background-color: hsl(200deg 65% 91%);
        color: hsl(200deg 50% 45%);
    }

    .dev-email-log-actions,
    .dev-forward-email-alert {
        & a {
            color: hsl(200deg 50% 45%);

            &:hover {
                color: hsl(200deg 56% 33%);
            }
        }
    }

    .dev-email-log-actions {
        padding-bottom: 5px;
    }

    .dev-email-log-text-only {
        text-align: right;
    }

    .dev-email-log-content {
        padding-top: 100px;
        max-width: 1000px;

        & h4 {
            color: hsl(0deg 0% 20%);
            margin: 2px 10px;
        }

        .email-text,
        .email-html {
            margin: 10px;
        }

        .email-text pre {
            font-family: Monaco, Menlo, Consolas, "Courier New", monospace;
            color: hsl(0deg 0% 20%);
            display: block;
            padding: 9.5px;
            margin: 0 0 10px;
            font-size: 13px;
            line-height: 20px;
            word-break: break-all;
            word-wrap: break-word;
            white-space: pre-wrap;
            background-color: hsl(0deg 0% 96%);
            border: 1px solid hsl(0deg 0% 75%);
            border-radius: 4px;
        }
    }

    #smtp_form_status,
    .hide {
        display: none;
    }

    #forward_email_modal {
        .modal__content label {
            font-size: 1rem;
            display: block;
            margin-bottom: 5px;
            cursor: pointer;
        }

        #forward_address_sections,
        .dev-forward-email-alert {
            margin: 5px 0;
        }

        & 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-color 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;
        }
    }
}