* {
    margin: 0px;
    padding: 0px;
}
:root{
      --sub-title: 16px;
    --theme-color: linear-gradient(90deg, #9e3bab, #f5576c);
    --pastal-green: #50cd89;
    --pastal-red: #db5072;
}

body {
    font-family: "Inter", sans-serif;
}

/* login page */
.login-img{
    width:700px;
    height:600px;
}
.bg-left-side{
    height: auto;
    background-color: #ffff;
}
.m-contain{
    height: 100vh;
    /* margin: 100px 0px !important; */
}
.left_side_block{
    margin: 50px 0px;
    text-align: center;
}
.bg-right-side{
    height: auto;
    background-color: #000;
}
.login-box{
    width:450px;
    height:auto;
    margin:140px auto;
    background-color: transparent;
    border: none;
}
.logo-img{
    width: 150px;
    height: 30px;
    margin-bottom: 10px;
}

/* side navbar */
.list-icon{
    width: 20px;
    height: 20px;
    margin-right: 8px;
}
.navbar-menu {
    background: #000 !important;
}
.navbar-menu .navbar-nav .nav-link.active {
    color:#ffff;
    background:var(--theme-color);
    border-radius:8px;
 }
.navbar-menu .navbar-nav .nav-link {
    color:#ffff !important;
    padding: .625rem 10px !important;
}
.nav-item-bg{
 background-color: #111111;
 border-radius: 8px;
 margin: 10px;
}
.nav-logo{
      width:100%;
    height:85px;
    margin:18px 0px 3px;
}
.nav-pills .btn-info {
  background: var(--theme-color) !important;
    height: 37px !important;
    line-height: 23px !important;
    color: #ffffff !important;
}
.navbar-brand-box{
    background-color: #000 !important;
}

/* header */
.navbar-header {
background-color: #000 !important;
}
.topbar-user {
    background-color: transparent !important;
}
.hamburger-icon {
    color: #ffff !important;
}

/* Manage companies page */
.btn-info{
    border-radius: 5px;
}
.card-height{
    height: 285px !important;
}

/* Manage Participant page */
.align-header-btn{
    display: flex;
    justify-content: space-between;
}
[data-bs-theme=dark] .form-select {
    z-index: 9999 !important;
}
.form-select{
    background: var(--active-gray) !important;
}

/* Manage Report Participant */
.avatar-xl-1 {
    height: 13.5rem;
    width: 13.5rem;
}
.profile-user .profile-photo-edit-1 {
    position: absolute;
    right: -4px !important;
    bottom: -9px !important;
}

/* Manage Booking */
.bg-pink{
background-color: #FF00FF;
}
.cover-img{
    width:130px;
    height:50px;
    border-radius:10px
}
.gallery-img{
    list-style: none;
    flex-wrap: nowrap;
    display: flex;
    gap: 10px;
}
.gallery-img li a img{
    width:50px;
    height:50px;
    border-radius: 10px;
}

/* Manage Activites */
.img-upload{
    width: 45px;
    height: 47px;
}
.manage_user_position{
       position: absolute;
    right: 0px;
    top: -4px;
    z-index: 9;
}
.dataTables_filter {
    float: left !important;
    text-align: left !important;
}
.btn-info{
    background: var(--theme-color) !important;
}
.select_list_width{
    width:200px !important;
    height:45px !important;
}
:is(.btn-soft-success,.btn-outline-success) {
    --vz-btn-active-color: #fff;
    --vz-btn-hover-color: #45cb85 !important;
}
:is(.btn-soft-success,.btn-outline-info) {
    --vz-btn-active-color: #fff;
    --vz-btn-hover-color: #299cdb !important;
}
:is(.btn-soft-success,.btn-outline-danger) {
    --vz-btn-active-color: #fff;
    --vz-btn-hover-color: #f06548 !important;
}
.form-control {
    line-height: 2 !important;
}
.select2-container--default .select2-selection--single {
    background-color: #202020 !important;
    border: 1px solid #aaaaaa1a !important;
}
.select2-container .select2-selection--single {

    height: 44px !important;
}.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #878a99 !important;
    line-height: 41px !important;
}.select2-container--default .select2-selection--single .select2-selection__arrow {
    top: 21% !important;
}
.caleder_icon {
    top: 57%;
    right: 5%;
}
.bg-purple{
    background-color: #806dec !important;
    color:#ffffff;
}
.bg-orange{
background-color: orange;
color:#ffffff;
}.form-label {
    margin-bottom: .5rem;
    font-weight: 700 !important;
}
.view_text {
    color: #cccccc;
    margin-bottom: 30px;
    display: block;
}
.icon_color{
    fill: var(--theme-color);
}
/* .input-wrap{ position:relative; } */
/* .input-wrap input{ width:100%; height:48px; border-radius:10px; background:var(--bg); color:var(--text); border:0; padding:10px 44px 10px 15px; box-shadow:var(--shadow); font-size:14px; }
.input-wrap input::placeholder{ color:var(--text); opacity:1; }
.input-wrap input:focus{ outline:2px solid rgba(255,255,255,.2); outline-offset:0; } */
.eye{ position:absolute; right:10px; top:50%; transform:translateY(-50%); width:32px; height:32px; display:grid; place-items:center; border-radius:8px; border:0; background:transparent; color:var(--muted); cursor:pointer; }
.eye:hover{ color:#c5c5c5; }
.eye__icon{ display:block; }

.error{ color:#ff6b6b; font-size:12px; min-height:16px; margin:0; }
.success{ color:#86efac; font-size:14px; margin:6px 0 0; }

@media (max-width:480px){
  .form{ padding:16px; gap:16px; }
}
.border-gray {
    border: 1px solid #47474763;
    border-radius: 7px;
}
.dashboard_icons{
        width: 45px;
    position: relative;
    top: 15%;
}
.border-left-light-purple {
    border-left: 7px solid #8E77D0;
    border-radius: 7px;
}
.border-left-light-light-green {
    border-left: 7px solid #32B182;
    border-radius: 7px;
}
.border-left-light-light-red {
    border-left: 7px solid #CB8792;
    border-radius: 7px;
}
.border-left-light-light-orange {
    border-left: 7px solid #D1A125;
    border-radius: 7px;
}
.svg_dashboard_icon {
    width: 15px;
    margin-top: -3px;
    margin-right: 7px;
}
.w-250px{
    width:250px;
}
.height_200px{
    min-height:200px;
}
.progress-wrap {
         width: 100%;
    height: 40px;
    background: transparent;
    padding: 0;
    border-radius: calc(var(-- radius) + 2px);
    position: relative;
    display: inline-block;
    box-shadow: 0 0 0 2px #1b1b1b inset;
    margin: 18px 0px 23px;
    }

    /* The track behind the segments */
    .progress-track {
      width: 100%;
      height: 100%;
      background: #2a2a2a;
      border-radius: var(--radius);
      overflow: hidden;
      display: flex;
      align-items: stretch;
      gap: var(--gap);
      padding: 0;
      border-radius: 7px;
    }

    /* Each colored segment as a child div (flex items) */
    .seg {
      height: 100%;
      min-width: 0;
      flex: 0 0 auto;
      transition: width 0.4s ease;
      border-radius: 0; /* keep square ends inside track; last segment will have its own end cap */
    }

    .seg.purple { background:#8E77D0 }
    .seg.teal   { background:#32b182; }
    .seg.pink   { background:#cb8792; }
    .seg.orange   { background:orange; }

    /* End cap bar (yellow) as a slim fixed element on the far right */
    .end-cap {
      width: 6px;             /* thin yellow end cap matching the screenshot */
      background: var(--yellow);
      border-radius: 2px;
      align-self: stretch;
    }

    /* Optional: label to show percentage for demonstration */
    .label {
      margin-top: 12px;
      font-size: 14px;
      color: #ddd;
      text-align: center;
      user-select: none;
    }

    /* Accessibility: visually-hidden helper for screen readers */

    .sr-only {
      position: absolute;
      width: 1px; height: 1px;
      padding: 0; margin: -1px;
      overflow: hidden; clip: rect(0,0,0,0);
      white-space: nowrap; border: 0;
    }
#appoval {
  width: 100% !important;
  height: 100%;
}
#line {
  width: 100% !important;
  height: 100%;
}
.height-300px {
    height: 340px;
}
.btn-info {
    background: var(--theme-color) !important;
    height: 42px;
    /* display: flex
; */
    /* justify-content: center; */
    line-height: 25px;
    color: #ffffff !important;
}
a.btn.btn-sm.btn-info.float-end.border-0{
    height:auto !important;
}
.bg-primary {
    --vz-bg-opacity: 1;
    background:var(--theme-color) !important;
}
.select2-dropdown {
    border: 1px solid #212529 !important;
}
.select2-results {
    background: #23272b !important;
}
.select2-container--default .select2-results__option--selected {
    background: var(--theme-color) !important;
}
.select2-container--default .select2-results__option[aria-selected=true]:hover {
    background: var(--theme-color);
    color: #fff;
}
.active>.page-link, .page-link.active {
    background: var(--theme-color) !important;
    border-color: 1px solid var(--theme-color) !important;
}
.page-title-right {
    display: none;
}