body > .fullscreen-overlay {
  position: fixed;
}

.fullscreen-overlay {
  &.fixed {
     position:fixed; 
  }
  position: absolute;
  top: 0px;
  left: 0px;
  // just above drawer
  z-index: 10;


  height: 100%;
  width: 100%;

  overflow-x: hidden;
  overflow-y: auto;

  background-color: rgba($hb-grey-dark, 0.5);

  display:none;

}

.fullscreen-open {

  overflow: hidden;

  .fullscreen-overlay {
    display: block;
  }

}

.fullscreen-wrapper {
  margin: 0px 60px;

}

.fullscreen-credit-card {
  position: relative;
  background-color: #fff;
  border-radius: 3px;
  border: 1px solid rgba(0,0,0, 0.5);
  p {
     font-size: 12px; 
  }
}

.fullscreen-body {
  max-width: 960px;
  margin: 50px auto 250px;
  &.credit-card {
    max-width: 460px;
    margin: 50px auto;
    padding: 0;
    border: 0;
  }

  &.slim {
    max-width: 560px;
  }

  &.slimmer {
    max-width: 340px;

    .fullscreen-login {
      padding: 20px 20px;
      .well {
        padding: 8px;
      }
      h3 {
        padding: 6px 0;
      }
    }
  }

}

.fullscreen-card, .fullscreen-login {

  .empty {
    color: #999;
    font-style: italic;
  }

  position: relative;

  background-color: #fafafa;


  border-radius: 2px;
  border: 1px solid rgba(0,0,0, 0.3);

  padding: 20px 0px;

  h2{
    margin: 0;
    font-size: 20px;
    line-height: 28px;
  }
  h3 {
    margin: 0;
    font-size: 18px;
    line-height: 26px;
  }

}

.fullscreen-card--center, .fullscreen-login--center {
  h2, .flex-form-top {
    text-align: center;
    margin-bottom: 12px;
  }
}

.fullscreen-header {
  margin: 20px 0;


}
.fullscreen-card-preamble {
  margin-left: 20px;
  margin-right: 20px;

  .fullscreen-header {
    margin-top: 0;
    button{
      float:right;
      margin-left: 6px;
    }
    input {
      width: calc(100% - 170px);
      padding: 7px;
      padding-bottom: 8px;
    }
  }

}
.fullscreen-card-description {
  p {
  -ms-word-break: break-all;
     word-break: break-all;

     // Non standard for webkit
     word-break: break-word;

-webkit-hyphens: auto;
   -moz-hyphens: auto;
        hyphens: auto;
  }
}
.fullscreen-card-right{

  float: right;
   margin-right: 20px;
   width: 160px;

   h2 {
    margin-bottom: 17px;
   }


}
.fullscreen-card-left {
   margin-left: 20px;
   margin-right: 200px;
   padding-right: 10px;
   @include prefixer(box-sizing, border-box);
}

%card-shadow {
  border: 1px solid hsla(0,0%,87%,0.8);
  background: #fff;
  box-shadow: 0px 1px 2px hsla(0, 0%, 70%, 0.5);
}

.fullscreen-card {
  @include clearfix;
  .card-label {
    @extend %card-shadow;
    &.active {
      box-shadow: none;
      border-color: transparent;
    }
  }
  .card-comment {
    margin-bottom: 20px;
    > a {
      padding: 1px;
      border: 1px solid hsla(0,0%,87%,0.8);
      float: left;
      opacity: 0.9;
    }
  }

  .comment-body {
    border-radius: 0px 3px 3px 3px;
    position: relative;
    padding: 10px;
    margin-left: 34px;

    @extend %card-shadow;

    &:before, &:after {
      position: absolute;
      width: 0;
      height: 0;
      content: "";
      border-style: solid;
      border-color: transparent;
      pointer-events: none;
    }
    &:after {
      top: 0px;
      left: -9px;
      border-width: 0px 9px 10px 0;
      border-right-color: #fff;

    }
    &:before {
      top: -1px;
      left: -12px;
      border-width: 0px 9px 10px 1px;
      border-right-color: #ccc;
      border-right-color: hsla(0, 0%, 88%, 0.8);

    }

    .email-fragment {
      margin-bottom: 10px;
    }
    .email-hidden-toggle {
      display:none;
    }
  }
  .comment-text {
      -ms-word-break: break-all;
      word-break: break-all;

      // Non standard for webkit
      word-break: break-word;

      -webkit-hyphens: auto;
      -moz-hyphens: auto;
      hyphens: auto;
    }

}



.labels {
  list-style: none;
  margin:0;
  padding:0;
  h5 {
    margin-top: 0px;
  }
}

.labels li {
  margin-bottom: 10px;
  border-radius: 4px;
  cursor: pointer;
}

.labels li span {
  position:relative;
  padding: 10px;
  display:block;
  text-decoration: none;
  border-radius: 4px;
}


