@font-face {
    font-family: 'MuseoSans';
    src: url('https://cdn.pwm.com/global/ci-font/museo%20sans/MuseoSans_100-webfont.woff2') format('woff2'),
    url('https://cdn.pwm.com/global/ci-font/museo%20sans/MuseoSans_100-webfont.woff') format('woff'),
    url('https://cdn.pwm.com/global/ci-font/museo%20sans/MuseoSans_100-webfont.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'MuseoSans';
    src: url('https://cdn.pwm.com/global/ci-font/museo%20sans/MuseoSans_300-webfont.woff2') format('woff2'),
    url('https://cdn.pwm.com/global/ci-font/museo%20sans/MuseoSans_300-webfont.woff') format('woff'),
    url('https://cdn.pwm.com/global/ci-font/museo%20sans/MuseoSans_300-webfont.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: 'MuseoSans';
    src: url('https://cdn.pwm.com/global/ci-font/museo%20sans/MuseoSans_500-webfont.woff2') format('woff2'),
    url('https://cdn.pwm.com/global/ci-font/museo%20sans/MuseoSans_500-webfont.woff') format('woff'),
    url('https://cdn.pwm.com/global/ci-font/museo%20sans/MuseoSans_500-webfont.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: 'MuseoSans';
    src: url('https://cdn.pwm.com/global/ci-font/museo%20sans/MuseoSans_700-webfont.woff2') format('woff2'),
    url('https://cdn.pwm.com/global/ci-font/museo%20sans/MuseoSans_700-webfont.woff') format('woff'),
    url('https://cdn.pwm.com/global/ci-font/museo%20sans/MuseoSans_700-webfont.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: 'MuseoSans';
    src: url('https://cdn.pwm.com/global/ci-font/museo%20sans/MuseoSans_900-webfont.woff2') format('woff2'),
    url('https://cdn.pwm.com/global/ci-font/museo%20sans/MuseoSans_900-webfont.woff') format('woff'),
    url('https://cdn.pwm.com/global/ci-font/museo%20sans/MuseoSans_900-webfont.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
    font-display: swap
}

body {
    background: url('background-image.jpg');
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-attachment: fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    height: 100%;
    font-size: 1.3em;
    font-family: 'MuseoSans', Arial, sans-serif!Important;
    font-weight: 100!Important;
}

.middle {
    background: url('logo-web-console.svg');
    background-color: white;
    -moz-background-size: contain; /* Firefox */
    -webkit-background-size: contain; /* Safari, Chrome */
    background-size: 70%; /* Opera, IE, W3C Standard */
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
    margin-bottom: 0.4em;
    margin-right: auto;
    height: 200px;
    width: 200px;
    padding: 1em;
    border-radius: 0 0 2.5em 0;
}

.wrapper {
    width: 450px;
    min-width: 300px;
    max-width: 450px;
    display: flex;
    flex-direction: column;
    background-color: #0069b4;
    border-radius: 2.5em 0 2.5em 0;
    overflow: hidden;
}

.contentOfflineMessage {
	color: #fff;
	padding: 10px;
}

.contentOfflineMessage a,
.contentOfflineMessage a:hover {
	color: #fff;
	text-decoration: none;
	text-decoration: underline;
}

.contentOfflineMessage a:hover {
	color: #d9d9d9;
}

.pwmStripeTrans {
    height: 10px;
    background: linear-gradient(120deg, #0069b4 0%, #0069b4 30%, white 30%, white 32%, #2699d6 32%, #2699d6 55%, white 55%, white 57%, #5fc1eb 57%, #5fc1eb 80%,white 80%, white 82%, #ffe400 82%, #ffe400 100%);
}