.muni-calculator--header .title
{
	line-height: 32px;
    font-size: 22px;
    font-weight: 400;
}

.muni-calculator--graph-view,
.muni-calculator--rate .muni-calculator--rate--info .state-name,
.muni-calculator--rate .muni-calculator--rate--info br,
.muni-calculator--map-graph,
.muni-calculator--close-button
{
	display: none;
}

.muni-calculator--rate
{
	flex-direction: column;
	align-items: center;
	text-align: center;
	flex: 1;
}

.muni-calculator--state-rate-container
{
	padding: 0rem 0.75rem;
	padding-bottom: 0.75rem;
}

.muni-calculator--view-controls
{
	position: relative;
	z-index: 10;
}

#muni-calculator:not( .graph-mode ) .muni-calculator--state-rate-container,
#muni-calculator:not( .graph-mode ) .muni-calculator--state-rate-container .muni-calculator--rate
{
	color : white !important;
}

.muni-calculator--slider--amount-item
{
	font-size: 12px;
}

#muni-calculator select
{
	-webkit-appearance: none;
    -moz-appearance: none;
}

#muni-calculator select::-ms-expand {
    display: none;
}

.muni-calculator--select-container
{
	position: relative;
	height: 45px;
	margin-bottom: 2rem;
}

.muni-calculator--select-container .putnamicon-angle-down
{
	position: absolute;
    right: 10px;
    height: 100%;
    width: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2rem;
    pointer-events: none;
}

.muni-calculator--state-selector
{
	width: 100%;
	padding: 0.75rem 0.5rem;
	border: 1px solid #ccc;
	background-color: white;
}

.muni-calculator--federal-rates
{
	margin: 1.5rem 0;
}

.muni-calculator--rates
{
	display: flex;
}

.muni-calculator--rate
{
	display: flex;
}

.muni-calculator--rate .muni-calculator--rate--value
{
	font-size: 2rem;
	font-weight: 700;
}

.muni-calculator--rate .muni-calculator--rate--info
{
	font-size: 12px;
	padding: 0 1.3rem;
	line-height: 1.3;
}

.muni-calculator--state-rates
{
	flex-direction: column;
	max-height: 500px;
	overflow-y: auto;
}

.muni-calculator--state-rate-container
{
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
}

.muni-calculator--state-header
{
	font-weight: 300;
}

.muni-calculator--state-rate-container .muni-calculator--state-header
{
	flex: 1 0 100%;
}

.muni-calculator--state-rate-container .muni-calculator--rate
{
	flex: 0 1 33%;
}

.muni-calculator--state-rate-container .muni-calculator--rate .muni-calculator--rate--info
{
	padding: 0 0.7rem;
}

.muni-calculator--color-graph
{
	display: none;
}

.graph-mode .muni-calculator--rate:not( :last-child ):after
{
	display: none;
}

/* These break point styles have the "graph-mode" class so we can force a mobile view for sidebars. "graph-mode" is for non-sidebar display */
@media( max-width: 767px )
{
	.graph-mode .muni-calculator--state-rate-container,
	.graph-mode .muni-calculator--state-rate-container .muni-calculator--rate
	{
		color: white !important;
	}

	
}

@media (max-width:991px) and (min-width:768px) 
{
	.graph-mode .muni-calculator--state-rate-container .muni-calculator--rate--value
	{
		font-size: 1.5rem;
	}

	.graph-mode .muni-calculator--state-rate-container .muni-calculator--rate--info
	{
		width: 100px !important;
    	font-size: 10px;
	}

	.graph-mode .muni-calculator--rate:not( :last-child ):after
	{
		margin-right: 0.5rem;
	}
}

@media (min-width:768px)
{
	/* These are overrides that were originally in a max-width, but needed to change so we can force a mobile view for a sidebar display */
	.graph-mode .muni-calculator--graph-view,
	.graph-mode .muni-calculator--rate .muni-calculator--rate--info .state-name,
	.graph-mode .muni-calculator--map-graph,
	.graph-mode .muni-calculator--close-button
	{
		display: block;
	}

	.graph-mode .muni-calculator--rate
	{
		flex-direction: row;
		align-items: left;
		text-align: left;
		flex: none;
	}

	.graph-mode .muni-calculator--state-rate-container
	{
		padding: 0rem;
		padding-bottom: 0rem;
	}

	.graph-mode .muni-calculator--state-rate-container,
	.graph-mode .muni-calculator--state-rate-container .muni-calculator--rate
	{
		color: black;
	}
	/* End of overrides */

	.graph-mode .muni-calculator--select-container
	{
		display: none;

	}
	
	.graph-mode .muni-calculator--rate
	{
		align-items: center;
	}
	
	.graph-mode .muni-calculator--state-rate-container .muni-calculator--rate
	{
		flex: 0 1;
		flex-shrink: 1;
		flex-basis: 30%;
		width: 30%;
	}

	.graph-mode .muni-calculator--rate .muni-calculator--rate--info
	{
		min-width: 150px;
		font-size: 15px;
	}
		
	.graph-mode .muni-calculator--state-rates
	{
		opacity: 0; 
		transition: opacity 0.4s linear 0.1s;
		height: 60px;
		position: relative;
		overflow: hidden;
	}
	.graph-mode .muni-calculator--state-rates.active{ opacity: 1; }
	.graph-mode .muni-calculator--state-rate-container
	{
		background-color: white !important;
		height: 50px;
	    display: flex;
	    align-items: center;
	}

	.graph-mode .muni-calculator--close-button button
	{
		position: absolute;
	    right: 0;
	    width: 30px;
	    border: 1px solid #333;
	    height: 30px;
	    display: flex;
	    justify-content: center;
	    align-items: center;
	    border-radius: 50%;
	    top: 8px;
	    background-color: white;
	}
	.graph-mode .muni-calculator--close-button button:focus{ outline: none;  }
	.graph-mode .muni-calculator--close-button button .putnamicon{ top: 0px; left: 1px; }

	.graph-mode .muni-calculator--state-rate-container .muni-calculator--state-header
	{
		display: none;
	}
	
	.graph-mode .muni-calculator--state-rate-container .muni-calculator--rate .muni-calculator--rate--info
	{
		color : black !important;
	}

	.graph-mode .muni-calculator--color-graph
	{
		position: relative;
		display: flex;
		width: 100%;
	}

	.graph-mode .muni-calculator--color-graph .muni-calculator--color-graph--color
	{
		flex: 1;
		color : white;
		height: 60px;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size : 1.3rem;
	}
	.graph-mode .muni-calculator--color-graph .muni-calculator--color-graph--color:nth-child(5)
	{
		border-right: 4px solid grey;
	}

	.graph-mode .muni-calculator--color-graph--star
	{
		position: absolute;
		height: 100%;
		left: 0;
		opacity: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		transition: left 0.5s ease-in-out, opacity 0.5s ease-in-out;
	}

	.graph-mode .muni-calculator--color-graph--star .putnamicon-morningstar
	{
		font-size: 1.5rem;
		line-height: 1.5;
		color: black;
	}
}

@media (min-width:992px)
{
	.graph-mode .muni-calculator--rate .muni-calculator--rate--value
	{
		font-size: 2.5rem;
    	line-height: 1;
	}

	.graph-mode .muni-calculator--rate:not( :last-child ):after
	{
		content: "|";
		margin-right: 2rem;
		color: #888;
		display: block;
	}
}

/* INPUT SLIDER */
.muni-calculator--slider
{
	margin-bottom: 2rem;
}

.muni-calculator--slider h3
{
	font-size: 1.2rem;
	margin-bottom: 1rem;
}

.muni-calculator--slider--amount-container
{
	position: absolute;
	width: 100%;
	height: 40px;
	display: flex;
	z-index: 1;
	pointer-events: none;
	left: 0;
	top: 10px;
}

.muni-calculator--slider--amount-item
{
	flex: 0 1 100%;
    justify-content: center;
    text-align: center;
    position: relative;
}

.muni-calculator--slider--amount-item:after
{
	content : "|";
	position: absolute;
    left: 50%;
    top: 52%;
    line-height: 2.5;
}

.muni-calculator--slider--amount-item:first-child{  flex-basis: 58%; text-align: left; }
.muni-calculator--slider--amount-item:first-child:after{ left: -1px; }

.muni-calculator--slider--amount-item:last-child{  flex-basis: 58%; text-align: right; }
.muni-calculator--slider--amount-item:last-child:after{ right: -1px; }

.muni-calculator--slider--input-container
{
	display: flex;
	align-items: flex-end;
	height: 50px;
	position: relative;
	z-index: 2;
}

.muni-calculator--slider input[ type=range ] 
{
	-webkit-appearance: none;
    width: 100%;
    background: transparent;
    z-index: 10;
    height: 100px;
    top: 100%;
    position: relative;
    cursor: pointer;
}
.muni-calculator--slider input[ type=range ]:focus{ outline: 0; }
.muni-calculator--slider input[ type=range ]::-moz-focus-outer { border: 0; }

.muni-calculator--slider input[type=range]::-webkit-slider-thumb 
{
	border: 1px solid #eb981a;
	height: 24px;
	width: 24px;
	border-radius: 50%;
	background: #ffffff;
	cursor: pointer;
	margin-top: -12px;
	-webkit-appearance: none;
}

.muni-calculator--slider input[type=range]::-moz-range-thumb
{
	border: 1px solid #eb981a;
	height: 24px;
	width: 24px;
	border-radius: 50%;
	background: #ffffff;
	cursor: pointer;
	margin-top: -12px;
}

.muni-calculator--slider input[type=range]::-webkit-slider-runnable-track 
{
	width: 100%;
	height: 1px;
	cursor: pointer;
	background: black;
}

.muni-calculator--slider input[type=range]:focus::-webkit-slider-runnable-track 
{
	background: black;
}

.muni-calculator--slider input[type=range]::-moz-range-track 
{
  	width: 100%;
	height: 1px;
	cursor: pointer;
	background: black;
}

/* IE Slider */
.muni-calculator--slider input[type=range]::-ms-track {
    width: 100%;
    height: 1px;
    background: black;
    border-color: transparent;
    color: transparent;
    margin-top: 15px;
}
.muni-calculator--slider input[type=range]::-ms-fill-lower {
    background: black;
    border-radius: 10px;
}
.muni-calculator--slider input[type=range]::-ms-fill-upper {
    background: black;
    border-radius: 10px;
}
.muni-calculator--slider input[type=range]::-ms-thumb {
    border: none;
    height: 24px;
	width: 24px;
    border-radius: 50%;
    background: white;
    border: 1px solid #eb981a;
}
.muni-calculator--slider input[type=range]:focus::-ms-fill-lower {
    background: black;
}
.muni-calculator--slider input[type=range]:focus::-ms-fill-upper {
    background: black;
}