/* ===== Resets and Housekeeping ===== */
/** {
  padding: 0;
  margin: 0;
}*/

html {
  font-size: 16px;
  font-family: "微軟正黑體";
}

/*body {
  background: #eeebe7;
  padding: 100px 20px;
  text-align: center;
}*/


/* ===== Select Box ===== */
.dropdownBtn {
  font-size: 16px;
  display: inline-block;
  /*margin: 3em 2em;*/
  position: relative;
  cursor: pointer;

  height: 33px;
  width: 271px;
  line-height: 33px;
  background: #FFFFFF;
  /*float: left;*/
  /*padding-left: 15px;*/
  border: solid 1px #BEC3DD;
  border-radius: 5px;
  color: #4F5B9A;
  font-size: 16px;
  -webkit-appearance: none;  /*Removes default chrome and safari style*/
  -moz-appearance: none;  /*Removes default style Firefox*/
  outline: none;
  float: left;
  margin-right: 10px
}
.dropdownBtn:last-child{
  margin-right: 0;
}
.dropdownBtn::before {
  display: inline-block;
  width: 0;
  height: 0;
  right:15px;
  top:15px;
  position: absolute;
  vertical-align: middle;
  content: "";
  border-top: 6px solid;
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
}

.dropdownBtn.active::before {
  -webkit-transform: rotateX(-180deg);
  -ms-transform: rotateX(-180deg);
          transform: rotateX(-180deg);
  color: #4F5B9A;
}

.dropdownBtn:hover {
  background: #FBFBFB;
  /*box-shadow: 0 0px 10px rgba(172, 184, 248, .8);*/
  /*color: #000000;*/
}

.dropdownPlaceholder {
  display: block;
  font-size: 16px;
  color: #4F5B9A;
  /*padding: 0.2em 0.5em;*/
  text-align: left;
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  visibility: visible;
  padding-left: 8px;
}

.dropdownPlaceholder:hover{
  color: #000000;
}
/*.dropdownBtn.active .dropdownPlaceholder {
  visibility: hidden;
}

.dropdownPlaceholder::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0.2em 0.5em;
  content: attr(data-placeholder);
  visibility: hidden;
}

.dropdownBtn.active .dropdownPlaceholder::before {
  visibility: visible;
}*/

.dropdownBox {
  position: absolute;
  top: calc(100% + 4px);
  /*left: -2px;*/
  display: none;
  list-style-type: none;
  text-align: left;
  font-size: 16px;
  background-color: #FFF;
  width: 100%;
  box-sizing: border-box;

  /*width: 273px;*/
  /*z-index: 1000;*/
  /*display: none;*/
  margin: 0px;
  padding: 0px;
  /*margin-top: 3px;*/
  border: 1px solid #BEC3DD;
  border-radius: 5px;
  padding: 10px 0;
  color: #4A4A4A;
  list-style: none;
  text-align: left;
  /*box-shadow: 0 0 4px rgba(0, 0, 0, .3);*/
}

.dropdownBtn.active .dropdownBox {
  display: block;
  /*-webkit-animation: fadeInUp 500ms;
          animation: fadeInUp 500ms;*/
}

.dropdownBoxOptions {
  display: list-item;
  font-size: 16px;
  color: #000000;
  padding: 0px;
  padding-left: 20px;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

/*.dropdownBoxOptions::before {
  content: '\f00c';
  font-family: 'FontAwesome';
  font-size: 14px;
  margin-right: 10px;
  display: none;
  position: absolute;
  left: 15px;
  color: #FFFFFF;
}*/

.dropdownBoxOptions.selected::before {
  display: inline;
}

.dropdownBoxOptions.selected{
  background-color: #4F5B9A;
  color: #FFFFFF;
}

.dropdownBoxOptions:hover {
  background-color: #EDEDED;
  color: #000000;
}