/*Scroll Bar*/
.cx-sidebar-wrapper ::-webkit-scrollbar-track {
  border-radius: 5px !important;
}
.cx-sidebar-wrapper ::-webkit-scrollbar {
  width: 5px !important;
}

/*sidebar style*/
#cx-sidebar-right .cx-sidebar-wrapper {
  padding: 30px 25px;
  overflow-y: auto;
  display: flex;
  height: 100%;
  width: 100%;
  max-height: 100%;
}
#cx-sidebar-right .inner-content {
  width: 100%;
  padding: 0px;
  box-sizing: border-box;
}
#cx-sidebar-right .content-loading {
  background-image: url("/wp-content/plugins/cx_white_craft_animation/asset/imgs/loading.gif");
  background-repeat: no-repeat;
  background-position: 50%;
  background-size: 80%;
  max-width: 120px;
  margin: 0 auto;
}
#cx-sidebar-right .cx-sidebar-content {
  display: flex;
  height: 100%;
  width: 100%;
}
#cx-sidebar-right .cx-sidebar-title {
  /*text-align: center;background-color: var(--e-brand);
    color: var( --e-text-primary );position: relative;*/
}
#cx-sidebar-right .title-container {
  display: flex;
  gap: 13px;
  align-items: center;
  margin-bottom: 20px;
  cursor: pointer;
}
#cx-sidebar-right .cx-sidebar-title h4 {
  margin: 0;
  font-size: 1rem;
  text-transform: capitalize;
}
#cx-sidebar-right .cx-sidebar-title i {
  font-size: 1.1em;
}
#cx-sidebar-right .cx-sidebar-title .sidebar-title-icon i {
  font-size: 1.4em;
}
#cx-sidebar-right span.sidebar-close-btn {
  /*position: absolute;left: 0;cursor: pointer;padding: 10px;border-radius: 5px;font-weight: 600;*/
}

/*#cx-sidebar-right .cx-sidebar-render-content {padding: 20px;}*/

/* 
- cx wc user btn
*/
.cx_cx_user_btn a.login-btn {
  cursor: pointer;
}

/* 
- styling for both sidebar menus
- wc user sidebar
- hamburger site menu
*/

.cx_shortcode.cx_nav_menu ul.user-details-sidebar {
  padding-left: 0;
  list-style: none;
}
.cx_shortcode.cx_nav_menu ul.user-details-sidebar li i {
  color: var(--e-heading);
}
.cx_shortcode.cx_nav_menu ul.user-details-sidebar li.customer-menu-item a {
  display: block;
  padding: 12px 8px;
  text-decoration: none;
  color: var(--e-text-primary);
  border-bottom: 1px solid #bdbdbd;
}
.cx_shortcode.cx_nav_menu ul.user-details-sidebar li.customer-menu-item i {
  width: 25px;
  color: var(--e-primary);
}

/*terms and condition label */
ul.checkbox-container li {
  display: inline !important;
}
ul.checkbox-container > li > label {
  margin-left: 8px;
}

/* removing menu icon */
div#cx-sidebar-right .sidebar-title-icon {
  display: none;
}

/* till line 1.07 dont remove important  */
/*for menu right sidebar */
/*
div#cx-sidebar-right span.sidebar-close-btn {font-family: 'Poppins';font-weight: 400;font-size: 1rem;}
div#cx-sidebar-right .menu-wraper h3{color:var(--e-primary-200);font-size: 1rem;font-weight: 600;text-transform:capitalize;margin-bottom: 15px !important;}
div#cx-sidebar-right .cx-sidebar-wrapper.sidebar-wrapper {padding:33px 40px !important;}
div#cx-sidebar-right .menu-wraper {margin: 43px 0 0 0 !important;}
div#cx-sidebar-right .menu-wraper:first-child  .user-details-sidebar{margin-bottom:40px;}
div#cx-sidebar-right .menu-wraper:not(:last-child){border-bottom:1px solid var(--e-site-text-light);} 
div#cx-sidebar-right .menu-wraper:not(:first-child){margin: 20px 0 !important;} 
div#cx-sidebar-right ul.user-details-sidebar li {margin-bottom: 12px !important;}

*/
/* for  all sidebar titles */
/*
.cx-sidebar-wrapper .title-container {color: var(--e-site-text-light);text-transform: capitalize;}*/

#cx-sidebar-right .cx-sidebar-wrapper.sidebar-wrapper {
  padding: 0px;
  padding-bottom: 30px;
  overflow-y: auto;
  display: flex;
  height: 100%;
  width: 100%;
  max-height: 100%;
/*  background-color: #2f2e2e !important;*/
  background-color: var(--e-bg-white-color);
  color: var(--e-secondary);
}

#cx-sidebar-right .cx-sidebar-wrapper.sidebar-wrapper li a {
  color: var(--e-secondary);
}

/* for sidebar loader  box with bounce animation */

.cx-sidebar-loader {
  display: flex;
  align-content: center;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  width: 100%;
}

:root {
  --box-loader-wall-size: 40px;
  --box-loader-wall-size-translateZ-neg: -40px;
  --box-loader-wall-size-translateZ-pos: 40px;
  --box-wall-border-color: #ae47cf;
  /*    --transform-x-y-rotate  : 45px;*/
}

.scene {
  position: relative;
  z-index: 2;
  height: 100px;
  width: 100px;
  display: grid;
  place-items: center;
}

.cube-wrapper {
  transform-style: preserve-3d;
  animation: bouncing 2.7s infinite;
}

.cube {
  transform-style: preserve-3d;
  transform: rotateX(45deg) rotateZ(45deg);
  animation: rotation 2.7s infinite;
}

.cube-faces {
  transform-style: preserve-3d;
  height: var(--box-loader-wall-size);
  width: var(--box-loader-wall-size);
  position: relative;
  transform-origin: 0 0;
  transform: translateX(0) translateY(0)
    translateZ(var(--box-loader-wall-size-translateZ-neg));
}

.cube-face {
  position: absolute;
  inset: 0;
  background: var(--e-body-secondary-bg);
  border: solid 1px var(--box-wall-border-color);
}
.cube-face.shadow {
  transform: translateZ(var(--box-loader-wall-size-translateZ-neg));
  animation: bouncing-shadow 2s infinite;
}
.cube-face.top {
  transform: translateZ(var(--box-loader-wall-size-translateZ-pos));
}
.cube-face.front {
  transform-origin: 0 50%;
  transform: rotateY(-90deg);
}
.cube-face.back {
  transform-origin: 0 50%;
  transform: rotateY(-90deg)
    translateZ(var(--box-loader-wall-size-translateZ-neg));
}
.cube-face.right {
  transform-origin: 50% 0;
  transform: rotateX(-90deg)
    translateY(var(--box-loader-wall-size-translateZ-neg));
}
.cube-face.left {
  transform-origin: 50% 0;
  transform: rotateX(-90deg)
    translateY(var(--box-loader-wall-size-translateZ-neg))
    translateZ(var(--box-loader-wall-size-translateZ-pos));
}

@keyframes rotation {
  0% {
    transform: rotateX(45deg) rotateY(0) rotateZ(45deg);
    animation-timing-function: cubic-bezier(0.17, 0.84, 0.44, 1);
  }
  50% {
    transform: rotateX(45deg) rotateY(0) rotateZ(225deg);
    animation-timing-function: cubic-bezier(0.76, 0.05, 0.86, 0.06);
  }
  100% {
    transform: rotateX(45deg) rotateY(0) rotateZ(405deg);
    animation-timing-function: cubic-bezier(0.17, 0.84, 0.44, 1);
  }
}
@keyframes bouncing {
  0% {
    transform: translateY(-40px);
    animation-timing-function: cubic-bezier(0.76, 0.05, 0.86, 0.06);
  }
  45% {
    transform: translateY(40px);
    animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
  }
  100% {
    transform: translateY(-40px);
    animation-timing-function: cubic-bezier(0.76, 0.05, 0.86, 0.06);
  }
}
@keyframes bouncing-shadow {
  0% {
    transform: translateZ(-var(--box-loader-wall-size)) scale(1.3);
    animation-timing-function: cubic-bezier(0.76, 0.05, 0.86, 0.06);
    opacity: 0.05;
  }
  45% {
    transform: translateZ(0);
    animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
    opacity: 0.3;
  }
  100% {
    transform: translateZ(-var(--box-loader-wall-size)) scale(1.3);
    animation-timing-function: cubic-bezier(0.76, 0.05, 0.86, 0.06);
    opacity: 0.05;
  }
}