/******************
    User custom CSS
    ---------------

    In this file you can add your own custom CSS
    It will be loaded last, so you can override any other property.
    Also, it will never be updated. So if you inheritate a core template and just add here some CSS, you'll still benefit of all the updates
*/
/* @import url("https://fonts.googleapis.com/css2?family=Inter&family=Open+Sans:wght@300&display=swap"); */
@import url("https://fonts.googleapis.com/css2?family=Fira+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Material+Icons+Outlined");

* {
  font-family: "Fira Sans", sans-serif;
}
/* Navbar */
.navbar-default {
  background-color: #f2f2f2;
  border-color: #3396d1;
}
/* Navbar dropdowns */
.navbar-default .dropdown-menu {
  background-color: white;
  color: black;
}
.navbar-default .dropdown-menu > li > a,
.navbar-default .dropdown-menu > li > a:focus {
  color: black;
}
.navbar-default .dropdown-menu > li > a:hover,
.navbar-default .dropdown-menu > .active > a,
.navbar-default .dropdown-menu > .active > a:hover {
  background-color: var(--brand-light);
}
/* Question index menu (must be activated to list summary entries), hide it with CSS instead of disabling it. */
.ls-index-menu {
}
@media (max-width: 767px) {
  .navbar-default .navbar-nav .open .dropdown-menu > li > a {
    color: black;
  }
}
@media (max-width: 767px) {
  .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
  .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
    color: black;
    background-color: var(--brand-light);
  }
}

/* Table questions and answers */

table {
  font-size: 14px !important;
}

.ls-answers .ls-heading th {
  text-align: left;
  font-weight: 500 !important;
}

.ls-answers .ls-heading > th {
  vertical-align: top;
}

label,
.control-label,
.help-block,
.checkbox,
.radio {
  font-size: 14px;
}

#outerframeContainer {
  word-wrap: normal;
  -moz-hyphens: none;
  hyphens: none;
}

/* Error message */
.question-valid-container {
  text-align: left;
}

/* Question block */
.bg-primary {
  color: #222222;
  background-color: white;
  font-weight: 700;
}

.question-container {
  margin-bottom: 2em;
  background: white;
  color: #444;
  border-bottom: none;
}

.answer-container {
  /*border-color: #dbdbdb;*/
  border-width: 0px 0px 0px 0px;
  /*border-style: solid;*/
  padding-top: 0.5em;
  padding-bottom: 0.5em;
}

/* Logo */
.logo-container > img {
  max-height: 75px;
  height: 60px;
  padding: 0px;
  width: auto;
}

/* Popover boostrap */
.mytooltip {
  cursor: pointer;
  text-decoration: underline;
  font-weight: bold;
  color: var(--brand-main);
}

.popover {
  z-index: 2001; /* Navbar z-index is at 2000, have popovers go over the navbar. */
  font-size: 13px;
}

.text-info {
  color: #337ab7;
}

.alert {
  font-size: 14px;
  font-weight: 400;
}

.ls-answers {
  padding-top: 5px;
  padding-bottom: 5px;
  margin-bottom: 0;
}

/* Hide message if user input is valid */
.ls-em-success {
  display: none;
}

.ls-em-error {
  font-size: 14px;
}

/* Question help */
.question-help-container {
  border-width: 0px 0px 0px 0px;
  border-style: solid;
  margin-top: 5px;
}

.ls-questionhelp {
  position: relative;
  font-size: 14px;
  font-weight: 500;
}

.nav > li > a {
  color: #243b56 !important;
}
.nav > li > a:hover {
  color: #1559ed !important;
}

.img-responsive {
  height: 75 px;
}
.logo-container {
  padding: 0;
}
.nav > li > a:hover,
.nav > li > a:focus {
  background-color: transparent !important;
}
/* ~ Bootstrap 3 Custom CSS ~ */
/* theme.css overrides */
/* Variables */
:root {
  --view-height: calc(100vh - 60px - 60px);
  --navigator-height: 50px;
  --navbar-height: 60px;
  --progress-bar-height: 10px;
  --brand-main: #0064fa;
  --brand-light: #cbe0ff;
  --brand-light-hover: #0064fad1;
  --brand-dark: #243b56;
  --brand-light-grey: #b7b7b7;
}
/* Question labels */
.ls-label-question {
  font-size: 1.2em;
}
/* Buttons (Submit, previous) */
button[id*="ls-button"] {
  border-radius: 5px;
  border: none;
}
#ls-button-submit {
  background-color: var(--brand-main);
}
#ls-button-submit:hover {
  background-color: var(--brand-light-hover);
}
#ls-button-previous {
  background-color: white;
  border: 1px solid var(--brand-main);
  color: var(--brand-main);
}
#ls-button-previous:hover {
  border-color: var(--brand-light-hover);
  background-color: var(--brand-light);
  color: var(--brand-light-hover);
}
/* Header, Navbar */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Fira Sans", sans-serif;
}
.group-info h1,
.group-content h2 {
  margin-top: 30px;
}
p,
th,
td {
  font-family: "Open Sans";
}
.ls-question-mandatory.text-danger {
  font-family: "Open Sans";
}
.navbar {
  background-color: white;
  border-bottom: 1px solid var(--brand-light-grey);
}
.navbar-title {
  overflow: hidden;
}
.navbar .navbar-toggle {
  border: none;
}
.navbar .navbar-toggle:focus,
.navbar .navbar-toggle:hover {
  border: none;
  background-color: transparent;
}
.navbar .navbar-toggle .icon-bar {
  background-color: lightgray;
}
.navbar-header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.navbar-header .logo-container {
  display: flex;
  align-items: center;
}
.navbar .logo {
  margin-left: 2em;
  margin-right: 1em;
  max-height: 2.5em;
}
.navbar-brand {
  color: black !important;
  display: flex;
  align-items: center;
}
#content-wrapper {
  background-color: white;
}
.top-container {
  margin-top: 0px !important;
}
.space-col {
  margin-top: 0;
  margin-bottom: 0;
}
.left-column::-webkit-scrollbar {
  display: none;
}
/* Intro page */
#title-text {
  margin-bottom: 0.7em;
}
.brand-divider {
  margin-bottom: 20px;
  height: 8px;
  border-radius: 10px;
  background: rgb(0, 100, 250);
  background: linear-gradient(90deg, rgba(0, 100, 250, 1) 0%, rgba(96, 159, 255, 1) 0%, rgba(0, 100, 250, 1) 65%);
}
/* Core questions */
.group-info h1 {
  font-weight: 600;
  padding-bottom: 0.3em;
  font-size: 2em;
}
.group-info .title-underline {
  background-color: var(--brand-main);
  height: 0.6em;
  width: 100%;
  margin-bottom: 20px;
}
.group-content h2 {
  font-weight: 400;
  font-size: 1.5em;
}
.answer-info {
  margin: 1.5em 0 1.5em 0;
}
.answer-info .material-icons-outlined {
  font-size: 1.5em;
  color: var(--brand-main);
}
.answer-info-header {
  display: flex;
  justify-content: start;
  align-items: center;
}
.answer-info-header h2 {
  margin: 0;
  margin-right: 0.5em;
}
.answer-info-outer {
  display: flex;
  align-items: center;
  padding: 1em;
  border-radius: 10px;
  margin-top: 1.5em;
  background-color: var(--brand-light);
  border: 1px solid var(--brand-main);
}
/* Progress Bar */
.top-container {
  position: fixed;
  bottom: 0;
  left: 0;
  height: 10px;
}
.top-container .progress {
  border-radius: 0px;
  padding: 0;
}
.navigator {
  padding-top: 50px;
  padding-bottom: 40px !important;
}

/* Summary page */
.summary-left p {
  font-size: 1.6rem;
}
.summary-navigator .navigator {
  position: fixed !important;
  bottom: 0;
  left: 0;
  width: 100%;
  min-height: 60px;
  background-color: white;
  border-top: 1px solid var(--brand-light-grey);
  padding: 30px 20px !important;
  margin: 0;
}
.summary-entry {
  justify-content: stretch;
  align-items: center;
  display: flex;
  padding: 25px;
  height: 65px;
  width: 100%;
  display: flex;
  border-radius: 5px;
  border: 1px solid var(--brand-light-grey);
  margin-bottom: 1rem;
}
.summary-text-container {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.summary-entry h4 {
  flex: 1 0 1px;
  margin: 0;
  font-size: 2rem;
  font-weight: bold;
}
.summary-right {
  padding-bottom: 110px;
}
.summary-right a {
  display: flex;
  justify-content: center;
  align-items: center;
}
.summary-right a:hover {
  text-decoration: none;
}
.summary-right a:link {
  color: black !important;
}
.summary-right a:visited {
  color: black !important;
}
.summary-entries-header {
  font-size: 1em;
}
.summary-warning {
  background-color: lightcoral;
}
.summary-answered {
  background-color: #beffd78c;
  border: 1px solid #00ac7898;
}
.cg {
  z-index: 100;
}
/* End summary*/
/*BEGIN help tooltip */
.info-icon {
  cursor: pointer;
  display: block;
}
/* END help tooltip */
.hidden-help {
  display: none;
}
/* Progress bar */
.progress-bar {
  background-color: var(--brand-main);
}