/******************    
Robert 20.07.24

Farben PtJ Relaunch
Purpurrot: 	#d93651 // 217,54,81	// color: white
Diagr-Hover:#FE8A91 // 254,138,145	// color: black

Tiefgrün: 	#264540 // 38,69,64		// color: white
Limegelb:	#E4F485 // 228,244,133 	// color: black
Beige: 		#CCC2B6 // 204,194,182 	// color: black


******************/ 

/* custom.css Systemseitige Definitionen: */
	.table-bordered > thead > tr > th {
		border: 1px solid #dadada;
	}
	.table-bordered > thead > tr > td {
		border: 1px solid #dadada;		
	}

/* Obere Navileiste mit Logo */
	.PTJ-2026 .navbar {
	    background-color: #264540 !important;
	}	
	
/* Progressbar */
	.progress-bar {
		background-color: #E4F485;
		color: black;
	}

/* Container*/ 
	.bg-primary {
		background-color: #E4F485 !important;    /* -limegelb */
		
	}
	
/* Fragencontainer */
	.row > * {
		padding: calc(var(--bs-gutter-x)*.5);
	}
	.question-container {
		border-radius: 0.85rem 0.85rem 0 0;	
	}	
	.question-title-container {
		background-color: #264540; /* tiefgrün */
		border-bottom: 10px solid #CCC2b6; /* Sand */
		border-bottom: 10px solid #E4F485; /* Limegelb */
		color: #fff;
		font-weight: 600;
		border-radius: 0.85rem 0.85rem 0 0;	
	}
	.text-info {
		/*background-color: #E4F485;*/
		color: #000 !important;
	}
	
/* Warnfelder */
	.PtJ .alert-warning {
		background-color: transparent;
		border: 1px solid #d93651;
		color: #d93651
	}
	.PtJ .alert-warning hr {
		border-top-color:#d93651
	}
	.PtJ .alert-warning .alert-link {
		color:#d93651;
		text-decoration:underline
	}
	.PtJ .alert-danger {
		background-color:transparent;
		border:1px solid #a94442;
		color:#a94442
	}
	.PtJ .alert-danger hr {
		border-top-color:#a94442
	}
	.PtJ .alert-danger .alert-link {
		color:#a94442;
		text-decoration:underline
	}		
/* Antwortlabels */	
	.ls-answers label,
	.ls-answers th {
		font-weight: 600
	}	
/* Formularelemente - Dropdownfelder */
	.form-select{
		background-color:#CCC2B6;
		font-weight: 600;
	}
	.form-select:hover {
		background-color: #d93651;
		color: white;
	}
	.form-select:focus {
		box-shadow:0 0 0 .25rem rgba(217,54,81,1);
		outline:0;
	}
	.form-select:after {
		background-color: #d93651;
		color: white;
	}
/* Formularelemente - Eingabefelder */
	.form-control:focus {
		background-color:#CCC2B6;
		background-color:#fff;
		border-color:#CCC2B6;
		box-shadow:0 0 0 .25rem rgba(217,54,81,0.5);
		color:#212529;	
	}
/* Formularelemente - Checkboxen */	
	.form-check-input:checked {
		background-color: #CCC2B6;
		border-color: #CCC2B6;
	}
	.checkbox-item label::after {
        background-color: #CCC2B6;
    }
/* Formularelemente - Radiobuttons */
	.radio-item label::after {
		background-color: #264540; /* grün */
		background-color: #d93651; /* rot */
	}
/* Formularelemente - Bewertungssterne */	
	.star-1{
		color: #264540;
	}
	.star-1.star-drained, .star-1.star-rated-on:not(.star-drained), .star-1.star-rated-on:not(.star-stub) {
		color: #FE8A91;
	}
	.star-1.star-drained.star-hover, .star-1.star-rated-on.star-hover, .star-1.star-thisrated.star-rated-on {
		color: #d93651;
	}	
	.star-2{
		color: #377B67;
	}
	.star-2.star-drained, .star-2.star-rated-on:not(.star-drained), .star-2.star-rated-on:not(.star-stub) {
		color: #FE8A91;
	}
	.star-2.star-drained.star-hover, .star-2.star-rated-on.star-hover, .star-2.star-thisrated.star-rated-on {
		color: #d93651;
	}	
	.star-3{
		color: #20BC71;
	}
	.star-3.star-drained, .star-3.star-rated-on:not(.star-drained), .star-3.star-rated-on:not(.star-stub) {
		color: #FE8A91;
	}
	.star-3.star-drained.star-hover, .star-3.star-rated-on.star-hover, .star-3.star-thisrated.star-rated-on {
		color: #d93651;
	}	
	.star-4{
		color: #95D6AF;
	}
	.star-4.star-drained, .star-4.star-rated-on:not(.star-drained), .star-4.star-rated-on:not(.star-stub) {
		color: #FE8A91;
	}
	.star-4.star-drained.star-hover, .star-4.star-rated-on.star-hover, .star-4.star-thisrated.star-rated-on {
		color: #d93651;
	}	
	.star-5{
		color: #D7E86E;
	}
	.star-5.star-drained, .star-5.star-rated-on:not(.star-drained), .star-5.star-rated-on:not(.star-stub) {
		color: #FE8A91;
	}
	.star-5.star-drained.star-hover, .star-5.star-rated-on.star-hover, .star-5.star-thisrated.star-rated-on {
		color: #d93651;
	}

/* =========================================================
   START: Zwei Datepicker als gemeinsamer Datumsbereich
   ========================================================= */


/* ---------------------------------------------------------
   1. Gemeinsamen LimeSurvey-Container zweispaltig aufbauen
   --------------------------------------------------------- */

.group-container:has(> .date-range-start):has(> .date-range-end) {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    column-gap: 0;
    align-items: stretch;
}

/* Alle anderen Elemente der Fragengruppe bleiben volle Breite */
.group-container:has(> .date-range-start):has(> .date-range-end)
> :not(.date-range-item) {
    grid-column: 1 / -1;
}


/* ---------------------------------------------------------
   2. Gemeinsame Grundgestaltung
   --------------------------------------------------------- */

.date-range-item {
    position: relative;

    width: 100% !important;
    height: 105px !important;
    min-height: 105px !important;

    margin: 0 !important;
    padding: 14px 20px !important;

    box-sizing: border-box;

    background: #f3f4f2 !important;
    border: 1px solid #d8d8d3 !important;

    overflow: hidden;
}


/* Linke Hälfte */
.date-range-start {
    grid-column: 1;

    width: calc(100% + 8px) !important;
    margin-left: -8px !important;

    border-right: 0 !important;
    border-radius: 4px 0 0 4px;
}


/* Rechte Hälfte */
.date-range-end {
    grid-column: 2;

    width: calc(100% + 8px) !important;

    border-left: 1px solid #d8d8d3 !important;
    border-radius: 0 4px 4px 0;
}


/* ---------------------------------------------------------
   3. Überschriften
   --------------------------------------------------------- */

.date-range-item .question-title-container {
    height: 20px !important;
    min-height: 20px !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;
    border: 0 !important;
}

.date-range-item .question-title-container,
.date-range-item .question-title-container * {
    color: #253f3a !important;
    font-weight: 600 !important;
}


/* ---------------------------------------------------------
   4. Hinweis- und Formattexte ausblenden
   --------------------------------------------------------- */

.date-range-item .question-help-container,
.date-range-item .ls-questionhelp,
.date-range-item .em_default,
.date-range-item .help-block {
    display: none !important;
}


/* ---------------------------------------------------------
   5. Abstand Überschrift -> Datepicker
   --------------------------------------------------------- */

.date-range-item .answer-container {
    position: absolute !important;

    left: 20px;
    right: 20px;
    top: 38px;
    bottom: auto;

    height: 32px;

    margin: 0 !important;
    padding: 0 !important;
}

.date-range-item .answers {
    margin: 0 !important;
    padding: 0 !important;
}


/* ---------------------------------------------------------
   6. Datepicker
   --------------------------------------------------------- */

.date-range-item .date-timepicker-group {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;

    width: 100%;
    max-width: 360px;
}

.date-range-item .date-timepicker-group input {
    width: 1% !important;
    min-width: 0 !important;

    flex: 1 1 auto;
}

.date-range-item .date-timepicker-group .input-group-addon {
    flex: 0 0 auto;
}


/* ---------------------------------------------------------
   7. Mobile Darstellung
   --------------------------------------------------------- */

@media (max-width: 768px) {

    .group-container:has(> .date-range-start):has(> .date-range-end) {
        display: block !important;
    }

    .date-range-item {
        width: 100% !important;
        height: 105px !important;
        min-height: 105px !important;
    }

    .date-range-start {
        width: 100% !important;
        margin-left: 0 !important;

        border-right: 1px solid #d8d8d3 !important;
        border-radius: 4px;
        margin-bottom: 10px !important;
    }

    .date-range-end {
        width: 100% !important;
        border-radius: 4px;
    }


    /* Antwortbereich mit gleichem Abstand links und rechts */
    .date-range-item .answer-container {
        left: 20px !important;
        right: 20px !important;
        width: auto !important;
    }


    /* Bootstrap-Row: negative Gutters entfernen */
    .date-range-item .answers {
        width: 100% !important;

        margin-left: 0 !important;
        margin-right: 0 !important;

        --bs-gutter-x: 0;
    }


    /* Bootstrap-Spalte vollständig auf verfügbaren Raum begrenzen */
    .date-range-item .answer-container .col-12,
    .date-range-item .answer-container .col-sm-auto {
        width: 100% !important;
        max-width: 100% !important;

        flex: 0 0 100% !important;

        padding-left: 0 !important;
        padding-right: 0 !important;
    }


    /* Datepicker bleibt vollständig innerhalb dieses Bereichs */
    .date-range-item .date-timepicker-group {
        width: 100% !important;
        max-width: 100% !important;

        box-sizing: border-box;
    }
}


/* =========================================================
   ENDE: Zwei Datepicker als gemeinsamer Datumsbereich
   ========================================================= */
   

/* Buttons */ 
	.btn{
		border-radius: 0.85rem;	
		font-weight: 600;
	}
	.btn:hover {
	  background-color: #d93651;
	  border-color: #d93651;
	}	
	.btn-primary {
		background-color: #CCC2B6;
		border-color: #CCC2B6;
		font-weight: 600;
		color: #000;
	}	
	.btn-check:active + .btn-primary,
	.btn-check:checked + .btn-primary, 
	.btn-primary.active, 
	.btn-primary:active, 
	.show > .btn-primary.dropdown-toggle {		
		background-color: #d93651 !important;
		border-color: #d93651 !important;	
	}
	.btn-check:focus+.btn-primary,
	.btn-primary:focus,
	.btn-primary:hover {
		background-color: #d93651 !important;
		border-color: #d93651 !important;
	}
	.btn-check:active+.btn-primary:focus,
	.btn-check:checked+.btn-primary:focus,
	.btn-primary.active:focus,
	.btn-primary:active:focus,
	.show>.btn-primary.dropdown-toggle:focus {
		box-shadow:0 0 0 .25rem rgba(217,54,81,.5)
	}
	.btn-check:focus+.btn-primary,
	.btn-primary:focus {
		box-shadow:0 0 0 .25rem rgba(217,54,81,.5)
	}
/* Texte */
	.text-primary {
	  --bs-text-opacity: 1;
		color: #000 !important;
	}
/* Links */
	a {
		color:#d93651;
		text-decoration:underline
	}
	a:hover {
		color:#b82e45;
	}
	/* Navigationslinks im Header oben rechts */
    #survey-nav .nav-link {
      color: #fff;
    }
    #survey-nav .nav-link:hover {
      color: #CCC2B6;
    }