/*--------------------------------------------------------------
This is your custom stylesheet.

Add your own styles here to make theme updates easier.
To override any styles from other stylesheets, simply copy them into here and edit away.

Make sure to respect the media queries! Otherwise you may
accidentally add desktop styles to the mobile layout.
https://www.w3schools.com/css/css_rwd_mediaqueries.asp
--------------------------------------------------------------*/
div#commentary_header {
    width: auto;
    height: 33px;
    line-height: 33px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    padding-left: 10px;
    justify-content: space-evenly;
    text-align: center;
    background-color: #a9a9a9
}

div#order_header {
    width: auto;
    height: 33px;
    line-height: 33px;
    flex-direction: column;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    padding-left: 10px;
    justify-content: space-evenly;
    text-align: center;
    color: #fff
}

div#order_body,div#alert_body_wrapper {
    width: 100%;
    display: inline-block;
    border-bottom: 1px solid #eee;
    border-left: 1px solid #eee;
    border-right: 1px solid #eee;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    background: #efefef;
    padding: 10px;
    margin-bottom: 20px;
    border-radius: 0 0 5px 5px
}

div#order_body table {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border: none;
    border-radius: 0
}

div#order_body table tr:nth-child(even) {
    background-color: #e3e4e9
}

div#order_body table th,div#order_body table td {
    padding-top: 0;
    padding-bottom: 0;
    border-bottom: none
}

div#order_body table tr:last-child td:first-child {
    border-bottom-left-radius: 0!important
}

div#order_body table tr:last-child td:last-child {
    border-bottom-right-radius: 0
}

div#alert_image_div {
    display: inline-block;
    height: 100px;
    width: 100px;
    background: url(https://members.spydertrading.com/images/SPY-ALERTS.jpg) no-repeat center center;
    background-size: contain;
    margin: 5px
}

div#alert_image_div.seasoned {
    background: url(https://alerts.timothysykes.com/wp-content/uploads/2022/12/seasoned-trader-alerts-thumb.png) no-repeat center center;
    background-size: cover
}

div#commentary_image_div.seasoned {
    background: url(https://static.toiimg.com/photo/64699039.cms?width=500&resizemode=4&imgsize=186354) no-repeat center center;
    background-size: cover
}

div#alert_body {
    display: inline-block;
    line-height: 1.5em;
    height: auto;
    vertical-align: top;
    max-width: 75%;
    max-height: 80%;
    overflow: ellipsis
}

div#alert_details {
    vertical-align: top;
    float: right;
    padding-right: 0;
    text-align: center
}

a#read_more_anchor {
    background-color: #3ca9f5;
    color: #fff;
    text-align: center;
    text-decoration: none;
    border-radius: 5px;
    padding: 1em 1.5em;
    display: block
}

div#read_more_button {
    font-weight: 700
}

div#commentary_header {
    width: auto;
    height: 33px;
    line-height: 33px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    padding-left: 10px;
    justify-content: space-evenly;
    text-align: center;
    background-color: #a9a9a9
}

div#commentary_image_div {
    display: inline-block;
    height: 100px;
    width: 100px;
    background: url(https://members.spydertrading.com/images/SPY-COMMENTARY.jpg) no-repeat center center;
    background-size: contain;
    margin: 5px
}

@media(max-width: 800px) {
    div#alert_image_div,div#commentary_image_div {
        display:none
    }

    div#alert_details {
        clear: both;
        width: 100%
    }

    div#alert_body {
        max-width: 100%
    }
}