/*
	2021/07/09
*/

/*****     頁碼 (更新外框)     *****/
.Page2Box
{
      padding: 50px 0 0 0;
      width: max-content;
      margin: 0 auto;
      display: flex;
      align-items: center;
      text-align: center;
      justify-content: center;
      flex-wrap: wrap;
}

.Page2TotalBox
{
      text-align: center;
      display: flex;
      align-items: center;
      text-align: center;
      justify-content: center;
}

.Page2TotalTxt
{
      color: #666666;
      font-size: 14px;
}

.Page2TotalNum
{
      color: #666666;
      font-size: 14px;
}

.Page2JumpBox
{
      color: #666666;
      display: flex;
      align-items: center;
      text-align: center;
      justify-content: center;
}

.Page2JumpWhereBox
{
      display: flex;
      align-items: center;
      text-align: center;
      justify-content: center;
      margin: 0 10px 0 0;
}

.Page2JumpIpt .Ipt
{
      color: #808080;
      box-shadow: unset;
      margin: 0 5px;
}

.Page2JumpIpt .Ipt input
{
      color: black;
      min-width: 40px !important;
      width: 40px !important;
      padding: 0 5px !important;
      text-align: center;
}

.PageBtnJump
{
      background: #808080;
      display: block;
      cursor: pointer;
}

.PageBtnJumpTxt
{
      color: white;
      display: block;
      width: 100%;
      height: 100%;
      font-size: 15px;
      padding: 5px 10px;
      box-sizing: border-box;
}

/*
      共幾項 666666
      上下一頁不能點擊  #B2B2B2
      跳到第幾頁 #666666   (框框#808080)  頁碼 黑色
      確定背景顏色 #808080
      */

/*****     頁碼     *****/
.PageBox
{
      /* width: 100%; */
      margin: 0 15px;
}

.PageContainer
{
      border: 1px solid #808080;
      /* width: 100%; */
      display: flex;
      align-items: center;
      text-align: center;
      justify-content: center;
      flex-wrap: wrap;
}

.PageBtn , .PageNum
{
      display: block;
      box-sizing: border-box;
}

.PageBtn:not(:last-child) , .PageNum:not(:last-child) , .PageRecordBox , 
.PageSelectBox
{
      /* margin: 0 10px 0 0; */
}

/*     首頁 上一頁 上十頁 下十頁 下一頁 最末頁     */
.PageBtn
{
      /* background: #f1f1f1;
      border: 1px solid cadetblue;
      border-radius: 5px;
      padding: 2px 8px; */
      /* color: black; */
}

.PageBtn:not(:last-child)
{
      border-right: 1px solid #808080;
}

/* .PageBtn.prev , .PageBtn.next
{
      padding: 7px 8px;
} */

.PageBtn:hover
{
      /* background: cadetblue; */
}

.PageBtnTxt
{
      color: black;
      font-size: 16px;
      padding: 4px 14px;
}

.PageBtn:hover .PageBtnTxt
{
      /* color: white; */
}

.PageBtn.active .PageBtnTxt
{
      color: #B2B2B2;
}

/* .PageBtn.prev .PageBtnTxt , .PageBtn.next .PageBtnTxt
{
      border-style: solid;
      width: 0;
	height: 0;
	content: '';
}

.PageBtn.prev .PageBtnTxt
{
      border-color: transparent cadetblue transparent transparent;
      border-width: 6px 8px 6px 0;      	
}

.PageBtn.next .PageBtnTxt
{
      border-color: transparent transparent transparent cadetblue;
      border-width: 6px 0 6px 8px;      
}

.PageBtn.prev:hover .PageBtnTxt
{
      border-color: transparent white transparent transparent;
}

.PageBtn.next:hover .PageBtnTxt
{
      border-color: transparent transparent transparent white;
} */

/*     頁碼     */
.PageNum
{
      /* background: #f1f1f1; */
      /* border: 1px solid brown; */
      color: black;
      padding: 4px 14px;
}

.PageNum:not(:last-child)
{
      border-right: 1px solid #808080;
}

.PageNum:hover , .PageNum.active
{
      background: #00A89C;
}

.PageNumTxt
{
      color: black;
      font-size: 16px;
}

.PageNum:hover .PageNumTxt , .PageNum.active .PageNumTxt
{
      color: white;
}

/*     紀錄     */
.PageRecordBox
{
      
}

.PageRecordNum
{
      color: black;
      font-size: 16px;
}

.PageRecordTxt
{
      color: black;
      font-size: 16px;
}

/*     下拉式     */
.PageSelectBox
{
      width: 100px;
}

.PageSelect
{
      background: #ffe499;
      border-radius: 5px;
	box-sizing: border-box;
      width: 100%;
      position: relative;
}

.PageSelect select
{
      color: black;
	min-height: 30px;
	font-size: 16px;
	display: block;
	width: 100%;
      padding: 5px;
}

.PageSelectDecro
{
      background: #E5C25B;
	border-top-right-radius: 5px;
	border-bottom-right-radius: 5px;
      width: 30px;
	height: 30px;
	position: absolute;
	top: calc(50%);
	right: 0;
	transform: translateY(-50%);
	pointer-events: none;
}

.PageSelectDecro::after
{
      border-color: #342305 transparent transparent transparent;
      border-width: 11px 7px 0 7px;      
      border-style: solid;
	width: 0;
	height: 0;
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	pointer-events: none;
}

@media screen and (max-width:767px)
{
      .Page2Box
      {
            width: 100%;            
      }

      .Page2TotalBox , .PageBox , .Page2JumpBox
      {
            padding: 10px 0;
      }

      .PageBox
      {
            margin: 0 0 0 5px;
      }

      .PageBtnTxt
      {
            font-size: 12px;
            padding: 2px 4px;
      }

      .PageNum
      {
            padding: 2px 4px;
      }

      .PageNumTxt
      {
            font-size: 12px;
      }

      .Page2JumpBox
      {
            width: 100%;
      }

      .Page2JumpWhereBox
      {
            font-size: 13px;
      }

      .Page2JumpIpt .Ipt input
      {
            width: 30px;
            font-size: 13px;
            min-height: 25px;
      }

      .PageBtnJumpTxt
      {
            font-size: 13px;
            padding: 4px 8px;
      }
}