/******* Common Element CSS Start ******/
:root {
    --primary-color: #005BB9;
    --secondary-color: #3671a0;
    --page-bg-color: rgb(244, 244, 244);
    --white: #ffffff;
    --dark: #2b2b2b;
    --darker: #1c1c1c;
}

body {
background: #f1f2f7;
min-height: 100vh;
min-height: -webkit-fill-available;
}

html {
  height: -webkit-fill-available;
}

main {
  height: 100vh!important;
  height: -webkit-fill-available;
  max-height: 100vh;
}

.dropdown-toggle { outline: 0; }

.btn-toggle {
  padding: .25rem .5rem;
  font-weight: 600;
  color: var(--bs-emphasis-color);
  background-color: transparent;
}
.btn-toggle:hover,
.btn-toggle:focus {
  color: rgba(var(--bs-emphasis-color-rgb), .85);
  background-color: var(--bs-tertiary-bg);
}

.btn-toggle::before {
  width: 1.25em;
  line-height: 0;
  content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%280,0,0,.5%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e");
  transition: transform .35s ease;
  transform-origin: .5em 50%;
}

[data-bs-theme="dark"] .btn-toggle::before {
  content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%28255,255,255,.5%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e");
}

.btn-toggle[aria-expanded="true"] {
  color: rgba(var(--bs-emphasis-color-rgb), .85);
}
.btn-toggle[aria-expanded="true"]::before {
  transform: rotate(90deg);
}

.btn-toggle-nav a {
padding: .1875rem .0rem;
margin-top: .125rem;
margin-left: 0rem;
}
.btn-toggle-nav a:hover,
.btn-toggle-nav a:focus {
  background-color: var(--bs-tertiary-bg);
}

.scrollarea {
  overflow-y: auto;
}

.profile-details {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
background: #f7f7f7;
transition: all 0.5s ease;
padding: 1rem 2.4rem;
}

.sidebar {
    position: fixed;
    z-index: 0;
    top: 65px;
    left: 0;
    bottom: 0;
    width: 25%;
    background: #fff;
}

.sidebar-content::-webkit-scrollbar {
display: none;
}

.sidebar-content {
height: 100%;
overflow: auto;
padding: 1.5rem 0.5rem 1.5rem 0.5rem;
font-size: 14px;
}

.sidebar-item-dropdowns {
padding: .25rem .0rem;
font-weight: 500;
color: var(--bs-emphasis-color);
background-color: transparent;
}

.small-task-counter {
font-size: .875em;
color: rgb(139, 139, 139);
}


.custom-tooltip {
  --bs-tooltip-bg: var(--primary-color);
}

.small-tooltip {
  font-size: 10px;
}

.small-tooltip.success {
  --bs-tooltip-bg: green;
}
.small-tooltip.urgent {
  --bs-tooltip-bg: red;
}

.primary-header {
padding: 30px 30px 100px 30px;
background-color: #000C2E;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 1000'%3E%3Cg %3E%3Ccircle fill='%23000C2E' cx='50' cy='0' r='50'/%3E%3Cg fill='%23001034' %3E%3Ccircle cx='0' cy='50' r='50'/%3E%3Ccircle cx='100' cy='50' r='50'/%3E%3C/g%3E%3Ccircle fill='%2300133b' cx='50' cy='100' r='50'/%3E%3Cg fill='%23001542' %3E%3Ccircle cx='0' cy='150' r='50'/%3E%3Ccircle cx='100' cy='150' r='50'/%3E%3C/g%3E%3Ccircle fill='%23001748' cx='50' cy='200' r='50'/%3E%3Cg fill='%2300194f' %3E%3Ccircle cx='0' cy='250' r='50'/%3E%3Ccircle cx='100' cy='250' r='50'/%3E%3C/g%3E%3Ccircle fill='%23001b56' cx='50' cy='300' r='50'/%3E%3Cg fill='%23001d5d' %3E%3Ccircle cx='0' cy='350' r='50'/%3E%3Ccircle cx='100' cy='350' r='50'/%3E%3C/g%3E%3Ccircle fill='%23001f64' cx='50' cy='400' r='50'/%3E%3Cg fill='%2300216b' %3E%3Ccircle cx='0' cy='450' r='50'/%3E%3Ccircle cx='100' cy='450' r='50'/%3E%3C/g%3E%3Ccircle fill='%23002372' cx='50' cy='500' r='50'/%3E%3Cg fill='%23002479' %3E%3Ccircle cx='0' cy='550' r='50'/%3E%3Ccircle cx='100' cy='550' r='50'/%3E%3C/g%3E%3Ccircle fill='%23002680' cx='50' cy='600' r='50'/%3E%3Cg fill='%23002887' %3E%3Ccircle cx='0' cy='650' r='50'/%3E%3Ccircle cx='100' cy='650' r='50'/%3E%3C/g%3E%3Ccircle fill='%23002a8e' cx='50' cy='700' r='50'/%3E%3Cg fill='%23002b95' %3E%3Ccircle cx='0' cy='750' r='50'/%3E%3Ccircle cx='100' cy='750' r='50'/%3E%3C/g%3E%3Ccircle fill='%23002d9c' cx='50' cy='800' r='50'/%3E%3Cg fill='%23002ea4' %3E%3Ccircle cx='0' cy='850' r='50'/%3E%3Ccircle cx='100' cy='850' r='50'/%3E%3C/g%3E%3Ccircle fill='%23002fab' cx='50' cy='900' r='50'/%3E%3Cg fill='%230031b2' %3E%3Ccircle cx='0' cy='950' r='50'/%3E%3Ccircle cx='100' cy='950' r='50'/%3E%3C/g%3E%3Ccircle fill='%230032B9' cx='50' cy='1000' r='50'/%3E%3C/g%3E%3C/svg%3E");
background-size: contain;
color: #fff;
}

.primary-header p {
  margin-bottom: 0px;
  opacity: 0.4;
  line-height: 22px;
}

.content-below-header {
position: relative;
top: -50px;
padding: 0px 30px;
}

.header-breadcrumb {
background: rgba(255, 255, 255, 0.15);
padding: 10px;
margin-bottom: 35px;
border-radius: 4px;
}

.header-breadcrumb .breadcrumb {
margin-bottom: 0px;
}

.header-breadcrumb .breadcrumb li {
font-size: 12px;
}

.header-breadcrumb .breadcrumb li a {
color: #fff;
text-decoration: none;
opacity: 0.8;
}

.header-breadcrumb .breadcrumb-item.active {
color: #fff;
}

.box {
padding: 20px;
background: #fff;
box-shadow: 0 .125rem .25rem rgba(0,0,0,.025)!important;
display: flex;
}

.box-r-4 {
border-radius: 4px;
}

.box-full {
  display: block;
}

.box.box-border-pending {
border-left: 10px solid rgb(247, 247, 247);
}
.box.box-border-overdue {
border-left: 10px solid rgb(220,53,69,0.1);
}
.box.box-border-success {
border-left: 10px solid rgb(25,135,84,0.1);
}

.box .icon {
padding: 0px;
font-size: 35px;
opacity: 0.2;
padding-right: 5px;
}

.box .divider {
margin: 0px 10px;
border-left: 2px solid #f5f5f5;
height: 50px;
}

.box .content {
padding: 5px;
}

.box .content .counter {
margin-bottom: 0px;
font-weight: 600;
font-size: 24px;
line-height: 30px;
}

.box .content .title {
margin-bottom: 0px;
opacity: 0.5;
font-size: 12px;
}

.new-alert {
position: absolute;
top: 8px;
right: -5px;
width: 10px;
height: 10px;
}

.nav-item {
background: none;
margin: auto 5px;
border-radius: 4px;
padding: 0px 5px;
}

.nav-item a {
color: #000;
}

.active-sidebar {
background: rgb(247, 247, 247);
padding: 10px 10px;
border-radius: 5px;
border-left: 5px solid var(--primary-color);
font-weight: 500;
}

.sidebar-link {
padding: 10px 10px;
width: 100%;
background: rgb(250, 250, 250);
text-align: left;
border-radius: 5px!important;
border-left: 5px solid #eee!important;
font-size: 14px;
font-weight: 400;
}

nav.navbar {

}

.nav-item-divider {
border-right: 1px solid rgb(237, 237, 237);
}

.navbar-title {
font-size: 26px;
font-weight: 600;
transition: left 0.5s;
}

.navbar-title:hover {
}

.navbar-title span {
color: var(--primary-color);
}


.wave {
  animation-name: wave-animation;  /* Refers to the name of your @keyframes element below */
  animation-duration: 2.5s;        /* Change to speed up or slow down */
  animation-iteration-count: infinite;  /* Never stop waving :) */
  transform-origin: 70% 70%;       /* Pivot around the bottom-left palm */
  display: inline-block;
}

@keyframes wave-animation {
    0% { transform: rotate( 0.0deg) }
   10% { transform: rotate(14.0deg) }  /* The following five values can be played with to make the waving more or less extreme */
   20% { transform: rotate(-8.0deg) }
   30% { transform: rotate(14.0deg) }
   40% { transform: rotate(-4.0deg) }
   50% { transform: rotate(10.0deg) }
   60% { transform: rotate( 0.0deg) }  /* Reset for the last half to pause */
  100% { transform: rotate( 0.0deg) }
}


.task-column {
padding: 0px;
margin-bottom: 20px;
}

.task-column .header {
background: #e0e0e0;
padding: 10px;
text-align: center;
border-radius: 4px 4px 0px 0px;
font-size: 14px;
font-weight: 700;
}

.task-column .header.completed {
background: green;
color: #fff;
}

.task-column .header.in-progress {
background: rgb(228, 149, 0);
color: #fff;
}

.task-column .header.outstanding {
background: #fe7272;
color: #fff;
}

.task-column .body {
 padding: 15px; 
border: 4px dashed #e0e0e0;
border-top: none;
border-radius: 0px 0px 4px 4px;
}

.shadow-sml {
box-shadow: 0 .125rem .25rem rgba(0,0,0,.025)!important;
}

.nav-list-block {
margin-bottom: 20px;
}

.nav-list-block .sidebar-link:last-child {
margin-bottom: 0px;
}

.nav-list-header {
padding-bottom: 10px;
text-transform: capitalize;
font-weight: 300;
opacity: 0.5;
}

.task-list-dropdown-content {
padding: 10px 10px;
}

.primary-header-items {
display: flex;
}

.emoji {
font-size: 50px;
margin-right: 15px;
}

.box-header {
background: #e5e6eb;
display: -webkit-inline-box;
padding: 8px 25px;
font-size: 12px;
font-weight: 500;
}

/* Task Items */

.task-item {
background: #f9f9f9;
border: 1px solid #f4f4f4;
margin-bottom: 10px;
padding: 15px;
display: -webkit-flex;
border-radius: 4px;
}

.task-item:last-child {
margin-bottom: 0px;
}

.task-item .task-content h6 {
font-size: 14px;
font-weight: 500;
}

.task-item .task-content p {
font-size: 10px;
font-weight: 300;
margin-bottom: 0px;
}

.task-item .task-content {
width: 90%;
}

.task-item .task-status {
width: 10%;
text-align: center;
font-size: 20px;
background: #f0f0f0;
height: 100%;
border-radius: 10px;
padding: 8px;
}


.task-item .task-status:hover {
background: #e8e8e8;
cursor: pointer;
}


.styled-table {
    border-collapse: collapse;
    font-size: 0.9em;
    margin-bottom: 0px;
    border: 1px solid #e5e6eb;
    width: 100%;
    table-layout: fixed;
}

.styled-table thead {
display: none;
}

.styled-table thead tr {
background-color: #e5e6eb;
color: #000;
text-align: left;
}

.styled-table th:nth-child(1),
.styled-table td:nth-child(1) {
    width: 50px;
    height: 50px;
    text-align: center;
    background: #f6f6f6;
}

.styled-table th:nth-child(3),
.styled-table td:nth-child(3) {
    width: 50px;
    height: 50px;
    text-align: center;
}

.styled-table th:nth-child(2),
.styled-table td:nth-child(2) {
padding: 12px;
}

.styled-table th, .styled-table td {
padding: 12px 0px 12px 0px;
vertical-align: middle;
}

.styled-table tbody tr {
border-bottom: 1px solid #e5e6eb;
}

.styled-table tbody tr:nth-of-type(even) {
    background-color: #fcfcfc;
}

.styled-table tbody tr:last-of-type {
    border-bottom: 1px solid #e5e6eb;
}

.styled-table tbody tr.active-row {
    font-weight: bold;
    color: var(--primary-color);
}

.task-title {
  font-size: 14px;
font-weight: 500;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-bottom: 8px;
}
.task-settings {
  font-size: 10px;
font-weight: 300;
margin-bottom: 0px;
}


.mark-as-completed-btn {
cursor: pointer;
opacity: 0.3;
}

.mark-as-completed-btn:hover {
color: green;
opacity: 1;
}

.view-all {
font-size: 12px;
text-align: center;
margin-top: 20px;
margin-bottom: 0px;
cursor: pointer;
}

.view-all:hover {
font-weight: 500;
}

/* Holidays - Dashboard */

.info-text {
font-size: 12px;
}

.holiday-counters {
}

.holiday-counters .count-item {
padding: 10px;
background: #f9f9f9;
text-align: center;
}

.holiday-counters .count-item.approved {
background: #f0ffec;
}

.holiday-counters .count-item.pending {
background: #fffaec;
}

.holiday-counters .count-item .counter {
margin-bottom: 2px;
font-size: 16px;
font-weight: 500;
}

.holiday-counters .count-item .counter-title {
margin-bottom: 0px;
font-size: 12px;
opacity: 0.6;
}

/* Mobile */
@media (max-width:767px) {

.content-below-header {
padding: 0px;
}

.primary-header {
padding: 30px 0px 100px 0px;
}

}