/* Details popup layout */
.epg-details-popup {
    position: fixed;
    z-index: 9999;
    top: 0;
    left: 0;

    display: none;
    align-items: center;
    justify-content: center;

    width: 100%;
    height: 100%;

    background: rgba(0, 0, 0, .3);
}

.epg-details-popup.show {
    display: flex;
}

.epg-details-popup .wrap {
    position: relative;
}

.epg-details-popup .wrap > button.close {
    position: absolute;
    z-index: 10;
    top: -22px;
    right: -22px;

    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;

    cursor: pointer;

    border: 0;
    border-radius: 0;
    outline: none;
    background: transparent;
}

.epg-details-popup .wrap > button.close:after {
    font: 20px/30px Arial, Helvetica Neue, Helvetica, sans-serif;
    font-weight: 300;

    position: absolute;
    z-index: 2;
    top: 5px;
    right: 5px;

    box-sizing: border-box;
    width: 30px;
    height: 30px;

    content: '\00D7'; /* Multiplication Sign */
    text-align: center;

    color: #888;
    border-width: 0;
    border-radius: 50%;
    background: #fff;
}

/*noinspection CssOverwrittenProperties*/
.epg-details-popup .container {
    display: flex;

    width: 100%;
    max-width: 703px;
    min-height: 350px;
    max-height: 490px; /* fallback */
    max-height: 85vh;

    box-shadow: #656565 0 0 15px;
}

.epg-details-popup {
    font: normal 12px sans-serif;
}

.epg-details-popup a {
    text-decoration: underline;

    color: #475f82;
}

.epg-details-popup a:hover {
    text-decoration: none;
}

/* Details popup - Main (informer) */
.epg-details-popup .main {
    display: flex;
    overflow: hidden;
    flex-direction: column;

    width: 500px;
    /*height: 460px;*/
    padding: 7px;

    border: 1px solid #999;
    background: #ececec;
}

.epg-details-popup .main h2 {
    font: bold 14px sans-serif;

    flex: none;

    margin-bottom: 10px;

    color: #4073e0;
}

.epg-details-popup .main h2 img {
    display: block;

    max-height: 50px;
    margin-bottom: 10px;
}

.epg-details-popup .main .general-info {
    flex: none;
}

.epg-details-popup .main .general-info > * {
    display: inline;

    margin-right: .5em;
}

.epg-details-popup .main .general-info .comma-separated li {
    display: inline;
}

.epg-details-popup .main .general-info .comma-separated li.date {
    font-weight: bold;
}

.epg-details-popup .main .general-info .comma-separated li:after {
    content: ', ';
}

.epg-details-popup .main .general-info .comma-separated li:last-child:after {
    content: '';
}

.epg-details-popup .main .general-info .links li {
    display: inline-block;

    margin-left: .5em;

    white-space: nowrap;
}

.epg-details-popup .main .general-info .links li img {
    width: 16px;
    height: 16px;
    margin: -8px 0;

    vertical-align: middle;
}

.epg-details-popup .main .images {
    overflow-x: auto;
    flex: none;

    margin: 20px 0 10px;
    padding: 0;
}

.epg-details-popup .main .images ul {
    display: flex;
}

.epg-details-popup .main .images ul li {
    flex: none;

    margin-left: 7px;
}

.epg-details-popup .main .images ul li:first-child {
    margin-left: 0;
}

.epg-details-popup .main .images ul li img {
    height: 120px;

    border: none;
}

.epg-details-popup .main .description {
    overflow-y: auto;
}

.epg-details-popup .main .description > p {
    margin: .5em 0;
}

/* Details popup - sidebar (searcher) */
.epg-details-popup .sidebar {
    display: flex;
    overflow: hidden;
    flex-direction: column;

    width: 172px;
    padding: 7px;

    border: 1px solid #999;
    background: #e6e6e6;
}

.epg-details-popup .sidebar > h3 {
    font: bold 14px sans-serif;

    margin-top: 7px;
    margin-bottom: 3px;

    border-bottom: 1px solid #aaa;
}

.epg-details-popup .sidebar > h3:first-child {
    margin-top: 0;
}

.epg-details-popup .sidebar > hr {
    width: 100%;
    height: 1px;

    border: none;
    background: #aaa;
}

.epg-details-popup .sidebar .persons-wrap {
    overflow-y: auto;
}

.epg-details-popup .sidebar .role {
    font-weight: bold;
}