@import "https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700";


.navbar {
    font-family: "Poppins", sans-serif !important;
    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;
}

i, span {
    display: inline-block;
}

/* ---------------------------------------------------
    SIDEBAR STYLE
----------------------------------------------------- */
.wrapper {
    display: flex;
    align-items: stretch;
}

.navbar {
    font-family: "Poppins", sans-serif !important;
    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;
}

i, span {
    display: inline-block;
}

/* ---------------------------------------------------
    SIDEBAR STYLE
----------------------------------------------------- */
.wrapper {
    display: flex;
    align-items: stretch;
}

#sidebar {
    min-width: 90px;
    max-width: 90px;
    border-right: 1px solid #e0e0e0;
    background: #ffffff;
    color: #757575;
    transition: all 0.3s;
    position: fixed;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 999;
    font-family: "Poppins", sans-serif !important;
}

.menu-button {
    font-size: 12px;
    padding: 16px 0 16px;
    display: block;
    position: relative;
    letter-spacing: 0.55px;
    border: 0px;
}

.menu-buttons {
    text-align: center;
}
.menu-border {
    border-bottom: 1px solid #e0e0e0;
}

#sidebar.active {
    min-width: 400px;
    max-width: 400px;
    text-align: center;
}

#sidebar.active .sidebar-header h3, #sidebar.active .CTAs {
    display: block;
}

#sidebar.active .sidebar-header strong {
    display: none;
}

#sidebar ul li a {
    text-align: left;
}

#sidebar.active ul li a {
    padding: 20px 10px;
    font-size: 0.85em;
}

#sidebar.active ul li a i {
    margin-right:  0;
    display: block;
    font-size: 1.8em;
    margin-bottom: 5px;
}

#sidebar.active ul ul a {
    padding: 10px !important;
}

#sidebar.active a[aria-expanded="false"]::before, #sidebar.active a[aria-expanded="true"]::before {
    top: auto;
    bottom: 5px;
    right: 50%;
    transform: translateX(50%);
}

#sidebar .sidebar-header {
    /*padding: 20px;*/
    background: #ffffff;
}

#sidebar .sidebar-header strong {
    display: none;
    font-size: 1.8em;
}

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

#sidebar ul li a {
    padding: 10px;
    font-size: 1.1em;
    display: block;
    color: #343434;
}
#sidebar ul li a:hover {
    color: #B84B16;
    background: #fff;
}
#sidebar ul li a i {
    margin-right: 10px;
}

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


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

a[aria-expanded="false"]::before, a[aria-expanded="true"]::before {
    content: '\e259';
    display: block;
    position: absolute;
    right: 20px;
    font-family: 'Glyphicons Halflings';
    font-size: 0.6em;
}
a[aria-expanded="true"]::before {
    content: '\e260';
}


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

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: #ffffff !important;
    color: #fff !important;
}



/* ---------------------------------------------------
    CONTENT STYLE
----------------------------------------------------- */
#content {
    padding: 20px;
    min-height: 100vh;
    transition: all 0.3s;
}


/* ---------------------------------------------------
    MEDIAQUERIES
----------------------------------------------------- */
@media (max-width: 768px) {
    #sidebar {
        min-width: 80px;
        max-width: 80px;
        text-align: center;
        margin-left: -80px !important ;
    }
    a[aria-expanded="false"]::before, a[aria-expanded="true"]::before {
        top: auto;
        bottom: 5px;
        right: 50%;
        transform: translateX(50%);
    }
    #sidebar.active {
        margin-left: 0 !important;
    }

    #sidebar .sidebar-header h3, #sidebar .CTAs {
        display: none;
    }

    #sidebar .sidebar-header strong {
        display: block;
    }

    #sidebar ul li a {
        padding: 20px 10px;
    }

    #sidebar ul li a span {
        font-size: 0.85em;
    }
    #sidebar ul li a i {
        margin-right:  0;
        display: block;
    }

    #sidebar ul ul a {
        padding: 10px !important;
    }

    #sidebar ul li a i {
        font-size: 1.3em;
    }
    #sidebar {
        margin-left: 0;
    }
  /*  #sidebarCollapse span {
        display: none;
    } */
}

.active .mi-down {
    -moz-transform: translateY(11px);
    -webkit-transform: translateY(11px);
    transform: translateY(11px);
    text-transform: uppercase;
}

.logo-tab img, #nav-icon2 {
    -moz-transition: 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -webkit-transition: 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition: 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

#menuToggle {
    cursor: pointer;
}
/*
.menu-inside, .nav {
    width: 90px;
}*/
.menu-inside {
    width: 90px;
}

.menu-button {
    cursor: pointer;
}
/*===== menu button animation =====*/
#nav-icon2 {
	width: 20px;
    height: 14px;
    margin: 0 auto;
	position: relative;
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	transform: rotate(0deg);
	-webkit-transition: 0.5s ease-in-out;
	-moz-transition: 0.5s ease-in-out;
	-o-transition: 0.5s ease-in-out;
	transition: 0.5s ease-in-out;
	cursor: pointer;
}
#nav-icon2 span {
	display: block;
	position: absolute;
	height: 2px;
	width: 50%;
	background: #B84B16;
	opacity: 1;
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	transform: rotate(0deg);
	-webkit-transition: 0.25s ease-in-out;
	-moz-transition: 0.25s ease-in-out;
	-o-transition: 0.25s ease-in-out;
	transition: 0.25s ease-in-out;
}
#nav-icon2 span:nth-child(even) {
	left: 50%;
}
#nav-icon2 span:nth-child(odd) {
	left: 0px;
}
#nav-icon2 span:nth-child(1),
#nav-icon2 span:nth-child(2) {
	top: 0px;
}
#nav-icon2 span:nth-child(3),
#nav-icon2 span:nth-child(4) {
	top: 6px;
}
#nav-icon2 span:nth-child(5),
#nav-icon2 span:nth-child(6) {
	top: 12px;
}


.active #nav-icon2 span:nth-child(1),
.active #nav-icon2 span:nth-child(6) {
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(45deg);
}

.active #nav-icon2 span:nth-child(2),
.active #nav-icon2 span:nth-child(5) {
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

.active #nav-icon2 span:nth-child(1) {
	left: 2px;
	top: 3px;
}
.active #nav-icon2 span:nth-child(2) {
	left: -moz-calc(50% - 2px);
	left: -webkit-calc(50% - 2px);
	left: calc(50% - 2px);
	top: 3px;
}
.active #nav-icon2 span:nth-child(3) {
	left: -50%;
	opacity: 0;
}
.active #nav-icon2 span:nth-child(4) {
	left: 100%;
	opacity: 0;
}
.active #nav-icon2 span:nth-child(5) {
	left: 2px;
	top: 9px;
}
.active #nav-icon2 span:nth-child(6) {
	left: -moz-calc(50% - 2px);
	left: -webkit-calc(50% - 2px);
	left: calc(50% - 2px);
	top: 9px;
}

.menu-button2 ul li {
	text-align: left;
	padding: 3px 0;
	font-size: 18px;
	font-family: "Poppins", arial, verdana, tahoma, sans-serif;
	font-weight: 400;
}
.menu-button2 ul li a {
	width: 100%;
	display: block;
	padding: 7px 0px;
	-webkit-transition: 0.3s linear;
	transition: 0.3s linear;
	min-width: 360px;
}
.menu-button2 ul li a:hover {
	color: #1ab0e0;
}
.menu-button2 ul {
	padding: 0px 35px 0px;
	margin-top: 0px;
}

.menu-button2 .mTextLeft {
	margin-top: 6px;
}
.menu-button2 ul li {
    font-size: 14px;
}

/* menu button animation */
.menu-button:hover,
.active #menuToggle {
	background: #f4f4f4;
}

.mText {
    font-size: 12px;
    margin-top: 8px;
    display: block;
    color: #343434;
    -moz-transition: 0.5s;
    -webkit-transition: 0.5s;
    transition: 0.5s;
    text-transform: uppercase;
    padding: 0px 10px;
}
.mTextLeft, .mTextRight {
    -moz-transition: all 0.6 linear;
    -webkit-transition: all 0.6 linear;
    transition: all 0.6 linear;
}

.sub-menu1{
    text-align: left;
    padding-left: 40px;
}

.sub-menu1 a{
  color:#343434 !important;
}

.sub-menu1 a:hover{
    color:#B84B16 !important;
}

.menu-buttons:hover {
    background-color: #f4f4f4;
}
.cursor{
    cursor: pointer;
}

.mTextRight {
    position: absolute;
    left: 88px;
    margin-top: 0;
    width: 250px !important;
    height: 60%;
    text-align: left;
    top: 34%;
    opacity: 0;
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    transform-origin: 50% 51%;
    -moz-backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.mi-down {
    -moz-transition: 0.7s cubic-bezier(0.19, 1, 0.22, 1);
    -webkit-transition: 0.7s cubic-bezier(0.19, 1, 0.22, 1);
    transition: 0.7s cubic-bezier(0.19, 1, 0.22, 1);
}

.m0, .mi-down {
    -moz-transition: 0.7s cubic-bezier(0.19, 1, 0.22, 1);
    -webkit-transition: 0.7s cubic-bezier(0.19, 1, 0.22, 1);
    transition: 0.7s cubic-bezier(0.19, 1, 0.22, 1);
}

.active .mTextRight {
    opacity: 1;

    transform: translateY(5px);
}

.active .mTextLeft {
    opacity: 0;
    left: 78px;
}

.menu-overlay.active {
    opacity: 1;
    -moz-visibility: visible;
    -webkit-visibility: visible;
    visibility: visible;
}

.menu-overlay {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.2);
    z-index: 98;
    opacity: 0;
    -moz-visibility: hidden;
    -webkit-visibility: hidden;
    visibility: hidden;
    -moz-transition: all 0.6s linear;
    -webkit-transition: all 0.6s linear;
    transition: all 0.6s linear;
}

.menu-button2 ul {
    padding: 0px 35px 0px;
    margin-top: 0px;
}

.menu-button2 ul li {
    text-align: left;
    padding: 3px 0;
    font-size: 18px;
    font-weight: 400;
}

.accordion-body ul li a {
    padding: 10px 10px !important;
    font-size: 0.85em !important;
}

.padd-mar{
    margin: 0px 30px !important;
    padding: 0px !important;
}

.nav-second {
    font-size: 11px;
    line-height: 14px;
    letter-spacing: 0.5px;
    margin-bottom: 15px;
    text-align: left;
    padding-left: 40px;
    margin-top: 20px;
}
.mpText, .nav-second {
    color: #757575;
}

/* ============================================================
   WCAG 2.4.7 (Focus Visible) + 2.1.1 (Keyboard) — sidebar focus.

   #sidebar has `overflow-x: hidden` and #menuToggle fills the full
   sidebar width, so any focus indicator painted OUTSIDE the element
   (the browser default, or outline with positive offset) gets
   clipped to invisibility. The rule below paints the indicator
   INSIDE the element via a negative `outline-offset`, so it cannot
   be clipped by any ancestor's overflow.

   :focus AND :focus-visible are both targeted, so the ring also
   shows on browsers / automated WCAG scanners that don't yet
   recognise :focus-visible. !important is used to defeat the
   Bootstrap reset (`button:focus:not(:focus-visible) { outline: 0 }`)
   and any other conflicting rule in the cascade.
   ============================================================ */
#menuToggle:focus,
#menuToggle:focus-visible,
#sidebar a:focus,
#sidebar a:focus-visible,
#sidebar button:focus,
#sidebar button:focus-visible,
#sidebar [role="button"]:focus,
#sidebar [role="button"]:focus-visible,
#sidebar [tabindex="0"]:focus,
#sidebar [tabindex="0"]:focus-visible {
    outline: 3px solid #B84B16 !important;
    outline-offset: -3px !important;
    box-shadow: inset 0 0 0 3px #B84B16 !important;
    border-radius: 2px !important;
}

/* ------------------------------------------------------------
   The sidebar "icon + label" buttons (Invest Now, Partner Portal,
   Empanel Now, …) place the focusable <a> INSIDE a block
   `.menu-button` div. Because <a> defaults to `display: inline`,
   the focus ring above gets painted around the inline boxes only
   (a tight, hard-to-see outline). Forcing the <a> itself to be a
   block makes the ring wrap the entire visual button — matching
   the behaviour of the working "Menu" toggle.

   Visual layout is preserved: the <a>'s direct children
   (`.m0.mi-down` div and `.mText` spans) are already block-level,
   so making the <a> block does not change how they flow.
   ------------------------------------------------------------ */
#sidebar .menu-buttons > .menu-inside > a {
    display: block;
    color: inherit;
    text-decoration: none;
}

#mobileMenu:focus,
#mobileMenu:focus-visible {
    outline: 3px solid #B84B16 !important;
    outline-offset: 2px !important;
    border-radius: 2px !important;
}

@media (forced-colors: active) {
    #menuToggle:focus,
    #menuToggle:focus-visible,
    #sidebar a:focus,
    #sidebar a:focus-visible,
    #sidebar button:focus,
    #sidebar button:focus-visible,
    #sidebar [role="button"]:focus,
    #sidebar [role="button"]:focus-visible,
    #sidebar [tabindex="0"]:focus,
    #sidebar [tabindex="0"]:focus-visible {
        outline: 3px solid CanvasText !important;
        outline-offset: -3px !important;
        box-shadow: none !important;
    }
    #mobileMenu:focus,
    #mobileMenu:focus-visible {
        outline: 3px solid CanvasText !important;
        outline-offset: 2px !important;
    }
}

/* ============================================================
   WCAG 2.4.1 (Bypass Blocks) — skip link.

   Hidden off-screen by default, revealed at the top-left when
   keyboard-focused. Mirrors the pattern already used on a few
   pages, but centralised here so every page that links sidebar.css
   gets a consistent, accessible skip-link without needing a
   per-page CSS block.
   ============================================================ */
.skip-link {
    position: absolute;
    top: -9999px;
    left: 0;
    z-index: 10000;
    padding: 8px 16px;
    background: #B84B16;
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    border-radius: 0 0 4px 0;
}

.skip-link:focus,
.skip-link:focus-visible {
    top: 0;
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* Visually-hidden helper used by aria-live regions etc. */
.live-region {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}