@import url('https://fonts.googleapis.com/css?family=Raleway|&display=swap');

/* --- // Main Styling and Layout */
/* Reset values */
* {
    margin: 0;
    padding: 0;
    border: 0;
    box-sizing: border-box;
}

/* Use Raleway font throughout the site, and provide room for the scrolling under the fixed nav-bar and footer */
html,
body {
    font-family: 'Raleway', sans-serif;
    scroll-behavior: smooth;
    padding-bottom: 3rem;
}

/* Google Design recommended link colour (good contrast) */
a {
    color: #3367d6;
}

/* Messages */
ul.messages {
    margin: 10px 100px;
    padding: 0;
    list-style-type:
        none;
}

ul.messages li.success,
ul.messages li.warning,
ul.messages li.error,
ul.messages li.info {
    margin: 0;
    padding: 14px 20px;
    list-style: none;
    color: #fff;
}

ul.messages li.success {
    background: #81ce81;
}

ul.messages li.success a {
    color: #0ac33e;
}

ul.messages li.error {
    background: #a30029;
    color: #e9828e;
}

ul.messages li.error a {
    color: #e9828e;
}

ul.messages li.info {
    background: #faffae;
    color: #696b4e;
}

ul.messages li.info a {
    color: #1586de;
}

ul.messages li.warning {
    background: #de9404;
}

ul.messages li.warning a {
    color: #f49000;
}

ul.messages li a.close {
    margin: 0;
    float: right;
    opacity: 1;
    border: 0;
    box-shadow: none;
    text-shadow: none;
}

ul.errorlist {
    float: left;
    color: #ff0000;
    clear: both;
    font-size: 13px;
    margin: 0;
    padding: 0;
}

/* --- // Navigation Bar, Hamburger-bar, and Fixed Footer Styling and Layout */
/* Navigation Bar: fixed and MaterializeCSS styling. */
nav {
    position: fixed;
    top: 0;
    z-index: 10;
}

nav>div>a {
    margin-top: 3px;
}

.sidenav {
    width: 280px;
}

.section {
    padding-top: 4vw;
    padding-bottom: 4vw;
}

.tabs .indicator {
    background-color: black;
}

.tabs .tab a:focus,
.tabs .tab a:focus.active {
    background: transparent;
}

.page-footer {
    padding-top: 0.7rem;
}

/* Footer: fixed and MaterializeCSS styling. */
footer {
    position: fixed;
    width: 100%;
    bottom: 0;
    z-index: 10;
}

/* --- // Taken from 'materialize.css' (1.0.0) to style the input fields to match the UX Design */
input:not([type]):focus:not([readonly]),
input[type=text]:not(.browser-default):focus:not([readonly]),
input[type=password]:not(.browser-default):focus:not([readonly]),
input[type=email]:not(.browser-default):focus:not([readonly]),
input[type=url]:not(.browser-default):focus:not([readonly]),
input[type=time]:not(.browser-default):focus:not([readonly]),
input[type=date]:not(.browser-default):focus:not([readonly]),
input[type=datetime]:not(.browser-default):focus:not([readonly]),
input[type=datetime-local]:not(.browser-default):focus:not([readonly]),
input[type=tel]:not(.browser-default):focus:not([readonly]),
input[type=number]:not(.browser-default):focus:not([readonly]),
input[type=search]:not(.browser-default):focus:not([readonly]),
textarea.materialize-textarea:focus:not([readonly]) {
    border-bottom: 1px solid black;
    -webkit-box-shadow: 0 1px 0 0 black;
    box-shadow: 0 1px 0 0 black;
}

/* MaterializeCSS 1.0.0 overrides to provide a consistent look-and-feel.
Adjusting the max-height and height to ensure the spacing of the cards
is consistent as is the information in them. */
.card.small .card-image+.card-content,
.card.medium .card-image+.card-content,
.card.large .card-image+.card-content {
    max-height: 60%;
    overflow: visible;
    width: 100%;
}

.card.large {
    height: 600px;
}

.card-content {
    position: absolute;
    bottom: 0;
}

/* All Submit / Update Buttons */
a.button,
button:focus,
.update_button,
input[type="submit"] {
    color: #fff;
    background: black;
    border-radius: 4px;
    padding: 10px 20px;
    font-size: 14px;
    border: 0;
}

/* Table Styling for Orders */
table {
    width: 100%;
    border-spacing: 0;
    border-collapse: collapse;
}

table th,
table td {
    text-align: left;
    font-size: 14px;
    margin: 0;
}

tbody tr:nth-child(odd) {
    background: #efefef;
}

tbody tr.subtotal {
    background: #ccc;
}

thead th,
tbody tr.total {
    background: orange;
    color: black;
    font-weight: bold;
}

table.cart {
    margin-bottom: 40px;
}

table.cart img {
    width: 180px;
}

tbody td.num {
    text-align: right;
}

td input[type="submit"] {
    font-size: 12px;
    padding: 4px 10px;
}

.product-list .item {
    width: 25%;
    padding: 10px 20px 10px 0;
    float: left;
    text-align: center;
    line-height: 1.2;
}

.product-list .item img {
    width: 100%;
    margin-bottom: 8px;
}

.product-detail .price {
    color: #333;
    font-size: 28px;
    font-weight: bold;
}

.product-detail img {
    width: 95%;
    float: left;
    padding: 0 20px 20px 0;
}

.order-form {
    float: left;
    padding-bottom: 3rem;
}

.order-info {
    float: right;
    background: #efefef;
    padding: 10px 20px;
    color: #333;
    border-bottom: 4px solid orange;
}

.order-info h3 {
    color: black;
}

.order-info ul li {
    margin: 0;
    padding: 0;
    font-size: 14px;
}

.order-info p {
    font-weight: bold;
    float: right;
}

.order-info span {
    float: right;
}

.neg {
    color: #dc1616;
}

/* Braintree (Payment Service) Form Fields */
form div.field {
    font-size: 13px;
    color: #666;
    width: 300px;
    height: 30px;
    margin-bottom: 10px;
    padding: 6px 12px;
    border: 0;
    background: #efefef;
    color: #666;
    border-radius: 4px;
}


/* --- // Specific styling for individual and block elements to improve readability on all devices.
Improved viewing on desktops as the project design is mobile-first-oriented. */

/* Create breathing space between paragraph elements */
p.padding,
div>form+p,
div>form+p+p {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

/* Order cart padding-bottom to create space to the fixed footer */
#cart_buttons_bottom_padding {
    padding-bottom: 1rem;
}

/* Your order summary space between product and price */
li>span {
    padding-left: 0.5rem;
}

/* Course and Coaching Detail Form Block to allow for a better display on desktop screens */
.inline_form_block {
    display: inline-block;
}

/* Google LightHouse highlighted contrast issues with the form labels and the white background */
label {
    color: #333;
}

@media only screen and (min-width: 800px) {
    .product-detail img {
        width: 50%;
        float: left;
        padding: 0 20px 20px 0;
    }
}