html,
body,
#main {
    height: 100%;
}

.prevent-select {
    -webkit-user-select: none;
    /* Safari */
    -ms-user-select: none;
    /* IE 10 and IE 11 */
    user-select: none;
    /* Standard syntax */
}

/* Loading React application */
.loading-application {
    margin: 0 auto;
    border: 1px solid #000;
    width: 200px;
    text-align: center;
    margin-top: 50%;
}

/* Loading data from REST API into collection or model */
.loadingOverlay {
    position: absolute;
    top: 0;
    height: 100%;
    width: 100%;
    font-size: 1.5em;
    background-color: rgba(0, 0, 0, 0.05);
    text-align: center;
    border-radius: 3px;
    animation: fadein 0.3s;
}

.loadingOverlay .loadingWrapper {
    position: relative;
    top: 50%;
}

@keyframes fadein {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadein2 {
    from {
        filter: blur(0px);
    }

    to {
        filter: blur(1px);
    }
}

.loadingOverlay span {
    color: steelblue;
}

.backboneTableLoading tbody {
    animation: fadein2 0.3s;
    filter: blur(1px);
}

.invoice .title {
    font-weight: bold;
    font-size: 0.9em;
}

.invoice .data {
}

/* react-select */
.Select input {
    border: 0 !important;
    background: 0;
}

/* Key stuff */
.key-active {
    color: #8f8;
}

.key-inactive {
    color: #f88;
}

/* Better forms */
.meep .uk-form-width-large {
    width: 100%;
}

.meep form .uk-input,
.meep form .uk-textarea {
    border: none;
    border-radius: 0;
    border-bottom: 1px solid #aaa;
    background-color: #fff;
    padding: 0;
    color: #000;
    margin: 5px 0;
    height: 25px;
}

.meep select {
    margin-top: 12px !important;
}

.meep form .uk-textarea {
    overflow: hidden;
    resize: none;
}

.meep .form-row label {
    font-size: 11px;
    font-weight: bold;
    color: #888;
    height: 16px;
    display: inline-block;
}

.meep .form-row:focus {
    background-color: green;
}

.meep .uk-form-controls {
    margin-top: -7px;
    margin-left: 0;
}

.meep ::-webkit-input-placeholder {
    font-style: italic;
}

.meep :-moz-placeholder {
    font-style: italic;
}

.meep ::-moz-placeholder {
    font-style: italic;
}

.meep :-ms-input-placeholder {
    font-style: italic;
}

form .error .uk-input,
form .error .uk-textarea {
    border-bottom: 3px solid red !important;
}

form .uk-form-help-block.error {
    color: red;
    margin-top: -8px;
    font-size: 10px;
}

.meep .form-row + .form-row {
    margin-top: 10px;
}

.meep .uk-form-icon > [class*="uk-icon-"] {
    margin-left: -30px;
}

.meep .uk-form-icon .uk-input {
    padding-left: 0 !important;
}

/* Hilite label and border */
.meep form .selected .uk-input,
.meep form .selected .uk-textarea {
    border-bottom: 3px solid #58f !important;
    padding-bottom: 2px;
    margin-bottom: 3px;
    color: #000;
}

.meep form .selected textarea {
    margin-top: 3px !important;
    margin-bottom: 5px !important;
}

.meep form .selected label {
    color: #58f;
}

.meep form .selected .uk-form-controls {
    margin-top: -5px;
}

/* Fany transisions for hilite */
.meep form .uk-input,
.meep form .uk-textarea,
.meep form .uk-form-controls {
    transition-delay: 0s;
    transition-duration: 0.2s;
    transition-property: border, padding, margin;
    transition-timing-function: linear;
}

.meep .changed label::before {
    content: "* ";
}

span.ma-changed {
    position: relative;
}

.ma-changed::after {
    position: absolute;
    right: 8px;
    top: -0.1em;
    content: "*";
}

.searchbox {
    clear: both;
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 10px;
    margin: 20px 0;
}

/* Other stuff */
.uk-button.uk-float-left {
    margin-right: 1em;
}

/* Toggle rows in tables */
tr.toggle td {
    padding: 0;
}

tr.toggle.show td {
    border-bottom: 3px solid #ddd;
}

tr.toggle div.wrapper {
    -webkit-transition: max-height 1.5s cubic-bezier(0, 1.05, 0, 1);
    -moz-transition: max-height 1.5s cubic-bezier(0, 1.05, 0, 1);
    transition: max-height 1.5s ease cubic-bezier(0, 1.05, 0, 1);

    max-height: 0;
    overflow: hidden;
}

tr.toggle div.scrolling {
    overflow: auto;
}

tr.toggle.show div.wrapper {
    max-height: 500px;

    -webkit-transition: max-height 1s ease;
    -moz-transition: max-height 1s ease;
    transition: max-height 1s ease;
}

tr.toggle.show div.scrolling {
    max-height: 500px;
}

/* Removing styling from <pre> when using in toggle tables */
tr.toggle pre {
    margin-bottom: 0;
    border: 0;
    background: none;
}

.datebox {
    border: 2px dotted #ddd;
    margin-top: 20px;
    padding: 0 10px;
    border-radius: 5px;
    background-color: #fff;
    border-radius: 5px;
}

.datebox p {
    margin: 5px 0 !important;
}

.meep .uk-section {
    margin-bottom: 3em;
}

.meep p {
    margin: 0;
}

.meep .uk-form-controls > .uk-form-icon {
    width: 100%;
}

.multiaccess h4 {
    font-size: 14px;
    font-weight: bold;
}

.multiaccess h3,
.multiaccess h4,
.multiaccess ul,
.multiaccess p {
    margin: 0;
}

.multiaccess .error {
    margin-top: 10px;
}

/* UI-kit icons are not aligned with text for Buttons, legends, etc */
.uk-icon {
    transform: translateY(-2px);
}

/* However, in the Navbar they are already aligned */
ul.uk-navbar-nav>li>a>.uk-icon,
/* As well as when inlined into an input */
.uk-inline>.uk-icon:has(+input) {
    transform: translateY(0px);
}

/* Don't let the icons shrink */
.uk-icon > svg {
    max-width: none;
}

/* Icons from the react-icons package also need to be bumped a bit to be aligned with text */
button > svg {
    transform: translateY(-2px);
}

/* The navbar items are by default very tall (80px), which takes too much space
 * when combining with the flex layout */
.uk-navbar-nav > li > a,
.uk-navbar-item,
.uk-navbar-toggle {
    min-height: 40px !important;
}

.centered-form form.uk-card {
    border: 1px solid #aaa;
    border-radius: 5px;
}

.changed-date {
    border-color: #dbdc8d !important;
    background: #fffff7 !important;
    color: #9b8716 !important;
}

.date-period-templates {
    margin-top: 8px;
    margin-right: 30px;
    font-size: 0.9em;
}

.ms-navbar-left,
.ms-navbar-right {
    flex: 1 0 0%;
}

.ms-navbar-right {
    flex: 1 1 0%;
}

.ms-navbar-center {
    flex-grow: 0;

    li {
        /* Prevent menu items from having their text wrapped if the screen is too small */
        flex-shrink: 0;
    }
}

.removebutton {
    color: #a00000;
}

.accessy-asset-img-thumbnail {
    width: 70px;
    height: 70px;
    object-fit: cover;
}

.box-terminator {
    display: flex;
    position: relative;
    background: #111;
    align-items: center;
    height: 100%;
}

.box-terminator-popover {
    position: absolute;
    bottom: 10px;
    z-index: 10;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    animation: box-terminator-slide-in-up ease-in-out 0.2s forwards;
}

.box-terminator-popover.fading-out {
    animation: box-terminator-slide-out-down ease-in-out 0.2s forwards;
}

.box-terminator-popover > div {
    display: flex;
    align-items: center;
    background: white;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 5px 10px;
    gap: 30px;
    box-shadow:
        0px 0.1px 0.3px rgba(0, 0, 0, 0.034),
        0px 0.3px 0.7px rgba(0, 0, 0, 0.048),
        0px 0.5px 1.3px rgba(0, 0, 0, 0.06),
        0px 0.9px 2.2px rgba(0, 0, 0, 0.072),
        0px 1.7px 4.2px rgba(0, 0, 0, 0.086),
        0px 4px 10px rgba(0, 0, 0, 0.12);
    box-sizing: border-box;
    min-width: 400px;
}

.box-terminator-popover.active > div {
    fill: #00aa00;
}

.box-terminator-popover.expired > div {
    background-color: #f0506e;
    color: white;
    border-color: #ad1b36;
    fill: white;
}

.box-terminator-popover.expired .uk-button-default {
    color: white;
}

.box-terminator-popover svg {
    width: 32px;
    height: 32px;
    margin-right: 10px;
}

#qr-reader {
    width: 100%;
    height: auto;
}

@keyframes box-terminator-slide-in-up {
    0% { transform: translateY(100px); opacity: 0; }
    100% { transform: translateY(0px); opacity: 1; }
}

@keyframes box-terminator-slide-out-down {
    0% { transform: translateY(0px); opacity: 1; }
    100% { transform: translateY(100px); opacity: 0; }
}


@keyframes box-terminator-slide-in-down {
    0% { transform: translateY(-100px); opacity: 0; }
    100% { transform: translateY(0px); opacity: 1; }
}

@keyframes box-terminator-slide-out-up {
    0% { transform: translateY(0px); opacity: 1; }
    100% { transform: translateY(-100px); opacity: 0; }
}


.label-id-search-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 10;
    font-size: 2em;
    background: #ccc;
    border: 1px solid #999;
    border-radius: 50%;
    width: 48px;
    height: 48px;
}

.label-id-search-popover {
    position: absolute;
    display: flex;
    flex-direction: column;
    left: 50%;
    bottom: 50%;
    transform: translate(-50%, 0%);
    background: #f0f0f0;
    /* border: 2px solid #333; */
    border-radius: 8px;
    padding: 1em;
    z-index: 100;
    width: 80%;
    max-width: 90vw;
    justify-items: stretch;
}

.label-id-search-popover ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.label-search-result {
    width: 100%;
    text-align: left;
    font-size: 1.2em;
    padding: 0.5em;
    margin-bottom: 0.2em;
    background: #eee;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    text-wrap: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.label-search-result:hover {
    background: #ddd;
}

.label-id-input {
    font-size: 1.5em;
    padding: 0.3em 0.5em;
    border-radius: 4px;
    outline: none !important;
    box-shadow: none !important;
    /* Remove Firefox's default selection border */
    border: none;
}

.messages-to-send-popover {
    position: absolute;
    top: 10px;
    z-index: 10;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    animation: box-terminator-slide-in-down ease-in-out 0.2s forwards;
}

.messages-to-send-popover.fading-out {
    animation: box-terminator-slide-out-up ease-in-out 0.2s forwards;
}

.messages-to-send-popover svg {
    width: 30px;
    height: 30px;
    margin-top: 4px;
}

.messages-to-send-popover ul {
    padding: 0px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 400px;
}

@media (max-width: 600px) {
    .messages-to-send-popover ul {
        min-width: unset;
        width: 95%;
    }

    .box-terminator-popover > div {
        min-width: unset;
        width: 95%;
    }
}

.messages-to-send-popover li {
    display: flex;
    align-items: center;
    background: white;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 5px 10px;
    gap: 15px;
    height: 52px;
    box-sizing: border-box;
    /* min-width: 400px; */
    /* max-width: 90vw; */
    box-shadow:
        0px 0.1px 0.3px rgba(0, 0, 0, 0.034),
        0px 0.3px 0.7px rgba(0, 0, 0, 0.048),
        0px 0.5px 1.3px rgba(0, 0, 0, 0.06),
        0px 0.9px 2.2px rgba(0, 0, 0, 0.072),
        0px 1.7px 4.2px rgba(0, 0, 0, 0.086),
        0px 4px 10px rgba(0, 0, 0, 0.12);
}

/* Settings page */
.settings-row {
    display: flex;
    align-items: center;
    padding: 1rem 0.5rem;
    border-bottom: 1px solid #e5e5e5;
    gap: 1rem;
}

.settings-row-left {
    flex: 0 0 33%;
}

.settings-row-right {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.settings-input-wrapper {
    flex: 1;
}

.settings-label {
    text-transform: capitalize;
}

.settings-save-button-container {
    flex: 0 0 90px;
    text-align: right;
}

.settings-status-message {
    flex: 0 0 80px;
}

.settings-category-heading {
    text-transform: capitalize;
}