/* **********************************
 * 2/28/2020 - Created as a new css file to start updating of the overall branding.
 *                  Will include last so it overrides anything that may conflict so the original
 *                  css can eventually be fully removed.
 * **********************************/

/* **********************************/
/* login page */
/* **********************************/

/* top level */
.login html,.login body {
    background-image: url("/images/background-vegetables.jpg");
    background-position: center center;
    background-attachment: fixed;
    background-size: cover;
    background-repeat: no-repeat;
    background-color: #000000;
}

.error404 html,.error404 body {
    background-image: url("/images/pattern.jpg");
    background-position: center center;
    background-attachment: fixed;
    background-size: cover;
    background-repeat: no-repeat;
    background-color: #000000;
}

/* notification bar */
.notification-bar {
    bottom: auto;
    top: 0px;
    width: 100%;
    height: auto;
    padding: 5px;
    background: #693A77;
    color: white;
    left: 0px;
    text-align: center;
}

/* banner */
.promotion-container {
    align-content: center;
}

.card-promotion {
    margin: auto 10px auto 10px;
    width: 600px;
}

/* login "form" */
.login-container {
    height: 100%;
    align-content: center;
}

.card-login {
    height: auto;
    margin-top: auto;
    margin-bottom: auto;
    width: 400px;
    background-color: rgba(0,0,0,0.6);
    border-radius: 3px;
}

.card-header h3 {
    color: white;
}

.card-login .card-header {
    padding: .45rem 1.25rem;
}

.card-login .card-body {
    padding: .5rem 1.25rem;
}

.input-group div span {
    width: 50px;
    background-color: #FFB612;
    color: black;
    border:0;
}

.login-btn {
    color: black;
    background-color: #FFB612;
    border-color: #FFB612;
    width: 100px;
}

.login-btn:hover {
    color: black;
    background-color: white;
}

.loginLinks {
    color: white;
    text-align: center;
}

.loginLinks a {
    margin-left: 4px;
    color: white;
}

/* message */
.message-container {
    align-content: center;
}

.card-message {
    margin-top: auto;
    margin-bottom: auto;
    width: 650px;
    background-color: #693A77 !important;
    border-radius: 3px;
}

/* popover */
.popover-header {
  background-color: #222;
  color: white;
}

/***************************************/
/* header */
/***************************************/

div.header {
    margin: 5px 0 5px 25px;
}

div.header a.button {
    font-size: 1.50em;
    font-weight: bold;
    color: #006643;
    border-radius: 5px;
    padding: 5px;
    margin: 10px 10px;
}

div.header a.button:hover {
    color: #FFFFFF;
    background-color: #006643;
}

/* logout */

div.logout {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    right: 0;
    margin: 11px 25px 0 10px;
}

div.logout a:hover {
    opacity: 0.75;
}


/* **********************************/
/* footer */
/* **********************************/

.footer {
    background-color: #FFB612;
    color: black;
    text-align: center;
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
}

/* **********************************/
/* general */
/* **********************************/

/* colors */

.black {
    color: #000;
}

.white {
    color: #FFF;
}

.red {
    color: red;
}

.orange {
    color: #FF6319;
}

.yellow {
    color: #FCD900;
}

.blue {
    color: blue;
}

.green {
    color: green;
}

/* input */

input:focus {
    box-shadow: 0 0 0 0 !important;
}

/* cursor */

.cursor-pointer {
    cursor: pointer;
}

/* **********************************/
/* modal dialog */
/* **********************************/

.modal-fader {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    z-index: 99998;
    background: rgba(0, 0, 0, 0.8);
}

.modal-fader.active {
    display: block;
}

.modal-window {
    display: none;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 99999;
    background: #fff;
    padding: 20px;
    border-radius: 5px;
    top: 100px;
    min-width: 750px;
}

.modal-window.active {
    display: block;
}

.modal-window h1,
.modal-window h2,
.modal-window h3,
.modal-window h4,
.modal-window h5,
.modal-window h6 {
    margin: 0;
}

.modal-title {
    font-size: 1.2em;
    font-weight: bold;
    color: #FF6319;
}

#modal-item-details-body li {
    padding-top: 1px;
}