@import url(https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css);

.flag {
        /*margin-top: 0;*/
        /*margin-bottom: 24px;*/
        /*display: table;*/
        /*width: 100%;*/
        width: 366px;
    height: auto;
    position: fixed;
    top: 25px;
    right: 25px;
    z-index: 999999999;
      }

      .flag__image,
      .flag__body {
        display: table-cell;
        vertical-align: middle;
      }

      .flag.flag--top .flag__image,
      .flag.flag--top .flag__body {
        vertical-align: top;
      }

      .flag.flag--bottom .flag__image,
      .flag.flag--bottom .flag__body {
        vertical-align: bottom;
      }

      .flag__image {
        padding-right: 24px;
      }

      .flag__image > img {
        display: block;
        max-width: none;
      }

      .flag.flag--rev .flag__image {
        padding-right: 0;
        padding-left: 24px;
      }

      .flag__body {
        width: 100%;
      }

      .note {
        /*position: relative;*/
        overflow: hidden;
        color: white;
        background-color: #9b59b6;
      }

  .note--success {
        background-color: #27ae60;
      }

  .note--error {
        background-color: #e74c3c;
      }
      .note__icon,
      .note__text {
        padding: 24px;
      }

      .note__icon {
        min-width: 80px;
        text-align: center;
        font-size: 32px;
        background-color: rgba(0, 0, 0, 0.25);
      }

      .note__text {
        padding-right: 48px;
      }

      .note__close {
        position: absolute;
        top: 12px;
        right: 12px;
        width: 29px;
        line-height: 30px;
        font-size: 24px;
        text-align: center;
        color: white;
        background-color: rgba(0, 0, 0, 0.25);
        opacity: 1;
        transition: all 0.25s;
      }

      .note__close:hover {
        background-color: rgba(0, 0, 0, 0.15);
      }

      .note:hover .note__close {
        opacity: 1;
      }