html {font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%} 
body {font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:14px;line-height:1.42857143;color:#333;background-color:#fff}
        
        @media screen and (min-width: 320px) {
            html,.input,.button {
                font-size: calc(0.5vw + 0.5vh + 3vmin);
            }
        }
        @media screen and (min-width: 1000px) {
            html,.input,.button {
                font-size: 18px;color:green;
            }
        }
        
 .input {
         margin:10px 15px 15px 15px;
         padding: 3px;
         border-radius:5px;
         box-shadow: 3px 3px 5px grey;
        font-weight: 600;
        }
        
 .label {
         margin: 10px 0px 0px 18px;
        }
 .label:after { 
         content: ": " 
        }
        
        .thirds {
            width:30%;
            margin:5px auto 5px auto;
            padding: 5px 0px 5px 0px;
            border-radius:5px;
            background-color:aquamarine;
        } 
        .page-top {
            color:white;
            background-color:green;
            text-align:center;
            border-radius:5px;
            padding: 5px 0px 5px 0px;
            width:100%;
        }
        .page-bot {
            background-color:E8E8E8;
            border-radius:5px;
            padding: 10px 0px 10px 0px;
        }        
        .flex-element{
            border:2px solid black;
            border-radius:5px;
            margin: 10px;
        }
        .flex-container {
            background-color:none;
            font-weight:normal;
            margin: 10px 0px 10px 0px;
            border:2px solid black;
            border-radius:5px;
            display: flex;
            flex-direction: column;
            padding-left:5px;
            padding-right:5px;
            padding-bottom:5px;
            padding-top:5px;
            margin-bottom:5px;
        }
        .flex-row {
            display: flex;
            flex-direction: row;
        }
        .l {
            text-align:left;
            margin: 0px 0px 0px 15px; 
        }
        .r {
           float:right;
           text-align:right;
           margin: 0px 15px 0px 0px;
        }
        .pad1111 {
           margin: 5px 5px 5px 5px;   
        }
        .button-nd   {
         -webkit-border-radius: 10px;
         border: 1px solid rgb(126, 126, 126);
         text-align: center;
         margin-bottom:5px;
        }

        .bgc_black   {background-color:black;}
        .bgc_white   {background-color:white;}
        .bgc_red     {background-color:red;}
        .bgc_aqua    {background-color:aquamarine;}
        .bgc_msgreen {background-color:mediumseagreen;}
        .bgc_green   {background-color:green;}
        
        .fgc_black   {color:black;}
        .fgc_white   {color:white;}
        .fgc_red     {color:red;}
        .fgc_aqua    {color:aquamarine;}
        .fgc_msgreen {color:mediumseagreen;}
        .fgc_green   {color:green;}
        .fgc_blue    {color:blue;}

 .hcentre         {text-align:center;}
 .bold            {font-weight:700;}
 .colourblue      {color:blue;}
 .colourred       {color:red;}
 .colouryellow    {color:yellow;}
 .colourpink      {color:pink;}
 .colourwhite     {color:white;}
 
 .lh25            {line-height:25px;}
 .lh30            {line-height:30px;} 
 .lh35            {line-height:35px;}
 .lh40            {line-height:40px;}
 .lh45            {line-height:45px;}
 
 .fgcwhite        {color:white;}
 .fgcblack        {color:black;}
 .fgcseagreen     {color:mediumseagreen;}
 .fgclgreen       {color:lightgreen;}
 .fgcred          {color:red;}
 .fgcblue         {color:blue;}
 
 .bgcwhite        {background-color:white;}
 .bgclgreen       {background-color:lightgreen;}
 .bgcseagreen     {background-color:mediumseagreen;}
 .bgcred          {background-color:red;}  
 .bgcorange       {background-color:orange;}  
 .bgcyellow       {background-color:yellow;} 
 .bgclgrey        {background-color:lightgrey;} 
 .bgcblue         {background-color:skyblue;}
  
 .bgcolyellow     {background-color:yellow;}
 .bgcolcorn       {background-color:cornsilk;}
 .bgcollightgreen {background-color:lightgreen;}
 .bgcolskyblue    {background-color:skyblue;}
 .textleft        {text-align:left;}
 .textcentre      {text-align:center;}
 .textright       {text-align:right;}
 .hand            {cursor:pointer;}
 .fontarial       {font-family:arial;}
 .ladies2         {background-color:pink;}
 .alignc          {text-align:center;}
 .alignl          {text-align:left;}
 .alignr          {text-align:right;}
 .alignvt         {vertical-align:top;}
 .alignvc         {vertical-align:middle;}
 .popbutton       {width:75px;height:35px;}
 .displaynone     {visibility:collapse;}
 .displayblock    {visibility:visible;}
 .inlineblock     {display:inline-block;}
 .pad2x           {padding:0px;}
 td               {padding:5px;}
 .cp05            {padding:5px;}
 .pad2            {padding:5px;}
 .hide            {display:none}
 
 .floating-text {
            visibility: hidden;
            width: 150px;
            background-color: cornsilk;
            color: #000;
            text-align: center;
            padding: 5px 0;
            border-radius: 6px;
            position: absolute;
            z-index: 1;
            bottom: 100%; /* Position the text above the cell */
            left: 15%;
            transform: translateX(-50%);
            opacity: 0;
            transition: opacity 0.3s;
        }
 
.PortaldivTable
{
    display:table;
    width:800px;
    margin-bottom:20px;
    border:1px solid black;
    border-radius:15px;        
}
.PortaldivTR
{
    display:table-row;
    border-radius:15px
    width:100%;
}
.PortaldivTD
{
    display:table-cell;
    border-radius:15px;
    padding:3px 10px;
    border:3px solid transparent;
}
 .max-width 
{
    margin: 0 auto;    
    width: 1400px;
    max-width: 100%;
    font-family:Calibri;
    padding-top:60px;
    padding-bottom:120px;
}
.PortalTable
{
    width:1000px;
    border:2px solid black;
    border-radius:15px;
    border-collapse:separate;
}
.PortalTable td
{
    border:0px;
    border-radius:10px;
    padding:5px;
    font-size:16pt;
    vertical-align: middle;
}
.PortalTable tr
{
    background-color:white;
}
.PortalTable th
{
    background-color:none;
    border:none;
    border-radius:10px;
    
}
.TDHoverGreen
{
    text-align:center;
    background-color:lightgrey;
    border-color:white;
}
.TDHoverGreen:hover
{
    background-color:green;
    color:white;
    border-color:white;
}
.bluetext20
{
    font-size:20pt;
    color:blue;
}