@import "/event/css/fonts.css";
@import "/event/css/share-bar.css";

/* Standard Begin */
html {
  scroll-behavior: smooth
}

body {
  font-family: Gotham, Tahoma, sans-serif;
  font-weight: 400;
  color: #3d3935;
}

body[lang="th"] {
  font-family: 'DB Helvethaica X', Tahoma, sans-serif;
  font-weight: 300;
}

a {
  display: inline-block;
  color: #26b9ec;
  transition: 0.5s;
  text-decoration: none;
}

a:hover {
  color: #0e799e;
  text-decoration: none;
}

img {
  display: inline-block;
  vertical-align: middle;
}

input,
select,
textarea,
.small {
  font-weight: 300;
}

form a {
  font-weight: 500;
}

form label {
  font-size: .92em;
}

form option {
  color: #3d3935
}

.container-fluid {
  padding-left: 0;
  padding-right: 0
}

.container-fluid .row {
  margin-left: 0;
  margin-right: 0
}

/* Standard End */


/* Header Begin */
header {
  color: #fff;
  position: fixed;
  width: 100%;
  z-index: 2;
  margin-top: 0.2em;
  transition: 0.5s;
}

header>.row {
  padding: 0.6em 0;
  display: flex;
}

header .language a {
  display: inline-block;
  background-color: #3d3935;
  color: #807f7f;
  border-radius: 50%;
  font-size: .76em;
  padding: .8em;
  line-height: 1.4em;
  font-weight: 500;
}

header .language a:hover {
  color: #b3b2b2;
  text-decoration: none;
}

header .language a.active {
  color: #fff;
}

header .language a:hover.active {
  color: #26b9ec;
}

header .switch .row .share,
header .switch .row .language {
  padding: 0;
  margin: 0;
}

/* Header End */

#home img {
  max-width: 100%;
  height: auto;
}

#home .swiper-pagination-bullet-active {
  background-color: #26b9ec;
}

/* Main Begin */
main {
  position: relative;
}

[lang="th"] main {
  letter-spacing: .05em;
  font-size: .92em;
}

section[name] {
  padding: 4em 0;
  /* opacity:0.2; */
}

section[name] h2 {
  margin: 1.5rem 0;
  font-weight: bold;
  color: #000;
}

section[name] .nav {
  justify-content: center;
  margin-bottom: 4%;
}

section[name] .nav a {
  color: #000;
  border-radius: unset;
  border-bottom: 4px solid #dbdbdc;
  margin: 0 1.5em;
  padding-left: 0;
  padding-right: 0;
  text-align: center;
  min-width: 100px;
  display: inline-block;
}

section[name] .nav a:not(.active):hover {
  color: #817970;
  border-bottom: 4px solid #bdb9b4;
  transition: 0.5s;
}

section[name] .nav a.active {
  color: #000;
  background-color: unset;
  font-weight: bold;
  border-bottom-color: #26b9ec;
}

section[name] .nav a:hover.active {
  border-bottom-color: #26b9ec;
}

@media (max-width: 575px) {
  section[name] {
    padding: 1em 0;
  }
}

/* Main End */


/* Form */
#register {
  text-align: center;
}

form {
  color: #fff;
  background-color: rgba(61, 57, 53, .75);
  border-radius: 16px;
  padding: 1.5em;
  font-weight: 300;
}

form .row label {
  width: 90%;
}

form .row input[type="checkbox"] {
  vertical-align: top;
  margin: .3em .6em 0 0;
}

form input {
  background: transparent;
  border-color: transparent;
  border-bottom-color: hsla(0, 0%, 100%, .65);
}

form input[type="text"],
form input[type="email"],
form input[type="number"],
form select {
  padding: 0 0.2em;
  border: 0;
  border-bottom: 1px solid #cacaca;
  background-color: transparent;
  color: #fff;
  outline: 0;
}

form select {
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='32' height='24' viewBox='0 0 32 24'><polygon points='0,0 32,0 16,24' style='fill: rgb%28138, 138, 138%29'></polygon></svg>");
  background-repeat: no-repeat;
  background-origin: content-box;
  background-position: right 2px center;
  background-size: 9px 6px;
}

form input[type="text"]:focus,
form input[type="email"]:focus,
form select:focus {
  outline: none !important;
  transition: 0.5s;
  border-bottom: 1px solid #26b9ec;
}

form input::placeholder {
  color: #dbdbdc;
}

form button {
  border: 0;
  background: #26b9ec;
  padding: 0.4em 2.5em;
  color: #fff;
  transition: 0.5s;
}

form button:hover {
  color: #0e799e;
}

#country-code-list li {
  color: #000;
  font-weight: 400;
  font-size: .9em;
}

/* Footer Begin */
footer {
  color: #fff;
  font-size: 1.2em;
  padding-bottom: 1em;
}

[lang="th"] footer {
  letter-spacing: .05em;
}

footer .gototop {
  margin-top: -20px;
  z-index: 1;
}

footer .gototop a {
  background-color: #fff;
  border-radius: 50%;
  -webkit-box-shadow: 0 0 10px 0 rgb(0 0 0 / 50%);
  box-shadow: 0 0 10px 0 rgb(0 0 0 / 50%);
}

footer .gototop a span {
  margin: 10px;
  width: 30px;
  height: 30px;
  line-height: 30px;
  font-size: 1em;
  background-color: #fff;
  color: #26b9ec;
  border-radius: 50%;
  border: 1px solid #26b9ec;
  transition: 0.5s;
}

footer .gototop a:hover span {
  color: #1779ba;
}

footer .fa-arrow-up::before {
  display: inline-block;
  vertical-align: top;
  margin-top: -2px;
}

footer .follow ul li a {
  margin: 6px;
  width: 50px;
  height: 50px;
  line-height: 50px;
  background-color: #fff;
  color: #26b9ec;
  border-radius: 50%;
  transition: 0.5s;
}

footer .follow ul li a:hover {
  color: #1779ba;
}

footer .copy {
  font-size: .6em;
}

@media (max-width: 575px) {
  footer .logo img {
    width: 100%;
    height: auto;
  }
}

/** Date picker */
.datepicker-dropdown {
  min-width: 300px;
}

.datepicker-dropdown table {
  width: 100%;
}

.datepicker-dropdown table .next {
  text-align: right;
}

.datepicker-dropdown table tr td,
.datepicker-dropdown table tr th {
  text-align: center;
}

.datepicker-dropdown table tr td {
  font-size: .92em;
}

.anchor {
  color: #d9534f;
}