/*
 * Base structure
 */

/* force height to support fixed footer */
html, body
{
    height: 100%;
    color: #dddddd;
}

body
{
    background: linear-gradient(0deg, #08172f, #000) no-repeat;
}

/* Overrides for colors*/
legend
{
    color: #dddddd;
}

button, input, optgroup, select, textarea {
    color: #444444;
}

/* restyle ol for forms*/
fieldset ol {
    padding: 0;
    list-style: none;
}

fieldset ol li
{
    padding-bottom: 12px;
}

fieldset ol label
{
    display: block;
    font-size: 1.2em;
    font-weight: 600;
}

#loginForm input
{
    width: 250px;
}

input:not([type='submit']), select {
    border: 1px solid #e2e2e2;
    padding-top: 0px;
    padding-bottom: 0px;
    padding-left: 3px;
    padding-right: 3px;
    margin: 0;
    height: 30px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

input, textarea {
    border: 1px solid #e2e2e2;
    background: #fff;
    color: #333;
    font-size: 1.2em;
    margin: 5px 0 6px 0;
    padding: 5px;
    width: 300px;
}

input[type='checkbox'] {
    background: transparent;
    border: inherit;
    width: auto;
}


/* Logged in as.. section at top */
div.top-login-info
{
    padding-top: 42px;
    text-align: right;
    vertical-align:middle;
    color: #777;
}
@media screen and (max-width: 768px)
{
    div.top-login-info
    {
        padding-top: 14px;
        text-align: center;
        vertical-align: middle;
    }
}

/* make nav-bars hover behaviour correct (background shows) */
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus
{
    background-color: #f1f1f1;
}

.navbar-inverse .navbar-nav > li > a:hover,
.navbar-inverse .navbar-nav > li > a:focus
{
    background-color: #191919;
}

.navbar-top
{
    border: none;
    border-bottom: 1px solid #e7e7e7;
}

#intro {
    top: 0;
    background-color: #f8f8f8;
    height: 70px;
    width: 100%;
    padding-left: 10px;
    padding-top: 4px;
    z-index: 9999;
}

/*
 * Sidebar
 */

/* Hide for mobile, show later */
.sidebar {
  display: none;
}
@media (min-width: 768px) {
  .sidebar {
    position: fixed;
    top: 51px;
    bottom: 0;
    left: 0;
    z-index: 1000;
    display: block;
    padding: 20px;
    overflow-x: hidden;
    overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
    background-color: #f5f5f5;
    border-right: 1px solid #eee;
  }
}

/* allow for a header in the side menu */
.nav > li.disabled.nav-header > a, 
.nav > li.disabled.nav-header > a:hover  {
    text-decoration:underline;
    color: #999;
    font-size: large;
    cursor: default;
}

/* Sidebar navigation */
.nav-sidebar {
  margin-top: -20px;
  margin-right: -21px; /* 20px padding + 1px border */
  margin-bottom: 20px;
  margin-left: -20px;
}
.nav-sidebar > li > a {
  padding-right: 20px;
  padding-left: 20px;
}
.nav-sidebar > .active > a {
  color: #fff;
  background-color: #428bca;
}

/*
    Sidebar menu items
    from here: http://www.jonathanbriehl.com/2014/01/17/vertical-menu-for-bootstrap-3/
*/

/* added following two styles to push sidebar to left edge, and push minimized sidebar menu to full width and make sure menu button aligns with top menu button */
.sidebar-nav
{
    margin-left: -20px;
    margin-right: -15px;
}

.sidebar-nav .navbar .navbar-header .navbar-toggle
{
    margin-right: 15px;
}

@media (min-width: 768px) {
    .sidebar-nav  /* added to adjust right margin when not minimized */
    {
        margin-right: 0px;
    }

  .sidebar-nav .navbar .navbar-collapse {
    padding: 0;
    max-height: none;
  }
  .sidebar-nav .navbar ul {
    float: none;
    display: block;
  }
  .sidebar-nav .navbar li {
    float: none;
    display: block;
  }
  .sidebar-nav .navbar li a {
    padding-top: 12px;
    padding-bottom: 12px;
  }
}

/*
 * Footer
 */

.navbar-footer
{
    margin-bottom: 0px;
}

#wrap {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    /* Negative indent footer by it's height */
    margin: 0 auto -54px;
    background-color: #08172f;
}

/* Set the fixed height of the footer here */
#push,
#footer {
height: 50px;
}
#footer {
background-color: #f8f8f8;
border-top: 1px solid #e7e7e7;
}

/* Lastly, apply responsive CSS fixes as necessary */
@media (max-width: 768px) {
    #footer {
        margin-left: -20px;
        /*margin-right: -20px;*/
        padding-left: 20px;
        /*padding-right: 20px;*/
    }
}

/*
 * Main content
 */

.main {
  padding: 20px;
}
@media (min-width: 768px) {
  .main {
    padding-right: 40px;
    padding-left: 40px;
  }
}
.main .page-header {
  margin-top: 0;
}


/*
 * Placeholder dashboard ideas
 */

.placeholders {
  margin-bottom: 30px;
  text-align: center;
}
.placeholders h4 {
  margin-bottom: 0;
}
.placeholder {
  margin-bottom: 20px;
}
.placeholder img {
  display: inline-block;
  border-radius: 50%;
}



/* Login Form Styles */
.account-wall
{
    max-width: 340px;
    margin-top: 40px;
    padding: 20px;
    background-color: #f7f7f7;
    -moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
    color: #333;
}

.account-wall legend
{
    color: #333;
}

.account-wall h3 {
    font-size: 16px;
    text-align: center;
    line-height: 150%;
}


/* Syncfusion specific formatting */

/* grid button */
.buttonDetails {
    width: 65px;
    background-color: #fcfcfc;
    font-size: 14px;
}

.e-filtertext.e-disable{
    display:none;
}