@import url("sizes.css");
@import url("colors.css");
@import url("aligns.css");
@import url("components.css");
@import url("notika-slider.css");

body{
	margin: 0px; padding: 0px; background: #F3F3F4; font-family: Roboto;
}

.flexbox { display: flex; }
.block { display: block; } 
.clickable { cursor: pointer; }
.vform-label .z-label { font-size: 13px; }

.tag-chooser { 
	display: flex; border: solid #CCCCCC 1px; border-radius: 4px; 
	position: relative; padding: 4px; background: #FFFFFF; overflow: auto; min-height: 58px; }
.tag-chooser .tag-container { display: flex; flex-wrap: wrap; overflow: auto; }
.tag-chooser .tag-container .tag-popup { 
	position: absolute; display: block; top: 50px; max-width: 400px; max-height: 400px; }
.tag-chooser .z-textbox { border: none; margin: 0px; padding: 0px; }

.tag-item { height: 22px; display: block; border-radius: 4px; background: #1ABB9C; border: #1ABB9C; padding: 2px 3px 2px 3px; margin-bottom: 2px; margin-right: 2px; }
.tag-item .z-label { font-size: 10px; color: #fff; }
.tag-item i { color: red; font-size: 14px; }


.login-page { background: #DAA520; }
.login-container {
	background: url(../images/background-rotio.png) no-repeat center center fixed;
	width: 100%; height: 100%; margin: 0px; padding: 0px; border: none; }
.login-title { width: 480px; margin-top: -125px; }

.login-sci-label,
.login-sci-system { color: #4F3013; font-size: 32px; font-family: Bradley-Gratis; }
.login-sci-label { font-family: Hot Pizza; font-size: 50px; font-weight: 700; }

.login-icon { 
	width: 90px; height: 90px; border-radius: 60px; color: #FFFFFF;
	padding: 10px; margin-top: -85px; margin-left: 165px;
	background: url(../images/rotio-small.png) no-repeat center;
  	-webkit-background-size: contain;
  	-moz-background-size: contain;
  	-o-background-size: contain;
  	background-size: contain;
}
.login-panel {
	width: 480px; background: rgba(234,240,256,0.5);
	border-radius: 20px; font-weight: 100;
	color: #222222; z-index: 1;
	padding: 20px 40px 30px 40px; margin: 0;
	text-align: center;
}
.login-button { background: #2F7C7D; font-family: Roboto; font-weight: 700m; font-variant: small-caps; font-size: 22px; }

.user-navigator { background: #53AAED; color: #FFFFFF; padding: 4px; height: 38px; }

.nav-menu { border: none; font-size: 15px; text-shadow: none; padding: 0px 6px 0px 6px; width: 30px; height: 28px; background: #DAA520; }

.navbar .z-menubar {
	background: #53AAED; margin: 0; padding:0; border: 0px;
}
.navbar .z-menubar .z-menu-content {
  line-height: 28px; height: 28px; border: 0; padding: 0 8px; color: #fff;
}
.navbar .z-menubar .z-menu-content .z-menu-text { font-size: 13px; }
.navbar .z-menubar .z-menu .z-menu-content {
	background: #FFD267; border-radius: 5px;
	font-weight: 100; color: #4F3013; z-index: 1;
	padding: 0 7px 0 7px; margin: 0px 4px 0 0; text-align: center; vertical-align: middle;
}
.navbar .z-menubar .z-menu .z-menu-content:hover { background: #109F5B; color: #ffffff; }
.navbar .z-menubar .z-menu .z-menu-icon{ display: none; }

.user-bar { background: #1F1F1F; margin-bottom: 6px; }
.user-menubar { background: none; }
.z-menubar.user-menubar,
.user-menubar .z-menu .z-menu-content {
	background: #53AAED; font-size: 10px; color: #FFFFFF; padding: 0px; margin: 0px;
}
.user-menubar .z-menu-text { font-size: 15px; }

.menu-navigator { background: #DAA520; padding: 0px 2px 2px 2px;}

.nav-button { background: none; border: none; }

.page-container { padding: 6px; background: #F7F7F7; }

.nav-title { padding-top: 10px; font-size: 26px; color: #FFFFFF; }
.form-title { padding: 3px; margin-top: 6px; text-align: center; background: #0B6FA0; color: #FFFFFF; font-size: 18px; font-variant: small-caps; }

.tab-panel-container { padding: 0px 0px 0px 0px; margin: 0px; }

.form-toolbar { background: #0F92F4; padding: 4px; }

.toolbar-button {
	padding: 4px 6px 4px 6px; margin: 0px; background: #1C78BE; border: none; background-shadow: none;
}

.group-label { width: 100%; padding: 4px; background: #D5D5D5; color: #000000; font-family: Roboto; font-variant: small-caps; font-size: 14px; }

.hform { width: 100%; display: block; }
.hform-row { width: 100%; display: flex; flex-direction: row; align-items: stretch; }
.hform-row span { width: 100%; margin: 0px; padding: 0px; }

.hform-label { position: relative; display: inline; min-width: 140px; color: #6F6F77; text-align: right; padding-right: 10px; padding-top: 6px; }
.vform-label { width: 100%; color: #6F6F77; display: inline; }
.z-checkbox-content { color: #6F6F77; }

.hform-label > i { position: absolute; top: 2px; right: 3px; color: #FF0000; font-size: 9px; }
.vform-label > i { position: absolute; top: 2px; right: auto; color: #FF0000; font-size: 9px; }

.view-form,
.view-table { padding: 10px; background: #FFFFFF; }

.left-list-layout .view-table { padding: 2px 0px 0px 0px; }
.left-list-layout .view-form { padding: 3px 0px 0px 0px;}
.left-list-layout .view-form .input-form { padding: 10px; }
.left-list-layout .page-header { padding: 3px; margin: 0px; text-align: center; background: #2A50A3; color: #FFFFFF; font-size: 18px; }

.filter-column .z-auxheader-content { margin: 0px; padding: 0px; background: #F2F2F2; border: #2A50A3; }

.popup-main-menu .z-popup-content { padding: 1px; margin: 0px; }

.group-menu, .group-menu .z-listcell { border: none; background: #2A50A3; }
.group-menu .z-listitem .z-listcell .z-listcell-content { color: #FFFFFF; font-size: 16px; padding: 5px; }
.group-menu .z-listitem .z-listcell .z-listcell-content:hover { color: #111; }

.group-menu .z-listitem-selected,
.group-menu .z-listitem-selected .z-listcell,
.group-menu .z-listitem-selected .z-listcell .z-listcell-content { background: #00B3F3; }

.menu-list, .menu-list .z-listcell { border: none; background: #00B3F3; }
.menu-list .z-listcell-content { color: #FFFFFF; font-size: 16px; padding: 5px; }

.warning-row .z-listcell-content { color: #FF0000; }

.msg-image { text-align: center; }
.msg-button { text-align: center; }
.msg-title { font-size: 20px; }
.msg-content { font-size: 14px; }
.success-icon { color: #1AA15A; }
.error-icon { color: #FE6657; }
.info-icon { color: #41A5C7; }

.info-message .msg-title { color: #41A5C7; }
.info-success .msg-title { color: #1AA15A; }
.invalid-input .msg-title { color: #FE6657; }
.confirm-delete .msg-title { color: #DD4D3E; }
.confirm-delete .yes { background: #DD4D3E; }

.top-filter-panel, .summary-panel {
	vertical-align: middle;  
}
.summary-panel{ float: right; background: #FFB900; padding: 2px 0px 2px 4px; margin: -5px -3px 0px 0px; }
.top-filter-panel .z-hlayout-inner, .summary-panel .z-hlayout-inner{ vertical-align: middle;  margin: 0px; padding: 0px; min-height: 1; }
.summary-omzet { text-align: right; width: 112px; background: transparent; border: none; }

.multiline-short,
.multiline-long,
.multiline-large { resize: none; padding: 6px; font-size: 14px; font-family: Roboto; }

.multiline-short { min-height: 60px; }
.multiline-long { min-height: 90px; }
.multiline-large { min-height: 120px; }

.range-icon { padding-top: 4px !important; }
.float-center { float: center; }
.float-right { float: right; }
.action-list-button { float: center; display: flex; justify-content: center; }
.action-list-button a { margin-right: 8px; }

.ba_list {
    width: 100%; display: inline-block; cursor: pointer;
}
.ba_list .left {
    width: 20%;
    float: left;
    margin-right: 3%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}
.ba_list .right {
    width: 75%;
    float: left
}
.ba_list h3 {
    font-size: 15px;
    font-weight: bold;
    margin: 0px 0 6px
}
.ba_list h3 small {
    float: right;
    color: #ADABAB;
    font-size: 11px;
    line-height: 20px
}

.badge { display: block; text-shadow: none; font-size: 14px; padding: 6px 10px 6px 10px !important; border-radius: 4px; height: 28px !important; color: #ffffff; }
.badge-green { background-color: #82af6f !important; }
.badge-warning { background-color: #f89406 !important; }

.search-box, .action-box {
	background: rgba(234,240,256,0.5);
	border-radius: 8px;
	font-weight: 100;
	color: #222222;
	z-index: 1;
	padding: 10px 10px 10px 10px;
	margin: 0;
}

.search-box .hform, .search-box .vform,
.action-box .hform, .action-box .vform { padding: 6px; }

.padding-top { padding-top: 6px; }
.padding-bottom { padding-bottom: 6px; }

.promo-list-cell { display: block; margin: 0px; padding: 0px; width: 100%; }
.promo-list-cell-group { display: flex; padding: 0px; margin: 0px; float: right; }
.promo-cell-artikel,
.promo-cell-tglmulai, 
.promo-cell-tglselesai { width: 140px; text-align: center; }
.promo-cell-aktif { width: 90px; text-align: center; }

.caption-dialog {
	padding: 4px; background-color: #DAA520; color: #fff; font-size: 16px; text-shadow: -1px -1px 0 rgba(0,0,0,0.3);font-weight:bold; color: #FFFFFF; text-align: center; vertical-align: middle;
}

.warning-block, .warning-block .z-auxheader-content { background: #DD4D3E; }

.strip-line { display: block; max-height: 3px; background: #DAA520; width: 100%; }
.sharp-line { display: block; max-height: 1px; background: #DAA520; width: 100%; }

.payment-bar { display: flex; }
.payment-bar > div { margin-right: 4px; }
.payment-node { position: relative; border: solid #E2E2E2 1px; padding: 2px; width: 130px; height: 80px; }
.payment-node .nominal { position: absolute; top: 30px; right: 4px; font-family: Roboto; font-size: 22px; color: #FB9A09; font-weight: bold; }
.payment-node .card-no { position: absolute; left: 4px; bottom: 2px; font-family: Roboto; font-size: 14px; color: #000; }
.payment-node .toolkit { position: absolute; top: 4px; right: 4px; }
.payment-node .z-image { max-width: 120px; max-height: 70px; position: absolute; bottom: 3px; left: 3px; }

.report-dialog { padding: 0px; margin: 0px; }
.report-dialog .filter-view { padding-top: 6px; }
.report-dialog .toolbar { display: flex; justify-content: flex-end; padding: 4px; background: #C0C0C0; padding: 4px 3px 4px 6px; }