/* mobile and other */
/* 1200px */
@media only screen and (max-width: 1200px) {
    .content-area .row {
        width: auto !important;
    }
    .content-area .span-1,
    .content-area .span-2,
    .content-area .span-3,
    .content-area .span-4,
    .content-area .span-5,
    .content-area .span-6,
    .content-area .span-7,
    .content-area .span-8,
    .content-area .span-9,
    .content-area .span-10,
    .content-area .span-11,
    .content-area .span-12 {
        width: calc(100vw - 240px);
    }
    .content-area .row > .cell {
        margin-right: 0px !important;
        margin-left: 0px !important;
        margin-top: 8px;
        margin-bottom: 8px;
    }
    .content-area .row > .span-1.cell:first-of-type {
        margin-left: 0px !important;
    }
    .content-area .row > .span-1.cell:last-of-type {
        margin-right: 0px !important;
    }
    .buttons-outer-login {
        display:none;
    }
}

/* 750px */
@media only screen and (max-width: 750px) {

    body {
        background-color: var(--primaryColour);
    }

    span.imgsize {
        display: none;
    }

    .loginContainer {
        margin: 60px auto;
        max-width: 60%;
    }

    .content-area .row {
        justify-content: space-evenly !important;
    }

    .cell > .table .row > .cell:first-of-type {
        margin-left: -20px !important;
    }

    .userGreeting {
        display: none;
    }

    .mobile-logo {
        display: flex;
    }

    .mobile-logo > img {
        height: 40px;
    }
    .desktop-sidebar-footer {
        display: none;
    }
    .content-wrapper {
        z-index: 10;
        transition: all 0.3s;
    }
    .mobilePage.open .content-wrapper {
        border-radius: 30px;
        border: solid 2px var(--primaryColour);
        box-shadow: var(--primaryColour) 0px 0px 16px -3px;
        transform: scale(0.65) translateX(70vw) translateY(-28vw);
        transition: all 0.3s;
        cursor: pointer;
    }
    .pits {
        min-width: 0px;
        font-size: 20px;
        display: flex;
        text-align: center;
        justify-content: center;
        margin-left: 0px;
        margin-right: 0px;
    }
    .header {
        height: 50px;
        position: fixed;
        width: 100%;
        box-shadow: var(--primaryColour) 0px 0px 16px 0px;
        margin-left: 0;
        padding-left: 0;
        padding-right: 0;
        background-color: var(--primaryColour);
    }
    .header-left {
        display: flex;
        flex: initial;
        align-items: center;
        white-space: initial;
        margin: 0px;
        min-width:200px;
    }
    .header-right-outer {
        display: flex;
        align-items: center;
        flex: initial;
    }
    .header-right {
        width: auto;
    }
    .header-bubble {
        background-color: var(--primaryColour);
    }
    .sidebar .navigation {
        max-width: calc(100vw / 2.3);
    }
    .sidebar-header {
        /*display: flex;*/
        display:none;
    }
    .sidebar {
        top: 0px;
        height: 100%;
        z-index: 1 !important;
    }
    .sidebar-button {
        display: flex;
        align-items: center;
        margin: 0px 10px;
        min-width: 50px;
        height: 50px;
        border-radius: 30px;
        background-color: var(--primaryColour);
        cursor: pointer;
        z-index: 1;
    }

    .sidebar-button > i {
        color: var(--tertiaryColour);
    }

    .sidebar-footer {
        display: flex;
    }
    .menu-outer {
        display: block;
        position: relative;
        width: 110vw;
        max-height: 74vh;
        position: fixed;
        overflow-y: scroll;
        -webkit-overflow-scrolling: touch;
        top: 3vh;
        -ms-overflow-style: none;
    }
    .menu-outer::-webkit-scrollbar {
        display: none;
    }
    .menu-buffer {
        /*height: 60px;
        background-color: #4954a5;*/
        display: none;
    }
    .menu-title {
        display: block;
        font-size: 26px;
        margin: auto 10px 10px;
        padding: 10px;
        width: 40vw;
        border-style: solid;
        border-width: 0px 0px 1px 0px;
        color: var(--contentColour);
        border-color: var(--contentColour);
    }
    .navigation {
        display: block;
    }
    .content-area {
        width: calc(100% - 40px);
        padding-bottom: 55px;
        left: 0px;
        z-index: 1;
        margin-left: 0 !important;
    }
    .content-shadow {
        display: block;
        background-color: var(--primaryColour);
        filter: brightness(1.30);
        position: fixed;
        top: 28vh;
        left: calc(60vw - 200px);
        height: 65vh;
        width: 50vh;
        border-radius: 20px;
        z-index: 2;
        transition: all 0.4s;
    }
    .mobilePage.open .content-shadow {
        transform: translateX(200px) translateY(-33vw);
    }
    .modal-content {
        border:2px solid var(--primaryColour) !important;
        box-shadow:none !important;
        -webkit-box-shadow:none !important;
    } 
    .modal-dialog {
        width: 70% !important;
        margin: auto !important;
    }
    .buttons-outer {
        margin: 20px;
        justify-content: center;
    }
    .buttons-outer-login {
        display: none;
        align-items: center;
        margin: 0px;
    }
    .apply {
        background-color: var(--primaryColour);
        color: var(--secondaryColour);
    }
    .login {
        color: var(--primaryColour);
    }
    .apply:hover {
        color: var(--primaryColour);
    }
    .cancel {
        display: block;
        border: 2px solid #cc4646;
        border-radius: 8px;
        background: none;
        background-color: var(--primaryColour);
        color: var(--secondaryColour);
    }
    .cancel:hover {
        border: 2px solid #cc4646;
        border-radius: 8px;
        background: none;
        color: #cc4646 !important;
        font-weight: bold;
    }
    .apply-modal {
        display: block;
        color: var(--primaryColour);
    }

    .mobileSiteName {
        display: block !important;
    }

    .clock {
        display: block;
        position: relative;
        bottom: 0px;
        height: 60px;
        width: 60px;
        border-radius: 100%;
        background-color: var(--backgroundColour);
        text-align: center;
        margin: auto;
        cursor: pointer;
        z-index: 5;
    }

    .clock > i {
        color: var(--primaryColour);
    }

    .clock-backer {
        display: block;
        position: relative;
        bottom: 68px;
        height: 76px;
        width: 76px;
        border-radius: 100%;
        background-color: var(--backgroundColour);
        margin: auto;
        cursor: pointer;
        z-index: 4;
        box-shadow: 0px 0px 10px -3px black;
    }
    .clock-buffer {
        display: block;
        position: relative;
        bottom: 115px;
        background-color: var(--backgroundColour);
        width: 100vw;
        height: 10px;
        z-index: 1;
        box-shadow: 0px 0px 14px -2px black;
    }
    .clock-footer {
        display: block;
        position: relative;
        bottom: 115px;
        background-color: var(--primaryColour);
        width: 100vw;
        height: 70px;
        z-index: 2;
    }
    .clock-outer {
        width: 100vw;
        height: 90px;
        display: block;
        position: fixed;
        bottom: 0px;
        z-index: 50;
        transition: all 0.3s;
    }
    .mobilePage.open .clock-outer {
        transition: all 0.3s;
    }
    .content-area .span-1,
    .content-area .span-2,
    .content-area .span-3,
    .content-area .span-4,
    .content-area .span-5,
    .content-area .span-6,
    .content-area .span-7,
    .content-area .span-8,
    .content-area .span-9,
    .content-area .span-10,
    .content-area .span-11,
    .content-area .span-12 {
        width: calc(100vw - 40px);
    }
    .cell > .table > .row > .cell {
        max-width: calc(100vw - 80px);
    }
    .sidebar nav ul li a {
        border-radius: 0px 15px 15px 0px;
    }

    .sidebar nav ul li a:hover {
        background-color: var(--primaryColour);
        filter: brightness(1.30);
    }
    /* CSS for when date picker is in modal */
    .header-right {
        display: none;
    }
    .from,
    .to {
        color: #525252 !important;
    }
    .modal-open .header-right {
        display: flex;
        position: fixed;
        margin-right: 0px;
    }
    .date-time {
        flex-direction: column;
    }
    .date-time-append {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
        width: 100%;
    }
    .input-group {
        margin-right: 0px;
        margin-bottom: 20px;
    }
    .input-group.date {
        margin-bottom: 15px;
    }
    .date-dropdown {
        color: black;
        background-color: red;
    }
    .from-date {
        margin-bottom: 15px;
    }

    .mobileBuffer {
        background-color: var(--backgroundColour);
        position: fixed;
        top: -100vh;
        min-width: 100%;
        min-height: 200vh;
        z-index: 9;
    }


    .gHostComponent {
        display:none;
        border-top: solid 2px transparent;
    }

    .elementGroup {
        transform: translateX(0px) !important;
    }
    .elementGroup > .gHostComponent {
        display:block;
    }

}