/*  EXAMPLE USAGE:
--------------------------------------------------------------------------------
    <div class="modal__veil">
        <div class="modal__container">
            <div class="modal__section">
                <div class="modal__content">
                    Content goes in here
                </div>
            </div>
        </div>
    </div>
--------------------------------------------------------------------------------
    <div class="modal__veil">
        <div class="modal__container">
            <div class="modal__section">
                <div class="modal__content">
                    Content goes in here
                </div>
            </div>
            <div class="modal__section">
                <div class="modal__content">
                    You can have as many sections as you want
                </div>
            </div>
            <div class="modal__section modal__section--footer">
                <div class="modal__content">
                    This section will be forced to the bottom (for buttons etc) byt the modal__section--footer class
                </div>
            </div>
        </div>
    </div>
------------------------------------------------------------------------------*/

/******************************************************************************\
    VEIL
\******************************************************************************/

.modal--show.modal__veil {
    display: flex;
}

.modal__veil {
    display: none;
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100vw;
    height: 100vh;
    overflow: auto;
    background: rgba(15,15,15,0.61);
    z-index: 10;
    padding: 32px;
    justify-content: center;
    align-items: center;
}

/******************************************************************************\
    CONTAINER
\******************************************************************************/

.modal__container {
    background: white;
    max-height: 90vh;
    border-radius: 10px;
    box-shadow: 3px 3px 6px rgba(0,0,0,0.44);
    position: relative;
    display: none;
    flex-direction: column;
}

.modal__container--lightbox {
    height: 90vh;
    width: 90vw;
}

.modal__container--large {
    height: 710px;
    width: 850px;    
}

.modal__container--medium {
    min-height: 400px;
    width: 710px;    
}

.modal__container--dialog {
    height: 250px;
    width: 600px;
}

.modal__container--lhs {
    width: 44vw;
    right: 25vw;
}

.modal__container--rhs {
    width: 44vw;
    left: 25vw;

}

/*----------------------------------------------------------------------------*/

.modal__container.modal__container--active {
    display: flex;
}

/******************************************************************************\
    SECTION
\******************************************************************************/

.modal__section {
    padding: 1em 4em;
}

.modal__section--footer {
    margin-top:auto;
}

/******************************************************************************\
    CONTENT
\******************************************************************************/

.modal__content {
    overflow: auto;
    height: 100%;
    width: 100%;
}

/******************************************************************************\
    TUTORIAL
\******************************************************************************/

.modal__tutorial-focus {
    z-index: 1500 !important;
    box-shadow: 0px 0px 20px rgba(255, 255, 255, 0.5);
    pointer-events: none;
}



/******************************************************************************\
    MISC
\******************************************************************************/

.modal__close {
    position: absolute;
    right: -20px;
    top: -20px;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: black;
    border-radius: 100%;
    /* box-shadow: 0px 3px 6px rgba(0,0,0,0.2); */
    z-index: 1;
    cursor: pointer;

    background-image: url(/images/x.png);
    background-size: 20px;
    background-position: center;
    background-repeat: no-repeat;
}