:root{
    --dark:#414254;
    --darkPrimary:#697d9a;

    --grayDark: #b9c7db;;
    --gray: #e7ecf4;
    --grayLight: #f5f7fa;
    --grayVeryLight: #f7f7f7;

    --blueDark: #506de2;
    --blue: #2089e4;
    --blueLight: #91c3ee;

    --greenDark: #01d9a6;
    --green: #2ee5b5;
    --secondaryLight: #80ecd4;

    --lightDark: #d6edff;
    --light: #ffffff;

    --red: #eb5757;
}

/* Scroll Bar Custom */

.ps__rail-x{
    opacity: 0.6;
}
.ps__rail-y {
    margin-top: calc(50px + 2rem);
    margin-bottom: 50%;
    opacity: 0.6;
}


/* Side Menu */
#weSideMenuBox{
    margin-inline-start: 0;
    width: 78px;
    /*
    background: rgb(32,137,228);
    background: linear-gradient(45deg, rgba(32,137,228,1) 0%, rgba(145,195,238,1) 67%);
     */
}

/* width */
.we-side-menu::-webkit-scrollbar {
    width: 0px;
}
/* Track */
.we-side-menu::-webkit-scrollbar-track {
    background: var(--dark);
    border-radius: 10px;
    border: solid 4px var(--light);
}
/* Handle */
.we-side-menu::-webkit-scrollbar-thumb {
    background: var(--lightDark);
    border-radius: 10px;
    border: solid 3px var(--light);
    transition: .3s;
}
/* Handle on hover */
.we-side-menu::-webkit-scrollbar-thumb:hover {
    background: var(--blueLight);
    transition: .3s;
}

.we-side-menu{
    height: calc(100vh - 1.5rem - 51px);
    margin: 0;
}
.we-side-menu-item{color: var(--dark)}
.we-side-menu-item:hover{
    background-color: var(--blue);
    color: var(--light)
}
.we-side-menu-item-selected{
    background-color: var(--blue) !important;
    color: var(--light) !important;
}
.we-side-menu-desktop-open{width: 240px !important}
.we-side-menu-item-name, .we-side-menu-sub p{
    margin-top: -5px;
    white-space: nowrap
}

#wePhoneNav{border-top: solid 1px var(--grayLight)}

/* Side Profile */
#weSideProfileBox{
    height: calc(100vh - 51px);
    width: 240px;
    margin-inline-end: -240px;
}
.we-side-profile-box-open{margin-inline-end: 0 !important;}

/* Main Content */
#weMainContentBox{
    width: calc(100% - 78px);
    margin-inline-start: 78px;
    height: 100vh;
}
.we-content-main-desktop-close{
    width: calc(100% - 240px) !important;
    margin-inline-start: 240px !important;
}

.we-content-col-box-drop{
    position: absolute;
    top: calc(100% - .2rem);
    background-color: var(--light);
    border-radius: 0 0 .3rem .3rem;
}

@media (max-width: 768px) {
    .ps__rail-y {
        margin-top: 1rem;
        margin-bottom: 70%;
    }
    #weSideMenuBox{
        width: 240px;
        margin-inline-start: -240px;
        height: calc(100vh - 50px) !important;
    }
    #weMainContentBox{
        width: 100%;
        margin-inline-start: 0;
    }
    .we-side-menu-item .we-d-none, .we-side-menu-sub .we-d-none{display: block !important;}
    .we-side-menu-item:hover{background-color: transparent; color: var(--dark)}
    .we-side-menu-phone-open{margin-inline-start: 0 !important;}
    .we-side-menu-sub li a{padding-inline-start: 32px}

    #wePhoneMenuOverflow{
        background-color: rgba(0,0,0,.05);
        backdrop-filter: blur(5px);
    }

    .we-side-menu{
        height: calc(100vh - 50px);
        margin: 0;
        padding-bottom: 64px ;
        padding-top: 1rem ;
    }

    .we-content-col-box-drop{
        position: fixed;
        top: 0;
        background-color: rgba(65,66,84,.8);
        border-radius: 0;
        height: calc(100vh - 50px);
        backdrop-filter: blur(5px);
    }
    .we-content-col-box-drop-menu{
        transform-origin: left;
        position: absolute;
        transform-origin: center    ;
        transform: translate(50%, -50%);
        margin-inline-start: 50%;
        top: 50%;
    }

}


/* Colors */
.we-bg-light{background-color: var(--light)}
.we-color-gray-dark{color: var(--grayDark)}

.we-bg-gray-dark{background-color: var(--grayDark)}
.we-bg-gray{background-color: var(--gray)}
.we-bg-gray-light{background-color: var(--grayLight)}
.we-bg-gray-light2{background-color: var(--grayVeryLight)}

.we-color-dark{color: var(--dark)}
.we-color-gray-dark{color: var(--grayDark)}
.we-color-blue{color: var(--blue)}
.we-opacity-0{opacity: 0}

/* Font, Type */
.we-font-irs{font-family: 'irsans'}
.we-font-irs-en{font-family: 'irsansEn'}
.we-dir-ltr{direction: ltr;}
.we-dir-rtl{direction: rtl;}

.we-font-size-18{font-size: 18px}
.we-font-size-15{font-size: 15px }
.we-font-size-14{font-size: 14px}

.we-liststyle-none{list-style: none}

/* Margin, Padding, Position, Display */
.we-p-0{padding: 0}
.we-px-14{
    padding-inline-start: 14px;
    padding-inline-end: 14px;
}
.we-px-16{
    padding-inline-start: 16px;
    padding-inline-end: 16px;
}
.we-px-18{
    padding-inline-start: 18px;
    padding-inline-end: 18px;
}

.we-ps-32{
    padding-inline-start: 32px;
}

.we-mt-n1{margin-top: -1px}
.we-ms-16{margin-inline-start: 16px;}

.we-d-none{display: none}

.we-z-0{z-index: 0;}
.we-z-1{z-index: 1;}
.we-z-50{z-index: 50}
.we-z-99{z-index: 99;}

.we-top-90{top: 90%}

/* Size */
.we-h-50{height: 50px;}
.we-h-30{height: 30px}
.we-w-content{width: fit-content}

/* Animation, Actions, Effects */
.we-transition-3ms{transition: .3s}
.we-transition-5ms{transition: .5s}
.we-transition-8ms{transition: .8s}
.we-animate-delay-3ms{animation-delay: .3s;}

.we-cursor-pointer{cursor: pointer}

.we-rotate-0{transform: rotate(0deg)}
.we-rotate-n90{transform: rotate(-90deg)}
.we-rotate-180{transform: rotate(180deg)}

.we-shadow-drop-1{
    -webkit-box-shadow: 0px 0px 20px -20px rgba(0,0,0,0.5);
    box-shadow: 0px 0px 20px -20px rgba(0,0,0,0.5);
}
.we-shadow-drop-2{
    -webkit-box-shadow: 0px 13px 20px -20px rgba(0,0,0,0.5);
    box-shadow: 0px 13px 20px -20px rgba(0,0,0,0.5);
}
.we-title-triangle{
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 12px 12px 12px;
    border-color: transparent transparent var(--grayDark) transparent;

}



/* objects */
.we-split-line{height: 1px; background-color: var(--grayLight); opacity: .5}

/* link */
.we-lnk{
    text-decoration: none;
    color: var(--dark);
}
.we-lnk-txt-dark:hover{color: var(--dark)}
.we-lnk-txt-2b:hover{color: var(--blue)}
.we-lnk-fill-b-g:hover{color: var(--blue); background-color: var(--grayLight);}
.we-lnk-fill-d-gl:hover{color: var(--blue); background-color: var(--grayLight);}

/* Chats JS */
.canvasjs-chart-credit{display: none !important}
.canvasjs-chart-canvas{
    border-radius: .3rem;
    -webkit-box-shadow: 0px 0px 20px -20px rgba(0,0,0,0.5);
    box-shadow: 0px 0px 20px -20px rgba(0,0,0,0.5);
}

/* Other */
.we-profile-btn{
    min-height: calc(50px + 1rem);
    min-width: calc(50px + 1rem);
    color: var(--grayDark);
    transition: .8s;
}
.we-profile-btn:hover{
    color: var(--blue);
    transition: .3s;
}
.we-profile-btn:hover .we-profile-tooltip{display: flex !important;}