/*============================
  9.button
============================*/
.btn-primary {
  color: var(--white-color);
  background-color: var(--primary-color);
  border-color: var(--primary-color);
  font-size: 14px;
  font-size: 14px;
}

.btn-check:checked + .btn,
.btn.active,
.btn.show,
.btn.show:hover,
.btn:first-child:active,
:not(.btn-check) + .btn:active {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
  color: var(--white-color);
}

button {
  cursor: pointer;
}
button:focus {
  outline: 0;
  box-shadow: none;
}

.btn {
  border-radius: 40px;
  padding: 10px 20px;
  font-size: 14px;
  transition: all 0.5s;
  font-weight: 500;
  border: 1px solid var(--primary-color);
}

.btn:focus {
  box-shadow: none !important;
}
.btn:hover {
  transition: all 0.5s;
}
.btn.btn-lg {
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
}
.btn.btn-xl {
  padding: 0.5rem 1rem;
  font-size: 1rem;
}
.btn.btn-sm {
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
}
.btn.btn-md {
  padding: 0.315rem 0.75rem;
  font-size: 0.813rem;
}
.btn.btn-xs {
  padding: 0.25rem 0.5rem;
  font-size: 0.625rem;
}
.btn.btn-primary {
  background-color: var(--primary-color);
  border: 1px solid var(--primary-color);
  color: var(--white-color);
}
/* .btn.btn-primary {
  background-color: var(--primary-light-color);
  border: 1px solid var(--primary-light-color);
  color: var(--white-color);
} */
.btn.btn-primary:hover,
.btn.btn-primary:focus,
.btn.btn-primary.focus,
.btn.btn-primary:active,
.btn.btn-primary.active {
  background-color: #b12c20;
  border: 1px solid #b12c20;
  color: var(--white-color);
}
.btn.btn-secondary {
  background-color: var(--bg-secondry);
  border: 1px solid var(--bg-secondry);
  color: var(--white-color);
}
.btn.btn-secondary:hover,
.btn.btn-secondary:focus,
.btn.btn-secondary.focus,
.btn.btn-secondary:active,
.btn.btn-secondary.active {
  background-color: var(--secondary-color);
  border: 1px solid var(--secondary-color);
  color: var(--white-color);
}
.btn.btn-success {
  background-color: #04bd6c;
  border: 1px solid #04bd6c;
  color: var(--white-color);
}
.btn.btn-success:hover,
.btn.btn-success:focus,
.btn.btn-success.focus,
.btn.btn-success:active,
.btn.btn-success.active {
  background-color: #039a58;
  border: 1px solid #039a58;
  color: var(--white-color);
}
.btn.btn-info {
  background-color: var(--info-color);
  border: 1px solid var(--info-color);
  color: var(--white-color);
}
.btn.btn-info:hover,
.btn.btn-info:focus,
.btn.btn-info.focus,
.btn.btn-info:active,
.btn.btn-info.active {
  background-color: #0e50d2;
  border: 1px solid #0e50d2;
  color: var(--white-color);
}
.btn.btn-teal {
  background-color: var(--teal-color);
  border: 1px solid var(--teal-color);
  color: var(--white-color);
}
.btn.btn-teal:hover,
.btn.btn-teal:focus,
.btn.btn-teal.focus,
.btn.btn-teal:active,
.btn.btn-teal.active {
  background-color: #0b7267;
  border: 1px solid #0b7267;
  color: var(--white-color);
}
.btn.btn-warning {
  background-color: #ffca18;
  border: 1px solid #ffca18;
  color: var(--white-color);
}
.btn.btn-warning:hover,
.btn.btn-warning:focus,
.btn.btn-warning.focus,
.btn.btn-warning:active,
.btn.btn-warning.active {
  background-color: #f3bb00;
  border: 1px solid #f3bb00;
  color: var(--white-color);
}
.btn.btn-danger {
  background-color: #ff0000;
  border: 1px solid #ff0000;
  color: var(--white-color);
}
.btn.btn-danger:hover,
.btn.btn-danger:focus,
.btn.btn-danger.focus,
.btn.btn-danger:active,
.btn.btn-danger.active {
  background-color: #db0000;
  border: 1px solid #db0000;
  color: var(--white-color);
}
.btn.btn-dark {
  background-color: var(--bg-dark);
  border: 1px solid var(--bg-dark);
  color: var(--white-color);
}
.btn.btn-dark:hover,
.btn.btn-dark:focus,
.btn.btn-dark.focus,
.btn.btn-dark:active,
.btn.btn-dark.active {
  background-color: #161e2f;
  border: 1px solid #161e2f;
  color: var(--white-color);
}
.btn.btn-light {
  background-color: #e4ebf1;
  border: 1px solid #e4ebf1;
  color: var(--white-color);
}
.btn.btn-light:hover,
.btn.btn-light:focus,
.btn.btn-light.focus,
.btn.btn-light:active,
.btn.btn-light.active {
  background-color: #ccdae5;
  border: 1px solid #ccdae5;
  color: var(--white-color);
}
.btn.btn-black {
  background-color: #000;
  border: 1px solid #000;
  color: var(--white-color);
}
.btn.btn-black:hover,
.btn.btn-black:focus,
.btn.btn-black.focus,
.btn.btn-black:active,
.btn.btn-black.active {
  background-color: black;
  border: 1px solid black;
  color: var(--white-color);
}
.btn.btn-purple {
  background-color: var(--purple-color);
  border: 1px solid var(--purple-color);
  color: var(--white-color);
}
.btn.btn-purple:hover,
.btn.btn-purple:focus,
.btn.btn-purple.focus,
.btn.btn-purple:active,
.btn.btn-purple.active {
  background-color: #5017ec;
  border: 1px solid #5017ec;
  color: var(--white-color);
}
.btn.btn-pink {
  background-color: var(--pink-color);
  border: 1px solid var(--pink-color);
  color: var(--white-color);
}
.btn.btn-pink:hover,
.btn.btn-pink:focus,
.btn.btn-pink.focus,
.btn.btn-pink:active,
.btn.btn-pink.active {
  background-color: #c01e7c;
  border: 1px solid #c01e7c;
  color: var(--white-color);
}

.btn.btn-primary:hover,
.btn.btn-primary:focus,
.btn.btn-primary.focus,
.btn.btn-primary:active,
.btn.btn-primary.active {
  background-color: var(--bg-dark);
  border: 1px solid var(--bg-dark);
  color: var(--white-color);
}
.btn.btn-light {
  background-color: #e4ebf1;
  border: 1px solid #e4ebf1;
  color: var(--secondary-color);
}
.btn.btn-light:hover,
.btn.btn-light:focus,
.btn.btn-light.focus,
.btn.btn-light:active,
.btn.btn-light.active {
  background-color: #cdd9e4;
  border: 1px solid #cdd9e4;
  color: #393f4d;
}
.btn.btn-white {
  background-color: var(--white-color);
  border-color: var(--white-color);
  color: var(--secondary-color);
}
.btn.btn-white:hover {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
  color: var(--white-color);
}
.btn.btn-linear-primary {
  background-image: linear-gradient(90deg, #fd2692 0%, #0a67f2 100%);
  color: var(--white-color);
  border: 0;
}
.btn.btn-linear-primary:hover {
  background-image: linear-gradient(90deg, #0a67f2 0%, #fd2692 100%);
}

.btn-group .btn {
  padding: 0.45rem 0.75rem;
}

.btn-group-lg .btn {
  padding: 0.65rem 1rem;
}

.btn-group-sm .btn {
  padding: 0.25rem 0.5rem;
}

.btn.btn-w-xs {
  min-width: 5.625rem;
}
.btn.btn-w-sm {
  min-width: 6.975rem;
}
.btn.btn-w-md {
  min-width: 8.125rem;
}
.btn.btn-w-lg {
  min-width: 9.375rem;
}

.btn-icon i {
  padding: 0rem;
  margin: -0.5rem;
}
.btn-icon.btn-sm {
  width: 1.75rem;
  height: 1.75rem;
  font-size: 0.8rem;
}
.btn-icon.btn-lg {
  width: 2.75rem;
  height: 2.75rem;
  font-size: 1.2rem;
}

.btn-list > button,
.btn-list > a {
  margin: 0 0.375rem 0.375rem 0;
}

[dir="rtl"] .btn-list button,
[dir="rtl"] .btn-list div,
[dir="rtl"] .btn-list a,
[dir="rtl"] .btn-list input {
  margin: 0 0 0.375rem 0.375rem;
}

.btn-list {
  margin-block-end: -0.5rem;
}

.btn-square {
  border-radius: 0;
}

.btn-group-pill .btn:first-child {
  border-radius: 60px 0 0 60px;
}

.btn-group-pill .btn:last-child {
  border-radius: 0 60px 60px 0;
}

.btn-group-square .btn:first-child {
  border-radius: 0px 0 0 0px;
}

.btn-group-square .btn:last-child {
  border-radius: 0 0px 0px 0;
}

.btn.btn-primary-light {
  background-color: rgba(207, 52, 37, 0.1);
  color: var(--primary-color);
}
.btn.btn-primary-light:hover,
.btn.btn-primary-light:focus,
.btn.btn-primary-light:active {
  background-color: var(--primary-color);
  color: var(--white-color);
  border-color: var(--primary-color);
}
.btn.btn-secondary-light {
  background-color: rgba(152, 170, 48, 0.1);
  color: var(--bg-secondry);
}
.btn.btn-secondary-light:hover,
.btn.btn-secondary-light:focus,
.btn.btn-secondary-light:active {
  background-color: var(--bg-secondry);
  color: var(--white-color);
  border-color: var(--bg-secondry);
}
.btn.btn-warning-light {
  background-color: rgba(255, 202, 24, 0.1);
  color: #ffca18;
}
.btn.btn-warning-light:hover,
.btn.btn-warning-light:focus,
.btn.btn-warning-light:active {
  background-color: #ffca18;
  color: var(--white-color);
  border-color: #ffca18;
}
.btn.btn-info-light {
  background-color: rgba(21, 94, 239, 0.1);
  color: var(--info-color);
}
.btn.btn-info-light:hover,
.btn.btn-info-light:focus,
.btn.btn-info-light:active {
  background-color: var(--info-color);
  color: var(--white-color);
  border-color: var(--info-color);
}
.btn.btn-success-light {
  background-color: rgba(4, 189, 108, 0.1);
  color: #04bd6c;
}
.btn.btn-success-light:hover,
.btn.btn-success-light:focus,
.btn.btn-success-light:active {
  background-color: #04bd6c;
  color: var(--white-color);
  border-color: #04bd6c;
}
.btn.btn-danger-light {
  background-color: rgba(255, 0, 0, 0.1);
  color: #ff0000;
}
.btn.btn-danger-light:hover,
.btn.btn-danger-light:focus,
.btn.btn-danger-light:active {
  background-color: #ff0000;
  color: var(--white-color);
  border-color: #ff0000;
}

.btn.btn-primary-ghost {
  background-color: transparent;
  color: var(--primary-color);
  border: 1px solid #cf3425;
}
.btn.btn-primary-ghost:active {
  color: var(--primary-color);
  border: 1px solid #cf3425;
  background-color: transparent;
}
.btn.btn-secondary-ghost {
  background-color: transparent;
  color: var(--bg-secondry);
  border: 1px solid var(--bg-secondry);
}
.btn.btn-secondary-ghost:active {
  color: var(--bg-secondry);
  border: 1px solid var(--bg-secondry);
  background-color: transparent;
}
.btn.btn-warning-ghost {
  background-color: transparent;
  color: #ffca18;
  border: 1px solid #ffca18;
}
.btn.btn-warning-ghost:active {
  color: #ffca18;
  border: 1px solid #ffca18;
  background-color: transparent;
}
.btn.btn-info-ghost {
  background-color: transparent;
  color: var(--info-color);
  border: 1px solid var(--info-color);
}
.btn.btn-info-ghost:active {
  color: var(--info-color);
  border: 1px solid var(--info-color);
  background-color: transparent;
}
.btn.btn-success-ghost {
  background-color: transparent;
  color: #04bd6c;
  border: 1px solid #04bd6c;
}
.btn.btn-success-ghost:active {
  color: #04bd6c;
  border: 1px solid #04bd6c;
  background-color: transparent;
}
.btn.btn-danger-ghost {
  background-color: transparent;
  color: #ff0000;
  border: 1px solid #ff0000;
}
.btn.btn-danger-ghost:active {
  color: #ff0000;
  border: 1px solid #ff0000;
  background-color: transparent;
}

.btn-list button {
  margin: 0 0.375rem 0.375rem 0;
}

.btn-outline-primary {
  border: 1px solid #cf3425 !important;
  color: var(--primary-color) !important;
}
.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary.focus,
.btn-outline-primary:active,
.btn-outline-primary.active {
  background-color: var(--primary-color) !important;
  border: 1px solid #cf3425 !important;
  box-shadow: 0 3px 10px rgba(207, 52, 37, 0.5);
  color: var(--white-color) !important;
}

.btn-outline-secondary {
  border: 1px solid var(--bg-secondry) !important;
  color: var(--bg-secondry) !important;
}
.btn-outline-secondary:hover,
.btn-outline-secondary:focus,
.btn-outline-secondary.focus,
.btn-outline-secondary:active,
.btn-outline-secondary.active {
  background-color: var(--bg-secondry) !important;
  border: 1px solid var(--bg-secondry) !important;
  box-shadow: 0 3px 10px rgba(152, 170, 48, 0.5);
  color: var(--white-color) !important;
}

.btn-outline-success {
  border: 1px solid #04bd6c !important;
  color: #04bd6c !important;
}
.btn-outline-success:hover,
.btn-outline-success:focus,
.btn-outline-success.focus,
.btn-outline-success:active,
.btn-outline-success.active {
  background-color: #04bd6c !important;
  border: 1px solid #04bd6c !important;
  box-shadow: 0 3px 10px rgba(4, 189, 108, 0.5);
  color: var(--white-color) !important;
}

.btn-outline-danger {
  border: 1px solid #ff0000 !important;
  color: #ff0000 !important;
}
.btn-outline-danger:hover,
.btn-outline-danger:focus,
.btn-outline-danger.focus,
.btn-outline-danger:active,
.btn-outline-danger.active {
  background-color: #ff0000 !important;
  border: 1px solid #ff0000 !important;
  box-shadow: 0 3px 10px rgba(255, 0, 0, 0.5);
  color: var(--white-color) !important;
}

.btn-outline-warning {
  border: 1px solid #ffca18 !important;
  color: #ffca18 !important;
}
.btn-outline-warning:hover,
.btn-outline-warning:focus,
.btn-outline-warning.focus,
.btn-outline-warning:active,
.btn-outline-warning.active {
  background-color: #ffca18 !important;
  border: 1px solid #ffca18 !important;
  box-shadow: 0 3px 10px rgba(255, 202, 24, 0.5);
  color: var(--white-color) !important;
}

.btn-outline-info {
  border: 1px solid var(--info-color) !important;
  color: var(--info-color) !important;
}
.btn-outline-info:hover,
.btn-outline-info:focus,
.btn-outline-info.focus,
.btn-outline-info:active,
.btn-outline-info.active {
  background-color: var(--info-color) !important;
  border: 1px solid var(--info-color) !important;
  box-shadow: 0 3px 10px rgba(21, 94, 239, 0.5);
  color: var(--white-color) !important;
}

.btn-outline-light {
  border: 1px solid #e4ebf1 !important;
  color: #393f4d !important;
}
.btn-outline-light:hover,
.btn-outline-light:focus,
.btn-outline-light.focus,
.btn-outline-light:active,
.btn-outline-light.active {
  background-color: #e4ebf1 !important;
  border: 1px solid #e4ebf1 !important;
  color: #393f4d !important;
}

.btn-outline-dark {
  border: 1px solid var(--bg-dark) !important;
  color: var(--bg-dark) !important;
}
.btn-outline-dark:hover,
.btn-outline-dark:focus,
.btn-outline-dark.focus,
.btn-outline-dark:active,
.btn-outline-dark.active {
  background-color: var(--bg-dark) !important;
  border: 1px solid var(--bg-dark) !important;
  box-shadow: 0 3px 10px rgba(33, 46, 71, 0.5);
  color: var(--white-color) !important;
}

.btn-soft-primary {
  background-color: #f5b9b0 !important;
  color: var(--primary-color) !important;
}
.btn-soft-primary:hover,
.btn-soft-primary:focus,
.btn-soft-primary.focus,
.btn-soft-primary:active,
.btn-soft-primary.active {
  box-shadow: 0 3px 12px rgba(207, 52, 37, 0.2);
  border-color: var(--primary-color);
}

.btn-soft-secondary {
  background-color: #d4e8c9 !important;
  color: var(--bg-secondry) !important;
}
.btn-soft-secondary:hover,
.btn-soft-secondary:focus,
.btn-soft-secondary.focus,
.btn-soft-secondary:active,
.btn-soft-secondary.active {
  box-shadow: 0 3px 12px rgba(152, 170, 48, 0.2);
  border-color: var(--bg-secondry);
}

.btn-soft-success {
  background-color: #a4ebc4 !important;
  color: #04bd6c !important;
}
.btn-soft-success:hover,
.btn-soft-success:focus,
.btn-soft-success.focus,
.btn-soft-success:active,
.btn-soft-success.active {
  box-shadow: 0 3px 12px rgba(4, 189, 108, 0.2);
  border-color: #04bd6c;
}

.btn-soft-danger {
  background-color: #ffc8bd !important;
  color: #ff0000 !important;
}
.btn-soft-danger:hover,
.btn-soft-danger:focus,
.btn-soft-danger.focus,
.btn-soft-danger:active,
.btn-soft-danger.active {
  box-shadow: 0 3px 12px rgba(255, 0, 0, 0.2);
  border-color: #ff0000;
}

.btn-soft-warning {
  background-color: var(--white-color) 0CA !important;
  color: #ffca18 !important;
}
.btn-soft-warning:hover,
.btn-soft-warning:focus,
.btn-soft-warning.focus,
.btn-soft-warning:active,
.btn-soft-warning.active {
  box-shadow: 0 3px 12px rgba(255, 202, 24, 0.2);
  border-color: #ffca18;
}

.btn-soft-info {
  background-color: rgba(21, 94, 239, 0.3) !important;
  color: var(--info-color) !important;
}
.btn-soft-info:hover,
.btn-soft-info:focus,
.btn-soft-info.focus,
.btn-soft-info:active,
.btn-soft-info.active {
  box-shadow: 0 3px 12px rgba(21, 94, 239, 0.2);
  border-color: var(--info-color);
}

.btn-soft-light {
  background-color: rgba(228, 235, 241, 0.9) !important;
  color: var(--secondary-light-color) !important;
}
.btn-soft-light:hover,
.btn-soft-light:focus,
.btn-soft-light.focus,
.btn-soft-light:active,
.btn-soft-light.active {
  box-shadow: 0 3px 12px rgba(228, 235, 241, 0.2);
  border-color: #e4ebf1;
  border-color: var(--secondary-light-color);
}

.btn-soft-dark {
  background-color: rgba(33, 46, 71, 0.3) !important;
  color: var(--white-color) !important;
}
.btn-soft-dark:hover,
.btn-soft-dark:focus,
.btn-soft-dark.focus,
.btn-soft-dark:active,
.btn-soft-dark.active {
  box-shadow: 0 3px 12px rgba(33, 46, 71, 0.2);
  border-color: var(--bg-dark);
}

.page-loader {
  width: 48px;
  height: 48px;
  border: 4px solid;
  background: rgba(255, 255, 255, 0.2);
  border-color: transparent #cf3425 #cf3425 transparent;
  border-radius: 50%;
  display: inline-block;
  position: relative;
  box-sizing: border-box;
  animation: rotation 1s ease-in-out infinite;
}

.page-loader::after {
  content: "";
  box-sizing: border-box;
  position: absolute;
  inset-inline-start: 50%;
  top: 50%;
  border: 12px solid;
  border-color: transparent var(--bg-secondry) var(--bg-secondry) transparent;
  transform: translate(-50%, -50%);
  border-radius: 50%;
}

@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}