/*
--- CLOCKIT
--- Responsive layout stylesheet
*/

/**
 * Mobile and non-mobile only elements
 * Use these classes to quickly hide/show elements based on the current view
 * Uses the 767px threshold
 **/

.mobile-only-not {
    display: block;
}

span.mobile-only-not {
    display: inline;
}

.mobile-only {
    display: none !important;
}

/*
 * 1080px
 * Landscape tablets, small desktops
 */

@media (max-width: 1080px) {
    .menu.primary .menu-item {
        margin: 0px 5px;
    }

    .calendar .list-view .day-heading {
        width: 10%;
    }

    .calendar .list-view .day-content {
        width: 90%;
    }

    .menu.toolbar .toolbar-item,
    .menu.toolbar .toolbar-section .label {
        padding: 10px 4px 11px 4px;
    }

    .calendar .week-view .day .day-number {
        padding: 7px 3px 25px 3px;
    }

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

/*
 * 900px
*/
@media (max-width: 950px) {
    #mainnav {
        display: none;
    }

    #mobile-mainnav-trigger,
    #mainnav-shortnotice,
    #mainnav-tutorial {
        display: block;
        position: relative;
    }
    #mobile-mainnav.mobile-only {
        display: block !important;
    }

    #mainnav-shortnotice,
    #mainnav-tutorial {
        padding: 21px;
    }
    #mainnav-shortnotice .menu-item,
    #mainnav-tutorial .menu-item {
        margin: 0;
        padding: 0;
        border: 0;
    }
}

/*
 * 800px
 * Portrait tablets, tiny desktops
*/
@media (max-width: 800px) {
    .w33,
    .w66 {
        width: 100%;
    }

    .job-detail-page .w33 {
        margin-bottom: 30px;
    }

    .job-detail-page .job-map {
        margin-right: 0;
        height: 250px;
    }

    .calendar .day-view .day .supporting-items .day-short-notice-jobs,
    .calendar .day-view .day .supporting-items .day-notes {
        margin-top: 0;
    }

    /* job popup window (for busy days) */
    .calendar.day-popup .calendar-item {
        float: none;
        width: auto;
        display: block;
    }

    .w50.xs-100 {
        width: 45%;
    }

    /*.me-hide {
		width: 25%;
	}*/

    .short-notice-jobs .headings .col:nth-child(4),
    .short-notice-jobs .headings .col:nth-child(5),
    .short-notice-jobs .col.length-meterage {
        display: none;
    }

    .page-head {
        position: relative;
        width: 100%;
        z-index: 99;
    }

    .section.toolbar {
        position: relative;
        width: 100%;
        top: 0;
        z-index: 98;
    }

    .section.main {
        top: 0;
        position: static;
    }

    .section.foot {
        top: 0;
        position: static;
    }

    .short-notice-jobs .col {
        width: 33%;
    }

    .data-table.messages {
        padding-top: 20px;
    }

    #mainnav-shortnotice .menu-item,
    #mainnav-tutorial .menu-item {
        padding: 0;
    }
    .popup-alert-container .popup-alert {
        width: 30%;
    }
}

/*
 * 767px
 *
 */

@media (max-width: 767px) {
    html,
    body {
        font-size: 14px;
    }

    .mobile-only {
        display: block !important;
    }

    span.mobile-only {
        display: inline !important;
    }

    .mobile-only-not {
        display: none !important;
    }

    .page-title .text {
        padding: 0;
        font-size: 20px;
        margin-top: 4px;
    }

    #mobile-mainnav-trigger,
    #mainnav-shortnotice,
    #mainnav-tutorial {
        padding-top: 12px;
        padding-bottom: 12px;
    }
    #mobile-mainnav-trigger .count-dot {
        right: 12px;
        top: 8px;
    }

    .faux-dropdown {
        position: inherit;
    }

    .menu.toolbar {
        background: #e6e6e6;
        border-radius: 5px;
        padding: 8px;
        position: relative;
    }

    .menu.toolbar .toolbar-cap {
        display: none;
    }

    .menu.toolbar > .liner {
        height: auto;
        padding: 0;
        text-align: center;
    }

    .menu.toolbar .toolbar-section {
        display: inline-block;
        float: none;
        text-align: center;
    }

    .menu.toolbar .toolbar-item.reset {
        float: none;
        display: inline-block;
    }

    .menu.toolbar .toolbar-section.absolute-center {
        position: inherit;
        left: inherit;
        margin-left: 0;
    }

    .menu.toolbar .toolbar-item,
    .menu.toolbar .toolbar-section .label {
        padding: 5px;
    }

    .page-head .branding {
        display: none;
    }

    .page-head .head-toolbar {
        padding-left: 0;
    }

    .page-head .head-toolbar > .liner {
        height: 50px;
        padding-left: 15px;
    }

    .page-title {
        padding-top: 8px;
    }

    .page-head .head-toolbar .background-cap {
        display: none;
    }

    /* calendar views */

    /*
	.calendar .day .supporting-items .day-short-notice-jobs,
	.calendar .day .supporting-items .day-notes {
		display: none;
	}
	*/

    .add-job-panel .link-item {
        padding: 10px 0;
    }

    .section.calendar > .inner {
        padding: 0;
    }

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

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

    .calendar .day-view .day-number {
        display: none;
    }

    /* fullscreen popup */
    .fullscreen-popup .fullscreen-popup-close.top {
        position: absolute;
        top: 10px;
        right: 17px;
        font-size: 40px;
        line-height: 1;
        z-index: 97;
    }
    .fullscreen-popup > .content {
        padding: 50px;
    }
    .fullscreen-popup h1 {
        font-size: 1.8em;
    }
    .popup-alert-container .popup-alert {
        width: 50%;
    }
}

/*
 * 630px
 *
 */

@media (max-width: 630px) {
    .profile .mini-data-table .w25,
    .profile .mini-data-table .w75 {
        width: 100%;
    }

    .profile .mini-data-table .w75 {
        padding-top: 25px;
    }
}

/*
 * 610px
 *
 */

@media (max-width: 610px) {
    .head-toolbar {
        padding-left: 45.9%;
    }

    .me-hide {
        display: none;
    }

    .me-50 {
        width: 50%;
    }

    .me-30 {
        width: 30%;
    }

    .me-30.w25 {
        width: 50%;
    }

    .padmar-0 {
        padding-left: 0 !important;
        margin-right: 0 !important;
    }

    .short-notice-jobs .headings .col:nth-child(3) {
        display: none;
    }

    .ss-uploadfield-item-info {
        overflow: hidden;
    }

    .ss-uploadfield
        .ss-uploadfield-item
        .ss-uploadfield-item-info
        .ss-uploadfield-item-name {
        height: auto !important;
    }

    .ss-uploadfield .ss-uploadfield-files .ss-uploadfield-item-actions {
        min-height: 0 !important;
        margin: 0 !important;
        clear: left;
        float: left;
    }

    .ss-uploadfield .ss-ui-button {
        margin: 0 6px 0 0 !important;
    }

    .member-item-list .member-item .details {
        padding: 24px 5px 0 5px;
    }

    .member-item-list .member-item {
        padding: 15px 0;
        border-bottom: 1px solid #efefef;
    }

    .member-item-list .member-item:first-child {
        padding-top: 8px;
    }

    .member-item-list .member-item .actions {
        float: left;
        padding-top: 15px;
        clear: both;
    }

    .member-item-list .member-item .details {
        padding: 24px 5px 0 15px;
    }

    .member-item-list .member-item .member-status {
        line-height: 2.5;
        padding-left: 10px;
        padding-right: 0;
    }

    .MyStaff .member-item-list .member-item .button {
        float: left;
    }

    #Form_AddUserForm_action_doAddUserForm {
        margin-bottom: 3px;
    }

    .calendar .list-view .day-heading {
        width: 15%;
    }

    .calendar .list-view .day-content {
        width: 85%;
    }

    .short-notice .pull-right {
        float: none;
        margin-top: 15px;
    }

    .short-notice-jobs .col {
        width: 50%;
    }
    /* Notifications */
    .popup-notification .message-content {
        max-width: 300px;
    }
}

/*
 * 475px
 *
 */

@media (max-width: 475px) {
    .page-title .mobile-toolbar .current-display-date {
        font-size: 16px;
    }

    .plain-page.Security .section.main.login-form {
        margin-left: 0; margin-right: 0;
        width: 100%;
        text-align: center;
    }

    .plain-page.Security .section.main.login-form .forgot-password {
        float: none;
        margin-top: 10px;
    }

    .login-form {
        width: auto;
        margin: 0;
    }

    label,
    label.right,
    .selected-customer .middleColumn {
        float: none;
        width: auto;
        text-align: left;
    }
    .selected-customer .field .readonly {
        padding: 0;
    }

    input[type="text"],
    input[type="password"],
    input[type="email"],
    input[type="phone"],
    textarea {
        width: 100%;
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
    }

    .edit-my-staff .composite > .field.checkbox,
    .preferences .composite > .field.checkbox {
        width: 33%;
    }

    .ss-uploadfield.simplify .middleColumn {
        width: 100%;
    }

    .ss-uploadfield
        .ss-uploadfield-item
        .ss-uploadfield-item-info
        .ss-uploadfield-item-name {
        padding: 0 0 5px 0;
        line-height: 14px !important;
    }

    .job-form .ajax-data-container {
        width: 100%;
    }

    .job-form .btn-toolbar {
        padding-left: 0;
    }

    .field.checkbox.inline-label,
    .file-upload-field {
        padding-left: 0;
    }

    .field.optionset.nolabel {
        padding-left: 0;
    }

    .typography p.help-message.field-note {
        margin-left: 0;
    }

    .job-form .meterage-field .field input,
    #Details_Naplocks input,
    #Details_Stairs input,
    .job-form .meterage-field #Details_Meterage {
        width: 85px;
    }

    .btn-toolbar {
        padding-left: 0 !important;
    }

    .edit-my-staff .reset-password-reveal {
        margin-left: 0;
    }

    .calendar .week-view .day-labels .label-item,
    .calendar .month-view .day-labels .label-item {
        font-size: 1.5em;
        padding: 20px 0;
    }

    label.error {
        width: inherit;
        margin-left: 0;
    }

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

    .profile .mini-data-table .w35,
    .profile .mini-data-table .w65 {
        width: 100%;
    }

    .user-picture.huge {
        float: none;
    }

    .job-form .field.availablelayers .middleColumn {
        padding-left: 0;
    }

    .field.jobslotselector .middleColumn {
        width: auto !important;
        float: none !important;
    }

    .field.colourselector .middleColumn {
        width: 100% !important;
        float: none !important;
    }

    #Details_Appliances {
        top: 37px;
        left: 80px;
    }

    .calendar .month-view .day .day-number {
        padding: 7px 3px 25px 3px;
    }

    .calendar .month-view .day > .liner {
        height: 245px;
    }

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

    .job-detail-page .job-map {
        height: 150px;
    }
    /* Slot Selector */
    #JobSlotsSelected .middleColumn {
        padding: 0 35px 0 0;
    }
}

/*
 * 405px
 *
 */

@media (max-width: 405px) {
    .head-toolbar {
        padding-left: 51.9%;
    }

    .page-head .branding {
        width: 41%;
    }

    .menu.toolbar .toolbar-item,
    .menu.toolbar .toolbar-section .label {
        font-size: 1em;
    }

    .preferences .composite > .field.checkbox {
        width: 100%;
    }

    .preferences .composite > .field.checkbox:last-child {
        margin-bottom: 20px;
    }

    .row .col {
        float: none;
    }

    .mini-data-table .row > .label,
    .mini-data-table .row > label {
        margin-bottom: 5px;
    }

    .mini-data-table .row {
        margin-bottom: 10px;
    }

    .job-detail-page .button {
        padding: 12px;
    }

    .xs-100 {
        width: 100% !important;
    }

    .icon.me-hide {
        display: block;
        top: 19px !important;
        left: 0 !important;
        font-size: 13px;
        width: auto;
    }

    .w20.date,
    .w10.date {
        display: block;
        margin-right: 0 !important;
        margin-bottom: 5px;
        padding-left: 0 !important;
        width: 100%;
        font-size: 12px;
    }

    .sm-hide {
        display: none;
    }

    .data-table .row:not(.headings) {
        padding: 20px 0;
    }

    .data-table .row .col.type,
    .data-table .row .col.title {
    }

    .calendar .week-view .day-number {
        font-size: 0.85em;
    }

    .MyRetailers .member-item-list.search-results a {
        display: block;
    }

    .typography h2 {
        word-wrap: break-word;
    }

    .short-notice-jobs .col.length-meterage {
        display: block;
        margin-top: 5px;
    }

    .short-notice-jobs .col.branding {
        margin: 10px 0;
    }

    .me-hide {
        display: block;
    }

    .calendar .list-view .day-heading {
        width: 25%;
    }

    .calendar .list-view .day-content {
        width: 75%;
    }

    .ShortNotice .page-title {
        padding-top: 11px;
    }

    .ShortNotice .page-title .text {
        margin-top: 0;
    }
}