.popup {
    position: fixed;
    background-color: rgb(56 56 56 / 70%);
    width: 100%;
    height: 100%;
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(4px);
    top: 0;
    left: 0;
}

.popup__body {
    /*margin-top: 10px;*/
    max-height: 400px;
    overflow-y: auto;
}

.popup--tooltip {
    background: none;
    position: absolute;
    bottom: calc(100% + 15px);
    height: auto;
    display: block;
    top: auto !important;
}

.popup__content {
    /*background-color: rgb(0 0 0 / 55%); */
    background: rgb(44 44 44);
    width: 670px;
    /* height: 100%; */
    /* box-shadow: inset 0px 0px 15px 0px black; */
    /* box-shadow: inset 0px 0px 15px 0px #000; */
    text-align: center;
    max-width: 100%;
    padding: 20px;
    /*background: rgb(76 76 76 / 90%);*/
    background: rgb(64 64 64 / 90%);
    /*background: rgb(38 38 38 / 98%);*/
    /* box-shadow: inset 0px 0px 6px 0px #000; */
    border-radius: 5px;
    color: #d9d9d9;
    border: 1px solid #565555;
    
}

.popup--tooltip .popup__content {
    max-width: 100%;
}

.popup--tooltip .popup__content {
	text-align: justify;
}

.popup__head {
    display: flex;
    justify-content: space-between;
}

.popup__body {
    padding-bottom: 10px;
    padding-top: 10px;
}

.popup__close {
    padding: 0 !important;
}

.popup__close.btn--icon svg {
    height: 16px; 
}

.popup__body * { 
    font-size: 18px;
}

.popup--tooltip .popup__content::after {
    content: '';
    position: absolute;
    bottom: -24px; 
    left: 50%;
    transform: translateX(-50%);
    
    border: 12px solid transparent;
    border-top: 12px solid #565555;
}

.popup__head {
    border-bottom: 1px solid #565555;
    padding-bottom: 10px;
    /*margin-bottom: 10px;*/
}

.popup__footer {
    /*margin-top: 10px;*/
    border-top: 1px solid #565555;
    padding-top: 10px;
}

@media (max-width: 768px) {
    .popup__content {
        padding: 12px; 
    }
}
	
@media (max-width: 550px) {
    .popup__content {
        /*max-width: calc(100% - 32px);*/
    }
    
    .popup--tooltip .popup__content {
        max-width: 100%;
    }
}