@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

:root{
    --color-theme: #ec2b25;
    --color-theme-light: #ec2b251c;
    --color-text: #333;
    --color-heading: #101010;
    --color-white: #fff;
    --border-color: #ccc;
    --border-color-light: #dadada;
    --box-shadow: #00000015;
    --grey-bg: #f4f4f4;
    --gold: #ca9629;
    --gold-light: #e2b659;
}

*{ outline: none !important; }
:focus{ box-shadow: none !important; }

body{
    font-family: "Poppins", sans-serif;
    background: none;
    font-size: 16px;
}

a{ text-decoration: none; }

.nowrap{ white-space: nowrap; }

.space{ padding: 18px; }

.theme{ color: var(--color-theme); }

.btn{ padding: 10px 20px; border-radius: 30px; text-transform: capitalize; background: var(--color-theme); color: var(--color-white); font-weight: 500; display: inline-block; min-width: 150px; text-align: center; border: 2px solid var(--color-theme); &:hover{ background: none; color: var(--color-theme); border: 2px solid var(--color-theme); } &.btnsm{ width: 36px; height: 36px; min-width: 36px; display: inline-flex; justify-content: center; align-items: center; padding: 0; } }

ul{ margin: 0 0 20px; padding: 0 0 0 20px; &:last-child{ margin: 0; } }

header{
    background: var(--grey-bg); padding: 20px 5px;
    .headerline{
        display: flex; align-items: center; justify-content: space-between; gap: 20px;
        .logodiv{ width: 160px; min-width: 160px; img{ width: 100%; filter: brightnes(0) invert(1); } }
        .menubar{ 
            .menu{
                display: flex; align-items: center; gap: 20px;
                .menuitem{
                    position: relative;
                    .link{ color: var(--color-white); color: var(--color-text); font-weight: 500; display: flex; padding: 10px 0; gap: 10px; align-items: center; font-size: 14px; }
                    .submenu{
                        position: absolute; top: 100%; left: 0; background: var(--color-white); min-width: 200px; display: none; padding: 3px 16px; border-radius: 10px; z-index: 10; box-shadow: 0 0 10px var(--box-shadow);
                        .link{ color: var(--color-text); border-bottom: 1px solid var(--border-color-light); &:last-child{ border: 0; } }
                    }
                    &:hover{ .submenu{ display: block; } }
                }
            }
            .menubarclosebtn{ display: none; position: absolute; top: 0; right: 0; padding: 10px; line-height: 1; font-size: 20px; cursor: pointer; color: var(--color-theme); }
        }
        .profilediv{ 
            width: 160px; min-width: 160px; display: flex; justify-content: flex-end; gap: 15px; align-items: center;
            .menubaropenbtn{ display: none; color: var(--color-white); color: var(--color-theme); font-size: 30px; }
            .profile{
                display: flex; align-items: center; cursor: pointer; gap: 12px; padding: 10px 0; position: relative;
                .imgdiv{ width: 45px; min-width: 45px; height: 45px; border-radius: 50%; border: 1px solid var(--border-color-light); overflow: hidden; img{ width: 100%; } }
                .namediv{
                    display: flex; gap: 5px; align-items: center; color: var(--color-white); color: var(--color-text-dark); text-transform: capitalize;
                    .name{ font-weight: 500; gap: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 14px; max-width: 10ch; }
                    i{ font-size: smaller; }
                }
                .submenu{ 
                    position: absolute; top: 100%; right: 0; background: var(--color-white); min-width: 180px; display: none; padding: 3px 16px; border-radius: 10px; z-index: 10; box-shadow: 0 0 10px var(--box-shadow);
                    .link{ color: var(--color-text); border-bottom: 1px solid var(--border-color-light); display: block; font-weight: 500; padding: 10px 0; &:last-child{ border: 0; } }
                }
                &:hover{ .submenu{ display: block; } }
            }
        }
    }
}

::-webkit-scrollbar{ width: 0; }

main{
    background: linear-gradient(180deg, var(--color-theme) 0, var(--color-theme) 50%, var(--color-white) 50%, var(--color-white) 100%);
    background: linear-gradient(180deg, var(--grey-bg) 0, var(--grey-bg) 50%, var(--color-white) 50%, var(--color-white) 100%);
    > .curvdiv{ background: var(--color-white); padding: 50px 5px; border-radius: 30px 30px 0 0; min-height: calc(100vh - 155px); }
    .heading{ font-size: 28px; font-weight: 600; color: var(--color-heading); margin: 0 0 25px; }
    .headingsm{ font-size: 24px; font-weight: 600; color: var(--color-heading); margin: 0 0 15px; }
    .headingrow{
        display: flex; flex-wrap: wrap; gap: 10px 15px; margin: 0 0 25px; align-items: center;
        .heading{ margin: 0 auto 0 0; }
        .btn{ min-width: unset; i{ margin-right: 4px; } }
    }
    
    .dashboard{
        display: flex; flex-wrap: wrap; gap: 20px;
        &.three{ > .wrap{ width: 25%; } }
        > .title{ font-size: 20px; margin: 15px 0 0; width: 100%; font-weight: 600; color: var(--text-color-dark); }
        > .wrap{
            width: 150px; display: flex; align-items: center; gap: 20px; box-shadow: 0 0 10px var(--box-shadow); padding: 20px; border-radius: 10px; position: relative; overflow: hidden; flex-grow: 1; 
/*            &.mquat{ width: calc(25% - 15px); }*/
            &:before{ content: ""; display: block; border-left: 6px solid var(--color-theme); height: 100%; position: absolute; left: 0; top: 0; }
            > .iconwrap{ width: 70px; min-width: 70px; position: relative; text-align: end; img{ width: 45px; position: relative; z-index: 1; bottom: -5px; } &:before{ content: " "; background: var(--grey-bg); position: absolute; left: 0; top: -6px; border-radius: 50%; display: block; width: 60px; height: 60px; } }
            > .content{ width: 100%; > .title{ font-size: 14px; font-weight: 500; color: var(--color-heading); margin: 0 0 5px; } > .count{ font-size: 30px; color: var(--color-theme); font-weight: 700; line-height: 1; } }
        }
    }
    
    .formwrap{
        display: flex; flex-wrap: wrap; gap: 20px 18px; max-width: 1000px;
        > .wrap{
            width: calc(33.33% - 12px);
            &.half{ width: calc(50% - 9px); }
            &.half23{ width: calc(66.66% - 6px); }
            &.full{ width: 100%; }
            label{ font-size: 12px; color: var(--theme-heading); font-weight: 500; display: block; width: fit-content; padding: 5px 6px 0; background: var(--color-white); margin: 0 0 -6px 12px; line-height: 1; position: relative; z-index: 1; }
            input, select, textarea{ min-height: 45px; border: 1px solid var(--border-color); border-radius: 10px; background: none; color: var(--color-text); resize: none; padding: 5px 15px; width: 100%; &[type="file"]{ padding: 14px 15px 12px 15px; width: 500px; max-width: 100%; } }
            .ck-editor{ > label{ display: none; } }
            textarea{ padding: 15px; }
            .link{ font-weight: 600; color: var(--color-theme); margin: 10px 0 0; font-size: 14px; cursor: pointer; }
            > .inpgroup{ position: relative; > input{ padding-right: 40px; } > i{ position: absolute; right: 15px; bottom: 14px; } }
            > .inputwrap{
                display: flex; gap: 12px 20px; flex-wrap: wrap;
                > label{ width: 100%; padding: 0; margin: 0; }
                > .wrap{ 
                    display: flex; gap: 8px; align-items: center; line-height: 1;
                    > input{ &[type="radio"]{ width: 16px; height: 16px; min-width: 16px; min-height: unset; accent-color: red; } }
                }
            }
            .halfsplit{ display: flex; gap: 18px; .wrap{ width: 100%; } }
            .errormsg, .successmsg{ font-size: 11px; font-weight: 500; color: red; margin: 6px 0 0; display: none; line-height: 1; }
            .successmsg{ color: green; }
        }
    }
    
    .tabledes{
        > .dataTables_wrapper{ display: flex; flex-wrap: wrap; gap: 20px;
            > .dataTables_length{ order: 2; margin-left: auto; > label{ display: flex; gap: 8px; align-items: center; select{ padding: 5px 15px; border-radius: 6px; border: 1px solid var(--border-color); height: 40px; } } }
            > .dataTables_filter{ order: 1; width: 400px; max-width: 100%; > label{ display: flex; gap: 8px; align-items: center; input{ width: 100%; padding: 5px 10px; border-radius: 6px; border: 1px solid var(--border-color); height: 40px; } } }
            > .dataTable{ order: 3; }
            > .dataTables_info{ order: 4; }
            > .dataTables_paginate{ order: 5; display: flex; gap: 15px; margin-left: auto; align-items: center; > .paginate_button{ color: var(--color-theme); cursor: pointer; &.disabled{ filter: grayscale(1); opacity: .5; pointer-events: none; } } > span{ display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; > .paginate_button{ color: var(--color-text); cursor: pointer; border-bottom: 3px solid transparent; border-top: 3px solid transparent; padding: 0 5px; &.current{ pointer-events: none; color: var(--color-theme); border-bottom-color: var(--color-theme); } } } }
            > .dataTables_processing{ order: 6; width: 100%; }
        }
        &.aln-tp{ table{ tbody{ tr{ td{ vertical-align: top; } } } } }
        table{
            width: 100% !important;
            thead{ 
                tr{ 
                    th{ 
                        font-weight: 600; padding: 5px; max-width: 200px; vertical-align: text-top;
                        &:first-child{ padding-left: 0; }
                        select{ border: 1px solid var(--border-color); padding: 5px 8px; border-radius: 5px; font-size: 14px; }
                        &.id{ width: 100px; }
                    }
                }
            }
            tbody{ 
                tr{
                    td{
                        border-bottom: 1px solid var(--border-color); padding: 10px 5px;
                        &:first-child{ padding-left: 0; }
                        &.actions{
                            .btn{ font-size: 12px; padding: 7px 16px; min-width: unset; background: var(--color-theme) !important; border: 2px solid var(--color-theme) !important; margin: 0 0 5px; &:hover{ background: transparent !important; } }
                        }
                        details{ margin: 0 0 5px; .content{ padding: 8px 0 0; ul{ padding: 0 0 0 18px; } } summary{ display: flex; align-items: center; justify-content: space-between; color: var(--color-heading); font-weight: 500; gap: 10px; &:marker{ content: ""; display: none; } &:after{ content: "\f13a"; color: var(--color-theme); font-family: "Font Awesome 6 Free"; font-weight: 900; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; display: var(--fa-display, inline-block); font-style: normal; font-variant: normal; line-height: 1; text-rendering: auto; } } }
                        &.id, &.sno{ white-space: nowrap; }
                        &.name{ font-weight: 600; color: var(--color-heading); text-transform: capitalize; }
                        &.designation{ font-weight: 600; font-size: 14px; }
                        &.profileimg{ order: 1; > .imgdiv{ width: 40px; height: 40px; overflow: hidden; border-radius: 50%; border: 1px solid var(--border-color-light); cursor: pointer; > img{ width: 100%; } } }
                        &.conlg{ min-width: 200px; max-width: 250px; width: 200px; }
                        &.consm{ min-width: 150px; max-width: 200px; width: 150px; }
                        &.ellipsis{ text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
                        &.date{ white-space: nowrap; }
                        &.status{
                            .fa-toggle-on, .fa-toggle-off{ color: var(--color-theme); font-size: 26px; cursor: pointer; }
                            span{ font-size: 11px; border-radius: 5px; padding: 5px 8px; line-height: 1; font-weight: 600; text-transform: uppercase; background: var(--grey-bg); color: var(--color-heading); letter-spacing: 1px; }
                            .approved{ background: #ecf6ec; color: green; }
                            .declined, .rejected{ background: #fff0f0; color: red; }
                            .pending{ background: #fff8cf; color: #f89125; }
                        }
                        &.nodata{ background: var(--grey-bg); padding: 80px 20px; font-size: 18px; font-weight: 500; text-align: center; border-radius: 10px; border: 0; width: 100%; }
                    }
                } 
            }
        }
    }
    
    .normdestab{
        table{
            width: 100%;
            tr{
                th, td{
                    padding: 15px 10px; border-bottom: 1px solid var(--border-color); &:first-child{ padding-left: 0; }
                    &.status{
                        span{ font-size: 11px; border-radius: 5px; padding: 5px 8px; line-height: 1; font-weight: 600; text-transform: uppercase; background: var(--grey-bg); color: var(--color-heading); letter-spacing: 1px; }
                        .approved{ background: #ecf6ec; color: green; }
                        .declined, .rejected{ background: #fff0f0; color: red; }
                        .pending{ background: #fff8cf; color: #f89125; }
                    }
                }
            }
        }
    }
    
    .filters{
        display: flex; gap: 15px; align-items: flex-end; margin: 0 0 20px;
        &.nowrap{ flex-wrap: nowrap; }
        > .wrap{
            width: 100%;
            label{ font-size: 12px; color: var(--theme-heading); font-weight: 500; display: block; width: fit-content; padding: 5px 6px 0; background: var(--color-white); margin: 0 0 -6px 12px; line-height: 1; position: relative; z-index: 1; }
            select, input{ min-height: 46px; border: 1px solid var(--border-color); border-radius: 10px; padding: 5px 12px; width: 100%; }
        }
        .btn{ min-width: 125px; border-radius: 8px; padding: 9px 15px; }
    }
    
    .details{
        display: flex; flex-wrap: wrap; gap: 22px 15px;
        > .wrap{
            width: calc(25% - 11.25px);
            &.full{ width: 100%; }
            &.half{ width: calc(50% - 7.5px); }
            .title{ font-size: 14px; color: var(--text-color-dark); font-weight: 600; margin: 0 0 5px; }
            .content{
                .approved, .declined, .rejected, .pending{ font-weight: 500; }
                .approved{ color: green; }
                .declined{ color: #aa0505; }
                .pending{ color: #f29339; }
            }
            p{ margin: 0; }
        }
    }
    .nodatafound{ background: var(--grey-bg); font-size: 20px; padding: 80px 20px; font-weight: 600; }
    .profile{
        .profilepic{
            margin: 0 0 20px;
            > .wrap{
                display: flex; gap: 20px; align-items: center;
                > .imgdiv{ 
                    width: fit-content; position: relative; 
                    > img{ width: 120px; border-radius: 50%; aspect-ratio: 1; object-fit: cover; object-position: center; box-shadow: 0 0 10px var(--box-shadow); }
                    > i{ position: relative; display: flex; width: 30px; height: 30px; background: var(--color-theme); color: var(--color-white); justify-content: center; align-items: center; border-radius: 50%; font-size: smaller; position: absolute; bottom: 0; right: 10px; cursor: pointer; }
                    > .menu{
                        display: none; position: absolute; left: 0; top: 100%; padding: 8px 0 0; min-width: 180px;
                        > ul{
                            background: var(--color-white); padding: 5px 15px; border-radius: 10px; box-shadow: 0 0 10px var(--box-shadow); list-style: none; width: 100%;
                            li{ padding: 8px 0; border-bottom: 1px solid var(--border-color-light); font-size: 14px; font-weight: 500; cursor: pointer; &:last-child{ border: 0; } }
                        }
                    }
                }
                > .content{ > .name{ font-size: 20px; color: var(--text-color-dark); font-weight: 600; margin: 0; text-transform: capitalize; } > .designation{ font-size: smaller; opacity: .6; } }
            }
        }
        .about{
            .empinfo{
                display: flex; gap: 16px; flex-wrap: wrap; margin: 0 0 20px; padding: 20px; border-radius: 10px; box-shadow: 0 0 10px var(--box-shadow);
                > .title{ font-size: 18px; font-weight: 600; margin: 0; width: 100%; line-height: 1; }
                > .wrap{
                    width: calc(25% - 12px);
                    > .title{ font-size: 12px; font-weight: 600; margin: 0 0 5px; }
                }
            }
            .updtpwd{
                summary{
                    font-size: 14px; font-weight: 600; color: var(--color-theme); margin: 0 0 10px;
                    &::marker{ content: ""; display: none; }
                }
            }
        } 
    }
    .employeedetails{
        display: flex; gap: 30px; align-items: flex-start;
        > .imgdiv{ width: 25%; min-width: 25%; position: relative; > img{ aspect-ratio: 1; object-fit: cover; object-position: center; background: var(--border-color); border-radius: 50%; width: 100%; } > .empid{ position: absolute; top: 0; left: 0; padding: 8px 10px; background: var(--color-theme); font-weight: 500; border-radius: 6px; color: var(--color-white); line-height: 1; } }
        > .content{
            display: flex; flex-wrap: wrap; gap: 18px; width: 100%;
            > .name{ width: 100%; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 15px; > .text{ color: var(--color-heading); font-weight: 600; line-height: 1; font-size: 26px; width: fit-content; } > .gender{ font-size: 14px; line-height: 1; margin: 0 0 2px; } }
            > .wrap{
                width: calc(33.33% - 12px);
                label{ font-size: 12px; color: var(--theme-heading); font-weight: 500; display: block; width: fit-content; padding: 5px 6px 0; background: var(--color-white); margin: 0 0 -6px 12px; line-height: 1; position: relative; z-index: 1; }
                select, input{ min-height: 46px; border: 1px solid var(--border-color); border-radius: 10px; padding: 5px 12px; width: 100%; &:disabled{ opacity: .5; } }
            }
        }
    }
    .pagination-wrapper{
        display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; align-items: center; margin: 20px 0 0;
        *{ display: block; padding: 0 5px; border-bottom: 3px solid transparent; border-top: 3px solid transparent; }
        strong{ color: var(--color-theme); pointer-events: none; border-bottom-color: var(--color-theme); font-weight: 500; }
        a{ color: var(--text-color); &[rel="next"], &[rel="prev"]{ font-weight: 500; color: var(--color-theme); } &[rel="next"]{ &:before{ content: 'Next '; } } &[rel="prev"]{ &:after{ content: ' Previous'; } } }
    }
    .birthdaycard{
        background: var(--color-white); box-shadow: 0 0 10px var(--box-shadow); border-radius: 10px; padding: 8px 15px;
        .wrap{
            display: flex; gap: 14px; padding: 12px 0; border-bottom: 2px dotted var(--border-color-light); align-items: center; line-height: 1;
            &:last-child{ border: 0; }
            .date{ color: var(--border-color); font-weight: 700; font-size: 30px; }
            .name{ font-weight: 600; font-size: 14px; }
        }
    }
    .rowgap{ .row{ grid-row-gap: 30px; } }
}

.logindiv{
    width: 800px; max-width: 100%; margin: auto;
    > .content{
        display: flex; gap: 40px; align-items: center; min-height: 60vh;
        > .logo{ width: 100%; position: fixed; padding: 20px; bottom: 0; right: 0; text-align: end; > img{ max-width: 40%; width: 160px; } }
        > .imgdiv{ width: 100%; > img{ width: 100%; } }
        > .formdiv{ width: 100%; p{ line-height: 1.2; } }
    }
}

.image-container-file-upload, .fileupload{ a{ img{ width: 80px; } } }

.topnav{
    .navbar {
        .nav-item{
            .nav-link{
                color: #fff !important;
            }
        }
    }
}

footer{
    .copyright-text{ text-align: center; padding: 0 0 25px; a{ color: var(--color-theme); } }
}

.content-page{
    padding: 0 !important;
    min-height: unset;
}

.datepicker{
    z-index: 9999 !important;
    table{
        tr{
            td{ 
                font-size: 12px; padding: 5px 10px; text-align: center; cursor: pointer; 
                &.old, &.new{ opacity: .3; pointer-events: none; }
                .month, .year, .decade, .century{
                    padding: 5px 10px; 
                    &.focused{ background: var(--grey-bg); border-radius: 5px; }
                    &.old, &.new{ opacity: .3; pointer-events: none; }
                }
            }
            th{ font-size: 12px; padding: 5px 10px; font-weight: 600; text-align: center; &.prev, &.next{ cursor: pointer; } }
            .datepicker-switch{ cursor: pointer; }
        }
    }
}

.fc{
    .fc-header-toolbar{
        .fc-toolbar-chunk{ 
            width: 100%; 
            .fc-toolbar-title{ font-size: 22px; font-weight: 600; text-align: center; }
            .fc-button-group{
                gap: 10px;
                .fc-button{
                    background: var(--color-theme); border: 0;
                }
            }
        }
    }
    .fc-view-harness{
        .fc-view{
            .fc-scrollgrid-section-header{
                th{ font-weight: 600; a{ color: var(--color-heading); } }
            }
            .fc-scrollgrid-section-body{
                td{
                    a{ color: var(--color-text); }
                    .fc-daygrid-event{ text-align: center; font-size: 10px; font-weight: 500; padding: 2px; }
                    &.fc-day-today{ background: var(--color-theme-light) !important; }
                }
            }
        }
    }
}

.holidaypop{
    background: #00000030;
    .clsbtn{ position: absolute; top: 0; right: 0; padding: 15px; line-height: 1; font-size: 30px; cursor: pointer; }
    .modal-body{
        display: flex; min-height: 100vh; overflow: auto; align-items: center; justify-content: center;
    }
    .modal-content{
        padding: 30px; width: 100%; max-width: 900px; border: 0;
        &.sm{ max-width: 500px; }
        .holidaylist, .holidaylistadmin{
            display: flex; flex-wrap: wrap; gap: 16px;
            > .wrap{
                background: var(--grey-bg); padding: 8px; border-radius: 5px; display: flex; gap: 10px; width: calc(50% - 8px); align-items: center;
                .name{ width: 100%; color: var(--color-heading); font-weight: 500; line-height: 1.2; }
                .date{ min-width: 100px; background: var(--color-theme); color: var(--color-white); font-weight: 500; font-size: 14px; padding: 5px; text-align: center; border-radius: 5px; }
            }
        }
        .holidaylistadmin{
            > .wrap{ flex-wrap: wrap; padding: 12px; gap: 5px 10px; input{ height: 36px; padding: 5px 10px; border: 1px solid var(--border-color); width: 100%; background: none; border-radius: 5px; } .date{  max-width: calc(50% - 5px); input{ color: var(--color-white); border: 0; height: 30px; } } .hname{ font-weight: 600; max-width: calc(50% - 5px); } .hdesc{ font-size: 14px; width: 100%; } .btns{ margin: 0 0 0 auto; > button{ border: 2px solid var(--color-theme); font-size: 14px; border-radius: 50%; background: var(--color-theme); color: var(--color-white); width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; } } }
        }
    }
    .btn{ min-width: 130px; }
}

#cropModal{
    width: 100%; 
    max-width: 300px;
}

.croppie-container .cr-boundary{
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1;
}

.profilemodal{
    .modal-content{
        border: 0;
        .modal-header{ background: var(--color-theme); .modal-title{ color: var(--color-white); font-weight: 600; } .btn-close{ filter: invert(1); opacity: 1; } }
        .modal-body{ .profimg{ max-width: 100%; border-radius: 50%; } }
    }
}

.modal{
    .modal-dialog{
        min-height: 100vh; display: flex; align-items: center; flex-wrap: wrap; margin: 0 auto;
    }
}

.ck-balloon-panel{ display: none !important; }

.ck-editor{
    border: 1.5px solid var(--border-color) !important; border-radius: 10px; overflow: hidden;
    .ck-editor__top{ padding: 6px 5px 0 !important; .ck-toolbar{ border: 0; } }
    .ck-content{ border: 0 !important; }
}

.birthday{
    background: linear-gradient(0, #0001, #0001); position: fixed; top: 0; left: 0; z-index: -999; min-height: 100vh; width: 100%; background-size: 25%; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(1.5px); flex-wrap: wrap; overflow: auto; opacity: 0; transition: 2s ease-in;
    &.show{ z-index: 999; opacity: 1; }
    .mainwrap{
        width: 100%; position: relative; padding: 10px;
        .wrap{
            text-align: center; background: url('../images/birthday/confetti-bg.jpg'); background-size: cover; padding: 30px 20px; width: 350px; max-width: 100%; margin: auto; border-radius: 10px; backdrop-filter: blur(1px); overflow: hidden;
            .closebtn{ position: absolute; top: 12px; right: 12px; font-size: 24px; line-height: 1; opacity: .3; cursor: pointer; }
            .userimg{ width: 150px; border-radius: 50%; aspect-ratio: 1; object-fit: cover; background: linear-gradient(-45deg, var(--gold-light) 0, var(--gold) 100%) !important; padding: 4px; display: block; margin: 0 auto -80px; }
            .popper{ width: 160px; display: inline-block; margin: 0 -20px -30px; ~ .popper{ transform: scaleX(-1); } }
            .wishes{ font-family: cursive; font-size: 28px; font-weight: 700; line-height: 34px; margin: 0 0 10px; color: var(--color-heading); span{ display: block; color: var(--color-theme); } }
            .cake{ position: relative; &:before{ content: ""; background: var(--color-theme); width: 300%; aspect-ratio: 1; display: block; border-radius: 50%; left: -100%; position: absolute; z-index: 0; top: 100px; } img{ position: relative; z-index: 1; width: 160px; } }
            .date{ background: #fffd; position: relative; z-index: 1; line-height: 1; color: var(--color-theme); font-weight: 700; border-radius: 5px; padding: 10px 15px; margin: 10px auto -10px; width: fit-content; font-family: cursive; }
        }        
    }
}

@media (max-width: 991px){
    header{
        padding: 15px 5px;
        .headerline{
            .logodiv{ width: 120px; min-width: 120px; }
            .menubar{
                position: fixed; height: 100vh; left: -100%; top: 0; z-index: 999; background: #fff; width: 90%; max-width: 300px; padding: 50px 15px 30px; box-shadow: 0 0 10px var(--box-shadow); transition: .6s ease-in;
                &.show{ left: 0; }
                .menu{ 
                    display: block; 
                    .menuitem{ 
                        .link{ color: var(--color-text); i{ display: none; } }
                        .submenu{ position: static; display: block; padding: 0; box-shadow: none; .link{ border: 0; padding-left: 15px; &:before{ content: "- "; } } }
                    }
                }
                .menubarclosebtn{ display: block; }
            }
            .profilediv{
                .menubaropenbtn{ display: block; }
                .profile{
                    gap: 8px;
                    .imgdiv{ width: 35px; min-width: 35px; height: 35px; }
                }
            }
        }
    }
    main{
        .dashboard{
            &.three{ > .wrap{ width: calc(50% - 10px); } }
            .wrap{ width: calc(50% - 10px); &.mquat{ width: calc(50% - 10px); } }
        }
        .profile{
            .profilepic{
                > .wrap{
                    > .imgdiv{
                        > img{ width: 90px; }
                        > i{ right: 0; }
                    }
                    > .content{
                        > .name{ font-size: 18px; }
                    }
                }
            }
            .about{
                .empinfo{
                    > .title{ font-size: 16px; }
                    > .wrap{ width: calc(50% - 8px); &.full{ width: 100%; } > .title{ margin: 0 0 2px; } }
                }
            }
        }
        .employeedetails{
            gap: 20px; > .content{ > .wrap{ width: calc(50% - 9px); } }
        }
    }
    .logindiv{
        width: 400px; 
        > .content { flex-wrap: wrap; }
    }
}

@media (max-width: 600px){
    main{
        .curvdiv{ padding: 40px 5px 50px; }
        .heading{ font-size: 22px; margin: 0 0 18px; }
        .headingsm{  font-size: 18px; }
        .headingrow{ margin: 0 0 15px; .btndiv{ display: flex; gap: 6px; .btn{ position: static; width: 45px; height: 45px; min-width: 45px; i{ font-size: 16px; } } } .btn{ width: 50px; height: 50px; min-width: 50px; font-size: 0; display: flex; align-items: center; justify-content: center; border-radius: 50%; padding: 0; position: fixed; right: 15px; bottom: 15px; z-index: 99; i{ margin: 0; font-size: 18px; } } }
        
        .dashboard{
            gap: 16px 12px;
            .wrap{
                display: block; padding: 20px 15px 15px 20px; width: calc(50% - 6px);
                &.mquat{ width: calc(50% - 6px); }
                > .iconwrap{ margin: 0 0 18px; width: 55px; min-width: 55px; &:before{ width: 50px; height: 50px; left: -5px; } img{ width: 36px; } }
                > .content{ .title{ font-size: 12px; } }
            }
        }
        .formwrap{
            gap: 16px 18px;
            > .wrap{ 
                width: 100%;
                &.half23, &.half{ width: 100%; }
            }
        }
        .tabledes{
            > .dataTables_wrapper{
                > .dataTables_length{ margin: 0; }
                > .dataTables_info{ width: 100%; text-align: center; opacity: .5; }
                > .dataTables_paginate{ margin: auto; justify-content: center; }
                > table{
                    thead{ tr{ th{ &.status{ margin-top: -55px; } } } }
                }
            }
            table{
                display: block;
                thead{
                    display: block; width: fit-content; margin-left: auto;
                    tr{
                        display: block;
                        th{
                            padding: 0;
                            &:not(.status){ display: none; }
                            &.status{ display: block; width: fit-content; margin-left: auto; }
                        }
                    }
                }
                tbody{
                    display: block; width: 100%;
                    tr{
                        display: flex; flex-wrap: wrap; gap: 6px 12px; border-bottom: 1px solid var(--border-color-light); padding: 25px 0; width: 100%; align-items: center;
                        &:last-child{ border: 0; padding-bottom: 0; }
                        td{
                            border: 0; padding: 0; display: block; order: 11;
                            &.id, &.sno{ order: 1; font-weight: 600; &:before{ content: "ID: "; } }
                            &.sno{ display: none; &:before{ content: "Sno: "; } }
                            &.name{ order: 2; ~ &.name{ margin-left: -6px; } }
                            &.consm{ max-width: unset; font-weight: 600; width: 100%; }
                            &.conlg{ width: 100%; max-width: unset; font-size: 14px; margin: 0 0 4px; }
                            &.email, &.phoneno{ width: 100%; }
                            &.phoneno{ width: 100%; margin: 5px 0 -5px; }
                            &.designation{ opacity: .4; width: 100%; }
                            &.status{ margin-left: 0; align-self: flex-end; min-width: 60%; }
                            &.ellipsis{ white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
                            &.actions{ margin: 5px 0 0 auto; text-align: end; .btn{ margin: 0; } }
                            &.date{
                                font-size: 14px;
                                &:before{ display: block; font-size: 12px; font-weight: 600; }
                                &.dfrom{ &:before{ content: "From" } }
                                &.don{ &:before{ content: "Posted on" } }
                                &.dby{ &:before{ content: "Apply by" } }
                                &.dto{ margin: auto; &:before{ content: "To" } }
                                &.dapplied{ &:before{ content: "Applied on" } }
                                &.dfor{ margin-right: auto; &:before{ content: "Applied for" } }
                                &.days{ &:before{ content: "No. of Days" } }
                            }
                        }
                    }
                }
            }            
        }
        .filters{
            flex-wrap: wrap; gap: 12px 16px;
            > .wrap{
                &.half{ width: calc(50% - 8px); }
            }
        }
        .details{
            gap: 20px;
            > .wrap{
                width: calc(50% - 10px);
                &.mfull, &.half{ width: 100%; }
            }
        }
        .employeedetails{
            display: block;
            > .imgdiv{ min-width: unset; width: 150px; margin: 0 0 20px; > .empid{ top: unset; bottom: 0; left: 60%; font-size: 14px; } }
            > .content{ gap: 14px; > .wrap{ width: calc(50% - 7px); } > .name{ > .text{ font-size: 20px; } > .gender{ font-size: 12px; } } }
        }
    }
    .holidaypop{
        .modal-content{
            padding: 25px 20px 30px;
            .holidaylist, .holidaylistadmin{
                .wrap{
                    width: 100%;
                }
            }
        }
    }
    .fc{
        .fc-header-toolbar{
            justify-content: unset;
            .fc-toolbar-chunk{ width: fit-content; &:last-child{ display: none; } .fc-toolbar-title{ margin-left: auto; font-size: 18px; } }
        }
    }
    .logindiv{
        padding: 20px 10px;
        > .content{
            > .logo{ position: static; order: 3; padding: 0; margin: 0 0 -50px; }
/*            > .formdiv{ > form{ &:first-child{ text-align: center; } } }*/
        }
    }
}