#main_body {
  margin: 0;
  padding: 0;
  font-family: arial, verdana, tahoma;
  font-size: 12px;
  height: 100%;
}
#container {
  margin: 0;
  height: 100%;
}
#header {
  width: 726px;
  height: 100px;
  padding: 0;
}
#logo {
  position: absolute;
  width: 142px;
  height: 80px;
  top: 10px;
  left: 12px;
}
#key_visual {
  width: 571px;
  height: 140px;
  margin: 0;
  margin-left: 155px;
}
#slogan {
  font-family: arial, verdana, tahoma;
  font-size: 16px;
  font-weight: bold;
  padding: 10px 0 5px 0;
}
#main_container {
  width: 726px;
}

/* Begin Menu */

/* 
#main_nav_container {
  width: 726px;
  height: 28px;
}

#main_nav_list {
  float: left;
  position: relative;
  height: 28px;
  margin: 0;
  padding: 0;
  padding-right: 3px;
  list-style-type: none;
}

#main_nav_list li {
  float: left;
  margin: 0;
  padding: 0;
  padding-left: 3px;
}

#main_nav_container a {
  overflow: hidden;
  background-repeat: repeat-x !important;
  float: left;
  margin: 0;
  text-align: center;
  display: block;
  padding: 7px 10px;
} */

/* Begin SubMenu */
/*
#sub_nav_container {
  padding: 0;
}

.sub_nav_list {
  border: 0;
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.sub_nav_list li {
  clear: both;
  font-size: 11px;
  text-transform: capitalize;
  padding: 0;
}

.sub_nav_list a {
  overflow: hidden;
  text-decoration: none;
  text-align: left;
  height: 14px;
  padding: 6px 0 4px 20px;
  display: block;
  width: 134px;
}

.sub_nav_list a.sub_nav_active_item {
  font-family: arial, verdana, tahoma;
  text-decoration: none;
}

.sub_nav_list a.sub_nav_item {
  font-family: arial, verdana, tahoma;
  text-decoration: none;
}

.sub_nav_list a.sub_nav_item:hover {
  font-family: arial, verdana, tahoma;
  text-decoration: none;
}*/

/**/

#content_container {
  overflow: hidden;
  width: 525px;
}
#footer_text {
  clear: both;
  padding: 10px 10px 10px 179px;
  font-size: 10px;
}

/* Begin Content */

.content table {
  width: 100%;
  border-left: 1px solid;
  border-top: 1px solid;
  /* AG removed due to browser compatibility 20061221
    border-collapse: collapse;
    border-spacing: 0;*/
}
.content th {
  border-right: 1px solid;
  border-bottom: 1px solid;
  padding: 3px 5px 3px 5px;
  text-align: left;
  font-weight: bold;
  font-family: tahoma, verdana, arial;
}
.content td {
  border-right: 1px solid;
  border-bottom: 1px solid;
  padding: 3px 5px 3px 5px;
}

/* End Content */

/* Begin Search */

#search_block {
  width: 360px;
  height: 28px;
  border: 1px solid;
  padding: 7px 0 0 10px;
}
#search_block .caption {
  font-family: tahoma, verdana, arial;
  width: 50px;
  float: left;
  padding-top: 3px;
  font-weight: bold;
}
#search_block input {
  width: 225px;
}
#search_block button {
  margin-left: 5px;
}

/* End Search */

.content button {
  height: 21px;
  border: 1px solid;
  background: #eeeeee;
}
.content textarea {
  border: 1px solid;
}
.content input {
  border: 1px solid;
}
.content fieldset {
  border: 1px solid;
}

/* Begin Pager */

#pager {
  width: 400px;
  height: 18px;
  border: 1px solid;
  padding: 3px 0 0 0;
  margin: 15px 0 0 0;
  text-align: center;
  font-size: 11px;
}
#pager #current_page {
  margin: 0 80px 0 80px;
}
#pager a {
  text-decoration: none;
}

/* End Pager */

.content {
  font-family: arial, verdana, tahoma;
  font-size: 12px;
  margin: 5px 0 15px 0;
  padding: 0;
}
.content p {
  font-family: arial, verdana, tahoma;
  font-size: 12px;
  margin: 5px 0 15px 0;
  padding: 0;
}
.content a {
  font-family: arial, verdana, tahoma;
  font-size: 12px;
  text-decoration: none;
}
.content a:hover {
  font-family: arial, verdana, tahoma;
  font-size: 12px;
  text-decoration: underline;
}
.content h1 {
  font-size: 29px;
  font-family: arial, verdana, tahoma;
}
.content h2 {
  font-family: arial, verdana, tahoma;
  font-size: 23px;
}
.content h3 {
  font-family: arial, verdana, tahoma;
  font-size: 18px;
}

#logo {
  background: url(images/static/logo_2.gif) no-repeat;
}
#key_visual {
  background: url(images/static/key_visual.jpg) no-repeat;
}
#slogan {
  font-family: arial, verdana, tahoma;
  font-style: normal;
  font-size: 16px;
  font-weight: bold;
  text-decoration: none;
  color: #818181;
  text-shadow: 1px 1px 10px grey;
}
#content_container h1 {
  font-family: arial, verdana, tahoma;
  font-style: normal;
  font-size: 29px;
  font-weight: bold;
  text-decoration: none;
  /* color: #465f83; */
  color: rgb(0, 0, 160);
  text-shadow: 3px 3px 10px grey;
}
#content_container h2 {
  font-family: arial, verdana, tahoma;
  font-style: normal;
  font-size: 23px;
  font-weight: bold;
  text-decoration: none;
  color: #5c5c5c;
  text-shadow: 1px 1px 10px grey;
}
#content_container h3 {
  font-family: arial, verdana, tahoma;
  font-style: normal;
  font-size: 18px;
  font-weight: bold;
  text-decoration: none;
  color: #696969;
}
#content_container,
#content_container p {
  font-family: arial, verdana, tahoma;
  font-style: normal;
  font-size: 12px;
  font-weight: normal;
  text-decoration: none;
  color: #595959;
}
#content_container a:visited {
  font-family: arial, verdana, tahoma, sans-serif;
  font-style: normal;
  font-size: 100%;
  font-weight: normal;
  text-decoration: underline;
  color: #87a0be;
}
#content_container a:link {
  font-family: arial, verdana, tahoma, sans-serif;
  font-style: normal;
  font-size: 100%;
  font-weight: normal;
  text-decoration: underline;
  color: #315eb5;
}
#content_container a:hover {
  font-family: arial, verdana, tahoma;
  font-style: normal;
  font-size: 12px;
  font-weight: normal;
  text-decoration: underline;
  color: #315eb5;
}
#content_container a:active {
  font-family: arial, verdana, tahoma, sans-serif;
  font-style: normal;
  font-size: 100%;
  font-weight: normal;
  text-decoration: underline;
  color: #315eb5;
}
#footer_text {
  font-family: arial, verdana, tahoma, sans-serif;
  font-style: normal;
  font-size: 10px;
  font-weight: normal;
  text-decoration: none;
  color: #696969;
}
/* Styles used in the input field for password */
/* =========================================== */
#register-form input[type="password"] {
  /* width: 100%; */
  /* padding: 12px 36px 12px 12px; */
  box-sizing: border-box;
}
.password-container {
  /* width: 300; */
  position: relative;
}
.fa-eye {
  position: relative;
  /* top: 28%; */
  /* right: 35%; */
  right: 7%;
  cursor: pointer;
  color: silver;
}
/* Styles used in the picture galleries */
/* ==================================== */
/* (currently not used) Example with the 
    HTML code:
    <div class="gallery">
      <img src="./../../M1_Sec/RFWedding/images/IMG_0904.jpg" />
      <img src="./../../M1_Sec/RFWedding/images/IMG_0905.jpg" />
      <img src="./../../M1_Sec/RFWedding/images/IMG_0906.jpg" />
      <img src="./../../M1_Sec/RFWedding/images/IMG_0907.jpg" />
      <img src="./../../M1_Sec/RFWedding/images/IMG_0908.jpg" />
    div>
    <script type="module" src="include/js/animate_gallery.js"></script>
  */
.gallery {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: center;
  align-items: center;
  width: 70%;
  padding: 2rem;
  img {
    width: 24rem;
    height: 32rem;
    object-fit: cover;
    object-position: 75% 50%;
    border-radius: 0.5rem;
    transition: scale 250ms ease-in-out;
    vertical-align: bottom;
    &:hover {
      scale: 1.1;
    }
  }
}
/* Styles used in the picture slideshow */
/* ==================================== */
.slideshow_wrapper {
  width: 85%;
  border: 2px solid darkgray;
  margin: 10px auto 0;
  box-shadow: 10px 20px 70px rgba(255, 255, 255, 0.4);
  position: relative;
}
.slide_pair {
  width: 100%;
  display: none;
}
.slide_visible {
  display: block;
}
.slide_pair > img {
  width: 100%;
  display: block;
  animation: transit 2s;
  &:hover {
    scale: 1.1;
  }
}
@keyframes transit {
  from {
    opacity: 0.2;
  }
  to {
    opacity: 1;
  }
}
.slide_text {
  color: black;
  background-color: #c7d1dc;
  font-size: 1.4em;
  display: flex;
  justify-content: center;
  border-bottom: 2px solid darkgray;
}
.slide_moveright,
.slide_moveleft,
.slide_auto,
.slide_stop {
  color: black;
  /* font-size: 1em; */
  cursor: pointer;
  position: absolute;
  top: 0;
  transition: 500ms;
  &:hover {
    scale: 1.5;
  }
}
.slide_moveright {
  right: 5px;
}
.slide_moveleft {
  left: 5px;
}
.slide_auto {
  right: 20px;
  display: block;
}
.slide_stop {
  right: 20px;
  display: none;
}
/* Styles used in the gallery figure slideshow */
/* =========================================== */
/* (currently not used) ### Test area ### 
figure,
figcaption {
  margin: 0;
  padding: 0;
}
.gallery-wrapper {
  text-align: center;
  width: 90%;
  border: 1px solid black;
  margin: 10px auto 0;
  box-shadow: 10px 20px 70px rgba(255, 255, 255, 0.5);
  position: relative;
}
.gallery-wrapper > figure {
  position: absolute;
  width: 100%;
  display: block;
  animation: transit 2s;
}
.gallery-wrapper > figure > figcaption {
  position: absolute;
  bottom: 0;
  width: 100%;
  line-height: 3em;
  color: white;
  background: rgb(0 0 0 / 0.3);
}*/
/* Styles used in the guestbook */
/* ============================ */
.header_gb {
  /* background: #ff512f; */
  background: #00256e;
  /* background: linear-gradient(90deg, #ff512f 0% #dd2476 100%);*/
  color: #fff;
  padding: 10px 0 10px 0;
  border-radius: 8px;
  /* border-bottom-left-radius: 32px 16px;
  border-bottom-right-radius: 32px 16px; */
  box-shadow: 4px 4px 10px grey;
  /* box-shadow: 0 2px 8px rgba(221, 36, 118, 0.08); */
}
.header_gb h1 {
  /* Not used */
  margin: 0 0 10px 0;
  font-size: 1.5em;
  letter-spacing: 2px;
  font-weight: 700;
  text-align: center;
}
nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: center;
}
nav ul li {
  display: inline-block;
  margin: 0 10px;
}
nav a {
  color: #fff;
  text-decoration: none;
  font-weight: 500;
  font-size: 1.2em;
  padding: 8px 18px;
  border-radius: 6px;
  transition:
    background 0.2s,
    color 0.2s;
}
nav a:hover,
nav ul li.active a {
  background: #fff;
  color: #00256e;
  box-shadow: 0 2px 8px rgba(221, 36, 118, 0.08);
}
.guestbook_table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: 8px 0 0 0;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 4px 4px 10px grey;
  /* box-shadow: 0 4px 16px rgba(221, 36, 118, 0.06); */
}
.guestbook_table thead {
  background: linear-gradient(90deg, #868686 0%, #455f95 100%);
  color: #fff;
}
.guestbook_table th,
.guestbook_table td {
  padding: 6px 6px;
  text-align: left;
}
.guestbook_table th {
  font-size: 1.1em;
  /* letter-spacing: 1px; */
}
.guestbook_table tbody tr {
  transition: background 0.2s;
}
.guestbook_table tbody tr:nth-child(odd) {
  background: #fff7e6;
}
.guestbook_table tbody tr:nth-child(even) {
  background: #ffe0c3;
}
.guestbook_table tbody tr:hover {
  background: #ffe6f2;
}
.guestbook_table ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.guestbook_table ul li {
  display: inline-block;
  margin-right: 4px;
}
.guestbook_table a {
  /* Not used */
  color: #dd2476;
  text-decoration: none;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 4px;
  transition:
    background 0.2s,
    color 0.2s;
}
.guestbook_table a:hover {
  /* Not used */
  background: #ff512f;
  color: #fff;
}
.guestbook_controls {
  margin: 10px auto 0 auto;
  max-width: 480px;
  background: #dedede;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(221, 36, 118, 0.05);
  box-shadow: 4px 4px 10px grey;
  padding: 8px 32px 8px 36px;
  /*  top left bottom right */
}
.guestbook_controls label {
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
  color: #00256e;
  font-size: 1.05em;
}
.guestbook_controls input,
.guestbook_controls textarea {
  width: 100%;
  padding: 8px 6px;
  margin-bottom: 12px;
  border: 1px solid #7f7f7f;
  border-radius: 6px;
  font-size: 1em;
  background: #fff;
  transition: border 0.2s;
  font-family: inherit;
}
.guestbook_controls input:focus,
.guestbook_controls textarea:focus {
  border: 1.5px solid #00256e;
  outline: none;
}
.guestbook_controls textarea {
  min-height: 80px;
  resize: vertical;
}
.guestbook_controls .btn-reset,
.guestbook_controls .btn-submit {
  width: 48%;
  display: inline-block;
  margin: 0 1% 0 0;
  background: linear-gradient(90deg, #ff512f 0%, #dd2476 100%);
  background: #00256e;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 12px 0;
  font-size: 1.1em;
  font-weight: 600;
  cursor: pointer;
  transition:
    background 0.2s,
    transform 0.2s;
  box-shadow: 0 2px 8px rgba(221, 36, 118, 0.08);
}
.guestbook_controls .btn-reset:hover,
.guestbook_controls .btn-submit:hover {
  background: linear-gradient(90deg, #dd2476 0%, #ff512f 100%);
  background: #bcbcbc;
  color: #00256e;
  transform: scale(1.02);
}
/* footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100vw;
    background: linear-gradient(90deg, #ff512f 0%, #dd2476 100%);
    color: #fff;
    text-align: center;
    padding: 18px 0 10px 0;
    font-size: 1.1rem;
    letter-spacing: 1px;
    box-shadow: 0 -2px 8px rgba(221,36,118,0.08);
    z-index: 100;
}*/
.guestbook_table {
  width: 100%;
  border-collapse: collapse;
}
.guestbook_table thead {
  display: table;
  width: 100%;
  table-layout: fixed;
}
.guestbook_table tbody {
  display: block;
  height: 320px; /* Set your desired scroll height */
  overflow-y: auto;
  width: 100%;
}
.guestbook_table tr {
  display: table;
  width: 100%;
  table-layout: fixed;
}
.guestbook_table th,
.guestbook_table td {
  padding: 8px;
  text-align: left;
  word-break: break-word;
}
.guestbook_table th,
.guestbook_table td {
  padding: 6px;
  text-align: left;
  word-break: break-word;
  /* Set a consistent height for header and cells */
  height: 28px; /* Adjust as needed for your design */
}
.guestbook_table th:nth-child(1),
.guestbook_table td:nth-child(1) {
  width: 30px; /* ID column: narrow */
  text-align: center;
}
.guestbook_table th:nth-child(2),
.guestbook_table td:nth-child(2) {
  width: 66px; /* Name column: a bit wider */
}
.guestbook_table th:nth-child(3),
.guestbook_table td:nth-child(3) {
  width: 72px; /* Email column */
}
.guestbook_table th:nth-child(4),
.guestbook_table td:nth-child(4) {
  width: 1fr; /* Message column: flexible */
}
.guestbook_table th:nth-child(5),
.guestbook_table td:nth-child(5) {
  width: 64px; /* Actions column */
}
.guestbook_table th:nth-child(6),
.guestbook_table td:nth-child(6) {
  width: 62px; /* Actions column */
}
/*
.guestbook_table {
  box-shadow:
    -16px 0 24px -8px rgba(0, 0, 0, 0.8), */
/* strong left shadow */
/* 0 16px 32px -8px rgba(0, 0, 0, 0.8);*/
/* strong bottom shadow */
/*
} */
.contact_controls {
  margin: 10px auto 0 auto;
  max-width: 480px;
  background: #dedede;
  border-radius: 8px;
  box-shadow: 2px 2px 10px grey;
  padding: 8px 32px 8px 36px;
  /*  top left bottom right */
}
.contact_controls label {
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
  color: #00256e;
  font-size: 1.05em;
}
.contact_controls input,
.contact_controls textarea {
  width: 100%;
  padding: 8px 6px;
  margin-bottom: 12px;
  border: 1px solid #bcbcbc;
  border-radius: 6px;
  font-size: 1em;
  background: #fff;
  transition: border 0.2s;
  font-family: inherit;
}
.contact_controls input:focus,
.contact_controls textarea:focus {
  border: 1.5px solid #00256e;
  outline: none;
}
.contact_controls textarea {
  min-height: 80px;
  resize: vertical;
}
.contact_controls .btn-reset,
.contact_controls .btn-submit {
  width: 48%;
  display: inline-block;
  margin: 0 1% 0 0;
  background: #00256e;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 12px 0;
  font-size: 1.1em;
  font-weight: 600;
  cursor: pointer;
  transition:
    background 0.2s,
    transform 0.2s;
  box-shadow: 0 2px 8px rgba(221, 36, 118, 0.08);
}
.contact_controls .btn-reset:hover,
.contact_controls .btn-submit:hover {
  background: #bcbcbc;
  color: #00256e;
  transform: scale(1.02);
}
/* Special objects design */
/* ====================== */
#content_container #enter_control {
  font-family: arial, verdana, tahoma, sans-serif;
  font-style: normal;
  font-size: 1.1em;
  font-weight: 800;
  text-decoration: none;
  color: #fff;
}
#enter_control {
  display: inline-block;
  background: #00256e;
  border: none;
  border-radius: 3px;
  padding: 8px 32px;
  cursor: pointer;
  box-shadow: 1px 1px 10px grey;
  position: relative;
  left: 40%;
}