body {
  background-color: #efeff1;
  padding: 0 2%;
  direction: rtl;
  position: relative;
}

body::before {
  content: "";
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: url("/img/logo.jpg") center no-repeat;
  opacity: 0.5;
  /* Set the opacity to make the photo semi-visible */
  z-index: -1;
  /* Place the overlay behind other content */
}

body::after {
  content: "";
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #efeff1;
  /* Fallback background color */
  opacity: 0.5;
  /* Set the opacity for the fallback background color */
  z-index: -1;
  /* Place the fallback background behind other content */
}

.logo {
  width: 100%;
  margin-right: 10%;
}
.table[data-v-321b15f2]{
  text-align: center;
}

.main {
  padding: 3%;
}

.box {
  width: fit-content;
  padding: 5% 2% 6% 2%;
  background: rgba(255, 255, 255, 0.732);
  border-radius: 20px;
  border: black 1px solid;
}

.register {
  width: fit-content;
}

/* .register input,
select {
  width: 100%;
  border-radius: 5px;
} */

.userName {
  margin-right: auto;
}

.sideBar {
  display: flex;
  flex-direction: column;
  padding: 0 2% 5%;
}

.pageContent {
  border-radius: 30px;
  border: black 1px solid;
  background-color: rgba(255, 255, 255, 0.293);
  padding: 5% 2% 5% 2%;
  margin: auto;
  margin-top: 2%;
}

.userData {
  margin: 2% 4%;
  font-size: larger;
}

.page {
  margin: 4% 1%;
}

.lonbtn {
  margin: 2%;
  color: #efeff1;
  background: #C3AF59;
}

.lonbtn:hover {
  color: #efeff1;
  background: #C3AF59;
}

.page:hover {
  color: #C3AF59;
}

.activePage {
  color: #C3AF59;
  font-weight: bold;
}

@media (max-width: 1000px) {
  .sideBar {
    display: flex;
    flex-direction: row;
    border-radius: 30px;
    border: black 1px solid;
    background-color: rgba(255, 255, 255, 0.293);
    padding: 0;
    width: 94%;
    margin: 1% 3%;
  }

  .pageContent{
    margin-top: 25%;
    margin-bottom: 25%;
  }

  .navbar-nav {
    display: flex;
    flex-direction: row;
    /* Align items horizontally */
    list-style: none;
    /* Remove default list styling */
    padding: 0;
    /* Remove default padding */
  }

  .page {
    margin: 0 1% 0 1%;
    width: 60px;
    text-align: center;
  }

  .pageInPhone {
    display: inline;
  }

  .none {
    display: none;
  }
  .pageContent {
    width: 94%;
  }
}