:root {
    /* Default global value */
    --bulma-primary-h: 205deg;
    --bulma-primary-s: 85%;
    --bulma-primary-l: 60%;

    --bulma-link-h: 205deg;
    --bulma-link-s: 85%;
    --bulma-link-l: 60%;

    --bulma-card-background-color-h: 205deg;
    --bulma-card-background-color-s: 70%;
    --bulma-card-background-color-l: 50%;

    --bulma-title-color-h: 51deg;
    --bulma-title-color-s: 81%;
    --bulma-title-color-l: 90%;

    /* --bulma-text-h: 51deg;
    --bulma-text-s: 81%;
    --bulma-text-l: 90%; */

    /* --bulma-background-h: 205deg;
    --bulma-background-s: 70%;
    --bulma-background-l: 50%; */

    /* --bulma-link: hsl(205, 60%, 50%);
    --bulma-link-text: #3c6d90; */
    /* --bulma-body-color: #24292e; */
    /* --bulma-background: #fff; */

    --bulma-navbar-height: 3rem;
    --bulma-navbar-item-img-max-height: 180px;
}

/* .body {
    background-color: #24292e;;
} */

#top-nav {
    border-bottom: 3px solid var(--bulma-primary);
}

#unit-nav {
    border-bottom: 3px solid var(--bulma-primary);
}

.navbar,
.navbar-brand {
  overflow: visible !important;   /* Bulma might otherwise hide overflow */
}

/* .navbar-brand {
  position: relative !important; 
} */

.navbar-item img {
    max-height: 90px;
}

.navbar-brand .logo {
  display: block;           /* or inline-block */
  /* margin-top: 1rem; */
  margin-bottom: -2rem;     /* pull lower half back out */
}

.thumb-image {
    position: absolute;
    top: 0; 
    right: 0;
    width: 200px; 
    height: 78px; 
    object-fit: cover; 
    object-position: 100% 0;
    border-radius: 8px;
    mask-image: radial-gradient(200px 75px at 100% 0%, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 100%);
}

.navbar-image {
  /* Show only a 100×73 viewport */
  width: 100px;
  height: 73px;
  display: block;
  border-radius: 8px;
  margin: 0;

  position: absolute;
  left: -16px;

  /* Display the intrinsic image without scaling, clipped by the element box */
  object-fit: none;             /* don’t scale the image */
  object-position: right top;   /* align the image’s right edge inside the box */

  /* Neutralize common global CSS that shrinks images */
  max-width: none;

  /* Fade the last 100px (right side of this 200px box) to transparent */
  /* -webkit-mask-image: linear-gradient(to right, black 0 75px, transparent 100%);
  -webkit-mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-image: linear-gradient(to right, black 0 75px, transparent 100%);
  mask-size: 100% 100%;
  mask-repeat: no-repeat; */
}

.avatar {
  width: 40px;
  height: 40px;
  background-color: #3273dc; /* Bulma blå färg */
  color: white;
  font-weight: bold;
  font-size: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%; /* gör den rund */
  cursor: pointer;
  user-select: none;
}

.is-z-index-100 {
    z-index: 100;
    position: relative;
}

.do-ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.min-height {
    min-height: 100px;
}

/*             styles for the star rater                */
.star-rating{
	list-style:none;
	margin: 0px;
	padding:0px;
	width: 100px;
	height: 20px;
	position: relative;
	background: url(../../imgs/ratestar.png) top left repeat-x;		
}
.star-rating li{
	padding:0px;
	margin:0px;
	/*\*/
	/* float: left; */
	/* */
}
.star-rating li a{
	display:block;
	width:20px;
	height: 20px;
	text-decoration: none;
	text-indent: -9000px;
	z-index: 20;
	position: absolute;
	padding: 0px;
}
.star-rating li a:hover{
	background: url(../../imgs/ratestar.png) left bottom;
	z-index: 1;
	left: 0px;
}
.star-rating a.one-star{
	left: 0px;
}
.star-rating a.one-star:hover{
	width:20px;
}
.star-rating a.two-stars{
	left:20px;
}
.star-rating a.two-stars:hover{
	width: 40px;
}
.star-rating a.three-stars:hover{
	width: 60px;
}
.star-rating a.three-stars{
	left: 40px;
}
.star-rating a.four-stars{
	left: 60px;
}	
.star-rating a.four-stars:hover{
	width: 80px;
}
.star-rating a.five-stars{
	left: 80px;
}
.star-rating a.five-stars:hover{
	width: 100px;
}