body { 
background-color: #000000; 
font-family: Arial, Verdana, sans-serif; 
font-size: 100%; 
color: #008b72;


    margin: 0px auto;
    text-align: center;



}








/*  below I changed 59em to 49em Jan8th2025-changed-from-79em-to-59-and-it-looked-worse.. */

/*body	{ width:auto; max-width:89em; margin:0 auto; border:0px solid black; border-top:none;  padding:0em; }  */



a { font-family: Arial, Verdana, sans-serif; font-size: 100%; color: #B0B0B0; text-decoration: underline}

/*a:hover { font-family: Arial, Verdana, sans-serif; font-size: 100%; color: #A52A2A; background-color: #FFD700}*/


.white-link {
        color: #ffffff !important;
        text-decoration: none;
    }
    .white-link:hover {
        color: #60a5fa;
    }




h1 {
    font-family: 'Arial Black', 'Helvetica Neue', sans-serif;
    font-size: 44px;
    font-weight: 900;
    color: #ffffff;
    text-align: center;
    text-shadow: 
        0 2px 4px rgba(0,0,0,0.9),
        0 0 15px #10b981,
        0 0 30px rgba(16,185,129,0.5);
}












h2 { font-family: Arial, Verdana, sans-serif; font-size: 24px; color: #FFFFFF}
h3 { font-family: Arial, Verdana, sans-serif; font-size: 24px; color: #F5F5F5 }


h4 { font-family: Arial, Verdana, sans-serif; font-size: 24px; color: #F5F5F5;text-align:center; text-decoration: underline; max-width:80%; }



hr{ color:brown; background-color:tan; width:90%; height:2px; } 

table {
font-family: Arial, Verdana, sans-serif;
font-size: 108%;
color: #008b72;


padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;




/*
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
img{display: block;
float:top;
display:inline-block;}

*/





button5 {background-color: #555555;} /* Black */

/*  /td:nowrap;
//td nowrap;
//white-space:nowrap;  */
}

th {
white-space:nowrap;
}

/*table{max-width:79em;}      changed this from 59em to 49me*/


/*
table {
    max-width: 100% !important;
    width: 100% !important;
 
}
*/





/*img {    display:block;    max-width:95%;    max-height:480px;}*/


/*
img{
     display: block;
     float:top;
     display:inline-block;
width:95%;
}
*/


.note {
font-family: Arial, Verdana, sans-serif;
font-size: 14px;
color: purple;
font-weight: bold;
} 

.note {
font-family: Arial, Verdana, sans-serif;
font-size: 14px;
color: purple;
font-weight: bold;
}


<style type="text/css">
a:link {
 color: #0000ff;
}

a:visited {
 color: #ffffff;
}

a { 
  position: relative;
}

a:active {
  top: 0px;
}



a:hover { color: #ff0000; text-decoration: none;}
a:active { color: #777777;}


/*a:link {text-decoration: none;*/
/*color: red;}*/

a:visited {text-decoration: none;color: red;}



a { text-decoration: none }
a:visited { color: #e7acac }
a:hover { text-decoration: underline; color: yellow}
/*.alt Links a:visited { color: red }*/




/*a:hover {text-decoration: none;color: yellow;}*/

a:link img{border-color: white;
border-width: 0px;
}

a:visited img{border-color: #e7acac;
border-width: 0px;
}





a:hover img{border-color: blue;
border-width: 0px;
}


div.Leaf {
   height: 25px;
}



 
//div.Leaf a, div.Leaf a:link, div.Leaf a:visited {
//  
 //   border-style: dashed;
//}
 
div.Leaf img {
    width:100%;
    height:93px;
    border-style: solid;
}
 


div.dog img{
position: relative;
left:20px;
top:-20px;
border:none;
border-style: none;
}


/*
div.Leafed {
   height: 105px;
}
*/

div.doged img {
    width:60px;
   height:60px;
   border-style: none;
}


/*
div.Leafed img {
 display: inline-block;
width:100%;
height:120px;
border-style:solid;
margin-top: -10px; 
    margin-right: +0px; 
}
*/



div.Leafed img {
width:160px;
height:120px;
border-style:solid;
}







/*
div.doged img {
 display: inline-block;
position: relative;
left:20px;
top:-80px;
border:none;
border-style: none;
margin-top: -10px; 
    margin-right: +0px; 
}
*/

/*
  display: inline-block;
    width: 40%;
    height: 30%;
    border: 0px white solid;
    background: white;   
    vertical-align:middle;
    position: absolute;
    margin-top: -100px; 
    margin-right: +0px; 
left:89px;
*/


.doged img {
    display: inline-block;
    width: 40%;
    height: 30%;
    border: 0px white solid;
    background:opaque;   
    vertical-align:middle;
    position: absolute;
    margin-top: -100px; 
    margin-right: +0px; 
left:89px;
 
   border-style: none;
}


div.d img{
display: inline-block;
position: relative;
left:20px;
top:-20px;
border:none;
border-style: none;
margin-top: -10px; 
    margin-right: +0px; 
}


div.d img {
    width:60px;
   height:60px;
   border-style: none;
}





div.L {
   height: 45px;
}





div.dd img {
    width:60px;
   height:60px;
   border-style: none;
}



.imgdivstyle{
	
	border-style:none;
	width:160px;
   height:350px;
   column-width:160;
}




.22Golspie22 img {

    width:160px;
  /* height:180px;*/
   
   /* 	display:flex; 
   border-style: none;
   text-align:center;
  justify-content:center;
  align-items:center;
  justify-self:center;
  align-self:center;
  border:5px solid #000111;*/
}

.2Golspie2 img {

    width:360px;
   height:180px;
   
   /* 	display:flex; 
   border-style: none;
   text-align:center;
  justify-content:center;
  align-items:center;
  justify-self:center;
  align-self:center;
  border:5px solid #000111;*/
}


    
.Golspie img {
/* 	display:flex; */
    width:230px;
   height:460px;
 /*  border-style: none;
   text-align:center;
  justify-content:center;
  align-items:center;
  justify-self:center;
  align-self:center;
  border:5px solid #000111;
  */
}


p.golspietext { 
  background: black;
  text-align:center;
  width:550px;
  font-size:24px;
}

/*p.golspietextmain {*/
p.gtm{ 
  background: black;
  /*text-align:center;*/
  width:550px;
  font-size:18px;
}

p.golspietext2 { 
  background: black;
  text-align:bottom;
  width:250px;
  height:200px;
  font-size:24px;
  border:10px solid #000111;
 /* display:inline;*/
}


p.golspietext3 { 
  background: black;
  text-align:top;
  width:250px;
  height:200px;
  font-size:24px;
  border:10px solid #000111;
 /* display:inline;*/
}



#happy{
	
display:table;	
	
}



#statement {
    position: absolute;
    height: 800px;
    width: 800px;
	display:table-cell;
}

#solution {
    position: absolute;
    height: 400px;
    width: 400px;
	display:table-cell;
}




/*
<div style="display:table">
        <div id="statement" style="display:table-cell">...</div>
        <div id="solution" style="display:table-cell">...</div>
</div>





.combtxtimg {
	
  display:table;
   <div id="statement" style="display:table-cell">...</div>
        <div id="solution" style="display:table-cell">...</div>


}
*/










.3Golspie3{
/* 	

 justify-content:center;

 width:60px;
   height:20px;
   border-style: none;
   
  
  align-items:center;
  
  align-self:center;
  font-family: Arial, Verdana, sans-serif;
  font-size: 24px;
  color: #F5F5F5; border:5px solid #000111;text-align:center;
*/
   display:flex; 
  justify-self:center;
}






/*”border:5px solid #000000; padding:3px; margin:5px”*/


div.L img {
width:160px;
height:120px;
border-style:solid;
}

div.LL img {
width:160px;
height:120px;
border-style:solid;
}

div.d img {
    position: relative;
left:20px;
top:-30px;
border:none;
border-style: none;
}



div.ddd img {
position: relative;
left:0px;
top:-80px;
border:none;
border-style: none;
}








div.dg img{
position: relative;
left:20px;
top:-20px;
border:none;
border-style: none;
}




.dd{
    display: inline-block;
    width: 40%;
    height: 30%;
    border: 0px white solid;
    background: opaque;   
    vertical-align:middle;
    position: absolute;
    margin-top: -100px; 
    margin-right: +0px; 
left:89px;
}



div.Lf {
   height: 295px;
}


div.dg img {
    width:60px;
   height:60px;
   border-style: none;
}


div.dog img {
  display: inline-block;
    width:60px;
   height:60px;
   border-style: none;
margin-top: -20px; 
    margin-right: +0px; 
top:20px;
}




div.Lf img {
width:100%;
height:360px;
border-style:solid;
}


div.dg img {
position: relative;
left:20px;
top:-220px;
border:none;
border-style: none;
}




div.hellow img{
max-width:125px;
min-width:55px;
}


div.hello img{
max-width:95px;
min-width:45px;
}



div.dong img{
position: relative;
left:20px;
top:0px;
border:none;
border-style: none;
}



div.Long {
   height: 30px;
}


div.dong img {
    width:40px;
   height:40px;
   border-style: none;
}



div.Long img {
width:100%;
height:65px;
border-style:solid;
}


div.dong img {
position: relative;
left:20px;
top:-20px;
border:none;
border-style: none;
}



#pos_fixed{
z-index: 1;
position:fixed;
top:0px;
//right:0px;
left:10px;
width:100%
}


#pos_fixed{
font-size:85%;
background-color:black;
}




#pos_fixed2{
z-index: 100;
position:fixed;
top:10px;
//right:0px;
left:245px;
width:100%
font-size:85%;
background-color:black;
}


#pos_fixed222{
z-index: 200px;
position:fixed;
font-size: 65%;
line-height: 1.625;
top:1px;
//right:0px;
//left:90px;
width:10%

background-color:black;
}


#pos_fixed22{
font-size:75%;
background-color:black;
}

#pos_fixed02{
z-index:12px;
position:fixed;
top:185px;
right:190px; //this was 80px I changed it on the 17th and then again to 5px
//width:10%;
width: 10px;
//display: block;
//display:inline-block;
//white-space: nowrap; 
display: flex;
  flex-direction: column;
  align-items: flex-start;



}


/*
//#pos_fixed02{
//z-index:12px;
//position:fixed;
//top:185px;
//right:30px;
//width:10%

//}

*/

#pos_fixed0002{
z-index:12px;
position:fixed;
top:40px;
right:40px;
width:10%

}





.left{
    background-image: url("http://www.childrens-shelves.co.uk/images/bd01.png");
}

.right{
    background-image: url("http://www.bookshelving.co.uk/images/bu01.png");
}



.left:focus {
    outline:0
    }

.right:focus {
    outline:0
    }



.hidden { display: none; }



.hide{
   display:none;
}







button{
	/* background styles */
	position: relative;
	display: inline-block;
	padding: 3px 6px;
	/*background-color: green; for compatibility with older browsers*/
	background-color: #4CAF50;
	background-image: linear-gradient(green,lightgreen);

	/* text styles */
	text-decoration: none;
	color: #fff;
	font-size: 15px;
	font-family: sans-serif;
	font-weight: 100%;
}

button:after{
	content: '';
	position: absolute;
	top: 2px;
	left: 2px;
	width: calc(100% - 4px);
	height: 50%;
	background: linear-gradient(rgba(255,255,255,0.8), rgba(255,255,255,0.2));
}

button:hover{
	background: linear-gradient(#073,#0fa);
}

button5{
        background-color: #555555;
    } /* Black */





.classsideimages{
padding:0px 0px;
background-image:black;
color:black;
background-color: Transparent;
    background-repeat:no-repeat;
    border: none;
    cursor:pointer;
    overflow: hidden;
width: calc(100% - 14px);
}







#table1 td{
background-color:black;
font-color:black;
}
a:active { 
color: black;
}
button{
color: black;
}




div.parent{ 
    border:solid white 1px;
    display:table;
    padding:5px; 
    width:90%;
    margin:5px 0; /* you can change/remove margin */
}
div.text{ 
    vertical-align:middle;
    display:table-cell;
    text-align:justify;
}
div.parent .img{
    vertical-align:middle;
    display:table-cell;
    padding-right:5px;
    width:50px; /* you can change width */
 
}
div.img imgg{ 
    width:90%;
    height:50px; /* you can change height */
    vertical-align:middle;
 


}
​



/*

.freecontactform {
width: 490px;
font-family: arial;

border: 2px solid #FFF;

padding:10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
.freecontactformheader {
font-size:22px;
font-weight:bold;
padding-top:10px;
padding-bottom:10px;
text-align:center;
border: 4px white solid;
}
.freecontactformmessage {
text-align:center;
padding-bottom:10px;

}
.freecontactform td {
padding:4px;
font-size:18px;
color: white;

}
.freecontactform p {
padding:4px;
border: 2px white solid;
}
.freecontactform label {
padding:4px;
}
.freecontactform label {
padding-right:10px
}
.required {
font-weight:bold;
}
.required_star {
font-weight:bold;
color:#F00;
}
.not-required {
font-weight:normal
}
.antispammessage {
padding:10px;
border-top:2px solid #FFF;

font-weight:bold 
}
.antispamquestion {
font-weight:normal;
border: 2px white solid;
}

*/

#bank{
text-align:left;
align-content: left;

}




/* 
table {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box;
}



/*

@media (max-width: 668px) {
    table {
        max-width: 100% !important;
        padding: 0 5px;
    }
}







@media (max-width: 768px) {
    body, html, table, td, div, .classheader, .green-nav-container {
        max-width: 100% !important;
        width: 100% !important;
        margin: 0 auto !important;
        padding-left: 5px !important;
        padding-right: 5px !important;
        box-sizing: border-box !important;
    }
    
    table {
        width: 100% !important;
    }
}
*/


/*



@media (max-width: 768px) {
    table,
    .responsive-table {
        max-width: 100%;
        width: 100%;
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch; /* Smoother scrolling on iOS 
    }
}


*/


/*
@media (max-width: 668px) {
    .mobile-full-width {
        max-width: 90% !important;
        width: 100% !important;
        display: block;
        overflow-x: auto;
    }
}


@media (max-width: 768px) {
    table,
    .mobile-full-width {
        max-width: 90% !important;
        width: 100% !important;
        display: block;
        overflow-x: auto;
    }
}










@media (max-width: 1024px) {
    body {
        max-width: 100% !important;
        width: 100% !important;
    }

    table {
        max-width: 100% !important;
        width: 100% !important;
        display: block;
        overflow-x: auto;
    }
}


   @media (max-width: 900px) {
    body {
        max-width: 100% !important;
        width: 100% !important;
    }

    table {
        max-width: 100% !important;
        width: 100% !important;
        display: block;
        overflow-x: auto;
    }
}

/* Main container - keeps everything aligned 
.container {
    max-width: 1200px;       
    margin: 0 auto;          
    width: 100%;
    padding: 0 20px;         
    box-sizing: border-box;
}

/* Make tables respect the container on mobile 
@media (max-width: 900px) {
    .container,
    table {
        max-width: 100%;
        width: 100%;
        padding: 0 10px;
    }

    table {
        display: block;
        overflow-x: auto;
    }
}






*/




/*
@media (max-width: 900px) {

   
    body {
        background-color: #ff0000 !important;  
        border: 8px solid lime !important;     
    }

    
    body, table {
        max-width: 90% !important;
        width: 90% !important;
    }






.center-row td {
    text-align: center;      
    vertical-align: middle;   
}
}
@media (max-width: 900px) {
    body {
        background-color: red !important;
    }
    
     Make the yellow bar stand out more 
    * {
        outline: 2px solid blue !important;
    }
	
	
	.responsive-image {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;         
	
	
	}
	
	
}
	
	
	.container {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 0 15px;       
}
	


body {
    margin: 0;
    padding: 0;
    width: 100%;
    max-width: 100%;
}


	
	
	
body {
    background-color: #000000;
    font-family: Arial, Verdana, sans-serif;
    font-size: 100%;
    color: #008b72;
    margin: 0;              
    padding: 0;
    width: 100%;
    max-width: 100%;
    text-align: left;      
}	
	
	
	
	
	

	
@media (max-width: 768px) and (orientation: portrait) {
	
	
		.container {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 0 15px;       
}

body {
    margin: 0;
    padding: 0;
    width: 100%;
    max-width: 100%;
}


body {
    background-color: #000000;
    font-family: Arial, Verdana, sans-serif;
    font-size: 100%;
    color: #008b72;
    margin: 0;             
    padding: 0;
    width: 100%;
    max-width: 100%;
    text-align: left;      
}
	
	
	
	
	body {
        background-color: green !important;
    }

border: none !important;
background-color: transparent !important;

	
    table.mobile-full-width {
        width: 100% !important;
        max-width: 100% !important;
        display: block;
       overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}	
	



.top-banner {
    width: 100%;
    background: #000;
    padding: 10px 0;
}

.top-banner-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 600px;
    margin: 0 auto;
    padding: 0 15px;
    gap: 20px;
    flex-wrap: wrap;
}

.top-banner-left,
.top-banner-right {
    flex: 0 0 auto;
}

.top-banner-center {
    flex: 1;
    text-align: center;
    min-width: 200px;
}
}

@media (max-width: 768px) {
    .top-banner-inner {
        flex-direction: column;
        gap: 15px;
    }
    
    .top-banner-center {
        order: -1; 
    }
}








@media (max-width: 900px) {
    body, 
    html {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
		background-color: red !important;
    }

    .container, 
    table, 
    div[style*="max-width"], 
    div[style*="width"] {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 10px !important;
        box-sizing: border-box;
    }

  
    table {
        width: 100% !important;
        max-width: 100% !important;
        display: block;
        overflow-x: auto;
    }
}


@media (max-width: 800px) {
    body, 
    html {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
		background-color: red !important;
    }

    .container, 
    table, 
    div[style*="max-width"], 
    div[style*="width"] {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 10px !important;
        box-sizing: border-box;
    }

  
    table {
        width: 100% !important;
        max-width: 100% !important;
        display: block;
        overflow-x: auto;
    }
	body {
        background-color: green !important;
    }
}


@media (max-width: 700px) {
    body, 
    html {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
		
    }

    .container, 
    table, 
    div[style*="max-width"], 
    div[style*="width"] {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 10px !important;
        box-sizing: border-box;
    }

  
    table {
        width: 100% !important;
        max-width: 100% !important;
        display: block;
        overflow-x: auto;
    }
	body {
        background-color: blue !important;
    }
}



*/











/*

@media (max-width: 900px) {

    html, body {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box;
        overflow-x: hidden;          
    }

    .container,
    table,
    div {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        padding: 0 15px !important;
        box-sizing: border-box;
    }

   
    table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;         
    }

}









@media (max-width: 900px) {

    html, body {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box;
        overflow-x: hidden;         
    }

    .container,
    table,
    div {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        padding: 0 15px !important;
        box-sizing: border-box;
    }

    table {
        display: block;
        overflow-x: auto;
    }

}







.table-wrapper {
    text-align: center;   
    margin: 0 auto;         
  width: fit-content;
}




.table-wrapper table {
    margin: 0 auto;            
}

*/



/*
table, .table-wrapper {
    float: none !important;        
    width: auto !important;           
    margin-left: auto !important;
    margin-right: auto !important;
}






.container {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
}

.table-wrapper {
    text-align: center;
    width: fit-content;
    margin: 20px auto;           
}

.table-wrapper table {
    display: inline-table;
    margin: 0 auto;
}











body {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.table-wrapper {
    width: fit-content;
    margin: 20px 0;
}

.table-wrapper table {
    margin: 0 auto;
}

*/





















/*
.table-wrapper {
    text-align: center;
    width: fit-content;
    margin: 20px auto;
}

.table-wrapper table {
    display: inline-table;
    margin: 0 auto;
}



.table-wrapper {
    width: fit-content;
    margin: 20px auto !important;
}

.table-wrapper table {
    margin: 0 auto !important;
    width: auto !important;
}






.container {
    max-width: 1200px;
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.table-wrapper {
    width: fit-content;
    margin: 20px 0;
}

.table-wrapper table {
    margin: 0 auto;
}






td, th {
    vertical-align: top !important;
}




.table-wrapper td,
.table-wrapper th {
    vertical-align: top !important;
	line-height: normal !important;
}



.container {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
   
}

.table-wrapper {
    width: fit-content !important;
   
}

.table-wrapper table {
    margin: 0 auto !important;
}




.table-wrapper table {
    margin: 0 auto !important;
    width: auto !important;
}







.table-wrapper td.col-13 {
    width: 23% !important;
}

.table-wrapper td.col-20 {
    width: 40% !important;
}

.table-wrapper td.col-25 {
    width: 25% !important;
}

.table-wrapper td.col-33 {
    width: 33.33% !important;
}

.table-wrapper td.col-50 {
    width: 95% !important;
}


.table-wrapper td {
    vertical-align: top;
}





.table-wrapper {
    margin: 20px auto !important;
    width: fit-content !important;
}

.table-wrapper table {
    margin: 0 auto !important;
    width: auto !important;
}


.table-wrapper td,
.table-wrapper th {
    vertical-align: top !important;
}

*/








/*




body {
    outline: 4px solid red !important;  
}






body {
    margin: 0 !important;           
    padding: 0 !important;
}

.container {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto !important;     
    padding: 0 20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
}



.container,
.table-wrapper,
.table-wrapper table {
    margin-left: auto !important;
    margin-right: auto !important;
    width: auto !important;
    max-width: none !important;
}







body {
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
    width: 100% !important;
    max-width: 100% !important;
}











@media (max-width: 900px) {
    .table-wrapper table {
        display: block !important;
        overflow-x: auto !important;
        white-space: nowrap;      
        width: 100% !important;
        max-width: 100% !important;
    }
}





@media (max-width: 900px) {
    .table-wrapper {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch; 
    }

    .table-wrapper table {
        width: auto !important;
        min-width: 100% !important;  
        display: table !important;   
        white-space: nowrap;
    }
}






@media (max-width: 900px) {

    .table-wrapper {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        width: 100% !important;
        max-width: 100% !important;
    }

    .table-wrapper table {
        width: auto !important;
        min-width: 1200px !important;     
        display: table !important;
        white-space: nowrap;
        table-layout: auto !important;
    }

}









@media (max-width: 900px) {

   
    .table-wrapper {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        width: 100% !important;
    }

    .table-wrapper table {
        width: auto !important;
        min-width: 1400px !important;   
        display: table !important;
       
    }
	
	

    body {
        border-right: 5px solid red !important;
        border-left: none !important;
    }
}	
	
	
	

}

body {
    border-left: none !important;    
    border-right: 4px solid red !important;   
}


*/



/*
body {
        background-color: blue !important;
    }
	*/





/* === Container === */
.container {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 15px;
}

/* === Table Wrapper (controls spacing around the table) === */
.table-wrapper {
    width: fit-content !important;
    margin: 15px auto !important;   /* ← Reduce this number to reduce spacing */
	/*white-space: wrap;*/
}

/* === The Table itself === */
.table-wrapper table {
    margin: 0 auto !important;
    width: auto !important;
}

/* === Column widths === */
.table-wrapper td.col-13 { width: 13% !important; }
.table-wrapper td.col-20 { width: 40% !important; }
.table-wrapper td.col-25 { width: 25% !important; }
.table-wrapper td.col-33 { width: 33.33% !important; }
.table-wrapper td.col-50 { width: 95% !important; }


.table-wrapper td,
.table-wrapper th {
    vertical-align: top !important;
}







/* Target only the green button section */
.table-wrapper table tr td > div {
    display: flex !important;
    flex-wrap: wrap !important;           /* Makes buttons wrap to new lines */
    justify-content: center !important;   /* Centers the buttons */
    gap: 8px !important;                  /* Nice spacing between buttons */
    width: 100% !important;
}

/* Ensures the buttons themselves can wrap nicely */
.table-wrapper table tr td > div .nav-button {
    flex: 0 0 auto !important;
    white-space: nowrap;
    margin: 4px !important;
}
























</style>