echohtp · October 22, 2020 18:53
diff --git a/index.html b/index.html
 <html>
 <head>
    <title>Gmail loading animation Fall 2020</title>
    <meta name="description" content="This is the HTML and CSS for Google's Gmail loading icon, Fall 2020.">

    <style>
        body {
            margin: 0;
            width: 100%;
            height: 100%
        }

        body,
        td,
        input,
        textarea,
        select,
        #loading {
            font-family: arial, sans-serif
        }

        input,
        textarea,
        select {
            font-size: 100%
        }

        #loading {
            position: absolute;
            width: 100%;
            height: 100%;
            z-index: 1000;
            background-color: #fff
        }

        .msg {
            color: #757575;
            font-size: 20px;
            letter-spacing: .2px;
            line-height: 20px;
            text-align: center
        }

        #nlpt {
            animation: a-s .5s 2.5s 1 forwards;
            background-color: #f1f1f1;
            height: 4px;
            margin: 56px auto 20px;
            opacity: 0;
            overflow: hidden;
            position: relative;
            width: 300px
        }

        #nlpt::before {
            animation: a-lb 20s 3s linear forwards;
            background-color: #db4437;
            content: '';
            display: block;
            height: 100%;
            position: absolute;
            transform: translateX(-300px);
            width: 100%
        }

        @keyframes a-lb {
            0% {
                transform: translateX(-300px)
            }

            5% {
                transform: translateX(-240px)
            }

            15% {
                transform: translateX(-30px)
            }

            25% {
                transform: translateX(-30px)
            }

            30% {
                transform: translateX(-20px)
            }

            45% {
                transform: translateX(-20px)
            }

            50% {
                transform: translateX(-15px)
            }

            65% {
                transform: translateX(-15px)
            }

            70% {
                transform: translateX(-10px)
            }

            95% {
                transform: translateX(-10px)
            }

            100% {
                transform: translateX(-5px)
            }
        }

        @keyframes a-s {
            100% {
                opacity: 1
            }
        }

        @keyframes a-h {
            100% {
                opacity: 0
            }
        }

        @keyframes a-nt {
            100% {
                transform: none
            }
        }

        @keyframes a-e {
            43% {
                animation-timing-function: cubic-bezier(.8, 0, .2, 1);
                transform: scale(.75)
            }

            60% {
                animation-timing-function: cubic-bezier(.8, 0, 1, 1);
                transform: translateY(-16px)
            }

            77% {
                animation-timing-function: cubic-bezier(.16, 0, .2, 1);
                transform: none
            }

            89% {
                animation-timing-function: cubic-bezier(.8, 0, 1, 1);
                transform: translateY(-5px)
            }

            100% {
                transform: none
            }
        }

        @keyframes a-ef {
            24% {
                animation-timing-function: cubic-bezier(.8, 0, .6, 1);
                transform: scaleY(.42)
            }

            52% {
                animation-timing-function: cubic-bezier(.63, 0, .2, 1);
                transform: scaleY(.98)
            }

            83% {
                animation-timing-function: cubic-bezier(.8, 0, .84, 1);
                transform: scaleY(.96)
            }

            100% {
                transform: none
            }
        }

        @keyframes a-efs {
            24% {
                animation-timing-function: cubic-bezier(.8, 0, .6, 1);
                opacity: .3
            }

            52% {
                animation-timing-function: cubic-bezier(.63, 0, .2, 1);
                opacity: .03
            }

            83% {
                animation-timing-function: cubic-bezier(.8, 0, .84, 1);
                opacity: .05
            }

            100% {
                opacity: 0
            }
        }

        @keyframes a-es {
            24% {
                animation-timing-function: cubic-bezier(.8, 0, .6, 1);
                transform: rotate(-25deg)
            }

            52% {
                animation-timing-function: cubic-bezier(.63, 0, .2, 1);
                transform: rotate(-42.5deg)
            }

            83% {
                animation-timing-function: cubic-bezier(.8, 0, .84, 1);
                transform: rotate(-42deg)
            }

            100% {
                transform: rotate(-43deg)
            }
        }

        .la-c {
            animation: 3.6s cubic-bezier(.03, 0, .17, .67)kf-e;
            border-radius: 22px 22px 15px 15px;
            height: 165px;
            margin: 0 auto;
            overflow: hidden;
            position: relative;
            width: 220px
        }

        .la-c *,
        .la-i,
        .la-i * {
            height: 100%;
            position: absolute;
            width: 100%
        }

        .la-i {
            animation: .9s linear 1.2s kf-v;
            opacity: 0
        }

        .la-r {
            transform: scale(-1, 1)
        }

        .la-s {
            background: #f1f3f4;
            height: 142px;
            left: 0;
            top: 41px;
            width: 50px
        }

        .la-t {
            background: #f1f3f4;
            height: 65px;
            left: 0;
            top: 19px;
            transform: skew(0, 37deg);
            width: 110px
        }

        .la-t>div {
            background: #ea4335;
            left: 50px;
            width: 60px
        }

        .la-m {
            border: 0 solid #fff;
            border-radius: 72px 0 0 0;
            border-width: 50px 0 0 50px;
            height: 22px;
            left: -31px;
            top: -36px;
            transform: rotate(37deg);
            width: 116px
        }

        .la-i .la-m {
            border-color: #fafbfb
        }

        @keyframes kf-e {
            0% {
                opacity: 0;
                transform: scale(.72)
            }

            33% {
                animation-timing-function: cubic-bezier(.21, .02, .03, .92);
                opacity: 1;
                transform: scale(.8)
            }

            50% {
                animation-timing-function: linear;
                transform: scale(.96)
            }
        }

        @keyframes kf-c {
            25% {
                animation-timing-function: cubic-bezier(.17, .98, .38, 1);
                transform: scale(1.1)
            }

            to {
                transform: none
            }
        }

        @keyframes kf-s {
            35% {
                animation-timing-function: cubic-bezier(.17, .34, .69, .78);
                transform: scale(.88)
            }

            to {
                transform: none
            }
        }

        @keyframes kf-v {
            66% {
                animation-timing-function: cubic-bezier(.3, 0, .83, .83);
                opacity: 1
            }
        }

         .invfr {
            position: absolute;
            left: 0;
            top: 0;
            z-index: -1;
            width: 0;
            height: 0;
            border: 0
        }

        .msgb {
            position: absolute;
            right: 0;
            font-size: 12px;
            font-weight: normal;
            color: #000;
            padding: 20px
        }


        .gb_3e {
            background: rgba(60, 64, 67, 0.9);
            -webkit-border-radius: 4px;
            border-radius: 4px;
            color: #ffffff;
            font: 500 12px "Roboto", arial, sans-serif;
            letter-spacing: 0.8px;
            line-height: 16px;
            margin-top: 4px;
            min-height: 14px;
            padding: 4px 8px;
            position: absolute;
            z-index: 1000;
            -webkit-font-smoothing: antialiased;
        }

        .gb_a-a {
            width: 100%;
            height: 100%;
            border: 0;
            overflow: hidden;
        }

        .gb_a.gb_b-b-c {
            position: absolute;
            top: 0;
            left: 0;
            background-color: #fff;
        }

        .gb_a.gb_b-b {
            position: absolute;
            top: 0;
            left: 0;
            background-color: #fff;
            border: 1px solid #acacac;
            width: auto;
            padding: 0;
            z-index: 1001;
            overflow: auto;
            -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 4px 16px;
            -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 4px 16px;
            box-shadow: rgba(0, 0, 0, 0.2) 0 4px 16px;
            -webkit-transition: top 0.5s ease-in-out;
            -webkit-transition: top 0.5s ease-in-out;
            transition: top 0.5s ease-in-out;
        }

        .gb_a-d {
            position: absolute;
            z-index: 1002;
        }

        .gb_a.gb_b-b-e {
            font-size: 0;
            padding: 0;
        }

        .gb_a.gb_b-b-f {
            height: 0;
            margin: 0;
        }

        .gb_a.gb_b-b-f-g,
        .gb_a.gb_b-b-h {
            display: none;
        }

        .gb_Na~.gb_3a,
        .gb_Na~.gb_4a {
            left: auto;
            right: 11.5px;
        }

        .gb_5a {
            outline: none;
            -webkit-transform: translateZ(0);
            transform: translateZ(0);
        }

        .gb_l.gb_5a {
            -webkit-border-radius: 8px;
            border-radius: 8px;
            margin-left: 12px;
        }

        @media screen and (min-width: 361px) {
            .gb_l.gb_5a {
                width: 354px;
            }
        }

        @media screen and (max-width: 361px) {
            .gb_l.gb_5a {
                width: calc(100vw - 12px * 2);
            }
        }

        .gb_l.gb_5a.gb_6a {
            max-height: -webkit-calc(100vh - 62px - 100px);
            max-height: calc(100vh - 62px - 100px);
        }

        .gb_l.gb_5a.gb_7a {
            max-height: -webkit-calc(100vh - 62px - 15px - 100px);
            max-height: calc(100vh - 62px - 15px - 100px);
        }

        .gb_l.gb_5a.gb_8a {
            background-color: #2d2e30;
        }

        .gb_9a.gb_ab {
            color: #5f6368;
            font: 400 12px / 16px Roboto, RobotoDraft, Helvetica, Arial, sans-serif;
        }

        .gb_bb.gb_9a.gb_ab {
            background-color: rgba(138, 180, 248, 0.24);
            color: #e8eaed;
        }

        .gb_cb,
        #gb a.gb_cb.gb_cb,
        .gb_db a,
        #gb .gb_db.gb_db a {
            color: #36c;
            text-decoration: none;
        }

        .gb_9a>.gb_cb,
        #gb .gb_9a>a.gb_cb.gb_cb {
            color: #0070ff;
            font: inherit;
            font-weight: 500;
            outline: 0;
        }

        .gb_bb.gb_9a>.gb_cb,
        #gb .gb_bb.gb_9a>a.gb_cb.gb_cb {
            color: #8ab4f8;
        }

        .gb_cb:active,
        #gb a.gb_cb.gb_cb:active,
        .gb_cb:hover,
        #gb a.gb_cb.gb_cb:hover,
        .gb_db a:active,
        #gb .gb_db a:active,
        .gb_db a:hover,
        #gb .gb_db a:hover,
        #gb .gb_9a>a.gb_cb.gb_cb:focus {
            text-decoration: underline;
        }

        .gb_eb {
            margin: 20px;
            white-space: nowrap;
        }

        .gb_l>.gb_eb {
            margin: 20px 33px;
        }

        .gb_fb,
        .gb_gb {
            display: inline-block;
            vertical-align: top;
        }

        .gb_fb.gb_hb,
        .gb_gb.gb_ib {
            vertical-align: middle;
        }

        .gb_l .gb_fb,
        .gb_l .gb_gb {
            display: block;
            vertical-align: top;
            text-align: center;
        }

        .gb_hb {
            cursor: default;
        }

        .gb_l .gb_fb {
            margin-bottom: 10px;
            position: relative;
            height: 86px;
            width: 86px;
        }

        .gb_jb {
            -webkit-border-radius: 50%;
            border-radius: 50%;
            overflow: hidden;
            -webkit-transform: translateZ(0);
        }

        .gb_Ma {
            border: none;
            margin-right: 6px;
            vertical-align: top;
            height: 80px;
            width: 80px;
        }

        .gb_kb {
            margin-bottom: 11px;
            margin-top: 4px;
        }

        @media screen and (min-width: 361px) {

            .gb_l .gb_fb,
            .gb_kb {
                margin-left: 101px;
            }
        }

        @media screen and (max-width: 361px) {

            .gb_l .gb_fb,
            .gb_kb {
                margin-left: calc((calc(100vw - 12px * 2) - 33px * 2 - 86px) / 2);
            }
        }

        .gb_lb.gb_lb {
            fill: #1a73e8;
        }

        .gb_8a .gb_lb {
            fill: #8ab4f8;
        }

        .gb_l .gb_mb.gb_Ma {
            position: relative;
            left: 2px;
            margin-right: 10px;
            top: 2px;
            height: 76px;
            width: 76px;
        }

        .gb_l .gb_nb {
            background: #fff;
            bottom: 0;
            position: absolute;
            right: 0;
            overflow: visible;
            height: 32px;
            width: 32px;
        }

        .gb_l.gb_8a .gb_nb {
            background: #2d2e30;
        }

        .gb_ob {
            bottom: 0;
            -webkit-box-shadow: 0 1px 1px 0 rgba(65, 69, 73, 0.3), 0 1px 3px 1px rgba(65, 69, 73, 0.15);
            box-shadow: 0 1px 1px 0 rgba(65, 69, 73, 0.3), 0 1px 3px 1px rgba(65, 69, 73, 0.15);
            margin: 0 2.5px 3px;
            outline: 0;
            position: absolute;
            right: 0;
            height: 26px;
            width: 26px;
        }

        .gb_ob:hover {
            background-color: #f8faff;
        }

        .gb_ob:focus,
        .gb_ob:hover:focus {
            background-color: #f4f8ff;
        }

        .gb_ob:active,
        .gb_ob:focus:active {
            background-color: #f4f8ff;
            -webkit-box-shadow: 0 1px 3px 0 rgba(60, 64, 67, 0.3), 0 4px 8px 3px rgba(60, 64, 67, 0.15);
            box-shadow: 0 1px 3px 0 rgba(60, 64, 67, 0.3), 0 4px 8px 3px rgba(60, 64, 67, 0.15);
        }

        .gb_ob:hover>svg.gb_pb,
        .gb_ob:focus>svg.gb_pb,
        .gb_ob:active>svg.gb_pb {
            fill: #1a73e8;
        }

        .gb_qb {
            font-weight: bold;
            margin: -4px 0 1px 0;
            text-overflow: ellipsis;
            overflow: hidden;
        }

        .gb_l .gb_qb {
            color: #202124;
            font: 500 16px/22px Google Sans, Roboto, RobotoDraft, Helvetica, Arial, sans-serif;
            letter-spacing: 0.29px;
            margin: 0;
            text-align: center;
            text-overflow: ellipsis;
            overflow: hidden;
        }

        .gb_l.gb_8a .gb_qb {
            color: #e8eaed;
        }

        .gb_sb {
            color: #666;
            text-overflow: ellipsis;
            overflow: hidden;
        }

        .gb_l .gb_sb {
            color: #5f6368;
            font: 400 14px/19px Roboto, RobotoDraft, Helvetica, Arial, sans-serif;
            letter-spacing: normal;
            text-align: center;
            text-overflow: ellipsis;
            overflow: hidden;
        }

        .gb_l.gb_8a .gb_sb {
            color: #e8eaed;
        }

        .gb_ib>.gb_sb {
            color: #000;
            font-weight: bold;
            margin: -4px 0 1px 0;
            text-overflow: ellipsis;
            overflow: hidden;
        }

        .gb_tb {
            color: #666;
            font-style: italic;
            font-weight: 500;
            margin: 4px 0;
            overflow: hidden;
        }

        .gb_ub {
            color: #5f6368;
            font-family: Roboto, RobotoDraft, Helvetica, Arial, sans-serif;
            font-size: 14px;
            line-height: 19px;
            margin-top: 4px;
            text-align: center;
        }

        .gb_8a .gb_ub {
            color: #9aa0a6;
        }

        .gb_vb {
            font-weight: 500;
        }

        .gb_wb.gb_wb {
            background-color: #ffffff;
            border: 1px solid #dadce0;
            -webkit-border-radius: 100px;
            border-radius: 100px;
            color: #3c4043;
            display: inline-block;
            font: 500 14px/16px Google Sans, Roboto, RobotoDraft, Helvetica, Arial, sans-serif;
            letter-spacing: 0.25px;
            margin: 16px 0 0;
            max-width: 254px;
            outline: 0;
            padding: 8px 16px;
            text-align: center;
            text-decoration: none;
            text-overflow: ellipsis;
            overflow: hidden;
        }

        .gb_8a .gb_wb.gb_wb {
            background-color: #2d2e30;
            border: 1px solid #5f6368;
            color: #e8eaed;
        }

        .gb_wb:hover {
            background-color: #f7f8f8;
        }

        .gb_wb:focus,
        .gb_wb:hover:focus {
            background-color: #f4f4f4;
        }

        .gb_wb:active,
        .gb_wb:focus:active {
            background-color: #e8e8e9;
            border-color: transparent;
            -webkit-box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.3), 0 2px 6px 2px rgba(60, 64, 67, 0.15);
            box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.3), 0 2px 6px 2px rgba(60, 64, 67, 0.15);
        }

        .gb_xb {
            color: #5f6368;
            margin: 14px 33px;
            text-align: center;
            white-space: normal;
        }

        .gb_8a .gb_xb {
            color: #e8eaed;
        }

        .gb_yb.gb_yb {
            -webkit-border-radius: 4px;
            border-radius: 4px;
            color: #5f6368;
            display: inline-block;
            font: 400 12px / 16px Roboto, RobotoDraft, Helvetica, Arial, sans-serif;
            outline: 0;
            padding: 4px 8px;
            text-decoration: none;
            text-align: center;
            white-space: normal;
        }

        .gb_8a .gb_yb.gb_yb {
            border: 1px solid transparent;
            color: #e8eaed;
        }

        .gb_yb:hover {
            background-color: #f7f8f8;
        }

        .gb_yb:focus,
        .gb_yb:hover:focus {
            background-color: #f4f4f4;
        }

        .gb_yb:active,
        .gb_yb:active:focus {
            background-color: #e8e8e9;
        }

        .gb_gb .gb_3 {
            background: #4d90fe;
            border-color: #3079ed;
            font-weight: bold;
            margin: 10px 0 0 0;
            color: #fff;
        }

        #gb .gb_gb a.gb_3.gb_3 {
            color: #fff;
        }

        .gb_gb .gb_3:hover {
            background: #357ae8;
            border-color: #2f5bb7;
        }

        .gb_zb .gb_3a {
            border-bottom-color: #fef9db;
        }

        .gb_ab {
            background: #fef9db;
            font-size: 11px;
            padding: 10px 20px;
            white-space: normal;
        }

        .gb_9a.gb_ab {
            background: #e8f0fe;
            -webkit-border-radius: 4px;
            border-radius: 4px;
            margin: 4px;
            padding: 4px 8px;
            text-align: center;
        }

        .gb_9a.gb_ab>#gbpbt>span {
            white-space: nowrap;
            font-weight: 500;
        }

        .gb_ab b,
        .gb_cb {
            white-space: nowrap;
        }

        .gb_Ab.gb_Ab {
            background-color: #ffffff;
            color: #3c4043;
            display: table;
            font: 500 14px/16px Google Sans, Roboto, RobotoDraft, Helvetica, Arial, sans-serif;
            letter-spacing: 0.25px;
            outline: 0;
            padding: 14px 41px;
            text-align: center;
            text-decoration: none;
            width: 100%;
        }

        .gb_8a .gb_Ab.gb_Ab {
            background-color: #2d2e30;
            border: 1px solid transparent;
            color: #e8eaed;
            width: 270px;
        }

        .gb_Ab:hover {
            background-color: #f7f8f8;
        }

        .gb_Ab:focus,
        .gb_Ab:hover:focus {
            background-color: #f4f4f4;
        }

        .gb_Ab:active,
        .gb_Ab:focus:active {
            background-color: #e8e8e9;
        }

        .gb_Bb {
            border: none;
            display: table-cell;
            vertical-align: middle;
            height: 20px;
            width: 20px;
        }

        .gb_ob>svg.gb_pb,
        .gb_Bb>svg.gb_Cb,
        .gb_Db>svg.gb_Eb {
            color: #5f6368;
            fill: currentColor;
        }

        .gb_8a .gb_Db>svg.gb_Eb {
            fill: #9aa0a6;
        }

        .gb_8a .gb_ob {
            border: 1px solid transparent;
            -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15);
            box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15);
        }

        .gb_8a .gb_ob>svg.gb_pb,
        .gb_8a .gb_Bb>svg.gb_Cb {
            color: #e8eaed;
            fill: currentColor;
        }

        .gb_8a .gb_ob:hover>svg.gb_pb,
        .gb_8a .gb_ob:focus>svg.gb_pb,
        .gb_8a .gb_ob:focus:hover>svg.gb_pb,
        .gb_8a .gb_ob:active>svg.gb_pb {
            fill: #8ab4f8;
        }

        .gb_8a .gb_ob:hover {
            background-color: #353639;
            -webkit-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.3), 0 6px 10px 4px rgba(0, 0, 0, 0.15);
            box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.3), 0 6px 10px 4px rgba(0, 0, 0, 0.15);
        }

        .gb_8a .gb_ob:focus,
        .gb_8a .gb_ob:focus:hover {
            background-color: #353639;
            border: 1px solid #5f6368;
            -webkit-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.3), 0 6px 10px 4px rgba(0, 0, 0, 0.15);
            box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.3), 0 6px 10px 4px rgba(0, 0, 0, 0.15);
        }

        .gb_8a .gb_ob:active {
            background-color: rgba(255, 255, 255, 0.12);
            -webkit-box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.3), 0 8px 12px 6px rgba(0, 0, 0, 0.15);
            box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.3), 0 8px 12px 6px rgba(0, 0, 0, 0.15);
        }

        .gb_Fb {
            display: table-cell;
            padding: 0 74px 0 16px;
            text-align: left;
            vertical-align: middle;
            white-space: normal;
        }

        .gb_Hb {
            border-bottom: 1px solid #e8eaed;
            border-top: 1px solid #e8eaed;
            padding: 0 17px;
            text-align: center;
        }

        .gb_8a .gb_Hb {
            border-bottom: 1px solid #5f6368;
            border-top: 1px solid #5f6368;
        }

        .gb_Ib.gb_Ib,
        .gb_Jb.gb_Jb {
            background-color: #ffffff;
            border: 1px solid #dadce0;
            -webkit-border-radius: 4px;
            border-radius: 4px;
            display: inline-block;
            font: 500 14px/16px Google Sans, Roboto, RobotoDraft, Helvetica, Arial, sans-serif;
            letter-spacing: 0.15px;
            margin: 16px;
            outline: 0;
            padding: 10px 24px;
            text-align: center;
            text-decoration: none;
            white-space: normal;
        }

        .gb_Ib.gb_Ib {
            color: #3c4043;
        }

        .gb_Jb.gb_Jb {
            color: #1a73e8;
        }

        .gb_8a .gb_Jb.gb_Jb,
        .gb_8a .gb_Ib.gb_Ib {
            background-color: #2d2e30;
            border: 1px solid #5f6368;
            color: #e8eaed;
        }

        .gb_Ib:hover {
            background-color: #f7f8f8;
        }

        .gb_Ib:focus,
        .gb_Ib:hover:focus {
            background-color: #f4f4f4;
        }

        .gb_Ib:active,
        .gb_Ib:active:focus {
            background-color: #e8e8e9;
            border-color: transparent;
            -webkit-box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.3), 0 2px 6px 2px rgba(60, 64, 67, 0.15);
            box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.3), 0 2px 6px 2px rgba(60, 64, 67, 0.15);
        }

        .gb_Jb:hover {
            background-color: #f8fbff;
            border-color: #cce0fc;
        }

        .gb_Jb:focus,
        .gb_Jb:hover:focus {
            background-color: #f4f8ff;
            border-color: #c9ddfc;
        }

        .gb_Jb:active,
        .gb_Jb:active:focus {
            background-color: #ecf3fe;
            border-color: transparent;
            -webkit-box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.3), 0 2px 6px 2px rgba(60, 64, 67, 0.15);
            box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.3), 0 2px 6px 2px rgba(60, 64, 67, 0.15);
        }

        .gb_Nb {
            border-top: 1px solid #e8eaed;
        }

        .gb_8a .gb_Nb {
            border-top: 1px solid #5f6368;
        }

        .gb_l.gb_5a {
            overflow-y: auto;
            overflow-x: hidden;
        }

        .gb_Qb {
            border-top: 1px solid #ccc;
            border-top-color: rgba(0, 0, 0, 0.2);
            display: block;
            outline-offset: -2px;
            padding: 10px 20px;
            position: relative;
            white-space: nowrap;
        }

        .gb_Rb>.gb_Qb {
            border: none;
            cursor: pointer;
            height: 35px;
            outline: 0;
            padding: 12px 33px 13px;
        }

        .gb_Sb .gb_Qb:focus .gb_Tb {
            outline: 1px dotted #fff;
        }

        .gb_Qb:hover {
            background: #eee;
        }

        .gb_Rb>.gb_Qb:hover {
            background-color: #f7f8f8;
        }

        .gb_Rb>.gb_Qb:focus,
        .gb_Rb>.gb_Qb:hover:focus {
            background-color: #f4f4f4;
        }

        .gb_Rb>.gb_Qb:active,
        .gb_Rb>.gb_Qb:focus:active {
            background-color: #e8e8e9;
        }

        .gb_8a .gb_Ub:hover,
        .gb_8a .gb_Ab:hover,
        .gb_8a .gb_yb:hover,
        .gb_8a .gb_Rb>.gb_Qb:hover {
            background-color: rgba(255, 255, 255, 0.04);
            border: 1px solid transparent;
        }

        .gb_8a .gb_Ib:hover,
        .gb_8a .gb_wb:hover {
            background-color: rgba(232, 234, 237, 0.04);
            border: 1px solid #5f6368;
        }

        .gb_8a .gb_Ub:focus,
        .gb_8a .gb_Ub:hover:focus,
        .gb_8a .gb_wb:focus,
        .gb_8a .gb_wb:hover:focus,
        .gb_8a .gb_Ab:focus,
        .gb_8a .gb_Ab:hover:focus,
        .gb_8a .gb_Ib:focus,
        .gb_8a .gb_Ib:hover:focus,
        .gb_8a .gb_Rb>.gb_Qb:focus,
        .gb_8a .gb_Rb>.gb_Qb:hover:focus {
            background-color: rgba(232, 234, 237, 0.12);
            border: 1px solid #e8eaed;
        }

        .gb_8a .gb_yb:focus,
        .gb_8a .gb_yb:hover:focus {
            background-color: rgba(232, 234, 237, 0.12);
        }

        .gb_8a .gb_Ub:active,
        .gb_8a .gb_Ub:focus:active,
        .gb_8a .gb_Ab:active,
        .gb_8a .gb_Ab:focus:active,
        .gb_8a .gb_yb:active,
        .gb_8a .gb_yb:active:focus,
        .gb_8a .gb_Rb>.gb_Qb:active,
        .gb_8a .gb_Rb>.gb_Qb:focus:active {
            background-color: rgba(232, 234, 237, 0.1);
            border: 1px solid transparent;
        }

        .gb_Vb {
            overflow-x: hidden;
        }

        .gb_8a .gb_Rb>.gb_Qb {
            border: 1px solid transparent;
        }

        .gb_8a .gb_Ib:active,
        .gb_8a .gb_Ib:active:focus,
        .gb_8a .gb_wb:active,
        .gb_8a .gb_wb:focus:active {
            background-color: rgba(232, 234, 237, 0.1);
            border: 1px solid #5f6368;
        }

        .gb_Qb[selected="true"] {
            overflow: hidden;
        }

        .gb_Rb>.gb_Qb[selected="true"] {
            background-color: rgba(60, 64, 67, 0.1);
        }

        .gb_8a .gb_Rb>.gb_Qb[selected="true"] {
            background-color: rgba(255, 255, 255, 0.12);
        }

        .gb_Qb[selected="true"]>.gb_Wb {
            display: block;
            position: absolute;
            z-index: 2;
        }

        .gb_Wb::-moz-focus-inner {
            border: 0;
        }

        .gb_Wb {
            background-color: transparent;
            border: none;
            -webkit-border-radius: 4px;
            border-radius: 4px;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            color: #fff;
            cursor: pointer;
            display: inline-block;
            font-family: Google Sans, Roboto, RobotoDraft, Helvetica, Arial, sans-serif;
            font-size: 14px;
            font-weight: 500;
            letter-spacing: 0.25px;
            line-height: 16px;
            margin-bottom: 1px;
            min-height: 36px;
            min-width: 86px;
            outline: none;
            padding: 10px 24px;
            text-align: center;
            text-decoration: none;
            top: 16px;
            width: auto;
        }

        .gb_Xb.gb_Zb {
            background-color: #1a73e8;
            color: #fff;
            margin-left: 0;
            margin-right: 12px;
            margin-top: 14px;
        }

        .gb_8a .gb_Xb.gb_Zb {
            background-color: #8ab4f8;
            color: #2d2e30;
        }

        .gb_Xb.gb_0b {
            background-color: #ffffff;
            border: 1px solid #dadce0;
            color: #3c4043;
            margin-left: 0;
            margin-right: 0;
            margin-top: 11px;
        }

        .gb_8a .gb_Xb.gb_0b {
            background-color: rgba(218, 220, 224, 0.01);
            border: 1px solid #5f6368;
            color: #e8eaed;
        }

        .gb_Wb.gb_0b:hover {
            background-color: #f7f8f8;
        }

        .gb_Wb.gb_0b:focus,
        .gb_Wb.gb_0b:hover:focus {
            background-color: #f4f4f4;
        }

        .gb_Wb.gb_0b:active {
            background-color: #f4f4f4;
            border: 1px solid #5f6368;
            -webkit-box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.3), 0 1px 3px 1px rgba(60, 64, 67, 0.15);
            box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.3), 0 1px 3px 1px rgba(60, 64, 67, 0.15);
        }

        .gb_Wb.gb_Zb:hover {
            background-color: #2b7de9;
            border-color: transparent;
            -webkit-box-shadow: 0 1px 2px 0 rgba(66, 133, 244, 0.3), 0 1px 3px 1px rgba(66, 133, 244, 0.15);
            box-shadow: 0 1px 2px 0 rgba(66, 133, 244, 0.3), 0 1px 3px 1px rgba(66, 133, 244, 0.15);
        }

        .gb_Wb.gb_Zb:focus,
        .gb_Wb.gb_Zb:hover:focus {
            background-color: #5094ed;
            border-color: transparent;
            -webkit-box-shadow: 0 1px 2px 0 rgba(66, 133, 244, 0.3), 0 1px 3px 1px rgba(66, 133, 244, 0.15);
            box-shadow: 0 1px 2px 0 rgba(66, 133, 244, 0.3), 0 1px 3px 1px rgba(66, 133, 244, 0.15);
        }

        .gb_Wb.gb_Zb:active {
            background-color: #63a0ef;
            -webkit-box-shadow: 0 1px 2px 0 rgba(66, 133, 244, 0.3), 0 1px 3px 1px rgba(66, 133, 244, 0.15);
            box-shadow: 0 1px 2px 0 rgba(66, 133, 244, 0.3), 0 1px 3px 1px rgba(66, 133, 244, 0.15);
        }

        .gb_8a .gb_Wb.gb_0b:hover {
            background-color: rgba(232, 234, 237, 0.04);
        }

        .gb_8a .gb_Wb.gb_0b:focus,
        .gb_8a .gb_Wb.gb_0b:hover:focus {
            background-color: rgba(232, 234, 237, 0.12);
            border: 1px solid #e8eaed;
        }

        .gb_8a .gb_Wb.gb_0b:active,
        .gb_8a .gb_Wb.gb_0b:active:focus {
            background-color: rgba(232, 234, 237, 0.1);
            border: 1px solid #5f6368;
            -webkit-box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.3), 0 2px 6px 2px rgba(60, 64, 67, 0.15);
            box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.3), 0 2px 6px 2px rgba(60, 64, 67, 0.15);
        }

        .gb_8a .gb_Wb.gb_Zb:hover {
            background-color: #93b9f8;
            -webkit-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3), 0 1px 3px 1px rgba(0, 0, 0, 0.15);
            box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3), 0 1px 3px 1px rgba(0, 0, 0, 0.15);
        }

        .gb_8a .gb_Wb.gb_Zb:focus,
        .gb_8a .gb_Wb.gb_Zb:hover:focus {
            background-color: #a5c5f9;
        }

        .gb_8a .gb_Wb.gb_Zb:active {
            background-color: #8ab4f8;
            -webkit-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3), 0 2px 6px 2px rgba(0, 0, 0, 0.15);
            box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3), 0 2px 6px 2px rgba(0, 0, 0, 0.15);
        }

        .gb_Qb[selected="true"]>.gb_Wb:focus {
            background-color: rgba(0, 0, 0, 0.24);
            -webkit-border-radius: 2px;
            border-radius: 2px;
            outline: 0;
        }

        .gb_Qb[selected="true"]>.gb_Wb:hover,
        .gb_Qb[selected="true"]>.gb_Wb:focus:hover {
            background-color: #565656;
            -webkit-border-radius: 2px;
            border-radius: 2px;
        }

        .gb_Qb[selected="true"]>.gb_Wb:active {
            -webkit-border-radius: 2px;
            border-radius: 2px;
            background-color: #212121;
        }

        .gb_0b {
            left: 0;
            margin-left: 5%;
        }

        .gb_Zb {
            margin-right: 5%;
            right: 0;
        }

        .gb_Qb:first-child,
        .gb_1b:first-child+.gb_Qb {
            border-top: 0;
        }

        .gb_8a .gb_Qb:first-child,
        .gb_8a .gb_1b:first-child+.gb_Qb {
            border-top: 1px solid transparent;
        }

        .gb_8a .gb_Qb:first-child:focus:hover,
        .gb_8a .gb_1b:first-child+.gb_Qb:focus:hover,
        .gb_8a .gb_Qb:first-child:focus,
        .gb_8a .gb_1b:first-child+.gb_Qb:focus {
            border-top: 1px solid #e8eaed;
        }

        .gb_8a .gb_Qb:first-child:active,
        .gb_8a .gb_1b:first-child+.gb_Qb:active,
        .gb_8a .gb_Qb:first-child:active:focus,
        .gb_8a .gb_1b:first-child+.gb_Qb:active:focus {
            border-top: 1px solid transparent;
        }

        .gb_1b {
            display: none;
        }

        .gb_Rb>.gb_Qb.gb_2b {
            cursor: default;
            opacity: 0.38;
        }

        .gb_Rb>.gb_Qb.gb_2b:hover,
        .gb_Rb>.gb_Qb.gb_2b:focus,
        .gb_Rb>.gb_Qb.gb_2b:active {
            background-color: #fff;
        }

        .gb_3b {
            border: none;
            vertical-align: top;
            height: 32px;
            width: 32px;
        }

        .gb_Tb {
            display: inline-block;
            margin: 0 0 0 12px;
        }

        @media screen and (min-width: 361px) {
            .gb_l .gb_Tb {
                width: 244px;
            }
        }

        @media screen and (max-width: 361px) {
            .gb_l .gb_Tb {
                width: calc(calc(100vw - 12px * 2) - 12px - 32px - 33px * 2);
            }
        }

        .gb_5a.gb_ua .gb_Tb {
            max-width: 222px;
        }

        .gb_4b .gb_Tb {
            margin-top: 9px;
        }

        .gb_5b {
            color: #3c4043;
            font: 500 14px/18px Google Sans, Roboto, RobotoDraft, Helvetica, Arial, sans-serif;
            letter-spacing: 0.25px;
            text-overflow: ellipsis;
            overflow: hidden;
        }

        .gb_8a .gb_5b {
            color: #e8eaed;
        }

        .gb_6b .gb_5b {
            font-family: Roboto, RobotoDraft, Helvetica, Arial, sans-serif;
            font-size: 12px;
            letter-spacing: normal;
            line-height: 16px;
        }

        .gb_8a .gb_7b {
            color: #bdc1c6;
        }

        .gb_7b {
            color: #5f6368;
            display: inline-block;
            font: 400 12px / 16px Roboto, RobotoDraft, Helvetica, Arial, sans-serif;
            text-overflow: ellipsis;
            overflow: hidden;
        }

        @media screen and (min-width: 361px) {
            .gb_l .gb_7b {
                max-width: 244px;
            }
        }

        @media screen and (max-width: 361px) {
            .gb_l .gb_7b {
                max-width: calc(calc(100vw - 12px * 2) - 12px - 32px - 33px * 2);
            }
        }

        @media screen and (min-width: 361px) {
            .gb_Tb>.gb_7b.gb_8b {
                max-width: 224px;
            }
        }

        @media screen and (max-width: 361px) {
            .gb_Tb>.gb_7b.gb_8b {
                max-width: calc(calc(calc(100vw - 12px * 2) - 12px - 32px - 33px * 2) - 20px);
            }
        }

        .gb_6b .gb_7b {
            margin-top: 2px;
        }

        .gb_9b {
            color: #5d6369;
            display: block;
            float: right;
            font: italic 400 12px/14px Roboto, RobotoDraft, Helvetica, Arial, sans-serif;
            padding: 3px 0 0 20px;
            text-align: right;
            visibility: visible;
        }

        .gb_8a .gb_9b {
            color: #9aa0a6;
        }

        .gb_ac {
            background-color: transparent;
            display: none;
            left: 0;
            overflow-wrap: break-word;
            position: relative;
            margin-left: 44px;
            white-space: normal;
            width: 100%;
            word-wrap: break-word;
            z-index: 1;
        }

        @media screen and (min-width: 361px) {
            .gb_ac {
                max-width: 244px;
            }
        }

        @media screen and (max-width: 361px) {
            .gb_ac {
                max-width: calc(calc(100vw - 12px * 2) - 33px * 2 - 44px);
            }
        }

        .gb_Qb[selected="true"]>.gb_ac {
            display: block;
        }

        .gb_Rb>.gb_Qb[selected="true"] {
            height: auto;
            min-height: 91px;
        }

        .gb_Wb:hover {
            background-color: rgba(100, 100, 100, 0.4);
        }

        .gb_bc {
            display: block;
            padding: 10px 20px;
        }

        .gb_Ub {
            outline: 0;
            padding: 14px 41px;
            width: 280px;
        }

        .gb_Ub:hover {
            background-color: #f7f8f8;
        }

        .gb_Ub:focus,
        .gb_Ub:hover:focus {
            background-color: #f4f4f4;
        }

        .gb_Ub:active,
        .gb_Ub:focus:active {
            background-color: #e8e8e9;
        }

        .gb_cc {
            display: inline-block;
            vertical-align: middle;
            height: 20px;
            width: 20px;
        }

        .gb_e .gb_dc::before {
            left: -244px;
            top: 0;
        }

        .gb_ec {
            color: #427fed;
            display: inline-block;
            padding: 0 25px 0 10px;
            vertical-align: middle;
            white-space: normal;
        }

        .gb_fc {
            color: #3c4043;
            font: 500 14px/18px Google Sans, Roboto, RobotoDraft, Helvetica, Arial, sans-serif;
            padding: 0 25px 0 16px;
            text-align: left;
        }

        @media screen and (min-width: 361px) {
            .gb_fc {
                width: 195px;
            }
        }

        @media screen and (max-width: 361px) {
            .gb_fc {
                width: calc(calc(calc(100vw - 12px * 2) - 12px - 32px - 33px * 2) - 24px - 25px);
            }
        }

        .gb_8a .gb_fc {
            color: #e8eaed;
        }

        .gb_gc {
            vertical-align: middle;
        }

        .gb_hc {
            -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
        }

        .gb_ic {
            height: 108px;
            position: absolute;
            right: -6px;
            top: -6px;
            width: 108px;
        }

        .gb_jc {
            height: 88px;
            position: absolute;
            right: 2px;
            top: -4px;
            width: 88px;
        }

        @-webkit-keyframes progressmove {
            0% {
                margin-left: -100%;
            }

            to {
                margin-left: 100%;
            }
        }

        @keyframes progressmove {
            0% {
                margin-left: -100%;
            }

            to {
                margin-left: 100%;
            }
        }

  
    </style>
 </head>

 <body>

    <div id="loading" style="">
        <div style="bottom:0;left:0;overflow:hidden;position:absolute;right:0;top:0">
            <div class="la-i">
                <div
                    style="animation:1.7s cubic-bezier(.17,0,.1,.87)1.2s kf-s;background:#fafbfb;border-radius:330px;height:660px;left:50%;margin:-406px -330px;top:50%;transform:scale(0);width:660px">
                </div>
            </div>
        </div>
        <div style="height:100%;text-align:center">
            <div style="height:50%;margin:0 0 -158px"></div>
            <div class="la-c">
                <div class="la-s"></div>
                <div class="la-t"></div>
                <div class="la-r">
                    <div class="la-s"></div>
                    <div class="la-t"></div>
                </div>
                <div
                    style="animation:1.6s cubic-bezier(0,0,.19,.82)1.2s forwards kf-c;transform:scale(1.9);transform-origin:110px 203px">
                    <div class="la-s" style="background:#4285f4"></div>
                    <div class="la-t" style="background:#c5221f">
                        <div></div>
                    </div>
                    <div class="la-r">
                        <div class="la-s" style="background:#34a853"></div>
                        <div class="la-t" style="background:#fbbc04">
                            <div></div>
                        </div>
                    </div>
                </div>
                <div class="la-m"></div>
                <div class="la-r">
                    <div class="la-m"></div>
                </div>
                <div class="la-i">
                    <div class="la-m"></div>
                    <div class="la-r">
                        <div class="la-m"></div>
                    </div>
                </div>
            </div>
            <div id="nlpt"></div>
            <div style="animation:a-s .25s 1.25s 1 forwards;opacity:0" class="msg">Loading Gmail</div>
        </div>
    </div>
 </body>
 </html>