/*
 * 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 vendor/assets/stylesheets of plugins, if any, 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 styles
 * defined in the other CSS/SCSS files in this directory. It is generally better to create a new
 * file per style scope.
 *
 *= require framework_and_overrides
 *= require bootstrap-datepicker3
 *= require animate
 *= require home
 *= require_self
 */

 $brand-danger: #e83c19;
 $brand-success: #47c1bf;
 $brand-primary: #5c6ac4;
 $state-success-text: #405352;
 $state-success-bg: #B7ECEC;
 $state-success-border: #47C1BF;

 @import "bootstrap-sprockets";
 @import "bootstrap";

 @font-face{
   font-family:'Glyphicons Halflings';
   src: image-url("bootstrap/glyphicons-halflings-regular.eot");
   src: image-url("bootstrap/glyphicons-halflings-regular.eot?#iefix") format("embedded-opentype"),
        image-url("bootstrap/glyphicons-halflings-regular.woff") format("woff"),
        image-url("bootstrap/glyphicons-halflings-regular.ttf") format("truetype"),
        image-url("bootstrap/glyphicons-halflings-regular.svg#glyphicons_halflingsregular") format("svg")
 }

 html, body {
    height: 100%;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important;
 }

 #wrap {
   min-height: 100%;
 }

 .index #wrap {
  height: 100vh;
  overflow: hidden;
  color: #fff;
  background: rgba(49,55,61,1);
  background: -moz-linear-gradient(top, rgba(49,55,61,1) 0%, rgba(49,55,61,1) 68%, rgba(17,17,17,1) 100%);
  background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(49,55,61,1)), color-stop(68%, rgba(49,55,61,1)), color-stop(100%, rgba(17,17,17,1)));
  background: -webkit-linear-gradient(top, rgba(49,55,61,1) 0%, rgba(49,55,61,1) 68%, rgba(17,17,17,1) 100%);
  background: -o-linear-gradient(top, rgba(49,55,61,1) 0%, rgba(49,55,61,1) 68%, rgba(17,17,17,1) 100%);
  background: -ms-linear-gradient(top, rgba(49,55,61,1) 0%, rgba(49,55,61,1) 68%, rgba(17,17,17,1) 100%);
  background: linear-gradient(to bottom, rgba(49,55,61,1) 0%, rgba(49,55,61,1) 68%, rgba(17,17,17,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#31373d', endColorstr='#111111', GradientType=0 );
 }

 #main {
   overflow:auto;
   padding-bottom:80px; /* this needs to be bigger than footer height*/
   padding-top: 65px;
   margin-top: 0px;
 }

 .footer {
   position: relative;
   margin-top: -70px; /* negative value of footer height */
   height: 70px;
   clear:both;
   padding-top:20px;
 }
 .index .footer {
  display: none;
 }


 /* Align a bit with Shopify Admin */
 body {
   background-color: #f4f6f8;
   color: #212b35;

 }
 a {
  color: #007ACE;
 }
 a:hover {
  color: #084E8A;
 }
 .container {

  position: relative;
 }
 #heading_row {
  z-index: 2;
  position: relative;
 }
 .alert {
   color: #212b36;
   background-color: #f4f6f8;
   box-shadow: inset 0 3px 0 0 #637381, inset 0 0 0 0 transparent, 0 0 0 1px rgba(63,63,68,.05), 0 1px 3px 0 rgba(63,63,68,.15);
   padding: 24px;
   border: 0;
   border-radius: 0 0 3px 3px;
   -webkit-transition: box-shadow .2s cubic-bezier(.64,0,.35,1);
   transition: box-shadow .2s cubic-bezier(.64,0,.35,1);
 }
 .alert.alert-success {
   color: #405352;
   background-color: #e0f5f5;
   box-shadow: inset 0 3px 0 0 #47c1bf, inset 0 0 0 0 transparent, 0 0 0 1px rgba(63,63,68,.05), 0 1px 3px 0 rgba(63,63,68,.15);
 }
 .alert.alert-danger {
   color: #583C35;
   background-color: #fbeae5;
   box-shadow: inset 0 3px 0 0 #ed6347, inset 0 0 0 0 transparent, 0 0 0 1px rgba(63,63,68,.05), 0 1px 3px 0 rgba(63,63,68,.15);
 }
 .alert-danger a,
 .alert-danger a:hover {
   color: #583C35;
   font-weight: bold;
   text-decoration: underline;
 }
 .top-buffer {
   margin-top:15px;
 }
 .navbar-btn {
   margin: 11px 15px 8px;
 }

 .navbar-inverse {
    background-color: #31373D;
    border-color: #31373D;
  }

.navbar-inverse .navbar-nav > .active > a, .navbar-inverse .navbar-nav > .active > a:hover, .navbar-inverse .navbar-nav > .active > a:focus {
  color: #FFF;
  background-color: #272C30 !important;
}
.navbar-inverse .navbar-nav > li > a {
  color: #96A7B6;
}
.navbar-login {
    width: 305px;
    padding: 10px;
    padding-bottom: 0px;
}

.navbar-login-session {
    padding: 10px;
    padding-bottom: 0px;
    padding-top: 0px;
}

.well {
 background: #fff;
}
h1,h2, h3, .h1, .h2, .h3 {
 font-weight: 200;
 letter-spacing: 1px;
}
h4, h5, h6, .h4, .h5, .h6 {
 font-weight: 400;
}
h1, .h1 {
 font-size: 42px;
}
h2, .h2 {
 font-size: 42px;
 color: #5c6ac4;
}
h2.main-metric {
 font-weight: 500;
}

.panel h2, .panel .h2 {
 margin-top: 15px;
 margin-bottom: 15px;
 line-height: 52px;
 font-weight: 300;
}
#chart_tile h2 {
  font-weight: 400;
}
#chart_tile h3 {
 margin-top: 10px;
}
.panel h3, .panel .h3 {
 font-size: 24px;
 line-height: 22px;
 text-transform: uppercase;
 text-align: center
}
h3 small, .h3 .small {
 font-size: 50%;
 margin-right: 10px;
 color: #C3CFD8;
}

h4, .h4 {
 color: #798C9C;
 text-transform: uppercase;
}

h5, .h5 {
 color: #C3CFD8;
 text-transform: uppercase;
 font-weight: 300;
}

#filter_form {
 margin-top: 2em;
}

#app_title{
max-width: 295px;
}

.btn-primary, .submit {
 background-color: #5c6ac4;
}
.text-success {
 color: #96BF48;
}
.text-danger {
 color: #FF5D5D;
}
.panel-footer {
 background: #fff;
 text-transform: uppercase;
}
.directUpload .progress {
max-width: 600px;
margin:    0.2em 0 0.2em 0;
}

.directUpload .progress .bar {
  height:  1.2em;
  padding-left: 0.2em;
  color:   white;
  display: none;
}

.index #title {
  margin-top: 30px;
  margin-bottom: 30px;
}
.index #by-line {
  margin-top: 30px;
  margin-bottom: 45px;
  color: #798C9C;
}

/* Button outline styles */
.btn-outline {
    background-color: transparent;
    color: inherit;
    transition: all .5s;
}

.btn-primary.btn-outline {
    color: #428bca;
}

.btn-success.btn-outline {
    color: #5cb85c;
}

.btn-info.btn-outline {
    color: #5bc0de;
}

.btn-warning.btn-outline {
    color: #f0ad4e;
}

.btn-danger.btn-outline {
    color: #d9534f;
}
.btn-danger:hover {
  background-color: #e83c19;
  border-color: #e83c19;
}

.btn-primary.btn-outline:hover,
.btn-success.btn-outline:hover,
.btn-info.btn-outline:hover,
.btn-warning.btn-outline:hover,
.btn-danger.btn-outline:hover {
    color: #fff;
}

.file-area {
  width: 100%;
  position: relative;

  input[type=file] {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    cursor: pointer;
  }

  .file-dummy {
    width: 100%;
    padding: 30px;
    background: #F4F6F8;
    border: 2px dashed #DFE4E8;
    border-radius: 5px;
    text-align: center;
    transition: background 0.3s ease-in-out;

    .success {
      display: none;
    }
  }

  p {
    margin-bottom: 0;
  }

  input[type=file]:focus + .file-dummy {
    outline: none !important;
  }

}

 /* Small Devices, Tablets */
@media only screen and (max-width : 768px) {
  #filter_form, #filter_form .form-group {
    width: 100%;
  }
  #filter_form .form-control {
    margin-bottom: 10px;
  }
}
@media only screen and (max-width : 480px) {
  .index h1 {
    font-size: 32px;
  }
}
@media only screen and (max-width : 360px) {
  .index h1 {
    font-size: 28px;
  }
}
