@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Libre+Barcode+39+Text&display=swap');
html, body{
  font-family: 'Poppins', sans-serif;
  scroll-behavior: smooth;
}
/*
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
*/
:root{
	--topbar-bg_clr: #003366;
	--topbar-text_clr: #fff;
	--sidebar-bg_clr: #455387;
	--sidebar-text_clr: #fff;
	--pageheader-bg_clr: #fafafa;
	--pagetitle-bg_clr: #fafafa;
	--pagetitle-text_clr: #000;
	--content-bg_clr: #fafafa;
	--content-text_clr: #000;
	--pagefooter-bg_clr: #fafafa;
	--pagefooter-text_clr: #000;	
	--card-bg_clr: #E6E6E6;
	--input-text_clr: rgba(0,0,0, .8);
	--input-bg_clr: #fff;
	--label-text_clr: rgba(0,0,0, .8);
	--hover-bg_clr: #fff;
	--hover-text_clr:#455387;
	--line-clr: #42434a;
    --secondary-text_clr: #455387;
	--modal-bg_clr: #F0E6E6;
	--secondary-bg_clr: #455387;
	--modalheader-bg_clr: #455387;
	--modalbody-bg_clr: #F0E6E6;
	--modalfooter-bg_clr: #455387;

/*   --main-bg_clr: #F0E6E6; 
	--main-bg_clr: #D2F7F7;
	 #3e4a79
	 	--input-bg_clr: #f5e6ff;
*/	
	
}

*{
	margin: 0;
	padding: 0;
}


body
	{
    font-family: 'Poppins', sans-serif;
	background: var(--content-bg_clr);
	}

h1 {
    font-weight: 800;
	font-size: 1.5rem;
}
h3
{
	font-size: 1.3rem;
    font-weight: 700;
	letter-spacing: .02rem;
}
h4 {
	font-size: 1rem;
    font-weight: 600;
}
h5 {
	margin-top: .3rem;
	font-size: .96rem;
    font-weight: 600;
	letter-spacing: .02rem;
}

li {
    list-style: none;
}

a {
    text-decoration: none;
	color: #003366;
	font-weight: 410;
}

p
{
	color: var(--main-text_clr);
	font-size: .85rem;
    font-weight: 600;
	padding: 0 0;
	margin-bottom: .3rem;
}

.topbar {
	z-index: 2;
	position: fixed;
	display: flex;
	width: 100%;
	height: 3.5rem;
    padding: .75rem .5rem;
	align-items: center;
	background-color: var(--topbar-bg_clr);
}
.sidemenu-btn
{
	width: 3%;
	text-align: center;
	background-color: transparent;
    cursor: pointer;
    border: 0;
	align-items: center;
}
.sidemenu-btn i {
    font-size: 1.5rem;
    color: var(--topbar-text_clr);
    font-weight: 1000;
	align-items: center;
}
.sidemenu-btn i:hover {
    font-size: 2rem;
    color: var(--hover-text_clr);
    font-weight: 1000;
	align-items: center;
	transition: all 0.3s ease-in-out;
}
.topheader
{
	width: 90%;
	margin-left: 1.3rem;
}
.topbar .apps-title {
	padding:0;
	
	font-size: 1.9rem;
	font-weight: 550;
	letter-spacing: .1rem;
	color: var(--topbar-text_clr);
	align-items: center;
}
.topbar .tagline-text {
	padding:0;
	margin-top: -.7rem;
	color: var(--topbar-text_clr);
    font-size: .8rem;
	font-weight: 420;
	letter-spacing: .04rem;
}

.menuview
{
	width: 43%;
	text-align: right;
	margin-right: .4rem;
}

.userlogin-text
{
	margin-top: .3rem;
	color: var(--topbar-text_clr);
    font-size: .8rem;
	font-weight: 500;
	letter-spacing: .02rem;
	font-style: italic;
}

.menuview .menutree-view
{
	margin-top: 1rem;
	font-size: .9rem;
	font-style: italic;
	letter-spacing: .02rem;
	color: var(--sidebar-text_clr);
	text-align: right;
}

.logout-icon
{
	width: 3%;
	text-align: center;
	padding: 1.2rem 1rem;
	margin-right: 1rem;
}
.logout-icon i
{
	margin-top: .2rem;
	font-size: 1.4rem;
	color: #f75b06;
}
.logout-icon i:hover
{
	font-size: 2rem;
	transition: all 0.3s ease-in-out;
}


/* Side Menu Section */

.sidebar-nav {
	margin-top:0;
    flex: 1 1 auto;
	background: var(--Sidebar-bg_clr);
}
.offcanvas-header
{
	padding: 0;
	background: var(--sidebar-bg_clr);
}
.offcanvas-body
{
	padding: 0;
	background: var(--sidebar-bg_clr);
}
.canvasheader-text {
	padding:0;
	margin-top: .75rem;
	margin-left: 1rem;
	font-size: 1.8rem;
	font-weight: 600;
	color: var(--topbar-text_clr);
	align-items: center;
}
.canvastagline-text {
	padding:0;
	margin-top: -.5rem;
	margin-bottom:.3rem;
	margin-left: 1rem;
	color: var(--sidebar-text_clr);
    font-size: .8rem;
}

.hidemenu-btn
{
	width: 1.5%;
	margin-left: 0;
	text-align: center;
	background-color: transparent;
    cursor: pointer;
    border: 0;
	align-items: center;
	
}
.hidemenu-btn i {
    font-size: 1.8rem;
	margin-left: -.3rem;
    color: var(--sidebar-text_clr);
    font-weight: 1000;
	align-items: center;
}
.hidemenu-btn i:hover {
    font-size: 2.2rem;
    color: var(--sidebar-text_clr);
    font-weight: 1000;
	align-items: center;
	transition: all 0.3s ease-in-out;
}
.hidemenu-btn
{
	padding: 0;
	margin-left: 1rem;
	margin-right: -1rem;
}

.toggler-btn {
    background-color: transparent;
    cursor: pointer;
    border: 0;
	align-items: center;
}

.profile-icon {
    font-size: 1.5rem;
    color: var(--sidebar-text_clr);
	align-items: center;
}
.profile-link {
	font-size: 1rem;
	font-weight: 600;
	margin-left: .8rem;
	color: var(--sidebar-text_clr);
	align-items: center;
}

.menu-icon {
    font-size: 1.2rem;
	align-items: center;
	font-weight: 450;
}
.menu-link {
	font-size: .85rem;
	margin-left: .8rem;
	align-items: center;
	font-weight: 450;
}
.menu-link:hover {
	font-size: .85rem;
	margin-left: .8rem;
	align-items: center;
	font-weight: 550;
}

a.sidebar-link {
    padding: .28rem 1.625rem;
    color:var(--sidebar-text_clr);
    position: relative;
    transition: all 0.35s;
    display: block;
    font-size: .85rem;
	border-radius: 25px 0 0 25px;
}
.submenu-link {
    padding: .28rem 1.625rem;
    color:var(--sidebar-text_clr);
    position: relative;
    transition: all 0.35s;
    display: block;
    font-size: .82rem;
	padding-left: 4rem;
	border-radius: 25px 0 0 25px;
}

a.sidebar-link:hover {
	color:var(--hover-text_clr);
    background-color: var(--hover-bg_clr);
	border-radius: 25px 0 0 25px;
	font-weight: 500;
}
a.submenu-link:hover {
	color:var(--hover-text_clr);
    background-color: var(--hover-bg_clr);
	border-radius: 25px 0 0 25px;
	font-weight: 500;
}

.sidebar-link[data-bs-toggle="collapse"]::after {
    border: solid;
    border-width: 0 .075rem .075rem 0;
    content: "";
    display: inline-block;
    padding: 2px;
    position: absolute;
    right: 1.5rem;
    top: 1.4rem;
    transform: rotate(-135deg);
    transition: all .2s ease-out;
}
.sidebar-link[data-bs-toggle="collapse"].collapsed::after {
    transform: rotate(45deg);
    transition: all .2s ease-out;
}

.sidebar-footer {
	height: 100%;
	margin-top: 1.6rem;
	background: var(--sidebar-bg_clr);
}

/* --- Login Page ----- */

.login-box
{
   
	justify-content: center;
	align-items: center;
	text-align: center;
	padding: 2rem auto;

}


.card-login
{
    
  	width: 30%;
	border: 1px solid rgba(0, 0, 0, .5);
	border-radius: .02rem;
	background: #fff;
    margin: 15rem auto;
    padding: 1rem 2rem;
}

	
}

.form-login
{

	border: .1rem solid rgba(0, 0, 0, .5);
	border-radius: .10rem;
	padding: .3rem .5rem;
	background: #fff;
}



/* --- Login Page ----- */



/* ----- Page Content Section /Start ------ */

.halaman
{
	width: 100%;
	color: var(--content-text_clr);
	font-size: .78rem;
	font-weight: 400;
	letter-spacing: .02rem;
	padding: 1.5rem 1.5rem;
	background-color: var(--content-bg_clr);
}


.page-header
{
	width: 100%;
	display: flex;
	padding-top: 2.3rem;
    padding-bottom: .5rem;
	background: var(--pageheader-bg_clr);
	
}

.page-title
{
	width: 100%;
	color: var(--pagetitle-text_clr);
	font-size: 1rem;
	font-weight: 600;
	background: var(--pagetitle-bg_clr);
	border-bottom: .1rem solid rgba(106,117,159, .8);
}

.page-content
{
	width: 100%;
	color: var(--content-text_clr);
	font-size: .78rem;
	font-weight: 400;
	letter-spacing: .02rem;
	padding-left: .5rem;
	padding-right: .5rem;
	padding-bottom: .5rem;
	background: var(--content-bg_clr);

}

.page-footer
{
	width: 100%;
	display: flex;
	padding-left: 1.5rem;
	padding-right: 1.5rem;
	padding-bottom: 2rem;
	justify-content: center;
	background: var(--pagefooter-bg_clr);
    border-top: .1rem solid rgba(106,117,159, .8);
}

.footer-text 
{	
	
	color: var(--pagefooter-text_clr);
	font-size: .8rem;
	font-weight: 500;
	padding-top: .4rem;
	vertical-align: middle;
	background: var(--pagefooter-bg_clr);
	
}

.box-sm
{
	width: 25%;
	border: 1px solid rgba(0, 0, 0, .3);
	border-radius: .1rem;
	padding: .3rem .3rem;
}

.box-md
{
	width: 50%;
	border: 1px solid rgba(0, 0, 0, .3);
	border-radius: .1rem;
	padding: .3rem .3rem;
}

.box-lg
{
	width:100%;
	border: 1px solid rgba(0, 0, 0, .3);
	border-radius: .1rem;
	padding: .5rem .5rem;
}




/* ----- Page Content Section /End ------ */


.container-card
{
	margin-top: 1.5rem;
	position: relative;
	justify-Content: center;
	width: 75%;
	align-items: center;

}

.card-container
{
	width: 100%;
	border: 1px solid rgba(0, 0, 0, .3);
	border-radius: .15rem;
	padding: .5rem .9rem;
	margin: .12rem .12rem;
	
}

.card
{
	width: 100%;
	border: .09rem solid rgba(0, 0, 0, .5);
	border-radius: .10rem;
	padding: .3rem .5rem;
	background: transparent;
}

.card-header
{
	width: 100%;
	border-bottom: 1px solid rgba(0, 0, 0, .3);
	background: transparent;
}

.card-info
{
	width: 100%;
	border-left: 2px solid rgba(113, 99, 186, 255);
	padding: .3rem .9rem;

}

.card-dashboard
{
	width: 100%;
	border: 1px solid rgba(0, 0, 0, .2);
	border-radius: .10rem;
	padding: .3rem .5rem;

}

.card-box-lg
{
	width: 80%;
	justify-content: center;
	align-items: center;
	border: 1px solid rgba(0, 0, 0, .2);
	border-radius: .10rem;
	padding-bottom: 1rem;
	margin: .5rem auto;
    
}

.card-text
{
	width: 100%;
	padding-top: .5rem;
	padding-bottom: .2rem;
	font-size: 1.5rem;
	font-weight: 650;
}
.card-title
{
	font-size: .80rem;
	font-weight: 550;
	padding-bottom: .5rem;
}
.card-value
{
	font-size: 1rem;
	font-weight: 550;
	margin-top: .6rem;
	padding-bottom: .3rem;
	text-align: right;	
}	
.card-footer
{
	width: 100%;
	font-size: .8rem;
	font-weight: 500;
	letter-spacing: .03rem;
	border-top: 1px solid rgba(113, 99, 186, .5);
	padding: 0 0;
}


.pilihprogram
{
	width: 30%;
	background: var(--modal-bg_clr);
	position: absolute;
	transform: translate(-50%; -50%);
	left: 35%;
	top: 15%;
	border: 1px solid rgba(0, 0, 0, 0.1);
	border-radius: .20rem;
	padding: 1rem 1rem;
}


/* Custom Komponen Bootstrap -Start */

/* Button*/

.btn-xs
{
	width : 2rem;
	height: 2.1rem;
	font-size: 1.4rem;
	font-weight: 500;
	align-items: center;
	text-align: center;
	margin: .2rem .5rem 0 0;
	padding: .02rem 0;
	border-radius: .18rem;
	border: none;

}

.btn-sm
{
	width : 100%;
	height: 2.2rem;
	font-size: .89rem;
	font-weight: 500;
	letter-spacing: .02rem;
	border-radius: .15rem;
	border: none;
	padding: 0 0;
	margin: .13rem .13rem;
}

.btn-md
{
	width : 100%;
	height: 2.5rem;
	font-size: 1rem;
	font-weight: 500;
	letter-spacing: .02rem;
	border-radius: .18rem;
	border: none;
}

.btn-sm:hover
{
	font-size: .95rem;
	font-weight: 520;
	transition: all 0.5s ease-in-out;
}
.btn-two
{
	color: #fff;
	background: #3E4A79;
}

.btn-two:hover
{
	color: #fff;
	background: #3E4A79;
}
.btn-danger
{
	color: #fff;
	background: #d44034;
}

.btn-one
{
	color: #fff;
	background: #8c65a8;
	border: .01rem solid rgba(0, 0, 0, 0.2);
}

.btn-one:hover
{
	color: #fff;
	background: #8c65a8;
	border: .01rem solid rgba(0, 0, 0, 0.2);
}

.btn-secondary
{
	color: #fff;
	background: #009999;
}

.btn-secondary:hover
{
	color: #fff;
	background: #009999;
}



.btn-add
{
	width : 100%;
	height: 2.2rem;
	font-size: .9rem;
	font-weight: 520;
	letter-spacing: .02rem;
	border-radius: .15rem;
	border: none;
	padding: 0 0;
	margin: 0 0;
}
.btn-add:hover
{
	width : 100%;
	height: 2.2rem;
	font-size: 1rem;
	font-weight: 550;
	letter-spacing: .02rem;
	border-radius: .15rem;
	border: none;
	padding: 0 0;
	margin: 0 0;
}

.spasi
{
	margin-right: .5rem;
}

 /* Button */
 
.modal-header
{
	background: #8c65a8;
	height: 3.5rem;
}
.modal-title
{
	width: 100%;
	color: #fff;	
	font-size: 1rem;
	font-weight: 570;
}
.btn-close
{
	color: #fff;	
	font-size : .15rem;
	text-align: right;
	margin-right: -1.5rem;
}
.modal-body
{
   	
}
.modal-bottom
{
    border-top: .05rem  solid rgba(113, 99, 186, .5);
	margin-top: .8rem;
	padding-bottom: .7rem;

}

/* Label Input & Form */

/*
.select-label-input, .form-label, .select-label
	{
	letter-spacing: .01rem;	
	color: var(--label-text_clr);
	font-size: .78rem;
    font-weight: 500;
	}

*/
.label-input
	{
	color: var(--label-text_clr);
	font-size: .79rem;
    font-weight: 400;
	letter-spacing: .01rem;
	margin-bottom: .15rem ;
	}
	
.label-input
	{
	color: var(--label-text_clr);
	font-size: .78rem;
    font-weight: 400;
	letter-spacing: .01rem;
	margin-bottom: .15rem ;
	}
	
.select-label
	{
	letter-spacing: .01rem;	
	color: var(--label-text_clr);
	font-size: .79rem;
    font-weight: 400;
	}
	

.label-header
 {
	margin-top: 1rem;
	color: var(--main-text_clr);
	font-size: .88rem;
    font-weight: 550;
	letter-spacing: .01rem;
}

.no-bg
{
	background: transparent;
}

.bg-primary
{
	background-color: #3E4A79;
}

.bg-info
{
	background: #565D77;
}
.bg-red
{
	color: #ffffe6;
	background: #993300;
}
.bg-lightred
{
	color: #ffffe6;
	background: #ff0000;
}
.bg-green
{
	color: #ffffe6;
	background: #2d862d;
}
.bg-lightgreen
{
	color: #000;
	background: #00cc99;
}



/* Label Input & Form*/

/* Input & Form */


.custom-select-input
	{
	font-size: .80rem;
	font-weight: 410;
	color: var(--input-text_clr);
	height: 1.8rem;
	border-radius: .10rem;
	margin-bottom: .3rem;
	padding: .2rem;
	border: 1px solid rgba(0, 0, 0, .3);
	background: var(--input-bg_clr);
	}

.custom-select
{
	font-size: .80rem;
	color: var(--input-text_clr);
	height: 1.8rem;
	font-weight: 410;
	width: 100%;
	border-radius: .10rem;
	padding: .2rem .2rem;
	border: 1px solid rgba(0, 0, 0, .3);
	letter-spacing: .02rem;
	margin-bottom: .3rem;
	background: var(--input-bg_clr);
	}
.custom-select-add
{
	font-size: .83rem;
	color: var(--input-text_clr);
	height: 2.2rem;
	font-weight: 450;
	width: 100%;
	border-radius: .10rem;
	padding: .2rem .2rem;
	border: 1px solid rgba(0, 0, 0, .3);
	letter-spacing: .02rem;
	margin-bottom: .12rem;
	background: var(--input-bg_clr);
	}	
	
	
.form-control	
{
	font-size: .80rem;
	color: var(--input-text_clr);
	height: 1.8rem;
	font-weight: 410;
	width: 100%;
	border-radius: .10rem;
	padding: .2rem .5rem;
	border: 1px solid rgba(0, 0, 0, .3);
	letter-spacing: .02rem;
	margin-bottom: .3rem;
	background: var(--input-bg_clr);
	}

.text-area	
{
	font-size: .80rem;
	font-weight: 400;
	width: 100%;
	border-radius: .10rem;
	margin-bottom: .3rem;
	padding: .3rem;
	border: 1px solid rgba(0, 0, 0, .3);
	background: var(--input-bg_clr);
	}


/* Input & Form */


/* Table */

table
{
	font-size: .77rem;
	width: 100%;
	border: 1px solid rgba(0, 0, 0, .3);
	letter-spacing: .01rem;
}
#datatable1 thead th
{
	height: 1.6rem;
	color:  #F9FBE7;
	font-size: .8rem;
	font-weight: 510;
	letter-spacing: .02rem;
	text-align: center;
	vertical-align: middle;
	background-color : #003366;	
}

#example1 thead th
{
	height: 1.6rem;
	color:  #F9FBE7;
	font-size: .8rem;
	font-weight: 510;
	letter-spacing: .02rem;
	text-align: center;
	vertical-align: middle;
	background-color : #455387;	
}

.table.dataTable tbody tr:nth-child(odd) {
  background-color:  #ffffe6;
}

.table.dataTable tbody tr:nth-child(even) {
  background-color:  #ffffff;
}


/*
.table th
{
	color:  #F9FBE7;
	font-size: .8rem;
	font-weight: 500;
	text-align: center;
	vertical-align: middle;
	background : #455387;
}
*/
.table td
{
	color: #000;
	font-size: .77rem;
	font-weight: 400;
	letter-spacing: .02rem;
	vertical-align: middle;
	line-height: 1.1rem;
}

/* Table End */




/* Custom Komponen Bootstrap -End */



/* Screen size less than 768px */

@media (max-width:768px) {

.halaman
{
	width: 100%;
	color: var(--content-text_clr);
	font-size: .78rem;
	font-weight: 400;
	letter-spacing: .01rem;
	padding: 1.5rem .5rem;
	background-color: var(--content-bg_clr);
}
.page-content
{
	width: 100%;
	color: var(--content-text_clr);
	letter-spacing: .01rem;
	padding-left: .2rem;
	padding-right: .2rem;
	padding-bottom: .5rem;
	background: var(--content-bg_clr);

}

.card-login
{
    
   width: 90%;
   margin: 20rem auto;
   padding: 1rem 2rem;

}

.card-dashboard
{
	width: 100%;
	border: 1px solid rgba(0, 0, 0, .2);
	border-radius: .10rem;
	padding: .5rem .5rem;
	margin-top: .3rem;
	margin-bottom: .3rem;

}

.topbar .apps-title {
	padding:0;
	margin-top: .5rem;
	font-size: 1.7rem;
	font-weight: 600;
	color: var(--topbar-text_clr);
	align-items: center;
	vertical-align: middle;
}

.topbar .tagline-text {
	display: none;
}

.topbar .identiti-text {
	margin-top: .9rem;
	color: var(--topbar-text_clr);
    font-size: .9rem;
	font-weight: 500;
}

.header-text
{
	font-size: 1rem;
}	
 
    #sidebar.collapsed {
        margin-left: 0;
    }
}

.card
{
	width: 100%;
	border: .09rem solid rgba(0, 0, 0, .5);
	border-radius: .10rem;
	padding: .3rem .2rem;
	background: transparent;
}

.btn-sm
{
	width : 100%;
	height: 2.2rem;
	font-size: .89rem;
	font-weight: 500;
	letter-spacing: .02rem;
	border-radius: .15rem;
	border: none;
	padding: 0 0;
	margin: .13rem .13rem;
}