button.table-action-button.open-detail {
  background-color: gray; }

tr.user-detail table {
  border-collapse: collapse;
  border-radius: 5px;
  overflow: hidden;
  border: solid 1px gray;
  background: gray; }
  tr.user-detail table tr {
    border-bottom: dotted 0.5px #c1c1c1; }
    tr.user-detail table tr span.lable {
      position: absolute;
      left: -38px;
      background-color: #ffe5e5;
      width: 120px;
      transform: rotate(-45deg);
      top: 6px;
      padding: 9px;
      font-weight: bold; }
    tr.user-detail table tr span.lable small {
      font-weight: bold; }
    tr.user-detail table tr:hover {
      background-color: transparent; }
    tr.user-detail table tr fieldset {
      border: 1px dashed #414f68; }
    tr.user-detail table tr legend {
      color: #414f68; }
  tr.user-detail table td:not(.main-box-td) {
    border: none !important;
    text-align: right;
    height: 50px; }
    tr.user-detail table td:not(.main-box-td).header-user {
      text-align: center;
      margin-bottom: -8px; }
      tr.user-detail table td:not(.main-box-td).header-user p.feild-info {
        text-align: center; }
    tr.user-detail table td:not(.main-box-td) .information-feild {
      width: 100%; }
      tr.user-detail table td:not(.main-box-td) .information-feild .feild-title {
        padding: 0px 15px;
        width: 40%;
        display: inline-block; }
      tr.user-detail table td:not(.main-box-td) .information-feild .feild-info {
        width: 54%;
        padding: 0px 15px 0px 0px;
        display: inline-block; }
        tr.user-detail table td:not(.main-box-td) .information-feild .feild-info b.second-item {
          position: absolute;
          top: 16px; }

.details-header {
  width: 60%;
  margin: 5px auto; }
  .details-header ul {
    margin-bottom: 10px !important; }
    .details-header ul li {
      text-align: center;
      font-weight: bold;
      width: 25%;
      color: gray;
      font-size: 13px;
      border-bottom: 3px solid lightgray;
      margin: 0 !important;
      cursor: pointer; }
      .details-header ul li input[type=radio] {
        position: absolute;
        opacity: 0;
        z-index: -1; }
      .details-header ul li label {
        display: block;
        padding: 10px 10px;
        cursor: pointer; }
    .details-header ul li.active {
      float: right;
      border-bottom: 3px solid #0aaff3;
      margin-bottom: 0 !important;
      margin-right: 0;
      color: #0aaff3; }
    .details-header ul.three-tabs li {
      width: 33.3333%; }

.details-tabs {
  float: right;
  width: 100%;
  margin-top: 30px; }

.main-box-td > div {
  min-height: 80px; }

.left-answer {
  FLOAT: left !important; }
  .left-answer .chat-box i, .left-answer .chat-box span.roll {
    left: 13px;
    right: inherit !important;
    background-color: #dbffdb; }
  .left-answer .chat-box {
    padding: 15px 15px 15px 40px !important;
    margin-right: 0 !important;
    margin-left: 20px !important;
    background-color: #dbffdb; }
  .left-answer .chat-box span.botton-date {
    left: initial !important;
    right: 25px; }

tr.support-agency {
  background-color: #95f0ff; }

.more-action {
  position: absolute;
  left: 30px;
  top: 15px; }
  .more-action button {
    width: 30px;
    height: 30px;
    position: relative; }
    .more-action button.edit {
      background-color: #4fff9e; }
    .more-action button.remove {
      background-color: red; }
    .more-action button i {
      left: 0;
      right: 0;
      top: 0;
      border: 0;
      background-color: transparent; }

.chat-box {
  border-radius: 10px;
  background-color: whitesmoke;
  padding: 15px 40px 15px;
  margin-right: 20px;
  border: 1px solid lightgray; }
  .chat-box p {
    text-align: right; }
  .chat-box span.roll {
    top: 27px !important; }
  .chat-box span.botton-date {
    position: absolute;
    left: 24px;
    bottom: 5px;
    color: gray;
    font-size: 9px; }
  .chat-box i, .chat-box span.roll {
    position: absolute;
    right: 13px;
    background-color: whitesmoke;
    padding: 8px;
    border-radius: 100%;
    top: 3px;
    /* font-size: 20px !important; */
    /* color: lightgray; */
    border: 1px solid lightgray; }

@media only screen and (min-width: 768px) and (max-device-width: 1024px) {
  tr.user-detail table td .information-feild .feild-title {
    font-size: 11px;
    padding: 0px; }
  tr.user-detail table td .information-feild .feild-info {
    width: 40% !important;
    font-size: 11px;
    white-space: nowrap;
    padding: 0px; } }

@media only screen and (max-width: 767px) {
  tr.user-detail table {
    background: unset !important; }
    tr.user-detail table td.col-md-3.col-xs-4 {
      border-bottom: dashed 0.5px #c1c1c1 !important; }
      tr.user-detail table td.col-md-3.col-xs-4 .information-feild .feild-title {
        width: 40% !important; }
        tr.user-detail table td.col-md-3.col-xs-4 .information-feild .feild-title span {
          font-size: 10px; }
    tr.user-detail table tr {
      border: solid 0.5px gray !important;
      border-bottom: none !important; }
      tr.user-detail table tr span.lable {
        left: -6px;
        top: -14px; }
      tr.user-detail table tr.ng-scope {
        height: auto;
        min-height: 275px;
        overflow-y: scroll; }
        tr.user-detail table tr.ng-scope fieldset {
          padding: 10px 0px;
          min-height: 250px; }
        tr.user-detail table tr.ng-scope .col-md-4.col-xs-4 {
          width: 97%;
          height: 50px;
          border-bottom: dashed 0.5px #c1c1c1 !important;
          padding: 10px; }
          tr.user-detail table tr.ng-scope .col-md-4.col-xs-4 .information-feild .feild-info b.second-item {
            top: 26px; }
    tr.user-detail table .information-feild {
      text-align: right; } }

@media only screen and (max-width: 330px) {
  tr.user-detail table td .information-feild .feild-title span {
    font-size: 10px; } }