/******************
    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;
}

/* 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 {
  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;
}
/* 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 lightgray;
}
.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;
}
/* 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 black;
  padding: 30px 20px !important;
  margin: 0;
}
.summary-entry {
  justify-content: stretch;
  align-items: center;
  display: flex;
  padding: 30px;
  height: 80px;
  width: 100%;
  display: flex;
  border-radius: 5px;
  border: 1px solid var(--brand-dark);
  margin-bottom: 1rem;
}
.summary-entry:hover {
  background-color: #cee2ff71;
}
.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 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);
}