body {
    background-color: #000000;
    color: #444;
    margin: 0 50px;
    min-width:1000px;
    font-family:"sans-serif";
}

.nav {
    margin-top: 30px;
}

#logo { float:left; max-height:100px; margin-top:10px; margin-left:10px; }

#mainMenu { display:inline; float:right; padding:35px 15px 0 0; }

#mainMenu li
{
    margin:5px;
    display:inline;
    background-color:darkgrey;
    overflow:hidden;
}

#mainMenu li a { color:beige; text-decoration:none; width:100px; padding:10px; background-color:darkgrey;}
#mainMenu li a:hover { color:white; background-color:#337;}

#mainMenu li:hover
{
    background-color:#337;
}


ul.messages
{
    margin: 15px auto;
}

div.container
{
    width:90%;
    background-color:#99a;
    min-height:600px;
    margin: 0 auto;

}


div.content
{
    width:90%;
    min-height:600px;
    margin: 0 auto;
    margin: 50px;
}

h4 { margin:20px 0 5px 0px; }

div.header, div.footer {
    width:100%;
    background-color:#667;
    height:100px;
}


table
{
    border: thin #222 solid;
    border-collapse: collapse;
}


table.stats_table {

    width:100%;
    max-width:100%;
}

table.crashes_table {
    display: inline-block;
    max-width:100%;
    border: thin #222;
    border-collapse: collapse;

}

th, td {

   border: thin darkgrey solid;
   padding: 2px 10px;
   text-align:center;
   max-width:250px;

}

th
{
    color:#337;
}

tr:nth-child(even) {

    background-color:#dde;
}

tr:nth-child(odd) {

    background-color:#bbc;
}

.myfieldclass {
    text-color: #0092bd;
    background-color:#666;
    color: #FFF;
}

.mylistclass
{
    margin: 50px;
}


.col-md-3 img
{
    width:50px;
}

li { list-style:none; }

.container
{
    margin: 50px;
}

.container label
{
    min-width:100px;
}

.fakechange
{
    color: black;
}

.chart {
    width:45%;
    max-width:90%;
    float:left; background-color:#ccccd0;
    padding:1% 5%;
    margin: 10px 1% 10px 0;
    border:thin grey solid;
    }

.clear { width:100%; height:1px; clear:both;}

.fader {
    opacity: 0;
    background-color: rgba(0,0,0,.5);
    position: fixed;
    height: 100vh;
    width: 100vw;
    top: 0;
    left: 0;
    z-index: 1;
    cursor: pointer;
    pointer-events: all;
}

.crashviewer {
    position: absolute;
    display:inline-block;
    border: thin #222;
    width: 90%;
    margin: auto;
    left: 50px;
    right: 50px;
    z-index: 10;
}

.crashviewer .innercrashviewer { background-color:#dddde3; border: thin solid #222; border-collapse: collapse; z-index:9999}

.innercrashviewer { padding: 5px; }

.crashdumpheader {   background-color:#bbc; font-weight: bold; width: 100%; font-style: italic; padding: 5px;}

#closeviewer {

    cursor: pointer;
}

/* CHARTS */

#product_usage_all_container  {width:100%;}
#product_crashes_all_container  {width:100%;}
#cash_container {width:100%;}

.nvd3-svg { background-color:#dddde3; border:thin lightgrey solid; }

#chartsviewer { background-color:#dddde3; border:thin lightgrey solid; }

form {
    border:thin grey solid;
    padding:5px 20px;
    background-color: darkgrey;
    padding:20px;
}

.form {width:48%; float:left; margin-right:1%; margin-bottom: 20px;}

.rangeform { border:thin grey solid;
    padding:5px 20px;
    background-color: #dddde3;
}


.emailListForm form
{
     min-height: 10px;
}


.emailListForm input[type="submit"]
{
     width:30%;
     float:right;
     position:relative;
     top: -35px;
}


/* Login */

div #screen { position:fixed; top:0; left:0; width:100%;height:100%; background-color: rgba(0,0,0,0.55); z-index: 2; }

div #login-box { position:fixed; top:20%; left:33%; width:33%; }

div #login-box form { font-size:.8em; width:100%; padding:50px 7%; position:relative; left:-7%; background-color:#446; border-radius:20px; border:thin solid grey; }

div #login-box form input {background-color:lightgrey; color:#333;}
div #login-box form input[type="submit"] { margin-top:20px; background-color:#dde; color:#black;}

div #login-links { width:100%; text-align:center; position:relative; top:-10px; font-size:.85em; color:darkgrey;}
div #login-links a { color:rgba(170, 170, 238, .6); display:inline-block; margin:4px; font-style:italic; }


div #profile {overflow:auto; width:66%; border-radius: 25px; display:block; background-color:#334; margin:auto;}
div #profile #actions {width:80%; margin:auto; padding: 20px 0 30px 0; }
div #profile #actions a {display:inline-block; width:30%; text-align:left; font-size:.8em; }

form h4 {border-bottom:thin grey solid; padding: 5px 0 5px 0; margin: 5px 0 20px 0;}

form li { max-width: 400px; padding: 4px;}
form li label {display: inline-block; width: 30%;}
form li input {display: inline-block; width: 50%;}
form li select {display: inline-block; width:60%; border:thin grey solid;}

form input[type=submit]
{
    width:100px; padding:5px 10px; border:thin grey solid;
    cursor:pointer; background-color: #aec7e8
}

button { background-color: #dde; padding:5px 10px; }


.messages {    background-color:#565;
               border:thin #232 solid;
               text-align:center;
               text-color: #cfc;
               margin:auto;
               padding:10px;
               width:90%;
               z-index:100;
           }


/* Marketing Email */
#id_body {
    height: 100%;
    width: 100%;
   -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}

#marketing_email_form { max-width: inherit }

#email_select { max-width: none; width: auto; padding: 4px;  }
#email_select li { max-width: none; width: auto; padding: 4px;}
#email_select li label {display: inline-block; width: auto;}


/* Packs */
#pack-box {
                width:calc(33% - 20px); aspect-ratio: 1 / 1;
                background-size:auto 70%; background-repeat: no-repeat;
                background-position: center;
                border:thin #334 solid;
                float:left; overflow:hidden; margin: 10px;
                position:relative;
                line-height:1.1em;
}

#pack-box:hover
{
    border:thin #778 solid;
    cursor:pointer;
    background-size:auto 80%;
    background-repeat: no-repeat;
}

#pack-box p {
    width:100%;
    text-align:center;
    background-color:rgba(1,1,1, .75);
    padding:10px 0;
}