/* Harmonogram i informacje dnia */
.ramowka {
  display    : inline;
  margin-left: 10px;
  white-space: nowrap;
}

.info_dnia {
  display    : inline;
  margin-left: 10px;
  white-space: nowrap;
}

/* Okna i warstwy popupow */
.stick_block_layer {
  background: #00000099;
  opacity   : 0.17;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
  filter    : alpha(opacity=70);
  width     : 100%;
  height    : 100%;
  position  : fixed;
  top       : 0;
  left      : 0;
}

.zd-okno-popup {
  width           : 500px;
  height          : 500px;
  border-radius   : 20px;
  border          : 3px solid orange;
  background-color: black;
  color           : white;
}

/* Formularze i wspolne teksty */
@keyframes typingGlow {
  0% {
    box-shadow: 0 0 10px #ff0000;
  }

  50% {
    box-shadow: 0 0 20px #ff0000;
  }

  100% {
    box-shadow: 0 0 10px #ff0000;
  }
}

input[type="text"],
input[type="text"]:hover,
input[type="text"]:active {
  background-color: #000000;
  color           : #ff0000;
  font-weight     : bold;
  border-radius   : 5px;
  border          : 1px solid #019901;
  box-sizing      : border-box;
  caret-color     : #ff0000;
}

input:focus {
  background-color: #000000 !important;
  color           : #ff0000 !important;
  border-color    : #ff0000;
  outline         : none;
  animation       : typingGlow 1s infinite;
  caret-color     : #ff0000;
}

input:-webkit-autofill {
  box-shadow             : 0 0 0 1000px #000000 inset !important;
  -webkit-text-fill-color: #ff0000 !important;
  caret-color            : #ff0000;
  transition             : background-color 0s ease-in-out 0s;
}

input:-webkit-autofill:focus {
  background-color       : #000000 !important;
  -webkit-text-fill-color: #ff0000 !important;
  caret-color            : #ff0000;
}

input[type="password"],
input[type="password"]:hover,
input[type="password"]:active {
  background-color: #000000;
  color           : #ff0000;
  font-weight     : bold;
  border-radius   : 5px;
  border          : 1px #019901 solid;
  box-sizing      : border-box;
}

input[type="submit"] {
  -webkit-appearance: none;
  -moz-appearance   : none;
  appearance        : none;
  border            : 3px solid #019901;
  background        : hsl(0 0 0/0);
  padding           : 0.35em 0.5em;
  color             : #ffffff;
  border-radius     : 2em;
  transition        : 1s;

}

input[type="submit"]:hover,
input[type="submit"]:focus,
input[type="submit"]:active {
  background: #ff0000;
  color     : #ffffff;
}

input[type="number"] {
  background-color: #000000;
  color           : #ffffff;
  font-weight     : bold;
  border-radius   : 5px;
  border          : 1px #019901 solid;
  box-sizing      : border-box;
}

input[type="color"] {
  background-color: #000000;
  border-radius   : 5px;
  border          : 1px #019901 solid;
}

textarea {
  width           : 300px;
  height          : 60px;
  padding         : 5px 10px;
  background-color: #000000;
  color           : #ffffff;
  font-weight     : bold;
  border-radius   : 5px;
  border          : 1px #019901 solid;
  box-sizing      : border-box;
}

.legend {
  display         : block;
  padding-left    : 10px;
  padding-right   : 10px;
  border          : 1px solid #019901;
  background-color: #000000;
  color           : goldenrod;
  box-shadow      : 0 0 15px #019901;
  border-radius   : 20px;
}

fieldset {
  border       : 1px solid #019901;
  box-shadow   : 0 0 15px #019901;
  border-radius: 20px;
}

.gold {
  color      : #ffaa22;
  font-weight: bolder;
  font-size  : 18px;
}

.numer {
  color      : #ffaa22;
  font-size  : 30px;
  font-weight: bolder;
}

.dzien {
  color      : #34c534;
  font-size  : 12px;
  font-weight: bolder;
}

.dzien1 {
  color      : #00c3ffd0;
  font-size  : 16px;
  font-weight: bolder;
  text-align : center;
}

.dzien2 {
  margin-top   : 5px;
  margin-bottom: 5px;
  color        : #e99f15;
  font-size    : 14px;
  text-align   : center;
  font-weight  : bolder;
}

.czerwony,
.zolty,
.zielony,
.niebieski,
.blenkit {
  font-size  : 12px;
  font-weight: bolder;
}

.czerwony {
  color: #ff0000;
}

.zolty {
  color: #ffff00;
}

.zielony {
  color: #33ff00;
}

.niebieski {
  color: #0000ff;
}

.blenkit {
  color      : #00ddff;
  font-weight: bolder;
}

.iloscpozdro,
.iloscpiosenek,
.iloscpp-puls {
  display    : inline-block;
  font-size  : 46px;
  font-weight: bolder;
  text-align : center;
}

.iloscpozdro,
.iloscpiosenek {
  color: #00ff00;
}

.iloscpp-puls {
  color    : #ffd000;
  animation: pulse1 1.5s ease-in-out infinite;
}

@keyframes pulse1 {

  0%,
  100% {
    opacity  : 1;
    transform: scale(1);
  }

  50% {
    opacity  : 0.4;
    transform: scale(0.98);
  }
}

.text_1 {
  font-family: Arial, Helvetica;
  font-size  : 12px;
  color      : #ffffff;
}

.text_5 {
  font-family: Arial, Helvetica;
  font-size  : 12px;
  color      : #00ddff;
}

.logowanie_naglowek {
  font-family: Arial, Helvetica;
  font-size  : 16px;
  color      : #48de02;
  font-weight: bolder;
  text-align : center;
  margin     : 10px auto;
  text-shadow: #ffaa22 0px 0px 2px;
}

.piosenki_1 {
  font-family: Arial, Helvetica;
  font-size  : 16px;
  color      : #48de02;
  font-weight: bolder;
}

.piosenki_2 {
  font-family: Arial, Helvetica;
  font-size  : 16px;
  color      : #ffffff;
  font-weight: bolder;
}

/* Konsola, menu i statystyki */
body {
  background-color: #000040;
  color           : #ffa51a;
  font-weight     : bolder;
}

table {
  background-color: #2a2a2a;
  margin          : auto;
}

.menu {
  font-family  : Arial, Helvetica;
  font-size    : 14px;
  color        : #9b9b9b;
  border       : 1px solid #019901;
  border-radius: 15px;
  text-align   : center;
}

.td1 {
  color        : #ffffff;
  font-family  : Arial, Helvetica;
  font-size    : 12px;
  border-radius: 25px;
  text-align   : center;
}

.td2 {
  border       : 1px solid #019901;
  color        : #ffffff;
  font-family  : Arial, Helvetica;
  font-size    : 14px;
  border-radius: 15px;
  text-align   : left;
  padding      : 0px 0px 0px 15px;
}

.td3 {
  border       : 1px solid #019901;
  color        : #ffffff;
  font-family  : Arial, Helvetica;
  font-size    : 14px;
  border-radius: 15px;
  text-align   : left;
  padding      : 10px 0px 0px 10px;
}

.td4 {
  border       : 1px solid #019901;
  color        : #ffffff;
  font-family  : Arial, Helvetica;
  font-size    : 14px;
  border-radius: 15px;
  text-align   : center;
}

.td_pozdrowienia {
  border       : 1px solid #019901;
  color        : #ffffff;
  font-family  : Arial, Helvetica;
  border-radius: 15px;
  text-align   : left;
  padding      : 10px 0px 0px 10px;
}

.konsole {
  border       : 1px solid #019901;
  color        : #9b9b9b;
  font-family  : Arial, Helvetica;
  font-size    : 14px;
  border-radius: 15px;
  text-align   : center;
  width        : 25%;
}

.tytul-statystyki {
  color      : #b0e0e6;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size  : 12px;
  font-weight: bolder;
  text-align : center;
  margin     : 0px 0 0 0px;
}

.serduszka-statystyki {
  color      : #ff8fa8;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size  : 12px;
  font-weight: bolder;
  text-align : center;
  margin     : 0px 0 0 0px;
}

.dj-statystyki {
  color      : #00e1ff;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size  : 14px;
  font-weight: bolder;
  text-align : center;
  margin     : 0px 0 0 0px;
}

.cyfra,
.cyfra1,
.cyfra-puls {
  display    : inline-block;
  font-size  : 30px;
  font-weight: bolder;
  text-align : center;
}

.cyfra {
  color: #10dd10;
}

.cyfra1 {
  color: #ff6060;
}

.cyfra-puls {
  color    : #ffd000;
  animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {

  0%,
  100% {
    opacity  : 1;
    transform: scale(1);
  }

  50% {
    opacity  : 0.4;
    transform: scale(0.98);
  }
}

.zalogowany {
  color      : #00ffdd;
  font-size  : 14px;
  font-weight: bolder;
}

.logujeszsie_jako {
  color      : #00ffdd;
  font-size  : 20px;
  font-weight: bolder;
}

.zalogowany_jest {
  color      : #00ff00;
  font-size  : 30px;
  font-weight: bolder;
}

.zalogowany_nick {
  color      : #0099ff;
  font-size  : 14px;
  font-weight: bolder;
}

.ia_id {
  border     : 0 none;
  color      : #afafaf;
  font-family: Verdana, Arial;
  font-size  : 20px;
  font-weight: bold;
}

.ia_obow {
  border     : 0 none;
  color      : #ff1e1e;
  font-family: Verdana, Arial;
  font-size  : 18px;
  font-weight: bold;
  text-align : left;
}

/* Formularze pozdrowien i zamawiania piosenek */
#content {
  width        : 400px;
  margin       : 50px auto;
  padding      : 10px;
  text-align   : center;
  background   : #2a2a2a;
  border       : 1px solid #019901;
  box-shadow   : 0px 0px 50px 5px #019901;
  border-radius: 10px;
}

#bar {
  background-color: #ff0000;
  height          : 16px;
  width           : 0;
}

#barbox {
  background-color: #666;
  border          : 1px solid #00ff22;
  float           : none;
  height          : 16px;
  margin          : -20px 0 0 90px;
  width           : 100px;
}

#count {
  color      : orange;
  float      : none;
  font-family: Arial, Helvetica;
  font-size  : 20px;
  font-weight: bold;
  margin     : 0 0 0 115px;
}

#contentbox {
  border     : 1px solid #333;
  font-family: Arial, Helvetica;
  font-size  : 14px;
  height     : 130px;
  width      : 250px;
}

.tip {
  background   : none repeat scroll 0 0 #1d1d1d;
  border-color : #ffffff;
  border-radius: 3px 3px 3px 3px;
  border-style : solid;
  border-width : 1px;
  color        : #ffffff;
  display      : none;
  padding      : 10px;
  position     : absolute;
  z-index      : 1000;
}

.tlopozdro {
  height: 0px;
  width : 350px;
}

.nazwapozdro {
  font-family: "comic sans ms";
  color      : #ffa51a;
  font-size  : 20px;
  padding    : 15px 0 0;
}

.ramka_pozdro_wyglond {
  background-color: #0000a7;
  border          : 2px solid #ffa51a;
  box-shadow      : 0px 0 10px 1px #cccccc;
  color           : #fff;
  font-size       : 12px;
  font-weight     : bold;
  padding         : 5px 0 0 10px;
}

.ramka_pozdro_pozycja {
  margin: 10px 0 0;
}

.znakipozdro {
  color    : orange;
  font-size: 11px;
  padding  : 5px;
}

.ramka_kto_wyglond {
  background-color: #0000a7;
  border          : 2px solid #ffa51a;
  box-shadow      : 0px 0 10px 1px #cccccc;
  color           : #fff;
  font-size       : 12px;
  font-weight     : bold;
  padding         : 5px 0 0 10px;
  height          : 25px;
  width           : 275px;
}

.ramka_kto_wyglond1 {
  background-color: #0000a7;
  border          : 2px solid #ffa51a;
  box-shadow      : 0px 0 10px 1px #cccccc;
  color           : #fff;
  font-size       : 12px;
  font-weight     : bold;
  padding         : 5px 0 0 10px;
  height          : 25px;
  width           : 300px;
}

.ramka_ktopozdro_pozycja {
  padding: 5px 0 0;
}

.nlipozdro {
  color    : #fff;
  font-size: 16px;
  padding  : 3px 0 0;
}

.wyslij_pozycjapozdro {
  margin: 3px 0 0;
}

.tlopiosenki {
  height: 350px;
  width : 350px;
}

.nazwapiosenki {
  font-family: "comic sans ms";
  color      : #ffa51a;
  font-size  : 20px;
  padding    : 15px 0 0 10px;
}

.wykonawca {
  color    : #fff;
  font-size: 16px;
  margin   : 15px 0 0 -240px;
}

.tytul {
  color    : #fff;
  font-size: 16px;
  margin   : 15px 0 0 -300px;
}

.wyslij_wyglond {
  background-color: #0000a7;
  border          : 3px solid #ffa51a;
  box-shadow      : 0px 0 10px 1px #999999;
  color           : #ffffff;
  font-size       : 16px;
  font-weight     : bold;
  margin          : 10px 0 0 100px;
  width           : 150px;
}

.czas {
  color      : #00ddff;
  font-family: Arial, Helvetica;
  font-size  : 20px;
  font-weight: bold;
  margin     : 0 0 0 0px;
}

.czas_dj {
  color      : #00ddff;
  font-family: Arial, Helvetica;
  font-size  : 16px;
  font-weight: bold;
  text-align : center;
}

.czas_dj_text {
  color      : #ffa600;
  font-family: Arial, Helvetica;
  font-size  : 16px;
  font-weight: bold;
  text-align : center;
}

.ustawienia {
  color          : #62aeb9;
  font-family    : Arial, Helvetica;
  text-decoration: none;
  font-size      : 16px;
  font-weight    : bold;
  text-align     : center;
  width          : 200px;
  height         : 15px;
  margin         : 0 0 0 0px;
  padding        : 2 0 2 0px;
  border         : 2px solid;
  border-color   : #019901;
  background     : #000000;
  border-radius  : 15px;
  box-shadow     : 0px 0 10px 1px #666666;
  text-shadow    : 0px 0px 10px #000000;
}

.nick {
  color      : #00ff7f;
  font-family: Arial, Helvetica;
  font-size  : 14px;
  font-weight: bold;
  margin     : -2px 0 0 10px;
}

.infokonsola {
  color      : orange;
  font-size  : 16px;
  font-weight: bold;
  text-align : center;
  margin-top : 100px;
}

.infopozdro {
  color      : orange;
  font-size  : 14px;
  font-weight: bold;
  height     : 350px;
  text-align : center;
  width      : 350px;
}

.infoip {
  color      : orange;
  font-size  : 14px;
  font-weight: bold;
  height     : 350px;
  text-align : center;
  width      : 350px;
}

.infopiosenka {
  color      : #ff0000;
  font-size  : 12px;
  font-weight: bold;
  height     : 350px;
  text-align : center;
  width      : 350px;
}

.input {
  background: none repeat scroll 0 0 #ffffcc;
  border    : 1px solid #000066;
}

.button {
  border       : 2px solid #019901;
  background   : #000000;
  color        : #ffffff;
  border-radius: 5px;
  text-align   : center;
}

p.error {
  color      : #ff0000;
  font-size  : 10pt;
  font-weight: bold;
  text-align : center;
}

div.c1 {
  text-align: center;
}

div.c2 {
  text-align: left;
}

a:link,
a:visited {
  color          : #f0ffff;
  font-size      : 14px;
  font-weight    : bold;
  text-decoration: none;
}

a:hover {
  color          : #ffffff;
  text-decoration: underline;
}

.napis-pozdrowienia {
  color      : #00ddff;
  font-size  : 18px;
  font-weight: bold;
}

.data-pozdrowienia {
  color      : #ffaa22;
  font-size  : 18px;
  font-weight: bold;
}

.timer-number {
  color      : yellow;
  font-size  : 18px;
  font-weight: bold
}

.timer-text {
  color      : #1ba300;
  font-size  : 18px;
  font-weight: bold
}