.popup-main[hidden] {
    display: none;
}

.popup-main {
    position: fixed;
    width: 100%;
    height: 100%;
    /*background-color: rgba(50,50,50,0.45);*/
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: default;
}

.popup-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    padding: 0;
    opacity: 70%;
    background-image: url("../img/bg_pattern_RHP.png");
}

.popup-main span::selection {
    color: inherit;
    background-color: inherit;
}

.popup-body {
    position: absolute;
    width: 20em;
    height: 12em;
    border: 0.15em solid white;
    border-radius: 1em;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: rgb(40,40,40);
    color: rgb(200,200,200);
    padding: 1em;
}


.popup-title-body {
    width: calc(100% - 2em);
    justify-content: center;
    display: flex;
    flex-wrap: wrap;
}
.popup-title-body span,
.popup-text-body span {
    line-height: 1;
}
.popup-input {
    width: 100%;
    height: 1.5em;
    font-size: 1.5em;
}
.popup-text-body {
    width: 100%;
    flex-grow: 1;
    margin: 2em 1em;
}

.popup-btns {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

.popup-btn {
    width: 7em;
    height: 2em;
    background-color: rgb(120,120,120);
    border: 0.15em solid rgb(65,65,65);
    display: flex;
    border-radius: 0.5em;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}
.popup-default-btn {
    background-color: rgb(80,90,120);
}
.popup-btn:hover {
    background-color: black;
    border-color: white;
    color: white;
    transition: all ease 230ms;
}
.popup-btn span {
    line-height: 1;
}