/* CSS Document */
/* #CountDownPanel {color: blue; background-color: yellow; font-size: 18px;} */

.lining {
	border-bottom:solid;border-bottom-color:#000000;border-bottom-width:2px
}

.styleScore {
	font-size: 36px;
	font-weight: bold;
	color:#FFFFFF;
}

.defaultText {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
}

.sText {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
}

.cell {
	cursor:pointer;
	}
/*.normalText:hover {
	background-color:#CCCC00;
	}*/
.backdiv1 {
	/*height:113px;*/
	/*width:400px;*/
	margin: 0px; padding: 15px 20px; font-size: 14px; font-weight: normal; display: block;
}
.backdiv {
	/*height:113px;*/
	/*width:400px;*/
	margin: 0px; padding: 15px 20px; font-size: 14px; font-weight: normal; display: block;
}
.classMode {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-weight: bold;
	color: #000099;
	margin-left:10px;
	margin-right:10px
}
.qNumberClass {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: bold;
	padding-top:5px;
	padding-bottom:5px;
	margin-left:10px;
	margin-right:10px
}
.qNumberClass1 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: bold;
	color:#FFFFFF;
	padding-top:5px;
	padding-bottom:5px;
	margin-left:10px;
	margin-right:10px
}
.normalText {
	font-family: Verdana, Arial, Helvetica, sans-serif; 
	font-size: 12px; 
	font-weight: bold;
	padding-top:5px;
	padding-bottom:5px;
	margin-left:10px;
	margin-right:10px}

.normalText1 {
	font-family: Verdana, Arial, Helvetica, sans-serif; 
	font-size: 14px; 
	font-weight: bold;
	padding-top:5px;
	padding-bottom:5px;
	margin-left:10px;
	margin-right:10px}
.normalText2 {
	font-family: Verdana, Arial, Helvetica, sans-serif; 
	font-size: 15; 
	font-weight: bold;
	padding-top:5px;
	padding-bottom:5px;
	margin-left:10px;
	margin-right:10px}
.timeText {
	font-family: Verdana, Arial, Helvetica, sans-serif; 
	font-size: 12px; 
	font-weight: bold;
	color: red;
	padding-top:5px;
	padding-bottom:5px;
	margin-left:10px;
	margin-right:10px}



/*added chan*/
.mc-btn {
    display: inline-block;
    border: 0;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    cursor: pointer;
    font-family: 'Lato', sans-serif;
    font-size: 14px;
    height: 40px;
    line-height: 40px !important;
    padding: 0 20px;
    -webkit-transition: all 0.3s linear 0s;
    -moz-transition: all 0.3s linear 0s;
    -ms-transition: all 0.3s linear 0s;
    -o-transition: all 0.3s linear 0s;
    transition: all 0.3s linear 0s;
}

.btn-style-1, .btn-style-1:focus {
    box-shadow: 0 2px 2px 0 rgb(0 0 0 / 14%), 0 1px 5px 0 rgb(0 0 0 / 12%), 0 3px 1px -2px rgb(0 0 0 / 20%);
    background-color: #37ABF2;
    color: #fff;
}


* Tabs panel */
.tabbable-panel {
  border:opx solid #eee;
  padding: 10px;
}

/* Default mode */
.tabbable-line > .nav-tabs {
  border: none;
  margin: 0px;
}
.tabbable-line > .nav-tabs > li {
  margin-right: 2px;
}
.tabbable-line > .nav-tabs > li > a {
  border: 0;
  margin-right: 0;
  color: #737373;
}
.tabbable-line > .nav-tabs > li > a > i {
  color: #a6a6a6;
}
.tabbable-line > .nav-tabs > li.open, .tabbable-line > .nav-tabs > li:hover {
  border-bottom: 4px solid #c2e4c5;
}
.tabbable-line > .nav-tabs > li.open > a, .tabbable-line > .nav-tabs > li:hover > a {
  border: 0;
  background: none !important;
  color: #333333;
}
.tabbable-line > .nav-tabs > li.open > a > i, .tabbable-line > .nav-tabs > li:hover > a > i {
  color: #a6a6a6;
}
.tabbable-line > .nav-tabs > li.open .dropdown-menu, .tabbable-line > .nav-tabs > li:hover .dropdown-menu {
  margin-top: 0px;
}
.tabbable-line > .nav-tabs > li.active {
  border-bottom: 4px solid #0aa717;
  position: relative;
}
.tabbable-line > .nav-tabs > li.active > a {
  border: 0;
  color: #333333;
}
.tabbable-line > .nav-tabs > li.active > a > i {
  color: #404040;
}
.tabbable-line > .tab-content {
  margin-top: -3px;
  background-color: #fff;
  border: 0;
  border-top: 1px solid #eee;
  padding: 15px 0;
}
.portlet .tabbable-line > .tab-content {
  padding-bottom: 0;
}

/* Below tabs mode */

.tabbable-line.tabs-below > .nav-tabs > li {
  border-top: 4px solid transparent;
}
.tabbable-line.tabs-below > .nav-tabs > li > a {
  margin-top: 0;
}
.tabbable-line.tabs-below > .nav-tabs > li:hover {
  border-bottom: 0;
  border-top: 4px solid #fbcdcf;
}
.tabbable-line.tabs-below > .nav-tabs > li.active {
  margin-bottom: -2px;
  border-bottom: 0;
  border-top: 4px solid #f3565d;
}
.tabbable-line.tabs-below > .tab-content {
  margin-top: -10px;
  border-top: 0;
  border-bottom: 1px solid #eee;
  padding-bottom: 15px;
}    

/*.table>tbody>tr>td, .table>tbody>tr>th{
  border-top: 0px !important;
}*/

.my-progress-bar-container{
	width 			: 100%;
	height 			: 100px;
	padding-top : 40px;
}

.my-progress-bar-wrapper{
	position 		: relative;
	float 			: left;
  width 			: calc(100% - 60px);
}
.my-progress-bar-container .num-left-indicator,
.my-progress-bar-container .num-right-indicator{
	float 			: left;
	width 			: 30px;
	padding 		: 7px 5px;
	color 			: #555;
}

.my-progress-bar{
	height 				: 35px;
	width 				: 100%;
	border 				: 1px solid #888;
	border-radius	: 10px;
	position			: relative;
	overflow 			: hidden;
}

.my-progress-bar > div{
	background-color: #428bca;
	height 				 	: 100%;
	width						: 1%;
  transition 			: width 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

.my-tooltip-container{
	transition 		: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
	will-change 	: transform;
  width					: 100%;
  border-radius : 1rem;
}

.my-tooltip {
  background: #333;
  color 		: #ddd;
  bottom 		: 100%;
  width 		: 5rem;
  height 		: 5rem;
  border-radius: 100%;
  display: block;
  margin-bottom: 5px;
  padding 	: 15px 0px;
  text-align: center;
  position: absolute;
  min-width: 10%;
  transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}
.my-tooltip .number{
	font-size 	: 16px;
}

.my-tooltip-indicator{
  width: 100%;
  position: absolute;
  left: 0;
  right: 0;
  height: 0px;
  top: 100%;
  transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
  transform: translateX(calc(50% - 0.6rem));
  will-change: transform;
}
.my-tooltip-indicator:after {
  content: " ";
  border-left: solid transparent 0.7rem;
  border-right: solid transparent 0.7rem;
  border-top: solid 0.7rem #333;
  position: absolute;
  left: 0.5rem;
  bottom: -0.6rem;
  margin-left: -0.5rem;
  height: 0;
  width: 0;
  transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}




.my-progress-bar-container.listening .my-progress-bar > div{
	background-color: #428bca;
}

.my-progress-bar-container.listening .my-tooltip-container{
	transform 		: translateX(calc(var(--listening_progress) * 1% - 2.5rem));
}

.my-progress-bar-container.listening .my-tooltip {
  /*transform: translateX(calc(var(--listening_progress) * -1%));*/
	background-color: #428bca;
}

.my-progress-bar-container.listening .my-tooltip-indicator:after{
	border-top: solid 0.7rem #428bca;
}

.my-progress-bar-container.listening .my-progress-bar > div{
	width 		: calc(var(--listening_progress) * 1%);
}


.my-progress-bar-container.reading .my-progress-bar > div{
	background-color: #3c763d;
}

.my-progress-bar-container.reading .my-tooltip-container{
	transform : translateX(calc(var(--reading_progress) * 1% - 2.5rem));
}

.my-progress-bar-container.reading .my-tooltip {
  /*transform: translateX(calc(var(--reading_progress) * -1%));*/
	background-color: #3c763d;;
}

.my-progress-bar-container.reading .my-tooltip-indicator:after{
	border-top: solid 0.7rem #3c763d;
}

.my-progress-bar-container.reading .my-progress-bar > div{
	width 		: calc(var(--reading_progress) * 1%);
}



@keyframes growProgressBar {
  0%, 33% { --pgPercentage: 0; }
  100% { --pgPercentage: var(--totalscore_perc); }
}

@property --pgPercentage {
  syntax: '<number>';
  inherits: false;
  initial-value: 0;
}

div[role="progressbar"] {
  --fg: #369;
  --bg: #def;
  --pgPercentage: var(--totalscore_perc);
  animation: growProgressBar 3s 1 forwards;
  width: 15rem;
  height: 15rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: 
    radial-gradient(closest-side, white 80%, transparent 0 99.9%, white 0),
    conic-gradient(var(--fg) calc(var(--pgPercentage) * 1%), var(--bg) 0)
    ;
  font-family: Helvetica, Arial, sans-serif;
  font-size: calc(15rem / 5);
  color: var(--fg);
}

div[role="progressbar"]::before {
  counter-reset: percentage var(--totalscore_perc);
  content: attr(data-content);
  font-size : 25px;
}