
  ion-content {
    --ion-background-color: whitesmoke;
}

    .sendCodeBtn{
        --background: #269DB8;
        color: white;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 12px;
        margin-left: 23px !important;
        margin-top: 15px !important;
        margin-bottom: 20px !important;
        /* border-radius: 4px; */
        height: 26px;
        /* padding: 6px 24px; */
        font-size: 15px;
        width: 322px;
        }

        .empty-en{
            color: black;
            text-align: center;
            font-size: 15px;
            font-family: WorkSans-Bold;
            margin: 50px 0px 0px 100px;
        }
        .empty-ar{
            color: black;
            text-align: center;
            font-size: 15px;
            font-family: WorkSans-Bold;
            margin: 50px 100px 0px 0px;
        }

        .result-container{
            // position: relative;
            // background: white;
           
            // border-radius: 20px;
            // z-index: 1;
            // margin: 15px;
            // border-radius: 10px;
            // border: 1px solid #ccc;
            background: #FFFFFF 0% 0% no-repeat padding-box;
            box-shadow: 0px 0px 5px #00000029;
            border-radius: 10px;
            opacity: 1;
        }

        .result-containerList{
            // position: relative;
            // background: white;
            // border-radius: 20px;
            // z-index: 1;
            // margin: 15px;
            // border-radius: 10px;
            // border: 1px solid #ccc;
            background: #FFFFFF 0% 0% no-repeat padding-box;
            box-shadow: 0px 0px 5px #00000029;
            border-radius: 10px;
            opacity: 1;
        }
        .text{
            text-align: left;
            /* font-family: var(--fontFamilyPoppins-Medium, inherit); */
            font-family: var(--fontFamilyPoppins-SemiBold, inherit);
            line-height: 11px;
            font-size: 16px;
            letter-spacing: -0.64px;
            color: #2B353E;
            opacity: 1;
            
        }

        .text-ar{
            text-align: right;
            /* font-family: var(--fontFamilyPoppins-Medium, inherit); */
            font-family: var(--fontFamilyPoppins-SemiBold, inherit);
            line-height: 11px;
            font-size: 16px;
            letter-spacing: -0.64px;
            color: #2B353E;
            opacity: 1;
            
        }
        @media screen and (min-width: 1px) and (max-width:320px) {
        .date{
            // margin-right: -38px;
            color: gray;
            font-size: 12px;
            margin-left: -44px;
        }}

        @media screen and (min-width: 325px) {
        .date{
            // margin-top: -9px;
            margin-right: -49px;
            color: gray;
            font-size: 12px;
        }}

        @media screen and (min-width: 1px) and (max-width:320px) {
            .date-ar{
                // margin-right: -38px;
                color: gray;
                font-size: 10px;
                margin-left: 58px;
            }}
    
            @media screen and (min-width: 325px) {
            .date-ar{
                // margin-top: -9px;
                margin-right: -49px;
                color: gray;
                font-size: 12px;
            }}

        .labels{
            // font-size: 13px;
            // margin-bottom: 0px;
            // margin-top: -10px;
            // color: #a9a5a5;
            // font-family: 'WorkSans-bold';
            text-align: left;
            font-family: var(--fontFamilyPoppins-SemiBold, inherit);
            // font-weight: 600;
            line-height: 20px;
            font-size: 13px;
            // font: normal normal 600 13px/20px Poppins;
            letter-spacing: -0.52px;
            color: #A2A2A2;
            opacity: 1;
            padding-bottom: 3px;
        }
        .labels-ar{
            // font-size: 13px;
            // margin-bottom: 0px;
            // margin-top: -10px;
            // color: #a9a5a5;
            // font-family: 'WorkSans-bold';
            text-align: right;
            font-family: var(--fontFamilyPoppins-SemiBold, inherit);
            // font-weight: 600;
            line-height: 20px;
            font-size: 13px;
            // font: normal normal 600 13px/20px Poppins;
            letter-spacing: -0.52px;
            color: #A2A2A2;
            opacity: 1;
            padding-bottom: 3px;
        }
        .request-list-container {
            position: relative;
            padding-left: 37px;
            clear: both;
            min-height: 200px;
            padding-top: 15px;
            }
            .request-list-container:before{
            content: "";
            position: absolute;
            height: 100%;
            width: 4px;
            left: 7px;
            top: 15px;
            background-color: #f5f4f4;
            }
            .request-list-container-ar {
                position: relative;
                padding-left: 60px;
                clear: both;
                min-height: 200px;
                // margin-bottom: 80px;
                padding-top: 15px;
                }
                .request-list-container-ar:before{
                content: "";
                position: absolute;
                height: 100%;
                width: 4px;
                left: 30px;
                top: 15px;
                right: 6px;
                background-color: #dddddd;
                }

                .text-span {
                     position: relative;
                     display: block;
                    letter-spacing: -0.64px;
                    color: #2B353E;
                    opacity: 1;
                    // font-weight: 600;
                    font-family: var(--fontFamilyPoppins-SemiBold, inherit);
                    line-height: 25px;
                    font-size: 16px;
                    }
                    .text-span:before{
                    content: "";
                    position: absolute;
                    left: -35px;
                    border-radius: 50%;
                    width: 15px;
                    height: 15px;
                    background-color: #269db8;
                    top: 1px;   
                    }
                    
                    .text-span-ar{
                        position: relative;
                     display: block;
                    letter-spacing: -0.64px;
                    color: #2B353E;
                    opacity: 1;
                    // font-weight: 600;
                    font-family: var(--fontFamilyPoppins-SemiBold, inherit);
                    line-height: 25px;
                    font-size: 16px;
                    margin-right: 37px;
                        }
                        .text-span-ar:before{
                            content: "";
                            position: absolute;
                            right: -35px;
                            border-radius: 50%;
                            width: 15px;
                            height: 15px;
                            background-color: #269db8;
                            top: 1px;  
                        }

                        .action-data{
                            background-color: white;
                            padding: 1px;
                            border-radius: 20px;
                            font-family: WorkSans-Regular;
                            // padding-left: 15px;
                            margin-right: 20px;
                            margin-bottom: 15px;
                            p{
                                // font-size: 14px;
                                text-align: left;
                                letter-spacing: -0.52px;
                                color: #535353;
                                opacity: 1;
                                //font-weight: 500;
                                font-family: var(--fontFamilyPoppins-Medium, inherit);
                                line-height: 18px;
                                font-size: 13px;
                            }
                            }

                            .action-data-ar{
                                background-color: white;
                                padding: 1px;
                                border-radius: 20px;
                                font-family: WorkSans-Regular;
                                // padding-left: 15px;
                                margin-right: 20px;
                                margin-bottom: 15px;
                                p{
                                    // font-size: 14px;
                                    text-align: right;
                                    letter-spacing: -0.52px;
                                    color: #535353;
                                    opacity: 1;
                                    //font-weight: 500;
                                    font-family: var(--fontFamilyPoppins-Medium, inherit);
                                    line-height: 18px;
                                    font-size: 13px;
                                }
                                }
                            .date-span{
                                text-align: right;
                                
                                font-family: var(--fontFamilyPoppins-SemiBold, inherit);
                                //font-weight: 600;
                                line-height: 20px;
                                font-size: 13px;
                                // font: normal normal 600 13px/20px Poppins;
                                letter-spacing: -0.52px;
                                color: #A2A2A2;
                                opacity: 1;
                            }
    //                         @media screen and (min-width: 325px){
    //                 .date-span{
    //                     font-size: 13px;
    //                     margin-bottom: 0px;
    //                     margin-top: -10px;
    //                     color: gray;
    //                     margin-left: 160px;

    //                 }}
    //                 @media screen and (min-width: 1px) and (max-width:320px) {
    //                 .date-span{
    //                     font-size: 13px;
    //                     margin-bottom: 0px;
    //                     margin-top: -10px;
    //                     color: gray;
    //                     margin-left: 76px;

    //                 }}

    //                 @media screen and (min-width: 1px) and (max-width:320px) {
    //                       .date-span-ar{
    //                        font-size: 13px;
    // margin-bottom: 0px;
    // margin-top: -10px;
    // color: gray;
    // margin-right: 60px;
    //                 }}

    //                 @media screen and (min-width: 325px){
    //                     .date-span-ar{
    //                   font-size: 13px;
    //                   margin-bottom: 0px;
    //                   margin-top: -10px;
    //                   color: gray;
    //                   margin-right: 140px;
    //               }}

                    
    .New{
        margin-top: 5px;
        color: #1FA169;
         font-family:'WorkSans-bold';
    }

    .ReOpen{ margin-top: 5px;
        color: #1FA169;
         }
    .AssToManager{ margin-top: 5px;
        color: #259CB8;
         }
     .AssToSpec{ margin-top: 5px;
        color: #259CB8;
         }
     .Pending{ margin-top: 5px;
        color: #E29D03;
        }
     .BackToSpec{ margin-top: 5px;
        color: #3A476E;
         }
     .Closed{ margin-top: 5px;
        color: #CA3332;
       }
     .BackToManager{ margin-top: 5px;
        color: #3A476E;
         }
     .AssignedToHR{ margin-top: 5px;
        color: #259CB8;
        }

        // .card-content{
        // margin-left: -3px; margin-right: -9px;}
        // .card-content-ar{
        //     margin-left: -122px;
        // }


        .status{
            text-align: left;
            /* font: normal normal 600 10px/16px Poppins; */
            letter-spacing: -0.4px;
            opacity: 1;
            
            font-family: var(--fontFamilyPoppins-SemiBold, inherit);
            //  font-weight: 600;
            line-height: 16px;
            font-size: 10px;
            color: #269db8;
        }
        .postedDate{
            text-align: left !important;
            //  font-weight: 600;
            font-family: var(--fontFamilyPoppins-SemiBold, inherit);
            line-height: 16px !important;
            font-size: 10px !important;
            letter-spacing: -0.4px !important;
            color: #969696 !important;
            opacity: 1 !important;
        }
        .DescrText{
            text-align: left;
            // font: normal normal medium 13px/18px Poppins;
            letter-spacing: -0.52px;
            color: #535353;
            opacity: 1;
            // font-weight: 500;
            font-family: var(--fontFamilyPoppins-Medium, inherit);
            line-height: 5px;
            font-size: 13px;
        }
        .DescrText-ar{
            text-align: right;
            // font: normal normal medium 13px/18px Poppins;
            letter-spacing: -0.52px;
            color: #535353;
            opacity: 1;
            // font-weight: 500;
            font-family: var(--fontFamilyPoppins-Medium, inherit);
            line-height: 5px;
            font-size: 13px;
        }
        .div{
            position: relative;
            display: flex;
            justify-content: space-between;
            margin-bottom: -12px;
        }

