body {
  background-color: #F8F8F8;
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  font-weight: normal;
  line-height: 1.2em;
  margin: 15px;
}

h1, p {
  color: #333;
}

#sample_container_id {
  width: 100%;
  height: 400px;
  position: relative;
  border: 1px solid #ccc;
  background-color: #fff;
}

#sample_text_id {
  font-size: 24pt;
  text-align: center;
  margin-top: 140px;
  -webkit-user-select: none;
  user-select: none;
}

.main-menu {
  background-color: #8F8;
  font-size: 24pt;
  text-align: center;
}

.main-MenuBar {
  background: #8000FF;
}

/**
 * @purpose 主面板樣式
 * @author Alan 2023/7/7
 */
.main-panel {
  position: fixed;
  width: 100%;
  height: 100%;
}

.tree-comp-bg {
  background: #FF8080;
}

/**
 * @purpose 訊息用暗紅色
 * @author Alan 2020/9/11
 */
.darkred {
  color:darkred;
}

/**
 * @purpose 提醒用紅色文字
 * @author Alan 2020/9/11
 */
.warning-red{
  color:red;
}

/**
 * @purpose 文字顏色不同的button
 * @author John 2020/10/29
 */
.buttonRed {color: red;}
.buttonOrange {color: orange;}
.buttonYellow {color: yellow;}
.buttonGreen {color: green;}
.buttonBlue {color: blue;}
.buttonIndigo {color: indigo;}
.buttonPurple {color: purple;}
/** button css參考範例
.dwt-Button {
  margin: 0;
  padding: 4px 6px;
  text-decoration: none;
  cursor: pointer;
  cursor: hand;
  font-size: 15px;
  background: url("images/hborder.png") repeat-x 0px -2077px;
  border:1px solid #bbb;
  border-bottom: 1px solid #a0a0a0;
  border-radius: 3px;
  -moz-border-radius: 3px;
}
.button {
  background-color: #4CAF50; // Green
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}
*/

/**
 * @purpose 按鈕將外框加粗、塗上黑色，以顯示他是被選擇的
 * @author Alan 2021/5/17
 */
/* 將可選擇的按鈕 border 加粗*/
button.button-select {
  border:2px solid #bbb;
  border-bottom: 2px solid #a0a0a0;
}
/* 滑鼠移到按鈕上方，border變黑*/
button.button-select:hover {
  border:2px solid black;
  border-bottom: 2px solid black;
}
/* 將按下得按鈕設定為選擇，border變黑*/
button.button-select.selected {
  border:2px solid black;
  border-bottom: 2px solid black;
}
/**
 * @purpose 只在強調的文字顏色調整為紅色
 * @author Alan 2021/12/27
 */
.emphasize-red em {
  color : red;
}

/**
 * @purpose 指定顏色類別顯示指定顏色
 * @author Alan 2022/1/3
 */
.designate-color .color-red{
  color : red;
}
.designate-color .color-blue{
  color : blue;
}
.designate-color .color-green{
  color : green;
}

/**
 * @purpose 指定元素邊框: 實線 1px (未指定顏色，預設黑色)
 * @author Alan 2022/6/22
 */
.borderBottom {
  border-bottom: solid 1px;
}
.borderRight {
  border-right: solid 1px;
}

/**
 * @purpose 指定元素內部兩元素間邊框無間距，主要用於FlexTable內兩隔之間不要有間距
 * @author Alan 2022/6/22
 */
.noBorderSpacing {
  border-spacing: 0;
}

/**
 * @purpose 垂直至頂
 * @author Alan 2022/8/8
 */
.alignTop {
  vertical-align: top;
}

/**
 * @purpose 文字水平置中
 * @author Alan 2022/12/6
 */
.alignCenter {
  text-align: center;
}

/**
 * @purpose 表格列置頂
 * @author Alan 2022/12/13
 */
.tableRowFixedTop {
  position: sticky;
  top: 0;
}