* {

  margin: 0;

  padding: 0;

  border: 0;

  box-sizing: border-box;
 
  color: #000000;

}
 
h1,

h2,

p,

ul {

  margin: 0 !important;

}
 
/* for hidden css */

/* visibility: hidden; */

.hidden {

  visibility: hidden;

}
 
/* A4 Page Dimensions (595px x 842px at 72 DPI) */

#pdf {

  width: 595px;

  height: 842px;

  margin: 0 auto;

  padding: 20px 30px;

  background-color: #ffffff;

}
 
@page {

  size: 595px 842px;

  margin: 0;

}
 
.header {

  width: 100%;

  height: 32px;

  /*display: flex;

  flex-direction: row;*/

  /*align-items: center;*/

}
 
.header .icon {

  margin: 0;
 
}
 
/* give this #pdf */

#pdf .header .icon.thai-logo {

/*  margin-right: auto;*/

   float:left;

   width:50%;

}

.header .icon.star-logo {

	float:right;

}

.icon {

  display: inline-block;

}
 
.header .icon.thai-logo img {

  width: 100px;

  height: 32.12px;

}
 
.header .icon.star-logo img {

  width: 177.35px;

  height: 17.74px;
 
}
 
.duration-detail img {

  width: 47.57px;

  height: 16px;

}
 
.qr-code {

  width: 100%;

  height: auto;

}
 
.notice-section img {

  width: 40px;

  height: 40px;

}
 
.banner-container .banner-sm {

  width: 100%;

  height: 64px;

  overflow: hidden;

}
 
.banner-container .banner-md {

  width: 100%;

  height: 130px;

  overflow: hidden;

  margin-top: 20px;

}
 
.banner-container img {

  width: 100%;

  height: 100%;

  /*object-fit: cover;*/

}
 
.text-heading {

  margin: 16px 0px;

  width: auto;

  height: 52px !important;

}
 
.text-heading h1 {

  color: #000000;

  font-family: "InterBold", sans-serif;

  font-size: 24px;

  font-weight: 700;

  line-height: 36px;

  text-align: left;

}
 
.text-heading p,

.text-heading span {

  color: #000000;

  font-family: "InterMedium", sans-serif;

  font-size: 9px;

  font-style: normal;

  font-weight: 500;

  line-height: 150%; /* 13.5px */

}
 
/*

.text-container {

    display: flex;

    flex-direction: row;

    align-items: center;

}

*/

.text-error {

color: #FF2E57;

font-family: "Interbold", sans-serif;

font-weight: 700;

font-size: 10px;

line-height: 15px;

text-align: center;

text-transform: uppercase;
 
margin-left: 150px;

border-radius: 4px;

padding: 2px 5px;

height: 19px;

background-color: #FFE5EA;

}
 
hr.horizontal-line {

  /*  margin-top: 12px !important;*/

    border: 1px solid #dadadf !important;

    display: block;

    width: 100%;

}
 
/* alternative for space-between */

.boarding-pass-container {

  background: #f5efff;

/*  width: 100%;*/

  width: 535px;

  height: 130px;

  padding: 12px;

  border-radius: 8px;

  margin-bottom:15px;

  /*display: flex;*/

/*  justify-content: space-between;*/

}
 
.boarding-pass-container .passenger-section {

  /* width: 180px; */

  width: 230px;

  /* height: 104px; */

  height: auto;

  float:left;

}
 
.boarding-pass-container .seat-section {

  /* width: 130px; */

  width: 33%;

  /* height: 103px; */

  height: auto;

  float:left;

}

.boarding-section{

	height:70px;

}
 
 
.qr-section {

  width: 92px;

  /*height: 104px;*/

  height: auto;

  background-color: #ffffff;

  padding-top: 3px;

  padding-right: 3px;

  padding-bottom: 3px;

  padding-left: 3px;

  float:right;

}
 
.qr-section p {

  font-size: 8px;

}
 
/*

.checkin-section {

  width: 137px;

  display: flex;

  padding: 12px 8px 8px 8px;

  flex-direction: column;

  align-items: flex-start;

  gap: 4px;

  align-self: stretch;
 
  border-radius: 8px;

  border: 1px solid #2C3059;

}

*/

.checkin-section img {

  width: 40px;

  height: 40px

}
 
.checkin-section p {

  color: #000000;

  font-family: "InterMedium";

  font-size: 8px;

  font-style: normal;

  font-weight: 500;

  line-height: 150%; /* 12px */

}
 
.flight-detail {

  width: 100%;

  height: 150px;

  /*padding-top:10px;*/

}
 
/* .flight-detail .flight1,

.flight-detail .flight2 {

  margin-right: auto;

} */
 
.flight-detail .flight2 {

  width: 22%;

  padding-left: 20px;

  height:90%;

  margin-top:10px;

}
 
.flight-detail .flight3 {

  width: 20%;

  float:right;

  height:90%;

  margin-top:10px;

}
 
.flight-detail .flight1 {

  /*display: flex;

  flex-direction: row;*/

  display:inline-block;

  float:left;

  width:55%;

   height:90%;

  /*margin-top:10px;*/
 
 
}
 
.flight-detail .flight1 .duration-detail {

   display:inline-block;

  float:left;

  margin-top:52px;

  text-align: center;

  width:25%
 
}
 
.flight-detail .flight1 .duration-detail p{

width: 100%;

}

/* alternative for gap  */

.flight-detail .flight2,

.flight3 {

/*display: flex;

  flex-direction: column;*/

    display:inline-block;

  /* gap: 20px; */

}
 
.flight-detail .flight2 .first-child,

.flight-detail .flight3 .first-child {

  margin-bottom: 20px;

}

/* ////////////////// */
 
.grid-container {

  display: block;

  /*grid-template-columns: repeat(2, auto);*/

  /* gap: 6px; */

}
 
.grid-container .label-value {

  margin-right: 0px;

}

.grid-container .gate-section,.grid-container .seat-section{

	display:inline-block;

	float:left;

	width:80px;

}

.grid-container .seat-section{

	float:left;

}

.gate-seat-row{

	height: 50px;

}
 
 
.badge {

  width: 90%;

  height: auto;

  margin-top: 4px;

}
 
.badge .primary-text {

  color: #684b9b !important;

  font-family: "Interbold", sans-serif;

  font-size: 8px;

  font-weight: 700;

  line-height: 12.8px;

  text-align: left;

  letter-spacing:0px;

	vertical-align: middle;

	text-transform:uppercase;

}
 
.boarding-pass-container .date {

  color: #2c3059;

  font-family: "Interbold", sans-serif !important;

  font-size: 9px !important;

  font-weight: 700;

  line-height: 14.4px;

  text-align: left;

}
 
.custom-value {

  font-family: "Interbold", sans-serif;

  font-size: 14px;

  font-weight: 700;

  line-height: 22.4px;

  text-align: left;

}
 
 
.label-value {

  /*display: flex;

  flex-direction: column;*/

}
 
 
.label-value label {

  color: #6a6d87;

  font-family: "Interbold", sans-serif;

  font-size: 9px;

  font-weight: 700;

  line-height: 14.4px;

  text-align: left;

  display:block;

}
 
.label-value span {

  font-family: "Interbold", sans-serif;

  font-size: 16px;

  font-weight: 700;

  line-height: 25.6px;

  text-align: left;

  display:inline-block;

  min-height:25px;

}
 
 
p,

li, span {

  color: #000000;

  font-family: "Inter", sans-serif;

  font-size: 8px;

  font-weight: 400;

  line-height: 12.8px;

  text-align: left;

}
 
.grid-layout,

.depart-detail{

  width: 33%;

}
 
.arrive-detail {

  width: 40%;

  padding-left:7%;

}
 
.depart-detail,

.arrive-detail,

.duration-detail {

  /*display: flex;

  flex-direction: column;*/

  display:inline-block;

	float:left;

	margin-top:10px;

  /* gap: 2px; */

}
 
.depart-detail div,

.depart-detail p,

.arrive-detail div,

.arrive-detail p {

  margin-bottom: 2px !important;

}
 
.duration-detail p {

  font-family: "Inter", sans-serif;

  font-size: 8px;

  font-weight: 300;

  line-height: 12.8px;

  text-align: center;

}
 
.notice-section {

  width: 100%;

  /*display: flex;

	flex-direction: row; */

	display:block;

    height: 60px;
 
}
 
.notice-section .notice {

  width: 50%;

  /*display: flex;

	flex-direction: row; */

	display: inline-block;

	float:left;

	padding-top:12px;

	padding-bottom:12px;

  /* gap: 8px; */

  /*align-items: center;*/

}
 
.notice-section .notice img {

  margin-right: 8px;

      float: left;

}
 
.notice-section .notice span {

	margin-top: 15px !important;

    display: inline-block;

    width: 75%;

}

.info-section {

  /*display: flex;

  flex-direction: column;*/

  display:block;

  /* gap: 20px; */

  margin-top:15px;

  text-align: left;

}
 
.info-section .info {

  margin-bottom: 16px;

}
 
.info-section .info ul li{

	display: list-item;

  list-style: disc;

  list-style-type: disc;

  margin-left:15px;

}
 
ul span.bullet {

  font-size: 4px !important;

  padding-right: 3px;

}
 
/*ul li::marker {

  font-size: 4px !important;

}*/
 
.text-bold {

  font-family: "Interbold", sans-serif;

}
 
.text-sm {

  /* 9px */

  font-family: "Interbold", sans-serif !important;

  font-size: 9px !important;

  font-weight: 700;

  line-height: 14.4px;

  text-align: left;

}
 
.text-md {

  /* 12px */

  font-family: "InterBold", sans-serif !important;

  font-size: 12px !important;

  font-weight: 700;

  line-height: 19.2px;

  text-align: left;

}
 
.text-xl {

  font-family: "InterBold", sans-serif !important;

  font-size: 24px !important;

  font-weight: 700;

  line-height: 28.8px;

}
 
/* text transform */

.text-capitalize {

  text-transform: capitalize !important;

}
 
.text-uppercase {

  text-transform: uppercase !important;

}

 
/* pdf */

#pdf .dangerous-goods {

  /*display: flex;

	flex-direction: row; */

	display:block;

/*  gap: 10px;*/

  margin-top: 16px;

}
 
#pdf .dangerous-goods h1 {

  color: #2c3059;

   /* font-family: "InterBold"; */

  font-size: 9px;

  font-weight: 700;

  line-height: 13.5px;

  text-align: left;

}
 
#pdf .dangerous-goods h2 {

  color: #2c3059;

   /* font-family: "InterBold"; */

  font-size: 8px;

  font-weight: 700;

  line-height: 12.8px;

  text-align: left;

}
 
#pdf .dangerous-goods p {

  color: #2c3059;

  font-family: "Inter", sans-serif;

  font-size: 6px;

  font-weight: 400;

  line-height: 9.6px;

  text-align: left;

}
 
#pdf .baggage {

  /*display: flex;

	flex-direction: row; */

	display:inline-block;

/*  gap: 12px;*/

/*  margin-top: 10px;*/

}
 
#pdf .icons-container {

  /*display: grid;

  grid-template-columns: repeat(3, auto);

  row-gap: 10px;*/

  display:table;

  margin-top: 12px;

}
 
#pdf .icons-container .icon {

  width: 171.67px;

  height: auto;

  /*display: flex;

	flex-direction: row; */

	display:table-cell;

/*  gap: 10px;*/

}
 
#pdf .icons-container img {

  width: 24px;

  height: 24px;

  margin-right: 10px;

}
 
#pdf .icons-container div {

  /*display: flex;

	flex-direction: row; */

	display:inline-block;

  /*align-self: center;*/

  vertical-align:top;

}
 
#pdf .icons-container label {

  color: #2c3059;

    /* font-family: "InterBold"; */

  font-size: 7px;

  font-weight: 700;

  line-height: 11.2px;

  text-align: left;

}
 
#pdf .icons-container p {

  color: var(--gray-text, #6a6d87);

  font-family: "Inter", sans-serif;

  font-size: 6px;

  font-weight: 400;

  line-height: 9.6px;

  text-align: left;

}
 
#pdf .baggage .remark {

  margin-top: 12px !important;

}
 
#dangerous .icons-container div {

  /*display: flex;

	flex-direction: row; */

	display:inline-block;

	float:left;

/* align-self: center;*/

  vertical-align:top;

}
 
#dangerous .baggage {

  /*display: flex;

	flex-direction: row; */

	display:inline-block;

	float:left;

	margin-right:20px;

  /*gap: 24px;*/
 
  border-radius: 0px;

  padding: 0px;

}
 
/* dangerous */

#dangerous .header {

  width: 100%;

  height: 56px;

  /*display: flex;*/

  /*align-items: center;*/

  /*collide with global-content-padding*/

  padding: 8px 24px;

  border-bottom: 1px solid #dfe0eb;

}
 
#dangerous .header .icon:first-child img {

  width: 99.2px;

  height: 32px;

}
 
#dangerous .dangerous-goods {

  width: 100%;

  padding: 24px 16px;

  /*display: flex;

	flex-direction: row; */

	display:inline-block;

	float:left;

	margin-right:20px;

  /*gap: 24px;*/

}
 
#dangerous .dangerous-goods p {

  color: #000000;

  font-family: "Inter", sans-serif;

  font-size: 8px;

  font-weight: 400;

  line-height: 12.8px;

  text-align: left;

}

#dangerous .icons-container {

  display: table;

  /*grid-template-columns: auto;*/

  /*row-gap: 16px;*/

}
 
#dangerous .icons-container .icon {

  width: auto;

  height: auto;

  /*display: flex;

	flex-direction: row; */

	display:table-cell;

	float:left;

  /*gap: 16px;*/

}
 
#dangerous .icons-container img {

  width: 48px;

  height: 48px;

}
 
#dangerous .icons-container label {

  color: #2c3059;
 
  /* Body1/Body 1 — Bold; */

/* font-family: "InterBold"; */

  font-size: 16px;

  font-weight: 700;

  line-height: 25.6px;

  text-align: left;

}
 
#dangerous .icons-container p {

  color: var(--gray-text, #6a6d87);

  /* Body2/Body 2 — Regular; */

  font-family: "Inter", sans-serif;

  font-size: 14px;

  font-weight: 400;

  line-height: 22.4px;

  text-align: left;

}
 
#dangerous .baggage .remark {

  /* margin-top: 12px !important; */
 
  color: var(--gray-text, #6a6d87);

  font-family: "Inter", sans-serif;

  font-size: 14px;

  font-weight: 400;

  line-height: 22.4px;

  text-align: left;

}

#dangerous .dangerous-goods h1,

#dangerous .dangerous-goods h2 {

  color: #2c3059;

  font-family: "Interbold", sans-serif;

  font-size: 20px;

  font-weight: 700;

  line-height: 30px;

  text-align: left;

}
 
#dangerous .dangerous-goods p {

  color: var(--gray-text, #6a6d87);
 
  /* Body/Body — Regular; */

  font-family: "Inter", sans-serif;

  font-size: 16px;

  font-weight: 400;

  line-height: 25.6px;

  text-align: left;

}
 
#dangerous .submit {

  /*display: flex;

	flex-direction: row; */

	display:inline-block;

	float:left;

  /*gap: 24px;*/

}
 
.button-group .primary-button {

  width: 100%;

  height: 50px;

  padding: 12px 8px;

  border-radius: 30px;

  background: linear-gradient(98.72deg, #684b9b -27.72%, #381b6b 127.08%);

  font-family: "Interbold", sans-serif;

  font-size: 16px;

  font-weight: 700;

  line-height: 25.6px;

  text-align: center;
 
  color: var(--gray-text-invert, #ffffff);

}
 
 
.button-group .secondary-button {

  width: 128px;

  height: 50px;

  padding: 12px 8px;

  border-radius: 30px;
 
  font-family: "Interbold", sans-serif;

  font-size: 16px;

  font-weight: 700;

  line-height: 25.6px;

  text-align: center;
 
  color: var(--primary-text, #684B9B);

  background-color: unset !important;

}
 
#dangerous .horizontal-line {

  border-bottom: 1px solid #DFE0EB !important;

  margin: -4px -40px !important;

}
 
/* checkbox */

#dangerous .form-check label {

  color: var(--gray-text-strong, #2c3059);

  font-family: "InterMedium";

  font-size: 16px;

  font-weight: 500;

  line-height: 25.6px;

  text-align: left;

}
 
.form-check-input:checked[type="checkbox"] {

  background-image: url("clientlibs/css/clientlibs/assets/BoardingPass/checkedIcon.png");

}
 
.form-check-input:checked[type="checkbox"] {

  border-radius: var(--radius-3xs, 4px) !important;

  border: 1px solid var(--primary-stroke-strong, #684b9b) !important;

  background-color: var(--primary-surface-weak, #f5efff) !important;

  background-image: url("clientlibs/css/clientlibs/assets/BoardingPass/checkedIcon.png") !important;

}




* {
  margin: 0;
  padding: 0;
  border: 0;
  box-sizing: border-box;

  color: #000000;
}

h1,
h2,
p,
ul {
  margin: 0 !important;
}

/* for hidden css */
/* visibility: hidden; */
.hidden {
  visibility: hidden;
}

/* A4 Page Dimensions (595px x 842px at 72 DPI) */
#pdf {
  width: 595px;
  height: 842px;
  margin: 0 auto;
  padding: 20px 30px;
  background-color: #ffffff;
}

@page {
  size: 595px 842px;
  margin: 0;
}

.header {
  width: 100%;
  height: 32px;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.header .icon {
  margin: 0;
}

.header .icon.thai-logo {
/*  margin-right: auto;*/
/*  margin-right: 260px;*/
}

.icon {
  display: inline-block;
}

.header .icon.thai-logo img {
  width: 100px;
  height: 32.12px;
}

.header .icon.star-logo img {
  width: 177.35px;
  height: 17.74px;
}

.duration-detail img {
  width: 47.57px;
  height: 16px;
}

.qr-code {
  width: 100%;
  height: max-content;
}

.notice-section img {
  width: 40px;
  height: 40px;
}

.banner-container .banner-sm {
  width: 100%;
  height: 64px;
  overflow: hidden;
}

.banner-container .banner-md {
  width: 100%;
  height: 130px;
  overflow: hidden;
  margin-top: 20px;
}

.banner-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.text-heading {
  margin: 16px 0px;
  width: auto;
  height: 52px !important;
}

.text-heading h1 {
  color: #000000;
  /* font-family: "InterBold"; */
  font-size: 24px;
  font-weight: 700;
  line-height: 36px;
  text-align: left;
}

.text-heading p {
  color: #000000;
  font-family: "InterMedium";
  font-size: 9px;
  font-style: normal;
  font-weight: 500;
  line-height: 150%; /* 13.5px */
}

.text-container {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.text-error {
color: #FF2E57;
/* font-family: "InterBold"; */
font-weight: 700;
font-size: 10px;
line-height: 15px;
text-align: center;
text-transform: uppercase;

margin-left: 150px;
border-radius: 4px;
padding: 2px 5px;
height: 19px;
background-color: #FFE5EA;
}

hr.horizontal-line {
  margin: 12px 0px !important;
  border: 1px solid #cacad9 !important;
  opacity: 0.3;
}

/* alternative for space-between */
.boarding-pass-container {
  background: #f5efff;
/*  width: 100%;*/
  width: 535px;
  height: 128px;
  padding: 12px;
  border-radius: 8px;
  display: flex;
/*  justify-content: space-between;*/
}

.boarding-pass-container .passenger-section {
  /* width: 180px; */
  width: 250px;
  /* height: 104px; */
  height: max-content;
}

.boarding-pass-container .seat-section {
  /* width: 130px; */
  width: 120px;
  /* height: 103px; */
  height: max-content;
  margin-right: 56px;
}

.boarding-pass-container .passenger-section,
.boarding-pass-container .seat-section {
  /* margin-right: auto; */
  /* margin-right: 56px; */
}

.qr-section {
  width: 92px;
  /*height: 104px;*/
  height: max-content;
  background-color: #ffffff;
  padding-top: 3px;
  padding-right: 3px;
  padding-bottom: 3px;
  padding-left: 3px;
}

.qr-section p {
  font-size: 8px;
}

.checkin-section {
  width: 137px;
  display: flex;
  padding: 12px 8px 8px 8px;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  align-self: stretch;

  border-radius: 8px;
  border: 1px solid #2C3059;
}

.checkin-section img {
  width: 40px;
  height: 40px
}

.checkin-section p {
  color: #000000;
  font-family: "InterMedium";
  font-size: 8px;
  font-style: normal;
  font-weight: 500;
  line-height: 150%; /* 12px */
}

.flight-detail {
  width: 100%;
  height: 111px;
  display: flex;
  align-items: start;
  /* justify-content: space-between; */
}

/* .flight-detail .flight1,
.flight-detail .flight2 {
  margin-right: auto;
} */

.flight-detail .flight2 {
  width: 60px;
  margin-left: 32px;
}

.flight-detail .flight3 {
  width: 80px;
  margin-left: 32px;
}

.flight-detail .flight1 {
  display: flex;
  flex-direction: row;
  align-items: center;
  /* justify-content: space-between; */
  /* gap: 24px; */
}

.flight-detail .flight1 .duration-detail {
  margin-left: 24px;
  margin-right: 24px;
}

/* alternative for gap  */
.flight-detail .flight2,
.flight3 {
  display: flex;
  flex-direction: column;
  /* gap: 20px; */
}

.flight-detail .flight2 .first-child,
.flight-detail .flight3 .first-child {
  margin-bottom: 20px;
}
/* ////////////////// */

.grid-container {
  display: grid;
  grid-template-columns: repeat(2, auto);
  /* gap: 6px; */
}

.grid-container .label-value {
  margin-right: 0px;
}

.grid-container .label-value {
  margin-bottom: 6px;
}

.badge {
  background-color: #ffffff;
  width: 180px;
  height: max-content;
  padding: 2px 5px 2px 5px !important;
  border-radius: 4px;

  margin-top: 4px;
}

.badge.primary-text {
  color: #684b9b !important;
  /* font-family: "InterBold"; */
  font-size: 8px;
  font-weight: 700;
  line-height: 12.8px;
  text-align: center;
}

.boarding-pass-container .date {
  color: #2c3059;
  /* font-family: "InterBold" !important; */
  font-size: 9px !important;
  font-weight: 700;
  line-height: 14.4px;
  text-align: left;
}

.custom-value {
  /* font-family: "InterBold"; */
  font-size: 14px;
  font-weight: 700;
  line-height: 22.4px;
  text-align: left;
}

.label-value {
  display: flex;
  flex-direction: column;
}

.label-value label {
  color: #6a6d87;
  /* font-family: "InterBold"; */
  font-size: 9px;
  font-weight: 700;
  line-height: 14.4px;
  text-align: left;
}

.label-value span {
  /* font-family: "InterBold"; */
  font-size: 16px;
  font-weight: 700;
  line-height: 25.6px;
  text-align: left;
}

.value-gray {
  color: #6a6d87;
  font-family: "Inter";
  font-size: 9px;
  font-weight: 400;
  line-height: 14.4px;
  text-align: left;
}

p,
li {
  color: #000000;
  font-family: "Inter";
  font-size: 8px;
  font-weight: 400;
  line-height: 12.8px;
  text-align: left;
}

.grid-layout,
.depart-detail,
.arrive-detail {
  width: 111px;
}

.depart-detail,
.arrive-detail,
.duration-detail {
  display: flex;
  flex-direction: column;
  /* gap: 2px; */
}

.depart-detail div,
.depart-detail p,
.arrive-detail div,
.arrive-detail p {
  margin-bottom: 2px !important;
}

.duration-detail p {
  font-family: "InterMedium";
  font-size: 8px;
  font-weight: 500;
  line-height: 12.8px;
  text-align: center;
}

.notice-section {
  width: 100%;
  display: flex;
  flex-direction: row;
}

.notice-section .notice {
  width: 50%;
  display: flex;
  flex-direction: row;
  /* gap: 8px; */
  align-items: center;
}

.notice-section .notice img {
  margin-right: 8px;
}

.info-section {
  display: flex;
  flex-direction: column;
  /* gap: 20px; */
  /* margin-bottom: 20px; */
}

.info-section .info {
  margin-bottom: 16px;
}

ul {
  list-style: none;
  padding-left: 2px;
}

ul span.bullet {
  font-size: 4px !important;
  padding-right: 3px;
}

/*ul li::marker {
  font-size: 4px !important;
}*/

.text-bold {
  font-family: "InterBold";
}

.text-sm b {
  /* 9px */
  /* font-family: "InterBold" !important; */
  font-size: 9px !important;
  font-weight: 700;
  line-height: 14.4px;
  text-align: left;
}

.text-md {
  /* 12px */
  /* font-family: "InterBold" !important; */
  font-size: 12px !important;
  font-weight: 700;
  line-height: 19.2px;
  text-align: left;
}

.text-xl {
  /* font-family: "InterBold" !important; */
  font-size: 24px !important;
  font-weight: 700;
  line-height: 28.8px;
}

/* text transform */
.text-capitalize {
  text-transform: capitalize !important;
}

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



* {
  margin: 0;
  padding: 0;
  border: 0;
  box-sizing: border-box;

  color: #000000;
}

h1,
h2,
p,
ul {
  margin: 0 !important;
}

/* A4 Page Dimensions (595px x 842px at 72 DPI) */
#email {
  width: 595px;
  height: 842px;
  margin: 0 auto;
  padding: 20px 30px;
  background-color: #ffffff;
}

@page {
  size: 595px 842px;
  margin: 0;
}

.header {
  width: 100%;
  height: 32px;
  display: flex;
  flex-direction: row;
  align-items: center;
}

/* give this #email */
#email .icon-group {
  display: flex;
}

/* give this #email */
#email .header .icon-group {
/*  margin-right: auto;*/
  margin-right: 50px;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.icon {
  display: inline-block;
}

.header .icon {
  margin: 0;
}

.header .icon.thai-logo img {
  width: 100px;
  height: 32.12px;
  margin-right: 18px;
}

.header .icon.star-logo img {
  width: 177.35px;
  height: 17.74px;
}

.header .text-group {
  display: flex;
  width: 199px;
  flex-direction: column;
  align-items: flex-end;
  align-self: flex-start;
  text-align: end;
}

.text-group p {
  color: #000;
  font-family: "Inter";
  font-size: 10px;
  font-style: normal;
  font-weight: 500;
  line-height: 160%; /* 16px */
}

.description-section {
  margin-top: 14px;
}

.description-section h4 {
  color: #000;
  font-family: "InterBold";
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
  line-height: 160%; /* 22.4px */
}

.duration-detail img {
  width: 47.57px;
  height: 16px;
}

.qr-code {
  width: 100%;
  height: max-content;
}

.notice-section img {
  width: 40px;
  height: 40px;
}

.banner-container .banner-sm {
  width: 100%;
  height: 64px;
  overflow: hidden;
}

.banner-container .banner-md {
  width: 100%;
  height: 130px;
  overflow: hidden;
  margin-top: 20px;
}

.banner-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.text-heading {
  margin: 16px 0px;
  width: auto;
  height: 52px !important;
}

.text-heading h1 {
  color: #000000;
  font-family: "InterBold";
  font-size: 24px;
  font-weight: 700;
  line-height: 36px;
  text-align: left;
}

.text-heading p {
  color: #000000;
  font-family: "InterMedium";
  font-size: 9px;
  font-style: normal;
  font-weight: 500;
  line-height: 150%; /* 13.5px */
}

.text-container {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.text-error {
color: #FF2E57;
font-family: "InterBold";
font-weight: 700;
font-size: 10px;
line-height: 15px;
text-align: center;
text-transform: uppercase;

margin-left: 150px;
border-radius: 4px;
padding: 2px 5px;
height: 19px;
background-color: #FFE5EA;
}

hr.horizontal-line {
  margin: 12px 0px !important;
  border: 1px solid #cacad9 !important;
  opacity: 0.3;
}

.info-section .horizontal-line {
  margin: 0px 0px 12px 0px !important;
}

/* alternative for space-between */
.boarding-pass-container {
  background: #f5efff;
/*  width: 100%;*/
  width: 535px;
  height: 128px;
  padding: 12px;
  border-radius: 8px;
  display: flex;
/*  justify-content: space-between;*/
}

.boarding-pass-container .passenger-section {
  /* width: 180px; */
  width: 250px;
  /* height: 104px; */
  height: max-content;
}

.boarding-pass-container .seat-section {
  /* width: 130px; */
  width: 120px;
  /* height: 103px; */
  height: max-content;
  margin-right: 56px;
}

.boarding-pass-container .passenger-section,
.boarding-pass-container .seat-section {
  /* margin-right: auto; */
  /* margin-right: 56px; */
}

.qr-section {
  width: 92px;
  /*height: 104px;*/
  height: max-content;
  background-color: #ffffff;
  padding-top: 3px;
  padding-right: 3px;
  padding-bottom: 3px;
  padding-left: 3px;
}

.qr-section p {
  font-size: 8px;
}

.checkin-section {
  width: 137px;
  display: flex;
  padding: 12px 8px 8px 8px;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  align-self: stretch;

  border-radius: 8px;
  border: 1px solid #2C3059;
}

.checkin-section img {
  width: 40px;
  height: 40px
}

.checkin-section p {
  color: #000000;
  font-family: "InterMedium";
  font-size: 8px;
  font-style: normal;
  font-weight: 500;
  line-height: 150%; /* 12px */
}

.flight-detail {
  width: 100%;
  height: 121px;
  display: flex;
  align-items: start;
  /* justify-content: space-between; */
}

/* .flight-detail .flight1,
.flight-detail .flight2 {
  margin-right: auto;
} */

.flight-detail .flight2 {
  width: 60px;
  margin-left: 32px;
}

.flight-detail .flight3 {
  width: 80px;
  margin-left: 32px;

}

.flight-detail .flight1 {
  display: flex;
  flex-direction: row;
  align-items: center;
  /* justify-content: space-between; */
  /* gap: 24px; */
}

.flight-detail .flight1 .duration-detail {
  margin-left: 24px;
  margin-right: 24px;
}

/* alternative for gap  */
.flight-detail .flight2 {
  display: flex;
  flex-direction: column;
  /* gap: 20px; */
}

.flight-detail .flight3 {
  display: flex;
  flex-direction: column;
  align-self: end;
  /* gap: 20px; */
}

.flight-detail .flight2 .first-child,
.flight-detail .flight3 .first-child {
  margin-bottom: 20px;
}

.bd-time {
  width: 100px;
}
/* ////////////////// */

.grid-container {
  display: grid;
  grid-template-columns: repeat(2, auto);
  /* gap: 6px; */
}

.grid-container .label-value {
  margin-right: 0px;
}

.grid-container .label-value {
  margin-bottom: 6px;
}

.badge {
  background-color: #ffffff;
  width: 180px;
  height: max-content;
  padding: 2px 5px 2px 5px !important;
  border-radius: 4px;

  margin-top: 4px;
}

.badge.primary-text {
  color: #684b9b !important;
  font-family: "InterBold";
  font-size: 8px;
  font-weight: 700;
  line-height: 12.8px;
  text-align: center;
}

.boarding-pass-container .date {
  color: #2c3059;
  font-family: "InterBold" !important;
  font-size: 9px !important;
  font-weight: 700;
  line-height: 14.4px;
  text-align: left;
}

.custom-value {
  font-family: "InterBold";
  font-size: 14px;
  font-weight: 700;
  line-height: 22.4px;
  text-align: left;
}

.label-value {
  display: flex;
  flex-direction: column;
}

.label-value label {
  color: #6a6d87;
  font-family: "InterBold";
  font-size: 9px;
  font-weight: 700;
  line-height: 14.4px;
  text-align: left;
}

.label-value span {
  font-family: "InterBold";
  font-size: 16px;
  font-weight: 700;
  line-height: 25.6px;
  text-align: left;
}

.value-gray {
  color: #6a6d87;
  font-family: "Inter";
  font-size: 9px;
  font-weight: 400;
  line-height: 14.4px;
  text-align: left;
}

p,
li {
  color: #000000;
  font-family: "Inter";
  font-size: 8px;
  font-weight: 400;
  line-height: 12.8px;
  text-align: left;
}

.grid-layout,
.depart-detail,
.arrive-detail {
  width: 111px;
}

.depart-detail,
.arrive-detail,
.duration-detail {
  display: flex;
  flex-direction: column;
  /* gap: 2px; */
}

.depart-detail div,
.depart-detail p,
.arrive-detail div,
.arrive-detail p {
  margin-bottom: 2px !important;
}

.duration-detail p {
  font-family: "InterMedium";
  font-size: 8px;
  font-weight: 500;
  line-height: 12.8px;
  text-align: center;
}

.notice-section {
  width: 100%;
  display: flex;
  flex-direction: row;
}

.notice-section .notice {
  width: 50%;
  display: flex;
  flex-direction: row;
  /* gap: 8px; */
  align-items: center;
}

.notice-section .notice img {
  margin-right: 8px;
}

.info-section {
  display: flex;
  flex-direction: column;
  /* gap: 20px; */
  /* margin-bottom: 20px; */
}

.info-section .info {
  margin-bottom: 16px;
}

ul {
  padding-left: 12px;
}

/*ul span.bullet {
  font-size: 8px !important;
  padding-right: 3px;
}*/

ul li::marker {
  margin-right: -2px;
  font-size: 7px !important;
}

.text-link {
  color: #20F;
  font-family: "Inter";
  font-size: 8px;
  font-style: normal;
  font-weight: 400;
  line-height: 160%;
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-skip-ink: auto;
  text-decoration-thickness: auto;
  text-underline-offset: auto;
  text-underline-position: from-font;
}

.text-bold {
  font-family: "InterBold";
}

.text-sm {
  /* 9px */
  font-family: "InterBold" !important;
  font-size: 9px !important;
  font-weight: 700;
  line-height: 14.4px;
  text-align: left;
}

.text-md {
  /* 12px */
  font-family: "InterBold" !important;
  font-size: 12px !important;
  font-weight: 700;
  line-height: 19.2px;
  text-align: left;
}

.text-lg {
  font-family: "InterBold" !important;
  font-size: 16px !important;
  font-weight: 700;
  line-height: 25.6px;
  text-align: left;
}

.text-xl {
  font-family: "InterBold" !important;
  font-size: 24px !important;
  font-weight: 700;
  line-height: 28.8px;
}

/* text transform */
.text-capitalize {
  text-transform: capitalize !important;
}

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