/* Communication centre */

.memb_commcentre textarea { width: 100%; }
.memb_commcentre #messageform .buttons { display: flex; justify-content: end; gap:10px; margin-top: 10px;}
.memb_commcentre .button{background-color: var(--grey);}
.memb_commcentre .back.button a::before { content: '← ';}

.memb_commcentre .toolbar_inner{text-align: center;}
.memb_commcentre .mainarea{display: flex; gap: 1%; width: 100%;}

.memb_commcentre .left-area{max-width: 27%; width: 100%;}
.memb_commcentre .left-area .search{display: flex;  flex-direction: row-reverse; gap:10px;}
.memb_commcentre .left-area .search select{width: 30%; font-size: 0.6rem; padding: 0px 15px 0 10px; background-position: right 5px center}
.memb_commcentre .left-area .search input[type=text]{width: 70%; text-align: center; margin-bottom: 20px; border-radius: 6px; background-color: white; border: 1px solid #e0e0e0;}
.memb_commcentre .left-area .back {width: 50%; margin-bottom: 10px;}
.memb_commcentre .left-area .messageactions .newmessage{display: inline-block; width: 50%;}
.memb_commcentre .left-area .messageactions .folders{margin: 20px 0;}
.memb_commcentre .left-area .messageactions .folders li a.open{font-size: 1.05rem; font-weight: 500; box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;}
.memb_commcentre .left-area .messageactions .folders li a{display: inline-block; width: 100%; padding: 25px; background-color: var(--grey-button-hover); border-radius: 16px; margin-bottom: 15px; }

.memb_commcentre .right-area{width: 72%; height: calc(100vh - 220px); min-height: 525px; background-color: var(--grey-button); border-radius: 16px; display: flex;}


/* messages */
.memb_commcentre .messages{ width: 39%; height: 100%; overflow-y: scroll;}
.memb_commcentre .messages>li {position: relative; padding: 20px 25px; border-radius: 16px; margin-bottom: 1px; background-color: var(--grey); cursor: pointer; }
.memb_commcentre .messages li.selected, .memb_commcentre .messages li.selected a, .memb_commcentre .messages li.selected br{background-color: var(--dark-grey); color: white; font-weight: 300; }
.memb_commcentre .messages li.selected .actions li i{color: var(--grey);}
.memb_commcentre .messages li.unread .name, .memb_commcentre .messages>li.unread .date{font-weight: 600;}
.memb_commcentre .messages li.unread .name{margin-left: -15px; display: flex; align-items: center; gap:6px;}
.memb_commcentre .messages li .name i{display: none;}
.memb_commcentre .messages li.unread .name i{display: block; font-size: 6px;}

.memb_commcentre .messages li .photo { display: none; padding: 5px 10px 10px 0px; min-width: 80px; min-height: 80px; max-width: 80px; max-height: 80px;  }
.memb_commcentre .messages li .date { font-size: 0.6rem; text-align: end; }
.memb_commcentre .messages li .replied {display: none;  font-size: 0px; width: 16px; height: 16px;  padding: 30px 120px 0px 0px; }
.memb_commcentre .messages li .name { font-size: 0.85rem; margin-bottom: 3px; }
.memb_commcentre .messages li .subject {font-size: 0.85rem; margin-bottom: 10px; }
.memb_commcentre .messages li .content{ font-size: 0.75rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.memb_commcentre .messages li .attach, .memb_commcentre .messages li .attachment, .memb_commcentre .messages li .linesheet_attached{font-size: 0.75rem; margin-top: 10px;}

.memb_commcentre .messages .actions{ display: flex; justify-content: end; gap:5px; margin-top: 10px;}
.memb_commcentre .messages .actions li {display: flex; align-items: center; justify-content: center; width:18px; height: 18px; cursor: pointer;}
.memb_commcentre .messages .actions li span{display: none;}
.memb_commcentre .messages .actions li i{color: grey;}

/* threads */
.memb_commcentre .threads{width: 65%; padding: 20px; overflow-y: scroll;}

.memb_commcentre .threads .thread-header {width: 100%;padding: 15px 20px; background: var(--grey); border-radius: 14px; margin-bottom: 10px;}
.memb_commcentre .threads .thread-header .thread-participants {font-size: 0.85rem; margin-bottom: 10px;}
.memb_commcentre .threads .thread-header .thread-subject {font-size: 0.85rem;font-family: "EB Garamond", serif; }
.memb_commcentre .threads .thread-header .label { font-weight: bold; margin-right: 4px;}

.memb_commcentre .threads>ul{display: flex; flex-direction: column;}
.memb_commcentre .thread-item{border-radius: 16px; margin-bottom: 20px; width: 80%;}
.memb_commcentre .thread-item .date, .memb_commcentre .thread-item .time{ text-align: center; font-size: 0.7rem; color: var(--dark-grey); padding: 10px 0;}
.memb_commcentre .thread-item .time{text-align: end;}
.memb_commcentre .thread-item .message{border-radius: 16px; padding: 20px; font-size: 0.8rem;}
.memb_commcentre .thread-item .linesheet_attached .attach{display: flex; align-items: center; justify-content: start; gap:10px;}
.memb_commcentre .thread-item .linesheet_attached .image{width: 80px; height: 80px; background-size: cover; margin-top: 10px; border-radius: 8px; display: inline-block;}

.memb_commcentre .thread-item{align-self: start;}
.memb_commcentre .thread-item .message{background-color: white; }
.memb_commcentre .thread-item.issender{align-self: end;}
.memb_commcentre .thread-item.issender .message, .memb_commcentre .thread-item.issender .message a{background-color: black; color: white; }

.memb_commcentre .threads #messageform{margin-top: 40px;}

/* new message */
.memb_commcentre .messageform {width: 65%; background-color: var(--grey-button); border-radius: 16px; padding: 20px;}
.memb_commcentre .messageform .field { padding: 10px 0px 0px 0px; }
.memb_commcentre .messageform label { display: block;  text-transform: lowercase; font-variant: small-caps; font-size: 120%; }
.memb_commcentre .messageform input { width: 100%; height: 40px;}
.memb_commcentre .messageform .attach { max-width: 200px; }
.memb_commcentre .messageform .attach .image { width: 80px; height: 80px; background-size: cover; border-radius: 8px; margin: 5px 0px 0px 0px;  }
.memb_commcentre .messageform .attach .close {  background-color: #ffffff; margin: 25px 55px 0px 0px; width: 20px; height: 105px; padding:0px 0px 0px 10px;  cursor:pointer; }
.memb_commcentre .messageform .tag-editor {padding: 5px; min-height: 40px; display: flex; align-items: center; flex-wrap: wrap; }
.memb_commcentre .messageform .tag-editor .tag-editor-tag, .memb_commcentre .messageform .tag-editor .tag-editor-delete{ background: var(--background); color: black; font-size: 0.75rem; padding: 2px 5px; }




@media ( max-width: 750px ){
    .memb_commcentre .mainarea{flex-direction: column;}
    .memb_commcentre .left-area, .memb_commcentre .right-area{max-width: 100%; width: 100%;}
    .memb_commcentre .left-area .messageactions .folders li a{padding: 12px; margin-bottom: 10px;}
}


@media (max-width: 500px) {
  .memb_commcentre .back { display: none;}
  .mobile-pane-view .back, .mobile-pane-reply .back, .mobile-pane-edit .back { display: block;}
  .mobile-pane-view .messages , .mobile-pane-reply .messages , .mobile-pane-edit .messages ,.mobile-pane-new .messages {display: none;}
  .mobile-pane-view .messages, .mobile-pane-reply .messages, .mobile-pane-edit .messages { display: none;}
  .mobile-pane-list .threads, .mobile-pane-list .messageform { display: none;}
  .memb_commcentre .messages, .memb_commcentre .threads, .memb_commcentre .messageform{width: 100%; height: fit-content;}
  .memb_commcentre .right-area{height: fit-content; min-height: unset;}
}