/*html { font-family: sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }
body::-webkit-scrollbar { display: none; }*/
body { font-family: "Microsoft YaHei", sans-serif; font-size: 12px; margin: 0; background: #05060a; }
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; text-decoration: none; }
/*:before, :after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
:focus { outline: 0 !important; }*/
ul, li { list-style: none; margin: 0; padding: 0; }
input, button, select, textarea { font-family: inherit; font-size: inherit; line-height: inherit; }
a { background-color: transparent; text-decoration: none; cursor: pointer; }
input, select, textarea {color: #6f7888; background: none; outline: none;}
ul, li, ol { list-style: none; }
body, p, h1, h2, h3, h4, h5, h6, ul, ul li, ol, ol li, input, select, textarea, dt, dd { margin: 0; padding: 0; }
.text-f12 { font-size: 12px; }
.text-f13 { font-size: 13px; }
.text-f14 { font-size: 14px; }
.text-f16 { font-size: 16px; }
.text-bold { font-weight: bold; }
.text-normal { font-weight: normal; }
.text-red { color: red; }
.text-green { color: green; }
.text-black { color: #333; }
.text-coral { color: coral; }
.text-skyblue { color: lightskyblue; }
.text-star { color: #f30; margin: 0 5px; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.text-center { text-align: center; }
.text-link, .text-link a { color: blue;}
.bk5 { height: 5px; font-size: 1px; }
.bk10 { height: 10px; font-size: 1px; }
.bk20 { height: 20px; font-size: 1px; }
.empty { text-align: center; line-height: 30px; color: #888; }
.error { color: red; font-weight: normal; }
i.fa { margin-right: 3px; }
.w40 { width: 40px; }
.w50 { width: 50px; }
.w60 { width: 60px; }
.w65 { width: 65px; }
.w70 { width: 70px; }
.w80 { width: 80px; }
.w90 { width: 90px; }
.w100 { width: 100px; }
.w105 { width: 105px; }
.w120 { width: 120px; }
.w130 { width: 130px; }
.w140 { width: 140px; }
.w150 { width: 150px; }
.w160 { width: 160px; }
.w170 { width: 170px; }
.w180 { width: 180px; }
.w190 { width: 190px; }
.w200 { width: 200px; }
.w220 { width: 220px; }
.w250 { width: 250px; }
.w300 { width: 300px; }
.w400 { width: 400px; }
.w500 { width: 500px; }
.w600 { width: 600px; }
.w10p { width: 10%; }
.w20p { width: 20%; }
.w30p { width: 30%; }
.w40p { width: 40%; }
.w50p { width: 50%; }
.w60p { width: 60%; }
.w70p { width: 70%; }
.w80p { width: 80%; }
.w90p { width: 90%; }
.w98p { width: 98%; }
.w100p { width: 100%; }
.full-width { width: 100%; padding-left: 0; padding-right: 0;}
.d-flex { display:flex; }

.p-0 {
    padding: 0;
}

.p-1 {
    padding: 0.25rem;
}

.p-2 {
    padding: 0.5rem;
}

.p-3 {
    padding: 1rem;
}

.p-4 {
    padding: 1.5rem;
}

.p-5 {
    padding: 3rem;
}

.fancybox-content {
    max-height: 90%;
}

@media (min-width:320px)  {
 .fancybox-content {
         width: 90%;
     }
 }
@media (min-width:480px)  {
.fancybox-content {
        width: 80%;
    }
}

@media (min-width:1120px) {
 .fancybox-content {
         width: 75%;
  }
}
@media (min-width:1220px) {
 .fancybox-content {
         width: 70%;
  }
}

@media (min-width:1320px) {
 .fancybox-content {
         width: 65%;
  }
}

@media (min-width:1420px) {
 .fancybox-content {
         width: 60%;
  }
}

@media (min-width:1520px) {
 .fancybox-content {
         width: 55%;
  }
}

@media (min-width:1620px) {
 .fancybox-content {
         width: 50%;
  }
}





.package-info-content-group .package-info-content+.package-info-content {
    margin-top: 15px;
}

.package-info-content-group .package-info-content {
    margin-bottom: 0;
    border-radius: 4px;
}

.package-info-content-default>.package-info-content-heading {
    /* color: #333; */
    /* background-color: #f47e59; */
    /* border-color: #ddd; */
    /* box-shadow: inset 0 1px 1px rgb(0 0 0 / 36%); */
}


.package-info-content-title {
    /* font-weight: 100; */
}
.package-info-content-title {
    margin-top: 0;
    margin-bottom: 0;
    font-size: 1rem;
    font-weight: 700;
    color: #ff6873;
    width: 100%;
}

.package-info-content-group .package-info-content-heading {
    border-bottom: 0;
    /* border-bottom: 1px solid #dddddd7a; */
    border-top: 1px dotted #dce7eb;
}
.package-info-content-heading {
    overflow: hidden;
    display: flex;
}

.package-info-content-heading {
    padding: 6px 10px;
    border-bottom: 1px solid #ddd;
}

.package-info-content-default {
    /* border-color: #ddd; */
}

.package-info-content-group .package-info-content {
    /* margin-bottom: 0; */
    /* border-radius: 4px; */
}

.package-info-content {
    margin-bottom: 21px;
    background-color: #fff;
    /* border: 1px solid transparent; */
    border-radius: 4px;
    /* box-shadow: 0 1px 1px rgb(0 0 0 / 36%); */
    /* border-bottom: 1px solid #ddd; */
}

.package-info-content-body {
    padding: 12px;
}

.package-info-content-default>.package-info-content-heading+.package-info-content-collapse>.package-info-content-body {
    /* border-top-color: #ddd; */
}

.package-info-content-group .package-info-content-heading+.package-info-content-collapse>.list-group, .package-info-content-group .package-info-content-heading+.package-info-content-collapse>.package-info-content-body {
    /* border-top: 1px solid #ddd; */
}

.package-info-content-default {
    /* border-color: #ddd; */
}

.package-info-content-title.package-info-content-title a {
    color: hsl(238, 29%, 16%) !important;
    font-size: 13px;
    font-weight: bold;
}

.package-info-content-title-arrow {
color: hsl(14, 88%, 65%);
}
.package-info-content-group {
    margin-top: 15px;
    box-shadow: 0px 1px 2px 0px #d7d7d7;
    margin-bottom: 15px;
    /* border-bottom: 1px solid red; */
}

.text-info-highlight {
    color: rgb(240, 102, 102);
}

.asterisk-bullet {
    color: #f47c57;
    font-size: 9px;
    margin: 8px 0px;
}

.package-info-content-body{
    color: rgba(48, 69, 92, 0.8);
}

.promotion-list-btn {
    padding-top: 5px;
    padding-bottom: 5px;
}

.promotion-list-btn > div, .promotion-list-btn > button {
    width: 100%;
}



div.promo_timer {
	/* border: 1px solid #313131; */
	position: relative;
	/* background: #252525; */
	padding: 10px 5px;
	box-shadow: inset 0px -1px 14px 0px rgb(0 0 0 / 36%);
	border-radius: 20px;
}

	div.promo_timer:after, div.promo_timer:before,
	div.promo_timer .after, div.promo_timer .before {
		/* content: ' '; */
		/* height: 0; */
		position: absolute;
		/* width: 0; */
		/* border: 5px solid transparent; */
		/* border-right-color: #313131; */
		/* right: 100%; */
		
		border: 0px;
	}

	div.promo_timer:after,
	div.promo_timer .after {
		border-width: 7px;
		border-right-color: #252525;
		top: 5px;
		border: 0px;
		/**zoom: expression( this.runtimeStyle.zoom="1", this.innerHTML = "<img src='/_static/promotions/img/promo_arrow.gif' />" );*/
	}

	div.promo_timer:before,
	div.promo_timer .before {
		/* border-width: 9px; */
		/* border-right-color: #313131; */
		/* top: 3px; */
		
		border: 0px;
	}

	div.promo_timer.coming_soon, div.promo_timer.finish {
		font-size: 18px;
	}

	div.promo_timer.coming_soon {
		margin-top: -1px;
		background: #333;
		color: #2a8fbd;
		height: 26px;
		line-height: 26px;
		padding: 0px;
	}

		div.promo_timer.coming_soon:after,
		div.promo_timer.coming_soon .after,
		div.promo_timer.coming_soon:before,
		div.promo_timer.coming_soon .before {
			border-width: 0px;
		}

a.promo_join_btn {
	margin-top: 5px;
	font-size: 18px;
	background: #2A8FBD;
	color: #fff;
	line-height: 34px;
	height: 34px;
	width: 150px;
	display: block;
}

	a.promo_join_btn:hover {
		background: #38C0FF;
	}

.timer {
	color: #ff6873;
	font-size: 18px;
	width: 30px;
	text-align: center;
}

.timer_text > td {
	font-size: 9px;
}

.sprite_timer_diver {
    width: 1px;
    background: #404040;
}

.timer_text {
	color: black;
	text-align:center;
}








.valid_time {
    display: flex;
    align-items: center;
}


.valid_time .time-colon{
  display: flex;
  align-items: center;
  position: relative;
}
.valid_time .time-colon .am_pm{
  position: absolute;
  top: 0;
  right: -50px;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 1px;
}
.valid_time .time-colon .am_pm{
  color: #fff;
}
.valid_time .time-colon .time-text{
  height: 32px;
  width: 40px;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  background: #ffffff;
  border-radius: 5px;
  box-shadow: inset -1px -1px 3px 1px rgba(0, 0, 0, 0.2);
  /* padding: 5px; */
}
.valid_time .time-colon .time-text{
  /* background: #24292D; */
}
.valid_time .time-colon .time-text,
.valid_time .time-colon .colon{
  font-size: 11px;
  font-weight: 600;
}

.valid_time .time-text .num,
.valid_time .colon{
  color: #00000087;
}
.valid_time .time-colon .colon{
  font-size: 15px;
  margin: 0 4px;
}
.valid_time .time-colon .time-text .text{
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 1px;
}
.valid_time .time-colon .text{
  color: #00000087;
}
.valid_time .colon {
    color: #00000087;
}

.centered-element {
  margin: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}


.mt-auto {
    margin-top: auto;
}


.pkg-item .intro {
    display: flex !important;
    flex-direction: column !important;
}


.pkg-item {
    border-radius: 5px;
    border: 0.1rem solid #f5f5f5 !important;
    overflow: hidden;
    margin-bottom: 20px;
    padding: 2px;
}

.pkg-subtitle-section {
    font-size: 0.8rem;
    font-weight: 500;
    height: 5em;
    margin-left: 8px;
}

.pkg-title-section {
    font-size: 13px;
    font-weight: bold;
	min-height: 20px;
}




.flex-column {
    flex-direction: column !important;
}




.pkg-img-responsive {
  --d:6px;  /* folded part */
  --c:transparent; /* color */
  --f:8px; /* ribbon font-size */
  position: relative;
  box-shadow: inset 0px 0px 5px 1px #b7b7b7;
  background: #fafafa;
}
.pkg-img-responsive::before {
  content: attr(data-ribbon);
  font-size:var(--f);
  /* I : position & coloration */
  position: absolute;
  top: 0;
  right: 0;
  transform: translate(29.29%, -100%) rotate(45deg);
  transform-origin: bottom left;
  padding: 5px 35px calc(var(--d) + 5px);
  background: linear-gradient(rgba(0,0,0,0.5) 0 0) bottom/100% var(--d) no-repeat var(--c);
  /* II : clipping */
  clip-path: polygon(0 0,100% 0,100% 100%,calc(100% - var(--d)) calc(100% - var(--d)),var(--d) calc(100% - var(--d)) , 0 100%);
  /* III : masking */
  -webkit-mask:
      linear-gradient( 135deg, transparent calc(50% - var(--d)*0.707),#fff 0) bottom left,
      linear-gradient(-135deg, transparent calc(50% - var(--d)*0.707),#fff 0) bottom right;
  -webkit-mask-size:300vmax 300vmax;
  -webkit-mask-composite: destination-in;
   mask-composite: intersect;
}

.container .userhome, .pkg-item > .row {
    margin: 5px;
    /* background: #ffffff; */
    /* border: 1px solid #80808059; */
    box-shadow: 0px 2px 4px rgb(0 0 0 / 36%);
}


.pkg-item {
    border: 0px solid #ccc !important;
}

.pkg-status {
    border: 1px solid transparent;
    padding: 2px 5px;
    border-radius: 10px;
    font-weight: 400;
    font-size: 0.8em;
}

.fancybox-content {
    padding: 0px;
    padding-bottom: 24px;
}

.fancybox-close-small > svg {
    background: white;
    border-radius: 25px;
    padding: 5px;
    color: #0000008c;
}

.vipDesc .title{
	font-size: 48px;
	font-weight: 700;
	text-align: center;
	color: #eeb609;
	text-shadow: -1px 3px 5px #c2c2c2;
}

.vipDesc .sub-title{
	font-size: 14px;
	text-align: center;
	font-weight: 700;
}

.vipDesc .message{
	font-size: 14px;
	text-align: center;
}

.vipLevels .container{
	display: flex;
	width: 40%;
	justify-content: center;
}

.vipLevels .title{
	background-image: linear-gradient(90deg, #eeb609, #c79729);
	color: #ffffff;
	padding: 10px 35px;
	font-size: 20px;
	font-weight: 700;
	border-radius: 50px;
	box-shadow: 0px 5px 5px #ccc;
}

.vipLevels .container img{
	width: 50px;
	height: 50px;
	background-color: #fff;
	border-radius: 50%;
	padding: 5px;
	margin-left: 20px;
}

.vipLevels .levelTitle{
	font-size: 16px;
	font-weight: 700;
	margin-bottom: 5px;
	color: #fbc001;
	font-weight: 700;
	text-shadow: 1px 3px 3px #ccc;
}

.vipLevels > *{
	margin-bottom: 20px;
}

.vipLevels .levelIcon{
	width: 30%;
	margin-right: 5px;
	align-self: center;
}

.vipLevels .levelText{
	width: 70%;
	text-align: left;
}

.vipLevels .levelText ul li{
	list-style: disc;
}

.vipLevels .levelText ul li::marker{
	color: #fbc001;
}

.vipLevels .levelGroup{
	display: flex;
	justify-content: space-around;
	text-align: center;
	flex-wrap: wrap;
}

.vipLevels .levelGroup > *{
	display: flex;
	width: 40%;
	border-radius: 10px;
	padding: 10px;
	background-color: #f0f0f0;
	box-shadow: 1px 3px 3px #ccc;
	margin: 10px 5%;
}

/* Bootstrap and Tailwind CSS Flex Utility Classes */
/* Flex Utilities */

/* Display Flex */
.d-flex,
.flex {
  display: flex;
}

/* Flex Directions */
.flex-row {
  flex-direction: row;
}
.flex-column {
  flex-direction: column;
}
.flex-row-reverse {
  flex-direction: row-reverse;
}
.flex-column-reverse {
  flex-direction: column-reverse;
}

/* Flex Justify Content */
.justify-content-start,
.justify-start {
  justify-content: flex-start;
}
.justify-content-end,
.justify-end {
  justify-content: flex-end;
}
.justify-content-center,
.justify-center {
  justify-content: center;
}
.justify-content-between,
.justify-between {
  justify-content: space-between;
}
.justify-content-around,
.justify-around {
  justify-content: space-around;
}
.justify-content-evenly,
.justify-evenly {
  justify-content: space-evenly;
}

/* Flex Align Items */
.align-items-start,
.items-start {
  align-items: flex-start;
}
.align-items-end,
.items-end {
  align-items: flex-end;
}
.align-items-center,
.items-center {
  align-items: center;
}
.align-items-baseline,
.items-baseline {
  align-items: baseline;
}
.align-items-stretch,
.items-stretch {
  align-items: stretch;
}

/* Flex Wrap */
.flex-wrap {
  flex-wrap: wrap;
}
.flex-nowrap {
  flex-wrap: nowrap;
}
.flex-wrap-reverse {
  flex-wrap: wrap-reverse;
}

/* Grid Columns */
.grid-cols-1 {
	grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .grid-cols-2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .grid-cols-3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .grid-cols-4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .grid-cols-5 {
	grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .grid-cols-6 {
	grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .grid-cols-7 {
	grid-template-columns: repeat(7, minmax(0, 1fr));
  }
  .grid-cols-8 {
	grid-template-columns: repeat(8, minmax(0, 1fr));
  }
  .grid-cols-9 {
	grid-template-columns: repeat(9, minmax(0, 1fr));
  }
  .grid-cols-10 {
	grid-template-columns: repeat(10, minmax(0, 1fr));
  }
  .grid-cols-11 {
	grid-template-columns: repeat(11, minmax(0, 1fr));
  }
  .grid-cols-12 {
	grid-template-columns: repeat(12, minmax(0, 1fr));
  }
  
  /* Grid Rows */
  .grid-rows-1 {
	grid-template-rows: repeat(1, minmax(0, 1fr));
  }
  .grid-rows-2 {
	grid-template-rows: repeat(2, minmax(0, 1fr));
  }
  .grid-rows-3 {
	grid-template-rows: repeat(3, minmax(0, 1fr));
  }
  .grid-rows-4 {
	grid-template-rows: repeat(4, minmax(0, 1fr));
  }
  .grid-rows-5 {
	grid-template-rows: repeat(5, minmax(0, 1fr));
  }
  .grid-rows-6 {
	grid-template-rows: repeat(6, minmax(0, 1fr));
  }
  .grid-rows-7 {
	grid-template-rows: repeat(7, minmax(0, 1fr));
  }
  .grid-rows-8 {
	grid-template-rows: repeat(8, minmax(0, 1fr));
  }
  .grid-rows-9 {
	grid-template-rows: repeat(9, minmax(0, 1fr));
  }
  .grid-rows-10 {
	grid-template-rows: repeat(10, minmax(0, 1fr));
  }
  .grid-rows-11 {
	grid-template-rows: repeat(11, minmax(0, 1fr));
  }
  .grid-rows-12 {
	grid-template-rows: repeat(12, minmax(0, 1fr));
  }
  


/* Spacing Utilities */

/* Margin Utilities */

/* Margin (all sides) */
.m-0 { margin: 0; }
.m-1 { margin: 0.25rem; }
.m-2 { margin: 0.5rem; }
.m-3 { margin: 1rem; }
.m-4 { margin: 1.5rem; }
.m-5 { margin: 3rem; }

/* Margin Top */
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 1rem; }
.mt-4 { margin-top: 1.5rem; }
.mt-5 { margin-top: 3rem; }

/* Margin Bottom */
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 0.25rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 1rem; }
.mb-4 { margin-bottom: 1.5rem; }
.mb-5 { margin-bottom: 3rem; }

/* Margin Left */
.ml-0 { margin-left: 0; }
.ml-1 { margin-left: 0.25rem; }
.ml-2 { margin-left: 0.5rem; }
.ml-3 { margin-left: 1rem; }
.ml-4 { margin-left: 1.5rem; }
.ml-5 { margin-left: 3rem; }

/* Margin Right */
.mr-0 { margin-right: 0; }
.mr-1 { margin-right: 0.25rem; }
.mr-2 { margin-right: 0.5rem; }
.mr-3 { margin-right: 1rem; }
.mr-4 { margin-right: 1.5rem; }
.mr-5 { margin-right: 3rem; }

/* Margin X-axis (left and right) */
.mx-0 { margin-left: 0; margin-right: 0; }
.mx-1 { margin-left: 0.25rem; margin-right: 0.25rem; }
.mx-2 { margin-left: 0.5rem; margin-right: 0.5rem; }
.mx-3 { margin-left: 1rem; margin-right: 1rem; }
.mx-4 { margin-left: 1.5rem; margin-right: 1.5rem; }
.mx-5 { margin-left: 3rem; margin-right: 3rem; }

/* Margin Y-axis (top and bottom) */
.my-0 { margin-top: 0; margin-bottom: 0; }
.my-1 { margin-top: 0.25rem; margin-bottom: 0.25rem; }
.my-2 { margin-top: 0.5rem; margin-bottom: 0.5rem; }
.my-3 { margin-top: 1rem; margin-bottom: 1rem; }
.my-4 { margin-top: 1.5rem; margin-bottom: 1.5rem; }
.my-5 { margin-top: 3rem; margin-bottom: 3rem; }

/* Padding Utilities */

/* Padding (all sides) */
.p-0 { padding: 0; }
.p-1 { padding: 0.25rem; }
.p-2 { padding: 0.5rem; }
.p-3 { padding: 1rem; }
.p-4 { padding: 1.5rem; }
.p-5 { padding: 3rem; }

/* Padding Top */
.pt-0 { padding-top: 0; }
.pt-1 { padding-top: 0.25rem; }
.pt-2 { padding-top: 0.5rem; }
.pt-3 { padding-top: 1rem; }
.pt-4 { padding-top: 1.5rem; }
.pt-5 { padding-top: 3rem; }

/* Padding Bottom */
.pb-0 { padding-bottom: 0; }
.pb-1 { padding-bottom: 0.25rem; }
.pb-2 { padding-bottom: 0.5rem; }
.pb-3 { padding-bottom: 1rem; }
.pb-4 { padding-bottom: 1.5rem; }
.pb-5 { padding-bottom: 3rem; }

/* Padding Left */
.pl-0 { padding-left: 0; }
.pl-1 { padding-left: 0.25rem; }
.pl-2 { padding-left: 0.5rem; }
.pl-3 { padding-left: 1rem; }
.pl-4 { padding-left: 1.5rem; }
.pl-5 { padding-left: 3rem; }

/* Padding Right */
.pr-0 { padding-right: 0; }
.pr-1 { padding-right: 0.25rem; }
.pr-2 { padding-right: 0.5rem; }
.pr-3 { padding-right: 1rem; }
.pr-4 { padding-right: 1.5rem; }
.pr-5 { padding-right: 3rem; }

/* Padding X-axis (left and right) */
.px-0 { padding-left: 0; padding-right: 0; }
.px-1 { padding-left: 0.25rem; padding-right: 0.25rem; }
.px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
.px-3 { padding-left: 1rem; padding-right: 1rem; }
.px-4 { padding-left: 1.5rem; padding-right: 1.5rem; }
.px-5 { padding-left: 3rem; padding-right: 3rem; }

/* Padding Y-axis (top and bottom) */
.py-0 { padding-top: 0; padding-bottom: 0; }
.py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.py-3 { padding-top: 1rem; padding-bottom: 1rem; }
.py-4 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.py-5 { padding-top: 3rem; padding-bottom: 3rem; }


/* Text Utilities */

/* Text Alignment */
.text-start,
.text-left { text-align: left; }
.text-end,
.text-right { text-align: right; }
.text-center { text-align: center; }

/* Text Transform */
.text-lowercase,
.lowercase { text-transform: lowercase; }
.text-uppercase,
.uppercase { text-transform: uppercase; }
.text-capitalize,
.capitalize { text-transform: capitalize; }

/* Text Decoration */
.text-decoration-none,
.no-underline { text-decoration: none; }
.text-decoration-underline,
.underline { text-decoration: underline; }
.text-decoration-line-through,
.line-through { text-decoration: line-through; }

/* Background Utilities */

/* Background Colors */
.bg-primary { background-color: #007bff; }
.bg-secondary { background-color: #6c757d; }
.bg-success { background-color: #28a745; }
.bg-danger { background-color: #dc3545; }
.bg-warning { background-color: #ffc107; }
.bg-info { background-color: #17a2b8; }
.bg-light { background-color: #f8f9fa; }
.bg-dark { background-color: #343a40; }
.bg-white { background-color: #ffffff; }

/* Display Utilities */

.d-none,
.hidden { display: none; }
.d-inline,
.inline { display: inline; }
.d-inline-block,
.inline-block { display: inline-block; }
.d-block,
.block { display: block; }
.d-grid { display: grid; }
.d-flex,
.flex { display: flex; }
.d-inline-flex,
.inline-flex { display: inline-flex; }

/* Gap Utilities */

/* Gap (all sides) */
.gap-0 { gap: 0; }
.gap-1 { gap: 0.25rem; }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 1rem; }
.gap-4 { gap: 1.5rem; }
.gap-5 { gap: 3rem; }

/* Row Gap */
.row-gap-0 { row-gap: 0; }
.row-gap-1 { row-gap: 0.25rem; }
.row-gap-2 { row-gap: 0.5rem; }
.row-gap-3 { row-gap: 1rem; }
.row-gap-4 { row-gap: 1.5rem; }
.row-gap-5 { row-gap: 3rem; }

/* Column Gap */
.column-gap-0 { column-gap: 0; }
.column-gap-1 { column-gap: 0.25rem; }
.column-gap-2 { column-gap: 0.5rem; }
.column-gap-3 { column-gap: 1rem; }
.column-gap-4 { column-gap: 1.5rem; }
.column-gap-5 { column-gap: 3rem; }

/* X-axis Gap (Column Gap) */
.gap-x-0 { column-gap: 0; }
.gap-x-1 { column-gap: 0.25rem; }
.gap-x-2 { column-gap: 0.5rem; }
.gap-x-3 { column-gap: 1rem; }
.gap-x-4 { column-gap: 1.5rem; }
.gap-x-5 { column-gap: 3rem; }

/* Y-axis Gap (Row Gap) */
.gap-y-0 { row-gap: 0; }
.gap-y-1 { row-gap: 0.25rem; }
.gap-y-2 { row-gap: 0.5rem; }
.gap-y-3 { row-gap: 1rem; }
.gap-y-4 { row-gap: 1.5rem; }
.gap-y-5 { row-gap: 3rem; }


/* Position Utilities */

.position-static,
.static { position: static; }
.position-relative,
.relative { position: relative; }
.position-absolute,
.absolute { position: absolute; }
.position-fixed,
.fixed { position: fixed; }
.position-sticky,
.sticky { position: sticky; }

/* Offsets */
.top-0 { top: 0; }
.right-0 { right: 0; }
.bottom-0 { bottom: 0; }
.left-0 { left: 0; }

/* Border Utilities */

/* Border Width */
.border { border: 1px solid; }
.border-0 { border: 0; }
.border-top { border-top: 1px solid; }
.border-end,
.border-right { border-right: 1px solid; }
.border-bottom { border-bottom: 1px solid; }
.border-start,
.border-left { border-left: 1px solid; }

/* Border Radius */
.rounded { border-radius: 0.25rem; }
.rounded-sm { border-radius: 0.125rem; }
.rounded-lg { border-radius: 0.5rem; }
.rounded-full { border-radius: 9999px; }

/* Visibility Utilities */

.visible { visibility: visible; }
.invisible { visibility: hidden; }

/* Width and Height Utilities */

/* Width */
.w-25 { width: 25%; }
.w-50 { width: 50%; }
.w-75 { width: 75%; }
.w-100,
.w-full { width: 100%; }
.w-auto { width: auto; }

/* Height */
.h-25 { height: 25%; }
.h-50 { height: 50%; }
.h-75 { height: 75%; }
.h-100,
.h-full { height: 100%; }
.h-auto { height: auto; }

/* Opacity Utilities */

.opacity-0 { opacity: 0; }
.opacity-25 { opacity: 0.25; }
.opacity-50 { opacity: 0.5; }
.opacity-75 { opacity: 0.75; }
.opacity-100 { opacity: 1; }

/* Cursor Utilities */

.cursor-pointer { cursor: pointer; }
.cursor-default { cursor: default; }
.cursor-move { cursor: move; }
.cursor-not-allowed { cursor: not-allowed; }