.fs-sm {
  font-size: 0.6875rem;
}

.fs-base {
  font-size: 0.875rem;
}

.fs-lg {
  font-size: 1.125rem;
}

.fs-1 {
  font-size: 0.0625rem;
}

.fs-2 {
  font-size: 0.125rem;
}

.fs-3 {
  font-size: 0.1875rem;
}

.fs-4 {
  font-size: 0.25rem !important;
}

.fs-5 {
  font-size: 0.3125rem !important;
}

.fs-6 {
  font-size: 0.375rem !important;
}

.fs-7 {
  font-size: 0.4375rem;
}

.fs-8 {
  font-size: 0.5rem !important;
}

.fs-9 {
  font-size: 0.5625rem;
}

.fs-10 {
  font-size: 0.75em !important;
}

.fs-11 {
  font-size: 0.6875rem;
}

.fs-12 {
  font-size: 0.75rem;
}

.fs-13 {
  font-size: 0.8125rem;
}

.fs-14 {
  font-size: 0.875rem !important;
}

.fs-15 {
  font-size: 0.9375rem;
}

.fs-16 {
  font-size: 1rem;
}

.fs-17 {
  font-size: 1.0625rem;
}

.fs-18 {
  font-size: 1.125rem;
}

.fs-19 {
  font-size: 1.1875rem;
}

.fs-20 {
  font-size: 1.25rem;
}

.fs-21 {
  font-size: 1.3125rem;
}

.fs-22 {
  font-size: 1.375rem;
}

.fs-23 {
  font-size: 1.4375rem;
}

.fs-24 {
  font-size: 1.5rem;
}

.fs-25 {
  font-size: 1.5625rem;
}

.fs-26 {
  font-size: 1.625rem;
}

.fs-27 {
  font-size: 1.6875rem;
}

.fs-28 {
  font-size: 1.75rem;
}

.fs-29 {
  font-size: 1.8125rem;
}

.fs-30 {
  font-size: 1.875rem;
}

.fs-32 {
  font-size: 2rem;
}

.fs-34 {
  font-size: 2.125rem;
}

.fs-36 {
  font-size: 2.25rem;
}

.fs-38 {
  font-size: 2.375rem;
}

.fs-40 {
  font-size: 2.5rem;
}
.fst-italic {
    font-style: italic!important
}

.fst-normal {
    font-style: normal!important
}

.fw-lighter {
    font-weight: lighter!important
}

.fw-light {
    font-weight: 300!important
}

.fw-normal {
    font-weight: 400!important
}

.fw-medium {
    font-weight: 500!important
}

.fw-semibold {
    font-weight: 600!important
}

.fw-bold {
    font-weight: 700!important
}

.fw-bolder {
    font-weight: bolder!important
}
.text-primary {
    --bs-text-opacity: 1;
    color: rgba(var(--bs-primary-rgb),var(--bs-text-opacity))!important
}

.text-secondary {
    --bs-text-opacity: 1;
    color: rgba(var(--bs-secondary-rgb),var(--bs-text-opacity))!important
}

.text-success {
    --bs-text-opacity: 1;
    color: rgba(var(--bs-success-rgb),var(--bs-text-opacity))!important
}

.text-info {
    --bs-text-opacity: 1;
    color: rgba(var(--bs-info-rgb),var(--bs-text-opacity))!important
}

.text-warning {
    --bs-text-opacity: 1;
    color: rgba(var(--bs-warning-rgb),var(--bs-text-opacity))!important
}

.text-danger {
    --bs-text-opacity: 1;
    color: rgba(var(--bs-danger-rgb),var(--bs-text-opacity))!important
}

.text-light {
    --bs-text-opacity: 1;
    color: rgba(var(--bs-light-rgb),var(--bs-text-opacity))!important
}

.text-dark {
    --bs-text-opacity: 1;
    color: rgba(var(--bs-dark-rgb),var(--bs-text-opacity))!important
}

.text-black {
    --bs-text-opacity: 1;
    color: rgba(var(--bs-black-rgb),var(--bs-text-opacity))!important
}

.text-white {
    --bs-text-opacity: 1;
    color: rgba(var(--bs-white-rgb),var(--bs-text-opacity))!important
}

.text-body {
    --bs-text-opacity: 1;
    color: rgba(var(--bs-body-color-rgb),var(--bs-text-opacity))!important
}

.text-muted {
    --bs-text-opacity: 1;
    color: var(--bs-secondary-color)!important
}

.text-black-50 {
    --bs-text-opacity: 1;
    color: rgba(0,0,0,.5)!important
}

.text-white-50 {
    --bs-text-opacity: 1;
    color: rgba(255,255,255,.5)!important
}

.text-body-secondary {
    --bs-text-opacity: 1;
    color: var(--bs-secondary-color)!important
}

.text-body-tertiary {
    --bs-text-opacity: 1;
    color: var(--bs-tertiary-color)!important
}

.text-body-emphasis {
    --bs-text-opacity: 1;
    color: var(--bs-emphasis-color)!important
}

.text-reset {
    --bs-text-opacity: 1;
    color: inherit!important
}

.text-opacity-25 {
    --bs-text-opacity: 0.25
}

.text-opacity-50 {
    --bs-text-opacity: 0.5
}

.text-opacity-75 {
    --bs-text-opacity: 0.75
}

.text-opacity-100 {
    --bs-text-opacity: 1
}

.text-primary-emphasis {
    color: var(--bs-primary-text-emphasis)!important
}

.text-secondary-emphasis {
    color: var(--bs-secondary-text-emphasis)!important
}

.text-success-emphasis {
    color: var(--bs-success-text-emphasis)!important
}

.text-info-emphasis {
    color: var(--bs-info-text-emphasis)!important
}

.text-warning-emphasis {
    color: var(--bs-warning-text-emphasis)!important
}

.text-danger-emphasis {
    color: var(--bs-danger-text-emphasis)!important
}

.text-light-emphasis {
    color: var(--bs-light-text-emphasis)!important
}

.text-dark-emphasis {
    color: var(--bs-dark-text-emphasis)!important
}





.avatar {
    position: relative;
    height: 2.625rem;
    width: 2.625rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: $border-radius;
    color: $white;
    font-weight: $font-weight-medium;
    a.badge:hover {
        color: $white;
    }
    img {
        width: 100%;
        height: 100%;
        border-radius: $border-radius;
    }
    &.avatar-rounded {
        border-radius: 50%;
        img {
            border-radius: 50%;
        }
    }
    &.avatar-radius-0 {
        border-radius: 0;
        img {
            border-radius: 0;
        }
    }
    .avatar-badge {
        position: absolute;
        inset-block-start: -4%;
        inset-inline-end: -0.375rem;
        width: 1.4rem;
        height: 1.4rem;
        font-size: 0.625rem;
        border: 2px solid $white;
        border-radius: 50% !important;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    &.online,&.offline {
        &:before {
            position: absolute;
            content: "";
            width: 0.5rem;
            height: 0.5rem;
            border-radius: 50%;
            inset-inline-end: 0;
            inset-block-end: 0;
            border: 2px solid $white !important;
            z-index: 1;
        }
    }
    &.online:before {
        background-color: $success;
    }
    &.offline:before {
        background-color: $gray-500;
    }
    &.avatar-xs {
        width: 30px;
        height: 30px;
        line-height: 1.25rem;
        font-size: 0.65rem;
        .avatar-badge {
            padding: 0.25rem;
            width:  1rem;
            height: 1rem;
            line-height: 1rem;
            font-size: 0.5rem;
            inset-block-start: -25%;
            inset-inline-end: -0.5rem;
        }
    }
    &.avatar-sm {
        width: 30px;
        height: 30px;
        line-height: 1.5rem;
        font-size: 0.65rem;
        .avatar-badge {
            padding: 0.3rem;
            width:  1.1rem;
            height: 1.1rem;
            line-height: 1.1rem;
            font-size: 0.5rem;
            inset-block-start: -28%;
            inset-inline-end: -0.45rem;
        }
        &.online,&.offline {
            &:before {
                width: 0.5rem;
                height: 0.5rem;
            }
        }    
    }
    &.avatar-md {
        width: 40px;
        height: 40px;
        line-height: 2rem;
        font-size: 0.8rem;
        .avatar-badge {
            padding: 0.4rem;
            width:  1.2rem;
            height: 1.2rem;
            line-height: 1.2rem;
            font-size: 0.65rem;
            inset-block-start: -6%;
            inset-inline-end: -13%;
        }
        &.online,&.offline {
            &:before {
                width: 0.75rem;
                height: 0.75rem;
            }
        }    
        svg {
            width: 1.5rem;
            height: 1.5rem;
        }
    }
    &.avatar-lg {
        width: 2.813rem;
        height: 2.813rem;
        line-height: 2.813rem;
        font-size: 1rem;
        .avatar-badge {
            inset-block-start: -15%;
            inset-inline-end: -0.25%;
        }
        &.online,&.offline {
            &:before {
                width: 0.8rem;
                height: 0.8rem;
            }
        }    
        svg {
            width: 1.8rem;
            height: 1.8rem;
        }
    }
    &.avatar-xl {
        width: 3.6rem;
        height: 3.6rem;
        line-height: 3.6rem;
        font-size: 1.25rem;
        .avatar-badge {
            inset-block-start: -8%;
            inset-inline-end: -0.2%;
        }
        &.online,&.offline {
            &:before {
                width: 0.95rem;
                height: 0.95rem;
            }
        }    
    }
    &.avatar-xxl {
        width: 5rem;
        height: 5rem;
        line-height: 5rem;
        font-size: 1.5rem;
        .avatar-badge {
            inset-block-start: -4%;
            inset-inline-end: 0rem;
        }
        &.online,&.offline {
            &:before {
                width: 1.05rem;
                height: 1.05rem;
                inset-block-end: 0.25rem;
            }
        }    
    }
    &.avatar-xxxl {
        width: 6rem;
        height: 6rem;
        line-height: 6rem;
        font-size: 1.75rem;
        .avatar-badge {
            inset-block-start: -4%;
            inset-inline-end: 0rem;
        }
        &.online,&.offline {
            &:before {
                width: 1.05rem;
                height: 1.05rem;
                inset-block-end: 0.25rem;
            }
        }    
    }
}
.avatar-list-stacked {
    padding: 0;
    &.avatar-group-overlapped {
        .avatar {
            margin-right: -.875rem;
            &:hover{
                z-index:1;
            }
        }
    }	
    &.avatar-group-lg {
        .avatar { 
            width: 3.25rem;
            height: 3.25rem;
            >.initial-wrap {
                font-size: .95rem;
            }
        }
        &.avatar-group-overlapped .avatar {
            margin-right: -1rem;
        }	
    }
    &.avatar-group-sm {
        .avatar { 
            width: 1.5rem;
            height: 1.5rem;
            >.initial-wrap {
                font-size: .6rem;
            }
        }
        &.avatar-group-overlapped .avatar {
            margin-right: -0.625rem;
        }	
    }
    &.avatar-group-xs {
        .avatar { 
            width: 1rem;
            height: 1rem;
            margin-inline-end: -6px !important;
            >.initial-wrap {
                font-size: .6rem;
            }
        }
        &.avatar-group-overlapped .avatar {
            margin-right: -6px;
        }	
    }
    .avatar {
        margin-inline-end: -0.875rem !important;
        border: 1px solid rgba(0,0,0,0.05);
        vertical-align: middle;
        transition: transform ease 200ms;
        &:last-child {
            margin-inline-end: 0 !important;
        }
        &:hover {
            z-index: 1;
            transform: translateY(-0.188rem);
        }
    }
}
.avatar-group {
	display: -webkit-inline-box;
	display: -ms-inline-flexbox;
	display: inline-flex;
	.avatar { 
		width: 2.625rem;
		height: 2.625rem;
		.avatar-img,
		>.initial-wrap {
			border:2px solid $white;
			font-size: .9rem;
		}
	}
	&.avatar-group-overlapped {
		.avatar {
			margin-right: -.875rem;
			&:hover{
				z-index:1;
			}
		}
	}	
	&.avatar-group-lg {
		.avatar { 
			width: 3.25rem;
			height: 3.25rem;
			>.initial-wrap {
				font-size: .95rem;
			}
		}
		&.avatar-group-overlapped .avatar {
			margin-right: -1rem;
		}	
	}
	&.avatar-group-sm {
		.avatar { 
			width: 2rem;
			height: 2rem;
			>.initial-wrap {
				font-size: .6rem;
			}
		}
		&.avatar-group-overlapped .avatar {
			margin-right: -0.625rem;
		}	
	}
}
.avatar {
    &.avatar-xl {
        &.border {
            &.online {
                &::before {
                    width: 10px;
                    height: 10px;
                    inset-inline-end:5px;
                }
            }
        }
    }
}
.avatar-xxxl.candidate-img {
    width: 135px;
    height: 135px;
}







.text-default {
  color: $text-color !important;
}
.text-muted {
  color: $text-muted !important;
}
.text-primary {
  color: $primary !important;
  opacity: 1;
  &.text-opacity-75 {
    color: rgba($primary, 0.75) !important;
  }
  &.text-opacity-25 {
    color: rgba($primary, 0.25) !important;
  }
  &.text-opacity-50 {
    color: rgba($primary, 0.50) !important;
  }
}
.text-secondary {
  color: $secondary !important;
  opacity: 1;
}
.text-info {
  color: $info !important;
  opacity: 1;
}
.text-success {
  color: $success !important;
  opacity: 1;
}
.text-warning {
  color: $warning !important;
  opacity: 1;
}
.text-danger {
  color: $danger !important;
  opacity: 1;
}
.text-skyblue {
  color: $skyblue !important;
  opacity: 1;
}
.text-pink {
  color: $pink !important;
}
.text-purple {
  color: $purple !important;
}
.text-dark {
  color: $dark !important;
}
.text-light {
  color: $light !important;
}
.text-gray {
  color: $gray-500 !important;
}
.text-black {
  color: $black !important;
}
.text-white {
  color: $white !important;
}
.text-fixed-white {
  color: $white !important;
}
.text-fixed-black {
  color: $black !important;
}
.text-gray-1 {
  color: $gray-100;
}
.text-gray-2 {
  color: $gray-200;
}
.text-gray-3 {
  color: $gray-300;
}
.text-gray-4 {
  color: $gray-400;
}
.text-gray-5 {
  color: $gray-500;
}
.text-gray-6 {
  color: $gray-600;
}
.text-gray-7 {
  color: $gray-700;
}
.text-gray-8 {
  color: $gray-800;
}
.text-gray-9 {
  color: #6c757d !important;
}






.display-1 {
  font-size: 30px;
  font-weight: 500;
  @include respond-below(xxl) {
    font-size: 30px;
  }
  @include respond-below(xl) {
    font-size: 36px;
  }
  @include respond-below(lg) {
    font-size: 32px;
  }
  @include respond-below(md) {
    font-size: 26px;
  }
}
.display-4 {
  font-size: 20px;
  font-weight: $font-weight-bold;
  @include respond-below(lg) {
    font-size: 18px;
  }
  @include respond-below(md) {
    font-size: 16px;
  }
}







/*Chart SCSS*/
.apexcharts-legend.apexcharts-align-center.position-right {
    display: none;
}
.apexcharts-toolbar {
    display: none !important;
}
#sales_charts,
.chart-set{
    overflow: hidden;
}
.apexcharts-canvas {
    width: 100% !important;
}
.apex-charts .apexcharts-canvas {
    margin: 0 auto;
}
.apexcharts-legend {
    padding: 0 !important;
}
.h-250 {
    height: 250px;
}
#attendance_chart2 {
    margin: 24px 0 0;
    .attendance-percentage {
        position: absolute;
        right: 0;
        top: 50%;
        transform: translate(-50%,-50%);
        max-width: 100px;
        text-align: center;
        color: $gray-700;
        span {
            font-size: $font-size-28;
            color: $gray-900;
        }
    }
    .apexcharts-legend-marker {
        width: 8px !important;
        height: 3px !important;
        border-radius: 5px !important;
    }
}
#attendance_chart {
    margin: 24px 0;
    .attendance-percentage {
        position: absolute;
        left: 50%;
        top: 43%;
        transform: translate(-50%,-50%);
        max-width: 100px;
        text-align: center;
        color: $gray-700;
        span {
            font-size: $font-size-28;
            color: $gray-900;
        }
    }
    .apexcharts-legend-marker {
        width: 8px !important;
        height: 3px !important;
        border-radius: 5px !important;
    }
}
#exam-result-chart {
    margin-left: -15px;
}

/*Chart SCSS*/

.bg-soft-primary {
    background-color: #FEF0E9;
    color: #F26522;
}
.bg-soft-secondary {
    background-color: #B9CBD1;
    color: #3B7080;
}
.bg-soft-warning {
    background-color: #FFE9A6;
    color: #FFC107;
}
.bg-soft-info {
    background-color: rgba(27, 132, 255, 0.2);
    color: #1B84FF;
}
.bg-soft-danger {
    background-color: #EC9E9E;
    color: #E70D0D;
}
.bg-soft-light {
    background-color: rgba(248, 249, 250, 0.9);
    color: #6B7280;
}
.bg-soft-dark {
    background-color: rgba(33, 37, 41, 0.3);
    color: #FFF;
}


.bg-soft-secondary {
    background-color: #ECF9FF;
}
.bg-primary-100{
    background-color: #FEF0E9 !important;
}
.bg-primary-transparent {
    background-color: #FEF1EB !important;
    color: #F26522 !important;
}
.callout-info {
    background-color: rgba(27, 132, 255, 0.075);
    border-color: rgba(27, 132, 255, 0.5);
}
.callout-warning {
    background-color: rgba(255, 193, 7, 0.075);
    border-color: rgba(255, 193, 7, 0.5);
}
.callout-danger {
    background-color: rgba(231, 13, 13, 0.075);
    border-color: rgba(231, 13, 13, 0.5);
}
.border-info {
    border-color: #1B84FF !important;
    opacity: 0,;
}
.border.border-primary {
    border: 1px solid #F26522 !important;
    opacity: 0,;
}
.border.border-secondary {
    border: 1px solid #3B7080 !important;
    opacity: 0,;
}
.border.border-warning {
    border: 1px solid #FFC107 !important;
    opacity: 0,;
}
.border.border-success {
    border-color: #03C95A !important;
    opacity: 0,;
}
.border.border-danger {
    border: 1px solid #E70D0D !important;
    opacity: 0,;
}
.border.border-dark {
    border: 1px solid #212529 !important;
    opacity: 0,;
}
.border-dashed.border-info {
    border-style: dashed !important;
}
.border-dashed.border-primary {
    border-style: dashed !important;
}
.border-dashed.border-primary {
    border-style: dashed !important;
}



.link-primary {
        color: $primary !important;
        &:hover,
        &:focus,
        &:active {
          color: darken($primary, 7%);
        }
}


.attendance-canvas {
    top: 50%;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
}



.emp-stack {
    &.progress-stacked {
        height: 24px;
        & > .progress {
            height: 24px;
        }
    }
}



.border-bottom.border-primary {
    border: 1px solid #f7891e!important;
}
.border-primary {
    border: 1px solid #f7891e!important;
}


.g-0, .gx-0 {
    --bs-gutter-x: 0!important;
}



.nav.tab-style-1 {
  border:none;
  padding:5px !important;
  background-color: #E5E7EB;
  border-radius:7px;
  margin-block-end: 1rem;
  margin-block-end: 1rem;
  .nav-item {
    margin-inline-end: 0.5rem;
    &:last-child {
      margin-inline-end: 0;
    }
  }
  .nav-link {
    border-radius: 5px;
    padding:5px !important;
    color: #f7891e!important;
    &.active {
      background-color: #f7891e!important;
      color: #fff !important;
      box-shadow: $box-shadow;
      transition: color 0.15s ease-in;
      border:none;
    }
  }
}
.nav-tabs.tab-style-1 {
    .nav-link {
        &:hover {
        background: transparent;
        color: #f7891e;
      }  

    }

}
.nav.nav-style-2 {
  .nav-item .nav-link {
    border-block-start: 3px solid #F26522;
    &.active {
      background-color: rgba(242, 101, 34, 0.1);
    border-block-start: 3px solid #F26522;
    color: #F26522;
    }
  }
}













/*Attendance Punch SCSS*/
.edit-top {
    background: $gray-700;
    position: absolute;
    right: 10px;
    top: 10px;
    &:hover {
        color: $dark !important;
    }
}
.attendance-bg {
    background: linear-gradient(180deg, #FFF8F4 0%, #FFFFFF 100%);
    position: relative;
    z-index: 1;
    &::after {
        content: "";
        background-image: url(../img/bg/card-bg-02.png);
        background-position: right top;
        background-repeat: no-repeat;
        background-size: contain;
        position: absolute;
        width: 50%;
        height: 60%;
        right: 0;
        top: 0;
        z-index: -1;
    }
}
.attendance-circle-progress.attendance-progress {
    width: 130px;
    height: 130px !important;
    background: #fff;
    border-radius: 50%;
    &::after {
        border: 4px solid #dee2e6;
    }
    .total-work-hours {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
        line-height: normal;
    }
}
.h-12 {
    height: 12px;
}
.circle-progress.circle-progress-md {
    width: 40px;
    height: 40px !important;
    .progress-value {
        position: absolute;
        top: 5%;
        left: 5%;
        width: 90%;
        height: 90%;
        font-size: 12px;
        color: #515B73;
        line-height: 38px;
        text-align: center;
    }
}
.active-time {
    min-width: 85px;
    position: relative;
    z-index: 2;
}
.timeline-flow {
    position: relative;
    z-index: 1;
    &::before {
        content: "";
        width: 1px;
        height: 75%;
        border-left: 1px dashed #0d6efd;
        position: absolute;
        left: -5.5px;
        top: 24px;
        z-index: -1;
    }
}


.schedule-timeline {
    > div {
        &:last-child {
            .timeline-flow {
                &::before {
                    display: none;
                }
            }
        }
    }
}
.activity-timeline {
    .timeline-flow {
        &::before {
            left: -15px;
        }
    }
    .avatar {
        z-index: 2;
    }
}
.activity-timeline {
    .timeline-flow {
        &::before {
            left: -15px;
        }
    }
    .avatar {
        z-index: 2;
    }
}
.card-bg-5 {
    position: relative;
    z-index: 1;
    &::before {
        content: "";
        background-image: url(../img/bg/card-bg-05.png);
        background-position: top;
        background-repeat: no-repeat;
        background-size: contain;
        position: absolute;
        width: 100%;
        height: 100%;
        right: 0;
        top: 0;
        left: 0;
        z-index: -1;
    }
}
.table.dashboard-table {
    tr {
        td {
            padding: 9px 20px;
        }
    }
}
.attendance-point {
  position: relative;
  z-index: 1;
  &::before {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    z-index: -1;
    position: absolute;
    left: 0;
    top: 1px;
  }
  &.present {
    &::before {
      background: $success-600;
    }
  }
  &.holiday {
    &::before {
      background: $secondary-600;
    }
  }
  &.absent {
    &::before {
      background: $danger-500;
    }
  }
}
.attendance-circle-progress {
  width: 110px;
  height: 110px !important;
  line-height: 38px;
  background: none;
  box-shadow: none;
  position: relative;
  &::after {
      content: "";
      width: 100%;
      height: 100%;
      border-radius: 50%;
      border: 4px solid  transparent;
      position: absolute;
      top: 0;
      left: 0;
  }
  .avatar.avatar-xxl {
    width: 110px;
    height: 110px;
  }
  .progress-value {
      position: absolute;
      top: 5%;
      left: 5%;
      width: 90%;
      height: 90%;
      font-size: 12px;
      color: $gray-700;
      line-height: 38px;
      text-align: center;
  }
  .progress-left {
      left: 0;
      .progress-bar {
          left: 100%;
          border-top-right-radius: 80px;
          border-bottom-right-radius: 80px;
          border-left: 0;
          -webkit-transform-origin: center left;
          transform-origin: center left;
      }
  }
  .progress-right {
      right: 0;
      .progress-bar {
          left: -100%;
          border-top-left-radius: 80px;
          border-bottom-left-radius: 80px;
          border-right: 0;
          -webkit-transform-origin: center right;
          transform-origin: center right;
          animation: loading-1 1.8s linear forwards;
        }
  }
  .progress-bar {
      width: 100%;
      height: 100%;
      background: none;
      border-width: 4px;
      border-style: solid;
      position: absolute;
      top: 0;
  }
}
.attendance-circle-progress>span {
  width: 50%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  z-index: 1;
}
/*Attendance Punch SCSS*/

/*LOGIN Page SCSS*/
.login-wrapper {
    width: 100%;
    overflow: hidden;
    height: 100vh;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: relative;
    &.basic-type {
        overflow: auto;
        height: 100%;
        justify-content: center;
        &::before {
            display: none;
        }
        .login-content {
            overflow: unset;
            height: 100%;
        }
    }
    &.account-bg {
        @include respond-below(lg) {
            background-image: none;
        }
        .login-content {
            background: linear-gradient(180deg, #FF7B3D 0%, #5C260C 100%);
            backdrop-filter: blur(10px);
            margin-left: auto;
        }
    }
    .btn-outline-light  {
        &:hover {
            background-color: $white !important;
        }
    }   
}
.login-background {
    position: relative;
    &::before {
        content: "";
        background: linear-gradient(180deg, #FF7B3D 0%, #5C260C 100%);
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        backdrop-filter: blur( 6px );
        @include respond-below(lg) {
            display: none;
        }
        
    }
}
.hover-a {
    position: relative;
    color: $primary;
    &:after {
        content:"";
        height: 2px;
        width: 100%;
        background: $primary;
        @include transform(scale(0));
        @include transition(all 0.3s ease);
        position: absolute;
        bottom: -3px;
        left: 0;
    }
    &:hover:after {
        @include transform(scale(1));
    }
    &:hover {
        color: $primary;
    }
}
.login-wrapper.login-new {
    overflow: auto;
    height: 100vh;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    justify-content: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    position: relative;
    .login-shapes {
        position: relative;
        @include respond-below(lg) {
            display: none;
        }
        .login-right-shape {
            position: fixed;
            top: 0;
            left: 0;
        }
        .login-left-shape {
            position: fixed;
            bottom: 0;
            right: 0;
        }
    }
    .login-content.user-login {
        position: relative;
        .login-userset {
            form .otp-box { 
                margin-bottom: 34px;
                input { 
                    width: 74px; 
                    height: 74px; 
                    background: $white ; 
                    border: 1px solid $light-900; 
                    border-radius: 8px; 
                    text-align: center; 
                    margin-right: 15px; 
                    font-weight: $font-weight-bold; 
                    font-size: $font-size-26; 
                    color: $black; 
                    outline: none;
                    @include respond-below(sm) {
                        width: 40px; 
                        height: 40px; 
                    }
                }
            }
        }
    }
    .copyright-text  {
        margin: 40px 0;
        text-align: center;
        @include respond-below(md) {
            margin: 0 0 30px;
        }
        p {
            font-weight: $font-weight-medium;
            color: $gray-900;
            margin-bottom: 0;
        }
    }
    .lock-screen-list {
        text-align: center;
        .nav {
            -ms-flex-wrap: wrap;
            flex-wrap: wrap;
            justify-content: center;
            -webkit-justify-content: center;
            -ms-flex-pack: center;
            li {
                margin-right: 20px;
                &:last-child {
                    margin-right: 0;   
                }
                a {
                    font-weight: $font-weight-medium;
                }
            }
        }
        .copyright-text {
            margin: 20px 0 40px;
            @include respond-below(md) {
                margin: 20px 0 30px;
            }
        }
        .language-dropdown {
            .dropdown-toggle {
                border: 0;
                padding: 0;
                border-radius: $border-radius-lg;
                &:after {
                    border-top: 0;
                    border-left: 0;
                    border-bottom: 2px solid $gray-400;
                    border-right: 2px solid $gray-400;
                    content: '';
                    display: inline-block;
                    pointer-events: none;
                    width: 8px;
                    height: 8px;
                    vertical-align: 2px;
                    @include transform-origin(66% 66%);
                    @include transition(all 0.2s ease);
                    @include transform(rotate(45deg));
                }
                &[aria-expanded="true"]:after {
                    @include transform(rotate(-135deg));
                }
            }
            .dropdown-menu {
                padding: 15px;
                background: $white;
                box-shadow: $box-shadow-lg;
                border: 1px solid $secondary-100;
                .dropdown-item {
                    padding: 5px 10px;
                    background: $white;
                    border-radius: $border-radius-lg;
                    display: block;
                    &:hover {
                        background: $light-300;
                    }
                }
            }
        }
    }
}
.login-or {
    text-align: center;
    font-size: 15px;
    color: $gray-700;
    font-weight: $font-weight-medium;
    margin: 5px 0;
    padding: 10px 0;
    position: relative;
	&::after {
		width: 100%;
		content: "";
		border-top: 1px solid $gray-200;
		position: absolute;
		top: 50%;
		right: 0;
	}
	&::before {
		width: 100%;
		content: "";
		border-top: 1px solid $gray-200;
		position: absolute;
		top: 50%;
		left: 0;
	}
	.span-or {
		background-color: $white;
		padding: 0 10px;
		z-index: 9;
		position: relative;
	}
}
.authentication-card {
    padding: 40px;
}
.authen-overlay-item {
background:#FFF7F340;
  border-radius:15px;
  padding:25px 50px;
  position: relative;
  backdrop-filter: blur(26px);
}
.authen-overlay-img {
    max-width: 400px;
}
.bg-overlay-img {
    .bg-1 {
        position: absolute;
        right: 0;
        bottom: 0;
    }
    .bg-2 {
        position: absolute;
        left: 60px;
        bottom: 0;
        z-index: 1;
        max-width: 100px;
    }
    .bg-3 {
        position: absolute;
        top: 40%;
        right: 30%;
        z-index: 1;
    }
}
.bg-linear-gradiant {
    background: linear-gradient(115.43deg, #FFFFFF 0.45%, #FFF3ED 100%);
}
.border.border-dark-2 {
    border: 2px solid #E8E8E9 !important;
    border-radius: 8px !important;
    height: 70px;
    width: 70px;
}
.error-images img {
    max-width: 500px;
}

.password-strength span{
	width: 100%;
    height: 5px;
    background: #e3e3e3;
    margin-right: 10px;
    border-radius: 5px;
}
.poor-active span.active#poor,
.poor-active span.active#poors {
  background: $danger;
}
.avg-active span.active#poor,
.avg-active span.active#weak,
.avg-active span.active#poors,
.avg-active span.active#weaks {
  background: $warning;
}
.strong-active span.active#poor,
.strong-active span.active#weak,
.strong-active span.active#strong,
.strong-active span.active#poors,
.strong-active span.active#weaks,
.strong-active span.active#strongs {
  background: $info;
}
.heavy-active span.active#poor,
.heavy-active span.active#weak,
.heavy-active span.active#strong,
.heavy-active span.active#heavy,
.heavy-active span.active#poors,
.heavy-active span.active#weaks,
.heavy-active span.active#strongs,
.heavy-active span.active#heavys {
  background: $success;
}
input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear {
  display: none;
}
.under-maintenance{
  position: relative;
}
.maintenance-overlay-image{
  .overlay-image-bottom{
    position: absolute;
    bottom: 0;
    z-index: -1;
  }
  .overlay-image-top{
    position: absolute;
    top: -80px;
    right: 2%;
    z-index: -1;
  }
}
.coming-soon{
  .comming-soon-pg{
    .counts-card{
      width: 50px;
      height: 50px;
    }
    
  }
}
/*LOGIN Page SCSS*/


.nav-item {
    margin-inline-end: 0.5rem;
    &:last-child {
      margin-inline-end: 0;
    }
  }
  .nav-link {
    color: $text-color;
    border-radius: $border-radius;
    &.active {
      background-color: rgba($primary,0.1);
      color: $primary;
    }
  }
  .navbar-brand {
    color: $text-color;
    &:focus ,&:hover {
      color: $text-color;
      opacity: 0.9;
    }
  }
  .navbar-nav .nav-link.active,
  .navbar-nav .show > .nav-link {
    color: $primary;
  }
  .nav-link.disabled {
    color: $text-color;
    opacity: 0.3;
  }
  .nav-tabs .nav-link.disabled, .nav-tabs .nav-link:disabled {
    color: rgba($dark,0.5);
  }
  .navbar-text {
    color: $text-color;
  }
  .navbar-dark {
    &.bg-dark {
      .nav-link,
      .navbar-brand {
        color: $white;
      }
    }
    .navbar-nav .nav-link.active,
    .navbar-nav .show > .nav-link {
      color: $white;
    }
  }
  .nav-pills .nav-link.active,
  .nav-pills .show > .nav-link {
    color: $white;
    background-color: $primary;
  }
  .nav-pills .nav-link.tab-dark.active{
    color: $white;
    background-color: $dark;
  }
  

.nav.nav-style-1 {
  border: 0;
  .nav-item {
    margin-inline-end: 0.25rem;
    &:last-child {
      margin-inline-end: 0;
    }
  }
  .nav-link {
    &.active {
        background: linear-gradient(109.6deg, rgb(25, 74, 236) 11.2%, rgb(6, 183, 249) 91.1%) !important;
        color: $primary;
        &:hover {        
          background: rgba($primary, 0.1);
        }
    }
    &:hover {        
        background: transparent;
        color: #1572e8;
    }
  }
}
.nav.nav-style-2 {
  .nav-item .nav-link {
    border-block-start: 3px solid transparent;
    &.active {
      background-color: rgba(13,110,253, 0.1);
      border-block-start: 3px solid #1572e8;
      color: #1572e8;
      border-radius: 4px 4px 0 0!important;
    }
  }
}
.nav.nav-style-3 {
  .nav-link {
    border-radius: 0;
  }
  .nav-link {
    border-block-end: 3px solid transparent;
  }
  .nav-link.active {
    background-color: transparent;
    border-block-end: 3px solid #F26522;
    color:#F26522;
  }
}
.nav.nav-style-4 {
  border: 0;
  .nav-link {
    color: $text-muted;
    border: 0;
  }
  .nav-link {
    margin-bottom: 3px;
    &.active {
      background-color: $light;
      color: $text-color;
      border: 0;
    }
    &:hover,
    &:focus {
      border: 0;
    }
    &:hover {
        background-color: $light;
        color: $text-color;   
    }
  }
}
.nav-tabs.nav-style-5 {
  border: 0;
  .nav-link {
    color: $text-muted;
    border: 0;
    margin-bottom: 3px;
  }
  .nav-link {
    &.active {
      background-color: $primary;
      color: $white;
      border: 0;
    }
    &:hover,
    &:focus {
      border: 0;
      background-color: $primary;
      color: $white;
    }
  }
}
.nav-style-6 {
  border: 0;
  &.nav-pills .nav-link {
    &.active {
      border: 1px solid $primary;
      border-block-end: 2px solid $primary;
      background-color: transparent;
      color: $primary;
    }
  }
}
.nav-tabs-header {
  border: 0 !important;
  .nav-item {
    margin-inline-end: 0.5rem;
    &:last-child {
      margin-inline-end: 0;
    }
    .nav-link {
      border: 1px solid transparent;
      font-size: 0.8rem;
      padding: 0.4rem 0.5rem;
      font-weight: $font-weight-medium;
      &.active {
        background: rgba($primary, 0.1);
        color: $primary;
        border: 1px solid transparent;
      }
      &:hover,&:focus {
        border: 1px solid transparent;
        background-color: transparent;
        color: $primary;
      } 
    }
  }
}
.nav-tabs-footer {
  border: 0;
  .nav-item {
    margin-inline-end: 0.5rem;
    &:last-child {
      margin-inline-end: 0;
    }
    .nav-link {
      background-color: transparent;
      color: $primary;
      border: 1px solid $primary;
      font-size: 0.8rem;
      &.active {
        background: $primary;
        color: $white;
        border: 1px solid $primary;
      }
      &:hover,&:focus {
        border: 1px solid $primary;
        background-color: transparent;
         color: $primary;
      } 
    }
  }
}
.vertical-tabs-2 {
  border: 0;
  .nav-item {
    margin-inline-end: 0.5rem;
    &:last-child {
      margin-inline-end: 0;
    }
    .nav-link {
      min-width: 7.5rem;
      max-width: 7.5rem;
      text-align: center;
      border: 1px solid $default-border;
      margin-bottom: 0.5rem;
      color: $text-muted;
      background-color: $light;
      i {
        font-size: 1rem;
      }
      &.active {
        background-color: $primary;
        color: $white;
        position: relative;
        &:before {
          content: "";
          position: absolute;
          inset-inline-end: -0.5rem;
          inset-block-start: 38%;
          transform: rotate(45deg);
          width: 1rem;
          height: 1rem;
          background-color: $primary;
        }
        &:hover {
          color: $white;
        }
      }
      &:hover {
        color: $primary;
      }
    }
  }
}
.vertical-tabs-3 {
  border: 0;
  .nav-item {
    border: 0;
    margin-inline-end: 0.5rem;
    &:last-child {
      margin-inline-end: 0;
    }
    .nav-link {
      min-width: 160px;
      max-width: 160px;
      border: 1px solid $primary;
      padding: 1.3rem;
      margin-block-end: 0.5rem;
      i {
        width: 2rem;
        height: 2rem;
        line-height: 2rem;
        text-align: center;
        font-size: 1rem;
        background: $primary;
        color: $white;
        border-radius: 3.125rem;
        font-weight: $font-weight-medium;
      }
      &.active {
        background: $primary;
        border: 1px solid $primary;
        color: $white;
        &:hover {
          background: $primary;
          border: 1px solid $primary;
          color: $white;          
        }
        i {
          background: $white;
          color: $primary;
        }
      }
      &:hover,&:focus {
        border: 1px solid $primary;
        color: $primary;
          background: transparent;
      }
    }
  }
}
.nav.tab-style-1 {
  border-block-end: 0;
  padding: 5px;
  background-color: #E5E7EB;
  border-radius: 7px;
  margin-block-end: 1rem;
  .nav-item {
    margin-inline-end: 0.5rem;
    &:last-child {
      margin-inline-end: 0;
    }
  }
  .nav-link {
    border-radius: 5px;
    padding: 0.35rem 1rem;
    &.active {
      background: linear-gradient(109.6deg, rgb(25, 74, 236) 11.2%, rgb(6, 183, 249) 91.1%) !important;
      color: #fff !important;
      box-shadow: $box-shadow;
      transition: color 0.15s ease-in;
    }
  }
}
.nav-tabs.tab-style-1 {
    .nav-link {
        &:hover {
        background: transparent;
        color: #1572e8 !important;
      }  

    }

}
.tab-style-2 {
  border-block-end: 0;
  .nav-item {
    margin-inline-end: 0.5rem;
    &:last-child {
      margin-inline-end: 0;
    }
    .nav-link {
      border: 0;
      i { 
        width: 1.875rem;
        height: 1.875rem;
        padding: 0.4rem;
        border-radius: 50px;
        background-color: $light;
        color: $text-color;
        display: inline-block;
      }
      &:hover {
        border: 0;
        background: transparent;
        color: $primary;
        i {
          color: $primary;          
        }
      }
      &.active {
        background-color: transparent;
        position: relative;
        border: 0;
        color: $primary;
        i { 
          background-color: rgba($primary, 0.1);
          color: $primary;
        }
        &:before {
          content: "";
          position: absolute;
          inset-inline-start: 0;
          inset-inline-end: 0;
          inset-block-end: 0;
          width: 100%;
          height: 0.175rem;
          background-color: $primary;
          border-radius: 50px;
        }
      }
    }
  }
}
.tab-style-3 {
  border-block-end: 0;
  .nav-item {
    position: relative;
    margin-inline-end: 0.5rem;
    &:last-child {
      margin-inline-end: 0;
    }
    .nav-link {
      position: relative;
      border: 0;
      font-size: 0.75rem;
      &:before {
        position: absolute;
        content: "";
        inset-block-end: -1.063rem;
        inset-inline-end: 0;
        inset-inline-start: 0;
        width: 100%;
        height: 0.1rem;
        background-color: $light;
        border-radius: 50%;
      }
      &:after {
        position: absolute;
        content: "";
        inset-block-end: -2rem;
        inset-inline-start: 1.75rem;
        inset-inline-end: 0;
        inset-inline-start: 30%;
        width: 2rem;
        height: 2rem;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: $white;
        border-radius: 50%;
        border: 2px solid $default-border;
      }
      &.home:after {
        content: "1";
      }
      &.about:after {
        content: "2";
      }
      &.services:after {
        content: "3";
      }
      &:hover {
        border: 0;
        background: transparent;
        color: $primary;
      }
      &.active {
        background-color: transparent;
        border: 0;
        color: $primary;
        &:before {
          background-color: $primary;
        }
        &:after {
          border-color: $primary;
          color: $primary;
        }
      }
    }
  }
}
.tab-style-4 {
  &.nav-tabs {
    border: 0;
    .nav-item {
      margin-inline-end: 0.5rem;
      &:last-child {
        margin-inline-end: 0;
      }
    }
    .nav-link {
      border: 0;
      &:hover {
        border: 0;
        background: transparent;
        color: $primary;
      }
      &.active {
        background-color: transparent;
        border: 0;
        color: $primary;
        position: relative;
        overflow: hidden;
        &::before {
          position: absolute;
          content: "";
          width: 0.75rem;
          inset-block-start: 31px;
          transform: rotate(45deg);
          inset-inline-start: 47%;
          overflow: hidden;
          z-index: 1;
          height: 0.75rem;
          background-color: $primary;
          border: 1px solid $primary;
        }
        &:after {
          position: absolute;
          content: "";
          width: 40%;
          height: 1px;
          inset-inline-start: 30%;
          inset-block-end: 0;
          background-color: $primary;
        }
      }
    }
  }
}
#tab-style-4 .tab-pane.active {
  border: 1px solid $primary;
  background-color: $primary;
  color: $white;
  padding: 16px;
    border-radius: 7px;
}
.tab-style-5 {
  .nav-item {
    margin-inline-end: 0.5rem;
    &:last-child {
      margin-inline-end: 0;
    }
    .nav-link.active {
      background: $primary;
    }
  }
}
.tab-style-6 {
  border: 0;
  background-color: $white;
  border-radius: 7px;
  color: $primary;
  padding: 0.5rem;
  .nav-item {
    border: 0;
    margin-inline-end: 0.5rem;
    &:last-child {
      margin-inline-end: 0;
    }
    .nav-link {
      color: $primary;
      padding: 0.5rem 1rem;
      font-size: 0.813rem;
      border: 0;
      font-weight: $font-weight-medium;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      align-items: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      &.active {
        border: 0;
        background-color: $primary;
        color: $white;
        border: 0;
        box-shadow: 0px 3px 10px 0px rgba(var(--dark-rgb),0.05);
      }
      &:hover,
      &:focus {
        border: 0;
      }
    }
  }
}
.tab-style-7 {
  .nav-link {
    margin-block-end: 0.5rem;
    font-size: 0.813rem;
    color: $text-muted;
    text-align: left;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    &:active,
    &.active {
      background-color: rgba($primary, 0.1);
      color: $primary;
    }
  }
}
.nav-style-1 {
  .nav-item {
    .nav-link {
      &.active {
        background-color: rgba($primary, 0.1);
        color: $primary;
      }
    }
  }
}
@media screen and (max-width:400px) {
  .tab-style-4 {
    .nav-link{
      padding-inline: 0.5rem;
    }
  }
}

.nav-tabs {
    border-bottom: 0;
    &.nav-tabs-bottom {
        li {
            margin-bottom: -1px;
        }
    }
    .nav-link {
        margin-bottom: -1px;
        background: 0 0;
        border: 1px solid transparent;
        border-top-left-radius: 0.25rem;
        border-top-right-radius: 0.25rem;
        &.active {
          border-color: $gray-200;
        }
    }
    li{
        a{
            color: $gray-900;
            border-bottom-width: 2px;
            &.active{
                border-color: transparent;
                border-bottom-color: $primary;
                background-color: transparent;
                @include transition(all 0.2s ease);
                color: $primary;
            }
        }
    }
}
.nav-tabs{
    .nav-tabs-solid {
        background-color: $white;
        border: 0;
        .active{
            background-color: $primary;
            border-color: $primary;
            color: $white;
        }
    }
}
.nav-tabs{
    .nav-link{
        &:hover{
            border-color: transparent;
            color: $primary;
        }
    }
    &.nav-tabs-top{
        li{
            a{
                border-width: 2px 0 0 0;
                &.active{
                    border-top-color: $primary;                    
                    @include rounded(0);
                }
                &:hover {
                    border-top-color: $primary;  
                    background-color: transparent;                    
                    @include rounded(0);
                }
            }
        }
    }
    &.nav-tabs-bottom{
        li{
            a{
                border-width:0 0 2px  0;
                &.active, &:hover {
                    border-bottom-color: $primary;
                    background: transparent;
                    @include rounded(0);
                    color: $primary;
                }
            }
        }
    }
    &.nav-tabs-solid{
        background-color: $white;
        border: 0;
        &.nav-tabs-rounded{
            li{
                a{
                    &.active {
                        background-color: $primary;
                        border-color: $primary;
                        color: $white;
                        @include rounded(50px);
                    }
                }
            }  
        }
        &.nav-tabs-rounded-fill {
          li{
            a{
              border-color: $light-900;
                &.active {
                    background-color: $primary;
                    border-color: $primary;
                    color: $white;
                    @include rounded(50px);
                }
            }
        }  
        }
        li{
            a{
                &.active{
                    background-color: $primary;
                    border-color: $primary;
                    color: $white;
                    @include rounded(0);
                    &:hover{
                      color: $white;
                    }
                }
            }
        }   
    }
}
.nav-link{
    &:hover{
        color: $primary;
    }
}
.page-menu{
    .nav-tabs {
        li{
            a{
                font-size: $font-size-16;
            }
        }
    }
}
.tabs-set{
    .nav-tabs {
        border-bottom: 0;
        margin-bottom: 20px;
        .nav-link{
            color: $secondary;
            padding:  8px 15px;
            font-size: $font-size-16;
            font-weight: $font-weight-bold;
            border: 0;
            min-width: 120px;
            margin-right: 10px;
            border-radius: 8px;
            background: var(--Stroke, rgba(145, 158, 171, 0.30));
            &:focus{
                border-color: transparent;
            }
            &:hover{
                border-color: transparent;
            }
            &.active{
                border:0;
                border-bottom:2px solid $primary;
                background: $primary;
                color: $white !important;
            }
        }
    }
}
.tabs-sets{
    .nav-tabs {
        border-bottom: 0;
        margin: 0 0 40px;
        .nav-link{
            color: $black;;
            font-size: $font-size-base;
            font-weight: $font-weight-bold;
            border: 0;
            background: $gray-300;
            margin-right:10px;
            padding:  8px 15px;
            @include rounded(8px);
            @include transition(all 0.5s ease);
            &:focus, &:hover, &.active{
                background: $primary;
                color: $white;
            }
        }
    }
}
@include respond-below(md) {
    .nav-tabs {
        border-bottom: 0;
        position: relative;
        background-color: $white;
        border: 1px solid $light-300;
        padding:  5px 0;
        @include rounded(3px);
    }
}
/*NAV SCSS*/

/*Accordian SCSS*/
.accordion-item:last-of-type .accordion-button.collapsed {
  border-inline-start:0.25rem solid #1572e8 !important;
  border-inline-end:0.25rem solid #1572e8 !important;
}
/*Accordian SCSS*/

/*Dropdown SCSS*/
.dropdown-toggle2{
        background-color: #fff;
border-color:#e8eef3;
  font-size: 12px;
  padding:12px 5px;
  line-height: 0;
}
/*Dropdown SCSS*/

.border-primary {
    border-color: #F26522 !important;
}
.border-dashed.border-primary {
    border-style: dashed !important;
}