/*
==========
General content style.
==========
*/

.content{
    width: 100%;
    height: calc(100vh - (50px + 2em));
    display: flex;
}

/*
==========
Navigation menu.
==========
*/

.sidebar{
    width: 300px;
    height: 100%;
    background-color: var(--darkblue-color);
    transition: all ease .3s;
    overflow: auto;
}

/* General style for the scrollbar */
.sidebar::-webkit-scrollbar {
    width: 10px;  /* Scrollbar width */
    height: 10px; /* Scrollbar height for horizontal scrolling */
}

/* Style for the scrollbar background track */
.sidebar::-webkit-scrollbar-track {
    background: none;  /* Track background color */
}

/* Thumb Style: The part that moves */
.sidebar::-webkit-scrollbar-thumb {
    background: var(--white-color);  /* Thumb color */
    border-radius: 5px;
}

/* Style for the thumb on hover */
.sidebar::-webkit-scrollbar-thumb:hover {
    background: var(--white-color);  /* Thumb color on hover */
    cursor: pointer;
}

.sidebar--short{
    width: 80px;
    height: 100%;
    background-color: var(--darkblue-color);
    overflow: hidden;
    overflow: auto;
}


.sidebar .navigation{
    width: 100%;
    height: auto;
    padding: 0;
    margin: 0;
}

#item-menu{
    color: var(--white-color);
    width: 100%;
    list-style: none;
    height: 50px;
    display: flex;
    padding-left: 1em;
    padding-right: 1em;
    align-items: center;
    justify-content: flex-start;
}

.container__icon{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
}

.container__icon:hover{
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
}

.container__icon svg{
    width: 100%;
    height: 100%;
    fill: var(--white-color);
}

.icon--selected svg{
    width: 100%;
    height: 100%;
    fill: var(--darkblue-color);
}

.sidebar .navigation__item{
    width: 100%;
    height: 50px;
    color: var(--white-color);
    list-style: none;
    transition: all ease .3s;
    padding-left: 1em;
    padding-right: 1em;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 1em;
}

.navigation__item .menu__text{
    display: block;
}

.navigation__item .menu__text--hidden{
    display: none;
}

.sidebar .navigation__item:hover{
    background-color: var(--lightblue-color);
    cursor: pointer;
    transition: all ease .3s;
}

.sidebar .navigation__item--selected{
    background-color: var(--white-color);
    color: var(--blue-color);
}

.sidebar .navigation__item--selected:hover{
    background-color: var(--white-color);
    color: var(--blue-color);
}

/*
==========
Summary styles.
==========
*/

.summary{
    width: 100%;
    height: calc(100px + 2em);
    overflow: auto;
    display: flex;
    gap: 1em;
    padding: 1em;
    justify-content: flex-start;
    overflow: auto;
    scrollbar-width: none; /* For browser Firefox */
    -ms-overflow-style: none;  /* For browser Internet Explorer 10+ */
}

.summary::-webkit-scrollbar {
    display: none; /* For browsers: Chrome, Safari, y Edge */
}

.summary .card{
    width: 200px;
    height: 100px;
    background-color: var(--lightblue-color);
    border-radius: 5px;
    display: flex;
    gap: .5em;
    color: var(--white-color);
    padding: 1em;
}

.summary .card .icon{
    display: flex;
    width: 70px;
    height: 100%;
    align-items: center;
    justify-content: center;
}

.summary .card .icon svg{
    width: 50px;
    height: 50px;
    fill: var(--white-color);
}

.summary .card .card__data{
    width: 130px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-items: flex-start;
    justify-content: center;
}

.summary .card__balance--red{
    width: 200px;
    height: 100px;
    background-color: var(--red-color);
    border-radius: 5px;
    display: flex;
    gap: .5em;
    color: var(--white-color);
    padding: 1em;
}

.summary .card__balance--red .icon{
    display: flex;
    width: 70px;
    height: 100%;
    align-items: center;
    justify-content: center;
}

.summary .card__balance--red .icon svg{
    width: 50px;
    height: 50px;
    fill: var(--white-color);
}

.summary .card__balance--red .card__data{
    width: 130px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-items: flex-start;
    justify-content: center;
}