@import url(https://fonts.googleapis.com/css2?family=Prompt:wght@400;500;700&display=swap);
.text-bold {
  font-weight: bold;
}

.text-blue {
  color: #0d6efd;
}

.text-orange {
  color: #f65801 !important;
}

.text-red {
  color: #1a365d !important;
}

.text-green {
  color: #00CC00 !important;
}

.text-brown {
  color: #968048 !important;
}

.text-dark-brown {
  color: #43340F !important;
}

.text-default {
  color: #111111 !important;
}

.bg-white {
  background-color: #ffffff !important;
}

.bg-light-blue {
  background-color: #9AB7F1 !important;
}

.bg-light-blue-2 {
  background-color: #5a7fd0 !important;
}

.bg-dark-blue {
  background-color: #1a365d !important;
}

.bg-black {
  background-color: black !important;
}

.bg-brown {
  background-color: #968048 !important;
}

.bg-light-yellow {
  background-color: #fff8d3 !important;
}

.bg-grey {
  background-color: #DEDEE0 !important;
}

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

.font-weight-500 {
  font-weight: 500 !important;
}

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

/* This element defines the size the iframe will take.
   In this example we want to have a ratio of 25:14 */
.aspect-ratio {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
  /* The height of the item will now be 56.25% of the width. */
}

/* Adjust the iframe so it's rendered in the outer-width and outer-height of it's parent */
.aspect-ratio iframe {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}

.text-16 {
  font-size: 16px !important;
}

.text-14 {
  font-size: 14px !important;
}

.text-12 {
  font-size: 12px !important;
}

.text-extra-large {
  font-size: 3rem;
}

a {
  transition: 0.2s all ease-in-out;
}

.text-indent {
  text-indent: 3em !important;
}

.table-red-bordered {
  border-color: #1a365d;
}

nav.sidebar .nav-link.active {
  background-image: #0d6efd;
  background: linear-gradient(270deg, #0d6efd 0%, #0257d5 100%);
  color: #ffffff;
}

body {
  font-family: "Prompt";
  font-size: 12px;
  font-weight: 400;
  background-color: #f8f9fa;
}
@media (min-width: 576px) {
  body {
    font-size: 18px;
  }
}

hr.short-break {
  width: 62px;
  height: 4px;
  background-color: #968048;
  opacity: 1;
}

hr.red {
  height: 2px;
  background-color: #1a365d;
  opacity: 1;
}

.btn-gradient-red {
  background: #1a365d;
  background: linear-gradient(180deg, #1a365d 0%, #0d1b2f 100%);
  color: #ffffff;
}
.btn-gradient-red:active, .btn-gradient-red:focus, .btn-gradient-red:hover {
  color: #ffffff;
}

/* Modal Vue.js */
.modal.modal-search {
  overflow-x: hidden;
  overflow-y: auto;
  background-color: rgba(0, 0, 0, 0.5);
  transition: opacity 0.3s ease;
}
.modal.modal-search .modal-close-wrapper {
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  background-color: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.2);
  cursor: pointer;
  pointer-events: visible;
  display: inline-block;
  padding: 0 8px;
}
.modal.modal-search .modal-content {
  border-top-right-radius: 0;
  border: none;
}
.modal.modal-search .modal-content .header {
  border-top-left-radius: 5px;
  background: linear-gradient(180deg, #1a365d 0%, #0d1b2f 100%);
}
.modal.modal-search .modal-content .content {
  border-color: #0d1b2f;
  border-style: solid;
  border-width: 0 3px 3px 3px;
}

header .navbar-light .navbar-brand {
  color: #1a365d;
  font-size: 26px;
  font-weight: 700;
}
header .navbar-light .navbar-top-desktop hr {
  background-color: #1a365d;
  border-bottom-color: #1a365d;
  height: 1.5px;
  opacity: 1;
}
header .navbar-light .navbar-nav a.nav-link {
  color: #111111;
  font-weight: 500;
}
header .navbar-light .navbar-nav a.nav-link.active {
  color: #1a365d;
}
header .navbar-light .divider .divider-item {
  flex: 1;
}
header .navbar-light .divider .divider-item:nth-child(2) {
  background-color: #1a365d;
  width: 1.5px;
}
@media (min-width: 1200px) {
  header .navbar-expand-xl .navbar-nav .nav-link {
    padding-right: 1.5rem;
    padding-left: 1.5rem;
  }
}

section.banners {
  background-color: #ffffff;
}

.thai-lotto .table-wrapper h1 {
  font-size: 5rem;
  line-height: 0.8;
}
.thai-lotto .table-wrapper table th {
  border-width: 0 1px;
}
.thai-lotto .table-wrapper table th h2 {
  font-size: 1.8rem;
}

.country-flag {
  width: 10px;
  height: auto;
}
@media (min-width: 576px) {
  .country-flag {
    width: 30px;
  }
}

.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

#go-to-top-button {
  opacity: 0;
  visibility: hidden;
  position: fixed;
  /* Fixed/sticky position */
  bottom: 20px;
  /* Place the button at the bottom of the page */
  right: 30px;
  /* Place the button 30px from the right */
  z-index: 99;
  /* Make sure it does not overlap */
  border: none;
  /* Remove borders */
  outline: none;
  /* Remove outline */
  background-color: #1a365d;
  /* Set a background color */
  color: white;
  /* Text color */
  cursor: pointer;
  /* Add a mouse pointer on hover */
  padding: 15px 20px;
  /* Some padding */
  border-radius: 10px;
  /* Rounded corners */
  font-size: 18px;
  /* Increase font size */
  transition: 0.2s all ease-in-out;
}
#go-to-top-button:hover {
  background-color: #555;
}

.section-header {
  background-color: #1a365d;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
.section-header h2 {
  font-size: 1.6rem;
}
.section-header h1 {
  font-size: 1.8rem;
}

main#home-page, main#thai-lotto-page, main#stock-lotto-page, main#foreign-lotto-page {
  background-color: #ffffff;
}
main#home-page section.search .form-wrapper, main#thai-lotto-page section.search .form-wrapper, main#stock-lotto-page section.search .form-wrapper, main#foreign-lotto-page section.search .form-wrapper {
  border-radius: 0 0 20px 20px;
  box-shadow: 0 0 4px 2px rgba(0, 0, 0, 0.1);
  background-color: #ffffff;
  padding: 20px 50px;
}
main#home-page section.search .form-wrapper button, main#thai-lotto-page section.search .form-wrapper button, main#stock-lotto-page section.search .form-wrapper button, main#foreign-lotto-page section.search .form-wrapper button {
  padding-left: 40px;
  padding-right: 40px;
}
main#home-page section.summary .summary-date-header, main#thai-lotto-page section.summary .summary-date-header, main#stock-lotto-page section.summary .summary-date-header, main#foreign-lotto-page section.summary .summary-date-header {
  background-color: #1a365d;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
main#home-page section.summary .summary-date-header h2, main#thai-lotto-page section.summary .summary-date-header h2, main#stock-lotto-page section.summary .summary-date-header h2, main#foreign-lotto-page section.summary .summary-date-header h2 {
  font-size: 1.6rem;
}
main#home-page section.summary .summary-date-header h1, main#thai-lotto-page section.summary .summary-date-header h1, main#stock-lotto-page section.summary .summary-date-header h1, main#foreign-lotto-page section.summary .summary-date-header h1 {
  font-size: 1.8rem;
}
main#home-page section.summary .header h2, main#thai-lotto-page section.summary .header h2, main#stock-lotto-page section.summary .header h2, main#foreign-lotto-page section.summary .header h2 {
  font-size: 1.6rem;
}
main#home-page section.summary .header i, main#thai-lotto-page section.summary .header i, main#stock-lotto-page section.summary .header i, main#foreign-lotto-page section.summary .header i {
  border: 1px solid #fff;
}
main#home-page section.summary .table-wrapper, main#thai-lotto-page section.summary .table-wrapper, main#stock-lotto-page section.summary .table-wrapper, main#foreign-lotto-page section.summary .table-wrapper {
  padding: 5px;
  color: #ffffff;
  background-color: #1a365d;
}
main#home-page section.summary .table-wrapper h2, main#thai-lotto-page section.summary .table-wrapper h2, main#stock-lotto-page section.summary .table-wrapper h2, main#foreign-lotto-page section.summary .table-wrapper h2 {
  font-size: 1.4rem;
  padding: 10px 5px;
}
main#home-page section.summary .table-wrapper table, main#thai-lotto-page section.summary .table-wrapper table, main#stock-lotto-page section.summary .table-wrapper table, main#foreign-lotto-page section.summary .table-wrapper table {
  background-color: #fff;
}
main#home-page section.summary .table-wrapper table th, main#thai-lotto-page section.summary .table-wrapper table th, main#stock-lotto-page section.summary .table-wrapper table th, main#foreign-lotto-page section.summary .table-wrapper table th {
  font-weight: 500;
  border-width: 0;
}
main#home-page section.summary .table-wrapper table small, main#thai-lotto-page section.summary .table-wrapper table small, main#stock-lotto-page section.summary .table-wrapper table small, main#foreign-lotto-page section.summary .table-wrapper table small {
  font-size: 0.75rem;
}
main#home-page section.summary .thai-lotto .table-wrapper h1, main#thai-lotto-page section.summary .thai-lotto .table-wrapper h1, main#stock-lotto-page section.summary .thai-lotto .table-wrapper h1, main#foreign-lotto-page section.summary .thai-lotto .table-wrapper h1 {
  font-size: 5rem;
  line-height: 0.8;
}
main#home-page section.summary .thai-lotto .table-wrapper table th, main#thai-lotto-page section.summary .thai-lotto .table-wrapper table th, main#stock-lotto-page section.summary .thai-lotto .table-wrapper table th, main#foreign-lotto-page section.summary .thai-lotto .table-wrapper table th {
  border-width: 0 1px;
}
main#home-page section.summary .thai-lotto .table-wrapper table th h2, main#thai-lotto-page section.summary .thai-lotto .table-wrapper table th h2, main#stock-lotto-page section.summary .thai-lotto .table-wrapper table th h2, main#foreign-lotto-page section.summary .thai-lotto .table-wrapper table th h2 {
  font-size: 1.8rem;
}
main#home-page section.summary .lotto-draw-date-wrapper, main#thai-lotto-page section.summary .lotto-draw-date-wrapper, main#stock-lotto-page section.summary .lotto-draw-date-wrapper, main#foreign-lotto-page section.summary .lotto-draw-date-wrapper {
  background-color: #1a365d;
  border-bottom-right-radius: 20px;
  border-bottom-left-radius: 20px;
  font-size: 1.2rem;
}
main#home-page section.summary .card-content, main#thai-lotto-page section.summary .card-content, main#stock-lotto-page section.summary .card-content, main#foreign-lotto-page section.summary .card-content {
  border-radius: 20px;
}
main#home-page section.lotto-list, main#thai-lotto-page section.lotto-list, main#stock-lotto-page section.lotto-list, main#foreign-lotto-page section.lotto-list {
  border: none;
  border-bottom: 5px solid #1a365d;
}
main#home-page section.lotto-list .lotto-title-wrapper, main#thai-lotto-page section.lotto-list .lotto-title-wrapper, main#stock-lotto-page section.lotto-list .lotto-title-wrapper, main#foreign-lotto-page section.lotto-list .lotto-title-wrapper {
  background: linear-gradient(180deg, #1a365d 0%, #0d1b2e 100%);
  color: #f65801;
  font-size: 1rem;
}
main#home-page section.lotto-list .lotto-wrapper, main#thai-lotto-page section.lotto-list .lotto-wrapper, main#stock-lotto-page section.lotto-list .lotto-wrapper, main#foreign-lotto-page section.lotto-list .lotto-wrapper {
  background: linear-gradient(90deg, #1a365d 0%, #2d5a8f 51.61%, #1a365d 100%);
  font-size: 1rem;
}
main#home-page section.lotto-list .lotto-wrapper .d-flex, main#thai-lotto-page section.lotto-list .lotto-wrapper .d-flex, main#stock-lotto-page section.lotto-list .lotto-wrapper .d-flex, main#foreign-lotto-page section.lotto-list .lotto-wrapper .d-flex {
  border-bottom: 2px solid #f65801;
}
main#home-page section.lotto-list .lotto-wrapper .d-flex .time, main#thai-lotto-page section.lotto-list .lotto-wrapper .d-flex .time, main#stock-lotto-page section.lotto-list .lotto-wrapper .d-flex .time, main#foreign-lotto-page section.lotto-list .lotto-wrapper .d-flex .time {
  flex: 0 0 60px;
  color: #f65801;
}
main#home-page section.lotto-list .lotto-wrapper .d-flex .title, main#thai-lotto-page section.lotto-list .lotto-wrapper .d-flex .title, main#stock-lotto-page section.lotto-list .lotto-wrapper .d-flex .title, main#foreign-lotto-page section.lotto-list .lotto-wrapper .d-flex .title {
  flex: 1;
  color: white;
}
main#home-page section.lotto-list .lotto-wrapper .d-flex .icons, main#thai-lotto-page section.lotto-list .lotto-wrapper .d-flex .icons, main#stock-lotto-page section.lotto-list .lotto-wrapper .d-flex .icons, main#foreign-lotto-page section.lotto-list .lotto-wrapper .d-flex .icons {
  flex: 0;
}
@media (min-width: 576px) {
  main#home-page section.lotto-list, main#thai-lotto-page section.lotto-list, main#stock-lotto-page section.lotto-list, main#foreign-lotto-page section.lotto-list {
    border: 5px solid #1a365d;
    border-bottom: 5px solid #1a365d;
    margin-bottom: 20px;
  }
  main#home-page section.lotto-list .lotto-title-wrapper, main#thai-lotto-page section.lotto-list .lotto-title-wrapper, main#stock-lotto-page section.lotto-list .lotto-title-wrapper, main#foreign-lotto-page section.lotto-list .lotto-title-wrapper {
    font-size: 1.4rem;
    color: #1a365d;
    background: none;
  }
  main#home-page section.lotto-list .lotto-wrapper, main#thai-lotto-page section.lotto-list .lotto-wrapper, main#stock-lotto-page section.lotto-list .lotto-wrapper, main#foreign-lotto-page section.lotto-list .lotto-wrapper {
    padding-left: 3.5rem;
    background: none;
  }
  main#home-page section.lotto-list .lotto-wrapper .d-flex, main#thai-lotto-page section.lotto-list .lotto-wrapper .d-flex, main#stock-lotto-page section.lotto-list .lotto-wrapper .d-flex, main#foreign-lotto-page section.lotto-list .lotto-wrapper .d-flex {
    border-bottom: 2px solid #f65801;
  }
  main#home-page section.lotto-list .lotto-wrapper .d-flex .time, main#thai-lotto-page section.lotto-list .lotto-wrapper .d-flex .time, main#stock-lotto-page section.lotto-list .lotto-wrapper .d-flex .time, main#foreign-lotto-page section.lotto-list .lotto-wrapper .d-flex .time {
    flex: 0 0 80px;
    color: #111111;
  }
  main#home-page section.lotto-list .lotto-wrapper .d-flex .title, main#thai-lotto-page section.lotto-list .lotto-wrapper .d-flex .title, main#stock-lotto-page section.lotto-list .lotto-wrapper .d-flex .title, main#foreign-lotto-page section.lotto-list .lotto-wrapper .d-flex .title {
    flex: 1;
    color: #1a365d;
  }
  main#home-page section.lotto-list .lotto-wrapper .d-flex .icons, main#thai-lotto-page section.lotto-list .lotto-wrapper .d-flex .icons, main#stock-lotto-page section.lotto-list .lotto-wrapper .d-flex .icons, main#foreign-lotto-page section.lotto-list .lotto-wrapper .d-flex .icons {
    flex: 0;
  }
}
main#home-page section.contents, main#thai-lotto-page section.contents, main#stock-lotto-page section.contents, main#foreign-lotto-page section.contents {
  background-color: #ffffff;
  padding-top: 30px;
}
main#home-page section.contents .header h2, main#thai-lotto-page section.contents .header h2, main#stock-lotto-page section.contents .header h2, main#foreign-lotto-page section.contents .header h2 {
  font-size: 1.6rem;
}
main#home-page section.contents .card-content, main#thai-lotto-page section.contents .card-content, main#stock-lotto-page section.contents .card-content, main#foreign-lotto-page section.contents .card-content {
  border: none;
  border-radius: 20px;
}
main#home-page section.contents .card-content .card-img-top, main#thai-lotto-page section.contents .card-content .card-img-top, main#stock-lotto-page section.contents .card-content .card-img-top, main#foreign-lotto-page section.contents .card-content .card-img-top {
  border-radius: 20px 20px 0 0;
}
main#home-page section.contents .card-content .card-body .card-text, main#thai-lotto-page section.contents .card-content .card-body .card-text, main#stock-lotto-page section.contents .card-content .card-body .card-text, main#foreign-lotto-page section.contents .card-content .card-body .card-text {
  line-height: 1.5em;
  min-height: 4.5em;
}
@media (min-width: 768px) {
  main#home-page section.contents, main#thai-lotto-page section.contents, main#stock-lotto-page section.contents, main#foreign-lotto-page section.contents {
    padding-bottom: 30px;
  }
}

main#thai-lotto-page2 {
  background-color: #ffffff;
}
main#thai-lotto-page2 section.heading .form-wrapper {
  border-radius: 0 0 20px 20px;
  box-shadow: 0 0 4px 2px rgba(0, 0, 0, 0.1);
  background-color: #ffffff;
  padding: 20px 50px;
}
main#thai-lotto-page2 section.heading .form-wrapper button {
  padding-left: 40px;
  padding-right: 40px;
}
main#thai-lotto-page2 section.main-reward table {
  border: 3px solid #1a365d;
}
main#thai-lotto-page2 section.main-reward table th {
  background-color: #1a365d;
  padding: 10px 0 0;
}
main#thai-lotto-page2 section.main-reward table th h4 {
  font-size: 1rem;
}
main#thai-lotto-page2 section.main-reward table td {
  padding: 10px;
  border-color: #1a365d;
  border-left-width: 3px;
  border-bottom-width: 3px;
}
main#thai-lotto-page2 section.additional-reward .btn-recheck {
  padding: 10px 100px;
}

main#all-content-page {
  background-color: #ffffff;
}
main#all-content-page section.contents {
  background-color: #ffffff;
  padding-top: 30px;
}
main#all-content-page section.contents .header h2 {
  font-size: 1.6rem;
}
main#all-content-page section.contents .card-content {
  border: none;
  border-radius: 20px;
}
main#all-content-page section.contents .card-content .card-img-top {
  border-radius: 20px 20px 0 0;
}
main#all-content-page section.contents .card-content .card-body .card-text {
  line-height: 1.5em;
  min-height: 4.5em;
}
@media (min-width: 768px) {
  main#all-content-page section.contents {
    padding-bottom: 30px;
  }
}

main#content-page {
  background-color: #ffffff;
}
main#content-page section.content {
  background-color: #ffffff;
  padding-top: 30px;
}
main#content-page section.content img {
  max-width: 100%;
}
@media (min-width: 768px) {
  main#content-page section.content {
    padding-bottom: 30px;
  }
}
main#content-page section.contents {
  background-color: #ffffff;
  padding-top: 30px;
}
main#content-page section.contents .header h2 {
  font-size: 1.6rem;
}
main#content-page section.contents .card-content {
  border: none;
  border-radius: 20px;
}
main#content-page section.contents .card-content .card-img-top {
  border-radius: 20px 20px 0 0;
}
main#content-page section.contents .card-content .card-body .card-text {
  line-height: 1.5em;
  min-height: 4.5em;
}
@media (min-width: 768px) {
  main#content-page section.contents {
    padding-bottom: 30px;
  }
}

main#lotto-yiki-page {
  background: white;
  background: linear-gradient(180deg, white 0%, #dedee0 100%);
}

main#login-page {
  min-height: 100vh;
}

main#live-page section.live-iframe iframe {
  max-width: 100%;
  height: 400px;
}
@media (min-width: 576px) {
  main#live-page section.live-iframe iframe {
    height: 600px;
  }
}
main#live-page .button-register {
  display: inline-block;
  background-color: #f65801;
  font-size: 1.2rem;
  text-decoration: none;
  color: #1a365d;
  padding: 15px 80px;
  box-shadow: -4px 0px 4px rgba(0, 0, 0, 0.1);
  border-radius: 30px;
}

footer {
  background-color: #1a365d;
  color: #fff;
}
footer a.nav-item-mobile {
  text-decoration: none;
  color: #fff;
  padding: 10px 0;
  display: block;
  white-space: nowrap;
}
footer a.nav-item-mobile:active, footer a.nav-item-mobile:hover, footer a.nav-item-mobile:focus {
  background-color: #2b5999;
}
footer .divider {
  width: 0.5px;
  background-color: #444;
  margin: 10px 0;
}
@media (min-width: 768px) {
  footer {
    padding: 25px 0;
    background-color: #f8f9fa;
    color: #111111;
  }
  footer ul {
    padding: 0;
    margin: 0;
  }
  footer ul li > a {
    text-decoration: none;
    color: #111111;
    transition: 0.2s all ease-in-out;
  }
  footer ul li > a:active, footer ul li > a:focus, footer ul li > a:hover {
    color: #1a365d;
  }
}