@import url(https://fonts.googleapis.com/css?family=Montserrat);

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 100;
}
h1 {
  font-size: 30px;
}
h2 {
  font-size: 24px;
}
h3 {
  font-size: 16px;
}
h4 {
	font-size: 14px;
}
h5 {
	font-size: 12px;
}
h6 {
	font-size: 10px;
}
h3,
h4,
h5 {
	margin-top: 5px;
	font-weight: 600;
}
div.generalTimer {
	margin-bottom: 1%; 
	color: white;
	margin-top: -2%;
}
.genTimer {
	font-size: 18.0vmin; 
	border-radius: 10px;
    background-color: rgb(65, 65, 65);
	width: 45%; 
	float: left; 
	font-family: Tahoma, Geneva, sans-serif;
	font-weight: bold;
}
.previousButton {
	text-decoration:none; 
	display:block; 
	float: left; 
	margin-right: 10px;
}
.fullScreenButton {
	text-decoration:none; 
	display:block;
}
.initSegment {
	float: left; 
	width: 48%; 
	border-radius: 5px; 
	background-color: rgb(35, 35, 35); 
	color: white; 
	margin-left: 1%; 
	margin-right: 1%;
	margin-top: 1%;
}
.textZone {
	margin-top: -10px;
}
.zZone {
	margin-top: -30px;
}
.rpmZone {
	margin-top: -40px;
}
.timeZone {
	margin-top: -35px; 
	margin-bottom: -20px;
}
.textZoneText {
	font-size: 6.0vmin;
}
.zZoneText {
	font-size: 15.0vmin; font-weight: 900;
}
.rpmZoneText{
	font-size: 11.0vmin;
}
.timeZoneText {
	font-size: 15.0vmin; 
	/*font-weight: 900;*/
	font-family: Tahoma, Geneva, sans-serif;
}
.segmentChartStyle {
	width: 98%; 
	border-radius: 5px; 
	background-color: rgb(65, 65, 65); 
	color: white; 
	margin-left: 1%; 
	margin-right: 1%;
	margin-top: 4px;
	height: 180px;
}

body {
	font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
	background-color: #2f4050;
	font-size: 13px;
	color: #676a6c;
	overflow-x: hidden;
	min-width:800px;
	min-height:600px;
}
.block {
	display: block;
}
.clear {
	display: block;
	overflow: hidden;
}
a {
	cursor: pointer;
}
a:hover,
a:focus {
	text-decoration: none;
}
.font-bold {
	font-weight: 600;
}
.font-noraml {
	font-weight: 400;
}
.text-uppercase {
	text-transform: uppercase;
}
#wrapper {
	width: 100%;
	overflow-x: hidden;
}
.wrapper {
	padding: 0 20px;
}
.wrapper-content {
	padding: 20px 10px 40px;
}
#page-wrapper {
	padding: 0 15px;
	min-height: 568px;
	position: relative !important;
}
@media (min-width: 768px) {
  #page-wrapper {
    position: inherit;
    margin: 0 0 0 240px;
    min-height: 1000px;
  }
}
.inputfile {
	width: 0.1px;
	height: 0.1px;
	opacity: 0;
	overflow: hidden;
	position: absolute;
	z-index: -1;
}
.inputfile + label {
    font-size: 2.0em;
    font-weight: 700;
    color: white;
    display: inline-block;
	margin-left: 7px;
}
.inputfile:focus + label,
.inputfile + label:hover {
    background-color: #353535;
	cursor: pointer;
}
.btn-primary {
  background-color: #AA1919;
  border-color: #AA1919;
  color: #FFFFFF;
}
.btn {
  border-radius: 3px;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.open .dropdown-toggle.btn-primary {
  background-color: #D00;
  border-color: #D00;
  color: #FFFFFF;
}
.btn-primary:active,
.btn-primary.active,
.open .dropdown-toggle.btn-primary {
  background-image: none;
}
.no-padding {
  padding: 0 !important;
}
.no-borders {
  border: none !important;
}
.no-margins {
  margin: 0 !important;
}
.no-top-border {
  border-top: 0 !important;
}

.full-width {
  width: 100% !important;
}
.gray-bg {
  background-color: #dcdcdc;
}

textarea:focus { 
    outline: none !important;
    /*box-shadow: 0 0 0px #AA0000;*/
}
#textAreaComment {
	width: 95%; 
	margin-left: 8px; 
	font-size: 6.5vmin; 
	color:white; 
	border: 0px; 
	border-radius: 5px; 
	background-color: rgb(65, 65, 65); 
	resize: none; 
	overflow: hidden; 
	text-align: center;
}
.blink_text {
	animation:1s blinker linear infinite;
	-webkit-animation:1s blinker linear infinite;
	-moz-animation:1s blinker linear infinite;
	color: red;
}

@-moz-keyframes blinker {  
 0% { opacity: 1.0; }
 50% { opacity: 0.0; }
 100% { opacity: 1.0; }
 }

@-webkit-keyframes blinker {  
 0% { opacity: 1.0; }
 50% { opacity: 0.0; }
 100% { opacity: 1.0; }
 }

@keyframes blinker {  
 0% { opacity: 1.0; }
 50% { opacity: 0.0; }
 100% { opacity: 1.0; }
 }

/* Segment Chart */
.bdr-all {
  border: 1px solid #e8e8e8;
}

.clearfix:before, .clearfix:after {
  content: " ";
  display: table;
}

.clearfix:after {
  clear: both;
}

 .class-graphic {
  padding-right: 20px;
  padding-top: 16px;
  position: relative;
}

.class-graphic .class-graphic-percent {
  float: left;
  height: 180px;
  position: absolute;
  width: 50px;
}

.class-graphic .class-graphic-graph {
  float: left;
  padding: 0 0 0 16px;
  width: 100%;
}

.class-graphic .class-graphic-graph .class-graph  
{
  background-color: #838383;
  height: 140px;
  width: 100%;
  margin-bottom: 1px;
  border-radius: 8px;
}

.class-graphic .class-graphic-graph .class-graph .slope-graph {
  background-color: rgba(0, 0, 0, 0.2);
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 15;
}

.class-graphic .class-graphic-graph .class-graph .slope-graph img {
  position: absolute;
  bottom: 0;
}

.class-graphic .class-graphic-graph .class-graph .class-segment 
{
  float:left;
  height: 100%;
  width: 25%;
  position: relative;
}

.class-graphic .class-graphic-graph .class-graph .class-segment .segment-zones {
  float: left;
  height: 100%;
  position: relative;
  width: 100%;
}

.class-graphic .class-graphic-graph .class-graph .class-segment .segment-zones .potence-handler {
  bottom: 10%;
  height: 2px;
  position: absolute;
  width: 100%;
  z-index: 10;
}

.class-graphic .class-graphic-graph .class-graph .class-segment .segment-zones .potence-handler .potence-line {
  border-bottom: 2px dashed;
  position: absolute;
  top: 0px;
  width: 100%;
}

.class-graphic .class-graphic-graph .class-graph .class-segment .segment-zones .potence-handler .potence-line.zone1 {
  border-color: #8c8c8c;
}

.class-graphic .class-graphic-graph .class-graph .class-segment .segment-zones .potence-handler .potence-line.zone2 {
  border-color: #31aed3;
}

.class-graphic .class-graphic-graph .class-graph .class-segment .segment-zones .potence-handler .potence-line.zone3 {
  border-color: #19ab66;
}

.class-graphic .class-graphic-graph .class-graph .class-segment .segment-zones .potence-handler .potence-line.zone4 {
  border-color: #f9a431;
}

.class-graphic .class-graphic-graph .class-graph .class-segment .segment-zones .potence-handler .potence-line.zone5 {
  border-color: #ec4147;
}

.class-graphic .class-graphic-graph .class-graph .class-segment .segment-zones .potence-handler .potence-line.zone6 {
  border-color: #c200d9;
}

.submenu-sessions-classes-creator .class-graphic .class-graphic-graph .class-graph .class-segment .segment-zones .potence-handler.zone1 {
  bottom: 12%;
}

.class-graphic .class-graphic-graph .class-graph .class-segment .segment-zones .segment-zone {
  width: 100%;
}

.class-graphic .class-graphic-graph .class-graph .class-segment .segment-zones .segment-zone.zone-clear {
  background-color: #4a4a4a;
  border-right: 1px solid #363636;
}

.class-graphic .class-graphic-graph .class-graph .class-segment .segment-zones .segment-zone.zone-base {
  height: 8%;
  margin: 0;
  position: relative;
}

.class-graphic .class-graphic-graph .class-graph .class-segment .segment-zones .segment-zone.zone1 {
  height: 20%;
  margin: 0;
  position: relative;
}

.class-graphic .class-graphic-graph .class-graph .class-segment .segment-zones .segment-zone.zone1.active {
  background-color: #d1d1d1;
  border-bottom: 1px solid #8c8c8c;
  border-right: 1px solid #d1d1d1;
  border-top: 1px solid #8c8c8c;
}

.class-graphic .class-graphic-graph .class-graph .class-segment .segment-zones .segment-zone.zone2 {
  height: 15%;
  margin: 0;
  position: relative;
}

.class-graphic .class-graphic-graph .class-graph .class-segment .segment-zones .segment-zone.zone2.active {
  background-color: #addfed;
  border-bottom: 1px solid #31aed3;
  border-right: 1px solid #addfed;
  border-top: 1px solid #31aed3;
}

.class-graphic .class-graphic-graph .class-graph .class-segment .segment-zones .segment-zone.zone3 {
  height: 11%;
  margin: 0;
  position: relative;
}

.class-graphic .class-graphic-graph .class-graph .class-segment .segment-zones .segment-zone.zone3.active {
  background-color: #a3ddc2;
  border-bottom: 1px solid #19ab66;
  border-right: 1px solid #a3ddc2;
  border-top: 1px solid #19ab66;
}

.class-graphic .class-graphic-graph .class-graph .class-segment .segment-zones .segment-zone.zone4 {
  height: 11%;
  margin: 0;
  position: relative;
}

.class-graphic .class-graphic-graph .class-graph .class-segment .segment-zones .segment-zone.zone4.active {
  background-color: #fddbad;
  border-bottom: 1px solid #f9a431;
  border-right: 1px solid #fddbad;
  border-top: 1px solid #f9a431;
}

.class-graphic .class-graphic-graph .class-graph .class-segment .segment-zones .segment-zone.zone5 {
  height: 36%;
  margin: 0;
  position: relative;
}

.class-graphic .class-graphic-graph .class-graph .class-segment .segment-zones .segment-zone.zone5.active {
  background-color: #f7b3b5;
  border-bottom: 1px solid #ec4147;
  border-right: 1px solid #f7b3b5;
  border-top: 1px solid #ec4147;
}

.class-graphic .class-graphic-graph .class-audio-track {
  background-color: #1d1d1d;
  float: left;
  height: 40px;
  width: 100%;
}

.class-graphic .class-graphic-graph .class-audio-track img {
  height: 40px;
  width: 100%;
}

.class-graphic .class-graphic-graph .class-time {
  float: left;
  width: 100%;
}

.class-graphic .class-graphic-graph .class-time .class-segment-time 
{
  float: left;
  padding: 4px 0;
  width: 25%;
}

.class-graphic .class-graphic-arrow {
  left: 16px;
  position: absolute;
  top: -3px;
  width: 30px;
  height: 160px;
  z-index: 20;
}

.class-graphic .class-graphic-arrow .class-graphic-arrow-shadow {
  border-top: 12px solid #e8e8e8;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  position: absolute;
  height: 12px;
  top: 5px;
  width: 24px;
  left: -15px;
}

.class-graphic .class-graphic-arrow .line-seeker {
  background-color: red;
  height: 142px;
  left: -8px;
  position: absolute;
  top: 19px;
  width: 10px;
}

.class-graphic-graph {
  float: left;
  width: 100%;
}

.class-graphic-graph .class-graph {
  background-color: #323232;
  box-shadow: inset 0 -15px 0 #242424;
  height: 170px;
}

.class-graphic-graph .class-graph .segment-zones {
  float: left;
  height: 100%;
  position: relative;
  width: 10%;
}

.class-graphic-graph .class-graph .segment-zones .potence-handler {
  bottom: 10%;
  height: 2px;
  position: absolute;
  width: 100%;
  z-index: 10;
}

.class-graphic-graph .class-graph .segment-zones .potence-handler .potence-line {
  border-bottom: 2px dashed;
  position: absolute;
  top: 0px;
  width: 100%;
}

 .class-graphic-graph .class-graph .segment-zones .potence-handler .potence-line.zone1 {
  border-color: #8c8c8c;
}

 .class-graphic-graph .class-graph .segment-zones .potence-handler .potence-line.zone2 {
  border-color: #31aed3;
}

.class-graphic-graph .class-graph .segment-zones .potence-handler .potence-line.zone3 {
  border-color: #19ab66;
}

.class-graphic-graph .class-graph .segment-zones .potence-handler .potence-line.zone4 {
  border-color: #f9a431;
}

.class-graphic-graph .class-graph .segment-zones .potence-handler .potence-line.zone5 {
  border-color: #ec4147;
}

.class-graphic-graph .class-graph .segment-zones .potence-handler .potence-line.zone6 {
  border-color: #c200d9;
}

.class-graphic-graph .class-graph .segment-zones .potence-handler.zone1 {
  bottom: 12%;
}

 .class-graphic-graph .class-graph .segment-zones .segment-zone {
  width: 100%;
}

.class-graphic-graph .class-graph .segment-zones .segment-zone.zone-clear {
  background-color: #242424;
}

.class-graphic-graph .class-graph .segment-zones .segment-zone.zone-base {
  background-color: #242424;
  height: 15px;
  margin: 0;
  position: relative;
}

.class-graphic-graph .class-graph .segment-zones .segment-zone.segment-active1 {
  background-color: #242424;
  bottom: 15px;
  border-top: 4px solid #8c8c8c;
  box-shadow: 0px 1px 0px #4d4d4d;
  left: 0;
  position: absolute;
  right: 0;
  top: 72%;
}

.class-graphic-graph .class-graph .segment-zones .segment-zone.segment-active2 {
  background-color: #242424;
  bottom: 15px;
  border-top: 4px solid #31aed3;
  box-shadow: 0px 1px 0px #4d4d4d;
  left: 0;
  position: absolute;
  right: 0;
  top: 57%;
}

.class-graphic-graph .class-graph .segment-zones .segment-zone.segment-active3 {
  background-color: #242424;
  bottom: 15px;
  border-top: 4px solid #19ab66;
  box-shadow: 0px 1px 0px #4d4d4d;
  left: 0;
  position: absolute;
  right: 0;
  top: 46%;
}

.class-graphic-graph .class-graph .segment-zones .segment-zone.segment-active4 {
  background-color: #242424;
  bottom: 15px;
  border-top: 4px solid #f9a431;
  box-shadow: 0px 1px 0px #4d4d4d;
  left: 0;
  position: absolute;
  right: 0;
  top: 35%;
}

.class-graphic-graph .class-graph .segment-zones .segment-zone.segment-active5 {
  background-color: #242424;
  bottom: 15px;
  border-top: 4px solid #ec4147;
  box-shadow: 0px 1px 0px #4d4d4d;
  left: 0;
  position: absolute;
  right: 0;
  top: 0%;
}

 .class-graphic-graph .class-audio-track {
  background-color: #1d1d1d;
  float: left;
  height: 40px;
  width: 100%;
}

.class-graphic-graph .class-time {
  float: left;
  width: 100%;
}

.class-graphic-graph .class-time .class-segment-time {
  float: left;
  padding: 4px 0;
  width: 10%;
}

.class-graphic-arrow-top {
  bottom: 0;
  border-top: 15px solid #fff;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  position: absolute;
  height: 15px;
  width: 30px;
}

.class-graphic-arrow-shadow {
  bottom: -1px;
  border-top: 15px solid #e8e8e8;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  position: absolute;
  height: 15px;
  width: 30px;
}

.line-seeker {
  background-color: red;
  height: 210px;
  left: 124px;
  position: absolute;
  width: 2px;
  z-index: 10;
}


@media (min-width: 768px) {
  #page-wrapper {
    position: inherit;
    margin: 0 0 0 220px;
    min-height: 1200px;
  }
}
@media (max-width: 768px) {
  #page-wrapper {
    position: inherit;
    margin: 0 0 0 0px;
    min-height: 1000px;
  }
}