body,html{
	line-height:1.8;
	font-family:'Poppins',sans-serif;
	color:#555e58;
	background: black;
	text-transform:capitalize;
	font-weight:400;
	margin:0px;
	padding:0px;
}

.loader-container{
    position: fixed;
    top:0; left:0;
    z-index: 10000;
    background:#f9cc41;
    display: flex;
    align-items: center;
    justify-content: center;
    height:100%;
    width:100%;
  }
  
  .loader-container.fade-out{
    top:-120%;
  }

.wrapper{
	position:relative;
width:100%;
overflow:auto;	
  }
  
  /*=========sidebar---design------*/
  
  #sidebar{
	  position:fixed;
	  height:100%!important;
	  top:0;
	  left:0;
	  bottom:0;
	  z-index:11;
      width: 244px;
	  overflow:auto;
	  transition:all 0.3s;
	  background-color:#353b48;
	  box-shadow:0 0 30px 0 rgba(200 200 200 / 20%);
  }
 
  
  @media only screen and (min-width:992px){
	  #sidebar.active{
		  left:-260px;
		  height:100%!important;
		  position:absolute!important;
		  overflow:visible!important;
		  top:0;
		  z-index:666;
		  float:left!important;
		  bottom:0!important;
	  }
	  
	  #content{
		  width:calc(100% - 260px);
		  position:relative;
		  float:right;
		  transition:all 0.3s;
	  }
	  
	  #content.active{
		  width:100%;
	  }
	  
  }
  
  
  #sidebar::-webkit-scrollbar{
	  width:5px;
	  border-radius:10px;
	  background-color:#eee;
	  display:none;
  }
  
  #sidebar::-webkit-scrollbar-thumbs{
	  width:5px;
	  border-radius:10px;
	  background-color:#333;
	  display:none;
  }
  
   #sidebar:hover::-webkit-scrollbar-thumbs{
	  display:block;
  }
  
   #sidebar:hover::-webkit-scrollbar{
	  display:block;
  }
  
  #sidebar .sidebar-header{
	  padding:20px;
	  background-color:#353b48;
	  border-bottom:1px solid #353b48;
  }
  
  .sidebar-header h3{
	  color:#fff;
	  font-size:17px;
	  margin:0px;
	  text-transform:uppercase;
	  transition:all 0.5s ease;
	  font-weight:600;
  }
  
   .sidebar-header h3 img{
	   width:45px;
	   margin-right:10px;
   }
  
  #sidebar ul li{
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    white-space: nowrap;
    padding: 0.8rem 10px 0.8rem 1.188rem;
    color: #6c7293;
    -webkit-transition-duration: 0.45s;
    -moz-transition-duration: 0.45s;
    -o-transition-duration: 0.45s;
    transition-duration: 0.45s;
    transition-property: color;
    -webkit-transition-property: color;
    height: 46px;
    border-radius: 0px 100px 100px 0px;
  }
  
   #sidebar ul li.active> a{
	   color:#fff;
       background: #0f1015;
       border-radius: 0px 100px 100px 0px;
   }
   #sidebar ul li.active> a:before {
    content: "";
    width: 3px;
    height: 100%;
    background: #0090e7;
    display: inline-block;
    position: absolute;
    left: 0;
    top: 0;
   }
   
   
   
   #sidebar ul li.active> a i{
	    color:#4c7cf3;
        border-radius: 0px 100px 100px 0px;
   }
   
   
   
     #sidebar ul li a:hover{
		 text-decoration: none;
	 }
   
   
   .dropdown-toggle::after{
	   position:absolute;
	   right:22px;
	   top:18px;
	   color:#777777;
   }
   
   #sidebar ul li.dropdown{
	   position:sticky;
   }
   
   
     #sidebar ul.component{
		 padding:20px 0px;  
	 }
   
   #sidebar ul li a{
	   padding:5px 10px 5px 20px;
	   line-height:30px;
	   font-size:15px;
	   position:relative;
	   font-weight:400;
	   display:block;
	   color:#777777;
	   text-transform:capitalize;
   }
   
      #sidebar ul li a i{
		  position:relative;
		  margin-right:10px;
		  top:6px;
	  }
  
  
    /*=========sidebar---design- end-----*/
	
	
	 /*========main-content- navbardesign -start-----*/
	
	  #content{
		  position:relative;
		  transition:all 0.5s;
		  background-attachment:#f9fafc;
	  }
	
	
	 .top-navbar{
		  width:100%;
		  z-index:9;
		  position:relative;
		  padding:15px 30px;
		  background-color:#353b48;
	 }
	 
	 .xd-topbar{
		 width:100%;
		 position:relative;
	 }
	 
	 input[type="search"]{
		 background-color:#4a5263;
		 color:#fff;
		 padding-left:20px;
		 border:none;
		 border-radius:50px 0px 0px 50px;
	 }
	 
	 .input-group-append{
		 margin-left:-1px;
	 }
	 
	 
	.xp-searchbar .btn{
		 background-color:#4a5263;
		 color:#fff;
		 font-weight:600;
		 font-size:16px;
		 border-radius:0 50px 50px 0;
		 padding:4px  15px;
	 }
	 
	 
	.xp-breadcrumbbar .page-title{
		font-size:20px;
		color:#fff;
		margin-bottom:0;
		margin-top:0;
	}
	 
	 .breadcrumb{
		 display:inline-flex;
		 background-color:transparent;
		 margin:0;
		 padding:10px 0 0;
	 }
	 
	 .breadcrumb .breadcrumb-item a{
		 color:#777777;
	 }
	 
	 .breadcrumb-item.active{
		 color:#6c757d;
	 }
	  
	  
	   .breadcrumb-item+.breadcrumb-item{
		   padding-left:.5rem;
	   }
	   
	   .main-content{
		   padding:30px 30px 0px 30px;
	   }
	   
	   .navbar{
		   background-color:#353B48;
		   color:#fff;
	   }
	   
	   .navbar-brand{
		   color:#fff;
	   }
	   
	   .navbar button{
		   background-color:transparent;
           border:none;		   
	   }
	   
	    .navbar button span{
			color:#fff;
		}
		
		.xp-menubar{
         border-radius:50%;
       width:45px;
height:45px;
line-height:45px;
text-align:center;
margin-right:20px;
border:none;
color:#fff;
cursor:pointer;
background-color:rgba(0,0,0,0.09);	   
		}
		
		
	  .xp-menubar span{
		margin:9px;
		padding:0px;
		transform:rotate(90deg);
	  }
	  
	  .navbar-nav > li.active{
		  color:#fff;
		  border-radius:4px;
		  background-color:rgba(0,0,0,0.08);
	  }
	  .navbar-nav > li > a{
		  color:#fff;
	  }
	  
	  .navbar .notification{
		  position:absolute;
		  top:2px;
		  right:3px;
		  display:block;
		  font-size:9px;
		  border:0;
		  background-color:#2bcd72;
		  min-width:15px;
		  text-align:center;
		  padding:1px 5px;
		  height:15px;
		  border-radius:2px;
		  line-height:14px;
	  }
	  
	  @media (max-width:768px){
		  .xp-searchbar{
			  margin-top:20px;
		  }
	  }
	  
	  .navbar-nav > li.show .dropdown-menu{
		  transform:translate3d(0,0,0);
		  opacity:1;
		  display:block;
		  visibility:visible;
	  }
	  
	  .dropdown-menu{
		  border:0;
		  box-shadow:0 2px 5px 0 rgba(0 0 0 / 26%);
		  transform:translate3d(0, -20px ,0);
		  visibility:hidden;
		  position:absolute!important;
		  transition:all 150ms linear;
		  display:block;
		  min-width:15rem;
		  left:0;
		  left:auto;
		  opacity:0;
	  }
      
    
	  .small-menu{
		  min-width:10rem;
          position: relative;
          right: 50px;
	  }
    
      @media only screen and (min-width:1250px){
        .big-menu{
            position: relative;
            right: 10px;
        }
    }
	  .dropdown-menu li > a{
		  font-size:13px;
		  padding:10px 20px;
		  margin:0 5px;
		  border-radius:2px;
		  font-weight:400;
		  transition:all 150ms linear;
	  }
	  
	  
	  .dropdown-menu li > a .material-icons{
		  position:relative;
		  top:3px;
		  color:#777;
		  margin-right:6px;
		  font-size:16px;
		  
	  }
	  
	  .navbar-nav > .active > a:focus{
		  color:#fff;
		  background-color:rgba(0,0,0,0.08);
	  }
	   .navbar-nav li a{
		   position:relative;
		   display:block;
		   padding:4px 10px!important;
	   }
	   
	  .nav-item .nav-link .material-icons{
		  position:relative;
		  top:10px;
		  font-size:19px;
	  }
	  
	  .xp-user-live{
		  position:absolute;
		  bottom:5px;
		  right:9px;
		  width:12px;
		  height:12px;
		  border-radius:50%;
		  border:2px solid #353b48;
		  background-color:#4c7cf3;
	  }
	  
	   /*---navbardesign -end-----*/
	   /* card  start*/
       .cardrow{
           position: relative;
           margin-top: 6px;
       }
       .cards{
           background: linear-gradient(#ff796f, #bd261b);
           padding: 1.6rem;
           border-radius: 1.6rem;
           color: white;
           height: 16rem;
           display: flex;
           flex-direction: column;
           justify-content: space-between;
           box-shadow: 0 2rem 3rem rgba(114, 108, 107, 0.2);
           transition: all 300ms ease;
       }
       .crdp1 {
        background: linear-gradient(#7f8191, #27282f);
        box-shadow: 0 2rem 3rem rgba(0, 0, 0, 0.2);
       }
       .crdp2{
        background: linear-gradient(#5d70ff, #5719c2);
        box-shadow: 0 2rem 3rem rgba(71, 7, 234, 0.2);
    }
    .cards:hover{
        box-shadow: none;
    }
    .cards .top{
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .cards .top .left{
        display: flex;
        gap: 0.5rem;
    }
.cards .top .left h2{
    font-weight:200;
    font-size: 1.4rem;
}
.cards .top .left img{
    width: 2.3rem;
    height: 2.3rem;
    border: 1px solid white;
    border-radius: 6px;
    padding: 0.4rem;
}
.cards .top .right{
width: 3.5rem;
}
.cards .middle{
    display: flex;
    justify-content: space-between;
}
.cards .middle .chip{
    width: 3.5rem;
}
.cards .bottom{
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}
.cards .bottom .right{
    display: flex;
    gap: 2rem;
}

       /* cards end */
/* card */
.card {
    border-radius: 0.25rem;
}
.card .card-header{
    color: white;
}
.card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #191c24;
    background-clip: border-box;
    border: 1px solid rgba(0, 0, 0, 0.125);
    border-radius: 0.25rem;
    text-decoration: none;
}

.table{
    margin-bottom: 0;
    color: #6c7293;
}
.table td, .table th {
    padding: 0.75rem;
    vertical-align: top;
    border-top: 1px solid #727479 !important;
}
	   /*=======================================================
   main-content inner design like card end
   ===============================================*/
   .status {
    flex: 0 0 48%;
    padding: 2rem 2rem;
    border-radius: 1rem;
    color: white;
}

.status-header {
    font-size: 20px;
    background-color:#353b48;
    color: white;
    border-radius: 5rem;
    padding: 1rem;
    padding-left: 2rem;
}


.status-details {
    display: flex;
    font-size: 1.6rem;
    justify-content: space-between;
    margin: 2rem 1rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid #2c2e33 !important;
    color: white;
    padding-left: 1rem;
}



.icon.icon-rose {
    color: #e91e63;
}
.icon.icon-success {
    color: #4caf50;
}





/* ======================================== copy start ============================ */
.label {
    padding:10px;
    font-size:18px;
    color:white;
    justify-content: center;
  }
  .copy-text {
    position:relative;
    padding:10px;
    background:#fff;
    border:1px solid #ddd;
    border-radius:10px;
    display:flex;
  }
  .copy-text input.text {
    padding:10px;
    font-size:18px;
    color:#555;
    border:none;
    outline:none;
    padding-right:50px;
  }
  .copy-text button {
    padding:10px;
    background:#5784f5;
    color:#fff;
    font-size:18px;
    border:none;
    outline:none;
    border-radius:10px;
    cursor:pointer;
  }
  .copy-text button:active {
    background:#809ce2;
  }
  .copy-text button:before {
    content:"Copied";
    position:absolute;
    top:-45px;
    right:0px;
    background:#5c81dc;
    padding:8px 10px;
    border-radius:20px;
    font-size:15px;
    display:none;
  }
  .copy-text button:after {
    content:"";
    position:absolute;
    top:-20px;
    right:25px;
    width:10px;
    height:10px;
    background:#5c81dc;
    transform:rotate(45deg);
    display:none;
  }
  .copy-text.active button:before,
  .copy-text.active button:after {
    display:block;
  }

 
   .copy .copy-section .title:before{
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 3px;
    background-color: #ff4500;
    border-radius: 3px;
   }
   .copy .copy-section .title:after{
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(30px);
    width: 10px;
    height: 3px;
    background-color: #504f93;
    border-radius: 3px;
   }
   .step .step1 h3{
    display: block;
    font-size: 1.17em;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
    color: white;
}
.step .step1 p{
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    color: white;
    font-size: 16px;
}
/* withdraw */
.rounded {
    border-radius: 1rem;
}

.nav-pills .nav-link {
    color: #555
}

.nav-pills .nav-link.active {
    color: white
}

input[type="radio"] {
    margin-right: 5px
}

.bold {
    font-weight: bold
}

.with-details {
    display: flex;
    justify-content: space-between;
    font-weight: bold;
}
.withdraw .withdraw-section .title{
    font-size: 32px;
    font-weight: 600;
}
.withdraw .withdraw-section .title:before{
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 3px;
    background-color: #ff4500;
    border-radius: 3px;
   }
   .withdraw .withdraw-section .title:after{
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(30px);
    width: 10px;
    height: 3px;
    background-color: #504f93;
    border-radius: 3px;
   }
		      /*-------footer design start------*/
			  .footer {
				border-top: 1px solid #e7e7e7;
			}
			
			footer {
				padding: 10px 0;
				position:relative;
				width:100%;
			}
			
			footer ul li {
				display: inline-block;
			}
			
			footer ul li a {
				color: inherit;
				padding: 15px;
				font-weight: 500;
				font-size: 12px;
				text-transform: uppercase;
				border-radius: 3px;
				text-decoration: none;
				position: relative;
				display: block;
			}
			
			
			footer .copyright {
				padding: 15px;
				font-size:14px;
				margin: 0;
			}
			
			.jvectormap-container {
				background: #ffffff; }
			  
			  .vector-map {
				width: 100%;
				height: 300px; }
			  
			  .gauge text {
				fill: #6c7293; }			
                /*-------footer design end------*/
            
            
            
            #sidebar.show-nav, .body-overlay.show-nav{
                transform:translatex(0%);
                opacity:1;
                display:block;
                visibility:visible;
                z-index:15;
            }
            
        
        
       
      /*========main-content- navbardesign -end-----*/
     
     
     @media only screen and (max-width:992px){
         #sidebar{
             position:fixed;
             top:0;
              bottom:0;
              z-index:10;
              width:260px;
              transform:translatex(-100%);
              transition:all 150ms linear;
              box-shadow:none!important;
         }
         
         .body-overlay{
             position:fixed;
             top:0;
             left:0;
             width:100%;
             height:100%;
             display:none;
             visibility:hidden;
             opacity:0;
             z-index:3;
             transition:all 150ms linear;
             background-color:rgba(0,0,0,0.5);
         }
     }