body {
    margin: 0;
    font-family: Inter, Arial, sans-serif;
	background: #1E4B87;
	color: #fff;
	font-size: 14px;
	paddin: 5%;
  }
	
 .header {
    max-width: 1040px;
    margin: 0 auto 0;
    padding: 25px 0px;
    display: flex;
    gap: 10px;
	flex-direction: row;
	box-sizing: border-box;
  }
  .footer {
    max-width: 1040px;
    margin: 0 auto 0;
    display: flex;
    width: 100%;
    gap: 10px;
    justify-content: end;
	flex-direction: row;
	box-sizing: border-box;
  }
  .footer .icon-n2p-logo::before {
    width:192px;
  }
	.header-grid-item {
	flex: calc((100% / 2));
    height: 50px;
    display: flex;
    box-sizing: border-box;
	}	
	
	.time{
		text-align: right;
		display: block;
	}
	.hours {font-size:25px}
	.day {color:#99B7DF; font-size:14px}
	
 .container {
	background: #265491;
	border: 1px solid #4E75AA;
	border-radius: 10px;
    max-width: 1040px;
    margin: 0 auto 25px;
    padding: 25px;
    display: flex;
    gap: 20px;
	flex-direction: row;
	flex-wrap: wrap;
	box-sizing: border-box;
	box-shadow: 0px 29px 50px 25px #14335c8a; 
  }
  .grid-item {
    flex: calc((100% / 3));
    background-color: #34619C;
    display: flex;
    align-content: flex-start;
    box-sizing: border-box;
	border-radius: 10px;
	border: 1px solid #4E75AA;
	padding: 20px;
	gap:20px;
	flex-wrap: wrap;
  }

  .col-span {
	flex: 100%;
  }
  .grid-item-header, .grid-item-body {
	display: flex;
	flex: 100%;
	gap: 20px;
    min-height: 38px;
  }
  .grid-item-body {
	justify-content:end ;
  }
  .justify-space-between{
    justify-content:space-between;
    width: 100%;
  }
  .justify-space-evenly{
    justify-content:space-evenly;
    width: 100%;
  }

  .title-grid-item {
	flex: 0 0 calc((100% / 2) - 20px);;
	display: flex;
    align-items: center;
  }

  .output-title {
	flex: 0 1 auto;
	text-align: right;
  }
  .output-title-space-between {
    margin-right: auto;
  }

  .title-note {
	font-weight: 400;
	font-size: 12px;
  }

	.menu-grid-item {
	display: flex;
    align-items: center;
	gap: 20px;
	margin-left: auto;
  }
	.grid-item-title-container {
	display: flex;
    align-items: center;
	gap: 10px;
	color:#99B7DF;
	font-size:18px;
	font-weight: 500;
	white-space: nowrap;
	margin-right: auto;
	}
	
	h1 {
		font-size: clamp(28px, 42px, 48px);
		font-weight: 600;
		margin:0;
	}	
	.firmware {
		color: #99B7DF;
	}
	
	a.primary-button{
		border-radius: 50%;
		background-color: #34619C;
		width: 58px;
		height: 58px;
		display: flex;
    	align-items: center;
  		text-align: center;
		justify-content: center;
		box-sizing: border-box;
		color: #99B7DF;
		font-size:22px;
		transition: all 0.3s ease;
		cursor: pointer;
        text-decoration: none;
	}
	
	a.primary-button:hover {
		background-color: #F9CF36;
		color: #1E4B87;
	}
	.grid-item-button {
		border-radius: 30px;
		border: 1px solid #799CCA;
		background: #265491;
		padding:8px 15px;
		font-size: 15px;
		font-weight: 500;
		color: #99B7DF;
		display: flex;
    	align-items: center;
		justify-content: center;
		gap:5px;
		cursor: pointer;
		transition: all 0.15s ease;
	}
	.grid-item-button:hover {
		background: #1E4B87;
		border-color: #fff;
		color: #fff;
		
	}
	.toggle-container{
	display: flex;
    align-items: center;
	gap: 15px;
	color:#fff;
	font-size:14px;
	font-weight: 600;
	}
	.toggle-container-2 {
	display: flex;
    align-items: center;
	gap: 15px;
	color:#fff;
	font-size:14px;
	font-weight: 600;
	}
	
	.toggle-label {
		display: flex;
    	align-items: center;
		justify-content: end;
	}
    .right-label {
        margin-left: 5px;
        color: #99B7DF;
        font-size: 14px;
    }
	.switch {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 24px;
	margin-left:5px;
  }

  /* Hide default checkbox */
  .switch input {
    opacity: 0;
    width: 0;
    height: 0;
  }

  /* input styling */

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}
input.input {
	background-color: #1E4B87;
	border: 1px solid #799CCA;
	border-radius: 5px;
	color: #99B7DF;
	text-align: center;
	padding: 10px;
	line-height: 1em;
	font-size: 14px;
	max-width: 100px;
	margin-left: 10px;
	transition: all 0.15s ease;
}
input.input:focus {
	background-color: #173d6e;
	border-color: #fff;
}
input.input:hover {
	border-color: #fff;
}
input.input.input-18ch {
	max-width: 18ch;
    text-align: left;
}

input.input.input-6ch {
	max-width: 6ch;
}

input.input.fill-width{
	flex: 1 0 0;
}
input.input.input-4ch {
	max-width: 4ch;
}
input.input.input-3ch {
	max-width: 3ch;
}
input.input.password-input {
    max-width: 100%;
    text-align: left;
    flex: 1 1 100%;
}

.input-multi-select {
    padding: 10px 12px;
    background: #1E4B87;
    border: 1px solid #799CCA;
	border-radius: 5px;
    color: #99B7DF;
    appearance: none; /* Remove default dropdown styling */
    -webkit-appearance: none;
    -moz-appearance: none;
    font-size: 14px;
    padding-right: 30px;
}
.select-wrapper {
    position: relative;
    display: inline-block;
}

.select-wrapper::after {
    content: ""; /* Unicode chevron character */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 13.1l-8-8 2.1-2.2 5.9 5.9 5.9-5.9 2.1 2.2z' fill='%2399B7DF'/%3E%3C/svg%3E");
    font-size: 14px;
    height: 12px;
    width: 12px;
    color: #99B7DF;
    position: absolute;
    top: 50%;
    right: 10px; /* Adjust right padding */
    transform: translateY(-50%);
    pointer-events: none;
}

  /* Slider styling */
  .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #1E4B87;
    transition: .4s;
    border-radius: 24px;
  }

  .slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 2px;
    bottom: 2px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
  }

  input:checked + .slider {
    background-color: #F9CF36;
  }

  input:focus + .slider {
    box-shadow: 0 0 1px #F9CF36;
  }

  input:checked + .slider:before {
    transform: translateX(16px);
  }
	
 .table-container {
	width: 100%;
	height: 50vh;
	overflow: auto; /* Enables scrolling if content overflows */
    white-space: nowrap;
	padding-right: 18px;
	}

/* Customizes the scrollbar itself */
.table-container::-webkit-scrollbar {
    height: 10px; /* Height of the horizontal scrollbar */
}

/* Customizes the background of the scrollbar (track) */
.table-container::-webkit-scrollbar-track {
    background: #f1f1f100; /* Light grey background */
}

/* Customizes the draggable scrolling element (thumb) */
.table-container::-webkit-scrollbar-thumb {
    background: #265491; /* Darker grey scrollbar thumb */
	border-radius: 10px;
	border: 1px solid #799CCA;
}

/* Changes the color on hover or when being clicked */
.table-container::-webkit-scrollbar-thumb:hover {
    background: #1E4B87; /* Dark grey for hover effect */
}	
a.reset-button {
	font-size: 12px;
	color: #99B7DF;
	text-decoration: underline;
	display: block;
	font-weight: initial;
	cursor: pointer;
	transition: all 0.15s ease;
}	
a.reset-button:hover {
	color: #fff;
}

.form-button-wrapper {
    display: flex;
    justify-content: flex-end;
    gap: 20px;
    align-self: stretch;
    width: 100%;
}
input.form-button, button.form-button {
    all: unset; /* Reset all styles */
    display: flex;
    padding: 10px 15px;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
    background: #F9CF36;
    font-size: 16px;
    color: #1E4B87;
    cursor: pointer;
    text-align: center;
    transition: all 0.15s ease;
}
input.form-button:hover, button.form-button:hover {
    background: #E0B82E;
}

.input-buttons {
	display: flex;
	border-radius: 100%;
	padding: 10px;
	background: #1E4B87;
	margin-left: 10px;
	font-size:12px;
	height:23px;
	width: 23px;
	text-align:center;
	color: #4E75AA;
	}
.input-buttons-active {
	display: flex;
	border-radius: 100%;
	border: #F9CF36 solid 1px;
	padding: 10px;
	background: #1E4B87;
	margin-left: 10px;
	font-size:12px;
	height:23px;
	width: 23px;
	text-align:center;
	color: #F9CF36;
	}
	.ON-Off {margin: auto;}
	
.column-match {
	width: clamp(100px, 32vw, 129px);
	}
	
 table {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
  }
	table td {
		max-width: 0; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;
	}
	table td:first-child {
		width:50%;
		padding-left:0px;
	}
	table td:nth-child(2) {
		width:25%;
	}
	table td:last-child {
		padding-right:0px;
	}
	
  td, th {
    border-bottom: 1px solid #4E75AA;
    padding: 15px 0;
    text-align: left; /* Default text alignment */
  }
  td:nth-child(2), td:nth-child(3) {
    text-align: right; /* Aligns text to the right for the 2nd and 3rd columns */
  }
@media only screen and (max-width: 1040px) {
		body {margin: 2%;}
	}
	@media only screen and (max-width: 935px) {
		body {margin: 0;}
		.firmware {font-size:12px}
		.header{flex-wrap: wrap; padding: 5% 5% 0 5%}
		.footer{flex-wrap: wrap; padding: 0 5% 5% 5%}
		.grid-item {padding:12px; gap:10px;flex: calc((100% / 2));}
		.menu-grid-item{gap:10px;}
		.header-grid-item {flex:0;}
		.header-grid-item.icon-apd-logo:before {font-size:33px;}
		.grid-item-button {flex-wrap: wrap; font-size: 14px; width: 12px; height: 30px; gap: 0px; border: none; background: none;}
		.time {flex:1}
		.hours {font-size:13px;}
		.day{font-size:12px;}
		.container {margin: 0 5% 5%; padding: 12px; gap:10px;}
		h1 {font-size: 24px}
		table td { font-size:13px; padding:15px 5px;}
		table td:first-child {width:50%;}
		table td:nth-child(2){width:21%;}
		table td:last-child {width:30%;}
		.primary-button {height:50px; width:50px;}
		.grid-item-button:hover {background: none;}
		.output-title {font-size:12px}
	}
	@media only screen and (max-width: 475px) {
		.grid-item-title-container {font-size: 15px; gap:5px;}
		.input-buttons-active, .input-buttons {margin-left: 7px}
		.icon-records {width: 100%;}
		.alarm-bell-buzzer:before {font-size: 17px;}
		.primary-button {height: 40px; width: 40px; font-size: 17px;}
		.grid-item {gap:2px}
		.header-grid-item.icon-apd-logo:before {font-size: 30px;}
		.table-container {padding-right:7px}
		.table-container::-webkit-scrollbar {width: 12px;}
		.grid-item-body {margin-top: 10px;}
		.grid-item-header.grid-col {flex-direction:column;}
		.toggle-container {gap:10px;}
		.toggle-container-2 {margin-left: auto; gap:10px;}
		.toggle-label {gap:7.5px}
		h1 {font-size: 21px}
		.title-grid-item {flex:1;}
		.fullwidth-mob {flex: 1 1 100%; width: 100%; justify-content: flex-start;}
		.grid-item-header, .grid-item-body {gap: 10px;}
		input.input {margin-left: 0;}
		.slider {min-width: 40px;}
		.switch {margin-left: 0px;}
		
		
	}