|  |  |  | // Messages
 | 
					
						
							|  |  |  | .conversation { | 
					
						
							|  |  |  |   background: none !important; | 
					
						
							|  |  |  | } | 
					
						
							|  |  |  | .module-conversation-header { | 
					
						
							|  |  |  |   background: var(--background-primary-color); | 
					
						
							|  |  |  | } | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | .module-message__container { | 
					
						
							|  |  |  |   .module-message__text { | 
					
						
							|  |  |  |     font-size: 14px; | 
					
						
							|  |  |  |     text-align: start; | 
					
						
							|  |  |  |     overflow-wrap: break-word; | 
					
						
							|  |  |  |     word-wrap: break-word; | 
					
						
							|  |  |  |     word-break: break-word; | 
					
						
							|  |  |  |     white-space: pre-wrap; | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |     a { | 
					
						
							|  |  |  |       text-decoration: underline; | 
					
						
							|  |  |  |     } | 
					
						
							|  |  |  |   } | 
					
						
							|  |  |  | } | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | .module-message { | 
					
						
							|  |  |  |   position: relative; | 
					
						
							|  |  |  |   display: inline-flex; | 
					
						
							|  |  |  |   flex-direction: row; | 
					
						
							|  |  |  |   align-items: flex-end; | 
					
						
							|  |  |  |   max-width: 100%; | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |   @media (min-width: 1200px) { | 
					
						
							|  |  |  |     max-width: 65%; | 
					
						
							|  |  |  |   } | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |   &__text-error { | 
					
						
							|  |  |  |     font-style: italic; | 
					
						
							|  |  |  |   } | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |   &_text { | 
					
						
							|  |  |  |     font-size: 14px; | 
					
						
							|  |  |  |     line-height: 18px; | 
					
						
							|  |  |  |     text-align: start; | 
					
						
							|  |  |  |     overflow-wrap: break-word; | 
					
						
							|  |  |  |     word-wrap: break-word; | 
					
						
							|  |  |  |     word-break: break-word; | 
					
						
							|  |  |  |     white-space: pre-wrap; | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |     padding: var(--padding-message-content); | 
					
						
							|  |  |  |     border-radius: var(--border-radius-message-box); | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |     padding: var(--padding-message-content); | 
					
						
							|  |  |  |     border-radius: var(--border-radius-message-box); | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |     a { | 
					
						
							|  |  |  |       text-decoration: underline; | 
					
						
							|  |  |  |     } | 
					
						
							|  |  |  |   } | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |   &__container--incoming { | 
					
						
							|  |  |  |     color: var(--message-bubbles-received-text-color); | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |     .module-message__text { | 
					
						
							|  |  |  |       color: var(--message-bubbles-received-text-color); | 
					
						
							|  |  |  |       display: flex; | 
					
						
							|  |  |  |       flex-direction: row; | 
					
						
							|  |  |  |       align-items: center; | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |       svg { | 
					
						
							|  |  |  |         margin-right: var(--margins-xs); | 
					
						
							|  |  |  |       } | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |       a { | 
					
						
							|  |  |  |         text-decoration: underline; | 
					
						
							|  |  |  |         color: var(--message-bubbles-received-text-color); | 
					
						
							|  |  |  |       } | 
					
						
							|  |  |  |     } | 
					
						
							|  |  |  |   } | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |   &__container--outgoing { | 
					
						
							|  |  |  |     color: var(--message-bubbles-sent-text-color); | 
					
						
							|  |  |  |     .module-message__text { | 
					
						
							|  |  |  |       color: var(--message-bubbles-sent-text-color); | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |       a { | 
					
						
							|  |  |  |         text-decoration: underline; | 
					
						
							|  |  |  |         color: var(--message-bubbles-sent-text-color); | 
					
						
							|  |  |  |       } | 
					
						
							|  |  |  |     } | 
					
						
							|  |  |  |   } | 
					
						
							|  |  |  | } | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | .inbox { | 
					
						
							|  |  |  |   background: var(--background-primary-color); | 
					
						
							|  |  |  |   color: var(--text-primary-color); | 
					
						
							|  |  |  | } | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | .conversation { | 
					
						
							|  |  |  |   background: none; | 
					
						
							|  |  |  | } | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | @mixin session-h-title { | 
					
						
							|  |  |  |   font-weight: bold; | 
					
						
							|  |  |  |   font-family: var(--font-accent), var(--font-default); | 
					
						
							|  |  |  | } | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | h1 { | 
					
						
							|  |  |  |   @include session-h-title; | 
					
						
							|  |  |  |   color: var(--text-secondary-color); | 
					
						
							|  |  |  |   font-size: 25px; | 
					
						
							|  |  |  |   margin: 0; | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |   &.active { | 
					
						
							|  |  |  |     color: var(--text-primary-color); | 
					
						
							|  |  |  |   } | 
					
						
							|  |  |  | } | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | h2 { | 
					
						
							|  |  |  |   @include session-h-title; | 
					
						
							|  |  |  |   color: var(--text-primary-color); | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |   font-size: 22px; | 
					
						
							|  |  |  |   text-align: center; | 
					
						
							|  |  |  | } | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | h3 { | 
					
						
							|  |  |  |   @include session-h-title; | 
					
						
							|  |  |  |   color: var(--text-primary-color); | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |   font-size: 18px; | 
					
						
							|  |  |  |   padding-top: 22px; | 
					
						
							|  |  |  | } | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | h4 { | 
					
						
							|  |  |  |   @include session-h-title; | 
					
						
							|  |  |  |   color: var(--text-primary-color); | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |   font-size: 17px; | 
					
						
							|  |  |  |   text-align: center; | 
					
						
							|  |  |  | } |