@font-face{
    font-family:Shoroq ;
    src: url(../fonts/Shoroq.ttf);
  }
  @font-face{
    font-family:Jannal ;
    src: url(../fonts/Jannal.ttf);
  }
  @font-face{
    font-family:godfather ;
    src: url(../fonts/godfather.ttf);
  }
  @font-face{
    font-family:NotoK ;
    src: url(../fonts/NotoK.ttf);
  }
  @font-face{
    font-family:love ;
    src: url(../fonts/love.ttf);
  }
  @font-face{
    font-family:Qafientola ;
    src: url(../fonts/Qafientola.ttf);
  }
  #message-name{
    font-family: NotoK;
    color: #f9f9f9;
    font-size: 13px;
  }
  @keyframes slidebottom{
   0%{
    transform: translateY(-100%);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }   
}
#site-icon{
background-color: #1c1c21;
 display: flex; 
 justify-content: 
 center; align-items:
  center; height: 100vh;
}
#sal-1{
  font-family: NotoK;
  color: #ededed;
  text-align: right;
  /* margin-right: 0.2em; */
}
#sal-2 {
  text-align: right;
  background: #2386c8;
  border-radius: 5px 5px;
  padding: 0.1em;
  width: 10em;
  direction: rtl;
}    
.edit-profielr{
  color: #2386c8;
  text-align: right;
  font-family: NotoK;
  font-size: 0.89rem;
  padding-top: 0.5rem;
  margin-right: 0.6rem;
}
#pri-es{
  color: #439f2d;
  /* font-size: 14px; */
  font-family: NotoK;
  text-align: right;
}
.img-titlet{
 text-align: center;
 border-radius: 20px 20px 0px 0px;
 padding-top: 10px;
 background-image: url('../img/gg.png');
 background-repeat: no-repeat;
 background-size: cover;
 background-position: center;
}
.img-titlemostkl{
 text-align: center;
 border-radius: 20px 20px 0px 0px;
 padding-top: 10px;
 background-image: url('../img/gg.jpg');
 background-repeat: no-repeat;
 background-size: cover;
 background-position: center;
}
.img-titlet p {
  background: #2386c8;
  padding: 6px 6px;
  color: #f9f9f9;
  /* border-radius: 10px 10px 0px 0px; */
}
#cus-name{
  font-family: NotoK;
  margin-bottom: 0.4rem;
}
.radio-titlet{
  text-align: right;
  font-family: NotoK;
  padding-bottom: 5px;
}
.no-dataa{
  font-family: NotoK;
  text-align: center;
  padding: 0.5rem;
  color: #ffffff;
  /* padding: 3px 5px 0px 4px; */
  background: #414141;
  border-radius: 3px 3px;
}
.d-block{
  text-align: right;
  color: #d7363e;
  font-family: NotoK;
  font-size: 13px;
  padding: 7px 7px;
}
.copyableText{
  text-align: right;
  font-family: NotoK;
  padding: 0.7em;
}
.total-money {
  text-align: center;
  color: #f9f9f9;
  background: #414141;
  font-family:NotoK;
  padding: 7px 7px;
  font-size: 1.1em;
  border-radius:  7px 7px;
}
.total-money b{
  color:#7ac186 ;
}
#founder{
  color: #f9f9f9;
}
.alert-money{
  color: #eb1616;
  padding: 5px 5px;
  font-family: 'NotoK';
  font-size: 12px;
}
.table-new{
  -bs-table-bg: rgba(0, 0, 0, 0);
  --bs-table-striped-color: #6C7293;
  --bs-table-striped-bg: rgba(0, 0, 0, 0.05);
  direction: rtl;
  --bs-table-active-color: #6C7293;
  --bs-table-active-bg: rgba(0, 0, 0, 0.1);
  --bs-table-hover-color: #6C7293;
  --bs-table-hover-bg: rgba(0, 0, 0, 0.075);
  width: 100%;
  margin-bottom: 1rem;
  color: #464343;
  vertical-align: top;
  border-color: #000;
}
.table-new td {
 background: #242424 !important;
 border-bottom: 1px #313131 solid;
}
.status {
  padding: .4rem 0;
  border-radius: 0.2rem;
  text-align: center;
}
.title-moderter{
  color: #dc3545;
}
.status.delivered {
  background-color: #2386c8;
  font-size: 10px;
  color: #ffffff;
  padding: 0.3em;
}.status.deliveredd {
  background-color: #b73434;
  color: #ffffff;
  font-size: 10px;
  /* padding: 0.4em; */
  padding: 0.3em 0.8rem;
  border-radius: 5rem 0rem 0rem 5rem;
}
.form-text{
  color: #eaeaea;
  background-color: #912b2b;
  border-color: #e7d39a;
  font-family: 'NotoK';
  direction: rtl;
  padding: 0.3em 0.8rem;
  margin: 0.4rem;
  border-radius: 1rem;
  font-size: 0.7rem;
}
.client-call{
  margin-top: 0.7em;
}
.client-call a{
  color: #e9e9e9;
  background: green;
  padding: 0 0.6em;
}
.user-posted{
  text-align: right;
  font-family: 'NotoK';
  /* background: #edf0ff; */
  margin-top: 1em;
}
.user-posted b {
 color: #fefefe;
 font-size: 0.7rem;
 /* font-family: Qafientola; */
 /* padding-bottom: 2px; */
 padding-left: 5rem;
 padding-right: 0.2rem;
 background: #2867ce;
 margin-right: 6px;
 S
 border-radius: 0.2em;
 S;
 border-radius: 1rem 1rem 1rem 5rem;
 letter-spacing: 0.2rem;
}
.add-order{
 background: rgb(44 43 43);
 padding: 1.2em;
 font-family:NotoK;
 text-align: center;
 box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.3);
 direction: rtl;
 border-radius: 0.3rem;
}
.content-add-order{

}
.content-add-order h3  {
  margin-bottom: 0.8rem;
  font-family: NotoK;
  color: #dcdcdc;
  font-size: 1.2rem;
}
.content-add-order p a {
 color: #ffffff;
 background-color: rgb(67 152 209);
 padding: 0px 3.5em;
 border-radius: 1rem;
 font-family: 'NotoK';
}
.time-dater{
    text-align: right;
    margin-top: 0.9rem;
    font-family: 'NotoK';
    /* background: #1e1e1e; */
    color: #e1e1e1;
    padding-top: 0.8rem;
    padding-bottom: 0.5rem;
    padding-right: 0.5rem;
    border-bottom: #2386c829 0.1rem solid;
    border-radius: 0.5rem;
}
.time-monasba{
    text-align: right;
    margin-top: 0.5rem;
    font-family: 'NotoK';
    background: #2c2b2b !important;
    color: #e1e1e1;
    padding: 0.5rem;
    margin-bottom: 0.9rem;
    font-size: 0.7rem;
    border-radius: 0px 0px 0px 50px;
    border-bottom: #4398d147 0.1rem solid;
}
.red-alert{
  background: red;
}
.time-mondo{
  background: #2c2b2b !important;
  width: 100%;
  padding: 0.5rem;
  border-radius: 0.4rem;
  text-align: right;
  font-size: 0.75rem;
  margin-bottom: 0.5rem;
}
#copy-icon {
  cursor: pointer;
  margin-left: 10px;
  font-size: 20px;
}
.show-orders{
  text-align: right;
  background: #2c2b2b;
  padding: 0.6rem;
  margin-bottom: 1rem;
  border-radius: 0.4rem;
}
        .steps {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin: 20px 0;
            position: relative;
           
        }
        .steps::before {
            content: "";
            position: absolute;
           
            left: 5%;
            width: 90%;
            height: 2px;
            background: #4398d1
            z-index: 0;
            border-radius: 5px;
        }
        .step {
            width: 30%;
            text-align: center;
            position: relative;
            background: #242424;
            z-index: 1;
        }
        .step i {
            background: #4398d1;
            color: white;
            padding: 0.6rem;
            border-radius: 50%;
            font-size: 20px;
            transition: transform 0.3s ease-in-out;
        }
        .step:hover i {
            transform: scale(1.3) rotate(10deg);
        }
        .step span {
            display: block;
            margin-top: 8px;
            font-size: 11px;
            color: #f9f9f9;
        } 
.block-ipo{
background: #424242;
    color: #d4d4d4;
    padding: 2rem;
    font-size: 1.5rem;
    text-align: center;
}
    .datetype input[type="email"] {
      width: calc(100% - 30px);
      padding: 10px;
      border: 2px solid #ccc;
      border-radius: 5px;
      outline: none;
      transition: 0.3s ease;
  }

  /* حقل صالح */
  .datetype input:valid {
   border-color: #2386c8;
   box-shadow: 0 0 10px rgb(35 134 200 / 35%);
}

/* حقل غير صالح */
.datetype input:invalid {
  border-color: #E74C3C;
  box-shadow: 0 0 10px rgba(231, 76, 60, 0.6);
  animation: shake 0.3s ease-in-out 2;
}

/* حركة الاهتزاز */
@keyframes shake {
  0% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  50% { transform: translateX(5px); }
  75% { transform: translateX(-4px); }
  100% { transform: translateX(0); }
}
      .stars {
        display: inline-block;
        direction: ltr;
    }

    .star {
        color: #ddd;
        position: relative;
        display: inline-block;
    }

    .star.filled {
        color: gold;
    }

    .star.red {
        color: #dc3545
    }

    .star.orange {
        color: orange;
    }