*{
    box-sizing: border-box;
}

body{
    padding: 0px;
    margin: 0px;
}

/* *************************************************************************************************************** */
.page-actions-container{
    height: 2.5rem;
    background-color: #218c74;
    display: flex;
    align-items: center;
}
.page-action{
    margin-left: 1rem;
    color: white;
    font-family:Verdana;
}
/* ******************************************************************************************************************************* */

.cellprop-actions-container{
    height: 2rem;
    background-color:#dfe6e9;
    display: flex;
    align-items: center;
    /* padding-left: 0.5rem; */
}
.cellprop-actions-container > * {
    display: inline-block;
    margin: 1rem;
    border: none;
    outline: none;
}
.font-family-prop, .font-size-prop{
    border-radius: 2px;
    padding: 0.2rem;
}

.cellprop-actions-container > *:hover{
    cursor: pointer;
}


/* ******************************************************************************************************************************* */
.formula-actions-container{
    height: 2rem;
    background-color: #dfe6e9;
    padding-left: 1rem;
    display: flex;
    align-items: center;
}

.formula-actions-container>*{
    display: inline-block;
    margin-right: 0.7rem;
}

.formula-bar{
    width: calc(100vw - 5rem - 0.7rem - 0.7rem - 0.7rem);
}

.formula-actions-container > input {
    border: none;
    outline: none;
    height: 60%;
}

.formula-icon{
    width: 1.5rem;
}

.address-bar{
    text-align: center;
}


/* ******************************************************************************************************************************* */
.grid-container{
    height: calc(100vh - 11rem);
    background-color: #f1f2f6;
}
/* ******************************************************************************************************************************* */
.sheet-action-container{
    height: 2rem;
    display: flex;
    align-items: center;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    gap: 1rem;
    background-color:#ced6e9;
}
.sheet-action-container > * {
    display: inline-block;
}
.sheets-folder-container{
    display: flex;
    align-items: center;
    height: 75%;
    width: calc(100vw - 1.5vw);
    background-color: cornsilk;
}
.sheet-add-icon{
    width: 2vw;
}
.sheet-folder{
    text-decoration-thickness: 2px;
    font-family: Verdana;
    /* font-weight: bold; */
}

/* Grid Container************************************************************************* */
.grid-container{
    overflow: scroll;
    position: relative;
}

.top-left-dummy-box{
    height: 2rem;
    width: 2rem;
    background-color: dimgray;
    position: fixed;
    z-index: 5;
}

.address-col-cont{
    position: sticky;
    top:2rem;
    left: 0rem;
}
 
.address-row-cont{
    height: 2rem;
    display: flex;
    position: sticky;
    top: 0rem;
    left: 2rem;
}

.cells-cont{
    position: absolute;
    top: 0rem;
    left: 2rem;
}

/* Grid Container > styling inside grid ----********************************************** */
.address-col{
    height: 2rem;
    width: 2rem;
    text-align: center;
    border: 1px solid lightgrey;
    display: flex;
    justify-content: center;
    align-items: center;
}

.address-row{
    height: 2rem;
    width: 5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid lightgrey;
    
}

.row-cont{
    display: flex;
}

.cell{
    height: 2rem;
    width: 5rem;
    border: 1px solid lightgrey;
    outline-color:blue;
}

.color-prop{
    position: relative;
}

.color-prop > input {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
}