.wrapper {
  height: 100%;
  margin: 0px auto;
  overflow: scroll;
 }

#MenuButton {
  background-color: #262626;
  border-bottom:    1px solid #3cf;
  padding:          8px;
  position:         sticky;
  top:              0;
  width:            100%;
  z-index:          1;
  /*margin: 16px 0 0 16px;*/
}

#MenuButton img {
  background-color: #ffffff;
  height:           36px;
}

.left {
  float: left;
}

.right {
  float: right;
}

div.banner {
  text-align: center;
}

div.banner img {
  background-color: #ffffff;
  height: 132px;
}

#MainContent {
  margin-bottom: 4em
}

div.login_content {
  margin-bottom: 64px;
}

div.welcome,
div.news {
  margin: 32px auto;
  max-width: 50%;
}

div.welcome img.banner,
div.news img.banner {
  display:        block;
  margin-left:    auto;
  margin-right:   auto;
  margin-bottom:  64px;
}

div.news h1 {
  font-size: 2em;
}

div.welcome h3,
div.news a[name] {
  font-size: 1.5em;
}

div.news a[name] {
  display: inline-block;
  margin-top: 64px;
  text-decoration-line: underline;
  text-decoration-color: #33ccff;
}

div.news a[name]:hover {
  color: #cccccc;
}

div.welcome h4,
div.news h4 {
  margin-top: 64px;
  font-size: 1.3em;
}

div.welcome p {
  margin-top: 32px;
}

div.news p {
  margin-top: 16px;
}

div.news p.text {
  line-height: 1.1em;
}

div.news p.img {
  text-align: center;
}

div.news p.text:first-letter {
  color: #33ccff;
  font-size: 1.5em;
}

div.news p.date {
  font-size: 0.6em;
  margin-top: 8px;
}

div.welcome p img {
  height: 1em;
}

div.welcome p img.youtube {
  height: 4em;
}

div.news p img {
  max-height: 10em;
}

div.news a.whatsapp {
  color: #77b300;
}

form.form_news_edit input[type="file"]::-webkit-file-upload-button {
  border-top:       1px;
  border-left:      1px;
  border-right:     1px;
  border-bottom:    0;
  border-style:     solid;
  border-color:     #33ccff;
  padding:          0 4px 0 4px;
  width: auto;
}

form.form_news_edit textarea {
  border:           1px solid #33ccff;
  height:           256px;
  padding:          8px;
}

div.line {
  background-color: #33ccff;
  height: 1px;
  margin: 16px auto 0 auto;
  width: 75%;
}

.catch_message {
  text-align: center;
  width: 100%;
}

section.switch-checkbox,
section.switch-checkbox-mobile {
  display:  table;
  margin:   16px auto;
}

section.switch-checkbox-mobile {
  display: none;
}

section.switch-checkbox div {
  float: left;
  width: 200px;
}

section.switch-checkbox div.first,
section.switch-checkbox div.second {
  margin-right: 32px;
}

/* FORM
------------------------------------------------------------ */
div.case,
div.case-login,
div.container {
  margin-top: 32px;
  width: 100%;
}

div.case-login {
  margin-top: 64px;
  position:   relative;
}

div.case-login span.register {
  float:    left;
  position: absolute;
  bottom:   0;
}

div.case input {
  width: 100%;
}

div.case button[type="submit"] {
    
}

div.case-login button[type="submit"] {
  float:    right;
  position: absolute;
  right:    0;
  bottom:   0;
}

form#form_catch div.case button[type="button"],
form#form_catch div.case button[type="submit"],
form#form_news_search div.case button[type="submit"],
form#form_news_edit div.case button[type="submit"]  {
  cursor:         pointer;
  margin-bottom:  32px;
  width:          100%;
}

form#form_catch div.case button[type="button"] {
  font-size:  0.9em;
  margin-top: 32px;
}

div.case i.refresh:before {
  content:      "\f021";
  float:        right;
  font-family:  'FontAwesome';
  font-size:    inherit;
  margin-top:   2px;
}

.container input[type="checkbox"] {
  display: none;
}

.container {
  margin-top: 10px;
}

.container label {
  position: relative;
}

/* Base styles for spans */
.container span::before,
.container span::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
}

/* Check-boxes */
.container span.checkbox {
  border:     1px solid #33ccff;
  cursor:     pointer;
  display:    inline-block;
  float:      right;
  height:     24px;
  margin-top: -2px;
  width:      24px;
}

.container span.checkbox::after {
  color:        transparent;
  content:      '\f00c';
  font-family:  'FontAwesome';
  position:     relative;
  top:          2px;
  left:         2px;
  transition:   color .1s;
}

input[type="checkbox"]:checked + label span.checkbox::after {
  color: #33ccff;
}

.modal {
  display:          none;
  position:         fixed;
  z-index:          1000;
  top:              0;
  left:             0;
  height:           100%;
  width:            100%;
  background:       rgba( 255, 255, 255, .3 ) 
                    url('../images/loading_circle.gif') 
                    50% 50% 
                    no-repeat;
  background-size:  50px;
}

body.loading {
  overflow: hidden;   
}

body.loading .modal {
  display: block;
}

table.last_10_catch,
table.last_10_user_catch {
  display:      table;
  margin-top:   32px;
  margin-left:  auto;
  margin-right: auto;
  max-width:    94%;
}

table.last_10_catch thead,
table.last_10_user_catch thead {
  border-bottom-width: 1px;
/*  font-size: 18px;*/
}

table.last_10_catch tbody,
table.last_10_user_catch tbody {
  text-align: center;
}

table.last_10_catch tbody tr:nth-child(even),
table.last_10_user_catch tbody tr:nth-child(even) {
  background-color: rgba(51, 204, 255, 0.3);
}

table.last_10_catch tbody td,
table.last_10_user_catch tbody td {
  line-height: 32px;
  white-space: nowrap;
}

table.last_10_catch tbody td.no-padding a button,
table.last_10_user_catch tbody td.no-padding a button {
  cursor: pointer;
}

/*
th[class^="hidden-"] {
  display: none;
}
*/

div#fish_info,
div#nickname_info {
  border:     1px solid #33ccff;
  padding:    8px;
  max-width:  389px;
}

div#nickname_info {
  border: 1px solid #ff6666;
}

div#fish_info span.
div#nickname_info span {
  display: inline-block;
}

div#fish_info hr {
  border: 1px solid #33ccff;
}

div#fish_info span.coast {
  margin-bottom:    6px;
  text-decoration:  underline double #33ccff;
/*  text-decoration-color: #33ccff;*/
}

div#fish_info span.additive {
  text-decoration:  underline solid #33ccff;
  margin-bottom:    4px;
}

/*
.badge {
  background-color: #f00;
  border-radius:    30%;
  color:            #fff;
  display:          inline-block;
  font-size:        11px;
  padding:          6px;
  text-align:       center;
  position:         relative;
}
*/

.abo-badge {
  background-color: #f00;
  border-radius:    30%;
  color:            #fff;
  display:          inline-block;
  font-size:        11px;
  padding:          3px;
  text-align:       center;
  position:         relative;
  top:              -70px;
  margin-left:      80px;
}

.video-badge {
  border-radius:    30%;
  color:            #262626;
  display:          inline-block;
  font-size:        11px;
  font-weight:      bolder;
  text-align:       center;
  position:         relative;
  top:              -36px;
  margin-left:      -112px;
}

footer {
  background-color: #262626;
  border-top:       1px;
  border-left:      0;
  border-right:     0;
  border-bottom:    0;
  border-style:     solid;
  border-color:     #33ccff;
  clear:            both;
  height:           2.2em;
  line-height:      2em;
  position:         absolute;
  bottom:           0;
  text-align:       center;
  width:            100%;
}

footer div {
  display: inline-block;
}

footer div:nth-of-type(1),
footer div:nth-of-type(2) {
  margin-right: 8px;
}

footer marquee {
  height: 1.2em;
}

@media only screen and (min-width: 981px) {
  table.last_10_catch thead tr th,
  table.last_10_catch tbody tr td,
  table.last_10_user_catch thead tr th,
  table.last_10_user_catch tbody tr td {
    padding: 0 8px;
  }
}

/*@media only screen and (min-width: 320px) and (max-width: 1024px) {*/
@media only screen and (max-width: 980px) {
  body {
    font-size: 2.75em;
  }

  div.welcome {
    margin: 64px auto 196px auto;
    max-width: 90%;
  }
  
  div.login_content {
    margin-bottom: 196px;
  }
  
  div.case:last-of-type {
    margin-top: 64px;
  }
  
  div.case-login {
    margin-top: 196px;
  }
  
  div.case-login button {
    font-size: 1em;
  }
  
  div#fish_info,
  div#nickname_info {
     max-width: 100%; 
  }
  
  section.switch-checkbox {
    margin: 32px auto;
  }

  section.switch-checkbox div {
    float: none;
    line-height: 1.5;
    width: 720px;
  }

  section.switch-checkbox div.first,
  section.switch-checkbox div.second {
    margin-right: 0;
  }
  
  .container span.checkbox {
    display:    inline-block;
    float:      right;
    font-size:  1.45em;
    width:      72px;
    height:     72px;
    border:     1px solid #33ccff;
  }
  
  /* Force table to not be like tables anymore */
  table.last_10_catch,
  table.last_10_user_catch {
    margin-top:     96px;
    margin-bottom:  196px;
    min-width:      768px;
  }
  
  .container span.checkbox::before,
  .container span.checkbox::after {
    position: relative;
    top:      0px;
    left:     0px;
  }
  
  table.last_10_catch,
  table.last_10_catch thead,
  table.last_10_catch tbody,
  table.last_10_catch thead th,
  table.last_10_catch tbody td,
  table.last_10_catch thead tr, 
  table.last_10_catch tbody tr,
  table.last_10_user_catch,
  table.last_10_user_catch thead,
  table.last_10_user_catch tbody,
  table.last_10_user_catch thead th,
  table.last_10_user_catch tbody td,
  table.last_10_user_catch thead tr, 
  table.last_10_user_catch tbody tr {
    display: block;
  }
  
  table.last_10_catch thead,
  table.last_10_user_catch thead {
    border-bottom-width: 0;
  }
  
  /* Hide table headers (but not display: none;, for accessibility) */
  table.last_10_catch thead tr,
  table.last_10_user_catch thead tr {
    position: absolute;
    top:      -9999px;
    left:     -9999px;
  }
  
  table.last_10_catch thead tr, 
  table.last_10_catch tbody tr,
  table.last_10_user_catch thead tr, 
  table.last_10_user_catch tbody tr {
    border: 1px solid #ccc;
  }

  table.last_10_catch tbody,
  table.last_10_user_catch tbody {
    text-align: unset;
  }

  table.last_10_catch tbody tr,
  table.last_10_user_catch tbody tr {
    margin-bottom: 96px;
  }
  
  table.last_10_catch tbody tr:nth-child(even),
  table.last_10_user_catch tbody tr:nth-child(even) {
    background-color: rgba(51, 204, 255, 0.1);
  }

  table.last_10_catch tbody td,
  table.last_10_user_catch tbody td {
    /* Behave  like a "row" */
    border: none;
    border-bottom: 1px solid #eee; 
    position: relative;
    padding-left: 396px;
    line-height: normal;
  }

  table.last_10_catch tbody td:before,
  table.last_10_user_catch tbody td:before {
    /* Now like a table header */
    position: absolute;
    /* Top/left values mimic padding */
/*    top: 6px;*/
    left: 8px;
    width: 45%; 
    padding-right: 10px; 
    white-space: nowrap;
  }
  
  table.last_10_catch tbody td a,
  table.last_10_user_catch tbody td a {
    width: auto;
  }
  
  table.last_10_catch tbody td a button,
  table.last_10_user_catch tbody td a button {
    line-height:    normal;
    margin-bottom:  8px;
    padding-bottom: 2px;
  }

  /*
  Label the data
  */
  /*table.last_10_catch tbody td:nth-of-type(1):before { content: "Angler"; }
  table.last_10_catch tbody td:nth-of-type(2):before { content: "Datum"; }
  table.last_10_catch tbody td:nth-of-type(3):before { content: "Uhrzeit"; }
  table.last_10_catch tbody td:nth-of-type(4):before { content: "Fischart"; }
  table.last_10_catch tbody td:nth-of-type(5):before { content: "Länge"; }
  table.last_10_catch tbody td:nth-of-type(6):before { content: "Köder"; }
  table.last_10_catch tbody td:nth-of-type(7):before { content: "Angelmethode"; }*/

  table.last_10_catch tbody td:nth-of-type(1):before { content: "Datum"; }
  table.last_10_catch tbody td:nth-of-type(2):before { content: "Uhrzeit"; }
  table.last_10_catch tbody td:nth-of-type(3):before { content: "Fischart"; }
  
  table.last_10_user_catch tbody td:nth-of-type(1):before { content: "Datum"; }
  table.last_10_user_catch tbody td:nth-of-type(2):before { content: "Uhrzeit"; }
  table.last_10_user_catch tbody td:nth-of-type(3):before { content: "Stadt"; }
  table.last_10_user_catch tbody td:nth-of-type(4):before { content: "Bundesland"; }
  table.last_10_user_catch tbody td:nth-of-type(5):before { content: "Gewässer"; }
  table.last_10_user_catch tbody td:nth-of-type(6):before { content: "Wetter"; }
  table.last_10_user_catch tbody td:nth-of-type(7):before { content: "Bewölkung"; }
  table.last_10_user_catch tbody td:nth-of-type(8):before { content: "Temperatur"; }
  table.last_10_user_catch tbody td:nth-of-type(9):before { content: "Luftdruck"; }
  table.last_10_user_catch tbody td:nth-of-type(10):before { content: "Luftfeuchtigkeit"; }
  table.last_10_user_catch tbody td:nth-of-type(11):before { content: "Windrichtung"; }
  table.last_10_user_catch tbody td:nth-of-type(12):before { content: "Windgeschwindigkeit"; }
  table.last_10_user_catch tbody td:nth-of-type(13):before { content: "Wasserqualität"; }
  table.last_10_user_catch tbody td:nth-of-type(14):before { content: "Fischart"; }
  table.last_10_user_catch tbody td:nth-of-type(15):before { content: "Länge"; }
  table.last_10_user_catch tbody td:nth-of-type(16):before { content: "Gewicht"; }
  table.last_10_user_catch tbody td:nth-of-type(17):before { content: "Köder"; }
  table.last_10_user_catch tbody td:nth-of-type(18):before { content: "Angelmethode"; }
  table.last_10_user_catch tbody td:nth-of-type(19):before { content: "Zurückgesetzt"; }
/*  table.last_10_catch tbody td:nth-of-type(14):before { content: ""; }*/
  
  /*.form_catch {
    margin-bottom: 196px; 
  }*/
  
  footer {
    height:       3em;
    line-height:  1.3em;
  }
  
  footer div {
    display:  inline-block;
    width:    auto;
  }
}

@media only screen and (max-width: 800px) {
  table.last_10_catch,
  table.last_10_user_catch {
    margin-left:  16px;
    margin-right: 16px;
  }
}

#cookie-popup {
  text-align: center;
  border: 1px solid #ff6666;
  background-color: #262626;
  color: #fff;
  position: fixed;
  top: 0; 
  left: 0;
  right: 0;
  z-index: 9999;
  padding: 20px;
}
 
#cookie-popup.hidden {
  display: none;
}