/*//////////////////////////////////////////////////////////////////flex-row///////////////////////////////////////////////////////////////////////////////////*/
/* För skärmar större än 768px (datorskärmar) */
@media screen and (min-width: 769px) {


.friend-info {

    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-content: center;
    align-items: center;
    gap: 1rem;

}

#inkomst {


}
#utgifter-fast {

    
}

#utgifter-rörlig {

    
}
.card--episode.hover-effect:before {
    transform: skewY(var(--skew)) scale(1.03);
}

.card--episode.alert {
    transition: opacity 1s ease;
    opacity: 1;
}

.card--episode.alert.initial-state {
    transition: none;
    opacity: 0;
}

.card--episode.alert.fade-out {
    opacity: 0;
}


/* tttttttttttttttttttttttttttttttttt */

.cardS--episode--remove.hover-effect:before,
.cardS--episode--confirm.hover-effect:before  {
    transform: skewY(var(--skew)) scale(1.03);
}

.cardS--episode--remove.alert,
.cardS--episode--confirm.alert {
    transition: opacity 1s ease;
    opacity: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}

.cardS--episode--remove.alert.initial-state,
.cardS--episode--confirm.alert.initial-state {
    transition: none;
    opacity: 0;
}

.cardS--episode--remove.alert.fade-out,
.cardS--episode--confirm.alert.fade-out {
    opacity: 0;
}


/* tttttttttttttttttttttttttttttttttt */

.alertAlarm {
    background-image: linear-gradient(35deg,var(--gradient));
    border-radius: 0.25rem;
    height: calc(100% + 20px);
    top: -11px;
    transition: transform .24s ease-in;
}



.card2:after,.card2:before {
    bottom: 0;
    content: "";
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    transform: skewY(var(--skew));
    z-index: -2
}



.card--episode2 {
    --message: "Pick me!"
}



.card--episode2 .card__title {
    justify-self: start
}

.card--episode2 .card__title.peekaboo:before {
    color: var(--color-inverse);
    content: "✨ " var(--message);
    font-size: .75em;
    font-weight: 400;
    left: 2rem;
    position: absolute;
    text-transform: uppercase;
    top: 3rem
}

.card--episode2:nth-of-type(3) {
    --message: "This is a great one!"
}

.card--episode2:nth-of-type(4) {
    --message: "You'll love this one!"
}

.card--episode2:nth-of-type(5) {
    --message: "Check this one out!"
}

.card--episode2 .card__content a:before {
    bottom: 0;
    content: "";
    left: 0;
    position: absolute;
    right: 0;
    top: 0
}


.card--episode2 .card__content:before {
    content: attr(data-episode);
    font-family: var(--brand-font-alt);
    font-size: 2rem;
    opacity: .65;
    position: absolute;
    right: 1rem;
    top: 0
}

.card--episode2:before {
    background-image: linear-gradient(35deg,var(--gradient));
    border-radius: .25rem;
    height: calc(100% + 1px);
    top: -1px;
    transition: transform .24s ease-in;
}

.card--episode2:after {
    background-image: linear-gradient(to bottom,var(--color-background-alt-alpha),var(--color-background-alt) .75rem)
}

.card--episode2:focus-within:before,
.card--episode2:hover:before {
    transform: skewY(var(--skew)) scale(1.03)
}

.card--episode2:focus-within:after {
    outline: 1px dotted;
    outline-offset: -.55rem
}

.card--episode2 :focus {
    scroll-margin-bottom: 40vh
}

.card--episode2 a.card__title {
    font-size: 1.35rem;
    line-height: 1.15;
    text-decoration: none
}

.card--episode2 a.card__title:not([class*=color]) {
    color: var(--color-primary)
}



@media (min-width: 80ch) {
    .card2 {
        /* --skew:-8deg */
        --skew: 0deg;
    }
}









/* .card--episode.alert {
    transition: opacity 1s ease;
    opacity: 1;
}

.card--episode.alert.initial-state {
    transition: none;
}

.card--episode.alert.fade-out {
    opacity: 0;
} */


.friend-notice {


    width: 190px;

}

.friend-username{

    width: fit-content;
    min-width: 100px;

}

#lists {

}

#fonts {

}

#align {
  
}

#friend-container {

    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 300px;
    height: 100%;
    overflow: hidden;
    align-items: flex-start;
}

.friend-container {
    position: fixed;
    /* top: 50px; */
    left: -100%;
    height: 100%;
    transition: left 2.0s ease; 
    overflow-y: auto;
    display: flex;
    flex-direction: column; 

  } 

  #user-container {

    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 300px;
    align-items: flex-start;
}





.friend-container.active {

  /* position: absolute; */
  left: 0;
  height: 100%;
  /* top: 100px; */
  z-index: 5;
}


#usernameDropdown {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    border: 1px solid #ddd;
    max-height: 150px;
    overflow-y: auto;
    z-index: 1;
}

.usernameItem {
    padding: 8px;
    cursor: pointer;
}

.usernameItem:hover {
    background-color: #f1f1f1;
}

.toolbar_containers {

  display: flex;
  flex-direction: row;
}

.toolbar_buttons {

  margin: 3px 5px;
  display: flex;
  border-radius: 5px;
  width: 30px;
  justify-content: center;
  align-items: center;

}

.toolbar_buttons.active, .toolbar_buttons:hover {
  background-color: var(--color-on-primary);
  display: flex;
  align-items: center;
}


.toolbar_buttons:after{
  background-color: var(--color-on-primary);
}




/* 
  #bulletList{
    margin: 3px 10px;
    display: flex;
    align-items: center;
    width: fit-content;
    border-radius: 5px;
  }
  #bulletList.active, #bulletList:hover {
    background-color: var(--color-on-primary);
    display: flex;
    align-items: center;
  }
  #bulletList:after{
    background-color: var(--color-on-primary);
  } */









  #toolbar {
    display:none;
    flex-direction: row;
    margin-bottom: 10px;
    background-color: var(--color-primary);
    border-radius: 10px;
    width: 100%;
    gap: 0.5rem;
}

strong, em, blockquote {
  max-width: 800px; /* Set a maximum width to limit line length on larger screens */
  margin-left: auto; /* Center text by pushing it to the right */
  margin-right: auto; /* Center text by pushing it to the left */
  text-align: center;

}



#logEntry {
  text-align: left;
  border: none; /* Remove default border */
  padding: 10px; /* Add padding for better appearance */
  background-color: #f2f2f2; /* Set background color */
  resize: none; /* Disable textarea resizing */
  outline: none; /* Remove focus outline */
  border-radius: 15px;
  overflow-y: hidden;
  overflow-x: hidden;
  box-sizing: border-box;
  transition: height 0.2s, width 0.2s; /* Combine transitions for height and width */
  max-height: 600px;
  max-width: 600px;
  min-width: 280px;
  min-height: 150px;
  overflow-wrap: normal;

}

/* #logEntry p{

  text-align: left;
}


#logEntry p ul{

  text-align: left;
}


#logEntry p ul li {

  text-align: left;

} */


/* #logEntry p ul li p {

 
padding-inline-start: 10px;
display: list-item;
text-align: start;

} */




#addToLogbookBtn {

  font-size: 1rem;
}


  .textAreaHolder{
    display: flex;
    flex-direction: column;
    position: relative;
    align-items: center;
}


textarea {
    border: none; /* Remove default border */
    padding: 10px; /* Add padding for better appearance */
    background-color: #f2f2f2; /* Set background color */
    resize: none; /* Disable textarea resizing */
    outline: none; /* Remove focus outline */
    border-radius: 15px;
    overflow-y: hidden;
    overflow-x: hidden;
    box-sizing: border-box;
    transition: height 0.2s, width 0.2s; /* Combine transitions for height and width */
    max-height: 600px;
    max-width: 600px;
    width: 280px;
    overflow-wrap: normal;
    
    
}

textarea:focus {
    background-color: #d1d1d1; /* Change background color when focused */
    border: none; /* Remove default border */
}


  .datetime {

    border-radius: 15px;
    border: solid 7px white;
}

.popup-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
}

.transparent-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Adjust the transparency here */
}

.addlogg2 {
    display: flex;
    justify-content: center;
    background-color: var(--color-background-alt);
    border-radius: 15px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

.addlogg2 > div:first-child {
    margin-top: 50px; /* Adjust the distance from the top for the first div only */
  }

  .addlogg2 > div:last-child {
    margin-bottom: 50px; /* Adjust the distance from the top for the first div only */
  }

  #form-container > div:first-child {
    margin-top: 50px;
  }

  .popUp {
    justify-content: center;
    background-color: var(--color-background-alt);
    border-radius: 15px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}
/* 
.popUp > div:first-child {
    margin-top: 50px;
  }

  .popUp > div:last-child {
    margin-bottom: 50px;  
  }
 */






#logbookForm {
    text-align: center;
}


  #logbookForm {
    width: 100%;
    margin: 0 20%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;

}

.buttonHolderInside{

    display: flex;
    flex-direction: row;
    gap: 2rem;
    margin: 10px 10px;
    text-wrap: nowrap;
}

.buttonHolder{

    display: flex;
    justify-content: center;
    margin: 10px 10px;

}



    .menu-toggle {
        display: none;
        cursor: pointer;
        padding: 5px;
        right: 5px;
        top: 5px;
        position: absolute;
      }

    .cButton--episode {   
        --message: "Pick me!"
    }
    
    .cButton--episode .cButton__title {
        justify-self: start
    }
    
    .cButton--episode .cButton__title.peekaboo:before {
        color: var(--color-inverse);
        content: "✨ " var(--message);
        font-size: .75em;
        font-weight: 400;
        left: 2rem;
        position: absolute;
        text-transform: uppercase;
        top: 3rem
    }
    
    .cButton--episode:nth-of-type(3) {
        --message: "This is a great one!"
    }
    
    .cButton--episode:nth-of-type(4) {
        --message: "You'll love this one!"
    }
    
    .cButton--episode:nth-of-type(5) {
        --message: "Check this one out!"
    }
    
    .cButton--episode .cButton__content a:before {
        bottom: 0;
        content: "";
        left: 0;
        position: absolute;
        right: 0;
        top: 0
    }
    
    /* @supports selector(:focus-within) {
        .cButton--episode .cButton__content a {
            --outline-color: #0000
        }
    } */
    .cButton__title,.h2,.h3,.lead,h2,h3 {
        font-family: var(--brand-font-alt)
    }
    
    .cButton__title,.h3,h3 {
        font-weight: var(--brand-font-alt-weight-bold)
    }
    
    
    
    .cButton {
        /* --skew: -5deg; */
        --skew: 0deg;
        display: flex;
        flex-direction: column;
        padding: 4.5rem 2rem;
        position: relative
    }
    
    .cButton:after,.cButton:before {
        bottom: 0;
        content: "";
        left: 0;
        position: absolute;
        right: 0;
        top: 0;
        transform: skewY(var(--skew));
        z-index: -1
    }
    
    .cButton__content {
        --gap: 1rem;
        display: grid;
        gap: var(--gap);
        justify-items: center
    }
    
    .cButton__content p {
        font-size: 1.05rem;
        line-height: 1.75
    }
    
    
    
    
    .cButton--episode .cButton__content:before {
        content: attr(data-episode);
        font-family: var(--brand-font-alt);
        font-size: 2rem;
        opacity: .65;
        position: absolute;
        right: 1rem;
        top: 0
    }
    
    .cButton--episode:before,.cButton--text:before {
        background-image: linear-gradient(35deg,var(--gradient2));
        border-radius: .25rem;
        height: calc(100% + 1px);
        top: -1px;
        transition: transform .24s ease-in;
    }
    
    
    
    .cButton--episode:focus-within:before,.cButton--episode:hover:before,.cButton--text:focus-within:before,.cButton--text:hover:before {
        transform: skewY(var(--skew)) scale(1.1)
    }
    
    .cButton--episode:focus-within:after,.cButton--text:focus-within:after {
        outline: 1px dotted;
        outline-offset: -.55rem
    }
    
    .cButton--episode :focus,.cButton--text :focus {
        scroll-margin-bottom: 40vh
    }
    
    .cButton--episode a.cButton__title,.cButton--text a.cButton__title {
        font-size: 1.35rem;
        line-height: 1.15;
        text-decoration: none
    }
    
    .cButton--episode a.cButton__title:not([class*=color]),.cButton--text a.cButton__title:not([class*=color]) {
        color: var(--color-primary)
    }
    
    
    
  
  /* ////////////////////////////////////////////////////////////////////////// Table */
  




  table.log {

    display: flex;
    flex-direction: column;

  }
  
  tr.log {
    display: flex;
    flex-direction: row;
    align-items: center;
    column-gap: 2rem;
    box-shadow: inset 0 -1px 0 rgba(0,0,0,.12);
    justify-content: flex-start;
    padding: 1.5rem 2rem;
    text-align: center;
    width: 100%;
  
  }
  
  thead.log {
  
  
        display: flex;
        flex-direction: row;
        align-items: center;
        column-gap: 2rem;
        box-shadow: inset 0 -1px 0 rgba(0,0,0,.12);
  
      
  }
  
  
  
  
  td.date {
      min-width: 130px;
  }
  
  td.time {
      min-width: 130px;
  }
  
  
  td.text {
      margin-top: 15px;
      margin-bottom: 15px;
      overflow-wrap: anywhere;
      min-width: inherit;
      width: -webkit-fill-available;
  
  }
  
  th.date {
      min-width: 130px;
    margin-top: 15px;
    margin-bottom: 15px;
  
  }
  
  th.time {
      min-width: 130px;
    margin-top: 15px;
    margin-bottom: 15px;
  
  }
  
  th.text {
    margin-top: 15px;
    margin-bottom: 15px;
    width: 100%;
  }
  
  .card {
    /* --skew: -5deg; */
    --skew: 0deg;
    display: flex;
    flex-direction: column;
    padding: 4.5rem 2rem;
    position: relative
}

  .card--logbook {
    display: flex;
    flex-direction: row;
    padding: 1.5rem 2rem;
}
    .mainContainer {
  
            /* background-color: #fff;
            border: 1px solid #ccc;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); */
            padding: 20px;
    
      }
  
  
    main {
  
        /* width: 100%;
        max-width: 1200px; */
   
        top: 50px;
        border-radius: 15px;
        display: flex;
        flex-direction: column;
        align-content: center;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        gap: 2rem;   
        z-index: 2;
        /* width: 60%; */
        margin: 0 20%;
        }
    
        main > div:first-child {
          margin-top: 50px; /* Adjust the distance from the top for the first div only */
        }
    
        main > div:last-child {
          margin-bottom: 50px; /* Adjust the distance from the top for the first div only */
        }
    
        .subtest {
    
      background-color: #ff6600;
        }
    
        .sub-section {
          display: flex;
          flex-direction: column;
          gap: 10px;
          align-content: center;
          justify-content: center;
          align-items: center;
          flex-wrap: wrap;
          margin-left: 50px;
          margin-right: 50px;
        }
    
        .sub-sub-section {
            /* background-color: #fff;
            border: 1px solid #ccc;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); */
            padding: 20px;
          display: flex;
          flex-direction: column;
        }
  
  
    header {
      width: 100%;
      display: flex;
      z-index: 6;
  
  }
  body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  height: 100vh;
  margin: 0;
  padding: 0;
  font-family: system-ui,sans-serif;
  font-size: 1.15rem;
  line-height: 1.6;
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  gap: 25px;
  
  }
  
  
  
  .menu {
    --button-background: var(--color-primary);
    background-color: var(--button-background);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.3rem;
    height: 54px;
    margin-left: auto;
        /* position: absolute;
    left: 50%;
    right: 50%; */
  }
  
  
  
  .menu.active {
  position: absolute;
  left: 0;
  height: 100%;
  width: min-content;
  }
  
  
  .menu ul {
    /* display: none; */
    list-style: none;
    padding: 0;
    margin: 0;
    align-content: center;
    flex-direction: row;
    gap: 2rem;
    align-items: center;
    justify-content: center;
    /* flex-wrap: wrap; */
  }
  
  .menu ul li {
    display: inline;
    position: relative;
  }
  
  }	
  
          /* Style when the ".flex-column" class is present */
.card--logbook.flex-column {
    flex-direction: column;
  
    /* Your other styles */
  }
               
  .cursorPointer{cursor: pointer;}
  .flexAlignStart { align-items: flex-start;}
/*
  .circle {
    width: 120px;  
    height: 120px;
    background-color: #3498db;
    border-radius: 50%; 
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  */
  



  
  .inner-circle {
    width: 100px; /* Diameter av den inre cirkeln */
    height: 100px;
    background-color: #fff; /* Bakgrundsfärg på den inre cirkeln */
    border: 2px solid #000; /* Kanten på den inre cirkeln */
    border-radius: 50%; /* Gör den till en cirkel */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
/*   
  .outer-circle::before,
  .outer-circle::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 2px; 
    background-color: #000; 
  } */
  
  .outer-circle::before {
    transform: translateY(-50%);
  }
  
  .outer-circle::after {
    transform: translateY(-50%) rotate(90deg);
  }
  






  .number {
    position: absolute;
    transform: translate(-50%, -50%);
    font-size: large;
    font-family: cursive;
    color: white; /* Text color */
  }


/* Positioning for numbers in segment 1 */
.s1c1 {top: 44%; left: 52%; }
.s1c2 {top: 36%; left: 55%;}
.s1c3 {top: 27%; left: 59%;}
.s1c4 {top: 18%; left: 63%;}
.s1c5 {top: 8%; left: 67%;}

/* Positioning for numbers in segment 2 */
.s2c1 {     top: 47%;
    right: 44%; }
.s2c2 { top: 44%; left: 63%; } 
.s2c3 { top: 41%; left: 72%; }
.s2c4 { top: 36%; left: 82%; }
.s2c5 { top: 32%; left: 92%; }

/* Positioning for numbers in segment 3 */
.s3c1 {     bottom: 44%;
    right: 42%; }
.s3c2 {    bottom: 41%;
    left: 63%; }
.s3c3 {    bottom: 36%;
    left: 72%; }
.s3c4 {     bottom: 32%;
    left: 81%; }
.s3c5 {     bottom: 26%;
    left: 91%; }

/* Positioning for numbers in segment 4 */
.s4c1 {     bottom: 41%;
    left: 52%; }
.s4c2 {     bottom: 32%;
    left: 55%; }
.s4c3 {     bottom: 23%;
    left: 59%; }
.s4c4 {     bottom: 13%;
    left: 63%; }
.s4c5 {     bottom: 5%;
    left: 67%;
} 

/* Positioning for numbers in segment 5 */
.s5c1 {     bottom: 41%;
    left: 48%; }
.s5c2 {     bottom: 32%;
    left: 44%; }
.s5c3 {     bottom: 23%;
    left: 40%;}
.s5c4 {     bottom: 13%;
    left: 36%;}
.s5c5 {     bottom: 5%;
    left: 32%; }

/* Positioning for numbers in segment 6 */
.s6c1 { bottom: 44%;
    left: 44%; }
.s6c2 { bottom: 41%;
    left: 37%; }
.s6c3 {     bottom: 36%;
    left: 27%; }
.s6c4 {    bottom: 32%;
    left: 18%; }
.s6c5 { bottom: 26%;
    left: 9%; }

/* Positioning for numbers in segment 7 */
.s7c1 {          top: 47%;
    left: 44%;
}
.s7c2 {        top: 44%;
    left: 37%; }
.s7c3 {      top: 40%;
    left: 27%; }
.s7c4 {         top: 37%;
    left: 18%; }
.s7c5 {       top: 33%;
    left: 8%; }
/* Positioning for numbers in segment 8 */
.s8c1 {    top: 44%;
    left: 48%;
}
.s8c2 {     top: 36%;
    left: 44%; }
.s8c3 {    top: 27%;
    left: 40%; }
.s8c4 {     top: 17%;
    left: 35%; }
.s8c5 {    top: 8%;
    left: 30%; }


  .inner-circle {
    width: 200px; /* Diameter of the inner circles */
    height: 200px;
    border: 2px solid #000; /* Border for the inner circles */
    border-radius: 50%; /* Make them circles */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  
  /* Adjust the gap between inner circles */


  .inner-circle:nth-child(1) {
    width: 100%;
    height: 100%;
  }


  .inner-circle:nth-child(2) {
    width: 80%;
    height: 80%;
  }

  .inner-circle:nth-child(3) {
    width: 60%;
    height: 60%;
  }
  
  .inner-circle:nth-child(4) {
    width: 40%;
    height: 40%;
  }
  
  .inner-circle:nth-child(5) {
    width: 20%;
    height: 20%;
  }


  .border {
    position: absolute;
    width: 100%;
    height: 100%;
    border: 2px solid black;
    box-sizing: border-box;
  }


.segmentBorder{
    display: inline-block;
    position: relative;
    width: 150px;
    height: 150px;
    background: red;
    box-sizing: border-box;
    clip-path: polygon(0 101%, 52% 49%, 0 49%);
}

  .circle-container {
    position: relative;
    width: 200px; /* Adjust as needed */
    height: 200px; /* Adjust as needed */
    border-radius: 50%; /* Make it a circle */
    overflow: hidden; /* Hide overflow of segments */
  }
  
  

  .z1{z-index: 1};
  .z2{z-index: 2};
  .z3{z-index: 3};
  .z4{z-index: 4};
  .z5{z-index: 5};
  .zInherit{z-index: inherit;}

  .yellow{background-color: #f3ff48;}
  .blue {background-color: #3498db;}
  .red {background-color: #db142e;}
  .orange {background-color: #eb8109;}
  .purple {background-color: #5e269e;}
  .transparent {background-color: #0000;}

  .outer-circle {
    width: 500px;
    height: 500px;
    border: 2px solid #000;
    position: relative;
    border-radius: 50%;
    overflow: hidden;
  }


  .segment {
    position: absolute;
    width: 100%;
    height: 100%;
    clip-path: polygon(50% 0%, 50% 50%, 100% 0%);
  }
  


.segment1 {

    position: absolute;
    width: 100%;
    height: 100%;
    clip-path: polygon(50% 0%, 50% 50%, 100% 0%);
    

}


.segment2 {

    position: absolute;
    width: 100%;
    height: 100%;
    clip-path: polygon(100% 0, 50% 50%, 100% 50%);

}


.segment3 {
    position: absolute;
    width: 100%;
    height: 100%;
    clip-path: polygon(100% 50%, 50% 50%, 100% 100%);
}

.segment4 {
    position: absolute;
    width: 100%;
    height: 100%;
    clip-path: polygon(100% 100%, 50% 50%, 50% 100%);
}


.segment5 {
    position: absolute;
    width: 100%;
    height: 100%;
    clip-path: polygon(50% 100%, 50% 50%, 0 100%);
}

.segment6 {
    position: absolute;
    width: 100%;
    height: 100%;
    clip-path: polygon(0 100%, 50% 50%, 0 50%);
}

.segment7 {
    position: absolute;
    width: 100%;
    height: 100%;
    clip-path: polygon(0 50%, 50% 50%, 0 0);
}

.segment8 {
    position: absolute;
    width: 100%;
    height: 100%;
    clip-path: polygon(0 0, 50% 50%, 50% 0);
}







/* Additional styles for each segment */
#segment1 {
    background-color: #FF5733; /* Example color */
}

#segment2 {
    background-color: #C70039; /* Example color */
}

#segment3 {
    background-color: #FFC300; /* Example color */
}

#segment4 {
    background-color: #91198b; /* Example color */
}

#segment5 {
    background-color: #156788; /* Example color */
}

#segment6 {
    background-color: #8bdb55; /* Example color */
}

#segment7 {
    background-color: #d8759f; /* Example color */
}

#segment8 {
    background-color: #699b0d; /* Example color */
}



	.pie-chart {
		background:
			radial-gradient(
				circle closest-side,
				white 0,
				white 18.02%,
				transparent 18.02%,
				transparent 53%,
				white 0
			),
			conic-gradient(
				from 122deg,
				#4e79a7 0,
				#4e79a7 38%,
				#f28e2c 0,
				#f28e2c 61%,
				#e15759 0,
				#e15759 77%,
				#76b7b2 0,
				#76b7b2 87%,
				#59a14f 0,
				#59a14f 93%,
				#edc949 0,
				#edc949 100%
		);
		position: relative;
		width: 500px;
		min-height: 350px;
		margin: 0;
		outline: 1px solid #ccc;
	}
	.pie-chart h2 {
		position: absolute;
		margin: 1rem;
	}
	.pie-chart cite {
		position: absolute;
		bottom: 0;
		font-size: 80%;
		padding: 1rem;
		color: gray;
	}
	.pie-chart figcaption {
		position: absolute;
		bottom: 1em;
		right: 1em;
		font-size: smaller;
		text-align: right;
	}
	.pie-chart span:after {
		display: inline-block;
		content: "";
		width: 0.8em;
		height: 0.8em;
		margin-left: 0.4em;
		height: 0.8em;
		border-radius: 0.2em;
		background: currentColor;
	}

    #datalabel {

        width: 200px;
        height: 5px;
        background-color: #63adce;
        bottom: 30%;
        left: 80%;
        position: absolute;
        z-index: 1000;
    
    }

    .area {

        width: 500px;
        height: 400px;

    }
.areaholder {

    position: absolute;
    width: 1000px;
    height: 800px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    z-index: 1000;
    left: -250px;
    top: -150px;

}
    #area1 {background-color: #59a14f;}
    #area2 {background-color: #08068d;}
    #area3 {background-color: #f5a30b;}
    #area4 {background-color: #0c9bee;}

    .outer-circle-box {
        border: 2px solid #000;
        position: relative;
      }
    
      .areaInsideArea {

        width: 100%;
        height: 200px;
      }

      .container {
        position: relative;
        width: 400px;
        height: 400px;
      }
      
      .circle {
        position: absolute;
        top: 0;
        left: 0;
        width: 200px; /* Diameter of the circle */
        height: 200px;
        border-radius: 50%; /* Make it a circle */
        background-color: lightblue; /* Example background color */
      }

      #form-container2 {

        top: 2rem;

      }

      .ButtonContainer {

        margin-top: 30px;

      }

      table.lifeWheel{


      }

      td.lifeWheel {

  
      }
      
      tr.lifeWheel {
display:flex ;
gap: 1rem;
justify-content: flex-end;
     
      }


tbody.lifeWheel{
    gap: 1rem;
    display: flex;
    flex-direction: column;

}


      
/* .text {
    float: left; 
    margin-left: 220px;
    width: calc(100% - 220px);
    shape-outside: circle(50%); 
    overflow: hidden; 
  }
  


      .text span {
        position: absolute;
        top: 0;
        left: 50%;
        transform-origin: left center;
        transform: rotate(0deg);
      }
      
      .text span:nth-child(1) { transform: rotate(-90deg); }
      .text span:nth-child(2) { transform: rotate(-72deg); }
      .text span:nth-child(3) { transform: rotate(-54deg); }
      .text span:nth-child(4) { transform: rotate(-36deg); }
      .text span:nth-child(5) { transform: rotate(-18deg); }
      .text span:nth-child(6) { transform: rotate(0deg); }
      .text span:nth-child(7) { transform: rotate(18deg); }
      .text span:nth-child(8) { transform: rotate(36deg); }
      .text span:nth-child(9) { transform: rotate(54deg); }
      .text span:nth-child(10) { transform: rotate(72deg); }
      .text span:nth-child(11) { transform: rotate(90deg); }
      .text span:nth-child(12) { transform: rotate(108deg); } */
      
/* Style the custom select container */
.custom-select {
    position: relative;
    width: 200px; /* Adjust width as needed */
  }
  
  /* Style the select box */
  .custom-select select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 100%;
    padding: 10px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 10px; /* Rounded corners */
    background-color: #fff;
    cursor: pointer;
  }
  
  /* Style the dropdown arrow */
  .custom-select::after {
    content: '\25BC'; /* Unicode character for dropdown arrow */
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    pointer-events: none;
  }
  
  /* Change the appearance of the select box when clicked */
  .custom-select select:focus {
    border-color: #000;
    outline: none;
  }
  
  /* Change the appearance of the dropdown arrow when select box is focused */
  .custom-select:focus::after {
    color: #000;
  }
  
  /* Style the dropdown menu */
  .custom-select select option {
    border-radius: 10px; /* Rounded corners for each option */
  }
  
  optgroup {
    border: 2px solid black; /* Border for the dropdown options */
    border-radius: 15px; /* Rounded corners */
    padding: 5px; /* Add some padding for visual appeal */
  }
  
  option {
    font-weight: normal;
    display: block;
    min-height: 1.2em;
    padding: 0px 2px 1px;
    white-space: nowrap;
  }
  
  select {
    text-rendering: auto;
    color: fieldtext;
    letter-spacing: normal;
    word-spacing: normal;
    line-height: normal;
    text-transform: none;
    text-indent: 0px;
    text-shadow: none;
    text-align: start;
    -webkit-rtl-ordering: logical;
    cursor: default;
    white-space: pre;
    background-color: #3498db;
    border-radius: 15px;
    border: solid 2px black; /* Border for the select box */
  }







  .wrapper-dropdown-5 {
    /* Size & position */
    position: relative;
    width: 200px;
    margin: 0 auto;
    padding: 12px 15px;

    /* Styles */
    background: #fff;
    border-radius: 5px;
    box-shadow: 0 1px 0 rgba(0,0,0,0.2);
    cursor: pointer;
    outline: none;
    transition: all 0.3s ease-out;
}

.wrapper-dropdown-5:after { /* Little arrow */
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    top: 50%;
    right: 15px;
    margin-top: -3px;
    border-width: 6px 6px 0 6px;
    border-style: solid;
    border-color: #4cbeff transparent;
}


.wrapper-dropdown-5 .dropdown {
    /* Size & position */
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;

    /* Styles */
    background: #fff;
    border-radius: 0 0 5px 5px;
    border: 1px solid rgba(0,0,0,0.2);
    border-top: none;
    border-bottom: none;
    list-style: none;
    transition: all 0.3s ease-out;
    margin-top: 0;
    /* Hiding */
    max-height: 0;
    overflow: hidden;
}

.wrapper-dropdown-5 .dropdown li {
    padding: 0 10px ;
}

.wrapper-dropdown-5 .dropdown li a {
    display: block;
    text-decoration: none;
    color: #333;
    padding: 10px 0;
    transition: all 0.3s ease-out;
    border-bottom: 1px solid #e6e8ea;
}

.wrapper-dropdown-5 .dropdown li:last-of-type a {
    border: none;
}

.wrapper-dropdown-5 .dropdown li i {
    margin-right: 5px;
    color: inherit;
    vertical-align: middle;
}

/* Hover state */

.wrapper-dropdown-5 .dropdown li:hover a {
    color: #57a9d9;
}


/* Active state */

.wrapper-dropdown-5.active {
border-radius: 5px 5px 0 0;
background: #4cbeff;
box-shadow: none;
border-bottom: none;
color: white;
}

.wrapper-dropdown-5.active:after {
border-color: #82d1ff transparent;
}

.wrapper-dropdown-5.active .dropdown {
border-bottom: 1px solid rgba(0,0,0,0.2);
max-height: 400px;
}


/*             SCROLLBAR     START */

.bems-scroller {
  display: flex;
  height: 650px;
  border-radius: 1em;
  overflow: hidden;
}

.bems-scroller #scrolling-container {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: scroll;
  overflow-x: -moz-scrollbars-none;
  overflow-y: scroll;
  overflow-y: -moz-scrollbars-none;
  /* overflow-y: hidden; */
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: -ms-autohiding-scrollbar;
  user-select: none;
  cursor: poinnter;

  &.active {
    cursor: grabbing;
    cursor: -webkit-grabbing;
  }
}

.bems-scroller #scrolling-container::-webkit-scrollbar {
  display: none;
}

.bems-scroller li {
  display: flex;
  flex-shrink: 0;
  flex-direction: column;
  list-style-type: none;
  width: 650px;
  margin: 0 1em;
  border-radius: 0.5em;
}

.bems-scroller li img {
  border-radius: 0.5em 0.5em 0 0;
}

.bems-scroller .title {
  background-color: #fff;
  height: 50px;
  border-radius: 0 0 0.5em 0.5em;
}

.bems-scroller #button-scroll-left,
.bems-scroller #button-scroll-right {
  display: flex;
  padding: 2em;
  justify-content: center;
  align-items: center;
  vertical-align: middle;
  height: 200px;
  width: 50px;
  background-color: #333;
}

.bems-scroller i {
  color: #ddd;
}

.rangeslider {
  margin: 0 auto;
  padding: 20px 0;
  width: 500px;

}

.horizontal-scroll-input, input[type=’range’] {
  background: #159983;
  border-top: 1px solid #d9d9d9;
  border-bottom: 1px solid #d9d9d9;
  height: 30px;
  width: 100%;
  -moz-appearance: none;
  -webkit-appearance: none;
  border-radius: 0.5em;
  }

 .horizontal-scroll-input input[type=’range’]:focus {
    outline: none;
  }

  .rangeslider, .horizontal-scroll-input, input[type=’range’]::-webkit-slider-thumb {
  border: 1px solid #d9d9d9;
  background: #9b0f0f;
  cursor: pointer;
  height: 30px;
  text-indent: -9999px;
  width: 90px;
  -moz-appearance: none;
  -webkit-appearance: none;
  border-radius: 0.5em;
  
  }


  .vertical-scroll-input, input[type=’range’] {
    background: #159983;
    border-top: 1px solid #d9d9d9;
    border-bottom: 1px solid #d9d9d9;
    height: 30px;
    width: 100%;
    -moz-appearance: none;
    -webkit-appearance: none;
    border-radius: 0.5em;
    }
  
    
   .vertical-scroll-input input[type=’range’]:focus {
      outline: none;
    }
  
    .rangeslider, .vertical-scroll-input, input[type=’range’]::-webkit-slider-thumb {
    border: 1px solid #d9d9d9;
    background: #9b0f0f;
    cursor: pointer;
    height: 30px;
    text-indent: -9999px;
    width: 90px;
    -moz-appearance: none;
    -webkit-appearance: none;
    border-radius: 0.5em;
    transform: rotate(90deg);
    
    }

    
/* 
.horizontal-scroll-input {
  background: #d9d9d9;
  border-top: 1px solid #d9d9d9;
  border-bottom: 1px solid #d9d9d9;
  height: 30px;
  width: 100%;
  -moz-appearance: none;
  -webkit-appearance: none;
  border-radius: 0.5em;
} 

.horizontal-scroll-input:focus {
  outline: none;
}

.rangeslider, .horizontal-scroll-input::-webkit-slider-thumb {
  border: 1px solid #d9d9d9;
  background: #fff;
  cursor: pointer;
  height: 30px;
  text-indent: -9999px;
  width: 90px;
  -moz-appearance: none;
  -webkit-appearance: none;
  border-radius: 0.5em;
}




.vertical-scroll-input {
  background: #830505;
  border-top: 1px solid #d9d9d9;
  border-bottom: 1px solid #d9d9d9;
  height: 30px;
  width: 100%;
  -moz-appearance: none;
  -webkit-appearance: none;
  border-radius: 0.5em;
  transform: rotate(90deg);
} 

.vertical-scroll-input:focus {
  outline: none;
}

.rangeslider, .vertical-scroll-input::-webkit-slider-thumb {
  border: 1px solid #d9d9d9;
  background: #fff;
  cursor: pointer;
  height: 30px;
  text-indent: -9999px;
  width: 90px;
  -moz-appearance: none;
  -webkit-appearance: none;

  border-radius: 0.5em;
} */







/*             SCROLLBAR     END */



.overflowContainer {


}
.overflowContainer_inside{

  display: flex;
}

.overflowContainer > * { /* Target all child elements */
  margin-bottom: 20px;
}


#livsmedelList {


  width: 2000px;
}


.overflow-wrapper {
  position: relative; /* Enable positioning of pseudo-element */
}

.overflow-wrapper::before {
  /*content: ""; /* Empty content for pseudo-element 
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0; /* Fill the entire overflow-wrapper 
  z-index: -1; /* Place behind content 
  /* Simulate scrollbar track with inset shadow 
  box-shadow: inset 50px 0 0 rgba(0, 0, 0, 0.2); 
  /* Adjust shadow for desired color and opacity */
}

.thspecial {
  padding-left: 20px;
  padding-right: 20px;
  padding: 5px 50px 5px 50px;
}


.tdspecial {
  padding-left: 20px;
  padding-right: 20px;
  text-align: center;
  padding: 5px 50px 5px 50px;
  text-wrap: nowrap;
}


.trspecial {

  width: 100%;
}




.dropdownSlv {

    min-width: 300px;
    
    }
    
    /* .dropdownSlv li{
    
        min-width: calc(100% + 45px);
    }
 */




  

  .wrapper-dropdown-3 {
    /* Size and position */
    position: relative;
    /* width: 200px; */
    width: 60px;
    margin: 0 auto;
    padding: 10px;

    /* Styles */
    background: #fff;
    border-radius: 7px;
    border: 1px solid rgba(0,0,0,0.15);
    box-shadow: 0 1px 1px rgba(50,50,50,0.1);
    cursor: pointer;
    outline: none;

    /* Font settings */
    font-weight: bold;
    color: #8AA8BD;
    padding: 5px;
}

.wrapper-dropdown-3:after {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    right: 15px;
    top: 50%;
    margin-top: -3px;
    border-width: 6px 6px 0 6px;
    border-style: solid;
    border-color: #8aa8bd transparent;
}



.wrapper-dropdown-3 .dropdown {
    /* Size & position */
      position: absolute;
      top: 70%;
      /* top: 140%; */
      /* left: 0;
      right: 0; */
      right: -1px;
  
      /* Styles */
      background: white;
      border-radius: inherit;
      border: 1px solid rgba(0,0,0,0.17);
      box-shadow: 0 0 5px rgba(0,0,0,0.1);
      font-weight: normal;
      transition: all 0.5s ease-in;
      list-style: none;
  
      /* Hiding */
      opacity: 0;
      pointer-events: none;
      padding: 5px;
      z-index: 1;
      width: 60px;
  }
  
  .wrapper-dropdown-3 .dropdown li a {
      display: block;
      padding: 10px;
      text-decoration: none;
      color: #8aa8bd;
      border-bottom: 1px solid #e6e8ea;
      box-shadow: inset 0 1px 0 rgba(255,255,255,1);
      transition: all 0.3s ease-out;
  }
  
  .wrapper-dropdown-3 .dropdown li i {
      float: right;
      color: inherit;
  }
  
  .wrapper-dropdown-3 .dropdown li:first-of-type a {
      border-radius: 7px 7px 0 0;
  }
  
  .wrapper-dropdown-3 .dropdown li:last-of-type a {
      border-radius: 0 0 7px 7px;
      border: none;
  }
  
  /* Hover state */
  
  .wrapper-dropdown-3 .dropdown li:hover a {
      background: #052525;
      /* background: #f3f8f8; */
  }

  /* .wrapper-dropdown-3 .dropdown li:hover{
    background: #831ff5;
    background: #f3f8f8;
} */

 


  .wrapper-dropdown-3 .dropdown:after {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    bottom: 100%;
    right: 15px;
    border-width: 0 6px 6px 6px;
    border-style: solid;
    border-color: #fff transparent;    
}

.wrapper-dropdown-3 .dropdown:before {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    bottom: 100%;
    right: 13px;
    border-width: 0 8px 8px 8px;
    border-style: solid;
    border-color: rgba(0,0,0,0.1) transparent;    
}

.wrapper-dropdown-3.active .dropdown {
    opacity: 1;
    pointer-events: auto;
}


.iframeMain{width: 60%; height: 100%;}  
.iframeSub-section{width: 100%; height: 90%;}  
.backGroundColor {    background-color: var(--color-background);}
.width100{width: 100%;}  

.displayNone{display: none;}  
.displayBlock{display: block;}  
.alignLeft{text-align: left;}
.alignRight{text-align: right;}
.alignCenter{text-align: center;}

.displayFlex{display: flex;}

.flexDirectionRow{flex-direction: row;}
.flexNoWrap{flex-wrap: nowrap;}

    
.logbookSelector{width: calc(100% + 45px);}

.marginTop50 {margin-top: 50px;}