html, body {
    margin: 0px;
    color: #eeeeee;
    /*font-family: Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif;*/
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12pt;
    height: 100%;
}

body {
    background: #333333 url('/images/splash_03.jpg') no-repeat center top;
    /*background-size: contain;*/
    background-size: cover;
    display: flex;
    flex-direction: column;
}

body.auth {
    background: #333333 url('/images/splash_03.jpg') no-repeat center top;
    /*background-size: contain;*/
    background-size: cover;
    display: flex;
    flex-direction: row;
}

input[type="date"]::-webkit-calendar-picker-indicator {
    width: 1em;
    margin: 0.25em;
}

a.signin,a.register {
    text-decoration: none;
    padding: .5em 1em;
    cursor: pointer;
    transition: .25s;
    transition-timing-function: ease-in-out;
    font-weight: 700;
    color: #222;
    background-color: #e9e9e9;
    border: 1px solid #858585;
    border-radius: .5em;
    max-width: 100px;
    text-align: left;
    display: inline-block;
}

a.signin:hover {
    color: #eee;
    background-color: #00a3ff;
    border: 1px solid #003f64;
}

a.register:hover {
    color: #eee;
    background-color: #1e9600;
    border: 1px solid #003f64;
}

#contentDiv.vertical-old {
    padding: 1em 1em 1em 2em;
    flex: 1;
    margin-left: 5em;
    display: flex;
}

#contentDiv.vertical {
    position: fixed;
    bottom: 1em;
    top: 1em;
    left: 7em;
    right: 1em;
    display: flex;
}

#contentDiv.horizontal {
    padding: 1em;
    flex: 1;
    margin-top: 75px;
}

.error-message {
    color: #ee0000;
}

.ui-collapsible-header {
    border-bottom: 1px solid #777777;
    cursor: pointer;
}

.button {
    padding: .5em 1em;
    cursor: pointer;
    border-radius: .5em;
    transition: .25s;
    transition-timing-function: ease-in-out;
    font-weight: 700;
    border: 1px solid #3d3d3c;
    color: #3d3d3c;
    background-color: #dedddb;
}

.button.active {
    background-color: #838383;
    color: #3d3d3c;
}

.button.disabled {
    background-color: #7c7c7c;
    color: #3d3d3c;
}

.button:not(.disabled):hover {
    background-color: #636363;
    color: #eee;
}

.button.blue {
    color: #fff;
    background-color: #00a3ff;
    border: 1px solid #003f64;
}

.button.blue:hover {
    background-color: #62c6ff;
}

.button.green {
    color: #fff;
    background-color: #3da242;
    border: 1px solid #006400;
}

.button.green:hover {
    background-color: #4fcc55;
}

.button.red {
    color: #fff;
    background-color: #ff0000;
    border: 1px solid #640000;
}

.button.red:hover {
    background-color: #ff6262;
}

.forgot-password {
    color: #2196F3;
    text-decoration: none;
    transition: .25s;
    transition-timing-function: ease-in-out;
}

.forgot-password:hover {
    color: #eee;
}

.info {
    /* float: right;
    background-color: #4444ff;
    border-radius: .75em;
    padding: .15em .25em 0em;
    text-align: center;
    border: 1px solid #ffffff; */
    cursor: help;
}

.signin-div, .forgot-div {
    margin-left: 30%;
    margin-right: 30%;
    margin-top: 5em;
    padding: 1em;
    background-color: #333333;
    border: 1px solid #aaaaaa;
}

.signin-div input {
    width: 97%;
}

.fa {
    margin-right: .5em;
}

.fa.icon, .fas.icon, .far.icon {
    margin-right: .5em;
}

.form-div {
    /* background-color: #222222;
    opacity: .9;
    border: 1px solid #555555; */
    border-radius: .5em;
}

.form-div > div {
    display: flex;
    flex-direction: row;
}

.form-div > div > label {
    min-width: 100px;
}

.form-div label, .form-div .label {
    display: inline-block;
    margin-bottom: .25em;
    font-weight: 600;
}

.form-div input[type='button'] {
    display: block;
    margin-bottom: 1em;
}

.form-div .flow input[type='button'] {
    display: inline-block;
    margin-bottom: 1em;
}

.form-div.indent input[type='button'] {
    margin-left: 2em;
}

.form-div div.form-info {
    color: #f6772f;
    padding: .125em .25em;
}

.form-div.indent div.form-info {
    margin-left: 2em;
}

.form-div textarea, .form-div input[type='text'], .form-div input[type='password'], .form-div select, .form-div div.form-info {
    display: block;
    margin-bottom: 1em;
    border-radius: .25em;
    border: 1px solid #555555;
    font-size: 1.1em;
}

.form-div input[type='checkbox'] {
    margin-bottom: 1em;
}

.form-div.indent input[type='checkbox'] {
    margin-left: 2em;
}

.form-div.indent input[type='text'], .form-div.indent input[type='password'], .form-div.indent input[type='submit'], .form-div.indent select, .form-div.indent div.form-info {
    margin-left: 2em;
}

.toolbar {
    margin: .5em 0px;
    display: flex;
    flex-direction: row-reverse;
}
/*FIELDSET*/
fieldset {
    /* border-radius: .25em; */
    border: 3px double #1f1f1f;
    padding: 1em;

    /* background-color: #333;
    color: #ddd; */
    margin: 1em;
    opacity: .95;
}

.collapsible {
    transition: .5s;
    transition-timing-function: ease-in-out;
}

fieldset.collapsible.collapsed {
    max-height: 10px;
    overflow: hidden;
}

.collapsible.collapsed:not(fieldset) > *:last-child {
    height: 0px;
    overflow: hidden;
    display: none;
}

legend {
    /* border-radius: .25em; */
    border: 1px solid #626262;
    padding: .25em 10% .25em 1em;
    /* background-color: #1f1f1f; */
    font-weight: 700;
    /* font-size: 1.2em; */
}

.collapsible > legend, .collapsible > .header {
    cursor: pointer;
}

.collapsible > legend  i.fas, .collapsible > legend  i.far {
    margin-right: .75em;
}

.collapsible > .header  i.fas, .collapsible > .header  i.far {
    margin-right: .5em;
    font-size: .75em;
}

.collapsible.expanded > legend > i.fas:before, .collapsible.expanded > .header > i.fas:before {
    content: "\f0d7";
}

.collapsible.collapsed > legend > i.fas:before, .collapsible.collapsed > .header > i.fas:before {
    content: "\f0da";
}

.dialog {
    position: absolute;
    z-index: 4;
    transition: .5s;
    transition-timing-function: ease-in-out;
    border-radius: .25em;
    border: 1px solid #555;
}
.dialog-header {
    background-color: #2196F3;
    min-height: 2em;
    border-top-left-radius: .5em;
    border-top-right-radius: .5em;
    border: 1px solid #222;
    font-size: 1.1em;
    font-weight: 700;
    padding: .75em 0px 0px 1em;
}
.dialog-body {
    padding: 1em;
    opacity: .9;
    background-color: #333;
}
.dialog-body .table-row {
    transition: 1s;
    transition-timing-function: ease-in-out;
}
.dialog-body .table-row.error {
    border: 1px solid #ee0000;
    border-radius: .25em;
}
.dialog-footer {
    background-color: #333;
    min-height: 2em;
    border-bottom-left-radius: .5em;
    border-bottom-right-radius: .5em;
    border-top: 1px solid #777;
    text-align: right;
    padding: .25em 1em;
}
.dialog-footer .button
{
    max-width: 100px;
    display: inline-block;
}
.dialog-footer .button > i
{
    margin-right: .5em;
}
.dialog-footer .button:not(:last-child) {
    margin-right: .5em;
}
.dialog-background {
    position: fixed;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    z-index: 3;
    background-color: #111;
    opacity: .9;
    transition: .5s;
    transition-timing-function: ease-in-out;
}

.button.medium {
    max-width: 100px;
}

.button.large {
    max-width: 125px;
}

.search-criteria {
    /* background-color: #2a2a2a;
    border-radius: .25em;
    border: 1px solid #1f1f1f; */
    /* padding: .75em; */
    margin-bottom: 1em;
}

.notification-container {
    z-index: 101;
    position: absolute;
    top: 35%;
    bottom: 40%;
    left: 25%;
    right: 25%;
    display: none;
}

.notification-title-bar {
    padding: .5em;
}

.notification-close-button {
    font-family: "Font Awesome 5 Free";
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
    font-weight: 900;
    color: #aa0000;
    margin: .25em;
    cursor: pointer;
    font-size: 1.2em;
    float:right;
}
.notification-close-button::before {
    content: "\f410";
}
.notification-close-button:hover {
    color: #ff0000;
}

.notification-message-panel {
    padding: .5em 1em;
}

/* .notification-title-bar
.notification-title-label
.notification-close-button
.notification-message-panel
.notification-message-label
.notification-message-button-panel */
.notification-backdrop {
    z-index: 100;
    display: none;
    position: fixed;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
}

.js-notify {
    transition: .5s;
    transition-timing-function: ease-in-out;
    position: absolute;
    z-index: 100;
    top: -305px;
    left: 20%;
    right: 20%;
    max-height: 300px;
    background-color: #444444;
    border-radius: .25em;
    border: 0px solid #333333;
    padding: 0px;
    text-align: left;
    opacity: .95;
}
.js-notify.active {
    top: 3px;
}

.js-notify .js-notify-header {
    font-size: 1.1em;
    padding: .25em;
    background-color: #333333;
    border-radius: .25em;
}
.js-notify.error .js-notify-header {
    background-color: #580000;
}
.js-notify.warn .js-notify-header {
    background-color: #fffd7e;
    color: #333333;
}
.js-notify.info .js-notify-header {
    background-color: #00489b;
}

.js-notify .js-notify-body {
    font-size: 1em;
    padding: .25em;
    min-height: 50px;
    border: 1px solid #222222;
    border-radius: .25em;
}

.js-notify.error .js-notify-body {
    border: 1px solid #580000;
}
.js-notify.warn .js-notify-body {
    border: 1px solid #fffd7e;
    color: #fffd7e;
}
.js-notify.info .js-notify-body {
    border: 1px solid #00489b;
}

.search-criteria > div:not(:last-child) {
    margin-bottom: .5em;
}

.search-criteria > div > label, .search-criteria > div > .label {
    display: inline-flex;
    width: 100px;
}

/* .search-criteria > div > *:last-child {
} */

.search-criteria input {
    font-size: 1em;
    width: 20em;
    border-radius: .25em;
}

.search-criteria input[type="date"] {
    width: 9.5em;
}

.search-criteria > .button-container {
    display: flex;
    flex-direction: row;
}

.search-criteria > .button-container > .button {
    width: 5em;
    padding: .25em .5em;
    font-size: .9em;
}

.shake-elem {
    animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    perspective: 1000px;
  }
  
  @keyframes shake {
    10%, 90% {
      transform: translate3d(-1px, 0, 0);
    }
    
    20%, 80% {
      transform: translate3d(2px, 0, 0);
    }
  
    30%, 50%, 70% {
      transform: translate3d(-4px, 0, 0);
    }
  
    40%, 60% {
      transform: translate3d(4px, 0, 0);
    }
  }

  .shake-elem-alt {
    animation: shake-alt 0.75s;
    animation-iteration-count: 1;
  }

  @keyframes shake-alt {
    0% { transform: translate(1px, 1px) rotate(0deg); }
    10% { transform: translate(-1px, -2px) rotate(-1deg); }
    20% { transform: translate(-3px, 0px) rotate(1deg); }
    30% { transform: translate(3px, 2px) rotate(0deg); }
    40% { transform: translate(1px, -1px) rotate(1deg); }
    50% { transform: translate(-1px, 2px) rotate(-1deg); }
    60% { transform: translate(-3px, 1px) rotate(0deg); }
    70% { transform: translate(3px, 1px) rotate(-1deg); }
    80% { transform: translate(-1px, -1px) rotate(1deg); }
    90% { transform: translate(1px, 2px) rotate(0deg); }
    100% { transform: translate(1px, -2px) rotate(-1deg); }
  }