.HelpPopup {
    width: 24em;
    min-height: 20em;
}

.HelpPopup--simple {
    min-height: 0;
}

.HelpPopup > * {
    visibility: hidden;
}

.HelpPopup--simple > *,
.HelpPopup--initialized > * {
    visibility: visible;
}

.HelpPopup__tabList {
    display: flex;
    border-bottom: 1px solid #ddd;
}

.HelpPopup__tabItem {
    flex: 1 1 100%;
    margin-top: 0.5em;
}

.HelpPopup__tab {
    display: block;
    padding: 0.7em;
    margin-bottom: -1px;
    text-align: center;
    color: #757575;
}

.HelpPopup__tab--active {
    border-bottom: 3px solid;
    font-weight: bold;
    color: #4091bf;
}

.HelpPopup__tab:hover {
    text-decoration: none;
    color: #4091bf;
}

.HelpPopup__tabPanel {
    display: none;
}

.HelpPopup__tabPanel--current {
    display: block;
}

/**
 * Content
 */

.HelpPopup__body {
    padding: 1em;
    color: #3c3c3c;
}

.HelpPopup__title {
    margin: 0 0 1.2em;
    font-size: 0.9em;
    font-weight: normal;
    color: #757575;
    border-bottom: 1px solid #ddd;
    padding-bottom: 0.5em;
}

.HelpPopup__helpCenterItem,
.HelpPopup__releaseNoteItem {
    display: block;
    margin-bottom: 0.7em;
    padding-left: 22px;
    font-weight: bold;
    color: #3c3c3c;
    background: url('assets/file.svg') no-repeat 0 2px;
    background-size: 14px 14px;
    transition: color 0.2s;
}

.HelpPopup__helpCenterItem:hover,
.HelpPopup__releaseNoteItem:hover {
    text-decoration: none;
    color: #337499;
}

.HelpPopup__releaseNoteItem {
    background-image: url('assets/arrow.svg');
}

.HelpPopup__noResults,
.HelpPopup__errorMessage {
    padding-top: 4.5em;
    text-align: center;
    font-weight: bold;
    color: #757575;
    background: url('assets/telescope.svg') no-repeat center 1.8em;
    background-size: 32px 32px;
}

.HelpPopup__errorMessage {
    background-image: url('assets/fragile.svg');
}

/**
 * Bottom
 */

.HelpPopup__bottom {
    border-top: 1px solid #ddd;
    padding: 1em;
    text-align: center;
}

.HelpPopup__tinyText {
    font-size: 0.9em;
    color: #757575;
}

.HelpPopup__button {
    display: block;
    padding: .5em 0.9em;
    border-radius: 4px;
    color: #fff;
    background-color: #4091bf;
    transition: background-color 0.2s;
}

.HelpPopup__button:hover {
    text-decoration: none;
    color: #fff;
    background-color: #337499;
}

/**
 * Search
 */

.HelpPopup__form {
    position: relative;
    padding: 1.25em 1em 0.5em;
}

.HelpPopup__label,
.HelpPopup__formButton {
    position: absolute;
    left: -999em;
}

.HelpPopup__searchInput,
.HelpPopup__searchInput:active,
.HelpPopup__searchInput:focus {
    width: 100%;
    box-sizing: border-box;
    background: #f2f2f2 url('assets/search.svg') no-repeat 0.5em center;
    background-size: 14px 14px;
    border-radius: 4px;
    padding-left: 2.2em;
}

/**
 * Platform info
 */

.HelpPopup__platformInfo {
    display: flex;
    align-items: center;
    padding: 1em;
    background-color: #f2f2f2;
}

.HelpPopup__platformText {
    flex-grow: 1;
}

.HelpPopup__platformName {
    margin: 0;
}

.HelpPopup__platformDetails {
    margin: 0;
    font-size: 0.9em;
}

.HelpPopup__platformDetails a {
    color: #000;
}

.HelpPopup__logo {
    width: 48px;
    height: 48px;
}

.HelpPopup--simple .HelpPopup__platformInfo {
    background: none;
}

/**
 * Loading animation
 */

.HelpPopup__helpCenterResults:empty,
.HelpPopup__releaseNotes:empty,
.HelpPopup {
    background: #fff url('assets/loading.svg') no-repeat center;
}

.HelpPopup__helpCenterResults,
.HelpPopup__releaseNotes {
    min-height: 130px;
}

.HelpPopup--simple,
.HelpPopup--initialized {
    background: none;
}