@import "bootstrap_style.css";

header.with-banner {
  min-height: 360px;
}

body {
  min-width: 360px;
}

th, td, pre {
  font-size: 1rem;
  font-family: "Sarabun", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  color: #333;
}

/* fix Bootstrap settings for Safari appearance */
.custom-select, .btn, a.btn
{
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}

/*
these are styles for many content in this website
including book content which should be synced with content-style.css at payutto.net
*/
section.body p { text-align: justify; text-indent: 3rem; }
section.body ol, section.body ul { margin-left: 3rem; padding-left: 2rem; }

section.body {
	font-size: 20px;
}
section.book-content h1 { text-align: center; }
section.book-content .footnote-separator { width: 50%; border-top: 2px solid gray; }
a.footnote-index {  }
a.footnote-link {  }
h2, h3 { margin-top: 0.75rem; }
h2 > h3 { margin-top: 0.25rem; }
ol, * ol, body#tinymce.mceContentBody ol { list-style: thai; }
h2 a, h3 a, h4 a, h5 a, h6 a { color: black; }
h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover { color: var(--primary); text-decoration: none; }
a { color: var(--primary); }
a:hover { color: var(--dark); text-decoration: none; }
.text-white a { color: inherit; }
.text-white a:hover { color: var(--light); }
header.with-banner h1, header.with-banner h2 { text-shadow: 0 0 0.5rem rgba(16, 16, 16, .75) }
header.with-banner h2, header.with-banner .h2 { font-size: 3.0rem; }

.content-h1, .content-h2 { padding-top: 0.25rem; }
.content-h2, .content-h3, .content-h4, .content-h5 { text-indent: -0.75rem; }
.content-h1 { padding-left: 0rem; font-size: 1.4rem; }
.content-h2 { padding-left: 2rem; font-size: 1.3rem; }
.content-h3 { padding-left: 4rem; }
.content-h4 { padding-left: 6rem; }
.content-h5 { padding-left: 9rem; }
/*.content-h1:before { content: '\29be'; margin-right: 0.25rem; }*/
.content-h2:before { content: '\2023'; margin-right: 0.25rem; }
.content-h3:before { content: '\2022'; margin-right: 0.25rem; }
.content-h4:before { content: '\25e6'; margin-right: 0.25rem; }
.content-h4:before { content: '\2043'; margin-right: 0.25rem; }

.dropdown-toggle::after { display: none; }
.dropdown-menu { margin-top: 0; }
.dropdown-item:hover, .dropdown-item:focus {
  background-color: rgba(255, 255, 255, 0.2);
}

#elevator-to-top {
  display: none; /* Hidden by default */
  position: fixed; /* Fixed/sticky position */
  bottom: 24px; /* Place the button at the bottom of the page */
  right: 100px; /* Place the button 100px from the right */
  z-index: 99; /* Make sure it does not overlap */
  border: none; /* Remove borders */
  outline: none; /* Remove outline */
  background-color: var(--primary); /* Set a background color */
  color: white; /* Text color */
  cursor: pointer; /* Add a mouse pointer on hover */
  padding: 15px; /* Some padding */
  border-radius: 10px; /* Rounded corners */
  font-size: 18px; /* Increase font size */
}

@media screen and (min-width: 768px) {
	#elevator-to-top:hover {
		background-color: var(--dark);
}