.modal-box-layer {
    position:fixed;
    top:0px;
    bottom:0px;
    left:0px;
    right:0px;
    background-color: rgba(0,0,0,0.7);
    cursor: pointer;
}
.opacity-transition-init {
    opacity: 0; 
    transition: opacity 0.5s;
}
.opacity-transition-enter {
    opacity: 1;
}

.modal-box {
    background-color: #FFF;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.7);
    width:100px;
    height:100px;
    z-index:1;
    overflow: hidden;
}
.no-transition {
    position:absolute;
    top:0px;
    bottom:0px;
    left:0px;
    right:0px;
    margin:auto auto;
}
.show-transition-init {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -80%);
    opacity: 0; 
    transition: opacity 0.5s, transform 0.5s;
}
.show-transition-enter {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.modal-box-closer {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 24px;
    height: 24px;
    cursor: pointer;
    background-image: url('../../assets/pics/close-24.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 20px 20px;

    background-color: transparent;
    border-radius: 50%;

    transition: background-color 0.3s;

}

.modal-box-closer:hover {
    background-color: #DBDBDB;
}