/* handle cls large layout shift issue */

/* make the text hidden */
.searchSubmit, .menuToggle {
  text-indent: -9999px;
  overflow: hidden;
  /* display: block;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  position: absolute;
  top: 0;
  right: 0;
  background: url(../images/icon_search.png) no-repeat center;
  background-size: 20px; */

}

.whiteText {
  color:white !important;
}


.commentWrap {
  height: 100%;
  min-height: 60px;

}

.detailBlock, .mainContent {
  height: 100%;
  min-height: 500px;
  
}

.commonNavIcon {
  min-height: 143px;
}

.siteLogo {
  min-height: 155px;
}

.commentConfirmBtn{
  background: #F14F05 !important;
  color: white;
}

.commentNotice {
  font-size: 9pt;
  color: gray;
}

.filter-green{
  filter: invert(48%) sepia(79%) saturate(2476%) hue-rotate(86deg) brightness(118%) contrast(59%);
}

.detailBlock {
  height: 100%;
  min-height: 500px;
  /* display: none; */
}

.homeMainTitle {
  margin-bottom: 5px;
  padding-top: 5px;
}

.homeHeroMainTitle {
  position: relative;
  font-size: 24px;
  text-align: left;
  width: 100%;
  
}

/* .newsBlock .homeHeroMainTitle  a {
  color: #F14F05;
} */

.homeHeroMainTitle::after {
  content: '';
    display: block;
    margin: 0 auto;
    width: 100%;
    height: 5px;
    position: absolute;
    top: 100%;
    left: -99999px;
    right: -99999px;
    /* background: #F14F05; */
    background: linear-gradient(0deg, #F14F05 0%, #F14F05 50%, white 100%); 
}

.pageIcon img {
  width: 54px;
}

.pageIcon {
  margin-bottom: 0px;
}


.articleContent table {
  display: none;
}

.detailBlock .title {
  font-weight: bold;
}

.detailBlock .date {
  color: #FA7E17;
}

.site-logo {
  height: 44px;
}
.dateBlock.type7 .content {
  background: url(../images/icon_07_distribute_student_handbook_r2.png) no-repeat 40px 30px;
  border-left: 3px solid #0DCEF4; 
}

.dateBlock.type7 .content li::after {
    background: #0DCEF4; 
}

.dateBlock.type8 .content {
  background: url(../images/icon_08_distribute_certificate.png) no-repeat 40px 30px;
  border-left: 3px solid #0D97F8; 
}

.dateBlock.type8 .content li::after {
  background: #0D97F8; 
}

.newsBlock .imageDesktop {
  position: relative;
  margin-bottom: 45px;
}
.newsBlock .imageDesktop::after {
  content: '';
    display: block;
    margin: 0 auto;
    width: 93%;
    height: 20px;
    position: absolute;
    top: 100%;
    left: -99999px;
    right: -99999px;
    background: linear-gradient(90deg, #FBDD9E 0%, #FBDD9E 50%, white 100%); 
}

.newsBlock .imageDesktop {
  background-position: center center;
  background-size: cover;  
  height: 400px;  
}

.newsBlock.heroBlock .imageDesktop {
  background-position: center center;
  background-size: cover;
  height: 600px;
}

.articleContent .article_photo_background {
  background-position: center center;
  background-size: cover;  
  height: 125px;
}

.articleContent table td, th, tr {
  border-width: 1px;
}

.articleContent table.bw5 td, th, tr {
  border-width: 5px;
}

.articleContent table.bw4 td, th, tr {
  border-width: 4px;
}

.articleContent table.bw3 td, th, tr {
  border-width: 3px;
}
.articleContent table.bw2 td, th, tr {
  border-width: 2px;
}
.articleContent table.bw1 td, th, tr {
  border-width: 1px;
}

.articleContent table.bw0 td, th, tr {
  border-width: 0px;
}


.newsBlock .title {
  font-size: 24px;
  line-height: 28px; 
}

.newsBlock .keyword {
  font-size: 15px; 
}

.newsBlock.heroBlock {
  width: 800px;
  margin: 0 auto;
}


.pageTitle {
  color: #FA7E17;
}

.searchBlock input[type="text"] {
  border-color: #FA7E17;
}

#wrapper .menuToggle,
.searchSubmit {
  background-color: #FA7E17;
}

.searchBlock input[type="text"]:hover {
  border-color: #F14F05;
}

#wrapper .menuToggle:hover,
.searchSubmit:hover {
  background-color: #F14F05;
}


.viewCommentBtn:hover::before{
  background-color: #06A9B5;
}

.closeComment {
  color: #FA7E17 !important;
}
.closeComment:hover {
  color: #F14F05 !important;
}

.showComment {
  color: #FA7E17 !important;
}
.showComment:hover {
  color: #F14F05 !important;
}

.commentBtn::before{
  background-color: #FA7E17;
}

.viewCommentBtn, 
.commentBtn {
  background-color: #FCF8D9;
}



.commentBtn:hover::before{
  background-color: #F14F05;
}


.viewCommentBtn:hover, 
.commentBtn:hover {
  background-color: #F4EBBA;
}
.newsBlock .newsDate .date {
  background: #FA7E17;
}

.replyBlock .name {
  font-weight: bold;
}

.newsBlock .newsDate .year {
  font-weight: bold;
  font-size: 12px;
}

.newsBlock .newsDate .date span, .date label  {
  font-size: 22px;
}

.newsBlock .newsDate .date  {
  font-size: 16px;
  font-weight: bold;
  padding-top: 8px;
  padding-bottom: 4px;

}

.commentBodyTextarea {
  height: 160px !important;
}
.articleContent img {
  max-width: 100%;
  height: auto !important;
}

label.error, span.error {
  color: #dc3545;
}

.bg-warning {
  background-color: #FA7E17 !important;
}
.btn-warning {
  background-color: #FBDD9E;
  border-color: #FBDD9E;
}

div.newsBlock a {
  color: #000000;
}

.commentBlock {
  color: #000000;
}

.imageTitle {
  color: #000000;
}

#footer {
  background-size:     cover;                      /* <------ */
  background-repeat:   no-repeat;
  background-position-y: bottom;
  /* padding: 0px; */
}

.pagination .page-item.disabled .page-link, 
.pagination .page-item.disabled:hover .page-link {
  border: 1px solid #dee2e6; 
} 

/* .newsBlock .image img.ignoreImageTrick {
  height: 375px;   
} */
@media (max-width: 1200px) {
  .newsBlock .imageDesktop {
    background-position: center center;
    background-size: cover;  
    height: 300px;  
  }
  
  .newsBlock.heroBlock .imageDesktop {
    background-position: center center;
    background-size: cover;
    height: 500px;
  }

}

@media (max-width: 980px) {

  .newsBlock .imageDesktop {
    background-position: center center;
    background-size: cover;  
    height: 300px;  
  }
  
  .newsBlock.heroBlock .imageDesktop {
    background-position: center center;
    background-size: cover;
    height: 500px;
  }


  .newsBlock .title {
    font-size: 17px;
    line-height: 22px;
  }

  .newsBlock.heroBlock {
    width: 100%;
  }  

  .newsBlock .keyword {
    font-size: 13px;
  }


  .newsBlock .image {
    margin-bottom: 45px;

    /* CSS Grid or Flexbox: */
    display: grid; /* or flex */
    place-items: center;
    width: 100%;
    height: 0;
    padding-bottom: 75%; /* Adjust the percentage to match the desired aspect ratio */
  }

  .newsBlock .image img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
  }

  .commonNavIcon {
    min-height: 0px;
  }

  .siteLogo {

    min-height: 150px;

  }

  .siteLogo img {
    max-width: 70%;
    
  }

  #footer {
    
    background-size: contain;

    padding: 30px 0 5px;
    
  }
}

@media (max-width: 415px) {
  /* .newsBlock .image img.ignoreImageTrick {
    height: 100%;   
  } */

  #footer {
    background: url(../images/footer_bg_m.png) no-repeat center;
    background-size: contain;
    padding: 50px 0 5px;
  }

  .siteLogo {
    min-height: 110px;
  }

  .commonNavIcon {
    min-height: 0px;
  }

  .siteLogo img {
    max-width: 60%;
  }

  .mainTitle {
    font-size: 24px;
  }
}