a, #password-eye{cursor: pointer!important;}
a{color: #07cdae}

.page-title .page-title-icon{
  -webkit-box-shadow: 0px 3px 8.3px 0.7px rgb(7 205 174 / 35%);
    box-shadow: 0px 3px 8.3px 0.7px rgb(7 205 174 / 35%);
}

.content-text img{max-width: 100%!important;}

.auth .brand-logo {
  margin-bottom: 1rem;
}
.auth .brand-logo img {
  width: 100%;
}

table.dataTable{
  margin-bottom: 20pt!important;
}
table.dataTable tbody td{
  vertical-align: top!important;
  line-height: 20px!important;
}
table.dataTable tbody td.wordbreak{
    word-wrap: break-word;
    white-space: normal!important;
}


/* CUSTOM COLOR "WARNAWARNI */
.sidebar ul.warnawarni .nav-item:nth-child(1),
.sidebar ul.warnawarni .nav-item:nth-child(2),
table.warnawarni tr td:nth-child(2){
  background-color: #aee5e5;
}
.sidebar ul.warnawarni .nav-item:nth-child(3),
table.warnawarni tr td:nth-child(3){
  background-color: #ffeaa9;
}
.sidebar ul.warnawarni .nav-item:nth-child(4),
table.warnawarni tr td:nth-child(4){
  background-color: #f3c7e6;
}
.sidebar ul.warnawarni .nav-item:nth-child(5),
table.warnawarni tr td:nth-child(5){
  background-color: #98dfee;
}
.sidebar ul.warnawarni .nav-item:nth-child(6),
table.warnawarni tr td:nth-child(6){
  background-color: #e1cdf7;
}

.sidebar ul.warnawarni .nav-item.active{
  background-color: #30cdad;
}
.sidebar ul.warnawarni .nav-item.active > .nav-link .menu-title, .sidebar ul.warnawarni .nav-item.active > .nav-link i{
  color: #fff;
}
.sidebar ul.warnawarni .nav-profile{
  background-color: #fff!important;
}

.sidebar .nav .nav-item.active > .nav-link .menu-title,
.sidebar .nav .nav-item.active > .nav-link i{
  color: #07cdae;
}
.sidebar .nav .nav-item .nav-link i.menu-icon{
  color: #999;
}




.dataTables_wrapper label, .dataTables_info, .paginate_button{
    font-size: 0.875rem !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}
.dataTables_info{
    color: #ccc !important;
}



.dataTables_wrapper .dataTables_paginate .paginate_button{
    cursor: pointer !important;
    color: #07cdae !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover{
    background-color: rgba(254, 124, 150, 0.2) !important;
    background-image: none !important;
    border: 1px solid transparent !important;
    color: #07cdae !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current{
    background: -webkit-gradient(linear, left top, right top, from(#84d9d2), to(#07cdae)) !important;
    background: linear-gradient(to right, #84d9d2, #07cdae) !important;
    border: 0 !important;
    -webkit-transition: opacity 0.3s ease !important;
    transition: opacity 0.3s ease !important;
    color: #fff !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover{
    opacity: .8!important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled{
    color: #ccc !important;
    cursor: not-allowed!important
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover{
    background: transparent !important;
    color: #ccc !important;
}



.dataTables_length select{
    padding: .2375rem .45rem !important;
    border: 0 !important;
    outline: 1px solid #ebedf2 !important;
    color: #07cdae !important;
    margin: 0 .45rem;
}
.dataTables_wrapper .dataTables_filter input{
    padding: .6375rem .75rem !important;
    border: 1px solid #ebedf2;
    font-family: "ubuntu-regular", sans-serif;
    font-size: 0.8125rem;
    border-radius: 0;
    cursor: pointer !important;
}



.sidebar .nav .nav-item.nav-profile .nav-link .nav-profile-image,
.sidebar .nav .nav-item.nav-profile .nav-link .nav-profile-image img {
    width: 40px;
    height: 40px;
}
.sidebar .nav .nav-item.nav-profile .nav-link .nav-profile-text{
    margin-left: .5rem;
}


.loader {
	position: fixed;
    top: 0;
    display: none;
	width: 100%;
	height: 100%;
	text-align: center;
    /* background-color: #ee5253; */
    background: #FF416C;
    background: -webkit-linear-gradient(to right, #FF4B2B, #FF416C);
    background: linear-gradient(to right, #FF4B2B, #FF416C);
	color: #fff;
	opacity: .95;
    z-index: 99999999;
}


.spinner {
	width: 100px;
	height: 50px;
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	margin: auto;
	text-align: center;
  }
  .spinner .ball {
	width: 20px;
	height: 20px;
	background-color: #fff;
	border-radius: 50%;
	display: inline-block;
	-webkit-animation: motion 3s cubic-bezier(0.77, 0, 0.175, 1) infinite;
			animation: motion 3s cubic-bezier(0.77, 0, 0.175, 1) infinite;
  }
  .spinner p {
	color: #fff;
	margin-top: 5px;
	font-family: sans-serif;
	letter-spacing: 3px;
	font-size: 10px;
  }

  @-webkit-keyframes motion {
	0% {
	  -webkit-transform: translateX(0) scale(1);
			  transform: translateX(0) scale(1);
	}
	25% {
	  -webkit-transform: translateX(-50px) scale(0.3);
			  transform: translateX(-50px) scale(0.3);
	}
	50% {
	  -webkit-transform: translateX(0) scale(1);
			  transform: translateX(0) scale(1);
	}
	75% {
	  -webkit-transform: translateX(50px) scale(0.3);
			  transform: translateX(50px) scale(0.3);
	}
	100% {
	  -webkit-transform: translateX(0) scale(1);
			  transform: translateX(0) scale(1);
	}
  }

  @keyframes motion {
	0% {
	  -webkit-transform: translateX(0) scale(1);
			  transform: translateX(0) scale(1);
	}
	25% {
	  -webkit-transform: translateX(-50px) scale(0.3);
			  transform: translateX(-50px) scale(0.3);
	}
	50% {
	  -webkit-transform: translateX(0) scale(1);
			  transform: translateX(0) scale(1);
	}
	75% {
	  -webkit-transform: translateX(50px) scale(0.3);
			  transform: translateX(50px) scale(0.3);
	}
	100% {
	  -webkit-transform: translateX(0) scale(1);
			  transform: translateX(0) scale(1);
	}
  }


  /* .animate__animated{-webkit-animation-duration:var(--animate-duration);animation-duration:var(--animate-duration);-webkit-animation-fill-mode:both;animation-fill-mode:both} */
  @-webkit-keyframes zoomIn{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}@keyframes zoomIn{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}
  .animate__zoomIn{-webkit-animation-name:zoomIn;animation-name:zoomIn;-webkit-animation-duration:.2s;animation-duration:.2s;}


.vertical-alignment-helper {
    display:table;
    height: 100%;
    width: 100%;
    pointer-events:none; /* This makes sure that we can still click outside of the modal to close it */
}
.vertical-align-center {
    /* To center vertically */
    display: table-cell;
    vertical-align: middle;
    pointer-events:none;
}
.modal-content {
    /* Bootstrap sets the size of the modal in the modal-dialog class, we need to inherit it */
    width:inherit;
    max-width:inherit; /* For Bootstrap 4 - to avoid the modal window stretching full width */
    height:inherit;
    /* To center horizontally */
    margin: 0 auto;
    pointer-events: all;
}





  svg {
    width: 100px;
    display: block;
    margin: 40px auto 10px;
  }
  .path {
    stroke-dasharray: 1000;
    stroke-dashoffset: 0;
  }
  .path.circle {
    -webkit-animation: dash 0.9s ease-in-out;
    animation: dash 0.9s ease-in-out;
  }
  .path.line {
    stroke-dashoffset: 1000;
    -webkit-animation: dash 0.9s 0.35s ease-in-out forwards;
    animation: dash 0.9s 0.35s ease-in-out forwards;
  }
  .path.check {
    stroke-dashoffset: -100;
    -webkit-animation: dash-check 0.9s 0.35s ease-in-out forwards;
    animation: dash-check 0.9s 0.35s ease-in-out forwards;
  }
  @-webkit-keyframes dash {
    0% {
      stroke-dashoffset: 1000;
    }
    100% {
      stroke-dashoffset: 0;
    }
  }
  @keyframes dash {
    0% {
      stroke-dashoffset: 1000;
    }
    100% {
      stroke-dashoffset: 0;
    }
  }
  @-webkit-keyframes dash-check {
    0% {
      stroke-dashoffset: -100;
    }
    100% {
      stroke-dashoffset: 900;
    }
  }
  @keyframes dash-check {
    0% {
      stroke-dashoffset: -100;
    }
    100% {
      stroke-dashoffset: 900;
    }
  }


  select.form-control{
      color: #495057!important
  }