.overlay_layer{
    position: fixed;
    top: 3.5rem; left: 0;
    width: 100%;
    height: 100%;
    background: rgba(68,76,91,0.6);
    z-index: 19099;
}
.eventDropDown{
    position: fixed;
    top: 3.5rem; bottom: 0;
    right: 0;
    width: 40%;
    right: -644px;
    min-width: 350px;
    max-width: 644px;
    overflow: auto;
    background: #fff;
    text-align: left;
    font-family: 'Inter', Sans-serif;
    font-size: 16px;
    padding: 2rem;
    z-index: 100000;
}
.eventDropDown.open{
    animation: slideLeft 2s cubic-bezier(0,1.3,0.5,1) 1 forwards;
}
.eventDropDown.close{
    animation: slideUp 1s ease-in 1 forwards;
}
@keyframes slideLeft {
    0% {width: 0; overflow: hidden; opacity: 0; right: -644px}
    50% { width: 100%;   right: 0;}
    100% { width: 100%; opacity: 1; right: 0; overflow: auto;}
}

@keyframes slideUp {
    0% {height: 100%; overflow: hidden; opacity: 1; right: 0;}
    100% { height: 100%; right: -644px; opacity: 0}
}
.eventDropDown .event_row{
    min-height: 8rem;
    display: flex;
    border-bottom: 1px solid #E6EAF3;
    padding: 1.75em 0;
}
.eventDropDown .event_left{
    width: 20%;
    max-width: 4.5rem;
    flex-shrink: 0;
    text-align: center;
    margin: 0 1.5rem  0 1rem;
}
.eventDropDown .event_right{
    width: 80%;
}

.eventDropDown .event_right h2{
    font-size: 1.125rem;
    font-weight: 400;
    color: #000;
    overflow: hidden;
}
.eventDropDown .event_right h2 div{
    max-height: 3rem;
    overflow: hidden;
    line-height: 1.3;
    font-size: 0.875rem;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}
.eventDropDown .event_right .info_event{
    font-size: 0.875rem;
    margin-top: 0.3rem;
}

.eventDropDown .event_right .info_event span{
    color: rgba(0,0,0, 0.5);
}

.icon_event{
    width: 100%;
    height: 100%;
    max-width: 4.5rem;
    max-height: 4.5rem;
    display: flex;
    font-size: 1.4375em;
    border-radius: 12px;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}
.info_icon{ background: #FFF9E4}
.approve_icon{ background: #DCEBF5}
.complete_icon{background: #F5FFF1}
.info_icon em{
    font-size: 1.75rem;
    color: #F1C93C;
}
.approve_icon em{
    font-size: 1.75rem;
    color: #0957DE;
}
.complete_icon em{
    font-size: 1.75rem;
    color: #73AC57;
}

.button_blue{
    display: inline-block;
    text-decoration: none;
    font-size: 0.875rem;
    color: #fff;
    background: #0957DE;
    border: 0;
    border-radius: 4px;
    padding: 0.5rem 1rem;
    cursor: pointer;
}
.button_blue_bordered{
    display: inline-block;
    text-decoration: none;
    font-size: 0.875rem;
    color: #0957DE;
    background: none;
    border: 1px solid #0957DE;
    border-radius: 4px;
    padding: 0.5rem 1rem;
    cursor: pointer;
}

.button_icon{
    position: relative;
    padding-right: 3rem;
}
.button_icon:after{
    position: absolute;
    right: 0.5rem;
    font-family: "Sylexfont";
    font-size: 1rem;
}
.approve_butt:after{
    content: "\e9e0";
}
.reject_butt:after {
    content: "\e92f";
}
.buttons{
    margin-top: 1rem;
}
.news_row .event_left{
    width: 40%;
    max-width: 7.5rem;
}
.news_row .event_left img{
    width: 100%;
    max-width: 7.5rem;
    max-height: 7.5rem;
    border-radius: 8px;
}
.task_group{
    border-radius: 12px;
    border: 1px solid #C1CCD8;
    padding: 0 1rem;
}
.eventDropDown .task_group .event_left{
    padding-left: 0;
}
.task_group .tasks_list{
    display: none;
}
.open_group.task_group .tasks_list{
    display: block;
}
.task_group .event_row{ border-bottom-width: 0}
.open_group.task_group .event_row{ border-bottom-width: 1px}
.task_group .buttons_rigth .icon_angle{
    width: 3.5rem;
    height: 3.5rem;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    background: #E6EAF3;
    border-radius: 8px;
    cursor: pointer;
}
.task_group .buttons_rigth .icon_angle:before{
    content: "\e907";
    font-family: "Sylexfont";
    font-size: 0.6rem;
    font-weight: bold;
    color: #4B698A;
    transition: all 1s linear;
}
.open_group.task_group .buttons_rigth .icon_angle:before{
    content: "\e9a8";
}
.open_group.task_group h2{
    font-size: 0.875rem;
}

.task_group .photo{
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    object-fit: cover;

}
.task_group .buttons_rigth{
    display: flex;
    justify-content: flex-end;
}
.task_group .event_icon{
    width: 3rem;
    height: 3rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    color: #fff;
    background: #C1CCD8;
    border-radius: 8px;
    margin-left: 1rem;
    cursor: pointer;
}
.task_group .icon-double_check{
    font-size: 1.1rem;
}
.task_group  .blue_icon{
    background: #0957DE;
}
.task_group .green_icon{
    background: #73AC57;
}
.task_group  .green_icon em{
    font-size: 1rem;
}

/*------------------*/
.eventDropDown .event_right h2 p,
.eventDropDown .event_right h2 div *{
    font-weight: normal!important;
    font-size: inherit!important;
    padding: 0!important;
    margin: 0!important;
    background: none!important;
}

/*----------------------------------*/
/*-------------------------*/
.roleMenu{
    width: 100%;
    max-width: 450px;
}
.roleMenu .depart_link{
    text-align: left;
    line-height: 1.3;
    margin-bottom: 20px;
}
.roleMenu .depart_link .depart_hd{
    display: flex;
    color: #444C5B;
    background: #F1F4FA;
    border-radius: 12px;
    padding: 1rem;
    cursor: pointer;
}
.roleMenu .depart_link .depart_cont{display: none}
.roleMenu .depart_link.open .depart_hd{

    border-bottom-left-radius:0;
    border-bottom-right-radius:0;
}
.roleMenu .depart_link.current .depart_hd{
    color: #fff;
    background: #0957DE;
}
.roleMenu .depart_link .depart_hd > div:first-child{
    width: 100%;
}
.roleMenu .depart_link strong{
    display: block;
    max-height: 2.7rem;
    overflow: hidden;
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 5px;
}
.roleMenu .logOut_link strong{
    font-weight: 400;
    margin-bottom: 0;
}
.roleMenu .depart_link span{
    display: block;
    font-size: 0.8125rem;
    /*max-height: 3.3rem;*/
}
.roleMenu .depart_link .arr_div{
    display: flex;
    align-items: center;
    justify-content: center;
   /* border-left: 1px solid #C1CCD8;*/
    padding: 0 0.7rem 0 1.3rem;
}
.roleMenu .logOut_link .arr_div{ border-left: 0}
.roleMenu .depart_link .arr_div:before{
    content: "\e907";
    font-family: sylexfont;
    font-size: 0.7rem;
    font-weight: bold;
    color: #0957DE;
}
.roleMenu .depart_link.open .arr_div:before{
    content: "\e9a8";

}
.roleMenu .depart_link.current .arr_div:before{color: #fff;}
.roleMenu .depart_link.open .depart_cont{
    display: block;
    border: 1px solid #F1F4FA;
    border-radius: 0 0 8px 8px;
    padding: 0 1rem;
}
.roleMenu .depart_link.current .depart_cont{
    border: 1px solid #0957DE;
}
.roleMenu .app_link{
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.9375rem;
    font-weight: 400;
    border-bottom: 1px solid #F1F4FA;
    padding:0.75rem 0.75rem 0.75rem 0;
    cursor: pointer;
}
.roleMenu .mobile_menu .app_link{
    font-weight: 700;
    font-size: 0.875rem;
    color: #4B698A;
    border-bottom: 1px dashed #E6EAF3;
}
.roleMenu .app_link .icon_app{
    width: 2.5rem;
    height: 2.5rem;
    flex-shrink: 0;
    text-align: center;
    font-size: 1.5rem;
    color: #444C5B;
    background: #F1F4FA;
    border-radius: 8px;
    margin-right: 1rem;
}
.roleMenu .mobile_menu .app_link .icon_app{
    font-size: 1.25rem;
    color: #738EAB;
    background: none;
}
.roleMenu .app_link.current .icon_app{
    color: #fff;
    background: #0957DE;
}
.roleMenu .app_link .icon_app:before{
    line-height: 2.5rem;
}
.roleMenu .app_link div{
    width: 100%;
    /*max-height: 2.5rem;*/
    text-align: left;
    padding-right: 1rem;
}
.roleMenu .app_link em{
    font-size:0.9375rem;
    color: #73AC57;
}
.roleMenu .mobile_menu .app_link .icon_app{
    height: auto;
    font-size: 1rem;
}
.roleMenu .mobile_menu .app_link .icon_app:before{
    line-height: 1;
}
.roleMenu .mobile_menu .app_link em {
    font-size: 0.75rem;
    color: #C1CCD8;
}
.roleMenu .mobile_menu .sub_menu{
    position: relative;
    border-top: 2px solid #C1CCD8;
    margin-top: -2px;
}
.roleMenu .mobile_menu .sub_menu .app_link .icon_app{ display: none}
.roleMenu .mobile_menu .sub_menu .app_link{ border-bottom-style: solid }
.roleMenu .mobile_menu .sub_menu .app_link.current em{ font-size: 1rem; color: #0957DE}
.roleMenu .logOut_link .arr_div:before{
    content: "\e9d2";
    font-size: 1.2rem;
    color: #4B698A;
}
.roleMenu .account_links{
    display: flex;
    padding-top: 1rem;
}

.roleMenu .account_links > div{
    flex: 1;
}
.roleMenu .account_links > div:first-child{
    margin-right: 1rem;
}
.roleMenu .account_links em{
    font-size: 1rem;
    color: #4B698A;
}
.roleMenu .mobile_menu{
    display: none;
}
@media (max-width: 600px) {
    .roleMenu .mobile_menu{
        display: block;
    }
}