/*

1. GLOBAL
2. HEADER & FOOTER
3. MENU
4. BUTTON
5. CONTENT
6. MODAL
7. FORM
8. TABLE
9. PAGE

*/

/*
1. GLOBAL
*/
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
@font-face {
   font-family: 'opensans';
   src: url(../../../assets/fonts/OpenSans-Regular.ttf) format("truetype");
}

@font-face {
   font-family: 'Poppins';
   src: url(../../../assets/fonts/Poppins-Regular.ttf) format("truetype");
}
*{
	font-family: 'Poppins', sans-serif;
}
red {
	color: red;
}

/*
2. HEADER
*/
body {
	font-family: 'Poppins';
	width: 100%;
	background-color: #f3f2ea;
}
.az-ltheme {
	position: absolute;
	width: 100%;
	height: 85%;
}

.az-ltheme:has(.mini-view) .az-btn-menu {
	display: block;
}

.az-ltheme:not(.mini-view) .az-btn-menu {
	display: none;
}

.az-ltheme.mini-view .image-logo {
	display: none;
}

.az-ltheme-left {
	z-index: 8;
	width: 250px;
	min-width: 250px;
	transition: width 0.1s;
	-webkit-transition: width 0.1s;
	-moz-transition: width 0.1s;
	position: absolute;
}
.az-ltheme-right {
	padding: 0px 20px 40px 20px;
	margin-left: 250px;
}
.az-breadcrumb {
	font-family: 'Tahoma';
	opacity: .7;
	padding-top: 12px;
	text-align: left;
	padding-bottom: 5px;
	font-size: 10px;
}
	.az-breadcrumb span.title {
		font-weight: bold;
	}

.az-ltheme-body {
/*	background-color: #eaf5f9;*/
	position: relative;
}
	.az-ltheme-body .az-ltheme-left {
		background: var(--primary-color);
		height: 100%;
	}
	@media (max-width: 740px) {
		.az-ltheme-body .az-ltheme-left {
		 height: 0px;
		}
	  }
.az-ltheme-header {
	background-color: #151414;
	padding: 5px;
	position: relative;
}
.az-ltheme-image-header .image-header {
	overflow: hidden;
    height: 70px;
    background-color: #0E0B08;
}
	.az-ltheme-image-header .image-header img {
		width: 100%;
		opacity: 0.3;
	}
	.az-ltheme-image-header .header-content {
		position: absolute;
	    top: 10px;
	    left: 5px;
	    width: 100%;
    	color: #fff;
	}

.header-content {
/*	background: var(--accent-secondary-color);*/
/*	border-bottom: 1px dashed var(--accent-secondary-color);*/
	margin-bottom: 20px;
}
.header-content .image-logo, .header-content .app-info {
	display: inline-block;
	vertical-align: top;
	padding-right: 10px;
}
.header-content .image-logo {
	padding: 1.5rem;
}
/*.header-content .image-logo img {
	height: 50px;
}*/
.header-content .app-info {
	font-size: 20px;
    font-weight: bold;
    font-family: "Poppins";
}
	.header-content .app-info .app-info-description {
		font-size: 12px;
		font-family: "arial";
	}

.account-box {
	float: right;
	margin-right: 25px;
}
	.account-box .account {
		position: relative;
	}
.account-box .account img {
		width: 30px;
		height: 30px;
		border-radius: 50%;
		margin-top: 5px;
		border: 1px solid rgba(3, 9, 120, 0.8);
	}
	.account-box .account-container {
		text-align: center;
		display: inline-block;
	}
		.account-box .account-container .icon-user {
			border-radius: 50%;
			border: 2px solid #45474B;
			display: inline-block;
			padding: 3px 9px;
			font-size: 18px;
		}
		.account-detail {
			position: absolute;
			right: 0px;
			top: 70px;
			z-index: 10;
			width: 292px;
		}
	.account-detail .account-detail-triangle {
		height: 0;
		width: 0;
		border-bottom: 10px solid #313132;
		border-right: 5px solid transparent;
		border-left: 5px solid transparent;
		position: absolute;
		top: -10px;
		right: 16px;
	}
	.account-detail .account-detail-triangle-inner {
		    height: 0;
		    width: 0;
		    border-bottom: 10px solid white;
		    border-right: 5px solid transparent;
		    border-left: 5px solid transparent;
		    position: relative;
		    right: 5px;
		    top: 2px;
	}
	.account-detail .account-detail-content {
/*		background-color: rgb(255, 255, 255);*/
/*		padding: 20px;*/
/*		border-top: 3px solid rgb(14, 11, 8);*/
/*		border-bottom: 3px solid rgb(14, 11, 8);*/
		background-color: white; 
		display: flex; 
		flex-direction: column; 
		gap: 1rem; 
		padding: 1rem;
		border: #005F72 1px solid;
		border-radius: 1rem;
	}
.account {
	cursor: pointer;
}
.account:hover .account-detail {
	display: block;
	cursor: pointer;
}


.outlet-box {
	float: right;
	margin-right: 25px;
}
	.outlet-box .outlet {
		position: relative;
	}
.outlet-box .outlet img {
		width: 30px;
		height: 30px;
		border-radius: 50%;
		margin-top: 5px;
		border: 1px solid rgba(3, 9, 120, 0.8);
	}
	.outlet-box .outlet-container {
		text-align: center;
		display: inline-block;
	}
		.outlet-box .outlet-container .icon-outlet {
			border-radius: 50%;
			border: 2px solid #45474B;
			display: inline-block;
			padding: 3px 7px;
			font-size: 18px;
		}
.outlet-detail {
	position: absolute;
	right: 0px;
	top: 70px;
	z-index: 10;
	display: none;
	width: 292px;
}
	.outlet-detail .outlet-detail-triangle {
		height: 0;
	    width: 0;
	    border-bottom: 10px solid #313132;
	    border-right: 5px solid transparent;
	    border-left: 5px solid transparent;
	    position: absolute;
	    top: -10px;
	    right: 42px;
	}
	.outlet-detail .outlet-detail-triangle-inner {
		    height: 0;
		    width: 0;
		    border-bottom: 10px solid white;
		    border-right: 5px solid transparent;
		    border-left: 5px solid transparent;
		    position: relative;
		    right: 5px;
		    top: 2px;
	}
	.outlet-detail .outlet-detail-content {
		background-color: rgb(255, 255, 255);
		padding: 20px;
		border-top: 3px solid rgb(14, 11, 8);
		border-bottom: 3px solid rgb(14, 11, 8);
	}
.outlet {
	cursor: pointer;
}
.outlet:hover .outlet-detail {
	display: block;
	cursor: pointer;
}


.az-content-container {
	padding: 10px;
    background-color: #fdfbfb;
    box-shadow: 0px 4px 12px rgb(0 0 0 / 16%);
    border-radius: 4px;
    color: #2f3d56;
}

.az-content-container .list-order, .az-content-container .box-cart-wrap .box-cart{
	border-radius: 4px;
}

.az-header-toolbar {
	color: #fff;
/*    height: 30px; */
    text-align: center;
    position: relative;
    top: 0px;
    right: 0px;
    padding: 12px 0;
}
	.az-header-toolbar .container-language {
		padding-right: 15px;
		font-size: 10px;
		padding-top: 6px;
	}
		.az-header-toolbar .container-language > div {
			display: inline-block;
			vertical-align: middle;
		}
		.container-language .az-language-list button.active{
			background-color: #1f1f1f;
		}

footer {
	position: fixed;
	right: 0px;
	bottom: 0;
	padding: 10px;
	font-size: 10px;
}


/*
3. MENU
*/
a:focus, a:hover {
	color: #313132;
}

.az-menu {/*	padding: 10px 0px;*/color: #3e3e46;margin: 0.5rem;}
	.az-menu ul {
		padding-left: 26px;
	}
		.az-menu ul li {
			list-style: none;
			position: relative;
			padding-top: 0.5rem;
			padding-bottom: 0.5rem;
			margin-bottom: 3px;
		}
	.az-menu > ul {
		padding-left: 0px;
	}
	.az-menu ul li a {
		padding: 12px 8px;
		display: block;
		font-size: 14px;
		font-weight: bold;
	}
		.az-menu ul > li:hover, .az-menu ul > li.is-active {
			font-weight: bold;
			overflow: hidden;
			background: #313132;
			border-radius: 1rem;
		}
			.az-menu ul > li:hover a {
				color: #fff;
			}
			.az-menu ul > li:has(.is-active) a {
				color: #fff;
			}

			.az-menu ul > li:hover > a, .az-menu ul > li.active > a, .az-menu ul > li.is-active > a {
				color: #fff;
			}
			.az-menu ul > li:hover > i, .az-menu ul > li.active > i, .az-menu ul > li.is-active > i {
				color: #fff;
			}
		.az-menu ul > li ul {
			background-color: var(--accent-color);
			padding-top: 7px;
			padding-bottom: 7px;
			margin-bottom: -5px;
			display: none;
			background: #d5d0b875;
			color: #fff;
		}
			.az-menu > ul > li.is-active > ul {
				display: block;
			}
		.az-menu ul > li ul li {
			font-weight: normal;
		}
			.az-menu ul > li ul li:hover, .az-menu ul > li ul li.active {
				background-color: rgba(0,0,0,0);
			}
			.az-menu ul > li ul li a {
				padding: 2px 7px;
				color: #313132;
			}

	.az-menu ul li a i.fa {
		display: inline-block;
		vertical-align: middle;
		width: 25px;
		text-align: center;
	}
		.az-menu ul li ul li a i.fa {
			width: 17px;
		}
	.az-menu .caret-submenu {
		float: right;
	}
	.az-menu .az-submenu-caret {
	    position: absolute;
	    top: 21px;
	    right: 12px;
	    font-size: 14px;
	}
		.az-menu ul li ul li .az-submenu-caret {
		    top: 6px;
		}
	.az-menu ul > li ul li ul {
		padding-left: 17px;
	}
	.az-menu .az-menu-title {
		display: inline-block;
		vertical-align: middle;
		line-height: 1;
	}
	.az-submenu + ul > li .az-menu-title {
		font-weight: normal;
	}
	.az-submenu + ul > .active .az-menu-title {
		font-weight: bold;
	}


/*
4. BUTTON
*/

.btn-primary-border {
	color: #313132;
	border-color: #313132;
	background-color: white;
	border-radius: 0.5rem;
	outline: none !important;
}

.btn-primary-border:hover, .btn-primary-border.selected{
	background-color: #313132;
	color: #fff;
}

.az-btn-primary  {
	background-color: var(--primary-color);
    /* border-color: #181919 !important; */
    outline: none !important;
	border-radius: 0.5rem;
}
	.az-btn-primary:hover, .az-btn-primary:active, .az-btn-primary:focus {
		background-color: var(--primary-color) !important;
	}


.btn-primary {
	background-color: #313132;
	border-radius: 0.5rem;
     border-color: #181919 !important; 
    outline: none !important;

}
	.btn-primary:hover, .btn-primary:active, .btn-primary:focus {
		background-color: #4c4c4c !important;
	}

.btn-default{
	border-radius: 0.5rem;
/*	background-color: rgb(56, 56, 56);*/
}

.btn-danger{
	border-radius: 0.5rem;
	background-color: rgb(152, 0, 0);
}

.btn-info{
	border-radius: 0.5rem;
	background-color: #0097CD;
}

.btn-warning{
	border-radius: 0.5rem;
	background-color: #EC971F;
}

.btn-success{
	border-radius: 0.5rem;
	background-color: #3dcd00;
}

.btn-outline-primary {
	color: var(--primary-color);
	border: 1px solid var(--primary-color);
	border-radius: 0.5rem;
	background-color: white;
/*	padding: 2px 6px;*/
}
.btn-outline-default{
	color: black;
	border: 1px solid rgb(56, 56, 56);
	border-radius: 0.5rem;
	background-color: white;
/*	padding: 2px 6px;*/
}

.btn-outline-danger{
	color: red;
	border: 1px solid red;
	border-radius: 0.5rem;
	background-color: white;
/*	padding: 2px 6px;*/
}

.btn-outline-info{
	color: #0097cd;
	border: 1px solid #0097CD;
	border-radius: 0.5rem;
	background-color: white;
/*	padding: 2px 6px;*/
}

.btn-outline-warning{
	color: #EC971F;
	border: 1px solid #EC971F;
	border-radius: 0.5rem;
	background-color: white;
/*	padding: 2px 6px;*/
}

.btn-outline-success{
	color: #3dcd00;
	border: 1px solid #3dcd00;
	border-radius: 0.5rem;
	background-color: white;
/*	padding: 2px 6px;*/
}

.btn-outline-default:hover{
	color: white;
	background-color: rgb(56, 56, 56);
}
.btn-outline-primary:hover, .btn-outline-primary-active{
	color: white;
	background-color: var(--primary-color);
}
.btn-outline-danger:hover, .btn-outline-danger-active{
	color: white;
	background-color: red;
}

.btn-outline-info:hover, .btn-outline-info-active{
	color: white;
	background-color: #0097CD;
}

.btn-outline-warning:hover, .btn-outline-warning-active{
	color: white;
	background-color: #EC971F;
}

.btn-outline-success:hover, .btn-outline-success-active{
	color: white;
	background-color: #3dcd00;
}


/*
5. CONTENT
*/
.az-content {}
	.az-content .az-content-title {
		font-size: 22px;
	    font-weight: bold;
	    padding: 5px 0px;
	    font-family: 'Poppins';
	}

/*
6. MODAL 
*/
.modal-header {
    background-color: var(--primary-color);
    color: #313132;
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
}
.modal-title {
	font-size: 20px;
	font-weight: bold;
}
.modal-btn-close {
	position: relative;
/*    top: -3px;*/
}
.modal-footer {
/*	background-color: #f3f2ea;*/
	border-bottom-left-radius: 1rem;
    border-bottom-right-radius: 1rem;
}
.modal-body {
	background-color: rgba(204, 204, 204, 0.07);
}
/* .az-modal-close {
    background-color: var(--primary-color);
}
	.az-modal-close:hover {
		background-color: var(--primary-color);
	}
.az-modal-close .caret-close {
    border-left: 18px solid var(--primary-color);
}
.az-modal-close .close {
	color: #fff;
	box-shadow: none;
} */

/*
7. FORM 
*/
.form-control:focus {
    border-color: #7d7f80;
    box-shadow: 0 0 8px rgba(47, 47, 47, 0.6);
}

.az-form input, .az-form select, .az-form textarea {
	border-radius: 0.5rem !important;
}

.az-form .select2-selection {
    border-radius: 0.5rem !important;
}

.az-form .select {
    border-radius: 0.5rem !important;
}

/*
8. TABLE 
*/
.az-table > tbody > tr.selected {
    background-color: #d4d0d0;
    color: #4e4d4d;
}

/*
9. PAGE
*/
.role-content .role-item, .menu-content .menu-item, .article_category-content .article_category-item {
	position: relative;
	margin-bottom: 5px;
	margin-top: 5px;
}	
	.role-content .role-item-name, .menu-content .menu-item-name, .article_category-content .article_category-item-name {
		padding: 7px;
		background-color: #d8d8d8;
	}
	.role-content .role-item .role-action, .menu-content .menu-item .menu-action, .article_category-item .article_category-action {
		position: absolute;
		right: 7px;
		top: 7px;
	}
	.role-item .role-subrole, .menu-item .menu-submenu, .article_category-item .article_category-submenu {
		margin-left: 20px;
		margin-bottom: 5px;
	}

/*
10. RESPONSIVE 
*/

.az-menu-mobile {
	position: absolute;
	top: 61px;
	left: -275px;
	width: 275px;
	height: 100%;
	padding: 15px;
	background-color: var(--primary-color);
	color: #313132;
	transition: left 0.3s ease;
	z-index: 999;
}
.az-menu-mobile > ul {
	padding-left: 0px;
}
.az-menu-mobile ul li a {
	padding: 12px 9px;
	display: block;
	font-size: 14px;
	font-weight: bold;
}
	.az-menu-mobile ul > li:hover, .az-menu-mobile ul > li.active {
		font-weight: bold;
		overflow: hidden;
		background: #313132;
/*		color: #1daa8e;*/
		border-radius: 1rem;
		margin: 5px 0;
	}
		.az-menu-mobile ul > li:hover > a, .az-menu-mobile ul > li.active > a, .az-menu-mobile ul > li.is-active > a {
			color: #fff;
		}
	.az-menu-mobile ul > li ul {
		background-color: var(--accent-color);
	    padding-top: 10px;
	    padding-bottom: 10px;
	    /* margin-bottom: -5px; */
	    padding-left: 26px;
		display: none;
		background: #ffffff85;
		color: #18181e;
	}
		.az-menu-mobile > ul > li.is-active > ul {
			display: block;
		}
	.az-menu-mobile ul > li ul li {
		font-weight: normal;
	}
		.az-menu-mobile ul > li ul li:hover, .az-menu-mobile ul > li ul li.active {
			background-color: rgba(0,0,0,0);
		}
		.az-menu-mobile ul > li ul li a {
			padding: 2px 7px;
		}

.az-menu-mobile ul li a i.fa {
	display: inline-block;
	vertical-align: middle;
	width: 25px;
	text-align: center;
}
	.az-menu-mobile ul li ul li a i.fa {
		width: 17px;
	}
.az-menu-mobile .caret-submenu {
	float: right;
}
.az-menu-mobile .az-submenu-caret {
    position: absolute;
    /* top: 21px; */
    margin-top: 4px;
    right: 18px;
    font-size: 14px;
}
	.az-menu-mobile ul li ul li .az-submenu-caret {
	    top: 6px;
	}
.az-menu-mobile ul > li ul li ul {
	padding-left: 17px;
}
.az-menu-mobile .az-menu-title {
	display: inline-block;
	vertical-align: middle;
	line-height: 1;
}


@media (min-width: 768px) {
	.az-ltheme-left {
		/*padding-bottom: 1200px;
		margin-bottom: -1200px;*/
		padding-bottom: calc(100vh - 114px);
		height: auto !important;
		min-height: 100% !important;
		overflow: hidden;
	}
	/*
	mini view 
	*/
	.az-ltheme.mini-view .az-ltheme-left {
		width: 50px;
		min-width: 50px;
	}

	.az-ltheme.mini-view .az-ltheme-left .az-menu > ul > li > a > .az-menu-title {
		display: none;
	}
	.az-ltheme.mini-view .az-ltheme-left .az-menu ul li a {
		font-size: 16px;
		text-align: center;
	}
	.az-ltheme.mini-view .az-ltheme-left .az-menu > ul > li > .az-submenu-caret {
		display: none;
	}
	.az-ltheme.mini-view .az-ltheme-left .az-menu > ul > li > ul {
	    position: absolute;
	    top: 0px;
	    left: 100%;
	    padding-left: 5px;
	    width: 200px;
	    z-index: 6;
	}
		.az-ltheme.mini-view .az-ltheme-left .az-menu ul li > ul a {
			text-align: left;
			font-size: 14px;
		}

	/*.az-ltheme.mini-view .az-ltheme-left .az-menu-mobile > ul > li > a > .az-menu-title {
		display: none;
	}
	.az-ltheme.mini-view .az-ltheme-left .az-menu-mobile ul li a {
		font-size: 16px;
		text-align: center;
	}
	.az-ltheme.mini-view .az-ltheme-left .az-menu-mobile > ul > li > .az-submenu-caret {
		display: none;
	}
	.az-ltheme.mini-view .az-ltheme-left .az-menu-mobile > ul > li > ul {
	    position: absolute;
	    top: 0px;
	    left: 100%;
	    padding-left: 5px;
	    width: 200px;
	    z-index: 6;
	}
		.az-ltheme.mini-view .az-ltheme-left .az-menu-mobile ul li > ul a {
			text-align: left;
			font-size: 14px;
		}*/

	.az-ltheme.mini-view .az-ltheme-left .fa.fa-caret-right {
		display: none;
	}
	.az-ltheme.mini-view .az-ltheme-right {
		margin-left: 50px;
	}

	.az-ltheme.mini-view .az-btn-menu {
		background: var(--accent-secondary-color) !important;
		border: 1px solid var(--primary-color);
	}
	
}

@media (max-width: 991px) {
	.az-breadcrumb {
		text-align: left;
    	padding-top: 0;
	}
}
@media (max-width: 767px) {
	.az-ltheme-image-header .image-header {
		height: 180px;
	}
	.header-content {
		text-align: center;
	}
		.header-content .app-info {
			display: block;
		    margin-top: 5px;
		    margin-bottom: 5px;		
		}
		.header-content .account-box {
			float: none;
		}
	.account-box {
		margin-right: 0;
	}
		.account-box .account-detail {
/*			width: 100%;*/
			top: 48px;
		}
		.account-box .account-detail .account-detail-triangle {
			right: 14px;
		}
	.outlet-box {
		margin-right: 0;
	}

	.az-ltheme-left{
        overflow-x: hidden;
        overflow-y: scroll;
        width: 0px;
        position: fixed;
        height: 100vh;
    }
    .az-ltheme-right{
        width: 100%;
        margin-left: 0;
    }

	.az-menu {
		display: none;
	}
	.az-ltheme-left.xs-show .az-menu {
		display: block;
	}
	footer {
		position: relative;
		text-align: center;
		width: 100%;
	}


	.az-ltheme.mini-view .az-ltheme-left {
		width: 0px !important;
		min-width: 0px !important;
	}
}

.dataTable {
   border-radius: 0.5rem;
   text-align: left;
}

.switch {
	position: relative;
	display: inline-block;
	width: 60px;
	height: 34px;
  }
  
  .switch input { 
	opacity: 0;
	width: 0;
	height: 0;
  }
  
  .slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #ccc;
	-webkit-transition: .4s;
	transition: .4s;
  }
  
  .slider:before {
	position: absolute;
	content: "";
	height: 26px;
	width: 26px;
	left: 4px;
	bottom: 4px;
	background-color: white;
	-webkit-transition: .4s;
	transition: .4s;
  }
  
  input:checked + .slider {
	background-color: #2196F3;
  }
  
  input:focus + .slider {
	box-shadow: 0 0 1px #2196F3;
  }
  
  input:checked + .slider:before {
	-webkit-transform: translateX(26px);
	-ms-transform: translateX(26px);
	transform: translateX(26px);
  }

/* Rounded sliders */
.slider.round {
	border-radius: 34px;
  }
  
  .slider.round:before {
	border-radius: 50%;
  }

  .bootbox-close-button{
	padding: 0.5rem 0.8rem !important;
    scale: 1.2;
	border-radius: 100%;
  }

.bootbox-close-button:hover {
	background-color: rgba(3, 133, 169, 0.14);
}


.btn:hover {
	scale: 1.01;
}

/* Efek border-radius */
.az-menu ul li:hover + .az-menu ul li {
	border-top-right-radius: 10px; /* Sudut kanan atas */
  }
  
  .az-menu ul li:hover ~ .az-menu ul li {
	border-bottom-right-radius: 10px; /* Sudut kanan bawah */
  }

  .navbar-product-setting {
	display: flex;
    gap: 3rem;
    padding: 3rem 0px;
  }
  
  .limited-line-1 {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	overflow: hidden;
	-webkit-line-clamp: 1; /* Batasan jumlah baris */
	text-overflow: ellipsis; /* Menambahkan titik-titik elipsis */
}

.limited-line-2 {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	overflow: hidden;
	-webkit-line-clamp: 2; /* Batasan jumlah baris */
	text-overflow: ellipsis; /* Menambahkan titik-titik elipsis */
}

.limited-line-3 {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	overflow: hidden;
	-webkit-line-clamp: 3; /* Batasan jumlah baris */
	text-overflow: ellipsis; /* Menambahkan titik-titik elipsis */
}

.mb-4{
	margin-bottom: 1rem;
}

mark {
	margin: 0 -0.4em;
	padding: 0.1em 0.4em;
	border-radius: 0.8em 0.3em;
	background: transparent;
	background-image: linear-gradient(
	  to right,
	  rgba(255, 225, 0, 0.1),
	  rgba(255, 225, 0, 0.7) 4%,
	  rgba(255, 225, 0, 0.3)
	);
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
  }

.text-sm{
	font-size: 13px;
}

.foto-diri{
	max-width: 75px;
    object-fit: contain;
}