/* phone */

html {
  overflow: hidden;
  height:100vh;
}

#js_id_help_one_squares {
    display:none;
}

#js_id_help_two_squares {
    display:none;
}

.letters_full_width_information_answer {
    position:relative;
    float:left;
    width:100%; 
}




            /* quiz_text_question */
            #js_quiz_text_question_modal_window_successfull {
                display:none;
                background-color: white;
            }


            #js_quiz_text_question_modal_window_successfull  +   div > button:first-child
            {
                float:right;
                outline:0px blue solid;
                padding-top:6px;
                padding-bottom:6px;
                padding-left:16px;
                padding-right:16px;
                /*  width:120px;*/
                margin-right:-9px;
                display:none;
            }
            #js_quiz_text_question_modal_window_successfull  +   div > button:last-child
            {
                float:left;
                outline:0px blue solid;
                padding-top:6px;
                padding-bottom:6px;
                padding-left:16px;
                padding-right:16px;
                display:none;
            }

















            .js_up_two_symbols_background {
                position:relative; 
                float:right; 
                margin-right:10px; 
                color:white; 
                font-size:40px;
                height:50px;
                text-shadow:blue 4px 0 10px;
                   /*
                      background: linear-gradient(-45deg, #E2D5FF, #D5BEFF, #14F7FF, #FFD29B);
                      background-size: 400% 400%;
                      animation: footer_two_symbols_preview_gradient 15s ease infinite;
                    */
                                    
            }
    
                    /*
                  @keyframes footer_two_symbols_preview_gradient {
                        0% {
                            background-position: 0% 50%;
                        }
                        50% {
                            background-position: 100% 50%;
                        }
                        100% {
                            background-position: 0% 50%;
                        }
                    }
                    */
                    
                    
                    
/*
.dbll_letters_numbers_height_in_answer_pc {
   position:relative;
   float:left;
   width:100%;
   text-align:center;
   font-size:70px;  
   top:-10px;
   color:white; 
   z-index:1;
}


.dbll_letters_numbers_height_in_answer_mobi {
   position:relative;
   float:left;
   width:100%;
   text-align:center;
   font-size:50px;  
   top:-10px;
   color:white; 
   z-index:1;
}
*/

.js_id_three_button_answer_this_question {
    position:relative;
    float:left;
    text-align:center;
    width:97%;
    /*left:5%; */
    padding-top:4px;
    
    background-color: #4CAF50; /* Green */
    border: none;
    border-radius: 5px;
    color: white;
    padding: 16px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    cursor: pointer;
    
    
}

.js_id_three_button_answer_this_question:hover {
    background-color: #4CAF50;
    color: white;
}

.js_answer_button1 {
    background-color: white; 
    color: black; 
    border: 2px solid #4CAF50;
}





            .dbll_game_text_questions_buttons_next_and_return_buttons {
                position:relative;
                float:left;
                width:50%;
            }


            /* Button preview */
            .js_id_button_game_left_preview {
                position:relative;
                float:left;
                text-align:center;
                width:90%;
                left:2%;
                padding-top:4px;
                
                background-color: #4CAF50; /* Green */
                border: none;
                border-radius: 5px;
                color: white;
                padding: 16px 32px;
                text-align: center;
                text-decoration: none;
                display: inline-block;
                font-size: 16px;
                margin: 4px 2px;
                -webkit-transition-duration: 0.4s; /* Safari */
                transition-duration: 0.4s;
                cursor: pointer;
                
                
                /*    background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab); */
                  
                    background: linear-gradient(-45deg, #E2D5FF, #D5BEFF, #14F7FF, #FFD29B);
                    background-size: 400% 400%;
                    animation: left_preview_gradient 15s ease infinite;
                
            }
            
            .js_id_button_game_left_preview:hover {
                background-color: #4CAF50;
                
                color:black;
                text-decoration:underline;
                text-shadow: #FC0 4px 0 10px;
            }
            
            @keyframes left_preview_gradient {
                0% {
                    background-position: 0% 50%;
                }
                50% {
                    background-position: 100% 50%;
                }
                100% {
                    background-position: 0% 50%;
                }
            }
            

            
            .js_previrew_button_2 {
                background-color: white; 
                color: black; 
                border: 2px solid #4CAF50;
            }
            
              /* Button next */
            .js_id_button_game_right_next {
                position:relative;
                float:left;
                text-align:center;
                width:90%; 
                margin-left:6%;
                padding-top:4px;
                
                background-color: #4CAF50; /* Green */
                border: none;
                border-radius: 5px;
                color: white;
                padding: 16px 32px;
                text-align: center;
                text-decoration: none;
                display: inline-block;
                font-size: 16px;
                margin: 4px 2px;
                -webkit-transition-duration: 0.4s; /* Safari */
                transition-duration: 0.4s;
                cursor: pointer;
                
                    background: linear-gradient(-45deg, #FFDEFC, #FFBC1E, #6DFF3C, #1EFFDA, #A5FFF2, #D8C3FF);
                    background-size: 400% 400%;
                    animation: right_next_gradient 15s ease infinite;
                
            }
            
            .js_id_button_game_right_next:hover {
                background-color: #4CAF50;
                color:black;
                text-decoration:underline;
                text-shadow: #FC0 4px 0 10px;
            }
            
            
              @keyframes right_next_gradient {
                0% {
                    background-position: 0% 50%;
                }
                20% {
                    background-position: 30% 10%;
                }
                30% {
                    background-position: 40% 60%;
                }
                40% {
                    background-position: 50% 80%;
                }
                50% {
                    background-position: 100% 50%;
                }
                100% {
                    background-position: 0% 50%;
                }
            }
            
            
            .js_next_button_3 {
                background-color: white; 
                color: black; 
                border: 2px solid #4CAF50;
            }
            
            
            
.dbll_game_wrapper_next_button_and_preview {
    position:relative;
    float:left;
    width:100%;
    margin-top: 20px;
}            


 

.dbll_description_game_information {
    position:relative;
    float:left;
    width:98%;
    text-align:left;
    padding-left: 14px;  
    padding-top:4px;
    padding-bottom:4px;
    margin-top:10px;
    color:black;
}

.letters_wrapper_show_squares_content {
    position:relative; 
    float:left; 
    width:100%;
    padding-bottom:0px; 
    padding-top:0px; 
    margin-left:14px;
}

.letters_wrapper_show_squares_text_exmaple {
    position:relative;
    float:left; 
    color:black;  
    margin-bottom:10px;
}

.dbll_questions_hint_help_info {
    position:relative;
    float:left;
    width:98%;
    text-align:left;
    padding-left: 4px;  
    padding-top:4px;
    padding-bottom:4px;
}



.js_html_example_answer_square_pc {
    position:relative;
    float:left;
    width:30px;
    height:30px;
    text-align:center;
    margin-left:5px;
    color:white;
    padding-top:4px;
    border:1px white solid;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
    border-radius: 5px;
}



body {
  /* position: relative; */
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  touch-action: none;
  overflow: hidden;
  height: 100%;
  background:  #E7E7E8;
  background-color: white;


  -webkit-tap-highlight-color:  rgba(255, 255, 255, 0); /* ! no blue flashes when tap */

  user-select: none;
  -webkit-user-select: none; /* Chrome/Safari */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* IE10+ */
}

.dbll_letters_game_header_name_version_pc {
    position: relative;
    float:left;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    /* color:red;  */  
    font-size:34px;
} 


.dbll_letters_game_header_name_version_mobi{
    position: relative;
    float:left;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    /*color:blue; */   
    font-size:64px;
    margin-top:45px;
} 


.dbll_letters_header_one_symbols_pc {
    
}
.dbll_letters_header_one_symbols_moby {
    
}

.dbll_questions_text_questions {
    position:relative;
    float:left;
    padding-bottom:10px;
    color:black;
    margin-top:0px;
    padding-top:10px;
    text-indent: 0em;
    margin-left:15px;
    margin-right:15px; 
    
    border-bottom:1px solid darkcyan;
}

 


              @keyframes questions_text_questions_gradient {
                0% {
                    background-position: 0% 50%;
                }
                20% {
                    background-position: 30% 10%;
                }
                30% {
                    background-position: 40% 60%;
                }
                40% {
                    background-position: 50% 80%;
                }
                50% {
                    background-position: 100% 50%;
                }
                100% {
                    background-position: 0% 50%;
                }
            }

.dbll_questions_text_descriptions {
    position:relative;
    float:left; 
    color:black;  
    margin-left:15px;
    margin-right:15px;
    padding-top:0px;
}




#dbll_overlay_block_ph{
  display:none;
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
  background-color:black;
  opacity:0.3;
  z-index:110;
  cursor:pointer;
}

#dbll_header_ph{
  position: relative;
  padding:20px 0px 20px 20px;
  /* padding:6px 0px 6px 8px; */
  /* height: 62px; */
  background-color: #424A65;
  color: white;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.5em;
  font-weight: bold;
  line-height: 0.9em;
  text-indent: 5px;
  letter-spacing: .05em;
  z-index:3;
}

.dbll_img_header_title{
  height:100%;
}

.dbll_authors{
  display:block;
  position: relative;
  padding: 0;
  width: 90%;
  height: 22px;
  color:white;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.5em;
  line-height: 1.8em;
  letter-spacing: 0.05em;
  z-index:3000;
}

.dbll_img_menu_icon{
  position:absolute;
  top:0;
  right:0;
  height: 100.2%;
  cursor: pointer;
}





#dbll_games_menu{
  position: relative;
  top:1px;
  z-index: 1000;
  display: none;
  background:#3B6CBF;
  /* pointer-events: none; */
    /* touch-action: none; */
}

#dbll_menu_item_lnk{
  height:60px;
}

.dbll_menu_items{
  float:none;
  /* height:63px; */
  /* height:33.33%; */
  background:#3B6CBF;
  width:100%;
  border-bottom: 1px solid white;

  /* -webkit-transform: skew(0deg);
  -moz-transform: skew(0deg);
  -o-transform: skew(0deg); */
}

#dbll_menu_item{
  height: 60px;         /* ! высота каждого пункта меню - скошенной части - уменьшил - выступало */
}

.dbll_menu_icon{
  width:60px;
  height:60px;
}

.dbll_menu_items_title{
  position: absolute;
  float: left;
  width: 100%;
  padding-left: 30px;
  padding-top: 30px;
  /* margin-bottom: 0.4vh; */
  outline: 0px yellow solid;
  font-family: 'Archivo Black', sans-serif;
  font-size: 13px;
  /* font-weight: bold; */
  text-transform: uppercase;
  text-align: center;
  color: white;

  width: 50%;
  /* padding-left:15px; */
}








#dbll_playfield_wrp_ph{
  width:100%;
  background:  white;
}



#dbll_playfield_ph{
  margin:0px auto;
position: relative;
  /* width:305px; */
  /* height:230px; */
  /* font-size: 26px; */
  border:0px solid grey;
  /* color: grey; */
  /* text-align: center; */
  /* padding:15px; */
  background:  white;
  /* border-radius: 15px; */
  cursor: pointer;
}

#dbll_playfield_background{
  width:100%;
  border:1px solid #E4E4E4; 
}

  
         


/* #dbll_author_blk_ph{
  width:96%;
  margin:0px auto;
  height:30px;
} */


#dbll_task_blk_ph{
  position:absolute;
  /* width:100%; */
  background:  transparent;
  color:white;
  /* outline:1px solid black; */
}


#dbll_task_text{
  /* float:left; */
  /* width:70%; */
  font-size: 13.5px;
  /* word-wrap: break-word; */

}

.dbll_task_img_blk{
  /* position: absolute; */
  width:25%;
  float:right;
}


#dbll_overlay_block_ph{
  display:none;
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
  background-color:black;
  opacity:0.3;
  z-index:110;
  cursor:pointer;
}


#dbll_you_win_ph{    
  position:absolute;
  display:none;
  background-color: white;
  font-size: 60px;
  color:red;
  font-weight: bold;
  padding:6px 6px 10px 6px;
  margin:0;
  border-radius: 10px;
  text-align: center;
  transform: translate(-50%, 0);
  z-index: 1000;
  overflow:hidden;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
  /* cursor: pointer; */
}


#dbll_restart_button_for_ph{
  position: absolute;
  top: 58px;
  right:0;
  /* width: 60px;
  height: 60px; */
  border-radius: 5px;
  /*background-color: #C5C6C6;*/
  z-index: 4;
  cursor: pointer;

}

/* #dbll_restart_button_for_ph>#dbll_restart_img{
  width: 59px;
} */

#dbll_task_text{
  /* font-size:16px; */
  font-size:45px;
}































@media only screen and (max-width: 360px){



}


@media only screen and (max-width: 375px){

}




@media only screen and (max-width: 320px){
  #dbll_header_ph{
    position: relative;
    padding:20px 0px 20px 20px;
    /* padding:6px 0px 6px 8px; */
    /* height: 62px; */
    background-color: #424A65;
    color: white;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.3em;
    font-weight: bold;
    line-height: 1em;
    text-indent: 0px;
    letter-spacing: .05em;
    z-index:3;
  }

  #dbll_task_text{
    /* font-size: 12.5px; */

  font-size:45px;
  }

  #dbll_task_text{
    font-size:13px;
  }
}
















































@media only screen and (min-width: 1100px){

 
     #dbll_right_dt{
        float:left;
        display:none;
        height:100vh;
        background: rgb(255, 255, 255);
         
      }

}



@media only screen and (min-width: 460px){
 
    
      #dbll_playfield_background_branches{
        width:100%;
      }
    
      #dbll_you_win_dt{
        position:absolute;
        background-color: white;
        color: black;
        font-size: 24px;
        text-align: center;
      }
    
    
      #dbll_overlay_block_dt{
        display:none;
        position:absolute;
        left:0;
        top:0;
        width:100%;
        height:100%;
        background-color:black;
        opacity:0.3;
        z-index:110;
        cursor:pointer;
    }
    
    
    
    #dbll_you_win_dt{
      position:absolute;
      display:none;
      background-color: white;
      font-size: 60px;
      color:red;
      font-weight: bold;
      padding:6px 6px 10px 6px;
      margin:0;
      border-radius: 10px;
      text-align: center;
      transform: translate(-50%, 0);
      z-index: 1000;
      overflow:hidden;
      box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
      /* cursor: pointer; */
    }
    
    
    
    #dbll_restart_button_for_dt{
      position: relative;
      top: 0px;
      right:0;
      /* width: 70px;
      height: 70px; */
      border-radius: 5px;
      background-color: #C5C6C6;
      z-index: 4;
      cursor: pointer;
    }
    
    /* #dbll_restart_button_for_dt>#dbll_restart_img{
      width: 65px;
    } */
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
      #dbll_header_dt{
        position: relative;
        width:100%;
        height:80px;
        background: rgb(180, 178, 178);
      }
      
      #dbll_playfield_wrp_dt{
        width:100%;
        height:100vh;
        background: rgb(255, 255, 255);
        
      }
    
      #dbll_center_right_dt{
        height:100vh;
        /* background: rgb(179, 59, 149); */
      }
    
      #dbll_center_dt{
        float:left;
        /* width:50%; */
        height:100vh;
        background: rgb(214, 208, 201);
      }
    /*
      #dbll_right_dt{
        float:left; 
        height:100vh;
        background: rgb(255, 255, 255);
         
      }
      */
      
      #dbll_playfield_dt{
        /* margin:10px auto; */
        /* width:305px; */
        /* height:230px; */
        /* font-size: 26px; */
        border:0px solid grey;
        /* color: grey; */
        /* text-align: center; */
        /* padding:15px; */
        /*background:  #87b98f;*/
        /* border-radius: 15px; */
        cursor: pointer;
      }
      
      
      #dbll_task_blk_dt{
        width:100%;
        height:100vh;
        background:  #a0b6c5;
      }
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
      .dbll_center_block{
        background: white;
      }
    
      .dbll_header_dt{
        position:relative;
        text-align: left;
        padding: 10px;
        font-size: 30px;
        font-weight:bold;
        line-height: 1.5em;
        
        padding-bottom:17px;
        color: white;
        background-color: #424A65;
        font-family: Arial, Helvetica, sans-serif;
    }
    
    .dbll_header_title_dt{
      position: relative;
      top:-8px;
      margin-left:10px;
    }
    
    
    .dbll_img_menu_icon{
      position:absolute;
      top:0;
      right:0;
      /* width:47.5px; */
      height: 100.2%;
      cursor: pointer;
    }
    
    .dbll_desktop_authors{
      position: relative;
      top:-3px;
      margin-left: 12px;
      font-family: Arial, Helvetica, sans-serif;
      font-size: 14px;
      line-height: 0.1em;
    }
    
    #dbll_games_menu{
      position: relative;
      top:1px;
      z-index: 1000;
      display: none;
      background:#3B6CBF;
      /* pointer-events: none; */
        /* touch-action: none; */
    }
    
    #dbll_menu_item_lnk{
      height:60px;
    }
    
    .dbll_menu_items{
      float:none;
      /* height:63px; */
      /* height:33.33%; */
      background:#3B6CBF;
      width:100%;
      border-bottom: 1px solid white;
    
      /* -webkit-transform: skew(0deg);
      -moz-transform: skew(0deg);
      -o-transform: skew(0deg); */
    }
    
    #dbll_menu_item{
      height: 60px;         /* ! высота каждого пункта меню - скошенной части - уменьшил - выступало */
    }
    
    .dbll_menu_icon{
      width:60px;
      height:60px;
    }
    
    .dbll_menu_items_title{
      position: absolute;
      float: left;
      width: 100%;
      padding-left: 30px;
      padding-top: 30px;
      /* margin-bottom: 0.4vh; */
      outline: 0px yellow solid;
      font-family: 'Archivo Black', sans-serif;
      font-size: 13px;
      /* font-weight: bold; */
      text-transform: uppercase;
      text-align: center;
      color: white;
    
      width: 50%;
      /* padding-left:15px; */
    }
    
    .dbll_dt_description{
      background-color: #E0EBFF;
      /* padding: 0 10px 0 10px; */
      font-family: Arial, Helvetica, sans-serif;
      font-size: 18px;
      font-weight: 300;
      line-height: 1.2em;
      /* text-indent: 5px; */
      font-family: Arial, Helvetica, sans-serif;
        
        
        
    }
    
    .dbll_description_p{
        position: relative;
        /* padding-top:10px; */
        text-indent: 0em;
        margin-left:15px;
        margin-right:15px;
        top:5px;
        color:white;
        
        /* z-index: 1000; */
    }
    
    .dbll_img_letter{
      float:left;
      width:60px;
      height:60px;
      margin-right: 10px;
    }
    
    .dbll_name_another_game_under_description{
      margin-left:10px;
    }
    
    .dbll_up_icon_blk{
      position: absolute;
      bottom:0;
      right:0;
      border-top-left-radius: 5px;
      /* border:1px solid red; */
      /* z-index: 2; */
      cursor: pointer;
      /* background:#3B6CBF; */
    
    }
    
    .dbll_up_icon{
      width:70%;
      height:70%;
      margin:12%  15%;
    
      /* object-fit: cover; */
    }
    

                            
                             

}