* {
    box-sizing: border-box;
}
html {
    margin: 0;
    padding: 0;
    display: block;
    position: relative;
    height: 100%;
    width: 100%;
    font-family: 'Roboto', sans-serif;
    line-height: 1.5em;
    color: #444;
} 
body {
    margin: 0;
    padding: 0;
    display: block;
    position: relative;
    height: 100%;
    width: 100%;
    background-image: linear-gradient(to bottom, rgb(231, 231, 231), rgb(235, 235, 235));
    background-size: cover;
    background-position: center center;
    box-sizing: border-box;
}
div {
    position: relative;
    box-sizing: border-box;
}
hr {
    height: 1px;
    border-width: 0px;
    outline: none;
    background : linear-gradient(to right, rgba(0,0,0,.025),rgba(0,0,0,.1),rgba(0,0,0,.025));
    margin: .5em 0;
}
hr.light {
    height: 1px;
    border-width: 0px;
    outline: none;
    background : linear-gradient(to right, rgba(255,255,255,.025),rgba(255,255,255,.2),rgba(255,255,255,0.025));
    margin: .5em 0;
}
.shadowDown {
    box-shadow: 0 1px 1px 1px rgba(0,0,0,.025);
}
h1,h2,h3,h4,h5 {  
    color: rgb(70, 70, 70);
    margin: .5em 0;
}
a {
    display: inline-block;
    text-decoration: none;
    color: rgb(77, 77, 109);
}
a:hover {
    text-decoration: underline;
    color: rgb(34, 36, 49);
}
label, 
input[type='text'], 
input[type='password'] {
    display: block;
    position: relative;
    margin: 0 0 0 0;
}
label {
    color: #666;
    font-weight: bold;
    margin: 1em 0 0 0;
}
input[type='text'], input[type='password'], textarea {
    padding: .5em;
    border: 1px solid #D5D5D5;
    border-radius: .25em;
    margin: 0 0 .5em 0;  
    box-shadow: 0 0 .25em rgba(0,0,0,.1);
} 
input[type='checkbox'] {
    width: 1.25em;
    height: 1.25em;
}
select {
    padding: .5em;
}
button {
    position: relative;
    display: inline-block;
    border-width: 0px;
    outline-width: 0px;
    padding: 1em;
    background-image: linear-gradient(to bottom, rgb(29, 126, 0), rgb(20, 87, 0));
    border-radius: .25em;
    box-shadow: 0 0 .5em rgba(0,0,0,.20);
    color:white;
    font-weight: bold;
    cursor: pointer;
    margin: 0;
}
button:hover {
    background-image: linear-gradient(to bottom, rgb(40, 172, 0), rgb(27, 116, 0));
}
.sub {
    position: relative;
    display: inline-block;
    border-width: 0px;
    outline-width: 0px;
    padding: .75em;
    background-image: linear-gradient(to bottom, rgb(245, 245, 245), rgb(228, 228, 228));
    border-radius: .25em;
    border: 1px solid rgba(0,0,0,.15);
    color:#333;
    cursor: pointer;
    margin: 0;
}
.sub:hover {
    background-image: linear-gradient(to bottom, rgb(255, 255, 255), rgb(238, 238, 238));
}
.insert {
    padding: .5em 0;
    margin: 0;
    background-image: none;
    border-radius: 0%;
    box-shadow: none;
    color: gray;
    border-top: 1px dashed lightgrey;
    width:100%;
    background-color: transparent;
    text-align: left;
}
.cursor {
    cursor: pointer;
}
.notify {
    color: green;
    font-weight: bold;
}
.error {
    color: red;
    font-weight: bold;
}
.loading {
    display: block;
    position: relative;
    background-image: url("../images/icons/loading.gif");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    padding: 2em;
    height: 5em;
}
.small {
    font-size: 90%;
}
.smaller {
    font-size: 80%;
}
.big {
    font-size: 110%;
}
.bigger {
    font-size: 120%;
}
.odd {
    padding: .25em 0;
    border-top: 1px dashed rgba(0,0,0,.1);
}
.odd:nth-child(odd) {
    background-color: rgba(0,0,0,.025);
}
.tight {
    margin: 0;
    padding: 0;
}
.grey {
    color: grey;
}
.red {
    color: red;
}
.pointer {
    cursor:pointer;
}
.padding {
    padding: 1em;
}
.paddingLeft {
    padding-left: 1em;
}
.paddingRight {
    padding-right: 1em;
}
.paddingTop {
    padding-top: 1em;
}
.paddingBottom {
    padding-bottom: 1em;
}
.marginLeft {
    margin-left:1em;
}
.spaceBetween {
    display:flex;
    position: relative;
    justify-content: space-between;
    align-items: center;
}
.justifyLeft {
    display:flex;
    position:relative;
    justify-content:flex-start;
    align-items:top;
}
.justifyRight {
    display:flex;
    position:relative;
    flex-wrap:wrap;
    justify-content:flex-end;
    align-items:top;
}
.inline {
    display: inline-flex;
}
.column {
    display: flex;
    position: relative;
    justify-content: flex-start;
    flex-direction: column;
}
.wrap {
    flex-wrap: wrap;
}
.fullWidth {
    width: 100%;
}
.center {
    align-items: center;
}
.top {
    align-items: flex-start;
}
.gap {
    gap: 1em;
}
.smallGap {
    gap:.5em;
} 
.flex {
    flex: 1;
}
.border {
    border:1px solid var(borderColour);
}
.borderBottom {
    border-left:1px solid var(borderColour);
}
.borderTop {
    border-top: 1px solid var(borderColour);
}
.borderLeft {
    border-left:1px solidvar(borderColour);
}
#modalCntr {
    position: fixed;
    display: none;
    top: 5%;
    left: 50%;
    margin-left: -35%;
    min-width: 70%;
    max-width: 70%;
    background-color: rgba(255,255,255,1);
    border-radius: .5em;
    min-height: 70%;
    box-shadow: 0 0 .5em rgba(0,0,0,.35);
    padding: 1em;
}
.card {
    display: inline-block;
    border-radius: .5em;
    border: 1px solid rgba(0,0,0,.15);
    background-color: #EEE;
    padding: 1em;
}
.w75 {
    width: 75%;
    max-width: 75%;
    min-width: 75%;
}
.w50 {
    width: 50%;
    max-width: 50%;
    min-width: 50%;
}
.w40 {
    width: 40%;
    max-width: 40%;
    min-width: 40%;
}
.w30 {
    width: 30%;
    max-width: 30%;
    min-width: 30%;
}
.w25 {
    width: 25%;
    max-width: 25%;
    min-width: 25%;
}
#loginForm, #joinForm {
    display: fixed;
    top: 15%;
    left: 50%;
    margin-left:-17.5%;
    width: 35%;
}
#logoCntr img {
    width: 100%;
}
#pageCntr {
    position: relative;
    margin: 1em;
}
#topCntr {
    position: relative;
    width: 100%;
    padding: 1em;
}
#bodyCntr {
    position: relative;
    width: 100%;
}
#sideCntr {
    position: relative;
    width: 20ch;
}
#sideCntr a {
    display: block;
}
#contentCntr {

}
#footerCntr {

}
@media only screen and (max-width: 1440px) {
}
@media only screen and (max-width: 1024px) {
}
@media only screen and (max-width: 768px) {
}
@media only screen and (max-width: 425px) {
}
@media only screen and (max-width: 375px) {
}