/*課程Style */

.login_info {
	display:block;
	text-align:right;
	color:#00c168;
	font-size:0.9375em;
}

.margintop50 {
	margin-top:50px;
}

.marginbm30 {
	margin-bottom:30px;
}

.marginbm80 {
	margin-bottom:80px;
}

.box_class {
	border:#CCC 1px solid;
	padding:10px;
	margin-bottom:30px;
	margin-left:5px;
	margin-right:5px;
	letter-spacing:0em;
}

.box_class:hover{
	box-shadow:2px 2px 12px rgba(0,0,0,0.2);
}

.img-container {
	position: relative;
	padding-bottom: 75%;
	height: 0;
	overflow: hidden;
}

.img-container img{
	position:absolute;
}

.video-container {
	position: relative;
	padding-bottom: 75%;
	height: 0;
	overflow: hidden;
}

.video-container iframe, .video-container object, .video-container embed {
	position: absolute; 
	top: 0;left: 0;
	width: 100%;
	height: 100%;
}

.box_class_name {
	width:100%;
	color:#0070c0;
	font-size:1.25em;
	letter-spacing:0.05em;
	font-weight:bold;
	line-height:28px;
	margin-top:15px;
	margin-bottom:10px;
	height:60px;
}

.box_class_view {
	text-align:right;
	margin-top:15px;
	bottom:3px;
	right:3px;
	font-size:1em;
	color:#727272;
}

.text_green {
	color:#00c168;
}


.text_red {
	color: #F00;
}

.btn_class {
	background:linear-gradient(#9bc547, #7b9b37);
}

.btn_score {
	background:linear-gradient(#ff9c00, #ff6000);
}



/* Style the tab */
.tab {
  overflow: hidden;
}

/* Style the buttons inside the tab */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size:1.1875em;
  width:33.3333%;
  background:url(../images/group_bm2.png) center bottom no-repeat;
  color:#0070c0;
}

/* Change background color of buttons on hover */
.tab button:hover {
	color:#2692df;
}

/* Create an active/current tablink class */
.tab button.active {
	color:#0070c0;
	background:url(../images/group_bm.png) center bottom no-repeat;
	border:none;
	font-size: 1.375em;
	font-weight:bold;
}

/* Style the buttons inside the tab2 */
.tab2_width {
	width:100%;
	 
	margin:0 auto;
}

.tab2 {
	width:100%;
}

.tab2 button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 12px 34px;
  transition: 0.3s;
  font-size:1.1875em;
  color: #fff;
  width:auto;
  text-align:center;
  background:#0070c0;
  border:#021269 3px solid;
  border-radius: 28px;
  width:32%;
  margin-right:0.5%;
  margin-left:0.5%;
  max-width:135px;
  white-space:nowrap;
}

/* Change background color of buttons on hover */
.tab2 button:hover {
	background-color: #025ea0;
	color: #FFF;
}

/* Create an active/current tablink class */
.tab2 button.active {
	color: #FFF;
	border:none;
	font-size: 1.25em;
	font-weight:bold;
	background:none;
    background-color: #021269;
	border:#021269 3px solid;
}
.tab2 button:focus {
	outline: 2px solid #1d428a;
	outline-offset: 4px;
	background-color: #0c2c71; /* 當按鈕被選取並聚焦時變色 */
}
.tab2 button:not(.active):focus {
	background-color: #295fa9; /* 其他按鈕被聚焦時的變化 */
}
.tab2 button:focus:hover {
	background-color: #0a234f; /* 聚焦並滑鼠懸停時的效果 */
}


@media (max-width: 600px) {
.tab2 {
	width:100%;
}

.tab2 button {
	width:100%;
	margin-bottom:10px;
	margin-left:0px;
}
}

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
  border: none;
  color:#333;
  font-size:1.125em;
  letter-spacing:0.05em;
  font-weight:400;
  text-align:justify;
  line-height:32px;
}

.tabcontent th{
	padding-top:10px;
	padding-bottom:10px;
}

.tabcontent td{
	text-align:left;
	padding-top:10px;
	padding-bottom:10px;
}

.group_title {
	color:#003366;
	font-size:1.75em; 
	margin:30px 0 40px;
	font-weight:bold;
}

.class_title {
	color:#003366;
	font-size:1.75em; 
	margin:20px 0 60px;
	font-weight:bold;
	text-align:center;
}

.class_title span{
	padding-bottom:10px;
	border-bottom:#CCC 1px solid;
}

.course-title {
	color:#0070c0;
	font-size:1.75em;
	line-height:36px;
	font-weight:600;
	margin-bottom:60px;
}

.course-info {
	color: #000;
	font-size:1.0625em;
	font-weight:100;
}

.course-info p {
	line-height:40px;
}

.course-label {
	font-weight:600;
}


.heading {
  font-size: 1.5625em;
  margin-right: 25px;
}

.fa {
  font-size: 1.5625em;
  color:#f1f1f1;
}

.checked {
  color: orange;
}

/* Three column layout */
.side {
  float: left;
  width: 15%;
  margin-top:10px;
}

.side_text {
	color:#0070c0;
}

.middle {
  margin-top:10px;
  float: left;
  width: 70%;
}

/* Place text to the right */
.right {
  text-align: right;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* The bar container */
.bar-container {
  width: 100%;
  background-color: #f1f1f1;
  text-align: center;
  color: white;
  border-radius:5px;
}

/* Individual bars */
.bar-5 {width: 60%; height: 18px; background-color: #ff9800; border-radius:5px 0px 0px 5px;}
.bar-4 {width: 30%; height: 18px; background-color: #ff9800; border-radius:5px 0px 0px 5px;}
.bar-3 {width: 10%; height: 18px; background-color: #ff9800; border-radius:5px 0px 0px 5px;}
.bar-2 {width: 4%; height: 18px; background-color: #ff9800; border-radius:5px 0px 0px 5px;}
.bar-1 {width: 15%; height: 18px; background-color: #ff9800; border-radius:5px 0px 0px 5px;}

/* Responsive layout - make the columns stack on top of each other instead of next to each other */
@media (max-width: 400px) {
  .side, .middle {
    width: 100%;
  }
  .right {
    display: none;
  }
}

.rating {
    display: flex;
    flex-direction: row-reverse;
    justify-content: center
}

.rating>input {
    display: none
}

.rating>label {
    position: relative;
    width: 1em;
    font-size: 3.125em;
    color: #ff9800;
    cursor: pointer
}

.rating>label::before {
    content: "\2605";
    position: absolute;
    opacity: 0
}

.rating>label:hover:before,
.rating>label:hover~label:before {
    opacity: 1 !important
}

.rating>input:checked~label:before {
    opacity: 1
}

.rating:hover>input:checked~label:before {
    opacity: 0.4
}


.table_rd {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
  border: 1px solid #ddd;
}

.table_rd th {
  text-align: center;
  padding: 16px;
  background-color:#0070c0;
  color:#FFF;
}

.table_rd td {
  text-align: center;
  padding: 16px;
}

.table_rd td a{
	color:#0070c0;
	font-weight:600;
	text-decoration:underline;
}

.table_rd td a:hover{
	color: #03a8a1;
}

.table_rd th:first-child, .table_rd td:first-child {
  text-align: left;
}

.table_rd tr:nth-child(odd) {
  background-color: #f8f8f8
}

.fa-check {
  color: green;
}

.fa-remove {
  color: red;
}

.btn-test {
	padding:20px 60px;
	background-color:#900;
	color:#FFF;
	font-size: 1.5em;
	font-weight:bold;
	border:#900 4px solid;
	border-radius: 40px;
}

.btn-test:hover{
	background-color: #cd4242;
}

.score_result {
	border-radius: 20px;
	padding:30px 30px;
	text-align:center;
	margin:15px;
	color:#333;
	font-size: 1.1875em;
	font-weight:bold;
	border:#EBEBEB 2px solid;
	background-image: linear-gradient(#F3F3F3, #FFF);
}


.score_result2 {
	color:#0070c0;
	font-size: 1.3125em;
	height:90px;
	margin-top:30px;
	font-weight:100;
	letter-spacing:0em;
}

.score_text {
	font-size: 3em;
	font-weight:bold;
}
.itemFocus {
	border-width: 1px !important;
	border-style: dashed !important;
	border-color: blue !important;
	color: #6f9600 !important;
}