.right { float: right; }
.left { float: left; }
.center { text-align: center; }
.bold { font-weight: bold; }
/* ^ Needed as there's no comparable classes in the central stylesheet */

.richtext table { overflow-x: auto; border: 1px solid #eaeaea; border-top: 0;  } /* Needed as there's no styling yet for basic responsive tables */
.richtext table th, .richtext table td { min-width: 0; } /* Needed so we can have really narrow table columns */
.richtext table tr th { font-weight: 700; line-height: 1.125em; letter-spacing: 0; /*background-color: #333;  color: #fff; border-bottom: 1px solid #666;*/ } /* No styling for table stuff yet, hence the need for this */
.richtext table tr.alt { background-color: #fff; } /* Alternating row colours */
.richtext table { table-layout: auto; }
.richtext table.module-selection th, .richtext table.module-selection td { vertical-align: top; }

.richtext h3 { font-size: 22px; } /* Font size increase of 1px needed to prevent the dot on the i disappearing due to font differences (might not need this on live) */
.richtext .muted-red li { color: #db4433; } /* For validation groups, so that li children are also red */

.richtext .vertical-table th { font-weight: 500; }

.select-module .button { color: #000; min-width: 7.5em; } /* Not entirely sure why I needed to do this, but I did. It was showing in red or purple on some buttons */

.richtext .module-row table tr th { font-weight: 400; text-align: right; } /* No styling for table stuff yet, hence the need for this */
.module-row { display: flex; margin-top: 4em; }
.module-row div { width: 40%; margin-right: 2em; }
.module-row div:last-child { margin-right: 0; }
.module-row .heading { width: 20%; text-align: right; }
/* ^ For module comparison page (two column layout). Almost certain I should be using the grid layout stuff, so this will likely be replaced at some point */

input[type="text"], button, select { font-family: "Archivo", sans-serif; font-optical-sizing: auto; font-weight: 400; font-style: normal; font-variation-settings: "wdth" 100; } /* For some reason buttons don't show fonts locally, so that's what this is for */

.form .input-error-message li { color: #db4433; font-size: .75rem; font-weight: 500; } /* By default, list items within div.input-error-message aren't shown as red */
.disabled a:link,
.disabled a:visited,
.disabled a:hover,
.disabled a:active,
button.disabled,
button.button.disabled:hover,
input[disabled="disabled"].form__button-submit,
input[disabled="disabled"]:hover.form__button-submit
{
    color: #CCC;
    cursor: not-allowed;
    border-color: #CCC;
}

input [disabled="disabled"],
textarea[disabled="disabled"],
input[disabled="disabled"].form__button-submit
{
    background-color: #eaeaea;
}

.no-touchevents input[disabled="disabled"].button--secondary:not(input[disabled="disabled"].button--secondary--grey-hover):not(.is-disabled):hover 
{
    border-color: #adadad;
}

.red-button:hover { background-color: lightcoral; }
.green-button:hover { background-color: lightgreen; }

.red ul li { color: #cd202c; }

.form-field__input::placeholder { font-family: "Archivo", sans-serif; font-optical-sizing: auto; font-weight: 700; font-style: normal; font-variation-settings: "wdth" 100; } /* Will only be needed if Georgia can't fix the @blur @focus issue (input value not remembered on postback) */

/* Accessibility improvements START */

::placeholder,
.form-dropdown__label 
{
    color: #767676 !important;
    opacity: 1;
} 

@media (min-width: 64em) 
{
    .search-nav--offset .search-nav__heading--copy 
    {
        font-size: 1.5rem;
    }
}
/* Accessibility improvements END */

/* Radio button styling START (for WebForms) */

.radio { margin: 0.5rem; margin-left: 0; padding-top: 0.5em; padding-bottom: 1em; margin-top: 0.25em; }

.radio td { padding-bottom:0.5em; }

.radio input[type=radio] { position: absolute; opacity: 0; }

.radio input[type=radio] + label { margin-right: 2em; }

.radio input[type=radio] + label:before 
{
    content: "";
    background: white;
    border-radius: 100%;
    border: 3px solid #adadad;
    display: inline-block;
    width: 0.75em;
    height: 0.75em;
    position: relative;
    margin-right: 0.75em;
    vertical-align: top;
    cursor: pointer;
    text-align: center;
    transition: all 250ms ease;
}

.radio input[type=radio]:checked + label:before 
{
    background-color: #cd202c;
    border-color: #cd202c;
    box-shadow: inset 0 0 0 0.225em white;
}

.radio input[type=radio]:focus + label:before 
{
    outline: none;
    border-color: #cd202c;
}

.radio input[type=radio]:disabled + label:before 
{
    box-shadow: inset 0 0 0 0.225em white;
    border-color: #CCC;
    background: #CCC;
    cursor: not-allowed;
}

.radio input[type=radio] + label:empty:before 
{
    margin-right: 0;
}

/* Radio button styling END */

/* Temporary hacks until WEDM update app.css START */
body { font-family: archivo; } 

h1, h2, h3, h4, h5,
.richtext h1, 
.richtext h2, 
.richtext h3, 
.richtext h4, 
.richtext h5,
.student .richtext h2,
.page-subtitle,
.search-nav__heading, 
.richtext h2, 
.section-header { font-weight: 900; }

/* Temporary hacks until WEDM update app.css END */