/******************
    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=Karla&display=swap');

body, html, h1, h2, h3, h4, h5, h6, p, label, input, button, select, textarea {
  font-family: 'Karla', sans-serif !important;
}

html {
    margin: 0;
    padding: 0;
}

body {
    padding: 0;
    margin: 0;
    font-size: 1.6em;
    background-color:#FCF7F4;
}
article {
    display: -ms-flexbox;
    -ms-flex-direction: column;
}
img { -ms-interpolation-mode: bicubic; }
#dynamicReloadContainer {
    margin: 0;
    padding: 0;
    min-height: calc(100vh - 2px);
    display: -webkit-flex;
    display: flex;
    flex-direction: column;
}
#outerframeContainer{
    -webkit-flex: 1 0 auto;
	flex: 1 0 auto;
	min-height: 0;
}

@media (min-width: 768px) {
    .w2-small-button {
        width: 9.09% !important;
    }
}

.forward {
    margin-top: 80px;
}


.modal-title {
    padding-bottom: 0;
}

.col-sm-12 {
    padding-left: 7px;
    padding-right: 7px;
}

.no-margin {
    margin: 0;
}

.no-padding {
    padding: 0;
}

.bootstrap-buttons-div {
    padding: 0 4px;
}

.height-full {
  height: 100%;
}

.spital-logo {
    width: 226px;
}

.form-control {
    color: #333;
}

.title {
    font-size: 1.5em;
    font-weight: bold;
    color: #fff;
    margin: 15px 0;
}

.completed-text   {
    font-size: 1.5em;
    color: #001f47;
    font-weight: bold;
    text-align: center;
    line-height: normal;
    padding: 2em 0 3.2em 0;
}

.title-row {
    background-color: #001f47;
}

.header-message {
    margin-bottom: 20px;
}
.question-container {
    border: none;
    border-bottom: 1px solid #001f47;
    background-color: #fff;
    margin: 5px 0;
    padding: 7px 7px 12px 7px;
}
.question-title-container {
    padding-top: .5em;
    padding-bottom: .5em;
}
.ls-question-text {
  background-color: #6AA4AE;
  color: white; 
  padding-top: 0em !important;
  padding-bottom: 0em !important;
  border-bottom: none !important;
  height: 40px;
  padding-right:20px !important;
}
.even {
    background-color: #dde9f6;
}

.btn {
    white-space:normal;
}

.ls-answers label {
    font-weight: bold;
}

.btn-primary {
    background-color: #001f47;
    border-color: #001f47;
}

.btn-primary:hover, .btn-primary.active:focus {
    color: #fff;
    background-color: #324a6a;    
    border-color: #324a6a;    
}

.btn-primary.active:hover, .btn-primary.active {
    color: #fff;
    background-color: #6AA4AE !important;
    border-color: transparent  !important;
}

.btn-info {
   background-color: #1d5a84;
   border-color: #1d5a84;
}
.btn-info:hover {
    color: #fff;
    background-color: #839ba8;
    border-color: #839ba8;
}


.no-answer {
    color: #286090;
    background-color: #fff;
    font-style: italic;
    font-weight: 200;
}

label {
    margin: 3px 0;
}

h4 {
  background-color: #001f47 !important;
  color: white !important;
  font-weight: bold;
  height: 42px;
  margin: 0 !important;
  padding: 0 20px !important;
  line-height: 42px !important;
  display: block !important;
  text-align: left;
  vertical-align: middle !important;
  border: none !important;
  font-size: 18px;
}

#main-col {
    margin-top: 0;
}

.outerframe {
    background-color: #fff;
    padding-top: 10px;
}

.survey-welcome{
    padding: 5px;
}



.question-count-text {
    padding: 10px 0;
}


.navbar-default {
    border: none;
    background-color: #FCF7F4;
    margin-bottom:0;
    min-height: 0;
}
.progress {
    height: 1.9rem;             
    margin-top: 2rem;          
    border-radius: 0.5rem;     
}
.progress-bar {
    background-color: #6AA4AE;
    font-weight: bold;          
    font-size: 1.2rem; 
}



.nopadding {
   padding: 0;
   margin: 0;
}

#footer {
    background-color: #001f47;
    color: #fff;
    line-height: 55px;
}

#footer a {
    color: #fff;
    text-decoration: underline;
}

.modal h1 {
  font-size: 2em;   
}
.modal h2 {
  font-size: 1.2em;   
}

.modal-dialog {
  vertical-align: top;
}

.no-answer-warning {
    border: 1px solid red;
}

.error {
    font-size: 1em;
}

/******************
    Error Page
*/
#block_error {
    width: auto;
    height: auto;
    min-height: 350px;
}
#block_error div {
    padding: 10px;
    background-color: rgba(255, 255, 255, 0.6);
}
#block_error div h2.noborder {
    border: none;
}

.ls-label-question {
    padding-bottom: 0px;   
}

@media (min-width: 768px) {
    .no-answer-offset {
        margin-left: 83.33333%;
    }

    .form-lang { text-align:right; }
    
    #block_error div {
        padding: 40px 50px 40px 180px;
        background: none;
    }
    
    .question-container {
        padding: 7px;
    }
    
    .ls-label-question {
        padding-bottom: 0px;   
    }
    
    .completed-text   {
        padding-top: 3em;
    }

}

.bootstrap-buttons-div label {
    font-size: 0.96em;
}

.button-link {
    color: #fff;
    padding: 5px 18px 8px;
    background-color: #337ab7;
    border-color: #2e6da4;
    font-weight: normal;
    margin: 0px;
    font-style: normal;
    border-radius: 10px;
}
#ls-button-previous {
    background-color: #CCD3DE; 
    color: #001F47; 
    border: none; 
}

#ls-button-previous:hover {
    background-color: #B3BBC9; 
}
.btn-secondary {
    background-color: #CCD3DE;
    color: #001F47;
    border: none;
}

.btn-secondary:hover {
    background-color: #B3BBC9;
}
.button-link:hover {
   color: #fff;
   background-color: rgb(175 ,193, 143);
   border-color: rgb(175 ,193, 143);
   text-decoration: none;
}




@media (min-width: 992px) {
.container-fluid {
    width: 970px;
    padding-right: 10px;
    padding-left: 10px;
}
}

@media (min-width: 1200px) {
.container-fluid {
    width: 1170px;
    padding-right: 15px;
    padding-left: 15px;
}
}

/* addition 16.10.2024 */
/* for measure 723929 */

@media (min-width: 992px) {
    .container-fluid.stretch {
        width: 100%;
    }
}

div.bootstrap-buttons-div.col-xs-12.col-sm-2 > div.button-item.btn.btn-primary.col-xs-12.col-sm-12 {
    display: flex;
    justify-content: center;
    align-items: center;
}
@media (max-width: 767px) {
  h4 {
    font-size: 1.1em !important;
    line-height: 1.4 !important;
    padding: 10px 12px !important;
    height: auto !important;       /* Let height grow naturally */
    white-space: normal !important; /* Allow wrapping */
    word-break: break-word;         /* Allow word breaking if needed */
  }
}




/* MOBILE: allow wrapping, keep alignment, minimum 45px feel */
@media (max-width: 767px) {
  h4 {
    height: auto;
    min-height: 43px;
    line-height: 1.25;
    padding: 8px 20px !important;   /* comfy vertical padding */
    margin: 0 !important;
    white-space: normal;            /* allow wrapping */
    word-break: break-word;
  }

  .ls-question-text {
    display: block;                 /* simpler with multi-line */
    height: auto;
    min-height: 43px;               /* keeps the bar feel */
    line-height: 1.25;
    box-sizing: border-box;
    white-space: normal;
    word-break: break-word;
  }
}
.ls-question-text {
    position: sticky;
    top: 0px;        /* space below the dark blue header */
    z-index: 800;     /* slightly below the dark blue */
}

/* Remove the overflow that breaks sticky */
.group-container,
.question-container,
.question-title-container,
.question-text {
    overflow: visible !important;
}