/* ==========================================================================
   General design
   ========================================================================== */

.md-header, .md-tabs, body {
    background-color: #070f49 !important;
}
.md-main {
    background-color: white;
}


/* ==========================================================================
   Elgato footer
   ========================================================================== */

.md-footer {
    display: none;
}
.elgato-footer-container {
    background-color: #040e39;
    width: 100%;
    height: 100%;
}
.elgato-footer {
    font-size: 0.7rem;
    color: white;
    padding: 25px;
}
.elgato-footer-table {
    display: table;
    width: 100%;
}
.elgato-footer-table-row {
    display: table-row;
}
.elgato-footer-table-cell {
    display: table-cell;
    width: 25%;
}
.elgato-footer-title {
    opacity: 0.5;
    text-transform: uppercase;
    font-weight: bold;
    padding: 10px 0;
}
.elgato-footer-link {
    padding-bottom: 10px;
    opacity: 0.8;
}


/* ==========================================================================
   Elgato footer
   ========================================================================== */

.md-tabs__item:first-child {
	display: none;
}
.md-content__inner {
	margin-bottom: 1.7rem;
}
.md-logo img {
    width: auto !important;
}


/* ==========================================================================
   General design on mobile
   ========================================================================== */
   
@media only screen and (max-width: 76.1875em) {
    .md-nav--primary .md-nav__title, .md-nav__title::before {
        background-color: #1652ff !important;
        color: white !important;
    }
    .md-nav__item > a[title~="Welcome"] {
        display: none;
    }
}


/* ==========================================================================
   Elgato footer on mobile
   ========================================================================== */

@media only screen and (max-width: 768px) {
    .elgato-footer-table-cell {
        display: block;
        width: 100%;
    }
    .elgato-footer-title {
        background-image: url(../images/icon-plus.png);
        background-size: 16px 17px;
        background-position: right 11px;
        background-repeat: no-repeat;
        cursor: pointer;
    }
    .elgato-footer-title-open {
        background-image: url(../images/icon-minus.png);
    }
}


/* ==========================================================================
   iPhone X nodge optimizations
   ========================================================================== */

@supports(padding: max(0px)) {
    @media only screen and (max-width: 60em) {
        .md-content, .md-header-nav, .elgato-footer {
            margin-left: max(0px, env(safe-area-inset-left));
            margin-right: max(0px, env(safe-area-inset-right));
        }
        .md-search__form {
            margin-left: max(0px, calc(env(safe-area-inset-left) - 1.6rem));
            margin-right: max(0px, env(safe-area-inset-right));
        }
        .md-search-result__meta, .md-search-result__article {
            padding-left: max(0.8rem, env(safe-area-inset-left));
            padding-right: max(0.8rem, env(safe-area-inset-right));
        }
        .md-nav__title {
            padding-left: max(0.8rem, calc(env(safe-area-inset-left)) + 0.8rem) !important;
        }
        .md-nav__list, .md-nav__button img {
            padding-left: max(0px, env(safe-area-inset-left));
        }
        .md-nav__icon {
            padding-left: max(0px, env(safe-area-inset-left));
        }
        label.md-search__icon {
            left: max(0.8rem, calc(env(safe-area-inset-left)) - 0.8rem) !important;
        }
    }
}