:root {
  --font-color-dark: #333;
  --yellow-gs: #fecc00;
  --yellow-hover-gs: #f7dc6f;
  --yellow: #183c70;
  --yellow-hover: #2d72d2;
  --grey1: #eee;
  --blue: #0033CC;
  --blue1: #2a3549;
  --blue2: #545D6D;
  --green1: #0033CC;
  --green22: #2ccff4;
  --green22: #3399FF;
  --green22: #6584e0;
  --green2: #4466ee;
  --transparent: transparent;
}

/* ---------------------------- */

#klaro a.adminlink {
	display: none;
}

/* ---------------------------- */

#klaro .klaro .cookie-modal .cm-modal.cm-klaro,
#klaro .klaro .cookie-modal-notice {
    top: 1%;
    -ms-transform: none;
    transform: none;

	max-width: 100%;
}

@media (min-width: 1024px) {
	#klaro .klaro .cookie-modal .cm-modal.cm-klaro {
	    top: 50%;
	    -ms-transform: translateY(-50%);
	    transform: translateY(-50%);

	    max-width: 640px;
	}

	#klaro .klaro .cookie-modal-notice {

	    top: 50%;
	    -ms-transform: translateY(-50%);
	    transform: translateY(-50%);

	    max-width: 400px;
	}
}

#klaro .klaro .cookie-modal-notice .cn-buttons,
#klaro .cookie-modal .cm-modal .cm-footer-buttons {
	display: block !important;
}

@media (min-width: 1024px) {
	#klaro .klaro .cookie-modal-notice .cn-buttons,
	#klaro .cookie-modal .cm-modal .cm-footer-buttons {
		display: flex !important;
	}
}

/* ---------------------------- */



#klaro .klaro .cookie-modal-notice {
	background: #fff;
	color: var(--font-color-dark, #333);
}
#klaro .klaro .cookie-modal .cm-modal.cm-klaro {
	background: #fff;
	color: var(--font-color-dark, #333);
}
#klaro .klaro .cookie-notice:not(.cookie-modal-notice) {
    background: #fff;
}

#klaro .klaro .cookie-modal .cm-btn,
#klaro .klaro .context-notice .cm-btn,
#klaro .klaro .cookie-notice .cm-btn {
	color: #333;
	color: var(--font-color-dark, #333);
}

/* .klaro .cookie-modal .cm-btn, .klaro .context-notice .cm-btn, .klaro .cookie-notice .cm-btn */
#klaro .klaro .cookie-modal .cm-btn,
.klaro .context-notice .cm-btn,
#klaro .klaro .cookie-notice .cm-btn {
    background: #eee;
    background: var(--grey1, #eee);
    border-radius: 4px;
}
#klaro .klaro .cookie-modal .cm-btn,
#klaro .klaro .cookie-notice .cm-btn {
    background: #eee;
    background: var(--grey1, #eee);
    width: 175px; /* GSF */
    border-radius: 4px;
}

/*.klaro .cookie-modal .cm-btn.cm-btn-info, .klaro .context-notice .cm-btn.cm-btn-info, .klaro .cookie-notice .cm-btn.cm-btn-info*/
#klaro .klaro .cookie-modal .cm-btn.cm-btn-info,
#klaro .klaro .context-notice .cm-btn.cm-btn-info,
xxx#klaro .klaro .cookie-notice .cm-btn.cm-btn-info {
    background: #eee;
    background: var(--grey1, #eee);
}

#klaro .klaro .cookie-notice .cm-btn.cm-btn-info {
    background: transparent;
    background: var(--transparent, transparent );
    padding: 0;
    width: auto;
    color: #0033CC;
}
#klaro .klaro .cookie-notice .cm-btn.cm-btn-info:hover {
    background: transparent;
    background: var(--transparent, transparent );
    text-decoration: underline;
}

/*#klaro .klaro .cookie-modal .cm-btn.cm-btn-success, .klaro .context-notice .cm-btn.cm-btn-success, .klaro .cookie-notice .cm-btn.cm-btn-success */
#klaro .klaro .cookie-modal .cm-btn.cm-btn-success.cm-btn-accept-all,
xxx.klaro .context-notice .cm-btn.cm-btn-success,
#klaro .klaro .cookie-notice .cm-btn.cm-btn-success {
    background: #183c70 !important;
    background: var(--yellow, #183c70 ) !important;
    color: #ffffff; /* GSF */
}
.klaro .context-notice .cm-btn.cm-btn-success {
    background: #2a3549 !important;
    background: var(--blue1, #2a3549 ) !important;
    color: #fff !important;
}

/* .klaro .cookie-modal .cm-btn.cm-btn-success-var, .klaro .context-notice .cm-btn.cm-btn-success-var, .klaro .cookie-notice .cm-btn.cm-btn-success-var */
#klaro .klaro .cookie-modal .cm-btn.cm-btn-success-var,
.klaro .context-notice .cm-btn.cm-btn-success-var,
#klaro .klaro .cookie-notice .cm-btn.cm-btn-success-var {
    background: #183c70 !important;
    background: var(--yellow, #183c70 ) !important;
    color: #ffffff; /* GSF */
}

/* .klaro .cookie-modal-notice .cn-ok {
    display: flex;
    flex-flow: row;
    justify-content: space-between;
    align-items: center;
    margin-top: 1em;
} */
#klaro .klaro .cookie-modal-notice .cn-ok {
    display: block;
}

#klaro .klaro .cookie-modal-notice .cn-buttons {
    display: flex;
    flex-flow: row;
    justify-content: space-between;
    align-items: center;
    margin-top: 1em;
}


#klaro .klaro .cookie-modal .cm-modal .hide {
	/* top: 24px; */  /* GSF */
}
#klaro .klaro .cookie-modal .cm-modal .hide svg {
    stroke: #333;
}

/* .klaro .cookie-modal .cm-list-input.required:checked + .cm-list-label .slider, .klaro .context-notice .cm-list-input.required:checked + .cm-list-label .slider, .klaro .cookie-notice .cm-list-input.required:checked + .cm-list-label .slider  */
#klaro .klaro .cookie-modal .cm-list-input.required:checked + .cm-list-label .slider,
#klaro .klaro .context-notice .cm-list-input.required:checked + .cm-list-label .slider,
#klaro .klaro .cookie-notice .cm-list-input.required:checked + .cm-list-label .slider {
    background-color: #545D6D;
    background-color: var(--blue2, #545D6D);
    opacity: 0.8;
    cursor: not-allowed;
    box-shadow: none;
}

/* .klaro .cookie-modal .cm-list-input:checked + .cm-list-label .slider, .klaro .context-notice .cm-list-input:checked + .cm-list-label .slider, .klaro .cookie-notice .cm-list-input:checked + .cm-list-label .slider  */
#klaro .klaro .cookie-modal .cm-list-input:checked + .cm-list-label .slider,
#klaro .klaro .context-notice .cm-list-input:checked + .cm-list-label .slider,
#klaro .klaro .cookie-notice .cm-list-input:checked + .cm-list-label .slider {
    background-color: #2a3549;
    background-color: var(--blue1, #2a3549);
}
#klaro .klaro .cookie-modal .cm-toggle-all .cm-list-input:checked + .cm-list-label .slider {
    background-color: #1a936f;
	background-color: var(--green1, #1a936f);
}
#klaro .klaro .slider {
    box-shadow: none !important;
}
/* .klaro .cookie-modal a, .klaro .context-notice a, .klaro .cookie-notice a */
#klaro .klaro .cookie-modal a,
#klaro .klaro .context-notice a,
#klaro .klaro .cookie-notice a {
    color: #0033CC;
    color: var(--blue, #0033CC);
    text-decoration: none;
}
/* .klaro .cookie-modal .cm-modal .cm-footer .cm-powered-by a */
#klaro .klaro .cookie-modal .cm-modal .cm-footer .cm-powered-by a {
    color: #999;
}

/* Context-Notice */
.klaro.cm-as-context-notice {
    padding: 0 !important;
}
.klaro .context-notice {
    padding: 0 !important;
}
.klaro .context-notice p {
	padding: 0.5em 1.5em !important;
	text-align: justify !important;
}
.klaro .context-notice p.cm-buttons {
	text-align: center !important;
}
/* EO Context-Notice */

/*  GS */
xxx#klaro .cookie-modal .cm-btn.cm-btn-success:hover,
#klaro .cookie-notice .cm-btn.cm-btn-success:hover { background: #2d72d2 !important; /* GS */ }
xxx#klaro .cookie-modal .cm-btn.cm-btn-info:hover, #klaro .cookie-notice .cm-btn.cm-btn-info:hover { background: #DDD; /* GS */ }
/*  EO GS */

xxx#klaro .cookie-modal .cm-btn.cm-btn-info, #klaro .cookie-notice .cm-btn.cm-btn-info {
  /*background: #0885BA;*/ background: #CCC; /* GS */
}


/* GS ergaenzende Styles */


/* Ueberschriften */
#klaro .cookie-modal .cm-modal .cm-header h1,
#klaro .cookie-modal .cm-modal .itemHead,
#klaro .cookie-notice .cn-body .itemHead {
	font-size: 20px !important; /*font-family: 'pt_sansbold';*/
	line-height: 20px;
}

/* GSF */
#klaro .cookie-modal .cm-modal .cm-header h1 {
	margin-top: 10px;
	margin-bottom: 20px;
}

#klaro .cookie-modal .cm-modal .itemHead,
#klaro .cookie-notice .cn-body .itemHead {
	padding: 8px 0px;

	/* GSF */
	/*margin-top: 0.5em;
	margin-bottom: 1.2em;*/
}

#klaro .cookie-modal .cm-modal .itemHead .itemTitle,
#klaro .cookie-notice .cn-body .itemHead .itemTitle {
	display: inline;
}
/* EO Ueberschriften */


/* "Zahnrad" */
.gs-ccm-link {
	position: fixed;
	bottom: 60px;
	right: 17px;
	z-index: 99; /* 999 */
	/* siehe jQuery dialog .ui-widget-overlay.ui-front { z-index: 100; }  */
	/* siehe #klaro .cookie-notice, #klaro .cookie-modal  { z-index: 1000; } */
}

.gs-ccm-link a {
	font-size: 0px;
	text-decoration: none;
	line-height: 40px;
	vertical-align: middle;
	display: inline-block;
}
.gs-ccm-link a:before {
	display: inline-block;
}

.gs-ccm-link a.ccm-edit:before {
	content: "\f013"; /* Cog Icon */
	font-family: FontAwesome;
	font-size: 40px;
	color: #336699;
	/*opacity:.6;*/
	transition: all .4s linear;
}

.gs-ccm-link a.ccm-reset:before {
	content: "\f067"; /* plus */
	content: "\f057"; /* times-circle */
	content: "\f2ed"; /* trash-alt */
	content: "\f05e"; /* ban */
	content: "\f1f8"; /* trash */
	font-family: FontAwesome;
	font-size: 20px;
	color: #777;
	margin-bottom: 10px;
	/*opacity:.6;*/
	/*transition: all .4s linear;*/
}

/*.gs-ccm-link a:hover:before {
	opacity: 1;
	transform: scale(1.2);
}*/
/* EO "Zahnrad" */


/* EO Cookie Notice */
/* Notice wie Modal formatieren */
xxx#klaro .cookie-notice:before {
	content: ' ';
	display: block;
}
/* EO Notice wie Modal formatieren */
/* Cookie Notice Text aufklappbar */
/* siehe https://alligator.io/css/collapsible/ */
#klaro .cookie-notice .cn-body > p > span { display: block; position: relative; padding: 1.2em 0em 3em 0em; border-bottom: 1px solid #aaa; }

#klaro .cookie-notice input[type='checkbox'] {  display: none; }
xxx#klaro .cookie-notice .cn-body p {
	position: relative;
}
xxx#klaro .cookie-notice div.item {
	padding-bottom: 50px;
}
#klaro .cookie-notice .lbl-toggle {
  cursor: pointer;
  transition: all 0.25s ease-out;
  display: block;
  position: absolute;
  bottom: 12px;
}

#klaro .cookie-notice .lbl-toggle::before {
  content: ' ';
  display: inline-block;

  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 5px solid currentColor;

  vertical-align: middle;
  margin-right: .7rem;
  transform: translateY(-2px);

  transition: transform .2s ease-out;
}
#klaro .cookie-notice .item .itemBody {
	position: relative;
  max-height: 90px;
  overflow: hidden;

  transition: max-height .25s ease-in-out;
}
#klaro .cookie-notice .toggle:checked + .lbl-toggle + .item .itemBody {
  max-height: 100vh !important;
}
/* --- */
#klaro .cookie-notice .lbl-toggle {
	font-size: 0.80em;
	color: #0033CC;
}
#klaro .cookie-notice .item .itemBody .itemText:after {
	content: ' ';
	display: block;
	height: 50px;
	position: absolute; bottom: 0px; left: 0px; right: 0px;
	background-image: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1)); /* Standard syntax (must be last) */
}
#klaro .cookie-notice .toggle:checked + .lbl-toggle + .item .itemBody .itemText:after {
	display: none;
}

#klaro .cookie-notice .toggle:checked + .lbl-toggle::before {
  transform: rotate(-90deg);
}

#klaro .cookie-notice .toggle:checked + .lbl-toggle {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

#klaro .cookie-notice .toggle + .lbl-toggle span.more { display: inline; }
#klaro .cookie-notice .toggle + .lbl-toggle span.less { display: none; }
#klaro .cookie-notice .toggle:checked + .lbl-toggle span.more { display: none; }
#klaro .cookie-notice .toggle:checked + .lbl-toggle span.less { display: inline; }

/* EO Cookie Notice Text aufklappbar */
/* EO Cookie Notice */



/*  Cookie Modal */
#klaro .cookie-modal span.cm-required { margin-left: 0.35em; }
/* EO Cookie Modal */

/* Cookie Notice & Modale Navi-Leiste */
#klaro .cookie-modal .cm-modal .cm-navi,
#klaro .cookie-notice .cn-body .cm-navi,
.ui-dialog.cc-d-err .cc-d-err-navi {
	text-align: center;
	font-size: 0.8em;
	color: #555;
}
#klaro .cookie-modal .cm-modal .cm-navi,
#klaro .cookie-notice .cn-body .cm-navi {
	margin-top: 1em; padding: 1em;
}
xxx#klaro .cookie-modal .cm-modal .cm-navi {
	padding: 1em;
}
#klaro .cookie-modal .cm-modal .cm-navi a,
#klaro .cookie-notice .cn-body .cm-navi a,
.ui-dialog.cc-d-err .cc-d-err-navi a {
	color: #555;
}
#klaro .cm-navi a {
	margin-left: 1em;
	margin-right: 1em;
}
#klaro .cm-navi a:first-child {
	margin-left: 0;
}
#klaro .cm-navi a:last-child {
	margin-right: 0;
}
/* Positionierung */
#klaro .cookie-notice .cn-body .cm-navi {
	position: absolute;
	/*left: 50%;
	transform: translateX(-50%);*/
	right: 0px;
	top: -20px;
}
#klaro .cookie-notice .cn-body {
	/*margin-bottom: 3.5em;*/
}
/* relativ zu #klaro .klaro .cookie-modal .cm-modal.cm-klaro */
xxx#klaro .cookie-modal .cm-modal .cm-navi {
	bottom: 0px;
}

#klaro .cookie-modal .cm-modal .cm-navi {
	position: absolute;
    top: 0px;
    right: 60px;
    z-index: 1;
}
/* EO Positionierung */
/* EO Cookie Notice & Modal Navi-Leiste */

#klaro table { border-spacing: 2px; border-collapse: separate;}
#klaro table th,
#klaro table td { padding: 0.2em; border-bottom: 1px solid #eee; }
#klaro table th { font-weight: bold; white-space: nowrap; }
#klaro table td:first-child { white-space: nowrap; }
#klaro table {  }



/* GSF */



#klaro .klaro div.itemText {
	text-align: justify;
}

#klaro .klaro .cookie-modal, .klaro .context-notice, .klaro .cookie-notice {
    font-size: inherit;
}

#klaro .klaro .cookie-modal p, .klaro .cookie-modal h1, .klaro .cookie-modal h2, .klaro .cookie-modal ul, .klaro .cookie-modal li, .klaro .context-notice p, .klaro .context-notice h1, .klaro .context-notice h2, .klaro .context-notice ul, .klaro .context-notice li, .klaro .cookie-notice p, .klaro .cookie-notice h1, .klaro .cookie-notice h2, .klaro .cookie-notice ul, .klaro .cookie-notice li {
    text-align: justify;
}


#klaro table th,
#klaro table td {
	font-size: 0.95em;
	color: inherit;
	padding-right: 2em;
}

/*.klaro .cookie-modal, .klaro .context-notice, .klaro .cookie-notice*/
.klaro .cookie-modal p,
.klaro .context-notice p,
.klaro .cookie-notice p,
.klaro .cookie-modal td,
.klaro .context-notice td,
.klaro .cookie-notice td,
.klaro .cookie-modal li,
.klaro .context-notice li,
.klaro .cookie-notice li,
.klaro .cookie-modal .cm-list-description {
    xxxfont-size: 12px;
	line-height: 1.5em;
}


#klaro .klaro .cookie-modal .cm-modal .cm-footer .cm-powered-by {
    text-align: right;
}

/* EO GSF */
