/* 
    Commonly used CSS to simplify classes
*/
.invisible {  visibility: hidden; }
.hidden { display: none !important; }
.inline { display: inline-block; }
.block { display: block; }
.fixed { position: fixed; }
.overflow-y-auto { overflow-y: auto; }
.full-width { width: 100%; }
.fit { width: fit-content; }
.content-width { width:1px; }
.auto-width { width: auto; }
.nowrap { white-space: nowrap !important; }
.italic { font-style: italic !important; }
.bold { font-weight: bold !important; }
.top { vertical-align: top; }
.baseline { vertical-align: baseline; }
.middle { vertical-align: middle; }
.bottom { vertical-align: bottom; }
.left { text-align: left !important; }
.right { text-align: right !important; }
.center { text-align: center !important; }
.pointer { cursor: pointer; }
.cursor { cursor: default; }
.noClick { pointer-events: none; opacity: 0.5; cursor: not-allowed; user-select: none }
.size16 { font-size:16px; }
.size20 { font-size:20px; }
.size24 { font-size:24px; }
.size32 { font-size:32px; }
.size48 { font-size:48px; }
.dim16 { height:16px; width:16px; }
.dim18 { height:18px; width:18px; }
.dim24 { height:24px; width:24px; }
.dim32 { height:32px; width:32px; }
.dim48 { height:48px; width:48px; }
.red { color:red; }
.green { color:green; }
.blue { color:blue; }
.purple { color:purple; }
.yellow { color:yellow; }
.rounded { border-radius: 50%; }

.small { font-size: 0.875rem; }
.medium { font-size: 1rem; }
.large { font-size: 1.25rem; }
.xlarge { font-size: 1.5rem; }
.xxlarge { font-size: 2rem; }

.blinker { animation: blinker 1s linear infinite; }
@keyframes blinker { 50% { opacity: 0; } }
.washout { opacity: 0.5; }

/* 
    Common colours
*/
.text-color { color: var(--text-color) }
.error-color { color: var(--error-color) }