/* This code sets some initial styling rules for all elements on a web page using the universal selector '*' */
        * {
            margin: 0;
            padding: 0;
            font-family: "poppins", sans-serif;
            box-sizing: border-box;
        }
          
           /* This CSS code snippet defines CSS custom properties (also known as CSS variables) within the */
        :root {
            /*--body-color: #efefef; */
            /*--nav-color: #1876f2;*/ 
           /* --nav-color: #00cc00; */
            --body-color: #fffcf7;
            --nav-color:  #fffcf7;
            --bg-color: #fff;
        }

        .dark-theme {
            --body-color: #0a0a0a;
            --nav-color: #000;
            --bg-color: #000;
          }

        body {
            background: var(--body-color); /* refer to --body-color from root block */
            transition: background 0.3s; /* This line applies a transition effect */
        }

        #nav-top {
            display: flex;
            align-items: center;
            background: var(--nav-color);
            padding: 5px 3%;
            position: sticky; /* The position: sticky; CSS property is used to make an element behave as if it's relatively positioned until it reaches a certain scroll position on the page.*/
            top: 0;
            z-index: 100; /*The higher the z-index value, the closer the element is to the top of the stacking order */
        }


        #nav-bottom {
            display: flex;
            align-items: center;
            background: var(--nav-color);
            padding: 5px 5%;
            position: fixed;
            bottom: 0;
            width: 100%;
            margin-bottom: 0;
            z-index: 100; 
            }


        .nav-bottom-items{
            display:flex;
            align-items: center; /* The align-items property is used in CSS to control the alignment of flex items along the cross axis of a flex container */
            justify-content: space-between;
            flex-basis: 100%; /* or use flex: 1; */
            padding-top: 5px;
        }


        .nav-left{
            display: flex;
            align-items: center; /* The align-items property is used in CSS to control the alignment of flex items along the cross axis of a flex container */
            flex: 1;
        }
        .nav-right {
            display: flex;
            align-items: center; /* The align-items property is used in CSS to control the alignment of flex items along the cross axis of a flex container */
            /*justify-content: flex-end; */
           /* justify-content: center; */
            justify-content: space-evenly;
            flex: 1;
            margin-right: 10px;
        }

        .logo{
            /*
            width: 40px;
            height: 40px;
            */
            margin-top:3px;
            width:90px;
            margin-right: 10px;
          }

        .nav-left ul li {
            list-style: none;
            display: inline-block; /* CSS property is used to make an element behave like an inline element but retain the block-level properties like width, height, margins, and padding */
        }

        .nav-left ul li img {
            width: 28px; /* force the width of image is 28 px*/
            margin: 0px 15px;
        }

       /* .nav-right div {
           display: inline-flex;
           align-items: center;
          justify-content: flex-end;
        }
        
        .nav-right div img {
            width: 25px;  force the width of image is 28 px
            margin: 0px 3px;
        }
        */
       
       .nav-right span {
           display: inline-flex;
           align-items: center;
          justify-content: space-evenly;
        }

        .nav-right span img {
            width: 25px;  /*force the width of image is 28 px*/
            /*margin: 0px 5px;*/
        }

        .hide-icons{
          display: inline; 
        }

        .space-icons{
          display: inline;  
        }
       
         .nav_icon_link_text{
           margin-top:-3px; 
           color: #333;
          /* font-family: sans-serif;*/
          /* font-weight: 300;*/
           font-size: 10px;
           cursor: pointer;
         }

        .nav-user-icon img {
           /* width: 30px;
            border-radius: 50%; */ /* making rounded image*/
            cursor: pointer;
        }
        .nav-user-icon {
            /*margin-left: 10px;*/
        }

        .search-box {
            background: #efefef; 
            /*width: 350px;*/
            width: 200px;
            border-radius: 20px;
            display: flex;
            align-items: center; /* Flex items are centered along the cross-axis. */
            padding: 0 15px;
        }
        .search-box img {
            width: 18px;
        }
        .search-box input {
            width: 100%;
            background: transparent; /*This makes the background of the input element transparent */
            padding: 10px;
            outline: none;
            border: 0;
        }

        .online {
            position: relative;
          }
        .online::after { /*pseudo-element to create a small indicator circle that signifies an online status*/
            content: " ";
            width: 8px;
            height: 8px;
            border: 2px solid #fff;
            border-radius: 50%;
            /* background: #41db51; */
            background: #00cc00;
            position: absolute;
            top: 0;
            right: 2px;
        }

        .user-profile {
            display: flex;
            align-items: center;
          }
        .user-profile img {
            /*width: 35px;
            border-radius: 50%;*/
           margin-right: 10px;
          }
        .user-profile p {
            margin-bottom: -5px;
            font-weight: 500;
            color: #626262;
            font-size: 13px;
          }
        .user-profile small {
            font-size: 12px;
          }
        
        .settings-menu {
            position: absolute; /*property is used to position an element in relation to its nearest positioned ancestor or to the containing block (usually the entire viewport or an element with a position other than static). */
            width: 60%;
            max-width: 250px;
            background: var(--bg-color);
            box-shadow: 0, 0, 10px rgba(0, 0, 0, 0.4);
            border-radius: 4px;
            overflow: hidden;
            top: -30%;
           /* margin: 70px 0px; */
            margin: 60px 0px;
            max-height: 0;
            transition: max-height 0.3s;
            right:12px;
          }

          .settings-menu2 {
            position: absolute; /*property is used to position an element in relation to its nearest positioned ancestor or to the containing block (usually the entire viewport or an element with a position other than static). */
            width: 60%;
            max-width: 250px;
            background: var(--bg-color);
            box-shadow: 0, 0, 10px rgba(0, 0, 0, 0.4);
            border-radius: 4px;
            overflow: auto;
            top: -30%;
           /* margin: 70px 0px; */
            margin: 60px 0px;
            max-height: 0;
            transition: max-height 0.3s;
            right:12px;
          } 

        .settings-menu-height {
            max-height: 450px;
          }

          .settings-menu-height2{
            max-height: 450px;
          }
  
        .user-profile a {
            font-size: 13px;
            color: #1876f2;
            text-decoration: none;
          }
        .settings-menu-inner {
            padding: 10px;
          }
        .settings-menu hr {
            border: 0;
            height: 1px;
            background: #9a9a9a;
            margin: 15px 0;
          }

           .settings-menu2 hr {
            border: 0;
            height: 1px;
            background: #9a9a9a;
            margin: 15px 0;
          }

        .setting-links {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin: 15px 0;
          }
        .setting-links .settings-icon {
            width: 38px;
            margin-right: 10px;
            border-radius: 50%;
          }
        .setting-links a {
            display: flex;
            flex: 1;
            align-items: center;
            justify-content: space-between;
            /* justify-content: flex-start; */
            text-decoration: none;
            color: #626262;
            font-size: 12px;
          }

          .setting-links a img {
            width: 34px;
          }

        #dark-btn {
            position: absolute; 
            top: 20px;
            right: 20px;
            background: #ccc;
            width: 45px;
            border-radius: 15px;
            padding: 2px 3px;
            cursor: pointer;
            display: flex;
            transition: padding-left 0.5s, background 0.5s;
          }
        #dark-btn span {
            width: 18px;
            height: 18px;
            background: #fff;
            border-radius: 50%;
            display: inline-block; /* property is used to make an element behave as an inline-level block container. This means the element sits inline with surrounding content, but it also allows you to set a width, height, margins, and padding – properties that are typically associated with block-level elements*/
          }
        #dark-btn.dark-btn-on {
            padding-left: 23px;
            background: #0a0a0a;
            border: 1px solid #ccc;
          }


.notification_badge{ /* iam not using this doesnt work well */
    background-color: red;
    color:#fff;
    margin-left: -3px;
    margin-bottom: 10px;
    border-radius: 5px;
    width: 20px;
    height: 10px;
}

.brand-1{
  /*background-color: #ff000000;*/
  background-color: #ccc;
}

.show-nav-bottom{
 display: none;
}


/*@media (max-width:35em) 
 @media only screen and (max-width: 470px){*/
@media only screen and (max-width: 600px){

.hide-form{
  display:none; /* not used */
 }

.hide-top-nav-content{
  display:none; /* not used */
 }

/*
 #nav-top{
   display:none;
}
*/
 .show-nav-bottom{
  display:inline;
}

.hide-icons{
    display:none;        
 }

 .hide-power-icons{
    display:none;        
 }

 .logo{
    width:80px;
    margin-right: 8px;
  }

  
  #side-panel-right, #side-panel-left,  #side_bar_home_page{
     display: none;
  } 
  

}