/* overriding scrolling bug on IE10+ */
/*however this doesn't seem to allow any scrolling once the entire website was coded */
/*@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none)
{
  html
  { 
    overflow:hidden;
  }
}*/

body
{ /* default font for all pages */
font-family:"Calibri",sans-serif;
font-size:1.15em;
color:#000;
margin:0px;
padding:0px;
border-style:none;
overflow-y:auto; /* overriding scrolling bug on IE and Mobile */
overflow-x:auto; /* overriding scrolling bug on IE and Mobile */
background-color: #f8f7f3;
}

div
{ /* all block elements start with 0 margin, padding, border for spacing defaults */
margin:0px;
padding:0px;
border-style:none;
}

img
{ /* all block elements start with 0 margin, padding, border for spacing defaults */
margin:0px;
padding:0px;
border:0px;
border-style:none;
}

table
{ /* all block elements start with 0 margin, padding, border for spacing defaults */
margin:0px;
padding:0px;
border-spacing:0px;
border-style:none;
}

td
{ /* all block elements start with 0 margin, padding, border for spacing defaults */
margin:0px;
padding:0px;
border-style:none;
}

tr
{ /* all block elements start with 0 margin, padding, border for spacing defaults  */
margin:0px;
padding:0px;
border-style:none;
}

p
{ /* paragaph defaults */
margin:0px;
padding:0px;
border-style:none;
text-indent:2em;
line-height:1.6em;
}

ul
{
margin:0px;
padding:0px;
line-height: 1.6em;
}

a:link
{ /* all links in slate gray bold by default */
margin:0px;
padding:0px;
border-style:none;
color:#5b6770;
font-weight:bold;
text-decoration:none;
}

a:hover
{ /* links grow a little in size on hover and turn green for default */
font-size:1.25em;
color:#144734;
}

a:active
{ /* active link color - overwrite webbrowser default*/
color:#f5e2a4;
}

div.back
{
width:100%;
height:100%;
position:fixed;
top:0px;
left:0px;
border-style:none;
background-size:cover;
background-position: center center;
z-index:-10;
}

div.bg1
{
background-image:url('./images/back1.jpg');
}

div.bg2
{
background-image:url('./images/back2.jpg');
}

div.bg3
{
background-image:url('./images/back3.jpg');
}

div.bg4
{
background-image:url('./images/back4.jpg');
}

div.bg5
{
background-image:url('./images/back5.jpg');
}

div.bg6
{
background-image:url('./images/back6.jpg');
}

div.bg7
{
background-image:url('./images/back7.jpg');
}

div.header-layout
{ 
width:100%;
min-width:815px;
height:163px;
position:fixed;
top:0px;
background:#144734;
color: white;
text-align:center;
box-shadow:none;
z-index:7;
}

img.adventure
{
width:110px;
border-style:none;
position:absolute;
top:25px;
left:35px;
}

div.quicklinks
{
width:200px;
position:absolute;
right:25px;
top:10px;
line-height:125%;
}

div.qlink
{
width:100px;
float:left;
}

div.bookbtn
{
position:absolute;
right:25px;
top:40px;
}

a.book
{
padding:8px;
box-shadow:0px 0px 4px 1px #797979;
}

img.ranchname
{
width:200px;
position:reltative;
top:5px;
}

a.no-grow:hover
{
font-size:1em;
}

.yesmobile
{
display:none;
}

div.mobilemenu
{
display:none;
}

div.headspacer
{
height:163px;
}

a.no-style
{
color:#144734;
font-size:1em;
}

a.no-style:hover
{
color:#5b6770;
font-size:1.1em;
text-decoration:none;
}

a.no-style-small
{
color:#144734;
font-size:1em;
}

a.no-style-small:hover
{
font-size:1em;
text-decoration:underline;
}

a.subnav
{
color:#f8f7f3;
font-size:1em;
}

a.subnav:hover
{
color:#f5e2a4;
font-size:1em;
text-decoration:underline;
}

a.subnavb
{
color:#f8f7f3;
font-size:1em;
}

a.subnavb:hover
{
color:#f5e2a4;
font-size:1em;
text-decoration:underline;
}

a.applink
{
color:#FF0000;
font-size:1.1em;
}

a.applink:hover
{
color:#0000D0;
text-decoration:none;
}

div.navbar
{
width:700px;
min-width:700px;
height:27px;
margin-left:auto;
margin-right:auto;
border-style:none;
position:relative;
top:0px;
z-index:5;
display:table;
}

div.navcell1
{
width:70px;
min-width:70px;
max-width:70px;
display:table-cell;
vertical-align:bottom;
}

div.navcell2
{
width:150px;
min-width:150px;
max-width:150px;
display:table-cell;
vertical-align:bottom;
}

div.navcell3
{
width:170px;
min-width:170px;
max-width:170px;
display:table-cell;
vertical-align:bottom;
}

div.navcell4
{
width:100px;
min-width:100px;
max-width:100px;
display:table-cell;
vertical-align:bottom;
}

div.navcell5
{
width:120px;
min-width:120px;
max-width:120px;
display:table-cell;
vertical-align:bottom;
}

div.navcell6
{
width:90px;
min-width:90px;
max-width:90px;
display:table-cell;
vertical-align:bottom;
}

div.subnavbar
{
border-top:1px solid #000000;
border-left:1px solid #000000;
border-right:1px solid #000000;
position:fixed;
top:163px;
background-color:#144734;
display:none;
z-index:10;
}

div.subnavitem
{
width:auto;
border-bottom:1px solid #000000;
padding:8px;
position:relative;
top:-1px;
background:#144734;
}

div.subnavitem:hover
{
background-image:none;
}

div.msignpost
{
display:none;
}

div.picbar
{
width:100%;
padding-bottom:15px;
background: #f5e2a4;
box-shadow: 0px 4px 4px;
text-align:center;
}

.homeh3
{ /* Basic centered heading stackable */
text-align:center;
font-size:1.5em;
font-weight:bold;
line-height:1.5em;
margin: 0px;
padding-top: 12px;
}

span.feather
{
width:100%;
max-width:1280px;
max-height:500px;
margin-left:auto;
margin-right:auto;
overflow:hidden;
position:relative;
display:inline-block;
color:#f8f7f3;
}

span.feather:after
{
content:"";
position:absolute;
display:block;
top:0;
left:0;
width:100%;
height:100%;
border-collapse:separate;
/*box-shadow: inset 0 60px 40px -20px, inset 0 -60px 40px -20px;*/
box-shadow: inset 0 0 60px 40px;
}

img.largepic
{
width:100%;
max-width:1280px;
height:auto;
}

div.home-flex
{
display: flex;
justify-content: center;
gap: 20px;
}

a.home-btn
{
padding: 5px 10px;
border: none;
border-radius: 4px;
background-color: #144734;
color: #f8f7f3;
text-decoration: none;
font-weight: bold;
font-size: 1em;
}

a.home-btn:hover
{
font-size: 1em;
background-color: #5b6770;
}

div.menu-pic-layout
{
border-style:none;
width:86%;
min-width:700px;
margin-top:50px;
margin-left: 5%;
margin-right: 5%;
padding-left:2%;
padding-right:2%;
padding-top:25px;
padding-bottom:25px;
background:#f8f7f3;
box-shadow:0px 4px 8px 0px;
text-align: center;
}

div.sub-menu
{
width:100%;
text-align:center;
display:table;
}

div.sub-row
{
display:table-row;
}

div.sub-rowspacer
{
height:25px;
}

div.sub-spacera
{
width:5.5%;
display:table-cell;
}

div.sub-spacerb
{
width:15.25%;
display:table-cell;
}

div.sub-item
{
width:25%;
display:table-cell;
}

img.sub-img
{
width:100%;
height:auto;
}

p.link-height
{
text-indent:0px;
height:27px;
}

p.large
{
font-size:1.5em;
}

div.footer
{
border-style:none;
width:86%;
min-width:700px;
margin-top:50px;
padding-left:7%;
padding-right:7%;
padding-top:10px;
padding-bottom:10px;
text-align:center;
background:#5b6770;
color: #f8f7f3;
box-shadow: 0px 0px 8px 3px rgba(0,0,0,0.3);
}

div.footertable
{
width:80%;
display:table;
margin-left:auto;
margin-right:auto;
margin-bottom:15px;
}

div.footerrow
{
display:table-row;
}

div.footercell
{
width:50%;
display:table-cell;
text-align:center;
overflow:visible;
}

img.minimap
{
width:200px;
height:auto;
border:1px solid #0000D0;
}

div.social
{
float:left;
text-align:left;
/*width:265px;
max-width:265px;*/
z-index:1;
}

img.socialimg
{
float:left;
margin-right:5px;
margin-bottom:5px;
}

div.relinks
{
float:right;
text-align:right;
line-height:23px;
z-index:1;
}

div.copyright
{
border-style:none;
font-family:arial,sans-serif;
font-weight:normal;
font-size:0.8em;
color:#f8f7f3;
line-height:175%;
}

div.content-layout
{
border-style:none;
width:100%;
min-width:815px;
position:relative;
}

div.content-flex
{
display: flex;
justify-content: space-evenly;
gap: 20px;
}


div.menu 
{ /* not sure where the name came from, but currently main graphics wrapped in this */
border-style:none;
width:90%;
min-width:815px;
background:#f8f7f3;
margin-top:50px;
box-shadow: 0px 0px 8px 3px;
margin-left: auto;
margin-right: auto;
}

div.text-content
{
border-style:none;
width:100%;
min-width:815px;
position:relative;
margin-top:50px;
z-index:5;
}


/* !!! menus fully functional only edit from here below for content !!! */

div.content-title
{
border-style:none;
width:100%;
min-width:815px;
height:35px;
padding-top:5px;
padding-bottom:5px;
background:#f5e2a4;
box-shadow:0px 0px 8px 3px;
text-align:center;
font-size:1.65em;
font-weight:bold;
position:relative;
z-index:5;
}

div.map-layout
{
border-style:none;
width:90%;
min-width:700px;
margin-top:50px;
margin-left:5%;
margin-right:5%;
padding-top:25px;
padding-bottom:25px;
text-align:center;
background:#f8f7f3;
box-shadow:0px 0px 8px 3px;
}

div.content
{ 
border-style:none;
width:90%;
min-width:815px;
padding-top:15px;
background-color:#f8f7f3;
position:relative;
margin-top:50px;
box-shadow: 0px 4px 8px 0px;
margin-left:auto;
margin-right:auto;
z-index:5;
}

div.offset
{ /* adjust content to fit nicely inside the no longer transparent box */
padding-left:25px;
padding-right:25px;
text-align:left;
position:relative;
top:-5px;
}

h1
{ /* Basic heading larger and bold but no special style less space around*/
font-size:1.25em;
font-weight:bold;
line-height:0px;
}

h2
{ /* Basic centered heading larger and bold but no special style less space around*/
margin:5px;
text-align:center;
font-size:1.5em;
font-weight:bold;
}

h3
{ /* Basic centered heading stackable */
text-align:center;
font-size:1.5em;
font-weight:bold;
line-height:1.5em;
}

h4
{ /* Basic centered heading much larger and bold but no special less space around */
text-align:center;
font-size:1.75em;
font-weight:bold;
line-height:0px;
position:relative;
top:-15px;
}

div.faqcategories
{
text-align:center;
height:60px;
line-height:30px;
overflow:hidden; /* Added missing value */
}

p.indentset
{
margin-bottom:15px;
padding-left:20px;
text-indent:0px;
position:relative;
top:5px;
}

img.toggle
{
vertical-align:middle;
padding-right:5px;
cursor:pointer;
cursor:hand;
}

div.answerdiv
{
margin-left:20px;
margin-right:40px;
margin-bottom:10px;
padding-left:10px;
padding-right:10px;
padding-top:3px;
padding-bottom:5px;
background:rgba(245, 226, 164, 0.3);
line-height:22px;
position:relative;
left:20px;
overflow:hidden;
}

span.superscript
{
position:relative;
top:-5px;
font-size:0.70em;
}

span.subscript
{
position:relative;
top:3px;
font-size:0.70em;
}

div.forcol
{ /* a divder to strech full across to fit specific columns such as 2-col on employment oppotunities and 3-col activities */
border-style:none;
width:100%;
min-width:736px;
vertical-align:top;
}

div.col1
{
padding-left:5px;
border:4px solid #144734;
width:44%;
min-width:328px;
vertical-align:top;
float:left;
}

div.col2
{
border-style:none;
width:50%;
min-width:375px;
float:right;
}

p.hanging
{
text-indent:-25px;
padding-left:25px;
}

img.empimg
{
width:100%
}

div.rightsmallcallout
{
padding:5px 10px;
width: 80%;
background:#f5e2a4;
position: relative; 
right:-20px;
border-radius: 25px;
border:#144734 solid 3px;
}

div.rightsmallcallout:before
{
content:"";
position: absolute;
right: -32px;
bottom: -12px;
width: 40px;
height: 25px;
background:#144734;
border-radius: 0px 0px 100% 0px;
transform: rotate(30deg)
;}

div.leftsmallcallout
{
padding:5px 10px;
width: 80%;
background:#f5e2a4;
position: relative; 
left:20px;
border-radius: 25px;
border:#144734 solid 3px;	
}

div.leftsmallcallout:before
{
content:"";
position: absolute;
left: -32px;
bottom: -12px;
width: 40px;
height: 25px;
background:#144734;
border-radius: 0px 0px 0px 100%;
transform: rotate(-30deg);
}

div.rightcallout
{
padding:5px 10px;
width: 90%;
background:#f5e2a4;
position: relative; 
right:-20px;
border-radius: 25px;
border:#144734 solid 3px;
}

div.rightcallout:before
{
content:"";
position: absolute;
right: -32px;
bottom: -12px;
width: 40px;
height: 25px;
background:#144734;
border-radius: 0px 0px 100% 0px;
transform: rotate(30deg)
;}

div.leftcallout
{
padding:5px 10px;
width: 90%;
background:#f5e2a4;
position: relative; 
left:20px;
border-radius: 25px;
border:#144734 solid 3px;	
}

div.leftcallout:before
{
content:"";
position: absolute;
left: -32px;
bottom: -12px;
width: 40px;
height: 25px;
background:#144734;
border-radius: 0px 0px 0px 100%;
transform: rotate(-30deg);
}

img.pgthumb
{
border-style:solid;
border-width:3px;
border-color:#f5e2a4;
margin:5px;
width:150px;
height:113px;
cursor:pointer;
cursor:hand;
}

div.vidwithcap
{
width:300px;
text-align:center;
font-weight:bold;
font-size:0.8em;
float:left;
margin:15px;
}

img.vidthumb
{
border-style:solid;
border-width:3px;
border-color:#f5e2a4;
margin-bottom:5px;
width:300px;
height:169px;
cursor:pointer;
cursor:hand;
}

div.viewer
{ /* the space for the individual picture and a close button, caption, perhaps left and right buttons */
width:100%;
height:100%;
position:fixed;
z-index:10;
text-align:center;
}

div.galleryblack
{ /* semi-transparent slate gray background on whole page when viewing individual picture */
width:100%;
height:100%;
position:fixed;
background-color:#5b6770;
opacity:0.5;
filter:Alpha(opacity=50); /* IE8 and earlier */
z-index:9;
}

div.centerup
{
position:relative;
top:-15px;
text-align:center;
}

input.button
{
background-color:#f5e2a4;
height:25px;
border:2px outset #5b6770;
font-weight:bold;
}

input.button:focus {
  outline: 2px solid #144734;
}

input[type="radio"]:focus {
  outline: 2px solid #144734;
}

input[type="textarea"]:focus {
  outline: 2px solid #144734;
}

div.threecol
{ /* three even columns for Activities list */
position:relative;
width:33%;
}

img.actlable
{ /* label images */
vertical-align:bottom;
}

img.golfhole
{ /* smaller label images */
vertical-align:text-bottom;
}

ul.activity
{ /* setup actuvities as lists */
list-style-type:none;
}

img.mixedthumb
{
width:95%;
cursor:pointer;
cursor:hand;
visibility:visible;
}

img.mixedphoto
{
width:95%;
margin-top:15px;
margin-bottom:10px;
}

div.outerpopup
{
width:100%;
position:fixed;
top:0px;
text-align:center;
display:none;
z-index:10;
}

div.popup
{
width:400px;
height:300px;
position:relative;
margin-left:auto;
margin-right:auto;
z-index:10;
}

img.popupimg
{
width:400px;
height:300px;
box-shadow:0px 0px 8px 3px;
}

div.popuptitle
{
background-color:#FFFFFF;
font-size:1.25em;
font-weight:bold;
width:400px;
position:relative;
margin-left:auto;
margin-right:auto;
z-index:11;
text-align:center;
}

img.prevnavbtn
{
cursor:pointer;
cursor:hand;
display:block;
}

img.nextnavbtn
{
cursor:pointer;
cursor:hand;
display:block;
}

ul.merchandise
{ /* setup merchandise as lists */
padding-left:25px;
line-height: 1.6em;
}

ul.merchandise li::marker {
  content: "◈  ";
}

ul.merchandise li ul {
  padding-left: 20px;
  font-size: 0.85em;
}

ul.merchandise li ul li::marker {
  content: "•  ";
}

div.foodmenu
{
width:70%;
position:relative;
margin-left:auto;
margin-right:auto;
display:table;
}

div.menurow
{
display:table-row;
}

div.meal
{
vertical-align:top;
display:table-cell;
}

div.mealdesc
{
vertical-align:top;
display:table-cell;
}

img.floorplan
{
width:90%;
}

div.forformcol
{
width:100%;
min-width:680px;
display:table;
}

div.forformrow
{
display:flex;
}

div.formcolfull
{
width:100%;
display:table-cell;
}

div.formcol1
{
padding-right:5px;
width:48%;
min-width:330px;
display:table-cell;
}

div.formcol2
{
padding-left:5px;
width:48%;
min-width:330px;
display:table-cell;
}

label.required
{
width:45%;
min-width:140px;
float:left;
text-align:right;
margin-top:10px;
margin-right:10px;
font-weight:bold;
}

label.optional
{
width:45%;
min-width:140px;
float:left;
text-align:right;
margin-top:10px;
margin-right:10px;
font-weight:normal;
}

input.textline
{
width:45%;
min-width:150px;
margin-top:10px;
padding:3px;
border:1px solid #000000;
box-shadow:0px 1px 2px #000000 inset;
}

input.textline:focus {
  outline: 2px solid #144734;
}

p.right
{
text-align:right;
}

select.selectline
{
width:45%;
min-width:158px;
margin-top:10px;
padding:3px;
border:1px solid #000000;
box-shadow:0px 1px 2px #000000 inset;
}

div.eitheror
{
width:99%;
min-width:325px;
margin-top:15px;
float:right;
}

textarea.fullbox
{
width:99%;
min-width:645px;
margin-top:10px;
padding:3px;
border:1px solid #000000;
box-shadow:0px 1px 2px #000000 inset;
}

textarea.fullbox:focus {
  outline: 2px solid #144734;
}

textarea.halfbox
{
width:99%;
min-width:315px;
margin-top:10px;
padding:3px;
border:1px solid #000000;
box-shadow:0px 1px 2px #000000 inset;
}

textarea.halfbox:focus {
  outline: 2px solid #144734;
}

div.centerbutton
{
text-align:center;
padding-top:5px;
padding-bottom:10px;
}

div.listinstructions
{
width:180px;
float:right;
position:relative;
top:5px;
}

div.samplelist
{
width:150px;
}

ul.nobullet
{
list-style-type:none;
}

div.video
{
width:100%;
text-align:center;
}

video.html5vid
{
width:80%;
}

p.longtext
{
padding-bottom:10px;
}

ul.longtext
{
padding-bottom:10px;
padding-left:25px;
}

span.footnote
{
background:rgba(245, 226, 164, 0.8);
cursor:default;
}

div.surveycol
{
width:33%;
padding-bottom:7px;
}

div.surveytwocol
{
width:448px;
padding-bottom:7px;
}

ul.survey
{
list-style-type:none;
position:relative;
left:25px;
}

li.surveyitem
{
font-weight:normal;
}

li.surveyitemh
{
font-weight:bold;
}

li.tweaksurvey
{
font-size:0.9em;
font-weight:normal;
}

li.tweaksurveyh
{
font-size:0.8em;
font-weight:bold;
}

ul.scale
{
list-style-type:none;
position:relative;
left:25px;
top:4px;
}

li.scaleitem
{
display:inline;
padding-right:10px;
}

li.scaleitemh
{
display:inline;
padding-right:10px;
font-weight:bold;
}

span.blankline
{
text-decoration:underline;
}

hr
{
height:3px;
background-color:#f5e2a4;
}

div.forcalccols
{
width:680px;
text-align:center;
display:table;
}

div.forcalcrows1
{
display:table-row;
}

div.forcalcrows2
{
display:table-row;
}

div.forcalcrows3
{
display:none;
}

div.calccell
{
display:table-cell;
}

div.calccellnull
{
display:table-cell;
}

select.costselect1
{
width:95px;
padding:3px;
margin:2px 0px;
border:1px solid #000000;
box-shadow:0px 1px 2px #000000 inset;
}

select.costselect2
{
width:35px;
padding:3px;
margin:2px 0px;
border:1px solid #000000;
box-shadow:0px 1px 2px #000000 inset;
}

table.costtable
{
padding:10px;
}

td.agecell
{
width:130px;
}

td.pricecell
{
width:110px;
text-align:right;
}

div.expander
{
border-style:none;
font-size:1em;
color:#144734;
font-weight:bold;
}

p.treeset
{
padding-left:20px;
text-indent:0px;
color:#144734;
cursor:pointer;
cursor:hand;
margin-top:5px;
margin-bottom:10px;
}

p.padsign
{
padding:8px;
text-indent:0px;
}

div.halfspace
{
height:0.5em;
}

div.thumbpic
{
width:175px;
position: relative;
flex: 1 0 175px;
text-align:center;
}

div.navimg
{
width:22px;
}

div.largepic
{
width:425px;
position: relative;
flex: 3 0 425px;
text-align:center;
}

div.tablecenter
{
height:100%;
width:100%;
display:table;
}

div.cellcenter
{
width:100%;
height:100%;
display:table-cell;
vertical-align:middle;
}

div.cellpcenter
{
width:100%;
height:100%;
display:table-cell;
text-align:center;
text-indent:0px;
}

p.clearfloat
{
clear:both;
visibility:hidden;
}

p.noindent
{
text-indent:0px;
}

.eighty
{
width:80%;
margin-left:auto;
margin-right:auto;
}


.flex-container
{
display: flex;
}

.flex-nomobile
{
display: flex;
}

.leftalign
{
text-align:left;
}

.tweakdown
{
position:relative;
top:5px;
}

.aylvid
{
width:537px;
max-width:100%;
height:330px;
}

.leftwrap
{
margin-right:15px;
margin-bottom:15px;
width:15%;
float:left;
}

.rightwrap
{
margin-left:15px;
margin-bottom:15px;
width:36%;
float:right;
}

.center
{
text-align:center;
text-indent:0px;
}

p.error
{
color:#FF0000;
}

img.halfsizeimg
{
width:50%;
height:auto;
}

p.front-look
{
text-indent:0px;
line-height:27px;
}

/* Chat Button */
.chat-button {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 65px;
  height: 70px;
  background: url('./images/contactbtn.svg') no-repeat center center;
  background-size: contain;
  border: none;
  cursor: pointer;
  z-index: 1000;
  filter: drop-shadow(0px 3px 4px rgba(0, 0, 0, 0.75));
}

.chat-button:hover {
  filter: saturate(200%) drop-shadow(0px 3px 4px rgba(0, 0, 0, 1));
}

/* Chatbox */
.chatbox {
  position: fixed;
  bottom: 90px;
  right: 20px;
  width: 300px;
  max-width: 90%;
  background-color: #f8f7f3;
  border: 2px solid #000;
  border-radius: 10px;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
  display: none;
  flex-direction: column;
  z-index: 1000;
}

.chatbox-header {
  background-color: #144734;
  padding: 10px;
  font-weight: bold;
  text-align: center;
  border-bottom: 2px solid #000;
  border-radius: 10px 10px 0 0;
}

.chatbox-messages {
  padding: 10px;
  height: 200px;
  overflow-y: auto;
}

/* User Message */
.chatbox-messages .user-message {
  background-color: #144734;;
  color: #FFFFFF;
  max-width: 70%;
  padding: 15px;
  border-radius: 15px;
  align-self: flex-end;
  text-align: right;
  margin-top: 5px;
  margin-bottom: 5px;
  margin-left: auto; /* Align to the right */
}

/* PHP Response */
.chatbox-messages .bot-response {
  background-color: rgba(245, 226, 164, 0.6);
  color: #000000;
  max-width: 70%;
  padding: 15px;
  border-radius: 15px;
  align-self: flex-start;
  text-align: left;
  margin-right: auto; /* Align to the left */
}

.chatbox-input {
  display: flex;
  border-top: 2px solid #000;
  border-radius: 0 0 0 10px;
}

.chatbox-input input {
  flex: 1;
  padding: 10px;
  border: none;
  border-right: 2px solid #000;
  border-radius: 0 0 0 10px;
}

.chatbox-input input:focus {
  outline: 4px solid #144734;
  box-shadow: 0 0 5px #000
}

.chatbox-input button {
  padding: 10px;
  background-color: #f5e2a4;
  border: none;
  cursor: pointer;
  border-radius: 0 0 10px 0;
}

.chatbox-input button:hover {
  filter: saturate(200%)
}

a.footer-apple {
  color:#f8f7f3;
  font-size:0.9em;
  text-decoration:none;
}

a.footer-apple:hover {
  color:#f8f7f3;
  text-decoration:underline;
}