/*
	POPUPS / DIALOGS ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
*/
.popup {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    min-height: 100vh;
    z-index: 20;
}

.popup.confirm-logout {
    display: flex;
    justify-content: center;
    align-items: center;
}

.popup:before {
    content: ' ';
    background: rgba(221,226,232,0.9);
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    min-height: 100%;
    z-index: -1;
}

.popup > div {
    position: fixed;
    top: 10%;
    right: 10%;
    left: 10%;
    min-height: 80vh;
    background: #ffffff;
}

.popup.confirm-logout > div {
    height: 50vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.popup > div > div {
    padding: 10px !important;
}

.popup.fullscreen > div {
    top: 0;
    right: 0;
    left: 0;
    min-height: 100vh;
}

.popup > div > h2 {
    position: relative;
    background: #202020;
    color: #ffffff;
    padding: 10px;
    margin-bottom: 0;
    height: 32px;
}

.popup > div > h2 > button.close {
    position: absolute;
    right: 0;
    top: 0;
    height: 52px;
    width: 52px;
    padding: 0;
    justify-content: center;
}

.popup > div > h2:before {
    font-family: Material Icons;
    content: 'edit';
    position: relative;
    top: -2px;
    font-size: 1.4em;
    vertical-align: middle;
    padding-right: 10px;
}

.popup.overlay.security > div > h2:before {
    content: 'security';
}

.popup.overlay.info > div > h2:before {
    content: 'info';
}

.popup.overlay.delete > div > h2:before {
    content: 'delete';
}

.popup.overlay.warning > div > h2:before {
    content: 'warning';
}

.popup.overlay.session-timeout > div > h2:before {
    content: 'timer_off';
}

/*
	TOOLBARS -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
*/
.toolbar {
    display: flex;
    flex-wrap: wrap;
}

.toolbar.owned-by-title {
    position: absolute;
    right: 10px;
    top: 10px;
}

.popup .toolbar.owned-by-title {
    right: 60px;
    top: 5px;
}

.popup > div > .toolbar {
    background: #404040;
}

.toolbar li {
    display: inline-flex;
    margin-right: 10px;
}

.toolbar li:last-child {
    margin-right: 0;
}

/*
	UBIQUITOUS JQUI -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
*/
input[type=text].hasDatepicker + .icon_datepicker {
    padding-left: 5px;
}

.ui-datepicker select.ui-datepicker-month,
.ui-datepicker select.ui-datepicker-year {
    width: 50%;
    padding: 0.2em;
}

.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
    display: flex;
    justify-content: center;
    align-items: stretch;
}

.ui-datepicker .ui-datepicker-prev span, .ui-datepicker .ui-datepicker-next span {
    background-image: unset !important;
    text-indent: unset !important;
    left: unset !important;
    top: unset !important;
    margin: 0 !important;
    position: static !important;
    width: unset !important;
    height: unset !important;
}

.ui-datepicker .ui-datepicker-prev span:before,
.ui-datepicker .ui-datepicker-next span:before {
    font-family: Material Icons;
    font-size: 2em;
}

.ui-datepicker .ui-datepicker-prev span:before {
    content: 'chevron_left';
}

.ui-datepicker .ui-datepicker-next span:before {
    content: 'chevron_right';
}

.ui-datepicker-container {
    white-space: nowrap;
}


@media screen and (max-width: 1024px) { 
    .popup > div > h2 
    {
        height:unset;
    }

    .generic_pager > .pager_info {
        display:none;
    }
}

/*
	ANIMATIONS ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
*/
@keyframes waiter {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg);
    }
}

.waiter:before {
    display: inline-block;
    font-family: Material Icons;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -webkit-animation: fa-spin 2s infinite linear;
    animation: waiter 2s infinite linear;
    content: 'camera';
    font-style: normal;
    font-weight: normal;
}

.waiter.wait-large:before,
.popup .waiter:before {
    font-size: 64px;
}

.waiter.content-wait {
    text-align: center;
    margin: 40px;
}

.waiter.content-wait:before {
    font-size: 64px;
}

table.waiting {
    overflow: hidden;
}

table.waiting thead:before {
    content: ' ';
    position: absolute;
    background: rgba(255, 255, 255, 0.5);
    z-index: 1;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

.waiting .waiter-bar,
.waiter-bar.waiting {
    background: linear-gradient(315deg, #9e7ddb, #ffffff 0%, #7d55c7);    
    animation: PagerWaitingAnimation 1s ease infinite;
    height: 15px;
}

.waiting .pager-row .waiter-bar {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 8px;
}

input[type=text].waiting {
    background-image: url('data:image/gif;base64,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');
    background-repeat: no-repeat;
    background-size: 24px 24px;
    background-position: right 10px center;
    transition: none;
}

.loading {
    position: relative;
    display: inline-flex;
    box-sizing: content-box !important;
}

.loading:empty {
    width: 4.25em;
    padding: 10px;
    font-size: 64px;
}

.popup .loading.loading-ui{
    font-size: 20px;
    display: inline-flex;
    width: calc(100% - 20px);
    border: 1px solid #909090;
    border-radius: 3px;
    padding: 10px;
    margin: 10px 0;
}

.element-loading-placeholder {
    display: none;
    position: absolute;
}

.element-loading .element-loading-placeholder {
    background: rgba(255, 255, 255, 0.9);
    width: 100%;
    z-index: 1;
    height: 100%;
    display: flex;
    align-items: center;
    top: 0;
    box-sizing: border-box;
}

.loading:empty:before,
.element-loading .element-loading-placeholder:before {
    content: 'Loading';
}

.loading.no-message:before {
    content: '';
}

.loading:after,
.element-loading .element-loading-placeholder:after {
    content: '...';
    animation: LoadingAnimation 2s linear infinite;
    overflow: hidden;
    flex-shrink: 0;
    flex-grow: 0;
}


/* ================================================================================================================================================================ */
/* ERRORS */
/* ================================================================================================================================================================ */
.efs {
    padding: 0 !important;
    margin: 0 !important;
    flex-basis: 100%;
}

.efs:empty {
    display: none;
}

.ef {
    display: none;
    padding: 6px 12px !important;
    background: #c30052;
    color: #ffffff;
    border-radius: 25px;
    margin-bottom: 0.25em;
}

.wf {
    display: none;
    padding: 0.5em !important;
    background: rgb(249, 197, 0);
    color: #000000;
    border-radius: 2px;
    margin-bottom: 0.25em;
}

.if {
    display: none;
    padding: 5px !important;
    background: #4f1eff;
    color: #ffffff;
    border-radius: 2px;
    margin-bottom: 5px;
}

.if:before {
    font-family: "Font Awesome 5 Pro";
    content: '\f05a';
    padding-right: 10px;
}

.ef.static,
.wf.static,
.if.static {
    display: inherit;
}

/*
    ========================================================================================================================================================================================
*/
.flash-message {
    position: fixed;
    top: 0;
    text-align: center;
    font-size: 24px;
    border: 1px solid #efe04c;
    border-top: none;
    background: #fff900;
    z-index: 1000;
    transition: all ease 3s;
    opacity: 0;
    width: 800px;
    margin-left: -400px;
    left: 50%;
    height: 0;
    overflow: hidden;
}

.flash-message > * {
    display: inline-block;
    padding: 33px;
}

.flash-message.show {
    transition: all ease 0.2s;
    opacity: 1;
    height: 100px;
}

.flash-message:before {
    font-family: 'Material Icons';
    content: '\e88e';
    padding-right: 20px;
    font-size: 48px;
    vertical-align: middle;
}

/*
    ========================================================================================================================================================================================
*/
table .pager-row {
    background: unset;
}

table .pager-row td {
    position: relative;
}

.generic_pager {
    display: flex;
    align-items: stretch;
}

.waiting .generic_pager {
    visibility: hidden;
}

.generic_pager > .pager_action, .generic_pager > .pager_info {
    display: inline-flex;
    align-items: center;
}

.generic_pager > .pager_action:before {
    font-family: 'Material Icons';
    font-size: 24px;
    font-weight: 800;
}

.generic_pager > .pager_first:before {
    content: 'first_page';
}

.generic_pager > .pager_prev:before {
    content: 'chevron_left';
}

.generic_pager > .pager_next:before {
    content: 'chevron_right';
}

.generic_pager > .pager_last:before {
    content: 'last_page';
}

.generic_pager input[type=text] {
    font-size: 18px !important;
    background: rgba(255, 255, 255, 0.5) !important;
    color: #000000 !important;
    text-align: center;
}

.generic_pager .pager_pages, .generic_pager .pager_total_records {
    margin-right: 10px;
}
/* ================================================================================================================================================================ */
/* ANIMATIONS */
/* ================================================================================================================================================================ */
@keyframes PagerWaitingAnimation {
    0% {
        background: linear-gradient(315deg, #41427f, #ffffff 0%, #41427f)
    }

    10% {
        background: linear-gradient(315deg, #41427f, #ffffff 10%, #41427f)
    }

    20% {
        background: linear-gradient(315deg, #41427f, #ffffff 20%, #41427f)
    }

    30% {
        background: linear-gradient(315deg, #41427f, #ffffff 30%, #41427f)
    }

    40% {
        background: linear-gradient(315deg, #41427f, #ffffff 40%, #41427f)
    }

    50% {
        background: linear-gradient(315deg, #41427f, #ffffff 50%, #41427f)
    }

    60% {
        background: linear-gradient(315deg, #41427f, #ffffff 60%, #41427f)
    }

    70% {
        background: linear-gradient(315deg, #41427f, #ffffff 70%, #41427f)
    }

    80% {
        background: linear-gradient(315deg, #41427f, #ffffff 80%, #41427f)
    }

    90% {
        background: linear-gradient(315deg, #41427f, #ffffff 90%, #41427f)
    }

    100% {
        background: linear-gradient(315deg, #41427f, #ffffff 100%, #41427f)
    }
}

@keyframes fadeInAnimation {
    0% {
        display: none;
        opacity: 0;
    }

    1% {
        opacity: 0;
        display: inherit;
    }

    100% {
        opacity: 1;
        display: inherit;
    }
}

@keyframes fadeOutAnimation {
    0% {
        opacity: inherit;
        display: inherit;
    }

    99% {
        opacity: 0;
        display: inherit;
    }

    100% {
        opacity: 0;
        display: none;
    }
}

@keyframes LoadingAnimation {
    0% {
        width: 0;
    }

    100% {
        width: 1.25em;
    }
}


@keyframes LoadingAnimation2 {
    0% {
        content: '';
    }

    30% {
        content: '.';
    }

    60% {
        content: '..';
    }

    90% {
        content: '...';
    }

    100% {
        content: '...';
    }
}

@media all and (max-width: 1024px) {

    .popup > div {
        top: 5%;
        right: 5%;
        left: 5%;
    }
}