/*******************************************************************************************************************
    @name               Object CSS Setting 1.0v
    @version            nBIMS 2.0v
    @copyright          Copyright (C) 2021.04.04
    @license            Eric Wang (TW) 王聖華 (AHCS) Asia-Hua Clouds Studio, [EMail] myeraic@gmail.com, [LINE.ID] myeraic
********************************************************************************************************************/
/*******************************************************************************************************************/
/*****[ Pop CSS 彈出視窗 ]*****/
/*******************************************************************************************************************/
.pop-box{
    display  : flex;
    width    : 100%;
    height   : 100%;
    position : fixed;
    top      : 0;
    left     : 0;
    box-sizing: border-box;
    opacity  : .9;
    background-image: url("../../View/Image/Background.png");
    z-index  : 99;
}
.pop-main{
    font-size        : large;
    color            : white;
    background-color : #438eb9;
    width            : 100%;
    margin           : auto;
    -webkit-border-radius : 5px;
       -moz-border-radius : 5px;
            border-radius : 5px;
}
.pop-title{
    font-size  : 1.1em;
    padding    : 10px 0 5px 10px;
    background : #438eb9;
    color      : white;
    min-height : 35px;
}
.pop-button{
    float   : right;
    padding : 0 10px 0 0;
}
.pop-text{
    color      : black;
    background : white;
    margin     : 5px;
    padding    : 10px 5px;
}
.pop-400{ width: 400px; }
.pop-420{ width: 420px; }
.pop-440{ width: 440px; }
.pop-460{ width: 460px; }
.pop-480{ width: 480px; }

/*******************************************************************************************************************/
/*****[ Line CSS 行資料 ]*****/
/*******************************************************************************************************************/
.line-box{
    font-size   : medium;
    min-height  : 38px;
    margin      : 0 0 2px 0;
    float       : left;
    box-sizing  : border-box;
    white-space : initial;
    border      : 1px solid #f0f0f0;
}
.line-title{
    font-size   : 100%;
    color       : #135a97;
    width       : 120px;
    text-align  : right;
    float       : left;
    position    : relative;
    top         : 7px;
    white-space : nowrap;
    overflow    : hidden;
    text-overflow: clip;
    box-sizing  : border-box;
}
.line-text{
    margin   : 0 5px 0 130px;
    position : relative;
    top      : 5px;
    box-sizing : border-box;
}

/*******************************************************************************************************************/
/*****[ Form 表單資料行 ]*****/
/*******************************************************************************************************************/
.fLinebox{
    float       : left;
    font-size   : medium;
    width       : 49%;
    min-height  : 35px;
    margin      : 2px 0 0 0;
    white-space : norap;
}

/*******************************************************************************************************************/
/*****[ 邏輯圖片 ]*****/
/*******************************************************************************************************************/
.logic-box{
    width   : 85px;
    height  : 30px;
    overflow: hidden;
}
.logic-yes{
    position: relative;
    top     : -2px;
    left    : -10px;
}
.logic-no{
    position: relative;
    top     : -37px;
    left    : -10px;
}
.logic-img{
    width   : 100px;
    overflow: hidden;
}

/*******************************************************************************************************************/
/*****[ Checkbox slide 開關樣式 ]*****/
/*******************************************************************************************************************/
.slide {
  width: 75px;
  height: 32px;
  background: #333;
  margin: 0 auto;
  position: relative;
  -moz-border-radius: 50px;
  -webkit-border-radius: 50px;
  border-radius: 50px;
  -moz-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 0.2);
  -webkit-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 0.2);
  box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 0.2);
}
.slide:after {
  content: 'OFF';
  color: #bf0000;
  position: absolute;
  top: 2px;
  right: 8px;
  z-index: 0;
  font: 14px/26px Arial, sans-serif;
  font-weight: bold;
  text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.15);
}
.slide:before {
  content: 'ON';
  color: #00bf00;
  position: absolute;
  top: 2px;
  left: 8px;
  z-index: 0;
  font: 14px/26px Arial, sans-serif;
  font-weight: bold;
}
.slide label {
  display: block;
  width: 34px;
  height: 26px;
  cursor: pointer;
  position: absolute;
  top: 3px;
  left: 3px;
  z-index: 1;
  background: #fcfff4;
  background: -moz-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
  background: -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
  background: linear-gradient(to bottom, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
  -moz-border-radius: 50px;
  -webkit-border-radius: 50px;
  border-radius: 50px;
  -moz-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
  -moz-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.3);
  -webkit-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.3);
  box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.3);
}
.slide input[type=checkbox] {
  visibility: hidden;
}
.slide input[type=checkbox]:checked + label {
  left: 38px;
}

/*******************************************************************************************************************/
/*****[ Button 按鈕樣式 ]*****/
/*******************************************************************************************************************/
/* 一般按鈕 */
.cbims-btn{
    font-family: Helvetica, Arial, myFont, 新細明體;
    font-weight: 900;
    height: 32px;
    width: auto;
    *width: 1;  
    color: white;
    background-color : #55A5B2;
    border: 1px solid rgb(210, 210, 210);
    padding: 2px 10px 6px 10px;
    margin: 0 3px 0 0;
    position: relative;
    top: -3px;
    overflow: visible;
    -webkit-border-radius: 5px;                 /* Safari and Chrome */
       -moz-border-radius: 5px;                 /* Firefox */
            border-radius: 5px;                 /* Opera 10.5+, future browsers and IE6+ using IE-CSS3 */
    behavior: url(ie-css3.htc);                 /* This lets IE know to call the script on all elements which get the 'box' class */
    -webkit-box-shadow: 5px 5px 10px #909090;   /* Safari and Chrome */
       -moz-box-shadow: 5px 5px 10px #909090;   /* Firefox */
            box-shadow: 5px 5px 10px #909090;   /* Opera 10.5+, future browsers and IE6+ using IE-CSS3 */
    -webkit-transition: background-color .5s linear;    /* Safari and Chrome */
       -moz-transition: background-color .5s linear;    /* Firefox */
         -o-transition: background-color .5s linear;    /* Opera */
            transition: background-color .5s linear;    /* Opera 10.5+, future browsers and IE6+ using IE-CSS3 */
}
.cbims-btn:hover{
    background-color : #B20051;
    border: 1px solid gold;
    -webkit-transition: background-color .5s linear;    /* Safari and Chrome */
       -moz-transition: background-color .5s linear;    /* Firefox */
         -o-transition: background-color .5s linear;    /* Opera */
            transition: background-color .5s linear;    /* Opera 10.5+, future browsers and IE6+ using IE-CSS3 */
}
.cbims-close-btn{
    font-family: Helvetica, Arial, myFont, 新細明體;
    font-weight: 900;
    height: 32px;
    width: auto;
    *width: 1;  
    color: white;
    background-color : #555;
    border: 1px solid rgb(210, 210, 210);
    padding: 2px 10px 6px 10px;
    margin: 0 3px 0 0;
    -webkit-border-radius: 5px;                 /* Safari and Chrome */
       -moz-border-radius: 5px;                 /* Firefox */
            border-radius: 5px;                 /* Opera 10.5+, future browsers and IE6+ using IE-CSS3 */
    behavior: url(ie-css3.htc);                 /* This lets IE know to call the script on all elements which get the 'box' class */
    -webkit-transition: background-color .5s linear;    /* Safari and Chrome */
       -moz-transition: background-color .5s linear;    /* Firefox */
         -o-transition: background-color .5s linear;    /* Opera */
            transition: background-color .5s linear;    /* Opera 10.5+, future browsers and IE6+ using IE-CSS3 */
}
.cbims-close-btn:hover{
    background-color : #d9534f;
    border: 1px solid white;
    -webkit-transition: background-color .5s linear;    /* Safari and Chrome */
       -moz-transition: background-color .5s linear;    /* Firefox */
         -o-transition: background-color .5s linear;    /* Opera */
            transition: background-color .5s linear;    /* Opera 10.5+, future browsers and IE6+ using IE-CSS3 */
}
/* 報表按鈕 */
.cbims-rbtn{
    font-family: Helvetica, Arial, myFont, 新細明體;
    height: 27px;
    width: 100%;
    *width: 1;
    color: yellow;
    color: #2aa52a;
    background-color : #666;
    background-color : #eee;
    border: 1px solid #2aa52a;
    overflow: visible;
    -webkit-border-radius: 5px;                 /* Safari and Chrome */
       -moz-border-radius: 5px;                 /* Firefox */
            border-radius: 5px;                 /* Opera 10.5+, future browsers and IE6+ using IE-CSS3 */
    behavior: url(ie-css3.htc);                 /* This lets IE know to call the script on all elements which get the 'box' class */
    -webkit-transition: background-color .5s linear;    /* Safari and Chrome */
       -moz-transition: background-color .5s linear;    /* Firefox */
         -o-transition: background-color .5s linear;    /* Opera */
            transition: background-color .5s linear;    /* Opera 10.5+, future browsers and IE6+ using IE-CSS3 */
}
.cbims-rbtn:hover{
    cursor: pointer;
    color: #eee;
    color: white;
    background-color : #666;
    background-color : #2aa52a;
    border: 1px solid #eee;
    -webkit-transition: background-color .5s linear;    /* Safari and Chrome */
       -moz-transition: background-color .5s linear;    /* Firefox */
         -o-transition: background-color .5s linear;    /* Opera */
            transition: background-color .5s linear;    /* Opera 10.5+, future browsers and IE6+ using IE-CSS3 */
}

.gui-btn{
    font-family: Helvetica, Arial, myFont, 新細明體;
    height: 27px;
    width: 40px;
    *width: 1;
    color: black;
    background-color : #a5d4ef;
    border: 1px solid rgb(210, 210, 210);
    padding: 3px 8px 5px 8px;
    margin: 0 1px 0 0;;
    overflow: visible;
    -webkit-border-radius: 5px;                 /* Safari and Chrome */
       -moz-border-radius: 5px;                 /* Firefox */
            border-radius: 5px;                 /* Opera 10.5+, future browsers and IE6+ using IE-CSS3 */
    behavior: url(ie-css3.htc);                 /* This lets IE know to call the script on all elements which get the 'box' class */
    -webkit-transition: background-color .5s linear;    /* Safari and Chrome */
       -moz-transition: background-color .5s linear;    /* Firefox */
         -o-transition: background-color .5s linear;    /* Opera */
            transition: background-color .5s linear;    /* Opera 10.5+, future browsers and IE6+ using IE-CSS3 */
}
.gui-btn:hover{
    color: white;
    background-color : #51B200;
    border: 1px solid gold;
    -webkit-transition: background-color .5s linear;    /* Safari and Chrome */
       -moz-transition: background-color .5s linear;    /* Firefox */
         -o-transition: background-color .5s linear;    /* Opera */
            transition: background-color .5s linear;    /* Opera 10.5+, future browsers and IE6+ using IE-CSS3 */
}
.cbims-tbtn{
    font-family: Helvetica, Arial, myFont, 新細明體;
    font-weight: 900;
    height: 32px;
    width: auto;
    *width: 1;  
    color: white;
    background-color : #55A5B2;
    border: 1px solid rgb(210, 210, 210);
    padding: 2px 10px 6px 10px;
    margin: 0 3px 0 0;
    position: relative;
    top: -3px;
    overflow: visible;
    -webkit-border-radius: 5px;                 /* Safari and Chrome */
       -moz-border-radius: 5px;                 /* Firefox */
            border-radius: 5px;                 /* Opera 10.5+, future browsers and IE6+ using IE-CSS3 */
    -webkit-transition: background-color .5s linear;    /* Safari and Chrome */
       -moz-transition: background-color .5s linear;    /* Firefox */
         -o-transition: background-color .5s linear;    /* Opera */
            transition: background-color .5s linear;    /* Opera 10.5+, future browsers and IE6+ using IE-CSS3 */
}
.cbims-tbtn:hover{
    background-color : #B20051;
    border: 1px solid gold;
    -webkit-transition: background-color .5s linear;    /* Safari and Chrome */
       -moz-transition: background-color .5s linear;    /* Firefox */
         -o-transition: background-color .5s linear;    /* Opera */
            transition: background-color .5s linear;    /* Opera 10.5+, future browsers and IE6+ using IE-CSS3 */
}


/*******************************************************************************************************************/
/*****[ Tab 頁籤 ]*****/
/*******************************************************************************************************************/
.tab-box{
    height : 32px;
    width  : 100%;
    margin : 0 0 2px 0;
}
.tab-mark{
    width  : 100px;
    height : 31px;
    margin : 0 0 0 5px;
    float  : left;
    border : 1px dimgray solid;
    -webkit-border-radius: 10px;                /* Safari and Chrome */
       -moz-border-radius: 10px;                /* Firefox */
            border-radius: 10px;                /* Opera 10.5+, future browsers and I */
}
.tab-body{
    font-size: 85%;
    width    : 100%;
    padding  : 5px 0 0 15px;
}
.tab-dirbox{
    width : 100%;
    position : relative;
    top : 2px;
    -webkit-transform: rotate(45deg);
       -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
         -o-transform: rotate(45deg);
            transform: rotate(45deg);
}
.tab-dir{
    width     : 10px;
    height    : 10px;
    margin    : auto;
    border    : 1px dimgray solid;
}
.tab-select{
    border-top: 0;
    border-left: 0;
}
.tab-noselect{
    border-radius: 99px;
}
.tab-bottom{
    border-top:2px #eee double;
    margin: 0 0 5px 0;
}

/*******************************************************************************************************************/
/*****[ Table 表格 ]*****/
/*******************************************************************************************************************/
.cBIMSTable{
    line-height: 27px;
    font-size: medium;
}
.cBIMSTable .tHead{
    background: #A5E6FF;
    color: white;
    text-align: center;
}
.cBIMSTable .tHead > div {
    background: #D98855;
    height: 30px;
    float: left;
    overflow: hidden;
    border-top: 1px red solid;
    border-bottom: 1px red solid;
    border-right: 1px red solid;
    border-color: #e0e0e0;
    -webkit-box-shadow: border-box;             /* Safari and Chrome */
       -moz-box-shadow: border-box;             /* Firefox */
            box-shadow: border-box;             /* Opera 10.5+, future browsers and IE6+ using IE-CSS3 */
}
.cBIMSTable .tHead > div:first-child {
    border-left: 1px red solid;
    border-color: #e0e0e0;
    -webkit-box-shadow: border-box;             /* Safari and Chrome */
       -moz-box-shadow: border-box;             /* Firefox */
            box-shadow: border-box;             /* Opera 10.5+, future browsers and IE6+ using IE-CSS3 */
}
.cBIMSTable .ttext{ padding:0 2px 0 2px; }
.cBIMSTable .tBody:hover{
    background: #E6FFA5;
    cursor: pointer;
}
.cBIMSTable .tBody:not(:hover){ background: white; }
.cBIMSTable .tBody > div{
    background: inherit;
    height: 30px;
    float: left;
    overflow: hidden;
    border-right: 1px solid;
    border-bottom: 1px solid;
    border-color: #e0e0e0;
    -webkit-box-shadow: border-box;             /* Safari and Chrome */
       -moz-box-shadow: border-box;             /* Firefox */
            box-shadow: border-box;             /* Opera 10.5+, future browsers and IE6+ using IE-CSS3 */    
}
.cBIMSTable .tBody > div:first-child{
    border-left: 1px red solid;
    border-color: #e0e0e0;
    -webkit-box-shadow: border-box;             /* Safari and Chrome */
       -moz-box-shadow: border-box;             /* Firefox */
            box-shadow: border-box;             /* Opera 10.5+, future browsers and IE6+ using IE-CSS3 */
}

/*******************************************************************************************************************/
/*****[ Page CSS 資料頁 ]*****/
/*******************************************************************************************************************/
.page-box{
    padding : 2px 10px 10px 10px;
}
.page-head{
    box-sizing : border-box;
    width      : 100%;
    min-height : 35px;
    margin     : 0 0 3px 0;
    border-bottom : 1px #ccc dashed;
}
.page-name{
    font-weight : bold;
    font-size   : 130%;
}
.page-button{
    display  : inline-block;
    padding  : 5px 3px 0 15px;
}

/*******************************************************************************************************************/
/*****[ Search 簡易查詢器 ]*****/
/*******************************************************************************************************************/
.search-box{
    padding : 5px 0 5px 0;
    line-height : 35px;
}
.search-name{
    font-size : 90%;
    margin    : 0 2px;
    position  : relative;
    top       : 3px;
    float     : left;
}
.search-separate{
    top    : 2px;
    margin : 0 2px;
    float  : left;
}
.search-head{
    margin : 0 5px 0 2px;
    float  : left;
}
.search-field{
    position : relative;
    float    : left;
}
.search-button{
    font-size: 85%;
    padding  : 0 0 0 5px;
    position : relative;
    top      : 2px;
    float    : left;
}

/*******************************************************************************************************************/
/*****[ file upload 檔案上傳 ]*****/
/*******************************************************************************************************************/
.upload-name{
    height: 32px;
    width: 100%;
    -webkit-border-radius: 5px 0 0 5px;
       -moz-border-radius: 5px 0 0 5px;
            border-radius: 5px 0 0 5px;
}
.upload-btn{
    font-size : 90%;
    top : -32px;
    color: white;
    background: #5cb85c;
    font-weight: bold;
    width: 50px;
    height: 27px;
    padding: 5px 5px 0 10px;
    -webkit-border-radius: 0 5px 5px 0;     /* Safari and Chrome */
       -moz-border-radius: 0 5px 5px 0;     /* Firefox */
            border-radius: 0 5px 5px 0;     /* Opera 10.5+, future browsers and I */
}
.upload-btncenter{
    font-size : 90%;
    top : -32px;
    color: white;
    background: #5cb85c;
    font-weight: bold;
    width: 50px;
    height: 27px;
    padding: 5px 5px 0 10px;
}

/*******************************************************************************************************************/
/*****[ Other 其他 ]*****/
/*******************************************************************************************************************/
.cbims-label{
    background-color : #5cb85c;
    color : white;
    min-height : 32px;
    padding : 3px 10px 0 10px;
    margin : 0 0 10px 10px;
    border: solid 1px #ccc;
    -webkit-box-shadow: 2px 2px 5px;            /* Safari and Chrome */
       -moz-box-shadow: 2px 2px 5px;            /* Firefox */
            box-shadow: 2px 2px 5px rgba(0,0,0,.5);/* Opera 10.5+, future browsers and IE6+ using IE-CSS3 */
    -webkit-border-radius: 10px;                /* Safari and Chrome */
       -moz-border-radius: 10px;                /* Firefox */
            border-radius: 10px;                /* Opera 10.5+, future browsers and I */
}
.cbims-date-btn{
    width : 34px;
    height: 30px;
    background-color: #ccc;
    color : white;
}
.cbims-date-btn:hover{
    background-color: #f0ad4e;
}
.topBtn {
  display: none; /* Hidden by default */
  position: fixed; /* Fixed/sticky position */
  bottom: 15px; /* Place the button at the bottom of the page */
  right: 15px; /* Place the button 30px from the right */
  z-index: 99; /* Make sure it does not overlap */
  border: none; /* Remove borders */
  outline: none; /* Remove outline */
  background-color: red; /* Set a background color */
  color: white; /* Text color */
  cursor: pointer; /* Add a mouse pointer on hover */
  padding: 15px; /* Some padding */
  border-radius: 10px; /* Rounded corners */
  font-size: 18px; /* Increase font size */
}
.topBtn:hover {
  background-color: #555; /* Add a dark-grey background on hover */
}

/*******************************************************************************************************************/
/*****[ Desktops/Laptops/IPad 桌上型電腦/筆記型電腦/平板 768-1280 ]*****/
@media screen and (min-width: 768px) {
}

/*******************************************************************************************************************/
/*****[ Desktops/Laptops/IPad 桌上型電腦/筆記型電腦/平板 768-1280 ]*****/
@media screen and (min-width: 768px) {
}

/*****[ Low Resolution Tablets / Mobiles 低分辨率平板與手機  481-767 ]*****/
@media screen and (min-width: 481px) and (max-width: 767px) {
}

/*****[ Mobiles 手機 320-480 ]*****/
@media screen and (max-width: 480px) {
    /** POP **/
    .pop-400{ width: 100%; }
    .pop-420{ width: 100%; }
    .pop-440{ width: 100%; }
    .pop-460{ width: 100%; }
    .pop-480{ width: 100%; }
    /** Line **/
    .line-title{
        width      : auto;
        min-height : 27px;
        text-align : left;
        float      : none;
        position   : static;
    }
    .line-text{
        min-height : 27px;
        text-align : left;
        position   : static;
        float      : none;
        margin     : 0 0 10px 10px;
        box-sizing : border-box;
    }
    .upload-btn{ top: -32px; }
    .upload-btncenter{ top: -32px; }
}
/*****[ Print 列表機 ]*****/
@media only print {
}