mailgo/dist/mailgo.neumorphism.css

a new concept of mailto and tel links

.m-modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  overflow: hidden;
  font-size: 16.5px;
  z-index: 10000;
}
.m-modal p,
.m-modal span,
.m-modal strong,
.m-modal a {
  margin: 0;
  padding: 0;
  font-size: 100%;
  line-height: 1;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica,
    Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
  text-rendering: optimizeLegibility;
}
.m-modal strong {
  font-weight: 700;
}
.m-modal .m-modal-back {
  position: absolute;
  z-index: 10001;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #20232a;
  opacity: 0.8;
}
.m-modal .m-modal-content {
  position: relative;
  z-index: 10002;
  box-sizing: content-box;
  text-align: center;
  overflow: hidden;
  min-width: 200px;
  max-width: 240px;
  background-color: #fff;
  opacity: 0.95;
  border-radius: 20px;
  box-shadow: 0 3px 20px rgba(32, 35, 42, 0.5);
  border: 3px solid #333;
  color: #4a4a4a;
  display: flex;
  flex-direction: column;
  overflow: auto;
  padding: 24px;
  transition: 0.5s box-shadow;
}
.m-modal .m-modal-content:hover,
.m-modal .m-modal-content:focus,
.m-modal .m-modal-content:active {
  opacity: 1;
}
.m-modal .m-modal-content .m-title {
  margin-bottom: 8px;
  overflow: hidden;
  white-space: pre-line;
  text-overflow: ellipsis;
  line-height: 1.2em;
}
.m-modal .m-modal-content .m-details {
  margin-bottom: 10px;
}
.m-modal .m-modal-content .m-details p {
  white-space: pre-line;
  font-size: 12px;
  margin-top: 3px;
  margin-bottom: 3px;
}
.m-modal .m-modal-content a {
  cursor: pointer;
  padding: 10px;
  color: #4a4a4a;
  border-radius: 20px;
  text-decoration: none;
}
.m-modal .m-modal-content a.m-gmail {
  color: #c0372a;
}
.m-modal .m-modal-content a.m-gmail:hover,
.m-modal .m-modal-content a.m-gmail:focus,
.m-modal .m-modal-content a.m-gmail:active {
  background-color: rgba(192, 55, 42, 0.08);
  color: #c0372a;
}
.m-modal .m-modal-content a.m-outlook {
  color: #0967aa;
}
.m-modal .m-modal-content a.m-outlook:hover,
.m-modal .m-modal-content a.m-outlook:focus,
.m-modal .m-modal-content a.m-outlook:active {
  background-color: rgba(9, 103, 170, 0.08);
  color: #0967aa;
}
.m-modal .m-modal-content a.m-yahoo {
  color: #4a00a0;
}
.m-modal .m-modal-content a.m-yahoo:hover,
.m-modal .m-modal-content a.m-yahoo:focus,
.m-modal .m-modal-content a.m-yahoo:active {
  background-color: rgba(74, 0, 160, 0.08);
  color: #4a00a0;
}
.m-modal .m-modal-content a.m-tg {
  color: #086da0;
}
.m-modal .m-modal-content a.m-tg:hover,
.m-modal .m-modal-content a.m-tg:focus,
.m-modal .m-modal-content a.m-tg:active {
  background-color: rgba(8, 109, 160, 0.08);
  color: #086da0;
}
.m-modal .m-modal-content a.m-wa {
  color: #067466;
}
.m-modal .m-modal-content a.m-wa:hover,
.m-modal .m-modal-content a.m-wa:focus,
.m-modal .m-modal-content a.m-wa:active {
  background-color: rgba(6, 116, 102, 0.08);
  color: #067466;
}
.m-modal .m-modal-content a.m-skype {
  color: #076d92;
}
.m-modal .m-modal-content a.m-skype:hover,
.m-modal .m-modal-content a.m-skype:focus,
.m-modal .m-modal-content a.m-skype:active {
  background-color: rgba(7, 109, 146, 0.08);
  color: #076d92;
}
.m-modal .m-modal-content a.m-copy {
  padding: 16px 10px;
  font-size: 16px;
}
.m-modal .m-modal-content a.m-default:hover,
.m-modal .m-modal-content a.m-default:focus,
.m-modal .m-modal-content a.m-default:active,
.m-modal .m-modal-content a.m-copy:hover,
.m-modal .m-modal-content a.m-copy:focus,
.m-modal .m-modal-content a.m-copy:active {
  background-color: rgba(0, 0, 0, 0.08);
  color: #4a4a4a;
}
.m-modal .m-modal-content a.m-custom-action {
  color: #0b790b;
}
.m-modal .m-modal-content a.m-custom-action:hover,
.m-modal .m-modal-content a.m-custom-action:focus,
.m-modal .m-modal-content a.m-custom-action:active {
  background-color: rgba(11, 121, 11, 0.08);
  color: #0b790b;
}
.m-modal .m-modal-content a.m-by {
  font-size: 12px;
  margin-top: 0.8rem;
  padding: 5px;
  color: #4a4a4a;
}
.m-modal .m-modal-content a.m-by:hover,
.m-modal .m-modal-content a.m-by:focus,
.m-modal .m-modal-content a.m-by:active {
  color: #3d3d3d;
}
.m-modal .m-modal-content .w-500 {
  font-weight: 500;
}
.m-modal.m-dark .m-modal-content {
  background-color: #20232a;
}
.m-modal.m-dark .m-modal-content,
.m-modal.m-dark .m-modal-content p,
.m-modal.m-dark .m-modal-content p span,
.m-modal.m-dark .m-modal-content strong {
  color: #fff;
}
.m-modal.m-dark .m-modal-content a {
  color: #eaeaea;
}
.m-modal.m-dark .m-modal-content a:not(.m-by):hover,
.m-modal.m-dark .m-modal-content a:not(.m-by):focus,
.m-modal.m-dark .m-modal-content a:not(.m-by):active {
  background-color: rgba(134, 134, 134, 0.08);
  color: #eaeaea;
}
.m-modal.m-dark .m-modal-content a.m-gmail {
  color: #e07d73;
}
.m-modal.m-dark .m-modal-content a.m-gmail:hover,
.m-modal.m-dark .m-modal-content a.m-gmail:focus,
.m-modal.m-dark .m-modal-content a.m-gmail:active {
  background-color: rgba(224, 125, 115, 0.08);
  color: #e07d73;
}
.m-modal.m-dark .m-modal-content a.m-outlook {
  color: #4c9cd7;
}
.m-modal.m-dark .m-modal-content a.m-outlook:hover,
.m-modal.m-dark .m-modal-content a.m-outlook:focus,
.m-modal.m-dark .m-modal-content a.m-outlook:active {
  background-color: rgba(76, 156, 215, 0.08);
  color: #4c9cd7;
}
.m-modal.m-dark .m-modal-content a.m-yahoo {
  color: #ac88d3;
}
.m-modal.m-dark .m-modal-content a.m-yahoo:hover,
.m-modal.m-dark .m-modal-content a.m-yahoo:focus,
.m-modal.m-dark .m-modal-content a.m-yahoo:active {
  background-color: rgba(172, 136, 211, 0.08);
  color: #ac88d3;
}
.m-modal.m-dark .m-modal-content a.m-tg {
  color: #4cabdb;
}
.m-modal.m-dark .m-modal-content a.m-tg:hover,
.m-modal.m-dark .m-modal-content a.m-tg:focus,
.m-modal.m-dark .m-modal-content a.m-tg:active {
  background-color: rgba(76, 171, 219, 0.08);
  color: #4cabdb;
}
.m-modal.m-dark .m-modal-content a.m-wa {
  color: #4cd2c0;
}
.m-modal.m-dark .m-modal-content a.m-wa:hover,
.m-modal.m-dark .m-modal-content a.m-wa:focus,
.m-modal.m-dark .m-modal-content a.m-wa:active {
  background-color: rgba(76, 210, 192, 0.08);
  color: #4cd2c0;
}
.m-modal.m-dark .m-modal-content a.m-skype {
  color: #4cc7f4;
}
.m-modal.m-dark .m-modal-content a.m-skype:hover,
.m-modal.m-dark .m-modal-content a.m-skype:focus,
.m-modal.m-dark .m-modal-content a.m-skype:active {
  background-color: rgba(76, 199, 244, 0.08);
  color: #4cc7f4;
}
.m-modal.m-dark .m-modal-content a.m-custom-action {
  color: #b0ecb0;
}
.m-modal.m-dark .m-modal-content a.m-custom-action:hover,
.m-modal.m-dark .m-modal-content a.m-custom-action:focus,
.m-modal.m-dark .m-modal-content a.m-custom-action:active {
  background-color: rgba(176, 236, 176, 0.08);
  color: #b0ecb0;
}
.m-modal.m-dark .m-modal-content a.m-by:hover,
.m-modal.m-dark .m-modal-content a.m-by:focus,
.m-modal.m-dark .m-modal-content a.m-by:active {
  color: #fff;
}

.m-modal-content {
  opacity: 0.95;
  box-shadow: 20px 20px 50px rgba(32, 35, 42, 0.5),
    -30px -30px 60px rgba(32, 35, 42, 0.5);
}
.m-modal-content a {
  background: #e3e3e3;
  box-shadow: 8px 8px 16px #c1c1c1, -8px -8px 16px #ffffff;
  margin: 10px 0px;
}
.m-modal-content a.m-by {
  color: #4a4a4a;
}

.m-modal .m-modal-content {
  background: #e3e3e3;
  opacity: 0.95;
}
.m-modal .m-modal-content a.m-gmail:hover,
.m-modal .m-modal-content a.m-outlook:hover,
.m-modal .m-modal-content a.m-yahoo:hover,
.m-modal .m-modal-content a.m-tg:hover,
.m-modal .m-modal-content a.m-wa:hover,
.m-modal .m-modal-content a.m-skype:hover,
.m-modal .m-modal-content a.m-default:hover,
.m-modal .m-modal-content a.m-copy:hover,
.m-modal .m-modal-content a.m-custom-action:hover,
.m-modal .m-modal-content a.m-by:hover {
  background: #e3e3e3;
  box-shadow: inset 5px 5px 10px #bababa, inset -5px -5px 10px #ffffff;
}
.m-modal .m-modal-content a.m-gmail:focus,
.m-modal .m-modal-content a.m-outlook:focus,
.m-modal .m-modal-content a.m-yahoo:focus,
.m-modal .m-modal-content a.m-tg:focus,
.m-modal .m-modal-content a.m-wa:focus,
.m-modal .m-modal-content a.m-skype:focus,
.m-modal .m-modal-content a.m-default:focus,
.m-modal .m-modal-content a.m-copy:focus,
.m-modal .m-modal-content a.m-custom-action:focus,
.m-modal .m-modal-content a.m-by:focus {
  background: #e3e3e3;
  box-shadow: inset 5px 5px 10px #bababa, inset -5px -5px 10px #ffffff;
}
.m-modal .m-modal-content a.m-gmail:active,
.m-modal .m-modal-content a.m-outlook:active,
.m-modal .m-modal-content a.m-yahoo:active,
.m-modal .m-modal-content a.m-tg:active,
.m-modal .m-modal-content a.m-wa:active,
.m-modal .m-modal-content a.m-skype:active,
.m-modal .m-modal-content a.m-default:active,
.m-modal .m-modal-content a.m-copy:active,
.m-modal .m-modal-content a.m-custom-action:active,
.m-modal .m-modal-content a.m-by:active {
  background: #e3e3e3;
  box-shadow: inset 5px 5px 10px #bababa, inset -5px -5px 10px #ffffff;
}
.m-modal .m-modal-content:hover,
.m-modal .m-modal-content:focus,
.m-modal .m-modal-content:active {
  opacity: 0.95;
}
.m-modal .m-modal-content a.m-gmail {
  color: #c2564d;
}
.m-modal .m-modal-content a.m-outlook {
  color: #3178aa;
}
.m-modal .m-modal-content a.m-yahoo {
  color: #6b429b;
}
.m-modal .m-modal-content a.m-custom-action {
  color: #0b790b;
}
.m-modal.m-dark .m-modal-content strong {
  color: #d1d1d1;
}
.m-modal.m-dark .m-modal-content #m-cc-value,
.m-modal.m-dark .m-modal-content #m-bcc-value,
.m-modal.m-dark .m-modal-content #m-subject-value,
.m-modal.m-dark .m-modal-content #m-body-value {
  color: #d1d1d1;
}
.m-modal.m-dark .m-modal-content a.m-gmail:hover,
.m-modal.m-dark .m-modal-content a.m-outlook:hover,
.m-modal.m-dark .m-modal-content a.m-yahoo:hover,
.m-modal.m-dark .m-modal-content a.m-tg:hover,
.m-modal.m-dark .m-modal-content a.m-wa:hover,
.m-modal.m-dark .m-modal-content a.m-skype:hover,
.m-modal.m-dark .m-modal-content a.m-default:hover,
.m-modal.m-dark .m-modal-content a.m-copy:hover,
.m-modal.m-dark .m-modal-content a.m-custom-action:hover,
.m-modal.m-dark .m-modal-content a.m-by:hover {
  background: #20232a;
  box-shadow: inset 5px 5px 10px #15171b, inset -5px -5px 10px #2b2f39;
}
.m-modal.m-dark .m-modal-content a.m-gmail:focus,
.m-modal.m-dark .m-modal-content a.m-outlook:focus,
.m-modal.m-dark .m-modal-content a.m-yahoo:focus,
.m-modal.m-dark .m-modal-content a.m-tg:focus,
.m-modal.m-dark .m-modal-content a.m-wa:focus,
.m-modal.m-dark .m-modal-content a.m-skype:focus,
.m-modal.m-dark .m-modal-content a.m-default:focus,
.m-modal.m-dark .m-modal-content a.m-copy:focus,
.m-modal.m-dark .m-modal-content a.m-custom-action:focus,
.m-modal.m-dark .m-modal-content a.m-by:focus {
  background: #20232a;
  box-shadow: inset 5px 5px 10px #15171b, inset -5px -5px 10px #2b2f39;
}
.m-modal.m-dark .m-modal-content a.m-gmail:active,
.m-modal.m-dark .m-modal-content a.m-outlook:active,
.m-modal.m-dark .m-modal-content a.m-yahoo:active,
.m-modal.m-dark .m-modal-content a.m-tg:active,
.m-modal.m-dark .m-modal-content a.m-wa:active,
.m-modal.m-dark .m-modal-content a.m-skype:active,
.m-modal.m-dark .m-modal-content a.m-default:active,
.m-modal.m-dark .m-modal-content a.m-copy:active,
.m-modal.m-dark .m-modal-content a.m-custom-action:active,
.m-modal.m-dark .m-modal-content a.m-by:active {
  background: #20232a;
  box-shadow: inset 5px 5px 10px #15171b, inset -5px -5px 10px #2b2f39;
}
.m-modal.m-dark .m-modal-content a {
  color: #d1d1d1;
  background: linear-gradient(145deg, #1d2026, #22252d);
  box-shadow: 5px 5px 10px #191b20, -5px -5px 10px #272b34;
}
.m-modal.m-dark:not(.m-by):hover,
.m-modal.m-dark:not(.m-by):focus,
.m-modal.m-dark:not(.m-by):active {
  background-color: rgba(134, 134, 134, 0.08);
  color: #d1d1d1;
}

/*# sourceMappingURL=mailgo.neumorphism.css.map */