/*dataTablesのデザイン変更*/
#ProjectTable_wrapper{
  margin-left:10px;
  margin-top:50px;
  margin-bottom:100px;
}
#routeTable_wrapper{/*課題検索ルートテーブル*/
  margin-left:10px;
  margin-top:20px;
  margin-bottom:100px;
}
#boulderTable_wrapper{/*課題検索ボルダーテーブル*/
  margin-left:10px;
  margin-top:20px;
  margin-bottom:100px;
}
/*https://datatables.net/forums/discussion/43306/change-default-color-of-pagination-buttons*/
/*pagnate_button.previous or next のデザイン*/
.dataTables_wrapper .dataTables_paginate .paginate_button.previous:hover {
    color: black !important;
    border: 1px solid transparent!important;
    background-color: rgba(60,179,113,0.3)!important;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(60,179,113,0.3)), color-stop(100%, rgba(60,179,113,0.3)))!important;
    background: -webkit-linear-gradient(top, rgba(60,179,113,0.3) 0%, rgba(60,179,113,0.3) 100%)!important;
    background: -moz-linear-gradient(top, rgba(60,179,113,0.3) 0%, rgba(60,179,113,0.3) 100%)!important;
    background: -ms-linear-gradient(top, rgba(60,179,113,0.3) 0%, rgba(60,179,113,0.3) 100%)!important;
    background: -o-linear-gradient(top, rgba(60,179,113,0.3) 0%, rgba(60,179,113,0.3) 100%)!important;
    background: linear-gradient(to bottom, rgba(60,179,113,0.3) 0%, rgba(60,179,113,0.3) 100%)!important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.next:hover {
    color: black !important;
    border: 1px solid transparent!important;
    background-color: rgba(60,179,113,0.3)!important;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(60,179,113,0.3)), color-stop(100%, rgba(60,179,113,0.3)))!important;
    background: -webkit-linear-gradient(top, rgba(60,179,113,0.3) 0%, rgba(60,179,113,0.3) 100%)!important;
    background: -moz-linear-gradient(top, rgba(60,179,113,0.3) 0%, rgba(60,179,113,0.3) 100%)!important;
    background: -ms-linear-gradient(top, rgba(60,179,113,0.3) 0%, rgba(60,179,113,0.3) 100%)!important;
    background: -o-linear-gradient(top, rgba(60,179,113,0.3) 0%, rgba(60,179,113,0.3) 100%)!important;
    background: linear-gradient(to bottom, rgba(60,179,113,0.3) 0%, rgba(60,179,113,0.3) 100%)!important;
}
/*pagnate_button.previous or next がdisabledの時（デザインを上書きしないとダメだった）*/
.dataTables_wrapper .dataTables_paginate .paginate_button.previous.disabled:hover {
    color: #666 !important;
    border: 1px solid transparent!important;
    background-color: transparent!important;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, transparent), color-stop(100%, transparent))!important;
    background: -webkit-linear-gradient(top, transparent 0%, transparent 100%)!important;
    background: -moz-linear-gradient(top, transparent 0%, transparent 100%)!important;
    background: -ms-linear-gradient(top, transparent 0%, transparent 100%)!important;
    background: -o-linear-gradient(top, transparent 0%, transparent 100%)!important;
    background: linear-gradient(to bottom, transparent 0%, transparent 100%)!important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.next.disabled:hover {
    color: #666 !important;
    border: 1px solid transparent!important;
    background-color: transparent!important;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, transparent), color-stop(100%, transparent))!important;
    background: -webkit-linear-gradient(top, transparent 0%, transparent 100%)!important;
    background: -moz-linear-gradient(top, transparent 0%, transparent 100%)!important;
    background: -ms-linear-gradient(top, transparent 0%, transparent 100%)!important;
    background: -o-linear-gradient(top, transparent 0%, transparent 100%)!important;
    background: linear-gradient(to bottom, transparent 0%, transparent 100%)!important;
}
/*pagnate_button のデザイン*/
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    color: black !important;
    border: 1px solid transparent!important;
    background-color: rgba(60,179,113,0.3)!important;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(60,179,113,0.3)), color-stop(100%, rgba(60,179,113,0.3)))!important;
    background: -webkit-linear-gradient(top, rgba(60,179,113,0.3) 0%, rgba(60,179,113,0.3) 100%)!important;
    background: -moz-linear-gradient(top, rgba(60,179,113,0.3) 0%, rgba(60,179,113,0.3) 100%)!important;
    background: -ms-linear-gradient(top, rgba(60,179,113,0.3) 0%, rgba(60,179,113,0.3) 100%)!important;
    background: -o-linear-gradient(top, rgba(60,179,113,0.3) 0%, rgba(60,179,113,0.3) 100%)!important;
    background: linear-gradient(to bottom, rgba(60,179,113,0.3) 0%, rgba(60,179,113,0.3) 100%)!important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    color: black !important;
    border: 1px solid rgba(220,220,220,0.9)!important;
    background-color: #f5f5f5!important;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f5f5f5), color-stop(100%, #f5f5f5))!important;
    background: -webkit-linear-gradient(top, #f5f5f5 0%, #f5f5f5 100%)!important;
    background: -moz-linear-gradient(top, #f5f5f5 0%, #f5f5f5 100%)!important;
    background: -ms-linear-gradient(top, #f5f5f5 0%, #f5f5f5 100%)!important;
    background: -o-linear-gradient(top, #f5f5f5 0%, #f5f5f5 100%)!important;
    background: linear-gradient(to bottom, #f5f5f5 0%, #f5f5f5 100%)!important;
}
/*デザインバグ修正*/
.dataTables_scrollBody{
  height:auto !important;
}
.dataTables_scrollHeadInner{
  width:100% !important;
}
/*テーブルデザイン*/
/* 行の色を変更する */
.revTable thead tr{
    background-color: rgba(34,139,34,0.5);
}
table.dataTable thead .sorting{
  text-align: center;
}
.revTable tbody tr.odd{
  text-align:center;
  background-color: white;
  border-bottom:1px #c0c0c0 solid;
}
.revTable tbody tr.even{
  text-align:center;
    background-color:white;
    border-bottom:1px #c0c0c0 solid;
}
.revTable {
   margin-top: 20px; 
   margin-left: -30px;
   font-size: 14px;
   padding: 5px;
   width: 100%;
   overflow-wrap : break-word; /*改行をする*/
}
table { 
   font-family: 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
   width: 100%;
   font-weight: bold;
   border-collapse: collapse;
   table-layout: fixed; 
}
.revTable tbody td div{
   height: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
.revTable tbody td div:hover{
  white-space: normal;
  width: auto;
  overflow: visible;
  text-overflow: clip;
}
/* 画面サイズの横幅が 768px 以下で適用 */
@media screen and (max-width: 768px) {
    /*レビューテーブルのレイアウト*/
  .revTable thead th {
   margin-top: 20px; 
   margin-left: 10px;
   font-size: 10px;
  }
  .revTable tbody th{
   margin-top: 20px; 
   margin-left: 10px;
   font-size: 12px;
  }
  .revTable tbody th>a{
    font-size: 12px;
    font-weight: bold;
   }
  .revTable tbody td{
   margin-top: 20px; 
   margin-left: 10px;
   font-size: 11px;
  }
  table.dataTable{ 
   border-collapse: collapse !important;
}
  /*.revTable tbody tr {
    display:block;
    margin-bottom: 10px;
  }
  .revTable tbody tr th {
    display:block;
    border:none;
    padding: 5px;
    margin-bottom: 2px;
    width: 100%;
    overflow-wrap : break-word;
  }
  .revTable td{ 
    display:list-item;
    width: 90%;
    margin-left: 10%;
    font-size: 12px;
    border:none;
    border-left: solid 6px #228b22;左側の線
    background: rgba(240,255,240,0.1);背景色
    margin-bottom: 2px;下のバーとの余白
    line-height: 1.0;
    padding: 0.5em;
    list-style-type: none!important;ポチ消す
    overflow-wrap : break-word;
  }*/
  
}

/* 画面サイズの横幅が 769px 以上で適用 */
@media screen and (min-width: 769px) { 
    .revTable thead th{
   margin-top: 20px; 
   margin-left: 10px;
   font-size: 12px;
  }
  .tab-content {
    margin-left:0px;
  }  
  table.dataTable{ 
   width:100% !important;
   border-collapse: collapse !important;
}
}