.ModalContainer {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    height: 100%;

    position: absolute;
    left: 0;
    top: 0;

    .Modal {
        background: #f5f5f5;
        border-radius: $unit;
        color: $grey-00;
        display: flex;
        flex-direction: column;
    
        min-width: $unit * 45;
        max-width: $unit * 60;
        overflow-y: auto;
        padding: $unit * 3; 
        position: relative;
        z-index: 21;

        #ModalHeader {
            display: flex;
            flex-direction: row;
            align-items: center;
            margin-bottom: 16px;
            margin-right: -8px;

            h2 {
                font-size: $font-xlarge;
                font-weight: 500;
                text-align: left;
                flex-grow: 1;
            }

            svg {
                fill: $grey-50;
                padding: $unit / 2;
                height: 18px;
                width: 18px;
                transform: rotate(45deg);

                &:hover {
                    cursor: pointer;
                    fill: $grey-00;
                }
            }
        }
        
        #ModalBottom {
            display: flex;
            flex-direction: row;

            a {
                color: #666;
                font-size: $font-regular;
                font-weight: 500;
                flex-grow: 1;
                display: flex;
                align-items: center;
            }

            .Button {
                display: block;
                min-height: $unit * 5;
                text-align: center;
                min-width: $unit * 11;
            }
        }
    }
}