.dark
  #window
    background-color: #282c34 !important
    color: white !important

    > * .notification.is-black .title
      color: white !important

    > * .tabs > *
      background-color: #21252b

    > * .table
      background: black
      color: inherit !important

    > * .table thead th
      color: whitesmoke !important

    > * .is-future *
      color: hsl(0, 0%, 48%)

    > * .table tr:hover td
      background: #21252b !important

    > * .tab.is-active:hover
      background-color: #21252b

    > * input[type='range']
      background: grey !important

    > * .calendar
      background-color: #282c34 !important

    > * .datepicker .calendar .calendar-body .date-item
      color: whitesmoke !important

    > * .checkbox:hover
      color: whitesmoke !important

    > * .hero.is-dark .tabs.is-boxed li.is-active a, > * .hero.is-dark .tabs.is-boxed li.is-active a:hover
      background-color: #282c34 !important
      color: white !important

    // COLORS

    > * .notification.is-dark
      background-color: #282c34 !important

    > * .input, > * .select select
      background-color: black !important
      color: white !important

    > * .input:not(.is-danger), > * .select select
      border-color: gray

    > * input[disabled], > * .select select[disabled]
      background-color: whitesmoke !important
        color: #7a7a7a !important

    > * .footer.is-black, > *  .notification.is-black
      background-color: #21252b !important

    > * .footer
      color: gray
      border-top: 1px solid #101010

    // TYPEHEAD
    // .tt-input, .tt-hint, .tt-menu, .tt-dataset, .tt-suggestion, .tt-emty, .tt-cursor, .tt-highlight
    //  background: inherit !important

    > * .tt-hint
      background-color: black !important
      border-color: gray
      color: gray !important

    > * code
      background: #282c34
      color: whitesmoke
