/* Stylesfor side navigations */
.sidebarstyle1{
/* Add the blur effect */
/*filter: blur(2px);*/
/*-webkit-filter: blur(2px);*/
/*background-color: rgb(0,0,0); Fallback color 
box-shadow: 0 0 2px 2px rgba(0,0,0,0.1);
*/
background-color: var(--primary-color-transparent-0); /* Black w/opacity/see-through */
color:var(--text-color);
width:210px;

font-weight:bold;
margin-top:42px;
overflow-x: hidden; /* Hide horizontal scrollbar */
z-index: 99999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999 !important;
}

@media (max-width:601px){
.sidebarstyle1{
/* Add the blur effect */
/*filter: blur(2px);*/
/*-webkit-filter: blur(2px);*/
/*background-color: rgb(0,0,0); Fallback color 
box-shadow: 0 0 2px 2px rgba(0,0,0,0.1);
*/
background-color: var(--primary-color-transparent-white); /* Black w/opacity/see-through */
color:var(--text-color); 
z-index: 99999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999 !important;
}
}

.sidebarstyle2{
background-color:#ebf2f9;
z-index:3;
color:rgb(29, 31, 33);
width:35px;
font-weight:bold;
margin-top:43px;
}
#modules101{ 
padding-top: 10px; 
}

.accordion .fontx{
background-color:none;
color:var(--primary-color);
font-weight: 600;
}
.accordion span{
font-weight: 400;

}

.accordion {
background-color:transparent;
cursor: pointer;
padding:0.44em;
width: 260px;
text-align: left;
border: none; 
outline: none;
transition: 0.4s;
font-family: 'Segoe UI light', sans-serif;
font-weight:600;
text-transform: capitalize;
color:gray;
margin-top: -30px;
}
/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .accordion:hover {
background-color:rgba(255,255,255,0.1);
font-weight:600;
color:var(--primary-color);
border-left: 4px solid var(--primary-color);
}
.active, .accordion { 
border-left: 4px solid var(--primary-color);
}
/* Style the accordion panel. Note: hidden by default */

.panel p {
cursor:pointer; 
margin:2px;
font-size:1em;
color: var(--primary-color);
}

.panel p:hover, .a:hover {
color:var(--primary-color);
cursor:pointer;
font-weight:600;
}
.panel > p > a > .fontx{
margin-right:8px;
}
.panel p:active, .a:active {
color:var(--primary-color);
cursor:pointer;
font-weight:600;
}
.accordion:after {
/* content: '\02795';  Unicode character for "plus" sign (+) */
content: '\02795';
font-size: 13px;
color: var(--primary-color);
float: left;
margin-left: 5px; 
transition: opacity 0.2s;
opacity: 1;
}
.active:after {
content: ''; /* Remove the minus sign when active */
font-size: 13px;
color:var(--primary-color);
float:left;
margin-left: 5px;
opacity: 1;
}

/* Hide the unicode icon when sidebar is closed */
.sidebar-closed .accordion:after,
.sidebar-closed .active:after {
opacity: 0;
pointer-events: none;
}

/* FORM ANIMATION */

.highlight {
animation: highlightAnimation 0.5s ease-in-out 0s 2;
}

@keyframes highlightAnimation {
0% { border-color: red; }
50% { border-color: var(--primary-color); }
100% { border-color: red; }
}

@-webkit-keyframes payment-loader-spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}

.accordion {
background-color:transparent;
cursor: pointer;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.9s;
font-weight:600;
}

.accordion:after {
content: '\002B';
color:gray;
font-weight: bold;
float: right;
margin-left: 5px;
}

.active:after {
content: '';
/* Remove the minus sign when active */
}

.sidenav-toggle-btn-large.sidebar-closed {
background-color: var(--primary-color) !important;
color: var(--background-color) !important;
}

/* Show only the .fontx icon in .side-list-title when sidebar is minimized */
.sidebar-closed .side-list-title {
color: var(--primary-color);
position: relative;
display: flex;
align-items: center;
min-height: 32px;
padding-left: 0.5em;
} 
.sidebar-closed .side-list-title .fontx {
display: inline-block !important;
font-size: 1.5em;
min-width: 24px;
text-align: center;
color: var(--primary-color) !important;
visibility: visible !important;
opacity: 1 !important;
}
.sidebarstyle2 .side-list-title .side-list-label,
.sidebar-closed .side-list-title .side-list-label {
display: none !important;
}
/* Remove any hiding of .fontx via :not(.fontx) selector */
.sidebarstyle2 .side-list-title span.fontx,
.sidebar-closed .side-list-title span.fontx {
display: inline-block !important;
}
.sidebarstyle2 .side-list-title span:not(.fontx):not(.side-list-label),
.sidebar-closed .side-list-title span:not(.fontx):not(.side-list-label) {
display: none !important;
}
.jslist {
list-style: none;
padding-left: 0.4em;
background: transparent;
/* Remove float: left; */
}
.sidebarstyle2 .jslist,
.sidebar-closed .jslist {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
}
.sidebarstyle2 .jslist li,
.sidebar-closed .jslist li {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
background: transparent !important;
}
.sidebarstyle2 .side-list-title,
.sidebar-closed .side-list-title {
display: flex !important;
align-items: center;
min-height: 32px;
padding-left: 0 !important; /* Remove left padding so icons are flush left */
background: transparent !important;
visibility: visible !important;
opacity: 1 !important;
box-sizing: border-box;
}
.sidebarstyle2 .side-list-title .fontx,
.sidebar-closed .side-list-title .fontx {
display: inline-block !important;
font-size: 1.5em;
min-width: 24px;
text-align: center;
color: var(--primary-color) !important;
visibility: visible !important;
opacity: 1 !important;
}
.sidebarstyle2 .side-list-title .side-list-label,
.sidebar-closed .side-list-title .side-list-label {
display: none !important;
}
.jslist li:hover > .sidenav-inner-text {
color: var(--primary-color) !important;
background: none !important;
font-weight: 400;
cursor: pointer;
background-color: var(--primary-color-transparent1) !important;
}
.jslist li:hover > .side-list-title {
color: var(--primary-color) !important;
background: none !important;
font-weight: 500;
cursor: pointer;
}
.jslist > li > .side-list-title.active {
border-left: 4px solid var(--primary-color);
background: var(--primary-color-transparent0); /* subtle background for contrast */
color: var(--primary-color) !important;
border-radius: 4px 0 0 4px;
margin-left: 0 !important;
padding-left: 0.4em !important;
position: relative;
z-index: 10;
box-shadow: 1px 0 0 0 var(--primary-color); /* reinforce border */
}

/* Remove any conflicting background on parent or siblings */
.jslist > li > .side-list-title {
background: transparent !important;
}

/* Remove any accidental overlap from nested lists */
.jslist ul {
z-index: 1;
position: relative;
padding-left: 0 !important;
margin-left: 0 !important;
background-color: var(--primary-color-transparent);
}
.jslist ul > li {
padding-left: 0 !important;
margin-left: 0 !important;
}
.jslist ul > li > ul >li{
padding-left: 12px !important;
margin-left: 0 !important;
}
.sidenav-inner-most-list{
background-color: transparent !important;
}


.jsl-closed > ul {
display: block;
opacity: 0;
max-height: 0;
transform: translateY(-10px) scaleY(0.98);
pointer-events: none;
transition:
opacity 0.4s cubic-bezier(.4,0,.2,1),
max-height 0.6s cubic-bezier(.4,0,.2,1),
transform 0.7s cubic-bezier(.4,0,.2,1);
}
.jsl-open > ul {
display: block;
opacity: 1;
max-height: 1000px;
transform: translateY(0) scaleY(1);
pointer-events: auto;
transition:
opacity 0.4s cubic-bezier(.4,0,.2,1),
max-height 0.8s cubic-bezier(.4,0,.2,1),
transform 0.7s cubic-bezier(.4,0,.2,1);
}
.jslist {
list-style: none;
padding-left: 0.4em;
/* Remove float: left; */
}
.jslist li {
transition: background 0.3s, box-shadow 0.3s;
border-radius: 6px;
/* Remove float: left; */
/* Remove clear: both; */
display: block;
}
.jslist li:hover {
background: transparent;
box-shadow: 0 2px 8px 0 var(--primary-color-traparent1); 
}
.side-list-title {
font-weight:500;
cursor: pointer;
transition: color 0.3s;
font-size:1.5em;
font-family:segoe ui light;
}
.side-list-title:hover {
color: var(--primary-color);
background-color: var(--primary-color-transparent1);
}
.jsl-open > .side-list-title,
.jsl-open > .sidenav-inner-text {
color: var(--primary-color); 
}
.sidenav-inner-text {
font-weight: 500;
cursor: pointer; 
display: block;
font-family:segoe ui light;
font-size: 1.2em;
}
.sidenav-inner-text.active {
color: var(--primary-color) !important;  
font-weight: 500;
background-color: var(--primary-color-transparent1);
}
/* Show only the .fontx icon in .side-list-title when sidebar is minimized */
.sidebarstyle2 .side-list-title, 
.sidebar-closed .side-list-title {
color: var(--primary-color);
position: relative;
}
.sidebarstyle2 .side-list-title .fontx, 
.sidebar-closed .side-list-title .fontx {
display: inline-block !important;
font-size: 1.5em;
vertical-align: middle;
margin-right: 0;
}
.sidebarstyle2 .side-list-title, 
.sidebar-closed .side-list-title {
/* Hide the text, but not the icon */
}
.sidebarstyle2 .side-list-title, 
.sidebar-closed .side-list-title {
/* Hide all text nodes except .fontx */
}
.sidebarstyle2 .side-list-title, 
.sidebar-closed .side-list-title {
/* Use a span to wrap the text after the icon for easier targeting */
}
.sidebarstyle2 .side-list-title span:not(.fontx),
.sidebar-closed .side-list-title span:not(.fontx) {
display: none !important;
}