/* Bootstrap overides*/
.card {
    border: none;
    padding: 0;
    border-color: none !important;
}

.card-body {
    padding: 0;
}

/* Dark Mode */
.dark-ui .sk-h1 {
color: #ffffff; 
}

.dark-ui main {
    background: #000000;
}

@media (min-width: 1200px) {
    .container {
    max-width: 1320px;

    }
}

/* = PCH Specific classes = */
.pch-80-white {
    color: rgba(255, 255, 255, .8);
}

/* Header Gradient */
.fed-header-left-gradient, .fed-header-right-gradient {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 200px; 
    z-index: 0;
}


/* Left gradient */
.fed-header-left-gradient {
    left: 0px;
    background: radial-gradient(circle at 0% 75%, rgba(0,208,255,.25), rgba(1,19,199,0) 95%); 
}

/* Right gradient */
.fed-header-right-gradient {
    right: 0px;
    background: radial-gradient(circle at 90% 0% ,  rgba(255,53,225,.27), rgba(1,19,199,0) 95%); 
}


/* = Components Lib Overides = */

/* - PCH Specific - */



/* Container */
.sk-header {
    border-bottom: solid 2px #8089bb;
}

.fed-logo-header {
    max-height:45px;
}

.fed-logo-footer {
  max-height: 55px;
  padding-bottom: 10px;
}

.sk-footer a[href^="tel"] {
    color: #00D0FF;
}
    .sk-footer a[href^="tel"]:hover {
    color: #ACE5FF;
}

.sk-footer, .sk-footer-bottom, .sk-header {
    background-color: #011377;
}

   .sk-footer-bottom nav ul li a, .fed-light-link  {
        color: #00D0FF;
    }

    .fed-light-link:hover, .sk-footer-bottom nav ul li a:hover {
         color: #ACE5FF;
       }

.sk-footer-bottom {
    font-size: .75rem;
}
/* end container */

/* Typography */
.sk-h1, .sk-h2 {
    font-family: 'Anek Malayalam', system-ui, sans-serif;
    
}

.sk-font-sans {
    font-family: 'Inter', system-ui, sans-serif;
}

.sk-h4 {
font-weight: 700;
line-height: 1.375rem;
}


.sk-h1 {
    color: #011377;
    font-size: 2.5rem;
    font-style: normal;
    font-weight: 500;
    line-height: 2.24rem;
    text-transform: none;
}

.fed-ty-header {
    font-family: 'Anton', sans-serif;
    font-size: 5rem;
    font-style: normal;
    font-weight: 400;
    line-height: 5rem; /* 100% */
    letter-spacing: -0.05rem;
    text-transform: uppercase;
}

.fed-subhead {
    font-size: 1.25rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.25rem;
}

/* Buttons */
.sk-toggle-button:first-child label {
		border-top-left-radius: .75rem;
		border-bottom-left-radius: .75rem
	}

    .sk-toggle-button:last-child label {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }

.sk-toggle-button:nth-child(2) label {
		border-top-right-radius: .75rem;
		border-bottom-right-radius: .75rem;
	}

.active.sk-btn-payment-creditcard {
    background-color: #0053CB;
    color: #ffffff;
}

.sk-btn-payment {
    border-radius: 0.75rem;
    background: #E9EFF5;
    color: #1E293B;
     border: solid 2px #ffffff;
}
    .sk-btn-payment:hover {
        background: #0053CB;
        color: #ffffff;
    }

   .sk-btn-payment:focus {
      box-shadow: 0px 0px 0px 3px rgba(0, 208, 255, 0.40);
    }

.sk-btn-share {
    color: #ffffff !important;
}

 /* END buttons */

 /* Inputs */
.sk-radio-option-card>div, .sk-radio-card>div {
    border: 1px solid #94A3B8;
    border-radius: 0.75rem;
}

.sk-radio-option-card:hover>div, .sk-radio-card:hover>div {
-webkit-box-shadow: 0px 0px 0px 3px #99ECFF; 
   box-shadow: 0px 0px 0px 3px #99ECFF;
}

.sk-radio-option-card input[type=radio]:checked ~ div, .sk-radio-card input[type=radio]:checked ~ div {
    border-width: 1px;
    border-color: #ffffff;
    background-color: #ffffff;
    -webkit-box-shadow: 0px 0px 0px 2px #0053CB, 0px 0px 0px 5px #99ECFF; 
    box-shadow: 0px 0px 0px 2px #0053CB, 0px 0px 0px 5px #99ECFF;
    outline:0;
}

.sk-toggle-button input[type=radio]:focus-visible ~ label, .sk-toggle-button input[type=radio]:focus ~ label {

     box-shadow: 0px 0px 0px 2px #99ECFF;
}

.sk-form-input input[type="text"], .sk-form-input input[type="tel"], .sk-form-input input[type="email"], .sk-form-input input[type="number"], .sk-form-input textarea {
    border-radius: 0.5rem;
    border: 1px solid #94A3B8;
    background: #ffffff;
}

.sk-form-select select {
        border: 1px solid #94A3B8;
}


.sk-form-input input[type=text]:focus,
.sk-form-input input[type=tel]:focus,
.sk-form-input input[type=email]:focus, 
.sk-form-input input[type=number]:focus, 
.sk-form-input textarea:focus, 
.sk-form-select.sk-form-required select:focus, 
.sk-form-select select:focus,
.sk-radio-card>div:focus
    {
      box-shadow: 0px 0px 0px 2px #99ECFF;
        border: solid 1px #00D0FF;
        outline: none;
    }

    .sk-form-input input[type=text]:focus-visible,
    .sk-form-input input[type=tel]:focus-visible, 
    .sk-form-input input[type=email]:focus-visible,
    .sk-form-input input[type=number]:focus-visible, 
    .sk-form-input textarea:focus-visible, 
    .sk-form-select.sk-form-required select:focus-visible,
    .sk-form-select select:focus-visible,
    .checkbox:focus-visible,
    .sk-radio-card>div:focus-visible
    {
        box-shadow: 0px 0px 0px 2px #99ECFF;
        border: solid 1px #00D0FF;
        outline: none;
    }

    .sk-btn-payment:focus-visible,
    .sk-btn-primary:focus-visible,
    .sk-btn-payment:focus,
    .sk-btn-primary:focus 
    {
        outline: none;
        box-shadow: 0px 0px 0px 2px #99ECFF;
        -webkit-box-shadow: 0px 0px 0px 2px #99ECFF; 
    }

.fed-2fa-digit {
    max-width: 15px;
}

/* End Inputs */
.sk-form-input.sk-form-money .sk-form-money-symbol {
 position: relative;
 top: 43px;
}


a.sk-btn-share:hover {
    color: #DBDBDB;
}
.sk-toggle-button {
		display: inline-block;
		width: 50%;
		font-size: 1rem;
	}

	.sk-toggle-button label {
		display: flex;
		height: 3rem;
		cursor: pointer;
		align-items: center;
		justify-content: center;
		--tw-bg-opacity: 1;
		background-color: rgb(245 245 245 / var(--tw-bg-opacity));
		/* padding-left: 2.75rem;
		padding-right: 2.75rem; KQ: can we remove/reduce left/right padding - wraps line on mobile and breaks */
		font-weight: 600;
		--tw-text-opacity: 1;
		color: rgb(37 37 37 / var(--tw-text-opacity));
		transition-property: all;
		transition-timing-function: cubic-bezier(.4, 0, .2, 1);
		transition-duration: .2s
	}

        .sk-toggle-button input:focus-visible, .sk-toggle-button input:focus-visible, .sk-toggle-button input:focus, .sk-toggle-button input:focus  {
            box-shadow: 0px 0px 0px 3px rgba(0, 208, 255, 0.40);
            border: 1px solid #99ECFF;
            outline: none;
        }

		.sk-toggle-button label:hover {
			--tw-shadow: none;
			--tw-shadow-colored: none;
			box-shadow: none;
            text-decoration: underline;
		}

	.sk-toggle-button svg {
		margin-right: .25rem
	}

	.sk-toggle-button input[type=radio]:checked ~ label {
		--tw-bg-opacity: 1;
		background-color: #0053CB;
		--tw-text-opacity: 1;
		color: #ffffff;
	}

    .sk-toggle-button label {
        background-color: #E9EFF5;
        color: #252525;
    }


.sk-toggle-button label {
    padding-left: 0;
    padding-right: 0;
}
.sk-toggle-button {
    width: 100%;
}

.sk-paragraph {
    font-size: 1rem;
}
.sk-form-select-chevron {
    top: 1rem;
    height: 1.5rem;
}

.hide {
    display:none;
}

.sk-btn-payment {
    max-width: 100%;
    padding: 1rem 0;
    height: initial;
}

.sk-radio-option-card {
    width: auto;
    margin-top: auto;
}

.sk-paragraph {
  color: #737373;
}

.sk-form-select select {
    color: rgb(37, 37, 37);
}

.sk-form-select.sk-form-required select {
    padding-top: 14px;
}

.fed-select-has-top-label select {
padding-top: 0 !important;
}

.sk-form-select.sk-form-required label {
    top: 5px;
    left: 17px;
    clip: auto;
    width:auto;
    height: auto;
    font-size: .8rem;
    color: rgb(115, 115, 115);
    margin: 0;
    font-weight: 500;
}

.sk-btn-primary, .sk-btn-dark {
    width: 100%;
}

.sk-btn-primary {
    color: #252525;
     border: solid 2px #ffffff;
     border-radius: 0.75rem;
}

@media (min-width: 1536px) {
    .sk-footer-container, .sk-header-container {
        max-width: 1336px;
    }
}

.sk-header, .sk-footer {
    z-index: 1000;
}

.sk-footer {
    position: relative;
}

@media (max-width: 1024px) {
    .fed-legal-copy {
    width:100%;
    }
}

/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
.dl-horizontal dt {
    white-space: normal;
}

/* Paypal button active states */
.active.sk-btn-payment-paypal {
--tw-bg-opacity: 1;
    background-color: rgb(37 59 128 / var(--tw-bg-opacity));
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity));
}

.active svg.sk-svg-inactive {
    display: none;
}
.active svg.sk-svg-active {
    display: block;
}



.sk-form-required option::after {
    content: '\0021';
  color: red;
  font-style: italic;
}

/* Global Styles */
a {
    color: #0053CB;
}

    a:hover {
        color: #00D0FF;
    }

legend {
 font-size: 1rem;
}

form {
    padding: 0 5px;
}

.fed-callout-royal-blue {
    color: #0053CB;
}

/* Rule to remove up/down picker for numbers end line 209 */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}

input[type=number] {
    -moz-appearance:textfield; /* Firefox */
}

.has-error input, .has-error select, .has-error textarea {
    --tw-border-opacity: 1 !important;
    border-color: rgb(185 28 28 / var(--tw-border-opacity)) !important;
    --tw-shadow: 0 0 0 3px #fee2e2 !important;
    --tw-shadow-colored: 0 0 0 3px var(--tw-shadow-color) !important;
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow) !important;
}

.fed-hero-img-wrapper {
    height: 100vh;
    position: fixed;
    right: 50%;
    width: 650px;
    top: 64px;
    padding-left: 1rem;
    padding-right: .9rem;
}

.fed-hero-img-bg {
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position-x: center;
    background-position-y: top;
    
   }

.fed-vh-100 {
 min-height: 100vh;
}

.fed-fade-in {
    animation: fadeInAnimation ease 4s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

.fed-info-card {
    background: #F8FAFC;
    border-radius: .75rem;
    border: solid 1px #94A3B8;
    padding: 1rem 1rem 2.3rem 1rem;
}



@keyframes fadeInAnimation {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
     }
}



.has-error .help-block {
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: .5rem;
    font-size: 1rem;
    line-height: 1rem;
    font-weight: 500;
    --tw-text-opacity: 1;
    color: rgb(185 28 28 / var(--tw-text-opacity));
}

.fed-header {
    margin-left: auto;
    margin-right: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

@media (min-width: 1024px) {
.fed-header {
    justify-content: space-between;
    }
}

.fed-link-no-style {
    color: #ffffff !important;
    text-decoration: none;
    transition: opacity .15s ease-in
}

.fed-link-no-style:hover {
    opacity: 0.7;
}

.fed-footer {
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    text-align: center;
}

@media (min-width: 1024px) {
    .fed-footer {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    text-align: left;
    }

}

.fed-expiry-validation .fed-form-group {
    margin-bottom: 0;
    margin-top: -30px;
}

.fed-expiry-validation .help-block {
    padding: 1rem 1rem;
    margin-bottom: 1.5rem;
    border: 1px solid transparent;
    border-color: #ffdede;
    border-radius: 0.25rem;
    font-size: 1rem;
    line-height: 1rem;
    font-weight: 500;
    --tw-text-opacity: 1;
    color: rgb(185 28 28 / var(--tw-text-opacity));
    text-align: center;
    background: #fcebeb;
}


.fed-dark-container {
    background: #010101;
    background-position: bottom;
    color: #ffffff;
}

    .fed-dark-container p {
        color: #A3A3A3;
    }


.fed-hero-img {
    position: absolute;
}

.fed-ty-image img {
 position: absolute;
 border-top-left-radius: 0.75rem;
 border-top-right-radius: 0.75rem;

}

@media (max-width: 1199.98px) { 
    .fed-ty-image img {
        position: static;
}
}

.fed-required {
    color: #e00a0a;
}

.fed-card {
    flex: auto;
}

.fed-card-ty {
    border: 1px solid #CBD5E1;
    padding: 1rem;
    background: radial-gradient(circle at 11% 4%, rgba(0, 83, 203, 1) 52%, rgba(0, 104, 255, 0.91) 100%);
    border-radius: 6px;
    color: #ffffff;
    border-radius: 0.75rem;
}
    .fed-card-ty a {
        color: #ACE5FF;
    }

    .fed-card-ty p {
        font-family: 'Inter', system-ui, sans-serif;
        font-size: 0.875rem;
        font-style: normal;
        font-weight: 400;
        line-height: 0.875rem;
        margin-top: .4rem;
    }

    .fed-card-ty .sk-h2 {
        font-family: 'Anek Malayalam', system-ui, sans-serif;
        font-size: 1.5rem;
        font-style: normal;
        font-weight: 500;
        line-height: 2.0625rem;
        text-transform: initial;
    }

    .fed-card-ty .sk-h4 {
        font-family: 'Inter', system-ui, sans-serif;
        font-size: 1rem;
        font-style: normal;
        font-weight: 600;
        line-height: 1.375rem;
    }

.fed-card-dark-bg {
    background: #000000;
}

.fed-dedication-icon {
    max-width: 50px;
}

.fed-page-break {
    background: #D4D4D4;
    margin-top: 30px;
}

/* Modal and Yellow card styles */
.fed-modal, .fed-modal p, .fed-modal .sk-h1, .fed-modal .sk-h5 {
    color: #212529;
}

.fed-modal .modal-dialog {
    max-width: 550px;

    }

.fed-modal p {
   font-weight: 500;
}

.fed-modal .modal-body {
    padding: 1rem 1.5rem; 
}

.fed-modal .modal-header {
    border: none;
    padding-bottom: 0;
}

.fed-card-yellow {
  border: 1px solid #CBD5E1;
    padding: 1rem;
    background: radial-gradient(circle at 11% 4%, rgba(0, 83, 203, 1) 52%, rgba(0, 104, 255, 0.91) 100%);
    border-radius: 6px;
    color: #ffffff;
    border-radius: 0.75rem;
} 

    .fed-card-yellow button {
        margin-bottom: .5rem;
    }

    .fed-modal .sk-h1 {
        margin-top: 0;
    }

.fed-card-yellow p {
    font-family: 'Inter', system-ui, sans-serif;
        font-size: 0.875rem;
        font-style: normal;
        font-weight: 400;
        line-height: 1.3rem;
        margin-top: .4rem;
        color: #ffffff;
}

.fed-card-yellow .sk-btn-primary {
   text-transform: none;
   border: none; 
   border-radius: .75rem;
}

.fed-card-yellow .fed-button-link {
    color: #ffffff;
}

/* End modal */

.fed-nudge-msg {
    background: #FFF7FF;
    border-radius: 0.75rem;
    border: 1px solid #FFD9FF;
    color: #C823C8;
}

.fed-nudge-msg span {
    font-weight: bold;
}

.fed-form-group {
    margin-bottom: 1rem;
}

.fed-top-label {
    color: #252525;
    font-weight: 600;
    margin-bottom: .5rem;
}

.fed-legend {
    margin-top: 1.75rem;
}

.fed-text-clip {
   text-overflow: ellipsis;
   max-width:100px;
}

.fed-btn-blue {
    background-color: #00d0ff;
    color: #011377;
    border: none;
    border-radius: 0.75rem;
}

    .fed-btn-blue:hover {
        color: #ffffff;
        background-color: #011377;
    }

.fed-btn-blue:hover {
    background-color: #17369c !important;
}

.fed-button-link {
    background: none !important; 
}

/* Nudge styles */
.fed-nudge-container {
	display: none;
	text-align: center;
	padding-top: 18px;
}

	.fed-nudge-container .fed-nudge {
		position: relative;
		max-width: 315px;
		display: inline-block;
		padding: 0 25px 0 35px;
		text-align: center;
		font-family: "Caveat Brush", sans-serif;
		font-size: 1.4rem;
		line-height: 1.6;
		color: #405284;
		background-position: center 1.4rem;
		background-size: 80%;
		background-repeat: repeat-y;
    
	}

    @media only screen and (max-width: 535px)  {
        .fed-nudge-container .fed-nudge {
            margin-left: 10px;
        }
    }

	.fed-nudge-container .fed-nudge::before {
		position: absolute;
		left: 10px;
		top: -30px;
		content: url('../images/arrow.png');
	}

		.fed-nudge-container .fed-nudge .fed-nudge-text {
		   color: #32557f;
		   background: no-repeat 0 100%;
		   background-image: url('../images/squiggle.png');
		   background-size: 100% 5px;
		   padding: 5px;
		}

@media (min-width: 576px) {
	.fed-nudge-container .fed-nudge {
		max-width: 370px;
	}
}

/* Firefox specific styles to address bug with sticky scrolling */
@-moz-document url-prefix() {

    .fed-hero-img {
        position: static;
    }

    .fed-vh-100 {
        min-height: 100vh;
    }
}