@font-face {
   font-family: 'Dax';
   src: url(/css/DaxWeb.woff);
}

* {
   font-family: Dax;
}

/*No-Borders*/
/* {
    -webkit-border-radius: 0 !important;
    -moz-border-radius: 0 !important;
    border-radius: 0 !important;
} */

.bg-green {
    background-color: rgba(199,214,132,1); /* #96b11787;  rgba(150,177,23,0.53) */
}

.bg-lightgreen {
	background-color: rgba(199,214,132,0.3);
}

.sidebar {
	font-weight: bold;
}

.perle-border{
	border-color:#aaca2a;
}

.text-perle {
	color: #aaca2a !important;
  }

  a.text-perle:hover, a.text-perle:focus {
	color: #b30303 !important;
  }

a.custom-card,
a.custom-card:hover {
  color: #000000;
  text-decoration: none !important;
  width: 100%;
}

a.custom-card h6 {
	font-weight: bold;
	color: #97be0d;
}

a.custom-card:hover h6 {
	font-weight: bold;
	color: #fff;
}

a.custom-card h5 {
	font-weight: bold;
	color: #97be0d;
}

a.custom-card:hover h5 {
	font-weight: bold;
	color: #fff;
}

a.custom-card div {
	background-color: rgba(199,214,132,0.3);
}

a.custom-card:hover div {
	background-color: rgba(199,214,132,1); /* #96b11787;  rgba(150,177,23,0.53) */
}

a.custom-card:active div {
	background-color: rgba(199,214,132,1); /* #96b11787;  rgba(150,177,23,0.53) */
}

/* red card */
a.red-card,
a.red-card:hover {
  color: #000000;
  text-decoration: none !important;
  width: 50%;
  height: 100%;
}

a.red-card h6 {
	font-weight: bold;
	color: #9a141b;
}

a.red-card:hover h6 {
	font-weight: bold;
	color: #fff;
}

a.red-card h5 {
	font-weight: bold;
	color: #9a141b;
}

a.red-card:hover h5 {
	font-weight: bold;
	color: #fff;
}

a.red-card div {
	background-color: rgba(214, 132, 132, 0.3);
}

a.red-card:hover div {
	background-color: rgb(214, 132, 132); /* #96b11787;  rgba(150,177,23,0.53) */
}

a.red-card:active div {
	background-color: rgb(214, 132, 132); /* #96b11787;  rgba(150,177,23,0.53) */
}

/* red card */
a.green-card,
a.green-card:hover {
  color: #000000;
  text-decoration: none !important;
  width: 50%;

}

a.green-card h6 {
	font-weight: bold;
	color: #97be0d;
}

a.green-card:hover h6 {
	font-weight: bold;
	color: #fff;
}

a.green-card h5 {
	font-weight: bold;
	color: #97be0d;
}

a.green-card:hover h5 {
	font-weight: bold;
	color: #fff;
}

a.green-card div {
	background-color: rgba(199,214,132,0.3);
}

a.green-card:hover div {
	background-color: rgba(199,214,132,1); /* #96b11787;  rgba(150,177,23,0.53) */
}

a.green-card:active div {
	background-color: rgba(199,214,132,1); /* #96b11787;  rgba(150,177,23,0.53) */
}


.font-size-7 {
	font-size: 1.6rem;
}
.font-size-6 {
	font-size: 1.5rem;
}
.font-size-5 {
	font-size: 1.4rem;
}
.font-size-4 {
	font-size: 1.2rem;
}
.font-size-3 {
	font-size: 1rem;
}
.font-size-2 {
	font-size: 0.8rem;
}

.navbar-nav > li > a {
    padding-top: 17px !important;
    padding-bottom: 18px !important;
	
	font-size: 1rem;
}


.navbar li a:active {
	background-color:#97be0d !important;
	color:#fff !important;
}
.navbar li a:hover {
	background-color:#97be0d !important;
	font-size: 1rem;

	color:#fff !important;
	-o-transition:.5s;
	-ms-transition:.5s;
	-moz-transition:.5s;
	-webkit-transition:.5s;
  /* ...and now for the proper property */
	transition:.5s;
}

.navbar > li .show {
	background-color:#97be0d !important;
	font-size: 1rem;

	color:#fff !important;

}

/* navbar hamburger */

.icon-bar {
	width: 31px; 
	height: 3px;
	background-color: #9a141b;
	display: block;
	transition: all 0.2s;
	margin-top: 7px
}

.navbar-toggler {
  border: none;
  background: transparent !important;
}


.navbar-toggler span:nth-child(1) {
  transform: translate(8px,-1px)  rotate(45deg) ;
  transform-origin: bottom left;
}

.navbar-toggler span:nth-child(2) {
  opacity: 0;
}

.navbar-toggler span:nth-child(3) {
  transform: translate(10px,1px) rotate(-45deg) ;
  transform-origin: bottom left;
}

.navbar-toggler.collapsed span:nth-child(1) {
  transform: rotate(0);
}

.navbar-toggler.collapsed span:nth-child(2) {
  opacity: 1;
}

.navbar-toggler.collapsed span:nth-child(3) {
  transform: rotate(0);
}

  .navbar-toggler:focus, .navbar-toggler:active {
    outline: none;
    box-shadow: none;
  }


/* ---------------------------------------------------------------------*/
/* setting this avoids the horizontal scroll-bar on all pages (do not know why) */
.navbar-brand {
	margin-right: 0px;
}

.secondNav {
	padding-top: 10px !important; 
	padding-bottom: 10px !important; 
	padding-right: 20px !important; 
	padding-left: 0px !important;
}
/* media */


@media only screen and (max-width : 768px) {
       .navbar-collapse li a { 
        padding:15px 10px; 
        }

       .navbar-nav > li > a {
        padding-top:10px !important;
        padding-bottom:10px !important;
        padding-left:20px !important;
       }
	   
	   .navbar-brand {
		   padding-left: 20px;
	   }
	   .navbar-toggler {
		   margin-left: 20px;
		   margin-right: 20px;
	   }
	   .navbar {
		   padding-left: 0 !important;
		   padding-right: 0 !important;
	   }
  .navbar-nav .open .dropdown-menu > li > a,
  .navbar-nav .open .dropdown-menu .dropdown-header {
    padding: 5px 15px 5px 30px;
  }
		
}
<!-- #96b12280 -->

/* /// Layout // */

.homeicon {
    background-image: url(/images/home-icon-b.png);
    background-repeat: no-repeat;
    color:#fff;
    width:16px;
    height:20px;
}
.homeiconactive {
    background-image: url(/images/home-icon-b.png);
    background-repeat:no-repeat;
    color:#fff;
    width:16px;
    height:24px;
}
.homeicon:hover {
        background-image: url(/images/home-icon-b.png);
        background-repeat:no-repeat;
        color:#6191D9;
        width:16px;
        height:20px;
    }

/* ------ caroussell ---------------------- */

.carousel-control-next-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23eee' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E");
}
ol.carousel-indicators li,
ol.carousel-indicators li.active {
  height: 5px;
}

@media only screen and (max-width : 768px) {
	ol.carousel-indicators li,
	ol.carousel-indicators li.active {
	margin-bottom: 12rem; 
	}
	

}


.caption-right {
    color: black;
    text-align: left;
    width: 38vw;
    right: 0;
    top: 0;
    xtransform: translateY(-50%);
    xbottom: initial;
	background: rgba(0,0,0,0);
    /* background: rgba(199,214,132,0.45); */
    padding: 5vw 2vw;
    height: 100%;
    left: auto; /*Added*/
	z-index: 0;
}

/* Use the "vw" unit when sizing the text. 10vw will set the size to 10% of the viewport width. */

.caption-right > h1 {
	font-size: 3.2vw;
	margin: 2.7vw 0vw;
}
.caption-right > h2 {
	font-size: calc(14px + 16 * ((100vw - 768px) / 1800)); /* calc(0.7rem + 0.5vw ); */ /* max(1em, 12px);     1.4vw;*/
	line-height: 1.8;
}
.caption-right > h3 {
	font-size: 0.8vw;
}
.item-left > img {
	width: 60vw;
}

.caption-small > h1, .caption-small-on-top > h1 {
	font-size: 1.4rem !important;
	margin: 2.7vw 0vw !important;
}
.caption-small > h2, .caption-small-on-top > h2 {
	font-size: 1rem ;
	line-height: 1.6;
}
.caption-small > h3, .caption-small-on-top> h3 {
	font-size: 0.8vw;
}

.caption-small {
    position: relative;
    left: auto;
    right: auto;
	color: #000;
    top: 0;
	padding: 5vw 2vw;
    text-align: left;
    height: 12rem;
}

.caption-small-on-top {
	background: rgba(150,177,23,0.53); /* #96b11787; */
    color: black;
    text-align: left;
    width: 45vw;
    right: 0;
    bottom: 0;
    xtransform: translateY(-50%);
    xbottom: initial;
    padding: 5vw 2vw;
    height: 50%;
    left: auto; /*Added*/
	z-index: 0;
}

.perle-main a:link {
	text-decoration:underline;  color: #7a990c
}
.perle-main a:visited {
	text-decoration:underline;  color: #7a990c
}
.perle-main a:hover {
	text-decoration:underline;  color: #8d1923
}

.perle-collapsible a:link {
	text-decoration:none;  color: #7a990c
}
.perle-collapsible a:visited {
	text-decoration:none;  color: #7a990c
}
.perle-collapsible a:hover {
	text-decoration:none;  color: #7a990c
	cursor: pointer
}
a.green:link		{  text-decoration:underline;  color: #7a990c  }
a.green:visited	{  text-decoration:underline;  color: #7a990c  }
a.green:hover		{  text-decoration:underline;  color: #8d1923  }
a.green:active	{  text-decoration:underline; color: #8d1923  }

.perle-footer a {
	color: black;
	text-decoration: none;
}

.perle-footer a:hover {
	color: grey;
	text-decoration: none;
}

.perle-nav-dropdown {
	margin-top: 0;
	border-top: 0;
	border-color: #c7d684;
	background-color: #eef3da; /* rgba(199,214,132,0.3); */
}
	
.navbar-light .navbar-nav .active>.nav-link, .navbar-light .navbar-nav .nav-link.active, .navbar-light .navbar-nav .nav-link.show, .navbar-light .navbar-nav .show>.nav-link {
    color: #f8f9fa;
    background-color: #97be0d;
}	

/* ------------------------------ login form style ----------------------------------- */
div.loginform input[type=text] {
	width: 100%;
	max-width: 400px;
	box-sizing: border-box;
	border: 1px solid grey;
	border-radius: 4px !important;
	padding: 8px;
}
div.loginform input[type=text]:hover {
	border: 1px solid darkblue;
	background-color:#eef3da;
}
div.loginform input[type=text]:focus {
	border: 1px solid darkblue;
	background-color:#eef3da;
}
div.loginform input[type=password] {
	width: 100%;
	max-width: 400px;
	box-sizing: border-box;
	border: 1px solid grey;
	border-radius: 4px !important;
	padding: 8px;
}
div.loginform input[type=password]:hover {
	border: 1px solid darkblue;
	background-color:#eef3da;
}
div.loginform input[type=password]:focus {
	border: 1px solid darkblue;
	background-color:#eef3da;
}
div.loginform input[type=submit] {
	background-color: #97be0d;
	color: white;
	width: 100%;
	max-width: 400px;
	padding: 12px 32px;
	text-decoration: none;
	box-sizing: border-box;
	border: none;
	border-radius: 4px !important;
	padding: 8px;
}

.txt-lightgreen {
	color: #97be0d;
}

div.loginform p, div.loginform form {
	color: #01095D ; 
}
div.loginform p.error {
	color: red ; 
	}

.loginform {
	width: 100%;
	max-width: 400px;
	}

	[data-toggle="collapse"] i:before{
		content: "\f068";
		color: #97be0d;
	}
	
	[data-toggle="collapse"].collapsed i:before{
		content: "\f067";
		color: #97be0d;
	}
	@import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css");


	.btn-slider {
		padding: .2rem .2rem !important;
	}

	.btn-slider.focus {
		box-shadow: none;
	}	
	.btn-slider:focus {
		box-shadow: none;
	}

	div.lexikon h5 {
		font-style: italic;
	}
	div.lexikon p {
		margin-left: 30px;
	}

	.sidebar-item {
		position: absolute;
		top: 10;
		left: 0;
		width: 100%;
		height: 100%;
		
		/* Position the items */
		// &:nth-child(2) { top: 25%; }
		// &:nth-child(3) { top: 50%; }
		// &:nth-child(4) { top: 75%; }
	}
	
	.sticky-item {
		position: sticky;
		top: 0;
		height: 65vh;
	  padding: 0 15px;
	}

	div.bg-lightgreen a {
		color: darkgreen;
	}
	
	div.bg-lightgreen a:hover {
		color: darkgreen;
		text-decoration: none;
	}

	td {
		line-height: 1.5;
		padding-right: 5px;
	}

	a.cloudorange {
		color: #e09c09 !important;
		text-decoration: none !important;
	}

	a.cloudorange:hover  {
		color: #e09c09 !important;
		text-decoration: none !important;
	}

	a.cloudorange:visited  {
		color: #e09c09 !important;
		text-decoration: none !important;
	}

	a.cloudred {
		color: #9a141b !important;
		text-decoration: none !important;
		font-weight: bold;
	}

	a.cloudred:hover  {
		color: #9a141b !important;
		text-decoration: none !important;
	}

	a.cloudred:visited  {
		color: #9a141b !important;
		text-decoration: none !important;
	}	background-color: #9a141b;
 
	tr.hide-table-padding td {
		padding: 0 !important;
	  }

	.table-hover tbody tr:hover td, .table-hover tbody tr:hover th {
		background-color: rgba(199,214,132,1);
	  }

	  /*----------------- tooltips ----------------------------*/

	  .red-tooltip + .tooltip > .tooltip-inner {background-color: #f00;}
	  
	  .tooltip-inner {
		max-width: 236px !important;
		height: 76px;
		padding: 10px 15px 10px 20px;
		background: rgba(199,214,132,1);
		color: rgb(0, 0, 0);
		border: 1px solid #97be0d;
		text-align: left;
	  }
	  
	  .tooltip.show {
		opacity: 1;
	  }
	  
	  .bs-tooltip-auto[x-placement^=top] .arrow::before, .bs-tooltip-top .arrow::before {
		border-top-color: #97be0d;
	}
	.bs-tooltip-auto[x-placement^=right] .arrow::before, .bs-tooltip-right .arrow::before {
		border-right-color: #97be0d;
	}
	.bs-tooltip-auto[x-placement^=bottom] .arrow::before, .bs-tooltip-bottom .arrow::before {
		border-bottom-color: #97be0d;
	}
	.bs-tooltip-auto[x-placement^=left] .arrow::before, .bs-tooltip-left .arrow::before {
		border-left-color: #97be0d;
	}

	.perle-sticky {
		position: sticky; 
		height: 85vh; 
		top: 0;
	}

	.scrollbox {
		max-height: 100%;
		overflow-y: auto;
		/* Works on Firefox */
		scrollbar-width: thin;
		scrollbar-color: #6b8510  #eef3da;
	}

	

  
  /* Works on Chrome, Edge, and Safari */
 div.scrollbox::-webkit-scrollbar {
	width: 12px;
  }
  
  div.scrollbox::-webkit-scrollbar-track {
	background:  #eef3da;
  }
  
  div.scrollbox::-webkit-scrollbar-thumb {
	background-color: #6b8510;
	border-radius: 20px;
	border: 3px solid  #eef3da;
  }

.rowclick
{
   transition: transform .2s;
}

.rowclick:hover {
   cursor:pointer; 
   transform: scale(1.03);
   background:#6b8510 !important;;
   color:#eef3da;
}