/* Version 2.0.1. */

/* COLORS +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

:root {
  --black: 					rgba(26,26,26,1);
  --white: 					rgba(255,255,255,1); 
  --grey: 					rgba(127,127,127,1);  
  --red:					rgba(210,0,0,1);
  --cyan:					rgba(45,184,210,1);
  --teal:					rgba(28,117,133,1);
  --green:					rgba(151,191,41,1);
  
  --hover-grey:				rgba(144,144,144,1);
  --hover-red:				rgba(178,0,0,1);
  --hover-cyan:				rgba(38,156,178,1);
  --hover-teal:				rgba(24,99,113,1);
  --hover-green:			rgba(128,162,35,1);
  
  --border-grey:			rgba(218,218,219,1);
  --btn-border-grey:		rgba(210,210,210,1);
  --btn-border-hover-grey:	rgba(178,178,178,1); 
  
  --light-grey:				rgba(242,242,242,1);
  --light-grey-01:			rgba(251,251,251,1);
  --light-grey-02:			rgba(248,248,248,1);
  --light-grey-03:			rgba(205,205,205,1);
  --light-grey-04:			rgba(185,185,185,1);
  --light-grey-05:			rgba(170,170,170,1);
  --light-cyan:				rgba(224,245,248,1); 
  --light-red:				rgba(252,237,237,1); 

  --hover-light-cyan:		rgba(206,239,244,1);
  --hover-light-grey-02:	rgba(242,242,242,1);
  --hover-light-grey-05:	rgba(178,178,178,1);
  
  --semantic-blue:			rgba(0,105,209,1);
  --semantic-bg-blue:		rgba(0,105,209,.12);
  
  --semantic-green:			rgba(0,167,103,1);
  --semantic-bg-green:		rgba(0,167,103,.12);
  
  --semantic-orange:		rgba(255,148,41,1);
  --semantic-bg-orange:		rgba(255,148,41,.12);
  
  --semantic-red:			rgba(255,41,41,1);
  --semantic-bg-red:		rgba(255,41,41,.12);
  
  --semantic-grey:			rgba(127,127,127,1);
  --semantic-bg-grey:		rgba(127,127,127,.12);
    
}

.custom-color-black 					{color: var(--black) !important;}
.custom-color-white						{color: var(--white) !important;}
.custom-color-primary    	/* red */ 	{color: var(--red) !important;}
.custom-color-secondary  	/* cyan */ 	{color: var(--cyan) !important;}
.custom-color-additional 	/* teal*/ 	{color: var(--teal !important);}
.custom-color-grey		 				{color: var(--grey) !important;}

.custom-bg-white						{background-color: var(--white) !important;}
.custom-bg-primary    		/* red */ 	{background-color: var(--red) !important;}
.custom-bg-secondary  		/* cyan */ 	{background-color: var(--cyan) !important;}
.custom-bg-additional		/* teal*/ 	{background-color: var(--teal) !important;}

.custom-bg-primary-light				{background-color: var(--light-red) !important;}
.custom-bg-grey-light					{background-color: var(--light-grey) !important;}
.custom-bg-grey-lighter					{background-color: var(--light-grey-02) !important;}
.custom-bg-cyan-light					{background-color: var(--light-cyan) !important;}

.custom-border							{border: 1px solid var(--border-grey);}

.custom-semantic-text-info   		/* blue */ 		{color: var(--semantic-blue);}
.custom-semantic-text-success  		/* green */ 	{color: var(--semantic-green);}
.custom-semantic-text-warning  		/* orange */ 	{color: var(--semantic-orange);}
.custom-semantic-text-error	 		/* red */ 		{color: var(--semantic-red);}
.custom-semantic-text-inactive	 	/* grey */ 		{color: var(--semantic-grey);}

.custom-semantic-color-info   		/* blue */ 		{color: var(--semantic-blue); background-color: var(--semantic-bg-blue);}
.custom-semantic-color-success  	/* green */ 	{color: var(--semantic-green); background-color: var(--semantic-bg-green);}
.custom-semantic-color-warning  	/* orange */ 	{color: var(--semantic-orange); background-color: var(--semantic-bg-orange);}
.custom-semantic-color-error	 	/* red */ 		{color: var(--semantic-red); background-color: var(--semantic-bg-red);}
.custom-semantic-color-inactive	 	/* grey */ 		{color: var(--semantic-grey); background-color: var(--semantic-bg-grey);}

/* Special Border/Color */

.custom-wrap-content .custom-container-border.custom-container-bg {
	border: 1px solid var(--border-grey);
}

.custom-wrap-content .custom-container-border.custom-bg-primary-light {
	border: 1px solid rgba(210,0,0,.2);
}

/* BUTTONS +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

a.btn 								{display: inline-flex;}

.btn.disabled,
.btn:disabled, 
fieldset:disabled .btn				{opacity: .25; border-color: transparent;}

.custom-btn 						{display: flex; align-items: center; justify-content: center; padding: 0 .75em; height: 2.5em; color: var(--white) !important; 
									background-color: var(--grey) !important; 
									font-size: 1em; font-weight: 500; white-space: nowrap;
-									webkit-transition: all 50ms ease; -moz-transition: all 50ms ease; -o-transition: all 50ms ease; transition: all 50ms ease;}
.custom-btn:hover					{color: var(--white) !important; background-color: var(--hover-grey) !important; transform: scale(1.04);}

.custom-btn.custom-btn-sm			{font-size: 87%;}
.custom-btn.custom-btn-xl			{font-size: 125%; height: 2.5em;}

.custom-btn .custom-icon			{display: inline-block; width: 1.1765em; height: 1.1765em;}
.custom-btn .custom-icon img		{width: 100%; height: 100%; object-fit: contain; vertical-align: baseline;}

.custom-btn-icon-only				{min-width: 3.5em; padding: 0 .5em;}
.custom-btn-icon-only .custom-icon	{width: 1.1765rem; height: 1.1765rem;}

.custom-btn .custom-badge-number	{margin-right: -.15em; padding-top: 0; padding-bottom: 0;}

.custom-btn-primary					{color: var(--white) !important; background-color: var(--red) !important;}
.custom-btn-primary:hover			{color: var(--white) !important; background-color: var(--hover-red) !important;}
.custom-btn-secondary				{color: var(--white) !important; background-color: var(--cyan) !important;}
.custom-btn-secondary:hover			{color: var(--white) !important; background-color: var(--hover-cyan) !important;}
.custom-btn-additional				{color: var(--white) !important; background-color: var(--teal) !important;}
.custom-btn-additional:hover		{color: var(--white) !important; background-color: var(--hover-teal) !important;}
.custom-btn-outline 				{color: var(--cyan) !important; background-color: var(--white) !important; border: 2px solid var(--cyan) !important;}
.custom-btn-outline:hover			{color: var(--hover-cyan) !important; background-color: var(--white) !important; border: 2px solid var(--hover-cyan) !important;}
.custom-btn-outline.custom-btn-sm 	{border-width: 1px !important;}
.custom-btn-cancel					{color: var(--grey)  !important; background-color: var(--white) !important; border: 1px solid var(--btn-border-grey) !important; font-weight: 400;}
.custom-btn-cancel:hover			{color: var(--grey)  !important; background-color: var(--white) !important; border: 1px solid var(--btn-border-hover-grey) !important;}
.custom-btn-success					{color: var(--white) !important; background-color: var(--green) !important;}
.custom-btn-success:hover			{color: var(--white) !important; background-color: var(--hover-green) !important;}
.custom-btn-trash					{color: var(--white) !important; background-color: var(--light-grey-05) !important;}
.custom-btn-trash:hover				{color: var(--white) !important; background-color: var(--hover-light-grey-05) !important;}

.custom-btn-sort					{background-color: var(--cyan) !important; padding: 0 .35em; }
.custom-btn-sort:hover				{background-color: var(--hover-cyan) !important;} 

.custom-btn-sort-sm					{background-color: var(--cyan) !important; padding: 0 .35em; height: 1.75em !important;}
.custom-btn-sort-sm:hover			{background-color: var(--hover-cyan) !important; transform: none;}
.custom-btn-sort-sm .custom-icon	{width: 12px;}

.custom-btn-loader 							{position: relative;}
.custom-btn-loader .custom-btn-loader-wrap 	{display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--red); z-index: 1; overflow: hidden;}
.custom-btn-loader .custom-loader-size 		{display: block; width: 100%; height: 100%; position: relative; transform: scale(.5375);}
.custom-btn-loader .custom-loader 			{color: var(--white); margin-top: -.825em; display: block !important;}

.custom-btn-extern					{color: var(--black) !important; background-color: var(--light-grey-03) !important;}
.custom-btn-extern:hover			{color: var(--black) !important; background-color: var(--light-grey-04) !important;}
.custom-btn-extern img				{margin-left: 0; transform: translateY(-1px);}

.custom-btn-height-sm 				{height: 2.175rem !important; padding-top: 0 !important; padding-bottom: 0 !important; font-size: 95%;}


/* TAB NAV +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

.custom-nav-tabs .nav-link					{color: var(--black); background: var(--light-grey-02); background: linear-gradient(0deg, rgba(240,240,240,1) 0%, rgba(248,248,248,1) 30%); border-color: var(--border-grey); padding-top: .625em; padding-bottom: .625em;}
.custom-nav-tabs .nav-link:hover			{color: var(--red);background: var(--white); border-color: var(--border-grey);}
.custom-nav-tabs .nav-link.active			{color: var(--red); background: var(--white); font-weight: 600;}
.custom-nav-tabs .nav-link.active:hover		{border-bottom-color: var(--white);}


/* LINK CONTAINER +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

/* Download Link */
.custom-link-download							{display: block; background: var(--white); text-decoration: none;}
.custom-link-download .custom-icon				{margin-top: -.25em; transition: all 200ms ease;}
.custom-link-download .custom-icon img			{height: 1.5em; width: auto;}																	
.custom-link-download .custom-description		{background-color: var(grey-lighter);}
.custom-link-download .custom-description .custom-text	{font-size: 90%;}
.custom-link-download:hover 							{box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.15);}
.custom-link-download:hover .custom-icon.custom-icon	{transform: scale(1.2); -webkit-backface-visibility: hidden; backface-visibility: hidden;}


/* TOOLTIP +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

/* Mouseover-Flackern verhindern */
.tooltip {
  pointer-events: none;
}

/* Hintergundfarbe */
.tooltip-inner {
    background-color: var(--semantic-blue);
    opacity: 1 !important;
	font-size: .875rem !important;
}
.tooltip.bs-tooltip-right .tooltip-arrow::before {
    border-right-color: var(--semantic-blue) !important;
}
.tooltip.bs-tooltip-left .tooltip-arrow::before {
    border-left-color: var(--semantic-blue) !important;
}
.tooltip.bs-tooltip-bottom .tooltip-arrow::before {
    border-bottom-color: var(--semantic-blue) !important;
}
.tooltip.bs-tooltip-top .tooltip-arrow::before {
    border-top-color: var(--semantic-blue) !important;
}


/* TAGS +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */



/* BADGES +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

.custom-badge-number			{padding: .25em; font-weight: 600; font-size: .85em; min-width: 2.5em; text-align: center; border-radius: 4px; background-color: var(--white);}

.custom-badge-info				{color: var(--semantic-blue); border: 1px solid var(--semantic-blue);}
.custom-badge-success			{color: var(--semantic-green); border: 1px solid var(--semantic-green);}	
.custom-badge-inactive			{color: var(--semantic-grey); border: 1px solid var(--semantic-grey);}
								
.custom-badge-state				{display: inline-block; padding: .5em .625em; font-weight: 500; font-size: 80%; text-align: center; border-radius: 20px; line-height: 1; white-space: nowrap;}

h2 .custom-badge-state			{font-size: .8275rem;}	


/* FLAGS +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

.custom-flag					{display: inline-block; padding: .425em .625em .425em .625em; font-weight: 600; font-size: 70%; text-align: center; line-height: 1; letter-spacing: .075em; white-space: nowrap;}		
.custom-flag-info				{color: var(--semantic-blue); background-color: var(--semantic-bg-blue); text-transform: uppercase;}


/* TEXT Messages +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

.custom-text-message 				 {font-size: 90%; font-weight: 500;}
.custom-text-message .custom-icon img {width: 1.1765rem; height: 1.1765rem; margin-top: 1px;}


/* FORM Messages +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

.custom-form-message 				 {padding: 1em; border-radius: 8px; font-weight: 500;}
.custom-form-message .custom-icon img {width: 24px; height: 24px;}


/* ANIMATIONS ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

/* Sorting: Container/Section */

section.custom-anim-flash		{animation-name: FlashSortContainer; 
								animation-duration: 1s; 
								animation-iteration-count: 1;
								animation-fill-mode: both;}


	@keyframes FlashSortContainer { 
									0%  {transform: scale(1);}
									5% {transform: scale(1.02); box-shadow: 0px 0px 6px rgba(0, 167, 103, 0.75); border: 1px solid var(--semantic-bg-green);}
									20% {transform: scale(1.02); box-shadow: 0px 0px 6px rgba(0, 167, 103, 0.75); border: 1px solid var(--semantic-bg-green);}
									100% {transform: scale(1);}
								}


/* SPINNER / LOADER ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

.custom-loader,
.custom-loader:before,
.custom-loader:after 		{border-radius: 50%; width: 2.5em; height: 2.5em; -webkit-animation-fill-mode: both; animation-fill-mode: both; 
							-webkit-animation: loading 1.8s infinite ease-in-out; animation: loading 1.8s infinite ease-in-out;}

.custom-loader 				{color: var(--light-grey-04); font-size: 10px; margin: 80px auto; position: relative; text-indent: -9999em;
							-webkit-transform: translateZ(0); -ms-transform: translateZ(0); transform: translateZ(0); webkit-animation-delay: -0.16s; animation-delay: -0.16s;}

.custom-loader:before,
.custom-loader:after 		{content: ' '; position: absolute; top: 0;}

.custom-loader:before 		{left: -3.5em; -webkit-animation-delay: -0.32s; animation-delay: -0.32s;}

.custom-loader:after 		{left: 3.5em;}

							@-webkit-keyframes loading {
							  0%,
							  80%,
							  100% {
								box-shadow: 0 2.5em 0 -1.3em;
							  }
							  40% {
								box-shadow: 0 2.5em 0 0;
							  }
							}
							@keyframes loading {
							  0%,
							  80%,
							  100% {
								box-shadow: 0 2.5em 0 -1.3em;
							  }
							  40% {
								box-shadow: 0 2.5em 0 0;
							  }
							}


/* PROGRESS BAR +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

.custom-progress					{border-radius: 8px; height: 1.85em; background-color: var(--semantic-bg-grey); font-weight: 500; font-size: 1rem;}
.custom-progress .progress-bar		{line-height: 15px;}
.custom-progress .custom-bar-green {background-color: var(--semantic-green);}
.custom-progress .custom-bar-blue	 {background-color: var(--semantic-blue);}
.custom-progress .custom-bar-grey 	{background-color: var(--semantic-grey);}


/* CHARTS +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

.custom-charts 						{transform: translateY(-1em);}
.custom-bar-with-label				{border-radius: 8px;}
.custom-bar-with-label .custom-text {width: 9em;}
.custom-bar-with-label .custom-progress {width: 10rem; background-color: var(--white); text-align: left;}
.custom-bar-with-label .progress-bar {border-radius: 8px; min-width: 1.25em; padding-left: 6px !important; padding-right: 6px !important;}

.custom-wrap-pie-chart				{max-width: 120px; position: relative;}

.custom-wrap-pie-chart .bg-pie 		{position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); border-radius: 50%;}
.custom-wrap-pie-chart .bg-pie-01	{width: 120px; height: 120px; background-color: var(--light-grey); z-index: 0;}
.custom-wrap-pie-chart .bg-pie-02	{width: 84px; height: 84px; background-color: var(--white); z-index: 1;}

@property --p{
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}

.pie {
  --p:15;
  --b:17px;
  --c:var(--semantic-green);
  --w:120px;
  
  width:var(--w);
  aspect-ratio:1;
  position:relative;
  display:inline-grid;
  place-content:center;
  font-size:26px;
  font-weight:600;
  color: var(--semantic-green);
  background-color: transparent;
  z-index: 2;
}
.pie:before,
.pie:after {
  content:"";
  position:absolute;
  border-radius:50%;
}
.pie:before {
  inset:0;
  background:
    radial-gradient(farthest-side,var(--c) 98%,#0000) top/var(--b) var(--b) no-repeat,
    conic-gradient(var(--c) calc(var(--p)*1%),#0000 0);
	-webkit-mask:radial-gradient(farthest-side,#0000 calc(99% - var(--b)),#000 calc(100% - var(--b)));
     mask:radial-gradient(farthest-side,#0000 calc(99% - var(--b)),#000 calc(100% - var(--b)));
}

.pie:after {
  inset:calc(50% - var(--b)/2);
  background:var(--c);
  transform:rotate(calc(var(--p)*3.6deg)) translateY(calc(50% - var(--w)/2));
}

.no-round:before {
  background-size:0 0,auto;
}
.no-round:after {
  content:none;
}

.animate {
  animation:p 1s .5s both;
}


@keyframes p {
  from{--p:0};

}



/* TABLES +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

/* Standard overview table-layout */

table th a							{text-decoration: none; color: var(--grey);}
table th a:hover 					{text-decoration: none; color: var(--red);}

.custom-container-table				{width: 100%; max-width: 100%; overflow-x: auto; padding: 1px;}
.custom-table 						{width: 100%; border-collapse: separate; border-spacing: 0 1px;}

.custom-table b						{font-weight: 500; color: #000;}

.custom-table th 					{padding: .75em .5em; white-space: nowrap; font-size: 90%; font-weight: 500; background-color: rgb(225,225,225,1); color: var(--grey);}
.custom-table th.custom-th-sort		{padding: .75em .25em}

.custom-table td					{padding: 1em .5em; vertical-align: top; font-size: 95%; border: 1px solid transparent;}
.custom-table td.custom-td-buttons	{padding: .375em;}
.custom-table td.custom-td-tags 	{padding: .825em .5em .375em .5em;}

.custom-table td.custom-td-buttons .custom-btn {height: 2.175rem;}

.custom-table td.custom-text-sm		{font-size: 85%; padding-top: 1.125em;}

.custom-table tbody tr:nth-child(odd) 			{border-color: rgb(220,220,220,.1); background-color: rgb(220,220,220,.1);} 
.custom-table tbody tr:nth-child(even) 			{border-color: rgb(220,220,220,.1); background-color: rgb(220,220,220,.25);}

.custom-table tbody tr.custom-state-last-edited {background-color: rgba(236,248,243,1);}
.custom-table tbody tr.custom-state-last-sorted {background-color: rgba(45,184,210,.1);}

.custom-table a.custom-link-color				{}
.custom-table a.custom-link-color:hover,
.custom-table a.custom-link-color:hover b		{color: var(--red) !important;}

.custom-table-special-row-colors									{border-collapse: seperate; border-spacing: 0 0;}
.custom-table-special-row-colors tbody:nth-child(even) tr			{border-color: transparent !important; background-color: rgb(220,220,220,.1) !important;} 
.custom-table-special-row-colors tbody:nth-child(odd) tr  			{border-color: transparent; background-color: rgb(220,220,220,.25) !important;}

.custom-table-special-row-colors td.custom-space					{padding: 0; height: 3px; background: var(--white);}



/* TD Specials */

table .custom-badge-state											{margin-top: -.5em; margin-bottom: -.5em;}
table td .custom-text-size-sm .custom-icon img						{height: 1em; margin-top: -.1em;}

.custom-row-bg-success th											{background-color: var(--semantic-bg-green) !important;}

.custom-table .custom-box-permissions								{padding: .25em .75em .375em .75em; border: 1px solid var(--border-grey); background-color: var(--white);
																	transform: translateY(-.25em);}
																	
.custom-table .custom-wrap-collapsible-contents						{margin-top: -.75em; padding: 0 6em;}
.custom-table .custom-wrap-collapsible-contents	.custom-text		{line-height: 1.111;}

.custom-table a.custom-link-color .custom-icon-01,
.custom-table a.custom-link-color .custom-icon-02								{height: 1.165em;}
.custom-table a.custom-link-color[aria-expanded="true"]							{text-decoration: none;}
.custom-table a.custom-link-color[aria-expanded="true"] b						{color: var(--red) !important;}
.custom-table a.custom-link-color[aria-expanded="true"] .custom-icon-01			{display: none !important;}
.custom-table a.custom-link-color[aria-expanded="true"] .custom-icon-02 		{display: flex !important;}
.custom-table a.custom-link-color[aria-expanded="true"]:hover					{text-decoration: underline;}
.custom-table a.custom-link-color[aria-expanded="true"]:hover .custom-icon-01 	{display: flex !important;}
.custom-table a.custom-link-color[aria-expanded="true"]:hover .custom-icon-02 	{display: none !important;}


/* Simple table tayout */

.custom-table-simple tr			{}
.custom-table-simple td			{padding: .5em; font-size: 95%;}

.custom-table-simple th 		{padding: .75em .5em; white-space: nowrap; font-size: 90%; font-weight: 500; background-color: rgb(220,220,220,1); color: var(--grey);}


/* Simple table layout: Info Table */

.custom-table-info tr 				{border-bottom: 1px dotted var(--semantic-blue);}
.custom-table-info tbody tr::after 	{display: none;}
.custom-table-info tr:last-child	{border-bottom:  none;}
.custom-table-info th 				{white-space: nowrap; font-size: 100%; font-weight: 600; background-color: transparent; color: var(--black);}

.custom-table-info th 				{padding: .425rem 0; vertical-align: top;}
.custom-table-info td 				{padding: .375rem 0; vertical-align: top;}


/* Sort */

table .custom-sort 							{padding: 0 .375em 0 .25em; width: 1.1765rem;} 
table .custom-sort img 						{width: 11px; height: auto;}
table .custom-sort span img:nth-of-type(1) 	{transform: translateY(1px);}
table .custom-sort span img:nth-of-type(2)  {transform: translateY(-2px);} 

table .custom-sort:hover 					{padding: 0 .5em 0 .25em;} 

table .custom-icon-01 						{display: flex !important;}
table .custom-icon-02 						{display: none !important;}

table a.custom-active						{font-weight: 600; color: var(--red);}

table .custom-sort .custom-icon-01 			{display: flex !important; }

table .custom-sort .custom-icon-02,
table .custom-sort .custom-icon-03 			{display: none !important;}

table a:hover .custom-sort .custom-icon-01,
table a:hover .custom-sort .custom-icon-03 {display: none !important;}

table a:hover .custom-sort .custom-icon-02 {display: flex !important;}

/* sorted: descending */
table a.custom-active.custom-descending .custom-sort .custom-icon-01,
table a.custom-active.custom-descending .custom-sort .custom-icon-03 		{display: none !important;}

table a.custom-active.custom-descending .custom-sort .custom-icon-02 		{display: flex !important;}

table a.custom-active.custom-descending:hover .custom-sort .custom-icon-01,
table a.custom-active.custom-descending:hover .custom-sort .custom-icon-02 {display: none !important;}

table a.custom-active.custom-descending:hover .custom-sort .custom-icon-03 {display: flex !important;}

/* sorted: ascending */
table a.custom-active.custom-ascending .custom-sort .custom-icon-01,
table a.custom-active.custom-ascending .custom-sort .custom-icon-02 		{display: none !important;}

table a.custom-active.custom-ascending .custom-sort .custom-icon-03 		{display: flex !important;}

table a.custom-active.custom-ascending:hover .custom-sort .custom-icon-01,
table a.custom-active.custom-ascending:hover .custom-sort .custom-icon-03 	{display: none !important;}

table  a.custom-active.custom-ascending:hover .custom-sort .custom-icon-02 	{display: flex !important;}



@media screen and (min-width: 1200px) {
	
	.custom-table tbody tr:hover					{background-color: var(--white);
													webkit-transition: all 200ms ease; -moz-transition: all 200ms ease; -o-transition: all 200ms ease; transition: all 200ms ease;}
	.custom-table tbody tr:hover td 				{border-top: 1px solid var(--cyan); border-bottom: 1px solid var(--cyan);
													webkit-transition: all 200ms ease; -moz-transition: all 200ms ease; -o-transition: all 200ms ease; transition: all 200ms ease;}
	.custom-table tbody tr:hover td:first-child		{border-left: 1px solid var(--cyan);}
	.custom-table tbody tr:hover td:last-child		{border-right: 1px solid var(--cyan);}	
	
	.custom-table-special-row-colors tbody:hover						{box-shadow: 0 0 0 1px var(--cyan);}
	.custom-table-special-row-colors tbody tr:hover td 					{border-top: 1px solid transparent; border-bottom: 1px solid transparent;}
	.custom-table-special-row-colors tbody tr:hover td:first-child		{border-left: 1px solid transparent;}
	.custom-table-special-row-colors tbody tr:hover td:last-child		{border-right: 1px solid transparent;}
	
	.custom-table-special-row-colors.custom-hover tbody:hover tr,
	.custom-table-special-row-colors.custom-hover tbody:hover td		{background-color: var(--white) !important;}	

}


@media screen and (min-width: 768px) and (max-width: 1023px) {
	
	.custom-table,
	.custom-table-simple							 	{font-size: 80%;}	
	
	table td .custom-text-size-sm						{font-size: 90%;}
	
}


@media screen and (max-width: 767px) {
	
	.custom-container-table								{overflow: hidden}
	
	.custom-table thead									{display: none;}	
	.custom-table tbody tr:after						{content: ' '; display: block; height: 15px; background-color: var(--white);}
	.custom-table tbody td,
	.custom-table tbody td.custom-td-buttons			{display: block; padding: 0 .75em .75em .75em;}
	.custom-table tbody tr td:first-child				{padding-top: .75em;}
	.custom-table tbody td:before						{content: attr(data-label); display: block; padding-bottom: .5em; font-size: .9rem; color: var(--grey);}	
	.custom-table tbody td.custom-td-buttons > div		{margin-top: .375em;}
	.custom-table tbody td.custom-mobile-inline:before	{display: inline;}
	
	.custom-table td.custom-text-sm,
	.custom-table td.custom-td-tags						{padding-top: 0;}
			
	/* .custom-table-special-row-colors td.custom-space	{height: 1.25em;} */
	
	.custom-table-simple thead							{display: none;}	
	.custom-table-simple tbody tr:after					{content: ' '; display: block; height: 10px; background-color: var(--white);}
	.custom-table-simple tbody td,
	.custom-table-simple tbody td.custom-td-buttons		{display: block; padding: .5em 0 .75em 0 !important;}
	.custom-table-simple tbody td:first-child			{padding-top: .75em;}
	.custom-table-simple tbody td:before				{content: attr(data-label); display: block; padding-bottom: .25em; font-size: 90%; color: var(--grey);}	
	.custom-table-simple tbody td.custom-td-buttons > div{margin-top: .375em;}
	.custom-table-special-row-colors					{border-collapse: collapse;}
	.custom-table-special-row-colors tbody tr::after	{display: none;}
	
	table .custom-badge-state							{margin-top: 0; margin-bottom: 0;}
	
	.custom-table .custom-wrap-collapsible-contents		{margin-top: 0; padding: 0;}
	
}



/* ROLES +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

/* Colors */
.custom-colors-role-01	/* Intern/EDV */			 {}
.custom-colors-role-02	/* Geschäftsführung */	 {}
.custom-colors-role-03	/* Pressestelle/PR */	 {}
.custom-colors-role-04	/* Neueinstellung */	 {}

.custom-bg-wrap-role							 {background-color: rgba(255,255,255,.25)}

.custom-colors-role-01 .custom-wrap-role		 {background-color: rgba(210,0,0,.125)}
.custom-colors-role-02 .custom-wrap-role		 {background-color: rgba(277,104,15,.15)}
.custom-colors-role-03 .custom-wrap-role		 {background-color: rgba(45,184,210,.2)}
.custom-colors-role-04 .custom-wrap-role		 {background-color: rgba(151,191,41,.2)}

.custom-colors-role-01 .custom-text-role		 {color: rgba(210,0,0,.2)}
.custom-colors-role-02 .custom-text-role		 {color: rgba(277,104,15,.3)}
.custom-colors-role-03 .custom-text-role		 {color: rgba(45,184,210,.45)}
.custom-colors-role-04 .custom-text-role		 {color: rgba(151,191,41,.5)}

.custom-colors-role-01 .custom-mailing-box-info	 {background-color: rgba(210,0,0,.03)}
.custom-colors-role-02 .custom-mailing-box-info	 {background-color: rgba(277,104,15,.05)}
.custom-colors-role-03 .custom-mailing-box-info	 {background-color: rgba(45,184,210,.07)}
.custom-colors-role-04 .custom-mailing-box-info	 {background-color: rgba(151,191,41,.07)}


/* Tags Role */
.custom-tag-role								{padding: .35em .25em .3em .25em; font-size: 75%; border-radius: 3px; border-width: 1px; border-style: solid; white-space: nowrap;}

.custom-tag-role-01								{color: rgba(99,0,0,1);   background-color: rgba(210,0,0,.2); border-color: rgba(239,166,166,1)}
.custom-tag-role-02								{color: rgba(116,53,8,1); background-color: rgba(277,104,15,.2); border-color: rgba(254,193,135,1)}
.custom-tag-role-03								{color: rgba(21,87,99,1); background-color: rgba(45,184,210,.2);  border-color: rgba(45,184,210,1)}
.custom-tag-role-04								{color: rgba(64,81,17,1); background-color: rgba(151,191,41,.2); border-color: rgba(196,219,135,1)}


/* Wrap Role */
.custom-wrap-role								{padding: .5em 1.5em .5em 1.25em;}
.custom-wrap-role .custom-text-role				{font-size: 140%; font-weight: 600;}
.custom-wrap-role .custom-role-select select	{background-color: #fff; border: 1px solid rgba(0,0,0,.2); width: 14.45em;
												background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
												background-repeat: no-repeat;
												background-size: .75em auto;
												background-position: calc(100% - .75em) center;}
												
.custom-wrap-role .custom-role-select select:active,
.custom-wrap-role .custom-role-select select:focus {border-color: var(--cyan) !important;}


@media screen and (max-width: 767px) {
	
	.custom-wrap-role,
	.custom-wrap-role .custom-role-select select	{font-size: 90%;}
	
	.custom-wrap-role								{padding: .5em 1.25em .5em 1.25em;}
	
}