/*------------------------------------*/
/*-- Version 1.3.1                  --*/
/*-- Letzte Änderung am  08.12.2020 --*/
/*-- Letzte Änderung durch CS       --*/
/*------------------------------------*/

html {
	position: relative;
	min-height: 100%;
	font-size: 1rem;
	
	/*Markieren von Texten verhindern*/
	/*-webkit-user-select: none;  Safari 3.1+ */
	/*-moz-user-select: none;  Firefox 2+ */
	/*-ms-user-select: none;  IE 10+ */
	/*user-select: none; Standard syntax */
}

.text-selectable {
	/*Markieren von Texten zulassen*/
	-webkit-user-select: text; /* Safari 3.1+ */
	-moz-user-select: text; /* Firefox 2+ */
	-ms-user-select: text; /* IE 10+ */
	user-select: text; /* Standard syntax */
}


/*Dynamische Anpassungen je nach Fenster/Bildschirm Grösse/Auflösung*/

/* ab 144px */
@media (min-width: 144px) {  
	html {font-size:0.7rem;}
	div.dataTables_wrapper div.dataTables_filter input {width: 95px;}
	.card-table.shadow-sm {border: 0px solid rgba(0,0,0,.125); box-shadow: none !important;}
	#configurator_wrapper .configurator-picture {width: 200px;}
	#configurator_wrapper #configurator_slider.toffset_1 .configurator-picture { top:20px !important;}
	#configurator_wrapper #configurator_slider.toffset_2 .configurator-picture { top:40px !important;}
	#configurator_wrapper #configurator_slider.toffset_3 .configurator-picture { top:60px !important;}
	#configurator_wrapper #configurator_slider.toffset_4 .configurator-picture { top:80px !important;}
	#configurator_wrapper #configurator_slider.toffset_5 .configurator-picture { top:100px !important;}
	#configurator_wrapper #configurator_slider.toffset_6 .configurator-picture { top:120px !important;}
	#configurator_wrapper #configurator_slider.toffset_7 .configurator-picture { top:140px !important;}
	#configurator_wrapper #configurator_slider.toffset_8 .configurator-picture { top:160px !important;}
	#configurator_wrapper #configurator_slider.toffset_9 .configurator-picture { top:180px !important;}
	#configurator_wrapper #configurator_slider.toffset_10 .configurator-picture { top:200px !important;}
	.card-body#configurator_wrapper {height:200px;}
}

/* ab 320px */
@media (min-width: 320px) {  
	html {font-size:0.8rem;}
	div.dataTables_wrapper div.dataTables_filter input {width: 95px;}
	.table tbody tr:first-child td.checkbox {border-top:0 none;}
	.table thead th.checkbox {border-bottom:0 none;}
	#configurator_wrapper .configurator-picture {width: 250px;}
	#configurator_wrapper #configurator_slider.toffset_1 .configurator-picture { top:25px !important;}
	#configurator_wrapper #configurator_slider.toffset_2 .configurator-picture { top:50px !important;}
	#configurator_wrapper #configurator_slider.toffset_3 .configurator-picture { top:75px !important;}
	#configurator_wrapper #configurator_slider.toffset_4 .configurator-picture { top:100px !important;}
	#configurator_wrapper #configurator_slider.toffset_5 .configurator-picture { top:125px !important;}
	#configurator_wrapper #configurator_slider.toffset_6 .configurator-picture { top:150px !important;}
	#configurator_wrapper #configurator_slider.toffset_7 .configurator-picture { top:175px !important;}
	#configurator_wrapper #configurator_slider.toffset_8 .configurator-picture { top:200px !important;}
	#configurator_wrapper #configurator_slider.toffset_9 .configurator-picture { top:225px !important;}
	#configurator_wrapper #configurator_slider.toffset_10 .configurator-picture { top:250px !important;}
	.card-body#configurator_wrapper {height:250px;}
}

/* ab  544px */
@media (min-width: 576px) {  
	html {font-size:0.9rem;}
	div.dataTables_wrapper div.dataTables_filter input {width: 110px;}
	.footer #footerlinks.dynfloat {float: right !important;}
	.footer .dynfloat {float: left !important;}
	.card-table.shadow-sm {border: 1px solid rgba(0,0,0,.125); box-shadow: 0 .125rem .25rem rgba(0,0,0,.075) !important;}
	#configurator_wrapper .configurator-picture {width: 250px;}
	.card-body#configurator_wrapper {height:250px;}
	#configurator_wrapper #configurator_slider.toffset_1 .configurator-picture { top:25px !important;}
	#configurator_wrapper #configurator_slider.toffset_2 .configurator-picture { top:50px !important;}
	#configurator_wrapper #configurator_slider.toffset_3 .configurator-picture { top:75px !important;}
	#configurator_wrapper #configurator_slider.toffset_4 .configurator-picture { top:100px !important;}
	#configurator_wrapper #configurator_slider.toffset_5 .configurator-picture { top:125px !important;}
	#configurator_wrapper #configurator_slider.toffset_6 .configurator-picture { top:150px !important;}
	#configurator_wrapper #configurator_slider.toffset_7 .configurator-picture { top:175px !important;}
	#configurator_wrapper #configurator_slider.toffset_8 .configurator-picture { top:200px !important;}
	#configurator_wrapper #configurator_slider.toffset_9 .configurator-picture { top:225px !important;}
	#configurator_wrapper #configurator_slider.toffset_10 .configurator-picture { top:250px !important;}
	#configurator_wrapper .configurator-picture { left:122px !important;}
}
 
 
/* ab 768px // Die Navigation bricht hier um */
@media (min-width: 768px) {  
	html {font-size:0.9rem;}
	div.dataTables_wrapper div.dataTables_filter input {width: 210px;}
	.table tbody tr:first-child td.checkbox {border-top: 1px solid #dee2e6}
	.table thead th.checkbox {border-bottom: 2px solid #dee2e6;}
	#configurator_wrapper .configurator-picture {width: 350px;}
	.card-body#configurator_wrapper {height:350px;}
	#configurator_wrapper #configurator_slider.toffset_1 .configurator-picture { top:35px !important;}
	#configurator_wrapper #configurator_slider.toffset_2 .configurator-picture { top:70px !important;}
	#configurator_wrapper #configurator_slider.toffset_3 .configurator-picture { top:105px !important;}
	#configurator_wrapper #configurator_slider.toffset_4 .configurator-picture { top:140px !important;}
	#configurator_wrapper #configurator_slider.toffset_5 .configurator-picture { top:175px !important;}
	#configurator_wrapper #configurator_slider.toffset_6 .configurator-picture { top:210px !important;}
	#configurator_wrapper #configurator_slider.toffset_7 .configurator-picture { top:245px !important;}
	#configurator_wrapper #configurator_slider.toffset_8 .configurator-picture { top:380px !important;}
	#configurator_wrapper #configurator_slider.toffset_9 .configurator-picture { top:315px !important;}
	#configurator_wrapper #configurator_slider.toffset_10 .configurator-picture { top:350px !important;}
	#configurator_wrapper .configurator-picture { left:162px !important;}
}
 
/* ab 992px */
@media (min-width: 992px) { 
 	html {font-size:0.9rem;}
 	div.dataTables_wrapper div.dataTables_filter input {width: 310px;}
	#configurator_wrapper .configurator-picture {width: 350px;}
	.card-body#configurator_wrapper {height:350px;}
	#configurator_wrapper #configurator_slider.toffset_1 .configurator-picture { top:35px !important;}
	#configurator_wrapper #configurator_slider.toffset_2 .configurator-picture { top:70px !important;}
	#configurator_wrapper #configurator_slider.toffset_3 .configurator-picture { top:105px !important;}
	#configurator_wrapper #configurator_slider.toffset_4 .configurator-picture { top:140px !important;}
	#configurator_wrapper #configurator_slider.toffset_5 .configurator-picture { top:175px !important;}
	#configurator_wrapper #configurator_slider.toffset_6 .configurator-picture { top:210px !important;}
	#configurator_wrapper #configurator_slider.toffset_7 .configurator-picture { top:245px !important;}
	#configurator_wrapper #configurator_slider.toffset_8 .configurator-picture { top:380px !important;}
	#configurator_wrapper #configurator_slider.toffset_9 .configurator-picture { top:315px !important;}
	#configurator_wrapper #configurator_slider.toffset_10 .configurator-picture { top:350px !important;}
	#configurator_wrapper .configurator-picture { left:0px !important;}
}
 
/* ab 1200px */
@media (min-width: 1200px) {  
 	html {font-size:1rem;}
 	div.dataTables_wrapper div.dataTables_filter input {width: 310px;}
	#configurator_wrapper .configurator-picture {width: 400px;}
	.card-body#configurator_wrapper {height:400px;}
	#configurator_wrapper #configurator_slider.toffset_1 .configurator-picture { top:40px !important;}
	#configurator_wrapper #configurator_slider.toffset_2 .configurator-picture { top:80px !important;}
	#configurator_wrapper #configurator_slider.toffset_3 .configurator-picture { top:120px !important;}
	#configurator_wrapper #configurator_slider.toffset_4 .configurator-picture { top:160px !important;}
	#configurator_wrapper #configurator_slider.toffset_5 .configurator-picture { top:200px !important;}
	#configurator_wrapper #configurator_slider.toffset_6 .configurator-picture { top:240px !important;}
	#configurator_wrapper #configurator_slider.toffset_7 .configurator-picture { top:280px !important;}
	#configurator_wrapper #configurator_slider.toffset_8 .configurator-picture { top:320px !important;}
	#configurator_wrapper #configurator_slider.toffset_9 .configurator-picture { top:360px !important;}
	#configurator_wrapper #configurator_slider.toffset_10 .configurator-picture { top:400px !important;}
	#configurator_wrapper .configurator-picture { left:0px !important;}
}



body {
	margin-bottom: 60px;
}

main {
	margin-top: 70px;
}

#loading-container {
	margin-top: 150px;
}

.loading-container {
	margin-top: 150px;
}


/* Navigation */
.navbar {
   margin-bottom: 20px;
}

.navbar-brand {
	padding:0;
}

.navbar-right {
	float: right !important;
	margin-right: -15px;
}
	

/* Fußzeile */
.footer {
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 50px;
	background-color: #f8f9fa ;
}


.footer a {
	color: grey;
}

.footer span {
	font-size: 80%;
}

.loginfooter span::before,
.loginfooter a:nth-child(1n+2)::before,
.footer span:nth-child(1n+2)::before,
.footer span:nth-child(1n+2)::before {
	content: "■";
	color: #ff8200;
	margin-right: 0.4rem;
	margin-left: 0.4rem;
	font-size: 0.522rem;
	margin-top: 0.55556rem;
	margin-bottom: 0.55556rem;
	height: 0.55556rem;
	witdh: 0.55556rem;
	vertical-align: 15%;
}

.loginfooter a{
	color: grey;
}


/*Modal*/
.modal-body {
	min-height: 100px;
}

.modal-body h6{
	margin-top: .5rem;
	font-weight: bold;
}

.modal-body #ArticleDetailModalIcon{
	text-align: center;
	padding-top: 5px;
}

.modal-body hr {
	margin-top: .5rem;
	margin-bottom: .5rem;
}


/* Selectpicker */

.dropdown.bootstrap-select .customselect {

	color: #495057;
	border: 1px solid #ced4da;
	background-color: #fff;

}

.dropdown.bootstrap-select .dropdown-menu a {

	font-size: 0.9rem;
	color: #495057 !important;

}

.dropdown.bootstrap-select .customselect:hover {

	background-color: #fff !important;
	color: #495057 !important;

}

.dropdown.bootstrap-select .customselect:focus,
.dropdown.bootstrap-select .customselect:active {

	box-shadow: 0 0 0 .2rem rgba(255, 130, 0,.5);
	border-color: #ff8200;
	
}


/*Autocomplete UI*/
.ui-autocomplete {
position: absolute;
	z-index: 99999 !important;
	cursor: default;
	padding: 0;
	margin-top: 2px;
	list-style: none;
	background-color: #ffffff;
	border: 1px solid #ccc -webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
	box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}


.ui-autocomplete>li.ui-state-focus {
	background-color: #DDD;
}

.ui-autocomplete li {
	border-bottom: 1px solid #dee2e6;
}

.ui-autocomplete li:last-child {
	border-bottom: 0 none;
}


.ui-helper-hidden-accessible {
	display: none;
}




/* Tabellen */
.table th {
	border-top: 0 none;
}

div.dataTables_wrapper div.dataTables_filter input {
	margin-left:0;
}


div.dataTables_wrapper div.dataTables_length label {
	float: right;
	
}

div.dataTables_wrapper div.dataTables_filter label {
	float: left;
}

button:hover {
	cursor: pointer;
	
}

a:hover {
	cursor: pointer;
}

img.view-org:hover{
	cursor: pointer;
}

tbody tr:hover {
	cursor: pointer;
	background-color: #f8f9fa;
}

.default-table tbody tr:hover {
	cursor: auto;
}

tbody td.nowrap {
	white-space: nowrap;
}

.price_modal tbody td.price {
	width: 5px;
	text-align: right;
	padding-right: 0;
}


.table thead th.sm-view {
	border-bottom:0 none;
	padding: 0;
}

.table tbody tr:first-child td.sm-view {
	border-top:0 none;
}

.table thead th.actions{
	width: 80px;
	padding : .75rem 0rem .75rem .75rem
}


/* Generelle Farbanpassungen */


.text-primary {
	color: #ff8200 !important;
}

span.hint{
	color: #ff8200;
}

.btn-primary {
	background-color: #ff8200;
	border-color: #ff8200;
}

.btn-primary.disabled, .btn-primary:disabled {
	background-color: #ff8200;
	border-color: #ff8200;
	opacity: 0.2;
}

.btn-primary.disabled:hover, .btn-primary:disabled:hover {
	background-color: #ff8200;
	border-color: #ff8200;
	color: #fff;
	cursor: not-allowed;
}

#loginpage .btn-primary.disabled:hover, #loginpage .btn-primary:disabled:hover {
	cursor: progress;
}

.btn-primary:hover {
	background-color: #fff;
	border-color: #ff8200;
	color: #ff8200;
}


.btn-primary:not(:disabled):not(.disabled).active,
.btn-primary:not(:disabled):not(.disabled):active,
.show > .btn-primary.dropdown-toggle {
	box-shadow: 0 0 0 .2rem rgba(255, 130, 0,.5);
}


.btn-primary:focus,
.show > .btn-primary.dropdown-toggle:focus {
	/*Wichtig da sonst buttons teilweise gewählt bleiben*/
	box-shadow: none;
}


.btn-primary:not(:disabled):not(.disabled).active,
.btn-primary:not(:disabled):not(.disabled):active,
.show > .btn-primary.dropdown-toggle {
	box-shadow: 0 0 0 .2rem rgba(255, 130, 0,.5);
	background-color: #ff8200;
	border-color: #ff8200;
}

.btn-primary:not(:disabled):not(.disabled).active:focus,
.btn-primary:not(:disabled):not(.disabled):active:focus,
.show > .btn-primary.dropdown-toggle:focus {
	box-shadow: 0 0 0 .2rem rgba(255, 130, 0,.5);
	color: #ff8200;
	background-color: #fff;
	border-color: #ff8200;
}

.form-control:focus {   
	border-color: rgba(255, 130, 0,.8);
	box-shadow: 0 0 0 .2rem rgba(255, 130, 0,.3);
	outline: 0 none;
}

.custom-control-label:hover{
	cursor: pointer;
}

.dropdown-item:active{
	background-color: rgba(255, 130, 0,.5)
}

.page-item .page-link {
	color: #ff8200;
}

.page-item .page-link:hover {
	background-color: #dee2e6;
}
.page-item .page-link:focus {
	border-color: rgba(255, 130, 0,.8);
	box-shadow: 0 0 0 .2rem rgba(255, 130, 0,.3);
	outline: 0 none;
}

.page-item.active .page-link {
	background-color: #ff8200;
	border-color: #ff8200;
}

.page-item.active .page-link:hover {
	background-color: #fff;
	border-color: #ff8200;
	color: #ff8200;
}

.page-item.active .page-link:focus {   
	border-color: rgba(255, 130, 0,.8);
	box-shadow: 0 0 0 .2rem rgba(255, 130, 0,.3);
	outline: 0 none;
}


.badge-primary {
	background-color: #ff8200;
}


.badge-primary:hover {
	cursor: pointer;
}


.badge-primary[href]:focus, 
.badge-primary[href]:hover {
	background-color: #ff8200;
	
}

.custom-checkbox .custom-control-input:checked ~ .custom-control-label::before {
	background-color: #ff8200;
	border-color: #ff8200;
}


.custom-checkbox .custom-control-input:focus ~ .custom-control-label::before {
	border-color: rgba(255, 130, 0,.8);
	box-shadow: 0 0 0 .2rem rgba(255, 130, 0,.3);
	outline: 0 none;
}

.custom-checkbox .custom-control-input:disabled:checked ~ .custom-control-label::before {
	background-color: #adb5bd;
	border-color: #adb5bd;

}


.custom-radio .custom-control-input:checked ~ .custom-control-label::before {
	background-color: #ff8200;
}

.custom-radio .custom-control-input:focus ~ .custom-control-label::before {
	border-color: rgba(255, 130, 0,.8);
	box-shadow: 0 0 0 .2rem rgba(255, 130, 0,.3);
	outline: 0 none;
}
.ui-autocomplete li {
	border-bottom: 2px solid #dee2e6;
}

.ui-state-active, .ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active,
a.ui-button:active,
.ui-button:active,
.ui-button.ui-state-active:hover {
	border: 1px solid rgba(255, 130, 0,.8);
	background: #ff8200;

}

.ui-menu-item-wrapper.ui-state-active, .ui-widget-content .ui-menu-item-wrapper.ui-state-active,
.ui-widget-header .ui-menu-item-wrapper.ui-state-active
 {
	border: 1px solid rgba(255, 130, 0,.8);
	background: #ff8200;

}


.custom-select:focus {
	border-color: rgba(255, 130, 0,.8);
	box-shadow: 0 0 0 .2rem rgba(255, 130, 0,.3);
}


.custom-select option[selected] {
	//background-color: #ff8200;
}


.btn-link{
	color: #000;
}
.accordion .btn-link {
	font-weight: bold;

}

.btn-link:hover {
	color: #ff8200;
	text-decoration: none;
}

.btn-link:focus {
	text-decoration: none;
}

.btn-link.collapsed {
	font-weight: normal;
}


/*Produktkonfigurator*/


#configurator_wrapper .progress-bar {
	transition: width .2s ease;
}

.card-body#configurator_wrapper {
	position:relative;
}

#configurator_wrapper .configurator-picture {
	position:absolute;
	left:0px;
	top:0px;
}

.configurator-picture.basic-unit {
	z-index: 11 !important;
}

.configurator-picture[data-layer="background"] {
	z-index: 14;
}

.configurator-picture[data-layer="normal"] {
	z-index: 15;
}

.configurator-picture[data-layer="foreground"] {
	z-index: 16;
}


#choosen_item .details_available,
#choosen_item .basedetails_available {
	cursor: pointer;
}



/*Custom Button für collaps*/
.btn-primary.showhide {
	padding: .6rem;
	float: right;
	background-repeat: no-repeat;
	background-size: 10px 10px;
	background-position:center center;
	background-image: url("/images/remove.png");
}

.btn-primary.showhide:hover {
	background-color: #ff8200;
	border-color: #ff8200;
}

.btn-primary.showhide.collapsed {
	background-repeat: no-repeat;
	background-size: 10px 10px;
	background-position:center center;
	background-image: url("/images/add.png");
}


.badge-primary.showhide {
	height: 20px;
	width: 20px;
	background-repeat: no-repeat;
	background-size: 10px 10px;
	background-position:center center;
	background-image: url("/images/remove.png");
}

.badge-primary.showhide.collapsed {
	background-repeat: no-repeat;
	background-size: 10px 10px;
	background-position:center center;
	background-image: url("/images/add.png");
}

/*Formulare*/
.form-group label span{
	font-size: 0.9rem;
	color: rgba(0,0,0,.5);
}

.btn.btn-primary.form-inline {
	padding: .15rem .75rem;
}

/*Datepicker*/
input.datepicker,
input.datepicker[readonly]{
	background: #ffffff url(/images/icon_date.png) no-repeat 98% center; 
	cursor: pointer;
}


/* Login Seite */

body#loginpage {
	display: -ms-flexbox;
	display: -webkit-box;
	display: flex;
	-ms-flex-align: center;
	-ms-flex-pack: center;
	-webkit-box-align: center;
	align-items: center;
	-webkit-box-pack: center;
	justify-content: center;
	padding-top: 10px;
	padding-bottom: 10px;
	background-color: #f5f5f5;
}

#lost-password {
	cursor: pointer;
}

.form-signin {
	width: 100%;
	max-width: 420px;
	padding: 15px;
	/*margin: 0 auto;*/
}

.form-label-group {
	position: relative;
	margin-bottom: 1rem;
}

.form-label-group > input,
.form-label-group > label {
	padding: .5rem .75rem;
}

.form-label-group > label {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	margin-bottom: 0;
	line-height: 1.5;
	color: #495057;
	border: 1px solid transparent;
	border-radius: .25rem;
	transition: all .1s ease-in-out;
}

.form-label-group input::-webkit-input-placeholder {
	color: transparent;
}

.form-label-group input:-ms-input-placeholder {
	color: transparent;
}

.form-label-group input::-ms-input-placeholder {
	color: transparent;
}

.form-label-group input::-moz-placeholder {
	color: transparent;
}

.form-label-group input::placeholder {
	color: transparent;
}

.form-label-group input:not(:placeholder-shown) {
	padding-top: calc(var(--input-padding-y) + var(--input-padding-y) * (2 / 3));
	padding-bottom: calc(var(--input-padding-y) / 3);
}

.form-label-group input:not(:placeholder-shown) ~ label {
	padding-top: calc(var(--input-padding-y) / 3);
	padding-bottom: calc(var(--input-padding-y) / 3);
	font-size: 12px;
	color: #777;
}


/*Warenkorb*/



#table-cart.table tr td, 
#table-cart.table th {
}



#table-cart.table tr td.checkbox,
#table-cart.table tr th.checkbox{
	padding: 20px 0 10px 10px;
	margin-right: 0px;
}


/*Projektübersicht*/
#projects .unavailable {
	opacity: 0.7;
}

#projects .card-body {
	height: 160px;
}