@import "../../../assets/css/abstracts/custom-variables.scss";

// -----------------------------------
// ------ CHAT ARCHIVES
// -----------------------------------

$profile-size: 40px;
$current-user-bubble-color: $gray-100;
$other-user-bubble-color: $blue-100;

.table.vertical-align {
  > tbody > tr > td {
    vertical-align: middle;
  }
}

.form-inline-mobile .form-control {
  display: inline-block;
  width: auto;
  vertical-align: middle;
}
@media only screen and (max-width: 768px) {
  .app-controls {
    float: none !important;
  }
}

// ---------------
// -- UNREAD MESSAGE
//----------------
.unread {
  font-weight: 700;

  &::before {
    content: '';
    background: currentColor;
    height: 8px;
    width: 8px;
    display: inline-block;
    border-radius: 350px;
    margin: 0px 4px 0px 0px;
  }
}

// ---------------
// -- PREVIEW WITH IMAGE STYLING
// ---------------
.message-image-icon {
  margin-right: 3px;
}

// ----------------------
// -- CHAT ARCHIVE TABLE - PROFILE IMAGE STYLE
// ----------------------
.user-images {
  display: inline-block;
}

.profile-communication {
  border: 2px solid transparent;
}

// ----------------------
// -- CHAT ARCHIVE TABLE - MULTIPLE PROFILE IMAGE STYLING
// ----------------------
.profile-table {
  display: inline-block;
  width: $profile-size;
  height: $profile-size;
  position: relative;
  transform: translate(0,0);
  transition: 0.3s;
  &:hover {
    opacity: 1;
  }
  .profile-communication {
    width: 100%;
    background-color: #fff;
  }
  & + .profile-table {
    margin-left: -20px;
    .profile-communication {
      border-color: #fff;
    }
  }
}


// ----------------------
// -- MULTIPLE PROFILE IMAGE STYLING - MODAL
// ----------------------
.user-modal .modal-body a {
  display: block;
  margin-bottom: 5px;
  .profile-img {
    margin-right: 5px;
  }
}

// ----------------------
// -- COMPOSE MODAL
// ----------------------

.messages-modal {
  .toggle_sending_options {
    display: block;
    clear: both;
  }
  .input-group, .btn-group, .btn {
    float: none;
  }
  @media only screen and (min-width:922px) {
    .modal-lg.modal-dialog {
      width: 840px
    }
  }
  @media only screen and (min-width: 1200px) {
    .modal-lg.modal-dialog {
      width: 980px
    }
  }
}

// -----------------------------------
// ------ CHAT PAGE
// -----------------------------------
.profile-size {
  width: $profile-size;
}


// -----------------------------------
// ------ CHAT USERS
// -----------------------------------
.chat-users-message {
  position: relative;
  .users {
    white-space: nowrap;
    overflow: hidden;
    .profile {
      display: inline-block;
      margin-right: 2px;
      text-decoration: none;
      text-align: center;
      .chat-user-names {
        width: 50px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        display: block;
        color: $gray-700;
        font-size: 85%;
      }
    }
  }


  // -----------------------------------
  // ------ SEE MORE BUTTON (DISPLAYS ON DEVICES WITH SMALL VIEWPORTS)
  // -----------------------------------
  .see-more {
    position: absolute;
    right: 0;
    top: 0;
    padding-left: 10px;
    text-align: center;
    visibility: hidden;
    opacity: 0;
    background: #fff;
    &::after {
      content:'';
      position: absolute;
      background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 54%,rgba(255,255,255,1) 100%);
      width: 50px;
      top: 0;
      left: -40px;
      bottom: 0;
    }

    span {
      display: block;
    }
    // -----------------------------------
    // ------ BUBBLE WITH NUMBER INSIDE
    // -----------------------------------
    .number-bubble {
      color: #fff;
      display: inline-block;
      font-size: 20px;
      padding: 5px 0;
      border-radius: 350px;
      height: 40px;
      width: 40px;
      vertical-align: middle;
      border:none;
        outline: none;

        &:hover {
            opacity: 0.8;
        }
    }
  }

  // -----------------------------------
  // ------ SEE MORE BUTTON (DISPLAYS ON DEVICES WITH SMALL VIEWPORTS) - DISPLAY WHEN TRIGGERED
  // -----------------------------------
  .see-more.show {
    visibility: visible;
    opacity: 1;
  }
}


// -----------------------------------
// ------ EDITABLE SUBJECT
// -----------------------------------
.subject-wrapper {
  margin: 10px 0;
  .subject {
    font-size: 20px;
    padding: 4px 8px;
  }
}



// -----------------------------------
// ------ CHAT DATE/ CHAT SUBJECT STYLE
// -----------------------------------
.message-date-wrapper, .message-subject-wrapper {
  text-align: center;
  position: relative;
  clear: both;
  margin-bottom: 10px;

  .message-date, .message-subject {
    background: #fff;
    z-index: 5;
    position: relative;
    padding: 0 15px;
  }
  .message-subject {
    color: $gray-700;
    font-weight: 700;
  }
}

// ------------------
// ------ CHAT DATE SPECIFIC
// -----------------
.message-date-wrapper {
  &::after {
    content: '';
    height: 1px;
    background: $gray-400;
    right: 0;
    left: 0;
    position: absolute;
    top:12px;
  }
}

// -----------------------------------
// ------ CHAT BUBBLE
// -----------------------------------
// --------------------
// ------ CLEAR LINE
// --------------------
.message-block::after {
  content: " ";
  display: block;
  height: 0;
  clear: both;
}

.user-name {
  width: 90px;
  line-height: 1.1;
  margin-bottom: 10px;
}

// -----------------------------------
// ------ MESSAGE STRUCTURE
// -----------------------------------
// ----------------
// ------ MESSAGE WIDTH
// ----------------
.message-wrapper {
  width: 55%;
}

// ----------
// ------ MESSAGE WIDTH ON TABLET
// ----------
@media only screen and (max-width:768px) {
  .user-name {
    width: 60px;
  }

  .message-wrapper {
    width: 80%;
  }

  // ----------
  // ------ MESSAGE WIDTH ON TABLET - META DATA
  // ----------
  .chat-metadata {
    .date-sent {
      display: block;
    }
    .quote-message {
      margin-right: 0;
    }
  }

}

// ----------
// ------ MESSAGE WIDTH ON TABLET
// ----------
@media only screen and (max-width:400px) {
  .message-wrapper {
    width: 100%;
  }

  .user-name {
    width: 45px;
  }

  .profile-size {
    width: 30px;
    margin-top: 5px;
  }


}

.subject-input {
  width: 100%;
  border: 1px solid $gray-300;
  transition: 0.3s;
}

.subject-input:hover {
  border:1px solid darken($gray-300, 10%);
  transition: 0.3s;
}

.subject-input:focus {
  border: 1px solid darken($gray-300, 15%);
  outline: none;
  transition: 0.3s;
}

.message-input {
  position: relative;
  overflow: visible;

  // ----------
  // ------ MESSAGE TAIL
  // ----------
  &::after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border: 19px solid transparent;
    border-top: 0;
  }
}

// -----------------------------------
// ------ CHAT BUBBLE STYLE
// -----------------------------------
.text-bubble {
  padding: 10px;
  position: relative;
  word-break: break-word;

  p {
    margin: 0;
  }

  img {
      height: auto !important;
      max-width: 100%;
      cursor: pointer;
      max-height: 550px;
      width: auto !important;
  }

}

// -----------------------------------
// ------ CHAT BUBBLE STYLE - CURRENT USER
// -----------------------------------
.current-user {
  .message-wrapper {
    float: right;
    .message-input {
      // ----------
      // ------ CHAT BUBBLE TAIL - CURRENT USER SPECIFIC
      // ----------
      &::after {
        right: -15px;
        top: 20px;
        border-left-color: $current-user-bubble-color;
        border-right: 0;
      }

      .chat-metadata
      {
        text-align: right;
      }
    }
    .text-bubble {
      background-color: $current-user-bubble-color;
    }
  }
}


// -----------------------------------
// ------ CHAT BUBBLE STYLE - OTHER USER
// -----------------------------------
.other-user {
  .message-input {
    // ----------
    // ------ CHAT BUBBLE TAIL - OTHER USER SPECIFIC
    // ----------
    &::after {
      left: -15px;
      top: 20px;
      border-right-color: $other-user-bubble-color;
      border-left: 0;
    }
  }
  .text-bubble {
    background-color: $other-user-bubble-color;
    color: #000;
  }

    .message-from-link:hover {
        text-decoration: none;
    }
}

// ---------------
// ------ CHAT BUBBLE STYLE - META DATA
// ---------------
.chat-metadata {
  margin: 5px 0 15px;
  a {
    margin-right: 10px;
    cursor: pointer;
  }
}

.nested_blockquote {
  display: none;
}



// -----------------------------------
// ------ LIGHTBOX MODAL
// -----------------------------------

.image-expand-modal {
  background: rgba(0,0,0,0.8);
  .modal-dialog {
    text-align: center;
    .close {
      background: rgba(255,255,255,.8);
      opacity: 1;
      padding: 5px 10px;
      border: none;
      border-radius: 350px;
      margin-bottom: 10px;
      cursor: pointer;
      float: none;
      vertical-align: middle;
      font-weight: normal;
      font-size: 14px;
      text-shadow: none;
    }
    img {
      box-shadow: 0 0 5px 5px rgab(0,0,0,0.2);
      max-width: 100%;
    }
  }
}

.validation-add-message, .validation-add-user {
	color: $red-600;
	font-weight: 700;
}

// -----------------------------------
// ------ DELETE TEXT BUBBLE
// -----------------------------------
.delete-out {
  overflow: hidden;

  // -----------------------------------
  // ------ PUSHES BUBBLE OUT OF VIEW
  // -----------------------------------
  .message-wrapper {
    transform: translateX(110%);
    transition: 0.3s;
  }
}
// -----------------------------------
// ------ CLOSES HEIGHT OF BUBBLE
// -----------------------------------
.delete-out-height {
  height: 0 !important;
  transition: 0.2s;
}


// -----------------------------------
// ------ PRE SCSS FILE STYLING
// -----------------------------------
#CommsImportToIE { margin: 5px 0 0 0; border-top: 1px solid #8D8D8D; width:100%; }
#CommsImportToIE img { vertical-align:middle; }

#CommsInternetLinks { border-collapse:collapse; }
#CommsInternetLinks td { border: 0; padding:0 3px 0 3px; }
#CommsTableOptions { border-top: 0; border-bottom:1px solid #8D8D8D; padding: 0 0 5px 0; }
#CommsImportLinks h5 { font-size: 14px; }

.CommsListPath {
  line-height: 20px;
  height: 20px;
  padding: 3px 0;
  float: none !important;
}

.CommsListPath img {
  vertical-align: middle;
  display: inline;
}

.CommsListPath a {
  margin-left: 10px;
  color: Black;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 10px;
  letter-spacing: -0.05em;
  margin: 0 10px 0 0;
}

.up_div
{
  position:absolute;
  width:159px;
  float:left;
  border: solid 1px #555555;
  background-color: #ffffff;
  font-size:0.7em;
  z-index:10000!important;
}

.IMUnread {
  font-weight: bold;
}
.IMTextPreview {
  color: gray;
}
.IMText {
  overflow: hidden;
  -webkit-transition: max-height .3s ease-in-out, color .3s linear;
  -moz-transition: max-height .3s ease-in-out, color .3s linear;
  transition: max-height .3s ease-in-out, color .3s linear;
}
.IMText.active {
  color: inherit;
  max-height: 500px;
}

.im p {
  margin: 0;
}
.im .options {
  visibility: hidden;
  vertical-align: top;
}
.im img {
  max-width: 100%;
  height: auto !important;
}
.im:hover .options {
  visibility: visible;
}
.ie .im img {
  max-width: 200px;
}
.IM_OK_message { color: #1D8B3A; font-size: 1.3em }

/* ============== Survey ==================================================== */
#CommsSurvey { padding: 0px 10px 0px 10px; }
#CommsSurvey .submit_bttn { padding-left: 10px; padding-right: 10px; }
#CommsSurvey form { margin: 0px; }
#CommsSurveyNavigation a { margin-right: 40px; }
.SurveyVote { padding: 10px; }
.SurveyVote ul { padding: 0; margin: 0; list-style: none; }

* html .SurveyVote li { height: 15px;}

.SurveyVote li { display: block; min-height: 15px; text-align: left; }
.SurveyVote * td, .SurveyResults * td { text-align: left; }
.SurveyVote * .CommsHorizontal tr td { text-align: center; }
.SurveyCategories .title { font-size: 12px; font-weight: bold; }
.SurveyCategories ol { margin: 5px 10px 5px 30px; }
.SurveyCategories ol li { padding-top: 5px; padding-bottom: 5px; }
.SurveyCategoryCompleted {	color: #1D8B3A; }

.SurveyResults ul { margin: 0; padding: 0; list-style: none; width: 200px }

.CategoryTitles { background-color: #F2F2F2;  padding: 5px }
.CategoryTitles a { float: right; }
.CommsQuestion { font-weight: bold; }
.QuestionSubtitle { color: #666666; margin-bottom: 10px; font-style: italic;  }
.CommsQuestionVertical { clear: both; padding-top: 5px; padding-bottom: 10px; }
.CommsQuestionVertical img { vertical-align: top; margin-right: 5px; }
.OptionText { padding-right: 3px; padding-left: 3px; }
.OptionScore { padding-right: 3px; padding-left: 3px; color: #666666; }
.OptionTextShort { width: 200px; }
.OptionTextMedium { height: 50px; width: 300px; overflow: auto; }
.OptionTextLong { height: 100px; width: 300px; overflow: auto; }
.OptionBGLine input{display:block;}

.panel-question>.panel-heading{white-space:normal;overflow:visible;}
/* ============== Survey end =================================================*/

/* ============== Reset Settings ==================== */

@media only screen and (max-width : 480px) {
  .table > thead > tr > th,
  .table > tbody > tr > th,
  .table > tfoot > tr > th,
  .table > thead > tr > td,
  .table > tbody > tr > td,
  .table > tfoot > tr > td {
    padding: 8px 4px;
  }
}


/* ============== Reset Settings End =============== */
