﻿.klaro .cookie-modal .cm-modal.cm-klaro {
    padding: 15px 15px 10px 15px;
    margin: 0;
    top: unset;
    right: 20px;
    bottom: 20px;
    transform: none;
    border-radius: 8px;
    position: absolute;
    max-width: 540px;
}

@media all and (max-width:700px) {
	.klaro .cookie-modal .cm-modal.cm-klaro {
        right: 0;
        bottom: 0;
        border-radius: 0;
        padding-left: 5px;
        padding-right: 5px;
        max-width: 100%;
    }
}

.cm-header {
    border: 0 !important;
    padding-top:10px !important;   
}

	.cm-header h1{    
		text-transform: uppercase;
		font-size: 1.3rem;
		letter-spacing: 1px;
		color: black !important;
	}

	.cm-header p{    
		line-height:1.4;
		color: black !important;
	}

.cm-body{
    padding-bottom:50px !important;
  
}
.cm-footer {
    border: 0 !important;
}

.cm-footer .cm-footer-buttons{
	 position: relative;
}

@media all and (max-width:700px) {
	.cm-footer .cm-footer-buttons{
		display:none
	}
}

.cm-footer-buttons  button {
	width: 50%;
}

@media all and (max-width:700px) {
	.cm-footer-buttons  button {
		width: 100%;
		margin-bottom: 5px;
	}
}    

.klaro .cookie-modal .cm-switch, .klaro .cookie-notice .cm-switch {
	height: 24px;
}

.klaro .cookie-modal .cm-list-label .slider::before, .klaro .cookie-notice .cm-list-label .slider::before {
	bottom: 2px;
}

.cm-purpose .cm-list-label,
.klaro .cm-apps{
	padding-left:15px;
}

.cm-purpose .cm-app .cm-list-label{
	padding-left:0
}

.klaro .cookie-modal .slider, .klaro .cookie-notice .slider {
	box-shadow: none !important
}

.slider {
    padding:4px
}

.cm-powered-by a{	
	font-size: 2rem;
	position: absolute;
	right: 20px;
	top: 10px;
}

.cm-powered-by a::after {
	content: "x";
}	
.cm-app .purposes{display:none !important}

.klaro .cookie-modal .cm-content{
	display:none
}

.klaro .cookie-modal .cm-list-input:checked + .cm-list-label .slider::before, .klaro .context-notice .cm-list-input:checked + .cm-list-label .slider::before, .klaro .cookie-notice .cm-list-input:checked + .cm-list-label .slider::before {
	transform:translateX(27px)
}



/* Hintergrund */
.cm-modal.cm-klaro{
	background-color:#ffffff !important
}

/* Schließen */
.cm-powered-by a{
	color:#000 !important
}

/* Beschreibung*/
.cm-app  .cm-list-description{
	color: #FFF !important
}
/* Beschreibung Link */
.cookie-modal  .cm-header a{
	color: rgb(0, 0, 0) !important;
	text-decoration:underline
}

/* Link Klapper*/
.cm-apps .cm-caret a{
	color: #000 !important;
}

/* Slider Punkt*/
.klaro .cookie-modal .cm-list-label .slider::before, .klaro .context-notice .cm-list-label .slider::before, .klaro .cookie-notice .cm-list-label .slider::before {
	background-color:#000000 !important
}
/* Slider Hintergrund wenn aktiv */
.klaro .cookie-modal .cm-list-input:checked + .cm-list-label .slider, .klaro .cookie-notice .cm-list-input:checked + .cm-list-label .slider {
	background-color: rgb(158, 158, 158) !important
}

/* Links + Buttons */
     
.cm-footer-buttons  .cn-decline-link {
	background: transparent;
	text-decoration: underline;
	border: 0;
	color: rgb(0, 0, 0);
	position: absolute;
	left: 0;
	top: -40px;
	width: auto;
	text-align: left;
	cursor: pointer;
}

.cm-footer-buttons  .cm-btn-accept-all {
	text-transform: uppercase;
	color: #FFF !important;
	background-color: #000 !important;
}

.cm-footer-buttons .cm-btn-accept {
	text-transform: uppercase;
	border: 1px solid #FFF !important;
}  