body { padding:0px;}
.z-window { padding:0px; }
.z-window-content { padding:0px; }

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 10px rgba(0,0,0,0.3);
    box-shadow: inset 0 0 10px rgba(0,0,0,0.3);
    border-radius: 2px;
}
::-webkit-scrollbar-thumb {
    border-radius: 2px;
    -webkit-box-shadow: inset 0 0 10px rgba(190, 178, 103, 1); 
    box-shadow: inset 0 0 10px rgba(190, 181, 103, 1); 
}

::-webkit-scrollbar-thumb:hover {
	background: #a99a51;
}


.z-messagebox-window .z-window-header,.z-messagebox-window.z-window-modal 
.z-window-content,.z-messagebox-window.z-window-highlighted .z-window-content{
    padding:10px
}
.z-messagebox-icon { margin-top:10px; }
.z-combobox-popup { max-height: 130px; }
.z-notification-content { border-left: 4px solid;}

.win-content-grey z-window-content { background:gold }

.sfont-s { font-size:10px; }
.sfont-m { font-size:13px; }
.sfont-l { font-size:14px; }
.sfont-0 { font-size:11px; }
.sfont-1 { font-size:12px; }
.sfont-2 { font-size:16px; }
.sfont-3 { font-size:18px; }
.sfont-4 { font-size:20px; }
.sfont-5 { font-size:22px; }
.sfont-6 { font-size:24px; }
.sfont-7 { font-size:26px; }
.sfont-8 { font-size:28px; }
.sfont-9 { font-size:30px; }

.sfont-bold { font-weight: bold; }

.div-rounded-10 { border-radius: 10px; }
.div-rounded-15 { border-radius: 15px; }
.div-rounded-20 { border-radius: 20px; }
.div-rounded-25 { border-radius: 25px; }


.bg__primary { background: #ffcb50}
.text__primary {color: #769e7e}

.bg-disable { background:#f7f7f7; } 
.bg-head-color { background: #53468f; }
.bg-color { background:#777191; }
.bg-grey-0 { background: #ededed; }
.bg-grey-1 { background: #828282; }
.bg-info-0 { background: #5bc0de; }
.bg-listbox {background: var(--bg-listbox); }

.bg-p-white { background: #ffffff; }
.bg-p-blue { background: #36a2eb; }
.bg-p-red { background: #FF6384; }
.bg-p-green { background: #9CCC65; }
.bg-p-orange { background: #FF7043; }
.bg-p-yellow { background: #ffce56; }
.bg-p-violet { background: #7E57C2; }

.bg-s-white { background: #ffffff; }
.bg-s-blue { background: #b1dcf8; }
.bg-s-red { background: #ffaabb; }
.bg-s-green { background: #d6eabf; }
.bg-s-orange { background: #ffbfaa; }
.bg-s-yellow { background: #ffe6aa; }
.bg-s-violet { background: #cfc0e9; }

.text-p-white { color: #ffffff; }
.text-p-blue { color: #36a2eb; }
.text-p-red { color: #FF6384; }
.text-p-green { color: #9CCC65; }
.text-p-orange { color: #FF7043; }
.text-p-yellow { color: #ffce56; }
.text-p-violet { color: #7E57C2; }
.text-p-grey { color: #828282; }
.text-p-grey-0 { color: #ededed; }

.div-overflow { overflow: auto; }
.txt-noresize { resize:none; }
.set-disabled { pointer-events:none;opacity: 0.7;}

.menu-left-border a:hover{ border-left: 5px solid gold; }

.d-flex-row {
	display: flex;
	flex-direction: row;
}

.d-flex-col {
	display: flex;
	flex-direction: column;
}

.Stick-Top-Left {
	vertical-align: top;
	text-align: left;
}

.icon-size-14 { width:14px; height:14px;}
.icon-size-15 { width:15px; height:15px;}
.icon-size-16 { width:16px; height:16px;}
.icon-size-17 { width:17px; height:17px;}
.icon-size-18 { width:18px; height:18px;}
.icon-size-19 { width:19px; height:19px;}
.icon-size-20 { width:20px; height:20px;}
.icon-size-24 { width:24px; height:24px;}
.icon-size-32 { width:32px; height:32px;}
.icon-size-40 {	width:40px;	height:40px;}
.icon-size-48 {	width:48px;	height:48px;}
.icon-size-60 {	width:60px;	height:60px;}

/* Menu mengunakan ahref */
.Top-Menu { color: grey; }
.Top-Menu:hover{
	border-bottom: 2px solid #fcba03;
	background: rgba(87, 87, 87, 0.7);
	color:white;
}
.Top-Menu:active {background: rgba(87, 87, 87, 0.5);}

/* Center Div */
.centered {
    border-radius: 5px;
    position: fixed;
    top: 50%;
    left: 50%;
    width: 400px;
    text-align: center;
    background: #f7f7f7;
    padding:35px;
    box-shadow: 2px 5px 13px #888888;
    /* bring your own prefixes */
    transform: translate(-50%, -50%);
}

.div-shadow{ box-shadow: 2px 2px 10px #d6d6d6; }
.no-resize { resize:none }

.dot {
  height: 10px;
  width: 10px;  
  border-radius: 50%;
  display: inline-block;
}


.button_back {
    display: block;
    color:white;
    text-align: center;
    border-radius: 0px;
    font-weight: bold;
    line-height: inherit;
}

.button_back:hover{ background:grey; }


/* Nav Menu : Bootstrap */
.dropdown-head {
    display: block;
    width: 100%;
    padding: .25rem 1.5rem;
    clear: both;
    font-weight: 400;
    color: #212529;
    text-align: inherit;
    white-space: nowrap;
    background-color: transparent;
    border: 0;
}

/* Toolbox */
.dropdown-menu .z-a:hover { background: #dbc68c;}

/* Header Title Bar */
.headerTitle {
	background: var(--app_bg);
}

.circle-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background-color: #fef5e7;
    border-radius: 50%;
    text-align: center;
    text-decoration: none;
    line-height: 28px;
}

.circle-button:hover{
    background-color: white;
}

.circle-button:focus,
.circle-button:active {
    box-shadow: none !important;
    outline: none !important;
}

/* Profile Icon */
.profile-sm {
	width:22px;
}

.profile-md {
	width:42px;
}

.profile-xl {
	width:62px;
}


/* Setting offcanvas*/
.offcanvas-size-xl {
    --bs-offcanvas-width: min(95vw, 600px) !important;
}
.offcanvas-size-xxl {
    --bs-offcanvas-width: min(95vw, 90vw) !important;
}
.offcanvas-size-md { /* add Responsivenes to default offcanvas */
    --bs-offcanvas-width: min(95vw, 400px) !important;
}
.offcanvas-size-sm {
    --bs-offcanvas-width: min(95vw, 250px) !important;
}

.inc-chat {
	position: absolute;
    bottom: 10px;
    width: 400px;
    height: 500px;
    background: white;
    right: 10px;
    border: 3px solid var(--app_bg);
    border-radius: 10px;
}

.titleCaption {
    display: flex;
    overflow: hidden;
    flex-grow: 1;
    margin-right: 50px;
    align-items: center;
}

.padding_content {
	padding: 0 10px 0 10px;
}

/* Tombol Copy*/
.copy-btn {
	text-decoration: none;
	color: #374151;
	cursor: pointer;
}

.copy-btn:hover {
	color: black;      
}

.copy-btn:active {
	background-color: transparent;
	color: gray;
}

.scale-25 {transform:scale(0.25); transform-origin:left center;	}
.scale-50 {transform:scale(0.50); transform-origin:left center;	}
.scale-75 {transform:scale(0.75); transform-origin:left center;	}
.scale-80 {transform:scale(0.80); transform-origin:left center;	}
.scale-90 {transform:scale(0.90); transform-origin:left center;	}

@media screen and (max-width: 768px) {
	.padding_content {
		padding:0;
	}
	.inc-chat {
		position: absolute;
	    bottom: 0;
	    width: 100%;
	    height: 100%;
	    background: white;
	    right: 0;
	    border: 2px solid var(--app_bg);
	    border-radius: 0px;
	    z-index:9999;
	    transition: width 1s, height 2s;
	}
}