body {
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
} 
 body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	font-family: arial, sans-serif;
	font-size: 14px;
	text-align: left;
}

body {
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}
body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	font-family: arial, sans-serif;
	font-size: 14px;
	text-align: left;
}
   
html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}

.mainmenu {
    width: 810px; 
    padding: 0px;
    border: 0px;
    border-spacing:0px;
    border-collapse:collapse;
}

.warn  {    
border: solid 2px red;
background-color: #F7F7F7;
} 

.navbar {
	width: 87px;
	height: 38px;
	border: 0px;
	padding: 0px;
    border-spacing: 0px;
    border-collapse: collapse;
}
.box_middle {
	background-image: url(images/framem.jpg);
}
.body_fishery {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
}

.break {
	border: 1px dotted #990000;
}
a:link ,#links a, a{
	color: #000000;
	text-decoration: none;
	font-weight: bold;
}

a:hover {
	text-decoration: underline;
	color: #990000;
	font-weight: bold;
}
a:active {
	text-decoration: underline;
	color: #990000;
	font-weight: bold;
	text-align: center;
}
.img{

	text-decoration: none;
    background-color: transparent;
    color: #000;
	border: 0;
}
#mapsec {
    height: 100%;
    background-color: #F0F0F0 ;
    position: relative;
    padding-bottom: 0;
    border: dotted;
    border-color: red;
}
#AT_iframe {
        position: absolute;
        z-index: 99;
        left: 50px auto;
        top: 30px;
        height:950px;
        width: 900px;
        overflow:hidden;
        border:2px solid darkgrey;
        scrolling="no";
        seamless="seamless";
        background-color:white;
        opacity: 0.9;
        allowtransparency="yes";
        
}	
#AT_iframe_hidden {
        position: absolute;
        z-index: 99;
        left: 50px auto;
        top: 30px;
        height:950px;
        width: 900px;
        overflow:hidden;
        border:2px solid red;
        scrolling="no";
        seamless="seamless";
        background-color:white;
        opacity: 0.9;
        allowtransparency="yes";
        
       
}
	
.class1 a:link {
	color: #000000;
	text-decoration: none;
	font-weight: normal;
}
.class1 a:visited {
	text-decoration: none;
	color: #000000;
	font-weight: normal;
}
.class1 a:hover {
	text-decoration: underline;
	color: #990000;
	font-weight: normal;
}
.class1 a:active {
	text-decoration: underline;
	color: #990000;
	font-weight: normal;
	font-family: Geneva, Arial, Helvetica, sans-serif;
}
.text_body {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 13px;
	line-height: 18px;
	color: #333333;
}
.text_body_style2 {
	font-size: 13px;
	line-height: 18px;
	color: #333333;
	font-family: "Century Schoolbook";
}

.header1,.header11 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 18px;
	font-weight: bold;
	color: #990000;
}

.header2 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	line-height: 16px;
	font-weight: bold;
	color: #990000;
	text-align: center;
}

.pifflers {
	text-align: left;
	margin-left:auto;
	margin-right:auto;
	width: 80%;
	border: 0px;
	padding: 0px;
}

.pifflers_pic  {margin-left:auto;margin-right:auto;text-align: center;width: 100%;}
/*new buttons for CZ*/
.fish-btn {
    background: linear-gradient(to bottom, #f2f2f2, #cfcfcf);
    border-radius: 12px;
    padding: 5px 25px;
    text-decoration: none;
    font-weight: 600;
    display:inline-flex;
    border: 1px solid #b5b5b5;
    transition: all 0.2s ease;
    justify-content: center;
    align-items: center;
}

.fish-btn:hover {
    cursor: pointer;
    background: linear-gradient(to bottom, #ffffff, #bdbdbd);
    color: #990034;
}
.available-fishingf {
    color: #000000;
}

.all-fishingf {
    color:#990034; 
}
.available-fishing {
    color: #990034;
}

.all-fishing {
    color: #000000;
}
.selectbutton {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 16px;
	line-height: 18px;
	font-weight: bold;
	color: #595620;
}

.box_text {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	line-height: 18px;
	color: #333333;
	text-align: left;
}
.boxwebs {
	width: 69px;
	height: 26px;
	border: 0;
	margin: 0;
	padding: 0;
	float: none;
}
.news {
	height: 315px;
	width: 470px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	
}
.bottom {
	margin:0 auto;
	background-position:center;
	background-image: url(images/footer.jpg);
	background-repeat: no-repeat;
	height: 3rem;
	/* width: 820px; */
}
.header2 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 10px;
	font-weight: normal;
	color: #990000;
}
.form_back {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 13px;
	line-height: 18px;
	color: #990000;
	background-color: #F7F7F7;
	border: thin solid #E8E8E8;
}
.body_small {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 12px;
	color: #333333;
}
.body_normal {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 18px;
	color: #333333;
}

.tablelogon {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	border-top-style: dotted;
	border-right-style: dotted;
	border-bottom-style: dotted;
	border-left-style: dotted;
	border-top-width: thin;
	border-right-width: thin;
	border-bottom-width: thin;
	border-left-width: thin;
	width: 100%;
	
	}
    
.fishview {
	color: #595620;
	background-color: #EBEDEC;
	font-size:14px;
	color:#333333;
	border-width: 1px;
	border-color: #666666;
	border-collapse: collapse;
}
table.fishview th {
	border-width: 1px;
	padding: 8px;
	border-style: solid;
	border-color: #666666;
	background-color: #dedede;
}
table.fishview td {
	border-width: 1px;
	border-style: solid;
	border-color: #666666;
	background-color: #ffffff;
}
 
    
.paytable {

	border-top-width: thin;
	border-right-width: thin;
	border-bottom-width: thin;
	border-left-width: thin;
	width: 88%;
	text-align: center;
	margin-top: 20px;
	margin-bottom: 20px;
	border-color: #000000;
	margin-right: 20px;
	margin-left: 20px;
	vertical-align: top;
}

.pay {
    font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 16px;
    padding-top: 10px;
	padding-right: 5px;
	padding-bottom: 5px;
	padding-left: 5px;
	text-align: center;
	width: 18%;
	color: #595620;
	background-color: #EBEDEC;
}
	.pay span a,.pay span{
		color: black;
	}

.payselect {
    font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 16px;
    padding-top: 10px;
	padding-right: 5px;
	padding-bottom: 5px;
	padding-left: 5px;
	background-color: #595620;	
	color: #FFFFFF;
	text-align: center;
	width: 18%;
}
		.payselect a:visited{
		color: white;
	}

.dataheader {
	width: 800px;
	padding-top: 5px;
	padding-right: 5px;
	padding-bottom: 5px;
	padding-left: 5px;
	text-align: center;
	
}
	
.dataheader td, th {
	border: 0px;
	border-color: #000000;
	border-style: dotted;
}

.data {
	padding-top: 5px;
	padding-right: 5px;
	padding-bottom: 5px;
	/* padding-left: 5px; */
	text-align: center;
	/* margin-left: 40px; */
	/* width:600px;*/
}
	
.data td, th {
	border: 1px;
	border-color: #000000;
	border-style: dotted;
}
.data1 {
	padding-top: 5px;
	padding-right: 5px;
	padding-bottom: 5px;
	padding-left: 5px;
	text-align: center;
	margin-left: 40px;

	
}
	
.data1 td, .data th {
    font-size:100%;
	border: 1px;
	border-color: #000000;
	border-style: dotted;
}
.data2 {
	padding-right: 5px;
	padding-left: 5px;
	text-align: right;
}
	
.data2 td, th {
	border: 1px;
	border-color: #000000;
	border-style: dotted;

}
.data3 {
	padding-right: 5px;
	padding-left: 5px;
	text-align: right;
}
	
.data3 td, th {
	border: 1px;
	border-color: #000000;
	border-style: dotted;

}
.dataadmin,.dataadmin20,.dataadminA {
	padding-top: 20px;
	padding-right: 5px;
	padding-bottom: 10px;
	padding-left: 5px;
	text-align: center;
	margin-left: 40px;

}
	
.dataadmin td, .dataadmin th,.dataadmin20 th,.dataadmin20 td,.dataadminA th,.dataadminA td{
	border: 1px;
	border-color: #000000;
	border-style: dotted;
    
}

.dataadmin tr:not(.weekly):hover td,#links:hover{
    background: #c7d4dd !important;
   	border: 1px;
	border-color: #000000;
	border-style: dotted;
}

.catchrep {
	padding-top: 2px;
	padding-left: 5px;
	text-align: left;
	margin-left: 10px;
	width: 100%;
	
}

.catchrep tr.catchshow { display:table-row; }
.catchrep tr.catchhide { display:none; }
	
.catchrepb td  {
	padding-top: 2px;
	padding-right: 5px;
	padding-bottom: 2px;
	padding-left: 5px;
	border: 1px;
	border-color: #000000;
	border-style: dotted;
}

.catchrept td {
	padding-top: 2px;
	padding-right: 10px;
	padding-bottom: 10px;
	padding-left: 5px;
	border: 0px;
	border-color: #000000;
	border-style: none;
}
	
	
.key {
	padding-top: 5px;
	padding-right: 5px;
	padding-bottom: 5px;
	padding-left: 5px;
	text-align: center;
	margin-left: 10%;
	width: 32rem;
}
.main .pifflers .pifflers .hpic {
	width: 500px;
}


.itest {
	position: absolute;
	z-index: 99;
	left: 50px auto;
	top: 30px;
	height:950px;
	width: 900px;
	overflow:hidden;
	scrolling="no";
	seamless="seamless";
	background-color:white;
	opacity: 0.9;
	
}

.tdguest td {
	border: 1px;
	border-color: #000000;
	border-style: dotted;
    background-color: gray;
   	padding-top: 2px;
	padding-right: 10px;
	padding-bottom: 10px;
	padding-left: 5px;
    font-size: 16px;

}
.cbox  {
  line-height: 1.2em;
  margin-right: 110px;  
  text-align:  right;
  white-space: nowrap; 
  overflow: hidden 
}
    /***FIRST STYLE THE BUTTON***/
    .submitbutton  {
	display:inline-block;
    cursor:pointer; /*forces the cursor to change to a hand when the button is hovered*/
    padding:4px 15px; /*add some padding to the inside of the button*/
	width: 80%;
    -moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
	-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
	box-shadow:inset 0px 1px 0px 0px #ffffff;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #f9f9f9), color-stop(1, #e9e9e9));
	background:-moz-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%);
	background:-webkit-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%);
	background:-o-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%);
	background:-ms-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%);
	background:linear-gradient(to bottom, #f9f9f9 5%, #e9e9e9 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9f9f9', endColorstr='#e9e9e9',GradientType=0);
	background-color:#f9f9f9;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	border:1px solid #dcdcdc;
	color:#595620;
	font-family:Arial;
	font-weight:normal
	font-size:15px;
	text-decoration:none;
	text-shadow:0px 1px 0px #ffffff;
    }
    /***NOW STYLE THE BUTTON'S HOVER AND FOCUS STATES***/
    .submitbutton:hover {
	background-color :#565620; /*make the background a little darker*/
	/*reduce the drop shadow size to give a pushed button effect*/
    -webkit-box-shadow: 0 0 1px rgba(0,0,0, .75);
	-moz-box-shadow: 0 0 1px rgba(0,0,0, .75);
	box-shadow: 0 0 2px rgba(0,0,0, .75);
	color:#990034;
	text-decoration: none;
    }
    .table-header-rotated th.row-header{
  width: auto;
}

    /***FIRST STYLE THE BUTTON***/
    .submitfishbook  {
	display:inline-block;
    cursor:pointer; /*forces the cursor to change to a hand when the button is hovered*/
    padding:4px 15px; /*add some padding to the inside of the button*/
	width: 90%;
    -moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
	-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
	box-shadow:inset 0px 1px 0px 0px #ffffff;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #f9f9f9), color-stop(1, #e9e9e9));
	background:-moz-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%);
	background:-webkit-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%);
	background:-o-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%);
	background:-ms-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%);
	background:linear-gradient(to bottom, #f9f9f9 5%, #e9e9e9 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9f9f9', endColorstr='#e9e9e9',GradientType=0);
	background-color:#f9f9f9;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	border:1px solid #dcdcdc;
	color:#595620;
	font-family:Arial;
	font-weight: normal;
	font-size:15px;
	text-decoration:none;
	text-shadow:0px 1px 0px #ffffff;
    outline: 2px solid white;
    outline-offset: 2px;
    }
    /***NOW STYLE THE BUTTON'S HOVER AND FOCUS STATES***/
    .submitfishbook:hover {
	background-color :#565620; /*make the background a little darker*/
	/*reduce the drop shadow size to give a pushed button effect*/
    -webkit-box-shadow: 0 0 1px rgba(0,0,0, .75);
	-moz-box-shadow: 0 0 1px rgba(0,0,0, .75);
	box-shadow: 0 0 2px rgba(0,0,0, .75);
	color:#990034;
	text-decoration: none;
    }
    .table-header-rotated th.row-header{
  width: auto;
}


.table-header-rotated td{
  width: 40px;
  border-top: 1px solid #dddddd;
  border-left: 1px solid #dddddd;
  border-right: 1px solid #dddddd;
  vertical-align: middle;
  text-align: center;
}

.table-header-rotated th.rotate-45{
  height: 80px;
  width: 40px;
  min-width: 40px;
  max-width: 40px;
  position: relative;
  vertical-align: bottom;
  padding: 0;
  font-size: 12px;
  line-height: 0.8;
}

.table-header-rotated th.rotate-45 > div{
  position: relative;
  top: 0px;
  left: 40px; /* 80 * tan(45) / 2 = 40 where 80 is the height on the cell and 45 is the transform angle*/
  height: 100%;
  -ms-transform:skew(-45deg,0deg);
  -moz-transform:skew(-45deg,0deg);
  -webkit-transform:skew(-45deg,0deg);
  -o-transform:skew(-45deg,0deg);
  transform:skew(-45deg,0deg);
  overflow: hidden;
  border-left: 1px solid #dddddd;
  border-right: 1px solid #dddddd;
  border-top: 1px solid #dddddd;
}

.table-header-rotated th.rotate-45 span {
  -ms-transform:skew(45deg,0deg) rotate(315deg);
  -moz-transform:skew(45deg,0deg) rotate(315deg);
  -webkit-transform:skew(45deg,0deg) rotate(315deg);
  -o-transform:skew(45deg,0deg) rotate(315deg);
  transform:skew(45deg,0deg) rotate(315deg);
  position: absolute;
  bottom: 30px; /* 40 cos(45) = 28 with an additional 2px margin*/
  left: -25px; /*Because it looked good, but there is probably a mathematical link here as well*/
  display: inline-block;
 /*width: 100%;*/
  width: 85px; /* 80 / cos(45) - 40 cos (45) = 85 where 80 is the height of the cell, 40 the width of the cell and 45 the transform angle*/
  text-align: left;
  /*white-space: nowrap;*/ /*whether to display in one line or not*/
}

input.myButton{
     background-image: url('images/lowr/AF.gif');
     border-style:none;
     width:89px;
          height: 20px;
     background-repeat:no-repeat;
     background-color:transparent;
}
input.myButton:hover{
    background-image: url('images/lowr/AFX.gif');
    width:89px;
         height: 20px;
     background-repeat:no-repeat;
     background-color:transparent;
}
input.myButton:active{
    background-image: url('images/lowr/AF.gif');
    width:89px;
         height: 20px;
     background-repeat:no-repeat;
     background-color:transparent;
}

input.myButtonL{
     background-image: url('images/lowr/RAL.gif');
     border-style:none;
     width:20px;
     height: 20px;
     background-repeat:no-repeat;
     background-color:transparent;
}
input.myButtonL:hover{
    background-image: url('images/lowr/RAXL.gif');
     width:20px;
          height: 20px;
     background-repeat:no-repeat;
     background-color:transparent;
}
input.myButtonL:active{
    background-image: url('images/RAL.gif');
     width:20px;
          height: 20px;
     background-repeat:no-repeat;
     background-color:transparent;
}

input.myButtonR{
     background-image: url('images/lowr/RA.gif');
     border-style:none;
     width:20px;
          height: 20px;
     background-repeat:no-repeat;
     background-color:transparent;
}
input.myButtonR:hover{
    background-image: url('images/lowr/RAX.gif');
     width:20px;
          height: 20px;
     background-repeat:no-repeat;
     background-color:transparent;
}
input.myButtonR:active{
    background-image: url('images/lowr/RA.gif');
     width:20px;
          height: 20px;
     background-repeat:no-repeat;
     background-color:transparent;
}
#maincontainer 
{   
top:0px;
left: 0px;
padding:10px;
position:fixed;
width:460px;
height:330px;
}
.udshow 
{   
    visibility: hidden;
}
 .confirmBox {
    background-color:lightgrey;
    color: #990034;
    position :absolute;
     border: 1px solid #aaa;
    width: 250px;
    padding: 6px 8px 8px;
    box-sizing: border-box;
    text-align: center;
    border-radius: 5px;
 }
.confButton {

    display: inline-block;
    border-radius: 5px;
    border: 1px solid #aaa;
    padding: 5px;
    text-align: center;
    width: 80px;
    cursor: pointer;
    margin-left: 1em;
    margin-right: 1em;            
 }
 .close {
    width: 20px;
 }
 #links{
    width: fit-content;
    margin-top: 10px;
    padding-top: 10px;
    border: 1px;
    border-color: #000000;
    border-style: dotted;            
 }
#links ul {
  list-style-type: none;
  text-align: center;
  margin: 0px;
  padding: 10px;
}   
#links li {
    padding-bottom: 1rem;
}
 
 a.loa {
 width: 60px;
 height: 26px;
 color: #000000;
 padding: 10px;
 text-decoration:none;
 display: block;
 font-weight: bold;
 background-image : url(images/logout.gif);
 background-repeat: no-repeat;
 }
a.loa:hover {
 width: 60px;
 height: 26px;
 color: #FFFFFF;
 padding: 10px;
 font-weight: bold;
 text-decoration:none;
 display: block;
 background-image : url(images/logout_select.gif);
 background-repeat: no-repeat;
 }
 
.flex-parent-element {
display: flex;
gap:5%;
margin-right:auto;
margin-left: auto;
width: 78%; 
}
.flex-child-element {
  flex: 1;
  background-color: white;
  margin: 10px;
  width: 50%;
}
.flex-child-col {
  margin-top: 2%;
    width:60%

}

.flex-child-element {
  display: flex;
  background-color: white;
  width: 60%;
}
.flex-child-element:first-child {
  margin-right: auto;
  margin-left: auto;
}
.fix-search {
  position: fixed;
  top: 10px;
}
/*styles for new datepicker in CZ and CZF*/
.datepicker_container{
    z-index: 1;
}
  .datepicker > span:hover{cursor: pointer;} 
  
 .highlighted:not(.disabled-date){
    color: #993300!important;
  }

.input-group-addon {
/*padding-left:35%;*/
/* display: table-row;*/
}
 .input-group-addon, .input-group-addon:first-child{
    border-radius:4px!important;
    border: 0px solid #ccc;
    background-color: transparent;
 }
.glyphicon-calendar:before {
    content: url("calendar/images/iconCalendar.gif");
 }  
.datepicker-years .datepicker-switch {
 cursor: default;
 pointer-events: none;
} 
table tr td.disabled.highlighted.day:hover{
  cursor: default;
  background-color: #d9edf7;
}
table tr td.disabled.highlighted.day{
    color: #999!important;
}
.datepicker-title{color:green;}
tr.border_bottom td {
  border-bottom: 1px solid black;
}
tr.border_top td {
  border-top: 1px solid black;
}
tr td:last-child sup {
  color: green;
}
tr td:first-child sup {
  color: black;

}
table tr td.disabled
 {
    position: relative;
}
td.disabled::before, td.disabled::after {
    content: '';
    width: 60%;
    position: absolute;
    right: 20%;
    top: 50%;
}
td.disabled::before {
    border-bottom: 1px solid grey;
    -webkit-transform: skewY(-45deg);
    transform: skewY(-45deg);
}
td.disabled::after {
    border-bottom: 1px solid grey;
    -webkit-transform: skewY(45deg);
    transform: skewY(45deg);
}

.log table {
  width: 100%;
  table-layout: fixed;
}

.log table td:last-child {
  overflow: auto;
  white-space: nowrap;
}

table.userdata {width:100%; word-break:break-word;}
table.userdata tr td:nth-of-type(1) {width:12%;}/*Setting the width of column 1.*/
table.userdata tr td:nth-of-type(2) {width:12%;}/*Setting the width of column 2.*/
table.userdata tr td:nth-of-type(3) {width: 14%;}/*Setting the width of column 3.*/
table.userdata tr td:nth-of-type(4){width:6%;}/*Setting the width of column 4.*/
table.userdata tr td:nth-of-type(5) {width:6%;}/*Setting the width of column 5.*/
table.userdata tr td:nth-of-type(6) {width:21%;}/*Setting the width of column 6.*/
table.userdata tr td:nth-of-type(7) {width:11%;}/*Setting the width of column 7.*/
table.userdata tr td:nth-of-type(8) {width:11%;}/*Setting the width of column 8.*/
table.userdata tr td:nth-of-type(9) {width:7%;}/*Setting the width of column 9.*/

table.available {
    width: 98%;
}

.container{
    display:flex;
 }

/* desktop layout */
.left{
    width:76%;
}

.right{
    width:12%;
    margin-top: 2rem;
    position:sticky;
    top:20px;
}

table.available {
	padding-right: 5px;
	padding-bottom: 5px;
	text-align: center;
}
.available td, th {
	border: 1px;
	border-color: #000000;
	border-style: dotted;
}
table.data.available {word-break:normal;}
				 
table.available td.fname {width: 10%;}/*Setting the width of fishery.*/
table.available td.fnameheader select {width: 100%;}/*Setting the width of fishery select.*/
table.data.available tr.datarow td:nth-child(1){ /*day*/
    width:10%;
	text-align: left;
	padding-left:5px ;
}
table.data.available tr.datarow td:nth-child(2){ /*date*/
    width:10%;
}
table.data.available tr.datarow td:nth-child(3){ /*fishery*/
    width:40%;
	text-align: left;
	padding-left:5px ;
}



table.data.available tr.datarow td:nth-child(4) {
    width: 6%;           /* cost */
    text-align: right;
    padding-right:2px ;
}

/* ---------------------------------------------------------- */
#wrapper{
    margin-left: auto;
    margin-right: auto;
    width: 65%;
    }

.header,.header-menu {
  display: flex;
  justify-content: center;  /*  center whole block */
  align-items: center;
  flex-wrap: wrap;          /* mobile friendly */
  text-align: center;
}
.header {
  gap: 30px;                /* space between logo + socials + image */

}
/* LEFT GROUP (logo + socials stacked) */
.header-left {
  display: flex;
  flex-direction: column;
  align-items: center; /* center internally */
  gap: 8px;
}

/* socials inline */
.social {
  display: flex;
  gap: 2px;
  justify-content: center;
}

.header-right {
  flex: 0 1 auto;
}
.sponsor{
    width: 65%;
}
.pifflers-img{
  width: 100%;
  max-width: 40em; /* or whatever looks right */
  height: auto;
}
.sponsor-social{
   width: 28px;
  height: 28px;
  object-fit: contain;
}
.img-button{
    width: 22%;
 }
 .main{
    margin-left: auto;
    margin-right: auto;
 }  
 /*index styles-------------------------------------------------------*/ 
 /* PAGE WRAPPER */
.indexmain {
  width: 55%;
  margin: 0 auto;
}
.main-section {
  display: flex;
  gap: 2%;              /* tighter spacing */
  align-items: flex-start;
  /*width: 100%;*/
  margin: 2% 9% auto;   /* ensures centering inside .wrapper */
 flex-wrap:wrap;
}

/* LEFT (iframe container) */
.main-left {
  flex: 0 0 55%;          /*fixed proportion */
  max-width: 55%;
}

.main-iframe {
  width: 100%;            /* fill its container ONLY */
  height: 350px;          
  border: none;
  display: block;
}
.main-iframe {
  transition: height 0.2s ease;
}
.main-iframe img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* RIGHT (text column) */
.main-right {
  flex: 0 0 32%;
  /* max-width: 32%; */
}

.main-left,
.main-right {
  min-width: 0;   /* VERY important for flexbox */
}
.main-content {
  padding: 0; /* keep it clean */
}

.main-image {
  width: 100%;        /* 🔑 fills main-left nicely */
  height: auto;
  display: block;
}
.member-box {
  text-align: center;
  padding-top: 0.2rem;
}
/* ------------------------------------ */
/* Box LAYOUT */
.features {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1%;
    margin: 2% 10% 2% 10%;
}

/* CARD */
.feature {
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(to bottom, #ffffff, #f5f5f5);

  /* thicker soft border */
  border: 4px solid #d0d0d0;

  /* 3D effect: outer shadow + inner highlight */
  box-shadow:
    0 4px 10px rgba(0,0,0,0.15),     /* outer depth */
    inset 0 1px 0 #ffffff,           /* top inner highlight */
    inset 0 -2px 4px rgba(0,0,0,0.05); /* bottom inner shading */

  transition: all 0.2s ease;
}

/* IMAGE */
.card-image {
  width: 100%;
  height: 120px;
  overflow: hidden;

  /* subtle inset frame */
  border-bottom: 1px solid #ccc;

  box-shadow: inset 0 -2px 4px rgba(0,0,0,0.1);
}
.card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;       /* % keeps images same size nicely */
}

/* BODY */
.card-body {
    flex-grow: 1;            /* pushes footer to bottom */
}

.card-body .header1 ,.header11{
  display: block;
  padding-left: 3px;
  margin-bottom: 5px;
}
.break {
	border: 1px dotted #990000;
  margin: 5px 0 10px;
}

.box_text {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	line-height: 18px;
	color: #333333;
	text-align: left;
  padding-left: 5px;
  padding-right: 5px;
    }
    .arrow{
    background-image: url(images/arrow.gif);
    background-repeat: no-repeat;
    width:16px;
    height: 16px;
    display: inline-block;
}
/* ----------------------------------------------------- */
/* FOOTER */
.card-footer {
  padding: 10px;
  border-top: 1px solid #eee;
}

.card-footer a {
  text-decoration: none;
}
/* optional: tighten footer spacing */
.footer {
  margin: 2% 10%;
}

/* optional: tighten footer spacing */
.footer-bottom {
  padding-left: 15%;
}


.footer-top {
  display: flex;
  justify-content: space-between; /* left + right */
  align-items: center;
}

/* LEFT stays as-is */
.footer-left {
  text-align: left;
  padding-left: 8%;
}
/* RIGHT: stack logo above copyright */
.footer-right {
  display: flex;
  flex-direction: column;   
  align-items: flex-end;    /* align to right edge */
  gap: 0;
  padding-right: 2%;
  padding: 3px 8%;
}

/* DESKTOP */
/*.main-left {flex: 0 0 49%;margin: 0 0 0 10%;}*/



/* FEATURES (5 cards) */
.features {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1%;
  margin: 2% 10% 2% 10%;
}

/* FOOTER */
.footer {
  margin-top: 30px;
}


.flinks{
    width: 80%;
}
.flinks a {
  line-height: 1.8;
  font-weight: normal;

}
.main-iframe {
    width: 100%;
    aspect-ratio: 15 / 12;
/*    height: auto;*/
    border: 0;
    display: block;
}


.frame-padding {
    box-sizing: border-box;
    width: 100%;
    height: 100vh;

    padding: 2px;
    overflow: hidden;
}

.frame-padding img {
    width: 100%;
    height: 100%;

    object-fit: contain;

    display: block;
}
@media (max-width: 1024px){
    .main-left{
    max-width: unset;
    
    }
    
}
 /* TABLET + MOBILE */
@media (max-width: 1200px) {
        
  .main-left, .main-right {
    flex: 0 0 100%;

  }

  /* FEATURES: 3 per row */
  .features {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 768px) {

  /* STACK MAIN */
  .main-section {
    flex-direction: column;
    
/*    background-color: lightblue;*/
  }


  /* FEATURES: single column */
  .features {
    grid-template-columns: repeat(2, 1fr);
  }

  /* FOOTER STACK */
  .footer-top {
    flex-direction: column;
    gap: 10px;
    text-align: center;
  }

  .footer-right {
    align-items: center;
  }
}

 /* end index styles-------------------------------------------------------*/ 
/* mobile layout */
@media (max-width:768px){
    #wrapper {
        width: 95%;
    }
     #links{
    width: 100%;

 }
 #links li {
    padding-bottom: 0.2rem;
}
   table.dataadminA {
      width: 100%;
      table-layout: fixed;
    }
	table.dataadminA tbody td{
  overflow: auto;
  white-space: nowrap;
 }
 .dataadminA thead
 { font-size: smaller;}
 
 .dataadmin,.dataadminA{
    margin-left: 0;
    
 }
 /*    table.data.available not:(.datarow) td:nth-child(5) {font-size: x-small; color: aqua;}*/
    table.data.available  tbody  tr:nth-child(3)  td:nth-child(n+3){font-size: x-small; }
    .container,.main-section,.flex-parent-element{
        flex-direction:column;
        padding: 0px;
    }

    .right,.flex-child-element:first-child{
        order:1;
        width:100%;
    }
    #links.right{
        position:relative
    }
    .left,.flex-child-element:last-child{
        order:2;
        width:100%;
    }
  .day-text-full,.day-rate-full,.date-text-full {
        display: none;
    }
        .day-text-letter,.day-rate-int,.date-daymonth {
        display: flex-end;
    } 
    .img-button{
    width: 35%;
 } 
 .main-right{
        order:2;
        width:100%;
    }
.main-left{
        order:1;
        width:100%;
    }
}
/* Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) { 

        .data1,.dataadmin,.main, .pifflers {
        width: 90%;

    }

	.fish-btn{
		width: 48%;
	}
  } 

/* Tablet and up */
@media (min-width: 768px) {
    .pifflers,.main, #main {
        width: 80%;
    }
        .data1,.dataadmin,#wrapper  {
        width: 90%;
    }


    .day-text-full,.day-rate-full,.date-text-full {
        display: block;
    }
        .day-text-letter,.day-rate-int,.date-daymonth {
        display: none;
    }     
}
@media (min-width: 1024px) { /* bigger than ipad*/

  .main-iframe {
    width: 100%;
    height: 100%;  
 }
 }
@media (max-width: 1024px) { /* up to ipad*/

    .date-text-full {
        display: none;
    }
        .date-daymonth {
        display: block;
    }
}
@media (max-width: 992px) { 
.main-section {
   width: 100%; 
} 
}
@media (min-width: 820px) {
.container{
    gap: 20%; 
}
}

/* Large devices (desktops, 992px and up)*/
@media (min-width: 992px) { 
    .main, #wrapper{
        width: 80%;
    }
    	.fish-btn{
		width: 25%;
	}
   .main.fishing{
       width: 55%; 
    }
  .container{
    gap: 15%; 
} 
 
}

/* X-Large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) { 
  .modal_btn,.nopic {
    font-size: 0.8vw;
/*    color: blue;*/
  }
  .container{
    gap: 10%; 
} 
}

/*// XX-Large devices (larger desktops, 1400px and up)*/
@media (min-width: 1400px) { 
  .modal_btn {
    font-size: 0.7vw;
/*    color: violet;*/
  }
   
}