:root {
          --brand-color: {{proton-brand-color}};
          --screen-width: {{screenwidth}};
        }

        article,aside,details,figcaption,figure,footer,header,hgroup,nav,section,summary {
            display: block;
        }

        audio,canvas,video {
            display: inline-block;
        }

        audio:not([controls]) {
            display: none;
            height: 0;
        }

        [hidden] {
            display: none;
        }

        @media print {
            body {
                font-family: -apple-system,Helvetica,Arial,sans-serif;
                font-weight: 400;
            }
        }

        @media not print {
            body {
                font: -apple-system-body;
            }
        }

        body {
            margin: 0;
            width: 100%;
            box-sizing: border-box;
            padding: 1rem;
            /* outside of tables we force wrap long text */
            word-break: break-word;
            background-color: white;
        }

        table * {
            /* inside of tables we use detault wrapping for best formatting (such as Amazon reciept emails) */
            word-break: initial;
        }

        table a, table p {
            word-break: break-word;
        }

        blockquote {
            padding: 0 0 0 0.6rem !important;
            margin: 0 !important;
            border: 1px solid #ccc !important;
            border-width: 0 0 0 1px !important;
            -webkit-margin-before: 1rem !important;
            -webkit-margin-after: 2rem !important;
            -webkit-margin-start: 0 !important;
            -webkit-margin-end: 0 !important;
        }

        blockquote blockquote blockquote {
            padding: 0 !important;
            border: none !important;
        }

        a:focus {
            outline: dotted thin;
        }

        a:active,a:hover {
            outline: 0;
        }

        a:link {
            color: var(--brand-color);
        }

        h1 {
            margin: .67em 0;
        }

        h2 {
            margin: .83em 0;
        }

        h3 {
            margin: 1em 0;
        }

        h4 {
            margin: 1.33em 0;
        }

        h5 {
            margin: 1.67em 0;
        }

        h6 {
            margin: 2.33em 0;
        }

        h1, h2, h3, h4, h5, h6 {
            line-height: 120%;
        }

        abbr[title] {
            border-bottom: 1px dotted;
        }

        mark {
            background: #ff0;
            color: #000;
        }

        p,pre {
            margin: 1em 0;
        }

        pre {
            white-space: pre;
            white-space: pre-wrap;
            word-wrap: break-word;
        }

        * {
            caret-color: red !important;

            /* debug only */
                /* margin: 0 !important;
                position: static !important;
                float: none !important; */
            /* end debug */
        }

        q {
            quotes: none;
        }

        q:after,q:before {
            content: none;
        }

        sub,sup {
            line-height: 0;
            position: relative;
            vertical-align: baseline;
        }

        sup {
            top: -.5em;
        }

        sub {
            bottom: -.25em;
        }

        dl,menu,ol,ul {
            margin: 1em 0;
        }

        dd {
            margin: 0 0 0 40px;
        }

        menu,ol,ul {
            padding: 0 0 0 40px;
        }

        nav ol,nav ul {
            list-style: none;
        }

        img {
            border: 0;
            -ms-interpolation-mode: bicubic;
            /* will prevent embed image improper sizing */
            /*    height: auto; remove it if test ok*/
        }

        /*img tag, doesn't have width attribute and style doesn't have width*/
        img:not([width], [style^='width'])[src] {
            max-width: 100%;
        }

        /*img.proton-embedded {*/
        /*    height: auto;*/
        /*}*/

        td {
            max-width: 100%;
        }

        table {
            /* Some html newsletters set up inline style for tables to take 100% of height and then add footer contents like Unsubscribe button and credits. This practice breaks MessageBodyViewController layout: webView does not include footer into contentSize because consider it to be scrollable. No matter what, webView will place footer below the bottomline of the view in order to make users scroll for it. Since we do not want webViews to be scrollable (in order to support conversation mode), we have to override this styling practice and let table take as much space as its content really needs and place the footer just below. */
            height: auto !important;
            min-height: auto !important;
        }

        svg:not(:root) {
            overflow: hidden;
        }

        figure,form {
            margin: 0;
        }

        fieldset {
            border: 1px solid silver;
            margin: 0 2px;
            padding: .35em .625em .75em;
        }

        legend {
            border: 0;
            padding: 0;
            white-space: normal;
        }

        *[style*="min-height"] {
            min-height: initial !important;
        }