/* sorry but i want to make sure it fit nicely in the edx courseware */
.container {
    max-width: 700px;
    opacity: 0;
    transition: opacity .25s ease-in-out;
    -moz-transition: opacity .25s ease-in-out;
    -webkit-transition: opacity .25s ease-in-out;
}

h2.caption {
    white-space: nowrap;
}

label.start-date, input#startDate {
    font-size: 12px;
}

input#startDate {
    width: 88px;
    background-color: transparent;
    color: #000;
    cursor: pointer;
    display: inline-block;
    border: none;
    box-shadow: none;
    padding: 0 5px;
}

.options .btn-group {
    width: 100%;
}

.options .money label {
    width: 50%;
}

.options .swap label {
    width: 33%;
}

.options .swap label:nth-of-type(2) {
    width: 34%;
}

.options label {
    border-radius: 0 !important;
}

.options label.active {
    color: #fff;
}

.options .a label.active {
    background-color: #cc0000;
}

.options .b label.active {
    background-color: #4986db;
}

input.rate {
    padding: 0 3px 0 0;
    border-radius: 0;
    text-align: right;
    border-top-width: 0;
}

#tableA {
    margin: -19px auto 0 auto;
}

#tableA thead tr.space td {
    padding-bottom: 10px;
}

#tableA tbody tr:first-of-type input.rate {
    border-top-width: 1px;
}

#tableA .form-control {
    height: 22px;
    font-size: 12px;
    border-radius: 0;
}

#tableA thead > tr:last-child th {
    padding-bottom: 5px;
}

#tableA th, #tableA td {
    padding: 0 4px;
    font-size: 12px;
    vertical-align: middle;
    white-space: nowrap;
}

#tableA thead td {
    padding: 1px 0;
}

#tableA tbody td.input {
    width: 63px;
}

#tableA .t {
    width: 1px;
}

#tableA .separator {
    width: 50%;
}

#tableA tbody td {
    color: #999;
}

.table-hover > tbody > tr:hover > td, .table-hover > tbody > tr:hover > th, tr.highlight {
    background-color: #e5e5e5;
}

input.error {
    color: white;
    background-color: #cc0000;
}

/**
* Table decoration
*/
#tableA thead tr:first-child td.options {
    position: relative;
}

#tableA thead tr:first-child td.options:before {
    background: #f6f7f7;
    content: "";
    height: 389px;
    width: 169px;
    position: absolute;
    left: -10px;
    top: -10px;
    border: #e0e0e0 1px solid;
    z-index: -1;
}

.red {
    color: #cc0000;
}

.blue {
    color: #4986db;
}

#graph-title {
    margin: 10px 0 0 0;
}

/*
** D3 Graph styles
*/
#graph svg {
    width: 100%;
    height: 440px;
}

.axis path,
.axis line {
    fill: none;
    stroke: #000;
    shape-rendering: crispEdges;
}

path.line {
    fill: none;
    stroke-width: 2px;
}

path.line.a {
    stroke: #cc0000;
}

path.line.b {
    stroke: #4986db;
}

.rate.dot, .DF.dot {
    fill: #fff;
    stroke: #000;
}

div.tooltip {
    position: absolute;
    text-align: center;
    color: #FFFFFF;
    padding: 3px 8px;
    font: 12px sans-serif;
    background: rgba(0, 0, 0, 0.5);
    border: 0;
    pointer-events: none;
    white-space: nowrap;
    transition-delay: 0.5s;
    -webkit-transition-delay: 0.5s;
}

div.tooltip.show {
    opacity: 1;
    transition-delay: 0s;
    -webkit-transition-delay: 0s;
}

svg line.hover {
    stroke-width: 2;
    stroke: rgba(0, 0, 0, 0.3);
    stroke-dasharray: 5, 3;
    fill: none;
}