.elementor-8299 .elementor-element.elementor-element-dcad431{--display:flex;--min-height:0px;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:flex-start;--overlay-opacity:0;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-8299 .elementor-element.elementor-element-dcad431:not(.elementor-motion-effects-element-type-background), .elementor-8299 .elementor-element.elementor-element-dcad431 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#131E3A;}.elementor-8299 .elementor-element.elementor-element-dcad431::before, .elementor-8299 .elementor-element.elementor-element-dcad431 > .elementor-background-video-container::before, .elementor-8299 .elementor-element.elementor-element-dcad431 > .e-con-inner > .elementor-background-video-container::before, .elementor-8299 .elementor-element.elementor-element-dcad431 > .elementor-background-slideshow::before, .elementor-8299 .elementor-element.elementor-element-dcad431 > .e-con-inner > .elementor-background-slideshow::before, .elementor-8299 .elementor-element.elementor-element-dcad431 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-color:var( --e-global-color-text );--background-overlay:'';}.elementor-8299 .elementor-element.elementor-element-586195b > .elementor-widget-container{margin:50px 0px 0px 0px;}.elementor-8299 .elementor-element.elementor-element-586195b{text-align:center;}.elementor-8299 .elementor-element.elementor-element-586195b .elementor-heading-title{font-weight:700;color:var( --e-global-color-text );}.elementor-8299 .elementor-element.elementor-element-186c112 > .elementor-widget-container{margin:0px 0px 50px 0px;}.elementor-8299 .elementor-element.elementor-element-186c112{color:var( --e-global-color-secondary );}.elementor-8299 .elementor-element.elementor-element-e66ea03{--display:flex;--min-height:800px;}.elementor-8299 .elementor-element.elementor-element-e66ea03:not(.elementor-motion-effects-element-type-background), .elementor-8299 .elementor-element.elementor-element-e66ea03 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-b9690ec );}:root{--page-title-display:none;}@media(max-width:767px){.elementor-8299 .elementor-element.elementor-element-dcad431{--content-width:550px;--min-height:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-8299 .elementor-element.elementor-element-586195b{width:var( --container-widget-width, 304px );max-width:304px;--container-widget-width:304px;--container-widget-flex-grow:0;}.elementor-8299 .elementor-element.elementor-element-586195b.elementor-element{--align-self:center;}.elementor-8299 .elementor-element.elementor-element-586195b .elementor-heading-title{font-size:35px;line-height:1.2em;}}/* Start custom CSS for html, class: .elementor-element-b6a9172 *//*----------------------------------*/
/* START: MOBILE STYLE DIFFERENCES */
@media (max-width: 480px) {
    .price-group {
        margin-right: 0px  !important;
        padding: 0px; 
    }
    
    .price-button-container {
        margin-right: 0px; /* Space between buttons */
    }
    
    .input-and-buttons {
        gap: 0px; /* Space between input and buttons */
    }
    
    .results-container p {
        font-size: 1em;
    }

    div.slider-container input.cost-input {
        width: 80px;
    }
    
    .cost-comparison {
        padding: 10px;
    }
    .cost-comparison p {
        font-size: 1em;
    }
    
    .slider-container {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        width: 95%;
        margin: 20px 0; /* Add vertical spacing between sliders */
        padding-bottom: 15px; /* Ensure there’s enough space for the slider */
        font-family: Arial, sans-serif;
        position: relative; /* Allow inner content to position properly */
        /*border: 1px solid #ccc;*/
        border-radius: 5px;
    }

    div.slider-container > input#tablo-cost-input,
    div.slider-container > input#cable-cost-input,
    div.slider-container > input#streaming-cost-input,
    div.slider-container > input#antenna-cost-input {
        width: 125px  !important; 
        font-size: 30px  !important; 
    }
    
    .slider-container label {
        margin-top: 20px; /* Makes the label text bold */
    }
    
    hr {
        margin-top: 20px  !important;
        /*border: 0  !important; */
        height: 2px  !important;
        /*background-color: #ccc  !important; */
    }
    
}
/* END: MOBILE STYLE DIFFERENCES */
/*--------------------------------*/

/*---------------------------------------*/
/* START: SLIDERS AND SLIDER CONTAINERS */
.slider-container {
    display: flex;
    flex-direction: column; /* Ensure content stacks vertically */
    justify-content: center; /* Center content vertically */
    align-items: center; /* Center content horizontally */
    width: 95%; /* Adjust width as needed */
    margin: auto;
    font-family: Arial, sans-serif; /* Ensure consistent typography */
    /*
    margin: 20px auto;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 10px;
    */
    background-color: #f9f9f9;
}



/*
.slider-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start; 
    width: 95%; 
    margin: 20px 20px;
    font-family: Arial, sans-serif;
    border: 1px solid #ccc;
    border-radius: 10px;
}
*/

.custom-slider {
    width: 90%; /* Allow the slider to take the full width of the container */
    margin: 15px 0px 0px 0px ; /* Add spacing between the label and slider */
    background: #ddd; /* Default track color */
    border-radius: 5px; /* Rounded track corners */
    position: relative; /* Necessary for child elements to position properly */
    flex-shrink: 0; /* Prevent the slider from shrinking in a flex layout */
}

.custom-slider .noUi-handle {
    background: #fff;
    border-radius: 50%;
    cursor: grab; 
    position: absolute;
}

.custom-slider .noUi-connect {
    background: linear-gradient(to right, #131E3A, #009BDC);
    height: 100%;
    border-radius: 5px;
    position: absolute;
}

.custom-slider .noUi-handle:hover {
    background: #0078d7;
    border-color: #005bb5; /* Darker hover color */
}

div.slider-container > input#tablo-cost-input,
div.slider-container > input#cable-cost-input,
div.slider-container > input#streaming-cost-input,
div.slider-container > input#antenna-cost-input {
    margin: 5px 0px 0px 0px;
    width: 90px;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 5px;
    text-align: center;
    font-weight: bold;
    font-size: 20px; /* Larger text for better readability */
    color: #0078d7; /* Match brand color */
}

/* END: SLIDERS AND SLIDER CONTAINERS */
/*-------------------------------------*/


/*----------------------------*/
/*    START: RESULTS PAGE    */
.results-subsection{
    margin:15px 10px;
}


.results-subsection-header {
    font-weight: bold;
}

/*
.results-container {
    margin-top: 20px;
    padding: 15px;
    border: 2px solid #ccc;
    border-radius: 5px;
    background: #f9f9f9;
    text-align: left;
}

.results-container p {
    margin: 5px 0;
    font-size: 1.2em;
    font-weight: bold;
    color: #333;
}

.results-container span {
    color: #0078d7;
}
*/

canvas {
    display: block;
    max-width: 100%;
    height: auto;
}

.chart-wrapper {
    position: relative;
    max-width: 600px;
    height: auto;
    margin: 20px auto;
}

#costComparisonChart {
    display: block;
    max-height: 400px;
    width: 100%;
}

.results-container {
    /*max-width: 600px;   */
    margin: 0 auto; /* Center the container */
}

.cost-section {
    border: 2px solid #ccc; /* Border around each section */
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 5px; /* Rounded corners */
    background: #f9f9f9; /* Light background for clarity */
}

/*
.cost-comparison {
    margin-top: 20px;
    padding: 10px;
    border-top: 1px solid #ccc;
    background: #f7f7f7;
}
*/

.cost-comparison {
    margin-top: 20px;
    padding: 10px;
  /*  border-top: 1px solid #ccc;*/
    background: #f7f7f7;
    text-align: center; /* Centers text inside this container */
}

.cost-comparison p {
    margin: 10px 0;
    font-size: 1.1em;
    font-weight: bold;
    color: #333;
}

.cost-comparison span {
    color: #0078d7;
}

#cost-comparison-details {
    margin: 0 auto; /* Horizontally centers the div */
    text-align: center; /* Centers the text inside the div */
    width: fit-content; /* Ensures the div only takes the width of its content */
}

#monthly-yearly-savings {
    text-align: center; /* Centers text inside the div */
    margin: 0 auto; /* Centers the div itself if needed */
}

.cost-section h3,
.cost-comparison h3,
.results-container h3 {
    margin: 0 0 10px; /* Consistent spacing below the heading */
    /*font-size: 1.3em;*/ /* Uncomment or adjust as needed */
    color: #0078d7; /* Match brand color */
    text-align: center; /* Center align the caption */
}

.popover {
    background-color: #f9f9f9;
    color: #333;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}


.popover .popover-header {
    color: White;
    background-color: #009BDC;
    font-size: 18px;
    font-weight: normal;
    margin-top: 0;
    justify-content: center; /* Center horizontally */
    text-align: center;
}

.popover-body {
    font-size: 16px;
    background-color: #F8F8F8;
}


.popover-trigger {
    text-decoration: none; /* Remove underline */
    font-size: 18px; /* Adjust font size */
    color: #0078d7; /* Match brand color */
    margin-left: 8px; /* Add spacing */
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}

.popover-trigger .icon {
    font-style: normal; /* Avoid italicizing the icon */
    font-weight: bold;
    color: #0078d7; /* Match icon color with text */
    margin-right: 4px; /* Add spacing between icon and text */
}

.popover-trigger:hover {
    color: #0056b3; /* Darker hover color */
}

.popover-trigger:hover .icon {
    color: #0056b3; /* Match hover color */
}

#cost-comparison-details p:last-child {
    border: 2px solid #0078d7; /* Match brand color */
    border-radius: 5px; /* Rounded corners */
    background-color: #f1faff; /* Light blue background for emphasis */
    padding: 10px; /* Add spacing inside the border */
    margin-top: 10px; /* Space above the highlighted box */
    font-weight: bold; /* Make text bold */
    color: #333; /* Darker text color */
    text-align: center; /* Center-align the text */
}

.results-highlight{
    font-weight: bold;
}
/*      END: RESULTS PAGE    */
/*--------------------------*/

/**********************************/
/* START: PRICE SELECTOR BUTTONS */
.input-and-buttons {
    display: flex;
    align-items: center; /* Vertically align input and buttons */
    gap: 15px; /* Space between input and buttons */
    margin-top: 5px; /* Space above the buttons/input group */
}

.price-buttons {
    display: flex;
    gap: 15px; /* Space between buttons */
}


.price-button-container:last-child {
    margin-right: 0; /* Remove margin for the last button */
}

.price-group {
    display: inline-block;
    text-align: center;
    margin-right: 15px;
    padding: 10px; 
    /*border: 1px solid #ccc;*/
    /*border-radius: 10px;*/
    background-color: #f9f9f9;
}


.price-group-label {
    font-size: 16px; 
    font-weight: bold;
    color: #333; 
    margin-bottom: 10px;
    text-align: center;
}

.price-button-container {
    display: inline-block; /* Align buttons horizontally within the group */
    text-align: center; /* Center-align the button and label */
    margin-right: 15px; /* Space between buttons */
    margin-bottom: 10px; /* Space below button for label */
}

.price-button {
    background-color: #0078d7; /* Button color */
    color: white; /* Button text color */
    border: none;
    border-radius: 5px;
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    display: block; /* Ensure the button is on its own line */
    margin-bottom: 5px; /* Space between button and label */
    transition: background-color 0.3s ease;
}

.price-button:hover {
    background-color: #0056b3; /* Darker blue for hover */
}

.price-label {
    font-size: 14px;
    color: #333;
    display: block; /* Ensure the label is below the button */
}


.price-button.selected {
    background-color: #131e3a; 
    color: #fff; 
}

.slider-container label {
    font-weight: bold; /* Makes the label text bold */
}


.pricing-disclaimer{
    font-size:14px;
    margin-top: 20px;
    /*color:darkgrey;*/
}

.calculation-disclaimer{
    font-size:14px;
    margin-top: 20px;
}
/* END: PRICE SELECTOR BUTTONS */
/******************************/

.collapsible-content .cost-section-subtext,
.cost-section-subtext,
#monthly-yearly-savings .cost-section-subtext{
    text-align: center;
    font-size: 15px;
    font-weight: normal;
}

/*************************/
/* COLLAPSABLE SECTIONS */
.section-number {
    display: inline-block;
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    color: #ffffff !important;
    background-color: #0078d7;
    border-radius: 50%;
    margin-right: 10px;
}


/***********************/
/* CTAs ****************/
.cta-container {
    margin-top: 0px;
    margin-bottom: 10px;
    padding: 10px 0; 
    text-align: center;
    overflow: visible;
}

.cta-container p{
    font-weight:bold;
}

.cta-button {
    display: inline-block;
    padding: 15px 30px;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    border-radius: 35px;
    margin: 10px; /* Add spacing between buttons */
}


.primary-cta {
    background-color: #009BDC; 
    color: white !important;
    border: none;
}

.primary-cta:hover {
    background-color: #FF5122;
}

.secondary-cta {
    background-color: #f5f5f5; /* Light grey for subtlety */
    color: #0078d7;
    border: 1px solid #0078d7;
}

.secondary-cta:hover {
    background-color: #FF5122;
    border: 1px solid #FF5122;
    color: white !important;
}

/***************************/
/* START: TEXT STYLES *****/
.page-overvew-text {
 line-height: 30px ;   
 margin:20px 30px;
}
/*** END: TEXT STYLES *****/
/*************************/



/*****************************/
/* START: Wizard Structure **/
/* Wizard Step Container */

.step-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    /*align-items: center;*/
    width: 95%;
    margin: 20px auto;
    padding: 20px;
    font-family: Arial, sans-serif;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 15px; 
    background-color: #f9f9f9;
}

.step-container-header{
    font-weight:bold;
    text-align: center;
    font-size: 20px;
}


/* Ensure steps take full height */
.step {
    display: none; /* Hidden by default */
    position: relative; /* Establish a positioning context */
    min-height: calc(100vh - 400px); /* Full height minus estimated header/footer space */
    padding-bottom: 80px; /* Prevent content overlap with buttons */
    overflow-y: auto; /* Allow scrolling if content exceeds height */
    overflow-x: hidden; /* Prevent horizontal scrolling */
    
}


/* Active Step */
.step.active {
    display: block;
}


.wizard-buttons {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0; /* Ensure it aligns fully within the container */
    background-color: #f8f8f8;
    /*border-top: 1px solid #ccc;*/
    text-align: center;
    padding: 15px 0;
    z-index: 10;
    box-sizing: border-box; /* Include padding and border in the width calculation */
    overflow-x: hidden; /* Prevent horizontal overflow */
}

/* Wizard Buttons */
.wizard-buttons button {
    display: inline-flex;
    align-items: center;
    gap: 8px; 
    padding: 10px 20px;
    font-size: 16px;
    font-weight: bold;
    margin: 5px;
    border: none;
    /*border-radius: 5px;*/
    cursor: pointer;
    color: #fff;
    transition: background-color 0.3s;
}

.next-button {
    background-color: #0078d7;
}

.back-button {
    background-color: #666;
}

.cancel-button {
    background-color: #ccc;
    color: #333;
}

button:hover {
    opacity: 0.9;
}


.next-button {
    background-color: #0078d7;
}

.back-button {
    background-color: #666;
}

.cancel-button {
    background-color: #ccc;
    color: #333;
}

button:hover {
    opacity: 0.9;
}

/* Fade-in animation for steps */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* END: Wizard Structure **/
/*************************/


/*************************************************/
/* START: WIZARD - CURRENT SETUP - CHECKBOXES  **/
.checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 10px; /* Space between checkboxes */
    margin-top: 15px;
    align-items: left; /* Left align all items */
    width: fit-content; /* Automatically size to content */
    margin-left: auto; /* Center the group horizontally */
    margin-right: auto; /* Center the group horizontally */
}

.checkbox-group label {
    font-size: 16px;
    color: #333;
    display: flex;
    align-items: center;
    gap: 8px; /* Space between the checkbox and label text */
    cursor: pointer;
}

.checkbox-group input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: #0078d7; /* Match brand color */
    cursor: pointer;
}

/* END: WIZARD - CURRENT SETUP - CHECKBOXES  **/
/*********************************************//* End custom CSS */
/* Start custom CSS */.email_latest_tablo #input_1_1 {
    background: white;
    border-color:#b6b8ba;
}/* End custom CSS */