/* le transform scale() marche pas sur chrome
@media screen and (max-width: 643px) { 
     body{
      transform: scale(calc(100vw / 627)); 
      transform-origin: top left; 
      width: 628px; 
  }
}*/
@media screen and (max-width: 628px) { 
  body{
   zoom: 0.9;
 }
}


/**
 * Normalize
 */
 html {
    box-sizing: border-box;    
  }
  *, *:before, *:after {
    box-sizing: inherit;
  }
  body {
    font-family: Helvetica, Ariel, sans-serif;
    margin: 8px; /* for page padding on mobile */
  }
  
  /**
   * Common Page Styles
   */
  .title-box {
    padding-top: 1rem;
    text-align: center;
  }
  .lifeInWeekTitle,   
  .unitbox-label {
    display: inline;
    font-weight:600;
  }
  .advancedOptionNotVisible,
  .advancedOptionVisible {
    font-size:0.8em;
  }
  .noPaddingLeft {
    padding-left:0;
  }
  
  .unitbox {
    display: inline;
    font-family: "Raleway", "Open Sans", Arial, Helvetica, sans-serif;
    font-weight:600;
    color: #2b2b2b;
    line-height: 1.3;
    padding: 0 0.75em 0 0;
    margin: 0;
    
    font-size: 40px;    
    border-radius: 0;
    border-left: none;
    border-top: none;
    border-right: none;
    border-bottom: 1px solid #2b2b2b;
  
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    background-color: #fff;
    width: initial;
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%232b2b2b%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');
      background-repeat: no-repeat, repeat;
      /* arrow icon position (1em from the right, 50% vertical) , then gradient position*/
      background-position: right 0em top 50%, 0 0;
      /* icon size, then gradient */
    background-size: .45em auto, 100%;
  }
  /* Hide arrow icon in IE browsers */
  .unitbox::-ms-expand {
      display: none;
  }
  .unitbox option {
    font-weight: normal;
    font-size: 1em;
  }
  
  
  .dob {
    text-align: center;
  }
  .instruction {
    font-size: 0.9em;
    margin-bottom: 0.3rem;
  }
  .form-container .month {
    padding: 1.25px;
  }
  .form-container  .day {
    width: 2em;
  }
  .form-container  .year {
    width: 3em;
  }
  .form-container input:required:invalid.touched {
    border: 2px solid red;
  }
  .form-config {
    position: relative;
    margin: 0 auto 0 auto;
    padding: 0;
    list-style-type: none;
  }
  .form-config.weeks,
  .chart-sum-ump.weeks {
    width: 624px;
  }


  .chart-sum-ump {
    position: relative;
    margin: 4rem auto 2rem auto;
    padding: 0;
    list-style-type: none;
  }
   

  .chart {
    position: relative;
    margin: 0 auto 2rem auto;
    padding: 0;
    list-style-type: none;
  }
  .line-explanation {
    text-align: center;
    padding-bottom:5px;
    font-style:italic;
  }
  .x-axis {
    position: absolute;
    top: -2.75em;
    height: 2.75em;
    width: 100%;
  }
  .x-axis .markers,
  .y-axis .markers {
    font-size: 0.8rem;
    color: black;
  }
  .credits {
    font-size: 1.3rem;
    text-align: center;
    color: #aaaaaa;
    padding-bottom: 30px;
  }
  .credits a:link,
  .credits a:hover,
  .credits a:visited {
    color: #aaaaaa;
    text-decoration: underline;
  }
  #advancedOption a{
    text-decoration: underline;
  }

  #chart-sum-ump ul{
    list-style:disc;
  }
  #chart-sum-ump li{
    margin-left:25px;
  }
  #chart-sum-ump li {
    font-size:1.5rem;
  }
  #chart-sum-ump li span {
    font-weight:600;
  }
  
  .starExplanation {
    font-size:0.9em;
    font-style:italic;
  }
  
  select.country,
  select.gender {
    min-width:198px;
  }
  input.lifeExpectancy,
  input.healthyLifeExpectancy {
    max-width:53px;
    min-width:53px;
    text-align:right;
  }

  /**
  * Page Specific styles
  */
  /* INDEX */
  .index {
    text-align: center;
    margin: 25vh auto 0;
    padding: 0;
  }
  .index li {
    font-size: 2.5em;
  }
  
  /* YEARS */
  .years {
    width: 380px; /* 38px per year * 10years = 380px */
  }
  .years > li {
    border: 1px solid black;
    width: 22px; /* 22px/380px */
    /*  For border-box sizing, width includes borders. Thus a         //
    //  22px width is a like a padding of 20px with two 1px borders.  */
    padding-bottom: 20px; /* 20px/380px */
    margin: 8px; /* 8px/380px */
    float: left;
    transform: rotate(45deg);
  }
  
  /* MONTHS */
  .months,
  .freeTime {
    width: 504px; /* 14px per month * 36 months = 504px */
  }
  .months > li,
  .chart.freeTime > li {
    border: 1px solid black;
    width: 12px; /* 12px/504px */
    padding-bottom: 10px; /* 10px/504px */
    margin: 1px; /* 1px/504px */
    border-radius: 50%;
    float: left;
  }

  .chart.freeTime > li {
    border: 1px solid #000080;
  }
  
  /* WEEKS */
  .weeks {
    width: 624px; /* 12px per week * 52weeks = 624px */
  }
  .weeks > li {
    border: 1px solid black;        
    width:8px;
    height:8px;
    padding-bottom: 6px;
    margin:2px;
    float: left;
  }
  .weeks--x-label {
    color: #000080;
    font-size: 1.25rem;    
  }
  .weeks--y-label {
    color: #000080;
    transform: rotate(-90deg);
    font-size: 1.25rem;
    position: absolute;
    left: -118px;
    top: 78px;
  }
  .weeks--x-arrow {
    padding-left: 10px;
    vertical-align: bottom;
    display:inline;
    width:initial;
  }
  @media (max-width: 350px) {
    .weeks--x-arrow {
      display: none;
    }
  }
  .weeks--y-arrow {
    padding-right: 10px;
    vertical-align: bottom;
    display:inline;
    width:initial;
  }
  .weeks--x-markers span {
    position: absolute;
    bottom: 0;
  }
  /* The year is divided into 52 weeks, so the % marker location //
  // can be found at (1/52)n (where n is the week number). We    //
  // must offset by 1 because we start counting at 1, so the     //
  // final equation is (n/52)-(1/52)                             */
  .weeks--x-markers span:nth-of-type(1) { left: 0;             }
  .weeks--x-markers span:nth-of-type(2) { left: 51px; }
  .weeks--x-markers span:nth-of-type(3) { left: 109px; }
  .weeks--x-markers span:nth-of-type(4) { left: 169px; }
  .weeks--x-markers span:nth-of-type(5) { left: 229px; }
  .weeks--x-markers span:nth-of-type(6) { left: 289px; }
  .weeks--x-markers span:nth-of-type(7) { left: 349px; }
  .weeks--x-markers span:nth-of-type(8) { left: 409px; }
  .weeks--x-markers span:nth-of-type(9) { left: 469px;           }
  .weeks--x-markers span:nth-of-type(10) { left: 529px; }
  .weeks--x-markers span:nth-of-type(11) { left: 589px; }
  
  .weeks--y-markers span {
    position: absolute;
    left: -1.75em;
  }
  
  .weeks--y-markers span:nth-of-type(1) { top: 0; } /* (n/90) */
  .weeks--y-markers span:nth-of-type(2) { top: 49px }           /* 5*/
  .weeks--y-markers span:nth-of-type(3) { top: 108px; }         /* 10*/
  .weeks--y-markers span:nth-of-type(4) { top: 168px; }         /* 15*/
  .weeks--y-markers span:nth-of-type(5) { top: 229px; }         /* 20*/
  .weeks--y-markers span:nth-of-type(6) { top: 289px; }         /* 25*/
  .weeks--y-markers span:nth-of-type(7) { top: 348px; }         /* 30*/
  .weeks--y-markers span:nth-of-type(8) { top: 408px; }         /* 35*/
  .weeks--y-markers span:nth-of-type(9) { top: 468px; }         /* 40*/
  .weeks--y-markers span:nth-of-type(10) { top: 528px; }        /* 45*/
  .weeks--y-markers span:nth-of-type(11) { top: 588px; }        /* 50*/
  .weeks--y-markers span:nth-of-type(12) { top: 648px; }        /* 55*/
  .weeks--y-markers span:nth-of-type(13) { top: 708px; }        /* 60*/
  .weeks--y-markers span:nth-of-type(14) { top: 768px; }        /* 65*/
  .weeks--y-markers span:nth-of-type(15) { top: 828px; }        /* 70*/
  .weeks--y-markers span:nth-of-type(16) { top: 888px; }        /* 75*/
  .weeks--y-markers span:nth-of-type(17) { top: 948px; }        /* 80*/
  .weeks--y-markers span:nth-of-type(18) { top: 1008px; }       /* 85*/

  .weeks--y-markers span:nth-of-type(19) { top: 1068px; }       /* 90*/
  .weeks--y-markers span:nth-of-type(20) { top: 1128px; }       /* 95*/
  .weeks--y-markers span:nth-of-type(21) { top: 1188px; }       /* 100*/
  .weeks--y-markers span:nth-of-type(22) { top: 1248px; }       /* 105*/
  .weeks--y-markers span:nth-of-type(23) { top: 1308px; }       /* 110*/
  .weeks--y-markers span:nth-of-type(24) { top: 1368px; }       /* 115*/
  .weeks--y-markers span:nth-of-type(25) { top: 1428px; }       /* 120*/
  .weeks--y-markers span:nth-of-type(26) { top: 1488px; }       /* 125*/
  .weeks--y-markers span:nth-of-type(27) { top: 1548px; }       /* 130*/
  .weeks--y-markers span:nth-of-type(28) { top: 1608px; }       /* 135*/
  .weeks--y-markers span:nth-of-type(29) { top: 1668px; }       /* 140*/
  .weeks--y-markers span:nth-of-type(30) { top: 1728px; }       /* 145*/
  .weeks--y-markers span:nth-of-type(31) { top: 1788px; }       /* 150*/



  #leMarkerVal {
    bottom: -1em;
    left: 100%;
    font-size: 2.5em;
    font-weight: bold;
    color: #2b2b2b;
  }
  
  /**
   * Utilities
   */
  .group:after {
    /* "group" is another name for clearfix */
    content: "";
    display: table;
    clear: both;
  }
  
  /* see http://snook.ca/archives/html_and_css/hiding-content-for-accessibility */
  .visuallyhidden {
    position: absolute;
    overflow: hidden;
    clip: rect(0 0 0 0);
    height: 1px; width: 1px;
    margin: -1px; padding: 0; border: 0;
  }
  
  /**
   * Print Styles
   */
  @page {
    size: Letter portrait;
  }
  
  .chart li.hidden,
  .chart span.hidden {
    display:none;
  }
  
  @media print {
    .credits p,
    .chart li {
      /* Force backgrounds to show (like the red shapes). This overrides the print
        dialog option "Print backgrounds," which often defaults to disabled). We
        target the affected elements directly because inheritance wasn't sufficient
        in Firefox. */
      -webkit-print-color-adjust: exact !important;
      color-adjust: exact !important;
    }
  
    .unitbox {
      border-bottom: none;
      padding: 0;
      background-image: none;
    }
  
    .month {
      appearance: none;
      width: 96px !important;
      font-size: 18px !important;
    }
    .day {
      font-size: 18px;
    }
    .year {
      font-size: 18px !important;
    }
  
    .print-hide {
      display: none;
    }
  }


  .form-config input,
  .form-config select {
    padding: 0 !important;
    margin: 0 !important;
    display:inherit;
    -webkit-appearance: auto !important;
    float: inherit;    
    width: initial !important;
    border: 1px solid #d8d8d8 !important;
    background: #f8f8f7 !important;
  }
  .form-config select {
    margin-left:5px !important;
  }

  input.dailyDigitalScreenTimeInHours{
    width:50px !important;
    text-align:right;
  }
  .legendFreeTimeChart {
    text-align:left;
    margin-bottom:5px;
  }

  .legendFreeTimeChart .legendCase {
    border: 1px solid #000080;
    width: 12px; /* 12px/504px */
    padding-bottom: 10px; /* 10px/504px */    
    border-radius: 50%;
    float: left;
    margin-top: 7px;
    margin-right:3px;
  }
  .legendFreeTimeChart .sleepCase {
    background-color:#AD9BD4;
  }
  .legendFreeTimeChart .eatCase {
    background-color: #FF335A;
  }
  .legendFreeTimeChart .shoppingCase{
    background-color: #9AD69A;
  }
  .legendFreeTimeChart .commutingCase{
    background-color: #FF9856;
  }
  .legendFreeTimeChart .hygieneCase{
    background-color: #009CF0;
  }
  .legendFreeTimeChart .choresCase{
    background-color: #FFDD87;
  }
  .legendFreeTimeChart .workCase{
    background-color: #100dc1;
  }
  .legendFreeTimeChart .screenCase{
    background-color: #EE13F2;
  }
.hardFatalityText {
    color:red;
}
.weeklyHoursAdditionalExplanation {
  font-style: italic;
  font-size:1.2rem;
  text-align: justify;
  line-height:initial;
}