/* General styles
-------------------------------------------------- */
body {
    background-color: #444;
    color:            #fff;
}

input, table, div.panel {
    color: #040404;
}

footer {
    text-align: center;
}

.navbar-default {
    background-color:    #fcc604;
    border-bottom-color: #ca9c0a;
    color:               #040404;
    margin-top:          0;
}

.navbar-default .navbar-nav > li > a,
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
    color: #040404;
}

.navbar-default .navbar-nav > li.active > a,
.navbar-default .navbar-nav > li.active > a:hover,
.navbar-default .navbar-nav > li.active > a:focus {
    color:            #fff;
    background-color: #ca9c0a;
}

.navbar-default .navbar-toggle {
    margin:           18px 17px 16px;
    background-color: #444;
}

.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
    background-color: #ca9c0a;
}

.navbar-left {
    padding: 0;
}

.navbar-left > img.account-logo-main {
    height:           70px;
    padding:          5px 10px;
    width:            auto;
    background-color: white;
}

div.content {
    padding-top: 95px;
}

div.logo-wrapper,
div.login-form-wrapper {
    text-align: center;
}

nav.pagination-nav-element {
    height: 34px;
}

ul.twbs-pagination {
    margin: 0;
}

/*
Vertically center elements
*/
.panel-table .panel-footer .col,
.panel-table .panel-heading .col {
    line-height: 34px;
    height:      34px;
}

.panel-table .panel-heading .col h3 {
    line-height: 30px;
    height:      30px;
}

.panel-table .table > tbody > tr > td {
    line-height: 30px;
}

.table > thead > tr > th {
    background-color: #e3e3e3;
}

.table > tbody > tr > th {
    background-color: #eee;
    width:            33%;
    line-height:      30px;
}

/* Custom, iPhone Retina */
@media only screen and (min-width: 320px) {

    .navbar-default > .container-fluid {
        padding-left: 15px;
    }

    .navbar-default {
        background-color: #fff;
    }

}

/* Extra Small Devices, Phones */
@media only screen and (min-width: 480px) {

}

/* Small Devices, Tablets */
@media only screen and (min-width: 768px) {

    .navbar-default > .container-fluid {
        padding-left: 0;
    }

    .navbar-default {
        background-color: #fcc604;
    }

}

/* Medium Devices, Desktops */
@media only screen and (min-width: 992px) {

}

/* Large Devices, Wide Screens */
@media only screen and (min-width: 1200px) {

}

/* Sticky footer styles
-------------------------------------------------- */
html {
    position:   relative;
    min-height: 100%;
}

body {
    margin-bottom: 40px;
}

.footer {
    position:    absolute;
    bottom:      0;
    width:       100%;
    height:      40px;
    font-size:   0.8em;
    font-weight: bold;
}

.footer a {
    color:           gray;
    text-decoration: none;
}

.footer a:hover {
    color:           lightsteelblue;
    text-decoration: none;
    border-bottom:   1px dotted lightsteelblue;
}

/* Job Info modal styles
-------------------------------------------------- */
#modalJobInfo > .table > tbody > tr > td {
    border-top:  0;
    line-height: normal;
    padding:     2px;
}

#modalJobInfo div.notificationEntry {
    margin-bottom: 0;
}

#modalJobInfo .well {
    vertical-align: top;
}

#modalJobInfo .table tr td {
    white-space: normal;
}

/* My Account page styles
-------------------------------------------------- */
table.table-bordered > tfoot > tr > th {
    background-color: #eee;
}

/* Login-page specific styles
-------------------------------------------------- */
@keyframes logoFadeAndZoom {
    from {
        opacity: 0.8;
        transform: scale(60%);
    }
    to {
        opacity: 1;
        transform: scale(100%);
    }
}

.account-logo {
    margin: 20px;
    opacity: 1;
    height: 80px;
    animation-name: logoFadeAndZoom;
    animation-duration: 0.7s;
    animation-iteration-count: 1;
}

.no-anim {
    animation-duration: 0s !important;
}

div#login-box {
    background-color: white;
}

.login-form-wrapper {
    padding: 10px;
    background-color: white;
    border-top: 1px solid lightgrey;
    color: #0a0a0a;
}

.modal-body {
    color: #000;
}

.modal-header {
    color: #000;
}