/* Password Strength */
.strength_meter {
    height: 23px;
    width: 154px;
    background: silver;

}

.strength_meter div {
    height: 23px;
    width: 100%;
    height: 23px;
    text-align: center;
    color: black;
    font-weight: bold;
    line-height: 23px;
}

.veryweak {
    background-color: #FFA0A0;
    border-color: #F04040 !important
}

.weak {
    background-color: #FFB78C;
    border-color: #FF853C !important;
}

.medium {
    background-color: #FFEC8B;
    border-color: #FC0 !important;
}

.strong {
    background-color: #C3FF88;
    border-color: #8DFF1C !important;
}

/* End Password Strength */

body {
    margin: 0;
    padding: 0;
    background: #9fabc6;
}

.loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 200px;
    height: 200px;
    background: transparent;
    border: 3px solid #3c3c3c;
    border-radius: 50%;
    text-align: center;
    line-height: 200px;
    font-family: sans-serif;
    font-size: 25px;
    color: #ffffff;
    letter-spacing: 4px;
    text-transform: uppercase;
    text-shadow: 0 0 5px #fff;
    box-shadow: 0 0 20px rgb(198, 194, 255);
}

.loading::after {
    content: '';
    position: absolute;
    top: -3px;
    left: -3px;
    width: 100%;
    height: 100%;
    border: 3px solid transparent;
    border-bottom: 3px solid #9fabc6;
    border-top: 3px solid #9fabc6;
    border-radius: 50%;
    animation: animateC 2s linear infinite;
}

@keyframes animateC {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Grid CSS */

.grid+.grid {
    margin-top: 1rem;
}

.grid>* {
    padding-top: .75rem;
    padding-bottom: .75rem;
    /*
    background-color: rgba(255, 0, 255, .1);
    border: 1px solid rgba(255, 0, 255, .25);
    */
    text-align: center;
}

/* styles added for the proper display of examples in docs. 
     It is a copy of the styles added in the bootstrap for css grid
  */
.grid {
    display: grid;
    grid-template-rows: repeat(var(--bs-rows, 1), 1fr);
    grid-template-columns: repeat(var(--bs-columns, 12), 1fr);
    gap: var(--bs-gap, 1.5rem);
}

.grid .g-col-2 {
    grid-column: auto/span 2;
}

.grid .g-col-3 {
    grid-column: auto/span 3;
}

.grid .g-col-4 {
    grid-column: auto/span 4;
}

.grid .g-col-6 {
    grid-column: auto/span 6;
}

.grid .g-start-2 {
    grid-column-start: 2;
}

.grid .g-start-3 {
    grid-column-start: 3;
}

.grid .g-start-6 {
    grid-column-start: 6;
}

@media (min-width: 768px) {
    .grid .g-col-md-4 {
        grid-column: auto/span 4;
    }

    .grid .g-col-md-3 {
        grid-column: auto/span 3;
    }
}

@media (min-width: 992px) {
    .grid .g-col-lg-4 {
        grid-column: auto/span 4;
    }

    .grid .g-col-lg-3 {
        grid-column: auto/span 3;
    }

}


/* Timeline Tabler */
:root {
    --tblr-content-padding: 1.25rem;
    --tblr-border-width: 1px;
    --tblr-border-radius: 4px;
    --tblr-muted: #616876;
    --tblr-border-color: #e6e7e9;
    --tblr-gray-200: #e2e8f0;
}

.list-timeline {
    position: relative;
    padding: 0;
    margin: 0;
    list-style: none
}

.list-timeline>li {
    position: relative;
    margin-bottom: 1.5rem
}

.list-timeline>li:last-child {
    margin-bottom: 0
}

.list-timeline-time {
    float: right;
    margin-left: 1rem;
    color: #616876
}

.list-timeline-icon {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    color: #fff;
    text-align: center;
    background: #616876;
    border-radius: 100rem
}

.list-timeline-icon .icon {
    width: 1rem;
    height: 1rem;
    font-size: 1rem
}

.list-timeline-title {
    margin: 0;
    font-weight: var(--tblr-font-weight-bold)
}

.list-timeline-content {
    margin-left: 3.5rem
}

@media screen and (min-width: 768px) {
    .list-timeline:not(.list-timeline-simple):before {
        position: absolute;
        top: 0;
        bottom: 0;
        left: calc(11.5rem + 2px);
        z-index: 1;
        display: block;
        width: 4px;
        content: "";
        background-color: #f1f5f9
    }

    .list-timeline:not(.list-timeline-simple)>li {
        z-index: 2;
        min-height: 40px
    }

    .list-timeline:not(.list-timeline-simple) .list-timeline-time {
        position: absolute;
        top: .5rem;
        left: 0;
        width: 10rem;
        margin: 0;
        text-align: right
    }

    .list-timeline:not(.list-timeline-simple) .list-timeline-icon {
        top: 0;
        left: 10.5rem
    }

    .list-timeline:not(.list-timeline-simple) .list-timeline-content {
        padding: .300rem 0 0 13.5rem;
        margin: 0
    }
}


.timeline {
    --tblr-timeline-icon-size: 2.5rem;
    position: relative;
    list-style: none;
    padding: 0;
}

.timeline-event {
    position: relative;
}

.timeline-event:not(:last-child) {
    margin-bottom: var(--tblr-content-padding);
}

.timeline-event:not(:last-child):before {
    content: "";
    position: absolute;
    top: var(--tblr-timeline-icon-size);
    left: calc(var(--tblr-timeline-icon-size) / 2);
    bottom: calc(-1 * var(--tblr-content-padding));
    width: var(--tblr-border-width);
    background-color: var(--tblr-border-color);
    border-radius: var(--tblr-border-radius);
}

.timeline-event-icon {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--tblr-timeline-icon-size, 2.5rem);
    height: var(--tblr-timeline-icon-size, 2.5rem);
    background: var(--tblr-gray-200);
    color: var(--tblr-muted);
    border-radius: var(--tblr-border-radius);
    z-index: 5;
}

.timeline-event-card {
    margin-left: calc(var(--tblr-timeline-icon-size, 2.5rem) + var(--tblr-content-padding));
}

.timeline-simple .timeline-event-icon {
    display: none;
}

.timeline-simple .timeline-event-card {
    margin-left: 0;
}

.timeline-event-card .float-end {
    float: none !important;
}

@media (min-width: 576px) {

    .timeline-event-card .float-end {
        float: right !important;
    }

}

/* Timeline */

.timeline-1 {
    border-left: 3px solid #285192;
    border-bottom-right-radius: 4px;
    border-top-right-radius: 4px;

    background: rgba(40, 81, 146, 0.09);
    margin: 0 auto;
    position: relative;
    padding: 50px;
    list-style: none;
    text-align: left;
    max-width: 80%;
    /* 40% */
}

@media (max-width: 767px) {
    .timeline-1 {
        max-width: 98%;
        padding: 25px;
    }
}

.timeline-1 .event {
    border-bottom: 1px dashed #000;
    padding-bottom: 25px;
    margin-bottom: 25px;
    position: relative;
}

@media (max-width: 767px) {
    .timeline-1 .event {
        padding-top: 30px;
    }
}

.timeline-1 .event:last-of-type {
    padding-bottom: 0;
    margin-bottom: 0;
    border: none;
}

.timeline-1 .event:before,
.timeline-1 .event:after {
    position: absolute;
    display: block;
    top: 0;
}

.timeline-1 .event:before {
    left: -207px;
    content: attr(data-date);
    text-align: right;
    font-weight: 100;
    font-size: 0.9em;
    min-width: 120px;
}

@media (max-width: 767px) {
    .timeline-1 .event:before {
        left: 0px;
        text-align: left;
    }
}

.timeline-1 .event:after {
    -webkit-box-shadow: 0 0 0 3px #285192;
    box-shadow: 0 0 0 3px #285192;
    left: -55.8px;
    background: #fff;
    border-radius: 50%;
    height: 9px;
    width: 9px;
    content: "";
    top: 5px;
}

@media (max-width: 767px) {
    .timeline-1 .event:after {
        left: -31.8px;
    }
}



.timeline-with-icons {
    border-left: 1px solid hsl(0, 0%, 90%);
    position: relative;
    list-style: none;
}

.timeline-with-icons .timeline-item {
    position: relative;
}

.timeline-with-icons .timeline-item:after {
    position: absolute;
    display: block;
    top: 0;
}

.timeline-with-icons .timeline-icon {
    position: absolute;
    left: -48px;
    background-color: hsl(217, 88.2%, 90%);
    color: hsl(217, 88.8%, 35.1%);
    border-radius: 50%;
    height: 31px;
    width: 31px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* General */

.dialog-large {
    --mdb-modal-width: 90%;
}

.dialog-large .modal-body {}

.float-start-padded {
    float: left;
    padding: 8px;
}

.float-start-padded:hover {
    background-color: rgba(40, 81, 146, 0.09);
    border-radius: 10px;
}

@media (min-width: 576px) {}



.daterangepicker .today {
    background-color: rgba(40, 81, 146, 0.09);
}

.dropzone {
    background: transparent;
    border: 0px solid white;
}



.popover {
    z-index: 999999;
    position: absolute;
}

.form-control-rounded {
    border-radius: 10rem
}

.initial-avatar {
    /* Center the content */
    align-items: center;
    display: flex;
    justify-content: center;

    /* Colors */
    background-color: #d1d5db;
    color: #fff;

    /* Rounded border */
    border-radius: 50%;
    height: 2rem;
    width: 2rem;
}


.navbar-nav .nav-link.active,
.navbar-nav .show>.nav-link {
    background-color: lightblue;
    border-radius: 10px;
    padding-left: 5px;
}

/* Status */


.status {
    --tblr-status-height: 1.5rem;
    --tblr-status-color: #616876;
    --tblr-status-color-rgb: 97, 104, 118;
    display: inline-flex;
    align-items: center;
    height: var(--tblr-status-height);
    padding: .25rem .75rem;
    gap: .5rem;
    color: var(--tblr-status-color);
    background: rgba(var(--tblr-status-color-rgb), .1);
    font-size: .875rem;
    text-transform: none;
    letter-spacing: normal;
    border-radius: 100rem;
    font-weight: var(--tblr-font-weight-medium);
    line-height: 1;
    margin: 0
}

.status .status-dot {
    background: var(--tblr-status-color)
}

.status .icon {
    font-size: 1.25rem
}

.status-lite {
    border: var(--tblr-border-width) solid var(--tblr-border-color) !important;
    background: 0 0 !important;
    color: var(--tblr-body-text) !important
}

.status-primary {
    --tblr-status-color: #206bc4;
    --tblr-status-color-rgb: 32, 107, 196
}

.status-secondary {
    --tblr-status-color: #616876;
    --tblr-status-color-rgb: 97, 104, 118
}

.status-success {
    --tblr-status-color: #2fb344;
    --tblr-status-color-rgb: 47, 179, 68
}

.status-info {
    --tblr-status-color: #4299e1;
    --tblr-status-color-rgb: 66, 153, 225
}

.status-warning {
    --tblr-status-color: #f76707;
    --tblr-status-color-rgb: 247, 103, 7
}

.status-danger {
    --tblr-status-color: #d63939;
    --tblr-status-color-rgb: 214, 57, 57
}

.status-light {
    --tblr-status-color: #f8fafc;
    --tblr-status-color-rgb: 248, 250, 252
}

.status-dark {
    --tblr-status-color: #1d273b;
    --tblr-status-color-rgb: 29, 39, 59
}

.status-muted {
    --tblr-status-color: #616876;
    --tblr-status-color-rgb: 97, 104, 118
}

.status-blue {
    --tblr-status-color: #206bc4;
    --tblr-status-color-rgb: 32, 107, 196
}

.status-azure {
    --tblr-status-color: #4299e1;
    --tblr-status-color-rgb: 66, 153, 225
}

.status-indigo {
    --tblr-status-color: #4263eb;
    --tblr-status-color-rgb: 66, 99, 235
}

.status-purple {
    --tblr-status-color: #ae3ec9;
    --tblr-status-color-rgb: 174, 62, 201
}

.status-pink {
    --tblr-status-color: #d6336c;
    --tblr-status-color-rgb: 214, 51, 108
}

.status-red {
    --tblr-status-color: #d63939;
    --tblr-status-color-rgb: 214, 57, 57
}

.status-orange {
    --tblr-status-color: #f76707;
    --tblr-status-color-rgb: 247, 103, 7
}

.status-yellow {
    --tblr-status-color: #f59f00;
    --tblr-status-color-rgb: 245, 159, 0
}

.status-lime {
    --tblr-status-color: #74b816;
    --tblr-status-color-rgb: 116, 184, 22
}

.status-green {
    --tblr-status-color: #2fb344;
    --tblr-status-color-rgb: 47, 179, 68
}

.status-teal {
    --tblr-status-color: #0ca678;
    --tblr-status-color-rgb: 12, 166, 120
}

.status-cyan {
    --tblr-status-color: #17a2b8;
    --tblr-status-color-rgb: 23, 162, 184
}

.status-facebook {
    --tblr-status-color: #3b5998;
    --tblr-status-color-rgb: 59, 89, 152
}

.status-twitter {
    --tblr-status-color: #1da1f2;
    --tblr-status-color-rgb: 29, 161, 242
}

.status-linkedin {
    --tblr-status-color: #0a66c2;
    --tblr-status-color-rgb: 10, 102, 194
}

.status-google {
    --tblr-status-color: #dc4e41;
    --tblr-status-color-rgb: 220, 78, 65
}

.status-youtube {
    --tblr-status-color: #ff0000;
    --tblr-status-color-rgb: 255, 0, 0
}

.status-vimeo {
    --tblr-status-color: #1ab7ea;
    --tblr-status-color-rgb: 26, 183, 234
}

.status-dribbble {
    --tblr-status-color: #ea4c89;
    --tblr-status-color-rgb: 234, 76, 137
}

.status-github {
    --tblr-status-color: #181717;
    --tblr-status-color-rgb: 24, 23, 23
}

.status-instagram {
    --tblr-status-color: #e4405f;
    --tblr-status-color-rgb: 228, 64, 95
}

.status-pinterest {
    --tblr-status-color: #bd081c;
    --tblr-status-color-rgb: 189, 8, 28
}

.status-vk {
    --tblr-status-color: #6383a8;
    --tblr-status-color-rgb: 99, 131, 168
}

.status-rss {
    --tblr-status-color: #ffa500;
    --tblr-status-color-rgb: 255, 165, 0
}

.status-flickr {
    --tblr-status-color: #0063dc;
    --tblr-status-color-rgb: 0, 99, 220
}

.status-bitbucket {
    --tblr-status-color: #0052cc;
    --tblr-status-color-rgb: 0, 82, 204
}

.status-tabler {
    --tblr-status-color: #206bc4;
    --tblr-status-color-rgb: 32, 107, 196
}

.status-dot {
    --tblr-status-dot-color: var(--tblr-status-color, #616876);
    --tblr-status-size: 0.5rem;
    position: relative;
    display: inline-block;
    width: var(--tblr-status-size);
    height: var(--tblr-status-size);
    background: var(--tblr-status-dot-color);
    border-radius: 100rem
}

.status-dot-animated:before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background: inherit;
    border-radius: inherit;
    opacity: .6;
    -webkit-animation: 1s linear 2s backwards infinite status-pulsate-tertiary;
    animation: 1s linear 2s backwards infinite status-pulsate-tertiary
}

.status-indicator {
    --tblr-status-indicator-size: 2.5rem;
    --tblr-status-indicator-color: var(--tblr-status-color, #616876);
    display: block;
    position: relative;
    width: var(--tblr-status-indicator-size);
    height: var(--tblr-status-indicator-size)
}

.status-indicator-circle {
    --tblr-status-circle-size: .75rem;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: calc(var(--tblr-status-circle-size)/ -2) 0 0 calc(var(--tblr-status-circle-size)/ -2);
    width: var(--tblr-status-circle-size);
    height: var(--tblr-status-circle-size);
    border-radius: 100rem;
    background: var(--tblr-status-color)
}

.status-indicator-circle:nth-child(1) {
    z-index: 3
}

.status-indicator-circle:nth-child(2) {
    z-index: 2;
    opacity: .1
}

.status-indicator-circle:nth-child(3) {
    z-index: 1;
    opacity: .3
}

.status-indicator-animated .status-indicator-circle:nth-child(1) {
    -webkit-animation: 2s linear 1s infinite backwards status-pulsate-main;
    animation: 2s linear 1s infinite backwards status-pulsate-main
}

.status-indicator-animated .status-indicator-circle:nth-child(2) {
    -webkit-animation: 2s linear 1s infinite backwards status-pulsate-secondary;
    animation: 2s linear 1s infinite backwards status-pulsate-secondary
}

.status-indicator-animated .status-indicator-circle:nth-child(3) {
    -webkit-animation: 2s linear 1s infinite backwards status-pulsate-tertiary;
    animation: 2s linear 1s infinite backwards status-pulsate-tertiary
}


/* Status */

/* Tooltips */

[data-tooltip-bottom]:hover,
[data-tooltip-left]:hover,
[data-tooltip-right]:hover,
[data-tooltip]:hover {
    position: relative;
}

[data-tooltip-bottom]:hover::after,
[data-tooltip-left]:hover::after,
[data-tooltip-right]:hover::after,
[data-tooltip]:hover::after {
    all: initial;
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #1a1a1a;
    position: absolute;
    bottom: 100%;
    content: '';
    left: 50%;
    transform: translate(-50%, 0);
    margin-bottom: 5px;
}

[data-tooltip-right]:hover::after {
    margin-bottom: 0;
    bottom: auto;
    transform: rotate(90deg) translate(0, -50%);
    left: 100%;
    top: 50%;
    margin-left: -5px;
    margin-top: -5px;
}

[data-tooltip-left]:hover::after {
    margin-bottom: 0;
    bottom: auto;
    transform: rotate(-90deg) translate(0, -50%);
    left: auto;
    right: 100%;
    top: 50%;
    margin-right: -5px;
    margin-top: -5px;
}

[data-tooltip-bottom]:hover::after {
    margin-bottom: 0;
    bottom: auto;
    transform: rotate(180deg) translate(-50%, 0);
    top: 100%;
    margin-left: -20px;
    margin-top: 5px;
}

[data-tooltip-bottom]:hover::before,
[data-tooltip-left]:hover::before,
[data-tooltip-right]:hover::before,
[data-tooltip]:hover::before {
    all: initial;
    font-family: Arial, Helvetica, sans-serif;
    display: inline-block;
    border-radius: 5px;
    padding: 10px;
    background-color: #1a1a1a;
    content: attr(data-tooltip);
    color: #f9f9f9;
    position: absolute;
    bottom: 100%;
    width: 100px;
    left: 50%;
    transform: translate(-50%, 0);
    margin-bottom: 15px;
    text-align: center;
    font-size: 14px;
}

[data-tooltip-right]:hover::before {
    margin-bottom: 0;
    bottom: auto;
    transform: translate(0, -50%);
    left: 100%;
    top: 50%;
    content: attr(data-tooltip-right);
    margin-left: 15px;
}

[data-tooltip-left]:hover::before {
    margin-bottom: 0;
    bottom: auto;
    transform: translate(0, -50%);
    left: auto;
    right: 100%;
    top: 50%;
    content: attr(data-tooltip-left);
    margin-right: 15px;
}

[data-tooltip-bottom]:hover::before {
    margin-bottom: 0;
    bottom: auto;
    top: 100%;
    content: attr(data-tooltip-bottom);
    margin-top: 15px;
}

/* Tooltips */

.planDetail_Day {
    border: 1px solid black;
    width: 23px;
    height: 23px;
    font-size: 11px;
    color: white;
    text-align: center;
}

.infoEmployee {
    width: 21px;
    text-align: left;
    white-space: nowrap;
    font-family: "Roboto", sans-serif
}

.planField {
    width: 21px;
    text-align: center;
    white-space: nowrap;
    font-family: "Roboto", sans-serif;
    max-width: 21px;
    font-size: 15px;
}

.infoTime {
    width: 21px;
    text-align: right;
    padding-left: 20px;
}

.shiftFieldEnd {
    position: relative;
    right: 17px;
    font-size: 14px;
}

.shiftFieldStart {
    position: relative;
    left: 25px;
    font-size: 14px;
    
}

.text-muted {
    margin-block-end: 2px;
}

.list-item-small-space {
    margin-block-end: 6px;
    margin-bottom: 6px !important;
}

/* Employee Card */
.card-container {
    max-width: 400px;
    margin: auto;
    background: white;
    border-radius: 15px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    padding: 20px;
}
.companyLogo {
    max-width: 100px;
}
.employeePhoto {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #007bff;
}
.info-text {
    font-size: 16px;
    font-weight: 500;
}

@media screen and (orientation: landscape) {
    .paneEmpHorizontal {
        display: block;
    }
    .paneEmpVertical {
        display: none;
    }
  }

  @media screen and (orientation: portrait) {
    .paneEmpHorizontal {
        display: none;
    }
    .paneEmpVertical {
        display: block;
    }
  }

  .qr-container {
    text-align: center;
    margin-top: 15px;
}
canvas {
    border-radius: 5px;
    background: white;
    padding: 5px;
}

/* Table for branch plan */
.planToday {
 background-color: rgba(0,0,0, .05);
}