@import "dark"
@import "light"

body, #window
  overflow-y: auto

html
  background-color: #282c34 !important

body::-webkit-scrollbar, *::-webkit-scrollbar
  display: none

*
  overflow: hidden

abbr
  cursor: help

::-webkit-input-placeholder
  color: grey !important

.is-36h
  height: 36px

.title
  height: 50px

.data
  overflow-y: auto
  overflow-x: hidden

.table
  border-radius: 5px

.is-tag
  cursor: default

.is-future
  font-style: italic

.option:first-child
  color: #999

.tabs *.is-active
  border: 1px solid gray
  border-bottom: 1px solid #282c34
  border-radius: 5px 5px 0 0

.tab:not(.is-active)
  border-bottom: 1px solid gray

.is-main-pane
  width: 95vw
  height: 90vh
  max-height: 90vh
  margin: auto

.is-main-pane>*
  height: 90%

.icon
  border: none

#currency
  margin-left: 3px

#op-pane
  min-width: 275px

#chart-area
  max-height: 30%

#account-list
  max-height: 700px
  overflow-y: auto

#settings-body
  width: 95vw
  height: 69vh
  max-width: 95vw
  max-height: 69vh

#helper
  position: relative
  left: -75px
  bottom: -25px
  text-align: center
  font-style: italic
  color: gray

#menu-btn
  width: 100%

#table-container
  width: 95%
  height: 60%
  overflow: auto

#mainScreen
  background-color: inherit
  height: 100%
  overflow-y: scroll

.link
  cursor: pointer

.link:hover
  text-decoration: underline

th
  padding-right: 0

.is-bottomless
  margin-bottom: 0 !important

a, .notification a:not(.button)
  text-decoration: none !important

.hero.is-dark .tabs.is-boxed li.is-active a, .hero.is-dark .tabs.is-boxed li.is-active a:hover
  border: none

.has-text-purple
  color: #8445d6

strong, .card-header-title
  color: inherit

.flex-1
  flex: 1

.twitter-typeahead, .tt-hint, .tt-input, .tt-menu
  width: 100%

.tt-hint:focus, .input:focus, .select select:focus.is-primary
  border-color: hsl(171, 100%, 41%) !important

.input:focus.is-warning, .select select:focus.is-warning
  border-color: #ffdd57 !important

/* Vue specific css */

/* filterBar.vue */
.control select
  border-top-left-radius: 0
  border-bottom-left-radius: 0
  border-left: none

/* accountsDetails.vue */
.is-table-overflown
  height: 50vh
  overflow: scroll

.is-table-overflown > table
  margin-bottom: 10vh

.is-table-overflown::-webkit-scrollbar
  display: initial

.is-not-too-large
  max-width: 8vw

/* Animation */
.details-enter-active, .details-leave-active
  transition: all 1s

.details-move
  transition: all 500ms
  height: auto

.details-enter, .details-leave-to /* .list-leave-active below version 2.1.8 */
  opacity: 0
  height: 0
  transform: translateX(30px)

/* recurrings.vue */
.is-table-overflown-2
  height: 40vh
  overflow-y: scroll

.is-table-overflown-2 > table
  margin-bottom: 10vh

.is-table-overflown-2::-webkit-scrollbar
  display: inherit

/* accountsPane.vue */
.slide-fade-enter-active
  transition: all 1s ease
.slide-fade-leave-active
  transition: all 500ms cubic-bezier(1.0, 0.5, 0.8, 1.0)
.slide-fade-enter, .slide-fade-leave-to
  transform: translateX(10px)
  opacity: 0

/* mainPane.vue */
#main-pane
  width: 64vw

.container
  width: 100%

.level-right.subtitle.is-6.is-marginless
  position: relative
  top: 0.35em

.hero-body
  padding-right: 0

#doughnut
  position: relative
  top: -2em

#mainScreen
  max-height: 60vh
  overflow: scroll

/* operationPane.vue */
.flex
  flex: 1
.field.has-addons .control
  margin-right: 0
