.ui_holder {
    position        : fixed;
    top             : 0;
    left            : 0;
    z-index         : 10;
    background-color: rgba(0, 0, 0, 0.5);
    transition      : ease 0.4s;
    opacity         : 0;
    display         : flex;
    align-items     : center;
    justify-items   : center;
    width           : 100%;
    height          : 100%;
    min-width       : 320px;
}

.ui_popup_headline {
    text-align   : center;
    color        : #424242;
    font-size    : 15px;
    margin-bottom: 5px;
}

.ui_popup_content {
    text-align: center;
    color     : #898989;
    font-size : 13px;
    max-width : calc(100% - 10px);
    padding   : 0 5px 0 5px;
    margin    : 0 auto 20px auto;
    overflow-y: auto;
    overflow-x: hidden;
    word-wrap : break-word;
    max-height: 133px;
}

.ui_popup_holder {
    position        : relative;
    max-width       : 670px;
    max-height      : 320px;
    min-width       : 240px;
    padding         : 20px;
    background-color: rgba(255, 255, 255, 0.9);
    border-radius   : 10px;
    margin          : 0 auto;
    opacity         : 0;
    display         : flex;
    flex-direction  : column;
    justify-items   : center;
    text-align      : center;
    align-items     : center;
}

.ui_tooltip {
    position        : absolute;
    max-width       : 120px;
    word-wrap       : break-word;
    font-size       : 13px;
    padding         : 10px;
    background-color: rgba(255, 255, 255, 0.8);
    border-radius   : 10px;
    border          : 1px solid #efefef;
    box-shadow      : rgba(0, 0, 0, 0.1) 0 3px 6px;
    z-index         : 9;
}

.ui_menu_holder {
    position        : absolute;
    display         : flex;
    flex-direction  : column;
    justify-content : center;
    background-color: white;
    box-shadow      : rgba(0, 0, 0, 0.25) 0 3px 6px;
    overflow        : hidden;
    padding         : 10px 0 10px 0;
    z-index         : 5;
    border-radius   : 5px;
    opacity         : 0;
    transition      : ease 0.3s;
    transform       : scale(0);
    overflow        : hidden;
}

.ui_menu_holder div {
    position        : relative;
    color           : #898989;
    font-size       : 14px;
    padding         : 10px;
    background-color: transparent;
    transition      : ease 0.3s;
}

.ui_menu_holder div:active {
    background-color: #f5f5f5;
    color           : #424242;
}

.ui_popup_date {
    position     : relative;
    width        : calc(100% - 4px);
    font-size    : 16px;
    padding      : 5px;
    outline      : none;
    border       : 2px solid #bbbbbb;
    color        : #424242;
    border-radius: 5px;
    margin       : 5px 0 20px 0;
    transition   : ease 0.3s;
}

.ui_popup_date:focus {
    border-color: #3D7FFF;
    color       : rgba(199, 112, 255, 1)
}


@media(hover:hover) and (pointer:fine) {
    .ui_menu_holder div:hover {
        background-color: #f5f5f5;
        color           : #424242;
    }
}

@media (max-width:710px) and (min-width:0),
(max-width:710px) and (min-device-width:0) {
    .ui_popup_holder {
        width: calc(100% - 80px);
    }
}