/* Base */

body {
  background: #fafafa;
  color: #333333;
  margin-top: 5rem;
}

h1, h2, h3, h4, h5, h6 {
  color: #444444;
}

ul {
  margin: 0;
}

.bg-steel {
  background-color: #5f788a;
}

.site-header .navbar-nav .nav-link {
  color: #cbd5db;
}

.site-header .navbar-nav .nav-link:hover {
  color: #ffffff;
}

.site-header .navbar-nav .nav-link.active {
  font-weight: 500;
}

table th {
  border: 1px !important;
  white-space: nowrap;
  text-align: center;
}

table tr {
  border: 1px !important;
  white-space: nowrap;
}

table {
border-collapse: separate;
border-spacing: 50px 0;
text-align:left;
}

td {
padding: 10px 0;
text-align: center;
}

/* Removes Decimal Spinners */
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0; 
}


/* Registration */

.registration-form {
  margin-left: 2em !important;
  width: 500px
}

/* Login */

.login-form {
  margin-left: 2em !important;
  width:350px;
}

.need-an-account {
  font-size:150%;
}

/* Logout */

.logout-message {
  margin-left: 2em !important
}

/* Home */

.HomePage{
  overflow-y: scroll;
  overflow-x: hidden;
}

.home-header {
  color:green; 
  font-size: 36px; 
  font-family: "MERRIWEATHER";
}

.home-container-main{
  text-align: top center;
  margin: 0 auto;
  height: 250px;
}

.home-container-1{
  text-align: center;
  margin: 0 auto;
  width: 365px;
  height: 500px;
}

.alert-image-contatiner{
  padding: 50px 0;
  width: 365px;
  height: 275px;
}

.home-word-header{
  font-size: 20px; 
  font-family: "MERRIWEATHER";
}

.home-word-text{
  text-align: left;
}

.home-container-2{
  text-align: center;
  margin: 0 auto;
  width: 365px;
  height: 500px;
}

.home-container-3{
  text-align: center;
  margin: 0 auto;
  width: 365px;
  height: 500px;
}

.home-container-4{
  text-align: center;
  margin: 0 auto;
  width: 365px;
  height: 500px;
}

.home-container-5{
  text-align: center;
  margin: 0 auto;
  height: 400pxpx;
}

/* Alerts *//* Alert Form */

.AlertsPage {
  overflow-y: scroll;
  overflow-x: hidden;
}

.alert-hr {
  border: none;
  height: 2px;
  color: #5f788a; /* old IE */
  background-color: #5f788a; /* Modern Browsers */
  max-width: 250px;
  margin-left: 0px;
}

.alerts-column-1{
  width: 400px;
  margin-left: 2em !important
}

.alerts-column-2{
  text-align: center;
  margin: 0 auto;
}

.new-price-alert {
  position:absolute;
  left:0px;
  top:0px;
}

.alert-form {
  position:relative;
  left:0px;
  top:-20px;
  width:250px
}

.error {
  font-size: 14.6px;
}

.ui-menu-item .ui-menu-item-wrapper.ui-state-active {
  background: #5bc0de;
  font-weight: bold;
  color: #ffffff;
  border: none;
} 

.stock-info-button{
  position:relative;
  left:260px;
  top:70px;
  width: 95px;
  height: 38px;
  font-size:16px;
}

.nodata {
  position:relative;
  left:0px;
  top:-20px;
}
p.small {
  line-height: 0.3;
}

p.big {
  line-height: 1.5;
  position:relative;
  left:0px;
  top:-10px;
}

.currentpricecolumn2 {
  position:absolute;
  left:150px;
  top:122px;
}

.alert-help {
  position:relative;
  top: 6px;
  font-size: 30px
}

/* Alert History */

.AlertsHistoryPage {
  overflow-y: scroll;
  overflow-x: hidden;
}

.history_table {
text-align: center;
margin: 0 auto;
font-size: 16px;
width: 850px;
}

/* Trade */

.Trade {
  overflow-y: scroll;
  overflow-x: hidden;
}

.message {
  height:45px;
}

.clock {
  position:relative;
  height:80px;
  right: -5px;
  font-size: 20px;
}

.trade-help {
  font-size: 30px;
}

.Trade .current-price {
  position:absolute;
  left:75px;
  font-size:24px; 
  text-align:center;
}

.Trade .currentpricecolumn2 {
  position:absolute;
  top:-3px;
  left:150px;
  width:150px;
  font-size: 14px; 
  text-align:left;
}

.current-price-stock-not-found {
  color:red; 
  font-size: 12px;
}

.graph {
  font-size: 20px
}

.chart-help {
  position:relative;
  top: 10px;
  font-size: 30px;
}

.charts-button {
  width: 125px;
}

.market-order-button {
  width: 125px;
}

.limit-order-button {
  width: 125px;
}

.bracket-order-button{
  width: 125px;
}

.open-orders-button {
  width: 125px;
}

.open-positions-button{
  width: 125px;
}

.chart-symbol-input{
  width: 125px;
}

.chart-charttype-input{
  width:125px; 
  font-size: 12px
}

.chart-timespan-input{
  width: 125px;
}

.chart-interval-input{
  width: 125px;
}

.chart-from-input {
  width:125px; 
  font-size: 10px
}

.chart-to-input {
  width:125px; 
  font-size: 10px
}

.orders-symbol {
  width:125px; 
}

.orders-qty {
  width:125px; 
}

.orders-side {
  width:125px; 
}

.orders-tif {
  width:125px; 
}

.orders-limitprice {
  width:125px; 
}

.orders-stoploss {
  width:125px; 
}

.orders-takeprofit {
  width:125px; 
}

/* Hides settings bar above plotly graph */
.modebar{
  display: none !important;
}

.message-cancel {
  border: none;
}

.trade-column-1 {
  margin-left: 2em !important
}

.trade-hr {
  border: none;
  height: 2px;
  color: #5f788a; /* old IE */
  background-color: #5f788a; /* Modern Browsers */
}

.orders-table {
border-collapse: separate;
border-spacing: 20px 0;
text-align:center;
}

.positions-table {
  border-collapse: separate;
  border-spacing: 20px 0;
  text-align:center;
}

/* Portfolio */

.PortfolioPage {
  overflow-y: scroll;
  overflow-x: hidden;
}

.portfolio-help {
  font-size: 30px;
}

.portfolio-column-1 {
  margin-left: 2em !important
}

.account-balance-button {
  width: 150px;
}

.portfolio-history-button {
  width: 150px;
}

.portfolio-history-timespan { 
  width: 125px;
}

.portfolio-history-multiplier {
  width: 125px;
}

.closed-orders-button {
  width: 150px;
}

.closed-orders-from {
  width: 125px;
  font-size: 10px;
}

.closed-orders-to {
  width: 125px;
  font-size: 10px;
}

.account-balances-collaspe {
  font-size: 20px
}

.portfolio-history-graph {
  font-size: 20px
}

.period-pnl {
  font-size: 20px
}

.table-hover tbody tr:hover td, .table-hover tbody tr:hover th {
  background-color: #5bc0de;
}

/* Update Profile */

.UpdateProfile {
  overflow-y: scroll;
  overflow-x: hidden;
}

.update-profile-column-1 {
  margin-left: 2em !important
}

.update-profile-header {
  font-size:150%
}

.update-profile-form {
  width:200px
}

.alpaca-help {
  position:absolute;
  left: 190px ;
  top: 5px;
  font-size: 30px;
}

.current-profile-header{
  font-size:150%
}

.changepassword {
position:absolute;
left:160px;
top:807px;
}

.deleteprofile {
position:absolute;
left:330px;
top:807px;
}