/*normal landscape*/

@media only screen and (orientation: landscape) and (min-device-width: 700px) {
    .reportPageBase {
        width: 98.5vw;
        min-height: 80vh;
        /* max-height: 92vh; */
        background-color: white;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        max-width: 200vw;
    }

    .reportPageBase a {
        color: #0505af;
    }

    .reportPageBase .singlePageHeader {
        /*flex: 0 0 90vw;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;*/
    }
    .reportPageBase .tab {
        cursor: pointer;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        margin-right: 0px;
    }
    .selectionBorderStyle {
        width: 98%;
        height: 100%;
        margin-left: 0px;
    }
    .reportPageBase .folderHeader {
        width: 95%;
        font-size: 1.3rem;
        /* font-weight: 600; */
        margin-left: 3rem;
        margin-top: 3rem;
    }
    .reportPageBase .folderContentsDiv {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        width: 95%;
    }
    .reportPageBase .folderContentsDiv>div {
        height: 10vh;
        flex: 0 0 10vw;
        cursor: pointer;
        margin: 1vw;
    }
    .reportPageBase .folderContentsDiv img {
        width: 5vw;
        height: 5vw;
    }
    .reportPageBase .reportParameters {
        width: 98vw;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        overflow: visible;
        z-index: 500;
        transition: ease-in-out all;
    }
    .reportPageBase .reportParameters.hide {
        height: 0px;
        overflow: hidden;
        transition: ease-in-out all;
    }
    .reportPageBase .reportParameters>div {
        flex: 1 0 15vw;
        max-width: 20vw;
        margin: 1vw;
        /* border: black solid 1px; */
        box-shadow: rgb(100 100 111 / 25%) 0px 3px 20px 0.5px;
        border-radius: 8px;
        display: flex;
        flex-direction: column;
        min-height: 20vh;
    }
    .reportPageBase .renderReportButtonContainer {
        display: flex;
        flex-direction: row;
        padding: 0.3vw;
        /*border: black solid 1px;*/
        /*border: none;*/
        /*display: flex;*/
        /*flex-direction: column;*/
        /*height: 20vh;*/
        /*height: auto;*/
        /*align-self: flex-end;*/
        justify-content: flex-end;
        width: 98vw;
        z-index: 200;
    }
    .reportPageBase .reportParameters>div .parameterName {
        font-size: 0.9rem;
        margin: 10px 5px;
    }

    .reportPageBase .reportParameters  input {
        width:90%;
        margin-left:5px;
        border: 1px solid #979696;
        padding: 4px 2px;
    }
    .reportPageBase .renderButton {
        background-color: #7986CB;
        box-shadow: grey 1px 1px;
        margin-right: 12vw;
        /*z-index: 1000;*/
    }
    .reportPageBase .reportRenderPage {
        display: flex;
        flex-direction: column;
        /* min-height: 50vh; */
        min-height: 95vh;
        width: 90vw;
        /*justify-content: space-between;*/
    }
    .reportPageBase .reportRenderPage .reportContainer {
        z-index: 1000;
        min-height: 50vh;
        background-color: white;
        /* max-width: 99vw;
        max-height: 80vh;
        overflow: auto; */
    }
    .reportPageBase .loadingDiv {
        position: fixed;
        top: 40vh;
        left: 40vw;
        z-index: 2000;
    }
    .reportPageBase .parameterDisplayBar {
        height: 2vh;
        width: 100%;
        cursor: pointer;
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        /* background-color: grey; */
        z-index: 1000;
        /* box-shadow: 2px -2px 1px darkgrey; */
        font-size: 2vh;
        color: white;
    }
    .reportPageBase .parameterDisplayBar>img {
        width: 5vw;
    }
    .showParameters {
        max-height: 100vh;
        overflow: auto;
        /*z-index: 1200;*/
    }
    .hideParametersComplete {
        max-height: .5vh;
        overflow: visible;
        /*z-index: 200;*/
    }
    .parameterDisplayAnimate {
        animation: hideParameters 1000ms forwards linear;
        -webkit-animation: hideParameters 1000ms forwards linear;
    }
    .parameterDisplayAnimateReverse {
        animation: hideParameters 1000ms reverse linear;
        -webkit-animation: hideParameters 1000ms reverse linear;
    }
    @keyframes hideParameters {
        from {
            /*z-index: 1000;*/
            /*transform: rotateX(0deg) scale(1);*/
            /*transform: scale(1);*/
            /*height: auto;*/
            /*flex: 3 0 20vh;*/
            max-height: 100vh;
            overflow: auto;
            /*z-index: 1200;*/
        }
        50% {
            /*z-index: 800;*/
            /*transform: rotateX(-45deg) scale(0.9);*/
            /*flex: 0 0 20vh;*/
            /*transform: scale(0.5);
        height: 20vh;*/
            /*max-height: 25vh;
        overflow: hidden;*/
        }
        to {
            max-height: 5vh;
            overflow: visible;
            /*z-index: 200;*/
        }
    }
    @-webkit-keyframes hideParameters {
        from {
            /*z-index: 1000;*/
            /*transform: rotateX(0deg) scale(1);*/
            /*transform: scale(1);*/
            /*height: auto;*/
            /*flex: 3 0 20vh;*/
            max-height: 100vh;
            overflow: auto;
            /*z-index: 1200;*/
        }
        50% {
            /*z-index: 800;*/
            /*transform: rotateX(-45deg) scale(0.9);*/
            /*flex: 0 0 20vh;*/
            /*transform: scale(0.5);
        height: 20vh;*/
            /*max-height: 25vh;
        overflow: hidden;*/
        }
        to {
            max-height: 5vh;
            overflow: visible;
            /*z-index: 200;*/
        }
    }
    .reportRenderSecondaryControls {
        display: none;
        /* display: flex; */
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-between;
        width: 95vw;
        font-size: 2vh;
        font-weight: 600;
    }
    .reportRenderSecondaryControls img {
        width: 2vw;
        height: 2vw;
        cursor: pointer;
    }
    .reportRenderCancelButton {
        position: fixed;
        top: 65vh;
        left: 42vw;
        z-index: 10000;
    }
    .existingNotificationScreen {
        width: 99vw;
        height: 80vh;
    }
    .existingNotificationListHeader {
        width: 99vw;
        justify-content: center;
        text-align: center;
        font-size: 2vh;
    }
    .existingNotificationSummary {}
    .newNotificationButton {
        background-color: #7986CB;
        width: 5vw;
    }
    .notificationEditFormDropshadow {
        position: fixed;
        top: 0;
        left: 0;
        background-color: black;
        z-index: 500;
        opacity: 0.3;
        width: 100vw;
        height: 100vh;
    }
    .notificationEditForm {
        width: 80vw;
        height: 80vh;
        position: fixed;
        top: 10vh;
        left: 10vw;
        background-color: white;
        z-index: 1000;
    }
    .notificationEditForm .notificationFormHeader {
        width: 80vw;
        display: flex;
        flex-direction: row;
        justify-content: center;
        font-size: 2vh;
    }
    .notificationEditForm .notificationFormContent {
        width: 70vw;
        display: flex;
        flex-direction: column;
        margin-left: 2vw;
    }
    .iqReport {
        /* border-top: grey solid 2px;; */
        margin-top: 3vh;
        /* margin-top: 3rem; */
        width: 94vw; 
    }
    .iqBackIcon {
        font-size: 1.5vw;
        margin-left: 3rem;
        margin-top: 1rem;
    }
    .powerBiContainerClass {
        width: 99vw;
        height: 70vh;
    }
    .powerBiReportList {
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        width: 98vw;
        gap: 20px;
        padding: 20px;
    }
    .powerBiReportListItem {
        width: 10vw;
        height: 8vh;
        font-size: 2.5vh;
        text-align: center;
        /* border: black 1px solid; */
        cursor: pointer;
        margin: 0.5vw;
        border-radius: 10px;
        box-shadow: rgb(100 100 111 / 30%) 0px 3px 15px 0.5px;
        /* line-height: 8vh; */
        padding: 8px 16px;
    }
    /* .powerBiReportListText {
        background-color: blue;
        height: 8vh;
        line-height: 8vh;
    } */

    .ReportIframeViewer {
        width: 100%;
        height: 85vh;
    }
}

/*portrait large tablet*/

@media only screen and (orientation: portrait) and (min-device-width: 1000px) {
    .reportPageBase {
        width: 100vw;
        min-height: 80vh;
        background-color: white;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .reportPageBase a {
        color: #0505af;
    }


    .reportPageBase .singlePageHeader {
        /*flex: 0 0 90vw;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;*/
    }
    .reportPageBase .tab {
        cursor: pointer;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        margin-right: 0px;
    }
    .selectionBorderStyle {
        width: 98%;
        height: 100%;
        margin-left: 0px;
    }
    .reportPageBase .folderHeader {
        width: 95%;
        font-size: 1.3rem;
        /* font-weight: 600; */
        margin-left: 3rem;
        margin-top: 3rem;
    }
    .reportPageBase .folderContentsDiv {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        width: 95vw;
    }
    .reportPageBase .folderContentsDiv>div {
        height: 10vh;
        flex: 0 0 10vw;
        cursor: pointer;
        margin: 1vw;
    }
    .reportPageBase .folderContentsDiv img {
        width: 5vw;
        height: 5vw;
    }
    .reportPageBase .reportParameters {
        width: 98vw;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        overflow: visible;
        z-index: 500;
        transition: ease-in-out all;
    }
    .reportPageBase .reportParameters.hide {
        height: 0px;
        overflow: hidden;
        transition: ease-in-out all;
    }
    .reportPageBase .reportParameters>div {
        flex: 1 0 15vw;
        max-width: 20vw;
        margin: 1vw;
        border: black solid 1px;
        display: flex;
        flex-direction: column;
        min-height: 20vh;
    }
    .reportPageBase .renderReportButtonContainer {
        display: flex;
        flex-direction: row;
        padding: 0.3vw;
        /*border: black solid 1px;*/
        /*border: none;*/
        /*display: flex;*/
        /*flex-direction: column;*/
        /*height: 20vh;*/
        /*height: auto;*/
        /*align-self: flex-end;*/
        justify-content: flex-end;
        width: 98vw;
        z-index: 200;
    }
    .reportPageBase .reportParameters>div .parameterName {
        font-size: 1.8vh;
    }
    .reportPageBase .renderButton {
        background-color: #7986CB;
        box-shadow: grey 1px 1px;
        /*z-index: 1000;*/
    }
    .reportPageBase .reportRenderPage {
        display: flex;
        flex-direction: column;
        min-height: 50vh;
        /*justify-content: space-between;*/
    }
    .reportPageBase .reportRenderPage .reportContainer {
        z-index: 1000;
        min-height: 50vh;
        background-color: white;
        max-width: 200vw;
    }
    .reportPageBase .loadingDiv {
        position: fixed;
        top: 40vh;
        left: 40vw;
        z-index: 2000;
    }
    .reportPageBase .parameterDisplayBar {
        height: 2vh;
        width: 98vw;
        cursor: pointer;
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        /* background-color: grey; */
        z-index: 1000;
        /* box-shadow: 2px -2px 1px darkgrey; */
        font-size: 2vh;
        color: white;
    }
    .reportPageBase .parameterDisplayBar>img {
        width: 5vw;
    }
    .showParameters {
        max-height: 100vh;
        overflow: auto;
        /*z-index: 1200;*/
    }
    .hideParametersComplete {
        max-height: .5vh;
        overflow: visible;
        /*z-index: 200;*/
    }
    .parameterDisplayAnimate {
        animation: hideParameters 1000ms forwards linear;
        -webkit-animation: hideParameters 1000ms forwards linear;
    }
    .parameterDisplayAnimateReverse {
        animation: hideParameters 1000ms reverse linear;
        -webkit-animation: hideParameters 1000ms reverse linear;
    }
    @keyframes hideParameters {
        from {
            /*z-index: 1000;*/
            /*transform: rotateX(0deg) scale(1);*/
            /*transform: scale(1);*/
            /*height: auto;*/
            /*flex: 3 0 20vh;*/
            max-height: 100vh;
            overflow: auto;
            /*z-index: 1200;*/
        }
        50% {
            /*z-index: 800;*/
            /*transform: rotateX(-45deg) scale(0.9);*/
            /*flex: 0 0 20vh;*/
            /*transform: scale(0.5);
        height: 20vh;*/
            /*max-height: 25vh;
        overflow: hidden;*/
        }
        to {
            max-height: 5vh;
            overflow: visible;
            /*z-index: 200;*/
        }
    }
    @-webkit-keyframes hideParameters {
        from {
            /*z-index: 1000;*/
            /*transform: rotateX(0deg) scale(1);*/
            /*transform: scale(1);*/
            /*height: auto;*/
            /*flex: 3 0 20vh;*/
            max-height: 100vh;
            overflow: auto;
            /*z-index: 1200;*/
        }
        50% {
            /*z-index: 800;*/
            /*transform: rotateX(-45deg) scale(0.9);*/
            /*flex: 0 0 20vh;*/
            /*transform: scale(0.5);
        height: 20vh;*/
            /*max-height: 25vh;
        overflow: hidden;*/
        }
        to {
            max-height: 5vh;
            overflow: visible;
            /*z-index: 200;*/
        }
    }
    .reportRenderSecondaryControls {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-between;
        width: 95vw;
        font-size: 2vh;
        font-weight: 600;
    }
    .reportRenderSecondaryControls img {
        width: 2vw;
        height: 2vw;
        cursor: pointer;
    }
    .reportRenderCancelButton {
        position: fixed;
        top: 65vh;
        left: 42vw;
        z-index: 10000;
    }
    .existingNotificationScreen {
        width: 99vw;
        height: 80vh;
    }
    .existingNotificationListHeader {
        width: 99vw;
        justify-content: center;
        text-align: center;
        font-size: 2vh;
    }
    .existingNotificationSummary {}
    .newNotificationButton {
        background-color: #7986CB;
        width: 5vw;
    }
    .notificationEditFormDropshadow {
        position: fixed;
        top: 0;
        left: 0;
        background-color: black;
        z-index: 500;
        opacity: 0.3;
        width: 100vw;
        height: 100vh;
    }
    .notificationEditForm {
        width: 80vw;
        height: 80vh;
        position: fixed;
        top: 10vh;
        left: 10vw;
        background-color: white;
        z-index: 1000;
    }
    .notificationEditForm .notificationFormHeader {
        width: 80vw;
        display: flex;
        flex-direction: row;
        justify-content: center;
        font-size: 2vh;
    }
    .notificationEditForm .notificationFormContent {
        width: 70vw;
        display: flex;
        flex-direction: column;
        margin-left: 2vw;
    }
    .powerBiContainerClass {
        width: 99vw;
        height: 70vh;
    }
    .powerBiReportList {
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        width: 98vw;
        gap: 20px;
        padding: 20px;
    }
    .powerBiReportListItem {
        width: 10vw;
        height: 8vh;
        font-size: 2.5vh;
        text-align: center;
        border-radius: 10px;
        box-shadow: rgb(100 100 111 / 30%) 0px 3px 15px 0.5px;
        cursor: pointer;
        padding: 8px 16px;
    }
}

/*portrait small tablet*/

@media only screen and (orientation: portrait) and (max-device-width: 1000px) {
    .reportPageBase {
        width: 100vw;
        min-height: 80vh;
        background-color: white;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .reportPageBase a {
        color: #0505af;
    }

    .reportPageBase .singlePageHeader {
        /*flex: 0 0 90vw;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;*/
    }
    .reportPageBase .tab {
        cursor: pointer;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        margin-right: 0px;
    }
    .selectionBorderStyle {
        width: 98%;
        height: 100%;
        margin-left: 0px;
    }
    .reportPageBase .folderHeader {
        width: 95%;
        font-size: 1.3rem;
        /* font-weight: 600; */
        margin-left: 3rem;
        margin-top: 3rem;
    }
    .reportPageBase .folderContentsDiv {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        width: 95vw;
    }
    .reportPageBase .folderContentsDiv>div {
        height: 10vh;
        flex: 0 0 10vw;
        cursor: pointer;
        margin: 1vw;
    }
    .reportPageBase .folderContentsDiv img {
        width: 5vw;
        height: 5vw;
    }
    .reportPageBase .reportParameters {
        width: 98vw;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        overflow: visible;
        z-index: 500;
        transition: ease-in-out all;
    }
    .reportPageBase .reportParameters.hide {
        height: 0px;
        overflow: hidden;
        transition: ease-in-out all;
    }
    .reportPageBase .reportParameters>div {
        flex: 1 0 15vw;
        max-width: 20vw;
        margin: 1vw;
        border: black solid 1px;
        display: flex;
        flex-direction: column;
        min-height: 20vh;
    }
    .reportPageBase .renderReportButtonContainer {
        display: flex;
        flex-direction: row;
        padding: 0.3vw;
        /*border: black solid 1px;*/
        /*border: none;*/
        /*display: flex;*/
        /*flex-direction: column;*/
        /*height: 20vh;*/
        /*height: auto;*/
        /*align-self: flex-end;*/
        justify-content: flex-end;
        width: 98vw;
        z-index: 200;
    }
    .reportPageBase .reportParameters>div .parameterName {
        font-size: 1.8vh;
    }
    .reportPageBase .renderButton {
        background-color: #7986CB;
        box-shadow: grey 1px 1px;
        /*z-index: 1000;*/
    }
    .reportPageBase .reportRenderPage {
        display: flex;
        flex-direction: column;
        min-height: 50vh;
        /*justify-content: space-between;*/
    }
    .reportPageBase .reportRenderPage .reportContainer {
        z-index: 1000;
        min-height: 50vh;
        background-color: white;
        max-width: 200vw;
    }
    .reportPageBase .loadingDiv {
        position: fixed;
        top: 40vh;
        left: 40vw;
        z-index: 2000;
    }
    .reportPageBase .parameterDisplayBar {
        height: 2vh;
        width: 98vw;
        cursor: pointer;
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        /* background-color: grey; */
        z-index: 1000;
        /* box-shadow: 2px -2px 1px darkgrey; */
        font-size: 2vh;
        color: white;
    }
    .reportPageBase .parameterDisplayBar>img {
        width: 5vw;
    }
    .showParameters {
        max-height: 100vh;
        overflow: auto;
        /*z-index: 1200;*/
    }
    .hideParametersComplete {
        max-height: .5vh;
        overflow: visible;
        /*z-index: 200;*/
    }
    .parameterDisplayAnimate {
        animation: hideParameters 1000ms forwards linear;
        -webkit-animation: hideParameters 1000ms forwards linear;
    }
    .parameterDisplayAnimateReverse {
        animation: hideParameters 1000ms reverse linear;
        -webkit-animation: hideParameters 1000ms reverse linear;
    }
    @keyframes hideParameters {
        from {
            /*z-index: 1000;*/
            /*transform: rotateX(0deg) scale(1);*/
            /*transform: scale(1);*/
            /*height: auto;*/
            /*flex: 3 0 20vh;*/
            max-height: 100vh;
            overflow: auto;
            /*z-index: 1200;*/
        }
        50% {
            /*z-index: 800;*/
            /*transform: rotateX(-45deg) scale(0.9);*/
            /*flex: 0 0 20vh;*/
            /*transform: scale(0.5);
        height: 20vh;*/
            /*max-height: 25vh;
        overflow: hidden;*/
        }
        to {
            max-height: 5vh;
            overflow: visible;
            /*z-index: 200;*/
        }
    }
    @-webkit-keyframes hideParameters {
        from {
            /*z-index: 1000;*/
            /*transform: rotateX(0deg) scale(1);*/
            /*transform: scale(1);*/
            /*height: auto;*/
            /*flex: 3 0 20vh;*/
            max-height: 100vh;
            overflow: auto;
            /*z-index: 1200;*/
        }
        50% {
            /*z-index: 800;*/
            /*transform: rotateX(-45deg) scale(0.9);*/
            /*flex: 0 0 20vh;*/
            /*transform: scale(0.5);
        height: 20vh;*/
            /*max-height: 25vh;
        overflow: hidden;*/
        }
        to {
            max-height: 5vh;
            overflow: visible;
            /*z-index: 200;*/
        }
    }
    .reportRenderSecondaryControls {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-between;
        width: 95vw;
        font-size: 2vh;
        font-weight: 600;
    }
    .reportRenderSecondaryControls img {
        width: 2vw;
        height: 2vw;
        cursor: pointer;
    }
    .reportRenderCancelButton {
        position: fixed;
        top: 65vh;
        left: 42vw;
        z-index: 10000;
    }
    .existingNotificationScreen {
        width: 99vw;
        height: 80vh;
    }
    .existingNotificationListHeader {
        width: 99vw;
        justify-content: center;
        text-align: center;
        font-size: 2vh;
    }
    .existingNotificationSummary {}
    .newNotificationButton {
        background-color: #7986CB;
        width: 5vw;
    }
    .notificationEditFormDropshadow {
        position: fixed;
        top: 0;
        left: 0;
        background-color: black;
        z-index: 500;
        opacity: 0.3;
        width: 100vw;
        height: 100vh;
    }
    .notificationEditForm {
        width: 80vw;
        height: 80vh;
        position: fixed;
        top: 10vh;
        left: 10vw;
        background-color: white;
        z-index: 1000;
    }
    .notificationEditForm .notificationFormHeader {
        width: 80vw;
        display: flex;
        flex-direction: row;
        justify-content: center;
        font-size: 2vh;
    }
    .notificationEditForm .notificationFormContent {
        width: 70vw;
        display: flex;
        flex-direction: column;
        margin-left: 2vw;
    }
    .powerBiContainerClass {
        width: 99vw;
        height: 70vh;
    }
    .powerBiReportList {
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        width: 98vw;
    }
    .powerBiReportListItem {
        width: 10vw;
        height: 8vh;
        font-size: 2.5vh;
        text-align: center;
        border-radius: 10px;
        box-shadow: rgb(100 100 111 / 30%) 0px 3px 15px 0.5px;
        cursor: pointer;
        padding: 8px 16px;
    }
}

/*phone screen*/

@media only screen and (min-device-width: 300px) and (max-device-width: 700px) {
    .reportPageBase {
        width: 100vw;
        min-height: 80vh;
        background-color: white;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .reportPageBase a {
        color: #0505af;
    }

    .reportPageBase .singlePageHeader {
        /*flex: 0 0 90vw;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;*/
    }
    .reportPageBase .tab {
        cursor: pointer;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        margin-right: 0px;
    }
    .selectionBorderStyle {
        width: 98%;
        height: 100%;
        margin-left: 0px;
    }
    .reportPageBase .folderHeader {
        width: 95%;
        font-size: 1.3rem;
        /* font-weight: 600; */
        margin-left: 3rem;
        margin-top: 3rem;
    }
    .reportPageBase .folderContentsDiv {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        width: 95vw;
    }
    .reportPageBase .folderContentsDiv>div {
        height: 10vh;
        flex: 0 0 10vw;
        cursor: pointer;
        margin: 1vw;
    }
    .reportPageBase .folderContentsDiv img {
        width: 5vw;
        height: 5vw;
    }
    .reportPageBase .reportParameters {
        width: 98vw;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        overflow: visible;
        z-index: 500;
        transition: ease-in-out all;
    }
    .reportPageBase .reportParameters.hide {
        height: 0px;
        overflow: hidden;
        transition: ease-in-out all;
    }
    .reportPageBase .reportParameters>div {
        flex: 1 0 15vw;
        max-width: 20vw;
        margin: 1vw;
        border: black solid 1px;
        display: flex;
        flex-direction: column;
        min-height: 20vh;
    }
    .reportPageBase .renderReportButtonContainer {
        display: flex;
        flex-direction: row;
        padding: 0.3vw;
        /*border: black solid 1px;*/
        /*border: none;*/
        /*display: flex;*/
        /*flex-direction: column;*/
        /*height: 20vh;*/
        /*height: auto;*/
        /*align-self: flex-end;*/
        justify-content: flex-end;
        width: 98vw;
        z-index: 200;
    }
    .reportPageBase .reportParameters>div .parameterName {
        font-size: 1.8vh;
    }
    .reportPageBase .renderButton {
        background-color: #7986CB;
        box-shadow: grey 1px 1px;
        /*z-index: 1000;*/
    }
    .reportPageBase .reportRenderPage {
        display: flex;
        flex-direction: column;
        min-height: 50vh;
        /*justify-content: space-between;*/
    }
    .reportPageBase .reportRenderPage .reportContainer {
        z-index: 1000;
        min-height: 50vh;
        background-color: white;
        max-width: 200vw;
        overflow: auto;
        transform: scale(1.8);
        transform-origin: top left;
    }
    .reportPageBase .loadingDiv {
        position: fixed;
        top: 40vh;
        left: 40vw;
        z-index: 2000;
    }
    .reportPageBase .parameterDisplayBar {
        height: 2vh;
        width: 98vw;
        cursor: pointer;
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        /* background-color: grey; */
        z-index: 1000;
        /* box-shadow: 2px -2px 1px darkgrey; */
        font-size: 2vh;
        color: white;
    }
    .reportPageBase .parameterDisplayBar>img {
        width: 5vw;
    }
    .showParameters {
        max-height: 100vh;
        overflow: auto;
        /*z-index: 1200;*/
    }
    .hideParametersComplete {
        max-height: .5vh;
        overflow: visible;
        /*z-index: 200;*/
    }
    .parameterDisplayAnimate {
        animation: hideParameters 1000ms forwards linear;
        -webkit-animation: hideParameters 1000ms forwards linear;
    }
    .parameterDisplayAnimateReverse {
        animation: hideParameters 1000ms reverse linear;
        -webkit-animation: hideParameters 1000ms reverse linear;
    }
    @keyframes hideParameters {
        from {
            /*z-index: 1000;*/
            /*transform: rotateX(0deg) scale(1);*/
            /*transform: scale(1);*/
            /*height: auto;*/
            /*flex: 3 0 20vh;*/
            max-height: 100vh;
            overflow: auto;
            /*z-index: 1200;*/
        }
        50% {
            /*z-index: 800;*/
            /*transform: rotateX(-45deg) scale(0.9);*/
            /*flex: 0 0 20vh;*/
            /*transform: scale(0.5);
        height: 20vh;*/
            /*max-height: 25vh;
        overflow: hidden;*/
        }
        to {
            max-height: 5vh;
            overflow: visible;
            /*z-index: 200;*/
        }
    }
    @-webkit-keyframes hideParameters {
        from {
            /*z-index: 1000;*/
            /*transform: rotateX(0deg) scale(1);*/
            /*transform: scale(1);*/
            /*height: auto;*/
            /*flex: 3 0 20vh;*/
            max-height: 100vh;
            overflow: auto;
            /*z-index: 1200;*/
        }
        50% {
            /*z-index: 800;*/
            /*transform: rotateX(-45deg) scale(0.9);*/
            /*flex: 0 0 20vh;*/
            /*transform: scale(0.5);
        height: 20vh;*/
            /*max-height: 25vh;
        overflow: hidden;*/
        }
        to {
            max-height: 5vh;
            overflow: visible;
            /*z-index: 200;*/
        }
    }
    .reportRenderSecondaryControls {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-between;
        width: 95vw;
        font-size: 2vh;
        font-weight: 600;
    }
    .reportRenderSecondaryControls img {
        width: 2vw;
        height: 2vw;
        cursor: pointer;
    }
    .reportRenderCancelButton {
        position: fixed;
        top: 65vh;
        left: 42vw;
        z-index: 10000;
    }
    .existingNotificationScreen {
        width: 99vw;
        height: 80vh;
    }
    .existingNotificationListHeader {
        width: 99vw;
        justify-content: center;
        text-align: center;
        font-size: 2vh;
    }
    .existingNotificationSummary {}
    .newNotificationButton {
        background-color: #7986CB;
        width: 5vw;
    }
    .notificationEditFormDropshadow {
        position: fixed;
        top: 0;
        left: 0;
        background-color: black;
        z-index: 500;
        opacity: 0.3;
        width: 100vw;
        height: 100vh;
    }
    .notificationEditForm {
        width: 80vw;
        height: 80vh;
        position: fixed;
        top: 10vh;
        left: 10vw;
        background-color: white;
        z-index: 1000;
    }
    .notificationEditForm .notificationFormHeader {
        width: 80vw;
        display: flex;
        flex-direction: row;
        justify-content: center;
        font-size: 2vh;
    }
    .notificationEditForm .notificationFormContent {
        width: 70vw;
        display: flex;
        flex-direction: column;
        margin-left: 2vw;
    }
    .powerBiContainerClass {
        width: 99vw;
        height: 70vh;
    }
    .powerBiReportList {
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        width: 98vw;
        gap: 20px;
        padding: 20px;
    }


    .powerBiReportListItem {
        width: 10vw;
        height: 8vh;
        font-size: 2.5vh;
        text-align: center;
        border-radius: 10px;
        box-shadow: rgb(100 100 111 / 30%) 0px 3px 15px 0.5px;
        cursor: pointer;
        padding: 8px 16px;
    }
}