/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
  html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}a{background-color:transparent}[hidden]{display:none}html{font-family:Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;line-height:1.5}*,:after,:before{box-sizing:border-box;border:0 solid #e2e8f0}a{color:inherit;text-decoration:inherit}svg,video{display:block;vertical-align:middle}video{max-width:100%;height:auto}.bg-white{--bg-opacity:1;background-color:#fff;background-color:rgba(255,255,255,var(--bg-opacity))}.bg-gray-100{--bg-opacity:1;background-color:#f7fafc;background-color:rgba(247,250,252,var(--bg-opacity))}.border-gray-200{--border-opacity:1;border-color:#edf2f7;border-color:rgba(237,242,247,var(--border-opacity))}.border-t{border-top-width:1px}.flex{display:flex}.grid{display:grid}.hidden{display:none}.items-center{align-items:center}.justify-center{justify-content:center}.font-semibold{font-weight:600}.h-5{height:1.25rem}.h-8{height:2rem}.h-16{height:4rem}.text-sm{font-size:.875rem}.text-lg{font-size:1.125rem}.leading-7{line-height:1.75rem}.mx-auto{margin-left:auto;margin-right:auto}.ml-1{margin-left:.25rem}.mt-2{margin-top:.5rem}.mr-2{margin-right:.5rem}.ml-2{margin-left:.5rem}.mt-4{margin-top:1rem}.ml-4{margin-left:1rem}.mt-8{margin-top:2rem}.ml-12{margin-left:3rem}.-mt-px{margin-top:-1px}.max-w-6xl{max-width:32rem}.min-h-screen{min-height:100vh}.overflow-hidden{overflow:hidden}.p-6{padding:.3rem;gap: 1rem;}.py-4{padding-top:1rem;padding-bottom:1rem;}.pt-8{padding-top:2rem}.fixed{position:fixed}.relative{position:relative}.top-0{top:0}.right-0{right:0}.shadow{box-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px 0 rgba(0,0,0,.06)}.text-center{text-align:center}.text-gray-200{--text-opacity:1;color:#edf2f7;color:rgba(237,242,247,var(--text-opacity))}.text-gray-300{--text-opacity:1;color:#e2e8f0;color:rgba(226,232,240,var(--text-opacity))}.text-gray-400{--text-opacity:1;color:#cbd5e0;color:rgba(203,213,224,var(--text-opacity))}.text-gray-500{--text-opacity:1;color:#a0aec0;color:rgba(160,174,192,var(--text-opacity))}.text-gray-600{--text-opacity:1;color:#718096;color:rgba(113,128,150,var(--text-opacity))}.text-gray-700{--text-opacity:1;color:#545454;color:rgba(74,85,104,var(--text-opacity))}.text-gray-900{--text-opacity:1;color:#1a202c;color:rgba(26,32,44,var(--text-opacity))}.underline{text-decoration:underline}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.w-5{width:1.25rem}.w-8{width:2rem}.w-auto{width:auto}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}@media (min-width:700px){.sm\:rounded-lg{border-radius:.5rem}.sm\:block{display:block}.sm\:items-center{align-items:center}.sm\:justify-start{justify-content:flex-start}.sm\:justify-between{justify-content:space-between}.sm\:h-20{height:5rem}.sm\:ml-0{margin-left:0}.sm\:px-6{padding-left:1.5rem;padding-right:1.5rem}.sm\:pt-5{padding-top:20px}.sm\:text-left{text-align:left}.sm\:text-right{text-align:right}}@media (min-width:768px){.md\:border-t-0{border-top-width:0}.md\:border-l{border-left-width:1px}.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\:grid-cols-22{grid-template-columns:75% 25%}.md\:grid-cols-32{grid-template-columns: 7% 86% 7%}.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}}@media (min-width:1024px){.lg\:px-8{padding-left:2rem;padding-right:2rem}}@media (prefers-color-scheme:dark){.dark\:bg-gray-800{--bg-opacity:1;background-color:#2d3748;background-color:rgba(45,55,72,var(--bg-opacity))}.dark\:bg-gray-900{--bg-opacity:1;background-color:#1a202c;background-color:rgba(26,32,44,var(--bg-opacity))}.dark\:border-gray-700{--border-opacity:1;border-color:#4a5568;border-color:rgba(74,85,104,var(--border-opacity))}.dark\:text-white{--text-opacity:1;color:#fff;color:rgba(255,255,255,var(--text-opacity))}.dark\:text-gray-400{--text-opacity:1;color:#cbd5e0;color:rgba(203,213,224,var(--text-opacity))}}
  body {
              background-color: #fafafa;
              background-size: cover;
              font-family: Arial, Helvetica, sans-serif;
      }
 .header {
   position: fixed; /* Fixes the header at the top */
   top: 0;
   left: 0;
   width: 100%; /* Stretches the header across the viewport */
   z-index: 1000; /* Ensures it stays on top of other elements */
   background-color: #8d1436; /* Background color for the header */
   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Adds a subtle shadow for separation */
}
#themes {
    background-color:rgb(253, 252, 252, 0.8);
    border-radius: 1rem;
    display: flex;
    justify-content: center; /* Horizontally center */
    align-items: center; /* Vertically center */
    padding: .5rem 1rem;
    height: 100%; /* Ensures the content takes up the full height of its parent */
}
#register {
    background-color:#f7f6f5;
    border-radius: 1rem;
    display: flex;
    justify-content: center; /* Horizontally center */
    align-items: center; /* Vertically center */
    padding: .5rem 1rem;
    height: 100%; /* Ensures the content takes up the full height of its parent */
}

.title {
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  color:#9a1077ff;
  }
.content {
  font-family: 'Avenir';
  }
  #key {
color: #545454;
text-align: center;
font-size: 1.2rem; /* Adjusted for readability */
font-weight: bold;
}
.text-up-700{--text-opacity:1;color:#3a3a3a;}   
.text-up-701{--text-opacity:1;color:#86191b;}   
.text-up-702{--text-opacity:1;color:#595959;} 
.text-up-703{--text-opacity:1;color:white;}
.text-up-7032{--text-opacity:1;background-color:white;}  
.text-up-710{--text-opacity:1;color:#ffde59;}   
.text-up-706{--text-opacity:1;color:rgb(4, 113, 42);}  
.text-up-7062{background-color:rgb(4, 113, 42);}    
.text-up-708{--text-opacity:1;background-color:#b28f01;color:rgb(238, 238, 238);padding:.3vw 1vw;border-radius: 5px;overflow: hidden;margin-top:.1vw} 
.text-up-7081{--text-opacity:1;background-color:rgb(4, 113, 42);color:rgb(235, 232, 232);padding:.3vw 1vw;border-radius: 5px;overflow: hidden;margin-top:.1rem}
.text-up-7082{--text-opacity:1;background-color:#86191b;color:rgb(235, 232, 232);padding:.3vw 1vw;border-radius: 5px;overflow: hidden;margin-top:.1rem}
.text-up-7083{--text-opacity:1;background-color:#3a3a3a;color:rgb(235, 232, 232);padding:.3vw 1vw;border-radius: 5px;overflow: hidden;margin-top:.1rem}
.text-up-705{--text-opacity:1;background-color:#545a61;color:rgb(235, 232, 232);padding:.7rem 4.5rem;border-radius: 7px;overflow: hidden;} 
.text-up-707{--text-opacity:1;background-color:#727272;color:rgb(246, 245, 245);padding:.4rem 1.2rem;border-radius: 5px;overflow: hidden;}
.text-up-704{--text-opacity:1;background-color:rgb(4, 113, 42);color:rgb(235, 232, 232);padding:.5rem 4rem;border-radius: 7px;overflow: hidden;}  
.text-up-709{--text-opacity:1;background-color:#86191b;color:rgb(235, 232, 232);padding:.7rem 4.5rem;border-radius: 7px;overflow: hidden;} 
.md\:grid-cols-4{grid-template-columns: 25% 25% 25% 25%}
.md\:grid-cols-22x{grid-template-columns: 40% 60%}
.md\:grid-cols-2z{grid-template-columns: 10% 90%}
.md\:grid-cols-2xyz{grid-template-columns: 20% 80%}
.md\:grid-cols-2x{grid-template-columns: 75% 25%}
.md\:grid-cols-2xy{grid-template-columns: 70% 30%}
.md\:grid-cols-3x{grid-template-columns: 3% 94% 3%}
.md\:grid-cols-3y{grid-template-columns: 32% 2% 32% 2% 32%}
.md\:grid-cols-3z{grid-template-columns: 3% 25% 44% 25% 3%}
.md\:grid-cols-32z{grid-template-columns: 3% 64% 30% 3%}
.md\:grid-cols-62{grid-template-columns: 5% 6% 24% 6% 24% 10% 20% 5%}  
.text-xl {
    font-size: 1.25rem;
    line-height: 1.75rem;
  }
  
  .text-2xl {
    font-size: 1.5rem;
    line-height: 2rem;
  }
  
  .text-3xl {
    font-size: 1.875rem;
    line-height: 2.25rem;
  }
  
  .text-4xl {
    font-size: 2.25rem;
    line-height: 2.5rem;
  }
  
  .text-5xl {
    font-size: 3rem;
    line-height: 1;
  }
  
  .text-6xl {
    font-size: 3.75rem;
    line-height: 1;
  }
  
  .text-7xl {
    font-size: 4.5rem;
    line-height: 1;
  }
  
  .text-8xl {
    font-size: 6rem;
    line-height: 1;
  }
  
  .text-9xl {
    font-size: 8rem;
    line-height: 1;
  }

  .card2 {
    display: flex;
    align-items: flex-start; /* Align content at the top */
    gap: 1.5rem; /* Space between image and content */
    border-radius: 12px; /* Rounder corners */
    padding: 1rem; /* Increase padding for better spacing */
    overflow: hidden;
    background-color: #f7effb; /* Light background */
    transition: box-shadow 0.3s ease; /* Hover shadow effect */
}

.card2:hover {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* Shadow on hover */
}

.card2 img {
    flex: 0 0 20%; /* Image occupies 20% of card width */
    height: 18rem; /* Fixed height for the image */
    border-radius: 4px; /* Rounded image corners */
    object-fit: cover; /* Maintain aspect ratio */
    transition: transform 0.3s ease; /* Smooth zoom effect */
}

.card2:hover img {
    transform: scale(1.1); /* Subtle zoom effect */
}

.card2-content {
    flex: 1; /* Remaining space for content */
    display: flex;
    flex-direction: column; /* Stack content vertically */
    justify-content: flex-start; /* Align content at the top */
}

.card2-content p {
    font-size: 1vw; /* Adjust text size for readability */
    color: #333; /* Darker text for contrast */
    margin: 0; /* Remove default margins */
}

.card2-content .btn {
    background-color: #64378c;
    border: none;
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    text-align: center;
    margin-top: 1rem; /* Add spacing above the button */
    transition: background-color 0.3s ease;
    align-self: flex-end;
}

.card2-content .btn:hover {
    background-color: #502a71; /* Darker shade on hover */
}
#back-to-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: transparent; /* Transparent background */
  border: none;
  padding: 10px;
  cursor: pointer;
  display: none; /* Initially hidden */
  transition: opacity 0.3s ease;
}

#back-to-top img {
  width: 100%; /* Size of the image */
}

#back-to-top:hover {
  opacity: 0.8; /* Slight fade effect on hover */
}
ul {
  list-style-type: none;
  padding: 0;
}

li {
  cursor: pointer;
  padding: 8px;
  margin: 4px 0;
  font-size: 16px;
}

#quarter {
  margin-left: 20px; /* Indent the dropdown items */
  padding-left: 10px;
  display: none; /* Hide the dropdown by default */
}
.card3 {
  display: flex;
  align-items: flex-start; /* Align content at the top */
  gap: 1.5rem; /* Space between image and content */
  border-radius: 12px; /* Rounder corners */
  padding: 1rem; /* Increase padding for better spacing */
  overflow: hidden;
  background-color: #f7effb; /* Light background */
  transition: box-shadow 0.3s ease; /* Hover shadow effect */
}

.card3:hover {
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* Shadow on hover */
}

.card3 embed {
  flex: 0 0 75%; /* Image occupies 20% of card width */
  height: 25rem; /* Fixed height for the image */
  border-radius: 4px; /* Rounded image corners */
  object-fit: cover; /* Maintain aspect ratio */
  transition: transform 0.3s ease; /* Smooth zoom effect */
  overflow: hidden;
}

.card3:hover img {
  transform: scale(1.1); /* Subtle zoom effect */
}

.card3-content {
  flex: 1; /* Remaining space for content */
  display: flex;
  flex-direction: column; /* Stack content vertically */
  justify-content: flex-start; /* Align content at the top */
}

.card3-content p {
  font-size: 1vw; /* Adjust text size for readability */
  color: #333; /* Darker text for contrast */
  margin: 0; /* Remove default margins */
}

.card3-content .btn {
  background-color: #64378c;
  border: none;
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  text-align: center;
  margin-top: 1rem; /* Add spacing above the button */
  transition: background-color 0.3s ease;
  align-self: flex-end;
}

.card3-content .btn:hover {
  background-color: #502a71; /* Darker shade on hover */
}



/* Style the tab */
.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
  border-radius: 7px;overflow: hidden;
}

/* Style the buttons inside the tab */
.tab button {
  background-color: #5e5e5e;
  color:white;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: .35rem 5rem;
  transition: 0.3s;
  font-size: 1.3vw;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #8a1e3d;
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: #8d1436;
  color:white;
}

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 1.7rem 1rem;
  border: 0px;
  border-radius: 7px;
  background-color: #eaeaea;
  min-height: 25rem;
  max-height: 100hv;

}
.header-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.3rem;
}


  /* Popup Form */
  .popup-form {
    display: none; /* Hidden by default */
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Background overlay */
    overflow: auto;
    padding-top: 1rem;
  }

  .popup-content {
    background-color: #fff;
    margin: 5% auto;
    padding: 20px;
    border: 1px solid #ccc;
    width: 50%;
    border-radius: 8px;
  }

  .close {
    color: #225e02;
    font-size: 2vw;
    font-weight: bold;
  }

  .close:hover,
  .close:focus {
    color: rgb(1, 66, 7);
    text-decoration: none;
    cursor: pointer;
  }

  /* Form Styles */
  form {
    display: flex;
    flex-direction: column;
  }

  label {
    margin-top: 10px;
  }

  input, textarea {
    margin-top: 5px;
    padding: 0.5rem;
    font-size: 1rem;
    border: 1px solid #ccc;
    border-radius: 4px;
  }

  textarea {
    resize: vertical;
  }

  small {
    margin-top: 5px;
    color: gray;
  }
  th {
  border: 0px; /* Adds a border to both th and td */
  background-color: rgb(212, 210, 210);  
}
tr {border-radius: 5px;}
/* Dropdown button styling */
.dropdown {
  position: relative;
  display: inline-block;
}

.text-up-707 {
  padding: .2rem .5rem;
  background-color: #4b4b4b;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.text-up-707:hover {
  background-color: #383838;
}

/* Dropdown content (hidden by default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 100px;
  font-size: 1vw;
  box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
  z-index: 1;
  border-radius: 4px;
}

/* Links inside the dropdown */
.dropdown-content a {
  color: black;
  padding: .2rem .5rem;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {
  background-color: #ddd;
}

/* Show the dropdown when hovering over the button */
.dropdown:hover .dropdown-content {
  display: block;
}

.dropdown:hover .text-up-707 {
  background-color: #383838;
}
#ticketView {
  background-color: #e6e6e6e6;
  padding: .5rem;
  border-radius: .5rem;
  margin:.2rem; 
  min-height: 100hv;
  max-height: 100hv;
  overflow-y: auto; 
}
#reply {
  background-color: #e6e6e6e6;
  padding: .5rem;
  border-radius: .5rem;
  margin:.2rem;  
  min-height: 32rem;
  max-height: 100hv;
  overflow-y: auto; 
}
#reply2 {
  background-color: #e6e6e6e6;
  padding: .5rem;
  border-radius: .5rem;
  margin:.2rem;  
  min-height: 100hv;
  max-height: 100hv;  
  overflow-y: auto;
}
#timeline_container {
  background-color: #e6e6e6e6;
  padding: .5rem;
  border-radius: .5rem;
  margin:.2rem;  
  min-height: 18rem;
  max-height: 100hv;
  overflow-y: auto; 
}
#ticketView {
  min-height: 32rem;
  max-height: 100hv;
}
#loadingOverlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: none; /* Hidden by default */
  align-items: center;
  justify-content: center;
  z-index: 9999;
  transition: opacity 0.3s ease-in-out; /* Smooth transition */
}

.spinner {
  width: 50px;
  height: 50px;
  border: 5px solid white;
  border-top: 5px solid transparent;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}