/*!Start Bootstrap - Small Business (http://startbootstrap.com/template-overviews/small-business)*/

/*@import url(https://fonts.googleapis.com/earlyaccess/cwtexyen.css);*/
@import url(//fonts.googleapis.com/earlyaccess/notosanstc.css);


/*media queries http://bootstrap.hexschool.com/docs/4.2/layout/overview/ */


body { 
        font-family: 'Noto Sans TC', sans-serif;
        background-color :#FFFFFF ;
    }

@media screen and (max-width: 990px) {
    body { padding-top: 30px;
    background-color: #FFFFFF   !important;
    }
}

@media  screen and (min-width: 991px) {
    body { padding-top: 40px;
    background-color:#FFFFFF  !important;
    }
}

.leftmenu {
    color : white ;
    background-color: #00e600;
}
.leftmenu-active {
    color : white  ;
    background-color: #f29f10;
}

.cus-bg-yellow {
  background-color: #f4f49d  !important;
}
.bg-blue {
  background-color: #1f1f60  !important;
}

.cus-smallitem {
    color:green; 
    padding:5px; 
    border:solid ; 
    border-width :thin ;
    border-color:green; 
    border-radius :3px;
}

.cus-box-shadow {
/*    max-width: 700px;
    max-height: 630px;*/
    overflow: hidden;
    margin: 30px auto 0;
    box-shadow: 0 0 40px #202020;
}

/* Position */
.cus-center {
    position: relative;          /* where the next element will be automatically positioned */
    display: inline-block;       /* causes element width to shrink to fit content */
    left: 50%;                   /* moves left side of image/element to center of parent element */
    transform: translate(-50%);  /* centers image/element on "left: 50%" position */
}
.cus-right {
    position: relative;          /* where the next element will be automatically positioned */
    display: inline-block;       /* causes element width to shrink to fit content */
    left: 100%;                   /* moves left side of image/element to center of parent element */
    transform: translate(-50%);  /* centers image/element on "left: 50%" position */
}     
.cus-center-orange {
    text-align: center;
    color : orange;
}


/* Link */
.cus-link-underline-large:link {
    text-decoration: underline;
}
.cus-link-underline-large:hover {
    font-size:101%;
    color :orange ;
}


/* NavBar*/
    .nav-link {
        color: white  !important; 
    }

/* End NavBar */

.custom-nav-bg {
  background-color: #357fbb !important;
}

.padding-15-50 {padding:15px 50px;}
.padding-10-30 {padding:10px 30px;}
.padding-20-50 {padding:20px 50px;}

.custom-nav-title {
  font-size: 120%;
}

.cus_hover_row {background-color :#aaa;}

.custom-Label-Brown {
    background-color : #EFF3FB;
    color: brown ;
    font-size: 120%;
}

/* img 自動調整寬度大小,但不超過原尺寸   */
.custom-img-autowidth{
        max-width: 100%;       
        height: auto;
}

/*link 的 footeremail class   */
.footeremail:link {color: white  ;  /* unvisited link */
        text-decoration: underline;  }  
.footeremail:visited {color: white;} /* visited link */
.footeremail:hover {color: yellow;} /* mouse over link */
.footeremail:active {color: yellow ;} /* selected link */
.footeremail.highlight:hover {color: #ff0000; } 

/*TxtBox 要有資料   */
.custom-Txt-MustData {
    background-color: #f1aff5 ;
}

/*TxtBox 不一定要有資料   */
.custom-Txt-NotData {
    background-color: #cff7d4;
    margin-bottom: 0px;
}

/*TxtBox 不能Keyin   */
.custom-Txt-NotKeyin {
    background-color: #ffffff ;
    border :none 
}


     /* ----- Modal- left side ----- */
        .modal.left .modal-dialog {
	        position:fixed;
	        right: 0;
	        margin: auto;
	        width: 480px;
	        height: 100%;
	        -webkit-transform: translate3d(0%, 0, 0);
	        -ms-transform: translate3d(0%, 0, 0);
	        -o-transform: translate3d(0%, 0, 0);
	        transform: translate3d(0%, 0, 0);
        }

        .modal.left .modal-content {
	        height: 100%;
	        overflow-y: auto;
        }

        .modal.right .modal-body {
	        padding: 15px 15px 80px;
        }

        .modal.right.fade .modal-dialog {
	        left: -480px;
	        -webkit-transition: opacity 0.3s linear, left 0.3s ease-out;
	        -moz-transition: opacity 0.3s linear, left 0.3s ease-out;
	        -o-transition: opacity 0.3s linear, left 0.3s ease-out;
	        transition: opacity 0.3s linear, left 0.3s ease-out;
        }

        .modal.right.fade.show .modal-dialog {
	        right: 0;
        }

        /* ----- MODAL STYLE ----- */
        .modal-content {
	        border-radius: 0;
	        border: none;
        }

        .modal-header {
	        border-bottom-color: #eeeeee;
	        background-color: #fafafa;
        }

        /* ----- v CAN BE DELETED v ----- */
        body {
	        background-color: #78909c;
        }

        .demo {
	        padding-top: 60px;
	        padding-bottom: 110px;
        }

        .btn-demo {
	        margin: 15px;
	        padding: 10px 15px;
	        border-radius: 0;
	        font-size: 16px;
	        background-color: #ffffff;
        }

        .btn-demo:focus {
	        outline: 0;
        }