/* ===GETTING COLORS FROM PALETTE=== */
/**
 * The function palette is used by the following functions
 * text-color(), border-color() and bg-color()
 */
/* ===BACKGROUND COLOR FUNCTION=== */
/* ===TEXT COLOR FUNCTION=== */
/* ===BORDER COLOR FUNCTION=== */
/* ===GETTING BUTTONS STYLE FROM MAP=== */
/* ===GETTING BREAKPOINT VALUE FROM MAP=== */
/* ===GETTING VALUE FROM GENERIC MAP=== */
/* ===GET FONT FAMILY NAME FROM NESTED MAP=== */
/* ===REM FUNCTION=== */
/**
 * Sassy functions to get the rem equivalent of a px value
 * preset-css-env will take care of fallback for older browsers
 * !NOTE: you only need to change the $rem-baseline value if your base size 
 * is different from 10px (use _var_typography.scss in case)
 * @param value is referred to px
 * Credits: Rowan Manning
 */
/**
 * Given an image name this mixin returns a path
 * for the relative image.
 *
 * @param $image the name of the image to link.
 */
/* ===WEB FONTS MANAGEMENT=== */
/**
* Use this mixin to easely generate a @font-face rule.
* It uses the font-path property provided by postcss rucksack
* to generate bulletproof src sets in @font-face
*/
/**
 * @param $fonts-map
 * Generating @font-face rule from the given $fonts map
 * You can just update the font map to add a new font-face rule
 */
/**
 * Sets the font for this weight.
 * @param $family the font family to set.
 * @param $weight one of 'bolder', 'heavy', 'bold', 'semibold', 'normal' (default),
 * 'light', 'lighter' or 'thin'
 */
/**
 * Sets the secondary fonts for this weight.
 * @param $weight one of "light", "normal" (default), "bold" or "bolder" (if provided by font).
 * Take care not to use this mixin to apply the primary font,
 * whenever it is already declared for the body element and inherited from it.
 */
/**
 * Applies the font smoothing
 * Used for better cross browser support
 * Ref: https://maximilianhoffmann.com/posts/better-font-rendering-on-osx
 */
/**
 * Absolute  positioning an element
 */
/** Triangle helper mixin
 * @param {Direction} $direction - Triangle direction, either `top`, `right`, `bottom` or `left`
 * @param {Color} $color [currentcolor] - Triangle color
 * @param {Length} $size [1em] - Triangle size
*/
/** grid column no bootstrap
 * @param $col_size - the number of column the element should take from 1 to 12
*/
/* mixin for multiline */
/**
 * Ref: https://www.smashingmagazine.com/2014/06/sassy-z-index-management-for-complex-layouts/
 * In order to maintain the stacking order of the elements,
 * we can set up a Sass list which represents the order in which we want our elements to appear,
 * from lowest to highest, like shown below.
 * (Note that if we want to add an element to the existing stacking order,
 * we just have to update the list with our new element)
 * In order to retrieve the z-index value to assign to each element,
 * you can use the index() sass function, for i.e. .modal {z-index: index($elements, modal)}
 */
.cot-box {
  flex-direction: column;
  align-items: flex-start; }
  .cot-box h3 {
    margin-bottom: 8px; }
  .cot-box .cot-box-buttons {
    position: absolute;
    right: 8px;
    top: 8px;
    display: flex; }
    .cot-box .cot-box-buttons button {
      margin-right: 8px; }
  .cot-box .cot-box-input {
    width: 100%; }
  .cot-box input, .cot-box select {
    width: 100%;
    margin-top: 1rem; }

.date-picker {
  z-index: 5;
  opacity: 0;
  position: fixed;
  background: #fff;
  width: 80%;
  top: 50%;
  left: 50%;
  transform: scaleY(0) translate(-50%, 1000px);
  box-shadow: 0 3px 6px #00000029;
  padding-top:  3.5rem;
  padding-bottom:  2rem; }
  .date-picker.shown {
    animation: scaleUp 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards; }
  .date-picker.out {
    animation: scaleDown 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards; }

@keyframes scaleUp {
  0% {
    transform: scaleY(0.8) translate(-50%, 1000px);
    opacity: 0; }
  100% {
    transform: scaleY(1) translate(-50%, -50%);
    opacity: 1; } }

@keyframes scaleDown {
  0% {
    transform: scaleY(1) translate(-50%, -50%);
    opacity: 1; }
  100% {
    transform: scaleY(0.8) translate(-50%, 1000px);
    opacity: 0; } }
  .date-picker .title {
    text-align: center;
    font-family: "Le Jeune Deck Web", Arial, "Book Antiqua", Palatino, serif;
    font-size:  1.875rem;
    line-height: 1.2;
    padding: 0  1rem  1rem; }
  .date-picker .vc-container {
    margin: 0 auto; }

/*# sourceMappingURL=lg-max.css.map*/