jupyterthemes/layout/notebook.less
/*****************************************************************
 Notebook stylization  (toolbars, lists, menus, scroll & buttons)
*****************************************************************/
div#notebook {
    font-family: @notebook-fontfamily;
    font-size: @nb-fontsize;
    line-height: @cc-line-height;
    color: @cc-input-fg;
    -webkit-font-smoothing: antialiased !important;
    padding-top: 25px !important;
}
body,
div.body {
    font-family: @notebook-fontfamily;
    font-size: @nb-fontsize;
    color: @notebook-fg;
    background-color: @notebook-bg;
    background: @notebook-bg;
    -webkit-font-smoothing: antialiased !important;
}
body.notebook_app {
    padding: 0;
    background-color: @notebook-bg;
    background: @notebook-bg;
    padding-right: 0px !important;
    overflow-y: hidden;
}
a {
    font-family: @notebook-fontfamily;
    color: @notebook-fg;
    -webkit-font-smoothing: antialiased !important;
}
a:hover, a:focus {
    color: @selected-fg;
    -webkit-font-smoothing: antialiased !important;
}
div#maintoolbar {
    position: relative;
    width: 90%;
    margin-left: -10%;
    padding-right: 8%;
    float: left;
    // background: transparent !important;
    background: @notebook-bg !important;
    background-color: @notebook-bg !important;
}
#maintoolbar {
    margin-bottom: -3px;
    margin-top: 2px !important;
    border: 0px;
    min-height: 27px;
    padding-top: 2px;
    padding-bottom: 0px;
}
#maintoolbar .container {
    width: 75%;
    margin-right: auto;
    margin-left: auto;
}
/*********************************************************/
/*** INTRO-PAGE TOOLBAR, LIST CONTAINERS, AND NAV TABS ***/
/*********************************************************/
.list_header,
div#notebook_list_header.row.list_header {
    font-size: 14pt;
    color: @selected-fg;
    background-color: transparent;
    height: 35px;
}
i.fa.fa-folder {
    display: inline-block;
    font: normal normal normal 14px "FontAwesome";
    font-family: "FontAwesome" !important;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    font-size: 18px;
    -moz-osx-font-smoothing: grayscale;
}
#running .panel-group .panel .panel-heading {
    font-size: 14pt;
    color: @notebook-fg;
    padding: 8px 8px;
    background: @panel-header-bg;
    background-color: @panel-header-bg;
}
#running .panel-group .panel .panel-heading a {
    font-size: 14pt;
    color: @notebook-fg;
}
#running .panel-group .panel .panel-heading a:focus,
#running .panel-group .panel .panel-heading a:hover {
    font-size: 14pt;
    color: @notebook-fg;
}
#running .panel-group .panel .panel-body .list_container .list_item {
    background: @panel-bg;
    background-color: @panel-bg;
    padding: 2px;
    border-bottom: 2px solid @dropdown-border;
}
#running .panel-group .panel .panel-body .list_container .list_item:hover {
    background: @panel-bg;
    background-color: @panel-bg;
}
#running .panel-group .panel .panel-body {
    padding: 2px;
}
button#refresh_running_list {
    border: none !important;
}
button#refresh_cluster_list {
    border: none !important;
}
div.running_list_info.toolbar_info {
    font-size: 15px;
    padding: 4px 0 4px 0;
    margin-top: 5px;
    margin-bottom: 8px;
    height: 24px;
    line-height: 24px;
    text-shadow: none;
}
.list_placeholder {
    font-weight: normal;
}
#tree-selector {
    padding: 0px;
    border-color: transparent;
}
#project_name > ul > li > a > i.fa.fa-home {
    color: @item-theme;
    font-size: 17pt;
    display: inline-block;
    position: static;
    padding: 0px 0px;
    font-weight: normal;
    text-align: center;
    vertical-align: text-top;
}
.fa-folder:before {
    color: @item-blue;
}
.fa-arrow-up:before {
    font-size: 14px;
}
.fa-arrow-down:before {
    font-size: 14px;
}
span#last-modified.btn.btn-xs.btn-default.sort-action:hover .fa,
span#sort-name.btn.btn-xs.btn-default.sort-action:hover .fa {
    color: @button-hover;
}

.folder_icon:before {
    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;
    content: "\f07b";
    color: @item-blue;
}
.notebook_icon:before {
    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;
    content: "\f02d";
    position: relative;
    color: @item-green !important;
    top: 0px;
}
.file_icon:before {
    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;
    content: "\f15b";
    position: relative;
    top: 0px;
    color: @edgeColor !important;
}
#project_name a {
    display: inline-flex;
    padding-left: 7px;
    margin-left: -2px;
    text-align: -webkit-auto;
    vertical-align: baseline;
    font-size: 18px;
}
div#notebook_toolbar div.dynamic-instructions {
    font-family: @notebook-fontfamily;
    font-size: 17px;
    color: @disabled;
}
span#login_widget > .button, #logout {
    font-family: "Proxima Nova", sans-serif;
    color: @button-color;
    background: transparent;
    background-color: transparent;
    border: 2px solid @button-bg;
    font-weight: normal;
    box-shadow: none;
    text-shadow: none;
    border-radius: 3px;
    margin-right: 10px;
    padding: 2px 7px;
}
span#login_widget > .button:hover, #logout:hover {
    color: @button-hover;
    background-color: transparent;
    background: transparent;
    border: 2px solid @button-hover;
    background-image: none;
    box-shadow: none !important;
    border-radius: 3px;
}
span#login_widget > .button:focus, #logout:focus,
span#login_widget > .button.focus, #logout.focus,
span#login_widget > .button:active, #logout:active,
span#login_widget > .button.active, #logout.active,
.open > .dropdown-togglespan#login_widget > .button,
.open > .dropdown-toggle#logout {
    color: @selected-fg-bright;
    background-color: @button-color;
    background: @button-color;
    border-color: @button-color;
    background-image: none;
    box-shadow: none !important;
    border-radius: 2px;
}
body > #header #header-container {
    padding-bottom: 0px;
    padding-top: 4px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}
body > #header {
    background: @notebook-bg;
    background-color: @notebook-bg;
    position: relative;
    z-index: 100;
}
.list_container {
    font-size: @nb-fontsize;
    color: @notebook-fg;
    border: none;
    text-shadow: none !important;
}
.list_container > div {
    border-bottom: 1px solid @selected-third;
    font-size: @nb-fontsize;
}
.list_header > div, .list_item > div {
    padding-top: 6px;
    padding-bottom: 2px;
    padding-left: 0px;
}
.list_header > div .item_link,
.list_item > div .item_link {
    margin-left: -1px;
    vertical-align: middle;
    line-height: 22px;
    font-size: @nb-fontsize;
}
.item_icon {
    color: @item-blue;
    font-size: 13pt;
    vertical-align: middle;
}
.list_item input:not([type="checkbox"]) {
    padding-right: 0px;
    height: 1.75em;
    width: 25%;
    margin: 0px 0 0;
    margin-top: 0px;
}
.list_header > div .item_link, .list_item > div .item_link {
    margin-left: -1px;
    vertical-align: middle;
    line-height: 1.5em;
    font-size: 12pt;
    display: inline-table;
    position: static;
}
#button-select-all {
    height: 34px;
    min-width: 55px;
    z-index: 0;
    border: none !important;
    padding-top: 0px;
    padding-bottom: 0px;
    margin-bottom: 0px;
    margin-top: 0px;
    left: -3px;
    border-radius: 0px !important;
}
#button-select-all:focus,
#button-select-all:active:focus,
#button-select-all.active:focus,
#button-select-all.focus,
#button-select-all:active.focus,
#button-select-all.active.focus {
    background-color: @button-bg !important;
    background: @button-bg !important;
}
button#tree-selector-btn {
    height: 34px;
    font-size: @nb-fontsize-sub;
    border: none;
    left: 0px;
    border-radius: 0px !important;
}
input#select-all.pull-left.tree-selector {
    margin-left: 7px;
    margin-right: 2px;
    margin-top: 2px;
    top: 4px;
}
input[type="radio"],
input[type="checkbox"] {
    margin-top: 1px;
    line-height: normal;
}
.delete-button {
    border: none !important;
}
i.fa.fa-trash {
    font-size: 13.5pt;
}
.list_container a {
    font-size: 16px;
    color: @notebook-fg;
    border: none;
    text-shadow: none !important;
    font-weight: normal;
    font-style: normal;
}
div.list_container a:hover {
    color: @selected-fg;
}
.list_header > div input,
.list_item > div input {
    margin-right: 7px;
    margin-left: 12px;
    vertical-align: baseline;
    line-height: 22px;
    position: relative;
    top: -1px;
}
div.list_item:hover {
    background-color: @selected-tenth;
}
.breadcrumb>li {
    font-size: @nb-fontsize-sub;
    color: @notebook-fg;
    border: none;
    text-shadow: none !important;
}
.breadcrumb > li + li:before {
    content: "/\00a0";
    padding: 0px;
    color: @notebook-fg;
    font-size: 18px;
}
#project_name > .breadcrumb {
    padding: 0px;
    margin-bottom: 0px;
    background-color: transparent;
    font-weight: normal;
    margin-top: -2px;
}
ul#tabs a {
    font-family: @notebook-fontfamily;
    font-size: 13.5pt;
    font-weight: normal;
    font-style: normal;
    text-shadow: none !important;

}
.nav-tabs {
    font-family: @notebook-fontfamily;
    font-size: 13.5pt;
    font-weight: normal;
    font-style: normal;
    background-color: transparent;
    border-color: transparent;
    text-shadow: none !important;
    border: 2px solid transparent;
}

.nav-tabs > li > a:active,
.nav-tabs > li > a:focus,
.nav-tabs > li > a:hover,
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:focus,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
    color: @button-hover;
    background-color: transparent;
    border-color: transparent;
    border-bottom: 2px solid transparent;
}
.nav > li.disabled > a,
.nav > li.disabled > a:hover {
    color: @disabled;
}
.nav-tabs > li > a:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: -2px;
  left: 0;
  background-color: @button-hover;
  visibility: hidden;
  -webkit-transform: perspective(0) scaleX(0);
  transform: perspective(0) scaleX(0);
  -webkit-transition: ease 220ms;
  transition: ease 220ms;
  -webkit-font-smoothing: antialiased !important;
}
.nav-tabs > li > a:hover:before {
  visibility: visible;
  -webkit-transform: perspective(1) scaleX(1);
  transform: perspective(1) scaleX(1);
}
.nav-tabs > li.active > a:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 2px;
    bottom: -2px;
    left: 0;
    background-color: @button-hover;
    visibility: visible;
    -webkit-transform: perspective(1) scaleX(1);
    transform: perspective(1) scaleX(1);
    -webkit-font-smoothing: subpixel-antialiased !important;
}



/********************************************************/
/***************** NOTEBOOK PAGE SETTINGS ***************/
/********************************************************/
div#notebook {
    font-family: @notebook-fontfamily;
    font-size: @nb-fontsize;
    padding-top: 4px;
}
.notebook_app {
    background-color: @notebook-bg;
}
#notebook-container {
    padding: 13px 2px;
    background-color: @notebook-bg;
    min-height: 0px;
    box-shadow: none;
    width: @cell-width;
    margin-right: auto;
    margin-left: auto;
}
div#ipython-main-app.container {
    width: @cell-width;
    margin-right: auto;
    margin-left: auto;
    margin-right: @container-margins;
    margin-left: @container-margins;
}
.container {
    width: @cell-width;
    margin-right: auto;
    margin-left: auto;
}
div#menubar-container {
    width: 100%;
    width: @cell-width;
}
div#header-container {
    width: @cell-width;
}

/********************************************************/
/************** NOTEBOOK PAGE HEADER AND NA *************/
/********************************************************/
.notebook_app #header,
.edit_app #header {
    box-shadow: none !important;
    background-color: @notebook-bg;
    border-bottom: 2px solid @selected-third;
}
#header,
.edit_app #header {
    font-family: @notebook-fontfamily;
    font-size: @nb-fontsize;
    box-shadow: none;
    background-color: @notebook-bg;
}
#header .header-bar,
.edit_app #header .header-bar {
    background: @notebook-bg;
    background-color: @notebook-bg;
}
body > #header .header-bar {
    width: 100%;
    background: @notebook-bg;
}
span.checkpoint_status, span.autosave_status {
    font-size: small;
    display: none;
}
#menubar, div#menubar {
    background-color: @notebook-bg;
    padding-top: 0px !important;
}
#menubar .navbar, .navbar-default {
    background-color: @notebook-bg;
    margin-bottom: 0px;
    margin-top: 0px;
}
.navbar {
    border: none;
}
div.navbar-text,
.navbar-text,
.navbar-text.indicator_area,
p.navbar-text.indicator_area {
    margin-top: 8px !important;
    margin-bottom: 0px;
    color: @item-theme;
}
.navbar-default {
    font-family: @notebook-fontfamily;
    font-size: @nb-fontsize;
    background-color: @notebook-bg;
    border-color: @dropdown-hover;
    line-height: 1.5em;
    padding-bottom: 0px;
}
.navbar-default .navbar-nav > li > a {
    font-family: @notebook-fontfamily;
    font-size: @nb-fontsize;
    color: @notebook-fg;
    display: block;
    line-height: 1.5em;
    padding-top: 14px;
    padding-bottom: 11px;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
    color: @selected-fg !important;
    background-color: @selected-third !important;
    border-color: @dropdown-hover !important;
    line-height: 1.5em;
    transition: 80ms ease;
}
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
    color: @selected-fg-bright;
    background-color: @dropdown-bg; //@navbar-selected;
    border-color: @dropdown-bg; //@navbar-selected;
    line-height: 1.5em;
}
.navbar-nav > li > .dropdown-menu {
    margin-top: 0px;
}
.navbar-nav {
    margin: 0;
}


/****************************************/
/********* ICONS and INDICATORS *********/
/****************************************/

div.notification_widget.info,
.notification_widget.info,
.notification_widget:active:hover,
.notification_widget.active:hover,
.open > .dropdown-toggle.notification_widget:hover,
.notification_widget:active:focus,
.notification_widget.active:focus,
.open > .dropdown-toggle.notification_widget:focus,
.notification_widget:active.focus,
.notification_widget.active.focus,
.open > .dropdown-toggle.notification_widget.focus,
div#notification_notebook.notification_widget.btn.btn-xs.navbar-btn,
div#notification_notebook.notification_widget.btn.btn-xs.navbar-btn:hover,
div#notification_notebook.notification_widget.btn.btn-xs.navbar-btn:focus {
    color: @nb-header-fg !important;
    background-color: transparent !important;
    border-color: transparent !important;
    padding-bottom: 0px !important;
    margin-bottom: 0px !important;
    font-size: 9pt !important;
    z-index: 0;
}
div#notification_notebook.notification_widget.btn.btn-xs.navbar-btn {
    font-size: 9pt !important;
    z-index: 0;
}
.notification_widget {
    color: @item-blue;
    z-index: -500;
    font-size: 9pt;
    background: transparent;
    background-color: transparent;
    margin-right: 3px;
    border: none;
}
.notification_widget,
div.notification_widget {
    margin-right: 0px;
    margin-left: 0px;
    padding-right: 0px;
    vertical-align: text-top !important;
    margin-top: 6px !important;
    background: transparent !important;
    background-color: transparent !important;
    font-size: 9pt !important;
    border: none;
}
.navbar-btn.btn-xs:hover {
    border: none !important;
    background: transparent !important;
    background-color: transparent !important;
    color: @button-color !important;
}

/* COMMENT OUT TO RESTORE START-UP NOTIFICATIONS */
div.notification_widget.info,
.notification_widget.info {
    display: none !important;
}

.edit_mode .modal_indicator:before {
    display: none;
}
.command_mode .modal_indicator:before {
    display: none;
}
.item_icon {
    color: @item-blue;
}
.item_buttons .kernel-name {
    font-size: @nb-fontsize;
    color: @item-blue;
}
.running_notebook_icon:before {
    color: @item-green !important;
    font: normal normal normal 15px/1 FontAwesome;
    font-size: 15px;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: "\f10c";
    vertical-align: middle;
    position: static;
    display: inherit;
}
.item_buttons .running-indicator {
    padding-top: 4px;
    color: @item-green;
    font-family: @notebook-fontfamily;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
}
#notification_trusted {
    font-family: @notebook-fontfamily;
    // font-size: 17px !important;
    border: none;
    background: transparent;
    background-color: transparent;
    margin-bottom: 0px !important;
    // margin-top: 12px !important;
    vertical-align: bottom !important;
    color: @disabled !important;
    cursor: default !important;
}
#notification_area, div.notification_area {
    float: right !important;
    position: static;
    cursor: pointer;
    padding-top: 6px;
    padding-right: 4px;
}

div#notification_notebook.notification_widget.btn.btn-xs.navbar-btn {
    font-size: 9pt !important;
    z-index: 0;
    margin-top: -5px !important;
}
#modal_indicator {
    float: right !important;
    color: #4c8be2;
    background: @notebook-bg;
    background-color: @notebook-bg;
    margin-top: 8px !important;
    margin-left: 0px;
}
#kernel_indicator {
    float: right !important;
    color: @item-theme;
    background: @notebook-bg;
    background-color: @notebook-bg;
    border-left: 2px solid @item-theme;
    padding-top: 0px;
    padding-bottom: 4px;
    margin-top: 10px !important;
    margin-left: -2px;
    padding-left: 5px !important;
}
#kernel_indicator .kernel_indicator_name {
    font-size: 17px;
    color: @item-theme;
    background: @notebook-bg;
    background-color: @notebook-bg;
    padding-left: 5px;
    padding-right: 5px;
    margin-top: 4px;
    vertical-align: text-top;
    padding-bottom: 0px;
}

/******************************************/
/******** KERNEL RUNNING ANIMATION ********/
/******************************************/
.kernel_idle_icon:before {
    display: inline-block;
    font: normal normal normal 22px/1 FontAwesome;
    font-size: 22px;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    cursor: pointer;
    margin-left: 0px !important;
    opacity: 0.7;
    vertical-align: bottom;
    margin-top: 1px;
    content: "\f1db";
}
.kernel_busy_icon:before {
    display: inline-block;
    font: normal normal normal 22px/1 FontAwesome;
    font-size: 22px;
    -webkit-animation: pulsate 2s infinite ease-out;
    animation: pulsate 2s infinite ease-out;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    cursor: pointer;
    margin-left: 0px !important;
    vertical-align: bottom;
    margin-top: 1px;
    content: "\f111";
}
@-webkit-keyframes pulsate {
    0% {-webkit-transform: scale(1.0, 1.0); opacity: 0.8;}
    8% {-webkit-transform: scale(1.0, 1.0); opacity: 0.8;}
    50% {-webkit-transform: scale(0.75, 0.75); opacity: 0.3;}
    92% {-webkit-transform: scale(1.0, 1.0); opacity: 0.8;}
    100% {-webkit-transform: scale(1.0, 1.0); opacity: 0.8;}
}
// i#kernel_indicator_icon {
//     vertical-align: sub;
// }
div.notification_widget.info,
.notification_widget.info,
.notification_widget:active:hover,
.notification_widget.active:hover,
.open > .dropdown-toggle.notification_widget:hover,
.notification_widget:active:focus,
.notification_widget.active:focus,
.open > .dropdown-toggle.notification_widget:focus,
.notification_widget:active.focus,
.notification_widget.active.focus,
.open > .dropdown-toggle.notification_widget.focus,
div#notification_notebook.notification_widget.btn.btn-xs.navbar-btn,
div#notification_notebook.notification_widget.btn.btn-xs.navbar-btn:hover,
div#notification_notebook.notification_widget.btn.btn-xs.navbar-btn:focus {
    color: @nb-header-fg;
    background-color: @notebook-bg;
    border-color: @notebook-bg;
}
#notification_area,
div.notification_area {
    float: right !important;
    position: static;
}
.notification_widget,
div.notification_widget {
    margin-right: 0px;
    margin-left: 0px;
    padding-right: 0px;
    vertical-align: text-top !important;
    margin-top: 6px !important;
    z-index: 1000;
}
#kernel_logo_widget,
#kernel_logo_widget .current_kernel_logo {
    display: @kernel-logo-display;
}
div#ipython_notebook {
    display: none;
}
i.fa.fa-icon {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: auto;
}
.fa {
    display: inline-block;
    font: normal normal normal 10pt/1 "FontAwesome", @notebook-fontfamily;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


/****************************************/
/************ DROPDOWN MENUS ************/
/****************************************/
.dropdown-menu {
    font-family: @notebook-fontfamily;
    font-size: @nb-fontsize;
    box-shadow: none;
    padding: 0px;
    text-align: left;
    border: none;
    background-color: @dropdown-bg;
    background: @dropdown-bg;
    line-height: 1;
}

.dropdown-menu:hover {
    font-family: @notebook-fontfamily;
    font-size: @nb-fontsize;
    box-shadow: none;
    padding: 0px;
    text-align: left;
    border: none;
    background-color: @dropdown-bg;
    box-shadow: none;
    line-height: 1;
}
.dropdown-menu > li > a {
    font-family: @notebook-fontfamily;
    font-size: @nb-fontsize-sub;
    // line-height: 1.1;
    display: block;
    padding: 10px 20px 9px 10px;
    color: @notebook-fg;
    background-color: @dropdown-bg;
    background: @dropdown-bg;
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
    color: @selected-fg;
    background-color: @dropdown-hover;
    background: @dropdown-hover;
    border-color: @dropdown-hover;
    transition: 200ms ease;
}
.dropdown-menu .divider {
    height: 1px;
    margin: 0px 0px;
    overflow: hidden;
    background-color: @selected-half;
}
.dropdown-submenu > .dropdown-menu {
    display: none;
    top: 2px !important;
    left: 100%;
    margin-top: -2px;
    margin-left: 0px;
    padding-top: 0px;
    transition: 200ms ease;
}
.dropdown-menu > .disabled > a,
.dropdown-menu > .disabled > a:hover,
.dropdown-menu > .disabled > a:focus {
    font-family: @notebook-fontfamily;
    font-size: @nb-fontsize-sub;
    font-weight: normal;
    color: @disabled;
    padding: none;
    display: block;
    clear: both;
    // line-height: 1.1;
    white-space: nowrap;
}
.dropdown-submenu > a:after {
    color: @notebook-fg;
    margin-right: -16px;
    margin-top: 0px;
    display: inline-block;
}
.dropdown-submenu:hover > a:after,
.dropdown-submenu:active > a:after,
.dropdown-submenu:focus > a:after,
.dropdown-submenu:visited > a:after {
    color: @item-theme;
    margin-right: -16px;
    display: inline-block !important;
}
div.kse-dropdown > .dropdown-menu,
.kse-dropdown > .dropdown-menu {
    min-width: 0;
    top: 94%;
}


/****************************************/
/**************** BUTTONS ***************/
/****************************************/
.btn, .btn-default {
    font-family: @notebook-fontfamily;
    color: @button-color;
    background: @button-bg;
    background-color: @button-bg;
    border: 2px solid @button-bg;
    font-weight: normal;
    box-shadow: none;
    text-shadow: none;
    border-radius: 3px;
    font-size: @nb-fontsize !important;
}
.btn:hover,
.btn:active:hover,
.btn.active:hover,
.btn-default:hover,
.open > .dropdown-toggle.btn-default:hover,
.open > .dropdown-toggle.btn:hover {
    color: @button-hover;
    border: 2px solid @button-hover-border;
    background-color: @button-hover-bg;
    background: @button-hover-bg;
    background-image: none;
    box-shadow: none !important;
    border-radius: 3px;
}
.btn:active,
.btn.active,
.btn:active:focus,
.btn.active:focus,
.btn:active.focus,
.btn.active.focus,
.btn-default:focus,
.btn-default.focus,
.btn-default:active,
.btn-default.active,
.btn-default:active:hover,
.btn-default.active:hover,
.btn-default:active:focus,
.btn-default.active:focus,
.btn-default:active.focus,
.btn-default.active.focus,
.open > .dropdown-toggle.btn:focus,
.open > .dropdown-toggle.btn.focus,
.open > .dropdown-toggle.btn-default:hover,
.open > .dropdown-toggle.btn-default:focus,
.open > .dropdown-toggle.btn-default.hover,
.open > .dropdown-toggle.btn-default.focus {
    color: @button-hover;
    border: 2px solid @button-hover-border;
    background-color: @button-hover-bg !important;
    background: @button-hover-bg !important;
    background-image: none;
    box-shadow: none !important;
    border-radius: 3px;
}
.btn-default:active:hover,
.btn-default.active:hover,
.btn-default:active:focus,
.btn-default.active:focus,
.btn-default:active.focus,
.btn-default.active.focus {
    color: @button-focus-fg !important;
    background-color: @button-bg;
    border-color: @button-focus-bg !important;
    transition: 2000ms ease;
}
.btn:focus,
.btn.focus,
.btn:active:focus,
.btn.active:focus,
.btn:active,
.btn.active,
.btn:active.focus,
.btn.active.focus {
    color: @button-focus-fg !important;
    outline: none !important;
    outline-width: 0px !important;
    background: @button-focus-bg !important;
    background-color: @button-focus-bg !important;
    border-color: @button-focus-bg !important;
    transition: 200ms ease !important;
}
.item_buttons > .btn,
.item_buttons > .btn-group,
.item_buttons > .input-group {
    font-size: @nb-fontsize;
    background: transparent;
    background-color: transparent;
    border: 0px solid @button-panel-bg;
    border-bottom: 2px solid transparent;
    margin-left: 5px;
    padding-top: 4px !important;
}
.item_buttons > .btn:hover,
.item_buttons > .btn-group:hover,
.item_buttons > .input-group:hover,
.item_buttons > .btn.active,
.item_buttons > .btn-group.active,
.item_buttons > .input-group.active,
.item_buttons > .btn.focus {
    margin-left: 5px;
    background: @button-panel-hover;
    padding-top: 4px !important;
    background-color: transparent;
    border: 0px solid transparent;
    border-bottom: 2px solid @item-theme;
    border-radius: 0px;
    transition: none;
}
.item_buttons {
    line-height: 1.5em !important;
}
.item_buttons .btn {
    min-width: 11ex;
}
.btn-group > .btn:first-child {
    margin-left: 0px;
}
.btn-group > .btn-mini,
.btn-sm,
.btn-group-sm > .btn,
.btn-xs,
.btn-group-xs > .btn,
.alternate_upload .btn-upload,
.btn-group,
.btn-group-vertical {
    font-size: inherit;
    font-weight: normal;
    height: inherit;
    line-height: inherit;
}
.btn-xs, .btn-group-xs > .btn {
    font-size: initial !important;
    background-image: none;
    font-weight: normal;
    text-shadow: none;
    display: inline-table;
    padding: 2px 5px;
    line-height: 1.45;
}
// .btn-group > .btn:first-child {
//     margin-left: 3px;
// }
div#new-buttons > button,
#new-buttons > button,
div#refresh_notebook_list,
#refresh_notebook_list {
    background: transparent;
    background-color: transparent;
    border: none;
}
div#new-buttons > button:hover,
#new-buttons > button:hover,
div#refresh_notebook_list,
#refresh_notebook_list,
div.alternate_upload .btn-upload,
.alternate_upload .btn-upload,
div.dynamic-buttons > button,
.dynamic-buttons > button,
.dynamic-buttons > button:focus,
.dynamic-buttons > button:active:focus,
.dynamic-buttons > button.active:focus,
.dynamic-buttons > button.focus,
.dynamic-buttons > button:active.focus,
.dynamic-buttons > button.active.focus,
#new-buttons > button:focus,
#new-buttons > button:active:focus,
#new-buttons > button.active:focus,
#new-buttons > button.focus,
#new-buttons > button:active.focus,
#new-buttons > button.active.focus,
.alternate_upload .btn-upload:focus,
.alternate_upload .btn-upload:active:focus,
.alternate_upload .btn-upload.active:focus,
.alternate_upload .btn-upload.focus,
.alternate_upload .btn-upload:active.focus,
.alternate_upload .btn-upload.active.focus {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
}
.alternate_upload input.fileinput {
    text-align: center;
    vertical-align: bottom;
    margin-left: -.5ex;
    display: inline-table;
    border: solid 0px @button-bg;
    margin-bottom: -1ex;
}
.alternate_upload .btn-upload {
    display: inline-table;
    background: transparent;
    border: none;
}
.btn-group .btn + .btn,
.btn-group .btn + .btn-group,
.btn-group .btn-group + .btn,
.btn-group .btn-group + .btn-group {
    margin-left: -2px;
}
.btn-group > .btn:first-child:not(:last-child):not(.dropdown-toggle) {
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
    z-index: 2;
}


.dropdown-header {
    font-family: @notebook-fontfamily !important;
    font-size: @nb-fontsize !important;
    color: @item-theme !important;
    border-bottom: none !important;
    padding: 0px !important;
    margin: 6px 6px 0px !important;
}
span#last-modified.btn.btn-xs.btn-default.sort-action,
span#sort-name.btn.btn-xs.btn-default.sort-action,
span#file-size.btn.btn-xs.btn-default.sort-action {
    font-family: @notebook-fontfamily;
    font-size: 16px;
    background-color: transparent;
    background: transparent;
    border: none;
    color: @notebook-fg;
    padding-bottom: 0px;
    margin-bottom: 0px;
    vertical-align: sub;
}
span#last-modified.btn.btn-xs.btn-default.sort-action {
    margin-left: 19px;
}

button.close {
    border: 0px none;
    font-family: sans-serif;
    font-size: 20pt;
    font-weight: normal;
}
.dynamic-buttons {
    padding-top: 0px;
    display: inline-block;
    width: 100%;
}
.close {
    color: @item-red;
    opacity: .5;
    text-shadow: none;
    font-weight: normal;
}
.close:hover {
    color: @item-red;
    opacity: 1;
    font-weight: normal;
}
div.nbext-enable-btns .btn[disabled],
div.nbext-enable-btns .btn[disabled]:hover,
.btn-default.disabled,
.btn-default[disabled],
.btn-default.disabled:hover,
.btn-default[disabled]:hover,
fieldset[disabled] .btn-default:hover,
.btn-default.disabled:focus,
.btn-default[disabled]:focus,
fieldset[disabled] .btn-default:focus,
.btn-default.disabled.focus,
.btn-default[disabled].focus,
fieldset[disabled] .btn-default.focus {
    color: @unemphasize-fg;
    background: darken(@button-bg, 1%);
    background-color: darken(@button-bg, 1%);
    border-color: darken(@button-bg, 1%);
    transition: 200ms ease;
}
.input-group-addon {
    padding: 2px 5px;
    font-size: @nb-fontsize;
    font-weight: normal;
    height: auto;
    color: @notebook-fg;
    text-align: center;
    background-color: transparent;
    border: 2px solid transparent !important;
    text-transform: capitalize;
}
a.btn.btn-default.input-group-addon:hover {
    background: transparent !important;
    background-color: transparent !important;
}
.btn-group > .btn + .dropdown-toggle {
    padding-left: 8px;
    padding-right: 8px;
    height: 100%;
    // border-left: 1px solid @button-bg !important;
}
.btn-group > .btn + .dropdown-toggle:hover {
    // border-left: 1px solid @button-hover !important;
    background: @button-hover-bg !important;
}
.input-group-btn {
    position: relative;
    font-size: inherit;
    white-space: nowrap;
    background: @button-panel-bg;
    background-color: @button-panel-bg;
    border: none;
}
.input-group-btn:hover {
    background: @button-panel-hover;
    background-color: @button-panel-hover;
    border: none;
}
.input-group-btn:first-child > .btn,
.input-group-btn:first-child > .btn-group {
    background: @button-panel-bg;
    background-color: @button-panel-bg;
    border: none;
    margin-left: 2px;
    margin-right: -1px;
    font-size: inherit;
}
.input-group-btn:first-child > .btn:hover,
.input-group-btn:first-child > .btn-group:hover {
    background: @button-hover-bg;
    background-color: @button-hover-bg;
    border: none;
    font-size: inherit;
    transition: 200ms ease;
}
div.modal .btn-group > .btn:first-child {
    background: @button-panel-bg;
    background-color: @button-panel-bg;
    border: 1px solid darken(@button-panel-bg, 1%);
    margin-top: 0px !important;
    margin-left: 0px;
    margin-bottom: 2px;
}
div.modal .btn-group > .btn:first-child:hover {
    background: @button-panel-hover;
    background-color: @button-panel-hover;
    border: 1px solid @button-panel-hover;
    transition: 200ms ease;
}
div.modal > button,
div.modal-footer > button {
    background: @button-panel-bg;
    background-color: @button-panel-bg;
    border-color: @button-panel-bg;
}
div.modal > button:hover,
div.modal-footer > button:hover  {
    background: @button-panel-hover;
    background-color: @button-panel-hover;
    border-color: @button-panel-hover;
    transition: 200ms ease;
}

/**************************************************/
/********** MODAL, PANELS, & FORM CONTROL *********/
/**************************************************/
.modal-content {
    font-family: @notebook-fontfamily;
    font-size: @nb-fontsize-sub;
    position: relative;
    background:  @panel-header-bg;
    background-color: @panel-header-bg;
    border: none;
    border-radius: 1px;
    background-clip: padding-box;
    outline: none;
}
.modal-header {
    font-family: @notebook-fontfamily;
    font-size: @nb-fontsize;
    color: @notebook-fg;
    background:  @panel-header-bg;
    background-color: @panel-header-bg;
    border-color: @dropdown-border;
    padding: 12px;
    min-height: 16.4286px;
}
.modal-content h4 {
    font-family: @notebook-fontfamily;
    font-size: 16pt;
    color: @notebook-fg;
    padding: 5px;
}
.modal-body {
    background-color: @modal-bg;
    position: relative;
    padding: 15px;
}
.modal-footer {
    padding: 8px;
    text-align: right;
    background-color: @modal-bg; //@panel-header-bg;
    border-top: none; //0px solid @dropdown-border;
}
.alert-info {
    background-color: @alert-info-bg;
    border-color: @dropdown-border;
    color: @notebook-fg;
}
.modal-header .close {
    margin-top: -5px;
    font-size: 25pt;
}
.modal-backdrop,
.modal-backdrop.in {
    opacity: 0.85;
    background-color: notebook-bg; //@table-border;
}
div.panel,
div.panel-default,
.panel,
.panel-default {
    font-family: @notebook-fontfamily;
    font-size: @nb-fontsize;
    background-color: @panel-bg;
    color: @notebook-fg;
    margin-bottom: 14px;
    border: 0;
    box-shadow: none;
}
div.panel > .panel-heading,
div.panel-default > .panel-heading {
    font-size: 14pt;
    color: @notebook-fg;
    background: @panel-header-bg;
    background-color: @panel-header-bg;
    border: 0;
}
.modal .modal-dialog {
    min-width: 950px;
    margin: 50px auto;
}
div.container-fluid {
    margin-right: auto;
    margin-left: auto;
    padding-left: 0px;
    padding-right: 5px;
}
div.form-control,
.form-control {
    font-family: @notebook-fontfamily;
    font-size: initial;
    color: @notebook-fg;
    background-color: @form-input-bg;
    border: 1px solid @form-input-border !important;
    margin-left: 2px;
    box-shadow: none;
    transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
}
.form-control-static {
    min-height: inherit;
    height: inherit;
}
.form-group.list-group-item {
    color: @notebook-fg;
    background-color: @panel-bg;
    border-color: @dropdown-border;
    margin-bottom: 0px;
}

.form-group .input-group { float: left; }

input, button, select, textarea {
    background-color: @form-input-bg;
    font-weight: normal;
    border: 1px solid @dropdown-border;
}
select.form-control.select-xs {
    height: 30px;
    font-size: @nb-fontsize;
}
.toolbar select, .toolbar label {
    width: auto;
    vertical-align: top;
    margin-right: 0px;
    margin-bottom: 0px;
    display: inline;
    font-size: 92%;
    margin-left: 10px;
    padding: 0px;
    background: @button-bg !important;
    background-color: @button-bg !important;
    border: 2px solid @button-border !important;
}

.toolbar .btn {
    padding: 3px 8px;
}

.form-control:focus {
    border-color: @item-theme;
    outline: 2px solid @prompt-line;
    -webkit-box-shadow: none;
}
/* Chrome/Opera/Safari */
::-webkit-input-placeholder {
  color: @disabled;
}
/* Firefox 19+ */
::-moz-placeholder {
  color: @disabled;
}
/* IE 10+ */
:-ms-input-placeholder {
  color: @disabled;
}
/* Firefox 18- */
:-moz-placeholder {
  color: @disabled;
}
[dir="ltr"] #find-and-replace .input-group-btn + .form-control {
    border: 2px solid @dropdown-border !important;
}
[dir="ltr"] #find-and-replace .input-group-btn + .form-control:focus {
    border-color: @item-theme;
    outline: 2px solid @prompt-line;
    -webkit-box-shadow: none;
    box-shadow: none;
}

/****************************************/
/************** SCROLL BARS *************/
/****************************************/
div.output.output_scroll {
    box-shadow: none;
}

::-webkit-scrollbar {
    width: 11px;
    max-height: 9px;
    background-color: @scroll-trough;
    border-radius: 3px;
    border: none;
}

::-webkit-scrollbar-track {
    background: @scroll-trough;
    border: none;
    width: 11px;
    max-height: 9px;
}
::-webkit-scrollbar-thumb {
    border-radius: 2px;
    border: none;
    background: @scrollbar;
    background-clip: content-box;
    width: 11px;
}

/******* Smooth Fonts ********/
HTML, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td, span, a {
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    font-weight: 400;
}


//
// .navbar-default .navbar-nav > li > a {
//     font-family: @notebook-fontfamily;
//     font-size: @nb-fontsize;
//     color: @notebook-fg;
//     display: block;
//     line-height: 1.5em;
//     padding-top: 14px;
//     padding-bottom: 11px;
//     text-decoration: none;
//     -webkit-transition: all .25s ease !important;
//        -moz-transition: all .25s ease !important;
//         -ms-transition: all .25s ease !important;
//          -o-transition: all .25s ease !important;
//             transition: all .25s ease !important;
// }
// .navbar-default .navbar-nav > li > a:hover,
// .navbar-default .navbar-nav > li > a:focus {
//     color: @selected-fg;
//     background-color: @selected-third;
//     border-color: @dropdown-hover;
//     line-height: 1.5em;
//     transition: 80ms ease;
// }
// .navbar-default .navbar-nav > .open > a,
// .navbar-default .navbar-nav > .open > a:hover,
// .navbar-default .navbar-nav > .open > a:focus {
//     color: @selected-fg-bright;
//     background-color: @dropdown-bg; //@navbar-selected;
//     border-color: @dropdown-bg; //@navbar-selected;
//     line-height: 1.5em;
//     // transition: 80ms ease;
// }
// .navbar-nav ul {
// 	-webkit-font-smoothing:antialiased;
// 	text-shadow:0 1px 0 #FFF;
//     background: #ddd;
//     // list-style: none;
//     margin: 0;
//     padding: 0;
//     width: 100%;
// }
// .navbar-nav li {
//     float: left;
//     margin: 0;
//     padding: 0;
//     position: relative;
//     min-width: 25%;
// }
// .navbar-nav a {
//     // background: #ddd;
//     color: #444;
//     // display: inline-block;
//     // font: bold 16px/50px sans-serif;
//     // padding: 0 25px;
//     text-decoration: none;
//     -webkit-transition: all .25s ease !important;
//        -moz-transition: all .25s ease !important;
//         -ms-transition: all .25s ease !important;
//          -o-transition: all .25s ease !important;
//             transition: all .25s ease !important;
// }
// // nav .dropdown:after {
// //     content: '';
// // }
// // nav .dropdown:hover:after{
// // 	content:'\25bc';
// // }
// .navbar-nav li:hover a {
//     background: #ccc;
// }
// .navbar-nav li.dropdown-submenu ul {
//     display: none !important;
// }
// // .navbar-default .navbar-nav > .open > a,
// // .navbar-default .navbar-nav li ul,
// // .navbar-nav > .open > a,
// .navbar-nav li ul {
//     float: left;
//     left: 0;
//     opacity: 0;
//     position: absolute;
//     top: 35px;
//     // top: 0em;
//     visibility: hidden;
//     z-index: 1;
//     -webkit-transition: all .25s ease !important;
//        -moz-transition: all .25s ease !important;
//         -ms-transition: all .25s ease !important;
//          -o-transition: all .25s ease !important;
//             transition: all .25s ease !important;
// }
// .navbar-nav li.dropdown-submenu:hover ul {
//     display: flow-root !important;
//     top: 2px !important;
//     left: 100%;
//     margin-top: -2px;
//     margin-left: 0px;
//     padding-top: 0px;
//     /* transition: 200ms ease; */
// }
// // .navbar-default .navbar-nav > .open > a,
// // .navbar-default .navbar-nav > .open > a:hover,
// // .navbar-default .navbar-nav > .open > a:focus,
// // .navbar-nav > .open > a:hover,
// // .navbar-nav > .open > a:focus,
// .navbar-nav li:hover ul {
//     opacity: 1;
//     top: 50px;
//     visibility: visible;
//     display: inline-grid;
// }
// .navbar-nav li ul li {
//     float: none;
//     // width: 100%;
// }
// .navbar-navbar-nav li ul a:hover {
//     background: #bbb;
// }

/* Clearfix */
//
// .cf:after, .cf:before {
//     // content:"";
//     display:table;
// }
// .cf:after {
//     clear:both;
// }
// .cf {
//     zoom:1;
// }
