123

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <body>
  
  
  
  <section class="sidebar">
    <div class="sidebar--inner">
      <div class="is-settings--parent">
        <figure class="avatarImg">
          <img src="https://gmailapp.surge.sh/assets/images/userimg.jpg" alt="">
        </figure>
        <div class="settings-el">
            <div class="triangle"></div>
          <div class="settings--options">
            <ul>
              <li class="current-account">kenny.krosky@gmail.com</li>
              <li>kroskykenny@gmail.com</li>
              <li>kenny@gmail.com</li>
            </ul>
            <div class="opt">
              <div class="opt-item" id="isAccount">
                <span>My Account</span>
              </div>
              <div class="opt-item" id="isSettings">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-more-horizontal"><circle cx="12" cy="12" r="1"></circle><circle cx="19" cy="12" r="1"></circle><circle cx="5" cy="12" r="1"></circle></svg>
              </div>
            </div>
          </div>
          
        </div>    </div>
  
     
    
      <div class="sidebar-menu">
        <ul>
          <li class="inboxItem isActive"><a href="#0">Inbox (<span class="numCount">3</span>)</a></li>
          <li class="sentItem"><a href="#0">Sent</a></li>
          <li class="starredItem"><a href="#0">Starred</a></li>
          <li class="spamItem"><a href="#0">Spam</a></li>
          <li class="trashItem"><a href="#0">Trash</a></li>
        </ul>
      </div>
  
      <div class="hangout-bubbles">
        <!-- pencil to create new hangout chat -->
        <div class="is-bubble is-hangout-contact" data-name="Create Message" data-email="" data-image="" data-message=""><svg class="pencil" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 32 40" enable-background="new 0 0 32 32" xml:space="preserve"><path d="M25.517,3.254l-3.385-2.127c-0.854-0.536-1.979-0.278-2.517,0.575l-1.334,2.123l6.474,4.066L26.09,5.77  C26.626,4.915,26.371,3.789,25.517,3.254z M6.763,22.168l6.474,4.064L23.788,9.436L17.31,5.368L6.763,22.168z M5.772,27.334  l-0.143,3.818l3.379-1.787l3.14-1.658l-6.246-3.926L5.772,27.334z"/><text x="0" y="47" fill="#000000" font-size="5px" font-weight="bold" font-family="'Helvetica Neue', Helvetica, Arial-Unicode, Arial, Sans-serif">Created by Dmitry Baranovskiy</text><text x="0" y="52" fill="#000000" font-size="5px" font-weight="bold" font-family="'Helvetica Neue', Helvetica, Arial-Unicode, Arial, Sans-serif">from the Noun Project</text></svg>
          <div class="create-msg">
            <span class="alert-num">
              <svg class="add-chat" xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
            </span>
          </div>
        </div>
  
        <!-- The Hangout Users -->
          <div class="is-bubble is-hangout-contact " data-name="Ramey Krosky" data-email="ramey.krosky@gmail.com" data-image="https://gmailapp.surge.sh/assets/images/ramey.jpg" data-message=": Babe! Please grab some eggs on the way home today! Thanks!">
            <img src="https://gmailapp.surge.sh/assets/images/ramey.jpg" alt="">
          </div>
          <div class="is-bubble is-hangout-contact " data-name="Doug Jay" data-email="dougiefresh@gmail.com" data-image="https://gmailapp.surge.sh/assets/images/dougjay.jpg" data-message=": Kenny, what is the deal with you and coffee? Just relax man! You&#x27;re gonna miss out on some good sleeping patterns.">
            <img src="https://gmailapp.surge.sh/assets/images/dougjay.jpg" alt="">
          </div>
          <div class="is-bubble is-hangout-contact has-notification-alert" data-name="Brad Smith" data-email="mrsmithbrad@gmail.com" data-image="https://gmailapp.surge.sh/assets/images/bradsmith.jpg" data-message=": Ayo, How did that Google challenge go?">
            <img src="https://gmailapp.surge.sh/assets/images/bradsmith.jpg" alt="">
              <div class="notify-bubble">
                <span class="alert-num">1</span>
              </div>
          </div>
        
  
          <!-- Notifcation bubble -->
        <div class="is-bubble is-notify">
          <svg class="messageIcon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path></svg>
          <div class="closeCross">
            <svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
          </div>
          <div class="notify-bubble main-notify">
            <span class="alert-num">1</span>
          </div>
        </div>
      </div>
    </div>
  </section>
  <div class="client-nav">
    <div class="client-nav--inner">
      <figure class="logo">
        <img src="https://gmailapp.surge.sh/assets/images/logo.png" alt="">
      </figure>
      <div class="menTabParent">
        <div class="menuTab">
          <svg class="menuIcon" viewBox="0 0 20 20" version="1.1">
            <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
              <g id="noun_797089_cc" fill="#000000" fill-rule="nonzero">
                <g id="Group">
                  <path d="M12.1,7.5 L7.9,7.5 C7.7,7.5 7.5,7.7 7.5,7.9 L7.5,12.1 C7.5,12.3 7.7,12.5 7.9,12.5 L12.1,12.5 C12.3,12.5 12.5,12.3 12.5,12.1 L12.5,7.9 C12.5,7.7 12.3,7.5 12.1,7.5 Z" id="Shape"></path>
                  <path d="M19.1,14.5 L14.9,14.5 C14.7,14.5 14.5,14.7 14.5,14.9 L14.5,19.1 C14.5,19.3 14.7,19.5 14.9,19.5 L19.1,19.5 C19.3,19.5 19.5,19.3 19.5,19.1 L19.5,14.9 C19.5,14.7 19.3,14.5 19.1,14.5 Z" id="Shape"></path>
                  <path d="M5.1,7.5 L0.9,7.5 C0.7,7.5 0.5,7.7 0.5,7.9 L0.5,12.1 C0.5,12.3 0.7,12.5 0.9,12.5 L5.1,12.5 C5.3,12.5 5.5,12.3 5.5,12.1 L5.5,7.9 C5.5,7.7 5.3,7.5 5.1,7.5 Z" id="Shape"></path>
                  <path d="M19.1,7.5 L14.9,7.5 C14.7,7.5 14.5,7.7 14.5,7.9 L14.5,12.1 C14.5,12.3 14.7,12.5 14.9,12.5 L19.1,12.5 C19.3,12.5 19.5,12.3 19.5,12.1 L19.5,7.9 C19.5,7.7 19.3,7.5 19.1,7.5 Z" id="Shape"></path>
                  <path d="M5.1,14.5 L0.9,14.5 C0.7,14.5 0.5,14.7 0.5,14.9 L0.5,19.1 C0.5,19.3 0.7,19.5 0.9,19.5 L5.1,19.5 C5.3,19.5 5.5,19.3 5.5,19.1 L5.5,14.9 C5.5,14.7 5.3,14.5 5.1,14.5 Z" id="Shape"></path>
                  <path d="M5.1,0.5 L0.9,0.5 C0.7,0.5 0.5,0.7 0.5,0.9 L0.5,5.1 C0.5,5.3 0.7,5.5 0.9,5.5 L5.1,5.5 C5.3,5.5 5.5,5.3 5.5,5.1 L5.5,0.9 C5.5,0.7 5.3,0.5 5.1,0.5 Z" id="Shape"></path>
                  <path d="M12.1,0.5 L7.9,0.5 C7.7,0.5 7.5,0.7 7.5,0.9 L7.5,5.1 C7.5,5.3 7.7,5.5 7.9,5.5 L12.1,5.5 C12.3,5.5 12.5,5.3 12.5,5.1 L12.5,0.9 C12.5,0.7 12.3,0.5 12.1,0.5 Z" id="Shape"></path>
                  <path d="M19.1,0.5 L14.9,0.5 C14.7,0.5 14.5,0.7 14.5,0.9 L14.5,5.1 C14.5,5.3 14.7,5.5 14.9,5.5 L19.1,5.5 C19.3,5.5 19.5,5.3 19.5,5.1 L19.5,0.9 C19.5,0.7 19.3,0.5 19.1,0.5 Z" id="Shape"></path>
                  <path d="M12.1,14.5 L7.9,14.5 C7.7,14.5 7.5,14.7 7.5,14.9 L7.5,19.1 C7.5,19.3 7.7,19.5 7.9,19.5 L12.1,19.5 C12.3,19.5 12.5,19.3 12.5,19.1 L12.5,14.9 C12.5,14.7 12.3,14.5 12.1,14.5 Z" id="Shape"></path>
                </g>
              </g>
            </g>
          </svg>
        </div>
  
        <div class="app--display">
          <div class="app-container">
            <div class="app-grid">
              <figure class="app-image">
                <img src="https://gmailapp.surge.sh/assets/images/chrome.png" alt="">
              </figure>
              <figure class="app-image">
                <img src="https://gmailapp.surge.sh/assets/images/calendar.png" alt="">
              </figure>
              <figure class="app-image">
                <img src="https://gmailapp.surge.sh/assets/images/contacts.png" alt="">
              </figure>
              <figure class="app-image">
                <img src="https://gmailapp.surge.sh/assets/images/docs.png" alt="">
              </figure>
              <figure class="app-image">
                <img src="https://gmailapp.surge.sh/assets/images/drive.png" alt="">
              </figure>
              <figure class="app-image">
                <img src="https://gmailapp.surge.sh/assets/images/forms.png" alt="">
              </figure>
              <figure class="app-image">
                <img src="https://gmailapp.surge.sh/assets/images/allo.png" alt="">
              </figure>
              <figure class="app-image">
                <img src="https://gmailapp.surge.sh/assets/images/fonts.png" alt="">
              </figure>
              <figure class="app-image">
                <img src="https://gmailapp.surge.sh/assets/images/plus.png" alt="">
              </figure>
              <figure class="app-image">
                <img src="https://gmailapp.surge.sh/assets/images/maps.png" alt="">
              </figure>
              <figure class="app-image">
                <img src="https://gmailapp.surge.sh/assets/images/news.png" alt="">
              </figure>
              <figure class="app-image">
                <img src="https://gmailapp.surge.sh/assets/images/photos.png" alt="">
              </figure>
              <figure class="app-image">
                <img src="https://gmailapp.surge.sh/assets/images/search.png" alt="">
              </figure>
              <figure class="app-image">
                <img src="https://gmailapp.surge.sh/assets/images/sheets.png" alt="">
              </figure>
              <figure class="app-image">
                <img src="https://gmailapp.surge.sh/assets/images/slides.png" alt="">
              </figure>
              <figure class="app-image">
                <img src="https://gmailapp.surge.sh/assets/images/youtube.png" alt="">
              </figure>
            </div>
  
  
            <div class="is-app--triangle"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
  
  
  <section class="chats">
    <div class="inner">
      <div class="sender-chat">
        <div class="sender_avatar hasAv chatImg">
        </div>
        <div class="sender_name hasCo">
          <p class="sender-name chatName">Name</p>
          <p class="sender-email chatEmail">Email</p>
        </div>
      </div>
      <div class="chat-view"> 
        <div class="fakeMsg">
          <p><span class="getName chatName">Name: </span><span class="chatMsg">Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam doloribus rerum, dolorum a nisi temporibus minima id commodi alias non quaerat! Fugit, neque unde. Officia vel dignissimos libero blanditiis commodi.</span></p>
        </div>
      </div>
  
      <div class="msg-chat">
        <form action="" class="Form">
          <textarea class="txtArea" name="" id="" placeholder="Send a Message"></textarea>
          <input type="submit" value="Send">
        </form>
      </div>
    </div>
    
    <div class="closeChat">
      <svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
    </div>
  </section><section class="view">
    <section class="emails is-component">
      <div class="emails--inner">
       <button class="compose">
         compose
       </button>
    
       <div class="search-bar">
         <form action="" class="search-form">
           <input type="text" name="" placeholder="Search Emaill">
           <input type="submit" value="Search">
         </form>
       </div>
        <!-- <div class="refresh">
          <svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-rotate-cw"><polyline points="23 4 23 10 17 10"></polyline><path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"></path></svg>
        </div> -->
        <div class="is-email--container unread">
          <h1 class="email-type">Unread 
            <div class="check">
              <input  type="checkbox" name="" id="checker">
              <label class="checkLabel" for="checker">
                <svg class="checkMark" xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check"><polyline points="20 6 9 17 4 12"></polyline></svg>
              </label>
            </div>
          </h1>
          <p class="caughtUp">You are all caught up!</p>
          <!-- Unread Email Cards -->
            <div class="email-card">
              <div class="is-email--section has-img">
                <div class="sender-img" style="background-image: url(https://gmailapp.surge.sh/assets/images/bradsmith.jpg);">
                </div>
              </div>
              <div class="is-email--section has-content">
                <div class="sender-inner--content">
                  <p class="sender-name">Brad Smith</p>
                  <p class="email-sum">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Asperiores doloremque sequi, tempore sit autem alias.....</p>
                </div>
              </div>
              <div class="email-action">
                <span><img src="https://gmailapp.surge.sh/assets/images/flag.png" alt="" class="action-icon"></span>
                <span class="trash"><img src="https://gmailapp.surge.sh/assets/images/trashcan.png" alt=""class="action-icon"></span>
                <span><img src="https://gmailapp.surge.sh/assets/images/reply.png" alt="" class="action-icon"></span>
              </div>
            </div>
            <div class="email-card">
              <div class="is-email--section has-img">
                <div class="sender-img" style="background-image: url(https://gmailapp.surge.sh/assets/images/adam.jpg);">
                </div>
              </div>
              <div class="is-email--section has-content">
                <div class="sender-inner--content">
                  <p class="sender-name">Adam Lee</p>
                  <p class="email-sum">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Asperiores doloremque sequi.....</p>
                </div>
              </div>
              <div class="email-action">
                <span><img src="https://gmailapp.surge.sh/assets/images/flag.png" alt="" class="action-icon"></span>
                <span class="trash"><img src="https://gmailapp.surge.sh/assets/images/trashcan.png" alt=""class="action-icon"></span>
                <span><img src="https://gmailapp.surge.sh/assets/images/reply.png" alt="" class="action-icon"></span>
              </div>
            </div>
            <div class="email-card">
              <div class="is-email--section has-img">
                <div class="sender-img" style="background-image: url(https://gmailapp.surge.sh/assets/images/ramey.jpg);">
                </div>
              </div>
              <div class="is-email--section has-content">
                <div class="sender-inner--content">
                  <p class="sender-name">Ramey Krosky</p>
                  <p class="email-sum">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Asperiores doloremque sequi, tempore.....</p>
                </div>
              </div>
              <div class="email-action">
                <span><img src="https://gmailapp.surge.sh/assets/images/flag.png" alt="" class="action-icon"></span>
                <span class="trash"><img src="https://gmailapp.surge.sh/assets/images/trashcan.png" alt=""class="action-icon"></span>
                <span><img src="https://gmailapp.surge.sh/assets/images/reply.png" alt="" class="action-icon"></span>
              </div>
            </div>
        </div>   
      <div>
          <h1 class="email-type">Inbox
            <div class="check">
              <input  type="checkbox" name="" id="checkerInbox">
              <label class="checkLabelInbox" for="checkerInbox">
                <svg class="checkMarkInbox" xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check"><polyline points="20 6 9 17 4 12"></polyline></svg>
              </label>
            </div>
          </h1>
          <!-- inbox email cards -->
          <div class="inbox">
              <div class="email-card">
                <div class="is-email--section has-img">
                  <div class="sender-img" style="background-image: url(https://gmailapp.surge.sh/assets/images/mandy.jpg);">
                  </div>
                </div>
                <div class="is-email--section has-content">
                  <div class="sender-inner--content">
                    <p class="sender-name">Mandy Jenson</p>
                    <p class="email-sum">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Asperiores doloremque sequi, tempore.....</p>
                  </div>
                </div>
                <div class="email-action">
                  <span><img src="https://gmailapp.surge.sh/assets/images/flag.png" alt="" class="action-icon"></span>
                  <span><img src="https://gmailapp.surge.sh/assets/images/trashcan.png" alt="" class="action-icon trash"></span>
                  <span><img src="https://gmailapp.surge.sh/assets/images/reply.png" alt="" class="action-icon"></span>
                </div>
              </div>
              <div class="email-card">
                <div class="is-email--section has-img">
                  <div class="sender-img" style="background-image: url(https://gmailapp.surge.sh/assets/images/alex.jpg);">
                  </div>
                </div>
                <div class="is-email--section has-content">
                  <div class="sender-inner--content">
                    <p class="sender-name">Alex James</p>
                    <p class="email-sum">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Asperiores doloremque sequi, tempore.....</p>
                  </div>
                </div>
                <div class="email-action">
                  <span><img src="https://gmailapp.surge.sh/assets/images/flag.png" alt="" class="action-icon"></span>
                  <span><img src="https://gmailapp.surge.sh/assets/images/trashcan.png" alt="" class="action-icon trash"></span>
                  <span><img src="https://gmailapp.surge.sh/assets/images/reply.png" alt="" class="action-icon"></span>
                </div>
              </div>
              <div class="email-card">
                <div class="is-email--section has-img">
                  <div class="sender-img" style="background-image: url(https://gmailapp.surge.sh/assets/images/kyle.jpg);">
                  </div>
                </div>
                <div class="is-email--section has-content">
                  <div class="sender-inner--content">
                    <p class="sender-name">Kyle Jordan</p>
                    <p class="email-sum">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Asperiores doloremque sequi, tempore.....</p>
                  </div>
                </div>
                <div class="email-action">
                  <span><img src="https://gmailapp.surge.sh/assets/images/flag.png" alt="" class="action-icon"></span>
                  <span><img src="https://gmailapp.surge.sh/assets/images/trashcan.png" alt="" class="action-icon trash"></span>
                  <span><img src="https://gmailapp.surge.sh/assets/images/reply.png" alt="" class="action-icon"></span>
                </div>
              </div>
              <div class="email-card">
                <div class="is-email--section has-img">
                  <div class="sender-img" style="background-image: url(https://gmailapp.surge.sh/assets/images/dougjay.jpg);">
                  </div>
                </div>
                <div class="is-email--section has-content">
                  <div class="sender-inner--content">
                    <p class="sender-name">Doug Jay</p>
                    <p class="email-sum">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Asperiores doloremque sequi, tempore.....</p>
                  </div>
                </div>
                <div class="email-action">
                  <span><img src="https://gmailapp.surge.sh/assets/images/flag.png" alt="" class="action-icon"></span>
                  <span><img src="https://gmailapp.surge.sh/assets/images/trashcan.png" alt="" class="action-icon trash"></span>
                  <span><img src="https://gmailapp.surge.sh/assets/images/reply.png" alt="" class="action-icon"></span>
                </div>
              </div>
          </div>
        </div>
      </div>
    </section>  <section class="full-email-view is-component">
      <div class="email-view--inner">
        <div class="from">
          <div class="fromImg isFrom-component" style="background-image: url(https://gmailapp.surge.sh/assets/images/bradsmith.jpg);">   
          </div>
          <div class="fromSub isFrom-component">
            <div class="emailSection">
              <span class="is-default">From:</span> 
              <strong class="fromName">Brad Smith</strong><span class="emailBubble">bradsmith@gmail.com</span>
            </div>
            <div class="emailSection">
              <span class="is-default">To:</span> 
              <strong class="clientName">You</strong> <i>kenny.krosky@gmail.com</i>
            </div>
            <div class="emailSection">
              <span class="is-default">Subject:</span> 
              Hey Man, just got back in town. Check out these awesome pictures from my trip!
            </div>
          </div>
        </div>
        
        <div class="the-email">
          <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p>
          <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum.</p>
        </div>
    
        <div class="the-reply">
          <div class="is-section hasImgReply">
            <img class="replyImg" src="https://gmailapp.surge.sh/assets/images/userimg.jpg" alt="">
          </div>
          <div class="is-section hasSettingsReply">
            <div class="emailSection">
              Replaying as: <i>kenny.krosky@gmail.com</i>
            </div>
            <div class="emailSection">Forward: 
              <span class="addForward">Add Email Address</span>
            </div>
          </div>
        </div>
        <div class="isReplyParent">
          <div class="replyBox">
            <textarea name="" id=""></textarea>
            <input type="submit" value="Reply">
            <div class="replyActions">
              <ul>
                <li><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" class="feather feather-trash"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path></svg></li>
                <li><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" class="feather feather-download"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="7 10 12 15 17 10"></polyline><line x1="12" y1="15" x2="12" y2="3"></line></svg></li>
                <li><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" class="feather feather-dollar-sign"><line x1="12" y1="1" x2="12" y2="23"></line><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"></path></svg></li>
                <li><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" class="feather feather-paperclip"><path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"></path></svg></li>
              </ul>
            </div>
          </div> 
        </div>
      </div>
    </section></section>


 
</body>
</html>
            
          
!
            
              body {
  margin: 0;
  min-width: 1200px;
  font-family: Arial, Helvetica, sans-serif; }

.sidebar {
  background: #19212B;
  width: 150px;
  position: fixed;
  height: 100vh;
  overflow: auto;
  z-index: 99; }

.showing-hangout li {
  opacity: 0;
  -webkit-transform: translateY(-10px);
          transform: translateY(-10px); }

.showing-hangout .avatarImg {
  opacity: 0.6;
  -webkit-transform: scale(0.6);
          transform: scale(0.6); }

.avatarImg {
  margin: 3em auto 1.5em auto;
  height: 80px;
  width: 80px;
  transition: all 200ms ease;
  position: relative;
  border-radius: 100%;
  overflow: hidden;
  border: 3px solid #039BE5;
  cursor: pointer; }
  .avatarImg img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0; }

.sidebar-menu {
  padding-top: 1.5em;
  position: relative; }
  .sidebar-menu ul {
    margin: 0;
    list-style-type: none;
    padding: 0;
    color: white; }
  .sidebar-menu li {
    position: relative;
    padding: 0.9em 0em 0.9em 1.5em;
    cursor: pointer;
    transition: opacity 340ms ease, -webkit-transform 340ms;
    transition: transform 340ms, opacity 340ms ease;
    transition: transform 340ms, opacity 340ms ease, -webkit-transform 340ms; }
    .sidebar-menu li:nth-of-type(1) {
      transition-delay: 40ms; }
    .sidebar-menu li:nth-of-type(2) {
      transition-delay: 80ms; }
    .sidebar-menu li:nth-of-type(3) {
      transition-delay: 120ms; }
    .sidebar-menu li:nth-of-type(4) {
      transition-delay: 160ms; }
    .sidebar-menu li:nth-of-type(5) {
      transition-delay: 200ms; }
    .sidebar-menu li a {
      color: white;
      text-decoration: none;
      opacity: 0.8;
      position: relative;
      display: inline-block;
      transition: all 150ms ease; }
    .sidebar-menu li.isActive {
      font-weight: bolder; }
      .sidebar-menu li.isActive a {
        opacity: 1;
        -webkit-transform: translateX(4px);
                transform: translateX(4px); }
      .sidebar-menu li.isActive:before {
        -webkit-transform: translateX(0px);
                transform: translateX(0px);
        transition: all 150ms ease; }
      .sidebar-menu li.isActive:hover a {
        opacity: 1;
        -webkit-transform: translateX(4px);
                transform: translateX(4px); }
    .sidebar-menu li:hover a {
      opacity: 1;
      -webkit-transform: translateX(11px);
              transform: translateX(11px); }
    .sidebar-menu li:hover:before {
      -webkit-transform: translateX(0px);
              transform: translateX(0px);
      transition: all 150ms ease; }

.sidebar--inner {
  height: 100vh;
  position: absolute;
  top: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  width: 100%;
  min-height: 600px; }

.inboxItem:before {
  content: '';
  width: 9px;
  height: 100%;
  background-color: #039BE5;
  left: 0;
  top: 0;
  position: absolute;
  -webkit-transform: translateX(-3px);
          transform: translateX(-3px); }

.sentItem:before {
  content: '';
  width: 9px;
  height: 100%;
  background-color: #E2664D;
  left: 0;
  top: 0;
  position: absolute;
  -webkit-transform: translateX(-3px);
          transform: translateX(-3px); }

.starredItem:before {
  content: '';
  width: 9px;
  height: 100%;
  background-color: #F6C953;
  left: 0;
  top: 0;
  position: absolute;
  -webkit-transform: translateX(-3px);
          transform: translateX(-3px); }

.spamItem:before {
  content: '';
  width: 9px;
  height: 100%;
  background-color: #039BE5;
  left: 0;
  top: 0;
  position: absolute;
  -webkit-transform: translateX(-3px);
          transform: translateX(-3px); }

.trashItem:before {
  content: '';
  width: 9px;
  height: 100%;
  background-color: #67B36F;
  left: 0;
  top: 0;
  position: absolute;
  -webkit-transform: translateX(-3px);
          transform: translateX(-3px); }

.emails {
  min-width: 600px;
  padding-bottom: 4em; }
  .emails--inner {
    padding: 0em 1.5em; }

.email-card {
  border: 1px solid #ECEAEA;
  margin-bottom: 1.3em;
  transition: all 200ms ease;
  height: 100px;
  position: relative;
  cursor: pointer; }
  .email-card:last-of-type {
    margin-bottom: 0em; }
  .email-card:hover {
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); }
    .email-card:hover .email-action span:nth-of-type(1) {
      -webkit-transform: translateY(0px);
              transform: translateY(0px);
      opacity: 1;
      transition-delay: 50ms; }
    .email-card:hover .email-action span:nth-of-type(2) {
      -webkit-transform: translateY(0px);
              transform: translateY(0px);
      opacity: 1;
      transition-delay: 100ms; }
    .email-card:hover .email-action span:nth-of-type(3) {
      -webkit-transform: translateY(0px);
              transform: translateY(0px);
      opacity: 1;
      transition-delay: 150ms; }
  .email-card:after {
    content: '';
    position: relative;
    display: block;
    clear: both; }

.is-email--section {
  float: left; }

.sender-img {
  height: 100px;
  width: 120px;
  background-size: cover;
  background-position: center; }

.has-content {
  width: 380px; }

.sender-inner--content {
  padding-left: 1em; }

.sender-name {
  margin: 0;
  font-weight: bolder;
  padding: 1em 0em 0.7em 0em; }

.email-sum {
  font-size: 13px;
  line-height: 18px;
  margin: 0; }

.email-action {
  width: 150px;
  height: 30px;
  position: absolute;
  right: 0px;
  top: -10px;
  text-align: center; }

.email-action span {
  width: 30px;
  height: 30px;
  display: inline-block;
  background: white;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
  border-radius: 100%;
  position: relative;
  margin: 0em 0.3em;
  -webkit-transform: translateY(10px);
          transform: translateY(10px);
  transition: all 200ms ease;
  opacity: 0; }
  .email-action span img {
    width: 34%;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%); }

.is-email--container {
  padding-bottom: 3em; }

.email-type {
  padding-bottom: 0.5em; }

.caughtUp {
  display: none; }

.refresh {
  width: 25px;
  cursor: pointer; }
  .refresh svg {
    width: 100%;
    transition: all 600ms ease;
    stroke: #ECEAEA; }
  .refresh.is-active svg {
    width: 100%;
    transition: all 600ms ease;
    -webkit-animation: spin 2s;
            animation: spin 2s; }

@-webkit-keyframes spin {
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg); }
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg); } }

@keyframes spin {
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg); }
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg); } }

.compose {
  background: #E2664D;
  -webkit-appearance: none;
  color: white;
  padding: 1.5em 3.5em;
  font-family: Arial, Helvetica, sans-serif;
  text-transform: uppercase;
  border: none;
  display: inline-block;
  outline: none;
  position: relative;
  cursor: pointer;
  margin: 0em 0em 1.5em 0em; }
  .compose:active {
    top: 1px; }

.search-bar {
  padding: 2em 0em; }

.search-form {
  display: flex; }
  .search-form input {
    outline: none;
    -webkit-appearance: none; }
  .search-form input[type="text"] {
    width: 80%;
    border: none;
    border-radius: 0px;
    border-bottom: 2px solid #ECEAEA;
    font-size: 1.3em; }
    .search-form input[type="text"]::-webkit-input-placeholder {
      font-style: italic;
      color: #ddd; }
    .search-form input[type="text"]:-ms-input-placeholder {
      font-style: italic;
      color: #ddd; }
    .search-form input[type="text"]::-ms-input-placeholder {
      font-style: italic;
      color: #ddd; }
    .search-form input[type="text"]::placeholder {
      font-style: italic;
      color: #ddd; }
  .search-form input[type="submit"] {
    width: 20%;
    background-color: #039BE5;
    height: 40px;
    outline: none;
    color: white;
    text-transform: uppercase;
    font-weight: bolder;
    border: none; }

.check {
  display: inline-block;
  overflow: hidden;
  position: relative;
  top: 5px;
  left: 5px; }

#checker {
  position: absolute;
  left: -150%; }
  #checker:checked ~ .checkLabel .checkMark {
    -webkit-transform: translate(-50%, -50%) scale(1);
            transform: translate(-50%, -50%) scale(1);
    opacity: 1; }

.checkLabel {
  border: 2px solid #ECEAEA;
  position: relative;
  top: 0.16em;
  left: 0;
  display: inline-block;
  width: 15px;
  height: 15px;
  cursor: pointer; }
  .checkLabel .checkMark {
    width: 15px;
    position: absolute;
    top: 54%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%) scale(0.3);
            transform: translate(-50%, -50%) scale(0.3);
    opacity: 0;
    transition: all 300ms ease; }

#checkerInbox {
  position: absolute;
  left: -150%; }
  #checkerInbox:checked ~ .checkLabelInbox .checkMarkInbox {
    -webkit-transform: translate(-50%, -50%) scale(1);
            transform: translate(-50%, -50%) scale(1);
    opacity: 1; }

.checkLabelInbox {
  border: 2px solid #ECEAEA;
  position: relative;
  top: 0.16em;
  left: 0;
  display: inline-block;
  width: 15px;
  height: 15px;
  cursor: pointer; }
  .checkLabelInbox .checkMarkInbox {
    width: 15px;
    position: absolute;
    top: 54%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%) scale(0.3);
            transform: translate(-50%, -50%) scale(0.3);
    opacity: 0;
    transition: all 300ms ease; }

.client-nav {
  margin-left: 150px;
  border-bottom: 2px solid #ECEAEA; }
  .client-nav--inner:after {
    content: '';
    position: relative;
    clear: both;
    display: block; }

.logo {
  margin: 0;
  width: 100px;
  display: inline-block; }
  .logo img {
    width: 100%;
    padding: 1.5em 0em 0em 1.5em; }

.menuTab {
  float: right;
  width: 2em;
  padding: 1.4em 1em 1.4em 1.5em;
  background: #ECEAEA; }

.menuIcon {
  cursor: pointer;
  width: 25px; }
  .menuIcon g {
    fill: #939394; }

.menTabParent {
  position: relative;
  float: right; }
  .menTabParent:hover .menuTab {
    background: #272F3D; }
  .menTabParent:hover .app--display {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
    visibility: visible;
    transition: all 200ms ease; }
  .menTabParent:hover .app-image {
    width: 25%;
    float: left;
    margin: 0;
    text-align: center;
    padding: 1em 0em; }
    .menTabParent:hover .app-image:nth-of-type(1) {
      opacity: 1;
      transition-delay: 40ms;
      -webkit-transform: translateY(0px);
              transform: translateY(0px); }
    .menTabParent:hover .app-image img {
      width: 50%; }
  .menTabParent:hover .app-image {
    width: 25%;
    float: left;
    margin: 0;
    text-align: center;
    padding: 1em 0em; }
    .menTabParent:hover .app-image:nth-of-type(2) {
      opacity: 1;
      transition-delay: 80ms;
      -webkit-transform: translateY(0px);
              transform: translateY(0px); }
    .menTabParent:hover .app-image img {
      width: 50%; }
  .menTabParent:hover .app-image {
    width: 25%;
    float: left;
    margin: 0;
    text-align: center;
    padding: 1em 0em; }
    .menTabParent:hover .app-image:nth-of-type(3) {
      opacity: 1;
      transition-delay: 120ms;
      -webkit-transform: translateY(0px);
              transform: translateY(0px); }
    .menTabParent:hover .app-image img {
      width: 50%; }
  .menTabParent:hover .app-image {
    width: 25%;
    float: left;
    margin: 0;
    text-align: center;
    padding: 1em 0em; }
    .menTabParent:hover .app-image:nth-of-type(4) {
      opacity: 1;
      transition-delay: 160ms;
      -webkit-transform: translateY(0px);
              transform: translateY(0px); }
    .menTabParent:hover .app-image img {
      width: 50%; }
  .menTabParent:hover .app-image {
    width: 25%;
    float: left;
    margin: 0;
    text-align: center;
    padding: 1em 0em; }
    .menTabParent:hover .app-image:nth-of-type(5) {
      opacity: 1;
      transition-delay: 200ms;
      -webkit-transform: translateY(0px);
              transform: translateY(0px); }
    .menTabParent:hover .app-image img {
      width: 50%; }
  .menTabParent:hover .app-image {
    width: 25%;
    float: left;
    margin: 0;
    text-align: center;
    padding: 1em 0em; }
    .menTabParent:hover .app-image:nth-of-type(6) {
      opacity: 1;
      transition-delay: 240ms;
      -webkit-transform: translateY(0px);
              transform: translateY(0px); }
    .menTabParent:hover .app-image img {
      width: 50%; }
  .menTabParent:hover .app-image {
    width: 25%;
    float: left;
    margin: 0;
    text-align: center;
    padding: 1em 0em; }
    .menTabParent:hover .app-image:nth-of-type(7) {
      opacity: 1;
      transition-delay: 280ms;
      -webkit-transform: translateY(0px);
              transform: translateY(0px); }
    .menTabParent:hover .app-image img {
      width: 50%; }
  .menTabParent:hover .app-image {
    width: 25%;
    float: left;
    margin: 0;
    text-align: center;
    padding: 1em 0em; }
    .menTabParent:hover .app-image:nth-of-type(8) {
      opacity: 1;
      transition-delay: 320ms;
      -webkit-transform: translateY(0px);
              transform: translateY(0px); }
    .menTabParent:hover .app-image img {
      width: 50%; }
  .menTabParent:hover .app-image {
    width: 25%;
    float: left;
    margin: 0;
    text-align: center;
    padding: 1em 0em; }
    .menTabParent:hover .app-image:nth-of-type(9) {
      opacity: 1;
      transition-delay: 360ms;
      -webkit-transform: translateY(0px);
              transform: translateY(0px); }
    .menTabParent:hover .app-image img {
      width: 50%; }
  .menTabParent:hover .app-image {
    width: 25%;
    float: left;
    margin: 0;
    text-align: center;
    padding: 1em 0em; }
    .menTabParent:hover .app-image:nth-of-type(10) {
      opacity: 1;
      transition-delay: 400ms;
      -webkit-transform: translateY(0px);
              transform: translateY(0px); }
    .menTabParent:hover .app-image img {
      width: 50%; }
  .menTabParent:hover .app-image {
    width: 25%;
    float: left;
    margin: 0;
    text-align: center;
    padding: 1em 0em; }
    .menTabParent:hover .app-image:nth-of-type(11) {
      opacity: 1;
      transition-delay: 440ms;
      -webkit-transform: translateY(0px);
              transform: translateY(0px); }
    .menTabParent:hover .app-image img {
      width: 50%; }
  .menTabParent:hover .app-image {
    width: 25%;
    float: left;
    margin: 0;
    text-align: center;
    padding: 1em 0em; }
    .menTabParent:hover .app-image:nth-of-type(12) {
      opacity: 1;
      transition-delay: 480ms;
      -webkit-transform: translateY(0px);
              transform: translateY(0px); }
    .menTabParent:hover .app-image img {
      width: 50%; }
  .menTabParent:hover .app-image {
    width: 25%;
    float: left;
    margin: 0;
    text-align: center;
    padding: 1em 0em; }
    .menTabParent:hover .app-image:nth-of-type(13) {
      opacity: 1;
      transition-delay: 520ms;
      -webkit-transform: translateY(0px);
              transform: translateY(0px); }
    .menTabParent:hover .app-image img {
      width: 50%; }
  .menTabParent:hover .app-image {
    width: 25%;
    float: left;
    margin: 0;
    text-align: center;
    padding: 1em 0em; }
    .menTabParent:hover .app-image:nth-of-type(14) {
      opacity: 1;
      transition-delay: 560ms;
      -webkit-transform: translateY(0px);
              transform: translateY(0px); }
    .menTabParent:hover .app-image img {
      width: 50%; }
  .menTabParent:hover .app-image {
    width: 25%;
    float: left;
    margin: 0;
    text-align: center;
    padding: 1em 0em; }
    .menTabParent:hover .app-image:nth-of-type(15) {
      opacity: 1;
      transition-delay: 600ms;
      -webkit-transform: translateY(0px);
              transform: translateY(0px); }
    .menTabParent:hover .app-image img {
      width: 50%; }
  .menTabParent:hover .app-image {
    width: 25%;
    float: left;
    margin: 0;
    text-align: center;
    padding: 1em 0em; }
    .menTabParent:hover .app-image:nth-of-type(16) {
      opacity: 1;
      transition-delay: 640ms;
      -webkit-transform: translateY(0px);
              transform: translateY(0px); }
    .menTabParent:hover .app-image img {
      width: 50%; }

.app--display {
  position: absolute;
  right: calc(50% - 17px);
  top: 100%;
  width: 350px;
  z-index: 9;
  transition: all 0ms ease;
  -webkit-transform: translateY(10px);
          transform: translateY(10px);
  visibility: hidden;
  box-shadow: 0px 0px 13px rgba(0, 0, 0, 0.7); }

.app-container {
  background: #19212B;
  position: relative;
  top: 0px; }

.is-app--triangle {
  height: 20px;
  width: 20px;
  background: #19212B;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  position: absolute;
  top: -10px;
  right: 4px; }

.app-grid {
  padding: 1em; }
  .app-grid:after {
    content: '';
    position: relative;
    display: block;
    clear: both; }

.app-image {
  width: 25%;
  float: left;
  margin: 0;
  text-align: center;
  padding: 1em 0em;
  opacity: 0;
  transition: opacity 200ms ease, -webkit-transform 200ms;
  transition: transform 200ms, opacity 200ms ease;
  transition: transform 200ms, opacity 200ms ease, -webkit-transform 200ms;
  -webkit-transform: translateY(5px);
          transform: translateY(5px);
  cursor: pointer; }
  .app-image img {
    width: 50%; }
  .app-image:hover {
    background: #10151b; }

.view {
  margin-left: 150px;
  display: flex;
  padding-top: 4em;
  position: relative; }
  .view:after {
    content: '';
    position: relative;
    display: block;
    clear: both; }

.full-email-view {
  width: 100%; }

.email-view--inner {
  padding: 3em 1em;
  max-width: 1000px;
  width: 90%;
  border: 1px solid #ECEAEA;
  margin: auto;
  font-size: 70%; }

.from {
  display: flex;
  align-items: center; }

.fromImg {
  max-width: 100px;
  width: 100%;
  height: 120px;
  background: #eee;
  background-size: cover;
  background-position: center;
  margin-right: 1em; }

.emailSection {
  padding: 0.26em 0em;
  line-height: 1.5; }

.is-default {
  color: #9B9B9B; }

.the-email {
  line-height: 2;
  color: #696969;
  padding-top: 2em;
  font-size: 85%; }

.img-grid {
  max-width: 500px;
  display: flex;
  flex-wrap: nowrap; }
  .img-grid img {
    margin: 0.3em;
    width: 100%; }

.the-reply {
  background: #eee;
  padding: 1em;
  margin: 2em 0em 0em 0em;
  display: flex; }

.hasImgReply {
  max-width: 70px;
  width: 100%;
  margin-right: 1em; }

.hasSettingsReply {
  padding-top: 0.6em; }
  .hasSettingsReply .emailSection {
    color: #262F3D !important;
    font-size: 80%; }
  .hasSettingsReply .emailSection {
    padding: 0.5em 0em; }

.addForward {
  background: #ddd;
  padding: 0.2em 0.5em;
  color: #999;
  cursor: pointer; }

.replyImg {
  width: 100%;
  max-width: 70px;
  border-radius: 100%; }

.isReplyParent {
  background: #eee;
  padding-bottom: 1em; }

.replyBox {
  width: calc(100% - 1.5em);
  margin: auto;
  position: relative; }
  .replyBox:after {
    content: '';
    position: relative;
    display: block;
    clear: both; }
  .replyBox textarea {
    margin: 0;
    padding: 0.2em 0em 0em 0.2em;
    background: white;
    border: none;
    outline: none;
    height: 100px;
    min-height: 100px;
    max-height: 100px;
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    font-family: Arial, Helvetica, sans-serif; }
  .replyBox input {
    float: right;
    margin: 1.5em 0em 1em 0em;
    background-color: #19212B;
    color: white;
    padding: 1em 4em;
    border: none;
    outline: none; }

.replyActions {
  position: absolute;
  right: 11em;
  display: inline-block !important;
  visibility: visible !important; }
  .replyActions ul {
    margin: 0;
    padding: 1.7em 0em 0em 0em;
    display: inline-block !important;
    visibility: visible !important; }
  .replyActions li {
    opacity: 1 !important;
    margin-left: 0.6em;
    display: inline-block !important;
    -webkit-transform: translateY(0px) !important;
            transform: translateY(0px) !important; }
  .replyActions svg {
    width: 18px;
    cursor: pointer; }

.emailBubble {
  font-size: 10px;
  margin-left: 10px;
  background: #f2f2f2;
  padding: 5px 10px;
  border-radius: 10px; }

@media (min-width: 1200px) {
  .fromImg {
    max-width: 140px; }
  .email-view--inner {
    font-size: 90%; } }

@media (min-width: 1600px) {
  .full-email-view {
    margin-right: 150px; } }

.is-settings--parent {
  position: relative; }
  .is-settings--parent:hover .settings-el {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
    visibility: visible;
    transition: -webkit-transform 300ms ease;
    transition: transform 300ms ease;
    transition: transform 300ms ease, -webkit-transform 300ms ease; }
    .is-settings--parent:hover .settings-el li {
      opacity: 1; }

.settings-el {
  position: absolute;
  width: 100%;
  top: 100%;
  z-index: 9;
  transition: all 0ms ease;
  visibility: hidden;
  -webkit-transform: translateY(10px);
          transform: translateY(10px); }

.settings--options {
  background: #19212B;
  border-radius: 10px;
  box-shadow: 0px 0px 60px black; }

.settings-el ul {
  margin: 0 auto;
  list-style-type: none;
  padding: 0;
  width: 100%;
  margin-top: 1.5em; }
  .settings-el ul li {
    padding: 1.3em 0em;
    font-size: 70%;
    text-align: center;
    color: #999;
    cursor: pointer;
    opacity: 0; }
    .settings-el ul li.current-account, .settings-el ul li:hover {
      color: white; }

.triangle {
  position: absolute;
  height: 20px;
  width: 20px;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  background: #19212B;
  top: 0.9em;
  left: 50%;
  margin-left: -10px; }

.opt {
  padding-top: 0.4em; }
  .opt:after {
    content: '';
    position: relative;
    display: block;
    clear: both; }

.opt-item {
  width: 50%;
  float: left;
  height: 3em;
  position: relative;
  font-size: 65%;
  text-align: center;
  cursor: pointer; }
  .opt-item span {
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    width: 100%; }

#isAccount {
  border-bottom-left-radius: 10px;
  background: #E2664D;
  color: white;
  font-weight: bolder; }

#isSettings {
  border-bottom-right-radius: 10px; }
  #isSettings svg {
    stroke: #999; }

.hangout-bubbles {
  height: 60px;
  bottom: 40px;
  position: absolute;
  width: 60px;
  left: 50%;
  z-index: 5;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%); }

.is-hangout-contact {
  transition: all 350ms cubic-bezier(0.895, 0.03, 0.685, 0.22);
  opacity: 0; }
  .is-hangout-contact:nth-of-type(1) {
    background: #67B36F;
    border: 3px solid #67B36F; }
  .is-hangout-contact:nth-of-type(2) {
    border: 3px solid #039BE5;
    background: #D3AFAF; }
  .is-hangout-contact:nth-of-type(3) {
    border: 3px solid #F6C953; }
  .is-hangout-contact:nth-of-type(4) {
    border: 3px solid #E2664D; }
  .is-hangout-contact img {
    border-radius: 100%; }

.is-bubble {
  width: 60px;
  height: 60px;
  border-radius: 100%;
  background: orange;
  position: absolute;
  cursor: pointer; }
  .is-bubble img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0; }

.is-notify {
  background: #262F3D;
  z-index: 9;
  border: 3px solid transparent; }

.notify-bubble {
  height: 20px;
  width: 20px;
  transition: all 200ms ease;
  background: red;
  border-radius: 100%;
  position: absolute;
  top: 0px;
  right: 0px;
  text-align: center;
  color: white;
  font-size: 12px; }

.create-msg {
  height: 20px;
  width: 20px;
  transition: all 200ms ease;
  background: #E2664D;
  border-radius: 100%;
  position: absolute;
  top: 0px;
  right: 0px;
  text-align: center;
  color: white;
  font-size: 12px; }

.add-chat {
  position: absolute;
  top: 45%;
  left: 50%;
  width: 60%;
  -webkit-transform: translate(-50%, -50%) rotate(45deg);
          transform: translate(-50%, -50%) rotate(45deg); }

.messageIcon {
  stroke: #ffffff;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 50%;
  transition: all 200ms cubic-bezier(0.165, 0.84, 0.44, 1); }

.pencil {
  width: 50%;
  position: absolute;
  top: 55%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  fill: #fff; }

.alert-num {
  padding-top: 0.2em;
  display: inline-block; }

.showing-hangout .is-hangout-contact:nth-of-type(1) {
  visibility: visible;
  -webkit-transform: translateY(-80px);
          transform: translateY(-80px);
  opacity: 1;
  transition-delay: 250ms !important;
  transition: all 250ms cubic-bezier(0.14, 0.48, 0.12, 1.41); }

.showing-hangout .is-hangout-contact:nth-of-type(2) {
  visibility: visible;
  -webkit-transform: translateY(-160px);
          transform: translateY(-160px);
  opacity: 1;
  transition-delay: 250ms !important;
  transition: all 250ms cubic-bezier(0.14, 0.48, 0.12, 1.41); }

.showing-hangout .is-hangout-contact:nth-of-type(3) {
  visibility: visible;
  -webkit-transform: translateY(-240px);
          transform: translateY(-240px);
  opacity: 1;
  transition-delay: 250ms !important;
  transition: all 250ms cubic-bezier(0.14, 0.48, 0.12, 1.41); }

.showing-hangout .is-hangout-contact:nth-of-type(4) {
  visibility: visible;
  -webkit-transform: translateY(-320px);
          transform: translateY(-320px);
  opacity: 1;
  transition-delay: 250ms !important;
  transition: all 250ms cubic-bezier(0.14, 0.48, 0.12, 1.41); }

.showing-hangout .main-notify {
  -webkit-transform: translateY(20px);
          transform: translateY(20px);
  opacity: 0; }

.showing-hangout .messageIcon {
  -webkit-transform: translate(-50%, -50%) scale(0.5);
          transform: translate(-50%, -50%) scale(0.5);
  opacity: 0;
  transition: all 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275); }

.showing-hangout .closeCross svg {
  -webkit-transform: translate(-50%, -50%) scale(1);
          transform: translate(-50%, -50%) scale(1);
  visibility: visible;
  transition-delay: 200ms;
  opacity: 1;
  transition: all 300ms ease; }

.closeCross svg {
  stroke: #ffffff;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%) scale(0.4);
          transform: translate(-50%, -50%) scale(0.4);
  visibility: hidden;
  width: 60%;
  transition-delay: 0ms;
  opacity: 0;
  transition: all 220ms cubic-bezier(0.165, 0.84, 0.44, 1); }

.chats {
  height: 450px;
  left: 150px;
  width: 350px;
  background: #ffffff;
  z-index: 5;
  position: fixed;
  bottom: 0;
  -webkit-transform: translateY(10px);
          transform: translateY(10px);
  visibility: hidden;
  border-top: 8px solid #67B36F; }
  .chats.is-active {
    box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.2);
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
    transition: all 200ms ease;
    visibility: visible; }

.sender-chat {
  display: flex; }

.chats .inner {
  padding: 1.5em 1.5em 0em 1.5em; }

.hasAv {
  width: 120px;
  height: 100px;
  background: grey; }

.sender_name {
  padding: 0em 1em 0em 1em;
  color: #696969; }
  .sender_name p {
    margin: 0; }
  .sender_name .sender-email {
    font-style: italic;
    color: #696969; }

.chat-view {
  width: 100%;
  height: 180px;
  background: #eee;
  margin-top: 1em;
  overflow: scroll;
  border-radius: 10px; }
  .chat-view p {
    padding: 0em 1em;
    font-size: 13px; }

.fakeMsg {
  background: white;
  width: 90%;
  margin: 0.6em auto;
  padding: 0.4em 0.3em;
  border-radius: 10px; }

.msg-chat {
  padding-top: 0.5em; }

.getName {
  color: #696969;
  font-style: italic; }

.chatImg {
  background-size: cover;
  background-position: center; }

.txtArea {
  height: 50px;
  max-height: 50px;
  min-height: 50px;
  width: calc(100% - 10px);
  margin: 0;
  background: #19212B;
  color: white;
  padding: 0;
  border: 1px solid #ECEAEA;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  padding: 5px;
  outline: none; }

.msg-chat input[type="submit"] {
  border: 2px solid #039BE5;
  padding: 1em 3em;
  color: #039BE5;
  font-weight: bolder;
  float: right;
  margin-top: 5px;
  background: transparent;
  border-radius: 0px;
  outline: none;
  -webkit-appearance: none; }

.closeChat {
  position: absolute;
  right: 0.6em;
  top: 0.5em;
  cursor: pointer;
  width: 25px; }
  .closeChat svg {
    stroke: #ddd; }


            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console