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


/* PHSZ colors: red */
/*
:root {
  --phsz-100: #F04B5A;
  --phsz-80: #F36F7B;
  --phsz-60: #F6939C;
  --phsz-40: #F9B7BD;
  --phsz-20: #FCDBDE;
  --phsz-intense: #E60F1E
}
*/

/* PHSZ colors: blue */
:root {
  --phsz-100: #6EBEE6;
  --phsz-80: #8BCBEB;
  --phsz-60: #A8D8F0;
  --phsz-40: #C5E5F5;
  --phsz-20: #E2F2FA;
  --phsz-intense: #00A0D7
}

/* PHSZ colors: green */
/*
:root {
  --phsz-100: #9BCD78;
  --phsz-80: #AFD793;
  --phsz-60: #C3E1AE;
  --phsz-40: #D7EBC9;
  --phsz-20: #EBF5E4;
  --phsz-intense: #64B42D
}
*/

/* PHSZ colors: orange */
/*
:root {
  --phsz-100: #FFB45F;
  --phsz-80: #FFC37F;
  --phsz-60: #FFD29F;
  --phsz-40: #FFE1BF;
  --phsz-20: #FFF0DF;
  --phsz-intense: #F08723
}
*/

/* Logo */
.navbar-brand img {
  height: 60px;
  padding-left: 0px;
}

/* Navigation bar */
.navbar {
  background: #ffffff !important;
  border: 0 !important;
  box-shadow: 0 3px 3px rgba(132,136,138,0.1);
}

/* Survey navigation */
.dropdown-item.bg-danger,
.dropdown-item.bg-warning {
  background: transparent !important
}

/* Top container (contains progress bar) */
.top-container {
	margin-top: 20px !important;
}

/* Progress bar */
.top-container .progress {
	margin-top: 0px !important;
	height: 5px;
}

/* Progress bar text */
.progress-bar {
    color: transparent;
    background-color: var(--phsz-intense);
}
    
/* Align navbar and top-container with other containers */
/******************
@media (min-width:1400px) {
  .navbar, .top-container {
    max-width:1320px;
    padding-left: 0px;
    margin-left: auto;
	margin-right: auto;
	width: 100%;
  }
}


.row {
	margin-left: 0px;
	margin-right: 0px;
}
*/

/* Survey name */
.survey-name  {
    margin-bottom: 30px;
}

/* Token text */
.token-page .text-info {
    color: #000000 !important;
}

/* Survey description */
.survey-description {
    color: #000000 !important;
    font-size: 16px !important;
    font-weight: normal !important;
}

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

/* Anonymized survey text */
.ls-privacy-head {
    color: var(--phsz-intense) !important;
}

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

/* Question box */
.question-container {
	background-color: #ffffff;
	border: 1px solid #e6e6e6;
	box-shadow: 0 1px 2px rgba(0,0,0,.2);
	margin-right: 5px;
	margin-left: 5px;
}

/* Answer box */
.answer-container {
	padding-bottom: 10px
}

/* Striped table rows */
.ls-even {
	background-color: #f9f9f9;
}

/* Mandatory asterisk */
.fa-asterisk {
    color: var(--phsz-intense) !important;
}

/* Question help text */
.ls-questionhelp  {
    color: #000000 !important;
}

/* Mandatory text */
.question-valid-container .ls-question-mandatory {
    color: var(--bs-warning) !important;
    font-weight: normal !important;
}

/* Button color */
.btn {
    background-color: var(--phsz-intense) !important;
    border-color: var(--phsz-intense) !important;
    color: #ffffff !important;
}

.btn:hover {
    background-color: var(--phsz-40) !important;
    border-color: var(--phsz-40) !important;
    color:  var(--phsz-intense) !important;
}

.btn:focus, .btn:active, .btn:active:focus .btn:focus-visible, .btn:disabled {
    background-color: var(--phsz-40);
    border-color: var(--phsz-40);
    color:  var(--phsz-intense);
	box-shadow: 0 0 0 0 hsla(208,7%,46%,.5) !important;
}

/* Radio button color */
body .answer-item label::after {
	background-color: var(--phsz-intense);
}

/* Array: answer texts*/
.ls-answers .answertext {
	text-align: left !important;
}

/* Array: border */
.ls-table-wrapper thead {
	border-top: inherit !important;
}

.ls-table-wrapper tbody {
	border-top: inherit !important;
}

/* Array: Heaeder alignment */
.ls-answers .ls-heading > th {
	vertical-align: top;
}

/* Text answers */
.form-control:focus {
	box-shadow: none;
	border-color: var(--phsz-intense);
}

/* Link color */
a {
    color: var(--phsz-intense) !important;
    text-decoration: none !important;
}

a:hover {
    color: var(--phsz-intense) !important;
    text-decoration: underline !important;
}

/* Show list points */
/* .radio-list li {
    display: list-item !important;
    list-style: disc !important;
}
*/

/********* Fernstudium Kompass **********/

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

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

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

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

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

/* Clean tables (stolen from https://css-tricks.com/making-tables-responsive-with-minimal-css/) */
.clean-table {
    font-size: 9px;
    border-collapse: collapse;
    text-align: left;
    width: 100%;
    border: none !important;
}

.clean-table thead,
.clean-table tbody {
    border: none !important;
}

.clean-table tr,
.clean-table th,
.clean-table td {
    padding: 3px 8px;
    border: none !important;
    border-bottom: 1px solid #000 !important;
}

/* Print button */
button.print-btn {
	border-radius: 6px;
	line-height: 24px;
	height: 36px;
	padding-bottom: 3px
}

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

/* Margins when printing */
@media print {
  p h3, h4, h4 {
    margin-bottom: 10px;
  }
}


/* Font sizes when printing */
@media print {
  p {
    font-size: 14px;
  }
  
  h3 {
    font-size: 1.5rem;
  }
  
  h4 {
    font-size: 1.25rem;
  }
  
  h5 {
    font-size: 1rem;
  }
}

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

/* Keep color when printing */
@media print {
  * {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

/* Add URL in parentheses when printing */
@media print {
  /* Normal links stay clickable, but the printed URL is plain text */
  a[href] {
    color: black;             /* make the link text black */
    text-decoration: none;    /* avoid underline for print */
  }

  a[href]::after {
    content: " (" attr(href) ")";
    color: black;             /* printed URL in black */
    text-decoration: none;    /* no underline */
  }
}