@charset "utf-8";

@import "../initial";
.universal-table-index h3 {
    padding: 0;
}
.universal-form-inline{
  position: relative;
}
.universal-table-index tbody{
  width:100% ;
}
.universal-table-show{
  .view_count > i:before{
    content: "\f019"!important;
    margin: 0.5em;
    padding: 0.5em;
    border-radius: 1em;
  }
}
.universal-table-index{
  .view_count > i:before{
    content: "\f019"!important;
    margin: 0.5em;
    padding: 0.5em;
    border-radius: 1em;
  }
}
.universal-table-index{
  tr{
      background-color: #fff!important;
  }
}
.searchbox2 .row > div{
  width: 100%!important;
}

.universal-table-index caption {
  width: 100%;
  position: relative;
  @media(max-width:$screen-xs){

  }
}
.universal-btn{
  position: relative;
  right: 0;
}
.universal-form-inline .searchbtn.ken-click {
   padding-top: 0.5em;
   padding-bottom: 0.5em;
}
.universal-table-index h3 {
  @extend .unity-title;
  float: left;
  margin: 0;
}
.btn .caret{
  color: #858585;
}
.universal-table-show{
  @media(max-width: $screen-xs){
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    tr{
      display: flex;
      flex-wrap: wrap;
      width: 100%;
      border: 1px solid #ccc;
      margin-bottom: 10px;
    }
    td{
      width:100%!important;
    }
    th{
      width: 100%!important;
    }
  }
}
.universal-table-index{
  @media(max-width: $screen-xs){
      display: flex;
      flex-wrap: wrap;
      width: 100%;
      border:0!important;
      tr{
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        border: 1px solid #ccc;
        margin-bottom: 10px;
      }
      td{
        width: 100%;
      }
      th{
        width: 100%;
      }
  }
}
.theadsearch .universal-th-icon, .theadsearch .universal-dropdown {
    display: none !important;
}
.searchbtn{
  cursor: pointer;
  padding: 0;
  position: absolute;
  right:0;
  z-index:2;
  @media(max-width: $screen-xs){
    margin-top: 0.5em;
    right:0;
    top:0;
    position: relative;
    float: right;
    margin-bottom: 0.5em;
  }
  .searchbtn2, .universal-btn {
    line-height: 2em;
    padding: 2px 15px 2px 15px;
    font-size: 1em;
    border-radius: 5px;
    color:#fff;
    font-weight: 400;
    letter-spacing: 0;
    margin-left: 1em;
    

    i {
      color: #fff;
    }

    &:hover{
      color: #fff;
      i {
        color: #fff;
      }
    }
  }
  .searchbtn2{
    background-position: 10px center;
    display: inline-block;
    background-color: $theme-color-second;
    text-align: center;
    border: 0;
    &:hover{
      background-color:$theme-color-third;
    }
  }
  i{
    color: #fff;
  }
}
.theadsearch2{
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  align-items: center;
  .submit-btn-wrap{
    padding: 0;
  }

  .dropdown-menu {
    right: 0;
    left: unset;
    position: relative;
    padding: 0 5px;
    background-color: transparent;
    box-shadow: none;
    border: 0;
    display: block;
  }

  .row {
    display: flex;
    flex-wrap: wrap;
    padding: 0;
  }

  .row > div {
    border-radius: 5px;
    behavior: url("/assets/ie_support/PIE2/PIE.htc");
    border: 1px solid #CCC;
    padding: 0.5em 0.9375em;
    font-weight: bold;
    @media (max-width: 991px) {
      margin-bottom: 5px;
    }
  }

  .row > div {
    // width: 100%;
  }

  @media (max-width: 991px) {
    .submit-btn-wrap {
      padding-right: 0;
    }
  }

  .universal-th-text,.universal-th-icon{
      color: #333!important;
  }

  @media (min-width: 769px) {
    .form-group {
      width: 100%;
      .form-control {
        width: 100%;
      }
    }
  }
}
.searchbox{
  display: none;
  margin-top: 1em;
  z-index: 1;
  position: relative;
  width: 100%;
  clear: both;
      .fa-search{
        color: #333!important;
      }
}
.universal-dropdown{
  float: right;
}
.theadsearch{
  width: 100%;
}
.column_entry_files{
    padding-left:0;
}
.column_entry_file{
    list-style: none;
}
// .ken-click2{
//   margin-top:-3em;
//   -webkit-transition: .3s all ease;
//   -o-transition: .3s all ease;
//   transition: .3s all ease;
// }
.submit-btn-wrap{
  @media(min-width:769px){
    margin-top: 3em;
  }
}
.universal-table-index.table td{
      padding: 15px 10px!important;
}
.universal-table-index1{
      table-layout: auto !important;
  .col-ken{
    @media(min-width: $screen-xs){
      width: auto!important;
    }
  }
  @media(min-width: $screen-xs){
    .universal-th-icon{
      padding:5px!important;
    }
    .universal-dropdown{
      .btn{
        padding: 0.3125em!important;
      }
    }
    .universal-th-text{
      display: block!important;
      clear: both;
    }
  }
}
.universal-table-index3{
      table-layout: auto !important;
  .col-ken{
    @media(min-width: $screen-xs){
        width: auto!important;
    }

  }
  @media(min-width: $screen-xs){
    .universal-th-icon{
      padding:5px!important;
    }
    .universal-dropdown{
      .btn{
        padding: 0.3125em!important;
      }
    }
    .universal-th-text{
      display: block!important;
      clear: both;
    }
  }
}
.universal-table-index2{
      table-layout: auto !important;
  .col-ken{
    @media(min-width: $screen-xs){
        width: auto!important;
    }

  }
  @media(min-width: $screen-xs){
    .universal-th-icon{
      padding:5px!important;
    }
    .universal-dropdown{
      .btn{
        padding: 0.3125em!important;
      }
    }
    .universal-th-text{
      display: block!important;
      clear: both;
    }
  }
}
.universal-table-index4{
      table-layout: auto !important;
  .col-ken{
    @media(min-width: $screen-xs){
        width: auto!important;
    }

  }
  @media(min-width: $screen-xs){
    .universal-th-icon{
      padding:5px!important;
    }
    .universal-dropdown{
      .btn{
        padding: 0.3125em!important;
      }
    }
    .universal-th-text{
      display: block!important;
      clear: both;
    }
  }
}
@media (max-width: 768px) {
  #hashtag-wordcloud {
    width: 800px!important;
    height: 500px!important;
  }

  /* 讓外層容器可以左右滑動 */
  #hashtag-wordcloud-wrapper {
    overflow-x: auto;
    width: 100%;
  }
}
#hashtag-wordcloud{
      margin-top: 1.5em;
      position: relative;
      margin:1.5em auto; 
      width: 80%;
      height:400px;  
      overflow: hidden;
  a{   
    border-radius: 0.5em;
    padding: 0.2em;
    &:hover{
      -webkit-transform: translateY(-6px);
    -ms-transform: translateY(-6px);
    transform: translateY(-6px);
    box-shadow: 0 12px 24px #0000004d, 0 10px 10px #00000033;
    -webkit-box-shadow: 0 12px 24px #0000004d, 0 10px 10px #00000033;
        -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
    filter: brightness(0.4) saturate(1.3);
    transform: scale(1.1);
    }
  }
}

img.image-preview {
    max-width: 100px;
}
.universal-form-inline5{
  .tdken{
    @media(min-width:820px){
      width: calc(50% - 1em) !important;
    }
    @media(min-width:768px)and(max-width:820px){
      width: calc(50% - 1em) !important;
    }
    &:hover{
      -webkit-transform: translateY(-6px);
      -ms-transform: translateY(-6px);
      transform: translateY(-6px);
      box-shadow: 0 12px 24px #0000004d, 0 10px 10px #00000033;
      -webkit-box-shadow: 0 12px 24px #0000004d, 0 10px 10px #00000033;
      -webkit-transition: all .3sease;
      -moz-transition: all .3s ease;
      -ms-transition: all .3s ease;
      -o-transition: all .3s ease;
      transition: all .3sease;
      .fa-thumbtack{
        transform: scale(1.1) rotate(45deg);
      }
      i{
        color:$theme-color-second;
        transform: scale(1.1) ;
        -webkit-transition: all .3sease;
        -moz-transition: all .3s ease;
        -ms-transition: all .3s ease;
        -o-transition: all .3s ease;
        transition: all .3sease;
      }
    }
  }
  .universal-table-index{
    border:0;
  }
  .theadsearch{
    display: none;
  }
  .universal-th-text{
    padding: 0;
  }
  .image-preview {
    width: 80px;
  }
  td,th{
    width: 100%!important;
  }
  .kentbody{
    display: flex;
    flex-wrap: wrap;
  }
  tbody{
    // display: flex;
    // flex-wrap: wrap;
    justify-content: center;
    tr{
      padding:18px 20px 25px 20px;
      background-color: #fff;
      box-shadow: 0 2px 8px 0px #999;
      border-radius:30px;
      margin: 0.5em;
      position: relative;
      min-height: 12em;
    }
    td{
      border:0!important;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      padding-bottom: 0 !important;
      color: #0757A0;
      font-size: 1.4rem;
      a{
        color: #2D9349;
        font-size:medium;
      }
      &:nth-child(2){
        font-size: 1.5rem;
        color: #333;
        font-weight: 500;
        margin-bottom: 0.5em;
      }
      &:nth-child(5){
        color: #00F;
      }
    }
  }
  .fa-thumbtack{
    transform: rotate(45deg);position: absolute;right: 2em;
  }
}
.universal-form-inline6{
  .tdken{
    @media(min-width:820px){
      width: calc(33.3% - 1em) !important;
    }
    @media(min-width:768px)and(max-width:820px){
      width: calc(50% - 1em) !important;
    }
    &:hover{
      -webkit-transform: translateY(-6px);
      -ms-transform: translateY(-6px);
      transform: translateY(-6px);
      box-shadow: 0 12px 24px #0000004d, 0 10px 10px #00000033;
      -webkit-box-shadow: 0 12px 24px #0000004d, 0 10px 10px #00000033;
      -webkit-transition: all .3sease;
      -moz-transition: all .3s ease;
      -ms-transition: all .3s ease;
      -o-transition: all .3s ease;
      transition: all .3sease;
      .fa-thumbtack{
        transform: scale(1.1) rotate(45deg);
      }
      i{
        color:$theme-color-second;
        transform: scale(1.1) ;
        -webkit-transition: all .3sease;
        -moz-transition: all .3s ease;
        -ms-transition: all .3s ease;
        -o-transition: all .3s ease;
        transition: all .3sease;
      }
    }
  }
  .universal-table-index{
    border:0;
  }
  .theadsearch{
    display: none;
  }
  .universal-th-text{
    padding: 0;
  }
  .image-preview {
    width: 80px;
  }
  td,th{
    width: 100%!important;
  }
  .kentbody{
    display: flex;
    flex-wrap: wrap;
  }
  tbody{
    // display: flex;
    // flex-wrap: wrap;
    justify-content: center;
    tr{
      padding:18px 20px 25px 20px;
      background-color: #fff;
      box-shadow: 0 2px 8px 0px #999;
      border-radius:30px;
      margin: 0.5em;
      position: relative;
      min-height: 12em;
    }
    td{
      border:0!important;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      padding-bottom: 0 !important;
      color: #0757A0;
      font-size: 1.4rem;
      a{
        color: #2D9349;
        font-size:medium;
      }
      &:nth-child(2){
        font-size: 1.5rem;
        color: #333;
        font-weight: 500;
        margin-bottom: 0.5em;
      }
      &:nth-child(5){
        color: #00F;
      }
    }
  }
  .fa-thumbtack{
    transform: rotate(45deg);position: absolute;right: 2em;
  }
}

// .universal-table-show {

//   border-collapse: collapse;
//   .table-content{
//     table{
//       border: 0;
//     }
//     tbody > tr:nth-of-type(even) {
//         background-color: #cccccc30;
//     }
//     td{
//       border-bottom: 1px #333 solid;
//     }
//   }
//   td{
//     border-top:0!important;
//     min-width: 7em;
//         border-left: 0 !important;
//     border-right: 0 !important;
//   }
//   .universal-table-show.table td{
//     padding: 15px 18px;
//   }
//   tbody>tr:nth-of-type(odd){
//     background-color:transparent;
//   }
//   .table-content{
//     min-width: 100%!important;
//   }
//   .universal-table-tr{
//     display: flex;
//     flex-wrap: wrap;
//     justify-content: center;
//     width: 100%;
//     &:first-child{
//       display:none;
//     }
//     &:nth-child(2){
//       .table-title{
//         display: none;
//       }
//       .table-content{
//         padding-top: 1em;
//         width: 100%;
//         color: #173463;
//         font-size: 2.2rem;
//         font-weight: 900;
//         text-align: center;
//         padding-bottom: 0;
//       }
//     }
//     &:nth-child(3){
//       .table-title{
//         display: none;
//       }
//       .table-content{
//         width: 100%;
//         color: #e66b28;
//         font-size: 2.2rem;
//         font-weight: 900;
//         text-align: center;
//         padding-top: 0;
//       }
//     }
//     &:nth-child(4){
//       .table-title{
//         display: none;
//       }
//       .table-content{
//         margin-bottom: 1em;
//       }
//     }
//     &:nth-child(5){
//       .table-title{
//         display: none;
//       }
//     }
    
//   }
//   .table-content{
//     background-color: #fff;
//     padding: 0;
//   }
//   .table-title{
//    width: 100%;
//         padding: 30px 0;
//         color: #2D9349;
//         font-size: 1.8rem;
//         font-weight: 600;
//   }
// }