@font-face {
  font-family: "Recoleta Alt Semibold";
  font-style: italic;
  font-weight: 400;
  src: local("Recoleta Alt Semibold Regular Italic"),url("/resources/client/Fonts/recoletaalt-semibold.otf") format("opentype");
  font-display: swap;
}

@font-face {
  font-family: "Recoleta Alt Semibold";
  font-style: normal;
  font-weight: 400;
  src: local("Recoleta Alt Semibold Regular"),url("/resources/client/Fonts/recoletaalt-semibold.otf") format("opentype");
  font-display: swap;
}

@font-face {
  font-family: "Recoleta Alt Semibold";
  font-style: italic;
  font-weight: 700;
  src: local("Recoleta Alt Semibold Bold Italic"),url("/resources/client/Fonts/recoletaalt-semibold.otf") format("opentype");
  font-display: swap;
}

@font-face {
  font-family: "Recoleta Alt Semibold";
  font-style: normal;
  font-weight: 700;
  src: local("Recoleta Alt Semibold Bold"),url("/resources/client/Fonts/recoletaalt-semibold.otf") format("opentype");
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  font-style: italic;
  font-weight: 400;
  src: url(/resources/client/Fonts/Inter-Italic-VariableFont_opsz,wght.ttf) format("truetype");
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  src: url(/resources/client/Fonts/Inter-VariableFont_opsz,wght.ttf) format("truetype");
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  font-style: italic;
  font-weight: 700;
  src: url(/resources/client/Fonts/Inter-Italic-VariableFont_opsz,wght.ttf) format("truetype");
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  src: url(/resources/client/Fonts/Inter-VariableFont_opsz,wght.ttf) format("truetype");
  font-display: swap;
}

:root {
  --primary-background-color: #fff;
  --secondary-background-color: #fff;
  --menu-border-color: #0061f2;
  --primary-text-color: #006EF5;
  --glass-border-color: rgb(123 201 206 / 31%);
  --secondary-text-color: #000000;
  --button-color: #0061f2;
  --button-text-color: #fff;
  --disabled-button-color: #006EF5;
  --layout-text-size: 14px;
  --table-alternate-row-background-color: #eee;
  /* WIP Replace the logo */
  --logo-url: url(/resources/client/images/logo.png);
  --font: "Inter", Roboto, "FreeSans", Helvetica, Arial, sans-serif;
  --bs-primary: #006EF5;
  --bs-table-striped-bg: #006EF5;
  --bs-nav-link-color: #021E35;
  --bs-nav-link-hover-color: #006EF5;
  --bs-link-color: #021E35;
  --bs-link-hover-color: #006EF5;
  --bs-emphasis-color-rgb: 33, 102, 177;
  --bs-body-color-rgb: 33, 102, 177;
  --bs-card-height: 400px;
  --bs-btn-disabled-border-color: #808080;
  --bs-btn-border-color: #006EF5;
  --bs-btn-color: #006EF5;
  --faded-primary: rgba(33, 102, 177, 0.65);
  /*--primary-button-color: #0076D6;*/
  --primary-button-color: #006EF5;
  --primary-button-text-color: #fff;
  /*--primary-button-text-color: #021E35; */
  --primary-button-text-hover-color: #FFF;
  --bs-card-cap-bg: #006EF5 !important;
  --client-btn-color: #006EF5;
  --bs-btn-disabled-bg: #006EF5 !important;
  --bs-link-color-rgb: 2,30,53;
  --bs-link-color-hover-rgb: 0,110,245;
  --bs-heading-color: #021E35 !important;
  --bs-font-sans-serif: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --bs-card-color: #021E35 !important;
  --bs-body-color: #021E35 !important;
}

body {
  font-family: var(--bs-body-font-family);
  color: #021E35 !important;
}

.card-body {
  color: #021E35 !important;
}


.card-header {
  color: #fff;
  background-color: #006EF5;
}

.logo-text {
  /*display: none;*/
  font-size: 1.3rem !important;
  font-weight: 700;
}

footer .logo-text, header .logo-text {
  display: none;
}

.btn-primary:hover, .btn-primary:focus {
  /*background-color: var(--primary-button-text-color);*/
background-color: #021E35 !important;
  border-color: var(--primary-button-text-color); 
  color: var(--primary-button-text-hover-color)!important;
}

a.btn-primary:hover, a.btn-primary:focus  {
	color: var(--primary-button-text-hover-color)!important;	
}


.loader {
  border-top: 1.1em solid rgba(0,114,207, 0.2);
  border-right: 1.1em solid rgba(0,114,207, 0.2);
  border-bottom: 1.1em solid rgba(0,114,207, 0.2);
  border-left: 1.1em solid #006EF5;
}

.welcome-box-2 {
  background-color: #F6F6F6;
  padding-top: 1.5rem !important;
  padding-bottom: 1.5rem !important;
  padding-left: 2rem !important;
width: unset!important;
}

  .welcome-box-2 h1.text-white, .welcome-box-2 h2.text-white, .welcome-box-2 h3.text-white, .welcome-box-2 h4.text-white {
    color: #021E35 !important;
  }

header .navigation {
  border-bottom: 1px solid #000!important;
}

.section-what-todo {
  padding-top: 10px!important;
}

.section-what-todo .section-title {
  margin-bottom: 0px !important;
}

  .section-what-todo .subtitle {
    color: #fff;
  }

.section-what-todo.bg-white {
  margin-bottom: -130px;
}

.section-what-todo .section.bg-secondary {
  padding-top: 100px;
}


@media (max-width: 767.98px) {
  .page-top-banner {
    background-image: none !important;
    background-color: #006EF5 !important;
    min-height: 0px !important;
    padding-top: 2vh;
    padding-bottom: 1vh;
  }

  .section.my-layout {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
  }

  .welcome-section {
    min-height: unset!important;
   }

  .welcome-box-2 {
    margin-top: 1rem !important;
    width: 99%!important;

/*    background-color: #F6F6F6;
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
    padding-left: 2rem !important;*/

  }

  .parallax {
    background-size: cover!important;
  }
}

@media (max-width: 1199px) {
  .logo-text {
    display: none;
  }
}

ul.nav-link::after {
  display: none !important;
}

.bg-secondary {
  background: #021E35 !important;
}

footer .bg-secondary {
  background: #F6F6F6 !important;
}

footer .text-white, footer .text-light, footer .text-light2 {
  color: #021E35 !important;
}

footer .section {
  padding-top: 30px !important;
  padding-bottom: 10px !important;
}

footer .bg-secondary-darken {
  background: #021E35 !important;
}

footer .bg-secondary-darken .text-white, footer .text-primary {
  color: #ffffff !important;
}

footer li a.text-light, footer li a.text-light2, footer li:before {
  color: #021E35 !important;
}

  footer li a.text-light:hover, footer li a.text-light2:hover {
    color: var(--bs-nav-link-hover-color) !important;
  }


.btn.disabled, .btn:disabled, fieldset:disabled .btn {
  background-color: #006EF5;
  border-color: #006EF5;
/*  opacity: var(--bs-btn-disabled-opacity);*/
  }

h1, h2, h3, .h2, .h3, #new-title {
  font-style: normal;
  font-weight: 700;
  font-size: 40px;
  line-height: 40px;
  font-family: 'Recoleta Alt Semibold';
}

h3, .h3 {
  font-style: normal;
  font-weight: 700;
  font-size: 32px;
  line-height: 45px;
  font-family: 'Recoleta Alt Semibold';
  color: #000000;
}

.welcome-box-2 .primary-color {
  color: #006EF5 !important;
}

.welcome-box, .welcome-box-2 {
  border-radius: 0;
}

.icon-bg {
  border-color: #000 !important
}

  .icon-bg .icon {
    color: #021E35 !important
  }

.hover-bg-dark {
  color: #021E35 !important;
}

  .hover-bg-dark:hover, .hover-bg-dark.active {
    color: #fff !important;
  }

  .hover-bg-dark:hover .icon-bg, .hover-bg-dark.active .icon-bg {
    border-color: #fff !important;
    color: #fff !important;
  }

  .hover-bg-dark:hover .icon-bg .icon, .hover-bg-dark.active .icon-bg .icon {
    color: #fff !important;
  }

.panel-questions .panel-title, .card-body h3.text-primary, .panel-body h3, h2.card-header  {
  font-family: "Inter" !important;
}

.block-downloads-style2 li {
  margin-top: 0px!important;
}

#new-title.inner-shadow {
  text-shadow: unset !important;
  -webkit-background-clip: unset !important;
  -moz-background-clip: unset !important;
}

#new-title {
  /*width: 50% !important; */
  background-color: #F6F6F6;
  border-radius: 0px;
  padding: 15px 25px 15px 25px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  color: var(--bs-heading-color) !important;
  padding-top: 1.5rem !important;
  padding-bottom: 1.6rem !important;
  clear: left;
  float: left;
}


@media (min-width: 768px) {

	header .img-fluid {
		/*height: 50px! important;*/
		margin-bottom: 10px;
	}

	footer .img-fluid {
		/*height: 70px! important;*/
		margin-bottom: 10px;
	} 


	.card-body {
	padding: 2rem !important;
	}

	.section {
		background-origin: content-box;
	}

  .page-top-banner {
    padding-top: 200px;
    padding-bottom: 200px;
    background-origin: unset !important;
    /*box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);*/
  }

  .page-top-banner:has(h1[css-ref="Review Changes"]), .page-top-banner:has(h1[css-ref="Case In Progress"]) {
    background-image: url(/Resources/Client/images/ssp-review-changes.jpg) !important;
  }

  .page-top-banner:has(h1[css-ref="My Details"]), .page-top-banner:has(h1[css-ref="Change Contact Details"]), .page-top-banner:has(h1[css-ref="Communication Preferences"]), .page-top-banner:has(h1[css-ref="My Plans"]) {
    background-image: url(/Resources/Client/images/ssp-my-details.jpg) !important;
  }

  .page-top-banner:has(h1[css-ref="My Cases"]) {
    background-image: url(/Resources/Client/images/ssp-my-cases.jpg) !important;
  }

  .page-top-banner:has(h1[css-ref="My Documents"]) {
    background-image: url(/Resources/Client/images/ssp-my-documents.jpg) !important;
  }

  .page-top-banner:has(h1[css-ref="Pay History"]), .page-top-banner:has(h1[css-ref="Pay Details"]) {
    background-image: url(/Resources/Client/images/ssp-pay-history.jpg) !important;
  }

  .page-top-banner:has(h1[css-ref="Submit Documents"]) {
    background-image: url(/Resources/Client/images/ssp-submit-documents.jpg) !important;
  }

  .page-top-banner:has(h1[css-ref="Benefit Estimate"]), .page-top-banner:has(h1[css-ref="Manual Calculation"]) {
    background-image: url(/Resources/Client/images/ssp-benefit-estimate.jpg) !important;
  }

  .page-top-banner:has(h1[css-ref="Tax Withholding"]) {
    background-image: url(/Resources/Client/images/ssp-tax-withholding.jpg) !important;
  }

  .page-top-banner:has(h1[css-ref="Direct Deposit Change"]) {
    background-image: url(/Resources/Client/images/ssp-direct-deposit-change.jpg) !important;
  }

  .page-top-banner:has(h1[css-ref="Change Password"]) {
    background-image: url(/Resources/Client/images/ssp-change-password.jpg) !important;
  }

  /* Untouched */
  .page-top-banner:has(h1[css-ref="Security"]) {
    background-image: url(/Resources/Client/images/ssp-security.jpg) !important;
  }

}

@media (min-width: 992px) {
	header .img-fluid {
		height: 70px! important;
		margin-bottom: 0px! important;
	}

	footer .img-fluid {
		/*height: 70px! important;*/
	} 
}

@media (max-width: 991.98px) {
	
	header .img-fluid {
		height: 65px! important;
		margin-bottom: 3px;
	}

	footer .img-fluid {
		/*height: 65px! important;*/
		margin-bottom: 10px;
	} 

	#new-title {
		font-size: 35px !important;
		/*width: 80% !important;*/
	}
}


@media (max-width: 767.98px) {

	header .img-fluid, footer .img-fluid {
		height: 60px! important;
		margin-bottom: 3px;
	}  

	footer .logo-footer {
		height: 50px! important;
		margin-bottom: 10px;
		margin-top: 10px;
	} 


	#new-title {
		padding-top: 1rem !important;
		padding-bottom: 1rem !important;
		font-size: 30px !important;
		/*width: 100% !important;*/
		margin-bottom: 0.5rem!important;
	  }
}


.parallax {
  background-attachment: unset;
}

.fa-gears:before, .fa-user:before, .fa-book:before, .fa-usd:before, .icon-bg .fa-file-text:before, .icon-bg .fa-file-pdf-o:before, .fa-cogs:before, .fa-lock:before, .fa-mobile:before {
  content: unset !important;
}

.icon-bg {
    background-color: #fff;
	border-radius: 60px;
	background-size: cover!important;
	background-origin: content-box;
	background-repeat: no-repeat;
	padding: 10px!important;
}

.icon-bg:has(i.fa-gears){
	background-image: url(/Resources/Client/images/personal-data-black.png)!important;
}
.hover-bg-dark:hover .icon-bg:has(i.fa-gears), .hover-bg-dark.active .icon-bg:has(i.fa-gears) {
	background-image: url(/Resources/Client/images/personal-data-navy.png)!important;
}

.icon-bg:has(i.fa-user) {
	padding: 0px!important;
	background-image: url(/Resources/Client/images/contact-details-black.png)!important;
}
.hover-bg-dark:hover .icon-bg:has(i.fa-user), .hover-bg-dark.active .icon-bg:has(i.fa-user) {
	background-image: url(/Resources/Client/images/contact-details-navy.png)!important;
}

.icon-bg:has(i.fa-book){
	background-image: url(/Resources/Client/images/my-addresses-black.png)!important;
}
.hover-bg-dark:hover .icon-bg:has(i.fa-book), .hover-bg-dark.active .icon-bg:has(i.fa-book) {
	background-image: url(/Resources/Client/images/my-addresses-navy.png)!important;
}

.icon-bg:has(i.fa-usd){
	background-image: url(/Resources/Client/images/payment-history-black.png)!important;
}
.hover-bg-dark:hover .icon-bg:has(i.fa-usd), .hover-bg-dark.active .icon-bg:has(i.fa-usd) {
	background-image: url(/Resources/Client/images/payment-history-navy.png)!important;
}

.icon-bg:has(i.fa-file-text){
	padding: 15px!important;
	background-image: url(/Resources/Client/images/personal-documents-black.png)!important;
}
.hover-bg-dark:hover .icon-bg:has(i.fa-file-text), .hover-bg-dark.active .icon-bg:has(i.fa-file-text) {
	padding: 15px!important;
	background-image: url(/Resources/Client/images/personal-documents-navy.png)!important;
}

.icon-bg:has(i.fa-file-pdf-o){
	padding: 15px!important;
	background-image: url(/Resources/Client/images/forms-and-guides-black.png)!important;
}
.hover-bg-dark:hover .icon-bg:has(i.fa-file-pdf-o), .hover-bg-dark.active .icon-bg:has(i.fa-file-pdf-o) {
	padding: 15px!important;
	background-image: url(/Resources/Client/images/forms-and-guides-navy.png)!important;
}

.icon-bg:has(i.fa-lock){
	padding-top: 10px!important;
	padding-bottom: 30px!important;
	padding-left: 25px!important;
	padding-right: 25px!important;
	background-image: url(/Resources/Client/images/security-black.png)!important;
}
.hover-bg-dark:hover .icon-bg:has(i.fa-lock), .hover-bg-dark.active .icon-bg:has(i.fa-lock) {
	padding-top: 15px!important;
	padding-bottom: 20px!important;
	padding-left: 20px!important;
	padding-right: 20px!important;
	background-image: url(/Resources/Client/images/security-navy.png)!important;
}

.icon-bg:has(i.fa-mobile){
	padding-top: 10px!important;
	padding-bottom: 30px!important;
	padding-left: 25px!important;
	padding-right: 25px!important;
	background-image: url(/Resources/Client/images/authenticator-black.png)!important;
}
.hover-bg-dark:hover .icon-bg:has(i.fa-mobile), .hover-bg-dark.active .icon-bg:has(i.fa-mobile) {
	padding-top: 10px!important;
	padding-bottom: 30px!important;
	padding-left: 25px!important;
	padding-right: 25px!important;
	background-image: url(/Resources/Client/images/authenticator-navy.png)!important;
}

.hover-bg-dark:hover, .hover-bg-dark.active {
    background: #021E35 !important;
    cursor: pointer;
}

.hover-bg-dark.active {
    background: #021E35 !important;
    cursor: pointer;
}

input.form-check-input, select.form-check-input {
  border: 1px #383838 solid !important;
}

#DropZoneLink span {
  color: #fff!important;
}

.navbar .dropdown-item {
    font-family: "Inter", sans-serif;
}

.table-striped>tbody>tr:nth-of-type(odd)>* {
    background-color: #F6F6F6;
}

.card-footer {
    background-color: #F6F6F6;
}

.accordion-button:not(.collapsed) {
    background-color: #F6F6F6;
}

a, footer li a.text-light, footer li a.text-light2 {
    color: var(--primary-button-color)!important;
}


a:hover, footer li a.text-ligh:hover, footer li a.text-light2:hover{
    color: #021E35 !important;
}

.navigation a {
	color: #021E35 !important;
}

.navigation a:hover {
    color: var(--primary-button-color)!important;
}

.btn-arrow:before, .btn-arrow:after{
	display: none!important;
}

.login-topbanner {
	background-color: var(--primary-button-color)!important;
	color: #FFF!important;
	text-align: center;
	margin-top: 0rem;
}



.modal-body {
    margin-left: 0.5rem;
}

#myModalLoading .modal-body {
    margin-left: 0rem;
}

.product-disclosure {
    background-color: #F6F6F6;
    border-color: #dee2e6;
    border-style: solid;
    border-width: 0.5px;
}
.product-disclosure .text-center {
	font-size: 0.8rem!important;
}


.login-section {
  height: unset;
  margin-bottom: 20px;
}

@media (max-width: 768px) {
  .login-section {
    margin-bottom: -15rem;
  }
}


.panel-questions {
  max-height: 600px;
  overflow: auto;
  scrollbar-width: auto;
  scrollbar-color: var(--bs-primary) #F6F6F6;
  scroll-behavior: smooth;
}

/*

/* SCROLL */
body::-webkit-scrollbar {
  width: 10px;
}

body::-webkit-scrollbar-track {
  background-color: #F6F6F6 !important;
}

body::-webkit-scrollbar-thumb {
  background: var(--bs-primary);
  border-radius: 4px;
}

body::-webkit-scrollbar-thumb:hover {
  background: #426694;
}

/* SCROLL */
div::-webkit-scrollbar {
  width: 10px;
}

div::-webkit-scrollbar-track {
  background-color: #F6F6F6 !important;
}

div::-webkit-scrollbar-thumb {
  background: var(--bs-primary);
  border-radius: 4px;
}

div::-webkit-scrollbar-thumb:hover {
  background: var(--bs-link-hover-color);
}

.address-change-option {
  border-left: 1px dashed var(--bs-primary);
  margin-bottom: 1.7rem;
}

.address-change-option .col-1 {
  margin-top: 10px;
}

.address-change-option .form-check-input[type=checkbox] {
  border-radius: 1.5em;
}

a.btn-cancel:hover {
    color: #fff!important;
}

.table td {
  color: var(--bs-body-color);
}

.table input {
  border: none;
  background-color: transparent !important;
  color: var(--bs-body-color);
}

.table th, .postalAddress .label-details {
  color: var(--bs-body-color) !important;
  /*font-weight:bold!important;*/
}

.welcome-section {
  min-height: calc(75vh);
  display: flex;
  align-items: center;
}

.welcome-box-2 h4 .primary-color {
  color: var(--bs-body-color) !important;
}

.my-plans-hide-0 {
	display: none!important;
}

.benefit-estimate-options table.review-options td, .benefit-estimate-options table.review-options th {
    text-align: left ! important;
}