@media ( min-width: 1200px) {}

@media ( min-width: 992px) {}

@media ( min-width: 769px) {}

@media ( max-width: 768px) {}

/* inter-200 - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Inter';
    font-style: normal;
    font-weight: 200;
    src: url('../fonts/inter-v13-latin-200.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  /* inter-300 - latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Inter';
    font-style: normal;
    font-weight: 300;
    src: url('../fonts/inter-v13-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  /* inter-regular - latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/inter-v13-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  /* inter-700 - latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    src: url('../fonts/inter-v13-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }

body {
    --color1: #111;
    --color2: #666;
}

h1 {
    color: var(--color1);
    font-weight: 200;
}

.container {
    width: 95%;
    max-width: 1200px;
}

@media only screen and (min-width: 993px) {
    .container {
        width: 95%;
        max-width: 1200px;
    }
}

a:focus {
    outline: none !important;
}

* {
    border: 0px;
    margin: 0px;
    padding: 0px;
    text-decoration: none;
    outline: none;
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0.4);
    box-sizing: border-box;
}

ul, ol{
    padding-left: 0;
}

*::selection {
    background: #ccc;
    color: #fff;
}

html{
    min-height: calc(100% + env(safe-area-inset-top));
    padding-top: env(safe-area-inset-top);
}

html,
body {
    height: 100%;
}

body {
    background: #f6f6f6;
    color: var(--color1);
    font-family: 'Inter', Arial, Verdana, sans-serif;
    font-size: 16px;
    -webkit-text-size-adjust: none;
    font-weight: 300;
}

div {
    position: relative;
}

img,
iframe,
video {
    vertical-align: bottom;
}

img {
    max-width: 100%;
    height: auto;
}

a{text-decoration: none;} 

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0 0 10px 0;
    -webkit-hyphens: manual;
    hyphens: manual;
    word-wrap: break-word;
}

h1 {
    font-size: 40px;
    color:#c0392b;
    white-space: nowrap; 
    overflow:hidden;
    font-weight:200 !important;
}

@media ( max-width: 768px) {
    h1 { font-size: 30px; }
}

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a,
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover{
    color:var(--color1);
}

p {
    margin: 0 0 10px 0;
    line-height: 1.45em;
    letter-spacing: 0.02em;
    -webkit-hyphens: auto;
    hyphens: auto;
}

p a {
    color: #666;
}

p a:hover {
    color: #888;
}

strong, b{
    font-weight: 700;
}

.row {
    margin-bottom: 0;
}

.box{
    border-radius: 10px;
    border:1px solid rgba(0,0,0,0.04);
    padding:30px;
    box-shadow: 1px 1px 3px rgba(0,0,0,0.1);
}

.chart{
    height: 40vh;
    padding: 20px;
}

.chartbox{
    overflow: hidden;
}

#powertoday{
    height: 70vh;
}

@media ( max-width: 768px) {  
    .box{
        padding:20px;
    }

    .chartbox{
        padding-right: 0;
    }

    .chart{
        height: 30vh;
        padding: 0px;
    }

    #powertoday{
        height: 40vh;
    }
    
}

.text-muted{
    color: #aaa !important;
    opacity: 1 !important;
}

p.small{
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.calendar{
    position: absolute;
    right: calc(var(--bs-gutter-x) * .5);;
    top: 3rem;
    font-size: 28px;
    opacity: .1;
    transition: .4s;
}

.calendar:hover{
    opacity: .6;
}

.bi.bi-sun{
 color: #c0392b;;
}

.bi.bi-plug{
    color: #576574;;
}