/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
 * or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *
 *= require_tree .
 *= require_self
 */
@import 'bootstrap-sprockets';
@import 'bootstrap';
@import 'font-awesome';
@import 'bootstrap-social';

@mixin box_sizing {
  -moz-box-sizing:    border-box;
  -webkit-box-sizing: border-box;
  box-sizing:         border-box;
}

/* header */

.navbar {
  margin-bottom: 0px;
}
.button_to{
  display: inline;
}
.refresh-button{
  font-size: 10px;
  padding: 5px;
  margin-bottom: 4px;
}
#logo {
  float: left;
  margin-right: 10px;
  margin-left: 10px;
  font-size: 1.7em;
  color: black;
  text-transform: uppercase;
  letter-spacing: -1px;
  padding-top: 10px;
  font-weight: bold;
}

#logo:hover {
  color: gray;
  text-decoration: none;
}

body {
  //padding-top: 70px; // This is to allow for fixed navbar at top.
}
.alert {
  text-align: center;
}
.debug_dump {
  padding-left: 8rem;
  clear: both;
  float: left;
  width: 100%;
  margin-top: 45px;
  @include box_sizing;
}
.form-group .copy-field {
  width: 155px;
}
.navbar-left{
  .donate-small{
    padding-top: 12px;
  }
}
ul .header-name {
  position: relative;
  font-weight: bold;
  font-size: 21px;
  top: 11px;
  .last-data-update{
    font-size: 12px;
  }
}
@media (max-width: 768px){
  .navbar-left{
    margin: 0px -15px;
    margin-bottom: -10px;
    .donate-small{
      padding-top: 10px;
      text-align: right;
    }
  }
  ul .header-name{
    right: 10px;
  }
  .copy-form{
    text-align: right;
    input {
      text-align: right;
    }
    display: none;
  }
  .alert {
    //margin-left: 6rem;
  }
  header {
    ul{
      text-align: right;
      input[type="submit"] {
        margin-right: 8px;
        margin-top: 5px;
      }
      li {
        display: inline;
        a {
          display: block;
          text-align: right;
        }
      }
    }
    .form-control {
      width: 80%;
      margin-left: auto;
      margin-right: 8px
    }
    /* webkit */
    ::-webkit-input-placeholder { 
      text-align:right; 
    }
    /* mozilla */
    input:-moz-placeholder { 
      text-align:right; 
    }
  }
}
// 20px gutter
.gutter-20.row {
  margin-right: -10px;
  margin-left: -10px;
}
.gutter-20 > [class^="col-"], .gutter-20 > [class^=" col-"] {
  padding-right: 10px;
  padding-left: 10px;
}
// 10px gutter
.gutter-10.row {
  margin-right: -.5rem;
  margin-left: -.5rem;
}
.gutter-10 > [class^="col-"], .gutter-10 > [class^=" col-"] {
  padding-right: .5rem;
  padding-left: .5rem;
}
// 0px gutter
.gutter-0.row {
  margin-right: 0;
  margin-left: 0;
}
.gutter-0 > [class^="col-"], .gutter-0 > [class^=" col-"]{
  padding-right: 0;
  padding-left: 0;
}
// To override style to 'display: inline-block;' from font-awesome rails gem
.pagination {
  margin-top: 5px;
  margin-bottom: 0px;

}
.fa {
  display: table-cell;
}
.thumbnail {
  .data {
    padding: 0px;
  }
  margin-bottom: .8rem;
}
:root {
  font-size: 10px;
}
@media (max-width: 1262px){
  :root {
    font-size: 8px;
  }
}
@media (max-width: 515px){
  :root {
    font-size: 5px;
  }
}
