/*
 * 如果想英文字型與中文不相同，須將英文字型放於中文字型前，這樣兩種字型都能顯示。
 * <a> 類別設定順序: link --> visited --> hover --> active
*/
/* Font Family */
@import url("//fonts.googleapis.com/css?family=Yanone+Kaffeesatz:200,300,400");
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+TC:100,300,400,500,700,900|Noto+Serif+TC:200,300,400,500,600,700,900&display=swap&subset=chinese-traditional,cyrillic,vietnamese');
@import url(https://fonts.googleapis.com/earlyaccess/cwtexkai.css); /*楷體*/

@import url(https://fonts.googleapis.com/earlyaccess/cwtexfangsong.css); /*仿宋體*/

@import url(https://fonts.googleapis.com/earlyaccess/cwtexming.css); /*明體*/

.Kai {
    font-family: 'cwTeXKai', serif;
}

.Ming {
    font-family: 'cwTeXMing', serif;
}

.Yen {
    font-family: 'cwTeXYen', serif;
}

.FangSong {
    font-family: 'cwTeXFangSong', serif;
}

.NotoSansTC {
    font-family: 'Noto Sans TC', serif;
}

/* Basic Styles */
html {
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
    
    font: 'Yanone Kaffeesatz','Noto Sans TC', sans-serif, 'Noto Serif TC', sans-serif, serif, '微軟正黑體', Arial;
}

* {
    /* for Chrome */
    -webkit-user-select: none; /* 禁止選取頁面上的內容 */
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-tap-highlight-color: transparent;
    /* for Firefox */
    -moz-user-select: none; /* 禁止選取頁面上的內容 */
    /* for IE */
    -ms-user-select: none; /* 禁止選取頁面上的內容 */
}

body, h1, h2, h3, h4, h5 {
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    font-family: "Poppins", 'Noto Sans TC', sans-serif, 'Noto Serif TC', sans-serif, serif, "微軟正黑體", Arial;
    /*font-weight: bold;*/
}

form {
    margin: auto;
    min-width: 300px;
    max-width: 800px;    
    font-family: 'Noto Sans TC', sans-serif, 'Noto Serif TC', sans-serif, serif, '微軟正黑體', Arial;
}

#formdiv {
    margin-top: 140px;    
}

#formmail {
    margin-top: 240px;
}

#logindiv {
    margin-top: 212px;
}

#chkdiv {
    margin-top: 280px;
}

footer > p {
    font-size: 12px;
    text-align: center;
    margin-top: 127px;
}

h1, button {
    font-family: "Montserrat", sans-serif
}

.nav .navbar-nav > li > p {
    color: #ffffff;
}

img {
    vertical-align: top;
    border: 0;
    max-width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    background-size: cover;
    height: auto;
}

.home-bg {    
    opacity: 0.78;
    filter: alpha(opacity=78); /* For IE8 and earlier */
    /*z-index = -1;*/
    position: absolute;
    left: 0px;
    top: 40px; /*0px;*/
    max-width: 100%;    
    width: 100%;
    height:auto;
}

.google {
    background-color: #dd4b39;
    color: white;
}

.banner-bg {
    /*
   opacity: 0.8;
    filter: alpha(opacity=80); /* For IE8 and earlier */
    position: absolute;
    left: 0px;
    width: 100%;
}

/* for Backmanage rptmenu */
.bkm-img1 {
    padding-top: 90px;
    padding-bottom: 90px;
    background-color: #ffffff;
}

.bkm-img1 h2 {
        text-align: center;
    }

.bkm-img1 h3 {
        text-align: center;
        font-weight: 300;
}

.bkm-img1 p {
    color: #767676;
}

.bkm-img1 img {
    object-fit: cover;
}

.bkm-img1 .block-content {
    display: -webkit-flex;
    flex-direction: column;
    -webkit-flex-direction: column;
    flex-basis: 100%;    
}

.bkm-img1 .mbr-figure {
        align-self: flex-start;
        flex-shrink: 0;
}

.bkm-img1 .media-container-row {
        word-wrap: break-word;
        word-break: break-word;
}
.bkm-img1 .mbr-section-subtitle {
        color: #767676;
}

.bkm-img1 .card-title {
    font-weight: 500;
}

.bkm-img1 .card-img {
    text-align: inherit;
}

.bkm-img1 .card-img span {
    font-size: 48px;
    color: #707070;
}

@media (min-width: 992px) {
    .bkm-img1 .mbr-figure {
        padding-right: 2rem;
        padding-left: 2rem;
        height: 100%;
    }
}

@media (max-width: 991px) {
    .bkm-img1 .mbr-figure {
        padding-bottom: 2rem;
        padding-top: 1rem;
    }
}

@media (max-width: 991px) and (min-width: 768px) {
    .bkm-img1 .block-content {
        flex-direction: row;
        -webkit-flex-direction: row;
        text-align: center;
    }

    .bkm-img1 .block-content .card {
        flex-basis: 100%;
    }

    .bkm-img1 .card:nth-child(1) {
        padding-bottom: 0 !important;
    }
}

.navbar-live-red {
    font-family: "Poppins", 'Noto Sans TC', '微軟正黑體'Arial,sans-serif, serif;
    background-image: -webkit-linear-gradient(top, #c13c18 0%, #c13c18 100%);
    background-image: -o-linear-gradient(top, #c13c18 0%, #c13c18 100%);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#c13c18), to(#c13c18));
    background-image: linear-gradient(to bottom, #c13c18 0%, #c13c18 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff3c3c3c', endColorstr='#ff222222', GradientType=0);
    filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
    background-repeat: repeat-x;
    border-radius: 4px;
    background-color: #c13c18;
    color: #ffffff;
}

    .navbar-live-red :hover,
    .navbar-live-red :focus {
        color: #ffffff;
        background-color: transparent;
    }

    .navbar-live-red .navbar-brand {
        color: #ffffff;
    }

    .navbar-live-red .navbar-nav-red > li > a {
        color: #ffffff;
    }

        .navbar-live-red .navbar-nav-red > li > a:hover,
        .navbar-live-red .navbar-nav-red > li > a:focus {
            color: #ffffff;
            background-color: transparent;
        }

    .navbar-live-red .navbar-nav-red > .active > a,
    .navbar-live-red .navbar-nav-red > .active > a:hover,
    .navbar-live-red .navbar-nav-red > .active > a:focus {
        color: #ffffff;
        background-color: #b63916;
    }

    .navbar-live-red .navbar-nav-red > .disabled > a,
    .navbar-live-red .navbar-nav-red > .disabled > a:hover,
    .navbar-live-red .navbar-nav-red > .disabled > a:focus {
        color: #444444;
        background-color: transparent;
    }

    .navbar-live-red .navbar-nav > .open > a,
    .navbar-live-red .navbar-nav > .active > a {
        background-image: -webkit-linear-gradient(top, #b63916 0%, #0f0f0f 100%);
        background-image: -o-linear-gradient(top, #b63916 0%, #0f0f0f 100%);
        background-image: -webkit-gradient(linear, left top, left bottom, from(#b63916), to(#0f0f0f));
        background-image: linear-gradient(to bottom, #b63916 0%, #0f0f0f 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff080808', endColorstr='#ff0f0f0f', GradientType=0);
        background-repeat: repeat-x;
        -webkit-box-shadow: inset 0 3px 9px rgba(0, 0, 0, .25);
        box-shadow: inset 0 3px 9px rgba(0, 0, 0, .25);
    }

    .navbar-live-red .navbar-brand,
    .navbar-live-red .navbar-nav > li > a {
        text-shadow: 0 0 0 rgba(255,255, 255, .25);
    }

        .navbar-live-red .navbar-brand:hover,
        .navbar-live-red .navbar-brand:focus {
            color: #ffffff;
            background-color: transparent;
        }

    .navbar-live-red .navbar-text {
        color: #ffffff;
    }

    .navbar-live-red .navbar-nav > li > a {
        color: #ffffff;
    }

        .navbar-live-red .navbar-nav > li > a:hover,
        .navbar-live-red .navbar-nav > li > a:focus {
            color: #1a0000;
            background-color: rgba(255,255,255,1);
        }

    .navbar-live-red .navbar-nav > .active > a,
    .navbar-live-red .navbar-nav > .active > a:hover,
    .navbar-live-red .navbar-nav > .active > a:focus {
        color: #ffffff;
        background-color: #b63916;
    }

    .navbar-live-red .navbar-nav > .disabled > a,
    .navbar-live-red .navbar-nav > .disabled > a:hover,
    .navbar-live-red .navbar-nav > .disabled > a:focus {
        color: #444444;
        background-color: transparent;
    }

    .navbar-live-red .navbar-toggle {
        border-color: #b63916;
    }

        .navbar-live-red .navbar-toggle:hover,
        .navbar-live-red .navbar-toggle:focus {
            background-color: #cc4019;
        }

        .navbar-live-red .navbar-toggle .icon-bar {
            background-color: #ffffff;
        }

    .navbar-live-red .navbar-collapse,
    .navbar-live-red .navbar-form {
        border-color: #e96c49;
    }

    .navbar-live-red .navbar-nav > .open > a,
    .navbar-live-red .navbar-nav > .open > a:hover,
    .navbar-live-red .navbar-nav > .open > a:focus {
        color: #ffffff;
        background-color: #b63916;
    }

    .navbar-live-red .navbar-nav > .dropdown > a:hover .caret {
        border-top-color: #ffffff;
        border-bottom-color: #ffffff;
    }

    .navbar-live-red .navbar-nav > .dropdown > a .caret {
        border-top-color: #999999;
        border-bottom-color: #999999;
    }

    .navbar-live-red .navbar-nav > .open > a .caret,
    .navbar-live-red .navbar-nav > .open > a:hover .caret,
    .navbar-live-red .navbar-nav > .open > a:focus .caret {
        border-top-color: #ffffff;
        border-bottom-color: #ffffff;
    }



.navbar-live-yellow {
    font-family: "Poppins", 'Noto Sans TC', '微軟正黑體'Arial,sans-serif, serif;
    background-image: -webkit-linear-gradient(top, #FABE00 0%, #FABE00 100%);
    background-image: -o-linear-gradient(top, #FABE00 0%, #FABE00 100%);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#FABE00), to(#FABE00));
    background-image: linear-gradient(to bottom, #FABE00 0%, #FABE00 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff3c3c3c', endColorstr='#ff222222', GradientType=0);
    filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
    background-repeat: repeat-x;
    border-radius: 4px;
    background-color: #FABE00; /* RGB(250:190:0) */
    color: #4d4d4d;
}

.navbar-live-yellow :hover,
.navbar-live-yellow :focus {
    color: #ffffff;
    background-color: transparent;
}

a.navbar-brand {
    display: block;
}

.navbar-live-yellow .navbar-brand {
    color: #4d4d4d;
}

.navbar-live-yellow .navbar-nav-yellow > li > a {
    color: #4d4d4d;
}

.navbar-live-yellow .navbar-nav-yellow > li > a:hover,
.navbar-live-yellow .navbar-nav-yellow > li > a:focus {
    color: #4d4d4d;
    background-color: transparent;
}

.navbar-live-yellow .navbar-nav-yellow > .active > a,
.navbar-live-yellow .navbar-nav-yellow > .active > a:hover,
.navbar-live-yellow .navbar-nav-yellow > .active > a:focus {
    color: #4d4d4d;
    background-color: #FABE00;
}

.navbar-live-yellow .navbar-nav-yellow > .disabled > a,
.navbar-live-yellow .navbar-nav-yellow > .disabled > a:hover,
.navbar-live-yellow .navbar-nav-yellow > .disabled > a:focus {
    color: #444444;
    background-color: transparent;
}

.navbar-live-yellow .navbar-nav > .open > a,
.navbar-live-yellow .navbar-nav > .active > a {
    background-image: -webkit-linear-gradient(top, #b63916 0%, #0f0f0f 100%);
    background-image: -o-linear-gradient(top, #b63916 0%, #0f0f0f 100%);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#b63916), to(#0f0f0f));
    background-image: linear-gradient(to bottom, #b63916 0%, #0f0f0f 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff080808', endColorstr='#ff0f0f0f', GradientType=0);
    background-repeat: repeat-x;
    -webkit-box-shadow: inset 0 3px 9px rgba(0, 0, 0, .25);
    box-shadow: inset 0 3px 9px rgba(0, 0, 0, .25);
}

.navbar-live-yellow .navbar-brand,
.navbar-live-yellow .navbar-nav > li > a {
    text-shadow: 0 0 0 rgba(255,255, 255, .25);
}

.navbar-live-yellow .navbar-brand:hover,
.navbar-live-yellow .navbar-brand:focus {
    color: #4d4d4d;
    background-color: transparent;
}

.navbar-live-yellow .navbar-text {
    color: #4d4d4d;
}

.navbar-live-yellow .navbar-nav > li > a {
    color: #4d4d4d;
}

.navbar-live-yellow .navbar-nav > li > a:hover,
.navbar-live-yellow .navbar-nav > li > a:focus {
    color: #1a0000;
    background-color: rgba(250,190,0,1);
}

.navbar-live-yellow .navbar-nav > .active > a,
.navbar-live-yellow .navbar-nav > .active > a:hover,
.navbar-live-yellow .navbar-nav > .active > a:focus {
    color: #ffffff;
    background-color: #b63916;
}

.navbar-live-yellow .navbar-nav > .disabled > a,
.navbar-live-yellow .navbar-nav > .disabled > a:hover,
.navbar-live-yellow .navbar-nav > .disabled > a:focus {
    color: #444444;
    background-color: transparent;
}

.navbar-live-yellow .navbar-toggle {
    border-color: #e6b000;
}

.navbar-live-yellow .navbar-toggle:hover,
.navbar-live-yellow .navbar-toggle:focus {
    background-color: #e6b000;
}

.navbar-live-yellow .navbar-toggle .icon-bar {
    background-color: #ffffff;
}

.navbar-live-yellow .navbar-collapse,
.navbar-live-yellow .navbar-form {
    border-color: #e6b000;
}

.navbar-live-yellow .navbar-nav > .open > a,
.navbar-live-yellow .navbar-nav > .open > a:hover,
.navbar-live-yellow .navbar-nav > .open > a:focus {
    color: #ffffff;
    background-color: #e6b000;
}

.navbar-live-yellow .navbar-yellow > .dropdown > a:hover .caret {
    border-top-color: #4d4d4d;
    border-bottom-color: #4d4d4d;
}

.navbar-live-yellow .navbar-nav > .dropdown > a .caret {
    border-top-color: #999999;
    border-bottom-color: #999999;
}

.navbar-live-yellow .navbar-nav > .open > a .caret,
.navbar-live-yellow .navbar-nav > .open > a:hover .caret,
.navbar-live-yellow .navbar-nav > .open > a:focus .caret {
    border-top-color: #4d4d4d;
    border-bottom-color: #4d4d4d;
}

#banner {
    text-align: center;
    margin-bottom: 10px;
}

#banner img {
        background-size: cover;
}
   

@media (max-width: 767px) {
    min-width: auto,
    .navbar-live-yellow .navbar-nav .open .dropdown-menu > .dropdown-header {
        border-color: #e6b000;
    }

    .navbar-live-yellow .navbar-nav .open .dropdown-menu > li > a {
        color: #999999;
    }

    .navbar-live-yellow .navbar-nav .open .dropdown-menu > li > a:hover,
    .navbar-live-yellow .navbar-nav .open .dropdown-menu > li > a:focus {
        color: #ffffff;
        background-color: transparent;
    }

    .navbar-live-yellow .navbar-nav .open .dropdown-menu > .active > a,
    .navbar-live-yellow .navbar-nav .open .dropdown-menu > .active > a:hover,
    .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a:focus {
        color: #ffffff;
        background-color: #e6b000;
    }

    .navbar-live-yellow .navbar-nav .open .dropdown-menu > .disabled > a,
    .navbar-live-yellow .navbar-nav .open .dropdown-menu > .disabled > a:hover,
    .navbar-live-yellow .navbar-nav .open .dropdown-menu > .disabled > a:focus {
        color: #444444;
        background-color: transparent;
    }

    .navbar-live-red .navbar-nav .open .dropdown-menu > .dropdown-header {
        border-color: #b63916;
    }

    .navbar-live-red .navbar-nav .open .dropdown-menu > li > a {
        color: #999999;
    }

        .navbar-live-red .navbar-nav .open .dropdown-menu > li > a:hover,
        .navbar-live-red .navbar-nav .open .dropdown-menu > li > a:focus {
            color: #ffffff;
            background-color: transparent;
        }

    .navbar-live-red .navbar-nav .open .dropdown-menu > .active > a,
    .navbar-live-red .navbar-nav .open .dropdown-menu > .active > a:hover,
    .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a:focus {
        color: #ffffff;
        background-color: #b63916;
    }

    .navbar-live-red .navbar-nav .open .dropdown-menu > .disabled > a,
    .navbar-live-red .navbar-nav .open .dropdown-menu > .disabled > a:hover,
    .navbar-live-red .navbar-nav .open .dropdown-menu > .disabled > a:focus {
        color: #444444;
        background-color: transparent;
    }
}

.navbar-live-yellow .navbar-link {
    color: #999999;
}

.navbar-live-yellow .navbar-link:hover {
    color: #ffffff;
}

.nav-h4 {
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    font-family: "Poppins", "Noto Sans TC", "微軟正黑體",sans-serif, serif;
    font-weight: bold;
    font-size: 18px;
    margin-top:5px;
}

@media only screen and (max-width: 900px), only screen and (min-width: 768px) and (max-width: 1023px) {
    body {
        min-width: auto;
    }

    .pageWidth {
        width: auto;
        padding: 0
    }

    .bg {
        width: auto;
        background-size: contain;
        padding-bottom: 24px;
        margin: 0 15px
    }

    nav li a {
        padding: 0 24px;
    }

    #banner {
        padding: 0 20px
    }

    #header1-0 P {
        text-align: center;
        font-size: 20px;
    }

    #formdiv {
        margin-top: 35px;
    }

    #formmail {
        margin-top: 35px;
    }

    #logindiv {
        margin-top: 100px;
    }

    #chkdiv {
        margin-top: 140px;
    }

    footer > p {
        font-size: 12px;
        text-align: center;
        margin-top: 40px;
    }
}

/*20191127*/
@media only screen and (max-device-width: 400px) {

    #header1-0 P {
        text-align: center;
        font-size: 12px;
    }

    #header1-0 .btnfont {
        font-size: 13px;
    }

    #header1-0 .btnfont14 {
        font-size: 14px;
    }
}

@media only screen and (max-width: 767px), only screen and (max-device-width: 480px), only screen and (max-width: 767px) and (max-device-width: 414px) {
    body {
        min-width: auto;
        padding: 50px 0 0 0
    }

    .pageWidth {
        width: auto;
    }

    .bg {
        background: none;
        width: auto;
        padding: 0;
        margin: 0 10px
    }

    #logo {
        text-align: center;
        font-size: 20px;
        line-height: 48px;
        display: block;
        margin-bottom: 15px;
    }

    #header {
        padding: 15px 0 0
    }

    #menu {
        display: block;
    }

    nav {
        border: solid 1px #e8e8e8;
        border-width: 1px 0;
        margin: 0 10px 21px;
        font-size: 15px;
    }

    nav ul {
        border: none;
        margin: 0;
        padding-bottom: 0;
    }

    nav li {
        border-top: solid 1px #e8e8e8;
        display: block;
        margin: 0;
        border-radius: 0;
    }

    nav li a {
        width: 100%;
        height: auto;
        border-radius: 0;
        line-height: 35px;
        padding: 0 !important
    }

    nav li:first-child {
        border-top: 0
    }

    #banner {
        text-align: center;
        font-size: 20px;
        padding: 0 10px
    }

    #container {
        padding-bottom: 10px;
    }

    .pageControl {
        padding: 0 10px;
    }

    #footer {
        padding-top: 20px;
        text-align: center;
        padding: 12px 0;
    }

    button {
        font-size: 14px;
    }

    #help_list {
        margin-top: 50px;
    }

    #header1-0 .btnfont {
        font-size: 13px;
    }
    #header1-0 .btnfont14 {
        font-size: 14px;
    }
}


@media (min-width:414px), (min-width:405px), (max-width: 250px) {
    #header1-0 P {
        text-align: center;
        font-size: 16px;
    }

    #header1-0 .btn {
        font-size: 12px;
    }

}


@media only screen and (max-width: 767px), only screen and (max-device-width: 480px), only screen and (max-width: 767px) {
    body {
        min-width: auto;
        /*padding: 50px 0 0 0*/
    }

    .pageWidth {
        width: auto;
    }

    .bg {
        background: none;
        width: auto;
        padding: 0;
        margin: 0 10px
    }

    #livemenu {
        /*float: left !important*/
        text-align: center !important;
    }

    #logo {
        text-align: center;
        font-size: 20px;
        line-height: 48px;
        display: block;
        margin-bottom: 15px;
    }

    #header {
        padding: 15px 0 0
    }

    #menu {
        display: block;
    }

    #formdiv {
        margin-top: 15px;        
    }

    #formmail {
        margin-top: 15px;
    }

    #logindiv {
        margin-top: 30px;
    }

    footer > p {
        font-size: 12px;
        text-align: center;
        margin-top: 50px;
    }


    nav {
        border: solid 1px #e8e8e8;
        border-width: 1px 0;
        margin: 0 10px 21px;
        font-size: 15px;
    }

    nav li {
        border-top: solid 1px #e8e8e8;
        display: block;
        margin: 0;
        border-radius: 0;
    }

    nav li a {
        width: 100%;
        height: auto;
        border-radius: 0;
        line-height: 35px;
        padding: 0 !important
    }

    nav li:first-child {
        border-top: 0
    }

    #banner {
        text-align: center;
        font-size: 20px;
        padding: 0 10px
    }

    #container {
        padding-bottom: 10px;
    }

    .pageControl {
        padding: 0 10px;
    }

    #footer {
        text-align: center;
        padding: 12px 0;
    }

    button {
        font-size: 14px;
    }
}

/***/
/* Glyphicon Green */
span.glyphicon-leaf {
    color: #5cb85c;
}

/* Button Color Green*/
.p-green button {
    background: #5cb85c;
}

/* Glyphicon Yellow */
span.glyphicon-send {
    color: #f0ad4e;
}

/* Glyphicon blue */
span.glyphicon-globe {
    color: #428bca;
}

/* Glyphicon Red */
span.glyphicon-stats {
    color: #d9534f;
}

.btn-outline {
    color: inherit;
    transition: all .8s;
    background-color: transparent;
}

.btn-primary.btn-outline {
    color: #428bca;
    background-color: transparent;
}

.btn-success .btn-outline {
    color: #5cb85c;
    background-color: transparent;
}

.btn-info .btn-outline {
    color: #5bc0de;
    background-color: transparent;
}

.btn-warning .btn-outline {
    color: #f0ad4e;
    background-color: transparent;
}

.btn-danger .btn-outline {
    color: #d9534f;
    background-color: transparent;
}

.btn-primary.btn-outline:hover,
.btn-success.btn-outline:hover,
.btn-info.btn-outline:hover,
.btn-warning.btn-outline:hover,
.btn-danger.btn-outline:hover {
    color: #fff;
}

.btn-outline .btn-lg 
{
    background-color: transparent;
    padding: 10px, 10px, 40px, 40px;
}

.rptlogin-bg {
    background: url(../img/img_1.jpg) no-repeat;
    opacity: 0.3;
    filter: alpha(opacity=30); /* For IE8 and earlier */
    position: absolute;
    left: 0px;
    width: 100%;
    height: 75%;
}

.login-bg {
    background: url(../img/img_3.jpg) no-repeat;
    opacity: 0.5;
    filter: alpha(opacity=50);   /* For IE8 and earlier */
    position: absolute;
    left: 0px;
    width: 100%;
    height: 75%;
}

.help-bg {
    background: url(../img/img_9.jpg) no-repeat;
    opacity: 0.53;
    filter: alpha(opacity=53); /* For IE8 and earlier */
    position: absolute;
    left: 0px;
    width: 100%;
    height: auto;
}


.login-bg-block {
    left: 0px;
    width: 100%;
    height: auto;
    background: url(../img/img_2.jpg) no-repeat;
    background-size: auto;
    opacity: 0.75;
    filter: alpha(opacity=75); /* For IE8 and earlier */
    position: inherit;
}


.inner-banner-bg {
    background: url(../img/img_help.jpg) no-repeat;
    background-size: cover;    
    margin: 0;
    padding: 0;
    opacity: 0.6;
    filter: alpha(opacity=60); /* For IE8 and earlier */
    position: absolute;
    left: 0px;
    width: 100%;
}

.inner-banner-w3ls {
    background: url(../img/img_help.jpg) no-repeat center;
    background-size: cover;
    opacity: 0.75;
    filter: alpha(opacity=75); /* For IE8 and earlier */
    min-height: 250px;
    max-height: 200px;
    position: absolute;
    left: 0px;
    z-index: 0;
    width: 100%;
}

.inner-banner {
    background: url(../img/img_9.jpg)no-repeat 0px -150px;
    opacity: 0.3;
    filter: alpha(opacity=30); /* For IE8 and earlier */
    background-size: cover;
    position: absolute;
    left: 0px;
    z-index: -1;
    min-height: 240px;
    width: 100%;    
}

.inner-layer {    
    min-height: 5px;
}

#help_list {
    margin-top: 250px;
}

#projects {
    margin-top: 80px;
}

#newuserLink {
    text-decoration: none;
}

.help-lable-title {
    color: #1a0d00;
    display: inline-block;
    margin-top: 15px;
}

.cid-custarea {
    /*
    padding-top: 90px;
    padding-bottom: 90px;
    */
    /*background-image: url('../img/img_1.jpg') no-repeat;*/
    /*background: url(../img/img_1.jpg);*/ 
    /*opacity: 0.53;*/
    /*filter: alpha(opacity=53);*/ /* For IE8 and earlier */
    position: absolute;
    left: 0px;    
    width: 100%;
    height: auto;
}
.cid-custarea .mbr-section-subtitle {
    color: #767676;
}

.cid-custarea .container-table {
    margin: 0 auto;
}

.cid-custarea .scroll {
    overflow-x: auto;
    padding: 0;
}

.cid-custarea .dataTables_wrapper {
    display: block;
}

.cid-custarea .dataTables_wrapper .search {
    margin-bottom: .5rem;
}

.cid-custarea .dataTables_wrapper .table {
    overflow-x: auto;
}

.cid-custarea table {
    width: 100% !important;
    margin-top: 6px;
    border: 1px solid #cccccc;
    margin-bottom: 0;
}

.cid-custarea table th {
    border-top: none;
    transition: all .2s;
    border-bottom: none;
}

.cid-custarea table th:hover {
    background: #cccccc;
    color: #000000;
}

.cid-custarea table td {
    border-top: 1px solid #cccccc;
}

.cid-custarea table.table {
    background: #ffffff;
}

.cid-custarea .dataTables_filter {
    text-align: right;
    margin-bottom: .5rem;
}

.cid-custarea .dataTables_filter label {
    display: inline;
    white-space: normal !important;
}

.cid-custarea .dataTables_filter input {    
    width: auto;
    margin-left: .5rem;
    border-radius: 100px;
    padding-left: 1rem;
}

.cid-custarea .dataTables_info {
padding-bottom: 1rem;
padding-top: 1rem;
white-space: normal !important;
}

.mbr-overlay {
    background-color: #000;
    bottom: 0;
    left: 0;
    opacity: .5;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 0;
    pointer-events: none;
}

/*! Full-screen */
.mbr-fullscreen .mbr-overlay {
    min-height: 100vh;
}

.cid-container {
    position: relative;
    word-wrap: break-word;
}

.sub-main-w3 {
    display: -webkit-flex;
    display: -webkit-box;
    display: -moz-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
}

.sub-main-w3 form {
    max-width: 600px;
    margin: 0 5vw;
    background: rgba(255, 255, 255, 0.19);
    padding: 3.5vw;
    box-sizing: border-box;
    display: -webkit-flex;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    box-shadow: 0px 0px 7px 1px rgba(0, 0, 0, 0.33);
}

#pwd {
    pattern ="(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(/\s/g'').{20,}";
}