@font-face {
  font-family: 'Khula';
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/Khula/Khula-Regular.ttf") format("truetype"); }
@font-face {
  font-family: 'Khula';
  font-weight: 700;
  src: url("../fonts/Khula/Khula-Bold.ttf") format("truetype"); }
@font-face {
  font-family: 'Khula';
  font-weight: 800;
  src: url("../fonts/Khula/Khula-ExtraBold.ttf") format("truetype"); }
*:focus {
  outline: 0; }

html, body {
  cursor: default;
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: 'Khula'; }

label {
  font-weight: 800;
  text-transform: uppercase;
  color: #00c5e6;
  margin-right: 5px; }

.inp-txt {
  border-radius: 50px;
  border: 1px solid #00c5e6;
  padding: 10px 10px 10px 10px;
  color: #00c5e6;
  text-align: center;
  font-weight: 700;
  transition: all 0.3s ease; }

.inp-txt:hover, .inp-txt:focus {
  box-shadow: 0 0 5px #00c5e6; }

.inp-txt::placeholder {
  color: #4de5ff; }

.btn {
  border-radius: 50px;
  border: 1px solid #00c5e6;
  background: #fff;
  color: #00c5e6;
  padding: 10px;
  text-transform: uppercase;
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 3px;
  transition: all 0.3s ease; }

.btn:hover {
  background: #00c5e6;
  color: #fff; }

.btn:active {
  background: #0099b3; }

.btn.danger {
  border-color: crimson;
  color: crimson; }

.btn.danger:hover {
  background: crimson;
  color: #fff; }

.btn.success:active {
  background: #0ed47a; }

.btn.success {
  border-color: #24f194;
  color: #24f194; }

.btn.success:hover {
  background: #24f194;
  color: #fff; }

.btn.success:active {
  background: #0ed47a; }

#wrapper {
  min-height: 100%;
  display: flex;
  flex-direction: column; }
  #wrapper #main {
    flex: 1;
    min-height: 100%;
    display: flex;
    flex-direction: column; }
    #wrapper #main #row-bingo {
      flex: 5;
      display: flex;
      flex-direction: column; }
      #wrapper #main #row-bingo .bingo-row {
        flex: 1;
        display: flex;
        flex-direction: row; }
        #wrapper #main #row-bingo .bingo-row .primary-cell {
          text-transform: uppercase;
          background: #00c5e6;
          color: #fff !important;
          background: #00c5e6 !important; }
        #wrapper #main #row-bingo .bingo-row .bingo-cell {
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: center;
          cursor: pointer;
          text-align: center;
          font-weight: 800;
          font-size: 50px;
          border-left: 2px solid #00c5e6;
          border-bottom: 2px solid #00c5e6;
          color: #00c5e6;
          transition: all 0.3s ease; }
        #wrapper #main #row-bingo .bingo-row .bingo-cell:hover {
          background: #00424d; }
        #wrapper #main #row-bingo .bingo-row .bingo-cell:active {
          background: #00161a; }
        #wrapper #main #row-bingo .bingo-row .bingo-cell.marked {
          background: #00424d;
          color: #cdf8ff; }
    #wrapper #main #row-control {
      display: flex;
      justify-content: space-between;
      padding: 10px;
      border-bottom: 2px solid #00c5e6; }
      #wrapper #main #row-control #col-left .inp-txt {
        width: 30px;
        text-align: center;
        font-weight: 700;
        margin-right: 30px; }
      #wrapper #main #row-control #col-right #btn-pattern {
        width: 37px;
        height: 37px; }
    #wrapper #main #row-footer {
      flex: 1;
      display: flex;
      flex-direction: row; }
      #wrapper #main #row-footer > div {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        text-align: center;
        border-left: 2px solid #00c5e6; }
      #wrapper #main #row-footer #col-logo img {
        display: none;
        margin: 0 auto;
        margin-top: 60px;
        max-width: 200px;
        max-height: 200px; }
      #wrapper #main #row-footer #col-current-pattern {
        color: #00c5e6; }
        #wrapper #main #row-footer #col-current-pattern table#current-pattern td {
          pointer-events: none;
          width: 40px;
          height: 40px; }
      #wrapper #main #row-footer #col-current-draw {
        color: #00c5e6; }
        #wrapper #main #row-footer #col-current-draw #current-draw-number {
          font-weight: 800;
          font-size: 150px;
          text-transform: uppercase; }
  #wrapper .btn-float {
    display: none;
    position: fixed;
    bottom: 0;
    z-index: 1;
    margin: 30px;
    width: 50px;
    height: 50px;
    border-radius: 100%;
    border: 0;
    background: #00c5e6;
    color: #fff;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
    transition: all 0.3s ease; }
  #wrapper .btn-float:hover {
    bottom: 5px;
    background: #1adeff; }
  #wrapper .btn-float:active {
    bottom: 3px;
    background: #00c5e6; }
  #wrapper #btn-back {
    left: 0; }
  #wrapper table.pattern td {
    width: 50px;
    height: 50px;
    background: #f3f3f3;
    border-radius: 10px;
    transition: all 0.3s ease; }
  #wrapper table.pattern td.marked {
    background: #00c5e6; }
  #wrapper table.pattern td.bonus {
    pointer-events: none;
    background: #676767 !important; }
  #wrapper table.pattern td:hover {
    background: #e6e6e6; }
  #wrapper table.pattern td:active {
    background: #b3b3b3; }
  #wrapper #patterns {
    flex: 1;
    display: none;
    flex-wrap: wrap; }
    #wrapper #patterns > div {
      flex-basis: 50%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      margin-top: 70px;
      position: relative;
      top: -35px; }
      #wrapper #patterns > div .pattern {
        pointer-events: none; }
      #wrapper #patterns > div h1, #wrapper #patterns > div h2, #wrapper #patterns > div h3 {
        color: #00c5e6;
        font-weight: 800;
        text-transform: uppercase;
        text-align: center;
        letter-spacing: 5px;
        margin: 0; }
      #wrapper #patterns > div #btns {
        flex: 1;
        display: flex;
        flex-direction: row;
        justify-content: center; }
        #wrapper #patterns > div #btns button {
          width: 100px;
          margin-right: 5px; }
  #wrapper #pattern-edit {
    flex: 1;
    display: none;
    flex-direction: column;
    justify-content: center; }
    #wrapper #pattern-edit > div {
      display: flex;
      flex-direction: row;
      justify-content: center; }
      #wrapper #pattern-edit > div input {
        margin-right: 5px; }
    #wrapper #pattern-edit td {
      cursor: pointer;
      width: 100px;
      height: 100px; }
  #wrapper #current-draw {
    flex: 1;
    display: none;
    flex-direction: column;
    justify-content: center; }
    #wrapper #current-draw #number {
      font-weight: 800;
      font-size: 20em;
      text-align: center;
      text-transform: uppercase;
      color: #00c5e6; }
  #wrapper #current-pattern-show {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: #00c5e6; }
    #wrapper #current-pattern-show table {
      margin-top: 30px; }
      #wrapper #current-pattern-show table td {
        pointer-events: none;
        width: 80px;
        height: 80px; }
    #wrapper #current-pattern-show div {
      flex: 1;
      display: flex;
      flex-direction: column;
      text-align: center; }
      #wrapper #current-pattern-show div h1, #wrapper #current-pattern-show div h2, #wrapper #current-pattern-show div h3 {
        margin: 0; }
      #wrapper #current-pattern-show div h1 {
        font-size: 80px; }
      #wrapper #current-pattern-show div h2 {
        font-size: 50px; }
      #wrapper #current-pattern-show div h3 {
        font-size: 30px; }

/*# sourceMappingURL=style.css.map */