/* Copyright (c) Jupyter Development Team.
 * Distributed under the terms of the Modified BSD License.
 */

/* We import all of these together in a single css file because the Webpack
loader sees only one file at a time. This allows postcss to see the variable
definitions when they are used. */

/*-----------------------------------------------------------------------------
| Copyright (c) Jupyter Development Team.
| Distributed under the terms of the Modified BSD License.
|----------------------------------------------------------------------------*/

/**
 * The material design colors are adapted from google-material-color v1.2.6
 * https://github.com/danlevan/google-material-color
 * https://github.com/danlevan/google-material-color/blob/f67ca5f4028b2f1b34862f64b0ca67323f91b088/dist/palette.var.css
 *
 * The license for the material design color CSS variables is as follows (see
 * https://github.com/danlevan/google-material-color/blob/f67ca5f4028b2f1b34862f64b0ca67323f91b088/LICENSE)
 *
 * The MIT License (MIT)
 *
 * Copyright (c) 2014 Dan Le Van
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy
 * of this software and associated documentation files (the "Software"), to deal
 * in the Software without restriction, including without limitation the rights
 * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 * copies of the Software, and to permit persons to whom the Software is
 * furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in
 * all copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 * SOFTWARE.
 */

/*
The following CSS variables define the main, public API for styling JupyterLab.
These variables should be used by all plugins wherever possible. In other
words, plugins should not define custom colors, sizes, etc unless absolutely
necessary. This enables users to change the visual theme of JupyterLab
by changing these variables.

Many variables appear in an ordered sequence (0,1,2,3). These sequences
are designed to work well together, so for example, `--jp-border-color1` should
be used with `--jp-layout-color1`. The numbers have the following meanings:

* 0: super-primary, reserved for special emphasis
* 1: primary, most important under normal situations
* 2: secondary, next most important under normal situations
* 3: tertiary, next most important under normal situations

Throughout JupyterLab, we are mostly following principles from Google's
Material Design when selecting colors. We are not, however, following 
all of MD as it is not optimized for dense, information rich UIs.
*/

:root {

  /* Borders
  
  The following variables, specify the visual styling of borders in JupyterLab.
   */

  /* UI Fonts
  
  The UI font CSS variables are used for the typography all of the JupyterLab
  user interface elements that are not directly user generated content.
  */ /* Base font size */ /* Ensures px perfect FontAwesome icons */

  /* Use these font colors against the corresponding main layout colors.
     In a light theme, these go from dark to light.
  */
  
  /* Use these against the brand/accent/warn/error colors.
     These will typically go from light to darker, in both a dark and light theme
   */

  /* Content Fonts
  
  Content font variables are used for typography of user generated content.
  */ /* Base font size */

  /* Layout
  
  The following are the main layout colors use in JupyterLab. In a light
  theme these would go from light to dark.
  */

  /* Brand/accent */

  /* State colors (warn, error, success, info) */

}

/* Copyright (c) Jupyter Development Team.
 * Distributed under the terms of the Modified BSD License.
 */

/*
 * We assume that the CSS variables in
 * https://github.com/jupyterlab/jupyterlab/blob/master/src/default-theme/variables.css
 * have been defined.
 */

:root { /* margin between inline elements */
}

.jupyter-widgets {
    margin: 2px;
    box-sizing: border-box;
    color: black;
    overflow: visible;
}

.jp-Output-result > .jupyter-widgets {
    margin-left: 0;
    margin-right: 0;
}

/* vbox and hbox */

.widget-inline-hbox {
    /* Horizontal widgets */
    box-sizing: border-box;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-align: baseline;
        -ms-flex-align: baseline;
            align-items: baseline;
}

.widget-inline-vbox {
    /* Vertical Widgets */
    box-sizing: border-box;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: stretch;
        -ms-flex-align: stretch;
            align-items: stretch;
}

.widget-box {
    box-sizing: border-box;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin: 0;
}

.widget-hbox {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
}

.widget-vbox {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
}

/* General Button Styling */

.jupyter-button {
    padding: 0;
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
    font-size: 13px;
    cursor: pointer;

    height: 28px;
    border: 1px solid;
    line-height: 26px;

    /* From Material Design Lite
        shadow-key-umbra-opacity: 0.2;
        shadow-key-penumbra-opacity: 0.14;
        shadow-ambient-shadow-opacity: 0.12;
     */
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .2),
                0 3px 1px -2px rgba(0, 0, 0, .14),
                0 1px 5px 0 rgba(0, 0, 0, .12);
}

.jupyter-button i.fa {
    margin-right: 4px;
}

.jupyter-button:empty:before {
    content: "\200b"; /* zero-width space */
}

.jupyter-button:active, .jupyter-button.mod-active {
     box-shadow: none;
}

/*.jupyter-button:hover, .jupyter-button:focus, .jupyter-button:active {
    outline: none !important;
}
*/

/* Button "Default" Styling */

.jupyter-button {
    color: rgba(0, 0, 0, .87);
    background-color: white;
    border-color: #9E9E9E;
}

.jupyter-button:active, .jupyter-button.mod-active {
    color: rgba(0, 0, 0, 1.0);
    background-color: white;
    border-color: #616161;
}

/* Button "Primary" Styling */

.jupyter-button.mod-primary {
    color: rgba(255, 255, 255, 1.0);
    background-color: #2196F3;
    border-color: #2196F3;
}

.jupyter-button.mod-primary.mod-active {
    color: rgba(255, 255, 255, 1);
    background-color: #1976D2;
    border-color: #1976D2;
}

/* Button "Success" Styling */

.jupyter-button.mod-success {
    color: rgba(255, 255, 255, 1.0);
    background-color: #4CAF50;
    border-color: #4CAF50;
}

.jupyter-button.mod-success.mod-active {
    color: rgba(255, 255, 255, 1);
    background-color: #388E3C;
    border-color: #388E3C;
 }

/* Button "Info" Styling */

.jupyter-button.mod-info {
    color: rgba(255, 255, 255, 1.0);
    background-color: #00BCD4;
    border-color: #00BCD4;
}

.jupyter-button.mod-info.mod-active {
    color: rgba(255, 255, 255, 1);
    background-color: #0097A7;
    border-color: #0097A7;
}

/* Button "Warning" Styling */

.jupyter-button.mod-warning {
    color: rgba(255, 255, 255, 1.0);
    background-color: #FF9800;
    border-color: #FF9800;
}

.jupyter-button.mod-warning.mod-active {
    color: rgba(255, 255, 255, 1);
    background-color: #F57C00;
    border-color: #F57C00;
}

/* Button "Danger" Styling */

.jupyter-button.mod-danger {
    color: rgba(255, 255, 255, 1.0);
    background-color: #F44336;
    border-color: #F44336;
}

.jupyter-button.mod-danger.mod-active {
    color: rgba(255, 255, 255, 1);
    background-color: #D32F2F;
    border-color: #D32F2F;
}

/* Widget Button*/

.widget-button, .widget-toggle-button {
    width: 148px;
}

/* Widget Label Styling */

.widget-label {
    /* Label */
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 28px;
    max-width: 300px;
}

.widget-inline-hbox .widget-label {
    /* Horizontal Widget Label */
    text-align: right;
    margin-right: 4px;
    max-width: 148px;
    min-width: 80px;
    -ms-flex-negative: 0;
        flex-shrink: 0;
}

.widget-inline-vbox .widget-label {
    /* Vertical Widget Label */
    text-align: center;
}

/* Widget Readout Styling */

.widget-readout {
    /* Label */
    font-size: 13px;
    height: 28px;
    line-height: 28px;
    margin-left: 4px;
    overflow: hidden;
    white-space: nowrap;
    text-align: center;
}

.widget-readout.overflow {
    /* Overflowing Readout */

    /* From Material Design Lite
        shadow-key-umbra-opacity: 0.2;
        shadow-key-penumbra-opacity: 0.14;
        shadow-ambient-shadow-opacity: 0.12;
     */

    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .2),
                0 3px 1px -2px rgba(0, 0, 0, .14),
                0 1px 5px 0 rgba(0, 0, 0, .12);
}

.widget-inline-hbox .widget-readout {
    /* Horizontal Readout */
    text-align: center;
    max-width: 148px;
    min-width: 72px;
    margin-left: 4px;
}

.widget-inline-vbox .widget-readout {
    /* Vertical Readout */
    margin-top: 4px;
}

/* Widget Checkbox Styling */

.widget-checkbox {
    width: 148px;
    height: 28px;
    line-height: 28px;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
}

.widget-checkbox input[type="checkbox"] {
    margin: 0px 4px 0px 4px;
    height: 28px;
    line-height: 28px;
    font-size: large;
    -webkit-box-flex: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
    -ms-flex-item-align: center;
        -ms-grid-row-align: center;
        align-self: center;
}

/* Widget Valid Styling */

.widget-valid {
    height: 28px;
    line-height: 28px;
    width: 148px;
    font-size: 13px;
}

.widget-valid i:before {
    height: 28px;
    line-height: 28px;
    margin-right: 4px;
    margin-left: 4px;

    /* from the fa class in FontAwesome: https://github.com/FortAwesome/Font-Awesome/blob/49100c7c3a7b58d50baa71efef11af41a66b03d3/css/font-awesome.css#L14 */
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.widget-valid.mod-valid i:before {
    content: "\f00c";
    color: green;
}

.widget-valid.mod-invalid i:before {
    content: "\f00d";
    color: red;
}

/* Widget Text and TextArea Stying */

.widget-textarea, .widget-text {
    width: 300px;
}

.widget-text input[type="text"] {
    height: 28px;
    line-height: 28px;
}

.widget-text input[type="text"], .widget-textarea textarea {
    box-sizing: border-box;
    border: 1px solid #9E9E9E;
    background-color: white;
    color: rgba(0, 0, 0, .87);
    font-size: 13px;
    padding: 4px;
    -webkit-box-flex: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
    min-width: 148px; /* This makes it possible for the flexbox to shrink this input */
    -ms-flex-negative: 1;
        flex-shrink: 1;
}

.widget-text input:focus, .widget-textarea textarea:focus {

    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .2),
                0 3px 1px -2px rgba(0, 0, 0, .14),
                0 1px 5px 0 rgba(0, 0, 0, .12);
}

/* Widget Slider */

.widget-slider .ui-slider {
    /* Slider Track */
    border: 1px solid #E0E0E0;
    background: white;
    box-sizing: border-box;
    position: relative;
}

.widget-slider .ui-slider-handle {
    /* Slider Handle */
    outline: none !important; /* focused slider handles are colored - see below */
    position: absolute;
    background-color: #EEEEEE;
    border: 1px solid #E0E0E0;
    box-sizing: border-box;
    z-index: 1;
    background-image: none; /* Override jquery-ui */
}

/* Override jquery-ui */

.widget-slider .ui-slider-handle:hover {
    background-color: white;
    border: 1px solid #9E9E9E;
}

.widget-slider .ui-slider-handle:focus {
    background-color: #2196F3;
    border-color: #9E9E9E;
    z-index: 2;
}

.widget-slider .ui-slider-range {
    /* Interval between the two specified value of a double slider */
    position: absolute;
    background: #BDBDBD;
    z-index: 0;
}

/* Shapes of Slider Handles */

.widget-hslider .ui-slider-handle {
    width: 12px;
    height: 28px;
    margin-top: -12px;
    margin-left: -5px;
    top: 0;
}

.widget-vslider .ui-slider-handle {
    width: 28px;
    height: 12px;
    margin-bottom: -5px;
    margin-left: -12px;
    left: 0;
}

.widget-hslider .ui-slider-range {
    height: 12px;
    margin-top: -4px;
}

.widget-vslider .ui-slider-range {
    width: 12px;
    margin-left: -4px;
}

/* Horizontal Slider */

.widget-hslider {
    width: 300px;
    height: 28px;
    line-height: 28px;
}

.widgets-slider .slider-container {
    overflow: visible;
}

.widget-hslider .slider-container {
    height: 28px;
    width: 148px;
    margin-left: 4px;
    margin-right: 4px;
    -ms-flex-item-align: stretch;
        -ms-grid-row-align: stretch;
        align-self: stretch;
}

.widget-hslider .ui-slider {
    /* Inner, invisible slide div */
    height: 6px;
    margin-top: 11px;
    width: 100%;
}

/* Vertical Slider */

.widget-vbox .widget-label {
    height: 28px;
    line-height: 28px;
}

.widget-vslider {
    /* Vertical Slider */
    height: 200px;
    width: 72px;
}

.widget-vslider .slider-container {
    height: 140px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 4px;
    margin-top: 4px;
}

.widget-vslider .ui-slider {
    /* Inner, invisible slide div */
    width: 6px;
    height: 100%;
    margin-left: 0px;
}

/* Widget Progress Styling */

.progress-bar {
    -webkit-transition: none;
    transition: none;
}

.progress-bar {
    height: 28px;
}

.progress-bar {
    background-color: #2196F3;
}

.progress-bar-success {
    background-color: #4CAF50;
}

.progress-bar-info {
    background-color: #00BCD4;
}

.progress-bar-warning {
    background-color: #FF9800;
}

.progress-bar-danger {
    background-color: #F44336;
}

.progress {
    background-color: #EEEEEE;
    border: 1px solid #E0E0E0;
}

/* Horisontal Progress */

.widget-hprogress {
    /* Progress Bar */
    height: 28px;
    line-height: 28px;
    width: 300px;
}

.widget-hprogress .progress {
    -webkit-box-flex: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
    height: 20px;
    margin-top: auto;
    margin-bottom: auto;
}

/* Vertical Progress */

.widget-vprogress {
    height: 200px;
    width: 72px;
}

.widget-vprogress .progress {
    -webkit-box-flex: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
    width: 20px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0;
}

/* Dropdown Widget Styling */

.widget-dropdown {
    height: 28px;
    line-height: 28px;
    min-width: 300px;
}

.widget-dropdown.short {
    min-width: 148px;
}

.widget-dropdown-toggle {
    float: right;
    min-width: 72px;
    max-width: 300px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
    margin: 0;
    padding: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
    cursor: pointer;
    height: 28px;
    line-height: 28px;

    /* TODO: figure out why the outline isn't working... */
    box-shadow: none;
    border: 1px solid #9E9E9E;
    color: rgba(0, 0, 0, .87);
    background-color: white;
    font-size: 13px;
}

.widget-dropdown .widget-dropdown-toggle-selected {
    -webkit-box-flex: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
}

.widget-dropdown .widget-dropdown-caret {
    -webkit-box-flex: 0;
        -ms-flex: 0;
            flex: 0;
    -ms-flex-item-align: center;
        -ms-grid-row-align: center;
        align-self: center;
    margin-right: 4px;
}

.widget-dropdown .widget-dropdown-toggle .dropdown-menu li a {
    color: inherit;
}

ul.widget-dropdown-droplist {
    background: white;
    color: rgba(0, 0, 0, .87);
    border: 1px solid #9E9E9E;
    box-sizing: border-box;
    list-style-type: none;
    position: absolute;
    margin: 0;
    z-index: 9999; /* This is to appear above the #header */
    padding: 0;
    cursor: pointer;
    height: auto;
    overflow: auto;
    display: none;
}

ul.widget-dropdown-droplist.below {
    border-top: none;
    -webkit-transform: translateY(-1px);
            transform: translateY(-1px);
}

ul.widget-dropdown-droplist.above {
    border-bottom: none;
    -webkit-transform: translateY(2px);
            transform: translateY(2px);
}

ul.widget-dropdown-droplist a {
    color: inherit;
    text-decoration: none;
}

ul.widget-dropdown-droplist li {
    display: block;
    padding: 0 18px;
    font-size: 13px;
    height: 24px;
    line-height: 24px;
}

ul.widget-dropdown-droplist li.mod-active {
    background: #EEEEEE;
}

ul.widget-dropdown-droplist .widget-droplist-check {
    width: 15px;
    padding-right: 3px;
    box-sizing: border-box;
}

ul.widget-dropdown-droplist li.mod-selected {
    padding-left: 3px;
}

ul.widget-dropdown-droplist.mod-active {
    display: block;
}

/* Select Widget Styling */

.widget-select {
    min-width: 300px;
    height: 28px;
    line-height: 28px;
}

.widget-select .jp-Dialog-selectWrapper {
    border: 1px solid #9E9E9E;
    border-radius: 0;
    height: 28px;
    line-height: 28px;
    min-width: 148px;
    max-width: 300px;
    -webkit-box-flex: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
    background-color: white;
}

.widget-select select {
    border: none;
    background-color: white;
    color: rgba(0, 0, 0, .87);
    font-size: 13px;
    width: 100%;
    height: 26px;
    vertical-align: top;
}

.widget-select select option:checked {
    color: rgba(0, 0, 0, 1.0);
    background: white repeat url("data:image/gif;base64,R0lGO...");
}

/* Select Multiple */

.widget-select-multiple {
    min-width: 300px;
    line-height: 28px;
}

.widget-select-multiple select {
    min-width: 148px;
    max-width: 300px;
    border: 1px solid #9E9E9E;
    background-color: white;
    color: rgba(0, 0, 0, .87);
    font-size: 13px;
    -webkit-box-flex: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
}

.widget-select-multiple select option:checked {
    color: rgba(0, 0, 0, 1.0);
    background: white repeat url("data:image/gif;base64,R0lGO...");
}

.wiget-select-multiple select option {
    padding-left: 4px;
    line-height: 28px;
    /* line-height doesn't work on some browsers for select options */
    padding-top: 21.5px;
    padding-bottom: 21.5px;
}

/* Toggle Buttons Styling */

.widget-toggle-buttons {
    line-height: 28px;
}

/* Radio Buttons Styling */

.widget-radio {
    min-width: 300px;
    width: 300px;
    line-height: 28px;
}

.widget-radio-box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: stretch;
        -ms-flex-align: stretch;
            align-items: stretch;
    box-sizing: border-box;
    -webkit-box-flex: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
}

.widget-radio-box label {
    height: 28px;
    line-height: 28px;
    font-size: 13px;
}

.widget-radio-box input {
    height: 28px;
    line-height: 28px;
    margin: 0 4px 0 4px;
    float: left;
}

/* Color Picker Styling */

.widget-colorpicker {
    width: 300px;
    height: 28px;
    line-height: 28px;
}

.widget-colorpicker > .widget-colorpicker-input {
    -webkit-box-flex: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
    -ms-flex-negative: 1;
        flex-shrink: 1;
    min-width: 72px;
}

.widget-colorpicker input[type="color"] {
    width: 28px;
    height: 28px;
    padding: 0 2px; /* make the color square actually square on Chrome on OS X */
    background: white;
    color: rgba(0, 0, 0, .87);
    border: 1px solid #9E9E9E;
    border-left: none;
    -webkit-box-flex: 0;
        -ms-flex-positive: 0;
            flex-grow: 0;
    -ms-flex-negative: 0;
        flex-shrink: 0;
    box-sizing: border-box;
    -ms-flex-item-align: stretch;
        -ms-grid-row-align: stretch;
        align-self: stretch;
}

.widget-colorpicker input[type="text"] {
    -webkit-box-flex: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
    /*outline: none !important;*/
    height: 28px;
    background: white;
    color: rgba(0, 0, 0, .87);
    border: 1px solid #9E9E9E;
    font-size: 13px;
    padding: 4px;
    min-width: 0; /* This makes it possible for the flexbox to shrink this input */
    -ms-flex-negative: 1;
        flex-shrink: 1;
    box-sizing: border-box;
}

/* Date Picker Styling */

.widget-datepicker {
    width: 300px;
    height: 28px;
    line-height: 28px;
}

.widget-datepicker input[type="date"] {
    -webkit-box-flex: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
    height: 28px;
    border: 1px solid #9E9E9E;
    font-size: 13px;
    padding: 4px;
    box-sizing: border-box;
}

/* Play Widget */

.widget-play {
    min-width: 148px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
}

.widget-play .jupyter-button {
    min-width: 45.33333px;
    text-align: center;
}

/* Tab Widget */

.jupyter-widgets .p-TabBar {
    overflow-x: visible;
    overflow-y: visible;
}

.jupyter-widgets.widget-tab .p-TabBar.p-mod-horizontal > .p-TabBar-content {
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: flex-end;
    margin-bottom: 0;
}

.jupyter-widgets.widget-tab .widget-tab-contents {
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    background: white;
    color: rgba(0, 0, 0, .87);
    border: 1px solid #9E9E9E;
    padding: 15px;
}

.jupyter-widgets.widget-tab .widget-tab-contents .widget-tab-child.p-mod-hidden {
    display: none !important;
}

.jupyter-widgets.widget-tab .widget-tab-bar.p-TabBar {
    font: 12px Helvetica, Arial, sans-serif;
}

.jupyter-widgets.widget-tab .p-TabBar-tab {
    -webkit-box-flex: 0;
        -ms-flex: 0 1 144px;
            flex: 0 1 144px;
    min-width: 35px;
    min-height: 25px;
    line-height: 24px;
    margin-left: -1px;
    padding: 0px 10px;
    background: #EEEEEE;
    color: rgba(0, 0, 0, .54);
    border: 1px solid #9E9E9E;
    border-bottom: none;
    position: relative;
}

.jupyter-widgets.widget-tab .p-TabBar-tab.p-mod-current {
    color: rgba(0, 0, 0, 1.0);
    /* We want the background to match the tab content background */
    background: white;
    min-height: 26px;
    -webkit-transform: translateY(1px);
            transform: translateY(1px);
}

.jupyter-widgets.widget-tab .p-TabBar-tab.p-mod-current:before {
    position: absolute;
    top: -1px;
    left: -1px;
    content: '';
    height: 2px;
    width: calc(100% + 2 * 1px);
    background: #2196F3;
}

.jupyter-widgets.widget-tab .p-TabBar-tab:first-child {
    margin-left: 0;
}

.jupyter-widgets.widget-tab .p-TabBar-tab:hover:not(.p-mod-current) {
    background: white;
    color: rgba(0, 0, 0, .87);
}

.jupyter-widgets.widget-tab.p-mod-closable > .p-TabBar-tabCloseIcon {
    margin-left: 4px;
}

.jupyter-widgets.widget-tab.p-mod-closable > .p-TabBar-tabCloseIcon:before {
    font-family: FontAwesome;
    content: '\f00d'; /* close */
}

.jupyter-widgets.widget-tab .p-TabBar-tabIcon,
.jupyter-widgets.widget-tab .p-TabBar-tabLabel,
.jupyter-widgets.widget-tab .p-TabBar-tabCloseIcon {
    line-height: 24px;
}

/* Accordion Widget */

.p-Collapse {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: stretch;
        -ms-flex-align: stretch;
            align-items: stretch;
}

.p-Collapse-header {
    padding: 4px;
    cursor: pointer;
    color: rgba(0, 0, 0, .54);
    background-color: #EEEEEE;
    border: 1px solid #9E9E9E;
    padding: 10px 15px;
    font-weight: bold;
}

.p-Collapse-header:hover {
    background-color: white;
    color: rgba(0, 0, 0, .87);
}

.p-Collapse-open .p-Collapse-header {
    background-color: white;
    color: rgba(0, 0, 0, 1.0);
    cursor: default;
    border-bottom: none;
}

.p-Collapse .p-Collapse-header::before {
    content: '\f0da\00A0';  /* caret-right, non-breaking space */
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.p-Collapse-open .p-Collapse-header::before {
    content: '\f0d7\00A0'; /* caret-down, non-breaking space */
}

.p-Collapse-contents {
    padding: 15px;
    background-color: white;
    color: rgba(0, 0, 0, .87);
    border-left: 1px solid #9E9E9E;
    border-right: 1px solid #9E9E9E;
    border-bottom: 1px solid #9E9E9E;
}

.p-Accordion {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: stretch;
        -ms-flex-align: stretch;
            align-items: stretch;
}

.p-Accordion .p-Collapse {
    margin-bottom: 0;
}

.p-Accordion .p-Collapse + .p-Collapse {
    margin-top: 4px;
}

/* HTML widget */

.widget-html {
    font-size: 13px;
}
