/*
-------------------------------------
TYPOGRAPHY
-------------------------------------
*/

a {
  text-decoration: none !important;
}

* {
  font-family: "Poppins", Arial, Helvetica, sans-serif;
}

.ace_editor,
.ace_editor * {
  font:
    12px / normal "Monaco",
    "Menlo",
    "Ubuntu Mono",
    "Consolas",
    "Source Code Pro",
    "source-code-pro",
    monospace !important;
}

#header #user-tools,
#header #logout-form button,
.dashboard .module th,
.module thead th,
#nav-sidebar .module th,
.breadcrumbs {
  text-transform: capitalize;
}

.app-cms.module caption {
  text-transform: uppercase;
}

#nav-sidebar .current-app .section:link,
#nav-sidebar .current-app .section:visited {
  font-weight: normal;
}

h2 {
  font-weight: 500;
}

label.required {
  font-weight: 500;
}

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

:root {
  --th-1: #fff;
  --th-2: #7c8499;
  --th-3: #f6f7fa;
  --th-4: #eff1f6;
  --th-5: #2f15af;
  --th-6: #3a14c4;
  --th-7: #2a2b2d;
  --th-8: #ef233c;
  --th-9: #eff1f6;
  --th-10: #6666ff;

  --primary: #3a14c4;
  --secondary: #3a14c4;
  --accent: #ef233c;
  --primary-fg: #fff;
  --body-fg: #2a2b2d;
  --body-bg: #fff;
  --body-quiet-color: #7c8499;
  --body-loud-color: #2a2b2d;
  --header-color: #22129b;
  --breadcrumbs-fg: #fff;
  --link-fg: #2f15af;
  --link-hover-color: #2a2b2d;
  --link-selected-fg: #2a2b2d;
  --hairline-color: #e8e8e8;
  --border-color: #ccc;
  --error-fg: #ef233c;
  --message-success-bg: #dfd;
  --message-warning-bg: #ffc;
  --message-error-bg: #ffefef;
  --darkened-bg: #f6f7fa;
  --selected-bg: #eff1f6;
  --selected-row: transparent;
  --button-fg: #fff;
  --button-hover-bg: #6666ff;
  --default-button-hover-bg: #2f15af;
  --close-button-bg: #747474;
  --close-button-hover-bg: #333;
  --delete-button-bg: #ef233c;
  --delete-button-hover-bg: #b61717;

  --font-family-primary: "Poppins", Arial, Helvetica, sans-serif;
}

/*--- BACKGROUND COLOR ---*/

.login #header,
.module,
.login .form-row #id_username,
.login .form-row #id_password,
#nav-sidebar #nav-filter,
.cp-editor .components .components {
  background-color: transparent;
}

.dashboard tr:nth-child(even),
#nav-sidebar tr,
#toolbar,
.component-form {
  background-color: var(--th-1);
}

ul.messagelist li,
tr:nth-child(even),
tr:nth-child(even) .errorlist,
tr:nth-child(odd) + .row-form-errors,
tr:nth-child(odd) + .row-form-errors .errorlist,
.cp-editor .title-bar,
#nav-sidebar .module caption,
.module h2,
.module caption,
select option {
  background-color: var(--th-3);
}

.dashboard,
.change-list,
.change-form,
body {
  background-color: var(--th-4);
}

div.breadcrumbs {
  background-color: var(--th-5);
}

#header,
  /*.inline-group h2,*/
  .object-tools a,
.object-tools a:link,
.object-tools a:visited,
.object-tools li,
.dashboard .module:hover caption,
.cp-editor .component-form:hover .title-bar {
  background-color: var(--th-6);
}

.object-tools a:hover,
input[type="submit"].default:hover,
input[type="checkbox"]:checked,
input[type="checkbox"]:enabled:checked,
.cp-editor .component-form:hover .component-form .title-bar {
  background-color: var(--th-10);
}

/* --- COLOR --- */

.object-tools a,
.object-tools a:link,
.object-tools a:visited,
.dashboard .module:hover caption a,
.cp-editor .root-wrapper-controls button,
.cp-editor .component-form:hover label.css_class,
.cp-editor .component-form:hover .controls button,
.cp-editor .component-form:hover .title-bar .title input,
.cp-editor .component-form:hover .title-bar .controls button:hover {
  color: var(--th-1);
}

ul.messagelist li,
.cp-editor label.css_class,
.cp-editor .controls button,
.cp-editor .component-form:hover .wrapper-controls button,
a:link,
a:visited,
#nav-sidebar #nav-filter,
.module h2,
#toolbar,
#toolbar form input[type="submit"] {
  color: var(--th-2);
}

#header #user-tools,
#header a:link,
#header a:visited,
#logout-form button,
div.breadcrumbs {
  color: var(--th-3);
}

#header #user-tools strong {
  color: var(--th-4);
}

.cp-editor .controls button:hover,
.cp-editor .title-bar .title input,
.cp-editor .component-form:hover .title-bar .title input:focus,
a:hover,
.dashboard .module caption a,
#nav-sidebar .module caption a,
#nav-sidebar .current-app .section:link,
#nav-sidebar .current-app .section:visited {
  color: var(--th-7);
}

/* --- BORDER COLOR --- */

#toolbar form input[type="submit"] {
  border-color: var(--th-2);
}

div.breadcrumbs,
.object-tools li {
  border-color: var(--th-5);
}

td,
th,
#nav-sidebar #nav-filter,
#toolbar #searchbar {
  border-color: var(--th-9);
}

/*
-------------------------------------
OTHER STYLE ELEMENTS
-------------------------------------
*/

/* --- ICONS --- */

.addlink,
.changelink,
.inlinechangelink,
.viewlink,
.inlineviewlink,
.module caption {
  background-repeat: no-repeat;
}

.addlink,
.changelink,
.inlinechangelink,
.viewlink,
.inlineviewlink {
  background-position: left center;
}

.addlink {
  background-image: url(../assets/add-icon-1.svg);
  background-size: 10px;
  padding-left: 20px;
}

.object-tools a.addlink {
  background-image: url(../assets/add-icon-2.svg);
  background-size: 12px;
  background-position: center right 15px;
}

.changelink,
.inlinechangelink {
  background-image: url(../assets/edit-icon-1.svg);
  background-size: 13px;
  padding-left: 20px;
}

.viewlink,
.inlineviewlink {
  background-image: url(../assets/view-icon-1.svg);
  background-size: 17px;
  padding-left: 24px;
}

.app-blog.module caption,
.app-catalogue.module caption,
.app-events.module caption,
.app-portfolio.module caption {
  background-image: url(../assets/id-icon-1.svg);
  background-size: 25px;
  background-position: center right 18px;
  padding-right: 60px;
}