/* normalize css */
*, body, button, input, textarea, select {
  text-rendering: optimizeLegibility;
  -moz-osx-font-smoothing: grayscale;
}
:focus {outline:0 !important;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
  margin:0;
  padding:0;
}
table {
  border-collapse:collapse;
  border-spacing:0;
}
fieldset,img {
  border:0;
}
address,caption,cite,code,dfn,em,strong,th,var {
  font-style:normal;
  font-weight:normal;
}
ol,ul {
  list-style:none;
}
caption,th {
  text-align:left;
}
h1,h2,h3,h4,h5,h6 {
  font-size:100%;
  font-weight:normal;
}
q:before,q:after {
  content:'';
}
abbr,acronym { border:0;}
/* -- */

input.ng-invalid, select.ng-invalid, .requiredClass { 
    border: 1px solid #df2027!important;
}

textarea.ng-invalid, select.ng-invalid, .requiredClass { 
    border: 1px solid #df2027!important;
}

/* loader */
.loader {
	position: absolute;
	left: 50%;
	top: 50vh;
	z-index: 100;
	width: 150px;
	height: 150px;
	margin: -75px 0 0 -75px;
	border: 16px solid #f3f3f3;
	border-radius: 50%;
	border-top: 16px solid #3498db;
	width: 120px;
	height: 120px;
	-webkit-animation: spin 2s linear infinite;
	animation: spin 2s linear infinite;
}
#loaderContainer {
	width: 100%;
	min-height: 100vh;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	background-color: rgba(0,0,0,0.8);
	z-index:100;
}
@-webkit-keyframes spin {
	0% { -webkit-transform: rotate(0deg); }
	100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}
/* -- */

#dropzone {
   /* position: relative; */
    border: 2px dashed #f3185a;
    border-radius: 10px;
    color: #f3185a;
    font: bold 12px/200px arial;
    height: 280px;
    margin: auto auto;
    text-align: center;
    width: 60%;
    justify-content: center;
    align-items: center;
}

#dropzone.hover {
    border: 2px solid #f3185a;
}

#dropzone.dropped {
    background: white;
    border: 2px solid #f3185a;
}

#dropzone div {
    /* position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0; */
}

#dropzone [type="file"] {
    cursor: pointer;
    position: absolute;
    opacity: 0;
    top: 104px;
    /* right: 0; */
    /* bottom: 0; */
    height: 273px;
    width: 55%;
    /* left: 0; */
}
/*
.formUpload {
	min-width: 550px; 
	max-width: 55%;
	min-height: 500px;
	max-height: 72%; 
	background: white; 
	width: 55%; 
	height: 72%;
	position: absolute; 
	top: 50%; 
	left: 50%; 
	transform: translate(-50%,-50%); 
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); 
	border-radius: 10px; 
	padding: 30px;
}*/

.tableHeader{
	white-space: nowrap; 
	padding: 0.5rem;
}
/* malvin */

.formulaInput {
	width: 150px !important;
	height: 32px !important;
	margin: 8px 0px 15px 0px !important;
}

.textField{
	width: 100%; 
	height: 50px;
	padding: 15px 20px; 
	margin-top: 8px; 
	margin-bottom: 15px; 
	border: 1px solid #ccc; 
	box-sizing: border-box; 
	background: #f4f8f9;
}

.buttonUserLoginDetail {
	position:relative; 
	display: flex; 
	align-items: center; 
	justify-content: center;
    height: 40px;
    background: #F5F5F5;
    border-radius: 8px;
    width:150px;
}

.sectionUTD {
	width: 100%; 
	height: 50px; 
	border: 1px solid red; 
	background: rgb(242, 24,89); 
	color: white; 
	display: flex; 
	align-items: center; 
	font-weight: bold; 
	font-size: 16pt; 
	border-radius: 5pt;
}

.sectionListUTD {
	width: 90%;
    display: flex;
    flex-wrap: wrap;
    gap: 32px 10%;
    justify-content: flex-start;
}


.content-contact {
	background-image: url("./assets/images/mms/Background.png");
	width: 100%;
	height: auto;
	background-repeat: no-repeat;
	position: fixed;
	background-size: cover;
	height: 125vh;
}

.login-wrapper{
	display: flex;
    justify-content: center;
    align-items: center;
	
}

.column-company{
	
}


.column-company h1{
	color: white;
	font-size: 40pt;
}

.column-company h2{
	font-size: 38pt;
}

.column-company h3{
  height: 55px;
  width: 130px;
  background-color: red;
  border-radius: 10px;
}

.column-formEmailLogin{
	float: right;
    width: 460px;
    background-color: #3c3c3c;
    box-shadow: rgb(0 0 0 / 10%) 2px 5px 20px;
    border-radius: 21px;
    padding: 1.8rem;
    height: 55rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.email-login {
 margin-left: 50px;
  margin-right: 50px;
  margin-top: 30px;
  margin-bottom: 25px;
  display: flex;
  flex-direction: column;
}
.email-login label {
  color: rgb(46 46 46);
  font-size: 9pt;
}

input[type="text"],
input[type="date"],
input[type="month"],
input[type="password"] {
	border-radius: 4px;
    box-sizing: border-box;
    border: 1px solid #d3cbcb;
    margin: 0.2rem;
    padding: 0.5rem;
    width: -webkit-fill-available;
}

gcinput{
	padding: 15px 20px;
    margin-top: 8px;
    margin-bottom: 15px;
    border-radius: 4px;
    box-sizing: border-box;
    border: 1px solid #d3cbcb;
    height:38px;
}

#mybutton {
    position: relative;
    z-index: 1;
    left: 92%;
    top: -40px;
    cursor: pointer;
}

#showPassword {
    position: relative;
    z-index: 1;
    left: -8.5%;
    top: 0px;
	cursor: pointer;
}

.forgotPassword{
	border: none;
	width: 100%;
	background: none;
	color: black;
	font-weight: 700;
    font-size: 15px;
}

.cta-btn {
    background-color: #1175bc;
    font-size: 9pt;
    color: white;
    margin-bottom: 20px;
    margin-left: 50px;
    margin-right: 50px;
    width: 364px;
    border-radius: 4px;
    border: none;
    height: 38px;
}

.grow1 {
    flex-grow: 1;
}

.dashboardReportItem {
    display: flex;
    justify-content: space-around;
    align-items: center;
    border-radius: 10px;
    box-shadow: 2px 2px 10px rgb(0 0 0 / 10%);
    background: white;
    overflow: hidden;
    margin: 10px;
    height: 100px;
    
}

.dashboardReportItemIllustration {
    display: flex;
    justify-content: space-around;
    align-items: center;
    overflow: hidden;
    margin: 10px;
    height: 100px;
}

.column-left{	
	border-radius: 10px;
	display: flex; 
	justify-content: center !important;
	flex-wrap: wrap;
}

.dashboardReport {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    overflow: hidden;
    margin: 10px;
    height: auto;
}

.newsHome {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    overflow: hidden;
    height: auto;
}

.styleListModel {
	white-space: nowrap;
	padding: 0.25rem;
	padding-left: 5px;
}

.styleListTarget {
	white-space: nowrap;
	padding-left: 5px;
}

.styleListDiv {
	height:20px;
	overflow:hidden;
	font-family: 'Open Sans';
    font-style: normal;
    font-weight: 600;
    font-size: 12px;
	
}
.border-ta {
	border: solid 1px #e9eff4 !important;
}

/* end malvin */


/* new */
button[disabled], .buttonNoColor[disabled]{
     background: black!important;
}

.dashboardContent{
	min-height: 100vh; 
	min-width: 100%; 
	width: fit-content;
	background: #FAFAFA;;
	padding: 10px 20px 40px 20px;
}

.headerSide {
	overflow: auto;
    position: fixed;
	z-index:11; 
	width: 20%;
	height: 100vh; 
	background:white;
	box-shadow: 0px 15px 25px rgb(0 0 0 / 10%), 0px 2px 4px rgb(0 0 0 / 20%);
	display: flex;
    flex-direction: column;
    height: 100vh; /* Full viewport height */
	
}
.headerSide::-webkit-scrollbar { 
                display: none; 
            } 
.boxYellow{
	display: inline-block; width: calc((100% / 3) - 60px);
	height: 180px;
	background-image:url("../images/kpbn/boxYellow.png");
	background-position: center;
	padding: 20px;
	border: none;
	border-radius: 8px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
	margin-right: 30px
}
.boxGreen{
	display: inline-block; width: calc((100% / 3) - 60px);
	height: 180px;
	background-image:url("../images/kpbn/boxGreen.png");
	background-position: center;
	padding: 20px;
	border: none;
	border-radius: 8px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
	margin-right: 30px;
}
.buttonSide{
	font-size: 14px; padding:10px; text-align: left; display: block; width: 100%; background: none; border: none;
	width: 92%;
	margin-left: 11px;
}
.buttonSide:hover, .buttonSideActive{
	font-size: 14px; padding:10px; text-align: left; display: block; width: 100%; background: none;
	border-radius: 4px;
	border-width: 0 4px 0 0;
	background: black;
	color: white;
	width: 92%;
	margin-left: 11px;
}

.divSideTitle{
	display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
}

.buttonSideTitle{
	font-size: 14px;
    padding: 25px 10px;
    font-weight: bold;
    border-radius: 4px;
    height: 40px;
    width: 190px;
    border: none;
    display: flex;
    justify-content: center;
    text-align: left;
    align-items: center;
    width: 87%;
    background: white;
}
.buttonSideTitle:hover, .buttonSideTitleActive{
	font-size: 14px;
    padding: 25px 10px;
    font-weight: bold;
    border-radius: 4px;
    background: #1175bc;
    height: 40px;
    width: 190px;
    border: none;
    display: flex;
    justify-content: center;
    text-align: left;
    align-items: center;
    width: 87%;
}

.iconFiles{
	display: flex;
    width: 100px;
    height: auto;
    content: url("../images/mms/folder icon.png");
}

.buttonSide:hover .iconSideDashboard{
	content:url("../images/sidebar/dashboard_white.png");
	width: 20px;height: 20px;
}

.iconSideDashboard{
	margin-right:20px; 
	display:inline-block; 
	width: 21px;height: 21px;
	content:url("../images/sidebar/dashboard.png");
	transition: width 0.5s;
}
.iconSideDashboard:hover, .iconSideDashboardActive{
	content:url("../images/sidebar/dashboard_white.png");
	width: 20px;height: 20px;
	margin-right:20px; 
	display:inline-block; 
}

.buttonSide:hover .iconSideAuction{
	content:url("../images/kpbn/sideAuctionActive.png");
}
.iconSideAuction{
	margin-right:20px; 
	display:inline-block; 
	width: 20px;height: auto;
	content:url("../images/kpbn/sideAuction.png");
}
.iconSideAuction:hover, .iconSideAuctionActive{
	margin-right:20px; 
	display:inline-block; 
	width: 20px;height: auto;
	content:url("../images/kpbn/sideAuctionActive.png");
}
.buttonSide:hover .iconSideTender{
	content:url("../images/kpbn/sideTenderActive.png");
}
.iconSideTender{
	margin-right:20px; 
	display:inline-block; 
	width: 20px;height: auto;
	content:url("../images/kpbn/sideTender.png");
}
.iconSideTender:hover, .iconSideTenderActive{
	margin-right:20px; 
	display:inline-block; 
	width: 20px;height: auto;
	content:url("../images/kpbn/sideTenderActive.png");
}
.buttonSide:hover .iconSideBidoffeer{
	content:url("../images/mms/sideSyncActive.png");
}
.iconSideBidoffer{
	margin-right:20px; 
	display:inline-block; 
	width: 20px;height: auto;
	content:url("../images/mms/sideSync.png");
}
.iconSideBidoffer:hover, .iconSideBidofferActive{
	margin-right:20px; 
	display:inline-block; 
	width: 20px;height: auto;
	content:url("../images/mms/sideSyncActive.png");
}

.buttonSideTitle:hover .iconSideSync{
	content:url("../images/mms/new_sidebar_icon/sync_new_mms_black.png");
}
.iconSideSync{
	margin-right:20px; 
	display:inline-block; 
	width: 25px;height: auto;
	content:url("../images/mms/new_sidebar_icon/sync_new_mms_black.png");
	transition: width 0.5s;
}
.iconSideSync:hover, .iconSideSyncActive{
	margin-right:20px; 
	display:inline-block; 
	width: 30px;height: auto;
	content:url("../images/mms/new_sidebar_icon/sync_new_mms_black.png");
}

.titleSidebar{
	/* width:176px; */
	width: 75%;
	color:black;
}

.titleSidebar:hover{
	/* width:176px; */
	width: 75%;
	color:white;
}

.titleSidebarActive{
	width: 75%;
	color:white;
}

.buttonSideTitle:hover .iconSideArrow{
	content:url("../images/mms/icon arrow drop right black.png");
}

.iconSideArrow{
	margin-right:0px; 
	display:inline-block; 
	width: 20px;height: auto;
	content:url("../images/mms/icon arrow drop right grey.png");
}
.iconSideArrow:hover, .iconSideArrowActive{
	margin-right:0px; 
	display:inline-block; 
	width: 20px;height: auto;
	content:url("../images/mms/icon arrow drop right black.png");
}


.buttonSideTitle:hover .iconSideUploadTransaction{
	content:url("../images/mms/icon upload transaction data black.png");
}
.iconSideUploadTransaction{
	margin-right:20px; 
	display:inline-block; 
	width: 20px;height: auto;
	content:url("../images/mms/icon upload transaction data grey.png");
}
.iconSideUploadTransaction:hover, .iconSideUploadTransactionActive{
	margin-right:20px; 
	display:inline-block; 
	width: 20px;height: auto;
	content:url("../images/mms/icon upload transaction data black.png");
}




.buttonSide:hover .iconSideReport{
	content:url("../images/kpbn/sideReportActive.png");
}
.iconSideReport{
	margin-right:20px; 
	display:inline-block; 
	width: 20px;height: auto;
	content:url("../images/kpbn/sideReport.png");
}
.iconSideReport:hover, .iconSideReportActive{
	margin-right:20px; 
	display:inline-block; 
	width: 20px;height: auto;
	content:url("../images/kpbn/sideReportActive.png");
}
.buttonSide:hover .iconSideFaq{
	content:url("../images/kpbn/sideFaqActive.png");
}
.iconSideFaq{
	margin-right:20px; 
	display:inline-block; 
	width: 20px;height: auto;
	content:url("../images/kpbn/sideFaq.png");
}
.iconSideFaq:hover, .iconSideFaqActive{
	margin-right:20px; 
	display:inline-block; 
	width: 20px;height: auto;
	content:url("../images/kpbn/sideFaqActive.png");
}
.buttonSide:hover .iconSideExApp{
	content:url("../images/mms/sideExAppActive.png");
}
.iconSideExApp{
	margin-right:20px; 
	display:inline-block; 
	width: 20px;height: auto;
	content:url("../images/mms/sideExApp.png");
}
.iconSideExApp:hover, .iconSideExAppActive{
	margin-right:20px; 
	display:inline-block; 
	width: 20px;height: auto;
	content:url("../images/mms/sideExAppActive.png");
}

.buttonSideTitle:hover .iconSideApproval{
	content:url("../images/sidebar/projects_white.png");
	width: 20px;height: 20px;
}

.iconSideApproval{
	margin-right:20px; 
	display:inline-block; 
	width: 20px;height: 20px;
	content:url("../images/sidebar/projects.png");
	transition: width 0.5s;
}
.iconSideApproval:hover, .iconSideApprovalActive{
	margin-right:20px; 
	display:inline-block; 
	width: 20px;height: 20px;
	content:url("../images/sidebar/projects_white.png");
}

.buttonSideTitle:hover .iconSideReport{
	content:url("../images/sidebar/docs_white.png");
	width: 20px;height: 20px;
}

.iconSideReport{
	margin-right:20px;
	display:inline-block;
	width: 20px;height: 20px;
	content:url("../images/sidebar/docs.png");
	transition: width 0.5s;
}
.iconSideReport:hover, .iconSideReportActive{
	margin-right:20px;
	display:inline-block;
	width: 20px;height: 20px;
	content:url("../images/sidebar/docs_white.png");
}

.buttonSideTitle:hover .iconSideOpportunities{
	content:url("../images/sidebar/opportunities_white.png");
	width: 20px;height: 20px;
}

.iconSideOpportunities{
	margin-right:20px; 
	display:inline-block; 
	width: 20px;height: 20px;
	content:url("../images/sidebar/opportunities.png");
	transition: width 0.5s;
}
.iconSideApproval:hover, .iconSideOpportunitiesActive{
	margin-right:20px; 
	display:inline-block; 
	width: 20px;height: 20px;
	content:url("../images/sidebar/opportunities_white.png");
}

.buttonSideTitle:hover .iconSideTarget{
	content:url("../images/sidebar/target_white.png");
	width: 20px;height: 20px;
}

.iconSideTarget{
	margin-right:20px; 
	display:inline-block; 
	width: 20px;height: 20px;
	content:url("../images/sidebar/target.png");
	transition: width 0.5s;
}
.iconSideApproval:hover, .iconSideTargetActive{
	margin-right:20px; 
	display:inline-block; 
	width: 20px;height: 20px;
	content:url("../images/sidebar/target_white.png");
}

.buttonSideTitle:hover .iconSidePaymentDashboard{
	content:url("../images/sidebar/payment_dashboard_white.png");
	width: 20px;height: 20px;
}

.iconSidePaymentDashboard{
	margin-right:20px; 
	display:inline-block; 
	width: 20px;height: 20px;
	content:url("../images/sidebar/payment_dashboard.png");
	transition: width 0.5s;
}
.iconSideApproval:hover, .iconSidePaymentDashboardActive{
	margin-right:20px; 
	display:inline-block; 
	width: 20px;height: 20px;
	content:url("../images/sidebar/payment_dashboard_white.png");
}

.buttonSideTitle:hover .iconSideRole{
	content:url("../images/sidebar/role_white.png");
	width: 20px;height: 20px;
}

.iconSideRole{
	margin-right:20px; 
	display:inline-block; 
	width: 20px;height: 20px;
	content:url("../images/sidebar/role.png");
	transition: width 0.5s;
}
.iconSideRole:hover, .iconSideRoleActive{
	margin-right:20px; 
	display:inline-block; 
	width: 20px;height: 20px;
	content:url("../images/sidebar/role_white.png");
}


.buttonSideTitle:hover .iconSideTop{
	content:url("../images/sidebar/payment_white.png");
	width: 20px;height: 20px;
}

.iconSideTop{
	margin-right:20px; 
	display:inline-block; 
	width: 20px;height: 20px;
	content:url("../images/sidebar/payment_black.png");
	transition: width 0.5s;
}
.iconSideTop:hover, .iconSideTopActive{
	margin-right:20px; 
	display:inline-block; 
	width: 20px;height: 20px;
	content:url("../images/sidebar/payment_white.png");
}



.buttonSideTitle:hover .iconSideForecast{
	content:url("../images/sidebar/new_project_white.png");
	width: 20px;height: 20px;
}

.iconSideForecast{
	margin-right:20px; 
	display:inline-block; 
	width: 20px;height: 20px;
	content:url("../images/sidebar/new_project.png");
	transition: width 0.5s;
}
.iconSideForecast:hover, .iconSideForecastActive{
	margin-right:20px; 
	display:inline-block; 
	width: 20px;height: 20px;
	content:url("../images/sidebar/new_project_white.png");
}

.buttonSideTitle:hover .iconSideOutbound{
	content:url("../images/sidebar/Outbound.png");
	width: 20px;height: 20px;
}

.iconSideOutbound{
	margin-right:20px; 
	display:inline-block; 
	width: 20px;height: 20px;
	content:url("../images/klbf/Sidebar/Outbound.png");
	transition: width 0.5s;
}
.iconSideOutbound:hover, .iconSideOutboundActive{
	margin-right:20px; 
	display:inline-block; 
	width: 20px;height: 20px;
	content:url("../images/klbf/Sidebar/Outbound.png");
}

.buttonSideTitle:hover .iconSideSetting{
	content:url("../images/klbf/Sidebar/Settings.png");
	width: 20px;height: 20px;
}

.iconSideSetting{
	margin-right:20px; 
	display:inline-block; 
	width: 20px;height: 20px;
	content:url("../images/klbf/Sidebar/Settings.png");
	transition: width 0.5s;
}
.iconSideSetting:hover, .iconSideSettingActive{
	margin-right:20px; 
	display:inline-block; 
	width: 20px;height: 20px;
	content:url("../images/klbf/Sidebar/Settings.png");
}

.buttonSide:hover .iconSideLogout{
	content:url("../images/sidebar/logout_white.png");
	width: 20px;height: 20px;
}

.iconSideLogout{
	margin-right:20px; 
	display:inline-block; 
	width: 20px;height: 20px;
	content:url("../images/sidebar/logout.png");
	transition: width 0.5s;
}
.iconSideLogout:hover, .iconSideLogoutActive{
	content:url("../images/sidebar/logout_white.png");
	width: 20px;height: 20px;
	margin-right:20px; 
	display:inline-block; 
}

.buttonSideTitle:hover .iconSideProfile{
	content:url("../images/sidebar/user_white.png");
	width: 20px;height: 20px;
}

.iconSideProfile{
	margin-right:20px; 
	display:inline-block; 
	width: 20px;height: 20px;
	content:url("../images/sidebar/user.png");
	transition: width 0.5s;
}
.iconSideProfile:hover, .iconSideProfileActive{
	margin-right:20px; 
	display:inline-block; 
	width: 20px;height: 20px;
	content:url("../images/sidebar/user_white.png");
}

.buttonSideTitle:hover .iconSideEmployee{
	content:url("../images/sidebar/employee_white.png");
	width: 20px;height: 20px;
}

.iconSideEmployee{
	margin-right:20px; 
	display:inline-block; 
	width: 20px;height: 20px;
	content:url("../images/sidebar/employee.png");
	transition: width 0.5s;
}
.iconSideEmployee:hover, .iconSideEmployeeActive{
	margin-right:20px; 
	display:inline-block; 
	width: 20px;height: 20px;
	content:url("../images/sidebar/employee_white.png");
}
.buttonSide:hover .iconSideJda{
	content:url("../images/kpbn/sideJdaActive.png");
}
.iconSideJda{
	margin-right:20px; 
	display:inline-block; 
	width: 20px;height: auto;
	content:url("../images/kpbn/sideJda.png");
}
.iconSideJda:hover, .iconSideJdaActive{
	margin-right:20px; 
	display:inline-block; 
	width: 20px;height: auto;
	content:url("../images/kpbn/sideJdaActive.png");
}
.buttonSideTitle:hover .iconSideMaster{
	width: 20px;height: 2opx;
	content:url("../images/sidebar/masterdata_white.png");
}
.iconSideMaster{
	margin-right:20px; 
	display:inline-block; 
	width: 20px;height: 20px;
	content:url("../images/sidebar/masterdata.png");
	transition: width 0.5s;
}
.iconSideMaster:hover, .iconSideMasterActive{
	margin-right:20px; 
	display:inline-block; 
	width: 20px;height: 20px;
	content:url("../images/sidebar/masterdata_white.png");
}

.buttonSideTitle:hover .iconSideTransaction{
	width: 25px;height: 25px;
	content:url("../images/klbf/Sidebar/Download_White.png");
}

.iconSideTransaction{
	margin-right:20px; 
	display:inline-block; 
	width: 25px;height: 25px;
	content:url("../images/klbf/Sidebar/Download.png");
	transition: width 0.5s;
}
.iconSideTransaction:hover, .iconSideTransactionActive{
	margin-right:20px; 
	display:inline-block; 
	width: 25px;height: 25px;
	content:url("../images/klbf/Sidebar/Download_White.png");
}


.iconUploadFile{
	margin-right:15px; 
	display:inline-block; 
	width: 15px;height: auto;
	content:url("../images/mms/Icon upload white.png");
}
.iconExportFile{
	margin-right:15px; 
	display:inline-block; 
	width: 15px;height: auto;
	content:url("../images/mms/downloadwhite.png");	
}
.iconUploadFile:hover{
	margin-right:15px; 
	display:inline-block; 
	width: 15px;height: auto;
	content:url("../images/mms/Icon upload white.png");
}

.iconExportFile:hover{
	margin-right:15px; 
	display:inline-block; 
	width: 15px;height: auto;
	content:url("../images/mms/downloadwhite.png");
}

.iconApprove{
	margin-right:15px; 
	display:inline-block; 
	width: 15px;height: auto;
	content:url("../images/mms/Approve (white).png");
}
.iconApprove:hover{
	margin-right:15px; 
	display:inline-block; 
	width: 15px;height: auto;
	content:url("../images/mms/Approve (white).png");
}

.iconReject{
	margin-right:15px; 
	display:inline-block; 
	width: 15px;height: auto;
	content:url("../images/mms/Reject (red).png");
}
.iconReject:hover{
	margin-right:15px; 
	display:inline-block; 
	width: 15px;height: auto;
	content:url("../images/mms/Reject white.png");
}

.buttonUpload{
	display: flex;
    align-items: center;
    margin-left: 10px;
    padding: 3px 20px;
    font-weight: bold;
    color: white;
    justify-content: center;
    background: #1175bc;
    box-shadow: 0px 15px 25px rgb(0 0 0 / 10%);
    border-radius: 20px;
    height: 35px;
    border: none;
}
.buttonUpload:hover {
	
}

.buttonApprove{
	display:flex; 
	align-items:center;
	margin-left: 10px; 
	padding:3px 20px; 
	background: #46A583;
	border-radius: 20px;
	font-weight: bold;
	color: white;
	border: none;
	justify-content: center;
	height:35px;
}
.buttonApprove:hover {
	width: 100%;
	font-weight: bold;
}

/* .buttonUpload:hover, .iconAdd:hover{
	content:url("../images/mms/Icon add white.png");
}	 */

.iconAdd{
	margin-right:15px; 
	display:inline-block; 
	width: 15px;height: auto;
	content:url("../images/mms/Icon add white.png");
}
.iconAdd:hover, .iconAddActive{
	margin-right:15px; 
	display:inline-block; 
	width: 15px;height: auto;
	content:url("../images/mms/Icon add white.png");
}


.buttonSideTitle:hover .iconSideContract{
	width: 30px;height: auto;
	content:url("../images/mms/new_sidebar_icon/sales_new_mms_black.png");
}
.iconSideContract{
	margin-right:20px; 
	display:inline-block; 
	width: 25px;height: auto;
	content:url("../images/mms/new_sidebar_icon/sales_new_mms_black.png");
	transition: width 0.5s;
}
.iconSideContract:hover, .iconSideContractActive{
	margin-right:20px; 
	display:inline-block; 
	width: 30px;height: auto;
	content:url("../images/mms/new_sidebar_icon/sales_new_mms_black.png");
}

.buttonSideTitle:hover .iconSideTrading{
	width: 30px;height: auto;
	content:url("../images/mms/new_sidebar_icon/trading_new_mms_black.png");
}
.iconSideTrading{
	margin-right:20px; 
	display:inline-block; 
	width: 25px;height: auto;
	content:url("../images/mms/new_sidebar_icon/trading_new_mms_black.png");
	transition: width 0.5s;
}
.iconSideTrading:hover, .iconSideTradingActive{
	margin-right:20px; 
	display:inline-block; 
	width: 30px;height: auto;
	content:url("../images/mms/new_sidebar_icon/trading_new_mms_black.png");
}

.buttonSideTitle:hover .iconSideRevisePlanning{
	width: 30px;height: auto;
	content:url("../images/mms/new_sidebar_icon/revise_planning_new_mms_black.png");
}
.iconSideRevisePlanning{
	margin-right:20px; 
	display:inline-block; 
	width: 25px;height: auto;
	content:url("../images/mms/new_sidebar_icon/revise_planning_new_mms_black.png");
	transition: width 0.5s;
}
.iconSideRevisePlanning:hover, .iconSideRevisePlanningActive{
	margin-right:20px; 
	display:inline-block; 
	width: 30px;height: auto;
	content:url("../images/mms/new_sidebar_icon/revise_planning_new_mms_black.png");
}

.inputLogin{
	border-bottom: 2px solid #ebebeb;
}
.inputForm{
	padding: 10px; border: solid 1px #e9eff4; border-radius: 4px; width: 300px;
}
.loginSide{
  	position: fixed;
    height: 100%;
    width: 100%;
    background-image: url(../images/qas/loginWallpaper.png);
    /*background:#F5F5F5;*/
    background-repeat: no-repeat;
    background-size: cover;
    display:flex;
    justify-content:center;
}
.buttonBorder{
	display:flex; 
	align-items:center;
	margin-left: 10px; 
	padding:3px 20px; 
	background:white;
	font-weight: bold;
	color: rgb(242, 24,89);
	border: solid 2px rgb(242, 24,89);
	border-radius: 6px;
	justify-content: center;
}
.buttonBorder:hover{
	border: solid 2px rgb(242, 24,89);
	font-weight: bold;
	color: white;
	border-radius: 6px;
	background: rgb(242, 24,89);
}

.buttonCancelUpload{
	display:flex; 
	align-items:center;
	padding:3px 20px; 
	background:white;
	font-weight: bold;
	color: rgb(242, 24,89);
	border: solid 2px rgb(242, 24,89);
	border-radius: 6px;
	justify-content: center;
	width: 128px;
    height: 38px;
    margin-right: 20px;
}

.buttonSaveUpload{
	display:flex; 
	align-items:center;
	padding:3px 20px; 
	background: #477eda;
	font-weight: bold;
	color: white ;
	border: solid 2px #477eda;
	border-radius: 6px;
	justify-content: center;
	width: 128px;
    height: 38px;
}




.iconUploadForm{
	margin-right: 10px;
    display: inline-block;
    width: 30px;
    height: auto;
    content: url("../images/mms/icon upload file.png");
}

.buttonHeader{
	display: inline-block; 
	color: #304457;
	margin: 0 25px 0 0;
	font-size: 15px;
	font-weight: bold;
	cursor: pointer;
}
.buttonHeader:hover{
	 color: #f3185a; 
	/* color: red; */
}
.buttonIcon{
	background: transparent;
	border: none;
	color: #304457;;
}
.buttonIcon:hover{
	/* color: #f5a623;  */
	color: #f3185a; 
}
.buttonTable{
	display: flex;
	align-items: center;
	padding:5px 10px; 
	background:transparent; 
	border: solid 1px transparent;
	font-size: 11px;
	margin: 2px 0;
	border-radius: 2px;
	color: #a4b2bb;
}
.buttonTable2{
	padding:5px 10px; 
	background:transparent; 
	border: solid 1px #e9eff4;
	font-size: 11px;
	margin: 2px 0;
	border-radius: 2px;
	color: #a4b2bb;
}
.buttonTable3{
	padding:5px 10px; 
	background:transparent; 
	border: solid 1px #e9eff4;
	font-size: 11px;
	margin: 2px 0;
	border-radius: 2px;
	color: #a4b2bb;
}
.buttonTable4{
	padding:5px 10px; 
	background:transparent; 
	border: solid 1px #e9eff4;
	font-size: 11px;
	margin: 2px 0;
	border-radius: 2px;
	color: #a4b2bb;
}
.buttonTable5{
	display: flex;
	align-items: center;
	padding:5px 10px; 
	background:transparent; 
	border: solid 1px transparent;
	font-size: 11px;
	margin: 2px 0;
	border-radius: 2px;
	color: #a4b2bb;
}
.buttonMinus{
	position: absolute; top: 50%; left: 0; width: 26px; height: 26px; transform: translate(-50%,-50%); background: #f5a623; border:none; border-radius: 50%;
}
.buttonPlus{
	position: absolute; top: 50%; right: 0; width: 26px; height: 26px; transform: translate(50%,-50%); background: #99c741; border: none; border-radius: 50%; color: white;
}
.buttonCheck{
	width: 26px; height: 26px; background: #99c741; border:none; border-radius: 50%;
}
.buttonNoColor{
    font-size: 12px;
    text-align: center;
    border: none;
    color: white;
    bottom: -50px;
    display: inline-block;
    background: #0190E0;
    width: 86px;
    height: 32px;
    border-radius: 8px;
}

.gcbuttonNoColor{
    font-size: 12px;
    text-align: center;
    border: none;
    color: white;
    bottom: -50px;
    display: inline-block;
    background: #0190E0;
    width: 15rem;
    height: 4rem;
    border-radius: 8px;
    margin-right:1rem;
}


.gcSavebuttonNoColor{
    font-size: 12px;
    text-align: center;
    border: none;
    color: white;
    bottom: -50px;
    display: inline-block;
    background: #0190E0;
    width: 7rem;
    height: 4rem;
    border-radius: 8px;
    margin-right:1rem;
}

.buttonRemove{
	width: 26px; height: 26px; background: #f5a623; border: none; border-radius: 50%; color: white; 
	font-size: 15px; font-weight: bold;
}
.buttonAdd{
	width: 26px; height: 26px; background: #99c741; border: none; border-radius: 50%; color: white; 
	font-size: 15px; font-weight: bold;
}

.homePhoto{
	display: block;
	width: 100%;
	height: 100%;
	position: absolute; top: 0;
}
.textNews{
	overflow: hidden; height:70px; margin: 0; color: #9b9b9b; font-size: 13px;
}
table{
	width: 100%;
	/* border-collapse:separate;  */
    border-spacing:0 5px;
}
table tr:hover td{
	/*background:#f2f6f7;*/
}
table tr:hover .buttonTable{
	/* background: white; */
	color: white;
	border: solid 1px transparent;
}
table tr:hover .buttonTable2{
	background: #f5a623;
	color: white;
	border: solid 1px transparent;
}
table tr:hover .buttonTable3{
	background: #8ca0b3;
	color: white;
	border: solid 1px transparent;
}
table tr:hover .buttonTable4{
	background: #00c093;
	color: white;
	border: solid 1px transparent;
}
table tr:hover .buttonTable5{
	/* background: #df2027; */
	/* color: white; */
	color: #a4b2bb;
	border: solid 1px transparent;
}
.delete{
	background-image: url("../images/mms/Icon delete grey.png");
    background-repeat: no-repeat;
    display:inline-block; width: 20px;height: 20px;
    background-size: cover;
}
table tr:hover .delete{
	/* background-image: url("../images/mms/Icon delete red.png"); */
}

.delete:hover {
	background-image: url("../images/mms/Icon delete red.png");
}

.print{
	background-image: url("../images/kpbn/print.png");
    background-repeat: no-repeat;
    margin-right:10px; display:inline-block; width: 10px;height: 10px;
    background-size: cover;
}
table tr:hover .print{
	background-image: url("../images/kpbn/printWhite.png");
}
.search{
	background-image: url("../images/mms/Icon view grey.png");
    background-repeat: no-repeat;
    display:inline-block; width: 20px;height: 20px;
    background-size: cover;
}
table tr:hover .search{
	/* background-image: url("../images/mms/Icon view red.png"); */
}

.search:hover {
	background-image: url("../images/mms/Icon view red.png");
}

.download{
	background-image: url("../images/kpbn/download.png");
    background-repeat: no-repeat;
    margin-right:10px; display:inline-block; width: 10px;height: 10px;
    background-size: cover;
}
table tr:hover .download{
	background-image: url("../images/kpbn/downloadWhite.png");
}
.edit{
	background-image: url("../images/mms/Icon edit grey.png");
    background-repeat: no-repeat;
    display:inline-block; width: 20px;height: 20px;
    background-size: cover;
}
table tr:hover .edit{
	/* background-image: url("../images/mms/Icon edit red.png"); */
}

.edit:hover {
	background-image: url("../images/mms/Icon edit red.png");
}

.generation{
	background-image: url("../images/mms/Icon shipping grey.png");
    background-repeat: no-repeat;
    display:inline-block; width: 20px;height: 20px;
    background-size: cover;
}
table tr:hover .generation{
	/* background-image: url("../images/mms/Icon shipping red.png"); */
}

.generation:hover {
	background-image: url("../images/mms/Icon shipping red.png");
}

.download{
	background-image: url("../images/kpbn/download.png");
    background-repeat: no-repeat;
    margin-right:10px; display:inline-block; width: 10px;height: 10px;
    background-size: cover;
}
table tr:hover .download{
	background-image: url("../images/kpbn/downloadWhite.png");
}

table th{
	background: white; 
	color: #304457; 
	height: 40px;
	font-size: 13px;
	font-weight: bold;
}
table td{
	background: white; color: #304457; 
	border-bottom:solid 1px #e9eff4;
	/* border-top:solid 1px #e9eff4; */
	/* height: 40px; */
	font-size: 13px;
}
.tender th, .tender td{
	padding-right: 10px;
}

.table2{
	border-radius: 8px;
	border-collapse: collapse;
}
.table2 th{
	background: #71879d;
	color: white;
	font-size: 16px;
}
.table2 td{
	color: #8ca0b3;
	font-size: 18px;
}
.table2 tr:nth-child(even) td {background: #FFF}
.table2 tr:nth-child(odd) td {background: #f4f8f9}

tr:nth-child(even) td {background: rgb(205 205 205 / 25%)}
tr:nth-child(odd) td {background: #FFF}


.tablePdf{
	border-radius: 8px;
	border-collapse: collapse;
}
.tablePdf th{
	background: #d3d3d3;
	font-size: 12px;
	font-weight: bold;
	border: solid 1px black;
	text-align: center;
}
.tablePdf td{
	font-size: 12px;
	border: solid 1px black;
	padding: 0 10px;
}

.tableTab{
	border-top: solid 1px #e9eff4;
	z-index: 9;
	position: relative;
	margin-top: -1px;
}

.statusActived{
	background: #99c741; text-align: center; border-radius: 4px; font-size: 9px; color: white; width: 80%; padding: 5px 10px;
}
.statusDisabled{
	background: #8ca0b3; text-align: center; border-radius: 4px; font-size: 9px; color: white; width: 80%; padding: 5px 10px;
}
.tenderActived{
	color: white!important;
}
.thActived{
	background : #f4f8f9!important;
	color: #8ca0b3!important;
}

.checkmark{
 display: inline-block; width: 6px; height: 12px; transform: rotate(-135deg); border: solid white; border-width: 2px 0 0 2px;
}

.pLabelDropdown{
	width: 130px; 
	display: inline-block;
	margin:0.5rem;
}

.pLabelDropdown2{
	width: 200px;
	display: inline-block;
	margin:0.5rem;
}

.selectDropdown{
	width: -webkit-fill-available;
    height: 3rem !important;
    padding: 0 5px;
    border-radius: 0.5rem;
    border: 1px solid #bdbdbd;
}
.selectDropdownView{
	padding:5px;
	display:inline-block;
	background-color: rgb(235, 235, 228);
	vertical-align:top
}
.inputInventory{
	height: 30px;
	padding: 0 5px;
	border-radius: 4px;
	border: solid 1px #e9eff4;
	max-width: 60px;
}
.pLabelTab{
	width: 10%;
    position: relative;
    cursor: pointer;
    font-size: 13px;
    display: inline-block;
    padding: 10px;
    background: white;
    border: solid #e9eff4;
    border-width: 1px 1px 0 1px;
    text-align: center;
}

/* checkbox */
.checkbox{
	-webkit-appearance: none; 
	background: white;
	border:solid 1px #304457;
	box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05);
	padding: 9px;
	border-radius: 3px;
	display: inline-block;
	position: relative;
	width: 20px;
	height: 20px;
}
.checkbox:active, .checkbox:checked:active {
	box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1);
}
.checkbox:checked {
	border: 1px solid #46A583;
	border-radius: 0px;
	box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05), inset 15px 10px -12px rgba(255,255,255,0.1);
	color: white;
	background:#46A583;
	
}
.checkbox:checked:after {
	content: '\2714';
	font-size: 14px;
	display:flex;
	justify-content: center;
	align-items: center;
	color: white;
}
/* --- */

/* textArea */
.textAreaCustom{
	margin: 8px 0 15px;
	padding: 15px 20px; 
	width: 100%;
	height: 100px;
	border: 1px solid #ccc;
	border-radius: 0px; 
	word-wrap: break-word; 
	word-break: break-all;
	resize: none;
}
/*  */

/* scroll */
.wrapper1, .wrapper2{display:block; max-width:100%; min-width: 100%; border: none;
overflow-x: auto; overflow-y:hidden;}
.wrapper1{height: 20px; }
.div1 {height: 20px; }
/* end new */

.columnQty{
	min-width: 78px;
}
.hargaTertinggi1{
	 background:#ceffc6;
}
.hargaTertinggi2{
	 background:#f7c6ff;
	 
}
.hargaTertinggi3{
	 background:#ffdfc6;
}
.priceIdea{
	 background:#c6d4ff;
}
.notifBar{
	position:fixed; top:10%; z-index:10; width: 300px; height: calc(100vh - 50px); background: white; box-shadow: 2px 5px 20px rgba(0, 0, 0, 0.1);
	transition: right 0.5s ease-out;
	-webkit-transition: right 0.5s ease-out;  /* Safari and Chrome */
	-moz-transition: right 0.5s ease-out; /* Firefox 4 */
	-ms-transition: right 0.5s ease-out; /* ie */
	-o-transition: right 0.5s ease-out; /* Opera */
}
.notifContainer{
	width : 100%;
	height: calc(100vh - 100px);
	overflow-y: auto; overflow-x: hidden; 
}
.notifContainer::-webkit-scrollbar { 
                display: none; 
            } 
.notifContent{
	display:block;
	width: 300px;
	border-bottom: solid 1px #e9eff4; padding: 10px 20px;
	transition-duration: 0.5s;
  	transition-property: margin-left;
}
.notifContent:hover{
	background:#f2f6f7;
}
.searchContainer{
	float: right; position:relative; background: white; padding: 5px 20px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}
.inputSearch{
	width: calc(100% - 5px);
	height: 3rem !important;
	padding: 0 5px;
	border-radius: 4px; 
	margin: 0 5px 0 0;
	border: solid 1px #e9eff4;
}
.popSearch{
	position: absolute; width: 300px; top: 100%; right: 0; background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}
.pSearch{
	display: inline-block;
	color: #304457;
}
.arrowDown{
	width: 0; 
	height: 0; 
	border-left: 8px solid transparent;
	border-right: 8px solid transparent;
	border-top: 8px solid #304457;
	display: inline-block;
}
::placeholder {
  color: #a4b2bb;
  opacity: 1;
}
.searchTr{
	/* background: #f2f6f7; */
}
.searchTr td{
	background: none;
}
/* paging */
.paging{
	margin-top: 10px;
	padding: 3px 11px;
	float: right;
	background-color: white;
	
}
.skipButton{
	min-width:0; 
	min-height:0; 
	margin: 0; 
	padding: 0; 
	line-height: 15px; 
	vertical-align: sub;
}
.iconSkipButton{
	font-size:15px; 
	line-height:15px;
}
.buttonPhoto{
	vertical-align:top; 
	margin-bottom: 10px;
	background:transparent; 
	border:none; width: 135px; height: 135px; border-radius: 50%; overflow: hidden; padding: 0;
}
.imgPhoto{
	width: 135px; height: auto;
}
.textareaFaq{
	border-radius: 4px;
	margin-bottom: 10px;
	border: solid 1px #e9eff4;
	resize:none; width: calc( 100% - 135px ); padding: 5px; 
}
.masterDataContainer{
	position:relative; width:90%; height:100px; padding:20px 50px; margin-bottom: 20px; vertical-align: top; background: white; 
}
.masterDataContainerBackup{
	height:150px; display: inline-block; padding-bottom:20px; width: 150px; margin-right:20px; margin-bottom: 20px; vertical-align: top; background: white; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}
.masterDataIcon{
	margin-right: 50px; display: inline-block; 
}
.masterDataIconBackup{
	padding:30px; margin-bottom: 10px; margin-top: -1px; overflow:hidden; height: 100px;
}
.masterDataP{
	color:#adac7c; font-size: 25px; display: inline-block;
}
.masterDataPBackup{
	color: #adac7c;font-size: 16px; text-align: center;
}
.masterDataArrowLeft{
	position:absolute;
	top:0;
	left:-60px;
  	width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-right: 60px solid white;
    border-bottom: 50px solid transparent;
}
.masterDataArrowRight{
	position:absolute;
	top:0;
	right:-60px;
  	width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-left: 60px solid white;
    border-bottom: 50px solid transparent;
}
.slide{
	opacity :0;
	transition : opacity 1s linear;
}
.slideOpacity{
	left:0; background-image: linear-gradient(to right, rgba(255,255,255,1)0%, rgba(255,255,255,1) 25%, rgba(255,255,255,0)100%);
}
.slideText{
	position: absolute; top:50%; left: 50px; width: 50%; transform: translate(0, -50%); padding: 0 50px 0 0;
}
#dragdiv {
  z-index: 10; min-width: 190px; min-height: 120px; position: absolute; top:50%; left:50%; transform:translate(-50%,-50%); background: white; border-radius: 8px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

#dragdivheader {
  padding: 10px;
  cursor: move;
  z-index: 11;
  background-color: #1678cd;
  color: #fff;
  font-size: 12px;
  font-weight: bold;
}

.dragCancel{
    position: absolute;
    top: 7px;
    right: 6px;
    background:#1678cd;
    width: 20px;
    height: 20px;
    text-align: center;
    line-height: 15px;
    font-size: 21px;
    color: white;
}
.menuContainer{
	position: relative;float:left;margin-bottom:20px; width: 33%;
}
.menuP{
	display: inline-block;
	line-height: 50px;
	margin: 0;
	vertical-align: super;
	font-size: 15px;
}
.menuIcon{
	width: 30px;
	vertical-align: sub;
	margin-right: 10px;
}
.menuButton{
	width:auto!important; text-align:left; color:#8998b1;margin:0!important;
	text-transform: none;
	padding: 0!important;
	height: 50px!important;
	border-radius:0!important;
}
.signUpLabel{
	color: #008146; font-size: 12px;
}
.signUpInput{
	font-size:17px; width: 300px; border:none; border-bottom: 2px solid #ebebeb; color:black;
}
.divContent{
	overflow-x: auto; font-size: 13px;  margin-top:20px; background: white; min-height: calc( 100vh - 150px); 
	padding: 40px 60px;
	/* padding: 40px; */ 
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.masterDataButton{
	width: 209px; 
	height: 92px; 
	border-radius: 10px; 
	background: white; 
	border: solid 3px rgb(242, 24,89);
	color: rgb(242, 24,89);
	padding: 0px 30px;
}

.masterDataButton:hover{
	background: rgb(242, 24,89); color: white;
}

table th:first-child, table tr:first-child {
	padding-left: 20px;
} 

table th:last-child, table tr:last-child {
	/*padding-right: 20px;*/
}

table td:first-child {
	padding-left: 20px;
	/* border-left: solid 1px #e9eff4; */
} 

table td:last-child {
	/*padding-right: 20px;*/
	/* border-right: solid 1px #e9eff4; */
}

.buttonPriska{
	/* margin-left: 25px; */ 
	/* margin-left: 400px; */ 
	/* display:inline-block; */ 
	height:28px;
	padding:0.5rem 3rem; 
	background:white; 
	border-radius: 25px;
	font-weight: bold;
	color: rgb(242, 24,89);
	border: solid 2px rgb(242, 24,89);
	justify-content: flex-end;
}

.buttonPriska:hover{
	background: rgb(242, 24,89);
	color: white;
}

.containerInput input, .containerInput select{
	 border: 1px solid #ccc;
	 width: 100%; 
	 border-radius: 0px;
	 
}

.containerInput select{
    padding: 0px 20px;
    margin-top: 8px;
    margin-bottom: 15px;
    height: 50px;
}

.containerInputForm input, .containerInputForm select{
	border: solid 1px #ccc;
}

.pLabelBind {
	height: 32px;
    margin-top: 8px;
    margin-bottom: 0px;
    width: 200px;
    padding: 0 5px;
    align-items: center;
    display: flex;
}

.pLabelDetail {
	display: inline-block;
	margin: 8px 0 15px;
    min-height: 32.228px;
    width: 200px;
    padding: 6px 12px;
    border-radius: 4px;
    border: solid 1px #ccc;
    background: #f4f8f9;
}

.align-right {
	text-align: right;
}

.align-center {
	text-align: center;
}

.width {
	width: 200px;
}

.margin-left {
	margin-left: 200px;
}



/*Made By Farrel*/
.iconTopHome:Hover{
	width: 25px;height: auto;
	content:url("../images/mms/Home.png");
}
.iconTopHome{
	margin-right:20px; 
	display:inline-block; 
	width: 20px;height: auto;
	content:url("../images/mms/Home.png");
	transition: width 0.5s;
}

.iconTopNotification:Hover{
	width: 15px;height: auto;
	content:url("../images/klbf/Notification.png");
}
.iconTopNotification{
	margin-right:20px; 
	display:inline-block; 
	width: 15px;height: auto;
	content:url("../images/klbf/Notification.png");
	transition: width 0.5s;
}

.iconTopUser:Hover{
	width: 20px;height: auto;
	content:url("../images/klbf/Profile_Grey.png");
}
.iconTopUser{
	margin-right:20px; 
	margin-left:20px; 
	display:inline-block; 
	width: 20px;height: auto;
	content:url("../images/klbf/Profile_Grey.png");
	transition: width 0.5s;
}

.iconTopSetting:Hover{
	width: 25px;height: auto;
	content:url("../images/mms/Settings.png");
}
.iconTopSetting{
	margin-right:20px; 
	display:inline-block; 
	width: 20px;height: auto;
	content:url("../images/mms/Settings.png");
	transition: width 0.5s;
}

/* Made by Farrel End */

/* css ref figma by malvin START */
.dashboardItem {
    display: flex;
    justify-content: space-around;
    align-items: center;
    border-radius: 10px;
    overflow: hidden;
    margin: 10px;
    height: 100%;
}
.cardIcon {
    padding: 10px;
    position: relative;
    text-align: center;
}
.tumbnailDashboard {
  	margin: 10px;
    justify-content: center;
    border-radius: 20px;
    border: none;
    width: 105px;
    height: 125px;
    align-items: center;
    display: flex;
    box-shadow: 0px 1px 6px rgb(0 0 0 / 25%);
    background: white;
}

.tumbnailApproval {
    margin: 10px;
    justify-content: center;
    border-radius: 20px;
    border: none;
    width: 125px;
    height: 125px;
    align-items: center;
    display: flex;
    background: white;
    box-shadow: 0px 1px 6px rgb(0 0 0 / 25%);
}

.tumbnailTransactional {
    margin: 10px;
    justify-content: center;
    border-radius: 20px;
    border: none;
    width: 125px;
    height: 125px;
    align-items: center;
    display: flex;
    background: white;
    box-shadow: 0px 1px 6px rgb(0 0 0 / 25%);
}

.tumbnailMasterdata {
    margin: 10px;
    justify-content: center;
    border-radius: 20px;
    border: none;
    width: 150px;
    height: 150px;
    align-items: center;
    display: flex;
    background: linear-gradient(180deg, #FFFFFF 0%, rgba(225, 225, 225, 0.5) 100%);
    box-shadow: 0px 1px 6px rgb(0 0 0 / 25%);
}

.tumbnailMaster {
    margin: 10px;
    justify-content: center;
    border-radius: 20px;
    border: none;
    width: 125px;
    height: 125px;
    align-items: center;
    display: flex;
    background: white;
    box-shadow: 0px 1px 6px rgb(0 0 0 / 25%);
}

.imgIcon{
	max-height: 65%; 
	max-width: 65%;
}
.align-left{
	text-align: left;
}
.welcomeWords {
    display: flex;
    border-radius: 10px;
    overflow: hidden;
    margin: 10px;
    height: 100%;
    background: #FFFFFF;
    box-shadow: 0px 15px 25px rgb(0 0 0 / 5%), 0px 2px 4px rgb(0 0 0 / 10%);
    padding: 1rem;
    color: #1D2539;
    flex-direction: column;
    width:auto;
}
.hiWords {
	font-size: 30px;
	font-weight: bold;
}
.pDashboard{
	font-size: 35px; 
	color: #1D2539; 
	margin: 0;
}

.font-size15{
	font-size: 15px;
}
.statusCard {
    align-items: center;
    border-radius: 10px;
    overflow: hidden;
    margin: 10px;
    height: 100%;
    width: 100%;
    background: #FFFFFF;
    box-shadow: 0px 15px 25px rgb(0 0 0 / 5%), 0px 2px 4px rgb(0 0 0 / 10%);
    padding: 30px;
    color: #1D2539;
}
.width100{
	width: 100%;
}
.statusTumbnail{
    display: flex;
    align-items: center;
    border-radius: 10px;
    overflow: hidden;
    margin: 10px;
    height: 80px;
    padding: 10px;
}
.iconStatus {
    justify-content: center;
    width: 50px;
    height: 50px;
    align-items: center;
    display: flex;
    margin-left: 5%;
}
.imgIconStatus{
	max-height: 100%; 
	max-width: 100%;
}

.bg-tumbnail-green{
	background: #3ca09833;
}

.bg-tumbnail-orange{
	background: #ffb84c40;
}

.margin-left20{
	margin-left: 20%;
}
.bg-data-dashboard {
	display: flex;
    align-items: center;
    border-radius: 10px;
    overflow: hidden;
    margin: 10px;
    height: 100%;
    background: #FAF9F9;
    padding: 30px;
    color: #1D2539;
}
.summary {
    align-items: center;
    border-radius: 10px;
    overflow: hidden;
    height: 100%;
    background: #FAF9F9;
    padding: 30px;
    color: #1D2539;
    margin: 10px;
    width: 97.5%;
}
.p-0{
	padding: 0;
}
.summaryDrop {
    width: 175px;
    height: 35px;
    padding: 0 6px !important;
    border-radius: 10px !important;
}
.mb-8 {
	margin-bottom: 8px;
}
.containerFilter {
	margin: 10px; 
	width: 97.5%;
}
.d-flex-gap {
	display: flex;
    gap: 10px;
}
.m-0{
	margin: 0px !important;
}
.containerFilter input[type="date"]::-webkit-calendar-picker-indicator,input[type="month"]::-webkit-calendar-picker-indicator {
    filter: invert(45%) sepia(0%) saturate(7475%) hue-rotate(61deg) brightness(94%) contrast(90%);
}
.col-left-sum {
	width: 38%;	
	float: left;
	border-radius: 10px;
	/* margin: 5px -10px 0px 5px;  */
	justify-content: space-between; 
}
.col-right-sum {
	width: 62%;	
	float: left;
	border-radius: 10px;
	/* margin: 5px -10px 0px 5px;  */
	justify-content: space-between; 
}
.w-auto {
	width: auto !important;
}
.group-sum {
	min-width: 200px;
	padding: 10px 20px;
	filter: drop-shadow(3px 3px 8px rgba(0, 0, 0, 0.1));
	border-radius: 20px;
	background: linear-gradient(180deg, #FFFFFF 0%, rgba(225, 225, 225, 0.5) 100%);
	
}
.title-label {
	text-transform: uppercase;
	font-weight: bold;
	font-size: 12px;
	line-height: 18px;
	color: #6C6C6C;
}
.val-sum {
	text-transform: uppercase;
	font-weight: 500;
	font-size: 30px;
	line-height: 45px;
	overflow: hidden;
}
.row-sum {
    margin: 0px !important;
    display: flex;
    width: 100%;
    gap: 10px 3%;
}
.gap-wrap {
	gap: 15px;
    display: flex;
    flex-wrap: wrap;
}
.sub-label {
	font-weight: bold;
	font-size: 9px;
	line-height: 18px;
	color: #6C6C6C;
}
.sub-val{
	font-size: 18px;
	line-height: 25px;
}
.sub-group {
	min-width: 130px;
	padding: 3px 15px;
	filter: drop-shadow(3px 3px 8px rgba(0, 0, 0, 0.1));
	border-radius: 20px;
	background: linear-gradient(180deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%);
	
}
.w-425{
	width: 425px;
}
.w-full-flex {
	width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 13px;
    margin: 10px 0px;
}
.d-flex-g10 {
	display: flex;
    gap: 10px;
}
.w-70 {
	width: 70px;
}
.w-125 {
	width: 125px;
}
.d-bod {
	width: 70%;
	display: grid;
}
.h-full{
	height: 100%;
}
.w-full {
	width: 100%;
}
.title-bod {
	display: grid;
	justify-content: center;
}
.ta-center {
	text-align: center;
}
.m-ta-center {
	margin: 10px 0px 70px 0px;
	text-align: center;
}
.w-7 {
	width: 70%;
}
.temp-center {
    top: 10%;
    left: 15%;
    position: absolute;
}
.m-top0 {
	margin-top: 0px !important;
}
.f-s25 {
	font-size: 25px !important;
}
.n-p-t {
	padding: 20px 20px 40px 20px;
}
/* css ref figma by malvin END */

.buttonSideTitle:hover .iconSideDashboardBod{
	content:url("../images/mms/new_sidebar_icon/dashboardBOD.png");
	width: 30px;height: auto;
}
.iconSideDashboardBod{
	margin-right:20px; 
	display:inline-block; 
	width: 25px;height: auto;
	content:url("../images/mms/new_sidebar_icon/dashboardBOD.png");
	transition: width 0.5s;
}
.iconSideDashboardBod:hover, .iconSideDashboardBodActive{
	margin-right:20px; 
	display:inline-block; 
	width: 30px;height: auto;
	content:url("../images/mms/new_sidebar_icon/dashboardBOD.png");
}

.iconFontStyle {
	font-family: Poppins;
	font-size: 14px;
	font-style: normal;
	font-weight: 500;
	line-height: 13px;
	letter-spacing: 0em;
	text-align: center;

}

.iconFontHeader {
	margin:10px;
	font-family: Poppins;
	font-size: 35px;
	font-style: normal;
	font-weight: 700;
	line-height: 53px;
	letter-spacing: 0em;
	text-align: left;
}

.iconFontParagraph {
	margin:10px;
	font-family: Poppins;
	font-size: 18px;
	font-style: normal;
	font-weight: 300;
	line-height: 27px;
	letter-spacing: 0em;
	text-align: left;
	
}

.dashboardFont{
	font-family: Poppins;
    font-size: 13px;
    font-style: normal;
    font-weight: BOLD;
    line-height: 13px;
    letter-spacing: 0em;
    text-align: center;
	
}

.approvalFont{
	font-family: Poppins;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 13px;
    letter-spacing: 0em;
    text-align: center;
    padding: 2px;
}

.masterDataFont{
	font-family: Poppins;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 13px;
    letter-spacing: 0em;
    text-align: center;
    padding: 2px;
}

.transactionalFont{
	font-family: Poppins;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 13px;
    letter-spacing: 0em;
    text-align: center;
    padding: 2px;
}
	


.w-135{
	 width: 135px;
}

/* KLBF ================================================================== */

.loginLogo{
	content:url("../images/klbf/KLBF_Logo.png");
	display: block;
    margin-left: auto;
    margin-right: auto;
    width: auto;
    height: 10rem;
}

.welcomeKLBF{
	font-size: 4rem;
    display: flex;
    font-weight: bold;
    padding-left:2rem;
}

.scmKLBF{
	font-size: 3rem;
    display: flex;
    font-weight: bold;
    padding-left:2rem;
}

.loginKLBF{
	color: #016532;
    border: 1px solid white;
    width: 35rem;
    background: white;
    border-radius: 20px;
    font-weight: 1000;
    display:flex;
    justify-content:center;
}

.boxKLBF{
	background-color: #88be3e;
    color: white;
    border-radius: 1rem;
    width: 27rem;
    margin-left:1rem;
}

.loginLeft{
	width:55%;
	height:100%;
	background-image:url("../images/klbf/Login/Login.jpg");
	background-size: auto;
	background-repeat: no-repeat;
}

/* KLBF =========================================================================================================================== */

.divContentLeft{
	overflow-x: auto; font-size: 13px;  margin-top:20px; background: white; min-height: calc( 100vh - 150px); 
	padding: 40px 60px;
	box-shadow: 0 2px 10px 7px rgb(0 0 0 / 5%);
	width:45%;
}

.divContentRight{
	overflow-x: auto; font-size: 13px;  margin-top:20px; background: white; min-height: calc( 100vh - 150px); 
	padding: 40px 60px;
	box-shadow: 0 2px 10px 7px rgb(0 0 0 / 5%);
	width:45%
}

.buttonEditPassword[disabled]{
    padding: 5px 10px;
    font-size: 12px;
    text-align: center;
    border: none;
    color: white;
    position: relative;
    display: inline-block;
    background: gray;
    width: 86px;
    height: 32px;
    border-radius: 8px;
}

.buttonEditPassword{
    padding: 5px 10px;
    font-size: 12px;
    text-align: center;
    border: none;
    color: white;
    position: relative;
    display: inline-block;
    background: #0190E0;
    width: 86px;
    height: 32px;
    border-radius: 8px;
}

.welcomeBack{
	margin-left: 50px;
    margin-right: 50px;
    margin-top: 70px;
    display: flex;
    flex-direction: column;
    font-style: normal;
    font-weight: 800;
    font-size: 44px;
    line-height: 36px;
    letter-spacing: 0.05em;
}

.topNavBar{
	display:flex; 
	justify-content: space-between; 
	min-width:1100px; 
	/*padding: 6px 20px;*/ 
	/*position:fixed; */
	top:0; 
	left: 0; 
	z-index:12; 
	width: 100%; 
	height: 60px;
	padding-right:2rem;
	margin:1px;
	background: #FFFFFF;
	box-shadow: 0px 15px 25px rgba(0, 0, 0, 0.05), 0px 2px 4px rgba(0, 0, 0, 0.1);
	
}

.hamburger_menu{
	width:20px;
	height:20px;
	
}

.iconTopDropwdown:Hover{
	width: 12px;height: 6px;
	content:url("../images/klbf/Dropdown.png");
}
.iconTopDropdown{
	margin-right:20px; 
	display:inline-block; 
	width: 12px;height: 6px;
	content:url("../images/klbf/Dropdown.png");
	transition: width 0.5s;
}

.sideArrow{
	display: flex;
    justify-content: center;
    border-radius: 3rem;
    height: 20px;
    width: 20px;
    align-items: center;
    color: #8998b1;
    font-size: 30px;
    background: #F5F5F5;
    border: none;
    left: 70%;
}

.pendingApprovalWord{
	font-family: 'Poppins';
    font-style: normal;
    font-weight: bold;
    font-size: 12px;
    line-height: 21px;
    text-align: center;
}

.pendingApprovalNumber{
	font-family: 'Poppins';
    font-style: normal;
    font-weight: bold;
    font-size: 20px;
    line-height: 21px;
    text-align: center;
}

.pendingDashboardWord{
	font-family: 'Poppins';
    font-style: normal;
    font-weight: bold;
    font-size: 11px;
    line-height: 21px;
    text-align: center;
}

.pendingDashboardNumber{
	font-family: 'Poppins';
    font-style: normal;
    font-weight: bold;
    font-size: 15px;
    line-height: 21px;
    text-align: center;
}

.approvePopUpContainer{
	font-size: 13px;
    z-index: 99;
    position: fixed;
    top: 0px;
    left: 0px;
    background: rgba(0, 0, 0, 0.5);
    width: 100vw;
    height: 100vh;
    overflow: scroll;
    display: flex;
    justify-content: center;
    align-items: center;
}

.approvePopUpGreen{
	background: white;
    width: 500px;
    min-height: 125px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    box-shadow: 0 2px 10px rgb(0 0 0 / 5%);
    border-radius: 5px;
    
}

.topPopUp{
	background: white;
    width: 80%;
    height:auto;
    min-height: 125px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    box-shadow: 0 2px 10px rgb(0 0 0 / 5%);
    border-radius: 5px;
    
}
.topPopUpWarning{
    background: white;
    width: 55rem;
    height: auto;
    min-height: 125px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    box-shadow: 0 2px 10px rgb(0 0 0 / 5%);
    border-radius: 5px;
   
}

.approvePopUpHeader{
	font-size: 15px;
    margin-bottom: 20px;
    font-weight: bold;
    background: #46A583;
    color: white;
    display: flex;
    border-radius: 5px 5px 0px 0px;
    padding: 1rem 1px 1rem 2rem;
}

.approvePopUpMessage{
	font-weight: 500;
    display: flex;
    padding: 1px 1px 23px 2rem;
    border-bottom: 1px solid #d1c3c3;
}

.topPopUpMessage{
	font-weight: 500;
    display: flex;
    flex-direction:column;
    padding:1rem;
}

.approvePopUpButton{
	display: inline-block;
    align-items: center;
    margin-left: 10px;
    padding: 3px 20px;
    background: white;
    font-weight: bold;
    color: #46A583;
    border: 2px solid #46A583 !important;
    border-radius: 6px;
    justify-content: center;
}

.approvePopUpButtonContainer{
	width: 100%;
    justify-content: flex-end;
    display: flex;
    padding: 1rem;
}

.approvePopUpButton:hover{
	border: #46A583;
    font-weight: bold;
    color: white;
    border-radius: 6px;
    background: #46A583;
}

.formUpload {
	min-width: 550px; 
	max-width: 55%;
	min-height: 500px;
	max-height: 72%; 
	background: white; 
	width: 55%; 
	height: 72%;
	position: absolute; 
	top: 50%; 
	left: 50%; 
	transform: translate(-50%,-50%); 
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); 
	border-radius: 5px;
	padding: 30px;
}

.uploadHeader{
	font-size: 28px;
    font-weight: bold;
    background: #46A583 ;
    color: white;
    display: flex;
    padding: 1rem 1rem 1rem 1rem;
    border-radius: 5px 5px 0px 0px;
}

.uploadButtonContainer{
	display: flex;
    justify-content: flex-end;
    padding: 0rem 17rem 0rem 0rem;
}

.popUpResultClose{
	display: flex;
    justify-content: space-between;
    padding-bottom: 2rem;
}

.buttonClosePopUpResult{
	display: flex;
    align-items: center;
    padding: 3px 20px;
    justify-content: center;
    width: 110px;
    height: 35px;
    border: #46A583;
    font-weight: bold;
    color: white;
    border-radius: 6px;
    background: #46A583;
    font-size: 12px;
}

.popUpResultFontStyle{
	display: flex;
    font-size: 25px;
    color: #46A583;
    margin-left: 10px;
    font-weight: bold;
}

.resultContainer{
	width: 75%;
    background: white;
    padding: 3rem;
    height: 55rem;
    border-radius: 1rem;
}


.popUpDuplicateWarning{
	display: flex;
    justify-content: space-between;
    padding-bottom: 2rem;
}

.popUpDuplicateCloseButton{
	display: flex;
    padding: 0.5rem;
    justify-content: flex-end;
}

.buttonClosePopUpDuplicate{
	display: flex;
    align-items: center;
    padding: 3px 20px;
    justify-content: center;
    width: 110px;
    height: 35px;
    border: #46A583;
    font-weight: bold;
    color: white;
    border-radius: 6px;
    background: #46A583;
    font-size: 12px;
}

.popUpDuplicateFontStyle{
	margin-top: 2rem;
    display: flex;
    font-size: 25px;
    color: #FF5B5C;
    margin-left: 10px;
    font-weight: bold;
}

.buttonClosePopUpDuplicate{
	display: flex;
    align-items: center;
    padding: 3px 20px;
    justify-content: center;
    width: 110px;
    height: 35px;
    border: #46A583;
    font-weight: bold;
    color: white;
    border-radius: 6px;
    background: #46A583;
    font-size: 12px;
    margin-left:1rem;
}

.resultDocFlowMappingContainer{
	width: 75%;
    background: white;
    height: auto;
    max-height: 60vh;
    border-radius: 1rem;
}

.docFlowMappingPopUpTableContainer{
	PADDING: 1REM;
    height: auto;
    overflow: scroll;    
    max-height: 30rem;
}


.docFlowMappingPopUpTableContainerEmpty{
	height: 35rem;
    overflow: scroll;
    margin-bottom:2rem;
}

.docFlowMappingUpdatePopUpTableContainer{
	height: 37rem;
    overflow: scroll;
}

.popUpContainer{
	font-size: 13px;
    z-index: 99;
    position: fixed;
    top: 0px;
    left: 0px;
    background: rgba(0, 0, 0, 0.5);
    width: 100vw;
    height: 100vh;
    overflow: scroll;
    display: flex;
    justify-content: center;
    align-items: center;
}

.confirmDeleteContainer{
	z-index: 99;
    position: fixed;
    top: 0px;
    left: 0px;
    background: rgba(0, 0, 0, 0.5);
    width: 100vw;
    height: 100vh;
    overflow: scroll;
    display: flex;
    justify-content: center;
    align-items: center;
}

.confirmDeleteBox{
	background: white;
    width: 500px;
    min-height: 125px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    box-shadow: 0 2px 10px rgb(0 0 0 / 5%);
    border-radius: 5px;
}

.genereateProposalBox{
	background: white;
    width: 100rem;
    height:50rem;
    min-height: 125px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    box-shadow: 0 2px 10px rgb(0 0 0 / 5%);
    border-radius: 5px;
}

.deletePopUpHeader{
	font-size: 15px;
    margin-bottom: 20px;
    font-weight: bold;
    background: #FF5B5C;
    color: white;
    display: flex;
    border-radius: 5px 5px 0px 0px;
    padding: 1rem 1px 1rem 2rem;
}

.editPopUpHeader{
	font-size: 15px;
    margin-bottom: 20px;
    font-weight: bold;
    background: #1490b9;
    color: white;
    display: flex;
    border-radius: 5px 5px 0px 0px;
    padding: 1rem 1px 1rem 2rem;
}

.warningPopUpHeader{
	font-size: 15px;
    margin-bottom: 20px;
    font-weight: bold;
    background: #FFB84C;
    color: white;
    display: flex;
    border-radius: 5px 5px 0px 0px;
    padding: 1rem 1px 1rem 2rem;
}

.warningPopUpHeaderTop{
	font-size: 15px;
    font-weight: bold;
    background: #FFB84C;
    color: white;
    display: flex;
    border-radius: 5px 5px 0px 0px;
    padding: 1rem 1px 1rem 2rem;
}

.popUpMessage{
	font-weight: 500;
    display: flex;
    padding: 1px 1px 23px 2rem;
    border-bottom: 1px solid #d1c3c3;
}

.infoPopUpHeader{
	font-size: 15px;
    margin-bottom: 20px;
    font-weight: bold;
    background:#3CA098 ;
    color: white;
    display: flex;
    border-radius: 5px 5px 0px 0px;
    padding: 1rem 1px 1rem 2rem
}

.popUpResultCloseButtonContainer{
	display: flex;
    justify-content: flex-end;
    padding-top: 1rem;
}

.popUpFontFailed{
	display: flex;
    font-size: 25px;
    color: #FF5B5C;
    margin-left: 10px;
    font-weight: bold;
}

.gcInputContainer{
	display: flex;
    flex-direction: column;
}

.popUpTopTableColumns{
	width: 15rem !important;
    height: 2.5rem !important;
    padding: 0.5rem !important;
    overflow: hidden !important;
    margin-top: 1.5rem !important;
    margin-right: 1rem !important;
    margin-bottom: 1rem !important;
}

.searchBoxContainer{
	border-radius: 0.2rem;
    max-height: 10rem;
    height: auto;
    width: auto;
    background: white;
    overflow-y: scroll;
    border-bottom: 1px solid #bdbdbd;
    border-left: 1px solid #bdbdbd;
    border-right: 1px solid #bdbdbd;
    margin-left: 0.5rem;
}

.searchBoxItemContainer{
	border-radius: 0.2rem;
    max-height: 10rem;
    height: auto;
    width: 20rem !important;
    background: white;
    margin-top: 4rem;
    overflow-y: scroll;
    border-bottom: 1px solid #bdbdbd;
    border-left: 1px solid #bdbdbd;
    border-right: 1px solid #bdbdbd;
    position: absolute;
    z-index: 99;
}

.searchBoxDiv{
	padding: 0.5rem;
    border-bottom: 1px solid #e9e5e5;
}

.proposalReturn{
    font-size: 12px;
    text-align: center;
    border: none;
    color: white;
    bottom: -50px;
    display: inline-block;
    background: orange;
    width: 15rem;
    height: 4rem;
    border-radius: 8px;
    margin-right:1rem;
}

.proposalApprove{
    font-size: 12px;
    text-align: center;
    border: none;
    color: white;
    bottom: -50px;
    display: inline-block;
    background: green;
    width: 15rem;
    height: 4rem;
    border-radius: 8px;
    margin-right:1rem;
}

.proposalReject{
    font-size: 12px;
    text-align: center;
    border: none;
    color: white;
    bottom: -50px;
    display: inline-block;
    background: red;
    width: 15rem;
    height: 4rem;
    border-radius: 8px;
    margin-right:1rem;
}

.test1 {
	color:white;
	height:595.35pt; 
	width:841.95pt;
	
} 

.topPopUpCustomer{	
	background: white;	
	width: 130rem;	
	height:22rem;	
	min-height: 125px;	
	position: absolute;	
	top: 50%;	
	left: 50%;	
	transform: translate(-50%,-50%);	
	box-shadow: 0 2px 10px rgb(0 0 0 / 5%);	
	border-radius: 5px;	
}	
.topPopUpProducts{	
	background: white;	
	width: 130rem;	
	height:22rem;	
	min-height: 125px;	
	position: absolute;	
	top: 50%;	
	left: 50%;	
	transform: translate(-50%,-50%);	
	box-shadow: 0 2px 10px rgb(0 0 0 / 5%);	
	border-radius: 5px;	
}	
.topPopUpDivision{	
	background: white;	
	width: 60rem;	
	height:22rem;	
	min-height: 125px;	
	position: absolute;	
	top: 50%;	
	left: 50%;	
	transform: translate(-50%,-50%);	
	box-shadow: 0 2px 10px rgb(0 0 0 / 5%);	
	border-radius: 5px;	
}	
.topPopUpTOP{	
	background: white;	
	width: 110rem;	
	height: 45rem;	
	min-height: 125px;	
	position: absolute;	
	top: 50%;	
	left: 50%;	
	transform: translate(-50%,-50%);	
	box-shadow: 0 2px 10px rgb(0 0 0 / 5%);	
	border-radius: 5px;	
}	
.topPopUpTOPEdit{	
	background: white;	
	width: 100rem;	
	height: 55rem;	
	min-height: 125px;	
	position: absolute;	
	top: 50%;	
	left: 50%;	
	transform: translate(-50%,-50%);	
	box-shadow: 0 2px 10px rgb(0 0 0 / 5%);	
	border-radius: 5px;	
}	
.topPopUpCustomerType{	
	background: white;	
	width: 60rem;	
	height:22rem;	
	min-height: 125px;	
	position: absolute;	
	top: 50%;	
	left: 50%;	
	transform: translate(-50%,-50%);	
	box-shadow: 0 2px 10px rgb(0 0 0 / 5%);	
	border-radius: 5px;	
}

.warningPopUpHeaderCustomer{	
	font-size: 15px;	
	font-weight: bold;	
	background: #FFB84C;	
	color: white;	
	display: flex;	
	border-radius: 5px 5px 0px 0px;	
	padding: 1rem 1px 1rem 2rem;	
}	
.warningPopUpHeaderProducts{	
	font-size: 15px;	
	font-weight: bold;	
	background: #FFB84C;	
	color: white;	
	display: flex;	
	border-radius: 5px 5px 0px 0px;	
	padding: 1rem 1px 1rem 2rem;	
}	
.warningPopUpHeaderDivision{	
	font-size: 15px;	
	font-weight: bold;	
	background: #FFB84C;	
	color: white;	
	display: flex;	
	border-radius: 5px 5px 0px 0px;	
	padding: 1rem 1px 1rem 2rem;	
}	
.warningPopUpHeaderTOP{	
	font-size: 15px;	
	font-weight: bold;	
	background: #FFB84C;	
	color: white;	
	display: flex;	
	border-radius: 5px 5px 0px 0px;	
	padding: 1rem 1px 1rem 2rem;	
}	
.warningPopUpHeaderCustomerType{	
	font-size: 15px;	
	font-weight: bold;	
	background: #FFB84C;	
	color: white;	
	display: flex;	
	border-radius: 5px 5px 0px 0px;	
	padding: 1rem 1px 1rem 2rem;	
}	

	.popUpTopTableColumnsDivision{	
	width: 25rem !important;	
	height: 2.5rem !important;	
	padding: 0.5rem !important;	
	overflow: hidden !important;	
	margin-top: 1.5rem !important;	
	margin-right: 1rem !important;	
	margin-bottom: 1rem !important;	
}	
.popUpTopTableColumnsCustomerType{	
	width: 25rem !important;	
	height: 2.5rem !important;	
	padding: 0.5rem !important;	
	overflow: hidden !important;	
	margin-top: 1.5rem !important;	
	margin-right: 1rem !important;	
	margin-bottom: 1rem !important;	
}	
.popUpTopTableColumnsTOP{	
	width: 25rem !important;	
	height: 2.5rem !important;	
	padding: 0.5rem !important;	
	overflow: hidden !important;	
	margin-top: 1.5rem !important;	
	margin-right: 1rem !important;	
	margin-bottom: 1rem !important;	
}	
.popUpTopTableColumnsTOPEdit{	
	width: 25rem !important;	
	height: 2.5rem !important;	
	padding: 0.5rem !important;	
	overflow: hidden !important;	
	/*margin-top: 1.5rem !important;*/	
	margin-right: 1rem !important;	
	margin-bottom: 1rem !important;
}
.demandworksheetFilterContainer{
	display: flex;
    height: auto;
    background: white;
    box-shadow: 0px 15px 25px rgb(0 0 0 / 10%), 0px 2px 4px rgb(0 0 0 / 20%);
    margin-top: 1rem;
    border-radius: 0.5rem;
    width:100%;
    padding:0.5rem;
}
.buttonSquare{
    display: flex;
    align-items: center;
    padding: 3px 20px;
    font-weight: bold;
    color: white;
    justify-content: center;
    background: #46A583;
    box-shadow: 0px 15px 25px rgb(0 0 0 / 10%);
    border-radius: 0.5rem;
    height: 30px;
    border: none;
    width: 10rem;
    font-size: 10px;
    height:23px;
}
.successToUpload{
	BACKGROUND: #46A583;
    COLOR: WHITE;
    FONT-SIZE: 2REM;
    BORDER-RADIUS: 1REM 1REM 0REM 0REM;
    FONT-WEIGHT: BOLD;
    PADDING: 1REM;
}
.failedToUpload{
	BACKGROUND: rgb(255, 0, 0);
    COLOR: WHITE;
    FONT-SIZE: 2REM;
    BORDER-RADIUS: 1REM 1REM 0REM 0REM;
    FONT-WEIGHT: BOLD;
    PADDING: 1REM;
}
.successPopUpHeader{
	font-size: 15px;
    margin-bottom: 20px;
    font-weight: bold;
    background: #46A583;
    color: white;
    display: flex;
    border-radius: 5px 5px 0px 0px;
    padding: 1rem 1px 1rem 2rem;
}
.buttonSideTitle:hover .iconSideLeads{
	content:url("../images/klbf/Sidebar/Leads_White.png");
	width: 30px;height: 30px;
}

.iconSideLeads{
	margin-right:20px; 
	display:inline-block; 
	width: 30px;height: 30px;
	content:url("../images/klbf/Sidebar/Leads.png");
	transition: width 0.5s;
}
.iconSideLeads:hover, .iconSideLeadsActive{
	margin-right:20px; 
	display:inline-block; 
	width: 30px;height: 30px;
	content:url("../images/klbf/Sidebar/Leads_White.png");
}

.inputField{
	width: 100% !important;
    height: 3rem !important;
    padding: 0 5px;
    border-radius: 0.5rem;
    border: 1px solid #bdbdbd;
}

.tableDataContainer{
	align-items: center;
    display: flex;
    width: 100%;
    justify-content: flex-start;
    /*height: 3.5rem;*/
    padding: 0.5rem;
    box-sizing: border-box;
}

.dataBindDiv{
    height:auto;
    margin:0.5rem;
    padding:0.5rem;
    width: max-content;
}

.inputOpportunities{
	width: -webkit-fill-available;
    height: 3rem !important;
    padding: 0 5px;
    border-radius: 0.5rem;
    border: 1px solid #bdbdbd;
}
	
.styleListOpportunity {
	white-space: nowrap;
	padding: 0.25rem;
}

.searchBoxOpportunity{
	border-radius: 0.2rem;
    max-height: 15rem;
    height: auto;
    width: -webkit-fill-available;
    background: white;
    overflow-y: scroll;
    border: 1px solid #bdbdbd;
    position: absolute;
    margin-top: 32px;
    max-width: 25rem;
}



.even-row {
    background-color: #f2f2f2; /* Light grey */
}

.odd-row {
    background-color: #ffffff; /* White */
}

.dashboardContainer {
    width: 100%;
    padding:0.5rem;
}

.overview {
    display: flex;
    justify-content: space-between;
    height: auto;
}
.widget {
	height:35rem;
	border-radius: 0.5rem;
    padding: 1rem;
    margin:0.5rem;
    text-align: center;
    background-color: white;
    box-shadow: 0px 15px 25px rgb(0 0 0 / 5%), 0px 2px 4px rgb(0 0 0 / 10%);
}
.overview div p {
    margin: 5px 0;
}
.charts {
    display: flex;
    justify-content: space-around;
    margin: 1rem;
    background: white;
    padding: 1rem;
    border-radius: 0.5rem;
    box-shadow: 0px 15px 25px rgb(0 0 0 / 5%), 0px 2px 4px rgb(0 0 0 / 10%);
    height: 35rem;
}

.chart-container {
	width: 100%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: auto;
}

canvas {
    width: 90% !important;
    height: 90% !important;
}

.form-container {
    max-width: 800px;
    margin: auto;
    padding: 20px;
    background: white;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    margin-top: 35px;
}
.form-container h2 {
    text-align: center;
    margin-bottom: 20px;
}
.form-group {
    margin-bottom: 20px;
}
.form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    font-size: 12px;
}
.form-group input[type="text"], .form-group input[type="email"], .form-group input[type="password"] {
    width: 300px;
    padding: 10px;
    box-sizing: border-box;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 11px;
}
.form-group input[type="checkbox"], .form-group input[type="radio"] {
    margin-right: 10px;
    margin-top: -2px;
    vertical-align: middle;
}
input[type="radio"] {
  margin-top: -1px;
  vertical-align: middle;
}
.flex-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}
.flex-container .form-group {
    flex: 1 1 48%;
}
.form-group .radio-group, .form-group .checkbox-group {
    display: flex;
    align-items: center;
}
.form-group .checkbox-group {
    flex-wrap: wrap;
}
.form-group .checkbox-group div {
    flex: 1 1 30%;
}
.form-actions {
    text-align: center;
}
.form-actions button {
    padding: 10px 20px;
    background-color: #007bff;
    border: none;
    color: white;
    cursor: pointer;
    border-radius: 5px;
}
.form-actions button:disabled {
    background-color: #ccc;
}
.form-group .toggle-switch {
    position: relative;
    display: inline-block;
    width: 30px;
    height: 14px;
}
.form-group .toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}
.form-group .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
    border-radius: 24px;
}
.form-group .slider:before {
    position: absolute;
    content: "";
    height: 10px;
    width: 10px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}
.form-group input:checked + .slider {
    background-color: #2196F3;
}
.form-group input:checked + .slider:before {
    transform: translateX(14px);
}
.slider::after {
  	position:relative;
  	right:-40px;
 	top: -2px;
  	content: "ACTIVE";
}
.form-group select {
    width: 300px;
    padding: 10px;
    font-size: 11px;
    border: 1px solid #ccc;
    border-radius: 4px;
}
.authority-list-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Adjust minmax as needed */
    gap: 10px;
    margin-top: 15px;
}
.authority-list {
    break-inside: avoid;
    margin-bottom: 10px;
}
.authority-checkbox {
	vertical-align: middle;
    margin-right: 5px;
}
.authority-item {
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 10px;
    background-color: #fff;
}
.authority-item label {
    display: flex;
    align-items: center;
    font-size: 12px;
    padding-top: 5px;
}
.authority-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 15px;
}
.authority-table th, .authority-table td {
    border: 1px solid #ccc;
    padding: 10px;
    text-align: left;
}
.authority-table th {
    background-color: #f4f8f9;
}
.authority-list-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 15px;
}
.password-container {
    display: flex;
    align-items: center;
    width: 320px;
}
.password-container input {
    flex: 1;
    padding: 10px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #f4f8f9;
    width: 320px;
}
.password-container span {
    margin-left: 10px;
    cursor: pointer;
}
#login-page {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-image: url(../images/qas/loginWallpaper2.jpg);
    background-size: cover;
    font-family: 'Poppins', sans-serif;
}

#login-page .login-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 400px;
    background-color: rgba(17, 117, 188, 0.9);
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
    height: 60%;
}

#login-page .login-wrapper {
    width: 100%;
}

#login-page .logo {
    text-align: center;
    position: absolute;
    left: 50%;
    top: 7%;
    transform: translateX(-50%);
}

#login-page form{
	padding: 0px;
	margin: 0, 0, 0, 0;
}

#login-page .logo img {
    height: 9vh;
}

#login-page .login-content {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 50px;
}

#login-page .form-group {
    margin-bottom: 10px;
}

#login-page label {
    font-weight: bold;
    font-size: 14px;
    color: white;
    display: block;
    margin-bottom: 5px;
}

#login-page input[type="text"],
#login-page input[type="password"],
#login-page input[type="email"]{
    /*width: 160%;*/
    padding: 10px;
    border: none;
    border-radius: 5px;
    font-size: 14px;
}

#login-page #showLoginPassword {
    margin-left: -30px;
    cursor: pointer;
}

#login-page .login-btn {
    width: 100%;
    padding: 10px;
    background-color: rgb(0, 0, 130);
    border: none;
    border-radius: 5px;
    font-size: 16px;
    font-weight: bold;
    color: white;
    cursor: pointer;
    /*margin-top: 25px;
    margin-left: 60px;*/
}

#login-page .login-btn:disabled {
    background-color: #a1a1a1;
    cursor: not-allowed;
}

#login-page section img {
    display: block;
    margin: 10px auto;
}

.reset-password-link {
    display: block;
    text-align: left;
    margin: 10px 0;
    font-size: 14px;
    color: rgb(0, 0, 128);
    text-decoration: none;
}

.reset-password-link:hover {
    text-decoration: underline;
}

.buttonLogout {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f44336;
    color: white;
    border: none;
    padding: 10px;
    cursor: pointer;
    width: 100%;
}

.buttonLogout:hover {
    background-color: #d32f2f;
}

.buttonLogout i {
    margin-right: 0.5rem;
}

.divSideTitle .buttonSideTitle .fa.custom-icon-size {
    font-size: 1.8em;
    margin-right:18px; 
	display:inline-block; 
}
.divSideTitle .buttonSideTitleActive .fa.custom-icon-size {
    font-size: 1.8em;
    margin-right:18px; 
	display:inline-block; 
}

.lead-stats {
    display: flex;
    align-items: center;
    justify-content: center;
}

.x-value, .y-value {
    font-weight: bold;
}

.x-value.green {
    color: green;
}

.x-value.black {
    color: black;
}

.y-value.red {
    color: red;
}

.y-value.black {
    color: black;
}

.divider {
    padding : 2px;
}

.dataRow {
    min-height: 3rem; /* Adjust this value as needed */
    padding: 0.5rem; /* Ensure there is consistent padding */
}

input[type="text"], .inputSearch {
    width: 100%; /* Full width within the container */
    padding: 0.5rem; /* Consistent padding */
    box-sizing: border-box; /* Maintain consistent width */
}

.custom-modal {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
}

.modal-content {
    background-color: white;
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 50%;
}

.close {
    float: right;
    cursor: pointer;
}
.copyright-container {
	position: absolute;
	bottom: 0;
	left:0;
	z-index: 999;
}

.lead-status-table {
  border-collapse: collapse;
  width: 90%;
  margin-top: 0.5rem;
}

.lead-status-table td {
  border: none;
  background: none !important;
  font-size: 1.5rem;
  text-align: center;
}

.date-newline {
    white-space: pre-line;
    display: block;
}

select {
    -webkit-appearance: listbox !important;
    appearance: listbox !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
}

.funnel-row {
   width: 100%;
   margin-bottom: 8px; /* Space between bars */
}

.bar-wrapper {
   display: flex;
   justify-content: center; /* This centers the bar to create the funnel look */
   width: 100%;
}

.bar {
   height: 25px; /* Adjust this to make bars thicker or thinner */
   border-radius: 2px; /* Optional: smooths the edges */
   transition: width 0.3s ease; /* Optional: makes it look premium when data loads */
}