/* CSS Document */
body                            {width: 90%; max-width: 1080px; margin: 2em auto; background-image: url("../pictures/bglogo-small.png"); background-color: rgb(255,242,242); color: rgb(153,0,0); font-family: Tahoma; font-size : 14pt;}

a                               {color: rgb(153,0,0); text-decoration: none; font-weight: bolder; cursor: pointer;}
a:link                          {color: rgb(153,0,0); text-decoration: none; }
a:visited                       {color: rgb(153,0,0); text-decoration: none; }
a:hover                         {color: rgb(255,0,0); text-decoration: none; }

.container                      {display: grid; grid-template-areas: "nav nav" "header header" "div1 div1" "div2 div2" "div3 div3" "div4 div4" "div5 div5" "footer footer"; grid-template-columns: 1fr; gap: 20px; }
nav                             {display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); grid-auto-rows: minmax(30px, auto);  column-gap: 10px; row-gap: 10px;}
nav                             {grid-area: nav; }
nav                             {border-bottom: 3px solid rgb(153,0,0); padding: 10px; margin-top: 10px; margin-bottom: 10px; }
div.navigate                    {width: 220px; height: 25px; padding: 6px; margin: 3px; background-color: rgb(240,194,194); color: rgb(153,0,0); border-radius: 8px; border: solid rgb(153,0,0) 3px; text-align: center; font-size : 16pt;}
div.navigate a                  {color: rgb(153,0,0); text-decoration: none; font-weight: normal; cursor: pointer;}
div.navigate a:link             {color: rgb(153,0,0); text-decoration: none; }
div.navigate a:hover            {color: rgb(255,0,0); text-decoration: none; }
div.navigate a:visited          {color: rgb(153,0,0); text-decoration: none; }

header                          {grid-area: header; }
header                          {font-size : 28pt; text-align: center; padding-top: 20px; padding-bottom: 20px;}
footer                          {border-top: 3px solid rgb(153,0,0); padding: 20px; margin-top: 40px; margin-bottom: 20px; width: 95%;}
footer                          {grid-area: footer; }

.motto                          {grid-area: div1;}
.motto                          {display: grid; grid-template-columns: 1fr 3fr; grid-auto-rows: minmax(200px, auto); gap: 20px; }
.face                           {height: 180px; width: 142px;}
.text                           {font-size : 18pt; }

.searchdiv                      {grid-area: div2;}
.searchdiv                      {left: 0px; width: 100%; border-top: solid rgb(153,0,0) 3px; padding-top: 10px; padding-bottom: 10px;}
.searchdiv input                {margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin right: 30px; border-radius: 3px; border: rgb(153,0,0) solid 3px; height: 35px; font-size: 14pt; }

.textcontent                    {grid-area: div3; }
.textcontent                    {display: grid; grid-template-columns: repeat(auto-fit, minmax(305px, 1fr)); grid-auto-rows: minmax(30px, auto);  column-gap: 20px; row-gap: 20px;}
.textcontent                    {width: 100%; padding-top: 10px; padding-bottom: 10px; margin-top: 10px; margin-bottom: 10px;}

.media                          {grid-area: div5; }
.media                          {display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); grid-auto-rows: minmax(350px, auto);  column-gap: 20px; row-gap: 20px;}
.media                          {width: 100%; padding-top: 20px; padding-bottom: 20px; margin-top: 20px; margin-bottom: 20px;}
.mediafield                     {height: 350px; width: 330px; border: 3px solid rgb(153, 0, 0); border-radius: 5px;}
table.mi                        {width: 350px; height: 350px; table-layout: fixed;}
table.mi td                     {padding-top: 5px;}

button                          {width: 105px; height: 35px; border: solid rgb(153,0,0) 2px; border-radius: 5px; color: rgb(255,255,255); background-color: rgb(153,0,0); cursor: pointer; font-size : 14pt; font-weight: bold;}

div.forms                       {grid-area: div1; width: 100%; max-width: 1000px; margin-top: 20px; margin-bottom: 20px; }
div.forms form                  {border: none; text-align: left; width: 100%; max-width: 1000px;}
div.forms input                 {height: 25px; font-family: Tahoma; font-size : 14pt; color: rgb(153,0,0); border: solid rgb(153,0,0) 2px; width: 100%; max-width: 1000px; margin-top: 20px; margin-bottom: 20px;}
div.forms label                 {font-family: Tahoma; font-size : 14pt; color: rgb(153,0,0);}
div.forms button                {width: 150px; height: 40px; border: solid rgb(153,0,0) 2px; border-radius: 5px; color: rgb(255,255,255); background-color: rgb(153,0,0); cursor: pointer; margin-top: 20px; margin-bottom: 20px;}
div.forms textarea              {border: rgb(153,0,0) solid 2px; border-radius: 5px; overflow-y: scroll; resize: none; width: 100%; max-width: 1000px; margin-top: 20px; margin-bottom: 20px;}

div.contcal                     {grid-area: div1; width: 100%; max-width: 1000px; margin-top: 20px; margin-bottom: 20px; }
div.contcal                     {display: grid; grid-template-columns: repeat(auto-fit, minmax(305px, 1fr)); grid-auto-rows: minmax(220px, auto); column-gap: 20px; row-gap: 20px; }

div.books                       {grid-area: div1; width: 100%; max-width: 1000px; margin-top: 20px; margin-bottom: 20px; }                                                           
div.books                       {display: grid; grid-template-columns: repeat(auto-fit, minmax(305px, 1fr)); grid-auto-rows: minmax(400px, auto); column-gap: 20px; row-gap: 20px; } 

div.interact1                   {grid-area: div1; width: 100%;}
div.interact1 input             {width: 100%; margin-top: 10px; margin-bottom: 5px; border-radius: 3px; border: rgb(153,0,0) solid 3px; font-size: 14pt; }
div.interact1 textarea          {width: 100%; height: 100px; overflow-y: scroll; resize: none; margin-top: 5px; margin-bottom: 10px; border-radius: 3px; border: rgb(153,0,0) solid 3px; font-size: 14pt; }
div.interact2                   {grid-area: div2; width: 100%;}
div.interact2 input             {width: 100%; margin-top: 10px; margin-bottom: 5px; border-radius: 3px; border: rgb(153,0,0) solid 3px; font-size: 14pt; }
div.interact2 textarea          {width: 100%; height: 100px; overflow-y: scroll; resize: none; margin-top: 5px; margin-bottom: 10px; border-radius: 3px; border: rgb(153,0,0) solid 3px; font-size: 14pt; }
div.safe                        {width: 50%; display: grid; grid-template-columns: 1fr 1fr 1fr; grid-auto-rows: 1fr; gap: 20px;}
div.contrib                     {grid-area: div3; width: 100%;}
div.contrib textarea            {width: 100%; height: 500px; overflow-y: scroll; resize: none; margin-top: 5px; margin-bottom: 10px; border-radius: 3px; border: rgb(153,0,0) solid 3px; font-size: 14pt; }

table.pattern                   {top: 0px; border: none; border-collapse: collapse; }
table.pattern td                {border: none; border-collapse: collapse; font-family: Courier New; font-size: 3pt; font-weight: bold; width: 4px; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px; }
table.pattern tr                {height: 3px; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px;}

figure                          {width: 300px;}
figcaption                      {width: 100%; padding-top: 20px; font-size: 12pt; text-align: justify;}

table.cmicrodata                {font-size : 12pt; border-collapse: collapse; border: none;}
table.cmicrodata td             {font-size : 12pt; border-collapse: collapse; border: none; padding-left: 10px;}
table.cmicrodata tr             {height: 30px;}
table.cmicrodata span           {font-weight: bold;}
div.cmicrodata p                {font-size : 12pt;}

#mypopi                         {text-align: center; padding-left:40px; padding-right:40px; padding-bottom:40px; padding-top:20px; background-color: rgb(255,255,255); font-family: Tahoma; color: rgb(153,0,0); border: rgb(153,0,0) solid 4px; border-radius: 8px;}
#mypopi li                      {padding-bottom: 5px;}
#mypop1                         {text-align: center; padding-left:40px; padding-right:40px; padding-bottom:40px; padding-top:20px; background-color: rgb(255,255,255); font-family: Tahoma; color: rgb(153,0,0); border: rgb(153,0,0) solid 4px; border-radius: 8px;}
#mypop2                         {text-align: center; padding-left:40px; padding-right:40px; padding-bottom:40px; padding-top:20px; background-color: rgb(255,255,255); font-family: Tahoma; color: rgb(153,0,0); border: rgb(153,0,0) solid 4px; border-radius: 8px;}
#mypop3                         {text-align: center; padding-left:40px; padding-right:40px; padding-bottom:40px; padding-top:20px; background-color: rgb(255,255,255); font-family: Tahoma; color: rgb(153,0,0); border: rgb(153,0,0) solid 4px; border-radius: 8px;}
#mypop4                         {text-align: center; padding-left:40px; padding-right:40px; padding-bottom:40px; padding-top:20px; background-color: rgb(255,255,255); font-family: Tahoma; color: rgb(153,0,0); border: rgb(153,0,0) solid 4px; border-radius: 8px;}
#discpop1                       {text-align: center; padding-left:40px; padding-right:40px; padding-bottom:40px; padding-top:20px; background-color: rgb(255,255,255); font-family: Tahoma; color: rgb(153,0,0); border: rgb(153,0,0) solid 4px; border-radius: 8px;}
#mypopadmin                     {text-align: center; padding-left:40px; padding-right:40px; padding-bottom:40px; padding-top:20px; background-color: rgb(255,255,255); font-family: Tahoma; color: rgb(153,0,0); border: rgb(153,0,0) solid 4px; border-radius: 8px;}

div.client                      {grid-area: div2; width: 100%;}

div.textref                     {height: 25px; padding: 6px; margin: 3px; background-color: rgb(255,230,230); color: rgb(153,0,0); border-radius: 8px; border: solid rgb(153,0,0) 3px; text-align: center; font-size : 14pt;}

.tooltip                        {position: absolute; display: inline-block;}
.tooltip .tooltiptext           {visibility: hidden; width: 120px; background-color: RGB(255,242,242); color: RGB(153,0,0); text-align: center; border: solid RGB(153,0,0) 3px; border-radius: 6px; padding: 5px 0; position: absolute; z-index: 1; top: -5px; left: 110%; }
.tooltip:hover .tooltiptext     {visibility: visible;}
.tooltip .tooltipimage          {visibility: hidden;  position: absolute; z-index: 1; top: -5px; left: 100%; }
.tooltip:hover .tooltipimage    {visibility: visible;}

div.client input                {width: 350px;}
table.clienttable               {margin-top: 30px; margin-bottom: 10px;}
table.consenttable              {margin-top: 10px; margin-bottom: 10px; vertical-align: bottom;}

table.quizlist td               {font-size : 14pt; font-weight: bold;}
table.testform td               {border-collapse; font-size : 14pt; font-weight: bold; height: 40px; vertical-align: middle;}

@property --p                   {syntax: '<number>'; inherits: true; initial-value: 1; }
.pie                            {--p:20;--b:22px;--c:darkred;--w:300px;--fc:green; width:var(--w); aspect-ratio:1/1; position:relative; display:inline-grid; margin:5px; place-content:center; font-size:50px; font-weight:bold; font-family:sans-serif; color: var(--fc)}
.pie:before, .pie:after         {content:""; position:absolute; border-radius:50%; }
.pie:before                     {inset:0; background: radial-gradient(farthest-side,var(--c) 98%,#0000) top/var(--b) var(--b) no-repeat, conic-gradient(var(--c) calc(var(--p)*1%),#0000 0); -webkit-mask:radial-gradient(farthest-side,#0000 calc(99% - var(--b)),#000 calc(100% - var(--b))); mask:radial-gradient(farthest-side,#0000 calc(99% - var(--b)),#000 calc(100% - var(--b))); }
.pie:after                      {inset:calc(50% - var(--b)/2); background:var(--c); transform:rotate(calc(var(--p)*3.6deg - 90deg)) translate(calc(var(--w)/2 - 50%)); }
.animate                        {animation:p 1s .5s both; }
@keyframes  p                   {from{--p:0;} }

.pointer-description            {position: relative; left: 50px; color: #555555;font-size: 16pt; font-weight: bold;}
.pictureinput                   {border: solid rgb(153,0,0) 2px; border-radius: 3px; cursor: pointer;}

.callout                        {position: fixed;  top: 10%; left: 50%; margin-left: -200px; width: 400px; background-color: white; border: 4px solid rgb(153,0,0); border-radius: 10px;}
.callout-header                 {height: 40px; padding-top: 5px; background: rgb(153,0,0); font-size: 30px; color: white; text-align: center;}
.callout-container              {padding: 15px; background-color: white; color: rgb(153,0,0); margin-bottom: 10px; }
.closebtn                       {position: absolute; top: 5px; right: 15px; color: white; font-size: 30px; cursor: pointer; }
.closebtn:hover                 {color: lightgrey; }
.callout-item-content           {margin-top: 5px; background-color: white; color: rgb(153,0,0); text-align: justify; font-size: 18px; border-bottom: 2px solid rgb(153,0,0);}
.callout-item-header            {margin-top: 5px; background-color: white; color: rgb(153,0,0); font-size: 22px; font-weight: bold; text-align: center; }
.callout-item-image             {display: block; margin-left: auto; margin-right: auto; width: auto; margin-top: 5px; background-color: white; border: 1px solid rgb(92,92,92);}

div.longtextl                   {position: relative; width: 1070px; height: 800px; overflow: auto; padding: 8px 12px 8px 8px; background-color: rgb(255,242,242); border: 3px solid rgb(153,0,0);}
div.longtextl p                 {font-size: 11pt; margin-bottom: 3px; line-height: 25px;}
div.double                      {position: relative; padding-left: 15px; column-count: 2; column-gap: 30px; text-align: left; font-size: 10pt; color: rgb(0,0,153); margin-top: 20px; margin-bottom: 20px; padding-top: 20px; padding-bottom: 20px;}
div.double p                    {margin-top: 0px; margin-bottom: 3px;}

.dropdown                            {position: relative; display: inline-block;}
.dropdown .dropdown-ref              {width: 220px; height: 25px; padding: 6px; margin: 3px; background-color: rgb(240,194,194); color: rgb(153,0,0); border-radius: 8px; border: solid rgb(153,0,0) 3px; text-align: center; font-size : 16pt;}
.dropdown .dropdown-content          {display: none; position: absolute; left: 20%; top: 20%; padding-left:10px; padding-right:10px; padding-bottom: 5px; padding-top: 5px; background-color: rgb(255,255,255); font-family: Tahoma; text-align: left; color: rgb(153,0,0); border: rgb(153,0,0) solid 4px; border-radius: 8px; z-index: 1;}
.dropdown:hover .dropdown-content    {display: block;}

.dropdown-l                            {position: relative; display: inline-block;}
.dropdown-l .dropdown-l-ref            {margin: 3px; border: none; text-align: center;}
.dropdown-l .dropdown-l-content        {display: none; position: absolute; width: 220px; height: 50px; padding: 6px; background-color: rgb(255,255,255);  color: rgb(153,0,0); border: solid rgb(153,0,0) 3px; border-radius: 8px; font-size : 16pt; font-family: Tahoma; text-align: left; z-index: 1;}
.dropdown-l:hover .dropdown-l-content  {display: block;}

.cladmin                               {width: 10px; height: 10px; border: none; border-radius: 50%; background-color: rgb(255,230,230); cursor: pointer;}


.rborder                             {width: 18px; height: 18px; border: rgb(153,0,0) 3px solid; border-radius: 50%; text-align: center;}