h1{
    font-size: 1.6em;
    margin: 1em 0;
    text-align: center;
}

input[type="submit"]{
    text-align: center;
    min-width: 100%;
}

#login_wrapper{
    margin-top:15%;
}

.bg-secondary {
  background-color: #b8ced2 !important;
}

.bg-red {
  background-color: #F04B5D !important;
}

.btn-primary {
  background-color: #F04B5D !important;
  border-color: #F04B5D !important;
}

.navbar a{
    color: rgb(242, 242, 242) !important;
}

.navbar-light .navbar-toggler-icon {
     background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(0, 0, 0, 0.5)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}


body.login {
    background-image: url("../img/login-bg.jpg") ;
    background-size: auto auto;
    background-repeat: no-repeat;
}


body.login h1{
    color: #fa475d;
}

body.login body.login label{
  color: #2e2a2a;
}

 @import "https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700";
body {
    font-family: 'Poppins', sans-serif;
    background-image: url("../img/bg-white-shadow.jpg") ;
    background-size: auto auto;
    background-repeat: no-repeat;
}

p {
    font-family: 'Poppins', sans-serif;
    font-size: 1.1em;
    font-weight: 300;
    line-height: 1.7em;
    color: #999;
}

a,
a:hover,
a:focus {
    color: inherit;
    text-decoration: none;
    transition: all 0.3s;
}

.navbar {
    padding: 15px 10px;
    background: #fff;
    border: none;
    border-radius: 0;
    margin-bottom: 40px;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
}

.navbar-btn {
    box-shadow: none;
    outline: none !important;
    border: none;
}

.line {
    width: 100%;
    height: 1px;
    border-bottom: 1px dashed #ddd;
    margin: 40px 0;
}

/* ---------------------------------------------------
    SIDEBAR STYLE
----------------------------------------------------- */

.wrapper {
    display: flex;
    width: 100%;
    align-items: stretch;
}

#sidebar {
    min-width: 250px;
    max-width: 250px;
    background: #f04b5d;
    color: #fff;
    transition: all 0.3s;
}

#sidebar.active {
    margin-left: -250px;
}

#sidebar .sidebar-header {
    padding: 20px;
    background: #f04b5d;
}

#sidebar ul.components {
    padding: 20px 0;
    border-bottom: 1px solid #f04b5d;
}

#sidebar ul p {
    color: #fff;
    padding: 10px;
}

#sidebar ul li a {
    padding: 10px;
    font-size: 1.1em;
    display: block;
}

#sidebar ul li a:hover {
    color: #7386D5;
    background: #fff;
}

#sidebar ul li.active>a,
a[aria-expanded="true"] {
    color: #fff;
    background: #f04b5d;
}

a[data-toggle="collapse"] {
    position: relative;
}

.dropdown-toggle::after {
    display: block;
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
}

ul ul a {
    font-size: 0.9em !important;
    padding-left: 30px !important;
    background: #6d7fcc;
}

ul.CTAs {
    padding: 20px;
}

ul.CTAs a {
    text-align: center;
    font-size: 0.9em !important;
    display: block;
    border-radius: 5px;
    margin-bottom: 5px;
}

a.download {
    background: #fff;
    color: #7386D5;
}

a.article,
a.article:hover {
    background: #6d7fcc !important;
    color: #fff !important;
}

/* ---------------------------------------------------
    CONTENT STYLE
----------------------------------------------------- */

#content {
    width: 100%;
    padding: 20px;
    min-height: 100vh;
    transition: all 0.3s;
}

/* ---------------------------------------------------
    MEDIAQUERIES
----------------------------------------------------- */

@media (max-width: 768px) {
    #sidebar {
        margin-left: -250px;
    }
    #sidebar.active {
        margin-left: 0;
    }
    #sidebarCollapse span {
        display: none;
    }
}

main > .container {
  padding: 60px 15px 0;
}

.img-fluid {
  max-width: 40%;
}

#sidebarCollapse {
  background: #f04b5d;
  color: white;
}

#submit-id-submit {
  background: #f04b5d;
  color: white;
  border-color: #f04b5d;
}



        /* Menu styling */
        .menu {
            display: flex;
            align-items: center;
            gap: 20px;
            margin-top: 35px;
            margin-right: 100px;
        }

        /* Menu Items */
        .menu-item {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 40px;
            height: 40px;
            background-color: #f0f0f0;
            border-radius: 50%;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        .menu-item:hover {
            background-color: #ddd;
        }

        /* Icons */
        .menu-item i {
            font-size: 1.2em;
            color: #333;
        }

        /* Tooltip text */
        .menu-item span {
            position: absolute;
            top: 180%;
            transform: translate(10px, -50%);
            background-color: #333;
            color: #fff;
            padding: 5px 10px;
            border-radius: 5px;
            font-size: 0.9em;
            white-space: nowrap;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.3s, visibility 0.3s;
        }

        .menu-item:hover span {
            opacity: 1;
            visibility: visible;
        }

        /* Wrapper to align menu to the right */
        .menu-wrapper {
            display: flex;
            justify-content: flex-end;
            padding-right: 20px;
            /* Adjust as necessary */
        }

        /* Adjust the margin for .menu */
        .menu {
            display: flex;
            align-items: center;
            gap: 20px;
            text-align: right;
        }

        /* Center-align on mobile */
        @media (max-width: 768px) {

            /* Adjust breakpoint as needed */
            .menu-wrapper {
                justify-content: center;
                padding-right: 0;
            }
        }