iwmlib/lib/card/test/example/_theme/css/popup.css

/* Color */
/* Font Properties */
/* Spacing */
/* Borders */
/* Shadows */
/*
$context: "../../../../../..";
$white: #FEFEFE;
$shady-white: rgb(240, 240, 240);
$gray: #CCC;
$dark: #333;
$black: #222;

$small-edge-radius: 3px;
$big-edge-radius: 10px;

$small-pad: 16px;
$big-pad: 32px;
$tuebingen-red: #e73230;

$increased-letter-spacing: 0.1em;





$font-color: $black;



$text-font-size: 26px;
$medium-font-size: 28px;
$large-font-size: 32px;

$regular-font-size: 1.451rem;


$subtitle-font-size: $medium-font-size;
$title-font-size: $subtitle-font-size * 1.641;

/* Font Weights */
/*
$strong-font-weight: 700;
$medium-font-weight: 500;
$light-font-weight: 300;

*/
/* Color */
/* Font Properties */
/* Spacing */
/* Borders */
/* Shadows */
/*
$context: "../../../../../..";
$white: #FEFEFE;
$shady-white: rgb(240, 240, 240);
$gray: #CCC;
$dark: #333;
$black: #222;

$small-edge-radius: 3px;
$big-edge-radius: 10px;

$small-pad: 16px;
$big-pad: 32px;
$tuebingen-red: #e73230;

$increased-letter-spacing: 0.1em;





$font-color: $black;



$text-font-size: 26px;
$medium-font-size: 28px;
$large-font-size: 32px;

$regular-font-size: 1.451rem;


$subtitle-font-size: $medium-font-size;
$title-font-size: $subtitle-font-size * 1.641;

/* Font Weights */
/*
$strong-font-weight: 700;
$medium-font-weight: 500;
$light-font-weight: 300;

*/
@font-face {
  font-family: "Material Icons";
  font-style: normal;
  font-weight: 400;
  src: url(../fonts/material-icon-font/MaterialIcons-Regular.eot);
  /* For IE6-8 */
  src: local("Material Icons"), local("MaterialIcons-Regular"), url(../fonts/material-icon-font/MaterialIcons-Regular.woff2) format("woff2"), url(../fonts/material-icon-font/MaterialIcons-Regular.woff) format("woff"), url(../fonts/material-icon-font/MaterialIcons-Regular.ttf) format("truetype");
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;
  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;
  /* Support for IE. */
  -webkit-font-feature-settings: 'liga';
          font-feature-settings: 'liga';
}

.popup {
  width: 800px;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  min-width: 400px;
  color: #191919;
  background-color: #f2f2f2;
  border-radius: 3px;
  -webkit-box-shadow: 0 0 100px rgba(0, 0, 0, 0.3), 2px 3px 25px rgba(0, 0, 0, 0.3), 0 0 4px rgba(0, 0, 0, 0.8);
          box-shadow: 0 0 100px rgba(0, 0, 0, 0.3), 2px 3px 25px rgba(0, 0, 0, 0.3), 0 0 4px rgba(0, 0, 0, 0.8);
  padding: 25.64px 40px;
}

.popup img {
  display: block;
  margin: auto;
}

.popup img:not(:first-child) {
  margin-top: 20px;
}

.popup img:not(:last-child) {
  margin-bottom: 20px;
}

.popup .notch {
  width: 20px;
  height: 20px;
  border-color: #f2f2f2;
}

.PopupContent p:not(:last-child) {
  margin-bottom: 30px;
}