﻿/*------------------MAIN TITLE------------------*/
.sggi_main-title {
    font: normal normal bold 22px/32px Overpass;
    letter-spacing: 0px;
    color: #444444;
    text-transform: uppercase;
    text-align: center;
    opacity: 1;
    margin-bottom: 16.5px;
    margin-top: 30px;
}

.sggi_solar-garden-generic-info hr {
    margin: auto;
}

.sggi_main-description {
    margin-top: 20.5px;
    margin-bottom: 32px;
    font: normal normal normal 16px/22px Inter;
}

@media only screen and (min-width: 768px) {
    .sggi_main-title {
        font: normal normal bold 26px/40px Overpass;
        margin-bottom: 13.5px;
        margin-top: 18.5px;
    }

    sggi_main-title-env {
        font: normal normal bold 26px/40px Overpass;
        margin-bottom: 13.5px;
    }

    .sggi_main-description {
        margin-top: 26.5px;
    }
}

/*------------------STATUS / AVAILABLE------------------*/
.sggi_status-available-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 14px 0px 14px 0px;
}

.sggi_status-available-wrapper > div {
    max-width: 372px;
    display: flex;
    align-content: stretch;
    width: 100%;
    align-items: stretch;
    background: #FFFFFF 0% 0% no-repeat padding-box;
    border: 1px solid #E2E2E2;
    opacity: 1;
    max-width: 372px;
    margin: 0px 0px 8.44px 0px;
}

.sggi_status-space-title {
    display: flex;
    align-items: center;
    flex: 1 1 0px;
    text-align: left;
    font: normal normal bold 16px/21px Inter;
    letter-spacing: 0px;
    color: #666666;
    text-transform: capitalize;
    opacity: 1;
    position: relative;
    padding: 15px 19px 15px 19px;
}

.sggi_positive {
    text-align: left;
    position: relative;
    display: flex;
    min-width: 150px;
    flex: 1 1 0px;
    align-items: center;
    justify-content: center;
    font: normal normal bold 24px/21px Overpass;
    letter-spacing: 0px;
    color: #3B7C06;
    background: #F3FCEC 0% 0% no-repeat padding-box;
    opacity: 1;
    padding: 20px 40px 20px 40px;
}

.sggi_negative {
    text-align: left;
    position: relative;
    display: flex;
    min-width: 150px;
    flex: 1 1 0px;
    align-items: center;
    justify-content: center;
    font: normal normal bold 24px/21px Overpass;
    letter-spacing: 0px;
    color: #E21010;
    background: #FFE2E2 0% 0% no-repeat padding-box;
    opacity: 1;
    padding: 20px 40px 20px 40px;
}

.sggi_positive::before, .sggi_positive::after {
    width: 21px;
    height: 51%;
    position: absolute;
    left: -2px;
    content: "";
    color: #3B7C06;
    z-index: 2;
}
.sggi_negative::before, .sggi_negative::after {
    width: 21px;
    height: 51%;
    position: absolute;
    left: -2px;
    content: "";
    z-index: 2;
}
.sggi_positive-title::before, .sggi_positive-title::after, .sggi_negative-title::before, .sggi_negative-title::after {
    width: 21px;
    height: 51%;
    position: absolute;
    left: 100%;
    content: "";
    z-index: 1;
}
.sggi_positive::before {
    top: 0px;
    background: linear-gradient(to right top, #FFFFFF 48%, transparent 50%);
    z-index: 1;
}
.sggi_positive::after {
    top: 50%;
    background: linear-gradient(to right bottom, #FFFFFF 48%, transparent 50%);
    z-index: 1;
}
.sggi_negative::before {
    top: 0px;
    background: linear-gradient(to right top, #FFFFFF 48%, transparent 50%);
    z-index: 1;
}
.sggi_negative::after {
    top: 50%;
    background: linear-gradient(to right bottom, #FFFFFF 48%, transparent 50%);
    z-index: 1;
}
.sggi_positive-title::before {
    top: 0px;
    background: linear-gradient(to right top, #84C344 48%, transparent 50%);
    z-index: 1;
}
.sggi_positive-title::after {
    top: 50%;
    background: linear-gradient(to right bottom, #84C344 48%, transparent 50%);
    z-index: 1;
}
.sggi_negative-title::before {
    top: 0px;
    background: linear-gradient(to right top, #E21010 48%, transparent 50%);
    z-index: 1;
}

.sggi_negative-title::after {
    top: 50%;
    background: linear-gradient(to right bottom, #E21010 48%, transparent 50%);
    z-index: 1;
}

@media only screen and (min-width: 768px) {
    .sggi_status-available-wrapper {
        margin: 14px 0px 14px 0px;
    }
    .sggi_status-available-wrapper > div {
        max-width: 372px;
        margin: 16px;
    }
    .sggi_status-wrapper {
        max-width: 372px;
        margin: 16px;
    }
    .sggi_space-wrapper {
        max-width: 372px;
        margin: 16px;
    }
    .sggi_status-space-title {
        font: normal normal bold 16px/21px Inter;
        padding: 0px 19px 0px 19px;
    }
}

/*------------------MILESTONE------------------*/
.sggi_milestone {
    background: #E6F5FA 0% 0% no-repeat padding-box;
    border: 1px solid #E2E2E2;
    opacity: 1;
    font: normal normal normal 19px/26px Overpass;
    letter-spacing: 0px;
    color: #444444;
    padding: 18px 14px 18px 14px;
    margin-bottom: 30px;
    text-align: center;
}

.sggi_kw-generated-since-inception {
    text-align: center;
    font: normal normal 900 19px/26px Overpass;
    letter-spacing: 0px;
    color: #444444;
}

@media only screen and (min-width: 768px) {
    .sggi_milestone {
        font: normal normal normal 22px/34px Overpass;
        padding: 20px 90px 20px 90px;
        margin-bottom: 23.5px;
    }

    .sggi_kw-generated-since-inception {
        font: normal normal 900 22px/34px Overpass;
    }
}

/*------------------CHART NAV------------------*/
.sggi_chart-header-wrapper {
    border-bottom: 1px solid #C3C3C3;
    opacity: 1;
}

.sggi_solar-garden-generic-info .nav-tabs .nav-item .nav-link {
    text-align: center;
    font: normal normal normal 14px/17px Inter;
    letter-spacing: 0px;
    color: #666666;
    opacity: 1;
    padding: 14px 30px 14px 30px;
    transition-duration: 0.5s;
    outline: none;
    border-top-style: none !important;
    border-left-style: none !important;
    border-right-style: none !important;
    border-bottom: 4px solid rgba(255, 255, 255, 0);
}

.sggi_solar-garden-generic-info .nav-tabs .nav-item .nav-link:hover {
    border-bottom: 4px solid #ffffff;
}

.sggi_solar-garden-generic-info .nav-tabs .nav-item .nav-link.active {
    text-align: center;
    font: normal normal bold 14px/17px Inter;
    letter-spacing: 0px;
    color: #005FAA;
    background: #E6F5FA 0% 0% no-repeat padding-box;
    border-top-style: none !important;
    border-left-style: none !important;
    border-right-style: none !important;
    opacity: 1;
    border-top: 0px;
    border-right: 0px;
    border-left: 0px;
    border-bottom: 4px solid #005FAA;
    opacity: 1;
    z-index: -1;
    transition-duration: 0.25s;
}

@media only screen and (min-width: 768px) {
    .sggi_chart-header-wrapper {
    }

    .sggi_solar-garden-generic-info .nav-tabs .nav-item .nav-link {
        font: normal normal normal 18px/22px Inter;
        padding: 15px 19px 15px 19px;
    }

    .sggi_solar-garden-generic-info .nav-tabs .nav-item .nav-link.active {
        font: normal normal bold 18px/22px Inter;
    }
}

/*------------------CHART TITLE------------------*/
.sggi_chart-label-title {
    text-align: center;
    font: normal normal bold 14px/16px Inter;
    letter-spacing: 0px;
    color: #444444;
    text-transform: capitalize;
    opacity: 1;
    width: 100%;
    margin: auto;
    margin-top: 24.5px;
    transition-duration: 0.5s;
}

@media only screen and (min-width: 768px) {
    .sggi_chart-label-title {
        font: normal normal bold 19px/22px Inter;
        margin-top: 27px;
    }
}

/*------------------CHART------------------*/
.sggi_solar-garden-generic-info .c3-axis .tick line {
    display: none;
}

.c3 .c3-grid line {
    stroke-dasharray: 0;
}

.c3 .domain {
    display: none;
}

.c3-axis-y text {
    text-align: right;
    font: normal normal normal 12px/15px Inter;
    letter-spacing: 0px;
    color: #666666;
    opacity: 1;
}

.c3-axis-x text {
    text-align: right;
    font: normal normal normal 12px/15px Inter;
    letter-spacing: 0px;
    color: #666666;
    opacity: 1;
}
.sggi_solar-garden-generic-info .chart-parent {
    min-width: 300px;
    overflow-x: auto;
    margin: auto;
}
.sggi_solar-garden-generic-info .chart-parent > div {
    padding-top: 7px;
}

.c3-axis.c3-axis-y {
    background-color: #FFFFFF;
    z-index: 10;
}

.chart-parent {
    position: relative;
    transition-duration: 0.2s;
    overflow-y: hidden;
}
.chart-y-bg {
    fill: green;
}
#chart-year {
    margin: auto;
}
.c3-chart {
    width: 700px;
    overflow-x: auto
}
.c3-chart-bar, .c3-shapes {
    min-width: 700px;
}

.sggi_chart-y-axis-title {
    text-align: left;
    font: normal normal bold 16px/22px Inter;
    letter-spacing: 0px;
    color: #444444;
    opacity: 1;
}

.sggi_solar-garden-generic-info .sggi_button-wrapper {
    flex-wrap: nowrap;
}

.sggi_icon{
    max-width: 60px;
    min-width: 50px;
}

.sggi_icon > svg{
    width: 100%;
}

/*------------------HOW DO I USE THIS TABLE------------------*/
.sggi_how-to-use-titleWrapper{
    display: flex;
    align-items: center;
}

.sggi_how-to-use-icon{
    margin-right: 7px;
    margin-bottom: 8px;
}

.sggi_how-to-use-Wrapper {
    margin-bottom: 30px;
    padding: 15px;
    background: #FAFAFA 0% 0% no-repeat padding-box;
    border: 1px solid #E2E2E2;
    opacity: 1;
    margin-top: 36px;
}

.sggi_how-to-use-title {
    text-align: left;
    font: normal normal bold 19px/26px Overpass;
    letter-spacing: 0px;
    color: #555555;
}
.sggi_how-to-use-description {
    font: normal normal normal 14px/22px Inter;
    margin-top: 17px;
}

@media only screen and (min-width: 768px) {
    .sggi_how-to-use-Wrapper {
        margin-bottom: 41px;
        padding: 22px;
        margin-top: 10.5px;
    }

    .sggi_how-to-use-title {
        font: normal normal bold 19px/26px Overpass;
    }

    .sggi_how-to-use-description {
    }
}

/*------------------SOLAR STATS------------------*/
.sggi_solar-garden-generic-info .a {
    fill: #58a618;
    stroke: #58a618;
}

.sggi_desc {
    text-align: left;
    font: normal normal normal 17px/23px Overpass;
    letter-spacing: 0px;
    color: #444444;
    padding-left: 18px;
}

.sggi_irl-stats {
    display: flex;
    flex: 1 1 0px;
    flex-wrap: nowrap;
    justify-content: start;
    align-items: center;
    border: 1px solid #e5e5e5;
    margin: 8px 8px 8px 8px;
    padding: 12px;
    min-width: 250px;
    max-width: 390px;
}

.sggi_irl-stats-list {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: center;
    margin-top: 45px;
    margin-bottom: 36px;
}

@media only screen and (min-width: 768px) {
    .sggi_irl-stats {
        margin: 8px 8px 8px 8px;
        padding: 14px;
        min-width: 250px;
        max-width: 400px;
    }

    .sggi_irl-stats-list {
        margin-top: 45px;
        margin-bottom: 36px;
        flex-wrap: nowrap;
        margin-bottom: 36px;
    }
}

.sggi_solar-garden-generic-info .sggi_container {
    max-width: 904px;
    margin: auto;
}

.c3-axis-y-label{
    margin-bottom: 3px;
}

.c3-tooltip{
    min-width: 120px;
}

.noselect {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Old versions of Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}