header {
  position: relative;
  height: auto;
  padding-top: 60px;
  padding-bottom: 0px;
  background: transparent; 
  color: #e5e5e5;
}

footer {
  background-color: rgba(51, 51, 51, 1);
  color: #e5e5e5;
  text-align: center;
  padding: 10px 0;
  position: fixed;
  bottom: 0;
  width: 100%;
  font-size: 14px;
  z-index: 1000;
}

body { 
  display: flex;
  flex-direction: column;
  font: 400 1em/1.5 "Neuton", sans-serif; 
  background: #090d00; 
  color: #e5e5e5; 
  text-align: center; 
  margin: 0;
  background-image: url('https://i.ibb.co/xSx9Vhm/wallpaper7-1920x1080.jpg'); 
  background-size: cover;
  background-attachment: fixed; /* This line ensures the background image stays in place while scrolling */
  background-repeat: no-repeat;
  background-position: top;
}

section {
  margin-top: 200px;
  padding-bottom: 280px;
}

#logo {
  text-transform: uppercase;
  letter-spacing: .4em;
  display: inline-block;
  border: 4px double rgba(255,255,255,.25);
  border-width: 4px 0;
  padding: 1.5em 0;
  position: absolute;
  top: 18%;
  left: 50%;
  width: 40em;
  margin: 0 0 0 -20em;
  color: #e5e5e5;
  font-weight: bold;
}

.logo-text {
  font: 700 3em/1 "Oswald", sans-serif;
  letter-spacing: 0;
  padding: .25em 0 .325em;
  display: block;
  margin: 0 auto;
  text-shadow: 0 0 80px transparent;
  background: url('https://i.ibb.co/Tq1BYx9/animated-text-fill.png') repeat-y;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;  
  color: transparent;  
  -webkit-animation: aitf 80s linear infinite;
  animation: aitf 80s linear infinite;  
  transform: translate3d(0,0,0);
  backface-visibility: hidden;
}

@keyframes aitf {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}

table {
  font-size: 0.9em;
  width: 100%;
  border-collapse: separate; /* Change to separate for rounded corners */
  border-spacing: 0;
  margin-top: 20px;
  background: rgba(0, 0, 0, 0.2); /* Adjust this value to control opacity */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); 
  border-radius: 10px; /* Rounded corners for the table */
  display: table;
}

th, td {
  border: 1px solid rgba(255, 255, 255, 0.25);
  padding: 12px 2px;
  text-align: center;
  color: #e5e5e5;
  background-color: rgba(0, 0, 0, 0.2); 
}

th {
  background-color: rgba(51, 51, 51, 0.7);
  text-transform: capitalize;
  border-top-left-radius: 10px; /* Rounded top-left corner for the first header cell */
  border-top-right-radius: 10px; /* Rounded top-right corner for the last header cell */
}

td {
  border-radius: 0; /* Reset border-radius for td */
}

td:first-child {
  border-bottom-left-radius: 10px; /* Rounded bottom-left corner for the first cell in the last row */
}

td:last-child {
  border-bottom-right-radius: 10px; /* Rounded bottom-right corner for the last cell in the last row */
}

/* Apply border-top-left-radius for the first cell from the second row onwards */
tbody tr:nth-child(n+2) td:first-child {
  border-top-left-radius: 10px; /* Rounded top-left corner for the first cell in each row starting from the second row */
}

/* Apply border-top-right-radius for the last cell from the second row onwards */
tbody tr:nth-child(n+2) td:last-child {
  border-top-right-radius: 10px; /* Rounded top-right corner for the last cell in each row starting from the second row */
}

td[contenteditable] {
  background-color: rgba(0, 0, 0, 0.2); 
  color: #e5e5e5;
  outline: none;
  padding: 7px;
  border: 1px solid rgba(255, 255, 255, 0.25); 
  cursor: text;
}

td[contenteditable="true"]:focus {
  background: rgba(255, 255, 255, 0.2);
}

td.ip-address, td.mac-address, td.current-status, td.activation-status, td.files-status {
  color: #ccc;
  background-color: rgba(0, 0, 0, 0.2); 
}

/************** Actions Column Buttons Styles ********************************/

td .icon-button {
  background-color: transparent;
  color: #e5e5e5;
  border: none;
  cursor: pointer;
  font-size: 18px;
  margin: 4px;
  transition: color 0.3s;
  position: relative;
}

td .activate-button {
  background-color: transparent;
  border: none;
  cursor: pointer;
  font-size: 22px;
  margin: 1px;
  position: relative;
}

td .deactivate-button {
  background-color: transparent;
  border: none;
  cursor: pointer;
  font-size: 18px;
  margin: 4px;
  position: relative;
}

td .icon-button:hover {
  color: #00aaff;
  transform: scale(1.1);
}

td .icon-button:active {
  color: #B8860B;
  transform: scale(0.95);
}

.icon-button[data-title]:before,
.activate-button[data-title]:before,
.deactivate-button[data-title]:before {
  content: attr(data-title);
  position: absolute;
  top: 120%;
  left: -100%;
  transform: translateX(-50%);
  background-color: #333;
  color: #e5e5e5;
  padding: 5px;
  border-radius: 5px;
  font-size: 12px;
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
  transition: opacity 0.3s;
}

.icon-button[data-title]:hover:before,
.activate-button[data-title]:hover:before,
.deactivate-button[data-title]:hover:before {
  opacity: 1;
  animation: fadeout 2s forwards;
  transform: none;
}

@keyframes fadeout {
  0% {
      opacity: 1;
  }
  100% {
      opacity: 0;
  }
}

/************** Add & Save Buttons Styles ********************************/

#addButton, #saveButton {
  background-color: #333;
  color: #e5e5e5;
  border: none;
  border-radius: 50%;
  padding: 12px;
  font-size: 24px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  margin: 0 10px;
}

#addButton:hover, #saveButton:hover {
  background-color: #006090;
  transform: scale(1.2);
}

#addButton:active, #saveButton:active {
  transform: scale(0.95); 
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.5), 0 0 20px rgba(255, 255, 255, 0.5); 
}

/************** Custom Scrollbar Styles ********************************/

body,html {
  scrollbar-color: #a22115 #0f131d;
}

/************** Save Message Styles ********************************/

.save-message {
  position: fixed;
  bottom: 50px;
  left: 0;           /* Start from the left edge */
  right: 0;          /* Stretch to the right edge */
  margin: auto;      /* Auto margins to center the element horizontally */
  width: fit-content; /* Use the natural width of the content */
  background: #333;
  color: #e5e5e5;
  padding: 10px 20px;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  font-size: 16px;
  text-align: center; /* Center text inside the message box */
}

/************** Tool Tip Styles ********************************/

.tool-tip {
  display: inline-block;
  position: relative;
  margin-left: 0.5em;
}

.tool-tip .tool-tip__icon {
  background: #27b1f0;
  border-radius: 10px;
  cursor: pointer;
  display: inline-block;
  font-style: italic;
  font-family: times new roman;
  height: 20px;
  line-height: 1.3em;
  text-align: center;
  width: 20px;
}

.tool-tip .tool-tip__info {
  display: none;
  background: #262626;
  border: 1px solid #27b1f0;
  border-radius: 3px;
  font-size: 0.875em;
  padding: 1em;
  position: absolute;
  left: 30px;
  top: -20px;
  width: auto;
  min-width: 250px;
  white-space: nowrap;
  z-index: 2;
}

.tool-tip .tool-tip__info:before, .tool-tip .tool-tip__info:after {
  content: "";
  position: absolute;
  left: -10px;
  top: 7px;
  border-style: solid;
  border-width: 10px 10px 10px 0;
  border-color: transparent #27b1f0;
}

.tool-tip .tool-tip__info:after {
  left: -8px;
  border-right-color: #262626;
}

.tool-tip .tool-tip__info .info {
  display: block;
  text-align: left;
}

.tool-tip .tool-tip__info .info__title {
  display: block;
  color: #fa00f3;
  text-align: center;
  margin-bottom: 10px;
}

.tool-tip:hover .tool-tip__info, .tool-tip:focus .tool-tip__info {
  display: inline-block;
}

.ip-address:focus + .tool-tip .tool-tip__info {
  display: inline-block;
}

/* Modal Styles */
.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.5);
  outline: none; /* Removes outline from modal */
}

.modal-content {
  text-align: center;
  background-color: #2d2d2d; /* Slightly lighter background */
  margin: 10% auto;
  padding: 25px;
  border: none;
  width: 30%; /* Adjusted width */
  color: #e5e5e5;
  text-align: center;
  border-radius: 12px;
}

.close {
  color: #ccc;
  float: right;
  font-size: 24px;
  font-weight: bold;
  cursor: pointer;
  user-select: none; /* Prevents selection */
}

.close:hover, .close:focus {
  color: #fff;
  outline: none; /* Ensures no outline on hover or focus */
}

/* Disable focus outline on paragraph */
p {
  user-select: none; /* Prevents selection */
  pointer-events: none; /* Disable focus/click events */
}

/* Input Styles */
#passwordInput {
  display: inline-block;
  width: 70%;
  vertical-align: middle; /* Aligns with the checkbox and label */
  padding: 10px;
  margin: 15px 0 20px 0; /* Adds spacing around the input */
  border: 1px solid #888;
  border-radius: 8px;
  font-size: 14px;
  height: 20px; /* Adjusted input field height */
}

label {
  vertical-align: middle; /* Keep the label aligned with the input */
  margin: 10px; /* Space between input and the checkbox */
  white-space: nowrap;
}

label input[type="checkbox"] {
  vertical-align: middle;
}

button#confirmDeleteButton {
  background-color: #555; /* Neutral color for the button */
  border: none;
  padding: 8px 16px; /* Smaller padding for a compact button */
  color: white;
  font-size: 14px;
  border-radius: 12px; /* Slightly rounded */
  cursor: pointer;
  transition: background-color 0.2s ease;
  outline: none; /* Removes outline from button */
  margin-top: 10px;
}

button#confirmDeleteButton:hover {
  background-color: #777; /* Slightly darker on hover */
}

button#confirmDeleteButton:active {
  background-color: #333; /* Even darker when pressed */
  transform: scale(0.98); /* Slightly reduce size to indicate press */
  transition: background-color 0.1s ease, transform 0.1s ease; /* Faster transition for pressed state */
}


/********************* Media Queries to adjust the view on other devices **************************/

/* iPhone 11 Portrait */
@media (max-width: 740px) {
  body {
    background-size: 250%; /* Reduce the size of the background image */
    background-attachment: fixed; /* Change to scroll for mobile devices */
    background-position: center top; /* Center the background */
    font-size: 0.8em; /* Reduce base font size */
  }

  header {
    padding-top: 50px;
    padding-bottom: 5px;
  }

  #logo {
    width: 88%;
    font-size: 0.7em;
    left: 55%;
    margin: 0 auto;
    transform: translateX(-50%);
  }

  .logo-text {
    font-size: 3em;
  }

  section {
    margin-top: 100px;
    padding-bottom: 130px;
  }

  table {
    font-size: 0.8em;
    width: 100%;
    overflow-x: auto;
    display: table; /* Ensure table display */
  }

  th, td {
    padding: 8px 5px;
    font-size: 0.8em;
    word-wrap: break-word;
    white-space: normal;
    text-align: center; /* Align text to the left */
  }

  th {
    background-color: rgba(51, 51, 51, 0.9); /* Ensure header stands out */
  }

  td[contenteditable] {
    padding: 5px;
  }

  #addButton, #saveButton {
    padding: 8px;
    font-size: 18px;
  }

  .icon-button {
    font-size: 12px;
    padding: 2px;
  }

  .tool-tip .tool-tip__info {
    left: 25px;
    top: -19px;
    font-size: 0.7em;
    padding: 0.5em;
    white-space: normal; /* Allow text wrapping */
    width: 150px; /* Set a fixed width */
  }

  .tool-tip .tool-tip__icon {
    font-size: 10px;
    height: 14px;
    width: 14px;
  }

  footer {
    padding: 5px 0;
    font-size: 10px;
  }
}

/* iPhone 11 Landscape */
@media (min-width: 741px) and (max-width: 800px) {
  body {
    background-size: 190%; /* Adjust the size of the background image */
    background-attachment: scroll; /* Ensure background scrolls with content */
    background-position: center top; /* Center the background */
    font-size: 1em; /* Adjust base font size */
  }

  header {
    padding-top: 10px;
    padding-bottom: 80px;
  }

  #logo {
    width: 67%;
    font-size: 0.6em;
    left: 50%;
    margin: 0 auto;
    transform: translateX(-50%);
  }

  .logo-text {
    font-size: 4.2em;
  }

  section {
    margin-top: 120px;
    padding-bottom: 170px;
  }

  table {
    font-size: 0.7em;
    width: 100%;
    overflow-x: auto;
    display: table; /* Ensure table display */
  }

  th, td {
    padding: 10px 8px;
    font-size: 1em;
    word-wrap: break-word;
    white-space: normal;
    text-align: center; /* Align text to the left */
  }

  th {
    background-color: rgba(51, 51, 51, 0.8); /* Ensure header stands out */
  }

  td[contenteditable] {
    padding: 7px;
  }

  #addButton, #saveButton {
    padding: 10px;
    font-size: 20px;
  }

  .icon-button {
    font-size: 16px;
    padding: 6px;
  }

  .tool-tip .tool-tip__info {
    left: 28px;
    top: -19px;
    font-size: 0.8em;
    padding: 0.7em;
    white-space: normal; /* Allow text wrapping */
    width: 200px; /* Set a fixed width */
  }

  .tool-tip .tool-tip__icon {
    font-size: 12px;
    height: 16px;
    width: 16px;
  }

  footer {
    padding: 10px 0;
    font-size: 12px;
    position: relative;
  }
}

/* iPad Pro 11-inch Portrait  */
@media (min-width: 801px) and (max-width: 834px) {
  body {
    background-size: 190%; /* Adjust the size of the background image */
    background-attachment: fixed; /* Ensure background scrolls with content */
    background-position: center top; /* Center the background */
    font-size: 1em; /* Adjust base font size */
  }

  header {
    padding-top: 10px;
    padding-bottom: 100px;
  }

  #logo {
    width: 78%;
    font-size: 1em;
    left: 50%;
    margin: 0 auto;
    transform: translateX(-50%);
  }

  .logo-text {
    font-size: 3em;
  }

  section {
    margin-top: 120px;
    padding-bottom: 170px;
  }

  table {
    font-size: 1em;
    width: 100%;
    overflow-x: auto;
    display: table; /* Ensure table display */
  }

  th, td {
    padding: 10px 8px;
    font-size: 1em;
    word-wrap: break-word;
    white-space: normal;
    text-align: center; /* Align text to the left */
  }

  th {
    background-color: rgba(51, 51, 51, 0.8); /* Ensure header stands out */
  }

  td[contenteditable] {
    padding: 7px;
  }

  #addButton, #saveButton {
    padding: 10px;
    font-size: 20px;
  }

  .icon-button {
    font-size: 16px;
    padding: 6px;
  }

  .tool-tip .tool-tip__info {
    left: 29px;
    top: -16px;
    font-size: 0.8em;
    padding: 0.7em;
    white-space: normal; /* Allow text wrapping */
    width: 200px; /* Set a fixed width */
  }

  .tool-tip .tool-tip__icon {
    font-size: 12px;
    height: 16px;
    width: 16px;
  }

  footer {
    padding: 10px 0;
    font-size: 12px;
  }
}

/* iPad Pro 11-inch Landscape */
@media (min-width: 835px) and (max-width: 1200px) {
  body {
    font-size: 1.1em; /* Adjust base font size */
    background-size: 130%;
    background-attachment: fixed; /* This line ensures the background image stays in place while scrolling */
    background-repeat: no-repeat;
    background-position: top;
  }

  header {
    padding-top: 50px;
    padding-bottom: 60px;
  }

  #logo {
    width: 65%;
    font-size: 1.1em;
    left: 50%;
    margin: 0 auto;
    transform: translateX(-50%);
  }

  .logo-text {
    font-size: 3em;
  }

  section {
    margin-top: 150px;
    padding-bottom: 230px;
  }

  table {
    font-size: 1em;
    width: 100%;
    overflow-x: auto;
    display: table; /* Ensure table display */
  }

  th, td {
    padding: 10px 8px;
    word-wrap: break-word;
    white-space: normal;
    text-align: center; /* Align text to the left */
  }

  th {
    background-color: rgba(51, 51, 51, 0.8); /* Ensure header stands out */
  }

  td[contenteditable] {
    padding: 8px;
  }

  #addButton, #saveButton {
    padding: 12px;
    font-size: 22px;
  }

  .icon-button {
    font-size: 16px;
    padding: 5px;
  }

  .tool-tip .tool-tip__info {
    left: 30px;
    top: -17px;
    font-size: 0.7em;
    padding: 0.8em;
    white-space: normal; /* Allow text wrapping */
    width: 330px; /* Set a fixed width */
  }

  .tool-tip .tool-tip__icon {
    font-size: 14px;
    height: 18px;
    width: 18px;
  }

  footer {
    padding: 10px 0;
    font-size: 14px;
  }
}