.navbar {
    min-height: 66px;
}

.navbar-brand {
    font-size: 1.5rem;
    padding-top: 0.2rem;
    color: white;
}

.navbar-nav .nav-link {
    padding: 0.25rem 0.5rem;
    font-size: 1.1rem;
}

.act,
.navbar ul li a:hover {
  color: whitesmoke !important;
}

.navbar .dropdown-menu a {
  color: black;
}

.navbar .dropdown-menu a:hover {
  color: black !important;
}

.navbar {
    background: linear-gradient(to right, #4548f4, #c749ee);
}


.navbar-toggler {
    width: 20px;
    height: 20px;
    position: relative;
    transition: .5s ease-in-out;
}

.navbar-toggler,
.navbar-toggler:focus,
.navbar-toggler:active,
.navbar-toggler-icon:focus {
    outline: none;
    box-shadow: none;
    border: 0;
    position: relative;
}

.navbar-toggler span {
    margin: 0;
    padding: 0;
}

.toggler-icon {
    display: block;
    position: absolute;
    height: 3px;
    width: 100%;
    background:  rgb(53, 53, 53);
    border-radius: 1px;
    opacity: 1;
    left: 0;
    transform: rotate(0deg);
    transition: .25s ease-in-out;
}

.middle-bar {
    margin-top: 0px;
}


/* State when the navbar is collapsed */
.navbar-toggler.collapsed .top-bar {
    position: absolute;
    top: 0px;
    transform: rotate(0deg);
}

.navbar-toggler.collapsed .middle-bar {
    opacity: 1;
    position: absolute;
    top: 10px;
    filter: alpha(opacity=100);
}

.navbar-toggler.collapsed .bottom-bar {
    position: absolute;
    top: 20px;
    transform: rotate(0deg);
}

/* when navigation is clicked */
.navbar-toggler .top-bar {
    top: inherit;
    transform: rotate(135deg);
}

.navbar-toggler .middle-bar {
    opacity: 0;
    top: inherit;
    filter: alpha(opacity=0);
}

.navbar-toggler .bottom-bar {
    top: inherit;
    transform: rotate(-135deg);
}

/* Color of 3 lines */
.navbar-toggler.collapsed .toggler-icon {
    background: linear-gradient( 263deg, rgb(53, 53, 53) 0%, rgb(128, 128, 128) 100%);
}

@media (max-width: 768px) {
    .navbar {
        min-height: auto;
    }

    .navbar-brand {
        font-size: 1.25rem;
    }

    .navbar-nav .nav-link {
        padding: 0.5rem 1rem;
        font-size: 1.1rem;
    }

    #navSubmit {
        display: none;
    }

    #navOverview {
        display: none;
    }
}