/* Media queries at the bottom of this file */

body {
    background: #f3f3f3;
    font-size: .90em;
    margin: 0;
    padding: 0;
    color: #2F2F2F;
    height: 100%;
}

    h1, h2, h3, h4, h5, h6 {
        color: #D6000D;
        text-transform: none;
        font-weight: 200;
        margin-bottom: 0;
    }

    h1 {
        font-size: 1.6em;
        padding-bottom: 0;
        margin-bottom: 15px;
        font-weight: 600;
    }

    h2 {
        font-size: 1.4em;
        font-weight: 600;
        padding-bottom: 0;
    }

    h3 {
        font-size: 1.2em;
        font-weight: 600;
        padding: 2px 0;
        margin-top: 10px;
    }

    h4 {
        font-size: 1em;
        font-weight: 600;
        margin-top: 10px;
    }

    h5, h6 {
        font-size: 1em;
    }

    h2 a {
        font-weight: normal;
        font-size: 0.90em;
    }

    .highlight {
        color: #D6000D;
        font-weight: bold;
    }

    .clear {
        clear: both;
    }

.wide-content {
    width: 100%;
}

    .header {
        background-color: #D6000D;
    }

.header .navbar-brand {
    padding: 10px 0;
}

    .header h1 {
        font-size: 1.2em;
        font-weight: 700;
        color: #f9f9f9;
        float: left;

    }

            .header .login {
        font-size: 0.9em;
        padding: 10px;
        color: White;

    }

    .header .login a {
        color: White;
    }


    .breadcrumb {
        background-color: #8F0E20;
        margin: 0;
        padding: 4px 20px;
        color: #FFFFFF;
    }

        .breadcrumb a {
            color: #FFFFFF;
        }

        .breadcrumb span {
            padding: 0;
        }

        .breadcrumb a:hover {
            color: #FFFFFF;
            text-decoration: underline;
        }

.content {
    background-color: white;
    padding: 20px;
    min-height: 100%;
}


.footer {
    background: #D8D8D8;
    padding: 10px;
}



p {
    margin: 10px 0 10px 0;
}


.listintro {
    margin-bottom: 0;
   }

.logo {
    width: 60%;
    height: auto;
}

.form-group.required .control-label:after {
    content: "*";
    color: red;
    padding-left:2px;
}

.radioSpacing [type="radio"] {
   margin-left:20px;
   margin-right:4px;
}

.padLeft{
    padding-left:10px;
}

.thead-QUB {
    background-color: #D6000D;
    color:#FFF;
}

.thead-light-QUB th {
    color: #D6000D;
    background-color: #e9ecef;
    border-color: #dee2e6;
}

.QUB-red {
    color: #D6000D;
}

.col-form-label{
    font-weight:bold;
}


/* Extra small devices (portrait phones, less than 576px)
    No media query for `xs` since this is the default in Bootstrap */

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {

    .wide-content {
        width: 100%;
    }

    h1 {
        font-size: 1.6em;
        /* testing  color: yellow; */
    }

    .header h1 {
        font-size: 1.4em;
        padding-top: 10px;
    }

    .header .logo {
        width: 100%;
    }

    .header .login {
        font-size: 1em;
    }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {

    .wide-content {
        width: 100%;
    }

    h1 {
        font-size: 1.4em;
        /* testing  color: aqua;    */
    }

    .header .logo {
        width: 100%;
    }

    .header h1 {
        font-size: 1.3em;
    }

    .header .login {
        font-size: 1em;
    }

}

/* Large devices (desktops, 992px and up) */
        @media (min-width: 992px) {

            .wide-content {
                width: 90%;
                margin: 0 auto;
            }

            h1 {
                font-size: 1.6em;
                /* testing color: forestgreen;  */
            }

            .header .logo {
                width: 100%;
            }

            .header h1 {
                padding-left: 60px;
                font-size: 1.6em;
            }

            .header .login {
                font-size: 1em;
            }
        }
        /* Extra large devices (large desktops, 1200px and up) */
                @media (min-width: 1200px) {

                    .wide-content {
                        width: 80%;
                        margin: 0 auto;
                    }

                    h1 {
                        font-size: 1.8em;
                        /* testing  
                        color: deeppink; */
                    }

                    .header h1 {
                        font-size: 1.6em;
                        padding-left: 60px;
                    }

                    .header .logo {
                        width: 100%;
                    }

                    .header .login {
                        font-size: 1em;
                    }
                }