﻿.MarketTimeText {
    /*display: table;*/
    border-collapse: collapse;
    /*table-layout: auto;*/
    table-layout: fixed;
    font-size: 9pt;
    color: white;
    text-align: right;
    width: 100%;
    font: bold;
    font-family: "Courier New";
    font-size: medium;
}

.MarketTime {
    /*display: table;*/
    border-style: groove;
    border-collapse: collapse;
    background-color: #F2EFE4;
    /*table-layout: auto;*/
    table-layout: fixed;
    font-size: 9pt;
    color: #4c3327;
    text-align: center;
    width: 100%;
    font-weight: bolder;
    font-family: "Courier New";
    font-size: medium;
    white-space: nowrap;
}

.MarketStatusText {
    /*display: table;*/
    border-collapse: collapse;
    /*table-layout: auto;*/
    table-layout: fixed;
    font-size: 9pt;
    color: white;
    text-align: right;
    width: 100%;
    font: bold;
    font-family: "Courier New";
    font-size: medium;
    border-right-color: green;
    white-space: nowrap;
}

.MarketStatus {
    /*display: table;*/
    border-style: groove;
    border-collapse: collapse;
    background-color: #F2EFE4;
    /*table-layout: auto;*/
    table-layout: fixed;
    font-size: 9pt;
    color: green;
    text-align: right;
    width: 100%;
    font-weight: bolder;
    font-family: "Courier New";
    font-size: medium;
    white-space: nowrap;
}

.CreditsText {
    /*display: table;*/
    border-collapse: collapse;
    /*table-layout: auto;*/
    table-layout: fixed;
    font-size: 9pt;
    color: white;
    text-align: right;
    width: 100%;
    font: bold;
    font-family: "Courier New";
    font-size: medium;
    border-right-color: green;
    white-space: nowrap;
}

.CreditsCell {
    /*display: table;*/
    border-style: groove;
    border-collapse: collapse;
    background-color: #F2EFE4;
    /*table-layout: auto;*/
    table-layout: fixed;
    font-size: 9pt;
    color: red;
    text-align: right;
    width: 100%;
    font: bolder;
    font-family: "Courier New";
    font-size: medium;
    white-space: nowrap;
}

.CreditsNegative {
    /*display: table;*/
    /*border-style: groove;*/
    border-collapse: collapse;
    /*table-layout: auto;*/
    table-layout: fixed;
    font-size: 9pt;
    color: red;
    text-align: right;
    width: 100%;
    font-weight: bold;
    font-family: "Courier New";
    font-size: medium;
    white-space: nowrap;
}

.CreditsPositive {
    /*display: table;*/
    /*border-style: groove;*/
    border-collapse: collapse;
    /*table-layout: auto;*/
    table-layout: fixed;
    font-size: 9pt;
    color: green;
    text-align: right;
    width: 100%;
    font-weight: bold;
    font-family: "Courier New";
    font-size: medium;
    white-space: nowrap;
}

.NiftyText {
    /*display: table;*/
    border-collapse: collapse;
    /*table-layout: auto;*/
    table-layout: fixed;
    font-size: 9pt;
    color: white;
    text-align: right;
    width: 100%;
    font: bold;
    font-family: "Courier New";
    font-size: medium;
    border-right-color: green;
    white-space: nowrap;
}

.NiftyCell {
    /*text-align: right;*/
    border-style: groove;
    background-color: #F2EFE4;
    /*table-layout: auto;*/
    /*table-layout: fixed;*/
    font-size: 9pt;
    /*border-right: ridge;*/
    /*background: #F2EFE4;*/
    white-space: nowrap;
}

.NiftyUp {
    /*table-layout: auto;*/
    /*border-style: groove;*/
    table-layout: fixed;
    font-size: 9pt;
    font-weight: bold;
    color: green;
    /*background: #F2EFE4;*/
    /*background-color: #F2EFE4;*/
    font-family: Verdana;
    white-space: nowrap;
}

.NiftyDown {
    /*table-layout: auto;*/
    /*border-style: groove;*/
    table-layout: fixed;
    font-size: 9pt;
    font-weight: bold;
    color: red;
    /*background: #F2EFE4;*/
    /*background-color: #F2EFE4;*/
    font-family: Verdana;
    /*font-style: italic;*/
    white-space: nowrap;
}

.MembershipText {
    /*display: table;*/
    border-collapse: collapse;
    table-layout: auto;
    /*table-layout: fixed;*/
    font-size: 10pt;
    /*color: white;*/
    text-align: left;
    width: 100%;
    font: bold;
    /*font-family: "Courier New";*/
    /*font-size: medium;*/
    color: #4c3327;
    font-family: Verdana;
    font-weight: bolder;
}

.MasterMarqueTable {
    width: 100%;
    height: 10px;
    background-color: #BD3632;
    /*border-top:ridge;
    border-left:ridge;
    border-right:ridge;*/
}

.Welcome {
    font-size: 10pt;
    font-weight: bolder;
    color: #27404c;
    background: #F2EFE4;
    font-family: Verdana;
    font-style: italic;
}

.WelcomeCell {
    border-right: ridge;
    background: #F2EFE4;
}

.btnImageJoinTelegram {
    /*height: 40px;
    width: 120px;*/
    border: groove;
    width: 80%;
}

.MasterTableHeader {
    width: 100%;
    height: 110px;
    background-color: #4c3327;
    /*background-color: #F2EFE4;*/
    border-color: #4c3327;
}

.MasterTableHeaderLogo {
    width: 100%;
    height: auto;
    background-color: #4c3327;
    border-color: #4c3327;
}

.MasterTableHeaderRow1Cell1 {
    font-size: 45pt;
    width: 60%;
    /*font-family:'Comic Sans MS';*/
}

.MasterTableHeaderRow1Cell2 {
    width: 40%;
}

.MyTradeCaption {
    /*font-family: 'Poor Richard';*/
    text-align: left;
    /*font-family: 'Comic Sans MS';*/
    /*font-size: 40px;*/
    /*color: #F2EFE4;*/
    /*position: absolute;*/
    /*top: 50%;*/
    /*right: 50%;*/
    /*transform: translate(50%,-50%);*/
    /*text-transform: uppercase;*/
    font-family: 'Maiandra GD';
    /*font-size: 6em;*/
    /*font-weight: 700;*/
    font-size: 28px;
    color: #f5f5f5;
    /*color: #4c3327;*/
    /*text-shadow: #bbb 0 0 1px, #fff 0 -1px 2px, #fff 0 -1px 2px, rgba(0,0,0,0.8) 0 30px 25px;*/
}

.MyTradeSubCaption {
    text-decoration: overline;
    font-family: 'HoloLens MDL2 Assets';
    font-size: 14px;
    /*color: #F2EFE4;*/
    color: #4c3327;
}

.WelcomeName {
    font-size: 12pt;
    font-weight: bolder;
    color: #4c3327;
    font-family: Verdana;
    font-style: italic;
}

.MasterTableLeftContentHolder {
    width: 100%;
    height: 600px;
    background-color: #F2EFE4;
    box-shadow: 10px 10px 5px grey;
}

.style6 {
    width: 100%;
    height: 30px;
    background-color: #000000;
}

.style7 {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 9px;
    text-decoration: none;
    color: #FFFFFF;
}

.ver11 {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 9px;
}


.style10 {
    height: 600px;
    background-color: #F2EFE4;
    border: ridge;
}

.style11 {
    width: 100%;
    height: 20px;
    border-bottom: thick;
    border-bottom-color: aqua;
    border-color: red;
}

.style12 {
    width: 100%;
    height: 20px;
    background-color: #F2EFE4;
    border-top: thick;
}

.style13 {
    vertical-align: top;
    width: 80%;
    border: ridge;
}

.marqueeTitle {
    color: #16242a;
    font-family: 'Comic Sans MS';
    font-size: 18px;
    font-weight: normal;
    line-height: 10px;
    margin: 10px 0 20px;
    text-shadow: 2px 2px 0 #000, margin: 10px 0 24px;
    text-align: left;
    text-shadow: rgba(255,255,255,.1) -1px -1px 1px,rgba(0,0,0,.5) 1px 1px 1px;
    text-decoration: underline;
}

.marqueeBody {
    font-size: 12pt;
    font-family: 'Comic Sans MS';
    color: #4c3327;
    text-align: left;
    font-style: italic;
}

/* ==========================================================
   RESPONSIVE / MOBILE OVERRIDES
   ========================================================== */

img {
    max-width: 100%;
    height: auto;
}

@media screen and (max-width: 768px) {
    /* Stack header cells instead of side-by-side */
    .MasterTableHeader {
        display: block;
        width: 100% !important;
        height: auto !important;
        text-align: center;
    }

        .MasterTableHeader tr,
        .MasterTableHeader td {
            display: block;
            width: 100% !important;
            text-align: center;
        }

    .MasterTableHeaderLogo {
        height: auto;
        padding: 10px 0;
    }

    /* Shrink the actual logo <img> (shares the same CSS class as its cell) */
    img.MasterTableHeaderLogo {
        max-width: 160px;
        width: 160px;
        height: auto;
        display: block;
        margin: 0 auto;
    }

    .MasterTableHeaderRow1Cell1,
    .MasterTableHeaderRow1Cell2 {
        width: 100% !important;
    }

    .MyTradeCaption {
        font-size: 22px; /* was 45pt via inline cell style */
        text-align: center;
    }

    .MyTradeSubCaption {
        font-size: 12px;
        text-align: center;
    }

    /* Market stats table: let cells sit inline instead of full rows */
    .MarketTimeText, .MarketTime,
    .MarketStatusText, .MarketStatus,
    .CreditsText, .CreditsCell,
    .NiftyText, .NiftyCell {
        display: inline-block;
        width: auto !important;
        font-size: 11px;
    }

    /* Stack the marquee / membership / welcome row (was 55%/25%/20% columns) */
    .MasterMarqueTable {
        display: block;
        width: 100% !important;
        height: auto !important;
    }

        .MasterMarqueTable tr,
        .MasterMarqueTable td {
            display: block;
            width: 100% !important;
            text-align: center;
            white-space: normal;
        }

    /* Let the horizontal menu scroll instead of breaking layout */
    .table-active {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }

        .table-active table {
            display: inline-table;
        }

    /* Let wide GridViews scroll horizontally instead of overflowing */
    .grid, .gridFuture, .gridOptions {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }

    /* Prevent main content area from being clipped at a fixed height */
    .style10 {
        height: auto !important;
    }
}

@media screen and (max-width: 480px) {
    .MyTradeCaption {
        font-size: 18px;
    }
}
