#floatingSidebar {
    position: fixed;
    right: 0px ;
    top: 73%;
    z-index: 10;
    width: calc(4vh - 1px);
    opacity: 85%;
}


#icon {
   padding: 0px;
}

#iconreal{
    object-fit: contain;
    width: 4vh; /* limit the width of the icon */
    height: 17vh; /* limit the height of the icon */
    filter: drop-shadow(-1px 1px 3px rgb(49, 53, 58));
}


/* use keyframes to create a bounce animation */
@keyframes bounce {
  0% {
    transform: translateY(0);
  }
  25% {
    transform: translateY(-10px);
  }
  50% {
    transform: translateY(0px);
  }
  75% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0);
  }
}

/* add a class to apply the animation */
.bounce {
  animation: bounce 0.4s;
}


#logotitle{
  object-fit: contain; 
  height: 8vmax; 
  filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.8));
}

.h2border{
  padding-left: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid white;
  border-left:0.5rem solid white ;
}


.container{
  max-width: 800px;
  overflow-x: auto;
}

.table-responsive {
  width: 100%;
  white-space: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 575.98px) {
  .table-responsive-sm {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}
@media (max-width: 767.98px) {
  .table-responsive-md {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}
@media (max-width: 991.98px) {
  .table-responsive-lg {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}
@media (max-width: 1199.98px) {
  .table-responsive-xl {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}
@media (max-width: 1399.98px) {
  .table-responsive-xxl {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

#datatable{
  border-collapse: collapse;
  width: 100%;
  display: block;
  white-space: nowrap;
}

.drtable{
  text-align: center; 
  vertical-align: middle !important; 
}


.centerfather{
  display: flex;
  /* 水平置中 */
  justify-content: center;    
  /* 垂直置中 */
  align-items: center; 
}

.pureimgshow{
  border-radius: 0.5rem; 
  max-width:600px;
}

/* 組件化因main.scss把inner寫在wrapper後星號後inner的關係，這裡的footer樣式不會生效，所以客製化補充 */
footer > .inner{
  padding: 4em 0 2em 0;
  margin: 0 auto;
  max-width: 65em;
  width: calc(100% - 6em);
}
@media screen and (max-width: 736px) {
  footer > .inner {
    padding: 3em 0 1em 0;
    width: calc(100% - 3em);
  }
}