/**
 * This stylesheet has 5 sections:
 *
 * 1.Neutral Colors - Where are defined the neutral colors
 * This colors could be or not in the project palette
 * Usually this colors are shades of white, gray and black but it could also be
 * shades of beige for example
 *
 * 2.Theme Colors - Where are defined the project palette
 *
 * 3.Other Colors - Where are defined other colors you need.
 * - Project-specific & general colors  -
 *
 * 4.Social Networks Colors - Where are defined the colors of social networks
 *
 * 5.Functions - Where are defined other color functions
 *   - Adaptative Color:
 *     Given a certain color, returns black* or white*, depending on the
 * contrast. You can also define the dark and light color that it should return.
 *     eg.:
 *       adaptative-color( theme-color() ) // returns black or white
 *
 *       adaptative-color( theme-color(), neutral-color($key: "600"), neutral-color($key: "200") ) // returns #4F4F4F or #ECECEC
 *
 *   - Color Shade:
 *     Given a certain color and percentage, returns a shade of the color based
 * on the percentage provided and the light and dark color.
 *     Positive percentages mix the color with the light one, while negative
 * percentages mix it with the dark.
 *
 *
 * HOW TO USE:
 * 1. Add a color to a section:
 *    - Choose a section and a name to the color, then add it to the map.merge
 * of the chosen section. Don't forget to add a comma on the end of the
 * previous line.
 *    eg.: $theme-colors: map.merge(
 *           (
 *             ... ,
 *             "name of the color": #COLORHEX / colorname
 *           ),
 *           $theme-colors
 *         );
 *
 * 2. Call the right color
 *    - function-name()
 *      to use the default color of the section
 *    eg.: theme-color() // = theme-color("blue") = #007bff
 *
 *    - function-name("color name")
 *      to use a specific color of the section
 *    eg.: theme-color("secondary") // = #828282
 *
 * 3. Request a Theme Color Shade
 *    You can call for shades of theme color
 *
 *    - Lighter shade (positive percentage)
 *    eg.: theme-color-shade("primary", 30%)
 *
 *    - Darker shade (negative percentage)
 *    eg.: theme-color-shade("primary", -30%)
 *
 *
 * TIP:
 * If it gets easier, you can use comments next to the colors as notes so you
 * can check more easily where you are using this color on the website.
 *
 * eg.: "white": white, //background -- sidebar, container...
 *
 */
/* NEUTRAL COLORS */
/* THEME COLORS */
/* OTHER COLORS */
/* SOCIAL NETWORKS COLORS */
/* FUNCTIONS */
/* Adaptative Color */
/* Color Shade */
body.mail-body {
  background-color: #FBFAF7;
  color: #2F3A3A;
  font-family: "Montserrat", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  margin: 0;
  padding: 0;
  width: 100%;
}

.mail-wrapper {
  background-color: #FBFAF7;
  padding: 32px 16px;
  width: 100%;
}

.mail-container {
  background-color: white;
  border: 1px solid #F7F3EC;
  border-radius: 6px;
  margin: 0 auto;
  max-width: 600px;
  overflow: hidden;
}

.mail-header {
  background-color: #6FAF8F;
  color: white;
  padding: 24px;
  text-align: center;
}

.mail-header__title {
  color: white;
  font-size: 20px;
  font-weight: 600;
  margin: 0;
}

.mail-content {
  padding: 24px;
}

.mail-content__greeting {
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 16px;
}

.mail-content__paragraph {
  color: #2F3A3A;
  font-size: 16px;
  line-height: 1.6;
  margin: 0 0 16px;
}

.mail-content__paragraph--muted {
  color: #8C8E88;
  font-size: 14px;
}

.mail-action {
  margin: 24px 0;
  text-align: center;
}

.mail-button {
  background-color: #6FAF8F;
  border-radius: 4px;
  color: white;
  display: inline-block;
  font-size: 16px;
  font-weight: 600;
  padding: 12px 24px;
  text-decoration: none;
}

.mail-button:hover {
  background-color: rgb(83.9285714286, 151.0714285714, 117.5);
}

.mail-link {
  color: #6FAF8F;
  font-weight: 600;
  text-decoration: underline;
}

.mail-footer {
  background-color: #FBFAF7;
  border-top: 1px solid #F7F3EC;
  color: #8C8E88;
  font-size: 12px;
  padding: 16px 24px;
  text-align: center;
}