@media only screen and (max-width: 768px) {
    /*Dialog fix*/
    .rz-dialog {
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
    }

        .rz-dialog:not(.rz-dialog-confirm):not(.rz-dialog-alert) {
            inset-block-start: auto !important;
            width: 90% !important;
            transform: translate(0%, 0%) !important;
            left: 5% !important;
        }
}

/* This specific style is header related and manages a specific problem */
@media only screen and (min-width: 601px) and (max-width: 768px) {
    /**/
    .rz-menu-toggle, .rz-menu-toggle i, .rz-menu-toggle-item i {
        color: white !important;
    }

    .rz-navigation-item-link:not(:active) {
        background-color: #0077B3;
    }

    .rz-navigation-item-text {
        background-color: inherit;
    }

    .rz-navigation-item-link:hover, .rz-navigation-item-text:hover, .rz-navigation-item-link:active, .rz-navigation-item-text:active {
        background-color: #35a0d7 !important;
    }

    .rz-navigation-item-link:hover > span, .rz-navigation-item-text:hover > span, .rz-navigation-item-link:active > span, .rz-navigation-item-text:active > span {
        background-color: #35a0d7 !important;
    }
    .footerContainer{
        height: 93vh;
    }

    .dashboardContainer .logoContainer {
        margin-left: auto;
        margin-right: auto;
    }
}

/* Handle the Radzen menu breakpoint gap (769px - 960px) */
@media (min-width: 769px) and (max-width: 960px) {
    .header .link{
        padding-left: 0;
        font-size: 12px;
    }
    .header .linkRow {
        margin-right: -50px;
    }
}

@media only screen and (min-width: 601px) and (max-width: 1024px) {
    .innerMainContainer {
        max-width: 600px;
    }

    .mainContainer .blueCard {
        display: flex;
    }

    .homeMainImageContainer {
        height: 425px;
    }

    .familyRowRightColumn {
        width: initial;
    }

    video {
        width: 100%;
    }

    .mainContainer .innerMainContainer .lightBlueCard .lightBlueCardTitle {

    }

    .headerContentContainer {
        width: initial;
        right: 10%;
    }

    .headerContainer {
        text-align: initial;
    }

    .header {
        max-width: initial;
        transform: initial;
        width: 100%;
    }

    .header .logoContainer {
        margin-left: 10px;
    }

    .circleImageContainer{
        width:100%;
    }
    .circleImageContainer img{
        margin:auto;
    }

    .lightBlueCardRightColumn {
        margin-left: auto;
        margin-right: auto;
        text-align: left;
    }
    .aboutUsContainer .lightBlueCardRightColumn {
        width: initial;
    }
    .aboutUsContainer .lightBlueCardTextBlock{
        padding-left: 2%;
        padding-right: 2%;
    }
    .capstoneInnerMainContainer {
        text-align: center;
    }
    .capstoneInnerMainContainer p{
        text-align: left;
    }
        .capstoneInnerMainContainer .capstoneTopRightColumn{
            width:300px;
        }

    .capstoneButtonRow{
        text-align:left;
    }

    .aboutUsContainer{
        text-align: center;
    }
        .aboutUsContainer p, .aboutUsContainer ul, .aboutUsContainer input, .aboutUsContainer .contactUsForm {
            text-align: left;
        }
        .aboutUsContainer button{
            float: left;
        }

    .helpCenterContainer .capstoneTopRow{
        text-align: center;
    }
    .helpCenterContainer .capstoneTopRow p{
        text-align: left;
    }
    .helpCenterContainer .lightBlueCardLeftColumn{
        width: 100%;
    }
    .helpCenterContainer .lightBlueCardLeftColumn img{
        margin:auto;
    }
    .helpCenterContainer .lightBlueCardTextBlockHelpCenter {
        text-align: center;
    }
        .helpCenterContainer .lightBlueCardTextBlockHelpCenter p{
            text-align: left;
        }

    .curriculumContainer .capstoneTopRow {
        text-align: center;
    }
    .curriculumContainer .capstoneTopLeftColumn{
        text-align: left;
    }
    .curriculumContainer .lightBlueCardLeftColumn {
        text-align: center;
        width: 100%;
    }
    .curriculumContainer .capstoneTopLeftColumn p{
        text-align: left;
    }

    .curriculumContainer .lightBlueCardLeftColumn img {
        margin: auto;
    }

    .curriculumContainer .bottomHalfCard .lightBlueCardTitle{
        text-align: left;
        display: inline-block;
    }
    .curriculumContainer .lightBlueCardRightColumn {
        margin-left: auto;
        margin-right: auto;
        width: 100%;
    }
    .curriculumContainer .lightBlueCardTitle {
        text-align: center;
        width: 100%;
    }

    .profileContainer .capstoneTopRow, .curriculumContainer .capstoneTopRow, .helpCenterContainer .capstoneTopRow, .aboutUsContainer .capstoneTopRow, .lessonsContainer .capstoneTopRow, .myDashboardTopRow {
        display: flex;
        flex-direction: column;
    }

    .profileTopLeftColumn, .curriculumContainer .capstoneTopLeftColumn, .helpCenterContainer .capstoneTopLeftColumn, .aboutUsContainer .capstoneTopLeftColumn, .lessonsContainer .capstoneTopLeftColumn, .myDashboardTopLeftColumn {
        order: 2;
        width: 100%;
    }

    .profileTopRightColumn, .curriculumBuilderTopRightColumn, .helpCenterTopRightColumn, .aboutUsTopRightColumn, .lessonsTopRightColumn, .myDashboardTopRightColumn {
        order: 1;
        margin-left: auto;
        margin-right: auto;
    }

    .profileTopLeftColumn, .curriculumContainer .capstoneTopLeftColumn, .helpCenterContainer .capstoneTopLeftColumn, .aboutUsContainer .capstoneTopLeftColumn {
        text-align: center;
    }

    .myDashboardTopLeftColumn{
        padding-top: 0;
    }

    .myDashboardTopRightColumn {
        margin: auto;
        margin-top: 20px;
        height: 200px;
    }

    .carouselTitle {
        margin-top: 0;
    }

    .myDashboardTopRow {
        text-align: center;
    }

    .myDashboardTopLeftColumn {
        text-align: left;
    }
    .lessonsTopRightColumn {
        width: 426px;
    }

    .lessonsContainer .capstoneTopLeftColumn {
        padding-top: 10px;
        text-align: left;
    }
    .whatDrivesUs {
        text-align: center;
        width: 100%;
        padding-left: 0;
    }
    .dashboardContainer .cardLikeCardWithTopIcon {
        display: flex;
        flex-direction: column;
    }

        .dashboardContainer .cardLikeCardWithTopIcon .leftColumn {
            width: 100%;
            order: 2;
            text-align: center;
        }

        .dashboardContainer .cardLikeCardWithTopIcon .rightColumn {
            order: 1;
            width: 50%;
            margin: auto;
        }

    .dashboardContainer .logoContainer {
        margin-left: auto;
        margin-right: auto;
    }
    .helpCenterContainer .faqInterludeParagraph {
        width: initial;
    }
    .helpCenterContainer .lightBlueCardRightColumn {
        width: 100%;
    }
}