* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@media screen and (min-width: 1088px) {
.navbar.is-info .navbar-item.has-dropdown.is-active .navbar-link, .navbar.is-info .navbar-item.has-dropdown:hover .navbar-link 
    {
    background-color: #333 !important;
    }

}

.navbar-dropdown {
    background:#444;
    border-top: none;
}

.navbar-dropdown a {
    color:white;
}

.navbar-start img {
    filter: brightness(0) invert(1) opacity(0.3);    
}

.navbar-item:hover img{
    filter: brightness(0) invert(1) opacity(1);    
}

.navbar-item.is-active img {
     filter: brightness(0) invert(1) opacity(1);    
}


@media screen and (max-width: 1087px) {
    .navbar-menu {
        padding:0;

    }
    
    .navbar-start {
        background:#222;
        display:flex;
        flex-wrap:wrap;
    }
    
    .navbar-start .navbar-item {
        padding: 17px 20px 10px;
    }
    
    .navbar-start a {
        width:33%;
        font-size: 1.1rem;
        font-weight: normal;
    }
    
    .navbar-start a {
        color:white;
    }
    
    .navbar-menu.is-active.fa {
        background: none; 
        color: #222;
    }
    
    .navbar-link {
        background:#222;
        color:white;
    }
    
    .navbar-end {
        0 24px 20px 10px rgb(0 0 0 / 26%)
    }
}

@media screen and (min-width: 769px) {
    .column.is-half.dash-bubbles {
        width: calc(50% - 15px);
    }
    
}

@media screen and (max-width: 769px) {
    .dash-cols {
        margin-top:10px;
    }
    
        
    .advanced-search .column {
        padding: 3px 0.75rem;
    }
    
}

.kategori-grid div, .items-grid div {
    cursor:pointer;
    line-height:1;
}

.dash-bubbles .fa, .dash-bubbles .far, .dash-bubbles .fas {
    margin-right: 5px;
}

a {
    color: #555;
}


.table td, .table th {
    border: 1px solid #fafafa;
}

.table thead {
    background:#fafafa;
}

.inputs input {
    color: #2255dd;
}

.switch-field input:checked + label {
    background-color: #6c177e !important;
    color:white;
}

.swal2-styled.swal2-confirm , .swal2-styled.swal2-deny {
    display: block;
    width:100%;
}

.inventory-item {
    cursor:pointer;
}

.inventory-item:hover {
    background:#fffcf8;
}

.show-ukuran {
    text-align:center;
    cursor:pointer;
    color: #666; 
    font-weight: bold;
    font-size: 10pt; 
    padding-bottom: 10px;
}

.quickpick a {
    display:block;
    width:100%;
    text-align:left;
    font-size:.8rem;
    border:1px solid #ddd;
    border-top:1px solid #eee;
    border-bottom:1px solid #ccc;
    padding:10px 15px;
    margin-bottom:10px;
    border-radius:10px;
    background:white;
}

.quickpick a i {
    float:right;
    margin-top:5px;
}

.dash-bubbles {
    border:1px solid #f7f7f7;
    background: #fdfdfd;
    border:1px solid #ddd;
    border-bottom:1px solid #ccc; 
    border-top:1px solid #eee;
    padding:0px; 
    border-radius:10px;  
    width: calc(100% - 50px);
    margin:15px auto 0; 
    font-size:1rem;
}

.dash-bubbles h3 {
    font-size:1.15rem;
    font-weight:bold;
    padding:12px 20px 11px; 
    color:#444; 
    border-radius:10px 10px 0 0;
    text-align:left;
}

.dash-bubbles > div {
    padding:15px 20px;
}
.dash-bubbles p {
    font-size:0.7rem;
    color:#999;
}

.dash-bubbles a {
    color:#1777e3 ;
    font-size:0.8rem;
}

.dash-bubbles a:hover {
    color:black;
}

.dash-bubbles table {
    width:100%;
}

.dash-bubbles table td:nth-child(even){
    text-align:right;
}

.dash-qty {
    font-size:0.7rem; 
    padding:2px 8px; 
    background:#eee; 
    border-radius:10px; 
}

.jurujual tr td:first-child {
    text-align:left;
}

.jurujual tr td {
    text-align:right;
}

.laporan-button {
    padding:4px 8px; 
    font-size:0.7rem; 
    background:black; 
    color:white; 
    border-radius:4px;
    margin:0 5px 0 10px;
}

.permission-info {
    font-size:0.7rem;
    margin-left:20px;
    color:#888;
    margin-bottom:10px;
}

.permission-margin {
    margin-left:20px;
}

.permission-div {
    background:#fff;
    margin-top:15px;
    border-radius:15px;
    border:1px solid #f9f9f9;
    border-bottom:1px solid #eaeaea;
    box-shadow:0 1px 1px 0 #00000020;
    
}

.permission-div input {
    vertical-align:middle;
}

.permission-div div {
    padding:25px;
}

.permission-div h3 {
    font-size:1.1rem;
    text-align:left;
    padding:10px 15px;
    font-weight:normal;
    border-radius:15px 15px 0 0px;
    box-shadow:0 1px 1px 0 #00000020;
}

.info-spacer {
    padding:15px 20px 30px; 
    background:#fff;
    border-bottom:1px solid #c7c7c7; 
    border-radius:10px; 
    width:calc(100% - 40px); 
    margin:0 auto 20px;
    box-shadow: 0 1px 3px 0 #00000020;
    
}

.info-spacer h3 {
    font-size:1.1rem;
    margin-bottom:25px;
}

.table.main td, table.main th {
    border: 0px solid #fafafa;
}

.aside {
    margin-left:0;
    background:#efefef;
    padding-left:20px;
}

.chart-container h3 {
    text-align:center;
    margin-bottom:15px;
    padding-top:15px;
    color:#9f0dc0 ;
    font-weight:bold;
}

.breadcrumb {
    border-bottom: 1px solid #c3228e;
    padding-bottom: 12px;
}

.navbar-start .fa {
    border-radius: 30px;
    padding: 10px;
    background: linear-gradient(25deg, #5e0871 0%, #b31d9a 100%);
    color: white;
}

.is-active .fa { 
    color: #fff;
}

.navbar.is-info {
    background: linear-gradient(320deg, #ca5022 0%, #670a5b 100%);
}

html, body {
    background: #eee;
    color: #555;
}

.navbar-start {
    padding: 10px 0;
}

a.navbar-item.is-active {
    background-color: rgba(0,0,0,0.3) !important;
    color: white !important;
    border-radius:20px;
    box-shadow: inset 0px 7px 5px 0px rgb(0 0 0 / 30%);
}

a.navbar-item {
    margin-right:5px;
}
a.navbar-item:hover {
    border-radius:20px;
    background-color: rgba(0,0,0,0.3) !important;
    color : white !important;
}

#navMenu a.navbar-item:hover .navbar-link.is-info {
	background-color: #000000 !important;
}

navbar-start .is-active .fa {
    background:darkblue;
}

.orderform {
    max-width:800px;
}


.button.is-info {
    background-color: #8c1450;
    background-color: #0a6566;
}

.button.is-info:hover {
    background-color: #5b0d34;
    background-color: #074748;
    color:white;
}


.hero-body {
    padding: 3rem 0rem;
}

.hero.welcome.is-info {
    border-bottom: none; 
}

.menu-list a.is-active {
    background-color: #22c1c3;
 
}

.sorting_asc_disabled:after, table.dataTable thead .sorting_desc_disabled:after {
    opacity: 0.05;
}

.breadcrumb:not(:last-child) {
    margin-bottom:0px;
}

.pagination-link.is-current {
    background:#fafafa;
    border: 1px solid #eee;
    color: #333;
}

.pagination-link, .pagination-next, .pagination-previous {
	border: none;
    color: #750084;
    color: #888;
    border-radius: 3px !important;
}

.pagination-next, .pagination-previous {
	background: #fafafa;
    border: 1px solid #ddd;
    color: #888;	
}

.pagination-disabled {
	opacity: 0.3;
}

.pagination-next {
	margin-left: -5px;
	border-radius: 0 3px 3px 0 !important;
}

.pagination-previous {
	border-radius: 3px 0 0 3px !important;
}

.pagination-next:hover, .pagination-previous:hover {
	background: #eee;
    border: 1px solid #ddd;
    color: #555;	
}


.columns {
    width: 100%;
    height: auto;
}

.field-label {
    text-align:left;
}

.tile.is-child {
    background: #9f0dc0;
    background: linear-gradient(145deg, #9f0dc0 0%, #139fa9 100%);
}

.blue-purple-bg {
   
   /* background: linear-gradient(25deg, #ca5022 0%, #670a5b 100%); */
   background: linear-gradient(25deg, #360941 0%, #881148 100%);
}

.text-purple {
	color: #9f0dc0;
}

.item-dd {
    padding:0 10px 10px
}

.item-dd small {
    font-size:0.7rem;
}
p.title, .fc .fc-toolbar>*>:first-child {

}

.info-tiles .subtitle, .subtitle, .title, .label { 
    color:white;
}

.tile-figures .subtitle {
	text-align: center;
	font-size: 11pt;	
	padding-bottom: 20px;
}

.tile-figures .title {
	text-align: center;
	font-size: 20pt;
	padding-top: 10px;
}

.modal-card-body .subtitle, .modal-card-body .title, .modal-card-body .label, .modal-card-body p {
 color:#777;
}


.tempahan {
    background:#06223e !important;
}

.tempahan:nth-child(3n) {
    background:#5f1818  !important;
}

.tempahan:nth-child(odd) {
    background:#e5f2f3 !important;
}

.tempahan {
    background:#e5f7dc !important;
}

.tempahan:nth-child(3n) {
    background:#ffebeb  !important;
}

.tempahan label {
    color:white;
    color:black;
}

.breadcrumb a {
    align-items: center;
    color: white;
    font-weight:bold;
} 

.breadcrumb li.is-active a, .breadcrumb a:hover { 
    color: #ff0087;
}

.button {
	border: none !important;
}

.button.is-warning { 
    background: linear-gradient(45deg, #c00d47 0%, #a91390 100%);
    color:white;
}

.button.is-warning.is-hovered, .button.is-warning:hover {
    background: linear-gradient(-45deg, #c00d47 0%, #a91390 100%);
    border-color: transparent;
    color: white;
}

.tempahan .column {
    padding: .5rem;
}

.nav-float {
    position: sticky; 
    top: 0;
    z-index : 20;
    
 position: sticky;
  position: -webkit-sticky;
  top: 0; /* required */ 
}


.action-button .fa, .far, .fas { 
    margin-right:0;
}

.fa, .far, .fas {
    margin-right:10px;
}


.gender .fa, .gender .far, .gender .fas {
    margin-right:0px;
}
.dash {
    margin-top:1px;
}
.dash .button {
    justify-content: flex-start ;
}

.button {
    justify-content: flex-start ;
}

.hero.welcome .title, .hero.welcome .subtitle {
    color:#cc0bba ;
}


.paper hr {
    background:black;
}



table.dataTable thead .sorting:after {
    display:none;
    content:none;
}

table.dataTable thead .sorting_asc:after {
    display:none;
    content:none;
}

table.dataTable thead .sorting:after, table.dataTable thead .sorting_asc:after, table.dataTable thead .sorting_desc:after, table.dataTable thead .sorting_asc_disabled:after, table.dataTable thead .sorting_desc_disabled:after {
   display:none;
    content:none;
}

.mobile-cont2 {
    display: flex;
    justify-content: center;
    align-items: center;
    position: sticky;
    top: 0;
    z-index:23;
}

.modal-card-foot {
    justify-content: center;
}

.is-danger {
    background-color: #c2042a;
}

.pelanggan {
    margin: 0px !important;
    
}

.pelanggan table {
    width:100%;
}

.pelanggan table th {
    color: #000;
    margin-bottom: 10px;
	text-transform: uppercase;
	font-weight: 300;
	padding-top: 10px;
}

.pelanggan td:nth-child(1) {
    width: 200px;
}

.pelanggan table:nth-child(even) {
    margin-top:15px;
}

.pelanggan .column {
    padding: 10px 20px;
    background: #fff;
	color: #333;
}

.fake {
    height:20px; 
    width:auto;
}
.pesanan_details td{ 
    text-align:right;
}

.pesanan_details td:nth-child(1){ 
    text-align:left;
}

.dataTables_info {
    display:none;
}

.graphs, .graphs .column {
    padding:0;
}

.hero.welcome .title, .hero.welcome .subtitle {
    margin-top: 0;
}

.button.is-info.is-outlined {
    background-color: transparent;
    border-color: #0a6566;
    color:#0a6566;
}
.button.is-info.is-outlined:hover {
    background: linear-gradient(0deg, #0a6566 0%, #129697 100%);
}

.belum_siap {
    font-size:8pt;
    font-weight:bold;
    color:red;
}


.small-yellow-line {
    height:2px; 
    width:100%; 
    background:#ff0087;
}

.in_tempahan:nth-child(even) {
    background:#fafafa;

}
.in_tempahan {
    padding:30px;
    margin:0 !important;
    background: #efefef;
    color:black
}

.button.is-danger {
    background-color: #d13756;
}

.pull-right {
    float: right;
}
#label-width {
    width: 130px;
}
.img-container {
    float: left;
    width: 25%;
    padding: 5px;
}

.pesanan-action {
	font-size: 0;
	text-align: center;
}

.pesanan-action .button {
	border-radius: 0;
	padding: 0 10px;
}

.pesanan-action .button:first-child {
	border-radius: 25px 0 0 25px;
	padding-left: 15px;
}

.pesanan-action .button:first-child i {
	margin-right: 0 !important;	
}

.pesanan-action .button:last-child {
	border-radius: 0 25px 25px 0;
	padding-right: 10px;
}

.tangguh{
    background:#fff7f9  !important;
}

.tangguh .tsiap {
    color:#000;
}

.tangguh .tsiap b{
    color:#ff7474;
}

.batal{
    background:#fff7f9  !important;
}

.batal .tsiap {
    color:#000;
}

.batal .tsiap b{
    color: white;
    background-color: red;
    padding: 2px;
    border-radius: 5px;
}


.lewat {
    background:#fff7f9  !important;
}


.lewat .tsiap {
    color:#000;
}

.lewat .tsiap b{
    color:#ff7474;
}


.mobile-view {
    display:flex;
    justify-content:center;
    text-align:center;
    color:white;
    margin:10px 0 30px;
}


.mobile-view div{
    width:48%;
    padding:15px;
    margin:10px;
    border-radius:5px;
    background: linear-gradient(25deg, #c00d47 0%, #3f13a9 100%);
}

.mobile-view div a {
    font-size:10vh;
    display:block;
    color:white;
    
}

.mobile-view .fas, .mobile-buttons .fa, .mobile-buttons .far {
    margin:0;
}

.current-user {
    margin-top:15px;
    text-align:center;
}

    
.iklanfon {
    width:100%;
    margin-top:15px;
    background-repeat:no-repeat;
    background-size:cover;
}

.iklanfon img{
    max-width:100%;
}



.notification.is-danger {
    background-color: #d13756;
}

.button {
    box-shadow: 0 1px 1px rgba(0,0,0,0.3);
}

.gambar-dalam {
   display:flex;
   justify-content:center;
   flex-wrap:wrap;
}


.gambar-gallery {
   padding:2px;
   width:10vh;
   height:100px;
   overflow:hidden;
   text-align:center;
   position:relative;
   border:2px solid #eee;
}

.gambar-gallery img {
   max-height:100%;
   max-width:80%;
   
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.view-design {
    margin-top:0;
}

.view-design td:nth-child(even) {
    text-align:right;
}

.pesanan_baru {
    margin:0 0 15px; 
    padding:15px; 
    text-align:center; 
    font-size:12px; 
}


/* Tempahan changes */


.tempahan:nth-child(odd) {
    background:#25022c  !important;
}

.tempahan {
    background: #420d41 !important;
    border:1px solid #ff0087;
    box-shadow:0 2px 10px #8a1281;
}

.tempahan:nth-child(3n) {
    background:#20093f  !important;
}

.tempahan label {
    color:white;
}


.dark_field input {
    border: 1px solid #c543cc;
    background: #34153e;
    color:white;
}


.toggle span {

}

.file-cta {
    background-color: #eee;
    border:1px solid #ddd;
}

.file-cta:hover {
    background-color: #fafafa;	
}

input::placeholder {
    color:pink;
}

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: pink;
}
::-moz-placeholder { /* Firefox 19+ */
  color: pink;
}
:-ms-input-placeholder { /* IE 10+ */
  color: pink;
}
:-moz-placeholder { /* Firefox 18- */
  color: pink;
}

.thin {
	font-weight: 300 !important;
	font-family: sans-serif !important;
	color:#333;
}

.dash-charts {
	background: #fafafa; 
}

.dash-charts-main {
	background: #eee; 
}

.dash-bar-charts {
    float: left;
    width: calc(50% - 20px);
    box-sizing: border-box;
    padding: 15px;
    margin: 10px;
    box-shadow: 0px 11px 12px -13px rgba(0,0,0,0.3);
    border-bottom:1px solid #ccc; 
    border-top:1px solid #eee;
    border-radius: 10px;
    background: #fafafa;
}

.dash-bar-charts h3 {
    color: #888;
    font-weight: bold;
    font-size: 1rem;
    text-align: center;

    padding: 10px 0 25px;
    margin-bottom: 25px;
    border-bottom:1px solid #eee;
}


.dash-charts-reports {
	margin-top: 20px;
	padding: 15px;
}

.advanced-search-btn {
    cursor:pointer; 
}

@media only screen and (max-width: 768px) {

    .dash-bar-charts {
        width: calc(100% - 50px) !important;
        margin: 10px 25px;
    }
	
	.ui-datepicker {
		position: fixed !important;
	    bottom: 0 !important;
	    left: 0 !important;
	    right: 0 !important;
	    top: auto !important;
	    z-index: 1000 !important;
	    width: 100% !important;
	    box-shadow: 0 0 20px rgba(0,0,0,0.5) !important;
	    padding-bottom: 30px !important;
	}
	
	.ui-datepicker td {
		text-align: center !important;	
	}
	
	.ui-datepicker td span {
		text-align: center !important;
	}
	
	.dash-bar-charts {
		width: 100%;	
	}
	
	.dash-charts-reports {
		margin-top: 0;
	}
	
	.dash-charts {
		border-radius: 0;
		box-shadow: none;
		border: none;
	}
	
	.figures-mobile	{
		background: #fff;
	}
	
	.figures-mobile table {
		width: 100%;
		border-collapse: collapse;
	}
	
    .figures-mobile td {
        padding:0;
        font-size:0.9rem;
        text-align:left;
        border:none;
    }
    
    .figures-mobile td:nth-child(even) {
        text-align:right;
        
    }
	

	.pagination-container form {
		width: calc(100vw - 100px);
	}
	
	.pagination-container input.input {
		width: calc(100vw - 70px);
	}

	
	.pagination-list {
		display: none;
	}
	
	.pesanan-controls .pull-right {
		float: none !important;
		position: fixed; 
		top: 52px;
		left: 0;
		right: 0;
		height: 52px;
		padding: 13px;
		background: #fafafa;
		z-index: 100;
	}
	
	.pesanan-controls .button {
		font-size: 10pt;
	}
	
	.pesanan-controls {
		text-align: center;
		border-bottom: 1px solid #eee;
		margin: 0 -15px;
		padding: 0 10px 10px 10px;
	}
	
}

.ui-widget-header {
	background: none !important;
	border: none !important;
}

.ui-datepicker td {
	text-align: center !important;
}

.ui-datepicker td a {
	background: none !important;
	border: none !important;
	text-align: center !important;
	border-radius: 5px !important;
}

.ui-datepicker td a:hover {
	border:none !important;
		
}

.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active, .ui-button.ui-state-active:hover {
    border: 1px solid #4e025b !important;
    background: #4e025b  !important;
    font-weight: normal;
    color: #ffffff  !important;
}

.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button, html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active {
    border: none !important;
    background: #f6f6f6;
    font-weight: normal;
    color: #454545;
    border-radius: 5px;
}

.text-white {
	color: white;
}

.profile .section {
	display: block; 
	border-bottom: 1px solid #fafafa; 
	color: #666; 
	display: block; 
	padding: 15px 10px;
	-webkit-transition: height 0.5s;
}

.section .fa {
    color:#acacac;
}

.profile .section-container {
	overflow: hidden;
	height: 0;
}

.profile .column, .profile td, .profile th {
	color: #666 !important;
}

.special-field-top input, .special-field-top select {
	border: none !important;
	border-bottom: 2px solid #eee !important;
	outline: none !important;
	background: none !important;
	box-shadow: none;
	padding: 0;
	font-weight: bold;
	border-radius: 0 !important;
}

.red {
	color: red;
}

.uppercase-small-label {
	text-transform: uppercase;
	font-size: 9pt;
	
}

.special-field-top input:focus, .special-field-top select:focus {
	outline: none !important;	
	border: none !important;
	border-bottom: 2px solid #ba14cf !important;
	box-shadow: none;
}

.special-field-top textarea {
	border: none !important;
	outline: none !important;
	background: none !important;
	box-shadow: none;
	padding: 10px 25px;
	border-radius: 0 !important;
	resize: none;
}

.special-field-top textarea:focus {
	outline: none !important;	
	border: none !important;
	box-shadow: none;
	
}

.special-field-top .select:not(.is-multiple):not(.is-loading)::after {
    border-color: #ccc;
    right: 0.5rem;
    z-index: 4;
}
	
.modal-card {
	padding: 20px
}

#swal2-title {
	font-weight: normal !important;
	font-size: 16pt !important;	
}

#swal2-content {
	font-size: 11pt !important;
	font-weight: 300;
}


.switch-field {
	display: flex;
	margin-top: 10px;
	overflow: hidden;
}

.switch-field input {
	position: absolute !important;
	clip: rect(0, 0, 0, 0);
	height: 1px;
	width: 1px;
	border: 0;
	overflow: hidden;
}

.switch-field label {
    width: 100%;
	background-color: #e4e4e4;
	color: rgba(0, 0, 0, 0.6);
	font-size: 14px;
	line-height: 1;
	text-align: center;
	padding: 8px 16px;
	margin-right: -1px;
	border: 1px solid rgba(0, 0, 0, 0.2);
	box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
	transition: all 0.1s ease-in-out;
}

.switch-field label:hover {
	cursor: pointer;
}

.switch-field input:checked + label {
	background-color: #a9a9a9;
	box-shadow: none;
}

.switch-field label:first-of-type {
	border-radius: 4px 0 0 4px;
}

.switch-field label:last-of-type {
	border-radius: 0 4px 4px 0;
}


.depoinfo {
	margin:15px auto 0px;
	border:1px dashed #ddd;
	padding:6px 8px;
	font-size:0.9rem;	
	border-radius:10px;
	background:#fffff2;
}
.depodetails {
	display:flex;
	margin-top:5px;
}
.depodetails div {
	width:100%;
	font-size:0.8rem;
}


.deposafety {
	border:2px dashed #ddd;
	border-radius:5px; 
	margin:5px auto 0; 
	padding:15px;
	font-size:0.8rem;
	max-width:95%;
}

.depo-notes {
	background:lightyellow;
	padding: 15px;
	
}

.depo-notes span {
	display:inline-block;
	color:white;
	background:orange;
	padding:2px 6px;
	margin-bottom:4px;
	border-radius:5px;
}