@media screen and (max-width: 947px) {
    label.full, select.full, input[type=text].full {
        display: block;
        width: 100% !important;
        margin: 0 !important;
        margin-top: 2px !important;
        font-size: 1em;
    }
    label.full {
        font-size: 1.2em;
        margin-top: 20px !important;
    }
    input[type=submit].full {
        display: block;
        width: 100% !important;
        margin: 0 !important;
        margin-top: 10px !important;
        height: 40px !important;
    }
    label[for] {
        display: inline;
    }
    form > div:not(:first-of-type) {
        margin-top: 10px;
        padding: 0;
    }
    body > div.content {
        padding: 0 10px;
    }
    body {
        /* padding-bottom: 10px; */
    }
    #activation-steps > div.row:not(:last-of-type) {
        padding-bottom:  10px;
    }
    .upload-row div.status {
        position: unset;
        margin: 0!important;
        padding: 3px 10px;
        display: flex;
        align-content: center;
        justify-content: center;
        height: fit-content;
        width: fit-content;
        float: left;
        border-radius: 6px;
        margin-bottom: 6px!important;
    }
    div.status:before {
        display: none !important;
    }
    .logo-container {
        padding: 0 !important;
    }
    .mobile-menu {
        width: 100%;
    }
    .mobile-menu > .menu-item > .icon {
        margin-bottom: 0px !important;
    }
    .menu-item.settings {
        display: none;
    }
    .menu-item.mobile-menu-button {
        display: inline-flex;
    }
    div.sidebar {
        min-height: 0;
        margin-top: 0 !important;
    }
    .row.sidebar-cont > .float-left {
        order: 1;
        margin-top: 20px;
    }
    .row.sidebar-cont > .float-right {
        order: 2;
    }

    .status.loading {
        width: 30px!important;
        display: inline-flex;
        align-items: center;
        justify-content: center!important;
        text-align: center;
    }
    .status.loading > span {
        margin-left: 0!important;
    }
    div.name {
        display: flex;
    }
    div.name > input:not(:first-child):not(:last-child) {
        margin: 0 4px;
    }
    .employee > .expiry {
        height: auto!important;
        margin-left: 4px !important;
        margin-top: 10px;
    }
    .actions > .row:not(:first-of-type) {
        margin-top: 20px;
    }
    .calculator-block {
        display: block; 
        vertical-align: bottom; 
    }
    .calculator-block:not(:first-of-type) {
        margin-left: 0px;
        margin-top: 10px;
    }
    table.calculation {
        width: 100%;
        /* row-gap: 10px; */
        /* column-gap: 5px; */
        /* row-gap: 20px; */
    }
    table.calculation > thead {
        display: none;
    }
    table.calculation > tbody > tr > td:first-of-type {
        width: auto;
    }
    table.calculation > tbody > tr > td > input {
        width: calc(100% - 30px)!important;
    }
    table.calculation > tbody > tr:not(:nth-child(1)):not(:nth-child(2)) {
        margin-top: 10px;
    }
    table.calculation > tbody > tr {
        display: block;
        width: 100%;
        border: 1px solid;
        padding: 4px;
        margin: 0!important;
  
        border: 1px solid var(--primary-colour);
        background: var(--primary-colour-washed);
        border-radius: 6px;

    }
    table.calculation > tbody > tr td:first-of-type {
      color: var(--secondary-colour);
    }
    table.calculation > tbody > tr input {
        background: white;
    }
    table.calculation > tbody > tr span.pound {
      background: var(--primary-colour);
      color: white;
    }
    table.calculation > tbody > tr span.info {
      margin-left: 0!important;
    }
    table.calculation > tbody > tr span.info > span {
      left: 0;
      transform: translate(0%);
    }
    table.calculation > tbody > tr:not(:first-of-type) {
      margin-top: 10px!important;
    }
    table.calculation > tbody > tr > td {
        display: block;
        padding: 0;
        margin: 10px;
    }
    table.calculation > tbody > tr:nth-child(odd) {
        margin-right: 5px;
    }
    table.calculation > tbody > tr:nth-child(even) {
        margin-left: 5px;
    }
    table.calculation > tbody > tr > td[title]:before {
        content: attr(title);
        display: block;
        margin-bottom: 4px;
        margin-top: 10px;
    }
    table.calculation > tbody > tr > td:first-of-type {
        font-weight: bold;
        font-size: 1em;
        /* margin: 10px 0; */
        /* margin-top: 0px; */
    }
    .border-box {
        display: block;
        position: relative;
        left: 0;
        width: 100%;
        margin-bottom: 10px;
    }
    .blog {
        width: calc(50% - 7.5px);
        display: inline-block;
    }
    .blog:first-of-type {
        margin-right: 7.5px;
    }
    .blog:last-of-type {
        margin-left: 7.5px;
    }
   div.row.sidebar-cont > div.col-md-9.float-right.home-content > div.row > div.col-md-4 > p {
       margin: 0;
       margin-top: 10px
   }
   .aside {
     display: none;
   }
    .step-container > .title {
        position: relative;
    }
    input[type="time"] {
        display: flex;
    }
    div.step-container > div > div.status {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 10px!important;
        height: 100%;
        padding: 0!important;
        float: left!important;
        margin-right: 10px!important;
        margin-left: -10px!important;
        border-right: 1px solid var(--splash-background);
        color: transparent;
    }
    div.step-container > div > div.status:not(.loading) {
        animation: showtext 3s linear;
    }
    div.step-container > div > div.status.loading {
      width: 40px!important;
      max-width: 40px!important;
      font-size: 0!important;
    }
    #lhnHelpOutCenter {
        padding-top: 84px;
    }
}

@keyframes showtext {
  0% {
      position: absolute;
      left: 0;
      top: 0;
      color: white;
      min-width: 80px;
      font-size: .8em;
  }
  80% {
    position: absolute;
    left: 0;
    top: 0;
    color: white;
    min-width: 80px;
    font-size: .8em;
  }
  100% {
    min-width: 10px;
    font-size: 0em;
    color: transparent;
  }
}

/* MOBILE */
@media screen and (max-width: 767px) {

div.mobile-menu-flyout::-webkit-scrollbar {
    -webkit-appearance: none;
    -webkit-overflow-scrolling: auto
}
div.mobile-menu-flyout::-webkit-scrollbar:vertical {
    width: 8px;
}
div.mobile-menu-flyout::-webkit-scrollbar:horizontal {
    height: 8px;
}
div.mobile-menu-flyout::-webkit-scrollbar-thumb {
    background-color: var(--secondary-colour);
    border-radius: 10px;
    border: 2px solid transparent;
}
div.mobile-menu-flyout::-webkit-scrollbar-track {
    border-radius: 10px;
    background-color: transparent;
}

span.copy-above:hover, span.split-shift:hover, .clear-row:hover {
    transform: scale(1) translateY(-50%);
    color: var(--primary-colour);
}

  .sidebar {
      display: none;
  }  
  .contact-info > .row {
      display: block;
      width: 100%;
  }
  .contact-info > .row:not(:first-of-type) {
      margin-top: 10px;
  }
  div.contact-info > div.row > div.col:nth-child(1) {
      text-align: center;
      font-weight: bold;
  }
  div.contact-info > div.row > div.col:nth-child(3) {
      text-align: center;  }
  div.contact-info > div.row > div.col:nth-child(2) > div.row > div:nth-child(2) {
      text-align: right;
      padding: 0;
  }
  div.contact-info > div > div:nth-child(2) > div {
      width: 100%;
      margin: 0;
      padding: 0;
  }
  div.contact-info > div {
      margin-right: 0!important;
      padding: 0;
  }
  div.contact-info > div.row > div.col > div.row > div.col {
      padding-left: 0;
      padding-right: 0;
  }
    .responsive[mobile] {
        display: initial;
    }
    .top-tips.responsive[mobile] {
        display: block;
    }
    .responsive[desktop] {
        display: none;
    }
    .menu-item.notifications {
        float: none;
    }
    .menu-item.notifications > div {
        left: 0;
        font-size: .6em;
        min-width: 296px;
        top: 100%;
    }
    div.menu-item.notifications:not([count="0"]) > a > .icon > .count {
        right: 15px;
        top: 15px;
    }
    .menu-item br {
        display: none;
    }
    .content.user-bar {
        height: 0;
        overflow: hidden!important;
        padding: 0;
        padding-top: 0!important;
        opacity: 0;
        visibility: hidden;
    }
    .page-title {
        /* white-space: normal!important; */
        /* word-break: break-word; */
        width: 100%;
        max-width: 100%;
        margin-bottom: 0;
    }

    div.page-title > h1 {
        white-space: normal;
        width: fit-content;
        flex-shrink: 0;
        display: flex;
        font-size: 1.4em;
    }
    div.page-title > h1 > span {
      margin-right: 10px;
    }
    span#lookup {
        margin-top: 4px;
    }
    .bank-details.add-ee > label {
        display: block;
        margin-bottom: 0;
    }
    button.hamburger {
        outline: 0;
    }
    div.menu-item:hover:before {
        display: none;
    }
    .step .step .col-md-2 {
        margin-top: 10px;
    }
    .tag.orange.most-common {
        display: block;
        width: fit-content;
    }
    .option .col-md-1:first-of-type {
        align-items: flex-start;
        display: flex;
    }
    .hours-row > .copy-above,
    .hours-row > .clear-row {
        display: none;
    }
    .hours-table {
        padding-right: 0!important;
        width: 100%;
    }
    .top-tips {
        margin-left: 0;
        width: 100%;
    }
    .term-calendar > table {
        width: 100%;
        margin: 0;
        table-layout: fixed;
    }
    input[name="job-other"] {
        margin-top: 4px;
    }
    form.securityQuestions > div > select {
        width: 100%!important;
    }
    .upload-row {
        position: relative;
        margin: 0;
    }
    .step-title {
        display: flex;
        align-items: center;
        font-size: 1em;
    }
    .step-title > h2 {
        font-size: 1.2em;
    }
    .step-title > div.step {
        font-size: 1.2em;
        width: 40px!important;
        height: 40px!important;
    }
    div#activation-steps > div.row:not(.locked):hover:before {
        content: " ";
        position: absolute;
        width: 4px;
        height: calc(100% - 46px);
        bottom: 0;
        left: 40px;
        transform: translateX(-50%);
    }
    .hmrc-forms > input[type=submit] {
        display: block;
        width: fit-content;
    }
    .hmrc-forms > input[type=submit]:not(:first-of-type) {
        margin-top: 4px;
    }
    .step-notice {
        margin-top: 0px; 
        font-size: 0.9em;
    }
    div#activation-steps > div.row:not(.locked):hover > a > div > h2 {
        font-size: 1.2em!important;
        /* margin: 0; */
    }
    div#activation-steps > div.row > a > div > h2 {
        height: auto;
        min-height: 54px;
        font-size: 1.2em;
    }
    div#activation-steps > div.row > a > div > div.step-number {
        margin: 0;
    }
    .row.sidebar-cont div#activation-steps > .row .col-md-11 {
        padding: 0;
    }
    .action-bar > span:first-of-type {
        text-align: left;
        padding-right: 10px;
    }
    div.step > div.content > div.row > div.col-md-2 {
        margin-top: 10px;
    }
    .hr-video {
        padding: 0 15px;
    }
    .hr-video > .row > .col-md-6 {
        margin-top: 10px;
    }
    .hr-video > .row > .col-md-3:not(:first-of-type) {
        margin-top: 10px;
    }
    .renewal-notices {
        display: block;
    }
    .full-width table th, 
    .full-width table td {
        width: fit-content!important;
        white-space: nowrap;
    }
    .step > div.content > div.row {
        margin: 0!important;
        width: 100%;
    }
    .step > div.content > div.row > div {
        padding: 0;
    }
    #step-1 > div.content.step-1 > div.row > div.col-md-10 > div > input {
        margin-top: 4px;
    }
    .selectTaxYear {
        margin-left: 10px!important;
        width: 160px!important;
    }
    .selectTaxYear > select {
        width: 160px!important;
        min-width: 160px!important;
    }
    form.select-employee {
        margin-left: 0;
    }
    .payslips.toolbar > #goBack {
        position: unset;
        width: auto;
        height: auto;
        display: inline-block;
        margin-bottom: 4px;
        margin-top: 4px;
    }
    .payslips.toolbar > .toolbar > div > div,
    .payslips.toolbar > .toolbar a.button,
    .payslips.toolbar > .toolbar input {
        max-width: auto!important;
        min-width: auto!important;
    }
    .payslips.toolbar > .toolbar > div {
        width: 100%;
    }
    .payslips.toolbar > .toolbar > span.divider {
        width: 0;
        margin: 0 2px;
    }
    .pagination.toolbar > a#prev {
        margin-right: 20px!important;
    }
    .pagination.toolbar > a#next {
        margin-left: 20px!important;
    }
    .pagination.toolbar {
        margin-bottom: 10px;
    }
    form#continue > p {
        font-size: 1em!important;
    }
    div.slide {
        font-size: 1em!important;
        padding: 20px 10px!important;
    }
    div.slick-track > div.slide h1, div.slick-track > div.slide p {
        font-size: 1em;
    }
    div.slick-track > div.slide h1, div.slick-track > div.slide h2 {
        font-size: 1.2em;
    }
    div.slick-track > div.slide > div.row > div:not(:first-of-type) {
        margin-top: 10px;
    }
    div.slick-track > div.slide > div.row > div.col-md-4 {
        width: fit-content;
    }
    div.slick-track > div.slide > div.row > div:not(.col-md-8) {
        order: 1;
        margin: 0;
    }
    div.slick-track > div.slide > div.row > div.col-md-8 {
        order: 2;
        margin: 0;
        margin-top: 10px;
    }
    div.slick-track > div.slide[class*="-wide"] {
        padding: 10px;
    }
    .slide > .row > .col-md-4 {
        display: block;
        align-items: center;
        justify-content: center;
    }
    div.slick-track > div.slide[class*="-wide"] > div.row > div:not(.col-md-8) {
        margin-top: 0;
    }
    div.slick-track > div.slide[class*="-wide"] > div.row > div.col-md-8 {
        margin-top: 10px;
    }
    .lhnright.lhnslide#lhnHocButton {
        right: 10px!important;
        bottom: 44px!important;
        width: 60px!important;
        height: 60px!important;
        padding: 0!important;
        border-radius: 100%;
        transform: rotate(0);
    }
    .lhnHocChatTxtCont > span[role=button] {
        display: none;
    }
    div#lhnHocButton.lhnslide div.lhnHocChatBubble {
        margin-right: 0;

    }
    .lhnright.lhnslide#lhnHocButton > div,
    .lhnright.lhnslide#lhnHocButton > div > div {
        height: 100%;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    div#lhnHocButton.lhnslide div.lhnHocChatBubble {
        position: relative;
    }
}

@media screen and (max-width: 516px) {
    form.securityQuestions > div > input[type=email],
    form.securityQuestions > div > input[type=text],
    form.securityQuestions > div > input[type=password] {
        max-width: auto;
        min-width: auto;
        display: block;
        width: 100%;
    }
    .content, .container {
        padding: 0 10px;
    }
}