/*================================================================================
	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;
  }
  .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;
  }


  .btn-primary{
    background: var(--primary);
    color: #fff;
    border: 1px solid var(--primary);
    border-radius: 3px;
    transition: all 0.3s;
    padding: 9px 25px;
    font-size: 13px;
    line-height: 1;
    font-weight: 600;
    letter-spacing: 0.3333px;
    width: auto;
    display: inline-block;
    vertical-align: baseline;
}
.btn-primary.iconbtn{
    font-size: 19px;
    padding: 8px 28px;
}
.btn-primary:hover, .btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, .show>.btn-primary.dropdown-toggle, .btn-primary.focus, .btn-primary:focus{
    background: transparent;
    color: var(--primary);
    box-shadow:none !important;
}
.btn-secondary{
    background: transparent;
    color: #000000e0;
    border: 1px solid #000000e0;
    border-radius: 3px;
    transition: all 0.3s;
    padding: 9px 25px;
    font-size: 13px;
    line-height: 1;
    font-weight: 500;
    letter-spacing: 0.3333px;
    width: auto;
    display: inline-block;
    vertical-align: baseline;
    margin-left: 10px;
}
.btn-secondary.iconbtn{
    font-size: 19px;
    padding: 8px 28px;
}