@charset "UTF-8";
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.header .top h1{
	filter: drop-shadow(0 0 15px #eeba75);
}
.main_btn.play {
	animation: medieval-shimmer-gold 3.5s ease-in-out infinite;
}
/* text settings */
.text-lowercase {
    text-transform: lowercase!important
}

.text-uppercase {
    text-transform: uppercase!important
}

.text-capitalize {
    text-transform: capitalize!important
}

.font-weight-light {
    font-weight: 300!important
}

.font-weight-lighter {
    font-weight: lighter!important
}

.font-weight-normal {
    font-weight: 400!important
}

.font-weight-bold {
    font-weight: 700!important
}

.font-weight-bolder {
    font-weight: bolder!important
}

.font-italic {
    font-style: italic!important
}

.text-white {
    color: #fff!important
}

/* WRAPPER */
#wrapper {
  margin: 40px auto 0;
  width: 359px;
  position: relative;
}

#txt {
  display: none;
}

/* wheel spin */
ul#wire {
  position: relative;
  width: 200px;
  height: 200px;
  list-style-type: none;
  padding: 0;
  border-radius: 50%;
}

ul#wire li {
  position: absolute;
  width: 10px;
  height: 10px;
  background-color: #333; /* Color for visualization */
  border-radius: 50%; /* Makes the li items round */
  transform-origin: 50% 80px; /* Center of rotation, 50% of ul#wire's height */
  top: 45%; /* 50% from the top of ul#wire */
  left: 75%; /* 50% from the left of ul#wire */
}

/* Positioning the li elements in a circular fashion */
ul#wire li:nth-child(1) {
  transform: rotate(0deg) translateY(-100px);
  animation-delay: 0s, 0s;
}
ul#wire li:nth-child(2) {
  transform: rotate(20deg) translateY(-100px);
  animation-delay: 0s, 0.03s;
}
ul#wire li:nth-child(3) {
  transform: rotate(40deg) translateY(-100px);
  animation-delay: 0s, 0.06s;
}
ul#wire li:nth-child(4) {
  transform: rotate(60deg) translateY(-100px);
  animation-delay: 0s, 0.09s;
}
ul#wire li:nth-child(5) {
  transform: rotate(80deg) translateY(-100px);
  animation-delay: 0s, 0.12s;
}
ul#wire li:nth-child(6) {
  transform: rotate(100deg) translateY(-100px);
  animation-delay: 0s, 0.15s;
}
ul#wire li:nth-child(7) {
  transform: rotate(120deg) translateY(-100px);
  animation-delay: 0s, 0.18s;
}
ul#wire li:nth-child(8) {
  transform: rotate(140deg) translateY(-100px);
  animation-delay: 0s, 0.21s;
}
ul#wire li:nth-child(9) {
  transform: rotate(160deg) translateY(-100px);
  animation-delay: 0s, 0.24s;
}
ul#wire li:nth-child(10) {
  transform: rotate(180deg) translateY(-100px);
  animation-delay: 0s, 0.27s;
}
ul#wire li:nth-child(11) {
  transform: rotate(200deg) translateY(-100px);
  animation-delay: 0s, 0.3s;
}
ul#wire li:nth-child(12) {
  transform: rotate(220deg) translateY(-100px);
  animation-delay: 0s, 0.33s;
}
ul#wire li:nth-child(13) {
  transform: rotate(240deg) translateY(-100px);
  animation-delay: 0s, 0.36s;
}
ul#wire li:nth-child(14) {
  transform: rotate(260deg) translateY(-100px);
  animation-delay: 0s, 0.39s;
}
ul#wire li:nth-child(15) {
  transform: rotate(280deg) translateY(-100px);
  animation-delay: 0s, 0.42s;
}
ul#wire li:nth-child(16) {
  transform: rotate(300deg) translateY(-100px);
  animation-delay: 0s, 0.45s;
}
ul#wire li:nth-child(17) {
  transform: rotate(320deg) translateY(-100px);
  animation-delay: 0s, 0.48s;
}
ul#wire li:nth-child(18) {
  transform: rotate(340deg) translateY(-100px);
  animation-delay: 0s, 0.51s;
}

#wire {
  text-align: center;
  white-space: nowrap;
  position: absolute;
  padding: 0;
  width: 100%;
  top: -80px;
  height: 100px;
}

#wire li {
  position: relative;
  list-style: none;
  margin: 0 15px;
  padding: 0;
  display: inline-block;
  width: 15px;
  height: 30px;
  border-radius: 50%;
  top: 102px;
  background: #fff;
  /* animations*/
  animation-name: even-flash;
  animation-duration: 1s, 0.54s;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
}

#wire li:nth-child(odd) {
  animation-name: odd-flash;
}
#wire.spin li {
  animation-name: even-flash, dynamic-flash;
}
#wire.spin li:nth-child(odd) {
  animation-name: odd-flash, dynamic-flash;
}

#wire li:before {
  /*   content: "";
  position: absolute;
  width: 14px;
  height: 10px;
  border-radius: 4px;
  top:-5px;
  left: 0;
  background:#444; */
}

@keyframes even-flash {
  0%,
  100% {
    background: rgba(255, 230, 65, 1);
    box-shadow: 0px 2px 20px 4px rgba(255, 230, 65, 1);
  }

  50% {
    background: rgba(255, 230, 65, 0.5);
    box-shadow: 0px 2px 20px 4px rgba(255, 230, 65, 0.5);
  }
}

/* @keyframes odd-flash {
  50%{
  	background:rgba(255,65,185,1);
  	box-shadow: 0px 2px 20px 4px rgba(255,65,185,1);
  }

  0% ,100%{
  	background:rgba(255,230,65,.5);
  	box-shadow: 0px 2px 20px 4px rgba(255,65,185,.5);
  }
} */

@keyframes odd-flash {
  50% {
    background: rgba(255, 230, 65, 1);
    box-shadow: 0px 2px 20px 4px rgba(255, 230, 65, 1);
  }

  0%,
  100% {
    background: rgba(255, 230, 65, 0.5);
    box-shadow: 0px 2px 20px 4px rgba(255, 230, 65, 0.5);
  }
}

@keyframes dynamic-flash {
  10% {
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 2px 20px 4px rgba(255, 255, 255, 1);
  }
}

#wheel {
  width: 343px;
  height: 343px;
  border-radius: 50%;
  position: relative;
  overflow: hidden;
  border: 8px solid #EAE6D0;
  box-shadow: rgba(55, 51, 42, 0.2) 0px 0px 10px, rgba(55, 51, 42, 0.05) 0px 3px 0px;
  transform: rotate(0deg);
  background: url(../images/ui/wheelfortune.png) no-repeat 0 0;
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
}

#wheel:before {
  position: absolute;
  border: 5px solid rgba(55, 51, 42, 0.1);
  width: 333px;
  height: 333px;
  border-radius: 50%;
  z-index: 1000;
}

.reward-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    transform: rotate(0deg); /* Supaya teks/gambar tetap tegak mengikuti irisan */
    color: white;
}

.reward-icon {
    width: 40px;  /* Sesuaikan ukuran gambar */
    height: 40px;
    margin-bottom: 5px;
    object-fit: contain;
}

.reward-item {
    position: absolute;
    left: 50%;
    top: -160px; /* Atur jarak dari pusat roda ke arah luar */
    transform: translateX(-50%); /* Menengahkan secara horizontal */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 80px; /* Batasi lebar agar tidak menabrak irisan sebelah */
    z-index: 10;
}

.reward-item img {
    width: 60px; /* Ukuran gambar */
    height: 35px;
    object-fit: contain;
	border-radius: 100%;
    margin-bottom: 5px;
}

.reward-item span {
    color: #fff;
    font-size: 11px;
    font-weight: bold;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
    white-space: nowrap;
	/*-webkit-writing-mode: vertical-rl;*/
	display: inline-block;
	max-width: 100px;
	white-space: normal;
}

.wheel_content {
	width: 40%;
    margin: 0 auto;
    background-color: rgba(37, 33, 26, 0.95);
    border: 0.2vh solid rgba(104, 91, 68, 0.65);
    position: relative;
    box-shadow: 0vh 2vh 5vh rgba(0, 0, 0, 0.215);
    padding: 6vh;
}

#inner-wheel{
	width:100%;
	height:100%;
	
	-webkit-transition: all 6s cubic-bezier(0,.99,.44,.99);
	-moz-transition:    all 6 cubic-bezier(0,.99,.44,.99);
	-o-transition:      all 6s cubic-bezier(0,.99,.44,.99);
	-ms-transition:     all 6s cubic-bezier(0,.99,.44,.99);
	transition:         all 6s cubic-bezier(0,.99,.44,.99);	
}

/* This will manipulate the slice sizes... now to figure out how. Read this: https://www.smashingmagazine.com/2015/07/designing-simple-pie-charts-with-css/. You'll need to figure out the numbers for EACH pie chart depending on how many pie slices there are and how big the circle is... This is going to be a doozy. But get a foundation of how to do it first! */
#wheel div.sec{
	position: absolute;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 200px 83px 0;
	border-color: #88C2B0 transparent;
	transform-origin: 83px 200px;
	left: 80px;
	top: -35px;
	opacity:1;
}

#wheel div.sec:nth-child(1) {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  border-color: rgb(168 135 94 / 82%) transparent;
}

#wheel div.sec:nth-child(2) {
  transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  -mos-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  border-color: rgb(153 145 135 / 90%) transparent;
}

#wheel div.sec:nth-child(3) {
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
  -moz-transform: rotate(135deg);
  -o-transform: rotate(135deg);
  -ms-transform: rotate(135deg);
  border-color: rgb(168 135 94 / 82%) transparent;
}

#wheel div.sec:nth-child(4) {
  transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  border-color: rgb(153 145 135 / 90%) transparent;
}

#wheel div.sec:nth-child(5) {
  transform: rotate(225deg);
  -webkit-transform: rotate(225deg);
  -moz-transform: rotate(225deg);
  -o-transform: rotate(225deg);
  -ms-transform: rotate(255deg);
  border-color: rgb(168 135 94 / 82%) transparent;
}

#wheel div.sec:nth-child(6) {
  transform: rotate(270deg);
  -webkit-transform: rotate(270deg);
  -moz-transform: rotate(270deg);
  -o-transform: rotate(270deg);
  -ms-transform: rotate(270deg);
  border-color: rgb(153 145 135 / 90%) transparent;
}

#wheel div.sec:nth-child(7) {
  transform: rotate(315deg);
  -webkit-transform: rotate(315deg);
  -moz-transform: rotate(315deg);
  -o-transform: rotate(315deg);
  -ms-transform: rotate(315deg);
  border-color: rgb(168 135 94 / 82%) transparent;
}

#wheel div.sec:nth-child(8) {
  transform: rotate(360deg);
  -webkit-transform: rotate(360deg);
  -moz-transform: rotate(360deg);
  -o-transform: rotate(360deg);
  -ms-transform: rotate(360deg);
  border-color: rgb(153 145 135 / 90%) transparent;
}

#wheel div.sec:nth-child(9) {
  transform: rotate(315deg);
  -webkit-transform: rotate(315deg);
  -moz-transform: rotate(315deg);
  -o-transform: rotate(315deg);
  -ms-transform: rotate(315deg);
  border-color: rgb(168 135 94 / 82%) transparent;
}

#wheel div.sec:nth-child(10) {
  transform: rotate(360deg);
  -webkit-transform: rotate(360deg);
  -moz-transform: rotate(360deg);
  -o-transform: rotate(360deg);
  -ms-transform: rotate(360deg);
  border-color: rgb(153 145 135 / 90%) transparent;
}

#wheel div.sec:nth-child(11) {
  transform: rotate(315deg);
  -webkit-transform: rotate(315deg);
  -moz-transform: rotate(315deg);
  -o-transform: rotate(315deg);
  -ms-transform: rotate(315deg);
  border-color: rgb(168 135 94 / 82%) transparent;
}

#wheel div.sec:nth-child(12) {
  transform: rotate(360deg);
  -webkit-transform: rotate(360deg);
  -moz-transform: rotate(360deg);
  -o-transform: rotate(360deg);
  -ms-transform: rotate(360deg);
  border-color: rgb(153 145 135 / 90%) transparent;
}

#wheel div.sec .fas {
  margin-top: -145px;
  color: rgba(55, 51, 42, 0.2);
  position: relative;
  z-index: 10000000;
  display: block;
  text-align: center;
  font-size: 36px;
  margin-left: -20px;
  font-family: "Maron Rose";
  font-weight: 600;
  text-shadow: rgba(234, 230, 208, 0.1) 0px -1px 0px, rgba(55, 51, 42, 0.2) 0px 1px 0px;
}

#spin {
  width: 68px;
  height: 68px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -34px 0 0 -34px;
  border-radius: 50%;
  box-shadow: rgba(55, 51, 42, 0.1) 0px 3px 0px;
  z-index: 1000;
  background: #EAE6D0;
  cursor: pointer;
  font-family: "Maron Rose";
  
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}

#spin:after {
  content: "SPIN";
  font-size: 20px;
  text-align: center;
  line-height: 68px;
  color: #BFBBA6;
  text-shadow: 0 2px 0 #F2EEDD, 0 -2px 0 rgba(55, 51, 42, 0.3);
  position: relative;
  z-index: 100000;
  width: 68px;
  height: 68px;
  display: block;
}

#spin:before {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 20px 28px 20px;
  border-color: transparent transparent #F2EEDD transparent;
  top: -12px;
  left: 14px;
}

#inner-spin {
  width: 54px;
  height: 54px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -27px 0 0 -27px;
  border-radius: 50%;
  background: red;
  z-index: 999;
  box-shadow: rgba(234, 230, 208, 1) 0px -2px 0px inset, rgba(234, 230, 208, 1) 0px 2px 0px inset, rgba(0, 0, 0, 0.4) 0px 0px 5px;
  
  background rgb(234, 230, 208) /* Old Broswers */
  background: -moz-radial-gradient(center, ellipse cover, rgba(234, 230, 208, 1) 0%, rgba(211, 208, 193, 1) 100%); /* FF3.6+ */
  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(234, 230, 208, 1)), color-stop(100%, rgba(211, 208, 193, 1))); /* Chrome, Safari 4+ */
  background: -webkit-radial-gradient(center, ellipse cover, rgba(234, 230, 208, 1) 0%, rgba(211, 208, 193, 1) 100%); /* Chrome 10+, Safari 5.1+ */
  background: -o-radial-gradient(center, ellipse cover, rgba(234, 230, 208, 1) 0%, rgba(211, 208, 193, 1) 100%); /* Opera 12+ */
  background: -ms-radial-gradient(center, ellipse cover, rgba(234, 230, 208, 1) 0%, rgba(211, 208, 193, 1) 100%); /* IE10+ */
  background: radial-gradient(ellipse at center, rgba(234, 230, 208, 1) 0%, rgba(211, 208, 193, 1) 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#EAE6D0', endColorst='#D3D0C1', GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

#spin:active #inner-spin{
  box-shadow: rgba(55, 51, 42, 0.4) 0px 0px 5px inset;
}

#spin:active:after {
  font-size: 18px;
}

.out{
  overflow-x: hidden;
  position: absolute;
  border: .1vh solid #a18a50;
  border-radius: 5px;
  height:25px;
  width:25%;
  top: 30%;
  background-color:rgb(0,0,0);
  opacity: 0.1;
  justify-self: center !important;
}
.in{
  right:0;
  color:#fff;
  position:relative;
  clear: both;
  display: inline-block;
  white-space: nowrap;
}

#w{
  
  position: absolute;
  top:300px
}
#title{
  display:none;
  color:#fff
}

#shine {
  width: 250px;
  height: 250px;
  position: absolute;
  top: 0;
  left: 0;
  /*background: -moz-radial-gradient(center, ellipse cover, rgba(234, 230, 208, 1) 0%, rgba(234, 230, 208, 0.99) 1%, rgba(234, 230, 208, 0.91) 9%, rgba(234, 230, 208, 0) 100%); /* FF3.6+ */
  /*background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(234, 230, 208, 1)), color-stop(1%, rgba(234, 230, 208, 0.99)), color-stop(9%, rgba(234, 230, 208, 0.91)), color-stop(100%, rgba(234, 230, 208, 0))); /* Chrome, Safari 4+ */
  /*background: -webkit-radial-gradient(center, ellipse cover, rgba(234, 230, 208, 1) 0%, rgba(234, 230, 208, 0.99) 1%, rgba(234, 230, 208, 0.91) 9%, rgba(234, 230, 208, 0) 100%); /* Chrome 10+, Safari 5.1+ */
 /* background: -o-radial-gradient(center, ellipse cover, rgba(234, 230, 208, 1) 0%, rgba(234, 230, 208, 0.99) 1%, rgba(234, 230, 208, 0.91) 9%, rgba(234, 230, 208, 0) 100%); /* Opera 12+ */
  /*background: -ms-radial-gradient(center, ellipse cover, rgba(234, 230, 208, 1) 0%, rgba(234, 230, 209, 0.99) 1%, rgba(234, 230, 208, 0.91) 9%, rgba(234, 230, 208, 1) 100%); /* IE10+ */
  /*background: radial-gradient(ellipse at center, rgba(234, 230, 208, 1) 0%, rgba(234, 230, 208, 0.99) 1%, rgba(234, 230, 208, 0.91) 9%, rgba(234, 230, 208, 0) 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff', GradientType=1 ); /* IE 6-9 fallback on horizontal gradient */
  
  opacity: 0.1;
}

/* ANIMATION of the tab clicking to the side as the pie edges come around. When I added more pie slice, it looked glitchy, so we'll not have this for now. */
/* @-webkit-keyframes hh {
  0%, 100% {
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
  }
  
  50% {
    transform: rotate(7deg);
    -webkit-transform: rotate(7deg);
  }
}

@keyframes hh {
  0%, 100% {
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
  }
  
  50% {
    transform: rotate(7deg);
    -webkit-transform: rotate(7deg);
  }
}
*/
.spin {
  -webkit-animation: hh 0.1s; /* Chrome, Safari, Opera */
  animation: hh 0.1s;
}

.text-primary {
    color: #007bff!important
}

a.text-primary:focus,a.text-primary:hover {
    color: #0056b3!important
}

.text-secondary {
    color: #6c757d!important
}

a.text-secondary:focus,a.text-secondary:hover {
    color: #494f54!important
}

.text-success {
    color: #28a745!important
}

a.text-success:focus,a.text-success:hover {
    color: #19692c!important
}

.text-info {
    color: #17a2b8!important
}

a.text-info:focus,a.text-info:hover {
    color: #0f6674!important
}

.text-warning {
    color: #ffc107!important
}

a.text-warning:focus,a.text-warning:hover {
    color: #ba8b00!important
}

.text-danger {
    color: #dc3545!important
}

a.text-danger:focus,a.text-danger:hover {
    color: #a71d2a!important
}

.text-light {
    color: #f8f9fa!important
}

a.text-light:focus,a.text-light:hover {
    color: #cbd3da!important
}

.text-dark {
    color: #343a40!important
}

a.text-dark:focus,a.text-dark:hover {
    color: #121416!important
}

.text-money {
    color: #8f690e!important
}

a.text-money:focus,a.text-money:hover {
    color: #cc9615!important
}

.text-body {
    color: #212529!important
}

.text-muted {
    color: #6c757d!important
}

.text-black-50 {
    color: rgba(0,0,0,.5)!important
}

.text-white-50 {
    color: rgba(255,255,255,.5)!important
}

.wp-400 {
	max-width: 400px;
}

.wp-500 {
	max-width: 500px;
}

.wp-600 {
	max-width: 600px;
}

/*character info*/
.inventory-container {
    background-color: rgba(138, 131, 112, .3);
    padding: 15px;
    border: .2vh solid rgba(104,91,68,.65);
    box-shadow: 0 0 20px rgba(0,0,0,0.5);
    width: 320px;
	gap: 0.5vh !important;
}

/* Bagian Equipment */
.equipment-section {
    display: flex;
    justify-content: space-between;
    height: 220px;
    margin-bottom: 10px;
}

.character-preview {
    position: relative;
    flex-grow: 1;
    /* background-image: url('');*/
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* Styling Slot */
.slot {
    width: 45px;
    height: 45px;
    background-color: rgba(0, 0, 0, 0.4);
    border: 1px solid #111;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: background 0.2s;
}

.slot:hover {
    background-color: rgba(255, 255, 255, 0.15);
    border-color: #007bff;
}

.slot div {
    pointer-events: none;
}

.slot img {
    width: 80%;
    opacity: 0.7;
}

.character-preview .slot {
    position: absolute;
}

.accessory-slots {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.divider {
    border: 0;
    border-top: 1px solid #555;
    margin: 10px 0;
}

.inventory-grid {
    display: grid !important;
    grid-template-columns: repeat(6, 1fr) !important;
    gap: 2px;
	height: 486px;
    overflow-x: hidden;
    overflow-y: auto;
}

.inventory-grid .slot {
    width: 45px;
    height: 45px;
}

.item-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
}

.item-qty {
    position: absolute;
    top: 22px;
    right: -1px;
    background-color: rgb(0 0 0 / 46%);
    color: #ffc600;
    padding: 1px 4px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: bold;
    line-height: 1;
    z-index: 10;
    pointer-events: none;
    text-shadow: 1px 1px 1px #000;
}

/* ===== CHARACTER STATUS PANEL ===== */
.status-container {
    background-color: rgba(138, 131, 112, .3);
    padding: 15px;
    border: .2vh solid rgba(104,91,68,.65);
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
    width: 320px;
    font-family: 'Courier New', Courier, monospace;
    color: #ccc;
    font-size: 12px;
    user-select: none;
}

/* ===== PANEL TITLE ===== */
.status-title {
    text-align: center;
    font-size: 13px;
    font-weight: bold;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #ffc600;
    text-shadow: 0 0 8px rgba(255, 198, 0, 0.4);
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #555;
}

/* ===== CHARACTER IDENTITY SECTION ===== */
.status-identity {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.status-avatar {
    width: 52px;
    height: 52px;
    background-color: rgba(0, 0, 0, 0.4);
    border: 1px solid #555;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}

.status-avatar img {
    width: 85%;
    opacity: 0.85;
}

.status-identity-info {
    flex: 1;
}

.status-char-name {
    font-size: 14px;
    font-weight: bold;
    color: #ffffff;
    text-shadow: 0 0 6px rgba(255,255,255,0.2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}

.status-char-meta {
    margin-top: 3px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
	font-family: "Consolas", "Roboto Mono", monospace;
}

.status-badge {
    background-color: rgba(0, 0, 0, 0.45);
    border: 1px solid #555;
    color: #aaa;
    font-size: 10px;
    padding: 1px 6px;
    border-radius: 2px;
    letter-spacing: 0.5px;
}

.status-badge.badge-class {
    color: #7ec8e3;
    border-color: #2a5f72;
}

.status-badge.badge-level {
    color: #ffc600;
    border-color: #7a5e00;
}

/* ===== SHARED DIVIDER (re-use from inventory) ===== */
.divider {
    border: 0;
    border-top: 1px solid #555;
    margin: 10px 0;
}

/* ===== STAT GRID ===== */
.stat-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3px 8px;
}

.stat-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 3px 6px;
    background-color: rgba(0, 0, 0, 0.25);
    border: 1px solid transparent;
    transition: background 0.15s, border-color 0.15s;
}

.stat-row:hover {
    background-color: rgba(255, 255, 255, 0.07);
    border-color: #444;
}

.stat-label {
    color: #888;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    white-space: nowrap;
}

.stat-value {
    font-size: 11px;
    font-weight: bold;
    color: #e0e0e0;
    text-align: right;
}

/* Colour variants per stat category */
.stat-value.val-power      { color: #ffc600; text-shadow: 0 0 5px rgba(255, 198, 0, 0.35); }
.stat-value.val-dex        { color: #ffc600; text-shadow: 0 0 5px rgba(255, 198, 0, 0.35); }
.stat-value.val-int        { color: #ffc600; text-shadow: 0 0 5px rgba(255, 198, 0, 0.35); }
.stat-value.val-vit        { color: #ffc600; text-shadow: 0 0 5px rgba(255, 198, 0, 0.35); }
.stat-value.val-level      { color: #ffc600; text-shadow: 0 0 5px rgba(255, 198, 0, 0.35); }
.stat-value.val-campus     { color: #ffc600; text-shadow: 0 0 5px rgba(255, 198, 0, 0.35); }
.stat-value.val-class      { color: #7ec8e3; text-shadow: 0 0 5px rgba(126, 200, 227, 0.25); }
.stat-value.val-ap         { color: #26c6da; text-shadow: 0 0 5px rgba(38, 198, 218, 0.35); }
.stat-value.val-pk         { color: #ffc600; text-shadow: 0 0 5px rgba(255, 198, 0, 0.35); }
.stat-value.val-pk-death   { color: #ef5350; text-shadow: 0 0 5px rgba(239, 83, 80, 0.5); }

/* ===== ACTIVITY POINT BAR ===== */
.ap-bar-container {
    margin-top: 4px;
}

.ap-bar-label {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 3px;
}

.ap-bar-label span:last-child {
    color: #26c6da;
    font-weight: bold;
}

.ap-bar-track {
    height: 6px;
    background-color: rgba(0, 0, 0, 0.5);
    border: 1px solid #444;
    overflow: hidden;
}

.ap-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #006064, #26c6da);
    transition: width 0.4s ease;
    box-shadow: 0 0 6px rgba(38, 198, 218, 0.5);
}

/* ===== PK SECTION ===== */
.pk-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3px 8px;
    margin-top: 2px;
}

/* ===== PK SCORE WARNING STATE ===== */
.stat-row.pk-danger .stat-value {
    color: #ff1744;
    animation: pk-pulse 1.6s ease-in-out infinite;
}

@keyframes pk-pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.5; }
}

/* ===== SECTION LABEL ===== */
.section-label {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #666;
    margin-bottom: 4px;
    padding-left: 2px;
}

.money-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 3px 6px;
    background-color: rgba(0, 0, 0, 0.25);
    border: 1px solid transparent;
    transition: background 0.15s, border-color 0.15s;
}

.reg__title {
  width: 100%;
  text-align: center;
  top: 0vh;
  z-index: 2;
}
.reg__title img {
  width: 60vh;
  opacity: 0.9;
}
.reg__title h1 {
  color: rgba(228, 201, 133, 0.848);
  font-size: 1.5vh;
  font-weight: normal;
  text-transform: uppercase;
  letter-spacing: 1.0vh;
  margin-bottom: 1vh;
}

.card{
    padding:3px;
    background-color: rgba(167, 155, 133, 0.3);
    border: 0.2vh solid rgba(167, 155, 133, 0.15);
    border-radius:0
}

.card-title {
  /*width: 100%;*/
  text-align: center;
  top: 2.5vh;
  z-index: 2;
}
.card-title img {
  width: 60vh;
  opacity: 0.9;
}
.card-title h1 {
  color: rgba(255, 198, 52, 0.848);
  font-size: 1.5vh;
  font-weight: normal;
  text-transform: uppercase;
  letter-spacing: 1.1vh;
}

.card-header {
    border-left: 5px solid #8f690e;
    border-radius: 0 !important;
    font-family: "Maron Rose";
    font-size: 20px;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 10px;
}

.card-body {
    background: rgba(167, 155, 133, 0.3)
}

/*widget*/
.category-list .category-item {
    padding: 0;
    margin-bottom: 2px;
}

.category-list .category-item:last-child {
    margin-bottom: 0;
}

.category-list .category-item > a {
    justify-content: space-between;
    padding: 15px 20px;
    color: #ffffff;
    text-transform: capitalize;
}

.category-list .category-item > a .amount::before {
    content: "(";
}

.category-list .category-item > a .amount::after {
    content: ")";
}

.category-list .category-item ul {
    display: none;
}

.category-list .category-item ul li {
    background: rgba(14, 12, 8, 0.21);
    border: 0.2vh solid rgba(167, 155, 133, 0.08);
    border-radius: 0.8vh;
}

.category-list .category-item ul li a {
    position: relative;
    padding-left: 15px;
    color: rgba(255, 255, 255, 0.9);
}

.category-list .category-item ul li a::after {
    width: 5px;
    height: 5px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    background: rgba(237, 233, 30, 0.5);
    top: 12px;
    -webkit-transition: all ease 0.3s;
    -moz-transition: all ease 0.3s;
    transition: all ease 0.3s;
    left: 0;
}

.category-list .category-item ul li a:hover {
    color: #ffc107!important;
}

.category-list .category-item ul li a:hover::after {
    background: #edce1e;
}

.category-list .category-item.active ul {
    display: block;
}

.category-list .category-item.open .category-title {
    color: #ffffff;
    background: #6600FF;
}

.widget {
    margin-bottom: 40px;
}

@media (min-width: 992px) {
    .widget {
        margin-bottom: 60px;
    }
}

.widget:last-child {
    margin-bottom: 0;
}

.widget.widget-banner {
    text-align: center;
    padding: 50px 15px;
}

.widget.widget-banner .title {
    margin-bottom: 10px;
    font-weight: 600;
}

.widget.widget-banner span {
    display: block;
    margin-bottom: 10px;
    font-size: 20px;
    font-weight: 600;
    text-transform: uppercase;
}

.widget.widget-banner a {
    font-weight: 600;
    color: #ffffff;
    font-size: 18px;
}

aside {
    background: rgba(138, 131, 112, .3);
    position: sticky;
    top: 100px;
}

aside p {
  color: #fff;
}
/* allert */
.alert {
    border: 1px solid transparent;
    border-radius: .25rem;
    margin-bottom: 1rem;
    padding: .75rem 1.25rem;
    position: relative
}

.alert-heading {
    color: inherit
}

.alert-link {
    font-weight: 700
}

.alert-dismissible {
    padding-right: 4rem
}

.alert-dismissible .close {
    color: inherit;
    padding: .75rem 1.25rem;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 2
}

.alert-primary {
    background-color: #cce5ff;
    border-color: #b8daff;
    color: #004085
}

.alert-primary hr {
    border-top-color: #9fcdff
}

.alert-primary .alert-link {
    color: #002752
}

.alert-secondary {
    background-color: #e2e3e5;
    border-color: #d6d8db;
    color: #383d41
}

.alert-secondary hr {
    border-top-color: #c8cbcf
}

.alert-secondary .alert-link {
    color: #202326
}

.alert-success {
    background-color: #d4edda;
    border-color: #c3e6cb;
    color: #155724
}

.alert-success hr {
    border-top-color: #b1dfbb
}

.alert-success .alert-link {
    color: #0b2e13
}

.alert-info {
    background-color: #d1ecf1;
    border-color: #bee5eb;
    color: #0c5460
}

.alert-info hr {
    border-top-color: #abdde5
}

.alert-info .alert-link {
    color: #062c33
}

.alert-warning {
    background-color: #fff3cd;
    border-color: #ffeeba;
    color: #856404
}

.alert-warning hr {
    border-top-color: #ffe8a1
}

.alert-warning .alert-link {
    color: #533f03
}

.alert-danger {
    background-color: #f8d7da;
    border-color: #f5c6cb;
    color: #721c24
}

.alert-danger hr {
    border-top-color: #f1b0b7
}

.alert-danger .alert-link {
    color: #491217
}

.alert-light {
    background-color: #fefefe;
    border-color: #fdfdfe;
    color: #818182
}

.alert-light hr {
    border-top-color: #ececf6
}

.alert-light .alert-link {
    color: #686868
}

.alert-dark {
    background-color: #d6d8d9;
    border-color: #c6c8ca;
    color: #1b1e21
}

.alert-dark hr {
    border-top-color: #b9bbbe
}

.alert-dark .alert-link {
    color: #040505
}

.nk-page-background {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-position: 50% 50%;
    background-size: cover;
    z-index: -1;
}

.nk-page-background video,
.nk-page-background iframe {
    opacity: 0;
    -webkit-transition: opacity .3s;
    -o-transition: opacity .3s;
    transition: opacity .3s;
}

.nk-page-background.nk-page-background-loaded video,
.nk-page-background.nk-page-background-loaded iframe {
    opacity: 1;
}

.bg-color {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: #0e0e0e;
    z-index: -1;
}

.nk-gap,
.nk-gap-1,
.nk-gap-2,
.nk-gap-3,
.nk-gap-4,
.nk-gap-5,
.nk-gap-6 {
    display: block;
    height: 20px;
}

.nk-gap::after, .nk-gap::before,
.nk-gap-1::after,
.nk-gap-1::before,
.nk-gap-2::after,
.nk-gap-2::before,
.nk-gap-3::after,
.nk-gap-3::before,
.nk-gap-4::after,
.nk-gap-4::before,
.nk-gap-5::after,
.nk-gap-5::before,
.nk-gap-6::after,
.nk-gap-6::before {
    content: "";
    display: table;
    clear: both;
}

.nk-gap-1 {
    height: 30px;
}

.nk-gap-2 {
    height: 40px;
}

.nk-gap-3 {
    height: 60px;
}

.nk-gap-4 {
    height: 80px;
}

.nk-gap-5 {
    height: 100px;
}

.nk-gap-6 {
    height: 120px;
}

.nk-cookie-alert {
    position: fixed;
    bottom: 0;
    left: 0;
    max-width: 450px;
    padding: 35px;
    margin: 30px;
    background-color: #fff;
    border: 1px solid #adadad;
    color: #000;
    z-index: 2000;
}

.nk-btn {
    position: relative;
    display: inline-block;
    padding: 12px 30px;
    font-family: "Marcellus SC", serif;
    font-size: .9rem;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    border: none;
    border-radius: 2px;
    -webkit-transition: .2s background-color, .2s color, .2s transform;
    -o-transition: .2s background-color, .2s color, .2s transform;
    transition: .2s background-color, .2s color, .2s transform;
}

.nk-btn, .nk-btn:hover, .nk-btn.hover, .nk-btn:active, .nk-btn.active, .nk-btn:focus {
    color: inherit;
    text-decoration: none;
}

.nk-btn:hover, .nk-btn.hover {
    background-color: #7c66f8;
    transition: .85s;
}

.nk-btn::before {
    content: "";
    position: absolute;
    display: block;
    top: 4px;
    right: 4px;
    bottom: 4px;
    left: 4px;
    border: 1px solid;
    border-radius: 2px;
    -webkit-transition: .3s background-color, .3s border-color;
    -o-transition: .3s background-color, .3s border-color;
    transition: .3s background-color, .3s border-color;
    z-index: 1;
}

.nk-btn > .icon {
    margin-right: 4px;
    font-size: .8rem;
    vertical-align: middle;
}

.nk-btn > span + .icon {
    margin-right: 0;
    margin-left: 4px;
}

.nk-btn-icon {
    padding: 12px;
}

.nk-btn-icon .icon {
    display: inline-block;
    min-width: 18px;
    margin: 0;
}

.nk-btn-xs {
    padding: 8px 21px;
    font-size: .8rem;
}

.nk-btn-xs.nk-btn-icon {
    padding: 8px;
}

.nk-btn-sm {
    padding: 11px 24px;
    font-size: .85rem;
}

.nk-btn-sm.nk-btn-icon {
    padding: 10px;
}

.nk-btn-lg {
    padding: 14px 36px;
}

.nk-btn-lg.nk-btn-icon {
    padding: 14px;
}

.nk-btn-x2 {
    padding: 16px 40px;
    font-size: 1rem;
}

.nk-btn-x2.nk-btn-icon {
    padding: 16px;
}

.nk-btn-x3 {
    padding: 20px 50px;
    font-size: 1.1rem;
}

.nk-btn-x3.nk-btn-icon {
    padding: 20px;
}

.nk-btn-x4 {
    padding: 22px 60px;
    font-size: 1.2rem;
}

.nk-btn-x4.nk-btn-icon {
    padding: 22px;
}

.nk-btn-color-main-1 {
    color: #a5a5a5;
}

.nk-btn-color-main-1, .nk-btn-color-main-1::after, .nk-btn-color-main-1::before {
    border-color: #a5a5a5;
}

.nk-btn-color-main-1:hover, .nk-btn-color-main-1.hover {
    color: #fff;
}

.nk-btn-color-main-1:active, .nk-btn-color-main-1.active {
    color: #fff;
}

.nk-btn-color-main-2 {
    color: #39a228;
}

.nk-btn-color-main-2, .nk-btn-color-main-2::after, .nk-btn-color-main-2::before {
    border-color: #2b791e;
}

.nk-btn-color-main-2:hover, .nk-btn-color-main-2.hover {
    color: #39a228;
}

.nk-btn-color-main-2:active, .nk-btn-color-main-2.active {
    color: #1c5014;
}

.nk-btn-color-main-3 {
    color: #2953b1;
}

.nk-btn-color-main-3, .nk-btn-color-main-3::after, .nk-btn-color-main-3::before {
    border-color: #1f4088;
}

.nk-btn-color-main-3:hover, .nk-btn-color-main-3.hover {
    color: #2953b1;
}

.nk-btn-color-main-3:active, .nk-btn-color-main-3.active {
    color: #162c5e;
}

.nk-btn-color-main-4 {
    color: #7c34a8;
}

.nk-btn-color-main-4, .nk-btn-color-main-4::after, .nk-btn-color-main-4::before {
    border-color: #5f2881;
}

.nk-btn-color-main-4:hover, .nk-btn-color-main-4.hover {
    color: #7c34a8;
}

.nk-btn-color-main-4:active, .nk-btn-color-main-4.active {
    color: #431c5a;
}

.nk-btn-color-main-5 {
    color: #c82e2e;
}

.nk-btn-color-main-5, .nk-btn-color-main-5::after, .nk-btn-color-main-5::before {
    border-color: #9f2424;
}

.nk-btn-color-main-5:hover, .nk-btn-color-main-5.hover {
    color: #c82e2e;
}

.nk-btn-color-main-5:active, .nk-btn-color-main-5.active {
    color: #751b1b;
}

.nk-btn-color-primary {
    color: #0275d8;
}

.nk-btn-color-primary, .nk-btn-color-primary::after, .nk-btn-color-primary::before {
    border-color: #025aa5;
}

.nk-btn-color-primary:hover, .nk-btn-color-primary.hover {
    color: #0275d8;
}

.nk-btn-color-primary:active, .nk-btn-color-primary.active {
    color: #013e73;
}

.nk-btn-color-success {
    color: #5cb85c;
}

.nk-btn-color-success, .nk-btn-color-success::after, .nk-btn-color-success::before {
    border-color: #449d44;
}

.nk-btn-color-success:hover, .nk-btn-color-success.hover {
    color: #5cb85c;
}

.nk-btn-color-success:active, .nk-btn-color-success.active {
    color: #357935;
}

.nk-btn-color-info {
    color: #5bc0de;
}

.nk-btn-color-info, .nk-btn-color-info::after, .nk-btn-color-info::before {
    border-color: #31b0d5;
}

.nk-btn-color-info:hover, .nk-btn-color-info.hover {
    color: #5bc0de;
}

.nk-btn-color-info:active, .nk-btn-color-info.active {
    color: #2390b0;
}

.nk-btn-color-warning {
    color: #f0ad4e;
}

.nk-btn-color-warning, .nk-btn-color-warning::after, .nk-btn-color-warning::before {
    border-color: #ec971f;
}

.nk-btn-color-warning:hover, .nk-btn-color-warning.hover {
    color: #f0ad4e;
}

.nk-btn-color-warning:active, .nk-btn-color-warning.active {
    color: #c77c11;
}

.nk-btn-color-danger {
    color: #d9534f;
}

.nk-btn-color-danger, .nk-btn-color-danger::after, .nk-btn-color-danger::before {
    border-color: #c9302c;
}

.nk-btn-color-danger:hover, .nk-btn-color-danger.hover {
    color: #d9534f;
}

.nk-btn-color-danger:active, .nk-btn-color-danger.active {
    color: #a02622;
}

.nk-btn-color-white {
    color: #fff;
}

.nk-btn-color-white, .nk-btn-color-white::after, .nk-btn-color-white::before {
    border-color: #e6e6e6;
}

.nk-btn-color-white:hover, .nk-btn-color-white.hover {
    color: #fff;
}

.nk-btn-color-white:active, .nk-btn-color-white.active {
    color: #cccccc;
}

.nk-btn-color-black {
    color: #000;
}

.nk-btn-color-black, .nk-btn-color-black::after, .nk-btn-color-black::before {
    border-color: black;
}

.nk-btn-color-black:hover, .nk-btn-color-black.hover {
    color: #000;
}

.nk-btn-color-black:active, .nk-btn-color-black.active {
    color: black;
}

.nk-btn-color-dark-1 {
    color: #0e0e0e;
}

.nk-btn-color-dark-1, .nk-btn-color-dark-1::after, .nk-btn-color-dark-1::before {
    border-color: black;
}

.nk-btn-color-dark-1:hover, .nk-btn-color-dark-1.hover {
    color: #0e0e0e;
}

.nk-btn-color-dark-1:active, .nk-btn-color-dark-1.active {
    color: black;
}

.nk-btn-color-dark-2 {
    color: #181818;
}

.nk-btn-color-dark-2, .nk-btn-color-dark-2::after, .nk-btn-color-dark-2::before {
    border-color: black;
}

.nk-btn-color-dark-2:hover, .nk-btn-color-dark-2.hover {
    color: #181818;
}

.nk-btn-color-dark-2:active, .nk-btn-color-dark-2.active {
    color: black;
}

.nk-btn-color-dark-3 {
    color: #222222;
}

.nk-btn-color-dark-3, .nk-btn-color-dark-3::after, .nk-btn-color-dark-3::before {
    border-color: #090909;
}

.nk-btn-color-dark-3:hover, .nk-btn-color-dark-3.hover {
    color: #222222;
}

.nk-btn-color-dark-3:active, .nk-btn-color-dark-3.active {
    color: black;
}

.nk-btn-color-dark-4 {
    color: #2d2d2d;
}

.nk-btn-color-dark-4, .nk-btn-color-dark-4::after, .nk-btn-color-dark-4::before {
    border-color: #131313;
}

.nk-btn-color-dark-4:hover, .nk-btn-color-dark-4.hover {
    color: #2d2d2d;
}

.nk-btn-color-dark-4:active, .nk-btn-color-dark-4.active {
    color: black;
}

.nk-btn-color-gray-1 {
    color: #fafafa;
}

.nk-btn-color-gray-1, .nk-btn-color-gray-1::after, .nk-btn-color-gray-1::before {
    border-color: #e1e1e1;
}

.nk-btn-color-gray-1:hover, .nk-btn-color-gray-1.hover {
    color: #fafafa;
}

.nk-btn-color-gray-1:active, .nk-btn-color-gray-1.active {
    color: #c7c7c7;
}

.nk-btn-color-gray-2 {
    color: #f7f7f7;
}

.nk-btn-color-gray-2, .nk-btn-color-gray-2::after, .nk-btn-color-gray-2::before {
    border-color: #dedede;
}

.nk-btn-color-gray-2:hover, .nk-btn-color-gray-2.hover {
    color: #f7f7f7;
}

.nk-btn-color-gray-2:active, .nk-btn-color-gray-2.active {
    color: #c4c4c4;
}

.nk-btn-color-gray-3 {
    color: whitesmoke;
}

.nk-btn-color-gray-3, .nk-btn-color-gray-3::after, .nk-btn-color-gray-3::before {
    border-color: #dbdbdb;
}

.nk-btn-color-gray-3:hover, .nk-btn-color-gray-3.hover {
    color: whitesmoke;
}

.nk-btn-color-gray-3:active, .nk-btn-color-gray-3.active {
    color: #c2c2c2;
}

.nk-btn-color-gray-4 {
    color: #f2f2f2;
}

.nk-btn-color-gray-4, .nk-btn-color-gray-4::after, .nk-btn-color-gray-4::before {
    border-color: #d9d9d9;
}

.nk-btn-color-gray-4:hover, .nk-btn-color-gray-4.hover {
    color: #f2f2f2;
}

.nk-btn-color-gray-4:active, .nk-btn-color-gray-4.active {
    color: #bfbfbf;
}

.nk-btn-bg-main-1 {
    background-color: rgba(224, 136, 33, 0.9);
}

.nk-btn-bg-main-1:hover, .nk-btn-bg-main-1.hover {
    background-color: #e08821;
}

.nk-btn-bg-main-2 {
    background-color: rgba(57, 162, 40, 0.9);
}

.nk-btn-bg-main-2:hover, .nk-btn-bg-main-2.hover {
    background-color: #39a228;
}

.nk-btn-bg-main-3 {
    background-color: rgba(41, 83, 177, 0.9);
}

.nk-btn-bg-main-3:hover, .nk-btn-bg-main-3.hover {
    background-color: #2953b1;
}

.nk-btn-bg-main-4 {
    background-color: rgba(124, 52, 168, 0.9);
}

.nk-btn-bg-main-4:hover, .nk-btn-bg-main-4.hover {
    background-color: #7c34a8;
}

.nk-btn-bg-main-5 {
    background-color: rgba(200, 46, 46, 0.9);
}

.nk-btn-bg-main-5:hover, .nk-btn-bg-main-5.hover {
    background-color: #c82e2e;
}

.nk-btn-bg-primary {
    background-color: rgba(2, 117, 216, 0.9);
}

.nk-btn-bg-primary:hover, .nk-btn-bg-primary.hover {
    background-color: #0275d8;
}

.nk-btn-bg-success {
    background-color: rgba(92, 184, 92, 0.9);
}

.nk-btn-bg-success:hover, .nk-btn-bg-success.hover {
    background-color: #5cb85c;
}

.nk-btn-bg-info {
    background-color: rgba(91, 192, 222, 0.9);
}

.nk-btn-bg-info:hover, .nk-btn-bg-info.hover {
    background-color: #5bc0de;
}

.nk-btn-bg-warning {
    background-color: rgba(240, 173, 78, 0.9);
}

.nk-btn-bg-warning:hover, .nk-btn-bg-warning.hover {
    background-color: #f0ad4e;
}

.nk-btn-bg-danger {
    background-color: rgba(217, 83, 79, 0.9);
}

.nk-btn-bg-danger:hover, .nk-btn-bg-danger.hover {
    background-color: #d9534f;
}

.nk-btn-bg-white {
    background-color: rgba(255, 255, 255, 0.9);
}

.nk-btn-bg-white:hover, .nk-btn-bg-white.hover {
    background-color: #fff;
}

.nk-btn-bg-black {
    background-color: rgba(0, 0, 0, 0.9);
}

.nk-btn-bg-black:hover, .nk-btn-bg-black.hover {
    background-color: #000;
}

.nk-btn-bg-dark-1 {
    background-color: rgba(14, 14, 14, 0.9);
}

.nk-btn-bg-dark-1:hover, .nk-btn-bg-dark-1.hover {
    background-color: #0e0e0e;
}

.nk-btn-bg-dark-2 {
    background-color: rgba(24, 24, 24, 0.9);
}

.nk-btn-bg-dark-2:hover, .nk-btn-bg-dark-2.hover {
    background-color: #181818;
}

.nk-btn-bg-dark-3 {
    background-color: rgba(34, 34, 34, 0.9);
}

.nk-btn-bg-dark-3:hover, .nk-btn-bg-dark-3.hover {
    background-color: #222222;
}

.nk-btn-bg-dark-4 {
    background-color: rgba(45, 45, 45, 0.9);
}

.nk-btn-bg-dark-4:hover, .nk-btn-bg-dark-4.hover {
    background-color: #2d2d2d;
}

.nk-btn-bg-gray-1 {
    background-color: rgba(250, 250, 250, 0.9);
}

.nk-btn-bg-gray-1:hover, .nk-btn-bg-gray-1.hover {
    background-color: #fafafa;
}

.nk-btn-bg-gray-2 {
    background-color: rgba(247, 247, 247, 0.9);
}

.nk-btn-bg-gray-2:hover, .nk-btn-bg-gray-2.hover {
    background-color: #f7f7f7;
}

.nk-btn-bg-gray-3 {
    background-color: rgba(245, 245, 245, 0.9);
}

.nk-btn-bg-gray-3:hover, .nk-btn-bg-gray-3.hover {
    background-color: whitesmoke;
}

.nk-btn-bg-gray-4 {
    background-color: rgba(242, 242, 242, 0.9);
}

.nk-btn-bg-gray-4:hover, .nk-btn-bg-gray-4.hover {
    background-color: #f2f2f2;
}

.nk-btn-circle,
.nk-btn-circle::after,
.nk-btn-circle::before {
    border-radius: 25px;
}

.nk-btn-circle.nk-btn-xs,
.nk-btn-circle::after.nk-btn-xs,
.nk-btn-circle::before.nk-btn-xs {
    border-radius: 20px;
}

.nk-btn-circle.nk-btn-sm,
.nk-btn-circle::after.nk-btn-sm,
.nk-btn-circle::before.nk-btn-sm {
    border-radius: 23px;
}

.nk-btn-circle.nk-btn-lg,
.nk-btn-circle::after.nk-btn-lg,
.nk-btn-circle::before.nk-btn-lg {
    border-radius: 27px;
}

.nk-btn-circle.nk-btn-x2,
.nk-btn-circle::after.nk-btn-x2,
.nk-btn-circle::before.nk-btn-x2 {
    border-radius: 30px;
}

.nk-btn-circle.nk-btn-x3,
.nk-btn-circle::after.nk-btn-x3,
.nk-btn-circle::before.nk-btn-x3 {
    border-radius: 34.5px;
}

.nk-btn-circle.nk-btn-x4,
.nk-btn-circle::after.nk-btn-x4,
.nk-btn-circle::before.nk-btn-x4 {
    border-radius: 38px;
}

.nk-btn-block {
    display: block;
    width: 100%;
}

.nk-cookie-alert .nk-cookie-alert-close {
    float: right;
    padding-bottom: 10px;
    padding-left: 10px;
    cursor: pointer;
}

/*pre loader*/
.nk-preloader {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
    z-index: 3000;
}

.nk-preloader .nk-preloader-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: 0 50%;
    background-size: cover;
}

.nk-preloader .nk-preloader-content {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgb(241 241 241);
}

.nk-preloader .nk-preloader-content > div {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    text-align: center;
    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%);
}

.nk-preloader .nk-preloader-skip {
    position: absolute;
    right: 0;
    bottom: 0;
    padding: 25px;
    font-size: .95rem;
    line-height: 1;
    cursor: pointer;
    -webkit-animation: nk-preloader-skip 6s linear;
            animation: nk-preloader-skip 6s linear;
    z-index: 1;
}

@-webkit-keyframes nk-preloader-skip {
    0%,
    90% {
        visibility: hidden;
        opacity: 0;
    }
    100% {
        visibility: visible;
        opacity: 1;
    }
}

@keyframes nk-preloader-skip {
    0%,
    90% {
        visibility: hidden;
        opacity: 0;
    }
    100% {
        visibility: visible;
        opacity: 1;
    }
}

.nk-preloader-animation {
    position: relative;
    display: block;
    margin: 30px auto;
    opacity: .7;
    -webkit-animation: nk-preloader-animation 1.2s linear infinite .4s;
            animation: nk-preloader-animation 1.2s linear infinite .4s;
}

.nk-preloader-animation::after, .nk-preloader-animation::before {
    content: "";
    position: absolute;
    display: block;
}

.nk-preloader-animation, .nk-preloader-animation::after, .nk-preloader-animation::before {
    width: 4px;
    height: 4px;
    background-color: rgba(116, 106, 54, 0.3);
    border-radius: 2px;
}

.nk-preloader-animation::before {
    left: -20px;
    -webkit-animation: nk-preloader-animation 1.2s linear infinite 0s;
            animation: nk-preloader-animation 1.2s linear infinite 0s;
}

.nk-preloader-animation::after {
    right: -20px;
    -webkit-animation: nk-preloader-animation 1.2s linear infinite .8s;
            animation: nk-preloader-animation 1.2s linear infinite .8s;
}

@-webkit-keyframes nk-preloader-animation {
    0%,
    60%,
    100% {
        background-color: rgba(116, 106, 54, 0.3);
    }
    30% {
        background-color: #000000;
    }
}

@keyframes nk-preloader-animation {
    0%,
    60%,
    100% {
        background-color:  rgba(116, 106, 54, 0.3);
    }
    30% {
        background-color: #fff;
    }
}

.loader-frame {
    width: 100%;
    height: 100%;
    max-width: 250px;
    max-height: 250px;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    padding: 30px;
}

.circle {
    position: absolute;
    width: 100%;
    height: 100%;
    max-width: 250px;
    max-height: 250px;
    background-color: white 0%;
    border: 1px solid #ffffff;
    border-radius: 50%;
    display: inline-block;
}

.loader1 {
    position: absolute;
    border-radius: 50%;
    width: 100%;
    height: 100%;
    max-width: 300px;
    max-height: 300px;
    border-top: 5px solid #ffffff;
    border-bottom: 5px solid #ffffff;
    animation: clockwisespin 5s linear 3;
}

@keyframes clockwisespin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes fadeout {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes fadein {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.bot {
    color: #999 !important;
    border: 0px solid #ddd !important;
    overflow: hidden;
    display: inline-block;
    width: 350px;
    white-space: nowrap;
    text-align: left;
    border-radius: 20px;
    transition: all 0.2s
}

.bot i {
    font-size: 32px;
    vertical-align: middle;
    transform: rotate(90deg);
    transition: all 0.4s
}

.bot:hover i, .bot:hover span {
    color: #678
}

.bot .fa-check-circle {
    color: #c8b398 !important;
    transform: rotate(0deg);
}

.bot {
    color: #999 !important;
    border: 0px solid #ddd !important;
    overflow: hidden;
    display: inline-block;
    width: 140px;
    white-space: nowrap;
    text-align: left;
    border-radius: 20px;
    transition: all 0.2s
}

    .bot i {
        font-size: 32px;
        vertical-align: middle;
        transform: rotate(90deg);
        transition: all 0.4s
    }

    .bot:hover i, .bot:hover span {
        color: #678
    }

    .bot .fa-check-circle {
        color: #c8b398 !important;
        transform: rotate(0deg);
    }

    .bot span {
        font-size: 14px;
        padding: 0 0 0 10px;
        display: inline-block;
        text-shadow: 0 1px 0 #fff;
    }

    .bot.chk {
        width: 200px;
    }

.shake {
    transform-origin: center;
    animation-name: shake;
    animation-duration: 400ms;
    animation-iteration-count: 1;
    animation-timing-function: ease-in-out
}

@keyframes slidedown {
    0% {
        max-height: 0px;
        opacity: 0
    }

    100% {
        max-height: 600px;
        opacity: 1
    }
}

@keyframes shake {
    0% {
        transform: none
    }

    12.5% {
        transform: translateX(-6px) rotateY(-5deg)
    }

    37.5% {
        transform: translateX(5px) rotateY(4deg)
    }

    62.5% {
        transform: translateX(-3px) rotateY(-3deg)
    }

    87.5% {
        transform: translateX(2px) rotateY(2deg)
    }

    100% {
        transform: none
    }
}

.container {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto
}

@media (min-width: 576px) {
    .container {
        max-width:540px
    }
}

@media (min-width: 768px) {
    .container {
        max-width:720px
    }
}

@media (min-width: 992px) {
    .container {
        max-width:960px
    }
}

@media (min-width: 1200px) {
    .container {
        max-width:1200px
    }
	.main_calculation .form_member form div {
		width: 50% !important;
	}
}

.container-fluid {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto
}

.row {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px
}

.row {
    counter-reset: myFaq;
}

.row div[class*="col"] {
    /* counter-increment: myFaq; */
}

.row div[class*="col"]:nth-of-type(4n + 1) .faq-item-3::after, .row div[class*="col"]:nth-of-type(4n + 1) .faq-item-3::before {
    right: -100px;
    bottom: -100px;
}

.row div[class*="col"]:nth-of-type(4n + 2) .faq-item-3 {
    background: #0f6ded;
}

.row div[class*="col"]:nth-of-type(4n + 2) .faq-item-3::after, .row div[class*="col"]:nth-of-type(4n + 2) .faq-item-3::before {
    left: -100px;
    bottom: -100px;
}

.row div[class*="col"]:nth-of-type(4n + 3) .faq-item-3 {
    background: #02c4f2;
}

.row div[class*="col"]:nth-of-type(4n + 3) .faq-item-3::after, .row div[class*="col"]:nth-of-type(4n + 3) .faq-item-3::before {
    right: -100px;
    top: -100px;
}

.row div[class*="col"]:nth-of-type(4n + 4) .faq-item-3 {
    background: #af3af9;
}

.row div[class*="col"]:nth-of-type(4n + 4) .faq-item-3::after, .row div[class*="col"]:nth-of-type(4n + 4) .faq-item-3::before {
    left: -100px;
    top: -100px;
}

.row div[class*="col"]:nth-of-type(n + 10) .faq-item-3 .title::before {
    content: counter(myFaq);
}

.no-gutters {
    margin-right: 0;
    margin-left: 0
}

.no-gutters>.col,.no-gutters>[class*=col-] {
    padding-right: 0;
    padding-left: 0
}

.col,.col-1,.col-10,.col-11,.col-12,.col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9,.col-auto,.col-lg,.col-lg-1,.col-lg-10,.col-lg-11,.col-lg-12,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9,.col-lg-auto,.col-md,.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-md-auto,.col-sm,.col-sm-1,.col-sm-10,.col-sm-11,.col-sm-12,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9,.col-sm-auto,.col-xl,.col-xl-1,.col-xl-10,.col-xl-11,.col-xl-12,.col-xl-2,.col-xl-3,.col-xl-4,.col-xl-5,.col-xl-6,.col-xl-7,.col-xl-8,.col-xl-9,.col-xl-auto {
    position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px
}

.col {
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -ms-flex-positive: 1;
    flex-grow: 1;
    max-width: 100%
}

.col-auto {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: auto;
    max-width: 100%
}

.col-1 {
    -ms-flex: 0 0 8.333333%;
    flex: 0 0 8.333333%;
    max-width: 8.333333%
}

.col-2 {
    -ms-flex: 0 0 16.666667%;
    flex: 0 0 16.666667%;
    max-width: 16.666667%
}

.col-3 {
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%
}

.col-4 {
    -ms-flex: 0 0 33.333333%;
    flex: 0 0 33.333333%;
    max-width: 33.333333%
}

.col-5 {
    -ms-flex: 0 0 41.666667%;
    flex: 0 0 41.666667%;
    max-width: 41.666667%
}

.col-6 {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%
}

.col-7 {
    -ms-flex: 0 0 58.333333%;
    flex: 0 0 58.333333%;
    max-width: 58.333333%
}

.col-8 {
    -ms-flex: 0 0 66.666667%;
    flex: 0 0 66.666667%;
    max-width: 66.666667%
}

.col-9 {
    -ms-flex: 0 0 75%;
    flex: 0 0 75%;
    max-width: 75%
}

.col-10 {
    -ms-flex: 0 0 83.333333%;
    flex: 0 0 83.333333%;
    max-width: 83.333333%
}

.col-11 {
    -ms-flex: 0 0 91.666667%;
    flex: 0 0 91.666667%;
    max-width: 91.666667%
}

.col-12 {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%
}

.order-first {
    -ms-flex-order: -1;
    order: -1
}

.order-last {
    -ms-flex-order: 13;
    order: 13
}

.order-0 {
    -ms-flex-order: 0;
    order: 0
}

.order-1 {
    -ms-flex-order: 1;
    order: 1
}

.order-2 {
    -ms-flex-order: 2;
    order: 2
}

.order-3 {
    -ms-flex-order: 3;
    order: 3
}

.order-4 {
    -ms-flex-order: 4;
    order: 4
}

.order-5 {
    -ms-flex-order: 5;
    order: 5
}

.order-6 {
    -ms-flex-order: 6;
    order: 6
}

.order-7 {
    -ms-flex-order: 7;
    order: 7
}

.order-8 {
    -ms-flex-order: 8;
    order: 8
}

.order-9 {
    -ms-flex-order: 9;
    order: 9
}

.order-10 {
    -ms-flex-order: 10;
    order: 10
}

.order-11 {
    -ms-flex-order: 11;
    order: 11
}

.order-12 {
    -ms-flex-order: 12;
    order: 12
}

.offset-1 {
    margin-left: 8.333333%
}

.offset-2 {
    margin-left: 16.666667%
}

.offset-3 {
    margin-left: 25%
}

.offset-4 {
    margin-left: 33.333333%
}

.offset-5 {
    margin-left: 41.666667%
}

.offset-6 {
    margin-left: 50%
}

.offset-7 {
    margin-left: 58.333333%
}

.offset-8 {
    margin-left: 66.666667%
}

.offset-9 {
    margin-left: 75%
}

.offset-10 {
    margin-left: 83.333333%
}

.offset-11 {
    margin-left: 91.666667%
}

@media (min-width: 576px) {
    .col-sm {
        -ms-flex-preferred-size:0;
        flex-basis: 0;
        -ms-flex-positive: 1;
        flex-grow: 1;
        max-width: 100%
    }

    .col-sm-auto {
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: auto;
        max-width: 100%
    }

    .col-sm-1 {
        -ms-flex: 0 0 8.333333%;
        flex: 0 0 8.333333%;
        max-width: 8.333333%
    }

    .col-sm-2 {
        -ms-flex: 0 0 16.666667%;
        flex: 0 0 16.666667%;
        max-width: 16.666667%
    }

    .col-sm-3 {
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%
    }

    .col-sm-4 {
        -ms-flex: 0 0 33.333333%;
        flex: 0 0 33.333333%;
        max-width: 33.333333%
    }

    .col-sm-5 {
        -ms-flex: 0 0 41.666667%;
        flex: 0 0 41.666667%;
        max-width: 41.666667%
    }

    .col-sm-6 {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%
    }

    .col-sm-7 {
        -ms-flex: 0 0 58.333333%;
        flex: 0 0 58.333333%;
        max-width: 58.333333%
    }

    .col-sm-8 {
        -ms-flex: 0 0 66.666667%;
        flex: 0 0 66.666667%;
        max-width: 66.666667%
    }

    .col-sm-9 {
        -ms-flex: 0 0 75%;
        flex: 0 0 75%;
        max-width: 75%
    }

    .col-sm-10 {
        -ms-flex: 0 0 83.333333%;
        flex: 0 0 83.333333%;
        max-width: 83.333333%
    }

    .col-sm-11 {
        -ms-flex: 0 0 91.666667%;
        flex: 0 0 91.666667%;
        max-width: 91.666667%
    }

    .col-sm-12 {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%
    }

    .order-sm-first {
        -ms-flex-order: -1;
        order: -1
    }

    .order-sm-last {
        -ms-flex-order: 13;
        order: 13
    }

    .order-sm-0 {
        -ms-flex-order: 0;
        order: 0
    }

    .order-sm-1 {
        -ms-flex-order: 1;
        order: 1
    }

    .order-sm-2 {
        -ms-flex-order: 2;
        order: 2
    }

    .order-sm-3 {
        -ms-flex-order: 3;
        order: 3
    }

    .order-sm-4 {
        -ms-flex-order: 4;
        order: 4
    }

    .order-sm-5 {
        -ms-flex-order: 5;
        order: 5
    }

    .order-sm-6 {
        -ms-flex-order: 6;
        order: 6
    }

    .order-sm-7 {
        -ms-flex-order: 7;
        order: 7
    }

    .order-sm-8 {
        -ms-flex-order: 8;
        order: 8
    }

    .order-sm-9 {
        -ms-flex-order: 9;
        order: 9
    }

    .order-sm-10 {
        -ms-flex-order: 10;
        order: 10
    }

    .order-sm-11 {
        -ms-flex-order: 11;
        order: 11
    }

    .order-sm-12 {
        -ms-flex-order: 12;
        order: 12
    }

    .offset-sm-0 {
        margin-left: 0
    }

    .offset-sm-1 {
        margin-left: 8.333333%
    }

    .offset-sm-2 {
        margin-left: 16.666667%
    }

    .offset-sm-3 {
        margin-left: 25%
    }

    .offset-sm-4 {
        margin-left: 33.333333%
    }

    .offset-sm-5 {
        margin-left: 41.666667%
    }

    .offset-sm-6 {
        margin-left: 50%
    }

    .offset-sm-7 {
        margin-left: 58.333333%
    }

    .offset-sm-8 {
        margin-left: 66.666667%
    }

    .offset-sm-9 {
        margin-left: 75%
    }

    .offset-sm-10 {
        margin-left: 83.333333%
    }

    .offset-sm-11 {
        margin-left: 91.666667%
    }
}

@media (min-width: 768px) {
    .col-md {
        -ms-flex-preferred-size:0;
        flex-basis: 0;
        -ms-flex-positive: 1;
        flex-grow: 1;
        max-width: 100%
    }

    .col-md-auto {
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: auto;
        max-width: 100%
    }

    .col-md-1 {
        -ms-flex: 0 0 8.333333%;
        flex: 0 0 8.333333%;
        max-width: 8.333333%
    }

    .col-md-2 {
        -ms-flex: 0 0 16.666667%;
        flex: 0 0 16.666667%;
        max-width: 16.666667%
    }

    .col-md-3 {
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%
    }

    .col-md-4 {
        -ms-flex: 0 0 33.333333%;
        flex: 0 0 33.333333%;
        max-width: 33.333333%
    }

    .col-md-5 {
        -ms-flex: 0 0 41.666667%;
        flex: 0 0 41.666667%;
        max-width: 41.666667%
    }

    .col-md-6 {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%
    }

    .col-md-7 {
        -ms-flex: 0 0 58.333333%;
        flex: 0 0 58.333333%;
        max-width: 58.333333%
    }

    .col-md-8 {
        -ms-flex: 0 0 66.666667%;
        flex: 0 0 66.666667%;
        max-width: 66.666667%
    }

    .col-md-9 {
        -ms-flex: 0 0 75%;
        flex: 0 0 75%;
        max-width: 75%
    }

    .col-md-10 {
        -ms-flex: 0 0 83.333333%;
        flex: 0 0 83.333333%;
        max-width: 83.333333%
    }

    .col-md-11 {
        -ms-flex: 0 0 91.666667%;
        flex: 0 0 91.666667%;
        max-width: 91.666667%
    }

    .col-md-12 {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%
    }

    .order-md-first {
        -ms-flex-order: -1;
        order: -1
    }

    .order-md-last {
        -ms-flex-order: 13;
        order: 13
    }

    .order-md-0 {
        -ms-flex-order: 0;
        order: 0
    }

    .order-md-1 {
        -ms-flex-order: 1;
        order: 1
    }

    .order-md-2 {
        -ms-flex-order: 2;
        order: 2
    }

    .order-md-3 {
        -ms-flex-order: 3;
        order: 3
    }

    .order-md-4 {
        -ms-flex-order: 4;
        order: 4
    }

    .order-md-5 {
        -ms-flex-order: 5;
        order: 5
    }

    .order-md-6 {
        -ms-flex-order: 6;
        order: 6
    }

    .order-md-7 {
        -ms-flex-order: 7;
        order: 7
    }

    .order-md-8 {
        -ms-flex-order: 8;
        order: 8
    }

    .order-md-9 {
        -ms-flex-order: 9;
        order: 9
    }

    .order-md-10 {
        -ms-flex-order: 10;
        order: 10
    }

    .order-md-11 {
        -ms-flex-order: 11;
        order: 11
    }

    .order-md-12 {
        -ms-flex-order: 12;
        order: 12
    }

    .offset-md-0 {
        margin-left: 0
    }

    .offset-md-1 {
        margin-left: 8.333333%
    }

    .offset-md-2 {
        margin-left: 16.666667%
    }

    .offset-md-3 {
        margin-left: 25%
    }

    .offset-md-4 {
        margin-left: 33.333333%
    }

    .offset-md-5 {
        margin-left: 41.666667%
    }

    .offset-md-6 {
        margin-left: 50%
    }

    .offset-md-7 {
        margin-left: 58.333333%
    }

    .offset-md-8 {
        margin-left: 66.666667%
    }

    .offset-md-9 {
        margin-left: 75%
    }

    .offset-md-10 {
        margin-left: 83.333333%
    }

    .offset-md-11 {
        margin-left: 91.666667%
    }
}

@media (min-width: 992px) {
    .col-lg {
        -ms-flex-preferred-size:0;
        flex-basis: 0;
        -ms-flex-positive: 1;
        flex-grow: 1;
        max-width: 100%
    }

    .col-lg-auto {
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: auto;
        max-width: 100%
    }

    .col-lg-1 {
        -ms-flex: 0 0 8.333333%;
        flex: 0 0 8.333333%;
        max-width: 8.333333%
    }

    .col-lg-2 {
        -ms-flex: 0 0 16.666667%;
        flex: 0 0 16.666667%;
        max-width: 16.666667%
    }

    .col-lg-3 {
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%
    }

    .col-lg-4 {
        -ms-flex: 0 0 33.333333%;
        flex: 0 0 33.333333%;
        max-width: 33.333333%
    }

    .col-lg-5 {
        -ms-flex: 0 0 41.666667%;
        flex: 0 0 41.666667%;
        max-width: 41.666667%
    }

    .col-lg-6 {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%
    }

    .col-lg-7 {
        -ms-flex: 0 0 58.333333%;
        flex: 0 0 58.333333%;
        max-width: 58.333333%
    }

    .col-lg-8 {
        -ms-flex: 0 0 66.666667%;
        flex: 0 0 66.666667%;
        max-width: 66.666667%
    }

    .col-lg-9 {
        -ms-flex: 0 0 75%;
        flex: 0 0 75%;
        max-width: 75%
    }

    .col-lg-10 {
        -ms-flex: 0 0 83.333333%;
        flex: 0 0 83.333333%;
        max-width: 83.333333%
    }

    .col-lg-11 {
        -ms-flex: 0 0 91.666667%;
        flex: 0 0 91.666667%;
        max-width: 91.666667%
    }

    .col-lg-12 {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%
    }

    .order-lg-first {
        -ms-flex-order: -1;
        order: -1
    }

    .order-lg-last {
        -ms-flex-order: 13;
        order: 13
    }

    .order-lg-0 {
        -ms-flex-order: 0;
        order: 0
    }

    .order-lg-1 {
        -ms-flex-order: 1;
        order: 1
    }

    .order-lg-2 {
        -ms-flex-order: 2;
        order: 2
    }

    .order-lg-3 {
        -ms-flex-order: 3;
        order: 3
    }

    .order-lg-4 {
        -ms-flex-order: 4;
        order: 4
    }

    .order-lg-5 {
        -ms-flex-order: 5;
        order: 5
    }

    .order-lg-6 {
        -ms-flex-order: 6;
        order: 6
    }

    .order-lg-7 {
        -ms-flex-order: 7;
        order: 7
    }

    .order-lg-8 {
        -ms-flex-order: 8;
        order: 8
    }

    .order-lg-9 {
        -ms-flex-order: 9;
        order: 9
    }

    .order-lg-10 {
        -ms-flex-order: 10;
        order: 10
    }

    .order-lg-11 {
        -ms-flex-order: 11;
        order: 11
    }

    .order-lg-12 {
        -ms-flex-order: 12;
        order: 12
    }

    .offset-lg-0 {
        margin-left: 0
    }

    .offset-lg-1 {
        margin-left: 8.333333%
    }

    .offset-lg-2 {
        margin-left: 16.666667%
    }

    .offset-lg-3 {
        margin-left: 25%
    }

    .offset-lg-4 {
        margin-left: 33.333333%
    }

    .offset-lg-5 {
        margin-left: 41.666667%
    }

    .offset-lg-6 {
        margin-left: 50%
    }

    .offset-lg-7 {
        margin-left: 58.333333%
    }

    .offset-lg-8 {
        margin-left: 66.666667%
    }

    .offset-lg-9 {
        margin-left: 75%
    }

    .offset-lg-10 {
        margin-left: 83.333333%
    }

    .offset-lg-11 {
        margin-left: 91.666667%
    }
}

@media (min-width: 1200px) {
    .col-xl {
        -ms-flex-preferred-size:0;
        flex-basis: 0;
        -ms-flex-positive: 1;
        flex-grow: 1;
        max-width: 100%
    }

    .col-xl-auto {
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: auto;
        max-width: 100%
    }

    .col-xl-1 {
        -ms-flex: 0 0 8.333333%;
        flex: 0 0 8.333333%;
        max-width: 8.333333%
    }

    .col-xl-2 {
        -ms-flex: 0 0 16.666667%;
        flex: 0 0 16.666667%;
        max-width: 16.666667%
    }

    .col-xl-3 {
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%
    }

    .col-xl-4 {
        -ms-flex: 0 0 33.333333%;
        flex: 0 0 33.333333%;
        max-width: 33.333333%
    }

    .col-xl-5 {
        -ms-flex: 0 0 41.666667%;
        flex: 0 0 41.666667%;
        max-width: 41.666667%
    }

    .col-xl-6 {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%
    }

    .col-xl-7 {
        -ms-flex: 0 0 58.333333%;
        flex: 0 0 58.333333%;
        max-width: 58.333333%
    }

    .col-xl-8 {
        -ms-flex: 0 0 66.666667%;
        flex: 0 0 66.666667%;
        max-width: 66.666667%
    }

    .col-xl-9 {
        -ms-flex: 0 0 75%;
        flex: 0 0 75%;
        max-width: 75%
    }

    .col-xl-10 {
        -ms-flex: 0 0 83.333333%;
        flex: 0 0 83.333333%;
        max-width: 83.333333%
    }

    .col-xl-11 {
        -ms-flex: 0 0 91.666667%;
        flex: 0 0 91.666667%;
        max-width: 91.666667%
    }

    .col-xl-12 {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%
    }

    .order-xl-first {
        -ms-flex-order: -1;
        order: -1
    }

    .order-xl-last {
        -ms-flex-order: 13;
        order: 13
    }

    .order-xl-0 {
        -ms-flex-order: 0;
        order: 0
    }

    .order-xl-1 {
        -ms-flex-order: 1;
        order: 1
    }

    .order-xl-2 {
        -ms-flex-order: 2;
        order: 2
    }

    .order-xl-3 {
        -ms-flex-order: 3;
        order: 3
    }

    .order-xl-4 {
        -ms-flex-order: 4;
        order: 4
    }

    .order-xl-5 {
        -ms-flex-order: 5;
        order: 5
    }

    .order-xl-6 {
        -ms-flex-order: 6;
        order: 6
    }

    .order-xl-7 {
        -ms-flex-order: 7;
        order: 7
    }

    .order-xl-8 {
        -ms-flex-order: 8;
        order: 8
    }

    .order-xl-9 {
        -ms-flex-order: 9;
        order: 9
    }

    .order-xl-10 {
        -ms-flex-order: 10;
        order: 10
    }

    .order-xl-11 {
        -ms-flex-order: 11;
        order: 11
    }

    .order-xl-12 {
        -ms-flex-order: 12;
        order: 12
    }

    .offset-xl-0 {
        margin-left: 0
    }

    .offset-xl-1 {
        margin-left: 8.333333%
    }

    .offset-xl-2 {
        margin-left: 16.666667%
    }

    .offset-xl-3 {
        margin-left: 25%
    }

    .offset-xl-4 {
        margin-left: 33.333333%
    }

    .offset-xl-5 {
        margin-left: 41.666667%
    }

    .offset-xl-6 {
        margin-left: 50%
    }

    .offset-xl-7 {
        margin-left: 58.333333%
    }

    .offset-xl-8 {
        margin-left: 66.666667%
    }

    .offset-xl-9 {
        margin-left: 75%
    }

    .offset-xl-10 {
        margin-left: 83.333333%
    }

    .offset-xl-11 {
        margin-left: 91.666667%
    }
}

.alert.hidden {
    display: none !important
}

.alert.hidden {
    display: none !important
}

.alert.hidden {
    display: none !important
}

.recharge-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); /* Responsif otomatis */
    gap: 15px;
    padding: 10px 0;
}

.recharge-input {
    display: none;
}

.recharge-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px 15px;
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
}

.recharge-card:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: #f5c842;
    transform: translateY(-3px);
}


.recharge-input:checked + .recharge-card {
    background: rgba(245, 200, 66, 0.15);
    border-color: #f5c842;
    box-shadow: 0 0 15px rgba(245, 200, 66, 0.3);
}


.recharge-amount {
    font-size: 1.1rem;
    font-weight: bold;
    color: #fff;
    margin-bottom: 5px;
}

.recharge-info {
    font-size: 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.recharge-name {
    color: #f5c842;
}

.recharge-bonus {
    background: #ff4d4d;
    color: white;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: bold;
    display: inline-block;
    margin-top: 5px;
}

.pricing_table {
    line-height: 150%;
    font-size: 12px;
    margin: 0 auto;
    width: 75%;
    max-width: 800px;
    padding-top: 10px;
    margin-top: 100px;
}

.price_block {
    text-align: center;
    width: 100%;
    color: #fff;
    display: grid !important;
	grid-template-columns: repeat(2, 1fr) !important;
	gap: 2px;
    transition: all 0.25s;
    position: relative;
    box-sizing: border-box;
    margin-bottom: 10px;
    border-bottom: 1px solid transparent;
}

/*Price heads*/
.pricing_table h3 {
    text-transform: uppercase;
    padding: 5px 0;
    background: #333;
    margin: -10px 0 1px 0;
}

/*Price tags*/
.price {
    display: table;
    width: 100%;
    height: 70px;
}

.price_figure {
    font-size: 24px;
    text-transform: uppercase;
    vertical-align: middle;
    display: table-cell;
}

.price_number {
    font-weight: bold;
    display: block;
}

.price_tenure {
    font-size: 11px;
}

.list-group {
    border-radius: .25rem;
    display: flex;
    flex-direction: column;
    margin-bottom: 0;
	padding: 1.1vh 2vh;
    padding-left: 0
}

.list-group-item-action {
    color: #495057;
    text-align: inherit;
    width: 100%
}

.list-group-item-action:focus,.list-group-item-action:hover {
    background-color: #f8f9fa;
    color: #495057;
    text-decoration: none;
    z-index: 1
}

.list-group-item-action:active {
    background-color: #e9ecef;
    color: #212529
}

.list-group-item {
    background-color: #fff;
    display: block;
    padding: .75rem 1.25rem;
    position: relative
}

.list-group-item:first-child {
    border-top-left-radius: inherit;
    border-top-right-radius: inherit
}

.list-group-item:last-child {
    border-bottom-left-radius: inherit;
    border-bottom-right-radius: inherit
}

.list-group-item.disabled,.list-group-item:disabled {
    background-color: #fff;
    color: #6c757d;
    pointer-events: none
}

.list-group-item.active {
    background-color: #007bff;
    border-color: #007bff;
    color: #fff;
    z-index: 2
}

.list-group-item+.list-group-item {
    border-top-width: 0
}

.list-group-item+.list-group-item.active {
    border-top-width: 1px;
    margin-top: -1px
}

.list-group-horizontal {
    flex-direction: row
}

.list-group-horizontal>.list-group-item:first-child {
    border-bottom-left-radius: .25rem;
    border-top-right-radius: 0
}

.list-group-horizontal>.list-group-item:last-child {
    border-bottom-left-radius: 0;
    border-top-right-radius: .25rem
}

.list-group-horizontal>.list-group-item.active {
    margin-top: 0
}

.list-group-horizontal>.list-group-item+.list-group-item {
    border-left-width: 0;
    border-top-width: 1px
}

.list-group-horizontal>.list-group-item+.list-group-item.active {
    border-left-width: 1px;
    margin-left: -1px
}

@media (min-width: 576px) {
    .list-group-horizontal-sm {
        flex-direction:row
    }

    .list-group-horizontal-sm>.list-group-item:first-child {
        border-bottom-left-radius: .25rem;
        border-top-right-radius: 0
    }

    .list-group-horizontal-sm>.list-group-item:last-child {
        border-bottom-left-radius: 0;
        border-top-right-radius: .25rem
    }

    .list-group-horizontal-sm>.list-group-item.active {
        margin-top: 0
    }

    .list-group-horizontal-sm>.list-group-item+.list-group-item {
        border-left-width: 0;
        border-top-width: 1px
    }

    .list-group-horizontal-sm>.list-group-item+.list-group-item.active {
        border-left-width: 1px;
        margin-left: -1px
    }
}

@media (min-width: 768px) {
    .list-group-horizontal-md {
        flex-direction:row
    }

    .list-group-horizontal-md>.list-group-item:first-child {
        border-bottom-left-radius: .25rem;
        border-top-right-radius: 0
    }

    .list-group-horizontal-md>.list-group-item:last-child {
        border-bottom-left-radius: 0;
        border-top-right-radius: .25rem
    }

    .list-group-horizontal-md>.list-group-item.active {
        margin-top: 0
    }

    .list-group-horizontal-md>.list-group-item+.list-group-item {
        border-left-width: 0;
        border-top-width: 1px
    }

    .list-group-horizontal-md>.list-group-item+.list-group-item.active {
        border-left-width: 1px;
        margin-left: -1px
    }
}

@media (min-width: 992px) {
    .list-group-horizontal-lg {
        flex-direction:row
    }

    .list-group-horizontal-lg>.list-group-item:first-child {
        border-bottom-left-radius: .25rem;
        border-top-right-radius: 0
    }

    .list-group-horizontal-lg>.list-group-item:last-child {
        border-bottom-left-radius: 0;
        border-top-right-radius: .25rem
    }

    .list-group-horizontal-lg>.list-group-item.active {
        margin-top: 0
    }

    .list-group-horizontal-lg>.list-group-item+.list-group-item {
        border-left-width: 0;
        border-top-width: 1px
    }

    .list-group-horizontal-lg>.list-group-item+.list-group-item.active {
        border-left-width: 1px;
        margin-left: -1px
    }
}

@media (min-width: 1200px) {
    .list-group-horizontal-xl {
        flex-direction:row
    }

    .list-group-horizontal-xl>.list-group-item:first-child {
        border-bottom-left-radius: .25rem;
        border-top-right-radius: 0
    }

    .list-group-horizontal-xl>.list-group-item:last-child {
        border-bottom-left-radius: 0;
        border-top-right-radius: .25rem
    }

    .list-group-horizontal-xl>.list-group-item.active {
        margin-top: 0
    }

    .list-group-horizontal-xl>.list-group-item+.list-group-item {
        border-left-width: 0;
        border-top-width: 1px
    }

    .list-group-horizontal-xl>.list-group-item+.list-group-item.active {
        border-left-width: 1px;
        margin-left: -1px
    }
}

.list-group-flush {
    border-radius: 0
}

.list-group-flush>.list-group-item {
    border-width: 0 0 1px
}

.list-group-flush>.list-group-item:last-child {
    border-bottom-width: 0
}

.list-group-item-primary {
    background-color: #b8daff;
    color: #004085
}

.list-group-item-primary.list-group-item-action:focus,.list-group-item-primary.list-group-item-action:hover {
    background-color: #9fcdff;
    color: #004085
}

.list-group-item-primary.list-group-item-action.active {
    background-color: #004085;
    border-color: #004085;
    color: #fff
}

.list-group-item-secondary {
    background-color: #d6d8db;
    color: #383d41
}

.list-group-item-secondary.list-group-item-action:focus,.list-group-item-secondary.list-group-item-action:hover {
    background-color: #c8cbcf;
    color: #383d41
}

.list-group-item-secondary.list-group-item-action.active {
    background-color: #383d41;
    border-color: #383d41;
    color: #fff
}

.list-group-item-success {
    background-color: #c3e6cb;
    color: #155724
}

.list-group-item-success.list-group-item-action:focus,.list-group-item-success.list-group-item-action:hover {
    background-color: #b1dfbb;
    color: #155724
}

.list-group-item-success.list-group-item-action.active {
    background-color: #155724;
    border-color: #155724;
    color: #fff
}

.list-group-item-info {
    background-color: #bee5eb;
    color: #0c5460
}

.list-group-item-info.list-group-item-action:focus,.list-group-item-info.list-group-item-action:hover {
    background-color: #abdde5;
    color: #0c5460
}

.list-group-item-info.list-group-item-action.active {
    background-color: #0c5460;
    border-color: #0c5460;
    color: #fff
}

.list-group-item-warning {
    background-color: #ffeeba;
    color: #856404
}

.list-group-item-warning.list-group-item-action:focus,.list-group-item-warning.list-group-item-action:hover {
    background-color: #ffe8a1;
    color: #856404
}

.list-group-item-warning.list-group-item-action.active {
    background-color: #856404;
    border-color: #856404;
    color: #fff
}

.list-group-item-danger {
    background-color: #f5c6cb;
    color: #721c24
}

.list-group-item-danger.list-group-item-action:focus,.list-group-item-danger.list-group-item-action:hover {
    background-color: #f1b0b7;
    color: #721c24
}

.list-group-item-danger.list-group-item-action.active {
    background-color: #721c24;
    border-color: #721c24;
    color: #fff
}

.list-group-item-light {
    background-color: #fdfdfe;
    color: #818182
}

.list-group-item-light.list-group-item-action:focus,.list-group-item-light.list-group-item-action:hover {
    background-color: #ececf6;
    color: #818182
}

.list-group-item-light.list-group-item-action.active {
    background-color: #818182;
    border-color: #818182;
    color: #fff
}

.list-group-item-dark {
    background-color: #c6c8ca;
    color: #1b1e21
}

.list-group-item-dark.list-group-item-action:focus,.list-group-item-dark.list-group-item-action:hover {
    background-color: #b9bbbe;
    color: #1b1e21
}

.list-group-item-dark.list-group-item-action.active {
    background-color: #1b1e21;
    border-color: #1b1e21;
    color: #fff
}

.list-group .list-group-item {
	background: rgba(14, 12, 8, 0.21);
}

.list-group .list-group-item.active {
	border:1px solid #a37622;
	color: #fff;
}

.close {
    color: #000;
    float: right;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    opacity: .5;
    text-shadow: 0 1px 0 #fff
}

.close:hover {
    color: #000;
    text-decoration: none
}

.close:not(:disabled):not(.disabled):focus,.close:not(:disabled):not(.disabled):hover {
    opacity: .75
}

button.close {
    background-color: transparent;
    border: 0;
    padding: 0
}

a.close.disabled {
    pointer-events: none
}

.toast {
    background-clip: padding-box;
    background-color: hsla(0,0%,100%,.85);
    border: 1px solid rgba(0,0,0,.1);
    border-radius: .25rem;
    box-shadow: 0 .25rem .75rem rgba(0,0,0,.1);
    flex-basis: 350px;
    font-size: .875rem;
    max-width: 350px;
    opacity: 0
}

.toast:not(:last-child) {
    margin-bottom: .75rem
}

.toast.showing {
    opacity: 1
}

.toast.show {
    display: block;
    opacity: 1
}

.toast.hide {
    display: none
}

.toast-header {
    align-items: center;
    background-clip: padding-box;
    background-color: hsla(0,0%,100%,.85);
    border-bottom: 1px solid rgba(0,0,0,.05);
    border-top-left-radius: calc(.25rem - 1px);
    border-top-right-radius: calc(.25rem - 1px);
    color: #6c757d;
    display: flex;
    padding: .25rem .75rem
}

.toast-body {
    padding: .75rem
}

.modal-open {
    overflow: hidden
}

.modal-open .modal {
    overflow-x: hidden;
    overflow-y: auto
}

.modal {
    display: none;
    height: 100%;
    left: 0;
    outline: 0;
    overflow: hidden;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1050
}

.modal-dialog {
    margin: .5rem;
    pointer-events: none;
    position: relative;
    width: auto
}

.modal.fade .modal-dialog {
    transform: translateY(-50px);
    transition: transform .3s ease-out
}

@media (prefers-reduced-motion:reduce) {
    .modal.fade .modal-dialog {
        transition: none
    }
}

.modal.show .modal-dialog {
    transform: none
}

.modal.modal-static .modal-dialog {
    transform: scale(1.02)
}

.modal-dialog-scrollable {
    display: flex;
    max-height: calc(100% - 1rem)
}

.modal-dialog-scrollable .modal-content {
    max-height: calc(100vh - 1rem);
    overflow: hidden
}

.modal-dialog-scrollable .modal-footer,.modal-dialog-scrollable .modal-header {
    flex-shrink: 0
}

.modal-dialog-scrollable .modal-body {
    overflow-y: auto
}

.modal-dialog-centered {
    align-items: center;
    display: flex;
    min-height: calc(100% - 1rem)
}

.modal-dialog-centered:before {
    content: "";
    display: block;
    height: calc(100vh - 1rem);
    height: -webkit-min-content;
    height: -moz-min-content;
    height: min-content
}

.modal-dialog-centered.modal-dialog-scrollable {
    flex-direction: column;
    height: 100%;
    justify-content: center
}

.modal-dialog-centered.modal-dialog-scrollable .modal-content {
    max-height: none
}

.modal-dialog-centered.modal-dialog-scrollable:before {
    content: none
}

.modal-content {
    background-clip: padding-box;
    background-color: #fff;
    border: 1px solid rgba(0,0,0,.2);
    border-radius: .3rem;
    display: flex;
    flex-direction: column;
    outline: 0;
    pointer-events: auto;
    position: relative;
    width: 100%
}

.modal-backdrop {
    background-color: #000;
    height: 100vh;
    left: 0;
    position: fixed;
    top: 0;
    width: 100vw;
    z-index: 1040
}

.modal-backdrop.fade {
    opacity: 0
}

.modal-backdrop.show {
    opacity: .5
}

.modal-header {
    align-items: flex-start;
    border-bottom: 1px solid #dee2e6;
    border-top-left-radius: calc(.3rem - 1px);
    border-top-right-radius: calc(.3rem - 1px);
    display: flex;
    justify-content: space-between;
    padding: 1rem
}

.modal-header .close {
    margin: -1rem -1rem -1rem auto;
    padding: 1rem
}

.modal-title {
    line-height: 1.5;
    margin-bottom: 0
}

.modal-body {
    flex: 1 1 auto;
    padding: 1rem;
    position: relative
}

.modal-footer {
    align-items: center;
    border-bottom-left-radius: calc(.3rem - 1px);
    border-bottom-right-radius: calc(.3rem - 1px);
    border-top: 1px solid #dee2e6;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    padding: .75rem
}

.modal-footer>* {
    margin: .25rem
}

.modal-scrollbar-measure {
    height: 50px;
    overflow: scroll;
    position: absolute;
    top: -9999px;
    width: 50px
}

@media (min-width: 576px) {
    .modal-dialog {
        margin:1.75rem auto;
        max-width: 500px
    }

    .modal-dialog-scrollable {
        max-height: calc(100% - 3.5rem)
    }

    .modal-dialog-scrollable .modal-content {
        max-height: calc(100vh - 3.5rem)
    }

    .modal-dialog-centered {
        min-height: calc(100% - 3.5rem)
    }

    .modal-dialog-centered:before {
        height: calc(100vh - 3.5rem);
        height: -webkit-min-content;
        height: -moz-min-content;
        height: min-content
    }

    .modal-sm {
        max-width: 300px
    }
}

@media (min-width: 992px) {
    .modal-lg,.modal-xl {
        max-width:800px
    }
}

@media (min-width: 1200px) {
    .modal-xl {
        max-width:1140px
    }
}

input[type=radio]:checked+label {
	background: rgb(81 61 21 / 21%);
	box-shadow: 0vh 0vh 1vh #eeba75;
	color: #fff;
}

input[type=radio]:not(:disabled)~label {
	cursor: pointer;
}

input[type=radio] {
	display: none;
}
/*audio plain*/
.nk-audio-plain {
    display: table;
    width: 100%;
    padding: 20px 15px;
    color: #0e0e0e;
    background-color: #fff;
}

.nk-audio-plain > div {
    display: table-cell;
}

.nk-audio-plain .nk-audio-plain-title {
    width: 99%;
}

.nk-audio-plain .nk-audio-plain-buttons {
    white-space: nowrap;
}

.nk-audio-plain .nk-audio-plain-buttons > a {
    display: inline-block;
    width: 30px;
    color: inherit;
    text-align: center;
    text-decoration: none;
}

.nk-audio-plain .nk-audio-plain-play-pause {
    display: inline-block;
    width: 38px;
    height: 38px;
    margin-right: 15px;
    margin-left: 7px;
    font-size: 1.1rem;
    line-height: 38px;
    color: #fff;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    background-color: #2d2d2d;
    border-radius: 19px;
}

.nk-audio-plain .nk-audio-plain-play-pause .nk-audio-plain-pause {
    display: none;
}

.nk-audio-plain.nk-audio-plain-playing .nk-audio-plain-play-pause .nk-audio-plain-play {
    display: none;
}

.nk-audio-plain.nk-audio-plain-playing .nk-audio-plain-play-pause .nk-audio-plain-pause {
    display: block;
}

.nk-audio-plain .nk-audio-plain-duration {
    display: inline-block;
    width: 58px;
    margin-right: 7px;
    font-size: .9rem;
    text-align: right;
}

.nk-audio-plain .nk-audio-progress {
    position: relative;
    right: 0;
    left: 0;
    height: 1px;
    margin-top: 2px;
    margin-bottom: 2px;
    cursor: pointer;
    background-color: #ddd;
    z-index: 1;
}

.nk-audio-plain .nk-audio-progress::before {
    content: "";
    position: absolute;
    display: block;
    top: -8px;
    right: 0;
    bottom: -8px;
    left: 0;
}

.nk-audio-plain .nk-audio-progress .nk-audio-progress-current {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 0;
    background-color: #777;
    -webkit-transition: .3s background-color;
    -o-transition: .3s background-color;
    transition: .3s background-color;
    z-index: 1;
}

.nk-audio-plain .nk-audio-progress .nk-audio-progress-current::after {
    content: "";
    position: absolute;
    top: -2px;
    right: -2px;
    width: 5px;
    height: 5px;
    background-color: #2d2d2d;
    border-radius: 2.5px;
    -webkit-transition: .3s transform;
    -o-transition: .3s transform;
    transition: .3s transform;
    -webkit-transform: scale(0);
        -ms-transform: scale(0);
            transform: scale(0);
}

.nk-audio-plain .nk-audio-progress:hover .nk-audio-progress-current,
.nk-audio-plain .nk-audio-progress.hover .nk-audio-progress-current {
    background-color: #2d2d2d;
}

.nk-audio-plain .nk-audio-progress:hover .nk-audio-progress-current::after,
.nk-audio-plain .nk-audio-progress.hover .nk-audio-progress-current::after {
    -webkit-transform: scale(1);
        -ms-transform: scale(1);
            transform: scale(1);
}

.nk-audio-plain.nk-audio-plain-dark {
    color: #fff;
    background-color: #181818;
}

.nk-audio-plain.nk-audio-plain-dark .nk-audio-plain-play-pause {
    color: #0e0e0e;
    background-color: #fff;
}

.nk-audio-plain.nk-audio-plain-dark .nk-audio-progress {
    background-color: #2d2d2d;
}

.nk-audio-plain.nk-audio-plain-dark .nk-audio-progress .nk-audio-progress-current {
    background-color: #bbb;
}

.nk-audio-plain.nk-audio-plain-dark .nk-audio-progress .nk-audio-progress-current::after {
    background-color: #fff;
}

.nk-audio-plain.nk-audio-plain-dark .nk-audio-progress:hover .nk-audio-progress-current,
.nk-audio-plain.nk-audio-plain-dark .nk-audio-progress.hover .nk-audio-progress-current {
    background-color: #fff;
}

/* pop up ad shop */
.shoppush-popchat,
.shoppush-popchat input,
.shoppush-popchat button {
    font-family: "Verdana", sans-serif;
}

.shoppush-popchat #fb-root {
    display: none !important;
}

.shoppush-popchat * {
    transition: all 0.1s ease-out;
}

.shoppush-popchat .buzz {
    animation: buzz .6s linear;
}

.shoppush-popchat .sprt {
	background: url(../images/ui/sprt.png) no-repeat 0 0;
    background-size: 53px;
}

.shoppush-popchat .hide {
    display: none !important;
}

.shoppush-popchat .just-mobile {
    display: none !important;
}

.shoppush-popchat .brand {
    position: relative;
    inline-size: 80px;
    block-size: 80px;
    border-radius: 50%;
}

    .shoppush-popchat .brand > span,
    .shoppush-popchat .brand > img {
        position: absolute;
        display: block;
		border: 0.2vh solid rgba(104, 91, 68, 0.65);
		border-radius: 30%;
    }

.shoppush-popchat .brand__al {
    background-color: #e60000;
    inset-block-start: 0;
    inset-inline-end: 0;
    inline-size: 20px;
    block-size: 20px;
    border-radius: 50%;
    z-index: 2;
    line-height: 20px;
    text-align: center;
    color: #f2f2f2;
    font-size: 12px;
    font-weight: bold;
}

.shoppush-popchat .brand__ty {
    inset-block-start: -21px;
    inset-inline-start: -24px;
    inline-size: 50px;
    padding-block-start: 20px;
    padding-inline-end: 0;
    padding-block-end: 0;
    padding-inline-start: 11px;
	height: 50px;
    z-index: 2;
    font-size: 0;
    animation: fakeType 0.5s ease-in-out;
	border: 0px !important;
	border-radius: 0% !important;
}

    .shoppush-popchat .brand__ty i {
        background-color: #1a1a1a !important;
        display: inline-block;
        inline-size: 6px;
        block-size: 6px;
        margin: 0 2px;
        border-radius: 50%;
    }

        .shoppush-popchat .brand__ty i:nth-child(1) {
            animation: loadingFakeType 1s infinite;
        }

        .shoppush-popchat .brand__ty i:nth-child(2) {
            animation: loadingFakeType 1s infinite;
            animation-delay: .1s;
        }

        .shoppush-popchat .brand__ty i:nth-child(3) {
            animation: loadingFakeType 1s infinite;
            animation-delay: .2s;
        }

.shoppush-popchat .by {
    position: absolute;
    inset-block-end: -22px;
    inset-inline-end: 25px;
    line-height: 20px;
    text-align: end;
    font-size: 12px;
}

    .shoppush-popchat .by a,
    .shoppush-popchat .by a:hover,
    .shoppush-popchat .by a:visited {
        color: inherit;
    }

.shoppush-popchat .btn {
    display: inline-block;
    padding: 30px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: bold;
    text-decoration: none;
    cursor: pointer;
}

.shoppush-popchat > div.plg {
    inline-size: 80px;
    block-size: 80px;
    border-radius: 50%;
    box-shadow: 0 0 14px rgba(0, 0, 0, 0.75);
    position: fixed;
    inset-block-start: 100px;
    inset-inline-end: 10px;
    cursor: pointer;
    animation: wobble 0.8s ease-in-out;
}

    .shoppush-popchat > div.plg.dark h1,
    .shoppush-popchat > div.plg.dark p {
        color: #1a1a1a !important;
    }

    .shoppush-popchat > div.plg.dark .close__icon:after,
    .shoppush-popchat > div.plg.dark .close__icon:before {
        background-color: #1a1a1a !important;
    }

    .shoppush-popchat > div.plg > div {
        position: relative;
        float: inline-start;
        block-size: 80px;
    }

    .shoppush-popchat > div.plg .not {
        display: none;
        inline-size: 310px;
        margin-inline-start: 15px;
    }

        .shoppush-popchat > div.plg .not h1,
        .shoppush-popchat > div.plg .not p {
            color: #f2f2f2;
        }

        .shoppush-popchat > div.plg .not h1 {
            font-size: 16px;
            font-weight: bold;
            margin-block-end: 5px;
        }

        .shoppush-popchat > div.plg .not p {
            font-size: 14px;
            font-weight: regular;
        }

    .shoppush-popchat > div.plg .close {
        display: none;
        inline-size: 45px;
        margin-inline-start: 10px;
    }

    .shoppush-popchat > div.plg .close__icon {
        position: relative;
        display: block;
        inline-size: 15px;
        block-size: 15px;
        margin: 0 auto;
        padding: 14px;
        border-radius: 50%;
    }

        .shoppush-popchat > div.plg .close__icon:hover,
        .shoppush-popchat > div.plg .close__icon:active {
            background-color: rgba(0, 0, 0, 0.07);
        }

        .shoppush-popchat > div.plg .close__icon:after,
        .shoppush-popchat > div.plg .close__icon:before {
            content: "";
            position: absolute;
            inset-block-start: 20px;
            inset-inline-end: 13px;
            display: block;
            inline-size: 18px;
            block-size: 4px;
            border-radius: 2px;
            background-color: #fff;
        }

        .shoppush-popchat > div.plg .close__icon:after {
            transform: rotate(45deg);
        }

        .shoppush-popchat > div.plg .close__icon:before {
            transform: rotate(-45deg);
        }

    .shoppush-popchat > div.plg .by {
        display: none;
        color: #fff;
        text-shadow: 0 0 3px #000;
    }

    .shoppush-popchat > div.plg.open {
        inset-block-start: 150px;
        inline-size: 460px;
        block-size: calc(10%)
        padding: 10px;
        border-radius: 10px;
        box-shadow: 0 0 14px rgba(0, 0, 0, 0.35);
		background: rgba(37, 33, 26, 0.95);
    }

        .shoppush-popchat > div.plg.open .brand {
            animation: textIn 0.6s ease-in-out;
        }

        .shoppush-popchat > div.plg.open .brand__al,
        .shoppush-popchat > div.plg.open .brand__ty {
            display: none;
        }

        .shoppush-popchat > div.plg.open .not,
        .shoppush-popchat > div.plg.open .close {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
        }

        .shoppush-popchat > div.plg.open .not {
            animation: textIn 0.5s ease-out;
        }

        .shoppush-popchat > div.plg.open .by {
            display: block;
        }

    .shoppush-popchat > div.plg.left {
        inset-inline-end: initial;
        inset-inline-start: 10px;
    }

        .shoppush-popchat > div.plg.left > div {
            float: inline-end;
        }

        .shoppush-popchat > div.plg.left .brand__ty {
            transform: scaleX(-1);
            inset-inline-start: initial;
            inset-inline-end: -24px;
        }

            .shoppush-popchat > div.plg.left .brand__ty i:nth-child(1) {
                animation-delay: .2s;
            }

            .shoppush-popchat > div.plg.left .brand__ty i:nth-child(2) {
                animation-delay: .1s;
            }

            .shoppush-popchat > div.plg.left .brand__ty i:nth-child(3) {
                animation-delay: 0s;
            }

        .shoppush-popchat > div.plg.left .close {
            margin-inline-start: 0;
            margin-inline-end: 10px;
        }

        .shoppush-popchat > div.plg.left .by {
            inset-inline-end: initial;
            inset-inline-start: 25px;
        }

.shoppush-popchat {
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    align-items: stretch;
}

    .shoppush-popchat .btn {
        color: #f2f2f2 !important;
    }

        .shoppush-popchat .btn.dark {
            color: #1a1a1a !important;
        }

    .shoppush-popchat.dark .btn {
        color: #1a1a1a !important;
    }

    .shoppush-popchat > div {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        position: relative;
    }

    .shoppush-popchat .pop-box {
        inline-size: 39%;
    }

        .shoppush-popchat .pop-box > img {
            display: block;
            margin: 0 auto;
        }

        .shoppush-popchat .pop-box .brand {
            position: absolute;
            inset-block-start: calc(10%);
            inset-inline-end: -40px;
        }

    .shoppush-popchat .pop-text {
        flex: 1;
    }

        .shoppush-popchat .pop-text > div {
            inline-size: 100%;
            padding: 0 65px;
            text-align: center;
            color: #1a1a1a;
        }

            .shoppush-popchat .pop-text > div h1 {
                margin-block-start: 15px;
                margin-block-end: 25px;
                font-size: 24px;
            }

            .shoppush-popchat .pop-text > div p {
                font-size: 18px;
                margin-block-end: 15px;
            }

                .shoppush-popchat .pop-text > div p.small {
                    font-size: 14px;
                }

            .shoppush-popchat .pop-text > div .form {
                inline-size: 100%;
                margin: 30px 0;
                font-size: 0;
            }

                .shoppush-popchat .pop-text > div .form > input,
                .shoppush-popchat .pop-text > div .form > label {
                    display: inline;
                    block-size: 40px;
                    margin: 0 1%;
                    line-height: 40px;
                    vertical-align: middle;
                    font-size: 15px;
                }

                .shoppush-popchat .pop-text > div .form > input {
                    block-size: 40px;
                    padding: 0 3%;
                    line-height: 40px;
                    border: 1px solid #1a1a1a;
                    border-radius: 5px;
                }

                    .shoppush-popchat .pop-text > div .form > input.name {
                        inline-size: 130px;
                    }

                    .shoppush-popchat .pop-text > div .form > input.email {
                        inline-size: 200px;
                    }

                .shoppush-popchat .pop-text > div .form > button {
                    margin-block-start: 20px;
                }

        .shoppush-popchat .pop-text .by {
            inset-inline-end: 0;
            inset-block-end: 10px;
            inline-size: 100%;
            font-size: 14px;
            text-align: center;
            color: #939393;
        }

            .shoppush-popchat .pop-text .by a {
                text-decoration: underline;
            }

    .shoppush-popchat.stp0 .pop-box .brand,
    .shoppush-popchat.stp0 .s1,
    .shoppush-popchat.stp0 .s2,
    .shoppush-popchat.stp0 .s3,
    .shoppush-popchat.stp0 .s4 {
        display: none;
    }

    .shoppush-popchat.stp0 .pop-box {
        inline-size: 100%;
        block-size: 100%;
    }

        .shoppush-popchat.stp0 .pop-box > img {
            display: block;
        }

    .shoppush-popchat.stp1 .s2,
    .shoppush-popchat.stp1 .s3,
    .shoppush-popchat.stp1 .s4 {
        display: none;
    }

    .shoppush-popchat.stp2 .pop-box > img,
    .shoppush-popchat.stp2 .s1,
    .shoppush-popchat.stp2 .s3,
    .shoppush-popchat.stp2 .s4 {
        display: none;
    }

    .shoppush-popchat.stp3 .pop-box {
        inline-size: 20%;
    }

        .shoppush-popchat.stp3 .pop-box > img,
        .shoppush-popchat.stp3 .s1,
        .shoppush-popchat.stp3 .s2,
        .shoppush-popchat.stp3 .s4 {
            display: none;
        }

    .shoppush-popchat.stp4 .pop-box {
        inline-size: 25%;
    }

        .shoppush-popchat.stp4 .pop-box > img,
        .shoppush-popchat.stp4 .s1,
        .shoppush-popchat.stp4 .s2,
        .shoppush-popchat.stp4 .s3 {
            display: none;
        }

@keyframes fakeType {
    0% {
        opacity: 0;
        margin-block-start: 8px;
    }

    70% {
        opacity: 1;
        margin-block-start: -4px;
    }

    100% {
        opacity: 1;
        margin-block-start: 0;
    }
}

@keyframes loadingFakeType {
    0%, 100% {
        opacity: 0;
        transform: translateY(-3px);
    }

    50% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes textIn {
    0% {
        opacity: 0;
        transform: translateX(-16px);
    }

    70% {
        transform: translateX(4px);
    }

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

@keyframes buzz {
    10% {
        transform: translateX(3px) rotate(2deg);
    }

    20% {
        transform: translateX(-3px) rotate(-2deg);
    }

    30% {
        transform: translateX(3px) rotate(2deg);
    }

    40% {
        transform: translateX(-3px) rotate(-2deg);
    }

    50% {
        transform: translateX(2px) rotate(1deg);
    }

    60% {
        transform: translateX(-2px) rotate(-1deg);
    }

    70% {
        transform: translateX(2px) rotate(1deg);
    }

    80% {
        transform: translateX(-2px) rotate(-1deg);
    }

    90% {
        transform: translateX(1px) rotate(0);
    }

    100% {
        transform: translateX(-1px) rotate(0);
    }
}

@keyframes wobble {
    0% {
        transform: translateX(16px);
        opacity: 0;
    }

    16.65% {
        transform: translateX(-8px);
    }

    33.3% {
        transform: translateX(6px);
    }

    49.95% {
        transform: translateX(-4px);
        opacity: 1;
    }

    66.6% {
        transform: translateX(2px);
    }

    83.25% {
        transform: translateX(-1px);
    }

    100% {
        transform: translateX(0);
    }
}

.shop_btn {
    width: 200px !important;
    height: 6.7vh;
    border-radius: 0.4vh;
    background: linear-gradient(rgb(98, 80, 35), rgb(135, 113, 58));
    display: inline-flex;
    align-items: center;
    position: relative;
    border: 0.3vh solid rgb(199, 183, 153);

    transition: .5s;

    &:hover {
        border: 0.3vh solid rgb(252, 244, 231);
        box-shadow: inset 0vh 0vh 2vh wheat;
    }
	
	span {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.7vh;
        color: white;
        border-radius: 10vh;
        position: relative;

        i {
            z-index: 1;
            margin: 0 !important;
        }

        &::before {
            content: '';
            top: 0;
            width: 60%;
            height: 100%;
            clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
            position: absolute;
            background-color: rgba(217, 211, 166, 0.293);
        }
    }

    .decoration {
        position: absolute;
        left: 0;
        display: flex;
        align-items: center;
        width: 100%;
        height: 100%;

        img {
            position: absolute;
            z-index: 0;
            width: 6.2vh;
        }

        img:nth-child(1) {
            left: -3.8vh;
        }

        img:nth-child(2) {
            right: -3.8vh;
        }
    }
}

.floating-btn {
	border-radius: 26.5px;
	background-color: #282112;
	border: 1px solid #6b6969;
	color: #fff;
	cursor: pointer;
	font-size: 16px;
	line-height: 20px;
	padding: 12px 20px;
	inset-block-end: 20px;
	inset-inline-end: 20px;
	z-index: 999;
}

.floating-btn:hover {
	background-color: #282012;
	color: #fff;
    box-shadow: 0 9px 12px -9px #eeba75;
}

.floating-btn:focus {
	outline: none;
}

.floating-text {
	background-color: #001f61;
	border-radius: 10px 10px 0 0;
	color: #fff;
	font-family: "Muli";
	padding: 7px 15px;
	position: fixed;
	inset-block-end: 0;
	inset-inline-start: 50%;
	transform: translateX(-50%);
	text-align: center;
	z-index: 998;
}

.floating-text a {
	color: #ff7500;
	text-decoration: none;
}

.badge-name-wrap {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.badge-name-wrap > span {
    display: inline-block;
    width: 16px;
    height: 11px;
    min-width: 16px;
    overflow: hidden;
    vertical-align: middle;
    flex-shrink: 0;
    line-height: 0;
    font-size: 0;
}
.badge-name-wrap > span table {
    display: table !important;
    width: 16px !important;
    height: 11px !important;
    table-layout: fixed !important;
    border-collapse: collapse !important;
}
.badge-name-wrap > span table tr {
    display: table-row !important;
    height: 1px !important;
}
.badge-name-wrap > span table td {
    display: table-cell !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    border: none !important;
}
/* rankings */
.ranking-container {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 15px;
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.ranking-table {
    width: 100%;
    border-collapse: collapse;
    color: #fff;
}

.ranking-table thead tr {
    border-bottom: 2px solid #3d2f1a;
}

.ranking-table th {
    padding: 15px 10px;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 1px;
    color: #8a8370;
}

.rank-badge-trophy {
    width: 48px;
    height: 48px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    border-radius: 4px;
    transition: transform 0.3s ease;
}
.rank-badge-trophy:hover { transform: scale(1.08); }

.rank-badge-trophy.rank-gold {
    /*animation: medieval-shimmer-gold 3.5s ease-in-out infinite;*/
}

.rank-badge-trophy.rank-silver {
    /*animation: medieval-shimmer-silver 3.5s ease-in-out infinite;*/
}

.rank-badge-trophy.rank-bronze {
    /*animation: medieval-shimmer-bronze 3.5s ease-in-out infinite;*/
}

.rank-badge-trophy svg {
    width: 32px;
    height: 32px;
    position: relative;
    z-index: 1;
}

.rank-badge-num {
    width: 38px;
    height: 38px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 13px;
    font-family: 'Georgia', 'Times New Roman', serif;
    color: rgba(160,148,110,0.8);
    position: relative;
    transition: all 0.2s ease;
}

@keyframes medieval-shimmer-gold {
    0%, 100% { }
    50%       { transform: scale(1.04); }
}
@keyframes medieval-shimmer-silver {
    0%, 100% { box-shadow: 0 0 5px rgba(140,140,170,0.3), 0 0 12px rgba(100,100,130,0.15); }
    50%       { box-shadow: 0 0 8px rgba(170,170,200,0.45), 0 0 18px rgba(130,130,160,0.25); transform: scale(1.03); }
}
@keyframes medieval-shimmer-bronze {
    0%, 100% { box-shadow: 0 0 5px rgba(150,90,30,0.3), 0 0 12px rgba(110,60,10,0.15); }
    50%       { box-shadow: 0 0 8px rgba(175,110,45,0.45), 0 0 18px rgba(135,80,20,0.25); transform: scale(1.03); }
}

.ranking-table td {
    vertical-align: middle !important;
    height: 60px;
    text-align: center;
}

.top-rank {
    background: #f5c842;
    color: #000;
    box-shadow: 0 0 10px rgba(245, 200, 66, 0.5);
}

/* Icons */
.rank-icon {
    width: 32px;
    height: 32px;
    border-radius: 4px;
    border: 1px solid rgba(255,255,255,0.2);
}

.kda-wrapper {
    gap: 10px;
    font-size: 0.9rem;
}
.k-label { color: #28a745; font-weight: bold; }
.d-label { color: #dc3545; font-weight: bold; }

.status-indicator {
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 20px;
    text-transform: uppercase;
    font-weight: bold;
}
.status-success { background: rgba(40, 167, 69, 0.2); color: #28a745; border: 1px solid #28a745; }
.status-danger { background: rgba(220, 53, 69, 0.2); color: #dc3545; border: 1px solid #dc3545; }

/* --- MOBILE RESPONSIVE --- */
@media (max-width: 768px) {
    .ranking-table thead {
        display: none;
    }

    .ranking-table tr {
        display: block;
        margin-bottom: 15px;
        background: rgba(255, 255, 255, 0.05);
        border-radius: 10px;
        padding: 10px;
        border: 1px solid rgba(255,255,255,0.1);
    }

    .ranking-table td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border: none;
        padding: 5px 10px;
        text-align: right;
    }

    .ranking-table td::before {
        content: attr(data-label);
        float: left;
        text-transform: uppercase;
        color: #f5c842;
        font-weight: bold;
        font-size: 0.8rem;
        letter-spacing: 0.5px;
    }
    
    .char-name { font-size: 1.1rem; border-bottom: 1px solid rgba(255,255,255,0.1) !important; margin-bottom: 5px; }

    /* Mobile: badge scale 3x agar terlihat jelas */
    .badge-name-wrap {
        display: inline-flex !important;
        align-items: center;
        gap: 8px;
    }
    .badge-name-wrap > span {
        display: inline-block !important;
        overflow: hidden !important;
        flex-shrink: 0;
        position: relative;
    }
    .badge-name-wrap > span table {
        display: table !important;
        width: 16px !important;
        height: 11px !important;
        table-layout: fixed !important;
        border-collapse: collapse !important;
        transform: scale(3) !important;
        transform-origin: top left !important;
        image-rendering: pixelated !important;
    }
    .badge-name-wrap > span table tr {
        display: table-row !important;
        height: 1px !important;
    }
    .badge-name-wrap > span table td {
        display: table-cell !important;
        width: 1px !important;
        height: 1px !important;
        padding: 0 !important;
        border: none !important;
    }
    .kda-wrapper { justify-content: flex-end; }
}

.top-players-panel {
    background: radial-gradient(circle at top left, rgba(85, 161, 255, 0.16), transparent)
              , linear-gradient(145deg, rgba(6, 14, 32, 0.96), rgba(7, 18, 40, 0.98));
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 14px 26px rgba(0, 0, 0, 0.55);
    overflow: hidden;
}

.top-players-panel .panel-body2 {
    padding: 10px 12px 8px;
}

/* Таблица */

.top-players-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
    color: #d8e4ff;
}

tr.top-players-row.top-players-row-first {
	border-radius: 0.8vh;
	border-bottom: 0.5vh;
	border: 0.2vh solid rgba(167, 155, 133, 0.08);
}

.top-players-header-row th {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
    color: var(--disable);
    padding: 3px 0 5px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

/* колонки */

.tp-col-class {
    /*width: 22%;
    text-align: center;*/
}

.tp-col-name {
    text-align: left;
}

.tp-col-resets {
    width: 22%;
    text-align: right;
    font-family: "Consolas", "Roboto Mono", monospace;
    color: #cddcff;
}

/* строки */

.top-players-row td {
    padding: 1px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

.top-players-row:last-child td {
    border-bottom: none;
}

/* лёгкое чередование фона */

.top-players-row:nth-child(2n+1) {
   /* background: rgba(8, 18, 39, 0.68);*/
}

.top-players-row:nth-child(2n) {
    /*background: rgba(7, 16, 34, 0.64);*/
}

/* аккуратное выделение топ-1 */

.top-players-row-first {
   /*background: linear-gradient(90deg, rgb(255 126 102 / 16%), rgb(20 13 8 / 66%));*/
}

.top-players-row-first td {
    font-weight: 100;
}

/* золотая полоска внутри первой ячейки топ-1 (аналог гильдий) */

.top-players-row-first td:first-child {
    position: relative;
    padding-left: 4px;
}

.top-players-row-first td:first-child::before {
    content: "";
    position: absolute;
    left: 0;
    top: 2px;
    bottom: 2px;
    width: 2px;
    border-radius: 2px;
    background: linear-gradient(to bottom, #bca18a, #aeaf7c, #a78870);
    box-shadow: 0 0 6px rgba(255, 214, 102, 0.8);
}

/* аватар класса */

.tp-col-class img,
.rankings-class-image {
    border-radius: 3px;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
}

/* ник */

.tp-col-name a,
.tp-col-name {
    color: #ffffff;
    text-shadow: 0 0 4px rgba(0, 0, 0, 0.9);
}

.tp-col-name a:hover {
    color: #f1f5ff;
    text-decoration: none;
}

/* ховер */

.top-players-row {
    position: relative;
    transition: background-color 0.12s ease-out, color 0.12s ease-out;
}

.top-players-row:hover {
    background-color: rgba(255, 198, 52, 0.848);
}

.club .club-body .club_conbox .loader:after,.pk-rank .pk-rank-body .loader:after,.player-rank .player-rank-body .loader:after,.server-status .server-status-body .loader:after,.contri-rank .contri-rank-body .loader:after {
    content: ' ';
    display: block;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 3px solid #690000;
    border-color: #690000 transparent;
    animation: 1.2s linear infinite dual-ring
}

.table_club td,.table_contri_rank td {
    border-bottom: 1px solid #2f2e2e;
    padding: 3px 0;
    text-align: center
}

.main_decoration {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
}
.main_decoration img {
  width: 12vh;
  height: auto;
  position: absolute;
}
.main_decoration img:nth-child(1) {
  left: 0;
  top: 0;
}
.main_decoration img:nth-child(2) {
  right: 0;
  bottom: 0;
  transform: rotate(180deg);
}
.main_decoration img:nth-child(3) {
  right: -0.75vh;
  top: 0.75vh;
  transform: rotate(90deg);
}
.main_decoration img:nth-child(4) {
  left: -0.8vh;
  bottom: 0.75vh;
  transform: rotate(-90deg);
}

.range input {
  transition: 0s !important;
}
.range span {
  transition: 0s !important;
}

input {
  font-family: "Maron Rose";
}

#calculation_board {
  margin-top: 6vh;
  width: 100%;
  margin-bottom: 6vh;
}
#calculation_board div {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 2vh;
  border: 0.2vh solid rgba(167, 155, 133, 0.08);
  color: rgb(174, 166, 151);
  padding: 1.5vh 2vh;
  background-color: rgba(14, 12, 8, 0.21);
  border-radius: 0.8vh;
  margin-bottom: 0.5vh;
}


/* table */
.latest-summury {
  /*padding: 120px 0;
  background: rgba(47,38,31,.852);*/
}
.latest-summury.latest-summury-3 .game-menu .nav .nav-item .nav-link {
  background: #201d2d;
}
.latest-summury.latest-summury-3 .all-bets .table tbody tr {
  background: #201d2d;
}
.latest-summury.latest-summury-3 .all-bets .table thead {
  background: #322d4e;
}
.latest-summury .all-bets {
  /*margin-left: -80px;*/
}
.latest-summury .all-bets .table-cover {
  padding: 5px;
  padding-right: 0;
  padding-bottom: 0;
  padding-top: 0;
}
.latest-summury .all-bets .table {
  border-collapse: separate;
  border-spacing: 0 1px;
  margin-bottom: 0;
  border: 0.2vh solid rgba(167, 155, 133, 0.08);
}

.latest-summury .all-bets .table thead {
  background: rgba(47,38,31,.852);
}
.latest-summury .all-bets .table thead tr {
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  border-bottom: none;
}
.latest-summury .all-bets .table thead tr th {
  border: none;
  padding: 0 30px;
  height: 60px;
  vertical-align: middle;
  color: rgba(255, 255, 255, 0.8);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0.5px;
  font-family: "Oswald", sans-serif;
}
.latest-summury .all-bets .table tbody tr {
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  background: rgba(167, 155, 133, 0.3);
  transition: all 0.3s ease-in;
}
.latest-summury .all-bets .table tbody tr th, .latest-summury .all-bets .table tbody tr td {
  border: none;
  padding: 0 30px;
  height: 60px;
  vertical-align: middle;
  color: rgba(255, 255, 255, 0.7);
  font-size: 15px;
  border-left: 1px solid rgba(255, 255, 255, 0.05);
}
.latest-summury .all-bets .table tbody tr th img, .latest-summury .all-bets .table tbody tr td img {
  width: 30px;
}
.latest-summury .all-bets .table tbody tr th {
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  background-image: -webkit-linear-gradient(130deg, #f3e808, #3b261b);
  border-left: none;
}
.latest-summury .all-bets .table tbody tr td.profit {
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  background-image: -webkit-linear-gradient(130deg, #ff416c, #ff4b2b);
  font-weight: 700;
}
.latest-summury .all-bets .table tbody tr:hover {
  box-shadow: 0vh 0vh 2vh #eeba75;
}
.latest-summury .all-bets .table tbody tr:last-child {
  border-bottom: none;
}
.latest-summury .all-bets .view-more-btn {
  margin-top: 30px;
}
.latest-summury .all-bets .view-more-btn a {
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.latest-summury .all-bets .view-more-btn a svg {
  width: 18px;
  top: -3px;
  position: relative;
  margin-left: 15px;
}
.latest-summury .all-bets .single-result {
  background: #242424;
  margin-bottom: 30px;
}
.latest-summury .all-bets .single-result .part-top {
  display: flex;
  padding: 20px;
}
.latest-summury .all-bets .single-result .part-top .user-img {
  width: 70px;
  height: 70px;
  overflow: hidden;
  margin-right: 20px;
  border-radius: 50%;
}
.latest-summury .all-bets .single-result .part-top .user-img img {
  width: 100%;
}
.latest-summury .all-bets .single-result .part-top .part-info {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.latest-summury .all-bets .single-result .part-top .part-info span {
  display: block;
}
.latest-summury .all-bets .single-result .part-top .part-info span.name {
  font-size: 20px;
  font-family: "Oswald", sans-serif;
  letter-spacing: 0.5px;
  color: #fff;
  margin-bottom: 3px;
  margin-top: -5px;
  font-weight: 500;
}
.latest-summury .all-bets .single-result .part-top .part-info span.bet-id {
  color: #999;
  font-size: 15px;
  margin-bottom: 10px;
}
.latest-summury .all-bets .single-result .part-top .part-info span.game {
  background: -webkit-linear-gradient(130deg, transparent, #ff4b2b);
  color: #fff;
  text-transform: uppercase;
  font-size: 15px;
  padding: 4px 0px;
  text-align: center;
  letter-spacing: 0.5px;
  font-family: "Oswald", sans-serif;
}
.latest-summury .all-bets .single-result .part-bottom {
  background: #2a2a2a;
  padding: 20px;
}
.latest-summury .all-bets .single-result .part-bottom ul li {
  position: relative;
  padding: 5px 0;
  padding-left: 25px;
}
.latest-summury .all-bets .single-result .part-bottom ul li:last-child {
  padding-bottom: 0;
}
.latest-summury .all-bets .single-result .part-bottom ul li:last-child:after {
  display: none;
}
.latest-summury .all-bets .single-result .part-bottom ul li:first-child {
  padding-top: 0;
}
.latest-summury .all-bets .single-result .part-bottom ul li:after {
  position: absolute;
  content: "";
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: -webkit-linear-gradient(130deg, #ff416c, #ff4b2b);
  background: #fff;
  opacity: 0.05;
}
.latest-summury .all-bets .single-result .part-bottom ul li:before {
  position: absolute;
  content: "";
  left: 0;
  top: 50%;
  margin-top: -4px;
  width: 8px;
  height: 8px;
  background: -webkit-linear-gradient(130deg, #ff416c, #ff4b2b);
  border-radius: 50%;
}
.latest-summury .all-bets .single-result .part-bottom ul li span {
  display: inline-block;
  font-family: "Oswald", sans-serif;
  font-size: 15px;
  letter-spacing: 0.5px;
}
.latest-summury .all-bets .single-result .part-bottom ul li span.title {
  width: 37%;
  color: #999;
}
.latest-summury .all-bets .single-result .part-bottom ul li span.descr {
  color: #ababab;
}
.latest-summury .all-bets .single-result .part-bottom ul li span.descr:before {
  content: ":";
  margin-right: 5px;
}

@media only screen and (min-width: 320px) and (max-width: 479px) {
	.secon_btn {
		width: 11vh;
	}
    .page_content .latest-summury {
		width: 140% !important;
		margin-left: -55px;
	}
	.main_type div a {
		width: 33.29% !important;
		height: 5vh !important;
	}
	.main_type div a {
		font-size: 1.4vh !important;
	}
	.main_calculation form div span{
		padding: 0vh 1vh !important;
		font-size: 1vh !important;
	}
	.main_calculation.post img {
		width: 100% !important;
		height: 100% !important;
	}		
	.wheel_content {
		width: 90%;
	}
	.out {
		width: 95%;
		top: 38%;
	}
	.shoppush-popchat > div.plg .not {
		inline-size: 200px;
	}
	.shoppush-popchat > div.plg .not p {
		font-size: 9px;
	}
	.shoppush-popchat > div.plg.open {
		inset-block-start: 50px;
		inline-size: 360px;
	}
	.status-container {
		margin-left: -50px;
	}
	.inventory-container {
		margin-left: -50px;
	}
	/*.game .systems__box .swiper-slide .img {
		width: 9vh !important;
		height: 9vh !important;
	}
	.game .systems__box {
		width: 14vh !important;
	}
	.swiper-android .swiper-slide, .swiper-wrapper {
		left: 120px !important;
	}
	.game .systems__box .swiper-slide h1 {
		font-size: 1.3vh !important;
	}*/
	.latest-summury {
        padding: 60px 0;
    }
    .latest-summury .game-menu {
        margin-right: 0;
        margin-bottom: 40px;
    }
    .latest-summury .all-bets {
        margin-left: 0;
    }
    .latest-summury .all-bets .single-result .part-top .part-info span.game {
        width: 160px;
    }
    .latest-summury .all-bets .table-cover
    {
        overflow-y: hidden;
        overflow-x: scroll;
    }
    .blog-pagi .pagination{
        overflow-y: hidden;
        overflow-x: scroll;
    }
    .game-details .part-prev
    {
        height: auto;
    }
    .game-details .part-prev span.news
    {
        height: auto;
        top: 0;
        bottom: 0;
    }
    .game-details .game-descr .details-tab-pan .tab-content .tab-pane .provably-fair li .input-group .input-group-append .input-group-text
    {
        width:100px;
    }
    .game-details .game-descr .details-tab-pan .tab-content .tab-pane .provably-fair li:last-child .input-group a
    {
        font-size: 7px;
    }
	
	::-webkit-scrollbar {
        inline-size: 5px;
        block-size: 5px;
      }
      ::-webkit-scrollbar-track {
         background-color: rgba(113,96,76,.675);
         border: 1px; 
      }
      ::-webkit-scrollbar-thumb {
         background: linear-gradient(90deg, rgb(255 126 102 / 16%), rgb(20 13 8 / 66%));
         border: 1px; 
      }
}

@media only screen and (min-width: 576px) {
    /* table */
    .latest-summury .all-bets .table-cover {
        overflow-y: hidden;
    }
	
	::-webkit-scrollbar {
        inline-size: 5px;
        block-size: 5px;
      }
      ::-webkit-scrollbar-track {
         background-color: rgba(113,96,76,.675);
         border: 1px; 
      }
      ::-webkit-scrollbar-thumb {
         background: linear-gradient(90deg, rgb(255 126 102 / 16%), rgb(20 13 8 / 66%));
         border: 1px; 
      }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
	
    .latest-summury {
        padding: 60px 0;
    }
    .latest-summury .game-menu {
        margin-right: 0;
        margin-bottom: 40px;
    }
    .latest-summury .all-bets {
        margin-left: 0;
    }
    .latest-summury .all-bets .single-result .part-top .user-img {
        width: 60px;
        height: 60px;
    }
    .latest-summury .all-bets .single-result .part-top .part-info span.game {
        width: 160px;
    }

    /* table */
    .latest-summury .all-bets .table-cover {
        overflow-y: hidden;
        overflow-x: scroll;
    }
    .latest-summury .all-bets .table {
        width: 945px;
    }
    .latest-summury .all-bets .table tbody tr:hover {
        transform: scale(1.0);
        box-shadow: none;
    }
	
	::-webkit-scrollbar {
        inline-size: 5px;
        block-size: 5px;
      }
      ::-webkit-scrollbar-track {
         background-color: rgba(113,96,76,.675);
         border: 1px; 
      }
      ::-webkit-scrollbar-thumb {
         background: linear-gradient(90deg, rgb(255 126 102 / 16%), rgb(20 13 8 / 66%));
         border: 1px; 
      }
}
@media (max-width: 920px) {
	.main__center {
		width: 100% !important;
	}
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
	.latest-summury .game-menu {
        margin-right: 0;
    }
    .latest-summury .all-bets {
        margin-left: 0;
    }
    .latest-summury .all-bets .single-result .part-top .user-img {
        display: none;
    }
    
    /* table */
    .latest-summury .all-bets .table-cover {
        overflow-y: hidden;
        overflow-x: scroll;
    }
    .latest-summury .all-bets .table {
        width: 945px;
    }
    .latest-summury .all-bets .table tbody tr:hover {
        transform: scale(1.0);
        box-shadow: none;
    }
	
	::-webkit-scrollbar {
        inline-size: 5px;
        block-size: 5px;
      }
      ::-webkit-scrollbar-track {
         background-color: rgba(113,96,76,.675);
         border: 1px; 
      }
      ::-webkit-scrollbar-thumb {
         background: linear-gradient(90deg, rgb(255 126 102 / 16%), rgb(20 13 8 / 66%));
         border: 1px; 
      }
}

/*#calculation_board div:nth-child(1) {
  color: rgb(248, 155, 62);
}*/

ul#comments-list {
  list-style-type: none;
}

.comments-container {
  margin: 60px auto 15px;
  width: 768px;
}

.comments-container h1 {
  font-size: 36px;
  color: #283035;
  font-weight: 400;
}

.comments-container h1 a {
  font-size: 18px;
  font-weight: 700;
}

.comments-list {
  margin-top: 30px;
  position: relative;
}

.main_calculation form div textarea {
	width: 900px;
	height: 195px;
	background: rgba(37,33,26,.95);
	color: #fff;
}
/**
 * Lineas / Detalles
 -----------------------*/
.comments-list:before {
  width: 2px;
  height: 100%;
  background: #c7cacb;
  position: absolute;
  left: 32px;
  top: 0;
}

.comments-list:after {
  position: absolute;
  background: #c7cacb;
  bottom: 0;
  left: 27px;
  width: 7px;
  height: 7px;
  border: 3px solid #dee1e3;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
}

.reply-list:before,
.reply-list:after {
  display: none;
}
.reply-list li:before {
  content: "";
  width: 60px;
  height: 2px;
  background: #c7cacb;
  position: absolute;
  top: 25px;
  left: -55px;
}

.comments-list li {
  margin-bottom: 15px;
  display: block;
  position: relative;
}

.comments-list li:after {
  content: "";
  display: block;
  clear: both;
  height: 0;
  width: 0;
}

.reply-list {
  padding-left: 88px;
  clear: both;
  margin-top: 15px;
}
/**
 * Avatar
 ---------------------------*/
.comments-list .comment-avatar {
  width: 65px;
  height: 65px;
  position: relative;
  z-index: 99;
  float: left;
  border: 3px solid #fff;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  overflow: hidden;
}

.comments-list .comment-avatar img {
  width: 100%;
  height: 100%;
}

.reply-list .comment-avatar {
  width: 50px;
  height: 50px;
}

.comment-main-level:after {
  content: "";
  width: 0;
  height: 0;
  display: block;
  clear: both;
}
/**
 * Caja del Comentario
 ---------------------------*/
.comments-list .comment-box {
  width: 580px;
  float: left;
  left: 30px;
  position: relative;
  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
}

.comments-list .comment-box:before,
.comments-list .comment-box:after {
  content: "";
  height: 0;
  width: 0;
  position: absolute;
  display: block;
  border-width: 10px 12px 10px 0;
  border-style: solid;
  border-color: transparent #fcfcfc;
  top: 8px;
  left: -11px;
}

.comments-list .comment-box:before {
  border-width: 11px 13px 11px 0;
  border-color: transparent rgba(0, 0, 0, 0.05);
  left: -12px;
}

.reply-list .comment-box {
  width: 610px;
}
.comment-box .comment-head {
  background: #fcfcfc;
  padding: 10px 12px;
  border-bottom: 1px solid #e5e5e5;
  overflow: hidden;
  -webkit-border-radius: 4px 4px 0 0;
  -moz-border-radius: 4px 4px 0 0;
  border-radius: 4px 4px 0 0;
}

.comment-box .comment-head i {
  float: right;
  margin-left: 14px;
  position: relative;
  top: 2px;
  color: #a6a6a6;
  cursor: pointer;
  -webkit-transition: color 0.3s ease;
  -o-transition: color 0.3s ease;
  transition: color 0.3s ease;
}

.comment-box .comment-head i:hover {
  color: #03658c;
}

.comment-box .comment-name {
  color: #283035;
  font-size: 14px;
  font-weight: 700;
  float: left;
  margin-right: 10px;
}

.comment-box .comment-name a {
  color: #283035;
}

.comment-box .comment-head span {
  float: left;
  color: #999;
  font-size: 13px;
  position: relative;
  top: 1px;
}

.comment-box .comment-content {
  background: #fff;
  padding: 12px;
  font-size: 15px;
  color: #595959;
  -webkit-border-radius: 0 0 4px 4px;
  -moz-border-radius: 0 0 4px 4px;
  border-radius: 0 0 4px 4px;
}

.comment-box .comment-name.by-author,
.comment-box .comment-name.by-author a {
  color: #03658c;
}
.comment-box .comment-name.by-author:after {
  content: "autor";
  background: #03658c;
  color: #fff;
  font-size: 12px;
  padding: 3px 5px;
  font-weight: 700;
  margin-left: 10px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
}

/** =====================
 * Responsive
 ========================*/
@media only screen and (max-width: 766px) {
  .comments-list .comment-avatar {
	  width: 30px;
	  height: 30px;
  }
  .comments-container {
    width: 480px;
  }

  .comments-list .comment-box {
    width: 190px;
  }

  .reply-list .comment-box {
    width: 320px;
  }
}

.main_post {
    display: inline-flex;
    flex-wrap: wrap;
    padding: 17px 15px;
    background: linear-gradient(rgb(98, 80, 35), rgb(135, 113, 58));
    margin-bottom: 25px;
}

.main_post a {
    padding: 0 15px;
    line-height: 1;
    text-transform: uppercase;
    font-weight: 700;
    color: #ffffff;
}

.main_post a:nth-child(odd) {
    border-right: 1px solid rgba(255, 255, 255, 0.2);
}

.main__center {
  width: 50%;
  cursor: pointer;
  display: flex;
  margin: 0 auto;
  font-family: "maron rose";
  font-size: 2.5vh;
  box-shadow: none;
  margin-top: 2vh;
  transform: scale(0.8);
}

.main_list {
  margin-bottom: 6vh;
}
.main_list p {
  color: white;
  font-size: 2.3vh;
  margin-bottom: 3vh;
}

.main_list div {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 2vh;
}

.main_list div a {
  width: 23.29%;
  height: 13vh;
  background-color: rgba(167, 155, 133, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 1vh;
  font-size: 2.4vh;
  color: rgb(224, 215, 198);
  cursor: pointer;
  border: 0.2vh solid rgba(167, 155, 133, 0.164);
}
.main_list div a[data-open-gwps-active=true], .main_list div a:hover {
  background-color: rgba(167, 155, 133, 0.3);
  border: 0.2vh solid rgba(167, 155, 133, 0.15);
}
.main_list div a img {

}

.main_type {
  margin-bottom: 6vh;
}

.main_type p {
  color: white;
  font-size: 2.3vh;
  margin-bottom: 3vh;
}

.main_type div {
  display: flex;
  flex-wrap: wrap;
  gap: 2vh;
}
.main_type div a {
  width: 23.29%;
  height: 7vh;
  background-color: rgba(167, 155, 133, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 1vh;
  font-size: 2.4vh;
  color: rgb(224, 215, 198);
  cursor: pointer;
  border: 0.2vh solid rgba(167, 155, 133, 0.164);
}
.main_type div a[data-open-gwps-active=true], .main_type div a:hover {
  background-color: rgba(167, 155, 133, 0.3);
  border: 0.2vh solid rgba(167, 155, 133, 0.15);
}
.main_type div a.active {
  background-color: rgba(167, 155, 133, 0.3);
  border: 0.2vh solid rgba(167, 155, 133, 0.15);
}
.main_type div a img {

}
.main_method {
  margin-bottom: 5vh;
}
.main_method p {
  color: white;
  font-size: 2.3vh;
  margin-bottom: 3vh;
}
.main_method div {
  display: flex;
  flex-wrap: wrap;
  gap: 2vh;
}
.main_method div label:hover .label_bg, .main_method div input:checked ~ .label_bg, .main_method div label[data-open-gwps-active=true] .label_bg {
  background-color: rgba(167, 155, 133, 0.3);
  border: 0.2vh solid rgba(167, 155, 133, 0.15);
}
.main_method div label {
  width: 23.29%;
  height: 10vh;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgb(167, 155, 133);
  cursor: pointer;
  position: relative;
}
.main_method div label input {
  display: none;
}
.main_method div label img {
  width: 12vh;
}
.main_method div label .label_bg {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 1;
  top: 0;
  left: 0;
  border: 0.2vh solid rgba(167, 155, 133, 0.085);
  background-color: rgba(167, 155, 133, 0.05);
  border-radius: 1vh;
  transition: 0.5s;
}
.main_calculation p {
  color: white;
}
.main_calculation p a {
  color: rgb(145, 141, 141);
}

.main_calculation form {
  width: 100%;
}
.main_calculation form p {
  color: white;
  font-size: 2vh;
  margin-bottom: 1.5vh;
}
.main_calculation form div {
  position: relative;
  display: flex;
  align-items: center;
  height: 6.7vh;
  width: 100%;
  background-color: rgba(53, 47, 34, 0.767);
  border: 0.2vh solid rgba(104, 91, 68, 0.65);
  margin-bottom: 4vh;
  box-shadow: 0vh 1vh 2vh rgba(0, 0, 0, 0.15);
  overflow: hidden;
}
.main_calculation form div input {
  width: 100%;
  height: 100%;
  background: none;
  border: 0.2vh solid rgba(255, 255, 255, 0);
  color: white;
  font-size: 2.2vh;
  padding: 0vh 3vh;
  outline: none;
  transition: 0.5s;
}
.main_calculation form div input:focus {
  border: 0.2vh solid rgb(167, 155, 133);
  box-shadow: inset 0vh 0vh 2vh rgba(194, 171, 118, 0.371);
}
.main_calculation form div span {
  padding: 0vh 3vh;
  color: rgb(167, 155, 133);
  white-space: nowrap;
  background-color: rgba(0, 0, 0, 0.104);
  border-right: 0.2vh solid rgba(104, 91, 68, 0.65);
  border-left: 0.2vh solid rgba(104, 91, 68, 0.65);
  font-size: 2vh;
  height: 100%;
  display: flex;
  align-items: center;
}
.main_calculation form div .main_decoration {
  background-color: rgba(255, 255, 255, 0);
}

.main_calculation.post img {
	width: 100%;
	height: 100%;
}
.main::before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  pointer-events: none;
  top: 0;
  left: 0;
  box-shadow: inset 0vh 0vh 4vh rgba(105, 85, 54, 0.15);
}

.page__title {
  justify-content: center !important;
}

.pagination {
    display: -ms-flexbox;
    display: flex;
    padding-left: 0;
    list-style: none;
    border-radius: .25rem
}

.page-link {
    position: relative;
    display: block;
    padding: .5rem .75rem;
    margin-left: -1px;
    line-height: 1.25;
    color: #007bff;
    background-color: #fff;
    border: 1px solid #dee2e6
}

.page-link:hover {
    z-index: 2;
    color: #b31b00;
    text-decoration: none;
    background-color: #e9ecef;
    border-color: #dee2e6
}

.page-link:focus {
    z-index: 2;
    outline: 0;
    box-shadow: 0 0 0 .2rem rgba(255, 136, 0, 0.25)
}

.page-item:first-child .page-link {
    margin-left: 0;
    border-top-left-radius: .25rem;
    border-bottom-left-radius: .25rem
}

.page-item:last-child .page-link {
    border-top-right-radius: .25rem;
    border-bottom-right-radius: .25rem
}

.page-item.active .page-link {
    z-index: 1;
    color: #fff;
    background-color: #ff0040;
    border-color: #007bff
}

.page-item.disabled .page-link {
    color: #6c757d;
    pointer-events: none;
    cursor: auto;
    background-color: #fff;
    border-color: #dee2e6
}

.pagination-lg .page-link {
    padding: .75rem 1.5rem;
    font-size: 1.25rem;
    line-height: 1.5
}

.pagination-lg .page-item:first-child .page-link {
    border-top-left-radius: .3rem;
    border-bottom-left-radius: .3rem
}

.pagination-lg .page-item:last-child .page-link {
    border-top-right-radius: .3rem;
    border-bottom-right-radius: .3rem
}

.pagination-sm .page-link {
    padding: .25rem .5rem;
    font-size: .875rem;
    line-height: 1.5
}

.pagination-sm .page-item:first-child .page-link {
    border-top-left-radius: .2rem;
    border-bottom-left-radius: .2rem
}

/*================================================
Blog Area CSS
=================================================*/
.blog-section{
  /*background-image: url(../img/banner/background-4.png);*/
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.section-content h2{
  font-size: 48px;
  font-weight: 800;
}

.section-content p {
  margin-bottom: 45px;
  font-size: 17px;
}

.blog-content {
  border-bottom: 1px solid #d9d9d9;
  padding-bottom: 30px;
  margin-bottom: 30px;
}

.blog-content .blog-date h4 {
  font-size: 20px;
}

.blog-content .blog-title h2 {
  font-size: 25px;
  font-weight: 800;
  margin-bottom: 20px;
}

.blog-content .blog-btn a {
  font-weight: 500;
}

.blog-section-2 .blog-content-2 {
  margin-bottom: 50px;
}

.blog-section-2 .blog-content-2 h2 {
  font-size: 55px;
  color: var(--whiteColor);
  margin-bottom: 20px;
}

.blog-section-2 .blog-content-2 p{
  font-size: 17px;
  color: var(--paragraphColorSecond);
}

.blog-section-2 .blog-content-btn{
  text-align: end;
}
.blog-section-2 .blog-content-btn .default-btn{
  background: #6600FF;
}

.blog-section-2 .row .col-xl-4:last-child .blog-card.grid{
  margin-bottom: 0px;
}

.blog-card {
    margin-bottom: 35px;
}

.blog-card .blog-info h3 a {
    font-size: 22px;
}

.blog-card .blog-info .btn-link {
    font-size: 16px;
}

.blog-card .blog-img .blog-metainfo li {
    margin-right: 15px;
    font-size: 14px;
}

.blog-card .blog-metainfo li i, .blog-card .blog-metainfo li a {
    font-size: 14px;
}

.blog-card .blog-img {
  margin-bottom: 22px;
  position: relative;
}

.blog-card .blog-img .blog-metainfo {
  background-color: #0e051e75;
  display: inline-flex;
  position: absolute;
  right: 0;
  bottom: 10px;
  padding: 0px 5px;
  backdrop-filter: blur(6.5px);
}

.blog-card .blog-img .blog-metainfo li {
  margin-right: 15px;
}

.blog-card.blog-img .blog-metainfo li:last-child {
  margin-right: 0;
}

.blog-card:hover .blog-img .blog-metainfo {
  background-color: var(--DarkBg);
}

.blog-card .blog-info {
  text-align:center;
}

.blog-pagi .pagination {
  margin-bottom: 0;
  margin-top: 30px;
}

.blog-pagi .pagination .page-link {
  background-color: transparent !important;
  padding: 10px 18px;
  margin-right: 8px;
  color: #fff;
  border-color: #3d2f1a;
  font-size: 18px;
  transition: .5s;
}

.blog-pagi .pagination .page-link.active{
  background: rgb(194 177 144 / 50%) !important;
  box-shadow: 0vh 0vh 0.7vh #eeba75;
}

.blog-pagi .pagination .page-link:before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  box-shadow: 0vh 0vh 0.7vh #eeba75;
  opacity: 0;
  transition: all 300ms ease;
  z-index: -1;
}

.blog-pagi .pagination .page-link:hover:before {
  opacity: 1;
}

.post-item {
    background: #3a3c3e;
    margin-bottom: 30px;
}

.post-item .post-content {
    padding: 30px;
}

.post-item .post-content .title {
    text-transform: uppercase;
    font-weight: 600;
}

@media (min-width: 576px) {
    .post-item .post-content .title {
        font-size: 20px;
    }
}

.post-item .post-content .meta-post {
    justify-content: space-between;
    margin-bottom: 20px;
}

.post-item .post-content .meta-post a {
    color: rgba(255, 255, 255, 0.9);
}

.post-item .post-content .meta-post a:hover {
    color: #02c4f2;
}

@media screen and (max-width: 400px) {
    .post-item .post-content {
        padding-left: 15px;
        padding-right: 15px;
    }
}

.post-item:hover .post-thumb img {
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
}

.post-thumb {
    overflow: hidden;
}

.post-thumb a {
    display: block;
}

.post-thumb img {
    width: 100%;
    -webkit-transition: all ease 0.3s;
    -moz-transition: all ease 0.3s;
    transition: all ease 0.3s;
}

/*Blog Section Two Starts Here*/
.post-item-2 {
    margin: 0 auto 30px;
}

.post-item-2 .post-thumb {
    overflow: hidden;
}

.post-item-2 .post-thumb a {
    display: block;
}

.post-item-2 .post-thumb img {
    width: 100%;
    -webkit-transition: all ease 0.3s;
    -moz-transition: all ease 0.3s;
    transition: all ease 0.3s;
}

.post-item-2 .post-content {
    text-align: center;
}

.post-item-2 .post-content .post-header {
    padding: 20px;
    background: #09044d;
}

.post-item-2 .post-content .post-header .meta-post {
    justify-content: space-between;
    margin-bottom: 7px;
}

.post-item-2 .post-content .post-header .meta-post a {
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 5px;
    text-transform: uppercase;
    font-size: 14px;
}

.post-item-2 .post-content .post-header .title {
    text-transform: uppercase;
}

.post-item-2 .post-content .post-header .title a {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.post-item-2 .post-content .post-body {
    padding: 40px 30px;
    background: #070340;
}

@media screen and (max-width: 399px) {
    .post-item-2 .post-content .post-body {
        padding: 30px 15px;
    }

    .post-item-2 .post-content .post-header {
        padding: 30px 15px;
    }
}

.post-item-2:hover .post-thumb a img {
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
}

/*Blog Section Three Starts Here*/
.blog-item {
    margin-bottom: 65px;
}

.blog-item .blog-thumb {
    overflow: hidden;
}

.blog-item .blog-thumb a {
    display: block;
}

.blog-item .blog-thumb img {
    width: 100%;
    -webkit-transition: all ease 0.3s;
    -moz-transition: all ease 0.3s;
    transition: all ease 0.3s;
}

.blog-item:hover .blog-thumb a img {
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
}

.blog-item .blog-content {
    text-align: center;
    padding: 60px 15px;
    background: #111111a9;
}

.blog-item .blog-content .content {
    max-width: 805px;
    margin: 0 auto;
}

.blog-item .blog-content .meta-post {
    display: inline-flex;
    flex-wrap: wrap;
    padding: 17px 15px;
    background: #09044d;
    margin-bottom: 25px;
}

.blog-item .blog-content .meta-post a {
    padding: 0 15px;
    line-height: 1;
    text-transform: uppercase;
    font-weight: 700;
    color: #ffffff;
}

.blog-item .blog-content .meta-post a:nth-child(odd) {
    border-right: 1px solid rgba(255, 255, 255, 0.2);
}

.blog-item .blog-content .title {
    text-transform: uppercase;
    margin-bottom: 40px;
}

.blog-item .blog-content p {
    margin-bottom: 34px;
}

.blog-item .blog-content .custom-button {
    background: #09044d;
    color: #02c4f2;
    line-height: 60px;
}

.blog-item .blog-content .custom-button:hover {
    background: #02c4f2;
    color: #ffffff;
}

@media (max-width: 575px) {
    .blog-item {
        margin-bottom: 40px;
    }

    .blog-item .blog-content {
        padding: 30px 15px 40px;
    }

    .blog-item .blog-content .title {
        margin-bottom: 30px;
    }

    .blog-item .blog-content p {
        margin-bottom: 30px;
    }

    .blog-item .blog-content .meta-post {
        margin-left: -15px;
        margin-right: -15px;
        font-size: 14px;
        padding: 10px 0;
        align-items: center;
        width: 100%;
    }

    .blog-item .blog-content .meta-post a {
        width: 50%;
        line-height: 1.3;
        padding: 0 10px;
    }

    .blog-item .blog-content .custom-button {
        font-size: 16px;
        padding: 0 20px;
        line-height: 45px;
    }
}

/**
Ion.RangeSlider, 2.3.0
© Denis Ineshin, 2010 - 2018, IonDen.com
Build date: 2018-12-11 23:23:51
*/
.irs {
  position: relative;
  display: block;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  font-size: 12px;
}

.irs-line {
  position: relative;
  display: block;
  overflow: hidden;
  outline: none !important;
}

.irs-bar {
  position: absolute;
  display: block;
  left: 0;
  width: 0;
}

.irs-shadow {
  position: absolute;
  display: none;
  left: 0;
  width: 0;
}

.irs-handle {
  position: absolute;
  display: block;
  box-sizing: border-box;
  cursor: default;
  z-index: 1;
}

.irs-handle.type_last {
  z-index: 2;
}

.irs-min,
.irs-max {
  position: absolute;
  display: block;
  cursor: default;
}

.irs-min {
  left: 0;
}

.irs-max {
  right: 0;
}

.irs-from,
.irs-to,
.irs-single {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  cursor: default;
  white-space: nowrap;
}

.irs-grid {
  position: absolute;
  display: none;
  bottom: -1vh;
  left: 0;
  width: 100%;
  height: 2vh;
}

.irs-with-grid .irs-grid {
  display: block;
}

.irs-grid-pol {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 8px;
  background: #000;
}

.irs-grid-pol.small {
  height: 4px;
}

.irs-grid-text {
  position: absolute;
  bottom: -2vh;
  left: 0;
  white-space: nowrap;
  text-align: center;
  font-size: 1.6vh;
  line-height: 9px;
  padding: 0 1vh;
  color: #000;
}

.irs-disable-mask {
  position: absolute;
  display: block;
  top: 0;
  left: -1%;
  width: 102%;
  height: 100%;
  cursor: default;
  background: rgba(0, 0, 0, 0);
  z-index: 2;
}

.lt-ie9 .irs-disable-mask {
  background: #000;
  filter: alpha(opacity=0);
  cursor: not-allowed;
}

.irs-disabled {
  opacity: 0.4;
}

.irs-hidden-input {
  position: absolute !important;
  display: block !important;
  top: 0 !important;
  left: 0 !important;
  width: 0 !important;
  height: 0 !important;
  font-size: 0 !important;
  line-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden;
  outline: none !important;
  z-index: -9999 !important;
  background: none !important;
  border-style: solid !important;
  border-color: transparent !important;
}

.irs--flat {
  height: 40px;
}

.irs--flat.irs-with-grid {
  height: 60px;
}

.irs--flat .irs-line {
  top: 25px;
  height: 12px;
  background-color: #e1e4e9;
  border-radius: 4px;
}

.irs--flat .irs-bar {
  top: 25px;
  height: 12px;
  background-color: #ed5565;
}

.irs--flat .irs-bar--single {
  border-radius: 4px 0 0 4px;
}

.irs--flat .irs-shadow {
  height: 1px;
  bottom: 16px;
  background-color: #e1e4e9;
}

.irs--flat .irs-handle {
  top: 22px;
  width: 16px;
  height: 18px;
  background-color: transparent;
}

.irs--flat .irs-handle > i:first-child {
  position: absolute;
  display: block;
  top: 0;
  left: 50%;
  width: 2px;
  height: 100%;
  margin-left: -1px;
  background-color: #da4453;
}

.irs--flat .irs-handle.state_hover > i:first-child,
.irs--flat .irs-handle:hover > i:first-child {
  background-color: #a43540;
}

.irs--flat .irs-min,
.irs--flat .irs-max {
  top: 0;
  padding: 1px 3px;
  color: #999;
  font-size: 10px;
  line-height: 1.333;
  text-shadow: none;
  background-color: #e1e4e9;
  border-radius: 4px;
}

.irs--flat .irs-from,
.irs--flat .irs-to,
.irs--flat .irs-single {
  color: white;
  font-size: 10px;
  line-height: 1.333;
  text-shadow: none;
  padding: 1px 5px;
  background-color: #ed5565;
  border-radius: 4px;
}

.irs--flat .irs-from:before,
.irs--flat .irs-to:before,
.irs--flat .irs-single:before {
  position: absolute;
  display: block;
  content: "";
  bottom: -6px;
  left: 50%;
  width: 0;
  height: 0;
  margin-left: -3px;
  overflow: hidden;
  border: 3px solid transparent;
  border-top-color: #ed5565;
}

.irs--flat .irs-grid-pol {
  background-color: #e1e4e9;
}

.irs--flat .irs-grid-text {
  color: #999;
}

.irs--big {
  height: 55px;
}

.irs--big.irs-with-grid {
  height: 70px;
}

.irs--big .irs-line {
  top: 33px;
  height: 12px;
  background-color: white;
  background: linear-gradient(to bottom, #ddd -50%, white 150%);
  border: 1px solid #ccc;
  border-radius: 12px;
}

.irs--big .irs-bar {
  top: 33px;
  height: 12px;
  background-color: #92bce0;
  border: 1px solid #428bca;
  background: linear-gradient(to bottom, #ffffff 0%, #428bca 30%, #b9d4ec 100%);
  box-shadow: inset 0 0 1px 1px rgba(255, 255, 255, 0.5);
}

.irs--big .irs-bar--single {
  border-radius: 12px 0 0 12px;
}

.irs--big .irs-shadow {
  height: 1px;
  bottom: 16px;
  background-color: rgba(66, 139, 202, 0.5);
}

.irs--big .irs-handle {
  top: 25px;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(0, 0, 0, 0.3);
  background-color: #cbcfd5;
  background: linear-gradient(to bottom, white 0%, #B4B9BE 30%, white 100%);
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2), inset 0 0 3px 1px white;
  border-radius: 30px;
}

.irs--big .irs-handle.state_hover,
.irs--big .irs-handle:hover {
  border-color: rgba(0, 0, 0, 0.45);
  background-color: #939ba7;
  background: linear-gradient(to bottom, white 0%, #919BA5 30%, white 100%);
}

.irs--big .irs-min,
.irs--big .irs-max {
  top: 0;
  padding: 1px 5px;
  color: white;
  text-shadow: none;
  background-color: #9f9f9f;
  border-radius: 3px;
}

.irs--big .irs-from,
.irs--big .irs-to,
.irs--big .irs-single {
  color: white;
  text-shadow: none;
  padding: 1px 5px;
  background-color: #428bca;
  background: linear-gradient(to bottom, #428bca 0%, #3071a9 100%);
  border-radius: 3px;
}

.irs--big .irs-grid-pol {
  background-color: #428bca;
}

.irs--big .irs-grid-text {
  color: #428bca;
}

.irs--modern {
  height: 55px;
}

.irs--modern.irs-with-grid {
  height: 55px;
}

.irs--modern .irs-line {
  top: 25px;
  height: 5px;
  background-color: #d1d6e0;
  background: linear-gradient(to bottom, #e0e4ea 0%, #d1d6e0 100%);
  border: 1px solid #a3adc1;
  border-bottom-width: 0;
  border-radius: 5px;
}

.irs--modern .irs-bar {
  top: 25px;
  height: 5px;
  background: #20b426;
  background: linear-gradient(to bottom, #20b426 0%, #18891d 100%);
}

.irs--modern .irs-bar--single {
  border-radius: 5px 0 0 5px;
}

.irs--modern .irs-shadow {
  height: 1px;
  bottom: 21px;
  background-color: rgba(209, 214, 224, 0.5);
}

.irs--modern .irs-handle {
  top: 37px;
  width: 12px;
  height: 13px;
  border: 1px solid #a3adc1;
  border-top-width: 0;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
  border-radius: 0 0 3px 3px;
}

.irs--modern .irs-handle > i:nth-child(1) {
  position: absolute;
  display: block;
  top: -4px;
  left: 1px;
  width: 6px;
  height: 6px;
  border: 1px solid #a3adc1;
  background: white;
  transform: rotate(45deg);
}

.irs--modern .irs-handle > i:nth-child(2) {
  position: absolute;
  display: block;
  box-sizing: border-box;
  top: 0;
  left: 0;
  width: 10px;
  height: 12px;
  background: #e9e6e6;
  background: linear-gradient(to bottom, white 0%, #e9e6e6 100%);
  border-radius: 0 0 3px 3px;
}

.irs--modern .irs-handle > i:nth-child(3) {
  position: absolute;
  display: block;
  box-sizing: border-box;
  top: 3px;
  left: 3px;
  width: 4px;
  height: 5px;
  border-left: 1px solid #a3adc1;
  border-right: 1px solid #a3adc1;
}

.irs--modern .irs-handle.state_hover,
.irs--modern .irs-handle:hover {
  border-color: #7685a2;
  background: #c3c7cd;
  background: linear-gradient(to bottom, #ffffff 0%, #919ba5 30%, #ffffff 100%);
}

.irs--modern .irs-handle.state_hover > i:nth-child(1),
.irs--modern .irs-handle:hover > i:nth-child(1) {
  border-color: #7685a2;
}

.irs--modern .irs-handle.state_hover > i:nth-child(3),
.irs--modern .irs-handle:hover > i:nth-child(3) {
  border-color: #48536a;
}

.irs--modern .irs-min,
.irs--modern .irs-max {
  top: 0;
  font-size: 10px;
  line-height: 1.333;
  text-shadow: none;
  padding: 1px 5px;
  color: white;
  background-color: #d1d6e0;
  border-radius: 5px;
}

.irs--modern .irs-from,
.irs--modern .irs-to,
.irs--modern .irs-single {
  font-size: 10px;
  line-height: 1.333;
  text-shadow: none;
  padding: 1px 5px;
  background-color: #20b426;
  color: white;
  border-radius: 5px;
}

.irs--modern .irs-from:before,
.irs--modern .irs-to:before,
.irs--modern .irs-single:before {
  position: absolute;
  display: block;
  content: "";
  bottom: -6px;
  left: 50%;
  width: 0;
  height: 0;
  margin-left: -3px;
  overflow: hidden;
  border: 3px solid transparent;
  border-top-color: #20b426;
}

.irs--modern .irs-grid {
  height: 25px;
}

.irs--modern .irs-grid-pol {
  background-color: #dedede;
}

.irs--modern .irs-grid-text {
  color: silver;
  font-size: 13px;
}

.irs--sharp {
  height: 50px;
  font-size: 12px;
  line-height: 1;
}

.irs--sharp.irs-with-grid {
  height: 57px;
}

.irs--sharp .irs-line {
  top: 30px;
  height: 2px;
  background-color: black;
  border-radius: 2px;
}

.irs--sharp .irs-bar {
  top: 30px;
  height: 2px;
  background-color: #ee22fa;
}

.irs--sharp .irs-bar--single {
  border-radius: 2px 0 0 2px;
}

.irs--sharp .irs-shadow {
  height: 1px;
  bottom: 21px;
  background-color: rgba(0, 0, 0, 0.5);
}

.irs--sharp .irs-handle {
  top: 25px;
  width: 10px;
  height: 10px;
  background-color: #a804b2;
}

.irs--sharp .irs-handle > i:first-child {
  position: absolute;
  display: block;
  top: 100%;
  left: 0;
  width: 0;
  height: 0;
  border: 5px solid transparent;
  border-top-color: #a804b2;
}

.irs--sharp .irs-handle.state_hover,
.irs--sharp .irs-handle:hover {
  background-color: black;
}

.irs--sharp .irs-handle.state_hover > i:first-child,
.irs--sharp .irs-handle:hover > i:first-child {
  border-top-color: black;
}

.irs--sharp .irs-min,
.irs--sharp .irs-max {
  color: white;
  font-size: 14px;
  line-height: 1;
  top: 0;
  padding: 3px 4px;
  opacity: 0.4;
  background-color: #a804b2;
  border-radius: 2px;
}

.irs--sharp .irs-from,
.irs--sharp .irs-to,
.irs--sharp .irs-single {
  font-size: 14px;
  line-height: 1;
  text-shadow: none;
  padding: 3px 4px;
  background-color: #a804b2;
  color: white;
  border-radius: 2px;
}

.irs--sharp .irs-from:before,
.irs--sharp .irs-to:before,
.irs--sharp .irs-single:before {
  position: absolute;
  display: block;
  content: "";
  bottom: -6px;
  left: 50%;
  width: 0;
  height: 0;
  margin-left: -3px;
  overflow: hidden;
  border: 3px solid transparent;
  border-top-color: #a804b2;
}

.irs--sharp .irs-grid {
  height: 25px;
}

.irs--sharp .irs-grid-pol {
  background-color: #dedede;
}

.irs--sharp .irs-grid-text {
  color: silver;
  font-size: 13px;
}

.irs--round {
  height: 50px;
}

.irs--round.irs-with-grid {
  height: 6.8vh;
}

.irs--round .irs-line {
  top: 4.7vh;
  height: 0.6vh;
  background-color: rgba(222, 228, 236, 0.3960784314);
  border-radius: 4px;
}

.irs--round .irs-bar {
  top: 4.7vh;
  height: 0.6vh;
  background-color: #c88b3c;
}

.irs--round .irs-bar--single {
  border-radius: 4px 0 0 4px;
}

.irs--round .irs-shadow {
  height: 4px;
  bottom: 21px;
  background-color: rgba(222, 228, 236, 0.5);
}

.irs--round .irs-handle {
  top: 4vh;
  width: 2vh;
  height: 2vh;
  border: 0.6vh solid #c88b3c;
  background-color: rgba(255, 255, 255, 0.015);
  border-radius: 0px;
  backdrop-filter: blur(10vh);
  transform: rotate(45deg);
  box-shadow: 0 1px 3px rgba(0, 0, 255, 0.3);
}

.irs--round .irs-handle.state_hover,
.irs--round .irs-handle:hover {
  background-color: #ffe5ac;
}

.irs--round .irs-min,
.irs--round .irs-max {
  color: #7e7e7e;
  font-size: 1.8vh;
  line-height: 1;
  top: 0;
  padding: 0.7vh 1.5vh;
  background-color: rgba(0, 0, 0, 0.1);
  border-radius: 4px;
}

.irs--round .irs-from,
.irs--round .irs-to,
.irs--round .irs-single {
  font-size: 2vh;
  line-height: 1;
  text-shadow: none;
  padding: 0.5vh 1vh;
  background-color: #c88b3c;
  color: white;
  border-radius: 0.2vh;
  z-index: 9;
}

.irs--round .irs-from:before,
.irs--round .irs-to:before,
.irs--round .irs-single:before {
  position: absolute;
  display: block;
  content: "";
  bottom: -0.6vh;
  left: 47.5%;
  width: 0;
  height: 0;
  overflow: hidden;
  border: 3px solid transparent;
  border-top-color: #c88b3c;
}

.irs--round .irs-grid {
  height: 1vh;
  bottom: 0;
}

.irs--round .irs-grid-pol {
  background-color: rgba(222, 222, 222, 0.3176470588);
}

.irs--round .irs-grid-text {
  color: silver;
  font-size: 1.8vh;
}

.irs--square {
  height: 50px;
}

.irs--square.irs-with-grid {
  height: 60px;
}

.irs--square .irs-line {
  top: 31px;
  height: 4px;
  background-color: #dedede;
}

.irs--square .irs-bar {
  top: 31px;
  height: 4px;
  background-color: black;
}

.irs--square .irs-shadow {
  height: 2px;
  bottom: 21px;
  background-color: #dedede;
}

.irs--square .irs-handle {
  top: 25px;
  width: 16px;
  height: 16px;
  border: 3px solid black;
  background-color: white;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.irs--square .irs-handle.state_hover,
.irs--square .irs-handle:hover {
  background-color: #f0f6ff;
}

.irs--square .irs-min,
.irs--square .irs-max {
  color: #333;
  font-size: 14px;
  line-height: 1;
  top: 0;
  padding: 3px 5px;
  background-color: rgba(0, 0, 0, 0.1);
}

.irs--square .irs-from,
.irs--square .irs-to,
.irs--square .irs-single {
  font-size: 14px;
  line-height: 1;
  text-shadow: none;
  padding: 3px 5px;
  background-color: black;
  color: white;
}

.irs--square .irs-grid {
  height: 25px;
}

.irs--square .irs-grid-pol {
  background-color: #dedede;
}

.irs--square .irs-grid-text {
  color: silver;
  font-size: 11px;
}/*# sourceMappingURL=main.css.map */

.ref-stat-card {
    border: 1px solid rgba(160,120,50,0.3);
    border-top: 3px solid rgba(200,160,60,0.7);
    border-radius: 0;
    padding: 0;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    position: relative;
    overflow: hidden;
}
.ref-stat-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(167, 155, 133, 0.3);
    pointer-events: none;
}
.ref-stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.6), 0 0 15px rgba(200,160,60,0.1);
}
.ref-stat-card.card-gold  { border-top-color: rgba(220,175,60,0.85); }
.ref-stat-card.card-green { border-top-color: rgba(80,200,120,0.75); }
.ref-stat-card.card-blue  { border-top-color: rgba(80,160,220,0.75); }
.ref-stat-card.card-purple{ border-top-color: rgba(160,100,220,0.75); }

.ref-stat-inner {
    padding: 16px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.ref-stat-label {
    font-size: 11px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #bfbfbf;
    margin-bottom: 6px;
}
.ref-stat-value {
    font-size: 22px;
    font-weight: bold;
    color: rgba(240,210,120,0.95);
    text-shadow: 0 0 12px rgba(200,160,60,0.4);
    line-height: 1.2;
}
.ref-stat-sub {
    font-size: 10px;
    color: #bfbfbf;
    margin-top: 3px;
    letter-spacing: 0.5px;
}
.ref-stat-icon {
    font-size: 28px;
    opacity: 0.18;
    flex-shrink: 0;
}

/* Code Card */
.ref-code-card {
    background: rgba(167, 155, 133, 0.3);
    border: 1px solid rgba(160,120,50,0.3);
    border-top: 3px solid rgba(200,160,60,0.7);
    border-radius: 0;
    padding: 0;
    margin-bottom: 24px;
}
.ref-code-header {
    padding: 14px 20px 12px;
    border-bottom: 1px solid rgba(160,120,50,0.2);
    background: rgba(0,0,0,0.2);
    display: flex;
    align-items: center;
    gap: 10px;
}
.ref-code-header-title {
    font-family: 'Maron Rose', serif;
    font-size: 17px;
    letter-spacing: 1px;
    color: rgba(220,175,80,0.9);
    text-transform: uppercase;
}
.ref-code-body { padding: 20px; }
.ref-code-display {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}
.ref-code-badge {
    font-size: 22px;
    font-weight: bold;
    letter-spacing: 3px;
    color: rgba(240,200,80,0.95);
    text-shadow: 0 0 16px rgba(200,160,60,0.5);
    background: rgba(160,120,50,0.1);
    border: 1px solid rgba(160,120,50,0.4);
    padding: 10px 22px;
    border-radius: 0;
    position: relative;
}
.ref-code-badge::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(220,175,80,0.4), transparent);
}
.ref-copy-btn {
    background: rgba(160,120,50,0.15);
    border: 1px solid rgba(160,120,50,0.4);
    color: rgba(200,160,70,0.9);
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 9px 18px;
    cursor: pointer;
    transition: all 0.18s ease;
    border-radius: 0;
}
.ref-copy-btn:hover {
    background: rgba(160,120,50,0.3);
    color: rgba(240,200,80,1);
    box-shadow: 0 0 10px rgba(200,160,60,0.2);
}
.ref-code-meta {
    display: flex;
    gap: 24px;
    margin-top: 14px;
    flex-wrap: wrap;
}
.ref-meta-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.ref-meta-label {
    font-size: 10px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #bfbfbf;
}
.ref-meta-value {
    font-size: 13px;
    font-weight: bold;
    color: rgba(200,175,110,0.9);
}
.ref-status-badge {
    display: inline-block;
    padding: 2px 10px;
    font-size: 10px;
    letter-spacing: 1px;
    text-transform: uppercase;
    border-radius: 0;
}
.ref-status-actived {
    background: rgba(80,200,120,0.15);
    border: 1px solid rgba(80,200,120,0.4);
    color: rgba(100,220,130,0.9);
}
.ref-status-deactivate {
    background: rgba(200,80,80,0.15);
    border: 1px solid rgba(200,80,80,0.4);
    color: rgba(220,100,100,0.9);
}

/* Table Card */
.ref-table-card {
    background: rgba(167, 155, 133, 0.3);
    border: 1px solid rgba(160,120,50,0.25);
    border-top: 3px solid rgba(160,120,50,0.5);
    border-radius: 0;
    padding: 0;
}
.ref-table-card-header {
    padding: 14px 20px;
    border-bottom: 1px solid rgba(160,120,50,0.2);
    background: rgba(0,0,0,0.2);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}
.ref-table-card-title {
    font-family: 'Maron Rose', serif;
    font-size: 16px;
    letter-spacing: 1px;
    color: #bfbfbf;
    text-transform: uppercase;
}

/* Search */
.ref-search-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
}
.ref-search-input {
    background: rgba(160,120,50,0.08) !important;
    border: 1px solid rgba(160,120,50,0.3) !important;
    border-radius: 0 !important;
    color: rgba(210,185,120,0.9) !important;
    font-size: 12px !important;
    padding: 6px 12px !important;
    width: 175px;
    transition: border-color 0.18s;
}
.ref-search-input::placeholder { color: rgba(150,120,70,0.4) !important; }
.ref-search-input:focus {
    border-color: rgba(200,160,60,0.6) !important;
    box-shadow: 0 0 8px rgba(200,160,60,0.15) !important;
    outline: none !important;
    background: rgba(160,120,50,0.12) !important;
}
.ref-search-btn {
    background: rgba(160,120,50,0.2);
    border: 1px solid rgba(160,120,50,0.4);
    color: rgba(200,160,70,0.9);
    padding: 6px 12px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.18s;
    border-radius: 0;
}
.ref-search-btn:hover {
    background: rgba(160,120,50,0.35);
    color: rgba(240,200,80,1);
}
.ref-search-clear {
    background: rgba(80,80,80,0.2);
    border: 1px solid rgba(120,120,120,0.3);
    color: rgba(160,160,160,0.8);
    padding: 6px 10px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.18s;
    border-radius: 0;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}
.ref-search-clear:hover {
    background: rgba(80,80,80,0.4);
    color: rgba(200,200,200,0.9);
}

/* Table */
.ref-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
}
.ref-table thead tr {
    background: rgba(0,0,0,0.3);
    border-bottom: 1px solid rgba(160,120,50,0.25);
}
.ref-table thead th {
    padding: 10px 14px;
    font-size: 10px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: rgba(180,145,70,0.7);
    font-weight: normal;
    white-space: nowrap;
    border-bottom: none;
}
.ref-table tbody tr {
    border-bottom: 1px solid rgba(160,120,50,0.08);
    transition: background 0.12s;
}
.ref-table tbody tr:last-child { border-bottom: none; }
.ref-table tbody tr:hover { background: rgba(160,120,50,0.07); }
.ref-table tbody td {
    padding: 10px 14px;
    vertical-align: middle;
    color: rgba(200,180,130,0.85);
}
.ref-table .col-no {
    width: 42px;
    text-align: center;
    color: rgba(140,115,70,0.5);
    font-size: 11px;
}
.ref-table .col-center { text-align: center; }

/* Avatar */
.ref-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    font-size: 11px;
    font-weight: bold;
    flex-shrink: 0;
    border: 1px solid rgba(160,120,50,0.3);
    letter-spacing: 0.3px;
}
.ref-avatar-a { background: rgba(80,160,220,0.15);  color: rgba(100,180,240,0.9); }
.ref-avatar-b { background: rgba(80,200,120,0.15);  color: rgba(100,220,140,0.9); }
.ref-avatar-c { background: rgba(220,160,60,0.15);  color: rgba(240,180,80,0.9);  }
.ref-avatar-d { background: rgba(200,80,100,0.15);  color: rgba(220,100,120,0.9); }
.ref-avatar-e { background: rgba(160,80,220,0.15);  color: rgba(180,100,240,0.9); }

.ref-username-wrap  { display: flex; align-items: center; gap: 9px; }
.ref-username-text  { font-weight: bold; color: #bfbfbf; font-size: 13px; }

/* Point / status */
.ref-point-pos  { font-weight: bold; color: rgba(100,220,130,0.9); text-shadow: 0 0 6px rgba(80,200,120,0.3); }
.ref-point-none { color: rgba(120,100,70,0.4); }

.ref-badge-success {
    display: inline-block; padding: 2px 10px;
    background: rgba(80,200,120,0.12); border: 1px solid rgba(80,200,120,0.35);
    color: rgba(100,220,140,0.9); font-size: 10px; letter-spacing: 0.5px; border-radius: 0;
}
.ref-badge-pending {
    display: inline-block; padding: 2px 10px;
    background: rgba(220,180,60,0.12); border: 1px solid rgba(220,180,60,0.35);
    color: rgba(240,200,80,0.9); font-size: 10px; letter-spacing: 0.5px; border-radius: 0;
}
.ref-badge-default {
    display: inline-block; padding: 2px 10px;
    background: rgba(120,120,120,0.1); border: 1px solid rgba(120,120,120,0.25);
    color: rgba(160,160,160,0.8); font-size: 10px; letter-spacing: 0.5px; border-radius: 0;
}

/* Date */
.ref-date-main { font-weight: bold; font-size: 12px; color: rgba(200,175,110,0.85); white-space: nowrap; }
.ref-date-time  { font-size: 10px; color: rgba(140,115,70,0.5); letter-spacing: 0.3px; }

/* Empty state */
.ref-empty-state  { text-align: center; padding: 50px 20px; }
.ref-empty-icon   { font-size: 36px; opacity: 0.15; display: block; margin-bottom: 12px; color: rgba(180,145,70,0.5); }
.ref-empty-text   { font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: rgba(140,115,70,0.4); }

/* Pagination */
.ref-pagination-wrap {
    padding: 12px 20px;
    border-top: 1px solid rgba(160,120,50,0.15);
    background: rgba(0,0,0,0.15);
    display: flex;
    justify-content: flex-end;
}

/* Access denied */
.ref-access-denied  { text-align: center; padding: 60px 30px; }
.ref-access-icon    { font-size: 48px; opacity: 0.2; display: block; margin-bottom: 18px; color: rgba(200,80,80,0.7); }
.ref-access-title   { font-size: 16px; letter-spacing: 2px; text-transform: uppercase; color: rgba(200,80,80,0.7); margin-bottom: 8px; font-family: 'Maron Rose', serif; }
.ref-access-sub     { font-size: 11px; letter-spacing: 1px; color: rgba(140,115,70,0.45); }

/* Copy button */
.ref-copy-success { font-size: 11px; color: rgba(100,220,130,0.9); letter-spacing: 0.5px; margin-left: 8px; display: none; }

/* Responsive */
@media (max-width: 768px) {
    .ref-stat-value   { font-size: 17px; }
    .ref-code-badge   { font-size: 16px; letter-spacing: 2px; }
    .ref-table        { font-size: 11.5px; }
    .ref-table thead th,
    .ref-table tbody td { padding: 8px 10px; }
}

.ref-info-panel {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-bottom: 8px;
}

.ref-info-box {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 10px;
    padding: 14px 24px;
    text-align: center;
    min-width: 130px;
    flex: 1;
}

.ref-info-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    opacity: 0.6;
    margin-bottom: 6px;
}

.ref-info-value {
    font-size: 26px;
    font-weight: 700;
    letter-spacing: 1px;
}

.ref-value-referral {
    color: #f5c842;
}

.ref-value-userpoint {
    color: #5ec4ff;
}

.ref-info-arrow {
    font-size: 20px;
    opacity: 0.5;
    flex-shrink: 0;
}

/* Quick Select */
.ref-convert-label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    opacity: 0.7;
    margin-bottom: 10px;
}

.ref-quick-btns {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.ref-quick-btn {
    flex: 1;
    min-width: 56px;
    padding: 8px 4px;
    border: 1px solid rgba(255,255,255,0.2);
    background: rgba(255,255,255,0.05);
    color: inherit;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    transition: all 0.15s ease;
}

.ref-quick-btn:hover:not(:disabled) {
    background: rgba(255,255,255,0.15);
    border-color: rgba(255,255,255,0.4);
}

.ref-quick-btn--disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.ref-quick-btn--max {
    background: rgba(245, 200, 66, 0.12);
    border-color: rgba(245, 200, 66, 0.4);
    color: #f5c842;
}

.ref-quick-btn--max:hover:not(:disabled) {
    background: rgba(245, 200, 66, 0.25);
}

/* Alert */
.ref-alert {
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.ref-alert-danger {
    background: rgba(255, 80, 80, 0.12);
    border: 1px solid rgba(255,80,80,0.35);
    color: #ff7070;
}

.ref-alert-success {
    background: rgba(80, 220, 130, 0.12);
    border: 1px solid rgba(80,220,130,0.35);
    color: #60e090;
}

/* Live Preview */
.ref-preview {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 16px;
    font-size: 13px;
}

.ref-preview-row {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
    opacity: 0.85;
}

.ref-preview-neg { color: #ff7070; font-weight: 700; }
.ref-preview-pos { color: #60e090; font-weight: 700; }

.ref-preview-divider {
    border-top: 1px solid rgba(255,255,255,0.1);
    margin: 8px 0;
}

/* Note */
.ref-note {
    margin-top: 14px;
    font-size: 12px;
    opacity: 0.5;
    text-align: center;
}