@font-face {
  font-family: 'Edit Undo Line BRK';
  src: url('../../css/EditUndoLineBRK.woff2') format('woff2'),
  url('../../css/EditUndoLineBRK.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}


@font-face {
  font-family: 'Visitor';
  src: url('../../css/VisitorTT1BRK.woff2') format('woff2'),
  url('../../css/VisitorTT1BRK.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}


@font-face {
  font-family: 'Visitor TT2 BRK';
  src: url('../../css/VisitorTT1BRK.woff2') format('woff2'),
  url('../../css/VisitorTT1BRK.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'ModeNine';
  src: url('../../css/ModeNine.woff2') format('woff2'),
  url('../../css/ModeNine.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}


html,
body {
  height:100vh;
  width:100%;

}

body {
/*background: rgb(6,5,47);
background: linear-gradient(0deg, rgba(6,5,47,1) 0%, rgba(139,42,147,1) 100%);
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;*/
color:#ffffff;
overflow-wrap: break-word;
  word-wrap: break-word;
font-family: "ModeNine", Monaco, monospace;
}

h1,h2,h3
{
  color:#1af7ff;
  font-family:  'Edit Undo Line BRK';
}

h2 {
  color:#FFFD34;
}

h3,h4,h5,h6
{
  color:#FFFD34;
  font-family: "ModeNine", Monaco, monospace;
  text-shadow: 0 0 10px #FFFD34;
}

h1 {
  font-size:5em;
  text-align: center;
  line-height: 1em;
  padding-left:20px;
  padding-right:20px;
}

h2 {
  font-size:2.5em;
  text-align: center;
}

h3 {
  font-size:2em;
  text-align: center;
}



.error
{
  color:#D162DB;
}


.remove-song
{
  background-color:#150639;
  padding:4px;
  margin-bottom:4px;
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
  cursor: pointer;
}

.remove-song:hover
{
  background-color:#251649;
  
}

.replacement-song {
  cursor: pointer;
}

.replacement-song:hover
{
  background-color:#251649;
  
}


#card-area {
  display:flex;
  /*height:80vh!important;*/
/*  flex-direction: column;
  */
  flex-wrap: wrap;
  justify-content: space-around;
    align-items: center;
}


#call-bingo
{
  height:max-content;
  width:initial;
  margin:10px;
  white-space: normal;
}



#bingocard {
  height:80vh;
  /*flex-wrap: wrap;
  flex-direction: row;
  display:flex;*/

  /*flex-grow:1;*/
  display: grid; /* Use CSS Grid Layout */
  grid-template-columns: repeat(4, 1fr); /* 4 columns of equal width */
  grid-template-rows: repeat(4, 1fr); /* 4 rows of equal height */

}

#bingocard > div {
  display: flex; 
  flex-basis: calc(25%);  
  justify-content: center;
  flex-direction: column;
  padding:2px; 
}



/* Medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) {


  #bingocard {
      height:unset;
  }

  header img
  {
    width:100px;
    height:100px;
  }

  h1 {
    font-size:2.5em;
  }
  h2 {
    font-size:2em;
  }

  h3 {
    font-size:1.5em;
  }

  h4 {
    font-size:1.2em;
  }

}

/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {

  #card-area {
    /*height:98vh;*/
  }

  
  h1 {
    font-size:2em;
    -ms-word-break: break-all;
    word-break: break-all;

    /* Non standard for WebKit */
    word-break: break-word;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
  }
  h2 {
    font-size:1.9em;
  }

  h3 {
    font-size:1.4em;
  }

  h4 {
    font-size:1.1em;
  }
}

header {
    display: flex;
    justify-content: center;
    align-items: center;
    height:120px;
}
header a img {
  display: flex;
  height:100%;
  object-fit: cover;
  margin-right:1em;

}

header a {
  display: flex;
  height:100%;
}

a
{
  color:  #ffe400;
  text-decoration: none;

}

a:hover {
  color: #fff400;
  text-decoration: none;
}


label
{
  margin-bottom:0px;
}


button {
  font-family: 'Visitor';
  font-size:2em;
  background-color:#1af7ff;
  border:4px solid #000000;
  box-shadow: inset 4px 4px 0px 0px RGBA(255,255,255,0.75);
  padding-left:12px;
  padding-right:12px;
}

.centered {
  margin: 4px auto;
  display: block;
  text-align:center;

}

.largeText {
  font-size:2em;
}

/*input {
  font-family: 'Visitor';
  border:4px solid #000000;
  background-color:#FFFFFF;
  box-shadow: inset 4px 4px 0px 0px #DDD;
}
*/

body {
    font-size:1.2em;
}



button {
  cursor: pointer;
}


@media (max-width: 1000px) {
   
  .freetext-input {
    
    font-size:1.1em;

  }

  

    button {
      width:95%;
    }

    input[type=text] {
      width:95%;
    }
}

hr {
    border-top: 1px solid #1af7ff;
}


/*bingo stuff*/

.uppercase {
  text-transform: uppercase;
}

:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    text-transform: none;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
    text-transform: none;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
    text-transform: none;
}
::placeholder { /* Recent browsers */
    text-transform: none;
}

#bingocard {
    width: 100%;
/*    height:100vh;*/
    padding: 0px;
    outline: 4px solid #f79523;
}

.cell-toggle {
    width: 100%;
    height:150px;
    padding: 4px;
    overflow: auto;
    background: #fff;
    border: 0;
    font-weight: 500;
    cursor: pointer;
    font-size:1.8vw;
    font-family:initial;
}

.cell-toggle[aria-pressed=false] {
    background: #EEEEEE;
    color: #000;
}


.cell-toggle[aria-pressed=true] {
    background: #ffe400;
    color: #000;
}


.cell-toggle.cell-confirm {
  background: #1af7ff;
  color: #000;
}


#player-list {
    border:4px solid #000000;
    margin: auto;
    text-align:center;
}



#songs {
  padding:8px;
  font-family: "ModeNine", Monaco, monospace;
  color:#FFFD34;
  margin-top:12px;
  margin-bottom:12px;
  font-size:1.1em;
  text-align:left;
}

.creator-song-row {
  background-color: RGBA(0,0,0,0.2);
}

.broken-song {
  background-color: RGBA(135,35,25,.75)!important;
}


@media (max-width: 1000px) {


  #player-list {
      border:4px solid #000000;
      margin: auto;
      text-align:center;
      width:100%;
  }

  iframe#player {
      width:100%;
      max-width:100%;
  }
}

.smallBTN {
  font-size:1.2em!important;
  margin-top:5px;
  margin-bottom:5px;
}

.section {
  clear:left;
  margin-bottom:8px;
}

.freetext-input {
  font-family:"ModeNine", Monaco, monospace !important;
  width: 100%;
  font-size:1.1em;
  margin-bottom: 8px;
}


.freetext-input:disabled {
    background:#AAAAAA;
    box-shadow:none;
}

/*sm breakpoint*/
@media (max-width: 758px)
{
  h1 {
    font-size:2em;
  }
  .cell-toggle {
    font-size:.8em;
    height:100px;
  }
  #np-logo {
    width: 62px;
    height:62px;
  }
}


@media (max-width: 758px)
{
  header {
    height:80px;
  }

  .smallBTN {
    width:auto;
  }
}


@media (max-width: 400px)
{
  header  {
    height:50px;
  }

  .smallBTN {
    width:auto;
  }
}



input[type=checkbox] { display:none; } /* to hide the checkbox itself */
input[type=checkbox] + span:after {
  display: inline-block;
  font-family: FontAwesome;
  font-size:1.5em;
  color:#1af7ff;
}

input[type=checkbox] + span:after { content: "\f0c8"; } /* unchecked icon */
input[type=checkbox] + span:after { letter-spacing: 10px; } /* space between checkbox and label */

input[type=checkbox]:checked + span:after { content: "\f14a"; } /* checked icon */
input[type=checkbox]:checked + span:after { letter-spacing: 10px; } /* allow space for check mark */




input[type=radio] { display:none; } /* to hide the checkbox itself */
input[type=radio] + span:after {
  display: inline-block;
  font-family: FontAwesome;
  font-size:1.5em;
  color:#1af7ff;
}

input[type=radio] + span:after { content: "\f0c8"; } /* unchecked icon */
input[type=radio] + span:after { letter-spacing: 10px; } /* space between checkbox and label */

input[type=radio]:checked + span:after { content: "\f14a"; } /* checked icon */
input[type=radio]:checked + span:after { letter-spacing: 10px; } /* allow space for check mark */


input[type=radio]:disabled  + span:after {
  content: "\f023"!important;
}

input[type=checkbox]:disabled  + span:after {
  content: "\f023"!important;
}

select, option {
  font-family: 'ModeNine' !important;
    font-size:26px;
    border: 4px solid #150639;
    background-color: #fffd34;
    box-shadow: inset 4px 4px 0px 0px #BfBd14;
    color: #150639;
}

select
{
  margin-bottom: 8px;
}

/* Youtube Overlay*/
.overlay-video {
  display: none;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  opacity: 0;
  -ms-transition: opacity 600ms ease-in;
  transition: opacity 600ms ease-in;
  -ms-transition: opacity .6s;
  transition: opacity .6s;
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: rgba(0, 0, 0, .7);
  z-index: 999999;
}

.o1 {
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  opacity: 1;
  -ms-transition: opacity 600ms ease-out;
  transition: opacity 600ms ease-out;
  -ms-transition: opacity .6s;
  transition: opacity .6s;
}

.videoWrapperExt {
  position: relative;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  max-width: 982px;
  padding: 0 20px;
}

.videoWrapper {
  position: relative;
  padding-bottom: 56.25%;
  /* 16:9 */
  height: 0;
}

.videoWrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.videoWrapper .close {
 background-image:url(/img/icons/close.png);
  position: absolute;
  top: -50px;
  right: 0px;
  cursor: pointer;
  z-index: 9999;
  height: 40px;
  width: 40px;
  background-size: 40px;
  opacity:1;
  @media (max-width: 767px) and (orientation: landscape) {
    display: none;
  }
}

.stats {
  font-family: 'Visitor' !important;
  color:#1af7ff;
}

.pscore {
  padding-left:10px;
  font-family: 'Visitor' !important;
  font-size:1.3em;
  color:#1af7ff;
}

.pscore-alt {
  padding-left:10px;
  font-family: 'Visitor' !important;
  font-size:1.3em;
  color:#FFFFFF;
}

#player-list {
  padding:10px;
  max-width: 600px;
  border: 8px solid #1af7ff;
  box-shadow: inset 4px 4px 0px 0px #000000;
}

#player {
  max-width:100%;
}

.accordion-header {
  background:none;
  border:none;
  outline:none;
  padding:0px !important;
}


.accordion-content {
  background:none;
  border:none;
  outline:none;
  padding:0px !important;
}

#player-controls {
  display:flex;
  flex-wrap:wrap;
}


#score-table {
  margin:0px;
}

#player-list h4 {
  margin-bottom:1rem;
}

#score-table td {
  border: 0px;
  font-family: "ModeNine", Monaco, monospace;
  color:#ffffff;
  border-top:0px !important;
  vertical-align: middle !important;
  padding:0.25rem;

}


/*flex bingo card*/


.cell-toggle {
  height:100%;
  word-break: break-word;
  padding:4px; 
}

.incorrect[aria-pressed=false] {
  -webkit-animation: incorrectFade ease-out 0.5s; 
    animation: incorrectFade ease-out 0.5s;
    background-color:#8b2a93;
    color:#8b2a93;
}

.incorrect[aria-pressed=true] {
  -webkit-animation: incorrectFade ease-out 0.5s; 
    animation: incorrectFade ease-out 0.5s;
    background-color:#8b2a93;
    color:#8b2a93;
}

@-webkit-keyframes incorrectFade {
  0% { background-color:#EEEEEE; color:#000; }
  100% { background-color:#8b2a93;color:#8b2a93;  } 
}

@keyframes incorrectFade { 
  0% { background-color:#EEEEEE; color:#000;}
  100% { background-color:#8b2a93; color:#8b2a93; } 
}


.correct[aria-pressed=false] {
  -webkit-animation: correctFade ease-out 0.5s; 
    animation: correctFade ease-out 0.5s;
    background-color:#FFFD34;
}

.firstCorrect[aria-pressed=false], .firstCorrect[aria-pressed=true] {
  background-image: url(/img/icons/star-lc.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  image-rendering: pixelated;
}

.correct[aria-pressed=true] {
  -webkit-animation: correctFade ease-out 0.5s; 
    animation: correctFade ease-out 0.5s;
    background-color:#FFFD34;
}

@-webkit-keyframes correctFade {
  0% { background-color:#EEEEEE; }
  100% { background-color:#FFFD34; } 
}

@keyframes correctFade { 
  0% { background-color:#EEEEEE; }
  100% { background-color:#FFFD34; } 
}

.player-row {
  cursor: pointer;
}

.videoWrapper .videoButtons
 {
  
   position: absolute;
   top: -50px;
   left: 0px;
   cursor: pointer;
   z-index: 9999;
   height: 40px;
   background-size: 40px;
   opacity:1;
   display:flex;
   flex-direction: row;
   flex-wrap:wrap;
   align-items: center;
   gap:10px;
      
   @media (max-width: 1200px) {
     display: none;
   }
 }

 .videoWrapper #video-time {
  width:100px;
  margin:0;
  padding:0;
  text-align: center;
}


.rules {
  display: grid;
  grid-template-rows: repeat(6, 1fr);
  margin: 0;
  height: 100svh;
  font-family: Arial, sans-serif;
}
.rule {
  display: flex;
  align-items: start;
  justify-content: center;
  gap:3svmax;
  
  text-align: left;
  padding: 10px;
 
}


.rule span {
  font-family: "ModeNine", Monaco, monospace;
  padding:0px;
}

.rule-number {
  color:#ffe400;
}