@font-face { 
/*
  font-family: 'ekkamai';
  src: url('../font/EkkamaiNew-Regular.ttf') format('truetype');
*/
  font-family: 'NotoSansThai';
  src: url('../font/NotoSansThai-Regular.ttf');
/*
  src: url('../font/NotoSansThai-Light.ttf');
*/
  font-weight: normal;
  font-style: normal;
}

body { 
  display: flex;
  flex-direction: column;
  padding-top: 5rem;
/*
  font-family: ekkamai;
*/
  font-family: NotoSansThai;
}

.starter-template {
  padding: 3rem 1.5rem;
  text-align: center;
}

.text-data {
  font-size: 16px;
/*
  font-family: DB ThaiTextFixed;
*/
  font-family: NotoSansThai;
}

.thumbnail {
  position: relative;
  width: 100%;
  height: 225px;
  overflow: hidden;
}
.thumbnail img {
  position: absolute;
  left: 50%;
  top: 50%;
  height: 100%;
  width: auto;
  -webkit-transform: translate(-50%,-50%);
      -ms-transform: translate(-50%,-50%);
          transform: translate(-50%,-50%);
}
.thumbnail img.portrait {
  width: 100%;
  height: auto;
}

.page-link {
  color: #54B4D3;
}

.page-item.active .page-link {
  z-index: 3;
  color: #fff;
  background-color: #54B4D3;
  border-color: #54B4D3;
}

.div-hover div:hover{background-color:#eeeeee;}

/*-- sidebar --*/
#sidebar {
  width: 200px;
/*  position: fixed; */
  position: absolute;
  top: 56px; /* Height of the navbar */
  left: 0;
/*  height: calc(100% - 56px);  */
  height: calc(100% + 30px);

/* background: #343a40; */
  padding-top: 1rem;
  z-index: 4;
}

#sidebar .nav-link {
/* color: #fff; */
  color: #000;
}

#sidebar .nav-link:hover {
  color: #999;
}

#sidebar .nav-link.active {
  color: #0dcaf0;
}

#main-content {
  margin-left: 200px;
  padding: 1rem;
/* margin-top: 56px; */ /* Height of the navbar */
/* width: 100%; */
}

@media (max-width: 768px) {
  #sidebar {
    left: -250px;
    transition: left 0.3s;
  }
  #sidebar.active {
    left: 0;
  }
  #main-content {
    margin-left: 0;
  }
}
/*-- //sidebar --*/