/***
Browser incompatibility:
- box-shadow:   Opera mini, IE <= 8
- display flex: IE <= 9, IE 10 prefixed -ms-; safari 5.1 prefixed -webkit-; Opera mini
- flex:         IE <= 9, IE 10 prefixed -ms-; safari 5.1 prefixed -webkit-; Opera mini
- align-items:  Safari 7 >= -webkit-; IE <= 10
***/

.gn-menu-main > li:last-child {
    float: none;
    padding: 0;
}

.gn-menu-main {
    border-bottom: 1px solid #9b9b9b;

    background-color: #ffffff;
    line-height: 10px;

    /* flex fallback start */
    display: table-cell;
    /* flex fallback end */
    display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
    display: -ms-flexbox;      /* TWEENER - IE 10 */
    display: -webkit-flex;     /* NEW - Chrome */
    display: flex;

    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    position: fixed;
    z-index: 9994;
    top: 0;
    left: 0;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 40px;

    transition: margin-top 500ms ease 0s;
}

.gn-menu-main.folded {
    margin-top: -40px;
}

.gn-menu-main a,
.gn-menu-main span
.gn-menu-main p,
.gn-menu-main h3,
.gn-menu-main input {
    font-family: "Lato", sans-serif;
}

.amboss-brand-text {
    background-repeat: no-repeat;
    background-size: 250px;
    background-position: center;
    width: 100%;
    height: 38px;
    margin: 0 auto;
}

.brand-text {
    line-height: 0 !important;
}

.brand-text span {
    background-position: center;
    background-repeat: no-repeat;
    background-size: 126px;
    display: inline-block;
    height: 21px;
    margin: 0 auto;
    position: relative;
    width: 126px;
}

.brand-text span.amboss-logo-nosvg-lr,
.svg .brand-text span.amboss-logo-svg {
    display: inline-block;
}

.brand-text span.amboss-logo-svg,
.brand-text span.amboss-logo-nosvg-hr,
.svg .brand-text span.amboss-logo-nosvg-lr {
    display: none;
}

.en_US .amboss-brand-text {
    background-image: none;
}

/* Logos for low-resolution devices as svg + png fallbacks */
.de_DE[data-amboss-global-mode="preclinic"] .amboss-brand-text {
    background-image: url('/images/header/amboss-preclinic@1x.png');
    background-image: url('/images/header/amboss-preclinic.svg'),
        linear-gradient(transparent, transparent);
}

.de_DE[data-amboss-global-mode="clinic"] .amboss-brand-text {
    background-image: url('/images/header/amboss-clinic@1x.png');
    background-image: url('/images/header/amboss-clinic.svg'),
        linear-gradient(transparent, transparent);
}

.de_DE[data-amboss-global-mode="doctor"] .amboss-brand-text {
    background-image: url('/images/header/amboss-doctor@1x.png');
    background-image: url('/images/header/amboss-doctor.svg'),
        linear-gradient(transparent, transparent);
}

/* Logos for high-resolution devices as svg + png fallbacks */
@media (-webkit-min-device-pixel-ratio: 2),
(min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {

    .brand-text span.amboss-logo-nosvg-hr,
    .svg .brand-text span.amboss-logo-svg {
        display: inline-block;
    }

    .brand-text span.amboss-logo-svg,
    .brand-text span.amboss-logo-nosvg-lr,
    .svg .brand-text span.amboss-logo-nosvg-hr {
        display: none;
    }

    .de_DE[data-amboss-global-mode="preclinic"] .amboss-brand-text {
        background-image: url('/images/header/amboss-preclinic@2x.png');
        background-image: url('/images/header/amboss-preclinic.svg'),
        linear-gradient(transparent, transparent);
    }

    .de_DE[data-amboss-global-mode="clinic"] .amboss-brand-text {
        background-image: url('/images/header/amboss-clinic@2x.png');
        background-image: url('/images/header/amboss-clinic.svg'),
        linear-gradient(transparent, transparent);
    }

    .de_DE[data-amboss-global-mode="doctor"] .amboss-brand-text {
        background-image: url('/images/header/amboss-doctor@2x.png');
        background-image: url('/images/header/amboss-doctor.svg'),
        linear-gradient(transparent, transparent);
    }
}

.gn-menu-main > li {
    position: relative;
    float: none;
    height: auto;
    text-align: left;

    /* flex fallback start */
    vertical-align: middle;
    -webkit-align-items: center;     /* Safari 6 & 7 */

    background-color: #f7f7f7;
    border-right-width: 0;

    /* flex fallback start */
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    display: table-cell;
    width: 200px;
    min-width: 200px;          /* Safari 6 & 7 */
    /* flex fallback end */
    display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
    display: -ms-flexbox;      /* TWEENER - IE 10 */
    display: -webkit-flex;     /* NEW - Chrome */
    display: flex;
    -webkit-box-flex: 0;      /* OLD - iOS 6-, Safari 3.1-6 */
    -moz-box-flex: 0;         /* OLD - Firefox 19- */
    -webkit-flex: 0;          /* Chrome */
    -ms-flex: 0 0 200px;      /* IE 10 */
    flex: 0 0 200px;
    align-items: center;

    -webkit-box-ordinal-group: 2;   /* OLD - iOS 6-, Safari 3.1-6 */
    -moz-box-ordinal-group: 2;      /* OLD - Firefox 19- */
    -ms-flex-order: 2;              /* TWEENER - IE 10 */
    -webkit-order: 2;               /* NEW - Chrome */
    order: 2;
}

.gn-menu-main > li > span {
    cursor: pointer;
}

.gn-menu-main > li.small,
.gn-menu-main > li.xsmall,
.gn-menu-main > li.lsmall,
.gn-menu-main > li.test.grey {

    /* flex fallback start */
    vertical-align: middle;
    width: 70px;
    -webkit-align-items: center;     /* Safari 6 & 7 */
    min-width: 70px;                 /* Safari 6 & 7 */
    /* flex fallback end */
    -moz-box-align: center;          /* OLD - Firefox 19- */
    -webkit-box-align: center;       /* OLD - iOS 6-, Safari 3.1-6 */
    -ms-flex-align: center;          /* IE 10 */
    -ms-flex: 0 0 70px;              /* IE 10 */
    flex: 0 0 70px;

    -moz-box-pack: center;          /* OLD - Firefox 19- */
    -webkit-box-pack: center;       /* OLD - iOS 6-, Safari 3.1-6 */
    -ms-flex-pack: center;          /* IE 10 */
    text-align: center;
    font-size: 12px;
    font-weight: 400;
    color: #fff;
    background-color: #9b9b9b;
    line-height: 12px;
}

.gn-menu-main > li.opt-in {
    min-width: 250px;
    margin-left: -160px; /* compensate margin-right: 160px; of li.active.enlarge */
    padding: 0.3em;

    font-size: 12px;
    line-height: 12px;
    background-color: inherit;
}
.gn-menu-main > li.opt-in span {
    display: flex;
    align-items: center; /* to center the link vertically on IE 11  */
    width: 100%;
    height: 100%;
    border-radius: 0.3em;

    color: #fff;
    background-color: #0aa7b9;
    letter-spacing: 0.3px;
}
.gn-menu-main > li.opt-in a {
    margin: auto;

    text-align: center;
    font-weight: bold;
    text-transform: uppercase;

    /* Maximize the link so that the clickable area is as large as the parent */
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}
.gn-menu-main > li.opt-in span:hover {
    background-color: #40c2d4;
}

.gn-menu-main > li.logout a {
    color: #fff;
}

.gn-menu-main .auditor-back {
    opacity: 0;
    pointer-events: none;
    -webkit-pointer-events: none;
}

.amboss-auditor .gn-menu-main .auditor-back {
    opacity: 1;
    pointer-events: auto;
    -webkit-pointer-events: auto;
}

/* Used as auditor "zurück" button */
.amboss-auditor .gn-menu-main .logout + .logout {
    margin-left: 5px;
}

.gn-menu-main > li.xsmall {
    width: 55px;
    min-width: 55px;                /* Safari 6 & 7 */
    -ms-flex: 0 0 55px;             /* IE 10 */
    flex: 0 0 55px;
}

.gn-menu-main > li.lsmall {
    width: 120px;
    min-width: 120px;                /* Safari 6 & 7 */
    -ms-flex: 0 0 120px;             /* IE 10 */
    flex: 0 0 120px;
}

.gn-menu-main > li.xsmall > a {
    width: 100%;
    height: 100%;
    display: inline-block;
}

.gn-menu-main > li.xsmall > a .mi {
    padding: 8px 0;
}

.gn-menu-main > li.lsmall,
.gn-menu-main > li.xsmall {
    border-right: 1px solid white;
}

.gn-menu-main > li.small.active,
.gn-menu-main > li.test {
    background-color: #73c7d8;
}

.gn-menu-main > li.small > span {
    width: 100%;
}

.gn-menu-main > li.enlarge > span {
    display: inline-block;
    margin: 0 auto;
    line-height: 40px;
}

.gn-menu-main > li.active.enlarge {
    /* flex fallback start */
    width: auto;
    /* flex fallback end */
    -webkit-box-flex: 1;      /* OLD - iOS 6-, Safari 3.1-6 */
    -moz-box-flex: 1;         /* OLD - Firefox 19- */
    -webkit-flex: 1;          /* Chrome */
    -ms-flex: 1 1 auto;              /* IE 10 */
    flex: 1 1 auto;
    background-color: #fff;
    text-align: center;
    margin-right: 160px; /* space on the right to center icon in body */
}

@media (max-width: 800px) {
    .gn-menu-main > li.opt-in {
        min-width: 100px;
        flex-basis: 100px;

        font-size: 8px;
        line-height: 10px;
    }
}
@media (max-width: 639px) {
    .gn-menu-main > li.active.enlarge {
        margin-right: 0;
    }
    .gn-menu-main > li.opt-in {
        display: none;
    }
}
@media (max-width: 610px) {
    .gn-menu-main > li.active {
        position: static;
    }

    .gn-menu-main > li.active.enlarge {
        min-width: 0;
    }
    .gn-menu-main > li.active.enlarge > span {
        display: none;
    }
}

.gn-menu-main > li.first,
.gn-menu-main > li.active.second-active {
    -webkit-box-ordinal-group: 1;   /* OLD - iOS 6-, Safari 3.1-6 */
    -moz-box-ordinal-group: 1;      /* OLD - Firefox 19- */
    -ms-flex-order: 1;              /* TWEENER - IE 10 */
    -webkit-order: 1;               /* NEW - Chrome */
    order: 1;
}

.gn-menu-main .active .active-hide,
.gn-menu-main .active-show {
    max-width: 0;
    max-height: 0;
    visibility: hidden;
}

.gn-menu-main .active-hide,
.gn-menu-main .active .active-show {
    max-width: none;
    max-height: none;
    visibility: visible;
}

.gn-menu-main > .lsmall.miamed {
    font-size: 20px;
    font-weight: 600;
    padding-left: 20px;
}

.gn-menu-main > .miamed {
    color: #58585a;
}
.gn-menu-main > .amboss {
    color: #a0a29f;
}
.gn-menu-main > .steigbuegel {
    color: #8e8e8d;
    background-color: #ededed;
}

.gn-menu-main > li.lsmall.active,
.gn-menu-main > li.lsmall:hover {
    background-color: #ffffff;
}

.gn-menu-main > li.lsmall.active a,
.gn-menu-main > li.lsmall:hover a {
    color: #9b9b9b;
}

.gn-menu-main > li.xsmall a {
    position: relative;
}

.gn-menu-main > li.xsmall:hover a:before,
.gn-menu-main > li.xsmall.active a:before {
    position: absolute;
    display: block;
    width: 100%;
    text-align: center;
    background-color: #ffffff;
    max-height: 39px;
    overflow: hidden;
}

.gn-menu-main > li.xsmall.amboss.active a {
    color: #9b9b9b;
}
.gn-menu-main > li.xsmall.amboss:hover {
    background-color: #9b9b9b;
    border-color: #fff;
}
.gn-menu-main > li.xsmall.amboss:hover a {
    color: #fff;
}

.gn-menu-main > li.xsmall.steigbuegel:hover a,
.gn-menu-main > li.xsmall.steigbuegel.active a {
    color: #9b9b9b;
}

.gn-menu-main > li.xsmall.active,
.gn-menu-main > li.lsmall.active,
.gn-menu-main > li.xsmall:hover,
.gn-menu-main > li.lsmall:hover {
    border-right: 1px solid #9b9b9b;
    background-color: #ffffff;
}

li .submenu {
    display: none;

    position: absolute;
    right: -1px;
    top: 40px;
    border: 0 solid #cccccc;
    border-left-width: 1px;
    border-right-width: 1px;
    max-width: 500px;
}

li.enlarge .submenu {
    left: 0;
    right: auto;
}

li.active .submenu {
    display: block;
}

li.active .submenu.hover {
    display: none;
}

li.active:hover .submenu.hover {
    display: block;
}

.submenu > * {
    padding: 1px 20px;
    text-align: left;
}

.submenu * {
    box-sizing: content-box;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
}

.submenu header {
    background-color: #73c7d8;
    color: #ffffff;
}

.submenu header h3 {
    line-height: 45px;
}

.submenu header h3 {
    font-size: 20px;
    margin: 0;
    font-weight: 400;
}

.submenu aside {
    background-color: #ffffff;
    color: #666666;
    padding: 20px;
}

.submenu footer {
    background-color: #58585a;
    color: #ffffff;
    text-align: center;
}

.submenu footer p {
    font-size: 14px;
    line-height: 35px;
}

.h3 {
    font-size: 20px;
}

.submenu aside p {
    font-size: 12px;
    line-height: 16px;
    margin: 1em 0;
}

.submenu aside .strong {
    color: #73c7d8;
    font-size: 16px;
    line-height: 20px;
    font-weight: bold;
}

.submenu aside .small {
    font-size: 10px;
    line-height: 12px;
    color: #999999;
}

.submenu p:first-child {
    margin-top: 0;
}

.submenu p:last-child {
    margin-bottom: 0;
}

.submenu button {
    color: #ffffff;
    background-color: #73c7d8;

    border: 1px solid lightgrey;
    border-top-color: transparent;
    border-bottom-color: grey;

    line-height: 18px;
    font-size: 14px;

    font-weight: bold;
    padding: 5px 35px;
    border-radius: 3px;
}

.right {
    float: right;
}

.clearfix:after {
    clear: both;
    content: "";
    display: table;
}

/*input {
    font-size: 12px;
}*/

.input-group + .input-group {
    margin-top: 8px;
}

.input-group.email input,
.input-group.password input {
    width: 280px;
}

.disabled {
    color: #999999;
}

.js-error-list:before {
    content: "!";
    font-size: 30px;
    font-weight: bold;
    height: 40px;
    left: 0;
    position: absolute;
    text-align: center;
    top: 12px;
    width: 40px;
}

.js-error-list {
    position: relative;

    color: #f9ca7b;
    font-size: 12px;
    font-weight: normal;
    line-height: 20px;
    text-align: left;
    padding: 5px 5px 15px 50px;

    list-style-type: none;
}

strong, .strong {
    font-weight: bold;
}

/* Bootstrap input group */

.input-group {
    border-collapse: separate;
    display: table;
    position: relative;
}

.input-group-addon:first-child {
    border-right: 0 none;
}
.input-group .form-control:first-child, .input-group-addon:first-child, .input-group-btn:first-child > .btn, .input-group-btn:first-child > .btn-group > .btn, .input-group-btn:first-child > .dropdown-toggle, .input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle), .input-group-btn:last-child > .btn-group:not(:last-child) > .btn {
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
}
.input-group-addon {
    background-color: #eee;
    border: 1px solid #ccc;
    border-radius: 4px;
    color: #555;
    font-size: 14px;
    font-weight: 400;
    line-height: 1;
    padding: 6px 12px;
    text-align: center;
}
.input-group-addon, .input-group-btn {
    vertical-align: middle;
    white-space: nowrap;
    width: 1%;
}
.input-group-addon, .input-group-btn, .input-group .form-control {
    display: table-cell;
}

.input-group .form-control:last-child, .input-group-addon:last-child, .input-group-btn:last-child > .btn, .input-group-btn:last-child > .btn-group > .btn, .input-group-btn:last-child > .dropdown-toggle, .input-group-btn:first-child > .btn:not(:first-child), .input-group-btn:first-child > .btn-group:not(:first-child) > .btn {
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
}
.input-group-addon, .input-group-btn, .input-group .form-control {
    display: table-cell;
}
.input-group .form-control {
    float: left;
    margin-bottom: 0;
    position: relative;
    width: 100%;
    z-index: 2;
}
.submenu .form-control {
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
    color: #555;
    display: block;
    font-size: 14px;
    height: 20px;
    line-height: 1.42857;
    padding: 6px 12px;
    transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
    width: 100%;
}

.hidden {
    display: none !important;
    visibility: hidden !important;
}

a.quiet, a.quiet:hover, a.quiet:focus {
    color: inherit;
}

a img {
    border-width: 0;
    vertical-align: middle;
}

.gn-menu-main > li a {
    text-decoration: none;
    color: #fff;
}

.gn-menu-main > li > a,
.gn-menu-main > li > a:hover,
.gn-menu-main > li > a:active,
.gn-menu-main > li > a:visited {
    color: inherit;
}