/*
Embedded reports styling for embed.html.twig
See POL-11624
*/


@font-face {
    font-family: 'Source Sans Light';
    src: url(../webfonts/SourceSansPro-Light.otf);
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Source Sans Regular';
    src: url(../webfonts/SourceSansPro-Regular.otf);
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Source Sans Bold';
    src: url(../webfonts/SourceSansPro-Bold.otf);
    font-weight: normal;
    font-style: normal;
}


body {
    margin:0;
    font-family: 'Source Sans Regular','Helvetica','sans-serif';
}
#error_message{
    padding: 1rem;
}
#report_content {
    margin: 0.5rem;
}
.bold {
    font-family: 'Source Sans Bold','Helvetica','sans-serif';
}

/* Navbar styling */
nav {
    margin: 0.75rem 0.75rem 0.25rem 0.75rem;
    list-style-type: none;
}
nav a {
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
}

#linked_dashboard_navbar {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(8rem,1fr));
    background-color: #286090;
    border-radius: 0.25rem;

    a {
        padding: 0.675rem 0.875rem;
        font-size: 1.25rem;
        color: rgba(255,255,255,0.65);
        div {
            padding: 0.2rem 0;
        }
    }
    a.active {
        color: white;
        div {
            border-bottom: 2px solid white;
        }
    }
    a:hover {
        color: white;
    }
}

#embed_navbar {
    display: grid;
    gap: 0.875rem;
    grid-template-columns: repeat(auto-fit,minmax(12.5rem,1fr));
}
#embed_navbar a {
    background-color: gainsboro;
    padding: 0.625rem;
    margin: 0;
    border-radius: 0.25rem;
    box-shadow: 0.125rem 0.125rem 0.125rem darkgrey;
    color: #000;
    display: flex;
    justify-content: space-between;
}
#embed_navbar a:hover,
#embed_navbar a.active {
    background-color: #5c5c5c;
    color: white;
}
#embed_navbar #compare_switch_key_columns {
    background-color: #0BC148;
}
#embed_navbar #compare_switch_key_columns:hover {
    background-color: #099A39;
}

.special_navbutton {
    display: none; /* Starts hidden on the page, is revealed by JS after the page loads alongside the other nav buttons */
}

/* Chart container styling (note that the chart styling itself is handled by chart.js parameters in embed.js */
#charts_container {
    width:calc(100% - 1rem);
    height:100%;
    padding: 0.5rem;
}
#charts_container .chart_category_container{
    display:flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
    margin: 0rem;
    padding: 0rem;
    width: 100%;
    height: 100%;
}
#charts_container .canvas_container,
#charts_container .map_container
{
    position: relative;
    margin: 0.25rem;
    border: 1px solid gainsboro;
    border-radius: 0.25rem;
    box-shadow: 0.125rem 0.125rem 0.1875rem darkgrey;
    height: 30rem;
    background-color: white;
    box-sizing: border-box;
}
#charts_container .canvas_container {
    padding: 0.75rem;
}
#charts_container .map_container {
    padding: 0;
}

/* At 800px or above, show the charts in two columns. Below that, use only one column */
@media screen and (min-width: 800px){
    #charts_container .canvas_container,
    #charts_container .map_container
    {
        width: calc(50% - 0.5rem);
        /*flex: 1 1 auto;*/
    }
}

@media screen and (max-width: 799px){
    #charts_container .canvas_container,
    #charts_container .map_container
    {
        width: calc(100% - 0.5rem);
        /*flex: 1 1 auto;*/
    }
}

/* When fullscreen is enabled, pop the container into a fullscreen modal */

#charts_container .canvas_container.fullscreen,
#charts_container .map_container.fullscreen
{
    width: calc(100vw - 1.5rem)!important;
    height: calc(100vh - 1.5rem)!important;
    max-height: 1000px;
    position: fixed;
    top: 0;
    left: 0;
    margin: 0.75rem;
    z-index: 2000;
}

/* Allow for some charts to extend to fill both columns */

#charts_container .canvas_container.extended,
#charts_container .map_container.extended
{
    width: calc(100% - 0.5rem);
}

/* Description button styling */
#charts_container .canvas_container.has_description {
    height: 30rem;
    padding-bottom: 3.75rem;
    transition: 0.2s;
}

#charts_container .canvas_container.has_description.active {
    transition: 0.2s;
}

.description_button {
    width: 100%;
    cursor: pointer;
    padding: 0.625rem;
    border: none;
    text-align: left;
    outline: none;
    font-size: 1rem;
    background-color: #eee;
    color: #444;
    margin-top: 0.3125rem;
    transition: 0.4s;
}

.description_button:hover,
.description_button.active {
    background-color:#ccc
}

.description_button:after {
    content: '+';
    color:#444;
    float: right;
    margin-left: 0.3125rem;
}

.description_button.active:after {
    content: '\2212';       /* icon on description box changes to a (-) when open */
}

.description_block {
    box-sizing: border-box;
    padding: 0 1.125rem;
    width: 100%;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
    background-color: white;
    font-size: 0.875rem;
    color:#444;
}


/* Modal Styling */
#modal-backdrop {
    position: fixed;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
    z-index: 1500;
    background-color: rgba(0,0,0,0.4);
}
#embed_modal {
    width: 25rem;
    max-width: 90vw;
    padding: 1.25rem;
    box-sizing: border-box;
    position: fixed;
    left: calc( 50% - ( min( 25rem , 90vw ) / 2 ) );
    top: 25%;
    z-index: 2000;
    background-color: white;
    border: 1px solid gainsboro;
    border-radius: 0.1875rem;
    box-shadow: 0rem 0rem 0.3125rem 0.3125rem rgba(0,0,0,0.1);
}
#embed_modal #embed_modal_header {
    width: 100%;
    margin: 0;
    display: flex;
    justify-content: space-between;
}
#embed_modal h1 {
    margin: 0;
    width: calc(100% - 3rem);
    text-align: left;
}
#embed_modal button#close_embed_modal {
    width: 2rem;
    height: 2rem;
    padding: 0.25rem 0.5rem;
    font-weight: bold;
    margin: 0;
    cursor: pointer;
}
#embed_modal #embed_modal_content {
    width: 100%;
}
#embed_modal #embed_modal_content > div {
    margin-top: 0.625rem;
}
#embed_modal input{
    margin-top: 0.625rem;
    width: 100%;
    padding: 0.3125rem;
    box-sizing: border-box;
    border: 1px solid gainsboro;
}
/* POL-11701 Download Reports modal for compare page */
#embed_modal ul#report_files_download{
    margin:0;
    padding: 0;
    display: block;
    border: 1px solid darkgrey;
    border-radius: 0.1875rem;
    max-height: 18.75rem;
    width: 100%;
    overflow-y: auto;
}
#embed_modal ul#report_files_download li {
    padding: 0.5rem;
}
#embed_modal ul#report_files_download li:not(:last-child) {
    border-bottom: 1px solid gainsboro;
}
#embed_modal ul#report_files_download li a{
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    max-width: 100%;
    display: inline-block;
    vertical-align: middle;
}

/* Footer css */
#embed_logo_footer {
    width: calc(100% - 1rem);
    padding: 0.5rem;
}
#embed_logo_footer h2 {
    margin: 0.75rem 0rem 0rem 0rem;
    text-align: center;
    font-size: 1.125rem;
}
#embed_logo_footer img {
    display:block;
    margin: 0.5rem auto 0.75rem auto;
    width: 9.375rem;
}
#loading_spinner_container {
    width: 6.875rem;
    margin: 0.5rem auto 0.5rem auto;
}