body {
    margin: 0px;
    padding: 0px;
    font: arial;
    font-size: 16px;
    font-weight: normal;
    overflow-y: scroll;
    z-index: 1;
}

.head_container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    width: 185px;
    padding: 0px 5px;
}

.logo_img {
    padding: 5px;
}

.logo_txt {
    text-align: center;
    padding-left: 5px;
    font-size: 11px;
    font-style: italic;
    color: #2E74B5;
}

.doc_title {
    margin: 10px auto;
    text-align: center;
    /*color:#2E74B5;*/
    color: #00b4c1;
    font-size: 40px;
    text-transform: uppercase;
    padding: 0px 5px;
}

.page_title {
    text-align: center;
    color: green;
    margin-bottom: 0px;
}

.div_flags {
    display: flex;
    flex-wrap: nowrap;
    width: 185px;
    justify-content: flex-end;
    padding: 0px 5px;
}

.flags {
    padding: 0px 5px;
}

.frame {
    width: 95%;
    padding: 10px;
    margin: 0px auto;
    background-color: #fff;
    ;
}

.section {
    width: 100%;
    border: 2px solid #9dd7b1;
    padding: 5px 5px 15px 15px;
    position: relative;
    margin: 40px auto;
    margin-top: 0px;
    page-break-after: always;
}

.section_title {
    margin: 0px;
    padding: 2px 5px;
    position: relative;
    top: -22px;
    left: 10px;
    background-color: #ffffff;
    font-weight: bold;
    font-size: 24px;
    line-height: 25px;
    color: red;
}

.section p {
    margin: 0px;
}

.highlighted {
    font-weight: bold;
}

.array_table {
    border: 1px solid black;
    border-collapse: collapse;
    border-spacing: 0px;
    min-width: 30%;
}

.array_table td,
th {
    border: 1px solid black;
    padding: 5px 10px;
}

.array_table thead tr {
    background-color: #cccccc;
}

.array_table tbody tr:nth-child(even) {
    background-color: #c0d6e4;
}

.array_table tbody td:nth-child(n+2) {
    text-align: right;
}

.array_table tfoot tr {
    background-color: #e6fddf;
    font-weight: bold;
    text-transform: uppercase;
}

.array_table tfoot td:nth-child(n+2) {
    text-align: right;
}

@ -moz-document url-prefix () {
    .array_table {
        border-collapse: separate;
        border: 0px solid black;
    }
    .array_table td,
    th {
        border: 1px solid black;
        border-bottom: 0px;
        border-right: 0px;
    }
    .array_table tfoot td {
        border-bottom: 1px solid black;
    }
    .array_table td:last-child,
    th:last-child {
        border-right: 1px solid black;
    }
}

.bottom_text {
    font-style: italic;
    font-size: 12px;
}

img {
    vertical-align: middle;
}

.my_container {
    display: -webkit-box;
    /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box;
    /* OLD - Firefox 19- (buggy but mostly works) */
    display: -webkit-flex;
    /* NEW - Chrome */
    display: flex;
    /* NEW, Spec - Opera 12.1, Firefox 20+ */
    -webkit-box-flex-direction: row;
    -moz-box-flex-direction: row;
    -webkit-flex-direction: row;
    flex-direction: row;
    /*justify-content: space-between;*/
    justify-content: center;
}

.data_table {
    width: 50%;
}

.data_graph {
    width: 50%;
}


/* custom height for interests */

.plotly_custom_ci {
    min-height: 1200px;
}


/* custom height for region */

.plotly_custom_region {
    min-height: 800px;
}

.bold_line td {
    font-weight: bold;
}

.b2c_table th,
.b2b_table th {
    text-align: center;
}


/* Sets nowrap for the last td of the table (b2c) */

.b2c_table td:nth-last-child(-n+1) {
    white-space: nowrap;
}


/* Sets nowrap for the last 2 td of the table (b2b) */

.b2b_table td:nth-last-child(-n+2) {
    white-space: nowrap;
}

.b2c_table td:not(:first-child),
.b2b_table td:not(:first-child) {
    text-align: right;
}

.green_border {
    border: 1px solid green;
}

.dates_switch {
    display: none;
}


/** Evolution **/

.evolution_table {
    width: 100%;
}

.evolution_graph {
    display: block;
    width: 100%;
}

.evolution_table th {
    text-align: center;
}

.b2c_table td:not(:first-child),
.b2b_table td:not(:first-child) {
    text-align: right;
}

.evolution_b2b {
    white-space: nowrap;
}

.evolution_b2c {
    white-space: nowrap;
}

.evolution_th_span {
    font-style: italic;
    font-size: 11px;
}

.evolution_table td:not(:first-child) {
    text-align: right;
}


/**************/

.print_button {
    position: absolute;
    right: 10px;
    z-index: 10;
}

.print_button button {
    margin-top: 5px;
}


/******** EVOLUTION COMBOBOX *********/

.ev_combo_container {
    border-color: #00b4c1;
    border-width: 1px;
    border-left: solid 10px #00b4c1;
}

.ev_combo_col {
    justify-content: center;
}

.ev_combo_label {
    margin-right: 10px;
    font-weight: bold;
}

.ev_combo_select {
    width: 20% !important;
}


/******** OVERLAY + LOADER ********/

.loader_outside {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1000;
    background-color: rgba(255, 255, 255, 0.5);
}

.loader_inside {
    width: 60px;
    position: fixed;
    top: 50%;
    left: 50%;
}

.loader_insider img {
    width: 60px;
}


/************************************/

.flex_centered {
    display: flex;
    justify-content: center;
}

.page_date {
    text-align: center;
    font-size: 12px;
    font-style: italic;
}

.calendar_input_div input {
    width: 100%;
    margin: 5px;
    padding: 5px;
}

.calendar_buttons {
    display: flex;
    justify-content: center;
}


/*** Media quieries ***/


/* On screens that are 1200px or less */

@media screen and (max-width: 1200px) {
    .frame {
        width: 100%;
        padding: 0px;
        margin: 0px auto;
        background-color: #fff;
        ;
    }
    .section {
        width: 100%;
        border: 2px solid #9dd7b1;
        padding: 5px 5px 15px 15px;
        position: relative;
        margin: 40px auto;
    }
}


/* Printing */

@page {
    size: A4;
    margin-top: 10mm;
    margin-bottom: 12mm;
    margin-left: 0;
    margin-right: 0;
}

@media print {
    /*** Hiding elements when printing ***/
    .head_container,
    .menu_container,
    .print_button {
        display: none;
    }
    .section {
        display: block;
        margin-top: 60px;
    }
    .my_container {
        display: block;
        width: 100%;
    }
    .data_table {
        display: block;
        width: 100%;
        padding: 10px;
    }
    .data_graph {
        display: block;
        width: 100%;
        padding: 20px 10px;
        page-break-inside: avoid;
    }
    /*** Avoid thead and tfoot overlap ***/
    thead {
        display: table-row-group
    }
    tfoot {
        display: table-row-group
    }
    tr {
        page-break-inside: avoid
    }
    .frame {
        margin: 0;
        border: initial;
        border-radius: initial;
        width: initial;
        min-height: initial;
        box-shadow: initial;
        background: initial;
        page-break-after: always;
    }
}