/* CSS color variables */
:root {
  --main-admin-color: rgba(211, 211, 211, 0.63);
  --accent-admin-color: rgb(253, 253, 253);
  --dark-admin-color: #4d4d4d;
  --button-color: rgb(118, 150, 204);
}

html {
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
}

body {
  font-family: 'Open Sans', sans-serif;
}

/* added by diewebe */
.topbar h1 {
  color: var(--dark-admin-color) !important;
}

/* Header background colour for main page content boxes */
.dash-content header {
  background-color: var(--main-admin-color);
}

/* added by diewebe */
a.logout {
  border-radius: 5px !important;
}

/* Bold text for various various headings labels and taskbars */
.form-simple label,
.form-simple .fieldset-inner .legend-wrap,
.repeater-heading {
  font-weight: 600;
}

/* Color for admin dividers */
.divider,
.ui-sortable-handle,
.smartbar {
  font-weight: 600;
  font-size: 1.15em;
  background-color: var(--main-admin-color) !important;
}

.divider,
.smartbar {
  outline: 1px solid var(--dark-admin-color);
}

/* Better definition for repeater */
.repeater {
  margin-left: 72px;
  border-bottom: 0;
}

.repeated-item {
  margin-bottom: .5rem;
  border: 1px solid var(--main-admin-color);
}

.repeated-fields {
  background-color: var(--accent-admin-color);
}

.repeater-footer {
  border: 1px solid var(--main-admin-color);
}

/* Outline for blocks add bar */
.block-add-bar {
  border: 0px solid var(--dark-admin-color);
  padding: 10px;
}

/* added by diewebe */
a.block-add {
  color: #FFF !important;
  background: rgb(118, 150, 204) !important;
  border-radius: 5px;
  margin: 0 2px; 
}

a.block-add:hover {
  background: var(--dark-admin-color) !important;
}

/* Drag&Drop article (by diewebe) */
h2.divider:hover {
  color: #FFF !important;
  background: rgb(118, 150, 204) !important;
  cursor: move;
}

/* Making link text more visible */
a.primary:link,
a.primary:visited,
.primary {
  font-weight: 600;
}

/* Button border and background colour */
.title-panel .button,
.button.to-the-top,
.button.button-small.button-icon.icon-left.action-info,
.title-panel .button.button-icon {
  background-color: var(--button-color);
  border: 1px solid var(-var(--button-color));
  color: var(--accent-admin-color);
}

/* Button text and fill colour */
.button.to-the-top.button-icon svg,
.title-panel .button.button-icon svg,
.button.button-small.button-icon.icon-left.action-info,
.button.button-small.button-icon.icon-left.action-info svg,
.button.to-the-top.button-icon  span,
.title-panel .button.button-icon  span {
  fill: var(--accent-admin-color);
  color: var(--accent-admin-color);
  font-weight: 600;
}

/* added by diewebe */
input.button {
  color: #FFF !important;
  border: 0 !important;
  background: rgb(118, 150, 204) !important;
}

input.button:hover {
  background: var(--dark-admin-color) !important;
}

/* Adjusting smartbar and divider icon position for larger fonts */
.smartbar a svg, .smartbar button svg {
  margin-top: 6px;
}

.divider-toggle {
  position: relative;
  bottom: 4px;
}

/* Lighter color for smartbar active tab */
.tab-active {
  background-color: var(--accent-admin-color) !important;
}

/* ==============================
   Side Menu Font Awesome 5 Icons
   ==============================

  Unicodes used:
  Pages: "\f0c5"
  Events: "\f073"
  Forms: "\f15c"
  Logger: "\f022"
  Admin Style: "\f1fc"
  Reviews: "\f086"
  SEO: "\f201"
  Blog: "\f02d"
  Categories: "\f02c"
  Assets: "\f03e"
  
  *Font Awesome 5 requires the font-weight: 900; for solid icons
*/

.appmenu li::before {
    margin-right: 15px;
    padding-top: 12px;
    display: inline-block;
    font-family: Font Awesome\ 5 Free;
    font-size: 1em;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    color: #4D4D4D;
}

.appmenu-container > .appmenu  li:nth-child(1)::before {
    content: "\f0c5";

}

.appmenu-container > .appmenu  li:nth-child(2)::before {
    content: "\f02d";
    font-weight: 900;
}

.appmenu li:nth-child(3)::before {
    content: "\f201";
    font-weight: 900;
}

.appmenu li:nth-child(4)::before {
    content: "\f086";
}

.appmenu li:nth-child(5)::before {
    content: "\f1fc";
    font-weight: 900;
}

.appmenu li:nth-child(6)::before {
    content: "\f022";
}

.appmenu li:nth-child(7)::before {
    content: "\f15c";
}

.appmenu li:nth-child(8)::before {
    content: "\f073";
}

.utilmenu-container > .appmenu  li:nth-child(1)::before {
    content: "\f02c";
    font-weight: 900;
}

.utilmenu-container > .appmenu  li:nth-child(2)::before {
    content: "\f03e";
}