@import url("https://fonts.googleapis.com/css2?family=Sarabun:ital@0;1&display=swap");
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css");

/* Variables */
:root{
  --primary-color: #047aed;
}

/* 1. Use a more intuitive box-sizing model */
*, *::before, *::after {
  box-sizing: border-box;
}

/* 2. Remove default margins so we can control them */
* {
  margin: 0;
  padding: 0;
}

/* 3. Improve media defaults */
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

/* 4. Remove built-in form typography styles */
input, button, textarea, select {
  font: inherit;
}

/* 5. Avoid text overflows */
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

/* 6. base_style   */

body {
  font-family: 'Sarabun', sans-serif;
  color:#333;
  line-height: 1.6;
}

ul {
    list-style-type: none;
}

a{
    color:blue;
}

a:hover{
    color:red;
}

h1, h2, h3 {
    font-weight: 400;
    line-height: 1.2;
}

h1 {
    font-size: 3em;
}

h2 {
    font-size: 2em;
}

h3 {
    font-size: 1.5em;
}

p {
    margin:10px 0;
}

img {
  width:100%;
}

i{
  font-size: 3em;
}

label{
  display:block;
  font-weight:bold;
  margin-top:10px
}

input, select{
  border:none;
  display:block;
  padding: 5px;
}

input:not(.btn),select{
  width:100%;
}

.btn {
  color: white;
  background-color: #4CAF50;
  border-radius: 5px;
  padding: 5px 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  margin: 4px 2px;
}

a.btn:hover{
  text-decoration: none;
  color: black;
}

.btn--red{
  background-color:red;
}

.btn--yellow{
  color: black;
  background-color:#ffc107;
}

.btn--disabled {
  pointer-events: none;
  cursor: default;
  opacity: 0.5;
}

/* 7. Utilities */
.container{
  max-width: 1100px;
  margin: 0 auto;
  overflow: auto;
  background-color:#ebebeb ;
}

.flex_2column{
  display:flex;
  justify-content: space-between;
}

.grid{
  display: grid;
  grid-gap:10px;
  justify-content: space-evenly;
}

.grid.two_col{
  grid-template-columns: 45% 45%;
}

.grid.three_col{
  grid-template-columns: 30% 30% 30%;
}

.grid.four_col{
  grid-template-columns: 20% 20% 20% 20%;
}

.grid div{
  text-align:center;  
}


.normal_padding{
  padding:10px 10px 10px 10px;
}

.bg_red{
  background-color: #ebb9b9;
}

.bg_yellow{
  background-color:#e4d693;
}

.bg_green{
  background-color:#469469;
}

.border_bottom{
  border-bottom: 1px solid black;
}

.border_top{
  border-top: 1px solid black;
}

.bold{
  font-weight: bold;
}

/* header */
.header{
  padding:10px 10px 10px 10px;
  background-color:#0c5c30;
}

.header h1{
  color:white;
  padding: 0 0 0 10px;
  margin:0;
}

.header h2{
  color:white;
  padding: 0 0 0 10px;
  margin:0;
}

.header img{
  margin-top: 20px 0 10px 0;
}

/* navbar */
.navbar__top{
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #333;
  color:white;
}

.navbar__top a {
  color:white;
  text-decoration: none;
  font-size: 1.5em;
}

.navbar__body{
  display:none;
  font-size: 1.25em;
  background-color: #333;
  color:white;
  margin-top:1px;
}

.navbar__body a{
  color:white;
  text-decoration: none;
}

.navbar__body a:hover{
  color:red;
}

/* breadcrumb */
.breadcrumb{
  padding:10px 10px 0 10px;
}
.breadcrumb a{
  color:blue;
}
.breadcrumb a:hover{
  color:red;
}

/* card */
.card__header {
  color:white;
  background-color: black;
}

.card__header body{
  color:white;
  background-color: black;
}

.card__form__error{
  margin-top: 3px;
  padding:3px 5px;
}

/* pagination */
.pagination{
  display:flex;
}

.pagination li{
  display:block;
  padding:5px 10px;
  background-color:white;
  border: 1px solid black;
}

.pagination .active {
  background-color:black;
  color:white;
}

.pagination li a{
  text-decoration: none;
}

/* footer */
.footer{
  background-color: black;
  color:white;
  text-align: right;
}