/*

MRE QR Scoring Page
Custom CSS Definitions

*/


@font-face {
    font-family: 'Ubuntu';
    src: url('../webfonts/Ubuntu-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Ubuntu';
    src: url('../webfonts/Ubuntu-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Ubuntu';
    src: url('../webfonts/Ubuntu-Italic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
}

@font-face {
    font-family: 'Ubuntu';
    src: url('../webfonts/Ubuntu-BoldItalic.ttf') format('truetype');
    font-weight: bold;
    font-style: italic;
}

body {
    font-family: "Ubuntu", sans-serif;
    --default-text-color: #fff;
    --primary-dark-color: rgba(0,0,0,0.8);

    color: var(--default-text-color);
    background-color: var(--primary-dark-color);
    display: flex;
    min-height: 100vh;
    flex-direction: column;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

main {
    flex: 1 0 auto;
}

footer {
    position: fixed;
    bottom: 0;
    margin-bottom: 0;
    width: 100%;
    z-index: 1;
}

.pt5 {
    padding-top: 5px;
}

.pt10 {
    padding-top: 10px !important;
}

.pt20 {
    padding-top: 20px !important;
}

.pt30 {
    padding-top: 30px;
}

.plr10 {
    padding-right: 10px;
    padding-left: 10px;
}

.pl10 {
    padding-left: 10px;
}

.p15 {
    padding: 15px !important;
}

.pb0 {
    padding-bottom: 0 !important;
}

.pb10 {
    padding-bottom: 10px !important;
}

.pb20 {
    padding-bottom: 20px !important;
}

.ptb0 {
    padding-top: 0;
    padding-bottom: 0;
}

.ptb5 {
    padding-top: 5px;
    padding-bottom: 5px;
}

.pt0 {
    padding-top: 0 !important;
}

.mb0 {
    margin-bottom: 0 !important;
}

.mtb0 {
    margin: 0 0 !important;
}

.mt10 {
    margin-top: 10px !important;
}

.mt15 {
    margin-top: 15px !important;
}

.mt20 {
    margin-top: 20px !important;
}

.mt25 {
    margin-top: 25px !important;
}

.mb10 {
    margin-bottom: 10px !important;
 }

.bb0 {
    border-bottom: 0 !important;
}

.bt0 {
    border-top: 0 !important;
}

.lower-slider-text {
    position: relative;
    top: 15px;
}

.monospaced {
    font-family: monospace;
}

.text-large {
    font-size: larger;
}

.no-outline {
    outline: 0 !important;
    box-shadow: none !important;
}


/* Theme Colour overrides */

.card, .modal, .card-panel {
    color: var(--card-text-color);
}

.card .card-action a:not(.btn):not(.btn-large):not(.btn-small):not(.btn-large):not(.btn-floating),
.modal-footer a:not(.btn):not(.btn-large):not(.btn-small):not(.btn-large):not(.btn-floating) {
    color: var(--non-default-link-color) !important;
}

.collapsible-header {
    background-color: var(--primary-light-color);
    color: var(--default-text-color);
}

.modal, .modal-footer {
    background-color: var(--card-background-color) !important;
}

.btn:hover, .btn-small:hover, .btn-large:hover:not(.colorsample-btn) {
    background-color: var(--primary-color) !important;
    color: var(--link-color) !important;
}

table a {
    color: var(--card-text-color) !important;
}

nav, nav .brand-logo, nav a, .page-footer {
    color: var(--nav-text-color) !important;
}

input:not(.browser-default):focus:not([readonly]), textarea.materialize-textarea:focus:not([readonly]) {
    border-bottom: 1px solid var(--nav-text-color) !important;
    box-shadow: 0 1px 0 0 var(--nav-text-color) !important;
}

input:not(.browser-default):focus:not([readonly]) + label, textarea.materialize-textarea:focus:not([readonly]) + label {
    color: var(--nav-text-color) !important;
}

.input-field .prefix.active {
    color: var(--nav-text-color);
}

input, textarea {
    color: var(--nav-text-color) !important;
}

.btn, .btn-large, .btn-small, .btn-floating i {
    color: var(--link-color) !important;
}

.btn:focus, .btn-large:focus, .btn-small:focus, .btn-floating:focus {
    background: var(--primary-dark-color) !important;
}

.btn {
    background: var(--primary-dark-color) !important;
}

.input-field i, .newteam-header i {
    color: var(--nav-text-color);
}

.collapsible {
    border-top: 1px solid var(--menu-border-color);
    border-right: 1px solid var(--menu-border-color);
    border-left: 1px solid var(--menu-border-color);
}

.collapsible-header, .collapsible-body, .collapsible.popout {
    border-bottom-color: var(--menu-border-color);
 }

.noUi-connect {
    background: var(--secondary-color) !important;
}

.noUi-connects {
    background: var(--menu-border-color) !important;
}

table.highlight > tbody > tr:hover, table.striped > tbody > tr:nth-child(2n+1) {
    background-color: var(--table-stripe-color) !important;
}

.btn:disabled, .btn[disabled] {
    background-color: var(--btn-disabled-color) !important;
    color: var(--btn-disabled-text-color) !important;
}

/* QR Score Page*/

.bold {
    font-weight: bold;
}

.award {
    color: darkred;
    position: absolute;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 13px;
}

.trophy {
    color: darkgoldenrod;
    position: absolute;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 5px;
}

.font-lrg {
    font-size: 2em;
}

.card-content {
    background-color: var(--primary-color) !important;
    color: var(--nav-text-color) !important;
    padding-top: 20px !important;
    padding-bottom: 10px !important;
    border-radius: 2px 2px 0 0 !important;
}

.nowrap {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

nav {
    height: 64px;
}

.brand-logo {
    width: calc(100% - 54px);
}

.brand-logo img {
    width: 200px;
    height: 200px;
    transition: width 0.25s, height 0.25s;
}

.nav-fix .brand-logo img {
    width: 64px;
    height: 64px;
}

.hide-bg {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    transition: background-color 0.25s;

}

.op_text_lrg {
    display: block;
    position: relative;
    top: -30px;
}

.nav-flex {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 64px;
}

.nav-flex-logo {
    flex: 0 0 64px;
    height: 100%
}

.nav-flex-text {
    flex: 1 1 auto;
    max-width: calc(100% - 64px);
    padding-left: 5px;
}

.dropdown-trigger {
    position: relative;
    z-index: 1;
}

nav .brand-logo.left {
    left: 0;
}

.hdr-flex {
    display: flex !important;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
}

.hdr-text {
    flex: 1 1 auto;
}

.hdr-icon {
    flex: 0 0 auto;
}

.signup {
    background-color: var(--secondary-color) !important;
    color: var(--nav-text-color) !important;
    padding-top: 20px !important;
    padding-bottom: 20px !important;
    border-radius: 2px 2px 2px 2px !important;
}

.input-field > label {
    color: var(--secondary-hover-color) !important;
}

input:not([type]), input[type="text"]:not(.browser-default), input[type="password"]:not(.browser-default), input[type="email"]:not(.browser-default), input[type="url"]:not(.browser-default), input[type="time"]:not(.browser-default), input[type="date"]:not(.browser-default), input[type="datetime"]:not(.browser-default), input[type="datetime-local"]:not(.browser-default), input[type="tel"]:not(.browser-default), input[type="number"]:not(.browser-default), input[type="search"]:not(.browser-default), textarea.materialize-textarea {
    border-bottom: 1px solid var(--secondary-hover-color) !important;
}

input.valid:not([type]), input.valid:not([type]):focus, input.valid[type="text"]:not(.browser-default), input.valid[type="text"]:not(.browser-default):focus, input.valid[type="password"]:not(.browser-default), input.valid[type="password"]:not(.browser-default):focus, input.valid[type="email"]:not(.browser-default), input.valid[type="email"]:not(.browser-default):focus, input.valid[type="url"]:not(.browser-default), input.valid[type="url"]:not(.browser-default):focus, input.valid[type="time"]:not(.browser-default), input.valid[type="time"]:not(.browser-default):focus, input.valid[type="date"]:not(.browser-default), input.valid[type="date"]:not(.browser-default):focus, input.valid[type="datetime"]:not(.browser-default), input.valid[type="datetime"]:not(.browser-default):focus, input.valid[type="datetime-local"]:not(.browser-default), input.valid[type="datetime-local"]:not(.browser-default):focus, input.valid[type="tel"]:not(.browser-default), input.valid[type="tel"]:not(.browser-default):focus, input.valid[type="number"]:not(.browser-default), input.valid[type="number"]:not(.browser-default):focus, input.valid[type="search"]:not(.browser-default), input.valid[type="search"]:not(.browser-default):focus, textarea.materialize-textarea.valid, textarea.materialize-textarea.valid:focus, .select-wrapper.valid > input.select-dropdown {
    box-shadow: none;
}

input.invalid:not([type]), input.invalid:not([type]):focus, input.invalid[type="text"]:not(.browser-default), input.invalid[type="text"]:not(.browser-default):focus, input.invalid[type="password"]:not(.browser-default), input.invalid[type="password"]:not(.browser-default):focus, input.invalid[type="email"]:not(.browser-default), input.invalid[type="email"]:not(.browser-default):focus, input.invalid[type="url"]:not(.browser-default), input.invalid[type="url"]:not(.browser-default):focus, input.invalid[type="time"]:not(.browser-default), input.invalid[type="time"]:not(.browser-default):focus, input.invalid[type="date"]:not(.browser-default), input.invalid[type="date"]:not(.browser-default):focus, input.invalid[type="datetime"]:not(.browser-default), input.invalid[type="datetime"]:not(.browser-default):focus, input.invalid[type="datetime-local"]:not(.browser-default), input.invalid[type="datetime-local"]:not(.browser-default):focus, input.invalid[type="tel"]:not(.browser-default), input.invalid[type="tel"]:not(.browser-default):focus, input.invalid[type="number"]:not(.browser-default), input.invalid[type="number"]:not(.browser-default):focus, input.invalid[type="search"]:not(.browser-default), input.invalid[type="search"]:not(.browser-default):focus, textarea.materialize-textarea.invalid, textarea.materialize-textarea.invalid:focus, .select-wrapper.invalid > input.select-dropdown, .select-wrapper.invalid > input.select-dropdown:focus {
    box-shadow: none;
}