/* element */
a {
  text-decoration: none;
  color: unset;
  background: 0 0;
}
.form-them:has(.input-field input[required])>p:after,
.form-them .input-field:has(textarea[required]) label:after,
.form-them .input-field:has(select[required]) label:after,
.form-them .input-field:has(input[required]) label:after{
  content: '*';
  color: red;
  font-size: 1rem;
  opacity: 1;
  position: relative;
  display: inline;
}
.relative {
  position: relative;
}
.absolute {
  position: absolute;
}
.bottom {
  position: absolute;
  width: 100%;
  bottom: 0;
}
.absolute-center,
.absolute-vertical {
  position: absolute;
}
.absolute-center {
  left: 50%; 
  top: 50%; 
  transform: translate(-50%, -50%);
}
.absolute-vertical {
  left: 0; 
  top: 50%; 
  transform: translate(0, -50%);
}
.overflow-hidden {
  overflow: hidden;
}
.overflow-x-hidden {
  overflow-x: hidden;
}
.display-block {
  display: block;
}
.display-flex {
  display: flex;
}
.flex-auto {
  flex: auto;
}
.align-items-center {
  align-items: center;
}
.margin-auto {
  margin: auto;
}
.margin-0 {
  margin: 0 !important
}
.padding-0 {
  padding: 0 !important;
}
.fit-content {
  width: fit-content;
}
.object-fit-cover {
  object-fit: cover;
}
.height-unset {
  height: unset !important;
}
.w-100 {
  width: 100%;
}

/* block layout */
.nav-wrapper {
  padding: 0 6.875rem;
}
.page-wrapper {
  padding: 0 6.875rem;
}
.section {
  padding: 3em 0;
}
.happening-wrapper {
  padding: 0 15rem;
  margin-top: -14.7%;
  margin-bottom: 2em;
}
.dashboard-page,
.inquiries-page {
  padding: 6em 0;
}

/* Scrollbar */
body::-webkit-scrollbar {
	background-color: white;
	width: 16px;
}
body::-webkit-scrollbar-track {
	background-color: white;
}
body::-webkit-scrollbar-thumb {
	background-color: #393939;
	border-radius: 16px;
	border: 4px solid white;
}
body::-webkit-scrollbar-button {
	display: none;
}

/* navbar style */
header.navigation {
  position: absolute;
  width: 100%;
  top: 0;
}
nav {
  z-index: 99;
  background-color: rgba(0,0,0,0);
  background: linear-gradient(to top, transparent 0%, black 100%);
}
nav .brand-logo img {
  width: 90px;
  margin: 0.8em 0;
}
nav ul.main-nav {
  margin: 0;
  margin-left: 7em;
}
nav .main-nav a.btn-flat,
nav .user-nav a.btn-flat {
  font-size: 1.25rem;
}
nav .user-nav a.btn-flat {
  padding: 0
}
nav ul.main-nav a.btn-flat {
  margin-left: 4px;
  margin-right: 4px;
}
nav .user-nav {
  margin: 0;
  height: 100%;
}
nav .user-nav ul {
  height: 20px;
}
nav .user-nav ul li {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  height: 100%;
  border-right: 2px solid white;
}
nav .user-nav ul li:last-child {
  border-right: 0;
}
.sidenav-overlay {
  z-index: 90;
}

/* sitemap style */
#sitemap .logo-sitemap {
  width: 125px;
  height: auto;
  margin-bottom: 0.937em;
}
#sitemap .sitemap-menu > .row {
  margin-bottom: 0;
}
#sitemap .sitemap-menu ul {
  margin: 0;
  font-size: 1.25rem;
}
#sitemap .sitemap-menu li {
  padding-bottom: 0.25em;
}
.page-footer {
  padding-top: 2.875em;
}
.footer-copyright {
  border-top: 1px solid #707070;
  padding: 0.625em 0 2.5em !important;
}
.footer-socail {
  margin-top: 5.25em;
}
.footer-socail ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.footer-socail li {
  display: inline-block;
  text-align: center;
  padding: 0 0.625em;
}
.footer-copyright ul.footer-policy {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.footer-copyright ul.footer-policy li {
  display: inline-block;
  padding: 0 0.5em;
  border-right: 1px solid white;
  line-height: 1em;
}
.footer-copyright ul.footer-policy li:last-child {
  border-right: none;
}
.capitalize {
  text-transform: capitalize;
}

/* them style */
.them-bg-grey {
  background-color: #393939;
}
.them-bg-grey-dark {
  background-color: #202020;
}
.them-bg-pink {
  background-color: #F84BF8;
}
.them-text-yellow {
  color: #F7D309;
}
.them-text-pink {
  color: #F84BF8;
}

/* section style */
.about-us-page .section-about-us .first-column {
  margin-top: -33%;
}
.about-us-page .section-about-us img {
  margin: 1.5em 0;
}
.creative-maker-page .section-maker-page {
  margin-top: -11.7%;
}
.section-creative-hub-topic {
  padding: 3em 0;
}
.section-creative-hub-topic .section-title {
  font-size: 10rem;
  line-height: 10rem;
  margin: 0;
}
.section-creative-hub-topic .section-btn {
  font-size: 2.5rem;
  margin: 0;
  position: absolute;
  top: 7%;
  right: 0;
}
.section-creative-hub-program .background-black {
  opacity: 0.45;
}
.section-creative-hub-program .background-gradient-left-right {
  z-index: 1;
  background-image: linear-gradient(to right, rgba(0,0,0,0.55), rgba(0,0,0,0) 50%, rgba(0,0,0,0.55));
}
.section-happening-detail {
  margin-top: -15%;
  padding-bottom: 14.125em;
}
.section-creative-maker-detail {
  margin-top: -6%;
  padding-bottom: 14.125em;
}
.section-creative-hub-category .container {
  padding: 16em 0;
  margin-top: -47%;
}
.signin-page,
.signup-page {
  /* height: calc(100vh - 132px); */
  min-height: calc(1080px - 132px);
  padding: 6.25rem 0;
}
.contact-us-page .section-map > .container,
.home-th-page .section-map > .container {
  height: 100%;
}
.register-form-page,
.service-request-page,
.service-procurement-page {
  padding: 6rem 0;
}
.section-search {
  position: absolute;
  left: 50%;
  bottom: 15%;
  transform: translateX(-50%);
  z-index: 2;
}
.section-search .search-title {
  font-size: 3.125rem;
}
.section-search .input-field {
  margin: 0 1em;
  padding: 0 0.5em;
  height: 3rem;
  background-color: white;
}
.section-search .input-field input {
  font-size: 1.25rem;
  border-bottom: 0;
  margin: 0;
}
.section-search .btn {
  background-color: red;
  color: white;
  border-radius: 0;
  font-size: 2.187rem;
  height: 3rem;
  line-height: 3rem;
  padding: 0 2rem;
}
.section-content-success-case {
  padding: 6em 4.375rem;
  font-size: 1.25rem;
  line-height: 1.5rem;
}
.section-content-success-case .row .col {
  padding: 0 2.813rem;
}
.section-content-success-case .catchphrase {
  font-size: 2.188rem;
  line-height: 2.813rem;
}
.section-content-success-case .catchphrase::before,
.section-content-success-case .catchphrase::after {
  content: '“';
  font-family: 'PT Serif Caption';
  display: block;
  font-size: 7.5rem;
  line-height: 2.813rem;
}
.section-content-success-case .catchphrase::after {
  content: '”';
  margin: 0.5em 0;
}
.home-th-page .section-why-creative {
  padding: 6em 0;
}
.home-th-page .section-why-creative .section-title {
  font-size: 5.3125rem;
  line-height: 6.875rem;
}
.home-th-page .section-why-creative .section-title span {
  font-size: 8rem;
}
.home-th-page .section-why-creative .section-content {
  margin-top: 3em;
}
.home-th-page .section-why-creative .section-content .row .col {
  padding: 0 1.875rem;
}
.creative-hub-page .section-solution {
  margin-top: 2.5em;
}
.creative-hub-page .section-solution .section-header {
  padding: 5em 0;
}
.creative-hub-page .section-solution .section-note {
  font-size: 1.875rem; 
  margin: 0;
}
.creative-hub-page .section-solution .section-title {
  color: #F7D309; 
  font-size: 13.75rem; 
  line-height: 12.5rem;
  margin: 0; 
}
.creative-hub-page .section-solution .section-brief {
  width: 14.375em; 
  font-size: 1.25rem; 
  line-height: 1.5rem; 
  right: 0; 
  top: 12%;
}
.creative-hub-page .section-solution .btn-action {
  bottom: 0; 
  right: 1%; 
  font-size: 2rem; 
  background-color: #2B2B2B; 
  border: 1px solid white; 
  height: 3.125rem; 
  line-height: 3.125rem;
}

/* grid style */
.why-thailand-page .row,
.creative-hub-page .section-creative-hub .row,
.creative-hub-category-page .section-creative-hub-category .row,
.search-page .section-creative-hub-category .row,
.about-us-page .row {
  margin: 0;
}
.why-thailand-page .card-panel .row .col {
  padding: 0 3rem;
}
.why-thailand-page .section-article .row .col {
  padding: 0 2rem;
}
.creative-hub-page .section-creative-hub .col,
.creative-hub-category-page .section-creative-hub-category .col,
.search-page .section-creative-hub-category .col,
.creative-hub-view-page .section-creative-hub-category .col,
.solution-view-page .section-solution-related .col,
.success-case-page .section-success-case .col,
.about-us-page .row .col {
  padding: 0;
}
.happening-view-page .card-panel .row .col,
.creative-maker-view-page .card-panel .row .col {
  padding: 0 2.813rem;
}
.creative-maker-view-page .section-solution-related .row > .col {
  padding: 0;
}
.creative-hub-view-page .section-creative-hub-detail .card-content .row .card-content-detail.col,
.creative-hub-view-page .section-creative-hub-detail .card-content .row .card-content-related.col {
  min-height: 26.25em;
}

/* button style */
.section-creative-hub-program .btn-prev,
.section-creative-hub-program .btn-next {
  cursor: pointer;
  top: 50%;
  transform: translate(0, -50%);
}
.section-creative-hub-program .btn-prev {
  left: -10%;
}
.section-creative-hub-program .btn-next {
  right: -10%;
}
.section-creative-hub-program .btn-prev img,
.section-creative-hub-program .btn-next img {
  height: 8.75em;
}
.card-button .btn.btn-them,
.card-signin .card-button .btn,
.card-signup .card-button .btn {
  width: 100%;
  height: 50px;
  font-size: 1rem;
  line-height: 50px;
  border-radius: 3px;
}
.card-button .btn.btn-them,
.card-signin .card-button .btn.btn-submit,
.card-signup .card-button .btn.btn-submit {
  color: white;
  background-image: linear-gradient(to right top, #000000, #292929, #4d4d4d, #757575, #9f9f9f);
}
.card-signin .card-button .btn.btn-signup,
.card-signup .card-button .btn.btn-signup {
  border: 1px solid #9E9E9E;
  color: #9E9E9E;
  background-color: transparent;
}
.card-button .btn.btn-them {
  width: unset;
  padding: 0 2em;
  margin-top: 4rem;
}
.card-signup .card-profile {
  top: 10%;
  right: 8%;
}
.card-signup .card-profile img {
  width: 128px;
  height: 128px;
  object-fit: cover;
  border-radius: 100%;
}
.card-signup .card-upload img.user-profile {
  width: 235px;
  height: 235px;
  object-fit: cover;
  border-radius: 100%;
  margin-bottom: 1em;
}
.tabs-dashboard .tab-content .btn {
  font-size: 1.125rem;
  height: 50px;
  line-height: 50px;
  padding: 0 30px;
  border-radius: 0;
}

/* card style */
.card-portfolio,
.card-video {
  margin: 2.5em 0;
}
.card-portfolio .card-gallery.carousel .btn-prev,
.card-portfolio .card-gallery.carousel .btn-next {
  cursor: pointer;
  z-index: 2;
  height: 100%;
  width: 13%;
  top: 50%;
  transform: translate(0, -50%);
}
.card-portfolio .card-gallery.carousel .btn-prev {
  left: 0;
  background-image: linear-gradient(to right, rgba(0,0,0,0.3), rgba(0,0,0,0) 100%);
}
.card-portfolio .card-gallery.carousel .btn-next {
  right: 0;
  background-image: linear-gradient(to left, rgba(0,0,0,0.3), rgba(0,0,0,0) 100%);
}
.card-portfolio .card-gallery.carousel .btn-prev img,
.card-portfolio .card-gallery.carousel .btn-next img {
  height: 8.75em;
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.why-thailand-page .card-article {
  width: 100%;
  padding-bottom: 0.5em;
}
.why-thailand-page .card-article img.card-article-image {
  width: 100%; 
  height: 564px; 
  object-fit: cover;
}
.why-thailand-page .card-article .card-article-title {
  margin: 1em 0;
  height: 2.25em;
}
.why-thailand-page .card-panel {
  margin: 0;
  width: 100%;
  padding: 4.875em 2.875em;
  padding-bottom: 8em;
  border-radius: 0;
}
.why-thailand-page .card-panel .card-title {
  margin: 0;
  font-size: 4.5rem;
}
.why-thailand-page .card-panel .card-subtitle {
  margin: 0.0625em 0 0.3125em;
  font-size: 7.5rem;
  padding-left: 22.2%;
}
.why-thailand-page .card-panel img {
  margin-bottom: 2.5em;
}
.why-thailand-page .score-statistics .score-number {
  font-size: 11.25rem;
}
.why-thailand-page .score-statistics .statistics-title {
  position: relative;
  width: fit-content;
  margin: 0 auto;
}
.why-thailand-page .score-statistics .statistics-title .sub {
  position: absolute;
  top: -0.7em;
  right: -0.7em;
  font-size: 1rem;
}
.why-thailand-page .score-statistics .statistics-note {
  position: absolute;
  left: 50%;
  bottom: 2px;
  transform: translateX(-50%);
}
.about-us-page .section-about-us .card-panel {
  margin: 0;
  width: 100%;
  padding: 8.125rem;
  border-radius: 0;
}
.about-us-page .section-about-us .second-column .card-panel {
  padding-left: 0;
  padding-right: 11.125rem;
}
.about-us-page .card-panel .card-title {
  margin: 0;
  margin-bottom: 1em;
}
.card-happening {
  min-height: 39.375em;
}
.card-happening .card-happening-image {
  width: 100%;
  height: 18.75em;
  border: 1px solid #707070;
}
.card-happening .card-happening-title {
  font-size: 2.25em;
  line-height: 2.813rem;
  height: 8.125rem;
  margin: 0.625em 0;
}
.card-happening .card-happening-brief {
  font-size: 0.938em;
  line-height: 1.25rem;
  height: 5rem;
}
.card-creative-maker {
  min-height: 56.375em;
}
.card-creative-maker .card-creative-maker-image {
  width: 100%;
  height: 39em;
}
.card-creative-maker .card-creative-maker-title {
  font-size: 2.25em;
  line-height: 2.813rem;
  height: 5.5rem;
  margin: 0.625em 0;
}
.card-creative-maker .card-creative-maker-brief {
  font-size: 1.125em;
  line-height: 1.625rem;
  height: 4.75rem;
}
.card-creative-hub,
.card-creative-hub .card-creative-hub-image,
.card-creative-hub .card-creative-hub-content {
  height: 20.75em;
  overflow: hidden;
}
.card-creative-hub {
  border: 1px solid #BDBDBD;
}
.card-creative-hub .card-creative-hub-image {
  border-right: 1px solid #BDBDBD;
}
.creative-hub-page .owl-carousel .owl-item:first-child .card-creative-hub {
  border-right: 2px solid #BDBDBD;
}
.creative-hub-page .section-creative-hub .creative-hub-detail {
  width: 38.5rem;
  font-size: 1.25rem;
  line-height: 1.5rem;
  margin-bottom: 4rem;
}
.card-service-request .section-creative-hub-category .card-creative-hub,
.card-service-request .section-creative-hub-category .card-creative-hub .card-creative-hub-image,
.card-service-request .section-creative-hub-category .card-creative-hub .card-creative-hub-content {
  height: 16.75em;
}
.creative-maker-view-page .section-solution-related .card-creative-hub,
.creative-maker-view-page .section-solution-related .card-creative-hub .card-creative-hub-image,
.creative-maker-view-page .section-solution-related .card-creative-hub .card-creative-hub-content {
  height: 16.75em;
}
.card-creative-hub .card-creative-hub-image {
  width: 100%;
}
.card-creative-hub .card-creative-hub-content {
  padding: 2.375em !important;
}
.card-creative-hub .card-creative-hub-title {
  font-size: 1.375rem;
  margin: 0;
}
.card-creative-hub .card-creative-hub-brief {
  font-size: 0.938rem;
  line-height: 1.25rem;
  height: 10rem;
  margin: 0.825em 0;
} 
.card-creative-hub .card-creative-hub-socail img {
  height: 1.5rem;
  width: auto;
}
.card-creative-hub ul.card-creative-hub-socail {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.card-creative-hub ul.card-creative-hub-socail li {
  display: inline-block;
  text-align: center;
  padding-right: 1em;
  /* padding-right: 1.875em; */
}
.section-happening-detail .card-panel {
  margin: 0;
  width: 100%;
  border-radius: 0;
  padding: 4.375rem 1.875rem;
}
.section-happening-detail .card-panel .card-title {
  font-size: 4.5rem;
  line-height: 5rem;
  margin: 0;
}
.section-happening-detail .card-panel .card-banner {
  margin: 4.25em 0;
}
.section-happening-detail .card-panel .card-content {
  padding: 0 0.75rem !important;
}
.section-happening-detail .card-panel .card-content img {
  margin: 1rem 0;
  max-width: 100%;
  height: auto !important;
  object-fit: contain;
}
.section-creative-maker-detail .card-panel {
  margin: 0;
  width: 100%;
  border-radius: 0;
  padding: 4.375rem 1.875rem;
}
.section-creative-maker-detail .card-panel .card-content {
  padding: 0 0.75rem !important;
}
.section-creative-maker-detail .card-panel .card-content img {
  margin-bottom: 2.5em;
  max-width: 100% !important;
  object-fit: contain;
  height: auto !important;
}
.section-creative-hub-detail {
  z-index: 2;
}
.section-creative-hub-detail .card-panel {
  padding: 0;
  margin-bottom: 8.125em;
}
.section-creative-hub-detail .card-topic {
  position: absolute;
  /* top: -3.5%; */
  top: -6.25rem;
  width: 100%;
  padding: 0 5rem;
  height: 21.375em;
  overflow: hidden;
}
.section-creative-hub-detail .card-topic img.card-topic-logo {
  width: 21.375em;
  height: 21.375em;
  float: left;
}
.section-creative-hub-detail .card-topic .card-topic-name {
  font-size: 4rem;
  line-height: 4.5rem;
  margin: 0;
  padding-left: 0.65em;
  /* position: absolute;
  top: 4%;
  left: 35%; */
}
.section-creative-hub-detail .card-panel .card-content {
  font-size: 1.125rem;
  padding: 3.75em;
  padding-bottom: 0;
}
.section-creative-hub-detail .card-panel .card-content-detail {
  padding-right: 3.75em;
  border-right: 1px solid #9E9E9E;
}
.section-creative-hub-detail .card-panel .card-content-related {
  padding-left: 3em;
}
.section-creative-hub-detail .card-panel ul.card-content-socail,
.section-creative-hub-detail .card-panel .card-content-award {
  margin: 1.5em 0;
}
.section-creative-hub-detail .card-panel ul.card-content-socail {
  list-style-type: none;
  padding: 0;
}
.section-creative-hub-detail .card-panel ul.card-content-socail li {
  display: inline-block;
  text-align: center;
  padding-right: 1.5em;
}
.section-creative-hub-detail .card-panel ul.card-content-socail img {
  height: 1.25em;
}
.section-creative-hub-detail .card-panel .card-content-award img {
  height: 2.5em;
  margin-bottom: 1em;
}
.section-creative-hub-detail .card-button .btn-request {
  margin-top: 0.5em;
  margin-right: 1em;
  background: linear-gradient(#FF0000, #BF0000);
}
.section-creative-hub-detail .card-service-request {
  margin-top: 4em;
}
.section-creative-hub-detail .card-service-request .card-service-request-topic {
  font-size: 2.5rem;
  padding: 0.5em 4em;
  margin: 0 auto;
  width: fit-content;
  background: linear-gradient(#FF0000, #BF0000);
}
.section-creative-hub-detail .card-service-request .card-service-request-related {
  padding: 5em 0;
}
.section-creative-hub-detail .card-service-request .card-service-request-related .card-title {
  font-size: 7.938rem;
  line-height: 7.938rem;
  margin: 0;
}
.section-creative-hub-detail .card-portfolio .card-gallery {
  height: 40.625rem !important;
}
.section-creative-hub-detail .card-portfolio .card-gallery img {
  height: 100%;
  object-fit: cover;
}
/* .signin-page .card-signin,
.signin-page .card-signin .col.card-col,
.signup-page .card-signup,
.signup-page .card-signup .col.card-col {
  min-height: 700px;
  padding: 0;
} */
.signin-page .card-signin .card-image {
  /* width: 42.25rem; */
  flex: auto;
}
.signup-page .card-signup .card-image {
  width: 26.875rem;
}
.signin-page .card-signin .card-body,
.signup-page .card-signup .card-body {
  flex: 1;
}
.signin-page .card-signin .card-content,
.signup-page .card-signup .card-content {
  width: 100%;
  padding: 5em;
}
.signin-page .card-signin .card-content .card-title,
.signup-page .card-signup .card-content .card-title {
  font-size: 4.5rem;
  margin: 0;
  margin-bottom: 0.2em;
}
.signin-page .card-signin .card-content .card-brief,
.signup-page .card-signup .card-content .card-brief {
  font-size: 1.25rem;
  line-height: 1.5rem;
  margin: 0;
}
.signin-page .card-signin .card-content .card-input,
.signup-page .card-signup .card-content .card-input {
  margin-top: 2em;
}
.signin-page .card-signin .card-content .card-button,
.signup-page .card-signup .card-content .card-button {
  margin-top: 2.5em;
}
.card-contact {
  padding: 3.75em 6.25rem;
}
.card-contact .card-title {
  font-size: 3.4375rem;
}
.card-contact .card-brief {
  font-size: 1.875rem; 
  line-height: 2.5rem; 
  margin: 0.5em 0;
}
.card-contact .card-address {
  font-size: 1.5rem; 
  line-height: 2.5rem;
}
.card-contact .card-social {
  font-size: 1.5rem;
}
.card-solution {
  height: 51.25rem;
  margin-bottom: 5.25em;
}
.card-solution .card-title {
  font-size: 4.5rem;
  margin: 0;
  padding: 0.25em;
}
.section-solution-detail {
  margin-top: -15%;
  padding-bottom: 14.125em;
}
.section-solution-detail .card-title {
  font-size: 6.25rem;
  line-height: 10.5rem;
  margin: 0;
}
.section-creative-maker-detail .card-related,
.section-solution-detail .card-related {
  font-size: 6.25rem;
  line-height: 6.25rem;
  margin: 0.5em 0;
}
.card-service-request .card-banner,
.card-service-request .card-banner .row .col {
  height: 29rem;
  /* opacity: 0.3; */
}
.card-service-request .card-banner img.card-banner-logo {
  width: 20rem;
  height: 20rem;
}
.card-service-request .card-content {
  padding: 4.5rem;
}
.card-service-request .card-banner {
  padding: 0 4.5rem;
}
.card-service-request .card-banner-title {
  font-size: 5.625rem;
}
.register-form-page .card-service-request .card-banner-title {
  font-size: 4.625rem;
}
.register-form-page .card-service-request .card-banner-subtitle {
  font-size: 4rem;
}
.card-service-request .card-banner-brief {
  font-size: 1.5rem;
  line-height: 1.875rem;
  margin-top: 1em;
}
.card-service-request .card-title  {
  font-size: 2.813rem;
  /* line-height: 12.5rem; */
  margin: 0;
  margin-bottom: 0.4em;
}
.card-success-case {
  height: 37rem;
}
.card-success-case .card-name,
.card-success-case .card-position {
  font-size: 1.5rem;
}
.why-thailand-view-page .banner-page {
  padding: 11.875rem 0;
}
.why-thailand-page .banner-page .background-black,
.why-thailand-view-page .banner-page .background-black {
  opacity: 0.3;
}
.why-thailand-view-page .card-panel {
  padding: 4.75rem;
}
.why-thailand-view-page .card-panel .card-banner {
  margin-bottom: 2em;
}
.card-result-not-found {
  padding: 6.875em 0;
}
.card-result-not-found .card-title {
  font-size: 2.5rem;
}
.card-result-not-found .card-brief {
  font-size: 1.5rem;
  margin-top: 0.5em;
}
.search-page .card-search {
  background-color: #0A408B;
  padding: 6.25em 0;
}
.search-page .card-search .section-search {
  position: relative;
  left: unset;
  bottom: unset;
  transform: unset;
}
.creative-hub-page .section-solution .card-solution {
  height: 67.312rem;
  margin-bottom: 0;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}
.creative-hub-page .section-solution .card-solution .card-content {
  padding: 2em;
}
.creative-hub-page .section-solution .card-solution .card-title {
  font-size: 4.5rem;
  padding: 0;
}

/* background style */
.background-image {
  background-position: center top;
  background-size: cover;
  background-repeat: no-repeat;
}
.background-image.width {
  background-size: 100% auto;
}
.background-cover-center {
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}
.background-black {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0.6;
  background-color: black;
}
.background-gradient-bottom,
.background-gradient-left-right,
.background-gradient-top-bottom {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  z-index: 2;
}
.background-gradient-bottom {
  background-image: linear-gradient(to top, rgba(0,0,0,1), rgba(0,0,0,0) 50%);
}
.background-gradient-left-right {
  background-image: linear-gradient(to right, rgba(0,0,0,0.5), rgba(0,0,0,0) 50%, rgba(0,0,0,0.5));
}
.background-gradient-top-bottom {
  background-image: linear-gradient(to top, rgba(0,0,0,0.5), rgba(0,0,0,0) 50%, rgba(0,0,0,0.5));
}
.creative-hub-category-page .section-creative-hub-category .background-gradient-bottom,
.search-page .section-creative-hub-category .background-gradient-bottom {
  background-image: linear-gradient(to top, rgba(255,255,255,1), rgba(0,0,0,0) 70%);
}
.card-dashboard,
.card-inquiries {
  padding-top: 2em;
  padding-bottom: 2em;
  border-radius: 0;
}
.card-dashboard .card-title {
  font-size: 4rem;
}
.card-dashboard .user-profile-dashboard img {
  border-radius: 100px;
  object-fit: cover;
  margin-top: 1em;
  width: 160px;
  height: 160px;
}
.card-dashboard .user-profile-dashboard .btn-edit {
  position: absolute;
  bottom: 0;
  right: 4px;
}
.card-inquiries .card-content {
  padding: 2em;
}
.card-inquiries .inquiries-title {
  min-height: 270px;
  margin-bottom: 4em;
}
.card-inquiries .inquiries-title .inquiries-name {
  margin-top: 0.4em;
}
.card-inquiries .inquiries-title img.inquiries-logo {
  width: 270px;
  height: 270px;
  object-fit: cover;
  position: absolute;
  top: 0;
  right: 0;
}
.card-inquiries .inquiries-content h5 {
  margin-top: 2em;
  margin-bottom: 1em;
}
.card-inquiries .card-content .card-user-info .row .col {
  padding: 0.5rem 0.75rem;
}

/* banner style */
.banner-page .banner-title {
  font-size: 13.75em;
  line-height: 12.5rem;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(0, -50%);
}
.banner-page .banner-brief {
  font-size: 3.125rem;
  line-height: 3.75rem;
}
.banner-page.banner-happening .banner-brief {
  top: 50%;
  right: -36%;
  transform: translate(-50%, -50%);
}
.banner-page.banner-creative-maker .banner-brief {
  font-size: 1.875rem;
  line-height: 2.5rem;
  bottom: 14%;
  right: -34%;
}
.happening-view-page .banner-page .banner-title {
  top: 20%;
  left: 0;
  transform: unset
}
.home-page .banner-intro .banner-content,
.home-page .banner-intro .banner-first-line,
.home-page .banner-intro .banner-third-line {
  position: absolute;
}
.home-page .banner-intro .banner-content {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}
.home-page .banner-intro .banner-first-line {
  font-size: 5.625em;
  top: -4%;
  left: 0;
  margin: 0;
}
.home-page .banner-intro .banner-second-line {
  margin: 0.2em 0;
  font-size: 18.75rem;
  color: #F7D309;
  line-height: 16.25rem;
}
.home-page .banner-intro .banner-second-line span.purple-color {
  color: #F84BF8;
}
.home-page .banner-intro .banner-third-line {
  font-size: 5.3125em;
  bottom: -0.4em;
  right: 0;
}
.home-th-page .banner-intro .background-black {
  opacity: 0.2;
}
.home-th-page .banner-intro .container {
  top: 14%;
}
.home-th-page .banner-intro .banner-title {
  color: #F1D448;
  font-size: 10rem;
  line-height: 10.625rem;
}
.home-th-page .banner-intro .banner-brief {
  margin-top: 1em;
  width: 70%;
}
.home-th-page .banner-intro .banner-action {
  margin-top: 3em;
}
.home-th-page .banner-intro .banner-action .btn {
  height: 50px;
  line-height: 50px;
  min-width: 20em;
  margin-right: 1.5em;
}
.creative-maker-view-page .banner-page .background-image {
  height: 46rem;
}
.creative-maker-view-page .banner-page .background-image .container {
  height: 100%;
}
.creative-maker-view-page .banner-page .background-black {
  opacity: 0.75;
}
.creative-maker-view-page .banner-page .banner-title {
  display: block;
  width: 100%;
  font-size: 6rem;
  line-height: 6.688rem;
  text-transform: unset;
  color: #D989DE;
}
.creative-maker-view-page .banner-page .banner-brief {
  display: block;
  width: 100%;
  font-size: 2rem;
  line-height: 2.625rem;
  margin-top: 1em;
}
.creative-hub-category-page .banner-category,
.creative-hub-category-page .banner-category .container {
  height: 23.125rem;
}
.creative-hub-category-page .banner-category .banner-category-content {
  position: absolute;
  bottom: 5%;
  left: -5%;
  z-index: 2;
}
.creative-hub-category-page .banner-category .banner-category-note {
  font-size: 1.875rem;
  line-height: 2.25rem;
  margin: 0;
  margin-bottom: 0.8em;
}
.creative-hub-category-page .banner-category .banner-category-title,
.creative-hub-category-page .banner-category .banner-category-subtitle {
  font-size: 16.688rem;
  line-height: 11.313rem;
  margin: 0;
}
.creative-hub-category-page .banner-category .banner-category-subtitle {
  position: absolute;
  bottom: -90%;
  right: -15%;
}
.creative-hub-category-page .banner-category .banner-category-brief {
  font-size: 3.125rem;
  line-height: 3.75rem;
  margin: 0;
  color: #707070;
  position: absolute;
  top: 50%;
  right: -33%;
  transform: translate(-50%, -50%);
}
.creative-hub-page .banner-creative-hub,
.creative-hub-page .banner-creative-hub .container {
  height: 23.125rem;
  margin-bottom: 4rem;
}
.creative-hub-page .banner-creative-hub .banner-creative-hub-content {
  position: absolute;
  bottom: 10%;
  left: -5%;
  z-index: 2;
}
.creative-hub-page .banner-creative-hub .banner-creative-hub-note {
  font-size: 1.875rem;
  line-height: 2.25rem;
  margin: 0;
  margin-bottom: 0.8em;
}
.creative-hub-page .banner-creative-hub .banner-creative-hub-title,
.creative-hub-page .banner-creative-hub .banner-creative-hub-subtitle {
  font-size: 20rem;
  line-height: 11.313rem;
  margin: 0;
}
.creative-hub-page .banner-creative-hub .banner-creative-hub-subtitle {
  position: absolute;
  bottom: -105%;
  right: -12%;
}
.creative-hub-page .banner-creative-hub .banner-creative-hub-brief {
  font-size: 3.125rem;
  line-height: 3.75rem;
  margin: 0;
  color: #707070;
  position: absolute;
  top: 50%;
  right: -30%;
  transform: translate(-50%, -50%);
}
.creative-hub-page .banner-creative-hub .banner-creative-hub-detail {
  position: absolute;
  bottom: -115%;
  left: 6%;
  width: 50%;
  font-size: 1.25rem;
  line-height: 1.5rem;
}
.solution-page .banner-solution,
.solution-page .banner-solution .container {
  height: 23.125rem;
  /* margin-bottom: 14%; */
}
.solution-page .banner-solution .banner-solution-content {
  position: absolute;
  bottom: 10%;
  left: -5%;
  z-index: 2;
}
.solution-page .banner-solution .banner-solution-note {
  font-size: 1.875rem;
  line-height: 2.25rem;
  margin: 0;
  margin-bottom: 0.8em;
}
.solution-page .banner-solution .banner-solution-title {
  font-size: 15.625rem;
  line-height: 7.875rem;
  margin: 0;
}
.solution-page .banner-solution .banner-solution-subtitle {
  position: absolute;
  bottom: -125%;
  right: -43%;
  font-size: 12.5rem;
  margin: 0;
}
/* .solution-page .banner-solution .banner-solution-detail {
  position: absolute;
  bottom: -80%;
  width: 100%;
  font-size: 1.25rem;
  line-height: 1.5rem;
  padding: 0 6em;
}
.solution-page .banner-solution .banner-solution-detail.row .col {
  padding: 0 2.813rem;
} */
.solution-page .solution-detail {
  width: 28.875rem;
  font-size: 1.25rem;
  line-height: 1.5rem;
  padding-bottom: 3em;
}
.search-page .banner-search,
.search-page .banner-search .container {
  height: 23.125rem;
  /* margin-bottom: 14%; */
}
.search-page .banner-search .banner-search-content {
  position: absolute;
  bottom: -5%;
  left: 0;
  z-index: 2;
}
.search-page .banner-search .banner-search-note {
  font-size: 3.75rem;
  line-height: 3.75rem;
  margin: 0;
}
.search-page .banner-search .banner-search-title {
  font-size: 11.25rem;
  line-height: 11.25rem;
  margin: 0;
}
.success-case-page .banner-success-case,
.success-case-page .banner-success-case .container,
.success-case-view-page .banner-success-case,
.success-case-view-page .banner-success-case .container {
  height: 23.125rem;
}
.success-case-page .banner-success-case .banner-success-case-content,
.success-case-view-page .banner-success-case .banner-success-case-content {
  position: absolute;
  bottom: 4%;
  left: -5%;
  z-index: 2;
}
.success-case-page .banner-success-case .banner-success-case-note,
.success-case-view-page .banner-success-case .banner-success-case-note {
  font-size: 1.875rem;
  line-height: 2.25rem;
  margin: 0;
  margin-bottom: 0.8em;
}
.success-case-page .banner-success-case .banner-success-case-title,
.success-case-view-page .banner-success-case .banner-success-case-title {
  font-size: 13.125rem;
  line-height: 8.625rem;
  color: #B2B2B2;
  margin: 0;
}
.section-highlight-success-case .banner-highlight .banner-content {
  width: 35%;
  position: absolute;
  left: 50%;
  bottom: 5%;
  z-index: 2;
  transform: translate(-50%, 0);
}
.section-highlight-success-case .banner-highlight .banner-name,
.section-highlight-success-case .banner-highlight .banner-position {
  font-size: 1.5rem;
  line-height: 2.1875rem;
  margin-top: 1.125em;
}
.section-highlight-success-case .banner-highlight .banner-position {
  margin-top: 0;
}
.section-highlight-success-case .banner-highlight .banner-catchphrase {
  font-size: 2.1875rem;
  line-height: 2.5rem;
}
.section-highlight-success-case .banner-highlight .banner-catchphrase::before {
  content: '“';
  font-family: 'PT Serif Caption';
  color: white;
  display: block;
  font-size: 7.5rem;
  line-height: 2.813rem;
}
.success-case-view-page .section-highlight-success-case .banner-highlight .banner-content {
  width: 100%;
  bottom: 10%;
}
.success-case-view-page .section-highlight-success-case .banner-highlight .banner-name,
.success-case-view-page .section-highlight-success-case .banner-highlight .banner-position {
  font-size: 3.75rem;
  line-height: 5rem;
}
.dashboard-th-page .banner-page,
.inquiries-th-page .banner-page {
  padding: 11.875rem 0;
}
.dashboard-th-page .banner-page .background-black,
.inquiries-th-page .banner-page .background-black {
  opacity: 0.2;
}
.creative-hub-view-page .banner-content {
  padding: 10rem 0;
}

/* media slider style */
.slider.feature-slider, 
.slider.feature-slider .slides {
  height: 1080px !important;
}
.slider.feature-slider .slides li .caption {
  top: unset;
  bottom: 14%;
  z-index: 3;
}
.slider.feature-slider .slides .slider-topic {
  margin: 0;
  font-size: 2.813rem;
  position: absolute;
  top: 8%;
  left: 50%;
  z-index: 3;
  transform: translate(-50%, -50%);
}
.slider.feature-slider .slides .slider-title {
  margin: 0;
  font-size: 7.5em;
}
.slider.feature-slider .slides .slider-brief {
  margin: 0;
  font-size: 2.5em;
}
.slider.feature-slider ul.indicators {
  position: absolute;
  bottom: 4%;
  z-index: 3;
}
.slider.feature-slider ul.indicators li.indicator-item {
  width: 20px;
  height: 20px;
  background-color: #707070;
}
.slider.feature-slider ul.indicators li.indicator-item.active {
  background-color: white;
}

/* graphic element */
.home-page .section-why-thailand-pr {
  min-height: 1080px;
}
.home-page .section-why-thailand-pr .section-topic {
  left: 50%; 
  top: 4%; 
  transform: translateX(-50%);
}
.home-page .section-why-thailand-pr .section-topic .section-title {
  font-size: 15.625rem; 
  line-height: 15rem; 
  margin: 0;
}
.home-page .section-why-thailand-pr .section-topic .section-brief {
  font-size: 4.375rem;
  line-height: 5.625rem; 
  top: 13%; 
  right: 0;
}
.home-page .section-why-thailand-pr .section-content {
  width: 29.375rem; 
  top: 51%; 
  left: 29%; 
  z-index: 2;
}
.home-page .section-why-thailand-pr .section-content p {
  font-size: 1.25rem;
  line-height: 1.5rem; 
  padding-bottom: 1.5em;
}
.home-page .section-why-thailand-pr .section-content .btn-action {
  font-size: 5.625rem;
}
.home-page .section-why-thailand-pr img.graphic-1 {
  width: 18.125rem; 
  top: 16%; 
  left: -2.8%;
}
.home-page .section-why-thailand-pr img.graphic-2 {
  width: 29.375rem; 
  bottom: -0.1%; 
  left: 4%;
}
.home-page .section-why-thailand-pr img.graphic-4 {
  width: 47.5rem; 
  bottom: 0; 
  right: -0.5%;
}
.home-page .section-creative-hub-pr {
  min-height: 1080px;
}
.home-page .section-creative-hub-pr .section-topic {
  left: 50%; 
  top: 4%; 
  transform: translateX(-50%);
  z-index: 2;
}
.home-page .section-creative-hub-pr .section-topic .section-note {
  font-size: 1.875rem;
}
.home-page .section-creative-hub-pr .section-topic .section-title {
  font-size: 15.625rem; 
  line-height: 15.625rem;
  margin: 0;
  margin-top: -0.125em;
}
.home-page .section-creative-hub-pr .section-topic .section-brief {
  font-size: 4.375rem; 
  line-height: 5.625rem; 
  top: 16%; 
  right: -35%;
}
.home-page .section-creative-hub-pr .section-content {
  width: 29.375rem; 
  top: 33%; 
  left: 29%; 
  z-index: 2;
}
.home-page .section-creative-hub-pr .section-content p {
  font-size: 1.25rem;
  line-height: 1.5rem; 
  padding-bottom: 1.5em;
}
.home-page .section-creative-hub-pr .section-content .btn-action {
  font-size: 5.625rem;
}
.home-page .section-creative-hub-pr img.graphic-1 {
  width: 13.625rem; 
  top: 0; 
  right: 4%;
}
.home-page .section-creative-hub-pr img.graphic-2 {
  width: 29.625rem; 
  top: 0; 
  left: 0;
  z-index: 2;
}
.home-page .section-creative-hub-pr img.graphic-3 {
  width: 26.5rem; 
  bottom: 4%; 
  left: 7.5%
}
.home-page .section-creative-hub-pr img.graphic-4 {
  width: 12.75rem; 
  top: 32%; 
  right: 7%;
}
.home-page .section-creative-hub-pr img.graphic-5 {
  width: 37.25em; 
  bottom: 0; 
  right: 9.6%
}
.why-thailand-page .card-content .graphic-1 {
  width: 24.625em; 
  top: -5%; 
  right: -23%;
}
.why-thailand-page .card-content .graphic-2 {
  width: 55em; 
  bottom: -0.5%; 
  left: 0;
}
.why-thailand-page .card-content .graphic-3 {
  width: 20em; 
  bottom: -1.45%; 
  right: 2.6%;
}

/* prelaunch page */
/* .prelaunch-page .banner-intro {
  height: 100vh !important;
  background-size: cover;
  background-position: center center;
}
.prelaunch-page .banner-intro .background-black {
  opacity: 0.7;
}
.prelaunch-page .banner-intro .brand-logo {
  width: 6.25vw;
}
.prelaunch-page .banner-intro .banner-first-line {
  display: flex;
  align-items: center;
}
.prelaunch-page .banner-intro .banner-first-line h2 {
  margin: 0;
  margin-left: 1.25em;
  font-size: 2.083vw;
}
.prelaunch-page .banner-intro .banner-second-line {
  margin: 0.2em 0;
  font-size: 9.375vw;
  color: #F7D309;
  line-height: 9.375vw;
}
.prelaunch-page .banner-intro .banner-third-line {
  font-size: 1.562vw;
  line-height: 1.562vw;
}
.prelaunch-page .banner-intro .banner-social {
  margin: 0 -1em;
  margin-top: 6.25rem;
}
.prelaunch-page .banner-intro .banner-social li {
  display: inline-block;
  padding: 0 1em;
} */
.prelaunch-page {
  display: flex;
  height: 100vh;
  flex-direction: column;
}
.prelaunch-page .section-footer .logo-footer {
  height: 3rem;
}
.prelaunch-page .section-footer {
  padding: 1.375rem;
}
.prelaunch-page .section-footer .flex-item {
  flex: 1;
}
.prelaunch-page .section-footer .footer-info p {
  margin: 0;
  margin-left: 1rem;
}
.prelaunch-page .section-footer .btn {
  background-color: red;
  color: white;
  border-radius: 0;
  font-size: 2.187rem;
  height: 3rem;
  line-height: 3rem;
  padding: 0 2rem;
}
.prelaunch-page .section-footer .footer-socail {
  margin: 1rem 0;
}
.prelaunch-page .banner-intro {
  /* cursor: pointer; */
}

/* tabs style */
.tabs-dashboard {
  margin: 2em -0.75rem;
}
.tabs-dashboard ul.tabs {
  border-bottom: 3px solid black;
}
.tabs-dashboard ul.tabs li.tab a {
  font-size: 18px;
  color: black;
  /* font-family: 'Helvetica Neue Medium'; */
}
.tabs-dashboard ul.tabs li.tab a.active {
  position: relative;
  z-index: 2;
  color: white;
  background-color: black;
  font-weight: bold;
}
.tabs-dashboard ul.tabs .indicator {
  height: 100%;
  background-color: black;
}
.tabs-dashboard .tab-content {
  padding: 2em;
}
.tabs-dashboard .tab-content .tab-title {
  font-size: 3.3125rem;
}
.tabs-dashboard .tab-content .tab-table {
  height: 500px;
  margin-bottom: 2em;
  overflow: hidden;
  overflow-y: scroll;
}
.tabs-dashboard .tab-content .tab-form {
  margin-bottom: 2em;
}

/* truncation */
.truncate-1, .truncate-2, .truncate-3, .truncate-4, .truncate-5, .truncate-8 {
  display: block;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
}
.truncate-1 {
  -webkit-line-clamp: 1;
}
.truncate-2 {
  -webkit-line-clamp: 2;
}
.truncate-3 {
  -webkit-line-clamp: 3;
}
.truncate-4 {
  -webkit-line-clamp: 4;
}
.truncate-5 {
  -webkit-line-clamp: 5;
}
.truncate-8 {
  -webkit-line-clamp: 8;
}

/* icon vertical align */
.icon-vertical {
  margin: 1em 0;
}
.icon-vertical img, .icon-vertical span, .icon-vertical a, .icon-vertical i {
  vertical-align: middle;
}

/* border style */
.border-radius-0 {
  border-radius: 0 !important;
}
.border-radius-rounded {
  border-radius: 100px;
}
.border-top {
  border-top: 3px solid black;
}
.border-bottom {
  border-bottom: 3px solid black;
}

/* form them style */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type=number] {
  -moz-appearance: textfield;
}
.form-them .input-field {
  background-color: #EDEDED;
  border-radius: 3px;
  margin: 0;
  margin-top: 2.5em;
  margin-bottom: 0.5em;
  min-height: 3.125rem;
}
.form-them .input-field > label {
  top: -24px;
  color: black;
  transform: none;
  -webkit-transform: none;
}
.form-them .input-field > label:not(.label-icon).active,
.form-them .input-field > input[type]:not(.browser-default) + label,
.form-them .input-field > input[type]:-webkit-autofill:not(.browser-default):not([type="search"]) + label {
  transform: none;
  -webkit-transform: none;
}
.form-them input:not(.browser-default) {
  border-bottom: 0;
  width: calc(100% - 25px);
  margin: 0;
  padding: 0 12px;
}
.form-them input[type="radio"] {
  width: unset;
}
.form-them input:not(.browser-default):focus:not([readonly]),
.form-them input.valid:not(.browser-default) {
  border-bottom: 0;
  box-shadow: none;
  -webkit-box-shadow: none;
}
.form-them input:not(.browser-default):focus:not([readonly]) + label,
.form-them textarea.materialize-textarea:focus:not([readonly]) + label {
  color: #757575;
}
/* select */
.form-them select {
  border-radius: 3px;
  background-color: #EDEDED;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: url("/public/img/icon/icon-expand-more.png") no-repeat;
  background-size: 1.5rem;
  background-position: calc(100% - 4px) center;
  background-repeat: no-repeat;
}
.form-them select:focus {
  outline: none;
}
/* checkbox */
.form-them .input-checkbox {
  margin: 1em 0;
}
.form-them .input-radio {
  margin: 2em 0;
}
.form-them input[type="checkbox"] {
  width: unset;
}
.form-them input[type="checkbox"] + span:not(.lever),
.form-them input[type="radio"] + span {
  font-size: 1.25rem;
  height: 28px;
  line-height: 28px;
}
.form-them input[type="checkbox"].filled-in:not(:checked)+span:not(.lever):after,
.form-them input[type="checkbox"].filled-in:checked+span:not(.lever):after {
  width: 24px;
  height: 24px;
}
.form-them input[type="checkbox"].filled-in:checked+span:not(.lever):before {
  top: 1px;
  left: 2px;
  height: 15px;
}
.form-them input[type="checkbox"].filled-in:checked+span:not(.lever):after {
  border: 2px solid black;
  background-color: black;
}
.form-them input[type="radio"]+span:before, 
.form-them input[type="radio"]+span:after {
  width: 22px;
  height: 22px;
  margin: 2px;
}
.form-them input[type="radio"]:checked+span:after, 
.form-them input[type="radio"].with-gap:checked+span:before, 
.form-them input[type="radio"].with-gap:checked+span:after {
  border-color: black;
}
.form-them input[type="radio"]:checked+span:after, 
.form-them input[type="radio"].with-gap:checked+span:after {
  background-color: black;
}
/* file */
.form-them .file-field.input-field {
  display: flex;
  background-color: transparent;
  margin-top: 0.5em;
}
.form-them .file-field.input-field .file-path-wrapper {
  flex: 1;
  background-color: #EDEDED;
  border-radius: 3px;
  margin: 0;
  padding-left: 0;
}
.form-them .file-field.input-field .file-path-wrapper input {
  height: 100%;
}
.form-them .file-field.input-field .btn {
  margin-left: 1em;
}
/* textarea */
.form-them textarea.materialize-textarea {
  margin: 0;
  padding: 0.8rem;
  min-height: 15rem;
  border-bottom: 0;
}
.form-them textarea.materialize-textarea:focus:not([readonly]) {
  border-bottom: 0;
  box-shadow: none;
  -webkit-box-shadow: none;
}
/* line style */
.form-them .line-form {
  border-bottom: 3px solid black;
  margin: 2.5em 0;
}
form.form-service-request,
form.form-service-procurement {
  padding-top: 2em;
}

/* input style */
.signin-page .card-signin .card-input .input-field,
.signup-page .card-signup .card-input .input-field {
  background-color: #EDEDED;
  border-radius: 3px;
}
.signin-page .card-signin .card-input .input-field label,
.signup-page .card-signup .card-input .input-field label {
  font-size: 1.25rem;
}
.signin-page .card-signin .card-input .input-field > label:not(.label-icon).active,
.signup-page .card-signup .card-input .input-field > label:not(.label-icon).active {
  transform: translateY(-22px) scale(0.8);
  -webkit-transform: translateY(-22px) scale(0.8);
}
.signin-page .card-signin .card-input .input-field input:not(.browser-default):focus:not([readonly]) + label,
.signup-page .card-signup .card-input .input-field input:not(.browser-default):focus:not([readonly]) + label {
  color: #BDBDBD;
}
.signin-page .card-signin .card-input .input-field input:not(.browser-default),
.signin-page .card-signin .card-input .input-field input:not(.browser-default):focus:not([readonly]),
.signup-page .card-signup .card-input .input-field input:not(.browser-default),
.signup-page .card-signup .card-input .input-field input:not(.browser-default):focus:not([readonly]) {
  margin-bottom: 0;
  border-bottom-color: transparent;
  box-shadow: none;
  -webkit-box-shadow: none;
}
.signup-page .card-signup .card-input .input-field,
.signup-page .card-signup .card-input .input-field label {
  padding: 0 0.75rem;
}
.signin-page .card-signin .card-content [type="checkbox"].filled-in:checked+span:not(.lever):after,
.signup-page .card-signup .card-content [type="checkbox"].filled-in:checked+span:not(.lever):after {
  border: 2px solid black;
  background-color: black;
}
.signup-page .card-signup .card-input select {
  border: 0;
  /* color: #9E9E9E; */
  background-color: #EDEDED;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: url("/public/img/icon/icon-expand-more.png") no-repeat;
  background-size: 1.5rem;
  background-position: calc(100% - 4px) center;
  background-repeat: no-repeat;
}
.signup-page .card-signup .card-input select:focus {
  outline: none;
}
.signin-page .card-signin .card-input .input-field input,
.signup-page .card-signup .card-input .input-field input,
.signup-page .card-signup .card-input select {
  font-size: 1.2rem;
}

/* sweet alert2 style */
.swal2-styled.swal2-confirm {
  background-color: black;
}

/* input drag and drop image */
.input-drag-drop-image {
  margin-bottom: 2em;
  padding: 1em;
  background-color: #EDEDED;
}
.input-drag-drop-image .drop-zone {
  border: 2px dashed #ccc;
  border-radius: 10px;
  background-color: #e0e0e0;
  padding: 4em 1em;
  text-align: center;
}
.input-drag-drop-image .drop-zone .material-icons {
  font-size: 2rem;
  color: #616161;
}
.input-drag-drop-image .drop-zone .btn-choose {
  cursor: pointer;
}
.image-preview {
  display: flex;
  flex-wrap: wrap;
  margin: 1em 0;
}
.image-preview .preview-image {
  width: 150px;
  height: 150px;
  margin: 10px;
  position: relative;
}
.image-preview .preview-image img {
  max-width: 100%;
  max-height: 100%;
}
.image-preview .delete-button {
  position: absolute;
  top: -8px;
  right: -8px;
  cursor: pointer;
  background-color: #e53935;
  border-radius: 100%;
  height: 24px;
  width: 24px;
  color: white;
  text-align: center;
}



/* Modal */
.modal-dialog {
  max-height: none;
  max-width: 560px;
  top: 50% !important;
  left: 50%;
  transform: translate(-50%, -50%) !important;
  right: unset;

  .modal-content {
    padding: 0;
    position: relative;
    
    .modal-close {
      position: absolute;
      top: 0;
      right: 0;
      z-index: 2;
      padding: 0;
      width: 36px;
    }

    img {
      display: block;
    }
  }
}



/* cookie policy */
.cookie-policy {
  display: flex;
  position: fixed;
  bottom: 0;
  z-index: 99;
  align-items: center;
  padding: 20px;
  width: 100%;
  animation-name: slide-bar;
  animation-direction: normal;
  animation-duration: 900ms;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}
@keyframes slide-bar {
  from {
    transform: translateY(50px);
  }
  to {
    transform: translateY(0);
  }
}
.policy-banner {
  padding: 20px;
  opacity: 1;
  width: unset;
  max-width: 1280px;
  margin: 0 auto;
  border: 1px solid rgb(232, 232, 232);
  border-radius: 8px;
  box-shadow: rgb(0 0 0 / 10%) 0px 2px 8px 0px;
}
.policy-banner .policy-title {
  margin-bottom: 5px;
}
.policy-banner .policy-link {
  /* margin: 0 0.2em; */
  color: #BB3C61;
}
.policy-btn .policy-btn-accept {
  background-color: #BB3C61;
  border-radius: 10px;
  font-weight: 400;
  margin-top: 1.5em;
  color: white;
}
textarea{
  background-color: #EDEDED;
  border-radius: 3px;
  height: 20em;
  resize: none;
}
.helvetica-light{
  margin-bottom: 1rem; 
}