.frontpage {
    border: 1px solid #323232;
    margin-top: 25px;
    width: 100%;
    padding: 10px;
}


#intro-wr-icon, #intro-disc-icon {
    width: 50px;
    height: 50px;
}
#intro-news-icon, #intro-sent-icon, #intro-grade-icon, #intro-score-icon {
    width: 35px;
    height: 35px;
}
.introhdr {
    font-family: "Arial Black", "Arial Bold", Gadget, sans-serif;
    font-size: 1.25rem;
}
.topintrohdr {
    font-family: "Arial Black", "Arial Bold", Gadget, sans-serif;
}
.pwrdrift {
    width: 100%;
    height: 100%;
}
.driftgrid {
    stroke: #323232;
    fill: none;
    stroke-width: 1;
    stroke-opacity: .15;
}

#errintrobox {
    width: 150px;
    float: right;
    border: 1px solid rgba(50, 50, 50, 0.25);
}
.revtrendhdr {
    font-weight: bold;
}
#errarrow, #grarrow {

    text-align: center;
}
#errarrow svg, #grarrow svg {
    width: 28px;
    height: 28px;
    margin: auto;
}
#errdesc, #grdesc {
    text-align: left;
    font-weight: bold;
}
.priceline {
    stroke-width: 2;
    stroke: #323232;
}

.pwr-sumbkg {
    fill: #323232;
    stroke: #414141;
    stroke-width: 1;
}
.pwrlogo.pospwr {
    fill: #79cc79;
    color: #79cc79;
}

.pwrlogo.negpwr {
    fill: #cd5959;
    color: #cd5959;
}

#smallheat {
    width: 100%;
    height: 400px;
    background: #323232;
    margin-top: -10px;
    margin: auto;
    font-size: 12px;
}
.smallheatdesc {
    font-size:12px;
}
.sentmap {
    margin: 0 25px 25px 25px;
}
.sentrect {
    stroke:none;
    stroke-width: 0;
    stroke-opacity: .05;
}
.senttext {
    fill: #f7f7f7;
    font-family: "Arial Black", "Arial Bold", Gadget, sans-serif;
    font-style: normal;
    font-variant: normal;
    font-weight: 700;
    fill-opacity: 0.75;
}
.senttitle, .sentitems {
    font-size: .75em;
    margin-left: 25px;
}

.ewtickers {
    padding-top: 5px;
    height: 70px;
    width: 100%;
    margin: auto;
    overflow: hidden;
}

.ewticker {
    width: 120px;
    height: 60px;
    background-blend-mode: multiply;
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 80px 80px;
    padding: 5px;
    border-radius: 5px;
    color: #f7f7f7;
    -moz-transition: all .4s linear;
    -webkit-transition: all .4s linear;
    -o-transition: all .4s linear;
    transition: all .4s linear;
 
}
    .ewticker .ewtickerinfo {
        opacity: 0;
        font-size: 8px;
        font-family: Arial, Helvetica, sans-serif;
        margin-top: 3px;
        text-rendering: optimizeLegibility;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
    .ewticker .ewtickerdata {
        opacity: 0;
        font-size: 10px;
        font-family: "Arial Black", "Arial Bold", Gadget, sans-serif;
        margin-top: -5px;
        text-rendering:optimizeLegibility;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }


.ewticker:hover {
    cursor: pointer;
    background-color: #323232;
}

    .ewticker:hover .ewtickerinfo {
        opacity: 1;
    }
    .ewticker:hover .ewtickerdata {
        opacity: 1;
    }


#WRIcon, #EPSNewsIcon, #EWSent {
    margin: -10px 15px 0 0;
    width: 30px;
    height: 30px;
}

#EWSent {
    fill: #f7f7f7;
}
#EPSNewsIcon {
    fill: #323232;
    stroke: #323232;
}

#intro-top .sumtitle, #intro-recent .sumtitle, #intro-upcoming .sumtitle {
    margin-top: 15px;
}
.sumchart {

    margin: 20px auto 20px;
    width: 90%;

}

.sumtitle {
    text-align: left;
    font-weight: bold;
    font-size: 18px;
    margin-left: 5%;
}
.sumdate {
    text-align: left;
    font-size: 10px;
    margin-left: 5%;
}
.sumcontent {
    text-align: left;
    margin: 15px;
    font-family: Arial, sans-serif;
}
.sumitems { 
    text-align: left;
    margin: 10px 0 0 25px;
}


.sumlink {
    position: relative;
    width: 48px;
    height: 32px;
    text-decoration:none;
    text-align: center;
    margin-left: 5px;
    display: inline-block;
}
.sumlogo {
    display: inline;
    border-radius: 50%;
    border: solid 1px #323232;
    width: 32px;
    height: 32px;
}
.sumticker {
    display: none;
    text-decoration: none;
    text-align:center;

    width: 32px;
    height: 32px;
    overflow:hidden;
    font-family: "Arial Black", "Arial Bold", Gadget, sans-serif;
    font-style: normal;
    font-variant: normal;
    font-weight: 700;
    font-size: 18px;
}
.ewbg-dark .sumticker {
    color: #ddb785;
}
.ewbg-light .sumticker {
    color: #323232;
}

.sumlink:hover .sumlogo {
    display: none;
}
.sumlink:hover .sumticker {
    display:inline;
}

.ewintrochart {
    width: 70%;
    height: 70%;
    float: right;
    padding-right: 10px;
    padding-left: 15px;
}

.ewlightchart {
    width: 60%;
    float: right;

}

.drkchart {
    width: 70%;
    height: 70%;
    float: right;
    padding-right: 10px;
    padding-left: 15px;
}
    .drkchart .smallchartbg {
        fill: #323232;
        fill-opacity: 0.9;
    }

    .drkchart .axis path, .drkchart .axis line {
        stroke: #f7f7f7;
    }

.drkchart path.candle {
    stroke: #f7f7f7;
    shape-rendering: crispEdges;
    stroke-width: 1;
    stroke-opacity: 1;
}
    .drkchart path.candle.up {
        fill: #bfddb1;
        stroke: #f7f7f7;
    }

    .drkchart path.candle.down {
        fill: #e57e76;
        stroke: #f7f7f7;
    }

    .drkchart .axis text {
        color: #f7f7f7;
    }

    .drkchart .chartlogo {
        fill: #f7f7f7;
    }

    .drkchart .chartcoticker {
        fill: #f7f7f7;
    }

    .drkchart .chartconame {
        fill: #f7f7f7;
    }


    .drkchart .chartcopy {
        fill: #f7f7f7;
    }


.gradebar {
    stroke-width: 2;
    fill-opacity: .8;
}
.gs-bkg {
    stroke-width: 0;
}

.gs-sumbkg {
    stroke-width: 1;
}
#gr-dw {
    width: 150px;
    height: 150px;
    float: right;
    margin: 20px;
    animation: spin 20s linear infinite;
}

.spyline {
    stroke: #ddb785;
    stroke-width: 2;
}

.legenditem {
    font: bold 12px sans-serif;
}

.apluslgnd {
    fill: #323232;
}

.spylgnd {
    fill: #ddb785;
}

.grid {
    fill: none;
    stroke: #323232;
    opacity: .25;
    stroke-width: 1;
}

.gradebtn {
    margin-top: 20px;
    margin-bottom: 20px;
}

#gradesum {
    margin-top: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.gr-text, .chartcopy {
    font-size: 12px;
}

.gr-spy {
    stroke: #323232;
}

.gr-sumtext, .gr-htext, .gr-h2text, .titlesvg, .pwr-sumtext {
    font-family: "Arial Black", "Arial Bold", Gadget, sans-serif;
    text-rendering: optimizeLegibility;
}

.gr-h3text, .gr-h4text, .titledatesvg, .chartcopy, .gr-text, .boxhdr {
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    text-rendering: optimizeLegibility;
}

.gr-h3text, .titledatesvg, .boxhdr {
    font-size: 14px;
}

.gr-h4text {
    font-size: 12px;
}

.gr-sumtext {
    font-size: 18px;
}

.gr-htext, .titlesvg, .pwr-sumtext {
    font-size: 26px;
}

.gr-h2text {
    font-size: 20px;
}

.boxhdr {
    fill: #f7f7f7;
}

.boxdata {
    font-size: 18px;
    font-family: "Arial Black", "Arial Bold", Gadget, sans-serif;
}

/*#intro-left {
    width: 100%;
    float: none;
    margin-right: 0;
}*/

#intro-left {
    float: none !important;
    width: 100% !important;
    margin-right: 0;
}


@media (prefers-color-scheme: dark) {
    .senttext {
        fill: #414141;
    }

    .frontpage {
        background-color: #323232;
        color: #f7f7f7;
        border: 1px solid rgba(221, 183, 133, 0.20);
    }
    .introcard {
        background-color: #414141;
        color: #ddb785;
    }
 /*   .introcard:hover {
        background-color: #323232;
    }*/
    .intro-card-body:hover {
        background-color:#323232;
    }
        .intro-card-body:hover .gs-bkg {
            fill: #323232;
        }

    .intro-icon {
        fill: #ddb785;
    }

    .gs-bkg {
        fill: #414141;
    }

    .titlesvg, .titledatesvg {
        fill: #323232;
    }

    .gr-text, .chart-title, .gr-h3text, .gr-h4text {
        fill: #ddb785;
    }

    .gr-spytext, .gr-sumtext {
        fill: #f7f7f7;
    }

    .gr-spy, .axis, .tick line, .domain, .aplusline {
        stroke: #f7f7f7;
    }

    .title-background, .gs-sumbkg {
        fill: #323232;
        stroke: #ddb785;
        stroke-width: 1;
        stroke-opacity: .25;
    }

    .aplusbox {
        fill: #323232;
        fill-opacity: 0.75;
        stroke: #ddb785;
        stroke-width: 1;
        stroke-opacity: .5;
    }

}
@media (prefers-color-scheme: light) {
    .frontpage {
        background-color: #f7f7f7;
        color: #000;
    }
    .introcard {
        background-color: #fff;
        color:#000;
    }
    .intro-card-body:hover .gs-bkg {
        fill: #f7f7f7;
    }

    .gs-bkg {
        fill: #fff;
        stroke: #323232;
    }
    .gs-sumbkg {
        fill: #323232;
        fill-opacity: .75;
        stroke: #323232;
    }

    .gr-sumtext, .gr-h3text, .gr-h4text {
        fill: #f7f7f7;
    }

    .titlesvg, .titledatesvg {
        fill: #323232;
    }

}


@media (min-width: 576px) {
    .frontpage {
        width: 95%;
    }
 

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


    #intro-left {
        float: left !important;
        width: 50% !important;
        margin-right: 1em;
    }

}

@media (min-width: 992px) {

    .frontpage {
        width: 90%;
    }

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

    .frontpage {
        width: 85%;
    }

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

    .ewbox {
        height: 800px;
    }

}

@media (min-width: 1600px) {

    .ewbox {
        height: 750px;
    }
}

@media (min-width: 1800px) {

    .ewbox {
        height: 650px;
    }
}

@media (min-width: 2100px) {
    .introtext {
        font-size: 1.25em;
    }

    .pwrdrift {
        width: 75%;

    }

}