body.page-calculator-extended-widget {
    & header, & footer {
        display: none !important;
    }

    /* Form overrides */
    .popup-modal {
        width: 100% !important;
        height: 100% !important;
        max-width: unset !important;
        left: 0;
        top: 0;
        transform: unset;
        border-radius: 0;
        box-shadow: none;

        & a.logo {
            display: none !important;
        }

        & .gform-confirmation-message {
            font-size: 2rem;
        }

        & form {
            & .gfield_radio {
                display: flex !important;
                flex-direction: row !important;
                flex-wrap: wrap !important;
                gap: 1rem !important;

                &#input_6_42 {
                    & .gchoice {
                        width: calc(50% - 2rem) !important;
                    }
                }

                & .gchoice {
                    width: calc(33.33% - 1rem) !important;

                    & label {
                        font-size: 1.2rem !important;
                    }
                }
            }

            textarea#input_4_48 {
                height: 10rem !important;
                min-block-size: unset !important;
            }
        }
    }
    
    & #overlay {
        display: none !important;
    }
}

.chart_section {
    overflow: hidden;

    & .container {
        position: relative;
        z-index: 2;

        & .section_inner {
            width: 100%;
    
            & .text_area {
                width: 100%;
                text-align: center;
    
                & h2, & h3, & h4, & h5 {
                    margin: 0 0 3rem;
    
                    & span {
                        color: var(--primary);
                        font-size: inherit;
                        font-weight: inherit;
                    }
                }
    
                & p {
                    & a {
                        color: var(--white);
                    }
                }
            }
            
            & .calculator_section {
                width: 100%;
                margin-top: 3rem;
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                flex-wrap: wrap;

                @media (max-width: 991px) {
                    flex-direction: column;
                }

                & .left_side {
                    width: 38%;

                    @media (max-width: 991px) {
                        width: 100%;
                    }

                    & .rate-calculator {
                        h2 {
                            font-size: 2.4rem;
                            margin: 0 0 2rem;
                        }
                        
                        & .input_group {
                            display: flex;
                            flex-direction: row;
                            align-items: center;

                            & .input-text {
                                width: 35%;
                                font-size: 1.6rem;
                                color: #aeaeae;
                                font-weight: 400;
                            }

                            & .input-outer {
                                width: 65%;
                                position: relative;
                                padding: 1rem 0;
                            
                                & input, & select {
                                    width: 100%;
                                    border: 0;
                                    border-bottom: 1px solid #adadad;
                                    font-size: 1.8rem;
                                    background: #fff0;
                                    font-weight: 700;
                                    color: #092c1b;
                                }

                                & input#borrowAmt {
                                    padding-left: 2.5rem;
                                }

                                & .dollar-icon {
                                    position: absolute;
                                    left: 0;
                                    font-size: 20px;
                                    font-weight: 700;
                                    color: #092c1b;
                                    top: 49%;
                                    transform: translateY(-50%);
                                }

                                & .percentage-icon {
                                    position: absolute;
                                    left: 0;
                                    font-size: 20px;
                                    font-weight: 700;
                                    color: #092c1b;
                                    top: 49%;
                                    transform: translateY(-50%);
                                }
                            }
                        }

                        & .get-a-quote {
                            @media (max-width: 991px) {
                                display: none;
                            }
							
							& p {
								font-size: 1.4rem;
								
								& a {
									font-size: 1.4rem;
								}
							}
                        }

                        & a.button {
                            margin: 2rem 0;
							padding: 1rem 1.5rem;
                        }
                    }
                }

                & .right_side {
                    width: 58%;
                    display: flex;
                    flex-direction: row;
                    justify-content: space-between;

                    @media (max-width: 991px) {
                        width: 100%;
                        flex-direction: column;
                        margin-top: 3rem;
                    }

                    & .canvas_outer {
                        width: 58%;
                        
                        @media (max-width: 991px) {
                            display: none;
                        }

                        & #calculator_chart {
                            width: 42.3rem;
                            height: 40rem !important;
                            display: block;
                            box-sizing: border-box;
                        }
                    }

                    & .details_outer {
                        width: 38%;
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        justify-content: center;

                        @media (max-width: 991px) {
                            width: 100%;
                        }
						
						& a#btn_find_more {
							width: 100%;
						}

                        & .best-result-image {
                            width: 100%;
                            background: #f7f7f7;
                            margin-bottom: 1rem;
                            text-align: center;

                            & span.interestRate {
                                color: #092c1b;
                                font-size: 1.6rem;
                                font-weight: 700;
                            }
                        }

                        & .box_1 {
                            width: 100%;
                            background: #f5f5f5;
                            color: #707070;
                            padding: 1rem 1.5rem;
                            text-align: center;

                            &.p-0 {
                                padding: 0 !important;
                                margin: 0 !important;
                            }

                            & h4 {
                                font-size: 1.2rem;
                                font-weight: 700;
                                color: #aeaeae;
                                margin: 0 0 1rem;
                            }

                            & span {
                                font-size: 2.4rem;
                                font-weight: 700;
                                color: #aeaeae;
                            }
                        }

                        & .box_2 {
                            width: 100%;
                            background: #03353d;
                            margin-bottom: 1rem;
                            border-radius: 1.5rem;
                            padding: 1rem;
                            text-align: center;

                            & h4 {
                                font-size: 1.2rem;
                                font-weight: 700;
                                color: #fff;
                                margin: 0 0 1rem;
                            }

                            & span {
                                font-size: 2.4rem;
                                font-weight: 700;
                                color: #fff;
                            }
                        }

                        & a.button.button-primary {
                            width: 100%;

                            @media (max-width: 991px) {
                                margin-top: 3rem;
                            }
                        }

                        & .next_step_mobile {
                            width: 100%;
                            margin-top: 2rem;

                            @media (min-width: 992px) {
                                display: none;
                            }
                        }
                    }
                }

                & .text_area {
                    @media (max-width: 991px) {
                        margin-top: 3rem;
                    }

                    & h2 {
                        font-size: 2.4rem;
                        margin: 2rem 0 1rem;
                    }
                }

                & .rates_section {
                    width: 100%;
                    display: flex;
                    flex-direction: row;
                    align-items: center;
                    margin-top: 2rem;
        
                    & button {
                        background: none;
                        border: none;
                        padding: 0;
                        cursor: pointer;
        
                        & svg {
                            & path {
                                fill: var(--blue);
                            }
                        }
                    }
                    
                    & .slide {
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        justify-content: center;
                        border: 1px solid #e5e5e5;
                        padding: 1rem;
        
                        & span {
                            margin: 0;
                            font-weight: 700;
                        }
            
                        & img {
                            width: auto;
                            height: 3rem;
                            margin: 2rem 0;
                        }
                    }
                }
        
                & .call_to_action_buttons {
                    width: 100%;
                    margin: 4rem 0 0;
                }
            }
        }
    }
}

/* Animation for the spinner */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Animation for the spinner */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}