*{margin:0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif;}

:root {--main-bg-color: #f5f5f5; --input-border-radius:15px}

::-webkit-scrollbar{height:8px; width:8px; background:rgb(0,0,0,0.01); border-radius: 30px;}
::-webkit-scrollbar-thumb{background:#D4F1F4; border-radius: 30px;}
::-webkit-scrollbar-button:vertical:increment{display:none}
::-webkit-scrollbar-button:vertical:decrement{display:none}

body{background:var(--main-bg-color); overflow: hidden;}

.special_day{position: absolute; top:0px; left:0px; width:100%; height: 100vh; z-index: 5; background:rgb(0,0,0,0.7)}
.special_day_container{width:600px; height:600px; margin-inline: auto; background:url("../images/happy-birthday.gif"); background-size:cover; background-repeat: no-repeat; padding: 20px; position: absolute; top:50%; left:50%; transform: translate(-50%,-50%); border-radius: 15px;}
.special_day_container h3{color: #fff; text-align: center; font-weight: 450;}

#header{width:100%; position: relative; z-index: 1; height:45px; padding-inline:300px 1%;}
.head_front_input{border:none; height:40px; padding-inline: 20px; min-width:200px; outline:none; font-size:12px; border-radius: var(--input-border-radius);}
#header_right{position: absolute; top:0px; right:0px}
#header_right ul{list-style-type: none; display: flex;}
#header_right ul li{padding-inline: 20px; line-height: 45px;}
#header_right ul li a{text-decoration: none; color:#2e2e2e; font-size:13px; font-weight:600}
#header_right ul li i{margin-right:5px}
#header_right ul li sup{height:20px; width:20px; border-radius: 100%;}

#notification_list{display:none; background:#fff; border-radius: 10px; box-shadow: 0px 0px 5px 5px #ccc; width:500px; height: 400px; z-index: 3; position: fixed; right:0px; padding: 20px;}
#notification_list h4{color:#3f5267}
#notification_list p b{margin-bottom: 10px; font-weight: 550;}
#notification_list p{font-size:12px; color:#3f5267; border-bottom: 1px solid rgb(0,0,0,0.05); padding-block:20px 10px;}

#sidebar{width:280px; height: 100vh; background:#fff; position: fixed; top:0; left:0; z-index: 2; overflow-x: hidden;}
#sidebar_top{margin-bottom: 20px;}
#sidebar_top img{width:150px; height:150px; object-fit: cover; object-position: top center; display:block; margin-inline: auto; border-radius: 100%; margin-block: 20px 10px;}
#sidebar_top h1{font-size:16px; text-align: center; color:#3f5267; font-weight: 450;}

#sidebar_bottom ul{list-style-type: none; padding-left: 40px;}
#sidebar_bottom ul li{width:100%; height: 40px; line-height: 40px; position: relative; margin-bottom: 5px;}
#sidebar_bottom ul li a{text-decoration: none; color:#000; font-size:14px; display: block;}
#sidebar_bottom ul li a lord-icon{width:30px; height:30px; line-height: 30px; position: absolute; top:2px; left:0px;}
#sidebar_bottom ul li a span{padding-left: 40px;}
#sidebar_bottom ul li:hover a{color:#09f}
#sidebar_bottom ul li:hover lord-icon{color:#09f;}
#sidebar_bottom ul li .menu_circle{visibility: hidden; position: absolute; top:0px; right:-20px; height:40px; width:40px; background: #f5f5f5; border-radius: 30px;}
#sidebar_bottom ul li .menu_circle div{height:10px; width:10px; position: absolute; top:15px; left:10px; background:#09f; border-radius: 100%;}
#sidebar_bottom ul li:hover .menu_circle{visibility: visible;}

footer{width: 100%; padding: 5px 20px; position: fixed; bottom: 0; left:0; background:#D4F1F4; text-align:center}
footer a{font-size: 14px; color: #2e2e2e; text-decoration: none;}

#content_body{position: absolute; width:100%; height: 100vh; top:0; left:0; padding:50px 20px 20px 300px;}

.search_filter{width:100%; background:#fff; padding: 10px; border-radius: 5px;}
.search_input{min-width:100px; max-width: 200px; height: 35px; outline:none; border:1px solid rgb(0,0,0,0.1); border-radius: 5px; font-size: 12px; padding-inline: 10px;}
.search_filter select{font-size: 11px;}

.filter_pop_up{list-style-type: none; font-size: 12px; padding-inline: 15px; height: 35px; line-height: 35px; margin-inline: auto; font-weight: 700; cursor: pointer; background:#DAF7A6; color:#000; min-width:100px; text-align: center; border-radius: 5px;}
.export_btn{background:#DAF7A6; color:#000; outline: none; border:none; height: 35px; width:100px; border-radius: 5px; font-weight: 700; font-size:12px; cursor: pointer;}

.table_container{width:100%; margin-top:20px; height: 75vh; overflow: auto; background:#fff; border-radius: 10px;}
.c_table{width:100%; min-height:auto; max-height: 100%;}
.c_table th{color:#3f5267; background:#D4F1F4; text-align: left; font-weight: 600;}
.c_table th, .c_table td{border:1px solid rgb(0,0,0,0.05); height:40px; min-width:100px; font-size: 12px; padding-inline: 10px;}
.c_table tbody tr:nth-child(2n+1){background:#f9f9f9}
.c_table td .punch_label_div{background:#e6e6e6; padding:5px; margin:5px; width:100px !important; text-align:center; float:left; border-radius: 10px;}
.c_table td .punch_label_div:nth-child(2n+1){background:#DAF7A6}
.c_table td small{background:#09f; padding: 4px 12px; font-weight:550; border-radius: 30px; color:#fff; font-size:12px}

.attendance_table td:first-child, .attendance_table th:first-child{position:sticky; left:0; z-index:1;}
.attendance_table td:nth-child(2), .attendance_table th:nth-child(2){position:sticky; left:100px; z-index:1;}

.attendance_table th:first-child, .attendance_table th:nth-child(2){z-index:3 !important; background:#D4F1F4;}
.attendance_table td:first-child, .attendance_table td:nth-child(2){background:#fff;}

.work_report_table thead{position: sticky; top:0; z-index: 1;}
.work_table_footer{position: sticky; bottom:0; z-index: 1; background:#fff}
.work_report_table tbody tr:nth-child(2n+1){background:#fff !important}
.work_report_table tbody tr td{font-weight: 500; border:1px solid rgb(0,0,0,0.1);}

.table_pop_up{list-style-type: none; margin-inline: auto; font-weight: 500; cursor: pointer; background:#E3F9A6; color:#000; padding-block: 5px; width:60px; text-align: center; border-radius: 5px;}
.pop_up{position: fixed; top:0px; left:0px; background: rgb(0,0,0,0.7); height: 100%; width:100%; z-index: 3 !important;}

.chat_table{background-image: url("../images/chat-background.jpg"); background-size: cover;}
.chat_history{width:100%; min-height: auto; max-height:100%; margin-top:0px;}
.chat_history td{border:none}
.chat_history td span{color:#000; font-weight: 450; padding: 10px; border-radius: 10px;}
.chat_text_area{width:100%; height:60px; background:#f5f5f5; margin-top:0px !important; padding:0px 10px !important;}
.chat_text_area input{height:50px; border:1px solid rgb(0,0,0,0.2); outline:none; padding-inline: 20px; margin-top: 5px; border-radius: 30px; width:88%}
.chat_text_area button{cursor:pointer; height:50px; border:none; background:#DAF7A6; outline:none; margin-top: 5px; border-radius: 100%; width:50px}
.chat_text_area button i{font-size:16px; text-align:center; color:#2e2e2e}

.pop_up_container{min-height:200px; background:#fff; margin-inline: auto;}
.pop_up_container .search_filter{margin-top: 0px; padding: 0px;}
.pop_up_container .table_container{margin-inline: 1%; margin-block:0px 10px; width:98%;}
.popup_small_container{width:500px;}
.popup_small_container .pop_up_title{width:500px}
.popup_small_container .input_container{width:100%}

.popup_large_container{width:900px;}
.popup_large_container .pop_up_title{width:900px !important}
.popup_large_container .input_container{float:left; width:48%; margin-inline: 1%;}

.popup_extra_large_container{width:100%;}
.popup_extra_large_container .pop_up_title{width:100%}
.popup_extra_large_container .input_container{float:left; width:31.33%; margin-inline: 1%;}

.pop_up_title{position:fixed; top:0px; width:100%; height: 60px; line-height: 60px; font-size:14px; text-align:center; background:#DAF7A6; color:#000}
.close_pop_up,.close_pop_up2{position: absolute; top:20px; right:20px; font-size: 18px; cursor: pointer;}

.pop_up_container form{padding:20px; margin-top:60px}
.submit_btn{cursor:pointer; min-width: 150px; padding-inline: 20px; height: 40px; background:#DAF7A6; color:#000; border-radius: 5px; outline: none; text-transform: uppercase; font-weight:650; border:none}

.input_container p{font-size: 12px; margin-bottom: 5px;}
.input_area{width:100%; position: relative; height: 40px; background:#f5f5f5; border-radius: 5px; margin-bottom: 20px;}
.input_area i{width:40px; text-align: center; line-height: 40px;}
.input_area input,.input_area select{width:100%; position: absolute; top:0px; left:0px; font-size: 12px; border-radius: 5px; padding-left: 40px; padding-right: 10px; border:1px solid #e6e6e6; outline:none; background:none; height:100%}