:root {
  --primary-border: #00357a;
  --primary: #2a6ebb;
  --secondary-border: #c8cdd0;
  --primary-color: #212121;
  /* fonts */
  --white: #ffffff;
  --background-color: #f7f7f8;
  --paper-color: white;

  --content-max-width: 1340px;
  --input-width: 260px;
  --margin: 10px;
  --padding: 10px;

  box-sizing: border-box;

  /* https://vrk-kpa.github.io/suomifi-ui-components/#/Foundations/Colors */

  --whiteBase: #fff;
  --blackBase: #212121;
  --blackLight1: #949494;

  --brandBase: #00357a;

  --depthDark1: #5f686d;
  --depthDark2: #6d787e;
  --depthDark3: #8c969b;
  --depthBase: #a5acb1;
  --depthLight3: #f7f7f8;
  --depthLight2: #ecedee;
  --depthLight1: #c8cdd0;

  --depthSecondaryDark1: #e5f0ff;
  --depthSecondary: #f0f6ff;

  --highlightDark1: #235a9a;
  --highlightBase: #2a6ebb;

  --highlightLight1: #2e78cc;
  --highlightLight2: #d5e4f6;
  --highlightLight3: #eaf2fa;
  --highlightLight4: #f7fafd;

  --accentBase: #e96a1c;
  --accentSecondary: #1a99c7;
  --accentSecondaryLight1: #f1fafd;
  --accentTertiaryDark1: #86499c;
  --accentTertiary: #9b5cb2;

  --successBase: #09a580;
  --successSecondary: #b0e8db;
  --warningBase: #faaf00;
  --alertBase: #c33932;
  --alertLight1: #fbefef;
  --successDark1: #078364;
  --warningLight1: #fff6e0;

  --mobile-width: 720px;
}

html {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* header with navigation */

header {
  display: flex;
  flex-direction: column;
  border-top: 4px solid var(--primary-border);
  border-bottom: 1px solid var(--secondary-border);
  box-sizing: border-box;
}

header .main {
  display: flex;
  flex-direction: row;
  padding: 0 15px;
  border-bottom: 1px solid var(--secondary-border);
  box-sizing: border-box;
}
header .content {
  width: var(--content-max-width);
  margin: 0 auto;
}
header .title {
  color: var(--brandBase);
}
header .button__menu {
  display: inline-block;
  position: absolute;
  left: auto;
  bottom: auto;
  right: var(--margin);
  top: var(--margin);
  width: auto;
}

#appMenu {
  display: none;
}
 
.icon {
  width: 24px;
  height: 24px;
  display: inline-block;
}
.icon__menu {
  background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg viewBox='0 0 24 24' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Ctitle%3EIcons/Basic icons/menu%3C/title%3E%3Cg id='Icons/Basic-icons/menu' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cpath d='M23,18 C23.552,18 24,18.448 24,19 C24,19.552 23.552,20 23,20 L1,20 C0.448,20 0,19.552 0,19 C0,18.448 0.448,18 1,18 L23,18 Z M23,11 C23.552,11 24,11.448 24,12 C24,12.552 23.552,13 23,13 L1,13 C0.448,13 0,12.552 0,12 C0,11.448 0.448,11 1,11 L23,11 Z M23,4 C23.552,4 24,4.448 24,5 C24,5.552 23.552,6 23,6 L1,6 C0.448,6 0,5.552 0,5 C0,4.448 0.448,4 1,4 L23,4 Z' id='Shape' fill='%23222222'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
}
.icon__close {
  background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg viewBox='0 0 24 24' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Ctitle%3EIcons/Basic icons/close %3C/title%3E%3Cg id='Icons/Basic-icons/close-' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cpath d='M4.75012083,3.300145 L12,10.55 L19.2498792,3.300145 C19.6500725,2.89995167 20.2996617,2.89995167 20.699855,3.300145 C21.1000483,3.70033833 21.1000483,4.3499275 20.699855,4.75012083 L13.45,12 L20.699855,19.2498792 C21.1000483,19.6500725 21.1000483,20.2996617 20.699855,20.699855 C20.2996617,21.1000483 19.6500725,21.1000483 19.2498792,20.699855 L12,13.45 L4.75012083,20.699855 C4.3499275,21.1000483 3.70033833,21.1000483 3.300145,20.699855 C2.89995167,20.2996617 2.89995167,19.6500725 3.300145,19.2498792 L10.55,12 L3.300145,4.75012083 C2.89995167,4.3499275 2.89995167,3.70033833 3.300145,3.300145 C3.70033833,2.89995167 4.3499275,2.89995167 4.75012083,3.300145 Z' id='Combined-Shape' fill='%23222222'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
}
header .icon__app {
  background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg viewBox='0 0 24 24' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Ctitle%3EIcons/Basic icons/application-profile%3C/title%3E%3Cg id='Icons/Basic-icons/application-profile' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cpath d='M8,15 C8,15.553 7.552,16 7,16 L1,16 C0.448,16 0,15.553 0,15 L0,9 C0,8.447 0.448,8 1,8 L7,8 C7.552,8 8,8.447 8,9 L8,11 L11,11 L11,8 L9,8 C8.448,8 8,7.553 8,7 L8,1 C8,0.447 8.448,0 9,0 L15,0 C15.552,0 16,0.447 16,1 L16,7 C16,7.553 15.552,8 15,8 L13,8 L13,11 L20,11 L20,11 C20.552,11 21,11.447 21,12 L21,16.001 L23,16.001 C23.552,16.001 24,16.448 24,17.001 L24,23 C24,23.553 23.552,24 23,24 L17,24 C16.448,24 16,23.553 16,23 L16,17.001 C16,16.448 16.448,16.001 17,16.001 L19,16.001 L19,13 L8,13 L8,15 Z M22,18.001 L18,18.001 L18,22 L22,22 L22,18.001 Z M6,10 L2,10 L2,14 L6,14 L6,10 Z M14,2 L10,2 L10,6 L14,6 L14,2 Z' id='Combined-Shape' fill='%23222222'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
}
header .icon__app_brandbase {
  background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg viewBox='0 0 24 24' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Ctitle%3EIcons/Basic icons/application-profile%3C/title%3E%3Cg id='Icons/Basic-icons/application-profile' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cpath d='M8,15 C8,15.553 7.552,16 7,16 L1,16 C0.448,16 0,15.553 0,15 L0,9 C0,8.447 0.448,8 1,8 L7,8 C7.552,8 8,8.447 8,9 L8,11 L11,11 L11,8 L9,8 C8.448,8 8,7.553 8,7 L8,1 C8,0.447 8.448,0 9,0 L15,0 C15.552,0 16,0.447 16,1 L16,7 C16,7.553 15.552,8 15,8 L13,8 L13,11 L20,11 L20,11 C20.552,11 21,11.447 21,12 L21,16.001 L23,16.001 C23.552,16.001 24,16.448 24,17.001 L24,23 C24,23.553 23.552,24 23,24 L17,24 C16.448,24 16,23.553 16,23 L16,17.001 C16,16.448 16.448,16.001 17,16.001 L19,16.001 L19,13 L8,13 L8,15 Z M22,18.001 L18,18.001 L18,22 L22,22 L22,18.001 Z M6,10 L2,10 L2,14 L6,14 L6,10 Z M14,2 L10,2 L10,6 L14,6 L14,2 Z' id='Combined-Shape' fill='%2300357a'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
}

nav {
  max-width: var(--content-max-width);
  margin: 0 auto;
}

nav>ul {
  list-style-type: none;
  display: flex;
  padding: 0;
  margin: 0;
  min-height: 43px;
}

nav>ul>li {
  margin: 0 30px 0 10px;
  padding: 6px 0;
  display: block;
  box-sizing: border-box;
  min-height: 43px;
}

nav>ul>li>a,
nav>ul>li>a:active,
nav>ul>li>a:visited,
nav>ul>li>a:hover {
  text-decoration: none;
  font-family: 'Source Sans Pro,Helvetica Neue', Arial, sans-serif;
  font-size: 18px;
  line-height: 1.5;
  font-weight: 400;
  padding: 8px;
  color: var(--font-color);
  text-decoration: none;
}

nav>ul>li.active,
nav>ul>li:hover {
  border-bottom: var(--primary) solid 4px;
}

.outside-link {
  width: 14px;
  height: 14px;

  display: inline-block;
  vertical-align: super;
  margin: -14px 0 0 0;
}

.outside-link::before {
  /* icon from https://github.com/vrk-kpa/suomifi-icons/blob/master/assets/baseIcons/icon-link-external.svg */

  content: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg viewBox='0 0 24 24' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Ctitle%3EIcons/Basic icons/link-external%3C/title%3E%3Cg id='Icons/Basic-icons/link-external' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cpath d='M12,4 C12.552,4 13,4.448 13,5 C13,5.552 12.552,6 12,6 L2,6 L2,22 L18,22 L18,12 C18,11.448 18.448,11 19,11 C19.552,11 20,11.448 20,12 L20,22 C20,23.103 19.103,24 18,24 L2,24 C0.897,24 0,23.103 0,22 L0,6 C0,4.897 0.897,4 2,4 L12,4 Z M23,0 C23.552,0 24,0.448 24,1 L24,7.657 C24,8.209 23.552,8.657 23,8.657 C22.448,8.657 22,8.209 22,7.657 L21.999,3.415 L12.207,13.207 C12.012,13.402 11.756,13.5 11.5,13.5 C11.244,13.5 10.988,13.402 10.793,13.207 C10.402,12.817 10.402,12.183 10.793,11.793 L20.586,2 L16.343,2 C15.791,2 15.343,1.552 15.343,1 C15.343,0.448 15.791,0 16.343,0 L23,0 Z' id='Combined-Shape' fill='%2300357a'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
}

@media only screen and (max-width: 720px) {

  #appMenu {
      display: inline-block;
      position: absolute;
      left: auto;
      bottom: auto;
      right: var(--margin);
      top: var(--margin);
      width: auto;
  }   

  nav {
      display: none;
      background-color: var(--whiteBase);
      border: 1px solid var(--depthLight1);
  }
  
  nav.visible {
      position: absolute;
      
      right: var(--margin);
      top: 70px;
      width: auto;
      height: auto;
      display: inline-block;
  }
  nav>ul {
    flex-direction: column;
    padding: 0;
  }
  nav>ul>li {
    margin: 0;
    padding: var(--margin);
  }
  nav>ul>li.active,
  nav>ul>li:hover {
    background-color: #f0f6ff;
    color: var(--highlightBase);
    border: none;
  }
}


/* Main content */
main {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  flex: 1 1;
  flex-direction: row;
  background-color: var(--background-color);
  padding: 10px;
}

main>article {
  flex-direction: column;
  max-width: var(--content-max-width);
  margin: var(--margin) auto;
  display: flex;
  border: 1px solid var(--secondary-border);
  background-color: var(--paper-color);
  box-sizing: border-box;
  padding: var(--margin);
}

article {
  flex: 1 1;
  display: flex;
}


aside {
  flex: 1 1;
  flex-direction: column;
  display: flex;
  max-width: 300px;
}

.search-box {
  box-sizing: border-box;
  position:-webkit-sticky; 
  position:sticky; top: 0px; 
 
  max-height: 70vh;
}
.search-box button {
  margin-bottom: 10px;
}
.search-box input, .search-box select {
  display: block;
  margin-bottom: 10px;
  width: 100%;
  box-sizing: border-box;
}

.step {
  margin-bottom: var(--margin);
}

.card {
  border: 1px solid var(--secondary-border);
  background-color: var(--paper-color);
  margin: var(--margin);
  padding: var(--padding);
}

/* aside {
    width: 300px;
    flex: 1;
} */
ol>li {
  padding: 10px;
}

/*
ol {
    list-style-position:inside;
}
ol>li {
    padding: 10px;
}
ol>li.active::marker {
    font-weight: bold;
}
ol>li.active {
    outline: 1px solid var(--primary-border);
    
}*/

/* Footer content */
footer {
  height: 90px;
}

footer>.links {
  text-align: center;
}

footer>.content {
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  margin: 0 auto;
  max-width: var(--content-max-width);
  padding: 10px;
}

footer .logo img {
  max-height: 90px;
}

@media (max-width: 720px) {
  footer .logo img {
    max-height: 50px;
  }
}

@media (max-width: 360px) {
  footer .logo img {
    max-height: 40px;
  }
}

article {
  display: flex;
  flex-direction: column;
}

/* Suomi.fi button */
button {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  letter-spacing: 0px;
  text-decoration: none;
  -webkit-font-smoothing: antialiased;
  font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  padding: 10px 20px;
  min-height: 40px;
  text-align: center;
  cursor: pointer;
  border-radius: 2px;

  color: rgb(255, 255, 255);
  background: linear-gradient(0deg, var(--highlightDark1) 0%, var(--highlightBase) 100%);
  text-shadow: rgba(var(--brandBase), 0.5) 0px 1px 1px;
  border: 1px solid transparent;
}
.button--mini {
  min-height: 30px;
  min-width: 30px;
  padding: 5px 10px;
}
button:hover 
{
  background: linear-gradient(0deg, var(--highlightBase) 0%, var(--highlightLight1) 100%);
  outline: transparent solid 2px;
}
a[download] {
  text-decoration: none !important;
}

button:disabled {
  background: linear-gradient(0deg, rgb(165, 172, 177) 0%, rgb(200, 205, 208) 100%);
  user-select: none;
  cursor: not-allowed;
  text-shadow: rgba(33, 33, 33, 0.5) 0px 1px 1px;
}

button:focus {
  outline: var(--accentSecondary) solid 2px;
  outline-offset: 2px;
}

button.flat {
  background: none;
  background-color: transparent;
  border: none;
}

/* Suomi.fi input & label & text area */
label {
  margin-bottom: 10px;
}

textarea,
select,
select>option,
input {
  padding: 8px 10px;
  border: 1px solid rgb(140, 150, 155);
  border-radius: 2px;
  /*margin-bottom: 10px;*/
}

select:disabled,
select>option:disabled,
textarea:disabled,
input:disabled {
  user-select: none;
  cursor: not-allowed;
  background-color: rgb(247, 247, 248);
}

select,
select>option,
input {
  max-width: var(--input-width);
}

input:focus {
  outline: rgb(26, 153, 199) solid 2px;
  outline-offset: 2px;
}

table {
  border: 1px solid var(--depthLight1);
  border-spacing: 0px;

}

th {
  background-color: var(--accentSecondaryLight1);
}
th, td {
  padding: 10px;
}
td {
  border-top: 1px solid var(--depthLight1);
}

.mobile-left, .mobile-right {
  display: none;
  padding: 10px 0;
}
th.coicop, td.coicop {
  padding: 10px 5px;
}
tr.attribute td {
  border-top-style: dashed;
}
tr.attribute:first-child {
  padding-left: 30px;
}
tr.attribute td:first-child {
  padding-left: 30px;
}
#conversion-table select {
  width: 180px;
}



@media only screen and (max-width: 1200px) {
  .mobile-left, .mobile-right {
    display: table-cell;
  }
  th.coicop,
  td.coicop { display: none; }
  th.coicop.active,
  td.coicop.active { display: table-cell; }

  button {
    padding: 5px 10px;
    min-height: 30px;
    min-width: 30px;
  }
  
}