/* SiteStyle.css */

#page-content {min-height: 70%; min-height: calc(100vh - 130px);}

.gain {color: green;}
.loss {color: red;}
.numeric {text-align: left;}
.tbl-col-money {text-align: right; padding-left: 20px;}
.hr {border-bottom: 1px dotted #295f2d; margin: 9px 0 6px; color: #295f2d; font-weight: bold;}
span.info-label {font-weight: bold;}
.btn-toolbar .left-space {margin-left: 45px;}

input[type="radio"] {margin: 4px 6px 0 0;}
summary {display: list-item;}

.navbar-nav .glyphicon {margin: 0; font-size: 1.2em;}
#nav-bar-icon {
	margin: 10px;
	width: 32px;
}
.ota-logo {height: 50px; float: right; top: -6px; position: relative;}
@media (max-width: 600px)  {.ota-logo {display: none;}}
  .dataProviderLogo {height: 32px; margin: 3px;}

#footer {	background-color: #f5f5f5; font-size: 13px; margin-top: 20px;}
#footer p {	margin: 0;}
.footer-nav {padding: 15px;}
#menu-footer {margin: 0;}

/* \/ \/ \/ *** Change nav-bar break point from 768 to 1000 *** \/ \/ \/ */
@media (max-width: 1000px) {
    .navbar-header {
        float: none;
    }
    .navbar-left,.navbar-right {
        float: none !important;
    }
    .navbar-toggle {
        display: block;
    }
    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    }
    .navbar-fixed-top {
        top: 0;
        border-width: 0 0 1px;
    }
    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav {
        float: none!important;
        margin-top: 7.5px;
    }
    .navbar-nav>li {
        float: none;
    }
    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .navbar .collapse.in{
        display:block !important;
    }
}
/* /\ /\ /\ *** Change nav-bar break point *** /\ /\ /\ */

/* Support for BidMidAsk \/ \/ \/ */

    .mid{font-weight: bold; margin: 0 8px;}
    .bid, .ask {font-size: 0.9em;}
    span.price {margin-right: 12px;}
    .limit {margin-right: 20px;}
    
    
    .bid-mid-ask{display: flex; justify-content: space-around; flex-wrap: nowrap; }
    .price-block {flex-basis: auto;}
    @media(max-width: 480px){
    	.price-label, .price {display: block;}
    }
            
/* Support for BidMidAsk  /\ /\ /\  */


    .hero-unit {background-color: white; border: 1px solid silver; padding: 2em;
    box-shadow: 0 7px 14px rgba(0,0,0,.25),0 5px 5px rgba(0,0,0,.22);
    max-width: 750px;
    }
    .hero-unit hr {border-top: 1px solid forestgreen;}
    h4 {color: grey;}
    p.deck {color: green; font-weight: bold;}
    p.simulated-disabled-input {
    border: 1px dotted silver;
    padding: 6px;
    border-radius: 4px;
    color: silver;
    }
    
    /* For in-place editor text box, e.g., on Member Accounts page  */
    .inplaceinput input {padding: 6px; height: 34px !important; width: 66% !important; }
    /* For in-place editor text box */
    
    /* We distinguish Select from ComboBox by giving Select a background: */
    select.form-control 
    {
	background: rgb(202,215,236);
	background: linear-gradient(0deg, rgba(202,215,236,1) 0%, rgba(238,238,238,1) 45%, rgba(255,255,255,1) 100%);
	}
	
@media (min-width: 768px) {
  #plan-editor {width: 60%;}
}	
    
    .whats-this {display: inline-block;}
    
/* Styling for accordions on dashboard and trade analysis page*/

.accordion 
{ margin-bottom: 10px; border: 1px solid #eee; border-radius: 4px;}
form {margin-bottom: 8px;}


.accordion  .panel-heading
{ padding: 0;}

.accordion > .alert
{ margin: 0;}


.accordion .panel-title a
{
    display: block;
    padding: 1em .6em;
    outline: none;
    font-weight:bold;
    text-decoration: none;
}

.accordion .panel-title  a.accordion-toggle::after, 
.accordion a[data-toggle="collapse"]::after,  
.accordion div.a[data-toggle="collapse"]::after  
{
    content:"\e114"; /* \e114 is chevron-down */
    float: right;
    font-family: 'Glyphicons Halflings';
    margin-right :1em;
}

.accordion .panel-title  a.accordion-toggle.collapsed::after, 
.accordion a.collapsed[data-toggle="collapse"]::after,  
.accordion div.collapsed[data-toggle="collapse"]::after  
{
    content:"\e080"; /* \e080 is chevron-right*/
}
    /*End accordions */
    
#accordion-archive-groups {border:none;}
    
/* Some additional alert styles from Bootstrap 4 */
.alert-primary {
    color: #004085;
    background-color: #cce5ff;
    border-color: #b8daff;
}
.alert-secondary {
    color: #383d41;
    background-color: #e2e3e5;
    border-color: #d6d8db;
}
.alert-light {
    color: #818182;
    background-color: #fefefe;
    border-color: #c8d7c6;
}
.alert-dark {
    color: #1b1e21;
    background-color: #d6d8d9;
    border-color: #c6c8ca;
}

.copy-to-clipboard-button {
	margin: 0 6px;
	display: inline-block;
	border: 1px solid green;
	border-radius: 4px;
	padding: 4px 12px;
	background-color: white;
	
}
.copy-to-clipboard-button:hover {
background-color: #e6e6e6;
}
.copy-to-clipboard-button span {display: block;}


table.xunderlying {
  border: 1px solid #1C6EA4;
  background-color: #EEEEEE;
  width: 100%;
  text-align: center;
  border-collapse: collapse;
  }
table.underlying th {padding: 1px 4px; text-align: center;}
table.underlying td {nnborder: 1px solid #AAAAAA;
  padding: 3px 2px;padding: 1px 4px; text-align: center;}
  
  table.underlying thead th, table.underlying tbody td  {padding: 1px 2px; text-align: center;}
  
table.xunderlying thead {
  background: #1C6EA4;
  background: -moz-linear-gradient(top, #5592bb 0%, #327cad 66%, #1C6EA4 100%);
  background: -webkit-linear-gradient(top, #5592bb 0%, #327cad 66%, #1C6EA4 100%);
  background: linear-gradient(to bottom, #5592bb 0%, #327cad 66%, #1C6EA4 100%);
  border-bottom: 2px solid #444444;
}
table.xunderlying thead th {
  font-size: 16px;
  font-weight: bold;
  color: #FFFFFF;
  text-align: center;
  border-left: 2px solid #D0E4F5;
}
table.underlying {margin-bottom: 10px;}
.bid-mid-ask  {margin-left: 40px;}
.bid-mid-ask .price-label, .bid-mid-ask .price {float: left;}
@media (max-width: 768px) {
  table.underlying thead th, table.underlying tbody td  {padding: 1px 4px; text-align: center;}
}	
  @media (max-width: 350px) {
  table.underlying thead th, table.underlying tbody td  {padding: 1px 2px; text-align: center;}
  div.modal-body table.underlying {margin-left: -8px;}
}	
  
/* In FireFox only, we have some difficulty with the "Spin buttton" of numeric inputs.
Settiing padding as follows seems to fix it, and I add bg color to call attention to it.
*/
@-moz-document url-prefix() {
  input[type="number"] {padding-right: 2px; background-color: honeydew; }
}  

/* Some overrides of the Bootstrap classes to use our branding colors */
/* 
	Our brand colors are:
	Green #295f2d
	Gold  #ffc400
	White
	Black
*/ 

.btn-primary {
	color: #fff;
	background-color: #295f2d;
	border-color: #204b23;
}
.btn-primary:hover {
	color: #fff;
	background-color: #204b23;
	border-color: #204b23;
}
.btn-primary:active, .btn-primary:focus  {
	color: #ccc;
	background-color: #204b23;
	border-color: #204b23;
}
.btn-secondary {
	color: #295f2d;
	background-color: #fff;
	border-color: #204b23;
}
.btn-paper-trading {
	color: #111;
	background-color: #ffc400;
	border-color: #e5af00;
}
.btn-paper-trading:hover {
	color: #fff;color: #777;
	background-color: #ffc400;
	border-color: #e5af00;
}

.panel-info {
	border-color: #d8e4f1;
}
.panel-info > .panel-heading {
	color: #31708f;
	background-color: #e4eaf2;
	border-color: #d8e4f1;
}

.modal-title, h4.modal-title {color: #295f2d;}
div.modal-body{color: #111;}

/* End of overrides of the Bootstrap classes to use our branding colors */

  .dashboard-trade-details-container {display: flex; flex-wrap: wrap; }
  .dashboard-trade-details {flex: 40%; min-width: 350px;}
  .dashboard-order-prices {color: gray;}
  .dashboard-order-summary {font-size: 1.16em; font-weight: bold;}
  
  /* For the ordering dialogs \/ \/ \/ */
  #orderForm .form-check {margin: 8px 0;}
  #orderForm .form-group label {width: 80px;}
  #orderForm .form-group .form-control {display: inline; width: initial;}
  #orderForm #limitPrice {font-weight: bold; background-color: honeydew;}
  /* For the ordering dialogs /\ /\ /\ */
  
  div.ota-expiration-picker {display: inline-block;}
  div.ota-expiration-picker button {padding: 0 8px;}
  
.ota-expiration-picker .dropdown-menu {max-height: 400px; overflow-y: scroll;}
.ota-expiration-picker .dropdown-item {display: flex; justify-content: space-between; padding: .15rem 1.2rem; font-sizeXXX: 0.9rem; font-weight: bold; }
.ota-expiration-picker .dropdown-menu .pm {color: darkgoldenrod;}
.ota-expiration-picker .dropdown-menu .friday {color: forestgreen;}
.ota-expiration-picker .dropdown-menu .am {color: darkmagenta;}
.ota-expiration-picker .dropdown-item span {display: table-cell;}
.picker-date {width: 80px; text-align: right;}
.picker-dow  {width: 50px; margin: 0 6px;}
.picker-set  {width: 40px; margin-left: 6px;}
.picker-dte  {width: 25%;}