/***
=======================
	Default layout
=======================
***/
#sidebar-wrapper .sidebar-heading{
	background-image:linear-gradient(45deg, #737ce1, #72c9e5);
}
.list-group-header{
	background:#011428;
	border-bottom:1px solid #eee;
	padding:10px 15px;
	margin-bottom:5px;
	/*box-shadow:4px 3px 5px rgb(133 130 130 /.15);*/
	font-weight:600;
	font-size:18px;
	color:#94abcd;
}
.list-group-flush .list-group-item{
	background:#fff;
	border:1px solid #f8f8f8;
	border-radius:10px;
	padding:10px 15px;
	margin:0 10px 6px !important;
	max-width:220px;
	box-shadow:4px 3px 5px rgb(133 130 130 /.15);	
	color:#0e2e4e;
}
.list-group a[aria-expanded="true"]{
	background:#eee !important;
	border:1px solid #dedede;
}

.list-group .collapse.show .list-group-item{
	opacity:1;
	background:#fcfcfc;
	transition:all ease .3s;
	color:#222;
	position:relative;
}
.list-group .collapse .list-group-item:hover{
	background:#eee;
}
.custom-navbar{
	background-image:linear-gradient(45deg, #737ce1, #72c9e5);	
}
/***
=======================
	Button css
=======================
***/
.btn-primary{
	background-image:linear-gradient(0deg, #4d54a7, #72c9e5);
	border:0;
	border-radius:20px;
	padding:6px 20px;
	text-transform:uppercase;
	font-weight:600;
}
/***
=======================
	Login page
=======================
***/
.login-card{
	border-radius:15px;
}
@media (max-width:414px){
	.login-card h3{
		font-size:18px;
	}
}
/***
=======================
	Dashboard
=======================
***/
.news-update-grid{
	margin:0;
	padding:0;
}
.news-update-grid li{
	list-style:none;
	padding:10px;
	padding-left:10px;
	margin-bottom:5px;
	background:#f7f7f7;
}
.news-update-grid li:nth-child(even){
	background:#efefef;
}

/***
=======================
	BonusDetail page
=======================
***/

.custom-tooltip{
  position: relative;
  display:inline-block;
}
.tooltip__item {
  position: absolute;
  min-width: 200px;
  padding:10px;
  visibility: hidden;
  opacity: 0;
  background:#222;
  transition: all 0.25s cubic-bezier(0, 0, 0.2, 1);
  color: #fff;
  font-size:13px;
  z-index: 4;
}
.tooltip__item:after {
  content: "";
  display: block;
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
}
.tooltip__item ul{
	margin:0;
	padding:0;
}
.tooltip__item li{
	display:block;
	list-style:none;
	color:#cbcbcb;
}
.tooltip__item li b{
	color:#fff;
}
.tooltip__initiator {
  cursor: pointer;
  z-index: 5;
}
.custom-tooltip[data-direction=left] .tooltip__initiator:hover ~ .tooltip__item {
  transform: translate3d(0, -50%, 0);
  visibility: visible;
  opacity: 1;
}
.custom-tooltip[data-direction=left] .tooltip__item {
  top: 50%;
  right: calc(100% + 1em);
  transform: translate3d(15px, -50%, 0);
}
.custom-tooltip[data-direction=left] .tooltip__item:after {
  top: 50%;
  right: -0.5em;
  transform: translate3d(0, -50%, 0);
  border-width: 0.5em 0 0.5em 0.5em;
  border-color: transparent transparent transparent white;
  -webkit-filter: drop-shadow(1px 2px 1px #bcbcbc);
  filter: drop-shadow(1px 2px 1px #bcbcbc);
}
.custom-tooltip[data-direction=bottom] .tooltip__initiator:hover ~ .tooltip__item {
  transform: translate3d(-50%, 0, 0);
  visibility: visible;
  opacity: 1;
}
.custom-tooltip[data-direction=bottom] .tooltip__item {
  top: calc(100% + 1em);
  left: 50%;
  transform: translate3d(-50%, -15px, 0);
}
.custom-tooltip[data-direction=bottom] .tooltip__item:after {
  top: -0.5em;
  left: 50%;
  transform: translate3d(-50%, 0, 0);
  border-width: 0 0.5em 0.5em 0.5em;
  border-color: transparent transparent white transparent;
  -webkit-filter: drop-shadow(1px 2px 1px #bcbcbc);
  filter: drop-shadow(1px -1px 1px #bcbcbc);
}

.fa.fa-info-circle {
  font-size: 38px;
  color: #21606b;
}
.custom-tooltip[data-direction=top] .tooltip__initiator:hover ~ .tooltip__item {
  transform: translate3d(-50%, 0, 0);
  visibility: visible;
  opacity: 1;
}
.custom-tooltip[data-direction=top] .tooltip__item {
  bottom:calc(30% + 1em);
  left:50px;
  transform: translate3d(-50%, -15px, 0);

}
.custom-tooltip[data-direction=top] .tooltip__item:after {
  bottom: -0.5em;
  left:calc(60% - 50px);
  transform:rotate(180deg);
  border-width: 0 0.5em 0.5em 0.5em;
  border-color: transparent transparent #222 transparent;
}