.login-img {
    position: relative;
    background-image: url(../images_ex/login.png) !important;
    /* background: #f40000; */
        background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}
body{
    background: #F2F3F5 !important;
}
.side-header .header-brand1 {
    text-align: left !important;
    margin: 0 0px !important;
}
.app-header, .side-header{
    border-radius: 0px 0px 40px 40px;
    background: transparent;
}
.side-header{
    border-radius: 0px 0px 0px 0px;
}
.app-sidebar{
        background: #000 !important;
}
.side-menu__item.active{
    background: linear-gradient(45deg, #525252, transparent) !important;
    margin-left: 20px;
    border-radius: 15px !important;
    color: #fff !important;
    padding-left: 20px;
}
.login-img::before {
    position: unset !important;
    background: linear-gradient(to right, #ec202800 0%, #ec202800 100%) !important;

}
.page-header {
    margin-top: 60px;
    border-bottom: 1px solid #d5d5d5;
    border-radius: 0;
    padding-bottom: 20px;
}

.main-card{
    padding: 25px;
}
.login-logo img{
    width: 90px !important;
}
.login-logo h5{
    color: #0F0F0F;
    text-align: center;
    font-size: 22px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}
.login-logo p{
    color: #919191;
font-size: 13px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
.custom-tabs .nav-link {
  border: 2px solid #dcdcdc;
  border-radius: 12px;
  margin-right: 10px;
  padding: 0;
  background: #fff;
}

.custom-tabs .nav-link .tab-box {
  padding: 15px 18px;
  text-align: left;
}

.custom-tabs .nav-link.active {
  border-color: #000;
  background: #f9f9f9;
}

.custom-tabs {
  border-bottom: 0 !important;
}



.login-card {
  background: #fff;
  border-radius: 16px;
  backdrop-filter: blur(8px);
}

.custom-input .input-group-text {
  background: transparent;
  border: 0;
  border-right: none;
}

.custom-input .form-control {
  border-left: none;
  border-right: none;
  border-radius: 0;
}
.btn-dark{
    background: #000 !important;
    border-radius: 8px !important;
}
.login-form .form-label{
    color: #000;
    font-family: Inter;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}
.custom-input .form-control:focus {
  box-shadow: none;
  border-color: #ccc;
}
.login-form .form-control{
    background: transparent;
        border: 0;
}
.super-admin-link {
  color: #0d6efd;
  display: inline-block;
  margin-top: 5px;
}
.super-admin-link:hover {
  text-decoration: underline;
}

.input-group.custom-input{
    border-radius: 8px;
    border: 1px solid #CFCFCF;
    background: transparent;
}


.card { border-radius: 12px; }
    .form-control, .form-select { border-radius: 8px; }
    .btn { border-radius: 8px; }
    .toggle-switch {
      position: relative;
      display: inline-block;
      width: 50px;
      height: 24px;
    }
    .toggle-switch input { display:none; }
    .slider {
      position: absolute;
      cursor: pointer;
      top: 0; left: 0; right: 0; bottom: 0;
      background-color: #ccc;
      transition: .4s;
      border-radius: 24px;
    }
    .slider:before {
      position: absolute;
      content: "";
      height: 18px;
      width: 18px;
      left: 3px;
      bottom: 3px;
      background-color: white;
      transition: .4s;
      border-radius: 50%;
    }
    input:checked + .slider {
      background-color: #000;
    }
    input:checked + .slider:before {
      transform: translateX(26px);
    }

    .btn-eye{
        background: transparent;
        border: 0;
    }

    .btn-eye {
        background: transparent;
        border: 0;
        position: absolute;
        right: 10px;
        top: 22%;
    }



:root {
    --bg: #f6f8f9;
    --card: #fff;
    --muted: #777;
    --accent: #1c9c4e;
}

/* Global */
body {
    font-family: Inter, Segoe UI, Arial;
    background: var(--bg);
    margin: 0;
    padding: 20px;
    color: #222;
}

.dashboard-container {
    max-width: 1100px;
    margin: 0 auto;
}

/* ----------------------------------------------
   STAT CARDS
---------------------------------------------- */
.stats-row {
    display: flex;
    gap: 16px;
    margin-bottom: 20px;
}

.stat-card {
    flex: 1;
    padding: 18px;
    text-align: center;
    border-radius: 10px;
    background: var(--card);
    border: 1px solid #eee;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
}

.stat-blue h5 {
    color: #07919A;
    font-family: Inter;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.stat-green h5{
    color: #3A7C52;
font-family: Inter;
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
.stat-green span{
    color: #3A7C52;
text-align: center;
font-family: Inter;
font-size: 28px;
font-style: normal;
font-weight: 600;
line-height: normal;
}
.stat-red h5{
    color: #C23050;
font-family: Inter;
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
.stat-red span{
    color: #C23050;
text-align: center;
font-family: Inter;
font-size: 28px;
font-style: normal;
font-weight: 600;
line-height: normal;
}
.stat-yellow h5{
    color: #A9A04A;
font-family: Inter;
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: normal;
}

.stat-yellow span{
    color: #A9A04A;
text-align: center;
font-family: Inter;
font-size: 28px;
font-style: normal;
font-weight: 600;
line-height: normal;
}

.light-red h5{
    color: #A58567;
font-family: Inter;
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: normal;
}

.light-red span{
    color: #A58567;
text-align: center;
font-family: Inter;
font-size: 28px;
font-style: normal;
font-weight: 600;
line-height: normal;
}









.stat-card span {
    display: block;
    margin-top: 8px;
    font-size: 22px;
    font-weight: 700;
}

/* Colors */
.stat-blue {
    border-radius: 10px;
    border: 1px solid #2EDEEA;
    background: #F0FEFF;
    color: #07919A;
text-align: center;
font-family: Inter;
font-size: 28px;
font-style: normal;
font-weight: 600;
line-height: normal;
}

.stat-green {
    border-radius: 10px;
border: 1px solid #62D18D;
background: #F0FDF4;
}

.stat-red {
    border-radius: 10px;
border: 1px solid #FF88A2;
background: #FEF2F2;
}

.stat-yellow {
    border-radius: 10px;
border: 1px solid #A9A14A;
background: #FEFCE8;
}
.light-red{
    border-radius: 10px;
    border: 1px solid #BA9C81;
    background: #FFF4EA;
}

/* ----------------------------------------------
   FLOOR TABS
---------------------------------------------- */
.floor-tabs {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-bottom: 18px;
}

.floor-btn {
    padding: 8px 16px;
    border-radius: 20px;
    border: 1px solid #e2e6ea;
    background: #fff;
    cursor: pointer;
}

.floor-btn.active {
    background: #fff;
    color: #000;
    border: 2px solid #d3d8dc;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

/* ----------------------------------------------
   LAYOUT SECTION
---------------------------------------------- */
.layout-section {
    background: var(--card);
    padding: 18px;
    border-radius: 10px;
    border: 1px solid #eee;
}

.layout-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.layout-header h4 {
    margin: 0;
    font-size: 15px;
    color: #444;
}

.layout-controls {
    display: flex;
    gap: 10px;
    align-items: center;
}

.control-btn {
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid #ddd;
    background: #fafafa;
    cursor: pointer;
}

/* ----------------------------------------------
   MAIN AREA → PREVIEW + GRID
---------------------------------------------- */
.layout-main {
    display: flex;
    gap: 30px;
    justify-content: center;
    flex-direction: column;
        align-items: center;
}
.warning{
    border-radius: 10.804px !important;
border: 0.9px solid #FFB6AD !important;
background: #FFF9F5 !important;
color: #881D0F;
font-family: Inter;
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
/* Floor map preview */
.layout-preview {
    position: relative;
    width: 400px;
    height: 180px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #eee;
    background: #ddd;
    margin: auto;
}

.layout-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(.95);
}
.view-map{
    width: auto !important;
    height: auto !important;

}
.view-map-btn {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    padding: 6px 10px;
    font-size: 13px;
    background: transparent;
    color: #fff;
    border-radius: 6px;
    width: 100%;
    align-items: center;
    display: flex;
    justify-content: center;
}

.expand-btn {
    position: absolute;
    right: 10px;
    bottom: 10px;
    padding: 6px;
    background: #fff;
    border-radius: 6px;
    border: 1px solid #ddd;
    cursor: pointer;
}

/* ----------------------------------------------
   DESK GRID
---------------------------------------------- */
.desk-grid {
    width: 400px;
    padding: 18px;
    background: #fff;
    border: 1px solid #ececec;
        margin: auto;
    display: grid;
    grid-template-columns: repeat(4, 81px);
    grid-auto-rows: 76px;
    gap: 12px;
}

.desk {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    background: #fbfbfb;
    border: 2px solid #d9d9d9;
    border-radius: 8px;
    cursor: pointer;
    user-select: none;
    font-weight: 700;
}

.desk p {
    margin: 0;
    font-size: 14px;
}

/* Desk state styles */
.desk.small {
    font-size: 12px;
    padding: 6px;
}

.desk.available {
    background: #e6f8ed;
    border-color: #9be0b3;
    color: #0b7a3e;
}

.desk.occupied {
    background: #ffe6e6;
    border-color: #ff9b9b;
    color: #bf2b2b;
}

.desk.maintenance {
    background: #fff7d9;
    border-color: #ffd36b;
    color: #b86b16;
}

.desk.selected {
    outline: 4px solid rgba(30, 136, 229, 0.18);
    box-shadow: 0 4px 12px rgba(30, 136, 229, 0.06);
}

/* Entrance */
.entrance-box {
    grid-column: span 2;
    border: 2px solid #4caf50;
    border-radius: 60px 0 60px 60px;

    display: flex;
    align-items: center;
    justify-content: center;
    
    font-weight: 700;
    color: #1c9c4e;
}

/* ----------------------------------------------
   WARNING + ACTIONS
---------------------------------------------- */
.warning-box {
    margin-top: 14px;
    padding: 10px 14px;

    background: #fff7f6;
    border: 1px solid #ffcccc;
    color: #b33;
    border-radius: 8px;

    display: inline-block;
}

.actions-row {
    margin-top: 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.btn {
    padding: 10px 14px;
    border-radius: 8px;
    border: 1px solid #d0d6db;
    background: #fff;
    cursor: pointer;
}

.btn.primary {
    background: #1c9c4e;
    color: #fff;
    border: none;
}

.btn.warn {
    background: #ffdede;
    border-color: #ffbcbc;
    color: #8a1b1b;
}

/* ----------------------------------------------
   MODAL
---------------------------------------------- */
.modal-backdrop {
    position: fixed;
    inset: 0;
    display: none;

    background: rgba(0, 0, 0, 0.4);
    padding: 20px;

    align-items: center;
    justify-content: center;

    z-index: 1100;
}

.modal-backdrop.show {
    display: flex;
}

/* .modal {
    position: relative;
    width: 100%;
    max-width: 480px;

    padding: 18px;
    background: #fff;
    border-radius: 10px;

    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.25);
} */

.modal h3 {
    margin: 0 0 10px;
}
.btn-light{
    border-radius: 8px;
    border: 0.5px solid #E6E6E6 !important;
    background: #F5F5F5;
}
.btn-danger{
    border-radius: 8px;
    border: 0.5px solid #F93C65 !important;
    background: #FFE9E9 !important;
    color: #F93C65;
font-family: Inter;
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: normal;
}
.modal .close {
    position: absolute;
    right: 18px;
    top: 18px;
    font-size: 18px;

    cursor: pointer;
    background: none;
    border: none;
}

/* Large map modal */
.map-modal .modal {
    max-width: 960px;
    height: 80vh;

    display: flex;
    flex-direction: column;
}

.map-large {
    flex: 1;
    background: #000;

    border-radius: 8px;
    overflow: hidden;
}

.map-large img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* ----------------------------------------------
   SMALL UTILITIES
---------------------------------------------- */
.muted {
    font-size: 13px;
    color: var(--muted);
}


/* SUMMARY CARDS */
.summary-card {
    border-radius: 12px;
    background: #fff;
    padding: 20px;
    position: relative;
    box-shadow: 0 2px 8px rgba(0,0,0,0.07);
    border: 2px solid transparent;
}

.summary-card .icon {
    position: absolute;
    right: 15px;
    top: 15px;
    font-size: 26px;
}

.summary-card.paid { border-color: #0fc15f33; }
.summary-card.paid .icon { color: #0fbf57; }

.summary-card.pending { border-color: #ffb80033; }
.summary-card.pending .icon { color: #e7a100; }

.summary-card.refunded { border-color: #ff626233; }
.summary-card.refunded .icon { color: #d64646; }

.summary-card p {
    color: #161616;
    font-family: Inter;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.summary-card h3 {
    margin-top: 8px;
    font-size: 26px;
    color: #000;
}

.paid h3{
    color: #00BD4F;
    font-family: Inter;
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    margin: 0;
}
.pending h3{
    color: #EBB523;
    font-family: Inter;
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    margin: 0;
}
.refunded h3{
    color: #F93C45;
    font-family: Inter;
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    margin: 0;
}
.btn-warning{
    border-radius: 6px;
    border: 0.4px solid #AD6500 !important;
    background: #FFFFF6 !important;
    color: #AD6500 !important;
    font-family: Inter;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}
.payment-table tbody tr{
    border-radius: 8px;
    border: 1px solid #DDD;
    background: transparent !important;
    border-left: 0;
    border-right: 0;
    box-shadow: none;
}
.payment-table th{
    color: #161616 !important; 
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    font-weight: 600 !important;
    line-height: normal;
}
.pending h3{
    color: #00BD4F;
    font-family: Inter;
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}
.payment-tab .tab.active, .payment-tab .tab{
    width: auto;
}
.payment-tab{
    justify-content: start !important;
}
.payment-tab .tabs{
    width: auto;
}
/* FILTER TABS */
.filter-tabs {
    display: flex;
    gap: 10px;
}





.refund-modal {
  position: fixed;
  inset: 0;
  background: #00000040;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

.modal-box {
  width: 550px;
  background: #fff;
  border-radius: 12px;
  padding: 25px;
  box-shadow: 0 10px 30px #0003;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.modal-header h2 {
  font-size: 20px;
  font-weight: 600;
}

.modal-close {
  font-size: 26px;
  cursor: pointer;
}

.room-box {
  display: flex;
  justify-content: space-between;
  background: #f6f7f8;
  padding: 15px;
  border-radius: 10px;
  margin-bottom: 20px;
}

.room-box h3 {
  font-size: 18px;
  margin-bottom: 5px;
}

.status {
  padding: 4px 12px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  height: fit-content;
}

.status.cancelled {
  background: #ffe6e8;
  color: #e23434;
}

.refund-amount-box {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.label {
  color: #777;
  font-size: 13px;
}

.amount {
  font-weight: 700;
}

.booking-grid {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.progress-timeline {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 10px;
}

/* Each Step */
.timeline-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 90px;
}

.timeline-step .date {
    font-size: 12px;
    color: #777;
    margin-bottom: 6px;
}

/* Circles */
.circle {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 2px solid #d9d9d9;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 6px;
}

.circle i {
    font-size: 16px;
}

/* Active Circle */
.circle.active {
    background: #000;
    border-color: #000;
    color: #fff;
}

/* Pending Circle */
.circle.pending {
    background: #fff;
    border-color: #cfcfcf;
    color: #a0a0a0;
}

/* Label */
.label {
    font-size: 12px;
    color: #000;
    font-weight: 500;
    text-align: center;
}

/* Connecting Lines */
.timeline-line {
    height: 5px;
    width: 90px;
    background: #e5e5e5;
    border-radius: 3px;
}

/* Active Line (Gradient) */
.timeline-line.active {
    background: linear-gradient(to right, #000, #777);
}


.alert-box {
  background: #fff8e3;
  padding: 15px;
  border-radius: 8px;
  display: flex;
  gap: 10px;
  font-size: 14px;
  margin-bottom: 25px;
}

.alert-box .icon {
  font-size: 20px;
}

.modal-footer {
  display: flex;
  justify-content: space-between;
}

.btn {
  width: 48%;
  padding: 12px 0;
  font-size: 15px;
  font-weight: 600;
  border-radius: 8px;
  cursor: pointer;
  border: none;
}

.btn.reject {
  background: #f44336;
  color: #fff;
}

.btn.approve {
  background: #16b364;
  color: #fff;
}




















.filter-btn {
    background: #f4f4f4;
    border: none;
    padding: 8px 18px;
    border-radius: 20px;
    font-size: 14px;
    cursor: pointer;
}

.filter-btn.active {
    background: #000;
    color: #fff;
}

.filter-btn .count {
    background: #ff4d4d;
    color: #fff;
    padding: 2px 7px;
    border-radius: 10px;
    margin-left: 5px;
    font-size: 12px;
}



/* TABLE */
.transaction-table th {
    color: #555;
    font-weight: 600;
    font-size: 14px;
}

.transaction-table td {
    color: #333;
    font-size: 14px;
}



/* STATUS BADGES */
.status {
    padding: 4px 12px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
}

.status.paid {
    background: #d7f5e8;
    color: #18a059;
}

.status.pending {
    background: #fff4d5;
    color: #e7a100;
}

.status.refund-request {
    background: #ffe5e5;
    color: #d33838;
}

























/* ----------------------------------------------
   RESPONSIVE
---------------------------------------------- */
@media (max-width: 900px) {
    .layout-main {
        flex-direction: column;
    }

    .layout-preview {
        width: 100%;
        height: 220px;
    }

    .desk-grid {
        width: 100%;
        grid-template-columns: repeat(4, 1fr);
    }
}














.search-wrapper {
    position: relative;
    width: 450px; /* adjust as needed */
}
.country {
    gap: 20px;
    padding-right: 20px;
}
.btn-primary{
    background: #000 !important;
    border-color: #000 !important;
    width: 100%;
}
.table-search .search-wrapper input, .table-search .form-select{
    border-radius: 10px;
    padding: 8px 15px 8px 38px;
}
.select2-container .select2-selection--single .select2-selection__rendered{
    border-radius: 10px;
    border: 1px solid #D4D4D4;
    background: #F9FAFB;
}
.select2-container--default .select2-selection--single{
    border: 0 !important;
}
.table-search .search-wrapper .search-icon{
    top: 48%;
}
.search-wrapper input {
    width: 100%;
    padding: 10px 15px 10px 38px; 
    border: 1px solid #ddd;
    border-radius: 50px;
    background: #fafafa;
    font-size: 14px;
    outline: none;
    transition: 0.2s;
}
.notification-title .title{
    margin-bottom: 0 !important;
    margin-top: 0 !important;
    min-height: auto !important;
    line-height: 25px;
    color: #161616;
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}
.notification-title .time{
    color: #989898;
    font-family: Inter;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}
.notification-title {
    margin-left: 15px;
}
.sidebar-icon{
    margin-right: 8px;
}
.side-menu__item.active .home svg path{
    stroke: #000;
}
.side-menu__item.active svg, .side-menu__item.active svg path{
    fill:#fff;
    
}
.icon-box {
    display: flex;
    align-items: center;
}
span.badge-new {
    border-radius: 4px;
    background: #000;
    color: #F2F3F5;
    font-family: Inter;
    font-size: 12.343px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    padding: 4px 13px;
}
.notification-card {
    background: #fff;
    border-left: 3px solid #000;
    border-radius: 5px;
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
        padding: 15px;
            align-items: center;
}
.side-section {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 85vh;
}
.logout .side-menu__item{
    color: #FF9696 !important;
}
.logout-section{
    border-top: 1px solid #fff;
    margin: 0 25px;
}
.search-wrapper input:focus {
    background: #fff;
    border-color: #ccc;
    box-shadow: 0 0 0 2px rgba(0,0,0,0.05);
}

.search-wrapper .search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    color: #999;
    pointer-events: none;
}



.header-right-icons .nav-link.icon{
    background: transparent !important;
}
.app-sidebar__toggle{
    color: #000000 !important;
}
.date-sec {
    text-align: right;
    margin-top: 15px;
    padding: 0 12px;
}
.date-sec h6{
    margin: 0;
}

/* .header-brand-img { */
/* width: 45px !important; */
/* } */
.dark-mode .side-header .header-brand-img.desktop-logo {
    /* width: 145px; */
}

img.header-brand-img1 {
    width: 155px;
}

.img-td {
    width: 40px;
    height: 40px;
    /* border-radius: 50% !important; */
    object-fit: cover;
}

.img-50 {
    width: 50px;
}

.profile-center {
    text-align: center;
}

.table-responsive .table td {
    vertical-align: middle;
    color: #2C2C2C;
    font-size: 14px;
    font-weight: 500;
    line-height: normal;
    white-space: nowrap;
    border: 0;
}

.table th,
.text-wrap table th {
    font-size: 0.8rem !important;
}

.mt-30 {
    margin-top: 20px;
}

.float-right {
    float: right;
}

.visitor-list i {
    font-size: 18px;
    width: 35px;
    height: 35px;
    background-color: #cccccc7d;
    border-radius: 50%;
    text-align: center;
    line-height: 32px;
    margin-right: 20px;
    margin-bottom: 10px;
}

.face-clr {
    color: #2318d3;
}

.insta-clr {
    color: #a80d84;
}

.twit-clr {
    color: #006fa8;
}

.link-clr {
    color: #3500c8;
}

.y-clr {
    color: #cc0606;
}

.side-header .header-brand-img.toggle-logo,
.side-header .header-brand-img.light-logo {
    height: 2.5rem !important;
}

.avatar {
    background: rgb(9 21 64 / 0%) no-repeat center/cover !important;
}

@media (max-width: 576px) {
    .page-header {
        display: flex !important;
    }
}

@media (max-width: 576px) {
    .header-brand-img {
        margin: 3px 60px !important;
    }

    .header .dropdown-menu {
        top: 0.5rem !important;
    }
}

@media (max-width: 769px) {
    .dark-mode .app-header.header .header-brand-img.desktop-logo {
        display: block;
        width: 125px;
    }
}

.fiel_icons {
    display: flex;
    justify-content: center;
}

.fiel_icons img {
    width: 50%;
}
.side-menu__item{
    color: #fff !important;
}
.side-menu .side-menu__icon{
    color: #ffffff;
}
.side-menu__item.active .side-menu__icon {
    color: #ffffff !important;
}
.side-menu__item:hover .side-menu__icon, .side-menu__item:hover .side-menu__label, .side-menu__item:focus .side-menu__icon, .side-menu__item:focus .side-menu__label{
        color: #ffffff !important;
}
.side-menu__item.active::before {
    width: 5px;
    height: 100%;
    top: 0;
    left: -19px;
    position: absolute;
    content: "";
    border-radius: 0 25px 25px 0;
    background-color: #636161;
}
.download .i{
    background: red;
    border-radius: 5px;

}
body {
    background: #ffd8d861;
}

.searchInput {
    min-width: 300px;
    margin-right: 15px;
}

.btnNovi {
    border-radius: 10px;
    background: #000;
    color: #FFF;
    text-align: center;
    font-weight: 500;
}
.download i {
    background: red;
    padding: 8px;
    border-radius: 10px;
    color: #fff;
    font-size: 17px;
    font-weight: 700;
}


.company-label{
    width: 30%;
}
.branch-box{
    border: 1px solid #c4c4c4;
    padding: 10px;
    border-radius: 10px;
}
.offer-box p{
    background: red;
    padding: 3px 15px;
    border-radius: 20px;
}
.product-box{
    display: flex;
    justify-content: space-between;
}
.theme-btn button{
    background: red;
    border: 0;
    border-radius: 50px;
    padding: 10px 15px;
    color: #fff;
}
.plan-box h2{
    color: red;
}
.plan-box span{
    font-size: 15px;
    color: #000;
}

tbody tr {
    border-radius: 8px;
    border: 1px solid #DDD;
    background: #F9F9F9;
}
tbody{
    margin-top: 20px;
}


.smallBtns {
    border-radius: 5px;
    padding: 0;
    width: 30px;
    display: flex;
    aspect-ratio: 1;
    align-items: center;
    justify-content: center;
}

.smallBtns.green {
    border: 1px solid #f40000;
    color: #f40000;
}

/* .smallBtns.blue {
    border: 1px solid #f40000;
    color: #f40000;
} */

.smallBtns.red {
    border: 1px solid #DD3232;
    color: #DD3232;
}

/* thead tr {
    background: #FCF5FF;
} */

.table-responsive {
    border-radius: 15px;
    border: 0;
}

.booking-table {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px; /* SPACE BETWEEN ROWS */
}

.table-row {
    display: flex;
    grid-template-columns: 120px 200px 200px 150px 100px 150px 110px;
    align-items: center;
    background: #f8f9fa;
    padding: 15px 20px;
    border-radius: 10px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
    width: 100%;
    border-radius: 8px;
    border: 1px solid #DDD;
    background: #F9F9F9;
}

.table-row.header {
    background: transparent;
    font-weight: 600;
    box-shadow: none;
    border: 0;
}
.refund{
    border-radius: 6px;
    border: 1px solid #E95C2E;
    background: #FFF8EE;
}
.col {
    font-size: 14px;
}


.booking-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.form-row {
    display: flex;
    gap: 20px;
}

.form-group {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.form-group.full {
    width: 100%;
}

/* Labels */
label {
    font-size: 13px;
    color: #444;
    margin-bottom: 6px;
    font-weight: 500;
}

/* Inputs */
input, select {
    padding: 12px;
    border-radius: 6px;
    font-size: 14px;
    width: 100%;
    border-radius: 8px;
border: 1px solid #CFCFCF;
background: #FBFBFB;
}

input:focus, select:focus {
    border-color: #5a8fff;
    box-shadow: 0 0 0 2px rgba(90,143,255,0.2);
    outline: none;
}

/* Small info text */
.info-text {
    font-size: 12px;
    color: #5a8fff;
    margin-top: 6px;
}

/* Buttons */
.form-buttons {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
}

.btn {
    padding: 7px 24px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    border: none;
}

.cancel-btn {
    background: #fff;
    border: 1px solid #ffb6b6;
    color: #e05454;
        width: 49%;
}

.primary-btn {
    background: #000;
    color: #fff;
        width: 49%;
}


.user-col {
    display: flex;
    align-items: center;
    gap: 10px;
}

.avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
}

.badge {
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
}

.confirmed {
    background: #d8ffe1;
    color: #1d8f3b;
}

.cancelled {
    background: #ffe4e4;
    color: #d13232;
}
.Guests-table h6{
    color: #000000;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px; /* 100% */
}
.checkout-btn{
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, 0.10);
    background: #FFF;
}
.paid {
    border-radius: 10px;
border: 1px solid #00BD4F;
background: #FFF;
color: #00BD4F;
}
.Guests-table{
    border: 1px solid #E5E7EB;
}
.refund {
    background: #fff0db;
    color: #d97a08;
}
.Guests-table tbody tr {
    border-radius: 8px;
    border-bottom: 1px solid #DDD !important;
    background: transparent !important;
    box-shadow: none !important;
    border: 0;
}
.actions {
    text-align: right;
}

.icon-btn {
    border: none;
    background: #f0f0f0;
    padding: 6px;
    border-radius: 6px;
    cursor: pointer;
}



/* Tabs Container */
.tabs-container {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-bottom: 25px;
}

.tabs {
    display: flex;
    background: #f0f2f5;
    padding: 6px;
    border-radius: 30px;
    gap: 10px;
    width: 100%;
}
.tabs-menu1 ul li .active{
    border: 0 !important;
    text-align: center;
}
.tab {
    border: none;
    background: transparent;
    padding: 0px 28px;
    border-radius: 25px;
    font-size: 14px;
    cursor: pointer;
    color: #555;
    font-weight: 500;
    width: 30%;
}

.tab.active {
    background: #fff;
    box-shadow: 0px 2px 6px rgba(0,0,0,0.1);
    color: #000;
    width: 30%;
}

/* Table */
.custom-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 12px;
}

.custom-table th {
    text-align: left;
    font-size: 14px;
    padding: 12px 10px;
    color: #444;
}

.custom-table td {
    padding: 18px 10px;
    background: #fff;
    border-radius: 10px;
    font-size: 14px;
}

tbody tr {
    box-shadow: 0px 3px 8px rgba(0,0,0,0.1);
}

/* User Avatar + Name */
.user {
    display: flex;
    align-items: center;
    gap: 10px;
}

.user img {
    width: 35px;
    height: 35px;
    border-radius: 50%;
}

/* Status Badge */
.badge {
    padding: 6px 14px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 12px;
}

.badge.pending {
    background: #fff7d1;
    color: #c59f13;
}

/* Action Buttons */
.actions {
    display: flex;
    gap: 10px;
}

.approve {
    background: #d8ffe2;
    border: 1px solid #5fc486;
    color: #23994a;
    padding: 6px 14px;
    border-radius: 8px;
    cursor: pointer;
}

.reject {
    background: #ffe2e2;
    border: 1px solid #f39191;
    color: #c53030;
    padding: 6px 14px;
    border-radius: 8px;
    cursor: pointer;
}

.icon {
    font-size: 14px;
    margin-right: 6px;
}





.table thead th {
    text-transform: capitalize;
    white-space: nowrap;
    border: 0 !important;
}
.confirmed{
    border-radius: 6px;
border: 1px solid #0DBCA2;
background: #DEFFEF;
}
.confirmed p{
    color: #03AE8C;
    font-family: Inter;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    border-radius: 6px;
    border: 1px solid #0DBCA2;
    background: #DEFFEF;
    margin: 0;
    padding: 5px;
    text-align: center;
}
tbody {
    background-color: white;
}

.NoviCard {
    border-radius: 20px;
    border: 0.5px solid #EEE !important;
    background: #FFF;
}

.btnNoviBlack {
    background-color: black;
    color: white;
    border-radius: 7px;
}

.responceModal {}

.responceModal .modal-content {
    border-radius: 20px;
}

.responceModal .modal-header {
    border-radius: 20px 20px 0px 0px;
    border: 0.5px solid #EEE;
    background: #F9F9F9;
    display: flex;
    align-items: center;
}

.responceModal .modal-header h4 {
    margin-bottom: 0;
}

.responceModal .modal-footer {
    border-top: none;
    justify-content: flex-start;
}

.responceModal .clientdtl {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}

.responceModal .clientdtl h6 {
    color: #535353;
    margin-bottom: 0;
    font-size: 13px;
    font-weight: 500;
}

.responceModal .clientdtl h6 span {
    color: #2C2C2C;
}

.responceModal .clientdtl p {
    margin-bottom: 0;
    color: #535353;
    font-size: 13px;
    font-weight: 500;
}

.responceModal {}

.page-title i {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background: white;
    display: flex;
    justify-content: center;
    align-items: center;
    border: .5px solid #EEE;
    color: #EEE;
}
.progress-sec h6 {
    color: #00B69B;
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.card-options a img {
    width: 35px;
}
.progress-sec p {
    margin: 0;
    color: #8D8D8D;
    font-family: Inter;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin-left: 10px;
}
.detailcard .card-header {
    padding: 15px;
    display: flex;
    justify-content: space-between;
    border: 0.5px solid #EEE;
    background: #F3F3F3;
}
.progress-sec{
    display: flex;
    align-items: center;
}
.table-search {
    display: flex;
    gap: 15px;
}
.progress-low-sec h6{
    color: #F93C65;
    font-family: Inter;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}
.table-search .search-wrapper{
    width: 300px;
}
.space-count h6{
    background: #FFF5F5;
    padding: 2px 10px;
    border-radius: 100px;
    color: #F93C65;
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}
.detailcard {
    border-radius: 20px;
    overflow: hidden;
}

.detailcard .card-header h4 {
    margin-bottom: 0;
}

.clientDtil h6 {
    color: #535353;
    font-size: 13px;
    font-weight: 500;
}

.clientDtil p {
    color: #000;
    font-size: 16px;
    font-weight: 500;
}

.resposeCard {
    border-radius: 10px;
    border: 1px solid #EEE;
    background: #FBFBFB;
    padding: 15px;
}

.respoRight {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    align-items: flex-end;
}

.respoRight p {
    margin-bottom: 0;
    color: #A4A4A4;
    font-size: 12px;
    font-weight: 400;
}

.rightIcons a {
    margin-left: 10px;
}

.rightIcons a:last-child {
    border-left: 1px solid #E2E2E2;
    padding-left: 10px;
}

.wtspIcon {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    border: 1px solid #f40000;
    color: #f40000;
    border-radius: 5px;
}

.whitepaceNowrap {
    white-space: nowrap;
}

.mainhEAD {
    color: #000;
    width: fit-content;
    font-size: 15px;
    font-style: normal;
    font-weight: 700;
    line-height: 14px;
    /* 93.333% */
}

.underline {
    text-decoration: underline;
}

.progressBar {
    width: 80%;
    height: 12px;
    border-radius: 99px;
    background: #E0F6EE;
    overflow: hidden;
    position: relative;
    margin: 0 10px;
}

.progressss {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    border-radius: 15px;
    background: #f40000;
}

.Gr_color {
    color: #f40000;
}

.whatspaaBox {
    margin-left: 15px;
    border-radius: 5px;

}

.pojetcCard .card-body {
    padding: 15px 20px;
}

.reportCard {
    margin: 0 10px;
    padding: 5px;
    width: 110px;
    height: 100%;
    aspect-ratio: 1;
    border-radius: 10px;
    background: #F9F9F9;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.reportCard.active {
    background: #2C2C2C;
}

.reportCard p {
    color: #979797;
    text-align: center;
    margin-bottom: 5px;
    font-size: 12px;
    font-weight: 500;
}

.reportCard.active p {
    color: #C8C8C8;

}

.reportCard h4 {
    color: #474747;
    text-align: center;
    font-size: 26.939px;
    font-weight: 500;
    letter-spacing: -0.539px;
    margin-bottom: 0;
}

.reportCard.active h4 {
    color: #FFF;
}

.reportCardAdd {
    cursor: pointer;
    width: 110px;
    height: 100%;
    aspect-ratio: 1;
    border-radius: 10px;
    border: 1px solid #979797;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 15px;
}

.reportCardAdd p {
    color: #979797;
    text-align: center;
    margin-top: 5px;
    font-size: 12px;
    font-weight: 500;
}

.addDepartment .modal-header {
    border-radius: 20px 20px 0px 0px;
    border: 0.5px solid #EEE;
    background: #F9F9F9;
}

.addDepartment .modal-content {
    border-radius: 20px;
}

.btnAdd {
    border-radius: 6px;
    border: 1px solid #f40000;
    color: #f40000;
    padding: 5px 20px;
    font-size: 16px;
}

.btnClose {
    border: 1px solid #969BA0;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    color: #969BA0;
}

.wFit {
    width: fit-content;
}

.invoiceTab ul {
    border-radius: 10px;
    background: #F2F2F3;
    width: fit-content;
    padding: 5px 7px;
}

.invoiceTab .tab-menu-heading {
    border-bottom: none !important;
}

.invoiceTab .nav.panel-tabs a.active {
    border-bottom: none !important;
    background: white;
    border-radius: 8px;
}

.invoiceTab .tabs-menu1 ul li a {
    padding: 5px 25px;
}
.tabs-menu1 ul li a{
    padding: 10px 10px 11px 10px;
    text-align: center;
}
.invoiceTab .cardinvoice {
    padding: 15px;
    border-radius: 10px;
    border: 0.6px solid #EEE;
    background: #F9F9F9;
}

.invoiceTab .panel-body {
    padding: 15px 0;

}

.invoice_head {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}

.invHeadLeft {
    display: flex;
    align-items: center;
}

.invHeadRight {
    display: flex;

}

.invHeadLeft h6 {
    color: #2C2C2C;
    font-size: 12px;
    font-weight: 600;
    line-height: normal;
    margin-right: 10px;
    margin-bottom: 0;
}

.invHeadLeft span {
    color: #FFF;
    font-size: 10px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    border-radius: 4px;
    background: #f40000;
    padding: 3px 10px;
}

.invHeadRight a {
    margin-left: 10px;
    color: #71839B;
}

.invHeadRight a i {
    color: #71839B;
}

.invoicBody {
    margin-bottom: 15px;
}

.invoicBody h5 {
    color: rgba(0, 0, 0, 0.35);
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    margin-bottom: 5px
}

.invoicBody p {
    color: #2C2C2C;
    font-size: 12px;
    font-weight: 500;
    line-height: normal;
    width: 75%;
}


.user-name{
    display: flex;
  }
.user-icon {
    background: #ff000047;
    width: 40px;
    height: 40px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #000;
    margin-right: 15px;
}
.user-name h6 {
    font-size: 20px;
    font-weight: 700;
    margin: 0;
        margin-bottom: 5px;
}
.users-list {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}
.processing-btn p{
    background: #677add73 !important;
}
.pending-btn p{
    background: #ddd06773 !important;
}
.active-btn p, .pending-btn p, .processing-btn p{
    background: #0080004f;
    color: #000000;
    padding: 3px 15px;
    margin: 0;
    border-radius: 46px;
    font-weight: 500;
    width: fit-content;
}
.recent-title{
    border-bottom: 1px solid #e3e3e3;
    padding-bottom: 12px;
    margin-bottom: 27px !important;
}
.active-btn h6, .pending-btn h6, .processing-btn h6 {
    text-align: right;
    font-size: 16px;
    font-weight: 700;
}
.blue-btn p{
    width: fit-content;
}

.plan-box {
    height: 100%;
}
.users-card h2{
    color: red;
}






















.invoiceFooter {}

.countInvoice {
    display: flex;
    justify-content: space-between;
}

.countInvoice .invCounts {
    color: rgba(0, 0, 0, 0.35);
    font-size: 15px;
    font-weight: 400;
    line-height: normal;
}

.countInvoice .invCounts span {
    color: #f40000;
    font-size: 16px;
    font-weight: 500;
}

.countInvoice .invCounts a {
    color: #292D32;
    margin-left: 5px;
}

.InvoivceProgress {
    margin-top: 8px;
    width: 100%;
    border: 3px solid #EBEBEB;
    border-radius: 99px;
    background: #EBEBEB;
    height: 15px;
    position: relative;
}

.progresInvoiceBar {
    position: absolute;
    height: 100%;
    top: 0;
    left: 0;
    border-radius: 99px;
    background: #f40000;
}

.EmployeCard {}

.EmployeCard .emplyeHead {
    border-radius: 20px 20px 0px 0px;
    border: 0.5px solid #EEE;
    background: #F2F2F2;
    padding: 5px 10px;
    display: flex;
    align-items: center;
}

.empImg {
    display: flex;
    flex-shrink: 0;
}

.empImg img {
    width: 60px;
    border-radius: 50%;
    height: 60px;
    object-fit: cover;
}

.EmployeeContent {
    padding-left: 10px;
    width: 100%;
}

.EmployeeContent .EditIcons {
    display: flex;
    justify-content: end;
}

.EmployeeContent .EditIcons a {
    margin-left: 10px;
    font-size: 16px;
    color: #292D32;
    padding-left: 10px;
    border-left: 1px solid #978f8f63;
}

.EmployeeContent .EditIcons a:first-child {
    border-left: none;
}

.EmployeeContent h5 {
    color: #000;
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    margin-bottom: 5px;
}

.EmployeeContent p {
    color: #000;
    font-size: 13px;
    font-style: normal;
    font-weight: 500;

    line-height: normal;
}

.EmployeeContent p span {
    background-color: #000;
    color: white;
    border-radius: 5px;
    padding: 4px;
    margin-right: 5px;
}

.empHeadFootr {
    color: #969BA0;
    font-size: 10px;
    font-weight: 500;
    line-height: normal;
    display: flex;
    justify-content: space-between;
}

.empHeadFootr span {
    color: #000;
}

.employBody {
    padding: 8px;
    background: #FEFEFE;
    border-radius: 0px 0px 20px 20px;
}
.subject-box{
    padding: 20px 8px 20px !important;
    text-align: center;
}
.subject-box h6{
    margin: 0;
    font-size: 19px;
}
.emplyeeBodyCont {
    border-radius: 10px;
    border: 0.5px solid #EEE;
    background: #FFF;
    padding: 10px 8px 30px;
}

.emplyeeBodyCont li {
    color: #000;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    margin-bottom: 8px;
}

.emplyeeBodyCont li i {
    color: #969BA0;
    margin-right: 8px;
}

.Employee_details_Cont h5 {
    color: #000;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.Employee_details_Cont h6 span {
    background-color: #000;
    color: white;
    border-radius: 5px;
    padding: 4px;
    margin-right: 5px;
}

.Employee_details_Cont h6 {
    color: #000;
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.Employee_details_Cont p {
    color: #969BA0;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.Employee_details_Cont p b {
    color: #000;
}

.EmployeeSkills {
    list-style: disc;
}

.EmployeeSkills li {
    color: #000;
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
    line-height: 17px;
    /* 93.333% */
    padding-bottom: 20px;
}

.attach_card {
    padding-top: 20px;
}

.attach_card h6 {
    color: #969BA0;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 14px;
    /* 87.5% */
}

.attach_box {
    border-radius: 10px;
    background: var(--Hover-Gray, #F8FAFE);
    padding: 15px;
    display: flex;
    align-items: center;
    margin-top: 10px;
}

.attach_box h5 {
    color: var(--Dark-Gray, #324054);
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 22px;
    margin-bottom: 0px;
}

.attach_box p {
    color: var(--Secondary-Gray, #71839B);
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px;
    /* 133.333% */
    letter-spacing: -0.06px;
}

.review_date h6 {
    color: #969BA0;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 14px;
    /* 87.5% */
    margin-bottom: 0;
}

.review_date {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.Review p {
    color: #000;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 22px;
    padding-top: 15px;
}

.Review {
    margin-top: 10px;
}

.accntDetail {
    display: flex;
    align-items: start;
    justify-content: space-between;
    padding-top: 20px;
}

.accntDetail p {
    color: #4E4E4E;
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
    margin-bottom: 0;
    line-height: 14px;
    /* 93.333% */
}

.accntDetail h6 {
    color: #000;
    text-align: right;
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
    line-height: 14px;
    /* 93.333% */

    margin-bottom: 0;

}

.card {
    border-radius: 25px;
}

.form-label {
    font-size: 12px;
}

.attach_create_card {
    border: 1px solid #e9edf4;
    border-radius: 10px;
    padding: 15px;

}

.attach_create_header h5 {
    color: #292D32;
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    margin-bottom: 0px;
}

.attach_create_header p {
    color: #A9ACB4;
    font-size: 13px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    margin-bottom: 0px;
}

.attach_create_header {
    display: flex;
    border-bottom: 1px solid #e9edf4;
    padding-bottom: 10px;
}

.applicant_flex {
    display: flex;
    align-items: start;
}

.applicant_flex p {
    color: #4E4E4E;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin-bottom: 0;
    margin-bottom: 20px;

}

.applicant_flex h6 {
    color: #000;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    margin-bottom: 0;
    padding-left: 40px;
    margin-bottom: 20px;

}

.resume_Sec h5{
    color: #4E4E4E;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: normal;
}

iframe{
    border-radius: 20px;
}

.OpeningCard{
    border-radius: 11.49px;
border: 1px solid rgba(229, 229, 229, 0.40);
background: #FFF;
}
.OpeningCard .openHead{
    padding: 15px;
    border-bottom: 1px solid #F5F5F5;
}
.openHead h6{
    color: #000;
    font-size: 16px;
    font-weight: 500;
    line-height: normal;
    margin-bottom: 0;
}
.openHead i{
   font-size: 14px;
}
.openHead a{
    color: #292D32;
}
.openHead a:first-child{
    border-right: 1px solid grey;
    margin-right: 8px;
    padding-right: 8px;
}
.OpeningCard .openBody{
    padding: 15px;
    border-bottom: 1px solid #F5F5F5;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.OpeningCard .openBody div{
    display: flex;
    align-items: flex-end;
}
.OpeningCard .openBody h4{
    color: #000;
    font-size: 44.807px;
font-weight: 500;
line-height: 1;
margin-bottom: 0;
}
.OpeningCard .openBody span{
    color: #818181;
font-size: 16.024px;
font-weight: 500;
}
.OpeningCard .openBody i{
    font-size: 45px;
    color: #3433304D;
}
.OpenFooter{
    padding: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.OpenFooter div{
    display: flex;
}
.OpenFooter div span{
    color: #000;
font-size: 15px;
font-weight: 600;
line-height: normal;
}
.OpenFooter div p{
    color: #656565;
font-size: 15px;
font-weight: 400;
line-height: normal;
margin-bottom: 0;
margin-left: 5px;
}
.openingTab{
    display: flex;
    flex-wrap: nowrap;
    border-radius: 10px;
    background: #F2F2F3;
    padding: 0 10px;
    margin-right: 10px;
}
.openingTab.nav-pills .nav-link.active, .openingTab.nav-pills .show>.nav-link{
    border-radius: 6px;
    background: #FFF;
    color: #292D32;
    box-shadow: 0px 4px 34px 0px rgba(0, 0, 0, 0.05);
}
.openingTab .nav-item{
    white-space: nowrap;
}
.BudgetCard{
    margin: 0 10px;
    padding: 5px;
    width: 110px;
    height: 100%;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    border-radius: 10px;
background: rgba(0, 176, 116, 0.03);
}
.BudgetCard p{
    color: #979797;
text-align: center;
font-size: 12px;
font-weight: 500;
margin-bottom: 5px;
}
.BudgetCard h5{
    color: #474747;
    text-align: center;
    font-size: 23px;
    line-height: normal;
     margin-bottom: 0;
    letter-spacing: -0.46px;
}
.BudgetCard.active{
background: #f40000;
}
.BudgetCard.active p,.BudgetCard.active h5{
color: white;
}

.details p{
    margin-bottom: 5px;
}

.checkbox-sec, .first-checkbox{
    display: flex;
    align-items: center;
}
.first-checkbox label{
    margin-bottom: 2px;
}
.live-icon {
    display: inline-block;
    position: relative;
    top: calc(50% - 5px);
    background-color: red;
    width: 10px;
    height: 10px;
    margin-left: 20px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 50%;
    z-index: 1;
  }
  .live-icon:before {
    content: "";
    display: block;
    position: absolute;
    background-color: rgba(255, 0, 0, 0.6);
    width: 100%;
    height: 100%;
    border-radius: 50%;
    -webkit-animation: live 2s ease-in-out infinite;
            animation: live 2s ease-in-out infinite;
    z-index: -1;
  }
  
  @-webkit-keyframes live {
    0% {
      transform: scale(1, 1);
    }
    100% {
      transform: scale(3.5, 3.5);
      background-color: rgba(255, 0, 0, 0);
    }
  }
  
  @keyframes live {
    0% {
      transform: scale(1, 1);
    }
    100% {
      transform: scale(3.5, 3.5);
      background-color: rgba(255, 0, 0, 0);
    }
  }
 
  .EmployeeContent .btn{
    padding: 0.375rem 0 !important;
  }
  .back-button{
    display: flex;
    align-items: center;
    font-size: 20px;
    color:#eee;
  }

  .ps__thumb-y{
    background-color: #41a9f3!important;
    width: 8px;
  }
  .progress-circle, .progress-circle-two, .progress-circle-three {
    position: relative;
    width: 100px;
    height: 100px;
    background: conic-gradient(#41a9f3var(--progress), #ccc 0%);
    border-radius: 50%;
  }

  .progress-circle::before, .progress-circle-two::before, .progress-circle-three::before {
    content: "";
    position: absolute;
    top: 10%;
    left: 10%;
    width: 80%;
    height: 80%;
    background: #fff;
    border-radius: 50%;
  }

  .progress-circle span, .progress-circle-two span, .progress-circle-three span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.5em;
    font-weight: bold;
    color: #333;
  }
  .attendence-cnt h6{
    color: #f40000;
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: 30.037px; /* 150% */
    letter-spacing: 0.125px;
  }
  .attendence-cnt p{
    color: var(--Neutral-Gray-70, #525252);
    font-size: 12.515px;
    font-style: normal;
    font-weight: 400;
    line-height: 20.025px; /* 160% */
    letter-spacing: 0.501px;
  }
  .next-row{
    display: flex;
    justify-content: space-between;
  }