.tip {
  position: relative;
}
.tip:before {
  display: none;
  position: absolute;
  top: auto;
  right: 50%;
  bottom: -7px;
  margin-right: -5px;
  width: 0;
  height: 0;
  content: '';
  border: 5px solid transparent;
  border-bottom-color: rgba(0, 0, 0, 0.9);
  pointer-events: none;
  z-index: 10000;
}
.tip:after {
  display: none;
  position: absolute;
  top: 100%;
  right: 50%;
  padding: 0 10px;
  border-radius: 3px;
  background-color: rgba(0, 0, 0, 0.9);
  color: #fff;
  font-size: 11px;
  font-weight: 500;
  content: attr(aria-label);
  white-space: pre;
  z-index: 10000;
  margin-top: 5px;
  line-height: 26px;
  transform: translateX(50%);
}


.ion {
	-webkit-touch-callout: text;
	-webkit-user-select: text;
	-khtml-user-select: text;
	-moz-user-select: text;
	-ms-user-select: text;
	user-select: text;
}
.rotate90 {
	display: inline-block;
    -moz-transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
}
.rotate180 {
	display: inline-block;
    -moz-transform: rotate(-180deg);
    -webkit-transform: rotate(-180deg);
    -o-transform: rotate(-180deg);
    -ms-transform: rotate(-180deg);
    transform: rotate(-180deg);
}
.rotate270 {
	display: inline-block;
    -moz-transform: rotate(-270deg);
    -webkit-transform: rotate(-270deg);
    -o-transform: rotate(-270deg);
    -ms-transform: rotate(-270deg);
    transform: rotate(-270deg);
}
/*水平翻轉*/
.flipx {
	display: inline-block;
    -moz-transform:scaleX(-1);
    -webkit-transform:scaleX(-1);
    -o-transform:scaleX(-1);
    transform:scaleX(-1);
    /*IE*/
    filter:FlipH;
}

/*垂直翻轉*/
.flipy {
	display: inline-block;
    -moz-transform:scaleY(-1);
    -webkit-transform:scaleY(-1);
    -o-transform:scaleY(-1);
    transform:scaleY(-1);
    /*IE*/
    filter:FlipV;
}
.font_a {font-family:"Microsoft JhengHei","微軟正黑體",Arial,sans-serif;}
.size06 {font-size: 0.6em;}
.size07 {font-size: 0.7em;}
.size08 {font-size: 0.8em;}
.size09 {font-size: 0.9em;}
.size11 {font-size: 1.1em;}
.size12 {font-size: 1.2em;}
.size13 {font-size: 1.3em;}
.size14 {font-size: 1.4em;}
.size15 {font-size: 1.5em;}
.size16 {font-size: 1.6em;}
.size17 {font-size: 1.7em;}
.size18 {font-size: 1.8em;}
.size19 {font-size: 1.9em;}
.size20 {font-size: 2em;}
.size21 {font-size: 2.1em;}
.size22 {font-size: 2.2em;}
.size23 {font-size: 2.3em;}
.size24 {font-size: 2.4em;}
.size25 {font-size: 2.5em;}
.size26 {font-size: 2.6em;}
.size27 {font-size: 2.7em;}
.size28 {font-size: 2.8em;}
.size29 {font-size: 2.9em;}
.size30 {font-size: 3em;}
.size31 {font-size: 3.1em;}
.size32 {font-size: 3.2em;}
.size33 {font-size: 3.3em;}
.size34 {font-size: 3.4em;}
.size35 {font-size: 3.5em;}
.size36 {font-size: 3.6em;}
.size37 {font-size: 3.7em;}
.size38 {font-size: 3.8em;}
.size39 {font-size: 3.9em;}
.size40 {font-size: 4em;}
.size41 {font-size: 4.1em;}
.size42 {font-size: 4.2em;}
.size43 {font-size: 4.3em;}
.size44 {font-size: 4.4em;}
.size45 {font-size: 4.5em;}
.size46 {font-size: 4.6em;}
.size47 {font-size: 4.7em;}
.size48 {font-size: 4.8em;}
.size49 {font-size: 4.9em;}
.size50 {font-size: 5.0em;}
/*
.black {color:black}
.white {color:white}
.red {color:red}
.blue {color:blue}
.green {color:green}
.yellow {color:yellow}
.gray {color:#ccc;}
.weight {font-weight:700;}
.blue01 {color:#39B1D6;}
.blue02 {color:#20809B;}
.goldenrod {color:#DAA520;} 
*/
.vtop {vertical-align: top;}
.vmiddle {vertical-align: middle;}
.vbottom {vertical-align: bottom;}
.project_menubar {
	width:auto;
	display: block;
	overflow: hidden;
	font-size:1.2em;
	line-height: 18px;
	text-decoration: none;
	padding: 0;
	margin: 0;
}
.project_bar01 {
width:100%;
height:auto;
background-color: #FDFDFF;
padding: 3px 0 8px 0;
border-bottom: 1px solid #ddd;
}


/* 以下聊天室專用 */
.speech-bubble-left {
	position: relative;
	background: #eee;
	border-radius: .4em;
	margin-left: 10px;
}

.speech-bubble-left:after {
	content: '';
	position: absolute;
	left: 0;
	top: 20px;
	width: 0;
	height: 0;
	border: 16px solid transparent;
	border-right-color: #eee;
	border-left: 0;
	border-top: 0;
	margin-top: -8px;
	margin-left: -10px;
}


.speech-bubble-right {
	position: relative;
	background: #a8d02f;
	border-radius: .4em;
	padding: 10px;
	margin-right: 20px;
}

.speech-bubble-right:after {
	content: '';
	position: absolute;
	right: 0;
	top: 20px;
	width: 0;
	height: 0;
	border: 16px solid transparent;
	border-left-color: #a8d02f;
	border-right: 0;
	border-top: 0;
	margin-top: -8px;
	margin-right: -10px;
}
/*省略號*/
.details {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis
}

.card {
    border: 0;
}

/*
.table > thead > tr > th, .table > tbody > tr > td {
    border: 0;
	padding: 0;
	margin: 0;
}
*/


/* 有關顏色的設定 */
/*

  COLORS
  Better default colors for the web

*/
/* 

   VARIABLES

   - Cool
   - Warm
   - Gray Scale

*/
/*

   SKINS
   - Backgrounds
   - Colors
   - Border colors
   - SVG fills
   - SVG Strokes

*/

/* 自定 */
.weight {font-weight:700;}
.blue01 {color:#39B1D6;}
.blue02 {color:#20809B;}
.goldenrod {color:#DAA520;} 

/* Backgrounds */
.bg-navy { background-color: #001F3F; }
.bg-blue { background-color: #0074D9; }
.bg-aqua { background-color: #7FDBFF; }
.bg-teal { background-color: #39CCCC; }
.bg-olive { background-color: #3D9970; }
.bg-green { background-color: #2ECC40; }
.bg-lime { background-color: #01FF70; }
.bg-yellow { background-color: #FFDC00; }
.bg-orange { background-color: #FF851B; }
.bg-red { background-color: #FF4136; }
.bg-fuchsia { background-color: #F012BE; }
.bg-purple { background-color: #B10DC9; }
.bg-maroon { background-color: #85144B; }
.bg-white { background-color: #FFFFFF; }
.bg-gray { background-color: #AAAAAA; }
.bg-silver { background-color: #DDDDDD; }
.bg-black { background-color: #111111; }
/* Colors */
.navy { color: #001F3F; }
.blue { color: #0074D9; }
.aqua { color: #7FDBFF; }
.teal { color: #39CCCC; }
.olive { color: #3D9970; }
.green { color: #2ECC40; }
.lime { color: #01FF70; }
.yellow { color: #FFDC00; }
.orange { color: #FF851B; }
.red { color: #FF4136; }
.fuchsia { color: #F012BE; }
.purple { color: #B10DC9; }
.maroon { color: #85144B; }
.white { color: #FFFFFF; }
.silver { color: #DDDDDD; }
.gray { color: #AAAAAA; }
.black { color: #111111; }
/* Border colors 

   Use with another border utility that sets border-width and style 
   i.e .border { border-width: 1px); border-style: solid); }     
*/
.border--navy { border-color: #001F3F; }
.border--blue { border-color: #0074D9; }
.border--aqua { border-color: #7FDBFF; }
.border--teal { border-color: #39CCCC; }
.border--olive { border-color: #3D9970; }
.border--green { border-color: #2ECC40; }
.border--lime { border-color: #01FF70; }
.border--yellow { border-color: #FFDC00; }
.border--orange { border-color: #FF851B; }
.border--red { border-color: #FF4136; }
.border--fuchsia { border-color: #F012BE; }
.border--purple { border-color: #B10DC9; }
.border--maroon { border-color: #85144B; }
.border--white { border-color: #FFFFFF; }
.border--gray { border-color: #AAAAAA; }
.border--silver { border-color: #DDDDDD; }
.border--black { border-color: #111111; }
/* Fills for SVG */
.fill-navy { fill: #001F3F; }
.fill-blue { fill: #0074D9; }
.fill-aqua { fill: #7FDBFF; }
.fill-teal { fill: #39CCCC; }
.fill-olive { fill: #3D9970; }
.fill-green { fill: #2ECC40; }
.fill-lime { fill: #01FF70; }
.fill-yellow { fill: #FFDC00; }
.fill-orange { fill: #FF851B; }
.fill-red { fill: #FF4136; }
.fill-fuchsia { fill: #F012BE; }
.fill-purple { fill: #B10DC9; }
.fill-maroon { fill: #85144B; }
.fill-white { fill: #FFFFFF; }
.fill-gray { fill: #AAAAAA; }
.fill-silver { fill: #DDDDDD; }
.fill-black { fill: #111111; }
/* Strokes for SVG */
.stroke-navy { stroke: #001F3F; }
.stroke-blue { stroke: #0074D9; }
.stroke-aqua { stroke: #7FDBFF; }
.stroke-teal { stroke: #39CCCC; }
.stroke-olive { stroke: #3D9970; }
.stroke-green { stroke: #2ECC40; }
.stroke-lime { stroke: #01FF70; }
.stroke-yellow { stroke: #FFDC00; }
.stroke-orange { stroke: #FF851B; }
.stroke-red { stroke: #FF4136; }
.stroke-fuchsia { stroke: #F012BE; }
.stroke-purple { stroke: #B10DC9; }
.stroke-maroon { stroke: #85144B; }
.stroke-white { stroke: #FFFFFF; }
.stroke-gray { stroke: #AAAAAA; }
.stroke-silver { stroke: #DDDDDD; }
.stroke-black { stroke: #111111; }

.row.no-gutters {
  margin-right: 0;
  margin-left: 0;

  & > [class^="col-"],
  & > [class*=" col-"] {
    padding-right: 0;
    padding-left: 0;
  }
}





.navbar {
    padding: 15px 10px;
    background: #fff;
    border: none;
    border-radius: 0;
    margin-bottom: 40px;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
}

.navbar-btn {
    box-shadow: none;
    outline: none !important;
    border: none;
}

.line {
    width: 100%;
    height: 1px;
    border-bottom: 1px dashed #ddd;
    margin: 40px 0;
}


/* ---------------------------------------------------
    sidebar STYLE
----------------------------------------------------- */

#sidebar {
    width: 250px;
    position: fixed;
    top: 0;
    left: -250px;
    height: 100vh;
    /*z-index: 999;*/
    /* background: #7386D5; */
    background: #111111;
    color: #fff;
    transition: all 0.3s;
    overflow-y: scroll;
    box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);
}

#sidebar.active {
    left: 0;
}

#dismiss {
    width: 35px;
    height: 35px;
    line-height: 35px;
    text-align: center;
    /*background: #7386D5;*/
    background: #333333;
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

#dismiss:hover {
    background: #fff;
    color: #7386D5;
}

.overlay {
    display: none;
    position: fixed;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.7);
    z-index: 998;
    opacity: 0;
    transition: all 0.5s ease-in-out;
}
.overlay.active {
    display: block;
    opacity: 1;
}

#sidebar .sidebar-header {
    padding: 20px;
    /* background: #6d7fcc; */
    background: #333333;
}

#sidebar ul.components {
    padding: 20px 0;
    border-bottom: 1px solid #47748b;
}

#sidebar ul p {
    color: #fff;
    padding: 10px;
}

#sidebar ul li a {
    padding: 10px;
    font-size: 1.1em;
    display: block;
}

#sidebar ul li a:hover {
    /* color: #7386D5; */
    color: #000000;
    background: #fff;
}

#sidebar ul li.active>a,
a[aria-expanded="true"] {
    color: #fff;
    /*background: #6d7fcc;*/
    background: #222222;
}

a[data-toggle="collapse"] {
    position: relative;
}

.dropdown-toggle::after {
    display: block;
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
}

ul ul a {
    font-size: 0.9em !important;
    padding-left: 30px !important;
    /*background: #6d7fcc;*/
    background: #222222;
}

ul.CTAs {
    padding: 20px;
}

ul.CTAs a {
    text-align: center;
    font-size: 0.9em !important;
    display: block;
    border-radius: 5px;
    margin-bottom: 5px;
}

a.download {
    background: #fff;
    color: #7386D5;
}

a.article,
a.article:hover {
    background: #6d7fcc !important;
    color: #fff !important;
}


hr {
  margin-top: 1rem;
  margin-bottom: 1rem;
  border: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.mysidebarlink a {
	color:#ccc;
	text-decoration:none;
	font-family:"Microsoft JhengHei","微軟正黑體",Arial,sans-serif;
}
.mysidebarlink a:hover {
	color:#000;
	text-decoration:none;
	font-weight:700;
}


.mylink a {
	color:#999;
	text-decoration:none;
	font-family:"Microsoft JhengHei","微軟正黑體",Arial,sans-serif;
}
.mylink a:hover {
	color:#000;
	text-decoration:none;
	font-weight:700;
}


/* 水平捲動, 適合手機瀏覽 */
.scrolling-wrapper {
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  
  .card {
    display: inline-block;
  }
  
}


/* 以下可設定多行文字，若最後一行超出框格，則顯示省略號*/
.block-with-text {
  /* hide text if it more than N lines  */
  overflow: hidden;
  /* for set '...' in absolute position */
  position: relative; 
  /* use this value to count block height */
  line-height: 1.2em;
  /* max-height = line-height (1.2) * lines max number (3) */
  max-height: 3.6em; 
  /* fix problem when last visible word doesn't adjoin right side  */
  text-align: justify;
  
  /* */
  margin-right: -1em;
  padding-right: 1em;
}
.block-with-text:before {
  /* points in the end */
  content: '...';
  /* absolute position */
  position: absolute;
  /* set position to right bottom corner of block */
  right: 0;
  bottom: 0;
}
.block-with-text:after {
  /* points in the end */
  content: '';
  /* absolute position */
  position: absolute;
  /* set position to right bottom corner of text */
  right: 0;
  width: 1em;
  /* set width and height */
  height: 1em;
  margin-top: 0.2em;
  background: white;
}



.cd-auto-hide-header {
  position: fixed;
  z-index: 999;
  top: 0;
  left: 0;
  width: 100%;
  height: 70px;
  transition: transform .5s;
}
.cd-auto-hide-header.is-hidden {
  transform: translateY(-100%);
}


/* 自動調整大小 */
.iframe-container {
  overflow: hidden;
  padding-top: 56.25%;
  position: relative;
}
 
.iframe-container iframe {
   border: 0;
   height: 100%;
   left: 0;
   position: absolute;
   top: 0;
   width: 100%;
}
 
/* 4x3 Aspect Ratio */
.iframe-container-4x3 {
  padding-top: 75%;
}



/***************************************
以下設定可調整 bootstrap row col 間距
****************************************/
.row {
	/*向左右兩邊凸出15px*/
	/*
	margin-right: -5px; 
	margin-left: -5px;
	 */
	margin-right: 0; 
	margin-left: 0;
}
 
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
	/*向左右兩邊內陷15px，這是製造每個col之間的空隙*/
	position: relative;
	min-height: 1px;
	/*
	padding-right: 5px;
	padding-left: 5px;
	*/
	padding-right: 0;
	padding-left: 0;
}




hr.style_a { 
  border: 0; 
  height: 1px; 
  background-image: -webkit-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
  background-image: -moz-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
  background-image: -ms-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
  background-image: -o-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0); 
}

hr.style_b {
  border: 0; 
  height: 1px; 
  background-image: -webkit-linear-gradient(left, #2F2F30, #8c8b8b, #2F2F30);
  background-image: -moz-linear-gradient(left, #2F2F30, #8c8b8b, #2F2F30);
  background-image: -ms-linear-gradient(left, #2F2F30, #8c8b8b, #2F2F30);
  background-image: -o-linear-gradient(left, #2F2F30, #8c8b8b, #2F2F30); 
}

hr.style_c {
  border: 0; 
  height: 1px; 
  background-image: -webkit-linear-gradient(left, #0CBDE2, #ffffff, #0CBDE2);
  background-image: -moz-linear-gradient(left, #0CBDE2, #ffffff, #0CBDE2);
  background-image: -ms-linear-gradient(left, #0CBDE2, #ffffff, #0CBDE2);
  background-image: -o-linear-gradient(left, #0CBDE2, #ffffff, #0CBDE2); 
}



.blink {
    animation-duration: 1s;
    animation-name: blink;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: ease-in-out;
}
@keyframes blink {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}


::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: #FFBFBF;
    opacity: 1; /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: #FFBFBF;
}

::-ms-input-placeholder { /* Microsoft Edge */
    color: #FFBFBF;
}


.ellipsis {
overflow : hidden;
text-overflow : ellipsis;
white-space : nowrap;
}

/*
::-webkit-scrollbar {
display: none;
}
*/

.ellipsis2 { /* 多行省略 */
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2; /* 可更改此行數字，即可多行省略 */
}