/**
*
* All styling to create the mobile layout of mopat
* with a fixed header, fixed footer and content that
* is using the remaining space
*
**/
/**
*
* Defines all colors that are used in MoPats less sheets
*
**/
/**
* This file contains color definition based on the material 
* design specification for color palettes
**/
/* Grayscales (from Bootstrap) */
/**
*
* Some variable values that will be repeated
* for MoPats views
* This file can be used as a central hub to change 
* many settings at once without touching the less files
*
**/
/**
*
* Sizes for the mopat web application
*
**/
body {
  background-color: #f5f5f5;
  color: #3e3e3b;
}
.flex-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
@media only screen and (min-width: 768px) {
  .d-bp-block {
    display: block !important;
  }
}
@media only screen and (min-width: 768px) {
  .d-bp-flex {
    display: flex !important;
  }
}
@media only screen and (min-width: 768px) {
  .d-bp-none {
    display: none !important;
  }
}
@media only screen and (min-width: 768px) {
  .col-bp-12 {
    flex: 0 0 auto;
    width: 100%;
  }
}
@media only screen and (min-width: 768px) {
  .col-bp-11 {
    flex: 0 0 auto;
    width: 91.66666667%;
  }
}
@media only screen and (min-width: 768px) {
  .col-bp-10 {
    flex: 0 0 auto;
    width: 83.33333333%;
  }
}
@media only screen and (min-width: 768px) {
  .col-bp-9 {
    flex: 0 0 auto;
    width: 75%;
  }
}
@media only screen and (min-width: 768px) {
  .col-bp-8 {
    flex: 0 0 auto;
    width: 66.66666667%;
  }
}
@media only screen and (min-width: 768px) {
  .col-bp-7 {
    flex: 0 0 auto;
    width: 58.33333333%;
  }
}
@media only screen and (min-width: 768px) {
  .col-bp-6 {
    flex: 0 0 auto;
    width: 50%;
  }
}
@media only screen and (min-width: 768px) {
  .col-bp-5 {
    flex: 0 0 auto;
    width: 41.66666667%;
  }
}
@media only screen and (min-width: 768px) {
  .col-bp-4 {
    flex: 0 0 auto;
    width: 33.33333333%;
  }
}
@media only screen and (min-width: 768px) {
  .col-bp-3 {
    flex: 0 0 auto;
    width: 25%;
  }
}
@media only screen and (min-width: 768px) {
  .col-bp-2 {
    flex: 0 0 auto;
    width: 16.66666667%;
  }
}
@media only screen and (min-width: 768px) {
  .col-bp-1 {
    flex: 0 0 auto;
    width: 8.33333333%;
  }
}
.header {
  width: 100%;
}
@media only screen and (max-width: 768px) {
  .header {
    padding-top: 5px;
  }
}
@media only screen and (min-width: 768px) {
  .header {
    padding-top: 10px;
  }
}
.header.login-header {
  background-color: transparent !important;
  border: 0 !important;
  border-color: transparent !important;
}
.header.login-header > * {
  border: 0 !important;
  border-color: transparent !important;
}
.bi-list {
  color: #254c7e;
  font-size: 2rem;
}
.stickyHeader {
  position: sticky;
  top: 0;
  background-color: #f5f5f5;
  transition: 0.25s ease-in-out;
  z-index: 1;
}
.stickyHeader.active {
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}
#scrollQuestionTitle {
  position: absolute;
  margin-top: -50px;
  visibility: hidden;
  opacity: 0;
  background-color: #f5f5f5;
  transition: all 0.25s ease-in-out;
  overflow: hidden;
}
#scrollQuestionTitle.auto-height {
  height: auto;
}
#scrollQuestionTitle.no-height {
  height: 0;
}
#scrollQuestionTitle.active {
  margin-top: 0px;
  visibility: visible;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
  opacity: 1;
  overflow: visible;
  height: auto;
}
#scrollQuestionTitle.transition {
  visibility: hidden !important;
  opacity: 0 !important;
}
@media only screen and (max-width: 768px) {
  .navbar-logo {
    height: 60px;
  }
}
@media only screen and (min-width: 768px) {
  .navbar-logo {
    height: 70px;
  }
}
.offcanvas-body a,
.offcanvas-body span {
  color: #3e3e3b;
}
.offcanvas-body a {
  text-align: left;
  padding-top: 10px;
  padding-bottom: 10px;
}
.offcanvas-body a:hover {
  background-color: #eeeeee;
}
.offcanvas-body a.accountLink,
.offcanvas-body ab {
  font-size: 1.4rem;
  padding-top: 20px;
  padding-bottom: 20px;
  border-bottom: solid 0.05rem;
  border-color: #dddddd;
}
.offcanvas-body .link {
  text-decoration: none !important;
}
.offcanvas-body .smallLink {
  font-size: 0.8rem !important;
}
.offcanvas-body .borderBottom {
  border-bottom: solid 0.05rem;
  border-color: #dddddd;
}
.offcanvas-body .borderTop {
  border-top: solid 0.05rem;
  border-color: #dddddd;
}
.titleHeader {
  border-bottom: solid 1px;
  border-color: #dddddd;
  padding-bottom: .25em;
  margin-bottom: 1em;
}
.titleHeader.login-header {
  display: none !important;
}
.titleContent {
  font-weight: 700;
}
@media only screen and (max-width: 768px) {
  .titleContent {
    font-size: 140%;
  }
}
@media only screen and (min-width: 768px) {
  .titleContent {
    font-size: 170%;
  }
}
.questionnaireTitle {
  font-weight: 700;
  text-align: center;
  color: #377cbf;
}
@media only screen and (max-width: 768px) {
  .questionnaireTitle {
    font-size: 120%;
  }
}
@media only screen and (min-width: 768px) {
  .questionnaireTitle {
    font-size: 140%;
  }
}
.layoutContainer {
  margin: 10px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
@media only screen and (min-width: 768px) {
  .layoutContainer {
    margin-right: 65px !important;
    margin-bottom: 20px;
  }
}
.loginContainer {
  box-shadow: 0 !important;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
.content {
  padding-top: 20px;
  flex-grow: 1;
  background-color: #ffffff;
  border-radius: 10px 10px 0 0;
  border-bottom: solid 1px;
  border-color: #dddddd;
}
@media only screen and (max-width: 768px) {
  .content .mainPage {
    margin-left: auto;
    margin-right: auto;
  }
}
.centeredContent {
  margin-top: auto;
  margin-bottom: auto;
}
.scrollArrowContainer {
  display: none;
  position: fixed;
  padding: 20px;
  transform: translate(-50%, -50%);
}
@media only screen and (max-width: 768px) {
  .scrollArrowContainer {
    bottom: -1em;
    right: -1em;
  }
}
@media only screen and (min-width: 768px) {
  .scrollArrowContainer {
    bottom: -1em;
    right: 1em;
  }
}
.scrollArrowContainer span {
  display: block;
  border-bottom: 5px solid #254c7e;
  border-right: 5px solid #254c7e;
  transform: rotate(45deg);
}
@media only screen and (max-width: 768px) {
  .scrollArrowContainer span {
    width: 1em;
    height: 1em;
    margin: -5px;
  }
}
@media only screen and (min-width: 768px) {
  .scrollArrowContainer span {
    width: 1.5em;
    height: 1.5em;
    margin: -10px;
  }
}
.scrollArrowContainer span:nth-child(2) {
  animation-delay: -0.2s;
}
.scrollArrowContainer span:nth-child(3) {
  animation-delay: -0.4s;
}
.scrollArrowContainer.show {
  display: block !important;
}
.scrollArrowContainer.show span {
  animation: animate 2s infinite;
}
@keyframes animate {
  0% {
    transform: rotate(45deg) translate(-10px, -10px);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: rotate(45deg) translate(10px, 10px);
    opacity: 0;
  }
}
.shadowIndicator {
  bottom: 0;
  left: 0;
  pointer-events: none;
  position: fixed;
  right: 0;
  top: 0;
  transition: all 0.2s ease-out;
  z-index: 1000;
}
.shadowIndicator.off-top {
  box-shadow: 0 1em 1em -1em #000000 inset;
}
.shadowIndicator.off-bottom {
  box-shadow: 0 -2em 2em -1.5em #000000 inset;
}
/* Inserting this collapsed row between two flex items will make 
 * the flex item that comes after it break to a new row */
.break {
  flex-basis: 100%;
  height: 0;
}
.footer {
  background-color: #ffffff !important;
  width: 100%;
  border: 0px !important;
  border-radius: 0 0 10px 10px;
}
.footer .loginFooter {
  background: #f5f5f5 !important;
  border-radius: 0;
}
.bottom-footer {
  border-radius: 0 0 10px 10px;
}
.bottom-footer .footer-text {
  font-weight: 700;
  text-align: center;
}
@media only screen and (min-width: 768px) {
  .bottom-footer .footer-text {
    font-size: 1.0rem;
  }
}
@media only screen and (max-width: 768px) {
  .bottom-footer .footer-text {
    font-size: 0.75rem;
    text-align: center !important;
  }
}
@media only screen and (min-width: 768px) {
  .bottom-footer .footer-bar {
    width: 100%;
  }
}
.bottom-footer .footer-bar #mopatImageFooter,
.bottom-footer .footer-bar #logoImageFooter {
  height: 60px;
}
.bottom-footer .mopat-logo,
.bottom-footer .klinik-logo {
  width: 25vw;
}
.bottom-footer #mopatImageFooter,
.bottom-footer #logoImageFooter {
  height: 40px;
}
.bottom-footer .flex {
  gap: 10px;
  margin: 5px 0px;
}
@media only screen and (min-width: 768px) {
  .bottom-footer .flex {
    width: 290px;
  }
}
@media only screen and (max-width: 768px) {
  .bottom-footer .flex {
    width: 220px;
  }
}
.bottom-footer .footer-bar {
  gap: 20px;
}
@media only screen and (min-width: 768px) {
  .imageFooter {
    padding-right: 65px !important;
  }
}
/* These settings are used to adjust the locale select element size to it's content */
/* Use the same sizes for the temporary select element as the localeChanger */
#localeChanger {
  transition: 0s;
}
#widthTmpSelect {
  display: none;
}
@media only screen and (max-width: 768px) {
  #widthTmpSelect {
    padding: 5px;
    font-weight: 700;
    font-size: 100%;
  }
}
@media only screen and (min-width: 768px) {
  #widthTmpSelect {
    padding: 10px;
    font-weight: 700;
    font-size: 120%;
  }
}
@media only screen and (max-width: 768px) {
  .form-group {
    padding-top: 5px;
    padding-bottom: 5px;
    font-weight: 500;
    font-size: 100%;
  }
}
@media only screen and (min-width: 768px) {
  .form-group {
    padding-top: 10px;
    padding-bottom: 10px;
    font-weight: 700;
    font-size: 120%;
  }
}