/*
 * Base structure
 */

/*to fix navbar-fixed-top covering contents issue*/
body {
    padding-top: 70px;
}

/* otherwise select will inherit white color font */
button, input, optgroup, select, textarea {
    margin: 0;
    font: inherit;
    color: black;
}

li.borderless {
    border-top: 0 none;
}

/*
 * Global add-ons
 */

.sub-header {
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
}

/*
 * Top navigation
 * Hide default border to remove 1px line.
 */
.navbar-fixed-top {
    border: 0;
}

/*
 * Set navbar-brand and navbar-collapse so the big Quantiacs logo fits
 */
.navbar-brand {
    float: left;
    height: auto;
    padding-top: 2px;
    padding-bottom: 2px;
    font-size: 18px;
    line-height: 20px;
}

.navbar-collapse {
    padding-right: 15px;
    padding-left: 15px;
    font-size: 18px;
    overflow-x: visible;
    -webkit-overflow-scrolling: touch;
    border-top: 1px solid transparent;
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
}

/* icon color change to blue when user's logged in */
.navbar-default .navbar-nav > li > a.icon_loggedin {
    color: #52beeb;
}
/* darker shade of blue when hover over, focus, and being the active tab */
.navbar-default .navbar-nav > li > a.icon_loggedin:hover,
.navbar-default .navbar-nav > li > a.icon_loggedin:focus,
.navbar-default .navbar-nav > .active > a.icon_loggedin {
    color: #19a0d8;
}

.panel-primary {
    border-color: #78ccef;
}
.panel-primary > .panel-heading {
    color: #fff;
    background-image: none;
    background-color: #52beeb;
    border-color: #78ccef;
}
.panel-primary > .panel-heading + .panel-collapse > .panel-body {
    border-top-color: #78ccef;
}
.panel-primary > .panel-heading .badge {
    color: #78ccef;
    background-color: #fff;
}
.panel-primary > .panel-footer + .panel-collapse > .panel-body {
    border-bottom-color: #78ccef;
}

/*
 * Sidebar
 */

/* Hide for mobile, show later */
.sidebar {
    display: none;
}
@media (min-width: 768px) {
    .sidebar {
        position: fixed;
        top: 51px;
        bottom: 0;
        left: 0;
        z-index: 1000;
        display: block;
        padding: 20px;
        overflow-x: hidden;
        overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
        background-color: #f5f5f5;
        border-right: 1px solid #eee;
    }
}

/* Sidebar navigation */
.nav-sidebar {
    margin-right: -21px; /* 20px padding + 1px border */
    margin-bottom: 20px;
    margin-left: -20px;
}
.nav-sidebar > li > a {
    padding-right: 20px;
    padding-left: 20px;
}
.nav-sidebar > .active > a,
.nav-sidebar > .active > a:hover,
.nav-sidebar > .active > a:focus {
    color: #fff;
    background-color: #428bca;
}


/*
 * Main content
 */
.main {
    padding: 20px;
}
@media (min-width: 768px) {
    .main {
        padding-right: 40px;
        padding-left: 40px;
    }
}
.main .page-header {
    margin-top: 0;
}


/*
 * Placeholder dashboard ideas
 */

.placeholders {
    margin-bottom: 30px;
    text-align: center;
}
.placeholders h4 {
    margin-bottom: 0;
}
.placeholder {
    margin-bottom: 20px;
}
.placeholder img {
    display: inline-block;
    border-radius: 50%;
}

/* Used to create "checkbox" buttons */
/* Hiding the checkbox, but allowing it to be focused */
.badgebox
{
    opacity: 0;
}

.badgebox + .badge
{
    /* Move the check mark away when unchecked */
    text-indent: -999999px;
    /* Makes the badge's width stay the same checked and unchecked */
    width: 27px;
}

.badgebox:focus + .badge
{
    /* Set something to make the badge looks focused */
    /* This really depends on the application, in my case it was: */

    /* Adding a light border */
    box-shadow: inset 0px 0px 5px;
    /* Taking the difference out of the padding */
}

.badgebox:checked + .badge
{
    /* Move the check mark back when checked */
    text-indent: 0;
}

/*slider bars*/
#slider_budget .slider-selection, #slider_slippage .slider-selection {
    background: #52beeb;
}
#slider_budget .slider-track-high, #slider_slippage .slider-track-high {
    background: #dedede;
}
#slider_budget .slider-handle, #slider_slippage .slider-handle {
    background: #52beeb;
}

/*jumbotron*/
.jumbotron {
    text-align: center;
    padding-top: 15px;
    padding-bottom: 15px;
    margin-bottom: 15px;
    word-wrap: break-word;
}
.jumbotron_blue {
    background: rgba(82, 190, 235, 0.59);
}
@media screen and (min-width: 768px) {
    .container .jumbotron, .container-fluid .jumbotron {
        padding-right: 5px;
        padding-left: 5px;
    }
}
.div-jumbotron {
    padding-left: 5px;
    padding-right: 5px;
}

/*bootstrap-select*/
.bootstrap-select:not([class*="col-"]):not([class*="form-control"]):not(.input-group-btn) {
    width: 100%;
}

/* run/save/submit buttons */
.action_btn {
    margin-bottom: 10px;
}

/* buttons for markets in setting tab */
.btn-market {
    color: #000;
    margin-bottom: 5px;
    font-size:13px;
    border-radius: 18px;
}

.btn-market:hover, .btn-market:focus, .btn-market:active, .btn-market.active {
    color: #000;
}

.div-variables > .btn-market {
    background-color: rgba(255, 179, 0, 0.5);
}
.div-market-agriculture > .btn-market {
    background-color: rgba(129, 112, 102, 0.5);
}
.div-market-bonds > .btn-market {
    background-color: rgba(128, 62, 117, 0.5);
}
.div-market-currency > .btn-market {
    background-color: rgba(255, 104, 0, 0.5);
}
.div-market-energy > .btn-market {
    background-color: rgba(0, 206, 98,0.5);
}
.div-market-index > .btn-market {
    background-color: rgba(193, 0, 32 ,0.5);
}
.div-market-interest_rates > .btn-market {
    background-color: rgba(166, 189, 215, 0.5);
}
.div-market-metals > .btn-market {
    background: rgba(206, 162, 98, 0.5);
}
.div-market-macros > .btn-market {
    background: rgba(204, 204, 204, 0.5);
}

.div-market-utilities > .btn-market {
    background-color: rgba(129, 112, 102, 0.5);
}
.div-market-healthcare > .btn-market {
    background-color: rgba(128, 62, 117, 0.5);
}
.div-market-finance > .btn-market {
    background-color: rgba(255, 104, 0, 0.5);
}
.div-market-consumer_goods > .btn-market {
    background: rgba(229, 148, 161, 0.5);
,0.5);
}
.div-market-it_telecommunications > .btn-market {
    background-color: rgba(166, 189, 215, 0.5);
}
.div-market-conglomerates > .btn-market {
    background: rgba(255, 179, 0, 0.5);
}
.div-market-others > .btn-market {
    background: rgba(204, 204, 204, 0.5);
}
.div-market-industry > .btn-market {
    background: rgba(206, 162, 98, 0.5);
}
.div-market-commodities > .btn-market {
    background: rgba(127, 192, 224, 0.5);
}

.custom-badge {
    color: #5bc0de;
    background-color: #fff;
}

/* toggle button */
.toggle.ios, .toggle-on.ios, .toggle-off.ios {
    border-radius: 18px;
}
.toggle.ios .toggle-handle {
    border-radius: 18px;
}
.toggle-group > .toggle-on, .toggle-group > .toggle-off {
    color: #000;
    font-size: 15px;
}

#editor {
    height: 600px;
    top: 0;
    bottom: 0;
}
#optimizerContainer {
    height: 650px;
    min-width: 350px;
}
.vcenter {
    display: inline-block;
    vertical-align: middle;
    float: none;
}