html
{
 font-size: 15px;
 font-family: "Nunito Sans", "Tahoma","Helvetica", "Verdana","Arial";
 font-style: normal;
}

@media (max-width: 1000px){html {font-size:15px;}}
@media (max-width: 800px){html {font-size:14px;}}
@media (max-width: 700px){html {font-size:13px;}}
@media (max-width: 600px){html {font-size:13px;}}

.sizeL {font-size: 1.5em;}
.sizeML {font-size: 1.25em;}
.sizeM {font-size: 1em;}
.sizeSM {font-size: 0.88em;}
.sizeS {font-size: 0.75em;}


hr {border: none; border-top: 1px dashed  var(--heading-color);}

.b {font-weight:bold;}
.B {font-weight:bold; color: var(--heading-color);}

.i {font-style: italic;}

.fc {color: var(--font-color);}

.L{text-align: left; justify-content: flex-start;}
.C{text-align: center; justify-content: center;}
.R{text-align: right; justify-content: flex-end;}

.o {border: 1px solid rgb(200, 200, 200); outline: none; border-radius: 4px; margin: 2px;}
.u {border-bottom: 0.8px dashed rgb(200, 200, 200); outline: none; margin: 0px;}

.s {color: var(--subtitle-color);}

.readonly {color: var(--font-readonly-color);}
.pad0 {padding: 0px;}
.pad1 {padding: 1px;}
.pad2 {padding: 2px;}
.pad3 {padding: 3px;}
.pad4 {padding: 4px;}
.pad {padding: 5px;}

.vh {
 align-content: center;
 overflow: hidden;
 justify-items: left;
 text-overflow: ellipsis;
 /* Tinker with this for old IOS flex breaks on desktop   display: flex; fixes IOS single line but breaks 2 lines */
 display: flex; 
 flex-direction: column;
 justify-content: center;
 -webkit-justify-content: center;
}

.wrap { white-space: wrap !important;  overflow-wrap: break-word; word-wrap: break-word;}
.nowrap 
{ 
 display: unset;
 white-space: nowrap; 
 text-overflow: ellipsis; 
 overflow: hidden;
}

.noflex {display: block;}

.rows-2 { display: grid; grid-template-rows: 1fr 1fr; }