body{
  font-family: 'Lato', sans-serif; 
  font-size: 16px;
  line-height: 1.6;
  color: #333;
  background-color: #f9f9f9;
}

/* Optional: Override styles for specific text elements */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Roboto Slab', serif; /* Replace with desired font */
    color: #111;
    font-weight: 700;
    line-height: 1.3;
}

p, a, span, li {
    font-family: inherit; /* Ensures these elements inherit from the body */
    font-size: inherit;
}

.fs-1, .fs-2, .fs-3, .fs-4, .fs-5, .fs-6 {
    font-size: inherit !important;
}

/* Styling for the label and text next to the slider */
.rating-label {
  font-family: ui-sans-serif, system-ui, sans-serif;
  margin-block-end: 1rem;
}

/* Optional: Style for the average rating text */
.rating-label strong {
  font-weight: bold;
}

.cursor-pointer{
  cursor: pointer;
}


.card-description{
  display: -webkit-box; /* Establish a flex container using the WebKit box model */
  -webkit-line-clamp: 3; /* Number of lines to display before truncating */
  -webkit-box-orient: vertical; /* Set the box orientation to vertical */
  display: box;
  line-clamp: 3;
  box-orient: vertical;
  overflow: hidden; /* Hide the overflowing text */
  height: 7em; /* Adjust as needed */
}

.rating-label{
  height: 75px;
}

.nav-link{
  margin-right: 20px;
}

.nav-link:hover{
  text-decoration: underline;
}

.tc-1{
  min-width: 10%;
  max-width: 20%;
}
.tc-2{
  min-width: 10%;
  max-width: 20%;
}
.tc-3{
  min-width: 10%;
  max-width: 20%;
}
.tc-4{
  min-width: 30%;
  max-width: 40%;
}
.tc-5{
  min-width: 30%;
  max-width: 40%;
}
.tc-6{
  min-width: 10%;
  max-width: 20%;
}


#modal {
  /* Underlay covers entire screen. */
  position: fixed;
  top:0px;
  bottom: 0px;
  left:0px;
  right:0px;
  background-color:rgba(0,0,0,0.5);
  z-index:1050;

  /* Flexbox centers the .modal-content vertically and horizontally */
  display:flex;
  flex-direction:column;
  align-items:center;

  /* Animate when opening */
  animation-name: fadeIn;
  animation-duration:150ms;
  animation-timing-function: ease;
}

.uk-modal-body{
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  background-color: white;
  max-height: 80vh; /* Restricts height to 80% of the viewport */
  min-height: 10vh; /* Ensures a minimum height */
  width: 100%;
  padding: 20px;
  }

.uk-margin{
  width: 100%;
  display: inline-block;
}


.modal-border{
  display: block;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  margin: auto;
  z-index: 3;
  background-color: white;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  border: 1px solid #f0f0f0;
  padding: 20px;
  width: 90%;
  height: auto;
  max-height: 90vh;
  overflow: hidden;
}



.uk-modal-body-audit{
  overflow-y: scroll;
  background-color: white;
  height: 100%;
  max-height: 78vh;
  width: 50%;
  padding: 20px 20px;
  border: 1px solid #f0f0f0;

  }

.modal-border-audit{
  display: block;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  margin: auto;
  z-index: 3;
  background-color: white;
  width: 85%;
  height: 95%;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

.modal-audit-header{
  padding: 15px 0px;
}

#modal > .modal-underlay {
  /* underlay takes up the entire viewport. This is only
  required if you want to click to dismiss the popup */
  position: absolute;
  z-index: -1;
  top:0px;
  bottom:0px;
  left: 0px;
  right: 0px;
}

.modal-buttons{
  display: flex; /* Flexbox layout for better alignment */
  justify-content: center; /* Center horizontally */
  padding-top: 10px; /* Space above the buttons */
}

#submitButton{
  position: relative;
  width: 150px;
}

#cancelButton {
  position: absolute;
  right: 32px;
  top: 17px;
  width: 32px;
  height: 32px;
  opacity: .4;
  background-color: grey;
}
#cancelButton:hover {
  opacity: .3;
  background-color: none;
}
#cancelButton:before, #cancelButton:after {
  position: absolute;
  top: 0px;
  left: 14px;
  content: ' ';
  height: 33px;
  width: 2px;
  background-color: #333;
}
#cancelButton:before {
  transform: rotate(45deg);
}
#cancelButton:after {
  transform: rotate(-45deg);
}


.review_form{
  border: 1px solid #f0f0f0;
  padding: 20px;
  width: 100%;
}


/* START FROM HERE */

[data-star] {
  font-size: 35px;
  text-align:left;
  font-style:normal;
  display:inline-block;
  position: relative;
  unicode-bidi: bidi-override;
}
[data-star]::before { 
  display:block;
  content: '★★★★★';
  color: #eee;
}
[data-star]::after {
  white-space:nowrap;
  position:absolute;
  top:0;
  left:0;
  content: '★★★★★';
  width: 0;
  color: #ff8c00;
  overflow:hidden;
  height:100%;
}

[data-star^="0.1"]::after{width:2%}
[data-star^="0.2"]::after{width:4%}
[data-star^="0.3"]::after{width:6%}
[data-star^="0.4"]::after{width:8%}
[data-star^="0.5"]::after{width:10%}
[data-star^="0.6"]::after{width:12%}
[data-star^="0.7"]::after{width:14%}
[data-star^="0.8"]::after{width:16%}
[data-star^="0.9"]::after{width:18%}
[data-star^="1"]::after{width:20%}
[data-star^="1.1"]::after{width:22%}
[data-star^="1.2"]::after{width:24%}
[data-star^="1.3"]::after{width:26%}
[data-star^="1.4"]::after{width:28%}
[data-star^="1.5"]::after{width:30%}
[data-star^="1.6"]::after{width:32%}
[data-star^="1.7"]::after{width:34%}
[data-star^="1.8"]::after{width:36%}
[data-star^="1.9"]::after{width:38%}
[data-star^="2"]::after{width:40%}
[data-star^="2.1"]::after{width:42%}
[data-star^="2.2"]::after{width:44%}
[data-star^="2.3"]::after{width:46%}
[data-star^="2.4"]::after{width:48%}
[data-star^="2.5"]::after{width:50%}
[data-star^="2.6"]::after{width:52%}
[data-star^="2.7"]::after{width:54%}
[data-star^="2.8"]::after{width:56%}
[data-star^="2.9"]::after{width:58%}
[data-star^="3"]::after{width:60%}
[data-star^="3.1"]::after{width:62%}
[data-star^="3.2"]::after{width:64%}
[data-star^="3.3"]::after{width:66%}
[data-star^="3.4"]::after{width:68%}
[data-star^="3.5"]::after{width:70%}
[data-star^="3.6"]::after{width:72%}
[data-star^="3.7"]::after{width:74%}
[data-star^="3.8"]::after{width:76%}
[data-star^="3.9"]::after{width:78%}
[data-star^="4"]::after{width:80%}
[data-star^="4.1"]::after{width:82%}
[data-star^="4.2"]::after{width:84%}
[data-star^="4.3"]::after{width:86%}
[data-star^="4.4"]::after{width:88%}
[data-star^="4.5"]::after{width:90%}
[data-star^="4.6"]::after{width:92%}
[data-star^="4.7"]::after{width:94%}
[data-star^="4.8"]::after{width:96%}
[data-star^="4.9"]::after{width:98%}
[data-star^="5"]::after{width:100%}

.category-button:hover{
  pointer-events: none;
}

footer {
    display: flex;
    min-height: 30vh;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    padding: 20px;
    background-color: #f8f9fa;
    color: #6c757d;
    font-size: 14px;
}

#notifications{
  z-index: 1050 !important;
  top: -10;
}

.card_button_group{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.complete_button{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  position: relative;
  top: -3.7px;
  left: 15px;
}

.completed_check{
  position: absolute;
  top: 50%; /* Centers the icon vertically */
  right: 10px; /* Adjusts horizontal position */
  transform: translateY(-50%) scale(1.3); /* Adjusts vertical alignment and scales the icon */
  color:  #0d6efd ;
  border: 1px solid  #0d6efd ; /* Adds a border around the icon */
  border-radius: 50%; /* Makes the border circular */
  padding: 1px; /* Adds space between the icon and the border */
  display: inline-flex; /* Ensures the icon is centered within the border */
  align-items: center; /* Vertically centers the content inside the border */
  justify-content: center; 
}

.progress-bar{
  width: 100%;
}

/*.card{
  border: solid 2px #b7cfe8;
}*/

.side-bar-list{
  font-size: .875em;
}