Incorrect password
<link href="https://fonts.googleapis.com/css2?family=Tajawal&display=swap" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>

    .breadcrumb-item {
      cursor: pointer;
    }
    
    /* Style page content - use this if you want to push the page content to the right when you open the side navigation */
    body {
      transition: margin-left .5s;
      
    }
    
    /* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
    @media screen and (max-height: 450px) {
      .sidenav {padding-top: 15px;}
      .sidenav a {font-size: 18px;}
    }
    
    @media screen and (max-width: 450px) {
      .sidenav {width: 100%}
      .sidenav a {font-size: 18px;}
    }
         /* Add modern CSS styles here */
    
    body {
      font-family: Tajawal, sans-serif;
      background-color: #f5f5f5;
      margin: 0;
      overflow-x: hidden;
    }
    
    header {
      background-color: #598A86;
      color: #fff;
      padding-top: 10px;
      padding: 10px;
      text-align: center;
      display: flex; 
      justify-content: flex-start; 
      align-items: center;
    }
    
    #header-buttons {
      margin-right: auto;
      display: flex;
    }

    .back-button {
      cursor: pointer;
        padding: 5px 5px 5px 5px;
        border-radius: 5px;
        margin: 5px 5px 5px 5px;
        font-size: 30px;
        background-color: transparent;
        border: none;
    }

    .back-button:hover {
      background-color: white;
    }

    .menu-button,
    .lng_button {
        cursor: pointer;
        padding: 5px 5px 5px 5px;
        border-radius: 5px;
        margin: 5px 5px 5px 5px;
        font-size: 30px;
    }
    
    .menu-button:hover,
    .lng_button:hover{
        background-color: white;
    }
    
    .logout-button {
        cursor: pointer;
        padding: 5px 5px 5px 5px;
        border-radius: 5px;
    }
    
    .logout-button:hover {
        background-color: white;
    }
    
    h1 {
      font-size: 24px;
      margin: 0;
    }
    
    main {
      padding: 20px;
      min-height: 80%;
    }
    
    aside {
      background-color: #fff;
      width: 100%;
      padding-top: 20px;
      padding-bottom: 10px;
      border-right: 1px solid #ccc;
    }
    
    aside h2 {
      font-size: 18px;
      margin: 0 20px 10px 0;
    }
    
    h3 {
        font-size: 14px;
    }

    ul {
      list-style-type: none;
      padding: 0;
      margin: 0;
      margin-left: 10px;
      margin-right: 10px;
    }
    
    .menu-ul {
      //max-height: 200px;
      overflow-y: auto;
    }
    
    .menu-ul::-webkit-scrollbar {
      transition: opacity 0.3s ease-in-out;
    }
    
    li {
      margin-bottom: 5px;
    }
    
    a {
      text-decoration: none;
      color: #333;
      display: block;
      padding: 10px;
      border-radius: 5px;
      transition: background-color 0.3s ease;
    }
    
    a:hover {
      background-color: #f5f5f5;
      color: black;
    }
    
    table {
      width: 100%;
      border-collapse: collapse;
      margin-top: 20px;
      border: 1px solid #ccc;
    }
    
    th, td {
      padding: 10px;
      text-align: center;
      border-bottom: 1px solid #ccc;
    }
    
    th {
      background-color: #333;
      color: #fff;
    }
    
    .expired {
      background-color: #ffcccc;
    }
    
    .input {
        width: 80%;
        height: 40px;
        margin-left: 3%;
    }
    
    .button {
        width: 10%;
        height: 40px;
    }
    
    .employees:hover {
        background-color: white;
        cursor : pointer;
    }
    
    #employee-files {
        display: none;
        margin-top: 20px;
        margin-left:5%;
        margin-right:5%;
        width: 90%;
    }
    
    #files-container {
        margin-top: 10px;
        background-color: #CECECE;
        min-height: 100px;
        width: 100%;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(70px, 100px)); /* ضبط الأعمدة */
        grid-gap: 10px;
        padding: 20px 20px 20px 20px;
    }
    
    .file-element {
        position: relative
    }
    
    .file {
      background-color: #f5f5f5;
      padding: 5px 5px 5px 5px;
      display: flex;
      flex-direction: column;
      justify-content: center; 
      align-items: center;
      border-radius: 5px;
    }
    
    .file:hover {
        background-color: #CECECE;
        cursor: pointer;
    }
    
    .file-icon {
        width: 60px;
        height: 60px;
    }
    
    .trash-badge {
      position: absolute ;
      top: -5px;
      right: -5px;
      width: 25px;
      height: 25px;
      background-color: rgba(0, 0, 0, 0.5); 
      border-radius: 50%; 
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer; 
    }
    
    .trash-badge img {
      width: 60%;
      height: 60%;
    }
    
    .trash-badge:hover {
      background-color: rgba(255, 0, 0, 0.7); /* Red background on hover */
    }

    .back-top {
      position: fixed;
      bottom: 20px;
      right: 20px;
      z-index: 999;
      display: none;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background-color: #333;
      color: #fff;
      text-align: center;
      line-height: 40px;
      font-size: 16px;
      transition: all 0.2s ease-in-out;
    }
    
    .back-top:hover {
      background-color: #ddd;
    }
    
    @media (max-width: 768px) {
      .back-top {
        bottom: 10px;
        right: 10px;
      }
    }

    footer {
      background-color: #333;
      color: #fff;
      padding: 20px;
    }
    
    footer .row {
      margin: 0 auto;
    }
    
    footer a {
      color: white;
      text-decoration: none;
    }
    
    footer a:hover {
      color: #ddd;
    }
    
    :root{
  --primary:#234b6d;
  --primary-dark:#102b44;
  --accent:#12b6a6;
  --gold:#f2c94c;
  --bg:#f4f8fb;
  --card:#ffffff;
  --text:#132337;
  --muted:#607086;
  --border:rgba(19,35,55,.10);
  --shadow:0 20px 60px rgba(16,43,68,.12);
}

body{
  font-family:Tajawal, sans-serif;
  margin:0;
  overflow-x:hidden;
  background:
    radial-gradient(circle at top right, rgba(18,182,166,.16), transparent 34%),
    radial-gradient(circle at 12% 15%, rgba(242,201,76,.18), transparent 28%),
    var(--bg);
  color:var(--text);
  user-select:none;
  -webkit-user-select:none;
}

#main_header{
  position:sticky;
  top:0;
  z-index:999;
  min-height:76px;
  padding:10px 18px;
  background:rgba(244,248,251,.82);
  backdrop-filter:blur(18px);
  border-bottom:1px solid var(--border);
  color:var(--primary-dark);
  display:flex;
  align-items:center;
  gap:14px;
  box-shadow:0 8px 26px rgba(16,43,68,.06);
}

#main_header h1{
  font-size:24px;
  font-weight:900;
  margin:0;
  color:var(--primary-dark);
}

#header-buttons{
  margin-right:auto;
  display:flex;
  align-items:center;
  gap:8px;
}

.back-button,
.menu-button,
.lng_button,
.logout-button{
  width:46px;
  height:46px;
  border-radius:16px;
  border:1px solid var(--border);
  background:white;
  color:var(--primary-dark);
  cursor:pointer;
  display:grid;
  place-items:center;
  transition:.22s;
  box-shadow:0 10px 24px rgba(16,43,68,.06);
}

.back-button{
  font-size:28px;
  padding:0;
}

.back-button:hover,
.menu-button:hover,
.lng_button:hover,
.logout-button:hover{
  transform:translateY(-2px);
  background:linear-gradient(135deg,var(--primary),var(--accent));
  color:white;
}

.menu-button img{
  width:28px;
}

main{
  width:min(1180px, calc(100% - 36px));
  margin:28px auto;
  min-height:80vh;
  padding:0;
}

aside{
  width:min(1180px, calc(100% - 36px));
  margin:22px auto 0;
  background:rgba(255,255,255,.78);
  border:1px solid var(--border);
  border-radius:26px;
  padding:22px;
  box-shadow:0 15px 35px rgba(16,43,68,.06);
}

aside h2{
  margin:0;
  color:var(--primary-dark);
  font-size:22px;
  font-weight:900;
}

table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  margin-top:20px;
  background:white;
  border:1px solid var(--border);
  border-radius:24px;
  overflow:hidden;
  box-shadow:var(--shadow);
}

th{
  background:linear-gradient(135deg,var(--primary),var(--accent));
  color:white;
  padding:16px;
  font-weight:900;
}

td{
  padding:15px;
  text-align:center;
  border-bottom:1px solid var(--border);
  color:var(--text);
}

tr:hover td{
  background:#f7fbfd;
}

.input,
input,
select,
textarea{
  min-height:46px;
  border:1px solid var(--border);
  border-radius:14px;
  padding:0 14px;
  font-family:Tajawal,sans-serif;
  outline:none;
  background:white;
}

input:focus,
select:focus,
textarea:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 4px rgba(18,182,166,.12);
}

.button,
button,
input[type="submit"]{
  border:0;
  border-radius:15px;
  padding:12px 18px;
  font-family:Tajawal,sans-serif;
  font-weight:900;
  background:linear-gradient(135deg,var(--primary),var(--accent));
  color:white;
  cursor:pointer;
  transition:.22s;
}

.button:hover,
button:hover,
input[type="submit"]:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 30px rgba(18,182,166,.22);
}

a{
  color:var(--primary-dark);
  text-decoration:none;
  border-radius:14px;
  transition:.2s;
}

a:hover{
  background:white;
  color:var(--accent);
}

.back-top{
  position:fixed;
  bottom:24px;
  right:24px;
  z-index:999;
  width:48px;
  height:48px;
  border-radius:18px;
  background:linear-gradient(135deg,var(--primary),var(--accent));
  box-shadow:0 15px 35px rgba(16,43,68,.18);
}

footer{
  background:var(--primary-dark);
  color:white;
  padding:22px;
  margin-top:40px;
}

@media(max-width:768px){
  #main_header{
    min-height:68px;
    padding:8px 12px;
  }

  #main_header h1{
    font-size:18px;
  }

  main,
  aside{
    width:calc(100% - 22px);
  }

  table{
    font-size:13px;
    display:block;
    overflow-x:auto;
  }
}
    
</style>
    
<!DOCTYPE html>
<html lang="ar">
<head>
  <meta charset="UTF-8">
  <title>نكسال تكنوليجي</title>
  <link rel="stylesheet" href="style.css">
  <style>
    main {
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 75vh; /* Ensure full viewport height */
      margin: 0; /* Remove default margin */
    }
    form {
      width: 350px;
      margin: 0 auto;
      padding: 20px;
      background-color: #fff;
      border-radius: 5px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }
    
    label {
      display: block;
      font-size: 16px;
      margin-bottom: 5px;
      color: #333;
    }
    
    input {
      display: block;
      width: 100%;
      padding: 10px;
      border: 1px solid #ddd;
      border-radius: 4px;
      font-size: 16px;
      font-family: Tajawal, sans-serif;
    }
    
    input[type="submit"] {
      background-color: #598A86;
      color: #fff;
      padding: 10px 20px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      transition: background-color 0.2s ease-in-out;
    }
    
    input[type="submit"]:hover {
      background-color: #333;
    }
        
  </style>
</head>
<body dir="rtl">
  <header>
    <h1>نكسال تكنوليجي</h1>
    <script>
        document.addEventListener("contextmenu", function(e) {
  e.preventDefault();
});
    </script>
  </header>
  <aside id="menu">
    <h2>اهلا بك من جديد</h2>
  </aside>
  <main>
    <form method="POST">
      <label for="phone_number">رقم الهاتف:</label>
      <input type="text" id="phone_number" name="phone_number">
      <br>
      <label for="password">رمز المرور:</label>
      <input type="password" id="password" name="password">
      <br><br>
      <input type="submit" value="دخول">
    </form>
  </main>
  <script src="script.js"></script>
</body>
</html>