* {
  box-sizing: border-box;
}

.text-center { text-align: center; }

.activeBold {
  font-weight: 900!important;
  color: green!important;
}

.smaller-text { font-size: 0.9rem!important; }
.bolder { font-weight: 700!important; font-size: 0.9rem!important; }

/* @font-face {
  font-family: 'NCE Truncated';
  src:  url('/fonts/EmojiOneColor.otf');
}

.font-ncet {
  font-family: 'NCE Truncated'!important;
  font-size: 1.2rem!important;
} */

span.emoji-sprite {
  width: 25px;
  height: 25px;
  display: inline-block!important;
  background: url('/images/greendex_sprites_20230505-01.png');
  background-size: 4000%;
  background-position: 0px 0px;
  background-repeat: no-repeat;
}

span.emoji-sprite-calendar { background-position: 0px 0px; }
span.emoji-sprite-bed { background-position: -25px 0px; }
span.emoji-sprite-energy { background-position: -50px 0px; }
span.emoji-sprite-meat { background-position: -75px 0px; }
span.emoji-sprite-arrowR { background-position: -100px 0px; }
span.emoji-sprite-plane { background-position: -125px 0px; }
span.emoji-sprite-boat { background-position: -150px 0px; }
span.emoji-sprite-train { background-position: -175px 0px; }
span.emoji-sprite-bus { background-position: -200px 0px; }
span.emoji-sprite-car { background-position: -225px 0px; }
span.emoji-sprite-arrowL { background-position: -250px 0px; }
span.emoji-sprite-map { background-position: -275px 0px; }
span.emoji-sprite-cake { background-position: -300px 0px; }
span.emoji-sprite-tree { background-position: -325px 0px; }
span.emoji-sprite-plate { background-position: -350px 0px; }
span.emoji-sprite-eye { background-position: -375px 0px; }
span.emoji-sprite-link { background-position: -400px 0px; }
span.emoji-sprite-pencil { background-position: -425px 0px; }
span.emoji-sprite-trash { background-position: -450px 0px; }
span.emoji-sprite-refresh { background-position: -475px 0px; }
span.emoji-sprite-print { background-position: -500px 0px; }
span.emoji-sprite-call { background-position: -525px 0px; }
span.emoji-sprite-hands { background-position: -550px 0px; }
span.emoji-sprite-stars { background-position: -575px 0px; }
span.emoji-sprite-celebration { background-position: -600px 0px; }
span.emoji-sprite-plant { background-position: -625px 0px; }

a.btn.btn-primary.font-ncet {
  line-height: 1.9rem!important;
  width: 40px!important;
}

body.home {
  margin: 0;
  padding: 0;
  height: 100vh;
  /* background: radial-gradient(circle, rgba(251,253,250,1) 0%, rgba(210,231,193,1) 72%); */
  background: radial-gradient(circle, rgba(0,0,0,1) 0%, rgba(20,20,20,1) 72%);
}

main.home {
  height: 80vh;
  overflow: auto;
}

main.home.loginform {
  height: 100vh;
  overflow: hidden;
}

main.home.form {
  height: 100vh;
  overflow: auto;
}

#home-logo, #form-logo {
  min-width: 200px;
  height: 100px;
  background: url('/images/greendex_logo.png') no-repeat center;
  background-size: contain;
  margin-top: 50px;
}

#form-logo {
  min-width: 120px;
  height: 60px;
  margin-top: 35px;
}

#home-logo a, #form-logo a {
  width: 100%;
  height: 100%;
  display: inline-block;
}

#home-message p, #home-message-login p {
  text-align: center;
  font-size: 1.4rem;
  font-family: "Comfortaa";
}

#home-message {
  height: 70%;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

#home-buttons {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#home-buttons a {
  font-family: "Open Sans";
  font-weight: 400;
  font-size: 1rem;
  background-color: #c2fbd7;
  background-color: rgba(131, 188, 86, 0.51);
  border-radius: 100px;
  box-shadow: rgba(44, 187, 99, .2) 0 -25px 18px -14px inset,rgba(44, 187, 99, .15) 0 1px 2px,rgba(44, 187, 99, .15) 0 2px 4px,rgba(44, 187, 99, .15) 0 4px 8px,rgba(44, 187, 99, .15) 0 8px 16px,rgba(44, 187, 99, .15) 0 16px 32px;
  color: green;
  cursor: pointer;
  display: inline-block;
  padding: 7px 30px;
  text-align: center;
  text-decoration: none;
  transition: all 250ms;
  border: 0;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  margin-top: 20px;
}

#home-buttons a:hover {
  box-shadow: rgba(44,187,99,.35) 0 -25px 18px -14px inset,rgba(44,187,99,.25) 0 1px 2px,rgba(44,187,99,.25) 0 2px 4px,rgba(44,187,99,.25) 0 4px 8px,rgba(44,187,99,.25) 0 8px 16px,rgba(44,187,99,.25) 0 16px 32px;
  transform: scale(1.05) rotate(-1deg);
}

/* #home-buttons a:first-of-type { margin-right: 25px; } */

main.home.form div.container {
  width: 90%;
  margin-left: auto;
  margin-right: auto;
}

main.home.form, main.home.form form * {
  font-family: "Open Sans";
  font-size: 1.1rem;
}

main.home.form h3 {
  margin-top: 30px;
  font-size: 1.3rem;
  font-family: "Comfortaa";
  line-height: 2rem;
}

main.home.form form p {
  margin-bottom: 25px!important;
}

main.home.form form input.radioo {
  width: 40px!important;
  height: 40px!important;
  display: inline-block;
  margin-bottom: 2px;
}

main.home.form form label {
  display: inline-block;
}

body.view div.container {
  max-width: 700px;
}

table.output-table {
    border-spacing: 0;
    margin-bottom: 20px;
    border: 1px solid rgba(131, 188, 86, 0.61);
    border-radius: 15px;
}

table.output-table thead {
  background: rgba(131, 188, 86, 0.61);
}

table.output-table th {
  text-align: center;
  padding: 3px 7px;
  border-radius: 0px;
}

table.output-table th:first-of-type {
  border-top-left-radius: 15px;
}

table.output-table th:last-of-type {
  border-top-right-radius: 15px;
}

table.output-table td {
  text-align: center;
  padding: 3px 7px;
}

table.output-table td, table.output-table th {
  min-width: 105px;
}

.text-black { color: black; }
.text-blue { color: darkblue; }
.text-red { color: darkred; }
.text-green { color: darkgreen; font-weight: bold; }

.login-container {
  border: 1px solid white;
  border-radius: 15px;
  padding: 30px;
  background: white;
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
  font-family: "Open Sans";
  font-size: 0.9rem;
  margin-left: 15px;
  margin-right: 15px;
  padding-bottom: 15px!important;
  max-width: 400px;
}

a.login-container-backbutton {
  position: absolute;
  top: 3%;
  left: 3%;
  text-decoration: none;
  color: rgba(131,188,86,1);
}

form a.btn-link {
  text-decoration: none;
  color: rgba(131,188,86,1);
  display: inline-block;
  margin-bottom: 5px;
}

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

.login-container form input[type="email"], .login-container form input[type="password"], .login-container form input[type="text"] {
  border: 0;
  border-bottom: 2px solid rgba(170, 170, 170, 1);
  width: 100%;
  margin-bottom: 15px;
  font-size: 1rem;
  font-family: "Open Sans";
  padding: 5px;
}

.login-container form select, .login-container form select option, .host-dashboard-card-table form select, .host-dashboard-card-table form select option {
  border: 0;
  border-bottom: 2px solid rgba(170, 170, 170, 1);
  width: 100%;
  margin-bottom: 15px;
  font-size: 1rem;
  font-family: "Open Sans";
  padding: 5px;
  background: white;
  -webkit-appearance: none;
}

.login-container form input[type=checkbox], .host-dashboard-card-table form input[type=checkbox] {
  /* Double-sized Checkboxes */
  -ms-transform: scale(2); /* IE */
  -moz-transform: scale(2); /* FF */
  -webkit-transform: scale(2); /* Safari and Chrome */
  -o-transform: scale(2); /* Opera */
  transform: scale(2);
  padding: 10px;
  margin-right: 10px;
  margin-left: 10px;
  margin-top: 10px;
}

.login-container form button, .host-dashboard-card-table form button {
  font-family: "Open Sans";
  font-weight: 400;
  font-size: 1rem;
  background-color: #c2fbd7;
  background-color: rgba(131, 188, 86, 0.51);
  border-radius: 100px;
  box-shadow: rgba(44, 187, 99, .2) 0 -25px 18px -14px inset,rgba(44, 187, 99, .15) 0 1px 2px,rgba(44, 187, 99, .15) 0 2px 4px,rgba(44, 187, 99, .15) 0 4px 8px,rgba(44, 187, 99, .15) 0 8px 16px,rgba(44, 187, 99, .15) 0 16px 32px;
  color: green;
  cursor: pointer;
  display: inline-block;
  padding: 7px 30px;
  text-align: center;
  text-decoration: none;
  transition: all 250ms;
  border: 0;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  margin: 25px auto;
}

.login-container span.invalid-feedback {
  color: red;
  margin-top: -15px!important;
  margin-bottom: 15px;
  display: inline-block;
}

.login-container p.login-p {
  margin-top: 0!important;
  margin-bottom: 20px!important;
}

main.registerform input {
  margin-bottom: 15px!important;
}

main.registerform input, main.registerform select {
  border: 1px solid gray!important;
  border-radius: 5px;
}

@media screen and (min-width: 800px) {
  #home-message p { font-size: 1.7rem; padding-bottom: 30px; }
  #home-buttons { flex-direction: row; }
  #home-buttons a { font-size: 1.4rem; margin-top: 0; }
  #home-buttons a:first-of-type { margin-right: 30px; }
  .login-container { padding: 40px; }
  .login-container p.login-p { margin-bottom: 15px; }
  .login-container form input[type="email"], .login-container form input[type="password"], .login-container form input[type="text"] { font-size: 1.1rem; }
}

@media screen and (min-width: 1300px) {
  #home-message p, #home-message-login p { font-size: 2rem; padding-bottom: 20px; }
  #home-buttons a { font-size: 1.6rem; padding: 16px 30px; }
  #home-buttons a:first-of-type { margin-right: 40px; }
  #home-logo {
    min-width: 250px;
    height: 140px;
    margin-top: 70px;
  }
  .login-container { min-width: 340px; }
}



/*   HOST TEMPLATE / DASHBOARD etc.      */

.topnav {
  background-color: white;
  overflow: hidden;
  margin: 20px;
  padding: 10px;
  font-family: "Comfortaa";
  border: 1px solid white;
  border-radius: 15px;
  position: sticky;
  top: 20px;
}

.topnav a {
  float: left;
  display: block;
  color: black;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  color: gray;
  font-weight: bold;
}

.topnav a:nth-last-of-type(2) {
  float: right;
}

.topnav a.active {
  color: green;
}

.topnav .icon {
  display: none;
}

.topnav a:first-of-type {
  padding: 4px 6px;
}

.icon-ham {
  width: 20px;
  height: 3px;
  background-color: black;
  margin: 3px 0;
}

.nav-logo {
    min-width: 100px;
    height: 40px;
    background: url('/images/greendex_logo.png') no-repeat center;
    background-size: contain;
}

a.btn.btn-primary {
    font-family: "Open Sans";
    font-weight: 400;
    font-size: 1rem;
    background-color: #c2fbd7;
    background-color: rgba(131, 188, 86, 0.51);
    border-radius: 100px;
    box-shadow: rgba(44, 187, 99, .2) 0 -25px 18px -14px inset,rgba(44, 187, 99, .15) 0 1px 2px,rgba(44, 187, 99, .15) 0 2px 4px,rgba(44, 187, 99, .15) 0 4px 8px,rgba(44, 187, 99, .15) 0 8px 16px,rgba(44, 187, 99, .15) 0 16px 32px;
    color: green;
    cursor: pointer;
    display: inline-block;
    padding: 4px 8px;
    text-align: center;
    text-decoration: none;
    transition: all 250ms;
    border: 0;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    height: 30px;
}

.host-dashboard-card-title a.btn.btn-primary {
  margin-left: 20px;
  font-size: 0.8rem;
}

.host-dashboard-card-title a.btn.btn-primary:hover {
  box-shadow: rgba(44,187,99,.35) 0 -25px 18px -14px inset,rgba(44,187,99,.25) 0 1px 2px,rgba(44,187,99,.25) 0 2px 4px,rgba(44,187,99,.25) 0 4px 8px,rgba(44,187,99,.25) 0 8px 16px,rgba(44,187,99,.25) 0 16px 32px;
  transform: scale(1.05) rotate(-1deg);
}

.host-dashboard-card {
  padding: 15px;
  max-width: 1000px;
  margin: 0 auto;
}

.host-dashboard-card h2, .host-dashboard-card h3 {
  font-family: "Comfortaa"!important;
}

.host-dashboard-card-title {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.host-dashboard-card h2 {
  display: block;
  font-size: 1.6rem;
  margin-top: 0;
}

.host-dashboard-card-title h3 {
  display: inline-block;
  vertical-align: middle;
  font-size: 1.3rem;
}

.host-dashboard-card-table {
  background: white;
  border-radius: 15px;
  border: 1px solid white;
  padding: 15px;
  font-family: "Open Sans";
}

.host-dashboard-card-table {
  margin-top: 10px;
}

.host-dashboard-card-table table a {
  text-decoration: none;
}

.host-dashboard-card-table table tbody tr {
  background-color: rgba(249,255,249,0.71)!important;
}

.host-dashboard-card-table .form-input {
    width: 100%;
    border: 1px solid #ddd;
    border-radius: .5rem;
    box-shadow: inset 0px 1px 2px rgba(0, 0, 0, .1);
    padding: 1rem;
    box-sizing: border-box;
    transition: ease-in-out .3s all;
}

.host-dashboard-card-table form h3.mt {
    margin-top: 35px;
}

.host-dashboard-card-table form input[type=radio] {
  height: 30px;
  width: 30px;
  vertical-align: middle;
}

.host-dashboard-card-table .tabpanel .radio-p {
  margin-top: 0;
  margin-bottom: 0;
}

.host-dashboard-card-table form input {
  font-size: 1rem;
}

.host-dashboard-card-table form h3 {
  font-size: 1.3rem;
  margin-bottom: 10px;
}

.host-dashboard-card-table form select {
  margin-bottom: 0;
}

.host-dashboard-card-table-newmobility {
  max-width: 650px;
  padding-left: 30px;
  padding-right: 30px;
  margin-left: auto;
  margin-right: auto;
}

.host-dashboard-card-title a.btn-submit-back, .host-dashboard-card a.btn-submit-back, a.btn-submit-back {
  font-family: "Open Sans";
  font-weight: 400;
  font-size: 1rem;
  background-color: rgba(255, 255, 255, .18);
  border-radius: 100px;
  box-shadow: rgba(44, 187, 99, .2) 0 -25px 18px -14px inset,rgba(44, 187, 99, .15) 0 1px 2px,rgba(44, 187, 99, .15) 0 2px 4px,rgba(44, 187, 99, .15) 0 4px 8px,rgba(44, 187, 99, .15) 0 8px 16px,rgba(44, 187, 99, .15) 0 16px 32px;
  color: green;
  cursor: pointer;
  display: inline-block;
  position: absolute;
  visibility: hidden;
  padding: 7px 30px;
  text-align: center;
  text-decoration: none;
  transition: all 250ms;
  border: 0;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.btn-submit-print {
  font-family: "Open Sans";
  font-weight: 400;
  font-size: 1rem;
  background-color: rgba(255, 255, 255, .18);
  border-radius: 100px;
  box-shadow: rgba(44, 187, 99, .2) 0 -25px 18px -14px inset,rgba(44, 187, 99, .15) 0 1px 2px,rgba(44, 187, 99, .15) 0 2px 4px,rgba(44, 187, 99, .15) 0 4px 8px,rgba(44, 187, 99, .15) 0 8px 16px,rgba(44, 187, 99, .15) 0 16px 32px;
  color: green;
  cursor: pointer;
  display: inline-block;
  visibility: visible;
  padding: 7px 30px;
  text-align: center;
  text-decoration: none;
  border: 0;
  margin-top: 50px;
  margin-bottom: 20px;
}

.host-dashboard-card-title a.btn-submit-back:hover, .host-dashboard-card a.btn-submit-back:hover, .host-dashboard-card-table-newmobility button:hover {
  box-shadow: rgba(44,187,99,.35) 0 -25px 18px -14px inset,rgba(44,187,99,.25) 0 1px 2px,rgba(44,187,99,.25) 0 2px 4px,rgba(44,187,99,.25) 0 4px 8px,rgba(44,187,99,.25) 0 8px 16px,rgba(44,187,99,.25) 0 16px 32px;
  transform: scale(1.05) rotate(-1deg);
}


.host-dashboard-card-title h3.text-center { text-align: center; margin-left: auto; margin-right: auto; }

.host-dashboard-card-table-intro {
  border-color: transparent;
  background:
        radial-gradient(25% 25% at 25% 25%,#c4e3c3 99%,#0000 101%) 35px 35px/calc(2*35px) calc(2*35px),
        radial-gradient(25% 25% at 25% 25%,#c4e3c3 99%,#0000 101%) 0 0/calc(2*35px) calc(2*35px),
        radial-gradient(50% 50%,#d0ebc5 98%,#0000) 0 0/35px 35px,
        repeating-conic-gradient(#d0ebc5 0 25%,#c4e3c3 0 50%)
          calc(.5*35px) 0/calc(2*35px) 35px;
  position: relative;
}

.host-dashboard-card-table-intro h2 {
  margin-bottom: 10px;
}

.host-dashboard-card-table-intro a.btn-primary {
  margin-right: 10px;
  height: 38px;
  background: white;
}

.host-dashboard-card-table-intro #mobilityqr {
  padding: 10px;
  background: white;
  width: 148px;
  height: 148px;
  border: 1px solid white;
  border-radius: 15px;
  position: absolute;
  right: 10px;
  top: 5px;
  visibility: hidden;
}

.home.form.view h2 { font-family: "Comfortaa"; }

p.pFormOutput {
  font-size: 1.3rem;
  font-family: "Open Sans";
  margin-top: 0!important;
  margin-bottom: 10px;
}

#countryEmojiSpan span { font-size: 2.2rem; font-family: 'NCE Truncated'; }
#countryEmojiMobilitySpan span { font-size: 2.2rem;}

.tdL { font-size: 1.8rem; }
.tdS { font-size: 1rem; }
.viewOutputTable { margin: 0 auto; }
.viewOutputTable td { padding: 6px; }

.dataGraphDiv {
  display: flex;
  flex-direction: column;
}

#CO2Chart {
  margin-top: 40px;
  margin-left: auto;
  margin-right: auto;
}

.greendexLogoInTable {
  height: 40px;
  width: 60px;
  background: url('/images/greendex_logo.png') no-repeat center;
  background-size: contain;
  display: inline-block;
}

@media screen and (min-width: 400px) {
  .host-dashboard-card-table-intro #mobilityqr { visibility: visible;}
  .host-dashboard-card-table-intro h2, .host-dashboard-card-table-intro h3 {
    max-width: 60%;
  }
}

@media screen and (min-width: 800px) {
  .host-dashboard-card h2 { font-size: 2.2rem;  }
  .host-dashboard-card-title a.btn.btn-primary {
    margin-left: 30px;
    font-size: 1.1rem;
    padding: 6px 14px!important;
    height: auto;
  }
  .host-dashboard-card-title a.btn-submit-back, .host-dashboard-card a.btn-submit-back  { visibility: visible; }
  .host-dashboard-card-table-intro #mobilityqr { top: 10px;}
  .host-dashboard-card-table-intro h2, .host-dashboard-card-table-intro h3 {
    max-width: 80%;
  }
  .dataGraphDiv {
    display: flex;
    flex-direction: row;
  }
  #CO2Chart {
    margin-top: 0;
    height: 100%!important;
    margin-left: 10px;
  }
  .dataGraphDiv-data { width: 38%; }
  .dataGraphDiv-chart { max-width: 62%!important; }
}

/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 800px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 800px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}

@media print {
    body, div.container { /* can be whatever CSS selector you need */
        position: absolute;
        top: 0;
        margin-top: 5px;
        transform: scale(0.83);
        width: 100%!important;
        break-inside: avoid;
        overflow: visible;
        margin-bottom: 50px;
        -webkit-print-color-adjust: exact;
    }
    div.container {
      margin-top: 0;
      padding-top: 0;
    }
    div.container.push-up-print {
      position: absolute;
      top: 0;
      margin-bottom: -130px;
      margin-top: -130px;
    }
    .btn-submit-print, .btn-submit-back, div.topnav, .customSpacer {
      visibility: hidden!important;
    }
    #form-logo {
      margin-top: 0!important;
    }
}