body {background-color: #f1f1f1; font-family: "Raleway", Helvetica, Arial, sans-serif; font-size: 13px; line-height: 19px; }


 /* --------------------- ALLE Kopf-Einstellungen ------------------------------------------- */

   .black{background-color: black; color: white;}
   .white{background-color: white; color: black;}
   .grau{background-color: #333333;}
   .lgrau{background-color: #f8f8f8;}
   .fett{font-weight: bold;}
   .oben{vertical-align: top;}
   .dotted{border: 1px dotted grey;}
   .dotted100{width: 100%; border: 1px dotted grey;}

   .image{width: 100%;}
   .halfimage{width: 49%;}
   .b25{width: 25%;}
   .b50{width: 50%;}
   .b75{width: 75%;}
   .fullbody{min-width: 100%; margin-left: -15px; margin-right: -15px;}
   .minwi{min-width: 100%;}
   .border{border: 1px solid #cecece;}
   .border_bottom_dotted{border-bottom: 1px solid #cecece;}
   .flori{float: right; margin: 0px 0px 15px 15px;}
   .flole{float: left; margin: 0px 15px 15px 0px;}
   .FDE99C{background-color: #FDE99C; min-width: 80%;}
   .cecece{background-color: #cecece;}
   .fafafa{background-color: #fafafa;}
   .f7f7f7{background-color: #f7f7f7;}
   .efefef{background-color: #efefef;}
   .F6D830{background-color: #F6D830;}
   .tcenter{text-align: center;}
   .tlinks{text-align: left;}
   .trechts{text-align: right;}

   
   .mall{margin: 15px;}
   .mtop{margin-top: 15px;}
   .mbot{margin-bottom: 15px;} 
   .mbot13{margin-bottom: 13px;} 
   .mre{margin-right: 15px;}
   .mrere{margin-right: 30px;}
   .mli{margin-left: 15px;}
   .mli6{margin-left: 6px;}
   .mlili{margin-left: 30px;}
   .mobtop{margin-top: -15px;} /*-- ohne Border links --*/
   .mobl{margin-left: -15px;} /*-- ohne Border links --*/
   .mobr{margin-right: -15px;} /*-- ohne Border rechts --*/
   .mobrr{margin-right: -30px;} /*-- ohne Border rechts doppelt --*/
   .mobbot{margin-bottom: -15px;} /*-- ohne Border unten --*/
   
   .ppall{padding: 15px;}
   .ptop{padding-top: 15px;}
   .pbot{padding-bottom: 15px;} 
   .pre{padding-right: 15px;}
   .pli{padding-left: 15px;}
   .pdli{padding-left: 30px;}
   .pobl{padding-left: -15px;} /*-- ohne Border links --*/
   .pobr{padding-right: -15px;} /*-- ohne Border rechts --*/
   .pobrr{padding-right: -30px;} /*-- ohne Border rechts doppelt --*/

   .kundenelemente-button{float:left; margin-top:5px; width: 160px; min-width: 160px; border: 1px solid #c1c1c2; display: none;}
   .tabelle-ueberschrift-hoch-schriftlinks{padding-left: 5px; height: 31px; font-weight: bold;}
   .tabelle-zelle-normal-schriftrechts{padding-left: 5px; text-align: center;}
   
   
   /*"a:[pseudoklasse] .link-text" -> siehe MR. ATZ*/
   a.no-decoration,a.no-decoration *{
	   text-decoration:none !important;
   }
   
   a:link.FDE99C, a:link .link-text.FEDE99C{text-decoration:none; font-family:verdana; color: black; line-height: 20px; padding: 5px; display: inline-block;}
   a:visited.FDE99C, a:visited .link-text.FEDE99C{text-decoration:none; font-family:verdana; color: black; line-height: 20px; padding: 5px; display: inline-block;}
   a:hover.FDE99C, a:hover .link-text.FEDE99C{text-decoration:none; font-family:verdana; color: grey; line-height: 20px; padding: 5px; display: inline-block;}
   a:active.FDE99C, a:active .link-text.FEDE99C{text-decoration:none; font-family:verdana; color: black; line-height: 20px; padding: 5px; display: inline-block;}


   a:link.standard, a:link .link-text.standard{text-decoration:none; color: #00376B; display: inline-block; font-weight: bold;}
   a:visited.standard, a:visited .link-text.standard{text-decoration:none; color: #00376B; display: inline-block; font-weight: bold;}
   a:hover.standard, a:hover .link-text.standard{text-decoration: underline; color: #007CC0;  display: inline-block; font-weight: bold;}
   a:active.standard, a:active .link-text.standard{text-decoration:none; color: #00376B; display: inline-block; font-weight: bold;}
	

   a:link.standard_switcher{text-decoration:none; font-family:verdana; color: grey;}
   a:visited.standard_switcher-switcher{text-decoration:none; font-family:verdana; color: grey;}
   a:hover.standard_switcher-switcher{text-decoration:none; font-family:verdana; color: white;}
   a:active.standard_switcher-switcher{text-decoration:none; font-family:verdana; color: grey;}
   
   
	



   .container-preview .card:hover {background-color: #F5F5F5; cursor: pointer; border-radius: 1em;}
  .borderround{border: 1px solid #cecece; border-radius: 1em;} 
  .text-icon {display: flex; vertical-align: top;}
  .text-top{vertical-align: top;}
  .ppall{padding: 15px;}


	.car-details-header{
		position: -webkit-sticky;
		position: sticky;
		top: 70px;
		background-color: white;
		z-index: 10;
	}

  #header {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index:1;
	height:60px;
  }
  
  #header #logo {
    margin: 14px 25px 0 0;
  }

  #header #logo2 {
    margin: 7px 25px 0 0;
  }

  @media (max-width: 767px) {
	#header > div, #header > section{
		padding-right:35px;
	}
  
    #header #logo {
      margin: 10px 0 0 0; 
    }
  
    #header #logo h1 {
      padding: 2px 0;
      font-size: 26px;
    }
  
    #header #logo img {
      max-height: 30px;
    }
  
  }
  

  .pull-left{text-align: left;}
  .pull-right{text-align: right;}
  
  
  /*Das sind die Buttons im Fußmenü*/
  
  
@media(max-width:767px){
	.mob-but a{
		position:relative;
		display:inline-block;
		color:#ededed;
		width:80px;
		height:80px;
		padding:20px 2px 0px;
		hyphens: auto;
		font-size:10px;
		text-align:center;
		z-index:1;
		vertical-align:bottom;
		z-index:1;
	}

	.mob-but a:visited{
		color:#ededed;
		
	}

	.mob-but a:hover,mob-but a:active{
		color:#ededed;
	}

	.mob-but a:hover::before{
		background-position:40px;  
	}

	.mob-but a::before{
		display:block;
		position:absolute;
		top:3px;
		left:3px;
		content:' ';
		width:74px;
		height:74px;
		background:linear-gradient(#8d8d8d,#3b3d3f 60%);
		border:2px solid #ebebec;
		border-radius:10px;
		z-index:-1;
		transition: all .3s ease;
		background-size:1px 120px;  
	}
}

.sortable.row{
	border-radius:.25em;
	box-shadow:0 0 8px 1px rgba(222,222,222,.7);
	transition:transform .2s ease;
	transform:scale(1);
}
.sortable.row:hover{
	transform:scale(1.01);
}


.btn.btn-input-style,
button[type="submit"].btn.btn-input-style
{
  border-radius: 0 !important;
  box-shadow: none !important;
  font-size: 14px !important;
  background: transparent !important;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
  padding: 10px 12px !important;
  color:var(--color-template);
}

/*Shop style*/

.car .car-mini{
  border:0;
}

.img-container-4-3{
  position:relative;
  padding-bottom:75%;
  height:0;
  overflow:hidden;
}

.img-container-4-3 > img{
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
  object-fit:cover;
}

/*parking-icon*/

.parkingIcon i:nth-child(2){
  opacity:0;
}

.parkingIcon i:nth-child(1){
  color:#00f;
  background:#fff;
}

.car .parkingIcon{
  opacity:.4;
  position:absolute;
  left:auto;
  top:auto;
  bottom:10px !important;
  right:10px !important;
  font-size:2em;
  transform:scale(1);
  transition:transform .3s ease;
  color:#00f;
  background:#fff;
  width:1em;
  height:1em;
  overflow:hidden;
  transition:.3s all ease;
  border-radius:3px;
  box-shadow:0 0 1px 1px rgba(0,0,0,.5);
}

.car .parkingIcon i{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
}

.car.parkingIcon i:nth-child(2){
  
  opacity:0;
  color:#fff;
  top: 23px;
  left: 23px;
  font-size: .3em;
}

.car .parkingIcon i:nth-child(2) {
  opacity: 0;
  color: #20c997;
  top: 23px;
  left: 23px;
  font-size: 0.3em;
}


.car:hover .parkingIcon
{
  opacity:1;
}

.car.parked .parkingIcon i:nth-child(2){
  opacity:1;
}


.car.parked .parkingIcon .fa-parking{
  color:#00f;
}

.car.parked .parkingIcon,
.car .parkingIcon:hover{
  transform:scale(1.1);
  opacity:1;
}
.car.parked .parkingIcon{
  bottom:calc(100% - 2em) !important;
}

/*
.car h2{
  height: 3em;
}
*/

.car a, .car a:hover, .car a:visited, .car a:active{
  color:#000;
}

/*checklabel*/
label.checklabel{
  display:block;
}

label.checklabel input[type=checkbox]{
  display:none;


}



/*checkmark*/

.checklabel{
  display:block;
  color:#000;
  padding-left:1.25em;
  position:relative;
}

.checklabel input[type=checkbox],
.checklabel input[type=radio]{
  display:none;
}

.checkmark{
  display:inline-block;
  border:.1em solid #000; /*var(--color-template);*/
  width:1em;
  height:1em;
  position:absolute;
  left:0;
  top:.125em;
  background:transparent;
  color: var(--color-template);
}

input[type=checkbox] + .checkmark{
  border-radius:.1em;
}

input[type=radio] + .checkmark{
  border-radius:50%;
}




.checkmark > i{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  display:none; 
}

input[type=checkbox] ~ .lb,
input[type=radio] ~ .lb{
  opacity:.6;
}

input[type=checkbox]:checked ~ .lb,
input[type=radio]:checked ~ .lb{
  opacity:1;
}

input[type=checkbox]:checked + .checkmark *,
input[type=radio]:checked + .checkmark *
{
  display:initial;
}

input[type=radio]:checked + .checkmark{
  background:radial-gradient(ellipse at center, var(--color-template) 0%, var(--color-template) 47%, var(--color-template) 47%, transparent 47%, transparent 48%)
}


/*checktab*/
.check-tab{
  display:block;
  margin:0;
  cursor:pointer;
}
.check-tab input[type=radio],
.check-tab input[type=checkbox]{
  display:none;
}

.check-tab input[type=radio] ~ .lb,
.check-tab input[type=checkbox] ~ .lb{
  opacity:.9;
}

.check-tab input[type=radio] + *,
.check-tab input[type=checkbox] + *{
  display:block;
  margin:0;
  background: var(--color-template);
  color:#fff;
  padding:1em;
  margin-bottom: -1px;
  border: 1px solid transparent;
  border-top-left-radius: 0.25rem;
  border-top-right-radius: 0.25rem;
  margin-right: 2px;
  padding:8px 12px;
}
.check-tab input[type=radio]:checked + *,
.check-tab input[type=checkbox]:checked + *{
  color: #495057;
  background-color: transparent;
  border-color: #dee2e6 #dee2e6 transparent;
}

.no-border{
  border:none;
}

/*Linkbutton*/
.page-item.active .page-link{
  background:var(--color-template);
  color:#fff;
}

.page-item .page-link{
  background:transparent;
  color:var(--color-template);
}

/*nav-menu-flex*/

.nav-menu-flex{
  display:flex;
  overflow:auto;
  text-decoration:none;
  list-style-type: none;
}

.nav-menu-flex{
  padding:0;
  margin:0;

}

.nav-menu-flex a{
  white-space: nowrap;
  padding: 22px 15px 18px 15px;
  text-decoration: none;
  display: inline-block;
  color: #fff;
  font-family: "Roboto", Helvetica, Arial, sans-serif;
  font-weight: 300;
  font-size: 15px;
  outline: none;
}

.nav-menu-flex .nav-item-fixed-right{
  flex-grow:1;
  text-align:right;
}

.nav-menu-flex .invisible{
  opacity:0;
  position:absolute;
}

.nav-menu-flex .nav-item-dropdown .dropdown-item{
  padding:0;
}


.nav-menu-flex.nav-flex-standard a,
.nav-menu-flex.nav-flex-standard a:visited,
.nav-menu-flex.nav-flex-standard a:hover,
.nav-menu-flex.nav-flex-standard a:active
{
  text-decoration: none;
  color: #00376B;
  display: inline-block;
  font-weight: bold;
}


.nav-menu-flex.nav-flex-standard .nav-item-dropdown .dropdown-item a,
.nav-menu-flex.nav-flex-standard .nav-item-dropdown .dropdown-item a:visited,
.nav-menu-flex.nav-flex-standard .nav-item-dropdown .dropdown-item a:hover,
.nav-menu-flex.nav-flex-standard .nav-item-dropdown .dropdown-item a:active{
  display:block;
}

.dropdown-menu.dropdown-absolute{
  position:absolute;

}



/**shares*/

.shares *{
  color:var(--color-template);
}
.shares a{
  display:inline-block;
  padding: 1em;
}
.shares a > *{
  display:block;
}
.shares a > i{
  font-size:3em;
  margin-bottom: .25em;
}
.shares a > svg{
  display:inline-block;
  width: 3em;
  height: 3em;
  margin-bottom: .55rem;
  color: var(--color-template);
  fill: var(--color-template);
}


/***/

.icon-cell{
  position:relative;
  padding-left: 1.25rem;
}

.icon-cell > i{
  position:absolute;
  left:0;
  padding:0;
  padding-top:.125rem;
}

.btn-circle.d-none{
  display:none !important;
}

.btn-circle.parking-link{
  color:#fff;
  position:relative;
}

.btn-circle.parking-link i{
  color:#00f;
  background:#fff;
  padding:1px;
  display:block;
  box-shadow: 0 0 1px 1px rgba(0,0,0,.5);
  font-size:.7em;
  border-radius:2px;
  line-height:1em;
  width:1em;
  height:1em;
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-30%);
}

.btn-circle.parking-link i:before{
  line-height:0;
  position:absolute;
  left:1px;
  top:50%;
}

.btn-circle.parking-link .badge{
  position:absolute;
  top:0;
  left:50%;
  transform:translateX(-50%);
  font-size:.4em;
}

.side-quick-controls{
  position:fixed;
  z-index:10;
  bottom:70px;
  right:0;
}

.side-quick-controls .btn-circle{
  box-shadow:0 0 1px 0px rgba(0,0,0,.3);
  border: 1px solid rgba(255,255,255,.5)
}

.btn-circle.parking-link, .btn-circle.parking-link:hover {
  position: relative;
  color: #fff;
  position: relative;
  background: #00f;
}




/*parking-icon*/

.parkingIcon i:nth-child(2){
  opacity:0;
}

.parkingIcon i:nth-child(1){
  color:#00f;
  background:#fff;
}

.car .parkingIcon{
  opacity:.4;
  position:absolute;
  left:auto;
  top:auto;
  bottom:10px !important;
  right:10px !important;
  font-size:2em;
  transform:scale(1);
  transition:transform .3s ease;
  color:#00f;
  background:#fff;
  width:1em;
  height:1em;
  overflow:hidden;
  transition:.3s all ease;
  border-radius:3px;
  box-shadow:0 0 1px 1px rgba(0,0,0,.5);
}

.car .parkingIcon i{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
}

.car .parkingIcon i:nth-child(2){
  
  opacity:0;
  color:#20c997;
  top: 23px;
  left: 23px;
  font-size: .3em;
}


.car:hover .parkingIcon
{
  opacity:1;
}

.car.parked .parkingIcon i:nth-child(2){
  opacity:1;
}

.no-parking .car:not(.parked) .parkingIcon{
  display:none;
}


.car.parked .parkingIcon .fa-parking{
  color:#00f;
}

.car.parked .parkingIcon,
.car .parkingIcon:hover{
  transform:scale(1.1);
  opacity:1;
}
.car.parked .parkingIcon{
  bottom:calc(100% - 2em) !important;
}


.shares *{
  color:var(--color-template);
}
.shares a{
  display:inline-block;
  padding: 1em;
}
.shares a > *{
  display:block;
}
.shares a > i{
  font-size:3em;
  margin-bottom: .25em;
}


.icon-cell{
  position:relative;
  padding-left: 1.5rem;
}

.icon-cell > i{
  position:absolute;
  left:0;
  padding:0;
  padding-top:.125rem;
}

.btn-circle.d-none{
  display:none !important;
}

.btn-circle.parking-link,
.btn-circle.parking-link:hover{
  position:relative;
  color:#fff;
  position:relative;
  background:#00f;
}

.btn-circle.parking-link:after{
  content: "P";
  position: absolute;
  font-size: 1.3em;
  top: 50%;
  left: 50%;
  transform: translate(-67%,-50%);


}

.btn-circle.parking-link .badge{
  position: absolute;
  font-size: 0.4em;
  bottom: 0.5em;
  background: #fff;
  color: #00f;
  top: auto;
  height: 1.3em;
  left: 63%;
  width: 2em;
  line-height:1em;
}

.side-quick-controls{
  position:fixed;
  z-index:10;
  bottom:70px;
  right:0;
}

.side-quick-controls .btn-circle{
  box-shadow:0 0 1px 0px rgba(0,0,0,.3);
  border: 1px solid rgba(255,255,255,.5)
}


.show-on-parked{
  display:none;
}

.parked .show-on-parked{
  display:initial;
}

.parked .hide-on-parked{
  display:none;
}


/* car-nav**/

.sticky-pinned.no-transitions{
  transition:none !important;
}
.sticky-pinned.no-transitions *{
  transition:none !important;
}

.car-nav{
  transition:all .5em ease;
  border: 0px dotted red;
  position:sticky; 
  top:60px; 
  z-index:10; 
  background:transparent;
}

.car-nav a{
    cursor:pointer;
}


.car-nav h1,
.car-nav h2{
  transition: all ease .3s;
  line-break:anywhere;
}

.car-nav.is-pinned h2,
.car-nav.is-pinned h1
{
  font-size:1rem;
  white-space:nowrap;
  text-overflow: ellipsis;
  overflow:hidden;
  margin:0;
}
.car-nav.is-pinned h2 > span,
.car-nav.is-pinned h1 > span{
  display:inline-block;
  max-width:100%;
  overflow:hidden;
  text-overflow: ellipsis;
}

.car-nav.is-pinned .pinned-hidden{
  display:none;
}

@media (min-width:768px){
  .car-nav.is-pinned .pinned-show-md{
    display:initial !important;
  }


}



.car-nav.is-pinned .pinned-border-bottom-shadow{
  position:relative;

}

.car-nav.is-pinned .pinned-border-bottom-shadow:after{
  position:absolute;
  content:'';
  width:100%;
  left:0;
  top:100%;
  height:2px;
  
  background: linear-gradient(180deg, rgba(0,0,0,0.3) 0%, transparent 100%);
}



/*parallax*/
.suchmasken > .suchmasken{
  background-position-x: center !important;
  background-size: cover !important;

}


/***/
#contact h1,
#contact h2,
#contact h3,
#contact h4,
#contact h5,
#contact h6{
  color:#fff;
  padding: 10px;

}


/*c-primary*/
.c-primary{
  color:var(--color-template);
}


/*Navigation to upper case*/
header nav{
  text-transform: uppercase;
}
#mobile-nav{
  text-transform: uppercase;
}


/*Tabelle text korrigieren*/
table td,
table th
{
  font-size:16px;
  
}
.table-no-border td{
  border-top:none !important;
  border-bottom:none !important;
  border-left:none !important;
  border-right:none !important;
}

.contact form{
  font-size:16px;
}


header nav a{
  text-transform: uppercase;
}




.btn-form-control{
  padding:6px 12px !important;
  border-radius: 4px !important;
}


/** Google Bewertungen */


.star{
  position:relative;
  height:1em;
  --rating:5em;
  font-size:25px;
}
.star:after{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  height:1em;
  width:var(--rating);
  content:'';
  display:block;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAoCAYAAACIC2hQAAAACXBIWXMAAAKDAAACgwH29H4dAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAA8BJREFUWIXFmM9vG0UUxz9v1469TlCKqFQu/KiEVAkqSBs7LYltAgikBonWhFwA9YSEOOUfQIKeOdEDSPQYqeKAkABRgdRCRO2K2kn5IVBReypIKAVEC2m6tunO4xDHdRI73rUn9Hvb3Zn3PjvfnXk7I6qKTa2cObjLGQge8nKVks24js1gAJIw08C07bj2QZVp0AKI2IxrFXR5Pr0TNA/y4Mq5zGM2Y1sFdR2ZBmIAEpiCzdh2rXduf5uOyAs2Q4utWb985sA9sQGzRGNEARxx9iSy5y/ZiG9tRONxc4QWSACj5rCt+Datb7ckWftOrVh/fX7fjoQbuwoMbHhk1AnuS01c+K3fHFZGNOnGj7AZcjW+cZ63kcMKqGK2qERixf7+rS9l7/JN7Xcg2aHFv3Wp7RrO/nCtnzR9j2jV1A/TGRIgntDkc/3m6RtU0a4/ICrat/3in00fVdU3QNzGrS4WaaDwTzMA5IBElzw3QT7rGRJOiaril0YPYpyTwO5eg22Taoi+6WUX325Opmun08PJhHMCdOYOwwGgcFFdeWlwvPwdtJn11WLmqCrvAak7AdjQnOfXX+fZ71fWbrRdnm6Uxh6JqX6gyt7/FQ/+UOXVVL7yycYHbWf90ET5p6QbH0Pl+PazrUrhtDrBSDtICLHg+2czLwIngB3bwActEwbUdGoUqjJVz+1/QAP3JDBuk1DhIsrLqXzl225tQy34yfELV7xg6AlVjgEd3zqi5lJ+PRMGEnqo9X7xQAE1H/WEtqpARQqpbPnTKJ2il1A1buQ+6+Uq8kvUTtFBpf+CIBpE3vhFA11Mp1CZippkU9IedqiRQP2bMgUMRU2yUarsrZUye6L0iTaiFmxfkwbRfv3Cg4a3/WuEn7s10oj2hwYNYfstVY55S7uf8tz4/hDlN10tpe8Pmz/WvUlDojNoxwO6K+LoK97EQrFx7XswWy1mFlR5l/YvKBo4BeCdMOnDjejWtn9Yl9q+5G3IppLZypwjzijQvvpE2KKEAu1g+7KKvOblKjNb7TAT2fOXvBvXH298ChvLYG5lfuxea6CbZruy4Kg7msqW3w/V/9Dlmpcvz+rqEc9frfklRqgDiu6g621XVI57O/2JRP6by6EgW5TKVT5GZQRonu87Gs7+rqBN25WrRmTKy5dnefjHelTINXn58q9eMDS59iem8PTfxUfv7hsU0RlBvjBGRgaz5c97BVynya9upfKVt0TNM8CfYQ4otgadfzImhlPJXOXQ4GR5yQpki5L5xS8VHTWqw93a/gf5WV201NJ8jwAAAABJRU5ErkJggg==);
  background-size: 1em 1em;
}

.ratings {
  line-height: 1.55;
  color: #333;
  font-size: 16px;
  font-family: "Raleway", Helvetica, Arial, sans-serif;
}

.ratings .rating-comment{
  height:6em;
  overflow:hidden;
  position:relative;
}

.ratings .review{
  cursor:pointer;
}

.modal .card.review{
  box-shadow:none;
  border:none;
}

.ratings .card {
  height:auto !important;
  min-height:auto !important;
}


.ratings .card-body{
  font-size:15px;
}

.slider-nav {
  display:flex;
  align-items: center;
  justify-content: center;
  column-gap: 50%;
}

.slider-nav .chevron-nav{
  position:relative;
  color:var(--cc-btn-primary-text);;
  background:var(--color-template);
  width:2em;
  height:2em;
  border:none;
  opacity:1;
}

.slider-nav .chevron-nav:hover{
  opacity:1;
}

.slider-nav .chevron-nav i {
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
}



@media (min-width: 768px) {

  .slider-nav .chevron-nav{
      position:absolute;
      top:50%;
      transform:translateY(-100%);
  }

  .slider-nav .chevron-nav i {
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
  }

  .slider-nav .chevron-nav.chevron-nav-left{
    left:15px;
    transform:translateX(-100%);
  }

  .slider-nav .chevron-nav.chevron-nav-right{
    right:15px;
    transform:translateX(100%);
  }

}



/** icon*/

.buttonlike-icon{
  display:inline-block;
  background: var(--color-template);
  color: #fff;
  width: 1em;
  height: 1em;
  font-size:1.5em;
  position:relative;
  border-radius: 4px;
  line-height:1em;
  vertical-align: middle;
}

.buttonlike-icon i{
  position:absolute;
  top:50%;
  left:50%;
  font-size:.8em;
  transform:translate(-50%,-50%);
}

/** datepicker*/

/** nav link*/

.nav-tabs .nav-link{
  
  color: var(--color-template);
  background:#fff;
  border-color:#ccc;
}
.nav-tabs .nav-link.active{
  background: var(--color-template);
  border-color: var(--color-template);
  color: #fff;
}

/** Status */

.state-clircle{
  display:inline-block;
  width:1em;
  height:1em;
  border-radius:.5em;
  overflow:hidden;
}

.state-clircle.color-red{
  background:#f45b5b;
}

.state-clircle.color-green{
  background:#7ff07f;
}

.state-clircle.color-yellow{
  background:#ffbf00;
}


.state-clircle.color-template{
  background:var(--color-template);
}


/** form control*/

form .disabled{
  filter:grayscale(1) contrast(.5) brightness(1.4);
  touch-action: none;
  pointer-events:none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}



/** shadow*/
.box.shadow-green,
.shadow-green{
  box-shadow: 0 0 2px 1px green;
}

.box.shadow-red,
.shadow-red{
  box-shadow: 0 0 2px 1px red;
}



/** Editbox **/


.edit-box{
  display: flex;
  flex-direction: column;
  height: 100%;
}

.edit-box > .content{
  flex: 1;
}

.edit-box > .footer{
  flex-shrink: 0;
  background:initial;
  color:initial;
  margin:0;
  padding:0;
}

.box-white{
  background:#fff;
}

/** right menu */
.right-menu > :nth-child(1){
  position:sticky;
  top:120px;
}


/** uploadprogress**/

.uploadprogress{
  display:block;
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:rgba(255,255,255,.8);
  z-index:10000;
}

.uploadprogress > div{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  max-width:600px;
  width:100%;
  background:#fff;
  border-radius:.2em;
  border:1px solid #ccc;
  padding:1em;
}

.uploadprogress > div > .text{
  font-size:1.2em;
  font-weight: bold;
  text-align: center;
  margin-bottom: .5em;
}

.uploadprogress > div > .prgr{
  position:relative;
  display:block;
  width:100%;
  height:20px;
  border-radius:15px;
  border:1px solid var(--color-template);
  overflow:hidden;
}

.uploadprogress > div > .prgr:after{
  content:'';
  position:absolute;
  left:0;
  top:0;
  height:100%;
  width:var(--progress, 0%);
  background:var(--color-template,#007CC0);
  transition:all ease .2s;
  animation: moveGradient 3s infinite linear;
}