@media only screen and (max-width: 864px) {
    .strat-pane {
        width: 100%;
    }

    .graph-wrapper-vertical {
        display: none;
    }

    .graph-wrapper-horizontal {
        margin-top: 1%;
        width: 100%;
    }

    .graph-axis-x {
        height: 30vh;
        min-height: 300px;
    }
}

@media only screen and (min-width: 865px) {
    .strat-pane {
        width: 75%;
        padding-right: 1%;
    }

    .graph-wrapper-vertical {
        width: 24%;
    }

    .graph-wrapper-horizontal {
        display: none;
    }
}

.graph-axis-y {
    height: 80vh;
}

html {
    background-color: #778899; /*dark-white*/
}

body {
    min-width: 590px;
    margin: 0 1.5%;
    padding: 1%;
    background-color: #ffffff;
    border-left: 1px solid black;
    border-right: 1px solid black;
}

.header, .main, .footer {
    text-align: center;
}

h1 {
    font-weight: bold;
}

.footer {
    font-size: 0.75em;
}

.main {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.strat-pane {
    min-width: 590px;
}

#graph-content {
    padding-left: 1vw;
}

.grid {
    border: 1px solid black;
    width: 100%;
    border-collapse: collapse;
    font-family: Courier-New;
    cursor: default;
}

    .grid thead {
        font-weight: bold;
        font-size: 1.25em;
        background-color: #aaaaaa;
    }

    .grid .header {
        font-weight: bold;
        font-size: 0.80em;
        background-color: #aaaaaa;
    }

    .grid tr td {
        border: 1px solid black;
        padding: 2px;
        font-size: 0.75em;
    }

    .grid .hand-type,
    .grid .hand-value {
        width: 1%;
    }

    .grid .hand-type {
        padding-left: 0.75vw;
    }

    .grid .hand-value {
        padding-right: 0.75vw;
    }

    .grid .hand-value {
        text-align: right;
    }

    .grid .hand-action {
        width: 9.8%;
        min-width: 40px;
    }

    .grid .grid-cell {
        width: 4.25%;
        min-width: 20px;
    }

.deviation {
    font-weight: bold;
}

.graph-title {
    text-align: center;
    font-weight: bold;
    font-size: 1.25em;
    margin: 0;
}

.bold {
    font-weight: bold;
}

.no-border-left {
    border-left: none !important;
}

.no-border-right {
    border-right: none !important;
}

.ha-double-stand {
    /*dark-blue*/
    background-color: #6495ed;
}

.ha-double-hit {
    /*light-green*/
    background-color: #c0d9af;
}

.ha-hit {
    /*light-white*/
    background-color: #f0f0f0;
}

.ha-stand {
    /*gold-ish*/
    background-color: #daa520;
}

.ha-split {
    /*dark-green*/
    background-color: #2e8b57;
}

.ha-double {
    /*light-blue*/
    background-color: #87cefa;
}

.ha-surrender {
    /*dark-red*/
    background-color: #cd5c5c;
}