/********** Template CSS **********/
:root {
    --light: #efefef;
    --dark: #181818;
    --dark2: #1f1f1f;
    --dark_gray: #b4b4b4;
    --gray: #eaeaea;
    --light_green: #49aa42;
    --color_light_brown:#a4fc7b;
    --color_dark_brown:#2b6b0d;
     
    --black:#000;
    --black_2:#1c1c1c;
    --white:#fff;
    --white_2:#d3e0d2;
    
}
/*color*/

.color_light_brown{ color: var(--color_light_brown); }
.color_dark_brown { color: var(--color_dark_brown);}
.color_white {  color:var(--white) ;}
.color_black {  color:var(--black);}
.color_dark_gray { color:var(--dark_gray);}
.color_light_gray {color:var(--light_green);}
.card{
  background-color: transparent !important;
  border: 0px !important;
}
.btn_width {
  width: 34px;
  margin-right: 5px;
  /*display: block;*/
}
.ref-link{
  background-image:
            linear-gradient(to bottom right,
              var(--color_light_brown),
              var(--color_dark_brown)) !important;
            border: none;
  padding: 10px 12px;
}
.ref-link:hover{
  background-color: #C68D37;
  padding: 10px 12px;
}
.background_color_btn{
	background-image:
            linear-gradient(to bottom right,
              var(--color_light_brown),
              var(--color_dark_brown)) !important;
            border-radius: 50px ;
            border:none;
            padding: 15px 40px;
            transition: .5s;
            color: var(--white);

}
.background_color_btn:hover{
  background-image:
            linear-gradient(to bottom left,
              var(--color_light_brown),
              var(--color_dark_brown)) !important;
            color: var(--white);
}

.container.navigatio_top {
    max-width: 100% !important;
}
.background_color{
/*background-color: red;*/
	background-image:
            linear-gradient(to bottom right,
              var(--color_light_brown),
              var(--color_dark_brown)) !important;
 
}
.active {
    background-image: linear-gradient(to right,var(--color_light_brown),var(--color_dark_brown));
    font-weight: bold !important;
    border-radius: 50px;
   
}
 

.btn-profile{
      background-color: transparent;
    border-radius: 100px;
    padding: 0px;
    border: 4px solid rgb(77 79 92/20%) ;
    margin-left: -10px;
}
.btn-profile:hover{
      background-color: transparent;
    border: 4px solid rgb(77 79 92/50%) ;
}

.form-color{
        border-radius: 6px ;
    width: 28px;
}


/*sidbar navigation*/

 
.logo{
	margin:  0px !important;
	padding-left: 50px !important;
	padding-right: 50px !important;
}

a#trade-acc:focus{

	background-image:
            linear-gradient(to right,
              var(--color_light_brown),
              var(--color_dark_brown)) ;
            border-radius:50px ;
            margin-right: 10px; 
             
}
a#trade-acc:active{

  background-image:
            linear-gradient(to right,
              var(--color_light_brown),
              var(--color_dark_brown)) ;
            border-radius:  50px  ;
            margin-right: 10px; 
             
}
a#trade-acc:visited{

  background-image:
            linear-gradient(to right,
              var(--color_light_brown),
              var(--color_dark_brown)) ;
            border-radius: 50px ;
            margin-right: 10px; 
            /*color: var(--black) !important;*/
}
.form-select:focus {
    border-color: gray;
    outline: 0;
    box-shadow: none;
}

i#togglePassword {
    top: -43px;
    position: relative;
    right: 10px;
    color: var(--dark)
}
i#togglePassword2 {
    top: -43px;
    position: relative;
    right: 10px;
    color: var(--dark)
}

/*navigatio top*/
.navigatio_top{
	padding-left: 300px;
transition: .5s ease;
	}
.header_iner{
	padding: 0px;
}
.profile_info{
	background-color: #C68D37;
	border-radius: 10px;
	padding: 15px;
	margin-left:  -10px; 
}
.profile_info img{
	border:none;
}
.sidebar #sidebar_menu li a{
  font-size: 20px;

}
.sidebar #sidebar_menu li a:hover{
  background-image: linear-gradient(to right,var(--color_light_brown),var(--color_dark_brown));
     
    font-weight: bold !important;
    border-radius: 50px;
}
svg{
  width: 90;
}
.sidebar #sidebar_menu li ul li a{
  font-size: 17px ;
  padding: 8px 20px !important;
}
h6{
  font-size: 22px;
  margin: 0px;
  margin-top: 12px;
}
#preloader {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 999999;
  background: black;
}

.loader {
  position: relative;
  height: 100%;
  width: 100%;
 text-align: center;
}

.loader img {
  width: 10%;
  position: relative;
  top: 40%;
  animation: bounce 1s ease-in-out infinite;
}


@keyframes bounce {
  0%, 75%, 100% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
  }
  25% {
    -webkit-transform: translateY(-20px);
    -ms-transform: translateY(-20px);
    -o-transform: translateY(-20px);
    transform: translateY(-20px);
  }
}
.login-about-div{
  text-align: center;
  padding-top: 30px;
}
@media only screen and (max-width: 600px) {
.login-about{
  width: 65%;

}

.loader img {
  width: 30%;
}
.header_iner {
    padding: 7px;
}
  .menutoggle{
    display: none !important;
  }
  .all_button_grp_nav{
	display: none !important;
}
.navigatio_top{
	padding-left:10px;
	}
	.sidebar_icon{
	float: 
}
.sidebar #sidebar_menu li a{
  font-size: 20px;
}
svg{
  width: 90%;
}
.sidebar #sidebar_menu li ul li a{
  font-size: 17px ;
  font-weight: 300 !important;
}
h6{
  font-size: 19px;
}


.custom-width{
	width: 30%;
}
.custom-width2{
	width: 70%;
}

}
@media only screen and (max-device-width : 820px) {

.container.navigatio_top{
	padding:2px 20px;
}

}
@media only screen and (max-width: 768px) {
  .all_button_grp_nav{
	display: none !important;
}
.sidebar_icon{
	position: relative;
	/*left: -80px !important	;*/
	top: 15px;
}


}
@media only screen and (max-width: 992px) {
  .all_button_grp_nav{
	display: none !important;
}
.sidebar_icon{
	position: relative;
	left: 10px;
	top: 15px;
}
/*table css*/
.dataTables_wrapper .dataTables_filter input {
     margin-left: 2px; 
}
}


.logo-login{
  width: 35%;
}
.login-bg1{
background-color: black;
}
.login-bg{
background-color: black;
height:  100vh;
}
.login-bg2{
height:  100vh;
}
/*main content body*/


.border-forth-clm-chart{
	border: 1px solid lightgray;
	border-radius: 15px;
	padding: 15px;
	/*padding-bottom: 2px !important;*/
	margin-bottom: 15px;
}
.first-clm-dashboard {
    text-align: right;
}
 
.border_setting {
  border: 1px solid var(--color_dark_brown);
  background-color: var(--color_light_brown);
}


/*switch btn*/
.form-check-input:focus{
	border-color:black !important;
}




.custom-theme.body_main_part {
  background-color: darkslategray !important;
  border-radius: 3px;
  color: gainsboro;
  text-decoration: underline;
}

.custom-theme.bg-dark {
  background-color: blanchedalmond !important;
  box-shadow: 10px 5px 5px rgba(246, 255, 219, 0.5);
  color: dimgray;
  text-decoration: overline;
}
/*table css*/

.dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover{
	background-image:
            linear-gradient(to bottom right,
              var(--color_light_brown),
              var(--color_dark_brown)) !important;

}
.dataTables_paginate a:hover{
	background-image:
            linear-gradient(to bottom right,
              var(--color_light_brown),
              var(--color_dark_brown)) !important;
}
input[type="search"] {
  background-color: lightgray;
  border: none;
  border-radius: 5px;
  /* Reserve space for the bottom border */
  border-bottom: 2px solid transparent;
  transition: background-color 0.3s ease, border-bottom-color 0.3s ease;
}

input[type="search"]:focus {
  background-color: var(--white);
  /* Change the border color on focus */
  border-bottom-color: var(--color_light_brown);
  outline: none;
}
 

/*teb css*/
.demo-live-tab{
  background-image:
             linear-gradient(to bottom right,
             var(--color_light_brown),
             var(--color_dark_brown)) !important;
             color: var(--light);
             border-radius: 90px;
             border:none ;
	           padding: 15px 30px;
 
}

.demo-live-tab:hover{
	color: var(--light);
 background-image:
 linear-gradient(to bottom right,
             var(--color_dark_brown),
             var(--color_light_brown)) !important;

}

.demo-live-tab:visted{
	color: var(--light);

}
.demo-live-tab:focus{
	color: var(--light);

}
 
 
   
    #faq-clr:focus{
background-image:
            linear-gradient(to bottom right,
              var(--color_light_brown),
              var(--color_dark_brown)) !important;
                  color: #000;
                  border-radius: 0px !important;
   }


.accordion_custom .card .card-header h2 a.collapsed {
background-color: transparent !important;
    color: #C68D37;

}

.menutoggle {
  background-color: transparent;
  color: #99abb4 !important;
  cursor: pointer;
  font-size: 1em;
  height: 40px;
  line-height: 40px;
  width: 40px;
  text-align: right;
  margin-right: 5px; }
  
  .sidebar {
  overflow: auto;
  transform: translateX(0);
  -webkit-transform: translateX(0);
  -ms-transform: translateX(0);
  transform: translateX(0);
  -webkit-transition: -webkit-transform 1s ease;
  transition: 1s ease;
}

.sidebar.open {
width:0%;
  transform: translateX(0);
  -webkit-transform: translateX(0);
  -ms-transform: translateX(0);
  transform: translateX(0);
}
.nav_menu.menu{
  display: none ;

}
.logo.logo_img{
  transition: 1s !important;
 display: none !important;

}


.footer_part.main-footer{
   transition: 1s ease;
  padding-left: 0px;
}
.main_content.main-body{
  transition: 1s ease;
  padding-left: 0px;
}
.container.navigatio_top.header_main{
  transition: 1s ease !important;
  padding-left:  20px;
}
.sub_menu{
  display: none;
}

.mx-2.all_button_grp_nav.btn_menu{
  width: 200px;
}

tr.child {
    background-color: transparent !important;
}
table.dataTable tbody tr{
  background-color: transparent !important; 
}
/*.active>.page-link, .page-link.active{
  background-image:
            linear-gradient(to bottom right,
              var(--color_light_brown),
              var(--color_dark_brown)) !important;
            border:none !important; 
}*/

/*two-factor-authentication css*/
#two-factor-authentication {
  /*visibility: hidden;*/
  
  margin-right: 30px;
  -webkit-appearance: none;
  position: relative;
  width: 70px;
  height: 30px;
  background-color: #d1d1d1 !important;
  border-radius: 50px;
  outline: none;
}

#two-factor-authentication:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 30px;
  width: 35px;
  background-image: linear-gradient(to bottom ,
              var(--color_dark_brown),
              var(--color_light_brown)) ;
  border-radius: 50px;
}

#two-factor-authentication:checked {
  background-color: #ffffff;

}

#two-factor-authentication:checked:before {
  transform: translate(100%);
}
.radio-text{
  font-size: 16px;
}


/*mode css*/
#toggle-mode {
  /*visibility: hidden;*/
  
  margin-right: 30px;
  -webkit-appearance: none;
  position: relative;
  width: 70px;
  height: 30px;
  background-color: #d1d1d1 !important;
  border-radius: 50px;
  outline: none;
}

#toggle-mode:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 30px;
  width: 35px;
  background-image: linear-gradient(to bottom ,
              var(--color_dark_brown),
              var(--color_light_brown)) ;
  border-radius: 50px;
}

#toggle-mode:checked {
  background-color: #ffffff;

}

#toggle-mode:checked:before {
  transform: translate(100%);
}

/*signature*/
.kbw-signature {  height: 200px; }
.kbw-signature {
  display: inline-block;
  border: 1px solid #a0a0a0;
  -ms-touch-action: none !important;
}
a.btn.background_color.border-0.rounded-0.text-dark {
    font-size: 12px;
}
/*active*/

.modal-header .btn-close{
  background-color: gray;
}
canvas {
    max-width: 100%;
}
  .tree ul {

    padding-top: 20px;
    position: relative;



    transition: all 0.5s;

    -webkit-transition: all 0.5s;

    -moz-transition: all 0.5s;

  }



  .tree li {

    float: left;
    text-align: center;

    list-style-type: none;

    position: relative;

    padding: 20px 5px 0 5px;



    transition: all 0.5s;

    -webkit-transition: all 0.5s;

    -moz-transition: all 0.5s;

  }



  /*We will use ::before and ::after to draw the connectors*/



  .tree li::before,
  .tree li::after {

    content: '';

    position: absolute;
    top: 0;
    right: 50%;

    border-top: 1px solid #C68D37;

    width: 50%;
    height: 20px;

  }

  .tree li::after {

    right: auto;
    left: 50%;

    border-left: 1px solid #C68D37;

  }



  /*We need to remove left-right connectors from elements without 

any siblings*/

  .tree li:only-child::after,
  .tree li:only-child::before {

    display: none;

  }



  /*Remove space from the top of single children*/

  .tree li:only-child {
    padding-top: 0;
  }



  /*Remove left connector from first child and 

right connector from last child*/

  .tree li:first-child::before,
  .tree li:last-child::after {

    border: 0 none;

  }

  /*Adding back the vertical connector to the last nodes*/

  .tree li:last-child::before {

    border-right: 1px solid #C68D37;

    border-radius: 0 5px 0 0;

    -webkit-border-radius: 0 5px 0 0;

    -moz-border-radius: 0 5px 0 0;

  }

  .tree li:first-child::after {

    border-radius: 5px 0 0 0;

    -webkit-border-radius: 5px 0 0 0;

    -moz-border-radius: 5px 0 0 0;

  }



  /*Time to add downward connectors from parents*/

  .tree ul ul::before {

    content: '';

    position: absolute;
    top: 0;
    left: 50%;

    border-left: 1px solid #C68D37;

    width: 0;
    height: 20px;

  }



  .tree li a {

    border: 1px solid #C68D37;

    padding: 5px 19px;

    text-decoration: none;

    color: #C68D37;

    font-size: 11px;

    display: inline-block;



    border-radius: 5px;

    -webkit-border-radius: 5px;

    -moz-border-radius: 5px;



    transition: all 0.5s;

    -webkit-transition: all 0.5s;

    -moz-transition: all 0.5s;

  }


div#tree{
  height: 400px;
}

  /*Connector styles on hover*/

  .tree li a:hover+ul li::after,

  .tree li a:hover+ul li::before,

  .tree li a:hover+ul::before,

  .tree li a:hover+ul ul::before {

    border-color: #875F25;

  }


  /* Footer Code new */

  .footer_text_credits {
    padding-bottom: 25px;
}

/* Footer code new end */


/* Alert CSS Start */

.custom-alert {
  background-image: linear-gradient(to bottom, var(--color_light_brown), var(--color_dark_brown));
  color: white;
  border: none;
  transition: transform 0.3s ease, filter 0.3s ease, box-shadow 0.3s ease;
}

.custom-alert:hover {
  /* Slight lift */
  transform: translateY(-3px);
  /* Brighten the background a bit */
  filter: brightness(1.1);
  /* Add a subtle shadow for depth */
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}
/* Alert CSS End */

/* Gallery */
.gallery_card_bg
{
  background-color: white !important;
  padding: 5px !important;
}
/* Gallery */