/* Copyright (c) Microsoft Corporation.
Licensed under the MIT license. */

main {
    margin: 0 auto;
    width: 100%;
}

.ExportReport
{
    cursor: pointer;
}

.ExportOff {
        pointer-events: none;
        opacity: 0.5;
        cursor: default;
    }

.ExportDisabled {
    /*pointer-events: none;*/
    opacity: 0.5;
    cursor: default;
}

    /* Hide original icon when export is in progress */
    .ExportDisabled .original-icon {
        display: none;
    }

    /* Show the animated dots only when ExportDisabled class is added */
    .ExportDisabled .dots-container {
        display: inline-block;
    }

/* Hide the animated dots initially */
.dots-container {
    display: none;
    font-size: 16px;
    color: blue; 
    
}

/* Dot animations */
.dot {
    opacity: 1.0;
    animation: dotAnimation 1.5s infinite steps(1);
}

    .dot:nth-child(1) {
        animation-delay: 0s;
    }

    .dot:nth-child(2) {
        animation-delay: 0.5s;
    }

    .dot:nth-child(3) {
        animation-delay: 1s;
    }

@keyframes dotAnimation {
    0% {
        opacity: 0.6;
        color: transparent; 
    }

    33% {
        opacity: 1;
        color: black;
    }

    66% {
        opacity: 0.6;
        color: transparent;
    }

    100% {
        opacity: 0.6;
        color: transparent;
    }
}
/* Create a loading dots animation using ellipsis (...) */
/*.loading-dots {
    display: inline-block;
    font-size: 16px;
    font-weight: bold;
}

    .loading-dots::after {
        content: "...";
        animation: dots-animation 1.5s infinite steps(1);
    }

@keyframes dots-animation {
    0% {
        content: ".";
    }

    33% {
        content: "..";
    }

    66% {
        content: "...";
    }

    100% {
        content: ".";
    }
}*/

#text-container > div > p {
    font: 1.2em "segoe ui", arial, sans-serif;
}

.ReportPage {
    display: flex;
    height: 100vh;
    flex-flow: column;
}

#NoReports {
    padding: 40px;
    display: none;
}

#report-container {
    /*height: calc(0.5625 * 61vw);*/ /* 16:9 aspect ratio */
    /*height: calc(0.5625 * 71vw);*/
    /*height: calc(100%);*/
    /*height: calc(vmax);*/
    /*height: calc(50vw);*/
    /*height: calc(80vw);*/
    /*height: calc((100vw - 60px) * 0.59);*/
    display: flex;
    flex:1;
    flex-direction: column;
    height:100vh;
    /*border:1px solid green;*/
}

iframe {
    border: none;
}

@media only screen and (max-width: 574px) {
    #report-container {
        height: calc(0.5625 * 100vw); /* 16:9 aspect ratio */
        background-color:yellow;
    }
}