/*
    401k Calc Style Sheet
*/

/*
 * COLORS
 * 
 * DK BLUE  : 0090b2  bg: dcf0f7
 * DK2 BLUE : 006082  bg: d6f1f7
 * LT BLUE  : 5EAEBE
 * LT2 BLUE : 
 * GREEN    : 7dbe00  bg: e1fbb0
 * DK GRAY  : 636267
 * LT GRAY  : ebebea
 * LT2 GRAY : f0f0f0  bg: f6f6f6
 * 
 */

html {
    scrollbar-gutter: stable;
}
body {
    margin: 0;
}


/* ********************
** main containers  **
******************** */

.tabs-list-container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    padding: 12px;
    background: #f6f6f6;
    border-bottom: solid 2px #0090b2;
}
.tabs-list-container button {
    margin: 5px;
    padding: 7px 15px;
    background: #0090b2;
    background: #006082;
    border: solid 2px #fff;
    border-radius: 10px;
    line-height: 1;
    font-size: 15px;
    color: #fff;
}
.tabs-list-container button:hover, 
.tabs-list-container button.active {
    background: #7dbe00;
}

#tab-container {}
#tab-container h1 {
    color: #006082
}
#tab-container h2 {
    color: #006082;
} 
#tab-container h3 {
    color: #0090b2;
}
#tab-container .fc_tab .field > :nth-child(1) {
    color: #333;
    padding-right: 5px;
} 
#tab-container .fc_tab .field.non-typical > * {
    color: #333;
    padding-right: 5px;
}
#tab-container .fc_tab .field:not(.non-typical) > :nth-child(2):not(.show):not(.inner-wrapper) {
    border: solid 1px #0090b2;
}
#tab-container .fc_tab .field:not(.non-typical) .border {
    flex: 0 0 150px !important;
    width: 150px !important;
    box-sizing: border-box;
    border: solid 1px #0090b2;
}
#tab-container .fc_tab .field > :nth-child(2).show {
    color: #0090b2;    
    font-weight: bold; 
}
#tab-container .fc_tab .field > :nth-child(2).show::before, 
#tab-container .fc_tab .field > :nth-child(2).show::after {
    color: #0090b2;    
}
#tab-container .currency input[type="text"], 
#tab-container .percent input[type="text"] {
    border: 0;
}
#tab-container .field_error {
    display: flex;
    padding: 4px 0;
    font-size: 12.5px;
    color: red;
}
#tab-container .field_error.hide {
    display: none;
}






/* ********************
** rows and columns  **
******************** */

.flex-row {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  gap: 20px;
}
.flex-row.gap-35 {
  gap: 35px;
}
.flex-row.gap-10 {
  gap: 10px;
}
.flex-row.gap-0 {
  gap: 0px;
}
.flex-row > .flex-column {
  padding: 20px;
  border-radius: 20px;
}
/* Default for >1025px screens */
.flex-row > .flex-column { 
  display: flex;
  flex: 1;
}
.flex-row > .flex-column.fixed-200 {
  flex: 0 0 200px;
}
.flex-row > .flex-column.fixed-225 {
  flex: 0 0 225px;
}
.flex-row > .flex-column.fixed-third {
  flex: 0 0 33%;
}

@media (min-width: 769px) and (max-width: 1025px) {
  .flex-row > .flex-column {
    flex: 0 0 calc(50% - 10px); 
  }
  .flex-row.gap-35 > .flex-column {
    flex: 0 0 calc(50% - 18px); 
  }
  .flex-row.gap-10 > .flex-column {
    flex: 0 0 calc(50% - 5px); 
  }
  .flex-row.gap-0 > .flex-column {
    flex: 0 0 50%; 
  }
}
@media (max-width: 768px) {
  .flex-row > .flex-column {
    flex: 0 0 100%;
  }
}

/* general flex options */
.flex-direction-column {
    display: flex;
    flex-direction: column;    
}
.flex-no-wrap {
    flex-wrap: nowrap;
}
.flex-no-padding {
    padding: 0;
}
.flex-center {
    align-items: center;
}
.flex-column-center {
    justify-content: center;
}


/* ********************
** PADDING, MARGINS AND WIDTHS **
******************** */
.pt0 {
    padding-top: 0!important;
}
.pb55 {
    padding-bottom: 55px!important;
}
.w65 {
    width: 65px;
}


/* ********************
** FORMS             **
******************** */

.fc_tab .group {
    border: solid 1px #e1fbb0;
    border-radius: 10px;
    padding: 10px;  
    margin-bottom: 25px;  
    box-shadow: 1px 1px 3px #e1fbb080;
}
.fc_tab .field {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    padding: 5px 10px;
    align-items: flex-start;
}
.fc_tab .field {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
}
.fc_tab .field.column {
    flex-direction: column;
}
.fc_tab .field > :nth-child(1) {
    flex: 1 1 auto;
}
.fc_tab .field > :nth-child(2) {
    flex: 0 0 150px!important;
    width: 150px!important;
    box-sizing: border-box;
}
.fc_tab .field label.bold {
    color: #0090b2!important;
    font-weight: bold;
}
.fc_tab .field input {
    padding: 4px 10px;
    width: 100px;
}
.fc_tab .field input[type="file"] {
    padding: 4px 23px 4px 0;
}
.fc_tab .field select {
    padding: 4px 4px;
    width: 140px;    
}
.fc_tab .field.column {
    flex-direction: column;
}
.fc_tab .field.column > * {
    flex: 1 1 auto!important;
    width: auto!important;
}

/* INNER FIELDS */
#tab-container .inner_fields, 
.fc_tab .field .inner_fields {
    display: flex;
    flex-direction: column; 
    justify-content: center; 
    align-items: flex-start;
}
#tab-container .inner_fields .inner_field, 
.fc_tab .field .inner_fields .inner_field {
    display: flex;
    align-items: center;
}

#tab-container .inner_fields .inner_field, 
.fc_tab .field .inner_fields .inner_field {
    padding: 5px 0;
}


/* 
    CURRENCY AND PERCENT FIELDS
    
    for inputs, wrap the input in a div:
    <div class="currency"><input type="text" name="currency_example"></div>

    for display, add the class "show":
    <div class="currency show" id="currency_example"></div>
*/ 
.currency, .percent {
    position: relative;
    display: inline-block;
}
.currency::before {
    content: "$";
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    color: #333;
    font-size: 16px;
}
.percent::after {
    content: "%";
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    color: #333;
    font-size: 16px;
}
.currency input[type="text"],
.percent input[type="text"] {
    padding: 4px 10px 4px 20px; /* space for symbols */
    width: 100px;
}
.percent input[type="text"] {
    padding: 4px 10px 4px 10px; /* space for symbols */
    width: 100px;
}



/* for display */
.show {
    padding: 4px 10px;
    border: 0!important;
}
.currency.show {
    padding: 4px 23px;
    border: 0!important;
}
.currency.show::before {
    left: 10px;
}
.percent.show {
    padding-right: 24px;
}
.percent.show::after {}



/* ********************
** tables            **
******************** */

table {
    /*border: solid 1px #000;*/
    border: solid 1px #0090b2;
}
table tr th {
    padding: 5px 10px; 
    /*border: solid 1px #000;*/
    border: solid 1px #0090b2;
    color: #000;
}
table tr td {
    padding: 5px 10px; 
    /*border: solid 1px #ccc;*/
    border: solid 1px #ddd;
    color: #333;
}

table.results_table {
    border: none;
}

/* table buttons */
.table_button {
    cursor: pointer;
}
.table_button_up, 
.table_button_down {
    color: #999;
    cursor: pointer;
}
.table_button_up:hover, 
.table_button_down:hover {
    color: #000;
}
tr.no-border, 
th.no-border,
td.no-border {
    border: none;
}

/* up-down input fields */
.up_down_input_container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}
.up_down_input_buttons {
    display: flex;
    flex-direction: column;
    flex: unset;
}

.non_table_input_field {
    display: flex;
    flex-direction: row;
    align-items: center;
}
.non_table_up_down_field {
}

.non_table_input_field .extra-padding {
    padding-left: 10px;
    padding-right: 10px;
}

.fc_tab .field.small {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: flex-start;
}
.fc_tab .field.small > :nth-child(1) {
    flex: 1 1 50%!important;
}
.fc_tab .field.small > :nth-child(2) {
    flex: 1 1 50%!important;
    width: auto!important;
}
.fc_tab .field.bordered {
    border: solid 1px #ccc;
    border-radius: 10px;
}
.fc_tab .field input[type=checkbox] {
    width: 25px;
}

.hidden{
    display: none!important;
}


/* 
 * compare tab 
 */ 
#compare_age {
    display: inline-block;
}
td.advantage {
    background-color: #006082;
    color: #fff;
    font-size: 18px; 
    font-weight: bold;
}
td.advantage-total {
    font-size: 24px;
    font-weight: bold;
}
.alert {
    color: #e1fbb0;
}


/* home tab */
.home {
    border-bottom: solid 1px #ccc;
}
.home .left {
    background: #5EAEBE;
    border-radius: 0;
    padding-top: 55px;
}
.home .left button {
    margin: 5px;
    padding: 10px 15px!important;
    background: #fff;
    border: solid 2px #006082;
    border-radius: 10px;
    font-size: 18px;
    line-height: 1.3;
    color: #006082!important;
}
.home .left button:hover {
    background: #006082;
    background: #7dbe00;
    border: solid 2px #fff;
    color: #fff!important;
}
.home .logo {
    margin: 100px 15px 5px 15px;
    padding: 5px;
    background: #fff;
    border: solid 2px #006082;
    border-radius: 10px;
}
.home .center {
    max-width: 800px;
}
.home .right {
    background: #5EAEBE;
    border-radius: 0;
    padding-top: 55px;
}

.home .right h2 {
    color: #fff!important; 
}
.home .right button {
    margin: 5px;
    padding: 10px 15px!important;
    background: #fff;
    border: solid 2px #006082;
    border-radius: 10px;
    font-size: 18px;
    line-height: 1.3;
    color: #006082!important;
}
.home .right button:hover {
    background: #006082;
    color: #fff!important;
}
.home .right .group {
    border: solid 1px #dcf0f7;
    border-radius: 10px;
    padding: 10px;
    margin-bottom: 25px;
    box-shadow: none;
}
#tab-container .fc_tab .field.style-2 > :nth-child(2) {
    border: none!important;
}
.home .field.style-2 {
    margin-bottom: 5px;
    padding: 10px;
}
.home .field.style-2:last-of-type { 
    margin-bottom: 0;
}
.home .field.style-2 label {
    color: #fff !important;
    font-size: 17px;
    font-weight: bold;
}
.home .field.style-2 input[type=file] {
    width: 225px!important;
    border: none !important;
    font-size: 14px;
    color: #dcf0f7;
}
.home .field.style-2 input[type=text] {
    margin: 2px 0 5px;
    border-radius: 5px;
    font-size: 14px;
}
#tab-container .fc_tab.home .field.style-2 input[type=button] {
    padding: 5px 10px !important;
    background: #006082;
    border: solid 2px #fff!important;
    border-radius: 10px;
    font-size: 14px;
    line-height: 1;
    color: #fff !important;
}
#tab-container .fc_tab.home .field.style-2 input[type=button]:hover {
    background: #7dbe00;
}
.home #file_load_console {
    display: inline-block;
    align-self: stretch;    
    margin-top: 10px;
    padding: 3px 5px;
    background: #006082;
    border-radius: 3px;
    color: #ebebea !important;
    /*font-family: Courier;*/
    font-size: 13px;
}
.home #file_load_console.hide {
    display: none;
}



/* expense comparison tab */
table.expense_comparison {}

table.expense_comparison tr.totals {}
table.expense_comparison tr.totals td {}
table.expense_comparison tr.totals td.no-border {}


table.expense_comparison tr.overview {}
table.expense_comparison tr.overview  td {}
table.expense_comparison tr.overview td.no-border {}
table.expense_comparison tr.overview td.traditional_expenses {
    background: #d6f1f7;
}
table.expense_comparison tr.overview td.iul_expenses {
    background: #e1fbb0;
}
table.expense_comparison tr.overview td.cumulative_expenses {
    background: #dcf0f7;
}
table.expense_comparison tr.overview td.distributions {
    background: #f6f6f6;
}


table.expense_comparison tr.details {}
table.expense_comparison tr.details  td {}
table.expense_comparison tr.details td.no-border {}
table.expense_comparison tr.details td.traditional_expenses {
    background: #d6f1f7;
}
table.expense_comparison tr.details td.iul_expenses {
    background: #e1fbb0;
}
table.expense_comparison tr.details td.cumulative_expenses {
    background: #dcf0f7;
}
table.expense_comparison tr.details td.distributions {
    background: #f6f6f6;
}


table.expense_comparison tr.results {}
table.expense_comparison tr.results  td {}
table.expense_comparison tr.results td.no-border {}
table.expense_comparison tr.results td.traditional_expenses {
    background: #d6f1f7;
}
table.expense_comparison tr.results td.iul_expenses {
    background: #e1fbb0;
}
table.expense_comparison tr.results td.cumulative_expenses {
    background: #dcf0f7;
}
table.expense_comparison tr.results td.distributions {
    background: #f6f6f6;
}

#expense_comparison_graph {
    height: 400px;
}


/* life insurance tab */

#life_insurance_graph {
    height: 400px!important;
}