/* Copyright (c) Optiver I.P. B.V. 2019 */


/*
 * Put your custom CSS here. Try to keep it to a minimum. Tachyons, a very handy dandy CSS library is loaded by
 * default, it might already be able to do what you want to do. Please check before, CSS is always ugly.
 */

/**
 * CORE DOCUMENT OVERRIDES
 */

html {
    background-color: #1E1E2E !important;
}

body {
    position: absolute !important;
    left: 25px !important;
}

textarea, select, input, button {
    outline: none !important;
    box-shadow: none !important;
}


/**
 * CUSTOM TACHYONS: Same as normal CSS, with !important tag to override bokeh css
 */


/**
 * BOKEH OVERRIDES
 */

.bk-tabs-header {
    background: #262939 !important;
    width: 97vw !important;
    border: 1px solid #313450 !important;
}

.bk-headers-wrapper {
    border-bottom: none !important;
}

.bk-btn-group {
    display: none !important;
}

.bk-input-group {
    color: #B0B0B4 !important;
    font-family: 'Avenir Next', sans-serif !important;
    font-size: 14px !important;
}

.bk-input {
    background: #262939 !important;
    border: 1px solid #313450 !important;
    color: #B0B0B4 !important;
    font-size: 14px !important;
}


.bk-tab {
    border-radius: 0 !important;
    border-width: 3px !important;
    border-color: transparent !important;
    background: transparent !important;
    color: #B0B0B4 !important;
    font-family: 'Avenir Next', sans-serif !important;
    transition: 0.2s !important;
}

.bk-tab:hover {
    background-color: #3B3F4F !important;
    border-radius: 4px !important;
}

.bk-tab.bk-active {
    border-bottom-color: #D4684B !important;
    background: transparent !important;
}

.slick-header-columns, .slick-header-column, .slick-row, .slick-cell {
    background: #262939 !important;
    font-family: 'Avenir Next', sans-serif !important;
}

.slick-header-columns {
    border-bottom: 2px solid #313450 !important;
}

.slick-header-column {
    font-size: 12px !important;
    color: #B0B0B4 !important;
    border: 0 !important;
    border-bottom: 2px solid #313450 !important;
    padding-left: 15px !important;
}

.slick-row {
    border-bottom: 2px solid #313450 !important;
    vertical-align: middle !important;
}

.slick-cell {
    color: #B0B0B4 !important;
    font-size: 12px !important;
    border: 0 !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
    vertical-align: middle !important;
}

.bk-logo {
    display: none !important;
}

.bk-toolbar {
    z-index: 100 !important;
}

.bk-toolbar-button {
    transition: 0.2s !important;
}

.bk-toolbar-button:hover {
    background-color: #3B3F4F !important;
    border-radius: 4px !important;
}

.bk-toolbar-button.bk-active {
    border-color: #D4684B !important;
}


/** CUSTOM CSS **/

.mfs {
    font-size: 14px !important;
}

.datatable {
    text-align: right !important;
}

.datatable-border {
    margin: 0 !important;
    padding: 2px !important;
    border: 1px solid #313450 !important;
    background: #262939 !important;
}

.graph-border {
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid #313450 !important;
}

.tippy-box {
    background-color: #171717;
}

.tippy-arrow {
    border-color: #171717;
    color: #171717;
}

.tippy-content {
    color: #B0B0B4;
    padding: 0.75rem;
    font-family: 'Avenir Next', sans-serif !important;
}