/* Styles for mobile phones */


@media (max-width: 768px) {
    h1 {
        font-size: 48px !important;
    }

    h2 {
        font-size: 36px !important;
        line-height: 44px !important;
    }

    .sortable-list .text span {
        color: #000;
        font-size: 14px;
        font-style: normal;
        font-weight: 500;
        line-height: 28px;
    }

    .mapBanner {
        padding-left: 25px;
        padding-right: 25px;
    }

    .mapBanner>.container>.row,
    .buildYourPlan>.container>.row {
        flex-direction: column;
        gap: 40px;
    }

    .mapBanner>.container>.row>div.padd-right-40 {
        padding-right: 0px;
    }

    .mapBanner>.container>.row>div.padd-left-40 {
        padding-left: 0px;
    }

    .mainSelectContainer>.container>.row {
        flex-direction: column;
        gap: 40px;
    }

    .summary {
        font-size: 20px;
    }

    #top3ActionAccordion .accordion-item {
        padding: 16px !important;
    }

    #top3ActionAccordion .accordion-body {
        padding: 0px !important;
    }

    #top3ActionAccordion .whyIs {
        flex-direction: column;
    }

    #top3ActionAccordion .whyIs .noFlex {
        flex: initial !important;
    }

    /* .accordion-item .accordion-header,
    label,
    .paragraphe {
        font-size: 16px;
    } */

    .highcharts-axis-labels span {
        min-width: 120px;
        max-width: 120px;
    }

    .chart-label {
        font-size: 11px;
    }

    .chart-label:before {
        width: 20px;
        height: 20px;
        background-size: contain;
        flex: 0 0 20px;
    }

    .bookASession {
        background-color: white;
        padding: 80px 24px !important;
    }

    .bookASession>div {
        flex-direction: column;
        background: #004F71;
        padding: 24px;
        justify-content: center;
        align-items: center;
        gap: 24px;
        align-self: stretch;
        width: 100%;
    }

    .contents>.row,
    .content.child>.row {
        flex-direction: column;
    }

    .contents .rightContent {
        padding: 60px 25px;
    }

    .contents .rightContent ul {
        padding: 0px 12px;
    }

    .charts-wrapper {
        padding: 8px !important;
    }

    #outcomes_plan_bar_chart {
        width: 360px !important;
    }

    /* #pdf_outcomes_chart {
        width: 700px !important;
    } */
    

    header .logo {
        width: 70%;
    }

    header .contact {
        width: 53%;
    }


    #actionListRow .row {
        flex-direction: column;
        gap: 40px !important;
    }

    .mainMenu {
        display: none;
    }

    .burger_menu {
        display: flex;
    }

    .buildYourPlan .row {
        flex-direction: column;
        gap: 40px !important
    }

    #DeeperDiveTitle {
        font-size: 20px !important;
    }

    /*************** About us ***************************/
    .whatitMatters>.container>.row,
    .aboutus_content>.container>.row {
        flex-direction: column;
    }

    .sidePannel.shortcuts {
        position: initial !important;
    }

    .backgroundImage {
        height: initial !important;
        aspect-ratio: 1/0.8;
    }

    .whatitMatters .brefing_container {
        padding: 32px 16px;
    }

    .aboutus_content {
        padding-bottom: 80px !important;
    }


    /********************** Actions page *********************/
    .actionsContent .sidePanel.sticky {
        position: initial;
        width: 100%;
        max-height: initial;
        overflow: hidden;
    }

    .actionsContent .sidePanel .onThisPage ul li {
        width: initial;
    }

    .actionsContent>.container>.row:not(.first) {
        flex-direction: column;
    }

    .collapse.show {
        width: 100%;
    }

    .the_content {
        padding: 16px;
    }

    #discoverOtherActions_mobile {
        display: flex !important;
    }

    #discoverOtherActions {
        display: none !important;
    }

    .modal-dialog,
    .formModal .modal-content {
        width: 99%;
        min-width: initial;
    }

    #selectedProvinenceTxt {
        margin-left: 45px;
    }

    .chart-tooltip {
        width: 150px;
        min-width: initial;
    }

    .chart-tooltip h5 {
        font-size: 14px;
    }

    #BuildYourPlanBlueContentDescription a {
        text-decoration: none;
    }
    
    .chart-label{
        max-width: 150px;
    }
    
}

@media (min-width: 1200px) {
    .shortcuts.sticky {
        max-width: initial;
    }


}

/* Styles for tablets */
@media (max-width: 1023px) {}

/* Styles for laptops */
@media (min-width:768px) and (max-width: 1440px) {
    #selectedProvinenceTxt {
        margin-left: 45px;
    }
    .chart-tooltip {
        width: 150px;
        min-width: initial;
    }

    .chart-tooltip h5 {
        font-size: 14px;
    }

    #BuildYourPlanBlueContentDescription a {
        text-decoration: none;
    }
    .mainMenu {
        display: none;
    }

    .burger_menu {
        display: flex;
    }

    #discoverOtherActions_mobile {
        display: flex !important;
    }

    #discoverOtherActions {
        display: none !important;
    }

    .mainSection {
        overflow-y: auto;
        /* height: 100svh !important; */
    }

    .actionsContent .sidePanel.sticky {
        position: initial;
        width: 100%;
        max-height: initial;
        overflow: hidden;
    }

    #actionListRow .row,
    .contents>.row,
    .content.child>.row {
        flex-direction: initial;
        gap: 0px !important;
    }

    .actionsContent .sidePanel .onThisPage {
        margin-bottom: 32px;
    }

    .row {
        flex-wrap: wrap;
        gap: 0px
    }

    [class*="col-"] {
        padding-left: 8px;
        padding-right: 8px;
    }



    .sidepanel-item {
        display: block;
        white-space: normal;
        word-wrap: break-word;
        overflow-wrap: anywhere;
        line-height: 1.4;
        text-decoration: none;
        color: inherit;
    }

    .shortcuts.sticky {
        max-width: 215px;
    }

    #outcomes_plan_bar_chart {
        min-width: 600px;
    }

 .chart-label{
        max-width: 150px;
    }
}

@media (min-width: 1500px) and (max-width: 2500px) {
    
    
}

/* Large devices (desktops) */
@media (min-width: 2500px) and (max-width: 3840px) {}