@import "https://lib.cecikut.com/css/icofonts.css";
@import "https://lib.cecikut.com/css/rpg.font.css";

body { background: #333333; /*urls('https://www.produksarawak.com/wp-content/uploads/2019/01/original-background.jpg')*/ }
body.mobile { background: #ffffff; /*urls('https://www.produksarawak.com/wp-content/uploads/2019/01/original-background.jpg')*/ }
audio, canvas, video { display: inline-block; }
img {image-rendering: -webkit-optimize-contrast;}

body:not(.mobile) ondesktop, body:not(.phone) ontablet {}
/*body:not(.mobile.phone) onmobile {display:none !important;}*/
body:not(.phone) onphone {display:none !important;}

body.phone onphone {}
body.mobile onmobile {}
body.mobile.phone onmobile, body.mobile ondesktop, body.phone ontablet {display:none !important;}

.scrollbarless {overflow:hidden !important;}
.overflowless {overflow:hidden !important;}
.ellipsis {white-space: nowrap !important;overflow: hidden !important;text-overflow:ellipsis !important;width:calc(95%) !important;}
.blocks {display: block !important;}
.invisible {visibility: hidden !important}
.hiding {display: none}

.paddingless {padding:0 !important;}
.paddingless-top {padding-top:0 !important;}
.paddingless-left {padding-left:0 !important;}
.paddingless-bottom {padding-bottom:0 !important;}
.paddingless-right {padding-right:0 !important;}
.paddingless-horizontal {padding-left:0 !important;padding-right:0 !important;}
.paddingless-vertical {padding-top:0 !important;padding-bottom:0 !important;}

.marginless {margin:0 !important;}
.marginless-top {margin-top:0 !important;}
.marginless-left {margin-left:0 !important;}
.marginless-bottom {margin-bottom:0 !important;}
.marginless-right {margin-right:0 !important;}
.marginless-horizontal {margin-left:0 !important;margin-right:0 !important;}
.marginless-vertical {margin-top:0 !important;margin-bottom:0 !important;}

.borderless {border:0 !important;}
.borderless-top {border-top:0 !important;}
.borderless-left {border-left:0 !important;}
.borderless-bottom {border-bottom:0 !important;}
.borderless-right {border-right:0 !important;}
.borderless-horizontal {border-left:0 !important;border-right:0 !important;}
.borderless-vertical {border-top:0 !important;border-bottom:0 !important;}

.outlineless {border:0!important;box-shadow:0!important}

.squared {border-radius:0 !important;}
.squared-top {border-top-right-radius:0 !important;border-top-left-radius:0 !important;}
.squared-left {border-top-left-radius:0 !important;border-bottom-left-radius:0 !important;}
.squared-bottom {border-bottom-right-radius:0 !important;border-bottom-left-radius:0 !important;}
.squared-right {border-top-right-radius:0 !important;border-bottom-right-radius:0 !important;}

.transparent {background:transparent !important;}

.text-left {text-align: left !important;}
.text-right {text-align: right !important;}
.text-justify {text-align: justify !important;}
.text-center {text-align: center !important;}

.line-height {line-height: 1 !important;}
.line-height-large {line-height: 1.5 !important;}

.valign-inherit {vertical-align: inherit !important;}
.valign-middle {vertical-align: middle !important;}

.readonly, *[readonly] { cursor: default !important; pointer-events: none !important; }

img.px24 {width:24px !important;height:24px !important;object-fit:cover;}
img.px32 {width:32px !important;height:32px !important;object-fit:cover;}
img.px40 {width:40px !important;height:40px !important;object-fit:cover;}
img.px50 {width:50px !important;height:50px !important;object-fit:cover;}
img.px64 {width:64px !important;height:64px !important;object-fit:cover;}
img.px100 {width:100px !important;height:100px !important;object-fit:cover;}
img.px120 {width:120px !important;height:120px !important;object-fit:cover;}
img.px150 {width:150px !important;height:150px !important;object-fit:cover;}
img.px200 {width:200px !important;height:200px !important;object-fit:cover;}

img.white {background-color: #ffffff !important;}

img.flag[src*='flag/'], img.flag[data-src*='flag/'] {width:auto;height:16px;vertical-align: middle}

.inherit-font {color:inherit !important;}
a.inherit {color:inherit;border-bottom:1px dotted;}
a.inherit:hover {opacity:0.95;font-weight:bold;cursor:pointer;}
a.inheritless {color:inherit !important;border-bottom:0px solid;}
a.inheritless:hover {opacity:0.5;}
.uppercase {text-transform:uppercase !important;}
.lowercase {text-transform:lowercase !important;}
.capitalize {text-transform:capitalize !important;}
.nowrap {white-space: nowrap !important}
.prewrap {white-space: pre-wrap !important}
.preline {white-space: pre-line !important}
.wordbreak {word-break: break-all !important;word-wrap: break-word !important}
.ui-effects-transfer { border: 2px dashed rgba(255,255,234,0.25); background: rgba(255,255,234,0.5); z-index: 9999; }
.ui-loader {display: none}
body.mobile .ui.accordion > .content {  }
*[data-do], *[go-tab] {cursor: pointer;}
input,textarea {cursor: text !important;}
input[type='number'] {-webkit-appearance: none !important;-moz-appearance: textfield !important;}

::placeholder { color: #999999 !important; }
:-ms-input-placeholder { color: #999999 !important; }
::-webkit-input-placeholder { color: #999999 !important; }

.ui.text.little {font-size: .85em;}

.ui.menu:not(.vertical) .item[data-tab] text, .ui.menu:not(.vertical) .item[href] text {display:block;font-weight:bold;font-size:80%;}
.ui.vertical.menu.left .item>i.icon, .ui.vertical.menu.left .item>i.icons { float:none; margin:0 .5em 0 0; }

.ui.form .ui.dropdown > .remove.icon {right:1em !important;font-size:18px !important;}

.ui.dropdown .text > em[data-emoji], .ui.dropdown .menu .item > em[data-emoji] {
	margin-left: 0;
	float: none;
	margin-right: .78571429rem;
	font-size: 80%;
	vertical-align: top;
}
.ui.dropdown .menu {
	z-index: 9999 !important
}
.ui.dropdown .menu .item > em[data-emoji] {
	font-size: 85%;
}
.ui.dropdown .menu.fluid {
	width: 100% !important;
}
.ui.dropdown .menu .item span.parent {
	display: none !important
}
.ui.dropdown .menu div.header {
	font-size: 11px !important;
}

.ui.modals .mref.close.icon { position: fixed; top: 0; right: 0; margin: 5px; z-index: 10000; }
.ui.modals .mref.close.button { position: fixed; bottom: 0; left: 40%; right: 40%; margin: 0; z-index: 10; width: auto; }
body.mobile .ui.modals .mref.close.button { left: 30%; right: 30%; }

/* FORM */
:root { --fieldInputColor: #eaeaea; }
.ui.form .fields {}
.ui.form .fields > .field:first-child {border-left:1px solid transparent;}
.ui.form .field {padding:0px !important;margin:0;background:var(--fieldInputColor);border-radius:4px;text-align:left;border:1px solid transparent;}
.ui.form .field.checkboxs {margin:0 0 .5em 0 !important;background: transparent;border: none;}
.ui.form .field > label {padding:4px 8px 0px 8px;margin:0;font-size:11px;font-weight:normal;color:rgba(0,0,0,1);}
.ui.form .field > label i.flag {vertical-align: sub}
.ui.form .field .ui.input input, .ui.form .field .ui.input textarea {margin:0;padding:5px;margin-top:3px;margin-bottom:4px;background:transparent !important;border:none;font-weight:bold;min-height:30px;}
.ui.form .field .ui.input:not(.icon), .ui.form .field .ui.input:not(.labeled) {padding-left:5px;}
.ui.form .field .ui.input.icon > i.icon {margin-left:0px !important}
.ui.form .field .ui.input.labeled > .ui.label {padding:10px 5px;background:transparent !important;border:0 !important;}
.ui.form .field .ui.input.labeled.right > .ui.label {padding-right:10px;}
.ui.form .field .ui.input.icon > i.icon {margin-left:-4px !important;}
.ui.form .field .ui.input.icon > input {padding-left:2rem;}
.ui.form .field .ui.input.icon.labeled > input {padding-left:2.25rem;}
.ui.form .field .ui.dropdown {padding:8px .5em !important;background:transparent !important;}
.ui.form .field .ui.dropdown.multiple {padding:4px 0 !important;}
.ui.form .field .ui.dropdown > .text {font-weight: bold !important;margin-bottom:1px;;background:transparent !important}
.ui.form .field .ui.dropdown:not(.selection) > .remove.icon {margin-top: -1.3em !important;}

.ui.form .field .ui.input.color text { display:inline-block; padding:5px; font-size: 16px; cursor:pointer; width: 100%; }
.ui.form .field .ui.input.color text span { opacity: 0.4; }
.ui.form .field .ui.input.color input[type='color'] { display:inline-block; -webkit-appearance: none;-moz-appearance: none;appearance: none;border: none !important; height: 32px !important; min-width:32px; max-width: 32px;margin-left: -2px;}
.ui.form .field .ui.input.color input[type='color']:hover { opacity: 0.8; cursor: pointer !important; }
.ui.form .field .ui.input.color input[type='color']::-moz-color-swatch-wrapper {padding: 0 !important;}
.ui.form .field .ui.input.color input[type='color']::-webkit-color-swatch-wrapper {padding: 0 !important;}
.ui.form .field .ui.input.color input[type='color']::-moz-color-swatch {border: 1px solid rgba(0,0,0,0.25) !important;border-radius:5px;}
.ui.form .field .ui.input.color input[type='color']::-webkit-color-swatch {border: 1px solid rgba(0,0,0,0.25) !important;border-radius:5px;}

.ui.form .field label img.ui.image.flag {
	vertical-align: sub !important;
	height: 11px !important;
	margin-top: -.5em !important;
	margin-right: 5px;
}
.ui.form .field label text {
	vertical-align: middle !important;
}

.ui.form .field {padding:0;margin:0 !important;margin-bottom: 8px !important;}
.ui.form .fields {margin:0 !important;}
.ui.form .fields .field {margin-left:4px !important;margin-right:4px !important;}
.ui.form .fields .field:first-child {margin-left:0px !important;}
.ui.form .fields .field:last-child {margin-right:0px !important;}
body.mobile .ui.form .field {margin-left:0px !important;margin-right:0px !important;}
/*.ui.form .fields .field {padding:0;margin:0;}

body.mobile .ui.form .fields .field {padding-left: 0 !important;padding-right: 0 !important}
body.mobile .ui.form .fields {margin:0 .2em !important;}
.ui.form .fields .field:last-child {}*/

.ui.form .field .value { display: none !important; }
.ui.form .field:hover:not(.checkboxs) { background: lightyellow !important; }

.ui.form.basic .field,
.ui.form .field.basic
{ background: #ffffff; border-color: #dddddd !important;}
.ui.form.basic .fields > .field:first-child,
.ui.form .fields > .basic.field:first-child
{ border-color: #dddddd !important;}

.ui.form .field.error, .ui.form .fields.error .field
{ background: rgba(219,40,40,0.10); border-color: #db2828 !important;}
.ui.form.basic .field.error, .ui.form.basic .fields.error .field
{ background: #ffffff; border-color: #db2828 !important;}

.ui.form .fields > .error.field:first-child
{ border-color: #db2828 !important;}

.ui.form .field.success, .ui.form .fields.success .field
{ background: rgba(33,186,69,0.10); border-color: #21ba45 !important;}
.ui.form.basic .field.success, .ui.form.basic .fields.success .field
{ background: #ffffff; border-color: #21ba45 !important;}

.ui.form .fields > .success.field:first-child
{ border-color: #21ba45 !important;}

.ui.form .field.warning, .ui.form .fields.warning .field
{ background: rgba(242,113,28,0.10); border-color: #F2711C !important;}
.ui.form.basic .field.warning, .ui.form.basic .fields.warning .field
{ background: #ffffff; border-color: #F2711C !important;}

.ui.form .fields > .warning.field:first-child
{ border-color: #F2711C !important;}

.ui.form .field.loading
{ animation: form_input_loading 0.5s infinite; }

@keyframes form_input_loading {
  from {background-color: #eeeeee;}
  to {background-color: #dddddd;}
}

.ui.form[name='product'] .ui.dropdown > .ui.label { margin-top: 4px !important; }

.ui.form response {
	display: block;
	margin: 1em auto;
}
.ui.form upload {
	display: block;
	padding: 5px 10px;
	background: var(--fieldInputColor);
	border: 2px dashed transparent;
	outline: 0;
	border-radius: 4px;
	margin: 1em 0;
	color: #000000;
	position: relative;
}
.ui.form upload:hover {
	border-color: transparent;
}
.ui.form upload .before {
	content: '';
	position: absolute;z-index: 1;
	top:0;left:0;right:0;bottom:0;
	display: block;
	cursor: pointer !important;
}
.ui.form upload * {
	
}
.ui.form upload > label {
	display: block;
	padding:0 0 5px 0;
	margin:0;
	font-size:11px;
	font-weight:normal;
	color:rgba(0,0,0,1);
}
.ui.form upload input[type='file'] {
	border: none !important;
	outline: none !important;
	padding: 0 !important;
	background: transparent !important
}
.ui.form.preloading upload input[type='file'] {
	display: none;
}

.ui.form upload .upload-requirement {
	font-weight: bold;
	opacity: 0.75
}

.ui.form upload indicator {
	position: relative;
	display: none;
}
.ui.form upload indicator progress {
	width: 100%;
	height: 10px;
	margin-bottom: 16px;
	border-radius: .25rem;
	-webkit-appearance: none;
		appearance: none;
		overflow: hidden;
		border: none !important;
		background: #eee;
}
.ui.form upload indicator progress[value]::-webkit-progress-bar,
.ui.form upload indicator progress[value]::-moz-progress-bar {
		background-color: #0d71bb;
}
.ui.form upload indicator label {
	position: absolute;
	bottom:0; left: 0; right:0;
	z-index: 1;
	display: block;
	font-weight: bold;
	font-size: 12px;
}
.ui.form upload indicator label size {
	float: left;
	display: inline-block;
}
.ui.form upload indicator label percent {
	float: right;
	display: inline-block;
}
.ui.form upload indicator label percent {
	float: right;
	display: inline-block;
}



.field value {display: none !important;}
.grouped.fields error, .field error {display: block;font-size:10px;padding:5px 10px;color:#db2828;}
.grouped.fields:not(.error) error, .field:not(.error) error {display: none !important;}

/* DROPDOWN */
.ui.dropdown img.ui.image.flag {
	vertical-align: middle !important;
	height: 11px !important;
	margin-top: -.8em !important;
}

/* DIALOG */
.ui.dialog.modal .ui.input.readonly {
	position: relative;
}
.ui.dialog.modal .ui.input.readonly::before {
	content: '';
	display: block;
	position: absolute;
	top:0;left:0;bottom:0;right:75px;
}

/* IMAGE AVATAR */
.image.avatar {
	position: relative;
	overflow: hidden;
	display: inline-block;
	vertical-align: middle !important
}
.image.avatar .ui.image.source {
	display: inline-block;
	position:absolute;z-index:0;
	object-fit:cover;
	margin:0 !important;
	background: #ffffff !important;
}
.image.avatar .ui.image.frame {
	display: inline-block;
	position:absolute;z-index:1;
	object-fit:cover;
	top:0;left:0;right:0;bottom:0;
	width:inherit;height:inherit;
	margin:0 !important;
	border-radius: 0 !important;
}

.ui.label[count] {display:none;margin-top:-1px;margin-right:-1px}
.ui.modal .header.compact, .ui.modal .content.compact, .ui.modal .actions.compact {padding:10px !important;}

.ui.segments.active {background:#eeeeee;}
.ui.segments.selected {background:#dddddd;}
.ui.segments.active .ui.segment, .ui.segments.selected .ui.segment {background:transparent;}

.ui.segment.compact {padding:.5em;}
.ui.segment.compact.very {padding:.25em;}

.offbar {display: block;position:fixed;z-index:9999;top:0;left:0;right:0;margin:0;text-align: center;}
.offbar .ui.button {border:2px solid #ffffff;border-top: none;}

.centralized {
	display: block;
	position: absolute !important;
	top:50%;left:50%;
	transform: translate(-50%, -50%);
	min-width: 300px;
}
.centralized.relative {
	width: 100% !important;
	position: static !important;
	transform: translate(0, 0);
	margin-top: 0 !important;
}
.engraved, .centralized.ui.header {
	color: #888888;
	text-shadow: 0px 1px 0px rgba(255,255,255,.3), 0px -1px 0px rgba(0,0,0,.7);
	font-weight: bold
}

.ui.input.spectrum .sp-replacer {border:none;padding:5px 3px;background:transparent;margin-bottom:4px;}
.ui.input.spectrum .sp-dd {display: none}
.ui.input.spectrum .sp-preview {margin:0;border-color:#aaaaaa;border-radius:.28571429rem;overflow: hidden}
.ui.input.spectrum .sp-preview-inner {}
.ui.input.spectrum text {display:inline-block;font-weight: bold;padding:5px;}
.sp-container {border-color:#aaaaaa !important;border-radius:.28571429rem;box-shadow: 0 2px 4px 0 rgba(34,36,38,.12),0 2px 10px 0 rgba(34,36,38,.15)}
.sp-container .sp-thumb-el {border-radius:.28571429rem;overflow: hidden}
.sp-container .sp-choose {padding:8px 10px;font-weight: bold;text-transform: uppercase;}
.sp-container .sp-input {background: #ffffff;font-weight: bold;outline:none}
.sp-container .sp-color, .sp-hue, .sp-clear {border-radius:.28571429rem;border-color:none;}