/* Move down content because we have a fixed navbar that is 50px tall */
body {
    padding-top: 50px;
    padding-bottom: 20px;
    background-color:#f2f2f2;
}

footer {
    color:#999999;
}

img.product-photo {
    width:100%;
    max-width:400px;
    margin:5px 0 15px;
}

div.box {
    background-color:#ffffff;
    border-radius:2px;
    padding:15px;
    margin:15px;
    box-shadow:0 0 5px #999999;
}

.navbar-inverse .navbar-toggle {
    border-color:deepskyblue;
}
.navbar-inverse .navbar-toggle .icon-bar {
    background-color:deepskyblue;
}
.pager {
    margin:15px 0!important;
    text-align:left;
}
    .pager span {
        padding:15px;
        color:dodgerblue;
    }
    .pager a {
        padding:15px;
    }

th {
    padding:5px;
}

h4 {
    margin:15px;
    color:#999999;
}
h5 {
    font-weight:bold;
}

div.add-form {
    border-radius:5px;
    box-shadow:0 0 5px #999999;
    padding:15px;
    margin:15px 0;
}

span.dashboard-icon {
    font-size:50pt;
}

/* Wrapping element */
/* Set some basic padding to keep content from hitting the edges */
.body-content {
    padding-left: 0;
    padding-right: 0;
}
.navbar-brand {
    padding:15px 15px 15px 15px;
}

.quote {
    font-size:10pt;
    margin-bottom:15px;
    font-style:italic;
}
.nospace {
    margin:15px 0 0 0;
}
.nopadding {
    padding:0!important;
}
.width-full {
    max-width:100%!important;
}

.default-dropdown {
    padding:5px;
}
.default-btn {
    padding:5px 15px!important;
    border-radius:2px;
    border:0;
    min-width:100px!important;
    background-color:dodgerblue;
    font-size:11pt;
    color:#ffffff;
    box-shadow:0 0 5px #999;
    display:inline-block;
}
    .default-btn:hover {
        background-color:blue;
        color:#ffffff;
        text-decoration:none;
    }
    .default-btn.left {
        text-align:left;
    }
.view-btn {
    padding:5px 15px;
    margin:5px 0;
    border:0;
    box-shadow:0 0 5px #999999;
    background-color:#f2f2f2;
    color:#000000;
    width:100%;
}
    .view-btn:hover {
        background-color:Highlight;
        cursor:pointer!important;
    }
    .view-btn.selected {
        background-color:darkblue;
        color:#ffffff;
        cursor:default;
    }
    .view-btn.inactive {
        background-color:#f2f2f2;
        color:#999999;
        cursor:default;
    }

.btn-round-green {
    color:forestgreen;
    background-color:#ffffff;
}
    .btn-round-green:hover {
        background-color:#999999;
    }
.btn-round-red {
    color:red;
    background-color:#f2f2f2;
}
    .btn-round-red:hover {
        background-color:#999999;
    }
.btn-green {
    background-color:green;
    color:#ffffff;
    width:100%;
    font-size:12pt;
    padding:5px 15px;
}
.btn-red {
    background-color:red;
    color:#ffffff;
    width:100%;
    font-size:12pt;
    padding:5px 15px;
}


div.dashboard-box {
    display:inline-block;
    padding:5px;
    margin:15px 5px;
    vertical-align:top;
}
.dashboard-btn-big {
    border:0;
    border-radius:5px;
    box-shadow:0 0 5px #999;
    padding:15px;
    margin:5px 0;
    text-align:center;
    display:block;
    font-size:12pt;
    background-color:transparent;
    min-width:200px;
    color:#000000;
}
    .dashboard-btn-big:hover {
        background-color:#f9f9f9;
        text-decoration:none;
    }
    .dashboard-btn-big.inactive {
        cursor:default;
        opacity:0.2;
    }
.dashboard-btn {
    padding:15px;
    border-radius:5px;
    border:0;
    /*min-width:100px;*/
    background-color:dodgerblue;
    font-size:11pt;
    color:#ffffff;
    width:100%;
    display:inline-block;
}
    .dashboard-btn:hover {
        background-color:blue;
        color:#ffffff;
        text-decoration:none;
    }

.form-btn-big {
    font-size:18pt;
    padding:15px;
    margin:15px;
    min-width:150px;
    background-color:transparent;
    border:0;
    box-shadow:0 0 5px #999999;
}
    .form-btn-big:hover {
        color:blue;
    }
.form-header {
    font-size:18pt;
    margin:15px;
    padding:15px;
    display:inline-block;
}
.form-header-active {
    font-size:18pt;
    margin:15px;
    background-color:blue;
    color:#ffffff;
    padding:15px;
    display:inline-block;
}
.form-textbox {
    border:0!important;
    border-bottom:1px solid lightblue!important;
    padding:5px;
    margin:15px 0;
    width:70%!important;
}
.form-dropdown {
    padding:5px;
    border:0;
    background-color:#f2f2f2;
    margin:15px 0;
}
.form-dropdown.small {
    padding:5px;
    border:0;
    background-color:#f2f2f2;
    margin:15px 0;
    max-width:75px;
}
.form-delete {
    padding:5px;
    border-radius:5px;
    border:0;
    min-width:5%;
    max-width:40px;
    background-color:#ffffff;
}
    .form-delete:hover {
        color:blue;
    }
.form-order {
    padding:5px;
    border-radius:5px;
    border:0;
    min-width:5%;
    max-width:40px;
    background-color:#ffffff;
}
    .form-order:hover {
        color:blue;
    }
    .form-order:disabled {
        color:transparent;
    }
.form-add {
    text-align:center;
    width:100%;
    max-width:500px;
    margin:0 auto;
}

.login-box {
    padding:30px;
    margin:30px auto;
    display:block;
    box-shadow:0 0 5px #ffffff;
    color:#333333;
    background-color:#ffffff;
}

.vendor-logo {
    max-width:200px;
    width:100%;
    margin:15px 0;
}

.black_overlay {
  display: none;
  position: absolute;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
  background-color: black;
  z-index: 1001;
  -moz-opacity: 0.8;
  opacity: .80;
  filter: alpha(opacity=80);
}
    .black_overlay.active {
      display: block;
      position: absolute;
      top: 0%;
      left: 0%;
      width: 100%;
      height: 100%;
      background-color: black;
      z-index: 1001;
      -moz-opacity: 0.8;
      opacity: .80;
      filter: alpha(opacity=80);
    }
.white_content {
  display: none;
  position: absolute;
  top: 25%;
  left: 5%;
  width: 90%;
  height: 90%;
  padding: 16px;
  border: 16px solid highlight;
  background-color: white;
  z-index: 1002;
  overflow: auto;
}
    .white_content.active {
      display: block;
      position: absolute;
      top: 25%;
      left: 5%;
      width: 90%;
      height: 75%;
      padding: 16px;
      border: 16px solid highlight;
      background-color: white;
      z-index: 1002;
      overflow: auto;
    }

.calendar {
    width:100%;
    max-width:400px;
    margin:0 auto;
}

/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
.modal.show {
    display:block;
}

/* Modal Content/Box */
.modal-content {
    background-color: #fefefe;
    margin: 100px auto 30px; /* 15% from the top and centered */
    padding: 20px;
    border: 1px solid #888;
    width: 90%; /* Could be more or less, depending on screen size */
    max-width:500px;
    font-size:9pt;
}

/* The Close Button */
.close {
    color: #333;
    float: right;
    font-size: 28px;
    font-weight: bold;
    margin-bottom:15px;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}


/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
.dl-horizontal dt {
    white-space: normal;
}

/* Set widths on the form inputs since otherwise they're 100% wide */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="select"],
input[type="password"],
input[type=date],
select,
textarea {
    max-width: 400px;
    margin:0;
    border:1px solid lightgrey;
}
input[type=number] {
    padding:5px;
    border:1px solid lightgrey;
}
    input[type=number].long {
        max-width:400px;
        width:100%;
    }
input[type=text], textarea, input[type=email], input[type=password] {
    width:70%;
    padding:5px;
}

select {
    width:70%;
    padding:5px;
}
option {
    padding:5px;
}

.inline-block {
    display:inline-block!important;
}

/* Responsive: Portrait tablets and up */
@media screen and (min-width: 768px) {
    h4 {
        margin:15px 0;
    }
    .jumbotron {
        margin-top: 20px;
    }
    .body-content {
        padding: 0;
    }
    .navbar-brand {
        padding:15px 15px 15px 0;
    }
    .login-box {
        width:400px;
    }
    .white_content.active {
      display: block;
      position: absolute;
      top: 25%;
      left: 25%;
      width: 50%;
      height: 70%;
      padding: 16px;
      border: 16px solid highlight;
      background-color: white;
      z-index: 1002;
      overflow: auto;
    }
    div.box {
        margin:15px 0;
    }
}