/*
    This file is to show how CSS and other static resources (such as images) can be
    used from a library project/package.
*/

.LookupPopup {
    max-width: 900px;
}

.LookupGrid {
    max-width: 800px !important;
}

.FieldLeftAlign input {
    text-align: left;
}

.FieldRightAlign input {
    text-align: right;
    padding-right: 0.5rem !important;
}

.FieldCenterAlign input {
    text-align: center;
}

.keep-crlf {
    white-space: pre-wrap
}

.input-group .dxbl-text-edit {
    width: inherit;
}

/*Keep content within the body of a modal popup*/
.dxbl-modal-body {
    overflow-y: auto;
}

/*Leave a space between buttons in the footer of a modal popup*/
.dxbl-modal-footer > .btn {
    margin-left: 0.5rem;
}

/*Leave a space between buttons in the footer of a modal popup*/
.dxbl-modal-footer > .dxbl-btn {
    margin-left: 0.5rem;
}

/* Elite Button styles */
button:not(.dxbl-btn-icon-only) .elite-button-container {
    min-width: 1.25rem;
    min-height: 1.25rem;
}

button.dxbl-btn-icon-only .elite-button-container {
    min-width: 1.25rem;
    min-height: 1.5rem;
}

.elite-button-wait-indicator {
}

/* Elite Button with Default Template */
button:not(.dxbl-btn-icon-only) :not(.elite-button-running) .elite-button-content-default {
    padding-left: 0.25rem !important;
    padding-right: 0.25rem !important;
    margin-left: 0.5rem !important;
    margin-right: 0.5rem !important;
}

button:not(.dxbl-btn-icon-only) .elite-button-running .elite-button-content-default {
    margin-left: 0.5rem !important;
}

button.dxbl-btn-icon-only :not(.elite-button-running) .elite-button-content-default {
}

button.dxbl-btn-icon-only .elite-button-running .elite-button-content-default {
    /* We are only displaying an icon so the button size will be small - hide the content so the it's just the wait indicator that's visible */
    display: none !important;
}

/* Elite Button with Custom Template */
button:not(.dxbl-btn-icon-only) :not(.elite-button-running) .elite-button-content-templated {
    padding-left: 0.25rem !important;
    padding-right: 0.25rem !important;
    margin-left: 0.5rem !important;
    margin-right: 0.5rem !important;
}

button:not(.dxbl-btn-icon-only) .elite-button-running .elite-button-content-templated {
    margin-left: 0.5rem !important;
}

button.dxbl-btn-icon-only :not(.elite-button-running) .elite-button-content-templated {
}

button.dxbl-btn-icon-only .elite-button-running .elite-button-content-templated {
    display: none !important;
}

/* Elite Button with large icon */
.elite-button-container svg.fa-xl {
    --dxbl-image-height: 1.5rem !important;
    margin: 0px !important;
}

button.dxbl-btn-icon-only .elite-button-container:has(svg.fa-xl) {
    min-width: 1.65rem;
    min-height: 1.5rem;
}

/* Message Box styles */
:root {
    --messages-colour-red: #dc3545;
    --messages-colour-orange: #EBAD00;
    --messages-colour-blue: #1177d7;
    --messages-colour-green: #28a745;
}

.messagebox-container {
    max-height: 85vh;
}

.messagebox-icon {
    float: left;
    padding-right: 5px;
    padding-bottom: 5px;
    margin-top: -5px;
}

    .messagebox-icon > svg {
        width: 32px;
        height: 32px;
    }

.messagebox-icon-error > svg path {
    fill: var(--messages-colour-red);
}

.messagebox-icon-exclamation > svg path {
    fill: var(--messages-colour-orange);
}

.messagebox-icon-question > svg path {
    fill: var(--messages-colour-blue);
}

.messagebox-icon-information > svg path {
    fill: var(--messages-colour-blue);
}

.messagebox-icon-success > svg path {
    fill: var(--messages-colour-green);
}

.messagebox-text {
    white-space: pre-wrap;
    overflow: auto;
}

/* Message Box set tight margins for mobile screen size */
@media (max-width: 576px) {
    .dxbl-modal > .dxbl-modal-root > .dxbl-popup {
        margin-left: 5px !important;
        margin-right: 5px !important;
        margin-top: 5px !important;
        margin-bottom: 5px !important;
        min-width: calc(100vw - 10px);
    }
}

/* Message Box dynamic width popup based on size indicated in Messages collection Messages */
@media (min-width: 641px) {
    .dxbl-modal > .dxbl-modal-root > .dxbl-popup:has(.messages-w1) {
        max-width: 600px;
    }

    .dxbl-modal > .dxbl-modal-root > .dxbl-popup:has(.messages-w2) {
        max-width: 600px;
    }

    .dxbl-modal > .dxbl-modal-root > .dxbl-popup:has(.messages-w3) {
        max-width: 600px;
    }
}

@media (min-width: 768px) {
    .dxbl-modal > .dxbl-modal-root > .dxbl-popup:has(.messages-w1) {
        max-width: 600px;
    }

    .dxbl-modal > .dxbl-modal-root > .dxbl-popup:has(.messages-w2) {
        max-width: 700px;
    }

    .dxbl-modal > .dxbl-modal-root > .dxbl-popup:has(.messages-w3) {
        max-width: 700px;
    }
}

@media (min-width: 992px) {
    .dxbl-modal > .dxbl-modal-root > .dxbl-popup:has(.messages-w1) {
        max-width: 700px;
    }

    .dxbl-modal > .dxbl-modal-root > .dxbl-popup:has(.messages-w2) {
        max-width: 800px;
    }

    .dxbl-modal > .dxbl-modal-root > .dxbl-popup:has(.messages-w3) {
        max-width: 900px;
    }
}

@media (min-width: 1200px) {
    .dxbl-modal > .dxbl-modal-root > .dxbl-popup:has(.messages-w1) {
        max-width: 700px;
    }

    .dxbl-modal > .dxbl-modal-root > .dxbl-popup:has(.messages-w2) {
        max-width: 800px;
    }

    .dxbl-modal > .dxbl-modal-root > .dxbl-popup:has(.messages-w3) {
        max-width: 1000px;
    }
}

/* Messages Dialog (via MessageBox) styles */
.messages-container-list {
    padding-bottom: 5px;
}

    .messages-container-list ul {
        margin-bottom: 5px;
    }

    .messages-container-list hr {
        margin-top: 5px;
        margin-bottom: 10px;
    }

.messages-title {
    font-size: 1.25em;
    font-weight: bold;
    margin-bottom: 5px;
}

*:not(.alert) > .messages-title-error {
    color: var(--messages-colour-red) !important;
}

*:not(.alert) > .messages-title-warning {
    color: var(--messages-colour-orange) !important;
}

*:not(.alert) > .messages-title-message {
    color: var(--messages-colour-blue) !important;
}

.messages-h1 {
    font-weight: bold;
    margin-bottom: 5px;
}

.messages-h2 {
    font-weight: bold;
    margin-bottom: 5px;
}

.messages-error-text {
    color: var(--messages-colour-red) !important;
}

.messages-warning-text {
    color: var(--messages-colour-orange) !important;
}

.messages-success-text {
    color: var(--messages-colour-green) !important;
}

.messages-message-text {
    color: var(--messages-colour-blue) !important;
}

.messages-message-body {
    margin-bottom: 5px;
}

.messages-message-exception-detail {
    display: block;
    font-family: monospace;
    font-size: 0.85em;
    white-space: pre;
    margin: 1em 0;
    padding: 0.75em;
    overflow-x: auto;
    background: linear-gradient(90deg, rgba(250,250,250,1) 0%, rgba(250,250,250,1) 0%, rgba(255,255,255,1) 100%);
}

/* Toast notification styles */
.toast {
    display: none;
    color: #fff;
    z-index: 1;
    position: fixed;
    min-width: 200px;
    max-width: 350px;
    bottom: 2rem;
    border-radius: 1rem;
    right: 2rem;
    padding-right: 0.5rem;
}

.toast-icon {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 1rem;
    font-size: 1.75rem;
}

.toast-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding-left: 1rem;
}

    .toast-body p {
        margin-bottom: 0;
    }

.toast-visible {
    display: flex;
    flex-direction: row;
    animation: fadein 1.5s;
    animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
    opacity: 1;
}

@keyframes fadein {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* CSS to display attachment thumbnails */
.elite-attachment-image-thumbnail {
    cursor: pointer;
    max-width: 100%;
}

.elite-attachment-fullsize {
    max-width: inherit;
    height: 100%;
}

.elite-attachment-fullsize-image {
    display: block;
    margin: auto;
}

/* CSS to adjust the padding round both the <td> and the <button> when an EliteGridButton is placed inside a grid */
td > .elite-grid-btn {
    padding: 5px 15px 5px 15px;
    border-width: 0px;
}

td:has(> .elite-grid-btn) {
    padding: 0px !important;
}