body {
    background-color: #FFE9E7;
}

.header {

    background-color: #FFE9E7;
    background: -webkit-linear-gradient(rgba(255, 233, 231, 1), rgba(255, 233, 231, 1), rgba(255, 233, 231, 0));
    /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(rgba(255, 233, 231, 1), rgba(255, 233, 231, 1), rgba(255, 233, 231, 0));
    /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(rgba(255, 233, 231, 1), rgba(255, 233, 231, 1), rgba(255, 233, 231, 0));
    /* For Firefox 3.6 to 15 */
    background: linear-gradient(rgba(255, 233, 231, 1), rgba(255, 233, 231, 1), rgba(255, 233, 231, 0));
    /* Standard syntax */
}

.col-left {

    background-color: #FFE9E7;
}

.action-buttons ul a li:hover {
    color: #FF5757;
}

#next-chapter-color:hover {
    background-color: #D90677;
}


.action-buttons ul {

    border-top: 1px solid rgba(255, 70, 47, 0.2);
}

.button-1.active,
.button-1:hover {
    border: 1px solid #FF5757;
    background-color: #FF5757;
    color: white;
}

input[type=range].blueSlider::-webkit-slider-thumb {

    background: #FEACA2;
}

input[type=range].greenSlider::-webkit-slider-thumb {


    background: #F184CF;
}



@media screen and (min-width: 750px) {
    #bi {
        display: block;
    }

    #cp,
    #ra,
    #pd,
    #fi,
    #bp {
        display: none;
    }
}

.progress-bar-color {
    background-color: #FF5757;
}



/*VISUALIZATIONS*/


/* Bayes */

.bar line {
    stroke: black;
    stroke-width: 2;
}

.bar text {
    fill: black;
    text-anchor: middle;
}

.disease {
    fill: #FF8686;
    stroke-width: 0;
    stroke: #FF8686;
}

.healthy {
    fill: #84DEFF;
    stroke-width: 0;
    stroke: #84DEFF;
}

.slider {
    cursor: pointer;
    stroke-width: 3;
    stroke: white;
}

table td:hover {
    background-color: #FEACA2;
}


/* Prior */

.axis path,
.axis line {
    fill: none;
    stroke: black;
    stroke-width: 1;
    shape-rendering: crispEdges;
}

.axis text {
    /*font-family: "Helvetica Neue";*/
    font-size: 11px;
    fill: black;
}

.blur-out {
    -webkit-filter: blur(8px);
    opacity: 0.1;
    -webkit-transition: all 0.25s ease-out;
    transition: all 0.25s ease-out;
}



/*responsive*/

@media screen and (max-width: 680px) {
    #coinWrapper {
        display: block;
    }


    #mathjax-5-2{
        font-size: 14px;
        text-align: center !important;
    }

    #mathjax-5-1{
        font-size: 0.5em;
    }
}

@media screen and (min-width: 680px) {
    #coinWrapper {
        display: inline-flex;
    }

     .MathJax_Display {
       /* font-size: 12px;*/
        text-align: center !important;
    }

    #mathjax-5-1{
        font-size: 0.8em;
    }
}


@media screen and (min-width: 1080px) {
    #mathjax-5-1{
        font-size: 1em;
    }
}

#coinWrapper2 {
    text-align: center;
}

#coinWrapper2 img {
    width: 60px;
    height: 60px;
}

.coin-img,
.coin-text {
    display: inline-block;
    vertical-align: middle;
    padding: 2% 2%;
}

#coin {
    width: 100px;
    height: 100px;
    background-image: url(./img/head.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    display: inline-block;
}

#coinButtons {
    display: inline-flex;
    flex-direction: column;
    margin: 0 auto;
    text-align: center;
}

#coinButtons .btn {
    margin: 5px 0px;
}

.beta {
    stroke: #FF988B;
    fill: none;
}

.true {
    stroke: #F184CF;
    stroke-width: 2;
    stroke-dasharray: 2;
}



/* Likelihood */

.sample {
    fill: #FEACA2;
}

.sample-line {
    stroke: #F184CF;
    stroke-width: 3;
    stroke-dasharray: 2;
}

.likelihood-line {
    stroke: #F184CF;
    stroke-width: 3;
    stroke-dasharray: 2;
}

.sampling {
    fill: #FEACA2;
    fill-opacity: 0.5;
    stroke: #FEACA2;
    stroke-width: 5;
}

.density {
    fill: none;
    stroke: #FEACA2;
    stroke-width: 2;
}

.likelihood {
    fill: none;
    stroke: #F184CF;
    stroke-width: 5;
}

.ticks {
    display: none;
}

.handle {
    fill: #F184CF;
}