/* Copy Animation */

.copyInput {
  display: inline-block;
  line-height: 50px;
  position: absolute;
  top: 0;
  right: 0;
  width: 40px;
  text-align: center;
  font-size: 14px;
  cursor: pointer;
  -webkit-transition: all .3s;
  -o-transition: all .3s;
  transition: all .3s;
}

.copied::after {
  position: absolute;
  top: 8px;
  right: 12%;
  width: 100px;
  display: block;
  content: "COPIED";
  font-size: 1em;
  padding: 5px 5px;
  color: #fff;
  background-color: #FF7000;
  border-radius: 3px;
  opacity: 0;
  will-change: opacity, transform;
  animation: showcopied 1.5s ease;
}

@keyframes showcopied {
  0% {
    opacity: 0;
    transform: translateX(100%);
  }

  50% {
    opacity: 0.7;
    transform: translateX(40%);
  }

  70% {
    opacity: 1;
    transform: translateX(0);
  }

  100% {
    opacity: 0;
  }
}




.cookies-card {
  width: 520px;
  padding: 30px;
  color: #1E2337;
  position: fixed;
  bottom: 15px;
  left: 15px;
  z-index: 999999;
  transition: all .5s;
  background: #d1d1d1;
  border-radius: 5px;
}

.cookies-card.hide {
  bottom: -500px !important;
}

.radius--10px {
  border-radius: 10px;
}

.cookies-card__icon {
  width: 55px;
  height: 55px;
  border-radius: 50%;
  background-color: #6e6f70;
  color: #fff;
  font-size: 32px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

.cookies-card__content {
  margin-bottom: 0;
}

.cookies-btn {
  color: #363636;
  text-decoration: none;
  padding: 10px 35px;
  margin: 3px 5px;
  display: inline-block;
  border-radius: 999px;
}

.cookies-btn:hover {
  color: #363636;
}


@media (max-width: 767px) {
  .cookies-card {
    width: 100%;
    left: 0;
    bottom: 0;
    font-size: 14px;
    padding: 15px;
  }
}




.hover-input-popup {
  position: relative;
}

.input-popup {
  display: none;
}

.hover-input-popup .input-popup {
  display: block;
  position: absolute;
  bottom: 130%;
  left: 50%;
  width: 280px;
  background-color: #1a1a1a;
  color: #fff;
  padding: 20px;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

.input-popup::after {
  position: absolute;
  content: '';
  bottom: -19px;
  left: 50%;
  margin-left: -5px;
  border-width: 10px 10px 10px 10px;
  border-style: solid;
  border-color: transparent transparent #1a1a1a transparent;
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}

.input-popup p {
  padding-left: 20px;
  position: relative;
}

.input-popup p::before {
  position: absolute;
  content: '';
  font-family: 'Line Awesome Free';
  font-weight: 900;
  left: 0;
  top: 4px;
  line-height: 1;
  font-size: 18px;
}

.input-popup p.error {
  text-decoration: line-through;
}

.input-popup p.error::before {
  content: "\f057";
  color: #ea5455;
}

.input-popup p.success::before {
  content: "\f058";
  color: #28c76f;
}



.show-filter {
  display: none;
}

@media(max-width:767px) {
  .responsive-filter-card {
    display: none;
    transition: none;
  }

  .show-filter {
    display: block;
  }
}


.loader-wrapper {
  position: absolute;
  z-index: 9;
  background-color: rgba(255, 255, 255, 0.596);
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: grid;
  place-items: center;
}

.loader-pre {
  display: inline-block;
  width: 80px;
  height: 80px;

}

.loader-pre:after {
  content: " ";
  display: block;
  width: 64px;
  height: 64px;
  margin: 8px;
  border-radius: 50%;
  border: 6px solid rgb(var(--base));
  border-color: rgb(var(--base)) transparent rgb(var(--base)) transparent;
  animation: loader 1.2s linear infinite;
}

@keyframes loader {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}


label.required:after {
	content: "*";
	color: #dc3545 !important;
	margin-left: 2px;
	font-weight: 200;
}


:root {
  --heading-font: "Jost", sans-serif;
  --body-font: "Roboto", sans-serif;
  --heading: 0 0% 100%;
  --body: 0 0% 71%;
  --text-color: #212121;
  --border: 227 14% 19%;
  --border-one: #494d59;
  --border-two: #757575;
  --primary-bg: #1b2030;
  --section-common-bg: #121622;
  --section-bg-one: #222838;
  --section-bg-two: #242a3c;

  --bg-: #242a3c;
  --base-h: 31;
  --base-s: 68%;
  --base-l: 38%;
  --base: var(--base-h) var(--base-s) var(--base-l);
  --base-100: var(--base-h) var(--base-s) calc(var(--base-l) + 20%);
  --base-200: var(--base-h) var(--base-s) calc(var(--base-l) + 15%);
  --base-300: var(--base-h) var(--base-s) calc(var(--base-l) + 10%);
  --base-400: var(--base-h) var(--base-s) calc(var(--base-l) + 5%);
  --base-600: var(--base-h) var(--base-s) calc(var(--base-l) - 8%);
  --base-700: var(--base-h) var(--base-s) calc(var(--base-l) - 10%);
  --base-800: var(--base-h) var(--base-s) calc(var(--base-l) - 15%);
  --base-900: var(--base-h) var(--base-s) calc(var(--base-l) - 20%);

  --accent-h: 59;
  --accent-s: 90%;
  --accent-l: 77%;
  --accent: var(--accent-h) var(--accent-s) var(--accent-l);
  --accent-50: var(--accent-h) var(--accent-s) calc(var(--accent-l) + 25%);
  --accent-100: var(--accent-h) var(--accent-s) calc(var(--accent-l) + 20%);
  --accent-200: var(--accent-h) var(--accent-s) calc(var(--accent-l) + 15%);
  --accent-300: var(--accent-h) var(--accent-s) calc(var(--accent-l) + 10%);
  --accent-400: var(--accent-h) var(--accent-s) calc(var(--accent-l) + 5%);
  --accent-600: var(--accent-h) var(--accent-s) calc(var(--accent-l) - 5%);
  --accent-700: var(--accent-h) var(--accent-s) calc(var(--accent-l) - 10%);
  --accent-800: var(--accent-h) var(--accent-s) calc(var(--accent-l) - 15%);
  --accent-900: var(--accent-h) var(--accent-s) calc(var(--accent-l) - 20%);
  --light-h: 148;
  --light-s: 0%;
  --light-l: 95%;
  --light: var(--light-h) var(--light-s) var(--light-l);
  --light-50: var(--light-h) var(--light-s) calc(var(--light-l) + 33%);
  --light-100: var(--light-h) var(--light-s) calc(var(--light-l) + 20%);
  --light-200: var(--light-h) var(--light-s) calc(var(--light-l) + 15%);
  --light-300: var(--light-h) var(--light-s) calc(var(--light-l) + 10%);
  --light-400: var(--light-h) var(--light-s) calc(var(--light-l) + 2%);
  --light-600: var(--light-h) var(--light-s) calc(var(--light-l) - 2%);
  --light-700: var(--light-h) var(--light-s) calc(var(--light-l) - 10%);
  --light-800: var(--light-h) var(--light-s) calc(var(--light-l) - 15%);
  --light-900: var(--light-h) var(--light-s) calc(var(--light-l) - 20%);
  --primary: 245 82% 67%;
  --secondary: 210 7% 56%;
  --success: 147 67% 47%;
  --danger: 360 78% 62%;
  --warning: 29 100% 63%;
  --info: 200 90% 53%;
  --dark: 206 70% 11%;
  --white: 0 0% 100%;
}

.bg--base {
	background-color: rgb(var(--base)) !important;
}

.table--form {
	width: 50%;
}

@media (max-width: 768px) {
	.table--form {
		width: 100%;
	}
}

.input-group-text {
	background: #f4f4f4;
}

.input-group-text {
	border-color: #f4f4f4;
}

.input-group>select {
	position: relative;
	flex: 1 1 auto;
	width: 1%;
	min-width: 0;
}

.input-group select {
	background-color: transparent;
	border: none;
}


.form--control
{
	height: 50px;
	border-radius: 5px;
	border: 1px solid rgb(var(--base));
	outline: 0;
	box-shadow: none;
	color: rgb(var(--body));
}


.form--control:focus
{
	color: rgb(var(--body));
	border: 1px solid rgb(var(--base));
	outline: 0;
	box-shadow: none;
}

.form--control.style-two {
	border: 0;
	background: rgb(var(--base) / 0.1);
}

/* Hylpgold Steyle */

.transection__table {
  background-size: content;
  background-repeat: no-repeat;
  background-position: center center;
}


.table {
  margin: 0;
  font-size: 15px;
  background-color: transparent;
  box-shadow: 0 0 8px hsl(var(--base) / 0.06);
  border-radius: 10px;
  border-collapse: separate;
  border-spacing: 0px;
}

.table thead tr th {
  background: #121622;
  font-size: 18px;
  padding: 15px 35px;
  color: hsl(var(--white));
  font-family: var(--heading-font);
  font-weight: 700;
  border-top: 2px solid hsl(var(--base));
  border-bottom: 2px solid hsl(var(--base));
  position: relative;
  overflow: 0.3;
}

.table thead tr th::before {
  position: absolute;
  content: "";
  background: linear-gradient(
    180deg,
    hsl(var(--base)) 5.48%,
    hsl(var(--accent)) 59.04%,
    hsl(var(--base)) 107.63%
  );
  width: 2px;
  height: 88%;
  top: 4px;
  left: 0px;
}

.table thead tr th:first-child {
  text-align: left;
  border-radius: 20px 0 0 0;
  border-left: 2px solid hsl(var(--base));
}

.table thead tr th:first-child:before {
  display: none;
}

.table thead tr th:last-child {
  border-radius: 0 20px 0 0;
  border-right: 2px solid hsl(var(--base));
}

@media (max-width: 1399px) {
  .table thead tr th {
    padding: 15px 15px;
  }
}

.table tbody tr {
  border: 1px solid hsl(var(--base));
}

.table tbody tr:last-child td {
  border-bottom: 2px solid hsl(var(--base));
}

.table tbody tr:last-child td:first-child {
  border-radius: 0 0 0 20px;
}

.table tbody tr:last-child td:last-child {
  border-radius: 0 0 20px 0;
}

.table tbody tr td {
  vertical-align: middle;
  padding: 15px 15px;
  border-width: none;
  border-color: rgba(255, 255, 255, 0.1);
  font-family: var(--heading-font);
  border-bottom: 1px solid hsl(var(--border));
  color: hsl(var(--body));
  font-weight: 500;
}

@media (max-width: 1399px) {
  .table tbody tr td {
    padding: 10px;
  }
}

.table tbody tr td i {
  margin-right: 2px;
}

.table tbody tr td .gateway p {
  color: hsl(var(--body));
  font-size: 18px;
  font-weight: 500;
}

.table tbody tr td .date {
  color: hsl(var(--body));
  font-size: 18px;
  font-weight: 500;
}

.table tbody tr td .amount {
  color: hsl(var(--body));
  font-size: 18px;
  font-weight: 500;
}

.table tbody tr td::before {
  content: attr(data-label);
  font-family: var(--heading-font);
  font-size: 15px;
  color: hsl(var(--heading));
  font-weight: 500;
  display: none;
}

.table tbody tr td:first-child {
  text-align: left;
  border-left: 2px solid hsl(var(--base));
}

.table tbody tr td:last-child {
  border-right: 2px solid hsl(var(--base));
}

@media (max-width: 767px) {
  .table--responsive--md thead {
    display: none;
  }

  .table--responsive--md tbody tr {
    display: block;
    border-bottom: none;
  }

  .table--responsive--md tbody tr:last-child {
    border-bottom: 1px solid hsl(var(--base));
  }

  .table--responsive--md tbody tr:last-child td {
    border-bottom: 1px solid hsl(var(--border));
  }

  .table--responsive--md tbody tr td {
    display: flex;
    align-items: center;
    gap: 35px;
    text-align: left;
    padding: 10px 15px;
    justify-content: space-between;
    border-bottom: 1px solid hsl(var(--border));
  }
}

@media (max-width: 767px) and (max-width: 991px) {
  .table--responsive--md tbody tr td {
    font-size: 14px !important;
  }
}

@media (max-width: 767px) and (max-width: 767px) {
  .table--responsive--md tbody tr td {
    gap: 10px;
  }
}

@media (max-width: 767px) {
  .table--responsive--md tbody tr td::before {
    display: block;
  }
}

@media (max-width: 767px) {
  .table--responsive--md tbody tr td:first-child {
    text-align: left;
    border-left: none;
    border-radius: 0px !important;
  }
}

@media (max-width: 767px) {
  .table--responsive--md tbody tr td:last-child {
    text-align: left;
    border-right: none;
    border-bottom: none !important;
    border-radius: 0px !important;
  }
}

@media (max-width: 991px) {
  .table--responsive--lg thead {
    display: none;
  }

  .table--responsive--lg tbody tr {
    display: block;
  }

  .table--responsive--lg tbody tr td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 35px;
    text-align: right;
    padding: 10px 15px;
    border: none;
    border-bottom: 1px solid hsl(var(--border));
  }
}

@media (max-width: 991px) and (max-width: 991px) {
  .table--responsive--lg tbody tr td {
    font-size: 14px !important;
  }
}

@media (max-width: 991px) {
  .table--responsive--lg tbody tr td:last-child {
    border: none;
  }
}

@media (max-width: 991px) {
  .table--responsive--lg tbody tr td::before {
    display: block;
  }
}

@media (min-width: 992px) {
  .table--responsive--lg tbody tr td {
    border: none;
  }
}

@media (max-width: 1199px) {
  .table--responsive--xl thead {
    display: none;
  }

  .table--responsive--xl tbody tr {
    display: block;
    border-bottom: none;
  }

  .table--responsive--xl tbody tr:last-child {
    border-bottom: 1px solid hsl(var(--base));
  }

  .table--responsive--xl tbody tr:last-child td {
    border-bottom: 1px solid hsl(var(--border));
  }

  .table--responsive--xl tbody tr td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 35px;
    text-align: right;
    padding: 10px 15px;
    border: none;
    border-bottom: 1px solid hsl(var(--border));
  }
}

@media (max-width: 1199px) and (max-width: 991px) {
  .table--responsive--xl tbody tr td {
    font-size: 14px !important;
  }
}

@media (max-width: 1199px) {
  .table--responsive--xl tbody tr td:first-child {
    text-align: left;
    border-left: none;
    border-radius: 0px !important;
  }
}

@media (max-width: 1199px) {
  .table--responsive--xl tbody tr td:last-child {
    text-align: left;
    border-right: none;
    border-bottom: none !important;
    border-radius: 0px !important;
  }
}

@media (max-width: 1199px) {
  .table--responsive--xl tbody tr td::before {
    display: block;
  }
}

@media (min-width: 1200px) {
  .table--responsive--xl tbody tr td {
    border: 0;
  }
}

.custom--card {
	border: 1px solid transparent;
	border-radius: 5px;
	box-shadow: 0 0px 5px 0px hsl(var(--dark) / 0.08);
}

.card-header .card-title {
	color: hsl(var(--dark));
}

.custom--card .card-header,
.custom--card .card-footer {
	background: #ffff;
	color: hsl(var(--dark)) !important;
	text-align: center;
}

.custom--card .card-header .title,
.custom--card .card-footer .title {
	color: hsl(var(--dark)) !important;
	margin: 0;
}

.custom--card.card--primary .card-header,
.custom--card.card--primary .card-footer {
	background: rgb(var(--base));
}

.custom--card .card-header,
.custom--card .card-footer {
	padding: 15px 25px;
	border-color: hsl(var(--border)) !important;
}

@media (max-width: 575px) {

	.custom--card .card-header,
	.custom--card .card-footer {
		padding: 10px 20px;
	}
}

@media (max-width: 575px) {

	.custom--card .card-header,
	.custom--card .card-footer {
		padding: 8px 15px;
	}
}

.custom--card .card-body {
	padding: 25px;
}

@media (max-width: 575px) {
	.custom--card .card-body {
		padding: 20px;
	}
}

@media (max-width: 450px) {
	.custom--card .card-body {
		padding: 15px;
	}
}

.custom--card.card--lg .card-header,
.custom--card.card--lg .card-footer {
	padding: 20px 35px;
}

@media (max-width: 767px) {

	.custom--card.card--lg .card-header,
	.custom--card.card--lg .card-footer {
		padding: 15px 25px;
	}
}

@media (max-width: 575px) {

	.custom--card.card--lg .card-header,
	.custom--card.card--lg .card-footer {
		padding: 10px 20px;
	}
}

@media (max-width: 450px) {

	.custom--card.card--lg .card-header,
	.custom--card.card--lg .card-footer {
		padding: 8px 15px;
	}
}

.custom--card.card--lg .card-body {
	padding: 35px;
}

@media (max-width: 767px) {
	.custom--card.card--lg .card-body {
		padding: 25px;
	}
}

@media (max-width: 575px) {
	.custom--card.card--lg .card-body {
		padding: 20px;
	}
}

@media (max-width: 450px) {
	.custom--card.card--lg .card-body {
		padding: 15px;
	}
}

.custom--card.card--md .card-header,
.custom--card.card--md .card-footer {
	padding: 10px 20px;
}

.custom--card.card--md .card-body {
	padding: 20px 20px;
}

.custom--modal .modal--footer,
.custom--modal .modal--body,
.custom--modal .modal--header {
	border-color: var(--border) !important;
}

.custom--modal .modal--footer .modal-title,
.custom--modal .modal--header .modal-title {
	margin: 0;
	color: rgb(var(--heading));
}

.custom--modal .modal--footer .btn-close,
.custom--modal .modal--header .btn-close {
	background: transparent;
	font-size: 20px;
	line-height: 1;
	color: hsl(var(--danger)) !important;
}


/* ADMIN CSS */

.widget-two {
  padding: 15px 15px;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  position: relative;
  overflow: hidden;
  align-items: center;
  height: 100%;
}

.widget-two .overlay-icon {
  position: absolute;
  bottom: -15px;
  right: -15px;
  font-size: 70px;
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
  opacity: 0.15;
}

.widget-two__icon {
  width: 65px;
  height: 65px;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.widget-two__icon i {
  font-size: 42px;
}

.widget-two__content {
  width: calc(100% - 65px);
  padding-left: 20px;
}

.widget-two__btn {
  position: absolute;
  top: 5px;
  right: 5px;
  border-radius: 4px;
  font-size: 10px;
  padding: 0 5px;
  transition: all 0.3s;
}

.widget-two.style--two {
  z-index: 1;
}

.widget-two.style--two::before,
.widget-two.style--two::after {
  position: absolute;
  content: '';
  top: 0;
  right: 0;
  width: 20%;
  height: 100%;
  background-color: #fff; 
  clip-path: polygon(40% 0, 100% 0, 100% 100%, 0 100%); 
  -webkit-clip-path: polygon(40% 0, 100% 0, 100% 100%, 0 100%); 
  opacity: 0.05;
  z-index: -1;
}

.widget-two.style--two::after {
  width: calc(20% + 20px);
}

.widget-two.style--two .widget-two__icon {
  background-color: rgba(255,255,255,0.1) !important;
}
.widget-two.style--two .widget-two__btn {
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.15);
  color: #fff;
  z-index: 1;
}
.widget-two.style--two .overlay-icon {
  opacity: 0;
}

.box--shadow2 {
  box-shadow: 0 4px 10px #38414a0f !important;
}

.b-radius--5 {
  border-radius: 5px !important;
  -webkit-border-radius: 5px !important;
  -moz-border-radius: 5px !important;
  -ms-border-radius: 5px !important;
  -o-border-radius: 5px !important;
}

/* background-color css start */
*[class*="bg"] {
  color: #ffffff;
}

.bg--white, .bg--gray {
  color: inherit;
}

.bg--primary {
  background-color: #4634ff !important;
}

.bg--secondary {
  background-color: #868e96 !important;
}

.bg--success {
  background-color: #28c76f !important;
}

.bg--danger {
  background-color: #ea5455 !important;
}

.bg--warning {
  background-color: #ff9f43 !important;
}

.bg--info {
  background-color: #1e9ff2 !important;
}

.bg--dark {
  background-color: #071251 !important;
}

.bg--white {
  background-color: #ffffff !important;
}

.bg--black {
  background-color: #000000 !important;
}

.bg--gray {
  background-color: #9E9E9E !important;
}

.bg--blue-gray {
  background-color: #607D8B !important;
}

.bg--red {
  background-color: #F44336 !important;
}

.bg--pink {
  background-color: #E91E63 !important;
}

.bg--purple {
  background-color: #9C27B0 !important;
}

.bg--deep-purple {
  background-color: #673AB7 !important;
}

.bg--indigo {
  background-color: #3F51B5 !important;
}

.bg--blue {
  background-color: #2196F3 !important;
}

.bg--light-blue {
  background-color: #45c5ff !important;
}

.bg--cyan {
  background-color: #00BCD4 !important;
}

.bg--teal {
  background-color: #009688 !important;
}

.bg--green {
  background-color: #4CAF50 !important;
}

.bg--light-green {
  background-color: #8BC34A !important;
}

.bg--lime {
  background-color: #CDDC39 !important;
}

.bg--yellow {
  background-color: #FFEB3B !important;
}

.bg--amber {
  background-color: #FFC107 !important;
}

.bg--orange {
  background-color: #FF9800 !important;
}

.bg--brown {
  background-color: #795548 !important;
}

.bg--transparent {
  background-color: transparent;
  color: #5b6e88;
}

.bg--1 {
  background-color: #127681 !important;
}

.bg--2 {
  background-color: #ea907a !important;
}

.bg--3 {
  background-color: #10375c !important;
}

.bg--4 {
  background-color: #4f8a8b !important;
}

.bg--5 {
  background-color: #d92027 !important;
}

.bg--6 {
  background-color: #ff9234 !important;
}

.bg--7 {
  background-color: #4cd3c2 !important;
}

.bg--8 {
  background-color: #35d0ba !important;
}

.bg--9 {
  background-color: #e84a5f !important;
}

.bg--10 {
  background-color: #00005c !important;
}

.bg--11 {
  background-color: #45046a !important;
}

.bg--12 {
  background-color: #5c2a9d !important;
}

.bg--13 {
  background-color: #6a097d !important;
}

.bg--14 {
  background-color: #ff5200 !important;
}

.bg--15 {
  background-color: #162447 !important;
}

.bg--16 {
  background-color: #e43f5a !important;
}

.bg--17 {
  background-color: #035aa6 !important;
}

.bg--18 {
  background-color: #0779e4 !important;
}

.bg--19 {
  background-color: #342ead !important;
}

.bg--20 {
  background-color: #d7385e !important;
}

.text--white {
  color: #ffffff !important;
}

.badge-pinned {
    position: absolute;
    top: 10px;
    left: 10px;
    background-color: gold;
    color: black;
    padding: 5px 10px;
    font-size: 12px;
    font-weight: bold;
    border-radius: 5px;
    z-index: 10; /* Ensure the badge appears in front of other elements */
}


.info-msg {
        display: none; /* Initially hide info messages */
        color: #666;
        padding-top: 5px;
        font-size: 12px;
    }
    
.form-group:hover .info-msg {
    display: block; /* Show info messages on hover */
}