* {
  margin: 0;
  padding: 0;
}

a {
  color: inherit;
  text-decoration: inherit;
}
a.link :hover {
  text-decoration: underline;
  font-style: italic;
}

b {
  white-space: nowrap;
}

button {
  all: unset;
  cursor: pointer;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: var(--font-bold);
}

input,
select,
textarea {
  font-family: inherit;
  font-size: inherit;
  font-weight: 300;
  padding: 0.2em;
}

input:read-only {
  cursor: default;
  background-color: #f8f8f8;
  border: 1px solid #d1d1d1;
  color: #545454;
  border-radius: 3px;
}

select {
  width: 100%;
}

textarea {
  resize: vertical;
}

ul {
  list-style-type: none;
}

html {
  --max-width: Min(100vw, 1000px);
  --color-kuoni-blue: #28367a;
  --color-kuoni-red: #a01c4a;
  --color-prim-darker: #143150;
  --color-prim-dark: #1A3F67;
  --color-prim: #215083;
  --color-prim-light: #28619F;
  --color-prim-lighter: #357CC8;
  --color-prim-alpha: #357cc929;
  --color-sec-darker: #310812;
  --color-sec-dark: #4A0C1B;
  --color-sec: #671126;
  --color-sec-light: #7A112B;
  --color-sec-lighter: #9F2140;
  --color-neutral-darker: #646464;
  --color-neutral-dark: #7C7C7C;
  --color-neutral: #9B9B9B;
  --color-neutral-light: #B4B4B4;
  --color-neutral-lighter: #C7C7C7;
  --color-neutral-lighter-2: #F7F7F7;
  --color-neutral-lighter-3: #EFEFEF;
  --color-primary: #007bff;
  --color-info: #17a2b8;
  --color-success: #28a745;
  --color-warning: #ffc107;
  --color-danger: #dc3545;
  --color-dark: #343a40;
  --color-secondary: #6c757d;
  --color-light: #f8f9fa;
  --color-white: #ffffff;
  --box-shadow: 0 5px 5px -3px rgb(0 0 0 / 19%), 0 8px 10px 1px rgb(0 0 0 / 13%), 0 3px 14px 2px rgb(0 0 0 / 12%);
  --color-font: #171717;
  --font-normal: 300;
  --font-bold: 700;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  html {
    --font-normal: 200;
    --font-bold: 500;
  }
}

@font-face {
  font-family: "icons";
  src: url("/font/icons.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}
[class^=icon-]:before, [class*=" icon-"]:before {
  font-family: "icons";
  font-style: normal;
  font-weight: normal;
  speak: never;
  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  text-align: center;
  /* For safety - reset parent styles, that can break glyph codes*/
  font-variant: normal;
  text-transform: none;
  /* fix buttons height, for twitter bootstrap */
  line-height: 1em;
  /* Font smoothing. That was taken from TWBS */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html {
  font-family: "Libre Franklin", sans-serif;
  font-weight: 300;
  font-size: 16px;
  color: var(--color-font);
  background-color: var(--color-neutral-lighter-2);
  --color-bg-approved: #c5fEd3;
  --color-approved: #2ae843;
  --color-bg-reject: #fEc5d1;
  --color-reject: #e41843;
}

body {
  display: grid;
  grid-template-rows: auto 1fr;
  height: var(--app-height, 100vh);
}

#header {
  background-color: var(--color-prim);
  height: 70px;
  display: grid;
  place-items: center;
}

#fdi-logo {
  height: 40px;
  color: white;
}

#main,
#voting-pad {
  display: contents;
}

.voting-pad-view {
  width: 100vw;
  max-width: 500px;
  background-color: var(--bg-color, white);
  margin-inline: auto;
  overflow-y: auto;
}

.fullscreen-message {
  display: grid;
  place-items: center;
  line-height: 2;
  font-size: 1.5rem;
  padding: 1rem;
  box-sizing: border-box;
  position: relative;
}
.fullscreen-message-success {
  --bg-color: var(--color-success);
  color: white;
}
.fullscreen-message-error {
  --bg-color: var(--color-danger);
  color: white;
}

.countdown {
  --color-countdown: var(--color-prim);
  --steps: calc(var(--reflection-time) - var(--reflection-start, 0));
  --duration: calc(1s * var(--steps));
  --ratio-start: calc( (var(--reflection-time) - var(--reflection-start, 0)) / var(--reflection-time) );
}
.countdown.countdown-linear {
  display: flex;
  margin: 2rem;
}
.countdown.countdown-linear::before {
  content: "";
  display: inline-block;
  background-color: var(--color-countdown);
  animation: shrink var(--duration) linear;
  border-radius: 3px;
}
.countdown.countdown-radial {
  display: grid;
  place-items: center;
}
.countdown.countdown-radial > .digit-countdown {
  grid-column: 1;
  grid-row: 1;
}
.countdown > svg {
  grid-column: 1;
  grid-row: 1;
}
.countdown-background {
  fill: none;
  stroke: var(--color-neutral-lighter-3);
}
.countdown-color {
  fill: none;
  --perimeter: 282.7433388230814;
  transform: rotate(-90deg);
  stroke-dasharray: var(--perimeter);
  stroke: var(--color-countdown);
  animation: arc var(--duration) linear forwards;
}

@keyframes arc {
  0% {
    stroke-dashoffset: calc(-1px * var(--perimeter) * (1 - var(--ratio-start)));
  }
  100% {
    stroke-dashoffset: calc(-1px * var(--perimeter));
  }
}
@keyframes shrink {
  0% {
    width: calc(100% * var(--ratio-start));
  }
  100% {
    width: 0;
  }
}
@keyframes vibrate {
  0% {
    transform: translate(1px, 1px) rotate(0deg);
  }
  10% {
    transform: translate(-1px, -2px) rotate(-1deg);
  }
  20% {
    transform: translate(-3px, 0px) rotate(1deg);
  }
  30% {
    transform: translate(3px, 2px) rotate(0deg);
  }
  40% {
    transform: translate(1px, -1px) rotate(1deg);
  }
  50% {
    transform: translate(-1px, 2px) rotate(-1deg);
  }
  60% {
    transform: translate(-3px, 1px) rotate(0deg);
  }
  70% {
    transform: translate(3px, 1px) rotate(-1deg);
  }
  80% {
    transform: translate(-1px, -1px) rotate(1deg);
  }
  90% {
    transform: translate(1px, 2px) rotate(0deg);
  }
  100% {
    transform: translate(1px, -2px) rotate(-1deg);
  }
}