/* #region modal */
.popup-modal {
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9998; /** 05-09-2022: reduced from 9999 to 9998 to be 1 behind loader-modal */
    max-height: 100vh;
}
.popup-modal.modal { background: rgba(0,0,0,0.25); }
.popup-modal, .popup-modal > .dimmer {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
.popup-modal > .dimmer { z-index: -1; }

/* have to re-enable pointer events on children when you disable pointer events on parent */
.popup-modal:not(.modal) > .popup { pointer-events: auto; }
/* allowing click through when not modal */
.popup-modal:not(.modal), .popup-modal:not(.modal) > .dimmer { pointer-events: none; }
/* #endregion modal */

/* #region popup */
.popup-modal > .popup {
    background: var(--color-text);
    background-size: 100% 100%;
    border-radius: 6px;
    position: relative;
    top: 3em;
    overflow-y: hidden; /* important: redirect all scrolling to body */
    -webkit-box-shadow: 0px 5px 15px 5px rgba(0,0,0,0.25);
    box-shadow: 0px 5px 15px 5px rgba(0,0,0,0.25);
    max-height: 100%;
}
@media screen and (max-height: 900px) {
    /* when screen height is smaller, don't push popup down by default */
    .popup-modal > .popup { top: 0; }
}

.popup-modal:not(.full-screen) > .popup {
    width: 25em;
}

.popup-modal:not(.full-screen):not(.large):not(.medium) .popup {
    max-height: calc(100vh - 6em);
}

@media screen and (max-width: 992px) {
    .popup-modal:not(.full-screen) > .popup {
        width: 25em;
    }
}
/* #endregion popup */


/* #region positioning */
/* #region full screen */
.popup-modal.full-screen:not(.mobile) .popup {
    border-radius: 0;
    margin: 0;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    /*margin: auto; 10-26-22: this was allow title-search popups to shrink when page height was small (or zoomed in)*/
}
.popup-modal.full-screen:not(.mobile) .header {
    border-radius: 0;
}

/* only allowing mobile popups into full-screen when screen is mobile sized */
@media screen and (max-width: 500px) {
    .popup-modal.full-screen.mobile .popup {
        border-radius: 0;
        margin: 0;
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        margin: auto;
    }
    .popup-modal.full-screen.mobile .header .btn-minimize { display: none; }
    .popup-modal.full-screen.mobile .header { border-radius: 0; }
}
/* hiding max/min buttons for mobile popups on non-mobile screen */
@media screen and (min-width: 501px) {
    .popup-modal.mobile > .popup > .header > .btn-maximize, .popup-modal.mobile > .popup > .header > .btn-minimize {
        display: none;
    }
    .popup-modal.mobile > .popup {
        width: 25em;
    }  

    /* capping height to emulate a mobile screen shape (don't want it super tall and skinny) however, only set this when device height is taller, otherwisse max-height should be 100% (default) and cause scroll */
    @media screen and (min-height: 768px) {
        .popup-modal.mobile > .popup {
            max-height: 700px;
        }  
    }
}

/* #endregion full screen */
/* #region top */
.popup-modal.top {
    align-items: flex-start;
    padding: 1em; /*4.5em 1em 1em 1em;*/
}
/*@media only screen and (min-device-width: 768px) {
    .popup-modal.top {
        padding-left: 5.5em; /* moving right for side-bar*
    }
}*/
/* #endregion top */
/* #endregion positioning */



/* #region header */
.popup > .header {
    background: var(--color-text);
    color: var(--color-text-text);
    font-size: 1.5em;
    user-select: none;
    display: flex;
    grid-column-gap: 0.5em;
    padding: 0.5em;
    border-radius: 6px 6px 0 0; /* NOTE: radius is necessary on both popup AND header. When popup allows overflow, the header escapes the container's radius */
}

.popup-modal .header input {
    color: var(--color-text);
}

/* #region mouse grab */
.popup-modal:not(.full-screen) > .popup.ui-draggable:not(.ui-draggable-dragging) > .header {
    cursor: grab;
}

.popup-modal:not(.full-screen) > .popup.ui-draggable-dragging {
    cursor: grabbing;
}
/* #endregion mouse grab */



.popup-modal.error .popup > .header {
    background: var(--color-error);
    color: var(--color-error-text);
}

/* #region header buttons */
.popup > .header .btn-icon {
    border-radius: 6px;
    padding: 0.1em;
    background: var(--color-accent);
    border: 2px solid var(--color-accent);
    color: var(--color-accent-text);
    position: relative;
}
.popup > .header .btn-icon.success {
    background: var(--color-success);
    border-color: var(--color-success);
    color: var(--color-success-text);
}
.popup > .header .btn-icon.error {
    background: var(--color-error);
    border-color: var(--color-error);
    color: var(--color-error-text);
}

/* when title bar is same color as button, buttons need inverted border to contrast */
.popup-modal.error .popup > .header > .btn-icon.error { border-color: var(--color-error-text); }

/* minimize/maximize */
@media screen  and (max-device-width: 480px) {
    .popup > .header > .btn-icon { font-size: 1.25em; }
}


@media screen and (hover:hover) {
    .popup > .header > .btn-icon:not([disabled]):hover { border-color: var(--color-accent-text); }
    .popup > .header > .btn-icon.success:not([disabled]):hover { border-color: var(--color-success-text); }
    .popup > .header > .btn-icon.error:not([disabled]):hover { border-color: var(--color-error-text); }    

    /* hovering applies transparent white overlay */
    .popup > .header > .btn-icon:not([disabled]):hover:after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(255, 255, 255, 0.2);
        border-radius: 6px;
    }

}


/* #endregion header buttons */

/* #endregion header */

/* #region body */
.popup > .body {
    padding: 0.5em;                     /* default: pad horizontally and vertically */
    min-height: 0;
    background: var(--color-container);
}
@media screen and (max-device-width: 480px) {
    .popup > .body {
        font-size: 1.25em;
    }
}
.popup > .body:empty {
    /*padding-top: 0;*/
    display: none;
}
.popup-modal.pad-horiz .popup > .body {
    padding: 0 0.5em;                   /* pad = "horizontal" -> only pad horizontally */
}
.popup-modal.pad-vert .popup > .body {
    padding: 0.5em 0;                   /* pad = "vertical" -> only pad vertically */
}
.popup-modal.pad-top .popup > .body {
    padding: 0.5em 0 0 0;
}
.popup-modal.pad-none .popup > .body {
    padding: 0; /* pad = "none" -> no pad */
}
.popup-modal.pad-small .popup > .body {
    padding: 0.25em;
}


/* #region overflow */
/* this allows dropdowns and quill popups to escape container... but ONLY when not full screen (this includes mobile fullscreen */
.popup-modal.overflow:not(.full-screen) .popup, .popup-modal.overflow:not(.full-screen) .popup > .body {
    overflow: visible;
}
@media screen and (min-width: 501px) {
    /* only do for mobile-fullscreen when not in mobile-fullscreen */
    .popup-modal.overflow.mobile.full-screen .popup, .popup-modal.overflow.mobile.full-screen .popup > .body {
        overflow: visible !important;
    }
}
/* #endregion */

/* #endregion body */

/* #region footer */
.popup .footer:not(:empty) {
    padding: 0.5em; /* 0 0.5em 0.5em 0.5em;*/
    border-top: 1px solid var(--color-header-border);
}
.popup-modal.pad-none .footer:not(:empty) {
    padding-top: 0.5em;
}
.popup .footer.separated:not(:empty) {
    padding: 0.5em;
    border-top: 1px solid var(--color-text);
}

.popup .footer {
    display: flex;
    align-items: center;
    padding-top: 0;
    background: var(--color-container);
}

    /* #region footer buttons */
    .popup .footer button {
        flex-grow: 100;
        flex-basis: 50%;
        color: white;
        outline: none;
        border: none;
        border-radius: .25em;
        height: 2.7272727em; /* 3em / 1.1em */
        display: flex;
        align-items: center;
        justify-content: center;
        text-transform: uppercase;
        font-size: 1.1em;
        font-weight: bold;
    }

        .popup .footer button:disabled {
            opacity: 0.75;
        }

        .popup .footer button.ok {
            background: var(--color-success);
            border: 1px solid var(--color-success);
        }
        .popup .footer button.cancel {
            background: var(--color-error);
            border: 1px solid var(--color-error);
        }
        .popup .footer button.cancel.accent {
            background: var(--color-accent);
            border: 1px solid var(--color-accent);
        }
        @media screen and (hover:hover) {
            .popup .footer button.ok:not(:disabled):hover {
                background: transparent;
                color: var(--color-success);
            }
            .popup .footer button.cancel:not(:disabled):hover {
                background: transparent;
                color: var(--color-error);
            }
            .popup .footer button.cancel.accent:not(:disabled):hover {
                color: var(--color-accent);
            }
        }
    /* #endregion footer buttons */
/* #endregion footer */


/* #region size */

@media screen and (min-width: 501px) {
    .popup-modal.medium > .popup {
        width: 35em;
        max-height: min(60em, 100%);
    }
}


.popup-modal.large:not(.full-screen) > .popup {
    width: 992px;
    height: 100%;
    max-height: 1080px;
}

/* NOTE: 1083 = 992 + sidebar width + padding */
@media screen and (max-width: 1083px) {
    /* large popup on small screen => force full screen (hide max/min button) */
    .popup-modal.large.top {
        padding: 0;
    }

    .popup-modal.large:not(.full-screen) .popup {
        width: 100% !important;
        margin: 0;
        min-height: 100%;
        left: 0 !important; /* must be important to override drag position (if dragged, top/left will be set on the element itself) */
        top: 0 !important;
        border-radius: 0;
    }

    .popup-modal.large:not(.full-screen) > .popup > .header {
        border-radius: 0;
    }

    .popup-modal.large .btn-maximize, .popup-modal.large .btn-minimize {
        display: none;
    }

    .popup-modal.large .popup.ui-draggable > .header {
        /* since large popup becomes full screen on smaller screen, disable drag mouse */
        cursor: auto !important;
    }
}
/* #endregion */

@media screen and (max-width: 767px) {
    .popup-modal:not(.full-screen) .popup {
        width: 25em;
    }
}

@media screen and (max-width: 540px) {
    .popup-modal:not(.full-screen) .popup {
        top: 0;
        width: 100%;
    }
    .popup > .header > .flex-fill {
        padding-left: 0.25em;
    }
}
@media screen and (max-device-width: 540px) {
    .popup > .header > .btn-icon, .popup > .header > .btn-icon.btn-aux {
        padding: 0.25em;
    }
}


/* #region re-usable popup types */
/* #region prompt */
.popup-prompt .prompt-message {
    text-align: center;
}
.popup-prompt .prompt-message.error {
    color: var(--color-error);
}
/* #endregion prompt */

/* #region email popup */
.email-popup .body iframe {
    border: 1px solid var(--color-accent);
    border-radius: 0.25em;
    display: flex;
    flex-grow: 100;
}
/* #endregion */

/* #region error popup */
.error-popup .body iframe {
    border: 1px solid var(--color-error);
    border-radius: 0.25em;
    margin-top: 0.5em;
    display: flex;
    flex-grow: 100;
}
.error-popup h3 {
    margin-top: 0;
    margin-bottom: 0.25em;
}
/* #endregion */

/* #region attachments */

/* #region attachment popup */
.attach-popup.popup-modal:not(.large):not(.full-screen) > .popup { width: 27.15em; }
.attach-popup .popup > .body {
    position: relative;
    grid-row-gap: 0.5em;
    min-height: 10em;
}
.attach-popup .body .loader-modal {
    position: absolute;
    background: rgba(0, 0, 0, 0.25);
}
.attach-popup .popup > .body .attch.pdf .image { background-image: url(/graphics/pdf.png); }

/* #region drag drop */
.attach-popup .drag-preview {
    border: 2px dashed var(--color-auxiliary);
    border-radius: 4px;
    color: var(--color-auxiliary);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5em 0;
    font-size: 1.5em;
    flex-direction: column;
    flex-grow: 100;
    background: rgba(0, 0, 0, 0.05);
}
/* mobile devices can't drag/drop. (i'd assume hover and drag/drop go hand in hand so i think this media query should suffice for detecting drag/drop funcitonality) */
@media not screen and (hover:hover) {
    .attach-popup .drag-preview { display: none; }
}
.attach-popup .drag-preview i { font-size: 2em; }
.attach-popup .drop {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.5);
    padding: 0.25em;
    color: white;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    font-size: 2em;
    font-style: italic;
    display: none;
    pointer-events: none !important; /* without this, it will immediately cause a drag leave event because it pops up in front of the body */
}
.attach-popup .drop::before {
    content: "";
    position: absolute;
    top: 0.25em;
    left: 0.25em;
    bottom: 0.25em;
    right: 0.25em;
    border: 2px dashed white;
    border-radius: 4px;
}
.attach-popup .drop .icon { 
    position: relative;
}
.attach-popup .drop i {
    position: absolute;
    font-size: 2em;
    bottom: 0;
    margin-left: -0.5em;
}
.attach-popup .drop .arrow {
    animation: MoveUpDown 1.5s linear infinite;
    color: var(--color-accent);
    font-size: 1.25em;
    opacity: 0;
}

@keyframes MoveUpDown {
    0%, 100% {
        bottom: 0.55em;
        opacity: 0;      
    }
    45% { opacity: 1; }
    50% { bottom: 0.33em; }
    55% { opacity: 1 }
}
/* when drag is initiated, preview goes away and drop appears */
.attach-popup .popup > .body.dragging .drag-preview { display: none; }
.attach-popup .popup > .body.dragging .drop { display: flex; }

/* #endregion */




/* #region thumbnail grid */
.attach-popup .thumb-grid {
    display: flex;
    flex-wrap: wrap;
    grid-gap: 0.5em;
}
.attach-popup .thumb-grid:empty { display: none; }
.attach-popup .doc-group {
    background: var(--color-header);
    padding: 0.5em;
    border-radius: 4px;
    border: 1px solid var(--color-stripe-border);
}
/** readonly (when size='large'): full-width groups, and "None Found..." empty caption */
.attach-popup.popup-modal:not(.large) .doc-group { width: 100%; }
.attach-popup.popup-modal:not(.large) .thumb-grid:empty:after {
    content: "None...";
    text-align: center;
    margin: 0 auto;
}
.attach-popup h3 { margin: 0 0 0.25em 0; }
.attach-popup .attch, .attach-popup .btn-add { width: 8em; }
@media only screen and (max-width: 600px) {
    .attach-popup .doc-group { width: 100%; }
    .attach-popup .attch, .attach-popup .btn-add  { width: calc(33.333% - 0.34em); }
}
/* #endregion */

/* #region triangle-button */
.triangle-button {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    outline: none;
    /*border-radius: 0.25em;
    border: 0.1rem solid #0080ff;*/
    padding: 0;
    margin: 0;
    background: var(--color-container);
}

.triangle-button > * {
    position: absolute;
    border: none;
    outline: none;
    width: 141.42%; /* sqrt(2) */
    height: 141.42%;
    top: 0;
    background: transparent;
    color: var(--color-text);
}

.triangle-button > button {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    transform-origin: 0 0;
    padding: 10%;
}

.triangle-button > button:hover {
    background: #0080ff !important;
    color: white !important;
}

.triangle-button > button:first-child {
    border-top: 1px solid var(--color-accent);
    transform: rotate(45deg);
    flex-direction: column;
}

.triangle-button > .camera-btn > i {
    transform: rotate(-45deg); /* undoing parent rotation */
}

.triangle-button > button:last-child {
    border-left: 1px solid var(--color-accent);
    transform: rotate(-45deg);
}


/* #endregion triangle-button */
/* #endregion attachment popup */

/* #region attachment scale popup */
.attach-scale-popup .scale-slider {
    font-size: 2.5em;
    -webkit-appearance: none;
    width: 100%;
    height: 0.5em;
    border-radius: 1em;
    background: var(--color-header);
    outline: none;
    opacity: 0.7;
    -webkit-transition: 0.2s;
    transition: opacity 0.2s;
    overflow: visible !important;
    margin: 0.4em 0 0.35em 0
}

    .attach-scale-popup .scale-slider::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 1em;
        height: 1em;
        border-radius: 50%;
        background: var(--color-accent);
        cursor: pointer;
    }

        .attach-scale-popup .scale-slider::-webkit-slider-thumb::before {
            content: "HEY";
        }

    .attach-scale-popup .scale-slider:-moz-range-thumb {
        width: 25px;
        height: 25px;
        border-radius: 50%;
        background: var(--color-accent);
        cursor: pointer;
    }
/* #endregion attachment scale popup */

/* #region attachment viewer popup */

    /* #region TODO: scope this css to attach viewer popup only... and remove things that are not longer relevent */
.attch-img {
    display: flex;
    flex-direction: column;
    min-height: 0;
    border: 1px solid var(--color-accent);
    border-radius: .25em;
    z-index: 1; /* needed prevent pdf pages from overlapping rounded edge (overflow hidden is not enough, but also necessary) */
    overflow: hidden;
    position: relative; /* necessary for loader to be centered */
}
.attch-img audio {
    /* cant remove the roundness of the default audio element... so matching the background to hide the roundness */
    background-color: #f1f3f4;
    width: 100%;
}

.attch-img .loader { font-size: 5em; }

.attch-img .resolution, .image-editor-popup .popup > .body .resolution {
    text-align: center;
    background: var(--color-header);
    position: absolute;
    bottom: 0;
    width: 100%;
}


.pdf-container {
    display: flex;
    flex-direction: column;
    flex-grow: 100;
    overflow: hidden;
    position: relative;
}
.pdfViewer-wrapper-wrapper {
    position: relative;
}
.pdfViewer-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: auto;
}
.pdfViewer-wrapper, .pdfViewer {
    background: #525659;
}


.pdfViewer .page {
    /*height: 100% !important; /* enforce full height to allow scrolling (necessary for lazy load paging to work) */
    /*margin: 0 auto !important; /* removing weird tiny margin from pdf_viewer.css that was causing unnecessary ~1 pixel scroll...if necessary replace this with padding on the container because that would make so much more sense */

    margin: 0 auto;
    border: none !important;
    
}
.pdfViewer .page:not(:last-child) { margin-bottom: 1em; }

.pdfViewer .page .textLayer {
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

.pdf-controls {
    flex-shrink: 0;
    display: flex;
    background: #323639;
    color: #f1f1f1;
}

.pdf-controls button {
    font-size: 1.5em;
    padding: 0.5em;
}




.attach-popup .image-wrapper {
    width: 100%;
    position: relative;
    padding-top: 100%;
    border-radius: .25em;
    overflow: hidden;
    /*border: 1px solid var(--color-accent);*/
    border: 6px solid #fff;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
}

.attach-popup .image-wrapper input { display: none; }

.attach-popup .image-wrapper i {
    justify-content: center;
    font-size: 3em;
}
.attach-popup .image-wrapper .text-cutoff {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.25);
    color: white;
    padding: 0 0.25em;
    text-align: center;
}

.attach-popup .image {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    background-color: white;
}

.attach-popup .image i { font-size: 3em; }

.attach-popup .image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-size: cover;
    width: 100%;
    opacity: 0;
}

.attachment-viewer {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 99999;
    width: 100%;
    background: rgba(0,0,0,0.9);
    padding: 1em;
}

.attachment-viewer-image {
    width: 100%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    z-index: -1;
}

.attachment-viewer .icon-button {
    float: left;
    width: 50%;
}

    .attachment-viewer .icon-button i {
        font-size: 2em;
        color: white !important;
    }

.btn-attch-edit {
    justify-content: center;
}

.btn-attch-remove {
    justify-content: flex-start !important;
}

.btn-attch-close {
    display: inline;
    text-align: right;
}

/*.attachment-desc {
    background: rgba(255, 255, 255, 0.75);
    border: none;
    border-radius: .5em;
    font-size: 1.25em;
    padding: 0 .25em;
    outline: none;
}*/


    /* #endregion TODO */


/* #region prev/next buttons */
.attach-viewer-popup .body > button {
    position: absolute;
    font-size: 3em;
    color: white;
    background: rgba(0,0,0,0.4);
    border-radius: 100%;
    width: 1em;
    height: 1em;
    top: calc(50% - 0.5em);
    z-index: 99;
}
.attach-viewer-popup .body > button:hover { background: rgba(0, 0, 0, 0.75); }
.attach-viewer-popup .body > button:first-child { left: 0.75em; }
.attach-viewer-popup .body > button:last-child { right: 0.75em; }

.attach-viewer-popup.azure .attch-img {
    border: none;
    border-radius: 0;
}
/* #endregion */
/* #endregion attachment viewer popup */
/* #endregion attachments */

/* #region error popup */
.error-popup .bug {
    font-size: 3em;
    margin-right: 0.15em;
    color: var(--color-error);
}
.error-popup .popup > .body h1 {
    margin-top: 0;
    margin-bottom: 0;
    font-size: 1.5em;
}
.error-popup .popup > .body h2 {
    margin-top: 0;
    margin-bottom: 0;
    font-size: 1.15em;
}

/* #endregion error popup */

/* #region search popup */
@media screen and (min-width: 501px) {
    .popup-modal.search-popup > .popup {
        min-height: 50em;
    }
}
.popup-modal.search-popup > .popup > .body > .filters:not(:empty) {
    padding: 0.5em;
}
.popup-modal.search-popup .scroller {
    overflow: hidden auto;
}
/*.popup-modal.search-popup .filters .input-wrapper.with-label {
    margin-top: 0.5em; /* tightening spacing to make more room for search content *
}*/
.popup-modal.search-popup .filters.no-header {
    border-bottom: 1px solid var(--color-text);
}
/*.popup-modal.search-popup {
    min-height: 45em;
    overflow-y: hidden;
}*/
@media screen and (max-device-width: 480px) {
    .popup-modal.search-popup .popup > .body {
        font-size: 1.25em;
    }
}
.popup-modal.search-popup > .popup > .body .striped {
    cursor: pointer;
}
@media (hover:hover) {
    .popup-modal.search-popup > .popup > .body .striped:hover {
        background: var(--color-accent-75);
        color: var(--color-accent-text);
    }
    .popup-modal.search-popup > .popup > .body .striped:hover mark {
        background: var(--color-accent-text) !important;
        color: var(--color-accent) !important;
    }
    .popup-modal.search-popup > .popup > .body .striped:hover a {
        color: var(--color-accent-text) !important;
    }
}


.popup-modal.search-popup .header .input-wrapper {
    margin: 0 0.25em 0 0;
    flex-grow: 1;
}

/* #endregion search popup */

/* #region title-search popup */
.title-search-popup .header input { color: var(--color-text); }
/* #endregion */

/* #region info popup */
@media screen and (max-device-width: 480px) {
    .popup-modal.info-popup .popup > .body {
        font-size: 1.25em;
    }
    .popup-modal.info-popup .popup .sticky-header {
        font-size: 0.75em;
    }
}
/* #endregion  */

/* #region notifications */
.popup-notifications {
    position: absolute;
    top: 4em;
    align-self: center;
    z-index: 999999;
    padding: 0 0.5em;
    margin-left: 2.25em;       /* offset for side menu */
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
}
@media only screen and (max-device-width: 767px) {
    .popup-notifications {
        top: 6.5rem;
        margin-left: 0; /* in mobile, left side-menu is collapsed, so we don't provide extra left margin */
    }
}

.popup-notifications > div {
    min-width: 10em;
    max-width: 600px;
    background: var(--color-accent);
    color: var(--color-accent-text);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 0.25em;
    padding: 1em;
    margin-bottom: 0.5em;

}

    .popup-notifications > div.success {
        background: var(--color-success) !important;
        color: var(--color-success-text) !important;
    }
    .popup-notifications > div.error {
        background: var(--color-error) !important;
        color: var(--color-error-text) !important;
    }
/* #endregion notifications */

/* #region image scaler popup */
.image-editor-popup .popup > .body .control-panel {
    padding: 0.5em 0.25em 0 0.25em
}
.image-editor-popup .popup > .body .canvas-container {
    margin: 0.5em;
    width: calc(100% - 1em);
    padding-top: calc(100% + 0.25em);
    border: 1px solid var(--color-accent);
    border-radius: 0.25em;
    position: relative;
    overflow: hidden;
}
.image-editor-popup .popup > .body canvas {
    margin-bottom: 1.25em;
    position: absolute;
    top: 0;
    width: 100%;
}
.image-editor-popup .popup > .body .resolution {
    height: 1.25em;
    line-height: 1em;
    align-items: center;
    display: flex;
    justify-content: center;
}

/* #region rounded */
.image-editor-popup .popup > .body .canvas-container.rounded {
    padding-top: calc(100% + 1em);
    border: none;
}

    .image-editor-popup .popup > .body .canvas-container.rounded canvas {
        border-radius: 100%;
        border: 1px solid var(--color-accent);
    }
    .image-editor-popup .popup > .body .canvas-container.rounded .resolution {
        background: transparent;
    }
/* #endregion */

.icon-upload-popup .popup > .body label {
    cursor: pointer;
}
.icon-upload-popup .popup > .body input[type='file'] {
    display: none;
}
/* #endregion */

/* #region PDF Popup */
.popup-modal.pdf-popup:not(.full-screen) > .popup {
    height: 100%;
    top: 0;
}
.popup-modal.pdf-popup > .popup iframe {
    flex-grow: 100;
    border: none;
    outline: none;
}
.popup-modal.pdf-popup > .popup .pdfViewer {
    background: var(--color-header-border);
}

@media screen and (min-width: 961px) {
    .popup-modal.pdf-popup:not(.full-screen) > .popup {
        min-width: calc(960px - 4.5em); /* subtracting width of side menu */
    }
}
@media screen and (max-width: 960px) {
    .popup-modal.pdf-popup:not(.full-screen) > .popup {
        min-width: unset;
        width: 100%;
    }
}
/* #endregion */

/* #region serial pattern popup */
.serial-pattern-popup .popup > .body .list {
    margin-top: 0.5em;
    border-top: 1px solid var(--color-text);
}
    .serial-pattern-popup .popup > .body .list .striped {
        padding: 0.5em;
    }
/* #endregion */

/* #region serial list popup */
.serial-list-popup .popup > .body .input-wrapper {
    margin: 0 0.5em;
}
.serial-list-popup .popup > .body .striped {
    padding: 0.5em;
}
.serial-list-popup .popup > .body .status {
    padding: 0.25em 0.75em;
    font-weight: bold;
}
    .serial-list-popup .popup > .body .status > span {
        padding: 0 0.25em;
    }
        .serial-list-popup .popup > .body .status > span:nth-child(2) {
            flex-grow: 1;
        }
.serial-list-popup .popup > .body .selection {
    margin-top: 0.5em;
    border-top: 1px solid var(--color-text);
}
/* #endregion */

/* #region search popup */
.call-adv-search-popup h3 {
    display: flex;
    align-items: center;
    margin-bottom: 0.25em;
}
.call-adv-search-popup h3:first-child { margin-top: 0; }
.call-adv-search-popup h3 i { margin-right: 0.25em; }
.call-adv-search-popup .date-range { display: none; }
.call-adv-search-popup .start-date, .adv-search-popup .end-date {
    text-align: center;
    padding: 0;
}
/* #endregion */

/* #region call popup */
.call-popup .body > .input-wrapper {
    /* weird issue... removing right border causes horizontal scroll... luckily the accent border blends with search button so it's not a big deal */
    border-left: none;
    border-top: none;
    border-bottom: 1px solid var(--color-header-border);
    border-radius: 0;
}





/* #region calls */
.call-popup #calls {
    padding: 0.5em;
    background: var(--color-header);
    display: flex;
    flex-direction: column;
    grid-row-gap: 0.5em;
    position: relative;
}
.call-popup #calls:empty::after {
    content: "None...";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5em;
}

.call-popup .call {
    border: 1px solid var(--color-header-border);
    border-radius: 4.5em 1em 1em 4.5em;
    padding: 0.5em;
    background: var(--color-container);
    display: flex;
    flex-direction: column;
    width: 100%;
}

.call-popup .call mark { border-radius: 0.125em; }
.call-popup .call .bold mark { font-weight: normal !important; }
.call-popup .call .italic mark { padding-right: 0.25em; }
.call-popup .call:not(.open) { cursor: pointer; }
.call-popup .call .read-only .profile-icon {
    width: 8em;
    height: 8em;
    margin-right: 0.75em;
}

.call-popup .call .call-desc {
    max-height: 4em;
    overflow-y: hidden;
    text-overflow: ellipsis;
}



.call-popup .call:not(.open) .editable { display: none; }
.call-popup .call.open .read-only { display: none; }

.call-popup .call.open {
    padding: 0;
    border-radius: 0.25em 0.25em 0.5em 0.5em;
}

.call-popup .call.open .content { padding: 0.5em; }

.call-popup .call .header {
    display: flex;
    align-items: center;
    background: var(--color-text);
    color: var(--color-text-text);
    padding: 0 0.5em;
    height: 2em;
    cursor: pointer;
    user-select: none;
}
@media (hover:hover) {
    .call-popup .call .header:hover {
        background: var(--color-accent);
        color: var(--color-accent-text);
    }
    .call-popup .contacts .btn-new:hover {
        background: var(--color-accent);
        color: var(--color-accent-text);
    }
}


.call-popup .call h3 {
    border-bottom: 1px solid var(--color-text);
    line-height: 1.25em;
    font-style: italic;
    margin-bottom: 0.25em;
    margin-top: 0.25em;
}

/* #region contacts */
.call-popup .contacts {
    display: flex;
    flex-wrap: wrap;
    grid-gap: 1em;
}
.call-popup .contact {
    position: relative;
    display: inline-flex;
    float: left;
    width: 7em;
    cursor: pointer;
}

.call-popup .contact .profile-icon {
    width: 7em;
    height: 7em;
}

.call-popup .contact:not(.primary) .material-icons {
    display: none;
}

.call-popup .contact .material-icons {
    position: absolute;
    top: 0;
    right: 0;
    font-size: 2.25em;
    background: var(--color-success);
    color: var(--color-success-text);
    border-radius: 100%;
}

.call-popup .contacts .btn-new {
    width: 1.75em;
    height: 1.75em;
    display: inline-flex;
    font-size: 4em;
    float: left;
    color: var(--color-accent);
    border-color: var(--color-accent);
    align-items: center;
    justify-content: center;
    border-radius: 100%;
    background: transparent;
    outline: none;
    border-width: 0.05em;
    border-style: solid;
}
/* #endregion */


@media screen and (max-width: 720px) {
    .call-popup .call .read-only .profile-icon {
        width: 4.5em;
        height: 4.5em;
    }

    .call-popup .contacts { font-size: 0.66em; }
    .call-popup .contacts .name { font-size: 1.25em; }
}


/* #endregion */

.call-popup .body #footer {
    border-top: 2px solid var(--color-text);
    text-align: center;
    font-weight: bold;
}
/* #endregion */

/* #region memo popup */



.memo-popup .body {
    background: var(--color-header);
    grid-row-gap: 0.5em;
    position: relative;
}
.memo-popup .body .memo .header .btn-icon { border-radius: 0; }
/* overriding default popup logic that hides empty body */
.memo-popup .body:empty { display: inherit !important; }
.memo-popup .body:empty::after {
    content: "None...";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5em;
}

/* #region memo element */
.memo-popup .memo { background: var(--color-container); }
.memo-popup .memo > div { padding: 0 0.5em; }
.memo-popup .memo .input-wrapper { 
    border: none !important; 
    box-shadow: none !important;
}
.memo-popup .memo textarea {
    width: 100%;
    outline: none;
    border: none;
    resize: vertical;
}



/* #region header */
.memo-popup .memo .header {
    border-bottom: 2px solid var(--color-header-border);
}
.memo-popup .memo .memo-desc {
    border: none;
    outline: none;
    width: 100%;
    font-style: italic;
    padding: 0.35em 0.25em 0 0.25em;
}
/* #endregion */

/* #endregion */



/* #endregion */

/* #region IFrame Popup */
.iframe-popup .body {
    position: relative;
}
.iframe-popup iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
    outline: none;
    /* adding top border to separate embeded popup headers from iframe popoup header */
    border-top: 1px solid var(--color-container);
}
/* #endregion */

/* #region scanner popup */
.scanner-popup #scanner_container {
    /*width: 100%;*/
    display: flex;
    /*box-shadow: 0px 0px 0px 2px var(--color-text);*/
}
/*.scanner-popup .body.success #scanner_container {
    box-shadow: 0px 0px 0px 2px var(--color-success);
}
.scanner-popup .body.error #scanner_container {
    box-shadow: 0px 0px 0px 2px var(--color-error);
}*/
/* #endregion */

/* #region signature popup */

/* gray backdrop so the (always-white) canvas stays visible even on a light theme - see .signature-box, not the whole body,
   so heading/subheading/confirm text above it can use normal themed colors */
.signature-popup .signature-box {
    position: relative;
    flex: 1 1 auto;
    min-height: 8em;
    padding: 0.25em;
    border: 1px solid var(--color-text);
    border-radius: 4px;
}
.signature-popup canvas {
    display: block;
    width: 100%;
    height: 100%;
}
.signature-popup .signature-placeholder {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    text-align: center;
    color: #999;
    font-style: italic;
    pointer-events: none;
}
/* #region signature e-sign prompt */
.signature-prompt .input-wrapper {
    border: none !important;
    box-shadow: none !important;
    min-height: 2em;
    height: unset;
}
.signature-prompt input {
    font-family: 'Cedarville Cursive';
    font-size: 36px;
    text-align: center;
    color: black;
}
/* #endregion */
/* #endregion */

/* #region user settings popup (admin only side-menu) */
.user-setting-popup th:last-child,
.user-setting-popup td:last-child { width: 0; }
.user-setting-popup td:last-child button { height: 100%; }
.user-setting-popup .editable-grid th {
    background: var(--color-accent);
    color: var(--color-accent-text);
}
/* #endregion */

/* #endregion */



/* removing details border/radius when embedded directly within a zero-padding popup */

/* 
    by default, details get separated with 0.5em top margin (idk why i designed it this way it was a long time ago)
    but in context of popups, we have less space and only really want 1px stripe between them to separate the colors
*/
.popup-modal.pad-none .popup > .body details:not(:first-child) { margin-top: 1px; }
.popup-modal.pad-none .popup > .body details > summary {
    border-radius: 0;
}
.popup-modal.pad-none .popup > .body details > *:last-child {
    border-radius: 0;
    border: none;
}