view_private_message.css in Opigno messaging 8

#block-views-block-private-message-block,
#block-platon-content {
  /* margin-top: 90px; */
}

.view-private-message {
  background-color: #f6f6f6;
}

.view-private-message .new-message {
  background-color: #c3e86c;
  color: #fff;
  display: block;
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 25px;
  padding: 15px 20px;
  text-decoration: inherit;
  text-transform: uppercase;
  width: 100%;
}

.view-private-message .new-message i {
  font-size: 25px;
  margin-right: 22px;
  position: relative;
  top: 4px;
}

#load-previous-messages,
.view-private-message .pagination a {
  color: #0a71b4;
}

.view-private-message .new-message:hover {
  background-color: #9faf5b;
  text-decoration: inherit;
}

.view-private-message .messages {
  background-color: #5bb4d8;
  color: #fff;
  display: block;
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 20px;
  padding: 20px 20px;
  text-transform: uppercase;
  width: 100%;
  line-height: 1;
}

.view-private-message .messages::before {
  background: url('../img/icon-messages.png');
  content: '';
  display: inline-block;
  height: 27px;
  margin-right: 22px;
  vertical-align: middle;
  width: 24px;
}

.view-private-message .view-content {
  background-color: #f6f6f6;
  color: #3d3d3c;
  margin-bottom: 20px;
  max-height: 420px;
  overflow-y: auto;
  padding-right: 20px;
}

.view-private-message .views-row::before,
.view-private-message .views-row::after {
  clear: both;
  content: '';
  display: table;
}

.view-private-message .views-row {
  background-color: #fff;
  padding: 20px 0;
  position: relative;
  border-left: solid 2.5px #95d5f4;
  background-size: 200% 100%;
  background-image: linear-gradient(to right, #ffffff 50%, #95d5f4 50%);
  transition: background-position 0.2s;
}

.view-private-message .views-row:hover {
  background-position: -100% 0;
  cursor: pointer;
}

.view-private-message .views-row+.views-row {
  margin-top: 10px;
}

.view-private-message .views-row:hover::before {
  color: #fff;
  content: 'View';
  left: 30px;
  font-weight: bold;
  position: absolute;
  top: 40px;
}

.view-private-message .views-row:hover .user-picture,
.view-private-message .views-row:hover .username,
.view-private-message .views-row:hover .created,
.view-private-message .views-row:hover .field-pm-subject {
  opacity: 0;
  visibility: hidden;
}

.view-private-message .user-picture {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  border: 2px solid #5bb4d8;
  border-radius: 100%;
  float: left;
  font-size: 0;
  height: 50px;
  margin: 0 10px 0 20px;
  overflow: hidden;
  width: 50px;
}

.view-private-message .user-picture.without-image {
  background-color: transparent;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgNDguNTQgNTguMTEiPjxkZWZzPjxzdHlsZT4uY2xzLTEsLmNscy0ye2ZpbGw6bm9uZTt9LmNscy0ye2NsaXAtcnVsZTpldmVub2RkO30uY2xzLTN7Y2xpcC1wYXRoOnVybCgjY2xpcC1wYXRoKTt9LmNscy00e2NsaXAtcGF0aDp1cmwoI2NsaXAtcGF0aC0yKTt9LmNscy01e2ZpbGw6IzcwNzA2Zjt9LmNscy02e2NsaXAtcGF0aDp1cmwoI2NsaXAtcGF0aC0zKTt9LmNscy03e2ZpbGw6I2ZmZjt9PC9zdHlsZT48Y2xpcFBhdGggaWQ9ImNsaXAtcGF0aCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTcuODUgLTYuMTMpIj48cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik02NC4yNCwzMi4xMkEzMi4xMiwzMi4xMiwwLDEsMSwzMi4xMiwwLDMyLjEyLDMyLjEyLDAsMCwxLDY0LjI0LDMyLjEyWiIvPjwvY2xpcFBhdGg+PGNsaXBQYXRoIGlkPSJjbGlwLXBhdGgtMiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTcuODUgLTYuMTMpIj48cGF0aCBjbGFzcz0iY2xzLTIiIGQ9Ik0xNSwyNi4yNmExNy43NiwxNy43NiwwLDEsMSwzNS41MSwwVjI5LjhBMTcuNzYsMTcuNzYsMCwxLDEsMTUsMjkuOFoiLz48L2NsaXBQYXRoPjxjbGlwUGF0aCBpZD0iY2xpcC1wYXRoLTMiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC03Ljg1IC02LjEzKSI+PHBhdGggY2xhc3M9ImNscy0yIiBkPSJNMTAuMjIsNTMuNDhhOC4yOSw4LjI5LDAsMCwxLDguMjktOC4yOUg0NS43M0E4LjMsOC4zLDAsMCwxLDU0LDUzLjQ4djguMjlIMTAuMjJaIi8+PC9jbGlwUGF0aD48L2RlZnM+PHRpdGxlPnBpY3RvLWF2YXRhcjwvdGl0bGU+PGcgaWQ9IkNhbHF1ZV8yIiBkYXRhLW5hbWU9IkNhbHF1ZSAyIj48ZyBpZD0iQ2FscXVlXzEtMiIgZGF0YS1uYW1lPSJDYWxxdWUgMSI+PGcgY2xhc3M9ImNscy0zIj48ZyBjbGFzcz0iY2xzLTQiPjxwYXRoIGNsYXNzPSJjbHMtNSIgZD0iTTMyLjcxLDQ5LjkzQTIwLjE1LDIwLjE1LDAsMCwxLDEyLjU5LDI5LjhWMjYuMjZhMjAuMTMsMjAuMTMsMCwxLDEsNDAuMjUsMFYyOS44QTIwLjE1LDIwLjE1LDAsMCwxLDMyLjcxLDQ5LjkzWm0wLTM5LjA3YTE1LjQyLDE1LjQyLDAsMCwwLTE1LjM5LDE1LjRWMjkuOGExNS4zOSwxNS4zOSwwLDAsMCwzMC43OCwwVjI2LjI2QTE1LjQxLDE1LjQxLDAsMCwwLDMyLjcxLDEwLjg2WiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTcuODUgLTYuMTMpIi8+PC9nPjxnIGNsYXNzPSJjbHMtNiI+PHBhdGggY2xhc3M9ImNscy01IiBkPSJNNTQsNjQuMTRIMTAuMjJhMi4zOCwyLjM4LDAsMCwxLTIuMzctMi4zN1Y1My40OEExMC42NywxMC42NywwLDAsMSwxOC41MSw0Mi44M0g0NS43M0ExMC42NywxMC42NywwLDAsMSw1Ni4zOSw1My40OHY4LjI5QTIuMzcsMi4zNywwLDAsMSw1NCw2NC4xNFpNMTIuNTksNTkuNEg1MS42NVY1My40OGE1LjkyLDUuOTIsMCwwLDAtNS45Mi01LjkxSDE4LjUxYTUuOTIsNS45MiwwLDAsMC01LjkyLDUuOTFaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtNy44NSAtNi4xMykiLz48L2c+PHBhdGggY2xhc3M9ImNscy03IiBkPSJNNTQsNTVjMCw0LTkuOCw5LjI1LTIxLjksOS4yNXMtMjEuOS02LjQtMjEuOS05YTQwLjMzLDQwLjMzLDAsMCwwLDguMjQsNHM4LjE5LS4zNCwxMy4yNC0uMzRTNDUsNTkuMjEsNDUsNTkuMjFDNTEuNjUsNTguNjksNTQsNTUsNTQsNTVaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtNy44NSAtNi4xMykiLz48L2c+PC9nPjwvZz48L3N2Zz4=");
  background-position: center bottom;
  background-size: 36px;
  border: 2px solid #70706f;
  font-size: 0;
}

.view-private-message .username,
.view-private-message .created,
.view-private-message .field-pm-subject {
  margin: 0 0 0 90px;
}

.view-private-message .username a {
  color: inherit;
}

.view-private-message nav::before,
.view-private-message nav::after {
  clear: both;
  content: '';
  display: table;
}

#private-message-add-form {
  background-color: #f6f6f6;
  padding: 5rem 80px 0 60px;
}

@media (max-width: 768px) {
  #private-message-add-form {
    padding-top: 3rem;
    padding-left: 15px;
    padding-right: 15px;
  }
}

#private-message-add-form .form-item-subject label {
  width: 20%;
}

@media (max-width: 768px) {
  #private-message-add-form .form-item-subject label {
    width: 100%;
  }
}

#private-message-add-form .form-item-subject .form-element-wrapper {
  display: inline-block;
  margin-left: -4px;
  width: 80%;
}

@media (max-width: 768px) {
  #private-message-add-form .form-item-subject .form-element-wrapper {
    display: block;
    margin-left: 0;
    width: 100%;
  }
}

#private-message-add-form #edit-filters label {
  display: block;
}

#private-message-add-form #edit-filters .form-item {
  display: inline-block;
  width: 45%;
}

@media (max-width: 768px) {
  #private-message-add-form #edit-filters .form-item {
    display: block;
    width: 100%;
  }
}

#private-message-add-form #edit-filters .form-item+.form-item {
  margin-left: 9%;
}

@media (max-width: 768px) {
  #private-message-add-form #edit-filters .form-item+.form-item {
    margin-left: 0;
    max-width: 100%;
  }
}

#private-message-add-form #edit-message-wrapper>.form-item {
  margin-left: 0;
}

#private-message-add-form #edit-message-0-format {
  border-bottom: solid 1.25px #1d1d1b;
}

#private-message-add-form #edit-actions {
  margin: 2rem -80px 0 -60px;
}

@media (max-width: 768px) {
  #private-message-add-form #edit-actions {
    margin-left: -15px;
    margin-right: -15px;
  }
}

#private-message-add-form #edit-actions input {
  font-weight: bold;
  text-transform: uppercase;
}

#private-message-page .private-message-thread {
  background-color: #f6f6f6;
}

#private-message-page .private-message-thread #private-message-add-form {
  padding-top: 0;
}

#private-message-page .field-pm-subject,
#private-message-page .private-message-recipients {
  font-size: 19px;
  font-weight: normal;
}

@media (min-width: 768px) {
  #private-message-page .field-pm-subject,
  #private-message-page .private-message-recipients {
    font-size: 25px;
  }
}

#private-message-page .field-pm-subject .label,
#private-message-page .field-pm-subject .content {
  display: inline-block;
}

#private-message-page .field-pm-subject .content {
  text-transform: uppercase;
}

#private-message-page .field-pm-subject .label,
#private-message-page .private-message-recipients .label {
  color: #70706f;
  font-weight: 700;
  text-transform: uppercase;
}

#private-message-page .field-pm-subject .content,
#private-message-page .private-message-recipients .content,
#private-message-page .private-message-recipients .content a {
  color: #5bb4d8;
  font-weight: 700;
}

#private-message-page .private-message-recipients .content article {
  display: inline-block;
}

#block-platon-content #private-message-page {
  padding: 80px 0 0 0;
}

#block-platon-content #private-message-page::before {
  margin-left: 60px;
  margin-right: 60px;
}

#block-platon-content #private-message-page .private_message_thread_delete_link_wrapper {
  right: 60px;
}

#block-platon-content .field-pm-subject,
#block-platon-content .private-message-recipients,
#block-platon-content .private-messages {
  padding: 0 60px;
}

#private-message-page .private-message .owner .username {
  margin-top: 20px;
}

#private-message-page .private-message .owner .username a {
  color: #575756;
  font-weight: bold;
  text-transform: uppercase;
}

#block-platon-content #private-message-page .private-message .message,
#block-platon-content #private-message-page .private-message .message .date {
  color: #58585a;
}

.load_previous_hidden .load-previous-position-before {
  display: none;
}

#private-message-add-form #edit-message-0-format {
  display: none;
}

.view-private-message .new {
  font-weight: bold;
}

@media (max-width: 991px) {
  .view-private-message.view-display-id-block_all .view-header .messages,
  body.page-private-message-create .view-private-message.view-display-id-block_all .view-header,
  body.page-private-message-create .view-private-message.view-display-id-block_all .view-content,
  body[class*='page-private-messages-'] .view-private-message.view-display-id-block_all .view-content {
    display: none !important;
  }
}