body{
    background-color: #F0F4F9;
}

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

.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
}