/*
grey-lighter: #f5f5f5;
grey-light: #e3e3e3;
grey: #424141;
grey-dark: #;
grey-darker: #000;

********************
DO NOT MAKE EDITS
Do not change any of the styles in this section. If you need to make changes to one,
copy it out of this section and paste it into the CUSTOM section below.
********************
*/

/* Misc. */
.descalc div,
.descalc section,
.descalc form,
.descalc input,
.descalc button,
.descalc label,
.descalc span,
.descalc table,
.descalc h1,
.descalc h2,
.descalc h3,
.descalc h4,
.descalc h5,
.descalc h6 {
	-moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.descalc .descalc-text-left {
	text-align: left;
}
.descalc .descalc-text-right {
	text-align: right;
}
.descalc .descalc-text-center {
	text-align: center;
}
.descalc .descalc-col {
	margin-bottom: 25px;
}
.descalc h1,
.descalc h2,
.descalc h3,
.descalc h4,
.descalc h5,
.descalc h6 {
	margin:0;
	padding:0;
}
.descalc .descalc-small {
	font-size: 75%;
}
.descalc .descalc-link,
.descalc .descalc-link:active,
.descalc .descalc-link:visited {
	font-size:1em;
	line-height:1em;
	font-family: inherit;
	font-weight:normal;
	display:inline-block;
	padding-left:21px;
	background: transparent url("https://www.desirementcalculator.com/desirementCalculator/app/image/pdf.gif") no-repeat center left;
	border:0;
	outline: 0;
	text-transform: none;
	text-decoration: none;
}
.descalc .descalc-link:hover,
.descalc .descalc-link:focus {
	cursor:pointer;
	text-decoration: underline;
}

/* Form */
.descalc input[type="text"],
.descalc input[type="number"] {
	font-size:99%;
	height: 40px;
	line-height: 38px;
	width:100%;
	display: block;
	margin: 0;
	padding: 0 20px;
    background-color: #fff;
    border: 1px solid #000;
    border-radius: 0;
    outline: none;
    box-shadow: none;
    -webkit-appearance: none;
}
.descalc label {
	margin:0 0 2px 0;
	display:block;
}
.descalc .descalc-group-dollar,
.descalc .descalc-group-percent {
	position:relative;
}
.descalc .descalc-group-dollar input[type="number"] {
	padding-left:30px;
}
.descalc .descalc-group-percent input[type="number"] {
	padding-right:30px;
}
.descalc .descalc-group-dollar .descalc-group-symbol,
.descalc .descalc-group-percent .descalc-group-symbol {
	color: #424141; /* Grey */
	position: absolute;
	top: 0;
	line-height: 40px;
}
.descalc .descalc-group-dollar .descalc-group-symbol {
	padding-left: 20px;
	left:0;
}
.descalc .descalc-group-percent .descalc-group-symbol {
	padding-right: 10px;
	right:0;
}


/* Tables */
.descalc table {
	width:100%;
    border: 0;
    border-spacing: 0;
}
.descalc table thead th,
.descalc table tbody td,
.descalc table tfoot td {
	text-align: left;
	border: 0;
}
.descalc table thead th,
.descalc table tfoot td {
	font-weight:600;
}
.descalc table thead th {
	padding: 8px 10px;
}
.descalc table tbody td,
.descalc table tfoot td {
	padding: 10px;
}
.descalc table thead th,
.descalc table tbody td {
    border-right: 1px solid #000;
}
.descalc table thead tr th:last-child,
.descalc table tbody tr td:last-child {
	border:0;
}
.descalc table thead tr th {
	color:#fff;
	background-color: #424141; /* grey */
}
.descalc table tbody {
	background-color: #f5f5f5;	/* grey-lighter */
}
.descalc table tbody tr:nth-child(even) {
	background-color: #e3e3e3; /* grey-light */
}

.descalc .descalc-table-width-auto {
	width:1px;
	white-space: nowrap;
}

/* Tabs */
.descalc .descalc-tabs-top {
	margin-bottom:20px;
}
.descalc .descalc-tabs-bottom {
	margin-top:20px;
}
.descalc .descalc-tabs input[type="radio"] {
    display:none;
}
.descalc .descalc-tabs label {
    display:inline-block;
    padding:5px 15px 4px;
    background-color: #e3e3e3;
    font-size:.822em;
    color: #fff;
    text-transform:uppercase;
    cursor:pointer;
}
.descalc .descalc-tabs label:hover {
    background-color: #424141; /* grey */
}
.descalc .descalc-tabs input[type="radio"]:checked + label {
    background-color: #424141; /* grey */
    cursor: default;
}


/* Step 1 */
.descalc .descalc-step1 .descalc-wrapper {
	padding: 20px;
	background-color: #f5f5f5; /* grey-lighter */
}
.descalc #descalc-desired-income-radio-group > label {
	margin-bottom:5px;
}
.descalc #descalc-desired-income-radio-group input[type="number"] {
	height:30px;
	line-height:28px;
}
.descalc #descalc-desired-income-radio-group .descalc-group-percent {
	display: inline-block;
	width:100px;
}
.descalc #descalc-desired-income-radio-group .descalc-group-percent .descalc-group-symbol {
	line-height:30px;
}

/* Step 2 */
.descalc #descalc-table-portion thead tr th:first-child {
    background-color: transparent;
}
.descalc #descalc-table-portion tbody tr td:first-child {
    font-weight: 600;
    border-left:10px solid #000;
}

.descalc #descalc-your-portion-percent {
	font-weight: 600;
	margin-bottom:20px;
}


/* Step 3 */
.descalc .descalc-step3 h4 {
	margin-bottom:5px;
}


/*
********************
CUSTOM
********************
Media Query "Break"
You can change the "min-width" of the media query dependent on each website, but
don't change the styles within the media query.
 */
@media (min-width: 800px) {
	.descalc .descalc-row .descalc-col {
		vertical-align: middle;
		display: inline-block;
		margin-right: -.25em;
		padding-right: 30px;
	}
	.descalc .descalc-row .descalc-col + .descalc-col:last-child {
		padding-right: 0;
	}
	.descalc .descalc-row .descalc-col12 {
		padding-right: 0;
		width: 100%;
	}
	.descalc .descalc-row .descalc-col6 {
		width: 50%;
	}
	.descalc .descalc-row .descalc-col4 {
		width: 33.33333333%;
	}
	.descalc .descalc-text-left-lg {
		text-align: left;
	}
	.descalc .descalc-text-center-lg {
		text-align: center;
	}
	.descalc .descalc-text-right-lg {
		text-align: right;
	}
}

/*
*******************
CUSTOM
*******************
Red: #e63c2c;
Blue: #3ba5a6;
*/

/* Headlines */
.descalc h3 {
	color:#3ba5a6;
}
.descalc h2,
.descalc h4 {
	color:#e63c2c;
}

/* Links */
.descalc .descalc-link,
.descalc .descalc-link:active,
.descalc .descalc-link:visited,
.descalc .descalc-link:hover,
.descalc .descalc-link:focus {
	color:#e63c2c;
}

/*
Charts
Should match "calculator.constant.js" colors and their positions.
*/
.descalc #descalc-table-portion tbody tr#descalc-table-portion-employer td:first-child {
    border-left-color: #FFDA3D;	/* Position 1 */
}
.descalc #descalc-table-portion tbody tr#descalc-table-portion-govt td:first-child {
    border-left-color: #fd7a6d;	/* Position 2 */
}
.descalc #descalc-table-portion tbody tr#descalc-table-portion-employee td:first-child {
    border-left-color: #c0eeeb;	/* Position 3 */
}

/* Tabs */
.descalc .descalc-tabs label {
    background-color: #e63c2c;
}
.descalc .descalc-tabs label:hover,
.descalc .descalc-tabs input[type="radio"]:checked + label {
    background-color: #3ba5a6;
}

/* Inputs */
.descalc input[type="text"],
.descalc input[type="number"] {
    border-color: #e63c2c;
    /*font-size: xx;*/
    /*height: 100px;*/
    /*line-height:98px; (Account for borders)*/
}
/* If changing the "Input Height", these should match
.descalc .descalc-group-dollar .descalc-group-symbol,
.descalc .descalc-group-percent .descalc-group-symbol {
	line-height: 100px;
} */

/* Tables */
.descalc table thead tr th {
	background-color: #3ba5a6;
}
.descalc table thead th,
.descalc table tbody td {
    border-color: #bfbfbf; /* light grey */
}
/* Table "Portion" */
.descalc #descalc-table-portion tfoot td {
    color: #e63c2c;
}