:root {
    --main-bg: #2f3033;
    --main-color: #3b3f42;
    --accent: #3c3f42;
    --text-color: #ffffff;
    --input-bg: #4a4c4f;
    --btn-color: #4672fe;
}

body{
    direction: rtl;
    font-family: "Cairo", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-variation-settings:
    "slnt" 0;
    color: var(--text-color);
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: var(--main-bg);

}

.nav-bar{
  position:sticky;
  top: 0;
  height: 60px;
  width: 100%;
  background: #1d1d1f;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0 10px 0;
  margin-bottom: 20px;
  box-shadow: 0 0 5px 1px #242427;
}
.nav-list{
    margin:  0 10px 0 10px;
}
.nav-list a{
    text-decoration: none;
    font-size: 20px;
    color: rgb(170, 170, 170);
    margin-left: 30px;
}
.nav-list a:hover{
    text-decoration: none;
    color: white;
}
.logout-btn{
  padding: 10px;
}
.logout-btn:hover{
  cursor: pointer;
  background: radial-gradient(circle, #141518, rgba(0, 128, 0, 0));
  border-radius: 20px;
}
.logout-btn img{
  width: 30px;
}


.container{
    width: 95%;
    display: grid;
    grid-template-columns: 50% 50%;

}
@media screen and (max-width: 600px) {
    .container{
        width: 95%;
        display: flex;
        flex-direction: column;
    }
    .order-card {
    background-color: var(--main-color);
    border-radius: 20px;
    box-shadow: 0 0 10px #00000030;
    padding: 20px;
    max-width: 600px;
    min-width: 300px;
    margin: none;
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    }

    .order-info{
      margin: 0;
      display: flex;
      align-items: center;

    }

}   
@media screen and (min-width: 900px) {
    .container{
        width: 95%;
        display: grid;
        grid-template-columns: 30% 30% 30%;

    }
}   
@media screen and (min-width: 1200px) {
    .container{
        width: 95%;
        display: grid;
        grid-template-columns: 25% 25% 25% 25%;

    }
}   

.message{
  color:rgb(173, 173, 173);
  text-align: center;
  font-size: 50px;
  border: solid 1px rgb(173, 173, 173);
  border-radius: 20px;
  padding: 20px;
}

.container_message{
  display: flex;
  align-items: center;
  justify-content: center;

}

.fadeout{
  /* display: none; */
    animation: fadeaway 0.3s forwards;
    opacity: 0;
}
@keyframes fadeaway {
  from {opacity: 1;}
  to {opacity: 0;}
}





/* login */

    .login-container{
        max-width: 300px;
        margin: 100px auto;
        padding: 20px;
        border: 1px solid #ccc;
        border-radius: 8px;
        text-align: center;
        font-family: Arial sans-serif
    }

    .form {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    
    .form input {
        padding: 10px;
        font-size: 16px;
        border-radius: 4px;
        border: 1px solid #ccc;
    }

    .button {
        padding: 10px;
        font-size: 16px;
        border-radius: 4px;
        border: none;
        background-color: #007bff;
        color: white;
        cursor: pointer;
    }
.text-color{
    color: #FFA726;
}



.active{
  color: white !important; 
  text-shadow: 0 0  5px rgb(212, 212, 212);
  font-weight: 600;
}