@import './components/theme1.min.css';

/* open-sans-regular - latin
   https://google-webfonts-helper.herokuapp.com/fonts/open-sans?subsets=latin
 */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/open-sans-v34-latin-regular.woff2') format('woff2');
}

@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 400;
  src: url('fonts/open-sans-v34-latin-italic.woff2') format('woff2');
}

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  src: url('fonts/open-sans-v34-latin-600.woff2') format('woff2');
}

@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 600;
  src: url('fonts/open-sans-v34-latin-600italic.woff2') format('woff2');
}

:root {
  --font-default: 1.4rem;
  --font-small: 85%;
  --grey0: #f9f9f9;
  --grey-bg: #eeeeee;
  --grey1: #dddddd;
  --grey2: #cccccc;
  --grey3: #aaaaaa;
  --grey4: #666666;
  --grey5: #333333;
  --yellow: #fff166;
  --orange1: #ffeebd;
  --orange2: #ffcc66;
  --braun1: #d99116;
  --red1: #b31e00;
  --red-accent: #fc3d0c;
  --purple1: #bf8cdf;
  --green1: #ecf3f3;
  --green2: #9dbcbc;
  --green3: #afd095;
  --green-accent: #46c022;
  --greenWsl: #006268;
  --blue1: #5aa4ea;
  --blue2: #729fcf;
  --blue3: #3465a4;
}

html {
  font-size: 62.5%;

  @media screen and (min-width: 768px), print {
    font-size: 65%;
  }

  @media screen and (min-width: 1024px), print {
    font-size: 70%;
  }

  @media screen and (min-width: 2540px), print {
    font-size: 75%;
  }
}

body {
  font-family: 'Open Sans'; /* fallback is defined in normalize */
  font-weight: 400;
  font-size: var(--font-default);
  line-height: 1.5;
}

::selection {
  background-color: var(--greenWsl);
  color: white;
}

h1, h2, h3 {
  color: var(--greenWsl);
}

h1 {
  font-weight: 600;
}

ul {
  list-style: none;
}

main,
footer {

  a {
    color: var(--red1);
    text-decoration-thickness: from-font; /* https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-thickness */
    /* text-decoration-thickness: .06em; */

    &:hover {
      text-decoration: none;
    }
  }
}

img {
  display: block;
}

main img {
  max-width: 100%;
  height: auto;
}

/* typography */
h1, h2, h3, p {
  margin: 0;
}

h1 {
  font-size: 2.2rem;
  line-height: 1.25;
}

h2 {
  font-size: 1.8rem;
  line-height: 1.25;
}

h3 {
  font-size: var(--font-default);
  line-height: 1.25;
}

td {
  vertical-align: top;
}

article {

  & > h1 {
    margin-top: 1.2rem;
  }

  ul {
    list-style: disc;
    padding-left: 1.5rem;

    &.nobullets {
      list-style-type: none;
    }
  }

  h2 + ul {
    padding-top: 0;
    margin-top: 0;
  }

  h1 {
    margin-bottom: 2rem;
  }

  h2 {
    margin: 3rem 0 .5rem 0;
  }

  h1 + h2 {
    margin-top: 3rem;
  }

  h3 {
    margin: 2rem 0 .1rem 0;
  }

  li {
    margin-bottom: 0.5rem;
  }
}

p,
article ul,
article ol,
blockquote,
pre {
  margin-bottom: 1rem;
}

.hidden {
  display: none;
}

.icon {
  width: var(--font-default);
  height: var(--font-default);
}

.icon_checkbox {
  --box: var(--grey4);
  --box-fill: var(--grey1);
  --check: none;
  filter: drop-shadow(1px 1px 1px var(--grey2));
}

.icon_checkbox_checked {
  --check: var(--green-accent);
}

.icon_excel {
  --page-fill: var(--greenWsl);
  --table-fill: white;
  --x: white;
  --cells: var(--greenWsl);
}

.icon_shield {
  border-radius: 50%;
  background: var(--blue2) radial-gradient(circle at 0% 0%, white 0%, var(--blue3));
  color: white;
  border: 1px solid var(--blue3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}

.icon_jsonstat {
  border-radius: 50%;
  padding-bottom: 0.25rem;
  background: black radial-gradient(circle at 0% 0%, white 0%, black);
  color: white;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}

.icon_info {
  font-family: Georgia, Times, serif;
  font-weight: bold;
  font-style: italic;
  color: var(--blue2);
  cursor: pointer;
  text-shadow: 1px 1px 1px var(--grey2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.icon_square {
  width: 1ch;
  height: 1ch;
  display: inline-block;
  background-color: #80b92a;
  vertical-align: middle;
}

.icon_square_left {
  margin: 0 0.5ch 0.25ch 0;
}

button {
  cursor: pointer;

  &.icon {
    display: flex;
    align-items: center;
    cursor: pointer;
    padding: 0.2rem;
    background: none;
    border: none;
  }

  &.menu-nav {

    & span:hover + svg,
    & svg:hover {
      color: var(--blue1);
      fill: var(--blue1);
    }

    & svg {
      margin-left: 0.3rem;
      fill: var(--grey4);
    }
  }

  &[type=submit].login.icon {
    padding: 0;
    background: none;
    border: none;
  }
}

.login-link {
  display: flex;
  align-items: center;
  position: relative;
  top: .2rem;
}

button.login,
.login-link {

  svg {
    fill: var(--blue1);
  }
}

.ul1 {

  li::marker {
    color: var(--grey4);
    font-size: 1rem;
    line-height: 1;
  }

  &.more-space li {
    margin: 1.5rem 0;
  }
}

.ul2 {
  list-style: none;
  padding-left: 2.5rem;

  & > li {
    position: relative;

    &:before {
      position: absolute; /* when multiple */
    }
  }
}

.more::before,
.ul2 > li::before {
  content: url('images/angle-double-right.svg');
  margin-right: .4rem;
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
}

.ul2 > li::before {
  left: -2rem;
}

.list-parenthesis {
  list-style-type: none;
  counter-reset: list;

  & > li {
    counter-increment: list;

    &:before {
      content: counter(list) ')';
      margin-right: 0.5rem;
    }
  }
}

.txtSmall {
  font-size: var(--font-small);
}

.loading {
  position: relative;
  --loading-width: 1rem;
  --loading-height: 1rem;
  --loading-color1: #ffffff;
  --loading-color2: var(--green3);
  min-height: var(--loading-height);

  &:empty {
    height: var(--loading-height);
  }

  &:before {
    content: " ";
    position: absolute;
    top: calc(50% - var(--loading-width) / 2);
    left: calc(50% - var(--loading-height) / 2);
    width: var(--loading-width);
    height: var(--loading-height);
    background-color: transparent;
    border: 2px solid;
    border-color: var(--loading-color1) var(--loading-color2);
    border-radius: 50%;
    animation: loader 1s linear infinite;
    visibility: visible;
  }
}

.curPage,
.page a,
.pageStepSmall a {
  padding: 0.4rem;
}

.notice {
  background-color: var(--red1);
  color: var(--grey0);
  margin-top: 3rem;
  padding: 0.5rem 0.75rem;
  border-radius: 0.25rem;
}

.db-down {
  display: flex;
  align-items: center;
  color: var(--red1);

  svg {
    width: 2.2rem;
    height: 2.2rem;
    margin-right: 1rem;
  }
}

.search-cont {
  display: flex;
  align-items: center;
  position: relative;

  button.search,
  button[type=reset] {
    padding: 0;
    border: 0;
    position: absolute;
    z-index: 1;
    background: none;
  }

  button[type=submit].search {
    left: 0.5rem;
  }

  button[type=reset].search {
    right: 0.5rem;
  }

  button.search .icon {
    --glass: var(--grey4);
    --handle: var(--grey4);
    --cross-product: var(--grey4);
  }

  input.search {
    width: 100%;
    padding: 0.4rem 2.5rem;
    max-width: 36rem;
    min-height: 2rem;
  }
}

.search-cont,
.twitter-typeahead {
  width: 100%;
  max-width: 36rem;
}

.tt-menu {
  width: 100%;
  margin-top: 0.3rem;
  border: 1px solid var(--grey2);
  box-shadow: 5px 1rem var(--grey2);
  background-color: white;
  max-height: 14rem;
  overflow-y: auto;
}

.tt-suggestion {
  padding: 0.3rem 1rem;

  &:hover {
    cursor: pointer;
    background-color: var(--blue2);
  }

  &.tt-cursor {
    background-color: var(--blue2);
  }
}

.visuallyHidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

.mailto {
  cursor: pointer;
}

.linkBroken {
  text-decoration: line-through;
  pointer-events: none;
  cursor: not-allowed;

  &:after {
    content: ' [dead link]';
    vertical-align: super;
    font-size: 76%;
    font-weight: bold;
  }
}

@keyframes loader {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@media screen and (min-width: 768px), print {
  button.icon.login,
  .login-link {
    position: relative;
    top: .1rem;
  }
}