@import "twitter/bootstrap/bootstrap";

// Glyphicons are not required by default, uncomment the following lines to enable them.
@glyphiconsEotPath: font-url("glyphicons-halflings-regular.eot");
@glyphiconsEotPath_iefix: font-url("glyphicons-halflings-regular.eot?#iefix");
@glyphiconsWoffPath: font-url("glyphicons-halflings-regular.woff");
@glyphiconsTtfPath: font-url("glyphicons-halflings-regular.ttf");
@glyphiconsSvgPath: font-url("glyphicons-halflings-regular.svg#glyphicons_halflingsregular");
//
@import "twitter/bootstrap/glyphicons.less";

// Your custom LESS stylesheets goes here
//
// Since bootstrap was imported above you have access to its mixins which
// you may use and inherit here
//
// If you'd like to override bootstrap's own variables, you can do so here as well
// See http://twitter.github.com/bootstrap/customize.html#variables for their names and documentation
//
// Example:
// @link-color: #ff0000;

@import "variables.css.less";
@import "dashboard.css.less";
@import "robinhood.css.less";
@import "side_menu.css.less";
@import "quote_form.css.less";
@import "card.css.less";

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

body {
  font-family: 'Nunito', sans-serif;
  font-weight: 300;
  color: white;
  background-color: @black;

  .alert {
    position: absolute;
    z-index: 100;
    margin-top: 20px;
  }

  .modal {
    .modal-header {
      border-bottom: 1px solid @dark_grey;
    }
    .modal-content {
      background-color: @black;
    }
    .modal-footer {
      border-top: 1px solid @dark_grey;
    }
  }

  input, select, .btn {
    border: none !important;
    &::-webkit-input-placeholder { /* WebKit, Blink, Edge */
      color:    @light_grey !important;
    }
    &:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
      color:    @light_grey !important;
      opacity:  1;
    }
    &::-moz-placeholder { /* Mozilla Firefox 19+ */
      color:    @light_grey !important;
      opacity:  1;
    }
    &:-ms-input-placeholder { /* Internet Explorer 10-11 */
      color:    @light_grey !important;
    }
    &:focus {
      border: none !important;
      box-shadow: none !important;
    }
    &.btn-success {
      background-color: @dark_grey !important;
      &:hover {
        background-color: @green !important;
        color: @dark_grey;
      }
    }
    &.btn-danger {
      background-color: @dark_grey !important;
      &:hover {
        background-color: @orange !important;
        color: @dark_grey;
      }
    }
  }

  input[type=text], input[type=password], input[type=number], select {
    background-color: @dark_grey !important;
    color: white !important;
  }

  input[type=submit], .btn {
    background-color: @dark_grey;
    color: @light_grey;
  }

  a {
    color: @light_grey;
    &:focus, &:hover {
      text-decoration: none;
      color: white;
    }
  }

  table {
    td, th {
      border-color: @dark_grey !important;
      vertical-align: middle !important;
    }
    th { 
      color: @light_grey;
    }
  }

  .nav-tabs {
    border-bottom-color: @dark_grey;

    li {
      a {
        border: none;
        &:hover, &:focus {
          background-color: @dark_grey;
          color: white;
          border: none;
        }
      }
      &.active a{
        background-color: @green;
        border: none;
        &:hover, &:focus {
          background-color: @green;
          border: none;
        }
      }
    }
  }

  .text-success { color: @green !important; }
  .success, .btn-success { background-color: @green !important; } 
  .text-danger { color: @orange !important; }
  .danger, .btn-danger { background-color: @orange !important; } 

  .no-padding { padding: 0; }
}