/**
	custom changes and extensions for bootstrap components. 
	There are currentliy 19 different bootstrap themes available in the CDN (thx and credits to bootswatch.com) and we need to keep the theme intact event when it gets changed.

	!!! DONT OVERRIDE BOOTSTRAP RULES WITH ANOTHER COLOR IN HERE !!! NOR YOU SHOULD ADD CLASSES WHICH CONTAINS COLOR-RULES (  ) !!!
*/

.env-development{
	.is-netto:after{
		content: ' Netto';
		font-size: 10px;
		font-weight: lighter;
		color: red;
	}
	.is-brutto:after{
		content: ' Brutto';
		font-size: 10px;
		font-weight: lighter;
		color: red;
	}
}


body.no-js.has-bg { 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

/** Disable paddings */
.no-padding {
   padding-bottom: 0!important;
   padding-left: 0!important;
   padding-right: 0!important;
   padding-top: 0!important;
}

/** Disable margins */
.no-margin {
   margin-bottom: 0!important;
   margin-left: 0!important;
   margin-right: 0!important;
   margin-top: 0!important;
}

.no-box-shadow{
	box-shadow: none !important;
}

.no-js.collapse{
	display:block
}

legend{
	padding-top: 10px;
}

.state-icon {
    left: -5px;
}
/* ..:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::.. */
/* ..:: Panel-Controls ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::.. */
/* ..:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::.. */

.panel-control{
    float: right;
    border: 0px none;
    background: transparent none repeat scroll 0px 0px;
    padding-left: 2px;
    padding-right: 2px;
    color: gray;
}
.panel-heading .accordion-toggle:after{
    font-family: 'Glyphicons Halflings';  /* essential for enabling glyphicon */
    content: "\e114";    /* adjust as needed, taken from bootstrap.css */
}
.panel-heading .accordion-toggle.collapsed:after{
    content: "\e080";
}



/* ..:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::.. */
/* ..:: BS CAROUSEL ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::.. */
/* ..:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::.. */
.carousel-inner img {
  margin: auto;
}

/* ..:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::.. */
/* ..:: BADGE STYLE FOR LABELS TO MAKE THEM LOOK LIKE BADGES :::::::::::::::::.. */
/* ..:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::.. */
.label-as-badge {
    border-radius: 1em;
}

/* ..:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::.. */
/* ..:: PROGRESS BARS ::::::::::::::::::::::::::::::::::::::::::::::::::::::::.. */
/* ..:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::.. */
.progress{
	margin-top: 7px;
	margin-bottom: 0;	
}


/* ..:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::.. */
/* ..:: BS DATETIMEPICKER ::::::::::::::::::::::::::::::::::::::::::::::::::::::::.. */
/* ..:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::.. */
.datepicker-dropdown{
	padding: 10px !important;
}



/* ..:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::.. */
/* ..:: CSS3 MARQUEE EFFECT ::::::::::::::::::::::::::::::::::::::::::::::::::.. */
/* ..:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::.. */
.marquee {
    width: auto;
    margin: 0 auto;
    white-space: nowrap;
    overflow: hidden;
    box-sizing: border-box;
}

.marquee span {
    display: inline-block;
    padding-left: 100%;  /* show the marquee just outside the paragraph */
    animation: marquee 15s linear infinite;
}

.marquee span:hover {
    animation-play-state: paused
}

/* Make it move */
@keyframes marquee {
    0%   { transform: translate(0, 0); }
    100% { transform: translate(-100%, 0); }
}

/* ..:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::.. */
/* ..:: DATATABLE ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::.. */
/* ..:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::.. */
.dataTables_processing {
	position: relative;
	top: 60px!important;
}

table.dataTable.dtr-inline.collapsed > tbody > tr > td:first-child:before,
table.dataTable.dtr-inline.collapsed > tbody > tr > th:first-child:before {
  top: 9px;
  left: 4px;
  height: 14px;
  width: 14px;
  display: block;
  position: absolute;
  color: white;
  border: 2px solid white;
  border-radius: 14px;
  box-shadow: 0 0 3px #444;
  box-sizing: content-box;
  text-align: center;
  font-family: "FontAwesome"!important;
  line-height: 14px;
  content: '+'!important;
  background-color: #337ab7;
}

/* ..:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::.. */
/* ..:: FIX FOR INLINE CHECKBOXES AND RADIOS :::::::::::::::::::::::::::::::::.. */
/* ..:: http://stackoverflow.com/questions/15975968/twitter-bootstrap-inline-checkbox-alignment-issue */
/* ..:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::.. */
.checkbox-inline,
.checkbox-inline + .checkbox-inline,
.checkbox-inline + .radio-inline,
.radio-inline,
.radio-inline + .radio-inline,
.radio-inline + .checkbox-inline {
    margin-left: 0;
    margin-right: 15px;
}

.checkbox-inline:last-child,
.radio-inline:last-child {
    margin-right: 0;
}

/* also lets correct some paddings for the inline variant */
.radio-inline{
	padding-top: 3px!important;
	padding-left: 0px;
}

.checkbox-inline{
	padding-left: 10px;
	padding-top: 3px!important;
}

.checkbox{
	padding-top: 3px!important;
}

/* ..:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::.. */
/* ..:: CAROUSEL EXTENSION :::::::::::::::::::::::::::::::::::::::::::::::::::.. */
/* ..:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::.. */
.carousel[count-images="1"] > .carousel-control {
  display: none;
}

/* ..:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::.. */
/* ..:: FORM GROUP EXTENSIONS ::::::::::::::::::::::::::::::::::::::::::::::::.. */
/* ..:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::.. */
.form-group > .control-label
{
	word-wrap: break-word;	
	padding-top: 5px;
	text-align: right;
}
.form-group.required .control-label:after { 
	font-family: FontAwesome;
	/*font-family: Glyphicons Halflings;*/
	font-size:1em;
	color: #d00;
    content: "\2a";
    position: absolute;
    margin-left: 5px;
    top:0px;
}

/* ..:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::.. */
/* ..:: MODAL-STYLES :::::::::::::::::::::::::::::::::::::::::::::::::::::::::.. */
/* ..:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::.. */
.modal {
  text-align: center;
  padding: 0!important;
}

.modal-body {
	/* thats the important shit to make the scrollbar appear within the modal instead on the body (which looks simply lousy ) */
    max-height: calc(100vh - 350px);	
    overflow-y: auto;
}

.modal:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -4px; /* Adjusts for spacing */
}

.modal-dialog {
  display: inline-block;
  text-align: left;
  vertical-align: middle;
}

.modal-backdrop.in {
    zoom: 1;
    filter: alpha(opacity=75);
    -webkit-opacity: .75;
    -moz-opacity: .75;
    opacity: .75;
}
.modal-backdrop {
    /* look at the theme for a color */
}
@media (max-width: 768px) 
{
	.modal-header
	{
		padding-top: 2px;
		padding-bottom: 1px;
	}
	.modal-footer
	{
		padding-top: 2px;
		padding-bottom: 2px;
		padding-right: 2px;
	}
}

.modal-xl {
	width: 90vw;
	height: 90vh;
}
.modal-xl .modal-content{
	height: 100%;
}

.modal-lightbox .modal-xl .modal-body{
	max-height: unset;
	padding-top: 0;
	padding-bottom: 0;
}
.modal-lightbox .modal-slides{
	display: flex;
	justify-content: center;
	height: 65vh;
}

.modal-lightbox .carousel-control{
	background-image: unset;
	width: unset;
	color: black;
}
.modal-lightbox .carousel-inner > .item{
	padding-left: 15px;
	padding-right: 15px;
}

.modal-lightbox .carousel-inner > .item > img{
	height: 75vh !important;
	width: auto !important;
	object-fit: contain;
}

/* Indicators list style */
.modal-lightbox .carousel-indicators {
	bottom: 0;
	left: 0;
	margin-left: 15px;
	width: 100%;
	position: relative;
}
/* Indicators list style */
.modal-lightbox .carousel-indicators li {
	border: medium none;
	border-radius: 0;
	float: left;
	height: 60px;
	margin-bottom: 5px;
	margin-left: 0;
	margin-right: 5px !important;
	margin-top: 0;
	width: 60px;
}
/* Indicators images style */
.modal-lightbox .carousel-indicators img {
	border: 2px solid #FFFFFF;
	float: left;
	height: 60px;
	left: 0;
	width: 60px;
	object-fit: contain;
}
/* Indicators active image style */
.modal-lightbox .carousel-indicators .active img {
	border: 2px solid ;
	opacity: 0.7;
}

/* ..:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::.. */
/* ..:: LIMIT TEXT TO LINES ::::::::::::::::::::::::::::::::::::::::::::::::::.. */
/* ..:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::.. */
.text-line-1{
    line-height: 1.5em;
    height: 1.5em;       	/* height is 1x line-height, so one lines will display */
    overflow: hidden;  		/* prevents extra lines from being visible */
    white-space: nowrap;
    text-overflow: ellipsis;
    padding: 0, 0, 0, 0;
}

.text-line-2{
    line-height: 1.5em;
    height: 3em;       		/* height is 2x line-height, so two lines will display */
    overflow: hidden;  		/* prevents extra lines from being visible */
    white-space: "normal";
    text-overflow: ellipsis;
    padding: 0, 0, 0, 0;
}

.text-line-3{
    line-height: 1.5em;
    height: 4.5em;       	/* height is 3x line-height, so three lines will display */
    overflow: hidden;  		/* prevents extra lines from being visible */
    white-space: "normal";
    text-overflow: ellipsis;
    padding: 0, 0, 0, 0;
}

.faded-text{
    color: #7d7d7d;
    text-decoration: none;
    background-color: transparent;
    font-style: italic;
}

/* ..:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::.. */
/* ..:: PLACEHOLDER ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::.. */
/* ..:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::.. */
.placeholders {
  margin-bottom: 30px;
  text-align: center;
}
.placeholders h4 {
  margin-bottom: 0;
}
.placeholder {
  margin-bottom: 20px;
}
.placeholder img {
  display: inline-block;
  border-radius: 50%;
}


/* ..:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::.. */
/* ..:: TILE BOXES (custom component) ::::::::::::::::::::::::::::::::::::::::.. */
/* ..:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::.. */
.tile-box 
{
	border-radius: 2px;
	position: relative;
	display: block;
	margin-bottom: 20px;
	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}

.tile-box > a {
    display: block;
    height: 100%;
    width: 100%;
    text-decoration: none;
    color: #fff;
	color: rgba(255, 255, 255, 0.8);
}

.tile-box .inner 
{
	padding: 10px;
}

.tile-box > .tile-box-footer 
{
	position: relative;
	text-align: center;
	padding: 3px 0;
	color: #fff;
	color: rgba(255, 255, 255, 0.8);
	display: block;
	z-index: 10;
	background: rgba(0, 0, 0, 0.1);
	text-decoration: none;
}

.tile-box > .tile-box-footer:hover 
{
	color: #fff;
	background: rgba(0, 0, 0, 0.15);
}

.tile-box h3 
{
	font-size: 38px;
	font-weight: bold;
	margin: 0 0 10px 0;
	white-space: nowrap;
	padding: 0;
}

.tile-box p 
{
	font-size: 15px;
}

.tile-box p > small 
{
	display: block;
	color: #f9f9f9;
	font-size: 13px;
	margin-top: 5px;
}

.tile-box h3,
.tile-box p 
{
  z-index: 5;
}

.tile-box .icon 
{
	-webkit-transition: all 0.3s linear;
	-o-transition: all 0.3s linear;
	transition: all 0.3s linear;
	position: absolute;
	top: 5px;
	right: 10px;
	z-index: 0;
	font-size: 50px;
	color: rgba(0, 0, 0, 0.15);
}

.tile-box:hover 
{
	text-decoration: none;
	color: #f9f9f9;
}

.tile-box:hover .icon 
{
	font-size: 75px;
}

@media (max-width: 767px) 
{
	.tile-box 
	{	
		text-align: center;
	}
	
	.tile-box .icon 
	{
		font-size: 25px;
	}
	
	.tile-box:hover .icon 
	{
		font-size: 50px;
	}

	.tile-box p 
	{
		font-size: 12px;
	}
}


/* ..:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::.. */
/* ..:: BUTTONS WITH ARROWS ::::::::::::::::::::::::::::::::::::::::::::::::::.. */
/* ..:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::.. */
.btn-arrow-right,
.btn-arrow-left {
    position: relative;
    padding-left: 18px;
    padding-right: 18px;
}
.btn-arrow-right {
    padding-left: 36px;
}
.btn-arrow-left {
    padding-right: 36px;
}
.btn-arrow-right:before,
.btn-arrow-right:after,
.btn-arrow-left:before,
.btn-arrow-left:after { /* make two squares (before and after), looking similar to the button */
    content:"";
    position: absolute;
    top: 5px; /* move it down because of rounded corners */
    width: 22px; /* same as height */
    height: 22px; /* button_outer_height / sqrt(2) */
    background: inherit; /* use parent background */
    border: inherit; /* use parent border */
    border-left-color: transparent; /* hide left border */
    border-bottom-color: transparent; /* hide bottom border */
    border-radius: 0px 4px 0px 0px; /* round arrow corner, the shorthand property doesn't accept "inherit" so it is set to 4px */
    -webkit-border-radius: 0px 4px 0px 0px;
    -moz-border-radius: 0px 4px 0px 0px;
}
.btn-arrow-right:before,
.btn-arrow-right:after {
    transform: rotate(45deg); /* rotate right arrow squares 45 deg to point right */
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
}
.btn-arrow-left:before,
.btn-arrow-left:after {
    transform: rotate(225deg); /* rotate left arrow squares 225 deg to point left */
    -webkit-transform: rotate(225deg);
    -moz-transform: rotate(225deg);
    -o-transform: rotate(225deg);
    -ms-transform: rotate(225deg);
}
.btn-arrow-right:before,
.btn-arrow-left:before { /* align the "before" square to the left */
    left: -11px;
}
.btn-arrow-right:after,
.btn-arrow-left:after { /* align the "after" square to the right */
    right: -11px;
}
.btn-arrow-right:after,
.btn-arrow-left:before { /* bring arrow pointers to front */
    z-index: 1;
}
.btn-arrow-right:before,
.btn-arrow-left:after { /* hide arrow tails background */
    background-color: white;
}

/* ..:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::.. */
/* ..:: BREADCRUMP WITH ARROWS :::::::::::::::::::::::::::::::::::::::::::::::.. */
/* ..:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::.. */
.breadcrumb-arrow {
	/*centering*/
	display: inline-block;
	box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.35);
	overflow: hidden;
	border-radius: 5px;
	/*Lets add the numbers for each link using CSS counters. flag is the name of the counter. to be defined using counter-reset in the parent element of the links*/
	counter-reset: flag; 
}

.breadcrumb-arrow a {
	text-decoration: none;
	text-align: center;
	outline: none;
	display: block;
	float: left;
	font-size: 12px;
	line-height: 36px;
	color: white;
	/*need more margin on the left of links to accomodate the numbers*/
	padding: 0 10px 0 60px;
	background: #666;
	background: linear-gradient(#666, #333);
	position: relative;
}

.breadcrumb-arrow a.disabled
{
	pointer-events: none ;
}

/*since the first link does not have a triangle before it we can reduce the left padding to make it look consistent with other links*/
.breadcrumb-arrow a:first-child {
	padding-left: 46px;
	border-radius: 5px 0 0 5px; /*to match with the parent's radius*/
}
.breadcrumb-arrow a:first-child:before {
	left: 14px;
}
.breadcrumb-arrow a:last-child {
	border-radius: 0 5px 5px 0; /*this was to prevent glitches on hover*/
	padding-right: 20px;
}

/*hover/active styles*/
.breadcrumb-arrow a.active, .breadcrumb-arrow a:hover{
	background: #333;
	background: linear-gradient(#333, #000);
}
.breadcrumb-arrow a.active:after, .breadcrumb-arrow a:hover:after {
	background: #333;
	background: linear-gradient(135deg, #333, #000);
}

/*adding the arrows for the breadcrumb-arrows using rotated pseudo elements*/
.breadcrumb-arrow a:after {
	content: '';
	position: absolute;
	top: 0; 
	right: -18px; /*half of square's length*/
	/*same dimension as the line-height of .breadcrumb-arrow a */
	width: 36px; 
	height: 36px;
	/*as you see the rotated square takes a larger height. which makes it tough to position it properly. So we are going to scale it down so that the diagonals become equal to the line-height of the link. We scale it to 70.7% because if square's: 
	length = 1; diagonal = (1^2 + 1^2)^0.5 = 1.414 (pythagoras theorem)
	if diagonal required = 1; length = 1/1.414 = 0.707*/
	transform: scale(0.707) rotate(45deg);
	/*we need to prevent the arrows from getting buried under the next link*/
	z-index: 1;
	/*background same as links but the gradient will be rotated to compensate with the transform applied*/
	background: #666;
	background: linear-gradient(135deg, #666, #333);
	/*stylish arrow design using box shadow*/
	box-shadow: 
		2px -2px 0 2px rgba(0, 0, 0, 0.4), 
		3px -3px 0 2px rgba(255, 255, 255, 0.1);
	/*
		5px - for rounded arrows and 
		50px - to prevent hover glitches on the border created using shadows*/
	border-radius: 0 5px 0 50px;
}
/*we dont need an arrow after the last link*/
.breadcrumb-arrow a:last-child:after {
	content: none;
}
/*we will use the :before element to show numbers*/
.breadcrumb-arrow a:before {
	content: counter(flag);
	counter-increment: flag;
	/*some styles now*/
	border-radius: 100%;
	width: 20px;
	height: 20px;
	line-height: 20px;
	margin: 8px 0;
	position: absolute;
	top: 0;
	left: 30px;
	background: #444;
	background: linear-gradient(#444, #222);
	font-weight: bold;
}


.flat a, .flat a:after {
	background: white;
	color: black;
	transition: all 0.5s;
}
.flat a:before {
	background: white;
	box-shadow: 0 0 0 1px #ccc;
}
.flat a:hover, .flat a.active, 
.flat  a:hover:after, .flat a.active:after{
 	background: #9EEB62; 
}

/* ..:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::.. */
/* ..:: IMAGE-CONTAINER ::::::::::::::::::::::::::::::::::::::::::::::::::::::.. */
/* ..:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::.. */
.responsive-container {
    position: relative;
    width: 100%;
    border: 0px dotted black;
}

.dummy {
    padding-top: 100%; /* forces 1:1 aspect ratio */
}

.img-container {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    
    text-align:center; /* Align center inline elements */
    font: 0/0 a;
}

.img-container .centerer {
    display: inline-block;
    vertical-align: middle;
    height: 100%;
}

.img-container img {
    vertical-align: middle;
    display: inline-block;
    max-height: 100%;  /* <-- Set maximum height to 100% of its parent */
    max-width: 100%;   /* <-- Set maximum width to 100% of its parent */
}


.container-product-image{
    width: 450px;
    max-width: 450px;
    object-fit: contain;
    height: 400px;
    max-height: 400px;
}

.img-main-div {
    border:1px solid #a9a9a9;
    align-content: center;
}

.article-icon_main, .article-icon-main-no-icon {
    position: relative;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
}

.edit_gallery .bordered {
    height:180px;
    width: 150px;
    object-fit: contain;
    border:2px solid #a9a9a9;
    margin: 5px;
    background-color: #fff;
}

.edit_gallery .bordered .img_center {
    padding: 5px;
    display: block;
    margin: 0 auto;
    max-height: 110px;
    max-width: 150px;
}

.edit_gallery .bordered-slider-input .img_center {
    padding: 5px;
    display: block;
    margin: 0 auto;
    max-height: 110px;
    max-width: 150px;
}

.edit_gallery .bordered-slider-input {
    width: 410px;
    object-fit: contain;
    border:2px solid #a9a9a9;
    margin: 5px;
    background-color: #fff;
}

.edit_gallery .bordered-slider-input .slider_image_container {
    height: 112px
}

.edit_gallery .bordered-slider-input .slider_img_center {
    padding: 5px;
    display: block;
    margin: 0 auto;
    max-height: 110px;
    max-width: 259px;
}

.edit_gallery .bordered-logo {
    height:150px;
    width: 150px;
    object-fit: contain;
    border:2px solid #a9a9a9;
    margin: 5px;
    background-color: #fff;
}

.edit_gallery .bordered-logo .logo_image_container {
    height: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.ui-state-highlight{
    border-style: dashed;
    height: 180px;
    width: 150px;
    border-color: #a9a9a9;
}

.image-name-info-alert {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    height: 30px;
    width: 146px;
    padding: 5px;
}
.custom-blueprint-checkbox {
    position: relative;
    top: -7px;
}

.gallery img {
    height:100px;
    width: 100px;
    object-fit: contain;
    border:2px solid #a9a9a9;
    padding: 5px;
}

.gallery .active img {
    border:1px solid #333 !important;
}

.btn-sm, .btn-group-sm > .btn > .delete-article-icon {
    line-height: 1.0 !important;
    padding: 10px 16px !important;
    border-radius: 0px !important;
}

.tooltip-inner {
    max-width: 450px; !important;
    width: 450px; !important;
    opacity: 1;
}
.tooltip.in{opacity:1!important;}


.combined-inputs-left
{
    padding-right: 15px !important;
}

.combined-inputs-right
{
    padding-left: 15px !important;
}
/* ..:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::.. */
/* ..:: BACKGROUNDS ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::.. */
/* ..:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::.. */
.bg-navy {
  background-color: #001F3F; }

.bg-blue {
  background-color: #0074D9; }

.bg-aqua {
  background-color: #7FDBFF; }

.bg-teal {
  background-color: #39CCCC; }

.bg-olive {
  background-color: #3D9970; }

.bg-green {
  background-color: #2ECC40; }

.bg-lime {
  background-color: #01FF70; }

.bg-yellow {
  background-color: #FFDC00; }

.bg-orange {
  background-color: #FF851B; }

.bg-red {
  background-color: #FF4136; }

.bg-fuchsia {
  background-color: #F012BE; }

.bg-purple {
  background-color: #B10DC9; }

.bg-maroon {
  background-color: #85144B; }

.bg-white {
  background-color: #fff; }

.bg-gray {
  background-color: #aaa; }

.bg-silver {
  background-color: #ddd; }

.bg-black {
  background-color: #111; }

/* ..:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::.. */
/* ..:: COLORS :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::.. */
/* ..:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::.. */
.navy {
  color: #001F3F; }

.blue {
  color: #0074D9; }

.aqua {
  color: #7FDBFF; }

.teal {
  color: #39CCCC; }

.olive {
  color: #3D9970; }

.green {
  color: #2ECC40; }

.lime {
  color: #01FF70; }

.yellow {
  color: #FFDC00; }

.orange {
  color: #FF851B; }

.red {
  color: #FF4136; }

.fuchsia {
  color: #F012BE; }

.purple {
  color: #B10DC9; }

.maroon {
  color: #85144B; }

.white {
  color: #fff; }

.silver {
  color: #ddd; }

.gray {
  color: #aaa; }

.black {
  color: #111; }

/* ..:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::.. */
/* ..:: BORDER COLORS ::::::::::::::::::::::::::::::::::::::::::::::::::::::::.. */
/* ..:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::.. */
.border-navy {
  border-color: #001F3F; }

.border-blue {
  border-color: #0074D9; }

.border-aqua {
  border-color: #7FDBFF; }

.border-teal {
  border-color: #39CCCC; }

.border-olive {
  border-color: #3D9970; }

.border-green {
  border-color: #2ECC40; }

.border-lime {
  border-color: #01FF70; }

.border-yellow {
  border-color: #FFDC00; }

.border-orange {
  border-color: #FF851B; }

.border-red {
  border-color: #FF4136; }

.border-fuchsia {
  border-color: #F012BE; }

.border-purple {
  border-color: #B10DC9; }

.border-maroon {
  border-color: #85144B; }

.border-white {
  border-color: #fff; }

.border-gray {
  border-color: #aaa; }

.border-silver {
  border-color: #ddd; }

.border-black {
  border-color: #111; }

/* ..:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::.. */
/* ..:: FILLS FOR SVG ::::::::::::::::::::::::::::::::::::::::::::::::::::::::.. */
/* ..:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::.. */
.fill-navy {
  fill: #001F3F; }

.fill-blue {
  fill: #0074D9; }

.fill-aqua {
  fill: #7FDBFF; }

.fill-teal {
  fill: #39CCCC; }

.fill-olive {
  fill: #3D9970; }

.fill-green {
  fill: #2ECC40; }

.fill-lime {
  fill: #01FF70; }

.fill-yellow {
  fill: #FFDC00; }

.fill-orange {
  fill: #FF851B; }

.fill-red {
  fill: #FF4136; }

.fill-fuchsia {
  fill: #F012BE; }

.fill-purple {
  fill: #B10DC9; }

.fill-maroon {
  fill: #85144B; }

.fill-white {
  fill: #fff; }

.fill-gray {
  fill: #aaa; }

.fill-silver {
  fill: #ddd; }

.fill-black {
  fill: #111; }

/* ..:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::.. */
/* ..:: STROKES FOR SVG ::::::::::::::::::::::::::::::::::::::::::::::::::::::.. */
/* ..:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::.. */
.stroke-navy {
  stroke: #001F3F; }

.stroke-blue {
  stroke: #0074D9; }

.stroke-aqua {
  stroke: #7FDBFF; }

.stroke-teal {
  stroke: #39CCCC; }

.stroke-olive {
  stroke: #3D9970; }

.stroke-green {
  stroke: #2ECC40; }

.stroke-lime {
  stroke: #01FF70; }

.stroke-yellow {
  stroke: #FFDC00; }

.stroke-orange {
  stroke: #FF851B; }

.stroke-red {
  stroke: #FF4136; }

.stroke-fuchsia {
  stroke: #F012BE; }

.stroke-purple {
  stroke: #B10DC9; }

.stroke-maroon {
  stroke: #85144B; }

.stroke-white {
  stroke: #fff; }

.stroke-gray {
  stroke: #aaa; }

.stroke-silver {
  stroke: #ddd; }

.stroke-black {
  stroke: #111; }

/* ..:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::.. */
/* ..:: MARGINS ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::.. */
/* ..:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::.. */
.ml-1{
	margin-left: 1em;
}
.ml-2{
	margin-left: 2em;
}
.ml-3{
	margin-left: 3em;
}
.ml-4{
	margin-left: 4em;
}
.ml-5{
	margin-left: 5em;
}

.mr-1{
	margin-right: 1em;
}
.mr-2{
	margin-right: 2em;
}
.mr-3{
	margin-right: 3em;
}
.mr-4{
	margin-right: 4em;
}
.mr-5{
	margin-right: 5em;
}


.bigdrop{
    width: 500px !important;
}


.div-center-wrapper{
    white-space: nowrap;
    max-width: 99%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.inline-block{
    display: inline-block;
    width: 30%;
}

.kv-file-content > img
{
    width: auto;
}


.policy-links-ul{
    padding: 0;
}

.policy-links-li{
    border: 1px solid #ddd;
    margin-top: -1px;
    background-color: #f6f6f6;
    padding: 12px;

    margin-right: 0px;
    display: flex;
    flex-direction: row;
    align-items: center;
}

/** ZZZ Hier noch die Farben raus*/

/** ZZZ ENDE FARBEN **/