@import url('/public/themes/client-simple/css/color-variables.css');
@import url('/public/themes/client-simple/css/helpers.css');
@import url('/public/themes/client-simple/css/typography.css');
@import url('/public/themes/client-simple/css/button.css');
@import url('/public/themes/client-simple/css/header.css');
@import url('/public/themes/client-simple/css/footer.css');

html {
	background-color: white;
}

body {
    font-size: 1rem;
}

.add-to-apple-wallet-img {
	height: 50px;
}

#add-to-apple-wallet {
	transition: opacity 0.3s ease-in-out;
}

#company-address-nmls {
	max-width: 70%;
}

#down-payment-range {
	height: 1rem;
}

#organization-logo, .organization-logo {
    max-width: calc(100vw - 2rem);
}

#down-payment-range {
	-webkit-appearance: none;
	background-color: #eee;
	height: 10px;
	border-radius: 5px;
	background-image: linear-gradient(90deg, var(--brandColor1), #eee);
	background-repeat: no-repeat;
}

#down-payment-range::-webkit-slider-runnable-track {
	-webkit-appearance: none;
	appearance: none;
	border: none;
	background: transparent;
}

#down-payment-range::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #4d4d4d;
}

.fa-stack, .fa-stack > * {
	cursor: pointer;
	-webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

.fa-stack i {
	color: var(--brandColor1);
}

.btn-dbc-link:hover .fa-stack i:first-child,
span.fa-stack:hover i:first-child{
	color: white!important;
}

.btn-dbc-link:hover .fa-stack i:nth-child(2),
.fa-stack:hover i:nth-child(2){
    color: white!important;
	z-index: 1;
}

.btn-dbc-link:hover .fa-stack.bg-white .circle-outline,
.fa-stack.bg-white:hover .circle-outline {
    display: block;
	background-color: var(--brandColor1);
}

.btn-dbc-link.btn-outline-secondary:hover {
	color: #fff!important;
	background-color: var(--brandColor1)!important;
	border-color: var(--brandColor1)!important;
}
.btn-dbc-link.btn-outline-secondary:hover .color-neutral-muted{
	color: #fff!important;
}
.btn-dbc-link.btn-outline-secondary:hover .dbc-link-icon {
	color: #fff!important;
}

.parent:hover p:first-child {
    /* CSS styles for the first child when parent is hovered */
    background-color: #f0f0f0;
    color: #333;
}

.parent:hover p:nth-child(2) {
    /* CSS styles for the second child when parent is hovered */
    background-color: #ccc;
    color: #666;
}

#dbc-wrapper {
	z-index: 1;
}

#interested-in-div>button {
	flex: 1 0 auto;
}

.link-title-and-icons > i {
	color: var(--brandColor1)!important;
}

#loan-balance-color {
	height: 4px;
}

#map {
	height: 100px!important;
	max-width: calc(50% - 0.75rem);
	object-fit: none;
	object-position: top;
	overflow: hidden;
}

#monthly-payment-div {
	width: 100%;
}

#organization-logo {
	max-height: 75px!important;
}

#partner-loan-officer-image {
	max-height: 75px!important;
}

#partner-loan-organization-image {
	max-height: 65px!important;	
	filter: grayscale(1);
	-webkit-filter: grayscale(1);
	max-width: calc(100% - (75px + 1.5rem))!important;
}

.partner-loan-organization-image-vertical-separator {
	border-left: 1px solid var(--color-platinum);
}

#sortable {
	row-gap: 15px;
}

#user-pic-and-info {
	z-index: 1000;
	width: 100%;
	border-radius: 0px;
	border-top-right-radius: 0.3rem;
	border-top-left-radius: 0.3rem;
}

.user-profile-picture {
	border: 3px solid white;
	-webkit-box-shadow: inset 0 0 0 10px white, inset 0 0 0 10px white;
	-moz-box-shadow: inset 0 0 0 10px white, inset 0 0 0 10px white;
	box-shadow: inset 0 0 0 10px white, inset 0 0 0 10px white;
	height: 145px;
	width: 145px;
	background-color: white;
	border-radius: 50%;
	object-fit: cover;
	will-change: width;
}

#widgets > div {
	flex: 0 0 48%;
}

.bg-brand-color {
	background-color: var(--brandColor1)!important;
}

.box-shadow-none {
	box-shadow: none!important;
}

.btn-invert-icons:hover > i:nth-child(1) {
	color: white!important;
	-webkit-text-stroke: 2px var(--brandColor1)!important;
}

.btn-invert-icons:hover > i:nth-child(2) {
	color: var(--brandColor1)!important;
}

.color-brand-color {
	color: var(--brandColor1)!important;
}

.btn-check:focus+.btn, .btn:focus {
	box-shadow: none;
}

.btn-dbc-link {
	border-width: 1px!important;
	border-color: #ced4da;
	color: var(--color-davys-grey);
	font-weight: normal!important;
	font-size: 1rem;
	background-color: #f9f9f9;
}
.btn-primary-background{
	-webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
	border: 1px solid var(--brandColor1)!important;
}

.btn-primary-background:hover{
	background-color: white!important;
    color: var(--brandColor1)!important;
}

.btn-dbc-link.btn-outline-secondary .dbc-link-icon {
	color: var(--brandColor1)!important;
	-webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

.chart-cursor-current-values {
	border: 2px dashed #dcdcdc;
	border-radius: .25em;
}

.circle-outline {
	border-radius: 50%;
    width: 32px;
    height: 32px;
    left: 4px;
    position: absolute;
	display: none;
}

.dropend .dropdown-toggle::after {
    display: none!important;
}

.edit-link-div {
	color: var(--color-davys-grey);
	background-color: white!important;
	border-radius: .25rem;
	border: 1px solid #ced4da!important;
}

.fa-chevron-up,
.fa-chevron-down {
	-webkit-transition: transform 0.35s 0.15s;
    -moz-transition: transform 0.35s 0.15s;
    -o-transition: transform 0.35s 0.15s;
    transition: transform 0.35s 0.15s;
}

.footer-container > .bg-gray {
	border-bottom-left-radius: 0.3rem;
	border-bottom-right-radius: 0.3rem;
}

.form-control:focus {
	box-shadow: none;
}

.form-floating>label {
	color: #7c7c7c;
}

.input-border-effect {
	border: 0;
	border-radius: 0 !important;
	padding: 7px 0;
	border-bottom: 1px solid #ccc;
	box-shadow: none !important;
	width: 100%;
	font-size: 1.2rem !important;
}

.input-border-effect:focus+.focus-border {
	transform: scaleX(1) !important;
	z-index: 3;
}

.input-border-effect+.focus-border {
	display: block;
	position: absolute;
	height: 3px;
	width: 100%;
	top: 100%;
	background: var(--primary-color);
	transform: scaleX(0);
	transform-origin: 50% 50%;
	-webkit-transition: transform 0.5s;
    -moz-transition: transform 0.5s;
    -o-transition: transform 0.5s;
    transition: transform 0.5s;
}

.input-group {
	align-items: stretch;
}

.input-group-text > i {
	color: var(--brandColor1)!important;
}

.invert-brand-colors-btn {
	border: 1px solid transparent!important;
}

.invert-brand-colors-btn:hover {
	color: var(--brandColor1)!important;
	background-color: white!important;
	border: 1px solid var(--brandColor1)!important;
}

.margin-auto {
	margin: auto;
}

.margin-left-auto {
	margin-left: auto;
}

.modal.bottom .modal-dialog {
	position: fixed;
	bottom: 0;
	margin: auto;
	width: 100%;
	left: 0;
	right: 0;
}

.modal.bottom.fade.in .modal-dialog {
	bottom: 0 !important;
}

.modal-dialog-slideup {
    transform: translate3d(0, 100vh, 0)!important;
	-webkit-transition: transform 0.5s ease-in-out;
    -moz-transition: transform 0.5s ease-in-out;
    -o-transition: transform 0.5s ease-in-out;
    transition: transform 0.5s ease-in-out;
}

.modal-dialog-max-width {
    max-width: 440px!important;
}

.modal-fix-to-bottom {
    height: auto!important;
    top: auto!important;
    bottom: 0!important;
}

.modal.show .modal-dialog:not(.modal-fullscreen-lg-down) {
    transform: translate3d(-0.25rem, 1rem, 0)!important;
    margin-bottom: 1rem!important;
}

.modal.show .modal-dialog.modal-fullscreen-lg-down {
    transform: translate3d(0, 0rem, 0)!important;
    margin-bottom: 0rem!important;
}

.modal .modal-dialog .modal-content {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.modal .modal-dialog .modal-body {
    max-height: 75vh;
}

.modal.right .modal-dialog {
	position: fixed;
	right: 0;
	margin: auto;
	width: 350px;
	height: 100%;
	animation: slide-in .5s forwards;
}

.modal.right.fade .modal-dialog {
	-webkit-transition: opacity 0.3s linear, right 0.3s ease-out;
    -moz-transition: opacity 0.3s linear, right 0.3s ease-out;
    -o-transition: opacity 0.3s linear, right 0.3s ease-out;
    transition: opacity 0.3s linear, right 0.3s ease-out;
}

.modal.right.fade.in .modal-dialog {
	right: 0 !important;
}

.modal-header span.animation-icon {
	width: 4rem;
	height: 4rem;
	border-radius: 50%;
	margin: 0 auto;
	left: 0;
	top: -1rem;
	right: 0;
	position: absolute;
	animation: scale .3s ease-in-out .9s both;
	z-index: 1000;
	background-color: var(--brandColor1);
}

.more-links-div {
	border: 1px solid #eee;
	box-shadow: 0px 0px 6px 0px rgb(0 0 0 / 20%);
	color: #7C7C7C;
}

.nav-pills {
	border: 1px solid var(--brandColor1);
	border-radius: 0.5em;
}

.nav-pills .nav-link.active {
	background-color: var(--brandColor1);
	color: white;
}

.or-hr {
	border: none;
	font-family: "Nunito Sans", sans-serif;
	font-size: 0.75rem;
	height: 1rem !important;
	line-height: 1rem;
	width: 100%;
	background-color: white;
	opacity: 1;
}

.or-hr::after {
	background-color: rgb(255, 255, 255);
	content: "OR";
	padding: 0px 1rem;
	position: inherit;
}

.or-hr::before {
	background-color: rgb(230, 230, 230);
	content: "";
	height: 0.0625rem;
	left: 0px;
	position: absolute;
	top: 50%;
	width: 100%;
}

.cursor-not-allowed {
	cursor: not-allowed;
}

.cursor-not-allowed > * {
	pointer-events: none;
}

.cursor-pointer {
	cursor: pointer!important;
}

.profile-pic-initials {
    width: 145px!important;
    height: 145px!important;
    background: white!important;
    color:  var(--brandColor1)!important;
    font-size: 3rem!important;
    text-transform: capitalize;
	border-radius: 50%!important;
}

.financing-partner-initials{
	height: 45px !important;
    border: 1px solid;
    font-size: 1em;
    width: 45px !important;
}

.remove-link:hover,
.remove-link:active,
.remove-link:focus  {
	color: white!important;
	background-color: var(--bs-danger)!important;
}

.rotate-180 {
	transform: rotate(180deg);
}

.rounded-cards {
	border-radius: 1rem;
}

.save-link {
	border: 1px solid transparent!important;
}

.save-link:hover {
	color: var(--brandColor1)!important;
	background-color: white!important;
	border: 1px solid var(--brandColor1)!important;
}

.save-link:active,
.save-link:focus {
	color: white!important;
	background-color: var(--brandColor1)!important;
}

.secondary-company-color-button {
	flex: 0 0 100%;
	background-color: white;
	color: var(--primary-color);
	border: 1px solid var(--primary-color);
}

.secondary-company-color-button:hover {
	background-color: white;
	color: var(--primary-color);
	-webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
	border: 1px solid var(--primary-color);
}

.shaking {
	animation: shaking 1s ease-in-out 0s 1 normal;
}

.shape-container {
	max-width: 440px;
	width: 100%;
}

.share-button-fixed-bottom>button {
	background-color: var(--primary-color);
	color: white;
}

.tab-content>.active {
	display: flex!important;
}

.toast-container {
	z-index: 1065;
}

.tooltip {
    z-index: 100000000; 
}

.user-name, .user-title, .user-address {
	-webkit-transition: opacity 0.3s ease, max-height .5s ease-out;
    -moz-transition: opacity 0.3s ease, max-height .5s ease-out;
    -o-transition: opacity 0.3s ease, max-height .5s ease-out;
    transition: opacity 0.3s ease, max-height .5s ease-out;
}

::-webkit-calendar-picker-indicator {
	border-left: 1px solid #eee;
	cursor: pointer;
	background-color: #686868;
	filter: invert(1);
	height: 100%;
	margin-top: auto;
	padding-top: 10px
}

@keyframes fill {
	100% {
		opacity: 100%;
		box-shadow: inset 0px 0px 0px 30px white;
	}
}

@keyframes scale {
	0%,
	 100% {
		transform: none;
	}

	50% {
		transform: scale3d(0.95, 0.95, 1);
	}
}


@keyframes shaking {
	0% {
		transform: translate(10px);
	}

	100% {
		transform: translate(0px);
	}

	20% {
		transform: translate(-10px);
	}

	40% {
		transform: translate(15px);
	}

	60% {
		transform: translate(-15px);
	}

	80% {
		transform: translate(8px);
	}
}

@keyframes slide-in {
	0% {
		transform: translateX(50px);
	}

	100% {
		transform: translateX(0px);
	}
}

@keyframes stroke {
	100% {
		stroke-dashoffset: 0;
	}
}


@media (max-width:767px) {
	#ring {
		border-left: 0px solid !important;
		border-bottom: 1px solid #dee2e6!important;
	}
	#chartdiv{
		width: 100%!important;
	}
}

@media only screen and (max-width:650px) {
	.shape-container {
		width: 100% !important;
		margin: 0 auto !important;
	}
}

@media (max-width: 576px){
	#user-pic-and-info {
		border-top-right-radius: 0!important;
		border-top-left-radius: 0!important;
	}
}


[data-bs-toggle="collapse"] {
	-webkit-transition: border-radius 0.15s 0s;
    -moz-transition: border-radius 0.15s 0s;
    -o-transition: border-radius 0.15s 0s;
    transition: border-radius 0.15s 0s;

}

[data-bs-toggle="collapse"].collapsed {
	-webkit-transition: border-radius 0.25s 0.25s;
    -moz-transition: border-radius 0.25s 0.25s;
    -o-transition: border-radius 0.25s 0.25s;
    transition: border-radius 0.25s 0.25s;
	border-bottom-left-radius: 0.25rem!important;
	border-bottom-right-radius: 0.25rem!important;
}