html {
  font-size: 10px;
}
.row-color-normal {
    background-color: #fffdfd;
}
.row-color-green {
    background-color: yellowgreen;
}
.row-color-blue {
    background-color: blue;
}
.row-color-red {
    background-color: #ffcccc;
    color: black;
}

@media (min-width: 768px) {
  html {
    font-size: 12px;
  }
}

html {
  position: relative;
  min-height: 100%;
}
@font-face {
    /*    font-family: "Cairo", sans-serif;
    font-weight: 700;
    font-style: normal;*/
    /*font-family: 'Cairo', sans-serif;*/
    font-family: 'Rawasi';
    src: url('/fonts/Rawasi.otf') format('woff2'), /* Modern browsers */
    url('/fonts/Rawasi.otf') format('woff'), /* Older browsers */
    url('/fonts/Rawasi.otf') format('truetype'); /* Fallback */
    font-weight: normal; /* Adjust if you have different weights (e.g., 400, 700) */
    font-style: normal; /* Adjust if you have italic, etc. */
    font-display: swap; /* Recommended for performance and user experience */
}


body {
    margin-bottom: 50px;
    font-style: normal;
    font-weight: 400;
    /*   font-family: 'Cairo', sans-serif;*/
    font-family: 'Rawasi', sans-serif;
    font-weight: normal;
    font-style: normal;
}
h1, h2, h3, h4, h5, h6 {
    font-family: 'Rawasi', serif; /* Or sans-serif, depending on your font type */
}
.my-custom-section {
    font-family: 'Rawasi', cursive;
}
/*Custom Style*/
profile-picture{
    height:200px;
    width:200px;
    object-fit:cover;

}
.table-container {
   /* width: 100%;*/
    height: 100%; /* set the desired height */
    overflow-x: auto; /* add scrollbars if needed */
}

.table {
    width: 100%;
    height: 100%;
}

.popup-container {
    direction: rtl;
}

    .popup-container * {
        direction: rtl;
        text-align: center;
    }
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    background-color: rgba(0, 0, 0, 0.5);
}

.loading-message {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    padding: 20px;
    border-radius: 5px;
}

    .loading-message span {
        display: block;
        text-align: center;
    }