#navbar-animmenu {
    width: 25%;
    padding: 0 0;
    position: relative;
}

#navbar-animmenu ul {
    background: #CAF5F5;
    padding: 0;
    margin: 0;
    height: 700px;
}

#navbar-animmenu ul li a i {
    margin-left: 10px;
}

#navbar-animmenu ul li span {
    background-color: #dd2a2a;
    width: 26px;
    display: flex;
    height: 26px;
    align-items: center;
    justify-content: center;
    border-radius: 24px;
    margin: 0 0 0 12px;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
}

#navbar-animmenu li {
    list-style-type: none;
    z-index: 4;
    position: relative;
    cursor: pointer;
}

#navbar-animmenu ul li a {
    color: #484848;
    text-decoration: none;
    font-size: 15px;
    line-height: 60px;
    display: block;
    padding: 0px 30px 0 20px;
    transition-duration: 0.6s;
    transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    position: relative;
}

#navbar-animmenu > ul > li.active > a {
    color: #000000;
    background-color: transparent;
    transition: all 0.7s;
}

.countNumber {
    margin: 0 0 0 12px;
    font-size: 12px;
    background-color: #dd2a2a;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 40px;
    color: #fff;
    font-weight: 600;
    padding: 2px 0 0 0;
}

/* Vertical selector styling */
.verti-selector {
    display: inline-block;
    position: absolute;
    width: 97%;
    left: 0px;
    transition-duration: 0.6s;
    transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    background-color: #fff;
    border-radius: 0 50px 50px 0;
    /*    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;*/
    height: 45px;
    z-index: 3;
}

.verti-selector .top,
.verti-selector .bottom {
    position: absolute;
    width: 25px;
    height: 25px;
    background-color: #fff;
}

.verti-selector .top {
    bottom: -25px;
    left: 0;
}

.verti-selector .bottom {
    top: -25px;
    left: 0;
}

.verti-selector .top:before,
.verti-selector .bottom:before {
    content: '';
    position: absolute;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #CAF5F5;
}

.verti-selector .top.last-role::before {
    background-color: #f5f5f5;
}

.verti-selector .top:before {
    top: 0;
    right: -25px;
}

.verti-selector .bottom:before {
    bottom: 0;
    right: -25px;
}

#accountList {
    width: 75%;
    background-color: #ffffff;
    height: 700px;
    overflow-y: scroll;
    overflow-x: hidden;
}

.createRoleBox {
    width: 100%;
    background-color: #ffffff;
    z-index: 6;
    display: block !important;
    position: relative;
    padding: 11px 6px;
    border-bottom: 2px solid transparent;
    border-image: linear-gradient(to left, #B1B1B1, #FFFFFF);
    border-image-slice: 1;
}

.sweet-alert button {
    font-family: 'IRANYekanX';
}

.btn-create {
    background: #84CC16;
    border-radius: 7px;
    padding: 4px 10px;
    font-size: 13px;
    color: #ffffff;
    text-align: center;
    color: #FFF;
    text-align: center;
    font-size: 11px;
    font-style: normal;
    font-weight: 400;
}

.btn-create:hover {
    background: #71b112;
}

#hideCircle {
    transition: border-radius 0.5s ease;
    height: 80px;
    background-color: #f5f5f5;
    pointer-events: none;
}

.isActiveTxt {
    background-color: #ECFCCB;
    border: 1px solid #B3EB52;
    border-radius: 50px;
    padding: 3px 9px;
    color: #0B5959;
    font-size: 11px;
    width: 70px;
    text-align: center;
}

.btn-edit-role {
    border: 1px solid transparent;
    width: 30px;
    height: 30px;
    border-radius: 5px;
    padding: 3px 1px;
    color: #009EE2;
    margin: auto 0 auto 1px;
    /* background-color: #ffffff; */
    background-color: rgba(52, 209, 209, 0.20);
    box-shadow: 0;
    transition: ease .2s;
}

.btn-edit-role:hover {
    color: #ffffff;
    /* background-color: #009EE2; */
    background-color: rgba(52, 209, 209, 0.40);
}

.btn-delete-role {
    border: 1px solid transparent;
    width: 30px;
    height: 30px;
    border-radius: 5px;
    padding: 3px 1px;
    color: #FF5151;
    margin: auto 1px auto 0;
    background: rgba(209, 50, 50, 0.15);
    transition: ease .2s;
}

.btn-delete-role:hover {
    background-color: rgba(209, 50, 50, 0.25);
}

.btn-info {
    border: 1px solid transparent;
    width: 30px;
    height: 30px;
    border-radius: 5px;
    padding: 3px 1px;
    color: #009EE2;
    margin: auto 0 auto 1px;
    /* background-color: #ffffff; */
    background-color: #B4DBFD;
    box-shadow: 0;
    transition: ease .2s;
}

.btn-info:hover {
    background-color: #a2c8e9
}

.btn-info svg {
    color: #3B82F6;
}

.close-btn-search {
    position: absolute;
    top: 50%;
    left: 4px;
    transform: translateY(-50%);
    color: #fff;
    background-color: #f87171;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.Rtable--collapse .Rtable-row {
    flex-wrap: nowrap;
    padding: 1px;
}

.Rtable--collapse .Rtable-row.SubAccountRowMobile {
    flex-wrap: nowrap;
    padding: 1px;
    outline: 1px solid #dddddd;
}

.roleTitle {
    font-size: 12px;
    font-weight: 500;
}

.roleName {
    font-size: 16px;
    font-weight: 700;
}


/********************************** Sub Account Table **********************************/
.rightHeaderMenu {
    width: 25%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.leftHeaderMenu {
    width: 75%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.subAccountHeaderList {
}


.roleSubaccountListMobile .width1 {
    width: 15% !important;
}

.roleSubaccountListMobile .width2 {
    width: 40% !important;
}

.roleSubaccountListMobile .width3 {
    width: 30% !important;
}

.bgSubRow {
    outline: transparent !important;
    background-color: #CEF4F4 !important;
}
/********************************** Sub Account Table **********************************/

.switch {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 24px;
}

/* Hide default HTML checkbox */
.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

/* The slider */
.sliderEUP {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: 0.4s;
    border-radius: 24px;
}

/* Rounded slider */
.sliderEUP:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 2px;
    bottom: 2px;
    background-color: white;
    transition: 0.4s;
    border-radius: 50%;
}

/* Checked state */
input:checked + .sliderEUP {
    background-color: #2FBFBF;
}

/* Move the slider to the right when checked */
input:checked + .sliderEUP:before {
    transform: translateX(16px);
}

/* Disable state */
.disable + .sliderEUP {
    background-color: #ccc;
    cursor: not-allowed;
}

.disable + .sliderEUP:before {
    background-color: #999;
}

.leftHeaderMenu .Rtable-cell.width1 {
    width: 7%
}

.leftHeaderMenu .Rtable-cell.width2 {
    width: 25%
}

.leftHeaderMenu .Rtable-cell.width3 {
    width: 53%
}

.leftHeaderMenu .Rtable-cell.width4 {
    width: 15%
}

.Rtable .workflow-list .width1 {
    width: 7%
}

.Rtable .workflow-list .width2 {
    width: 25%
}

.Rtable .workflow-list .width3 {
    width: 53%
}

.Rtable .workflow-list .width4 {
    width: 15%
}

.btn-workflow-absent {
    border: 1px solid transparent;
    height: 30px;
    border-radius: 5px;
    padding: 3px 1px;
    color: #FF5151;
    margin: auto 1px auto 0;
    background-color: #ffffff;
    background: rgba(209, 50, 50, 0.15);
    transition: ease .2s;
    width: 55px;
}

.btn-workflow-rollcall-edit {
    border: 1px solid transparent;
    height: 30px;
    border-radius: 5px;
    padding: 3px 1px;
    color: #009EE2;
    margin: auto 0 auto 1px;
    background-color: #ffffff;
    background-color: rgba(52, 209, 209, 0.20);
    transition: ease .2s;
    width: 55px;
}

.btn-workflow-leave {
    border: 1px solid transparent;
    height: 30px;
    border-radius: 5px;
    padding: 3px 1px;
    color: #d97706;
    margin: auto 1px auto 0;
    background-color: #ffffff;
    background: rgba(217, 119, 6, 0.18);
    transition: ease .2s;
    width: 55px;
}

.btn-workflow-accept {
    border: 1px solid transparent;
    height: 30px;
    border-radius: 5px;
    padding: 3px 1px;
    color: #65a30d;
    margin: auto 1px auto 0;
    background-color: #ffffff;
    background: rgba(101, 163, 13, 0.15);
    transition: ease .2s;
    width: 55px;
}

.operations-btns-main {
    padding: 15px;
    width: 97%;
    margin: 0 auto 10px;
    display: none;
    border-radius: 0px 0px 8px 8px;
    background: #F1F5F9;
    box-shadow: 0px 4px 5px 0px rgba(0, 0, 0, 0.03) inset;
}

.number-of-count {
    background-color: #caf5f5;
    margin: 0 10px 0 0;
    border-radius: 5px;
    display: inline-block;
    padding: 0 5px;
    color: #368686;
    font-weight: 700;
}

.toggle {
    cursor: pointer;
    font-size: 12px;
}

.toggle svg {
    stroke: #ffffff;
    transition: transform 0.3s ease;
}

.toggle.open svg {
    transform: rotate(-90deg);
}

@media (max-width: 1366px) {
    #navbar-animmenu ul li a {
        font-size: 13px;
        font-weight: 700;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
    }
    #accountList {
        height: 440px;
    }

    #navbar-animmenu ul {
        height: 440px;
    }
}

@media (max-width: 767px) {
    .Rtable--collapse .Rtable-row {
        outline: 1.8px solid #ddd !important;
    }

    .Rtable .workflow-list .width1 {
        width: 5% !important;
    }

    .Rtable .workflow-list .width2 {
        width: 50% !important;
    }

    .Rtable .workflow-list .width4 {
        width: 20% !important;
    }

    .Rtable--collapse .Rtable-row .Rtable-cell .Rtable-cell--content {
        text-align: right;
    }

    .btn-workflow-accept,
    .btn-workflow-leave,
    .btn-workflow-absent,
    .btn-workflow-rollcall-edit {
        width: 100%;
        margin: 1px 0;
    }

    .employee-name {
        font-weight: 800;
    }







    /* responsive Mobile */
    #navbar-animmenu {
        width: 100%;
    }

        #navbar-animmenu ul {
            display: flex;
            height: auto;
            overflow: scroll;
        }

    .verti-selector {
        display: none
    }

    #navbar-animmenu li.active {
        background-color: #fff;
        width: 100%;
    }

    #accountList {
        width: 100%;
        height: auto;
    }
}