/* Global Styles */
body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    background-color: #121212; /* very dark grey */
    font-family: 'Poppins', sans-serif;
}

/* Sidebar styles */
.sidebar {
    position: fixed;
    left: 0;
    top: 0;
    width: 270px; /* Adjust width as needed */
    height: 100%;
    background-color: #16213e; /* dark navy blue, same as content-box */
    padding: 20px; /* Restoring padding */
    box-sizing: border-box; /* Ensures padding is included in width */
    display: flex;
    flex-direction: column;
    align-items: center; /* Centers sidebar content */
    text-align: center; /* Center align all text in the sidebar */
}

/* Main Content Area */
.main-content {
    margin-left: 270px; /* This should be the same as the sidebar width */
    text-align: center; /* This centers the content within the main-content area */
}

/* Logo styles */
.logo-container {
    padding: 20px 0;
}

.logo {
    max-width: 300px; /* Adjust as needed */
    height: auto;
    display: block; /* Ensures the logo can be centered */
    margin: 0 auto; /* Center logo */
}
/* Define the keyframes animation for the fade-in effect */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }

/* Page Title */
h1 {
    color: white; /* White text color */
    text-align: center; /* Center align text */
    margin-top: 40px; /* Double the space above the title */
    margin-bottom: 40px; /* Double the space below the title */
    font-family: 'Poppins', sans-serif; /* Poppins font */
    font-weight: 700; /* Bold font weight */
    animation: fadeIn 1s ease-out forwards; /* 1s duration, ease-out timing, and 'forwards' to retain the final state */
    position: relative;
    z-index: 10; /* Higher than content-box */
}

/* Content Box styles */
.content-box {
    background-color: #16213e; /* dark navy blue */
    border-radius: 20px;
    border: 1px solid white;
    box-shadow: 0 0 200px 50px #22366d; /* Increased blur radius and spread, white glow */
    padding: 40px; /* Space inside the box */
    box-sizing: border-box; /* Ensures padding is included in width */
    margin: 0 auto; /* Center content box */
    width: 50%; /* Adjust width as needed */
    max-width: 600px; /* Adjust max-width as needed */
    max-height: 500px; /* Maximum height for the content box */
    overflow-y: auto; /* Add scroll for content that exceeds the max height */
    animation: fadeIn 1s ease-out forwards; /* 1s duration, ease-out timing, and 'forwards' to retain the final state */
    position: relative;
    z-index: 5; /* Lower than h1 but higher than default */
  }
  
/* Styles for the wide content box on the 'create_email_accounts' page */
.content-box-wide {
    width: fit-content; /* Adjusts width based on the content */
    min-width: 600px; /* Example minimum width, adjust as needed */
    max-width: none; /* Removes the max-width restriction */
    margin-left: 40px; /* Adds 40px margin to the left */
    margin-right: 40px; /* Adds 40px margin to the right */
    margin: 0 auto; /* This will center the content-box */
}

 /* Style the scrollbar track (the part that the scrollbar thumb moves along) */
.content-box::-webkit-scrollbar {
  width: 10px; /* Width of the scrollbar track */
}

/* Style the scrollbar thumb (the part that you drag) */
.content-box::-webkit-scrollbar-thumb {
  background-color: #888; /* Color of the scrollbar thumb */
  border-radius: 10px; /* Round endings */
  border: 2px solid transparent; /* Makes the thumb "float" on the track */
  background-clip: content-box; /* Prevents the background from bleeding into the border */
}

/* Style the scrollbar thumb on hover */
.content-box::-webkit-scrollbar-thumb:hover {
  background-color: #555; /* Darker color on hover */
}

#domainList {
    text-align: left; /* Aligns the text to the left */
    display: inline-block; /* Allows the container to shrink to fit content */
    max-width: 100%; /* Ensures the container doesn't exceed the width of its parent */
  }

/* Roadmap styles */
.roadmap {
    font-weight: bold;
    font-size: 14px;
    color: white;
    margin-bottom: 20px; /* Space below roadmap */
    background-color: transparent; /* Make background transparent */
}

.roadmap-item, .roadmap-item a {
    padding: 5px 10px; /* Add padding around the text for space inside the box */
    margin: 5px 0; /* Space between roadmap items */
    border-radius: 5px; /* Rounded corners for the box */
    transition: all 0.3s ease; /* Smooth transition for hover effects */
    display: flex; /* Use flexbox for centering */
    justify-content: center; /* Center content horizontally */
    align-items: center; /* Center content vertically */
    text-decoration: none; /* Remove underline from links */
    color: white; /* Set text color to white */
  }
  
  /* Style for the roadmap items on hover */
  .roadmap-item:not(.active):hover {
    text-shadow: 0 0 15px blue, /* Blue glow for checked state */
                 0 0 25px blue; /* intensify Blue glow for checked state */
  }

  .roadmap-item.active {
    border: 1px solid #fff; /* White border */
    border-radius: 50px;
    box-shadow: 0 0 0px #fff, /* White glow */
                 0 0 0px #fff; /* Larger white glow for more intensity */
    text-align: center; /* Ensure text is centered */
    padding: 10px;
    animation: fadeIn 1s ease-out forwards; /* 1s duration, ease-out timing, and 'forwards' to retain the final state */
  }

/* Form and input styles */
form {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centers form content */
    max-width: 100%;
}

#emailForm {
    display: inline-block; /* This will make the form only as wide as its content */
    max-width: 100%; /* Ensures that the form does not exceed the width of its parent */
}

.checkbox-item {
    display: flex;
    align-items: center;
  }

  .checkbox-item label {
    color: white;
    margin-left: 0.5em; /* Space between checkbox and label */
    vertical-align: middle; /* Align with checkbox vertically */
    transition: text-shadow 120ms ease-in-out;
    cursor: pointer; /* Indicates the label is clickable */
  }
  
  input[type='checkbox'] {
      -webkit-appearance: none;
      appearance: none;
      margin: 5px;
      font: inherit;
      color: white;
      width: 1em; /* Smaller width */
      height: 1em; /* Smaller height */
      border: 1px solid #cacece;
      border-radius: 50%;
      vertical-align: middle; /* Align with text vertically */
      cursor: pointer;
      position: relative; /* Needed to position the pseudo-element */
      padding: 0;
  }
  
  input[type='checkbox']::before {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      width: 0.5em; /* Smaller inner circle */
      height: 0.5em; /* Smaller inner circle */
      border-radius: 50%;
      transform: translate(-50%, -50%) scale(0);
      transition: 120ms transform ease-in-out;
      background-color: white;
  }
  
  input[type='checkbox']:checked::before {
      transform: translate(-50%, -50%) scale(1);
  }
  
  label {
    transition: box-shadow 120ms ease-in-out;
  }
  
  input[type='checkbox']:checked + label {
      text-shadow: 0 0 10px blue, /* Blue glow for checked state */
                   0 0 15px blue; /* intensify Blue glow for checked state */
      padding: 3px; /* Add padding if needed */
  }

  /* Style input fields */
input[type='text'], input[type='password'], input[type='email'], input[type='number'], input [type='password'], input [ type='username'] {
    height: 30px; /* Increase height */
    line-height: 30px; /* Match line height to input height for vertical centering */
    border-radius: 20px; /* Pillow shape */
    background-color: rgba(255, 255, 255, 0.05); /* 75% transparent background */
    border: 1px solid white; /* White border */
    padding: 0 15px; /* Add some padding inside the input fields */
    margin: 5px; /* Add some margin above and below the input fields */
    color: white;
}

/* Style dropdown fields */
select.validate {
    height: 30px; /* Match height of input fields */
    line-height: 30px; /* Center text vertically */
    border-radius: 20px; /* Pillow shape */
    background-color: rgba(255, 255, 255, 0.05); /* 75% transparent background */
    border: 1px solid white; /* White border */
    padding: 0 15px; /* Padding inside the dropdown */
    margin: 5px; /* Margin around the dropdown */
    color: white; /* Text color */
    -webkit-appearance: none; /* Remove default styling */
    -moz-appearance: none; /* Remove default styling */
    appearance: none; /* Remove default styling */
    background-image: url('data:image/svg+xml;utf8,<svg fill="white" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>'); /* Custom arrow icon */
    background-repeat: no-repeat; /* No repeat for background image */
    background-position: right 10px center; /* Position for the arrow icon */
    background-size: 12px; /* Size of the arrow icon */
}

/* Style the option elements */
select.validate option {
    background-color: #121212; /* Dark grey, same as content area background */
    color: white; /* Text color for the options */
}

/* Optional: Style the option elements on hover */
select.validate option:hover {
    background-color: #0a0a0a; /* Slightly darker shade for hover state */
}

/* Style for the focus state of the dropdown to provide visual feedback */
select:focus {
    outline: none; /* Remove default focus outline */
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5); /* Custom focus glow */
}

/* Button styles */
input[type='submit'], input[type='button'], button {
    background-color: #121212; /* Dark gray, same as content area background */
    color: white;
    border: none;
    padding: 10px 20px;
    margin: 10px 10px; /* Increased horizontal margin between buttons */
    border-radius: 20px; /* Pillow shape */
    border: 1px solid white;
    cursor: pointer;
    box-shadow: 0 0 10px #fff; /* White glow */
    display: inline-block; /* Keep buttons on the same line */
  }
  
  input[type='submit']:hover, button:hover {
    background-color: #0a0a0a; /* Slightly darker shade for hover state */
  }

/* Button Container */
.button-container {
    display: flex;
    justify-content: center; /* Distributes space between buttons */
    margin-top: 40px; /* Space above the button container */
    position: relative;
    z-index: 5; /* Same as content-box to keep it above */
}

/* Align label text with checkboxes */
label {
    color: white;
    margin-left: 0.5em; /* Space between checkbox and label */
    vertical-align: middle; /* Align with checkbox vertically */
}

/* Utility classes */
.centered {
    text-align: center;
}

/* Table styles */
table {
        width: auto; /* Allows the table to grow with content */
        max-width: 100%; /* Ensures the table doesn't exceed the width of its container */
        border-collapse: collapse;
        margin-bottom: 20px;
        table-layout: auto; /* Allows columns to be based on content */
    }
  
    th, td {
        border-left: none; /* Remove left border */
        border-right: none; /* Remove right border */
        padding: 8px; /* Padding inside cells */
        text-align: center; /* Align text to the left */
        color: white; /* White text color */
        vertical-align: middle;
    }
    
    /* Remove all borders from table header */
    th {
        border: none; /* Remove all borders */
        background-color: transparent; /* Remove background color */
        text-align: center; /* Center-align text */
    }
  
  /* Remove top and bottom borders from table rows */
tr {
    border-top: none; /* Remove top border */
    border-bottom: none; /* Remove bottom border */
    text-align: center; /* Center-align text */
    vertical-align: middle;
}

/* If you want to keep horizontal borders between rows, you can add them back like this */
tbody tr {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* White bottom border with 80% opacity */
}

/* Remove the border from the last row if it's not desired */
tbody tr:last-child {
    border-bottom: none; /* Remove bottom border from the last row */
}

.loading-animation {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: #fff;
    animation: spin 1s ease-in-out infinite;
    vertical-align: middle;
  }
  
  @keyframes spin {
    to { transform: rotate(360deg); }
  }
  /* Style loading symbol added to table during email creation process */
  .loading-cell {
    text-align: center;
    vertical-align: middle;
  }

  .loadingSymbolCell {
    vertical-align: middle; /* This will vertically center the inline or inline-block elements within the cell */
    text-align: center; /* This will horizontally center the inline or inline-block elements within the cell */
  }

/* Add styles for success-symbol and error-symbol */
.success-symbol, .error-symbol {
    vertical-align: middle;
}

#completionText {
    color: white;
}

p {
    color: white;
}

/* Responsive design */
@media (max-width: 768px) {
    .content-box {
        width: 80%;
    }

    .content-box-wide {
        width: auto; /* Adjusts width based on the content */
        max-width: 100%; /* Ensures it doesn't grow too large */
        margin-left: 40px; /* Adds 40px margin to the left */
        margin-right: 40px; /* Adds 40px margin to the right */
        overflow: auto; /* Add scrollbars if content overflows */
    }

    .sidebar {
        width: 200px; /* Adjust sidebar width on smaller screens */
    }

    .button-container {
        flex-direction: column;
    }

    input[type='submit'], button {
        width: 100%; /* Full width buttons on smaller screens */
        margin: 10px 0; /* Space above and below buttons */
    }
}

/* ... additional responsive styles ... */