@import "bootstrap-datetimepicker.css";
/* ----------------------------------------------- General */ 
:root {
  --beige: #f7f4ef;
  --beigegrey:#f8f7f5;
  --activeColor: #fe724c;
  --activeColorHover: #C64C2B;
  --darktext: #5F5F5F;
  --white: #ffffff;
  --white50: rgb(255 255 255 / 50%);
  --beige50: rgb(243 243 243 / 50%);
  --lightgreyline: #f4f4f4;
  --lightgreyhover:#f8f9fa;
  --positive:#63AA73;
  --negative:#FFAD00;
  --softgrey:#fafafa;
  --softgreydashed:#e6e6e6;
  --note:#fff7e4;
  --water:#00939d;
}
.btn-primary {
    --bs-btn-color: #fff !important;
    --bs-btn-bg: #FE724C !important;
    --bs-btn-border-color: #FE724C !important;
    --bs-btn-hover-color: #fff !important;
    --bs-btn-hover-bg: #C64C2B !important;
    --bs-btn-hover-border-color: #C64C2B !important;
    --bs-btn-focus-shadow-rgb: 49,132,253 !important;
    --bs-btn-active-color: #fff !important;
    --bs-btn-active-bg: #FE724C !important;
    --bs-btn-active-border-color: #FE724C !important;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125) !important;
    --bs-btn-disabled-color: #fff !important;
    --bs-btn-disabled-bg: #FE724C !important;
    --bs-btn-disabled-border-color: #FE724C !important;
}

.bblg{
  border-bottom:1px solid var(--lightgreyline);
}
.badgecounter{
  font-size: 12px;
  font-weight: 700;
  color: var(--white);
  background: var(--water);
  padding: 0px 9px;
  border-radius: 9px;
  position: absolute;
  z-index: 2;
  right: 0px;
  top: 0;
  box-shadow: -3px 3px 0px rgb(255 255 255);
}
.badgecount{
  font-size: 12px;
  font-weight: 700;
  color: var(--white);
  background: var(--water);
  padding: 2px 9px;
  border-radius: 9px;
}
.w50{
  width: 50px;
}
.w70{
  width: 70px;
}
.ico24{
  font-size:24px;
}
.form-check-input:checked {
  background-color: var(--activeColor)!important;
  border-color: var(--activeColor)!important;
}
.form-check-input:focus {
  /* border-color: var(--softgreydashed) !important; */
  border-color: rgb(248 114 77 / 27%) !important;

  outline: 0;
  box-shadow: 0 0 0 0.25rem rgb(248 114 77 / 22%) !important;
}
.form-control:focus {
  color: var(--bs-body-color) !important;
  background-color: var(--bs-form-control-bg) !important;
  border-color: rgb(248 114 77 / 63%) !important;
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgb(248 114 77 / 11%) !important;
}

.form-control.componentdatetime{
   background:url(../img/clock.svg)no-repeat 95% center;
   background-size: 16px;
}
/* .form-control.componentdatetime:after{
  content: "\f017";
  position: absolute;
  right:20px;
  top:12px;
  color: var(--darktext);
  font-family:"Font Awesome 5 Free";
  font-weight: 900;
  font-size: 12px;
} */

.form-switch .form-check-input:focus {
  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23f8724d45'/%3e%3c/svg%3e")!important;
}
.form-switch .form-check-input:checked {
  background-position: right center;
  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e")!important;
}
.form-select:focus {
  border-color: rgb(248 114 77 / 63%) !important;
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgb(248 114 77 / 11%) !important;
}


.tinymce-small + .tox-tinymce {
  border: 1px solid #eee;
}
.currentOption{
  background: #fcfffc;
  border: 1px solid #c9e2ac;
}

table .tableActionIcon{
  background: transparent;
  border:0;
  padding:5px 10px;
  border-radius: 4px;
  transition: all 0.3s ease-in-out;
}
table .tableActionIcon:hover{
  background: var(--lightgreyhover);
}
table .tableActionIcon.dropdown-toggle::after{
  display: none;
}
table .tableActionIcon + ul.dropdown-menu {
  border: 0;
  box-shadow: 0 0 20px #ccc;
}
table tr{
  transition: all 0.3s ease-in-out;
}
table tr.reorder-rows-on-drag-class{
  background: var(--softgrey);
  box-shadow:0px 10px 20px #dddddd;
  border-top:2px dashed var(--darktext);
}
table tr.reorder-rows-on-drag-class td{
  font-weight: 700;
}

.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
  border-bottom:2px solid var(--activeColor);
  color:var(--activeColor) !important;
  background: transparent !important;
  border-radius:0;
}
.nav-pills .nav-link{
  color:var(--darktext) !important;
}


html,body{
  height: 100%;
}

.r6{
  border-radius:6px;
}
.r20{
  border-radius:20px;
}
.r40{
  border-radius:40px;
}
.r80{
  border-radius:80px;
}

.u40{
  font-size: 40px;
}

.u20{
  font-size: 20px;
}

*{
  font-family: 'Source Sans Pro', sans-serif;
  margin: 0;
  padding: 0; 
}
.bodoni{
  font-family: 'Bodoni Moda', serif;
}

.bg_white{
  background: var(--white) !important;
}
.bg_beige{
  background: var(--beige) !important;
}
.bg_beigegrey{
  background: var(--beigegrey) !important;
}

body{
  color:var(--darktext);
  font-weight: 400;
  background: var(--beigegrey) !important;
}
a:link, a:visited{
  text-decoration: none;
  color: var(--darktext);
  transition: all 0.3s ease-in-out;
}
a:hover{
  color: var(--activeColor);
}

.login a.forgotLnk{
  font-size:0.8rem;
  color:var(--activeColor);
  transition: all 0.3s ease-in-out;
}
.login a.forgotLnk:hover{
  color:var(--activeColorHover);
}

.login .payoff{
  font-family: 'Bodoni Moda', serif;
  font-weight: 400;
  font-size:40px;
  line-height:1.1em;
}

.breadcrumpWrap {
  display: flex;
  align-items: center;
  padding-left: 30px;
}

/* hamburger */
.hamburger {
  font: inherit;
  overflow: visible;
  margin: 0;
  cursor: pointer;
  transition-timing-function: linear;
  transition-duration: .15s;
  transition-property: opacity,filter;
  text-transform: none;
  color: inherit;
  border: 0;
  background-color: transparent;
  position:relative;
  z-index: 101;
}

.hamburger.is-active:hover,.hamburger:hover {
  opacity: .7
}

.hamburger.is-active .hamburger-inner,.hamburger.is-active .hamburger-inner:after,.hamburger.is-active .hamburger-inner:before {
  background-color: #343431
}

.hamburger-box {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 24px;
  margin-top: 8px;
}

.hamburger-inner {
  top: 50%;
  display: block;
  margin-top: -2px
}

.hamburger-inner,.hamburger-inner:after,.hamburger-inner:before {
  position: absolute;
  width: 40px;
  height: 3px;
  transition-timing-function: ease;
  transition-duration: .15s;
  transition-property: transform;
  border-radius: 4px;
  background-color: #000
}

.hamburger-inner:after,.hamburger-inner:before {
  display: block;
  content: ""
}

.hamburger-inner:before {
  top: -10px
}

.hamburger-inner:after {
  bottom: -10px
}
.hamburger--spin .hamburger-inner {
  transition-timing-function: cubic-bezier(.55,.055,.675,.19);
  transition-duration: .22s
}

.hamburger--spin .hamburger-inner:before {
  transition: top .1s ease-in .25s,opacity .1s ease-in
}

.hamburger--spin .hamburger-inner:after {
  transition: bottom .1s ease-in .25s,transform .22s cubic-bezier(.55,.055,.675,.19)
}

.hamburger--spin.is-active .hamburger-inner {
  transition-delay: .12s;
  transition-timing-function: cubic-bezier(.215,.61,.355,1);
  transform: rotate(225deg)
}

.hamburger--spin.is-active .hamburger-inner:before {
  top: 0;
  transition: top .1s ease-out,opacity .1s ease-out .12s;
  opacity: 0
}

.hamburger--spin.is-active .hamburger-inner:after {
  bottom: 0;
  transition: bottom .1s ease-out,transform .22s cubic-bezier(.215,.61,.355,1) .12s;
  transform: rotate(-90deg)
}

.hamburger--spin-r .hamburger-inner {
  transition-timing-function: cubic-bezier(.55,.055,.675,.19);
  transition-duration: .22s
}

.hamburger--spin-r .hamburger-inner:before {
  transition: top .1s ease-in .25s,opacity .1s ease-in
}

.hamburger--spin-r .hamburger-inner:after {
  transition: bottom .1s ease-in .25s,transform .22s cubic-bezier(.55,.055,.675,.19)
}

.hamburger--spin-r.is-active .hamburger-inner {
  transition-delay: .12s;
  transition-timing-function: cubic-bezier(.215,.61,.355,1);
  transform: rotate(-225deg)
}

.hamburger--spin-r.is-active .hamburger-inner:before {
  top: 0;
  transition: top .1s ease-out,opacity .1s ease-out .12s;
  opacity: 0
}

.hamburger--spin-r.is-active .hamburger-inner:after {
  bottom: 0;
  transition: bottom .1s ease-out,transform .22s cubic-bezier(.215,.61,.355,1) .12s;
  transform: rotate(90deg)
}
/* hamburger */
.form-select:disabled,
.form-control:disabled {
  background-color: #fbfbfb !important;
  border: 1px solid #ededed !important;
  color: #ccc !important;
}


#appSidebar.appSidebar{
  width: 300px;
  height: 100%;
  padding: 0;
  /* background-color: var(--beige); */
  background-color: var(--white);
  transition: all 0.2s cubic-bezier(0.32, 0.4, 0.55, 1.27);
  position: fixed;
  top:0;
  left:0;
  z-index: 2;
}

.appSidebar .appSidebarMenuHeader .logoWrap img.logoExtended{
  max-width: 170px;
  max-height: 40px;
}

.appSidebar .appSidebarMenuHeader img.logoCompact{
  display: none;
}
.appSidebar.collapsed .appSidebarMenuHeader .logoWrap img.logoExtended{
  display: none;
}

.appSidebar.collapsed .appSidebarMenuHeader img.logoCompact{
  display: block;
  max-width: 40px;
  max-height: 40px;
}

#appSidebar.appSidebar.collapsed{
  width: initial;
}
#mainContentWrapper{
  padding-left:300px;
  padding-right:0;
  transition: all 0.2s cubic-bezier(0.32, 0.4, 0.55, 1.27);
}
#mainContentWrapper.collapsed{
  padding-left:68px;
}

.appSidebar.collapsed a.lev1 .menuLabel span,
.appSidebar.collapsed .appSidebarContentWrap ul.appSidebarMenu li a + .content,
.appSidebar.collapsed .appSidebarContentWrap ul.appSidebarMenu li a.lev1.hasChild:after{
  display: none !important;
}
.appSidebar.collapsed .appSidebarContentWrap ul.appSidebarMenu li{
  position: relative;
}
.appSidebar.collapsed .appSidebarContentWrap ul.appSidebarMenu li:hover a + .content{
  display: block !important;
  position: absolute;
  width: 250px;
  /* background: var(--beige); */
  background: var(--white);
  box-shadow: 21px 31px 40px -14px #d9d5cd;
  top: -2px;
  left: 50px;
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
}
.appSidebar.collapsed .appSidebarContentWrap ul.appSidebarMenu li:hover a + .content ul li{
  padding: 0 8px;
}
.appSidebar.collapsed .appSidebarContentWrap ul.appSidebarMenu li:hover a + .content ul li a{
  padding: 8px;
}
.appSidebar.collapsed .appSidebarContentWrap ul.appSidebarMenu li:hover a + .content ul li a .counterBadge{
  right: 10px;
  top: inherit;
  left: inherit;
}

.appSidebar .appSidebarContentWrap .appSidebarMenuHubSelectorWrap .btn.dropdown-toggle{
  width: 100%;
  text-align: left;
  position: relative;
  background: var(--lightgreyline);
  border:1px solid var(--white);
  min-height: 43px;
}
.appSidebar .appSidebarContentWrap .appSidebarMenuHubSelectorWrap .btn.dropdown-toggle::after {
  content: "";
  position:absolute;
  right:20px;
  top:20px;
  border-top: 0.3em solid;
  border-right: 0.3em solid transparent;
  border-bottom: 0;
  border-left: 0.3em solid transparent;
  color: var(--darktext);
}
.appSidebar .appSidebarContentWrap .appSidebarMenuHubSelectorWrap .btn.dropdown-toggle span{
  padding-left:8px;
}
.appSidebar.collapsed .appSidebarContentWrap .appSidebarMenuHubSelectorWrap .btn.dropdown-toggle span{
  display: none;
}
.appSidebar .appSidebarContentWrap .appSidebarMenuHubSelectorWrap .btn.dropdown-toggle i{
  transition: all 0.3s ease-in-out;
}
.appSidebar.collapsed .appSidebarContentWrap .appSidebarMenuHubSelectorWrap .btn.dropdown-toggle i{
  font-size: 24px;
}
.appSidebar .appSidebarContentWrap .appSidebarMenuHubSelectorWrap .dropdown-menu{
  width: 100%;
  height: 250px;
  overflow: auto;
}
.appSidebar.collapsed .appSidebarContentWrap .appSidebarMenuHubSelectorWrap .dropdown-menu{
  width: 250px;
  height: 250px;
  overflow: auto;
  position: absolute;
  z-index:5;
}
.appSidebar .appSidebarContentWrap .appSidebarMenuHubSelectorWrap .dropdown-menu .dropdown-item.sel{
  color:var(--activeColor)
}

.appSidebar .appSidebarContentWrap .appSidebarMenuHubSelectorWrap .dropdown-menu::-webkit-scrollbar{
  width: 10px;
}
.appSidebar .appSidebarContentWrap .appSidebarMenuHubSelectorWrap .dropdown-menu::-webkit-scrollbar-track{
  border-radius: 8px;
  background-color: var(--softgrey);

}
.appSidebar .appSidebarContentWrap .appSidebarMenuHubSelectorWrap .dropdown-menu::-webkit-scrollbar-thumb{
  border-radius: 8px;
  background-color: var(--softgreydashed);
  /* background: rgb(254,114,76);
  background: linear-gradient(0deg, rgba(254,114,76,1) 0%, rgba(250,250,250,1) 100%); */
}



.appSidebar .appSidebarMenuHeader{
  padding: 8px;
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
}
.appSidebar .appSidebarMenuCollapseToggler{
  position:absolute;
  right:20px;
  top:20px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--beige);
  background: transparent;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.3s ease-in-out;
  z-index: 4;
}

.appSidebar .appSidebarMobileMenuCollapseToggler{
  display: none;
}

.appSidebar.collapsed .appSidebarMenuCollapseToggler{
  transform: rotate(180deg);
  position: absolute;
  background: var(--darktext);
  left: 20px;
  top:95%;
  z-index: 2;
  color:var(--white)
}
.appSidebar .appSidebarMenuCollapseToggler:hover{
  background: var(--beige50);
}
.appSidebar.collapsed .appSidebarMenuCollapseToggler:hover{
  background: var(--activeColor);
  color: var(--white);
}
.appSidebar .appSidebarContentWrap{
  padding:10px;
  height: 98vh;
  overflow-x: auto;
}
.appSidebar.collapsed .appSidebarContentWrap{
  overflow:inherit;
}
.appSidebar .appSidebarContentWrap::-webkit-scrollbar{
  width: 10px;
}
.appSidebar .appSidebarContentWrap::-webkit-scrollbar-track{
  border-radius: 8px;
  background-color: var(--softgrey);

}
.appSidebar .appSidebarContentWrap::-webkit-scrollbar-thumb{
  border-radius: 8px;
  background-color: var(--softgreydashed);
  /* background: rgb(254,114,76);
  background: linear-gradient(0deg, rgba(254,114,76,1) 0%, rgba(250,250,250,1) 100%); */
}
.appSidebar .appSidebarContentWrap ul.appSidebarMenu{
  margin: 0;
  padding: 0;
}
.appSidebar .appSidebarContentWrap ul.appSidebarMenu li{
  list-style: none;
  margin-bottom: 8px;
}
.appSidebar .appSidebarContentWrap ul.appSidebarMenu li a + .content{
  display: none;
}
.appSidebar .appSidebarContentWrap ul.appSidebarMenu li a{
  text-decoration: none;
  display:flex;
  justify-content: space-between;
  background: transparent;
  border-radius:4px;
  padding:8px 10px;
  color:var(--darktext);
  transition: all 0.3s ease-in-out;
}

.appSidebar .appSidebarContentWrap ul.appSidebarMenu li a.hasChild{
  position: relative;
}
.appSidebar .appSidebarContentWrap ul.appSidebarMenu li a.hasChild:after{
  content: "\f107";
  position: absolute;
  right:20px;
  top:12px;
  color: var(--darktext);
  font-family:"Font Awesome 5 Free";
  font-weight: 900;
  font-size: 12px;
  transform: rotate(90deg);
  transition: all 0.3s ease-in-out;
}
.appSidebar .appSidebarContentWrap ul.appSidebarMenu li a.opened.hasChild:after{
  content: "\f107";
  position: absolute;
  right:20px;
  top:12px;
  color: var(--darktext);
  font-family:"Font Awesome 5 Free";
  font-weight: 900;
  font-size: 12px;
  transform: rotate(0deg);
}
.appSidebar .appSidebarContentWrap ul.appSidebarMenu li a.active.opened.hasChild:after{
  content: "\f107";
  position: absolute;
  right:20px;
  top:12px;
  color: var(--white);
  font-family:"Font Awesome 5 Free";
  font-weight: 900;
  font-size: 12px;
  transform: rotate(0deg);
}

.appSidebar .appSidebarContentWrap ul.appSidebarMenu li a:hover{
  /* background: var(--white50); */
  background: var(--beige50);
  color:var(--activeColor);
}
.appSidebar .appSidebarContentWrap ul.appSidebarMenu li a:hover i{
  color: var(--activeColor);
}
.appSidebar .appSidebarContentWrap ul.appSidebarMenu li a i{
  font-size: 18px;
  transition: all 0.3s ease-in-out;
}
.appSidebar.collapsed .appSidebarContentWrap ul.appSidebarMenu li a i{
  font-size: 24px;
}
.appSidebar .appSidebarContentWrap ul.appSidebarMenu li a .menuLabel span{
  padding-left: 8px;
}
.appSidebar .appSidebarContentWrap ul.appSidebarMenu li a.active{
  background: var(--activeColor);
  color:var(--white);
  position: relative;
}
.appSidebar .appSidebarContentWrap ul.appSidebarMenu li a.opened + .content{
  display: block;
}
.appSidebar .appSidebarContentWrap ul.appSidebarMenu li a.active:hover{
  background: var(--activeColorHover);
  color:var(--white);
}
.appSidebar .appSidebarContentWrap ul.appSidebarMenu li a .counterBadge,
.appSidebar .appSidebarContentWrap ul.appSidebarMenu li a.active .counterBadge {
  position: relative;
}
.appSidebar .appSidebarContentWrap ul.appSidebarMenu li a .counterBadge span{
  background: var(--darktext);
  color: var(--white);
  border-radius:10px;
  padding:1px 8px;
  font-size: 10px;
  margin-left: -60px;
}
.appSidebar .appSidebarContentWrap ul.appSidebarMenu li a.active .counterBadge span{
  background: var(--white);
  color: var(--darktext);
}


.appSidebar.collapsed .appSidebarContentWrap ul.appSidebarMenu li a .counterBadge,
.appSidebar.collapsed .appSidebarContentWrap ul.appSidebarMenu li a.active .counterBadge{
  position: absolute;
  top: -3px;
  left: 27px;
  z-index: 2;
}
.appSidebar.collapsed .appSidebarContentWrap ul.appSidebarMenu li a .counterBadge span{
  margin: 0;
  padding: 1px 6px;
  background: var(--activeColor);
  color: var(--white);
}
.appSidebar.collapsed .appSidebarContentWrap ul.appSidebarMenu li a.active .counterBadge span{
  margin: 0;
  padding: 1px 6px;
  background: var(--white);
  color: var(--activeColor);
}


/* submenu */

.appSidebar .appSidebarContentWrap ul.appSidebarSubMenu{
  margin: 0;
  padding: 0;
  margin-top: 8px;
}
.appSidebar .appSidebarContentWrap ul.appSidebarSubMenu li{
  list-style: none;
  margin-bottom: 8px;
}



.appSidebar .appSidebarContentWrap ul.appSidebarSubMenu li a{
  position: relative;
}

.appSidebar .appSidebarContentWrap ul.appSidebarSubMenu li a{
  text-decoration: none;
  display:flex;
  justify-content: space-between;
  background: transparent;
  border-radius:4px;
  padding: 8px 0px 8px 36px;
  color:var(--darktext);
  font-size: 14px;
}
.appSidebar .appSidebarContentWrap ul.appSidebarSubMenu li a.active{
  text-decoration: none;
  display:flex;
  justify-content: space-between;
  background: var(--white50);
  border-radius:4px;
  padding: 8px 0px 8px 36px;
  color:var(--activeColor);
  font-size: 14px;
}
/*
.appSidebar .appSidebarContentWrap ul.appSidebarSubMenu li a.active:before{
  content: "\f111";
  position: absolute;
  left: 20px;
  top: 14px;
  color: var(--activeColor);
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 6px;
  transform: rotate(0deg);
  transition: all 0.3s ease-in-out;
}
*/
.appSidebar .appSidebarContentWrap ul.appSidebarSubMenu li a.active:hover{
  background: var(--white);
  color: var(--activeColor);
}

.appSidebar .appSidebarContentWrap ul.appSidebarSubMenu li a .counterBadge span{
  margin-left: -35px;
  background: var(--white);
  color: var(--darktext);
}

.mainContent{
  width: 100%;
}
.mainContent .mainContentHeader{
  height: 63px;
  border-bottom:1px solid var(--lightgreyline) ;
  background: var(--white);
  display: flex;
  justify-content: space-between;
  width: 100%;
}
.mainContent .mainContentCenter,
.mainContent .mainContentFooter{
  padding: 0 20px;
}
.mainContent .mainContentHeader .searchWrap,
.mainContent .mainContentHeader .ctaWrap,
.mainContent .mainContentHeader .actionsWrap{
  display: flex;
  align-items: center;
  padding:0 20px;
}
.mainContent .mainContentHeader .notificationsWrap{
  display: flex;
  align-items: center;
}
.mainContent .mainContentHeader .ctaWrap .cta{
  white-space: nowrap;
}
.mainContent .mainContentHeader .ctaWrap .cta i{
  display: none;
}
.mainContent .mainContentHeader .breadcrumpWrap .breadcrumb-item{
  font-size: 14px;
}

.mainContent .mainContentHeader .searchWrap i,
.mainContent .mainContentHeader .notificationsWrap i{
  font-size: 22px;
}
.mainContent .mainContentHeader .notificationsWrap .notificationsIco{
  position: relative;
}
.mainContent .mainContentHeader .notificationsWrap .notificationsIco.newAlertIncoming:after{
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--activeColor);
    box-shadow: 0 0 0 0 rgba(254, 114, 76, 1);
    animation: pulse-orange 2s infinite;
    display: block;
    position: absolute;
    top: 20px;
    left: 30px;
}
.mainContent .mainContentHeader .notificationsWrap a.notificationsIco{
    position: relative;
    padding: 15px 10px;
}
.mainContent .mainContentHeader .notificationsWrap .miniwidget{
  position: absolute;
  z-index: 2;
  width: 240px;
  opacity:0;
  visibility: hidden;
  top: 82px;
  right: 30px;
  background:var(--white);
  box-shadow: 0 0 20px #ccc;
  transition: all 0.25s ease-in-out;
  border-radius: 6px;
  padding:10px 0px;
}
.mainContent .mainContentHeader .notificationsWrap .miniwidget .icowrap{
  width: 30px;
  height:30px;
  border-radius:30px ;
  background: #f4f4f4;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 10px;
}
.mainContent .mainContentHeader .notificationsWrap .miniwidget .icowrap i{
  font-size: 16px;
  color:#666;
}
.mainContent .mainContentHeader .notificationsWrap a.notificationsIco + .miniwidget ul{
  margin: 0;
  padding: 0;
}
.mainContent .mainContentHeader .notificationsWrap a.notificationsIco + .miniwidget ul li{
  list-style: none;
}
.mainContent .mainContentHeader .notificationsWrap .miniwidget ul li a{
  display: flex;
  align-items: center;
  padding: 5px 10px;
  color:var(--darktext);
  transition: all 0.3s ease-in-out;
}
.mainContent .mainContentHeader .notificationsWrap .miniwidget ul li a:hover{
  background: var(--lightgreyhover);
}
.mainContent .mainContentHeader .notificationsWrap a.notificationsIco:hover + .miniwidget,
.mainContent .mainContentHeader .notificationsWrap .miniwidget:hover{
    top: 62px;
    opacity:1;
    visibility: visible;
}



@keyframes pulse-orange {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(254, 114, 76, 0.7);
  }

  70% {
    transform: scale(1);
    box-shadow: 0 0 0 10px rgba(254, 114, 76, 0);
  }

  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(254, 114, 76, 0);
  }
}

.mainContent .mainContentHeader .ctaWrap a.cta{
  border:1px solid var(--darktext);
  padding: 4px 15px;
  border-radius: 6px;
  display: block;
  color: var(--darktext);
}
.mainContent .mainContentHeader .ctaWrap a.cta:hover{
  color: var(--activeColor);
  border: 1px solid var(--activeColor);
}
.mainContent .mainContentHeader .actionsWrap .moreMainAction:hover{
  color: var(--activeColor);
}
.mainContent .mainContentHeader .actionsWrap .moreMainAction .userAvatar{
  width: 42px;
  height:42px;
  border-radius: 50%;
  background: var(--lightgreyline);
  border:2px solid var(--white);
  transition: all 0.5s ease-in-out;
}
.mainContent .mainContentHeader .actionsWrap .moreMainAction .userAvatar:hover{
  filter: brightness(1.1);
  border:2px solid var(--activeColor); 
}

.moreMainAction + ul.dropdown-menu{
  border:0;
  box-shadow: 0 0 20px #ccc;
}

.dashboardWidgets a .card {
  padding: 20px;
  transition: all 0.3s ease-in-out;
  border:1px solid var(--white);
}
.dashboardWidgets a .card .widget .widgetIcon{
  font-size: 50px;
}

.dashboardWidgets a .card .widget .widgetData span{
  display: block;
  line-height: 1.3em;
}
.dashboardWidgets a .card .widget .widgetData span.widgetTitle{
  text-transform: uppercase;
  font-size: 18px;
}
.dashboardWidgets a .card .widget .widgetData span.widgetStats{
  text-transform: uppercase;
  font-size: 24px;
  font-weight: 600;
}
.dashboardWidgets a .card .widget .widgetData span.widgetResults strong.positive{
  color: var(--positive);
}
.dashboardWidgets a .card .widget .widgetData span.widgetResults strong.negative{
  color: var(--negative);
}
.dashboardWidgets a:hover .card .widget .widgetData span,
.dashboardWidgets a:hover .card .widget .widgetData span.widgetTitle,
.dashboardWidgets a:hover .card .widget .widgetData span.widgetResults{
  color:var(--darktext);
}
.dashboardWidgets a:link .card .widget .widgetData span,
.dashboardWidgets a:link .card .widget .widgetData span.widgetTitle,
.dashboardWidgets a:link .card .widget .widgetData span.widgetResults{
  color:var(--darktext);
}
.dashboardWidgets a:hover .card{
  border:1px solid var(--darktext);
}


/* dropzone*/
.custom_dropzone {
  position: relative;
  border: 1px dashed var(--softgreydashed);
  height: 100px;
  display: block;
  border-radius: 6px;
  box-sizing: border-box;
  background: var(--softgrey);
}

.custom_dropzone input[type=file] {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 0;
  font-size: 2rem;
  opacity: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  box-sizing: border-box;
}

.custom_dropzone input[type=text] {
  background: none;
  border: none;
  padding: 0.5em;
  width: 100%;
  height: 100%;
  text-align: center;
  font-size: 1.4rem;
  box-sizing: border-box;
}

.custom_dropzone.dragover {
  background-color: #eee;
  border: 6px dashed rgba(#000, 0.1);
}

.imgPlaceholder{
  border: 1px dashed var(--softgreydashed);
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 6px;
  box-sizing: border-box;
  background: var(--softgrey);
  color:var(--softgreydashed);
}
.imgUploadedWrap{
  position: relative;
  overflow: hidden;
}
.imgUploadedWrap .delimgUploaded{
  position: absolute;
  z-index: 2;
  right: 20px;
  top: 20px;
  opacity: 0;
  transition: all 0.3s ease-in-out;
}
.imgUploadedWrap:hover .delimgUploaded{
  right: 20px;
  top: 20px;
  opacity: 1;
}

#newOrderModal .modal-body{
  position: relative;
}
#newOrderModal .modal-body .ProductsList a{
  color:initial;
  transition: all 0.3s ease-in-out;
}
#newOrderModal .modal-body .ProductsList a img{
  transition: all 0.3s ease-in-out;
}
#newOrderModal .modal-body .ProductsList a:hover img{
  opacity: 0.5;
}
#newOrderModal .modal-body .ProductsList a:hover{
  color:var(--activeColor);
}
#newOrderModal .modal-body  .productListWrapper{
  height: 300px;
  overflow-x: hidden;
  overflow-y: auto;
}
#newOrderModal .modal-body  .productCartListWrapper{
  height: 240px;
  overflow-x: hidden;
  overflow-y: auto;
}

#newOrderModal .modal-body  .productListWrapper::-webkit-scrollbar,
#newOrderModal .modal-body  .productCartListWrapper::-webkit-scrollbar,
#newOrderModal .modal-body #ajaxProductDetail .modifierWrap::-webkit-scrollbar{
  width: 10px;
}
#newOrderModal .modal-body  .productListWrapper::-webkit-scrollbar-track,
#newOrderModal .modal-body  .productCartListWrapper::-webkit-scrollbar-track,
#newOrderModal .modal-body #ajaxProductDetail .modifierWrap::-webkit-scrollbar-track{
  border-radius: 8px;
  background-color: var(--softgrey);
}
#newOrderModal .modal-body  .productListWrapper::-webkit-scrollbar-thumb,
#newOrderModal .modal-body  .productCartListWrapper::-webkit-scrollbar-thumb,
#newOrderModal .modal-body #ajaxProductDetail .modifierWrap::-webkit-scrollbar-thumb{
  border-radius: 8px;
  background-color: var(--softgreydashed);
}


#newOrderModal .modal-body #ajaxProductDetailWrap{
  display: none;
}
#newOrderModal .modal-body #ajaxProductDetail{
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: rgb(0 0 0 / 64%);
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  padding:10%
}
#newOrderModal .modal-body #ajaxProductDetail .modifierWrap{
  height:200px;
  padding-right:20px;
  overflow-y: auto;
  overflow-x: clip;
}
#newOrderModal .modal-body .productCartListWrapper .productQtnWrap a{
  background: var(--softgrey);
  padding:0 3px;
  border-radius:6px;
}
p.clientNote{
  /* background: var(--note); */
  padding: 8px;
  border-radius: 6px;
  border:1px solid var(--activeColor);
  color:var(--activeColor)
}

#countDownWrap{
  display: flex;
  align-items: center;
  margin-bottom:20px
}
#countDownWrap span.min,
#countDownWrap span.sec{
  background: var(--darktext);
  color:var(--white);
  font-size: 22px;
  padding: 5px 15px;
  text-align: center;
  border-radius: 4px;
}
#countDownWrap span.divider{
  color: #c2c2c1;
  font-size: 22px;
  padding: 5px 8px;
}
#countDownWrap b{
  font-weight: normal;
  display: block;
  text-transform: uppercase;
  font-size: 12px;
}
#countDownWrap span.expired{
  background: var(--activeColor);
  color:var(--white);
  font-size:40px;
  padding:10px 20px;
  border-radius: 6px;
}

.multiselectCustomWrap{
  position: relative;
}
.multiselectCustom{
  border:1px solid #dee2e6;
  border-radius:6px;
  padding: 4px 35px 4px 4px;
  min-height:34px;
  position: relative;
}
.multiselectCustom:after{
  content: "\f107";
  position: absolute;
  right:20px;
  top:12px;
  color: var(--darktext);
  font-family:"Font Awesome 5 Free";
  font-weight: 900;
  font-size: 12px;
  transition: all 0.3s ease-in-out;
}


.multiselectCustom span.dropdown-tag{
  font-size: 12px;
  padding:5px 8px;
  background: var(--softgrey);
  border:1px solid var(--softgreydashed);
  border-radius:6px;
  margin-top: 2px;
  margin-left: 3px;
  margin-bottom: 2px;
  display:inline-block;
  width:max-content;
  transition: all 0.3s ease-in-out;

}
.multiselectCustom span.dropdown-tag:hover{
  background: var(--softgreydashed);
}
.multiselectCustom + ul.dropdown-menu{
  width: 100%;
}
.fastSearchWrap{
  position: relative;
}
.fastSearchWrap i{
  position: absolute;
  z-index: 2;
  top:7px;
  right:13px;
}
.fastSearchWrap #fastSearch{
  padding-right:35px;
}
.multiselectCustomWrap ul.dropdown-menu .dropdown-item-wrap{
  height: 150px;
  overflow: auto;
}

.itemTypeWrap input[type=checkbox]{
    display:none;
}

.itemTypeWrap input[type=checkbox] + label{
  text-align: center;
  min-width: 50px;
  transition: all 0.3s ease-in-out;
}
.itemTypeWrap input[type=checkbox] + label:hover{
  transform:scale(1.2);
  border-radius: 6px;
  box-shadow: 0px 0px 20px var(--softgreydashed);
}
.itemTypeWrap input[type=checkbox] + label i{
    font-size:30px;
    transition: all 0.3s ease-in-out;
}
.itemTypeWrap input[type=checkbox] + label span{
    display: block;
    font-size: 12px;
    transition: all 0.3s ease-in-out;
}
.itemTypeWrap input[type=checkbox]:checked + label i,
.itemTypeWrap input[type=checkbox]:checked + label span{
    color: var(--activeColor);
}


a.page-link {

  --bs-pagination-active-bg: var(--activeColor);
  --bs-pagination-active-border-color: var(--activeColor);
}

.ayeNumber {
  background-color: var(--activeColor);
  color: #f7f4ef;
}

/* #pausingWidget .card-pausing{
  border:1px solid #efefef;
  padding: 20px;
  width: 100%;
  border-radius:6px;
  transition: all 0.3s ease-in-out;
}
#pausingWidget .form-check{
  padding-left:0;
}
#pausingWidget input[type=radio]{
  display:none;
}
#pausingWidget input[type=radio]:not(:checked) + .card-pausing{
  opacity:0.5
}
#pausingWidget input[type=radio]:not(:checked) + .card-pausing input[type=date],
#pausingWidget input[type=radio]:not(:checked) + .card-pausing input[type=text]{
  pointer-events: none;

}

#pausingWidget input[type=radio]:checked + .card-pausing{
  background: #fcfffc;
  border: 1px solid #c9e2ac;
}
#pausingWidget input[type=radio]:checked + .card-pausing:after{
  content:"";
  position: absolute;

} */

/* MEDIA QUERY */
@media (max-width: 1440px) {
  .dashboardWidgets a .card .widget .widgetIcon{
    font-size: 40px;
  }
  .dashboardWidgets a .card .widget .widgetData span.widgetTitle{
    text-transform: uppercase;
    font-size: 16px;
  }
  .dashboardWidgets a .card .widget .widgetData span.widgetStats{
    text-transform: uppercase;
    font-size: 19px;
    font-weight: 600;
  }
  .dashboardWidgets a .card .widget .widgetData span.widgetResults{
    font-size: 12px;
  }
}
@media (max-width: 1399.98px) {}
@media (max-width: 1199.98px) {}
@media (max-width: 1024px) {
  .mainContent .mainContentHeader .breadcrumpWrap{
    display: none;
  }
  .mainContent .mainContentHeader .ctaWrap .cta{
    font-size: 10px;
  }
  .appSidebar .appSidebarMenuCollapseToggler{
    display: none;
  }
  .appSidebar .appSidebarMobileMenuCollapseToggler{
    display: block;
  }
  #appSidebar.appSidebar{
    width: 100%;
    height: initial;
    overflow: hidden;
    height: initial;
    box-shadow: 0px -3px 20px #c2c2c1;
  }
  #appSidebar.appSidebar .appSidebarContentWrap{
    height: initial;
  }
  body.is-active #appSidebar.appSidebar{
    height:100%
  }
  #appSidebar.appSidebar.appSidebar.collapsed{
    width: 100%;
    height: 100%;
  }
  #mainContentWrapper{
    padding-top:80px
  }
  #appSidebar.appSidebar .appSidebarMenuHeader{
    margin-bottom: 0;
    transition: all 0.2s cubic-bezier(0.32, 0.4, 0.55, 1.27);
  }
  body.is-active #appSidebar.appSidebar .appSidebarMenuHeader{
    margin-bottom: 10px;
  }
  body  #appSidebar.appSidebar .appSidebarMenuMain{
    display: none;
    overflow: auto;
    height: 90vh;
  }
  #mainContentWrapper{
    padding-left:0px;
    transition: all 0.2s cubic-bezier(0.32, 0.4, 0.55, 1.27);
  }
  #mainContentWrapper.collapsed{
    padding-left:20px;
  }
 
  .dashboardWidgets .card .widget .widgetIcon{
    font-size: 40px;
  }
  .dashboardWidgets .card .widget .widgetData span.widgetTitle{
    text-transform: uppercase;
    font-size: 16px;
  }
  .dashboardWidgets .card .widget .widgetData span.widgetStats{
    text-transform: uppercase;
    font-size: 19px;
    font-weight: 600;
  }
  .dashboardWidgets .card .widget .widgetData span.widgetResults{
    font-size: 12px;
  }
}
@media (max-width: 991.98px) {}
@media (max-width: 920px) {}
@media (max-width: 820px) {}
@media (max-width: 767.98px) {
  .mainContent .mainContentHeader .ctaWrap a.cta{
    border:none;
    padding: 0;
  }
  .mainContent .mainContentHeader .ctaWrap a.cta span{
    display: none;
  }
  .mainContent .mainContentHeader .ctaWrap a.cta i{
    display: block;
    font-size: 20px;
  }
}
@media (max-width: 395px) {}
@media (max-width: 575.98px) {}
@media (max-width: 540px) {}
@media (max-width: 415px) {}
@media (max-width: 395px) {
  .bootstrap-table .fixed-table-toolbar .search {
    width: 100%;
  }
  .dashboardWidgets a .card .widget .widgetData span.widgetStats {
    text-transform: uppercase;
    font-size: 15px;
    font-weight: 600;
}
}
@media (min-width: 280px) and (max-width: 320px) {}