/* Variables for main colors */

:root {
  /* Different color codes */
  --dark-blue: #002C74;
  --blue: #0058B1;
  --light-blue: #1C6BBA;

  /* Named colors based on usage */
  --Traficom-main-color: var(--dark-blue);
  --Traficom-main-color-secondary-shade: var(--blue);
}

/* Generic Traficom css-rules */

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  font-family: Open Sans;
  font-size: 16px;
  font-weight: 400;
  color: #1C1C1C;
}

textarea:focus, input:focus, select:focus, a:focus, button:focus {
    outline: 3px solid var(--Traficom-main-color);
    outline-offset: 2px;
}


/* Headers */
h1, .h1 {
  font-family: Montserrat;
  font-size: 24px;
  font-weight: 300;
  line-height: 1.125em;
  text-transform: none;
  color: #1C1C1C;
}

h2, .h2 {
  font-family: Montserrat;
  font-size: 18px;
  font-weight: 300;
  line-height: 1.5;
  text-transform: none;
  color: #1C1C1C;
}

h3, .h3 {
  font-family: Montserrat;
  font-size: 18px;
  font-weight: 300;
  text-transform: none;
  color: #1C1C1C;
}

h4, .h4 {
  font-family: Montserrat;
  font-size: 16px;
  font-weight: 400;
  text-transform: uppercase;
}

h5, .h5 {
  font-family: Montserrat;
  font-size: 16px;
  font-weight: 400;
  text-transform: none;
}

h6, .h6 {
  font-family: Montserrat;
  font-size: 16px;
  font-weight: 400;
  text-transform: none;
}

  h1, h2, h3, h4, h5, h6
  .h1, .h2, .h3, .h4, .h5, .h6 {
    margin-top: 20px;
    margin-bottom: 10px;
  }

/* Navbar */
#navbar {
  border-top: 0.0625rem solid #f2f4f8;
  display: flex;
  width: 100%;
  padding-right: 2.5rem;
  padding-left: 2.5rem;
}

  #navbar a.navbar-link {
    color: var(--Traficom-main-color);
    display: inline-block;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    text-decoration: none;
    background-image: none;
    font-weight: 600;
    font-family: Montserrat;
    padding: 1em 1.5em;
    display: flex;
    align-items: flex-end;
  }

    #navbar a.navbar-link:hover {
      background-color: #F2F4F8;
      color: #1c1c1c;
    }

    #navbar a.navbar-link.active {
      color: #1c1c1c;
      border-bottom: 3px solid #1c1c1c;
    }

/* Hyperlinks */
a {
  color: var(--Traficom-main-color);
  font-weight: 600;
  background-image: linear-gradient(var(--light-blue) 50%, #FFFFFF 50%);
  background-size: 0.125rem 0.333rem;
  background-position: 0px 1.15em;
  background-repeat: repeat-x;
  text-decoration: none;
}

  a:hover {
    color: var(--Traficom-main-color);
    font-weight: 600;
    text-decoration: none;
    background-image: linear-gradient(var(--Traficom-main-color) 50%, #FFFFFF 50%);
  }

  a.linkki {
    display: inline-block;
    text-decoration-style: solid;
    text-decoration-line: none;
    background-image: none;
  }

    a.linkki::after {
      content: url("../icons/css-icons/arrow-blue.svg");
      display: inline-block;
      margin-left: 16px;
      margin-right: 8px;
      vertical-align: middle;
    }

    a.linkki:hover {
      text-decoration: underline;
    }

      a.linkki:hover::after {
        transform: translateX(0.5em);
        -webkit-transform: translateX(0.5em);
      }

  a.white-link {
    color: #ffffff;
    display: inline-block;
    background-image: none;
  }

    a.white-link:hover {
      text-decoration: underline;
    }

  a.listauslinkki {
    display: inline-block;
    text-decoration-style: solid;
    text-decoration-line: none;
    background-image: none;
  }

    a.listauslinkki::before {
      content: url("../icons/css-icons/arrow.svg");
      display: inline-block;
      margin-right: 16px;
      transition: transform 0.1s ease 0s;
      -webkit-transition: transform 0.1s ease 0s;
      vertical-align: middle;
    }

    a.listauslinkki:hover {
      text-decoration: underline;
    }

      a.listauslinkki:hover::before {
        transform: translateX(0.5em);
        -webkit-transform: translateX(0.5em);
      }

/* Buttons */
input.button.primary, button.primary {
  font-family: Montserrat;
  font-size: 1.125rem;
  font-weight: 400;
  color: #fff;
  background-color: var(--Traficom-main-color);
  line-height: 1.5em;
  padding: 0.75em 1em;
  border-radius: 0.125rem;
  border-width: 0.125rem;
  border-style: solid;
  border-color: transparent;
  border-image: initial;
}


  input.button.primary.smallbutton, button.smallbutton {
    padding: 0.25em 0.5em; /* Tiku taulun buttonien pienempi koko */
    font-size: 1rem;
    margin-bottom: 2px;
  }

  input.button.primary:hover, button.primary:hover {
    color: #fff;
    background-color: var(--Traficom-main-color-secondary-shade);
  }

  input.button.primary:disabled, input.button.primary[disabled]:hover,
  button.primary:disabled, button.primary[disabled]:hover {
    color: #939393;
    background-color: #F2F4F8;
  }

a.button.login {
  display: inline-block;
  font-family: Montserrat;
  font-size: 1.125rem;
  font-weight: 400;
  color: #fff;
  background-color: var(--Traficom-main-color);
  line-height: 1.5em;
  padding: 0.75em 1em;
  border-radius: 0.125rem;
  border-width: 0.125rem;
  border-style: solid;
  border-color: transparent;
  border-image: initial;
  background-image: none;
  background-repeat: no-repeat;
  text-decoration: none;
}

  a.button.login::after {
    content: "";
    background: url("../images/css/button-login-after-bg.svg");
    background-size: auto;
    background-repeat: no-repeat;
    background-position: center center;
    color: #fff;
    margin-left: 1em;
    padding-right: 0.5em;
  }

  a.button.login:hover {
    color: #fff;
    background-color: var(--Traficom-main-color-secondary-shade);
  }

/* Textbox inputs */
input.default {
  color: #1C1C1C;
  height: 50px;
  width: 300px;
  padding: 0.625rem 0.875rem;
  border-color: #1C1C1C;
  border-radius: 2px;
  border-style: solid;
  border-width: 1px;
}

input.default-small {
  height: unset;
  padding: 0.425rem 0.575rem;
}

input.default:focus {
  border-width: 1px;
  border-color: var(--Traficom-main-color);
  box-shadow: 1px 1px inset var(--Traficom-main-color), -1px -1px inset var(--Traficom-main-color);
}

input.default:disabled {
  color: #939393;
  border-color: #939393;
  background-color: #EDF0F5;
}

input.default.error, input.default.input-validation-error {
  color: #9E003B;
  border-color: #9E003B;
  background-color: rgba(158,0,59,0.05);
}

textarea {
  border: 1px solid #555555;
  border-radius: 2px;
  background-color: #FFFFFF;
  color: #1C1C1C;
  padding: 0.75em 0.5em 0.5em 1em;
}

  textarea:disabled {
    color: #939393;
    border-color: #939393;
    background-color: #EDF0F5;
  }

  textarea.error, textarea.input-validation-error {
    color: #9E003B;
    border-color: #9E003B;
    background-color: rgba(158,0,59,0.05);
  }

input.search {
  color: var(--Traficom-main-color);
  height: 50px;
  width: 300px;
  padding: 0.625rem 0.875rem;
  border: 1px solid var(--Traficom-main-color);
  border-right-width: 0px;
  border-radius: 2px;
  border-bottom-right-radius: 0px;
  border-top-right-radius: 0px;
}

  input.search:focus {
    box-shadow: 1px 1px inset var(--Traficom-main-color), -1px -1px inset var(--Traficom-main-color);
  }

input.searchbutton {
  height: 50px;
  width: 50px;
  border-radius: 0 2px 2px 0;
  border: 1px solid var(--Traficom-main-color);
  background-image: url("../icons/css-icons/search.svg");
  background-color: var(--Traficom-main-color);
  background-repeat: no-repeat;
  background-position: center;
}

  input.searchbutton:hover {
    color: #fff;
    background-color: var(--Traficom-main-color-secondary-shade);
  }

/* label text for inputs */
.input-label {
  font-size: 1rem;
  font-weight: 600;
}

/* Dropdowns */
select {
  -webkit-appearance: none;
  height: 50px;
  width: auto;
  padding: 0.54rem 2.5em 0.54rem 1rem;
  line-height: 1.5rem;
  font-size: 0.9rem;
  border: 0.0625rem solid #1C1C1C;
  border-radius: 0.1em;
}

  select.select-small {
    height: unset;
    padding: 0.425rem 2.5em 0.425rem 1rem;
  }

  select::-ms-expand {
    display: none;
  }

  select:focus {
    color: var(--Traficom-main-color);
  }

  select:disabled, select[disabled] {
    color: #939393;
    background-color: #EDF0F5;
    border: 0.0625rem solid #939393;
  }

  select.error {
    color: #9E003B;
    border-color: #9E003B;
    background-color: rgba(158,0,59,0.05);
  }

div.dropdown::after {
  content: url("../icons/css-icons/path.svg");
  position: relative;
  right: 35px;
  pointer-events: none;
}

div.dropdown.disabled::after {
  filter: invert(61%) sepia(0%) saturate(15%) hue-rotate(203deg) brightness(95%) contrast(90%); /* from black to #939393 */
}

/* Checkboxes */
label.checkbox {
  display: inline-block;
  cursor: pointer;
  margin-bottom: 4px;
  margin-right: 20px;
}

  label.checkbox:hover {
    color: var(--Traficom-main-color);
  }

  label.checkbox span {
    display: inline-block;
    vertical-align: top;
  }

  label.checkbox:hover > input[type="checkbox"]:disabled + span {
    color: #6D6D6D;
  }

input[type="checkbox"] {
  -webkit-appearance: none;
  background-color: #FFFFFF;
  border: 2px solid #555555;
  cursor: pointer;
  display: inline-block;
  padding: 10px;
  margin-right: 15px;
}

  input[type="checkbox"]:hover {
    border-color: var(--Traficom-main-color);
  }

  input[type="checkbox"]:checked {
    background-color: var(--Traficom-main-color);
    background-image: url("../icons/css-icons/check-icon.svg");
    background-repeat: no-repeat;
    background-position: center;
    border-color: var(--Traficom-main-color);
  }

    input[type="checkbox"]:checked + span,
    input[type="checkbox"]:checked + label {
      color: var(--Traficom-main-color);
      font-weight: 600;
    }

  input[type="checkbox"]:disabled, input[type="checkbox"]:disabled:hover {
    background-color: #F2F4F8;
    border-color: rgba(147,147,147,0.5);
  }

    input[type="checkbox"]:disabled + span {
      color: #6D6D6D;
    }

  input[type="checkbox"] + label,
  input[type="checkbox"] + span {
    display: inline;
    cursor: pointer;
    font-weight: 400;
  }

    input[type="checkbox"] + label:hover,
    input[type="checkbox"] + span:hover {
      color: var(--Traficom-main-color);
    }

  input[type="checkbox"].error {
    color: #9E003B;
    border-color: #9E003B;
    background-color: rgba(158,0,59,0.05);
  }

    input[type="checkbox"].error + label {
      color: #9E003B;
    }


/* Radiobuttons */
label.radio {
  display: inline-block;
  cursor: pointer;
  margin-bottom: 4px;
  margin-right: 20px;
}

  label.radio:hover {
    color: var(--Traficom-main-color);
  }

  label.radio span {
    display: inline-block;
    vertical-align: top;
  }

  label.radio:hover > input[type="radio"]:disabled + span {
    color: #6D6D6D;
  }

input[type="radio"] {
  -webkit-appearance: none;
  background-color: #FFFFFF;
  border: 1px solid #555555;
  border-radius: 12px;
  cursor: pointer;
  display: inline-block;
  padding: 10px;
  margin-right: 15px;
}

  input[type="radio"]:hover {
    border-color: var(--Traficom-main-color);
  }

  input[type="radio"]:checked {
    border-color: var(--Traficom-main-color);
    box-shadow: inset 0 0 0 2px var(--Traficom-main-color);
    background-image: radial-gradient(circle, var(--Traficom-main-color) 25%, white 35%);
  }

    input[type="radio"]:checked + span,
    input[type="radio"]:checked + label {
      color: var(--Traficom-main-color);
      font-weight: 600;
    }

  input[type="radio"]:disabled, input[type="radio"]:disabled:hover {
    background-color: #F2F4F8;
    border-color: rgba(147,147,147,0.5);
  }

    input[type="radio"]:disabled + span,
    input[type="radio"]:disabled + label {
      color: #6D6D6D;
    }

  input[type="radio"] + label,
  input[type="radio"] + span {
    display: inline;
    cursor: pointer;
    font-weight: 400;
  }

    input[type="radio"] + label:hover,
    input[type="radio"] + span:hover {
      color: var(--Traficom-main-color);
    }

  input[type="radio"].error {
    color: #9E003B;
    border-color: #9E003B;
    background-color: rgba(158,0,59,0.05);
  }

    input[type="radio"].error + label {
      color: #9E003B;
    }

/* Haitarivalikko */
section.accordion {
  margin: 12px 0;
  border: 1px solid #ECEFF4;
  border-radius: 2px;
  box-shadow: 0 0 6px 0 rgba(0,0,0,0.05);
}

  section.accordion header {
    background-color: #FFFFFF;
    width: 100%;
    box-shadow: 0 0 6px 0 rgba(0,0,0,0.05);
    cursor: pointer;
    margin: 0.75rem 0px;
    color: var(--Traficom-main-color);
    letter-spacing: -0.06px;
    font-size: 1.125rem;
    font-family: Montserrat;
    line-height: 1.5;
    text-transform: none;
    font-weight: 600;
    overflow-wrap: break-word;
    word-break: break-word;
    margin: 0px;
    padding: 0.75em 1.5em;
    text-align: left;
    border: none;
  }

    section.accordion header::after {
      content: url("../icons/css-icons/path.svg");
      float: right;
      filter: invert(14%) sepia(33%) saturate(5902%) hue-rotate(208deg) brightness(90%) contrast(107%); /* from black to #002C74 */
      transform: scale(1.3);
    }

    section.accordion header.closed {
    }

    section.accordion header.open {
      background-color: var(--Traficom-main-color);
      color: #FFFFFF;
    }

      section.accordion header.open::after {
        filter: brightness(0) invert(1); /* from black to #FFFFFF */
        transform: rotateX(180deg) scale(1.3);
      }

  section.accordion:hover header.closed {
    color: var(--Traficom-main-color-secondary-shade);
    box-shadow: 0 0 10px 0 rgba(0,0,0,0.08);
  }

    section.accordion:hover header.closed::after {
      filter: invert(22%) sepia(65%) saturate(2765%) hue-rotate(197deg) brightness(93%) contrast(101%); /* from black to #0058B1 */
    }

  /* Tyylit buttonpohjaiselle accordionille */
  section.accordion > button {
    background-color: #FFFFFF;
    width: 100%;
    box-shadow: 0 0 6px 0 rgba(0,0,0,0.05);
    cursor: pointer;
    margin: 0.75rem 0px;
    color: var(--Traficom-main-color);
    letter-spacing: -0.06px;
    font-size: 1.125rem;
    font-family: Montserrat;
    line-height: 1.5;
    text-transform: none;
    font-weight: 600;
    overflow-wrap: break-word;
    word-break: break-word;
    margin: 0px;
    padding: 0.75em 1.5em;
    text-align: left;
    border: none;
  }

    section.accordion > button::after {
      content: url("../icons/css-icons/path.svg");
      float: right;
      filter: invert(14%) sepia(33%) saturate(5902%) hue-rotate(208deg) brightness(90%) contrast(107%); /* from black to #002C74 */
      transform: scale(1.3);
    }

    section.accordion > button.closed {
    }

    section.accordion > button.open {
      background-color: var(--Traficom-main-color);
      color: #FFFFFF;
    }

      section.accordion > button.open::after {
        filter: brightness(0) invert(1); /* from black to #FFFFFF */
        transform: rotateX(180deg) scale(1.3);
      }

  section.accordion:hover > button.closed {
    color: var(--Traficom-main-color-secondary-shade);
    box-shadow: 0 0 10px 0 rgba(0,0,0,0.08);
  }



  section.accordion div.accordion {
    border: 1px solid #ECEFF4;
    border-radius: 0 0 2px 2px;
    background-color: #F2F4F8;
    padding: 1.5rem;
  }


/* Taulukko */
tr, td {
  border: 1px solid #ECEFF4;
}

  tr:nth-child(2n+1) {
    background-color: #FFFFFF;
  }

  tr:nth-child(2n) {
    background-color: #F2F4F8;
  }

td {
  padding: 1.5em;
  vertical-align: top;
}

/* Kielivalinta */
section.langChange {
  display: inline-block;
  position: relative;
}

  section.langChange > header.currentLang {
    display: inline-block;
    padding: 0.5rem 0.5em;
    cursor: pointer;
  }

    section.langChange > header.currentLang.closed {
      color: var(--Traficom-main-color);
    }

    section.langChange > header.currentLang::before {
        content: "";
        filter: invert(14%) sepia(33%) saturate(5902%) hue-rotate(208deg) brightness(90%) contrast(107%); /* from black to #002C74 */
        margin: 1rem 0.75rem;
        position: relative;
        top: 5px;
        background-image: url("../icons/css-icons/globe.svg");
    }

    section.langChange > header.currentLang::after {
      content: url("../icons/css-icons/path.svg");
      display: inline-block;
      filter: invert(14%) sepia(33%) saturate(5902%) hue-rotate(208deg) brightness(90%) contrast(107%); /* from black to #002C74 */
      padding: 0 0.75rem;
    }

    section.langChange > header.currentLang.closed:hover {
      color: var(--Traficom-main-color-secondary-shade);
    }

      section.langChange > header.currentLang.closed:hover::before {
        color: var(--Traficom-main-color-secondary-shade);
        filter: invert(22%) sepia(65%) saturate(2765%) hue-rotate(197deg) brightness(93%) contrast(101%); /* from black to #0058B1 */
      }

      section.langChange > header.currentLang.closed:hover::after {
        color: var(--Traficom-main-color-secondary-shade);
        filter: invert(22%) sepia(65%) saturate(2765%) hue-rotate(197deg) brightness(93%) contrast(101%); /* from black to #0058B1 */
      }

    section.langChange > header.currentLang.open {
      color: #FFFFFF;
      background-color: var(--Traficom-main-color);
    }

      section.langChange > header.currentLang.open::before {
        filter: brightness(0) invert(1); /* from black to #FFFFFF */
      }

      section.langChange > header.currentLang.open::after {
        filter: brightness(0) invert(1); /* from black to #FFFFFF */
        transform: rotateX(180deg);
      }

  section.langChange div.languages {
    background-color: var(--Traficom-main-color);
    position: absolute;
    padding: 0px 1rem 1rem;
    z-index: 10;
    height: auto;
    width: 100%;
  }

    section.langChange div.languages ul {
      list-style: none;
      padding: 0;
      margin: 0;
    }

      section.langChange div.languages ul li {
        margin: 0.5em 0px;
      }

        section.langChange div.languages ul li:first-of-type {
          margin-top: 0px;
        }

        section.langChange div.languages ul li:last-of-type {
          margin-bottom: 0px;
        }

    section.langChange div.languages a {
      color: #FFFFFF;
      text-decoration: none;
      background-image: none;
    }

      section.langChange div.languages a:hover {
        text-decoration: underline;
      }

    section.langChange div.languages li.active a {
      text-decoration: underline;
    }

/* Kirjautumisvalikko */
section.login-menu {
  display: inline-block;
  position: relative;
}

  section.login-menu > header.login-header {
    display: inline-block;
    padding: 0.75rem 0.5em;
    cursor: pointer;
  }

    section.login-menu > header.login-header.closed {
      color: var(--Traficom-main-color);
    }

    section.login-menu > header.login-header::before {
      content: url("../icons/css-icons/lock-icon.svg");
      filter: invert(14%) sepia(33%) saturate(5902%) hue-rotate(208deg) brightness(90%) contrast(107%); /* from black to #002C74 */
      margin: 1rem 0.75rem;
      position: relative;
      top: 3px;
    }

    section.login-menu > header.login-header::after {
      content: url("../icons/css-icons/path.svg");
      display: inline-block;
      filter: invert(14%) sepia(33%) saturate(5902%) hue-rotate(208deg) brightness(90%) contrast(107%); /* from black to #002C74 */
      padding: 0 0.75rem;
    }

    section.login-menu > header.login-header.closed:hover {
      color: var(--Traficom-main-color-secondary-shade);
    }

      section.login-menu > header.login-header.closed:hover::before {
        color: var(--Traficom-main-color-secondary-shade);
        filter: invert(22%) sepia(65%) saturate(2765%) hue-rotate(197deg) brightness(93%) contrast(101%); /* from black to #0058B1 */
      }

      section.login-menu > header.login-header.closed:hover::after {
        color: var(--Traficom-main-color-secondary-shade);
        filter: invert(22%) sepia(65%) saturate(2765%) hue-rotate(197deg) brightness(93%) contrast(101%); /* from black to #0058B1 */
      }

    section.login-menu > header.login-header.open {
      color: #FFFFFF;
      background-color: var(--Traficom-main-color);
    }

      section.login-menu > header.login-header.open::before {
        filter: brightness(0) invert(1); /* from black to #FFFFFF */
      }

      section.login-menu > header.login-header.open::after {
        filter: brightness(0) invert(1); /* from black to #FFFFFF */
        transform: rotateX(180deg);
      }

  section.login-menu div.login-links {
    background-color: var(--Traficom-main-color);
    position: absolute;
    padding: 0px 1rem 1rem;
    z-index: 10;
    height: auto;
    width: 100%;
  }

    section.login-menu div.login-links a.login-link {
      color: #FFFFFF;
      text-decoration: none;
      background-image: none;
      display: inline-block;
      letter-spacing: 0.5px;
      padding-left: 35px;
      margin: 0.5em 0px;
      font-weight: 400;
    }

      section.login-menu div.login-links a.login-link::before {
        content: ">";
        position: absolute;
        left: 25px;
      }

      section.login-menu div.login-links a.login-link:hover {
        text-decoration: underline;
      }

/* Headerin uloskirjautumispainike */
.logout {
  margin: 0 0 1em 0;
  padding: 0.5rem 0.5rem;
  align-items: center;
}

  .logout a.logout-link {
    background-image: none;
    padding: 0.5em 1em;
    border: 1px solid var(--Traficom-main-color);
    border-radius: 4px;
  }

    .logout a.logout-link:hover {
      text-decoration: underline;
      color: var(--Traficom-main-color-secondary-shade);
    }

/* Headerin menu-nappi */

.visa-toggler.navbar-toggler {
  border: 0;
}

.visa-toggler .navbar-toggler-icon {
  background-image: url("../icons/svg/valikko.svg");
}

/* Sivutus */
.pagination .pagination-button {
  text-decoration: none;
  background-image: none;
  padding: 0.5em 0.6em;
  margin: 0px 0.25em;
  font-weight: bold;
  cursor: pointer;
}

  .pagination .pagination-button.active {
    border: 0.125rem solid var(--Traficom-main-color);
    border-radius: 0.25rem;
    background-color: #EBF5F5;
    min-width: 2.3em;
    text-align: center;
  }

  .pagination .pagination-button:hover {
    color: var(--Traficom-main-color-secondary-shade);
  }

  .pagination .pagination-button.previous::before {
    content: "< ";
  }

  .pagination .pagination-button.next::after {
    content: " >";
  }

/* tällä luokaalla voi lisätä elementin perään väkäsen */
.element-with-path-icon::after {
  content: url("../icons/css-icons/path.svg");
}

/* Captcha (BotDetect) */
input#user-captcha-input {
  font-family: Open Sans;
  font-size: 1rem;
  color: #1C1C1C;
  height: 50px;
  padding: 0.625rem 0.875rem;
  border-color: #1C1C1C;
  border-radius: 2px;
  border-style: solid;
  border-width: 1px;
}

/* Virheilmoitus */
div.virheilmoitus,
section.virheilmoitus {
  font-family: Open sans;
  font-weight: 400;
  font-size: 1rem;
  color: #1C1C1C;
  background-color: #F2F4F8;
  display: block;
  padding: 16px;
  padding-left: 60px;
  position: relative;
  min-height: 68px;
  border: 1px solid #ECEFF4;
}

  div.virheilmoitus::before,
  section.virheilmoitus::before {
    content: url("../icons/svg/huutomerkki-punainen.svg");
    display: inline-block;
    position: absolute;
    color: #E90008;
    width: 25px;
    left: 16px;
    margin-top: 2px;
  }

#captcha-messages.captcha-error {
  color: red;
  padding: 0;
}

/* Footer */
footer#footer {
  min-height: 200px;
  background: var(--Traficom-main-color);
  color: #FFFFFF;
  padding: 2em;
  margin: 0 auto;
  width: 100%;
  border: 0;
}

  footer#footer .footer-column {
    color: #FFFFFF;
  }

  footer#footer h1, footer#footer .h1 footer#footer h2 footer#footer .h2,
  footer#footer h3, footer#footer .h3 footer#footer h4 footer#footer .h4,
  footer#footer h5, footer#footer .h5 footer#footer h6 footer#footer .h6 {
    color: #FFFFFF;
  }

.fileuploadremove, .fileuploadremove:hover {
  background: url("../icons/svg/miinus.svg") left 50% / 12px 4px no-repeat;
  padding-left: 16px;
}

/* Mobile styles */
@media (max-width: 767px) {
  h1, .h1 {
    font-size: 1.968rem;
  }

  h2, .h2 {
    font-size: 1.42rem;
  }

  h3, .h3 {
    font-size: 1.125rem;
  }

  h4, .h4 {
    font-size: 1rem;
  }

  h5, .h5 {
    font-size: 1rem;
  }

  h6, .h6 {
    font-size: 0.875rem;
  }
}