.toast-ssb-class {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.ssb_word_game{
  position: relative;
}

.ssb_word_game .game_title {
  text-align: center;
}
.ssb_word_game .toolkit{
  display: flex;
  justify-content: flex-end;
  margin-right: 20px;
}
.ssb_word_game .toolkit .help_tools{
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  font-weight: 600;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  border: 2px solid black;
  cursor: pointer;
  user-select: none;
}

.ssb_word_game .toolkit .stats_tools{
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  font-weight: 600;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  border: 2px solid black;
  cursor: pointer;
  user-select: none;
  margin: 0 5px;
}

#game-board {
  display: flex;
  align-items: center;
  flex-direction: column;
}

.letter-box {
  border: 2px solid gray;
  border-radius: 3px;
  margin: 2px;
  font-size: 2.5rem;
  font-weight: 700;
  height: 4rem;
  width: 4rem;
  display: flex;
  justify-content: center;
  align-items: center;
  text-transform: uppercase;
}

.filled-box {
  border: 2px solid black;
}

.letter-row {
  display: flex;
}

#keyboard-cont {
  margin: 1rem 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#keyboard-cont div {
  display: flex;
}

.second-row {
  margin: 0.5rem 0;
}

.keyboard-button {
  font-size: 2rem;
  font-weight: 700;
  padding: 0.5rem;
  margin: 0 2px;
  cursor: pointer;
  text-transform: uppercase;
}

.ssb_model{
  height: auto;
  width: 50%;
  position: absolute;
  box-shadow: 0px 1px 5px 0px rgb(135 135 135);
  top: 60%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
}

.ssb_model .ssb_model_content .ssb_model_close{
  color: black;
  font-size: 24px;
  font-weight: 600;
  text-align: right;
  padding-right: 15px;
  cursor: pointer;
  user-select: none;
}

.ssb_model .ssb_model_content .ssb_model_main_content{
  display: block;
  justify-content: left;
  align-items: center;
  padding: 20px;
}

.ssb_model .ssb_model_content .ssb_model_main_content .ssb_model_title{
  font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  margin-top: 10px;
  margin-bottom: 0;
  text-align: center;
}

.ssb_model .ssb_model_content .ssb_model_main_content .ssb_model_subtitle{
  font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  margin: 0;
  text-align: center;
}

.ssb_model .ssb_model_content .ssb_model_main_content .ssb_model_content_bullet{
  color: black;
  font-size: 18px;
  font-weight: 600;
  margin-top: 20px;
}

.ssb_model .ssb_model_content .ssb_model_main_content  .example_content{
  margin-top: 20px;
}
.ssb_model .ssb_model_content .ssb_model_main_content  .example_content .example_content_title{
  font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 10px;
}
.ssb_model .ssb_model_content .ssb_model_main_content  .example_content .example_board_btn{
  display: flex;
}
.ssb_model .ssb_model_content .ssb_model_main_content  .example_content .example_board_btn .border-box{
  border: 2px solid rgb(53, 53, 53);
  margin-right: 5px;
  height: 2rem;
  width: 2rem;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 600;
}
.ssb_model .ssb_model_content .ssb_model_main_content  .example_content .example_board_btn .box-green{
  background-color: #6AAA64;
  color: black;
}
.ssb_model .ssb_model_content .ssb_model_main_content  .example_content .example_board_btn  .box-yellow{
  background-color: #C9B458;
  color: black;
}
.ssb_model .ssb_model_content .ssb_model_main_content  .example_content .example_board_btn  .box-grey{
  background-color: grey;
  color: black;
}


.ssb_model .ssb_model_content .ssb_model_main_content  .example_content .info{
  color: black;
  font-size: 18px;
  font-weight: 500;
  margin-top: 5px;
}
#ssb_help_model{
  display: none;
}
#ssb_stats_model{
  display: none;
}
.ssb_model .ssb_model_content .ssb_model_main_content  .example_content .info strong{
  font-weight: 900;
}
.guess_content .guess_content_title{
  font-size: 20px;
  text-align: center;
}
.guess_content .guess_box{
  margin: 2px;
  display: flex;
  align-items: center;
}
.guess_content .guess_box .guess_no{
  margin-right: 5px;
}

.guess_content .guess_box .guess_progress{
  background-color: rgb(199, 199, 199);
  height: 20px;
  width: 20px;
  font-size: 14px;
  font-weight: 700;
  display: flex;
  justify-content: center;
  align-items: center;
}
.win_histroy{
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.win_histroy .win_histroy_box{
  margin: 10px;
}
.win_histroy .win_histroy_box .win_histroy_no{
  font-size: 28px;
  font-weight: 700;
}
.win_histroy .win_histroy_box .win_histroy_text{
  font-size: 16px;
  font-weight: 600;
}
.ssb_share_content{
  text-align: center;
}
.ssb_share_content .ssb_share_btn{
  background-color: green;
  width: 150px;
  font-size: 16px;
  border-radius: 25px;
}
.ssb_next_game_content{
  text-align: center;
}
.ssb_next_game_content .ssb_next_game_text{
  font-size: 20px;
  font-weight: 600;
}
.guess_progress_full{
  background-color: green !important;
  width: 100% !important;
  justify-content: flex-end !important;
  padding-right: 10px;
}
.game-board-content{
  position: relative;
  display: flex;
  align-items: center;
  flex-direction: column;
}
.game-board-share-btn{
  position: absolute;
  background-color: white;
  font-size: 18px;
  font-weight: 600;
  color: black;
  border: 1px solid rgb(53, 53, 53);
  box-shadow: 0px 1px 5px 0px rgb(135, 135, 135);
  display: none;
}
.ssb_feedback{
  padding: 10px 0;
}

.ssb_feedback .ssb_feedback_content{
  font-size: 17px;
  font-weight: 500;
  text-align: center;
  color: black;
}

.ssb_feedback .ssb_feedback_content .mail{
  color: black;
  font-weight: 600;
}

@media screen and (max-width: 1024px){
  .ssb_model{
    width: 70%;
  }

.letter-box {
  height: 3rem;
  width: 3rem;
}

  .keyboard-button {
    font-size: 1.5rem;
  }

}

@media screen and (max-width: 600px){
  .ssb_model{
    width: 100%;
  }

  .letter-box {
    height: 3rem;
    width: 3rem;
  }

  .keyboard-button {
    font-size: 1.2rem;
  }
}