body {
    background-color: #f0f4f9;
  }
  
  @media (max-width: 575px) {
    body {
      background-color: white; /* Replace #COLOR with the desired background color for small screens */
    }
  }
  
  #admin-avatar {

    background-color: #E9EEF6 !important;
}
/* Designing the avatar start */
#admin-avatar {
    width: 350px !important;
}

.blue-bg-hover:hover {
    background-color: #E3ECFA;
}

.text-blue-light {
    color: #041E49;
}

.cursor-pointer {
    cursor: pointer !important;
}

/* .input-border {
    border: 2px solid !important;
} */

.input-border {
    /* border: 2px solid #041E49 !important; */
    border: 1px solid #041E49 !important;
}

.input-border:active {
    /* border: 2px solid #041E49 !important; */
    box-shadow: 0px 0px 4px 1px #041E49 !important;
}
.input-border:focus {
    /* border: 2px solid #041E49 !important; */
    box-shadow: 0px 0px 4px 1px #041E49 !important;
}

.reg-btn-pg {
    background-color: #041E49 !important;
    color: #fff;
  }


.text-blue-light {
    color: #041E49;
}

.text-blue-light:focus {
    color: #041E49;
}

.blue-text {
    color: #475B7E !important;
}

.custom-bg-info {
    background-color: #FBFDFF !important;
    color: #00254D !important;
}
.custom-bg-info-brder {
    border: 1px solid #B7D9F8 !important;
}

.custom-text-info{
    color: #0091FF !important;
}

.blue-dark-light {
    color: #3F4654 !important;
}



  .mycard-bg {
    background: white;
  }
  
  #info-btn {
    font-size: 15px;
    color: #0e4eb3;
    cursor: pointer;
  }
  
  .meduim-font-size {
    font-size: 15px;
  }
  
  .uni-btn-bg {
    background-color: #138154;
    color: white;
  }
  .uni-btn-bg:hover {
    background-color: #138154;
    color: white;
  }
  .uni-btn-bg:focus {
    background-color: #138154;
    color: white;
  }
  .uni-btn-bg:active {
    background-color: #138154 !important;
    color: white !important;
  }
  
  #info-text {
    display: none;
  }
  
  /* progress bar ============================ start */
  #my-overlay {
    position: fixed; /* Cover the entire viewport */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.5); /* Semi-transparent black */
    z-index: 10; /* Ensure it's above other content but below the progress bar */
    display: none;
  }
  
  /* Adjusted to top */
  /* position: fixed;
    top: 0; 
    left: 0; */
  
  .my-progress-container {
    width: 100%; /* Full width */
    z-index: 20; /* Above the overlay */
    display: none;
  }
  
  .my-progress-bar {
    width: 0;
    height: 3px; /* Adjust the height as needed */
    background-color: #386bc0;
    animation: loading 1s infinite linear;
  }
  
  .progress-container {
    display: none; /* Ensures it's hidden by default */
    /* other styles */
  }
  /* Animation to fill the progress bar */
  @keyframes loading {
    0% {
      width: 0;
    }
    100% {
      width: 100%;
    } /* This is where the animation loops back to 0% */
  }
  
  /* progress bar ============================ start */
  
  /* result sections style  =================================== start*/
  .result-card {
    background-color: #e9eef6;
  }
  
  #my-user-icon {
    font-size: 40px;
  }
  
  #list-info {
    width: 18em;
  }
  
  .card-button-btns {
    width: 20em;
  }
  
  #result-section {
    display: none;
  }
  
  #graduated-status,
  #learning-status {
    display: none;
  }
  
  .number-btns {
    background-color: #ececec;
  }
  .number-btns:hover {
    background-color: #ececec;
  }
  
  .backspace-btn {
    background-color: #ececec;
  }
  .backspace-btn:hover {
    background-color: #ececec;
  }
  /* result sections style  =================================== end*/
  
  @media (max-width: 575px) {
    #search-field {
      /* #f0f0f0 */
      background-color: white; /* Light grey background to simulate disabled appearance */
      color: #ccc; /* Optional: change the text color to make it look "disabled" */
      border: 1px solid #ccc; /* Optional: change the border color */
      cursor: not-allowed; /* Changes the cursor to indicate the field is not interactive */
    }
  }
  
  .assist_btn:hover {
    background-color: #0055ff0e;
  }