/********* Lightbox-Styles Anfang  ********/

html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

/* .login-btn {
  margin: 2px;
  padding: 2px;
} */
.login > input[type="submit"] {
  margin: 2px;
}
.login > input[type="email"] {
  margin: 2px 0px 2px 0px;
}
.login > input[type="password"] {
  margin: 2px 0px 2px 0px;
}

/* You define the style of our previews here, you are using flex to display the images 
   "responsively". */

.preview {
  width: auto;
}

.row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.row > .col {
  padding: 0 8px;
}

.col {
  float: left;
  width: 25%;
}

/* Now you want to define what the lightbox will look like. Note that you have the display
   as none. You don't want it to show until the user clicks on one of the previews. 
   You will change this display property with JavaScript below. */
   
.modal {
  display: none;
  position: fixed;
  z-index: 1;
  padding: 10px 62px 0px 62px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: black;
}

.modal-content {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: auto;
  padding: 0 0 0 0;
  width: 80%;
  max-width: 1200px;
}

/* Same with your slides, you set the display to none, because you want to choose which 
   one is shown at a time. */

.slide {
  display: none;
}

.image-slide {
  width: 100%;
}

.modal-preview {
  width: 100%;
}

.dots {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

/* You want the previews a little transparent to show that they are "inactive". 
   You then add an .active or :hover class to animate the selections for your user when
   they interact with your controls and clickable content.
 */

img.preview, img.modal-preview {
  opacity: 0.6;
}

img.active,
.preview:hover,
.modal-preview:hover {
  opacity: 1;
}

img.hover-shadow {
  transition: 0.3s;
}

.hover-shadow:hover {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
} 

.close {
  color: white;
  position: absolute;
  top: 10px;
  right: 25px;
  font-size: 35px;
  font-weight: bold;
}
.close:hover,
.close:focus {
  color: #999;
  text-decoration: none;
  cursor: pointer;
}

.previous,
.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
}

.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

.previous:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}
/********* Lightbox-Styles Ende  ********/

body {
  background: #fffbdc;
  color: #000000;
  margin: 0;
}

img,a img {
vertical-align:middle;
border:none
}

a { 
  color: rgb(153, 0, 0); 
  text-decoration: none; 
}

a:visited { 
  color: rgb(152, 0, 0); 
  text-decoration: none; 
}

a:hover { 
  color: rgb(102, 0, 0); 
  text-decoration: none; 
}

form {
  display: inline;
}

tr.header {
  background: #fff6d1;
}

tr.headerNavigation {
  background: #000000;
}

td.headerNavigation {
  font-family: Verdana, Arial, sans-serif;
  font-size: 1em;
  background: #000092;
  color: #ffffff;
  font-weight : bold;
}

td.headerForm {
  font-family: Verdana, Arial, sans-serif;
  font-size: 1.1em;
  background: #000092;
  color: #ffffff;
  font-weight : bold;
}

a.headerNavigation { 
  color: #ffffff; 
}

a.headerNavigation:hover {
  color: #cc6666;
}

tr.headerError {
  background: #ff0000;
}

tr.black {
  background: #000000;
}

span.black {
  color: #000000;
}
span.redalert {
  font-family: Tahoma, Verdana, Arial, sans-serif;
  font-size: .8em;
  color: #ff0000;
  font-weight : bold;
  text-align : center;
}
span.greenalert {
  font-family: Tahoma, Verdana, Arial, sans-serif;
  font-size: .85em;
  line-height: 2.0em;
  color: #008000;
  font-weight : bold;
  text-align : center;
}
span.addto {
  font-family: Tahoma, Verdana, Arial, sans-serif;
  font-size: .85em;
  line-height: 2.0em;
  color: #000000;
  font-weight : normal;
  text-align : center;
}
td.headerError {
  font-family: Tahoma, Verdana, Arial, sans-serif;
  font-size: 1em;
  background: #ff0000;
  color: #ffffff;
  font-weight : bold;
  text-align : center;
}

tr.headerInfo {
  background: #ffffcc;
  color: #000000;
}

td.headerInfo {
  font-family: Times, Times New Roman, serif;
  font-size: 1em;
  line-height: 1.2;
  background: #ffffcc;
  color: #000000;
  vertical-align: middle;
  font-weight: normal;
  text-align: center;
}

td.rowInfo {
  font-family: Times, Times New Roman, serif;
  font-size: .9em;
  line-height: 1.2;
  background: #ffffcc;
  color: #000000;
  font-weight: normal;
  text-align: center;
  vertical-align: top;
margin:0.5em 0em 0.2em 0em;
}

img.middle {
  vertical-align: middle;
}

td.imgRow {
  font-family: Times, Times New Roman, serif;
  font-size: 1em;
  background: #000000;
  color: #000000;
  font-weight: normal;
  text-align: center;
  vertical-align: middle;
margin:0.5em 0em 0.2em 0em;
}

td.listRow {
  font-family: Times, Times New Roman, serif;
  font-size: 1.1em;
  line-height: 1.3;
  background: #ffffcc;
  color: #000000;
  font-weight: normal;
  text-align: left;
  vertical-align: middle;
}

td.listRowHead {
  font-family: Times, Times New Roman, serif;
  font-size: 1.1em;
  background: #ffffcc;
  color: #000000;
  font-weight: normal;
  text-align: center;
  vertical-align: middle;
}

td.listCatHead {
  font-family: Times, Times New Roman, serif;
  font-size: 1.2em;
  background: #ffffcc;
  color: #000000;
  font-weight: bold;
  text-align: left;
  vertical-align: middle;
}

td.linkRow {
  font-family: Times, Times New Roman, serif;
  font-size: 1.1em;
  background: #ffffcc;
  color: #000000;
  font-style: italic;
  font-weight: normal;
  text-align: left;
  vertical-align: middle;
}

tr.footer {
  background: #000092;
}

td.footer {
  font-family: Verdana, Arial, sans-serif;
  font-size: 1.1em;
  line-height: 1.2;
  background: #FFF6D1;
  color: #000000;
	text-align: center;
  font-weight: normal;
margin:0.5em 0em 0.2em 0em;
}
a.footer { 
  color: #ffffff; 
}

a.footer:hover {
  color: #CC6666;
}

td.pageHeading, div.pageHeading {
  background: #fff6d1;
  text-align: center;
  font-family: Times, Times New Roman, serif;	
  font-size: 3em;
  font-weight: bold;
  color: #990000;
}

td.galleryHeading, div.galleryHeading {
  background: #fff6d1;
  text-align: center;
  font-family: Times, Times New Roman, serif;	
  font-size: 1.1em;
  line-height: 1.3;
  font-weight: bold;
  color: #990000;
}

td.tableHeader, div.tableHeader {
  background: #ffffcc;
  text-align: center;
  font-family: Times, Times New Roman, serif;	
  font-size: 1em;
  line-height: 1.4;
  font-weight: normal;
  color: #990000;
margin:0.5em 0em 0.2em 0em;
}

td.tableFooter, div.tableFooter {
  background: #fff6d1;
  text-align: center;
  font-family: Times, Times New Roman, serif;	
  font-size: 1em;
  line-height: 1.2;
  font-weight: normal;
  color: #990000;
margin:0.5em 0em 0.2em 0em;
}

span.titleHeading {
  background: #fff6d1;
  text-align: center;
  font-family: Times, Times New Roman, serif;	
  font-size: .4em;
  font-weight: bold;
  color: #990000;
}


td.listHeading, div.pageHeading {
  background: #fff6d1;
  text-align: center;
  font-family: Times, Times New Roman, serif;	
  font-size: 3em;
  font-weight: normal;
  color: #000000;
}

td.main, p.main {
  background: #ffffcc;
  font-family: Times, Times New Roman, serif;
  font-size: 1em;
  font-weight: normal;
  color: #990000;
  text-align: center;
}

td.smallText, span.smallText, p.smallText {
  font-family: Verdana, Arial, sans-serif;
  font-size: .85em;
  color: #000000;
}

.footsmallText {
  background: #fff6d1;
  text-align: center;
  font-family: Times, Times New Roman, serif;	
  font-size: .8em;
  font-weight: normal;
  color: #990000;
}

td.mediumText, span.mediumText, p.mediumText {
  font-family: Verdana, Arial, sans-serif;
  font-size: .95em;
  color: #000000;
}

td.tableHeadRt, p.tableHeading {
  background: #ffffcc;
  font-family: Times, Times New Roman, serif;
  font-size: 1em;
  line-height: 1.2;
  font-weight: bold;
  color: #990000;
  text-align: right;
}

table.sgallery {
border:1px solid #000;
background:#ffffcc;
text-align:center;
padding:1px;
}
/* input[type="submit"] {
  background: none;
  border: none;
  color: blue;
  font-size: 10px;
} */
.open-watchlist-link {
  float: right;
  margin-right: 2.72rem;
  font-weight: 700;
  margin-left: -10rem;
}


.search-result {
  width: 90%;
  border: 1px solid #a6a6a6;
  box-shadow: -1px 3px 12px #0000007a;
}
.search-result thead {
  background-color: #d9dddc;
  font-size: 20px;
  font-weight: 700;
  text-align: center;
}

.search-result td {
  padding: 3px;
}

.search-result tr, td {
  border: 1px solid #474747;
}