/* General Styles */
.jumbotron {
    color: #fff;
    z-index: 2950;
    position: relative;
    height: 144px;
    animation: glitch 2s infinite;
}

@keyframes glitch{2%,64%{transform:translate(2px,0) skew(0deg);}4%,60%{transform:translate(-2px,0) skew(0deg);}62%{transform:translate(0,0) skew(5deg);}}


/* Side Margins */
.left-margin {
  position: absolute;
  z-index: 2900;
  top: 0;
  bottom: 23px;
  width: 305px;
  margin-top: 199px;
  margin-bottom: 42px;
  height: auto;
  background-color: rgb(41, 0, 0); /* Semi-transparent background */
  padding: 15px; /* Increase padding */
  transition: transform 0.3s ease, opacity 0.3s ease; /* Smooth transitions */
  overflow-y: auto;
  
  /* Custom scrollbar styling for more discrete effect */
  scrollbar-width: thin; /* Firefox */
  scrollbar-color: rgba(255, 255, 255, 0.5) rgba(0, 0, 0, 0.2); /* Firefox */
}

.left-margin::-webkit-scrollbar {
  width: 8px; /* Thinner scrollbar */
}

.left-margin::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.5); /* Light thumb */
  border-radius: 10px; /* Rounded edges */
}

.left-margin::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2); /* Faded track */
}

.right-margin {
  position: absolute;
  z-index: 2900;
  top: 0;
  bottom: 23px;
  width: 305px;
  margin-top: 199px;
  margin-bottom: 42px;
  height: auto;
  background-color: rgb(41, 0, 0); /* Semi-transparent background */
  padding: 15px; /* Increase padding */
  transition: transform 0.3s ease, opacity 0.3s ease; /* Smooth transitions */
  overflow-y: auto;
  
  /* Custom scrollbar styling for more discrete effect */
  scrollbar-width: thin; /* Firefox */
  scrollbar-color: rgba(255, 255, 255, 0.5) rgba(0, 0, 0, 0.2); /* Firefox */
}

.right-margin::-webkit-scrollbar {
  width: 8px; /* Thinner scrollbar */
}

.right-margin::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.5); /* Light thumb */
  border-radius: 10px; /* Rounded edges */
}

.right-margin::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2); /* Faded track */
}

.left-margin {
    left: 0;
    border-right: 5px solid #d4b40000;
    transform: translateX(-100%); /* Hide left margin */
}

.right-margin {
    right: 0;
    border-left: 5px solid #d4b40000;
    transform: translateX(100%); /* Hide right margin */
}

/* Tabs/Buttons for toggling margins */
.tab-btn {
    position: absolute;
    top: 202px;
    background-color: #d4b40098;
    color: #fff;
    border: none;
    padding: 10px 15px;
    cursor: pointer;
    z-index: 3000;
    transition: all 0.3s ease; /* Smooth button movement */
}

/* Adjust button positions when margins are open */
.left-margin.open ~ .left-btn {
    left: 287px; /* Match the width of the margin */
  }
  
.right-margin.open ~ .right-btn {
    right: 287px; /* Match the width of the margin */
}

.left-btn {
  left: 0; /* Align to the left edge */
}

.right-btn {
  right: 0; /* Align to the right edge */
}

.tab-btn:hover {
  background-color: #0000008e; /* Slightly lighter hover effect */
}

.hidden {
  display:none!important; /* Or another value to hide the element */
}

.visible {
  transform: translateX(0); /* Ensure the element is visible */
}

/* Adjust for smaller screens */
@media screen and (max-width: 1699px) {
  .left-margin,
  .right-margin {
     transform: translateX(0); /* Ensure margins are visible */
  }
}
/* Hide buttons when screen width is above 1900px */
@media screen and (min-width: 1700px) {
    .tab-btn {
      display: none;
    }
    .left-margin,
    .right-margin {
      transform: translateX(0); /* Ensure margins are visible */
    }
  }

/* Form Control Styles */
select.form-control {
    height: auto !important;
}

.custom-select {
    background: #000000 url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23d4b300' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E") 
        no-repeat right .75rem center / 8px 10px !important;
}

/* Card Styles */
.card {
    border-radius: 0 !important;
}

/* Graph Containers */
#score-graph {
    min-height: 400px;
    display: block;
    clear: both;
}

#solves-graph {
    display: block;
    height: 350px;
}

#categories-pie-graph,
#keys-pie-graph {
    min-height: 400px;
    display: block;
}

.form-control {
  position: relative;
  display: block;
  padding: 0.8em !important;
  border-radius: 0;
  background: #000000;
  color: #fff;
  font-weight: 400;
  -webkit-appearance: none;
  height: auto !important;
}