/* Table of contents
––––––––––––––––––––––––––––––––––––––––––––––––––
    - Font Styles
    - Base Styles
    - Modified Plotly Styles
    - Modified Dash Styles

    - App Styles
    - Media Queries
––––––––––––––––––––––––––––––––––––––––––––––––––*/


/* Brand Colors

--color-primary-original-1: #073645;
--color-primary-original-2: #E54B47;
--color-primary-original-3: #95C173;
--color-primary-original-4: #527881;

--color-secondary-original-1: #35709D;
--color-secondary-original-2: #57A8E7;
--color-secondary-original-3: #A9BCE2;

--color-secondary-original-4: #A05863;
--color-secondary-original-5: #E47F47;
--color-secondary-original-6: #ECA850;

--color-secondary-original-7: #40423B;
--color-secondary-original-8: #419478;
--color-secondary-original-9: #75EAD2;

--color-secondary-original-10: #8F9B97;
--color-secondary-original-11: #83BFCD;
--color-secondary-original-12: #B3C9CE; */



:root {


    --color-primary-1: #073645;           /* Primary CTI's and accents */
    --color-primary-2: #ffffff;           /* Majority of background elements*/

    --color-secondary-1: #95C173;         /* Emphasis and body copy */
    --color-secondary-2: #57A8E7;         /* Accents and highlight areas */
    --color-secondary-3: #8F9B97;         /* Structural elements */

    --color-special-1: #E54B47;           /* Errors and alerts */
    --color-special-2: #ECA850;           /* Affirmations */

    /* ~Lite versions of Colors Above */
    --color-primary-1-lite: #1481830b;    /* Primary CTI's and accents */
    --color-primary-2-lite: #ffffff0b;    /* Majority of background elements*/

    --color-secondary-1-lite: #072e410b;  /* Emphasis and body copy */
    --color-secondary-2-lite: #6f9fc80b;  /* Accents and highlight areas */
    --color-secondary-3-lite: #7385840b;  /* Structural elements */

    --color-special-1-lite: #e6443b0b;    /* Errors and alerts */
    --color-special-2-lite: #b5b5460b;    /* Affirmations */

    /* Misc Colors*/
    --body-background-color: #fdfdfd;
    --old-app-green: #7dbcb7;

    /* Misc Variables */
    --section-padding-v: 2.5rem;          /* -v is for top/bottom padding */
    --section-padding-h: 5rem;            /* -h is for left/right padding */
    --section-padding-v-mobile: 1rem;          /* -v is for top/bottom padding */
    --section-padding-h-mobile: 2rem;            /* -h is for left/right padding */
    --section-card-padding: 3rem;
    --section-card-padding-mobile: 1rem;
    --section-padding-above: 6.5rem;      /* this shifts entire section cards/labels down to not overlap with the repeating header */
}

/* Font Styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */

@font-face {
    font-family: "Jost*";
    src: url("../fonts/Jost500Medium.otf") format("opentype");
}

@font-face {
    font-family: "Jost*";
    src: url("../fonts/Jost700Bold.otf") format("opentype");
    font-weight: bold;
}

@font-face {
    font-family: "Futura Md BT";
    src: url("../fonts/Futura Medium.ttf") format("truetype");
}

@font-face {
    font-family: "Futura Md BT";
    src: url("../fonts/Futura Bold.ttf") format("truetype");
    font-weight: bold;
}

/* Base Styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */

*, *:after, *:before {
    box-sizing: border-box;
}

body {
    font-size: 0.95rem;
    font-family: "Jost*", "Tw Cen MT", "Futura Md BT", sans-serif;
    color: var(--color-secondary-1);
    background-color: var(--body-background-color);
    margin: 0;
}

@media print {
    body {
        background-color: unset;
        print-color-adjust: exact !important;
        -webkit-print-color-adjust: exact !important;
    }
}

h1 {
    font-size: 2.2rem;
    font-weight: bold;
}

h6 {
    font-weight: bold;
}

a {
    color: unset;
}

ul li {
    list-style-type: disc;
    list-style-position: outside;
}

/* Modified Plotly Styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.plotly svg {
    background: unset !important;
    font-family: "Jost*", "Tw Cen MT", "Futura Md BT" !important;
    overflow: visible !important;
}

.plotly svg text {
    font-family: "Jost*", "Tw Cen MT", "Futura Md BT" !important;
}

.plotly svg rect.bg {
    fill-opacity: 0 !important;
}

.section-card .user-select-none.svg-container {
    margin: auto !important;
}

/* the class `.axistext` removes the xaxis hoverbox */
.axistext {
    opacity: 0 !important;
}

/*
    Note about Plotly Plots in Print View
    ––––––––––––––––––––––––––––––––––––––––––––––––––

    For each container that surrounds a plotly graph that has
    horizontal left padding, a graph with autosize=True is
    shifted to the right by the left padding in print view.

    In order to correct for this, we translate the plotly
    graph to the left by half the combined padding of all
    parent containers.

    The way the app looks when in print preview is still
    browser-dependant, so there may be slight variations in
    the horizontal position regardless.
*/
@media print {
    .section-card .user-select-none.svg-container {
        margin: auto !important;
        transform: translate(-1rem, 0);
    }
}


/* Modified Dash Styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */

/* App Styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */

/* .main-wrapper makes a centered A4-paper effect for the webapp */
.main-wrapper {
    padding: 0;
    margin: 2rem auto;
    max-width: 120ch;
}
@media screen and (max-width: 60em) {
    .main-wrapper {
        margin: 0;
    }
}

.main-table {
    padding: 0;
    margin: 2rem auto;
    max-width: 120ch;
}

.floating-header {
    margin: 0 auto;
    top: 1rem;
    position: sticky;
    z-index: 9999;
    max-width: 60ch;
    background-color: var(--body-background-color);
    padding: 0.5rem;
    transition: box-shadow 0.5s ease-in-out;
    display: flex;
    justify-content: space-around;
}

@media screen and (max-width: 60em) {
    .floating-header {
        top: 0;
    text-align: center;
    flex-direction: column-reverse;
    align-items: center;
    row-gap: 1rem;
    }

}

.lite-shadow {
    box-shadow: 0 2px 15px 5px rgba(0, 0, 0, 0.02);
}

.shadow {
    box-shadow: 0 2px 15px 5px rgba(0, 0, 0, 0.1);
}

@media print {
    .shadow {
        box-shadow: 0 2px 15px 5px rgba(0, 0, 0, 0);
    }
}

.country-dropdown {
    width: 350px;
}

.cti-logo-header {
    width: 140px;
    height: 36px;
    margin: 0;
}

.titlebar, .titlebar-web {
    text-align: center;
    position: relative;
    color: var(--color-primary-2);
    background-color: var(--color-primary-1);
    font-variant: small-caps;
    padding: 1.5rem;
    font-weight: bold;
    letter-spacing: 0.02ch;
    margin-bottom: 0;
}

.titlebar-web {
    padding: 15px;
}

.app-title-print {
    margin-bottom: 0;
}

.company-title {
    margin-bottom: 0.1rem;
}

.company-ticker {
    color: #4E5F6E;
    margin: 0.6rem auto;
}

.page {
    background-color: #fefefc;
}

.section {
    position: relative;
    padding: var(--section-padding-v) var(--section-padding-h);
}

@media screen and (max-width: 60em) {
.section {
    padding: var(--section-padding-v-mobile) var(--section-padding-h-mobile);
}

}

.page-title {
    position: relative;
    text-align: center;
    padding: var(--section-padding-v) var(--section-padding-h);
}

.section-label {
    position: relative;
    display: inline-block;
    color: var(--color-primary-2);
    text-align: left;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: bold;
    padding: 0.5rem 1rem 0.5rem 1rem;
    background-color: purple;  /*replace*/
}

.section-label:hover {
    color: var(--color-primary-2);
    opacity: 0.9;
}

.section-label-right-side {
    left: 100%;
    transform: translateX(-100%);
    text-align: right;
}

.section-card {
    padding: var(--section-card-padding) !important;
    background-color: orange;  /*replace*/
}

@media screen and (max-width: 60em) {
.section-card {
    padding: var(--section-card-padding-mobile) !important;
}
}

.cti-analysis {
	border: 0.5px solid black;
	padding: 3rem;
	margin-top: 4rem;
	margin-bottom: 4rem;
	background-color: #f0f0f0;
  }

  .cti-analysis h6 {
	font-weight: bold;
	color: unset;
  }

  .cti-analysis p {
	padding: 2rem;
	margin: 0.5rem;
	background-color: white;
  }

  @media print {
	/* .cti-analysis-coal, */
	.grid-2-coal,
	.no-break {
		page-break-inside: avoid
	}
	.break-before {
		page-break-before: always
	}
}

.fancy-numbered-list ol {
	counter-reset: my-awesome-counter;
	list-style: none;
	padding-left: 40px
}

.fancy-numbered-list ol li {
	margin: 2rem 0;
	counter-increment: my-awesome-counter;
	position: relative;
	background: white;
	padding: 1rem;
	font-weight: normal !important
}

.fancy-numbered-list ol li::before {
	content: counter(my-awesome-counter);
	font-size: 2rem;
	font-weight: bold;
	position: absolute;
	--size: 32px;
	left: calc(-1 * var(--size) - 10px);
	line-height: var(--size);
	width: var(--size);
	height: var(--size);
	top: 0;
	background: #E54B47;
	color: white;
	text-align: center
}


.simple-table {
	margin: auto;
	grid-area: Table
}

@media screen and (max-width: 750px) {
#section-power-market > div:nth-child(1) {
    flex-direction: column-reverse;
}

}

#country-performance p:nth-child(1) {
	text-transform: uppercase
}

#country-performance p {
	padding: unset;
	margin: unset;
	background-color: unset
}

#country-performance>div {
	margin-bottom: 2rem
}

#country-performance p+p {
	margin-top: 2rem
}

#country-performance li {
	list-style-type: upper-roman;
	font-weight: unset !important;
	list-style-position: outside
}

#country-performance ol {
	margin-left: 3rem;
	margin-bottom: 1.2rem
}


#country-performance-coal p:nth-child(1) {
	text-transform: uppercase
}

#country-performance-coal p {
	padding: unset;
	margin: unset;
	background-color: unset
}

#country-performance-coal>div {
	margin-bottom: 2rem
}

#country-performance-coal p+p {
	margin-top: 2rem
}

#country-performance-coal li {
	list-style-type: upper-roman;
	font-weight: unset !important;
	list-style-position: outside
}

#country-performance-coal ol {
	margin-left: 3rem;
	margin-bottom: 1.2rem
}

#disclaimer .section-label {
    background-color: var(--color-secondary-1);

}

#disclaimer .section-card {
    font-size: 0.65rem;
    line-height: 1.1rem;
    background-color: var(--color-secondary-1-lite);
}

#email-us {
    text-align: center;
    padding-bottom: 2rem;
}

#email-us a {
    text-decoration: none;
    color: #E54B47;
}

#email-us a:hover {
    text-decoration: underline;
}

#email-us strong > span {
    padding: 0.3rem;
    color: #E54B47;
    font-weight: bold;
}

.page-header {
    display: none;
    position: fixed;
    top: 0;
    width: 100%;
    float: left;
    padding: 1.5rem;
    z-index: 9999;
}

.page-header .cti-logo-print {
    width: 180px;
    margin-right: 1rem;
    float: left;
    transform: translate(0, 6px);
}

.page-header .titlebar {
    float: left;
    color: var(--color-primary-1);
}

.page-header .app-title-print {
    float: right;
    font-size: 1.5rem;
    position: relative;
    text-align: right;
    font-variant: small-caps;
    font-weight: bold;
    letter-spacing: 0.02ch;
    margin-bottom: 0;
}

/* Custom Table Style */

.container-around-fancy-table {
    background-color: var(--color-secondary-1-lite);
    overflow-x: scroll;
}

.fancy-table::-webkit-scrollbar {
    display: none;
}

.fancy-table {
    table-layout: auto;
    width: 100%;
    border-collapse: separate;
    border-spacing: 0.5rem;
    overflow-y: scroll;
}

@media screen and (max-width: 60em) {
    .fancy-table {
        border-spacing: 0;
    }
}

.fancy-table td,
.fancy-table th {
    overflow-wrap: break-word;
    text-overflow: ellipsis;
    padding: 0.8rem 0.3rem;
    word-wrap: break-word;
    border-bottom: 0;
    text-align: center;
}

.fancy-table td {
    background-color: var(--color-primary-2);
    height: 60px;
    text-align: left;
}

.fancy-table th {
    color: var(--color-primary-2);
    position: sticky;
    top: 0;
    height: 100px;
}

@media print {
    .fancy-table {
        border-spacing: 0.4rem;
    }

    .fancy-table td, .fancy-table th {
        padding: 0.266rem 0.1rem;
        height: initial;
    }
}

/* Custom Slider */

.slider-title {
    color: var(--color-secondary-1);
    text-align: center;
    font-weight: normal;
}

/* Media Queries
–––––––––––––––––––––––––––––––––––––––––––––––––– */

/* Spinner for Loading Times */

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes fadein {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

._dash-loading-callback {
    border: 16px solid #f3f3f3;
    border-radius: 50%;
    border-top: 16px solid var(--color-primary-1);
    width: 120px;
    height: 120px;
    margin-top: -60px;
    margin-bottom: -60px;
    display: inline-block;
    position: fixed;
    top: 50%;
    left: 50%;
    opacity: 0;
    background-color: transparent;
    -webkit-animation: fadein 1s linear forwards, spin 1.6s infinite linear; /* Safari and Chrome */
    animation: fadein 1s linear forwards, spin 1.6s infinite linear;
    animation-delay: 1s;
    -webkit-animation-delay: 1s;
}


@page {
    margin: 0 1cm;
}

@media print {
    a {
        text-decoration: none;
        color: red;
    }

    thead {
        display: table-header-group;
    }

    ._dash-undo-redo {
        display: none;
    }

    .dash-debug-menu__outer {
        display: none !important;
    }

    .dash-debug-menu {
        display: none !important;
    }

    .modebar-container {
        display: none !important;
    }

    .tabs-nav {
        display: none !important;
    }

    .floating-header {
        display: none;
    }

    .page-header {
        display: inline-block;
        border-bottom: 0.3rem solid var(--color-primary-1);
        padding: 0.2rem 2rem 0.8rem 2rem;
        margin-bottom: 6rem !important;
        margin-top: 0.7rem;
    }

    .titlebar {
        background-color: transparent;
        color: var(--old-app-green);
        padding-bottom: 0;
        padding: 0;
        font-size: 1.5rem;
    }

    .titlebar-web {
        display: none;
    }

    .section {
        padding-top: var(--section-padding-above);
        padding-bottom: 0rem;
        padding-left: 0;
        padding-right: 0;
        margin: 0;
        margin-bottom: 2.5rem;
        page-break-after: always;
    }

    .section.no-break-after {
        page-break-after: avoid;
        margin-bottom: 1rem !important;
    }

    .section.no-break-after ~ .section:not(.no-break-after) {
        padding-top: 0rem;
    }

    .section-card {
        padding: 1.6rem 2rem !important;
    }

    .no-print-padding {
        padding: 0;
    }

    /* Remove padding for first section */
    .section:nth-child(1) {
        padding-top: 0;
    }

    .cti-analysis, .grid-2, .no-break {
        page-break-inside: avoid;
    }

    #cti-logo {
        display: none;
    }

    .cti-logo-print {
        display: inline-block;
    }
}

/* Size replacement emojis according to text size */
img.emoji {
   height: 0.9em;
   width: auto;
   margin: 0 0.5em 0 0.5em;
   vertical-align: -0.1em;
}