body {
    font-family: 'Ropa Sans';font-size: 18px;
    background-color: #000000;
    color: #FFFFFF;
}

.ct_info {
    position:fixed;
    right:0px;
    top:0px;
    padding: 10px;

}
.other_info {
    position:fixed;
    right:0px;
    top:30px;
    padding: 10px;
    
}

.faq_info {
    position:fixed;
    right:0px;
    top:60px;
    padding: 10px;
    
}

.custom_info {
    position:fixed;
    right:0px;
    top:120px;
    padding: 10px;
    
}
.password_info {
    position:fixed;
    right:0px;
    top:90px;
    padding: 10px;
    
}

.final_result_boxcontainer {
    font-size: 100%;
    outline: 2px solid #444444;
    line-height: 25px;
    display: flex;
    flex-wrap: nowrap;
    text-align: center;
    cursor: pointer;

}


.title_text {
    padding : 10px 2px;
    font-size: 150%;
    text-align: center;
    
    
  
}

.sub_text {
    padding : 0px 20px;
    font-size: 110%;
}

.settings-container{

    display: flex;
    text-align: center;
    height: auto;
    margin-left: 35%;
    margin-right:35%;
    /* border: 1px gray solid;  */

}

.checkbox-container{
    float: left;
    display: flex;
    margin-left: 50px;

    /* border: 1px blue solid;  */
    
    text-align: center;
    
    

}

.checkbox-container2{


    /* width: 20%; */
    /* border: 1px blue solid;  */
    min-width: 200px;
    margin-left: 10%;
    text-align: center;
    

}

.submission_area {
    /* border: 1px coral solid;  */
    margin-left: 50px; 
    margin-right: 0;


}

.checkbox-grid {

    
  /* list-style-type: space-counter; */
  padding: 0; /* Remove padding */
  margin-left: 20; /* Remove margins */
  /* display: auto; */
  position: relative;
    
    
}
.checkbox-grid li{


  
/* display: grid; */
  /* grid-gap: 2px; */
  /* grid-template-rows: 30px repeat(5, 136px) 30px; */
}


.checkbox-extra-settings {
  user-select: none;
    
  display: flex;
  

  
/* display: grid; */
  /* grid-gap: 2px; */
  /* grid-template-rows: 30px repeat(5, 136px) 30px; */
}

.label {
    -webkit-user-select: none; /* Safari */        
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+/Edge */
    user-select: none; /* Standard */
}

div.checkbox  { 
  margin: 0; 
  padding: 0; 
  margin-left: 20px; 
  margin-right: 10px;
  list-style: none; 
} 

/* ul.checkbox li input {  */
  /* margin-right: .25em;  */
/* }  */

/* ul.checkbox li {  */
  /* border: 1px transparent solid;  */
  /* display:inline-block; */
  /* width:12em; */
/* }  */

/* ul.checkbox li label {  */
  /* margin-left: ;  */
/* }  */
/* ul.checkbox li:hover,  */
/* ul.checkbox li.focus  {  */
  /* background-color: lightyellow;  */
  /* border: 1px gray solid;  */
  /* width: 12em;  */
/* }  */




div#select_game_list_container {
    margin-left: 0%;
    flex-wrap: nowrap;
}

select#select_game_list{
    overflow: hidden;
    width: 160px;
}




.box_art_img {
    height: 190px;
    width:  140px;
    padding: 5px;
}
.clip_art_img {
    height: 45px;
    width:  80px;
}

.line_entry {
    width: 25%
}

.table_div{
    margin: auto;
    width: 50%;
    border: 3px;
    /* border-style: solid; */
    /* border-color: green; */
    
}
table#clips_table{

    table-layout: fixed;
    
}

table#filter_table{

    table-layout: fixed;

}

.r1 {
    padding: 3px;
}
.c_filter {
    overflow: hidden;    
    margin: auto;
    width: 100%;
    padding: 5px;
    /* border-style: solid; */
    /* border-color: green;     */
}

.c1 {
    overflow: hidden;
}



.c2 {
    overflow: hidden;
    width: 100px;
}

.c3 {
    overflow: hidden;
    width: 500px;
}

.c4 {
    overflow: hidden;
    width: 100px;
}

.c5 {
    overflow: hidden;
    width: 100px;
}

.c6 {
    overflow: hidden;
    width: 50px;
}
/* unvisited link */
a:link {
  color: #7fe3d6;
}

/* visited link */
a:visited {
  color: #96328b;
}

.header{
    text-align: left;
    
}
/* } */

/* .form_column_1 { */

/* padding : 50px 20px; */
/* } */

/* .form_column_2 { */

/* padding: 50px 20px; */
/* } */
/* .results{  */
/* padding: 5px 20px; */
/* } */
/* .submission_area { */
  /* padding: 5px 20px; */
  /* display: flex; */
  /* flex-wrap: nowrap; */
/* } */
.button_area {
    padding: 5px 5px;
}

.pure-button  {
    font-size: 80%;
    
}

/* .score_box { */
  /* font-size: 110%; */
  /* /* outline: 2px solid #444444; */
  /* width: 75px; */
  /* margin: 0px; */
/* } */

/* .result_seperator { */
    /* background-color: #333333; */
    /* height:5px; */
/* } */
/* .final_str { */
  /* font-size: 110%; */
  /* /* outline: 2px dashed green; */ 
  /* align-self: center; */
  /* position:relative; */
  /* left:10px; */
/* } */

/* .resulttree_container { */
  /* padding: 0 20px; */
/* } */
/* .outputline_container { */
  /* font-size: 100%; */
  /* /* outline: 2px dashed yellow; */ 
  /* line-height: 25px; */
  /* display: flex; */
  /* flex-wrap: nowrap; */
  /* text-align: center; */
/* } */

/* .plus_icon { */
    /* font-size: 200%; */
    /* padding: 15px 0; */
    /* left: 10px; */
    /* width: 30px; */
/* } */

/* .operator { */
  /* /* outline: 2px dashed pink; */ 
  /* height: inherit; */
  /* color: white; */
  /* padding: 20px 0;  */
/* } */

/* .demon_box { */
  /* font-size: 100%; */
  /* /* outline: 2px dashed red; */ 
  /* outline: 2px solid #444444; */
  /* width: 150px; */
  /* margin: 10px; */
/* } */

/* .demon_skills { */
  /* color: #BBFFFF; */
  /* /* outline: 2px dashed red; */ 
  /* width: 150px; */
  
/* } */

/* .final_str { */

/* color: #BBFFFF; */

/* font-size: 120%; */

/* outline: 5px dashed blue; */

/* width: 30px; */

/* display:inline; */

/* } */

/* .final_skill { */

/* color: #BBFFFF; */

/* font-size: 120%; */

/* outline: 5px dashed blue; */

/* display:inline; */

/* } */


/* .final_demon { */
/* color: #FFBBFF; */
/* font-size: 120%; */
/* display:inline; */
/* } */

option {
  background-color: #333333;
  font: #FFFFFF;
}

select {
  background-color: #333333;
  font: #FFFFFF;
}

input {
  background-color: #333333;
  font: #FFFFFF;
}



}
@charset "UTF-8";
* {
  box-sizing: border-box;
}


aside.context {
  text-align: center;
  color: #333;
  line-height: 1.7;
  margin-bottom: 30px;
}
aside.context a {
  text-decoration: none;
  color: #333;
  padding: 3px 0;
  border-bottom: 1px dashed;
}
aside.context a:hover {
  border-bottom: 1px solid;
}
aside.context .explanation {
  max-width: 700px;
  margin: 4em auto 0;
}

footer {
  text-align: center;
  margin: 3em auto;
  width: 100%;
}
footer a {
  text-decoration: none;
  display: inline-block;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  background: transparent;
  border: 1px dashed #333;
  color: #333;
  margin: 5px;
}
footer a:hover {
  background: rgba(255, 255, 255, 0.1);
}
footer a .icons {
  margin-top: 12px;
  display: inline-block;
}

.main-content {
  max-width: 800px;
  width: 100%;
  margin: 1em auto 0;

  overflow: visible;
}

.main-content-faq {
  max-width: 800px;
  width: 100%;
  margin: 1em auto 0;
  height: auto;
  position:relative;
  

}

.main-content-faq li {

    float: left;
    width: 100%;
    height: auto;
    white-space: pre; 

}



.faq-item{
    white-space: pre; 


}

.faq-item2{
    white-space: pre; 
    margin-top: 20px;

}

.main-content-faq ul li {
  overflow-wrap: break-word;
  word-wrap: break-word;
  white-space: normal !important;
  
}

.main-content-faq ul {
  min-height: 100%;
    
}

.foot {
    

    padding: 30px;
}

.title {
  background: #000000;
  color: #fff;
  padding: 4px 2px;
  margin-top: 6px;
  grid-column: span 5;
  text-align: center;
  font-size: 20px;
  
  
}
.title2a {
  background: #000000;
  color: #fff;
  padding: 4px 2px;
  grid-column: span 5;
  text-align: center;
  font-size: 24px;

  
}

.title2 {
  background: #000000;
  color: #fff;
  padding: 2px 5px;
  margin-top: 2em auto 0;
  grid-column: span 5;
  text-align: center;
  font-size: 16px;
  
}

.title3 {
  background: #000000;
  color: #fff;
  padding: 4px 2px;
  grid-column: span 5;
  text-align: center;
  font-size: 24px;
  white-space: nowrap;
  margin-top: 40px;
}

.title span {
  display: none;
}
.title span:nth-child(1) {
  display: block;
}
@media screen and (max-width: 600px) {
  .title span:nth-child(1) {
    display: none;
  }
  .title span:nth-child(2) {
    display: block;
  }
}

.bingo-card {
  background: #303030;
  padding: 2px;
  display: grid;
  grid-gap: 2px;
  grid-template-rows: 30px repeat(5, 136px) 30px;
  grid-template-columns: 30px repeat(5, 1fr) ;
  /* text-transform: uppercase; */
  overflow: visible;
}

.bingo-card-custom {
  background: #303030;
  padding: 2px;
  display: grid;
  grid-gap: 2px;
  grid-template-rows: repeat(5, 136px) 30px;
  grid-template-columns: repeat(5, 1fr) ;
  /* text-transform: uppercase; */
  overflow: visible;
}



.bingo-card__borders {
  background: #0d1724;
  /* border: 1px solid #0930de; */
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: center;
  position: relative;
  cursor: pointer;
  font-size: 12px;
  line-height: 1.35;
  user-select: none;
}

.bingo-card__borders:hover {
  background: #39485c;
}

.bingo-card__borders2 {
  background: #303030;
  /* border: 1px solid #0930de; */
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: center;
  position: relative;
  cursor: pointer;
  font-size: 12px;
  line-height: 1.35;
  user-select: none;
}

.bingo-card-item {
  background: #606060;
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: center;
  position: relative;
  cursor: pointer;
  font-size: 12px;
  line-height: 1.35;
  user-select: none;
  
}

.item1{
  font-size: 14px;

}

.item2 {
  border: 2px solid #e0dd1f;
  font-size: 14px;
}
.item3 {
  border: 2px solid #de0909;
  font-size: 14px;
}

.item4 {
  border: 2px solid #6c07fa;
  font-size: 14px;
}

.bingo-card__text {
  align-items: center;
  text-align: center;
  justify-content: center;
  position: relative;
}
.bingo-card__footer {
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: center;
  position: absolute;
  bottom: 0px;
  
}

.bingo-card__tooltipindicator {
  /* border: 3px solid #0930de; */
  position: absolute;
  top: 0px;
  left: 0px
}


.bingo-card__pwindicator {
  /* border: 3px solid #04472a; */
  position: absolute;
  top: 0px;
  right: 0px
}
.bingo-card__bonusindicator {
  /* border: 3px solid #04472a; */
  position: absolute;
  bottom: 0px;
  right: 0px
}

 
.bingo-card-item span {
  display:none;
  -moz-border-radius:6px;
  -webkit-border-radius:6px;
  border-radius:6px;
  color:black;
  background:white; 
}


.container span tooltip-img-container {
  width: 140px;
}

.bingo-card-item span img {
  max-height: 100%;
  max-width: 100%;
}

 
.tooltip-div {
  display:none;
  position:absolute;
  background: #202020;
  color: white;
  

  z-index:1000;
  font-size: 14px;
  border:3px solid black;
  /* margin-top:24px; */
  /* margin-left:24px; */
  overflow:auto; 

}





.bingo-card__item.active .bingo-card__checkbox:before {
  content: "✔";
  position: absolute;
  color: black;
  left: 0;
  top: -19px;
  color: #fdb90b;
  
}
.bingo-card__checkbox {
  display: none;
}

.clear-button {
  margin-top: 10px;

  /* text-transform: uppercase; */
  cursor: pointer;
  display: inline-block;
  border: 2px dotted;
  color: #43b90b;
  padding: 8px 10px;
}
.clear-button:hover {
  color: #f23e03;
  border: 2px solid;
}

.custom-submit-button {
  margin: 2em 0 0;

  /* text-transform: uppercase; */
  cursor: pointer;
  display: inline-block;
  border: 2px dotted;
  color: #43b90b;
  padding: 8px 10px;
}
.custom-submit-button:hover {
  color: #f23e03;
  border: 2px solid;
}



.error-message {
  align-items: center;
  text-align: center;
  font-size: 24px;
  color: #e80576;
}

.error-message-custom {
  align-items: center;
  text-align: center;
  font-size: 24px;
  color: #e80576;
  display: none;
}



.font-buttons {
  display: flex;   
  margin-top: 61px;
  align-items: center;
  text-align: center;
  justify-content: center;
  position: relative;
  background: black;
  margin: 10px;

    
}

.font-button {
  color: black;
  margin: 2px;
}



@media screen and (max-width: 600px) {
  .main-content {
    max-width: none;
    margin: 0;
  }

  .title {
    padding: 2px;
  }



  .bingo-card {
    grid-template-rows: repeat(24, auto);
    grid-template-columns: auto;
    margin: 1em;
  }

  .bingo-card__item {
    justify-content: flex-start;
    padding: 15px 15px 15px 40px;
    text-align: left;
  }
  .bingo-card__item:after {
    content: "";
    opacity: 0;
  }
  .bingo-card__item:nth-child(13) {
    display: none;
  }

  .bingo-card__checkbox {
    display: inline;
    position: absolute;
    width: 20px;
    height: 20px;
    left: 10px;
    border: 2px dashed #f7d75c;
  }
}

.numeric-input {
  padding: 2px;
  height: 30px;
  
  color: white;
  border: 2px solid black;

}
input[type='number'] {
    width: 150px;
} 

input#form_seed {
    width: 120px;
    
}

.tooltip {
    background-color: rgba(0,0,0,0.3);
    color: #fff;
    border: 2px solid #f90;
}















.bingo-card-popout {
  background: #303030;
  padding: 2px;
  display: grid;
  grid-gap: 2px;
  grid-template-rows: 30px repeat(5, 96px);
  grid-template-columns: repeat(1, 1fr) ;
  /* text-transform: uppercase; */
}

.bingo-card-popoutboard {
  background: #303030;
  padding: 2px;
  display: grid;
  grid-gap: 2px;
  grid-template-rows: repeat(5, 136px);
  grid-template-columns: repeat(5, 1fr) ;
  /* text-transform: uppercase; */
}


.item1-popout{
  font-size: 16px;
}

.item2-popout {
  border: 2px solid #e0dd1f;
  font-size: 16px;
}
.item3-popout {
  border: 2px solid #de0909;
  font-size: 16px;
}

.item4-popout {
  border: 2px solid #6c07fa;
  font-size: 16px;
}


.item1-popout-board{
  font-size: 14px;
}

.item2-popout-board {
  border: 2px solid #e0dd1f;
  font-size: 14px;
}
.item3-popout-board {
  border: 2px solid #de0909;
  font-size: 14px;
}

.item4-popout-board {
  border: 2px solid #6c07fa;
  font-size: 14px;
}



.bingo-card__borders-popout {
  background: #0d1724;
  /* border: 1px solid #0930de; */
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: center;
  position: relative;
  cursor: pointer;
  font-size: 20px;
  line-height: 1.35;
  user-select: none;
}

.bingo-card__borders-popout:hover {
  background: #39485c;
}

.password-container {
  display: grid;
  margin-top: 40px;
  grid-gap: 2px;
  grid-template-columns: auto auto auto auto;
  grid-template-columns: repeat(3, 1fr) ;

}
.password-container > div {
  margin: 30px;
  align-items: center;
  text-align: center;
  justify-content: center;
  position: relative;
  cursor: pointer;
  font-size:36px;
    
}

.grid-container {

  background-color: #2196F3;
  padding: 10px;
}



.select-text {
    font-size: 16px;
    
    overflow: none;  
}
.select-item {
  background: #606060;
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: center;
  position: relative;
  font-size: 12px;
  line-height: 1.35;
  user-select: none;
  overflow: none;
  
}

#form_choice1 { width: 120px; height: 120px; max-width: 100%; overflow: hidden; word-wrap: normal !important; white-space: normal;}
#form_choice2 { width: 120px; height: 120px; max-width: 100%; overflow: hidden; word-wrap: normal !important; white-space: normal;}
#form_choice3 { width: 120px; height: 120px; max-width: 100%; overflow: hidden; word-wrap: normal !important; white-space: normal;}
#form_choice4 { width: 120px; height: 120px; max-width: 100%; overflow: hidden; word-wrap: normal !important; white-space: normal;}
#form_choice5 { width: 120px; height: 120px; max-width: 100%; overflow: hidden; word-wrap: normal !important; white-space: normal;}
#form_choice6 { width: 120px; height: 120px; max-width: 100%; overflow: hidden; word-wrap: normal !important; white-space: normal;}
#form_choice7 { width: 120px; height: 120px; max-width: 100%; overflow: hidden; word-wrap: normal !important; white-space: normal;}
#form_choice8 { width: 120px; height: 120px; max-width: 100%; overflow: hidden; word-wrap: normal !important; white-space: normal;}
#form_choice9 { width: 120px; height: 120px; max-width: 100%; overflow: hidden; word-wrap: normal !important; white-space: normal;}
#form_choice10 { width: 120px; height: 120px; max-width: 100%; overflow: hidden; word-wrap: normal !important; white-space: normal;}
#form_choice11 { width: 120px; height: 120px; max-width: 100%; overflow: hidden; word-wrap: normal !important; white-space: normal;}
#form_choice12 { width: 120px; height: 120px; max-width: 100%; overflow: hidden; word-wrap: normal !important; white-space: normal;}
#form_choice13 { width: 120px; height: 120px; max-width: 100%; overflow: hidden; word-wrap: normal !important; white-space: normal;}
#form_choice14 { width: 120px; height: 120px; max-width: 100%; overflow: hidden; word-wrap: normal !important; white-space: normal;}
#form_choice15 { width: 120px; height: 120px; max-width: 100%; overflow: hidden; word-wrap: normal !important; white-space: normal;}
#form_choice16 { width: 120px; height: 120px; max-width: 100%; overflow: hidden; word-wrap: normal !important; white-space: normal;}
#form_choice17 { width: 120px; height: 120px; max-width: 100%; overflow: hidden; word-wrap: normal !important; white-space: normal;}
#form_choice18 { width: 120px; height: 120px; max-width: 100%; overflow: hidden; word-wrap: normal !important; white-space: normal;}
#form_choice19 { width: 120px; height: 120px; max-width: 100%; overflow: hidden; word-wrap: normal !important; white-space: normal;}
#form_choice20 { width: 120px; height: 120px; max-width: 100%; overflow: hidden; word-wrap: normal !important; white-space: normal;}
#form_choice21 { width: 120px; height: 120px; max-width: 100%; overflow: hidden; word-wrap: normal !important; white-space: normal;}
#form_choice22 { width: 120px; height: 120px; max-width: 100%; overflow: hidden; word-wrap: normal !important; white-space: normal;}
#form_choice23 { width: 120px; height: 120px; max-width: 100%; overflow: hidden; word-wrap: normal !important; white-space: normal;}
#form_choice24 { width: 120px; height: 120px; max-width: 100%; overflow: hidden; word-wrap: normal !important; white-space: normal;}
#form_choice25 { width: 120px; height: 120px; max-width: 100%; overflow: hidden; word-wrap: normal !important; white-space: normal;}



.url-custom {
  background: #000000;
  color: #fff;
  padding: 4px 2px;
  text-align: center;
  font-size: 24px;
  white-space: nowrap;
  margin-top: 40px;
  display: none;
}

.url-ahref2 {
    
    text-decoration: none;
    color: #4249fa;
    padding: 3px 0;
    /* border-bottom: 1px solid; */

    
}




.mm1-6 {
 display: block ;   
}
.mm7-11 {
 display: block;   
}

.gameset-switch {


  /* text-transform: uppercase; */
  margin-top: 10px;
  padding: 4px;
  cursor: pointer;
  display: inline-block;
  border: 2px dotted;
  color: #087f8a;
    -webkit-user-select: none; /* Safari */        
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+/Edge */
    user-select: none; /* Standard */

}

.gameset-switch:hover {
  border: 2px solid;    
  color: #8a082f;
}


.tt {
    border-bottom: 1px dotted white;
    cursor: pointer;
}
.tt_text {
  visibility: hidden;
  width: 130px;
  background-color: grey;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
}

.tt:hover .tt_text {
  visibility: visible;
}

.second_col {
    margin-bottom: 2px;
    
}
.game-select-text {
    margin-left: 5px;
}
.legend {
    margin-top:15px;
    display: flex;
    justify-content: center;
    
}
.seperator {
    margin-left:15px;
    
}
.sep1 {
    margin-top: 10px;
    
}