@import url(//fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap);

#calculator-wrapper {
	font-family: MyriadPro-Regular, "Myriad Pro Regular", MyriadPro, "Myriad Pro", "Open Sans", Helvetica, Arial, sans-serif;  
}

@property --spin {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}
@keyframes spinning {
    0%{
        --spin: 0deg;
    }
    100% {
        --spin: 360deg;
    }
}

:root {
	--headline-text:  #0054A3;

	--button-background-color: #25408E;
	--button-hover-background-color: #25408E;
	--button-text-color: #FFFFFF;
	--button-hover-text-color: #FFFFFF;
	--button-border-color: #25408E;
	--button-hover-border-color: #25408E;

	--cta-button-background-color: #25408E;
	--cta-button-hover-background-color: #25408E;
	--cta-button-text-color: #FFFFFF;
	--cta-button-hover-text-color: #FFFFFF;
	--cta-button-border-color: #25408E;
	--cta-button-hover-border-color: #25408E;

	--button-radius: 30.72px;
	--cta-button-radius: 30.72px;
	--button-font-size: 15.36px;
	--button-weight: 725;
	--button-collapse-radius: 7.68px 7.68px 0 0;
	--disabled-button: #636363;
	--form-border: #156d16;
	
	
	--spin {
		syntax: "<angle>";
		initial-value: 0deg;
		inherits: false;
	}
}



.btn-primary::before {
content: "";
    position: absolute;
    top: -0.6rem;
    left: -0.6rem;
    right: -0.6rem;
    bottom: -0.6rem;
    border-radius: 2rem;
    padding: 0.2rem;
    pointer-events: none;
    mask: linear-gradient(#000 0 0) exclude, linear-gradient(#000 0 0) content-box;
    opacity: 0;
    transition: opacity 0.5s;
    background: conic-gradient(from var(--spin), #2AFC98, 40deg, #fff, 150deg, transparent, 200deg, #0F6BFF, 300deg, #2AFC98);
}

.btn-primary:hover::before { 
	opacity: 1;
	animation: spinning 2s linear infinite;
}





#calculator-wrapper div, #calculator-wrapper span, #calculator-wrapper input {
	border-radius:  0 !important;
}

#calculator-report-header {
	color: var(--headline-text);
}

#calculator-report-header-bar {
	border: 1px solid var(--headline-text);
}

.btn-primary {
	background-color: var(--button-background-color) !important;
	color: var(--button-text-color) !important;
	border-color: var(--button-border-color) !important; 
	border-radius:  var(--button-radius) !important;
	font-size: var(--button-font-size) !important;
	font-weight: var(--button-weight) !important;
position: relative;
}

.btn-primary:hover {
	background-color: var(--button-hover-background-color) !important;
	color: var(--button-hover-text-color) !important;
	border-color: var(--button-hover-border-color) !important;
}

.btn-primary.focus, .btn-primary:focus {
	background-color: var(--button-hover-background-color);
	color: var(--button-hover-text-color);
	border-color: var(--button-hover-border-color);
	box-shadow: none;
}

.btn-primary.active, .btn-primary:active,
.btn-primary:not(:disabled):not(.disabled):active {
	background-color: var(--button-hover-background-color);
	color: var(--button-hover-text-color);
	border-color: var(--button-hover-border-color);
	box-shadow: none;
}

.btn-primary:not(:disabled):not(.disabled).active:focus, .btn-primary:not(:disabled):not(.disabled):active:focus, .show>.btn-primary.dropdown-toggle:focus {   
	box-shadow: none; 
}

.btn-collapse {
	border-radius:  var(--button-radius) !important;
}

.card {
	border-radius: 0 0 0.25rem 0.25rem;
}

.row {
	max-width: 100%; 
	margin: 0;
}

.cta-wrapper .btn-primary {
	background-color: var(--cta-button-background-color) !important;
	color: var(--cta-button-text-color) !important;
	border-color: var(--cta-button-border-color) !important; 
	border-radius:  var(--cta-button-radius) !important;
     position: relative;
}


.cta-wrapper .btn-primary:hover {
	background-color: var(--cta-button-hover-background-color) !important;
	color: var(--cta-button-hover-text-color) !important;
	border-color: var(--cta-button-hover-border-color) !important;
}

.cta-wrapper .btn-primary.focus, .cta-wrapper .btn-primary:focus {
	background-color: var(--cta-button-hover-background-color);
	color: var(--cta-button-hover-text-color);
	border-color: var(--cta-button-hover-border-color);
}

.cta-wrapper .btn-primary.active, .btn-primary:active {
	background-color: var(--cta-button-hover-background-color);
	color: var(--cta-button-hover-text-color);
	border-color: var(--cta-button-hover-border-color);
}

.btn-primary.disabled, .btn-primary:disabled {
	background-color: var(--disabled-button) !important;
	border-color: var(--disabled-button) !important;
	opacity: 1 !important;
}

#amortization_schedule_chart th {
	background-color: var(--button-background-color) !important;
}

.form-control, .input-group-text {
	border: 1px solid var(--form-border);
}

.form-control.error {
	border-color: crimson;
}

label.error {
	color: crimson; 
}

@media screen and (max-width: 500px) {
	#calculator-wrapper > div {
		margin: 0; padding: 0;
	}
}

.btn-collapse {
	border-radius: var(--button-collapse-radius) !important; 
}

#emailform .form-group {
	margin-bottom: 10px;
}

@media screen and (min-width: 765px) and (max-width: 1024px) {
	#calculator-fields-panel + .row {
		display: grid;
		grid-template-columns: 1fr 35px 1fr;
		gap: 0.5rem;
	}

	#calculator-fields-panel + .row .col-3 { 
		max-width: 100%;
	}

	#calculator-fields-panel + .row .text-center { 
		padding: 0 !important; 
		margin: 0 !important;
	}
}
.btn-collapse.btn-primary::before {
content: none;
}