@font-face {
  font-family: Barlow;
  src: url('../fonts/Barlow/Barlow-Regular.ttf'); 
}
@font-face{
font-family: Barlow-Bold;
  src: url('../fonts/Barlow/Barlow-Bold.ttf');
}
* {
  margin: 0px;
  padding: 0px;
}

form, .content {
  max-width: 768px;
  margin: 0px auto;
  padding: 20px;
  border: 1px solid #B0C4DE;
  border-top: none;
  background: white;
  border-radius: 0px 0px 5px 5px; /* Set the corner radius to 0px for the top and 5px for the bottom */
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1); /* Add a box shadow for a better look */
}


@media screen and (max-width: 480px) {
  form, .content, .form-header{
    width: 100%;
    padding: 10px;
  }
}
.input-group {
  margin: 10px 0px 10px 0px;
}
.input-group label {
  display: block;
  text-align: left;
  margin: 3px;
}
.input-group input {
  height: 30px;
  width: 93%;
  padding: 5px 10px;
  font-size: 16px;
  border-radius: 5px;
  border: 1px solid gray;
}

.error {
  width: 92%; 
  margin: 0px auto; 
  padding: 10px; 
  border: 1px solid #E53B46; 
  color: #E53B46; 
  background: #f2dede; 
  border-radius: 5px; 
  text-align: left;
}
body {
  font-size: 120%;
  background: #F8F8FF;
  font-family: Barlow;
}

.header {
  width: 30%;
  margin: 50px auto 0px;
  color: white;
  background: #008000; /* Change background color to green */
  text-align: center;
  font-family: Barlow-Bold;
  border: 1px solid #B0C4DE;
  border-bottom: none;
  border-radius: 5px 5px 0px 0px;
  padding: 20px;
}

.btn {
  
  padding: 15px 20px;
  font-size: 15px;
  color: white;
  background-color: #42A8B0;
  border: none;
  border-radius: 5px;
  font-weight: bold;
  margin-top: 10px;
  cursor: pointer;
}
.date-btn {
  width: 143px;
  padding: 15px 20px;
  font-size: 15px;
  color: #333;
  font-weight: bold;
  background-color: #EFA352; 
  border: none;
  border-radius: 5px;
  margin-top: 10px;
  cursor: pointer;
}
form label {
  display: block;
  text-align: left;
  margin: 3px;
  font-weight: bold;
  color: #333;
}


.dateInput {
  box-sizing: border-box;
  height: 30px;
  width: 100%;
  padding: 5px 10px;
  font-size: 16px;
  border-radius: 5px;
  border: 1px solid gray;
  background-color: white;
  appearance: none;
  -webkit-appearance: none;
  background-image: url('pics/calendar.png'); /* Replace 'path/to/calendar-icon.png' with the actual path to your calendar icon */
  background-repeat: no-repeat;
  background-position: right 10px center; /* Add padding from the right side */
  background-size: 20px;
  padding-right: 30px; /* Add extra padding on the right side */
  background-color: #f9f9f9; /* Change the background color */
  cursor: pointer; /* Add a cursor pointer */
}

input[type='time']::-webkit-calendar-picker-indicator {
  opacity: 0;
  right: -20px;
  position: relative;
  width: 86%;
}

.timeInput{
  box-sizing: border-box;
  height: 30px;
  width: 100%;
  padding: 5px 10px;
  font-size: 16px;
  border-radius: 5px;
  border: 1px solid gray;
  background-color: white;
  appearance: none;
  -webkit-appearance: none;
  background-image: url('pics/clock.png'); /* Replace 'path/to/clock-icon.png' with the actual path to your clock icon */
  background-repeat: no-repeat;
  background-position: right 10px center; /* Add padding from the right side */
  background-size: 20px;
  padding-right: 30px; /* Add extra padding on the right side */
  background-color: #f9f9f9; /* Change the background color */
  cursor: pointer; /* Add a cursor pointer */

}

.checkbox-container {
  display: flex;
  align-items: center; /* Aligns items vertically in the center */
  justify-content: flex-start; /* Aligns items to the left */
}

.checkBox
{
  display: inline-block;
  margin-left: 10px;
  width: 20px;
  height: 20px;
  background-color: #eee;
  border-radius: 50%;
  vertical-align: middle;
  cursor: pointer;
  transition: background-color 0.3s;
}

.checkBoxLabel {
  display: inline-block;
}
select {
  height: 30px;
  width: 100%;
  padding: 5px 10px;
  font-size: 16px;
  border-radius: 5px;
  border: 1px solid gray;
  background-color: white;
  appearance: none;
  -webkit-appearance: none;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12"><path d="M6 9l4-4H2z"/></svg>');
  background-repeat: no-repeat;
  background-position: right center;
  background-size: 12px;
}

.form-header {
  margin-top: 10px;
  max-width: 768px;
  margin: 0px auto;
  padding: 20px;
  border: 1px solid #B0C4DE;
  background: white;
  border-radius: 5px 5px 0px 0px;
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: none;
  font-weight: bold;
}

.switch-field {
	display: flex;
	overflow: hidden;
}

.switch-field input {
	position: absolute !important;
	clip: rect(0, 0, 0, 0);
	height: 1px;
	width: 1px;
	border: 0;
	overflow: hidden;
}

.switch-field label {
	background-color: #e4e4e4;
	color: rgba(0, 0, 0, 0.6);
	font-size: 18px;
	line-height: 1;
	text-align: center;
	padding: 8px 16px;
	margin-right: -1px;
	border: 1px solid rgba(0, 0, 0, 0.2);
	box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
	transition: all 0.1s ease-in-out;
}

.switch-field label:hover {
	cursor: pointer;
}

.switch-field input:checked + label {
	background-color: #EFA352;
	box-shadow: none;
}

.switch-field label:first-of-type {
	border-radius: 4px 0 0 4px;
}

.switch-field label:last-of-type {
	border-radius: 0 4px 4px 0;
}


.dropdown-icon {
  width: 20px;
  height: 20px;
  background-image: url('pics/drop-down-arrow.png');
  background-repeat: no-repeat;
  background-position: right center;
  background-size: contain;
  cursor: pointer;
  transition: transform 0.3s ease;
}
.success {
  color: #3c763d;
  background: #dff0d8;
  border: 1px solid #3c763d;
  margin-bottom: 20px;
}


/* Add a black background color to the top navigation */
.topnav {
  background-color: #144857;
  overflow: hidden;
}

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav div{
  float: right;
  display: block;
  color: #a3e6eb;
  text-align: center;
  text-decoration: solid;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

/* Change the color of links on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

/* Add an active class to highlight the current page */
.topnav a.active {
  background-color: #4CAF50;
  color: white;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
  display: none;
}

#pictures {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  list-style: none; /* Removes the bullet points from the list */
  padding: 0; /* Removes the padding from the list */
}

#pictures li {
  margin: 10px; /* Adds a 10px margin around the list items */
}

#thumbs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
#thumbs img {
  flex: 1 0 200px;
  max-width: 100%;
  height: auto;
  border: 1px solid #ccc;
  border-radius: 10px 10px 0px 0px;
  transition: transform .2s; /* Animation */
  box-shadow: 5px 5px 15px 0px rgba(0,0,0,0.2); /* Shadow effect */
}

#thumbs img:hover {
  transform: scale(1.1); /* Zoom in */
  border-color: #777;
  box-shadow: 0 0 20px rgba(255,255,255,0.8), 5px 5px 15px 0px rgba(0,0,0,0.5); /* Glow and darker shadow effect */
}

h1 {
  text-align: center;
  color: #333;
  background-color: #EFDBB7;
  padding: 10px;
  border-radius: 5px;
  font-size: x-large;
  font-weight: bold;
  max-width: 768px;
  margin: 10px auto 20px; /* Add this line to center the heading */
}
#pickerdiv{
	text-align: center;
	border: 1px solid black;
	padding: 10px;
}	
#pickerdiv input{
	margin: 5px;
}

#pickerdiv button{
  margin: 5px;
} 
form{
  text-align: center;
}

.timelabel{
  font-weight: bold;
  font-size: 20px;
  color: #333;
  background-color: #EFDBB7;
}

.pic_icons{
  background-color: #EFDBB7;
  border-radius: 0px 0px 10px 10px;
}

.download-btn {
  padding: 15px 20px;
  background-image: url(pics/download.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: auto 85%;
  background-color: #4CAF50;
  border: none;
  border-radius: 10px;
  margin-left: 50px;
  margin-right: 50px;
  transition: transform .15s;
  cursor: pointer;
}
.delete-btn{
  padding: 15px 20px;
  background-image: url(pics/bin.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: auto 85%;
  background-color: #E53B46;
  border: none;
  border-radius: 10px;
  margin-left: 50px;
  margin-right: 50px;
  transition: transform .15s;
  cursor: pointer;
}

.delete-btn:hover,.download-btn:hover {
  transform: scale(1.15); /* Zoom in */
  border-color: #777;
  box-shadow: 0 0 10px rgba(255,255,255,0.65), 2px 2px 8px 0px rgba(0,0,0,0.5); /* Glow and darker shadow effect */
}

.corrupted-icon{
  position: absolute;
  padding: 20px 20px;
  top: 10px;
  right: 5px;
  background-image: url(pics/corrupt-file.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: auto 85%;
  background-color: #EFA352;
  border: none;
  border-radius: 10px;
  transition: transform 0.6s ease;
}

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  list-style: none;
  padding: 0;
  margin-bottom: 10px;
}

#pagignaton-Footer{
  display: flex;
  font-weight: bold;
  justify-content: center;
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 15px;

}

.page-btn {
  margin: 0 5px;
  padding: 15px 20px;
  font-size: 18px;
  text-decoration: none;
  color: #333;
  font-weight: bold;
  background-color: #EFA352; 
  border: none;
  border-radius: 5px;
  cursor: pointer;
}


.page-btn:hover {
  background-color: #f0f0f0;
}

.current-page {
  margin: 0 5px;
  padding: 15px 20px;
  border: none;
  border-radius: 5px;
  background-color: #ddd;
  font-weight: bold;
}

.page-btn img {
  
  height: 17px;
  width: auto; /* Adjust the size as needed */
  vertical-align: middle;
  scale: 1.5;
}

.ellipsis {
  margin: 0 5px;
  padding: 15px 20px;
  color: #999;
}

.corrupted-icon_tooltip {
  visibility: hidden;
  width: 200px;
  background-color: #E53B46;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  box-shadow: 2px 2px 8px 0px rgba(0, 0, 0, 0.5);
  z-index: 1;
  bottom: 125%;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.corrupted-icon:hover .corrupted-icon_tooltip {
  visibility: visible;
  opacity: 1;
}


/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
  opacity: 0; /* Make it invisible by default */
  transition: opacity 0.5s; /* Add a transition effect */
}

/* Modal Content (Image) */
.modal-content {
    margin: auto;
    display: block;
    width: 80%;
    max-height: 80%; /* Adjust this as needed */
    object-fit: contain; /* This will make sure the image keeps its aspect ratio */
}

/* The Close Button */
.close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}

.close:hover,
.close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}


/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}