.card-header-custom{
  font-weight: 600;
  text-transform: uppercase;
  background: #1e2a39 !important;
  color: #FFf;
}
.custom-nav{
  margin-bottom: 10px !important;
}
.custom-nav li a{
  padding: 15px;
  background: var(--lightgrey-color);
  color: #fff;
  font-size: 14px;
  text-transform: uppercase;
  border-top-right-radius: 5px;
  border-top-left-radius: 5px;
  margin-left: 1px;
  margin-right: 1px;
  display: inline-block;
}
.custom-nav li.active a{
  padding: 15px;
  background: var(--lightpurple-color);;
  color: #fff;
  font-size: 14px;
  text-transform: uppercase;
  border-top-right-radius: 5px;
  border-top-left-radius: 5px;
}
.color-green{
  color:#00b297;
}
.btn-xs{
  font-size: 12px !important;
  padding: 5px 7px !important;
}
.bg-pink {
    background-color: #ee2078 !important;
}
.bg-info {
    background-color: #3392e6 !important;
}
.br-section-wrapper {
    padding: 25px !important;
}
.top20{
  margin-top: 20px;
}
.bg-teal {
    background-color: #808ac3 !important;
}
@media (max-width:1515px){
  .pd-25 {
    padding: 15px 20px !important;
  }
  .tx-60{
    font-size: 42px !important;
  }
  .tx-24{
    font-size: 20px !important;
  }
  .tx-11 {
    white-space: nowrap;
  }
}


/* crafted by DIDIK */


/* webfont */
@import url('https://fonts.googleapis.com/css?family=Merriweather:300,300i,400,400i|Montserrat:300,400,500,600,700');


/* CSS variables - color */
:root {
    --thin-color: #f8f8fb;
    --lightest-color: #e8e9f2;
    --purple-color: #5e2987;
    --lightpurple-color: #863dce;
    --shade-color: #777; 
    --pink-color: #ff66c7; 
    --blue-color: #1acdd4;
    --lightblue-color: #94fbff;
    --white-color: #fff;
    --lighttosca-color: #79ecc3; 
    --tosca-color: #4ac497;
    --lightgrey-color: #adb5bd;
    --grey-color: #666;
    --darkgrey-color: #333;
    --system-font: -apple-system, BlinkMacSystemFont, "Segoe UI",Helvetica, Arial, Ubuntu, sans-serif,"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    --sans-font: 'Montserrat',sans-serif;
    --serif-font: 'Merriweather',serif;
    --input-padding-x: .2rem;
    --input-padding-y: .2rem;
}

/* global */
body { background: var(--lightest-color)!important;}
.btn { border: none !important; transition: none !important; }
.progress-bar { padding: 10px 20px;}

/* btn */
.outline-white { border: 1px solid var(--white-color) !important; }
.outline-blue { border: 1px solid var(--blue-color) !important; }
.btn-one { background: var(--blue-color) !important; border-color: var(--blue-color) !important; }
.btn-two { background: var(--blue-color) !important; border-color: var(--blue-color) !important; }
.btn-three { background: var(--blue-color) !important; border-color: var(--blue-color) !important; }
.btn-four { background: var(--blue-color) !important; border-color: var(--blue-color) !important; }
.btn-five { background: var(--blue-color) !important; border-color: var(--blue-color) !important; }
.btn-teal, .btn-teal:focus, .btn-teal:hover, .btn-teal.focus {
    background: rgb(134,61,206);
    background: -moz-linear-gradient(225deg, rgba(134,61,206,1) 0%, rgba(212,77,195,1) 100%) !important;
    background: -webkit-linear-gradient(225deg, rgba(134,61,206,1) 0%, rgba(212,77,195,1) 100%) !important;
    background: linear-gradient(225deg, rgba(134,61,206,1) 0%, rgba(212,77,195,1) 100%) !important; 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#863dce",endColorstr="#d44dc3",GradientType=1); 
    box-shadow: none !important;
}

/* button modify */
.bg-success, .btn-success { background: var(--tosca-color) !important; }
.btn-lightgrey { background: var(--lightgrey-color) !important; }
.bg-info, .btn-info { background: var(--blue-color) !important; }
.bg-warning, .btn-warning { background: var(--pink-color) !important; }
.bg-secondary, .btn-secondary { background:var(--lightpurple-color) !important; }
.bg-danger, .btn-danger { background: var(--purple-color) !important; }
.btn-outline-primary {
  color: var(--lightpurple-color) !important;
  background-color: transparent;
  background-image: none;
  border-color: none !important;
}
.btn-outline-primary:hover {
  color: var(--white-color) !important;
  background-color: var(--lightpurple-color) !important;
  border-color: none !important;
}
.btn-back { background: var(--lightgrey-color) !important;}
.btn-back:hover { background: var(--grey-color) !important; color: var(--white-color) !important; }


/* color */
.tx-darkgrey { color: var(--darkgrey-color);}
.tx-blue { color: var(--blue-color) !important; }
.tx-grey { color: var(--grey-color) !important; }
.tx-pink { color: var(--pink-color) !important; }
.tx-lightpurple { color: var(--lightpurple-color) !important; }
.text-info { color: var(--blue-color) !important; }
.tx-danger { color: var(--blue-color) !important; }
.tx-shade { color: var(--shade-color) !important; }

/* bg color */
.bg-purple { background: var(--purple-color)!important; }
.bg-blue, .bg-info { background: var(--blue-color)!important; }
.bg-transparent { background: none !important; }

/* table */
.table .thead-teal > tr > th, .table .thead-teal > tr > td {
    background: var(--blue-color) !important;
}
.table .thead-colored > tr > th, .table .thead-colored > tr > td {
    color: rgba(255, 255, 255, 1) !important
}

/* pagination */
.pagination-teal .active .page-link, .pagination-teal .active .page-link:hover, .pagination-teal .active .page-link:focus {
    background: var(--lightgrey-color) !important;
}

/* typography */
.tx-thin { font-weight: 100 !important; }
.tx-light { font-weight: 300 !important; }
.tx-semibold { font-weight: 500 !important;}
.tx-bold { font-weight: 600 !important; }
.tx-sans { font-family: var(--sans-font)!important; }
.tx-med { font-size: 30px !important; }
.tx-title, .tx-gray-800 { 
    font-size: 36px !important;
    line-height: 44px !important;
    color: var(--darkgrey-color) !important;
    font-weight: 300 !important;
    text-transform: capitalize !important;
}
h2 { font-size: 24px !important; color: var(--grey-color)!important;  font-weight: 400 !important; }


.tx-link-light {
    color: var(--white-color);
    background: none !important;
}
.tx-link-light:hover {
    color: var(--white-color)!important;
    text-decoration: underline;
}

.tx-link-dark {
    color: var(--lightpurple-color);
    background: none !important;
}
.tx-link-dark:hover {
    color: var(--lightpurple-color)!important;
    text-decoration: underline;
}

/* opacity */
.opacity1 { opacity: 0.1; }
.opacity2 { opacity: 0.2; }
.opacity3 { opacity: 0.3; }
.opacity4 { opacity: 0.4; }
.opacity5 { opacity: 0.5; }
.opacity6 { opacity: 0.6; }
.opacity7 { opacity: 0.7; }
.opacity8 { opacity: 0.8; }
.opacity9 { opacity: 0.9; }

.gradient-one {
    background: rgb(134,61,206);
    background: -moz-linear-gradient(225deg, rgba(134,61,206,1) 0%, rgba(212,77,195,1) 100%);
    background: -webkit-linear-gradient(225deg, rgba(134,61,206,1) 0%, rgba(212,77,195,1) 100%);
    background: linear-gradient(225deg, rgba(134,61,206,1) 0%, rgba(212,77,195,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#863dce",endColorstr="#d44dc3",GradientType=1);
}

.gradient-two {
    background: rgb(26,205,212);
    background: -moz-linear-gradient(45deg, rgba(26,205,212,1) 0%, rgba(134,61,206,1) 100%);
    background: -webkit-linear-gradient(45deg, rgba(26,205,212,1) 0%, rgba(134,61,206,1) 100%);
    background: linear-gradient(45deg, rgba(26,205,212,1) 0%, rgba(134,61,206,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#1acdd4",endColorstr="#863dce",GradientType=1);
}

.gradient-three {
    background: rgb(106,179,204);
    background: -moz-linear-gradient(90deg, rgba(106,179,204,1) 0%, rgba(114,144,205,1) 100%);
    background: -webkit-linear-gradient(90deg, rgba(106,179,204,1) 0%, rgba(114,144,205,1) 100%);
    background: linear-gradient(90deg, rgba(106,179,204,1) 0%, rgba(114,144,205,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#6ab3cc",endColorstr="#7290cd",GradientType=1);
}

.gradient-four {
    background: rgb(116,134,205);
    background: -moz-linear-gradient(90deg, rgba(116,134,205,1) 0%, rgba(124,100,205,1) 100%);
    background: -webkit-linear-gradient(90deg, rgba(116,134,205,1) 0%, rgba(124,100,205,1) 100%);
    background: linear-gradient(90deg, rgba(116,134,205,1) 0%, rgba(124,100,205,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#7486cd",endColorstr="#7c64cd",GradientType=1);
}

.gradient-five {
    background: rgb(124,100,205);
    background: -moz-linear-gradient(90deg, rgba(124,100,205,1) 0%, rgba(133,65,206,1) 100%);
    background: -webkit-linear-gradient(90deg, rgba(124,100,205,1) 0%, rgba(133,65,206,1) 100%);
    background: linear-gradient(90deg, rgba(124,100,205,1) 0%, rgba(133,65,206,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#7c64cd",endColorstr="#8541ce",GradientType=1);
}

.gradient-six {
    background: rgb(133,65,206);
    background: -moz-linear-gradient(90deg, rgba(133,65,206,1) 0%, rgba(134,61,206,1) 100%);
    background: -webkit-linear-gradient(90deg, rgba(133,65,206,1) 0%, rgba(134,61,206,1) 100%);
    background: linear-gradient(90deg, rgba(133,65,206,1) 0%, rgba(134,61,206,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#8541ce",endColorstr="#863dce",GradientType=1);
}

.gradient-seven {
    background: rgb(203,82,178);
    background: -moz-linear-gradient(90deg, rgba(203,82,178,1) 0%, rgba(170,70,165,1) 100%);
    background: -webkit-linear-gradient(90deg, rgba(203,82,178,1) 0%, rgba(170,70,165,1) 100%);
    background: linear-gradient(90deg, rgba(203,82,178,1) 0%, rgba(170,70,165,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#cb52b2",endColorstr="#aa46a5",GradientType=1);
}

.gradient-eight {
    background: rgb(170,70,165);
    background: -moz-linear-gradient(90deg, rgba(170,70,165,1) 0%, rgba(138,58,152,1) 100%);
    background: -webkit-linear-gradient(90deg, rgba(170,70,165,1) 0%, rgba(138,58,152,1) 100%);
    background: linear-gradient(90deg, rgba(170,70,165,1) 0%, rgba(138,58,152,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#aa46a5",endColorstr="#8a3a98",GradientType=1);
}

.gradient-nine {
    background: rgb(138,58,152);
    background: -moz-linear-gradient(90deg, rgba(138,58,152,1) 0%, rgba(110,47,141,1) 100%);
    background: -webkit-linear-gradient(90deg, rgba(138,58,152,1) 0%, rgba(110,47,141,1) 100%);
    background: linear-gradient(90deg, rgba(138,58,152,1) 0%, rgba(110,47,141,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#8a3a98",endColorstr="#6e2f8d",GradientType=1);
}

.gradient-ten {
    background: rgb(110,47,141);
    background: -moz-linear-gradient(90deg, rgba(110,47,141,1) 0%, rgba(94,41,135,1) 100%);
    background: -webkit-linear-gradient(90deg, rgba(110,47,141,1) 0%, rgba(94,41,135,1) 100%);
    background: linear-gradient(90deg, rgba(110,47,141,1) 0%, rgba(94,41,135,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#6e2f8d",endColorstr="#5e2987",GradientType=1);
}

/* modify */
.alert-danger { background: var(--purple-color) !important; border: none !important; color: var(--white-color) !important; }

@-webkit-keyframes autofill {
    to {
        color: var(--white-color);
        background: transparent;
    }
}

input:-webkit-autofill {
    -webkit-animation-name: autofill;
    -webkit-animation-fill-mode: both;
}

.small-link:hover { color: var(--purple-color); }


/* login */
.login-wrapper { background:none; padding: 20px 40px; }
.login-container { background: var(--white-color); padding: 40px;}
.reset-box { background: var(--lightgrey-color) !important;}


/* gradient animation */
.login-box {
	width: 100%;
	height: 100%;
	color: #fff;
	background: linear-gradient(45deg, #1acdd4, #863dce, #63289e, #d94ba4, #98ebcf);   
	background-size: 300% 300%;
	-webkit-animation: Gradient 20s ease infinite;
	-moz-animation: Gradient 20s ease infinite;
	animation: Gradient 20s ease infinite;
}

@-webkit-keyframes Gradient {
	0% {
		background-position: 0% 50%
	}
	50% {
		background-position: 100% 50%
	}
	100% {
		background-position: 0% 50%
	}
}

@-moz-keyframes Gradient {
	0% {
		background-position: 0% 50%
	}
	50% {
		background-position: 100% 50%
	}
	100% {
		background-position: 0% 50%
	}
}

@keyframes Gradient {
	0% {
		background-position: 0% 50%
	}
	50% {
		background-position: 100% 50%
	}
	100% {
		background-position: 0% 50%
	}
}

/* floating labels */
.has-float-label {
  display: block;
  position: relative;
}
.has-float-label label, .has-float-label > span {
  position: absolute;
  left: 0;
  top: 0;
  cursor: text;
  font-size: 75%;
  opacity: 1;
  -webkit-transition: all .2s;
          transition: all .2s;
  top: -.5em;
  left: 0.75rem;
  z-index: 3;
  line-height: 1;
  padding: 0 1px;
}
.has-float-label label::after, .has-float-label > span::after {
  content: " ";
  display: block;
  position: absolute;
  top: 50%;
  left: -.2em;
  right: -.2em;
  z-index: -1;
}
.has-float-label .form-control {
    background: none !important;
    color: var(--white-color)!important;
}
.has-float-label .form-control::-webkit-input-placeholder {
  opacity: 0.6;
  -webkit-transition: all .2s;
          transition: all .2s;
  color: var(--white-color) !important;
}
.has-float-label .form-control::-moz-placeholder {
  opacity: 0.6;
  transition: all .2s;
  color: var(--white-color) !important;
}
.has-float-label .form-control:-ms-input-placeholder {
  opacity: 0.6;
  transition: all .2s;
  color: var(--white-color) 
}
.has-float-label .form-control::placeholder {
  opacity: 0.6;
  -webkit-transition: all .2s;
          transition: all .2s;
  color: var(--white-color) 
}

.has-float-label .form-control:placeholder-shown:not(:focus)::-webkit-input-placeholder {
  opacity: 0;
}
.has-float-label .form-control:placeholder-shown:not(:focus)::-moz-placeholder {
  opacity: 0;
}
.has-float-label .form-control:placeholder-shown:not(:focus):-ms-input-placeholder {
  opacity: 0;
}
.has-float-label .form-control:placeholder-shown:not(:focus)::placeholder {
  opacity: 0;
}
.has-float-label .form-control:placeholder-shown:not(:focus) + * {
  font-size: 120%;
  opacity: .5;
  top: .6em;
}

.input-group .has-float-label {
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  margin-bottom: 0;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.input-group .has-float-label .form-control {
  width: 100%;
  border-radius: 0.25rem;
}
.input-group .has-float-label:not(:last-child), .input-group .has-float-label:not(:last-child) .form-control {
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
  border-right: 0;
}
.input-group .has-float-label:not(:first-child), .input-group .has-float-label:not(:first-child) .form-control {
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
}
.input-group-addon { background: none !important; color: var(--blue-color) !important; }

/* side bar */
.sidebar-label { opacity: 1 !important; }
.br-sideleft { background: var(--white-color)!important; top: 25px !important; }
.br-menu-sub { background: var(--blue-color)!important; }
.br-menu-sub .nav-link { color: var(--white-color) !important; }
.br-menu-sub .nav-link::before { opacity: 1 !important; }
.br-menu-sub .nav-link.active::before { background: var(--white-color)!important; }
.br-menu-link { color: var(--shade-color) !important; transition: none !important; }
.br-menu-link.active, .show-sub { 
    background: rgb(255,102,199) !important;
    background: -moz-linear-gradient(45deg, rgba(255,102,199,1) 0%, rgba(94,41,135,1) 100%) !important;
    background: -webkit-linear-gradient(45deg, rgba(255,102,199,1) 0%, rgba(94,41,135,1) 100%) !important;
    background: linear-gradient(45deg, rgba(255,102,199,1) 0%, rgba(94,41,135,1) 100%) !important;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ff66c7",endColorstr="#5e2987",GradientType=1);
    color: var(--white-color) !important;
}
.br-menu-link:hover, .br-menu-link:focus { background: var(--blue-color)!important; color: var(--white-color) !important; transition: none !important; }
.br-pageheader { margin-top: -20px; }
.br-logo, .navicon-left { border: none !important; }
.user-profile-nav .icon { color: var(--blue-color) !important; }
.menu-item-icon, .menu-item-label, .menu-item-arrow { transition: none !important; }


.card-header-custom { background: var(--blue-color) !important; }
.br-chartist .ct-series-a .ct-point, .br-chartist .ct-series-a .ct-line, .br-chartist .ct-series-a .ct-bar, .br-chartist .ct-series-a .ct-slice-donut { stroke: var(--purple-color) !important; }


/* fix auto fill form */
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
   -webkit-text-fill-color: #333; 
}

.has-float-label input:-webkit-autofill,
.has-float-label input:-webkit-autofill:hover, 
.has-float-label input:-webkit-autofill:focus
.has-float-label textarea:-webkit-autofill,
.has-float-label textarea:-webkit-autofill:hover
.has-float-label textarea:-webkit-autofill:focus,
.has-float-label select:-webkit-autofill,
.has-float-label select:-webkit-autofill:hover,
.has-float-label select:-webkit-autofill:focus {
   -webkit-text-fill-color: #fff !important; background: none !important;
}

@media (max-width: 991px) {
    .br-sideleft { margin-top: 35px !important; }
}