body {
        background-color: #222222;
        font-size: 16px;
        font-family: 'Mulish', sans-serif;
      }
      .container {
        background-color: #fff;
        border-radius: 5px;
        box-shadow: 0 2px 5px rgba(0,0,0,0.3);
        margin: 100px auto;
        padding: 20px;
        width: 400px;
      }
      .container:hover {
			box-shadow: 0 5px 10px rgba(0,0,0,0.5);
		}
      h3 {
        text-align: center;
      }
      .logo {
			display: block;
			margin: 0 auto;
			width: 250px;
			height: auto;
			border-radius: 0%;
			overflow: hidden;
			margin-bottom: 20px;
			transition: transform 0.3s ease-in-out;
		}
		
		.logo:hover {
			transform: rotate(360deg);
		}

table {
      border-collapse: collapse;
      width: 95%;
      border: 2px solid white;
      margin: auto;
      background: #b3b0aa;
    }
    
    th {
      background-color: gold;
      color: black;
    }
    
    td, th {
      border: 2px solid white;
      padding: 8px;
      text-align: left;
      color: black;
    }


      input[type=text], input[type=password] {
        border: 1px solid #305679;
        border-radius: 5px;
        box-shadow: 0 2px 5px rgba(0,0,0,0.3);
        display: block;
        margin:  auto;
        padding: 10px;
        width: 95%;
      }
      input[type=submit] {
        background-color: #305679;
        border: none;
        border-radius: 5px;
        box-shadow: 0 2px 5px rgba(0,0,0,0.3);
        color: #fff;
        cursor: pointer;
        display: block;
        font-size: 16px;
        margin: 20px auto;
        padding: 10px;
        width: 100%;
      }
      input[type=submit]:hover {
        background-color: navy;
      }
      
      header {
  background-color: gold;
  color: black;
  padding: 10px;
}

.header-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 10%;
}

.header-left {
  font-weight: bold;
}
.header-left hover {
  text-decoration: underline;
}

.header-center{
    
}


.header-center img {
    width: 20%;
    margin-left: 47%;
}

.header-right a {
  font-weight: bold;
  text-decoration: none;
}

.header-right a:hover {
  text-decoration: underline;
}

.row {
  display: flex;
  justify-content: center;
  margin-bottom: auto;
}


.box {
  background-color: #f1f1f1;
  padding: 10px;
  margin: 0 10px;
  color: black;
  margin-top: 20px;
  width: 100%;
  border-radius: 10px;
  transition: width 0.3s ease-in-out; /* Adding a transition for smooth animation */
}

.box:hover {
  width: 130%; /* Increasing the width of the box on hover */
}


.bar-graph {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
}

.bar {
  height: 10px;
  background-color: gold;
  margin-bottom: 10px;
  position: relative;
}

.bar p {
  margin: 0;
  position: flex;
  top: 0;
  left: 100%;
  transform: translateX(10px);
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.3s ease;
  font-size: 13px;
}

.bar:hover p {
  opacity: 1;
  position: right;
}

.box .icons {
      display: flex;
      justify-content: center;
      flex-direction: column;
      align-items: center;
    }
    .box .icons a {
      margin-top: 10px;
      color: #000;
      text-decoration: none;
      font-size: 20px; /* Adjust the font size as needed */
    }
    .box .icons .caption {
      margin-top: 5px;
      font-size: 12px; /* Adjust the font size as needed */
    }
    .box .icons a:hover {
      color: gold; /* Hover color */
    }

.userBtn {
background-color: gold;
  display: inline-block;
  margin: auto;
  border-radius: 20px;
  border: 1px;
  text-align:center;
}

.userBtn a {
  display: inline-block;
  padding: 5px 10px;
  color: #fff;
  text-decoration: none;
}

.userBtn a:hover {
  background-color: #18334f;
}

.userBtn .btn-secondary {
  background-color: gold;
  font-weight: bold;
  border-radius: 20px;
}

.userBtn .btn-sm {
    background-color: gold;
  font-size: 12px;
  border-radius: 20px;
}



      
      #overlay {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-color: rgba(0, 0, 0, 0.5);
			display: flex;
			justify-content: center;
			align-items: center;
		}
		#loading {
			border: 16px solid #222222;
			border-top: 16px solid #d4af37;
			border-radius: 50%;
			width: 120px;
			height: 120px;
			animation: spin 2s linear infinite;
		}
		@keyframes spin {
			0% { transform: rotate(0deg); }
			100% { transform: rotate(360deg); }
		}
      
      
      @media (max-width: 600px) {
			.container {
				width: 90%;
				padding: 10px;
				border-radius: 0;
				box-shadow: none;
			}
			
			input[type=submit] {
				width: 100%;
			}
			
			.logo {
				width: 80%;
				height: auto;
				margin-bottom: 10px;
			}
			
		    #loading {
				border-width: 10px;
				width: 80px;
				height: 80px;
			}
			
			
			
			
		}