:root {
  --bodycolor: #FFFFFF;
  --textcolor: #000000;
  --textcolorlight: #4A4A4A;
--themecolor: #ff4f00;
  --themecolordark: #8b2e02;
  --themelight: rgba(255,79,0, 0.33);
  --tabscolor: #696969;
  --footercolor: #F3F3F3;
  --bordercolor: #D1D1D1;
  --borderdark: #A9A9A9;
  --grayborder: #AEAEAE;
  --inputborder: #D1D1D1;
  --placeholder: #C8C8C8;
  --borderlight: #D1D1D1;
  --blackcolor: #000000;
  --darkcolor: #1B1A1F;
  --dualdark: #00000014;
  --blacklight: #141414;
  --darkborder: #A9A9A9;
  --redcolor: #DC4453;
  --orangecolor: #FD7E14;
  --whitecolor: #FFFFFF;
  --white94: rgba(255, 255, 255, 0.94);
  --disabledcolor: #B7B7B7;
  --activebgColor: #F3F3F3;
  --lightgraybg: #F7F7F7;
  --lightgreen: #EAFBEC;
  --tableHeadingTr: #F3F3F3;
  --darkGreyBg: #CBCBCB;
  --categorycolor: #2B2A2F;
  --bodylightcolor: #FFFFFF;
  --themeextralights:rgba(255,79,0 , 13% );
}

.dark-mode {
  --bodycolor: #1B1A1F;
  --textcolor: #BBBABC;
  --textcolorlight: #C7C7C7;
  --themecolor: #ff4f00;
  --themecolordark: #8b2e02;
  --themelight: rgba(255,79,0, 0.33);
  --tabscolor: #696969;
  --footercolor: #000000;
  --bordercolor: #525157;
  --borderdark: #D9D9D9;
  --grayborder: #AEAEAE;
  --inputborder: #525157;
  --placeholder: #C8C8C8;
  --borderlight: #525157;
  --blackcolor: #FFFFFF;
  --darkcolor: #FFFFFF;
  --dualdark: #252229;
  --blacklight: #141414;
  --darkborder: #C7C7C7;
  --redcolor: #DC4453;
  --orangecolor: #FD7E14;
  --whitecolor: #000000;
  --white94: rgba(0, 0, 0, 0.94);
  --disabledcolor: #B7B7B7;
  --activebgColor: #000000;
  --lightgraybg: #000000;
  --lightgreen: #EAFBEC;
  --tableHeadingTr: #141414;
  --darkGreyBg: #CBCBCB;
  --categorycolor: #2B2A2F;
  --bodylightcolor: #27262A;
  --themeextralights:rgba(255,79,0 , 13% );
}



nav{
  box-shadow: 0 2px 7px 0 var(--dualdark);
  border-bottom: 1px solid var(--bordercolor);
}


.navbar-bg {
  background-color: var(--whitecolor);
  color: var(--textcolor);
}

/* Hide the div by default */
.tab-content {
  display: none;
}

.navbar-hr {
 
}

.tab-link {
  font-weight: 700 !important;
  color: var(--blackcolor);
}

.tab-link:hover {
  background-color: var(--themeextralights);

}

nav .search .navbar-search {
  fill: var(--blackcolor);
}

nav navbar-toggler {
  fill: var(--blackcolor);
}

nav .login{
  font-weight: 700 !important;
  color: var(--blackcolor);
}
nav .get-started{
  font-weight: 700 !important;
  color: var(--blackcolor);
  background-color: var(--themecolor);
  letter-spacing: 1px;
}

nav .get-started {
  /* Define the initial state */
  transition: color 0.3s ease;
}

nav .get-started:hover {
  /* Define the hover state */
  background-color: var(--themecolordark);
  color: var(--blackcolor);
  animation: shake 0.5s ease; /* Apply the animation */
}

nav .links-sm-bg{
  background-color: var(--whitecolor);
}

@keyframes shake {
  0% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  50% { transform: translateX(5px); }
  75% { transform: translateX(-5px); }
  100% { transform: translateX(0); }
}

.dashboard-content-a{
  background-color: var(--whitecolor);
  z-index: 40
}



            .avatar-container {
  position: relative;
  display: inline-block;
}

.avatar {
  cursor: pointer;
  padding: 10px;
  border-radius: 50%;
  text-align: center;
}

.dropdown-menu {
  display: none;
  position: absolute;
  width: 250px !important;
  background-color: var(--bodycolor);
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2) !important;
  padding: 10px 12px;
  z-index: 1;
  margin-top: 10px;
  right: 1px;
  border-radius: 10px;
   word-wrap: break-word;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dropdown-menu a {
  color: var(--darkcolor) !important;
  text-decoration: none;
  display: block;
  padding: 6px 10px;
  border-radius: 10px;
  background-color: var(--themeextralights);
}

.dropdown-menu h2{
  color: var(--themecolor) !important;
}

.dropdown-menu a:hover {
  background-color: var(--themecolor);
}

.avatar-container:hover .dropdown-menu {
  display: block;
}