/********Button********

 - basic (multi sizes)
 - outline
 - steps
 - capsule (multi sizes)

**********************/

/* ---- basic ---- */
[class*="btn"],
[class^="btn"]{
  text-transform: capitalize;
  display: inline-block;
  justify-content: center;
  align-items: center;
  text-align: center;
  white-space: nowrap;
  /* min-width: 200px; */
  height: 45px;
  line-height: 45px;
  letter-spacing: 1px;
  padding: 10px 40px;
  font-size: 20px;
  font-weight: 400;
  vertical-align: middle;
  background: #fff;
  color: #161616;
  opacity: .9;

 /* within icon */
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

[class^="btn"]:hover,
[class*="btn"]:hover{
  opacity: 1;
  cursor: pointer;
}

[class^="btn"]:disabled,
[class*="btn"]:disabled,
[class^="btn"].disabled,
[class*="btn"].disabled{
    opacity: 0.5;
    cursor: default;
}

[class*="btn"].lg,
[class^="btn"].lg{
    height: 80px;
    line-height: 80px;
}

[class*="btn"].sm,
[class^="btn"].sm{
  /* width: 150px; */
  height: 30px;
  line-height: 30px;
  font-size: 16px;
}

/* ---- outline ---- */
[class*="btn"].outline,
[class^="btn"].outline{
  border: 1px solid #19231A;
  color: #19231A;
  background: transparent;
}
[class*="btn"].outline-bold,
[class^="btn"].outline-bold{
  border: 2px solid #19231A;
  color: #19231A;
  background: transparent;
}
[class*="btn"].outline > img,
[class^="btn"].outline > img {
    display: inline-block;
    width: 20px; /* Specify the size of the image */
    height: 20px;
}

/* ---- steps function ---- */
[class*="btn"].step,
[class^="btn"].step{
  border: 2px solid #19231A;
  width: 200px;
  max-width: 50%;
  height: 40px;
  line-height: 40px;
  border-radius: 12px;
}

/* ---- capsule shape ---- */
[class*="btn"].capsule,
[class^="btn"].capsule{
  border-radius: 25px;
  padding: 0 30px;
  color: #FFFFFF;
  background: transparent;
}

[class*="btn"].capsule.sm,
[class^="btn"].capsule.sm{
  width: auto;
    height: 40px;
    line-height: 40px;
}

[class*="btn"].capsule.outline,
[class^="btn"].capsule.outline{
  border: 2px solid #19231A;
  color: #19231A;
  background:transparent;
}
/* ---- icon shape ---- */
[class*="btn"].round,
[class^="btn"].round{
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: #FFFFFF;
  background: transparent;
}

[class*="btn"].round.sm,
[class^="btn"].round.sm{
    width: auto;
    height: 30px;
}


.btn>icon {
  display: flex;
}

[class*="btn"].chbox,
[class^="btn"].chbox{
    padding: 10px 20px;
    background: #F2F2F2;
    line-height: 30px;
    font-size: 20px;
    border-radius: 25px;
    color: #19231A;
}
[class*="btn"].chbox.active,
[class^="btn"].chbox.active{
    background: #9747FF;
    color: #fff;
}
[type*="radio"]:checked + .chbox,
[type*="checkbox"]:checked + .chbox{
    background: #9747FF;
    color: #fff;
}

@media screen and (max-width: 1537px) {
  [class*="btn"],
  [class^="btn"] {
    font-size: 18px; /* Adjust font size for smaller screens */
    /* height: 40px; */
  }

  [class*="btn"].sm,
  [class^="btn"].sm {
    font-size: 14px; /* Adjust font size for smaller buttons */
    /* width: 120px; */
     /* Adjust width for smaller buttons */
  }

  [class*="btn"].step,
  [class^="btn"].step {
    width: 150px; /* Adjust width for step buttons */
  }

  [class*="btn"].capsule,
  [class^="btn"].capsule {
    padding: 0 20px; /* Adjust padding for capsule buttons */
  }

  [class*="btn"].chbox,
  [class^="btn"].chbox {
    padding: 8px 16px; /* Adjust padding for checkbox buttons */
    font-size: 18px; /* Adjust font size for checkbox buttons */
  }
}

@media screen and (max-width: 768px) {
  [class*="btn"],
  [class^="btn"] {
    height: 40px;
    line-height: 40px;
  }

  [class*="btn"].sm,
  [class^="btn"].sm {
    /* width: 100%; */
    height: 35px;
    line-height: 35px;

    /* min-width: 50%; */
  }

}