/* Welcome to Compass.
 * In this file you should write your main styles. (or centralize your imports)
 * Import this file using the following HTML or equivalent:
 * <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" /> */
/*@import "compass/reset";*/
html {
  font-family: helvetica, arial, sans-serif;
  min-height: 100%; }

body {
  /* Margin bottom by footer height */
  margin-bottom: 10px; }
/*
nav {
  background-color: #D9EDF7; }
*/
/*
#my_container {
  padding-top: 26px; }
*/
#row_container {
  padding-top: 120px;
}

#nav_panel {
  min-height: 70vh;
  /*  position: fixed;  */
  /*  width: 16vw;      */ }

#my_content {
  min-height: 70vh;
  background-color: #9caf8e; }

/*
#search {
  padding-bottom: 20px;
}
*/
#content2 {
  max-height: 60vh;
  overflow-x: hidden;
  overflow-y: auto; }

#ajaxLoader {
  position: fixed;
  left: 45%;
  top: 35%;
  left: 45vw;
  top: 35vh;
  display: none; }

footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 40px;
  background-color: #D9EDF7; 
  z-index: 100;  /*bootstrap .form-control can have z-index that would overlay footer */
}

/* IE10 viewport hack for Surface/desktop Windows 8 bug */
.carbonad,
#content > #right > .dose > .dosesingle,
#content > #center > .dose > .dosesingle,
#carbonads-container {
  display: none !important; }

/*
tr:hover {
  color: $row_forecolour;
  background-color: $row_hover_colour;
}
*/
.table-hover > tbody > tr.active_row,
.table-hover > tbody > tr.active_row:hover {
  color: #fff;
  background-color: #505D75; }

th {
  /*cursor: pointer;*/
  -webkit-user-select: none;
  -moz-user-select: none;
  -user-select: none; }

th.active {
  color: #fff; }

th.active .arrow {
  opacity: 1; }

tr.owing td.owing {
  background-color: #ffc3c3;
}

.arrow {
  display: inline-block;
  vertical-align: middle;
  width: 0;
  height: 0;
  margin-left: 5px;
  opacity: 0.66; }

.arrow.asc {
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 4px solid #fff; }

.arrow.dsc {
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid #fff; }

/* bootstrap override */
.table-hover > tbody > tr:hover {
  color: #fff;
  background-color: #7A9AD2; }

.table-hover > tbody > tr.active_row > td > a {
  color: aqua; }

body.login {
  /*padding-top: 40px;*/
  /*padding-bottom: 40px;*/
  background-color: #eee;
}

.form-login {
  max-width: 330px;
  padding: 15px;
  margin: 0 auto;
}
.form-login .form-login-heading,
.form-login .checkbox {
  margin-bottom: 10px;
}
.form-login .checkbox {
  font-weight: normal;
}
.form-login .form-control {
  position: relative;
  height: auto;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
  padding: 10px;
  font-size: 16px;
}
.form-login .form-control:focus {
  z-index: 2;
}
.form-login input[type="text"] {
  margin-bottom: -1px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}
.form-login input[type="password"] {
  margin-bottom: 10px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
/* Bootstrap overrides  */
.modal-header, .modal-footer {
  color: #31708f;
  background-color: #d9edf7;
  border-color: #bce8f1;
  padding: 10px 15px;
}
.modal-header {
  border-bottom: 1px solid transparent;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;  
}
.modal-footer {
  border-top: 1px solid transparent;
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
}