/*--------------------------------
Bringing in Rate Calculator Styles
--------------------------------*/
@font-face {
  font-family: "Open Sans";
  src: url("../fonts/OpenSans-Bold.eot");
  src: url("../fonts/OpenSans-Bold.eot?#iefix") format("embedded-opentype"), url("../fonts/OpenSans-Bold.woff2") format("woff2"), url("../fonts/OpenSans-Bold.woff") format("woff"), url("../fonts/OpenSans-Bold.ttf") format("truetype");
  font-weight: bold;
  font-style: normal;
}
@font-face {
  font-family: "Open Sans";
  src: url("../fonts/OpenSans-Semibold.eot");
  src: url("../fonts/OpenSans-Semibold.eot?#iefix") format("embedded-opentype"), url("../fonts/OpenSans-Semibold.woff2") format("woff2"), url("../fonts/OpenSans-Semibold.woff") format("woff"), url("../fonts/OpenSans-Semibold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: "Open Sans";
  src: url("../fonts/OpenSans.eot");
  src: url("../fonts/OpenSans.eot?#iefix") format("embedded-opentype"), url("../fonts/OpenSans.woff2") format("woff2"), url("../fonts/OpenSans.woff") format("woff"), url("../fonts/OpenSans.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Open Sans";
  src: url("../fonts/OpenSans-SemiboldItalic.eot");
  src: url("../fonts/OpenSans-SemiboldItalic.eot?#iefix") format("embedded-opentype"), url("../fonts/OpenSans-SemiboldItalic.woff2") format("woff2"), url("../fonts/OpenSans-SemiboldItalic.woff") format("woff"), url("../fonts/OpenSans-SemiboldItalic.ttf") format("truetype");
  font-weight: 600;
  font-style: italic;
}
@font-face {
  font-family: "Avenir Next Condensed";
  src: url("../fonts/AvenirNextCondensed-Bold.eot");
  src: url("../fonts/AvenirNextCondensed-Bold.eot?#iefix") format("embedded-opentype"), url("../fonts/AvenirNextCondensed-Bold.woff2") format("woff2"), url("../fonts/AvenirNextCondensed-Bold.woff") format("woff"), url("../fonts/AvenirNextCondensed-Bold.ttf") format("truetype");
  font-weight: bold;
  font-style: normal;
}
@font-face {
  font-family: "Open Sans";
  src: url("../fonts/OpenSansLight-Italic.eot");
  src: url("../fonts/OpenSansLight-Italic.eot?#iefix") format("embedded-opentype"), url("../fonts/OpenSansLight-Italic.woff2") format("woff2"), url("../fonts/OpenSansLight-Italic.woff") format("woff"), url("../fonts/OpenSansLight-Italic.ttf") format("truetype");
  font-weight: 300;
  font-style: italic;
}
@font-face {
  font-family: "Open Sans";
  src: url("../fonts/OpenSans-Light.eot");
  src: url("../fonts/OpenSans-Light.eot?#iefix") format("embedded-opentype"), url("../fonts/OpenSans-Light.woff2") format("woff2"), url("../fonts/OpenSans-Light.woff") format("woff"), url("../fonts/OpenSans-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: "Avenir Next Condensed";
  src: url("../fonts/AvenirNextCondensed-Medium.eot");
  src: url("../fonts/AvenirNextCondensed-Medium.eot?#iefix") format("embedded-opentype"), url("../fonts/AvenirNextCondensed-Medium.woff2") format("woff2"), url("../fonts/AvenirNextCondensed-Medium.woff") format("woff"), url("../fonts/AvenirNextCondensed-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: "Open Sans";
  src: url("../fonts/OpenSans-BoldItalic.eot");
  src: url("../fonts/OpenSans-BoldItalic.eot?#iefix") format("embedded-opentype"), url("../fonts/OpenSans-BoldItalic.woff2") format("woff2"), url("../fonts/OpenSans-BoldItalic.woff") format("woff"), url("../fonts/OpenSans-BoldItalic.ttf") format("truetype");
  font-weight: bold;
  font-style: italic;
}
@font-face {
  font-family: "Open Sans";
  src: url("../fonts/OpenSans-Italic.eot");
  src: url("../fonts/OpenSans-Italic.eot?#iefix") format("embedded-opentype"), url("../fonts/OpenSans-Italic.woff2") format("woff2"), url("../fonts/OpenSans-Italic.woff") format("woff"), url("../fonts/OpenSans-Italic.ttf") format("truetype");
  font-weight: normal;
  font-style: italic;
}
/*--------------------------------------
Misc. Variables
---------------------------------------*/
/*--------------------------------
Mixins
--------------------------------*/
/* 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;
  /* Prefixed box-sizing rules necessary for older browsers */
  box-sizing: border-box;
  /* Font size must be 16px to prevent iOS page zoom on focus */
  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;
  /* These hacks make the select behind the arrow clickable in some browsers */
  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)) {
  /* Show custom arrow */
  .custom-select::after {
    display: block;
  }

  /* Remove select styling */
  .custom-select select {
    padding-right: 2em;
    /* Match-01 */
    /* inside @supports so that iOS <= 8 display the native arrow */
    background: #fff;
    /* Match-04 */
    /* inside @supports so that Android <= 4.3 display the native arrow */
    border: 1px solid #414142;
    /* Match-05 */
    border-radius: 3px;
    color: #476680;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
  }

  .custom-select select:focus {
    border-color: #aaa;
    /* Match-03 */
  }
}
.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
--------------------------------*/
body {
  background: #fff;
  margin: 1.5em;
  font-family: "Open Sans", Arial, "Helvetica Neue", Helvetica, sans-serif;
}

.calc-demo {
  width: 100%;
  margin: 0 auto;
}

.view-code {
  font-size: 1.25em;
  display: block;
  vertical-align: bottom;
  margin: 2em auto 0.5em;
  width: 100%;
  max-width: 400px;
}
.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: #cc624f;
}
.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: #cc624f;
}

/*--------------------------------
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: "Open Sans", Arial, "Helvetica Neue", Helvetica, sans-serif;
}
.bilateral-calculator-buttons__single-button.bilateral-active {
  border: 2px solid #34a973;
  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 #34a973;
}

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

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

/***********************************************************
Calculator Appearance & Grid Styles
***********************************************************/
/*--------------------------------
Overall Styles
--------------------------------*/
.rate-calculator-outer {
  
  margin: 0 auto;
  background: #476680;
  background: linear-gradient(to bottom, #507390 0%, #354c5f 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: "Avenir Next Condensed", Arial, "Helvetica Neue", Helvetica, sans-serif;
}

.rate-calculator-inner-wrapper {
  padding: 15px 15px 0 15px;
  box-sizing: border-box;
  position: relative;
  z-index: 1;
  border: 2px solid #fff;
  border-bottom: 0;
}
.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__inner:after {
  content: "";
  display: table;
  clear: both;
}
.rate-calculator-top__left {
  width: 100%;
  max-width: 300px;
  margin: 0 auto 30px auto;
  box-sizing: border-box;
}
@media screen and (min-width: 9999px) {
  .rate-calculator-top__left {
    float: left;
    width: 300px;
    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% - 300px);
    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: #9fb5cc;
  margin: 10px 0;
  font-family: "Open Sans", Arial, "Helvetica Neue", Helvetica, sans-serif;
}
.rate-calculator-top__bilateral-injuries {
  margin-bottom: 12px;
  border-bottom: 1px solid #aaa;
  max-width: 438px;
}
.bilateral-calculator-buttons__single-button {
  font-family: "Open Sans", 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: #cc624f;
  border: 1px solid #a0402e;
  border-bottom: 3px solid #a0402e;
  color: #fff;
}
.bilateral-calculator-buttons__single-button.bilateral-active {
  background: #34a973;
  color: #fff;
  top: 2px;
  border: 1px solid #288258;
}

.disability-calculator-buttons__single-button {
  font-family: "Open Sans", 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: #cc624f;
  border: 1px solid #a0402e;
  border-bottom: 3px solid #a0402e;
  color: #fff;
}
.disability-calculator-buttons__single-button:active {
  top: 2px;
  border-bottom: 1px solid #a0402e;
}

.current-disabilities-added-row {
  min-height: 55px;
}

.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__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: 400px;
  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: 400px;
  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: "Open Sans", 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: #cc624f;
  border: 1px solid #a0402e;
  border-bottom: 3px solid #a0402e;
  color: #fff;
}
.marital-status__single-button.marriage-button-active {
  background: #34a973;
  color: #fff;
  top: 2px;
  border: 1px solid #288258;
}

.aid-and-attendance-status__single-button {
  font-family: "Open Sans", 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: #cc624f;
  border: 1px solid #a0402e;
  border-bottom: 3px solid #a0402e;
  color: #fff;
}
.aid-and-attendance-status__single-button.aa-button-active {
  background: #34a973;
  color: #fff;
  top: 2px;
  border: 1px solid #288258;
}

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

.reset-calculator-button {
  display: block;
  width: 220px;
  padding: 15px;
  border-radius: 4px;
  background: #cc624f;
  color: #fff;
  font-weight: bold;
  text-align: center;
  transition: 0.2s;
  margin-left: auto;
  margin-right: auto;
  border: 1px solid #b44834;
  border-bottom: 3px solid #b44834;
  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: 300px;
  margin: 0 auto 20px auto;
  box-sizing: border-box;
}
@media screen and (min-width: 9999px) {
  .rate-calculator-bottom__left {
    float: left;
    width: 300px;
    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% - 300px);
    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;
}