/*
Theme Name: AiCallBox
Description: 
Author: Cognitive Definition, Inc
Author URI: https://cognitivedefinition.com
Template: blockbase
Version: 1.0.1.2
Text Domain:  codefi
*/

#particles-js canvas {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: -1111110;
}

.slider-fixed {
    position: fixed;

}

.after-particles {
    z-index: 99999 !important;
}
/* Call transcripts off-canvas */
.chats {
    background: #f4f6f773;
    padding: 13px;
    display: block;
    height: 100%;
    overflow-y: auto;
    border-radius: 6px;
    box-shadow: 0px 8px 16px rgba(1, 111, 255, 0.0784313725);
    border: 1px solid rgba(1, 111, 255, 0.0784313725);
    margin-bottom: 1em;
}
/* Off-canvas close button */
.awb-off-canvas-wrap .awb-off-canvas .off-canvas-close {
    color: #ffffff!important;
    background-color: var(--awb-color5)!important;
    padding: 13px;
    border-radius: 50px;
}

.chat-bubble {
    margin: 6px 0px;
    padding: 4px 8px;
    display: block;
    position: relative;
    max-width: 80%;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.13);
    clear: both;
}

.msg-assistant {
    background: #fff;
    text-align: left;
    float: left;
    font-family: 'Open Sans', Helvetica, Arial, sans-serif;
}

.msg-user {
    background: #ebfafe;
    ;
    text-align: left;
    float: right;
    font-family: 'Open Sans', Helvetica, Arial, sans-serif;
}

.msg-assistant::before {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    left: -6px;
    top: 0;
    border: 10px solid transparent;
    border-top-color: #fff;
}

.msg-assistant::after {
    content: attr(data-time);
    font-size: 12px;
    color: #8a8a8a;
    position: relative;
    margin: 4px;
    float: right;
    bottom: -6px;
    right: -8px;
}

.msg-user::before {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    right: -6px;
    top: 0;
    border: 10px solid transparent;
    border-top-color: #ebfafe;
}

.msg-user::after {
    content: attr(data-time);
    font-size: 12px;
    color: #8a8a8a;
    position: relative;
    margin: 4px;
    margin-right: 25px;
    float: right;
    bottom: -6px;
    right: -8px;
}

.bubble-span {
    float: right;
    position: absolute;
    bottom: 0px;
    right: -4px;
    transform: rotate(30deg);
}

.bubble-span::before {
    width: 2px;
    height: 6px;
    content: "";
    display: block;
    position: relative;
    float: right;
    margin: 4px;
    right: 14px;
    bottom: -2px;
    border: 1px solid transparent;
}

.bubble-span::after {
    width: 2px;
    height: 6px;
    content: "";
    display: block;
    position: relative;
    float: right;
    margin: 4px;
    right: -1px;
    bottom: 0px;
    border: 1px solid transparent;
}

.read::before {
    border-color: transparent #0088ff #0088ff transparent;
}

.read::after {
    border-color: transparent #0088ff #0088ff transparent;
}

.delivered::before {
    border-color: transparent grey grey transparent;
}

.delivered::after {
    border-color: transparent grey grey transparent;
}

.sent::before {
    border-color: transparent grey grey transparent;
}

a {
    text-decoration: none !important;
}

.underline-custom a {
    text-decoration: underline !important;
}
/* Dashboard cards */
.container-cards-balance {
    display: flex;
    gap: 20px;
    position: relative;
    justify-content: center;
    margin-top: -7rem;
    padding: 1rem;
    flex-wrap: wrap;
    padding-bottom: 5rem;
}

.active-plan {
    font-size: 50px;
    font-family: 'poppins', sans-serif;
    background-color: #212934;
    color: #fff;
    padding-bottom: 8rem;
    padding-left: 1rem;

}

.cards-balance {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 41%;
    border-radius: 10px;
    padding: 2rem;
    box-shadow: 7px 14px 7px #212934;
    box-shadow: 0px 8px 16px rgba(1, 111, 255, 0.0784313725);
    border: 1px solid rgba(1, 111, 255, 0.0784313725);
    margin-bottom: 1rem;
    background-color: #fff;
    position: relative;
}

@media screen and (max-width: 768px) {
    .cards-balance {
        width: 100%;
    }

    .cards-balance button {
        margin-bottom: 1rem !important;
    }
}

.cards-balance .cards-balance-items {
    display: flex;
    gap: 30px;
}

@media screen and (max-width: 768px) {
    .cards-balance .cards-balance-items {
        flex-direction: column;
        align-items: center;
    }
}

.cards-balance p {

    color: var(--awb-color3);
    margin: 0;
    font-size: 14px;
    font-family: 'Poppins';
}

.cards-balance .title-product-card {
    font-size: 1rem;
    font-family: var(--h2_typography-font-family);
    font-weight: 600;
    color: var(--h2_typography-color);
    margin: 0;
    margin-bottom: 1rem;
}

.card-item {
    display: flex;
    flex-direction: column;
    line-height: 1;
}

.card-item p {
    font-size: 1.3rem;
    margin: 0;
}

.card-item .card-item-p {

    color: var(--awb-color3);
    ;
    margin: 0;
    font-size: 14px;
}

.card-item strong {
    font-size: .8rem;

}

.buttons-plan {
    margin-top: 1rem;
    display: flex;
}

.buttons-plan button p {
    margin: 0 !important;
}

@media screen and (max-width: 768px) {
    .buttons-plan {
        display: flex;
        flex-direction: column;

    }
}

button[disabled] { 
    pointer-events: none;
    background-color: #f4f4f6;
    color: #6666
}

.is-trial {
    display: inline;
    padding: 5px 10px!important;
    background: #ebf4ff;
    font-size: 14px;
    font-weight: 400;
    line-height: 12px;
    border-radius: 0px 6px 0px 6px;
    border: solid #80eaea57;
    color: #6a7684;
    opacity: 1;
    margin-left: 50px;
    position: absolute;
    top: 0;
    right: 0;
    font-family: "Open Sans",sans-serif;
    box-shadow: 0px 8px 13px rgba(1,111,255,0.0784313725);
}

.renew-used-plan-earlier {
    color: #212934;
    text-decoration: underline #212934 !important;
    font-size: 1.1em;
    font-weight: 600;
    text-transform: capitalize;
}

.renew-used-plan-earlier:hover {
    color: #080417;
    text-decoration: underline #00ffff !important;
}

/* Add plan card */
.circle-dashed {
    border: 1px dashed var(--awb-color5);
    color: var(--awb-color5);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    border-radius: 50%;
    width: 4rem;
    height: 4rem;
}

.add-new-ai:hover > div > .circle-dashed{
    border-color: var(--link_hover_color);
    color: var(--link_hover_color);
}

.select2-container {
    z-index: 9999999;
    width: 100% !important;
}

.group-inputs-numbers {
    width: 50% !important;
}

.update-success-icon {
    color: green;
    font-size: 18px;
    padding-left: 1.5rem;
}

.hide {
    display: none;
}

#valid-msg-phone_number,
#valid-msg-billing_phone_number,
#valid-msg-extra_phone_number {
    color: green;
}

#error-msg-extra_phone_number,
#error-msg-billing_phone_number,
#error-msg-phone_number {
    color: red;
}

.numbers-styles {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;

}

#rali_update_btn[disabled] {
    background-color: rgba(128, 128, 128, 0.5);
    cursor: not-allowed;
}

/* Fix for edit-adress being col-1 */
div.woocommerce-MyAccount-content>div.u-column1.col-1.woocommerce-Address {
    width: 100%;
}

/* THANK YOU PAGE */
.codefi-order-details  > li::before{
    background-color: transparent !important;
}
/*thank you page my custom class for the form*/

.ty-page-qlink {
    color:#212934 !important;
}

.ty-page-qlink:hover {
    color:var(--link_hover_color)!important;
}


.go-arrow {
    padding-left: 13px;
}

.go-arrow:hover {
    padding-left: 18px !important;
}

.codefi-ty-title {
    font-size: 1.8em !important;
    color: var(--h4_typography-color) !important;
}

/* CHECKOUT PAGE */
.payment_methods {
    list-style: none !important;
    border-radius: 10px;
    box-shadow: 0px 1px 6px rgba(1,111,255,0.0784313725);
    border: 1px solid rgb(1 111 255 / 0%);
    padding: 1rem !important;
}

/* update payment on my accnt pages */
.codefi .payment_methods .wc_payment_method li {
    margin-bottom: 30px;
    border-radius: 10px;
    box-shadow: 0px 1px 6px rgba(1,111,255,0.0784313725);
    border: 1px solid rgb(1 111 255 / 0%);
    padding: 1rem;
}
.woocommerce-SavedPaymentMethods {
    list-style: none !important;
    padding: 0 !important;
}
/* price bug on checkout */
.codefi-checkout-page-styles .price{
	position: inherit;
	gap: 8px;
}
.wc-block-components-sidebar{
	background: #f4f4f6;
    padding: 0 !important;
}
/* Checkout Billing fields container and side bar*/
@media screen and (min-width: 900px ){
    .wc-block-components-sidebar-layout .wc-block-components-main {
        width: 60% !important;
    }

    .wc-block-components-sidebar {
        width: 40% !important;
    }
}
a.wc-block-components-totals-coupon-link {
    border: gray 1px dashed;
    padding: 0px 6px;
    border-radius: 9px;
}

a.wc-block-components-totals-coupon-link:hover {
    border: #80ebeb 2px solid;
}

/*Remove the gray background on the flag selector for checkout page only*/
.wc-block-components-text-input>.iti>.iti__flag-container>.iti__selected-flag {
    background-color: rgba(255, 255, 255, 0) !important;
}

/* pushes the flag selector down on checkout page only*/
.wc-block-components-text-input>.iti>.iti__flag-container {
    top: 50% !important;
}

/* extends the flag selector to the right on checkout page only*/
.wc-block-components-text-input>.iti {
    display: block !important;
}

/* order details name & field name */
.wc-block-components-product-details__name,
.wc-block-components-product-name {
    font-weight: 600;
}

.wc-block-components-checkout-place-order-button {
    background-color: #212934;
    color: white !important;
    border-radius: 6px;
    border: 2px solid transparent !important;
}

.wc-block-components-checkout-place-order-button:hover {
    color: white !important;
    border-color: aqua !important;
}

 /* MODAL CALL IN PROGRESS */

#callDuration {
    margin-left: 45%;
    font-size: 24px;
}
#modal-call-in-progress {
    overflow: hidden;
    overflow-y: hidden;
    z-index: 999999;
}
#modal-call-in-progress > .modal-dialog > .modal-content {
    height: 70vh;
    background-color: aliceblue;
    max-width: 360px;
	max-height: 700px
}
#modal-call-in-progress > .modal-dialog > .modal-content > .modal-footer {
    margin-top: 0px;
}

#txtPhoneNumber {
    color: aliceblue;
}

#modal-call-in-progress-body {
    background-image: url('https://rapilingo.com/wp-content/uploads/2023/09/cognitive_ai_talk.gif');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-color: #080417;
}
.btn-circle {
    border: 1px solid rgba(0, 0, 0, .125) !important;
    padding: 17px 28px !important;
    border-radius: 50px !important;
    font-size: 28px !important;
}

/* Bootstrap highligh overwrite */
.mark, mark {
    padding: 0.1875em;
    background-color: #c8e2e31f !important;
}

/* My account pages to have navigation at the bottom of the page on mobile */
.woocommerce, div.fusion-text.fusion-text-1.border-tabs {
    display: flex;
    flex-direction: column;
}

.woocommerce-MyAccount-navigation {
    order: 2;
}

.woocommerce-MyAccount-content {
    order: 1;
}

@media(min-width:900px) {
    .woocommerce-MyAccount-navigation {
        order: 1;
    }
    .woocommerce-MyAccount-content {
        order: 2;
    }
}

@media screen and (max-width: 768px) {
    .woocommerce-MyAccount-content, .woocommerce-content-box {
        border: 0px !important;
        padding: 20px 0px !important;
    }
    
}

/* Progress bar */
.usage-progress {
    margin-top:1rem;
    width: 100% !important;
    height: 7px !important;
    background-color: #d1d4e6 !important;
}
.progress-bar {
    height: 7px !important;
    background-color: #212934 !important;
    border-radius: 0px !important;
    
}

/* Floating Call Now */
.call-floating-btn {
	border-radius: 18px;
	background-color: #212934;
	border: 2px solid #212934;
    /* border: 2px solid #004187; */
    /* background-color: #dd1631;
    border: 1px solid #dd1631; */
	box-shadow: 0 16px 22px -17px #03153B;
	color: #fff;
    font-weight: 600;
	cursor: pointer;
	font-size: 16px;
	line-height: 20px;
	padding: 13px 18px;
	position: fixed;
	bottom: 42px;
	right: 18px;
	z-index: 99999;
    text-transform: uppercase;
}

.call-floating-btn:hover {
	/* background-color: #004187; */
    background-color: #00ffff;
	color: #080417;
    border: 2px solid #080417;
    /* color: #dd1631; */
}

.call-floating-btn i {
    margin-right: 6px;
}

.call-floating-btn:focus {
	outline: none;
}

@media screen and (max-width: 480px) {

	.call-panel-container.visible {
		transform: translateX(0px);
	}
	
	.call-floating-btn {
		right: 10px;
	}
}
/* CALL NOW PANEL CSS */
.call-panel-container {
	position: fixed;
	right: 0;
	bottom: 98px;
	transform: translateX(100%);
	transition: transform 0.4s ease-in-out;
    z-index: 99999;
}

.call-panel-container.visible {
	transform: translateX(-10px);
}

.call-panel {	
	background-color: #fff;
	border-radius: 16px;
	box-shadow: 0 16px 31px -17px #001f6199;
	border: 3px solid #212934;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	position: relative;
	height: 313px;	
	width: 370px;
	max-width: calc(100% - 10px);
}

.call-panel button.close-btn {
    border: 3px solid #212934;
    border-radius: 50px;
    padding: 3px 13px;
    color: #404144;
    cursor: pointer;
    font-size: 20px;
    position: absolute;
    top: -11px;
    right: -6px;
}

.call-panel button.close-btn:focus {
	outline: none;
}

.call-panel p {
	background-color: #212934;
	border-radius: 0 0 10px 10px;
	color: #fff;
	line-height: 18px;
	padding: 3px 8px;
	position: absolute;
	top: 0;
	left: 50%;
	margin: 0;
	transform: translateX(-50%);
	text-align: center;
	width: 188px;
}

.call-panel p i {
	margin: 0 5px;
}

.call-panel p a {
	color:  white;
	text-decoration: underline;
    font-weight: 600;
}

.call-panel h4 {
	margin: 20px 0;		
	font-size: 14px;	
	line-height: 18px;
	text-transform: uppercase;
    color: #212934;
}

/* MyAccount tab borders */
.woo-tabs-horizontal .woocommerce .woocommerce-MyAccount-navigation > ul .is-active, .woo-tabs-horizontal .woocommerce-MyAccount-navigation, .woo-tabs-horizontal .woocommerce-tabs > .tabs, .woo-tabs-horizontal .woocommerce-tabs > .wc-tab, .woocommerce-MyAccount-content, .woocommerce-MyAccount-content tr { 
    border-color: #e2e2e2 !important;
}

.user-history-item {
    cursor: pointer;
}

.checkout .payment_methods li {
    margin-bottom: 30px;
    border-radius: 10px;
    box-shadow: 0px 1px 6px rgba(1, 111, 255, 0.0784313725);
    border: 1px solid rgb(1 111 255 / 0%);
    padding: 1rem;
}

.woocommerce-SavedPaymentMethods {
    list-style: none !important;
    padding: 0 !important;
}

.style-new-checkout .price {
    position: inherit;
    gap: 8px;
}

.style-new-checkout .wc-block-components-sidebar {
    background: #f4f4f554;
    border: solid 1px #f5f1f1;
}

.wc-block-components-sidebar {
    padding-left: 0;
}

@media screen and (max-width: 768px) {
    .wp-block-woocommerce-checkout-order-summary-block {
        background-color: #ffff !important;
    }
}

.woocommerce-product-gallery__image--placeholder {
    display: none;
}

.woocommerce-product-gallery__image {
    display: none;
}

.related.products {
    display: none;
}

.product .summary.entry-summary {
    margin: 0 !important;
}

html.flexbox .woocommerce .social-share {
    display: none;
}

.buttons_added {
    display: none !important;
}

.form_consultation_ai .woocommerce-Price-amount {
    display: none;
}

.product_meta {
    display: none;
}

/* Payment method make default action button on my accnt pages */
a.button.default {
    padding:6px 13px;
    border-collapse: collapse;
    box-sizing: border-box;
    caption-side: bottom;
    color: #095cb6;
    background-color: white;
    cursor: pointer;
    display: inline;
    font-family: Assistant, Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    height: auto;
    letter-spacing: 0.24px;
    line-height: 28.8px;
    text-align: left;
    text-decoration-color: #095cb6;
    text-decoration-line: none;
    text-decoration-style: solid;
    text-decoration-thickness: auto;
    text-indent: 0px;
    text-size-adjust: 100%;
    text-transform: none;
    text-underline-offset: auto;
    transition-duration: 0.2s;
    transition-property: text-decoration, color, background-color, border-color;
    transition-timing-function: linear;
    width: auto;
    -webkit-border-horizontal-spacing: 2px;
    -webkit-border-vertical-spacing: 2px;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
/* Center add pymnt form */
@media screen and (min-width: 1020px) {
    #add_payment_method {
    padding-left: 20%;
    padding-right:20%;
}
}

 /** Sign up form  **/

/* hide default variations dropdown and reset button */
/* #ai-legal-expert-plan, .woocommerce-variation-price, a.reset_variations, .price {
    display: none !important;
} */
product page
.speakingdome-custom .product_title, .speakingdome-custom .woocommerce-tabs {
    display: none
}

/* Capitalize product language select */
#learning_language, #native_language {
    text-transform: capitalize;
}

/* Hide variation atribute label or title */
div.summary.entry-summary > div > form > table > tbody > tr > td.label > label {
    display:none;
}

.speakingdome-custom .single_variation_wrap .variations_button, .summary .cart {
   
    margin-top: -2.3rem;
}
/* Fix select2 dropdown getting hidden below container with shadow */
.speakingdome-custom > .fusion-column-wrapper.fusion-column-has-shadow {
    overflow:unset
}

/* Fix lower case on translated voice tabs */
div.voice-demo-table.col-lg-12 > div > div > div.tab-pane > table > tbody > tr > td{
    text-transform: capitalize;
}

/* product form labels */
.learning-path-label {
    /* font-weight: 700; */
font-family: Poppins, Arial, Helvetica, sans-serif;
font-size: 1em;
color: #212934;
}

.plan-choice {
    box-shadow: 0px 8px 13px rgba(1,111,255,0.0784313725);
    border: 1px solid rgba(1,111,255,0.0784313725);
    padding: 1rem 3em !important;
    margin: 1rem;
    border-radius: 9px;
}

.plan-choice:hover {
    border: 1px solid #00ffff;
    cursor: pointer;
}

.selected-plan {
    border: 1px solid #00ffff;
    
}

.selected-plan .plan-price {
    color: #212934;
}
/* label */
.recommended {
    display: inline;
    padding: 5px 10px!important;
    background: #00ffff;
    font-size: 14px;
    font-weight: 400;
    line-height: 12px;
    border-radius: 0 0px 6px 6px;
    color: #212934;
    opacity: 1;
    margin-left: 50px;
    position: absolute;
    top: 0;
    right: 50%;
    font-family: "Open Sans",sans-serif;
}

.default-choice {
    position: relative;
}
span.included-time {
    color: #95999e;
    font-weight: 700;
    text-transform: uppercase;
}

.plan-name {
    font-weight: 700;
    color: #212934;

}

.plan-price {
    color: #6a7684;
}
.plan-options {
    
    color: #212934;
    font-size: 1.1em;
    font-family: Poppins, Arial, Helvetica, sans-serif;
}
.plan-explainer {
    font-size: 1.1em;
    color: #6a7684;

}
.single_add_to_cart_button {
    width: 100%;
}
@media screen and (max-width: 768px) {
    .single_add_to_cart_button {
        width: 96%;
        margin: 0 4% !important;
    }
    
}
.form-check-input:checked {
    background-color: #212934 !important;
    border-color: #212934 !important;
}
#disclaimer-info {
    color: #0d6acd;
}
/* Login page */
@media screen and (min-width: 800px) {
    #customer_login {
        max-width: 40% !important;
    }
}

#customer_login {
    box-shadow: 1px 6px 37px rgba(1,111,255,0.0784313725);
    border: solid #f5f6f8 1px;
    border-radius: 9px;
}

/* Manage subscription page */
a.button.change_payment_method {
    background: var(--link_color);
    color: #fff;
    padding: 6px;
    border-radius: 6px;
    margin-left: 7px;
}

/* Buttons one hover */
.fusion-button-default:hover, .single_variation_wrap .variations_button .button:hover {
border-color: aqua !important;
border: solid 1px;
}
.fusion-button-default, .single_variation_wrap .variations_button .button {
    border: solid 2px !important;
    border-radius: 6px !important;
}

/* wizard form */
.codefi-form-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
}

.codefi-form-page > .row {
    width: 100%;
}

.spawned-ai-agent {
    height: 11em !important;
    width: 11em !important;
}

.select2-selection__rendered {
    font-family: var(--falcon-font-sans-serif);
    /* color: var(--falcon-gray-600) !important; */
  }

.mb-3 label.form-label {
        display: block;
        margin-bottom: 0.5rem;
    }

    .mb-3 .iti {
        display: block;
    }
/* Glowing border effect for wizard card on Next click */
@keyframes glow-border-once {
    0% {
        box-shadow: 0 0 0 0 rgba(0,255,255,0.0);
    }
    20% {
        box-shadow: 0 0 8px 4px rgba(0,255,255,0.3);
    }
    50% {
        box-shadow: 0 0 16px 8px rgba(0,255,255,0.6);
    }
    80% {
        box-shadow: 0 0 8px 4px rgba(0,255,255,0.3);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(0,255,255,0.0);
    }
}

.glow-on-next {
    animation: glow-border-once 1.2s ease-in-out 1;
}

/* Spinning gradient border effect */
@property --rotate {
  syntax: "<angle>";
  initial-value: 132deg;
  inherits: false;
}

.spin-border {
  position: relative;
  z-index: 1;
}

.spin-border::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -2px;
  left: -2px;
  right: -4px;
  bottom: -4px;
  border-radius: inherit;
  background-image: linear-gradient(var(--rotate), #5ddcff, #3c67e3 43%, #4e00c2);
  animation: spin 2.5s linear infinite;
}

/* Spinning gradient border effect (single spin) */
.spin-once {
  position: relative;
  z-index: 1;
}
.spin-once::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    border-radius: inherit;
    background-image: linear-gradient(var(--rotate), #3c67e378 18%, #00ffff7d 44%, #4e00c269 18%,#00ffff7d 44%);
    opacity: 1;
    animation: fadein 1.1s ease-in 0s 1, spin 2.8s linear 0s infinite, fadeout 1.6s ease-out 2.8s 1;
}

@keyframes spin {
  0% {
    --rotate: 0deg;
  }
  100% {
    --rotate: 360deg;
  }
}
@keyframes fadein {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes fadeout {
  from { opacity: 1; }
  to { opacity: 0; }
}
div#wizard-controller {
    background-color: white;
}

.was-validated .form-control:valid, .form-control.is-valid, .was-validated .form-select:valid:not([multiple]):not([size]), .was-validated .form-select:valid:not([multiple])[size="1"], .form-select.is-valid:not([multiple]):not([size]), .form-select.is-valid:not([multiple])[size="1"] {
    border-color: #12141321 !important;
    background-size: calc(0.75em + 0.1rem) calc(0.75em + 0.1rem) !important;
}
.was-validated .form-check-input:valid ~ .form-check-label, .form-check-input.is-valid ~ .form-check-label {
    color: var(--falcon-card-color)!important;
}
.was-validated .form-control:valid:focus, .form-control.is-valid:focus {
    box-shadow: var(--falcon-box-shadow-inset), 0 0 0 0.25rem rgb(195 233 233 / 18%) !important;
}

/* Left padding on field valitation */
#wizard-controller > div .form-select.is-valid:not([multiple]),
#wizard-controller > div .form-select.is-invalid:not([multiple]),
#wizard-controller > div .was-validated .form-select:valid:not([multiple]),
#wizard-controller > div .was-validated .form-select:invalid:not([multiple]),
#wizard-controller > div .form-control.is-valid:not([id*="phone"]):not([id*="number"]),
#wizard-controller > div .was-validated .form-control:valid:not([id*="phone"]):not([id*="number"]) {
    padding-left: 1em !important;
}
/* Fade-in effect for tab content */
.tab-pane.fade-in {
    animation: fadeInTab 0.5s;
}
@keyframes fadeInTab {
    from { opacity: 0; }
    to { opacity: 1; }
}