@import url('https://fonts.googleapis.com/css2?family=Playfair+Display+SC&family=Tajawal:wght@500&display=swap');

:root{
    --golden-color:white;
}
body{
    direction: rtl;
    font-family: 'Playfair Display SC', serif;
font-family: 'Tajawal', sans-serif;
}
.page-tab{
    background-color: var(--golden-color);
    width: 70%;
    margin: 0 auto;
    border-radius: 20px;
    text-align: center;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}
.page-tab a{
text-decoration: none;
color: black;
}
.page-tab h2{
    font-size: 30px;
    color: teal;
}
.tab-title{
    font-size: 24px;
    color: #0c0c0c !important;
}
.golden-color{
    color: var(--golden-color);
}
.search-div{
    width: 50%;
    margin:  0 auto;
}
.input-group-text{
    background-color: transparent !important;
}
.table-title{
    font-size: 18px;
    font-weight: 600;
}
.table-img{
    width: 50px;
    height: 50px;
}
.table-head {
    background-color: var(--golden-color);

    border: 1px solid black;
 
}
.table-first-header{
    width: 60%;
    margin: 0 auto;
}
.daily-attendance-header{
    width: 60%;
    margin: 0 auto;
}
.daily-attendance-head{
    position: relative;
}
.daily-attendance-head::before{
    top: 25%;
    position: absolute;
    right: -25px;
    content: "";
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-right: 15px solid #555;
    border-bottom: 10px solid transparent;
}
.daily-attendance-head2{
    position: relative;
}
.daily-attendance-head2::before{
    top: 25%;
    position: absolute;
    right: -25px;
    content: "";
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-right: 15px solid #555;
    border-bottom: 10px solid transparent;
}
.date-input{
    border: 1px solid var(--golden-color);
  
}
.billing-info{
    border: 2px solid black;
    border-radius: 15px;
    position: relative;
margin-top: 30px;
}
.billing-info-head{
    background-color: var(--golden-color);
    text-align: center;
    border-radius: 25px 25px 0px 0px;
    position: absolute;
    top:-55%;
    right: 25px;
}
.attach-img{
    background-color: var(--golden-color);
    text-align: center;
    border-radius: 0px 0px 25px 25px;
}
.gray-row{
    background-color: rgb(208, 208, 208);
  }
  .convenent-data{
    width: 60%;
  }
  .label-width{
    width: 30%;
  }
  .input-width{
    width: 60%;
  } 
  .input-width2{
    width: 25%;
  }
@media only screen and (max-width: 600px) {
    .search-div{
        width: 100%;
        margin:  0 auto;
    }
    .convenent-data{
        width: 100%;
      }
      .label-width{
        width: 50%;
      }
      .input-width{
        width: 50%;
      }
      .input-width2{
        width: 75%;
      }
  }
  .reward-form{
    background-color: rgb(229, 229, 229);
    border-radius: 20px;
  }
  .btn-golden{
    background-color: var(--golden-color);
    font-weight: bold;
  }
  .golden-choice {
    background-color: var(--golden-color);
  }
  .choice{
    text-decoration: none;
    color: black;
  }
  .choice:hover{
color: white ;
  }
  .btn-add{
    border-radius: 0px 0px 25px 25px;
  }
  .recipt-img{
    width: 50px;
    height: 50px;
  }
  .icon {
    font-size: 96px;
    font-variation-settings: 'OPSZ' 96, 'FILL' 0.0;
      
    
  }
  
  #f { display: none; }
  
  @keyframes hithere {
    30% { transform: scale(1.2); }
    40%, 60% { transform: rotate(-20deg) scale(1.2); }
    50% { transform: rotate(20deg) scale(1.2); }
    70% { transform: rotate(0deg) scale(1.2); }
    100% { transform: scale(1); }
  }
  
  @keyframes bounce {
      0% { transform:translateY(0%); }
      20% { transform:translateY(-15%); }
      40% { transform:translateY(0%); }
      50% { transform:translateY(-7%); }
      70% { transform:translateY(0%); }
      90% { transform:translateY(-3%); }
      100% { transform:translateY(0); }
  }
.label-align{
    text-align: end;
}