body            { font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;}
a, h1, h2       { color:#BB2649; }
a, h1, h2,h3       { color:#555555; }


/* a, h1, h2       { color: rgb(112, 4, 65); } */
h1, h2, h3          { margin: 0; }
/* h1              { border-bottom: 2px solid #eee; } */
h2              { font-size: 1.2em; font-weight: bolder;}
h3              { font-size: 1.6em; font-weight: bold;font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;}


table.dataframe, .dataframe th, .dataframe td {
  border: none;
  border-bottom: 1px solid #C8C8C8;
  border-collapse: collapse;
  text-align:left;
  padding: 10px;
  margin-bottom: 10px;
  font-size: 0.9em;
  text-align: center;
}

.notfirst thead tr:nth-child(1)   {
  display: none;
}

.allrowsequal thead tr:nth-child(1)   {
  display: none;
}

.allrowsequal tr:first-child{
  	 font-weight:normal;
}

thead tr:nth-child(2) 
{
    background-color:red;
    display: none;
       
}

td:nth-child(3) ,th:nth-child(4) ,th:nth-child(3) 
{
    width:120px;
    
}

/* tr:nth-child(even)		{ background-color:#eee; }
tr:nth-child(odd)	{ background-color:#fff; }  */
tr		{ font-weight: normal; }
tr:first-child	{ font-weight: bold} 

tbody tr:first-child th:first-child	{ width: 150px;text-align: center}
tbody tr th:nth-child(2)	{ width: 120px;padding-right: 10px}

tr:hover            { background-color: #ffff99;}

.headerbox {
  border-bottom: 1px solid #C8C8C8;
  text-align: left;
  padding: 10px;
  margin-bottom: 10px; 

}

 .page {
  max-width: 1900px;  
  min-width: 500px;  
  /* background-color: #f8f8f8; */
} 

.navbar-default{background-color:#BB2649;}
.navbar-default{background-color:#FFFFFF;}
.navbar-default{background-color:#CC41FF;}
.navbar-default{background-color:#05bbaa;}
.navbar-default{background-color:#913DDA;padding-top: 20px;padding-bottom: 20px;}
.navbar-default{color:#00ff00;}
.navbar-default .navbar-nav>.active>a,.navbar-default .navbar-nav>.active>a:focus,.navbar-default .navbar-nav>a{color:#FFFFFF;background-color:#913DDA;text-decoration: underline;}
.navbar-default .navbar-nav>.active
,.navbar-default .navbar-nav>.active>a:focus,.navbar-default .navbar-nav>.active>a:hover{color:#FFFFFF;background-color:#913DDA;text-decoration: underline;}
.navbar-default .navbar-nav>li>a{color:#ffffff;background-color:transparent}
.navbar-default .navbar-nav>li>a:hover{color:#05bbaa;background-color:transparent}
.navbar-default .navbar-nav>li{text-transform: uppercase;}

.tooltip-text {
  visibility: hidden;
  position: absolute;
  z-index: 2;
  width: 200px;
  color: white;
  font-size: 14px;
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode';
  background-color: #192733;
  /* background-color: #913DDA; */
  border-radius: 10px;
  padding: 10px 15px 10px 15px;
}

.tooltip-text::before {
  content: "";
  position: absolute;
  transform: rotate(45deg);
  background-color: #192733;
  padding: 5px;
  z-index: 1;
}

.hover-text:hover .tooltip-text {
  visibility: visible;
}

#top {
  top: -120px;
  left: 0%;
}

#top::before {
  top: -120%;
  left: -45%;
}

#bottom {
  top: 25px;
  left: 0%;
}

#bottom::before {
  top: -3%;
  left: 45%;
}

#left {
  top: -8px;
  right: 120%;
}

#left::before {
  top: 35%;
  left: 94%;
}

#right {
  top: -8px;
  left: 108%;
}

#right::before {
  top: 8%;
  left: -2%;
}

.hover-text {
  position: relative;
  display: inline-block;
  border-bottom: #999999 dotted;
  
}

/* Använd Flexbox för att skapa ett kortlayout */
.goal-card {
  display: flex;
  flex-direction: column;
  border: 1px solid #ddd;
  padding: 10px;
  margin: 10px;
  border-radius: 5px;
  max-width: 400px;
  background-color: #ffffff;
  }

/* Styla rubriken */
.goal-card h3 {
  margin-bottom: 5px;
}

/* Styla målnivåerna */
.goal-card p {
  margin: 5px 0;
}

/* Styla aktivitetslistan */
.goal-card ul {
  list-style-type: none;
  padding: 0;
}

/* Styla aktiviteterna */
.goal-card li {
  margin-bottom: 5px;
}

/* Styla knappen för att ta bort målet */
.remove-button {
  background-color: #bbb;
  color: #fff;
  border: none;
  padding: 2px;
  border-radius: 2px;
  cursor: pointer;
  width: 18px;
  margin-left: 5px;

}

/* Styla knappen för att ta bort målet */
.goal-card button.remove-button, .remove-goal-button {
  background-color: #bbb;
  color: #fff;
  border: none;
  padding: 2px;
  border-radius: 2px;
  cursor: pointer;
  width: 18px;
  float: right;
}

/* Stilar för lägga till-knappar */
.goal-card button.add-button {
  background-color: #66cc66; /* Grön färg */
  color: #fff; /* Vit text */
  border: none;
  padding: 5px 10px;
  cursor: pointer;
  padding: 5px 10px;
  border-radius: 3px;
  cursor: pointer;
  width: 100px;
  height: 40px;;
}

/* Plusikon på lägga till-knappar */
.goal-card button.add-button::before {
  content: '+ ';
}

/* Stilar för att placera knapparna i en rad */
.button-container {
  display: flex;
  justify-content: space-between; /* Placera knapparna längst ut på raden */
  margin-top: auto; /* Placera knapparna längst ned */
}

/* Stilar för att placera målen bredvid varandra */
.goals-container {
  display: flex;
  flex-wrap: wrap; /* Tillåt omslagning av element till nästa rad vid behov */
}

/* Stilar för varje enskilt målkort */
.goal-card {
  width: 300px; /* Justera bredden efter behov */
  margin: 10px; /* Justera avståndet mellan målen */
  border: 1px solid #ddd;
  padding: 10px;
}

/* Style the datepicker */
input[type="date"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  border: 1px solid #ccc;
  padding: 3px 4px;
  font-size: 14px;
  border-radius: 4px;
  width: 140px;
}

/* Style the datepicker */
select {
  border: 1px solid #ccc;
  padding: 3px 4px;
  font-size: 14px;
  border-radius: 4px;
}

.goal-card {
  position: relative;
}

.action-button {
  position: absolute;
  bottom: 10px;
  right: 10px;
}

.remove-goal-button {
  position: absolute;
  top: 10px;
  right: 10px;
}

/* Stilar för neutrala knappar */
.goal-card button.neutral-button{
  background-color: #999; /* min färg */
  color: #fff;
  border: none;
  padding: 2px;
  border-radius: 3px;
  cursor: pointer;
  width: 25px;
 
}

/* Stilar för neutrala knappar */
.goal-card button.checked-button{
  background-color: #276927; /* min färg */
  color: #fff;
  border: none;
  padding: 2px;
  border-radius: 3px;
  cursor: pointer;
  width: 25px;
 
}

.goal-card button.plus-button{
  background-color: #999; /* min färg */
  color: #fff;
  border: none;
  padding: 2px;
  border-radius: 3px;
  cursor: pointer;
  width: 25px;
  
}

.goal-card {
  position: relative;
}

.date-and-gauge-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.gauge-container {
  width: 150px; /* Adjust the width as needed */
  height: 100px; /* Adjust the height as needed */
}

.box {
  display: flex;
  justify-content: space-between;
}

.header-container {
  display: flex;
  align-items: center;
  margin-left: 10px; /* Space between header and content */
  margin-bottom: 10px; /* Space between header and content */
}

.logged-in-info {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 4px;
  font-weight: 500;
  font-size: 0.9em;
  margin-right: 20px; /* Space between the box and the next section */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  background-color: #e0f7da; /* Soft green background */
  color: #2e7d32; /* Darker green text */
  
}

.not-logged-in-info {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 4px;
  font-weight: 500;
  font-size: 0.9em;
  margin-right: 20px; /* Space between the box and the next section */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  background-color: #d0e7ff; /* Light blue background */
  color: #1565c0; /* Darker blue text */
}