.wrap_pop_up {
    position: fixed;
    top: 0;
    justify-content: center;
    align-items: center;
    width: 100%;
    z-index: 10;
    flex-direction: column;
    height: 100%;
    /*! background-color: RGBa(189, 189, 189, 0.3); */
    display: none;
    /*! display: flex; */
    /*! overflow-y: auto; */
    backdrop-filter: blur(1px) brightness(0.75) saturate(0.5);
}


.pop_up {
    background: var(--grey_02);
    /*! padding: 1rem; */
    /*! border: solid 1px var(--grey); */
    /*! border-radius: 4px; */
    margin: 1rem;
    overflow: auto;
    /*! resize: both; */
    max-width: 58rem;
    /*! color: var(--main); */
    width: 100%;
    min-width: 58rem;
    overflow-y: auto;
    /*! height: inherit; */
    overflow-x: hidden;
    box-shadow: var(--shadow-big);
    /*! scrollbar-width: thin; */
    border-radius: var(--radius-small);
}

.pop_up.small {
    max-width: 32rem;
    min-width: auto;
}

.pop_up .title {
    display: flex;
    align-items: center;
    background: var(--primary);
    font-size: 0.85rem;
    position: sticky;
    top: 0;
    z-index: 2;
    font-weight: 500;
    color: white;
    margin: 0px;
    border-bottom: 0px;
}

#list_data_edit .pop_up .title {
    background: var(--primary);
    color: white;
}

#list_data_edit .pop_up .title .button.close {

    color: white;
}

.pin-code-bg {
    width: 100vw;
    height: 100vh;
    position: absolute;
    left: 0;
    top: 0;
    background-color: #808080fc;
    z-index: 99;
}

.pin-code {
    width: 600px;
    height: 400px;
    position: absolute;
    left: 50%;
    top: 50%;
    display: flex;
    flex-direction: column;
    padding: 20px;
    background-color: aliceblue;
    justify-content: space-around;
    text-align: center;
    border-radius: 15px;
    transform: translate(-50%, -50%);
}

.pop_up .title .name {
    flex: 1 1 auto;
    text-align: start;
    padding: 0.75rem 0;
    /*! cursor: move; */
    margin-left: 1.5rem;
    font-size: 0.8125rem;
}

.pop_up.drag .title .name {
    cursor: move;
}

.pop_up.red .title {
    background: var(--red);
}

.pop_up .title .button.close {
    padding: 0;
    transition: ease-in-out 0.3s;
    background: none;
    color: white;
    border: none;
    /*! margin-right: 1rem; */
}

.pop_up .title .button.close .material-icons {
    font-size: 1rem;
}

.pop_up .title .button.close:hover {
    transform: rotate(180deg);
    background: none;
}

.pop_up .pop_up_body {
    padding: 1rem;
    font-size: 0.8125rem;
    background: var(--grey_03);
}

.pop_up .pop_up_body .accept {
    display: flex;
    /*! margin: auto; */
    justify-content: center;
    /*! margin: 1rem 0; */
}





/* notify */
.notify {
    width: 24rem;
    min-width: auto;
}

.notify .title {
    color: white;
    background: var(--primary);
}

.notify .title .button.close {
    color: white;
}

.notify .pop_up_body {
    padding: 1.5rem;
}

.notify .pop_up_body .message {
    margin-bottom: 1rem;
    width: 100%;
    text-align: center;
}

.notify.welldone .title {
    background: var(--green);
}

.notify.warning .title {
    background: var(--red);
}