:root {
  /* Color Variables */
  --color-white: #fff;
  --color-dark-blue: #394F7C;
  --color-blue: #2574A9;
  --color-dark-gray-2: #202020;
  --color-blueheading : #222B45; 
  --color-black : #131316;
  
  /* Size Variables */
  --size-small: 12px;
  --size-normal: 13px;
  --size-medium: 14px;
  --size-xlarge: 27px;
  
  /* Font Variables */
  --family-sans: "Open Sans", sans-serif;  
}

.family-nav-section a {
  padding: 2px;
  padding-left: 70px; 
  padding-right: 10px;
  background-image: url(images/attention.png);
  color: black;
}

.family-nav-section.complete a {
  padding-left: 70px;
  padding-right: 10px;
  background-image: url(images/checkmark.png);
  color: black;
}

.family-nav-container {
  background-color: #fff;
}

.family-nav-section {
  font-weight: 400;
  font-size: var(--size-small);
  padding: 4px;
}

.family-nav-header a {
  padding-top: 1px;
  font-size: var(--size-small);
  font-weight: 600;
}

.family-nav-header.selected {
  background-position: right 15px;
  background-repeat: no-repeat;
}

#mainColumnHeader .btn {
  width: auto;
  height: auto;
  padding: .6rem 1.2rem; 
  box-shadow: 0 2px 3px rgba(0,0,0,.08); 
  margin: 4px;
  font-size: var(--size-normal);
  background: white;
}

#mainColumnHeader .btn:hover {
  width: auto;
  height: auto;
  font-size: var(--size-normal);
  background: #f5f5f5;
  color: var(--color-dark-gray-2);
}

#mainColumnHeader .primary {
  background: var(--color-dark-blue);
  color: white;
  width: auto;
  height: auto;
  margin: 4px;  
  font-size: var(--size-normal);
  padding: .6rem 1.2rem; 
  box-shadow: 0 2px 3px rgba(0,0,0,.08); 
}

#mainColumnHeader .primary:hover {
  background: #2c62d3 !important;
  color: #fff;
}

#mainColumnFooter .btn {
  background: white;
  width: auto;
  height: auto;
  padding: .6rem 1.2rem;
  box-shadow: 0 2px 3px rgba(0,0,0,.08); 
  margin: 4px;
  font-size: var(--size-normal); 
}

#mainColumnFooter .btn:hover {
  width: auto;
  height: auto;
  font-size: var(--size-normal);
  background: #f5f5f5;
  color: var(--color-dark-gray-2);
}

#mainColumnFooter .primary {
  width: auto;
  height: auto;
  margin: 4px;
  font-size: var(--size-normal);
  background: var(--color-dark-blue);
  color: white;
  padding: .6rem 1.2rem; 
  box-shadow: 0 2px 3px rgba(0,0,0,.08);  

}

#mainColumnFooter .primary:hover {
  background: #2c62d3 !important;
  color: #fff;
}

body,
td {
  font-family: var(--family-sans);
  color: #222
}

body .x-btn button,
body .btn,
body .btnImportant,
body .btnDisabled,
body .btnCancel,
body .menuButton .menuButtonButton,
body .menuButton .menuButtonMenu a,
body .menuButton .menuButtonMenu input.theOption,
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--family-sans);
}

.textHeader p span,
.textHeader p strong,
.text-content p span,
div .sfdc_richtext,
div .sfdc_richtext span,
div .sfdc_richtext a,
button.backToDashboardBtns {
  font-family: var(--family-sans) !important;
}

.required {
  background-color: #f5deb33b;
  padding: 6px;
  border-radius: 3px;
  border: 1px solid #bcbcc5;
}

.labelCol {
  width: 250px !important;
}

input {
  border-radius: 3px;
  padding: 6px;
  border: 1px solid #bcbcc5;
}

.bPageBlock .labelCol,
body .print .topics-label {
  font-weight: normal;
}

.blockbody .detailList th {
  font-size: var(--size-normal);
  padding: 5px;
  background-color: #E4E4E7;
  vertical-align: middle;
  text-wrap: wrap;
}

.fp .blockbody .detailList tr td {
  font-size: var(--size-normal);
}

.fp .blockbody .detailList tr td textarea {
  width: 95%;
  border-radius: 3px;
}

.fp .blockbody .pbSubheader {
  background-color: white;
}

body .bPageBlock .pbBody .pbSubheader {
  padding: var(--size-small) 0;
  border: 1px solid #e1e1e1;
  border-radius: 5px 5px 0 0;
  border-left: 0;
  border-right: 0;
  background-color: #008C9F0F;
}

.withPageBackground .bPageBlock .pbBody {
  margin-top: 20px !important;
}

.apexp .bPageBlock.apexDefaultPageBlock .pbBody .pbSubheader h3 {
  font-size: 0.9em;
  color: #393536;
  font-weight: bold;
}

.apexp .bPageBlock.apexDefaultPageBlock .pbBody .pbSubheader {
  color: white;
  border-top: 1px solid #e1e1e1;
}

.apexp .bPageBlock.apexDefaultPageBlock .pbBody .pbSubheader .showListButton {
  background-position: 1px 0px;
}

.apexp .bPageBlock.apexDefaultPageBlock .pbBody .pbSubheader .hideListButton {
  background-position: 1px -11px;
}

.pbSubheader.brandTertiaryBgr.first.tertiaryPalette {
  padding-left: var(--size-small);
}

#mainColumnHeader {
  margin-bottom: 20px;
}

#mainColumnHeader h2 span {
  font-size: var(--size-small);
  text-transform: uppercase;
  line-height: 2;
  color: #395383;
  letter-spacing: .3px;
  font-weight: bold;
  padding-top: 5px;
}

#mainColumnHeader h2 {
  font-weight: lighter;
  font-size: 28px;
}

.helpmessage {
  max-width: 40rem;
  line-height: 1.4;
  font-size: var(--size-normal);
  padding: 20px;
  border-radius: 4px;
  background-color: #eee;
  padding: 1rem;
  margin-top: 10px;
}

.otherAssetHelpDesc {
  margin-bottom: 20px;
}

.fp .blockbody .detailList {
  background-color: #FFFF;
}

.pageBlock {
  background: #FFFF;
}

body .bPageBlock,
body #bodyCell .bResource .secondaryPalette,
body .secondaryPalette.bPageBlock,
body .individualPalette .secondaryPalette.bPageBlock {
  border-bottom: 1px solid #FFFF;
  border-left: none;
  border-right: none;
}

#pageBackground {
  padding: 0 2rem 0 0;
}

#mainColContent {
  padding-bottom: 1rem;
}

.block {
  padding: 1rem 0;
  /* Note that this causes some problems when the block has a blockheader. We can discuss more... */
  border: 1px solid #e4e4e4;
  box-shadow: 0 4px var(--size-small) rgba(0, 0, 0, .08);
}

.blockheader {
  background: white;
}

.blockheader .collapsable {
  border-right: none;
  background: #fff url('./images/new/collapsable.png') no-repeat 10px 10px;
  background-repeat: no-repeat;
}

.blockheader .collapsable.closed {
  background: #fff url('./images/new/collapsableClosed.png') no-repeat 10px 10px;
  background-repeat: no-repeat;
}

th {
  font-weight: 600;
}

.btn,
.btnDisabled,
.resultsList .btn,
.btn.disabled:hover,
.actionButtons .btn,
.actionButtons .btn.disabled:hover {
  font: normal var(--size-normal) var(--family-sans);
  font-weight: normal;
  color: var(--color-dark-gray-2);
  padding: .6rem 1.2rem;
  width: auto;
  height: auto;
  border-radius: 5px;
  border: 1px solid #e8e8e8;
}

.btn.secondary,
.btn.secondary.disabled:hover {
  background: #e5f0f8;
  color: #394f7c;
  box-shadow: none;
  padding: .4rem 1rem; 
  font-size: .9rem; 
  border: none; 
  font-weight: bold;
}

.btn.secondary:hover {
  background: #d1e0ec;
}

select {
  padding: 4px;
}

#pfsChecklist {
  padding-top: 0;
}

.text {
  color: var(--color-blue);
  display: flex;
  align-items: center;
}

.familyHelp_UpperRow {
  width: 48rem;
}

.familyHelp_LowerRow {
  width: 63rem;
}

.familyHelp__Deadlines,
.familyHelp__PFS,
.familyHelp__Payment,
.familyHelp__PFSStatus,
.familyHelp__Submission,
.familyHelp__DocumentStatus {
  height: 1px;
  justify-content: center;
}

.familyHelp--text a {
  color: var(--color-blue);
  text-decoration: none;
  font-weight: 600;
}

.familyHelp--text {
  text-align: center;
  margin-top: 0.5em;
}

.familyHelp__Title {
  font-weight: 300;
  font-size: var(--size-xlarge);
  color: var(--color-dark-gray-2);
}

.resultsDetail__body {
  padding: 2em;
}

.resultsDetail__body p {
  padding-bottom: 1em;
}

.resultsDetail__title {
  padding-top: 1em;
  font-size: 22px;
  font-weight: 700;
  color: var(--color-dark-gray-2);
  margin: 0 0 1em 1em;
  width: 33rem;
}

.resultsDetail__title--subtext {
  margin: 1em 0 0 2em;
  font-weight: 600;
  font-size: 10px;
  color: var(--color-dark-gray-2);
}

.content {
  color: var(--color-blueheading);
  font-weight: 400;
  font-size: 15px;
  padding: 1em;
  width: 37.5rem;
  line-height: 1.5;
  margin-top: -20px;
  margin-left: 5px;
}

.familyHelp__LearnMore--item {
  display: flex;
  flex-direction: column;
  border-radius: 4px;
  align-items: center;
  margin: 0.5em;
  padding: 2em;
  border: 1px solid #E8E8E8;
  box-shadow: 0px 3px 6px RGBA(0, 0, 0, .15);
  flex: 0 1 auto;
}

.family-documents-collapsible>h2 {
  display: flex;
  cursor: pointer;
  font-size: 1.5em;
  padding: 10px;
}

.family-documents-collapsible {
  width: 64rem;
}

.family-documents-collapsible--helpcenter>h2 {
  color: var(--color-dark-gray-2);
  font-weight: 400;
}

.arrow-right {
  width: 0;
  height: 0;
  border-left: 7px solid var(--color-blue);
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  cursor: pointer;
  vertical-align: middle;
  display: inline-block;
}

.family-documents-body {
  padding-left: 3.8em;
  padding-right: 3.5em;
  padding-bottom: 10px;
  font-weight: 500;
  font-size: var(--size-medium);
}

p {
  font-size: var(--size-medium);
  max-width: 50rem;
  line-height: 1.5;
  margin-bottom: .6rem;
}

.searchResults__total {
  font-weight: 600;
  flex-grow: 1;
  color: var(--color-dark-gray-2);
  margin: 1em;
}

.searchResults__pagination,
.searchResults__pagination a {
  justify-content: center;
  flex-grow: 1;
  color: var(--color-dark-gray-2);
  font-weight: 600;
  margin-top: var(--size-normal);
}

.help_Center {
  font-weight: 600;
  color: var(--color-blue);
  font-size: var(--size-medium);
  margin: 1.5em;
}

.help_Center a {
  font-weight: 600;
  color: var(--color-blue);
  font-size: var(--size-medium);
}

.financial {
  font-weight: 300;
  font-size: var(--size-xlarge);
  color: var(--color-dark-gray-2);
  line-height: 32px;
  margin: 0.5em;
}

.searchResults__body {
  margin: 1em;
}

.searchResults__item--title {
  font-size: 16px;
  color: var(--color-dark-gray-2);
  font-weight: 700;
  padding: .5em 0;
  margin-top: 0.5em;
}

.searchResults__item--description {
  font-weight: 400;
  font-size: var(--size-medium);
  color: var(--color-blueheading);
}

.searchResults__item--footer {
  font-weight: 600;
  font-size: 10px;
  color: var(--color-dark-gray-2);
  margin-bottom: 0.5em;
  margin-top: 0.5em;
}

#resultsDetail {
  margin-left: 2px;
}

/* Family Search Component Styles */

.helpCenter__search {
  display: flex;
  flex-grow: 1;
  justify-content: left;
  margin: .5em;
  align-items: center;
}

.helpCenter__search>#search__input>input {
  font-size: 1.2em;
  line-height: 1.7;
  font-weight: 400;
  color: #A0A0AB;
}

.helpCenter__search input {
  border-radius: 4px;
  padding: 6px;
  width: 280px;
  height: 32px;
  background: #FAFAFA;
  border: 1px solid #E4E4E7;
  margin-left: 3em;
  margin-top: 2em;
}

.helpCenter__search--button {
  border-radius: 5px;
  margin: 0 8px;
  padding: 1em 1em;
  cursor: pointer;
  background: var(--color-dark-blue);
  height: 18px;
  width: 18px;
  margin-top: 2.2em;
}

.helpCenter__search--button img {
  width: 16px;
  height: 16px;
}

/* Family Portal Contact Panel Component Styles */
.contactPortal__title {
  color: white;
  font-weight: bold;
  font-size: 1.4em;
  padding: .5em 0em;
  max-width: 33%;
  margin: auto;
  background-color: var(--color-dark-blue);
  text-align: center;
  border-radius: 0;
  cursor: pointer;
  box-shadow: 0px -3px 15px -5px darkgray;
  position: relative;
  height: 20px;
}

.contactPortal__detail--open {
  background-color: var(--color-dark-blue);
}

.contactPortal__detail--footer {
  height: 10px;
  background-color: var(--color-dark-blue);
}

.error-messages {
  border: 1px solid #FFE65F;
  background-color: #FFFFCC;
  padding: 1rem;
  margin: 1rem auto;
  line-height: 1.4;
  border-radius: 5px;
  display: flex;
  margin-top: 0px;
}

.error-messages h4 {
  color: black;
  font-size: .9rem;
}

.error-messages ul {
  padding-left: 0px;
}

.error-messages ul li {
  margin-top: .2rem;
}

/*****************Payment Pages***********/
.message .errorM2 {
  border-radius: 8px 0px 0px 0px;
  border: 1px solid #FFC83E;
  width: 340px;
  height: 89px;
  padding: 16px 0px 0px 0px;
  gap: 8px;
  background: #FFFED1 !important;
}

.message {
  margin-left: 0px;
  background-image: none;
}

.errorM2 {
  border: 1px solid #FFC83E !important;
  max-width: 600px !important;
  font-size: var(--size-small);
  font-weight: 400;
  line-height: 16px;
  text-align: left;
  background-image: none !important;
}

.errorM2 .msgIcon {
  background-image: url(/img/msg_icons/warning24.png);
  background-image: "/img/msg_icons/warning24.png";
  background-position: 0 0;
  width: 24px;
  height: 24px;
  font-size: 24px;
  font-weight: 900;
  line-height: 16px;
  text-align: center;
  margin-left: 9px;
}

.messageCell {
  padding-bottom: 0px !important;
  padding-top: 0px !important;
}

.btn.blueButtonCss:hover {
  background: #2c62d3 !important;
  color: #fff;
}

.btn.whiteButtonCSS:hover {
  width: auto;
  height: auto;
  padding: .6rem 1.2rem;
  font-size: var(--size-normal);
  background: #f5f5f5;
  color: var(--color-dark-gray-2);
}

.btn.whiteButtonCSS {
  width: auto;
  height: auto;
  padding: .6rem 1.2rem;
  font-size: var(--size-normal);
  background: white;
  box-shadow: none;
  margin-left: 5px;
  font-weight: 400;
}

.btn.blueButtonCss {
  width: auto;
  height: auto;
  padding: .6rem 1.2rem;
  font-size: var(--size-normal);
  background: var(--color-dark-blue);
  color: white;
  box-shadow: none;
  margin-left: 5px;
  font-weight: 400;
}

.paymentSelect {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  padding: 0;
  gap: 32px;
  flex: none;
  order: 0;
  flex-grow: 0;
}

.paymentSelectSection {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  padding: 0;
  width: 562px;
  height: 32px;
  flex: none;
  order: 0;
  align-self: stretch;
  flex-grow: 0;
}

.paymentSelectheading {
  width: 288px;
  height: 32px;
  font-style: normal;
  font-weight: 300;
  font-size: var(--size-xlarge);
  line-height: 32px;
  color: var(--color-dark-gray-2);
  flex: none;
  order: 0;
  flex-grow: 0;
}

.radioOption {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0;
  width: 562px;
  height: 64px;
  flex: none;
  order: 1;
  align-self: stretch;
  flex-grow: 0;
}

.radio-label {
  width: 536px;
  height: 24px;
  font-style: normal;
  font-weight: 600;
  font-size: var(--size-medium);
  line-height: 24px;
  color: #51525C;
  flex: none;
  order: 1;
  flex-grow: 0;
}

.totalPayment {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0;
  width: 562px;
  height: 20px;
  flex: none;
  order: 2;
  align-self: stretch;
  flex-grow: 0;
}

.totalPaymentSelect {
  width: 300px;
  height: 20px;
  font-style: normal;
  font-weight: 700;
  font-size: 24px;
  line-height: 20px;
  color: var(--color-dark-blue);
  flex: none;
  order: 0;
  flex-grow: 0;
}

.radioOptionLabel {
  width: 536px;
  height: 24px;
  font-style: normal;
  font-weight: 600;
  font-size: var(--size-medium);
  line-height: 24px;
  color: #51525C;
  cursor: pointer;
}

#waiverInfo {
  margin-left: 80px;
  margin-top: 16px;
  margin-bottom: 16px;
  display: block;
}

#processingPayment {
  font-weight: bold;
  text-align: center;
  padding-bottom: 5rem;
}

.paymentButtonMessage {
  font-style: normal;
  font-weight: 400;
  font-size: var(--size-medium);
  line-height: 19px;
  color: var(--color-blueheading);
  margin-top: 16px;
}

.paymentFieldError {
  display: block;
  color: #c00 ;
  margin-bottom: 3px
}

.tryingToPayOther {
  border-radius: 5px;
  margin: 10px 0px;
  padding: 15px 0px;
}

.tryingToPayOther div {
  margin: 20px;
  padding: 30px;
  font-size: 1.2em;
  background-color: #FFF;
  border-radius: 5px;
  border-width: 1px;
  border-style: solid;
  border-color: #9C9C9C;
  display: inline-block;
}

.tryingToPayOther div:hover {
  background-color: #F0F0F0;
  cursor: pointer;
}

.tryingToPayOther div a:hover {
  text-decoration: none;
}

.disabledButton {
  color: gray !important;
}

.paymentButtonTable {
  margin-left: 246px;
  margin-top: 22px;
}

.paymentButtonTableRight {
  margin-top: 32px;
}

.paymentButtonTableLeft {
  margin-top: 32px;
}

.boxHeader {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  padding: 0px;
  gap: 32px;
  width: 606px;
  flex: none;
  order: 0;
  flex-grow: 0;
}

.innerBox {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  padding: 0px;
  gap: 32px;
  width: 100%;
  height: 32px;
  margin-left: 400px;
}

.leftPart {
  width: 151px;
  height: 32px;
  font-size: var(--size-xlarge);
  font-weight: 300;
  line-height: 32px;
  text-align: left;
  color: var(--color-dark-gray-2);
}

.rightPart {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  padding: 0px;
  gap: 8px;
  width: 202px;
  height: 32px;
}

.button-default {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  padding: 0px;
  width: 71px;
  height: 32px;
}

.button-setup {
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 8px;
  width: 30px;
  height: 32px;
  background: var(--color-white);
  border: 1px solid #D1D1D6;
  border-radius: 4px;
}

.button-text {
  font-style: normal;
  font-weight: 600;
  font-size: var(--size-small);
  line-height: 16px;
  text-align: center;
  color: #3F3F46;
}

.button-primary {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  padding: 0px;
  width: 123px;
  height: 32px;
}

.button-primary-setup {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 8px;
  width: 107px;
  height: 16px;
  background: var(--color-dark-blue);
  border-radius: 4px;
}

.button-primary-text {
  font-style: normal;
  font-weight: 600;
  font-size: var(--size-small);
  line-height: 16px;
  text-align: center;
  color: var(--color-white);
}

.textHeader {
  width: 606px;
  height: 195px;
  font-style: normal;
  font-weight: 400;
  font-size: var(--size-medium);
  line-height: 19px;
  color: var(--color-blueheading);
  flex: none;
  order: 0;
  flex-grow: 0;
  margin-bottom: 32px;
}

.submitUpdate {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0px;
  gap: 16px;
  width: 606px;
  height: 250px;
  flex: none;
  order: 2;
  flex-grow: 0;
  margin-bottom: 16px;
}

.submitUpdate .text-title {
  width: 210px;
  height: 20px;
  font-style: normal;
  font-weight: 700;
  font-size: 18px;
  line-height: 20px;
  color: var(--color-dark-blue);
  flex: none;
  order: 0;
  flex-grow: 0;
}

.submitUpdate .text-content {
  width: 606px;
  height: 214px;
  font-style: normal;
  font-weight: 400;
  font-size: var(--size-medium);
  line-height: 19px;
  color: var(--color-blueheading);
  flex: none;
  order: 1;
  flex-grow: 0;
}

.termsAndCondition {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0px;
  width: 606px;
  height: 93px;
  flex: none;
  order: 3;
  flex-grow: 0;
}

.termsAndCondition .text-title {
  width: 196px;
  height: 20px;
  font-style: normal;
  font-weight: 700;
  font-size: 18px;
  line-height: 20px;
  color: var(--color-dark-blue);
  flex: none;
  order: 0;
  flex-grow: 0;
}

.termsAndCondition .text-content {
  width: 606px;
  height: 57px;
  font-style: normal;
  font-weight: 400;
  font-size: var(--size-medium);
  line-height: 19px;
  color: var(--color-blueheading);
  flex: none;
  order: 1;
  flex-grow: 0;
}

.buttons-container {
  position: absolute;
  bottom: 16px;
  /* Adjust distance from bottom */
  right: 16px;
  /* Adjust distance from right */
  display: flex;
  gap: 8px;
}

.termsAndConditionPage {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0px;
  width: 606px;
  height: 93px;
  flex: none;
  order: 3;
  flex-grow: 0;
}

.termsAndConditionPage .text-title {
  width: 225px;
  height: 20px;
  font-style: normal;
  font-weight: 700;
  font-size: 18px;
  line-height: 20px;
  color: var(--color-dark-blue);
  flex: none;
  order: 0;
  flex-grow: 0;
}

.termsAndConditionPage .text-content {
  width: 606px;
  font-style: normal;
  font-weight: 400;
  font-size: var(--size-medium);
  line-height: 19px;
  color: var(--color-blueheading);
  flex: none;
  order: 1;
  flex-grow: 0;
}

.creditCardOption {
  display: flex;
  flex-direction: column;
  padding: 0;
  gap: 32px;
  width: 606px;
}

.eCheckForm {
  display: flex;
  flex-direction: column;
}

.pbBody td {
  color: var(--color-blueheading) !important;
}

.creditCardHeading {
  font-style: normal;
  font-weight: 300;
  font-size: var(--size-xlarge);
  line-height: 32px;
  color: var(--color-blueheading) !important;
}

.creditCardtextContent {
  width: 606px;
  font-style: normal;
  font-weight: 400;
  font-size: var(--size-medium);
  line-height: 19px;
  color: var(--color-blueheading);
}

.paymentTable {
  width: 100%;
  border-collapse: collapse;
}

.paymentTableLabelCol {
  width: 192px;
  height: 17px;
  font-style: normal;
  font-weight: 600;
  font-size: var(--size-normal);
  line-height: 17px;
  text-align: right;
  color: var(--color-black);
  flex: none;
  order: 0;
  flex-grow: 0;
}

.paymentTableDataCol {
  align-items: center;
}

.paymentFieldRequired input,
.paymentFieldRequired textarea {
  width: 100%;
  padding: 8px;
  font-size: 16px;
  line-height: 24px;
  border: 1px solid #E4E4E7;
  border-radius: 4px;
  background-color: #FAFAFA;
  color: var(--color-blueheading);
}

.paymentFieldError {
  color: #c00 ;
  font-size: var(--size-normal);
}

.paymentTableLabelCol.right-aligned {
  text-align: right;
  padding-right: 0;
  flex: none;
  width: auto;
}

.paymentTableDataCol .placeholder {
  position: absolute;
  left: 16px;
  right: 52px;
  top: 8px;
  font-size: 16px;
  line-height: 24px;
  color: #A0A0AB;
}

.paymentTableDataCol input[type="text"] {
  width: 248px;
  padding: 8px;
  font-size: 16px;
  line-height: 24px;
  border: 1px solid #E4E4E7;
  border-radius: 4px;
  background-color: #FAFAFA;
  color: var(--color-blueheading);
}

.paymentTableHeading {
  font-style: normal;
  font-weight: 700;
  font-size: 16px;
  line-height: 20px;
  color: var(--color-blueheading);
  padding: 8px 0;
}

.paymentFieldRequired {
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  display: flex;
  align-items: center;
  color: #3F3F46;
  gap: 0px;
  border-radius: 4px 4px 4px 4px;
  background: #FAFAFA;
  border: 1px solid #E4E4E7;
}

.table-spacing td {
  padding-right: 20px;
}

.table-spacing tr {
  margin-bottom: 20px;
}

.table-spacing {
  border-spacing: 0px 16px;
}

.button-table-spacing {
  margin-left: 365px;
  margin-top: 16px;
}

.ccCardType {
  width: 266px;
}

.creditCardTotal {
  width: 300px;
  font-style: normal;
  font-weight: 700;
  font-size: 24px;
  line-height: 20px;
  color: var(--color-dark-blue);
  flex: none;
  order: 0;
  flex-grow: 0;
}

.expirationDate {
  display: flex;
}

.expirationMonthSelect {
  height: 40px;
  width: 167px;
}

.expirationYearSelect {
  height: 40px;
  width: 93px;
  margin-left: 8px;
}

.selectCSS {
  width: 266px !important;
  height: 40px !important;
}

.greyBorder {
  border-bottom: 1px solid #E4E4E7;
  width: 192px !important;
}

#thankYou {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  padding: 0px;
  width: 606px;
  height: 32px;
  font-style: normal;
  font-weight: 300;
  font-size: var(--size-xlarge);
  line-height: 32px;
  color: var(--color-dark-gray-2);
}

.completeCSS {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 30px;
  gap: 16px;
  height: auto;
  margin-bottom: 5rem;
}

.completeCSS p {
  width: 606px;
  font-style: normal;
  font-weight: 400;
  font-size: var(--size-medium);
  line-height: 19px;
  color: var(--color-blueheading);
}


#backToDashboardBtn,
.backToDashboardBtns {
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 8px;
  width: 142px;
  height: 32px;
  background: var(--color-white);
  border: 1px solid #D1D1D6;
  border-radius: 4px;
  font-style: normal;
  font-weight: 600;
  font-size: var(--size-small);
  line-height: 16px;
  color: #3F3F46;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.backToDashboardBtns:hover {
  color: #3F3F46;
  text-decoration: none;
  cursor: pointer;
}

.requiredFields {
  color: red;
}

.stateECheck {
  height: 40px;
  width: 266px;
}

.hiddenAsterisk {
  display: none;
}

.feeWaiverCSS {
  font-size: var(--size-medium);
  font-weight: 400;
  line-height: 19px;
  text-align: left;
  color: var(--color-blueheading);
  height: 32px;
  font-style: normal;
  /* margin-left: 342px; */
}

/* start Modal CSS */
.error-message-red {
  font-weight: 500;
  color: red;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

.simplemodal-overlay {
  opacity: 1;
  position: fixed;
  background-color: #1D1A1DB2;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 1001;
}

.modal_section {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1002;
  background-color: #fff;
  width: 80%;
  max-width: 666px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.modal_container {
  border-radius: 4px;
  box-sizing: border-box;
  color: rgb(24, 24, 24);
  display: flex;
  flex-direction: column;
  font-size: var(--size-normal);
  justify-content: center;
  line-height: 19.5px;
  position: relative;
  transition: transform 0.1s linear, opacity 0.1 linear, -webkit-transform 0.1s linear;
}

.modal_header {
  background-color: rgb(255, 255, 255);
  border-bottom: 2px solid rgb(201, 201, 201);
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  box-sizing: border-box;
  color: rgb(24, 24, 24);
  display: block;
  flex-shrink: 0;
  font-size: 18px;
  line-height: 21.5px;
  padding: 32px 32px 75px 32px;;
  height: 88px;
  position: relative;
}

.p-around_medium {
  padding: 32px;
}

.modal_content {
  background-color: rgb(255, 255, 255);
  box-sizing: border-box;
  color: rgb(24, 24, 24);
  font-size: var(--size-normal);
  height: auto;
  line-height: 19.5px;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 32px;
  text-size-adjust: 100%;
}

.modal_footer {
  border-radius: 0 0 4px 4px;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 2px 3px 0px;
  display: block;
  flex-shrink: 0;
  font-size: var(--size-normal);
  line-height: 19.5px;
  padding: 32px;
  text-align: right;
}

.modal_footer .btn.modal-btn-secondary {
  min-width: 81px;
  height: 40px;
  padding: 10px;
  font-size: var(--size-medium);
  font-weight: 600;
  line-height: 16px;
  background: none;
  border: none;
  box-shadow: none;
  color: #70707B;
}

.modal_footer .btn.modal-btn-primary {
  width: 166px;
  height: 40px;
  padding: 10px;
  font-size: var(--size-medium);
  font-weight: 600;
  line-height: 16px;
  background: var(--color-dark-blue);
  color: white;
  margin-left: var(--size-small);
  border: none;
  box-shadow: none;
}

.modal-table-spacing {
  margin-top: 5px;
  margin-bottom: 5px;
}

.modal-table-spacing td {
  padding: 0rem 0.5rem 0.5rem 0rem;
  border-spacing: 0px 16px;
}

.modal-table-spacing td:first-child input[type="checkbox"] {
  height: 20px;
  width: 20px;
}

.modal-header-text {
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1.2;
}

.modal-content-header {
  margin-bottom: 0.5rem;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color:#000000;
}

.font-weight-500 {
  font-weight: 500;
}

.section-header {
  font-size: 15px;
  font-weight: 500;
  padding: 6px 0px 3px 0px;
}

.applicant-table,
.dependent-table {
  margin-top: 5px;
  margin-bottom: 5px;
}

/* end Modal CSS */

/************Top Header********************/

.secondaryNav {
  font-style: normal;
  font-weight: 500;
  font-size: var(--size-normal);
  line-height: 17px;
  text-align: right;
  color: var(--color-black);
}

.secondaryNav .pipe {
  padding-right: 5px;
  border-right: 1px solid #333;
  margin-right: 5px;
  color: var(--color-black);
}

.Incomplete,
.Submitted {
  font-style: normal;
  font-weight: 700;
  font-size: var(--size-normal);
  line-height: 17px;
  text-transform: uppercase;
}

.Incomplete {
  color: #FF7C1D;
}

.Submitted {
  color: #008c9f;
}

.pfsInfo {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  font-size: var(--size-normal);
  font-weight: 500;
  line-height: 17px;
  text-align: left;
  color: var(--color-black);
}

.pfsDetails {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0 16px;
  gap: 8px;
  height: var(--size-xlarge);
}

.headerContainer {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 0;
  width: 100%;
  height: 32px;
  border-bottom: 1px solid #E4E4E7;
  flex: none;
  order: 1;
  align-self: stretch;
  flex-grow: 0;
}

.leftSide {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0 16px;
  gap: 8px;
  width: auto;
  height: 17px;
  flex: none;
  order: 0;
  flex-grow: 0;
}

.tabs {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0;
  width: auto;
  height: 32px;
  flex: none;
  order: 2;
  flex-grow: 0;
}

.tabs ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
}

.tabs ul li {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0;
  margin: 0;
  width: auto;
  height: 32px;
  background: var(--color-white);
  border: none;
}

.tabs ul li a {
  font-size: var(--size-small);
  line-height: var(--size-small);
  height: 32px;
  padding: 8px 16px;
  text-decoration: none;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
  color: #A0A0AB;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
}

.tabs ul li a:hover {
  background-color: #f4fafb;
  color: #a0a0ab;
  border: none;
  height: 32px;
}

.ui-state-active a {
  background: #E7F4F5;
  color: #008C9F !important;
  border: none;
}

.ui-state-inactive a {
  color: #d1d1d6 !important;
  border: none;
  cursor: not-allowed;
}

.tabs ul li.ui-state-inactive a:hover {
  background-color: #f5f5f5;
  color: #d1d1d6;
  height: 32px;
}

.tabs ul li.ui-state-inactive::after {
  content: "";
  display: none;
  background-color: #f5f5f5;
}

.tabs ul li.ui-state-active::after,
.tabs ul li.ui-state-inactive.active::after {
  content: "";
  display: block;
  width: 100%;
  height: 8px;
  background: #008C9F;
  border: none;
  position: relative;
}

.hyperlinkCSS {
  color: var(--color-black);
  text-decoration: none;
}

.selectBox {
  color: #000;
  border: 1px solid #cacaca;
  padding: 4px 6px;
  border-radius: 5px;
  background-color: whitesmoke;
  font-family: var(--family-sans);
}


/***********Message****************/
/* Family Messages Edit page  */
.returnLink span {
  padding-left: 5.6%;
  margin-top: 4%;
  display: block;
  font-weight: 600;
  color: var(--color-blue);
  font-size: var(--size-medium);
}

.returnLink span a {
  font-weight: 600;
  color: var(--color-blue);
  font-size: var(--size-medium);
}

.pbHelp {
  display: none;
}

.fp.pageTitle .blockheader h2 {
  display: contents;
  width: 0px;
  height: 0px;
}

.apexp .detailList .list .headerRow th {
  display: table-cell;
}

.firstBlock .pbSubsection .detailList tbody tr .data2Col span {
  border-bottom: 2px solid #E4E4E7;
}

#pageBackground {
  display: flex;
  gap: 10px;
  flex-direction: column;
}

.fp.pageTitle .blockheader h2 label {
  font-family: var(--family-sans);
  font-size: var(--size-xlarge);
  font-weight: 300;
  line-height: 32px;
  text-align: left;
}

body .bRelatedList .bPageBlock .pbHeader {
  border-top: 1px solid #F4F4F5;
}

.firstBlock table tbody tr {
  display: flex;
  justify-content: center;
  align-items: center;
}


.block .blockbody .firstBlock .detailList tbody tr th {
  font-family: var(--family-sans);
  display: inline-block;
  font-size: var(--size-normal);
  font-weight: 400;
  line-height: 17px;
  text-align: right;
  color: var(--color-black);
  margin: 0px;
}

.block .blockbody .firstBlock .detailList tbody tr td {
  font-family: var(--family-sans);
  display: inline-block;
  font-size: var(--size-normal);
  overflow-wrap: break-word;
  font-weight: 600;
  line-height: 17px;
  text-align: left;
  color: var(--color-black);
}

.block .nopadding .detailList .tableBody .tableData td {
  padding-left: 8px;
  padding-right: 8px;
  font-family: var(--family-sans);
  font-size: var(--size-normal);
  font-weight: 500;
  line-height: 17px;
  text-align: left;
  color: var(--color-black);
  word-wrap: break-word;
}

.block .blockbody .detailList tbody td .pbButton {
  text-align: right;
}

.pbButton .btn {
  padding: 8px !important;
  border-radius: 4px;
  background: var(--color-white);
  border: 1px solid #D1D1D6;
  font-family: var(--family-sans);
  font-size: var(--size-small);
  font-weight: 600;
  line-height: 16px;
  text-align: center;
  color: var(--color-blue);
}

body .bRelatedList .bPageBlock {
  border: none;
  background: var(--color-white);
}

body .bRelatedList table.list tr.headerRow th {
  display: table-cell !important;
}

body .secondaryPalette.bPageBlock {
  border: none;
  background: var(--color-white);
}

.pbHeader {
  padding-inline: 0;
  border-radius: 5px 5px 0px 0px;
  border-top: 1px solid #f4f4f5;
}

.apexp .bPageBlock .detailList .list {
  border: none;
  padding-top: 16px;
  padding-bottom: 16px !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
  border-radius: 0px 0px 5px 5px;
  font-family: var(--family-sans);
  font-size: var(--size-medium);
  font-weight: 400;
  line-height: 19px;
  text-align: left;
  color: var(--color-black);
}

body .bRelatedList .bPageBlock .pbButton .btn {
  width: 91px;
  box-shadow: none;
  margin-right: 3px;
}

.apexp .bPageBlock .pbHeader .btn {
  width: 59px;
  box-shadow: none;
  border: 1px solid #D1D1D6;
}

body .pbBody table.list tr.headerRow th:first-child {
  font-family: var(--family-sans);
  font-size: var(--size-medium);
  font-weight: 400;
  line-height: 19px;
  text-align: left;
}

.attachmentHelp {
  display: block;
  width: 484px;
  height: 34px;
  margin-bottom: 22px;
  font-family: var(--family-sans);
  font-size: var(--size-normal);
  font-weight: 400;
  line-height: 17px;
  text-align: left;
  color: var(--color-black);
}

body .bRelatedList .bPageBlock .pbBody {
  background: none;
}

.apexp .bPageBlock.apexDefaultPageBlock .pbHeader>table {
  width: 484px;
  height: 48px;
  padding: 8px 16px 8px 16px;
  gap: 8px;
  border-bottom: 1px solid #F4F4F5;
}

body .bPageBlock {
  margin: 0px;
}

/* Family Messages New Page Design  */
.resultsListContainer {
  margin-left: 77px;
  margin-right: 77px;
}

.fp .blockheader {
  margin-top: 0px;
}

.blockheader h2 {
  font-weight: 300;
  line-height: 32px;
  font-size: var(--size-xlarge);
}

.fp.pageTitle .requiredMarginBlock {
  margin-bottom: 24px;
  background: none;
}

.studentBorder {
  border: 1px solid #D1D1D6;
}

.bPageBlock .labelCol,
body .print .topics-label {
  padding: 0px;
}

.checkboxIsStudentRequired {
  display: flex;
  margin-top: 0px;
  margin-bottom: 24px;
}

.bPageBlock.apexDefaultPageBlock .pbBottomButtons {
  border: none;
}

body .bEditBlock .pbBottomButtons,
body .apexp .bPageBlock.apexDefaultPageBlock .pbBottomButtons {
  border: none;
}

.apexp .bPageBlock.apexDefaultPageBlock .pbBottomButtons>table {
  border: none;
}

body .bEditBlock .pbBottomButtons,
body .apexp .bPageBlock.apexDefaultPageBlock .pbBottomButtons {
  margin-top: 0px;
  margin-bottom: 5rem;
}

.please-wait-message {
  display: none;
}

.wait-message {
  font-size: 4em;
  margin: 5px;
}

.bPageBlock .pbBottomButtons>table>tbody>tr>td {
  padding: 0px;
}

.buttonCancel .btn {
  width: 71px;
  height: 32px;
  padding: 0px 0px 0px 0px;
  text-align: center;
  border: 1px solid rgba(209, 209, 214, 1);
  background: rgba(255, 255, 255, 1);
  box-shadow: none;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  -ms-box-shadow: none;
  font-family: var(--family-sans);
  font-size: var(--size-small);
  font-weight: 600;
  line-height: 16px;
  text-align: center;
  color: #3F3F46;
}

body .bPageBlock .pbTitle {
  padding: 0px;
}

.buttonSave .btn {
  width: 74px;
  height: 32px;
  padding: 0px 0px 0px 0px;
  color: white;
  background: rgba(57, 79, 124, 1);
  box-shadow: none;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  -ms-box-shadow: none;
  font-family: var(--family-sans);
  font-size: var(--size-small);
  font-weight: 600;
  line-height: 16px;
  text-align: center;
}

.fp.pageTitle .blockheader h2 {
  font-size: var(--size-xlarge);
  color: #000;
}

.firstBlock .pbSubsection .detailList tbody tr td span {
  display: block;
  border-bottom: 2px solid #E4E4E7;
  margin-left: 8px;
}

.labelCol {
  width: 320px !important;
}

body .bPageBlock,
body .secondaryPalette.bPageBlock,
body .individualPalette .secondaryPalette.bPageBlock {
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
}

.bPageBlock .pbBottomButtons table {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}

.selectBox apex:selectList {
  width: 350px;
  color: blue;
}

.withPageBackground .bPageBlock .pbBody {
  margin-top: 0px;
}

.Input-fields .pbSubsection .detailList tbody tr th label {
  font-weight: 600;
  font-size: var(--size-normal);
  line-height: 17px;
}

.newapplicantName {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  width: 320px;
  height: 17px;
  gap: 6px;
  margin-bottom: 8px;
  color: var(--color-black);
  font-weight: 600;
  font-size: var(--size-normal);
  line-height: 17px;
}

.checkboxIsStudentRequired input {
  width: 20px;
  height: 20px;
  gap: 0px;
}

.checkboxIsStudentRequired label {
  width: 320px;
  color: #51525C;
  height: 24px;
  gap: 0px;
  font-weight: 600;
  font-size: var(--size-medium);
  padding-left: 10px;
}

.pfsQuestion {
  width: 320px;
  padding: 0px;
  height: 40px;
  margin-bottom: 24px;
  gap: 0px;
  padding-left: 16px;
  border: 1px solid #E4E4E7;
  font-size: 16px;
}

select option[value="null"] {
  color: #A0A0AB;
}

select option[value=""] {
  color: #A0A0AB;
}

.caseReason {
  display: flex;
  align-items: center;
  width: 320px;
  height: 40px;
  font-size: 16px;
  padding-left: 16px;
  gap: 0px;
  border-radius: 4px 4px 4px 4px;
  border: 1px 0px 0px 0px;
  background: #FAFAFA;
  margin-bottom: 24px;
  border: 1px solid #E4E4E7;
}

@media only screen and (min-width: 279px) {
  body .bPageBlock .pbBody .dataCol {
    border-right-color: transparent;
    width: auto !important;
    padding-left: 0px !important;
    padding-right: 0px !important;
  }
}

/* Applied Family Messages page css */
.blockMessages {
  box-shadow: none;
  border: none;
  padding: 0px;
  display: grid;
  gap: 32px;
  border-radius: 8px;
  margin: 0;
}

#pageBackgroundMessages {
  display: grid;
  padding: 32px;
  gap: 32px;
  border-radius: 8px;
}

.fp.pageTitle .blockheader h2 {
  font-family: var(--family-sans);
  font-size: var(--size-xlarge);
  font-weight: 300;
  line-height: 32px;
  text-align: left;
  color: var(--color-dark-gray-2)
}

.label-message1 {
  height: 57px;
  font-family: var(--family-sans);
  font-size: var(--size-medium);
  font-weight: 400;
  line-height: 19px;
  text-align: left;
  color: var(--color-black);
}

body .bRelatedList .pbTitle h3,
body .bPageBlock .pbTitle h2,
body .bPageBlock .pbTitle h3,
body .bSubBlock h3.lbHeader {
  color: var(--color-blueheading);
  font-size: 14.4px;
}

.label-message1 label {
  display: block;
  width: 450px;
  height: 57px
}

.blockMessages .blockheader {
  background: white;
  padding: 0;
  border: none;
  text-align: left;
  margin-top: 32px;
}

.blockbody .detailList.fpTable td {
  width: 62px;
  height: 24px;
  color: var(--color-dark-gray-2);
  font-family: var(--family-sans);
  font-size: var(--size-small);
  font-weight: 500;
  line-height: 16px;
}

.fp {
  padding-bottom: 0px;
  margin: 0;
}

.fp .blockheader {
  margin: 0;
}

.blockMessages .fp {
  margin-bottom: 0;
}

#messageI label {
  height: 57px;
  font-family: var(--family-sans);
  font-size: var(--size-medium);
  font-weight: 400;
  line-height: 19px;
  text-align: left;
  color: var(--color-black);
}

.btns {
  display: flex;
  flex-direction: row;
  gap: 8px;
}

.btns .btn-1 .btn {
  width: auto;
  height: auto;
  padding: .6rem 1.2rem !important;
  font-size: 14px;
  font-weight: normal;
  border: none;
  display: flex;
  background: var(--color-dark-blue);
  color: var(--color-white);
}

.btns .btn-1 .btn:hover {
  background-color: #2C62D3;
}

.btns .btn-2 .btn {
  background: var(--color-white);
  color: #3F3F46;
  border: 1px solid #D1D1D6;
  width: 176px;
  font-weight: 600;
  height: 32px;
}

#firstTd {
  padding: 4px 16px 4px 16px;
  gap: 6px;
}

#firstTd span {
  color: var(--color-blue);
  font-family: var(--family-sans);
  font-size: var(--size-small);
  font-weight: 600;
  line-height: 16px;
}

.apexp .detailList .list td,
.apexp .detailList .list th,
.apexp .editPage .bPageBlock .detailList .list tr td,
.apexp .editPage .bPageBlock .detailList .list tr th {
  border-bottom: 2px solid #E4E4E7;
}

/**************Family Awards***************/
* {
  font-family: var(--family-sans) !important;
}

.awardContainer {
  width: 1072px;
  padding: 32px 0px 0px 0px;
  gap: 32px;
  margin-bottom: 109px !important;
  border-radius: 8px 0px 0px 0px;
  margin-left: 80px !important;
}

.awardHeading {
  font-family : var(--family-sans) !important;
  margin-bottom: 32px;
  width: 1008px;
  font-size: var(--size-xlarge);
  font-weight: 300;
  line-height: 32px;
  text-align: left;
  color: var(--color-dark-gray-2);
}

.awardsMessage {
  width: 1008px;
  height: 95px;
  gap: 0px;
  font-family: var(--family-sans);
  font-size: var(--size-medium);
  font-weight: 400;
  line-height: 19px;
  text-align: left;
  color: var(--color-black);
}

.awardsMessageContent {
  width: 427px;
  gap: 0px;
  font-family: var(--family-sans);
  font-size: var(--size-medium);
  font-weight: 400;
  line-height: 19px;
  text-align: left;
  color: var(--color-black);
}

.slds-scope .slds-p-horizontal--large,
.slds-scope .slds-p-horizontal_large {
  padding-right: 0px !important;
  padding-left: 0px !important;
}

.slds-scope .slds-card {
  border-left: none !important;
  border-right: none !important;
  border-top: none !important;
  margin: 16px;
  border-radius: 0px !important;
  border-bottom: 1px solid #e4e4e7 !important;
  background: var(--color-white) !important;
}

.slds-scope .slds-card__header {
  padding: 0px !important;
}

.slds-scope .slds-m-top--large,
.slds-scope .slds-m-top_large {
  margin-top: 0px !important;
}

.slds-scope .slds-card__body--inner,
.slds-scope .slds-card__body_inner,
.slds-scope .slds-card__footer,
.slds-scope .slds-card__header {
  margin: 0px !important;
  padding-left: 0px !important;
  padding-right: 0px !important;
}

.applicantName {
  width: 1008px;
  height: 52px;
  margin-top: 32px !important;
  padding: 16px !important;
  gap: 0px;
  border-radius: 5px 5px 0px 0px;
  background: #e7f4f5;
  border: 1px solid #f4f4f5;
  color: #222b45;
  font-family : var(--family-sans) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 20px !important;
  text-align: left;
}

.applicantAwardDetails {
  width: 1008px;
  gap: 16px;
  border-radius: 0px 0px 5px 5px;
  border: 1px 0px 0px 0px;
  background: var(--color-white);
  border: 1px solid #f4f4f5;
  box-shadow: 0px 8px 20px 0px #00000014;
}

.awardDetailsBody {
  width: 976px;
  height: 84px;
  gap: 16px;
}

.awardSchoolName {
  font-family: var(--family-sans);
  font-size: 16px;
  font-weight: 400;
  padding: 8px;
  line-height: 24px;
  text-align: left;
  color: #222b45;
}

.awardValue {
  margin-top: 8px;
  font-family: var(--family-sans);
  font-size: 16px;
  font-weight: 700;
  line-height: 20px;
  color: #222b45;
  padding-left: 8px;
}

/****************Login Styles**************/
.login-container {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 100px;
  box-sizing: border-box;
}

.login-box,
.right-column {
  background: white;
  border-radius: 8px;
  box-shadow: 0 48px 100px rgba(17, 12, 46, .15);
  padding: 48px;
  margin: 24px;
}

.login-box,
.signup-box {
  background: white;
  border-radius: 8px;
  box-shadow: 0 48px 100px rgba(17, 12, 46, .15);
  padding: 48px;
  margin: 24px;
}

.login-box {
  max-width: 420px;
  flex: 1;
  text-align: center;
  /*  height: 384px; */
}

.loginConfirmBtn {
  padding: 0px !important;
  width: 177px !important;
  height: 32px !important;
  font-family : var(--family-sans) !important;
}

.logButton {
  background: var(--color-blue);
  color: white;
  border: none;
  border-radius: 4px;
  padding: var(--size-small) 24px;
  font-family : var(--family-sans);
  font-size: 16px;
  font-weight: 400;
  cursor: pointer;
  margin-top: 24px;
  width: 100%;
}

.login-input {
  width: 320px;
  padding: var(--size-small);
  height: none;
  margin: 8px 0;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-family : var(--family-sans);
  font-size: 16px;
  background-color: #F5F5F5;
  color: black;
}

.get-help {
  font-family : var(--family-sans);
  font-size: var(--size-medium);
  font-weight: 400;
  text-align: center;
  color: var(--color-blue);
  text-decoration: none;
  margin-top: var(--size-small);
  flex: 1;
  color: black;
  padding-top: 20px;
}

.reset-password {
  font-family : var(--family-sans);
  font-size: var(--size-medium);
  font-weight: 400;
  text-align: left;
  color: var(--color-blue);
  text-decoration: none;
  margin-top: var(--size-small);
  display: inline-block;
  flex: 1;
  color: black;
  margin-right: 20px;
}

.link-container {
  justify-content: space-between;
  align-items: center;
  margin-top: 15px;
  display: flex;
  margin-left: 95px;
}

.createAccountLink {
  background: var(--color-dark-blue);
  color: white;
  border: none;
  font-family : var(--family-sans);
  font-size: 16px;
  font-weight: 400;
  cursor: pointer;
  margin-top: 24px;
  display: inline-block;
  width: 320px !important;
  height: 30px !important;
  padding: 10px 0px 0px 0px;
  gap: 0px;
  border-radius: 4px 4px 4px 4px;
}

.createAccountLink:hover {
  color: white;
}

.signup-box {
  max-width: 420px;
  flex: 1;
  text-align: center;
}

.subTitle {
  font-family : var(--family-sans);
  font-size: var(--size-medium);
  font-weight: 400;
  line-height: 19px;
  display: block;
  float: left;
  padding-left: 33px;
}

.info-block {
  width: 523px;
  gap: 8px;
  border-radius: 8px 0 0 0;
  border: none;
  opacity: 1;
  margin-bottom: 24px;
}

.info-block p {
  font-family : var(--family-sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  padding-left: 72px;
  width: 100%;
}

.info-block strong {
  font-weight: 700;
  font-family : var(--family-sans) !important;
}

.background-img {
  background-color: #f5f5f5;
  background-image: url(images/ES_Background_NL.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  min-height: calc(100vh - 65px);
}

.loginMarginLinks {
  margin-left: 5px;
  color: #2754a9 !important;
}

.loginMarginLinks :hover {
  color: var(--color-dark-blue) !important;
}

.boldText {
  font-weight: 600;
  font-family : var(--family-sans) !important;
}

.blockHeaderStyle {
  text-align: center;
  font-size: var(--size-xlarge);
  font-family : var(--family-sans) !important;
  font-weight: 300;
}

.inputstyle {
  background-color: #E4E4E7;
  color: black;
}

.paddingHRTag {
  padding-left: 64px;
}

.widthHRTag {
  width: 116%;
}

/* Error box */
.error-box {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  padding: 16px;
  gap: 8px;
  width: 320px;
  background: #FFFED1;
  border: 1px solid #FFC83E;
  /* Warning/Default */
  border-radius: 8px;
  margin-bottom: 24px;
}

/* Inside auto layout */
.error-box .inside-layout {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0px;
  gap: 8px;
  width: 256px;
  height: 74px;
  flex: none;
  order: 1;
  flex-grow: 1;
}

/* Warning Icon */
.warning-icon {
  width: 24px;
  height: 16px;
  font-family: var(--family-sans);
  font-style: normal;
  font-weight: 900;
  font-size: 24px;
  line-height: 16px;
  /* identical to box height, or 67% */
  display: flex;
  align-items: center;
  text-align: center;
  color: #FFB23E;
  flex: none;
  order: 0;
  flex-grow: 0;
}

.message .errorM3 {
  width: 320px;
  height: 89px;
  padding: 16px 0px 0px 0px;
  gap: 8px;
  border-radius: 8px 0px 0px 0px;
  border: 1px 0px 0px 0px;
  background: #FFFED1;
  border: 1px solid #FFC83E;
  width: 340px;
  height: 89px;
  padding: 16px 0px 0px 0px;
  gap: 8px;
  border: 1px 0px 0px 0px;
  background: #FFFED1 !important;
  border-radius: 8px;
}

.errorM3 {
  border: 1px solid #FFC83E !important;
}

.errorM3 .msgIcon {
  background-image: url(/img/msg_icons/warning24.png);
  background-image: "/img/msg_icons/warning24.png";
  background-position: 0 0;
  width: 24px;
  height: 24px;
  font-family: Font Awesome 6 Pro;
  font-size: 24px;
  font-weight: 900;
  line-height: 16px;
  text-align: center;
  margin-left: 9px;
}

.loginConfirm {
  width: 105%;
  overflow-x: hidden;
  height: auto;
  margin: 0 auto;
  border-top: 1px solid transparent;
  opacity: 1;
}

.blockheaderLoginConFirm {
  width: 395px;
  height: 32px;
  gap: 0px;
  font-size: var(--size-xlarge);
  font-weight: 300;
  line-height: 32px;
  text-align: left;
  padding-top: 19px;
  font-family : var(--family-sans);
}

.blockbody.loginblockbody {
  font-size: var(--size-medium);
  font-weight: 400;
  line-height: 19px;
  text-align: left;
  margin-top: 10px;
  font-family : var(--family-sans) !important;
}

.button {
  width: 125px;
  height: 32px;
  padding-top: 8px;
  border-radius: 4px;
  background: var(--color-dark-blue);
  color: #fff;
  text-align: center;
  display: inline-block;
  text-decoration: none;
}

.headerCSS {
  border-bottom: 1px solid #E4E4E7;
  width: 106%;
}

.email-instructions {
  width: 464px;
  gap: 0px;
  font-family : var(--family-sans);
  font-size: var(--size-medium);
  font-weight: 400;
  line-height: 19px;
  text-align: left;
  padding-top: 16px;
}

.customer-support-link {
  font-size: var(--size-medium);
  font-weight: 400;
  line-height: 19px;
  text-align: left;
  padding-top: 16px;
}

.email-instructionsSupport {
  height: 53px;
}

.mainBlockConfirm {
  padding: 16px 48px !important;
  width: 460px !important;
  height: 283px !important;
  gap: 24px !important;
  border-radius: 8px 8px 8px 8px !important;
  background-color: white;
  box-shadow: 0 48px 100px rgba(17, 12, 46, .15) !important;
}


/***************AccountUpdate**************/
.getSSSCode .blockbody .widesecurity {
  width: auto;
}

.login #pageHeader {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #E4E4E7;
}

#contact-info-block {
  width: 85%
}

#contact-info-block-form {
  float: left;
}

#security-info-block {
  clear: both;
}

.parent-name {
  font-weight: 600;
  margin-left: 3px;
}

.getSSSCode .blockheader {
  font-weight: 300;
  font-size: var(--size-xlarge);
  padding-bottom: 0px;
  font-family : var(--family-sans) !important;
  font-size: var(--size-xlarge);
  font-weight: 300;
  line-height: 32px;
  text-align: left;
  color: var(--color-dark-gray-2);
  margin-bottom: 24px;
}

.blockHeading {
  width: 815px;
  height: 32px;
  gap: 0px;
  font-family: var(--family-sans);
  font-size: var(--size-xlarge);
  font-weight: 300;
  line-height: 32px;
  text-align: left;
  color: var(--color-dark-gray-2);
}

.blockHeadingCreateAccount {
  width: 640px;
  height: 64px;
  gap: 0px;
  font-size: var(--size-xlarge);
  font-weight: 300;
  line-height: 32px;
  text-align: left;
  color: var(--color-dark-gray-2);
}

#security-info-block table tbody tr td .cancelButton {
  width: 206px;
  color: #3F3F46 !important;
  background: rgba(255, 255, 255, 1) !important;
  font-size: var(--size-small);
  font-weight: 600;
  line-height: 16px;
  text-align: center;
  box-shadow: none;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  -ms-box-shadow: none;
}

#security-info-block table tbody tr td .submitButton {
  width: 206px;
  color: white !important;
  background: rgba(57, 79, 124, 1) !important;
  font-size: var(--size-small);
  font-weight: 600;
  line-height: 16px;
  text-align: center;
  box-shadow: none;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  -ms-box-shadow: none;
}

.partnerCodeBox {
  width: 320px;
  height: 40px;
}

.getSSSCode .blockbody input[type="text"] {
  width: 297px;
  height: 28px;
  padding: 5px;
  line-height: 30px;
  border: 1px solid #bfbfbf;
}

.getSSSCode .blockbody input[type="text"],
.getSSSCode .blockbody select {
  border-radius: 4px;
  background: var(--color-white);
  font-family: var(--family-sans);
  padding-left: 16px !important;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  text-align: left;
  border: 1px solid #E4E4E7;
}

.login #loginWrapper .getSSSCode .blockbody input.btn {
  width: 206px;
  height: 32px;
  padding: 8px;
  gap: 0px;
  border-radius: 4px;
  box-shadow: none;
  font-family : var(--family-sans) !important;
  font-size: var(--size-small);
  font-weight: 600;
  line-height: 16px;
  text-align: center;
  border: 1px solid #D1D1D6;
  background: var(--color-white);
  color: #000000;
}

.contactInfoSubheading {
  width: 464px;
  height: 58px;
  gap: 0px;
  font-size: var(--size-medium);
  font-weight: 400;
  line-height: 19px;
  text-align: left;
  color: var(--color-black);
}

.contactInfoSubheading span,
.messageSubheading span,
.messageSubheadingImportant span {
  font-family : var(--family-sans) !important;
  font-size: var(--size-medium);
  font-weight: 700;
  line-height: 20px;
  text-align: left;
}

.getSSSCode .blockbody label {
  color: var(--color-black);
  font-size: var(--size-normal);
  font-weight: 600;
  line-height: 17px;
  text-align: left;
  font-family : var(--family-sans) !important;
}

.getSSSCode .blockbody select {
  width: 320px;
  height: 40px;
  gap: 0px;
  border-radius: 4px;
  background: var(--color-white);
  color: #26272B;
  padding-left: 0px;
  line-height: 0px;
  border: 1px solid #E4E4E7;
}

.getSSSCode .blockbody .widesecurity {
  width: 320px;
  height: 40px;
}

.contactInfoSubheading span,
.messageSubheading span,
.messageSubheadingImportant span {
  font-family : var(--family-sans) !important;
  font-size: var(--size-medium);
  font-weight: 700;
  line-height: 20px;
  text-align: left;
}

.messageSubheading {
  width: 464px;
  height: 58px;
  font-size: var(--size-medium);
  font-family : var(--family-sans) !important;
  font-weight: 400;
  line-height: 19px;
  text-align: left;
}

.messageSubheadingImportant {
  width: 464px;
  font-size: var(--size-medium);
  font-family : var(--family-sans) !important;
  font-weight: 400;
  line-height: 19px;
  text-align: left;

}

.reqAst {
  color: #CD2026;
  font-size: var(--size-normal);
  font-weight: 600;
  line-height: 17px;
  text-align: left;
}

.countryStateDropdownBox .countryBlock select {
  color: #26272B;
}

.schoolSearchBlock {
  display: flex;
  align-items: center;
  width: 815px;
  height: 65px;
  margin-bottom: 24px;
}

.schoolSelectBox {
  display: flex;
}

.partnerCodeBlock {
  width: 320px;
}

.partnerCodeBlock label,
.countryStateBlock label {
  display: flex;
  margin-bottom: 8px;
  line-height: 17px;
}

.countryBlock {
  display: flex;
  align-items: center;
  padding-left: 16px !important;
  margin-right: 8px;
  width: 187px !important;
  height: 40px !important;
  gap: 0px;
  border-radius: 4px !important;
  font-size: var(--size-medium) !important;
  background: var(--color-white) !important;
  border: 1px solid #E4E4E7 !important;
}

.stateBlock {
  width: 233px !important;
  height: 40px !important;
  gap: 0px;
  border-radius: 4px;
  background: var(--color-white);
  border: 1px solid #E4E4E7;
}

.or {
  display: flex;
  margin-left: 24px;
  margin-right: 24px;
  margin-top: 18px;
}

.inputFields {
  margin-bottom: 24px;
}

.inputFieldLabel {
  margin-bottom: 8px;
}

.countryStateBlock select,
.countryStateBlock select option {
  border: 1px solid #ccc;
  padding: 5px;
  font-size: 16px;
}

.countryStateBlock select option:first-of-type {
  color: gray;
}

.getSSSCode .blockbody {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.resultContainer {
  padding: 8px 16px 16px 16px;
  border-radius: 3px;
  background: #008C9F14;
}

.loginOrange {
  font-family: var(--family-sans);
  padding: 16px 8px 16px 8px;
  font-size: var(--size-medium);
  font-weight: 400;
  background: none;
  line-height: 19px;
  text-align: left;
  color: var(--color-blueheading);
}

.schoolTableData {
  height: 32px;
  border-right: 1px solid #E4E4E7 !important;
  padding: 0px 16px 0px 16px !important;
  font-family: var(--family-sans);
  font-size: var(--size-small);
  font-weight: 400;
  line-height: 16px;
  text-align: left;
  color: var(--color-blueheading) !important;
}

.resultContainer .loginsearchresults {
  display: flex;
  gap: 8px;
  border-radius: 3px;
  font-family: var(--family-sans);
  font-size: var(--size-small);
  line-height: 20px;
  color: var(--color-blueheading) !important;
  text-align: left;
  flex-direction: column;
}

.tableHeading {
  display: flex;
  gap: 8px;
  padding: 8px;
  border-radius: 3px;
  font-family: var(--family-sans);
  font-size: 16px;
  line-height: 20px;
  color: var(--color-blueheading) !important;
  text-align: left;
  flex-direction: column;
  font-weight: bold !important;
  font-weight: 700;
}

.resultContainer .loginsearchresults .apexp .secondaryPalette {
  border: none;
}

.headerRow {
  border-width: 1px 1px 0px 1px;
  border-style: solid;
  border-color: #DFDFDF;
}

.list .headerRow th {
  height: 44px;
  border-bottom: 2px solid #E4E4E7 !important;
  border-right: 1px solid #E4E4E7 !important;
  font-family: var(--family-sans);
  font-size: var(--size-small) !important;
  font-weight: 700 !important;
  line-height: 16.34px;
  text-align: left;
  color: var(--color-blueheading) !important;
  padding: 0px var(--size-medium) 0px var(--size-medium) !important;
  background: #FAFAFA !important;
}

.resultContainer a {
  width: 206px;
  padding: 8px;
  gap: 0px;
  border-radius: 4px;
  font-family : var(--family-sans) !important;
  font-size: var(--size-small);
  font-weight: 600;
  border: 1px solid #D1D1D6;
  background: var(--color-white);
  display: flex;
  justify-content: center !important;
  align-items: center;
}

.enableButtoncls {
  cursor: pointer !important;
  width: 206px;
  color: white !important;
  background: rgba(57, 79, 124, 1) !important;
  font-size: var(--size-small);
  font-weight: 600;
  line-height: 16px;
  text-align: center;
  box-shadow: none;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  -ms-box-shadow: none;
  height: 32px;
  padding: 8px;
  gap: 0px;
  border-radius: 4px;
}

.disableButton {
  pointer-events: none !important;
  width: 206px;
  height: 32px;
  padding: 8px;
  gap: 0px;
  border: none !important;
  border-radius: 4px;
  font-family : var(--family-sans) !important;
  font-size: var(--size-small);
  font-weight: 600;
  line-height: 16px;
  text-align: center;
  color: var(--color-white) !important;
  background: #DEE8F0 !important;
  cursor: not-allowed !important;
  box-shadow: none;
}

/*****************Dashboard******************/

.pfsHistoryURL {
  float: right;
  padding-right: 2px;
}

#feeBar {
  padding: 5px 20px;
  overflow: hidden;
  margin-bottom: 10px;
  margin-top: 10px;
  text-align: center;
}

#feeBar .strikefee {
  text-decoration: line-through;
}

#feeBar.feepaid {
  background-color: CornflowerBlue;
}

#feeBar.feeunpaid {
  background-color: lightgrey;
}

.feeAlert {
  color: cornflowerblue;
}

#stageFeeAlert {
  font-size: 16px;
}

#stageFeeAlertAmount {
  color: darkgreen;
}

.paidOrWaived {
  color: white;
  font-weight: bold;
}

div.dashSelectTable {
  display: table;
  width: 100%;
  border-collapse: collapse;
}

div.dashSelectRow {
  display: table-row;
  width: 100%;
  vertical-align: middle;
}

div.headerRow {
  display: table-row;
  width: 100%;
  background-color: lightgray;
}

div.dashSelectCell {
  display: table-cell;
  padding: 4px;
  background-repeat: no-repeat;
  background-position: center;
  border: 1px;
  border-color: lightgrey;
  border-style: solid;
  vertical-align: middle;
}

.dashSelectCellStatus {
  width: 10%;
}

.dashSelectCellCode {
  width: 10%;
}

.dashSelectCellSchool {
  width: 25%;
}

.dashSelectCellApplicant {
  width: 25%;
}

.dashSelectCellDeadline {
  width: 15%;
}

.unsubscribedwarning {
  font-size: 80%;
  color: red;
  font-style: italic;
}

.deadlinepassedbgcolor {
  background-color: TOMATO;
}

.unsubscribedbgcolor {
  background-color: BISQUE;
}

.processStates {
  overflow: hidden;
  padding: 0;
  margin: -45px 0 0;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.processStates li {
  padding: 1rem 0 0;
  border-radius: 5px;
  list-style: outside none none;
  float: left;
  width: 215px;
  height: 237px;
  margin-left: 3.0em;
  margin-top: 75px;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background: -moz-linear-gradient(top, var(--color-white) 0%, #c1c1c1 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, var(--color-white)), color-stop(100%, #c1c1c1));
  background: -webkit-linear-gradient(top, var(--color-white) 0%, #c1c1c1 100%);
  background: -o-linear-gradient(top, var(--color-white) 0%, #c1c1c1 100%);
  background: -ms-linear-gradient(top, var(--color-white) 0%, #c1c1c1 100%);
  background: linear-gradient(to bottom, var(--color-white) 0%, #c1c1c1 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#c1c1c1', GradientType=0);
  background: #fbfbfb;
  background-color: #D7E5E6;
}

.processStates .instructions {
  float: none;
  clear: left;
  width: 100%;
  height: auto;
  padding: 20px;
}

.processStates .active,
.processStates .instructions {
  background: #fff;
}

.processStates li a {
  display: block;
  padding-top: 120px;
  text-align: center;
  text-decoration: none;
  font-weight: bold;
  color: #344f80;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.processStates .active a {
  color: #393536;
  height: 198px;
  background: #fff;
}

.processStates .active a:hover {
  color: #393536;
}

.processStates .instructions a {
  display: inline;
  padding: 0;
  text-transform: none;
}

.processStates li .stateIcon {
  background-repeat: no-repeat;
}

.stateIcon.prepare {
  background-position: 50% 0;
}

.active .stateIcon.prepare {
  background-position: 50% -800px;
}

.inactive .stateIcon.complete {
  background-position: 50% 10px;
  background-image: url('./images/ProfileIcon.svg');
  background-size: 34%;
  font-size: 16px;
  font-weight: 700;
  line-height: 19px;
  text-align: center;
  color: #5A6771;
  opacity: 0.6;
}

.active .stateIcon.complete {
  background-position: 50% 10px;
  background-image: url('./images/ProfileIcon.svg');
  background-size: 34%;
  font-size: 16px;
  font-weight: 700;
  line-height: 19px;
  text-align: center;
  color: #5A6771;
}

.inactive .stateIcon.submit {
  background-position: 50% 10px;
  background-image: url('./images/CreditCardIcon.svg');
  background-size: 34%;
  font-size: 16px;
  font-weight: 700;
  line-height: 19px;
  text-align: center;
  color: #5A6771;
  opacity: 0.6;
}

.active .stateIcon.submit {
  background-position: 50% 10px;
  background-image: url('./images/activeCreditCardIcon.svg');
  background-size: 34%;
  font-size: 16px;
  font-weight: 700;
  line-height: 19px;
  text-align: center;
  color: #5A6771;
}

.inactive .stateIcon.manage {
  background-position: 50% 10px;
  background-image: url('./images/DocumentIcon.svg');
  background-size: 34%;
  font-size: 16px;
  font-weight: 700;
  line-height: 19px;
  text-align: center;
  color: #5A6771;
  opacity: 0.6;
}

.btn.managebtn:hover,
.btn.boxbtn:hover {
  background: #edf4f4;
}

.active .stateIcon.manage {
  background-position: 50% 10px;
  background-image: url('./images/activeDocumentIcon.svg');
  background-size: 34%;
  font-size: 16px;
  font-weight: 700;
  line-height: 19px;
  text-align: center;
  color: #5A6771;
}

/* application fee paid message bar */
#feeBar {
  padding: 20px 0;
  color: #fff;
  font-size: var(--size-medium);
  margin: 20px 0;
}

#feeBar.feepaid {
  background: #6d5c89;
}

/* some table style resets */
.pbBody .detailList .data2Col {
  padding: 0;
}

.familyPortalDashboard .rich-table-thead {
  border-bottom: none;
}

.familyPortalDashboard .apexp .detailList .list .headerRow th {
  border-bottom: none;
  white-space: nowrap;
}

.familyPortalDashboard #mainColContent {
  margin-top: -19px;
}

.familyPortalDashboard .apexp .detailList td {
  white-space: normal;
}


/* special treatment for the left sidebar */
.familyPortalDashboard #sidebar .verticalTab {
  display: none;
}

.familyPortalDashboard #pfsChecklist {
  border-radius: 0 5px 5px 0;
  margin-bottom: 20px;
}

.familyPortalDashboard .block.pfsHistory {
  border-radius: 0 5px 5px 0;
  border-left: none;
  margin-left: -2px;
}

/*Newly ADDED CSS*/

.dashboardbackgroundImg {
  background-image: url('./images/DashboardBgImage.svg') !important;
}

.dashboardUpperColumnBg {
  overflow: visible;
  background-color: #005d697a;
  padding-bottom: 20px;
}

.dashboardSteps {
  display: flex;
  justify-content: center;
}

.btn.boxbtn {
  width: 159px;
  height: 40px;
  font-weight: 700;
  font-size: var(--size-medium);
  line-height: 18px;
  text-align: center;
  color: #5A6771;
  background-color: white;
  background: white;
  margin-bottom: var(--size-xlarge);
  border-radius: 3px;
  margin-top: var(--size-normal);
  border-bottom-color: #b5b5b5;
}

.btn.managebtn {
  width: 159px;
  height: 40px;
  font-weight: 700;
  font-size: var(--size-medium);
  line-height: 18px;
  text-align: center;
  color: #5A6771;
  background-color: white;
  background: white;
  margin-bottom: 16px;
  border-radius: 3px;
  margin-top: -8px;
  border-bottom-color: #b5b5b5;
}

.btn.feewaived {
  width: 159px;
  height: 40px;
  font-weight: 700;
  font-size: var(--size-medium);
  line-height: 18px;
  text-align: center;
  color: #5A6771;
  background-color: #2574a945;
  border: none;
  margin-bottom: var(--size-xlarge);
  border-radius: 3px;
  margin-top: var(--size-normal);
  pointer-events: none;
  opacity: 1;
}

.completedStepText {
  font-weight: 500;
  margin-left: -17px;
  margin-top: 7px;
}

.youAreHereStepText {
  margin-left: -17px;
  margin-top: 7px;
  color: white;
  font-weight: 500;
}

.inactiveStepText {
  margin-top: 7px;
  color: #D1D1D6;
}

.columnProgressSteps {
  padding: 2rem 0 0;
}

.rowProgressSteps {
  display: flex;
  justify-content: center;
  margin-left: 54px;
}

#mainColumnHeader {
  margin-bottom: 20px;
}

#mainColumnHeader div {
  margin-top: 0px;
  text-align: right;
}

.spanishHeaderText {
  width: 351px;
  height: auto;
  font-size: 11px;
  margin: 0;
  font-size: 11px;
  font-family: var(--family-sans);
  font-weight: 400;
  line-height: 18px;
  padding: 1rem 0 0 0;
}

.warningIcnCss {
  margin-top: 5px;
  padding-right: 5px;
}

.familyReportSubHeading {
  padding-bottom: var(--size-medium);
  font-weight: 700;
  font-size: var(--size-small);
}

.applicationHistorySubHeading {
  padding-bottom: -6px;
  padding-bottom: -5px;
  padding-left: 19px;
  font-weight: 700;
  font-size: var(--size-small);
}

.pfsHistoryName {
  margin-left: -56px;
  margin-top: -6px;
  padding-bottom: 11px;
}

.stepTextInactive {
  margin-top: -20px;
  opacity: 0.6;
  font-size: 16px;
  font-weight: 700;
  color: #5A6771;
}

.stepTextActive {
  margin-top: -20px;
  font-size: 16px;
  font-weight: 700;
  color: #5A6771;
}

.step3rdTextActive {
  margin-top: -7px;
  font-size: 16px;
  font-weight: 700;
  color: #5A6771;
}

.step3rdTextInactive {
  margin-top: -18px;
  opacity: 0.6;
  font-size: 16px;
  font-weight: 700;
  color: #5A6771;
}

.pbBody td {
  color: var(--color-blueheading) !important;
}

body .apexp .pbBody table.list {
  border: none;
}

.blockbody .detailList.fpTable thead {
  border-bottom: 2px solid #E4E4E7;
}

.dashboardContent {
  background-size: cover;
  background-position: center;
  padding: 32px 141px 72px 141px;
  text-align: center;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.mainTableBgColor {
  max-width: 900px;
  padding: 20px;
  border-radius: 5px;
  text-align: left;
  width: 100%;
  background-color: white !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .08);
}
/****************Document******************/

#simplemodal-container {
  width: auto;
  height: auto;
}

.process_helpers_container {
  cursor: default;
  height: 80px;
  gap: var(--size-small);
}

.process_helpers--flex-left {
  display: flex;
  width: 234px;
  height: 80px;
  align-items: center;
  padding: 16px var(--size-small) 16px var(--size-small);
  gap: var(--size-small);
  border-radius: 8px;
  border: 1px solid #E4E4E7;
  background: var(--color-white);
  flex-direction: row;
}

.process_helpers--flex-left:last-child {
  border-right: 1px solid #E4E4E7;
}

.img-one img {
  height: 24px;
  width: 24px;
  color: #5A6771;
}

.img-two img {
  height: 21px;
  width: 41px;
  color: #5A6771;
}

.img-three img {
  height: 24px;
  width: 18.32px;
  color: #5A6771;
}

.img-four img {
  height: 22px;
  width: 38px;
  color: #5A6771;
}

.process_helpers--flex-bottom {
  display: block !important;
  font-family: var(--family-sans);
  font-size: var(--size-small);
  font-weight: 400;
  line-height: 16px;
  letter-spacing: -0.1875px;
  text-align: left;
  color: var(--color-dark-gray-2);
}

.process_helpers--flex-bottom span {
  font-weight: 700;
}

.redirectLink {
  display: flex;
}

.popoutImage {
  width: 20px;
  height: 20px;
  justify-content: center;
  align-items: center;
}

td.fileColumn div img {
  height: 10px;
  width: 10px;
}


.blockheader .headerEditTxt {
  font-size: var(--size-medium);
  font-family: var(--family-sans);
  font-weight: 400 !important;
  text-align: left;
}

.bottom-div span {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.actionButtons li .btn {
  width: 66px !important;
  background: var(--color-white) !important;
  border: 1px solid #D1D1D6;
  font-family: var(--family-sans);
  font-size: 10px;
  font-weight: 600;
  padding: 6px;
  line-height: var(--size-small);
  color: var(--color-blue);
  text-align: center;
  box-shadow: none;
}

.actionButtons li .btnUpload {
  width: 66px !important;
  background: var(--color-blue) !important;
  font-family: var(--family-sans);
  font-size: 10px;
  font-weight: 600;
  padding: 6px;
  line-height: var(--size-small);
  color: var(--color-white);
  text-align: center;
  box-shadow: none;
  border-radius: 4px;
  border: 1px solid var(--color-blue);
}

.actColumn div div .actionButtons {
  padding-left: 0px;
}

.blockheader .btnUpload {
  width: 66px !important;
  height: 24px;
  background: var(--color-blue) !important;
  font-family : var(--family-sans) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  padding: 6px;
  margin-top: -var(--size-medium) !important;
  align-content: center !important;
  color: var(--color-white);
  box-shadow: none;
  border-radius: 4px;
  border: 1px solid var(--color-blue);
  margin-right: 34px !important;
}

.simplemodal-overlay {
  opacity: 0.7;
  position: fixed;
  background-color: #1D1A1DB2;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 1001;
}

#main-dialog-modal {
  width: 466px;
  background: var(--color-white);
  border-radius: 10px;
  border: 1px solid #E4E4E7;
}

.simplemodal-data .blockheader {
  background: none;
  height: 22.4px !important;
  border-bottom: 1px solid #E4E4E7;
  padding: 32px;
}

.simplemodal-data .blockheader h1 {
  font-family: var(--family-sans);
  font-size: 30px;
  font-weight: 700;
  line-height: 24px;
  letter-spacing: 0.2px;
  text-align: left;
  color: #353643;
}

.simplemodal-data .blockheader h1 span {
  display: none;
  float: right;
}

.simplemodal-data .blockbody {
  padding: 32px;
  box-shadow: none;
}

.simplemodal-data .blockbody p {
  margin-bottom: 10px;
  width: 402px;
  font-family: var(--family-sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  text-align: left;
  color: #353643;
}

.simplemodal-data .blockbody label {
  display: block;
  padding-bottom: 5px;
  width: 402px;
  height: 17px;
  font-family: var(--family-sans);
  font-size: var(--size-normal);
  font-weight: 600;
  line-height: 17px;
  text-align: left;
  color: var(--color-black);
  margin-top: 16px;
}

.simplemodal-data .blockbody input {
  width: 378px;
  padding: 6px;
  height: 24px;
  padding-top: 8px;
  padding-left: 16px;
  border-radius: 4px;
  background: #FAFAFA;
  border: 1px solid #E4E4E7;
  font-family: var(--family-sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  text-align: left;
  color: #A0A0AB;
  margin-bottom: 0px;
}

.simplemodal-data .blockbody select {
  width: 402px;
  padding: 6px;
  height: 40px;
  padding-top: 8px;
  padding-left: 16px;
  border-radius: 4px;
  border: 1px solid #E4E4E7;
  font-family: var(--family-sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  text-align: left;
  color: #3F3F46;
}

.centerButtons {
  float: right;
  position: relative;
  right: -20%;
}

.simplemodal-data .blockfooter {
  padding: 32px;
  border-top: 1px solid #E4E4E7;
  background: none;
  overflow: hidden;
}

.buttonsWrap {
  text-align: right;
  position: relative;
  left: 50%;
  overflow: visible;
}

.simplemodal-data .btn {
  width: 69px;
  height: 40px;
  padding: 2px 8px 2px 8px;
  gap: 0px;
  border-radius: 4px;
  font-family: var(--family-sans);
  font-size: var(--size-medium);
  font-weight: 600;
  line-height: 16px;
  text-align: center;
  color: var(--color-white);
  background-color: var(--color-dark-blue);
  background: var(--color-dark-blue);
  border: none;
  box-shadow: none;
}

.simplemodal-data .btn:hover {
  width: 69px;
  height: 40px;
  padding: 2px 8px 2px 8px;
  gap: 0px;
  border-radius: 4px;
  font-family: var(--family-sans);
  font-size: var(--size-medium);
  font-weight: 600;
  line-height: 16px;
  text-align: center;
  color: var(--color-white);
  background-color: var(--color-dark-blue);
  background: var(--color-dark-blue);
  border: none;
  box-shadow: none;
}

.simplemodal-data .btn.cancel {
  width: 81px;
  height: 40px;
  padding: 2px 8px 2px 8px;
  gap: 0px;
  border-radius: 4px;
  font-family: var(--family-sans);
  font-size: var(--size-medium);
  font-weight: 600;
  line-height: 16px;
  text-align: center;
  color: #70707B;
  background-color: var(--color-white);
  background: var(--color-white);
  border: none;
  box-shadow: none;
}

.cancelButton {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 81px;
  height: 40px;
  margin-right: 8px;
  font-family: var(--family-sans);
  font-size: var(--size-medium);
  font-weight: 600;
  line-height: 16px;
  text-align: center;
  color: #70707B;
  background: var(--color-white);
}

.cancelButton:hover {
  color: #70707B;
  text-decoration: none;
}

a.sample_link {
  color: blue !important;
  text-decoration: underline;
}

#pertains_to_selection {
  background: url('../SchoolPortalStyles/images/new/dropdownIcon.png') no-repeat right center;
  background-size: var(--size-medium) 7px;
  display: flex;
  justify-content: right;
  align-items: flex-end;
  padding-left: 16px !important;
  padding-right: 16px !important;
  border: 1px solid #ccc;
  background-origin: content-box;
}

.select-wrapper {
  position: relative;
}

.select-wrapper select {
  padding: 10px;
  padding-right: 40px;
}

.arrow-right {
  border-left: 7px solid var(--color-blueheading);
}

.arrow-down {
  border-top: 7px solid var(--color-blueheading);
}

.document-due {
  width: 22px;
}

.docTypeColumn {
  width: 255px;
}

.checkIcon {
  display: flex !important;
  justify-content: center;
  align-items: center;
  width: 20px;
  height: 20px;
}

.icon-upload.complete {
  width: 13.33px;
  height: 9.53px;
  background-position: center;
  background-image: url('../SchoolPortalStyles/images/new/checkmark.png');
  background-size: contain;
  background-repeat: no-repeat;
}

.icon-upload.notReceived {
  width: 16.67px;
  height: 16.67px;
  margin-top: 2.08px !important;
  margin-left: 1.66px !important;
  background-image: url('../SchoolPortalStyles/images/new/error16.png');
  background-position: center;
}

.simplemodal-data span span .blockbody span .uploadDocLabel {
  width: 402px;
  font-family: var(--family-sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  margin-bottom: 16px;
  text-align: left;
  color: #353643;
}

.simplemodal-data span span .blockbody span .uploadDocCheckBox {
  width: 402px;
  display: flex;
  align-items: center;
  flex-direction: row;
  gap: 6px;
}

.simplemodal-data span span .blockbody span .uploadDocCheckBox input {
  display: inline;
  height: 20px;
  width: 20px !important;
  margin: 0 !important;
}

.simplemodal-data span span .blockbody span .uploadDocCheckBox .checkLabel {
  display: inline;
  font-family: var(--family-sans);
  font-size: var(--size-medium);
  margin: 0px;
  font-weight: 600;
  line-height: 24px;
  text-align: left;
  color: #51525C;
}

.naModal__Header {
  padding: 32px !important;
  height: 23.2px;
  border-bottom: 1px solid #E4E4E7;
}

.naModal__Header h1 {
  width: 200px;
  height: 24px;
  font-size: 30px;
  font-weight: 700;
  line-height: 24px;
  text-align: left;
  color: #353643;
}

.naModal__Body {
  display: flex;
  padding: 32px;
  gap: 16px;
  flex-direction: column;
}

.naModal__Body h1 {
  height: 24px;
  font-family: var(--family-sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  text-align: left;
  color: #353643;
}

.naModal__Description {
  display: flex;
  height: 30px;
  justify-content: center;
  font-family: var(--family-sans);
  font-size: 16px;
  font-weight: 400 !important;
  line-height: 24px;
  text-align: left;
  color: #353643;
  padding: 8px;
  background: #E7F4F5 !important;
  border-radius: 2px;
  align-items: center;
}

.naModal__BodySection {
  font-family: var(--family-sans);
  font-size: 16px !important;
  font-weight: 400;
  line-height: 24px;
  margin: 0 !important;
  text-align: left;
  color: #353643;
}

.naModal__Radio {
  margin-top: 1em;
  display: flex;
  gap: 16px;
  flex-direction: column;
}

.radioBtnNA {
  display: flex;
  gap: 6px;
  align-items: center;
}

.naModal__Radio .radioBtnNA input {
  padding: 1em 1em 1em 0em;
  width: 20px !important;
  height: 20px;
  border: 1px solid #D1D1D6;
  background-color: #A0A0AB29;
}

.naModal__Radio input:checked {
  background-color: var(--color-blue);
}

.naModal__Footer--flex {
  display: flex;
  justify-content: flex-end;
}

.naModal__Radio .radioBtnNA label {
  font-family: var(--family-sans);
  font-size: var(--size-medium);
  font-weight: 600;
  line-height: 24px;
  text-align: left;
  color: #51525C;
}

.naModal__Footer--buttons {
  display: flex;
  width: 100%;
  height: 104px !important;
  align-items: end !important;
  box-sizing: border-box;
  justify-content: flex-end;
  padding: 1em 1em 1em 1em;
  padding: 32px !important;
  border-top: 1px solid #E4E4E7;
}

.naModal__Body {
  margin: 0 !important;
}

.naModal__Description {
  display: flex;
  height: 30px;
  background: #E1E9DE;
  font-weight: bold;
  text-align: left;
  justify-content: start !important;
  align-items: center;
}

.statColumn {
  width: 80px;
}

.docTypeColumn {
  width: 286px;
}

.fileColumn {
  width: 184px;
}

.pertainsToColumn {
  width: 232px;
}

.schoolColumn {
  width: 270px;
}

.dateColumn {
  width: 120px;
}

.actColumn {
  width: 189px;
  padding-block: 4px !important;
  padding-inline: var(--size-small) !important;
}

td span {
  gap: 0px !important;
}

.actColumn a {
  font-family: var(--family-sans);
  padding: 4px 8px;
  font-size: 12px !important;
  padding-inline: var(--size-small);
  font-weight: 600;
  line-height: var(--size-small);
  text-align: center;
}

.btn.primary.springCM {
  cursor: pointer !important;
  font-family: var(--family-sans);
  font-size: 10px !important;
  padding-inline: var(--size-small);
  font-weight: 600 !important;
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: var(--size-small);
  text-align: center;
}

.inlineMessage {
  color: #000000 !important;
}

#main-dialog-modal {
  width: 466px !important;
  max-height: 80vh;
  overflow-y: auto;
  overflow-x: hidden;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

#main-dialog-modal::-webkit-scrollbar {
  display: none;
}

.naModal__Footer--Body span {
  padding-inline: var(--size-medium) !important;
}

.btnAddAnother {
  color: blue !important;
  text-decoration: none;
}

.btnAddAnother:hover {
  color: blue !important;
}

p.tooltip span {
  display: none;
  width: 186px !important;
  background-color: #F3F3F3 !important;
  box-shadow: 0px 4px 8px 0px #0000001F !important;
  color: var(--color-black) !important;
  font-family : var(--family-sans) !important;
  font-size: 10px !important;
  font-weight: 400;
  line-height: var(--size-normal);
  text-align: left !important;
  border-radius: 3px !important;
  padding: 8px !important;
}

p.tooltip:hover span {
  background-color: #F3F3F3 !important;
  box-shadow: 0px 4px 8px 0px #0000001F !important;
  color: var(--color-black) !important;
  border: none !important;
  font-family : var(--family-sans) !important;
  font-size: 10px !important;
  font-weight: 400;
  line-height: var(--size-normal);
  text-align: left !important;
  border-radius: 3px !important;
  padding: 8px !important;
}

.process_helpers--popup {
  display: none;
  width: 192px;
  padding: 8px;
  gap: 10px;
  border-radius: 3px;
  background: #F3F3F3;
  box-shadow: 0px 4px 8px 0px #0000001F;
  font-family: var(--family-sans);
  font-size: 10px;
  font-weight: 400;
  line-height: var(--size-normal);
  text-align: left;
  color: var(--color-black);
}

a.btn.primary.springCM {
  font-size: 0.9rem !important;
}

.redirectLink a {
  font-size: var(--size-small) !important;
  font-family: var(--family-sans);
  font-size: var(--size-small);
  font-weight: 400;
  line-height: 16px;
  text-align: left;
  color: var(--color-blueheading);
}

.hasToolTip:hover .toolTip {
  width: 192px !important;
  border-radius: 3px;
}

.hasToolTip .toolTip li p {
  display: flex;
  flex-wrap: nowrap;
  overflow-wrap: anywhere;
  font-family: var(--family-sans);
  font-size: 10px;
  font-weight: 400;
  line-height: var(--size-normal);
  text-align: left;
}

.process_helpers--popup {
  display: none;
  width: 192px;
  padding: 8px;
  gap: 10px;
  border-radius: 3px;
  background: #F3F3F3;
  box-shadow: 0px 4px 8px 0px #0000001F;
  font-family: var(--family-sans);
  font-size: 10px;
  font-weight: 400;
  line-height: var(--size-normal);
  text-align: left;
  color: var(--color-black);
}

.spinner {
  margin: 100px auto;
  width: 50px;
  height: 30px;
  text-align: center;
  font-size: 10px;
}

.spinner>div {
  background-color: #333;
  height: 100%;
  width: 6px;
  display: inline-block;
  -webkit-animation: stretchdelay 1.2s infinite ease-in-out;
  animation: stretchdelay 1.2s infinite ease-in-out;
}

.spinner .rect2 {
  -webkit-animation-delay: -1.1s;
  animation-delay: -1.1s;
}

.spinner .rect3 {
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}

.spinner .rect4 {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}

.spinner .rect5 {
  -webkit-animation-delay: -0.8s;
  animation-delay: -0.8s;
}

@-webkit-keyframes stretchdelay {

  0%,
  40%,
  100% {
    -webkit-transform: scaleY(0.4);
  }

  20% {
    -webkit-transform: scaleY(1.0);
  }
}

@keyframes stretchdelay {

  0%,
  40%,
  100% {
    transform: scaleY(0.4);
    -webkit-transform: scaleY(0.4);
  }

  20% {
    transform: scaleY(1.0);
    -webkit-transform: scaleY(1.0);
  }
}

.sss_page-message {
  background: none;
  padding: 0px;
}

.sss_page-message-heading {
  font-family: var(--family-sans);
  font-size: var(--size-xlarge);
  margin-bottom: 32px !important;
  font-weight: 300;
  line-height: 32px;
  text-align: left;
  color: var(--color-dark-gray-2);
}

.sss_page-message-details {
  width: 628px;
  height: 164px;
  gap: 0px;
  font-family: var(--family-sans);
  margin-bottom: 32px;
  font-size: var(--size-medium);
  font-weight: 400;
  line-height: 19px;
  text-align: left;
  color: var(--color-black);
}

.sss_page-message-details ol {
  padding: 0px;
  margin-left: 20px !important;
  margin-top: 16px !important;
}

ul.toolbar {
  background: none !important;
  margin-bottom: var(--size-small) !important;
}

.menuLabel,
.contextDisplay {
  padding: 0px;
}

.uploadBtn,
.submitBtn {
  width: 74px;
  height: 32px;
  margin: 0px;
  gap: 0px;
  border-radius: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--color-dark-blue);
  font-family: var(--family-sans);
  font-size: var(--size-small);
  font-weight: 600;
  line-height: 16px;
  text-align: center;
  color: var(--color-white);
}

.cancelBtn {
  width: 69.23px;
  height: 30.23px;
  gap: 0px;
  margin-right: 8px !important;
  border-radius: 4px;
  border: 1px solid #D1D1D6;
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--color-white);
  font-family: var(--family-sans);
  font-size: var(--size-small);
  font-weight: 600;
  line-height: 16px;
  text-align: center;
  color: #3F3F46;
}

.replaceBtn {
  width: 76.23px;
  height: 30.23px;
  margin-right: 8px !important;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
  background: var(--color-white);
  border: 1px solid #D1D1D6;
  font-family: var(--family-sans);
  font-size: var(--size-small);
  font-weight: 600;
  line-height: 16px;
  text-align: center;
  color: var(--color-blue);
}

ul.toolbar>li.menuItem,
ul.toolbar>li.menuItemWidget {
  border-radius: 3px 3px 3px 3px;
  padding: 0px;
  margin: 0px;
  border: none;
  min-height: 0px;
  color: white;
}

.title {
  width: 285px;
  margin-bottom: 32px !important;
  margin-top: 32px !important;
  gap: 16px;
  font-family: var(--family-sans);
}

.titleHeading {
  width: 150px;
  font-family: var(--family-sans);
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  text-align: left;
  color: var(--color-dark-gray-2);
}

.titleValue {
  width: max-content;
  padding: 8px 16px 8px 16px;
  display: flex;
  gap: 10px;
  color: #353643;
  margin-top: 16px !important;
  border-radius: 2px;
  background: #E7F4F5;
  font-family : var(--family-sans) !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 24px !important;
  text-align: left !important;
}

.FV .FV-layout {
  width: 1228px !important;
}

.menuItem:hover {
  border: none !important;
  background: none !important;
}

.headerRed {
  width: 30%;
  margin: 0 auto;
  float: left;
  margin-top: 25px;
}

.paddingContainer {
  display: none;
  overflow: scroll;
  max-height: 100%;
}

.bar {
  display: none;
  width: 0%;
}

.uploadForm {
  margin-left: 64px;
  margin-top: 32px;
}

#statusBar {
  padding-left: 16px !important;
  background: var(--color-white) !important;
  font-family: var(--family-sans);
  font-size: var(--size-normal);
  font-weight: 600;
  line-height: 17px;
  text-align: left;
  color: var(--color-black);
  width: 46%;
}

.pfsStatus {
  font-family: var(--family-sans);
  font-size: var(--size-normal);
  font-weight: 700;
  line-height: 17px;
  text-align: left;
  color: #008c9f;
}

#subTabContainer {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #E4E4E7;
  height: 32px;
}

.navBar {
  width: 50%;
  display: flex;
  justify-content: right;
}

.navLinks {
  display: flex;
  list-style-type: none;
  justify-content: center;
  align-items: center;
}

.errorHeading {
  font-family : var(--family-sans) !important;
  color: black;
  font-size: var(--size-medium);
  font-weight: 700;
  line-height: 17px;
  text-align: left;
  margin-left: 8px !important;
}

span#divErrorMsg {
  font-weight: 400;
  font-size: var(--size-small);
  color: #000000;
  line-height: 16px;
  padding-left: 0;
  text-align: left;
}

.marginBottomButton {
  margin-bottom : 5rem;
}

.paymentButtonTableLeft {
      padding-bottom: 50px;
}
.bPageBlock .detailList tr td, 
.bPageBlock .detailList tr th, 
.hoverDetail .bPageBlock .detailList tr td, 
.hoverDetail .bPageBlock .detailList tr th {
  border-bottom: none;
}

.realEstateHelpMsg {
  margin-left: -38px;
}

.otherConsideration {
  padding-bottom: 7px;
  font-size: 13px;
}

.btn.dependentpopupbtn {
  height: 28px;
  font-size: 14px;
  padding: 0 20px;
  border-radius: 5px;
  margin-right: 5px;
  margin-top: .6rem;
}

.apexp .detailList .list td, .apexp .detailList .list th, .apexp .editPage .bPageBlock .detailList .list tr td, .apexp .editPage .bPageBlock .detailList .list tr th {
  padding: 4px 2px 4px 5px;
  color: #333;
  border-bottom: 1px solid #33333314;
}

.messageMargin {
  margin-left: -16px;
}

.otherExpenseMargin {
  margin-left: -25px;
}

.btn.confirmModalBtn {
  height: 28px;
  font-size: 14px;
  color: #394f7c;
  padding: 0 20px;
  border-radius: 5px;
  margin-right: 5px;
  margin-top: 15px;
}

.btn.dependentbtn {
  height: auto;
  width: max-content;
  background: white;
  padding: .6rem 1.2rem; 
  border: 1px solid #B5B5B5;
  font-weight: normal;
  font-size: 13px;
  text-decoration: none; /* Ensure no underline by default */
  box-shadow: none; 
}

.btn.dependentbtn:hover {
  width: auto;
  height: auto;
  padding: .6rem 1.2rem;
  font-size: 13px;
  background: #f5f5f5;
  color: #202020;
}

.btnDisabled.dependentbtn {
  background: #eee;
  color: #00000085;
  height: auto;
  width: max-content;
  padding: .6rem 1.2rem;
  border: 1px solid #B5B5B5;
  font-weight: normal;
  font-size: 13px;
  text-decoration: none;
}

.message .messageText h4 {
  font-weight: bold;
  display: block;
  color: black;
}
/*****Have to remove max-width*******/
div.message.errorM3 {
  margin-left: 40px;
  margin-right: 40px;
  border: 1px solid #FFE65F;
  background-color: #FFFFCC;
  padding: 1rem;
  margin: 1rem auto;
  line-height: 1.4;
  border-radius: 5px;
  margin-top: 11px;
  background: #FFFED1;
}

.message .messageText {
  text-align: left;
  font-weight: 500;
  font-size: 12px;
  color: #000000;
}

.familyVehicleHeading {
  padding-left: 20px!important;
}

.selfEmployedHelpMsg {
  font-weight:bold;
}

.blockheader.documentHeading {
  background: none;
}

.btn.popupBtn {
    height: 28px;
    border-radius: 5px;
    margin-top: .6rem;
    width: 81px;    
    color: #394f7c;
    background-color: #e5f0f8;
    border: 1px solid #b5b5b5;
}

.btn.popupBtn:hover {
  background: #d1e0ec;
  height: 28px;
  width: 81px;   
  color: #394f7c;
  border: 1px solid #b5b5b5;
}

.popupModelMargin {
  margin-left: 100px;
  background-color: #FFFFFF;
  display:none;
  width: 467px;
  min-height: 200px;
  border-radius: 10px;
  border: 1px solid #E4E4E7;
}

.bPageBlock .detailList .errorMsg {
  padding-left: 0px;
  font-size: 12px;
  padding-top: 2px;
}

.blockheader.detailHeadingMessageTab {
  background: none;
}

.blockheader.additionalDocumentColumn {
  padding-bottom: 22px;
  line-height: 18px!important; 
}

.leftSidebar {
  margin-top:-20px;
  padding-bottom: 50px;
}

.footerButton {
  padding-bottom: 110px; 
}

.houseHoldMainBlock {
  padding: 0 0 1rem 0 !important; 
  margin-bottom: 2rem; 
}

ul.toolTip.currentlyEnrolledHelpText {
  left: -100px;
}

ul.toolTip.monthlyIncomeHelpText {
  top: -121px
}

.recieptHyperlink {
  color: #2574A9;
  text-decoration: none;
  text-decoration-line: underline;
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
  text-align: left;
}

.houseHoldSubBlock {
  background: #008C9F0F; 
  display: flex; 
  justify-content: flex-start; 
  height: auto!important; 
  padding: 5px 15px!important;
}


span.collapsable.houseHoldCollapsable {
  background: transparent url('./images/new/collapsable.png') no-repeat 10px 10px; 
}

.householdButton {
  margin-left: auto;
}

.numberOfVehicleHeading {
  margin-top: 16px;
}

.list.detailList.fpTable.messageTable thead th {
  background-color: white; 
  font-size: 15px; 
  font-weight: bold; 
  color: var(--color-dark-blue); 
}

.selectSchoolPageContent {
  padding: 5px 0; 
  margin-top: 10px;
}

.selectSchoolPageButton {
  background: #e5f0f8; 
  color: #394f7c; 
  box-shadow: none; 
  padding: .4rem 1rem; 
  font-size: .9rem; 
  border: none; 
  font-weight: bold; 
}

.uploadButtonDocumentPage {
  float: right;
}

.monthlyIncomePadding {
  padding-left: 30px!important;
}

.blockbody.nopadding.additionQuestionSubsection {
  margin-top: 17px;
}

p.applicantModalSubHeading {
  width: 100% !important;
}

.blockbody.applicantModalContent {
  display: inline-block;
}

.footerButtonOtherPages {
  margin: 10px;
  padding-bottom: 110px;
}

.modalHeading {
  border-bottom: 1px solid #E4E4E7;
  padding: 32px;
  gap: 8px;
}

.modalHeading h1 {
  font-family: "Open Sans";
  font-weight: 700;
  font-size: 18px;
  color:#000000;
  line-height: 18px;
}

.modalSubHeading {
  padding: 32px;
  gap: 16px;
}

.modalSubHeading p {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color:#000000;
}

.modalButton {
  padding: 32px;
  padding-top: 0px;
  height: 72px;
  gap: 40px;
}

.modalButton .cancelButton, 
.modalButton .cancelButton:hover {
  width: 81px;
  height: 40px;
  color: #70707B;
  font-weight: 600;
  line-height: 16px;
  font-size: 14px;
  text-align: center;
  display: inline;
  background-color: #FFFFFF;
}

.modalButton .noButton, 
.modalButton .noButton:hover {
  width: 132px;
  height: 40px;
  color: #222B45;
  border: 1px solid #A0A0AB;
  font-weight: 600;
  line-height: 16px;
  font-size: 14px;
  text-align: center;
  background-color: #FFFFFF;
}

.modalButton .yesButton,
.modalButton .yesButton:hover {
  width: 166px;
  height: 40px;
  background-color: #394F7C;
  color: #FFFFFF;
  font-weight: 600;
  line-height: 16px;
  font-size: 14px;
  text-align: center;
}

.modalButtonDelete {
  padding-left: 175px;
  height: 42px;
}

.modalButton .cancelButton.inlineStyleCancelButton {
  background: #FFFFFF!important;
  border: none!important;
  box-shadow: none!important;
}

.modalButton .yesButton.inlineStyleYesButton{
  background: #394F7C!important;
  border: none!important;
  box-shadow: none!important;
}

.modalButton .noButton.inlineStyleNoButton{
  background: #FFFFFF!important;
  box-shadow: none!important;
}
  
.awardCardContainer {
  margin-bottom: 65px !important;
}

.incompleteSections {
  color: #2574A9 !important; 
  font-weight: 400 !important;
  font-size:12px !important;
  line-height:16px !important;
}

.errorBorder {
  border: 2px solid #c00 !important;
}

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 20px;
}

.thanksText {
  width: 125px;
  height: 32px;
  font-family: Open Sans;
  font-size: 27px;
  font-weight: 300;
  line-height: 32px;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  color: #202020;
  margin-bottom: 16px;
}

.paymentCompleteHeading {
  width: 260px;
  height: 32px;
  font-family: Open Sans;
  font-size: 27px;
  font-weight: 300;
  line-height: 32px;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  color: #202020;
  margin-bottom: 16px;
}

.regularText {
  font-family: Open Sans;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  color: #202020;
  margin-bottom: 16px;
}

.paymentStatus {
  width: 370px;
  height: 24px;
}

.receipt {
  width: 567px;
  height: 24px;
  margin-bottom: 16px;
}

.receiptLink {
  font-family: Open Sans;
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  text-align: left;
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-underline-position: from-font;
  text-decoration-thickness: 1px;
  text-decoration-skip-ink: none;
  color: #2574A9;
}

.msg {
  width: 600px;
  height: 48px;
}

.buttonText {
  display: flex !important;
  justify-content: center;
  align-items: center;
  font-family: Open Sans;
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
  text-align: center;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  color: #FFFFFF;
  background: #394F7C;
  width: 226px;
  height: 24px;
  padding: 12px;
  border-radius: 4px;
}

a.buttonText:hover {
  text-decoration: none !important;
  color: #ffffff !important;
}

.header {
  width: 748px;
  height: 32px;
  font-family: Open Sans;
  font-size: 27px;
  font-weight: 300;
  line-height: 32px;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  color: #202020;
  margin-bottom: 16px;
}

.content {
  width: 786px;
  height: 48px;
  padding: 0px;
  margin: 0px;
  font-family: Open Sans;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  color: #202020;
}

.contentBox {
  height: 96px;
  gap: 16px;
  margin-bottom: 32px;
}

.btnManuaTax {
  width: 290px;
  height: 32px;
  padding: 8px !important;
  border-radius: 4px !important;
  background: #FFFFFF !important;
  opacity: 0px;
  border: 1px solid #D1D1D6 !important;
  font-family: Open Sans;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 16px;
  text-align: center;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  color: #2574A9 !important;
  margin-top: 8px !important;
  box-shadow: none !important;
}

.iFrameContainer {
  border-radius: 8px;
  margin: 0px 61px 61px 61px !important;
}

.iFrame iframe {
  display: flex;
  justify-content: center;
  width: 94%;
  height: 730;
  aspect-ratio: 16 / 9;
  margin-bottom: 32px;
}

.footerContents {
  width: 322px;
  height: 64px;
}

.manualTax {
  width: 322px;
  height: 24px;
  font-family: Open Sans;
  font-size: 14px;
  font-weight: 600;
  line-height: 24px;
  text-align: left;
  margin-bottom: 0px !important;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  color: #51525C;
}

.dataDirectImage {
  width: 140.73px;
  height: 115px;
  margin-bottom: 16px;
}

.disableIRS {
  pointer-events: none !important;
  opacity: 0.5;
  cursor: not-allowed;
}

.taxStatusPageMessage #taxStatusErrorMessage {
  width: 600px;
  margin: 0 auto;
  padding-top: 30px;
}

#spinnerOverlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9999;
  display: none;
}

.spinnerDiv {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50px;
  height: 50px;
  border: 5px solid #f3f3f3;
  border-top: 5px solid #1589ee;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }

  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}