@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400');

.dashbio-loading {

    display: inline-block;

}

.dash-default-spinner {

    opacity: 0.3 !important;

}

/* Basic app page with header and content area */

#app-page-content {

    margin: 0px;

    margin-top: 0px; /* hide border between header and content */

    width: 100%;

    height: auto;

    min-height: calc(100vh - 60px);

    position: absolute;

    top: 60px;

}

#app-page-header {

    width: 100%;

    height: 60px !important;

    position: absolute;

    top: 0px;

}

#app-page-header > a > img {

    height: 70px;

    float: left;

    padding: 15px;

    padding-bottom: 0px;

    transition-duration: 500ms;

}

#app-page-header > a > img:hover {

    filter: brightness(2);

}

#app-page-header h2 {

    font-size: 22pt;

    font-family: 'Times';

    font-weight: 200 !important;

    letter-spacing: 1px;

    position: absolute;

    top: -5px;

    display: inline-block;

}

#dashbio-logo > img {

    height: 30px !important;

}

#app-page-header > img {

    height: 36px;

    float: right;

    margin-top: 12px;

    margin-right: 10px;

    transition-duration: 500ms;

}

#gh-link {

    text-decoration: none;

    font-size: 10pt;

    font-family: sans-serif;

    color: white;

    border: solid 1px white;

    border-radius: 2px;

    padding: 2px;

    padding-top: 5px;

    padding-left: 15px;

    padding-right: 15px;

    font-weight: 100;

    position: relative;

    top: 15px;

    float: right;

    margin-right: 20px;

    margin-left: 0px;

    transition-duration: 400ms;

}

#gh-link:hover {

    color: #dfe8f3 !important;

    border-color: #dfe8f3 !important;

}

/* Scrollbar */

#app-page-content ::-webkit-scrollbar {

    width: 4px;

    height: 0px;

    background-color: #f6f6f6; /* Change in individual app stylesheet */

}

#app-page-content ::-webkit-scrollbar-thumb {

    width: 2px;

    border-radius: 15px;

    padding-right: 5px;

    background-color: #119dff; /* Change in individual app stylesheet */

}

/* Body */

#app-page-content .app-body {

    padding: 5px;

    min-height: calc(100vh - 70px);

    overflow: auto;

    background-color: #f6f6f6; /* Change in individual app stylesheet */

    color: #303030; /* Change in individual app stylesheet */

}

/* Fonts */

#app-page-content .app-body {

    font-family: 'Open Sans';

    font-weight: 200;

}

#app-page-content .app-body h4.what-is {

    font-weight: 400;

    font-size: 20pt;

    margin-bottom: 30px;

    text-align: center;

}

/* Tabs */

#app-page-content .control-tabs {

    width: 400px;

    height: 550px;

    margin: 50px;

    margin-right: 0px;

    font-size: 10pt;

    float: left;

    background-color: #ffffff; /* Change in individual app stylesheet */

}

#app-page-content .control-tabs .tab-content {

    display: inline-block;

    padding: 20px;

}

#app-page-content .control-tab {

    height: 415px;

    overflow-y: auto;

    padding-right: 20px;

    margin: 20px;

    margin-right: 0px;

}

#app-page-content .control-tabs .tab {

    font-weight: 200;

    font-size: 9pt;

    height: 50px;

    padding: 15px;

    background-color: #ffffff; /* Change in individual app stylesheet */

    border: solid 1px #d3d3d3; /* Change in individual app stylesheet */

}

#app-page-content .control-tabs .tab--selected {

    font-weight: bolder;

    border: none;

    border-top: solid 2px;

    color: #119dff; /* Change in individual app stylesheet */

}

/* Control names */

.app-controls-block {

    display: block;

    margin-top: 20px;

    margin-bottom: 40px;

}

.app-controls-name {

    display: inline-block;

    font-weight: 400;

    vertical-align: top;

    width: 160px;

    font-size: 12pt;

    margin-top: 5px;

    margin-bottom: 5px;

}

.fullwidth-app-controls-name {

    display: inline-block;

    font-weight: 400;

    vertical-align: top;

    width: 100%;

    font-size: 12pt;

    margin-top: 5px;

    margin-bottom: 5px;

    width: 100%;

}

.app-controls-desc {

    font-size: 9pt;

    margin-left: 10px;

    margin-right: 10px;

    margin-top: 5px;

}

/* Dash components */

#app-page-content .Select {

    width: 100% !important;

}

#app-page-content .Select-menu-outer {

    width: 100% !important;

    margin: 0px;

}

#app-page-content .Select-input {

    padding-top: 0px !important;

}

#app-page-content .control-slider {

    display: inline-block;

    width: 150px;

    float: right;

}

#app-page-content .control-upload {

    display: block;

    border: dotted 1px #119dff; /* Change in individual app stylesheet */

    border-radius: 5px;

    padding: 30px;

    font-size: 9pt;

    text-align: center;

}

#app-page-content .control-download {

    width: 100%;

    margin-top: 10px;

    margin-bottom: 20px;

    font-size: 7pt;

    transition-duration: 500ms;

}

#app-page-content .control-download:hover {

    color: #119dff; /* Change in individual app stylesheet */

    border-color: #119dff; /* Change in individual app stylesheet */

}

#app-page-content .rc-slider-rail {

    background-color: #f6f6f6; /* Change in individual app stylesheet */

}

#app-page-content .rc-slider-track {

    background-color: #119dff; /* Change in individual app stylesheet */

}

#app-page-content .rc-slider-handle {

    border: solid 2px #119dff; /* Change in individual app stylesheet */

}

@media (max-width: 800px) {

    #app-page-content .control-tabs {

        height: 650px;

    }

    #app-page-content .control-tabs .tab--selected {

        border: solid 1px #d3d3d3; /* Change in individual app stylesheet */

    }

}