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

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

.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;
}

.stick_popup {
  height          : 200px;
  width           : 500px;
  box-shadow      : 0px 0px 17px #4a4a4a;
  background-color: #242424;
  color           : #ff3300;
  text-align      : center;
  border          : 2px solid #019901;
  animation       : zoomin 0.7s;
  border-radius   : 15px;
}

@keyframes zoomin {
  0% {
    transform: scale(0);
    opacity  : 0;
  }

  50% {
    transform: scale(1.04);
    opacity  : 1;
  }

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

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

.zd-konsola-popup-data {
  color      : #01cf01;
  font-weight: bold;
  text-align : center;
  font-size  : 46px;
  font-family: Arial;
}

.zd-konsola-popup-imieniny {
  display    : block;
  color      : #ff9100;
  font-weight: bold;
  text-align : center;
  font-size  : 24px;
  font-family: Arial;
}

.zd-konsola-popup-imiona {
  color      : #00eeff;
  font-weight: bold;
  text-align : center;
  font-size  : 20px;
  font-family: Arial;
  display    : inline;
  white-space: nowrap;
}

.zd-konsola-popup-dzien-text {
  color      : #ff6060;
  font-weight: bold;
  font-size  : 20px;
  font-family: Arial;
}

.zd-konsola-popup-dzien {
  color      : #e5ff00;
  font-weight: bold;
  font-size  : 20px;
  font-family: Arial;
}

.zd-konsola-popup-wz {
  color      : #ffd000;
  font-weight: bold;
  font-size  : 20px;
  font-family: Arial;
}

.stick_content {
  padding: 2px;
}

/*
CSS3 animation keyframes.
*/
@-webkit-keyframes zoomin {
  0% {
    -webkit-transform: scale(0);
    -ms-transform    : scale(0);
    transform        : scale(0);
    opacity          : 0;
  }

  50% {
    -webkit-transform: scale(1.04);
    -ms-transform    : scale(1.04);
    transform        : scale(1.04);
    opacity          : 1;
  }

  100% {
    -webkit-transform: scale(1);
    -ms-transform    : scale(1);
    transform        : scale(1);
    opacity          : 1;
  }
}

@-ms-keyframes zoomin {
  0% {
    -webkit-transform: scale(0);
    -ms-transform    : scale(0);
    transform        : scale(0);
    opacity          : 0;
  }

  50% {
    -webkit-transform: scale(1.04);
    -ms-transform    : scale(1.04);
    transform        : scale(1.04);
    opacity          : 1;
  }

  100% {
    -webkit-transform: scale(1);
    -ms-transform    : scale(1);
    transform        : scale(1);
    opacity          : 1;
  }
}

@keyframes zoomin {
  0% {
    -webkit-transform: scale(0);
    -ms-transform    : scale(0);
    transform        : scale(0);
    opacity          : 0;
  }

  50% {
    -webkit-transform: scale(1.04);
    -ms-transform    : scale(1.04);
    transform        : scale(1.04);
    opacity          : 1;
  }

  100% {
    -webkit-transform: scale(1);
    -ms-transform    : scale(1);
    transform        : scale(1);
    opacity          : 1;
  }
}

/* --------------------------------- Konsola -------------------------------- */
@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"] {
  appearance   : none;
  border       : 3px solid #019901;
  background   : hsl(0 0 0/0);
  padding      : 0.35em 0.5em;
  color        : #ffffff;
  border-radius: 2em;
  transition   : 1s;

  &:hover,
  &:focus,
  &: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;
}

.zielony {
  color      : #00ff00;
  font-weight: bolder;
  font-size  : 16px;
}

.czerwony {
  color      : #ff0000;
  font-weight: bolder;
  font-size  : 16px;
}

.niebieski {
  color      : #0000ff;
  font-weight: bolder;
  font-size  : 16px;
}

.zolty {
  color      : #ffff00;
  font-weight: bolder;
  font-size  : 16px;
}

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

.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 {
  color      : #ff0000;
  font-size  : 12px;
  font-weight: bolder;
}

.zolty {
  color      : #ffff00;
  font-size  : 12px;
  font-weight: bolder;
}

.zielony {
  color      : #33ff00;
  font-size  : 12px;
  font-weight: bolder;
}

.niebieski {
  color      : #0000ff;
  font-size  : 12px;
  font-weight: bolder;
}

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

.iloscpozdro {
  color      : #00ff00;
  font-size  : 46px;
  font-weight: bolder;
}

.iloscpiosenek {
  color      : #00ff00;
  font-size  : 46px;
  font-weight: bolder;
}

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

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

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

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

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

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

.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;
}

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;
}

.td4a {
  border       : 1px solid #019901;
  color        : #ff0000;
  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%;
}

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

.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 {
  display    : inline-block;
  font-size  : 30px;
  font-weight: bolder;
  text-align : center;
}

.cyfra {
  color: #10dd10;
}

.cyfra1 {
  color: #ff6060;
}

.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;
}

#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;
}

.ramka_wykonawca {
  background-color: #0000a7;
  border          : 3px solid #ffa51a;
  box-shadow      : 0px 0 10px 1px #666666;
  color           : #fff;
  font-size       : 14px;
  height          : 25px;
  margin          : -24px 0 0 110px;
  width           : 275px;
}

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

.ramka_tytul {
  background-color: #0000a7;
  border          : 3px solid #ffa51a;
  box-shadow      : 0px 0 10px 1px #666666;
  color           : #fff;
  font-size       : 14px;
  font-weight     : bold;
  height          : 25px;
  margin          : -24px 0 0 110px;
  width           : 275px;
}

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

.ramka_dokogo {
  background-color: #0000a7;
  border          : 3px solid #ffa51a;
  border-radius   : 15px;
  color           : #fff;
  font-weight     : bold;
  font-size       : 14px;
  height          : 25px;
  margin          : -24px 0 0 110px;
  width           : 275px;
}

.ramka_dokogo1 {
  width           : 300px;
  height          : 50px;
  padding         : 12px 20px;
  box-sizing      : border-box;
  border          : 2px solid #ccc;
  border-radius   : 15px;
  background-color: #000;
  font-size       : 16px;
  resize          : none;
  color           : #fff;
}

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

.ramka_odkogo {
  background-color: #0000a7;
  border          : 3px solid #ffa51a;
  border-radius   : 15px;
  color           : #fff;
  font-weight     : bold;
  font-size       : 14px;
  height          : 55px;
  margin          : -24px 0 0 110px;
  width           : 275px;
}

.ramka_srodek {
  background-color: #0000a7;
  color           : #fff;
  font-weight     : bold;
  font-size       : 14px;
  height          : 25px;
  width           : 260px;
  border          : 0px;
}

.ramka_srodek1 {
  background-color: #0000a7;
  color           : #fff;
  font-weight     : bold;
  font-size       : 14px;
  height          : 50px;
  width           : 260px;
  border          : 0px;
}

.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;
  -webkit-box-shadow: 0px 0 10px 1px #666666;
  -moz-box-shadow   : 0px 0 10px 1px #666666;
  -ms-box-shadow    : 0px 0 10px 1px #666666;
  -o-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
}