/*:root {
    /* ================================
       PAGE / SURFACES
       ================================ */

  /*  --bg-page: #f5f7fa;
    --bg-navbar: #ffffff;
    --bg-card: #ffffff;
    --bg-soft: #eef2f6;
    --surface: #ffffff;

    /* ================================
       BRAND
       ================================ */

/*    --primary: #7628cf;
    --primary-hover: #931dd8;
    --primary-soft: #dbeafe;

    /* ================================
       TEXT
       ================================ */

/*    --text-main: #172033;
    --text-muted: #5b6678;
    --text-light: #ffffff;

    /* ================================
       BORDERS
       ================================ */
/*
    --border: #cbd5e1;
    --border-light: #e2e8f0;

    /* ================================
       RESERVATION STATES
       ================================ */

    /* Someone else's reservation */
  /*  --reserved: #a14dda;
    --reserved-hover: #d9dee3;

    /* My reservation */
 /*   --reserved-mine: #2e8b57;
    --reserved-mine-hover: #26734a;

    /* Unavailable / blocked */
  /*  --unavailable: #d9534f;
    --unavailable-hover: #c7433f;

    /* Past / inactive */
 /*   --past: #d9dee3;

    /* Attention / pending */
/*    --warning: #e6a23c;
    --warning-soft: #fff3d6;

    /* Available */
 /*   --available: #ffffff;
    --available-hover: #f0f7ff;

    /* Success */
 /*   --success: #2e8b57;
    --success-soft: #e4f3ea;

    /* ================================
       RADIUS
       ================================ */

 /*   --radius: 12px;
    --radius-btn: 8px;

    /* ================================
       SHADOWS
       ================================ */

 /*   --shadow-sm: 0 2px 6px rgba(15, 23, 42, 0.08);
    --shadow-lg: 0 8px 20px rgba(15, 23, 42, 0.10);

    /* ================================
       TRANSITION
       ================================ */

 /*   --transition: 0.2s ease;
}
*/

:root{
    /* Backgrounds */
    --bg-page:#f7fafc;
    --bg-navbar:#eaf4f8;
    --bg-card:#fff;
    --bg-soft:#eef6fa;

    /* Colors */
    --primary:#3bb7e3;
    --primary-hover:#2aa4cf;

    --text-main:#1f2933;
    --text-muted:#5f6c7b;

    --surface:#fff;
    --border:rgba(60,64,67,.12);

    /* Reservation */
    --reserved:#75acda;
    --reserved-mine:#1976d2;
    --unavailable:#616161;
    --past:#cecdcd;

    /* Radius */
    --radius:18px;
    --radius-btn:14px;

    /* Shadows */
    --shadow-sm:0 6px 14px rgba(0,0,0,.08);
    --shadow-lg:0 10px 22px rgba(0,0,0,.08);

    --transition:.2s ease;
}


/* RESET */
*,
*::before,
*::after{
    box-sizing:border-box;
}

html,
body{
    margin:0!important;
    padding:0!important;
    width:100%;
    min-height:100%;
}

body{
    background:var(--bg-page);
    color:var(--text-main);
    font-family:"Inter","Segoe UI","Rubik","Heebo",Arial,sans-serif;
    line-height:1.45;
    padding-top:0!important;
}

body>*:first-child{
    margin-top:0!important;
    padding-top:0!important;
}

/* RTL */
.navbar-brand,
.navbar-nav,
.navbar-nav>li,
.reservationDates,
.reservationDates .col-md-6,
.page-search-availability .col-sm-3,
.page-search-availability .col-sm-9,
.dashboardHeader .pull-left{
    float:right!important;
}

.navbar-right,
.dashboardHeader .pull-right{
    float:left!important;
}

.dropdown-menu{
    right:0;
    left:auto;
    text-align:right;
}

.qtip-content{
    text-align:right;
}

#reference-number{
    direction:ltr;
    unicode-bidi:bidi-override;
}

/* NAVBAR */
.navbar,
.navbar-default {
  background: var(--bg-navbar) !important;
  border: 0 !important;
  margin: 0 !important;
  position: sticky;
  top: 0;
  z-index: 9999;
}

/* Remove HIDE Co-Owner*/
input.select2-search__field,
#navMyAccountDropdown,
#resourceDetailsPopup .attributes,
.res_popup_details .accessories,
.res_popup_details .users,
#navPassword,
#navResourceCalendar,
#navMyCalendar,
.change-date img,
#reservationDetails .reservationTitle,
#reservationDetails .reservationDescription,
#page-reservation #reservation-title-section,
#page-reservation #reservation-description-section,
a#make_default,
#repeatDiv div,
.legend.participating,
.legend.restricted,
.legend.pending,
.legend.coowner{
    display:none!important;
}

/* MAIN CONTAINER */
#reservation-box{
    max-width:920px;
    margin:14px auto;
    padding:14px;
    background:var(--bg-card);
    border-radius:var(--radius);
    box-shadow:var(--shadow-lg);
}

/* CARDS */

.availabilityDashboard .availabilityItem,
.page-search-availability .opening{
    background:var(--bg-card);
    margin:10px 0;
    padding:12px;
    border-radius:var(--radius);
    box-shadow:var(--shadow-sm);
}

.availabilityDashboard .availabilityItem:hover,
.page-search-availability .opening:hover{
    transform:translateY(-2px);
    box-shadow:var(--shadow-lg);
}


/* BUTTONS */
.btn,
.btn-success{
    min-height:44px;
    padding:12px 14px!important;
    border-radius:var(--radius-btn)!important;
    font-weight:800;
}

.btn-success,
.availabilityDashboard .availabilityItem .btn{
    background:var(--primary)!important;
    border-color:var(--primary)!important;
    color:#fff!important;
}

.btn-success:hover,
.availabilityDashboard .availabilityItem .btn:hover{
    background:var(--primary-hover)!important;
    border-color:var(--primary-hover)!important;
}

.btn-success:active,
.btn-success:focus,
.availabilityDashboard .availabilityItem .btn:active,
.availabilityDashboard .availabilityItem .btn:focus{
    background:var(--primary-hover)!important;
    border-color:var(--primary-hover)!important;
}


/* STATES */
/* ==========================================================
   RESERVATION STATES
   ========================================================== */

.unreservable{
    background:var(--unavailable)!important;
}

.reserved{
    background:var(--reserved)!important;
}

.reserved.mine{
    background:var(--reserved-mine)!important;
    outline:2px solid rgba(0,0,0,.14);
}

.pasttime{
    background:var(--past)!important;
}


/* TABLE HEADERS */
th.resdate {
  text-align: right;
  padding: 12px;
  font-weight: 600;
  font-size: 14px;
  color: var(--text-main);
  background: var(--surface);
  position: relative;
}

th.reslabel {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
  text-align: center;
  padding: 6px 0;
  border-left: 1px solid var(--border);
  position: relative;
}

/* MOBILE */
@media (max-width: 767px) {
  th.reslabel::after {
    font-size: 9px !important;
  }

  #reservation-box {
    max-width: 100% !important;
    margin: 10px auto;
    padding: 12px;
  }

  table,
  .table-responsive,
  #reservations,
  .reservationDates {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ==========================================================
   SMALL VISUAL IMPROVEMENTS
   ========================================================== */

table{
    border-collapse:collapse;
}

th,
td{
    transition:background .15s ease;
}

.availabilityDashboard .availabilityItem .btn,
.btn-success{
    cursor:pointer;
}

.availabilityDashboard .availabilityItem .btn:disabled,
.btn-success:disabled{
    opacity:.65;
    cursor:not-allowed;
}

.reserved,
.unreservable,
.pasttime{
    transition:background .15s ease;
}
.legend{
color: #fff;
}