/*
@font-face {
  font-family: 'Montserrat Light';
  font-style: normal;
  font-weight: 400;
  src: local('Montserrat Light'), local('Montserrat-Light'),
    url("/fonts/montserrat-light.woff") format('woff'),
}

@font-face {
  font-family: "Darkmode";
  font-style: normal;
  font-weight: 300;
  src: local("Darkmode"), local("DarkmodeVF_Trial_WghtDrkm"),
    url("/fonts/DarkmodeVF_Trial_WghtDrkm.ttf") format("truetype");
}
*/

::-webkit-scrollbar {
  width: 5px;
}

::-webkit-scrollbar-track {
  background: #202020;
}

::-webkit-scrollbar-thumb {
  background: #333;
}

::-webkit-scrollbar-thumb:hover {
  background: #b91d22;
}

input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active {
  -webkit-background-clip: text;
  -webkit-text-fill-color: #f9f6ee;
  transition: background-color 5000s ease-in-out 0s;
}

body {
  background-color: #202020;
  color: #f9f6ee;
  text-align: center;
  /*font-family: "Montserrat Light", sans-serif;*/
  /*font-family: "Darkmode";*/
  font-family: Verdana, sans-serif;
  font-weight: 200;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

input {
  outline: none;
  padding-left: 10px;
  padding-right: 10px;
  font-family: Verdana, sans-serif;
}

#login-page,
#app-page {
  position: fixed;
  padding: 0;
  margin: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#wait-screen,
#app-modal-background-container,
#app-modal-over-modal-background-container {
  position: fixed;
  padding: 0;
  margin: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #202020;
  opacity: 0.9;
  z-index: 10;
  display: none;
}

#wait-screen {
  z-index: 20;
}

#app-modal-background-container {
  display: block;
}

#wait-spinner {
  position: relative;
  top: 27vh;
  width: 48px;
  height: 48px;
  border: 5px solid #b91d22;
  border-bottom-color: transparent;
  border-radius: 50%;
  display: inline-block;
  box-sizing: border-box;
  animation: rotation 1s linear infinite;
}

#app-modal-container,
#app-modal-over-modal-container {
  position: fixed;
  padding: 0;
  margin: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  z-index: 10;
}

#app-modal-over-modal-container {
  z-index: 30;
}

#app-modal-window-container,
#app-modal-over-modal-window-container {
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translate(-50%, 0%);
  width: calc(100% - 10px);
  max-width: 400px;
  height: fit-content;
  background-color: #202020;
  opacity: 1;
  z-index: 11;
  border: 1px solid #444;
  border-radius: 4px;
}

#app-modal-header-container,
#app-modal-over-modal-header-container {
  position: relative;
  top: 0px;
  width: 100%;
  height: 40px;
  border-bottom: 1px solid #444;
  border-radius: 3px 3px 0px 0px;
}

#app-modal-header-container.information,
#app-modal-over-modal-header-container.information {
  background-color: #228B22;
}

#app-modal-header-container.warning {
  background-color: #b91d22;
}

#app-modal-header-container.attention {
  background-color: #e49b0f;
}

#app-modal-header-container.function {
  background-color: #444;
}

#app-modal-header-title,
#app-modal-over-modal-header-title {
  text-align: left;
  padding-left: 10px;
  padding-top: 11px;
  font-style: italic;
  font-size: 14px;
}

#app-modal-close-icon,
#app-modal-over-modal-close-icon {
  position: absolute !important;
  top: -5px;
  right: -4px;
}

#app-modal-close-icon:hover,
#app-modal-over-modal-close-icon:hover {
  /*filter: brightness(0) saturate(100%) invert(58%) sepia(31%) saturate(19%) hue-rotate(353deg) brightness(99%) contrast(87%);*/
}

#app-modal-text-container,
#app-modal-over-modal-text-container {
  position: relative;
  padding: 10px;
  text-align: left;
  padding-top: 20px;
  padding-bottom: 20px;
  font-size: 14px;
}

#app-modal-share-file-input-container,
#app-modal-upload-image-input-container {
  position: relative;
  height: 40px;
  text-align: center;
  border: 1px solid #666;
  border-radius: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-left: 10px;
  padding-right: 10px;
  cursor: pointer;
}

#app-modal-share-file-input-container.error {
  background-color: #b91d22;
}

#app-modal-share-file-input-container:hover {
  background-color: #444;
}

#app-modal-share-file-input-container input,
#app-modal-upload-image-input-container input {
  position: absolute;
  left: 0px;
  width: 100%;
  height: 100%;
  padding: 0px;
  opacity: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  font-size: 0;
}

#app-modal-share-file-input-container label,
#app-modal-upload-image-input-container label {
  position: relative;
  top: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}

#app-modal-share-file-percent,
#app-modal-upload-image-percent {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 0%;
  background-color: #444;
}

#app-modal-share-audio-controls-container,
#app-modal-share-audio-timecode-container {
  position: relative;
  height: 40px;
  text-align: center;
  line-height: 40px;
}

#app-modal-share-audio-timecode-container {
  border: 1px solid #555;
  border-radius: 4px;
  margin-top: 15px;
}

#app-modal-share-audio-timecode-percentage-bar {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 0%;
  background-color: #444;
}

#app-modal-share-audio-timecode-count {
  position: relative;
}

.app-modal-share-audio-control-button {
  position: relative;
  height: 46px;
  width: 30px;
  display: inline-block;
  background-size: 28px;
  background-position: top;
  background-repeat: no-repeat;
  cursor: pointer;
  padding-left: 10px;
  padding-right: 10px;
}

.app-modal-share-audio-control-button.disabled,
.app-modal-share-audio-control-button.disabled:hover {
  filter: brightness(0) saturate(100%) invert(23%) sepia(67%) saturate(5%) hue-rotate(48deg) brightness(94%) contrast(93%);
  cursor: default;
}

.app-modal-share-audio-control-button.active {
  filter: brightness(0) saturate(100%) invert(21%) sepia(36%) saturate(5983%) hue-rotate(343deg) brightness(81%) contrast(99%);
}

.app-modal-share-audio-control-button:hover {
  filter: brightness(0) saturate(100%) invert(21%) sepia(36%) saturate(5983%) hue-rotate(343deg) brightness(81%) contrast(99%);
}

.app-modal-share-audio-control-button#app-modal-share-audio-record-button {
  background-image: url("/icons/mic.svg");
}

.app-modal-share-audio-control-button#app-modal-share-audio-stop-button {
  background-image: url("/icons/square.svg");
}

.app-modal-share-audio-control-button#app-modal-share-audio-play-button {
  background-image: url("/icons/play.svg");
}

.app-modal-share-audio-control-button#app-modal-share-audio-delete-button {
  background-image: url("/icons/trash.svg");
}

#app-modal-buttons-container,
#app-modal-over-modal-buttons-container {
  position: relative;
  height: 60px;
  width: 100%;
  text-align: center;
  display: none;
}

.app-modal-button {
  cursor: pointer;
}

#app-modal-yes-button,
#app-modal-over-modal-yes-button,
#app-modal-no-button,
#app-modal-over-modal-no-button,
.app-modal-logout-button {
  position: relative;
  height: 40px;
  width: fit-content;
  display: inline-block;
  border: 1px solid #666;
  border-radius: 4px;
  padding-left: 20px;
  padding-right: 20px;
  line-height: 40px;
  margin-left: 5px;
  margin-right: 5px;
  font-size: 14px;
}

#app-modal-no-button {
  display: none;
}

#app-modal-logout-buttons-container {
  text-align: center;
}

.app-modal-logout-button {
  display: inline-block;
  margin-bottom: 10px;
  cursor: pointer;
  min-width: 70%;
  text-align: center;
}

#app-modal-buttons-container.warning .app-modal-button:hover {
  background-color: #b91d22;
  border: 1px solid #444;
}

#app-modal-buttons-container.information .app-modal-button:hover {
  background-color: #228B22;
  border: 1px solid #444;
}

#app-modal-buttons-container.attention .app-modal-button:hover {
  background-color: #e49b0f;
  border: 1px solid #444;
}

#app-modal-buttons-container.function .app-modal-button:hover,
#app-modal-logout-buttons-container .app-modal-button:hover {
  background-color: #444;
  border: 1px solid #444;
}

@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
} 

#login-lang-container {
  position: absolute;
  top: 30px;
  right: 30px;
  width: 31px;
  height: 31px;
  border: 2px solid #374549;
  border-radius: 20px;
  font-size: 14px;
  color: #7c949c;
  text-align: center;
  line-height: 28px;
  vertical-align: middle;
  overflow: hidden;
  z-index: 1;
}

#login-lang-container.expand {
  height: auto;
}

.login-lang {
  padding-bottom: 4px;
}

#login-vert-container,
#optin-vert-container {
  position: relative;
  max-width: 400px;
  height: 100%;
  display: inline-block;
}

#login-logo,
#optin-logo {
  position: relative;
  width: 340px;
  display: inline-block;
  padding-top: 16vh;
  opacity: 0.8;
}

#optin-logo {
  padding-top: 6vh;
}

.login-input-container,
.optin-input-container {
  position: relative;
  width: 320px;
  height: 45px;
  display: inline-block;
  border-radius: 4px;
  border: 1px solid #7c949c;
  background-color: #21292c;
}

#login-user-container {
  margin-top: 1vh;
}

#login-pass-container {
  margin-top: 12px;
}

.login-icon-container,
.optin-icon-container {
  position: relative;
  width: 48px;
  height: 43px;
  background-color: #374549;
  top: 1px;
  left: 1px;
  border-radius: 1px;
  border-right: 1px solid #7c949c;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 25px;
  opacity: 0.8;
}

.login-input-display {
  position: absolute;
  top: 12px;
  right: 5px;
  width: 20px;
  height: 20px;
  background-image: url("/icons/eye-off.svg");
  background-size: 20px;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 1;
  opacity: 0.4;
}

.login-input-display.activated {
  background-image: url("/icons/eye.svg");
}

#login-user-icon {
  background-image: url("/icons/user.svg");
  background-size: 30px;
}

#login-pass-icon {
  background-image: url("/icons/lock.svg");
  background-size: 30px;
}

#optin-phone-icon {
  background-image: url("/icons/smartphone.svg");
  background-size: 30px;
}

.login-input,
.optin-input {
  position: absolute;
  width: 251px;
  height: 43px;
  left: 48px;
  top: -1px;
  background-color: #21292c;
  border: 1px solid #7c949c;
  border-radius: 0px 4px 4px 0px;
  font-size: 14px;
  color: #e2e8e9;
}

.login-input:hover {
  background-color: #373e41;
}

#login-button,
#optin-button {
  margin-top: 12px;
  border: 1px solid #b91d22;
  background-color: #b91d22;
  font-size: 14px;
  line-height: 20px;
  margin-bottom: 2px;
  cursor: pointer;
}

#optin-button {
  display: none;
  left: 10px;
}

#login-button-label,
#optin-button-label {
  position: relative;
  top: 12px;
}

#login-account-links {
  position: relative;
  width: 320px;
  text-align: left;
  color: #0aa6e8;
  font-size: 14px;
  cursor: pointer;
  display: inline-block;
}

.login-account-link {
  padding-top:3px;
}

.login-account-link:hover {
  color: #22aeea;
  text-decoration: underline;
}

.data {
  display: none;
}

#app-toolbar-pane {
  position: relative;;
  top: 0px;
  height: 100%;
  width: 80px;
  float: left;
  display: flex;
  flex-direction: column;
}

.app-toolbar-icon,
.app-toolbar-icon-nohover {
  width: 100%;
  height: 55px;
  width: 50px;
  background-size: 26px;
  background-position: center 5px;
  background-repeat: no-repeat;
  display: inline-block;
  left: 5px;
  cursor: pointer;
  margin-bottom: 10px;
}

.app-toolbar-icon-nohover {
  cursor: default;
}

.app-toolbar-icon.attention {
  background-color: #0962d0;
  border-radius: 4px;
}

.app-toolbar-icon.active,
.app-toolbar-icon:hover,
.app-list-tools-icon:hover,
#app-contacts-smnumbers-icon.enabled,
#app-contacts-online-icon.enabled,
#app-chats-bydate-icon.enabled,
#app-chats-online-icon.enabled,
.app-chat-tools-icon:hover,
.app-chat-message-send-tools:hover,
.app-search-input-icon:hover {
  /*filter: brightness(0) saturate(100%) invert(32%) sepia(69%) saturate(3131%) hue-rotate(336deg) brightness(92%) contrast(91%);*/
  background-color: #b91d22;
  border-radius: 4px;
}

.app-toolbar-icon.attention:hover {
  filter: unset;
}

.app-toolbar-icon.active,
.app-toolbar-icon:hover {
  /*border-radius: 80px;*/
}

#app-list-reset-selection:hover {
  filter: brightness(0) saturate(100%) invert(32%) sepia(69%) saturate(3131%) hue-rotate(336deg) brightness(92%) contrast(91%);
}

#app-contacts-icon {
  position: relative;
  background-image: url("/icons/user.svg");
}

#app-chats-icon {
  position: relative;;
  margin-top: 60px;
  background-image: url("/icons/message-square.svg");
}

#app-calls-icon {
  position: relative;
  background-image: url("/icons/phone-call.svg");
}

#app-settings-icon {
  position: relative;
  background-image: url("/icons/settings.svg");
}

#app-email-icon {
  position: relative;
  background-image: url("/icons/mail.svg");
}

#app-dashboard-icon {
  position: relative;
  background-image: url("/icons/sliders.svg");
}

#app-online-status-icon {
  position: absolute;
  bottom: 60px;
}

#app-alert-attention-required {
  position: absolute;
  bottom: 120px;
  background-image: url("/icons/alert-triangle.svg");
  /*filter: brightness(0) saturate(100%) invert(52%) sepia(97%) saturate(388%) hue-rotate(1deg) brightness(99%) contrast(103%);*/
  background-color: #0962d0;
  border-radius: 4px;
  display: none;
}

#app-online-status-icon.offline {
  background-image: url("/icons/wifi-off.svg");
}

#app-online-status-icon.online {
  background-image: url("/icons/wifi.svg");
}

#app-logout-icon {
  position: absolute;
  bottom: 0px;
  background-image: url("/icons/log-out.svg");
}

#app-list-pane {
  position: fixed;
  top: 60px;
  left: 60px;
  background-color: #222222;
  width: 440px;
  height: calc(100% - 60px);
  border-top: 1px solid #444444;
  border-left: 1px solid #444444;
  border-right: 1px solid #444444;
  border-radius: 4px 4px 0px 0px;
}

#app-list-pane.invited {
  top: 100px;
  height: calc(100% - 100px);
}

#app-list-pane.rightopen {
  border-radius: 4px 0px 0px 0px;
}

#app-list-pane.searchopen {
  border-radius: 0px 0px 0px 0px;
}

#app-list-pane-search-container,
#app-chat-messages-search-container {
  position: absolute;
  top: -62px;
  left: -1px;
  width: 100%;
  height: 60px;
  background-color: #222;
  border-top: 1px solid #444;
  border-left: 1px solid #444;
  border-right: 1px solid #444;
  z-index: 1;
  display: none;
}

#app-list-search-input,
#app-add-contact-input,
#app-messages-search-input {
  position: absolute;
  left: 0px;
  height: 20px;
  width: 290px;
  line-height: 20px;
  padding-top: 20px;
  padding-bottom: 20px;
  border: 0px;
  background-color: #222;
  color: #f9f6ee;
  font-size: 16px;
  /*font-family: "Montserrat Light", sans-serif;*/
  /*font-family: "Darkmode";*/
  font-family: Verdana, sans-serif;
  font-size: 14px;
}

#app-add-contact-input {
  display: none;
  width: 310px;
  max-width: 310px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 14px;
}

#app-messages-search-input {
  width: 430px;
}

#app-right-pane {
  position: relative;
  top: 60px;
  left: 501px;
  width: calc(100% - 482px);
  height: calc(100% - 60px);
  text-align: center;
}

#app-right-pane.invited {
  top: 100px;
  height: calc(100% - 100px);
}

#app-chat-conversation-container {
  position: fixed;
  top: 60px;
  left: 501px;
  background-color: #222;
  width: 500px;
  height: calc(100% - 60px);
  border-top: 1px solid #444444;
  border-left: 1px solid #444444;
  border-right: 1px solid #444444;
  border-radius: 0px 4px 0px 0px;
  display: none;
}

#app-right-pane.invited > #app-chat-conversation-container {
  top :100px;
  height: calc(100% - 100px);
}

#app-chat-conversation-container.searchopen {
  border-radius: 0px 0px 0px 0px;
}

#app-chat-participants-container {
  position: relative;
  height: 50px;
  width: 100%;
  border-bottom: 1px solid #444444;
}

#app-chat-messages-container {
  position: absolute;
  width: 100%;
  /*height: inherit;*/
  height: calc(100% - 110px);
  overflow-y: auto;
  /*scrollbar-width: thin;
  -ms-overflow-style: none;*/
  color: #f9f6ee;
  text-align: center;
}

@supports (-moz-appearance:none) {
  #app-chat-messages-container {
    scrollbar-width: thin;
  }
}

#app-chat-messages-container::-webkit-scrollbar {
    /*width: 10px;
    height: 0;*/
}

#app-chat-messages-container-bottom-spacer {
  height: 20px;
}

.app-chat-message-container,
#app-chat-typing-container {
  position: relative;
  width: 400px;
  background-color: #333;
  display: inline-block;
  margin-top: 20px;
  margin-bottom: 12px;
  padding: 10px;
  border-radius: 4px;
}

.app-chat-message-container.me {
  left: 20px;
}

.app-chat-message-container.peer {
  right: 20px;
  background-color: #444;
}

.app-chat-message-container.quoting {
  background-color: #555;
}

.app-chat-message-container.me:after {
  content: "";
  position: relative;
  bottom: -30px;
  left: 20px;
  margin-top: -20px;
  padding-top: 0px;
  border-width: 20px 0 0 20px;
  border-style: solid;
  border-color: #333 transparent;
  display: block;
  width: 0;
}

#app-chat-typing-container.peer {
  background-color: #444;
}

.app-chat-message-container.peer:after,
#app-chat-typing-container.peer:after {
  content: "";
  position: relative;
  bottom: -30px;
  left: 350px;
  margin-top: -20px;
  padding-top: 0px;
  border-width: 20px 20px 0 0;
  border-style: solid;
  border-color: #444 transparent;
  display: block;
  width: 0;
}

.app-chat-message-container.me.quoting:after,
.app-chat-message-container.peer.quoting:after {
  border-color: #555 transparent;
}

#app-chat-message-menu-sender-name-container {
  display: flex;
}

#app-chat-message-menu-container {
  position: relative;
  top: -4px;
  width: 30px;
  height: 20px;
  display: flex;
  cursor: pointer;
}

#app-chat-message-menu-container span {
  position: relative;
  top: 6px;
  width: 6px;
  height: 6px;
  border-radius: 6px;
  background-color: #777;
}

#app-chat-message-menu-container:hover > span {
  background-color: #b91d22;
}

.app-chat-message-container.me #app-chat-message-menu-container span {
  margin-right: 4px;
}

.app-chat-message-container.peer #app-chat-message-menu-container span {
  margin-left: 4px;
}

.app-chat-messages-sender-presence {
  position: absolute;
  top: 0px;
  width: 5px;
  height: 100%;
}

.app-chat-message-container.peer .app-chat-messages-sender-presence,
#app-chat-typing-container.peer .app-chat-messages-sender-presence {
  left: 0px;
  border-radius: 4px 0px 0px 4px;
}

.app-chat-message-container.me .app-chat-messages-sender-presence {
  right: 0px;
  border-radius: 0px 4px 4px 0px;
}

.app-chat-messages-sender-presence.online {
  background-color: #228B22;
}

.app-chat-messages-sender-presence.busy {
  background-color: #b91d22;
}

.app-chat-messages-sender-presence.away {
  background-color: #e49b0f;
}

.app-chat-messages-sender-presence.offline {
  background-color: #444;
}

#app-chat-message-sender {
  position: relative;
  text-align: left;
  color: #adadad;
  font-style: italic;
  padding-bottom: 0px;
  padding-left: 5px;
  flex: 1;
  font-size: 12px;
}

#app-chat-typing-container #app-chat-message-sender {
  padding-bottom: 2px;
}

#app-chat-message-sender.me {
  text-align: right;
  padding-left: 0px;
  padding-right: 5px;
}

.app-chat-messages-sender-presence.online ~ #app-chat-message-sender {
  color: #2cb42c;
}

.app-chat-messages-sender-presence.busy ~ #app-chat-message-sender {
  color: #e14146;
}

.app-chat-messages-sender-presence.away ~ #app-chat-message-sender {
  color: #f2b134;
}

#app-chat-message-quoted-message-container {
  color: #adadad;
  font-style: italic;
  margin-bottom: 8px;
}

#app-chat-message-text {
  position: relative;
  text-align: left;
  padding-left: 5px;
  padding-right: 5px;
  word-break: break-word;
  font-size: 14px;
}

#app-chat-message-text-fileshare-container {
  display: flex;
}

#app-chat-message-download-container {
  display: flex;
  flex: 1;
  min-width: 0;
}

#app-chat-message-download-container:hover .app-chat-message-download,
#app-chat-message-download-container:hover .app-chat-message-play,
#app-chat-message-download-container:hover .app-chat-message-filename {
  filter: brightness(0) saturate(100%) invert(24%) sepia(51%) saturate(3758%) hue-rotate(341deg) brightness(73%) contrast(103%);
}

.app-chat-message-download,
.app-chat-message-play {
  flex-shrink: 0;
  width: 30px;
  height: 20px;
  background-image: url("/icons/download.svg");
  background-position: left -4px;
  background-size: 20px;
  background-repeat: no-repeat;
  cursor: pointer;
}

.app-chat-message-play {
  background-image: url("/icons/playsmall.svg");
  background-position: left -2px;
}

.app-chat-message-play.playing {
  background-image: url("/icons/squaresmall.svg");
}

.app-chat-message-filename {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  cursor: pointer;
  font-size: 14px;
}

.app-chat-message-filesize {
  color: #adadad;
  font-style: italic;
  font-size: 12px;
  line-height: 18px;
  flex-shrink: 0;
}

#app-chat-message-metadata {
  position: relative;
}

.app-chat-message-container.me #app-chat-message-metadata,
.app-chat-message-container.peer #app-chat-message-metadata {
  text-align: left;
  color: #adadad;
  font-style: italic;
  padding-left: 5px;
  padding-top: 2px;
  font-size: 12px;
}

.app-chat-message-container.peer #app-chat-message-metadata {
  text-align: right;
  padding-left: 0px;
  padding-right: 5px;
}

.app-chat-message-container.me #app-chat-message-metadata {
  text-align: right;
  padding-right: 5px;
}

#app-chat-message-download-percent-bar {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 6px;
  background-color: #0962d0;
  border-radius: 4px 0px 0px 0px;
  width: 0%;
}

#app-chat-message-input-container {
  position: absolute;
  bottom: 0px;
  left: 0px;
  height: 60px;
  width: 100%;
  border-top: 1px solid #444444;
  text-align: right;
  background-color: #222;
}

#app-chat-message-input {
  position: absolute;
  top: 0px;
  left: 10px;
  width: 350px;
  max-width: 350px;
  min-height: 20px;
  height: 20px;;
  background-color: #222;
  font-size: 14px;
  /*font-family: "Montserrat Light", sans-serif;*/
  /*font-family: "Darkmode";*/
  font-family: Verdana, sans-serif;
  border: 0px;
  color: #f9f6ee;
  overflow: auto;
  outline: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  resize: none;
  margin-top: 16px;
  margin-bottom: 16px;
  line-height: 20px;
  overflow: hidden;
}

#app-list-tools-pane,
#app-chat-conversation-tools-pane {
  position: absolute;
  top: -60px;
  height: 60px;
  width: 100%;
}

.app-list-tools {
  position: relative;
  width: 100%;
  height: 100%;
  display: none;
  text-align: center;
}

#app-chats-list-tools {
  display: block;
}

.app-list-tools-icon,
.app-chat-tools-icon,
.app-chat-message-send-tools,
.app-search-input-icon,
#app-modal-close-icon,
#app-modal-over-modal-close-icon {
  position: relative;
  top: 0px;
  width: 50px;
  height: 55px;
  border-radius: 50px;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: center 5px;
  background-size: 26px;
  cursor: pointer;
}

.app-list-tools-icon {
  height: 56px;
}

.app-list-tools-icon .app-icon-label {
  bottom: 6px;
}

#app-modal-close-icon {
  top: 1px;
}

.app-icon-label {
  position: absolute;
  bottom: 5px;
  left: 0px;
  width: 100%;
  text-align: center;
  font-size: 10px;
  line-height: 16px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#app-modal-over-modal-close-icon {
  top: 1px;
}

.app-chat-message-send-tools {
  width: 40px;
  height: 50px;
  top: calc(100% - 56px);
  background-size: 24px;
}

#app-chat-message-attach {
  margin-right: 4px;
}

#app-contacts-search-icon,
#app-chats-search-icon,
#app-chat-messages-search-icon {
  background-image: url("/icons/search.svg");
}

#app-chats-byinvite-icon {
  background-image: url("/icons/file-plus.svg");
}

#app-contacts-chat-icon,
#app-chats-newchat-icon {
  background-image: url("/icons/message-square-plus.svg");
}

#app-contacts-chat-icon.attention {
  background-color: #0962d0;
  border-radius: 4px;
}

#app-contacts-chat-icon.attention:hover {
  background-color: #b91d22;
  filter: none;
}

#app-contacts-silence-icon,
#app-chat-silence-icon {
  background-image: url("/icons/volume-2.svg");
}

#app-contacts-silence-icon.unsilence,
#app-chat-silence-icon.unsilence {
  background-image: url("/icons/volume-x.svg");
}

#app-contacts-delete-icon,
#app-chat-delete-icon {
  background-image: url("/icons/trash.svg");
}

#app-contacts-block-icon {
  background-image: url("/icons/slash.svg");
}

#app-contacts-smnumbers-icon,
#app-chats-smnumbers-icon {
  background-image: url("/icons/hash.svg");
}

#app-contacts-online-icon,
#app-chats-online-icon {
  background-image: url("/icons/user-check.svg");
}

#app-chats-deleteall-icon {
  background-image: url("/icons/minus-circle.svg");
}

#app-chats-bydate-icon {
  background-image: url("/icons/calendar.svg");
}

#app-chat-rename-icon {
 background-image: url("/icons/edit.svg");
}

#app-contacts-add-icon,
#app-chat-adduser-icon,
#app-search-contacts-add-icon {
  background-image: url("/icons/user-plus.svg");
}

#app-chat-deluser-icon {
  background-image: url("/icons/user-minus.svg");
}

#app-chat-info-icon {
  background-image: url("/icons/info.svg");
}

#app-chat-close-icon,
#app-search-input-close-icon,
#app-search-messages-input-close-icon,
#app-modal-close-icon,
#app-modal-over-modal-close-icon {
  background-image: url("/icons/x.svg");
}

#app-search-input-close-icon,
#app-search-contacts-add-icon,
#app-search-messages-input-close-icon {
  position: absolute;
  right: 0px;
  top: 1px;
}

#app-search-contacts-add-icon {
  display: none;
  right: 40px;
}

#app-chat-message-send {
  background-image: url("/icons/send.svg");
}

#app-chat-audio-message {
  background-image: url("/icons/mic.svg");
}

#app-chat-message-attach {
  background-image: url("/icons/paperclip.svg");
}

#app-list-online-count {
  position: absolute;
  top: 0px;
  right: 0px;
  height: 20px;
  width: 420px;
  text-align: left;
  padding: 10px;
  padding-bottom: 10px;
  z-index: 1;
  border-radius: 4px 4px 0px 0px;
  background-color: #222;
  /*box-shadow: 0 8px 4px -4px #222;*/
  text-align: right;
  font-size: 12px;
  font-style: italic;
}

#app-list-reset-selection {
  position: absolute;
  top: 0px;
  left: 5px;
  width: 40px;
  height: 40px;
  z-index: 1;
  background-image: url("/icons/rotate-ccw.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 26px;
  display: none;
  cursor: pointer;
}

#app-page.settings #app-list-reset-selection {
  display: none !important;
}

#app-page.contacts #app-list-reset-selection.show {
  display: block;
  z-index: 2;
}

.app-list-container {
  position: relative;
  width: 100%;
  height: 100%;
  display: none;
  overflow-y: auto;
  /*-ms-overflow-style: none;
  scrollbar-width: none;*/
}

@supports (-moz-appearance:none) {
  .app-list-container {
    scrollbar-width: thin;
  }
}

.app-list-container::-webkit-scrollbar { 
  /*display: none;*/
}

#app-chats-list-container {
  display: block;
}

#app-contacts-list-container.show-smnumbers > .app-contact-container.list-item #app-contact-name {
  position: absolute;
  top: 6px;
  left: 60px;
}

#app-contacts-list-container.show-smnumbers > .app-contact-container.list-item #app-contact-smnumber {
  display: inline-block;
}

.app-contact-container,
.app-chat-container {
  position: relative;
  top: 40px;
  text-align: left;
  padding:14px;
  padding-left: 10px;
  padding-right: 10px;
  height: 20px;
  cursor: pointer;
}

#app-chats-list-container.invited .app-chat-container {
  top: 0px;
}

.app-contact-container.pop {
  background-color: #0962d0 !important;
}

.list-item.selected,
.list-item.pending-selected {
  background-color: #333;
}

.list-item:active {
  background-color: #333 !important;
}

.app-contact-container:hover,
.list-item.selected:hover,
.app-chat-container:hover {
  background-color: #b91d22;
}

.list-item.selected.invited:hover {
  background-color: #333;
}

#app-chat-new-message {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 5px;
  height: 100%;
  float: left;
}

#app-chats-list-container .app-chat-container.newmessage #app-chat-new-message {
  background-color: #0962d0;
}

#app-contact-selected {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 5px;
  height: 100%;
  background-color: #0a6ee8;
  display: none;
}

.app-contact-container.list-item.selected #app-contact-selected {
  display: block;
}

#app-contact-icon,
#app-contact-image-icon,
#app-chat-icon,
#app-chat-image-icon,
#app-chat-participants-icon {
  position: absolute;
  top: 5px;
  left: 12px;
  width: 36px;
  height: 36px;
  border-radius: 36px;
  border: 1px solid #666;
  float: left;
  text-align: center;
  line-height: 36px;
  background-color: #222;
  background-size: 38px;
  background-position: center;
}

#app-chat-participants-icon {
  top: 6px;
}

#app-chat-icon.hidden {
  opacity: 0;
}

.app-chat-container.list-item.group #app-chat-icon,
#app-chat-participants-icon.group {
  background-image: url("/icons/users.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 26px;
}

.app-chat-container.list-item.group #app-chat-icon.owner:hover {
  background-color: #b91d22;
  border: 1px solid #c7c4be;
  cursor: pointer;
  opacity: 1 !important;
}

.app-chat-container.list-item.group:has(> #app-chat-icon.owner:hover) {
  background-color: #222;
}

.app-chat-container.list-item.group.selected:has(> #app-chat-icon.owner:hover) {
  background-color: #333;
}

#app-contact-name,
#app-chat-name,
#app-chat-participants-name {
  position: relative;
  left: 50px;
  top: 6px;
  float: left;
  font-size: 14px;
}

#app-chat-participants-name {
  top: 16px;
  left: 60px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 412px;
}

#app-chat-participants-details-icon {
  position: absolute;
  height: 100%;
  width: 20px;
  right: 5px;
  background-image: url("/icons/more-vertical.svg");
  background-size: 30px;
  background-position: center;
  background-repeat: no-repeat;
  cursor: pointer;
}

#app-chat-participants-details-icon:hover {
  filter: brightness(0) saturate(100%) invert(13%) sepia(100%) saturate(4062%) hue-rotate(350deg) brightness(82%) contrast(88%);
}

.app-contact-container #app-contact-name {
  top: 0px;
  font-size: 14px;
}

#app-contact-name {
  max-width: 298px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.app-contact-container.pending #app-contact-name {
  color: #adadad;
  font-style: italic;
}

.app-contact-container.pending #app-contact-presence {
  display: none;
}

#app-contact-pending-text {
  position: absolute;
  top: 16px;
  right: 10px;
  color: #adadad;
  font-style: italic;
  font-size: 12px;
  display: none;
}

#app-contact-pending-text.show {
  display: block;
}

#app-chat-name,
#app-chat-date,
#app-chat-time {
  position: absolute;
  top: 6px;
  left: 60px;
}

#app-chat-date,
#app-chat-time {
  left: 332px;
  text-align: right;
  width: 98px;
  max-width: 98px;
  font-size: 12px;
  line-height: 18px;
  color: #adadad;
  font-style: italic;
}

#app-chat-time {
  top: 24px;
}

#app-contact-smnumber,
#app-chat-last-message {
  position: absolute;
  left: 60px;
  top: 24px;
  display: none;
  color: #adadad;
  font-style: italic;
  font-size: 14px;
}

#app-chat-last-message {
  display: block;
}

#app-chat-name,
#app-chat-last-message {
  max-width: 262px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#app-contact-silence-icon {
  position: absolute;
  top: 9px;
  right: 36px;
  width: 30px;
  height: 30px;
  background-image: url("/icons/volume-x.svg");
  background-size: 24px;
  background-position: center;
  background-repeat: no-repeat;
  display: none;
}

.app-contact-container.list-item.silence.offline #app-contact-silence-icon {
  right: 7px;
}

#app-chat-silenced-icon {
  position: absolute;
  right: 72px;
  top: 22px;
  width: 20px;
  height: 20px;
  background-image: url("/icons/volume-x-tiny.svg");
  background-size: 20px;
  background-position: center;
  background-repeat: no-repeat;
  display: none;
}

.app-contact-container.list-item.silence #app-contact-silence-icon,
.app-chat-container.list-item.silence #app-chat-silenced-icon {
  display: block;
  filter: brightness(0) saturate(100%) invert(82%) sepia(2%) saturate(14%) hue-rotate(331deg) brightness(85%) contrast(89%);
}

.app-presence-icon {
  position: absolute;
  top: 15px;
  right: 2px;
  width: 17px;
  height: 17px;
  background-color: #000;
  margin-right: 10px;
  border: 1px solid #666;
  border-radius: 17px;
  background-color: #333;
}

.app-presence-icon.offline {
  display: none;
}

.app-presence-icon.online {
  background-color: #228B22;
}

.app-presence-icon.busy {
  background-color: #b91d22;
}

.app-presence-icon.away {
  background-color: #e49b0f
}

#app-chat-by-invite-signup-info {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100px;
  width: 520px;
  background-image: url("/images/SekurMessengerW.svg");
  background-repeat: no-repeat;
  background-size: 450px;
  background-position: -72px;
}

#app-chat-by-invite-signup-text {
  line-height: 60px;
  color: #adadad;
  font-style: italic;
}

#signup-clicked {
  cursor: pointer;
  text-decoration: underline;
}

#signup-clicked:hover {
  color: #b91d22;
}

.app-user-info-container {
  position: absolute;
  top: 5px;
  right: 5px;
  height: 50px;
  width: fit-content;
  cursor: pointer;
}

.app-user-info-container:hover > #app-contact-name {
  color: #e14146;
}

.app-user-info-container #app-contact-image-icon,
.app-user-info-container #app-contact-icon {
  top: 3px;
}

.app-user-info-container #app-contact-presence {
  top: -2px;
}

.app-user-info-container #app-contact-presence {
  position: relative;
  margin-top: 18px;
  margin-left: 10px;
  display: inline-block;
}

.app-user-info-container #app-contact-name {
  position: relative;
  top: 16px;
  left: auto;
  font-size: 14px;
  font-style: italic;
}

#app-user-presence-menu-container .app-presence-icon {
  top: 1px;
}

.app-user-info-container:hover > #app-contact-name {
  /*color: #b91d22;*/
}

.app-user-info-container #app-contact-image-icon,
.app-user-info-container #app-contact-icon {
  position: relative;
  right: 0px;
  left: auto;
  margin-top: 4px;
  margin-right: 10px;
  margin-left: 10px;
  display: inline-block;
}

.app-user-info-container #app-contact-image-icon {
  position: absolute;
  left: 0px;
}

#app-user-presence-menu-container {
  position: fixed;
  top: 50px;
  right: 4px;
  text-align: right;
  z-index: 1;
  display: none;
  cursor: pointer;
}

#app-user-presence-online-container {
  margin-top: 2px;
}

.app-user-presence-menu-item {
  position: relative;
  right: 0px;
  width: fit-content;
  display: inline-block;
  margin-top: 0px;
  margin-bottom: 10px;
}

.app-user-presence-menu-label {
  position: relative;
  float: left;
  margin-right: 10px;
  top: -1px;
  font-size: 14px;
}

.app-user-presence-menu-item:hover > .app-user-presence-menu-label {
  color: #e14146;
}

.app-user-presence-menu-item .app-presence-icon {
  position: relative;
  display: inline-block;
}

.app-pulldown-menu-container,
#app-chat-message-menu-items-container {
  position: absolute;
  top: 60px;
  width: calc(100% - 1px);
  max-height: 406px;
  background-color: #222;
  border: 1px solid #444;
  border-top: 0px;
  z-index: 1;
  display: none;
  overflow-y: auto;
  /*scrollbar-width: none;
  -ms-overflow-style: none;*/
  border-radius: 0px 4px 0px 0px;
}

.app-pulldown-menu-container::-webkit-scrollbar-track {
  background: #333;
}

.app-pulldown-menu-container::-webkit-scrollbar-thumb {
  background: #444;
}

.app-pulldown-menu-container::-webkit-scrollbar-thumb:hover {
  background: #b91d22;
}

@supports (-moz-appearance:none) {
  .app-pulldown-menu-container,
  #app-chat-message-menu-items-container {
    scrollbar-width: thin;
  }
}

#app-chat-message-menu-items-container {
  width: auto;
}

.app-chat-message-container.me #app-chat-message-menu-items-container  {
  top: 26px;
  left: 8px;
}

.app-chat-message-container.peer #app-chat-message-menu-items-container  {
  top: 26px;
  left: unset;
  right: 8px;
}

.app-pulldown-menu-container::-webkit-scrollbar,
#app-chat-message-menu-items-container::-webkit-scrollbar {
    /*width: 0;
    height: 0;*/
}

.app-pulldown-menu-container.show {
  display: block;
}

#app-chat-adduser-pulldown.app-pulldown-menu-container {
  /*left: 70px;*/
}

#app-chat-deluser-pulldown.app-pulldown-menu-container {
  /*left: 86px;*/
}

#app-chatbyinvite-smsregions-pulldown.app-pulldown-menu-container {
  top: 202px;
  left: -1px;
  width: 100%;
  height: 242px;
  border-radius: 0px 0px 4px 4px;
}

#app-settings-language-menu-container.app-pulldown-menu-container,
#app-settings-notification-sound-menu-container.app-pulldown-menu-container,
#app-settings-archive-messages-menu-container.app-pulldown-menu-container,
#app-settings-tooltips-menu-container.app-pulldown-menu-container {
  top: 34px;
  left: -1px;
  border-radius: unset;
}

#app-messages-self-destruct-span-menu-container.app-pulldown-menu-container {
  top: 33px;
  left: 100px;
} 

#app-contacts-unblock-pulldown,
#app-contacts-silence-pulldown {
  left: -1px;
  width: 100%;
  border-radius: 4px 4px 0px 0px;
  z-index: 3;
  border-bottom: unset;
}

.app-chat-adduser-pulldown-item,
.app-chat-deluser-pulldown-item,
.app-chat-smsregions-pulldown-item,
.app-chat-message-delete-menu-item,
.app-chat-message-quote-menu-item,
.app-settings-language-menu-item,
.app-settings-notification-sound-menu-item,
.app-messages-self-destruct-span-menu-item,
.app-settings-display-tooltips-menu-item,
.app-settings-archive-messages-menu-item,
.app-contacts-unblock-menu-item,
.app-contacts-unblock-menu-item-nohover,
.app-contacts-silence-menu-item {
  position: relative;
  height: 36px;
  width: 100%;
  display: flex;
  border-bottom: 1px solid #444;
  cursor: pointer;
  background-color: #333;
}

.app-chat-message-delete-menu-item,
.app-chat-message-quote-menu-item {
  background-color: #222;
}

.app-chat-message-delete-menu-item.top,
#app-settings-language-menu-container,
#app-settings-notification-sound-menu-container,
#app-messages-self-destruct-span-menu-container,
#app-settings-tooltips-menu-container {
  border-top: 1px solid #444;
}

.app-chat-message-quote-menu-item.only {
  border-top: 1px solid #444;
  border-bottom: 0px;
}

.app-chat-adduser-pulldown-item.bottom,
.app-chat-deluser-pulldown-item.bottom,
.app-chat-message-quote-menu-item.bottom,
.app-settings-language-menu-item.bottom,
.app-settings-notification-sound-menu-item.bottom,
.app-messages-self-destruct-span-menu-item.bottom,
.app-settings-display-tooltips-menu-item.bottom {
  border-bottom: 0px;
}

.app-chat-adduser-pulldown-item:hover,
.app-chat-deluser-pulldown-item:hover,
.app-chat-smsregions-pulldown-item:hover,
.app-chat-message-delete-menu-item:hover,
.app-chat-message-quote-menu-item:hover,
.app-settings-language-menu-item:hover,
.app-settings-notification-sound-menu-item:hover,
.app-messages-self-destruct-span-menu-item:hover,
.app-settings-display-tooltips-menu-item:hover,
.app-settings-archive-messages-menu-item:hover,
.app-contacts-unblock-menu-item:hover,
.app-contacts-silence-menu-item:hover {
  background-color: #b91d22;
}

.app-chat-pulldown-name,
.app-chat-smsregion-name,
.app-chat-message-menu-item-label,
.app-app-settings-language-menu-item-label,
.app-app-settings-notification-sound-menu-item-label,
.app-messages-self-destruct-span-menu-item-label,
.app-app-settings-display-tooltips-menu-item-label,
.app-settings-archive-messages-menu-item-label,
.app-contacts-unblock-menu-item-label,
.app-contacts-silence-menu-item-label {
  position: relative;
  height: 100%;
  line-height: 36px;
  flex: 1;
  flex-shrink: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
  font-size: 14px;
}

.app-pulldown-spacer {
  width: 10px;
  flex-shrink: 0;
}

#app-chatbyinvite-type-container,
#app-chatbyinvite-inputs-container {
  display: flex;
}

#app-chatbyinvite-inputs-container {
  padding-top: 10px;
}

#app-chatbyinvite-inputs-container-inner {
  width: calc(100% - 22px);
  display: flex;
  flex-direction: column;
}

.app-chatbyinvite-type-spacer {
  width: 10px;
}

.app-chatbyinvite-inputs-spacer {
  height: 10px;
}

.app-chatbyinvite-label {
  padding-right: 2px;
}

.app-modal-chatbyinvite-radio {
  position: relative;
  top: -2px;
  width: 16px;
  height: 16px;
  border-radius: 16px;
  background-color: #333;
  border: 1px solid #555;
  appearance: none;
  padding: 0px;
}

.app-modal-chatbyinvite-radio:checked {
  background-color: #b91d22;
}

.app-modal-chatbyinvite-text-input {
  width: 100%;
  height: 40px;
  background-color: #222;
  border: 1px solid #555;
  border-radius: 4px;
  color: #f9f6ee;
  font-size: 14px;
}

.app-modal-chatbyinvite-text-input.valid {
  background-color: #333;
}

#app-modal-container.chatbyinvite #app-modal-yes-button {
  display: none;
}

#app-chatbyinvite-add-more-container {
  margin-top: 10px;
  cursor: pointer;
  display: none;
}

#app-chatbyinvite-additional-participants-container {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
}

#app-chatbyinvite-add-more-container:hover > #app-chatbyinvite-add-more-icon {
  filter: brightness(0) saturate(100%) invert(14%) sepia(90%) saturate(3778%) hue-rotate(348deg) brightness(89%) contrast(91%);
}

#app-chatbyinvite-add-more-container:hover > #app-chatbyinvite-add-more-label {
  color: #b91d22;
}

#app-chatbyinvite-add-more-icon,
.app-chatbyinvite-delete-participant-icon {
  height: 20px;
  width: 20px;
  background-image: url("/icons/plus.svg");
  background-size: 20px;
  background-position: center;
  background-repeat: no-repeat;
  margin-right: 5px;
  float: left;
}

.app-chatbyinvite-delete-participant-icon:hover {
  filter: brightness(0) saturate(100%) invert(14%) sepia(90%) saturate(3778%) hue-rotate(348deg) brightness(89%) contrast(91%);
  cursor: pointer;
}

.app-chatbyinvite-delete-participant-icon {
  background-image: url("/icons/x-small.svg");
}

#app-settings-list-tools {
  line-height: 60px;
  text-align: left;
  left: 0px;
  font-size: 14px;
  font-style: italic;
}

.app-settings-list-item {
  position: relative;
  width: 100%;
  height: 34px;
  text-align: left;
  border-bottom: 1px solid #444;
}

.app-settings-list-item:hover {
  /*background-color: #333;*/
}

.app-settings-list-item-label {
  position: relative;
  margin-left: 10px;
  line-height: 34px;
  font-size: 14px;
}

#app-add-update-profile-image,
#app-settings-language-menu-link,
#app-settings-self-destruct-value,
#app-settings-notifation-sound-value,
#app-settings-display-tooltips-value,
#app-settings-archive-messages-value.haspulldown {
  cursor: pointer;
}

#app-add-update-profile-image:hover,
#app-settings-language-menu-link:hover,
#app-settings-self-destruct-value:hover,
#app-settings-notifation-sound-value:hover,
#app-settings-display-tooltips-value:hover,
#app-settings-archive-messages-value.haspulldown:hover {
  color: #e14146;
}

#app-modal-self-destruct-settings-container {
  position: relative;
  display: flex;
}

.app-messages-self-destruct-number-icon {
  position: relative;
  width: 30px;
  height: 32px;
  background-size: 22px;
  background-position: center;
  background-repeat: no-repeat;
  cursor: pointer;
}

.app-messages-self-destruct-number-icon:hover {
  filter: brightness(0) saturate(100%) invert(32%) sepia(69%) saturate(3131%) hue-rotate(336deg) brightness(92%) contrast(91%);
}

#app-messages-self-destruct-number-plus {
  background-image: url("/icons/arrow-up.svg");
}

#app-messages-self-destruct-number-minus {
  background-image: url("/icons/arrow-down.svg");
  margin-right: 5px;
}

#app-messages-self-destruct-number {
  position: relative;
  width: 70px;
  height: 30px;
  background-color: #222;
  border: 1px solid #555;
  border-radius: 4px;
  font-size: 14px;
  color: #f9f6ee;
}

#app-messages-self-destruct-span-value {
  margin-left: 10px;
  line-height: 30px;
  cursor: pointer;
}

#app-messages-self-destruct-span-value:hover {
  color: #e14146;
}

.app-linkified {
  color: #0aa6e8;
  text-decoration: none;
}

.app-linkified:hover {
  text-decoration: underline;
}

#app-modal-chat-rename-input,
#app-modal-edit-chat-info-input {
  position: relative;
  width: calc(100% - 22px);
  height: 40px;
  background-color: #222;
  border: 1px solid #555;
  border-radius: 4px;
  font-size: 14px;
  color: #f9f6ee;
}

#app-modal-edit-chat-info-input {
  height: 90px;
  font-family: Verdana, sans-serif;
  box-shadow: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  resize: none;
  outline: none;
  padding: 10px;
}

.optin-text,
.optin-result {
  position: relative;
  width: 320px;
  text-align: left;
  left: 10px;
  padding-bottom: 14px;
  font-size: 14px;
}

.optin-text.bottom {
  display: none;
  padding-top: 10px;
}

.optin-result {
  display: none;
}

#app-modal-sms-registration-url-container {
  cursor: pointer;
}

#app-modal-sms-registration-url {
  position: absolute;
  left: 45px;
  line-height: 27px;
  float: right;
}

#app-modal-sms-registration-url-container:hover #app-copy-registration-url-icon {
  filter: brightness(0) saturate(100%) invert(40%) sepia(74%) saturate(572%) hue-rotate(72deg) brightness(90%) contrast(89%);
}

#app-modal-sms-registration-url-container:hover #app-modal-sms-registration-url {
  color: #228B22;
}

#app-copy-registration-url-icon {
  position: relative;
  top: -2px;
  width: 30px;
  height: 30px;
  background-image: url("/icons/copy.svg");
  background-size: 20px;
  background-position: center;
  background-repeat: no-repeat;
}

#app-copy-registration-url-icon:hover {
  filter: brightness(0) saturate(100%) invert(14%) sepia(63%) saturate(7389%) hue-rotate(352deg) brightness(77%) contrast(85%);
}

#app-copy-registration-url-icon:hover #app-modal-sms-registration-url {
  color: #b91d22;
}

#wait-screen #wait-text {
  position: relative;
  top: calc(27vh + 10px);
  font-size: 14px;
}

.app-label-attention {
  color: #0aa6e8;
}

.app-label-attention.click-to-show {
  cursor: pointer;
}

#app-logo-watermark {
  position: absolute;
  left: calc(50% - 210px);
  top: 35px;
  width: 360px;
  height: 400px;
  background-image: url("/images/IconSekurMessengerAllWhite.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0.2;
  display: inline-block;
}

.tooltiptext.disabled {
  display: none;
}

.tooltip + .tooltiptext {
  position: absolute;
  top: 0px;
  left: 0px;
  width: fit-content;
  visibility: hidden;
  background-color: #b91d22;
  text-align: center;
  padding: 6px;
  padding-top: 4px;
  border-radius: 4px;
  margin-left: -60px;
  opacity: 0;
  transition: opacity 0.3s;
  filter: none;
  white-space: nowrap;
  z-index: 10;
  color: #f9f6ee;
  font-size: 14px;
}

.tooltip + .tooltiptext::after {
  content: "";
  position: absolute;
  top: 13%;
  left: -10px;
  margin-left: -10px;
  border-width: 10px;
  border-style: solid;
  border-color: #b91d22 transparent transparent transparent;
  rotate: 90deg;
  z-index: 10;
}

.tooltip:hover + .tooltiptext {
  visibility: visible;
  opacity: 1;
  transition: visibility 0s linear 1s;
  transition: opacity 0s linear 1s;
}

#app-contacts-search-icon + .tooltiptext {
  top: 16px;
  left: 126px;
}

#app-contacts-add-icon + .tooltiptext {
  top: 16px;
  left: calc(126px + 54px);
}

#app-contacts-chat-icon + .tooltiptext {
  top: 16px;
  left: calc(126px + 108px);
}

#app-contacts-silence-icon + .tooltiptext {
  top: 16px;
  left: calc(126px + 162px);
}

#app-contacts-block-icon + .tooltiptext {
  top: 16px;
  left: calc(126px + 216px);
}

#app-contacts-delete-icon + .tooltiptext {
  top: 16px;
  left: calc(126px + 270px);
}

#app-contacts-smnumbers-icon + .tooltiptext {
  top: 16px;
  left: calc(126px + 324px);
}

#app-contacts-online-icon + .tooltiptext {
  top: 16px;
  left: calc(126px + 378px);
}

#app-chats-search-icon + .tooltiptext {
  top: 16px;
  left: 236px;
}

#app-chats-byinvite-icon + .tooltiptext {
  top: 16px;
  left: calc(236px + 54px);
}

#app-chats-bydate-icon + .tooltiptext {
  top: 16px;
  left: calc(236px + 108px);
}

#app-chats-online-icon + .tooltiptext {
  top: 16px;
  left: calc(236px + 162px);
}

#app-search-contacts-add-icon + .tooltiptext {
  top: 16px;
  left: 460px;
}

#app-search-input-close-icon + .tooltiptext {
  top: 16px;
  left: 504px;
}

#app-search-messages-input-close-icon + .tooltiptext {
  top: 16px;
  left: 562px;
}

#app-chat-messages-search-icon + .tooltiptext {
  top: 16px;
  left: 154px;
}

#app-chat-rename-icon + .tooltiptext {
  top: 16px;
  left: calc(154px + 54px);
}

#app-chat-adduser-icon + .tooltiptext {
  top: 16px;
  left: calc(154px + 108px);
}

#app-chat-deluser-icon + .tooltiptext {
  top: 16px;
  left: calc(154px + 162px);
}

#app-chat-silence-icon + .tooltiptext {
  top: 16px;
  left: calc(154px + 216px);
}

#app-chat-delete-icon + .tooltiptext {
  top: 16px;
  left: calc(154px + 270px);
}

#app-chat-info-icon + .tooltiptext {
  top: 16px;
  left: calc(154px + 324px);
}

#app-chat-close-icon + .tooltiptext {
  top: 16px;
  left: calc(154px + 378px);
}

#app-list-reset-selection + .tooltiptext {
  top: 4px;
  left: 118px;
}

#app-contacts-icon + .tooltiptext {
  top: 84px;
  left: 142px;
}

#app-chats-icon + .tooltiptext {
  top: 162px;
  left: 142px;
}

#app-calls-icon + .tooltiptext {
  top: 245px;
  left: 142px;
}

#app-settings-icon + .tooltiptext {
  top: 246px;
  left: 142px;
}

#app-email-icon + .tooltiptext {
  top: 326px;
  left: 142px;
}

#app-dashboard-icon + .tooltiptext {
  top: 403px;
  left: 142px;
}

#app-logout-icon + .tooltiptext {
  top: calc(100% - 56px);
  left: 142px;
}

#app-online-status-icon + .tooltiptext {
  top: calc(100% - 130px);
  left: 142px;
}

#app-alert-attention-required + .tooltiptext {
  top: calc(100% - 215px);
  left: 142px;
}

#app-chat-message-send + .tooltiptext {
  top: calc(100% - 44px);
  left: 484px;
}

#app-chat-audio-message + .tooltiptext {
  top: calc(100% - 44px);
  left: 520px;
}

#app-chat-message-attach + .tooltiptext {
  top: calc(100% - 44px);
  left: 564px;
}

#app-modal-close-icon + .tooltiptext,
#app-modal-over-modal-close-icon + .tooltiptext {
  top: 10px;
  left: 466px;
}

.app-modal-share-audio-control-button ~ .tooltiptext {
  position: absolute;
  top: 5px;
  left: 184px;
  height: 20px;
  line-height: 20px;
}

.app-modal-share-audio-control-button#app-modal-share-audio-stop-button ~ .tooltiptext {
  left: 254px;
}

.app-modal-share-audio-control-button#app-modal-share-audio-play-button ~ .tooltiptext {
  left: 316px;
}

.app-modal-share-audio-control-button#app-modal-share-audio-delete-button ~ .tooltiptext {
  left: 385px;
}
