/* NOTE: To activate this stylesheet check the init-file in "/web/apps/dc/js/init.js"! */

/* Keyframes */
/* The effect being applied when highlighting a newly created entry */
@keyframes entry-highlight-customized {
  0%   { box-shadow: inset -150px 0px 180px transparent; }
  50%  { box-shadow: inset -150px 0px 180px #fff1d6; }
  100% { box-shadow: inset -150px 0px 180px transparent; }
}

/* The effect being applied when highlighting a previously saved entry */
@keyframes entry-highlight-edited-customized {
  0%   { box-shadow: inset -150px 0px 180px transparent; }
  50%  { box-shadow: inset -150px 0px 180px #04b7ff; }
  100% { box-shadow: inset -150px 0px 180px transparent; }
}


/* Color of the main content panels (green by default) */
/* Color of the main content outer border */
body.customized .panel-custom {
  border-color: #0094D0;
}

/* Color of the main content panel header */
body.customized .panel-custom > .panel-heading {
  color: #005F70;
  border-color: #0094D0;
  background-color: #04b7ff;
}

/* Color of the main content panel body */
body.customized .panel-custom > .panel-body {
  background-color: #ffffff;
}



/* Color of table rows when hovering */
body.customized table.table-content > tbody > [name="entry"]:hover,
body.customized .table-content > div.row:hover {
  background-color: #faf3e5 !important;
}



/* The background for all "edit" windows */
body.customized .table-content [name="entry-slider"],
body.customized .gradient-background {
  background-color: #fefff5 !important; /* 1% lighter (in HSL) than primary background color (first color) */
  background: linear-gradient(#fefff2, #ffdada);
}



/* The color of the row, when it is being edited (via click on the pen icon) */
body.customized [name="entry"].inline.editing {
  background-color: #fefff2;
}



/* Colors for tables within the "edit"-windows of any entry */
/* Even table rows color (hot hovering) */
body.customized .table-content [name="entry-slider"] .table-content > tbody > tr:nth-of-type(even),
body.customized .table-content [name="entry-slider"] .table-content > div.row:nth-of-type(even) {
  background-color: rgba(0, 0, 0, 0.015);
}

/* Odd table rows color (hot hovering) */
body.customized .table-content [name="entry-slider"] .table-content > tbody > tr:nth-of-type(odd),
body.customized .table-content [name="entry-slider"] .table-content > div.row:nth-of-type(odd) {
  background-color: rgba(255, 175, 0, 0.1);
}

/* Table row color when hovering */
body.customized .table-content [name="entry-slider"] .table-content > tbody > tr:hover,
body.customized .table-content [name="entry-slider"] .table-content > div.row:hover {
  background-color: rgba(255, 175, 0, 0.33);
}



/* Colors for the navigation menu for (Sub-)Tenants and VPN Groups (with stuff like "Edit", "Delete", "Subtenants", ...) */
/* Color for the currently selected item */
body.customized .nav.nav-tabs[role="tablist"] > li[role="presentation"].active > a[role="tab"] {
  background-color: #ffbc9c;
}

/* Color for the currently selected item, when hovered */
body.customized .nav.nav-tabs[role="tablist"] > li[role="presentation"].active > a[role="tab"]:hover {
  background-color: #ffbc9c;
}

/* Color of the blue separation borders on the left and right side of the menu content */
body.customized table.entry-navigation > tbody > tr > td:first-of-type,
body.customized table.entry-navigation > tbody > tr > td:last-of-type {
  border-color: #ffbc9c;
}



/* Border around editable entry fields within table rows */
body.customized .editable:hover {
  border-color: #d29d32;
}



/* Hourglass that appears during load processes */
body.customized .hourglass.waiting::before,
body.customized .table-content [name="entry-slider"].waiting::before,
body.customized .table-content [name="entry-slider"]:empty::before {
  color: #ffe28a;
}