/* General styles */
body {
    padding-top: 60px;
    background-color: #f5f5f5;
}

/* Navbar styles */
.navbar-inverse {
    background-color: rgba(100,100,100,0.9);
    border: none;
}

.navbar-brand img {
    height: 40px;
    margin-top: -10px;
}

/* Panel styles */
.panel {
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-shadow: 0 1px 1px rgba(0,0,0,.05);
}

.card-header {
    background-color: #f5f5f5;
    border-bottom: 1px solid #ddd;
    padding: 10px 15px;
}

.card-body {
    padding: 15px;
}

/* Form control styles */
.form-control {
    border-radius: 4px;
}

select.form-control {
    height: 34px;
    padding: 6px 12px;
}

/* Plot container styles */
.plot-container {
    width: 100%;
    height: 400px;
    margin-bottom: 20px;
}

/* Utility classes */
.mb-20 {
    margin-bottom: 20px;
}

.mt-60 {
    margin-top: 60px;
}

/* Modal styles */
.modal-header {
    background-color: #f5f5f5;
    border-bottom: 1px solid #ddd;
}

.modal-footer {
    background-color: #f5f5f5;
    border-top: 1px solid #ddd;
}

/* Button styles */
.btn-primary {
    background-color: #337ab7;
    border-color: #2e6da4;
}

.btn-primary:hover {
    background-color: #286090;
    border-color: #204d74;
}

/* Dropdown styles */
.dropdown-menu {
    border-radius: 4px;
    box-shadow: 0 6px 12px rgba(0,0,0,.175);
}

.dropdown-item {
    padding: 3px 20px;
}

/* Plot specific styles */
#distributionPlot, 
#variableAPlot, 
#variableBPlot, 
#variableCPlot {
    width: 100%;
    height: 400px;
}