* {
    margin: 0;
    padding: 0;
    font-family: "Trirong", serif;
  }
.section{
    display: flex;
    justify-content: space-between;
}
.formBody{
    direction: rtl;
}
ul.topnav {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #ccc5c5;
  }
  
  ul.topnav li {float: left;}
  
  ul.topnav li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
  }
  
  ul.topnav li a:hover:not(.active) {background-color: #bda5ff;}
  
  ul.topnav li a.active {background-color: #8b77c2;}
  
  ul.topnav li.right {float: right;}

  .hero{
    width: 80%;
    height: 100%;
    background: linear-gradient(45deg , #6ac , #bda5ff);
    position: relative;
  }

  #calender{
    width: 80%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50% , -50%);
  }
  .index{
    display: flex;
    justify-content: space-between;

  }
 .managements{
  direction: rtl;
  
 }
 body .startBody{
  box-sizing: border-box;
  background: url(cover.jpg) no-repeat;
  background-size: cover;
  background-position: center;
 
 }
 .wrapper{
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: #bda5ff;
  border: 2px solid rgba(255 , 255 , 255 , 0.2);
  padding: 30px 40px;
  
 }
 .wrapper h1{
  font-size: 36px;
  text-align: center;
  border-radius: 10px;

 }
 .wrapper .input-box{
  position: relative;
  width: 100%;
  height: 50px;
 
  margin: 30px 0;
 }
 .input-box input{
  width: 100%;
  height: 100%;
  background: transparent;
  border: none;
  outline: none;
  border: 2px solid rgba(255 , 255 , 255 ,0.2);
  border-radius: 40px;
  font-size: 16px;
  color: #fff;
  padding: 20px 45px 20px 20px;
 }
 .input-box input::placeholder{
  color: #fff;
 }
 .input-box i{
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 20px;
  color: #fff;
 }
 .wrapper .btn{
  width: 100%;
  height: 45px;
  background: #fff;
  border: none;
  outline: none;
  border-radius: 40px;
  cursor: pointer;
  font-size: 16px;
  color: #333;
  font-weight: 600;
 }
 .wrapper .register-link{
  font-size: 14.5px;
  text-align: center;
  margin-top: 20px 0 15px;
 }
 .register-link p a{
  color: #fff;
  text-decoration: none;
  font-weight: 600;
 }
 .register-link p a :hover{
  text-decoration: underline;

 }

 .stats table{
  font-size: 25px;
 }
 #container  table td,
 table th {
   border: 1px solid black;
 }

 .dropdown {
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
  cursor: pointer;
  font-size: 16px;  
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.navbar a:hover, .dropdown:hover .dropbtn, .dropbtn:focus {
  background-color: #bda5ff;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

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

.show {
  display: block;
}
#content {
  display: flex;
  gap: 20px;
}
#content2{
  display: flex;
  gap: 20px;
  margin-top: 30px;
}

.sticky-note {
  background-color: #ffeb3b;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
  width: 150px;
  text-align: center; /* Center content */
}

.sticky-note h1 {
  margin: 0 0 10px;
  font-size: 18px;
  color: #333;
}

.sticky-note button {
  background-color: #fff;
  border: none;
  border-radius: 5px;
  padding: 10px 15px;
  cursor: pointer;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
  transition: background-color 0.3s;
  width: 100%;
}

.sticky-note button:hover {
  background-color: #f0f0f0;
}
.managements {
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 20px;
  margin: 20px 0;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  max-width: 300px; /* Adjust width as needed */
}

.managements a {
  display: block; /* Makes each link take up the full width */
  color: #1667bd; /* Bootstrap blue */
  text-decoration: none;
  padding: 1px;
  border-radius: 5px;
  margin: 1px; /* Space between links */
  transition: background-color 0.3s, color 0.3s; /* Smooth transition */
}

.managements a:hover {
  background-color: #f1f1f1; /* Light gray background on hover */
  color: #0056b3; /* Darker blue text on hover */
}

/* General table styles */
table {
  width: 100%; /* Full width */
  border-collapse: collapse; /* Remove space between cells */
  margin-top: 20px; /* Space above the table */
}

th, td {
  padding: 12px; /* Padding inside cells */
  text-align: left; /* Align text to the left */
  border: 1px solid #ddd; /* Light gray border */
}

th {
  background-color: #007bff; /* Blue background for header */
  color: white; /* White text for header */
}

tr:nth-child(even) {
  background-color: #f2f2f2; /* Light gray for even rows */
}

tr:hover {
  background-color: #e0e0e0; /* Darker gray on hover */
}

/* Optional: Style for the table container */
#container {
  overflow-x: auto; /* Allow horizontal scrolling on small screens */
  margin: 0 20px; /* Margin around the table container */
}
/* Body style */
.formBody {
  font-family: Arial, sans-serif; /* Font family for the entire body */
  background-color: #f4f4f4; /* Light background color */
  margin: 0;
  padding: 20px; /* Padding around the body */
}

/* Navigation bar styles */
.topnav {
  background-color: #007bff; /* Blue background for navbar */
  overflow: hidden; /* Clear floats */
  padding: 10px; /* Padding for navbar */
}

.topnav li {
  float: right; /* Align items to the right */
  list-style-type: none; /* Remove bullet points */
}

.topnav a {
  color: white; /* White text for links */
  text-decoration: none; /* Remove underline */
  padding: 14px 16px; /* Padding for links */
  display: block; /* Make links block elements */
}

.topnav a:hover {
  background-color: #0056b3; /* Darker blue on hover */
}

/* Dropdown styles */
.dropdown {
  float: right; /* Align dropdown to the right */
  overflow: hidden; /* Clear floats */
}

.dropbtn {
  background-color: #007bff; /* Button background */
  color: white; /* Button text color */
  padding: 14px 16px; /* Button padding */
  font-size: 16px; /* Button font size */
  border: none; /* Remove border */
  cursor: pointer; /* Pointer cursor on hover */
}

.dropdown-content {
  display: none; /* Hide dropdown by default */
  position: absolute; /* Position it below the button */
  background-color: #f9f9f9; /* Dropdown background */
  min-width: 160px; /* Minimum width */
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); /* Shadow */
  z-index: 1; /* Above other elements */
}

.dropdown-content a {
  color: black; /* Text color */
  padding: 12px 16px; /* Padding for links */
  text-decoration: none; /* Remove underline */
  display: block; /* Make links block elements */
}

.dropdown-content a:hover {
  background-color: #f1f1f1; /* Background color on hover */
}

.show {
  display: block; /* Show dropdown */
}

/* Form styles */
form {
  background-color: white; /* White background for the form */
  padding: 20px; /* Padding for the form */
  border-radius: 8px; /* Rounded corners */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Subtle shadow */
  margin-top: 20px; /* Space above the form */
}

fieldset {
  border: none; /* Remove default border */
}

legend {
  font-size: 1.5em; /* Larger font for legend */
  margin-bottom: 10px; /* Space below the legend */
}

label {
  font-weight: bold; /* Bold labels */
}

input[type="text"] {
  width: calc(100% - 20px); /* Full width minus padding */
  padding: 10px; /* Padding inside input */
  margin-bottom: 15px; /* Space below input */
  border: 1px solid #ccc; /* Light border */
  border-radius: 4px; /* Rounded corners */
}

input[type="submit"] {
  background-color: #007bff; /* Blue submit button */
  color: white; /* White text */
  padding: 10px 15px; /* Padding for button */
  border: none; /* Remove border */
  border-radius: 4px; /* Rounded corners */
  cursor: pointer; /* Pointer cursor */
}

input[type="submit"]:hover {
  background-color: #0056b3; /* Darker blue on hover */
}

/* Result display styles */
#result {
  margin-top: 20px; /* Space above result section */
  padding: 15px; /* Padding inside result section */
  background-color: #f9f9f9; /* Light background for result */
  border: 1px solid #ddd; /* Border around result */
  border-radius: 4px; /* Rounded corners */
}