.custom-btn {
  width: 112px;
  min-width: 47px;
  min-height: 47px;
  border-radius: var(--Radius-rad-8, 8px);
  padding: var(--Space-space-12, 12px) var(--Space-space-16, 16px);
  border: 1px solid transparent;
}

.custom-btn span {
  font-size: 16px;
  font-style: normal;
  line-height: 145%;
}

.btn-register {
  background: var(--Brand-Waktoo-500, #8AB03F);
}

.crm .btn-register {
  background: var(--Brand-CRM-600, #198F2C) !important;
}

.commerce .btn-register {
  background: #E89417 !important;
  border: 1px solid #E89417 !important;
}

.btn-register:hover {
  background: #7d9f3c;
  border: 1px solid var(--Brand-Waktoo-600, #7d9f3c);
}

.btn-register:hover span {
  color: #fff !important;
}

.crm .btn-register:hover {
  background: #197428 !important;
  border: 1px solid var(--Brand-CRM-600, #197428) !important;
}

.commerce .btn-register:hover {
  background: #d68a18 !important;
  border: 1px solid #d68a18 !important;
}

.crm .btn-register:hover span {
  color: var(--Brand-CRM-600, #fff) !important;
}

.commerce .btn-register:hover span {
  color: #fff !important;
}

.btn-login {
  background: #fff;
  border: 1px solid var(--Brand-Waktoo-600, #7EA039);
}

.crm .btn-login {
  background: #fff;
  border: 1px solid var(--Brand-Waktoo-600, #198F2C) !important;
}

.commerce .btn-login {
  background: #fff;
  border: 1px solid  #E89417 !important;
}

.crm .btn-login span {
  color: var(--Brand-CRM-600, #198F2C) !important;
}

.commerce .btn-login span {
  color: #E89417 !important;
}

.btn-login:hover {
  background: var(--Brand-Waktoo-500, #fff);
  border: 1px solid #6f8a39 !important;
}

.crm .btn-login:hover {
  background: var(--Brand-CRM-600, #fff) !important;
  color: var(--Brand-CRM-600, #198F2C) !important;
  border: 1px solid var(--Brand-Waktoo-600, #198F2C) !important;
}

.commerce .btn-login:hover {
  background: #fff;
  border: 1px solid  #d88e1f !important;
}

.commerce .btn-login:hover span {
  color: #d88e1f !important;
}

.btn-login:hover span {
  color: #6f8a39 !important;
}
/* =================== content navbar =================== */
.custom-navbar {
  height: auto;
  margin-bottom: 0;
  padding-block: 16px;
}

.navbar.sticky-nav {
  padding-top: 16px;
  padding-bottom: 16px;
  box-shadow: 0 0 10px rgba(0,0,0,.15)
}

.nav-plus{

}

.tdss {
  padding-left: 40px;
  width: 300px;
  padding-top: 30px;
  background: var(----Grey-100, #F2F3F3);
}

.card-submenu{
  padding: 16px;
	cursor: pointer;
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
	color: #3C476C;
}

.card-submenu-active {
  background: #fff;
  padding-left: 24px;
}

.tdsshh{
  box-shadow: 4px 0px 20px 0px #BBDEFF33;
  height: 300px;
  width: 4px;
}

.wdth-mlp{
	padding-left: 20px;
	padding-top: 20px;
}

.wrapper_submenu_content_title {
  background: #fff;
  padding: 20px;
  margin-bottom: 20px;
  border-radius: var(--Space-space-8, 8px);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.wrapper_submenu_content_title:hover {
  box-shadow: -1px 3px 10px 0px rgba(0, 0, 0, 0.12);
  transform: translateY(-5px);
}

.img-icon-waktoo{
	width: 47px;
	height: 47px;
	margin-right: 10px;
}

.txt-wlss{
	font-family: Inter;
	font-size: 13px;
	font-weight: 400;
	line-height: 19px;
	letter-spacing: 0em;
	text-align: left;
	color: #7C7C7C;
	margin-top: 10px;
}

.img-sss-4{
	width: 60px;
  height: 60px;
  border-radius: 12px;
  padding: 10px;
  margin-bottom: 20px;
  float: left;
  /* margin-right: 10px; */
}

.img-sss-4.custom {
  width: 50px;
  height: 50px;
}
.img-sss-4.crm {
  color: #197428;
}
.img-sss-4.hrm {
  color: #7EA039;
}
.img-sss-4.commerce {
  color: #E89417;
}

.txt-mmds-1{
  font-family: Inter;
	color: #465387;
	font-size: 14px;
	font-weight: 700;
  line-height: 145%;
	letter-spacing: 0em;
	text-align: left;
  margin-bottom: 4px;
}

.txt-mmds-2 {
  font-family: Inter;
  font-size: 11px;
  font-weight: 400;
  line-height: 140%;
  letter-spacing: 0em;
  text-align: left;
  color: #7A8385;
  margin-right: 10px;
}

.crm .active-navbar,
.crm .navbar-nav li a:hover {
  filter: invert(36%) sepia(86%) saturate(468%) hue-rotate(79deg) brightness(100%) contrast(92%) !important;
}

.commerce .active-navbar,
.commerce .navbar-nav li a:hover {
  filter: invert(62%) sepia(68%) saturate(2850%) hue-rotate(2deg) brightness(106%) contrast(82%) !important;
}

.crm .active-submenu {
  color: #198F2C !important;
}

.commerce .active-submenu {
  color: #E89417 !important;
}

@media screen and (max-width: 1400px) {
  .bg-submenu-items table {
      width: 95%;
  }
}

@media screen and (max-width: 1030px) {
  .custom-navbar {
    padding: 12px 24px;
  }
  .navbar.sticky-nav {
    padding-top: 12px;
    padding-bottom: 12px;
  }
  .custom-navbar #fa-menu-bars {
    padding-right: 0 !important;
    display: flex !important;
    justify-content: end !important;
  }
  .overlay-content {
    padding: 12px 24px 12px 24px;
  }
}