.modal-articleelements-add
{
    padding-top: 12px;
    padding-bottom: 12px;

    color: #ececec;

    text-align: center;

    border-color: #ffffff;
    border-style: dashed;
    border-width: 2px;
    border-radius: 6px;
}

.modal-articleelements-add:hover
{
    cursor: pointer;

    background-color: #ffffff;
    
    border-color: #ececec;
}

.modal-articleelements-add:hover .modal-articleelements-add-line
{
    border-top-color: #ffffff;
}

.modal-articleelements-add-line
{
    width: 100%;

    border-top-color: #ececec;
    border-top-style: dashed;
    border-top-width: 2px;
}

.modal-articleelements-container
{
    display: flex;
    justify-content: space-between;

    margin-top: 12px;

    min-height: 54px;
}

.modal-articleelements-error
{
    margin-top: 6px;
    
    color: #dc3545;

    font-size: 12px;
    line-height: 15px;
    font-weight: 600;
}

.modal-articleelements-error-top
{
    margin-top: 12px;
    
    color: #dc3545;

    font-size: 12px;
    line-height: 15px;
    font-weight: 600;
}

.modal-articleelements-header
{
    margin-bottom: 26px;
}

.modal-articleelements-hidden
{
    display: none;
}

.modal-articleelements-loading-container
{
    display: inline-block;

    width: 16px;
    height: 16px;

    margin-left: 4px;

    vertical-align: top;
}

.modal-articleelements-loading-spinner
{
    width: 16px;
    height: 16px;

    background-image: url('/public/image/dashboard_loading.svg');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 16px 16px;

    animation-name: modal-articleelements-loading-spin;
    animation-duration: 2000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear; 
}

@keyframes modal-articleelements-loading-spin {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(360deg);
    }
}

.modal-articleelements-saved
{
    margin-top: 6px;

    color: #28a745;
    
    font-size: 12px;
    line-height: 15px;
    font-weight: 600;
}

.modal-articleelements-scroll
{
    max-height: calc(100vh - 169px);

    margin-left: -8px;
    padding-left: 8px;
    padding-right: 16px;
    
    overflow-x: clip;
    overflow-y: scroll;
}

.modal-articleelements-scrolltobottom
{
    margin-top: 12px;

    color: #358779;

    font-size: 12px;
    line-height: 15px;
    font-weight: 600;
}

.modal-articleelements-scrolltobottom:hover
{
    cursor: pointer;
}

.modal-articleelements-scrolltotop
{
    margin-top: 12px;

    color: #358779;

    font-size: 12px;
    line-height: 15px;
    font-weight: 600;
}

.modal-articleelements-scrolltotop:hover
{
    cursor: pointer;
}

.modal-articleelements-seperator-container
{   
    display: flex;
    justify-content: center;

    margin-top: 12px;
    margin-bottom: 48px;
    width: 100%;

    border-bottom-style: dashed;
    border-bottom-width: 3px;
    border-bottom-color: #ececec;
}

.modal-articleelements-seperator-offset
{
    position: relative;

    top: 19px;
}

.modal-articleelements-title
{
    margin-bottom: 0px;
}

.modal-articleelements-top-placeholder
{
    min-height: 27px;
}

.modal-articleelements-top-saved
{
    margin-top: 12px;

    color: #28a745;
    
    font-size: 12px;
    line-height: 15px;
    font-weight: 600;
}

.modal-articleelements-top-error
{
    margin-top: 12px;

    color: #dc3545;
    
    font-size: 12px;
    line-height: 15px;
    font-weight: 600;
}

.modal-articleelements-unsaved
{
    margin-top: 3px;

    color: #dc3545;
    
    font-size: 12px;
    line-height: 15px;
    font-weight: 600;
}

.modal-articleelements-unsaved-reset
{
    display: inline-block;

    margin-left: 4px;

    color: #358779;
}

.modal-articleelements-unsaved-reset:hover
{
    cursor: pointer;
}

.modal-articleelements-unsaved-reset-icon
{
    display: inline-block;

    margin-left: 3px;
    margin-bottom: 3px;

    width: 11px;
    height: 11px;

    vertical-align: middle;

    background-image: url('/public/image/tableform_reset.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.modal-button-container
{
	white-space: nowrap;
}

.modal-body-scroll
{
    max-height: calc(100vh - 108px);
}

.modal-body-table
{
    padding-bottom: 0px;
}

.modal-button
{
    margin-right: 4px;
    
    height: 36px;

    font-size: 14px;
    line-height: 19px;

    background-color: #358779;
    border-color: #358779;

    -webkit-transition: all 150ms ease-out;
    -moz-transitionn: all 150ms ease-out;
    -o-transitionn: all 150ms ease-out;
    transition: all 150ms ease-out;
    
    -webkit-box-shadow: 0px 3px 5px 1px #35877959;
    -moz-box-shadow:    0px 3px 5px 1px #35877959;
    box-shadow:         0px 3px 5px 1px #35877959;

	white-space: nowrap;
}

.modal-button.disabled
{
    background-color: #c5dbd7;
    border-color: #c5dbd7;

    -webkit-box-shadow: none;
    -moz-box-shadow:    none;
    box-shadow:         none;
}

.modal-button:hover
{
    cursor: pointer;
    
    background-color: #ff961f;
    border-color: #ff961f;

    -webkit-box-shadow: 0px 3px 5px 1px #ff961f59;
    -moz-box-shadow:    0px 3px 5px 1px #ff961f59;
    box-shadow:         0px 3px 5px 1px #ff961f59;
}

.modal-button:active
{
    background-color: #ff961f !important;
    outline: none !important;
    box-shadow: none !important;
    border-color: #ff961f !important;
}

.modal-button:disabled,
.modal-button[disabled]
{
    padding-left: 12px;
    padding-right: 12px;
    padding-top: 6px;
    padding-bottom: 6px;
    margin: 0px;

    height: 38px;

    color: #ffffff;
    background-color: #a8a8a8;

    border-color: #a8a8a8;
    border-style: solid;
    border-width: 1px;
    border-radius: 6px;

    vertical-align: middle;
    line-height: 24px;

    -webkit-transition: none;
    -moz-transitionn: none;
    -o-transitionn: none;
    transition: none;
    
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

.modal-button-remove
{
    margin-right: 4px;
    
    height: 36px;

    font-size: 14px;
    line-height: 19px;

    background-color: #b01b1b;
    border-color: #b01b1b;

    -webkit-transition: all 150ms ease-out;
    -moz-transitionn: all 150ms ease-out;
    -o-transitionn: all 150ms ease-out;
    transition: all 150ms ease-out;
    
    -webkit-box-shadow: none;
    -moz-box-shadow:    none;
    box-shadow:         none;

	white-space: nowrap;
}

.modal-button-remove.disabled
{
    background-color: #ecb9b9;
    border-color: #ecb9b9;

    -webkit-box-shadow: none;
    -moz-box-shadow:    none;
    box-shadow:         none;
}

.modal-button-remove:hover
{
    cursor: pointer;
    
    background-color: #ff961f;
    border-color: #ff961f;

    -webkit-box-shadow: none;
    -moz-box-shadow:    none;
    box-shadow:         none;
}

.modal-button-remove:active
{
    background-color: #ff961f !important;
    outline: none !important;
    box-shadow: none !important;
    border-color: #ff961f !important;
}

.modal-button-remove:disabled,
.modal-button-remove[disabled]
{
    padding-left: 12px;
    padding-right: 12px;
    padding-top: 6px;
    padding-bottom: 6px;
    margin: 0px;

    height: 38px;

    color: #ffffff;
    background-color: #a8a8a8;

    border-color: #a8a8a8;
    border-style: solid;
    border-width: 1px;
    border-radius: 6px;

    vertical-align: middle;
    line-height: 24px;

    -webkit-transition: none;
    -moz-transitionn: none;
    -o-transitionn: none;
    transition: none;
    
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

.modal-button-alt
{
    margin-right: 0px;
    
    background-color: #dcdcdc;

    border-color: #dcdcdc;
    box-shadow: 0px 3px 5px 1px #b3b3b359;
}

.modal-button-icon-left
{
    margin-right: 6px;
}

.modal-button-icon-right
{
    margin-left: 6px;
}

.modal-button-debug
{
    background-color: #0d6efd;
    border-color: #0d6efd;

    -webkit-transition: all 150ms ease-out;
    -moz-transitionn: all 150ms ease-out;
    -o-transitionn: all 150ms ease-out;
    transition: all 150ms ease-out;
    
    -webkit-box-shadow: 0px 3px 5px 1px #0d6efd59;
    -moz-box-shadow:    0px 3px 5px 1px #0d6efd59;
    box-shadow:         0px 3px 5px 1px #0d6efd59;
}

.modal-button-debug:hover
{
    cursor: pointer;
    
    background-color: #ff961f;
    border-color: #ff961f;

    -webkit-box-shadow: 0px 3px 5px 1px #ff961f59;
    -moz-box-shadow:    0px 3px 5px 1px #ff961f59;
    box-shadow:         0px 3px 5px 1px #ff961f59;
}

.modal-button-debug:active
{
    background-color: #ff961f !important;
    outline: none !important;
    box-shadow: none !important;
    border-color: #ff961f !important;
}

/* Override */
.modal-content
{
    color: #000000;
}

.modal-error
{
    color: #dc3545;
}

.modal-footer
{
    padding-top: 0px;
    padding-bottom: 0px;
    border-top-width: 0px;
}

.modal-footer-error
{
    width: 100%;
    
    padding: 12px;
    padding-bottom: 12px;
    padding-top: 8px;
    margin: 0px;
    margin-bottom: 16px;

    color: #dc3545;
    background-color: #ffecee;

    font-size: 14px;

    border-radius: 7px;
}

.modal-form-button-hidden
{
    display: none;
}

.modal-form-button
{
    margin: 0px;
}

.modal-form-button-placeholder
{
    padding-top: 8px;
}

.modal-full
{
    --bs-modal-width: calc(100% - 56px);
}

.modal-header
{
    padding-bottom: 0px;
    border-bottom-width: 0px;
}

.modal-icon-add
{
    display: inline-block;

    margin-bottom: 2px;
    width: 15px;
    height: 15px;

    vertical-align: middle;
    
    background-image: url('/public/image/modal_add.svg');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.modal-icon-call
{
    display: inline-block;

    margin-bottom: 2px;
    width: 14px;
    height: 14px;

    vertical-align: middle;
    
    background-image: url('/public/image/modal_call.svg');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.modal-icon-check
{
    display: inline-block;

    margin-bottom: 3px;
    width: 12px;
    height: 12px;

    vertical-align: middle;
    
    background-image: url('/public/image/modal_check.svg');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.modal-icon-clock
{
    display: inline-block;

    margin-bottom: 1px;
    margin-left: -1px;
    width: 15px;
    height: 16px;

    vertical-align: middle;
    
    background-image: url('/public/image/modal_clock.svg');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.modal-icon-contactpersons
{
    display: inline-block;
    margin-left: -1px;
    margin-right: -1px;
    margin-bottom: 2px;
    width: 17px;
    height: 17px;

    vertical-align: middle;
    
    background-image: url('/public/image/modal_contactpersons.svg');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.modal-icon-conversion
{
    display: inline-block;

    margin-left: -1px;
    margin-bottom: 3px;
    width: 18px;
    height: 16px;

    vertical-align: middle;
    
    background-image: url('/public/image/modal_conversion.svg');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.modal-icon-cross
{
    display: inline-block;

    margin-bottom: 3px;
    width: 12px;
    height: 12px;

    vertical-align: middle;
    
    background-image: url('/public/image/modal_cross.svg');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.modal-icon-datatransfer
{
    display: inline-block;
    
    margin-bottom: 1px;
    margin-left: -3px;
    margin-right: -4px;
    width: 22px;
    height: 24px;
    
    vertical-align: middle;
    
    background-image: url('/public/image/modal_datatransfer.svg');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.modal-icon-duplicate
{
    display: inline-block;

    margin-bottom: 2px;
    width: 15px;
    height: 15px;

    vertical-align: middle;
    
    background-image: url('/public/image/modal_duplicate.svg');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.modal-icon-edit
{
    display: inline-block;

    margin-bottom: 2px;
    width: 14px;
    height: 14px;

    vertical-align: middle;
    
    background-image: url('/public/image/modal_edit.svg');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.modal-icon-edit-write
{
    display: inline-block;

    margin-left: -1px;
    margin-right: -3px;
    width: 19px;
    height: 22px;

    vertical-align: middle;
    
    background-image: url('/public/image/modal_edit_write.svg');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.modal-icon-email
{
    display: inline-block;
    
    width: 14px;
    height: 14px;

    vertical-align: middle;
    
    background-image: url('/public/image/modal_email.svg');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.modal-icon-external
{
    display: inline-block;
    
    margin-bottom: 1px;
    margin-left: -1px;
    width: 16px;
    height: 16px;
    
    vertical-align: middle;
    
    background-image: url('/public/image/modal_external.svg');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.modal-icon-headset
{
    display: inline-block;

    margin-bottom: 2px;
    width: 15px;
    height: 15px;

    vertical-align: middle;
    
    background-image: url('/public/image/modal_headset.svg');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.modal-icon-history
{
    display: inline-block;
    
    margin-bottom: 1px;
    margin-left: -1px;
    margin-right: -2px;
    width: 17px;
    height: 17px;
    
    vertical-align: middle;
    
    background-image: url('/public/image/modal_history.svg');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.modal-icon-incomingremove
{
    display: inline-block;

    margin-bottom: 2px;
    width: 16px;
    height: 22px;

    vertical-align: middle;
    
    background-image: url('/public/image/modal_incomingremove.svg');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.modal-icon-inspection
{
    display: inline-block;

    margin-top: 1px;
    margin-left: -3px;
    margin-right: -4px;
    width: 21px;
    height: 21px;

    vertical-align: middle;

    background-image: url(/public/image/modal_inspection.svg);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.modal-icon-invoice
{
    display: inline-block;

    margin-bottom: 1px;
    margin-left: -1px;
    margin-right: -2px;
    width: 17px;
    height: 18px;
    
    vertical-align: middle;
    
    background-image: url('/public/image/modal_invoice.svg');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.modal-icon-link
{
    display: inline-block;

    margin-bottom: 2px;
    margin-left: -1px;
    width: 15px;
    height: 15px;

    vertical-align: middle;
    
    background-image: url('/public/image/modal_link.svg');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.modal-icon-list
{
    display: inline-block;

    margin-bottom: 2px;
    width: 15px;
    height: 15px;

    vertical-align: middle;
    
    background-image: url('/public/image/modal_list.svg');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.modal-icon-paypartial
{
    display: inline-block;

    margin-bottom: 2px;
    margin-left: -2px;
    margin-right: -2px;
    width: 18px;
    height: 18px;
    
    vertical-align: middle;
    
    background-image: url('/public/image/modal_paypartial.svg');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.modal-icon-pdf
{
    display: inline-block;

    margin-left: -1px;
    margin-right: -1px;
    width: 16px;
    height: 16px;

    vertical-align: middle;
    
    background-image: url('/public/image/modal_pdf.svg');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.modal-icon-phonenumber
{
    display: inline-block;

    margin-bottom: 2px;
    width: 15px;
    height: 15px;

    vertical-align: middle;
    
    background-image: url('/public/image/modal_phonenumber.svg');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.modal-icon-prospectsearch
{
    display: inline-block;

    margin-bottom: 2px;
    width: 15px;
    height: 15px;

    vertical-align: middle;
    
    background-image: url('/public/image/modal_prospectsearch.svg');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.modal-icon-recover
{
    display: inline-block;

    margin-left: -1px;
    margin-right: -1px;
    margin-bottom: 1px;
    width: 17px;
    height: 18px;

    vertical-align: middle;
    
    background-image: url('/public/image/modal_recover.svg');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.modal-icon-remark
{
    display: inline-block;

    margin-bottom: 1px;
    width: 15px;
    height: 18px;

    vertical-align: middle;
    
    background-image: url('/public/image/modal_remark.svg');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.modal-icon-remove
{
    display: inline-block;

    margin-bottom: 3px;
    width: 14px;
    height: 14px;

    vertical-align: middle;
    
    background-image: url('/public/image/modal_remove.svg');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.modal-icon-revert
{
    display: inline-block;

    margin-bottom: 2px;
    width: 14px;
    height: 14px;

    vertical-align: middle;
    
    background-image: url('/public/image/modal_revert.svg');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.modal-icon-save
{
    display: inline-block;

    margin-left: -1px;
    margin-bottom: 1px;
    width: 18px;
    height: 16px;

    vertical-align: middle;
    
    background-image: url('/public/image/modal_save2.svg');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.modal-icon-settings
{
    display: inline-block;

    margin-bottom: 2px;
    width: 15px;
    height: 15px;

    vertical-align: middle;
    
    background-image: url('/public/image/modal_settings.svg');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.modal-icon-switch
{
    display: inline-block;

    margin-bottom: 2px;
    margin-right: -1px;
    width: 15px;
    height: 15px;
    
    vertical-align: middle;
    
    background-image: url('/public/image/modal_switch.svg');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.modal-icon-share
{
    display: inline-block;

    margin-bottom: 2px;
    width: 15px;
    height: 15px;

    vertical-align: middle;
    
    background-image: url('/public/image/modal_share.svg');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.modal-icon-sortup
{
    display: inline-block;

    margin-left: -1px;
    margin-right: -1px;
    margin-bottom: 2px;
    width: 16px;
    height: 16px;

    vertical-align: middle;
    
    background-image: url('/public/image/modal_sortup.svg');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.modal-icon-sortdown
{
    display: inline-block;

    margin-left: -1px;
    margin-right: -1px;
    margin-bottom: 2px;
    width: 16px;
    height: 16px;

    vertical-align: middle;
    
    background-image: url('/public/image/modal_sortdown.svg');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.modal-icon-table
{
    display: inline-block;

    margin-left: -1px;
    margin-right: -1px;
    margin-bottom: 2px;
    width: 16px;
    height: 16px;

    vertical-align: middle;
    
    background-image: url('/public/image/modal_table.svg');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.modal-icon-tag
{
    display: inline-block;

    margin-left: -1px;
    margin-right: -3px;
    margin-bottom: 0px;
    width: 19px;
    height: 18px;

    vertical-align: middle;
    
    background-image: url('/public/image/modal_tag.svg');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.modal-icon-type
{
    display: inline-block;

    margin-bottom: 2px;
    width: 14px;
    height: 14px;

    vertical-align: middle;
    
    background-image: url('/public/image/modal_type.svg');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.modal-icon-update
{
    display: inline-block;

    margin-bottom: 2px;
    width: 15px;
    height: 15px;
    
    vertical-align: middle;
    
    background-image: url('/public/image/modal_update.svg');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.modal-icon-unpayable
{
    display: inline-block;

    margin-bottom: 2px;
    width: 14px;
    height: 14px;
    
    vertical-align: middle;
    
    background-image: url('/public/image/modal_unpayable.svg');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.modal-icon-view
{
    display: inline-block;

    margin-left: -2px;
    margin-right: -2px;
    margin-bottom: 2px;
    width: 19px;
    height: 18px;
    
    vertical-align: middle;
    
    background-image: url('/public/image/modal_view.svg');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.modal-info
{
    padding: 12px;
    padding-bottom: 12px;
    padding-top: 8px;
    margin: 0px;
    margin-bottom: 16px;

    color: #2a6aa3;
    background-color: #dbeeff;
    
    font-size: 14px;

    border-radius: 7px;
}

.modal-info h1
{
    padding-top: 6px;
    padding-bottom: 12px;
    margin-bottom: 12px;
    
    border-bottom-width: 1px;
    border-bottom-color: #2a6aa3;
    border-bottom-style: solid;

    font-size: 24px;
    font-weight: 600;
}

.modal-info h2
{
    margin-bottom: 6px;

    font-size: 16px;
    font-weight: 600;
}

.modal-info p
{
    margin-bottom: 8px;
}

.modal-info-description
{
    margin-bottom: 8px;
    white-space: break-spaces;
}

.modal-info-field
{
    margin-bottom: 24px;
}

.modal-info hr
{
    margin-top: 4px;
    margin-bottom: 7px;
}

.modal-info-error
{
    padding: 16px;
    margin-bottom: 16px;

    color: #a32a2a;
    background-color: #ffdbdb;

    border-radius: 7px;
}

.modal-info-image
{
    margin-bottom: 16px;

    border-radius: 6px;
}

.modal-info-imagereference-container
{
    display: flex;
    justify-content: left;
}

.modal-info-imagereference-subcontainer
{
    margin-right: 24px;

    text-align: center;
}

.modal-info-imagereference
{
    width: 32px;
    height: 32px;
    margin-bottom: 4px;
    
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 32px 32px;
}

.modal-info-unused
{
    margin-left: 32px;
    margin-bottom: 16px;
    
    font-weight: 700;
}

.modal-loading-container
{
    margin-top: 32px;
    margin-bottom: 32px;
    margin-left: auto;
    margin-right: auto;

    width: 48px;
    height: 48px;
}

.modal-loading-spinner
{
    width: 48px;
    height: 48px;

    background-image: url('/public/image/dashboard_loading.svg');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 48px 48px;

    animation-name: modal-loading-spin;
    animation-duration: 2000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear; 
}

@keyframes modal-loading-spin {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(360deg);
    }
}

.modal-plotly-container
{
    margin-bottom: 16px;

    height: 400px;

    background-color: blue;
}

.modal-plotly-subcontainer
{
    display: inline-block;
    
    width: 33%;
    height: 100%;
}

.modal-scroll-container
{
    max-height: calc(100vh - 169px);
    
    font-size: 18px;
    line-height: 28px;

    overflow-y: scroll;

    color: #212529;
}

.modal-seperator
{
    height: 36px;
}

.modal-spinner
{
	width: 36px;
    height: 36px;

    background-image: url('/public/image/dashboard_loading.svg');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 36px 36px;

    animation-name: modal-loading-spin;
    animation-duration: 2000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

.modal-stats
{
    padding: 16px;
    padding-bottom: 1px;
    padding-top: 8px;
    margin-bottom: 16px;

    color: #212529;
    background-color: #f3f5f7;
    
    font-size: 14px;
    line-height: 19px;
    
    border-radius: 7px;
}

.modal-stats p
{
    margin-bottom: 8px;
}

.modal-sticky
{
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 36px;
}

.modal-submit-overlay
{
	position: absolute;
	
	top: 0px;
	width: 100%;
	height: 100%;
	
	background-color: #ffffff00;
	
	z-index: 1001;
}

.modal-tablebutton
{
    margin-right: 16px;
    margin-bottom: 16px;
}

.modal-text
{
    display: inline-block;

    margin-left: 5px;
}

.modal-title-placeholder
{
    min-height: 36px;
}