@media only screen and (max-width: 1199px) {
    .dashStatCircle {
        font-size: 2.5em;
    }

    .dashStatText {
        font-size: 17px;
    }

    .tl-tip-text.ttCode {
        bottom: 1045px;
    }
}


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

    .exam-grid-card {
        width: 48%;
    }

    #ebmFooter {
        flex-direction: column;
        text-align: center;
    }

        #ebmFooter .footerLinks {
            align-items: center;
        }

            #ebmFooter .footerLinks div {
                flex-wrap: wrap;
                justify-content: center;
                padding-top: 5px;
            }

    .login.align-ends {
        flex-direction: column;
    }

        .login.align-ends a {
            padding-top: 10px;
        }

    #header.header {
        flex-direction: column;
    }

        #header.header button {
            margin-top: 0
        }

    .header .user {
        align-self: flex-end;
    }

    .above-centres-table {
        align-items: flex-end;
    }

    .tl-tip-text.ttCode {
        bottom: 1080px;
    }

    .page-controls {
        align-items: flex-end;
    }

    .table-controls {
        width: 100%;
        flex-direction: column-reverse;
        align-items: flex-start;
    }

    .exam-controls {
        align-items: center;
        padding-left: 0;
        padding-bottom: 10px;
    }

        .exam-controls div:first-child {
            padding: 0 10px 0 0;
        }

    .date-selector {
        flex-direction: column;
        align-items: flex-start;
    }

    .time-selector {
        padding-top: 5px;
    }

    .modalpopup-message {
        width: 70%;
    }

    .Ema-modal .modalpopup-message {
        width: 85%;
    }

    .dashStatCircle {
        font-size: 3.5em;
    }

    .dashStatText {
        font-size: 19px;
    }
}

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

    .exam-grid-card {
        width: 100%;
    }

        .exam-grid-card .btn {
            width: 40%;
        }

    .right-align input[type="submit"],
    .right-align .tl-tip {
        min-width: unset;
        width: 50%;
    }

        .right-align .tl-tip input[type="submit"] {
            width: 100%;
        }

    .right-align input:first-child {
        margin-left: 0;
    }

    .login.align-ends {
        flex-direction: row;
    }

        .login.align-ends a {
            padding-top: 0;
        }

    .btn.btn-md {
        min-width: unset;
        width: 100%;
    }

    .reg-card {
        margin-top: 15px;
    }

    #header .taalBranding {
        flex-direction: column;
    }

    .header .headerimage {
        width: unset;
    }

    .error-panel {
        padding: 0 15px;
    }

    .icc {
        flex-direction: column;
    }

        .icc input[type="text"] {
            margin-left: 0;
            margin-right: 0;
        }

        .icc input[type="submit"] {
            margin-top: 10px;
        }

    .dashStatCircle {
        font-size: 2.5em;
    }

    .dashStatText {
        font-size: 17px;
    }

    .above-centres-table {
        flex-direction: column-reverse;
    }

        .above-centres-table > a {
            align-self: flex-end;
            margin-bottom: 10px;
        }
}

@media only screen and (max-width: 600px) {
    body {
        padding-left: 2px;
        padding-right: 2px;
    }

    .breadcrumb {
        padding: 2px;
    }

    #header.loginHeader {
        padding: 0 5px;
    }

        #header.loginHeader .headerimage {
            margin-left: 0;
        }

        #header.loginHeader .tagLine {
            padding-left: 15px;
        }

    #logincontent {
        width: 100%;
        padding: 5px;
    }

    .loginPanel label {
        text-align: left;
        margin: 0;
        width: 100%;
        height: 100%;
    }

    #menuadmin {
        margin-top: 2px;
        width: 100%;
    }

    #mainwrapper {
        padding: 5px;
    }

    #maincontent {
        padding: 5px;
    }

        #maincontent .form {
            margin-left: 0;
        }

    #contentlinks {
        text-align: center;
        width: 100%;
    }

        #contentlinks a {
            margin-left: 3px;
            padding: 3px 10px;
            margin-bottom: 3px;
        }

        #contentlinks .addicon {
            display: none;
        }

    .input-form {
        width: 100%;
    }

        .input-form label {
            text-align: left;
            width: auto;
        }


    table.gridview tr.table-header th {
        padding: 4px;
        font-size: 12px;
        font-weight: normal;
        text-align: center;
    }

    table.gridview tr.table-row td, table.gridview tr.table-alternating td {
        padding: 4px;
        font-size: 12px;
    }

    .modalPopup {
        width: 300px;
    }

        .modalPopup .mobile-modal-hidden {
            display: none;
        }

    .table-controls {
        align-items: flex-start;
    }

    .CentreFont input[type="checkbox"] {
        margin: 0;
    }

    .centre-reg-modal .buttons{
        display: flex;
        flex-direction: column;
        align-items: center;
    }

        .centre-reg-modal .buttons input:first-child{
            margin-bottom: 10px;
        }

}

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

    .top-card-header.with-button {
        flex-direction: column;
    }

        .top-card-header.with-button h5 {
            align-self: flex-start;
            padding-bottom: 5px;
        }

        .top-card-header.with-button input {
            align-self: flex-end;
        }

    .exam-rules-check {
        margin-top: 10px;
    }

    #divSettings .align-ends {
        flex-direction: column-reverse;
    }

        #divSettings .align-ends select,
        #divSettings .align-ends .btn {
            width: 100%;
        }

        #divSettings .align-ends .btn {
            margin-bottom: 10px;
        }

            #divSettings .align-ends .btn:first-child {
                margin-top: 0;
            }

    #divSettings .btn-doc {
        margin-right: 0;
        margin-bottom: 5px;
        width: 100%;
        min-width: unset;
    }

    .align-ends {
        flex-direction: column;
    }

        .align-ends .btn {
            width: 100%;
            margin-top: 10px;
        }

            .align-ends .btn:first-child {
                margin-top: 0;
            }

        .align-ends.above-table {
            flex-direction: column-reverse;
        }

            .align-ends.above-table div,
            .align-ends.above-table a {
                width: 100%;
            }

            .align-ends.above-table select {
                margin-top: 10px;
                align-self: flex-start;
            }

    .exam-grid-card .btn {
        width: 100%;
    }

    .left-align,
    .right-align {
        flex-direction: column;
    }

        .left-align input[type="submit"],
        .left-align .btn,
        .right-align input[type="submit"],
        .right-align .btn,
        .right-align .tl-tip {
            width: 100%;
        }

        .left-align input[type="submit"],
        .left-align .btn,
        .right-align input[type="submit"],
        .right-align .btn,
        .right-align .tl-tip {
            margin: 10px 0 0;
        }

            .left-align input[type="submit"]:first-child,
            .left-align .btn:first-child,
            .right-align input[type="submit"]:first-child,
            .right-align .btn:first-child,
            .right-align .tl-tip:first-child {
                margin-top: 0;
            }

    table .left-align {
        flex-direction: row;
    }

        table .left-align input[type="submit"],
        table .left-align .btn {
            margin: 0 10px 0 0;
        }

    .inline-form-btn {
        margin-left: 0;
    }

    .login.align-ends {
        flex-direction: column;
    }

        .login.align-ends a {
            padding-top: 10px;
        }

    .btn-action,
    input[type="submit"].btn-action {
        width: 100%;
    }

    table .btn {
        width: 100%;
    }

    .above-centres-table a {
        width: 100%;
    }

    .exam-controls {
        align-items: center;
        flex-direction: column;
        width: 100%;
    }

        .exam-controls div:first-child {
            width: 100%;
            justify-content: center;
            padding: 0 0 10px 0;
        }

            .exam-controls div:first-child > a {
                width: unset;
            }

    .doc-upload {
        width: 100%;
    }

    table .dropdown-menu.dropdown-menu-right.show {
        width: 200px;
    }

    .cou-modal .modalpopup-message,
    .lan-modal .modalpopup-message,
    .LP-modal .modalpopup-message,
    .EA-modal .modalpopup-message,
    .Ema-modal .modalpopup-message,
    .add-permissions.modalpopup-message {
        left: 15px;
        width: 100%;
    }

    .cou-modal .modalpopup-message {
        height: 550px;
    }

    .lan-modal .modalpopup-message {
        height: 520px;
    }

    .LP-modal .modalpopup-message,
    .EA-modal .modalpopup-message {
        height: 305px;
    }

    .Ema-modal .modalpopup-message {
        height: 95%;
    }

    .add-permissions.modalpopup-message {
        height: 285px;
    }

    .dashStatCircle {
        font-size: 1.5em;
    }

    .dashStatText {
        font-size: 13px;
    }

    .icc input[type="submit"] {
        width: 100%;
    }

    .icc input[type="text"],
    .icc input[type="submit"] {
        min-width: unset;
    }

    .centre-reg-modal .buttons,
    .centre-reg-modal .buttons input {
        width: 100%;
    }
}