@charset "UTF-8";

:root {
  --primary-color: #008080;
  --secondary-color: #3DCCCC;
  --primary-border-color:#004D4D;
  --emphasized-background-color:#F8F9FA;
}



/* Start wait overlay */

.spanner {
  position:absolute;
  top: 50%;
  left: 0;
  opacity : 0.33;
  width: 100%;
  display:block;
  text-align:center;
  height: 300px;
  color: white;
  transform: translateY(-50%);
  z-index: 1101;
  visibility: hidden;
}

.overlay {
  	position: fixed;
	width: 100%;
	height: 100%;
  	background: rgba(0,0,0,0.5);
  	visibility: hidden;
  	z-index: 1100;
}

.loader,
.loader:before,
.loader:after {
  border-radius: 50%;
  width: 2.5em;
  height: 2.5em;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation: load7 1.8s infinite ease-in-out;
  animation: load7 1.8s infinite ease-in-out;
}

.loader {
  color: white;
  font-size: 10px;
  margin: 40px auto;
  position: relative;
  text-indent: -9999em;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}

.loader:before,
.loader:after {
  content: '';
  position: absolute;
  top: 0;
}

.loader:before {
  left: -3.5em;
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}

.loader:after {
  left: 3.5em;
}

@-webkit-keyframes load7 {
  0%,
  80%,
  100% {
    box-shadow: 0 2.5em 0 -1.3em;
  }
  40% {
    box-shadow: 0 2.5em 0 0;
  }
}

@keyframes load7 {
  0%,
  80%,
  100% {
    box-shadow: 0 2.5em 0 -1.3em;
  }
  40% {
    box-shadow: 0 2.5em 0 0;
  }
}


a.dropdown-item:active {
	background-color : var(--primary-color);
}


.show{
  visibility: visible;
}

.spanner, .overlay{
	opacity: 0;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
}

.spanner.show, .overlay.show {
	opacity: 1
}

/* End wait overlay */


section.faq, .help, .info {
	scroll-margin-top: 100px;
}	


@media (width <= 992px) {
	section.faq, .help, .info {
		scroll-margin-top: 50px;
	}	
}	
 


h3 {
	color: var(--primary-color);
}	



h4,h5,h6 {
	color: var(--primary-color);
}


h4.summary-heading {
	text-align: center;
	color: var(--emphasized-background-color);
	background-color: var(--primary-color);
	padding: 5px;
	margin-bottom: 0px;
}


h5.help-sub-heading {
	color: #0F4D4D;
}

header.layout-header {
	/* border: 1px var(--primary-color) solid; */
}

footer.layout-footer {
	color : var(--primary-color);
	margin-top : 2rem;
	margin-bottom : 2rem;
	font-size : 0.8rem;
    font-weight: 600 !important;
}

legend {
	color: #0F4D4D;
	font-weight: 500;
}

::-ms-reveal {
    display: none;
}

table {
	border-color: var(--primary-color) !important;
}


table thead tr th {
	color: var(--emphasized-background-color) !important;
	background-color: var(--primary-color) !important;	
	vertical-align: middle;
	text-align: center;	
}

table thead tr th.sortable {
	cursor: pointer; 
}

table tbody tr td {
	vertical-align: middle;
}


.strategy-table-row {
	cursor: pointer; 
}

.strategy-table-row:hover td {
	background-color : #3DCCCC !important;
	color : #F8F9FA;
}


strong {
	color: #0F4D4D; 
}


ol.emphasized, ul.emphasized {
	background-color: var(--emphasized-background-color); 
}


div.modal-est-dlg-content {
	background-color: var( --emphasized-background-color);
}

div.modal-est-dlg-content h1 {
	color:	#008080;
}  


div.main-heading {
	background-color: var(--primary-color);
	color: #F8F9FA;
	margin-bottom: 10px; 
	text-align: center;
}



div.asof {
	
	text-align : center;
	margin-bottom: 10px;
}


div.no-nav-container {
	background-color: #F8F9FA;
	padding: 1rem 1rem;
}


span.socsecan-bold {
	font-weight: 600;
	color: #004D4D;
	font-weight: bold;
}

.form-btn {
	background-color: var(--primary-color);
	border-color: var(--primary-color);
	min-width: 75px;
}

.form-btn:hover {
	background-color:#006666;
	border-color: var(--primary-border-color);
}	

.form-btn:active {
	background-color:#006666 !important;
	border-color: var(--primary-border-color) !important;
}

.form-btn:disabled {
	background-color:#006666 !important;
	border-color: var(--primary-border-color) !important;
	opacity:	0.65 !important;
}	

.form-btn:focus {
	background-color:#006666 !important;
	border-color: var(--primary-border-color) !important;
}


.form-back-btn {
	color: var(--primary-color);
	background-color: white;
		
}

.form-back-btn:hover {
	color: var(--primary-border-color);
	background-color: white;
	border-color: var(--primary-border-color);	
}


.form-back-btn:active {
	color: var(--primary-border-color);
	background-color: white !important;
	border-color: var(--primary-border-color) !important;
}


.form-back-btn:focus {
	color: var(--primary-border-color);
	background-color: white !important;
	border-color: var(--primary-border-color) !important;
}



.form-radio:checked {
	background-color: var(--primary-color);
	border-color: var(--primary-color);
}


.form-checkbox:checked {
	background-color: var(--primary-color);
	border-color: var(--primary-color);
}


div.password-box {
	position: relative;
  	top: 0;
  	left: 0;
  	padding: 0px 0px;
} 
 
span.password-toggle-icon {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  cursor: pointer;	
}


span.password-toggle-icon i {
  font-size: 18px;
  line-height: 1;
  color: #333;
  transition: color 0.3s ease-in-out;
  margin-bottom: 20px;
}


span.password-toggle-icon i:hover {
  color: #000;
}


a.link {
	color: var(--primary-color);
	font-weight: bold;
}

a.link:hover {
	color: #004D4D;
}

a.info {
	font-weight: bold;
	border-bottom: 1px dotted var(--primary-color);
	text-decoration: none;
	cursor: pointer; 	
}



input[type=range] {
	width: 100%; 
	accent-color: var(--primary-color);
}

.logo-text {
	background-color : var(--primary-color);
	font-weight: 400;
	color: #F8F9FA; 
	padding : 6px 8px;
	border-radius : 0.375rem;
}


.logo-text-no-nav {
	font-weight: 400;
	font-size: 1.25rem;
	color: var(--primary-color);
}
	

.footer-container {
	width: 100%;
	text-align : center;
	/* background-color: var(--primary-color); */
	/* color: #FFFFFF; */
	color: var(--primary-color);
	margin-top: 16px;
}


.footer-container a {
	
	color: var(--primary-color);
	/* color: #FFFFFF; */
}

.footer-container a:hover {
	color: var(--secondary-color);
}




.home-section {
	padding: 15px 15px;
	background-color: var(--emphasized-background-color);
}

.home-section img {
	padding-bottom: 15px;
}


span.as-of-date {
	font-size: 75%;
}	


div.summary-table-scroll-wrapper {
	overflow : auto; 
	height: 314px;	
}



table.summary-table thead {
	position: sticky; 
	top: -1px;
}


table.summary-table tr.empty-table-row {
	height: 50px;	
} 
 


div.summary-table-income-timeframe {
	margin-top: 15px; 
	margin-bottom: 10px;	
}	



div.summary-table-title {
	background-color: var(--emphasized-background-color);
	padding: 1rem 1rem;
}


div.sensitivity-graph-wrapper {
	padding : 15px 5px;
	margin-bottom: 15px;
	border : 1px solid var(--primary-color);
	background-color: var(--emphasized-background-color);
}



div.page-errors {
 	color: var(--bs-form-invalid-color);
 	margin: 10px 0px;  
 	min-height: 21px;
}

a.error-link {
	color: var(--bs-form-invalid-color);
}

div.validation-msg {
	display: block;
	margin-top: 0.5rem;
	margin-bottom : 0.5rem;
 	height: 21px;	
 	line-height: 1rem;
}

i.info-icon {
	font-size: 1rem; 
	color: var(--secondary-color);	
}


i.info-icon-table-heading {
	
	font-size: 1rem; 
	color: var(--primary-color);	
} 



span.assumption-sensitivity-metric {
	color: var(--primary-color);
	font-weight: 500;
}


p.warning {
	padding : 8px 8px;
	background-color: #FFf48D; 
	border : 1px solid var(--primary-color);
}


ul li p.warning {
	padding : 8px 8px;
	background-color: #FFf48D;
	border : none; 
	font-weight: 500;
}


p.emphasized {
	padding : 10px 10px;
	background-color: var(--emphasized-background-color);
	border : 1px solid var(--primary-color);
}

div.emphasized {
	padding : 10px 10px;
	background-color: var(--emphasized-background-color);
	margin-bottom: 20px;
}

div.emphasized.form {
	 padding-left: 0; 
	 padding-right: 0;
}

fieldset.form-fieldset {
	
	margin: 0px 5px 0px 5px; 
	background-color: var(--emphasized-background-color); 
	padding: 5px 15px 0px 15px;
}

fieldset.form-fieldset legend {
	
	color : var(--primary-color);
}


p.chart-tooltip {
	font-size: 1rem; 
	padding: 1rem 1rem !important; 
	width: 100%; 
	white-space: nowrap;	
}


div.start-month-chart-wrapper {
	padding: 5px 5px;
	border : 1px solid var(--primary-color);
	background-color: var(--emphasized-background-color);
}	



a.start-month {
	font-weight: bold;
	text-decoration: none;
	cursor: pointer; 	
	white-space: nowrap; 		
}


.deficit-text {
	color : #806B00;
}

.surplus-text {
	color : #008080;
}



/* Analysis */
@media (min-width: 992px) {
    .analysis-layout {
        display:grid;
        grid-template-areas: "sidebar main";
        grid-template-columns: 1fr 5fr;
        gap: 1.5rem
    }
}

.analysis-gutter {
    --bs-gutter-x: 3rem
}

.analysis-main {
    grid-area: main
}


.analysis-sidebar {
    grid-area: sidebar;
    min-width : 220px;
}

@media (min-width: 992px) {
	.analysis-sidebar {
		position:-webkit-sticky;
	    position: sticky;
	    top: 5rem;
	    display: block!important;
	    height: calc(100vh - 6rem);
	    padding-left: .25rem;
	    margin-left: -.25rem;
	    overflow-y: auto;
	    background-color : #F8F9FA;
	}
}


.analysis-navbar {
    padding: 0 0;
    background-color: #F8F9FA;
}

h1.analysis-heading {
	color: var(--primary-color);
	text-align: center;
}


div.analysis-menu-body {
	
	background-color: #F8F9FA; 
}


.analysis-menu-link {
	color: teal;
	text-decoration: none;
 	padding: .1875rem .5rem;
    margin-top: .125rem;
    margin-left: 1.125rem;	
}


.analysis-menu-link:visited {
	color: teal;
}


.analysis-menu-link:hover {
	color: #F8F9FA;
	background-color : #3DCCCC;
}


.analysis-menu-link:focus {
	color: #F8F9FA;
	background-color : teal;
}

.analysis-menu-link.active {
	color: #F8F9FA;
	font-weight : 600;
	background-color : teal;
}



.footer-container.analysis {
	
	margin-top: 0px;
}	

.analysis-section.heading {
	text-align: center;
	color : var(--primary-color); 
}	


.google-adsense-container {
	height: auto;
	background-color : var(--emphasized-background-color);
}



/* SVG */

svg > g > g:last-child { 
	pointer-events: none; 
}



@page {

}



@media print {

  div.emphasized, div.start-month-chart-wrapper {
    break-inside: avoid;
  }
  
  
  div.summary-table-container {
	break-inside: avoid;
  }


  div.summary-table-scroll-wrapper {
	height: fit-content;	
}
  
  section.assumption-sensitivty {
	break-inside: avoid;
  }
  
  
  
}