@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;400;500;600;700&display=swap');

* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Ubuntu', sans-serif;
}

:root {
    --blue: steelblue;
    --white: #fff;
    --grey: #f5f5f5;
    --black1: #222;
    --black2: #999;
    --expiring: rgba(247, 87, 87, 1);
    --new: rgba(87, 209, 247, 1);
    --prefered: rgba(183, 12, 196, 1);
    --active: rgba(108, 209, 124, 1);
    --gradient: linear-gradient(#93a5cf,#e4efe9);
    --main: #f9f9f8;
    --menuSecondary: darkcyan;
    --complementary: #B6DCFA;
}

body {
min-height: 100vh;
overflow-x: hidden;
}

.myContainer {
position: relative;
width: 100%;
}

.container {
    padding: 10px !important;
}

.navigation {
position: fixed;
width: 250px;
height: 100%;
background-color: var(--menuSecondary);
border-left: 10px solid var(--menuSecondary);
transition: 0.5s;
overflow: auto;
z-index: 1;
}

.navigation::-webkit-scrollbar {
    width: 0.2rem; /* Larghezza della barra di scorrimento (per browser basati su WebKit) */
}

.navigation::-webkit-scrollbar-thumb {
    background-color: transparent; /* Colore del "pulsante" della barra di scorrimento (per browser basati su WebKit) */
}

.navigation {
    scroll-behavior: smooth; /* Aggiunge un effetto di scorrimento fluido */
}

.navigation.active {
width: 80px;
}

.navigation.active ul .menu-voice {
    width: 80% !important;
}

.navigation ul {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding-left: 0;
}

.navigation ul li {
position: relative;
width: 100%;
list-style: none;
transition: 0.2s;
border-radius: 10px;
/*
border-top-left-radius: 30px;
border-bottom-left-radius: 30px;
*/
}
.menu-voice {
    width: 90% !important;
}

.navigation ul li:hover,
.navigation ul li.hovered,
.navigation ul li.active {
    background: var(--white);
    transform: translate(10px, -10px);
    box-shadow: -10px 10px 10px rgba(0, 0, 0, 0.2);
}

.navigation > ul > li:nth-child(1) {
/*margin-bottom: 40px;*/
pointer-events: none;
}

.navigation ul li a {
position: relative;
display: block;
width: 100%;
display: flex;
text-decoration: none;
color: var(--white);
}

.navigation ul li a .brandImg {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    padding: 10px 12px 10px 5px;
    transition: 1s;
}

.navigation ul li a .brandImg-mini {
    position: relative;
    top: 0;
    left: 0;
    display: none;
    width: 100%;
    height: 100%;
    object-fit: cover;
    padding: 35px;
    padding-bottom: 0;
}

.navigation.active ul li a .brandImg-mini {
    position: relative;
    top: 0;
    left: 0;
    opacity: 1;
    display: contents;
    width: 100%;
    height: 100%;
    object-fit: cover;
    padding: 0px;
    padding-bottom: 0;
}

.navigation ul li:hover a,
.navigation ul li.hovered a,
.navigation ul li.active a {
    color: var(--menuSecondary);
}

.navigation ul li a .icon {
    position: relative;
    display: block;
    min-width: 60px;
    height: 60px;
    line-height: 70px;
    text-align: center;
}

.navigation ul li a .icon ion-icon {
    font-size: 1.75em;
}

.navigation ul li a .title {
    position: relative;
    display: block;
    padding: 0 10px;
    height: 60px;
    line-height: 60px;
    text-align: start;
    white-space: nowrap;
}

/*Curve Outside*/
/*
.navigation ul li:hover a::before,
.navigation ul li.hovered a::before,
.navigation ul li.active a::before {
content: '';
position: absolute;
right: 0;
top: -50px;
width: 50px;
height: 50px;
background: transparent;
border-radius: 50%;
box-shadow: 35px 35px 0 10px var(--white);
pointer-events: none;
}

.navigation ul li:hover a::after,
.navigation ul li.hovered a::after,
.navigation ul li.active a::after {
content: '';
position: absolute;
right: 0;
bottom: -50px;
width: 50px;
height: 50px;
background: transparent;
border-radius: 50%;
box-shadow: 35px -35px 0 10px var(--white);
pointer-events: none;
}
*/

/* main */
.main {
position: absolute;
width: calc(100% - 250px);
left: 250px;
min-height: 100vh;
transition: 0.5s;
}

.main.active {
width: calc(100% - 80px);
left: 80px;
}

.topbar {
width: 100%;
height: 50px;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 10px;
box-shadow: 0 0 25px rgba(0, 0, 0, 0.05);
background-color: white;
}

.navbar-nav {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 10px;
    align-items: center;
}

.toggle {
position: relative;
top: 0;
width: 60px;
height: 60px;
display: flex;
justify-content: center;
align-items: center;
font-size: 2.5em;
cursor: pointer;
}

.search {
position: relative;
width: 400px;
margin: 0 0;
}

.search .input-group #button-addon2 ion-icon {
font-size: 1.2em;
}

.user {
position: relative;
width: 40px;
height: 40px;
border-radius: 50%;
overflow: hidden;
cursor: pointer;
}

.user img {
position: relative;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
background: var(--black1);
}

.topbar .navbar-nav li:hover {
    background: white;
}

.topbar .navbar-nav li:hover a {
    color: darkcyan;
}

/* sub main */
/*.subMain {
    padding: 40px;
}*/
.padding-20 {
    padding: 20px;
}

.padding-40 {
    padding: 40px;
}

.accordion-body {
    background-color: #008b8b;
}

/* responsive design */
@media (max-width: 1400px) {
    .navigation {
left: -250px;
}

.navigation.active {
width: 200px;
left: 0;
}

.main {
width: 100%;
left: 0;
}

.main.active {
left: 200px;
}

.summary-card .card-body h5 {
font-size: 1.5em;
}

.summary-card .card-body p {
font-size: 1.8em;
}

.summary-card .card-footer {
font-size: 0.6em;
}
}

@media(max-width: 767px) {
    .navbar-nav {
        width: 50%;
    }

    .reverse-on-mobile {
        flex-direction: column-reverse;
    }
}

@media (max-width: 560px) {
.search {
width: 200px;
}
    .header-title {
        font-size: 0.6em;
    }
    .navbar-nav {
        width: 85%;
    }

}