/*------------- #RTL MAIN STYLES --------------*/
/*------------------------------------------------------------------
-------------------------------------------------------------------*/

/*------------- #general --------------*/


body {
    
    direction: rtl;
    text-align: right;
    font-family: "Rubik" , 'Montserrat' ,  sans-serif;
}
*{
    
    letter-spacing:0px !important;
}




/*------------- #top-nav --------------*/

.top-nav .nav-content .nav-title{
    font-size: var(--title-2);
}

.top-nav .nav-content .nav-actions  >*:not(:last-child){
    
    margin-right: 0;
    margin-left: 20px;
}

.top-nav .nav-content .nav-actions .nav-action span:not(:first-child){
    
    margin-left: 0;
    margin-right: .5rem;
}

@media(max-width:767.98px){
    
   
    .top-nav .nav-content .nav-actions  >*:not(:last-child){
    
        margin-right: 0;
        margin-left: 1rem;
    }

}

@media(max-width:575.98px){
    
  .top-nav .nav-content .nav-title::before{
    
     content: 'ג';
    font-family: "Rubik";
}

 .top-nav .nav-content .nav-actions  >*:not(:last-child){

    margin-right: 0;
    margin-left: .75rem;
}
 .top-nav .nav-content .nav-actions .nav-action span:not(:first-child){

    margin-left: 0;
    margin-right: .25rem;

}

    
}

@media(max-width:360px){
    
   
    .top-nav .nav-content .nav-actions  >*:not(:last-child){
    
        margin-right: 0;
        margin-left: .5rem;
    }

    
}


/*------------- #nav-modal --------------*/

.nav-modal{
    
   left: auto;
   right: -100%;
   justify-content: flex-start;
}
.nav-modal.open{
    
    right: 0;
    left: auto;
}
.nav-modal .nav-content .nav-head .nav-title::before{
    
    margin-right: 0;
    margin-left: .75rem;
    
}


/*------------- #board & keyboard --------------*/

.board .tile{
    
    font-size: 1.8rem;
}

.keyboard .key {
  
  margin-right: 0px;
  margin-left: 6px;
  font-family: inherit;  
}
.keyboard .key:last-child {
  margin-left: 0px;
}

.keyboard .spacer{
    
    flex: 1;
}

@media(min-width:576px){
    
    .board{
        
        padding-top:1.5rem ;
        padding-bottom: 1.5rem;
        
    }
}
@media(max-width:575.98px){
    
    .keyboard .key{
        
        margin-right: 0;
        margin-left: 4px;
        
    }
}

/*------------- #info-wrapper items  --------------*/

.board{

    padding: .75rem 10px;
}

.info-wrapper .item-style:last-child{

    margin-bottom: .75rem;
}

@media(max-width:575.98px){
    
   .info-wrapper .item-style:first-child{

        margin-top: 0;
    }   

}

/*------------- # game alert  --------------*/

/*------------- # game modal  --------------*/




.custom-modal .modal-close {
    
    right: auto;
    left: 16px;
  
}


.settings-modal .settings-items .item-wrap >*:first-child:not(:last-child){
    
    padding-right: 0;
    padding-left: 1.5rem;
}


.help-modal .help-instructions li::before{
    
   
    margin-right: 0;
    margin-left: .75rem;
   
}
.help-modal .help-examples .help-example .word-example .word-letter{
    
    margin-right: 0;
    margin-left: 4px;
    width: 40px;
    height: 40px;
    font-size: 1.3rem;
    
}


.statistics-modal .statistics-items .stats-item:last-child{
    
    margin-left: 0;
}
.statistics-modal .game-states .state-btn svg{
    
    margin-left: 0;
    margin-right: .75rem;
}


.dictionary-modal .dictionary-items .dictionary-link svg,
.dictionary-modal .dictionary-items .dictionary-link img{
    
    margin-right:0;
    margin-left: .5rem;
}



@media(max-width:575.98px){
    
    
    .settings-modal .settings-items .item-wrap >*:first-child:not(:last-child){
        
        padding-right: 0;
        padding-left: 1rem;
    }
    
    .statistics-modal .statistics-items .stats-item .stats-name {
    max-width: 75px;
    }

}



/*------------- # switch-btn  --------------*/


.switch-module-wrap .switch-btn span{
    
    left: auto;
    right: 2px;
    
}
.switch-module-wrap .switch-btn.checked span{
    
    transform: translateX(calc(-100% + 4px));
}


/*------------- # CUSTOM --------------*/

.nav-modal .nav-content .nav-head .nav-title::before{
    
    content: 'ג';
    font-family: "Rubik";
}