/*
 * The player should take the full size of the responsive container
 */
.kmsisiembed__player > div > * {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

/*
 * ISI wrapper sets the container size for the ISI content,
 * ISI inner takes this size and renders the scroll bars.
 */
.kmsisiembed--isi .kmsisiembed__isi-wrapper {
    position: relative;
}

.kmsisiembed--isi .kmsisiembed__isi-inner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    word-break: break-word;
}

/*
 * Horizontal layout - player is 75% width, ISI is 25% width.
 */
.kmsisiembed--isi.kmsisiembed--horizontal .kmsisiembed__content {
    display: flex;
}

.kmsisiembed--isi.kmsisiembed--horizontal .kmsisiembed__player {
    flex: 3 1 0px;
}

.kmsisiembed--isi.kmsisiembed--horizontal .kmsisiembed__isi-wrapper {
    flex: 1 1 0px;
}

/*
 * Vertical layout - player is 60% height, ISI is 40% height.
 * Player height is 56.25% of the container width, so ISI height is 56.25% * 40% / 60% = 37.5%
 */
.kmsisiembed--isi.kmsisiembed--vertical .kmsisiembed__isi-wrapper {
    padding-bottom: 37.5%;
}


/* Restrict wysiwyg images from overflowing the panel width */
.kmsisiembed__isi-wrapper img {
    max-width: 100%;
}


/*
 * ISI panel styles:
 */
.kmsisiembed__isi__header {
    position: relative;
    padding: 10px;
}

.kmsisiembed__isi__header__icon,
.kmsisiembed__isi__header__text {
    display: inline;
}

.kmsisiembed__isi__header__icon__img {
    margin-right: 6px;
}

.kmsisiembed__isi__header__separator {
    position: absolute;
    bottom: 0;
    left: 10px;
    right: 10px;
    height: 1px;
    background: black;
}

.kmsisiembed__isi__main {
    padding: 10px;
}

.kmsisiembed__isi__footer {
    padding: 10px;
    text-align: center;
    clear: both;
}

.kmsisiembed__isi__footer__logo {
    margin-bottom: 10px;
}

.kmsisiembed__isi__footer__logo__img {
    max-width: 100%;
}