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

  .table-bordered > thead > tr > th {
    border: 1px solid #dadada;
  }
  .table-bordered > thead > tr > td {
    border: 1px solid #dadada;
  }
  
  .logo-container > img {
    max-height: 70px;
  }
  
  .bg-light{ /*background of header*/
      background-color: #ffffff !important;
  }
  
  /* class for displaying the survey title */
  .survey-title{
      border: 0 !important;
      text-align: center;
  }
  
  /* for agentur-nps or other surveys with a lot of 5* questions in a row */
.narrowbox{
    margin-bottom: 5px !important;
}

  /* for agentur-nps or other surveys with a lot of 5* questions in a row */
.narrowbox div{
    margin-bottom: 0 !important;
}

.narrowbox .question-title-container{
    padding-top:0 !important;
    padding-bottom:0 !important;
}

  .question-container, .group-description { /*background and frame of individual questions*/
     margin-bottom: 20px;
     border: 1px solid #CAD4DE;
     border-radius: 4px;
     background-color: #fff;
  }
  
  .text-danger {/*pflichtfrage asterisk*/
    color: #a94442 !important;
    top: 0;
  }
  
  /* ausfuellhilfe */
  .text-info {
    color: #767676 !important;
    font-size: 14px;
    line-height: 20px;
  }
 
  .star-1, .star-2, .star-3, .star-4, .star-5{
     color: #868686 !important;
 }
 
 /* star design gold w blue outline*/ 
 .star-1.star-rated-on:not(.star-stub),  .star-2.star-rated-on:not(.star-stub), .star-3.star-rated-on:not(.star-stub), .star-4.star-rated-on:not(.star-stub), .star-5.star-rated-on:not(.star-stub),
 .star-1.star-drained, .star-1.star-drained.star-hover, .star-2.star-drained, .star-2.star-drained.star-hover, .star-3.star-drained, .star-3.star-drained.star-hover, .star-4.star-drained,
 .star-4.star-drained.star-hover, .star-5.star-drained, .star-5.star-drained.star-hover{
    /*color: #004A94 !important;
    text-shadow: 0 0 5px lightblue;*/
    color: gold !important;
    -webkit-text-stroke: 2px #004A94;
    padding-left: 2px;
 }
 
 
 .answer-container { /* little more space between the 5* and the bottom of the question box */
     margin-bottom: 10px;
 }
 
 /* radio buttion general design*/
 .radio-item label::before {
    border: 2px solid #007AB3;
    background-color: #FFF;
    width: 24px;
    height: 24px;
  }
    
  .radio-item label::after {
      border: 1px solid #007AB3;
      background-color: #007AB3;
      width: 8px;
      height: 8px;
      left: 8px;
      top: 8px;
  }
 
 .radio-item label {
    color: #414141;
    font-family: 'AZNeoRegular', sans-serif;
    padding-left: 15px; /*space between radio button and label*/
}

 /* Tablet */
@media (min-width: 704px) and (max-width: 991px) {

    .container, .top-container {
        padding-left: 32px;
        padding-right: 32px;
    }
f
    .container-fluid {
        padding: 0;
    }

    h1, .h1 {
        /*font-size: 40px;*/
        letter-spacing: 0.3px;
        line-height: 48px;
    }

    h2, .h2 {
        font-size: 35px;
        letter-spacing: 0.3px;
        line-height: 40px;
    }

    h3, .h3 {
        font-size: 26px;
        letter-spacing: 0.3px;
        line-height: 32px;
    }

    h4, .h4 {
        font-size: 24px;
        letter-spacing: 0.2px;
        line-height: 32px;
    }

    h5, .h5 {
        font-size: 20px;
        letter-spacing: 0.2px;
        line-height: 28px;
    }

    h6, .h6 {
        font-size: 18px;
        letter-spacing: 0.2px;
        line-height: 28px;
    }

    .navbar {
        padding-left: 32px;
        padding-right: 32px;
    }

    .navbar ul {
        padding: 0;
        margin-top: 5px;
    }

    .navbar-header {
        padding: 0 30px;
    }

    .navbar.navbar-default {
        padding: 0;
    }

    .navbar-collapse {
        padding: 0 30px;
    }
}

/* Desktop */
@media only screen and (min-width: 992px) {

    .container-fluid {
        max-width: 1184px;
        padding: 0;
    }

    .container,
    .top-container {
        max-width: 1184px;
        padding-left: 32px;
        padding-right: 32px;
        margin-left: auto;
        margin-right: auto;
    }

    h1, .h1 {
        /*font-size: 54px;*/
        letter-spacing: 0.3px;
        line-height: 60px;
    }

    h2, .h2 {
        font-size: 40px;
        letter-spacing: 0.3px;
        line-height: 48px;
    }

    h3, .h3 {
        font-size: 30px;
        letter-spacing: 0.3px;
        line-height: 36px;
    }

    h4, .h4 {
        font-size: 26px;
        letter-spacing: 0.3px;
        line-height: 32px;
    }

    h5, .h5 {
        font-size: 24px;
        letter-spacing: 0.2px;
        line-height: 32px;
    }

    h6, .h6 {
        font-size: 20px;
        letter-spacing: 0.2px;
        line-height: 28px;
    }
}

/* unset bootstrap setting */
@media (min-width: 768px) {
    .container-md {
        width: 100%;
        max-width: 1184px;
    }
}

  /* general: buttons (weiter/absenden)*/

  .btn-primary {
      color: #fff;
      background-color: #337ab7;
      border-color: #2e6da4
  }

  .btn-primary.focus,.btn-primary:focus {
      color: #fff;
      background-color: #286090;
      border-color: #122b40
  }

  .btn-primary:hover {
      color: #fff;
      background-color: #286090;
      border-color: #204d74
  }

/* footer block */
  #footer {
    border-top: 1px solid #d9d9d9;
    padding: 10px;
  }
  
  #footer a,
  #footer a:hover,
  #footer a:focus {
    color: #414141;
    padding-right: 20px;
    cursor: pointer;
  }

/*inps specific: 11point radio*/
.question-container .table .radio-item label {
    min-width: 24px;
    height: 24px;
    margin-left: -28px;
    margin-top: 5px;
}

tbody,td,tfoot,th,thead,tr {
    border:none !important;
}

/* fro inps: design progress bar*/
.progress .progress-bar {
    background-color: #49648C;
}

.top-container .progress {
    background-color: #CAD4DE !important;
}

/* stop logo from disappearing on mobile*/
@media (min-width: 350px) {
    .d-md-block {
        display: block !important;
    }
}

/* for welcome message */
.text-primary{
    color: #000 !important;
}
.hightlighted-question{
    border: 3px solid #337ab7;
}

/* for syth: display radio buttons in 2 columns */
.radio2columns ul{
    columns: 2;
}