/* TABLE OF CONTENTS
 * -----------------
 * 1. General CSS Rules
 * 2. !important Overwrites
 * 3. CSS Reset
 * 4. Typography
 * 5. Borders
 * 6. Backgrounds
 * 7. Box Shadows
 * 8. Paddings
 * 9. Margins
 * 10. Tables
 * 11. Lists
 * 12. Alerts
 * 13. Tabs
 * 14. Forms & Inputs
 * 15. Buttons
 * 16. UI Dialogs
 * 17. Tooltips
 * 18. Validation Engine
 * 19. Password Strength
 * 20. Navs
 * 21. Login
 * 22. Media Queries
 * 23. Animations
 */

:root {
  --fibermaxx-color: 26,58,105;	/* #1A3A69 */
  --general-color: 82,84,86; /* #525456 */
}

/* 1. General CSS Rules */
*:not(i) {
  font-family: "Open Sans" !important;
}

html {
  scroll-behavior: smooth;
}

body {
  color: rgb(var(--general-color));
  background-color: #fff;
  font-size: 14px;
  overflow: hidden
}

#content {
  height: calc(100vh - 110px);
}

.table-no-overflow, .dataTables_scrollBody {
  overflow: hidden !important;	
}

.row {
  margin-top: 32px;
  margin-bottom: 32px;
}

.container-fluid {
  padding: 0 32px;
}

/** 2023-02-16 - ts - #16360 - Allgemeines Logo-Image-Style **/
.logoImg {
	width:288px;
}

.w-5 { width: 5%!important; }
.w-10 { width: 10%!important; }
.w-15 { width: 15%!important; }
.w-20 { width: 20%!important; }
.w-25 { width: 25%!important; }
.w-30 { width: 30%!important; }
.w-35 { width: 35%!important; }
.w-40 { width: 40%!important; }
.w-45 { width: 45%!important; }
.w-60 { width: 60%!important; }
.w-65 { width: 65%!important; }
.w-70 { width: 70%!important; }
.w-75 { width: 75%!important; }
.w-80 { width: 80%!important; }
.w-85 { width: 85%!important; }
.w-90 { width: 90%!important; }
.w-95 { width: 95%!important; }

.icon-wrapper {
  width: 22px;
}

.cursor-pointer {
  cursor: pointer !important;
}

/* Display none */
#errorDialog, 
#infoDialog,
#confirmDialog,
.hidden,
#wsmsStatusBar,
#jsWorker,
.dataTables_filter,
.nicescroll-rails-hr {
	display: none;
}

/* Text Highlighting jquery.highlight */
.highlight {
	background-color: yellow;
}

.bootstrap-autocomplete {
	margin-left: 1rem;
	margin-top: -1px;
	-webkit-box-shadow: 0px 1px 14px 0px rgba(0,0,0,0.2);
	-moz-box-shadow: 0px 1px 14px 0px rgba(0,0,0,0.2);
	box-shadow: 0px 1px 14px 0px rgba(0,0,0,0.2);
}
.bootstrap-autocomplete a {
	cursor: pointer;
}

.bootstrap-autocomplete a.active, .bootstrap-autocomplete a:hover {
	color: white !important;
}

div[aria-describedby="autoLogoutAfter"] .ui-icon {
	width: 0 !important;
	height: 0 !important;
	display: none !important;
}

.dropdown.bootstrap-select.show-tick .dropdown-menu {
	min-width: 100% !important;
}



/********************************/
/*** 2. !important Overwrites ***/
/********************************/
.bg-info {
  background-color: #f1f1f1 !important;
}

.dz-message h5.text-muted {
  color: #999 !important;
}

.clockpicker-tick.active,
.clockpicker-tick:hover {
  background-color: rgba(255,103,21,1.00) !important;
  background-color: rgba(255,103,21,.25) !important;
}



/*********************/
/*** 3. CSS RESETS ***/
/*********************/
button:focus,
:focus,
.focus,
.btn.btn-primary:focus,
.btn.btn-secondary:focus,
.btn.btn-link:focus,
.form-control:focus,
.form-control.focus,
.bootstrap-select .dropdown-toggle:focus,
.bootstrap-select>select.mobile-device:focus+.dropdown-toggle,
.custom-control-input:focus ~ .custom-control-label::before,
.ui-dialog-buttonset button:first-child:focus,
.btn-light:not(:disabled):not(.disabled).active:focus,
.btn-light:not(:disabled):not(.disabled):active:focus,
.show>.btn-light.dropdown-toggle:focus,
.btn-link,
.btn.btn-link:link,
.btn.btn-link:visited,
.btn.btn-link:hover,
.btn.btn-link:active,
.ui-dialog-buttonset button:first-child,
.ui-dialog-buttonset button:first-child:hover,
.ui-dialog-buttonset button:first-child:active,
.modal-content,
.ui-dialog.ui-widget.ui-widget-content {
  outline: none !important;
  text-decoration: none !important;
  box-shadow: none !important;
}

input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  background-image: none;
  box-shadow: 0 0 0px 1000px #f1f1f1 inset !important;
  transition: background-color 5000s ease-in-out 0s;
}



/*********************/
/*** 4. TYPOGRAPHY ***/
/*********************/
a:hover,
a:active {
  text-decoration: none;
}

h1, h2, h3, h4, h5, h6 {
  line-height: 1.2;
}

h2, h3, h5, h6 {
  margin-bottom: 16px;
}

/*** FONT WEIGHTS ***/
h3, h4, h5, h6,
strong, b,
.table thead th,
.hint-title,
.ui-widget-header,
label {
  font-weight: 700;
}

h1,
.desinfection-table th {
  font-weight: 500;
}

td {
  font-weight: 400;
}

h2, p {
  font-weight: 300;
}

/*** FONT SIZES ***/
h1,
input.form-control-xl {
  font-size: 35px;
}

.topbar-nav i.fas {
  font-size: 24px;
}

h2,
.desinfection-table th { 
  font-size: 22px;
}

h3, 
.ui-dialog-title,
#order-table i,
#dashboard-orders i { 
  font-size: 18px; 
}

h4 {
  font-size: 16px;
}

h5,
.btn,
.form-control,
.input-group-text,
.ui-dialog-buttonset button,
.dropdown-menu,
i.fas.fa-search {
  font-size: 14px; 
}

h6 {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 2px;
}

/*** FONT COLORS ***/
table,
.table,
.form-control,
.form-control:focus,
.bootstrap-select .btn.btn-light,
.bootstrap-select .btn.btn-light:hover,
.dropdown-menu,
.dropdown-menu>li>a,
.bootstrap-select .dropdown-toggle:focus,
.alert-success,
a .counter,
a .counter-title,
.ui-dialog-buttonset button:nth-child(2):hover,
.btn.btn-secondary,
.ui-dialog.ui-widget.ui-widget-content,
.card-header,
.ui-dialog-titlebar.ui-widget-header,
.ui-dialog-content.ui-widget-content,
.tooltip-inner,
.sidebar a.active,
.sidebar li.nav-item:hover a,
footer ul li a:link,
footer ul li a:visited,
.bootstrap-select>.dropdown-toggle.bs-placeholder,
.bootstrap-select>.dropdown-toggle.bs-placeholder:active,
.bootstrap-select>.dropdown-toggle.bs-placeholder:focus,
.bootstrap-select>.dropdown-toggle.bs-placeholder:hover,
.btn-group-toggle.btn-group-with-images label:hover h6,
.dropdown-menu[role="combobox"] .dropdown-item:hover,
a:link.nav-link,
a:visited.nav-link,
i.fas.fa-search,
.text-color {
  color: rgb(var(--general-color));
}

a:hover.nav-link,
a:active.nav-link,
.text-red {
  color: #e2001a;
}

h1, h2, h5,
.desinfection-table th,
.text-green,
.input-group-text,
.next, .prev,
.text-primary,
a:link,
a:visited,
#userLogout,
.btn-link,
.btn.btn-link:link,
.btn.btn-link:visited,
.ui-dialog-buttonset button:first-child { 
  color: rgb(var(--fibermaxx-color));
}

a:hover,
.btn.btn-link:hover,
.btn.btn-link:active,
.ui-dialog-buttonset button:first-child:hover,
.ui-dialog-buttonset button:first-child:active,
.text-grey,
.bg-info,
.light-subtitle,
.nav-tabs .nav-link.tab-group-title,
.nav-tabs .nav-link.tab-group-title:hover,
.topbar-nav .dropdown-menu>li>a:hover,
.dz-message { 
  color: #999999; 
}

.text-white,
.dropdown-item:hover,
.dropdown-item:active,
.dropdown-item.active,
.btn.btn-primary[disabled="disabled"]:hover,
.pbtns label a:hover,
.pbtns label:hover a,
.pbtns label.active a,
a:hover .counter,
a:hover .counter-title ,
a:active .counter,
a:active .counter-title,
.nav-tabs .nav-link:focus,
.nav-tabs .nav-link:hover,
.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active,
.btn.btn-primary,
.btn-primary:not(:disabled):not(.disabled).active,
.btn-primary:not(:disabled):not(.disabled):active,
.show>.btn-primary.dropdown-toggle,
.btn.btn-primary:hover,
.btn-primary:not(:disabled):not(.disabled).active:hover,
.btn-primary:not(:disabled):not(.disabled):active:hover,
.show>.btn-primary.dropdown-toggle:hover,
.ui-dialog-buttonset button:nth-child(2),
.btn.btn-secondary:hover,
.btn-secondary:not(:disabled):not(.disabled).active a,
.btn-secondary:not(:disabled):not(.disabled).active:hover a,
.btn-secondary:not(:disabled):not(.disabled):active a,
.btn-secondary:not(:disabled):not(.disabled):hover a, 
.show>.btn-secondary.dropdown-toggle a,
.card-counter-button:hover,
.card-hint .close,
.card-hint .card-header,
.card-hint .card-body,
.card-hint .card-footer,
.sidebar,
.sidebar a.ig-menu-toggler,
.alert-danger,
.btn-group-toggle.btn-group-with-images .btn-img:hover h6,
.dropdown-menu>li.selected>a,

/** 2023-02-07 - ts - #16319 - Neu **/
.sidebar a.nav-link:not(.active) { 
  color: #ffffff; 
}



/**********************/
/*** 5. BACKGROUNDS ***/
/**********************/
.ui-dialog-buttonset button:first-child {
  background: none;
}

.bg-grey,
tr.tr-clickable:hover,
tr.tr-inner,
td.inner-table,
.form-control,
.bootstrap-select .btn.btn-light,
.bootstrap-select .btn.btn-light:hover,
.form-control,
.bootstrap-select .btn.btn-light,
.bootstrap-select .btn.btn-light:hover,
.dropdown-menu[role="combobox"] .dropdown-item:hover {
  /*background-color: #f1f1f1;*/
  background-color: #fff;
}

#mediaview .card, .orderTemplate-container .card {
  height: 100%;
}

.bg-orange,
[id*=filter]:hover,
.nav-item.active [id*=filter],
.activeAttributeValue.active .activeAttributeValueInner[class*=filter],
.nav-tabs .nav-link:focus,
.nav-tabs .nav-link:hover,
.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active,
.custom-control-input:checked~.custom-control-label::before,
.custom-checkbox .custom-control-input:indeterminate~.custom-control-label::before,
.datepicker table tr td.active.active, .datepicker table tr td.active.disabled.active, .datepicker table tr td.active.disabled:active, .datepicker table tr td.active.disabled:hover.active, .datepicker table tr td.active.disabled:hover:active, .datepicker table tr td.active:active, .datepicker table tr td.active:hover.active, .datepicker table tr td.active:hover:active,
.datepicker table tr td.active.active, .datepicker table tr td.active.disabled, .datepicker table tr td.active.disabled.active, .datepicker table tr td.active.disabled.disabled, .datepicker table tr td.active.disabled:active, .datepicker table tr td.active.disabled:hover, .datepicker table tr td.active.disabled:hover.active, .datepicker table tr td.active.disabled:hover.disabled, .datepicker table tr td.active.disabled:hover:active, .datepicker table tr td.active.disabled:hover:hover, .datepicker table tr td.active.disabled:hover[disabled], .datepicker table tr td.active.disabled[disabled], .datepicker table tr td.active:active, .datepicker table tr td.active:hover, .datepicker table tr td.active:hover.active, .datepicker table tr td.active:hover.disabled, .datepicker table tr td.active:hover:active, .datepicker table tr td.active:hover:hover, .datepicker table tr td.active:hover[disabled], .datepicker table tr td.active[disabled],
.datepicker table tr td span.active.active, .datepicker table tr td span.active.disabled, .datepicker table tr td span.active.disabled.active, .datepicker table tr td span.active.disabled.disabled, .datepicker table tr td span.active.disabled:active, .datepicker table tr td span.active.disabled:hover, .datepicker table tr td span.active.disabled:hover.active, .datepicker table tr td span.active.disabled:hover.disabled, .datepicker table tr td span.active.disabled:hover:active, .datepicker table tr td span.active.disabled:hover:hover, .datepicker table tr td span.active.disabled:hover[disabled], .datepicker table tr td span.active.disabled[disabled], .datepicker table tr td span.active:active, .datepicker table tr td span.active:hover, .datepicker table tr td span.active:hover.active, .datepicker table tr td span.active:hover.disabled, .datepicker table tr td span.active:hover:active, .datepicker table tr td span.active:hover:hover, .datepicker table tr td span.active:hover[disabled], .datepicker table tr td span.active[disabled],
.dropdown-item:hover,
.dropdown-item:active,
.dropdown-item.active,
.btn-group-with-images .btn-secondary.active .btn-img,
.btn-group-with-images .btn-secondary .btn-img:hover,
.btn.btn-secondary:hover,
.ui-dialog-buttonset button:nth-child(2),
.btn.btn-secondary:not(:disabled):not(.disabled).active, 
.btn.btn-secondary:not(:disabled):not(.disabled):active, 
.show>.btn-secondary.dropdown-toggle,
.card-counter-button:hover,
.card-hint .card-header,
.card-hint .card-body,
.card-hint .card-footer,
.sidebar,
.correction-icon:hover,
li.selected,
.dropdown-menu[role="combobox"] .dropdown-item.selected:hover { 
  background-color: rgb(var(--fibermaxx-color));
}

.btn.btn-primary,
.btn.btn-primary:disabled,
.btn.btn-primary[disabled="disabled"]:hover,
.btn-primary:not(:disabled):not(.disabled).active,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active:hover,
.btn-primary:not(:disabled):not(.disabled):active:hover,
.show>.btn-primary.dropdown-toggle,
.show>.btn-primary.dropdown-toggle:hover {
  /* background: linear-gradient(to right, #63b450, rgb(var(--fibermaxx-color))); */
  background-color: rgb(var(--fibermaxx-color));
}

tbody thead tr:nth-child(1) th,
.btn-group-with-images .btn-secondary:not(:disabled):not(.disabled).active,
.btn-group-with-images .btn-secondary:not(:disabled):not(.disabled).active:hover,
.btn-group-with-images .btn-secondary:not(:disabled):not(.disabled):hover,
.btn-group-with-images .btn-secondary:not(:disabled):not(.disabled):active,
.btn-group-with-symbols .btn-secondary:not(:disabled):not(.disabled),
.btn-group-with-symbols .btn-secondary:not(:disabled):not(.disabled):hover,
.btn-group-with-symbols .btn-secondary:not(:disabled):not(.disabled):active,
.btn-group-with-symbols .btn-secondary:not(:disabled):not(.disabled).active,
.btn-group-with-symbols .btn-secondary:not(:disabled):not(.disabled).active:hover {
  background-color: transparent;
}

.btn-group-image-tool,
.btn-group-for-fw,
.modal-body .imageEditor .tui-image-editor-main .tui-image-editor-wrap,
.modal-body .imageEditor .tui-image-editor-container .tui-image-editor-controls,
.tui-image-editor-container .tui-image-editor-menu > .tui-image-editor-item[tooltip-content]:hover:after,
.alert-success,
.nav-tabs .nav-link.tab-group-title,
.nav-tabs .nav-link.tab-group-title:hover,
.show>.btn-primary.dropdown-toggle:hover,
.ui-dialog-buttonset button:nth-child(2):hover,
.btn.btn-secondary,
.card-header,
.ui-dialog-titlebar.ui-widget-header,
.tooltip-inner,
.topbar-nav .dropdown-menu,
.sidebar a.active,
.sidebar li.nav-item:hover,
.card-footer,
.input-group-text,
.input-group input {
  background-color: #ffffff;
}

.alert-danger,
.formError .formErrorContent,
.formError .formErrorArrow div {
  background-color: #e2001a;
}

.btn.btn-primary:hover,
.btn-primary:not(:disabled):not(.disabled).active:hover,
.btn-primary:not(:disabled):not(.disabled):active:hover {
  background: linear-gradient(to right, #63b450, #63b450);
}



/******************/
/*** 6. BORDERS ***/
/******************/
.btn.btn-link,
.ui-dialog-buttonset button:first-child,
.ui-dialog-buttonset button:first-child:hover,
.ui-dialog-buttonset button:first-child:active,
.btn-group-with-images .btn.btn-secondary:not(:disabled):not(.disabled),
.btn-group-with-images .btn.btn-secondary:not(:disabled):not(.disabled):hover,
.nav-tabs,
.nav-tabs .nav-link,
.card-hint .card-header,
.card-hint .card-body,
.card-hint .card-footer,
.topbar-nav .dropdown-menu,
.formError .formErrorContent {
  border-radius: 0; 
  border: 0;
}

.card,
.modal-content,
.ui-dialog.ui-widget.ui-widget-content,
.btn-group-with-symbols .btn-secondary:not(:disabled):not(.disabled),
.ui-dialog-titlebar.ui-corner-all,
.tooltip-inner {
  border-radius: 0;
}

.card-header,
.ui-dialog-titlebar.ui-widget-header,
.ui-dialog-titlebar.ui-widget-header,
.ui-dialog-content.ui-widget-content,
.ui-dialog-buttonpane.ui-widget-content,
#layoutDialog,
div.ui-dialog.ui-widget.ui-widget-content.ui-front,
.ui-dialog-content.ui-widget-content,
button.ui-dialog-titlebar-close,
.nav-tabs-horizontal,
.btn.btn-primary,
.btn-primary:not(:disabled):not(.disabled).active,
.btn-primary:not(:disabled):not(.disabled):active,
.show>.btn-primary.dropdown-toggle,
.btn.btn-primary:hover,
.btn.btn-primary:disabled,
.btn.btn-primary[disabled="disabled"]:hover,
.btn-primary:not(:disabled):not(.disabled).active:hover,
.btn-primary:not(:disabled):not(.disabled):active:hover,
.show>.btn-primary.dropdown-toggle:hover {
  border: 0;
}

.btn-group-with-symbols .btn-secondary:not(:disabled):not(.disabled) {
  border-width: 1px;
  border-style: solid;
  border-color: #ffffff;
}

.custom-control-label:before,
.custom-control-input:focus:not(:checked)~.custom-control-label::before,
.custom-control-input:not(:disabled):active~.custom-control-label::before,
.custom-control-input:focus ~ .custom-control-label::before {
  border-width: 1px;
  border-style: solid;
  border-color: #999999;
}

.custom-control-input:checked~.custom-control-label::before,
.custom-checkbox .custom-control-input:indeterminate~.custom-control-label::before,
.btn-group-with-symbols .btn-secondary:not(:disabled):not(.disabled):hover,
.btn-group-with-symbols .btn-secondary:not(:disabled):not(.disabled):active,
.btn-group-with-symbols .btn-secondary:not(:disabled):not(.disabled).active,
.btn-group-with-symbols .btn-secondary:not(:disabled):not(.disabled).active:hover,
.ui-dialog-buttonset button:nth-child(2),
.btn-secondary:not(:disabled):not(.disabled).active, 
.btn-secondary:not(:disabled):not(.disabled):active, 
.show>.btn-secondary.dropdown-toggle,

.ui-dialog-buttonset button:nth-child(2):hover,
.btn.btn-secondary,
.btn.btn-secondary:hover {
  border-width: 1px;
  border-style: solid;
  border-color: rgb(var(--general-color));
}

.alert-success,
.tui-colorpicker-palette-button,
.tui-colorpicker-vml-slider,
.tui-colorpicker-svg-slider,
.tui-colorpicker-svg-huebar,
.form-control,
.input-group-text,
.bootstrap-select .btn.btn-light,
.bootstrap-select .btn.btn-light:hover,
.form-control:focus, 
.form-control.focus,
.bootstrap-select .dropdown-toggle:focus,
.bootstrap-select>select.mobile-device:focus+.dropdown-toggle,
.dropzone,.card,
/* .modal-content, */
.ui-dialog.ui-widget.ui-widget-content {
  border-width: 1px;
  border-style: solid;
  border-color: #e6e6e6;
}

.alert-danger {
  border-width: 1px;
  border-style: solid;
  border-color: #e52e2e;
}

#igTab.nav-tabs {
  border-right: 1px solid #e6e6e6;
  height: 100%;
}

.nav-tabs-horizontal,
.card-header,
.ui-dialog-titlebar.ui-widget-header {
  border-bottom: 1px solid #e6e6e6;
}

.card-footer,
.ui-dialog-buttonpane.ui-widget-content {
  border-top: 1px solid #e6e6e6;
}

.input-group input,
input:focus.txtSearch {
  border-right: 0
}

.input-group-text {
  border-left-width: 0
}

thead,
thead.fixed {
  border-bottom: 2px solid #e6e6e6;
}



/**********************/
/*** 7. BOX-SHADOWS ***/
/**********************/
.formError .formErrorArrow div,
.ni-slide {
  box-shadow: none;
}

.alert-success,
.alert-danger {
  box-shadow: 0 0 8px rgba(0,0,0,0.15);
}

.btn-group-image-tool,
.btn-group-for-fw,
.tui-image-editor-container .tui-image-editor-menu > .tui-image-editor-item[tooltip-content]:hover:after,
.tooltip-inner,
.topbar-nav .dropdown-menu {
  box-shadow: 0 0 13px rgba(0,0,0,0.15);
}

.card-hint img {
  box-shadow: 0 0 13px rgba(0,0,0,0.25)
}

.card,
.modal-content,
.ui-dialog.ui-widget.ui-widget-content {
  box-shadow: 0px 3px 3px 0px #e0e0e0;
}



/*******************/
/*** 8. PADDINGS ***/
/*******************/
.input-group-prepend .btn.btn-link,
.input-group-prepend .btn.btn-link:hover,
.input-group-append .btn.btn-link,
.input-group-append .btn.btn-link:hover,
.nav-tabs-horizontal .nav-item,
.btn-group-with-images .btn-secondary:not(:disabled):not(.disabled),
.btn-group-with-images .btn-secondary:not(:disabled):not(.disabled):hover {
  padding: 0;
}

.btn-group-with-symbols .btn-secondary:not(:disabled):not(.disabled) {
  padding: 4px;
}

.form-control,
.input-group-text,
.bootstrap-select .btn.btn-light,
.bootstrap-select .btn.btn-light:hover,
.dropdown-menu>li>a {
  padding: 8px;
}

.alert,
.bg-info,
.datepicker-days,
.card-header,
.card-body,
.card-footer,
.ui-dialog-titlebar,
.ui-dialog-content,
.ui-dialog-buttonpane,
.topbar-nav .dropdown-menu,
#correction-timeframe.dropdown-menu,
.correction-icon:hover,
.tooltip-inner {
  padding: 16px;
}



/******************/
/*** 9. MARGINS ***/
/******************/
.card-header h1,
.card-header h2,
.card-header h3,
.card-header h4,
.card-header h5,
.card-header h6,
.modal-header h1,
.modal-header h2,
.modal-header h3,
.modal-header h4,
.modal-header h5,
.modal-header h6,
.ui-dialog-content.ui-widget-content p,
.selectContainer h6, .selectDesignlineContainer h6,
.passtrengthMeter p {
  margin-bottom: 0;
}

.btn-group-with-images .btn-secondary:not(:disabled):not(.disabled),
.btn-group-with-images .btn-secondary:not(:disabled):not(.disabled):hover {
  margin: 8px;
}



/******************/
/*** 10. TABLES ***/
/******************/
table {
  margin-top: 0;
  overflow-y: none;
}

.table-responsive .table-responsive {
  height: auto;
  width: 100%;
}

td {
  vertical-align: middle !important
}

/* 2021-02-23 - ts - #13248 - Speziell für Plan-Elemente */
.plan-element-infos tr td {
	vertical-align:top !important;
}

.plan-element-infos tr td textarea {
	width:100%;
}

/*** SCROLL TABLES ***/
[class*="table-scroll-"] {
  overflow: hidden;
}

.table-scroll-400 {height: auto; min-height: 465px;}
.table-scroll-500 {height: 500px !important;}
.table-scroll-600 {height: 600px !important;}
.table-scroll-700 {height: 700px !important;}
.table-scroll-invoice {height: 1215px !important;}

thead.fixed-head tr:nth-child(1) th {
  background: white;
  position: sticky;
  top: 0;
  z-index: 99;
  border: 0;
}

.overflow-y-auto {
  overflow-y: auto; 
}

/*** SORTING ICONS ***/
#dashboard-orders th:last-child:before {
	right: 2em;
}

#dashboard-orders th:last-child:after {
	right: 1.5em;
}

.table thead th {
  border: 0;
}

/*** Data Tables ***/
div.dts div.dataTables_scrollBody {
	background: none;
}

table.dataTable {
	margin: 0 0 0 0 !important;
}

.dataTables_scrollBody { -ms-overflow-style: none; }
.dataTables_scrollBody { overflow: -moz-scrollbars-none; }
.dataTables_scrollBody::-webkit-scrollbar { width: 0 !important }

.dataTables_processing {
	background-color: transparent !important;
	border: none;
	box-shadow: none;
	z-index: 9999;
}
.dataTables_processing div{
  margin: 0 auto !important;
  background-color: white;
}

.dataTables_scrollHeadInner, .dataTables_scrollHeadInner table {
	width: 100% !important;	
}

.dataTables_length .bootstrap-select {
	width: 75px !important;
}

/*** Disinfection Tables ***/
/* 2021-02-13 - ts - #13248 - aus CSS entfernt */
/*
.disinfection-plan-elements {
  max-height: 400px;
  overflow-y: scroll;
}
*/

.desinfection-table thead tr {
  border-bottom: 0;
}

.desinfection-table td {
  vertical-align: top !important;
  font-size: 12px;
}



/*****************/
/*** 11. LISTS ***/
/*****************/
ul {
  padding-inline-start: 0;
  list-style-type: none;
}

ul li.list-style-dash::before {
  content: "-";
  padding-right: 8px;
}



/******************/
/*** 12. ALERTS ***/
/******************/
.alerts {
  position: fixed;
  right: 25px; bottom: 25px;
  z-index: 9999;
  background: none;
}

.alerts #alertsContainer {
  min-width: 350px;
  max-height: 450px;
  overflow-y: auto;
  padding: 0 8px 0 0;
  background: none;
}

.alert {
  margin-bottom: 8px;
  border-radius: 0;
}

.alert .close {
  text-shadow: none;
  padding: 1rem 1rem;
  margin: -1rem -1rem -1rem auto;
  padding-top: 11px;
}

.close:hover {
  cursor:pointer;
}



/****************/
/*** 13. TABS ***/
/****************/
.tab-pane .row:first-child {
  margin-top: 0 !important;
}



/**************************/
/*** 14. FORMS & INPUTS ***/
/**************************/
label {
  margin-bottom: 4px;
}

.form-control,
.input-group-text,
.bootstrap-select .btn.btn-light,
.bootstrap-select .btn.btn-light:hover {
  border-radius: 0;
  height: calc(1.5em + .75rem + 2px);
}

textarea.form-control {
  width: 100%;
  min-height: 100px;
  height: auto;
}

/*** SEARCH ***/
input:placeholder {
  font-style: italic;
}

/*** CUSTOM CONTROLS ***/
.custom-control-label:before,
.custom-control-label:after { 
  height: 16px;
  width: 16px;
}

.custom-control-input:not(:disabled):active~.custom-control-label::before {
  background-color: #fff;
}

.custom-control.custom-switch label {
  padding-top: 1px;  
}

.custom-control-input:disabled~.custom-control-label {
  color: rgb(var(--general-color));
}

.custom-switch .custom-control-input:disabled:checked~.custom-control-label::before {
  background-color: rgb(var(--general-color));
  opacity: 0.5;
}

/*** DROPDOWNS ***/
.bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn) {
  width: 100%;
}

.dropdown-menu {
  border-radius: 0;
  padding: 0;
}

.bootstrap-select .dropdown-toggle .filter-option {
  height: 22px;
}

.bootstrap-select .dropdown-toggle .filter-option-inner-inner {
  overflow: hidden;
  text-overflow: ellipsis;
}

a#for-correction-timeframe.dropdown-toggle::after,
.bootstrap-select.show-tick .dropdown-menu .selected span.check-mark {
  display: none;
}

.dropdown.bootstrap-select.show-tick .dropdown-menu {
  min-width: 320px;
  max-height: 320px;
}

/*** DROPZONE ***/
.dropzone  {
  min-height: 218px;
  padding: 32px;
}



/*******************/
/*** 15. BUTTONS ***/
/*******************/
.h1-with-button button, 
.h1-with-button a {
 margin-top: -12px; 
}

.h2-with-button button {
 margin-top: -5px; 
}

.btn,
.ui-dialog-buttonset button,
.custom-control,
.custom-control-label:before,
.custom-control-label:after,
.card-counter-button,
.sidebar li.nav-item,
.tui-colorpicker-palette-button,
tr.tr-clickable:hover,
.passtrengthMeter .showPassword:hover,
#designlinien [type=radio] + img,
#topbar-designlinien [type=radio] + img,
#stepCheckout .zoominbtn,
.nav-tui label,
.nav-tui label.active,
.nav-wysiwyg label,
.wysiwyg-options h4 {
  cursor: pointer;
}

.btn,
.ui-dialog-buttonset button {
  padding: 6px 12px;
  border-width: 0px;
  border-style: solid;
  border-radius: 0px;
}

.ui-dialog-buttonset button:first-child {
  margin-right: 16px;
}

/*** LINK ***/
.btn-link,
.btn.btn-link:link,
.btn.btn-link:visited,
.btn.btn-link:hover,
.btn.btn-link:active,
.ui-dialog-buttonset button:first-child,
.ui-dialog-buttonset button:first-child:hover,
.ui-dialog-buttonset button:first-child:active {
  padding: 6px 12px;
}

/*** BUTTON GROUPS ***/
.btn-group>.btn-group:not(:first-child),
.btn-group>.btn:not(:first-child) {
  margin-left: 0px;
}

/*** Editor ***/
.disinfection-plan-element {
  background: #f1f1f1;
}

.disinfection-plan-element-added {
  background: linear-gradient(to right, rgb(var(--general-color)), #63b450 80%, rgb(var(--general-color)) 90%);
  color: #fff;
}



/**********************/
/*** 16. UI DIALOGS ***/
/**********************/
.ui-dialog-titlebar.ui-widget-header,
.ui-dialog-content.ui-widget-content,
.ui-dialog-buttonpane.ui-widget-content,
#layoutDialog {
  width: 500px !important;
  margin: auto;
}

div.ui-dialog.ui-widget.ui-widget-content.ui-front {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1050;
  width: 100% !important;
  max-width: 100% !important;
  height: 100vh !important;
  max-height: 100vh !important;
  outline: 0;
  background: rgba(0,0,0,0.5);
}

.ui-dialog-titlebar.ui-widget-header {
  margin-top: 100px;
}

.ui-dialog-content.ui-widget-content {
  height: auto !important;
}

.ui-dialog-buttonpane.ui-widget-content {
  text-align: right;
}

button.ui-dialog-titlebar-close {
  background: none;
  padding: 1rem 1rem;
  margin: -1rem -1rem -1rem auto;
  float: right;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  color: rgb(var(--general-color));
  text-shadow: none;
  opacity: 0.5;
}

button.ui-dialog-titlebar-close:hover {
  opacity: 1;
}

button.ui-dialog-titlebar-close {
  outline: none;
}

button.ui-dialog-titlebar-close:after {
  content: '×';
}



/********************/
/*** 17. TOOLTIPS ***/
/********************/
.tooltip-inner {
  max-width: 600px;
  max-height: 800px;
  text-align: left;
}

.tooltip-inner img {
  max-width: 500px;
  max-height: 700px;
}

.tooltip.show {
  opacity: 1;
}

.image-tool-tip {
	width: 510px !important; 
	height: 510px !important; 
	max-width: 510px !important; 
	max-height: 5100px !important;
	display: block;
	margin: 0 0 0 0 !important;
	padding: 0 0 0 0 !important;
	position: relative;
}

.image-tool-tip .tooltip-inner {
	display: block;
	top: 50%;
    left: 50%;
    margin: 0;
	position: absolute;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
	width: 500px;
	height: 500px;
}

.image-tool-tip.bs-tooltop-right .arrow {
	margin-left: -10px;
}

.image-tool-tip img {
	max-width: 470px !important; 
	max-height: 470px !important;
	margin: 0;
	position: absolute;
	top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.jqstooltip.igSparkline{
  -webkit-box-sizing: content-box !important;
  -moz-box-sizing: content-box !important;
  box-sizing: content-box !important;
  background-color: white;
  color: black;
  font-size: 14px;  
}

.jqstooltip.igSparkline div {
	padding: 10px;
}


/*****************************/
/*** 18. VALIDATION ENGINE ***/
/*****************************/
.formError {
  width: 200px;
  opacity: 1 !important;
}

.formError .formErrorContent {
  padding: 1rem;
  text-align: left;
  border-radius: 0;
  box-shadow: 0 0 13px rgba(0,0,0,0.15);
}

.formError .formErrorArrow div,
.formError .formErrorArrow .line3 {
  border: 0;
}

.formError .formErrorArrow .line1, 
.formError .formErrorArrow .line2 {
  background: none;
  display: none;
}



/*****************************/
/*** 19. PASSWORD STRENGTH ***/
/*****************************/
.passtrengthMeter{
  position: relative;
  width: 100%;
}

.passtrengthMeter::after {
  margin-bottom: -15px;
}

.passtrengthMeter > input{
  width: 100%;
  display: inline-block;
  padding: 4px;
  box-sizing: border-box;
  -moz-box-shadow: none !important;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
}

.passtrengthMeter > input:focus {
  outline-width: 0;
}

.passtrengthMeter::after{
  content: '';
  height: 3px;
  overflow: hidden;
  width: 0%;
  transition: width .5s;
  position: absolute;
  left: 0px;
  bottom: 1em;
}

.passtrengthMeter.weak::after{
  background-color: #EC644B;
  width: 25%;
}

.passtrengthMeter.medium::after{
  content: '';
  background-color: #E87E04;
  width: 50%;
}

.passtrengthMeter.strong::after{
  content: '';
  background-color: #EFBF17;
  width: 75%;
}

.passtrengthMeter.very-strong::after{
  content: '';
  background-color: #42A72A;
  width: 100%;
}

.passtrengthMeter .showPassword{
  position: absolute;
  width: 20px;
  top: calc(50% - 10px);
  right: 10px;
}

.passtrengthMeter .showPassword.active{
  opacity: .5;
}

.passtrengthMeter .showPassword img{
  display: block;
  width: 100%;
  height: auto;
}

.passtrengthMeter .tooltipPW {
  top: 100%;
  display: block;
  left: 20%;
  margin-bottom: 15px;
  opacity: 0;
  padding: 1rem;
  pointer-events: none;
  position: absolute;
  min-width: 70px;
  box-sizing: border-box;
  text-align: left;
  z-index: 10;
  min-width: 200px;
  -webkit-transform: translateY(5px);
  -moz-transform: translateY(5px);
  -ms-transform: translateY(5px);
  -o-transform: translateY(5px);
  transform: translateY(5px);
  -webkit-transition: all .25s ease-out;
  -moz-transition: all .25s ease-out;
  -ms-transition: all .25s ease-out;
  -o-transition: all .25s ease-out;
  transition: all .25s ease-out;
  -webkit-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
  -moz-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
  -ms-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
  -o-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
  box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
}

.passtrengthMeter.weak .tooltipPW:after{
  border-left: solid transparent 7px;
  border-right: solid transparent 7px;
  border-bottom: solid #EC644B 7px;
  top: -7px;
  content: " ";
  height: 0;
  left: 50%;
  margin-left: -7px;
  position: absolute;
  width: 0;
}

.passtrengthMeter.medium .tooltipPW:after{
  border-left: solid transparent 7px;
  border-right: solid transparent 7px;
  border-bottom: solid #E87E04 7px;
  top: -7px;
  content: " ";
  height: 0;
  left: 50%;
  margin-left: -7px;
  position: absolute;
  width: 0;
}

.passtrengthMeter p {
  color: #999;
}

.passtrengthMeter h6 {
  margin-bottom:  1rem;
}

.passtrengthMeter.weak .tooltipPW h6 { 
  color: #EC644B;
}

.passtrengthMeter.medium .tooltipPW h6 {
  color: #E87E04;
}

.passtrengthMeter.strong .tooltipPW h6 {
  color: #EFBF17;
}

.passtrengthMeter.very-strong .tooltipPW h6 {
  color: #42A72A;
}
.passtrengthMeter.strong .tooltipPW:after{
  border-left: solid transparent 7px;
  border-right: solid transparent 7px;
  border-bottom: solid #EFBF17 7px;
  top: -7px;
  content: " ";
  height: 0;
  left: 50%;
  margin-left: -7px;
  position: absolute;
  width: 0;
}

.passtrengthMeter.very-strong .tooltipPW:after{
  border-left: solid transparent 7px;
  border-right: solid transparent 7px;
  border-bottom: solid #42A72A 7px;
  top: -7px;
  content: " ";
  height: 0;
  left: 50%;
  margin-left: -7px;
  position: absolute;
  width: 0;
}

.passtrengthMeter.weak .tooltipPW:before {
  top: -20px;
  content: " ";
  display: block;
  height: 20px;
  left: 0;
  position: absolute;
  width: 100%;
}

.passtrengthMeter .tooltipPW:after {
  border-left: solid transparent 7px;
  border-right: solid transparent 7px;
  border-bottom: solid rgb(var(--general-color)) 7px;
  top: -7px;
  content: " ";
  height: 0;
  left: 50%;
  margin-left: -7px;
  position: absolute;
  width: 0;
  -webkit-transition: all .25s ease-out;
  -moz-transition: all .25s ease-out;
  -ms-transition: all .25s ease-out;
  -o-transition: all .25s ease-out;
  transition: all .25s ease-out;
}

.passtrengthMeter:hover .tooltipPW {
  opacity: 1;
  pointer-events: auto;
  -webkit-transform: translateY(10px);
  -moz-transform: translateY(10px);
  -ms-transform: translateY(10px);
  -o-transform: translateY(10px);
  transform: translateY(10px);
}

.lte8 .passtrengthMeter .tooltipPW {
  display: none;
}

.lte8 .passtrengthMeter:hover .tooltipPW {
  display: block;
}



/**************************/
/*** 20. NAVS & SIDEBARS***/
/**************************/
/*** Topbar ***/
.fibermaxx-grad {
  width: 100%;
  position:fixed;
  top: 0;
  left: 0;
  height: 5px;
  background: linear-gradient(to right, #E2001A 0%, #E2001A 5.4%, rgb(var(--general-color)) 5.4%);
  z-index: 1021;
}

/** 2023-02-16 - ts - #16360 - Angepasster Style **/
.navbar.sticky-top {
  /* height: 110px; */
  height: 80px;
  background-color: #fff !important;
}

/*** Info Sidebar ***/
.hintSidebarRight {
  top: 0;
  bottom: 0;
  right: 0;
  position: fixed;
  width: 0;
  height: 100%;
  background-color: #fff;
  box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
  border-left: 1px solid #e0e0e0;
  padding: 8.2em 0 0 0;
  transition: all 0.3s ease-in-out;
  z-index: 100;
}

.footer-buttons-fixed {
  position: absolute;
  bottom: 0; 
  left: 0;
}


/*****************/
/*** 21. LOGIN ***/
/*****************/
.login {
  height: 100vh; 
  overflow: hidden;
  background: radial-gradient(#fff, #e5f1e1);
}

.login-left {
  position: relative; 
  width: 30%;
  background-color: #fff;
  z-index: 2;
  box-shadow: 5px 0 13px rgba(0,0,0,0.15)
}

.login-box {
  position: relative;
  max-width: 350px;
  margin: 2rem auto;
  height: 640px;
  max-height: 640px;
}

.login-right {
  width: 70%; 
  background-color: #f1f1f1; 
  padding: 100px;
  z-index: 1;
}

footer.footer {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 60px;
	line-height: 60px;
	text-align: center;
}


/*************************/
/*** 22. MEDIA QUERIES ***/
/*************************/
@media (max-width:1499px) {	
  
}

@media (max-width:1200px) {	
  
}

@media (min-width: 992px) {
  .animate {
    animation-duration: 0.3s;
    -webkit-animation-duration: 0.3s;
    animation-fill-mode: both;
    -webkit-animation-fill-mode: both;
  }
}



/**********************/
/*** 23. ANIMATIONS ***/
/**********************/
.slideIn {
  -webkit-animation-name: slideIn;
  animation-name: slideIn;
}

@keyframes slideIn {
  0% {
    transform: translateY(1rem);
    opacity: 0;
  }
  100% {
    transform:translateY(0rem);
    opacity: 1;
  }
  0% {
    transform: translateY(1rem);
    opacity: 0;
  }
}

@-webkit-keyframes slideIn {
  0% {
    -webkit-transform: transform;
    -webkit-opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
    -webkit-opacity: 1;
  }
  0% {
    -webkit-transform: translateY(1rem);
    -webkit-opacity: 0;
  }
}

/* FadeIn */
@keyframes fadeIn {
  from {
    transform: translate3d(0,0,0);
  }

  to {
    transform: translate3d(0,0,0);
    opacity: 1;
  }
}

@-webkit-keyframes fadeIn {
    from {
      transform: translate3d(0,0,0)
    }

    to {
        transform: translate3d(0,0,0);
        opacity: 1
    }
}

/* FadeInUp */
@keyframes fadeInUp {
  from {
    transform: translate3d(0,40px,0)
  }

  to {
    transform: translate3d(0,0,0);
    opacity: 1
  }
}

@-webkit-keyframes fadeInUp {
    from {
      transform: translate3d(0,40px,0)
    }

    to {
        transform: translate3d(0,0,0);
        opacity: 1
    }
}

/* FadeInRight */
@keyframes fadeInRight {
  from {
    transform: translate3d(-40px,0,0)
  }

  to {
    transform: translate3d(0,0,0);
    opacity: 1
  }
}

@-webkit-keyframes fadeInRight {
  from {
    transform: translate3d(-40px,0,0)
  }

  to {
    transform: translate3d(0,0,0);
    opacity: 1
  }
}

/* FadeInLeft */
@keyframes fadeInLeft {
  from {
    transform: translate3d(40px,0,0)
  }

  to {
    transform: translate3d(0,0,0);
    opacity: 1
  }
}

@-webkit-keyframes fadeInLeft {
  from {
    transform: translate3d(40px,0,0)
  }

  to {
    transform: translate3d(0,0,0);
    opacity: 1
  }
}

@keyframes show-animation {
  from {
    max-height: 0;
    visibility: hidden;
    opacity: 0;
  }
  
  to {
    max-height: 60px;
    visibility: visible;
    opacity: 1;
  }
}

@keyframes hide-animation {
  from {
    max-height: 60px;
    visibility: visible;
    opacity: 1;
  }
  
  to {
    max-height: 0;
    visibility: hidden;
    opacity: 0;
  }
}

.animated {
  animation-duration: 1s;
  animation-fill-mode: both;
  -webkit-animation-duration: 1s;
  -webkit-animation-fill-mode: both
}

.animatedFadeIn,
.animatedFadeInUp,
.animatedFadeInRight,
.animatedFadeInLeft {
    opacity: 0
}

.fadeIn {
  opacity: 0;
  animation-name: fadeIn;
  -webkit-animation-name: fadeIn;
}

.fadeInUp {
  opacity: 0;
  animation-name: fadeInUp;
  -webkit-animation-name: fadeInUp;
}

.fadeInRight {
  opacity: 0;
  animation-name: fadeInRight;
  -webkit-animation-name: fadeInRight;
}

.fadeInLeft {
  opacity: 0;
  animation-name: fadeInLeft;
  -webkit-animation-name: fadeInLeft;
}

.showAnimated {
   animation: show-animation .3s linear forwards;
}

.hideAnimated {
   animation: hide-animation .3s linear forwards;
}

.rotateExtendedIcon {
	animation: rotateExtendedIcon 0.5s linear 1;
	animation-fill-mode: forwards;
}

.rotateExtendedIconBack {
	animation: rotateExtendedIconBack 0.5s linear 1;
	animation-fill-mode: forwards;
}

@keyframes rotateExtendedIcon {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(180deg);
	}
}

@keyframes rotateExtendedIconBack {
	from {
		transform: rotate(180deg);
	}
	to {
		transform: rotate(0deg);
	}
}

/* Delays */
.delay-100 { animation-delay: 0.1s; }
.delay-110 { animation-delay: 0.11s; }
.delay-120 { animation-delay: 0.12s; }
.delay-130 { animation-delay: 0.13s; }
.delay-140 { animation-delay: 0.14s; }
.delay-150 { animation-delay: 0.15s; }
.delay-160 { animation-delay: 0.16s; }
.delay-170 { animation-delay: 0.17s; }
.delay-180 { animation-delay: 0.18s; }
.delay-190 { animation-delay: 0.19s; }

.delay-200 { animation-delay: 0.2s; }
.delay-210 { animation-delay: 0.21s; }
.delay-220 { animation-delay: 0.22s; }
.delay-230 { animation-delay: 0.23s; }
.delay-240 { animation-delay: 0.24s; }
.delay-250 { animation-delay: 0.25s; }
.delay-260 { animation-delay: 0.26s; }
.delay-270 { animation-delay: 0.27s; }
.delay-280 { animation-delay: 0.28s; }
.delay-290 { animation-delay: 0.29s; }

.delay-300 { animation-delay: 0.3s; }
.delay-400 { animation-delay: 0.4s; }
.delay-500 { animation-delay: 0.5s; }
.delay-600 { animation-delay: 0.6s; }
.delay-700 { animation-delay: 0.7s; }
.delay-800 { animation-delay: 0.8s; }
.delay-900 { animation-delay: 0.9s; }
.delay-1000 { animation-delay: 1.0s; }
.delay-2000 { animation-delay: 2.0s; }

/************************/
/*** SPECIAL ELEMENTS ***/
/************************/
.topbar-nav {
	-ms-flex: 0 0 calc(100% - 280px);
	flex: 0 0 calc(100% - 280px);
	max-width: calc(100% - 280px);
}

.uploadedCompanyLogosTable {
	margin-top:0;
	margin-bottom:0;
}

.uploadedCompanyLogosTable div {
	-ms-flex: 0 0 10em;
	flex: 0 0 10em;
	max-width: 10em;
}

/*************************/
/*** LOADING ANIMATION ***/
/*************************/

#loadingAnimation {
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: rgba(255,255,255,0.9);
	z-index: 1000;	
	display: none;
}
.spinnerContainer {
	margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.pulse {
    background-color: transparent;
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(255, 103, 21, 1);
    width: 50px;
    height: 50px;
    transform: scale(1);
    animation: pulse 2s infinite;
    animation-delay: 0.3s
}
.pulse-2 {
    background-color: transparent;
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(255, 103, 21, 1);
    width: 50px;
    height: 50px;
    transform: scale(1);
    animation: pulse 2s infinite;
}
@keyframes pulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(255, 103, 21, 0.7);
    }

   50% {
       transform: scale(0.95);
       box-shadow: 0 0 0 16px rgba(255, 103, 21, 0);
   }

   100% {
       transform: scale(1);
       box-shadow: 0 0 0 0 rgba(255, 103, 21, 0);
   }
}
.pulse_white {
    background-color: transparent;
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 1);
    width: 50px;
    height: 50px;
    transform: scale(1);
    animation: pulse_white 2s infinite;
    animation-delay: 0.3s
}
.pulse-2_white {
    background-color: transparent;
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 1);
    width: 50px;
    height: 50px;
    transform: scale(1);
    animation: pulse_white 2s infinite;
}
@keyframes pulse_white {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
    }

   50% {
       transform: scale(0.95);
       box-shadow: 0 0 0 16px rgba(255, 255, 255, 0);
   }

   100% {
       transform: scale(1);
       box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
   }
}

.modal-dialog {
	height:calc(100vh - 56px);
	overflow:hidden;
}

.planTemplateChoice {
	padding:15px;
	cursor:pointer;
}

.planTemplateChoice.selected {
	background: rgb(var(--general-color));
	cursor:default;
}

/********************************************************** User defines ********************************************************/
/** 2023-02-08 - ts - #16319 **/
.pin {
	margin-left:95%;
	margin-bottom:1em;
	height:2em;
	font-size:.8em;
}

.sectorParent,
.sectorChild,
.customerElement,
#main-container .infoArea .furtherInformation > div,
.sectorArea .specialbuttons img {
	cursor:pointer;
}

.sectorChilds {
	margin-left:1.4em;
}

.sectorChild.active {
	font-weight: bold;
}

.customerElement,
#main-container .infoArea .furtherInformation {
	border-bottom: 1px solid rgba(var(--general-color), .15);
}
	
.customerElement {
	padding: 5px;
	padding-right:10px;
}

.customerElement.active {
	border-right: 5px solid rgb(var(--general-color));
	background: rgba(var(--general-color), .1);
	padding-right:5px;
}

/** 2023-02-09 - ts - #16319 - Dashboard **/
.dashboardDiv > div {
	position:relative;
	height: calc(100vh - 110px);
	padding-top:20px;
}

.dashboardDiv .infoArea {
	border-right:none;
	padding-top:48px;
}

.dashboardDiv .content {
	margin: 0 10px;
}

.sectorArea .content {
	height:calc(100% - 5.2em);
}

.sectorArea .specialbuttons {
	position:fixed;
	bottom:2.2em;
	width:calc((100% / 6) - 24px);
	padding:0 12px;
	margin:0;
	height:2.2em;
}
	
/** 2023-02-09 - ts - #16319 - Left Menu **/
/*** SIDEBAR NAV ***/
.sidebar {
  position: fixed;
  max-width: 60px;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 100;
  /* padding: 65px 0 0 0; */
  /* padding: 120px 0 0 0; */
  padding: 80px 0 0 0;
  transition: max-width 0.2s ease-out;
}

.sidebar-sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  height: calc(100vh - 48px);
  margin: 0;
  overflow-x: hidden;
  overflow-y: auto;
}

.sidebar ul {
  padding: 0;
}

.sidebar .nav-link {
  padding: 12px 16px;
}

.sidebar i {
  display: inline-block;
  min-width: 26px;
  text-align: center;
}

/* Side Nav Extension */
.sidebar.extend {
  /* max-width: 300px; */
  max-width: none;
  width:200px;
}

.sidebar.extend li.nav-item span.extension,
.fixed-sidebar .sidebar li.nav-item span.extension {
  display: inline-block;
  margin-left: 10px;
  vertical-align: top;
}

.sidebar li.nav-item span,
.fixed-sidebar .sidebar li.nav-item span {
  font-size: 14px;
}

.openSidebar {
	display: inline-block;
	margin-left: 20px;
}