@font-face {
    font-family: "Sarabun";
    src: url('../fonts/Sarabun/Sarabun-Regular.eot');
    src: url('../fonts/Sarabun/Sarabun-Regular.eot') format('embedded-opentype'),
         url('../fonts/Sarabun/Sarabun-Regular.woff2') format('woff2'),
         url('../fonts/Sarabun/Sarabun-Regular.woff') format('woff'),
         url('../fonts/Sarabun/Sarabun-Regular.ttf') format('truetype');
    unicode-range: U+0E00–U+0E7F;
  }

@font-face {
font-family: "Noto Sans Thai";
src: url('../fonts/Noto_Sans_Thai/NotoSansThai-Regular.ttf');
src: url('../fonts/Noto_Sans_Thai/NotoSansThai-Regular.eot') format('embedded-opentype'),
        url('../fonts/Noto_Sans_Thai/NotoSansThai-Regular.woff2') format('woff2'),
        url('../fonts/Noto_Sans_Thai/NotoSansThai-Regular.woff') format('woff'),
        url('../fonts/Noto_Sans_Thai/NotoSansThai-Regular.ttf') format('truetype');
unicode-range: U+0E00–U+0E7F;
}
  
#main {
    position: relative;
    min-height: 100vh;
}

#footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 2.5rem; 
}

h1, h2, h3, h4, h5, h6, a, button, input, b, strong, span, nav, p, body {
    font-family: 'Roboto', 'Noto Sans Thai' !important;
    line-height: 1.75 !important; 
}

a {
    color: #0055a4;
}

a:hover {
    text-decoration: none;
}

.d-block {
    display: block;
}

.d-inline-block {
    display: inline-block;
}

.position-absolute {
    position: absolute;
}

.position-relative {
    position: relative;
}

.w-100 {
    width: 100%;
}

.position-relative img {
    max-width: 100%;
    height: auto;
    display: block;
}
        
.btn {
    padding: 10px 20px;
    color: #fff;
    text-decoration: none;
    border-radius: 4px;
    transition: background-color 0.3s;
}

.btn:hover {
    background-color: #0056b3;
}       

.btn-primary {
    background-color: #0055A4;
}

.btn-warning {
    background-color: #fff;
    color: #000;
}

.btn-danger {
    background-color: #EF4135;
}

.clickable {
    color: #0055A4;
    font-weight: normal;
}

h2 .clickable {
    font-weight: 700;
}

.black {
    color: #000;
    font-weight: bold;
}

.white {
    color: #fff !important;
    font-weight: bold;
}

.post-type-archive-glossary .sidebar-main,
.tax-chapter .sidebar-main,
.tax-group .sidebar-main,
.single-glossary .sidebar-main {
    border-right: 1px solid #ccc;
}

.post-type-archive-glossary #searchform,
.tax-chapter #searchform,
.tax-group #searchform,
.single-glossary #searchform {
    display: flex;
}

.post-type-archive-glossary #searchform input[type=text],
.tax-chapter #searchform input[type=text],
.tax-group #searchform input[type=text],
.single-glossary #searchform input[type=text] {
    background-color: transparent;
    border: 0;
    order: 2;
}

.search .search-form input[type=search] {
    background-color: transparent;
    border: 0;
    order: 2;
}

.post-type-archive-glossary #searchform input[type="text"]:focus,
.tax-chapter #searchform input[type="text"]:focus,
.tax-group #searchform input[type="text"]:focus,
.single-glossary #searchform input[type="text"]:focus {
    outline : none;
}

.search .search-form input[type="search"]:focus {
    outline : none;
}

.post-type-archive-glossary #searchsubmit,
.tax-chapter #searchsubmit,
.tax-group #searchsubmit,
.single-glossary #searchsubmit {
    background-color: transparent;
    order: 1;
    padding: 15px 15px 15px 0;
}

.post-type-archive-glossary .entry-content-wrapper,
.tax-chapter .entry-content-wrapper,
.tax-group .entry-content-wrapper,
.single-glossary .entry-content-wrapper {
    display: flex;
}

.post-type-archive-glossary .entry-title,
.tax-chapter .entry-title,
.tax-group .entry-title {
    font-size: inherit;
} 

.single-glossary .post-thumbnail-wrapper {
    width: 40%;
    float: right; /* Adjust the alignment as per your layout */
    margin: 0 0 20px 20px; /* Adjust margins as needed for spacing */
}

.single-glossary .entry-meta {
    color: initial;
    margin-bottom: 50px;
}

/* Add some basic styling to the quiz */
.matching-quiz form fieldset {
    display: flex;
    justify-content: space-between;
    max-width: 100%;
    margin: 0 auto;
    padding: 0; /* Reset padding for the fieldset */
    border: none; /* Remove border for the fieldset */
}

#quiz-4602.matching-quiz form fieldset,
#quiz-4661.matching-quiz form fieldset,
#quiz-4709.matching-quiz form fieldset {
    background-color: #fff;
    padding: 15px;
}

.left-column,
.right-column {
    flex: 1;
    border: 1px solid #ccc;
    padding: 10px;
}

.item {
    display: flex;
    align-items: center;
    padding: 5px;
    margin: 5px 0;
    cursor: pointer;
    width: 100%; /* Adjust width to ensure full width */
}

.submit-btn,
.submit-container {
    color: #fff;
    margin-top: 10px;
    text-align: right;
}

.submit-btn:hover,
.submit-btn:active {
    color: #fff;
}

.input-row,
.choice-row {
    display: flex;
    align-items: center;
}

/* Additional styling for input fields */
.input-row input[type="text"],
.choice-row input[type="text"] {
    border: none;
    border-bottom: 1px solid black;
    flex: 1;
    padding: 0;
    width: auto;
}

.single-quizes .entry-header .row {
    display: flex;
    align-items: center;
}

.single-quizes .entry-header .row h1.entry-title span {
   font-weight: bold;
}


.single-quizes .entry-meta {
    display: none;
}

/* Pagination Styles */
.pagination {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

.pagination a,
.pagination span {
    display: inline-block;
    padding: 10px 20px;
    margin: 0 5px;
    background-color: #0055a4;
    color: #fff;
    text-decoration: none;
    border-radius: 4px;
    transition: background-color 0.3s ease;
}

.pagination a:hover {
    background-color: #ef4135;
}

.pagination .current {
    background-color: #ef4135;
}


/* Style the labels as placeholders and add bottom border */
.wpcf7 label {
    display: block;
    font-weight: bold;
    margin-bottom: 5px;
}

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 textarea {
    width: 100%;
    padding: 10px;
    border: none;
    border-bottom: 1px solid #000; /* Add a bottom border */
    background-color: transparent; /* Make the background transparent */
}

/* Style the submit button */
.wpcf7 input[type="submit"] {
    background-color: #0055a4;
    color: #fff;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
}


.heading-row {
    display: flex;
    flex-direction: row;
}

/* WPForms fixes */
/* Initial field looks */
.wpforms-container input[type=date],
.wpforms-container input[type=datetime],
.wpforms-container input[type=datetime-local],
.wpforms-container input[type=email],
.wpforms-container input[type=month],
.wpforms-container input[type=number],
.wpforms-container input[type=password],
.wpforms-container input[type=range],
.wpforms-container input[type=search],
.wpforms-container input[type=tel],
.wpforms-container input[type=text],
.wpforms-container input[type=time],
.wpforms-container input[type=url],
.wpforms-container input[type=week],
.wpforms-container select,
.wpforms-container textarea {
    background: #fff;
    border-width: 0 0 1px 0;
    color: var(--ast-global-color-2);
    opacity: 0.5;
}
/* On focus */
.wpforms-container input:focus,
.wpforms-container select:focus,
.wpforms-container textarea:focus {
    outline: none;
    opacity: 1;
    border-color: var(--ast-global-color-0);
}
/* Don't allow resizing the Message box */
.wpforms-container textarea {
    resize: none;
}
/* Message box fixed height */
.wpforms-container .wpforms-field-textarea textarea.wpforms-field-medium {
    height: 136px;
}
/* Button size & font size */
.wpforms-container button {
    padding: 15px 34px;
    font-size: 15px;
}
/* WPForms done */
/* Footer 2 big columns on sides and 1 small one in the middle */
.ast-builder-grid-row-3-equal .ast-builder-grid-row {
    grid-template-columns: 3fr 1fr 3fr;
}

.ast-header-account-text {
	    background-color: #0055A4;
    padding: 0.25em 1em;
}
@media only screen and (min-width: 992px) {
.ast-mobile-popup-drawer .ast-mobile-popup-header {
	border-bottom: 1px solid #fff;
}
.ast-mobile-popup-drawer.active .menu-toggle-close {
	color: #fff;
}

.ast-header-account-wrap {
	padding: 5px 0;
}
}

.top-50px {
	top: -50px;
}

.ast-builder-menu-1 .menu-item > .menu-link {
	border-radius: 100px;
}

/* .single-quizes {
	background-color: #ffa459;
} */

.single-quizes .left-column {
	background-color: #fff;
}

.single-quizes .right-column {
	background-color: #acd7ff;
}

.single-quizes img.img-question {
	position: absolute;
  right: 0;
  top: 160px;
}

.single-quizes h2 {
	color: #334782;
	font-weight: bold;
}

table.tablepress {
   border-collapse: separate;
   border-spacing: 15px;
}

.tablepress>:where(thead,tfoot)>*>th {
	background-color: #00c77f;
	color: #334781;
  font-size: 30px;
  text-align: center;
}

.tablepress>:where(tbody)>.even>*, .tablepress>:where(tbody)>.odd>* {
	border-radius: 50px;
	border-top: 0;
	text-align: center;
  vertical-align: middle;
}

.tablepress>:where(tbody)>.even .column-2, .tablepress>:where(tbody)>.odd .column-2 {
	text-align: left;
	padding-left: 30px;
    padding-right: 30px;
}
.tablepress>:where(tbody)>.even>* {
  background-color: #ebe6dc;
}
.tablepress>:where(tbody)>.odd>* {
 background-color: #fefefe;
}

.tablepress>:where(thead,tfoot)>*>th.column-1 {
	border-right: 2px solid #ebe6dc;
}

.tablepress>:where(thead,tfoot)>*>th {
    background-color: transparent !important;
    color: #203061 !important;
    text-align: center !important;
}

.elementor-widget-post_grid .col-12 {
    margin-bottom: 30px
}
/* h5.post-grid-title.d-block {

} */

.elementor-widget-post_grid .item-background {
    background-color: #ff9934;
    border-radius: 40px;
    padding: 20px;
    /* margin-left: 15px; */
    width: 100%;
    height: 100%;
}

.elementor-widget-post_grid .taxonomy-term {
    background-color: #000;
    padding: 10px;
    display: inline-block;
    margin-top: 10px;
    border-radius: 40px;
    color: #fff;
    font-size: small;
}

.elementor-widget-post_grid img.question-ballon {
    position: absolute;
    top: -30px;
    right: -30px;
}

@media (max-width: 1200px) {
    .elementor-widget-post_grid img.question-ballon {
        right: 20px;
    }
}

/* #recordButton, #stopButton, #speakButton, #saveButton {
    background-color: transparent !important;
    border: unset;
    color: #000;
} */

.record, .stop, .speak, .save {
    background-color: transparent !important;
    border: unset;
    color: #000;
    padding: 10px 20px;
}

.record:link, .stop:link, .speak:link, .save:link,
.record:visited, .stop:visited, .speak:visited, .save:visited,
.record:hover, .stop:hover, .speak:hover, .save:hover,
.record:active, .stop:active, .speak:active, .save:active  {
    color: #0055A4;
}

.record-save-shrotcode .record, .record-save-shrotcode .stop, .record-save-shrotcode .speak, .record-save-shrotcode .save {
    color: #fff !important;
}

form.send-audio input[type="file"] {
    color: #fff;
}

img.man-orange {
    position: absolute;
    top: 25px;
    right: 25px;
}

#elementor-survey-form {
    background-color: #fff;
    padding: 15px;
}

.ast-separate-container {
    background-color: #ACD7FF;
}

.ast-separate-container.single-quizes {
    background-color: #ffa459;
}

.ast-separate-container .ast-article-single:not(.ast-related-post) {
    background-color: transparent
}

.ur-frontend-form {
    border: unset;
}

.ur-frontend-form .register {
    background-color: #fff;
    padding: 15px;
    border-radius: 4px;
}


.submit-btn {
    background-color: #06a552;
    border-radius: 40px;
}


.score-container table,
.student-scores table,
.survey-results table {
    background-color: #fff;
}

.page-links .page-link, .single .post-navigation a {
    background-color: #fff;
    line-height: 2.2 !important;
    font-size: 14px;
}

.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background-color: #fff;
}

/* Fix footer to the bottom of page */
#page {
    display: flex;
    flex-direction: column;
	min-height: 100vh;
}
.admin-bar #page{
	min-height: calc(100vh - 32px);
}
#page .site-content{
    flex-grow: 1;
}