:root {
  --background-color: #f7fcfa;
  --background-inverse-color: #4cb290;
  --border-focused-inverse-color: #52ba99;
  --default-border-radius: .4em;
  --link-color: #4cb290;
  --nettools-border-radius: .5em;
  --page-width: 70em;
  --required-color: #226ba6;
}

body {
  background-color: #6b6b6b;
}

h1, h2, h3, h4, strong {
  font-weight: 500;
}

.button, button, input[type="color"], input[type="date"], input[type="datetime-local"], input[type="datetime"], input[type="email"], input[type="month"], input[type="number"], input[type="password"], input[type="search"], input[type="submit"], input[type="tel"], input[type="text"], input[type="time"], input[type="url"], input[type="week"], select, textarea {
  border-radius: 1em;
}

input[type="date"]:focus, input[type="datetime-local"]:focus, input[type="datetime"]:focus, input[type="email"]:focus, input[type="month"]:focus, input[type="number"]:focus, input[type="password"]:focus, input[type="search"]:focus, input[type="submit"]:focus, input[type="tel"]:focus, input[type="text"]:focus, input[type="time"]:focus, input[type="url"]:focus, input[type="week"]:focus, select:focus, textarea:focus {
  background-color: #fff;
}

.envelope {
  background-color: var(--background-color);
  margin-left: calc(50% - var(--page-width) / 2);
  max-width: 100%;
  width: var(--page-width);
  padding: 0;
  display: block;
  position: absolute;
}

.contentholder {
  display: flex;
}

.app-progress-indicator > span.spinner {
  content: url("../../sites/d36bbf3d-49a3-4295-9064-94b16a3693f1/images/spinner.svg");
  display: block;
}

#pagetop {
  background-color: #e5faf2;
  width: 22%;
}

h1.title {
  background-image: url("../../sites/d36bbf3d-49a3-4295-9064-94b16a3693f1/images/poradna-logo.svg");
  background-position: 70% calc(.9em + 20%);
  background-repeat: no-repeat;
  background-size: 92%;
  height: 3.4em;
  display: flex;
}

h1.title a {
  color: #0000;
  text-decoration: none;
}

header {
  margin: 1.2em 1em;
}

header a.logo {
  display: none;
}

nav.main {
  margin-top: 1em;
}

nav.main li {
  margin: 0 .5em .5em 0;
  font-size: .9em;
}

nav.main a {
  display: block;
}

nav.main a.search-queries, nav.main a.add-query {
  background-image: url("../../sites/d36bbf3d-49a3-4295-9064-94b16a3693f1/images/icons/add.svg");
  background-position: left 0 50%;
  background-repeat: no-repeat;
  background-size: 1.4em;
  padding: 0 0 0 2em;
}

nav.main a.add-query {
  background-image: url("../../sites/d36bbf3d-49a3-4295-9064-94b16a3693f1/images/icons/add.svg");
}

nav.main a.search-queries {
  background-image: url("../../sites/d36bbf3d-49a3-4295-9064-94b16a3693f1/images/icons/magnifier.svg");
}

nav.main a.information {
  display: none;
}

#content {
  width: 55%;
  min-height: 20em;
}

#infocolumn {
  background-image: url("../../sites/d36bbf3d-49a3-4295-9064-94b16a3693f1/images/icons/info.svg");
  background-position: 1.4em 4.4em;
  background-repeat: no-repeat;
  background-size: 2em;
  width: 23%;
  padding: 1.6em;
  font-size: .8em;
  overflow: auto;
  box-shadow: -3px 0 10px 1px #ddd;
}

#infocolumn h4 {
  color: #40a57d;
  text-transform: uppercase;
  margin: 1.8em 0 2em 1.9em;
  font-size: 1.5em;
}

#infocolumn .closer {
  display: none;
}

.query-info {
  z-index: -1;
  position: fixed;
  bottom: 0;
}

.query-info:hover {
  z-index: 10;
}

footer {
  background-color: #fff;
  border-top: 1px solid #f2f6f4;
  width: 100%;
  padding: .2em .5em;
  position: relative;
  bottom: 0;
}

footer .copyright {
  text-align: center;
  opacity: .6;
  font-size: .7em;
}

footer .copyright strong {
  font-weight: 400;
}

footer .copyright a {
  color: #014630;
}

.poradna-container {
  flex-direction: column;
  align-items: center;
  margin: .6em;
  display: flex;
}

#content h2.subtitle {
  color: #40a57d;
  text-align: center;
  margin: 2.1em 1em 1.7em;
}

.poradna-container h2 {
  color: #40a57d;
  margin-bottom: 1em;
}

#poradna-question-form {
  position: relative;
}

#poradna-question-input {
  border: 1px solid #bcf3e1;
  border-radius: 1.2em;
  width: 100%;
  margin: 0 auto;
  padding: .5em .8em;
}

#poradna-question-submit {
  color: #fff;
  background-color: #4cb391;
  background-image: url("../../sites/d36bbf3d-49a3-4295-9064-94b16a3693f1/images/icons/arrow-up.svg");
  background-position: .45em .2em;
  background-repeat: no-repeat;
  background-size: 1em;
  border: 1px solid #4cb391;
  width: 6.2em;
  height: 1.7em;
  padding: 0 .2em .2em 1.3em;
  font-weight: 400;
  line-height: 1.5em;
  display: none;
  position: absolute;
  bottom: .6em;
  right: .6em;
}

#poradna-question-submit:hover {
  background-color: #40aa87;
  border-color: #45a283;
}

form.has_data #poradna-question-submit {
  display: block;
}

#poradna-question-form.answered #poradna-question-input {
  background-color: #fff;
  border-color: #e8e8e8;
  height: fit-content;
  bottom: auto;
}

#poradna-question-form.answered #poradna-question-submit {
  display: none;
}

#poradna-answer {
  margin-top: 1.5em;
}

#poradna-answer:not(:empty) {
  border-bottom: 1px solid #e0e0e0;
  margin-bottom: 1.5em;
}

#poradna-answer.dangerous {
  display: none;
}

#poradna-answer.dangerous.accepted {
  display: block;
}

#poradna-review-form {
  display: none;
}

#poradna-review-form.active {
  padding-top: 1em;
  display: block;
}

#poradna-review-form p.instructions {
  display: none;
}

#poradna-review-form.review-forced.active p.forced {
  font-weight: 400;
  display: block;
}

#poradna-review-form.review-forced.active.accepted p.forced {
  display: none;
}

#poradna-review-form.review-not-forced.active p.common, #poradna-review-form.accepted p.dangerous {
  display: block;
}

#poradna-review-button {
  background-image: url("../../img/icon/sananim-expert-white.svg");
  background-position: 95%;
  background-repeat: no-repeat;
  background-size: 1.2em;
  margin: 1em;
  padding-right: 2.2em;
  display: block;
}

#poradna-review-form .inputs {
  text-align: center;
  width: 100%;
  display: table;
}

#poradna-review-form .inputs input {
  width: 60%;
  padding-left: .6em;
  display: table-cell;
}

#poradna-review-form .inputs button {
  display: table-cell;
}

#poradna-search-form {
  width: 100%;
  margin-bottom: 2em;
  display: flex;
}

#poradna-search-form input[type="search"] {
  width: 100%;
  margin-right: .5em;
  padding-left: .7em;
}

#poradna-search-form input[type="submit"] {
  height: 1.85em;
  margin-top: .125em;
  margin-left: -4.7em;
  padding: 0 .5em;
  font-weight: 300;
}

#content .query-detail {
  margin: 1.5em;
}

#content .query-detail .question {
  background-color: #fff;
  border: 1px solid #bcf3e1;
  border-radius: .6em;
  margin: .5em 0 1.5em;
  padding: .3em 1em;
  font-size: 1.1em;
}

.poradna-container .query-table-box .wrapper {
  box-shadow: none;
  font-size: .95em;
}

.poradna-container .query-table-box .pager label {
  display: none;
}

.poradna-container .db-query-table th:hover {
  background-color: #4aaa8a;
}

.poradna-container .first-column-show-icon .db-query-table tr > td:first-child > a {
  color: #0000;
  height: 1.6em;
}

.poradna-container em {
  color: #09aa75;
  font-weight: 500;
}

@media only screen and (width <= 70em) {
  .envelope {
    margin-left: 0;
  }
}

@media only screen and (width <= 40em) {
  .contentholder {
    flex-direction: column;
  }

  #pagetop {
    width: 100%;
    box-shadow: -3px 0 10px 1px #ddd;
  }

  h1.title {
    background-position: 5% 50%;
    background-size: 50%;
  }

  #content h2.subtitle {
    margin: 1em .2em;
    font-size: 1.8em;
  }

  #pagetop header {
    width: 42%;
    height: 5em;
    margin: 0 3% 0 0;
    padding: 0;
    position: absolute;
    top: 1em;
    right: 0;
  }

  nav.main {
    margin-top: .8em;
  }

  nav.main ul {
    flex-direction: row;
    display: flex;
  }

  nav.main ul li {
    width: 33%;
  }

  nav.main a.search-queries, nav.main a.add-query, nav.main a.information {
    color: #0000;
    text-indent: -200%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 80%;
    width: 70%;
    height: 90%;
    margin: 0 .5em;
    display: block;
    overflow: hidden;
  }

  nav.main a.search-queries {
    background-image: url("../../sites/d36bbf3d-49a3-4295-9064-94b16a3693f1/images/icons/magnifier.svg");
  }

  nav.main a.add-query {
    background-image: url("../../sites/d36bbf3d-49a3-4295-9064-94b16a3693f1/images/icons/add.svg");
    background-size: 87%;
  }

  nav.main a.information {
    background-image: url("../../sites/d36bbf3d-49a3-4295-9064-94b16a3693f1/images/icons/info.svg");
    background-size: 83%;
  }

  #content {
    width: 100%;
  }

  .poradna-container {
    font-size: 1.1em;
  }

  #infocolumn {
    box-shadow: none;
    background-position: 1.4em 2.2em;
    background-size: 2.6em;
    padding: 0;
  }

  #infocolumn h4, #infocolumn p, #infocolumn .closer {
    display: none;
  }

  #infocolumn.visible {
    background-color: var(--background-color);
    z-index: 10;
    width: 100%;
    padding: 0 2em 1.6em;
    font-size: 1em;
    position: absolute;
    top: 0;
  }

  #infocolumn.visible h4 {
    margin: 1.5em 2em;
    font-size: 1.5em;
    display: block;
  }

  #infocolumn.visible p {
    margin: 1.5em 0;
    display: block;
  }

  #infocolumn.visible .closer {
    cursor: pointer;
    background-color: #0000;
    background-image: url("../../sites/d36bbf3d-49a3-4295-9064-94b16a3693f1/images/icons/close.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 2.6em;
    width: 2.5em;
    height: 2.5em;
    display: block;
    position: absolute;
    top: 2.3em;
    right: 1.55em;
  }

  #infocolumn .closer:hover {
    background-size: 2.8em;
  }

  #poradna-question-submit {
    background-position: .4em .3em;
    background-size: 1.2em;
    border-radius: 2em;
    width: 6.4em;
    height: 2em;
    padding-left: 1.5em;
    font-size: 1.2em;
    line-height: 1.9em;
    bottom: .4em;
    right: .4em;
  }

  #poradna-review-form .inputs input {
    width: 100%;
  }

  #poradna-review-button {
    float: left;
    margin-left: 0;
    font-weight: 300;
  }

  #danger-answer-accept-button {
    margin-bottom: 2em;
  }

  #poradna-search-form input[type="submit"] {
    height: 1.9em;
    margin-top: .1em;
    padding: 0 .5em;
    font-weight: 300;
    position: absolute;
    right: 1.2em;
  }
}