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

/* Column widths in feedback array */
.question-container.array-feedback table colgroup.col-responses col.col-answers {
  width: 40% !important; /* 1st column (row text) */
}
.question-container.array-feedback table colgroup.col-responses col:nth-of-type(2) {
  width: 10% !important; /* 2nd column */
}
.question-container.array-feedback table colgroup.col-responses col:nth-of-type(3) {
  width: 10% !important; /* 3rd column */
}
.question-container.array-feedback table colgroup.col-responses col:nth-of-type(4) {
  width: 40% !important; /* 4th column (feedback) */
}

/* Left-align answer texts in arrays */
.custom-header-left,
.answertext {
    text-align: left !important;
    padding-left: 10px !important;
    vertical-align: top !important;
}

/* Left-align feedback texts */
.question-container.array-feedback tbody td:nth-child(4) {
    text-align: left !important;
    padding-left: 10px !important;
    vertical-align: top !important;
    font-style: italic;
}

/* Remove border around questions */
.question-container {
	border: none !important;
	box-shadow: none !important;
}

/* Hide questions until JS finishes  */
.question-container.is-pending {
  visibility: hidden;
}

/* Hide question titles  */
.question-title-container {
  display: none !important;
}

/* Centered chart */
.chart-container {
  display: flex;
  justify-content: center;
  margin: 20px auto;
}

/* Image tables (stolen from https://css-tricks.com/making-tables-responsive-with-minimal-css/) */
.img-table {
    border-collapse: collapse;
    text-align: left;
    width: 100%;
}

.img-table tr {
    background: white;
    border-bottom: 1px solid
}

.img-table th, .img-table td {
    padding: 5px 10px;
    font-size: 10px;
}

.img-table td span {
    background: #eee;
    color: dimgrey;
    display: none;
    font-size: 8px;
    font-weight: bold;
    padding: 5px;
    position: absolute;
    text-transform: uppercase;
    top: 0;
    left: 0;
}

/* Logo size */
.logo-container > img {
	max-height: 60px !important;
}

/* Font color / size */
.survey-welcome.h4.text-primary {
    color: #000000 !important;
    font-size: 16px !important;
    font-weight: normal !important;
}

.completed-text {
    color: #000000 !important;
    font-size: 16px !important;
    font-weight: normal !important;
}

.group-description {
    color: #000000 !important;
    font-size: 16px !important;
    font-weigth: normal !important;
}

.control-label {
    color: #000000 !important;
}

/* Link color */
.fruity a {
    color: #6EBEE6 !important;
}

.fruity a:hover {
    color: #6EBEE6 !important;
    text-decoration: underline !important;
}

/* Button color */
.btn-default, .btn-info, .btn-primary {
    background-color: #6EBEE6 !important;
    border-color: #3895BE !important;
    color: #ffffff !important;
}

.btn-default:hover, .btn-info:hover, .btn-primary:hover {
    background-color: #3895BE !important;
    border-color: #3895BE !important
}

/* Progress color */
.progress-bar {
    background-color: #6EBEE6 !important;
 }
 
/* Radio button color */
body .answer-item label::after {
	background-color: #6EBEE6 !important;
}

/* Navbar */
.navbar-default .navbar-nav>li>a {
    background-color: #FFFFFF !important;
    text-decoration-color: #FFFFFF !important;
    border-bottom-color: #FFFFFF !important;
}

.fruity .dropdown-menu>li>a {
    background-color: #ffffff !important;
}

.fruity .navbar a.animate:after {
    background-color: #ffffff !important;
}

.fruity .dropdown-menu a.animate:after {
    background-color: #000000 !important;
}

/* Hide when printing */
@media print {
.screen-only {
  display: none !important;
  }
}
  
/* Hide when on screen */
@media screen {
.print-only {
  display: none !important;
  }
}
  
/* Hide progress bar when printing */
@media print {
  .top-container.space-col {
    display: none !important;
  }
}
  
/* Hide alerts bar when printing */
@media print {
  .alert {
    display: none !important;
  }
}
  
/* Hide table text bar when printing */
@media print {
  #table-text {
    display: none !important;
  }
}

/* Style for printing to ensure that nothing gets cropped in Safari */
/* Keep existing rules; add these print fixes */
@media print {
  /* 1) Define the page box and remove extra top space */
  @page {
    /* Set explicit margins; keep them modest */
    margin: 5mm 14mm 14mm 14mm; /* top right bottom left */
  }

  /* 1) Prevent any horizontal overflow */
  html, body {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  /* 2) Make all layout boxes fit inside page */
  .container, .content, .wrapper, .row, [class*="col-"] {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow: visible !important;
  }

  /* 3) Force text/URLs to wrap and kill nowrap */
  * {
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
  }
}

/* Standard: alles sichtbar */
.screen-only,
.print-only {
display: block;
}