/* 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;
}

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

label.required::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%;
        margin: 0 auto;
    }

    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%;
        margin: 0 auto;
    }

    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;
    }
}