/*           This is new css for new custom  hr_portal     */

#suggesstion-box {position: relative;}
#suggesstion-box #emp_list {margin: 0px;padding: 0px;border: 1px solid #e1e1e1;}
#suggesstion-box .emplist {list-style: none;padding: 7px;border-bottom: 1px solid #e1e1e1;}
#suggesstion-box .emplist:hover {background-color: #f1f1f1;}

.clock { width: 70%;margin-left: 30px;  display: flex; flex-direction: column; justify-content: center; align-items: center; background-color: #ffffff; }

 .time { font-size: 20px;font-weight: bold;color: #000; }

 .date-time { font-size: 10px; color: #fff; }

  @media screen and (max-width: 768px) {  .time { font-size: 10px; } }

/***********************************************/
.birthday-alert {
  color: #fff;
  font-size: 18px;
}
.birthday-alert .avatar {
  width: 100% !important;
  max-width: 100px !important;
  height: 100px !important;
  object-fit: cover;
  border: 5px solid #fff;
}
.birthday-alert table tr td {color:#ffffff !important;}
.bg-birthday1 {background: #27005D;}
.bg-birthday2 {background: #088395;}
.bg-birthday3 {background: #35A29F;}

.anniversary-alert {
  color: #fff;
  font-size: 18px;
}
.anniversary-alert .avatar {
  width: 100% !important;
  max-width: 100px !important;
  height: 100px !important;
  object-fit: cover;
  border: 5px solid #fff;
}
.anniversary-alert  table tr td {color:#ffffff !important;}
.bg-anniversary1 {background:#793FDF;;}
.bg-anniversary2 {background:#7091F5;}
.bg-anniversary3 {background:#5C5470;}

.scroll {overflow: auto;height: 250px;}
/***********************************************/
.customTimeSheet tbody td span {max-width:auto; }
        .customTimeSheet thead th {word-break: break-all;}
        .customTimeSheet thead th {min-width:200px !important;}
        .customTimeSheet tbody td {min-width:200px !important;}
        .customTimeSheet thead th:first-child {min-width:125px !important;}
        .customTimeSheet thead th:nth-child(2) {min-width:80px !important;}
        .customTimeSheet tbody td:first-child {min-width:125px !important;}
        .customTimeSheet tbody td:nth-child(2) {min-width:80px !important;}
        .customTimeSheet tbody td {min-width:200px !important;}
        th {font-size:12px;}    
    td {font-size:12px;color:#999;height:80px;}

/*        td {
            font-size: 14px;color: #999;height: 35px;padding: 7px !important; white-space: nowrap;overflow: hidden;
          text-overflow: ellipsis;
width: 80px !important;
        }
*/

        .popover {width:100%;max-width:300px;}
        .page-item.active .page-link {color:#fff;}


.card.card-callout{border-left-width:.4rem;border-left-color:var(--primary-color)}.card .card-header{background-color:transparent;border-bottom:none}
 
 .only-mobile {display: none;}.only-desktop {display:block;}.header {background: #f1f1f1;border-bottom: 1px solid #e1e1e1;}
 @media (max-width: 767px) {.only-mobile {display: block;}.only-desktop {display: none;}}

.txt-orange {
    color: #ff5722;
}
.txt-green {
    color: #1cb251;
}

.bg-present { background-color: #103c1e; color: #ffffff; }
.bg-short-leave { background-color: orange; color: #ffffff; }
.bg-full-leave { background-color: #198754; color: #ffffff; }
.bg-halfday-leave { background-color: #4ea17e; color: #ffffff; }
.bg-halfday-absent { background-color: #c28412; color: #ffffff; }
.bg-full-day-absent { background-color: #FF0000; color: #ffffff; }
.bg-holiday { background-color: #0dcaf0; color: #000000; }
.bg-today-attendance { background-color: #484c7f; color: #000000; }
.attendance td{display: table-cell!important;}
.attendance thead tr th, .attendance tbody tr td { min-width:50px;}
.attendance thead tr th:first-child, .attendance tbody tr th:first-child {min-width:200px;}
.download-att{margin-right:10px}

.ui-datepicker table td{height:23px!important}
.attandence-cal {
    position: relative;
}
i.fa.fa-calendar.attandeance-icon {
    position: absolute;
    right: 8px;
    top: 10px;
    font-size: 18px;
}

/******************************* update css date 20/02/2024 **************************/
.breadcrumb {background:none;}
.breadcrumb-item+.breadcrumb-item::before {content:'/';}
.dataTables_paginate .pagination {float:right;}
 .active>.page-link {color:#fff !important;}
.dataTables_info {padding-top:10px;}
.dataTables_paginate {padding-top:10px;}
.custom-table tbody td:last-child {overflow:unset !important}

/************************************** add css for switch  *********************/
.switch {  position: relative; display: inline-block;  width: 60px;  height: 34px;}
.switch input { opacity: 0; width: 0; height: 0;}
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; -webkit-transition: .4s;  transition: .4s;}

.slider:before { position: absolute; content: ""; height: 26px; width: 26px; left: 4px; bottom: 4px; background-color: white; -webkit-transition: .4s; transition: .4s;}

input:checked + .slider {  background-color: #2196F3;}

input:focus + .slider {  box-shadow: 0 0 1px #2196F3;}

input:checked + .slider:before {  -webkit-transform: translateX(26px);  -ms-transform: translateX(26px);  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {  border-radius: 34px;}

.slider.round:before {  border-radius: 50%;}
/**************************************************** end ********************************/