tickets/app/assets/stylesheets/tickets/ticket_show.scss

@charset "utf-8";
@import "ticket_variables";
@import "common";
@import "classes";
#main-wrap .wrap-inner {
  padding-top: 20px !important;
}

#new-ticket .no-space {
  margin-bottom: 0px;
  display: none;
}

#connection-status {
  text-align: center;
}

#connection-status span.label {
  font-size: 14px;
  line-height: 18px;
}

#ticket_loader {
  text-align: center;
}

#tickets_list tbody tr {
  cursor: pointer;
}

#tickets_list th.sort-field {
  cursor: pointer;
}

#ticket_footer_pagination {
  text-align: center;
  @media screen and (max-width: 50rem) {
    text-align: left;
  }
}

#ticket_footer_pagination .pagination {
  margin: 0 0;
}

.ticket-home-btn-wrap {
  margin-bottom: 10px;
}

.ticket-home-btn-icon,
.ticket-external-link-icon {
  margin-right: 8px;
}

.ticket-refresh-btn,
.ticket-create-btn {
  margin-top: -14px;
}

.label {
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}

.ticket-modal {
  width: 80%;
  height: 700px;
  max-width: 1000px;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

.ticket-modal.modal.in {
  top: 0;
}

.ticket-modal .modal-body {
  max-height: 560px;
}

.ticket-modal .label-value {
  width: auto;
}

.search-wrap {
  display: inline-block;
}

#serach-btn {
  font-size: 20px;
  margin-right: 5px;
  font-weight: bold;
  text-decoration: none;
}

.search-box {
  display: none;
}

.search-box input {
  height: 14px;
}

@media screen and (max-width: 800px) {
  .ticket-modal .control-label {
    float: none;
    width: auto;
    text-align: left;
    padding: 0;
    margin-bottom: 2px;
  }
  .ticket-modal .form-horizontal .controls {
    margin-left: 0;
  }
  #new-ticket .no-space {
    margin-bottom: 10px;
  }
}

.t-list-unstyled {
  list-style: none;
  margin: 0;
  padding: 0;
}

.t-category {
  border-radius: 0.125rem;
  display: inline-block;
  padding: 4px 0.375rem;
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}

.t-category-primary {
  color: $white;
  background-color: $yellow;
}

.t-item {
  font-size: 0.8125rem;
  color: $gray;
  background-color: $white;
}

.t-btn {
  font-size: 0.75rem;
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  background-color: $white;
  padding: 7px 0.625rem;
  border-radius: $t-round;
  &:hover {
    text-decoration: none;
  }
}

.t-btn-primary {
  background-color: $primary;
}

.t-btn-danger {
  color: $white;
  background-color: $red;
  &:hover {
    color: $white;
  }
}

.t-depth-1 {
  margin-left: 1.5625rem;
}

.ticket-breadcrumb {
  width: 96%;
  margin: auto;
  max-width: 980px;
  background: none;
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  > li {
    text-shadow: none;
    font-size: 0.8125rem;
  }
}

// ticket notification
.notice {
  position: fixed;
  top: -5rem;
  font-size: 0.8125rem;
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  -webkit-transition: .15s all ease-in-out;
  transition: .15s all ease-in-out;
  -webkit-box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.1);
  margin: 0;
}

.notice-pop {
  left: 100px;
  padding: 20px 2rem;
  color: $white;
  background-color: rgba($black, 0.85);
  box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.1);
  &.in {
    top: 60px;
  }
}

.notice-close {
  margin-left: 0.625rem;
  font-size: 1.0375rem;
  vertical-align: middle;
  &:hover {
    cursor: pointer;
  }
}

.notice-bar-on {
  #main-wrap {
    padding-top: 70px;
  }
}

.notice-bar {
  position: fixed;
  left: 61px;
  width: 100%;
  color: $white;
  background-color: $red;
  padding: 10px;
  text-indent: 1rem;
  &.in {
    top: 40px;
  }
}

.ticket-wrap {
  position: relative;
  max-width: 1000px;
  width: 96%;
  margin: 0 auto;
}

.ticket-heading-wrap {
  background-color: $primary;
  -webkit-border-top-left-radius: 4px;
  -webkit-border-top-right-radius: 4px;
  -moz-border-radius-topleft: 4px;
  -moz-border-radius-topright: 4px;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  -webkit-transition: $t-normal all;
  transition: $t-normal all;
  &.active {
    background-color: $red;
  }
  .ticket-heading {
    color: $white;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: normal;
    font-size: 1.5rem;
    margin: 0;
    padding: 12px 4rem 12px 1rem;
  }
}

.ticket-heading-avatar {
  line-height: 1.3;
  display: inline-block;
}

.ticket-heading-avatar-name {
  font-size: 12px;
  font-family: $main-font;
}

.ticket-meta-wrap {
  background-color: $second;
  padding: 12px 1rem;
  .ticket-meta {
    color: #EDF0F1;
    float: left;
    font-size: 0.8125rem;
    // 700px
    @media screen and (max-width: 43.75rem) {
      margin-bottom: 10px;
    }
  }
  .ticket-state {
    float: right;
    > * {
      vertical-align: top;
    }
  }
  .ticket-urgent-btn {
    margin-right: 3px;
    color: $white;
    background-color: $gray;
    &.active {
      background-color: $red;
      color: $white;
    }
  }
  // 700px
  @media screen and (max-width: 43.75rem) {
    > div[class^="ticket-"] {
      float: none;
    }
  }
}

.ticket-internal-wrap {
    text-align: right;
}

.onoffswitch {
  position: relative;
  width: 70px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  display: inline-block;
  &:hover {
    .ticket-tooltip-wrap {
      display: block;
    }
  }
}

.ticket-tooltip-wrap {
  display: none;
  position: absolute;
  left: 0;
  top: -130%;
  background-color: rgba($black, 0.8);
  color: $white;
  z-index: 1000;
  padding: 6px 0.625rem;
  white-space: nowrap;
  font-family: $main-font;
}

.onoffswitch-checkbox {
  display: none;
}

.onoffswitch-label {
  display: block;
  overflow: hidden;
  cursor: pointer;
  border-radius: 0.125rem;
  margin-bottom: 0;
}

.onoffswitch-inner {
  display: block;
  width: 200%;
  margin-left: -100%;
  transition: margin .15s ease-in 0s;
}

.onoffswitch-inner:before,
.onoffswitch-inner:after {
  display: block;
  float: left;
  width: 50%;
  height: 28px;
  padding: 0;
  line-height: 28px;
  font-size: 12px;
  color: white;
  font-family: $main-font;
  box-sizing: border-box;
}

.onoffswitch-inner:before {
  content: "ON";
  padding-left: 10px;
  background-color: $red;
  color: $white;
}

.onoffswitch-inner:after {
  content: "OFF";
  padding-right: 10px;
  background-color: $subtle-black;
  color: $white;
  text-align: right;
}

.onoffswitch-switch {
  display: block;
  width: 18px;
  height: 18px;
  margin: 5px 6px;
  background: $white;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 40px;
  border-radius: 0.125rem;
  transition: all .15s ease-in 0s;
}

.onoffswitch-checkbox.active + .onoffswitch-label .onoffswitch-inner,
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
  margin-left: 0;
}

.onoffswitch-checkbox.active + .onoffswitch-label .onoffswitch-switch,
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
  right: 0px;
}

.ticket-action {
  position: absolute;
  right: 1.4rem;
  top: 1.4rem;
  transition: .3s all;
  .dropdown-menu {
    top: 120%;
    left: auto;
    right: 0;
    padding: 15px 0;
    border: none;
    border-radius: 0.125rem;
    min-width: 100px;
    .t-btn {
      i {
        margin-right: 0.3125rem;
      }
    }
    > li {
      > a {
        padding: 3px 0.75rem;
      }
    }
    li {
      > a {
        font-family: $main-font;
        &:hover {
          background-color: $second;
          background-image: none;
        }
      }
    }
    li {
      > .ticket-delete {
        &:hover {
          background-color: $red;
        }
      }
      > .ticket-close {
        &:hover {
          background-color: $yellow;
        }
      }
    }
  }
}

.ticket-dropdown-icon {
  color: rgba($white, 0.5);
  font-size: 1.2rem;
  text-align: center;
  padding: 2px 0.3125rem;
  border-radius: 0.25rem;
  border: 3px solid rgba($white, 0.5);
  transition: .2s all;
  &:hover {
    color: $white;
    border-color: $white;
    border-radius: 50%;
  }
}

.ticket-category {
  position: relative;
}

.ticket-category-dropdown {
  text-transform: uppercase;
  color: $white;
  &:hover {
    text-decoration: none;
    color: $white;
  }
}

.ticket-category-select {
  top: 120%;
  left: auto;
  right: 0;
  padding: 15px 0;
  border: none;
  border-radius: 0.125rem;
  min-width: 140px;
  .t-btn {
    i {
      margin-right: 0.3125rem;
    }
  }
  > li {
    > a {
      padding: 3px 0.75rem;
    }
  }
  li {
    > a {
      &:hover {
        background-color: $second;
        background-image: none;
      }
    }
  }
  li {
    > .ticket-delete {
      &:hover {
        background-color: $red;
      }
    }
    > .ticket-close {
      &:hover {
        background-color: $yellow;
      }
    }
  }
}

.ticket-query-wrap {
  -webkit-box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.1);
  box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.1);
  background-color: $white;
  padding: 10px 1.875rem 30px 1.875rem;
  margin-bottom: 30px;
}

.ticket-query {
  padding: 15px 0 20px 0;
  font-size: 0.9375rem;
}

.ticket-query-wrap:first-child {
  -webkit-border-bottom-right-radius: 0.25rem;
  -webkit-border-bottom-left-radius: 0.25rem;
  -moz-border-radius-bottomright: 0.25rem;
  -moz-border-radius-bottomleft: 0.25rem;
  border-bottom-right-radius: 0.25rem;
  border-bottom-left-radius: 0.25rem;
}

.ticket-query-wrap:nth-child(1n+2) {
  border-radius: 0.25rem;
}

// response
.ticket-response {
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  border: 1px solid lighten($gray, 40%);
}

.ticket-response-heading {
  background-color: $second;
  outline: 1px solid $second;
  display: block;
  padding: 6px 0.625rem;
  color: $white;
  font-size: 0.9375rem;
  margin: 0 0 20px;
  // cursor: pointer;
  -webkit-transition: .15s all;
  transition: .15s all;
  &.collapsed {
    margin: 0;
    background-color: $gray;
    outline-color: $gray;
    &:hover {
      background-color: $second;
      outline-color: $second;
    }
  }
  .ticket-response-heading-collapse {
    font-size: 1.2rem;
    padding: 2px 5px;
  }
}

.ticket-response-heading-icon {
  margin-right: 0.5rem;
}

.ticket-response-wrap {
  &.collapsed {
    height: 0;
    overflow: hidden;
  }
}

.ticket-response-item {
  margin: 35px auto;
  width: 90%;
}

.ticket-response-meta {
  margin-bottom: 10px;
  overflow: hidden;
}

.ticket-response-author {
  font-size: 1.25rem;
  display: inline-block;
  margin-right: 10px;
  color: $black;
}

.ticket-response-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  margin-right: 0.3125rem;
}

.ticket-response-created-date {
  display: inline-block;
  font-size: 0.8125rem;
  font-style: italic;
  color: $gray;
  border-bottom: 1px dotted darken($light-gray, 5%);
}

.ticket-response-delete-wrap {
  float: right;
}

.ticket-response-delete {
  font-family: $main-font;
  color: $gray;
  &:hover {
    text-decoration: none;
    color: $second;
  }
}

.ticket-response-content {
  border: 1px solid lighten($gray, 40%);
  padding: 15px 1.5rem;
  border-radius: 0.125rem;
  font-size: 0.9375rem;
  line-height: 1.6;
  overflow: auto;
  &.in-house {
    background-color: lighten($light-gray, 3%);
  }
}

.ticket-internal-response-wrap {
  margin-top: 20px;
}

.ticket-internal-response {
  display: inline-block;
  vertical-align: top;
  margin: 0 5px 10px 0;
  height: 44px;
  line-height: 44px;
  background: $gray;
  color: $white;
  padding: 0 0.625rem;
  font-family: $main-font;
  font-size: 14px;
  border-radius: $t-round;
}

.ticket-tag-member {
  display: inline-block;
  vertical-align: top;
}

.ticket-inhouse-heading {
  display: block;
  font-size: 12px;
}

// Override select2 styles, I need this evil power
#main-wrap {
  .select2-container-multi {
    margin-right: 0.9375rem;
    min-width: 200px;
    .select2-choices {
      border-radius: $t-round;
      background-image: none;
      .select2-search-field {
        input {
          padding: 10px 5px;
        }
      }
    }
    .select2-search-choice {
      padding: 10px 1.75rem 10px 0.7rem;
      border-color: lighten($gray, 20%);
      background: $white;
    }
    .select2-search-choice-close {
      right: 15px;
      left: auto;
      &:before {
        content: "\f057";
        font-family: FontAwesome;
        position: absolute;
        cursor: pointer;
        left: 6px;
        top: 6px;
        font-size: 0.9375rem;
        color: $gray;
      }
      &:hover {
        &:before {
          color: $red;
        }
      }
    }
  }
}

.select2-result-label {
  > span {
    white-space: nowrap;
  }
}

.fileupload {
  .thumbnail {
    max-width: 60%;
    height: auto;
  }
}

// editor
.ticket-editor {
  padding: 10px 1.8rem 20px;
}

.ticket-submit-btn {
  font-size: 14px;
  padding: 8px 1rem;
  font-family: FontAwesome, Roboto;
}

// Go back top
.go-back-top {
  background: $gray;
  color: $white;
  border-radius: 4px;
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  text-transform: uppercase;
  cursor: pointer;
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  -webkit-transition: .15s all;
  transition: .15s all;
  &:hover {
    border-radius: 50%;
    background-color: $primary;
  }
}

// ticket table
.ticket-table {
  td {
    white-space: nowrap;
  }
}

// create ticket
.ticket-create-form {
  .ticket-create-subject {
    width: 77%;
    margin-right: 0.625rem;
    height: 30px;
  }
  .ticket-create-type {
    width: 20%;
    height: 40px;
  }
}

.scroll-element {
  border: 20px solid #fff36f;
  padding: 0.625rem;
  border-radius: 0.25rem;
  -webkit-transition: border-color $t-normal linear;
  transition: border-color $t-normal linear;
}

// harry css starts here
.t-avatar {
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
  opacity: 0.6;
  -webkit-transition: all 1s linear;
  transition: all 1s linear;
  &.read {
    -webkit-filter: grayscale(0);
    filter: grayscale(0);
    opacity: 1;
  }
}


.ticket-response-content img, .ticket-query img{
  cursor: pointer;
}