/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : Nov 9, 2021, 1:42:38 PM
    Author     : BAPPEDA SKY ONE
*/
:root {
  --card-bg: #fff;
  --bluegray: #b2bfcd;
  --lightbluegray: #f6f9fc;
  --toolbar-bg: #fff;
  --success-border: var(--success);
  --info-border: var(--info);
  --warning-border: var(--warning);
  --danger-border: var(--danger);
  --login-main-bg: #0b1c32;
  --border: #cdcdcd;
  --white: #fff;
  --white-offset: #fefefe;
  --focus: #39f;
  --focus-shadow: 0 0 0 0.2rem #eaeaea;
  --toggle-color: #fff;
  --atum-sidebar-bg: #fff;
  --atum-sidebar-font-color: #132f53;
  --atum-sidebar-link-color: #132f53;
  --atum-bg-light: #f0f4fb;
  --atum-text-light: #fff;
  --atum-special-color: #001b4c;
  --atum-link-color: #073c64;
  --atum-link-hover-color: #173a65;
  --atum-contrast: #2a69b8;
  --atum-bg-dark-5: #d9d9d9;
  --atum-bg-dark-10: #cacaca;
  --atum-bg-dark-20: #acacac;
  --atum-bg-dark-30: #818b93;
  --atum-bg-dark-40: #526982;
  --atum-bg-dark-50: #284971;
  --atum-bg-dark-70: #0d1e3a;
  --atum-bg-dark-80: #081123;
  --atum-bg-dark-90: #03050c;
  --primary: #132f53;
  --secondary: #495057;
  --success: #2f7d32;
  --info: #2a69b8;
  --warning: #ffb514;
  --danger: #c52827;
  --light: #f8f9fa;
  --dark: #212529;
  --atum-link-color: #073c64;
  --atum-text-dark: #495057;
  --atum-bg-dark: #073c64;
  --action: #132f53;
  --error: #3b0d0c;
  --alert-success: #0f2f21;
  --font-sans-serif: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
  
  --atum-toogle-link-color: #1A2C43;
  --template-bg-dark-50: #675949;
  --template-bg-dark-60: #675949;
  --body-font-family: var(--font-sans-serif);
  --body-font-size: 0.875rem;
  --body-font-weight: 400;
  --body-line-height: 1.5;
  --body-color: var(--template-text-dark);
  --body-bg: #fff;
}

	


body {
  margin: 0;
  font-family: var(--font-sans-serif);
  /*font-size: 0.875rem; *//*kecilkan*/
  font-weight: 400;
  line-height: 1.5;
  color: var(--template-text-dark);
  color: #675949;
  background-color: #fff;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  /*background-image: url(../images/background/noisy_grid-2-2.png) !important;*/
}

body.admin {
  /*background-color: #f0f2f5;e9e7f7*/
  /*background-color: #e9e7f7;*/
  /*background: url('../images/background/bg_bappeda.png')no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;*/
  background-color: #fbf8f4;
  /*background: url('../images/background/3040791.jpg')no-repeat center center fixed;*/
} 
body.login {
  /*background-color: #f0f2f5;e9e7f7*/
  background-color: #e9e7f7;
  background: url('../images/background/gerabah2.jpg')no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  
}
/* ADMIN LOGIN PAGE */
.view-login .sidebar-wrapper,
.view-login .header .logo,
.task-logout .sidebar-wrapper,
.task-logout .header .logo {
  flex: 1 0 500px;
}
@media (max-width: 767.98px) {
.task-logout .sidebar-wrapper, .view-login .sidebar-wrapper {
    order: 2;
    margin-bottom: 0;
}
.task-logout .container-main, .view-login .container-main {
       padding-bottom: 20px;
}
}

.view-login .sidebar-wrapper{   
  width: 100%;
  height: 100%;
  background: url('../images/background/mbatik.jpg');
  left: 0;
  top: 0;
  bottom: 0;
  position: relative;
  
}
.view-login .sidebar-wrapper:before{
    content: '';
    background: linear-gradient(45deg, rgba(245, 66, 102, 0.9), rgba(56, 88, 249, 0.9));
    background: linear-gradient(45deg, rgba(103, 89, 73, 0.9) 0%, rgba(250, 240, 236, 0.9) 100%) transparent;
    position: absolute;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
}
.com_login .sidebar-wrapper .main-brand {
    flex: 1;
    flex-basis: auto;
    margin-top: 100px;
    text-align: center;
    z-index: 1010;
}

.task-logout .login img, .view-login .login img {
    max-height: 10.6rem;
}

.task-logout .h1, .task-logout h1, .view-login .h1, .view-login h1 {
  color: #FBF8F4;
  margin-bottom: .25rem;
  text-align: center;
}
.header {
  z-index: 1020;
  color: #fff;  
  /*background: #ffffff;*/
  background: linear-gradient(45deg, #f33057, #3858f9);
  background: linear-gradient(45deg, rgba(25, 79, 184, 0.9) 0%, rgba(5, 198, 209, 0.9) 100%) transparent;
  background: linear-gradient(45deg, rgba(103, 89, 73, 0.9) 0%, rgba(54, 34, 4, 0.9) 100%) transparent;
  background-color: #675949;
  background-image: url(../images/background/bg.png); 
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    background-position: 0 0;
}
/*
.header .logo {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    width: 18rem;
    height: 100%;
    padding: 12px 5px;
    overflow: hidden;
    background-color: #fff;
    transition: all 0.3s ease-in-out;
    border-bottom: 1px solid #dee4ec;
    
    -webkit-box-shadow: 0px -8px 14.72px 1.28px rgba(159, 150, 226, 0.7);
            box-shadow: 0px -8px 14.72px 1.28px rgba(159, 150, 226, 0.7);
    
}

.header .logo svg,
.header .logo img {
  width: 120px;
  height: auto;
  margin: 0 0.35rem;
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: left center;
     object-position: left center;
}
*/

/*header new untuk logo ikut di sidebar wrapper*/
.headernew .logo {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  width: 18rem;
  height: 69px;
  padding: 12px 5px;
  overflow: hidden;
  background-color: #ffffff;
  transition: all 0.3s ease-in-out;
  border-bottom: 1px solid #dee4ec;
  justify-content: center;
}
.headernew .logo.small {
  width: 5rem;
  transition: all 0.3s ease-in-out;
  justify-content: center;
}
.headernew .logo.small svg:not(.logo-collapsed),
.headernew .logo.small img:not(.logo-collapsed) {
  display: none;
}
.headernew .logo.small svg.logo-collapsed,
.headernew .logo.small img.logo-collapsed {
  display: inline-block;
  width: 20px;
  height: 20px;
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: center center;
     object-position: center center;
}
.headernew .logo svg,
.headernew .logo img {
  width: 120px;
  height: 30px;
  margin: 0 0.35rem;
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: left center;
     object-position: left center;
}
[dir=rtl] .headernew .logo svg,
[dir=rtl] .headernew .logo img {
  -o-object-position: right center;
     object-position: right center;
}
.headernew .logo svg.logo-collapsed,
.headernew .logo img.logo-collapsed {
  display: none;
}
.header-item-content {
  display: flex;
  align-items: center;
  line-height: 1rem;
  color: #fff;
  background-color: var(--template-bg-dark-60);
  border-radius: 22px;
  -webkit-padding-end: 4px;
          padding-inline-end: 4px;
  background: none !important;
  border: 1px solid rgba(255, 255, 255, 0.2);
}
.header-item-content a,
.header-item-content button {
  color: #fff;
  text-decoration: none;
}
.header-item-content a {
  display: flex;
}
.header-item-content:not(.no-link):not(.joomlaversion):hover {
  background-color: var(--template-bg-dark-50);
}
.header-item-content.joomlaversion {
  color: var(--bluegray);
  background-color: transparent;
  border: none;
}
.header-item-content.joomlaversion .header-item-text {
  -webkit-padding-end: 12px;
          padding-inline-end: 12px;
}

@media (max-width: 767.98px) {
  .header-items {
    position: fixed;
    bottom: 0;
    flex-direction: row-reverse;
    width: 100%;
    padding: 10px 0;
    margin: 0;
    background: #000;
    z-index: 1020;
  }
.header-items .icon-angle-down,
.header-items .fa-angle-down {
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
  }

  .header-item-more.active .header-more-menu {
    left: 0;
  }
  [dir=rtl] .header-item-more.active .header-more-menu {
    right: 0;
    left: auto;
  }
  .header-item-more .header-item-content {
    background: transparent;
  }

  .header-more-menu {
    top: auto;
    bottom: 100%;
  }
}
.sidebar-toggle{
    margin-left: 1.5rem;
}
.sidebar-wrapper {
    min-height: calc(100vh - 0px);
    background: #fff;
    -webkit-box-shadow: 0px 8px 14.72px 1.28px rgba(159, 150, 226, 0.7);
    box-shadow: 0px 8px 14.72px 1.28px rgba(103, 89, 73, 0.7);
}
.sidebar-wrapper .item a, .sidebar-wrapper .item .menu-dashboard, .sidebar-wrapper .item .menu-quicktask {
    color: #2d3144;
    text-decoration: none;
}
.sidebar-wrapper .item a:hover {
  color: var(--template-text-light);
  text-decoration: none;
  background-color: var(--template-bg-dark-65);
  background: linear-gradient(
    45deg, #f54266, #3858f9);
  background: linear-gradient(45deg, rgba(25, 79, 184, 0.9) 0%, rgba(5, 198, 209, 0.9) 100%) transparent;
  background: #675949;
    box-shadow: 0 6px 14px 2px rgb(0 0 0 / 10%);
    /*border-radius: 0 100px 100px 0;
    margin-right: 10px;*/
}

.sidebar-wrapper .item .menu-dashboard:hover a:hover,
.sidebar-wrapper .item .menu-quicktask:hover a:hover{
  color: var(--template-text-light);
  text-decoration: none;
  background-color: var(--template-bg-dark-65);
  background: linear-gradient(
    45deg, #f54266, #3858f9);
  background: linear-gradient(45deg, rgba(25, 79, 184, 0.9) 0%, rgba(5, 198, 209, 0.9) 100%) transparent;
    box-shadow: 0 6px 14px 2px rgb(0 0 0 / 10%);
    /*border-radius: 0px;
    margin-right: 0px;*/
     background: #675949;
}
.sidebar-wrapper .sidebar-toggle {
  background: #dee4ec;
}
.main-nav ul {
  width: 100%;
  padding: 0;
  background-color: #fff;
  
}

.main-nav a.mm-active {
  background-color: var(--template-bg-dark-70);
  color: #fff;
  background: linear-gradient(
    45deg, #f54266, #3858f9);
  background: linear-gradient(45deg, rgba(25, 79, 184, 0.9) 0%, rgba(5, 198, 209, 0.9) 100%) transparent;
    box-shadow: 0 6px 14px 2px rgb(0 0 0 / 10%);
    /*border-radius: 0 100px 100px 0;
    margin-right: 10px;*/
     background: #675949;
}
.main-nav .menu-dashboard a.mm-active {
  background-color: var(--template-bg-dark-70);
  color: #fff;
  background: linear-gradient(
    45deg, #f54266, #3858f9);
  background: linear-gradient(45deg, rgba(25, 79, 184, 0.9) 0%, rgba(5, 198, 209, 0.9) 100%) transparent;
    box-shadow: 0 6px 14px 2px rgb(0 0 0 / 10%);
    /*border-radius: 0px;
    margin-right: 0px;*/
     background: #675949;
}
.main-nav a.mm-active + .menu-quicktask {
  background-color: var(--template-bg-dark-60);
  color: #fff;
  background: linear-gradient(
    45deg, #f54266, #3858f9);
  background: linear-gradient(45deg, rgba(25, 79, 184, 0.9) 0%, rgba(5, 198, 209, 0.9) 100%) transparent;
    box-shadow: 0 6px 14px 2px rgb(0 0 0 / 10%);
     background: #675949;
}

.main-nav .divider {
  height: 1px;
  margin: 0 0 0 48px;
  list-style: none;
  background-color: #ecedf2;
}
/*
.sidebar-wrapper {
  background: linear-gradient(45deg, rgba(245, 66, 102, 0.8), rgba(56, 88, 249, 0.8));
  width: 100%;
  height: 100%;
  background: url('../images/background/sidebar-1.jpg');
  left: 0;
  top: 0;
  bottom: 0;
  position: relative;
}
.sidebar-wrapper:before {
    content: '';
    background: linear-gradient(45deg, rgba(245, 66, 102, 0.9), rgba(56, 88, 249, 0.9));
    position: absolute;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0; 
}
*/

.com_cpanel:after {
    content: "";
    height: 220px;
    /*background: linear-gradient(45deg, #f33057, #3858f9);
    background: linear-gradient(45deg, rgba(25, 79, 184, 0.9) 0%, rgba(5, 198, 209, 0.9) 100%) transparent;
    background: linear-gradient(45deg, rgba(103, 89, 73, 0.9) 0%, rgba(250, 240, 236, 0.9) 100%) transparent;
    background: linear-gradient(45deg, rgba(103, 89, 73, 0.9) 0%, rgba(54, 34, 4, 0.9) 100%) transparent;*/
    background-color: #fff;
    position: absolute;
    z-index: -1;
    width: 100%;
    top: 0;
    left: 0;
    background-image: url(../images/background/bg.png); 
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    background-position: 0 0;
}
.com_cpanel .header{
    background: transparent;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.content .card {
    /*box-shadow: 0 2px 10px -8px var(--template-bg-dark-50);*/
    box-shadow: 6px 11px 41px -28px #796eb1;
    -webkit-box-shadow: 6px 11px 41px -28px #796eb1;
}

/*user profil*/
.main-sidebar-loggedin {
    padding: 20px 20px 0 20px;
    display: flex;
    flex-shrink: 0;
    border-bottom: 0;
    /*margin-top: 64px;*/
    margin-bottom: 1rem;
}
.app-sidebar__user {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    color: #a8a8a8;
    width: 100%;
    display: inline-block;
}
.user-pic {
    margin-bottom: 0.8rem;
}
.user-pic img {
    width: 80px;
    height: 80px;
    font-size: 36px;
    box-shadow: 0px 5px 5px 0px rgb(44 44 44 / 20%);
}
.rounded-circle {
    border-radius: 50% !important;
}
.user-info .text-dark {
    color: #031b4e !important;
    font-weight: 600;
    font-size: 14px;
    margin-top: 13px;
}
.user-info .text-muted {
    color: #97a3b9 !important;
    font-size: 13px;
}
.closed .user-info {
  display: none;
}
.closed .user-profile {
  display: none;
}
.closed .user-pic img {
    width: 40px;
    height: 40px;
    margin: 0 auto;   
}

.sidebar-navs a {
  background: rgba(234, 235, 240, 0.2);
  border: 1px solid rgb(224, 224, 243) !important;
  color: #747684 !important;
  border-radius: 50%;
  padding: 0.4rem 0.6rem !important;
}

.sidebar-navs a:hover {
    box-shadow: 0px 5px 5px 0px rgb(44 44 44 / 20%);
}

.sidebar-navs {
  padding: 0 10px 10px 10px;
  border-bottom: 1px solid #fff;
}
/*
.sidebar-navs .navi li:last-child a {
  margin-right: 0px !important;
}*/

.side-menu h3 {
  color: #7c808a;
  margin-bottom: 0;
  text-transform: uppercase;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .5px;
  padding: 7px 38px;
  border-radius: 1px;
  margin-top: 1.1rem;
  position: relative;
  margin-bottom: 0.6rem;

  &:after {
    content: "--";
    position: absolute;
    left: 17px;
    top: 7px;
  }
}

.sidenav-toggled .side-menu h3 {
  display: none;
}

.slide.is-expanded .slide-menu {
  position: relative;
  margin: 10px 0;
}
 .nav-pills-circle {
    position: relative;
    margin: 0 auto;
    text-align: center;
    margin-bottom: 0 !important;
    
    justify-content: center;
}
.user-profile .navi{
    display: flex;
    flex-wrap: wrap;
    
    margin-bottom: 0;
    list-style: none;
}
.user-profile ul{
    padding-left: 0;
}

.closed .sidebar-wrapper {
  flex: 1 0 5rem;
  max-width: 5rem;
  overflow: visible;
}
.closed .main-nav,
.closed .main-nav li {
  max-width: 5rem;
}
.closed .main-nav a:hover {
  position: relative;
  max-width: 5rem;
}
.closed .sidebar-wrapper .item > a {
  position: relative;
  display: flex;
  flex-grow: 1;
  align-items: center;
  min-height: 40px;
  justify-content: center;
}


@media (min-width: 768px){
    .content {
        padding: 0 2rem;    
    }
}
/*
.subhead {
  box-shadow: 5px 7px 26px -5px #502965;
  -webkit-box-shadow: 5px 7px 26px -5px #502965;
  
}
*/
.shadow-sm {
  /*background: linear-gradient(45deg, #f54266, #3858f9);*/  
  box-shadow: 5px 7px 26px -15px #502965 !important;
  -webkit-box-shadow: 5px 7px 26px -15px #502965 !important;
}

.dropdown-header {
  display: block;
  padding: 0 0.75rem;
  margin-bottom: 0;
  font-size: 0.8rem;
  color: #666e76;
  white-space: nowrap;
  /*background: linear-gradient(45deg, rgba(56, 88, 249, 0.9), rgba(142, 121, 253, 0.9)), url(../images/background/20.jpg);
  box-shadow: 0 6px 14px 2px rgb(0 0 0 / 20%);
  background-size: cover;
    border-top-left-radius: 0.25rem;
    border-top-right-radius: 0.25rem;*/
    
}
.header-img {
	background: linear-gradient(45deg, rgba(56, 88, 249, 0.9), rgba(142, 121, 253, 0.9)), url(../images/background/20.jpg);
	background-size: cover;
	border-top-left-radius: 0.25rem;
	border-top-right-radius: 0.25rem;
	padding: 10px 0 10px 0;
	border-top: 0;
	box-shadow: 0 6px 14px 2px rgb(0 0 0 / 20%);
  }

.header .dropdown-item {
  padding: 0.82rem 0.75rem;
  color: #5e597d;
  background-color: transparent;
}
.header .dropdown-header > span,
.header .dropdown-item > span {
  -webkit-margin-end: 0.5rem;
          margin-inline-end: 0.5rem;
}
.header .dropdown-header:hover,
.header .dropdown-item:hover {
  /*background-color: var(--template-bg-dark);*/
  background-color: #f6f5ff;
}
.header .dropdown-header {
  padding: 0.75rem;
  font-size: inherit;
  background-color: var(--template-bg-dark);
}
.dropdown-item+.dropdown-item {
    border-top: 0px solid rgba(0,0,0,.1);
}
.dropdown-item {
    text-align: start;
    border-bottom: 0px solid rgba(0,0,0,.1);
}
/*
.dropdown-menu {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 1000;
	display: none;
	float: left;
	min-width: 10rem;
	padding: 0.5rem 0;
	margin: 0.125rem 0 0;
	font-size: 0.875rem;
	color: #031b4e;
	text-align: left;
	list-style: none;
	background-color: #fff;
	background-clip: padding-box;
	border: 1px solid rgba(138, 153, 191, 0.125);
	border-radius: 8px  !important;
  }
  */
  .dropdown-menu {
  position: absolute;
  z-index: 1020;
  display: none;
  min-width: 10rem;
  padding: 0 0;
  margin: 0;
  font-size: 1rem;
  color: #031b4e;
  text-align: left;
  list-style: none;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid rgba(138, 153, 191, 0.125);
  border-radius: 0.4rem; /*BIAR TIDAK ADA DOBEL GARIS*/
}
.dropdown-menu {
    -webkit-box-shadow: 0px 0px 15px 1px rgb(69 65 78 / 20%);
    box-shadow: 0px 0px 15px 1px rgb(69 65 78 / 20%);
}

/* TABEL */
.table thead th {
  font-size: 0.875rem;
  font-size: .8rem;
}

.table>:not(:first-child) {
  border-top: 0px solid #dee2e6;
}

.table tbody a:not(.badge) {
  text-decoration: none;
}
.tbody-icon .fa-check, .tbody-icon .icon-check, .tbody-icon .icon-publish {
    border-color: var(--success);
    color: var(--success);
}
.tbody-icon [class*=" fa-"], .tbody-icon [class*=" icon-"], .tbody-icon [class^=fa-], .tbody-icon [class^=icon-] {
    
    border-radius: 50%;
    
    font-size: .8rem;
    height: 24px;
    line-height: 22px;
    width: 24px;
}

.j-main-container>.table {   
    font-size: .875rem;
    font-size: .8rem;
}
.table tbody th {
  font-weight: normal;
}

@media (max-width:767.98px) {
 .view-login #wrapper.d-flex {
  display:flex!important
 }
 .view-login #sidebar-wrapper:not(.show):not(.collapse) {
  display:flex
 }
}

.tr-gray {
    --table-accent-bg: var(--table-striped-bg);
}

.dashboard-header {
    display: flex;
    margin-top: -10px;
    margin-bottom: 30px;
    width: 100%;
    /*margin-top: 40px;*/
    z-index: 0;
}
.dashboard-header .content-title {
    color: #fff;
}
.dashboard-icon-o {
	width: 48px; font-size: 46px; padding: 10px; color: #005b96; border: 3px solid #20abb7; display: inline-block;
	border: none; float: left; text-align: center;
}
.dashboard-title { margin-left: 20px; padding-top: 0px; }
.dashboard-title h1 { font-size: 32px; 
    margin-left: -2px; 
    color: #fff; 
    line-height: normal; font-weight: normal; 
    -webkit-margin-before: 0;
    -webkit-margin-after: 0;
    margin-top: 0px;
    margin-bottom: 0px;
}
.dashboard-title h5 { text-transform: uppercase; font-size: 11px; color: #fff; line-height: normal; font-weight: normal; 
    -webkit-margin-before: 0;
    -webkit-margin-after: 0;
    margin-top: 0px;
    margin-bottom: 0px;
}

.header-operator{
    color: #7987a1;
   /* font-size: 11px !important;*/
}


/*azira*/

.project-card {
    
    padding: 1.25rem;
}  
.project-card .project-content {
    width: 100%;
    padding-left: 1.25rem;
}
.project-card .danger {
    fill: #fff;
    background: linear-gradient(45deg, #f53c5b, #fb768c);
    padding: 11px;
    border-radius: 5px;
    box-shadow: 0 7px 30px rgb(250 106 130 / 50%);
}  
.project-card .success {
    fill: #fff;
    background: linear-gradient(to top, #0ba360 0%, #3cba92 100%);
    padding: 11px;
    border-radius: 5px;
    box-shadow: 0 7px 30px rgb(11 163 96 / 30%);
}
.ht-60 {
	height: 60px;
}
.wd-60 {
    width: 60px;
}

.tasks {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    position: relative;
    margin: 0 0 1rem 0;
}

.task-line:before {
    position: absolute;
    display: block;
    width: 0.2rem;
    top: 0.2rem;
    content: "";
    border-radius: 0.2rem;
    height: 2rem;
}

.task-line.pink:before {
    background: linear-gradient(45deg, #f10075 0%, #fd5d93 74%);
}
.task-line.primary:before {
    background: linear-gradient(45deg, #3858f9, #8e79fd);
}

.label {
    color: #031b4e;
    margin-left: 1.3rem;
    font-weight: 500;
}

@media (min-width: 768px) {
  .card-columns {
    grid-template-columns: 2fr 1fr;
  }
}

.project-names h6 {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    color: #fff;
    line-height: 2.5;
    margin-bottom: 0;
    font-weight: 600;
    padding: 3px;
}
.bg-primary-transparent {
    background-color: #d9e8fe !important;
}
.bg-success-transparent {
    background-color: #d4f2e1 !important;
}
.bg-pink-transparent {
    background-color: #fee5f1 !important;
}
.bg-purple-transparent {
    background-color: #e1defe !important;
}
.badge-danger {
    color: #fff !important;
    background-color: #f53c5b;
    box-shadow: 0 7px 30px rgb(250 106 130 / 50%);
}
.badge-success {
    color: #fff;
    background-color: #0ba360;
    box-shadow: 0 7px 30px rgb(11 163 96 / 30%);
}
.badge-teal {
    color: #fff;
    background-color: #00cccc;
}
.font-weight-semibold {
    font-weight: 500 !important;
}
.mr-2, .mx-2 {
    margin-right: 0.5rem !important;
}
.task-box {
    background-color: #eff2f6;
    margin-bottom: 15px;
    padding: 10px;
}
.task-box.primary {
    color: #fff !important;
    background: linear-gradient(45deg, #675949, #846c63);
    border-radius: 5px;
    box-shadow: 0 7px 30px rgb(108 82 71 / 50%);
    
}
.task-box.danger {
    background: linear-gradient(45deg, #f53c5b, #fb768c);
    color: #fff !important;
    border-radius: 5px;
    box-shadow: 0 7px 30px rgb(250 106 130 / 50%);
}
.task-box.primary p, .task-box.pink p, .task-box.danger p {
    text-transform: uppercase;
    font-weight: 700;
    font-size: 10px;
    margin-bottom: 5px;
    letter-spacing: .5px;
    padding: 10px;
}

textarea.textarea-petunjuk {
    min-height: calc(20.5em + 1rem + 2px);
}

.plan-icon {
    font-size: 25px;
    width: 80px;
    height: 80px;
    line-height: 80px !important;
    overflow: hidden;
    /*border: 1px solid #ebeaf1;*/
    border-radius: 50%;
    background: #675949;
    transition: all .3s;
    color: #fff;
   
}


/* Float */
.hvr-float {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.hvr-float:hover, .hvr-float:focus, .hvr-float:active {
  -webkit-transform: translateY(-8px);
  transform: translateY(-8px);
}

.licenses {
    margin-top: 40px;
    margin-bottom: 60px;
}

@media only screen and (min-width: 568px)
.license {
    width: 48%;
    float: left;
}
.license {
    display: block !important;
    margin-bottom: 20px;
    text-align: center;
    border: #ddd solid 1px;
    border-radius: 5px;
    background: #fbf8f4;
}



.license__content {
    padding: 20px 10px 20px 10px;
    color: rgba(103, 89, 73, 0.7);
}

.license__title {
    margin: 0;
    font-size: 28px;
    line-height: 1.4;
}

.license__desc {
    margin-top: 30px;
    margin-bottom: 0;
    font-size: 22px;
    font-weight: 700;
}
.button.cta {
    display: inline-block;
    position: relative;
    margin: 1.2em 0 1em 0;
    padding: 1em;
    background: #675949;
    border: #ddd solid 1px;
    text-decoration: none;
    font-weight: 700;
    color: white;
    /*background: linear-gradient( 45deg, #f54266, #3858f9);*/
    /*background: linear-gradient(45deg, rgba(25, 79, 184, 0.9) 0%, rgba(5, 198, 209, 0.9) 100%) transparent;*/
    box-shadow: 0 6px 14px 2px rgb(0 0 0 / 10%);
    border-radius: 0 0 5px 5px;
}
.license__button.cta {
    display: block;
    margin: 0;
    /*font-size: 22px;*/
}

.button.ctb {
    display: inline-block;
    position: relative;
    margin: 1.2em 0 1em 0;
    padding: 1em;
    background: #0ba360;
    border: none;
    text-decoration: none;
    font-weight: 700;
    color: white;
    /*background: linear-gradient( 45deg, #f54266, #3858f9);*/
    /*background: linear-gradient(45deg, rgba(25, 79, 184, 0.9) 0%, rgba(5, 198, 209, 0.9) 100%) transparent;*/
    box-shadow: 0 6px 14px 2px rgb(0 0 0 / 10%);
}
.license__button.ctb {
    display: block;
    margin: 0;
    /*font-size: 22px;*/
}

/*
tbody, td, tfoot, th, thead, tr {
    border: 1px solid;
    border-color: inherit;
}
*/

.putih{
    color: #fff;
}

.form-control {
  display: block;
  width: 100%;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #cdcdcd;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border-radius: 0.25rem;
  -webkit-transition: border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
  transition: border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
  -o-transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
}

.form-select, .custom-select {
  display: block;
  width: 100%;
  padding: 0.5rem 3rem 0.5rem 1rem;
  -moz-padding-start: calc(1rem - 3px);
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
  background-color: var(--template-bg-light);
  background-image: url("../images/select-bg.svg");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: max(100%, 116rem);
  border: 1px solid #cdcdcd;
  border-radius: 0.25rem;
  -webkit-transition: border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
  transition: border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
  -o-transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

label, caption {
  font-size: 0.875rem;
  text-align: start;
}


.card-icon {
    border-radius: 3px;
    background-color: #999;
    padding: 15px;
    margin-top: -20px;
    margin-right: 15px;
    float: left;
    color: #fff;
}

.card-icon {
    box-shadow: 0 4px 20px 0 rgb(0 0 0 / 14%), 0 7px 10px -5px rgb(255 152 0 / 40%);
}

.card-icon {
    background: linear-gradient(60deg,#ffa726,#fb8c00);
}

#nbr{
  font-size:62px;
  margin: 2px 0 0 0;
}

#nbr_produk{
  font-size:62px;
  margin: 2px 0 0 0;
}
/*
.card.card-stats .card-header.card-header-icon, .card.card-stats .card-header.card-header-text {
    text-align: right;
}

.card[class*=bg-], .card[class*=bg-] .card-title, .card[class*=bg-] .card-title a, .card[class*=bg-] .icon i, .card [class*=card-header-], .card [class*=card-header-] .card-title, .card [class*=card-header-] .card-title a, .card [class*=card-header-] .icon i {
    color: #fff;
}
*/


/* == cpanel dari JCE Editor == */
.ui-jce {
    border-radius: 10px
}
.m .ui-jce dl {
    margin: 0 0 10px 10px
}
.m .ui-jce .placeholder {
    margin: 0
}
.ui-jce .dl-horizontal dt {
    line-height: 2.5em;
    text-align: left
}
html[dir=rtl] .ui-jce .dl-horizontal dt {
    text-align: right;
    margin: 0
}
.ui-jce .dl-horizontal dd {
    line-height: 2.5em;
    margin-bottom: 5px
}
.ui-jce .newsfeed li {
    line-height: 2.5em
}
.ui-jce .thumbnails [class*=" icon-"],
.ui-jce .thumbnails [class^=icon-] {
    display: block;
    width: 100%;
    height: 100%;
    margin: auto;
    font-size: 4em;
    text-align: center;
    line-height: 1.5em
}
.ui-jce .thumbnails [class*=" fa "],
.ui-jce .thumbnails [class^=fa] {
    display: block;
    width: 100%;
    height: 100%;
    margin: auto;
    font-size: 4em;
    text-align: center;
    line-height: 1.5em;
        text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
        
}
.ui-jce .thumbnails .thumbnail {
    color: inherit;
    padding: 10px;
    box-shadow: inherit;
    -webkit-box-shadow: inherit;
    -moz-box-shadow: inherit;
        *box-shadow: 0 1px 3px #c1c1c1;
}
.ui-jce .thumbnails .thumbnail:active,
.ui-jce .thumbnails .thumbnail:hover {
    text-decoration: none;
        box-shadow: 0 1px 3px #c1c1c1;
}
.ui-jce .thumbnails .thumbnail-title {
    margin: 0;
    height: 3.5em
}
.ui-jce .thumbnails>li {
    width: 150px;
    margin: 0 10px 0 0;
    color: #005b96;
}
.ui-jce .alert .btn {
    background-image: inherit;
    filter: inherit;
    -ms-filter: inherit;
    box-shadow: inherit;
    margin-left: 15px
}
.ui-jce .alert h4 {
    line-height: 28px
}
.ui-jce dl .label {
    margin-right: 10px;
    padding: 5px
}
.ui-jce .placeholder {
    padding: 8px 14px;
    border: 1px dashed #E5E5E5;
    background: #fafafa;
    color: #666;
}
ul.unstyled, ol.unstyled {
  margin-left: 0;
  list-style: none;
}

#thumbnailView {
  position: absolute;
  width: calc(100% - 60px);
  top: 0;
  bottom: 0;
  padding: 10px 30px 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.thumbnail {
  margin: 0 10px 5px 10px;
}
html[dir='ltr'] .thumbnail {
  float: left;
}
html[dir='rtl'] .thumbnail {
  float: right;
}

#thumbnailView > a:last-of-type > .thumbnail {
  margin-bottom: 10px;
}

#thumbnailView > a:last-of-type > .thumbnail:not([data-loaded]) {
  margin-bottom: 9px;
}

.thumbnail:not([data-loaded]) {
  border: 1px dashed rgba(255, 255, 255, 0.5);
  margin: -1px 9px 4px 9px;
}

.thumbnailImage {
  border: 1px solid transparent;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.3);
  opacity: 0.8;
  z-index: 99;
  background-color: white;
  background-clip: content-box;
}

.thumbnailSelectionRing {
  border-radius: 2px;
  padding: 7px;
}

a:focus > .thumbnail > .thumbnailSelectionRing > .thumbnailImage,
.thumbnail:hover > .thumbnailSelectionRing > .thumbnailImage {
  opacity: .9;
}

a:focus > .thumbnail > .thumbnailSelectionRing,
.thumbnail:hover > .thumbnailSelectionRing {
  background-color: hsla(0,0%,100%,.15);
  background-image: linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,100%,0));
  background-clip: padding-box;
  box-shadow: 0 1px 0 hsla(0,0%,100%,.05) inset,
              0 0 1px hsla(0,0%,100%,.2) inset,
              0 0 1px hsla(0,0%,0%,.2);
  color: hsla(0,0%,100%,.9);
}

.thumbnail.selected > .thumbnailSelectionRing > .thumbnailImage {
  box-shadow: 0 0 0 1px hsla(0,0%,0%,.5);
  opacity: 1;
}

.thumbnail.selected > .thumbnailSelectionRing {
  background-color: hsla(0,0%,100%,.3);
  background-image: linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,100%,0));
  background-clip: padding-box;
  box-shadow: 0 1px 0 hsla(0,0%,100%,.05) inset,
              0 0 1px hsla(0,0%,100%,.1) inset,
              0 0 1px hsla(0,0%,0%,.2);
  color: hsla(0,0%,100%,1);
}


.quick-icon-sidebar {
  font-size: 2rem;
  color: var(--icon-color);
}