body{
    box-sizing: border-box;
    font-family: 'Raleway', sans-serif;
}

*{
    margin: 0px;
}

/*  Nav Bar Container */
.nav_bar{
    height : 1.5rem;
    background-color: #10ac84;
    font-family: 'Raleway', sans-serif;
    font-weight: 10;
    text-align: center;
    font-size: large;
    color: #ffffff;
}

/* Menu Container */
.menu_container{
    height : 6rem;
    background-color: #ffffff;
    /* border:1px solid #576574; */
    display: flex;
    align-items: center;
}
.menu_container>*{
    width: 25%;
    height: 80%;
    border-right: 1px solid #576574;
}

.operation_container{
    display: flex;
    justify-content: center;
    align-items: center;
}


.operation_container>*{
    width: 33%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.fa-save{
    font-size: 2rem;
}

.fa-folder-open{
    font-size: 2rem;
}
.openfile{
    opacity: 0;
    font-size: 0px;
}
.fa-trash{
    font-size: 2rem;
}
.font_container{
    display: flex;
    justify-content: space-around;
    
}
.subgroup{
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    width: 45%;
    height: 100%;
}

.subgroup>*{
    width: 100%;
}
.font_family, .font_size{
    border: 0.2px solid rgb(218, 213, 213);
    color: #3e3e3f;
}

.BUI_container{
    display: flex;
    justify-content: space-between;
}
.BUI_container>*{
    width:30%;
    border: 0.2px solid rgb(218, 213, 213);
    color: #3e3e3f;
}
.color_container>*{
    width : 45%;
    border: 0.2px solid rgb(218, 213, 213);
    color: #3e3e3f;
}
.color_container{
    display: flex;
    justify-content: space-between;

}
/* Alignment Container */
.alignment_container{
    display: flex;
    align-items: center;
    justify-content: center;
    
    
}

.alignment_container>*{
    width: 20%;
    border: 0.2px solid rgb(218, 213, 213);
    color: #3e3e3f;
}



/* Sheet Container */
.sheet_container{
    height: 3rem;
    display: flex;
    background-color: #f7f1e3;
}

.plus_container{
    height: 100%;
    width : 5%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.icon{
    font-size: 1.5rem;
    color: #d1ccc0;
}

.sheets{
    width: 95%;
    height: 100%;
    display: flex;
    overflow-x: auto;
}
.sheet{
    min-width: 10%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border:0.1px solid #6c7a89;
    border-radius: 0.4rem 0.4rem 0rem 0rem;
}

.active_sheet{
    background-color: #bdc3c7;;
}
/* Formula conatiner */
.formula_container{
    height : 2rem;
    background-color: #ced6e0;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}

.address_box{
    height: 70%;
    width :10%; 
    border: none;
}
.separator {
    height: 70%;
    width: 2%;
    font-size: 150%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.formula_box{
    height: 70%;
    width:85%;
    border: none;
}







/* Grid Box Styling */
.grid_container{
    position : relative;
    height : calc(100vh - (1.5rem + 6rem + 2rem + 3rem));
    width: 100%;
    overflow: scroll;
}

.top_left_block{
    height : 1.4rem;
    width: 2rem;
    background: #576574;
    border: 1px solid #d1ccc0;
    border-bottom: none;
    position: absolute;
    z-index: 100;
}
/* Now Top row Elements */
.top_row{
    height : 1.5rem;
    background-color: #f1f2f6;
    display: flex;
    position: absolute;
    top: 1px;
    left: 2rem;
    align-items: center;
    text-align: center;
    position: absolute;
    z-index: 90;
    
}

.top_col{
    height: 100%;
    min-width: 4rem;
    border: 1px solid #d1ccc0;
    font-family: 'Raleway', sans-serif;
    z-index: 90;
}

.left_col{
    
    text-align: center;
    position: absolute;
    top :1.5rem;
    z-index: 90;
}
.left_col_box{
    border: 1px solid #d1ccc0;
    font-family: 'Raleway', sans-serif;
    width: 2rem;
    height : 1.5rem;
    background-color: #f1f2f6;
    
    top:1.5rem ;
   
}

.grid{
    position: absolute;
    top : 1.5rem;
    left: 2rem;
}
.row{
    display: flex;
}

.col {
    min-width: 4rem;
    max-width: 4rem;
    border: 1px solid #d1ccc0;
    min-height: 1.5rem;
}


/*  Add box shadow  */
.active_btn{
    background-color: #d8d2d2;
}