@media screen and (max-width: 660px) {
    /* user assistance */
    .dashboard.assistance #conversation {
        margin-top: 0;
    }

    .dashboard.assistance #conversation .sidebar-left > p:first-child {
        margin-top: 0;
    }

    .dashboard.assistance #conversation .sidebar-left br {
        display: none;
    }

    .dashboard.assistance #conversation .sidebar-left a.button.neutral {
        margin: 10px 0 ;
    }

    /* header and banner image */

    .header,
    .header .wrapper {
        height: 50vh;
        min-height: 200px;
    }

    .back-link {
        margin-bottom: 15px;
    }

    body > #user_topbar + .container {
        padding-top: 25px;
    }

    /* popups */

    .popup#popup_are_you_sure .wrapper {
        width: 90vw;
    }

    /* crew profile */

    #crew-kit .kit-items .kit {
        width: 100%;
    }

    #crew-experience .experience {
        flex-wrap: wrap;
    }

    #crew-experience .experience > div.name,
    #crew-experience .experience > div.dates {
        flex-basis: 100%;
        margin-bottom: 10px;
        margin-right: 0;
    }

    #popup_crew_profile_book_job_selection div.buttons {
        order: 1;
        margin-top: 10px;
    }

    #popup_crew_profile_book_job_selection div.buttons button {
        margin: 0;
    }

    #popup_crew_profile_book_job_selection div.buttons button:first-of-type {
        margin: 0 10px 10px 0;
    }

    #popup_crew_profile_book_job_selection .job {
        display: flex;
        flex-direction: column;
    }

    /* crew profile edit */

    #crew-profile-image {
        width: 105px;
        height: 105px;
        margin: -115px 0 30px calc(50% - 147px / 2);
    }

    #crew-profile-image #upload-profile-image {
        right: -30px;
        bottom: 0;
    }

    #crew-details,
    .crew-profile-preview.client #crew-details,
    .crew-profile-preview.admin #crew-details,
    .crew-profile-preview.super-admin #crew-details {
        padding-top: 5px;
    }

    .crew-profile-edit #crew-details,
    .crew-profile #crew-details,
    .crew-profile-preview.client #crew-details {
        padding-top: 5px;
    }

    .portfolio_item {
        width: 100%;
        height: calc(100vw - 50px);
        max-height: 275px;
    }

    .portfolio_item:nth-of-type(even) {
        margin-right: 0;
    }

    .portfolio_item:nth-of-type(3n+3) {
        margin-right: 0;
    }

    .portfolio_item .hover {
        height: calc(100vw - 50px);
        max-height: 275px;
    }

    .portfolio_item i.zoom, .portfolio_item i.video {
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .portfolio_item:nth-of-type(even) {
        margin-right: 0;
    }

    #crew-kit-edit .kit-items .kit {
        width: 100%;
        float: none;
        margin-right: 0;
        display: flex;
    }

    #crew-kit-edit .kit-items .kit button {
        margin-left: 5px;
    }

    #crew-profile-edit #driving_licence div:first-child {
        margin-right: 0;
        width: 100%;
    }

    .portfolio_item .button.icon-only {
        line-height: 26px;
        height: 40px;
        width: 40px;
        font-size: 20px;
        top: 0;
        right: 0;
    }

    #crew-profile-edit .wrapper-roles-edit .role.form-items .form-item:nth-of-type(3),
    #crew-profile-edit .wrapper-roles-edit .role.form-items .form-item:nth-of-type(5) {
        min-width: 0;
    }

    /* edit crew profile experience table */

    .crew-profile-edit #crew-experience table {
        margin-top: 0;
    }

    .crew-profile-edit #crew-experience table thead {
        display: none;
    }

    .crew-profile-edit #crew-experience table .experience {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        margin-top: 0;
    }

    .crew-profile-edit #crew-experience table tr:last-child td {
        padding: 0 0 15px;
    }

    .crew-profile-edit #crew-experience table tbody {
        display: flex;
        flex-direction: column;
    }

    .crew-profile-edit #crew-experience table .experience > td:first-child,
    .crew-profile-edit #crew-experience table .experience .has-name,
    .crew-profile-edit #crew-experience table .experience > td:last-child {
        flex-basis: 100%;
    }

    .crew-profile-edit #crew-experience table .experience > td:last-child {
        text-align: right;
    }

    .crew-profile-edit #crew-experience table .experience .has-datepicker {
        flex-basis: calc(50% - 6px);
        max-width: 100%;
    }

    .crew-profile-edit #crew-experience table .experience label {
        text-align: left;
        display: block;
    }

    .crew-profile-edit #crew-experience table .experience > td:last-child label {
        display: inline-block;
        margin: 0 10px 0 0;
        vertical-align: middle;
    }

    .crew-profile-edit #crew-experience table .experience > td:last-child button {
        vertical-align: middle;
    }

    .crew-profile-edit #crew-experience table .experience td {
        padding: 10px 0;
    }

    .crew-profile-edit #crew-experience table input.datepicker {
        width: 100%;
    }

    .crew-profile-edit #crew-experience table tr:nth-last-of-type(3) {
        border-bottom: 0;
    }

    /* portfolio item popup form */

    .crew-profile-edit form#form-portfolio-item input,
    .crew-profile-edit form#form-portfolio-item textarea {
        min-width: 0;
        width: 100%;
    }

    #popup_portfolio_item_edit .portfolio_item_image {
        float: none;
        width: 100%;
        height: 200px;
    }

    /* search locations */
    #locations_grid .location,
    #locations_grid .location:nth-child(-n+2) {
        width: 100%;
        margin: 0 0 30px;
    }

    #locations_grid .location:nth-child(3n+5) {
        margin-right: 0;
    }

    #locations_grid .location:nth-child(2n+4) {
        margin-right: 0;
    }

    #search_location_form p {
        padding: 70px 20px 0;
    }

    #search_location_form p * {
        display: block;
        margin: 0 auto;
    }

    #search_location_form p #search_field {
        margin-right: auto;
        margin-bottom: 10px;
    }

    /* single location */

    #location_all_images .image {
        width: 100%;
    }

    #location_all_images .image:nth-child(2n+2) {
        margin-right: 20px;
    }

    #enquire_location {
        padding-top: 0;
    }

    /* calendar */
    .calendar-wrapper {
        padding-left: 30px;
    }

    .month-wrapper {
        margin-right: 10px;
    }

    /* search crew */

    #searchcrew_grid .crew {
        width: 100%;
        margin-right: 0;
        margin-left: 0;
    }

    /* login page */

    #login_page .box {
        width: 100%;
        margin-bottom: 30px;
    }

    /* admin dashboard */

    /* edit location */

    .location-edit[class*="admin"] #location-images .guidance_text {
        clear: both;
    }

    .location-edit[class*="admin"] #location-images h2 + button {
        margin-bottom: 10px;
    }

     /* crew booking for job page */

    .job-booking .estimate thead,
    .job-booked .estimate thead {
        display: none;
    }

    .job-booking .estimate tr td,
    .job-booked .estimate tr td {
        padding: 10px 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .job-booking[class*="admin"] .estimate tr td,
    .job-booked[class*="admin"] .estimate tr td {
        flex-wrap: wrap;
    }

    .estimate .agency_fee {
        flex-basis: 100%;
    }

    .job-booking .estimate tr,
    .job-booked .estimate tr {
        display: flex;
        flex-direction: column;
        text-align: right;
    }

    .job-booking .estimate tr.totals,
    .job-booked .estimate tr.totals {
        flex-direction: row;
        justify-content: flex-end;
    }

    .job-booking .estimate tr.totals td,
    .job-booked .estimate tr.totals td {
        flex-direction: column;
        align-items: flex-end;
    }

    .job-booking .estimate tr.totals td:last-child,
    .job-booked .estimate tr.totals td:last-child {
        margin-left: 20px;
    }

    .job-booking .estimate tr td:empty {
        display: none;
    }

    /* estimate  */

    .job-booking .estimate tr:not(.totals) td:nth-of-type(1)::before,
    .job-booked .estimate tr:not(.totals) td:nth-of-type(1)::before {
        content: "Description: ";
    }

    .job-booking .estimate tr:not(.totals) td:nth-of-type(2)::before,
    .job-booked .estimate tr:not(.totals) td:nth-of-type(2)::before {
        content: "Unit Price: ";
    }

    .job-booking .estimate tr:not(.totals) td:nth-of-type(3)::before,
    .job-booked .estimate tr:not(.totals) td:nth-of-type(3)::before {
        content: "Quantity: ";
    }

    .job-booking .estimate tr:not(.totals) td:nth-of-type(4)::before,
    .job-booked .estimate tr:not(.totals) td:nth-of-type(4)::before {
        content: "Total: ";
    }

    /* popup */

    .job-booking #popup_crew_job_estimate_edit .estimate tr:not(.totals) td:nth-of-type(1)::before,
    .job-booked #popup_crew_job_estimate_edit .estimate tr:not(.totals) td:nth-of-type(1)::before {
        content: "Remove: ";
    }

    .job-booking #popup_crew_job_estimate_edit .estimate tr:not(.totals) td:nth-of-type(2)::before,
    .job-booked #popup_crew_job_estimate_edit .estimate tr:not(.totals) td:nth-of-type(2)::before {
        content: "Description: ";
    }

    .job-booking #popup_crew_job_estimate_edit .estimate tr:not(.totals) td:nth-of-type(3)::before,
    .job-booked #popup_crew_job_estimate_edit .estimate tr:not(.totals) td:nth-of-type(3)::before {
        content: "Unit Price: ";
    }

    .job-booking #popup_crew_job_estimate_edit .estimate tr:not(.totals) td:nth-of-type(4)::before,
    .job-booked #popup_crew_job_estimate_edit .estimate tr:not(.totals) td:nth-of-type(4)::before {
        content: "Quantity: ";
    }

    /* user assistance */

    .assistance #assistance_list thead {
        display: none;
    }

    .assistance #assistance_list tr td {
        padding: 10px 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .assistance #assistance_list tr {
        display: flex;
        flex-direction: column;
        text-align: right;
    }

    .job-booking .estimate tr td:empty {
        display: none;
    }

    /* estimate  */

    .assistance #assistance_list td:nth-of-type(1)::before {
        content: "User Name: ";
    }

    .assistance #assistance_list td:nth-of-type(2)::before {
        content: "User Type: ";
    }

    .assistance #assistance_list td:nth-of-type(3)::before {
        content: "Last Message: ";
    }

    .assistance #assistance_list td:nth-of-type(4)::before {
        content: "Messages: ";
    }

    /* send group email */

    .crews-email .section > p > strong {
        display: block;
    }

    /* crew account managing page (crew account and admin) */

    .crew[class*="admin"] .crew_details .box,
    .dashboard.myaccount.crew .crew_details .box {
        width: 100%;
        padding: 0;
    }

    /* crew management page for admin/super admin */

    /* account activity */

    .crew[class*="admin"] .section.activity thead {
        display: none;
    }

    .crew[class*="admin"] .section.activity tr td {
        padding: 10px 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .crew[class*="admin"] .section.activity tr {
        display: flex;
        flex-direction: column;
        text-align: right;
    }

    .crew[class*="admin"] .section.activity tr td:nth-of-type(1)::before {
        content: "Action: ";
    }

    .crew[class*="admin"] .section.activity tr td:nth-of-type(2)::before {
        content: "User: ";
    }

    .crew[class*="admin"] .section.activity tr td:nth-of-type(3)::before {
        content: "Date: ";
    }

    /* individual crew page  */

    .crew[class*="admin"] #crew_individual .section.activity tr td:nth-of-type(1)::before {
        content: "Activity: ";
    }

    .crew[class*="admin"] #crew_individual .section.activity tr td:nth-of-type(2)::before {
        content: "Link: ";
        flex-basis: 100%;
        text-align: left;
    }

    .crew[class*="admin"] #crew_individual .section.activity tr td:nth-of-type(2) span {
        flex-basis: 100%;
    }

    .crew[class*="admin"] #crew_individual .section.activity tr td:nth-of-type(2) br {
        display: none;
    }

    .crew[class*="admin"] #crew_individual .section.activity tr td:nth-of-type(2) {
        justify-content: flex-end;
    }

    .crew[class*="admin"] #crew_individual .section.activity tr td:nth-of-type(3)::before {
        content: "Actioned by: ";
    }

    .crew[class*="admin"] #crew_individual .section.activity tr td:nth-of-type(4)::before {
        content: "User type: ";
    }

    .crew[class*="admin"] #crew_individual .section.activity tr td:nth-of-type(5)::before {
        content: "Date: ";
    }

    .crew[class*="admin"] #crew_individual #table-top .left,
    .crew[class*="admin"] #crew_individual #table-top .right,
    .crew.crew-jobs #table-top .left,
    .crew.crew-jobs #table-top .right  {
        margin-right: 0;
        float: none;
        width: 100%;
        text-align: left;
    }

    .crew[class*="admin"] #crew_individual #table-top .left .filter-item,
    .crew.crew-jobs #table-top .left .filter-item {
        margin-bottom: 10px;
    }

    .crew[class*="admin"] #crew_individual #table-top .label-replacement,
    .crew.crew-jobs #table-top .label-replacement {
        display: block;
        margin-bottom: 10px;
    }

    .crew[class*="admin"] #crew_individual #table-top .filter,
    .crew.crew-jobs #table-top .filter {
        margin-bottom: 10px;
    }

    .crew[class*="admin"] #crew_individual #table-top .keyword-filter,
    .crew[class*="admin"] #crew_individual #table-top .sortby,
    .crew.crew-jobs #table-top .keyword-filter,
    .crew.crew-jobs #table-top .sortby {
        display: flex;
        align-items: flex-end;
    }

    .crew[class*="admin"] #crew_individual #table-top .sortby label,
    .crew.crew-jobs #table-top .sortby label {
        flex-basis: 100%;
    }

    .crew[class*="admin"] #crew_individual #table-top .keyword-filter button,
    .crew.crew-jobs #table-top .keyword-filter button {
        margin-bottom: 20px;
    }

    .crew[class*="admin"] #crew_individual #table-top .keyword-filter label,
    .crew.crew-jobs #table-top .keyword-filter label {
        flex-grow: 5;
        margin-right: 10px;
    }

    .crew[class*="admin"] #crew_individual #table-top .keyword-filter button,
    .crew.crew-jobs #table-top .keyword-filter button {
        flex-shrink: 0.1;
    }

    .crew[class*="admin"] #crew_individual #table-top .keyword-filter input,
    .crew[class*="admin"] #crew_individual #table-top select,
    .crew.crew-jobs #table-top .keyword-filter input,
    .crew.crew-jobs #table-top select {
        display: block;
        margin: 10px 0;
        width: 100%;
        min-width: 100px;
    }

    .dashboard.job .page-content .back-link {
        margin-bottom: 30px;
        display: inline-block;
        width: 50%;
    }

    .dashboard.job .page-content .back-link + .buttons {
        float: none;
        margin-bottom: 20px;
        text-align: right;
        display: inline-block;
        width: 48%;
        text-align: right;
    }

    .job-booking .form-buttons > * {
        margin-right: 0;
    }

    /* client users section */

    .client .users.section tr > * {
        padding-left: 10px;
        padding-right: 10px;
    }
}

@media screen and (max-width: 600px) {
    /* jobs */

    #jobs_list table td:first-child a {
        display: inline-block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        min-width: 0;
        width: 100%;
    }

    #jobs_list table td:first-child strong {
        width: calc(100% - 85px);
    }

    #jobs_list table td::before {
        white-space: nowrap;
        margin-right: 10px;
    }

    .jobs-all[class*="admin"] #jobs_list thead {
        display: none;
    }

    .jobs-all[class*="admin"] #jobs_list tr.job td {
        padding: 10px 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .jobs-all[class*="admin"] #jobs_list tr.job {
        display: flex;
        flex-direction: column;
        text-align: right;
    }

    .jobs-all[class*="admin"] #jobs_list tr.job td:nth-of-type(1)::before {
        content: "Job Name: ";
    }

    .jobs-all[class*="admin"] #jobs_list tr.job td:nth-of-type(2)::before {
        content: "Job Dates: ";
    }

    .jobs-all[class*="admin"] #jobs_list tr.job td:nth-of-type(3)::before {
        content: "Bookings: ";
    }

    .jobs-all[class*="admin"] #jobs_list tr.job td:nth-of-type(4)::before {
        content: "Client: ";
    }

    .jobs-all[class*="admin"] #jobs_list tr.job td:nth-of-type(5)::before {
        content: "Created On: ";
    }

    .jobs-all[class*="admin"] #jobs_list tr.job td:nth-of-type(6)::before {
        content: "Job Status: ";
    }
}

@media screen and (max-width: 560px) {
    /* edit estimate popup */
    #popup_crew_job_invoice_edit tr {
        flex-direction: column;
    }

    #popup_crew_job_invoice_edit tr td {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        width: 100%;
    }

    #popup_crew_job_invoice_edit tr td:last-child {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    #popup_crew_job_invoice_edit tr td:nth-child(1)::before {
        content: "Remove: ";
    }

    #popup_crew_job_invoice_edit tr td:nth-child(2)::before {
        content: "Description: ";
    }

    #popup_crew_job_invoice_edit tr td:nth-child(3)::before {
        content: "Unit price: ";
    }

    #popup_crew_job_invoice_edit tr td:nth-child(4)::before {
        content: "Quantity: ";
    }

    #popup_crew_job_invoice_edit tr td:nth-child(5)::before {
        content: "Receipt: ";
        margin-bottom: 10px;
    }

    #popup_crew_job_invoice_edit tr td:nth-child(5) .receipt-wrapper {
        width: 100%;
    }

    #popup_crew_job_invoice_edit tr td:nth-child(5) .receipt-wrapper label {
        text-align: left;
    }
}

@media screen and (max-width: 550px) {
    #crew-roles .crew-role {
        width: 100%;
    }

    #crew-roles .crew-role:nth-of-type(odd) {
        margin-right: 0;
    }

    .admin #popup_crew_profile_admin .section > a,
    .super-admin #popup_crew_profile_admin .section > a {
        display: block;
        float: none;
        margin: 0;
        width: 100%;
        text-align: center;
    }

    /* crews dashboard */

    .crews[class*="admin"] h1 + .buttons > .button {
        float: right;
        clear: both;
        margin: 10px 0 0;
    }

    /* choose membership popup */

    #form-choose-membership .stripe-logos {
        float: none;
    }

    #form-choose-membership .form-items {
        margin-bottom: 5px;
    }


    #form-choose-membership .popup_buttons {
        display: flex;
        justify-content: space-between;
    }

    /* admin dashboard crews page  */
    .crews[class*="admin"] #users_list thead {
        display: none;
    }

    .crews[class*="admin"] #users_list tr td {
        padding: 10px 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .crews[class*="admin"] #users_list tr td:nth-of-type(4) {
        display: none;
    }

    .crews[class*="admin"] #users_list tr {
        display: flex;
        flex-direction: column;
        text-align: right;
    }

    .crews[class*="admin"] #users_list tr td br {
        display: none;
    }

    .crews[class*="admin"] #users_list tr td:nth-of-type(1) > a:first-of-type {
        margin-right: 0;
    }

    .crews[class*="admin"] #users_list tr td:nth-of-type(1) > a:first-of-type,
    .crews[class*="admin"] #users_list tr td > strong,
    .crews[class*="admin"] #users_list tr td > div {
        margin-left: auto;
        margin-right: 10px;
    }

    .crews[class*="admin"] #users_list tr td > div + div {
        margin: 0;
    }

    .crews[class*="admin"] #users_list tr td:nth-of-type(1)::before {
        content: "Actions: ";
    }

    .crews[class*="admin"] #users_list tr td:nth-of-type(1) {
        order: 1;
    }

    .crews[class*="admin"] #users_list tr td:nth-of-type(2)::before {
        content: "ID: ";
    }

    .crews[class*="admin"] #users_list tr td:nth-of-type(3)::before {
        content: "Name: ";
        text-align: left;
        flex-basis: 40%;
    }

    .crews[class*="admin"] #users_list tr td:nth-of-type(3) {
        flex-wrap: wrap;
    }

    .crews[class*="admin"] #users_list tr td:nth-of-type(3) div:first-of-type {
        flex-basis: 60%;
        text-align: right;
        margin: 0;
    }

    .crews[class*="admin"] #users_list tr td:nth-of-type(3) div:last-of-type {
        flex-basis: 100%;
        text-align: right;
    }

    .crews[class*="admin"] #users_list tr td:nth-of-type(4)::before {
        content: "Last Login: ";
    }

    .crews[class*="admin"] #users_list tr td:nth-of-type(5)::before {
        content: "Plan: ";
        flex-basis: 30%;
        text-align: left;
    }

    .crews[class*="admin"] #users_list tr td:nth-of-type(5) span {
        margin-left: auto;
    }

    .crews[class*="admin"] #users_list tr td:nth-of-type(5) button {
        margin-left: 10px;
    }

    .crews[class*="admin"] #users_list tr td:nth-of-type(5) br {
        display: none;
    }

    .crews[class*="admin"] #users_list tr td:nth-of-type(6)::before {
        content: "Membership Status: ";
    }

    .crews[class*="admin"] #users_list tr td:nth-of-type(6) span {
        margin-left: auto;
    }

    .crews[class*="admin"] #users_list tr td:nth-of-type(6) button {
        margin-left: 10px;
    }

    .crews[class*="admin"] #users_list tr td:nth-of-type(6) br {
        display: none;
    }

    .crews[class*="admin"] #users_list tr td:nth-of-type(7)::before {
        content: "Profile Status: ";
    }

    /* clients table */

    .clients[class*="admin"] #users_list thead {
        display: none;
    }

    .clients[class*="admin"] #users_list tr td {
        padding: 10px 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .clients[class*="admin"] #users_list tr {
        display: flex;
        flex-direction: column;
        text-align: right;
    }

    .clients[class*="admin"] #users_list tr td br {
        display: none;
    }

    .clients[class*="admin"] #users_list tr td:nth-of-type(1) > a:first-of-type {
        margin-right: 0;
    }

    .clients[class*="admin"] #users_list tr td > strong,
    .clients[class*="admin"] #users_list tr td > div {
        margin-left: auto;
        margin-right: 10px;
    }

    .clients[class*="admin"] #users_list tr td > div + div {
        margin: 0;
    }

    /* clients */

    .clients[class*="admin"] #users_list tr:not(.empty) td:nth-of-type(1)::before {
        content: "Actions: ";
    }

    .clients[class*="admin"] #users_list tr td:nth-of-type(1) {
        order: 1;
    }

    .clients[class*="admin"] #users_list tr td:nth-of-type(1) > a:first-of-type {
        margin-right: 0;
    }

    .clients[class*="admin"] #users_list tr td:nth-of-type(2)::before {
        content: "ID: ";
    }

    .clients[class*="admin"] #users_list tr td:nth-of-type(3)::before {
        content: "Name: ";
    }

    .clients[class*="admin"] #users_list tr td:nth-of-type(4)::before {
        content: "Last Login: ";
    }

    .clients[class*="admin"] #users_list tr td:nth-of-type(5)::before {
        content: "Active Jobs: ";
    }

    .clients[class*="admin"] #users_list tr td:nth-of-type(6)::before {
        content: "Cancelled Jobs: ";
    }

    .clients[class*="admin"] #users_list tr td:nth-of-type(7)::before {
        content: "Completed Jobs: ";
    }

    .clients[class*="admin"] #users_list tr td:nth-of-type(8)::before {
        content: "Account Status: ";
    }

       /* general for dashboard tables (locations) */

       .locations[class*="admin"] #locations_list thead {
        display: none;
    }

    .locations[class*="admin"] #locations_list tr td {
        padding: 10px 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .locations[class*="admin"] #locations_list tr {
        display: flex;
        flex-direction: column;
        text-align: right;
    }

    /* locations */

    .locations[class*="admin"] #locations_list tr td:nth-of-type(1)::before {
        content: "Actions: ";
    }

    .locations[class*="admin"] #locations_list tr td:nth-of-type(1) {
        order: 1;
    }

    .locations[class*="admin"] #locations_list tr td:nth-of-type(1) > a:first-of-type {
        margin-left: auto;
        margin-right: 10px;
    }

    .locations[class*="admin"] #locations_list tr td:nth-of-type(2)::before {
        content: "Location title: ";
    }

    .locations[class*="admin"] #locations_list tr td:nth-of-type(3)::before {
        content: "Postcode: ";
    }

    .locations[class*="admin"] #locations_list tr td:nth-of-type(4)::before {
        content: "Status: ";
    }

    .locations[class*="admin"] #locations_list tr td:nth-of-type(5)::before {
        content: "Featured?: ";
    }

    /* sinlge job for admin/superadmin and client */

    .job #job_crew_list thead {
        display: none;
    }

    .job #job_crew_list tr:not(.text-right) td {
        padding: 10px 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .job #job_crew_list tr:not(.text-right) td:nth-of-type(2),
    .job #job_crew_list tr:not(.text-right) td:nth-of-type(5) { /*hide role and messages columns*/
        display: none;
    }

    .job #job_crew_list tr {
        display: flex;
        flex-direction: column;
        text-align: right;
    }

    .job #table-top > * {
        flex-basis: 100%;
    }

    .job #job_crew_list tr:not(.text-right) td:nth-of-type(1)::before {
        content: "Crew: ";
        font-weight: 300;
    }

    .job #job_crew_list tr td div.round_profile_image {
        margin-left: auto;
    }

    .job #job_crew_list tr td:nth-of-type(2)::before {
        content: "Role(s): ";
    }

    .job #job_crew_list tr td:nth-of-type(2) .role-icon:first-of-type {
        margin-left: auto;
    }

    .job #job_crew_list tr td:nth-of-type(3)::before {
        content: "Requested Dates: ";
        white-space: nowrap;
        align-self: flex-start;
    }

    .job #job_crew_list tr td:nth-of-type(4)::before {
        content: "Status: ";
    }

    .job #job_crew_list tr td:nth-of-type(5)::before {
        content: "Messages: ";
    }

    .job #job_crew_list tr td:nth-of-type(6)::before {
        content: "Cost: ";
    }

    /* if no crew is assigned yet */

    .job #job_crew_list tr.centered td::before {
        display: none;
    }

    .job #job_crew_list tr.centered td {
        flex-wrap: wrap;
    }

    /* jobs */

    .crew[class*="admin"] .section.jobs thead,
    .crew.crew-jobs #jobs_list thead {
        display: none;
    }

    .crew[class*="admin"] .section.jobs tr td,
    .crew.crew-jobs #jobs_list tr td {
        padding: 10px 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
    }

    .crew[class*="admin"] .section.jobs tr,
    .crew.crew-jobs #jobs_list tr {
        display: flex;
        flex-direction: column;
        text-align: right;
    }

    .crew[class*="admin"] .section.jobs tr td:nth-of-type(1)::before {
        content: "Job Title: ";
    }

    .crew[class*="admin"] .section.jobs tr td:nth-of-type(2)::before {
        content: "Job Dates: ";
    }

    .crew[class*="admin"] .section.jobs tr td:nth-of-type(3)::before {
        content: "Job Status: ";
    }

    .crew[class*="admin"] .section.jobs tr td:nth-of-type(4)::before {
        content: "Booking Status: ";
    }

    /* individual crew page on admin side */
    .crew[class*="admin"] #crew_individual .section.jobs tr td:nth-of-type(1)::before,
    .crew.crew-jobs #jobs_list tr td:nth-of-type(1)::before {
        content: "Job Title: ";
        flex-basis: 90px;
        text-align: left;
    }

    .crew[class*="admin"] #crew_individual .section.jobs tr td:nth-of-type(1) strong,
    .crew.crew-jobs #jobs_list tr td:nth-of-type(1) strong {
        flex-basis: calc(100% - 100px);
    }

    .crew[class*="admin"] #crew_individual .section.jobs tr td:nth-of-type(1),
    .crew.crew-jobs #jobs_list tr td:nth-of-type(1) {
        justify-content: flex-end;
    }

    .crew[class*="admin"] #crew_individual .section.jobs tr td:nth-of-type(1) br,
    .crew.crew-jobs #jobs_list tr td:nth-of-type(1) br {
        display: none;
    }

    .crew[class*="admin"] #crew_individual .section.jobs tr td:nth-of-type(2)::before,
    .crew.crew-jobs #jobs_list tr td:nth-of-type(2)::before {
        content: "Requested Role: ";
    }

    .crew[class*="admin"] #crew_individual .section.jobs tr td:nth-of-type(3)::before,
    .crew.crew-jobs #jobs_list tr td:nth-of-type(3)::before {
        content: "Requested Dates: ";
    }

    .crew[class*="admin"] #crew_individual .section.jobs tr td:nth-of-type(3),
    .crew.crew-jobs #jobs_list tr td:nth-of-type(3) {
        flex-wrap: nowrap;
        align-items: flex-start;
    }

    .crew[class*="admin"] #crew_individual .section.jobs tr td:nth-of-type(4)::before,
    .crew.crew-jobs #jobs_list tr td:nth-of-type(4)::before {
        content: "Booking Status: ";
    }

    .crew[class*="admin"] #crew_individual .section.jobs tr td:nth-of-type(5)::before,
    .crew.crew-jobs #jobs_list tr td:nth-of-type(5)::before {
        content: "Messages: ";
    }

    /* activity table */
    .job[class*="admin"] .activity thead,
    .job.client .activity thead {
        display: none;
    }

    .job[class*="admin"] .activity tr td,
    .job.client .activity tr td {
        padding: 10px 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .job[class*="admin"] .activity tr,
    .job.client .activity tr {
        display: flex;
        flex-direction: column;
        text-align: right;
    }
    /* activity */
    .job[class*="admin"] .activity tr td:nth-of-type(1)::before,
    .job.client .activity tr td:nth-of-type(1)::before {
        content: "Activity: ";
    }

    .job[class*="admin"] .activity tr td:nth-of-type(2)::before,
    .job.client .activity tr td:nth-of-type(2)::before {
    content: "Link: ";
    }

    .job[class*="admin"] .activity tr td:nth-of-type(2),
    .job.client .activity tr td:nth-of-type(2) {
        order: 1;
    }

    .job[class*="admin"] .activity tr td:nth-of-type(3)::before,
    .job.client .activity tr td:nth-of-type(3)::before {
        content: "Actioned by: ";
    }

    .job[class*="admin"] .activity tr td:nth-of-type(4)::before,
    .job.client .activity tr td:nth-of-type(4)::before {
        content: "User type: ";
    }

    .job[class*="admin"] .activity tr td:nth-of-type(5)::before,
    .job.client .activity tr td:nth-of-type(5)::before {
        content: "Date: ";
    }

    .job-booked .activity thead,
    .job-completed .activity thead {
        display: none;
    }

    .job-booked .activity tr td,
    .job-completed .activity tr td {
        padding: 10px 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
    }

    .job-booked .activity tr,
    .job-completed .activity tr {
        display: flex;
        flex-direction: column;
        text-align: right;
    }

    /* activity */
    .job-booked .activity tr td:nth-of-type(1)::before,
    .job-completed .activity tr td:nth-of-type(1)::before  {
        content: "Activity: ";
    }

    .job-booked .activity tr td:nth-of-type(2)::before,
    .job-completed .activity tr td:nth-of-type(2)::before  {
        content: "User: ";
    }

    .job-booked .activity tr td:nth-of-type(3)::before {
        content: "User type: ";
    }

    .job-booked .activity tr td:nth-of-type(4)::before,
    .job-completed .activity tr td:nth-of-type(4)::before  {
        content: "Date: ";
    }

    /* client */

    .client[class*="admin"] .jobs.section thead,
    .client.jobs table:not(.calendar-month) thead,
    .client[class*="admin"] .activity.section thead
    {
        display: none;
    }

    .client[class*="admin"] .jobs.section tr:not(.empty) td,
    .client.jobs table:not(.calendar-month) tr:not(.empty) td,
    .client[class*="admin"] .activity.section tr td {
        padding: 10px 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .client[class*="admin"] .jobs.section tr.empty td,
    .client.jobs table:not(.calendar-month) tr.empty td  {
        text-align: center;
    }

    .client[class*="admin"] .jobs.section tr,
    .client.jobs table:not(.calendar-month) tr,
    .client[class*="admin"] .activity.section tr {
        display: flex;
        flex-direction: column;
        text-align: right;
    }

    /* activity section  */

    .client[class*="admin"] .activity.section tr td:not(.empty):nth-of-type(1)::before {
        content: "Action: ";
    }

    .client[class*="admin"] .activity.section tr td:nth-of-type(2)::before {
        content: "User: ";
    }

    .client[class*="admin"] .activity.section tr td:nth-of-type(3)::before {
        content: "Date: ";
    }

    /* jobs section  */

    .client[class*="admin"] .jobs.section tr:not(.empty) td:nth-of-type(1)::before,
    .client.jobs table:not(.calendar-month) tr:not(.empty) td:nth-of-type(1)::before {
        content: "Job Title: ";
    }

    .client[class*="admin"] .jobs.section tr td:nth-of-type(2)::before,
    .client.jobs table:not(.calendar-month) tr:not(.empty) td:nth-of-type(2)::before {
        content: "Job dates: ";
    }

    .client[class*="admin"] .jobs.section tr td:nth-of-type(3)::before,
    .client.jobs table:not(.calendar-month) tr:not(.empty) td:nth-of-type(3)::before {
        content: "Bookings: ";
    }

    .client[class*="admin"] .jobs.section tr td:nth-of-type(3),
    .client.jobs table:not(.calendar-month) tr:not(.empty) td:nth-of-type(3) {
        display: none;
    }

    .client[class*="admin"] .jobs.section tr td:nth-of-type(4)::before,
    .client.jobs table:not(.calendar-month) tr:not(.empty) td:nth-of-type(4)::before {
        content: "Created On: ";
    }

    .client[class*="admin"] .jobs.section tr td:nth-of-type(4),
    .client.jobs table:not(.calendar-month) tr:not(.empty) td:nth-of-type(4) {
        display: none;
    }

    .client[class*="admin"] .jobs.section tr td:nth-of-type(5)::before,
    .client.jobs table:not(.calendar-month) tr:not(.empty) td:nth-of-type(5)::before {
        content: "Job status: ";
    }

    .client[class*="admin"] .jobs.section tr td:nth-of-type(6)::before,
    .client.jobs table:not(.calendar-month) tr:not(.empty) td:nth-of-type(6)::before {
        content: "Booking updates: ";
    }

    .client[class*="admin"] .jobs.section tr td:nth-of-type(6),
    .client.jobs table:not(.calendar-month) tr:not(.empty) td:nth-of-type(6) {
        display: none;
    }

    /* client */

    .client .users.section thead {
        display: none;
    }

    .client .users.section tr td {
        padding: 10px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .client .users.section tr {
        display: flex;
        flex-direction: column;
        text-align: right;
    }

    .client.client-my-account .users.section tr td:nth-of-type(1)::before {
        content: "User Name: ";
    }

    .client.client-my-account .users.section tr td:nth-of-type(2)::before {
        content: "Email: ";
    }

    .client.client-my-account .users.section tr td:nth-of-type(3)::before {
        content: "Phone Number: ";
    }

    .client.client-my-account .users.section tr td:nth-of-type(3) {
        display: none;
    }

    .client.client-my-account .users.section tr td:nth-of-type(4)::before {
        content: "Last Login: ";
    }

    .client.client-my-account .users.section tr td:nth-of-type(4) {
        display: none;
    }

    .client.client-my-account .users.section tr td:nth-of-type(5)::before {
        content: "Primary: ";
    }

    .client.client-my-account .users.section tr td:nth-of-type(6)::before {
        content: "Actions: ";
    }

    .client[class*="admin"] .users.section tr td:last-child button:first-of-type {
        margin: 0 0 0 auto;
    }

    .client[class*="admin"] .users.section tr td:last-child button:nth-of-type(2) {
        margin-left: 10px;
    }

    .client[class*="admin"] .users.section thead {
    display: none;
    }

    /* job completed */

    /* crew booking for job page */

    .job-completed .estimate thead {
        display: none;
    }

    .job-completed .estimate tr td {
        padding: 10px 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .job-completed[class*="admin"] .estimate tr td {
        flex-wrap: wrap;
    }

    .job-completed .estimate .agency_fee {
        flex-basis: 100%;
    }

    .job-completed .estimate tr {
        display: flex;
        flex-direction: column;
        text-align: right;
    }

    .job-completed .estimate tr.totals {
        flex-direction: row;
        justify-content: flex-end;
    }

    .job-completed .estimate tr.totals td {
        flex-direction: column;
        align-items: flex-end;
    }

    .job-completed .estimate tr.totals td:last-child {
        margin-left: 20px;
    }

    .job-completed .estimate tr td:empty {
        display: none;
    }

    /* estimate  */

    .job-completed .estimate tr:not(.totals) td:nth-of-type(1)::before {
        content: "Description: ";
    }

    .job-completed .estimate tr:not(.totals) td:nth-of-type(2)::before {
        content: "View receipt: ";
    }

    .job-completed .estimate tr:not(.totals) td:nth-of-type(3)::before {
        content: "Quantity: ";
    }

    .job-completed .estimate tr:not(.totals) td:nth-of-type(5)::before {
        content: "Total: ";
    }
}

@media screen and (max-width: 500px) {
    .crew-profile-preview.admin .profile-buttons button,
    .crew-profile-preview.super-admin .profile-buttons button {
        display: block;
        float: none;
        margin: 0;
        width: 100%;
    }

    .crew-profile-preview.admin .profile-buttons button + button,
    .crew-profile-preview.super-admin .profile-buttons button + button {
        margin-top: 10px;
    }

    /* popups */

    .popup#popup_are_you_sure .wrapper button {
        width: 100%;
        margin: 0 0 10px;
    }

    .locations[class*="admin"] #locations_list table + div .button {
        width: 100%;
        margin: 0 0 10px;
        text-align: center;
    }

    /* job overview */

    .job #job_crew_list tr.centered td {
        justify-content: center;
    }

    .job #job_crew_list tr.centered td a {
        flex-basis: 100%;
        text-align: center;
    }

    .dashboard.job .brief .guidance_text {
        display: block;
        margin-left: 0;
    }

    .dashboard #user_topbar .small-logo img,
    .admin #user_topbar .small-logo img {
        height: 70%;
        transform: translate(0, 30%);
    }

    .dashboard #user_topbar .small-logo {
        padding: 10px;
    }

    .dashboard #user_topbar #main_menu a,
    .dashboard #user_topbar .right-side .logout a,
    .admin #user_topbar #main_menu a,
    .admin #user_topbar .right-side .logout a {
        padding: 0 20px;
        width: 40px;
    }

    .dashboard #user_topbar #main_menu a::before,
    .dashboard #user_topbar .logout a::before,
    .admin #user_topbar #main_menu a::before,
    .admin #user_topbar .logout a::before {
        font-size: 22px;
    }
}

@media screen and (max-width: 450px) {

    /* calendar */

    #search_crew_form form #search_field,
    #search_crew_form form #select_dates {
        width: 100%;
        min-width: 100%;
    }

    #search_crew_form #search_calendar {
        left: 0;
        width: 100%;
    }

    .calendar-month td.day span {
        height: 30px;
        width: 30px;
        line-height: 24px;
    }

    .jobs-all[class$="admin"] #table-top .label-replacement,
    .locations[class$="admin"] #table-top .label-replacement,
    .clients[class$="admin"] #table-top .label-replacement,
    .client[class$="admin"] #table-top .label-replacement,
    .client.jobs #table-top .label-replacement  {
        display: block;
        margin: 0 0 10px;
    }

    /* availability keys */

    #availability_key .key {
        margin-bottom: 10px;
    }

    #availability_key .key:last-of-type {
        margin: 0;
    }

    .jobs-all[class$="admin"] #table-top .keyword-filter label,
    .locations[class$="admin"] #table-top .keyword-filter label,
    .clients[class$="admin"] #table-top .keyword-filter label,
    .client[class$="admin"] #table-top .keyword-filter label,
    .crews[class$="admin"] #table-top .keyword-filter label,
    .client.jobs #table-top .keyword-filter label {
        flex-grow: 5;
    }

    .jobs-all[class$="admin"] #table-top .keyword-filter input,
    .locations[class$="admin"] #table-top .keyword-filter input,
    .clients[class$="admin"] #table-top .keyword-filter input,
    .client[class$="admin"] #table-top .keyword-filter input,
    .client.jobs #table-top .keyword-filter input,
    .crews[class$="admin"] #table-top .keyword-filter input {
        width: 100%;
        min-width: 100px;
    }

    .jobs-all[class$="admin"] #table-top .keyword-filter button,
    .locations[class$="admin"] #table-top .keyword-filter button,
    .clients[class$="admin"] #table-top .keyword-filter button,
    .client[class$="admin"] #table-top .keyword-filter button,
    .crews[class$="admin"] #table-top .keyword-filter button,
    .client.jobs #table-top .keyword-filter button  {
        flex-shrink: 0.1;
        margin-left: 10px;
    }

    .job-completed .bottom_estimate.admin > p:first-child > .button {
        display: block;
        width: 100%;
        margin-bottom: 15px;
        text-align: center;
    }

    .job-completed .bottom_estimate.admin > p:first-child > .button:nth-child(2) {
        margin-left: 0;
    }
}

@media screen and (max-width: 400px) {
    /* crew profile */

    .crew-profile-preview.client .profile-buttons button {
        display: block;
        float: none;
        margin: 0;
        width: 100%;
    }

    .crew-profile-preview.client .profile-buttons button + button {
        margin-top: 10px;
    }

    .crew-profile-preview .section {
        margin-bottom: 0;
    }

    #popup_crew_profile_book_job_selection div.buttons button,
    #popup_crew_profile_book_job_selection div.buttons a {
        margin: 0;
        display: block;
        width: 100%;
        text-align: center;
    }

    #popup_crew_profile_book_job_selection div.buttons button {
        margin: 0 0 10px 0;
    }

    input[type="text"],
    input[type="number"],
    input[type="email"],
    input[type="password"],
    select,
    textarea {
        min-width: 100%;
        width: 100%;
    }

    #table-top .label-replacement,
    #table-top label:not(.label) {
        display: block;
    }

    /* admin dashboard */

    /* locations */

    .locations[class*="admin"] .page-content > h1 {
       clear: both;
    }

    .locations[class*="admin"] .page-content > p:first-child .button {
        margin-bottom: 10px;
     }

    /* crews dashboard */

    .crews[class*="admin"] h1 + .buttons > .button {
        float: none;
        display: block;
        text-align: center;
    }
}