{% extends base %}

{% block title %}Explorepy dashboard style{% endblock %}

{% block preamble %}
<style>
    body {
        font-family: "Open Sans", sans-serif;
        -webkit-font-smoothing: antialiased;
        text-rendering: optimizeLegibility;
        color: #f3f5f4;
        background: #1E2130;
    }

    .banner {
            border-bottom: 1px solid #4B5460 !important;
    }
    .banner img {
            position: absolute;
            right: 0;
            top: 50%;
            margin-top: -25px;
    }
    .timer_widget {
        text-align: center !important;
    }
    .bk-root .slick-header-column {
        background-color: #262a3d !important;
        background-image: none !important;
        border: 0px;
        border-color: #0F1328:
    }
    .slick-row {
        background-color: #262a3d !important;
        background-image: none !important;
        color:white !important;
        border: 0px !important;
        border-color: #0F1328 !important;
    }
    .bk-root .slick-cell {
        background-color: #0F1328 !important;
        color:white !important;
        border: 0px !important;
        border-color: #0F1328 !important;
    }
    .bk-root .slick-cell.selected {
        background-color: #0F1328 !important;
        color:white !important;
        border: 0px !important;
        border-color: #0F1328 !important;
    }

    .bk-root .bk-tab {
        background-color: #1E2130;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: #f3f5f4;
        width: 200px;
        height: 45px !important;
        font-size: 18px
        font-style: italic;
    }
    .bk-root .bk-tabs-header .bk-tab.bk-active{
        background-color: #0F1328;
        color: #f3f5f4;
        border: 0;
        border-bottom: #91dfd2 solid 3px !important;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        font-style: normal;
        font-weight: bold;
        border-radius: 0px;
    }
    .bk-root .bk-tabs-header .bk-tab:hover{
        background-color: #0F1328;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        font-style: normal;
        border-radius: 0px;
    }
    .bk-root .bk-input {
        display: inline-block;
        width: 100%;
        flex-grow: 1;
        -webkit-flex-grow: 1;
        background-color: #32374f;
        border: 1px solid darkgray !important;
        border-radius: 0px;
        color: white;
        cursor: pointer;
    }

    .bk-root .bk-btn-default {
        color: white !important;
        background-color: #161A28 !important;
        border-color: #ccc;
        font-size: 16px;
        border-radius: 0px;
    }
    .bk-root .bk-btn-default:hover {
        border-size: 3px;
        border-color: whitesmoke !important;
    }
</style>
{% endblock %}

{% block contents %}
    <div class="content">
        {{ super() }}
     </div>
{% endblock %}