/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# General
  ## Tooltip
# Lotto Result
  ## Lotto Header
  ## Primary Prize
  ## Lotto List
  ## Lotto Result Responsive
# Lotto History
  ## Lotto History Responsive
# Lotto Sidebar
  ## Lotto History Sidebar
  ## Lotto Sidebar Responsive
# Component
  ## Links
  ## Menus

/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
.lotto-checking,
.lotto-checking-container {
  font-size: 16px;
  color: #404040;
}

.lotto-checking a,
.lotto-checking-container a {
  color: #404040;
}

.lotto-checking h1, .lotto-checking p {
  padding: 0;
  margin: 0;
}

/* ## Tooltip */
.lotto-tooltip-wrapper {
  position: relative;
}

.lotto-tooltip-text {
  position: absolute;
  background-color: rgba(18, 18, 18, 1);
  color: white;
  font-weight: bold;
  font-size: 1rem;
  padding: 4px 8px;
  border-radius: 4px;
  z-index: 10;
  width: max-content;
  left: calc(50% - 50px);
  top: 45px;
  right: auto;
  bottom: auto;
  margin: 0px;
}

.lotto-tooltip-text.tooltip-is-hidden {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s linear 300ms, opacity 300ms;
}

.lotto-tooltip-text.tooltip-is-visible {
  visibility: visible;
  opacity: 1;
  transition: visibility 0s linear 0s, opacity 300ms;
}

#arrow,
#arrow::before {
  position: absolute;
  width: 8px;
  height: 8px;
  z-index: -1;
  top: -2px;
  left: calc(50% - 4px);
}

#arrow::before {
  content: '';
  transform: rotate(45deg);
  background-color: rgba(18, 18, 18, 1);
}

/*--------------------------------------------------------------
# Lotto Homepage
--------------------------------------------------------------*/
.lotto-checking-container {
  background-color: #F5F5F5;
  padding: 2rem 0 1rem;
  margin-top: 1rem;
}

.lotto-checking-container .lotto-header .lotto-datetime {
  display: none;
}

.lotto-checking-container .lotto-header .social-share .button-line a {
  color: #F5F5F5;
}

.lotto-checking-container .primary-prize-section {
  margin-bottom: 10px;
}

.lotto-checking-container .lotto-group-button {
  border-bottom: 1px solid #D5D5D5;
}

.lotto-checking-container a.btn-view-more-result,
.lotto-checking-container a.btn-view-more-history {
  padding: .8rem 2rem;
  color: #297AED;
  margin-bottom: 1rem;
  width: 100%;
}

.lotto-checking-container .btn-view-more-result {
  background: #FFFFFF;
  box-shadow: 0px 5px 8px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
}

.lotto-checking-container .lotto-checker {
  margin-top: 1rem;
  margin-bottom: 0;
}

.lotto-checking-container .lotto-checker .btn-checking-more {
  display: none;
}

@media (min-width: 992px) {
  .lotto-checking-container .lotto-group-button {
    border-bottom: none;
  }

  .lotto-checking-container .lotto-checker {
    margin-top: 0;
  }

  .lotto-checking-container .lotto-checker {
    border-left: 1px solid #D4D4D4;
  }
}

/*--------------------------------------------------------------
# Lotto Result
--------------------------------------------------------------*/
.lotto-result .primary-prize-section {
  margin-bottom: 20px;
}

/* ## Lotto Header */
.lotto-header .header-title {
  margin-bottom: 10px;
}

.lotto-header .lotto-datetime {
  color: #C7C7C7;
  font-size: 0.8em;
}


.lotto-header .social-share {
  margin-bottom: 10px;
  flex-basis: 100%;
}

.lotto-header .social-share i {
  font-size: 1.2rem;
  padding-right: 0.5rem;
}

.lotto-header .social-share .button-social,
.lotto-header .social-share .button-clipboard {
  margin-right: 0.2rem;
  width: 35px;
  height: 35px;
  border-radius: 30px;
  display: inline-block;
}

.lotto-header .social-share .button-social a,
.lotto-header .social-share .button-clipboard a {
  border-radius: 3px;
  padding: 0.5rem 0rem 0.58rem 0.5rem;
  text-align: center;
  margin-bottom: 0.2rem;
  width: 100%;
  display: inline-block;
  color: #fefefe;
  text-decoration: none;
  font-size: 0.8rem;
  line-height: 1.4rem;
  vertical-align: top;
}

.lotto-header .social-share .button-facebook {
  background-color: #3b5998;
}

.lotto-header .social-share .button-twitter {
  background-color: #04aced;
}

.lotto-header .social-share .button-line {
  width: 43px;
  height: 35px;
  background-color: #11c115;
  position: relative;
}

.lotto-header .social-share .button-line a {
  padding: 0;
  margin-left: 0px;
  padding-top: 9px;
  height: 100%;
}

.lotto-header .social-share .button-line i {
  font-size: 56px;
  position: absolute;
  top: -10px;
  left: -3px;
}

.lotto-header .social-share .button-link a {
  color: #000;
  cursor: pointer;
}

.lotto-header .social-share .button-link i {
  font-size: 1.5rem;
}

/* ## Primary Prize */
.primary-prize-section .first-prize {
  background-color: #C1272D;
  color: #fff;
  padding: 1rem;
  margin: 0 0 10px 0;
}

.primary-prize-section .first-prize .text {
  font-size: 1.5rem;
}

.primary-prize-section .first-prize .prize-desc {
  color: #E0A2A2;
}

.primary-prize-section .first-prize .number {
  font-size: 2.5rem;
  line-height: 1.2;
}

/* Special Prize */
.primary-prize-section .special-prize {
  margin-left: -5px;
  margin-right: -5px;
}

.primary-prize-section .special-prize > [class*="col-"] {
  padding-left: 5px;
  padding-right: 5px;
}

.primary-prize-section .special-prize .column {
  background-color: #EAEAEA;
  padding: 1rem;
}

.primary-prize-section .special-prize strong {
  font-size: 1.2rem;
  font-weight: bold;
}

.primary-prize-section .special-prize small {
  font-size: 0.8rem;
  color: #B8B8B8;
}

.primary-prize-section .special-prize .number {
  font-size: 1.5rem;
  font-weight: bold;
  color: #C1272D;
}

.primary-prize-section .special-prize .three-digit {
  margin-bottom: 10px;
}

.primary-prize-section .special-prize .three-digit .prize-desc {
  margin-bottom: 1rem;
}

.primary-prize-section .special-prize .three-digit .number {
  line-height: 1.2rem;
}

.primary-prize-section .special-prize .three-digit .number:first-child {
  text-align: right;
  border-right: 1px solid #C1272D;
}

.primary-prize-section .special-prize .two-digit .number {
  text-align: center;
  font-size: 2.5rem;
  font-weight: bold;
}

.primary-prize-section .special-prize .two-digit .prize-desc {
  margin-bottom: 0;
}

/* ## Lotto List  */
.lotto-list-section {
  margin-bottom: 20px;
}

.lotto-list-section h3 {
  font-size: 1.5rem;
  font-weight: bold;
}

.lotto-list-section p {
  font-size: 0.8rem;
  color: #B8B8B8;
  margin-bottom: 10px;
}

.lotto-list-section .grid-lotto {
  width: 100%;
  margin: 0;
}

.lotto-list-section .grid-lotto span {
  flex: 0 0 33.333333%;
  max-width: 33.333333%;
  border-right: 1px solid black;
  margin-bottom: 10px;
  font-size: 1.2rem;
  line-height: 1.5rem;
  font-weight: bold;
}

.lotto-list-section .grid-lotto span:last-child,
.lotto-list-section .grid-lotto span:nth-child(3n) {
  border: none;
}

/* ## Lotto result body's footer */
.lotto-result-footer .suggestion {
  text-align: center;
  color: #DEDEDE;
  font-size: 1.1rem;
}

/* ## Lotto Result Responsive  */
@media (min-width: 576px) {
  .primary-prize-section .first-prize .text {
    font-size: 3rem;
  }

  .primary-prize-section .first-prize .prize-desc {
    font-size: 0.8rem;
    color: #E0A2A2;
  }

  .primary-prize-section .first-prize .number {
    font-size: 5rem;
  }

  .primary-prize-section .special-prize .two-digit .prize-desc {
    margin-bottom: 1rem;
  }

  .primary-prize-section .special-prize .two-digit .number {
    text-align: center;
    font-size: 2.5rem;
    font-weight: bold;
    line-height: 1.2rem;
  }

  .lotto-list-section .grid-lotto span {
    flex: 0 0 20%;
    max-width: 20%;
  }

  .lotto-list-section .grid-lotto span:nth-child(3n) {
    border-right: 1px solid black;
  }

  .lotto-list-section .grid-lotto span:nth-child(5n) {
    border: none;
  }

  .neighbors-prize .grid-lotto span {
    flex: 0 0 auto;
    width: auto;
    max-width: 100%;
    font-size: 1.8rem;
    font-weight: bold;
  }
}

/*--------------------------------------------------------------
# Lotto History
--------------------------------------------------------------*/
.lotto-history .lotto-short {
  padding-top: 10px;
  padding-bottom: 10px;
  margin-bottom: 10px;
  background-color: #fff;
  box-shadow: 1px 1px 3px rgba(18, 18, 18, 0.25);
  border-radius: 8px;
  color: #404040;
}

.lotto-history .lotto-short .col-draw-date {
  padding-left: 10px;
  padding-right: 0;
}

.lotto-history .lotto-short .col-draw-date .draw-date {
  display: block;
  background-color: #C1272D;
  color: #fff;
  border-radius: 8px;
  padding: 10px 0;
}

.lotto-history .lotto-short .col-draw-date .draw-date small {
  font-size: 0.6rem;
  font-weight: lighter;
}
.lotto-history .lotto-short .col-draw-date .draw-date strong {
  font-size: 1.2rem;
}

.lotto-history .lotto-short .col-result {
  padding-right: 0;
}

.lotto-history .lotto-short .col-result .prize-title {
  min-width: 100px;
  display: inline-block;
}

.lotto-history .lotto-short .col-result .lotto-number {
  font-weight: bold;
}

/* ## Lotto History Responsive  */
@media (min-width: 576px) {
  .lotto-history .lotto-short .col-draw-date {
    flex: 0 0 80px;
    max-width: 80px;
  }

  .lotto-history .lotto-short .col-result {
    font-size: 1.2em;
    line-height: 1.8em;
  }

  .lotto-history .lotto-short .col-result .prize-title {
    min-width: 110px;
  }
}

/*--------------------------------------------------------------
# Lotto Sidebar
--------------------------------------------------------------*/
.lotto-sidebar h3 {
  font-size: 1.5em;
  font-weight: bold;
}

/* ## Lotto History Sidebar */
.lotto-history-sidebar {
  background-color: #F5F5F5;
  margin-left: -15px;
  margin-right: -15px;
  padding: 15px;
}

.lotto-history-sidebar .lotto-short {
  padding-top: 10px;
  padding-bottom: 10px;
  margin-bottom: 10px;
  background-color: #fff;
  box-shadow: 1px 1px 3px rgba(18, 18, 18, 0.25);
  border-radius: 8px;
  color: #404040;
}

.lotto-history-sidebar .lotto-short .col-draw-date {
  padding-left: 10px;
  padding-right: 0;
}

.lotto-history-sidebar .lotto-short .col-draw-date .draw-date {
  display: block;
  background-color: #C1272D;
  color: #fff;
  border-radius: 8px;
  padding: 10px 0;
}

.lotto-history-sidebar .lotto-short .col-draw-date .draw-date small {
  font-size: 0.6rem;
  font-weight: lighter;
}
.lotto-history-sidebar .lotto-short .col-draw-date .draw-date strong {
  font-size: 1.2rem;
}

.lotto-history-sidebar .lotto-short .col-result .prize-title {
  min-width: 100px;
  display: inline-block;
}

.lotto-history-sidebar .lotto-short .col-result .lotto-number {
  font-weight: bold;
}

.lotto-history-sidebar a.btn-lotto-viewmore {
  font-family: 'SukhumvitSet-Medium';
  width: 100%;
  text-align: center;
  color: #297AED;
  padding: 10px;
  border: 1px solid #297AED;
  box-sizing: border-box;
  border-radius: 8px;
}

/* ## Lotto Sidebar Responsive  */
@media (min-width: 768px) and (max-width: 991.98px) {
  .lotto-history-sidebar .lotto-short .col-draw-date {
    flex: 0 0 80px;
    max-width: 80px;
  }

  .lotto-history-sidebar .lotto-short .col-result {
    font-size: 1.2em;
    line-height: 1.8em;
  }

  .lotto-history-sidebar .lotto-short .col-result .prize-title {
    min-width: 110px;
  }
}

/*--------------------------------------------------------------
## Component
--------------------------------------------------------------*/
/* ## Lotto Checker  */
.lotto-checker {
  background-color: #F5F5F5;
  margin-left: -15px;
  margin-right: -15px;
  margin-bottom: 15px;
  padding: 15px;
}

.lotto-checker .lotto-checking-form label {
  font-size: 1.2rem;
}

.lotto-checker .lotto-checking-form input,
.lotto-checker .lotto-checking-form .lotto-select {
  border: 1px solid #B7B7B7;
  border-radius: 8px;
  padding: 0.7rem;
  margin-bottom: 5px;
  height: auto;
}

.lotto-checker .lotto-checking-form .lotto-select {
  margin-bottom: 0;
}

.lotto-checker .lotto-checking-form .lotto-select .select2-selection__arrow {
  height: 26px;
  position: absolute;
  top: calc(50% - 13px);
  right: 10px;
  width: 20px;
}

.lotto-checker .form-control.is-invalid {
  border-color: #dc3545;
}

.lotto-checker .lotto-checking-form input::placeholder,
.lotto-checker .lotto-checking-form select::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #DEDEDE;
}

.lotto-checker .lotto-checking-form input:-ms-input-placeholder,
.lotto-checker .lotto-checking-form select:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: #DEDEDE;
}

.lotto-checker .lotto-checking-form input::-ms-input-placeholder,
.lotto-checker .lotto-checking-form select::-ms-input-placeholder { /* Microsoft Edge */
  color: #DEDEDE;
}

.lotto-checker .lotto-checking-form .btn-checking-more {
  font-family: 'SukhumvitSet-Medium';
  width: 100%;
  background: #EEEEEE;
  border: 1px dashed #CCCCCC;
  border-radius: 8px;
  text-align: center;
  margin-bottom: 10px;
  padding: 10px;
}

.lotto-checker .lotto-checking-form .btn-checking-submit {
  font-family: 'SukhumvitSet-Medium';
  width: 100%;
  background: #C1272D;
  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  text-align: center;
  color: #FFFFFF;
  padding: 10px;
}

.lotto-checker .lotto-checking-form i {
  margin-right: 10px;
}

.lotto-checking-dropdown {
  border: 1px solid #B7B7B7;
  border-radius: 8px;
  box-shadow: 0px 1px 1px rgba(18, 18, 18, 0.25);
}

/* ## Lotto Result Popup  */
.swal2-header {
  padding: 0;
}

.lotto-result-popup .swal2-popup {
  width: auto;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

.lotto-result-popup .swal2-close:focus {
  border: none;
  outline: none;
}

.lotto-result-popup .swal2-title {
  margin: 0;
}

.lotto-result-popup .swal2-content p {
  padding: 0;
  margin: 0;
  line-height: 1;
}

.lotto-result-popup .swal2-content .lotto-drawdate {
  margin-bottom: 2rem;
}

.lotto-result-popup .swal2-content .row-reward-result {
  margin-top: 1rem;
}

.lotto-result-popup .swal2-popup .col-reward-result {
  margin-bottom: 2rem;
}

.lotto-result-popup .swal2-content strong {
  font-size: 2rem;
}

.lotto-result-popup .swal2-content small {
  font-size: 0.8rem;
}

.lotto-result-popup .swal2-footer{
  display: flex;
  flex-wrap: wrap;
  margin: 0;
}

.lotto-result-popup .swal2-footer .social-share {
  margin-bottom: 10px;
  flex-basis: 100%;
}

.lotto-result-popup .swal2-footer .social-share i {
  font-size: 1.2rem;
  padding-right: 0.5rem;
}

.lotto-result-popup .swal2-footer .social-share .button-social,
.lotto-result-popup .swal2-footer .social-share .button-clipboard {
  margin-right: 0.2rem;
  width: 35px;
  height: 35px;
  border-radius: 30px;
  display: inline-block;
}

.lotto-result-popup .swal2-footer .social-share .button-social a,
.lotto-result-popup .swal2-footer .social-share .button-clipboard a {
  border-radius: 3px;
  padding: 0.5rem 0rem 0.58rem 0.5rem;
  text-align: center;
  margin-bottom: 0.2rem;
  width: 100%;
  display: inline-block;
  color: #fefefe;
  text-decoration: none;
  font-size: 0.8rem;
  line-height: 1.4rem;
  vertical-align: top;
}

.lotto-result-popup .swal2-footer .social-share .button-facebook {
  background-color: #3b5998;
}

.lotto-result-popup .swal2-footer .social-share .button-twitter {
  background-color: #04aced;
}

.lotto-result-popup .swal2-footer .social-share .button-line {
  width: 43px;
  height: 35px;
  background-color: #11c115;
  position: relative;
}

.lotto-result-popup .swal2-footer .social-share .button-line a {
  padding: 0;
  margin-left: 0px;
  padding-top: 9px;
  height: 100%;
}

.lotto-result-popup .swal2-footer .social-share .button-line i {
  font-size: 56px;
  position: absolute;
  top: -10px;
  left: -3px;
}

.lotto-result-popup .swal2-footer .social-share .button-link a {
  color: #000;
  cursor: pointer;
}

.lotto-result-popup .swal2-footer .social-share .button-link i {
  font-size: 1.5rem;
}

.lotto-result-popup .swal2-footer a.view-more-result {
  text-decoration-line: underline;
  color: #297AED;
}

.lotto-result-loading {
  width: auto;
  border-radius: 50%;
}

.lotto-result-loading .swal2-loading {
  margin: 0;
}

@media (min-width: 576px) {
  .lotto-result-popup .swal2-popup {
    max-width: 540px;
  }
}

@media (min-width: 768px) {
  .lotto-result-popup .swal2-popup {
    max-width: 720px;
  }
}

@media (min-width: 992px) {
  .lotto-result-popup .swal2-popup {
    max-width: 960px;
  }
}

@media (min-width: 1200px) {
  .lotto-result-popup .swal2-popup {
    max-width: 1140px;
  }
  .lotto-result-popup .swal2-popup .col-reward-result {
    min-width: 200px;
  }
}