body{
    color: #1a202c;
    background-color: #e2e8f0;    
}
body,html{
	line-height:1.8;
	/*text-transform:capitalize;*/
	font-weight:400;
	margin:0px;
	padding:0px;
}


/*==========================================================
  material-icon font-style
  ================================*/


@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(https://example.com/MaterialIcons-Regular.eot); /* For IE6-8 */
  src: local('Material Icons'),
    local('MaterialIcons-Regular'),
    url(https://example.com/MaterialIcons-Regular.woff2) format('woff2'),
    url(https://example.com/MaterialIcons-Regular.woff) format('woff'),
    url(https://example.com/MaterialIcons-Regular.ttf) format('truetype');
}



.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';
}

/*==========================================================
  material-icon font-style end
  ================================*/
  
  
  
  h1,h2,h3,h4,h5,h6,.h1,.21,.h3,.h4{
	   font-weight:400;
	   line-height;1.5em;
  }
  
  p{
	   font-size:15px;
	   margin:12px 0 0;
	   line-height:24px;
  }
  
  a{
	  color:#333;
	  font-weight:400;
	  
  }
  
  
  button:focus{
	  box-shadow:none;
	  outline:none;
	  border:none;
  }
  
  
  button{
	  cursor:pointer;
  }
  
  ul,ol{
	  padding:0px;
	  margin:0px;
	  list-style:none;
  }
  
  a,a:hover,a:focus{
	  color:#333;
	  text-decoration:none;
	  transition:all 0.3s;
  }
  
  
  .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:260px;
	  overflow:auto;
	  transition:all 0.3s;
	  background-color:#fff;
	  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:#fff;
	  border-bottom:1px solid #eee;
  }
  
  .sidebar-header h3{
	  color:#333;
	  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{
	  padding:2px 0px;
  }
  
   #sidebar ul li.active> a{
	   color:#4c7cf3;
	   background-color:#DBE5FD;
   }
   
   
   #sidebar ul li.active> a i{
	    color:#4c7cf3;
   }
   
   
   
     #sidebar ul li a:hover{
		  color:#4c7cf3;
		  background-color:#DBE5FD;
	 }
   
   
   .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;*/
		 /* right:0;*/
		 /* left:auto;*/
		 /* opacity:0;*/
	  /*}*/
	  
	  .small-menu{
		  min-width:10rem;
	  }
	  
	  
	  /*.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-----*/
	   
	   
	   
	   /*--table design start----*/ 
	   
	   .table-wrapper {
    background-color: #fff;
    /* padding: 20px 25px; */
    margin:6px 0px 40px 0px;
    width: 100%;
    overflow: auto;
    border-radius: 3px;
    box-shadow: 0 1px 1px rgb(0 0 0 / 5%);
}
	   
	   .table-title{
		   background:#353b48;
		   color:#fff;
		   position:sticky;
		   top:0;
		   width:100%;
		   left:0;
		   padding:10px 30px;
		   border-radius:0px 0px 0 0;
	   }
	   
	   .table-title h2{
		   margin:5px 0  0;
		   font-size:17px;
	   }
	   
	   .table-title .btn-group{
		   float:right;
	   }
	   .table-title .btn{
		   color:#fff;
		   float:right;
		   font-size:13px;
		   border:none;
		   min-width:50px;
		   border-radius:2px;
		   border:none;
		   outline:none!important;
		   margin-left:10px;
	   }
	    .table-title .btn i{
			float:left;
			font-size:21px;
			margin-right:5px;
		}
		
		.table-title .btn span{
			float:left;
			margin-top:2px;
		}
		
		table.table tr th, table.table tr td{
			border-color:#e9e9e9;
			padding:8px 15px;
			font-size:14px;
			font-weight: 400;
			vertical-align:middle;
		}
		
		table.table tr th{
			padding:0.75rem;
			font-weight: 600;
		}
		table.table tr th:first-child{
			width:60px;
		}
		
		table.table tr th:last-child{
			width:100px;
		}
		
	   table.table-stripped tbody tr:nth-of-type(odd){
		   background-color:#fcfcfc;
	   }
	   
	   table.table-stripped.table-hover tbody tr:hover{
		   background-color:#f5f5f5;
	   }
	   
	   table.table th i{
		   font-size:17px;
		   margin: 6px 5px;
		   cursor:pointer;
	   }
	   
	   table.table td:last-child{
		   opacity:0.9;
		   font-size:22px;
		   margin:0px 5px;
	   }
	   
	   table.table td a{
		   font-weight:bold;
		   color:#566787;
		   display:inline-block;
		   text-decoration:none;
		   outline:none!important;
	   }
	    table.table td a:hover{
			color:#2196F3;
		}
		
		.edit{
			color:#FFC107;
		}
		
	 .delete{
			color:#F44336;
		}
		
		table.table td  i{
			font-size:19px;
		}
		
			table.table .avatar{
			  border-radius:50%;
			  vertical-align:middle;
			  margin-right:10px;
			}
			
			.pagination{
				float:right;
				margin:0 0 5px;
			}
			
			.pagination  li a{
				border:none;
				font-size:13px;
				min-width:30px;
				min-height:30px;
				color:#999;
				margin:0 2px;
				line-height:30px;
				border-radius:2px!important;
				text-align:center;
				padding:0 6px;
			}
			
			.pagination  li a:hover{
				color:#666;
			}
			
			
			.pagination li.disabled i{
				color:#ccc;
				
			}
			
			.pagination li i{
				font-size:16px;
				padding-top:6px;
			}
			
			.hint-text{
				float:left;
				margin-top:10px;
				font-size:13px;
			}
			
			.custom-checkbox{
				position:relative;
			}
			
			
			.custom-checkbox input[type="checkbox"]{
				opacity:0;
				position:absolute;
				margin:5px 0 0  3px;
				z-index:9;
			}
			
			
			.custom-checkbox label:before{
				width:18px;
				height:18px;
			}
			.custom-checkbox label:before{
				content:"";
				margin-right:10px;
				display:inline-block;
				vertical-align:text-top;
				  background-color:#fff;
				  border:1px solid #bbb;
				  border-radius:2px;
				  box-sizing:border-box;
				  z-index:2;
			}
			
			
			.custom-checkbox input[type="checkbox"]:checked + label:after{
				content:"";
				position:absolute;
				left:6px;
				top:3px;
				width:6px;
				height:11px;
				border:solid #000;
				border-width:0 3px 3px 0;
				transform:inherit;
				z-index:3;
				transform:rotatez(45deg);
			}
			
				.custom-checkbox input[type="checkbox"]:checked + label:before{
					border-color:#03A9F4;
					background:#03A9F4;
				}
			
			
			.custom-checkbox input[type="checkbox"]:checked + label:after{
				border-color:#fff;
			}
			
			
			.custom-checkbox input[type="checkbox"]:disabled + label:before{
				color:#b8b8b8;
				cursor:auto;
				box-shadow:none;
				background:#ddd;
			}
			
	      /*--table design end----*/ 
	   
	   
		  
		  
		  
	   
	   	   /*-------modal-style end------*/
		   
		   
		   
		      /*-------footer design start------*/
			  footer{
		       background-color:#353b48;
			   color:#fff;
			   text-align:center;
			   padding:10px 30px;
			   position:relative;
			   width:100%;
			  }
		   
		       /*-------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);
		}
	}
	
		.subLinkLevel1{
	    color : black !important;
	    margin-left:20px !important;
	}
		.subLinkLevel2{
	    color : black !important;
	    margin-left:40px !important;
	}
	.subMenu1{
	    background-color:#77998e5e;
	}
		.subMenu2{
	    background-color:#198754
	}
	/* index page ends */
.signup{
   box-shadow: 13px 13px 20px #cbced1, -13px -13px 20px #fff;
}
 
  /*--logo */
  .logo {
   width: 80px;
   margin: auto;
   }
   .logo img {
   width: 100%;
   height: 80px;
   object-fit: cover;
   border-radius: 50%;
   box-shadow: 0px 0px 3px #5f5f5f,
   0px 0px 0px 5px #ecf0f3,
   8px 8px 15px #a7aaa7,
   -8px -8px 15px #fff;
   }
   
    .wrapperReg {
   
   min-height: 50px;
   margin: 80px auto;
   padding: 40px 30px 30px 30px;
   border-radius: 15px;
  
}

 .wrapperReg .name {
   font-weight: 600;
   font-size: 1.4rem;
   letter-spacing: 1.3px;
   padding-left: 10px;
   color: #555;
   }
   .wrapperReg .form-field input, .wrapperReg .form-field textarea,.wrapperReg .form-field select {
   width: 100%;
   display: block;
   border: none;
   outline: none;
   background: none;
   font-size: 1.2rem;
   color: #666;
   padding: 10px 15px 10px 10px;
   /* border: 1px solid red; */
   }
   .wrapperReg .form-field {
   /*padding-left: 10px;*/
   margin-bottom: 20px;
   /*border-radius: 20px;*/
   box-shadow: inset 8px 8px 8px #cbced1, inset -8px -8px 8px #fff;
   }
   .wrapperReg .form-field .fas {
   color: #555;
   }
   .wrapperReg .btn {
   box-shadow: none;
   width: 100%;
   height: 40px;
   background-color: #03A9F4;
   color: #fff;
   border-radius: 25px;
   box-shadow: 3px 3px 3px #b1b1b1,
   -3px -3px 3px #fff;
   letter-spacing: 1.3px;
   }
   .wrapperReg .btn:hover {
   background-color: #039BE5;
   }
   
   
      @media(max-width: 380px) {
   .wrapper {
   margin: 30px 20px;
   padding: 40px 15px 15px 15px;
   }
   }
   
   
   /* -wrapper ends */
   
   /*modal start*/
    .modal-content {
   width: 80%;
   margin: 0 auto;
   }
   .modal-body {
   padding: 0;
   background-color: #ecf0f3;
   }
   .btn-cancel {
   background-color: red !important;
   }
   .animation-div{
        
   }
   
   .animation-div.ng-hide {
        opacity:0;
    }
   /*modal end*/
   
   
 .form-switch .form-check-input{
     width: 10em !important;
     height:2em !important;
     margin-left:3em;
 }
 
 /* list data template */
    .sort-active{
       color:lightseagreen;
       font-weight : bold;
   }
   
    .enabled{
            cursor:pointer;
        }


/* custom field and all other list detail page */
  .modal-body {
   padding: 0;
   background-color:white;
   }
   .btn-close {
   position: absolute;
   right: 0;
   padding: 1em;
   }
   .modal-form-area h1 {
   font-size: 2.3em;
   font-weight: bold;
   }
   .modal-form-area {
   padding: 2em 3em;
   max-width: 100%;
   color: black;
   box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.5);
   } 
   
   .modal-form-area .btn {
   width: 100%;
   font-weight: 800;
   padding: 0.5em 0;
   border-radius: 50px;
   }
   .modal-form-area p {
   text-align: center;
   padding-top: 2em;
   color: #fff;
   }
   .modal-form-area p a {
   color: #e1e1e1;
   text-decoration: none;
   }
   .modal-form-area p a:hover {
   color: #fff;
   }
   @media (max-width: 600px){
   .modal-form-area{
   padding: 1.5em;
   }
   .modal-form-area h1{
   font-size: 18px;
   }
   }
   .form-label{
   color:black;
   }
   .multiselect-container {
   width: 100% !important;
   }
   
   /* custom field and all other list detail page end */