/* © 2016-2018 FlowCrypt Limited. Limitations apply. Contact human@flowcrypt.com */

/* Secure Compose button */
#flowcrypt_secure_compose_button_icon {
  display: inline-flex;
  align-items: center;
  width: auto;
  height: 56px;
  margin: 0;
  padding: 0 24px 0 0;
  transition: box-shadow 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  font-family: 'Google Sans', Roboto, RobotoDraft, Helvetica, Arial, sans-serif;
  font-size: 0.875rem;
  letter-spacing: 0.25px;
  line-height: 32px;
  background-color: #fff;
  border: none;
  border-radius: 16px;
  box-shadow:
    0 1px 2px 0 rgb(60 64 67 / 30%),
    0 1px 3px 1px rgb(60 64 67 / 15%);
  color: #3c4043;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-transform: none;
  cursor: pointer;
  user-select: none;
  outline: 0;
}

.small #flowcrypt_secure_compose_button_icon {
  height: 40px;
}

#flowcrypt_secure_compose_button_icon::before {
  display: block;
  content: '';
  background-size: 24px;
  min-width: 56px;
  height: 100%;

  /* inline SVG because of https://github.com/FlowCrypt/flowcrypt-browser/issues/4098#issuecomment-984814877 */
  background-image: url('data:image/svg+xml;utf8,<svg width="220" height="142" viewBox="0 0 220 142" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M31.4 80.108l31.438 31.437-21.6 21.6c-5.467 5.468-14.331 5.468-19.799 0l-15.881-15.88a8 8 0 0 1 0-11.315L31.4 80.108z" fill="%234F4F4F"/><path d="M70.775 40.733l70.735 70.735-21.6 21.6c-5.467 5.467-14.332 5.467-19.8 0L39.277 72.233l31.5-31.5z" fill="%2331A217" opacity=".9"/><path d="M115.1 6.308l100.132 100.133a7 7 0 0 1 0 9.899l-16.65 16.65c-5.468 5.468-14.332 5.468-19.8 0L78.65 32.858l26.55-26.55a7 7 0 0 1 9.9 0z" fill="%2331A217"/></g></svg>');
  background-position: center;
  background-repeat: no-repeat;
}

.compose_icon_simple {
  height: 33px !important;
  margin: 0 12px !important;
  display: block !important;
}

.compose_icon_simple::before {
  left: -6px;
  position: relative;
}

#flowcrypt_secure_compose_button_icon:hover,
#flowcrypt_secure_compose_button_icon:focus {
  box-shadow: 0 5px 10px 2px rgb(60 64 67 / 20%);
}

.bhZ:not(.bym) #flowcrypt_secure_compose_button_icon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  font-size: 0;
  padding: 0;
}

.bhZ:not(.bym) .small #flowcrypt_secure_compose_button_icon {
  width: 40px;
  height: 40px;
  border-radius: 20px;
}

.bhZ:not(.bym) .small #flowcrypt_secure_compose_button_icon::before {
  min-width: 42px;
}

.apW {
  margin-top: 3px;
}

.pb-25px {
  padding-bottom: 25px;
}

[class*='_destroyable'].z0:not(.small) {
  margin-bottom: 0 !important;
  display: initial;
}

/* notifications */
div.webmail_notifications {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999;
  height: 0;
}

div.webmail_notifications div.webmail_notification {
  background-color: rgb(249, 237, 190);
  border: 1px solid rgb(240, 195, 109);
  border-radius: 2px;
  box-shadow: rgb(0, 0, 0, 0.2) 0 2px 4px 0;
  color: rgb(34, 34, 34);
  font-family: -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: 12.8px;
  font-weight: bold;
  line-height: 16px;
  padding: 6px 10px;
  z-index: 999;
  margin: 50px auto 0;
  max-width: 90%;
}

div.webmail_notifications div.webmail_notification .webmail_notification_buttons {
  margin: 10px 0 5px;
}

div.webmail_notifications div.webmail_notification .action_open_settings {
  font-weight: 500;
}

div.webmail_notifications div.webmail_notification a {
  color: black;
  padding-left: 6px;
  padding-right: 2px;
}

div.webmail_notifications div.webmail_notification a:hover {
  text-decoration: none;
}

body.cryptup_inbox div.webmail_notifications {
  position: fixed;
}

body.cryptup_outlook div.webmail_notifications div.webmail_notification {
  margin-top: 10px;
}

.error_notification {
  background: #c53929;
  color: #fff;
  margin-top: -1px;
  padding: 12px;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
}

.error_notification a {
  color: #fff !important;
}

/* buttons body.cryptup_inbox */
body.cryptup_inbox div.new_secure_compose_window_button {
  position: relative;
  width: 40px;
  box-sizing: content-box;
  cursor: pointer;
  border: none;
  -webkit-user-drag: none;
  margin-right: 8px;
  background: white;
}

body.cryptup_inbox div.new_secure_compose_window_button > img {
  width: 28px;
  padding: 6px;
  padding-top: 10px;
}

body.cryptup_inbox .pgp_message_container .nk .tq:first-child {
  display: none !important;
}

/* reply, reply all, forward in menu next to encrypted messages */

/* buttons body.cryptup_gmail */
body.cryptup_gmail .inserted div.reply_message_button {
  position: relative;
  display: inline-flex;
  padding: 20px 12px 0 10px;
  opacity: 0.75;
  margin-left: 18px;
  margin-right: 8px;
  height: auto;
}

@supports (-moz-appearance: none) {
  /* Firefox specific */
  body.cryptup_gmail .inserted div.reply_message_button {
    padding-bottom: 4px;
  }
}

body.cryptup_gmail div.action_menu_message_button {
  display: flex;
  align-items: center;
  text-transform: capitalize;
  cursor: pointer;
  padding: 4px;
}

body.cryptup_gmail div.action_menu_message_button:hover {
  background-color: #eee; /* mimic Gmail hover. uses exact color pallete from Gmail */
}

body.cryptup_gmail div.action_menu_message_button > img {
  height: 20px;
  width: 20px;
  padding: 0 12px;
  object-fit: contain;
}

body.cryptup_gmail.firefox .inserted div.reply_message_button {
  padding-top: 16px;
}

/* else buttons misaligned vertically on FF */
body.cryptup_gmail .inserted div.reply_message_button:hover {
  opacity: 0.9;
  cursor: pointer;
}

body.cryptup_gmail div.reply_message_button > img {
  width: 28px;
  position: absolute;
  left: 0;
  right: 0;
  top: 3px;
  margin: 0 auto;
}

body.cryptup_gmail_standard div.new_secure_compose_window_button {
  background: #31a217;
}

body.cryptup_gmail_standard .z0 .T-I {
  min-width: 105px;
}

body.cryptup_gmail_new div.new_secure_compose_window_button:hover {
  background-color: #fafafb;
}

body.cryptup_gmail div.hj.appended span.cryptup_convo_button > img {
  border: 2px solid #31a217;
  width: 10px;
  margin: 4px;
  position: relative;
  bottom: 1px;
  opacity: 0.8;
}

body.cryptup_gmail div.hj.appended span.cryptup_convo_button > span {
  text-transform: uppercase;
  font-size: 9.5px;
  color: white;
  background: #31a217;
  padding: 2px 3px;
  display: inline-block;
  border-radius: 2px;
  cursor: pointer;
}

body.cryptup_gmail div.hj.appended span.cryptup_convo_button:hover > img,
div.hj.appended span.cryptup_convo_button:hover > span {
  opacity: 1;
}

body.cryptup_gmail div.hj.appended span.cryptup_convo_button:not(:first-child) {
  margin-left: 5px;
}

body.cryptup_gmail.cryptup_gmail_new div.hj.appended span.cryptup_convo_button {
  margin-left: 18px;
  zoom: 1.2;
  float: left;
  margin-top: 2px;
}

/* The 'End Pass Phrase Session' button */
body.cryptup_gmail .action_finish_session {
  position: fixed;
  bottom: 3px;
  left: 50%;
  width: 300px;
  margin-left: -150px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  color: #000;
  text-decoration: none;
  background: rgb(200, 200, 200, 0.95);
  padding: 6px 0;
  cursor: pointer;
  z-index: 3;
  border-radius: 3px;
  opacity: 0.9;
}

body.cryptup_gmail .action_finish_session:hover {
  opacity: 1;
}

body.cryptup_gmail .action_finish_session img {
  height: 18px;
  margin: 0 15px 0 -15px;
}

/* buttons body.cryptup_outlook */
body.cryptup_outlook .cryptup_compose_button_container {
  display: inline-block;
  width: 30px;
}

body.cryptup_outlook .cryptup_compose_button_container .new_secure_compose_window_button {
  display: inline-block;
  position: absolute;
  left: 12px;
  margin-top: 9px;
  background-color: #31a217;
  padding: 2px;
  height: 19px;
  cursor: pointer;
}

body.cryptup_outlook ._fce_i {
  padding: 0 6px;
}

/* slightly less horizontal padding on other outlook buttons in the same menu so that it doesn't misbehave */

/* elements */
.secure_compose_window {
  position: absolute;
  bottom: 0;
  width: 540px;
  padding: 0;
  z-index: 6;
  height: 605px;
  transition: 0.1s height ease-in-out;
  box-shadow: rgb(0, 0, 0, 0.3) 0 2px 8px;
}

.secure_compose_window.previous_active {
  z-index: 7;
}

.secure_compose_window.active {
  z-index: 8;
}

.secure_compose_window:not(.active)::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgb(255, 255, 255, 0.4);
  pointer-events: none;
}

.secure_compose_window[data-order='1'] {
  right: 30px;
}

.secure_compose_window[data-order='2'] {
  left: 50%;
  margin-left: -270px;
}

.secure_compose_window[data-order='3'] {
  left: 30px;
}

.secure_compose_window.full_window {
  width: 100%;
  height: 100%;
  left: unset;
  right: unset;
  margin: 0;
}

.secure_compose_window iframe {
  width: 100%;
  height: 605px;
  border: none;
  padding: 0;
  margin: 0;
  overflow: hidden;
}

.secure_compose_window.full_window iframe {
  height: 100%;
}

@media screen and (height <= 600px) {
  .secure_compose_window,
  .secure_compose_window iframe {
    height: 450px;
  }
}

div.evaluated iframe.embedded {
  width: 500px;
  height: 160px;
  border: 1px solid #cacaca;
}

/* verification results */
iframe.pgp_block {
  width: 100%;
  border: none;
  overflow: hidden;
}

iframe.backup_block {
  width: 100%;
  height: 400px;
  border: none;
  overflow: hidden;
}

iframe.reply_message {
  height: 80px;
  width: 100%;
  border: none;
}

.I5.reply_message_evaluated.remove_borders {
  padding-left: 7px !important;
}

.Bk {
  overflow: hidden;
}

.l2 {
  padding-bottom: 0 !important;
}

.remove_borders {
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
}

span.pgp_attachment {
  display: block;
  float: left;
  margin: 0 0 16px 16px;
  height: 120px;
  width: 180px;
  position: relative;
}

span.pgp_attachment > iframe {
  height: 120px;
  width: 180px;
  padding: 0;
  margin: 0;
  border: none;
  overflow: hidden;
}

div.attachment_loader {
  line-height: 24px;
}

div.attachment_loader > i {
  position: relative;
  top: 6px;
}

div.reply_message_iframe_container {
  margin-bottom: 0;
  padding-bottom: 0;
  line-height: 8px;
}

div.reply_message_iframe_container.inserted {
  width: calc(100% - 72px);
  margin-left: 72px !important;
}

/* offline drafts */
#fc_offline_drafts {
  margin-top: 3em;
}

#fc_offline_drafts a {
  display: block;
  cursor: pointer;
  background: rgb(242, 245, 245, 0.8);
  color: #202124;
  outline: 1px solid rgb(100 121 143 / 12%);
  padding: 10px 20px;
  text-decoration: none;
  margin-bottom: 1px;
}

#fc_offline_drafts a:hover {
  outline: 2px solid rgb(218, 220, 224);
}

/* augmented */
body.cryptup_gmail div.recipients_use_encryption {
  min-height: 0;
  background-color: #f5f5f5;
  margin: 0 -20px;
  padding: 4px 20px;
}

body.cryptup_gmail div.recipients_use_encryption a {
  position: absolute;
  right: 20px;
}

.swal2-popup.ui-modal-iframe {
  padding: 0;
  border-radius: 0;
}

.swal2-popup.ui-modal-iframe .swal2-html-container {
  margin: 0;
  padding: 0;
}

.swal2-popup.ui-modal-iframe .swal2-close {
  color: #999;
}

.swal2-popup.ui-modal-iframe iframe {
  display: flex;
  max-width: 100%;
}

.swal2-container.ui-modal-attachment {
  padding: 0;
  background: rgb(0, 0, 0, 0.85) !important;
  overflow-y: hidden !important;
}

.swal2-container.ui-modal-attachment .swal2-close {
  margin: 6px 6px -54px;
}

.swal2-container.ui-modal-attachment .swal2-popup {
  padding: 0;
  background: transparent;
}

.swal2-container.ui-modal-attachment .swal2-html-container {
  height: 100vh;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.swal2-container.ui-modal-attachment iframe {
  width: 100%;
  height: 100%;
}

.swal2-popup.swal2-toast.ui-toast {
  background-color: #000;
  opacity: 0.8;
}

.swal2-popup.swal2-toast .swal2-title.ui-toast-title {
  color: #fff;
  margin: 0 0.6em 0.3em;
}

.swal2-popup.swal2-toast.ui-toast .swal2-timer-progress-bar {
  background: rgb(255, 255, 255, 0.5);
}
