/* ============== COLOR MODE BEGINS ============== */

  .color_mode_container
  {
    display: grid;
    grid-template-columns: 1fr 1fr;   
    gap: 20px;
  }

  .color_mode_wrapper
  {
    padding: 10px;
    border-top: 1px solid var(--card_bg);
    border-bottom: 1px solid var(--card_bg);
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--background_light_dark);
  }


  #dark_btn, #light_btn
  {
    background: none;
    border: 1px solid var(--text_color);
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
  }

  #dark_btn ion-icon, #light_btn ion-icon
  {
    color: var(--text_color);
    font-size: 20px;
  }


  .mode_label
  {
    display: block;
    margin-top: 10px;
  }

  .dark_mode_box, .light_mode_box
  {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  
  .dark_mode_box span, .light_mode_box span
  {
      color: var(--text_color);
      font-size: 9px;
  }


  .active_mode_btn ion-icon
  {
      color: var(--button_fill_color) !important;
  }


  .active_mode_btn
  {
     border: 1px solid var(--button_fill_color) !important;
  }


  .create_site
  {
    text-align: center;
    font-size: 13px;
    color: var(--color_light);
  }

/* ============== COLOR MODE ENDS ============== */