/*Width queries*/

@media (min-width: 1475px) and (min-height:701px) {
    .sidebar {
        left: 0px !important;
        width: 250px;
    }
}

@media (max-width: 1475px) {
    .headbar {
        width: 100%;
    }

    #mainContent {
        width: 100%;
    }

    .sidebar {
        overflow-y: scroll !important;
        left: -250px;
    }

    .navbar-toggle {
        padding: 0;
        margin: 0;
        display: block;
    }

    .navbar-collapse {
    }

    .coursestatus-box {
        height: 20px;
        width: 20px;
    }


    .navbar-header {
        float: none;
    }

    .navbar-toggle {
        display: block;
    }

    .navbar-collapse.collapse {
        display: none !important;
    }

    .navbar-nav {
        float: none !important;
        margin: 7.5px -15px;
    }

        .navbar-nav > li {
            float: none;
        }

            .navbar-nav > li > a {
                padding-top: 10px;
                padding-bottom: 10px;
            }

    .navbar-text {
        float: none;
        margin: 15px 0;
    }
    /* since 3.1.0 */
    .navbar-collapse.collapse.in {
        display: block !important;
        position: fixed;
    }

    .collapsing {
        overflow: hidden !important;
    }

    .sidebar {
        padding-top: 50px !important;
    }

    .form-group {
        margin-bottom: 10px;
    }

    .panel-body {
        padding: 10px;
    }

        .panel-body.login-cat .inner {
            flex-direction: column;
            text-align: center;
        }

            .panel-body.login-cat .inner a {
                margin-top: 5px;
            }

    .loginPanel {
        align-items: center;
    }


        .loginPanel .inner {
            align-items: center;
            width: 80%;
        }

        .loginPanel .form-group {
            width: 75%;
            flex-direction: column;
            align-items: flex-start;
        }

    .panel-body.login-form .form-group {
        margin-bottom: 0px;
    }

        .panel-body.login-form .form-group .control-label {
            margin-bottom: 5px;
        }

        .panel-body.login-form .form-group .RHS {
            width: 100%;
            padding-bottom: 10px;
        }

            .panel-body.login-form .form-group .RHS input {
                max-width: unset;
                width: 100%;
            }

    .panel-body.login-form .buttons {
        justify-content: center;
        width: 80%;
    }

        .panel-body.login-form .buttons .RHS {
            width: 100%;
        }

            .panel-body.login-form .buttons .RHS .inner {
                width: 100%;
                display: flex;
                justify-content: space-between;
            }

    .panel-body.login-form .text {
        padding-top: 10px;
        text-align: center;
    }
}

@media (max-width: 1165px) {    

    .learning-table .cell.last-visit,
    .learning-table .stageInner .cell.last-visit {
        display: none;
    }

    .learning-table .cell.status,
    .learning-table .cell.ev-status,
    .learning-table .cell.category {
        width: 20%;
    }


    .learning-table .stageInner .cell.name {
        width: 30%;
    }

    .learning-table .stageInner .cell.status,
    .learning-table .stageInner .cell.ev-status {
        width: 25%;
    }

    .learning-table .stageInner .cell.score {
        width: 10%;
    }
}

@media (max-width: 1024px) {

    .statusCell {
        min-width: 120px;
    }

    .sidebar {
        overflow-y: scroll !important;
        left: -250px;
    }

    .learningRow .col-md-4 {
        width: 35%;
        display: inline-block;
        padding: 1px;
    }

    .learningRow .col-md-2 {
        width: 20%;
        display: inline-block;
        padding: 1px;
    }

    .learningRow .col-md-1 {
        width: 20%;
        display: inline-block;
        padding: 1px;
    }

    .stageContainerInner .col-md-1 {
        display: inline-block;
    }

    .stageContainerInner .col-md-11 {
        width: 91%;
        display: inline-block;
    }

    .stageHorizontalBar {
        margin-left: -26px;
    }

    .dashboard-widget .profilePanel .buttons {
        flex-direction: column;
        align-items: center;
    }

    .dashboard-widget .profilePanel .buttons div:first-child {
        padding-bottom: 10px;
    }

        .dashboard-widget .profilePanel .buttons .profileButton a{
            min-width: 150px;
        }
}

@media (max-width: 990px) {

    #mainContent {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .loginContent.panel {
        flex-direction: column;
        width: 100%;
    }

        .loginContent.panel .welcome {
            width: 100%;
            padding-right: 0px;
            word-wrap: break-word;
        }

        .loginContent.panel > .login {
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

    .dashboard-widget .panel.panel-default,
    .panel.panel-default.resources,
    .panel.panel-default.wide,
    .footer {
        width: 100%;
    }

    .panel-body {
        padding: 10px;
    }

        .panel-body.login-cat .inner {
            flex-direction: row;
            text-align: center;
        }

            .panel-body.login-cat .inner a {
                margin-top: 0px;
            }

        .panel-body.login-form .form-group {
            flex-direction: row;
            align-items: center;
        }

            .panel-body.login-form .form-group .control-label {
                margin-bottom: 0px;
            }

        .panel-body.login-form .buttons .RHS {
            width: 75%;
        }

        .loginPanel {
            align-items: flex-end;
        }

    .loginPanel .inner {
        flex-direction: column;
        width: 100%;
    }

        .loginPanel .inner div.form-group:first-child {
            padding-right: 0px;
            padding-bottom: 10px;
        }


        .loginPanel .inner .form-group .RHS {
            padding-bottom: 0px;
            width: 70%;
        }

            .loginPanel .inner .form-group .RHS input,
            .loginPanel .buttons .RHS .inner {
                max-width: 400px;
            }

    .form-group {
        margin-bottom: 10px;
    }

        .form-group .control-label {
            padding-left: 0;
        }

    .btn {
        padding: 10px 30px;
    }

    .learning-table .cell.name {
        width: 30%;
    }

    .learning-table .cell.category {
        display: none;
    }

    .learning-table .cell.status,
    .learning-table .cell.ev-status {
        width: 22.5%;
    }

    .learning-table .cell.score {
        width: 10%;
    }

    .learning-table .cell.action {
        width: 15%;
    }

    .learning-table .cell.category {
        display: none;
    }

    .learning-table .stageInner .cell.name, 
    .learning-table .stageInner .cell.status,
    .learning-table .stageInner .cell.ev-status {
        width: 25%;
    }

    .learning-table .stageInner .cell.score {
        width: 10%;
    }

    .learning-table .stageInner .cell.action {
        width: 15%;
    }

    .dashboard-row {
        flex-direction: column;
    }

        .dashboard-row .dashboard-widget {
            width: 100%;
        }


    .dashboard-widget .profilePanel .buttons {
        flex-direction: row;
        align-items: flex-start;
    }

        .dashboard-widget .profilePanel .buttons div:first-child {
            padding-bottom: 0px;
        }


    .upProfile,
    fieldset.editProfile,
    fieldset.changePassword {
        width: 80%;
    }

    .userDetails .form-group .RHS {
        width: 70%;
    }

}

@media (max-width: 768px) {
    .login .panel.panel-default {
        width: 100%;
    }

    .panel-body.login-form .buttons {
        width: 100%;
        justify-content: flex-end;
    }

    .panel-body.login-form .buttons .RHS {
        width: 80%;
    }

        .panel-body.login-form .buttons .RHS .inner {
            flex-direction: row;
            width: 75%;
            max-width: 400px;
        }

    .panel-body.login-form .form-group .RHS {
        width: 80%;
    }

        .panel-body.login-form .form-group .RHS input {
            width: 75%;
            max-width: 400px;
        }

        .programmeContainer.RHS {
            width: 100%;
        }

    .learning-table .cell.name,
    .learning-table .stageInner .cell.name {
        width: 45%;
    }

    .learning-table .cell.status,
    .learning-table .stageInner .cell.status {
        width: 40%;
    }

    .learning-table .cell.score,
    .learning-table .cell.ev-status {
        display: none;
    }
    
    .footer {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
    }

        .footer .links {
            padding-bottom: 10px;
            text-align: center;
        }

        .footer .copyright {
            text-align: center;
        }

            .footer .copyright img {
                margin-bottom: 5px;
            }

            .footer .copyright .end {
                padding-bottom: 15px;
            }

    .upProfile,
    fieldset.editProfile,
    fieldset.changePassword {
        width: 100%;
    }

    .userDetails .form-group {
        flex-direction: column;
        align-items: flex-end;
    }

        .userDetails .form-group .control-label {
            padding-bottom: 5px;
            width: 75%;
        }

        .userDetails .form-group .RHS {
            width: 75%;
        }

    .userDetails .action {
        width: 100%;
    }
}

@media (max-width: 600px) {
    #mainContent > #tabs .row {
        font-size: 20px;
    }

    #mainContent > #tabs .tab-link {
        margin: 0 10px;
        padding-bottom: 0px;
    }

        #mainContent > #tabs .tab-link.active-tab {
            border-bottom-width: 2px;
        }

        .modal.workspace .modal-body .module {
            align-items: center;
        }

        .modal.workspace .modal-body .module .info {
            flex-direction: column;
            align-items: center;
        }

        .modal.workspace .modal-body .module .info img {
            padding-bottom: 10px;
        }

        .modal.workspace .modal-body .module .status {
            align-self: flex-end;
        }

    .dashboard-widget .profilePanel {
        flex-direction: column;
        align-items: center;
    }

        .dashboard-widget .profilePanel img {
            margin-right: 0px;
        }

        .dashboard-widget .profilePanel .info {
            flex-direction: column;
            align-items: center;
        }

            .dashboard-widget .profilePanel .info .profilename,
            .dashboard-widget .profilePanel .info .emailAddress {
                width: unset;
            }

    fieldset.editProfile .form-group,
    fieldset.changePassword .form-group {
        flex-direction: column;
        align-items: flex-start;
        width: 85%;
        margin-left: auto;
    }

        fieldset.editProfile .form-group .control-label,
        fieldset.changePassword .form-group .control-label {
            padding-bottom: 5px;
        }

        fieldset.editProfile .form-group .RHS,
        fieldset.changePassword .form-group .RHS {
            width: 100%;
        }

        fieldset.editProfile .form-group .useravatar {
            margin-top: 5px;
        }


    .dashCourse .info {
        flex-direction: column;
        align-items: center;
    }

    .userDetails .form-group .control-label,
    .userDetails .form-group .RHS {
        width: 85%;
    }

}

@media (max-width: 580px) {
    /* Mobile Workspace*/
    .guidancePanel .guidanceInner {
        width: 75% !important;
        margin-left: 0% !important;
        left: 12.5% !important;
    }

    .learningRow .col-md-4 {
        width: 28%;
        display: inline-block;
        padding: 1px;
    }

    .learningRow .col-md-2 {
        width: 25%;
        display: inline-block;
        padding: 1px;
    }

    .learningRow .col-md-1 {
        width: 25%;
        display: inline-block;
        padding: 1px;
    }

    .learning-table .cell.name,
    .learning-table .stageInner .cell.name {
        width: 75%;
    }

    .learning-table .cell.action,
    .learning-table .stageInner .cell.action {
        width: 25%;
    }

    .learning-table .cell.status,
    .learning-table .stageContainer .header {
        display: none;
    }

    .learning-table .stageContainer .stageHeaderInner.RHS,
    .learning-table .stageContainer .workpaceRow {
        border-top: 1px solid #ddd;
    }


    .programmeToggle,
    .stageToggle {
        width: 100%;
    }

        .programmeToggle .title,
        .stageToggle .title {
            font-size: 18px;
        }
}

@media (max-width: 500px) {
    .tdBasketOptions {
        min-width: 100px;
    }

    .navbar-toggle {
        padding: 0;
        margin-top: 0;
    }

    .headbar {
        left: 0;
        width: 100%;
    }

    .sidebar {
        overflow: hidden;
    }

    #mainContent {
        float: left;
        width: 100%;
    }

        #mainContent .panel.panel-default {
            width: 100%;
        }

    #pnlContent {
        padding: 15px;
    }

    .panel-body.login-cat .inner {
        flex-direction: column;
    }

        .panel-body.login-cat .inner div:first-child {
            padding-bottom: 10px;
        }

    .panel-body.login-cat .inner,
    .panel-body.login-form .inner,
    .panel-body.login-cat .inner .btn,
    .panel-body.login-form .inner .btn {
        width: 100%;
    }

    .panel-body.login-form .form-group {
        flex-direction: column;
        align-items: flex-start;
    }

        .panel-body.login-form .form-group .control-label {
            padding-bottom: 5px;
        }

        .panel-body.login-form .form-group .RHS {
            width: 100%;
        }

    .panel-body.login-form .buttons .RHS .inner {
        width: 100%;
    }

    .panel-body.login-form .form-group .RHS input {
        width: 100%;
    }

        .panel-body.login-form .buttons .RHS {
            width: 100%;
        }

        .panel-body.login-form .buttons .inner {
            width: 100%;
            flex-wrap: wrap-reverse;
        }

        .panel-body.login-form .buttons .inner input[type="submit"] {
            margin-bottom: 10px;
        }

    .pager.customPaging td span,
    .pager.customPaging td a {
        padding: 10px 15px;
    }

    .learning-table .learningRow,
    .learning-table .workpaceRow {
        flex-direction: column;
    }

        .learning-table .learningRow .cell.name,
        .learning-table .workpaceRow .cell.name {
            width: 100%;
            padding-bottom: 10px;
        }

        .learning-table .learningRow .cell.action,
        .learning-table .workpaceRow .cell.action,
        .learning-table .learningRow .cell.action a,
        .learning-table .workpaceRow .cell.action a {
            width: 100%;
            margin: 5px;
        }
        
    .modal.workspace .modal-footer .btn {
        width: 100%;
    }

    .modal.workspace .modal-body .evidence #btnUploadEvidence,
    .modal.workspace .modal-body .evidence #btnToggleFeedback {
        width: 100%;
    }

    .dashboard-widget .profilePanel {
        flex-direction: column;
        align-items: center;
    }

        .dashboard-widget .profilePanel .info {
            flex-direction: column;
            align-items: center;
        }

            .dashboard-widget .profilePanel .info .profilename {
                width: auto;
            }

            .dashboard-widget .profilePanel .info .emailAddress {
                width: auto;
            }

            .dashboard-widget .profilePanel .info .buttons .profileButton,
            .dashboard-widget .profilePanel .info .buttons .profileButton a{
                width: 100%;
            }

        .dashboard-widget .profilePanel .buttons {
            flex-direction: column;
            align-items: center;
        }

            .dashboard-widget .profilePanel .buttons div:first-child {
                padding-bottom: 10px;
            }

            .dashboard-widget .profilePanel .buttons .profileButton a {
                min-width: 175px;
            }

    .editProfile input[type=submit],
    .changePassword input[type=submit] {
        width: 100%;
    }

    fieldset.editProfile .form-group,
    fieldset.changePassword .form-group {
        width: 100%;
    }

        fieldset.editProfile .form-group .form-control,
        fieldset.changePassword .form-group .form-control {
            min-width: 100%;
        }

        fieldset.editProfile .form-group .RHS .avImage {
            width: 100%;
        }

    input, select, textarea {
        max-width: unset;
        width: 100%;
    }

    .modal-content.dash .modal-footer button {
        width: 100%;
    }

    .modal-body.forgotPass {
        text-align: center;
    }

    .modal-body.forgotPass .actions {
        flex-direction: column;
    }

        .modal-body.forgotPass .actions input[type="text"] {
            width: 100%;
            margin-bottom: 10px;
        }


    @media (max-height: 750px) {
        .navbar-nav > li > a {
            padding-top: 10px;
            padding-bottom: 10px;
        }

        .sidebar .logo img {
            max-height: 200px;
        }

        .dashboard-widget {
            height: auto;
        }

        .widget-panel {
            height: auto;
        }
    }

    .userDetails .form-group .control-label,
    .userDetails .form-group .RHS {
        width: 100%;
    }
}

@media (max-width: 355px) {
    #mainContent > #tabs .row {
        font-size: 15px;
    }

    #mainContent > #tabs .tab-link {
        margin: 0 5px;
    }
}

@media (max-width: 330px) {
    select {
        max-width: 260px;
    }
}

/*Height queries*/

/*@media (max-height: 700px) {
    .sidebar {
        left: -250px !important;
        width: 250px;
    }
}*/

/*@media (max-height: 700px) {
    .headbar {
        width: 100%;
    }

    #mainContent {
        width: 100%;
    }

    .navbar-toggle {
        padding: 0;
        margin: 0;
    }

    .navbar-collapse {
        margin-top: 50px !important;
    }

    .sidebar {
        overflow-y: scroll !important;
        left: -250px;
    }

    .navbar-collapse.collapse {
        overflow-y: scroll !important;
    }
}*/

@media (max-height: 580px) {
    .navbar-nav > li > a {
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .sidebar .logo img {
        max-height: 90px;
    }

    .sidebar {
        overflow-y: scroll !important;
        left: -250px;
    }
}

@media (max-height: 520px) {
    .navbar-nav > li > a {
        padding-top: 7px;
        padding-bottom: 7px;
    }

    .sidebar .logo img {
        max-height: 110px;
    }
}

@media (max-height: 490px) {
    .navbar-nav > li > a {
        padding-top: 7px;
        padding-bottom: 7px;
    }

    .sidebar .logo img {
        max-height: 100px;
    }

    .sidebar {
        overflow-y: scroll !important;
        left: -250px;
    }
}

@media (max-height: 450px) {
    .navbar-nav > li > a {
        padding-top: 5px;
        padding-bottom: 5px;
    }

    .sidebar .logo img {
        max-height: 100px;
    }

    .sidebar {
        overflow-y: scroll !important;
        left: -250px;
    }
}