/* password view */
  .password_eye {position: relative; }
  .icon-view {position: absolute; right: 15px; top: 10px; color: #202020; font-size: 12px}

  /* Define the size and shape of the checkbox */
  input[type="checkbox"] {
    position: relative;
    width: 20px; /* adjust size as needed */
    height: 20px; /* adjust size as needed */
    appearance: none; /* remove default checkbox appearance */
    border: none; /* remove default checkbox border */
    outline: none; /* remove focus outline */
    background-color: #fff; /* set background color */
    /* remove border-radius property */
  }

  /* Define the appearance of the unchecked checkbox */
  input[type="checkbox"]:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto; /* center vertically and horizontally */
    width: 16px; /* set size of the square */
    height: 16px; /* set size of the square */
    border: 1px solid #000; /* set default border color and thickness */
    /* remove border-radius property */
  }

  /* Define the appearance of the checked checkbox */
  input[type="checkbox"]:checked:before {
    content: "\f00c";
    color: var(--color);
    font-family: "Font Awesome 5 Free";
    font-weight: 600;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto; /* center vertically and horizontally */
    font-size: 15px;
    line-height: 1; /* add this line to adjust line height */
    border: 1px solid var(--color); /* set border color for checked state */
  }

  #example_wrapper, .card-body {
    overflow: hidden;
  }