@media (min-width: 1300px) {
  .container {
    width: 1280px;
    padding-left: 0;
    padding-right: 0;
  }
}
.fa.fa-star {
  /*color: #ffcc00;*/
  color: yellow;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: black;
}
html,
body {
  height: 100%;
  flex-direction: column;
  font-size: 14px;
  color: #000;
}
#holder {
  min-height: 100%;
  position: relative;
  padding-bottom: 70px;
}
footer {
  width: 100%;
  /*height: 40px;*/
  line-height: 40px; /* Vertically center the text there */
  background-color: #ccc;
  color: #707070;
  text-align: center;
  position: absolute;
  bottom: 0px;
  left: 0;
  font-size: small;
}
@media (max-width: 500px) {
  footer {
    line-height: 20px; /* Vertically center the text there */
  }
}
#toTop {
  position: fixed;
  bottom: 0px;
  right: 0px;
  z-index: 1;
  display: none;
  cursor: pointer;
  font-size: 26px;
  width: 50px;
  height: 50px;
  text-align: center;
  margin-top: 15px;
  padding-top: 15px;
}
.navbar-nav > li > a {
  font-weight: 550;
  color: #fff;
}
.navbar-inverse .navbar-nav > .active > a,
.navbar-inverse .navbar-nav > .active > a:focus,
.navbar-inverse .navbar-nav > .active > a:hover {
  color: yellow;
  font-weight: 550;
}
.navbar-inverse .navbar-nav > li > a {
  color: #9d9d9d;
  color: #fff;
  font-weight: 550;
}
.navbar-inverse .navbar-nav > li > a:hover {
  color: cyan;
  font-weight: 550;
}
.logo {
  height: 35px;
  margin-top: -4px;
}
.app-area-icon{
  height: 55px;
  margin: 5px;
}
@media (max-width:768px) { 
  .app-area-icon{
    height: 40px;
  }
}
.page-heading {
  font-weight: 550;
  font-size: 18px;
}
.search td:hover {
  cursor: pointer;
}
@media only screen and (max-width: 768px) {
  .container {
    width: 100%;
  }
}
.alert {
  margin-bottom: 0;
  font-size: 14px;
}
/* menu */
ul.yellow-link > li > a {
  color: white !important;
}
ul.yellow-link > li > a:hover {
  color: yellow !important;
}

/* homepage */
.area-checkbox {
  border: 1px solid #ccc;
  padding: 5px;
  background-color: #daedf8;
  margin-bottom: 10px;
}

#clearAll {
  color: white;
  cursor: pointer;
  border: 1px solid black;
  padding: 2px 6px;
  background-color: black;
}
#clearAll:hover {
  color: black;
  background-color: white;
}

.checkbox-inline + .checkbox-inline,
.radio-inline + .radio-inline {
  margin-top: 0;
  margin-left: 0px;
  margin-right: 10px;
}
.checkbox-inline {
  margin-left: 0px;
  margin-right: 10px;
}
.customize-box {
  border: 1px solid #ccc;
  padding: 5px;
  background-color: #eee;
  margin-bottom: 10px;
}

/* guest book */
.guestbook-avatar {
  height: 50px;
  width: 50px;
}
.reply-container {
  border: 1px solid #ccc;
  position: relative;
  padding: 10px;
  border-radius: 4px;
  background-color: #eee;
  margin-bottom: 10px;
}
.reply-content {
  background-color: #fff;
  border: 1px solid white;
  border-radius: 4px;
  padding: 10px;
}
.reply-time {
  font-style: italic;
  font-size: 13px;
  color: #999;
}
/* search page */
@media (max-width: 480px) {
  .mobile_hide {
    display: none;
  }
}
.search-form {
  border: 1px solid #ccc;
  border-radius: 4px;
  margin: 15px 0;
  padding: 10px;
}
.btn-today {
  position: absolute;
  top: 30px;
  right: 30px;
}
.btn-all {
  position: absolute;
  top: 70px;
  right: 30px;
}
tr.yellow-highlight {
  background-color: yellow;
}
tr.blue-highlight {
  /* background-color: #99ccff; */
  background-color: #c7edff;
}
/* settings */
.hide {
  display: none;
}
.glyphicon.glyphicon-remove {
  font-size: 15px;
}
#delete-search,
#delete-subscribers {
  display: inline;
  margin-left: 10px;
}
#delete-search-form,
#delete-subscribers-form {
  display: inline;
}
#account-control-list ul li,
#account-saved-search ul li,
#account-control-author ul li {
  background: url("../images/icons/right.png") no-repeat 0px 3px;
  padding: 3px 20px 10px 20px;
  margin: 0;
}
.hover-hand {
  cursor: pointer;
}
/* add */
input,
input::-webkit-input-placeholder {
  font-size: 12px;
}
.calendar {
  width: 400px;
  height: 300px;
  position: absolute;
  top: 50px;
  left: 15px;
  display: block;
  z-index: 100;
}
.form-control {
  padding: 0 12px;
  height: 24px;
}
.form-horizontal .control-label {
  padding: 0 0 0 15px;
}
.form-group {
  margin-bottom: 10px;
}
label.error {
  color: red;
  /*position: absolute;*/
  top: 0px;
  /*right: 10px;*/
  position: relative;
}
label.error:before {
  content: "\f06a";
  font-family: FontAwesome;
  color: red;
  margin-right: 5px;
}
label.valid {
  color: blue;
  position: absolute;
  top: 0px;
  right: 15px;
}
.input-ok {
  color: green !important;
}
.red {
  color: red;
}
.my-error-class {
  color: #ff0000; /* red */
}
.my-valid-class {
  color: #00cc00; /* green */
}
label.valid:before {
  content: "\f00c";
  font-family: FontAwesome;
  color: blue;
  margin-right: 5px;
}
/* register */
.green-text {
  color: green;
}
label.error-register {
  color: red;
  position: relative;
  top: 0px;
  right: 0px;
}
label.error-register:before {
  content: "\f06a";
  font-family: FontAwesome;
  color: red;
  margin-right: 5px;
}
label.valid-register {
  color: blue;
  position: relative;
  top: 0px;
  left: 10px;
}
label.valid-register:before {
  content: "\f00c";
  font-family: FontAwesome;
  color: blue;
  margin-right: 5px;
}
/* details */

.user-avatar{
  max-width: 32px;
  max-height: 32px;
}
.details-author {
  float: right;
  font-size: 12px !important;
}
a.grey-link {
  color: grey;
  text-decoration: underline;
}
a.grey-link:hover {
  color: red;
}
a.black-link {
  color: black;
  text-decoration: underline;
}
a.black-link:hover {
  color: red;
}
@media (max-width: 768px) {
  .hide-in-small {
    display: none;
  }
}
@media (max-width: 1200px) {
  .hide-in-1200 {
    display: none;
  }
}
@media (min-width: 1200px) {
  .hide-in-large {
    display: none;
  }
}

.blue-tag {
  display: inline-block;
  color: white;
  /*background-color: #fd4582;*/
  background-color: #337ab7;
  font-size: 12px;
  border: 1px solid blue;
  padding: 0 5px;
  margin: 0 0 0 3px;
  border-radius: 3px;
}
.red-tag {
  display: inline-block;
  color: white;
  /*background-color: #fd4582;*/
  background-color: #d9534f;
  font-size: 12px;
  border: 1px solid red;
  padding: 0 5px;
  margin: 0 5px;
  border-radius: 3px;
}
.green-tag {
  display: inline-block;
  color: white;
  /*background-color: #009900;*/
  background-color: #5cb85c;
  font-size: 12px;
  border: 1px solid #009900;
  padding: 0 5px;
  margin: 0 0 0 5px;
  border-radius: 3px;
}
.black-tag {
  display: inline-block;
  color: white;
  background-color: #333333;
  font-size: 12px;
  border: 1px solid #000000;
  padding: 0 5px;
  margin: 0 0 0 5px;
  border-radius: 3px;
}
.black-badge {
  display: inline;
  color: white;
  background-color: #000;
  font-size: 12px;
  border: 1px solid #fff;
  padding: 3px 5px;
  margin: 0 3px;
  border-radius: 3px;
}
@media (max-width: 600px) {
  .no-padding-left {
    padding-left: 10px;
  }
}
.font-size-1em {
  font-size: 1em;
}
iframe {
  display: inline;
}
.red-text {
  color: red;
}
.cursor-hand {
  cursor: pointer;
}
.margin-bottom-30 {
  padding-bottom: 30px;
}
.view-counts,
.last-update,
.edit-counts {
  color: #666;
  font-style: italic;
  font-size: 12px;
}

/* if wants tags to show at the top and buttons to show below, comment out this part */
/*
@media (min-width: 992px){
	.clear-button{
		position:absolute;
		top:5px;
	}
	.edit-button{
		right:237px;	
	}
	.renew-button{
		right:111px;
	}
	.full-button{
		right:14px;
	}
	.not-full-button{
		right:14px;
	}
}
*/

.clear-button {
  /* this is the edit post button */
  cursor: pointer;
  float: left;
  margin-right: 5px;
  margin-bottom: 15px;
  font-weight: 550;
}

.clear-button:hover {
  cursor: pointer;
  /*background-color: #ffff66;*/
  border: solid 1px #000;
}
hr.description-separator {
  width: 115%;
  margin-left: -55px;
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ddd;
  margin: 5px 0 5px -55px;
}
.yellow-button {
  background-color: yellow !important;
}
/* for writing comment */
.comment-button {
  display: inline;
  margin-left: 10px;
  background-color: teal;
  color: #fff;
}
.comment-button:hover,
.comment-button:focus {
  background-color: #006666;
  color: #fff;
}
/* for team leader adding signup users */
.add-signup-user-button {
  display: inline;
  margin-left: 10px;
  background-color: #4caf50;
  color: #fff;
}
.add-signup-user-button:hover,
.add-signup-user-button:focus {
  background-color: green;
  color: #fff;
}

/* sign up */
.signup_box {
}
.signup-button {
  /*position:absolute; */
  display: inline;
  margin-left: 10px;
}

.signup-status {
  position: absolute;
  right: 25px;
  top: 12px;
  font-size: 0.8em;
}
/*
.signup_box .left{
	width:164px;
	float:left;
}
*/
.signup_box .right {
  margin-left: 15px;
  float: left;
}
.signup_box .right p {
  line-height: 22px;
}
.signup_container {
  clear: both;
  margin-bottom: 10px;
  position: relative;
}
#signup-button {
  cursor: pointer;
  background-color: #c0deff;
  margin-top: -20px;
  border: 1px solid #ccc;
  padding: 3px;
}
#signup-button:hover {
  cursor: pointer;
  background-color: #ffff66;
  border: solid 1px #000;
}
#signup-button-grey {
  cursor: not-allowed;
  border: 1px solid #ccc;
  margin-top: 0px;
  margin-bottom: 10px;
}
#signup-button-grey-up {
  cursor: not-allowed;
  margin-top: -15px;
  margin-bottom: 10px;
}
.user_signup_pic {
  width: 25px;
  height: 25px;
  float: left;
  margin-top: 5px;
}
/* users */
.user_profile_pic {
  width: 25px;
  height: 25px;
}
.users-div {
  border-bottom: 1px solid #ccc;
  padding: 5px 0;
}
.users-div:last-child {
  border-bottom: 0px;
}
/* edit */
/* reduces the time hour and minute dropdown value spacing, so on small screen, the numbers don't get cut off */
.time-select {
  padding: 0 5px;
}

.edit-buttons {
  margin-left: 10px;
}

/* index */

.morning-separator {
  background-color: #fcf8e3;
}
.afternoon-separator {
  background-color: #dff0d8;
}
.evening-separator {
  background-color: #d9edf7;
}
.tomorrow-button {
  display: block;
}
@media (min-width: 580px) {
  .tomorrow-button {
    display: inline-block;
    float: right;
    margin-top: -6px;
  }
}
@media (max-width: 500px) {
  .btn-week-day-menu {
    padding: 6px;
  }
}

/* about */
@media (max-width: 500px) {
  .tutorial-menu {
    font-size: 12px;
  }
}

ul.about-list {
  margin-top: 15px;
}
ul.about-list li {
  list-style: none;
  position: relative;
  padding-left: 35px;
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:focus,
.nav-tabs > li.active > a:hover {
  color: #555;
  cursor: default;
  background-color: #fff;
  border: 1px solid #666;
  border-bottom-color: transparent;
}
.nav-tabs {
  border-bottom: 1px solid #666;
}

/*功能新增*/
.new-function::before {
  position: absolute;
  left: -35px;
  top: 3px;
  background-color: #5cb85c;
  display: inline;
  padding: 0.2em 0.6em 0.3em;
  margin-right: 5px;
  font-size: 75%;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: 0.25em;
  content: "功能新增";
}
/* 問題修正 */
.correction::before {
  position: absolute;
  left: -35px;
  top: 3px;
  background-color: #d9534f;
  display: inline;
  padding: 0.2em 0.6em 0.3em;
  margin-right: 5px;
  font-size: 75%;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: 0.25em;
  content: "問題修正";
}
/* 頁面調整 */
.adjust::before {
  position: absolute;
  left: -35px;
  top: 3px;
  background-color: #f0ad4e;
  display: inline;
  padding: 0.2em 0.6em 0.3em;
  margin-right: 5px;
  font-size: 75%;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: 0.25em;
  content: "頁面調整";
}
/* 功能修改 */
.function-edit::before {
  position: absolute;
  left: -35px;
  top: 3px;
  background-color: #337ab7;
  display: inline;
  padding: 0.2em 0.6em 0.3em;
  margin-right: 5px;
  font-size: 75%;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: 0.25em;
  content: "功能修改";
}

.tutorial-menu:hover {
  color: white;
  background-color: black;
}
.alert-default {
  background-color: #eee;
}
.label-sm {
  font-size: 12px !important;
}

.label-md {
  font-size: 16px !important;
}

.label-lg {
  font-size: 20px !important;
}
.add-comment,
.show-comment,
.hide-comment {
  cursor: pointer;
  font-weight: 300;
  font-size: 12px;
  margin-right: 0 !important;
  /*transform: scale(0.833);/*10/12=0.833, font-size:10px*/
}
.badge-success {
  background-color: #468847;
  color: #fff;
}
/* tournaments */
.dark-red {
  color: #990000;
}
/* statistics */

.zero {
  color: #ccc;
}
.gold-icon,
.gold-icon:before {
  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    from(#ff6600),
    to(#ff0000)
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: initial; /* reset Font Awesome's display:inline-block */
}
table.statistics th {
  text-align: center;
  background-color: #eee;
}
table.statistics td,
table.statistics th {
  border: 1px solid #999 !important;
}
table.statistics tr.dark {
  background-color: #eee;
}
table.statistics td a,
table.statistics th a {
  /* this makes the whole table cell clickable */
  width: 100%;
  display: block;
  color: #000099;
}
table.statistics td a:hover,
table.statistics th a:hover {
  /* this makes the whole table cell clickable */
  color: rgb(255, 64, 129);
}
tr.orange th,
.orange {
  background-color: #feee66 !important;
}
/* end of statistics */

/* not used 

.clear-button1{ 
	cursor: pointer;
	background-color: #c0deff;
	border: solid 1px #000;
	float:left;
	margin-right:5px;
	padding:0 10px;
	}
.auto-update-button{
	cursor: pointer;
	background-color: yellow;
	border: solid 1px #000;
	float:left;
	margin-right:5px;
	padding:0 10px;

}

.full-button{
	cursor: pointer;
	background-color: #fcbcf8;
	border: solid 1px #000;
	float:left;
	margin-right:5px;
	padding:0 10px;

}
.not-full-button{
	cursor: pointer;
	background-color: #bcfcc0;
	border: solid 1px #000;
	float:left;
	margin-right:5px;
	padding:0 10px;

}
*/

.loading {
  position: absolute;
  left: 0px;
  top: -67px;
  width: 100%;
  height: 100%;
  z-index: 9999;
}
.mdl-tooltip {
  z-index: 999;
  opacity: 1;
  background-color: black;
}
#img-box {
  margin-bottom: 5px;
  min-height: 80px;
  border: 1px dashed #ccc;
  background-color: #eee;
  border-radius: 5px;
  cursor: pointer;
}
#img-box-text {
  position: absolute;
  top: 70px;
  left: 40%;
  font-size: 14px;
  color: #999;
  cursor: pointer;
}
.label {
  margin: 2px;
  display: inline-block;
}
.label-red {
  padding: 5px 10px;
  background-color: red;
}
.label-blue {
  padding: 5px 10px;
  background-color: blue;
}
.label-green {
  padding: 5px 10px;
  background-color: green;
}
.label-orange {
  padding: 5px 10px;
  background-color: orange;
}
.label-purple {
  padding: 5px 10px;
  background-color: purple;
}
.label-black {
  padding: 5px 10px;
  background-color: black;
}
.label-grey {
  padding: 5px 10px;
  background-color: grey;
}
.coach_name_top {
  margin: 30px 0 0 0;
  font-size: 14px;
  color: #999;
}
.coach_name_bottom {
  margin: 0;
  font-size: 16px;
  color: #999;
  height: 30px;
}
.coach_name {
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  padding: 10px 5px;
  margin-top: 20px;
}
.coach_city {
  /*border-top:1px solid #eee;*/
  padding: 5px 0;
  margin-bottom: 15px;
}
.coachBox {
  border: 1px solid #eee;
  background-color: #eee;
  margin-bottom: 10px;
  text-align: center;
  -moz-box-shadow: 0 0 10px #999;
  -webkit-box-shadow: 0 0 10px #999;
  box-shadow: 0 0 10px #999;
}
.coachBox:hover {
  cursor: pointer;
  border: 1px solid #666 !important;
  -moz-box-shadow: 0 0 10px #999;
  -webkit-box-shadow: 0 0 10px #999;
  box-shadow: 0 0 10px #333;
}
.dropdown:hover .dropdown-menu {
  display: block;
  margin-top: 0; 
}
.fr-view {
  font-size: 14px;
}
.minFont14 {
  font-size: calc(14px);
}
.homepage-alert {
  font-family: Microsoft JhengHei, Arial, Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 550;
  margin-bottom: 10px;
  margin-top: 10px;
}
@media (max-width: 500px) {
  .homepage-alert {
    font-family: Microsoft JhengHei, Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: 550;
    margin-bottom: 10px;
    margin-top: 10px;
  }
}
@media (max-width: 768px) {
  .contact-buttons {
    padding: 0 5px;
  }
}
.news:nth-child(2n+1) {
  clear: left;
}

.img-news {
  width: 100%;
    object-fit: cover;
    height: 200px;
    border-radius: 10px;
    margin-bottom:20px;
}