/* 產品 filter 按鈕 */

.filter-kind {
    margin: 5px 10px 15px 0px;
}

.filter-kind .filter-name {
    font-size: 16px;
}

.filter-kind .filter-status {
    height: 36px;
}

/* 表格 */

.table {
    border-collapse: separate;
    border-spacing: 5px;
}

.table th {
    background: #edf0d5;
    border: 1px solid #ddd;
    width: 25%;
}

.table td {
    border: 1px solid #ddd;
    height: 200px;
}

.table ul {
    padding-left: 25px;
}

.table li {
    margin-bottom: 10px;
}

/* li a  */

.table td a {
    text-decoration: none;
}

/* more */

.more {
    text-align: right;
}

.more:hover {
    animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    perspective: 1000px;
}

@keyframes shake {
    10%, 90% {
        transform: translate3d(-1px, 0, 0);
    }

    20%, 80% {
        transform: translate3d(2px, 0, 0);
    }

    30%, 50%, 70% {
        transform: translate3d(-3px, 0, 0);
    }

    40%, 60% {
        transform: translate3d(3px, 0, 0);
    }
}

/* 查無資料 */

.no-result {
    color: #bdbdbd;
}


/* jtable */

.jtable-column-header {
    border-top: 1px solid #bebebe;
}

.jtable-data-row a {
    text-decoration: none;
}

/*
* These styles creates the underlining of link
*/

.jtable-data-row a {
    position: relative;
    z-index: 1;

    /*padding-left: 10px;*/
    padding-bottom: 5px;
    /*padding-right: 10px;*/
}

.jtable-data-row a::before{
    content: "";
    width: 0;
    height: 10%;

    position: absolute;
    left: 0;
    bottom: 2px;
    z-index: -1;
}

.jtable-data-row a:hover::before{
    width: 100%;
    background: #23527c;
}

/*
* animation styles
*/

.jtable-data-row a::before{
    transition: width .1s ease-out;
}

.jtable-data-row a:hover::before{
    transition-duration: .15s;
}

.jtable-data-row {
    line-height: 30px;
}

/* detail modal */

#detail_modal .modal-body {
    height: calc(100% - 120px);
    overflow-y: auto;
}

#detail_modal .modal-lg {
    width: 95%;
}

/* detail modal content */

#detail_modal h2 {
    background: #edf0d5;
    padding: 5px;
    margin-bottom: 10px;
    margin-top: 0px;
}

#detail_modal .detail-content {
    padding: 10px;
}

#detail_modal .detail-date_time {
    color: #989898;
}

#detail_modal .detail-clarify {
    line-height: 30px;
    font-size: 18px;
    margin-top: 20px;
}

#detail_modal .detail-sketch {
    text-align: center;
}

#detail_modal .detail-sketch img {
    width: 200px;
    height: 200px;
}

.detail-images {
    margin-top: 20px;
}

.detail-images img, .detail-images video {
    width: 100%;
    border: 1px solid #d2cfcf;
    padding: 2px;
    border-radius: 3px;
}

/* 放大檢視效果 */

.detail-images a {
    position: relative;
}

.detail-images .hover-text {
  transition: .3s ease;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
  background: gray;
  color: white;
  padding: 10px;
  box-shadow: 0 0 15px #999;
}

.detail-images a:hover img {
  opacity: 0.3;
}

.detail-images a:hover .hover-text {
  opacity: 1;
}

#large_image_modal .close {
    font-size: 38px;
    border-radius: 10px;
}

#large_image_modal {
    background: #2928285c;
}

#large_image_modal #large_content {
    text-align: center;
}

label {
    position: relative;
    z-index: 3;
}

.input-group {
    top: -13px;
}