/*--------------------------------
Bringing in Rate Calculator Styles
--------------------------------*/
/* Container used for styling the custom select, the buttom class below adds the bg gradient, corners, etc. */
.custom-select {position: relative; display: block;}

/* This is the native select, we're making everything but the text invisible so we can see the button styles in the wrapper */
.custom-select select {width: 100%; margin: 0; outline: none; padding: 0.6em 0.8em 0.5em 0.8em; box-sizing: border-box; font-size: 16px;}

/* Custom arrow sits on top of the select - could be an image, SVG, icon font, * etc. or the arrow could just baked into the bg image on the select. */
.custom-select::after {content: " "; position: absolute; top: 50%; right: 1em; z-index: 2; pointer-events: none; display: none;}

/* Firefox <= 34 has a false positive on @supports( -moz-appearance: none ) @supports ( mask-type: alpha ) is Firefox 35+ */
@supports ((-webkit-appearance: none) or (-moz-appearance: none) or (appearance: none)) or ((-moz-appearance: none) and (mask-type: alpha)) {
  .custom-select::after {display: block;}
  .custom-select select {padding-right: 2em; background: #fff; border: 1px solid #414142; border-radius: 3px; color: #476680; -webkit-appearance: none; -moz-appearance: none; appearance: none;}
  .custom-select select:focus {border-color: #aaa;}
}

.custom-select::after {width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 7px solid #666; margin-top: -3px;}

/*--------------------------------
Portfolio Demo Styles
--------------------------------*/
.calc-demo {}
.view-code {font-size: 1.25em; display: block; vertical-align: bottom; margin: 2em auto 0.5em; width: 100%; max-width: 500px;}
.view-code a {font-weight: bold; text-align: center; text-decoration: none; color: #476680; transition: 0.2s; display: block; text-align: center;}
.view-code a:hover {color: #232d4b;}
.view-code img {max-height: 20px; display: inline-block; margin-right: 8px; position: relative; top: 3px;}

.portfolio-return {display: block; text-align: center;}
.portfolio-return a {font-weight: normal; color: #476680; transition: 0.2s; font-size: 0.9rem; text-decoration: none;}
.portfolio-return a:hover {color: #232d4b;}

/*--------------------------------
General Rate Calculator Styles
--------------------------------*/
.rate-calculator-style {display: block; text-align: center; padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid #aaa;}

/*--------------------------------
BiLateral Button Styles
--------------------------------*/
.bilateral-calculator-buttons__single-button {font-family: "poppins", Arial, "Helvetica Neue", Helvetica, sans-serif;}
.bilateral-calculator-buttons__single-button.bilateral-active {border: 2px solid #caa94c; outline: none;}
.bilateral-calculator-buttons__single-button.button-disabled {color: #e0e0e0; background: red; pointer-events: none;}

/*--------------------------------
Additional Information Styles (Dependents/Marital Status, Etc.)
--------------------------------*/
.marriage-button-active {border: 2px solid #caa94c;}

.aid-and-attendance-status-wrapper {display: block;}
.aid-and-attendance-status-wrapper.aa-status-disabled {display: none;}

.aa-button-active {border: 2px solid #caa94c;}

/*--------------------------------
Overall Styles
--------------------------------*/
.rate-calculator-outer {max-width: 800px; margin: 30px auto; background: #232d4b; background: linear-gradient(to bottom,#232d4b 0%,#53a4db 100%); color: #fff; border-radius: 3px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); box-sizing: border-box; overflow: hidden;}
.rate-calculator-outer .rate-calculator-title {margin-top: 0; margin-bottom: 0; font-size: 34px; display: block; text-align: center;}
.rate-calculator-outer h1,
.rate-calculator-outer h2,
.rate-calculator-outer h3,
.rate-calculator-outer h4,
.rate-calculator-outer h5 {font-family: "poppins", Arial, "Helvetica Neue", Helvetica, sans-serif;}

.rate-calculator-inner-wrapper {padding: 15px 15px 0 15px;}
.rate-calculator-inner-wrapper h2 {font-weight: normal;}
.rate-calculator-inner-wrapper h2.no-top-margin {margin-top: 0;}

/*--------------------------------
Top Calculator Styles
--------------------------------*/
.rate-calculator-top {margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid #5f778c; box-sizing: border-box;}
.rate-calculator-top h2,
.rate-calculator-top p {color: #ffffff;}
.rate-calculator-top__inner:after {content: ""; display: table; clear: both;}
.rate-calculator-top__left {width: 100%; max-width: 400px; margin: 0 auto 30px auto; box-sizing: border-box;}
@media screen and (min-width: 9999px) {
  .rate-calculator-top__left {float: left; width: 400px; margin: 0; padding-right: 15px;}
}
.rate-calculator-top__right {width: 100%; margin: 0 auto 20px auto; box-sizing: border-box;}
@media screen and (min-width: 9999px) {
  .rate-calculator-top__right {float: left; width: calc(100% - 400px); margin: 0; padding-left: 15px;}
}
.rate-calculator-top__disability-percentage-title {text-align: center;}
.rate-calculator-top__disability-percentage {text-align: center; margin-bottom: 20px;}
.rate-calculator-top__disability-percentage-inner {background: #5c7c96; color: #fff; height: 130px; width: 130px; display: inline-block; vertical-align: top; font-weight: bold; line-height: 130px; font-size: 45px; text-align: center; border-radius: 130px; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);}
.rate-calculator-top__bilateral-info {text-align: center;}
.rate-calculator-top__bilateral-info h3 {font-size: 14px; font-weight: 600; line-height: 1.2; color: #d7ebff; margin: 10px 0; font-family: "poppins", Arial, "Helvetica Neue", Helvetica, sans-serif;}
.rate-calculator-top__bilateral-injuries {margin-bottom: 12px; border-bottom: 1px solid #aaa;}
.bilateral-calculator-buttons__single-button {font-family: "poppins", Arial, "Helvetica Neue", Helvetica, sans-serif; background: #fff; border-radius: 4px; padding: 10px; color: #476680; transition: 0.2s; border: 1px solid #6d6d6d; border-bottom: 3px solid #4a4b4c; position: relative; width: 106px; cursor: pointer; outline: none; margin-bottom: 10px; top: 0;}
.bilateral-calculator-buttons__single-button:hover {background: #232d4b; border: 1px solid #131e3c; border-bottom: 3px solid #131e3c; color: #fff;}
.bilateral-calculator-buttons__single-button.bilateral-active {background: #caa94c; color: #fff; top: 2px; border: 1px solid #b5953d;}

.disability-calculator-buttons__single-button {font-family: "poppins", Arial, "Helvetica Neue", Helvetica, sans-serif; background: #fff; border-radius: 4px; padding: 10px; color: #476680; transition: 0.2s; border: 1px solid #6d6d6d; border-bottom: 3px solid #4a4b4c; position: relative; top: 0; width: 84px; cursor: pointer; outline: none; margin-bottom: 10px;}
.disability-calculator-buttons__single-button:hover {background: #232d4b; border: 1px solid #131e3c; border-bottom: 3px solid #131e3c; color: #fff;}
.disability-calculator-buttons__single-button:active {top: 2px; border-bottom: 1px solid #131e3c;}

.current-disabilities-added-row {min-height: 55px;}
.current-disabilities-added-row span {color: #ffffff;}

.current-disabilities-added {display: inline-block; color: #fff; padding: 10px; border: 1px solid #760b25; border-radius: 3px; background: #a41034; text-align: center; margin-right: 10px; margin-bottom: 10px; vertical-align: top; line-height: 1;}

/*--------------------------------
Middle Calculator Styles
--------------------------------*/
.rate-calculator-middle {margin-bottom: 20px; box-sizing: border-box;}
.rate-calculator-middle h2,
.rate-calculator-middle p {color: #ffffff;}
.rate-calculator-middle p {margin-bottom: 5px;}
.rate-calculator-middle__inner-row:after {content: ""; display: table; clear: both;}
/*.rate-calculator-middle__inner-row:nth-of-type(1) {margin-bottom: 20px;}*/
.rate-calculator-middle__row-title {margin-bottom: 5px; text-align: center;}
.rate-calculator-middle__left {width: 100%; max-width: 500px; margin: 0 auto 20px auto; box-sizing: border-box;}
@media screen and (min-width: 9999px) {
  .rate-calculator-middle__left {float: left; width: 50%; max-width: none; margin: 0; padding-right: 15px;}
}
.rate-calculator-middle__right {width: 100%; margin: 0 auto 20px auto; max-width: 500px; box-sizing: border-box;}
@media screen and (min-width: 9999px) {
  .rate-calculator-middle__right {float: left; width: 50%; max-width: none; margin: 0; padding-left: 15px;}
}

.marital-status__single-button {font-family: "poppins", Arial, "Helvetica Neue", Helvetica, sans-serif; background: #fff; border-radius: 4px; padding: 10px; color: #476680; transition: 0.2s; border: 1px solid #6d6d6d; border-bottom: 3px solid #4a4b4c; position: relative; width: 106px; cursor: pointer; outline: none; margin-bottom: 10px; top: 0;}
.marital-status__single-button:hover {background: #232d4b; border: 1px solid #131e3c; border-bottom: 3px solid #131e3c; color: #fff;}
.marital-status__single-button.marriage-button-active {background: #caa94c; color: #fff; top: 2px; border: 1px solid #b5953d;}

.aid-and-attendance-status__single-button {font-family: "poppins", Arial, "Helvetica Neue", Helvetica, sans-serif; background: #fff; border-radius: 4px; padding: 10px; color: #476680; transition: 0.2s; border: 1px solid #6d6d6d; border-bottom: 3px solid #4a4b4c; position: relative; width: 106px; cursor: pointer; outline: none; margin-bottom: 10px; top: 0;}
.aid-and-attendance-status__single-button:hover {background: #232d4b; border: 1px solid #131e3c; border-bottom: 3px solid #131e3c; color: #fff;}
.aid-and-attendance-status__single-button.aa-button-active {background: #caa94c; color: #fff; top: 2px; border: 1px solid #b5953d;}

/*--------------------------------
Reset Row Styles
--------------------------------*/
.rate-calculator-reset-row {box-sizing: border-box; margin-bottom: 0; background: #232d4b; margin-top: 30px; min-height: 59px; clear: both; padding-top: 10px; padding-bottom: 10px; width: auto; margin-left: -10px; margin-right: -10px;}

.reset-calculator-button {display: block; width: 220px; padding: 15px; border-radius: 4px; background: #53a4db; color: #fff; font-weight: bold; text-align: center; transition: 0.2s; margin-left: auto; margin-right: auto; border: 1px solid #2a51a1; border-bottom: 3px solid #2a51a1; font-size: 22px; font-weight: normal; cursor: pointer; outline: none; position: relative; top: 0; transform: translateY(0);}
.reset-calculator-button:hover {color: #fff; background: #a41034; border: 1px solid #760b25; border-bottom: 3px solid #760b25;}
.reset-calculator-button:active {transform: translateY(2px); border-bottom: 1px solid #760b25;}

/*--------------------------------
Bottom Calculator Styles
--------------------------------*/
.rate-calculator-bottom {box-sizing: border-box; width: auto; margin-left: -17px; margin-right: -17px; position: relative; z-index: 10; background: #eaeaf0; color: #24384d;}
.rate-calculator-bottom__inner {padding-left: 10px; padding-right: 10px;}
.rate-calculator-bottom__inner:after {content: ""; display: table; clear: both;}
.rate-calculator-bottom__left {width: 100%; max-width: 400px; margin: 0 auto 20px auto; box-sizing: border-box;}
@media screen and (min-width: 9999px) {
  .rate-calculator-bottom__left {float: left; width: 400px; margin: 0; padding-right: 0px; border-right: 1px solid #e0e0e0;}
}
.rate-calculator-bottom__right {width: 100%; margin: 0 auto 20px auto; box-sizing: border-box;}
@media screen and (min-width: 9999px) {
  .rate-calculator-bottom__right {float: left; width: calc(100% - 400px); margin: 0; padding-left: 15px;}
}
.rate-calculator-bottom__disability-rating-title {text-align: center; font-size: 29px; margin-top: 0; padding-top: 20px;}
.rate-calculator-bottom__disability-rating {text-align: center; margin-bottom: 20px;}
.rate-calculator-bottom__disability-rating-inner {border: 4px solid #820422; background: #a41034; color: #fff; height: 200px; width: 200px; display: inline-block; vertical-align: top; font-weight: bold; line-height: 200px; font-size: 72px; text-align: center; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); border-radius: 200px;}
.rate-calculator-bottom__payment-amount-title {text-align: center; font-size: 29px;}
.rate-calculator-bottom__payment-amount-text {text-align: center; font-size: 50px; line-height: 1.5; margin-top: 20px; margin-bottom: 20px;}