﻿html {
    direction: ltr;
}

body {
    background-color: var(--body-bgColor, #f0f4fa);
    background: radial-gradient(circle at top right, var(--body-bgColor-radial-from,#00b6ed3b), var(--body-bgColor-radial-to,#fdfaf8) 35%) !important;
}

.card-radial {
    background: radial-gradient(160px 90px at left top,rgb(from var(--card-bgColor-radial-left-from,#3168F2) r g b / .1),var(--card-bgColor-radial-left-to, #fff));
}

.card-radial-right {
    background: radial-gradient(160px 90px at right top,rgb(from var(--card-bgColor-radial-right-from,#3168F2) r g b / .1),var(--card-bgColor-radial-right-to, #fff));
}

.offcanvas-radial {
    background: radial-gradient(450px 150px at right top, var(--offCanvas-bgColor-radial-right-from,#D6E1FC) ,var(--offCanvas-bgColor-radial-right-to, #fff)) !important;
}

.main-content {
    margin-right:0px !important;
    margin-left:250px !important;
}

.vertical-collpsed .main-content {
    margin-left:78px !important;
}

#page-header-user-dropdown-collpsed {
    display: none !important;
}

.vertical-collpsed #page-header-user-dropdown {
    display: none !important;
}

.vertical-collpsed #page-header-user-dropdown-collpsed {
    display: block !important;
    padding-left: 0px !important;
    padding-right: 0px !important;
    position: relative !important;
}

.page-content {
    padding:1rem 0px 0px 0px !important;
    border-top-left-radius: 1rem !important;
    border-top-right-radius: 1rem !important;
    background-color:#FFFFFF;
    margin-top:1rem;
    margin-right:1rem;
    box-shadow: 0 .125rem .25rem rgba(30, 59, 89, .12) !important;
    z-index:1005;
}

.main-block {
    display: flex;
    flex-direction: column;
    flex: 1 0 auto;
    max-width: 100%;
    height: calc(100vh - 90px - 1rem);
    overflow: auto;
    padding-bottom:1rem;
    background-color: transparent !important; 
    padding:25px;
    padding-top:2px;
}

.navbar-header {
    height: 70px !important;
    padding-left:2rem !important;
    border-bottom:1px solid #E8EbEE;
    padding-right:10px !important;
}

#page-topbar {
    position:relative !important;
    display: block !important;
    background-color:transparent !important;
    margin-bottom:0;
    box-shadow: none !important;
}

.navbar-brand-box {
    padding:0px;
    width: auto !important;
    padding-left:2rem;
    padding-top:1rem;
}

.user-container {
    padding:0;
    background-color:transparent;
    flex-shrink:0;
}

.btn-profile {
    display:flex !important;
    padding:0px 14px;
    align-items: start;
    justify-content: start;
    gap: 12px !important;
    color:var(--bs-btn-secondary-color, #D63D00) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 24px !important;
    border-radius: var(--bs-btn-secondary-border-radius, 4px) !important;
    background-color: var(--bs-btn-secondary-bgcolor, #FFFFFF) !important;
    border:var(--bs-btn-secondary-border-width, 2px) var(--bs-btn-secondary-border-type, solid) var(--bs-btn-secondary-border-color, #E3E6EF) !important;
}

.bg-body-light{
    background-color: transparent !important;
}

.vertical-menu {
    top: 5px !important;
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
    box-shadow: none !important;
    z-index: 1001 !important;
}

.vertical-menu > .d-flex {
    flex-shrink: 0;
}

.vertical-menu > div:nth-child(2) {
    flex:1;
    overflow-y: auto;
}

.sidebarScrol{
    position:relative;
    overflow: hidden;
    width: auto;
    height: calc(-338px + 100vh);
}

#sidebar-menu ul li a {
    font-weight: 500;
    line-height: 1.25rem;
    color: #1e3b59;
    font-size:0.875rem !important;
    margin-bottom:.325rem;
    padding-top:.325rem !important;
    padding-bottom:.325rem !important;
    padding-left:1rem !important;
    padding-right:0.325rem !important;
}

#sidebar-menu ul li a.dropdown-item {
    padding-left:0px !important;
}

.metismenu {
    padding-right:24px;
    padding-left:24px;
}

.metismenu li.mm-active a{
    background-color:var(--vertical-menu-link-active-bgColor,#F4E8DD) !important;
    border-radius: var(--vertical-menu-link-border-radius,10px);
    font-weight: 500;
    line-height:1.25rem;
    padding:.5rem 1rem;
}

.vertical-collpsed .vertical-menu #sidebar-menu > ul > li:hover > a {
    width: calc(98px + 114px) !important;
}

.vertical-collpsed .metismenu {
    padding-left:14px !important;
}

.vertical-collpsed .vertical-menu {
    overflow: visible;
    top:0px !important;
    width:76px !important;
}

.vertical-collpsed .vertical-menu > .d-flex {
    flex-shrink:0;
    display: block !important;
}

#vertical-menu-btn I {
    color: var(--burger-menu-icon-color) !important;
    padding-top:2rem !important;
}

.vertical-collpsed #vertical-menu-btn I {
    padding-top:0px !important;
    height: 0px !important;
}

.vertical-collpsed .vertical-menu > div:nth-child(2) {
    overflow-y:hidden;
    overflow-x:hidden;
}

.vertical-collpsed .navbar-brand-box {
    padding-left:0px !important;
}

.vertical-collpsed .logo {
    line-height: 0px !important;
}

#sidebar-menu ul li ul.sub-menu {
    padding-left: 20px !important;
}

.vertical-collpsed #sidebar-menu ul li a {
    font-weight: 500;
    line-height: 1.25rem;
    color: #1e3b59;
    font-size:0.875rem !important;
    margin-bottom:0px;
    padding-top:5px !important;
    padding-bottom:5px !important;
    padding-left:16px !important;
    padding-right:5px !important;
}

.vertical-collpsed .vertical-menu #sidebar-menu>ul>li>a{
    padding:5px 5px 5px 5px !important;
    min-height: 0px !important;
}


.vertical-collpsed #sidebar-menu ul li ul.sub-menu {
    margin-left: -6px !important;
    background-color: var(--vertical-menu-bgcolor) !important;
    width: auto !important;
    padding: 0px !important;
}

.vertical-collpsed #sidebar-menu ul li ul.sub-menu:hover {
    border-radius: var(--vertical-menu-link-border-radius,10px) !important;
    background-color: var(--vertical-menu-link-hover-bgcolor,#F8F1EB) !important;
}

.vertical-collpsed .vertical-menu #sidebar-menu > ul > li:hover > ul a {
    width: 147px !important;
    padding-left: 0px !important;
    padding-right: 0px !important;  
}


#sidebar-menu ul li a:hover {
    background-color: var(--vertical-menu-link-hover-bgcolor,#F8F1EB) !important;
    border-radius: var(--vertical-menu-link-border-radius,10px) !important;
}

#sidebar-menu ul li a i {
    color:var(--vertical-menu-link-color, #333) !important;
}

#sidebar-menu ul li.mm-active a i {
    color:var(--vertical-menu-link-active-color, #333) !important;
}

.menu-user ul li a.dropdow-item{
    margin-bottom:0px !important;
    font-weight: 500 !important;
    line-height: 1.25rem !important;
    font-size:1rem !important;
}

.dropdown-menu-profile {
    margin-top: 0 !important;
    margin-bottom:0 !important;
    padding-top:0 !important;
    background-color:var(--vertical-submenu-bgcolor,#F8F1EA) !important;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    box-shadow: none !important;
    z-index:1200 !important;
}

.dropdown-menu-profile p {
    color:var(--vertical-submenu-color, #495057) !important;
}

.dropdown-menu-profile .dropdown-item,
.dropdown-menu-profile .dropdown-item:hover,
.dropdown-menu-profile .dropdown-divider {
    background-color:var(--vertical-submenu-link-bgcolor,#FFFFFF) !important;
    margin:0px !important;
}

.skip-link {
    position: absolute;
    top:-40px;
    left:0;
    background:#000;
    color:#fff;
    padding:8px;
    transition: top 0.3s;
}

/*fix problem with timeline and searchbox*/

.verti-timeline {
    border-left: 3px dashed #EEF2f7;
    margin:0 10px;
}

.List-unstyled {
    padding-left:0;
    list-style: none;
}

.verti-timeline .event-list {
    position:relative;
    padding: 0 0 40px 30px;
}

.verti-timeline .event-list .event-timeline-dot {
    position:absolute;
    left:-9px;
    top:0;
    z-index:9;
    font-size:16px;
}

.search-box .form-control {
    padding-left:40px;
}

.search-box .search-icon{
    left:13px !important;
}


.select2-container { 
    max-width: 100% !important;
    width: 100% !important;
}
.select2-dropdown  { max-width: 100vw; overflow-x: hidden }

.select2-results__options {
  max-height: 260px;
  overflow-y: auto;
}



.select2-container .select2-selection--single {
    height: 36px !important;
}


/*end fix problem with timeline*/

.skip-link:focus {
    top:0;
}

.logo-light {
    display:block !important;
}

.header-item {
    padding-top:10px !important;
}

.vertical-collpsed .header-item {
    height: 40px !important;
    padding-left:24px !important;
}

.header-item i {
    color: var(--header-item-color, #FFFFFF) !important;
}

.text-loader {
    opacity: 1;
    color: var(--text-loader-color) !important;
}

.header-profile-user {
    background-color:var (--header-profile-user-bgcolor) !important;
}

.logo_lg {
    height: var(--logo-lg-height) !important;
}

.logo_sm {
    height: var(--logo-sm-height) !important;
}


.footer {
    position:relative !important;
    right:0 !important;
    left:0 !important;
    background-color: var(--footer-bgcolor) !important;
    color:var( --footer-color) !important;
    border-top:1px solid #E8EbEE;
}

.footer a {
    color: var(--footer-link-color) !important;
    text-decoration: var(--footer-link-text-decoration) !important;
}

.footer a:hover{
    color:var(--footer-link-hover-color) !important;
    text-decoration: var(--footer-link-hover-text-decoration) !important;
}

.main-container,
.sidebarScroll {
    overflow: visible !important;
}

.main-content {
    background-color: transparent !important;
    overflow:visible !important;
}

.vertical-menu {
    background-color: var(--vertical-menu-bgcolor) !important;
    width:245px !important;
}

.metismenu li a {
    color:var(--vertical-menu-link-color) !important;
}

.metismenu li.menu-title {
    color:var(--vertical-menu-menuTitle) !important;
}

.metismenu .mm-active .active {
    color:var(--vertical-menu-link-active-color) !important;
}

.page-title-box,
.page-subtitle-box {
	padding-bottom:10px !important;
}

.page-subtitle-box{
	font-size:14px !important;
	font-weight: 500 !important;
	padding-left:2px;
	line-height:20px !important;
}

.page-title-box H4 {
    text-transform: none !important;
    font-size:2rem !important;
}

@media(max-width: 991px) {
    .rt-news-box-1 .img-scale-animate img {
        width:100%
    }
}

/*Ico Def*/

i.viewMore {
    color:var(--viewMore-color) !important;
}

#UserNameHeader,
.navbar-header .icon-arrow-down-1-linear{
    color:var(--userNameHeader-color) !important;
}

@keyframes ring {
  0% { transform: rotate(0); }
  1% { transform: rotate(30deg); }
  3% { transform: rotate(-28deg); }
  5% { transform: rotate(34deg); }
  7% { transform: rotate(-32deg); }
  9% { transform: rotate(30deg); }
  11% { transform: rotate(-28deg); }
  13% { transform: rotate(26deg); }
  15% { transform: rotate(-24deg); }
  17% { transform: rotate(22deg); }
  19% { transform: rotate(-20deg); }
  21% { transform: rotate(18deg); }
  23% { transform: rotate(-16deg); }
  25% { transform: rotate(14deg); }
  27% { transform: rotate(-12deg); }
  29% { transform: rotate(10deg); }
  31% { transform: rotate(-8deg); }
  33% { transform: rotate(6deg); }
  35% { transform: rotate(-4deg); }
  37% { transform: rotate(2deg); }
  39% { transform: rotate(-1deg); }
  41% { transform: rotate(1deg); }
  43% { transform: rotate(0); }
}

.animate-ring {
  animation: ring 2s ease-in-out infinite;
  display: inline-block;           /* ensures transform looks right */
  transform-origin: 50% 0;         /* swing from the top like a bell */
}

.btn-icon i.danger {
  color: red !important;
}

.noti-icon i {
    color:#333 !important;
    font-size:1.25rem !important;
    display: inline-block !important;
    line-height: 1 !important;
}

.noti-icon i.danger{
    color:red !important;
}

.noti-icon {
    margin: 5px !important;
    margin-top: 0px !important;
    height: 40px !important;
    background-color: var(--noti-icon-bgcolor, #ffffff) !important;
    border-radius: var(--noti-icon-border-radius, 0.625rem) !important;
    text-align: center !important;
    vertical-align: middle !important;
    border: 1px solid #E8EBEE;
    box-shadow: 0 .125rem .25rem var(--noti-icon-box-shadow-color);
    padding-top: .5rem !important;
    padding-left: .75rem !important;
    z-index: 1000 !important;
}

.noti-icon:hover {
    background-color: var(--noti-icon-hover-bgcolor, #E8EbEE) !important;
    border-color:var(--noti-icon-hover-border-color, #E8EbEE) !important;
}

.ico-carousel{
    font-size:30px !important;
    font-weight:700;
    color:var(--ico-carousel-color, #FFFFFF) !important;
}

.link-sorting{
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    border-width: 0px !important;
    text-decoration: underline !important;
    text-decoration-color:rgba(30, 59, 89, .5);
    color:rgba(30, 59, 89, 1);
}

.link-primary .link-text {
    font-weight: 500;
    color:rgba(39, 83, 194, 1) !important;
    text-decoration: underline !important;
    text-decoration-color: rgba(39, 83, 194, 1) !important;
    display: inline-flex;
}

.link-primary i {
    color:rgba(39, 83, 194, 1) !important;
    text-decoration:none !important;
    display: inline-block;
}

/*Search input in toolbaar*/
.expandable-search {
  position: relative;
  display: flex;
  align-items: center;
}

.search-toggle-btn {
  transition: all 0.3s ease;
}

.search-expanded {
  position: relative;
  display: flex;
  align-items: center;
  width: 250px;
}

.search-expanded input {
  padding-left: 2rem;
  padding-right: 2rem;
  border-radius: .5rem;
  width: 100%;
}

.search-icon-start {
  position: absolute;
  left: 10px;
  color: #999;
  pointer-events: none;
}

.close-search {
  position: absolute;
  right: 5px;
  color: #999;
  padding: 0.25rem;
}



/*Search input in toolbar*/


.icoEdit,
.icoAdd,
.icoArrow,
.icoExternalLink,
.icoEvent,
.ico-table-edit,
.ico-table-delete{
    font-size:16px !important;
    color:var(--bs-btn-primary-color, #ffffff) !important;
}

.icoEdit:hover,
.icoAdd:hover,
.icoArrow:hover,
.icoExternalLink:hover,
.icoEvent:hover,
.ico-table-edit:hover,
.ico-table-delete:hover{
    font-size:16px !important;
    color:var(--bs-btn-primary-hover-color, #ffffff);
}

.ico-color {
    color:var(--ico-general-color, #FFFFFF);
}

.ico-vac {
    color: var(--ico-general-color, #FFFFFF);
    font-size:1.25rem;
}

.ico-cbs {
    font-size:1.25rem;
    color:var(--ico-cbs-stat-color, #D63D00);
}

.ico-stat{
    font-size:1.25rem;
    color:var(--ico-cbs-stat-color, #D63D00);
}

.ico-fav {
    font-size:16px;
    color:var(--ico-cbs-stat-color, #D63D00);
}

.ico-replay{
    color:var(--ico-general-color, #FFFFFF) !important;
    font-size:16px;
}

.ico-cp-filter{
    color:var(--ico-general-color, #FFFFFF);
    font-size:16px;
}

.ico-cp-export {
    color:var(--ico-general-color, #FFFFFF);
    font-size:16px;  
}

.icoSettingUtm,
.icoSettingLocation,
.icoSettingsWallet,
.icoSettingsUser {
    font-size:25px !important;
    color:var(--ico-cbs-stat-color, #D63D00);
}

/*End Ico Def*/
.page-loader,
.page-loader I{
    color:var(--page-loader-ico-color) !important;
}

.page-loader I{
    font-size: 30px !important;
}

.spinner-border {
    border-width:0;
    animation-name: spinner-border;
    border:0.25rem solid var(--text-loader-color, #D63D00);
    border-right-color: transparent;
    animation-timing-function: 0.75s;
}


/*CSS toolbar*/

.toolbar-container {
  background-color: #fff;
  padding-bottom: 1rem;
}

@media (max-width: 768px) {
  .toolbar-row > .col {
    flex: 100%;
    max-width: 100%;
    justify-content: start !important;
    margin-bottom: 0.5rem;
  }

  .nav-tabs {
    flex-wrap: wrap;
  }
}

/*css toolbar*/

/*This is for the bullet in the left menu*/
.metismenu-ico {
    color:var(--info-ico-color, #FFFFFF) !important;
    background-color: var(--info-ico-bgcolor, #415FCA);
    border-radius: 16px !important;
    width: 20px !important;
    height: 20px !important;
    justify-content: center !important;
    align-items: center !important;
    padding-top:0.5em !important;
    border:1px solid var(--info-ico-border-color,#FFFFFF) !important; 
}


.notification-ico {
    color: var(--info-ico-color, #FFFFFF) !important;
    background-color: var(--info-ico-bgcolor, #415FCA);
    border-radius: 16px !important;
    width: 20px !important;
    height: 20px !important;
    justify-content: center !important;
    align-items: center !important;
    padding-top: 0.5em !important;
    border: 1px solid var(--info-ico-border-color,#FFFFFF) !important;
    top: 5px !important;
    right: 4px !important;
    z-index: 1050 !important;
}

.row>* {
    padding-left: calc(16px * .5) !important;
    padding-right: calc(16px * .5) !important;
}

.card {
    /*box-shadow: 0px 2px 4px 0px var(--card-box-shadow-color, #1E3B591F);*/
    border:1px solid var(--card-border-color, #E8EBEE);
    gap: 1rem !important;
    border-radius: var(--card-border-radius, 4px) !important;
    background-color:var(--card-bgcolor, #FFFFFF) !important;
    margin-bottom:1rem !important;
}

.card-main-page {
    border: 0px !important;
    box-shadow: none !important;
    background-color: transparent !important;
}

H4 {
    color:var(--h4-color, #870B58) !important;
    font-weight: var(--h4-font-weight,700) !important;
    font-size:var(--h4-font-size,1.5rem);
    line-height: 1.5;
}

H5,
H5.accordion-header button {
    color: var(--h5-color,#870B58) !important;
    font-weight: var(--h5-font-weight, 700) !important;    
    line-height: 2rem !important;
    font-size: var(--h5-font-size,1.50rem) !important;
}

H5.txt-welkom{
    color:var(--h5-text-welkom-color,#FFFFFF) !important;
}

H5.cpnr{
    font-size:var(--h5-cpnr-font-size,24px) !important;
    font-weight: var(--h5-cpnr-font-weight,700) !important;
    line-height: 32px !important;
}

.cptxt {
    color:#555D71 !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 20px !important;
}

H6 {
    color:var(--h6-color,#555D71) !important;
    font-weight: var(--h6-font-weight,500) !important;
    font-size: var(--h6-font-size, 16px) !important;
    line-height: 24px !important;
}

.btn-primary-action,
.btn-primary-action:focus,
.btn-primary-action:focus-visible,
.btn-primary-action:focus-within,
.btn-primary-action:active {
    display: flex;
    align-items: center;
    cursor: pointer;
    box-shadow: var(--bs-btn-primary-action-box-shadow, 0 .125rem .25rem rgba(30, 59, 89, .12)) !important;
    border-radius:var(--bs-btn-primary-action-border-radius,.625rem) !important;
    border:var(--bs-btn-primary-action-border-width,1px) var(--bs-btn-primary-action-border-type,solid) var(--bs-btn-primary-action-border-color,#adc3fa) !important;
    padding: .5rem .5rem !important;
    background-color:var(--bs-btn-primary-action-bgcolor,#3168F2) !important;
    color:var(--bs-btn-primary-action-color,#FFFFFF) !important;
}

.btn-primary-action:hover{
    color:#FFFFFF;
    background-color:#2753C2;
    border-color:#adc3fa;
    box-shadow: 0 .125rem .25rem rgba(30, 59, 89, .12);
}

.btn-primary-action i{
    font-size: 20px;
    color: var(--bs-btn-primary-action-ico-color,#FFFFFF);
}


.btn-fav {
    color:var(--bs-btn-secondary-color, #D63D00) !important;
    font-size:14px !important;
    font-weight: 500 !important;
    line-height: 24px !important;
    box-shadow: var(--bs-btn-secondary-box-shadow, 0px 1px 2px 0px rgba(48, 54, 66, 0.10)) !important;
    background-color: var(--bs-btn-secondary-bgcolor, #FFFFFF) !important;
    border-width:var(--bs-btn-secondary-border-width, 1px) !important;
    border-style:var(--bs-btn-secondary-border-type,solid) !important;
    border-color:var(--bs-btn-secondary-border-color, #E3E6EF) !important;
    border-radius: var(--bs-btn-secondary-border-radius, 4px) !important;
}

.btn-fav I {
    color:var(--bs-btn-secondary-color, #D63D00)!important;
}

.btn-fav:hover {
    color:var(--bs-btn-secondary-hover-color, #D63D00) !important;
    box-shadow: var(--bs-btn-secondary-hover-box-shadow, 0px 1px 2px 0px rgba(48, 54, 66, 0.10)) !important;
    background-color: var(--bs-btn-secondary-hover-bgcolor, #FFFFFF) !important;
    border-width:var(--bs-btn-secondary-hover-border-width, 1px) !important;
    border-style:var(--bs-btn-secondary-hover-border-type,solid) !important;
    border-color:var(--bs-btn-secondary-hover-border-color, #E3E6EF) !important;
    border-radius: var(--bs-btn-secondary-hover-border-radius, 4px) !important;
}

.btn-fav:hover I {
    color:var(--bs-btn-secondary-hover-color, #D63D00)!important;
}

.btn-fav:focus {
    color:var(--bs-btn-secondary-focus-color, #D63D00) !important;
    box-shadow: var(--bs-btn-secondary-focus-box-shadow, 0px 1px 2px 0px rgba(48, 54, 66, 0.10)) !important;
    background-color: var(--bs-btn-secondary-focus-bgcolor, #FFFFFF) !important;
    border-width:var(--bs-btn-secondary-focus-border-width, 1px) !important;
    border-style:var(--bs-btn-secondary-focus-border-type,solid) !important;
    border-color:var(--bs-btn-secondary-focus-border-color, #E3E6EF) !important;
    border-radius: var(--bs-btn-secondary-focus-border-radius, 4px) !important;
}

.btn-fav:focus I {
    color:var(--bs-btn-secondary-focus-color, #D63D00)!important;
}

.btn-fav:disabled {
    color:var(--bs-btn-secondary-disabled-color, #D63D00) !important;
    box-shadow: var(--bs-btn-secondary-disabled-box-shadow, 0px 1px 2px 0px rgba(48, 54, 66, 0.10)) !important;
    background-color: var(--bs-btn-secondary-disabled-bgcolor, #FFFFFF) !important;
    border-width:var(--bs-btn-secondary-disabled-border-width, 1px) !important;
    border-style:var(--bs-btn-secondary-disabled-border-type,solid) !important;
    border-color:var(--bs-btn-secondary-disabled-border-color, #E3E6EF) !important;
    border-radius: var(--bs-btn-secondary-disabled-border-radius, 4px) !important;
}

.btn-fav:disabled I {
    color:var(--bs-btn-secondary-disabled-color, #D63D00)!important;
}


.btn-fav-add {
    color:#303642;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 24px !important;
    border-radius:4px !important;
    border:1px solid #E3E6EF;
    background-color:#FFFFFF;
    box-shadow: 0px 1px 2px 0px rgba(48, 54, 66, 0.10) !important;
}

.btn-fav-add i {
    font-size:16px !important;
    color:#303642 !important;
}

.btn-pdto-filter {
    display:flex !important;
    padding:8px 16px !important;
    align-items: center !important;
    gap:12px !important;
    color:#D63D00 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 24px !important;
    border-radius: 4px !important;
    border:1px solid #E3E6EF !important;
    background-color: #FFFFFF !important;
    box-shadow: 0px 1px 2px opx rgba(48, 54, 66, 0.10) !important;
}

.btn-pdto-filter.active {
    display:flex !important;
    padding:8px 16px !important;
    align-items: center !important;
    gap:12px !important;
    color:#FFFFFF !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 24px !important;
    border-radius: 4px !important;
    border:0px solid #E3E6EF !important;
    background-color: #D63D00 !important;
    box-shadow: 0px 1px 2px opx rgba(48, 54, 66, 0.10) !important;
}

.pdto-filter-ico{
    color:#FFFFFF !important;
    background-color: #415FCA !important;
    border-radius: 16px !important;
    width: 20px !important;
    height: 20px !important;
    justify-content: center !important;
    align-items: center !important;
    padding-top:0.5em !important;
    border:1px solid #FFFFFF !important; 
}

.btn-success {
    color:var(--bs-btn-home-primary-color, #FFFFFF) !important;
    background-color: var(--bs-btn-home-primary-bgcolor,  #D63D00) !important;
    border-color: var(--bs-btn-home-primary-border-color, #982D01) !important;
    border-radius: var(--bs-btn-home-primary-border-radius, 4px) !important;
    box-shadow: var(--bs-btn-home-primary-box-shadow, 0px 1px 2px 0px rgba(48,54,66,0.10)) !important;
    border-width: var(--bs-btn-home-primary-border-width, 1px);
    border-style: var(--bs-btn-home-primary-border-type, solid);
    gap:12px !important;
    align-items: center !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    line-height: 24px !important;
}

.btn-success:hover {
    color:var(--bs-btn-home-primary-hover-color, #FFFFFF) !important;
    background-color: var(--bs-btn-home-primary-hover-bgcolor,  #D63D00) !important;
    border-color: var(--bs-btn-home-primary-hover-border-color, #982D01) !important;
    border-radius: var(--bs-btn-home-primary-hover-border-radius, 4px) !important;
    box-shadow: var(--bs-btn-home-primary-hover-box-shadow, 0px 1px 2px 0px rgba(48,54,66,0.10)) !important;
    border-width: var(--bs-btn-home-primary-hover-border-width, 1px);
    border-style: var(--bs-btn-home-primary-hover-border-type, solid);
}

.btn-success:focus {
    color:var(--bs-btn-home-primary-focus-color, #FFFFFF) !important;
    background-color: var(--bs-btn-home-primary-focus-bgcolor,  #D63D00) !important;
    border-color: var(--bs-btn-home-primary-focus-border-color, #982D01) !important;
    border-radius: var(--bs-btn-home-primary-focus-border-radius, 4px) !important;
    box-shadow: var(--bs-btn-home-primary-focus-box-shadow, 0px 1px 2px 0px rgba(48,54,66,0.10)) !important;
    border-width: var(--bs-btn-home-primary-focus-border-width, 1px);
    border-style: var(--bs-btn-home-primary-focus-border-type, solid);
}

.btn-success:disabled {
    color:var(--bs-btn-home-primary-disabled-color, #FFFFFF) !important;
    background-color: var(--bs-btn-home-primary-disabled-bgcolor,  #D63D00) !important;
    border-color: var(--bs-btn-home-primary-disabled-border-color, #982D01) !important;
    border-radius: var(--bs-btn-home-primary-disabled-border-radius, 4px) !important;
    box-shadow: var(--bs-btn-home-primary-disabled-box-shadow, 0px 1px 2px 0px rgba(48,54,66,0.10)) !important;
    border-width: var(--bs-btn-home-primary-disabled-border-width, 1px);
    border-style: var(--bs-btn-home-primary-disabled-border-type, solid);
}

.btn-success i {
    color:var(--bs-btn-home-primary-icon-color,#d01515) !important;
}

.btn-success:hover i {
    color:var(--bs-btn-home-primary-hover-icon-color,#d01515) !important;
}

.btn-success:focus i {
    color:var(--bs-btn-home-primary-focus-icon-color,#d01515) !important;
}

.btn-success:disabled i {
    color:var(--bs-btn-home-primary-disabled-icon-color,#d01515) !important;
}


.btn-warning{
    color:var(--bs-btn-home-secondary-color, #D63D00) !important;
    background-color:var(--bs-btn-home-secondary-bgcolor, #FFFFFF) !important;
    border-width: var(--bs-btn-home-secondary-border-width, 1px) !important; 
    border-style: var( --bs-btn-home-secondary-border-type, solid) !important;
    border-color: var( --bs-btn-home-secondary-border-color, #E3E6EF) !important;
    border-radius: var(--bs-btn-home-secondary-border-radius, 4px) !important;
    box-shadow: var(--bs-btn-home-secondary-box-shadow, 0px 1px 2px 0px rgba(48, 54, 66, 0.10)) !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    line-height: 24px !important;
    gap: 12px !important;
    align-items: center !important;
    display:flex !important;
    max-width: 300px !important;
}

.btn-warning i {
    color:var(--bs-btn-home-secondary-color, #D63D00) !important;
}

.btn-warning:hover{
    color:var(--bs-btn-home-secondary-hover-color, #D63D00) !important;
    background-color:var(--bs-btn-home-secondary-hover-bgcolor, #FFFFFF) !important;
    border-width: var(--bs-btn-home-secondary-hover-border-width, 1px) !important; 
    border-style: var( --bs-btn-home-secondary-hover-border-type, solid) !important;
    border-color: var( --bs-btn-home-secondary-hover-border-color, #E3E6EF) !important;
    border-radius: var(--bs-btn-home-secondary-hover-border-radius, 4px) !important;
    box-shadow: var(--bs-btn-home-secondary-hover-box-shadow, 0px 1px 2px 0px rgba(48, 54, 66, 0.10)) !important;
}

.btn-warning:hover i {
    color:var(--bs-btn-home-secondary-hover-color, #D63D00) !important;
}

.btn-warning:focus{
    color:var(--bs-btn-home-secondary-focus-color, #D63D00) !important;
    background-color:var(--bs-btn-home-secondary-focus-bgcolor, #FFFFFF) !important;
    border-width: var(--bs-btn-home-secondary-focus-border-width, 1px) !important; 
    border-style: var( --bs-btn-home-secondary-focus-border-type, solid) !important;
    border-color: var( --bs-btn-home-secondary-focus-border-color, #E3E6EF) !important;
    border-radius: var(--bs-btn-home-secondary-focus-border-radius, 4px) !important;
    box-shadow: var(--bs-btn-home-secondary-focus-box-shadow, 0px 1px 2px 0px rgba(48, 54, 66, 0.10)) !important;
}

.btn-warning:focus i {
    color:var(--bs-btn-home-secondary-focus-color, #D63D00) !important;
}

.btn-warning:disabled{
    color:var(--bs-btn-home-secondary-disabled-color, #D63D00) !important;
    background-color:var(--bs-btn-home-secondary-disabled-bgcolor, #FFFFFF) !important;
    border-width: var(--bs-btn-home-secondary-disabled-border-width, 1px) !important; 
    border-style: var( --bs-btn-home-secondary-disabled-border-type, solid) !important;
    border-color: var( --bs-btn-home-secondary-disabled-border-color, #E3E6EF) !important;
    border-radius: var(--bs-btn-home-secondary-disabled-border-radius, 4px) !important;
    box-shadow: var(--bs-btn-home-secondary-disabled-box-shadow, 0px 1px 2px 0px rgba(48, 54, 66, 0.10)) !important;
}

.btn-warning:disabled i {
    color:var(--bs-btn-home-secondary-disabled-color, #D63D00) !important;
}


.btn-info,
.btn-secondary {
    color:var(--bs-btn-primary-color ,#FFFFFF) !important;
    background-color: var(--bs-btn-primary-bgcolor, #D63D00) !important;
    border-color: var(--bs-btn-primary-border-color, #D63D00) !important;
    border-radius: var(--bs-btn-primary-border-radius, 4px) !important;
    box-shadow: var(--bs-btn-primary-box-shadow, 0px 1px 2px 0px rgba(48, 54, 66, 0.10)) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 24px !important;
}

.btn-info:hover,
.btn-secondary:hover {
    color:var(--bs-btn-primary-hover-color, #FFFFFF) !important;
    background-color: var(--bs-btn-primary-hover-bgcolor, #D63D00) !important;
    border-color: var(--bs-btn-primary-hover-border-color, #D63D00) !important;
    border-width: var(--bs-btn-primary-hover-border-width, 1px) !important;
    border-radius: var(--bs-btn-primary-hover-border-radius, 4px) !important;
    box-shadow: var(--bs-btn-primary-hover-box-shadow, 0px 1px 2px 0px rgba(48, 54, 66, 0.10)) !important;
}

.btn-info:hover i,
.btn-secondary:hover i {
    color:var(--bs-btn-primary-hover-color, #FFFFFF) !important;
}

.btn-info:focus,
.btn-secondary:focus {
    color:var(--bs-btn-primary-focus-color, #FFFFFF) !important;
    background-color: var(--bs-btn-primary-focus-bgcolor, #D63D00) !important;
    border-color: var(--bs-btn-primary-focus-border-color, #D63D00) !important;
    border-radius: var(--bs-btn-primary-focus-border-radius, 4px) !important;
    box-shadow: var(--bs-btn-primary-focus-box-shadow, 0px 1px 2px 0px rgba(48, 54, 66, 0.10)) !important;
}

.btn-info:disabled,
.btn-secondary:disabled {
    color:var(--bs-btn-primary-disabled-color, #FFFFFF) !important;
    background-color: var(--bs-btn-primary-disabled-bgcolor, #D63D00) !important;
    border-color: var(--bs-btn-primary-disabled-border-color, #D63D00) !important;
    border-radius: var(--bs-btn-primary-disabled-border-radius, 4px) !important;
    box-shadow: var(--bs-btn-primary-disabled-box-shadow, 0px 1px 2px 0px rgba(48, 54, 66, 0.10)) !important;
}



.btn-link {
    color:var(--btn-link-color, #B93E0C) !important;
}

.btn-link:hover {
    color:var(--btn-link-hover-color, #B93E0C) !important;
}

.btnCarousel{
    background-color:var(--btn-carousel-bgcolor,#B93E0C) !important;
}

/*Background*/
.bg-primary-subtle{
    background-color: var(--bg-primary-subtle-bgcolor, #870B58) !important;
}

.bg-danger {
    background-color: var(--bg-danger-bgcolor,#415FCA) !important;
}

.bg-alert {
    background-color: var(--bg-alert-bgcolor,#D63D00) !important;
}

.List-unstyled H6 {
    color:var(--primary-txt-color, #D63D00) !important;
}

.text-primary {
    color: var(--secondary-txt-color, #FFF) !important;
}

.text-info {
    color: #55aab9 !important;
}

.text-warning {
    color:red !important;
}

p {
    font-size:14px !important;
}

.arrowNews {
    color:var(--bs-timeline-list-color, #76084C) !important;
    top:20% !important;
    width:32px !important;
    height: 32px !important;
    padding-left:5px !important;
    justify-content: center !important;
    align-items: center !important;
    font-size: 24px !important;
    line-height: 32px !important;
    border-radius: 16px !important;
    border:1px solid var(--bs-timeline-list-border-color, #FFFFFF) !important;
    background-color: var(--bs-timeline-list-bgcolor, #FFEBF5) !important;
}

.active>.page-link, .page-link.active {
    color:#FFFFFF !important;
    background-color:#D63D00 !important;
    border-color:#D63D00 !important;
}

/*block AM contact*/

.bl-am-name{
    color:var(--h4-color, #870B58) !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    line-height: 24px !important;
}

.bl-am-title {
    color:#7F8594 !important;
    font-size:12px !important;
    font-weight: 400 !important;
    line-height: 16px !important;
}

.bl-am-desc{
    color:#555D71 !important;
    font-size:14px !important;
    font-weight: 400 !important;
    line-height: 20px !important;
}

.bl-link-email,
.bl-link-phone,
.bl-link-agenda{
    display:flex !important;
    width: 40px !important;
    height: 40px !important;
    padding:10px !important;
    align-items: center !important;
    justify-items: center !important;
    color: var(--bs-btn-secondary-color,#D63D00) !important;
    font-size: 16px !important;
    line-height: 24px !important;
    border-radius: var(--bs-btn-secondary-border-radius, 4px) !important;
    border-width: var(--bs-btn-secondary-border-width,1px) !important; 
    border-style: var(--bs-btn-secondary-border-type, solid) !important; 
    border-color: var(--bs-btn-secondary-border-color, #E3E6EF) !important;
    background-color: var(--bs-btn-secondary-bgcolor, #FFFFFF) !important;
    box-shadow: var(--bs-btn-secondary-box-shadow, 0px 1px 2px 0px rgba(48, 54, 66, 0.10)) !important;
}

.bl-link-email:hover,
.bl-link-phone:hover,
.bl-link-agenda:hover{
    color: var(--bs-btn-secondary-hover-color,#D63D00) !important;
    border-radius: var(--bs-btn-secondary-hover-border-radius, 4px) !important;
    border-width: var(--bs-btn-secondary-hover-border-width,1px) !important; 
    border-style: var(--bs-btn-secondary-hover-border-type, solid) !important; 
    border-color: var(--bs-btn-secondary-hover-border-color, #E3E6EF) !important;
    background-color: var(--bs-btn-secondary-hover-bgcolor, #FFFFFF) !important;
    box-shadow: var(--bs-btn-secondary-hover-box-shadow, 0px 1px 2px 0px rgba(48, 54, 66, 0.10)) !important;
}

.bl-link-email:focus,
.bl-link-phone:focus,
.bl-link-agenda:focus{
    color: var(--bs-btn-secondary-focus-color,#D63D00) !important;
    border-radius: var(--bs-btn-secondary-focus-border-radius, 4px) !important;
    border-width: var(--bs-btn-secondary-focus-border-width,1px) !important; 
    border-style: var(--bs-btn-secondary-focus-border-type, solid) !important; 
    border-color: var(--bs-btn-secondary-focus-border-color, #E3E6EF) !important;
    background-color: var(--bs-btn-secondary-focus-bgcolor, #FFFFFF) !important;
    box-shadow: var(--bs-btn-secondary-focus-box-shadow, 0px 1px 2px 0px rgba(48, 54, 66, 0.10)) !important;
}

.bl-link-email:disabled,
.bl-link-phone:disabled,
.bl-link-agenda:disabled{
    color: var(--bs-btn-secondary-disabled-color,#D63D00) !important;
    border-radius: var(--bs-btn-secondary-disabled-border-radius, 4px) !important;
    border-width: var(--bs-btn-secondary-disabled-border-width,1px) !important; 
    border-style: var(--bs-btn-secondary-disabled-border-type, solid) !important; 
    border-color: var(--bs-btn-secondary-disabled-border-color, #E3E6EF) !important;
    background-color: var(--bs-btn-secondary-disabled-bgcolor, #FFFFFF) !important;
    box-shadow: var(--bs-btn-secondary-disabled-box-shadow, 0px 1px 2px 0px rgba(48, 54, 66, 0.10)) !important;
}

.bl-link-email i,
.bl-link-phone i,
.bl-link-agenda i {
    color: var(--bs-btn-secondary-color,#D63D00) !important;
    font-size: 20px !important;
}

.bl-link-email:hover i,
.bl-link-phone:hover i,
.bl-link-agenda:hover i {
    color: var(--bs-btn-secondary-hover-color,#D63D00) !important;
}

.bl-link-email:focus i,
.bl-link-phone:focus i,
.bl-link-agenda:focus i {
    color: var(--bs-btn-secondary-focus-color,#D63D00) !important;
}

.bl-link-email:disabled i,
.bl-link-phone:disabled i,
.bl-link-agenda:disabled i {
    color: var(--bs-btn-secondary-disabled-color,#D63D00) !important;
}

/*News*/
.newsLink,
.newsLink:hover{
    color:#555D71 !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 20px !important;
    text-decoration: none;
}

.newsDate,
.eventdate {
    color:var(--date-txt-color, #D63D00) !important;
    font-size:14px !important;
    font-weight: 500 !important;
    line-height: 20px !important;
    text-transform: uppercase !important;
    margin-bottom:0px !important;
}

 /*Contact*/
 .linkContact,
 linkContact:hover {
     color:#1E3B59;
     text-decoration: none;
 }

 .ct-subtitle {
     color:#555D71 !important;
     font-size: 14px !important;
     font-weight: 400 !important;
     line-height: 20px !important;
 }

 .ct-phone-label {
     color:var(--bs-ico-color, #D63D00) !important;
     font-size:14px !important;
     font-weight: 500 !important;
     line-height: 20px !important;
     text-transform: uppercase !important;
     margin-bottom:0px !important;
 }

 .ct-phone-value {
     color:#555D71 !important;
     font-size:14px !important;
     line-height: 20px !important;
     font-weight: 400 !important;
 }

 .ct-mail-label{
    color:var(--bs-ico-color, #D63D00) !important;
     font-size:14px !important;
     font-weight: 500 !important;
     line-height: 20px !important;
     text-transform: uppercase !important;
     margin-bottom:0px !important;
 }

 .ct-mail-value {
     color:#555D71 !important;
     font-size:14px !important;
     line-height: 20px !important;
     font-weight: 400 !important;
 }

 .ct-icon-bg {
     display:flex !important;
     width: 32px !important;
     height: 32px !important;
     padding:4px !important;
     justify-content: center !important;
     align-items: center !important;
     color:var(--bs-ico-color, #76084C) !important;
     font-size:24px !important;
     line-height: 32px !important;
     background-color: var(--bs-ico-bgcolor, #FFEBF5) !important;
     border-radius:16px !important;
     border:1px solid var(--bs-ico-border-color, #FFFFFF) !important;
 }

 .ct-icon-bg i{
     color:var(--bs-ico-color, #76084C) !important;
 }

 .ico-event {
    display:flex !important;
    width: 32px !important;
    height: 32px !important;
    padding:4px !important;
    justify-content: center !important;
    align-items: center !important;
    color:var(--bs-ico-color, #76084C) !important;
    font-size:24px !important;
    line-height: 32px !important;
    background-color: var(--bs-ico-bgcolor, #FFEBF5) !important;
    border-radius:16px !important;
    border:1px solid var(--bs-ico-border-color, #FFFFFF) !important;
}

.ico-event i{
    color:#76084C !important;
}

 .product-img{
    background-color: rgba(42, 43, 54, 0.7);
}

.product-img H5{
    position: absolute !important;
    top:60% !important;
    left:10% !important;
    font-size: 1.125rem !important;
    color:#ffffff !important;
    border-bottom:1px solid #fff;
}

@media (min-width:3000px) {
    .product-img H5 {
        font-size: 0.6vw !important;
    }
}

.carouselImgBorder {
    border:1px solid #009ADE !important;
}

.pdt-step-title{
    color:var(--link-color, #D63D00) !important;
    font-size:14px !important;
    font-weight: 500 !important;
    line-height: 20px !important;
    text-transform: uppercase !important;
    margin-bottom: 0px !important;
}

.pdt-step-desc,
.pdt-step-desc P{
 color:#555D71 !important;
 font-size:14px !important;
 font-weight: 400 !important;
 line-height: 20px !important;
}

.pdt-desc,
.pdt-price-desc,
.pdt-desc P,
.pdt-price-desc P{
    color:#555D71 !important;
    font-size:14px !important;
    font-weight: 400 !important;
    line-height: 20px !important;
}

.pdt-price {
    color: var(--h4-color, #870B58)!important;
    font-size: 24px !important;
    font-weight: 700 !important;
    line-height: 32px !important;
}

.pdt-sample-block{
    display:flex !important;
    padding:10px !important;
    align-items: center !important;
    gap: 12px !important;
    align-self: stretch !important;
    border-radius: 4px !important;
    border:1px solid #E3E6EF !important;
    box-shadow: 0px 1px 2px 0px rgba(48, 54, 66, 0.10) !important;
}

.pdt-sample-ico {
    display: flex !important;
    width: 32px !important;
    height: 32px !important;
    padding: 4px !important;
    justify-content: center !important;
    align-items: center !important;
    color:var(--link-color, #D63D00) !important;
    font-size: 24px !important;
    line-height: 32px !important;
    border-radius: 16px !important;
    background-color: var(--link-ico-bgcolor, #FCE8E1) !important;
}

.pdt-sample-link {
    color:var(--link-color, #D63D00) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 20px !important;
}

.pdt-custref-name{
    color:var(--h4-color, #870B58) !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    line-height: 24px !important;
    margin-bottom: 0px !important;
}

.pdt-custref-title {
    color:#7F8594 !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    line-height: 16px !important;
}

.pdt-custref-desc {
    color:#555D71 !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 20px !important;
}

.pdt-custref-btn-slider {
    background-color:var(--btn-carousel-bgcolor, #D63D00) !important;
}

.pdt-contact-ico {
    display: flex !important;
    width: 32px !important;
    height: 32px !important;
    padding: 4px !important;
    justify-content: center !important;
    align-items: center !important;
    color:var(--bs-ico-color, #76084C) !important;
    font-size: 24px !important;
    line-height: 32px !important;
    border-radius: 16px !important;
    border:1px solid var(--bs-ico-border-color, #FFFFFF) !important;
    background-color:var(--bs-ico-bgcolor, #FFEBF5) !important;
}

.pdt-contact-list li{
    padding-bottom:20px !important;
}

.pdt-contact-phone,
.pdt-contact-email{
    color:var(--primary-txt-color, #555D71) !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 20px !important;
}

.pdt-contact-link{
    color:var(--primary-txt-color, #555D71) !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 20px !important;
}

.pdt-contact-phonetext {
    color:var(--bs-ico-color, #D63D00) !important;
    font-size:14px !important;
    font-weight: 500 !important;
    line-height: 20px !important;
    text-transform: uppercase !important;
    margin-bottom:0px !important;
}

.pdt-contact-emailtext{
    color:var(--bs-ico-color, #D63D00) !important;
    font-size:14px !important;
    font-weight: 500 !important;
    line-height: 20px !important;
    text-transform: uppercase !important;
    margin-bottom:0px !important;
}

.verti-timeline {
    border-left: none !important;
    border-right:none !important;
}

.verti-timeline .event-list.active .event-timeline-dot,
.verti-timeline .event-list .event-timeline-dot {
    top:20% !important;
    width:32px !important;
    height: 32px !important;
    padding-left:5px !important;
    justify-content: center !important;
    align-items: center !important;
    color:var(--bs-timeline-list-color, #76084C)  !important;
    font-size: 24px !important;
    line-height: 32px !important;
    border-radius: 16px !important;
    border:1px solid var(--bs-timeline-list-border-color, #FFFFFF) !important;
    background-color: var(--bs-timeline-list-bgcolor, #FFEBF5) !important;
}

.verti-timeline .event-list.active .event-timeline-dot i,
.verti-timeline .event-list .event-timeline-dot i {
    position:relative !important;
    color:var(--bs-timeline-list-color, #76084C) !important;
    top:-2px !important; 
    font-weight: 500 !important;
}

.timelineNotification {
    top:15px !important;
}

.verti-timeline .event-list .event-timeline-dot{
    top:0px !important;
}

/*Product general*/
.productLink H5{
    color:#FFFFFF !important;
    text-decoration: none !important;
    font-weight: 800;
    font-size: 19px;
    border-bottom:1px solid #FFFFFF;
}

.productLink H5:hover {
    text-decoration: none !important;
}

.filterbar {
    padding:5px !important;
    border-radius: 4px !important;
    border:1px solid #E3E6EF !important;
    background-color: #FFFFFF !important;
    box-shadow: 0px 1px 2px 0px rgba(48, 54, 66, 0.10) !important;
}

.pdto-filter-label {
    color:var(--h4-color, #870B58) !important;
    font-size: 18px !important;
    font-weight: 500 !important;
    line-height: 32px !important;
}

.pdto-card-body {
    margin-bottom:0px !important;
    padding-bottom:0px !important;
}

.pdto-card-footer{
    padding-top:0px !important;
    background-color:transparent !important;
    border-top:1px solid #EEF2f7;
}

.btn-pdto-pdt-ico-video,
.btn-pdto-pdt-ico-fav,
.btn-pdto-pdt-ico-phone {
    padding:20px !important;
    border-radius: var(--bs-btn-secondary-border-radius, 4px) !important;
    border-width: var(--bs-btn-secondary-border-width ,1px ) !important;
    border-style: var(--bs-btn-secondary-border-type , solid) !important; 
    border-color: var(--bs-btn-secondary-border-color,#E3E6EF) !important;
    background-color: var(--bs-btn-secondary-bgcolor, #FFFFFF) !important;
    box-shadow: var(--bs-btn-secondary-box-shadow, 0px 1px 2px 0px rgba(48 , 54, 66, 0.10)) !important;
    display: flex !important;
    width: 40px !important;
    height: 40px !important;
    padding:10px !important;
    align-items: center !important;
    color:var(--bs-btn-secondary-color, #D63D00) !important;
    font-size:16px !important;
    line-height: 24px !important;
}

.btn-pdto-pdt-ico-video:hover,
.btn-pdto-pdt-ico-fav:hover,
.btn-pdto-pdt-ico-phone:hover {
    border-radius: var(--bs-btn-secondary-hover-border-radius, 4px) !important;
    border-width: var(--bs-btn-secondary-hover-border-width ,1px ) !important;
    border-style: var(--bs-btn-secondary-hover-border-type , solid) !important; 
    border-color: var(--bs-btn-secondary-hover-border-color,#E3E6EF) !important;
    background-color: var(--bs-btn-secondary-hover-bgcolor, #FFFFFF) !important;
    box-shadow: var(--bs-btn-secondary-hover-box-shadow, 0px 1px 2px 0px rgba(48 , 54, 66, 0.10)) !important;
    color:var(--bs-btn-secondary-hover-color, #D63D00) !important;
}

.btn-pdto-pdt-ico-video:focus,
.btn-pdto-pdt-ico-fav:focus,
.btn-pdto-pdt-ico-phone:focus {
    border-radius: var(--bs-btn-secondary-focus-border-radius, 4px) !important;
    border-width: var(--bs-btn-secondary-focus-border-width ,1px ) !important;
    border-style: var(--bs-btn-secondary-focus-border-type , solid) !important; 
    border-color: var(--bs-btn-secondary-focus-border-color,#E3E6EF) !important;
    background-color: var(--bs-btn-secondary-focus-bgcolor, #FFFFFF) !important;
    box-shadow: var(--bs-btn-secondary-focus-box-shadow, 0px 1px 2px 0px rgba(48 , 54, 66, 0.10)) !important;
    color:var(--bs-btn-secondary-focus-color, #D63D00) !important;
}

.btn-pdto-pdt-ico-video:disabled,
.btn-pdto-pdt-ico-fav:disabled,
.btn-pdto-pdt-ico-phone:disabled {
    border-radius: var(--bs-btn-secondary-disabled-border-radius, 4px) !important;
    border-width: var(--bs-btn-secondary-disabled-border-width ,1px ) !important;
    border-style: var(--bs-btn-secondary-disabled-border-type , solid) !important; 
    border-color: var(--bs-btn-secondary-disabled-border-color,#E3E6EF) !important;
    background-color: var(--bs-btn-secondary-disabled-bgcolor, #FFFFFF) !important;
    box-shadow: var(--bs-btn-secondary-disabled-box-shadow, 0px 1px 2px 0px rgba(48 , 54, 66, 0.10)) !important;
    color:var(--bs-btn-secondary-disabled-color, #D63D00) !important;
}

.btn-pdto-pdt-ico-fav {
    padding:9px !important;
}

.btn-pdto-pdt-ico-video i,
.btn-pdto-pdt-ico-fav i,
.btn-pdto-pdt-ico-phone i {
    color:var(--bs-btn-secondary-color, #D63D00) !important;
    font-size: 20px !important;
}

.btn-pdto-pdt-ico-video:hover i,
.btn-pdto-pdt-ico-fav:hover i,
.btn-pdto-pdt-ico-phone:hover i {
    color:var(--bs-btn-secondary-hover-color, #D63D00) !important;
}

.btn-pdto-pdt-ico-video:focus i,
.btn-pdto-pdt-ico-fav:focus i,
.btn-pdto-pdt-ico-phone:focus i {
    color:var(--bs-btn-secondary-focus-color, #D63D00) !important;
}

.btn-pdto-pdt-ico-video:disabled i,
.btn-pdto-pdt-ico-fav:disabled i,
.btn-pdto-pdt-ico-phone:disabled i {
    color:var(--bs-btn-secondary-disabled-color, #D63D00) !important;
}


.btn-pdto-pdt-ico-fav-active{
    padding:20px !important;
    border-radius: 4px !important;
    border:1px solid #E3E6EF !important;
    background-color: #F1F4F8 !important;
    box-shadow: 0px 2px 2px 0px rgba(0 , 0, 0, 0.08) inset !important;
    display: flex !important;
    width: 40px !important;
    height: 40px !important;
    padding:9px !important;
    align-items: center !important;
    color:#EA004D !important;
    font-size:16px !important;
    line-height: 24px !important;
}

.btn-pdto-pdt-ico-fav-active i{
    color:#EA004D !important;
    font-size: 20px !important;
}

.tab-bginfo.active {
    display:flex !important;
    padding:8px 16px !important;
    align-items: center !important;
    gap: 12px !important;
    color:var(--bs-tabs-active-color, #FFFFFF) !important;
    background-color: var(--bs-tabs-active-bgcolor, #D63D00) !important;
    box-shadow:var(--bs-tabs-active-box-shadow, 0px 1px 2px 0px rgba(48, 54, 66, 0.10)) !important;
    border-radius: var(--bs-tabs-active-border-radius, 4px) !important;
    border-width: var(--bs-tabs-active-border-width,1px) !important; 
    border-style: var(--bs-tabs-active-border-style, solid) !important; 
    border-color: var(--bs-tabs-active-border-color, #E3E6EF) !important;
    font-size:14px !important;
    font-weight: 500 !important;
    line-height: 20px !important;
}

.tab-bginfo {
    display: flex !important;
    padding:8px 16px !important;
    align-items: center !important;
    gap:12px !important;
    color:var(--bs-tabs-color, #D63D00) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 20px !important;
    background-color: var(--bs-tabs-bgcolor, #FFFFFF) !important;
    border-width: var(--bs-tabs-border-width,1px) !important; 
    border-style: var(--bs-tabs-border-style, solid) !important; 
    border-color: var(--bs-tabs-border-color, #E3E6EF) !important;
    box-shadow:var(--bs-tabs-box-shadow, 0px 1px 2px 0px rgba(48, 54, 66, 0.10)) !important;
    border-radius: var(--bs-tabs-border-radius, 4px) !important;
}

.requestbar {
    box-shadow: 0px 2px 4px 0px var(--card-box-shadow-color, #1E3B591F);
    border:1px solid var(--card-border-color, #E8EBEE);
    gap: 1rem !important;
    border-radius: var(--card-border-radius, 4px) !important;
    background-color:var(--card-bgcolor, #FFFFFF) !important;
}

.req-card-header,
.vac-card-header{
    background:transparent !important;
    border-bottom:1px solid #E3E6EF !important;
    margin:0px !important;
    padding:0px !important;
    padding-top:4px !important;
    padding-left:2px !important;
}

.req-card-body,
.vac-card-body{
    margin-top:0px !important;
    padding-top:0px !important;
    padding-left:10px !important;
    padding-right:10px !important;
}

.vac-card-footer {
    background-color:transparent !important;
    border-top:1px solid #E3E6EF !important;
}

.req-title,
.vac-title{
    color:var(--h4-color, #870B58) !important;
    font-size: 18px !important;
    font-weight: 500 !important;
    line-height: 28px !important;
    padding:12px 20px !important;
    border-radius:4px 4px 0px 0px !important;
    background-color: #FFFFFF !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    display:inline-block !important;
    width: 380px !important;
}

.settings-title {
    color:var(--h4-color, #870B58) !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    line-height: 28px !important;
    padding:12px 20px !important;
    padding-left:0px !important;
}

.settings-title I {
    color:var(--h4-color, #870B58) !important;
}

.req-subtitle{
    color:#555D71 !important;
    font-size:16px !important;
    font-weight: 500 !important;
    line-height: 24px !important;
}

.list-inline-item{
	vertical-align:bottom !important;
}

.req-bg-user {
    max-width:90px !important;
    white-space: nowrap !important;
    overflow: hidden;
    text-overflow: ellipsis !important;
}

.list-inline-item p,
.list-inline-item p i {
    color:#555D71 !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 24px !important;
}

.req-bg-success{
    color:#00883E !important;
    background-color:#D2F1DF !important;
    border:1px solid #00883E !important;
    border-radius: 4px !important;
    box-shadow: 0px 1px 2px 0px rgba(48, 54, 66, 0.10) !important;
}

.req-bg-progress{
    color:#987700 !important;
    background-color:#FFF3CC !important;
    border:1px solid #987700 !important;
    border-radius: 4px !important;
    box-shadow: 0px 1px 2px 0px rgba(48, 54, 66, 0.10) !important;
}

.req-bg-accepted{
    color:#009ADE !important;
    background-color:#D2F1DF !important;
    border:1px solid #009ADE !important;
    border-radius: 4px !important;
    box-shadow: 0px 1px 2px 0px rgba(48, 54, 66, 0.10) !important;
}

.req-bg-reject{
    color:#000000 !important;
    background-color:#F46A6A !important;
    border:1px solid #009ADE !important;
    border-radius: 4px !important;
    box-shadow: 0px 1px 2px 0px rgba(48, 54, 66, 0.10) !important;
}

.req-details-card-header{
    background-color:transparent !important;
    margin-bottom:0px !important;
    padding-bottom:0px !important;
    border-bottom: 1px solid #E3E6EF !important;
}

.req-details-card-body{
    padding-top:0px !important;
    margin-top:0px !important;
    margin-bottom:0px !important;
    padding-bottom: 0px !important;
}

.req-details-card-footer{
    background-color:transparent !important;
    border-top:1px solid #E3E6EF !important;
}

.btn-request-details,
.btn-camp-details,
.btn-filter {
    display:flex !important;
    width: 100% !important;
    padding:8px 16px !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    color:var(--bs-btn-primary-color, #FFFFFF) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 24px !important;
    border-radius: var(--bs-btn-primary-border-radius, 4px) !important;
    background-color:var(--bs-btn-primary-bgcolor, #D63D00) !important;
    box-shadow: var(--bs-btn-primary-box-shadow, 0px 1px 2px 0px rgba(48, 54, 66, 0.10)) !important;
    border-width: var(--bs-btn-primary-border-width, 0px);
    border-style:var(--bs-btn-primary-border-type, solid);
    border-color:var(--bs-btn-primary-border-color, #D63D00);
}

.btn-request-details:hover,
.btn-camp-details:hover,
.btn-filter:hover {
    color:var(--bs-btn-primary-hover-color, #FFFFFF) !important;
    border-radius: var(--bs-btn-primary-hover-border-radius, 4px) !important;
    background-color:var(--bs-btn-primary-hover-bgcolor, #D63D00) !important;
    box-shadow: var(--bs-btn-primary-hover-box-shadow, 0px 1px 2px 0px rgba(48, 54, 66, 0.10)) !important;
    border-width: var(--bs-btn-primary-hover-border-width, 0px);
    border-style:var(--bs-btn-primary-hover-border-type, solid);
    border-color:var(--bs-btn-primary-hover-border-color, #D63D00);
}

.btn-request-details:hover i,
.btn-camp-details:hover i,
.btn-filter:hover i {
    color:var(--bs-btn-primary-hover-color, #FFFFFF) !important;
}

.btn-request-details:focus,
.btn-camp-details:focus,
.btn-filter:focus {
    color:var(--bs-btn-primary-focus-color, #FFFFFF) !important;
    border-radius: var(--bs-btn-primary-focus-border-radius, 4px) !important;
    background-color:var(--bs-btn-primary-focus-bgcolor, #D63D00) !important;
    box-shadow: var(--bs-btn-primary-focus-box-shadow, 0px 1px 2px 0px rgba(48, 54, 66, 0.10)) !important;
    border-width: var(--bs-btn-primary-focus-border-width, 0px);
    border-style:var(--bs-btn-primary-focus-border-type, solid);
    border-color:var(--bs-btn-primary-focus-border-color, #D63D00);
}

.btn-request-details:disabled,
.btn-camp-details:disabled,
.btn-filter:disabled {
    color:var(--bs-btn-primary-disabled-color, #FFFFFF) !important;
    border-radius: var(--bs-btn-primary-disabled-border-radius, 4px) !important;
    background-color:var(--bs-btn-primary-disabled-bgcolor, #D63D00) !important;
    box-shadow: var(--bs-btn-primary-disabled-box-shadow, 0px 1px 2px 0px rgba(48, 54, 66, 0.10)) !important;
    border-width: var(--bs-btn-primary-disabled-border-width, 0px);
    border-style:var(--bs-btn-primary-disabled-border-type, solid);
    border-color:var(--bs-btn-primary-disabled-border-color, #D63D00);
}




.btn-request-details i,
.btn-camp-details i{
    color:var(--bs-btn-primary-color, #FFFFFF) !important;
    font-size: 20px !important;
}

.req-details-card-body .table TH {
    color:#555D71 !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    line-height: 20px !important;
}

.req-details-card-body .table TD {
    color:#555D71 !important;
    font-weight: 400 !important;
    font-size: 14px !important;
    line-height: 20px !important;
}

.req-details-card-body .table .tdlast,
.req-details-card-body .table .thlast
{
    border-bottom:0px !important;
}

.req-details-bg-success{
    color:#00883E !important;
    background-color:#D2F1DF !important;
    border:1px solid #00883E !important;
    border-radius: 4px !important;
    box-shadow: 0px 1px 2px 0px rgba(48, 54, 66, 0.10) !important;
}

.btn-reqdetails-approve,
.btn-utm-save,
.btn-save {
    display:flex !important;
    padding:8px 16px !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    color: var(--bs-btn-primary-color,#FFFFFF) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 24px !important;
    border-radius: var(--bs-btn-primary-border-radius, 4px) !important;
    background-color: var(--bs-btn-primary-bgcolor,#D63D00) !important;
    box-shadow: var(--bs-btn-primary-box-shadow , 0px 1px 2px 0px rgba(48, 54, 66, 0.10)) !important;
    border-width: var(--bs-btn-primary-border-width, 0px);
    border-style:var(--bs-btn-primary-border-type, solid);
    border-color:var(--bs-btn-primary-border-color, #D63D00);
}

.btn-reqdetails-approve:hover,
.btn-utm-save:hover,
.btn-save:hover {
    color: var(--bs-btn-primary-hover-color,#FFFFFF) !important;
    border-radius: var(--bs-btn-primary-hover-border-radius, 4px) !important;
    background-color: var(--bs-btn-primary-hover-bgcolor,#D63D00) !important;
    box-shadow: var(--bs-btn-primary-hover-box-shadow , 0px 1px 2px 0px rgba(48, 54, 66, 0.10)) !important;
    border-width: var(--bs-btn-primary-hover-border-width, 0px);
    border-style:var(--bs-btn-primary-hover-border-type, solid);
    border-color:var(--bs-btn-primary-hover-border-color, #D63D00);
}

.btn-reqdetails-approve:hover i,
.btn-utm-save:hover i,
.btn-save:hover i {
    color: var(--bs-btn-primary-hover-color,#FFFFFF) !important;
}

.btn-reqdetails-approve:focus,
.btn-utm-save:focus,
.btn-save:focus {
    color: var(--bs-btn-primary-focus-color,#FFFFFF) !important;
    border-radius: var(--bs-btn-primary-focus-border-radius, 4px) !important;
    background-color: var(--bs-btn-primary-focus-bgcolor,#D63D00) !important;
    box-shadow: var(--bs-btn-primary-focus-box-shadow , 0px 1px 2px 0px rgba(48, 54, 66, 0.10)) !important;
    border-width: var(--bs-btn-primary-focus-border-width, 0px);
    border-style:var(--bs-btn-primary-focus-border-type, solid);
    border-color:var(--bs-btn-primary-focus-border-color, #D63D00);
}

.btn-reqdetails-approve:disabled,
.btn-utm-save:disabled,
.btn-save:disabled {
    color: var(--bs-btn-primary-disabled-color,#FFFFFF) !important;
    border-radius: var(--bs-btn-primary-disabled-border-radius, 4px) !important;
    background-color: var(--bs-btn-primary-disabled-bgcolor,#D63D00) !important;
    box-shadow: var(--bs-btn-primary-disabled-box-shadow , 0px 1px 2px 0px rgba(48, 54, 66, 0.10)) !important;
    border-width: var(--bs-btn-primary-disabled-border-width, 0px);
    border-style:var(--bs-btn-primary-disabled-border-type, solid);
    border-color:var(--bs-btn-primary-disabled-border-color, #D63D00);
}


.btn-reqdetails-approve I,
.btn-utm-save I,
.btn-save i {
    color: var(--bs-btn-primary-color,#FFFFFF) !important;
}

.btn-reqdetails-reject,
.btn-utm-cancel,
.btn-camp-archive,
.btn-camp-export,
.btn-cancel {
    display:flex !important;
    padding:8px 14px !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    color:var(--bs-btn-secondary-color, #D63D00) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 24px !important;
    border-radius: var(--bs-btn-secondary-border-radius, 4px) !important;
    background-color: var(--bs-btn-secondary-bgcolor, #FFFFFF) !important;
    border:var(--bs-btn-secondary-border-width, 2px) var(--bs-btn-secondary-border-type, solid) var(--bs-btn-secondary-border-color, #E3E6EF) !important;
}

.btn-reqdetails-reject:hover,
.btn-utm-cancel:hover,
.btn-camp-archive:hover,
.btn-camp-export:hover,
.btn-cancel:hover {
    color:var(--bs-btn-secondary-hover-color, #D63D00) !important;
    border-radius: var(--bs-btn-secondary-hover-border-radius, 4px) !important;
    background-color: var(--bs-btn-secondary-hover-bgcolor, #FFFFFF) !important;
    box-shadow: var(--bs-btn-secondary-hover-box-shadow, 0px 1px 2px 0px rgba(48, 54, 66, 0.10)) !important;
    border:var(--bs-btn-secondary-hover-border-width, 2px) var(--bs-btn-secondary-hover-border-type, solid) var(--bs-btn-secondary-hover-border-color, #E3E6EF) !important;
}

.btn-reqdetails-reject:focus,
.btn-utm-cancel:focus,
.btn-camp-archive:focus,
.btn-camp-export:focus,
.btn-cancel:focus {
    color:var(--bs-btn-secondary-focus-color, #D63D00) !important;
    border-radius: var(--bs-btn-secondary-focus-border-radius, 4px) !important;
    background-color: var(--bs-btn-secondary-focus-bgcolor, #FFFFFF) !important;
    box-shadow: var(--bs-btn-secondary-focus-box-shadow, 0px 1px 2px 0px rgba(48, 54, 66, 0.10)) !important;
    border:var(--bs-btn-secondary-focus-border-width, 2px) var(--bs-btn-secondary-focus-border-type, solid) var(--bs-btn-secondary-focus-border-color, #E3E6EF) !important;
}

.btn-reqdetails-reject:disabled,
.btn-utm-cancel:disabled,
.btn-camp-archive:disabled,
.btn-camp-export:disabled,
.btn-cancel:disabled {
    color:var(--bs-btn-secondary-disabled-color, #D63D00) !important;
    border-radius: var(--bs-btn-secondary-disabled-border-radius, 4px) !important;
    background-color: var(--bs-btn-secondary-disabled-bgcolor, #FFFFFF) !important;
    box-shadow: var(--bs-btn-secondary-disabled-box-shadow, 0px 1px 2px 0px rgba(48, 54, 66, 0.10)) !important;
    border:var(--bs-btn-secondary-disabled-border-width, 2px) var(--bs-btn-secondary-disabled-border-type, solid) var(--bs-btn-secondary-disabled-border-color, #E3E6EF) !important;
}

.btn-reqdetails-reject I,
.btn-utm-cancel I,
.btn-camp-archive I,
.btn-camp-export I,
.btn-cancel I  {
    color: var(--bs-btn-secondary-color, #D63D00) !important;
}

.btn-reqdetails-reject:hover I,
.btn-utm-cancel:hover I,
.btn-camp-archive:hover I,
.btn-camp-export:hover I,
.btn-cancel:hover I  {
    color: var(--bs-btn-secondary-hover-color, #D63D00) !important;
}

.bg-menu-notification{
    background-color:var(--bs-ico-bgcolor, #FFEBF5);
    color:var(--bs-ico-color, #76084C);
    border:1px solid var(--bs-ico-border-color, #FFFFFF);
}

.event-desc,
.event-desc P,
.event-list-desc,
.event-list-desc P{
    color:#555D71 !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 20px !important;
}

.border-info {
    border-color:var(--bs-card-header-border-bottom-color, #76084C)!important;
}

.nav-tabs-custom .nav-item .nav-link.active:after {
    background:var(--bs-tabs-border-bottom-color, #76084C) !important;
}

.not-event-list{
    margin:0px !important;
    padding:0px !important;
}

.not-accordion-body{
    background-color:#FFFFFF !important;
    padding:10px !important;
    border:1px solid #E3E6EF !important;
    font-size: 14px !important;
    margin-top:10px !important;

}

.not-card-body{
    background-color:#F8F9FB !important;
    border:1px solid #E3E6EF !important;
    border-radius: 4px !important;
    box-shadow: 0px 1px 2px 0px rgba(48, 54, 66, 0.10) !important;
}

.not-details-ico{
    display: flex !important;
    width: 32px !important;
    height: 32px !important;
    padding:4px !important;
    justify-content: center !important;
    align-items: center !important;
    color:var(--bs-ico-color, #76084C) !important;
    font-size: 24px !important;
    line-height: 32px !important;
    border-radius: 16px !important;
    border:1px solid var(--bs-ico-border-color, #FFFFFF) !important;
    background-color:var(--bs-ico-bgcolor, #FFEBF5) !important;
}

.not-details-ico I {
    color:var(--bs-ico-color, #76084C) !important;
}

.not-details-title{
    color:var(--h4-color, #870B58) !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    line-height: 28px !important;
}

.spotlightContainer{
    background-color:rgba(57,62,93,0.7) !important;
}

.spotlightContainer article H5 {
    border-bottom:1px solid #FFF;
    color:#FFF !important;
    text-align: left;
    line-height: 1.5em !important;
    font-size:1.2vw !important;
    word-wrap: normal !important;
}

@media screen and (max-width: 768px){
    .spotlightContainer article H5 {
        font-size: 14px !important;
    }
}

@media screen and (min-width: 1224px){
    .spotlightContainer article H5 {
        font-size: 18px !important;
    }
}

@media screen and (min-width: 1824px){
    .spotlightContainer article H5 {
        font-size: 22px !important;
    }
}

.btn-video{
    display:inline-block !important;
    width: 40px !important;
    height: 40px !important;
    padding:10px !important;
    align-items: right !important;
    justify-items: right !important;
    color:var(--bs-btn-secondary-color, #D63D00) !important;
    font-size: 16px !important;
    line-height: 24px !important;
    border-radius: 4px !important;
    border:1px solid #E3E6EF !important;
    background-color:#FFFFFF !important;
    box-shadow: 0px 1px 2px 0px rgba(48, 54, 66, 0.10) !important;
}

.btn-video i {
    color:var(--bs-btn-secondary-color, #D63D00) !important;
    font-size: 20px !important;
}


.badge {
    --bs-badge-padding-y:0.6em !important;
}

.badge-product {
    background-color:#e7eef4cc;
    color:#000 !important;
    font-size: .75rem !important;
    font-weight: 600 !important;
    line-height: 1rem !important;
}

.pdtImg {
    opacity: 0.8;
    border-radius: 15px !important;
}

@media (min-width: 3000px){
    .col-xl-3 {
        width:10% !important;
    }

    .col-lg-4 {
        width:20% !important;
    }
}

.plan-btn {
    position: relative;
    padding-bottom:20px;
}

/*News block */
.verti-timeline .event-list {
    padding-bottom: 20px !important;
}

/*Event carousel indicators*/
.carousel-indicators {
    margin-bottom: 0px !important;
}

.dimmer {
    position:relative;
}

.spinner2 {
    margin: 100px auto;
    width: 40px;
    height: 40px;
    position: relative;
}

.spotlightContainer{
    overflow: hidden;
}

.spotlightContainer article {
    position:absolute;
    bottom:0;
    z-index:1;
    padding:10%;
    display: block;
    max-width: 180px;
}

.spotlightContainer img {
    opacity:0.8;
    transition: all 2s ease;
}

.spotlightContainer:hover img {
    opacity:0.6;
    transition: all 1s ease;
}

.spotlightContainer P {
    position: absolute;
    width: 95%;
    height: 50px;
    bottom:0;
    z-index: 1;
    opacity:0;
    transition: all 0.2s ease-in-out;
    vertical-align: middle;
    text-align: right;
}

.spotlightContainer:hover P {
    opacity: 100%;
}

/*Whitepapers page*/
.whitepapersContainer img {
    opacity: 1;
    transition: all 1s ease;
    }
    
    .whitepapersContainer:hover img {
    opacity: 1;
    }
    
    /*End Whitepapers page*/

/*SSO page*/

#sso-list .card {
    max-height: 350px;
    height: 350px;
}

/*Login*/

.profile-user-wid {
    margin-top:15px !important;
}

/*Vacature overzicht*/

.vacTitle {
    display: block !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  
  .vacEntiteit{
      display: block !important;
      width:200px !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
      white-space: nowrap !important;
  }

.dropdown-submenu {
    position: relative;
}

.dropdown-submenu>.dropdown-menu {
    top: 0;
    left: -100%;
    margin-top: -6px;
    margin-left: -1px;
    -webkit-border-radius: 0 6px 6px 6px;
    -moz-border-radius: 0 6px 6px;
    border-radius: 0 6px 6px 6px;
}

.dropdown-submenu:hover>.dropdown-menu {
    display: block;
}

.dropdown-submenu>a:after {
    display: block;
    content: " ";
    float: right;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
    border-width: 5px 0 5px 5px;
    border-left-color: #ccc;
    margin-top: 5px;
    margin-right: -10px;
}

.dropdown-submenu:hover>a:after {
    border-left-color: #fff;
}

.dropdown-submenu.pull-left {
    float: none;
}

.dropdown-submenu.pull-left>.dropdown-menu {
    right: 100%;
    margin-right: -10px;
    -webkit-border-radius: 6px 0 6px 6px;
    -moz-border-radius: 6px 0 6px 6px;
    border-radius: 6px 0 6px 6px;
}

.progress-sm {
    height: 3px !important;
}

.spotlightContainer {
    border-radius:15px !important;
    box-shadow: 0px 2px 3px #999999 !important;
}

.tb-td-left{
    align-items: flex-start !important;
    text-align: start !important;
    width: 75%;
}

.tb-td-right{
    align-items: flex-end !important;
    text-align: end !important;
    width: 20%;
}

.form-label {
    font-size:.875rem !important;
    font-weight: 600;
    margin-bottom:.25rem;
}

.nav {
    --bs-nav-link-padding-y: 0.20rem !important;
}

.h-80 {
    height:80px !important;
}

.carousel-vertical {
    position:relative !important;
    top:20px !important;
    height: 90% !important;
}

.carousel-item {
    align-items: center !important;
    justify-content: center !important;
}

.vertical.carousel .carousel-item {
    overflow: hidden  !important;
}

.vertical.carousel .carousel-item-next:not(.carousel-item-start),
.vertical.carousel .active.carousel-item-end {
    transform: translateY(100%)  !important;
}

.vertical.carousel .carousel-item-prev:not(.carousel-item-end),
.vertical.carousel .active.carousel-item-start {
    transform: translateY(-100%)  !important;
}

.vertical.carousel .carousel-indicators {
    top: -60px  !important;
    left: unset  !important;

    margin-left: unset !important;
    margin-right: 1rem  !important;

    flex-direction: column  !important;
}

.vertical.carousel .carousel-indicators [data-bs-target] {
    height: 30px  !important;
    width: 3px  !important;
}

.vertical.carousel .carousel-control-prev,
.vertical.carousel .carousel-control-next {
    width: 100%  !important;
    height: 60px  !important;
    top: 50% !important;
    transform: translateY(-50%);
    align-items: center !important;
    justify-content: center !important;
}

.vertical.carousel .carousel-control-prev {
    top:-20px !important;
    bottom:unset !important;
}

.vertical.carousel .carousel-control-prev-icon,
.vertical.carousel .carousel-control-next-icon {
    transform: rotateZ(90deg) !important;
}

.vertical.carousel .carousel-control-next {
    top: unset  !important;
    bottom: -65px  !important;
}

.carousel-control-prev-icon {
    background-image: url(../images/Icons/arrow-left-1-linear.svg) !important;
  }
  
.carousel-control-next-icon {
      background-image: url(../images/Icons/arrow-right-1-linear.svg) !important;
}

.indicators-reference {
    bottom:-30px !important;
}

.font-size-30 {
    font-size: 30px !important;
}

/*Vacature overzicht*/

.vacTitle {
    display: block !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  
  .vacEntiteit{
      display: block !important;
      width:200px !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
      white-space: nowrap !important;
  }
  
  /*Vacature details*/
  .nav-tabs {
      border-bottom-width: 0px !important;
  }
  
  .nav-tabs .nav-link.active {
      border-left-color: #50a5f1 !important;
      border-top-color: #50a5f1 !important;
      border-right-color: #50a5f1 !important;
      border-bottom-width: 0px !important;
      border-top-left-radius: 0px !important;
      border-top-right-radius: 0px !important;
  }
  
  .nav-tabs .nav-link {
      border-bottom-color: #50a5f1 !important;
  }
  
  .requestLink {
      color:#3F5364 !important;
  }
  
  .requestLink:hover {
      color:#870B58 !important;
  }
  
  .btn-ref {
      background-color:#50a5f1 !important;
  }

.umbraco-forms-hidden {
    display: none;
}

.search-ico {
    position: absolute !important;
    left: 13px;
    top: 0px;
    line-height: 38px;
    font-size: 16px;
}

  .w-10 {
    width:10% !important;
  }

  .labelrequired .form-label:after {
    color:#D00;
    content: "*";
    position: absolute;
    margin-left: 8px;
    top:0px;
  }

  .font-size-60 {
    font-size:60px !important;
  }

  /*Test 1 ERP*/

  .theme-tab {
    position:relative;
  }

  .theme-tab .tab-title {
    text-align:center;
    font-size: calc(15px + (18-15)*((100vw - 320px) / (1920-320)));
    margin-bottom:30px;
    margin-top: -6px;
  }

  .theme-tab .tab-title li {
    padding-left:25px;
    padding-right:25px;
    display: inline-block;
  }

  .theme-tab .tab-title a {
    color:#2d2a25;
    text-transform: uppercase;
  }

  .theme-tab .tab-title .current a{
    color: #EC8951;
    font-weight: 500;
  }

  .theme-tab .tab-content[style="display: block;"] .basic-product {
    animation: zoomin 300ms ease-in-out;
  }

  .basic-product {
    position: relative;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    border-radius:10px;
    border:1px solid #E8EbEE;
    box-shadow: 0px 8px 16px 0px #1E3B5926 !important;

}

.basic-product .img-wrapper{
    position: relative;
    width: 100%; /* Let the wrapper take up the full width available */
    height: 0;
    padding-bottom: 50%; /* Adjust this value based on the aspect ratio you want */
    overflow: hidden;
    background-color: #f0f0f0; /* Optional: background color for empty space */
    border:1px solid #e9e9e9;
    border-radius: 10px;
}

.basic-product .img-wrapper img{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Centers the image inside the wrapper */
    max-width: 100%; /* Ensures the image doesn't overflow the wrapper */
    max-height: 100%; /* Ensures the image is contained within the wrapper */
    object-fit: contain; /* Ensures the aspect ratio is maintained */
    padding:5px;
}

.basic-product.sold-out .img-wrapper img {
    -webkit-filter: grayscale(100);
    filter: grayscale(100);
    pointer-events: none;
    width: 600px; /* Set fixed width */
    height: 300px !important; /* Set fixed height */
    object-fit: cover; /* Ensures the image fills the area while cropping excess */
    display: block;
    min-height: 300px !important;
}

.basic-product H4.price {
    font-size: calc(15px + (18 - 15) * ((100vw - 320px) / (1920 - 320)));
    color: #222 !important;
    font-weight: 500 !important;
    margin-bottom: 0;
    -webkit-transition: all 0.3s ease-in-out !important;
    transition: all 0.3s ease-in-out;
    gap: 8px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

.basic-product .price .discounted-price {
    font-weight: 500;
    color: var(--theme-color);
    display: inline-block;
    margin-bottom: 0;
    font-size: calc(14px + (16 - 14) * ((100vw - 320px) / (1920 - 320)))
}

.basic-product .price .old-price {
    text-decoration: line-through;
    display: inline-block;
    margin-right:8px;
    font-weight: 400;
    color: #A0A0A0;
    font-size: 14px;
    line-height: 22px;
}

.basic-product .product-title {
    line-height: 1.2;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    text-transform: capitalize;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    font-size: calc(12px + (14 - 12) * ((100vw - 320px) / (1920 - 320)));
    color: #222;
    font-weight: 500;
    display: block
}

.basic-product .product-title-ov {
    line-height: 1.7;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    text-overflow: ellipsis;
    white-space: wrap;
    overflow: hidden;
    font-size: calc(14px + (16 - 14) * ((100vw - 320px) / (1920 - 320)));
    color: #1E3B59;
    font-weight: 500;
    display: block;
    text-align: center;
    padding-top:15px !important;
}

.product-title {
    line-height: 1.7;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    text-overflow: ellipsis;
    white-space: wrap;
    overflow: hidden;
    font-size: calc(14px + (16 - 14) * ((100vw - 320px) / (1920 - 320)));
    color: #1E3B59;
    font-weight: 600;
    display: block;
    text-align: left;
}


.basic-product .img-wrapper {
    position: relative;
    overflow: hidden;
    z-index: 0;
    background-color: #f8f8f8
}

.basic-product .img-wrapper>app-image-variant {
    height: 100%
}

.basic-product .img-wrapper .zoom {
    overflow: hidden;
    width: 100%;
    height: 100%
}

.basic-product .img-wrapper .zoom img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover
}

.basic-product .cart-info,
.basic-product .cart-info-ov {
    position: absolute;
    bottom: 12px;
    margin: 0 auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    right: 12px;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    opacity: 0;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    gap: 8px
}

.basic-product .cart-info-ov {
    -ms-flex-direction: column !important;
    flex-direction: column !important;
    border:1px solid #E9E9E9;
    border-radius:10px;
    background-color:#FFFFFF;
}

@media (max-width: 767px) {
    .basic-product .cart-info,
    .basic-product .cart-info-ov {
        opacity:1;
        right: 8px;
        gap: 4px
    }
}

.basic-product .cart-info button,
.basic-product .cart-info-ov button {
    background: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    border: none;
    padding: 0
}

.basic-product .cart-info button,
.basic-product .cart-info a,
.basic-product .cart-info-ov button,
.basic-product .cart-info-ov a {
    width: calc(25px + (35 - 25) * ((100vw - 320px) / (1920 - 320)));
    height: calc(25px + (35 - 25) * ((100vw - 320px) / (1920 - 320)));
    border-radius: 100%;
    background-color: #fff;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-shadow: 0px 5px 12px 0px rgba(155,155,155,0.05);
    box-shadow: 0px 5px 12px 0px rgba(155,155,155,0.05)
}

@media (max-width: 767px) {
    .basic-product .cart-info button,
    .basic-product .cart-info a,
    .basic-product .cart-info-ov button,
    .basic-product .cart-info-ov a {
        -webkit-animation:none !important;
        animation: none !important
    }
}

.basic-product .cart-info button span,
.basic-product .cart-info a span,
.basic-product .cart-info-ov button span,
.basic-product .cart-info-ov a span {
    display: none
}

.basic-product .cart-info i,
.basic-product .cart-info-ov i {
    color: #848484;
    font-size: calc(15px + (18 - 15) * ((100vw - 320px) / (1920 - 320)));
    display: block
}

.basic-product .product-detail {
    margin-top: 15px
}

.basic-product .product-detail select {
    margin-top: 6px
}

.basic-product .product-detail h6 {
    display: block;
    overflow: hidden;
    line-height: calc(19px + (24 - 19) * ((100vw - 320px) / (1920 - 320)));
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    width: 100%;
    margin-top: 2px
}

.basic-product .product-detail h6 a {
    color: #777777 !important;
    
}

@media (max-width: 576px) {
    .basic-product .product-detail h6 {
        margin-bottom:3px;
        margin-top: 2px;
        font-size: 13px
    }
}

.basic-product .product-detail h5 {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    width: 100%
}

.basic-product .product-detail h5 a {
    color: #777777
}

@media (max-width: 576px) {
    .basic-product .product-detail h5 {
        margin-bottom:0
    }
}

.basic-product .ribbon {
    position: absolute;
    left: -5px;
    top: -5px;
    z-index: 1;
    overflow: hidden;
    width: 75px;
    height: 75px;
    text-align: right;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out
}

.basic-product .ribbon span {
    font-size: calc(10px + (12 - 10) * ((100vw - 320px) / (1920 - 320)));
    font-weight: bold;
    color: #eee;
    text-transform: capitalize;
    text-align: center;
    line-height: calc(20px + (25 - 20) * ((100vw - 320px) / (1920 - 320)));
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    width: 105px;
    display: block;
    background: #EC8951;
    position: absolute;
    top: 19px;
    left: -21px
}

.basic-product .hover-action {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 8px;
    margin-top: -8px
}

@media (max-width: 767px) {
    .basic-product .hover-action {
        gap:4px;
        margin-top: -4px
    }
}

.basic-product:hover .cart-info,
.basic-product:hover .cart-info-ov {
    opacity: 1;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out
}

.basic-product:hover .list-btn-main {
    opacity: 1;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out
}

.basic-product:hover .cart-info button,
.basic-product:hover .cart-info-ov button {
    -webkit-animation: fadeInRight 300ms ease-in-out;
    animation: fadeInRight 300ms ease-in-out
}

.basic-product:hover .cart-info .hover-action li:nth-child(2) a, 
.basic-product:hover .cart-info-ov .hover-action li:nth-child(2) a {
    -webkit-animation: fadeInRight 500ms ease-in-out;
    animation: fadeInRight 500ms ease-in-out
}

.basic-product:hover .cart-info .hover-action li:nth-child(3) a,
.basic-product:hover .cart-info-ov .hover-action li:nth-child(3) a {
    -webkit-animation: fadeInRight 700ms ease-in-out;
    animation: fadeInRight 700ms ease-in-out
}

.basic-product:hover .cart-info .hover-action li:nth-child(4) a, 
.basic-product:hover .cart-info-ov .hover-action li:nth-child(4) a {
    -webkit-animation: fadeInRight 1000ms ease-in-out;
    animation: fadeInRight 1000ms ease-in-out
}

.basic-product:hover .product-action button {
    color: var(--theme-color)
}

.basic-product:hover .img-wrapper .quick-option {
    -webkit-transform: translate(-50%, -50%) scale(1);
    transform: translate(-50%, -50%) scale(1)
}

.basic-product:hover .img-wrapper .addto-cart-bottom {
    bottom: 16px
}

@media (max-width: 576px) {
    .basic-product:hover .img-wrapper .addto-cart-bottom {
        bottom:10px
    }
}

.basic-product:hover .flip .back {
    opacity: 1;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    -webkit-transform: translateX(0);
    transform: translateX(0)
}

.basic-product.theme-product-1 {
    background-color: #fff;
    overflow: hidden;
    padding: calc(6px + (10 - 6) * ((100vw - 320px) / (1920 - 320)));
    margin-bottom: 1px;
    box-sizing: 0px 2px 3px #999;
}

.basic-product.theme-product-1 .brand-w-color {
    margin-bottom: 8px;
}

.basic-product.theme-product-1 .product-detail {
    margin-top: 0;
    padding: 0
}

.basic-product.theme-product-1 .product-detail>div {
    padding: calc(10px + (15 - 10) * ((100vw - 320px) / (1920 - 320))) 0;
}

.basic-product.theme-product-1 .cart-info,
.basic-product.theme-product-1 .cart-info-ov {
    top: calc(5px + (10 - 5) * ((100vw - 320px) / (1920 - 320)));
    bottom: unset;
    opacity: 1;
    right: calc(5px + (10 - 5) * ((100vw - 320px) / (1920 - 320)))
}

.basic-product.theme-product-1 .cart-info button,
.basic-product.theme-product-1 .cart-info a,
.basic-product.theme-product-1 .cart-info-ov button,
.basic-product.theme-product-1 .cart-info-ov a {
    width: calc(26px + (32 - 26) * ((100vw - 320px) / (1920 - 320)));
    height: calc(26px + (32 - 26) * ((100vw - 320px) / (1920 - 320)));
    border: none
}

.basic-product.theme-product-1 .cart-info button i,
.basic-product.theme-product-1 .cart-info a i,
.basic-product.theme-product-1 .cart-info-ov button i,
.basic-product.theme-product-1 .cart-info-ov a i {
    color: var(--bs-webshop-icon-color, #D63D00);
    font-size: calc(14px + (17 - 14) * ((100vw - 320px) / (1920 - 320)))
}

.basic-product.theme-product-1 .cart-info button,
.basic-product.theme-product-1 .cart-info-ov button {
    opacity: 0
}

@media (max-width: 767px) {
    .basic-product.theme-product-1 .cart-info button,
    .basic-product.theme-product-1 .cart-info-ov button {
        opacity:1
    }
}

.basic-product.theme-product-1 .cart-info a,
.basic-product.theme-product-1 .cart-info-ov a {
    opacity: 1;
}

@media (max-width: 767px) {
    .basic-product.theme-product-1 .cart-info a,
    .basic-product.theme-product-1 .cart-info-ov a {
        opacity:1
    }
}

.pdtActivated {
    border:var(--pdt-selected-border-width, 2px) solid var(--pdt-selected-border-color, #34c38f);
}

.basic-product.theme-product-1 .cart-info a.wishlist-icon,
.basic-product.theme-product-1 .cart-info-ov a.wishlist-icon {
    opacity: 1;
    background-color:#FFFFFF;
    border:0px solid #D63D00;
    cursor: pointer;
}

.basic-product.theme-product-1 .cart-info-ov a.wishlist-icon {
    border:1px solid #E9E9E9;
    margin:3px;
}

.basic-product.theme-product-1 .hover-action {
    margin-top: 0
}

.basic-product.theme-product-1 .hover-action li:empty {
    display: none
}

.basic-product.theme-product-1 .hover-action li button {
    -webkit-transition: unset;
    transition: unset
}

.basic-product.theme-product-1:hover .product-detail .offer-panel {
    -webkit-animation: marquee-discount 8s linear infinite;
    animation: marquee-discount 8s linear infinite
}

.basic-product.theme-product-1:hover .product-detail .offer-panel li+li {
    opacity: 1;
    visibility: visible
}

.basic-product.theme-product-1:hover .cart-info .wishlist-icon,
.basic-product.theme-product-1:hover .cart-info-ov .wishlist-icon {
    -webkit-animation: none;
    animation: none
}

.basic-product.theme-product-1:hover .cart-info button,
.basic-product.theme-product-1:hover .cart-info-ov button {
    -webkit-animation: fadeInDown 500ms ease-in-out;
    animation: fadeInDown 500ms ease-in-out;
    opacity: 1
}

.basic-product.theme-product-1:hover .cart-info a {
    opacity: 1;
    background-color:#EbEbEb;
}

.basic-product.theme-product-1:hover .cart-info-ov a {
    opacity: 1;
}

.basic-product.theme-product-1:hover .cart-info a:nth-child(3),
.basic-product.theme-product-1:hover .cart-info-ov a:nth-child(3) {
    -webkit-animation: fadeInDown 700ms ease-in-out;
    animation: fadeInDown 700ms ease-in-out
}

.basic-product.theme-product-1:hover .cart-info a:nth-child(4),
.basic-product.theme-product-1:hover .cart-info-ov a:nth-child(4) {
    -webkit-animation: fadeInDown 1000ms ease-in-out;
    animation: fadeInDown 1000ms ease-in-out
}

.basic-product.theme-product-1:hover .hover-action li button {
    -webkit-animation: fadeInDown 300ms ease-in-out;
    animation: fadeInDown 300ms ease-in-out;
}

.basic-product.theme-product-1:hover .hover-action li:nth-child(2) a {
    -webkit-animation: fadeInDown 500ms ease-in-out;
    animation: fadeInDown 500ms ease-in-out;
    opacity: 1
}

.basic-product.theme-product-1:hover .hover-action li:nth-child(3) a {
    -webkit-animation: fadeInDown 700ms ease-in-out;
    animation: fadeInDown 700ms ease-in-out;
    opacity: 1
}

.basic-product.theme-product-1:hover .hover-action li:nth-child(4) a {
    -webkit-animation: fadeInDown 1000ms ease-in-out;
    animation: fadeInDown 1000ms ease-in-out;
    opacity:1
}

.basic-product.theme-product-1:hover .list-btn-main {
    opacity:1;
    transform: translate(0);
    visibility: visible;
}

/*Filter header block*/

.card-shop-filter {
    margin-bottom:0px !important;
    box-shadow: none !important;
    border-radius: none !important;
    border: none !important;
}

#activeFilterLabel {
    display:none;
}

.card-filter {
    margin-bottom:5px !important;
}

.tf-shop-control {
    display: grid;
    grid-template-columns: 40% 20% 40%;
}

.tf-shop-control-filter {
    display: grid;
    grid-template-columns: 15% 75% 10%;
    align-items: center;
}

.tf-shop-control-filter .tf-control-sorting {
    grid-column: 3;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    justify-self: end;
    position: relative;
    padding-bottom:5px;
}

.tf-shop-control-filter .tf-control-sorting .btn-shop-sorting{
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    border-radius: 10px;
    padding:10px;
    font-size: 14px;
    font-weight: 500;
    text-decoration: underline;
}

.tf-shop-control .tf-control-filter {
    display: flex;
    align-items: center;
    gap: 16px;
}

.tf-shop-control .tf-control-filter .shop-sale-text.active .icon {
    color: red;
}

.tf-shop-control .shop-sale-text {
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    border:1px solid #e9e9e9;
    border-radius: 10px;
    padding:10px;
    box-shadow: 0px 2px 4px 0px #1E3B591F;
}

.tf-shop-control .shop-sale-text .icon {
    font-size: 24px;
    color: red;
}

.btn-icon,
.btn-icon-product{
    display: flex;
    align-items: center;
    cursor: pointer;
    border:1px solid #FFFFFF;
    border-radius: 10px;
    box-shadow: 0 .125rem .25rem rgba(30, 59, 89, .12) !important;
    border-radius:var(--btn-icon-border-radius,.625rem) !important;
    border:1px solid transparent;
    /*padding: .5rem .5rem !important;*/
}

.btn-icon:hover{
    color:#1E3B59;
    background-color:#E8EBEE;
    border-color:#E8EBEE;
    box-shadow: 0 .125rem .25rem rgba(30, 59, 89, .12);
}

.btn-icon-product {
    padding: 0.47rem 0.75rem !important;
    background-color:#3FA9F5;
    font-size: 0.8125rem;
    font-weight: 400;
    line-height: 1.5;
}

.text-truncate-2-lines{
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.card-product .product-footer-icon {
    opacity:0 !important;
}

.card-product:hover .product-footer-icon {
    opacity:1 !important;
    cursor: pointer;
}

.btn-icon i{
    font-size: 20px;
    color: #1E3B59;
}

.btn-icon-product i {
    font-size: 20px;
    color: #FFFFFF;
}

#btnFilterAdvice.active,
#btnFilterFavorite.active,
#btnFilterStatusActive.active,
#btnFilterStatusDraft.active,
#btnFilterStatusArchive.active {
    border-color:#000000;
    background-color:#E8EBEE;
}

#btnFilterAdvice.active i,
#btnFilterFavorite.active i {
    color:#D63D00 !important;
}

.tf-shop-control .search-container {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    justify-self: end;
    position: relative;
    max-width: 400px; /* Adjust this width as needed */
    height: 50px;
}

.tf-shop-control .basket-container{
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    justify-self: end;
    position: relative;
    height: 50px;
}

.tf-shop-control .tf-control-layout {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    list-style: none;
    margin-bottom:0px;
}

.tf-shop-control .tf-control-layout .item {
    cursor: pointer
}

.tf-shop-control .tf-control-layout .tf-view-layout-switch svg circle,.tf-shop-control .tf-control-layout .tf-view-layout-switch svg rect {
    transition: all .3s ease
}

.tf-shop-control .tf-control-layout .tf-view-layout-switch.active svg circle,.tf-shop-control .tf-control-layout .tf-view-layout-switch.active svg rect {
    fill: #000000;
}

P.text-caption-1,
span.text-caption-1 {
    line-height: 22px !important;
    font-size: 14px !important;
}

.tf-grid-layout {
    display: grid;
    grid-column-gap: 15px;
    column-gap: 15px;
    grid-row-gap: 30px;
    row-gap: 30px
}

.tf-grid-layout.tf-col-2 {
    grid-template-columns: 1fr 1fr
}

.tf-grid-layout.tf-col-3 {
    grid-template-columns: repeat(3,1fr)
}

.tf-grid-layout.tf-col-4 {
    grid-template-columns: repeat(4,1fr)
}

.tf-grid-layout.tf-col-5 {
    grid-template-columns: repeat(5,1fr)
}

.tf-grid-layout.tf-col-6 {
    grid-template-columns: repeat(6,1fr)
}

.tf-grid-layout.tf-col-7 {
    grid-template-columns: repeat(7,1fr)
}

/* Tablet: 3 columns */
@media (max-width: 1024px) {
  .tf-grid-layout.tf-col-4 {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Mobile: 2 columns */
@media (max-width: 640px) {
  .tf-grid-layout.tf-col-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

.tf-grid-layout .wg-pagination {
    grid-column: 1/-1;
    width: 100%
}

.tf-grid-layout .wd-load {
    grid-column: 1/-1
}

.tf-grid-layout-v2 {
    display: grid;
    grid-gap: 15px;
    gap: 15px
}

.basic-product.theme-product-1 .list-btn-main {
    position:absolute;
    z-index:5;
    transition: .3s ease-out 0s;
    display: flex;
    align-items: center;
    gap: 4px;
    opacity: 0;
    bottom:8px;
    left:5px;
    right:5px;
}

.basic-product.theme-product-1 .list-btn-main-pdt {
    right:60px !important;
}

.basic-product.theme-product-1 .list-btn-main .btn-main-product {
    flex-grow: 1;
    align-items: center;
    border: 1px solid transparent;
    text-transform: uppercase;
    background-color:#FFF;
    color: #181818;
    border-radius: 44px;
    transition: all .4s ease;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
    text-align: center;
    white-space: nowrap;
}

/*Canvas Filter product shop*/

.canvas-filter {
    max-width: 320px;
}

@media(min-width: 768px) {
    .canvas-filter {
        max-width: 400px;
    }
}

.canvas-wrapper {
    padding:0;
    isolation: isolate;
    height: 100%;
    width: 100%;
    max-height: none;
    display: grid;
    grid-auto-rows: auto minmax(0, 1fr) auto;
    align-content: start;
}

.canvas-filter .canvas-header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    background-color: #F7F7F7;
    gap:8px;
}

@media(min-width: 768px) {
    .canvas-filter .canvas-header {
        padding:15px 32px;
    }
}

.canvas-filter .canvas-header H5 {
    flex-grow: 1;
}

.canvas-filter .canvas-body {
    background-color:#ffffff;
    padding: 15px 20px;
    overscroll-behavior-y: contain;
    overflow-y: auto;
}

@media(min-width: 768px) {
    .canvas-filter .canvas-body {
        padding:20px 32px;
    }
}

.widget-facet:not(:last-child) {
    margin-bottom:10px;
    border-bottom:1px solid #E9E9E9;
}

@media(min-width: 768px) {
    .widget-facet {
        padding-bottom:15px;
    }
}

.widget-facet .facet-title {
    margin-bottom:16px;
}

.widget-facet.facet-mediacanal li:not(:last-child),
.widget-facet.facet-function li:not(:last-child),
.widget-facet.facet-education li:not(:last-child),
.widget-facet.facet-province li:not(:last-child) {
    margin-bottom:5px;
}

.widget-facet .facet-content {
    list-style: none;
}

.widget-facet .facet-content .mediacanal-item,
.widget-facet .facet-content .function-item,
.widget-facet .facet-content .education-item,
.widget-facet .facet-content .province-item,
.widget-facet .facet-content .userfileter-item {
    color:#D63D00;
    font-size:14px;
    font-weight: 500;
    line-height: 20px;
    display: flex;
    align-items: center;
    gap:4px;
}

.widget-facet .facet-content .mediacanal-item i,
.widget-facet .facet-content .function-item i,
.widget-facet .facet-content .education-item i,
.widget-facet .facet-content .province-item i,
.widget-facet .facet-content .userfileter-item i {
    color:#D63D00;
}

.widget-facet .nouserfilter {
    display:none;
}

.badge-filter {
    background-color:#CCF0FB;
    color:#00495F;
    border-radius: 10px !important;
    padding:10px !important;
}

.canvas-filter .canvas-bottom {
    background-color: #F7F7F7;
    box-shadow: 0 5 18 5 #40485726;
    padding:12px 20px;
    align-items: center;
}

.canvas-filter .canvas-bottom .btn-cancel {
    width: 100%;
}

@media(min-width: 768px) {
    .canvas-fitler .canvas-bottom {
        padding:18px 32px;
    }
}

/*Slider basket*/
.card-product-list {
    flex: 1 1 auto;
    overflow-y: auto;
    padding-bottom: 10px; /* Prevent overlap with footer */
}

/* Keep footer always at the bottom */

.canvas-shopping-cart {
    height: 100% !important;
}

.canvas-shopping-cart .canvas-wrapper {
    display: flex;
    height: 100%;
}

.modal-content {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.canvas-header {
    flex-shrink:0;
}

.canvas-body {
    flex:1 1 auto;
    min-height: 0;
}

.table-responsive {
    overflow-x:hidden;
}

.canvas-footer {
    flex-shrink: 0;
    margin-top:auto;
}

.basket-footer ul {
    list-style: none !important;
    padding-left: 0px !important;
}

/* Ensure footer stays visible */
.card-product-item-cost,
.card-product-item-checkout {
    position: sticky;
    bottom: 0;
    background: white;
    z-index: 10;
    padding: 10px 0;
    border-top: 1px solid #ddd; /* Optional: add a separator */
}

/*quickAdd modal*/

#quickView {
    z-index:9999 !important;
}

.modal-quick-add .modal-content .modal-body .product-image img,
.quickView .modal-content .modal-body .product-image img {
    max-width: 100%;
    width:160px;
    height: 80px;
    transform: scale(1);
    vertical-align: middle;
}

.product-quantity {
    width: 100px;
}

.bootstrap-touchspin-up,
.bootstrap-touchspin-down {
    background-color:var(--input-bgcolor, #E94E0F) !important;
    border-color:var(--input-border-color, #E94E0F) !important;
}

.form-check-input:checked {
    background-color:var(--input-bgcolor, #E94E0F) !important;
    border-color:var(--input-border-color, #E94E0F) !important;
}

.bg-discount {
    background-color: red;
    min-width: 50px;
}

/*Shopping card*/
.card-product-list {
    list-style: none;
    padding-left:0;
}

.card-product-item {
    padding-bottom:5px !important;
    padding-top:5px !important;
    padding-left:5px !important; 
}

.bg-item {
    background-color:#E8EbEE !important; 
}

.table {
    --bs-table-bg:transparent !important;
}


.table td.card-td-item {
    font-weight: 500;
    font-size: 14px;
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
}

.table td.card-td-item,
.table td.card-td-sub-item,
.table td.card-td-remove,
.table td.card-td-sub-item-price {
    padding:0 !important;
    padding-bottom:5px !important;
    padding-left:5px !important;
    vertical-align: top !important;
}

.table td.card-td-remove {
    width:22px !important;
    text-align: end !important;
}

.table td.card-td-remove I {
    font-size:14px;
    color:#D63D00;
    width:22px !important;
}

.table th.card-th-sub-item {
    color:#181818;
    font-weight: 300;
}

.table td.card-td-sub-item-price {
    color:#181818;
    font-weight: 500;
    width:60px !important;
    text-align: end;
    vertical-align: top !important;
}

.table th.card-th-sub-item-subtotalprice {
    text-align:start;
    padding-right: 60px;
    font-weight: 700;
    font-size: 20px;
}

.card-product-list-header {
    
    vertical-align: middle;
    text-align: start;
}

.card-product-list-header H6 {
    padding-top:8px;
}

.card-product-list-header H6 span {
    color:#181818;
    font-size:11px;
    font-weight: 300;
}

.form-check-primary .form-check-input:checked {
    background-color:#D63D00;
    border-color:#D63D00;
}

.ico-coupon-cancel,
.ico-coupon-add {
    font-size:12px;
}

.ico-coupon-add {
    color:#FFFFFF;
}

.ico-coupon-cancel {
    color:#D63D00;
}

.btn-coupon,
.btn-coupon:hover {
    font-size:10px !important;
    font-weight:100;
    line-height: 20px !important;
}

.couponLink {
    align-items: end;
}

.card-th-coupon{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.editable-click, 
a.editable-click {
    color:#D63D00;
    border-bottom:1px solid #D63D00;
}

/*css float navigation*/

#floating-pagination-wrapper {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background:#ffffff;
    color: white;
    padding: 5px 5px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 15px;
    border:1px solid #ebebeb;
    box-shadow: 0px 8px 16px 0px #1E3B5926;
    z-index: 99;
}

.floating-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
}

.page-arrow {
    background: transparent;
    border: none;
    color: #D63D00;
    font-size: 18px;
    cursor: pointer;
    width:36px;
    height: 36px;
    border-radius: 10px;
    border:1px solid #E8EBEE;
    display: flex;
    align-items: center;
}

.page-arrow i {
    color:#D63D00;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    width:20px;
    height: 20px;
}

.page-arrow:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

#pagination-info {
    font-size: 14px;
    color:#1E3B59;
}

/*css counter favorite*/

.shop-sale-text .badge,
.basket-container .badge {
    padding: 0.25em 0.5em;  /* Adjust padding for a smaller size */
    border-radius: 50%;     /* Ensure it stays round */
    font-size: 0.75rem;     /* Smaller font size */
    height: 1.5em;          /* Ensure a consistent height */
    width: 1.5em;           /* Ensure a consistent width */
    display: flex;
    justify-content: center;
    align-items: center;    /* Center the text inside the badge */
}

/*search product component*/
.search-box-shop {
    display: flex;
    align-items: center;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 10px;
    width: 100%;
    transition: all 0.3s ease;
    box-shadow: 0px 2px 4px 0px #1E3B591F;
    cursor: pointer;
}

.search-container .expanded{
    box-shadow: inset 0px 2px 4px 0px #1E3B591F;
}

.search-box-shop input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 14px;
    padding-left: 4px;
}

.clear-icon {
    cursor: pointer;
    display: none;
    margin-left: 8px;
    font-size: 14px;
    color: #999;
}

/* Style for the suggestion box */
#search-suggestions {
    position: absolute; /* Position it above other content */
    top: 50px; /* Adjust this based on where you want it to appear relative to the search input */
    left: -300px;
    right: 0;
    width: 550px; /* Full width */
    max-width: 550px; /* Maximum width for the suggestion box */
    margin: 0 auto;
    background-color: white;
    border: 1px solid #ccc; /* Light border for contrast */
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); /* Add shadow for visibility */
    z-index: 9999; /* Ensure it's on top of other elements */
    padding: 10px 0; /* Add some padding */
    display: flex; /* Hidden by default */
    box-sizing: border-box; /* Ensure padding is included in width */
    flex-direction: column;
}

.suggestions-content {
    display: flex;
    flex-direction: row;
    width:100%;
}

.suggestions-left {
    width: 45%;
    border-right:1px solid #ddd;
    padding:10px;
    padding-top:0px;
    background-color:#f9f9f9;
}

/* List of suggestions */

#suggestions-list {
    list-style-type: none; 
    padding-left: 0;
    margin: 0;
    max-height: 350px; 
    overflow-y: auto; 
}

.suggestions-list {
    list-style-type: none; 
    padding-left: 0;
    margin: 0;
    max-height: 350px; 
    overflow-y: auto; 
}

.suggestions-list li {
    padding:5px;
    cursor:pointer;
}

.suggestions-right {
    width: 55%;
}

.type-list {
    list-style: none;
    padding:0;
}

.type-list LI {
    padding:5px;
    cursor: pointer;
}

.type-list li:hover {
    background-color: #F0F0F0;
}

/* Each suggestion item */
#suggestions-list li {
    display: flex;
    align-items: center;
    padding: 8px 10px;
    cursor: pointer;
    font-size: 14px;
    width: 100%; /* Ensure items take up full width */
    word-wrap: break-word; /* Ensure long text wraps */
    word-break: break-word; /* Break long words */
    overflow: hidden; /* Prevent overflow */
}

#suggestions-list li:hover {
    background-color:#e9e9e9;
}

/* Icon before each suggestion item */
#suggestions-list li i {
    margin-right: 8px;
    font-size: 16px; /* Adjust size of the icon */
}

/* Header inside suggestion box */
#search-suggestions .suggestions-header {
    font-size: 16px;
    font-weight: 500;
    padding: 10px;
    border-bottom: 1px solid #ddd;
    margin-bottom: 10px;
}

/* Footer inside suggestion box */
.suggestions-footer {
    display: relative;
    justify-content: center;
    align-items: center;
    padding: 10px;
    border-top: 1px solid #ddd;
    position: relative;
    width: 100%;
}

.suggestions-footer i {
    cursor: pointer;
    font-size: 20px;
    color: #888;
}

/* Text next to the icon */
.suggestions-footer span {
    font-size: 14px;
    color: #888;
}

.shop-main-header{
    background-color:#FFFFFF;
    border-radius: 10px;
    box-shadow: 0px 8px 16px 0px #1E3B5926;
}

.btn-white{
    color:#D63D00 !important;
    font-size:14px !important;
    font-weight: 500 !important;
    line-height: 24px !important;
    box-shadow: 0px 8px 16px 0px #1E3B5926;
    background-color: #FFFFFF !important;
    border-radius: 10px !important;
    margin:8px;
    gap:1em;
    border:1px solid #E8EbEE;
}

.btn-white I {
    color:#D63D00 !important;
}

.card-shadow {
    background-color:#FFFFFF;
    border-radius:10px;
    border:0px;
    box-shadow: 0px 8px 16px 0px #1E3B5926;
    margin-bottom:0px !important;
}

/*Add vacancy step 1*/

#quillEditor{
    height: 350px;
    flex:1;
    display: flex;
    flex-direction: column;
}

#quillEditor.is-invalid {
    border-color:#F46A6A;
}

#quillEditor.is-valid {
    border-color:#34C38F;
    box-shadow: none;
}

#quillEditor.is-valid:focus {
    border-color:#34C38F;
    box-shadow: 0 0 0 .15rem rgba(52,195,143, .25);
}

.nav-pills .nav-link.active {
    color:var(--bs-nav-link-active-color, #D63D00);
    background-color:#ffffff;
    border-right:2px solid var(--bs-nav-link-active-border-color, #D63D00);
    border-radius: 0;
    box-shadow: inset -2px 0 var(--bs-nav-link-active-shadow-color, #D63D00);
}

/*Multiselect component style*/
.multi-wrapper {
    border-color:#CED4DA !important;
    border-radius:0.25rem !important;
    margin-top:10px !important;
}

.multi-wrapper .non-selected-wrapper,
.multi-wrapper .selected-wrapper{
    background-color:#FFF !important;
    border-color:#CED4DA !important;
    padding-left:0px !important;
    padding-right:0px !important;
}

.multi-wrapper .non-selected-wrapper .header,
.multi-wrapper .selected-wrapper .header {
    border-bottom:1px solid #CED4DA !important;
    padding-left:10px !important;
    padding-right:0px !important;
}

.multi-wrapper .item {
    color:#D63D00 !important;
}

/*stepper shop*/

.card-stepper-shop {
    margin-bottom: 12px !important;
    height: 41px !important;
    padding: 0px !important;
    padding-left:1px !important;
    padding-right:1px !important;
}

.stepper-shop {
    padding: 0;
    list-style: none;
    display: flex;
    margin: 0;
    padding-left:5px !important;
    padding-right:5px !important;

}

.stepper-shop li {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 33.33%;
    height: 40px;
    position: relative; /* Required for absolute arrow positioning */
    text-align: center;
}

.stepper-shop li.steprond,
.stepper-shop li.steprond i {
    color: #34C38F;
    background-color: #FFFFFF;
    font-weight: 500;
    border-bottom:2px solid #E8EBEE;
}

.stepper-shop li.stepinactive,
.stepper-shop li.stepinactive i {
    color: var(--bs-stepper-inactive-color, #1E3B59);
    background-color: var(--bs-stepper-inactive-bgcolor, #FFFFFF);
    font-weight: 500;
    border-bottom:2px solid #E8EBEE;
}

.stepper-shop li.stepactive,
.stepper-shop li.stepactive i {
    border-bottom: 2px solid var(--bs-stepper-active-bgcolor, #870B58) !important;
    color: var(--bs-stepper-active-color, #FFFFFF) !important;
    font-weight: 500 !important;
}

.stepper-shop li .stepper-item {
    text-decoration: none;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: inherit;
    position: relative;
}

#headerPageLabel{
    max-width: 500px !important;
}

/* Arrow for all steps except the last */
/*
.stepper-shop li:not(:last-child)::after {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    right: -14px; 
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    border-left: 15px solid #FFFFFF; 
    z-index: 2;
}
*/

/* Active step arrow color */
/*
.stepper-shop li.stepactive:not(:last-child)::after {
    border-left-color: var(--bs-stepper-active-bgcolor, #870B58);
}
*/

/* Extra border effect for visibility */
/*
.stepper-shop li:not(:last-child)::before {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    right: -17px; 
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    border-left: 17px solid #FFFFFF;
    z-index: 1;
}
*/

.nav-link-vertical{
    align-items: center !important;
}

.arroundIcon {
    top:20%;
    width: 32px;
    height: 32px;
    padding-left:5px;
    align-items: center;
    color:var(--bs-nav-icon-color, #76084C);
    font-size: 24px;
    line-height: 32px;
    border-radius: 16px;
    border:1px solid var(--bs-nav-icon-border-color, #FFFFFF);
    background-color:var(--bs-nav-icon-bgcolor, #FFEBF5);
    align-items: center;
}

.arroundIcon i {
    color:var(--bs-nav-icon-color, #76084C);
}

.card-body-nop {
    padding-top:0px !important;
    padding-bottom:0px !important;
}

.spinner-bgcolor{
    color:#870B58 !important;
    opacity: 1 !important;
}

.accordion-button:not(.collapsed) {
    background-color: #FFF !important;
}

H5.card-title,
H5.accordion-header button {
    font-size:18px !important;
}

p.importModalIntro {
    align-items: center;
    flex-wrap: wrap;
}

p.importModalIntro .form-check {
    display: inline-flex;
    align-items: center;
    margin-left:0px;
    vertical-align: middle;
    padding-left:0px !important;
}

p.importModalIntro .form-check .form-check-input {
    margin:0 !important;
    vertical-align: middle;
}

/*Add vacancy step 3 location carousel*/

.location-block,
.user-block{
    position: relative;
    padding:.75rem 1rem;
    cursor: pointer;
    box-shadow: 0 0 0 1px #e9e9e9 inset, 0 4px 0 -2px rgba(150, 149, 149, 0.25);
    border-radius: 4px;
    transition: border 0.3s ease-in-out;
}

.location-block.active,
.user-block.active {
    border:var(--bs-carousel-selected-item-border-width, 2px) solid var(--bs-carousel-selected-item-border-color, #D63D00);
}

.location-block::after,
.user-block::after {
    content: "";
    position:absolute;
    top:0;
    left:0;
    width: 0 !important;
    height: 100%;
    background-color: none;
    transition: width 0.3s ease-in-out;
}

.location-block:hover::after,
.user-block:hover::after {
    width: 10px !important;
    background-color: var(--bs-carousel-selected-item-after-bgcolor, #D63D00) !important;
}

.location-block.active::after,
.user-block.active::after
 {
    width: 10px !important;
    background-color: var(--bs-carousel-selected-item-after-bgcolor, #D63D00) !important;
}

.location-title,
.user-title {
    margin-bottom:1.5rem;
    font-size: 1.0625rem;
    font-weight: 400;
}

.location-details,
.user-details{
    display: flex;
    align-items: center;
}

.location-details I,
.user-details I {
    display:flex;
    margin:0;
    margin-right:1rem;
}

.location-details-body,
.user-details-body {
    flex:1 1 auto;
    width: 100%;
    overflow: hidden;
}

.accordion-in-card{
    --bs-accordion-border-width:0px !important;
    padding:3px !important;
}

.card-body-carousel {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
}

.card-carousel-item {
    margin-bottom:0px !important;
}

.mediaHide {
    display: none;
}

.truncate-text {
    display: -webkit-box;
    -webkit-line-clamp: 4; /* Limit to 2 lines */
    line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    max-height: 3.2em; /* Adjust based on font size */
}
  
  .read-more-btn {
    color: #D63D00;
    cursor: pointer;
    font-weight: bold;
    display: inline-block;
    margin-top: 5px;
    font-size:11px;
}

.product-function-list {
    padding-left: 20px;  /* Indent list */
    margin: 5px 0;
}

.product-function-list li {
    list-style-type: disc; /* Bullet points */
    margin-bottom: 3px;    /* Space between items */
}

.sr-only {
    display:none !important;
}

#totalBasketPriceLabel{
    margin-top:6px !important;
}

.badge-bg-basketLabel {
    background-color:#ffffff;
    border:1px solid #E9E9E9;
    font-size: 14px !important;
    border-radius:10px;
    gap:4px;
    box-shadow: 0px 2px 4px 0px #1E3B591F;
    padding:8px;
    display: flex;
    align-items: center;
}

.vac-analyse-result-container {
 padding-bottom:15px;
 border-bottom:1px solid #E3E6EF;
}

.vac-analyse-item-good{
    background-color: #A0D9A2;
    font-size: 14px;
    margin:5px;
}

.vac-analyse-item-wrong{
    background-color: #FF7043;
    font-size: 14px;
    margin:5px;
}

.progress-message {
    font-size:18px;
    font-weight: 700;
}

#btn-check-seo {
    margin-top:10px !important;
}

/*validation carousel webshop*/
.carousel-container.carousel-invalid {
    border: 2px solid #dc3545;
    border-radius: 0.5rem;
    padding: 0.5rem;
  }
  
  .carousel-feedback {
    color: #dc3545;
    font-size: 0.875em;
    margin-top: 0.25rem;
    display: none;
  }
  
  .carousel-container.carousel-invalid .carousel-feedback {
    display: block;
  }

  .active-filter {
    font-weight: bold;
    cursor: pointer;
  }

  /*new vacancy overview css*/
  .vacancy-row {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 1rem;
    width: 100%;
    border:1px solid #E3E6EF;
    border-radius: 0px;
    padding-left:10px;
    padding-right:10px;
    margin-bottom:0px;
  }

  .vacancy-row:hover {
    background-color:#e9e9e9;
  }
  
  .vacancy-col-title {
    flex: 1 1 30%; /* growable with minimum width */
    min-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  
  .vacancy-col-location {
    flex: 0 0 10%;
    min-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .vacancy-col-entity {
    flex: 0 0 10%;
    min-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .vacancy-col-date {
    flex: 0 0 5%;
    min-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  
  .vacancy-col-status {
    flex: 0 0 5%;
    min-width: 100px;
  }

  .vacancy-col-performance {
    flex: 0 0 5%;
    min-width: 100px;
  }
  
  .vacancy-col-avatar {
    flex: 0 0 50px;
  }
  
  .avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
  }

  .badge-soft-user {
    border-width: 1px;
    border-style: solid;
    border-color:#E3E6EF !important;
  }
  
  .vacancy-row-progress {
    flex: 0 0 280px !important;
  }
  
  .vacancy-progress {
    height: 6px;
    border-radius: 3px;
  }
  
  .vacancy-col-actions {
    flex: 0 0 50px;
    text-align: right;
  }

  .badge-soft-online {
    color:#34c38f;
    background-color: rgba(52, 195, 143, .18);
  }

  .badge-soft-offline {
    color:#F46a6a;
    background-color:rgba(244, 106, 106, .18);
  }

  .badge-soft-concept,
  .badge-soft-inbehandeling {
    color:#f1b44c;
    background-color:rgba(241, 180, 76, .18);
  }

  .progress-green {
    background-color:#34c38f;
  }

  .progress-orange {
    background-color:#F1b44c;
  }

  .progress-red {
    background-color:#f46a6a;
  }

  .vacancy-progress-wrapper {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 0; /* No spacing between children */
  }
  
  .vacancy-progress {
    flex: 1 1 auto;
    height: 2px !important;
    margin: 0;
    border-radius: 0px !important;
    background-color: #e9ecef;
    position: relative;
  }
  
  .date-badge {
    color: #333;
    font-size: 0.75rem;
    padding: 0.25em 0.5em;
    line-height: 1;
    white-space: nowrap;
    border:1px solid #E9ECEF !important;
  }
  
  .start-date {
    margin-right: -10px;
    z-index: 2;
  }
  
  .end-date {
    margin-left: -10px;
    z-index: 2;
  }

  .vacancy-row-progress {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0;
    gap: 0.5rem;
  }
  
  .vacancy-progress-bar {
    flex: 1 1 auto;
    height: 6px;
    margin: 0;
    border-radius: 4px;
    background-color: #e9ecef;
    position: relative;
  }
  
  .date-badge {
    background-color: #f8f9fa;
    color: #333;
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
    line-height: 1;
    white-space: nowrap;
  }

  .vacancy-row-header {
    flex:1 1 30%;
    align-items: center;
    flex-wrap: nowrap;
    gap: 1rem;
    width:100%;
    font-size: 0.875rem;
    border:1px solid #e9e9e9;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    padding-left:10px;
    padding-right:10px;
    height:60px;
  }
  
  .vacancy-col-header-title {
    flex: 1 1 30%;
    min-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  
  .vacancy-col-header-location {
    flex: 0 0 10%;
    min-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .vacancy-col-header-entity {
    flex: 0 0 10%;
    min-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .vacancy-col-header-date{
    flex:0 0 5%;
    min-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  
  .vacancy-col-header-status {
    flex: 0 0 5%;
    min-width: 100px;
  }

  .vacancy-col-header-performance {
    flex: 0 0 5%;
    min-width: 100px;
  }
  
  .vacancy-col-header-avatar {
    flex: 0 0 50px;
  }
  
  .vacancy-col-header-progress {
    flex: 0 0 280px;
  }
  
  .vacancy-col-header-actions {
    flex: 0 0 50px;
    text-align: right;
  }

  .ico-badge {
    font-size:13px !important;
  }

  .ico-badge-perf-pos {
    color:#34c38f;
    background-color:rgba(52, 195, 143, .18);
  }

  .ico-badge-perf-neg{
    color:#F46a6a;
    background-color:rgba(244, 106, 106, .18);
  }

.invalid-form-element {
    font-size:80%;
    color:#F46a6a;
    margin-top: 0.25rem;
    width:100%;
  }

  /*fix problem with bootstrap rating and custom icon*/
.rating-star .hro-star-linear {
    padding-top:6px !important;
    display: inline-block !important;
}

.event img {
    border-radius: 16px;
}

.event{
    background-color: rgba(240, 240, 240, 0.5) !important;
    border-radius:10px !important;
    color:#1E3B59 !important;
    box-shadow: 0px 4px 12px rgba(0,0,0,0.8)  !important;
}

.event H5, 
.event p  {
    color:#1E3B59 !important;
    opacity: 1 !important;
}

.shadow-none {
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
}

.card-candidate {
    box-shadow: none !important;
    border-radius: 5px !important;
}


/* Position dropdown above the user button */
.vertical-collpsed .dropdown-menu-profile {
    position: absolute !important;
    top: auto !important;
    bottom: 100% !important;
    left: 0 !important;
    right: auto !important;
    margin-left: 0 !important;
    margin-bottom: 5px !important;
    transform: none !important;
}

/* User SID validation styles */
.btn-disabled {
    opacity: 0.6;
    cursor: not-allowed !important;
}

    .btn-disabled:hover {
        opacity: 0.6;
    }

#sidErrorMessage {
    border-left: 4px solid #ffc107;
    background-color: #fff3cd;
    border-color: #ffeaa7;
    color: #856404;
}

    #sidErrorMessage i {
        color: #ffc107;
    }

.salary-error {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
    background-image: url() !important;
    background-color: light-dark(rgb(232, 240, 254), rgba(70, 90, 126, 0.4)) !important;
}

.dropdown-menu {
    z-index: 1150 !important;
}

.icon-note-add {
    padding-left: 7px;
}