/* roboto-regular - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
	font-display: swap;
  src: url('fonts/roboto-v29-latin-regular.woff2') format('woff2'),
       url('fonts/roboto-v29-latin-regular.woff') format('woff');
}
/* roboto-italic - latin */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 400;
	font-display: swap;
  src: url('fonts/roboto-v29-latin-italic.woff2') format('woff2'),
       url('fonts/roboto-v29-latin-italic.woff') format('woff');
}
/* roboto-700 - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
	font-display: swap;
  src: url('fonts/roboto-v29-latin-700.woff2') format('woff2'),
       url('fonts/roboto-v29-latin-700.woff') format('woff');
}
/* roboto-700italic - latin */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 700;
	font-display: swap;
  src: url('fonts/roboto-v29-latin-700italic.woff2') format('woff2'),
       url('fonts/roboto-v29-latin-700italic.woff') format('woff');
}
/* Phone layout - portrait: 360px */
html { background-color: white }
body { font-family: Roboto, Arial, Helvetica, sans-serif; font-size: 16px; background-color: #fff; width: 100%; margin: 0; color: black; }
.mobiletopmenu { background-color: white; padding: .6rem calc(2% + .3rem) .2rem; overflow: visible; }
.navicon { margin: 0; text-align: right; }
.navicon a { text-decoration: none; color: black; font-weight: bold; transform: scale(1.25,1);  font-size: large; }
.navicon a:hover { color: navy; background-color: white; }
.btn { color: white; margin: auto; width: 180px; }
.btn a, .btn a:visited { display: block; text-decoration: none; color: white; text-align: center; background-color: navy; padding: .3rem 1rem; border: .1rem navy solid; border-radius: .3rem; line-height: 1.4; }
.btn a:hover, .btn a:visited:hover { background-color: white; color: #ff0000; text-decoration: underline; }
.bannersecn { background: #fff; position: relative; padding: 0 2%;}
.bannersecn .skiplink { width: 0; height: 0; overflow: hidden; position: absolute; left: -1000px; color: #fff; }
.logo { max-width: 200px; display: table-cell; vertical-align: middle; line-height: 0; }
.bannertxt { display: table-cell; vertical-align: top; padding: .5rem 0 0 1rem; font-style: italic; }
.sitedesc { color: navy; font-style: italic; font-size: 1.6rem; }
.tagline { color: #ff0000; font-size: 1.2rem; font-style: italic; margin: .3rem 0; }
.goog-te-combo { width:95%; }
#pgctr { border: 2px solid black;
	border-image: url('images/iStock-483147081-bannerbg.jpg') 30% 0 auto stretch;
	position: relative; overflow: hidden; padding: 55px 2%; }
.menusecn { display: none; width: 90%; margin: auto; padding: .5rem; background-color: #f8f8f8; color: black; z-index: 10; }
.topmenu { margin: 1rem 2% .5rem; padding: 0; }
.topmenu li { list-style-type: none; margin-bottom: .5rem; }
.topmenu ul { margin: .3rem 0 1rem; padding: 0 0 0 .5rem; display: none; }
.topmenu .collapsed a::after { content: "\25BE"; transform: scale(1.8,1); margin-left: .5rem; display: inline-block; }
.topmenu .expanded a::after { content: "\25B4"; transform: scale(1.8,1); margin-left: .5rem; display: inline-block; }
.topmenu a, .topmenu a:visited { display: block; text-decoration: none; color: navy; padding: .75rem 0; font-size: 14px; }
.topmenu a:hover { color: #ff0000; }
.topmenu ul a, .topmenu ul a:visited { color: black; }
.contentsecn { padding: 1rem; }
.contentsecn input[type=text], .contentsecn textarea { width: 80%; }
.contentsecn input[type=submit] { cursor: pointer; border-radius: .3rem; border: .1rem navy solid; padding: .3rem 1rem; background-color: navy; color: white; text-align: center; font-size: 1rem; }
.contentsecn input[type=submit]:hover { background-color: white; color: #ff0000; text-decoration: underline; }
.contentsecn h1:first-of-type { margin-top: 0; margin-bottom: 1.5rem;  }
.contentsecn img { border: none; height: auto; width: 100%; }
.contentsecn li { margin-bottom: .5rem; line-height: 1.3; }
.contentsecn p { line-height: 1.3; }
.contentsecn .stdtable input[type=text], .stdtable textarea { width: 100%; }
.footersecn { background: #fff; color: #000; margin: .5rem 3% .5rem; clear: both; text-align: center; font-size: 14px; }
.footersecn #credits a { color: #000; text-decoration: none; font-size: .7rem; }
.footersecn #credits a:hover { color: #ff0000; text-decoration: underline; }
.ftrmenu { text-align: initial; }
.ftrmenu ul { margin: 1rem auto; list-style-type: none; column-count: 2; }
.ftrmenu a { font-size: 14px; padding: .75rem 0; display: block; text-decoration: none; }
.ftrmenu a:visited { text-decoration-color: white; }
.ftrmenu a:hover { color: #ff0000; }

/* classes */
.abovetheline { position: relative; top: -0.2rem; font-size: .75rem; text-transform: uppercase; }
.abovethelinestar { position: relative; top: -0.1rem; font-size: 1rem; }
.answer { margin: .5rem 0 1.5rem; }
.answer:before { content: 'A: \00A0'; font-weight: bold; }
.answer p { margin: .5rem 0 0 !important; }
.back2top { font-size: .8rem; }
.back2top:before { background: url("images/uparrow.jpg") no-repeat; content: ""; width: 16px; height: 14px; float: left; margin-right: .3rem; margin-top: .2rem; }
.bigspaceTB { margin: 2rem 0; }
.biggerspaceTB { margin: 4rem 0; }
.box { border: 5px outset gray; font-weight:normal; padding: 1.2em; text-align: center; margin: 1.5rem; }
.box2 { border: 1px solid gray; padding: 0 1rem .5rem; }
.box2 .fatprint { font-size: 1.1rem; }
.box2 .hilite4 { font-size: 1.2rem; }
.caption { font-size: .9rem; text-align: center; width: 60%; margin: .5rem auto 2rem !important; font-weight: bold; }
.cite { text-align: right; margin: -.5em 0 .5em !important; color: black; }
.cite:before { content: '\2014\00A0'; }
.closethis { position: absolute; top: .5rem; right: .5rem; }
.closethis a { text-decoration: none; color: black; }
.commentbox { border: 5px outset gray; color: navy; font-weight:normal; padding: 1.2em; }
.commentbox .indent { margin-left: 25px; }
.commentbox hr { width: 15%; margin: 1.5rem auto 2rem; border: none; background: none; border-top: 1px solid gray; height: auto; }
.commentbox .indivcomment { margin-bottom: 1.5rem; }
.csstbl, .csstbl2 { display: table; border-collapse: collapse; border: none; width: 96%; margin: 1rem auto; }
.csstbl2 { table-layout: fixed; }
.csstblrow { display: table-row; }
.csstblcell { display: table-cell; padding: .5rem; }
.csstblcell2 { display: table-cell; padding: .5rem; font-size: .9rem; font-weight: bold; width: 30%; }
.csstblcellborder { display: table-cell; padding: .5rem; border: 1px solid gray; }
.csstblhdg { display: table-cell; font-weight: bold; font-size: .9rem; border-bottom: 1px solid gray; }
.ctrfeature { width: 70%; margin: 2.5rem auto; border: 1px solid black; padding: 1.2em 1em .6em; text-align: center; }
.ctrfeature h2 { font-size: 1.5em; }
.ctrfeature h2 a { text-decoration: none; }
.dontshowtousers { opacity: 0; position: absolute; top: 0; left: 0; height: 0; width: 0; z-index: -1; }
.errmsg { color: red; font-weight: bold; font-style: italic; }
.errmsgtop { background-color: #FF8C00; color: white; font-weight: bold; font-size: 1.2rem; padding: .2rem 1rem; }
.fatprint { font-size: 1.2rem; }
.fieldColor { color: #FF0000; font-weight: bold; }
.filesys { font-family: Courier, monotype; }
.fineprint { font-size: .9em; }
.finebold { font-size: .9em; font-weight:bold; }
.footnt { margin: 2rem 0 .5rem; font-size: .85rem; clear: both; }
.footnt::before { content: ' '; width: 150px; border-top: 1px solid #321000; display: block; }
.formlabel, .formlabelr { width: 20%; color: #FF0000; font-weight: bold; padding-right: .3em; text-align: right; vertical-align: top; }
.formlabel { color: black; }
.goLeft, .goRight, .goLeftwMargin, .goRightwMargin { text-align: center; }
.hdgnum>li::marker { color: navy; font-size: 1.2em; font-weight: bold; }
.hdgnum h3:first-of-type { display: inline; }
.hilite { color: #ff0000; font-weight: bold; font-size: 1.05rem; }
.hilite2 { color: black; font-weight: bold; }
.hilite3 { color: black; font-style: italic; }
.hilite4 { color: #ff0000; }
.hilite5 { color: navy; font-size: 1.2rem; }
.hilite6 { color: navy; font-weight: bold; }
.hilite7 { color: black; font-size: 1.2rem; }
.hilite8 { color: #ff0000; font-weight: bold; font-size: 1.3rem; font-style: italic; line-height: 1.3; text-align: center; }
a.hilite8:visited { color: #ff0000; }
.hilite9 { color: navy; font-size: 1.75rem; }
.hilite10 { text-align: center; font-weight: bold; color: #2f55a8; max-width: 750px; margin: auto; }
.hilite11 { text-align: center; color: navy; font-weight: bold; font-size: 1.2rem; width: 80%; margin: auto; }
.hmfeature { width: 70%; text-align: center; margin: auto; }
.insidehdg { color: red; text-align: left; margin-left: 7.25rem;
text-indent: -7.25rem; }
.inversebox { background-color: navy; border: 3px ridge #cccccc; color: white; font-weight: bold; font-size: 1.2em; margin: 1.2em 0; padding: 1em; line-height: 1.25; }
.inversebox a, .inversebox a:visited { color:white; text-decoration: none; }
.inversebox a:hover { text-decoration: underline; }
.inversebox2 { background-color: navy; border: none; font-weight: bold; font-size: 1.8em; margin: 1.2em 0; padding: 1em 1.5em; text-align: center; clear: both; }
.inversebox2 a { display: block; text-decoration: none; color: yellow !important; }
.justblack { color: black; }
.justbold { font-weight: bold; }
.justital { font-style: italic; }
.lgprint { font-size: 1.5rem; }
.listindentplain { list-style-type:none; margin-left: 1.5rem; padding-left:0; }
.microprint { font-size: .8rem; }
.no_see_um { display: none; }
.nospace { margin-bottom:0 !important; }
.no_udrline { text-decoration: none; }
.pgname { display: none; }
.putCenter { text-align: center; }
.putLeft { text-align: left; }
.putRight { text-align: right; }
.qanda { margin-bottom: 2rem; }
.question { margin-bottom: .3rem !important; }
.question:before { content: 'Q: \00A0'; font-weight: bold; }
.rpttable { border: none; border-collapse: collapse; font-family: monospace; font-size: .9em; }
.rpttable td { border: 1px solid black; }
.rpttable td.general { text-align: left; padding-right: 4em; }
.rpttable td.numeric { text-align: right; padding-left: 4em; }
.sampletable { border: 1px solid gray; width: 100%; margin: 0 auto 1.5rem; font-size: .9rem; }
.sampletable td { border: 1px solid gray; padding: .2rem .5rem; }
.scrollable { overflow-x: auto; white-space: nowrap; }
.scrollable img { margin-bottom: .2rem; }
.see_um { display: block; }
.stdtable { border: none; border-collapse: separate; border-spacing: .8em; }
.unadorned { margin: 1rem 0; padding: 0; list-style-type: none; }
.contentsecn .unadorned li { margin-bottom: .2rem; padding-left: 1rem; text-indent: -1rem; }
.whychoose { font-size: 1.5em; font-weight: bold; margin: 1.5em auto; list-style-type: none; text-align: center; }
.xtrabanner { text-align: center; max-width: 80%; margin: 1rem auto; padding: 0 1.5rem; border: 2px gray dashed; position: relative; background-color: #efefef; }
#pgctr .xtrabanner { margin: 2rem auto; }
.yellowhighliter { background-color: yellow; }

/* basic tags */
h1, h2, h3, h4 { color: navy; margin: 2rem 0 auto; }
h1 { font-size: 1.8rem; }
h1.pow { font-family: Impact, serif; color: black; text-align: center; font-size: 32px; font-weight: normal; line-height: 1.5rem; }
h2 { font-size: 1.4rem; }
h3 { font-size: 1.2rem; text-align:center; }
h4 { font-size: 1rem; }
h3+ul, h3+ol, h4+ul, h4+ol { margin-top: .5rem; }
a, a:visited { color: #0066cc; }
a.dnldlink { color: black; font-style: italic; font-weight: bold; text-decoration: none; }
a.dnldlink:hover { text-decoration: underline; }
a.hilite { text-decoration: none; color: #ff0000; }
a.hilite:hover { text-decoration: underline; }
hr { width: 80%; margin: 2rem auto; background-color: #008001; color: #008001; height: .2rem; clear: both; }
hr.quiet { background-color: gray; color: gray; height: .1rem; }
hr.quieter { background-color: #ccc; color: #ccc; height: .01rem; }
iframe.ytvideo { max-width:560px; width: 90%; }
ol.listparens li::marker { content: counter(list-item) ") "; }
pre { margin-top: 0; font-size: .8em; }

/* Phone layout - landscape: >=640px */
@media (min-width: 640px) {
.footersecn { text-align: left; margin: .5rem 2%; }
.footersecn #credits { float: right; }
.ftrmenu ul { column-count: 3; }
.contentsecn input[type=text] { width: 50%; }
.goLeft { float: left; }
.goLeftwMargin{ float: left; margin: 1.2em 1.2em 1.2em 0; }
.goRight { float: right; }
.goRightwMargin { float: right; margin: 1.2em 0 1.2em 1.2em; }
.hmfeature { width: 25%; float: right; margin: 0 0 1em 1em; }
.layoutTbl { display: table; border-collapse: collapse; border: none; }
.layoutTblCell { display: table-cell; padding-right: 1em; vertical-align:top; }
.contentsecn .layoutTblCell p:first-of-type { margin-top: 0; }
.layoutTblRow { display: table-row; }
iframe.ytvideo { width:560px; height:315px; }
}

/* Tablet layout - portrait: >=768px */
@media (min-width: 768px) {
.ftrmenu { width: 100%; text-align: center; }
.ftrmenu ul { column-count: unset; padding: 0; }
.ftrmenu li { display: inline-block; }
.ftrmenu a { padding: .75rem 1.5rem; }
.sitedesc { font-size: 1.8rem; }
.contentsecn input[type=text] { width: 30%; }
.contentsecn .stdtable input[type=text], .stdtable textarea { width: 80%; }
.csstblcell2 { width: 25%; }
.inversebox { width: 70%; }
h1 { font-size: 1.75em; }
h2 { font-size: 1.5em; }
h3 { font-size: 1.3em; }
hr { width: 75%; }
}

/* Tablet layout - landscape: >=1024px */
@media (min-width: 1024px) {
.darkbg { background-color: #bcbcbc; }
.lightbg { background-color: white; }
.mobiletopmenu { display: none; }
.menusecn { display: block; margin: 0 2%; padding: 0; background: none; font-size: 14px; color: #000; }
#google_translate_element { float: left; width: 200px; margin-right: 1.5rem; }
.topmenu { list-style-type: none; margin: 0; padding: 0; display: flex; }
.topmenu li { margin-bottom: .5rem; position: relative; flex: 1 1 auto; }
.topmenu ul { margin: .3rem 0 .5rem; padding: 0 1rem; position: absolute; left: 0; top: 41px; z-index: 20; background-color: white; width: 200px; border: 1px solid navy; }
.topmenu li>ul ul { border-top:  1px solid navy; }
.topmenu li>ul { border-top: 3px solid navy; }
.topmenu li>ul::after { content: '\23F6'; position: absolute; top: -19px; left: .5rem; transform: scale(1.5,2); color: navy; }
.topmenu li>ul ul:after { content: ''; }
.topmenu ul ul { left: 216px; top: 0; }
.topmenu .collapsed, .topmenu .expanded { position: relative; bottom: .1rem; }
.topmenu ul .collapsed a::after, .topmenu ul .expanded a::after { transform: scale(1.3,1); display: inline-block; margin-left: 50px; }
.topmenu ul .collapsed a::after { content: "\23F5"; }
.topmenu ul .expanded a::after { content: "\23F4"; }
.topmenu ul li { margin-bottom: .25rem; }
.topmenu a { display: block; text-decoration: none; color: navy; }
.topmenu ul a { display: block; text-decoration: none; color: black; }
.topmenu a:hover { color: #ff0000; }
.sitedesc { font-size: 2rem; }
.inversebox { width: 75%; }
hr { width: 80%; }
}

/* Desktop layout: >=1280px */															
@media (min-width: 1280px) {
.columns li { width: calc(22% - 1rem); padding: 0 1.3%; }
.inversebox { width: 80%; }
}







/* 3/28/2025 - RPL - today I asked Claude AI to add a banner header button on the right hand side of the banner and it is a blue oval button with "Book A Demo" in white letters inside of it and  */	
/* when clicked it goes to Tidycal to schedule a demo. I got the idea for this from the website breadboard.com at has the same blue oval button. */
/* so below is the code to create the  blue oval button  and the other code to call and display the button is in banner-menu-area.php */   	
/* so below is the start of this  blue oval button  section and it continues for about 30 lines.  */


/* Book a Demo Button Styles */
.demo-button {
  margin-left: auto;
  display: flex;
  align-items: center;
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
}

.book-demo-btn {
  background-color: #4e46e5 !important;
  color: white !important;
  padding: 10px 20px !important;
  border-radius: 9999px !important;
  text-decoration: none !important;
  font-weight: bold !important;
  display: inline-flex !important;
  align-items: center !important;
  transition: background-color 0.3s !important;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2) !important;
}

.book-demo-btn:hover {
  background-color: #4338ca !important;
  text-decoration: none !important;
}

/* Make sure the banner has proper positioning */
.bannersecn {
  position: relative;
  display: flex;
  align-items: center;
}

@media (max-width: 768px) {
  .demo-button {
    position: static;
    margin: 10px auto;
    transform: none;
  }
}


/* 3/28/2025 - RPL - this is the end of the  blue oval button  section  */