.sidebar {
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	width: 16rem;
	padding: 1rem;
	background-color: #f8f9fa;
}

.bright-box {
	border: 2px solid black;
}

.content {
	margin-left: 18rem;
	margin-right: 2rem;
	padding: 2rem 1rem;
}

.colored-number {
    color: #d95f0e;
    font-weight: bold;
}

.pretty_container {
                   border-radius: 5px;
                   background-color: #f5f5f5;
                   margin: 5px;
                   padding: 5px;
                   position: relative;
                   box-shadow: 2px 2px 2px lightgrey; 
			   }

.pretty_container_big {
                   border-radius: 5px;
                   background-color: #f5f5f5;
                   margin: 5px;
                   padding: 20px;
                   position: relative;
                   box-shadow: 2px 2px 2px lightgrey; 
               }	

.smallbox {
    background-color: white;
    margin: 1px;
    padding: 10px;
    position: relative;
    width: 100%;
}               
               
.image_right {
                   border-radius: 5px;
                   margin: 10px;
                   margin-right: 20px;
                   padding: 10px;
                   position: relative;
                   box-shadow: 2px 2px 2px lightgrey; 
                   border: 1px solid lightgrey;
                   width: 26rem;
                   float: right;
                   cursor: pointer;
               }    
.image_left {
                   border-radius: 5px;
                   margin: 10px;
                   margin-right: 40px;
                   padding: 10px;
                   position: relative;
                   box-shadow: 2px 2px 2px lightgrey; 
                   border: 1px solid lightgrey;
                   width: 22rem;
                   float: left;
                   cursor: pointer;
			   }                                 
			   
.navlink-black {
    font-size: 18px;
    font-weight: 400;
    line-height: 1.5;
    color: #777;
    text-align: left;
    padding: 0;
    padding-top: 2px;
}
.h5 {
color: #777;
}

.navlink-header {
    font-size: 1.25rem;
    font-weight: 300;
    margin-bottom: 1rem;
}

.stufenmodell {
	border: 3px solid #446E9B;
	padding: 15px;
	margin: 0px;
	margin-bottom: -3px;
	float: right;
	font-size: smaller;
	cursor: pointer;
	transition: 0.3s;
}

.stufenmodell-cockpit {
	border: 3px solid #446E9B;
    padding: 15px;
    padding-top: 2px;
	margin: 0px;
	margin-bottom: -3px;
	float: right;
    font-size: smaller;
    text-align: right;
}

.stufe1 {
	width: 100%;
	margin: 0;
}        

.stufe2 {
	width: 90%;
}        

.stufe3 {
	width: 80%;
}        

.stufe4 {
	width: 70%;
}        

.stufe5 {
	width: 60%;
}        

.stufe6 {
	width: 50%;
}        

.stufenmodell:hover {
	background-color: rgb(193, 218, 255);
}

.intlink {
    color: #3399F3;
    cursor: pointer;
}

.intlink:hover {
    text-decoration: underline;
}

@media (min-width: 768px) {
    .container-small {
        width: 300px;
    }
    .container-large {
        width: 970px;
    } 
} 
@media (min-width: 992px) {
    .container-small {
        width: 500px;
    }
    .container-large {
        width: 1170px;
    } 
} 
@media (min-width: 1200px) {
    .container-small {
        width: 800px;
    }
    .container-large {
        width: 1500px;
    } 
}

.container-small, .container-large {
    max-width: 100%;
}

.main_container {
    position: absolute;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, 0);
    border-radius: 5px;
    background-color: #e7e7e7;
    margin: 5px;
    padding: 20px;
    box-shadow: 2px 2px 2px lightgrey;
    font-size: smaller;
    font-family: Franklin Gothic Book, Arial, Helvetica, sans-serif;
}


@media (min-width: 768px) {
    .container-small {
        width: 300px;
    }

    .container-large {
        width: 970px;
    }
}

@media (min-width: 992px) {
    .container-small {
        width: 500px;
    }

    .container-large {
        width: 1170px;
    }
}

@media (min-width: 1200px) {
    .container-small {
        width: 800px;
    }

    .container-large {
        width: 1500px;
    }
}

.flyer.btn-secondary:not(.disabled):hover {
    background-image: -webkit-gradient(linear, left top, left bottom, from(#A264F5), color-stop(50%, #A264F5), to(#A264F5));
    background-image: linear-gradient(#7920ec, #A264F5 50%, #A264F5);
    background-repeat: no-repeat;
    -webkit-filter: none;
    filter: none;
    border: 1px solid #A264F5;
}


.flyer.btn-secondary {
    background-image: -webkit-gradient(linear, left top, left bottom, from(#A264F5), color-stop(50%, #A264F5), to(#A264F5));
    background-image: linear-gradient(#A264F5, #A264F5 50%, #A264F5);
    background-repeat: no-repeat;
    -webkit-filter: none;
    filter: none;
    border: 1px solid #A264F5;

}

.flyer.btn-secondary:not(.disabled):active {
    box-shadow: #A264F5;
}



#selectScenario .custom-control-input:checked~.custom-control-label::before {
    background-color: #A264F5;
    border-color: #A264F5;
    /*box-shadow: 0 0 0 0.2rem #EBB6D4 !important;*/

}

#selectScenario .custom-control-input:focus~.custom-control-label::before {
    box-shadow: 0 0 0 0.2rem #EBB6D4 !important;

}

.infobox {
    font-size: smaller;
    font-family: Franklin Gothic Book, Arial, Helvetica, sans-serif;
}

.infobadge {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.rc-slider-track {
    background-color: #EBB6D4;
}

.rc-slider-dot-active {
    border-color: #A264F5;
    border: solid 2px #A264F5;
}

.rc-slider-handle {
    background-color: white;
    border-color: #A264F5;
    border: solid 3px #A264F5;
}

.rc-slider-handle:hover {
    background-color: white;
    border-color: #A264F5;
}

.rc-slider-handle:focus {
    background-color: white;
    border-color: #A264F5;
}

.rc-slider-handle-active:active {
    border-color: #A264F5;
}

.rc-slider-handle:active {
    border-color: #A264F5;
    box-shadow: 0 0 0 0.1rem #EBB6D4 !important;

}

#options .custom-control-input:checked~.custom-control-label::before {
    color: #fff;
    border-color: #A264F5;
    background-color: #A264F5;

}

#options .custom-control-input:focus~.custom-control-label::before {
    box-shadow: 0 0 0 0.1rem #EBB6D4 !important;

}

.dropdown-item.active,
.dropdown-item:active {
    color: #fff;
    text-decoration: none;
    background-color: #A264F5;
}

.dropdownViolet.is-focused:not(is-open)>.Select-control {
    border-color: #A264F5;
    box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%),
        0 0 0 3px #EBB6D4;
}


.dropdownViolet2 .VirtualizedSelectFocusedOption {
    background-color: #EBB6D4;
    /*color: black;*/
}

.form-control:focus {
    color: black;
    background-color: #fff;
    -webkit-box-shadow: 0 0 0 0.2rem black;
    border-color: #ccc;
    outline: 0;
    box-shadow: 0 0 0 0.2rem #ccc;
}


#uname-box .VirtualizedSelectFocusedOption {
    background-color: #EBB6D4;
    /*color: black;*/
}

.tabEntwicklung {
    font-size: 0.95em;
    width: 48%;
    height: 40%;
    float: right;
    margin-top: 4.5em;

    margin-bottom: 2em;
}



.subheader {
    margin-top: 20px;
    font-size: 20px;
}

/*margin between radio items*/
#radio label:nth-child(1) {
    margin-right: 1em;
}

#radio label:nth-child(2) {
    margin-right: 1em;
}

#radio label:nth-child(3) {
    margin-right: 1em;
}

#radio label:nth-child(4) {
    margin-right: 1em;
}

#radio label:nth-child(5) {
    margin-right: 1em;
}

.modalButtonMargin {
    margin-right: 10px;
}



.infobox {
    font-size: smaller;
    font-family: Franklin Gothic Book, Arial, Helvetica, sans-serif;
    box-shadow: #a264f5 !important;


}

.infobutton {
    background-color: #a264f5;
}


.infobutton:visited {
    background-color: #a264f5 !important;
}



.infobutton:focus {
    box-shadow: 0 0 0 0.2rem #EBB6D4 !important;
    background-color: #a264f5 !important;
}

.infobutton:hover {
    box-shadow: 0 0 0 0.2rem #EBB6D4 !important;
    background-color: #a264f5 !important;
}


#FlyerDownload {
    background-color: #a264f5;
    margin-left: 40px;
}

#register-button {
    margin-left: 10px;
}

.dropdown-item.active {
    background-color: #a264f5
}



/* i added this to fix html issue in teilzeit.py, same css, just moved */
.is-invalid input {
    border-color: #dc3545;
    padding-right: calc(1.5em + 0.75rem);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23dc3545' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}
.invalid-feedback {
    display: block;
    width: 100%;
    margin-top: 0.25rem;
    font-size: 80%;
    color: #dc3545;
}

.teilzeit-alert {
    font-size: 0.8rem;
    white-space: nowrap;
    position: absolute;
}

/* Ensure Plotly/Dash graphs have a reasonable minimum/maximum height to
   avoid layout cycles that can cause infinite stretching in some browsers
   or with some combinations of container CSS. Explicit graph heights are
   still applied from Python (dcc.Graph style), this is a defensive rule. */
.dash-graph, .js-plotly-plot {
    min-height: 300px;
    max-width: 100%;
}

/* Utility classes to centralize inline styles and prepare for theming (e.g., dark mode) */
.cursor-pointer { cursor: pointer; }
.app-root { max-width: 100%; overflow-x: hidden; }

/* Let the graph expand naturally but fill its container */
.graph-responsive {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 300px;
    flex-grow: 1;
}

/* Ensure Plotly respects parent size without infinite loops */
.graph-responsive .dash-graph,
.graph-responsive .js-plotly-plot,
.graph-responsive .plotly-graph-div {
    width: 100% !important;
    height: 100% !important;
    min-height: 300px !important;
}

/* Optional: Make the column a flex container so graph fills vertical space */
.graph-container {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 400px); /* adjust offset to fit header/footer */
}
.pt-2 { padding-top: 2px; }
.pt-5 { padding-top: 5px; }
.pt-10 { padding-top: 10px; }
.pt-15 { padding-top: 15px; }
.pt-30 { padding-top: 30px; }
.pb-25 { padding-bottom: 25px; }
.float-right { float: right; }
.text-primary-blue { color: #446E9B; }
.font-bold { font-weight: bold; }
.pt-1 { padding-top: 1px; }
.stat-value { font-size: 24px; text-align: right; color: #EF553B; }
.pt-7 { padding-top: 7px; }
.pt-25 { padding-top: 25px; }
.mt-1 { margin-top: 1px; }