/* @import url('http://example.com/example_style.css'); */
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
/***********************************************/
/* CSS @imports must be at the top of the file */
/* Add them above this section                 */
/***********************************************/

/*****************************************/
/* Start your style declarations here    */
/*****************************************/

@media only screen and (min-width: 1240px) and (max-width:1440px){
  .panel.all-staffs, .profile-detail-column-1{
    max-width: 40%
    margin: 5px !important;
  }
  .panel.profile-detail, .profile-detail-column-2{
    max-width: 60%;
  }
  .panel{
    padding: 20px !important;
  }
  .profile-email-call-btns ul li{
    padding: 10px !important;
  }
}
@media only screen and (max-width: 1400px){
  .dashboard-2-panels{
    flex-direction: column;
  }
}
@media only screen and (max-width: 1240px){
  .dashboard-panels.staff-board{
    flex-direction: column;
  }
}
@media only screen and (max-width: 1400px){
  .panel.all-staffs, .profile-detail-column-1{
    max-width: 100% !important;
    margin: 5px !important;
  }
  .panel.profile-detail, .profile-detail-column-2{
    max-width: 100% !important;
  }
}
@media only screen and (min-width: 768px) and (max-width:1024px){
  .panel.all-staffs, .profile-detail-column-1{
    max-width: 100% !important;
    margin: 5px !important;
  }
  .panel.profile-detail, .profile-detail-column-2{
    max-width: 100% !important;
  }
  .panel{
    padding: 20px !important;
  }
  .sidebar{
    max-width: 220px !important;
  }
  .topbar{
    margin-left: 220px !important;
    width: calc(100% - 220px) !important;
  }
  div.main-content{
    margin-left: 220px !important;
    width: calc(100% - 220px) !important;
  }
}
@media only screen and (max-width:768px){
  div.main-content {
    margin-left: 200px !important;
    width: calc(100% - 180px) !important;
  }
  .profile-detail-wrapper{
    flex-direction: column !important;
  }
  .profile-detail-wrapper .profile-detail-column-1,.profile-detail-wrapper .profile-detail-column-2{
    width: 100% !important;
  }
  .profile-detail-wrapper .profile-detail-column-2{
    margin: 10px;
  }
  .profile-detail-label, .profile-detail-values{
    font-size: 14px !important; 
  }
}
input[name="remember_me"],label[for="remember_me"] {
  display:block;
}
.hs-form-field:nth-of-type(3),
.hs-login-widget-show-password,
.hs-register-widget-show-password,
.no-list.hs-error-msgs, 
.hs-form-field p,
.hs-reset-widget-show-password{
  display:block;
}
.inter-400 {
  font-family: "Inter", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

.ttpcp-container {
   display: flex;
   height: 100vh;
   width: 100%;
   background-color: #2e335b;
}
.ttpcp-column {
  flex: 1; /* Take equal space */
  padding: 7%;
}
.ttpcp-left {
  background-color: #ffffff; /* Light gray */
}
.ttpcp-right {
  margin:auto;
  text-align:center;
}

.font_black{
  color:#000000;
}
h2.font_black{
  font-size: 22px;
  font-weight:500;
}
.hs-form-field label{
  color: #2E335B;
  font-weight: 500;
  font-size: 18px;
}
.forgot-pw-field{
  display:flex;
  justify-content: flex-end;
}
#hs-login-self-registration-link,#hs-login-self-login-link{
  text-align:center;
}
form .hs-button, form input[type=submit]{
  padding: 0 !important;
  border-radius: 22px !important;
  width: 100%;
  height: 45px;
  margin-top: 20px;
  background-color: #2e335b !important;
  font-weight:700 !important;
  font-size: 18px !important;
}
.forgot-pw-field a,.forgot-pw-field a:hover,.forgot-pw-field a:active,.forgot-pw-field a:visited,#hs-login-self-registration-link p a,#hs-login-self-login-link p a{
  font-weight: 700;
  color: #2E335B;
  font-size: 18px;
  text-decoration: none;
}
#hs-login-self-registration-link p,#hs-login-self-login-link p,.forgot-page-p{
  color: #707070;
  font-size: 18px;
}

input::placeholder {
    color: #CACACA;
}
#hs-login-self-login-link{
  padding-top:20px;
}
.forgot-page-head1{
  font-size:30px;
  font-weight:700;
  color:#000000;
}
.back-to-login a{
  font-size: 18px;
  color:#000000;
  font-weight: 500;
  text-decoration: none;
}
.back-to-login{
  margin-top:20px;
  text-align:center;
}

/* Sidebar styles */
.sidebar {
    max-width: 250px;
    background-color: #104999;
    color: white;
    padding: 20px;
    height: 100%;
    position: fixed;
}

.sidebar h2 {
    text-align: center;
    margin-bottom: 30px;
}

.sidebar ul {
    list-style-type: none;
    padding: 0;
}

.sidebar ul li {
    margin: 20px 0;
}

.sidebar ul li a,.sidebar ul li a:hover, .sidebar ul li a:visited,.sidebar ul li a:active, .sidebar ul li a:focus{
    padding: 5px 0;
    text-decoration: none;
    color: white;
    font-size: 18px;
    display: flex;
    background-color: transparent;
    align-items:center;
}
.sidebar ul li a img{
    padding-right: 15px;
}
.ttp-dashboard-logo{
    text-align: center;
    padding-bottom: 50px;
    padding-top: 20px;
}
.ttp-dashboard-logo img{
    width:100%;
}
.ttp-dashboard-logo #ttp-logo-white{
    width:75%;
}
/* Top bar styles */
.topbar {
    width: calc(100% - 250px);
    margin-left: 250px;
    height: 60px;
    background-color: #ffffff;
    color: #222222;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 35px 20px;
    position: fixed;
    top: 0;
    border: 2px solid #f1f1f1;
}
.topbar-left{
  font-size: 32px;
  font-weight: 700;
  color: #104999;
}
.topbar-right{
  display:flex;
  align-items:center;
}
.topbar .notification {
    cursor: pointer;
    margin-right: 20px;
    display:flex;
    align-items:center;
}

.topbar .profile {
    position: relative;
    cursor: pointer;
    display:flex;
    align-items: center;
}

.topbar .profile-name {
    margin-right: 10px;
    color:#222222;
    font-size: 18px;
    font-weight: 500;
}
.topbar .profile-company-name{
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.topbar .company-name{
  color:#707070;
  font-size: 12px;
}
.topbar .profile-dropdown {
    display: none;
    position: absolute;
    top: 50px;
    right: 0;
    background-color: white;
    color: black;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    z-index: 1;
    width: 150px;
    border-radius: 5px;
    font-size: 14px;
}

.topbar .profile-dropdown a {
    display: block;
    padding: 10px;
    text-decoration: none;
    color: black;
    border-bottom: 1px solid #fafafa;
}

.topbar .profile-dropdown a:hover {
    background-color: #f1f1f1;
}

.topbar .profile-dropdown a:last-child {
    border-bottom: none;
}
.topbar .arrow-down-icon{
  padding:10px;
  display:flex;
  align-items: center;
}
/* Main content */
div.main-content {
    margin-left: 250px;
    padding: 80px 20px 30px 20px;
    background-color: #fafafa;
    overflow-y: auto;
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    width: calc(100% - 250px);
}
.main-dashboard{
  background-color: #ffffff;
  margin: 35px 30px;
  border: 2px solid #f1f1f1;
  border-radius: 8px;
  width: calc(100% - 70px);
  padding: 50px 40px;
}
.main-dashboard h1{
  font-size: 32px;
  color: #000000;
}
.main-dashboard p{
  font-size: 18px;
  color: #707070;
}
/* Show dropdown when profile is clicked */
.profile.active .profile-dropdown {
    display: block;
}
.ttp-dashboard ul li a{
  font-weight: 500;
}
/* Panels Container */
.dashboard-panels {
    display: flex;
    gap: 20px;
    margin-top: 20px;
}
.dashboard-1st-row{
    display:flex;
    justify-content:space-between;
}
/* Individual Panel Style */
.panel {
    flex: 1;
    background-color: white;
    padding: 30px 30px;
    border-radius: 8px;
    text-align: left;
    margin-left: 10px;
    margin-right: 10px;
}

.panel h2 {
    color: #000000;
    font-size: 20px;
    margin-bottom: 10px;
}

.panel p {
    font-size: 16px;
    color: #555;
}
.panel .number-count{
    color: #000000;
    font-size: 49px;
    font-weight: 600;
    margin-bottom: 10px;
    margin-left: 5px;
}
.dashboard-icons{
  margin-right: 0px;
}
.dashboard-label{
  margin:0;
}
/* Panel Colors for distinction */
.panel.staff {
    border: 2px solid #f1f1f1;
}

.panel.birthdays {
    border: 2px solid #f1f1f1;
}
#birthday-tooltip {
  font-size: 16px;
  position: absolute;
  background-color: #f9f9f9;
  border: 1px solid #ccc;
  padding: 10px;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}
#birthday-tooltip ul{
  margin: 10px;
}
.panel.leave-requests {
    border: 2px solid #f1f1f1;
}

/* Two Panels Layout */
.dashboard-2-panels {
    display: flex;
    gap: 20px;
    margin-top: 40px;
}

/* Staff Overview Panel */
.panel.staff-overview {
    border: 2px solid #f1f1f1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.staff-overview h2, .quick-access h2{
    font-size: 26px;
    margin:0;
}
.staff-overview h2 span{
    color: #555;
    font-weight: 400;
}
.staff-overview .staff-email{
    font-weight: 500;
    color: #707070;
    font-size: 16px;
    flex-grow: 1;
    text-align: right;
    margin-right: calc(10% - 30px);
}
.staff-profile-photo-name{
    display:flex;
}
.staff-profile-photo-name p{
    margin: 0;
    font-size: 14px;
}
.staff-profile-photo-name h3{
    font-size: 18px;
    color: #000000;
    font-weight: 500;
}
.staff-profile-photo-name img{
    border-radius: 50%;
}
.staff-profile-photo-name div{
    padding-left: 10px;
}
.panel.staff-overview .view-all {
    display: inline-block;
    margin-top: 15px;
    color: #104999;
    text-decoration: none;
    font-weight: 600;
    font-size: 18px;
}
.view-all-wrapper{
  text-align:center;
}
.panel.staff-overview .view-all:hover {
    text-decoration: underline;
}
/* Staff List in the Staff Overview Panel */
.staff-list {
    list-style-type: none;
    padding: 0;
    margin: 20px 0;
}

.staff-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #ddd;
}

.staff-list li:last-child {
    border-bottom: none;
}

/* More Options Button */
.more-options {
    background: none;
    border: none;
    font-size: 18px;
    cursor: pointer;
    color: #3498db;
    background-color: #3C426E1A;
    padding: 5px;
}

.more-options:hover {
    background-color: #e0e0db;
    padding: 5px;
    border: 0;
}
/* Quick Access Panel */
.panel.quick-access {
    border: 2px solid #f1f1f1;
}

.panel.quick-access h2 {
    margin-bottom: 40px;
}

.quick-links {
    list-style-type: none;
    padding: 0;
}

.quick-links li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #ddd;
}

.quick-links li:last-child {
    border-bottom: none;
}

.quick-links span {
    font-size: 16px;
    color: #34495e;
}
.quick-links .staff-profile-photo-name img{
    background-color: #3C426E1A;
    padding: 5px;
    border-radius: 50%;
    margin-right: 15px;
}
.quick-links .staff-profile-photo-name{
    margin: 20px;
    align-items: center;
}
.view-button {
    color: #104999;
    padding: 5px 10px;
    border-radius: 5px;
    text-decoration: none;
    font-size: 18px;
    display: flex;
}

.view-button:hover {
    text-decoration: underline;
    color: #104999;
}
.panel.all-staffs, .profile-detail-column-1{
    max-width: 30%;
    border: 2px solid #f1f1f1;
    cursor: pointer;
}
.panel.profile-detail, .profile-detail-column-2{
    max-width: 70%;
    border: 2px solid #f1f1f1;
    background-color: #fafafa;
}
.panel.all-staffs h2, .panel.profile-detail h2{
    font-size: 26px;
}
.panel.all-staffs h2 span{
    color: #555;
    font-weight: 400;
}
.panel.all-staffs .staff-list{
    height: 650px;
    overflow-y: auto;
}
.panel.all-staffs .staff-list li{
    padding: 20px 10px;
    border-bottom: 1px solid #F1F1F1;
}
/* Staff Arrow Button */
.staff-arrow-more-options {
    background: none;
    border: none;
    font-size: 18px;
    cursor: pointer;
    color: #3498db;
    background-color: transparent;
    padding: 5px;
}

.staff-arrow-more-options:hover {
    background-color: transparent;
    padding: 5px 10px;
    border: none;
}
.profile-detail-wrapper{
    display: flex;
    justify-content: flex-start;
    margin-top: 40px;
}
.profile-detail-column-1{
    width: 40%;
    border: none;
    margin: 10px 50px;
}
.profile-detail-column-2{
    width: 60%;
    border: none;
    margin: 10px 50px;
}
.profile-img-employee{
    text-align: center;
}
.profile-img-employee img{
    border-radius: 50%;
}
.profile-email-call-btns ul, .profile-detail-column-2 ul{
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.profile-email-call-btns ul li{
    border: 2px solid #f1f1f1;
    border-radius: 8px;
    padding: 10px 20px;
    margin-top: 10px;
    background-color: #ffffff;
}
.profile-email-call-btns ul li img{
    width:24px;
}
.profile-email-call-btns ul li{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.profile-email-call-btns ul li p{
    color: #222222;
    font-weight: 500;
    font-size: 18px;
    margin: 0;
}
.profile-email-call-btns ul a{
    text-decoration: none;
}
#send-email-btn{
    margin-top:20px;
}
.profile-detail-column-2 h3{
    color: #2E335B;
    font-size: 20px;
    font-weight: 500;
    margin-bottom:10px;
    margin-top: 20px;
}
.profile-detail-column-2 table{
    width: 100%;
}
.profile-detail-column-2 table td,.profile-detail-column-2 table{
    border: none;
    background-color: transparent;
}
.profile-detail-label{
    color: #707070;
    font-size: 18px;
    font-weight: 400;
    padding: 5px 5px 5px 0px;
    width:60%;
}
.profile-detail-values{
    color: #000000;
    font-size: 18px;
    font-weight: 500;
    padding: 5px;
    width:40%;
}
.hs_status-active { color: #0C9300; }
.hs_status-inactive { color: #FF1800; }
.staff_member-selected{
  background-color: #fafafa;
}

.panel.productivity-charts{
    border: 2px solid #f1f1f1;
    height: 500px;
    max-width: 1000px;
    overflow-y: auto;
    min-width: 500px;
    margin: 15px;
}
.productivity-page{
  flex-wrap: wrap;
}

.productivity-charts h2{
    font-size: 24px;
    margin-bottom: 0;
}

.productivity-charts p{
    font-size: 18px;
    margin-bottom: 20px;
}
/* 1st chart productivity */

.chart-title {
  font-weight: bold;
  font-size: 24px;
  color: #333;
}
.chart-subtitle {
  font-size: 16px;
  color: #888;
  margin-top: 4px;
}
.chart-header {
  text-align: center;
  margin-top: 20px;
  margin-bottom: 20px;
}
.bar {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
.bar-label {
  width: 50px;
  font-size: 14px;
  color: #555;
  margin-right: 10px;
}
.bar-container {
  display: flex;
  align-items: center;
  width: 100%;
  background-color: transparent;
  border-radius: 4px;
  overflow: hidden;
}
.bar-item-1, .bar-item-2 {
  height: 24px;
  text-align: center;
  line-height: 24px;
  font-size: 14px;
  position: relative;
  margin-right: 4px;
  border-radius: 2px;
}
.bar-item-1 {
  background: linear-gradient(145deg, #4b70f6 50%, #104999);
  width: 65%;
  color: white;
}
.bar-item-2 {
  background: linear-gradient(145deg, #febe00 50%, #febe00);
  width: 35%;
  left: -4px;
  color: black;
}
/* Adding the 3D effect */
.bar-item-1::after, .bar-item-2::after {
    background:#104999;
    /* border-radius: 0; */
    content: "";
    height: 90%;
    position: absolute;
    right: -4px;
    top: 1px;
    transform: skewY(145deg);
    width: 5px;
}
.bar-item-1::before, .bar-item-2::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 5px;
  width: 100%;
  height: 9px;
  transform: skewX(-45deg);
  border-radius: 2px;
}
.bar-item-1::before{
  background: #104999;
}
.bar-item-2::before {
  background: #104999;
}
.legend {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
.legend-item {
  display: flex;
  align-items: center;
  margin-right: 20px;
  font-size: 14px;
  color: #555;
}
.legend-color-1, .legend-color-2 {
  width: 16px;
  height: 16px;
  margin-right: 6px;
  border-radius: 4px;
}
.legend-color-1 {
  background-color: #4b70f6;
}
.legend-color-2 {
  background-color: #febe00;
}

/* Second Chart and Third Chart Texts*/

h2.chart-title-2nd-chart, h2.chart-title-3rd-chart, h2.chart-title-4th-chart {
  font-size: 24px;
  font-weight: bold;
  margin: 0;
}
p.chart-subtitle-2nd-chart, p.chart-subtitle-3rd-chart, p.chart-subtitle-4th-chart {
  font-size: 18px;
  color: #707070;
  margin-bottom: 20px;
}
.chart-container.weekly-monthly-summaries{
  width: 100%;          /* Allow full width */
  max-width: 600px;    /* Maximum width */
  height: 400px;       /* Fixed height */
  position: relative;   /* Position context for absolute children */
  padding-bottom: 30px;
}
canvas {
  margin-bottom: 20px; /* Space between the chart and the legend */
}

.compliance-panels-row-2{
  border: 2px solid #f1f1f1;
  margin: 15px;
  width: 98%;
  /* min-width: 500px; */
  overflow-y: auto;
  min-height: 580px;
}
.compliance-dashboard h2{
  font-size: 26px;
}

.comp-weekly-monthly-summaries{
  width: 100%;          /* Allow full width */
  max-width: 600px;    /* Maximum width */
  height: 400px;       /* Fixed height */
  position: relative;   /* Position context for absolute children */
  margin-top: 30px;
}

.panel.compliance-charts{
    border: 2px solid #f1f1f1;
    margin: 15px;
}
.comp-1{
    min-width: 55%;
}
.comp-2{
    min-width: 40%;
}
.compliance-charts p, .compliance-charts h2{
    margin: 0;
}
.compliance-charts p{
    font-size: 18px;
}

/* Training Completion Chart */

.training-completion-container {
    text-align: left;
  }
.training-completion-title {
    font-weight: bold;
    margin-bottom: 5px;
  }
.training-completion-updated {
    font-size: 12px;
    color: #666;
    margin-bottom: 20px;
}
  .training-completion-legend {
    display: flex;
    gap: 60px;
    margin-top: 40px;
    margin-bottom: 30px;
    font-size: 18px;
  }
  .training-completion-legend span {
    display: inline-flex;
    align-items: center;
  }
  .training-completion-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 5px;
  }
  .training-completion-planned { background-color: #f3b700; }
  .training-completion-in-progress { background-color: #339af0; }
  .training-completion-completed { background-color: #43a047; }
  .training-completion-progress-container {
    margin-bottom: 15px;
  }
  .training-completion-progress-label {
    font-size: 18px;
    margin-bottom: 15px;
  }
  .training-completion-progress-label span{
    color: #707070;
  }
  .training-completion-progress-bar {
    height: 8px;
    width: 100%;
    background-color: #e0e0e0;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 50px;
  }
  .training-completion-progress {
    height: 100%;
    border-radius: 4px;
  }
  .training-completion-planned-bar { width: 45%; background-color: #f3b700; }
  .training-completion-in-progress-bar { width: 93%; background-color: #339af0; }
  .training-completion-completed-bar { width: 86%; background-color: #43a047; }

.compliance-charts-wrapper{
  display:flex;
  width: 100%;
}
.comp-chart-container-wrapper{
  display: flex;
  justify-content: center;
}
.training-completion-progress-container-wrapper{
  padding-top: 40px;
}

/* Cert Tracking */

.comp-header-cert-tracking {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;  
}

  .download-button-cert-tracking {
    display: inline-flex;
    align-items: center;
    padding: 8px 14px;
    background-color: #ffffff;
    border: 2px solid #f1f1f1;
    color: #222222;
    border-radius: 8px;
    text-decoration: none;
    font-size: 18px;
  }
  .download-button-cert-tracking img {
    margin-right: 15px;
  }
  table.comp-cert-tracking {
    width: 100%;
    border-collapse: collapse;
    margin-top: 50px;
    border: none;
    table-layout: fixed;
  }
  .comp-cert-tracking tr{
    display:flex;
  }
  .comp-cert-tracking th, .comp-cert-tracking td {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex: 1; /* Allow to grow equally */
    height: 80px;
    text-align: left;
    border: none;
    border-bottom: 1px solid #f1f1f1;
    font-size: 18px;
    font-weight: 500;
    vertical-align: middle;
  }
  .comp-cert-tracking th {
    color: #666;
    background-color: transparent;
  }
  .comp-cert-tracking td {
    color: #000000;
  }
  .comp-cert-tracking td img{
    width: 35px;
    height: 35px;
  } 
  .comp-cert-tracking .img-with-name{
    display: flex;
    align-items: center;
  }
  .status-comp-cert-tracking {
    display: flex;
    align-items: center;
  }
  .dot-comp-cert-tracking {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 5px;
  }
  .dot-comp-cert-tracking.compliant-comp-cert-tracking { background-color: #43a047; }
  .dot-comp-cert-tracking.expired-comp-cert-tracking { background-color: #d32f2f; }

/* Resources */

.panel.resources-panels.r-comp-2{
    margin: 15px;
}
.r-comp-1{
    min-width: 70%;
    margin-top: 45px;
}
.r-comp-2{
    min-width: 25%;
}

.resource-article-links{
    display: flex;
    flex-direction: column;
    border: 2px solid #f1f1f1;
    padding: 30px;
    border-radius: 12px;
}
.links-title{
    padding-bottom: 30px;
}
.resource-article-links a{
    font-size: 18px;
    color: #6F34FC;
    font-weight: 500;
    text-decoration: none;
    padding: 10px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.resource-article-links a:hover{
    text-decoration: none;
}
.selected-staff{
    background-color: #fafafa;
}
.main-dashboard-title-wrapper{
    display:flex;
    justify-content: space-between;
}
.main-dashboard-cta-button,.main-dashboard-cta-button:hover,.main-dashboard-cta-button:active,.main-dashboard-cta-button:visited{
    background-color: #169997;
    padding: 15px 20px;
    font-size: 18px;
    border: 1px solid #169997;
}
.main-dashboard-cta-button-secondary,.main-dashboard-cta-button-secondary:hover,.main-dashboard-cta-button-secondary:active,.main-dashboard-cta-button-secondary:visited{
    background-color: #169997;
    font-weight: bold;
    color: #fff;
    padding: 15px 25px;
    text-align: center;
    width: 200px;
    display: block;
    text-decoration: none;
    border-radius: 6px;
    font-size: 20px;
}
.leave-panel,.leave-panel:hover, .leave-panel:active, .leave-panel:visited{
  text-decoration: none;
}
.ph-holiday-table tbody tr, .au-holiday-table tbody tr{
  transition: transform 0.3s ease-in-out;
}
.ph-holiday-table tbody tr:hover, .au-holiday-table tbody tr:hover {
  transform: scale(1.05); /* Enlarges the cell by 20% */
}
.ph-holiday-table tbody tr:hover td, .au-holiday-table tbody tr:hover td {
  font-weight: bold;
}
.ph-holiday-table thead tr, .au-holiday-table thead tr{
  background-color: #104999;
  border-radius:10px;
}
.ph-holiday-table thead th, .au-holiday-table thead th{
  color: #ffffff;
  font-size: 22px;
}
.ph-holiday-table, .au-holiday-table{
  border-collapse: separate !important;
}