.nav-bar {
    background: #d6d6d6;
    padding: 10px 15px;
    color: #1a1a1a;
    z-index: 1000;
}

    .nav-bar.fixed {
        top: 55px;
        left: 0;
        width: 100%;
        -webkit-transform: translateZ(0); /* https://bugs.chromium.org/p/chromium/issues/detail?id=288747 */
        position: fixed;
    }

    .nav-bar .title {
        font-weight: 500;
        font-size: 18px;
        line-height: 16px;
    }

    .nav-bar .sub-title {
        font-size: 12px;
    }

	.nav-bar .custom-link {
		font-size: 12px;
		line-height: 20px;
	}

    .nav-bar .back {
        float: left;
        background: none;
        filter: none;
        border: none;
        color: #fff;
        box-shadow: none;
        text-shadow: none;
        border-right: 1px solid rgba(0,0,0,0.15);
        margin: 0 15px 0 0;
        padding: 3px 15px 0 0;
        height: 40px;
    }

        .nav-bar .back:focus {
            outline: none;
        }

    .nav-bar .next {
        float: right;
        height: 32px;
        font-size: 16px;
        margin-top: 4px;
        padding: 0 10px;
        min-width: 74px;   
    }

    .nav-bar .next-withlink {
        float: right;
        height: 32px;
        font-size: 16px;
        margin-top: -4px;
        padding: 0 10px;
        min-width: 74px;
    }

        .nav-bar .next[disabled] {
            color: #a7a7a7;
            border: 1px solid #a7a7a7;
            background: none;
            filter: none;
        }

    /*.nav-bar .error-icon {
        background: url('images/error-icon.svg');
        height: 64px;
        width: 64px;
        opacity: 0.18;
        position: absolute;
        right: -10px;
        bottom: -10px;
        display: none;
    }*/

    .nav-bar .content {
        display: table;
        white-space: normal;
        height: 40px;
    }

        .nav-bar .content-row {
            display: table-row;
        }

        .nav-bar .content-cell {
            display: table-cell;
            vertical-align: middle;
        }

    .nav-bar.no-back-btn {
        padding-left: 20px;
    }

    .nav-bar.no-back-btn .back {
        display: none;
    }

    .nav-bar.no-next-btn.no-step {
        height: 44px;
    }

        .nav-bar.no-next-btn.no-step .back {
            height: 24px;
        }

    .nav-bar.error {
        background: #aa1a1a;
    }

        .nav-bar.error .subtitle {
            color: #fbd1d7;
        }

        .nav-bar.error .error-icon {
            display: block;
        }

.content-area.forward .view-container.showing .nav-bar.fixed {
    animation: showNavbarLeft 200ms cubic-bezier(0.215, 0.61, 0.355, 1);
}

.content-area.forward .view-container.hiding .nav-bar.fixed {
    animation: hideNavbarLeft 200ms cubic-bezier(0.215, 0.61, 0.355, 1);
}

.content-area.backward .view-container.showing .nav-bar.fixed {
    animation: showNavbarRight 200ms cubic-bezier(0.215, 0.61, 0.355, 1);
}

.content-area.backward .view-container.hiding .nav-bar.fixed {
    animation: hideNavbarRight 200ms cubic-bezier(0.215, 0.61, 0.355, 1);
}

.content-area.up .view-container.showing .nav-bar.fixed {
    animation: showNavbarUp 200ms cubic-bezier(0.215, 0.61, 0.355, 1);
}

.content-area.down .view-container.hiding .nav-bar.fixed {
    animation: hideNavbarDown 200ms cubic-bezier(0.215, 0.61, 0.355, 1);
}

@media (min-width: 768px) {
    .nav-bar.fixed {
        top: 66px;
    }

    .content-area.forward .view-container.showing .nav-bar.fixed {
        animation-name: showNavbarLeftSm;
    }

    .content-area.forward .view-container.hiding .nav-bar.fixed {
        animation-name: hideNavbarLeftSm;
    }

    .content-area.backward .view-container.showing .nav-bar.fixed {
        animation-name: showNavbarRightSm;
    }

    .content-area.backward .view-container.hiding .nav-bar.fixed {
        animation-name: hideNavbarRightSm;
    }
}