/* --------------------------------------------------------------------
               		TPD ID ISSUER
               	Media & Print queries
          		Le Studio Worldline, 2018
-------------------------------------------------------------------- */


@media screen and (min-width: 400px) {
  table.calendar {margin: 0 2rem 1rem 0;}
}

@media screen and (min-width: 560px) {
  div.portal nav a, div.portal nav a:visited {padding: 1.5em 0.5em;}
}


@media screen and (min-width: 600px) {
	ul.calendar-legend {
    justify-content: flex-end;
    text-align: right;
    margin-top: -1em;
  }
  div.actions-bar.plenty {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  div.actions-bar.plenty ul + ul {margin-top: 0;}
}

@media screen and (min-width: 800px) {
    p, li, dt, dd, h5 {font-size: 0.85em;}
    legend {font-size: 1.3em;}

  	.lost-password {font-size: 80%;}

    div.dashboard {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
    }
    div.main-data {
      flex: 0 0 100%;
      display: flex;
      margin-bottom: 4rem;
    }
    div.info-box {display: flex; flex-direction: column; padding: 1rem 2rem 2rem;}
    div.info-box p.stats {font-size: 1em;}
    div.info-box p.read-more {margin-top: auto;}
    div.dashboard section.lollipop {flex-basis: 60%;}
    div.dashboard .highlight {flex-basis: 31%;}
    .info-box {flex: 1}
    div.info-box p.stats::before {background-position: 0 7px;}
    div.main-data .info-box:nth-of-type(2) p.stats::before {background-position: 0 -487px;}
    div.main-data .info-box:nth-of-type(3) p.stats::before {background-position: 0 -303px;}

    #filter-tags {width: 30em;}
    div.actions-bar {margin-bottom: 2rem;}
    div.actions-bar p, div.actions-bar li {font-size: 0.7em;}

    fieldset + fieldset, form.data-form p + fieldset {margin-top: 2rem;}

    form.side-form p, form.side-form li {font-size: 0.8em;}
    form.side-form legend {font-size: 0.9em; padding-right: 1em;}
    form.side-form fieldset {border-top: 1px solid var(--n-medium);}
    form.side-form fieldset + fieldset {margin-top: 1rem;}
    form.side-form .buttons-bar {padding-top: 0; border: none;}

    section.registry ul {margin-bottom: 2rem;}
    section.registry li {font-size: 0.75em;}
    section.registry li + li {margin-top: 0.8em;}

    div.home-entries {
      display: flex;
      justify-content: center;
      text-align: center;
      margin: 2rem 5%;
    }
     div.home-entries section {
        display: flex;
        flex-direction: column;
        flex: 1;
        min-width: 150px;
        background-image: none;
        padding: 2vmax;
        margin: 0;
      }
      div.home-entries section:nth-child(2) {margin: 0 3%;}

      div.home-entries section h2 {min-height: 2.5em;}
      div.home-entries section p {position: static; width: auto; margin-bottom: 1rem;}
      div.home-entries ul.links-list {justify-content: center;}

     article.h-entry + article.h-entry {margin-top: 2rem;}
}

/* !! */
/* MAX-WIDTH QUERY */
@media screen and (max-width: 900px) {

  table.logs caption {
  	font: 1em var(--stack-m);
    text-transform: none;
    color: var(--body-text);
    background-color: var(--body-bg);
    padding: 0 0 1rem 0;
  }
  table.logs tr {
    position: relative;
    margin-bottom: 1rem;
  }

  table.logs tr:nth-child(odd) td {background-color: var(--body-bg);}

  table.logs th {display: none;}
  table.logs tr, table.logs td {display: block;}
  table.logs td {padding-left: 0; border: none;}

  table.logs tr td:first-child {
    color: var(--main-color);
    font-family: var(--stack-m);
    padding-bottom: 0;
  }
  table.logs tr td:nth-child(2) {
    font-size: 0.8em;
    padding-right: 45px;
    margin-bottom: 0.5em;
  }

  table.logs td[data-header] {
    border-bottom: 1px solid var(--n-medium);
  }
  table.logs td[data-header]::before {
    display: inline-block;
    content: attr(data-header);
    width: 10em;
    font-family: var(--stack-b);
  }

  table.logs [class*="icon-"] {
    position: absolute;
    top: 0;
    right: 0;
  }
}
/* !! */

@media screen and (min-width: 1000px) {
  body {position: relative;}
  body > header {padding: 1rem 3%;}
  #wrapper {padding: 3vw 3% 0;}

  div.opening + footer {text-align: center;}

  h1 {text-align: left; margin-left: 50px;}
  h2 {font: 2em var(--stack); margin-bottom: 2em;}
  h3 {font: 1.5em var(--stack);}
  h4 {font-size: 1em;}

  p.mandatory {margin-top: -2rem;}

  p.control {top: 1.5rem; left: calc(7px + 2rem);}
  div.controled {top: 4.3rem; padding: 2rem;}
  header div.k-tools {margin: 2% 3%;}
  div.portal header p.baseline {display: block;}

  #main-nav li {font-size: 0.8em;}
  #main-nav a {padding-left: 65px;}

  main {min-height: 500px;}

  form.data-form p + p, form.data-form div.conditional-entry + p {
    margin-top: 1.5em;
  }
  form.data-form .go-along p + p {margin-top: 0;}
  div.conditional-entry {margin-top: 1.5em;}

  form.search {
    position: absolute;
    width: 50%;
    top: 1.2rem;
    right: 3%;
    text-align: right;
    margin: 0;
    padding: 0;
    border: none;
  }

  ul.data-list {display: flex; flex-wrap: wrap;}
    ul.data-list li {
      box-sizing: border-box;
      flex-basis: 30%;
      min-width: 300px;
      font-size: 0.8em;
      padding: 1rem;
      margin: 0 2rem 2rem 0;
      border: 1px solid #CCC;
    }
    ul.data-list .action {top: 1rem; right: 1rem;}
    ul.data-list dl:not(.inverted) {padding-right: 60px;}

    ul.data-list.tabbed {display: block;}
      ul.data-list.tabbed li {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 0;
      }
      ul.data-list.tabbed li > * {flex: 1;}
      ul.data-list.tabbed .action {position: static; flex-basis: 50px; text-align: right;}
      ul.data-list.tabbed dl.inverted {
        display: flex;
        flex-wrap: nowrap;
        background-color: rgba(0,0,0,0);
        padding: 0;
        margin: 0;
      }
      ul.data-list.tabbed dl.inverted > * {flex: 1;}
      ul.data-list.tabbed dl.inverted div:first-child {flex: 1;}
      ul.data-list.orders.tabbed .icons {margin: 0;}
      ul.data-list.tabbed .quantity {display: inline-block; width: 6em;}

    form.filter {margin-bottom: 2rem;}

    .p-street-address {
    	padding-top: 0.5rem;
    	margin-top: 0.5rem;
    	border-top: 1px solid var(--n-medium);
    }

    #classif-tags {width: auto;}

    fieldset.choices.highlight {margin-bottom: 2rem;}

    .info-toast {
      position: absolute;
      top: -20px;
      right: 0;
      width: 25em;
      margin: 0;
      animation-delay: 2s;
      animation-duration: 10s;
      animation-name: slideInNOut;
      animation-fill-mode: both;
    }

    ul.add-list.tokens > li {
      display: flex;
      justify-content: space-between;
      align-content: center;
    }

    .chart-settings {order: 2; padding: 1rem 2rem;}

    .reporting {order: 1;}
        .reporting section {padding-right: 2%;}
    ul.x-values li {font-size: 0.65em;}
    ul.lollipops li::before {
      width: 30px;
      height: 30px;
      left: -5px;
    }

    #wrapper > footer {
      display: flex;
      justify-content: flex-end;
      align-items: baseline;
      background-color: var(--body-bg);
      padding: 2rem 0;
    }
    p.copyright {
    	color: var(--n-dark);
      background-color:var(--body-bg);
      padding: 0;
      margin: 0 0 0 2rem;
    }
    		footer ul.links-list a {
        	color: var(--n-dark);
          background-color:var(--body-bg);
    		}

  form.contact {padding: 1.5rem 2rem;}

  div.opening {display: flex; align-items: center; padding: 3%; margin-top: 10vh;}
  div.opening h1 img {max-width: 250px;}
  div.opening p.baseline {font-size: 1em; text-align: left;}

  div.new-account {padding: 1rem 2rem;}

  div.year-cal {justify-content: flex-start;}

  div.portal {background-image: none;}
    div.portal > header {
      height: 10rem;
      background: var(--main-color) url(../img/background.png) center no-repeat;
    }
    div.portal header p:not(.baseline) {display: block;}
    div.portal header h1 {position: static; padding: 3rem 3% 0; margin: 0;}
      div.portal header p.baseline {text-align: left; margin-left: 3%;}

    div.portal nav {
      position: sticky;
      width: 100%;
      top: 0;
      border-top: 1px solid var(--body-bg);
      z-index: 1000;
    }

    div.portal nav ul {width: 94%; justify-content: flex-start;}
    div.portal nav li {
      font-size: 0.8em;
      text-align: left;
      width: 30%;
    }
    div.portal nav a, div.portal nav a:visited {
      padding: 1em;
    }
    div.portal nav a:hover, div.portal nav a:focus {
      background-color: rgba(255,255,255,.2);
    }

  div.home-entries {
    max-width: 80%;
    margin: 8vh auto 10vh;
  }

    div.home-entries section {width: 30%; box-shadow: none;}

    div.home-entries section h2 {
      font-family: var(--stack-b);
      line-height: 1.2;
    }

    section.k-section:nth-of-type(1) {
      background: url(../img/europe.svg) calc(5% + 1rem) 11vh no-repeat;
      padding-left: calc(5% + 1rem + 250px);
    }
    section.k-section:nth-of-type(2) {
      background: #DCF9EC url(../img/tpd.svg) calc(5% + 1rem) 11vh no-repeat;
      padding-left: calc(5% + 1rem + 250px);
    }
    section.k-section:nth-of-type(3) {
      background: url(../img/wl-ok.svg) calc(5% + 1rem) 11vh no-repeat;
      padding-left: calc(5% + 1rem + 250px);
    }

  div.portal ul.tools {
    justify-content: flex-end;
		position: absolute;
		top: 4rem;
		right: 3%;
	}

  div.news {
    display: flex;
    justify-content: flex-end
  }
      div.news h2 {width: calc(5% + 180px); padding: calc(5% + 1rem) 0 0 0;}
      div.news article.h-entry {margin-top: calc(5% + 1rem);}
      article.h-entry + article.h-entry {margin-left: 3%;}
      article.h-entry {flex-basis: 35%; max-width: 30em; padding-right: 5%;}
      article.h-entry dl.event .p-name {
        font-size: 1.3em;
        margin-bottom: 0.8em;
      }
      article.h-entry dl.event .e-content {font-size: 1em;}

  div.faq {margin-left: 11rem;}
}

@media print {
  main {position: static;}
  h1 img {display: none;}
  h1::before {font-size: 12pt; content: "Id Issuer"; text-align: left;}
  p.control, form.search, div.controled, div.actions-bar, footer {display: none;}
  section.registry > :first-child {font-size: 18pt;}
  section.registry ul {
    padding: 0.5rem 0;
    border-top: 1px solid var(--n-medium);
    border-bottom: 1px solid var(--n-medium);
  }
    section.registry ul li + li {margin-top: 0.8rem;}
}