/* Frontend widget and button edge accents.
   Palette: Golden Sunstone, Aquamarine Blue, Rosebud Pink, Soft Violet, Pale Lavender. */
:root {
  --edge-golden-sunstone: #D9B104;
  --edge-aquamarine-blue: #69C1D1;
  --edge-rosebud-pink: #C5778A;
  --edge-soft-violet: #978FB9;
  --edge-pale-lavender: #D1C3DB;
  --edge-accent-line: linear-gradient(135deg, #D9B104 0%, #69C1D1 24%, #C5778A 48%, #978FB9 68%, #D1C3DB 84%, #D9B104 100%);
  --edge-accent-soft: linear-gradient(135deg, rgba(217, 177, 4, .66), rgba(105, 193, 209, .54) 28%, rgba(197, 119, 138, .46) 54%, rgba(151, 143, 185, .42) 72%, rgba(209, 195, 219, .48) 88%, rgba(217, 177, 4, .42));
  --edge-accent-focus: 0 0 0 1px rgba(217, 177, 4, .18), 0 0 0 3px rgba(151, 143, 185, .24), 0 8px 22px rgba(197, 119, 138, .10);
  --edge-accent-hover: 0 0 0 1px rgba(105, 193, 209, .20), 0 6px 18px rgba(197, 119, 138, .12);
  --edge-accent-inset: inset 0 1px 0 rgba(255, 255, 255, .35);
  --edge-accent-width: 1px;
  --edge-accent-radius: inherit;
}

.edge-accent,
.widget,
.dashboard-widget,
.widget-container,
.widget-body,
.panel,
.panel-body,
.box,
.box-body,
.card,
.card-body,
.content-card,
.service-card,
.profile-card,
.booking-card,
.payment-card,
.wallet-card,
.trip-card,
.order-card,
.store-card,
.listing-card,
.event-card,
.section-card,
.account-box,
.form-box,
.content-box,
.info-box,
.summary-box,
.inner,
.container-inner,
.content-wrapper,
.section-block,
.content-block,
.well,
.jumbotron,
.modal-content,
.dropdown-menu,
.popover,
.list-group,
.list-group-item,
.table,
.data-table,
.grid,
.pagination > li > a,
.pagination > li > span,
.page-link,
.nav-tabs > li > a,
.nav-pills > li > a,
.tab-link,
.input-group,
.select2-container .select2-selection {
  border: var(--edge-accent-width) solid transparent !important;
  background-image: linear-gradient(var(--edge-surface, var(--surface, #fff)), var(--edge-surface, var(--surface, #fff))), var(--edge-accent-soft) !important;
  background-origin: border-box !important;
  background-clip: padding-box, border-box !important;
  box-shadow: var(--edge-accent-inset) !important;
}

.btn,
.btn-primary,
.btn-secondary,
.btn-success,
.btn-danger,
.btn-warning,
.btn-info,
.btn-default,
.button,
.button-primary,
.button-secondary,
.button-outline,
.action-button,
.quick-action,
.widget-action-btn,
a.btn,
button,
input[type="button"],
input[type="submit"],
input[type="reset"] {
  border: var(--edge-accent-width) solid rgba(105, 193, 209, .42) !important;
  border-image-source: var(--edge-accent-line) !important;
  border-image-slice: 1 !important;
  background-origin: padding-box !important;
  background-clip: padding-box !important;
  box-shadow: var(--edge-accent-inset) !important;
}

.btn-link {
  border-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

.edge-accent:hover,
.widget:hover,
.dashboard-widget:hover,
.widget-container:hover,
.panel:hover,
.box:hover,
.card:hover,
.content-card:hover,
.service-card:hover,
.profile-card:hover,
.booking-card:hover,
.payment-card:hover,
.wallet-card:hover,
.trip-card:hover,
.order-card:hover,
.store-card:hover,
.listing-card:hover,
.event-card:hover,
.section-card:hover,
.account-box:hover,
.form-box:hover,
.content-box:hover,
.info-box:hover,
.summary-box:hover,
.list-group-item:hover,
.btn:hover,
.button:hover,
.action-button:hover,
.quick-action:hover,
.widget-action-btn:hover,
a.btn:hover,
button:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover {
  box-shadow: var(--edge-accent-inset), var(--edge-accent-hover) !important;
}

.edge-accent:focus-within,
.widget:focus-within,
.panel:focus-within,
.box:focus-within,
.card:focus-within,
.content-card:focus-within,
.service-card:focus-within,
.profile-card:focus-within,
.booking-card:focus-within,
.payment-card:focus-within,
.wallet-card:focus-within,
.trip-card:focus-within,
.order-card:focus-within,
.store-card:focus-within,
.listing-card:focus-within,
.event-card:focus-within,
.form-box:focus-within,
.content-box:focus-within,
.info-box:focus-within,
.summary-box:focus-within,
.btn:focus,
.button:focus,
.action-button:focus,
.quick-action:focus,
.widget-action-btn:focus,
a.btn:focus,
button:focus,
input[type="button"]:focus,
input[type="submit"]:focus,
input[type="reset"]:focus,
.form-control:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
input[type="tel"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus,
.select2-container.select2-container--open .select2-selection {
  border-color: transparent !important;
  outline: 0 !important;
  box-shadow: var(--edge-accent-inset), var(--edge-accent-focus) !important;
}

.form-control:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
input[type="tel"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus {
  background-image: linear-gradient(var(--edge-input-surface, #fff), var(--edge-input-surface, #fff)), var(--edge-accent-line) !important;
  background-origin: border-box !important;
  background-clip: padding-box, border-box !important;
}

.alert,
.alert-success,
.alert-info,
.alert-warning,
.alert-danger,
.notification {
  border-left: 3px solid var(--edge-aquamarine-blue) !important;
  box-shadow: inset 1px 0 0 rgba(151, 143, 185, .34) !important;
}

.progress,
.badge,
.label,
.tag {
  border: 1px solid rgba(105, 193, 209, .30) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22) !important;
}

.progress-bar {
  background-image: linear-gradient(90deg, #D9B104 0%, #69C1D1 30%, #C5778A 54%, #978FB9 72%, #D1C3DB 88%, #D9B104 100%) !important;
}

.table > thead > tr > th,
.table > tbody > tr > td,
.data-table th,
.data-table td,
.grid th,
.grid td {
  border-color: rgba(105, 193, 209, .24) !important;
}

.is-active,
.active.edge-accent,
.widget.active,
.panel.active,
.box.active,
.card.active,
.list-group-item.active,
.nav-tabs > li.active > a,
.nav-pills > li.active > a,
.tab-link.active,
.pagination > li.active > a,
.pagination > li.active > span,
.page-link.active {
  border-color: transparent !important;
  background-image: linear-gradient(var(--edge-active-surface, var(--edge-surface, #fff)), var(--edge-active-surface, var(--edge-surface, #fff))), var(--edge-accent-line) !important;
  box-shadow: var(--edge-accent-inset), 0 0 0 1px rgba(217, 177, 4, .24), 0 8px 20px rgba(197, 119, 138, .10) !important;
}

.btn:disabled,
button:disabled,
input:disabled,
.disabled,
[aria-disabled="true"] {
  box-shadow: inset 0 0 0 1px rgba(151, 143, 185, .18) !important;
  opacity: .65;
}

@media (max-width: 768px) {
  :root {
    --edge-accent-hover: 0 0 0 1px rgba(105, 193, 209, .16);
    --edge-accent-focus: 0 0 0 1px rgba(217, 177, 4, .16), 0 0 0 3px rgba(151, 143, 185, .18);
  }
}
