body {
    font-family: 'Century Gothic','Arial Rounded MT','sans-serif';
    background-color:#f1f2f6;
    scroll-behavior:smooth;
}

* {
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    font-size:85%;
}

.Main_content_margin {
    margin-left: 300px;
    top: 100px;
    height: 100vh;
    transition: all 0.5s;
    
    padding:20px;
}

.top_horizontal_menu {
    width: 100%;
    height: 60px;
    padding-left:20px;
    display:flex;
    align-items:center;
    position:fixed; 
    z-index:4;
}

.BigImageCovers {
    display: none;
}

    .BigImageCovers.active {
       
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        position: fixed;
        background-color: rgba(0,0,0,0.5);
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 100;
    }

.BigImageInner {
    padding:20px;
    width:50%;
    height:90%;
    
    
 
}

.BigImageInner img{
    width:100%;
    height:100%;
    object-fit:contain;

}
.Close_BigPhoto {
    font-size: xx-large;
    color: white;
    font-weight: bolder;
    z-index: 7;
    padding: 10px;
    width: 50px;
    height: 50px;
    position: absolute;
    right: 50px;
    top: 50px;
    color: White;
    cursor: pointer;
}
    .Close_BigPhoto:hover {
        color:wheat;
    }

.topbar_companydetails {
    display: none;
    align-items: center;
    padding: 10px;
    cursor: pointer;
}
.topbarimg_div{
    width:30px;
}

.topbarimg_div img{
    width:100%;
    object-fit:scale-down;
}

.topbar_companyname {
    font-size:small;
    font-weight:bolder;
}
.topmenu_right_divs{
    display:flex;
    width:100%;
    align-items:center;
    justify-content:end;
   
    padding:10px;
    cursor:pointer;
}
.notification_div {
    padding: 2px 5px 2px 5px;
    background-color: rgba(255, 255, 255,0.3);
    border: 1px solid rgba(128, 128, 128,0.3);
    box-shadow: 5px 2px, 2px, 5px rgba(128, 128, 128,0.3);
    border-radius: 5px;
    margin-right: 15px;
}
.messagin_div {
    padding:2px 5px 2px 5px;
    background-color: rgba(255, 255, 255,0.3);
    border: 1px solid rgba(128, 128, 128,0.3);
    box-shadow: 5px 2px, 2px, 5px rgba(128, 128, 128,0.3);
    border-radius: 5px;
    margin-right: 15px;
}
.theams_div {
    padding: 2px 5px 2px 5px;
    background-color: rgba(255, 255, 255,0.3);
    border: 1px solid rgba(128, 128, 128,0.3);
    box-shadow: 5px 2px, 2px, 5px rgba(128, 128, 128,0.3);
    border-radius: 5px;
    margin-right: 15px;
}
.useraccont_div {
    width: 40px;
    height:40px;
    border-radius: 100%;
    
}
    .useraccont_div img {
        width: 100%;
        height: 100%;
        object-fit: fill;
        border-radius: 100%;
        transition: 0.5s
    }

        .useraccont_div img:hover{
            border:solid 1px rgba(128, 128, 128,0.3);
            transition:0.5s;
        }

        .useraccont_div a:hover {
            text-decoration: none;
        }

    .drop_menu {
        width: 400px;
        border: 1px solid rgba(128, 128, 128,0.3);
        box-shadow: 1px 1px 25px 1px rgba(0, 0, 0, 0.05);
        position: absolute;
        right: -10px;
        top: 35px;
        border-radius: 10px;
        visibility: hidden;
        transition: all 0.5s;
    }
   .drop_menu.active {
        width: 400px;
        border: 1px solid rgba(128, 128, 128,0.3);
        box-shadow: 1px 1px 25px 1px rgba(0, 0, 0, 0.05);
        position: absolute;
        min-height: 300px;
        right: -10px;
        top: 30px;
        border-radius: 10px;
        visibility: visible;
        transition: min-height 0.5s;
    }


.msg_dropmenu.active {
    width: 400px;
    border: 1px solid rgba(128, 128, 128,0.3);
    box-shadow: 1px 1px 25px 1px rgba(0, 0, 0, 0.05);
    position: absolute;
    min-height: 300px;
    right: -10px;
    top: 30px;
    border-radius: 10px;
    visibility: visible;
    transition: all 0.5s;
}


.msg_dropmenu {
    width: 400px;
    border: 1px solid rgba(128, 128, 128,0.3);
    box-shadow: 1px 1px 25px 1px rgba(0, 0, 0, 0.05);
    position: absolute;
    right: -10px;
    top: 35px;
    border-radius: 10px;
    transition: all 0.5s;
    visibility: hidden;
}

.arrow_up {
    position: absolute;
    top: -28px;
    right: 0px;
    color: white;
    box-shadow: 1px 1px 25px 1px rgba(0, 0, 0, 0.05);
}
.close_btn{
    right:5px;
    position:absolute;
    padding:10px;
    cursor:pointer;
    z-index:6;
}
.close_btn:hover {
    color:#9b2a2a;

}
.close_btn_position{
    top:0px;
   
}
.closeside_btn {
    right: 5px;
    position: absolute;
    padding: 10px;
    cursor: pointer;
    z-index: 6;
    top:60px;
    color:black;
    font-size:xx-large;
}

    .closeside_btn:hover {
        color: #9b2a2a;
    }


    .theme_dropmenu {
        position: absolute;
        width: 200px;
        right: -7px;
        top: 35px;
        border: 1px solid rgba(128, 128, 128,0.3);
        box-shadow: 1px 1px 25px 1px rgba(0, 0, 0, 0.05);
        border-radius: 5px;
        transition: all 0.5s;
        visibility: hidden;
    }

    .theme_dropmenu.active {
        position: absolute;
        min-height: 40px;
        width: 200px;
        right: -7px;
        top: 30px;
        border: 1px solid rgba(128, 128, 128,0.3);
        box-shadow: 1px 1px 25px 1px rgba(0, 0, 0, 0.05);
        border-radius: 5px;
        transition: all 0.5s;
        visibility: visible;
    }
.them_items{
    padding:15px;
}
.dfltcolor {   
    color: #ffd800;
    padding:0px 10px 0px 0px;
}
.darkcolor {
    color: #111;
    padding: 0px 10px 0px 0px;
}
.lightcolor {
    color: #b2b0b0;
    padding: 0px 10px 0px 0px;
}

.useraccontdrop_menu {
    position: absolute;
    min-height: 0px;
    width: 200px;
   right: -7px;
    top: 40px;
    border: 1px solid rgba(128, 128, 128,0.3);
    box-shadow: 1px 1px 25px 1px rgba(0, 0, 0, 0.05);
    border-radius: 5px;
    transition: all 0.5s;
    visibility: hidden;
}

    .useraccontdrop_menu.active {
        position: absolute;
        min-height: 100px;
        width: 200px;
        right: -7px;
        top: 30px;
        border: 1px solid rgba(128, 128, 128,0.3);
        box-shadow: 1px 1px 25px 1px rgba(0, 0, 0, 0.05);
        border-radius: 5px;
        transition: all 0.5s;
        visibility: visible;
    }

.My_Sidebar {
    width: 300px;
    height: 100vh;
    margin-left: 0px;
    border-right: 1px solid rgba(128, 128, 128,0.9);
    position: fixed;
    transition: all 0.5s;
}

/*active class*/
    .My_Sidebar.active {
        margin-left: -300px !important;
        transition: all 0.5s ease;
    }

.Main_content_margin.active {
    margin-left: 0px;
    top: 100px;
    transition: all 0.5s;
    height: 100vh;
}
.topbar_companydetails.active{
    display:flex;
    align-items:center;
    padding:10px;
}


/*active class*/
.menu_bar_icon {
    cursor: pointer;
}

.my_sidebar_header {
    margin-top: 60px;
    height: 250px;
    width:100%;
    display: flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;    
}
.atualimg {
    width: 120px;
}

.my_sidebar_header_img11 img {
    object-fit: scale-down;
}

.side_bar_header_tiltle {
    font-weight:bolder;
    font-size:xx-large;
}

.side_menu_item {
    height: 60%;
    overflow-y: auto !important;
    font-size: 15px;
    
}
.side_menu_item ul li {
    list-style: none;
    list-style-type: none;
    padding: 5px;
}
#accord_ion li {
    cursor: pointer;
}



.side_menu_item ul li ul li a {
    text-decoration: none;
    width: 100%;
}

.side_menu_item ul li a {
    text-decoration: none;
    width:100%;
}

.side_menu_item ul li a:hover {
    text-decoration: none;
}


    .menu_item_head{
    align-items:center;
    display:flex;
    cursor:pointer;
    padding:15px;
}

.icon_margin {
    margin-right:20px;
}

.icon_margin2 {
    right: 20px;
    position:absolute;
    transform:rotate(90deg);
    font-size:small;
    font-weight:bold;
}

#accord_ion {
    margin:0px!important;
    padding:0px!important;
    position:relative;
 
    
}

    #accord_ion .menu_items_list {
        margin: 0px;
      max-height: 0px;
    
       visibility: hidden;
       overflow: hidden;
        transition: all 0.5s;
    }
#accord_ion label + input[type="radio"]{
    display:none;
}
    #accord_ion label + input[type="radio"]:checked + .menu_items_list {
        max-height: 350px;
        visibility: visible;
    }
     


    .accord_ion_list {
        border-bottom: 1px solid rgba(128, 128, 128,0.3);
    }
    

    ::-webkit-scrollbar {
        width: 7px;
    }

/* Track */
::-webkit-scrollbar-track {
    border-radius: 5px;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #b2b0b0;
    border-radius: 3px;
}




.mybgchange {
    background-color: #ffd800 !important;
}

/*panel class*/
.panel_body{
    width:100%;
    margin-left:auto;
    margin-right:auto;
    border:1px solid rgba(128, 128, 128,0.3);
   
    min-height:350px;


}
.panel_head {
    width: 100%;
    min-height: 40px;
    padding: 15px;
    display:flex;
    justify-content:space-between;
    align-items:center;
}
pannel_Title {
    
    font-size: large;
    
}

.panel_content{
    padding:10px 20px 10px 20px;
    background-color:white;
}



.panel2_body {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    border: 1px solid rgba(128, 128, 128,0.3);
    min-height: 350px;
}

.panel2_head {
    width: 100%;
    min-height: 40px;
    padding: 15px;
}

.pannel2_Title {
    display: flex;
    justify-content: space-between;
    font-size: small;
}

.panel2_content {
    padding: 10px 20px 10px 20px;
    background-color: white;
    
}
.panel2_flexing{
    display:flex;
    align-items:center;
    justify-content:space-evenly;
}
.pannel2_dropdown{
    min-width:200px;
}
/*panel class ends*/
/*employee clas*/
.guard_innerform {
    display: grid;
    grid-gap: 3em;
    grid-template-columns:repeat(3,1fr);
   /* grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));*/
    padding: 10px;
}
    .guard_innerform > div:nth-child(2){
        grid-column:span 2;
    }

.FormDivisionInner {
    display: grid;
    grid-gap: 3em;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    padding: 10px;
}

.form_disc {
    color: #222222;
    font-weight: bold;
    padding: 20px;
    font-size: small;
}

.next_previous_div{
    display:flex;
    align-items:center;
    justify-content:space-between;
}
/*employee class*/


/*dropdown style for phone numbers*/
.phone_drop_div{
    display:flex;    
    align-items:flex-end;
    align-content:center;
    justify-content:space-between;
}
.phone_drop_inner{
    display:flex;
    align-items:center;
}
.primary_phone_div{
    flex:0.8;
}

.dropimg {
   
    width: 100%;
    height: 200px;
    overflow-y: scroll;
    position: absolute;
   top:35px;
    border:1px solid rgba(128, 128, 128,0.3);
    background-color: whitesmoke;
    z-index: 1;
    cursor:pointer;
}

    .dropimg ul {
        list-style: none;
    }

        .dropimg ul li {
           padding:5px;
        }
            .dropimg ul li img {
       width: 20px;
       padding-right:5px;
   }

        .dropimg ul li:hover {
            background-color: #008ef8;
            color: white;
            font-weight: bold;
        }

.border_topdashed{
    border-top:dashed 1px rgba(128, 128, 128,0.9);
    padding:20px;
}
/*dropdown style for phone numbers*/
/*styling membership registration form*/
input,select,textarea {
    border: 1px solid rgba(128, 128, 128,0.3);
    width: 100%;
    border-radius: 5px;
    height: 40px;
    padding: 5px;
}
    input:focus, textarea, select:focus {
        stroke: none;
        outline: none;
        border-color: #43d1ff;
    }

.children_div {
    display: grid;
    grid-gap: 2em;
    grid-template-columns: repeat(auto-fit, minmax(200px,1fr))
}
.righ_group{
    border:1px solid rgba(128, 128, 128,0.3);
    padding:20px;
}

.panel_grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
    grid-gap:3em;
}
.display_image{
    width:180px;
    height:180px;
    border:1px solid rgba(128,128,128,0.3);
    border-radius:5px;
    cursor:pointer;
   
}

    .display_image img {
        width:100%;
        height:100%;
        object-fit:fill;
    }

.display_image2 {
    width: 180px;
    height: 129px;
    border: 1px solid rgba(128,128,128,0.3);
    border-radius: 5px;
    object-fit:contain;  
    flex:1;
  
}


    .display_imgflex {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }

.display_image img {
    object-fit: contain;
}



.displayProduct_image {
    width: 200px;
    height: 200px;
    /*border: 1px solid rgba(128,128,128,0.3);*/
    border-radius: 5px;
    /* flex:1;*/
}

.displayProduct_image img{
    object-fit:contain;
}


.spilt_of_label_img {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(200px,1fr));
    grid-gap: 2em;
    border-top: dashed 1px rgba(128, 128, 128,0.3);
    padding-top: 15px;
}
.promotion_point_container {
    width: 100%;
    min-height: 350px;
    margin-left: auto;
    margin-right: auto;
    border-top: dashed 1px rgba(128, 128, 128,0.3);
    padding-top: 15px;
}
.promotion_div{
    justify-self:center;
}
.promotion_div {
    width:100%;
}

.center_imagandbutton{
    display:flex;
    flex-direction:column;   
    align-items:center;       
}

.center_imagandbutton2 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}




.mutiline_text_box {
    width: 100%;
    height: 150px;
    border: 1px solid rgba(128, 128, 128,0.3);
    border-radius: 5px;
    padding: 5px;
    overflow-y:auto;
}

    .mutiline_text_box:focus {
        stroke: none;
        outline: none;
        border-color: #43d1ff;
    }

.mutiline_text_box2 {
    width: 100%;
    min-height: 300px;
    border: 1px solid rgba(128, 128, 128,0.3);
    border-radius: 5px;
    padding: 5px;
}

.mutiline_text_box2:focus {
    stroke: none;
    outline: none;
    border-color: #a11919;
}

    /*class for search panel*/
    .search_grid{
        display:flex;
        align-items:center;
        gap:5px;
        flex-wrap:wrap;
    }
.margin_right{
    margin-right:5px;
}

.search_button_group {
    display: flex;
    align-items: center;
}
/*class for search panel*/


/*class for employee profile*/
.childlist_drop{
    min-height:100px;
    max-width:550px;
    box-shadow:2px 2px 5px 2px rgba(128, 128, 128,0.4);
    position:absolute;
    padding:20px;
    cursor:pointer;
    visibility:hidden;
}

.childlist_drop.active {
    visibility: visible;
   /*overflow-x:auto;*/
}

.associte_grid{
    display:grid;
    grid-gap:3em;
    grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
}
.associat_ovelflow {
   
    overflow-y: scroll;
}
.division_dotline {
    border-top: dashed 1px rgba(128, 128, 128,0.3);
    padding-top: 15px;
   grid-column:1 / span 2;
}
/*class for employee profile ends*/

/*class for qualities*/
.btn_flex{
    display:flex;
    justify-content: space-between;
    flex-wrap:wrap;
}
.PrintEditButtons{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    align-items:center;
}
/*class for qualities ends*/

.UserDummy{
    width:80px;
    height:80px;
}

    .UserDummy img{
        width:100%;
        height:100%;
        object-fit:contain;
    }

.Mviewlink_btn {
    text-decoration: none;
    color: white;
    width: inherit;
    height: inherit;
    padding: 10px;
    font-size: smaller;
    font-family: "Calibri";
}

.MainMobileViewWrapper {
    display: grid;
    background-color: white;    
    grid-gap: 2em;
    padding: 20px;
    border-radius: 10px;
    font-size: small;
    border: 1px solid rgba(0,0,0,0.2);  
}

.MainMobileViewInner {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(150px,1fr));
    grid-gap: 1.5em;
    cursor:pointer;
}

.TaskCover{
    padding:20px;
}

.MviewGrid {
    display: none;
}

.PcViewGrid {
    display: block;
    
}

.M-ViewBtnSection {
    display: flex;
    justify-content: space-between;   
    
   
}
/*media qeuries*/
@media screen and (max-width:800px) {
    .guard_innerform > div:first-child {
        grid-column: span 3;
    }
    .guard_innerform > div:nth-child(2) {
        grid-column: span 3;
    }


    /*for mobile grid view starts*/
    .MainMobileViewWrapper {           
            background-color: white;                      
            padding: 20px;
            border-radius: 10px;
            font-size: small;
            border: 1px solid rgba(0,0,0,0.2);
           
        }
    .MainMobileViewInner {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-gap: 1.5em;
    }

    .PcViewGrid {
        display: none;
    }
        .MviewGrid {
            display: block;
        }
        .search_grid {
        width: 100%;
       /*background-color: antiquewhite;*/
       flex-direction:column;
    }

    .margin_right{
        margin-right:0px;
       width:100%;
    }

    .search_grid input[type="text"] {
        width: 100%;
    }

    .search_button_group {
        width:100%;
        display: flex;
        margin-top:10px;
        justify-content:space-between;
    }

    .Main_content_margin {
        margin-left: 0px;
        top: 100px;
        transition: all 0.5s;
        height: 100vh;
    }

    .My_Sidebar {
        width: 300px;
        height: 100vh;
        margin-left: -300px;
        border-right: 1px solid rgba(128, 128, 128,0.9);
        position: fixed;
        transition: all 0.5s ease;
    }


        /*active class*/
        .My_Sidebar.active {
            margin-left: 0px !important;
            transition: all 0.5s;
        }

    .Main_content_margin.active {
        margin-left: 300px;
        top: 100px;
        transition: all 0.5s;
        height: 100vh;
    }

    .topbar_companydetails {
        display: flex;
        align-items: center;
        padding: 10px;
    }

        .topbar_companydetails.active {
            display: none;
            align-items: center;
            padding: 10px;
        }

    /*active class*/

    .promotion_point_container {
        width: 100%;
       
    }
    .MakeWidth100 {
        width:100% !important;
    }

        .panel_head {
            width: 100%;
            min-height: 40px;
            padding: 15px;
            display: flex;
            flex-direction:column;
        }
    
}
/*media qeuries 800px ends*/
/*class for leave request form*/
.actions_droplist {
    width: 200px;
    border: 1px solid rgba(128, 128, 128,0.3);
    box-shadow: 1px 1px 25px 1px rgba(0, 0, 0, 0.05);
    cursor:pointer;
    position: absolute;   
   right: -10px;
    top: 30px;   
    border-radius: 10px;
    display:none;
    z-index:2;
}

.actiondropmenu:hover .actions_droplist {
    width: 200px;
    border: 1px solid rgba(128, 128, 128,0.3);
    box-shadow: 1px 1px 25px 1px rgba(0, 0, 0, 0.05);
    cursor: pointer;
    position: absolute;
    right: -10px;
    top: 30px;
    border-radius: 10px;
    display: block;
    z-index: 2;
}

.actions_droplist.active {
    width: 200px;
    border: 1px solid rgba(128, 128, 128,0.3);
    box-shadow: 1px 1px 25px 1px rgba(0, 0, 0, 0.05);
    cursor: pointer;
    position: absolute;
    right: -10px;
    top: 50px;
    border-radius: 10px;
    display: block;
    z-index: 2;
}

    .actions_droplist > div {
        padding: 10px;
        border-bottom: 1px solid rgba(128, 128, 128,0.3);
    }



.link_btn {
    text-decoration: none;
    color: black;
    padding-left: 5px;
    width: 100% !important;
    font-family: 'Segoe UI', 'Tahoma', 'Geneva', 'Verdana', 'sans-serif';
}

.linkbtnstyle {
    
    width: 100% !important;
    height:100%!important;
    font-weight:normal;
}

.link_btn2 {
    text-decoration: none;
    color: black;
    
}

    .link_btn2:hover {
        color: #9b2a2a;
    }
.link_btnprimary {
    text-decoration: none;
    color:black;
    padding-left:5px;
   
    color:#0366D6;
}
.link_btnwarning {
    text-decoration: none;
    color: black;
    padding-left: 5px;
    width: 100%;
    color: #FF9447;
}

.link_btnalert {
    text-decoration: none;
    color: black;
    padding-left: 5px;
    width: 100%;
    color: #CE352C;
}

.link_btn_display{
    display:flex;
    justify-content:space-evenly;
}

.link_btn_display2 {
    display: flex;
    justify-content: space-evenly;
}

.link_btn span {
    padding-right: 7px;
  /* font-family:'Segoe UI', 'Tahoma', 'Geneva', 'Verdana', 'sans-serif';*/

}

.actiondropmenu {
    display: block;
    cursor:pointer;
    text-align:center;
    align-items:center;
    background-color:#be1d1d;
    color:white;
    padding:10px;
}

.link_btn_display {
    display: none;
}
.top_requestbtns{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:5px;
    margin-bottom:10px;
    border-bottom:dotted 1px rgba(128, 128, 128,0.3);
}
/*class for leave request form*/

/*class for clientsite assignment*/
.MobilViewButtons {
    display: none;
}
    
/*class for client site assingment ends*/
/*class for modal*/
.DocModal {
    width: 70%;
    background-color: white;
    max-height: 800px;
    border-radius: 10px;
    padding: 10px;
}

.LiteralHolder {
    padding:10px;
    height: 100%;
    display: flex;
    flex-direction:column;
    object-fit: contain;
    align-items:center;
    align-content:center;
    justify-content: center;
    max-height:700px;
}
.DocControlCover {
    display: flex;
    align-content: center;
    align-items: center;
    justify-content: center;
    margin-top:auto;
    margin-right:auto;
    height: 50px;
}
.Prv_Doc {
    position: absolute;
    left: 0px;
    top:350px;
    z-index:6;
}
.Doc_control:hover {
    color: #9b2a2a;
    cursor: pointer;
    
}
.Next_Doc {
    position: absolute;
    right: 5px;
    top: 350px;
    z-index: 6;
}
 .dontshow{
     display:none;
 }
.dontshow.active {
    display: block;
}

.incraseDivLengh{
    flex:0.8;
}

.Table_grid{
    display:flex;
}
.Table_grid_flexpanel{
    flex:0.2;
    
}
.grid_flex1 {
    flex: 0.8;
}

.modal_background {
    width: 100%;
    height: 100%;
    background-color: rgba(128, 128, 128,0.3);
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 10;
    display: flex;
    align-content: center;
    align-items: center;
    justify-content: center;
}

.modal_boddy {
    width: 60%;
    max-height: 85%;
    border-radius: 5px;
   
}

.editmodal_boddy {
    width: 60%;
    max-height: 85%;
    border-radius: 5px;
   
}
@keyframes zoomIn {
    from {
        transform: scale(0)
    }

    to {
        transform: scale(1)
        
    }
    
}

.editmoda_content {
    max-height: 400px;    
    /*max-height: 80%;*/
    overflow-y: auto;
    padding: 20px;
}

.modal_head{
    min-height:70px;
    border-bottom:1px solid rgba(128, 128, 128,0.3);
}

.modal_head2 {
    display:flex;
    min-height: 70px;
    border-bottom: 1px solid rgba(128, 128, 128,0.3);
    justify-content:space-between;
    padding:20px;
}

.modal_title{
    padding:20px;
}
.moda_content {
    max-height: 400px;
    overflow-y: auto;
    padding: 20px;
}
.modal_content_grid {
    display: grid;
    grid-gap: 3em;
    grid-template-columns: repeat(auto-fit,minmax(200px,1fr));
    
}


.modal_footer {
   min-height: 80px;
   max-height:100px;
    border-top: 1px solid rgba(128, 128, 128,0.3);
   
  
}
.modalfooter_flex{
    display:flex;
    justify-content:space-between;
  align-items:center!important;
  padding:15px;
}


/*class for new modal*/
.NewModalCover {
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100vh;
    position: fixed;
    background-color: rgba(0,0,0,0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 5;
}

.NewModalBody {
    width: 65%;
    max-height: 85%;
    border-radius: 5px;
    margin-left: auto;
    margin-right: auto;
}

.NewModalHead {
    min-height: 80px;
    border-bottom: 1px solid rgba(0,0,0,0.2);
}

.NewModalHeadInner {
    padding: 10px;
}

.NewModalContent {
    max-height: 400px;
    overflow-y: scroll;
    padding: 20px;
    display: grid;
    grid-gap: 3em;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.NewModalFooter {
    height: 80px;
    border-top: 1px solid rgba(0,0,0,0.2);
}

.NewModalFooterInner {
    padding: 10px;
    display: flex;
    justify-content: space-between;
}

/*class for new modal*/

/*class for modal*/
@media screen and (max-width:870px) {

    .NewModalBody {
        width: 98% !important;
        max-height: 85%;
        border-radius: 5px;
        margin-left: auto;
        margin-right: auto;
    }

    .modal_boddy {
        width: 98% !important;
        max-height: 85%;
        border-radius: 10px;
        margin-left: auto;
        margin-right: auto;
    }

    .DocModal {
        width: 98%;
        background-color: white;
        max-height: 85%;
        border-radius: 10px;               
    }

    .Table_grid{
        display:flex;
        flex-direction:column;
    }

    .MobilViewButtons {
        display: flex;
        padding: 10px;
    }
}

@media screen and (max-width:1121px) {

    .pannel2_Title {
        flex-direction: column;
        align-items: flex-start;
    }

    .panel2_flexing {
        width: 100%;
        flex-direction: column;
        align-items: flex-start;
    }
    .pannel2_dropdown {
        min-width: 100%;
        padding: 5px;
    }

    
}

    @media screen and (max-width:1325px) {
        .phone_drop_div {
            flex-direction: column;
            justify-content: stretch !important;
        }

        .primary_phone_div {
            width: 100%;
            flex: 1;
        }

        .phone_drop_inner {
            width: 100%;
        }

        .scrol_table {
            width: 1000px;
        }

        .table_overscrol {
            overflow-x: auto;
        }

        .link_btn_display {
            display: flex;
        }

        .actiondropmenu {
            display: none;
        }

        .modal_boddy {
            width: 65%;
            max-height: 85%;
            border-radius: 10px;
            margin-left: auto;
            margin-right: auto;
        }

        .MobilViewButtons {
            display: flex;
            padding: 10px;
        }

        .NewModalBody {
            width: 98%;
        }
    }
    /*media qeuries ends*/

    /*class for alert*/

.alet_heading {
    padding: 15px;
    font-size: large;
    font-weight: bold;
    width: 100%;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.alert_icon{
    display:flex;
    align-items:center;
   
}

.myinfoalerttext {
    font-weight: bolder;
    color: rgb(11 173 234);
}

.myalertinfotext a {
    text-decoration: none;
    color: rgb(11 173 234);
}

.mydangeralerttext {
    font-weight: bolder;
    /* color: rgb(238, 100, 50);*/
    color: #901a1a;
}

.EmptyGridAlert td{
    background-color:rgba(178, 52, 52,0.3);
    font-weight: bolder;
    /* color: rgb(238, 100, 50);*/
    color: #901a1a;
    border-radius:5px;
    padding:5px;
}
/*class for alert*/
/*class for updateprogress*/
.progresdivpos {
    width: 150px;
}
.Loadinggif {
    width: 50px;
    color:rgba(255,255,255,0.9);
}

.progressdiv {
    top: 0px;
    left: 0px;
    display: flex;
    align-items:center;
    align-content:center;
    justify-content: center;
    z-index: 99;
    width: 100%;
    height: 100%;
    position: fixed;
    background-color: rgba(128, 128, 128,0.3);
    /* rgba(245, 245, 245,0.3)*/
}
    /*class for upate progress */

    /*class for adding css in grid on leave forms*/
.Dangerbadge {
    cursor: pointer;
    padding: 5px;
    height: 5px !important;
    background-color: goldenrod;
    color: white;
    border-radius: 360px;
}
.Approvedbadge {
    cursor: pointer;
    padding: 5px;
    height: 5px !important;
    background-color: darkgreen;
    color: white;
    border-radius: 360px;
}
.PendingLeave {
 cursor:pointer;
    padding:5px;
   height:5px!important;  
    background-color: goldenrod;
    color: white;
    border-radius: 360px;
}
.ApprovedLeave {
    cursor: pointer;
    padding: 5px;
    height: 5px !important;
    background-color: darkgreen;
    color: white;
    border-radius: 360px;
}

.CompletedLeave {
    background-color: #0366D6;
    color: white;
    cursor: pointer;
    padding: 5px;
    height: 5px !important;
    border-radius: 360px;
}

.DisApprovedLeave {
    background-color: red;
    color: white;
    cursor: pointer;
    padding: 5px;
    height: 5px !important;
    border-radius: 360px;
}
/*class for adding css in grid on leave forms*/

/*class for confirm alert*/
.confirmalertdan {
    background-color: white;
    width: 350px;
    min-height: 200px;
    font-size: small;
    border-radius: 5px;
    font-weight: bold;   
   /* margin: auto;*/
    display: flex;
    align-items: center;
    flex-direction: column;
}

.alet_heading {
    padding: 10px;
    font-size: large;
    font-weight: bold;
    width: 100%;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    text-align:center;
}

.okbtn {
    margin-bottom:0px;
}


/*class for confirm alert*/

/*class for add site map get location*/
.map_division1 {
    width: 100%;
    height: 400px;
}

#map {
    width: 100%;
    height: 400px;
}
#map2 {
    width: 350px;
    height: 350px;
    background-color:rgba(255, 255, 255,0.5);
    padding:10px;
    font-size:larger;
    text-align:center;
    font-weight:bold;
}
#StaffDetailMap {
    width: 100px;
    height: 250px;
    background-color:red;
}

.GetLocation_GPS {
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-content: center;
    border: 1px solid rgba(128, 128, 128,0.3);
    border-radius: 3px;
    padding: 3px;
}

.GetLocation_flex1{
    flex:1;
}

.GetLocation_flex2 {
    border-radius: 5px;
    border: none;
    align-items: center;
    align-content: center;
}



.AddBoderToDiv {
    border: 1px solid #43d1ff;
}

.Removebodercolor {
    stroke: none;
    outline: none;
    border:none;
    /*border-color: #43d1ff;*/
}

.getloc:focus {
    border: 1px solid #43d1ff;
}
/*class for add site map get location*/


/*class for clientandsites*/
.HideGridDropdown{
    display:none;
}

.HideGridDropdown.active {
    display: block;
}

.TocloseDropdown {
width:100%;
height:100%;
position:fixed;
top:0px;
left:0px;
/*background:rgba(128, 128, 128,0.3);*/
z-index:2;
display:none;
}

.TocloseDropdown.active {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0px;
    left: 0px;
    /*background:rgba(128, 128, 128,0.3);*/
    z-index: 2;
    display: block;
}



.ShowGridDropdown {
    display: block;
}




#MyGridDropdown {
    position: absolute;
    border: 1px solid rgba(128, 128, 128,0.3);
    padding: 10px;
    box-shadow: 1px 1px 5px rgba(128, 128, 128,0.3);
    background-color: white;
    border-radius: 5px;
    width: 100%;
  max-height:250px;
    overflow-y:scroll;
    cursor:pointer;
    z-index:3;
}

#MyOfficersGridDropDown {
    position: absolute;
    border: 1px solid rgba(128, 128, 128,0.3);
    padding: 10px;
    box-shadow: 1px 1px 5px rgba(128, 128, 128,0.3);
    background-color: white;
    border-radius: 5px;
    width: 100%;
    max-height: 250px;
    overflow-y: scroll;
    cursor: pointer;
    z-index: 3;
}

.search_box {
    z-index: 3;
    width: 35%;
}

.ClienDetailDiv { 
    padding: 5px;
}
.ClienDetailDiv:hover {
    background-color:#f1efef; 
    cursor:pointer;
}
.ClientName{
font-weight:bold;
font-size:medium;

}
.ClientPhone {
   color:silver;
    font-size: small;
}
.ClientAddress {
    color: silver;
    font-size: small;
}

.DropCoverDiv {
    padding: 5px;
    display: flex;
}

    .DropCoverDiv:hover {
        background-color: #f1efef;
    }

.DropInnerPohoto{
    width:50px;
    height:50px;
    border-radius:100%;
    margin-right:10px;
}

    .DropInnerPohoto img {
        width: 100%;
        height: 100%;
        object-fit: fill;
        border-radius: 100%;
    }

.rowheigt {
    height: 5px !important;
}

.MobileGridClientName {
    font-weight: bold;
    font-size:small;
}

.ShowgridDesktop {
    display: block;
}

.ShowgridMobile {
    display: none;
}


.mparog1{
    background-color:red;
    width:100%;
    height:100%;
    position:absolute;
}

#ModalSiteMap{
    width:100%;
    height:100%;
}
.editmodalalertt{
    flex:1;
    margin-right:10px;
}
.modal_title2{
    /*flex:0.18;*/
}

/*class for cornfirmation alert starts*/
.ConfirmAletMain{
    max-width:650px;
    border-radius:5px;
}
.ConfirmAletHead {
    font-weight: bolder;
    font-size: large;
    padding: 10px;
    border-radius: 5px;
}
.ConfirmAletButtons{
    display:flex;
    justify-content:space-evenly;
}
.ConfirmAlertBody{
    padding:15px;
    text-align:center;
    font-size:large;
}
/*class for clientcontracts starts*/
.NewContract {
    display: flex;
    justify-content: space-between;
    border-bottom: dashed 1px rgba(128, 128, 128,0.3);
}
/*class for client schedul start*/
.btn_flex2{
    display:flex;
}

.StaffSearchGrid {
    display: flex;
    gap:15px;
    
}

.MydetailmodalMap {
    width: 300px;
    position: absolute;
    height: 300px;
    /*box-shadow:2px 2px 2px 2px rgba(128, 128, 128,0.3);*/
    background-color: #eee;
    border: 1px solid #999;
    padding: 10px;
    border-radius: 5px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.2), 0 0 5px rgba(0, 0, 0, 0.2);
    z-index: 1;
    background-color: white;
}
/*class for client schedul ends*/
/*class for clientcontracts ends*/
/*class for cornfirmation alert ends*/

.index_z11{
    width:100%;
}

@media screen and (max-width:1600px) {
    .ShowgridDesktop {
        display: none;
    }

    .ShowgridMobile {
        display: block;
    }
}

    @media screen and (max-width:800px) {
        .childlist_drop{
            width:100%;
        }


        .Close_BigPhoto {
            position: absolute;
            right: -20px;
            top: 20px;
        }
        .BigImageInner {
            padding: 20px;
            width: 90%;
        }
        .ConfirmAletMain {
            width: 95%;
            border-radius: 5px;
        }
        .GridMobleLeftMargin{
            margin-left:10px;
        }

        .search_box {
            z-index: 3;
            width: 100%;
        }

        #map2 {
            width: 100px;
        }

        .NewContract2 {
            flex-direction: column;
            width: 100%;
        }

        .editmodal_boddy {
            width: 98%;
            max-height: 85%;
            border-radius: 10px;
            
        }

        .editmoda_content {
            max-height: 400px;
            overflow-y: auto;
            padding: 20px;
        }
    }
    /*class for clientsandsites*/

    /*class for admin dashboard*/
    .dashgrid1 {
        display: grid;
        grid-gap: 3em;
        grid-template-columns: repeat(auto-fit, minmax(200px,1fr));
    }

    .dashelement {
        min-height: 150px;
        width: 100%;
        padding: 15px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        border-radius: 10px;
        cursor:pointer;
        transition:0.5s;
    }

        .dashelement:hover{
            transform:scale(0.9);
            transition:0.5s;
        }

        .DashTextDetail {
            display: flex;
            align-items: flex-end;
            justify-content: right;
            width: 100%;
            color: white;
        }

    .dashcolor1 {
        background-color: #FF9800;
    }

    .dashcolor2 {
        background-color: #2196F3;
    }

    .dashcolor3 {
        background-color: #009688;
    }

    .dashcolor4 {
        background-color: #E91E63;
    }

    .dashcolorinner {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20px;
    }

    .dashtext {
        text-align: right;
    }

    .DashTextFigure {
        font-size: xx-large;
        font-weight: bold;
        color: white;
    }

    .DashTextDiscription {
        font-size: large;
        color: #d0cbcb;
        font-weight: bold;
    }

    .TaskBox {
        background-color: white;
        min-height: 500px;
        border: 1px solid rgba(128, 128, 128,0.3);
        border-radius: 10px;
        overflow-y: hidden;
    }

    .TaskBoxHead {
        padding: 20px;
        /*background-color: #1e005e;*/
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
        font-size: x-large;
        color: white;
        display: flex;
        align-items: center;
    }

    .TaskBoxBody {
        padding: 10px;
        overflow-y: auto;
        height: 500px;
        position: relative;
    }

.gudphoto {
    width: 60px;
    height: 60px;
    
    border-radius: 100px;
}

#gudphoto1 {
    object-fit: fill !important;
    width: 100%;
    height:100%;
    border-radius: 100%;
}

    .gudphotflex {
        display: flex;
       align-items:center;
       gap:20px;
    }

    .gudphotflexMain {
        display: flex;
        justify-content: space-between;
    }

    .RightBorder{
        border-right:solid 1px rgba(128, 128, 128,0.3);
    }

.Paddit {
    padding: 20px;
}

    /*class for admin dashboard*/
    .StaffDetailMapp {
        width: 100%;
        height: 40px;
    }

    .ModalSiteMap_Size {
        width: 100%;
        height: 400px;
    }

    .mapcenter {
        display: flex;
        align-items: center;
        justify-content: center;
    }



    /*class for attendance marking*/
.NewContract2 {
    display: flex;
    justify-content: space-between;
    /*align-items: center;*/
    border-bottom: dashed 1px rgba(128, 128, 128,0.3);
}

.NewContract3 {
    display: flex;
    justify-content: space-between;
   gap:2em;
   
}

    .DropdownListWith {
        Width: 200px !important;
    }
    /*class for attendance marking*/

    @media screen and (max-width:800px) {
        .BranchLoginModalContainer {
            width: 95%;
            min-height: 250px;
            background-color: white;
            border-radius: 10px;
        }

        .dashgrid1 {
            display: grid;
            grid-gap: 3em;
            grid-template-columns: repeat(auto-fit, minmax(300px,1fr));
        }

        .NewContract2 {
            flex-direction: column;
            width: 100% !important;
        }

        .NewContract3 {
            flex-direction: column;
            width: 100% !important;
        }
    }



    /*class for requisiton form*/
    .StaffAvator {
        width: 100%;
        border-radius: 100%;
    }

    .StaffAvatorContainer {
        width: 40px;
        height: 40px;
        object-fit: scale-down;
        border-radius: 100px;
        margin-right: 10px;
        /* background-color: red;*/
    }

    .AlignStafAvator {
        display: flex;
    }

    .RequistionFromInnerGrid {
        display: grid;
        grid-gap: 3em;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }
    /*class for requistion form*/

    /*class for authorize requisition form*/
    .largeReportsTitle {
        font-size: medium;
    }
    /*class for authorize requisition form*/


    /*class for login*/
    .MainFlexContainer {
        display: flex;
    }

    .LeftWithImage {
        background-image: url(../images/logo/img2.jpg);
        background-size: cover;
        backdrop-filter: blur(1000px);
        flex: 1;
        height: 100vh;
    }

    .BkColorOverLay {
        height: 100vh;
        background-color: rgba(57, 74, 176,0.6);
        display: flex;
        align-content: center;
        justify-content: center;
        justify-items: center;
        flex-direction: column;
    }

    .RightWithLoginForm {
        background-color: white;
        flex: 0.5;
        height: 100vh;
    }

    .container_text {
        width: 40%;
        margin-right: auto;
        margin-left: auto;
        height: 100vh;
        margin-top: 120px;
        text-align: center;
        color: white;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
    }

        .container_text h2 {
            font-size: 50px;
            font-weight: bolder;
        }

    .MegLogo {
        width: 150px;
    }

    .RightWithLoginForm {
        padding: 20px;
    }

    .RightLogoContainer {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 20px;
        vertical-align: central;
        align-items: center;
        align-content: center;
    }

    .RightLogo {
        width: 50px;
        padding: 5px;
    }

        .RightLogo img {
            object-fit: contain;
        }

    .ShamarText {
        font-weight: bolder;
        font-size: 30px;
        text-align: center;
        align-items: center;
        color: black;
    }

    .Loginstarts {
        margin-top: 100px;
    }

    .btncolor {
        background-color: #eda700;
    }

        .btncolor:hover {
            background-color: #ae8f5e;
        }

    /*BranchSelection Modal*/
    .BranchLoginModal {
        top: 0px;
        height: 100%;
        Width: 100%;
        position: fixed;
        background-color: rgba(128, 128, 128,0.3);
        z-index: 999;
        display: flex;
        align-content: center;
        align-items: center;
        justify-content: center;
    }

    .BranchLoginModalContainer {
        width: 500px;
        min-height: 250px;
        background-color: white;
        border-radius: 10px;
    }

    .ModalLoginHead {
        padding: 20px;
    }

    .BranchSelectInnerElement {
        padding: 20px;
        text-align: center;
    }

        .BranchSelectInnerElement label {
            font-size: large;
        }
    /*BranchSelection Modal*/


    .GridStaffPhoto {
        width: 60px;
        height: 50px;
        border-radius: 100%;
        /* object-fit:contain;*/
    }
    /*class for login*/
    @media screen and (Max-width:800px) {
        .GridStaffPhoto {
            width: 60px;
            height: 50px;
            border-radius: 100%;
            /* object-fit:contain;*/
        }

        .MainFlexContainer {
            flex-direction: column;
        }


        .LeftWithImage {
            height: 100vh;
            background-size: cover;
            flex: 0.5;
        }

        .BkColorOverLay {
            height: 100vh;
        }

        .container_text {
            height: 200px;
            margin-top: -500px;
            justify-content: Flex-start;
            display: none;
        }

        .MegLogo {
            width: 80px;
        }

        .container_text h2 {
            font-size: 20px;
            font-weight: bolder;
        }

        .CopyrightMessage {
            display: none;
        }

        .RightWithLoginForm {
            background-color: rgba(255,255,255,0.1);
            width: 100%;
            position: absolute;
            flex: 0.5;
            height: 100vh;
            margin-left: auto;
            margin-right: auto;
            backdrop-filter: blur(5px);
            box-shadow: 0 4px 30px rgba(0,0,0,0.1);
        }

        .Loginstarts h3 {
            color: white;
        }

        .Loginstarts label {
            color: white;
        }

        .BtnforgotPassword {
            color: white;
            text-decoration: none;
            /*font-weight:bold;*/
        }

        .ShamarText {
            color: white;
        }
    }


.IncidenceLabelStyle{
    padding:10px;
   width:100%;
    min-height:80px;
    background-color: rgba(152, 88, 88,0.3);
    color:#9b2a2a;
    font-weight:bold;
    border-radius:5px;
}

.ImgDailyReleaverMain {
    cursor: pointer;
    
}
.ImgDailyReleaverMain:hover .ImgDailyReleaverr {
    display: block;
    
}

.ImgDailyReleaverr {
    display: none;
    width: 80px;
    height: 80px;
    position: absolute;
    border: 1px solid rgba(128, 128, 128,0.3);
    z-index: 6;
}

.ImgDailyReleevr img {
    object-fit: contain;
}

.ModalMenuText {
    font-weight: normal;
    font-family: 'Tahoma', Segoe UI, Geneva, Verdana, sans-serif;
}

.ModalMenuTextCover {
    width:100%; 
    height:100%;
}

.ItemRequestFormFlex{
    display:flex;

}


/*settings tab*/

.MainTabHeads{
    display:flex;
   

}
   .MainTabHeads button:hover {
        cursor: pointer;
    }


.MainTabHeads button{
   padding:8px;
   border:1px solid rgba(128, 128, 128,0.3);
}

    /*.MainTabHeads button:focus {
        background-color:#3379e9;
        color:white;
    }
        */

    .MainTabHeads button:hover {
        background-color:#a8a8a8;
        
    }
.tabcolor {
    background-color: #3379e9;
    color: white;
}

.SessionMainBody{
    width:100%;
    height:100vh;   
    display:flex;
    justify-content:center;
    align-items:center;
    background-image:url(../images/logo/img2.jpg);
    background-repeat:no-repeat;
    background-size:cover;
    

}

.SessionEndNotice {
    z-index:1;
    font-size: 50px;
    font-weight: bolder;
    text-align: center;  
    color:white;
}
.covewithcolor {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100vh;
    background-color: rgba(15,50,5,0.7);
    /* z-index:1; opacity: 0.4;  #ffd800*/
}

.SessionInner {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.SessionEndButtons{
    margin-top:10px;
}

.SessionEndLogo{
    width:80px;
    height:80px;
}
  
.SessionEndLogo img {      
        object-fit: contain;
    }

.DivBranchnam {
    font-size:larger;
    font-weight:bolder;
}

/*class for reports start*/
.TopReportGrid {
    display: flex;
}

    .TopReportGrid > div {
        padding: 5px;
    }

.TopPageTitle {
    font-size: large;
}

.MyReportBottons {
    background-color:antiquewhite;
    color: rgba(0,0,0,0.6);
    border: 1px solid rgba(128, 128, 128,0.3);
}

    .MyReportBottons:hover {
        background-color: #c3a76c;
    }
.StaffPhotoInGrid {
    width: 50px;
    height: 50px;
    border-radius: 100%;
}

    .StaffPhotoInGrid img {
        object-fit: contain;
    }

.Reportoptions {
    display: flex;
    align-items: center;
}

    .Reportoptions > div {
        padding-right: 5px;
        width: 100%;
        padding-top: 8px;
    }
/*class for reports ends*/

    @media screen and (max-width:800px) {
        .MainTabHeads button {
        padding: 5px;
        font-size:x-small;
    }
        .Reportoptions {
            display: flex;
            align-items:flex-start;
            flex-wrap:wrap;
        }

    .SessionEndNotice {
        font-size: 30px;
        font-weight: bolder;
        text-align: center;
        padding:20px;
    }

        .searchme{
            width:100%;
        }
        .Reportoptions .searchme input[type="tex"] {
            width: 500px;
        }

        .alignbuttons > div, button {
            width: 100%;
            margin-top: 5px;
        }
}
/*settings tab*/

/* Style each individual numeric pager item */
.gridview-numeric-pager a {
    display: inline-block;
    padding: 5px;
    text-decoration: none;
    color: #333;
    background-color: #eee;
    border: 1px solid #ccc;
    border-radius: 3px;
    font-size: small;
    min-width: 30px;
    text-align: center;
}

    /* Style the selected page item differently */
    .gridview-numeric-pager a:hover {
        background-color: #FF8989; /* Adjust color as needed #337ab7*/
        color: #fff; /* Adjust color as needed */
    }

    /* Style the currently selected page number */
    .gridview-numeric-pager a.current {
        background-color: #007bff;
        color: #fff;
    }

.gridview-numeric-pager input {
    min-width: 35px;
    min-height: 35px;
    padding: 5px;
    background-color: #eee;
    object-fit: cover;
}

@media screen and (max-width:400px){
    .MainMobileViewInner {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        grid-gap: 1.5em;
    }

    .gudphotflex{
        flex:1;
    }

    .gudphotflexMain {
        display: flex;
        flex-direction:column;
        justify-content:space-between;
    }

    .alignbuttons > div, button{
        width:100%;
        margin-top:5px;
    }

}