popup.css

      * {
        box-sizing: border-box;
      }
      body {
        font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
        color:#444;
        min-width:300px;
        text-align:center;
        padding: 5px;
      }
      body a {
        cursor:pointer;
        transition:color .1s;
      }
      textarea {
        font-family: "Raleway";
        height:14px;
        overflow:hidden;
        text-align: center;
        border:0;
        background:none;
        resize:none;
        box-shadow:none;
        outline:none;
        cursor:pointer;
        width:100%;
        display:inline-block;
        margin:0;
        padding: 12px 36px 12px 0;
      }
      input[type=text], input[type=url] {
        display:block;
        margin:0 auto;
        width:100%;
        text-align: left;
        border-radius:4px;
        border:1px solid #aaa;
        height:20px;
        padding: 12px;
      }
      .linkOptions {
      }
      .copyAsapContainer {
        display: inline-block;
        height: 48px;
        width: 50%;
      }
      .generateButton:hover {
        font-family: "Raleway";
        background-color: #0F495C;
        color:#fff;
      }
      .generateButton {
        background-color:#666;
        border-color: #0F566C;
        padding:12px;
        margin-top:10px;
        display:inline-block;
        color:#fff;
        border-radius:4px;
        text-transform: uppercase;
        width: 40%;
      }
      .generateButton.disabled {
        cursor:wait;
        background-color:#333;
      }
      .formFields label {
        display:block;
        margin: 10px 0 6px 0;
        text-align: left;
      }
      .linkHolder {
        width:100%;
        margin-top:12px;
        position:relative;
        margin:10px auto;
        opacity:0;
        pointer-events:none;
        transition:opacity 1s linear;
        border: 1px dotted #083D41;
        border-radius:4px;
        overflow:hidden;
        padding:0;
        height:38px;
      }
      .linkHolder::after {
        content:'Copied to Clipboard';
        display:block;
        width:100%;
        height:14px;
        padding:12px 0;
        background:rgba(0,0,0,.8);
        color: #fff;
        bottom:0;
        left:0;
        position:absolute;
        pointer-events:none;
        transition:opacity 0.5s linear;
        opacity:0;
      }
      .linkHolder.copied::after {
        opacity:1;
        pointer-events:auto;
      }
      .loaded {
        opacity:1;
        pointer-events:inherit;
      }
      #copyButton {
        content:'';
        display:inline-block;
        float:right;
        padding:18px;
        background:url(copy.png) no-repeat center center #083D41;
        border-top-right-radius:4px;
        border-bottom-right-radius:4px;
        cursor:pointer;
        transition:background-color 1s linear;
        position: absolute;
        top: 0;
        right: 0;
      }
      #copyButton:hover {
        background-color:#2A5F63;
        transition:background-color .2s linear;
      }
    .alertContainer {
        transition: visibility 0.3s linear, opacity 0.3s linear;
        visibility: hidden;
        opacity: 0;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        border: 20px solid rgba(0, 0, 0, 0.5);
    }
    .alertContainer.showing {
        visibility:visible;
        opacity:1;
    }
    .alertContainer .wrapper {
        background-color: #fff;
        padding: 15px 10px 10px 10px;
        height: 100%;
        overflow-y: auto;
    }
    .alertContainer .message {
        padding-bottom: 10px;
        text-align: left;
    }