/*------------------------------------------------------------------
[Table of contents]

  * 0.0 -> Genral Style
  * 1.0 -> Progress circle bar
  * 2.0 -> PHP Error
    * 2.1 -> PHP var dump
    * 2.2 -> PHP xdebug
  * 3.1 -> Video Player
  * 4.0 -> Question
  * 5.0 -> Intro page
* ===============================================
*/

#content{
  display: flex;
  min-height: 75vh;
  flex-direction: column;
}

#footer {
  flex: 1 0 auto;
}


.wc-divider {
  margin-left: 20px !important;
  overflow: hidden;
  border-left: 1px #222 solid;
}

.tableSort {
    float: left;
}
.tableHeader {
    margin: 10px 0 0 20px;
}

.content {
    margin-top: 90px;
    margin-left: 20px;
}

.btn-primary:hover, .open .dropdown-toggle.btn-primary {
    background: #2a72b5;
    border-color: #2a72b5;
}
.btn-primary {
  color: #fff;
  background: #348fe2;
  border-color: #348fe2;
}

@import url(https://fonts.googleapis.com/css?family=Copse);
@import url(https://fonts.googleapis.com/css?family=Open+Sans:700,700italic,800,800italic,400italic,400,300,300italic,600,600italic);

/*
 * * 0.0 -> Genral Style
 * -----------------------------------------------
*/
.font-Copse{
	font-family: 'Copse', sans-serif;
}
.font-Open-Sans{
	font-family: 'Open Sans', sans-serif;
}
.text-white {
  color: #ffffff;
}
h1 {
  font-family: 'Copse', sans-serif;
  font-size: 30px;
}
h2 {
  font-family: 'Copse', sans-serif;
  font-size: 30px;
}
h3 {
  font-family: 'Open Sans', sans-serif;
  font-size: 24px;
}
h4 {
  font-family: 'Open Sans', sans-serif;
  font-size: 22px;
  color: #DB0962;
}
p {
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  letter-spacing: 0.03em;
}
body {
  background-color: #f6fafd !important;
}



/*
 * 1.0 -> Progress circle bar
 * -----------------------------------------------
*/
.progress-circle {
  text-align: center;
  font-family: "Arial Black", Gadget, sans-serif;
  font-weight: bold;
}
.progress-circle .circle,
.progress-circle .bar {
  display: inline-block;
  background: #eee;
  width: 55px;
  height: 55px;
  border-radius: 55px;
  border: 1px solid #d5d5da;
}
.progress-circle .bar {
  position: relative;
  width: 40px;
  height: 10px;
  margin: 0 -5px 16px -5px;
  border-left: none;
  border-right: none;
  border-radius: 0;
}
.progress-circle .circle .progress-circle-label {
  display: inline-block;
  width: 32px;
  height: 32px;
  line-height: 32px;
  border-radius: 32px;
  margin-top: 10px;
  color: #b5b5ba;
  font-size: 17px;
}
.progress-circle .circle .title {
  color: #b5b5ba;
  font-size: 13px;
  line-height: 30px;
  margin-left: -5px;
}
.progress-circle .bar {
  top: 14px;
}
.progress-circle .bar.half,
.progress-circle .bar.done,
.progress-circle .circle.half .progress-circle .circle.done,
.progress-circle .circle.next {
  background: #eee;
}
.progress-circle .bar.active {
  background: linear-gradient(to right, #EEE 40%, #FFF 60%);
}
.progress-circle .circle.done .progress-circle-label {
  color: #FFF;
  background: #860083;
}
.progress-circle .circle.next .progress-circle-label {
  color: #b5b5b5;
  background: #fcfcfc;
}
.progress-circle .circle.done .title {
  color: #444;
}
.progress-circle .circle.active .progress-circle-label {
  color: #FFF;
  background: #db0962;
}
.progress-circle-label {
  box-shadow: inset 0 0 3px rgba(0,0,0,.3);
}
.progress-circle .circle.active .title {
  color: #2196f3;
}

/*
 * 2.1 -> PHP var dump
 * -----------------------------------------------
*/
.xdebug-var-dump {
  top: 130px;
  position:relative;
  margin-bottom: 50px;
}

/*
 * 2.2 -> PHP xdebug
 * -----------------------------------------------
*/
.xdebug-error {
  font-size: 16px !important;
  width: 95% !important;
  margin: 0 auto 10px auto !important;
  border-color: #666 !important;
  background: #ddd !important;
}
.xdebug-error th, .xdebug-error td {
  padding: 2px !important;
}
.xdebug-error span {
  display: none !important;
}
.xdebug-error_description th {
  font-size: 1.2em !important;
  padding: 20px 4px 20px 100px !important;
  background: #ccc no-repeat left top !important;
}
.xdebug-error_callStack th {
  background: #666 !important;
  color: #ddd !important;
}

/*
 * 4.0 -> Question
 * -----------------------------------------------
*/
.question-header {
  padding: 23px 25px 10px 25px !important;
}

.question-body {
  padding: 10px 25px 23px 25px !important;
}

/*
 * 5.0 -> Intro page
 * -----------------------------------------------
*/
.intro-header-image {
  height: 350px;
  width: 100%;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}
.intro-no-card {
  background: none;
  box-shadow: none;
}

.dropdown-menu > .active > a, .dropdown-menu > .active > a:focus, .dropdown-menu > .active > a:hover {
  background-color: #B3B3B3 !important;
}