* {
    margin: 0;
    padding: 0;
    border: 0;
}
html,
body {
    background: #eeeeee;
}
html.plain-page {
    background: #009dda;
}
html.plain-page body {
    background: none;
}
.page-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
.page-body {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.mobile-mainnav-expanded .page-body {
    overflow-y: hidden;
}

/* SS4 Upgrade fucntions */
.ss4-upgrade {
    width: 80%; margin: 40px auto;
    text-align: center;
}
.ss4-upgrade form {
    display: inline-block;
}
.ss4-upgrade .btn-toolbar {
    display: inline-block; margin: 10px;
    padding: 0;
}


/* ================================================================================ GLOBAL ASSETS ========== */
/* ========================================================================================================= */

/*
 * Icons
 * Usage: <span class="icon [small,medium,large] [type] [white,black]"></span>
 */

.icon.small {
    width: 16px;
    height: 16px;
    display: inline-block;
    background: url("../images/icons-small-sprite.png") 0 0 no-repeat;
    margin-bottom: -3px;
}
.menu-item-wrapper .icon.small {
    display: block;
    float: right;
}

.icon.small.plus {
    background-position: 0 0;
}
.icon.small.back {
    background-position: 0 -16px;
}
.icon.small.next {
    background-position: 0 -32px;
}
.icon.small.down-arrow {
    background-position: 0 -48px;
}
.icon.small.right-arrow {
    background-position: 0 -64px;
}
.icon.small.down-pointer {
    background-position: 0 -80px;
}

.icon.small.white.plus {
    background-position: -16px 0;
}
.icon.small.white.back {
    background-position: -16px -16px;
}
.icon.small.white.next {
    background-position: -16px -32px;
}
.icon.small.white.down-arrow {
    background-position: -16px -48px;
}
.icon.small.white.right-arrow {
    background-position: -16px -64px;
}
.icon.small.white.down-pointer {
    background-position: -16px -80px;
}

/*
 * Animations
 * Used by adding .animate to elements
 * We prevent these animations until page has loaded using body.loading
 */

.typography a:not(.calendar-item),
.animate,
button,
input[type="submit"],
.buttonify input + label {
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

.loading .typography a,
.loading .animate,
.loading button,
.loading input[type="submit"],
.buttonify input + label {
    -webkit-transition: none !important;
    -moz-transition: none !important;
    -o-transition: none !important;
    transition: none !important;
}

@-webkit-keyframes pulse {
    0% {
        -webkit-transform: scale(1, 1);
    }
    50% {
        -webkit-transform: scale(1.25, 1.25);
    }
    100% {
        -webkit-transform: scale(1, 1);
    }
}

@keyframes pulse {
    0% {
        transform: scale(1, 1);
    }
    50% {
        transform: scale(1.25, 1.25);
    }
    100% {
        transform: scale(1, 1);
    }
}

.pulse {
    -webkit-animation: pulse 0.8s linear 3;
    animation: pulse 0.8s linear 3;
}

.loader {
    width: 50px;
    height: 50px;
    background: url("../images/loading.gif") 0 0 no-repeat;
}

.loader.small {
    width: 16px;
    height: 16px;
    background: url("../images/loading-small.gif") 0 0 no-repeat;
    display: inline-block;
}

.calendar-container .loader {
    border: 0px solid transparent;
    border-width: 300px 0;
    margin: 0 auto;
}

.job-form .loader.small {
    margin-top: 10px;
}

.settings-form .loader {
    margin: 40px auto;
}

/*
 * Flags
 * Simple highlighted sections of text
 */

.flag {
    background: #eeeeee;
    padding: 2px 4px;
    display: inline-block;
    font-size: 0.9em;
}

.flag.red {
    background: #e73030;
    color: #ffffff;
}

/* Registration */
.register li {
    margin: 0 0 3px 12px;
    padding: 0 0 0 4px;
}
#Form_NewLayerForm_FloorNZMember_Holder label,
#Form_NewRetailerForm_FloorNZMember_Holder label {
    padding: 5px;
}
.Registration .checkboxset li {
    margin-left: 0;
}

/*
 * Full screen popup
 * Used for cricical messages (ie are you sure)
*/

html.fullscreen-popup-active {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.fullscreen-popup {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 100;
    display: none;
    background: #ffffff;
    overflow: auto;
    padding: 0 20px;
}

.fullscreen-popup .fullscreen-popup-close.top {
    position: absolute;
    top: 20px;
    right: 30px;
    font-size: 50px;
}

.fullscreen-popup .fullscreen-popup-close.top:hover {
    color: #e73030;
    cursor: hand;
    cursor: pointer;
}

.fullscreen-popup > .content {
    padding: 50px;
}

.fullscreen-popup .section {
    background: transparent;
}

/**
 * Sponsorship / Ads (ugh)
 * Used primarily on Job page
 **/

.sponsorship {
    padding-top: 40px;
    padding-bottom: 10px;
}
.sponsorship img {
    max-width: 240px;
    height: auto;
    margin: 4px 0 0 0;
}

/* ================================================================================ STRUCTURE ============== */
/* ========================================================================================================= */

.hide {
    display: none !important;
}
.clearme:after {
    display: block;
    content: "";
    clear: both;
}
.clear-both {
    clear: both;
}
.clear-left {
    clear: left;
}
.clear-right {
    clear: right;
}
.skinny-inner {
    max-width: 850px;
    margin: 0 auto;
}
.right {
    text-align: right;
}
.fit {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

/*
 * Column Layouts
 * Creates table-like percentage columns
 * Nested like so: .row > .col.wXX where XX is width in %
 */

.row {
    clear: both;
}

.row.padded {
    padding: 10px 16px;
    border-top: 1px solid #cccccc;
    border-bottom: 1px solid #cccccc;
    margin-top: -1px;
}

.row.headings {
    color: #aaaaaa;
    font-family: "robotobold";
    font-size: 13px;
    border-top: 0;
}

.row .col {
    float: left;
    min-height: 1px;
}

.row .col.padding-top {
    padding-top: 16px;
}
.m-top-20 {
    margin-top: 20px;
}

.w5 {
    width: 5%;
}
.w10 {
    width: 10%;
}
.w15 {
    width: 15%;
}
.w16 {
    width: 16.6667%;
}
.w20 {
    width: 20%;
}
.w25 {
    width: 25%;
}
.w30 {
    width: 30%;
}
.w33 {
    width: 33.3334%;
}
.w35 {
    width: 35%;
}
.w40 {
    width: 40%;
}
.w45 {
    width: 45%;
}
.w50 {
    width: 50%;
}
.w55 {
    width: 55%;
}
.w60 {
    width: 60%;
}
.w65 {
    width: 65%;
}
.w66 {
    width: 66.6667%;
}
.w70 {
    width: 70%;
}
.w75 {
    width: 75%;
}
.w80 {
    width: 80%;
}
.w83 {
    width: 83.3334%;
}
.w85 {
    width: 85%;
}
.w90 {
    width: 90%;
}
.w95 {
    width: 95%;
}
.w100 {
    width: 100%;
}

.data-table .headings {
    padding: 0 20px 10px 20px;
    border-bottom: 3px solid #000000;
    font-size: 1.1em;
}
.data-table a.row:not(.headings),
.data-table .hazard-register.row:not(.headings) {
    padding: 20px;
    border-top: 1px solid #eeeeee;
    border-bottom: 1px solid #eeeeee;
    margin-bottom: -1px;
    font-size: 1.1em;
    cursor: pointer;
    position: relative;
    display: block;
    text-decoration: none;
    color: #000000;
}
.data-table.messages a.row {
    border: 0;
}
.data-table.messages td.sorting_1 {
    text-align: center;
}
.data-table .row.bold {
    font-family: "robotobold";
}
.data-table .row .icon {
    position: absolute;
    top: 20px;
    left: 20px;
}
.data-table .row .col.date {
    padding-left: 30px;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}
.data-table .row:not(.headings):hover {
    background: #f5f5f5;
    color: #009dda;
}
.data-table .row:not(.headings):hover .user-picture .overlay.short-notice {
    background-image: url(../images/picture-overlay-sn.png);
}
/* Pagination */
.data-table .pagination {
    margin-top: 20px;
    font-family: "robotobold";
    font-size: 14px;
    text-align: center;
}
.data-table .pagination a,
.data-table strong {
    padding: 8px 11px;
    text-decoration: none;
}
.data-table .pagination a.button {
    margin: 0 8px;
}
.data-table .pagination a .fa {
    font-size: 12px;
}
.data-table .pagination a .fa-chevron-left {
    margin-right: 10px;
}
.data-table .pagination a .fa-chevron-right {
    margin-left: 10px;
}

/*
 * Quick and easy floaters
 * Pull an element left- or right
*/

.pull-left {
    float: left;
}

.pull-right {
    float: right;
}

/*
 * Data viewer rows
 * ie Job Details, Profile page
*/

.mini-data-table .row {
    padding: 4px 8px;
    font-size: 1.1em;
}

.mini-data-table .row > .label,
.mini-data-table .row > label {
    font-family: "robotobold";
}

/*
 * Sections
 * Base framework for horizontal sections (ie foot, body)
 */

.section {
    background: #ffffff;
    clear: both;
}

.section.main {
    padding-bottom: 30px;
    position: relative;
}

.section.main > .inner,
.section.foot > .inner {
    padding-left: 20px;
    padding-right: 20px;
    width: 100%;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}

.section > .inner.padding-top {
    padding-top: 30px;
}

.section.foot {
    background: transparent;
    position: relative;
}

/*
 * Heading for Plain Pages
 * These are public-facing pages (login, registration, etc)
 */

.plain-page .page-head {
    padding: 30px 0 20px;
    background: #ffffff;
}

.plain-page .page-head .branding {
    width: auto;
    height: auto;
    float: none;
    display: inline-block;
    padding: 0;
}

.plain-page .page-head .page-title {
    float: right;
}

.plain-page .section {
    max-width: 980px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 20px;
}

.plain-page .section.main {
    top: 0;
    margin-bottom: 50px;
}

/* ================================================================================ TOOLBAR ================ */
/* ========================================================================================================= */

/*.page-head {
	z-index: 99;
}*/

.page-head .branding {
    display: inline-block;
    float: left;
    padding: 12px 0 0 12px;
    max-width: 232px;
    width: 37%;
    height: 58px;
    text-align: center;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}

.page-head .branding img {
    width: auto;
    margin: auto;
    height: 58px;
}

.head-toolbar {
    padding-left: 280px;
}

.head-toolbar > .liner {
    height: 70px;
    background: #000000;
    color: #ffffff;
    position: relative;
}

.head-toolbar .background-cap {
    background: url("../images/head-toolbar-bg.png") bottom left no-repeat;
    width: 25px;
    height: 70px;
    position: absolute;
    top: 0;
    left: -25px;
}

.page-title {
    padding-top: 26px;
    float: left;
}
.page-title .text {
    display: inline-block;
    font-family: "robotobold";
    font-size: 22px;
    line-height: 28px;
}
.page-title i {
    font-size: 28px;
}
.page-title .mobile-toolbar i {
    font-size: 22px;
    padding: 5px;
}
.page-title .mobile-toolbar .current-display-date {
    font-size: 18px;
    padding-left: 10px;
}

/*
 * Menu: Primary
 * Core page types, represented with icons
*/

#mainnav {
    float: right;
    padding-right: 20px;
}

#mainnav .menu-item,
#mainnav-shortnotice .menu-item,
#mainnav-tutorial .menu-item {
    color: #ffffff;
    text-decoration: none;
    padding: 18px 3px 10px;
    margin: 0px 6px;
    min-width: 22px;
    text-align: center;
    display: inline-block;
    font-size: 28px;
    line-height: 38px;
    background: transparent;
    position: relative;
    cursor: pointer;
    border-bottom: 4px solid transparent;
}
#mainnav .menu-item.last {
    padding: 18px 0 10px 3px;
    margin: 0px 0px 0px 6px;
}
#mainnav .menu-item.highlight,
#mobile-mainnav .menu-item.highlight,
#mainnav-shortnotice .menu-item.highlight {
    color: #e73030;
}
#mainnav-shortnotice .menu-item {
    display: none;
}
#mainnav-shortnotice .menu-item.highlight {
    display: block;
}
#mainnav .menu-item.current,
#mainnav .menu-item.section {
    border-color: #009dda;
}

#mainnav .menu-item .label {
    display: none;
}

#mobile-mainnav-trigger .count-dot,
#mobile-mainnav .count-dot,
#mainnav .count-dot,
#mainnav-shortnotice .count-dot {
    position: absolute;
    top: 18px;
    right: 4px;
    background: #61bd2a;
    color: #ffffff;
    font-family: "robotobold";
    font-size: 10px;
    min-width: 12px;
    min-height: 16px;
    padding: 2px 3px 0px 3px;
    text-align: center;
    border-radius: 50px;
    display: none;
    line-height: 14px;
}

#mainnav .count-dot.show,
#mainnav-shortnotice .count-dot.show {
    display: block;
}

#mainnav .count-dot.bookings,
#mainnav-shortnotice .count-dot.bookings {
    right: auto;
    left: 4px;
}

/**
 * Mobile version of the main menu
 *
 * Uses some extra elements, but is based on the mainnav html markup
 **/
#mobile-mainnav-trigger,
#mainnav-shortnotice,
#mainnav-tutorial {
    display: none;
    font-family: FontAwesome, sans-serif;
    font-size: 26px;
    float: right;
    cursor: pointer;
}
#mobile-mainnav-trigger {
    padding: 22px;
}
#mobile-mainnav-trigger .fa {
    display: block;
}
/*
#mainnav-shortnotice {
	margin: 11px 16px 0 0;
}
*/
#mainnav-shortnotice.show {
    display: block;
}
#mainnav-shortnotice .menu-item,
#mainnav-tutorial .menu-item {
    line-height: 26px;
}
#mainnav-shortnotice .fa,
#mainnav-tutorial .fa {
    font-size: 26px;
    line-height: 26px;
}
#mobile-mainnav {
    overflow-y: auto;
    position: fixed;
    background: #000000;
    top: 0;
    bottom: 0;
    z-index: 9999;
    right: 99999px;
}
#mobile-mainnav > .overlay {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 15px;
    z-index: 9;
    background: url("../images/mobile-mainnav-overlay.png") 0 0 repeat-y;
}
#mobile-mainnav a {
    text-decoration: none;
}
#mobile-mainnav .branding {
    background: #ffffff;
    padding-top: 3px;
    padding-bottom: 2px;
    text-align: center;
    display: block;
}
#mobile-mainnav .branding img.custom-branding {
    max-width: 220px;
}
#mobile-mainnav .menu-item {
    display: block;
    color: #fff;
    text-decoration: none;
    font-size: 18px;
    border-bottom: 1px solid #333333;
    padding: 15px 20px;
}
#mobile-mainnav .menu-item > .fa {
    min-width: 1.2em;
}
#mobile-mainnav .menu-item > .label {
    margin: 0 5px;
}
#mobile-mainnav-trigger .count-dot,
#mobile-mainnav .menu-item span .count-dot {
    display: none;
}
.mobile-mainnav-expanded #mobile-mainnav-trigger .count-dot {
    display: none !important;
}
#mobile-mainnav-trigger .count-dot {
    position: absolute;
    right: 12px;
    top: 17px;
    font-family: "robotoregular", sans-serif;
}
#mainnav-shortnotice .count-dot {
    position: absolute;
    right: -8px;
    top: -4px;
    font-family: "robotoregular", sans-serif;
}
.mobile-mainnav-collapsed #mobile-mainnav-trigger .fa-close,
.mobile-mainnav-expanded #mobile-mainnav-trigger .fa-bars {
    display: none;
}
#mobile-mainnav-trigger .count-dot.show {
    display: block;
}
#mobile-mainnav .count-dot.show {
    display: inline-block;
    position: static;
}
#mobile-mainnav .menu-item-wrapper.section,
#mobile-mainnav .menu-item-wrapper.current {
    background: #222222;
}
#mobile-mainnav .menu-item:focus {
    background: #009dda;
}
/* mainnav sub items */
#mobile-mainnav .sub-menu {
    display: none;
}
#mobile-mainnav .show-section .sub-menu {
    display: block;
    list-style-type: none;
    background: #222222;
}
#mobile-mainnav .sub-menu li {
    padding-left: 48px;
    border-bottom: 1px solid #333333;
}
#mobile-mainnav .sub-menu a {
    padding: 15px 5px;
    display: block;
    cursor: hand;
    cursor: pointer;
    color: #ffffff;
}
#mobile-mainnav .sub-menu.calendar > li {
    margin-right: 10px;
    display: inline-block;
}
#mobile-mainnav .sub-menu > li.current .sub-menu-item,
#mobile-mainnav .sub-menu > li .sub-menu-item.current {
    color: #c0c0c0;
}
/* icons */
#mobile-mainnav .icon.down-arrow,
#mobile-mainnav .show-section .icon.right-arrow,
#mobile-mainnav .show-section .no-sub .icon.down-arrow,
#mobile-mainnav .show-section .no-sub .icon.right-arrow,
#mobile-mainnav .no-sub .icon.down-arrow,
#mobile-mainnav .no-sub .icon.right-arrow {
    display: none;
}
#mobile-mainnav .show-section .icon.down-arrow {
    display: block;
}

/*
 * Menu: Toolbar
 * Provides tools for calendar, and framework for submenu
*/

.section.toolbar {
    width: 100%;
    padding-top: 20px;
    padding-bottom: 20px;
}

.menu.toolbar {
    margin: 0 20px;
    border-radius: 4px;
    background-color: #e6e6e6;
}

.menu.toolbar > .liner {
    min-height: 40px;
    padding: 0 10px;
}

.menu.toolbar .toolbar-section {
    display: inline-block;
    float: left;
}

.menu.toolbar .toolbar-item,
.menu.toolbar .toolbar-section .label,
.menu.toolbar a.pending-jobs {
    padding: 11px 15px 10px 5px;
    line-height: 18px;
    font-family: "robotomedium";
    font-size: 1.18em;
    display: inline-block;
    text-decoration: none;
    color: #000000;
}
.Calendar .menu.toolbar .toolbar-item.datepicker-button,
.MeasureCalendar .menu.toolbar .toolbar-item.datepicker-button {
    padding-right: 0;
}
.ui-datepicker {
    z-index: 9999 !important;
}

.menu.toolbar .toolbar-section.filtered .toolbar-item {
    float: right;
    color: #e73030;
}

.menu.toolbar .toolbar-item.current,
.menu.toolbar .toolbar-item:hover:not(.not-clickable),
.menu.toolbar a.pending-jobs:hover {
    color: #009dda;
    cursor: pointer;
}

.menu.toolbar .toolbar-item.confirmation:not(.confirming) .confirmation-text,
.menu.toolbar .toolbar-item.confirmation.confirming .text {
    display: none;
}

.menu.toolbar .toolbar-section {
    display: inline-block;
}

.menu.toolbar .toolbar-section .label {
    font-family: "robotobold";
    color: #999999;
}

.menu.toolbar .pull-right {
    float: right;
}

.menu.toolbar .toolbar-section.absolute-center {
    text-align: center;
}

/*
 * Menu: Sidebar
 * Used primarily in the Settings area
*/

.menu.sidebar {
    padding-top: 20px;
}

.menu.sidebar > .liner {
    padding-right: 30px;
    margin-right: 50px;
    border-right: 3px solid #000000;
}

.menu.sidebar .menu-item {
    padding: 10px 0;
    text-align: right;
}

.menu.sidebar .menu-item a {
    color: #000000;
    text-decoration: none;
    font-size: 1.4em;
    font-family: "robotobold";
}

.menu.sidebar .menu-item a:hover {
    color: #666666;
}

.menu.sidebar .menu-item.current a {
    color: #069edb;
}

/*
 * Messages: Global
 * Popup messages used for errors, confirmations and info
*/

.page-message-container {
    position: fixed;
    bottom: 0;
    right: 30px;
    z-index: 9;
}

.page-message,
.global-message {
    background: #ffdb5c;
    padding: 14px 20px;
    color: #000000;
    text-align: center;
    margin-bottom: 10px;
    display: block;
    text-decoration: none;
}

.global-message {
    margin-bottom: 0;
    padding: 10px;
}

.message-content td {
    padding: 5px;
}

.page-message .message-content a {
    color: inherit;
}

.page-message .close {
    position: absolute;
    top: 0;
    right: 0;
    color: #888888;
    padding: 5px;
    width: 1em;
    height: 1em;
    line-height: 1em;
}

.page-message.bad,
.global-message.bad,
.page-message.stay {
    background: #e73030;
    color: #ffffff;
}

.page-message.good,
.global-message.good {
    background: #3ed22f;
    color: #ffffff;
}

.page-message.short-notice {
    border-radius: 60px;
    bottom: 10px;
    padding: 8px;
}

.page-message.short-notice .close {
    top: -10px;
    right: -6px;
}

.page-message.short-notice .thumbnail {
    border-radius: 60px;
    width: 60px;
    height: 60px;
    display: block;
    float: left;
    margin-right: 20px;
    background-position: 50% 50%;
    background-size: cover;
}

.page-message.short-notice .message-content {
    text-align: left;
    width: 300px;
    padding-top: 12px;
    font-family: "robotomedium";
    font-size: 14px;
}

/*
 * Popup alerts used for warnings
*/
.popup-alert-container {
    width: 100%;
    height: 100%;
    display: none;
    position: fixed;
    z-index: 101;
    text-align: center;
    background: url(../images/background-black-70.png) repeat;
}
.popup-alert-container .popup-alert {
    display: none;
}
.popup-alert-container .popup-alert.active {
    display: inline-block;
}
.popup-alert-content {
    display: none;
}
.popup-alert-container .popup-alert {
    width: 25%;
    -webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
    box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
}
.popup-alert {
    position: relative;
}
.popup-alert.typography p.help-message {
    margin: 0;
    padding: 30px;
    border-radius: 0;
    -webkit-border-top-right-radius: 4px;
    -webkit-border-top-left-radius: 4px;
    -moz-border-radius-topright: 4px;
    -moz-border-radius-topleft: 4px;
    border-top-right-radius: 4px;
    border-top-left-radius: 4px;
}
.popup-alert.typography.installer-request p.help-message {
    background-color: #5eaf01;
}
.popup-alert.typography.installer-request p.help-message span.heading {
    margin-bottom: 3px;
    font-family: "robotobold";
    font-size: 14px;
    display: inline-block;
}
.popup-alert .close.button.black {
    width: 100%;
    margin: 0;
    text-align: center;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-border-bottom-right-radius: 4px;
    -webkit-border-bottom-left-radius: 4px;
    -moz-border-radius-bottomright: 4px;
    -moz-border-radius-bottomleft: 4px;
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
}
.popup-alert .close:hover {
    cursor: hand;
    cursor: pointer;
}
.popup-alert .close.button.black span {
    display: inline-block;
}

/*
 * Fixed-position hold timer
 * Used mainly on Job pages
*/

.hold-counter {
    position: fixed;
    bottom: 0;
    left: 5%;
    background: #e73030;
    color: #ffffff;
    font-size: 18px;
    padding: 10px 20px;
    text-align: center;
    display: none;
}

/* Help notices */
/* instructions styles shortnotice.css to compile here */
.typography p.help-message,
.typography div.help-message {
    margin: 20px 0;
    padding: 11px 18px;
    line-height: 19px;
    color: #ffffff;
    border-radius: 4px;
    background-color: #009dda;
}
p.help-message a.intercom-launcher,
p.help-message a.intercom-launcher:hover {
    color: #fff;
}

/* Notifications */
.notification-alert-container {
    display: none;
    position: fixed;
    z-index: 101;
    bottom: 0;
    right: 30px;
    z-index: 9;
}
.notification-alert-content {
    display: none;
}
.popup-notification {
    margin: 0 0 20px 10px;
    padding: 8px;
    display: block;
    position: relative;
    bottom: 10px;
    text-align: center;
    text-decoration: none;
    background: #009dda;
    border-radius: 60px;
}
.popup-notification:hover {
    background-color: #000;
}
.popup-notification .close {
    position: absolute;
    cursor: pointer;
    top: -10px;
    right: -6px;
    color: #888888;
    padding: 5px;
    width: 1em;
    height: 1em;
    line-height: 1em;
}
.notification-message {
    color: #fff;
    text-decoration: none;
}
.popup-notification .liner {
    display: table;
}
.popup-notification .thumbnail {
    width: 60px;
    padding: 12px;
    display: table-cell;
    vertical-align: middle;
}
.popup-notification .thumbnail span {
    width: 60px;
    height: 60px;
    border-radius: 60px;
    display: block;
    background-color: #fff;
}
.popup-notification .thumbnail img {
    width: 46px;
    margin-top: 12px;
}
.popup-notification .message-content {
    width: 300px;
    padding: 12px;
    display: table-cell;
    vertical-align: middle;

    font-family: "robotomedium";
    font-size: 14px;
    text-align: left;
}

/* ================================================================================ CALENDAR VIEWS ========= */
/* ========================================================================================================= */

.calendar .day .day-number {
    padding: 7px 3px;
    font-family: "robotobold";
    word-wrap: break-word;
}
.typography .calendar-item {
    text-decoration: none;
    color: #000000;
}
.typography .calendar-item.unavailability > .liner,
.typography .calendar-item.unavailability > .liner:not(.has-pattern) .colour-stripe {
    background-image: url("../images/striped-overlay.png");
}
.typography .calendar-item > .liner {
    padding: 5px 5px;
    background: #fdb649;
    display: block;
    height: 100%;
    border-bottom: 1px solid rgba(0, 0, 0, 0.15);
    border-right: 1px solid rgba(0, 0, 0, 0.05);
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    margin-bottom: 4px;
    margin-left: 4px;
    margin-right: 4px;
}
.typography.calendar .calendar-item .liner > .calendar-icon-holder {
    position: absolute;
    top: 4px;
    right: 3px;
}
.typography.calendar .calendar-item span.calendar-icon,
.typography.calendar .board-view .calendar-item > .liner span.calendar-icon {
    display: block;
    float: right;
}
.typography.calendar .board-view .calendar-item > .liner span.calendar-icon {
    clear: right;
}
/* hide HR if VR is completed */
.typography.calendar
    .calendar-item
    > .liner
    .calendar-icon-holder.vr-completed
    span.calendar-icon.hr {
    display: none;
}
.typography.calendar .calendar-item span.calendar-icon .complete,
.typography.calendar .calendar-item span.calendar-icon.retailer .paid,
.typography.calendar
    .board-view
    .calendar-item
    > .liner
    span.calendar-icon
    .complete,
.typography.calendar .calendar-item span.calendar-icon .confirmed {
    color: #3ed22f !important;
}
.typography.calendar .calendar-item span.calendar-icon .draft,
.typography.calendar
    .board-view
    .calendar-item
    > .liner
    span.calendar-icon
    .draft,
.typography.calendar .calendar-item span.calendar-icon .invoiced {
    color: #e73030 !important;
}
.typography.calendar .calendar-item span.calendar-icon .fa,
.typography.calendar
    .board-view
    .calendar-item
    > .liner
    span.calendar-icon
    .fa {
    width: 15px;
    margin-left: 1px;
    font-size: 10px;
    line-height: 15px;
    color: #000;
    text-align: center;
    display: block;
    background-color: #fff;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}
/* 16 slots */
.typography.calendar .board-view .calendar-item > .liner span.calendar-icon {
    width: 100%;
}
.typography.calendar.curtain-studios
    .board-view
    .calendar-item
    > .liner
    span.calendar-icon
    .fa {
    width: 7px;
    margin: 1px auto;
    font-size: 4px;
    line-height: 7px;
}

.typography .calendar-item:hover {
    color: #000000;
}

.typography .calendar-item .hold-timer {
    display: block;
    color: #ffffff;
    position: absolute;
    top: -2px;
    right: -2px;
    bottom: -2px;
    font-size: 0.85em;
    padding: 7px 8px 0px;
    background: #e73030;
}

.typography .calendar-item.draft > .liner,
.typography .calendar-item.hold > .liner {
    padding: 4px 3px 3px;
    border-width: 2px;
    border-style: dashed;
    background: #ffffff !important;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}
.typography .calendar-item.pending > .liner {
    padding: 4px 3px 3px;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    border: 1px dashed;
    background: #fff;
}
.typography .calendar-item.cancelled > .liner {
    background-color: #f90000 !important;
}
/*
.typography .calendar-item.complete > .liner {
	background: #008000 !important;
}
*/
.calendar .day {
    position: relative;
}

.calendar .day .add-job-button {
    background: #000000;
    padding: 5px 0 6px;
    color: #ffffff;
    text-align: center;
    cursor: pointer;
    z-index: 3;
    display: none;
    font-family: "robotobold";
    margin: 0 5px;
}

/*
 * Calendar Standard elements
 * Base styles for all calendar elements
*/
.calendar .day .day-jobs,
.calendar .day .day-measure-jobs {
    position: relative;
    z-index: 2;
}

.calendar .day > .liner {
    border-left: 1px solid #cccccc;
    border-top: 1px solid #cccccc;
    position: relative;
}

.calendar .day.first-week > .liner {
    border-top: 0;
}

.calendar .day.first-of-week > .liner {
    border-left: 0;
}

.calendar .day.out-of-month > .liner {
    background: #eeeeee;
}

.calendar .day.first-week.today > .liner {
    margin-top: -1px;
}

.calendar .day.today > .liner {
    margin-right: -1px;
    margin-bottom: -1px;
    z-index: 2;
}
.calendar .month-view .day.today > .liner,
.calendar .week-view .day.today > .liner {
    border: 1px solid red !important;
}
.calendar .day.historical > .liner .day-number,
.calendar .day.historical > .liner .day-heading,
.calendar .day.historical > .liner .day-jobs,
.calendar .day.historical > .liner .day-measure-jobs,
.calendar .day.historical > .liner .supporting-items,
.calendar .day.out-of-month > .liner .day-number,
.calendar .day.out-of-month > .liner .day-heading,
.calendar .day.out-of-month > .liner .day-jobs,
.calendar .day.out-of-month > .liner .day-measure-jobs,
.calendar .day.out-of-month > .liner .supporting-items {
    opacity: 0.4;
}

.calendar .view.list-view .day-jobs .calendar-item .list-view-content,
.calendar .view:not(.list-view) .day-jobs .calendar-item .default-view-content,
.calendar .view.list-view .day-measure-jobs .calendar-item .list-view-content,
.calendar
    .view:not(.list-view)
    .day-measure-jobs
    .calendar-item
    .default-view-content {
    display: block;
}

.calendar .view.list-view .day-jobs .calendar-item .default-view-content,
.calendar .view:not(.list-view) .day-jobs .calendar-item .list-view-content,
.calendar
    .view.list-view
    .day-measure-jobs
    .calendar-item
    .default-view-content,
.calendar
    .view:not(.list-view)
    .day-measure-jobs
    .calendar-item
    .list-view-content {
    display: none;
}

.calendar .calendar-item .colour-stripe {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 8px;
}

/* --- popup panels --- */

.popup-panel {
    position: absolute;
    left: 50%;
    margin-left: -130px;
    width: 260px;
    z-index: 99;
}

.popup-panel > .liner {
    padding: 10px 14px;
    color: #ffffff;
    background: #000000;
    position: relative;
}

.popup-panel .close-panel-button {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    padding: 9px;
    font-size: 16px;
    color: #ffffff;
    cursor: pointer;
    z-index: 1;
}

.popup-panel .icon.down-pointer {
    position: absolute;
    bottom: -12px;
    left: 50%;
    margin-left: -8px;
}

.popup-panel .panel-heading {
    margin: -10px -14px 14px;
    padding: 10px 14px;
    background: #333333;
    font-family: "robotobold";
}

.popup-panel .panel-heading .fa {
    display: inline-block;
    vertical-align: top;
    padding-top: 1px;
}

.popup-panel .actions {
    padding: 12px 0 4px 0;
    text-align: left;
}
.popup-panel .actions .button.small {
    margin-top: 2px;
}

.calendar .day.holiday {
    background: #eeeeee;
}
.calendar .day.holiday .date {
    color: #e73030;
    cursor: pointer;
}

/*
.calendar .day.holiday .number {
	width: 20px; height: 20px; padding: 2px;
	display: block; float: left;
	line-height: 20px; text-align: center;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	background: #e73030;
}
*/

/* --- calendar holidays ---
.calendar .day.holiday .number {
	width: 20px; height: 20px; padding: 2px;
	display: block; float: left;
	line-height: 20px; text-align: center;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	background: #e73030;
}
.icon.down-arrow-black {
	width: 16px;
	height: 16px;
	display: inline-block;
	background: url('../images/icons-large-arrow-up-black.png') 0 0 no-repeat;
	margin-bottom: -3px;
}
.menu-item-wrapper .icon.small {
	display: block; float: right;
}
.day-number .number {
	cursor: pointer;
}
.day .holiday.panel {
	width: 98%;
	position: absolute; left: 1%; top: 5px;
	z-index: 99;
}
	.day .holiday.panel .liner {
		padding: 10px 14px;
		color: #FFFFFF;
		background: #000000;
		position: relative;
	}
*/

/* --- calendar day supporting items (positioned top right) --- */

.calendar .day .supporting-items {
    position: absolute;
    top: 6px;
    right: 2px;
    left: auto;
    z-index: 2;
}

.calendar .day-view .day .supporting-items {
    top: -28px;
}

.calendar .day .supporting-items .day-short-notice-jobs,
.calendar .day .supporting-items .day-notes {
    display: block;
    float: right;
}

/* --- short notice job items --- */

.calendar .day .day-short-notice-jobs .calendar-item {
    width: 20px;
    height: 20px;
    display: block;
    float: right;
}

.calendar .day .day-short-notice-jobs .calendar-item > .liner {
    /*background-image: url('../images/white-angle-overlay.png');
	background-position: 50% 50%;*/
    background: none;
    text-align: center;
    border: 0;
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
}

.calendar .day .day-short-notice-jobs .calendar-item > .liner .fa {
    font-size: 17px;
}

.calendar .list-view .day .calendar-item > .liner > .fa {
    display: none;
}

/* --- day notes --- */

.calendar .day .day-notes .calendar-item {
    display: block;
    float: right;
}

.calendar .day .day-notes .calendar-item > .liner {
    width: 20px;
    border: 0;
    padding: 0;
    margin: 0;
    background: none;
    color: #de9230;
    font-size: 16px;
    text-align: center;
}

.calendar .day .day-notes .calendar-item > .liner > .fa {
    cursor: default;
}

/* --- job info panel --- */
.job-info-panel .user-panel-wrapper {
    padding-bottom: 10px;
}
.job-info-panel .label {
    width: 25%;
    display: inline-block;
    font-family: "robotomedium";
}
.job-info-panel p {
    padding-top: 3px;
}

/* --- add job popup panel --- */

.add-job-panel,
.holidays-panel {
    margin-left: -90px;
    width: 182px;
}

.add-job-panel .link-item {
    padding: 2px 0;
    cursor: pointer;
}

.add-job-panel .link-item:hover {
    color: #ff8400;
}

.add-job-panel a {
    color: #ffffff;
    text-decoration: none;
}

/* --- time slots --- */
.calendar .day .slots {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
}
.calendar .day .slot-item {
    height: 25%;
    border-bottom: 1px dashed #dddddd;
    margin-bottom: -1px;
}
.calendar .day .slot-item:last-child {
    border-bottom: none;
}
.calendar .day .slot-item .day-jobs,
.calendar .day .slot-item .day-measure-jobs {
    padding-top: 5px;
}

/*
 * Calendar Slot selector view (based on week view)
 * Styles for a week view when selecting job slots (5-days)
*/

.calendar .week-view .day .slots {
    top: 50px;
}

.calendar .week-view .day > .liner {
    min-height: 200px;
}

.calendar .week-view .day .calendar-item > .liner,
.calendar .month-view .day .calendar-item > .liner,
.calendar .day-view .day .calendar-item > .liner {
    word-wrap: break-word;
}
.MeasureCalendar .calendar .week-view .day .calendar-item > .liner {
    word-wrap: normal;
}

.calendar .week-view .day .calendar-item.short-notice-job {
    top: -35px;
}

/*
 * Calendar Month View
 * Styles for a full-blown month view
*/

.calendar .month-view .day > .liner {
    height: 220px;
    overflow-y: hidden;
}

.calendar .week-view .day-labels .label-item,
.calendar .month-view .day-labels .label-item {
    font-size: 2.2em;
    text-align: center;
    padding: 30px 0;
}

.calendar .week-view .day-labels .label-item,
.calendar .month-view .day-labels .label-item,
.calendar .month-view .day {
    width: 14.2857%;
    float: left;
}

.calendar .month-view .day:nth-child(7n + 2) > .liner {
    border-left: transparent;
}

.calendar .month-view .day:nth-child(-n + 8) > .liner {
    border-top: transparent;
}

.calendar .month-view .day:nth-child(-n + 8).today > .liner {
    border-top: transparent;
    margin-top: -1px;
}

.calendar .month-view .calendar-item > .liner {
    margin-bottom: 1px;
}

/* limit text to one line */
.calendar .month-view .calendar-item .liner > span {
    white-space: nowrap;
    overflow: scroll;
}

/**
 * Condensed version of jobs when too many jobs to comfortably fit (month view only)
 * Also reveals "+ X Jobs" button that shows popup of day
 **/

.calendar .month-view .day.condense-jobs .calendar-item.standard-job {
    width: 49%;
    float: left;
}

.calendar .month-view .day.condense-jobs .calendar-item.standard-job > .liner {
    margin-right: 0;
}

.calendar .day .day-popup-trigger {
    position: absolute;
    bottom: 5px;
    right: 0;
    left: 0; z-index: 10;
    padding: 5px;
    color: #444444;
    font-size: 12px;
    text-decoration: none;
    font-family: "robotobold";
    text-align: center;
}

.calendar.day-popup .calendar-item .only-for-popup {
    display: inline !important;
}

.calendar.day-popup .calendar-item {
    width: 33%;
    display: inline-block;
}

.calendar.day-popup .list-view .day {
    border-bottom: 0;
}

.calendar.day-popup .day-jobs,
.calendar.day-popup .day-measure-jobs {
    clear: both;
    padding-top: 20px;
}

/*
 * Calendar Week View
 * Style overrides from default view (month)
*/

.calendar .week-view {
    padding-top: 35px;
}

.calendar .week-view .day-number {
    text-align: center;
    height: 22px;
}

.calendar .week-view .day {
    width: 14.2857%;
    float: left;
}

.calendar .week-view .day > .liner {
    border-left: 1px solid #cccccc;
}

.calendar .week-view .day.first-of-month > .liner {
    border-left: 1px solid #000000;
}

.calendar .week-view .day:first-child > .liner {
    border-left: 0;
}

.calendar .week-view .day > .liner {
    border-top-color: transparent;
}

.calendar .week-view .day .calendar-item.unavailability,
.calendar .week-view .day .calendar-item.standard-job,
.calendar .week-view .day .calendar-item.measure-job {
    left: 0;
    margin: 0;
    width: 100%;
}

.calendar .week-view .day .calendar-item.unavailability > .liner,
.calendar .week-view .day .calendar-item.standard-job > .liner,
.calendar .week-view .day .calendar-item.measure-job > .liner {
    padding: 8px 12px;
    cursor: default;
}

.calendar .week-view .day .calendar-item .job-title,
.calendar .day-view .day .calendar-item .job-title {
    font-family: "robotobold";
}

.calendar
    .week-view
    .day
    > .liner
    .calendar-item.standard-job[data-positions="1"] {
    height: 123px;
}
.calendar
    .week-view
    .day
    > .liner
    .calendar-item.standard-job[data-positions="2"] {
    height: 298px;
}
.calendar
    .week-view
    .day
    > .liner
    .calendar-item.standard-job[data-positions="3"] {
    height: 473px;
}
.calendar
    .week-view
    .day
    > .liner
    .calendar-item.standard-job[data-positions="4"] {
    height: 648px;
}

.calendar
    .week-view
    .day
    > .liner
    .calendar-item.standard-job[data-firstposition="1"] {
    top: 0px;
}
.calendar
    .week-view
    .day
    > .liner
    .calendar-item.standard-job[data-firstposition="2"] {
    top: 175px;
}
.calendar
    .week-view
    .day
    > .liner
    .calendar-item.standard-job[data-firstposition="3"] {
    top: 350px;
}
.calendar
    .week-view
    .day
    > .liner
    .calendar-item.standard-job[data-firstposition="4"] {
    top: 525px;
}

/*
 * Calendar Board View
 *
*/
.board-grid .menu.toolbar .calendar-filter,
.board-grid .menu.toolbar .toolbar-item.reset {
    display: none;
}
.calendar .board-view .day-number {
    height: 22px;
    padding: 7px 3px 3px 3px;
    text-align: center;
    border-bottom: 4px solid #fff;
}
.calendar .board-view .day {
    width: 12.5%;
    float: left;
}
.calendar .board-view .day.first-of-month > .liner {
    border-left: 1px solid #000000;
}
.calendar .board-view .day:first-child > .liner {
    border-left: 0;
}
.calendar .board-view .day > .liner {
    border-top-color: transparent;
}
.calendar .board-view .day .calendar-item.unavailability,
.calendar .board-view .day .calendar-item.standard-job {
    width: 100%;
    height: 0;
    margin: 0;
    position: relative;
    z-index: 3;
}
.calendar .board-view .day .calendar-item.unavailability > .liner,
.calendar .board-view .day .calendar-item.standard-job > .liner {
    height: 0;
    margin: 0;
    padding: 0;
    cursor: default;
    overflow: visible;
    border: 0;
}
.calendar .board-view .day .calendar-item.standard-job .slot.pending {
    border: 1px dashed;
}
.calendar .board-view .day .calendar-item.unavailability[data-slots="1"],
.calendar .board-view .day .calendar-item.standard-job[data-slots="1"] {
    z-index: 6;
}
.calendar .board-view .day .calendar-item.unavailability[data-slots="2"],
.calendar .board-view .day .calendar-item.standard-job[data-slots="2"] {
    z-index: 5;
}
.calendar .board-view .day .calendar-item.unavailability[data-slots="3"],
.calendar .board-view .day .calendar-item.standard-job[data-slots="3"] {
    z-index: 4;
}
.calendar .board-view .day .calendar-item.unavailability[data-slots="4"],
.calendar .board-view .day .calendar-item.standard-job[data-slots="1"] {
    z-index: 3;
}
.calendar .board-view .day .calendar-item .job-title {
    font-family: "robotobold";
}
/* Layers List */
#layer-profiles .layer {
    height: 30px;
    margin: 0 2px 0 0;
    padding: 10px 14px;
    color: #fff;
    background-color: #000;
}
#layer-profiles .layer.date-spacer {
    height: auto;
    margin: 0;
    padding: 0;
    background-color: #fff;
}
#layer-profiles a.user-panel.clickable {
    display: block;
    overflow: hidden;
    white-space: nowrap;
}
#layer-profiles .user-picture {
    width: 30px;
    height: 30px;
}
#layer-profiles .user-picture .overlay {
    width: 30px;
    height: 30px;
}
#layer-profiles .user-panel .name {
    width: auto;
    padding: 5px 0 0 0;
    font-size: 1em;
}
@media (max-width: 767px) {
    #layer-profiles .user-picture {
        display: none;
    }
    #layer-profiles .user-panel .name {
        margin-left: 0;
        font-size: 0.8em;
    }
}
@media (max-width: 475px) {
    #layer-profiles .layer {
        padding: 10px 7px;
    }
    #layer-profiles a.user-panel.clickable {
        width: 80%;
        margin: 0 auto;
    }
    #layer-profiles .user-picture,
    #layer-profiles .user-picture .overlay,
    #layer-profiles .user-picture img {
        width: 100%;
        height: auto;
    }
}
/* Layer Job Container */
.layer.container {
    background: #fff url("../images/layer-container.gif") no-repeat scroll left
        top;
    background-size: 100% 100%;
}
.historical .layer.container {
    opacity: 0.5;
}
/* Job */
.calendar .board-view .layer {
    height: 50px;
    margin: 0;
    position: relative;
    border-bottom: 4px solid #fff;
    border-left: 2px solid #fff;
    border-right: 2px solid #fff;
}
.layer.container.replicated-date {
    height: auto;
    background: none;
}
.calendar .board-view .calendar-item.standard-job,
.calendar .board-view .calendar-item.unavailability {
    height: 0px;
    position: relative;
    overflow: visible;
}
.calendar-item.standard-job .slot,
.calendar-item.unavailability .slot,
.calendar-item.measure-job .slot {
    width: 25%;
    height: 50px;
    position: absolute;
    border-left: 1px solid #fff;
    border-right: 1px solid #fff;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}
.calendar-item.standard-job .slot,
.calendar-item.measure-job .slot {
    overflow: hidden;
    background-color: inherit;
}
.calendar-item.standard-job .slot span.ref {
    font-size: 10px;
    line-height: 10px;
    position: absolute;
    top: 3px;
    left: 3px;
}
page-wrapper:not(.board-grid) .calendar-item.standard-job.hold .slot {
    border-width: 2px;
    border-style: dashed;
    border-color: inherit;
    background-color: #fff;
}
.calendar .board-view .day .liner .calendar-item .slot[data-pos="1"] {
    left: 0px;
}
.calendar .board-view .day .liner .calendar-item .slot[data-pos="2"] {
    left: 25%;
}
.calendar .board-view .day .liner .calendar-item .slot[data-pos="3"] {
    left: 50%;
}
.calendar .board-view .day .liner .calendar-item .slot[data-pos="4"] {
    left: 75%;
}

/* Job Unavailability */
.calendar .board-view .calendar-item.unavailability .slot,
.calendar .board-view .calendar-item.standard-job .slot.unavailability {
    background: #fff url("../images/background-stripes-unavailable.png") repeat
        scroll 0px 0px;
}

/*
 * Calendar Day View
 * Style overrides from default view (month)
*/

.calendar .day-view {
    padding-top: 60px;
}

.calendar .day-view .day > .liner {
    height: 700px;
    border: 0;
}

.calendar .day-view .day > .liner .calendar-item.standard-job {
    /* position: absolute; */
    left: 0;
    margin: 0;
    width: 100%; /* PLACEHOLDER FOR DEMO + TESTING */
}

.calendar .day-view .day > .liner .day-short-notice-jobs {
    top: -35px;
}

.calendar .day-view .day > .liner .day-short-notice-jobs .calendar-item {
    width: 26px;
    height: 26px;
}

.calendar .day-view .day-number {
    text-align: center;
    font-size: 1.1em;
    position: absolute;
    top: -35px;
    left: 0;
    right: 0;
}

/*
 * Calendar List View
 * Show every day in a list, with appropriate jobs (or 'No events')
*/

.calendar .list-view {
    padding-top: 20px;
}

.calendar .list-view .day > .liner {
    border: 0;
    margin: 0;
}
.MeasureCalendar .calendar .list-view .day > .liner {
    padding: 5px 0 0 0;
}

.calendar .list-view .day-jobs .calendar-item > .liner,
.calendar .list-view .day-measure-jobs .calendar-item > .liner {
    background: none !important;
    padding-left: 20px;
    border: 0;
    cursor: default;
}
.calendar .list-view .day-jobs .calendar-item.pending > .liner {
    border: 1px dashed;
}

.calendar .list-view .notes .calendar-item.note {
    display: block;
    padding: 5px;
    background: #eeeeee;
    font-style: italic;
    font-size: 1em;
}

.calendar .list-view .hold-timer {
    position: static;
    width: auto;
    height: auto;
    padding: 3px 6px;
    display: inline-block;
    margin-left: 5px;
    vertical-align: top;
}

.calendar .list-view .day {
    border-bottom: 1px solid #ccc;
    padding: 10px 0;
}

.calendar .list-view .day .calendar-item {
    margin-bottom: 5px;
}

.calendar .list-view .day .day-jobs .calendar-item:last-child,
.calendar .list-view .day .day-jobs .calendar-item:last-child .liner {
    margin-bottom: 0;
}

.calendar .list-view .day-heading {
    float: left;
    width: 6%;
}

.calendar .list-view .day-heading h5 {
    padding: 0;
    font-family: "robotomedium";
    text-align: center;
}

.calendar .list-view .date-block.no-results {
    padding: 0 !important;
    font-size: inherit;
}

.calendar .list-view .date-block .list-day {
    display: block;
    font-size: 32px;
    line-height: 1;
}

.calendar .list-view .date-block .list-day-month {
    display: block;
    text-transform: capitalize;
    font-size: 0.95em;
}

.calendar .list-view .day-content {
    float: left;
    width: 94%;
}

.calendar .day-jobs .no-results,
.calendar .day-measure-jobs .no-results {
    padding: 12px 0 !important;
}

/* ================================================================================ SETTINGS =============== */
/* ========================================================================================================= */

.search-results .member-item .name {
    padding-top: 14px;
}

.current-relationships .member-item .name,
.pending-relationships .member-item .name {
    display: inline-block;
    padding-bottom: 3px;
    margin-bottom: 8px;
    border-bottom: 3px solid #cccccc;
}

/* Custom Colours */
.member-item-list.custom-colours .member-item .details {
    padding: 24px 5px 0 0;
}
.custom-colours .member-item .name {
    min-width: 200px;
    margin: 0 4px 0 0;
    padding: 8px 14px;
    display: inline-block;
    font-family: "robotoregular", sans-serif;
    font-size: 14px;
}
.member-item-list.custom-colours .member-item .actions {
    padding-top: 24px;
}
.member-item-list.custom-colours .member-item .actions .button.black {
    margin: 0;
}

.results-container .member-item .button.remove,
.results-container .member-item .button.cancel,
.results-container .member-item .button.confirm,
.current-relationships .member-item.pending-confirmation .button.remove,
.current-relationships .member-item .button.confirm,
.current-relationships .member-item .button.add,
.current-relationships .member-item .button.cancel,
.pending-relationships .member-item.pending-confirmation .button.cancel,
.pending-relationships .member-item .button.confirm,
.pending-relationships .member-item .button.add,
.pending-relationships .member-item .button.remove {
    display: none;
}

.current-relationships .member-item .button.remove,
.current-relationships .member-item.pending-confirmation .button.confirm,
.pending-relationships .member-item .button.cancel,
.pending-relationships .member-item.pending-confirmation .button.confirm {
    display: inline-block;
}

/*
 * Billing progress bar
 * Indicates their job limit usage
*/

.current-usage .progress-bar {
    display: inline-block;
    width: 200px;
    background: #eeeeee;
    height: 10px;
    position: relative;
    margin-left: -18px;
    margin-right: 15px;
}

.current-usage .progress-bar .progress {
    height: 100%;
    min-width: 1px;
    position: absolute;
    top: 0;
    left: 0;
    max-width: 100%;
}

/* ================================================================================ PROFILES =============== */
/* ========================================================================================================= */

/*
 * Profile picture thumbnail
 * Uses overlay
*/

.user-panel.clickable {
    color: inherit !important;
    text-decoration: none !important;
    display: inline-block;
}

.user-panel.clickable + a {
    display: inline-block;
    vertical-align: top;
    margin-top: 17px;
    margin-left: 10px;
}

.user-panel .name {
    display: inline-block;
    font-size: 1.2em;
    border-bottom: 3px solid;
    vertical-align: top;
    padding: 12px 0 4px 0;
    margin-left: 10px;
}

.user-panel .name.no-border {
    border: 0;
    padding-top: 14px;
}

.user-picture {
    display: inline-block;
    width: 50px;
    height: 50px;
    position: relative;
}

.user-picture.large {
    width: 100px;
    height: 100px;
    display: block;
    float: left;
}

.user-picture.huge {
    width: 150px;
    height: 150px;
    display: block;
    float: left;
}

.user-picture .overlay {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
}
.user-picture .overlay.short-notice,
.hazard-register .user-picture .overlay {
    width: 100%;
    height: 100%;
    background-image: url(../images/picture-overlay.png);
}
.user-picture .picture {
    width: 100%;
    height: 100%;
    background: url("../images/profile-thumbnail-placeholder.gif") 50% 50%
        no-repeat;
    background-size: cover;
}
.user-picture .picture.exists {
    background: none;
}
.user-picture .picture.layer-active {
    background: url("../images/profile-thumbnail-layer-active.png") 50% 50%
        no-repeat;
    background-size: cover;
}
.user-picture .picture.layer-inactive {
    background: url("../images/profile-thumbnail-layer-inactive.png") 50% 50%
        no-repeat;
    background-size: cover;
}
.user-picture .picture.layer-virtual {
    background: url("../images/profile-thumbnail-layer-virtual.png") 50% 50%
        no-repeat;
    background-size: cover;
}
.user-picture .picture.layer-basic {
    background: url("../images/profile-thumbnail-layer-basic.png") 50% 50%
        no-repeat;
    background-size: cover;
}

/* ================================================================================ JOBS =================== */
/* ========================================================================================================= */

/*
 * Page with job details
 * Full detail view
*/

.job-detail-page {
    padding-top: 20px;
}

.job-detail-page .job-map {
    margin-right: 40px;
    height: 500px;
    margin-bottom: 20px;
}

.job-detail-page .job-map iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

.job-detail-page .booking-dates {
    padding-top: 10px;
}

.job-detail-page .job-actions {
    padding-top: 10px;
}

.job-detail-page .job-actions {
    margin-right: 40px;
    padding-top: 0;
}
@media (max-width: 475px) {
    .job-detail-page .job-actions {
        margin-right: 0;
    }
}

/* HEALTH & SAFETY ============ */
/* ===================================================== */

/* Health & Safety */
.health-and-safety-actions {
    padding: 20px 0;
}
.HealthAndSafety .search-results {
    margin-bottom: 40px;
}
.HealthAndSafety .search-results a {
    color: #fff;
    text-decoration: none;
}
.HealthAndSafety .search-results a:hover {
    color: #fff;
}
.HealthAndSafety .typography .search-results .search-result {
    padding-left: 0;
}
.HealthAndSafety .member-item-list .member-item .details {
    margin: 0;
    padding: 10px 0;
    line-height: 35px;
}
.HealthAndSafety .member-item-list .member-item .actions {
    margin: 0;
    padding: 10px 0;
}

.hazard-registers .hazard-register a {
    text-decoration: none;
}
.hazard-registers .member {
    margin-top: -4px;
}
.hazard-registers .user-picture {
    width: 30px;
    height: 30px;
    display: block;
    float: left;
}
.hazard-registers .user-panel .name {
    padding: 2px 0 0 0;
    font-size: 14px;
    line-height: 20px;
}
@media (max-width: 485px) {
    .hazard-register.row .col {
        width: 100% !important;
        margin-bottom: 10px;
        float: none;
    }
    .hazard-register .col.member {
        text-align: right;
    }
    .hazard-register .col.right {
        margin-bottom: 0;
        font-size: 14px;
    }
}

/* Hazard Register Form - new ============ */
/* ===================================================== */
.new-register-form .hazard-text {
    margin-bottom: 20px;
}
.typography .hazard-text p {
    margin-bottom: 5px;
    padding: 0;
}
.typography .hazard-text img {
    width: 100%;
    height: auto;
}
/* Hazard fields */
.new-register-form .hr-field {
    width: 100%;
    margin: 10px 0;
    padding: 15px;
    clear: both;
    opacity: 1;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    font-family: "robotobold";
    font-size: 14px;
    color: #000;
}
.new-register-form .hr-field a {
    color: #000;
}
.new-register-form .hr-field a:hover {
    color: #666;
}
.new-register-form ul.hr-field {
    margin: 0;
}
.new-register-form .title {
    margin: 10px 0;
    cursor: pointer;
    color: #fff;
    background-color: #069edb;
    background-image: url(../images/icons-small-arrow-down.png);
    background-repeat: no-repeat;
    background-position: 95% center;
}
.new-register-form .title.active {
    background-color: #e73030;
}
.new-register-form .title.inactive {
    background-color: #000000;
}
.new-register-form .title.expand {
    background-image: url(../images/icons-small-arrow-right.png);
}
.new-register-form .dangers {
    background: #eee;
}
.new-register-form .dangers .potential-harm {
    padding-top: 10px;
}
.new-register-form a.show-hazard-detail {
    cursor: pointer;
}
.new-register-form .hazard-detail {
    padding-top: 10px;
}
.new-register-form .measures {
    color: #fff;
    background: #61bd2a;
}
.new-register-form .measures.hr-field a {
    color: #fff;
}
.new-register-form .measures.hr-field a:hover {
    color: #666;
}
.new-register-form .hr-field.note {
    margin: 0;
    padding: 0;
}
.new-register-form .hr-field.note textarea.note {
    padding: 10px 18px;
}

/* Buttons */
.new-register-form .hazard-data label.left {
    width: 100%;
    padding: 0 0 5px 0;
    text-align: left;
}
.new-register-form .optionset input[type="radio"] {
    display: none !important;
}
.new-register-form .hr-field.optionset {
    padding: 0;
}
.new-register-form .field.optionset li {
    margin: 0 10px 0 0;
    padding: 0;
}
.new-register-form .field.optionset li.valN_A {
    display: none;
}
.new-register-form .optionset input[type="radio"] + label,
.new-register-form div.label {
    min-width: 25px;
    padding: 12px 20px;
    cursor: pointer;
    font-family: "robotobold";
    color: #fff;
    text-align: center;
    background: #000;
}
.new-register-form div.label {
    display: inline-block;
    cursor: default;
}
.new-register-form .optionset input[type="radio"]:checked + label,
.new-register-form div.label.Yes {
    background: #e73030;
}
.new-register-form .optionset li.valNo input[type="radio"]:checked + label,
.new-register-form div.label.No {
    background: #61bd2a;
}

/* Hazard Register/Variance Report - Show */
.job-detail-page .form-wrapper.new-register-form {
    margin: 0;
}
.job-detail-page .new-register-form .hr-label {
    width: 100%;
    padding: 0 0 5px 0;
    font-family: "robotobold";
    font-size: 14px;
}
.job-detail-page .new-register-form .hr-field.status.No .label,
.job-detail-page .new-register-form .hr-field.controlled.Yes .label {
    background: #61bd2a;
}
.job-detail-page .new-register-form .hr-field.status.Yes .label,
.job-detail-page .new-register-form .hr-field.rating .label,
.job-detail-page .new-register-form .hr-field.control .label,
.job-detail-page .new-register-form .hr-field.controlled.No .label {
    background: #e73030;
}

/* Hazard Register Form - old */
/* contains old styles that need to be kept for version one */
.hazard-register-form .btn-toolbar {
    margin-top: 20px;
}
.hazard-register-form .action.button {
    margin: 10px 0;
}
.hazard-register-form .field .message {
    margin: 10px 0;
    padding: 15px;
    font-family: "robotobold";
    color: #fff;
    background: #e73030;
}
.hazard-register-form .hazard-field {
    width: 100%;
    margin: 10px 0;
    padding: 15px;
    clear: both;
    opacity: 1;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    font-family: "robotobold";
    font-size: 14px;
    color: #000;
}
.hazard-register-form .hazard-field.fade {
    opacity: 0.5;
}
.hazard-register-form .hazard-field.title {
    margin: 10px 0;
    cursor: pointer;
    color: #fff;
    background-color: #069edb;
    background-image: url(../images/icons-small-arrow-down.png);
    background-repeat: no-repeat;
    background-position: 95% center;
}
.hazard-register-form .hazard-field.title.active {
    background-color: #e73030;
}
.hazard-register-form .hazard-field.title.inactive {
    background-color: #000000;
}
.hazard-register-form .hazard-field.title.expand {
    background-image: url(../images/icons-small-arrow-right.png);
}
.hazard-register-form .hazard-field.harm,
.hazard-register-form .hazard-field.dangers {
    background: #eee;
}
.hazard-register-form .hazard-field.harm:before {
    content: "Potential harm: ";
}
.hazard-register-form .hazard-field.controls,
.hazard-register-form .hazard-field.measures {
    color: #fff;
    background: #61bd2a;
}
.hazard-register-form .hazard-field.controls:before {
    content: "Controls: ";
}

/* Hazard data */
.hazard-register-form .field.hazard-data {
    margin-bottom: 0;
}
.hazard-register-form label.fieldholder-small-label,
.hazard-register-form .field.optionset > label,
.hazard-register-form .field.optionset input[type="radio"] + label:before,
.hazard-register-form .field.optionset input[type="radio"],
.hazard-register-form .field.optionset.state li.valNo {
    display: none !important;
}
.hazard-register-form .field.optionset .middleColumn {
    padding: 0;
}
.hazard-register-form .hazard-field.optionset,
.hazard-register-form .hazard-field.note {
    margin: 0;
    padding: 0;
}
.hazard-register-form .field.optionset li {
    margin: 0 10px 10px 0;
    padding: 0;
}
.hazard-register-form .field.optionset input[type="radio"] + label,
.hazard-register-form div.label {
    min-width: 25px;
    padding: 12px 20px;
    cursor: pointer;
    font-family: "robotobold";
    color: #fff;
    text-align: center;
    background: #000;
}
.hazard-register-form div.label {
    display: inline-block;
    cursor: default;
}
.hazard-register-form .field.optionset input[type="radio"]:checked + label,
.hazard-register-form div.label.Yes,
.hazard-register-form .state div.label {
    background: #e73030;
}
.hazard-register-form
    .field.optionset
    li.valNo
    input[type="radio"]:checked
    + label,
.hazard-register-form div.label.No,
.hazard-register-form
    #HazardsStatus
    li.valSame
    input[type="radio"]:checked
    + label {
    background: #61bd2a;
}
/* Hazard Notes */
.hazard-register-form .note label {
    padding-top: 0;
    text-align: left;
}
.hazard-register-form textarea.hazard-field.note {
    padding: 10px 18px;
}

/* Variance Report Form */
.variance-report-form .btn-toolbar {
    margin-top: 20px;
    padding: 0;
    text-align: center;
}

/* Hazard Register/Variance Report - Show */
.hazard-register-detail-page {
    padding-top: 20px;
}
.promo {
    margin: 0 0 20px 0;
}
.promo h5 {
    padding-bottom: 8px;
}
.job-detail-page .form-wrapper.hazard-register-form {
    margin: 0;
}
.job-detail-page .form-wrapper.hazard-register-form .field.optionset {
    margin: 10px 0;
}
.hazard-register-actions .email-pdf {
    padding: 0 20px 0 0;
}
.hazard-register-actions .email-pdf label {
    display: none;
}
.hazard-register-actions .btn-toolbar {
    padding: 0;
}

/* Rewards */
.reward-page,
.deals-page {
    padding-left: 30px;
    padding-right: 30px;
}
.reward-wrapper {
    max-width: 400px;
    margin: 0 auto;
}
.reward {
    margin: 0 0 10px 0;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    border: 5px solid #000;
}
.reward-branding img {
    width: 80%;
}
.reward h2 {
    padding: 30px 15px 15px 15px;
}
.reward-button {
    margin: 0 -30px 0 0;
    text-align: right;
}
.button.redeem {
    width: 180px;
    height: 180px;
    padding: 35px;
    font-family: "robotoregular", sans-serif;
    font-size: 24px;
    line-height: 26px;
    text-align: center;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    border: 5px solid #000;
    background: #009dda;
}
.button.redeem:hover {
    background: #61bd2a;
}
.button.redeem.redeemed {
    width: 150px;
    height: 150px;
    padding: 10px;
    line-height: 150px;
    background: #000;
}
.button.redeem.redeemed:hover {
    background: #000;
}
.reward-button .btn-toolbar {
    padding: 0;
}
.reward-description {
    margin: -20px 0 0 0;
    padding: 50px 15px 15px 15px;
    background: #009dda;
    -moz-border-radius-bottomleft: 3px;
    -moz-border-radius-bottomright: 3px;
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;
    -webkit-border-bottom-right-radius: 3px;
    -webkit-border-bottom-left-radius: 3px;
}
.typography .reward-description a {
    color: #fff;
}
.typography .reward-description a:hover {
    color: #000;
}
.reward-branding {
    margin: 20px 0;
    text-align: center;
}
/* Deals */
.deals-page .reward-wrapper {
    max-width: 340px;
    float: left;
}
.deals-page .reward-wrapper.odd {
    margin: 0 20px 20px 0;
}
.deals-page .reward-wrapper.even {
    margin: 0 0 20px 20px;
    float: right;
}
.deal-image {
    margin: 10px 0;
}
.deal-image img {
    width: 100%;
}
@media (max-width: 830px) {
    .deals-page .reward-wrapper.odd,
    .deals-page .reward-wrapper.even {
        margin: 0 auto;
        float: none;
    }
}

/* Training */
#tutorials,
.tutorial-complete-form,
#Form_CompleteTutorial fieldset {
    display: none;
}
.tutorial-holder {
    margin-bottom: 20px;
}
.popover.tour form {
    display: block;
    float: left;
}
.popover.tour .btn-toolbar {
    padding: 0;
}

/* Training Page */
.typography a.tutorial,
.typography a.tutorial-link,
.typography a.tutorial-faq {
    width: 100%;
    margin: 11px 0;
    display: table;
    cursor: pointer;
    color: #fff;
    text-decoration: none;
}
.typography a.tutorial:hover {
    color: #fff;
}
.typography a.tutorial-link,
.typography a.tutorial-faq {
    color: #000;
}
.tutorial .fa,
.tutorial-link .fa,
.tutorial-faq .fa {
    width: 40px;
    height: 40px;
    display: table-cell;
    vertical-align: middle;
    font-size: 30px;
}
.tutorial.completed .fa-times,
.tutorial .fa-check {
    display: none;
}
.tutorial .fa-check {
    color: #61bd2a;
}
.tutorial.completed .fa-check {
    display: table-cell;
}
.tutorial .fa-times {
    color: #000;
}
.tutorial-link .fa,
.tutorial-faq .fa {
    font-size: 24px;
    color: #e6e6e6;
}
.tutorial span,
.tutorial-link span,
.tutorial-faq span {
    padding: 11px 18px;
    display: table-cell;
    vertical-align: middle;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    background: #009dda;
}
.tutorial.completed span {
    background: #61bd2a;
}
.tutorial:hover span {
    color: #000;
}
.tutorial-link span,
.tutorial-faq span {
    background: #e6e6e6;
}

/* Measure */
.measure-options .measure-buttons {
    width: 100%;
}
.measure-options .measure-buttons.first {
    padding: 30px 0 0 0;
}
.measure-options a {
    width: 49%;
    height: 49%;
    margin: 2% 2% 0 0;
    padding: 0;
    display: block;
    float: left;
    position: relative;
}
.measure-options a.map,
.measure-options a.edit {
    margin-right: 0;
}
.measure-options a img {
    width: 100%;
    height: 100%;
    display: block;
    position: relative;
    z-index: 3;
}
.measure-options a span {
    width: 100%;
    height: 100%;
    padding: 0;
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 4;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}
.measure-options a span .inner {
    width: 100%;
    height: 100%;
    display: table;
}
.measure-options a span .inner .text {
    width: 100%;
    height: 100%;
    display: table-cell;
    font-size: 20px;
    text-align: center;
    vertical-align: middle;
}
.measure-options a span .fa {
    font-size: 100px;
}
/* Measure - Add */
.typography #Form_AddMeasureJobForm p.end-time {
    margin-top: 0;
    padding-top: 0;
}
#Form_AddMeasureJobForm .end-time a {
    cursor: pointer;
}
/* Measure – Complete, Floor Prep Job */
.typography #Form_CompleteMeasureForm h5.title .text ,
.typography #Form_EditForm h5.title .text {
    font-family: "robotobold" !important;
    font-size: 1.6em;
    color: #000;
}
.typography #Form_CompleteMeasureForm h5.title .background-divider ,
.typography #Form_EditForm h5.title .background-divider {
    margin-top: -19px;
    background: #000;
}
.get-samples {
    margin: 20px 0;
    padding: 11px 18px;
    color: #fff;
    border-radius: 4px;
    background-color: #e73030;
}
.get-samples label {
    color: #FFF !important;
}
.get-samples.complete {
    background: #61bd2a;
}

/* Measure - Show */
@media (max-width: 475px) {
    .button.complete-measure {
        width: 100%;
    }
}

/* Invoicing */
.invoice-form {
    max-width: 900px;
    margin: 0 auto;
    padding-top: 20px;
}
.invoice-form .retailer-details {
    width: 50%;
    float: left;
}
.invoice-form .retailer-details h2.void {
    color: #e73030;
}

.invoice-form .invoice-details,
.invoice-form .installer-details {
    width: 25%;
    float: left;
}
.invoice-form .installer-details {
    text-align: right;
}
.invoice-form .price-details {
    margin-top: 30px;
}
.invoice-form .price-details h4 {
    padding-bottom: 6px;
    border-bottom: 2px solid #000;
}
.invoice-form .price-details p {
    margin-top: 6px;
}
.invoice-form .job-details {
    width: 40%;
    float: left;
}
.invoice-form .job-details p {
    padding: 0;
}
.invoice-form .amount-details {
    width: 60%;
    float: right;
    text-align: right;
}
.invoice-form .amount-details.gst,
.invoice-form .amount-details.total {
    clear: both;
}
.invoice-form .invoice-notes label {
    width: 100%;
    text-align: left;
    font-weight: bold;
}
.invoice-form .invoice-notes textarea {
    width: 100%;
}
.invoice-form .invoice-notes #Form_InvoiceForm_DueDate {
    width: 100px;
}
.invoice-form input.numeric,
.invoice-form input.currency {
    width: 100px;
    padding: 10px;
}
.invoice-form .numeric .middleColumn,
.invoice-form .currency .middleColumn {
    display: inline-block;
}
.invoice-form .numeric label,
.invoice-form .currency label {
    width: auto;
    padding: 0 10px 0 0;
    display: inline-block;
    float: none;
    font-family: "robotobold";
}
#my-invoices tr.paid,
#my-invoices tr.paid td {
    background-color: #61bd2a;
}
#my-invoices tr.void,
#my-invoices tr.void td {
    background-color: #e73030 !important;
}
/* Invoicing – show */
@media (max-width: 800px) {
    .invoice-form .retailer-details,
    .invoice-form .invoice-details,
    .invoice-form .installer-details,
    .invoice-form .job-details,
    .invoice-form .amount-details {
        width: 100%;
        float: none;
        text-align: left;
    }
    .invoice-form .invoice-details,
    .invoice-form .installer-details,
    .invoice-form .amount-details.header {
        margin-top: 30px;
    }
}
/* Invoicing – PDF */
#Form_InvoicePdfForm {
    margin-bottom: 50px;
}
#Form_InvoicePdfForm label.left {
    width: auto;
    float: none;
    text-align: left;
}
#Form_InvoicePdfForm .middleColumn input {
}
#Form_InvoicePdfForm .btn-toolbar {
    padding-left: 0;
}

/* ================================================================================ OTHER ================== */
/* ========================================================================================================= */

/*
 * Registration page introduction
*/
.register-buttons {
    text-align: center;
    margin: 15px 0;
}

/* Toggle Guide */
p.toggle {
    margin: 0 0 8px 0;
    font-family: "robotobold" !important;
    font-size: 1.6em;
}
.typography p.toggle a {
    color: #31a2dc;
    text-decoration: none;
    cursor: pointer;
}
.typography p.toggle a .fa {
    margin-right: 2px;
}
.typography p.toggle a.on {
    color: #e73030;
}
.instructions {
    display: none;
}
/* Toggle button text */
.typography p.toggle a span:before {
    content: "Show";
}
.typography p.toggle a.on span:before {
    content: "Hide";
}

/* ================================================================================ FOOT =================== */
/* ========================================================================================================= */

.foot > .inner {
    text-align: center;
    padding: 20px 0;
    color: #aaaaaa;
    font-size: 13px;
}
.foot > .inner a {
    color: #aaaaaa;
    text-decoration: none;
}
.foot > .inner a:hover {
    color: #000000;
}
.foot > .inner a.button,
.foot > .inner a.button:hover {
    color: #FFF;
}

#layer-profiles .layer.date-spacer,
.layer.container.replicated-date {
    height: 50px;
    margin: 0;
    padding: 0;
    background-color: #fff;
}

/* Curtain Studios */
.page-head .branding img.curtain-studios {
    width: 232px;
    height: auto;
}

.calendar.curtain-studios .board-view .layer.container {
    background: #fff url("../images/layer-container-16.gif") no-repeat scroll
        left top;
    background-size: 100% 100%;
}
.calendar.curtain-studios .board-view .layer.container.replicated-date {
    background: none;
}
.calendar.curtain-studios .board-view .calendar-item .slot {
    width: 6.25%;
    height: 50px;
    position: absolute;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}
.calendar.curtain-studios
    .board-view
    .calendar-item.standard-job
    .slot.confirmed,
.calendar.curtain-studios .board-view .calendar-item.unavailability .slot,
.calendar.curtain-studios .board-view .calendar-item.measure-job .slot {
    border-left: 1px solid #fff;
    border-right: 1px solid #fff;
}
.calendar.curtain-studios .board-view .calendar-item.standard-job.hold .slot {
    border-width: 1px;
    border-style: dashed;
}
.calendar.curtain-studios
    .board-view
    .day
    .liner
    .calendar-item
    .slot[data-pos="1"] {
    left: 0px;
}
.calendar.curtain-studios
    .board-view
    .day
    .liner
    .calendar-item
    .slot[data-pos="2"] {
    left: 6.25%;
}
.calendar.curtain-studios
    .board-view
    .day
    .liner
    .calendar-item
    .slot[data-pos="3"] {
    left: 12.5%;
}
.calendar.curtain-studios
    .board-view
    .day
    .liner
    .calendar-item
    .slot[data-pos="4"] {
    left: 18.75%;
}
.calendar.curtain-studios
    .board-view
    .day
    .liner
    .calendar-item
    .slot[data-pos="5"] {
    left: 25%;
}
.calendar.curtain-studios
    .board-view
    .day
    .liner
    .calendar-item
    .slot[data-pos="6"] {
    left: 31.25%;
}
.calendar.curtain-studios
    .board-view
    .day
    .liner
    .calendar-item
    .slot[data-pos="7"] {
    left: 37.5%;
}
.calendar.curtain-studios
    .board-view
    .day
    .liner
    .calendar-item
    .slot[data-pos="8"] {
    left: 43.75%;
}
.calendar.curtain-studios
    .board-view
    .day
    .liner
    .calendar-item
    .slot[data-pos="9"] {
    left: 50%;
}
.calendar.curtain-studios
    .board-view
    .day
    .liner
    .calendar-item
    .slot[data-pos="10"] {
    left: 56.25%;
}
.calendar.curtain-studios
    .board-view
    .day
    .liner
    .calendar-item
    .slot[data-pos="11"] {
    left: 62.5%;
}
.calendar.curtain-studios
    .board-view
    .day
    .liner
    .calendar-item
    .slot[data-pos="12"] {
    left: 68.75%;
}
.calendar.curtain-studios
    .board-view
    .day
    .liner
    .calendar-item
    .slot[data-pos="13"] {
    left: 75%;
}
.calendar.curtain-studios
    .board-view
    .day
    .liner
    .calendar-item
    .slot[data-pos="14"] {
    left: 81.25%;
}
.calendar.curtain-studios
    .board-view
    .day
    .liner
    .calendar-item
    .slot[data-pos="15"] {
    left: 87.5%;
}
.calendar.curtain-studios
    .board-view
    .day
    .liner
    .calendar-item
    .slot[data-pos="16"] {
    left: 93.75%;
}

.curtain-studios #Form_AddJobForm_AvailableLayers_Holder,
.curtain-studios #Form_AddJobForm #JobSlotsSelected {
    display: block !important;
}

/* Checkout */
.StripeCheckout .section.main {
    padding: 30px;
    background-color: #fff;
}
.StripeCheckout .checkout-header {
    padding: 0 0 30px 0;
    text-align: center;
}
.StripeCheckout .section.foot {
    padding: 20px 30px 50px 30px;
    text-align: center;
}
.StripeCheckout .section.foot p {
    font-size: 16px;
    line-height: 22px;
}
.account-plans {
    text-align: center;
    display: flex;
    justify-content: center;
}
.account-plans .account-plan {
    width: 31%;
    margin: 0 1% 40px 1%;
    display: inline-block;
}
.account-plans h3 {
    margin: 0;
    font-size: 18px;
    line-height: 18px;
}
.account-plans ul {
    padding: 10px 20px;
    background: #fff;
    border: 1px solid #ccc;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}
.account-plans ul:hover {
    border: 1px solid #009dda;
}
.account-plans li {
    padding: 10px 0;
    list-style-type: none;
}
.account-plans li.title {
    padding-bottom: 0;
}
.account-plans li.price {
    font-size: 26px;
    font-weight: bold;
}

@media (max-width: 960px) {
    .account-plans {
        display: block;
    }

    .account-plans .account-plan {
        width: 70%;
        margin: 0 15% 40px 15%;
    }
}