@font-face {
           font-family: myfont;
           src: url("../fonts/GE.ttf") format("truetype");
       }

       * {
           box-sizing: border-box;
           margin: 0;
           padding: 0;
       }

       body {
           background: #f8f8f8;
           min-height: 100vh;
           direction: rtl;
           font-family: myfont !important;
       }

       .header {
           background: linear-gradient(to right, #2c3e50, #2980b9);
           padding: 1.5rem;
           text-align: center;
           box-shadow: 0 2px 4px rgba(0,0,0,0.1);
       }

     
       .header-logo {
           display: block;
           max-width: 100%;
           height: auto;
           margin: 0 auto 1.2rem; 
           position: relative;
           z-index: 2;
           filter: brightness(0) invert(1);
       }

       .header-text {
           clear: both;
       }

       .header-text h1 {
           color: #fff;
           font-size: 1rem;
           margin-bottom: 0.5rem;
       }

       .header-text h3 {
           color: #e0e0e0;
           font-size: 1.2rem;
           margin: 0.3rem 0;
           font-weight: normal;

       }

       .widget-box {
           background: #fff;
           border-radius: 8px;
           box-shadow: 0 2px 15px rgba(0,0,0,0.1);
           margin: 2rem auto;
           max-width: 800px;
           padding: 2rem;
       }

       .widget-title {
           border-bottom: 2px solid #2980b9;
           margin-bottom: 1.5rem;
           padding-bottom: 1rem;
       }

       .widget-title .lbl {
           color: #2c3e50;
           font-size: 1.5rem;
           margin: 0;
       }

       .control-group {
           margin-bottom: 1.5rem;
       }

       .control-label {
           display: block;
           color: #2c3e50;
           font-size: 1.1rem;
           margin-bottom: 0.5rem;
       }

       .span11 {
           width: 100%;
           padding: 0.8rem;
           border: 2px solid #ddd;
           border-radius: 6px;
           font-size: 1rem;
           transition: border-color 0.3s;
       }

       .span11:focus {
           border-color: #2980b9;
           outline: none;
       }

       .DropDownList1 {
           width: 100%;
           padding: 0.8rem;
           border: 2px solid #ddd;
           border-radius: 6px;
           background: #fff;
           font-size: 1rem;
       }

       .btn-success {
           background: linear-gradient(to right, #2c3e50, #2980b9);
           color: #fff !important;
           padding: 1rem 2rem;
           border: none;
           border-radius: 6px;
           font-size: 1.2rem;
           cursor: pointer;
           transition: opacity 0.3s;
           font-family: myfont !important;
       }

       .btn-success:hover {
           opacity: 0.9;
       }

       .RequiredFieldValidator {
           color: #e74c3c;
           font-size: 0.9rem;
           margin-top: 0.3rem;
           display: block;
       }

       @media (max-width: 768px) {
           .widget-box {
               margin: 1rem;
               padding: 1rem;
           }

       
           .header-logo {
               max-width: 100%;
               height: auto;
           }

           .header-text {
               text-align: center;
               margin-top: 1rem;
           }

           .header-text h1 {
               font-size: 1.4rem;
           }

           .btn-success {
               width: 100%;
           }
       }

       @media (max-width: 480px) {
           .span11, .DropDownList1 {
               font-size: 0.9rem;
               padding: 0.6rem;
           }

           .control-label {
               font-size: 1rem;
           }
       }

       .footer {
           background: linear-gradient(to right, #2c3e50, #2980b9);
           padding: 1.5rem;
           text-align: center;
           color: #fff;
           margin-top: auto;
           font-size: 1.1rem;
           line-height: 1.6;
           box-shadow: 0 -2px 4px rgba(0,0,0,0.1);
       }

       .footer div {
           margin: 0.5rem 0;
       }

       @media (max-width: 768px) {
           .footer {
               font-size: 1rem;
               padding: 1rem;
           }
       }
       .loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: #ffffff; /* خلفية بيضاء */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    transition: opacity 0.75s, visibility 0.75s;
}

.loader--hidden {
    opacity: 0;
    visibility: hidden;
}

.dot-loader {
    display: flex;
    gap: 10px;
}

.dot-loader div {
    width: 18px;
    height: 18px;
    background-color: #2a6c99; /* أزرق أنيق */
    border-radius: 50%;
    animation: bounce 0.6s infinite alternate ease-in-out;
}

.dot-loader div:nth-child(2) {
    animation-delay: 0.15s;
}

.dot-loader div:nth-child(3) {
    animation-delay: 0.3s;
}

@keyframes bounce {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-12px);
    }
}