/*================================================================================
  Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template
  Version: 2.0
  Author: PIXINVENT
  Author URL: http://www.themeforest.net/user/pixinvent
================================================================================

NOTE:
------
PLACE HERE YOUR OWN SCSS CODES AND IF NEEDED, OVERRIDE THE STYLES FROM THE OTHER STYLESHEETS.
WE WILL RELEASE FUTURE UPDATES SO IN ORDER TO NOT OVERWRITE YOUR STYLES IT'S BETTER LIKE THIS.  */

/*main*/
/* width */
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: var(--bs-gray-200);
}

/* Handle */
::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background: var(--bs-secondary);
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: var(--bs-secondary);
}
.form-group{
  margin-bottom: 10px;
}

.custom-badge.decline {
  background: rgba(230, 68, 65, 0.2) !important;
  color: #BB2320;
  font-size: 12px;
}

.custom-badge.pending {
  background: rgba(255, 155, 68, 0.2) !important;
  color: #f39c12;
  font-size: 12px;
}

.custom-badge.accept {
  background: rgba(29, 185, 84, 0.2) !important;
  color: #188D26;
  font-size: 12px;
}
.cal-icon {
  position: relative;
  width: 100%;
}
.cal-icon:after {
  color: #979797;
  content: "\f073";
  display: block;
  font-family: "Font Awesome 5 Pro";
  font-size: 15px;
  margin: auto;
  position: absolute;
  right: 15px;
  top: 10px;
}
.form-focus .cal-icon:after {
  top: 10px;
}
.custom-badge{
  padding: 4px 11px 4px 11px;
  border-radius: 30px;
}
.icon-lg{
  font-size: 20px !important;
}
.styled-model .modal-content{
  padding: 20px 30px;
}

.profile-details {
  text-align: center;
}
.personal-info li .title {
  color: #4f4f4f;
  float: left;
  font-weight: 500;
  margin-right: 30px;
  width: 40%;
  font-size: 12px;
}
.personal-info li .text {
  color: #8e8e8e;
  display: block;
  overflow: hidden;
  font-size: 12px;
}
.personal-info li {
  margin-bottom: 10px;
}
.personal-info {
  list-style: none;
  margin-bottom: 0;
  padding: 0;
}
.profile-view {
  position: relative;
  display: flex;
  width: 100%;
}
.profile-img-wrap {
  height: 120px;
  width: 120px;
}
.profile-img {
  width: 120px;
  height: 120px;
  overflow: hidden;
}
.profile-img .avatar {
  font-size: 24px;
  height: 120px;
  line-height: 120px;
  margin: 0;
  width: 120px;
}
.profile-basic {
  margin-left: 40px;
  padding-right: 50px;
  width: 100%;
}
.pro-edit {
  position: absolute;
  right: 0;
  top: 0;
}
.edit-icon {
  background-color: #eee;
  border: 1px solid #e3e3e3;
  border-radius: 24px;
  color: #bbb;
  float: right;
  font-size: 12px;
  line-height: 24px;
  min-height: 26px;
  text-align: center;
  width: 26px;
}
.edit-icon:hover {
  background-color: #ff9b44;
  border-color: #ff9b44;
  color: #fff;
}
.delete-icon {
  color: #e30b0b;
  float: right;
  font-size: 18px;
}
.delete-icon:hover {
  color: #e30b0b;
}
.experience-box {
  position: relative;
}
.experience-list {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}
.experience-list::before {
  background: #ddd;
  bottom: 0;
  content: "";
  left: 8px;
  position: absolute;
  top: 8px;
  width: 2px;
}
.experience-list > li {
  position: relative;
}
.experience-list > li:last-child .experience-content {
  margin-bottom: 0;
}
.experience-user .avatar {
  height: 32px;
  line-height: 32px;
  margin: 0;
  width: 32px;
}
.experience-list > li .experience-user {
  background: #fff;
  height: 10px;
  left: 4px;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 4px;
  width: 10px;
}
.experience-list > li .experience-content {
  background-color: #fff;
  margin: 0 0 20px 40px;
  padding: 0;
  position: relative;
}
.experience-list > li .experience-content .timeline-content {
  color: #9e9e9e;
}
.experience-list > li .experience-content .timeline-content a.name {
  color: #616161;
  font-weight: bold;
}
.experience-list > li .time {
  color: #bdbdbd;
  display: block;
  font-size: 12px;
  line-height: 1.35;
}
.before-circle {
  background-color: #ddd;
  border-radius: 50%;
  height: 10px;
  width: 10px;
}
.skills > span {
  border: 1px solid #ccc;
  border-radius: 500px;
  display: inline-block;
  margin-bottom: 10px;
  padding: 6px 12px;
  text-align: center;
}
.profile-info-left {
  border-right: 2px dashed #ccc;
  width: 100%;
  margin-left: 15px;
}
.bootstrap-tagsinput {
  background-color: #fff;
  border: 1px solid #e3e3e3;
  border-radius: 0;
  box-shadow: unset;
  display: block;
  min-height: 44px;
  padding: 6px 6px 0;
}
.bootstrap-tagsinput .badge {
  font-size: 14px;
  font-weight: normal;
  margin-bottom: 6px;
  padding: 10px 15px;
}
.add-more a {
  color: #ff9b44;
}
.add-more a:hover {
  color: #ff851a;
}
.avatar-box {
  float: left;
}
.pro-overview .personal-info li .title {
  width: 50%;
}
.profile-box {
  min-height: 250px;
}
.profile-view-area{
  display: flex;
  align-items: center;
}
.auth-login-form .form-label{
  color: #fff;
}
.timeBadge{
  width: 9px !important;
  height: 9px !important;
  padding: 0;
}

.btn-circle-download {
  display: block;
  position: relative;
  height: 38px;
  width: 38px;
  border-radius: 100%;
  background: #9f9f9f1c;
  cursor: pointer;
  overflow: hidden;
  transition: all .2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}
.btn-circle-download:after {
  content: "";
  position: relative;
  display: block;
  width: 200%;
  height: 100%;
  background-image: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0));
  transform: translateX(-100%);
}
.btn-circle-download svg {
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}
.btn-circle-download svg#border {
  position: absolute;
  top: 0;
  left: 0;
  stroke: none;
  stroke-dasharray: 144;
  stroke-dashoffset: 144;
  transition: all .9s linear;
}
.btn-circle-download svg#arrow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  stroke: #9098A9;
  transition: all .2s ease;
}
.btn-circle-download svg#check {
  position: absolute;
  top: 50%;
  left: 50%;
  stroke: white;
  transform: translate(-50%, -50%);
  opacity: 0;
}
.btn-circle-download:hover {
  background: rgba(0, 119, 255, 0.2);
}
.btn-circle-download:hover #arrow path,
.btn-circle-download:hover #arrow polyline {
  stroke: #0077FF;
}
.btn-circle-download.load{
  background: rgba(0, 119, 255, 0.2);
}
.btn-circle-download.load #arrow path,
.btn-circle-download.load #arrow polyline {
  stroke: #0077FF;
}
.btn-circle-download.load #border {
  stroke: #0077FF;
  stroke-dasharray: 144;
  stroke-dashoffset: 0;
}
.btn-circle-download.done {
  background: #0077FF;
  animation: rubberBand .8s;
}
.btn-circle-download.done:after {
  transform: translateX(50%);
  transition: transform .4s ease;
  transition-delay: .7s;
}
.btn-circle-download.done #border,
.btn-circle-download.done #arrow {
  display: none;
}
.btn-circle-download.done #check {
  opacity: 1;
  transition: all .2s ease;
  transition-delay: .2s;
}
@keyframes rubberBand {
  from {
    transform: scale(1, 1, 1);
  }
  30% {
    transform: scale3d(1.15, 0.75, 1);
  }
  40% {
    transform: scale3d(0.75, 1.15, 1);
  }
  50% {
    transform: scale3d(1.1, 0.85, 1);
  }
  65% {
    transform: scale3d(0.95, 1.05, 1);
  }
  75% {
    transform: scale3d(1.05, 0.95, 1);
  }
  to {
    transform: scale3d(1, 1, 1);
  }
}
.table-responsive .download-area{
  position: absolute;
  right: 0;
  top: 10px;
}

.flatpickr-calendar .flatpickr-day.today {
  border-color: #2f2f2f !important;
}
.flatpickr-day.today:hover, .flatpickr-day.today:focus {
  border-color: #fef1f8 !important;
  background: #fef1f8 !important;
  color: #767381 !important;
}
.flatpickr-calendar .flatpickr-day:hover {
  background: #a7a7a71f !important;
  border-color: #6e6b7a !important;
}
.flatpickr-calendar .flatpickr-day.selected, .flatpickr-calendar .flatpickr-day.selected:hover {
  background: #272727 !important;
  border-color: #272727 !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: #444444;
  line-height: 2;
  font-size: 13px;
}
.empty-area{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin: 20px auto;

}
.empty-area img{
  width: 80px;
  margin-bottom: 10px;
}
.empty-area h4{
  font-size: 13px;
  margin-bottom: 10px;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
}
.empty-area p{
  width: 50%;
  margin-bottom: 0px;
  line-height: 1.5;
  text-transform: capitalize;
  font-size: 11px;
  font-weight: 500;

}
.table-responsive table tfoot{
  background: #F8F8F8;
}
.table-responsive table tfoot tr td{
  font-size: 15px;
  font-weight: 700;
  color: #343434;
}
.form-control[readonly]{
  background: unset !important;
}
.table-responsive table thead tr th{
  border-bottom: 0;
}
.table-responsive table thead tr th:first-child{
  border-radius: 7px 0 0 7px;
}
.table-responsive table thead tr th:last-child{
  border-radius: 0 7px 7px 0;
}
.breadcrumbs-top{
  display: flex;
  align-items: center;
  gap: 12px;
}
.btn-dropdown{
  background-color: transparent !important;
  color: #6E6B7B !important;
  border: 1px solid #000;
  border-radius: 4px;
  padding: 8px 19px 8px 6px !important;
}