.lvr-orange {
    background-color: #ffa500 !important;
    /* Nice orange shade */
}

.lvr-red {
    background-color: #ff4500 !important;
    /* Nice red shade */
}

.lvr-warning {
    color: #d9534f;
    /* Bootstrap's button warning color for reference */
    font-size: 14px;
    margin-top: 5px;
}

.slidecontainer {
    width: 100%;
    /* Width of the outside container */
}

/* The slider itself */
.slider {
    -webkit-appearance: none;
    /* Override default CSS styles */
    appearance: none;
    width: 100%;
    /* Full-width */
    height: 25px;
    /* Specified height */
    background: #d3d3d3;
    /* Grey background */
    outline: none;
    /* Remove outline */
    opacity: 0.7;
    /* Set transparency (for mouse-over effects on hover) */
    -webkit-transition: .2s;
    /* 0.2 seconds transition on hover */
    transition: opacity .2s;
}

/* Mouse-over effects */
.slider:hover {
    opacity: 1;
    /* Fully shown on mouse-over */
}

/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */

input[type='range'] {
    -webkit-appearance: none;
    /* Overrides default appearance */
    width: 100%;
    /* Required for control over the slider's size */
    height: 5px;
    /* Slider Track height */
    background: linear-gradient(to right, #27323F 50%, #27323F 50%);
    /* Initial two-color track */
    border-radius: 5px;
    /* Optional: rounds the corners of the track */
}

input[type='range']::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 25px;
    /* Width of the thumb */
    height: 25px;
    /* Height of the thumb */
    background: #15b0f8;
    /* Thumb color */
    cursor: pointer;
    /* Cursor on hover */
    border-radius: 50%;
    /* Optional: if you want a round thumb */
}

/* For Mozilla Firefox */
input[type='range']::-moz-range-thumb {
    width: 25px;
    /* Width of the thumb */
    height: 25px;
    /* Height of the thumb */
    background: #15b0f8;
    /* Thumb color */
    cursor: pointer;
    /* Cursor on hover */
    border-radius: 50%;
    /* Optional: if you want a round thumb */
}

/* For Microsoft Edge */
input[type='range']::-ms-thumb {
    width: 25px;
    /* Width of the thumb */
    height: 25px;
    /* Height of the thumb */
    background: #15b0f8;
    /* Thumb color */
    cursor: pointer;
    /* Cursor on hover */
    border-radius: 50%;
    /* Optional: if you want a round thumb */
}

#loanRepaymentTable th,
#loanRepaymentTable td {
    font-size: 16px !important;
    line-height: 18px !important;
    padding: 8px 8px !important;
    text-align: center !important;
}

.disclaimersAndAssumptions {
    overflow: hidden;
    transition: max-height 0.5s ease-in-out;
    max-height: 0;
    /* Start with max-height 0 to ensure it's initially hidden */
}

.disclaimersAndAssumptions h5 {
    font-size: 16px !important;
    line-height: 18px !important;
    font-weight: bold !important;
}

.disclaimersAndAssumptions p,
.disclaimerText,
.disclaimerText a {
    font-size: 14px !important;
    line-height: 20px !important;
    vertical-align: middle;
}

.disclaimerText a img {
    height: 16px !important;
    display: inline-block;
}

.form-group {
    display: flex;
    align-items: center;
    /* Aligns items vertically in the center */
    margin-bottom: 10px;
    /* Adds some space between each form group */
    justify-content: space-between;
}

.form-group label {
    margin-right: 10px;
    /* Adds some space between the label and the input */
    white-space: nowrap;
    /* Prevents the label from wrapping */
    flex-shrink: 0;
    /* Prevents the label from shrinking */
    font-size: 16px !important;
}

.form-group input {
    max-width: 160px;
    flex-grow: 1;
    /* Allows the input to grow and fill the remaining space */
    /* Adjust the height as necessary to match your design requirements */
}

label[for='stampDuty'],
label[for='mortgageRegistration'],
label[for='transferFee'] {
    background: white url('/wp-content/themes/hello-theme-child-master/assets/images/plus-2.png') center left no-repeat;
    background-size: auto 30px;
    padding-left: 30px !important;
}

label[for='cashContribution'] {
    background: white url('/wp-content/themes/hello-theme-child-master/assets/images/minus-2.png') center left no-repeat;
    background-size: auto 30px;
    padding-left: 30px !important;
}

label[for='loanAmountCalc'],
label[for='totalCosts'] {
    background: white url('/wp-content/themes/hello-theme-child-master/assets/images/equal-2.png') center left no-repeat;
    background-size: auto 30px;
    padding-left: 30px !important;
}

input[readonly='readonly'] {
    border: none !important;
    background-color: rgba(0, 0, 0, 0.1) !important;
}

#basicFundingPopup input,
select {
    padding: 2px !important;
    -webkit-appearance: none !important;
}

#loanRepaymentTable th,
#loanRepaymentTable td {
    font-size: 14px !important;
    padding: 2px !important;
}

#rateCalc {
    max-height: 24.2px !important;
}

#basicFundingStep button.showDetailsCapturePopup {
    margin: 0;
    font-size: 14px !important;
    /* line-height: 1.3em !important; */
    padding: .5rem 1rem !important;
    box-sizing: border-box;
    transition: all .3s;
    margin-bottom: 5px !important;
    border: 1px solid grey !important;
    font-family: "Jost", Sans-serif;
    font-weight: 400;
    accent-color: var(--e-global-color-accent);
    border-radius: 4px 4px 4px 4px;
    height: unset;
}