body {
    padding-top: 50px; /* 65 */
    padding-bottom: 20px;
    -ms-overflow-style: none; /*IE Hide scrollbar*/
}

.BgMain {
    background-color: #005b96;
}
.BgSub {
    background-color: #ebf4f6;
}
.BgTrans {
    background-color:transparent !important;
}

.footer {
    position: fixed;
    bottom: -8px;
    z-index: 999;
    opacity: 0.9;
}

.Opacity8 {
    opacity: 0.8 !important;
}

.OffsetTop {
    top: 46px;
}

.OffsetTop_1 {
    top: 34px;
}

.OffsetTop1 {
    top: 76px;
}
.OffsetTop11 {
    top: 80px;
}
.OffsetTop2 {
    top: 96px;
}
.OffsetTop3 {
    top: 138px;
}

.vh_50 {
    height: 50vh;
}
.vh_65 {
    height: 65vh;
}
.vh_75{
    height: 75vh;
}
.vh_85 {
    height: 85vh;
}

.body-content {
    margin: 15px;
}

.dl-horizontal dt {
    white-space: normal;
}

.recaptcha_privacy {
    display: none;
}

.hidden {
    display: none; /* Should NOT use !important */
}
.hiddenView {
    visibility: hidden; /* Should NOT use !important */
}

.lineB4Next {
    page-break-after:always;
}

.clear{
    clear:both;
}

.TextWrap {
    white-space: pre-wrap; /* CSS3 */
    white-space: -moz-pre-wrap; /* Firefox */
    white-space: -pre-wrap; /* Opera <7 */
    white-space: -o-pre-wrap; /* Opera 7 */
    word-wrap: break-word; /* IE */
}

input[type="text"]:disabled, textarea:disabled, input[type="password"]:disabled, input[type="option"]:disabled {
    background-color: #fafafa;
    color: #8f8f8f;
}

.TextStrikeThrough {
    text-decoration: line-through;
}

.ReSizeSm5 {
    -webkit-transform: scale(0.5);
    -moz-transform: scale(0.5);
    -ms-transform: scale(0.5);
    transform: scale(0.5);
} 
.ReSizeSm8 {
    -webkit-transform: scale(0.8);
    -moz-transform: scale(0.8);
    -ms-transform: scale(0.8);
    transform: scale(0.8);
}
.FontSize09 {
    font-size: 0.9rem !important;
}
.FontSize08 {
    font-size: 0.8rem !important;
}

/* DatePicker */
.ui-datepicker {
    z-index: 100 !important;
}

.ui-autocomplete {
    z-index: 20; /* Should higher than validorX */
}

    /* Validate Star
----------------------------------------------------------*/
.validorX {
    font-weight: bolder;
    position: absolute;
    margin-left: -15px;
    margin-top: -5px;
    color: red;
    cursor: pointer;
    z-index: 10;
}

.validorR {
    font-weight: bolder;
    position: absolute;
    right: 5px;
    margin-top: -15px;
    color: red;
    cursor: pointer;
    z-index: 10;
}

.divLink {
    color: blue !important;
    text-decoration: none;
    cursor: pointer;
}

.divLoadingTxt {
    position: absolute;
    margin-top: 100px;
    width: 100%;
    text-align: center;
    z-index: 2000;
}

.divCenterPop {
    background-color: white;
    z-index: 1021;
    left: 0;
    top: 0;
    width: 100%;
    height: 100vh;
    position: fixed;
    overflow-y: scroll;
}

.divBtnBottomRight {
    min-width: 120px;
    min-height: 30px;
    border-radius: 8px 0 0 8px;
    padding: 5px 10px 5px 5px;
    position: fixed;
    right: 0px;
    bottom: 10px;
    z-index:1020;

}
.DivNoScroll::-webkit-scrollbar {
    display: none;
}

.DivNoScroll {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.index1021{
    z-index:1021;
}

.index10 {
    z-index: 10;
}

.fancybox-close {
    right: 0px !important;
}

.pointer {
    cursor: pointer;
}
.pointerHelp {
    cursor: help;
}

.pointerOff {
    cursor: default !important;
}
.pointerHelp {
    cursor:help !important;
}

/* Scrollbar width, see also Smartphones */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
/* Track */
::-webkit-scrollbar-track {
    background: #f1f1f1;
} 
/* Handle */
::-webkit-scrollbar-thumb {
    background: #dbdbdb;
} 
    /* Handle on hover */
    ::-webkit-scrollbar-thumb:hover {
        background: #808080;
    }

/* Bootstrap Modification
-------------------------------------------------------------------*/
.xOutline, .xOutline:focus, .xOutline:active {
    outline: none !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
}
.checkboxRadio li {
    display: inline-block;
}
.checkboxRadio label {
    padding-left: 0;
    padding-right: 5px;
}
.checkboxSizeGrid input {
    vertical-align:middle;
    width: 15px;
    height: 16px;
}

.cBoxLeft25 label, .cBoxRight25 label {
    padding-left: 3px;
    padding-right: 3px;
}

.cBoxLeft25 input {
    width: 24px;
    height: 24px;
    float: left;
}

.cBoxRight25 input {
    width: 24px;
    height: 24px;
    float: right;
}
.cBox25 input {
    width: 24px;
    height: 24px; 
}

.cBox18 input {
    width: 18px;
    height: 18px;
}

input[type=checkbox] {
    vertical-align: top;
    display: inline !important;
    margin-left:2px;
    margin-right:2px;
}

    .xBold {
    font-weight: normal !important; /* radio item always bold */
}    
 .xBold label {
        font-weight: normal !important; /* radio item always bold */
}
.tooltip{
    z-index:1999;
}

.alert:empty, .hiddenEmpty:empty {
    display: none;
}

/* Switch - On Off
   --------------------------------------------------- */
.switch {
    width: 40px;
    height: 23px;
}   
    /* Hide default HTML checkbox */
    .switch input {
        display: none;
    } 
/* The slider */
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
} 
    .slider:before {
        position: absolute;
        content: "";
        height: 26px;
        width: 26px;
        left: 4px;
        bottom: 4px;
        background-color: white;
        -webkit-transition: .4s;
        transition: .4s;
    }
input:checked + .slider {
    background-color: #2196F3;
} 
input:focus + .slider {
    box-shadow: 0 0 1px #2196F3;
} 
input:checked + .slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
} 
/* Rounded sliders */
.slider.round {
    border-radius: 34px;
}
    .slider.round:before {
        border-radius: 50%;
    }
/* ---------------------------------------------------  
   Switch - On Off */

/*Gridview*/
.highlight {
    background-color: lightgoldenrodyellow !important;
}

.pagination-ys {
    border-radius: 4px;
    justify-items: right;
}
    .pagination-ys table > tbody > tr > td {
        display: inline;
        padding: 0;
    }
        .pagination-ys table > tbody > tr > td > a,
        .pagination-ys table > tbody > tr > td > span {
            padding: 3px 10px 3px 10px;
            line-height: 1.42857143;
            text-decoration: none;
            color: #0c86d9;
            background-color: #ffffff;
            border: 1px solid #dddddd;
            margin-left: -1px;
        }
        .pagination-ys table > tbody > tr > td > span {
            padding: 3px 10px 3px 10px;
            line-height: 1.42857143;
            text-decoration: none;
            margin-left: -1px;
            z-index: 2;
            color: #aea79f;
            background-color: #f5f5f5;
            border-color: #dddddd;
            cursor: default;
        }  
        .pagination-ys table > tbody > tr > td:first-child > a,
        .pagination-ys table > tbody > tr > td:first-child > span {
            margin-left: 0;
            border-bottom-left-radius: 4px;
            border-top-left-radius: 4px;
        } 
        .pagination-ys table > tbody > tr > td:last-child > a,
        .pagination-ys table > tbody > tr > td:last-child > span {
            border-bottom-right-radius: 4px;
            border-top-right-radius: 4px;
        } 
        .pagination-ys table > tbody > tr > td > a:hover,
        .pagination-ys table > tbody > tr > td > span:hover,
        .pagination-ys table > tbody > tr > td > a:focus,
        .pagination-ys table > tbody > tr > td > span:focus {
            color: #005b96;
            background-color: #eeeeee;
            border-color: #dddddd;
        }


@media screen {
    .showPrint {
        display: none;
    }
}

/* Responsive: Portrait tablets and up */
@media screen and (min-width: 768px) {
    .jumbotron {
        margin-top: 20px;
    }
    .body-content {
        padding: 0;
    }
    .tooltip-inner {
        min-width: initial;
        max-width: 760px;
    }
    .font_Size {
        font-size: 100%;
    }
}

/* Responsive: Less than 576 small devices */
@media (max-width: 575.98px) {
    .tooltip-inner {
        min-width: initial;
        max-width: 500px;
    }
    .font_Size {
        font-size: 90%;
    }
}
/* Smartphones (portrait) ----------- */
@media (max-width: 360px) {
    .tooltip-inner {
        min-width: initial;
        max-width: 320px;
    }
    ::-webkit-scrollbar {
        width: 1px;
    }
    .font_Size{
        font-size:80%;
    }
    .g-recaptcha {
        -moz-transform: scale(0.77);
        -ms-transform: scale(0.77);
        -o-transform: scale(0.77);
        -moz-transform-origin: 0;
        -ms-transform-origin: 0;
        -o-transform-origin: 0;
        -webkit-transform: scale(0.77);
        transform: scale(0.77);
        -webkit-transform-origin: 0 0;
        transform-origin: 0;
        filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.77,M12=0,M21=0,M22=0.77,SizingMethod='auto expand')
    }    
}
/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
}

@media print {
    /* 頁頭 */
    .navbar {
        position: fixed;
        display: block !important;
        height: 60px !important;
        background-color: transparent;
        border-bottom: 3px solid black;
    }

    .TxtSitename {
        color: black !important;
    }

    .divBtnBottomRight {
        display: none;
    }
    .hidePrint{
        display:none;
    }

    /* 去除下拉單箭頭 */
    select {
        -o-appearance: none;
        -ms-appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
    }

    .col-md-1, .col-md-2, .col-md-3, .col-md-4,
    .col-md-5, .col-md-6, .col-md-7, .col-md-8,
    .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
        float: left;
    }

    .col-md-1 {
        width: 8%;
    }

    .col-md-2 {
        width: 16%;
    }

    .col-md-3 {
        width: 25%;
    }

    .col-md-4 {
        width: 33%;
    }

    .col-md-5 {
        width: 42%;
    }

    .col-md-6 {
        width: 50%;
    }

    .col-md-7 {
        width: 58%;
    }

    .col-md-8 {
        width: 66%;
    }

    .col-md-9 {
        width: 75%;
    }

    .col-md-10 {
        width: 83%;
    }

    .col-md-11 {
        width: 92%;
    }

    .col-md-12 {
        width: 100%;
    }

}