@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap');
body {
 font-family: 'Poppins', sans-serif;
  font-size: 14px;
  line-height: 1.42857143;
  color: #666;
  background-color: #f4f4f4;
  height: 100%;
}
input,
button,
select,
textarea {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  font-size:14px !important;
}
a {
  color: #5423bb;
  text-decoration: none;
}
a:hover,
a:focus,.link-muted:hover,.link-muted:focus {
  color: #262f6a;
  text-decoration: none;
}
a:focus {
  outline: thin dotted #333;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}
.link-muted,.nav-link,.nav-link:hover,.nav-link:focus{ color:#666;}

p{ font-weight:normal;} 

.container-small{ max-width:960px; padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;} 
 h1,h2,h3,h4,h5,h6{ color:#333;}
.heading-1{ font-size:30px;}
.heading-2{}
.heading-3{ font-size:18px;}
.heading-4{ font-size:16px;}
.heading-5{ font-size:15px;}
 
.f-sm{ font-size:12px;} 
.error-msg{ font-size:12px; padding:10px 0; color: #dc3545!important;} 
 label{ font-weight:600;}
 
 .text-primary{ color:#5423bb !important;}
 
 /* backgound  */ 
#bg {
  background: #6541c1;
  background: -webkit-gradient(left top, right top, color-stop(0%, #6541c1), color-stop(98%, #d43396), color-stop(100%, #d43396));
  background: -webkit-gradient(linear, left top, right top, from(#6541c1), color-stop(98%, #d43396), to(#d43396));
  background: linear-gradient(to right, #6541c1 0%, #d43396 98%, #d43396 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6541c1', endColorstr='#d43396', GradientType=1);
}
.bg-primary{ background-color:#5423bb !important;}
 
  
 /* image for login/ Signup */
 .img-intro{ padding: 4rem 0; margin:0; }
 
/* button */
.btn-menu{ color:rgba(18, 18, 18, 0.8); font-size:14px;}
.btn:focus,.btn:active{ outline:none !important; color:#fff; box-shadow:none !important; }
.btn-menu:hover{ color:rgba(18, 18, 18, 0.8);;}
.btn-menu.active{ text-decoration:underline; color:rgba(18, 18, 18, 0.8);;}
.btn-smob,.btn-smob:hover{
	display: inline-block;
    vertical-align: middle;
    background: #6541c1;
    background: -webkit-gradient(left top, right top, color-stop(0%, #6541c1), color-stop(98%, #d43396), color-stop(100%, #d43396));
    background: -webkit-gradient(linear, left top, right top, from(#6541c1), color-stop(98%, #d43396), to(#d43396));
    background: linear-gradient(to right, #6541c1 0%, #d43396 98%, #d43396 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6541c1', endColorstr='#d43396', GradientType=1);
    position: relative;
    padding: 12px 20px;
	text-align:center;
	color:#fff;
	font-size:14px;
    border-radius: 28px;
	-webkit-box-shadow: 0px 15px 30px rgba(212, 50, 151, 0.27); 
     box-shadow: 0px 15px 30px rgba(212, 50, 151, 0.27); 
	 width:100%;
	}
.btn-light { background-color:transparent !important; color:#6445a5 !important; border:none;}
.btn-light:hover{ background-color:#5423bb !important; color:#fff !important;}
.btn-outline-primary{ border:2px solid #5423bb; color:#5423bb;}
.btn-outline-primary:hover,.btn-woutline-primary:hover{ background-color:#5423bb; color:#fff; border-color:#5423bb;}
.btn{ font-size:14px; font-weight:500 !important;}
.btn-woutline-primary{ border:inherit; color:#5423bb;}
.btn-woutline-secondary{ border:inherit;}
.btn-woutline-secondary:hover{background-color:#fff; color:#333; border-color:#fff;}

.btn-woutline-third{ border:inherit; color:#ce32a3;}
.btn-woutline-third:hover{background-color:#ce32a3; color:#fff; border-color:#ce32a3;}

.btn-primary{ border:2px solid #5423bb; background-color:#5423bb; color:#fff;}
.btn-primary:hover{ background-color:#5423bb; color:#fff; border-color:#5423bb; box-shadow: 0 .125rem .25rem rgba(84,35,187,.5)!important;}


/* form */
.input-group-addon, .input-group-btn {
    width: 28px;
    position: absolute;
    right:1px;
    top: 1px;
    z-index: 9999;
	height:33px;
    text-align: center;
}
.input-group-btn .btn{ padding:.375rem .40rem;}

 .upload-file,.form-field{ background-color:#f4f4f4; border:2px solid #ddd; padding:1.5rem; border-radius:5px; position:relative;  }
 .upload-file input{ width:100%; position:absolute; left:0; top:0; height:100%; opacity:0;}
.input.date{ display:table;}
.form-group{ position:relative;}
.form-controls{ background-color:#fff !important; border:2px solid #ddd;  border-radius:5px;}

/* carousel */
.carousel-indicators li.active{ background-color:#5423bb;}
.carousel-inner{ width:210px; margin:0 auto;}

/* preview */
.preview{ background:url(../images/img-mobile.png) top center no-repeat; padding:0 0 60%; height:531px; }
.preview .card{ border-radius:10px;}
.preview-container{   height: 365px;  margin: 55px auto; border-radius:10px; width:210px;}
.preview .logo-preview{ padding:150px 0; text-align:center;}
.preview .preview-overlay{ background-color:rgba(255,255,255,0.8); position:absolute; height:100%; width:100%; z-index:1;}
.tr-10{ right:10px; top:5px;}

/* nav tab */
.nav-pills .nav-link.active, .nav-pills .show>.nav-link{ background-color:#efe9fc !important; color:#333; border-radius:0; }
.nav-pills .nav-link.active i,.nav-pills .show>.nav-link i{color:#5423bb;}
.nav-pills .nav-link i{ color:#fff;     font-size: 20px;}
.nav-primary{ background-color:#5423bb !important; color:#fff; border-radius:5px 5px 0 0;}
.nav-primary a{ color:rgba(255,255,255,0.8);     padding: 15px 20px;}.nav-primary a:hover{ color:rgba(255,255,255,1);} 
.nav-primary.nav-pills .nav-link.active, .nav-primary.nav-pills .show>.nav-link{ background-color:transparent !important; color:#fff;  }

/* badge */
.badge-secondary{ background-color:#ce32a3;}

/* upload photo */
.avatar-upload {
position: relative;
max-width: 205px;
margin: 20px auto;}

.avatar-upload .avatar-edit {
position: absolute;
right: 35px;
z-index: 1;
bottom: 5px;}

.avatar-upload    input {  display: none;}
.avatar-upload  label {
display: inline-block;
width: 34px;
height: 34px;
margin-bottom: 0;
border-radius: 100%;
background: #ce32a3;
color:#fff;
border: 1px solid transparent;
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.12);
cursor: pointer;
font-weight: normal;
transition: all .2s ease-in-out;}

.avatar-upload label:hover {
background: #ce32a3;
border-color: #ce32a3;
}
.avatar-upload label:after {
content: "\f030";
font-family: 'FontAwesome';
color: #fff;
position: absolute;
top: 8px;
left: 0;
right: 0;
text-align: center;
margin: auto;
}
.avatar-preview {
width: 128px;
height: 128px;
position: relative;
border-radius: 100%;
border: 6px solid #F8F8F8;
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
margin:0 auto;
}

.avatar-preview > div {
width: 100%;
height: 100%;
border-radius: 100%;
background-size: cover;
background-repeat: no-repeat;
background-position: center;}


/* dropdown */
.open > .dropdown-menu{ display:block;}
#topbar  .dropdown-menu li {
  display: block;
  position: relative;
}
#topbar  .dropdown-menu li a {
  min-height: 0;
  color: #333;
  display:block;
  position:relative;
}
#topbar  .dropdown-menu li a:hover{ background-color:#f5f5f5;}
#topbar  .dropdown-menu li a .fa{ position:absolute; left:10px;}
#topbar .topbar-user a {
  padding: 12px 15px 11px;
  font-size:13px;
}
#topbar .topbar-user a img {
  margin-right: 5px;
}
#topbar .navbar-top-links li > a img {
    position: relative;
    width: 25px;
    height: 25px;
    display: inline-block;
}
.img-circle {
    border-radius: 50% !important;
}
.dropdown-menu.dropdown-user{ padding:0; position:absolute;}


/* form */
.page-form {
  margin: 3% auto 1% auto;
  background: #fff;
  border-radius: 20px;
}
.page-form .input-icon i {
  margin-top: 15px;
}
.page-form input[type='text'],
.page-form input[type='password'],
.page-form input[type='email'],
.page-form select {
  height: 45px;
  border-color: #e5e5e5;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
  color: #777777;
}
.page-form .header-content h2 {
  font-size: 18px;
  font-weight: bold;
  margin: 0;
  color:#000;
}
.page-form .body-content {
  padding: 15px 0 0;
  position: relative;
}
.form    { margin:4rem 4rem 4rem 0;}

.input-icon {
  position: relative;
}
 
.input-icon i {
  color: #4e4e4e;
  display: block;
  position: absolute;
  margin: 10px 2px 4px 10px;
  width: 16px;
  height: 16px;
  font-size: 16px;
  text-align: center;
}
.input-icon.left input {
  padding-left: 50px !important;
  padding-right: 10px !important;
}
.input-icon.left i {
  left: 8px;
  float: left;
}
.input-icon.left .right{ float:right; left:auto; right:15px;  }

.action-top-right{position: absolute;
    right: -30px;
    top: 0;
    font-size: 20px;}

/* sidebar  */
.wrapper {
    display: flex;
    align-items: stretch;
    overflow: hidden;
}
#sidebar {
    min-width: 250px;
    max-width: 250px;
    background: #240a59;
    color: #fff;
    transition: all 0.3s;
}
#sidebar ul.components {
    padding: 120px 0;
}

#sidebar ul li.active>a, a[aria-expanded="true"] {
    color: #fff;
}
#sidebar ul li a {
    padding: 10px 20px 10px 50px;
    font-size: 14px;
    display: block;
    text-align: left;
	color:rgba(255,255,255,0.8);
	position:relative;
}
#sidebar ul li a.dropdown-toggle.collapsed::after {border-bottom: .3em solid;
    border-right: .3em solid transparent;
    border-top: 0;
    border-left: .3em solid transparent;}

#sidebar ul li a .fa{ position:absolute; left:20px;}
#sidebar ul li a:hover {
    color: #fff;
}
#sidebar ul li ul{ padding-left:35px;}
#sidebar.active ul li ul{ display:none;}
#sidebar .dropdown-toggle::after {
    display: block;
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
}
/* Shrinking the sidebar from 250px to 80px and center aligining its content*/
#sidebar.active {
    min-width: 80px;
    max-width: 80px;
    text-align: center;
}
#sidebar.active ul li { position:relative;}
#sidebar.active ul li a span{ display:none;}
#sidebar.active  .open ul{ position:absolute; display:block; top:0; left:80px; z-index:1; background-color:#240a59; width:200px; padding:0;  }
 

/* Toggling the sidebar header content, hide the big heading [h3] and showing the small heading [strong] and vice versa*/
#sidebar .sidebar-header strong {
    display: none;
}

#sidebar ul li a {
    text-align: left;
}

#sidebar.active ul li a {
    padding: 20px 20px 20px 50px;
  }

#sidebar.active ul li a i {
    margin-right:  0;
    display: block;
    margin-bottom: 5px;
	}

/* Same dropdown links padding*/
#sidebar.active ul ul a {
    padding: 10px  20px 10px 45px !important;
}

/* Changing the arrow position to bottom center position, 
   translateX(50%) works with right: 50% 
   to accurately  center the arrow */
#sidebar.active .dropdown-toggle::after {
    top: auto;
    bottom: 10px;
    right: 30%;
    -webkit-transform: translateX(50%);
    -ms-transform: translateX(50%);
    transform: translateX(50%);
}

#content {
    width: 100%;
    padding: 0;
    min-height: 100vh;
    transition: all 0.3s;
}

/* calender range */
.reportrange{ font-size:12px; padding:10px; border:1px solid #ddd;}
.daterangepicker.opensleft .ranges,.daterangepicker{ padding:0 !important; margin:0 !important;}
.daterangepicker .ranges li{ border-radius:0 !important; color:#333; background-color:#fff; margin-bottom:0; padding:8px 15px;}.daterangepicker .ranges li:hover{ background-color:#f5f5f5; border-color:#f5f5f5; color:#333;}
.daterangepicker .ranges li.active,.daterangepicker .ranges li.active:hover{ background-color:#5423bb; border-color:#5423bb; color:#fff;}
.daterangepicker.opensleft:after,.daterangepicker.opensleft:before{ display:none !important;}
.daterangepicker .range_inputs{padding:8px 15px;}.daterangepicker_start_input,.daterangepicker_end_input{ width:74px;}
.daterangepicker .ranges{ min-width:11rem; max-width:190px;   width:auto; font-size:14px;}
 .daterangepicker .calendar{ max-width:inherit;}

/* card */
.card{ margin:1rem 0; }


/* default message */
.default-msg{ padding:2rem; color:#666; text-align:center;}

/* timeline */
.timeline-centered {
  position: relative;
  margin-bottom: 30px;
}
.timeline-centered.timeline-sm .timeline-entry {
  margin-bottom:5px !important;
}
.timeline-centered.timeline-sm .timeline-entry .timeline-entry-inner .timeline-label {
  padding: 5px 0 0 0;
}
.timeline-centered.timeline-sm .timeline-entry .timeline-entry-inner .timeline-label .timeline-img{ margin-right:10px;} 
.timeline-centered:before,
.timeline-centered:after {
  content: " ";
  display: table;
}
.timeline-centered:after {
  clear: both;
}
.timeline-centered:before {
  content: '';
  position: absolute;
  display: block;
  width: 3px;
  background: #ddd;
  left: 50%;
  top: 20px;
  bottom: 20px;
  margin-left: -4px;
}
.timeline-centered .timeline-entry {
  position: relative;
  width: 50%;
  float: right;
  margin-bottom: 70px;
  clear: both;
    font-size:13px;
}
.timeline-centered .timeline-entry:before,
.timeline-centered .timeline-entry:after {
  content: " ";
  display: table;
}
.timeline-centered .timeline-entry:after {
  clear: both;
}
.timeline-centered .timeline-entry.begin {
  margin-bottom: 0;
}
.timeline-centered .timeline-entry.left-aligned {
  float: left;
}
.timeline-centered .timeline-entry.left-aligned .timeline-entry-inner {
  margin-left: 0;
  margin-right: -28px;
}
.timeline-centered .timeline-entry.left-aligned .timeline-entry-inner .timeline-time {
  left: auto;
  right: -80px;
  text-align: left;
}
.timeline-centered .timeline-entry.left-aligned .timeline-entry-inner .timeline-icon {
  float: right;
  margin-right: 17px;
}
.timeline-centered .timeline-entry.left-aligned .timeline-entry-inner .timeline-label {
  margin-left: 0;
  margin-right: 85px;
}
.timeline-centered .timeline-entry.left-aligned .timeline-entry-inner .timeline-label:after {
  left: auto;
  right: 0;
  margin-left: 0;
  margin-right: -9px;
  -moz-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}
.timeline-centered .timeline-entry .timeline-entry-inner {
  position: relative;
  margin-left: -31px;
}
.timeline-centered .timeline-entry .timeline-entry-inner:before,
.timeline-centered .timeline-entry .timeline-entry-inner:after {
  content: " ";
  display: table;
}
.timeline-centered .timeline-entry .timeline-entry-inner:after {
  clear: both;
}
.timeline-centered .timeline-entry .timeline-entry-inner .timeline-time {
  position: absolute;
  left: -94px;
  text-align: right;
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.timeline-centered .timeline-entry .timeline-entry-inner .timeline-time > span {
  display: block;
}
.timeline-centered .timeline-entry .timeline-entry-inner .timeline-time > span:first-child {
  font-size: 18px;
  font-weight: bold;
}
.timeline-centered .timeline-entry .timeline-entry-inner .timeline-time > span:last-child {
  font-size: 12px;
}
.timeline-centered .timeline-entry .timeline-entry-inner .timeline-icon {
  background: #f5f5f5;
  color: #777777;
  display: block;
  width: 25px;
  height: 25px;
  -webkit-background-clip: padding-box;
  -moz-background-clip: padding-box;
  background-clip: padding-box;
  border-radius: 50%;
  text-align: center;
  border: 7px solid #fff;
  line-height: 45px;
  font-size: 12px;
  float: left;
  margin-left: 16px;
}
.timeline-centered .timeline-entry .timeline-entry-inner .timeline-icon .fa{  left: 3px;
    position: absolute;
    top: 2px;
    margin-bottom: 0;}

.timeline-centered .timeline-entry .timeline-entry-inner .timeline-icon.bg-blue {
  background-color: #5423bb;
  color: #fff;
}

.timeline-centered .timeline-entry .timeline-entry-inner .timeline-icon.bg-pink {
  background-color: #d54daf;
  color: #fff;
}

.timeline-centered .timeline-entry .timeline-entry-inner .timeline-label {
  position: relative;
  color:#333;
  padding: 1.7em;
  margin-left: 73px;
  -webkit-background-clip: padding-box;
  -moz-background-clip: padding;
  background-clip: padding-box;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
}
 
 .timeline-centered .timeline-entry .timeline-entry-inner .timeline-label h4{ color:#333 !important;     font-weight: 600;}
.timeline-centered .timeline-entry .timeline-entry-inner .timeline-label.bg-pink {
  
}
.timeline-centered .timeline-entry .timeline-entry-inner .timeline-label.bg-pink:after {
  border-color: transparent #d54daf transparent transparent;
}
 
/* footer */
.copyright{ text-align:right; font-size:13px; padding:10px;}