.modal-mask {

    position: fixed;

    z-index: 9998;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background-color: rgba(0, 0, 0, .5);

    display: table;

    transition: opacity .5s ease;

}



.modal-wrapper {

    display: table-cell;

    vertical-align: middle;

}



.modal-container {

    width: 400px;

    max-width: 80%;

    margin: 0px auto;

    padding: 5px 20px;

    background-color: #fff;

    border-radius: 7px;

    box-shadow: 0 2px 8px rgba(0, 0, 0, .33);

    transition: all .5s ease;

    font-family: Helvetica, Arial, sans-serif;

}



@media screen and (max-width: 640px) {

    .modal-container {

        width: unset;

    }

}



.modal-header h3 {

    margin-top: 0;

    color: #42b983;

}



.modal-body {

    margin: 20px 0;

}



.modal-button {

    color: #fff;

    border: none;

    font-weight: 600;

    text-decoration: none;

    font-size: 100%;

    /*outline: none;*/

    background: #632032;

    padding: 0.5em 1em;

    margin: 5px;

    border-radius: 5px;

    min-width: 60px;

}



.modal-button-centered {

    margin: 0 auto;

    display: block;

}



/*

 * The following styles are auto-applied to elements with

 * transition="modal" when their visibility is toggled

 * by Vue.js.

 *

 * You can easily play with the modal transition by editing

 * these styles.

 */



.modal-enter {

    opacity: 0;

}



.modal-leave-active {

    opacity: 0;

}



.modal-enter .modal-container,

.modal-leave-active .modal-container {

    -webkit-transform: scale(1.1);

    transform: scale(1.1);

}



.avatar-modal-content {

    display: -ms-grid;

    display: grid;

    grid-template-columns: 2fr 1fr;

    grid-column-gap: 20px;

}



.avatar-modal-video {

    height: 100%;

    position: relative;

}



.close-icon {

    display:block;

    box-sizing:border-box;

    width:20px;

    height:20px;

    border-width:3px;

    border-style: solid;

    border-color:red;

    border-radius:100%;

    background-color:red;

    box-shadow:0px 0px 5px 2px rgba(0,0,0,0.5);

    transition: all 0.3s ease;

    z-index: 1000005;

    position: absolute;

    right: -4px;

    top: -6px;

}



.close-icon::before, .close-icon:after {

    position: absolute;

    content: " ";

    background-color: white;

    height: 15px;

    width: 3px;

    right: 6px;

}



.close-icon:before {

    transform: rotate(45deg);

}

.close-icon:after {

    transform: rotate(-45deg);

}