/* Hide the options */
#coursetools, #coursetools-list{
display: none !important;}
#options {
  display: none;
}
label:before{
  height:2px;
  width:20px;
  background:#3b2f57;
  display:inline-block;
  content:"";
  box-shadow:0px -5px 0px 0px  #3b2f57,
             0px -10px 0px 0px #3b2f57;
  margin-right:10px;
  transition:all .5s;
  position:relative;
  opacity:0.5;
}
label{
  display:block;
  color:#3b2f57;  
  cursor:pointer; 
}
input[type="checkbox"]{
  visibility:hidden;
  position:absolute;
}
#collapse:checked ~ li{
  display:none;
  margin-top:0; 
}
#collapse:checked + label:before{
  position:relative;
  right:calc(0px);
  opacity:1;
  
}

/* Create a flex container for navigation and content */
.grid-layout {
  display: flex;
  flex-direction: row;
  align-items: flex-start; /* Align items at the start */
}

/* Navigation styles */
.grid-navigation {

display: none; /* REMOVE ONCE WEVE GOT MORE TO SHOWCASE*/
   /*width: calc(300px - 1rem);
 min-width: 300px;*/
  background-color: #F8F9FB;
 /* padding: 40px 40px 20px 20px;*/
  position: sticky;
  top: 0; /* Make navigation sticky */
  overflow-y: auto; /* Scroll if content is longer */
  transition: width 0.3s ease; /* Add transition for smooth collapse/expand */
display: inline-table;
    text-wrap: nowrap;
}
#navigation ul {
padding-inline-start: 0px;
padding: 20px 20px 10px;}

#navigation li {
min-width: 200px;
list-style: none;
}

/* Collapsed state of navigation */
.grid-navigation.collapsed {
  width: 0; /* Collapse to zero width */
  padding: 0; /* Remove padding in collapsed state */
  overflow: hidden; /* Hide the content */
}

/* Content area */
.showcase #content  {
  flex-grow: 1;
  display: flex;
  flex-wrap: wrap;
  padding: 0px 20px;
  gap: 20px;
  overflow-y: auto;
width: fit-content;
}
.grid-tag{
margin-top: auto;
    display: flex;
    flex-wrap: wrap;
}
.badge-info {
    color: #fff;
    background-color: #094d54;
padding: 5px 10px;
    border-radius: 10px;
}
/* Individual card styling */
.grid-card {
  background-color: #f8f9fb;
  border-radius: 5px;
  width: calc(25% - 1rem);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.grid-card-content {
  padding: 20px;
  background-color: #F8F9FB;
height: 100%;
    display: flex;
    flex-direction: column;
width: -webkit-fill-available;
}

/* Toggle button styles */
.toggle-btn {
  display: block;
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 10px 15px;
  background-color: #094D54;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  z-index: 9999;
}
@media (max-width: 1900px) {
  .grid-card {
    width: calc(33% - 1rem);
  }

}
@media (max-width: 1200px) {
  .grid-card {
    width: calc(50% - 1rem);
  }
  .grid-navigation {
  /*  width: calc(33% - 1rem); */
  }
}

@media (max-width: 992px) {
  .grid-card {
    width: calc(100% - 1rem);
  }
  .grid-navigation {
    width: 100%;/* Disable sticky on small screens */
  }
}

@media (max-width: 768px) {
  .grid-card {
    width: 100%;
  }
  .grid-navigation {
    width: 100%;
    position: static; /* Disable sticky on small screens */
margin-bottom: 40px;
  }
.grid-layout {
display: block;
}
  /* Show toggle button on small screens */
  .toggle-btn {
    display: block;
  }
}

/*EXTRA HIDING*/

.secondary-navigation, .tertiary-navigation, #region-main hr, h1 {
/*display: none !important;*/
}
.course-860 #region-main hr{
display: none !important;}
.datapreferences .my-5 {
margin-top: 0rem !important; }

.my-5 {
margin-top: 0rem !important;
}