@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@400;700&display=swap');

* {
  font-family: 'Kanit', sans-serif;
}
body {
    display: block;
    margin: 10px;
    overflow-x: hidden;
  }
  audio {
      width: 100px;
      height: 25px;
      
  }
  
  audio::-webkit-media-controls-panel {
      -webkit-justify-content: center;
      height: 25px;
  }
  
  /* Removes the timeline */
  audio::-webkit-media-controls-timeline {
      display: none !important;
  }
  
  /* Removes the time stamp */
  audio::-webkit-media-controls-current-time-display {
      display: none;
  }
  
  audio::-webkit-media-controls-time-remaining-display {
      display: none;
  }
  
  audio::-webkit-media-controls-toggle-closed-captions-button {
      display: none;
  }


.bg-blur {
    position: fixed;
    left: 0;
    right: 0;
    z-index: -1;
    display: block;
    margin-top: 0px;
    background-image: url('../images/bagr.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 100%;
    min-width: 100%;
    -webkit-filter: blur(20px);
    -moz-filter: blur(20px);
    -o-filter: blur(20px);
    -ms-filter: blur(20px);
    filter: blur(20px);
}

h6 span{
    display: inline-block;
  }

audio{
    max-height: 100%;
    max-width: 100%;
    margin: auto;
    object-fit: contain;
}

.bg-pp{
  background-color: #8960BE !important;
}

.bg-headpp{
  background-color: #6300C4 !important;
}

.bg-ppbody{
  background-color: #EEE9F3 !important;
}

.btn-pplight{
  background-color: #EEE9F3 !important;
}

@media only screen and (max-width: 820px) and (min-width: 600px) {
  .fs {
    font-size: x-large;
  }
}

@media only screen and (max-width: 599px) and (min-width: 300px) {
  .fs {
    font-size: large;
  }
}

.scroll-top {
  width: 75px;
  height: 75px;
  position: fixed;
  bottom: 25px;
  left: 20px;
  display: none;
}
.scroll-top i {
  display: inline-block;
  color: #fff;
}
.navbar-brand>img {
  padding-top: 11px;
  width: 130px;
  margin-left: 60px;
}
.navbar-brand {
  height: auto;
  margin: 0;
  padding: 0;
  margin-right: 20px;
}
.navbar {
  background-color: #000;
}
.navbar-default .navbar-nav > .active > a {
  padding: 8px 19px 9px !important;
}
.navbar-nav > li.active {
  padding: 8px 0 9px 0;
}
.navbar-right {
  padding-top: 0;
}
.navbar-default .navbar-nav > li > a::after {
  background-color: transparent;
  border-bottom: 3px solid #d2282e;
}
.navbar-default .navbar-nav>li {
  display: inline-block;
  text-align: center;
  float: none;
}
.navbar-default .navbar-nav>li>a {
  color: #fff;
}
.navbar-default .navbar-nav>li>a:hover {
  color: #fff;
  background-color: #0392CC;
}

nav{
  width: 100%;
  /* height: fit-content; */
  background-color: #6B679D;
}

.bg {
  /* background: url('../images/licmu.mp4'); */
  /* background-image: url('https://www.canva.com/design/DAF6rJsYwH4/view?embed'); */
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  height: 100vh;
  position: fixed;
  width: 100%;
}

input[type="date"]::-webkit-calendar-picker-indicator {
  background: transparent;
  bottom: 0;
  color: transparent;
  cursor: pointer;
  height: auto;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  width: auto;
}

#courseTable {
  width: 100% !important;
  border-collapse: collapse;
  font-size: 14px;
}

#courseTable th {
  background-color: #2c3e50;
  color: white;
  text-align: center;
}

#courseTable td {
  padding: 8px;
  vertical-align: middle;
}

/* ปรับ pagination */
.dataTables_wrapper .dataTables_paginate .paginate_button {
  padding: 5px 12px;
  margin: 2px;
  border-radius: 6px;
  border: 1px solid #ccc;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
  background: #3498db;
  color: white !important;
  border: 1px solid #3498db;
}

.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter {
  margin: 10px 0;
}