/* ------------------------------
   RESET / BASE STYLES
------------------------------ */
*,
*::before,
*::after {
  /* box-sizing: border-box; */
  margin: 0;
  padding: 0;
  font-family: inherit;
}


:root {
  /* 🎨 COLORS */
  --color-orange: #F26419;           /* LOGS orange for text */
  --color-yellow-orange: #FFA41C;
  --color-white: #ffffff;
  --color-tiny-gray: #949494;
  --color-black-fade: #363740;
  --color-dark-purple: #2a0752;
  --color-fuschia: #c83cb9;
  --color-violet: #7f3052;
  --bg-body: #edeef4;
  --color-pink: pink;

  /* 🧯 Status Colors */
  --color-red: red;
  --color-cancel-red: #DC401D;
  --color-dark-red: #c42525;
  --color-asparagus: #87a96b;
  --color-earth-green: #34A56F;
  --color-green: #379747;
  --color-bright-green: #29CC97;
  --color-yellow: #D4D921;
  --color-light-gold: #DAA520;
  --color-sienna: #E97451;
  --color-dark-blue: #1E0862;
  --color-red-orange: #CF4C03;
  --color-booked-blue: #449CC1;
  --color-burnt-umber: #8a3324;
  --color-purple: #b0306a;
  --color-cocoa-brown: #35281E;
  --color-brown: #6f4e37;
  --color-pending: #34495E;
  --color-pending-sale: #138D75;
  --color-pending-service: #72327d;
  --color-diagnostic: #52BE80;
  --color-blue: #6990E6;
  --color-black: #000000;

    /* Gradient */
  --gradient-ct: linear-gradient(#02a3dd, #6fceee, #e3f6fc);
  --color-ct-text: #022169;


  /* 🔤 FONTS */
  --font-base: 'Mulish', sans-serif;
  --font-heading: sans-serif;


  /* 📐 SPACING / MARGINS */
  --spacing-7px: 7px;       /* lil boop */
  --spacing-15px: 15px;     /* casual chill */
  --spacing-37px: 37px;     /* what the heck, but iconic */


  /* 🧲 CENTERING */
  --ml-auto: auto;
  --mr-0: 0;


  /* 🌈 BORDER RADIUS */
  --border-radius: 12px;


  /* 🔠 FONT SIZES */
  --font-size-h1: 100px;
  --font-size-base: 1rem;
  --font-size-md: 0.9375rem; /* 15px */
  --font-size-sm: 0.875rem;  /* 14px */
  --font-size-xs: 0.75rem;   /* 12px */
}



html {
  font-family: var(--font-base);
}

body {
  background-color: var(--bg-body);
}




/* -------------------------------------- */
/* -------------- GENERAL --------------- */
h1 {
  font-family: var(--font-heading);
  font-size: var(--font-size-h1);
  text-align: center;
  color: var(--color-pink);
}

.bold {
  font-weight: bold;
}

.pointer {
  cursor: pointer !important;
}

.curved-border {
  border-radius: var(--border-radius);
}



/* ------------------------------------- */
/* --------------- COLORS -------------- */


.white {
  color: var(--color-white) !important;
}

.bg-yellow {
  background-color: #d8d034 !important;
}

.black-fade {
  background-color: var(--color-black-fade) !important;
  opacity: 0.9;
}

.dark-purple {
  background-color: var(--color-dark-purple) !important;
}

.orange {
  color: var(--color-orange) !important;
}

.orange-background {
  background-color: var(--bg-orange) !important;
}

.yellow-orange {
  color: var(--color-yellow-orange);
}

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

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

.tiny-gray {
  color: var(--color-tiny-gray);
}

.bg-gray {
  background-color: var(--color-tiny-gray) !important;
}

.bg-red {
  background-color: var(--color-red) !important;
}


/* Status buttons */
.cancel-red {
  background-color: var(--color-cancel-red) !important;
}


.red {
  color: var(--color-red);
}

.dark-red {
  background-color: var(--color-dark-red);
}

.dark-red-color {
  color: var(--color-dark-red);
}

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

.earth-green {
  background-color: var(--color-earth-green);
}

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

.bright-green {
  background-color: var(--color-bright-green) !important;
}

.yellow {
  background-color: var(--color-yellow);
}

.bg-light-gold {
  background-color: var(--color-light-gold) !important;
}

.light-gold-color {
  color: var(--color-light-gold);
}

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

.dark-blue {
  background-color: var(--color-dark-blue);
}

.red-orange {
  background-color: var(--color-red-orange);
}

.booked_blue {
  background-color: var(--color-booked-blue);
}

.burnt-umber {
  background-color: var(--color-burnt-umber);
}

.purple {
  background-color: var(--color-purple);
}

.cocoa-brown {
  background-color: var(--color-cocoa-brown);

}

.bg-cocoa-brown {
  background-color: var(--color-cocoa-brown) !important;
}

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

.pending {
  background-color: var(--color-pending);
}

.pending-sale {
  background-color: var(--color-pending-sale);
}

.pending-service {
  background-color: var(--color-pending-service);
}

.diagnostic {
  background-color: var(--color-diagnostic);
}

.blue {
  color: var(--color-blue);
}

.black {
  color: var(--color-black) !important;
}

#ct-color {
  background-image: var(--gradient-ct);
  color: var(--color-ct-text);
}


/* -------------------------------------- */
/* -------------- MARGINS --------------- */
/* Margin Top */
.mt-auto { margin-top: auto !important; }
.mt-0    { margin-top: 0px !important; }
.mt-1    { margin-top: 1px !important; }
.mt-2    { margin-top: 2px !important; }
.mt-3    { margin-top: 3px !important; }
.mt-5    { margin-top: 5px !important; }
.mt-6    { margin-top: 6px !important; }
.mt-7    { margin-top: 7px !important; }
.mt-9    { margin-top: 9px !important; }
.mt-10   { margin-top: 10px !important; }
.mt-15   { margin-top: 15px !important; }
.mt-20   { margin-top: 20px !important; }
.mt-30   { margin-top: 30px !important; }
.mt-37   { margin-top: 37px !important; }
.mt-40   { margin-top: 40px !important; }

/* Margin Bottom */
.mb-1    { margin-bottom: 1px !important; }
.mb-2    { margin-bottom: 2px !important; }
.mb-3    { margin-bottom: 3px !important; }
.mb-5    { margin-bottom: 5px !important; }
.mb-7    { margin-bottom: 7px !important; }
.mb-10   { margin-bottom: 10px !important; }
.mb-15   { margin-bottom: 15px !important; }
.mb-20   { margin-bottom: 20px !important; }
.mb-30   { margin-bottom: 30px !important; }
.mb-40   { margin-bottom: 40px !important; }

/* Margin Left */
.ml-1    { margin-left: 1px !important; }
.ml-2    { margin-left: 2px !important; }
.ml-3    { margin-left: 3px !important; }
.ml-5    { margin-left: 5px !important; }
.ml-7    { margin-left: 7px !important; }
.ml-10   { margin-left: 10px !important; }
.ml-15   { margin-left: 15px !important; }
.ml-20   { margin-left: 20px !important; }
.ml-50   { margin-left: 50px !important; }

/* Margin Right */
.mr-2    { margin-right: 2px !important; }
.mr-3    { margin-right: 3px !important; }
.mr-5    { margin-right: 5px !important; }
.mr-7    { margin-right: 7px !important; }
.mr-15   { margin-right: 15px !important; }
.mr-20   { margin-right: 20px !important; }
.mr-30   { margin-right: 30px !important; }


/* Horizontal and Vertical Margin Shortcuts */
.mx-7    { margin-left: 7px; margin-right: 7px; } /* horizontal shortcut */
.mx-10   { margin-left: 10px; margin-right: 10px; } /* horizontal shortcut */
.my-5    { margin-top: 5px; margin-bottom: 5px; } /* vertical shortcut */
.my-10   { margin-top: 10px; margin-bottom: 10px; } /* vertical shortcut */

/* Generic margin reset */
.m-0     { margin: 0 !important; }
.mt-0    { margin-top: 0 !important; }
.mb-0    { margin-bottom: 0 !important; }
.ml-0    { margin-left: 0 !important; }
.mr-0    { margin-right: 0 !important; }


.margin-left-140 {
  margin-left: -140px !important;
}

.margin-0 {
  margin-top: 0 !important;
}


/* -------------------------------------- */
/* -------------- PADDING --------------- */


/* Padding Top */
.pt-20   { padding-top: 20px; }


/* Padding Left */
.pl-5    { padding-left: 5px; }
.pl-8    { padding-left: 8px; }
.pl-15    { padding-left: 15px; }
.pl-30    { padding-left: 30px; }

/* Padding Right */
.pr-8    { padding-right: 8px; }
.pr-15    { padding-right: 15px; }

/* Full Padding */
.p-20    { padding: 20px !important; }
.p-7    { padding: 7px !important; }

/* Custom/Combined Padding */
.p-newsfeed {
  padding: 4px 0 1px 8px;
}



/* -------------------------------------- */
/* -------------- HEADINGS -------------- */


.big-heading {
  font-size: 130%;
  font-weight: bolder;
  color: var(--color-black-fade);
}


.medium-heading {
  font-size: 20px;
  color: #363740;
  font-weight: bold;
  padding-bottom: 5px;
  margin: 8px 0 1px 0;
}


/* -------------------------------------- */
/* --------------- MARKDOWN ------------- */

.markdown-styling {
  word-wrap: break-word !important;
}

.markdown-styling a {
  color: #6990E6;
}

.markdown-styling a:hover {
  border-bottom: 2px solid;
}

.link-styling:hover {
  border-bottom: 2px solid;
}



.markdown-styling > ul, .markdown-styling > ol {
  margin: 0 0 0 14px;
}


.markdown-styling p, .markdown-styling li, .markdown-styling h3, .markdown-styling h4, .markdown-styling h5, .markdown-styling h6, .markdown-styling h1 {
  margin: .75em 0px !important;
  white-space: pre-wrap;
  white-space: -moz-pre-wrap;
  white-space: -pre-wrap;
  white-space: -o-pre-wrap;
  padding-right: 5px;
  word-wrap: break-word;
}




/* -------------------------------------- */
/* ---------------- CARDS --------------- */
.object-field a {
  color: #6990E6;
}


.object-card {
  margin: 0 0 3px 0;
  padding: 10px;
  box-shadow: 3px 3px 7px 1px #E7E8E8;
  border: 1px solid #DFE0EB;
}


.secondary-card {
  padding: 0 0 0 20px;
}



.darken-on-hover:hover {
  background-color: #CCCCCC !important;

}
.item-list {
  display: flex;
  flex-direction: column;
  gap: 3px;
}


.item-card {
  border: solid 1px #e2e0de;
  border-radius: 6px;
  padding: 10px;
}


.item-card-details {
  display: flex;
  gap: 0 7px;
}


.item-img-container {
  border-radius: 20px;
  width: 38px;
  height: 38px;
  padding-top: 3px;
}

.item-img-container img {
  max-width: 38px;
  max-height: 38px;
  border-radius: 20px;
}



/* -------------------------------------- */
/* --------------- BUTTONS -------------- */

button:focus {
  outline: none;
}

.main-button {
  background-color: #29CC97;
  color: #ffffff;
  border: none;
  width: 100%;
  height: 35px;
  border-radius: 4px;
  font-size: 15px;
  text-align: center;
  cursor: pointer;
  margin-bottom: 5px;
}



.location-submit {
  background-color: white;
  color: #6c6e7a;
  border: 1px solid #b2b3ba;
  width: 100%;
  height: 40px;
  margin-bottom: 10px;
  border-radius: 4px;
  font-size: 15px;
}


.location-cancel {
  background-color: #DC401D;
  color: #ffffff;
  border: none;
  width: 100%;
  height: 40px;
  padding: 0 20px 0 20px;
  border-radius: 4px;
  font-size: 15px;
  cursor: pointer;
  margin-top: 2px;
}

.cancel {
  background-color: #DC401D;
  color: #ffffff;
  border: none;
  width: 100%;
  height: 35px;
  border-radius: 4px;
  font-size: 15px;
  text-align: center;
  cursor: pointer;
}


.yes-button2 {
  border: none;
  color: white;
  background-color: #29CC97;
  font-size: 18px !important;
}

.yes-button {
  margin: 0 auto;
  width: 100px;
  background-color: #29CC97;
  padding: 5px;
  color: white;
  border-radius: 4px;
  font-size: 15px;
  text-align: center;
}

.form-yes-button {
  margin: 0 auto;
  width: 100px;
  background-color: #29CC97;
  font-size: 15px;
  border-radius: 4px;
  border: none;
  color: #ffffff;
}


.no-button {
  margin: 0 auto;
  width: 100px;
  background-color: red;
  padding: 5px;
  color: white;
  border-radius: 4px;
  font-size: 15px;
  text-align: center;

}

.action-button {
  display: inline-block;
  padding: 6px 12px 8px 12px;
  font-size: 12px;
  border-radius: 4px;
  background-color: #F26419;
  border: none;
  color: #ffffff;
  margin: 0 5px;
  cursor: pointer;
}


.cartobuy-status {
  padding: 6px 12px 8px 12px;
  font-size: 12px;
  border-radius: 12px;
  background-color: #F26419;
  border: none;
  color: #ffffff;
  width: 41px;
}

.delete-button {
  padding: 6px 20px 8px 12px;
  font-size: 12px;
  border-radius: 4px;
  background-color: red;
  border: none;
  color: #ffffff;

}

.perform-button {
  font-size: 15px;
  border-radius: 4px;
  background-color: #F26419;
  border: none;
  color: #ffffff;
  width: 100%;
  height: 35px;
  text-align: center;
  margin-bottom: 5px;
  cursor: pointer;
  vertical-align: middle !important;
}


.form-button {
  padding: 7px 11px 7px 11px;
  font-size: 12px;
  border-radius: 4px;
  background-color: #F26419;
  border: none;
  color: #ffffff;
}


.upload-button {
  padding: 6px 20px 8px 12px;
  font-size: 12px;
  border-radius: 4px;
  background-color: #F26419;
  border: none;
  color: #ffffff;
  width: 60px;
}

.action-button a, .edit-booking-button a {
  color: #ffffff;
}

.edit-booking-button {
  padding: 8px 20px 8px 12px;
  font-size: 12px;
  border-radius: 4px;
  background-color: #F26419;
  border: none;
  color: #ffffff;
  margin: 0 auto;
  text-align: center;
  width: 41px;

}


.cancel-box {
  margin: 8px;
  padding: 10px;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  border-radius: 8px;
  padding: 20px;
  border: 1px solid red;

}


.edit-return-button {
  background-color: #7f3052 !important;
}


.button-text {
  padding-left: 7px;
  font-family: 'Mulish', sans-serif !important;
  font-weight: 300 !important;
  color: white;
}

.car-profile-button {
  background-color: #29CC97;
  color: #ffffff;
  border: none;
  width: 100%;
  height: 35px;
  border-radius: 4px;
  font-size: 15px;
  text-align: center;
  cursor: pointer;
  margin-bottom: 5px;
}

.private-button {
  color: #949494;
  border: none;
  width: 100%;
  height: 35px;
  border-radius: 4px;
  font-size: 15px;
  text-align: center;
  margin-bottom: 5px;
}

.gallery-button {
  padding: 6px 20px 8px 12px;
  font-size: 12px;
  border-radius: 4px;
  background-color: #F26419;
  border: none;
  color: #ffffff;
  width: 50%;
  text-align: center;
}

.add-service-button {
  background-color: #29CC97;
  color: #ffffff;
  border: none;
  width: 100%;
  height: 30px;
  margin-bottom: 10px;
  border-radius: 4px;
  font-size: 15px;
  cursor: pointer;
  text-align: center;
  padding-top: 10px;

}


.pickup-button {
  background-color: #29CC97;
  color: #ffffff;
  border: none;
  width: 80px;
  height: 30px;
  border-radius: 4px;
  font-size: 12px;
  text-align: center;
  margin-left: 35%;
  margin-right: 30%;
  cursor: pointer;
}


.return-button {
  background-color: #7f3052;
  color: #ffffff;
  border: none;
  width: 80px;
  height: 30px;
  border-radius: 4px;
  font-size: 12px;
  text-align: center;
  margin-left: 35%;
  margin-right: 30%;
  cursor: pointer;

}

.edit-profile-button {
  background-color: white;
  color: #363740;
  border: 1px solid #cacaca;
  width: 100%;
  height: 20px;
  border-radius: 4px;
  font-size: 15px;
  text-align: center;
  margin-top: 7px;
  cursor: pointer;
  padding: 7px 0;
}

.edit-profile-button a, .edit-profile-button a:visited {
  color: #363740 !important;

}


.status-button {
  font-family: 'Mulish', sans-serif;
  box-sizing: border-box;
  padding: 4px 9px 4px 9px;
  border-radius: 6px;
  border: none;
  color: #ffffff;
  font-size: 12px;
  width: auto;
}

.car-tracker-button {
  font-family: 'Mulish', sans-serif;
  padding: 4px 9px 4px 9px;
  border-radius: 6px;
  color: #ffffff;
  font-size: 12px;
  width: auto;
  margin-right: 3px;
}

.shopping-status-button {
  font-family: 'Mulish', sans-serif;
  box-sizing: border-box;
  padding: 3px 9px 4px 9px;
  border-radius: 6px;
  border: none;
  color: #ffffff;
  font-size: 12px;
  width: 98px;
  cursor: pointer;

}





/* -------------------------------------- */
/* -------------- POSITION -------------- */

.flex {
  display: flex;
}


.half-width {
  flex-basis: 50%;
}

.flex-55 {
  flex-basis: 55%;
}


.width-55 {
  width: 55%;
}


.align-bottom {
  vertical-align: bottom;
}

.align-right {
  margin-right: 0;
  margin-left: auto;
}

.meta-line {
  display: flex;
  flex-wrap: wrap;
  gap: 0 3px;

}

.meta-item {
  white-space: nowrap;
}



/* -------------------------------------- */
/* -------------- GENERAL --------------- */

.mulish {
  font-family: 'Mulish', sans-serif;
}

.mulish-regular {
  font-family: 'Mulish', sans-serif !important;
  font-weight: normal;

}

/* ---------------------------------------- */
/* -------------- FONT SIZE --------------- */


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

.font-14 {
 font-size: 14px;
}

.font-14b {
 font-size: 14px;
  font-weight: bold;
}

.font-16 {
  font-size: 17px;
}

.font-90 {
  font-size: 90%;
}

.font-110 {
  font-size: 110%;
}

.font-120 {
  font-size: 120%;
}



/* ------------------------------------ */
/* -------------- LINKS --------------- */

a {
  text-decoration: none;
  cursor: pointer;
}


a.disabled {
  pointer-events: none !important;
  color: #282930 !important;
}


a.top-nav-disabled {
  pointer-events: none !important;
  color: white !important;

}

a:hover {
  cursor: pointer;
}



.underline a {
  border-bottom: 3px solid #F26419 !important;
}


/* ------------------------------------ */
/* -------------- HOVER --------------- */


.gray-on-hover:hover {
  background-color: #6c6e7a20;
}

.zoom-on-hover {
   -webkit-transition: all .12s ease;
}

.zoom-on-hover:hover {
    -webkit-transform:scale(1.1);
}

.zoom-on-hover2:hover {
  -webkit-transform:scale(1.15);
}

.blue-on-hover:hover {
  color: var(--color-blue) !important;
}


/* ---------------------------------------------- */
/* -------------- FORM AND INPUTS --------------- */

.form {
  width: 100%;
}


label {
  font-family: 'Mulish', sans-serif;
  font-size: 12px;
  color: #767676;

}


.input_label {
  padding-bottom: 5px;
}


.border-box input {
  box-sizing: border-box;
}


input[type=text] {
  font-size: 100% !important;
}


input[type=submit] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}


input[type=checkbox] {
  width: 15px;
  height: 15px;
}


input[type=text]:focus, select:focus, input[type=date]:focus, input:focus, textarea:focus {
  /* background-color: #ffffff !important; removed coz it's causing a button to disappear */
  outline: none;
}


input[type="password"] {
  font-size: 13px;
  background-color: white;
  color: black;
  padding: 0;
  margin: 0;
  font-weight: 500;
}


input[type="text"] {
  font-size: 13px;
  background-color: white;
  color: black;
  padding: 0;
  margin: 0;
  font-weight: 500;
  width: 100%;
}


input::placeholder {
  font-size: 16px;
}

.review-input input {
  font-size: 13px;
  background-color: white;
  color: black;
  padding: 0;
  margin: 0;
  font-weight: 500;
  width: 100%;
  box-sizing: border-box;

}


input[type="number"] {
  width: 100%;
}


.change-password input[type="password"] {
  width: 100%;
  box-sizing: border-box;
}


.input input {
  padding-left: 10px;
  font-family: 'Mulish', sans-serif !important;
  margin-bottom: 10px;
  border: 1px solid #b2b3ba;
  border-radius: 4px;
  height: 34px;

}


.gray-input input {
  color: #b2b3ba;
}


.profile_input input {
  padding-left: 10px;
  font-family: 'Mulish', sans-serif !important;
  margin-bottom: 10px;
  border: 1px solid #b2b3ba;
  border-radius: 4px;
  height: 34px;
  box-sizing: border-box;
}


select {
  width: 100%;
  margin-bottom: 10px;
  background-color: #ffffff;
  border: 1px solid #b2b3ba;
  border-radius: 4px;
  height: 35px;
  letter-spacing: 0.04em;
  padding-left: 10px;
}


[type="date"] {
  background:#fff url(https://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/calendar_2.png)  99.5% 50% no-repeat ;
  width: 100%;
  box-sizing: border-box;
}


[type="date"]::-webkit-inner-spin-button {
  display: none;
}


[type="date"]::-webkit-calendar-picker-indicator {
  opacity: 0;
}



/* ====================== FEATURES ====================== */
/* ====================================================== */

.announcement {
  border-radius: 7px;
  padding: 15px;
  font-size: 18px;
  background-color: rgba(242, 100, 25, 0.4); /* #F26419 with 40% opacity */
}


/* -------------------------------------- */
/* -------------- LIBRARY --------------- */
.library-img-wrapper {
  display: grid;
  gap: 15px;
  grid-template-columns: repeat(auto-fill, minmax(188px, 1fr));
}

.library-file-name {
  position: absolute;
  margin-left: 10px;
  top: 7px;
  left: 0;
  text-overflow: ellipsis !important;
  overflow-y: clip !important;
  width: 70%;
}

.library-img-container {
  height: 200px;
  width: 200px;
  background-color: #ffffff;
  box-shadow: 0 0 25px rgba(0, 0, 0, 0.25);
  border-radius: 8px;
  position: relative;
  cursor: pointer;
}

.library-img-container img {
  width: 90%;
  height: 80%;
  position: absolute;
  margin: auto;
  left: 0;
  right: 0;
  top: 25px;
  bottom: 0;
  cursor: pointer;
}


.library-img-container input[type="radio"] {
  -webkit-appearance: none;
  width: 100%;
  cursor: pointer;
  right: 5px;
  margin-left: 90%;
}

.library-img-container input[type="radio"]:after {
  position: absolute;
  font-family: "Font Awesome 5 Free";
  content: "\f111";
  font-size: 18px;
  color: #b2b3ba;
  right: 10px;
  top: 5px;
}

.library-img-container input[type="radio"]:checked:after {
  font-weight: 900;
  content: "\f058";
  color: #478bfb;
}



.upload-gallery-img {
  height: 90px;
  min-width: 120px;
  cursor: pointer;
  margin: 4px;
}

.upload-thumbnail {
  height: 45px;
  min-width: 45px;
  cursor: pointer;
  margin: 4px;

}

.upload-thumbnail img, .upload-gallery-img img {
  width: 100%;
  height: 100%;
  margin: auto;
  cursor: pointer;
  border-radius: 4px;
}


#media-library {
  overflow-y: scroll;
}

.file-select {
  flex-basis: 50%;
  margin-left: 7px !important;
}

.upload-flag {
  position: relative;
  top: -30px;
  right: 0;
  left: auto;
  max-width: 160px;
  height: 30px;
  background: white;
  opacity: 0.4;
  text-align: center;
}

.upload-flag-text {
  font-weight: 800;
}


.upload-file-field {
  width: 100%;
}

.upload-file-field input::file-selector-button {
  padding: 6px 20px 8px 12px;
  font-size: 12px;
  border-radius: 4px;
  background-color: #F26419;
  border: none;
  color: #ffffff;
  width: 112px;
  text-transform: uppercase;
}

.upload-file-field input {
  width: 98%;
}



/* ======================= SLIDERS ====================== */
/* ====================================================== */



/* === SLIDER TRACK === */
input[type=range] {
  -webkit-appearance: none;
  appearance: none;
  width: 95% !important;
  height: 6px !important;
  background: transparent;
  border-radius: 4px;
  outline: none;
  position: relative;
  z-index: 1;
  overflow: visible;
  --progress: 50%;
}

/* Chrome/Edge/Safari Track with dynamic active fill */
input[type=range]::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 4px;
  background: linear-gradient(
    to right,
    #29CC97 0%,
    #29CC97 var(--progress),
    #ddd var(--progress),
    #ddd 100%
  );
  transition: background 0.3s ease-in-out;
}

/* Firefox Track */
input[type=range]::-moz-range-track {
  height: 6px;
  background: #ddd;
  border-radius: 4px;
}

/* === SLIDER THUMB (CHONKY RADIO KNOB STYLE) === */

/* Chrome / Safari */
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 26px !important;
  height: 38px !important;
  border-radius: 4px;
  background:
    linear-gradient(
      to bottom,
      transparent 20%,
      #F26419 20%,
      #F26419 80%,
      transparent 80%
    ),
    linear-gradient(
      to bottom,
      transparent 20%,
      #F26419 20%,
      #F26419 80%,
      transparent 80%
    ),
    #ffffff;
  background-repeat: no-repeat;
  background-position: 6px center, 14px center;
  background-size: 2px 70%;
  cursor: pointer;
  border: 2px solid #F26419;
  box-shadow: 0 0 2px #00000088;
  transition: background 0.2s;
  position: relative;
  z-index: 2;
  margin-top: -16px;
}

/* Firefox Thumb */
input[type=range]::-moz-range-thumb {
  width: 26px !important;
  height: 38px !important;
  border-radius: 4px;
  background:
    linear-gradient(
      to bottom,
      transparent 20%,
      #F26419 20%,
      #F26419 80%,
      transparent 80%
    ),
    linear-gradient(
      to bottom,
      transparent 20%,
      #F26419 20%,
      #F26419 80%,
      transparent 80%
    ),
    #ffffff;
  background-repeat: no-repeat;
  background-position: 6px center, 14px center;
  background-size: 2px 70%;
  cursor: pointer;
  border: 2px solid #F26419;
  box-shadow: 0 0 2px #00000088;
}

/* === RANGE VALUE LABEL === */
.range-value {
  font-size: 14px;
  font-weight: bold;
  margin-left: 10px;
  color: #29CC97;
}

/* Optional: Label on the left */
.range-label {
  font-size: 14px;
  font-weight: bold;
  color: #999;
  width: 24px;
  text-align: right;
}

/* Wrapper spacing */
.slider-wrapper, .slider-inner, {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  position: relative;
  overflow: visible;
  width: 100%;
  overflow: visible;
}


/* POOL TOGGLE */

.pool-switch {
  position: relative;
  display: inline-block;
  width: 98%;
  height: 35px;
}


.pool-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.pool-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: 0.4s;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: sans-serif;
  color: white;
  font-size: 14px;
  border: 2px orange solid;
}


.pool-slider::before {
  content: "";
  position: absolute;
  height: 24px;
  width: 24px;
  left: 5px;
  top: 3px;
  bottom: 2px;
  background-color: white;
  border-radius: 50%;
  transition: transform 0.4s;
  z-index: 2;
  transition: left 0.5s ease-in-out;

}


.pool-toggle:checked + .pool-slider {
  background-color: #FFA94D	 !important;
}

.pool-slider::after {
  content: "POOL CLOSED";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  transition: opacity 0.4s;
}

.pool-toggle:checked + .pool-slider::after {
  content: "POOL OPEN";
}


.pool-toggle:checked + .pool-slider::before {
  left: calc(100% - 28px);
  transition: left 0.5s ease-in-out;
}



/* Rounded sliders */
.pool-slider.round {
  border-radius: 34px;
}

.pool-slider.round:before {
  border-radius: 50%;
}




/* --------------------------------------- */
/* -------------- SHOPPING --------------- */

.shopping-list-box {
  display: inline !important;
  margin: 12px 4px;
}


.div-link { /* For divs that are links that also contain other links*/
  position: relative;
}

.relative-link a { /* For divs that contain inner links*/
  position: relative;
  z-index: 1;
}

.icon-container {
  width: 20px;
  padding-left: 5px;
}






.login-bg {
  background-color: #121412;
}


.nav-items > div {
  margin-left: 45px;
}

.disabled-icon {
  pointer-events: none;
  color: black !important;
}


#user-options {
  color: #f2efef;
}


.messages {
  font-family: 'Mulish', sans-serif;
  color: red;
  padding-bottom: 5px;
}

.messages ul {
  list-style-type: none;
  word-wrap: break-word;
}

.messages ul li {
  white-space: pre-wrap;
  white-space: -moz-pre-wrap;
  white-space: -pre-wrap;
  white-space: -o-pre-wrap;
  padding-right: 5px;
  word-wrap: break-word;
}






/* The sidebar menu */


.logo-name-div {
  width: 80%;
  color: #A4A6B3;
  font-family: 'Mulish', sans-serif;
}

.logo1 {
  width: 30%;
}

.name1 {
  width: 70%;
  padding: 10px 0 0 10px;
}

.nav-item-bg {
  background-color: #212529;
  line-height: 45px;
}

.nav-item-bg:hover {
  background-color: #28282B;
}

.divbg:hover {
  background-color: #5b5d66;
}

.side-navitem {
  padding-left: 15px;
}

.sidenav {
  height: 100%; /* Full-height: remove this if you want "auto" height */
  width: 230px; /* Set the width of the sidebar */
  position: fixed; /* Fixed Sidebar (stay in place on scroll) */
  z-index: 1; /* Stay on top */
  top: 0; /* Stay at the top */
  left: 0;
  background-color: #212529;
  overflow-x: hidden; /* Disable horizontal scroll */
  padding: 20px 0 0 30px;
}

/* The navigation menu links */
.sidenav a {
  text-decoration: none;
  font-size: 16px;
  color: #A4A6B3;
  display: block;
  font-family: 'Mulish', sans-serif;
}

.menu-items a {
  padding: 0 0 4% 8%;
  text-decoration: none;
  font-size: 130%;
  color: #A4A6B3;
  display: block;
  font-family: 'Mulish', sans-serif;

}


/* When you mouse over the navigation links, change their color */
.sidenav a:hover, .menu-items a:hover {
  color: #DDE2FF;
}

.menu-items {
  height: 100%; /* Full-height: remove this if you want "auto" height */
  width: 100%; /* Set the width of the sidebar */
  background-color: #363740; /* Black */
  padding: 20px 0 60px 0 !important;
}





/* The topnav menu */
.topnav {
  width: 100%;
  z-index: 2;
  margin-top: 30px;
}


.page-title {
  padding-left: 20px;
  flex-basis: 20%;
  font-size: 26px;
  width: auto;
  font-weight: bold;
  color: #363740;
  font-family: 'Mulish', sans-serif;
}


.nav-items {
  margin-right: 60px;
  font-size: 25px !important;
  display: flex;
  float: right;
  margin-left: auto;
  padding-right: 10px;
}





.nav-user {
  right: 0px;
  display: flex;
  margin: 0 10px 0 60px;

}

.nav-user-name {
  flex-basis: 40%;
  font-family: 'Mulish', sans-serif;
  font-size: 15px;
  font-weight: bold;
  margin-left: 5px;
  margin-top: 4px;
}



.user-dp-small {
  padding-right: 5px;
  text-align: center;
  display: block;
}

.user-dp-small img {
  width: 33px;
  height: 33px;
  border-radius: 50%;
}


#user-options {
  background-color: #ffffff;
  border: 1px solid #DFE0EB;
  width: 180px;
  position: absolute;
  top: 70px;
  right: 20px;
  z-index: 10;
  display: none;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  border-radius: 8px;
}

#user-options a {
  text-decoration: none;
  color: #363740;
}


#notifications {
  background-color: #ffffff;
  border: 1px solid #DFE0EB;
  max-width: 340px;
  position: absolute;
  top: 70px;
  right: 15px;
  z-index: 10;
  display: none;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  border-radius: 8px;
}

#view-notifications {
  font-size: 65%;
  padding-left: 25%;
}

#view-notifications a {
  color: blue;
}

.notification-title {
  padding: 8px 0 0 10px;
  font-size: 26px;
  font-weight: bold;
  color: #363740;
  font-family: 'Mulish', sans-serif;
  margin-bottom: 15px;

}

.user-option-bg {
  padding: 10px;
  line-height: 15px;
  font-family: 'Mulish', sans-serif;
  font-size: 13px;
}

.user-options-divider {
  height: 0.5px;
  width: 160px;
  margin-left: 10px;
  margin-right: 10px;
  padding-top: 0px;
  background-color: #DFE0EB;
}

/* Login */
.login-wrapper {
  margin: 0 auto;
  position: relative;
  top: 90px;
  padding: 0px;
  border: none;
  text-align: center;
  width: 100%;

}

.login-div {
  background-color: #ffffff;
  margin: 0 auto;
  width: 400px;
  height: 450px;
  border-radius: 10px;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25), inset 0px 4px 4px rgba(0, 0, 0, 0.25);

}

.login-form {
  position: relative;
  top: 14%;
}

.login-logo {
  padding-bottom: 30px;
}

.username-field, .password-field {
  padding: 10px;
}

.login-div input[type=text], .login-div input[type="password"], .login-div input[type="email"], .login-div input  {
  padding: 10px;
  border: 1px solid #1b1e1b;
  background-color: #ffffff;
  border-radius: 4px;
  width: 60%;
  height: 20px;
  margin-bottom: 10px;
  font-size: 85% !important;
}


.login-div input[type=text]:focus, .login-div input[type=password]:focus  {
  background-color: #ffffff !important;
  outline: none;
}

.login-submit input[type=submit]  {
  margin-top: 10px;
  background: linear-gradient(180deg, rgba(255, 218, 69, 0.78) 1.56%, rgba(242, 100, 25, 0.78) 99.99%, rgba(255, 218, 69, 0) 100%);
  filter: drop-shadow(0px 1px 1px rgba(0, 0, 0, 0.3));
  border: none;
  border-radius: 4px;
  width: 66%;
  height: 40px;
  font-family: 'Mulish', sans-serif;
  font-size: 14px;
  letter-spacing: 0.1em;
  color: #ffffff;
  cursor: pointer;
}

.forgot-password {
  margin-top: 10px;
  text-align: left !important;
  padding-left: 17%;
  font-family: 'Mulish', sans-serif;
  font-size: 14px;
}

.forgot-password a, .login-again a {
  color: #6990E6;
}

.login-again {
  text-align: center !important;
  margin-top: 20px;
  font-family: 'Mulish', sans-serif;
  font-size: 14px;
}

.logged-out {
  margin-bottom: 10px;
}
.password_reset_form {
  padding-top: 20%;
  font-family: 'Mulish', sans-serif;
  font-size: 16px;
}

.reset_form {
  padding: 20px 40px 20px 40px;
}

.login-error {
  width: 80%;
  margin: 0 auto;
  font-family: 'Mulish', sans-serif;
  font-size: 14px;
}

.qr {
  width: 60%;
  margin: 0 auto;
}

.qr-scan {
  padding: 18px 10px 10px 10px;
  font-family: 'Mulish', sans-serif;
  font-size: 14px;
}


.no-image {
  width: 187px;
  height: 140px;

}

.car-profile-icon {
  width: 25px;
  text-align: center;
}



/* Responsiveness */
@media only screen and (max-width: 1190px) {

    .game-car-img {
      width: 250px !important;
    }

    .game-car-container {
      width: 250px !important;
      height: 180px !important;
    }

    .game-grid-container {
      display: block !important;
    }

    .game-buttons {
      width: 250px !important;
      margin: 20px 0 20px 0 !important
    }

    .wiki-container {
      margin-left: 0 !important;
    }

    .one-panel-main {
      margin: 20px 0 0 0;
    }

    #hide-blog-list {
      display: none;
    }

    .mobile-only {
      display: block !important;
    }

    .hide-on-mobile {
      display: none;
    }

    .non-mobile {
      display: none !important;
    }

    .topnav {
      left: 186px !important;
    }

    .page-title {
      flex-basis: 25% !important;
    }

    .content2 {
      display: none;
    }


    .one-panel-main {
      margin-left: 175px !important;
    }

    .main-container {
      width: 100% !important;
      min-width: 550px;
      margin: 0 auto !important;
      white-space: nowrap;
      overflow: auto !important;

    }

    .main-container-child {
      max-width: 90% !important;
      min-width: 30% !important;
      padding-bottom: 40px !important;
      width: 100% !important;
    }

    .wiki-container-child {
      min-width: 30% !important;
      padding-bottom: 40px !important;
    }
}





@media only screen and (max-width:650px) {
  .display-block {
    display: block !important;
  }


  .home-bookings-list {
    grid-template-columns: 1fr !important;
  }

  .weighting-list {
      grid-template-columns: repeat(2, 1fr);
  }

  .flex-column {
      flex-direction: column !important;
  }

  .flex-column div {
      width: 100% !important;
  }

  .users-list, .user-weighting-list {
      grid-template-columns: 50% 50%;
  }

  .user-weighting-page {
      margin-left: auto;
      margin-left: auto;
      margin-bottom: 10px;
      width: 70% !important;
  }

  .bigger-dp-user-weighting {
      border-radius: 10px;
      width: 100%;
      height: auto;
      margin-right: 10px;
      margin-bottom: 12px;
  }

  .bigger-dp-user-weighting img {
      width: 100%;
      height: auto;
      border-radius: 20px;
  }

  .user-icon {
      height: 90px !important;
  }

  .user-icon span {
      margin-top: 10px !important;
  }

  .private-car-toggle {
    margin-top: 7px !important;
  }

  .car-details-left {
    width: 50% !important;
  }

  .switch {
    height: 18px !important;
  }

  .slider {
    font-size: 11px;
  }

  .slider:before {
    height: 12px;
    width: 12px;
    left: 3.25px;
  }

  input:checked + .slider:before {
    top: 3px;
  }

  input:checked + .slider:before {
    -webkit-transform: translateX(172px);
    -ms-transform: translateX(172px);
    transform: translateX(172px);
  }

  .service-container {
    margin: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    padding-right: 1px;
    width: 100%;

  }

  .div-prompt {
    min-width: 320px;
  }

  .topnav {
    background-color: #363740;
    font-size: 110%;
    padding-bottom: 10px;
    margin-top: 12px !important;

  }

  .top-nav-button-div {
    padding-right: 20px;
  }

  .page-title {
    margin-top: 7px;
    padding-left: 15px;
    font-size: 18px;
    font-weight: normal;
    color: #A4A6B3 !important;
  }

  .nav-items {
    margin-right: 0;
  }

  .nav-items > div {
    margin-left: 30px;
  }

  .nav-user {
    margin: 0 0 0 22px;
  }

  .nav-user-name {
    display: none;
  }

  .user-dp-small img {
    vertical-align: top;
  }

  #notifications {
    font-size: 85%;
  }




  .name-and-model {
    margin-bottom: 5px !important;
  }

  .no-image {
    width: 133px !important;
  }

  .half-width {
    width: 50% important;
  }

  .div-prompt {
    min-width: unset; /* Removes the 400px minimum width */
    width: 200px !important;
    padding: 15px; /* Reduces padding slightly */
    background-color: yellow;
  }

  .car-profile-image img {
    height: 110px !important;
  }

  .car-overview-container {
    padding: 3px !important;
    width: 55% !important;
  }

  .car-overview {
    padding: 0 !important;
  }

  .rack-and-stack-title {
    font-size: 16px !important;
    padding-bottom: 0 !important;
  }

  .rack-and-stack-games {
    transform: scale(0.75);
    transform-origin: top center;
    padding-top: 40px;
  }

  .plates-container {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important;

  }

  .mobile-margin-top {
    margin-top: 6px !important;
  }

  .mobile-max-width {
    max-width: 80px;
  }

  .mobile-0-margin-right {
    margin-right: 0 !important;
  }

  .booking-line {
    margin-bottom: 7px;
  }

  .mobile-font14 {
    font-size: 14px !important;
  }

  .mobile-font12 {
    font-size: 12px;
  }

  .upload-file-field input {
    width: 205px;
  }

  #desirability-prompt {
    font-size: 13px !important;
    max-height: 100% !important;
    height: 660px !important;
    overflow-y: scroll !important;

  }

  #desirability-table td {
    white-space: pre-wrap;
    white-space: -moz-pre-wrap;
    white-space: -pre-wrap;
    white-space: -o-pre-wrap;
    word-wrap: break-word !important;
  }

  .small-screen {
      display: none !important;
  }

  .wiki-container {
      margin-right: 0 !important;
      margin-left: 3px !important;
  }

  .main, .one-panel-main {
      font-size: 85% !important;
  }

  .non-mobile {
      display: none !important;
  }

  .fc-right {
      margin-top: 10px;
  }

  .font-90 {
      font-size: 90% !important;
  }

  .font-10 {
      font-size: 10 !important;
  }

  #tier4-prompt, #premium-winter-prompt {
      position: fixed;
      margin: auto !important;
      left: 0 !important;
      top: 0 !important;
      right: 0 !important;
      bottom: 0 !important;
      max-height: 150px;
  }

  #delete_log {
      position: fixed;
      margin: auto !important;
      left: 0 !important;
      top: 0 !important;
      right: 0 !important;
      bottom: 0 !important;
      max-height: 150px;
  }

  #hide-blog-list {
      display: none;
  }

  .mobile-only {
      display: block !important;
  }

  .hide-on-mobile {
      display: none;
  }

  .past_bookings {
      margin-top: 2px !important;
  }

  .menu-items {
      display: block !important;
  }

  .users-list {
      grid-template-columns: none !important;
  }

  .service-number {
      display: inline !important;
  }

  .car-top-key {.wiki-container
      font-size: 110% !important;
  }

  .car-overview {
      margin-left: 7px;
      margin-top: 7px;
  }

  .main-top {
      display: flex !important;
  }

  .login-bg {
      background-color: #ffffff;
  }

  #login-wrapper{
    width: 100%;
  }

  .login-div {
    width: 100%;
    box-shadow: none;
  }

  body {
      background-color: #363740;
  }

  .sidenav {
      display: none;
  }

  .mobile-nav-items {
      text-align: right;
      float: right;
  }

  .content2 {
      display: none;
  }

  .main, .one-panel-main {
      margin-left: 0px !important;
      margin-top: 1% !important;
  }

  .main-container {
      width: 300% !important;
      min-width: 320px;
      margin: 0 !important;
      border-radius: 1px !important;
  }

  .main-container-child {
      padding: 5px 5% 120px 5% !important;
      overflow-y: scroll;
      overflow-x: hidden;
  }


  .wiki-container-child {
      padding: 20px 0 120px 0 !important;
  }


  .bottom-nav {
      display: block !important;
      overflow: hidden;
      position: fixed;
      padding: 3% 0 3% 10%;
      margin-right: 10%;
      bottom: 0;
      width: 100%;
      display: flex;
      background-color: #363740 !important;
      z-index: 1;
  }

  .bottom-nav > div {
      width: 25%;
      box-sizing: border-box;
  }


  .bottom {
      float: left;
      padding-right: 50px;
  }


  .bottom-nav a {
      color: #A4A6B3 !important;
      font-size: 150%;
      width: 100%;
  }


  .home-car-image {
      flex-basis: 45% !important;
  }

  .pickup-button {
      width: 60%:
  }

  .profile-nav > div {
      margin-right: 2% !important;
      font-size: 91%;
  }

  .profile-nav, .profile-nav-2 {
      font-size: 95% !important;
  }

  .booking-month, .booking-date, .booking-day {
      width: 100% !important;
  }

  .booking-date{
      font-size: 24px !important;
      line-height: 32px !important;
  }

  .booking-day {
      font-size: 13px !important;
  }

  .calendar-pickup {
      margin-left: 2% !important;
      margin-bottom: 3% !important;
  }

  .calendar-return {
      margin-bottom: 3% !important;
  }

  .password-guidelines div {
      white-space: pre-wrap;
      white-space: -moz-pre-wrap;
      white-space: -pre-wrap;
      white-space: -o-pre-wrap;
      word-wrap: break-word;
  }

  .profile-image {
      margin-left: 0 !important;
  }

  .main-profile-data {
      margin-left: 7px;
  }

  .float-right {
      margin-top: 0 !important;
  }

  .service_item_image {
      flex-basis: 30% !important;
  }

  .service-name-data {
      display: block !important;
  }

  .service-profile-buttons {
      padding: 0 !important;
  }

}





/* Style page content */
.main {
  margin-left: 260px; /* Same as the width of the sidebar */
  margin-top: 20px;
}

.one-panel-main {
  margin-top: 20px;
  margin-left: 241px;
}

.main-top {
  display: flex;
  background-color: #edeef4;
}

.menu-bg-color {
  display: flex;
  background-color: #212529;

}

.main-one-pane {
  background-color: #edeef4;
  width: 100%;
  min-height: 300px;
  position: relative;
  background-color: white;
  border: 1px solid #DFE0EB;
  margin-left: 2.4%;
  margin-right: 2.7%;
  border-radius: 10px;
  overflow: hidden;
  white-space: nowrap;
}

.main-container {
  width: 47%;
  min-height: 300px;
  position: relative;
  background-color: white;
  border: 1px solid #DFE0EB;
  margin-left: 2.4%;
  margin-right: 2.7%;
  border-radius: 10px;
  overflow: hidden;
  white-space: nowrap;
}

.main-container-home {
  padding: 5% 5% 4% 5%;
}


.main-container-child {
  padding: 5% 5% 4% 5%;
  min-height: 570px;
  display: flex;
  flex-direction: column;
  font-family: 'Mulish', sans-serif;
  z-index: -1;
  overflow-y: scroll;
}

.wiki-container-child {
  padding: 30px 10px 10px 20px;
  min-height: 570px;
  font-family: 'Mulish', sans-serif;
  z-index: -1;
}

.service-container {
  width: 98%;
  min-height: 700px;
  position: relative;
  background-color: white;
  border: 1px solid #DFE0EB;
  margin-left: 2.4%;
  margin-right: 2.4%;
  border-radius: 10px;
  overflow: hidden;
  white-space: nowrap;
}


.main-container-child::-webkit-scrollbar {
  width: 6px;               /* width of the entire scrollbar */
}

.main-container-child::-webkit-scrollbar-track {
  background-color: #ffffff;       /* color of the tracking area */
}

.main-container-child::-webkit-scrollbar-thumb {
  background-color: #DFE0EB;    /* color of the scroll thumb */
}

.wiki-container-child::-webkit-scrollbar {
  width: 6px;               /* width of the entire scrollbar */
}

.wiki-container-child::-webkit-scrollbar-track {
  background-color: #ffffff;       /* color of the tracking area */
}

.wiki-container-child::-webkit-scrollbar-thumb {
  background-color: #DFE0EB;    /* color of the scroll thumb */
}

.fc {
  font-family: 'Mulish', sans-serif;
}

.fc-more, .fc-day-number {
  color: #6990E6;
}

.content2 {
  width: 47%;
  background-color: white;
  border: 1px solid #DFE0EB;
  margin-right: 2.5%;
  border-radius: 10px;
  padding: 25px;
}



/* Style home */

.no-bookings {
  padding-bottom: 175px;
}

.home-booking {
  width: 100%;
  margin: 0 auto;
}


.home-booking div {
  font-family: 'Mulish', sans-serif;

}


.current-booking {
  display: flex;
  margin: 0;
}


.main-container-title {
  font-size: 100%;
  font-family: 'Mulish', sans-serif;
  font-weight: bolder;
  color: #363740;

}




.main-container-title a, .main-container-title a:visited {
  color: #6990E6 !important;
}


.current-booking-edit {
  margin-top: -8px;
  padding-top: 0;
  padding-left: 15px;
  font-family: 'Mulish', sans-serif;
}




.view-all {
  vertical-align: middle;
  position: relative;
  text-align: right;
  font-size: 12px;

}

.view-all a {
  text-decoration: none;
  color: #6990E6;
}

.view-all-padding {
  margin-bottom: 20px;
}


.border-bottom {
  margin: -5px 0 8px 0;
  border-bottom: 1px solid #87888e;
  box-shadow: 0 4px 2px -2px #d2d2d8;

}


/* border-bottom: 1px solid #87888e;
box-shadow: 0 4px 2px -2px #d2d2d8; */

.edit-pen {
  color: #F26419;
  padding-left: 8px;
}


.calendar-pickup {
  width: 60%;
  margin: 1% 0 5% 5%;

}

.calendar-return {
  width: 60%;
  margin: 1% 0 5% 5%;
}

.calendar-container {
  box-sizing: border-box;
  padding-top: 0;
  border: 1px solid #CACACA;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  border-radius: 8px;


}

.booking-month, .booking-date, .booking-day {
  width: 90%;
}

.booking-month {
  position: relative;
  top: 0px;
  background-color: #DC401D;
  border-radius: 8px 8px 0px 0px;
  text-align: center;
  line-height: 24px;
  color: #ffffff;
  text-transform: uppercase;
}

.booking-date {
  background-color: white;
  padding-top: 2px;
  font-size: 28px;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  text-align: center;
  line-height: 38px;

}

.booking-day {
  background-color: white;
  border-radius: 0px 0px 4px 4px;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  text-align: center;
  padding-top: 0;
  margin-top: 0;
  padding-bottom: 5px;
}

.home-pickup {
  padding: 0;
}

/* View all bookings */
.past_bookings {
  margin-top: 10px;
}


/* Style booking */
.booking_form {
  position: relative;
  width: auto;
}


/* Style Password */
.password-guidelines {
  font-family: 'Mulish', sans-serif;
  font-size: 15px;
}


/* Style Cars */

.car-profile-name {
  font-size: 110%;
  margin: 0 5px 3px 0px;
}


.icon-container {
  position: relative;
  display: inline-block;
}


.snowflake-slash {
  position: absolute;
  top: 0;
  left: 3px;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, transparent 47%, red 45%, red 55%, transparent 51%);
  z-index: 2; /* Ensure it's on top of the icon */
  pointer-events: none; /* Avoid interaction issues */
}


.carwash-slash {
  position: absolute;
  top: 0;
  left: 3px;;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, transparent 47%, red 45%, red 55%, transparent 51%);
  z-index: 2; /* Ensure it's on top of the icon */
  pointer-events: none; /* Avoid interaction issues */
}


.car-overview-container {
  margin-left: 5px;
  border: 2px solid orange;
  border-radius: 7px;
  width: 60%;
  margin-right: auto;
  padding: 10px 10px 0 10px;
  flex: 1;
}

.car-overview {
  margin: 0 auto;
  max-width: 400px;
}

.car-year-make-model {
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-left: 4px;
}



.yr-make-model {
  width: 85%;
}


.car-profile {
  display: flex;
  width: 100%;
}

.car-profile-image {
  padding: 0px;
}


.car-profile-image img {
  height: 140px;
  margin: 0 auto;
  border-radius: 8px;
}


.car-profile-data {
  width: 80%;
  padding-left: 15px;
  display: flex;
}


.car-profile-data div {
  width: 50%;
}


.car-top-key {
  font-size: 90%;
  color: #6c6e7a;
}

.service-number {
  display: block;
}


.warnings {
  margin: 10px;
  padding: 10px;
  border: 2px dashed red;
  font-size: 90%;
  box-shadow: 3px 3px 7px 1px #E7E8E8;
}


.tips-editor {
  margin-top: 5px;
  padding-bottom: -45px;
  margin-bottom: -40px;
}

.tips-editor a {
  color: #6990E6;

}

.tips-editor li {
  margin: -25px 0 -10px 20px;
  padding: -20px 0 -20px 0;


}

.tips-editor > ul {
  margin: -40px 0 -2px 0 !important;
}

.tips-editor > ol {
  margin: -40px 0 -2px 0 !important;
}

.tips-editor p, .tips-editor address, .tips-editor hr {
  margin: -35px 0 0px 0 !important;
}

.tips-editor h1, .tips-editor h2, .tips-editor h3, .tips-editor h4, .tips-editor h5, .tips-editor h6 {
  margin-top: -40px;
}

#desirability-prompt, #attainability-prompt {
  font-size: 16px;
  position: fixed;
  margin: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 620px;
  max-width: 730px;
  padding: 8px 11px 5px 5px;
  background-color: white;
  border: 1px solid #DFE0EB;
  border-radius: 8px;
  text-wrap: wrap;
}

#attainability-prompt {
  height: 370px !important;

}


#tier4-prompt, #delete_log, #logistics-only, #premium-winter-prompt {
  position: fixed;
  margin: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  max-height: 150px;
  max-width: 300px;
  padding: 5px 30px 30px 30px;
  background-color: white;
  border: 1px solid #DFE0EB;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  border-radius: 8px;
  z-index: 10;
}




#check-fluids-prompt {
  position: fixed;
  margin: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  max-height: 180px;
  max-width: 300px;
  padding: 5px 30px 30px 30px;
  background-color: white;
  border: 1px solid #DFE0EB;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  border-radius: 8px;
  z-index: 10;
}

#purchase-prompt {
  position: fixed;
  margin: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  max-height: 200px;
  max-width: 350px;
  padding: 5px 30px 30px 30px;
  background-color: white;
  border: 1px solid #DFE0EB;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  border-radius: 8px;
  z-index: 10;
}




.library {
  position: fixed;
  margin: auto;#purchase-prompt {
  position: fixed;
  margin: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  max-height: 150px;
  max-width: 300px;
  padding: 5px 30px 30px 30px;
  background-color: white;
  border: 1px solid #DFE0EB;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  border-radius: 8px;
  z-index: 10;
}
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  max-height: 800px;
  max-width: 1400px;
  padding: 5px 30px 30px 30px;
  background-color: white;
  border: 1px solid #DFE0EB;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  border-radius: 8px;
  z-index: 10;
}

.tier4 div {
  width: 50%;
  margin: 0 auto;
}

.tier4 a {
  color: #ffffff;
}
.tier4-yes, .tier4-no {
  margin: 0 auto;
  text-align: center;
  padding: 10px;
  border-radius: 5px;
}

.non-link-button-cancel {
    background-color: #DC401D;
    margin: 0 auto;
  text-align: center;
  padding: 10px;
  border-radius: 5px;
}

.tier4-yes {
  background-color: #29CC97;
}

.tier4-no {
  background-color: #DC401D;
}



/* Style Profile Under Profile */
.profile-nav {
  display: flex;
  padding-top: 4px;
  color: #ede6e6;

}

.user-profile-padding div {
  padding-bottom: 10px !important;
}


.profile-nav > div {
  width: auto;
  padding-bottom: 2px;
  margin-right: 20px;

}

.profile-nav-2 {

  display: flex;
  padding: 10px 0 20px 0;
  color: #ede6e6;
}

.profile-nav-2 > div {
  width: auto;
  padding-bottom: 2px;
  margin-right: 20px;
}

.profile-nav div a, .profile-nav-2 div a {
  text-decoration: none;
  color: #949494;
}



.car-detail-1 {
  color: #6c6e7a;
  padding-bottom: 3px;
  font-size: 90%;

}



/* Car Schedule */



.schedule-divider {
  padding: 0 3px 0 3px;
}

.car-section-name {
  color: #949494;
  padding-bottom: 5px;
  font-size: 90%;
  margin-top: 5px;
}

.car-schedule-container {
  margin: 8px 0 3px 0;
  padding: 4px;
  border: 1px solid #DFE0EB;
  box-shadow: 3px 3px 7px 1px #E7E8E8;

}


.heading-font {
  color: #363740 !important;
  font-size: 20px;
  margin: 8px 0 1px 0;
  font-weight: bold;
}

.car-schedule {
  margin-bottom: 2px;
  font-size: 90%;
}


#past-bookings {
  display: none;
}

.past-bookings-name {
  font-size: 90%;
}

.gray {
  color: #6c6e7a;
}


/* User Profile */
.main-profile {
  display: flex;
}

.main-profile-image {
  flex-basis: 28%;
  margin-right: 10px;
}

.profile-image {
  width: 89%;
  margin: 0 auto;
}

.upload-photo {
  margin-bottom: 15px;
}



.main-profile-data {
  width: 73%;
  padding-left: 10px;
}

.main-profile-top {
  display: flex;
  margin-bottom: 18px;
}


.main-profile-top-1 {
  flex-basis: 42%;
}

.main-profile-top-2 {
  width: 42%;

}

.main-profile-mileage {
  color: #363740;
}

.main-profile-top a, .main-profile-top a:visited {
  color: #6990E6 !important
}


.edit-profile-form {
  margin-top: 15px;
}
attrs={"rows": 10}
.edit-profile-text {
  margin-bottom: 10px;
}


.phone-field-ext {
  display: none !important;
}

input[name="phone_1"] {
  display: none !important;
}

.car-icon {
  border-radius: 20px;
  width: 50px;
  height: 38px;
  margin-right: 10px;
}

.car-icon img {
  max-width: 50px;
  max-height: 38px;
  border-radius: 20px;
}



/* Driving Log */

#id_log {

}


textarea {
  border-radius: 6px;
  width: 100%;
  padding: 10px 10px 0 10px;
  box-sizing: border-box;
  font-family: 'Mulish', sans-serif !important;
}

textarea::-webkit-scrollbar {
  width: 6px;               /* width of the entire scrollbar */
}

textarea::-webkit-scrollbar-track {
  background-color: #ffffff;       /* color of the tracking area */
}

textarea::-webkit-scrollbar-thumb {
  background-color: #DFE0EB;    /* color of the scroll thumb */
}

.driving-log-mileage {
  margin: 3px 0 0 0;
  color: #949494;
  font-size: 90%;

}

.driving-log {
  font-size: 90%;
}

.font90percent {
  font-size: 90%;
}

.font85percent {
  font-size: 85%
}

.font18 {
  font-size: 18px !important;
}








.driving-editor li {
  margin: -25px 0 -10px 20px;
  padding: -20px 0 -20px 0;


}




/* Car Reviews */

.float-right3 {
  margin-left: 97%;
}

.float-right2 {
  margin-top: -30px;
  float: right;

}

.float-right {
  margin-left: auto;
  margin-right: 0;
  margin-top: -15px;
}

.float-right-edit {
  margin: 5px 0 0 auto;
}




.entry-container {
  margin:  0 3px 2px 0;
  border: solid 1px #e2e0de;
  border-radius: 6px;
  padding: 10px 0 0 10px;
}

.entry-container2 {
  margin:  0 3px 3px 0;
  border: solid 1px #e2e0de;
  border-radius: 6px;
  padding: 10px 0 16px 10px;
}



.edit-entry {
  margin-left: auto;
  margin-right: 0;
}


.author {
  display: flex;
}

.author-name a:hover, .review-car-name a:hover {
  color: black !important;
}

.review-author, .review-author a {
  font-size: 90%;
}

.author-name a {
  color: black !important;
}

.underline-on-hover:hover {
  border-bottom: 1px solid black !important;

}


.medium-dp {
  border-radius: 20px;
  width: 50px;
  height: 70px;
  margin-right: 10px;
  padding-top: 3px;
}


.medium-dp img {
  max-width: 50px;
  max-height: 70px;
  border-radius: 20px;
}



.dp {
  border-radius: 20px;
  width: 38px;
  height: 38px;
  margin-right: 10px;
  padding-top: 3px;
}


.dp img {
  max-width: 38px;
  max-height: 38px;
  border-radius: 20px;
}

.entry-date {
  color: #949494;
  font-size: 12px;
  word-wrap: break-word;
}

.entry-title {
  font-size: 120%;
  margin-top: 5px;
  margin-bottom: 5px;
  overflow-wrap: break-word;
}




.break-word-normal {
  word-wrap: break-word;
  white-space: normal;
}


.wrap-text {
  text-wrap: wrap;
}

.clipped-text {
  white-space: nowrap;
  overflow-y: clip;
  text-overflow: ellipsis;
  width: 98%;
}


#id_rating li {
  list-style-type: none;
  display: block;
  padding-right: 15px;
}

#id_rating {
  display: flex;
  margin-left: 10px;
}


.star-cb-group {
  /* remove inline-block whitespace */
  font-size: 0;
  /* flip the order so we can use the + and ~ combinators */
  unicode-bidi: bidi-override;
  direction: rtl;
  /* the hidden clearer */
  vertical-align: bottom;
}
.star-cb-group * {
  font-size: 2rem;
}
.star-cb-group > input {
  display: none;
}
.star-cb-group > input + label {
  /* only enough room for the star */
  display: inline-block;
  overflow: hidden;
  text-indent: 9999px;
  width: 1em;
  white-space: nowrap;
  cursor: pointer;
}
.star-cb-group > input + label:before {
  display: inline-block;
  text-indent: -9999px;
  content: "☆";
  color: #888;
}
.star-cb-group > input:checked ~ label:before, .star-cb-group > input + label:hover ~ label:before, .star-cb-group > input + label:hover:before {
  content: "★";
  color: #FFA41C;
  text-shadow: 0 0 1px #333;
}

.yellow-star {
  color: #FFA41C !important;
  text-shadow: 0 0 1px #333;
  font-size: 39px;
  margin: 0 0.001em 0 0;
}

.middle {
  vertical-align: top;
}

.star-cb-group > .star-cb-clear + label {
  text-indent: -9999px;
  width: .5em;
  margin-left: -.5em;
}
.star-cb-group > .star-cb-clear + label:before {
  width: .5em;
}
.star-cb-group:hover > input + label:before {
  content: "☆";
  color: #888;
  text-shadow: none;
}
.star-cb-group:hover > input + label:hover ~ label:before, .star-cb-group:hover > input + label:hover:before {
  content: "★";
  color: #FFA41C;
  text-shadow: 0 0 1px #333;
}







/* Service Items */


.service_items_entry {
  padding: 2px 0 1px 0;
}

.shopping_items_entry {
  padding: 2px 0 1px 0;
}

.service_name_status {
  display: flex;
}

.service_name_status > div {
  padding-right: 10px;
}

.service_image_data {
  display: flex;
}

.service_item_data {
    padding-left: 8px;
    min-width: 75%;
}


.service-item-grid-img {
  position: relative;
  width: 188px;
  height: 141px;

}

.car-with-flag {
  width: 118px;
  height: 88px;
  position: relative;
  overflow: hidden;
}

.car-with-flag img {
    z-index: -2
    width: 100%;
}

.service-item-grid-img img {
  z-index: -2
}

.service-counts {
  position: absolute;
  width: 188px;
  bottom: 0px;
  font-size: 150%;
  color: white;
}

.car-flag {
  position: absolute;
  top: -25px;
  right: -25px;
  width: 50px;
  height: 50px;
  transform: rotate(45deg);
  background: green;
}




.service-count-box1, .service-count-box2 {
  width: 33%;
}

.service-count-box3 {
  width: 34%;
}

.maintenance-box {
  padding-top: 5px;
  text-align: center;
  width: 50px;
  height: 35px;

}


.maintenance-box-center {
  margin: 0 auto;
  padding-top: 5px;
  text-align: center;
  width: 50px;
  height: 35px;
}

.maintenance-box-right {
  float: right;
  padding-top: 5px;
  text-align: center;
  width: 50px;
  height: 35px;
}

.orange-box {
  background-color: rgba(218, 165, 32, 0.5);
}

.asparagus-box {
  background: rgba(135, 169, 107, 0.5);

}

.blue-box {
  background: rgba(11, 127, 171, 0.5);
}

.red-box {
  background-color: rgba(233, 116, 81, 0.5);
}

.service-count-left {
  padding-top: 5px;
  text-align: center;
  background-color: yellow;
  width: 50px;
  height: 35px;
  background: rgba(135, 169, 107, 0.5)
}

.service-count-right {
  float: right;
  padding-top: 5px;
  text-align: center;
  background-color: yellow;
  width: 50px;
  height: 35px;
  background-color: rgba(233, 116, 81, 0.5);

}

.car-personal {
  position: absolute;
  top: -25px;
  right: -30px;
  width: 65px;
  height: 55px;
  transform: rotate(45deg);
  background: green;
  opacity: 0.8;

}

.car-pool {
  position: absolute;
  top: -25px;
  right: -30px;
  width: 65px;
  height: 55px;
  transform: rotate(45deg);
  background: #449CC1;
  opacity: 0.8;

}


.car-shop {
  position: absolute;
  top: -25px;
  right: -30px;
  width: 65px;
  height: 55px;
  transform: rotate(45deg);
  background: red;
  opacity: 0.8;
}

.rotate-90 {
  transform: rotate(-90deg);
}

.inline-block {
  display: inline-block;
}



.service-count-center {
  margin: 0 auto;
  padding-top: 5px;
  text-align: center;
  background-color: yellow;
  width: 50px;
  height: 35px;
  background-color: rgba(218, 165, 32, 0.5);

}


.service-item-image img {
  width: 95%;
}

.service-request-name {
  font-size: 150%;
}

.service-car-name {
  font-size: 160%;
  margin-bottom: 15px;

}

.service-name-data {
  margin-bottom: 15px;
}

.service-name-data {
  margin-bottom: 15px;
}

.service-profile-buttons {
  padding: 10px;
}

.service-request-short-desc {
  display: flex;
  margin-top: 10px;
}

.service-request-short-desc > div {
  width: 33%;
  margin-bottom: 15px;
  padding: 0;
}

.no-margin p {
  margin: 0 !important;
}


.location-margin {
  margin-top: 2px !important;
  margin-bottom: 30px !important;
}

.part-container {
  border-bottom: 1px solid #DFE0EB;
  padding-bottom: 10px;
}

.part-name {
  font-size: 120%;
}

.part-status {
  margin-top: 5px;
}

.part-name-edit {
  display: flex;
}

.contain-paragraph {
  white-space: pre-wrap;
  white-space: -moz-pre-wrap;
  white-space: -pre-wrap;
  white-space: -o-pre-wrap;
  word-wrap: break-word;
}

a {
  color: black;
}

.shopping-short-desc {
  display: flex;
  margin-top: 20px;
}

.shopping-short-desc > div {
  width: 50%;
  margin-bottom: 15px;
  padding: 0;
}

.shop-detail {
  color: #6c6e7a;
  padding-bottom: 3px;
  font-size: 12px;
  margin-bottom: 0;
}

.shop-item-status {
  width: 90px !important;
  margin: 0 15px 0 7px;
}

.shop-item-name {
  margin: 0 5px 0 2px;
  width: 70%;
}





.full-text-search-result-container {
  border-bottom: 1px solid #DFE0EB;
  padding-bottom: 10px;
}

.full_text_search_result_title {
  padding-top: 8px;
  font-weight: bold;
  white-space: pre-wrap !important;
  white-space: -moz-pre-wrap;
  white-space: -pre-wrap;
  white-space: -o-pre-wrap;
  word-wrap: break-word !important;
}

.full_text_search_text_result {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  width: 100%;
}

.full-text-search-result-query {
  padding-bottom: 15px;
}

.cart {
  font-size: 30% !important;
  color: #6990E6 !important;
}




/* Users */
.users-list {
  display: grid;
  grid-template-columns: 33% 33% 33%;
}

.user-page {
  margin-bottom: 15px;
}


.bigger-dp {
  border-radius: 10px;
  width: 50px;
  height: 50px;
  margin-right: 10px;
}


.bigger-dp img {
  max-width: 50px;
  max-height: 50px;
  border-radius: 10px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  width: 100%;
}



/* 💥 Grid Layout */
.weighting-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  max-width: 100%;
  margin: 0 auto;
  padding: 0;
  box-sizing: border-box;
}

.home-bookings-list {
  display: grid;
  gap: 1rem;
  padding: 0;
  box-sizing: border-box;
  /* max-width: 620px;  300px * 2 + 1rem gap */
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  justify-content: stretch; /* default, no need to force it */
}


/* 🧼 Card */
.home-booking-card {
  align-items: center;
  transition: transform 0.2s ease;
  width: 100%;
  box-sizing: border-box;
}


.weighting-page {
  background-color: #fff;
  border: 2px solid #f9a825;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
  padding: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform 0.2s ease;
  width: 100%;
  box-sizing: border-box;
}

.weighting-page:hover {
  transform: scale(1.02);
}

/* 📷 Profile Image - Custom */
.weighting-dp img {
  width: 130px;
  height: 130px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

/* 🧙‍♂️ Profile Image - Default (Icon case) */
.weighting-user-icon {
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background-color: #f4f4f4;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.05);
  font-size: 80px;
  color: #f9a825;
}



/* ✍️ Name */
.weighting-wrap-text {
  word-break: break-word;
  text-align: center;
}

/* 🔢 Input */
.weight input {
  font-family: 'Mulish', sans-serif !important;
  border: 1px solid #b2b3ba;
  border-radius: 6px;
  height: 34px;
  width: 65px;
  text-align: center;
  margin-top: 10px;
  font-size: 1rem;
  background-color: #fefefe;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  transition: all 0.2s ease;
  color: #333;
}

.weight input:focus {
  outline: none;
  border-color: #f9a825;
  box-shadow: 0 0 0 2px rgba(249, 168, 37, 0.25);
  background-color: #fffef5;
}

.weight input[type="number"] {
  appearance: textfield; /* This removes steppers completely */
}

/* But we want them! So we skip that and instead fix this: */
.weight input[type="number"]::-webkit-inner-spin-button,
.weight input[type="number"]::-webkit-outer-spin-button {
  opacity: 1 !important;
  appearance: auto;
  margin: 0;
}








/* Comments */
.comment-bubble {
  background-color: #DFE0EB;
  width: 100%;
  border-radius: 7px;
  padding: 10px 10px 0 10px;
  margin-bottom: 15px;
}

.comment-bubble a {
  color: #6990E6;
}


.comment-bubble li {
  margin-left: 20px !important;
}

/* Maintenance */
#id_cars li, #id_frequency li, {
  list-style-type: none;
  display: block;
  padding-right: 50px;
}

#id_frequency {
  padding-top: 28px;
  margin-left: 10px;
  list-style-type: none;
}

.sort-label {
  display: flex;
}



textarea {
  border: solid 1px #b2b3ba;
}

input[type=radio],
   input.radio {
     float: left;
     clear: none;
     margin: 2px 6px 0 2px;
   }

.checkbox-container {
  height: 280px;
  overflow: scroll;
  border: 1px solid #b2b3ba !important;
  padding: 5px;
  margin: 2px;
  border-radius: 4px;
}

#id_cars li {
  padding-bottom: 7px;
}


.checkbox-container::-webkit-scrollbar {
  width: 8px;               /* width of the entire scrollbar */
  height: 8px;
}

.checkbox-container::-webkit-scrollbar-track {
  background-color: #ffffff;       /* color of the tracking area */
}

.checkbox-container::-webkit-scrollbar-thumb {
  background-color: #DFE0EB;    /* color of the scroll thumb */
}




[type="checkbox"]
{
    vertical-align:middle;
}





/* Wiki */
.wiki-list-title {
  padding-bottom: 10px;
  font-size: 130%;
}

.wiki-entry-title {
  font-size: 120%;
  margin-bottom: 10px;
}


/* Other Cars */

.consensus-rank-tab {
  position: absolute;
  top: 0;
  right: 0;
  padding: 4px 10px;
  border-bottom-left-radius: 8px;
  font-weight: bold;
  color: white;
  font-size: 0.85em;
  background: linear-gradient(135deg, #F26419 0%, #F28C2B 100%);
  display: flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  z-index: 1;
}


.othercars-image {
  width: 118px;
  height: 88px;
  position: relative;
  overflow: hidden;
}


.other-car-name {
  font-size: 120%;
  max-width: 68%;
}

.othercar-name-height {
  height: 86px;
}

.other-car-image {
  padding: 0px;
  width: 163px;
}

.other-car-image img {
  width: auto;
  height: 120px;
  margin: 0 auto;
}

.other-cars div {
  width: 48%;
}






#vote-container {
  display: none;
}

.othercar-list-image {
  flex-basis: 130px;
}

.othercar-list-image img{
  width: 100px;
  height: auto;
}


.gray-background {
  background-color: #b2b3ba !important;
}


.float-right-2 {
  margin-left: auto;
  margin-right: 0;
  margin-top: 20px;
}


.no-display {
  display: none !important;
}



.cke {
  width: 100% !important;
}

.review-car-name {
  margin: 7px 0 15px 0;
}

.filter-form {
  padding-bottom: 5px;
}

.filter-form-section {
    white-space: normal;
    padding-bottom: 8px;
}

.filters-toggle {
  padding-bottom: 5px;
}

.filter-checkbox {
  display: inline-block;
  padding-right: 10px;
}

.filter-apply {
  background-color: #29CC97;
  color: #ffffff;
  border: none;
  width: 50%;
  height: 25px;
  border-radius: 4px;
  font-size: 15px;
  text-align: center;
  margin-top: 10px;
  cursor: pointer;
}

.filter-collpase {
  display: inline-block;
}

.filter-expand {
  display: inline-block;
}

.filters-detail {
  display: none;
}

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* The Modal (background) */
.modal-visible {
  position: absolute; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 50%;
  top: 25%;
  width: 300px; /* Full width */
  overflow: auto; /* Enable scroll if needed */
  background-color: #c42525; /* Fallback color */
  border-radius: 4px;
  padding: 10px;
 }

/* Modal Content/Box */
.modal-content-visible {
  background-color: #fefefe;
  border: 1px solid #888;
  width: auto; /* Could be more or less, depending on screen size */
  border-radius: 4px;
  font-family: 'Mulish', sans-serif;
  padding: 10px;
}

/* Modal Content/Box */
.modal-content {
  background-color: #fefefe;
  margin: 25% 15% auto 15%; /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid #888;
  width: 40%; /* Could be more or less, depending on screen size */
  border-radius: 4px;
  font-family: 'Mulish', sans-serif;
}

/* The Close Button */
.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
  margin-top: -10px;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

#id_rating {
  width: 100%;
}

#current_desireability_vote_value {
  text-align: center;
}

.desirability-vote {
  background-color: #29CC97;
  color: #ffffff;
  border: none;
  width: 48%;
  height: 40px;
  margin-bottom: 10px;
  border-radius: 4px;
  font-size: 15px;
  cursor: pointer;
}

.red-cancel {
  background-color: #DC401D !important;
}

#id_rating {
  width: -webkit-fill-available !important;
}


#location-form, #tips-form {
  display: none;
}


#hidden-shopping {
  display: none;
}


#hidden-addpart {
  display: none;
}

.grid-container {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(188px, 1fr));
}


.tournament-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  justify-content: center; /* Centers the grid horizontally */

}



.service-grid-img, .library-img {
  width: 188px;
  height: 141px;
}


/* Sort related styling */

.sort-drop-btn {
  background-color: #3498DB;
  color: white;
  padding: 4px;
  border-radius: 4px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

.sort-drop-btn:hover, .sort-drop-btn:focus {
  background-color: #2980B9;
}

.sort-dropdown {
  position: relative;
  display: inline-block;
}

.sort-dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.sort-dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.sort-dropdown-content a:hover {background-color: #ddd}

.show {display:block;}

.legend-name {
  font-family: 'Mulish', sans-serif;
  padding-left: 10px;
  font-weight: normal;
  color: #6c6e7a;
}


.red-square {
  color: rgba(233, 116, 81, 0.5)
}

.yellow-square {
  color: rgba(218, 165, 32, 0.5);
}

.blue-square {
  color: rgba(11, 127, 171, 0.6);
}

.green-square {
  color: rgba(135, 169, 107, 0.5);
}

.gray-square {
  color: rgba(108, 122, 137);, 1);
}

.wiki-container {
  width: 98%;
  min-height: 300px;
  position: relative;
  background-color: white;
  border: 1px solid #DFE0EB;
  margin-left: 2.4%;
  margin-right: 2.4%;
  border-radius: 10px;
}

/* Fix for adding django wiki inside our css. */
.form-horizontal .wiki-control textarea {
  display: inherit !important;
}

#article-container {
  width: 100%;
  text-wrap: auto;
}

#article-title {
  font-family: 'Mulish', sans-serif;
  color: #363740;
  font-size: 20px;
}

.float-right {
  margin-top: 0px !important;
}

.wiki-body {
  background-color: #edeef4;
}


.inline-form {
  display: inline;
}

.newsfeed-author p span {
  font-weight: bold;
}

.newsfeed_date {
  font-size: 90%;
}

.loading-placeholder {
  margin-top: 10px;
  align-content: center;
  display: flex;
  justify-content: center;
}

.loader {
  border: 16px solid #f3f3f3; /* Light grey */
  border-top: 16px solid #3498db; /* Blue */
  border-radius: 50%;
  width: 20px;
  height: 20px;
  animation: spin 1s linear infinite;
  margin: 0;
}

.loading-text {
  padding-top: 15px;
  padding-left: 10px;
}



@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.no_display {
  display: none;
}


.django-ckeditor-widget {
  width: 100% !important;
}

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

.input-flex-50 {
  flex-basis: 50%;
}
.center {
  text-align: center;
}

.fc-toolbar .fc-center {
  display: inherit !important;
  margin: auto;
  width: 37%;
}

.wiki-container-child {

}

/* ---------------------- WIKI ---------------------------------- */
/* Wiki related styling that we don't have direct control over id or class names */

h1#article-title {
  font-size: 1.3em !important;
}

#article-container {
  margin-top: 0px !important;
}

#article-container .navbar {
  padding-right: 0px;
}

ul.navbar-nav.w-75 {
  width: auto !important;
}

#article-breadcrumbs > nav > .breadcrumb {
  padding: 2px !important;
  border-radius: 0.2rem !important;
}

#article-breadcrumbs > .btn-group {
    margin-left: 5px !important;
}

#article-breadcrumbs > .btn-group > .btn {
    padding: 2px !important;
}

#article-breadcrumbs > .btn-group > .btn > .fa {
    font-weight: 700 !important;
}

.wiki-article  ul, .wiki-article ol {
  margin-left: 20px;
}

#article-menu > ul.nav.navbar-nav.ml-auto.w-100.justify-content-end > li > .nav-link {
  display: none;
  padding: 2px;
}

.wiki-article > h1 {
  color: black;
}

.wiki-hr {
  margin-top: 2em;
}

.category-button {
    background-color: #21D1CC;
    border-radius: 12px;
    padding: 1px 10px 2px 10px;
    line-height: 1.6;
    color: white !important;
    font-family: 'Mulish', sans-serif;
    white-space: nowrap;
}

.category-text {
  font-size: 90%;
  font-family: 'Mulish', sans-serif;
  font-weight: 100 !important;
}


.category-submit {
  width: 50%;
}

#add-category {
  display: none;
}

.smaller-font {
  font-size: 80%;

}

.orange-border {
  border: 2px solid #CC5500;
}

.view-car {
  font-family: 'Mulish', sans-serif;
  box-sizing: border-box;
  padding: 3px 9px 4px 9px;
  border-radius: 6px;
  border: none;
  font-size: 12px;
  width: auto;

}

.edit-pen {
  margin-left: auto;
  margin-right: 0;
}


#calendar_bookings_toggle > * {
  visibility: hidden;
}

.close-x {
  text-align: right;
  margin: 0 10px 10px 0;
}






#special-prompt {
  position: fixed;
  margin: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  max-height: 200px;
  max-width: 300px;
  padding: 5px 30px 30px 30px;
  background-color: white;
  border: 1px solid #DFE0EB;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  border-radius: 8px;
  z-index: 10;
}

#owner-prompt {
  position: fixed;
  margin: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  max-height: 200px;
  max-width: 300px;
  padding: 5px 30px 30px 30px;
  background-color: white;
  border: 1px solid #DFE0EB;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  border-radius: 8px;
  z-index: 10;
}


#both-prompts {
  position: fixed;
  margin: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  max-height: 200px;
  max-width: 380px;
  padding: 5px 30px 30px 30px;
  background-color: white;
  border: 1px solid #DFE0EB;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  border-radius: 8px;
  z-index: 10;
}

.markItUpContainer {
  margin-right: 0px !important;
}

.bubble-service {
  background-color: #E3A69F;
  border-radius: 6px;
  box-sizing: border-box;
  padding: 3px 9px 4px 9px;
  color: #ffffff;
  font-size: 12px;
  width: auto;
}



.game-car-container {
  border: 1px solid #DFE0EB;
  box-shadow: 3px 10px 10px 1px #A4A6B3;
  border-radius: 5px;
  height: 224px;
  width: 300px;
  overflow: hidden;

}

.game-car-img {
  border-radius: 5px;
}

.profile-cars-container {
  margin: 0 0 3px 0;
  padding: 4px;
  border: 1px solid #DFE0EB;
  box-shadow: 3px 3px 7px 1px #E7E8E8;
  width: 100%;
}

.bubble {
  border-radius: 12px;
  padding: 1px 10px 2px 10px;
  line-height: 1.6;
  white-space: nowrap;
  border: 1px solid #F26419;
  background-color: rgba(242, 100, 25, 0.2);

}

.bubble-gray {
  background-color: #6c6e7a20;
  border-radius: 12px;
  padding: 1px 10px 2px 10px;
  line-height: 1.6;
  white-space: nowrap;
}

.bubble-div {
  margin: 10px;
}

.font12 {
  font-size: 12px;
}

.download-csv {
  margin-bottom: 10px;
}



.month-cars, #year-cars, #miles_driven, #desirability-table, #votes-table, #maintenance-log, .tournament_results {
  border-collapse: collapse;
  width: 100%;
}

.month-cars td, .month-cars, th, #year-cars td, #year-cars th, #miles_driven  td, #miles_driven  th, #desirability-table td, #desirability-table th, #votes-table td, #maintenance-log td, .tournament_results td {
  padding: 8px;
}

.month-cars tr:nth-child(even), #year-cars tr:nth-child(even), #miles_driven tr:nth-child(even), #votes-table tr:nth-child(even), #maintenance-log tr:nth-child(even), .tournament_results tr:nth-child(even) {background-color: #f2f2f2;}

.month-cars tr:nth-child(even), #year-cars tr:nth-child(even), #desirability-table tr:nth-child(even), .tournament_results tr:nth-child(even) {background-color: #f2f2f2;}

.month-cars tr:hover, #year-cars tr:hover, #miles_driven tr:hover, #votes-table tr:hover, #maintenance-log  tr:hover {background-color: #ddd;}

#desirability-table  tr:hover {background-color: #ddd;}

#year-cars th, .month-cars th, .tournament_results th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: #ddd;
  font-size: 18px;
}


#miles_driven  th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: #04AA6D;
  color: white;
}

#s-details {
  margin-right: 10px !important;
}





.fc-unthemed .fc-content, .fc-unthemed .fc-divider, .fc-unthemed .fc-list-heading td, .fc-unthemed .fc-list-view, .fc-unthemed .fc-popover, .fc-unthemed .fc-row, .fc-unthemed tbody, .fc-unthemed td, .fc-unthemed th, .fc-unthemed thead {
  border-color: #000000 !important;
}

.fc-view-container {
  border-color: #000000;
  border-width: 2px;
}

.fc-head tr th {
  background-color: #DADADA;
  border-color: #000000;
  border-width: 2px;
}

.fc-body tr td .fc-scroller.fc-day-grid-container .fc-day-grid.fc-unselectable .fc-row.fc-week.fc-widget-content .fc-bg table tbody tr td.fc-day {
  background-color: #fff;
  border-color: #000000;
  border-width: 2px;
}

.fc-body tr td .fc-scroller.fc-day-grid-container .fc-day-grid.fc-unselectable .fc-row.fc-week.fc-widget-content .fc-bg table tbody tr td.fc-day.fc-past.fc-other-month {
  background-color: #f2f2f3;
  border-color: #000000;
  border-width: 2px;
}

.fc-body tr td .fc-scroller.fc-day-grid-container .fc-day-grid.fc-unselectable .fc-row.fc-week.fc-widget-content .fc-bg table tbody tr td.fc-day.fc-today {
  background-color: #FFF9AE;
  border-color: #000000;
  border-width: 2px;
}

.fc table{border-collapse: collapse !important;}

.car-status-dropdown {
  flex-basis: 90%;
}

.car-status-dropdown-cancel {
  margin-left: auto;
  flex-basis: auto;
  padding-left: 10px;
}


.service-status-dropdown {
  flex-basis: 90%;
}


.service-status-dropdown-cancel {
  margin-left: auto;
  flex-basis: auto;
  padding-left: 10px;
}

.service-status-dropdown-cancel-button {
  background-color: #DC401D;
  color: #ffffff;
  border: none;
  width: 100%;
  height: 40px;
  margin-top: 21px;
  padding: 0 20px 0 20px;
  border-radius: 4px;
  font-size: 15px;
  cursor: pointer;
}

.shopping-status-dropdown {
  flex-basis: 90%;
}

.shopping-status-dropdown-cancel {
  margin-left: auto;
  flex-basis: auto;
  padding-left: 10px;
}

.shopping-status-dropdown-cancel-button {
  background-color: #DC401D;
  color: #ffffff;
  border: none;
  width: 100%;
  height: 40px;
  margin-top: 21px;
  padding: 0 20px 0 20px;
  border-radius: 4px;
  font-size: 15px;
  cursor: pointer;
}


.group-items {
  background-color: #29CC97;
  color: #ffffff;
  border: none;
  width: 100%;
  height: 30px;
  padding: 0 20px 0 20px;
  border-radius: 4px;
  font-size: 15px;
  cursor: pointer;

}

.group-items-cancel {
  background-color: #DC401D;
  color: #ffffff;
  border: none;
  width: 100%;
  height: 30px;
  padding: 0 20px 0 20px;
  border-radius: 4px;
  font-size: 15px;
  cursor: pointer;

}

.group-item {
  flex-basis: 95%;
}

.delete-icon-div {
  margin-left: 20px;
  width: 20px;
}

.dynamic-plate-button {
  background-color: #DC401D;
  color: #ffffff;
  border: none;
  width: 100%;
  height: 40px;
  margin-top: 21px;
  padding: 0 20px 0 20px;
  border-radius: 4px;
  font-size: 15px;
  cursor: pointer;
}









#dynamic_reallocation_changes {
  margin-top: 12px;
  font-family: 'Mulish', sans-serif;
  white-space: normal;
}

#dynamic_reallocation_changes ul {
  font-family: 'Mulish', sans-serif;
  margin-top: 4px;
  margin-left: 20px
}


.tiny-submit {
  background-color: #29CC97;
  color: #ffffff;
  border: none;
  height: 40px;
  padding: 0 20px 0 20px;
  border-radius: 4px;
  font-size: 15px;
  cursor: pointer;
}
.tiny-cancel {
  background-color: #DC401D;
  color: #ffffff;
  border: none;
  height: 40px;
  padding: 0 20px 0 20px;
  border-radius: 4px;
  font-size: 15px;
  cursor: pointer;
}



.receipts-submit {
  position: relative;
  top: -20px;
}

#id_guests {
  min-height: 100px;
}


.opaque {
  filter: brightness(65%);
}  opacity: 0.6;


.input-flex-90 {
  flex-basis: 90%;
}

#id_impersonator {
  border: none;
  padding: 10px;
  line-height: 15px;
  font-family: 'Mulish', sans-serif;
  font-size: 13px;
}

.purchase-link-form {
  position: fixed;
  margin: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  max-height: 330px;
  width: 420px;
  padding: 20px;
  background-color: white;
  border: 1px solid #DFE0EB;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  border-radius: 8px;
  z-index: 10;
}



.remove-border {
  background: none;
  border: none;
}



.plates-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}

.plate-box {
  margin: 0 0 3px 0;
  padding: 4px;
  border: 1px solid #DFE0EB;
  box-shadow: 3px 3px 7px 1px #E7E8E8;
}

.dashed-black {
  border: 2px dashed black;

}

.dashed-orange {
  border: 2px dashed #CC5500;
}




/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.private-car-toggle {
  margin: 0;
}

.switch {
  position: relative;
  display: inline-block;
  width: 190px;
  height: 30px;
}



/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;

  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: white;
}

.slider:before {
  position: absolute;
  content: "";
  height: 23px;
  width: 23px;
  left: 3px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(161px);
  -ms-transform: translateX(161px);
  transform: translateX(161px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}


/* Add text labels inside the slider */
/* Show PRIVATE text when checked */
input:checked + .slider::after {
  content: "PRIVATE";
  position: relative;
  z-index: 2;
}

/* Hide text when OFF */
.slider::after {
  content: "";
}



.fc-header-toolbar {
  flex-wrap: wrap;
}

/* This is a hack to override the fc-icon logic */
.fc-icon.fc-icon-fa { font-family: "FontAwesome" !important; }

#modalText ul {
  padding-left: 16px;
}

#modalText ul ul {
    padding-left: 16px;
}

.fc .fc-daygrid-day.fc-day-today {
    background-color: #cdcdcd !important;
}


.car-profile-checkboxes div {
  flex-basis: 25%;
}


/* width */
#gallery-div::-webkit-scrollbar {
  height: 9px;
}

/* Track */
#gallery-div::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px grey;
  border-radius: 2px;
}

/* Handle */
#gallery-div::-webkit-scrollbar-thumb {
  background: #A4A6B3;
  border-radius: 2px;
}


.car-upload input {
  width: auto;
}


th[role=columnheader]:not(.no-sort) {
	cursor: pointer;
}

th[role=columnheader]:not(.no-sort):after {
	display: inline-block;
    text-align: center;
    width: 10px;
    content: '\25BC';
	-ms-user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
	color: gray;
}

th[aria-sort=ascending]:not(.no-sort):after {
    display: inline-block;
    text-align: center;
    width: 10px;
    content: '\25B2';
    color: black;
}

th[aria-sort]:not(.no-sort):after {
	visibility: visible;
	opacity: 1;
	color: black;
}

th[role=columnheader]:not(.no-sort):hover:after {
	visibility: visible;
	opacity: 1;
	color: black;
}

#analytics > span {
    padding: 6px 22px 6px 22px;
    margin-right: 8px;
    border-radius: 10px;
    color: white;
}

.analytics-title {
    background-color: gray;
}

.selected-title {
    background-color: #E97451;
}

.toggle-div {
    overflow-x: auto;
}

/* https://www.w3schools.com/css/css_dropdowns.asp */
/* Style The Dropdown Button */
.dropdown_button {
  background-color: #DDD;
  padding: 16px;
  font-size: 18px;
  border: none;
  cursor: pointer;
  font-weight: 550;
  width: 130px;
  border-radius: 20px 20px 0 0;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f1f1f1}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
  display: block;
}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
  background-color: #3e8e41;
}


.add-border {
  border: 5px solid rgba(41, 204, 151, .9);

}

.service-id {
  float: right;
  font-size: 10px;
  color: gray;
}

.modal-content-visible div {
    margin-bottom: 10px;
}


.black-on-gray {
  background-color: #ddd;
  color: black;
}


.game-grid-container {
  display: flex;
}

.game-buttons {
  margin: 30px 30px 0 30px;
  width: 360px;
}


.game-button {
  color: black !important;
  border-radius: 4px;
  padding: 10px;
  font-weight: bold;
  letter-spacing: 2px;
  height: 20px;
  font-size: 18px;
}

.game-button input[type="radio"] {
    display: none;
}


.game-buttons div:hover {
  background-color: gray;
  cursor: pointer;
}



.rack-and-stack-title {
  font-size: 27px;
  margin: 0 auto;
  padding-bottom: 40px;
}


.rack-and-stack-games {
    margin-top: 30px;
    margin: 0 auto;
}

.rack-and-stack-vs {
    color: #9B6A6C;
    font-size: 25px;
    font-weight: bold;
    margin: 0 7px 0 7px;
}


.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5); /* Optional: adds a dimmed effect */
  z-index: 9; /* Lower than .div-prompt but above other elements */
  display: flex;  /* Enables centering */
  justify-content: center; /* Centers horizontally */
  align-items: center; /* Centers vertically */
}


.div-prompt {
  padding: 20px 20px 30px 20px;
  border: 1px solid #DFE0EB;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  border-radius: 8px;
  z-index: 10;
  min-width: 300px;
  max-width: 400px;
  width: 100%;
  /* width: fit-content; Expands width dynamically */
  height: fit-content; /* Expands height dynamically */
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* Perfectly centers the div */
  background-color: white;
}


.green-yes {
  margin: 0 auto;
  text-align: center;
  padding: 10px;
  border-radius: 5px;
  color: #ffffff;
  background-color: #29CC97;
  border: none; /* Removes default border */
  cursor: pointer; /* Makes it clear it's clickable */
  display: inline-block; /* Ensures proper spacing */
  font-size: 15px; /* Adjust text size if needed */
  width: 100%;
}

.red-no {
  margin: 0 auto;
  text-align: center;
  padding: 10px;
  border-radius: 5px;
  color: #ffffff;
  background-color: #DC401D;
  border: none; /* Removes default border */
  cursor: pointer; /* Makes it clear it's clickable */
  display: inline-block; /* Ensures proper spacing */
  font-size: 15px; /* Adjust text size if needed */
  width: 100%;
}


.standard-button {
  margin: 0 auto;
  text-align: center;
  padding: 10px;
  border-radius: 5px;
  color: #ffffff;
  background-color: gray;
  border: none; /* Removes default border */
  cursor: pointer; /* Makes it clear it's clickable */
  display: inline-block; /* Ensures proper spacing */
  font-size: 16px; /* Adjust text size if needed */
  width: 100%;
}


.green-yes:hover {
  background-color: #25b584; /* Slightly darker green on hover */
}

.dark-gray-button {
  background-color: #212529;
  color: #DDE2FF;
}

.top-nav-button-div {
  display: flex;
  float: right;
  margin-left: auto;
  padding-right: 20px;
}


.line-height-16 {
  line-height: 1.6;
}


.align-bottom {
  vertical-align: bottom;
}




@media only screen and (max-width:650px)
{ .font75percent {
    font-size: 75% !important;
  }

  .library-img-wrapper {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
  }

  .library-img-container {
    width: 130px !important;
    height: 130px !important;
  }

  .library-img-container img {
    height: 70% !important;
  }

  .item-card-content div {
    font-size: 15px !important;;
  }

  .weighting-list {
      grid-template-columns: repeat(2, 1fr);
  }


  .flex-column {
      flex-direction: column !important;
    }

    .flex-column div {
      width: 100% !important;
    }


    .users-list, .user-weighting-list {
      grid-template-columns: 50% 50%;
    }

    .user-weighting-page {
      margin-left: auto;
      margin-left: auto;
      margin-bottom: 10px;
      width: 70% !important;
    }

    .bigger-dp-user-weighting {
      border-radius: 10px;
      width: 100%;
      height: auto;
      margin-right: 10px;
      margin-bottom: 12px;
    }

    .bigger-dp-user-weighting img {
      width: 100%;
      height: auto;
      border-radius: 20px;
    }

    .user-icon {
      height: 90px !important;
    }

    .user-icon span {
      margin-top: 10px !important;
    }

  .private-car-toggle {
    margin-top: 7px !important;
  }

  .car-details-left {
    width: 50% !important;
  }


  .switch {
    height: 18px !important;
  }

  .slider {
    font-size: 11px;
  }

  .slider:before {
    height: 12px;
    width: 12px;
    left: 3.25px;
  }

  input:checked + .slider:before {
    top: 3px;
  }

  input:checked + .slider:before {
    -webkit-transform: translateX(172px);
    -ms-transform: translateX(172px);
    transform: translateX(172px);
  }


  .service-container {
    margin: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    padding-right: 1px;
    width: 100%;

  }


  .div-prompt {
    min-width: 320px;
  }

  .topnav {
    background-color: #363740;
    font-size: 110%;
    padding-bottom: 10px;
    margin-top: 15px !important;

  }

  .top-nav-button-div {
    padding-right: 20px;
  }

  .page-title {
    margin-top: 8px;
    padding-left: 15px;
    font-size: 97%;
    font-weight: normal;
    color: #A4A6B3 !important;
  }

  .nav-items {
    margin-top: 5px;
    margin-right: 0;
  }

  .nav-items > div {
    margin-left: 30px;
  }

  .nav-user {
    margin: 0 0 0 22px;
  }

  .nav-user-name {
    display: none;
  }

  .user-dp-small img {
    vertical-align: top;
  }

  #notifications {
    font-size: 85%;
  }
}












.no-image {
  width: 187px;
  height: 140px;

}

.car-profile-icon {
  width: 25px;
  text-align: center;
}


.car-img {
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    max-width: 100%;
    height: auto;
    object-fit: cover; /* makes sure it crops instead of stretching */
}

/* Active (currently sorted) header: bold arrow */
.js-sortable thead th[aria-sort="ascending"]::after {
  content: "▲";
  opacity: 1;
}
.js-sortable thead th[aria-sort="descending"]::after {
  content: "▼";
  opacity: 1;
}

/* Inactive headers: show the REMEMBERED direction, muted */
.js-sortable thead th[data-last-sort="ascending"]:not([aria-sort])::after {
  content: "▲";
  opacity: 0.4;   /* tweak to taste or remove if you want full opacity */
}
.js-sortable thead th[data-last-sort="descending"]:not([aria-sort])::after {
  content: "▼";
  opacity: 0.4;
}

/* Optional: base styling to align arrows like Tablesort's default */
.js-sortable thead th::after {
  display: inline-block;
  margin-left: .5em;
  font-size: .8em;
  line-height: 1;
}

/* Analytics Graphs */

#charts {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
    gap: 20px;
    align-items: start;
}

.chart {
    border: 1px solid #ddd;
    border-radius: 12px;
    padding: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    background: #fff;
}

.chart h3 {
    margin: 0 0 8px 0;
    font: 600 16px/1.2 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

.chart-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    margin: 8px 0 0 0;
    font: 12px/1.2 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

.chart-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.chart-legend-swatch {
    width: 10px;
    height: 10px;
    border-radius: 2px;
    display: inline-block;
}

.chart-tooltip {
    position: fixed;
    pointer-events: none;
    background: rgba(0,0,0,0.85);
    color: #fff;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    z-index: 9999;
    white-space: nowrap;
}