.otree-body{

    max-width: 1300px;
    width: 100%;      
        
        }


.page-header {
    padding-top: 0;
}

 .info{
    display: flow-root;
    padding: 10px;
    background-color: #f5f5f5;
    border: 1px solid #e3e3e3;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.05);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.05);
}
 
#popup_box{
    display:none;
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: #000000d9;
         
         }

#yourtour{ 
    top: 50%;
    left: 50%;
    background: #FFF;
    height: 200px;
    width: 80%;
    padding: 50px;
    border-radius: 20px;
    border: 1px solid #3b84c3;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 20px #999;
    position: fixed;    
    font-weight: bold;
     font-size: 2vw; 
    text-align: center;  
         }


#royalties_box{
    top: 50%;
    left: 50%;
    background: #FFF;
    height: 500px;
    width: 80%;
    padding: 50px;
    border-radius: 20px;
    border: 1px solid #3b84c3;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 20px #999;
    position: fixed;    
    font-weight: bold;
    font-size: 1.8vw;  

       
        }

#thanks{
        
 
    display: none;
    text-align: center;
    font-size: 3vw;
    color: #607D8B;       
        
        }
 
 .card{
           margin-top: 800px;

       }
 .card .debug-info{
         margin-top: 800px;
         margin-bottom : 400px;
         width:90%;
         }
 
 .col-form-label{
             font-weight: bold;
         }

.top-title{
  
    
    padding: .5rem 1.25rem 0 1.25rem ;
    background-color: rgba(0,0,0,.03);
    border-bottom: 1px solid rgba(0,0,0,.125);
    margin-bottom: 5px;
    text-align: center;

border-bottom: 1px solid #3b84c3;      
        
        }

.top-title h6{
  
    font-weight: bold;
    text-align: right;
        
        }
  .game{
    width: 100%;
    margin-top: 150px;
        }
    
  .points{
          
    color: #ffffff;
    border-radius: 7px;
    background: #03a9f4;
    border: 1px solid #2196F3;
    box-shadow: 0px 0px 10px 0px #2196F3;
    padding: 5px;          
          }
  
  .points-negative{
          
    color: #ffffff;
    border-radius: 7px;
    background: #D32F2F;
    border: 1px solid #B71C1C;
    box-shadow: 0px 0px 10px 0px #F44336;
    padding: 5px;        
          }
  
  .top-fixed_box{
          
    position: fixed;
    top: 0;
    left: 0;
    background-color: #FFF;
    width: 100%;
    z-index: 1;
    padding-bottom : 5px;
    box-shadow: 1px 4px 10px #999;       
          }
  
  .fixed_box{
          
    position: fixed;
    bottom: 0;
    left: 0;
    padding: 0 40px;
    padding-top: 5px;
    background-color: #FFF;
    width: 100%;
    z-index: 1;
    padding-bottom: 15px;
    border-top: 1px solid #3b84c3;
    box-shadow: 0 0 20px #999;
    
         
          }
 
  .board_word_score{
          
    position: absolute;
    left: 0;
    background: #03a9f4;
    text-align: center;
    min-width: 37px;
    padding-right: 5px;
    padding-left: 5px;
    font-weight: bold;
    bottom: 5px;
    color: #FFF;
    border-top-right-radius: 10px;
}



progress {
    vertical-align: text-top;
}
  
  .board_word_cost{
          
    position: absolute;
    right: 0;
    background: #dc3545;
    padding: 2px;
    padding-left: 5px;
    padding-right: 5px;
    font-weight: bold;
    bottom: 5px;
    color: #FFF;
    border-top-left-radius: 10px;

         }
  
  .board_box{
   display: flex;
    margin-bottom: 270px;
    margin-top: 20px;
          }

 .top_desc{
    height: 20px;
    margin: auto;
    text-align: center;
    height: 20px;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
    max-width: 1140px;
         }   
  
  .title_desc{
    font-weight: bold;
    color: #343a40;        
  margin-bottom:5px;        
          }
 

  
    .hand_box{
    float: left;
    width: 45%;
    margin-top: 0;
    margin-right: 5%;
          }
.player_other_words{
     display: flex;
        }
.player_words{
padding-top: 20px;  
        }
.player_words_first
{
    margin-right: 10px;
    padding: 10px;
    background: #8bc34a45;
    border-radius: 15px; 
        margin-top: 10px;
        }

.word_cost_score{
position: absolute;
    width: 100%;
    height: 5px;
    bottom: 0;
    background: #03a9f4;
        }
.word_cost{
    background: #dc3545;
    height: 100%;
    right: 0;
    position: absolute;

}

.btn-primary:disabled {
    color: #fff;
    background-color: #CCC;
    border-color: #CCC;
}

 .btn_submit{
    margin-top: 20px;
    text-align: center;
         }   
      
    .new_box{
    float: left;
    width: 45%;
    margin-top: 0;
    margin-right: 5%;
          }
    .new_box .title_desc{
            
    float: left;            
            
            }
.otree-timer p{
        
    margin-bottom: 0;       
        }    
 
    .words {
    min-height: 20px;
    list-style-type: none;
    margin-bottom: 0;
    padding-right: 35px;
    padding-left: 38px;
    padding-bottom: 5px;
    padding-top: 5px;
    width: fit-content;
    margin: auto;
  }
  
  .word_box{
    margin-bottom: 0px;
    margin-right: 5px;
    position: relative;
    border: 1px solid #eee;
    border-radius: 8px;
    min-width: 285px;
  }
    
   .word_score{
text-align: right;
    min-height: 25px;
    font-weight: bold;
    color: #7b7b7b;
           }
    
    
    .words li:hover {
            
            }

  
  
  .words li {
          
    display: inline-table;
    margin: 0 1px 1px 1px;
    padding: 2px 7px 2px 7px;
    font-weight: bold;
    cursor: pointer;

  }
  .words .ui-state-disabled{
              padding: 0;
    font-size: 2vw;

    font-weight: 400;
          }  

  
    .words li i{
    font-size: 1vw;
    top: 5px;
    left: 3px;
    position: relative;
    font-weight: bold;

  }

  
#hand_area .new_letter{
    background:    #8bc34a;
    border: 1px solid #4CAF50;
    box-shadow: 0px 0px 10px 0px #4CAF50;
         }
#hand_area .new_letter:hover {
    background: #347737;
}
  
  .ui-state-highlight:hover {
    background: #0673a5;

}
  
  .ui-state-highlight {
    color: #ffffff;
    border-radius: 7px;
    font-size: 1.9vw;
    background:    #03a9f4;
    border: 1px solid #2196F3;
    box-shadow: 0px 0px 10px 0px #2196F3;
         }

.test_word{
    display: inline-flex;
    border: 1px solid #eee;
    margin: 5px 5px 5px 5px;
    padding: 2px 7px 2px 12px;
    font-size: 2vw;
    color: #9E9E9E;
    letter-spacing: 1vw;
    border-radius: 5px;
        }

  
  #notexist{
     display:none; 
          }
    #tooshort{
     display:none; 
          }
    #toolong{
     display:none; 
          }
    #not_new{
     display:none; 
          }
    #not_new_and_wrong{
     display:none; 
          }
    
   #extendmax{
   display:none; 
            }
  
  #new_word_area {
  min-height: 86px;
  border: 1px solid #607D8B;
    min-width: 100%;
      border-radius: 5px;
    background: #8bc34a45;
  }
  
  #hand_area{
  min-height: 86px;
  border: 1px solid #CCC;
    min-width: 100%;
    border-radius: 5px;

  }
  .notindict{
            border: 1px solid #dc3545;
box-shadow: 0px 0px 5px 2px #dc3545;

          }
  .tooshort_box{
          
    border-color: #e4b628;
    box-shadow: 0px 0px 5px 2px #ffc000;

        
          }