/* * Importing Popups */

/* The popup */
.cm--import-file
{
    width: 75vw !important;
    height: 75vh !important;
    background: var(--sc-primary-light-background);
    border-radius: 2vw;
}

/* The droppable area */

/* The droppable area must be inside a .cm--import-file.is-dragover*/
.is-dragover {background: white}
.is-dragover .droppable-area
{
    padding: 4vw;
    /* width: calc(100% - 5vw);
    height: calc(100% - 5vw); */
    border-radius: inherit;
}



.droppable-area.enabled {opacity: 1 !important; outline-offset: -2rem;}
.droppable-area:after {
    content: attr(data-content);
    
    position: absolute;
    top: 0; bottom: 0;
    left: 0; right: 0;
    margin: auto;
    
    width: fit-content;
    width: -moz-fit-content;

    font-size: 2rem;
    height: 2rem;
}
.droppable-area.dragAndDrop-invisible {opacity: 0}
.droppable-area
{
    position: absolute;
    top: 0; bottom: 0;
    right: 0; left: 0;
    margin: auto;

    outline: 2px dashed black;
    outline-offset: -1rem;
    width: 100%;
    height: 100%;

    background: white;
    z-index: 1;

    transition: 0.3s all;
}

/* The text within the droppable area */
#js-cm--drop-message
{
    position: absolute;
    top: 0; bottom: 0;
    right: 0; left: 0;
    margin: auto;

    width: fit-content;
    height: fit-content;

    user-select: none;
    font-size: 2rem;
    line-height: 2rem;
    padding: 0.5rem;
    height: 3rem;
    text-align: center;
    font-weight: normal;
}

#js-cm--import-close
{
    user-select: none;
    position: absolute;
    bottom: 2vw;
    left: 0;
    right: 0;
    margin: auto;
}