/*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_ems/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;}*/



/* 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;
    }
}