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

* {
    margin: 0;
    padding: 0;
}
/* Prevent breaking inside words */
.ls-answers,
.ls-questionhelp,
.ls-question-text,
.ls-answers td,
.ls-answers th {
  word-break: normal !important;       /* default word breaking */
  overflow-wrap: normal !important;    /* do not break words arbitrarily */
  hyphens: none !important;            /* disable automatic hyphenation */
}
.ls-answers th {
    vertical-align:top !important;
}
.ls-answers th:last-child {
    /*vertical-align:middle !important;*/
    padding-top:48px !important;
}
body {
    min-height: 100vh;
    /*max-width:960px;*/
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    padding: 0 !important;
    font-family: "Noto Sans Display", "Noto Sans", "Arial", "Helvetica Neue", "Helvetica", sans-serif!important;
    background-color: #fafafa;
}
header{
    background-color: white;
}
.table > :not(caption) > * > * {
    padding: 1rem 0.5rem;
}
.container {
    margin:0;
}
 .lang-footer { display: none; }
  .lang-footer.active { display: inline; }
  .lang-title { display: none; }
  .lang-title.active { display: inline; }
  
  .berent-logo {
    width:20px !important;    
    height: 20px !important;
    margin-top:0 !important;
  }
  
.welcome-container{
    font-family: "Arial", sans-serif!important;
    
}
#welcome-container{
    max-width:inherit !important;
}
.ls-label-question span{
    font-size:1.4rem !important;
    font-family: "Arial", sans-serif;
    font-weight:500;
}

#survey-nav.navbar{
    display:none !important;
}
.survey-name{
    display:none;
}
.custom-header {
    display: flex;
    justify-content: space-between;
    text-align: center;
    /*align-items: center;*/
    /*width: 100vw;*/
    /*margin: 0 auto;*/
   
    font-size: 30px;
}
.logo{
    padding-left: 20px;
    padding-right:10px;
    padding-top:15px;
}
.logo img{
    max-width:100px;
}
.header-p {
    margin-right: 0;
    padding-right: 20px;
    padding-left:10px;
    padding-top: 13px;
    letter-spacing: 0.05em;
    line-height:30px!important;
}
.status{
   display: flex;
   margin-top: -20px;
   flex-wrap: wrap;
   /*float: left!important;*/
   font-size: 12px!important;
   width:100%;
   /*width: inherit;*/
   margin-bottom: 1rem;
    }
.status h4{
    font-size: 12px!important;
    line-height:21px;
    margin-top: 0!important;
    margin-bottom: 0!important;
}    
.word-nameC{
  display: inline-block;
  border-radius: 10px;
  background-color: rgba(25, 67, 151, 0.8);
  color: #fff;      
  padding: 1px 3px;
  min-height:22px;
  margin-bottom: 0.5rem!important;
}
.word-name{
  display: inline-block;
  border-radius: 10px;
  /*border: 1px solid rgba(75, 75, 75, 0.4);*/
  background-color: #f4f1f1;     
  padding: 1px 3px;
  min-height:22px;
  margin-bottom: 0.5rem!important;
}
.status-block{
    display: flex;
    flex-wrap: wrap;
    margin-left:1rem;
    /*justify-content:center;*/
}
.block-name, .block-nameC, .block-nameS{
  width:fit-content;
  min-height:22px;
  height:auto;
  /*line-height:20px;*/
  text-align: center;
  display: inline-block;
  border-radius: 10px;
  background-color: #f4f1f1;
  margin: 0 5px;
  padding: 0 3px;
  margin-bottom: 0.5rem!important;
}
.block-name{
  /*border: 1px solid rgba(75, 75, 75, 0.4);*/
}
.block-nameS{
  background: rgba(25, 67, 151, 0.8); 
  background: linear-gradient(90deg, rgba(0, 90, 199, 0.5) 0%, rgba(244,241,241,1) 16%);
}
.block-nameC{
  background-color: rgba(25, 67, 151, 0.8);
  color: #fff;      
}
article {
    flex: 1;
    margin-bottom: 50px;
    font-family: "Arial", sans-serif!important;
}

a {
   font-size: 16px;
   /*color: #0059c6;*/
   color: #4668AB;
   font-weight: 400;
   text-decoration: none;
   cursor: pointer;
}

a:hover,
a:active {
   text-decoration: underline;
   text-decoration-color: #387BE4!important;
   text-decoration-thickness: 1px;
   text-underline-offset: 4px;
   color: #387BE4!important;;
}

/*removes asterisk for mandatory questions*/
.asterisk.ri-asterisk::before {
  display: none !important;
}

/*changes checkbox colors*/
.checkbox-item input[type="checkbox"]:checked + label::after, .checkbox-item input[type="radio"]:checked + label::after {
        color: rgba(25, 67, 151, 0.8);
}

.checkbox-item input[type=checkbox]:checked + label {
    color:rgba(25, 67, 151, 0.8);
}

/* Checked state */
.checkbox-item input[type="checkbox"]:checked + label::before {
  border-color: rgba(25, 67, 151, 0.8);
}

/*changes radio button's colors*/
.radio-item input[type="radio"]:checked + label {
     color: rgba(25, 67, 151, 0.8);
}
    
.radio-item input[type="radio"]:checked + label::before {
    border-color: rgba(25, 67, 151, 0.8);
    color: rgba(25, 67, 151, 0.8);
}

.radio-item input[type="radio"]:checked + label::after {
  background-color: rgba(25, 67, 151, 0.8);
}

.custom-footer {
    background-color: #EFEFEF;
    width: 100%;
    color: #333;
  font-size: 0.9em;
  min-height: 330px;
}

.footer-container{
  display: flex;
  justify-content: space-between;
  margin: 0;
  padding:0;
  border:0;
  clear:both;
  width: 100%;
}

.custom-footer a {
   color: #4b4b4b;
   text-decoration: none;
   cursor: pointer;
   background-color: transparent;
}

.custom-footer a:hover,
.custom-footer a:active {
   text-decoration: none;
   outline: 0px;
   color: #000000;
}

.berent-footer {
   margin-right: auto;
   margin-left: auto;
   display: flex;
   align-content: stretch;
   flex-wrap: wrap;
   justify-content: space-between;
   padding: 1rem 12px;
   margin: 0px auto;
   color: rgb(75, 75, 75);
}

.berent-footer_text {
   display: block;
   max-width: 250px;
   margin-bottom:2rem;
}

.berent-footer_wipologo {
   display: inline;
   /*width: 183px;*/
   /*height: 128px;*/
   padding-bottom:1rem;
   margin-right:0;
}

.berent-footer_wipologo img {
   max-height: 128px;
   opacity: 0.4;
}

.berent-footer_terms {
   display: flex;
  justify-content: space-between;
  align-content: stretch;
  margin: 0;
  padding:0;
  padding-top:1rem;
  border:0;
  clear:both;
  width: 100%;
   border-top: 1px solid rgb(210, 210, 210);
   color: rgb(75, 75, 75);
}

/*adjusts color's of the table rows*/
tr:not(.ls-heading):nth-child(even) {
    background-color: #EFEFEF;
}

tr:not(.ls-heading):nth-child(odd) {
    background-color: #ffffff;
}

#ls-button-submit {
 margin-top: -150px; /* Adjust padding based on footer height */
 background-color: rgba(25, 67, 151, 0.8);
 border: none;
 color: #FFFFFF;
 padding-left: 20px;
 padding-right: 20px;
 /*width: 95px;*/
 border-radius: 25px;
}

#ls-button-submit:hover {
   box-shadow: inset 0 2px 4px -2px black;
   background-color: #0059C6;
}

#ls-button-previous {
    margin-top: -150px;
    background-color: rgba(25, 67, 151, 0.8);
    border: none;
    color: #FFFFFF;
    padding-left: 20px;
    padding-right: 20px;
    /*width: 95px;*/
    border-radius: 25px;
}

#ls-button-previous:hover {
    box-shadow: inset 0 2px 4px -2px black;
    background-color: #0059C6;
}

/*changes slider colors*/
.slider-list .slider .slider-handle {
    background-color: #387BE4;
    background-image: unset;
}

.slider-track,
.slider-track-low,
.slider-track-high,
.slider-selection {
  background-color: #194397 !important;
}

/*ranking question styling*/
.ranking-advanced-style .sortable-rank {
    margin-top: 10px;
    border: 1px solid #6D6E6E;
}

.list-group-item{
    border: 1px solid #EFEFEF;
    background-color: #F5F9FF;
    margin-top: 10px;
    color: #6D6E6E;
}

/*calculation questions stylin*/
.has-error .form-control, .input-error .form-control {
    box-shadow: 4px 4px 0 #194397;
}

.form-control:focus,
.form-control:active {
    box-shadow: 4px 4px 0 #387BE4!important;
}
.form-control{
    font-size:16px;
}
.success-border {
    border-color: #387BE4;
}
.numeric-multi .ls-group-total .control-label {
    color: black;
}

.ls-group-total-separator {
    display:none;
}


.suffix-text {
    width: 25%;
}
@media (max-width: 1199.9px) {
    .berent-footer {
        margin:0;
        width:100%;
    }
}

@media (max-width: 768px) {
    .custom-header{
        font-size:20px;
    }
    .logo{
    padding-left: 10px;
}
.header-p {
    padding-right: 10px;
}
   .footer-container {
        flex-direction: column;
        align-items: left; 
        text-align: left; 
    }

    .berent-logo {
    /*height: 30px!important;*/
    /*width: 30px!important;*/
    margin-top: 15px;
}
}