:root{
    --colorPrimary: #333;
    --colorSecondary: #848484;
    
    --bgBody: #333;
    --bgHeader: #848484;
    --colorTitle: #333;

    --colorUser: #333;
    --bgMenuUser: #848484;
    --boxShadow: 0 0 30px 0 #333;

    --bgContanier: #848484;

    --bgLabelInputField: #333;
    --colorLabelInputField: #848484;

    --borderEleInput: #333;
    --bgEleInput: #ababab;
    /* --colorEleInput; */
    
    --bgBtn: #333;
    --colorBtn: #aaaaaa;

    --colorPopUp: #333;
}

.titleContainer{
    color: var(--colorTitle);
    text-align: center;
}

.stato {
    display: flex;
    align-items: center;
    gap: 5px;
    width: fit-content;
    background-color: #494848;
    padding: 5px 10px;
    border-radius: 20px;
}

.stato span {
    display: block;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    background-color: var(--color);
}

.stato label {
    font-weight: bold;
    text-transform: uppercase;
    font-size: 14px;
    color: var(--color);
    cursor: pointer;
}

/** **/

.pageContainer {
    display: flex;
    flex-direction: column;
    width: 100%;
    flex: 1 1 auto;
    /* gap: 5px; */
    overflow: hidden;
}

.pageNav{
    display: flex;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
}

.navInner{
    display: flex;
    align-items: center;
    justify-content: center;
    /* width: max-content; */
    margin: 0 auto;
    position: relative;
    background-color: #505050;
    border-radius: 10px 10px 0 0 ;
}

.activeBg{
    position: absolute;
    height: 100%;
    background-color: #ffffff7a;
    transition: all 0.3s ease;
    z-index: 100;
}

.activeBg.first{
    border-top-left-radius: 10px;
}

.activeBg.last{
    border-top-right-radius: 10px;
}

.pageName{
    padding: 10px 15px;
    white-space: nowrap;
    cursor: pointer;
    position: relative;
    z-index: 101;
}

.pageContent{
    display: flex;
    flex: 1 1 auto;
    background-color: #6b6b6b;
    border-radius: 10px;
    padding: 10px;
    overflow: auto;
    width: 100%;
    height: 100%;
    z-index: 99;
}

.page{
    display: none;
    width: 100%;
}