@import url("light/jquery-ui.css");
@import url("light/jquery.miniColors.css");
@import url("light/jquery.tipsy.css");
@import url("light/jquery.uniform.css");
@import url("light/jquery.wysiwyg.css");
@import url("light/jquery.fullcalendar.css");
@import url("light/jquery.elfinder.css");
@import url("light/jquery.fancybox.css");
@import url("light/jquery.datatables.css?v=1");

/* ---------------------------------------------------------------------- */

/* 99CC33 --
/*---------------------------------------------------------------------- */

/* ---------------------------------------------------------------------- */

/* bg/01.png http://ptrn.it/iglrOa
/* bg/02.png http://ptrn.it/ldfM3q
/* bg/03.png http://ptrn.it/jJseqP
/* bg/04.png http://ptrn.it/mkP0FP
/* bg/05.png http://ptrn.it/mntuwU
/* bg/06.png http://ptrn.it/kj7OMC
/* bg/07.png http://ptrn.it/l9Ehl8
/* bg/08.png http://ptrn.it/lOwe5N
/* bg/09.png http://ptrn.it/muLiXq
/* bg/10.png http://ptrn.it/mjwbxK
/* bg/11.png http://ptrn.it/kq6NGq
/* bg/12.png http://ptrn.it/ilzOva
/* bg/13.png http://ptrn.it/jNcpdS
/* bg/14.png http://ptrn.it/iVpjzW
/*---------------------------------------------------------------------- */

.bg01 {
  background-image: url("images/bg/01.png");
}

.bg02 {
  background-image: url("images/bg/02.png");
}

.bg03 {
  background-image: url("images/bg/03.png");
}

.bg04 {
  background-image: url("images/bg/04.png");
}

.bg05 {
  background-image: url("images/bg/05.png");
}

.bg06 {
  background-image: url("images/bg/06.png");
}

.bg07 {
  background-image: url("images/bg/07.png");
}

.bg08 {
  background-image: url("images/bg/08.png");
}

.bg09 {
  background-image: url("images/bg/09.png");
}

.bg10 {
  background-image: url("images/bg/10.png");
}

.bg11 {
  background-image: url("images/bg/11.png");
}

.bg12 {
  background-image: url("images/bg/12.png");
}

.bg13 {
  background-image: url("images/bg/13.png");
}

.bg14 {
  background-image: url("images/bg/14.png");
}

/* pt-sans-regular - latin */
@font-face {
  font-family: "PT Sans";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/pt-sans-v11-latin-regular.eot"); /* IE9 Compat Modes */
  src:
    local("PT Sans"),
    local("PTSans-Regular"),
    url("../fonts/pt-sans-v11-latin-regular.eot?#iefix")
      format("embedded-opentype"),
    /* IE6-IE8 */ url("../fonts/pt-sans-v11-latin-regular.woff2")
      format("woff2"),
    /* Super Modern Browsers */ url("../fonts/pt-sans-v11-latin-regular.woff")
      format("woff"),
    /* Modern Browsers */ url("../fonts/pt-sans-v11-latin-regular.ttf")
      format("truetype"),
    /* Safari, Android, iOS */
      url("../fonts/pt-sans-v11-latin-regular.svg#PTSans") format("svg"); /* Legacy iOS */
}

/* pt-sans-italic - latin */
@font-face {
  font-family: "PT Sans";
  font-style: italic;
  font-weight: 400;
  src: url("../fonts/pt-sans-v11-latin-italic.eot"); /* IE9 Compat Modes */
  src:
    local("PT Sans Italic"),
    local("PTSans-Italic"),
    url("../fonts/pt-sans-v11-latin-italic.eot?#iefix")
      format("embedded-opentype"),
    /* IE6-IE8 */ url("../fonts/pt-sans-v11-latin-italic.woff2") format("woff2"),
    /* Super Modern Browsers */ url("../fonts/pt-sans-v11-latin-italic.woff")
      format("woff"),
    /* Modern Browsers */ url("../fonts/pt-sans-v11-latin-italic.ttf")
      format("truetype"),
    /* Safari, Android, iOS */
      url("../fonts/pt-sans-v11-latin-italic.svg#PTSans") format("svg"); /* Legacy iOS */
}

/* pt-sans-700 - latin */
@font-face {
  font-family: "PT Sans";
  font-style: normal;
  font-weight: 700;
  src: url("../fonts/pt-sans-v11-latin-700.eot"); /* IE9 Compat Modes */
  src:
    local("PT Sans Bold"),
    local("PTSans-Bold"),
    url("../fonts/pt-sans-v11-latin-700.eot?#iefix") format("embedded-opentype"),
    /* IE6-IE8 */ url("../fonts/pt-sans-v11-latin-700.woff2") format("woff2"),
    /* Super Modern Browsers */ url("../fonts/pt-sans-v11-latin-700.woff")
      format("woff"),
    /* Modern Browsers */ url("../fonts/pt-sans-v11-latin-700.ttf")
      format("truetype"),
    /* Safari, Android, iOS */ url("../fonts/pt-sans-v11-latin-700.svg#PTSans")
      format("svg"); /* Legacy iOS */
}

/* pt-sans-700italic - latin */
@font-face {
  font-family: "PT Sans";
  font-style: italic;
  font-weight: 700;
  src: url("../fonts/pt-sans-v11-latin-700italic.eot"); /* IE9 Compat Modes */
  src:
    local("PT Sans Bold Italic"),
    local("PTSans-BoldItalic"),
    url("../fonts/pt-sans-v11-latin-700italic.eot?#iefix")
      format("embedded-opentype"),
    /* IE6-IE8 */ url("../fonts/pt-sans-v11-latin-700italic.woff2")
      format("woff2"),
    /* Super Modern Browsers */ url("../fonts/pt-sans-v11-latin-700italic.woff")
      format("woff"),
    /* Modern Browsers */ url("../fonts/pt-sans-v11-latin-700italic.ttf")
      format("truetype"),
    /* Safari, Android, iOS */
      url("../fonts/pt-sans-v11-latin-700italic.svg#PTSans") format("svg"); /* Legacy iOS */
}

/* ---------------------------------------------------------------------- */

/* Scalable Font System - CSS Custom Properties
/* Base: 16px root allows easy rem calculations (1rem = 16px)
/* To scale all fonts: adjust --font-size-root value
/*---------------------------------------------------------------------- */

:root {
  /* Base font size - controls all rem-based sizes */
  --font-size-root: 16px;

  /* Font scale using rem (based on 16px root) */
  --font-size-2xs: 0.625rem;   /* 10px */
  --font-size-xs: 0.6875rem;   /* 11px */
  --font-size-sm: 0.75rem;     /* 12px */
  --font-size-md: 0.8125rem;   /* 13px */
  --font-size-base: 0.875rem;  /* 14px */
  --font-size-md-lg: 0.9375rem; /* 15px */
  --font-size-lg: 1rem;        /* 16px */
  --font-size-xl: 1.125rem;    /* 18px */
  --font-size-2xl: 1.25rem;    /* 20px */
  --font-size-3xl: 1.5rem;     /* 24px */
  --font-size-4xl: 1.75rem;    /* 28px */
  --font-size-5xl: 2rem;       /* 32px */

  /* Line heights */
  --line-height-tight: 1.1;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;

  /* Color palette - Primary */
  --color-primary: #1f77ca;
  --color-primary-hover: #1565c0;
  --color-primary-active: #004080;

  /* Color palette - Success */
  --color-success: #10b981;
  --color-success-hover: #059669;
  --color-success-active: #047857;

  /* Color palette - Danger */
  --color-danger: #ef4444;
  --color-danger-hover: #dc2626;
  --color-danger-active: #b91c1c;

  /* Color palette - Secondary */
  --color-secondary: #6c757d;
  --color-secondary-hover: #5a6268;

  /* Text colors */
  --color-text-primary: #212529;
  --color-text-default: #495057;
  --color-text-muted: #6c757d;
  --color-text-light: #868e96;

  /* Neutral / UI colors */
  --color-border: #e9ecef;
  --color-border-dark: #dee2e6;
  --color-bg-light: #f8f9fa;
  --color-bg-white: #fff;

  /* Button defaults */
  --color-btn-default-bg: #fff;
  --color-btn-default-text: #374151;
  --color-btn-default-border: #d1d5db;
  --color-btn-default-hover-bg: #f9fafb;
  --color-btn-default-hover-border: #9ca3af;
}

/* Apply root font size to html element - this makes rem units work */
html {
  font-size: var(--font-size-root);
}

/* Responsive root font size scaling */
@media screen and (max-width: 480px) {
  :root {
    --font-size-root: 14px;
  }
}

@media screen and (min-width: 481px) and (max-width: 768px) {
  :root {
    --font-size-root: 15px;
  }
}

@media screen and (min-width: 1440px) {
  :root {
    --font-size-root: 17px;
  }
}

/* ---------------------------------------------------------------------- */

/* Reset
/*---------------------------------------------------------------------- */

html,
body,
div,
span,
applet,
object,
iframe,
input,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
font,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-weight: 100;
  font-style: inherit;
  font-size: 100%;
  font-family: inherit;
  vertical-align: baseline;
}

* {
  text-size-adjust: auto;
  -webkit-tap-highlight-color: rgb(0 0 0 / 0%);
}

/* ---------------------------------------------------------------------- */

/* Font Declaration
/*---------------------------------------------------------------------- */

html,
textarea,
input,
input[type="submit"],
button,
a.btn,
span,
div.alert p,
header {
  font-family: "PT Sans", sans-serif;
}

code,
pre {
  font-family: "Courier New", Courier, monospace;
}

/* ---------------------------------------------------------------------- */

/* General Section
/*---------------------------------------------------------------------- */

body,
textarea,
input {
  font-size: var(--font-size-base);
  text-size-adjust: auto;
}

html {
  background-attachment: fixed;
  overflow-y: scroll;
}

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

a:hover {
  text-decoration: underline;
}

a,
a:hover,
a:visited,
a:link {
  color: #000;
}

::selection {
  text-shadow: none;
}

::selection {
  text-shadow: none;
}

header,
footer,
nav,
section {
  display: block;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 100;
}

h1 {
  font-size: var(--font-size-4xl);
  line-height: var(--line-height-tight);
  margin-top: 22px;
}

h2 {
  font-size: var(--font-size-3xl);
  line-height: var(--line-height-tight);
}

h3 {
  font-size: var(--font-size-2xl);
  line-height: var(--line-height-normal);
}

h4 {
  font-size: var(--font-size-xl);
  line-height: var(--line-height-normal);
}

h5 {
  font-size: var(--font-size-lg);
  line-height: var(--line-height-normal);
}

h6 {
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
}

h1 span {
  font-size: var(--font-size-base);
  line-height: var(--line-height-tight);
}

h2 span {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-tight);
}

h3 span {
  font-size: var(--font-size-2xs);
  line-height: var(--line-height-tight);
}

p,
ul,
ol,
pre {
  margin-bottom: 18px;
  line-height: var(--line-height-normal);
  font-size: var(--font-size-sm);
}

blockquote {
  font-size: var(--font-size-lg);
  font-family: Georgia, "Times New Roman", Times, serif;
  font-style: italic;
  border-left: 5px solid;
  padding: 0 18px;
  margin: 36px;
}

li {
  margin-left: 18px;
}

hr {
  display: block;
  height: 0;
  line-height: 0px;
  border: 0;
  border-top: 1px solid;
  border-bottom: 1px solid;
  margin: 16px 0;
  float: none;
  clear: both;
  padding: 0;
}

strong {
  font-weight: 700;
}

em {
  font-style: italic;
}

img {
  border: 0;
}

.small {
  font-size: var(--font-size-xs);
}

/* ---------------------------------------------------------------------- */

/* Pageoptions
/*---------------------------------------------------------------------- */
#pageoptions {
  position: relative;
  overflow: hidden;
  width: auto;
  padding: 0;
  min-height: 20px;
}

#pageoptions h1,
#pageoptions h2,
#pageoptions h3,
#pageoptions h4,
#pageoptions h5,
#pageoptions h6 {
}

#pageoptions ul {
  overflow: hidden;
  margin: 0;
  padding: 1px 6px;
}

#pageoptions ul li {
  float: right;
  list-style: none;
  padding: 0;
  margin: 0;
  margin-left: 1px;
}

#pageoptions ul li a {
  text-decoration: none;
  padding: 0 8px 6px;
  -moz-border-radius-topleft: 2px;
  border-top-left-radius: 2px;
  -moz-border-radius-topright: 2px;
  border-top-right-radius: 2px;
}

#pageoptions ul li a:hover,
#pageoptions ul li a.active {
}

#pageoptions > div {
  position: absolute;
  left: 15px;
  right: 15px;
  padding: 15px;
  overflow: hidden;
  min-height: 400px;
  -moz-border-radius-topleft: 2px;
  border-top-left-radius: 2px;
  -moz-border-radius-topright: 2px;
  border-top-right-radius: 2px;
}

#pageoptions div li {
  float: none;
}

/* ---------------------------------------------------------------------- */

/* Tables
/*---------------------------------------------------------------------- */

table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 18px;
}

table td,
table th {
  border: 1px solid;
  padding: 6px 3px;
  text-align: center;
}

table th {
  font-weight: 700;
}

.table_text {
  text-align: left;
  padding-left: 5px;
}

div.chart .legend table {
  border: 0;
  width: auto;
}

div.chart {
  margin-bottom: 18px;
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
  position: relative !important;
}

/* Chart type switcher toolbar - positioned in widget header */
.chart-type-switcher {
  z-index: 100;
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.chart-type-switcher button {
  line-height: 1;
}

.chart-type-switcher button svg {
  display: block;
}

/* Ensure widget header can contain the switcher */
.widget > header,
.widget > .widget-header,
.widget > h3,
.widget > h4 {
  position: relative;
}

/* Force Chart.js canvas to fit within chart container */
div.chart canvas,
div.chart .flot-base,
div.chart .flot-overlay {
  max-width: 100% !important;
}

div.chart .legend table td {
  vertical-align: middle;
  text-align: center;
  background-color: #f6f6f6;
}

div.chart .legend table td.legendColorBox {
  opacity: 0.6;
  filter: alpha(opacity=60);
}

table.documentation {
}

table.documentation th,
table.documentation td {
  text-align: left;
}

/* ---------------------------------------------------------------------- */

/* Datatables
/*---------------------------------------------------------------------- */

.dataTables_length div {
  float: none !important;
  margin: 0;
}

/* ---------------------------------------------------------------------- */

/* Header
/*---------------------------------------------------------------------- */

header {
  position: relative;
  border-top: 1px solid;
  z-index: 10;
  -moz-border-radius-topleft: 2px;
  border-top-left-radius: 2px;
  -moz-border-radius-topright: 2px;
  border-top-right-radius: 2px;
}

#logo {
  height: 24px;
  padding: 18px 0 18px 15px;
  width: 204px;
  border: 0;
  -moz-border-radius-topleft: 2px;
  border-top-left-radius: 2px;
  background-color: #fff;
  background: url("images/EMO-LOGO_1120x.svg") 0 no-repeat;
  background-size: contain;
}

#logo,
#logo a {
  font-weight: 700;
  font-size: var(--font-size-2xl);
  text-decoration: none;
  text-indent: -99999px;
}

#logo a {
}

#logo_login {
  height: 50px;
  padding: 18px 0 18px 15px;
  width: 320px;
  border: 0;
  -moz-border-radius-topleft: 2px;
  border-top-left-radius: 2px;
  background-size: contain !important;
  background-repeat: no-repeat;
  background-position: center center;
  background: url("images/EMO-LOGO_1120x.svg") 0 no-repeat;
}

#logo_login,
#logo_login a {
  font-weight: 700;
  font-size: var(--font-size-2xl);
  text-decoration: none;
  text-indent: -99999px;
}

#logo_login a {
}

#header {
  height: 60px;
  position: absolute;
  top: 0;
  left: 240px;
  right: 0;
  border: 0;
  -moz-border-radius-topright: 2px;
  border-top-right-radius: 2px;
}

#header ul {
  width: 75%;
  height: 46px;
  float: left;
  margin: 0;
}

#header ul li {
  list-style: none;
  margin: 0;
}

#header ul li ul {
  width: 100%;
  height: auto;
  float: none;
  padding: 18px 0;
  margin: 0;
}

#header ul li ul li {
  border: 1px solid;
  position: relative;
  float: left;
  margin: 0 10px 0 0;
  display: block;
  border-radius: 2px;
}

#header ul li ul li a {
  padding: 2px 20px 4px;
  font-size: var(--font-size-base);
  display: block;
  border-top: 1px solid;
  border-radius: 2px;
}

#header ul li ul li a:hover {
  text-decoration: none;
}

#header ul li ul li a:active,
#header ul li ul li a.active {
  border: 0;
  padding: 4px 20px 3px;
}

#header ul li ul li:active,
#header ul li ul li.active {
}

#header ul li ul li ul {
  display: none;
  padding: 0;
  -moz-border-radius-bottomleft: 2px;
  border-bottom-left-radius: 2px;
  -moz-border-radius-bottomright: 2px;
  border-bottom-right-radius: 2px;
}

#header ul li ul li ul.shown {
  display: block;
}

#header ul li ul li ul li {
  margin: 0;
  max-width: 180px;
  border-left: 0;
  border-right: 0;
  border: 0;
  border-top: 1px solid;
  float: none;
  border-radius: 0;
}

#header ul li ul li ul li a {
  border-radius: 0;
}

#header ul li ul li ul li:last-child,
#header ul li ul li ul li:last-child a {
  -moz-border-radius-bottomleft: 2px;
  border-bottom-left-radius: 2px;
  -moz-border-radius-bottomright: 2px;
  border-bottom-right-radius: 2px;
}

#header ul li ul li span {
  font-family: sans-serif;
  display: block;
  position: absolute;
  right: -12px;
  top: -12px;
  font-size: var(--font-size-2xs);
  line-height: 10px;
  font-weight: 700;
  padding: 4px 4px 5px;
  text-align: center;
  min-width: 10px;
  z-index: 100;
  border: 1px solid;
  cursor: pointer;
  border-radius: 36px;
}

#searchbox {
  float: right;
  margin: 17px 10px 17px 0;
  padding: 0;

  /* border:1px solid; */
  border-radius: 2px;
}

form#searchform {
  width: 140px;
  padding: 0;
  border: 0;
  border-radius: 2px;
}

form#searchform input#search {
  appearance: none !important;
  padding: 3px 0;
  font-size: var(--font-size-base);
  width: 100%;
  text-align: center;
  border: 0;
  border-top: 1px solid;
  margin: 0;
  font-style: normal;
}

form#searchform input::-webkit-search-decoration,
form#searchform input::-webkit-search-cancel-button,
form#searchform input::-webkit-search-results-button,
form#searchform input::-webkit-search-results-decoration {
  display: none;
}

form#searchform input#search:focus {
  /* border:0; */
  padding: 4px 0 3px;
}

/* ---------------------------------------------------------------------- */

/* Content
/*---------------------------------------------------------------------- */

#content {
  padding: 15px 5px 15px 15px;
  margin: 0;
  min-height: 600px;
  border: 1px solid;
  overflow: visible;
  -moz-border-radius-bottomleft: 2px;
  border-bottom-left-radius: 2px;
  -moz-border-radius-bottomright: 2px;
  border-bottom-right-radius: 2px;
}

.bgsample {
  border: 1px solid;
  float: left;
  margin: 8px;
  padding: 27px 30px;
}

/* ---------------------------------------------------------------------- */

/* Gallery
/*---------------------------------------------------------------------- */

.gallery {
  border: 1px solid;
  padding: 3px;
  overflow: auto;
  border-radius: 2px;
}

.widget .gallery {
  padding: 0;
  border: 0;
}

.gallery .sortable_placeholder {
  margin: 4px;
}

.gallery li {
  margin: 4px;
  position: relative;
  list-style: none;
  float: left;
  padding: 8px;
  border: 1px solid;
  overflow: hidden;
  border-radius: 2px;
}

.gallery li > a {
  display: block;
  margin: 0;
  padding: 0;
  height: 116px;
  width: 116px;
  background-position: center center;
  background-repeat: no-repeat;
  border-radius: 2px;
}

.gallery li img {
  position: relative;
}

.gallery li span {
  position: absolute;
  top: 140px;
  left: 0;
  display: block;
  height: 132px;
  width: 132px;
  padding-top: 4px;
  border-top: 1px solid;
}

.gallery li > a span a {
  /* position:relative; */
  display: block;
  padding-left: 24px;
  margin: 2px 16px;
  background-position: center left;
  background-repeat: no-repeat;
  height: 20px;
}

.gallery li a span a.edit {
}

.gallery li a span a.delete {
}

/* ---------------------------------------------------------------------- */

/* Breadcrumb - Moved to breadcrumb.css
/*---------------------------------------------------------------------- */

/* Breadcrumb styles have been moved to /app/webroot/css/breadcrumb.css
   for better maintainability and modern design */

/* ---------------------------------------------------------------------- */

/* Message Box
/*---------------------------------------------------------------------- */

#wl_msg {
  position: absolute;
  top: 90px;
  right: 25px;
  z-index: 15;
  width: 300px;
}

#wl_msg .msg-box:first-child {
  -moz-border-radius-topleft: 4px;
  border-top-left-radius: 2px;
  -moz-border-radius-topright: 4px;
  border-top-right-radius: 2px;
}

#wl_msg .msg-box:last-child {
  -moz-border-radius-bottomleft: 2px;
  border-bottom-left-radius: 2px;
  -moz-border-radius-bottomright: 2px;
  border-bottom-right-radius: 2px;
}

#wl_msg .msg-box,
#wl_msg .msg-box-close {
  border: 1px solid;
  margin-bottom: 4px;
  display: none;
}

#wl_msg .msg-box-close {
  text-align: center;
  cursor: pointer;
  -moz-border-radius-bottomleft: 2px;
  border-bottom-left-radius: 2px;
  -moz-border-radius-bottomright: 2px;
  border-bottom-right-radius: 2px;
}

#wl_msg .msg-box-close:hover {
}

#wl_msg .msg-box h3,
#wl_msg .msg-close {
  height: 28px;
}

#wl_msg .msg-box h3 {
  border-bottom: 1px solid;
  font-size: var(--font-size-base);
  width: 264px;
  line-height: 30px;
  padding-left: 8px;
  margin: 0;
  float: left;
}

#wl_msg .msg-close {
  border-left: 1px solid;
  border-bottom: 1px solid;
  display: block;
  float: right;
  width: 25px;
  line-height: 1px;
  padding: 0;
  text-indent: -9999px;
  background-position: 50% 50%;
  background-repeat: no-repeat;
}

#wl_msg .msg-close:hover {
}

#wl_msg .msg-content {
  clear: both;
  padding: 10px;
}

/* ---------------------------------------------------------------------- */

/* Alert Boxes
/*---------------------------------------------------------------------- */

div.alert {
  border: 1px solid;
  margin-bottom: 15px;
  cursor: pointer;

  /* background-repeat and background-position removed - now using Lucide icons */
  padding: 10px;
  font-size: var(--font-size-base);
  font-weight: 700;
  margin: 0;
  border-radius: 2px;
  display: flex;
  align-items: center;
  gap: 8px;
}

div.alert code {
  background: none;
  border: 0;
}

form div.alert {
  margin: 15px 4px;
}

div.alert:hover {
  border: 1px solid;
}

div.alert a {
  font-size: var(--font-size-base);
  font-weight: 700;
}

/* ---------------------------------------------------------------------- */

/* Buttons
/*---------------------------------------------------------------------- */

button,
a.btn,
.dataTables_paginate span.paginate_button,
.dataTables_paginate span.paginate_active {
  border: 1px solid;
  position: relative;
  padding: 9px 12px;
  display: inline-block;
  cursor: pointer;
  background-repeat: no-repeat;
  background-position: 4px 5px;
  border-radius: 2px;
  text-decoration: none;
  font-size: var(--font-size-sm);
  font-weight: 700;
  outline: 0 none;
  text-align: center;

  /* text-transform:uppercase; */
  margin: 2px;
  min-height: 22px;
  min-width: 8px;
  white-space: pre-line;
  vertical-align: baseline;
}

button.small,
a.btn.small {
  min-height: 14px;
  line-height: 14px;
  font-size: var(--font-size-xs);
  padding: 4px 7px;
  border-radius: 2px;
}

button.big,
a.btn.big {
  font-size: var(--font-size-base);
  padding: 12px 16px;
}

button.icon,
a.btn.icon {
  padding-left: 27px;
}

button.small.icon,
a.btn.small.icon {
  padding-left: 23px;
  background-position: 0 -2px;
}

button.big.icon,
a.btn.big.icon {
  padding-left: 27px;
  background-position: -0 8px;
}

a.btn.nt,
button.nt {
  background-position: 50% 50%;
  text-indent: -9999px;
}

a.btn.small.nt,
button.small.nt {
  padding-left: 12px;
  padding-right: 12px;
}

button {
}

a.btn {
  line-height: 16px;
  min-height: 16px;
}

.actionListIcon {
  margin-bottom: -4px;
}

button:hover,
a.btn:hover {
}

button:active,
a.btn:active,
.dataTables_paginate span.paginate_active {
  top: 1px;
}

.btn_rightIcon {
  margin: 0 !important;
  vertical-align: middle !important;
  border: none !important;
  text-align: left !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  cursor: pointer !important;

  [data-icon] {
    padding-left: 10px !important;

    &::before {
      content: attr(data-icon);
    }
  }
}

/* ---------------------------------------------------------------------- */

/* Form Elements
/*---------------------------------------------------------------------- */

fieldset {
  padding: 15px;
}

pre {
  white-space: pre-wrap;
  word-wrap: break-word;
  padding: 12px 15px;
  line-height: 18px;
}

pre,
code {
  font-size: var(--font-size-xs);
  padding: 1px 2px;
  border: 1px solid;
  border-radius: 2px;
}

pre code {
  display: block;
  border: 0;
}

input,
textarea {
  width: 99%;
  border: 1px solid;
  padding: 4px 2px;
  margin: 0 1px;
  border-radius: 2px;
}

input.placeholder,
textarea.placeholder {
  font-style: italic;
}

input:focus,
textarea:focus {
  outline: none;
}

select optgroup,
select option {
  font-style: normal;
  border: 0;
}

select option {
  border: 1px solid;
  padding: 3px;
}

select {
  height: 29px;

  /* max-width: 323px; */
  padding-top: 1px;
  border-color: #bbb;
  color: #6f6f6f;
  border-radius: 2px;
}

input[type="submit"],
input[type="checkbox"]:not(.toggle-select),
input[type="radio"],
input[type="button"],
button {
  width: auto !important;
}

input[type="submit"] {
  min-height: 33px;
}

form {
  /* border:1px solid; */

  /* padding:2px; */
  margin-bottom: 18px;
  border-radius: 8px;
}

form:last-child {
  margin-bottom: 0;
}

.widget form {
  border: 0;
}

form .wl_formstatus {
  padding-left: 18px;
}

form fieldset {
  padding: 0;
  margin: 1px;
  border: 1px solid;
  border-bottom: 0;
  margin-top: 18px;
  border-radius: 8px;
}

form fieldset:first-child {
  margin-top: 1px;
}

form label {
  border-top: 1px solid;
  display: block;
  font-size: var(--font-size-base); /* 14px */
  margin: 0;
  padding: 10px; /* 15px 10px */
  font-weight: 600;
  -moz-border-radius-topleft: 8px;
  border-top-left-radius: 8px;
  -moz-border-radius-topright: 8px;
  border-top-right-radius: 8px;
}

form label span {
  font-size: var(--font-size-sm);
}

form span.required {
  padding: 0 4px;
  font-size: var(--font-size-2xs);
  background-repeat: no-repeat;
  background-position: left bottom;
}

form input,
form textarea {
  padding: 6px 2px;
  font-size: var(--font-size-md);
}

form fieldset > section {
  width: 100%;
  border-top: 1px solid;
  border-bottom: 1px solid;
  float: left;
  padding: 0;
  margin: 0;
}

form fieldset > section:first-child {
  -moz-border-radius-topleft: 8px;
  border-top-left-radius: 8px;
  -moz-border-radius-topright: 8px;
  border-top-right-radius: 8px;
}

form fieldset > section:last-child {
  -moz-border-radius-bottomleft: 8px;
  border-bottom-left-radius: 8px;
  -moz-border-radius-bottomright: 8px;
  border-bottom-right-radius: 8px;
}

form fieldset > section > div {
  padding: 15px 1%;
  width: 78%;
  float: right;
  border-left: 1px solid;
  height: 100%;
  min-height: 100%;
}

form fieldset > section > div > div {
  float: none;
  clear: both;
  width: auto;
}

form fieldset > section > div div.date {
  max-width: 230px;
}

form fieldset > section.error > label {
  text-shadow: none;
  font-weight: 700;
}

form fieldset > section > div span {
  font-size: var(--font-size-xs);
}

form fieldset > section.error {
  border-bottom: 1px solid;
}

form fieldset > section.error > label {
  text-shadow: none;
  font-weight: 700;
}

form fieldset > section label {
  border: 0;
  cursor: pointer;
  font-size: var(--font-size-md);
  font-weight: 100;
  float: left;
  background: none;
  filter: none;
  margin: 0;
  width: 16%;
  padding-left: 2px;
  margin-left: 8px;
  text-align: left;
}

form fieldset > section > div > div.checker,
form fieldset > section > div > div.radio {
  display: inline;
  margin: 0;
  clear: both;
  float: none;
}

form fieldset > section > div > div.checker span,
form fieldset > section > div > div.radio span {
  display: inline;
  padding: 4px 10px 4px 0;
  clear: both;
  float: none;
}

form fieldset > section > div label {
  width: auto;
  margin: 0;
  padding: 0;
  padding-top: 3px;
  display: inline;
  float: none;
  font-size: var(--font-size-xs);
  border-radius: 0;
}

form fieldset > section label span {
  font-size: var(--font-size-2xs);
}

form div input {
}

textarea {
  min-height: 70px;
  resize: none;
  overflow: auto;
}

input.date {
  width: 80px;
}

input[type="password"],
input.password {
  width: 150px;
}

div.passwordstrength {
  font-size: var(--font-size-sm);
  padding: 5px 3px;
  text-align: center;
  width: 150px;
  margin: 3px 1px;
  border-radius: 2px;
}

div.passwordstrength.s_1 {
}

div.passwordstrength.s_2 {
}

div.passwordstrength.s_3 {
}

div.passwordstrength.s_4 {
}

div.passwordstrength.s_5 {
}

input.time {
  width: 35px;
  text-align: center;
}

span.timeformat {
  font-size: var(--font-size-xs);
  padding-left: 1px;
}

input.integer,
input.decimal {
  width: 60px;
  text-align: right;
}

input.color {
  width: 60px;
}

/* ---------------------------------------------------------------------- */

/* File Upload
/*---------------------------------------------------------------------- */

div.fileuploadui {
  padding: 0 5px;
  margin-bottom: 5px;
}

div.fileuploadui a {
  margin-right: 10px;
  font-size: var(--font-size-xs);
  display: inline !important;
}

ul.fileuploadpool {
  display: block;
  clear: both;
  margin-bottom: 5px;
  border: 1px solid;
  z-index: 1;
  border-radius: 2px;
  min-height: 68px;
  min-width: 138px;
  overflow: hidden;
  padding: 4px;
}

ul.fileuploadpool.drop {
}

ul.fileuploadpool.single {
  width: 138px;
}

ul.fileuploadpool li {
  font-size: var(--font-size-xs);
  list-style-type: none;
  float: left;
  border: 1px solid;
  margin: 4px;
  padding: 4px;
  height: 50px;
  width: 120px;
  border-radius: 2px;
  animation-name: showfile;
  animation-duration: 0.2s;
  animation-direction: alternate;
  animation-timing-function: ease-out;
}

@keyframes showfile {
  from {
    transform: scale(0);
  }

  to {
    transform: scale(1);
  }
}

@keyframes showfile {
  from {
    transform: scale(0);
  }

  to {
    transform: scale(1);
  }
}

@keyframes showfile {
  from {
    transform: scale(0);
  }

  to {
    transform: scale(1);
  }
}

ul.fileuploadpool li.error {
  text-shadow: none;
}

ul.fileuploadpool li .name {
  display: block;
  height: 20px;
  overflow: hidden;
  white-space: nowrap;
  line-height: 22px;
}

ul.fileuploadpool li a {
  display: block;
  height: 24px;
  width: 24px;
  text-indent: -9999px;
  float: right;
}

ul.fileuploadpool li a:hover {
  text-decoration: none;
}

ul.fileuploadpool li a.cancel {
}

ul.fileuploadpool li a.remove {
}

ul.fileuploadpool li .progress {
  display: block;
  line-height: 1px;
  height: 3px;
  width: 0%;
  border-radius: 2px;
}

ul.fileuploadpool li.success .progress {
}

/* ---------------------------------------------------------------------- */

/* Widgets
/*---------------------------------------------------------------------- */

.widget {
  margin-bottom: 15px;
  border: 1px solid;
  border-radius: 8px;
}

.widget > div {
  margin: 2px;
  padding: 15px 6px 2px;
  border-radius: 8px;
  overflow: hidden;
}

.widget > div > img {
  border-radius: 2px;
}

.widget > div.ui-widget {
  width: 99%;
  padding: 0;
}

.widget .ui-widget-header {
  overflow: hidden;
}

.widget h3 {
  margin: 0;
}

.widget:hover {
  border: 1px solid;
}

.widget.ui-sortable-helper {
}

.widget h3.handle {
  position: relative;
  font-size: var(--font-size-base) !important;
  border-top: 0 solid;
  border-bottom: 1px solid;
  padding: 8px 10px;
  margin: 0;
  line-height: 16px;
  margin-bottom: 1px;
  cursor: pointer;
  -moz-border-radius-topleft: 8px;
  border-top-left-radius: 8px;
  -moz-border-radius-topright: 8px;
  border-top-right-radius: 8px;
}

.widget.sortable h3.handle {
  cursor: move;
}

.widget h3.handle:hover {
}

.widget h3.handle.red {
}

.widget h3.handle.green {
}

.widget h3.handle.blue {
}

.widget h3.handle.yellow {
}

.widget h3.handle .collapse,
.widget h3.handle .reload {
  position: absolute;
  right: 8px;
  top: 4px;
  height: 24px;
  width: 24px;
  background-repeat: no-repeat;
  background-position: center center;
  display: none;
}

.widget h3.handle .reload {
  right: 30px;
}

.widget h3.handle a:first-child {
  right: 8px;
}

.widget:hover h3.handle .collapse,
.widget.loading h3.handle .reload,
.widget:hover h3.handle .reload {
  display: block;
}

.widget h3.handle .collapse {
}

.widget h3.handle .icon {
  /* margin-top:-3px; */
  margin-top: -5px;
  margin-left: -4px;
  height: 24px;
  width: 24px;
  display: inline-block;
  float: left;
  background-position: center;
}

.widget.collapsed {
  border-bottom: 1px solid;
}

.widget.collapsed h3.handle {
  border-bottom: 0;
  -moz-border-radius-bottomright: 2px;
  border-bottom-right-radius: 2px;
}

.widget.collapsed h3.handle .collapse {
}

.widget.number-widget > div ul {
  overflow: auto;
}

.widget.number-widget > div ul li {
  display: block;
  list-style: none;
  border-top: 1px dotted;
  padding: 14px 10px 4px;
  margin: 0;
}

.widget.number-widget > div ul li:first-child {
  border-top: 0;
}

.widget.number-widget > div ul li a {
  font-size: var(--font-size-sm);
  display: block;
}

.widget.number-widget > div ul li a:hover {
  text-decoration: none;
}

.widget.number-widget ul li a span {
  text-align: right;
  display: inline-block;
  width: 130px;
  font-size: var(--font-size-5xl);
  font-weight: 700;
  letter-spacing: -0.05em;
  padding: 2px 6px 2px 0;
}

.sortable_placeholder {
  margin-bottom: 15px;
  border: 1px solid;
  z-index: 1;
  border-radius: 2px;
}

/* ---------------------------------------------------------------------- */

/* Footer
/*---------------------------------------------------------------------- */

footer {
}

/* ---------------------------------------------------------------------- */

/* width
/*---------------------------------------------------------------------- */

.w_5 {
  width: 5% !important;
}

.w_10 {
  width: 10% !important;
}

.w_15 {
  width: 15% !important;
}

.w_20 {
  width: 20% !important;
}

.w_25 {
  width: 25% !important;
}

.w_30 {
  width: 30% !important;
}

.w_33 {
  width: 33% !important;
}

.w_35 {
  width: 35% !important;
}

.w_40 {
  width: 40% !important;
}

.w_45 {
  width: 45% !important;
}

.w_50 {
  width: 50% !important;
}

.w_55 {
  width: 55% !important;
}

.w_60 {
  width: 60% !important;
}

.w_65 {
  width: 65% !important;
}

.w_66 {
  width: 66% !important;
}

.w_70 {
  width: 70% !important;
}

.w_75 {
  width: 75% !important;
}

.w_80 {
  width: 80% !important;
}

.w_85 {
  width: 85% !important;
}

.w_90 {
  width: 90% !important;
}

.w_95 {
  width: 95% !important;
}

.w_5p {
  width: 5px !important;
}

.w_10p {
  width: 10px !important;
}

.w_15p {
  width: 15px !important;
}

.w_20p {
  width: 20px !important;
}

.w_25p {
  width: 25px !important;
}

.w_30p {
  width: 30px !important;
}

.w_35p {
  width: 35px !important;
}

.w_40p {
  width: 40px !important;
}

.w_45p {
  width: 45px !important;
}

.w_50p {
  width: 50px !important;
}

.w_55p {
  width: 55px !important;
}

.w_60p {
  width: 60px !important;
}

.w_65p {
  width: 65px !important;
}

.w_70p {
  width: 70px !important;
}

.w_75p {
  width: 75px !important;
}

.w_80p {
  width: 80px !important;
}

.w_85p {
  width: 85px !important;
}

.w_90p {
  width: 90px !important;
}

.w_95p {
  width: 95px !important;
}

.w_100p {
  width: 100px !important;
}

.w_105p {
  width: 105px !important;
}

.w_110p {
  width: 110px !important;
}

.w_115p {
  width: 115px !important;
}

.w_120p {
  width: 120px !important;
}

.w_125p {
  width: 125px !important;
}

.w_130p {
  width: 130px !important;
}

.w_135p {
  width: 135px !important;
}

.w_140p {
  width: 140px !important;
}

.w_145p {
  width: 145px !important;
}

.w_150p {
  width: 150px !important;
}

.w_155p {
  width: 155px !important;
}

.w_160p {
  width: 160px !important;
}

.w_165p {
  width: 165px !important;
}

.w_170p {
  width: 170px !important;
}

.w_175p {
  width: 175px !important;
}

.w_180p {
  width: 180px !important;
}

.w_185p {
  width: 185px !important;
}

.w_190p {
  width: 190px !important;
}

.w_195p {
  width: 195px !important;
}

.w_200p {
  width: 200px !important;
}

.fl {
  float: left !important;
}

.fr {
  float: right !important;
}

.l {
  text-align: left;
}

.c {
  text-align: center;
}

.j {
  text-align: justify;
}

.r {
  text-align: right;
}

/* ---------------------------------------------------------------------- */

/* Clear Floats
/*---------------------------------------------------------------------- */

/* http://sonspring.com/journal/clearing-floats */
.clear {
  clear: both;
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0;
}

/* http://perishablepress.com/press/2008/02/05/lessons-learned-concerning-the-clearfix-css-hack */
.clearfix::after {
  clear: both;
  content: " ";
  display: block;
  font-size: 0;
  line-height: 0;
  visibility: hidden;
  width: 0;
  height: 0;
}

.clearfix {
  display: inline-block;
}

* html .clearfix {
  height: 1%;
}

.clearfix {
  display: block;
}

/* ---------------------------------------------------------------------- */

/* Grid System (based on the 960 Grid System (http://960.gs)
/*---------------------------------------------------------------------- */

.g1,
.g2,
.g3,
.g4,
.g5,
.g6,
.g7,
.g8,
.g9,
.g10,
.g11,
.g12 {
  display: inline;
  float: left;
  margin-left: 1%;
  margin-right: 1%;
  padding: 9px 0;
}

.alpha {
  margin-left: 0;
}

.omega {
  margin-right: 0;
}

.g1 {
  width: 6.333%;
}

.g2 {
  width: 14.667%;
}

.g3 {
  width: 23%;
}

.g4 {
  width: 31.333%;
}

.g5 {
  width: 39.667%;
}

.g6 {
  width: 48%;
}

.g7 {
  width: 56.333%;
}

.g8 {
  width: 64.667%;
}

.g9 {
  width: 73%;
}

.g10 {
  width: 81.333%;
}

.g11 {
  width: 89.667%;
}

.g12 {
  width: 98%;
}

.p1 {
  padding-left: 8.333%;
}

.p2 {
  padding-left: 16.667%;
}

.p3 {
  padding-left: 25%;
}

.p4 {
  padding-left: 33.333%;
}

.p5 {
  padding-left: 41.667%;
}

.p6 {
  padding-left: 50%;
}

.p7 {
  padding-left: 58.333%;
}

.p8 {
  padding-left: 66.667%;
}

.p9 {
  padding-left: 75%;
}

.p10 {
  padding-left: 83.333%;
}

.p11 {
  padding-left: 91.667%;
}

.s1 {
  padding-right: 8.333%;
}

.s2 {
  padding-right: 16.667%;
}

.s3 {
  padding-right: 25%;
}

.s4 {
  padding-right: 33.333%;
}

.s5 {
  padding-right: 41.667%;
}

.s6 {
  padding-right: 50%;
}

.s7 {
  padding-right: 58.333%;
}

.s8 {
  padding-right: 66.667%;
}

.s9 {
  padding-right: 75%;
}

.s10 {
  padding-right: 83.333%;
}

.s11 {
  padding-right: 91.667%;
}

.ps1 {
  left: 8.333%;
}

.ps2 {
  left: 16.667%;
}

.ps3 {
  left: 25%;
}

.ps4 {
  left: 33.333%;
}

.ps5 {
  left: 41.667%;
}

.ps6 {
  left: 50%;
}

.ps7 {
  left: 58.333%;
}

.ps8 {
  left: 66.667%;
}

.ps9 {
  left: 75%;
}

.ps10 {
  left: 83.333%;
}

.ps11 {
  left: 91.667%;
}

.pl1 {
  left: -8.333%;
}

.pl2 {
  left: -16.667%;
}

.pl3 {
  left: -25%;
}

.pl4 {
  left: -33.333%;
}

.pl5 {
  left: -41.667%;
}

.pl6 {
  left: -50%;
}

.pl7 {
  left: -58.333%;
}

.pl8 {
  left: -66.667%;
}

.pl9 {
  left: -75%;
}

.pl10 {
  left: -83.333%;
}

.pl11 {
  left: -91.667%;
}

/* ---------------------------------------------------------------------- */

/* Layout
/*---------------------------------------------------------------------- */

body {
  margin: 0 15px;
}

header {
  height: 60px;
  z-index: 2;
}

#content {
  overflow: hidden;
  left: 0;
  right: 0;
  top: 0;
  z-index: 1;
}

footer {
  padding: 5px;
  text-align: right;
}

/* ---------------------------------------------------------------------- */

/* Login
/*---------------------------------------------------------------------- */

body#login {
  position: static;
  left: auto;
  right: auto;
  width: 350px;
  margin: 120px auto;
  padding: 2%;
}

body#login #content {
  min-height: 50px;
  padding: 8px;
}

body#login form label {
  padding: 0;
  margin: 0;
  width: 100%;
}

body#login form section {
  width: 100%;
}

body#login form section div {
  width: 90%;
  float: none;
  padding: 0 4% 6px;
  border: 0;
}

body#login form section > div {
  width: 90% !important;
}

body#login form section div input {
  width: 100% !important;
}

body#login form section div input#remember {
  width: auto !important;
}

body#login form section div.checker {
  width: auto !important;
  padding: 0;
  margin: 0;
}

body#login form section label {
  padding: 3% 2% 1%;
  width: 90% !important;
  float: none;
  font-weight: 600;
}

body#login form section label.checkbox div {
  width: 10px;
  padding: 0;
  margin: 0;
}

body#login form section a {
  float: right;
}

/* ---------------------------------------------------------------------- */

/* Wizard
/*---------------------------------------------------------------------- */

body#wizard {
  position: static;
  left: auto;
  right: auto;
  width: 500px;
  margin: 120px auto;
  padding: 0;
}

body#wizard #content {
  min-height: 50px;
  padding: 8px;
}

/* ---------------------------------------------------------------------- */

/* Media Queries
/*---------------------------------------------------------------------- */

/* For very large screens increes the margins */
@media screen and (width >= 1281px) {
  body {
    /* new 2021_10 */

    /* margin-left:5%;
    margin-right:5%; */

    /* margin-left:10%;
    margin-right:10%; */
  }
}

/* Move the Headernav to a drop down menu to the right */
@media screen and (width <= 960px) {
  #header ul#headernav li ul,
  #header ul#headernav li ul.collapsed {
    display: none;
  }

  #header ul#headernav li ul.shown {
    display: block !important;
  }

  #header ul#headernav {
    border-left: 1px solid;
    position: relative;
    float: right;
    height: 60px;
    width: 60px;
    cursor: pointer;
    background-repeat: no-repeat;
    background-position: center center;
  }

  #header ul#headernav li ul {
    position: absolute;
    right: 0;
    width: 170px;
    padding: 0;
    margin: 0;
    top: 60px;
  }

  #header ul#headernav li ul li {
    float: none;
    margin: 0;
    border-bottom: 0;
    border-top: 0;
  }

  #header ul#headernav li ul li a {
    padding: 10px;
  }

  #header ul#headernav li ul li:last-child {
    border-bottom: 1px solid;
  }

  #header ul#headernav li ul span {
    right: 5px;
    top: 10px;
  }

  #header ul#headernav li ul li ul {
    position: relative;
    top: 0;
    padding: 0;
    display: none;
    padding-bottom: 6%;
    z-index: 20;
    width: 99%;
  }

  #header ul#headernav li ul li ul.shown {
    display: block;
  }

  #header ul#headernav li ul li ul li {
    margin: 0 6%;
  }

  #header ul#headernav li ul li ul li a {
    font-size: var(--font-size-sm);
    padding: 5px;
  }

  .g1,
  .g2,
  .g3,
  .g4,
  .g5,
  .g6 {
    padding: 0;
    width: 48%;
  }

  .g7,
  .g8,
  .g9,
  .g10,
  .g11,
  .g12 {
    padding: 0;
    width: 98%;
  }
}

@media screen and (width <= 900px) and (width >= 701px) {
  form fieldset > section > div {
    width: 69%;
  }

  form fieldset > section label {
    width: 24%;
  }
}

/* For more smaller Screens (iPad) */
@media screen and (width <= 700px) {
  header #search,
  header #searchbox {
    max-width: 100px;
  }

  form label {
    padding: 10px 1%;
  }

  form fieldset > section {
    padding-bottom: 8px;
  }

  form fieldset > section > label {
    left: 0;
    right: 0;
    width: 98%;
    margin: 0;
    float: none;
    padding: 1%;
    padding-bottom: 8px;
  }

  form fieldset > section > div {
    float: none;
    width: 98%;
    padding: 2px;
    border: 0;
  }

  .g1,
  .g2,
  .g3,
  .g4,
  .g5,
  .g6,
  .g7,
  .g8,
  .g9,
  .g10,
  .g11,
  .g12 {
    width: 98%;
  }
}

@media screen and (width <= 800px) and (width >= 481px) {
  #content {
    padding: 15px 0 15px 20px;
  }

  #header ul li ul li,
  #header ul li ul li a,
  #header ul#headernav li ul li ul {
    border-radius: 0;
  }

  #header ul li ul li:last-child,
  #header ul li ul li:last-child a {
    -moz-border-radius-bottomleft: 2px;
    border-bottom-left-radius: 2px;
  }
}

/* iPhone and real small devicces */
@media screen and (width <= 480px) {
  body#login {
    position: static;
    left: auto;
    right: auto;
    width: 96%;
    margin: 10px auto;
    padding: 0;
  }

  body#login #content {
    padding: 0;
    padding-top: 20px;
    width: 99%;
  }

  body#login form {
    border: 0;
  }

  body#login form section label {
    border: 0;
  }

  body#login fieldset {
    margin: 0;
  }

  body#login form > section a {
    margin: 10px 4%;
    float: left;
  }

  #pageoptions > div {
    left: 2px;
    right: 2px;
    padding: 15px;
  }

  header #searchbox {
    display: none;
    max-width: 40px;
  }

  header #searchbox input {
    max-width: 40px;
  }

  body {
    width: 96%;
    margin: 1%;
  }

  body,
  header,
  nav,
  #content {
    box-shadow: none;
  }

  #header {
  }

  /* #logo{
        width:25%;
    }
    #logo_login{
        width:25%;
    }
    #logo, header, #content{
        width:100%;
    }
    #logo_login, header, #content{
        width:100%;
    } */

  #content {
    padding: 0;
  }

  form {
    padding: 0;
    margin: 0;
  }

  form input,
  form textarea {
    font-size: var(--font-size-base);
    max-width: 96%;
  }

  #wl_msg {
    right: 5px;
    left: 5px;
    width: auto;
  }

  .g1,
  .g2,
  .g3,
  .g4,
  .g5,
  .g6,
  .g7,
  .g8,
  .g9,
  .g10,
  .g11,
  .g12 {
    width: 100%;
    margin: 0;
  }
}

/* ---------------------------------------------------------------------- */

/* jQuery UI mods
/*---------------------------------------------------------------------- */

.ui-tabs .ui-tabs-nav li {
  margin: 0 2px 0 0 !important;
}

.ui-tabs .ui-tabs-nav,
.ui-tabs {
  padding: 0 !important;
}

.ui-widget {
  padding: 0 !important;
}

.ui-widget-header {
  border: 0 !important;
  border-top: 0 solid !important;
  border-bottom: 0 solid !important;
  background-repeat: repeat !important;
  margin: 0 !important;
}

.ui-widget-header a,
.ui-accordion-header a,
.ui-datepicker-title .ui-datepicker-month,
.ui-datepicker-title .ui-datepicker-year {
  font-size: var(--font-size-base) !important;
}

.ui-state-default a {
  border-top: 0 solid !important;
  border-radius: 2px !important;
}

.ui-tabs .ui-tabs-panel {
  padding: 0 !important;
}

.ui-tabs .ui-tabs-panel p {
  margin: 1em 1.3em !important;
}

.ui-tabs .ui-tabs-selected {
  border-bottom: 0;
}

.ui-accordion-content p {
  margin: 0 !important;
}

.ui-accordion .ui-accordion-header {
  margin-top: 0 !important;
}

.ui-datepicker .ui-widget-header {
  padding: 4px !important;
}

.ui-widget-overlay {
  background-repeat: repeat !important;
}

.ui-slider-range.ui-widget-header {
  background-position: center !important;
  border: 0 !important;
}

.ui-slider-horizontal .ui-slider-handle {
  top: -5px !important;
  min-height: 22px;
  min-width: 18px;
  margin-left: -10px !important;
  cursor: pointer !important;
}

.ui-slider-vertical {
  float: left;
}

.ui-slider-vertical .ui-slider-handle {
  left: -5px !important;
  min-height: 18px;
  min-width: 22px;
  margin-bottom: -10px !important;
  cursor: pointer !important;
}

.ui-slider {
  min-height: 14px;
  min-width: 14px;
  border: 1px solid;
  background-repeat: repeat !important;
  margin: 10px;
}

.ui-slider .ui-slider-handle {
  background-repeat: no-repeat !important;
}

.ui-slider-horizontal .ui-slider-handle {
  background-position: right center !important;
}

.ui-slider-vertical .ui-slider-handle {
  background-position: left center !important;
}

.ui-slider-range {
  border-radius: 4px !important;
}

.ui-menu {
  width: 200px;
  display: none;
  z-index: 200;
  position: absolute;
  overflow: hidden;
}

.ui-menu .ui-menu-divider {
  margin: 5px 0;
  height: 0;
  font-size: 0;
  line-height: 0;
  border-width: 1px 0 0;
}

#ui-datepicker-div {
  z-index: 9999999 !important;
}

.ui-widget-content {
  border: 1px solid #bbb;
  border-color: #ddd #efefef #f1f1f1 !important;
}

/* Corner radius */
.ui-corner-tl {
  -moz-border-radius-topleft: 8px !important;
  border-top-left-radius: 8px !important;
}

.ui-corner-tr {
  -moz-border-radius-topright: 8px !important;
  border-top-right-radius: 8px !important;
}

.ui-corner-bl {
  -moz-border-radius-bottomleft: 8px !important;
  border-bottom-left-radius: 8px !important;
}

.ui-corner-br {
  -moz-border-radius-bottomright: 8px !important;
  border-bottom-right-radius: 8px !important;
}

.ui-corner-top {
  -moz-border-radius-topleft: 8px !important;
  border-top-left-radius: 8px !important;
  -moz-border-radius-topright: 8px !important;
  border-top-right-radius: 8px !important;
}

.ui-corner-bottom {
  -moz-border-radius-bottomleft: 8px !important;
  border-bottom-left-radius: 8px !important;
  -moz-border-radius-bottomright: 8px !important;
  border-bottom-right-radius: 8px !important;
}

.ui-corner-right {
  -moz-border-radius-topright: 8px !important;
  border-top-right-radius: 8px !important;
  -moz-border-radius-bottomright: 8px !important;
  border-bottom-right-radius: 8px !important;
}

.ui-corner-left {
  -moz-border-radius-topleft: 8px !important;
  border-top-left-radius: 8px !important;
  -moz-border-radius-bottomleft: 8px !important;
  border-bottom-left-radius: 8px !important;
}

.ui-corner-all {
  border-radius: 4px !important;
}

.ui-dialog .ui-dialog-titlebar {
  padding: 0.4em 1em;
  position: relative;
  background: #1f77ca;
  color: #fff;
}

/* Filter Forms in app */
.filterLabelField {
  float: left;
  width: 90px;
  padding-top: 6px;
}

.filterLabelElement {
  float: left;
}

.filterLabelElementSearch {
  float: left;
  width: 100%;
}

.filterLabelElementSelect {
  width: 100% !important;
}

.appTable tr:nth-child(even) {
  background: #f6f6f6;
}

.appTable tr:nth-child(odd) {
  background: #fff;
}

.appTable th a {
  font-weight: 700 !important;
}

.appTable td a {
  font-weight: bold !important;
}

.appTable tr:last-child {
  border-bottom: none !important;
}

/* .appTable td:last-child
{
    border-bottom: none !important;
} */

.appTable tr:last-child td {
  border-bottom: none;
}

.appTableActionRow {
  background: #fff !important;
}

/* .appTable tr:last-child
{
    background:#FFF;
} */

.fc-toolbar .fc-left h2 {
  font-size: var(--font-size-base) !important;
}

.ui-state-active {
  background: #1f77ca !important;
  color: #fff !important;
}

.ui-state-active a,
.ui-state-active a:link,
.ui-state-active a:visited {
  color: #fff !important;
}

/* .navdot::before {content: "• "; } */

/* .navdot::before {content: '\2218'" "; } */
.navdot::before {
  content: "\2022" " ";
}

.AppMenu {
  text-align: left;
}

.sp_event_cost_per_subscriber {
  font-size: x-large !important;
}

/* ---------------------------------------------------------------------- */

/* Time Input Fields
/*---------------------------------------------------------------------- */
div.required_time {
  display: inline-block;
  width: auto;
  margin-right: 5px;
  vertical-align: middle;
}

/* ---------------------------------------------------------------------- */

/* Lucide Icons
/*---------------------------------------------------------------------- */
.lucide-icon {
  width: 16px;
  height: 16px;
  display: inline-block;
  vertical-align: text-bottom;
  margin-left: 4px;
}

.lucide-icon-blue {
  filter: invert(36%) sepia(93%) saturate(1892%) hue-rotate(199deg) brightness(96%) contrast(101%);;
}

.lucide-icon-white {
  filter: brightness(0) invert(1);
}

.lucide-icon-black {
  filter: brightness(0);
}

.lucide-icon-inactive {
  opacity: 0.5;
}

/* ---------------------------------------------------------------------- */

/* Alert Box Icons - Lucide Support
/*---------------------------------------------------------------------- */

/* Default icons using ::before pseudo-element */
div.alert::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* Warning/Red alert - triangle-alert icon */
div.alert.warning::before,
div.alert.red::before {
  background-image: url("/css/lucide/icons/triangle-alert.svg");
}

/* Success/Green alert - circle-check icon */
div.alert.success::before,
div.alert.green::before {
  background-image: url("/css/lucide/icons/circle-check.svg");
}

/* Note/Yellow alert - lightbulb icon */
div.alert.note::before,
div.alert.yellow::before {
  background-image: url("/css/lucide/icons/lightbulb.svg");
}

/* Info/Blue alert - info icon */
div.alert.info::before,
div.alert.blue::before {
  background-image: url("/css/lucide/icons/info.svg");
  filter: brightness(0) invert(1); /* White icon for blue background */
}

/* Pink alert - x-circle icon */
div.alert.pink::before {
  background-image: url("/css/lucide/icons/x-circle.svg");
}

/* Purple alert - info icon */
div.alert.purple::before {
  background-image: url("/css/lucide/icons/info.svg");
}

/* Manual Lucide icons (when explicitly added to HTML) */
div.alert .lucide-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  vertical-align: middle;
  margin: 0;
}

/* Icon color inheritance for manual icons */
div.alert.warning .lucide-icon,
div.alert.red .lucide-icon {
  filter: brightness(0); /* Black icon for red/warning backgrounds */
}

div.alert.success .lucide-icon,
div.alert.green .lucide-icon {
  filter: brightness(0); /* Black icon for green backgrounds */
}

div.alert.note .lucide-icon,
div.alert.yellow .lucide-icon {
  filter: brightness(0); /* Black icon for yellow backgrounds */
}

div.alert.info .lucide-icon,
div.alert.blue .lucide-icon {
  filter: brightness(0) invert(1); /* White icon for blue backgrounds */
}

div.alert.pink .lucide-icon {
  filter: brightness(0); /* Black icon for pink backgrounds */
}

div.alert.purple .lucide-icon {
  filter: brightness(0); /* Black icon for purple backgrounds */
}

/* Hide default icon when manual icon is present */
div.alert:has(.lucide-icon)::before {
  display: none;
}

/* ---------------------------------------------------------------------- */

/* Click Tooltip Component
/*---------------------------------------------------------------------- */
.click-tooltip-trigger {
  cursor: pointer;
  position: relative;
  display: inline-block;
}

.click-tooltip-content {
  display: none;
  position: absolute;
  z-index: 99999;
  background: #333;
  color: #fff;
  padding: 10px 14px;
  border-radius: 6px;
  font-size: var(--font-size-sm);
  font-weight: normal;
  white-space: normal;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 8px;
  min-width: 120px;
  max-width: 300px;
  text-align: left;
  line-height: 1.4;
}

.click-tooltip-content::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-bottom-color: #333;
}

.click-tooltip-content.active {
  display: block;
}

.click-tooltip-content ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.click-tooltip-content ul li {
  margin: 0;
  padding: 4px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  line-height: 1.4;
}

.click-tooltip-content ul li:last-child {
  border-bottom: none;
}

/* ---------------------------------------------------------------------- */

/* Subscriber Edit - Package Loading Indicator
/*---------------------------------------------------------------------- */

#subscriber-package-loading {
  display: none;
  padding: 8px 12px;
  margin-top: 5px;
  background: #f0f7ff;
  border: 1px solid #cce0ff;
  border-radius: 4px;
  color: #0066cc;
  font-size: 13px;
}

#subscriber-package-loading img {
  width: 16px;
  height: 16px;
  vertical-align: middle;
  margin-right: 6px;
}

/* ---------------------------------------------------------------------- */

/* Subscriber Edit - Fee Change Modal
/*---------------------------------------------------------------------- */

#subscriber-fee-change-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 10000;
}

.subscriber-fee-modal-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  padding: 25px;
  border-radius: 8px;
  min-width: 350px;
  max-width: 450px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.subscriber-fee-modal-content h3 {
  margin: 0 0 15px 0;
  padding: 0;
  font-size: 18px;
  color: #333;
}

.subscriber-fee-modal-content p {
  margin: 0 0 15px 0;
  color: #666;
  line-height: 1.5;
}

.subscriber-fee-comparison {
  display: flex;
  justify-content: space-between;
  margin: 20px 0;
  padding: 15px;
  background: #f8f9fa;
  border-radius: 6px;
}

.subscriber-fee-item {
  text-align: center;
  flex: 1;
}

.subscriber-fee-item:first-child {
  border-right: 1px solid #dee2e6;
  padding-right: 15px;
}

.subscriber-fee-item:last-child {
  padding-left: 15px;
}

.subscriber-fee-label {
  display: block;
  font-size: 12px;
  color: #888;
  margin-bottom: 5px;
  text-transform: uppercase;
}

.subscriber-fee-value {
  display: block;
  font-size: 20px;
  font-weight: 600;
}

.subscriber-fee-item:first-child .subscriber-fee-value {
  color: #666;
}

.subscriber-fee-item:last-child .subscriber-fee-value {
  color: #10b981;
}

.subscriber-fee-modal-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 20px;
}

.subscriber-fee-modal-actions .btn {
  min-width: 120px;
}

/* ====================================================================== */
/* Theme: Light (merged from light/theme_app.css)
/* ====================================================================== */

/* ---------------------------------------------------------------------- */

/* colors s
/* #f0a8a8 #f0cccc red
/* #a2e8a2 #c5e8c5 green
/* #e8e8a2 #e8e8c5 yellow
/* #a8f0f0 #8FAECA blue
/* #87d5ff blue
/* #f0a8f0 #f0ccf0 pink
 */

/* #aea8f0 #cfccf0 purple
/*
/* contrast color #B7CB4A
/*---------------------------------------------------------------------- */

/* ---------------------------------------------------------------------- */

/* Imports
/*---------------------------------------------------------------------- */


/* ---------------------------------------------------------------------- */

/* General Section
/*---------------------------------------------------------------------- */

html,
body,
textarea,
input {
  color: #6f6f6f;
}

html {
  background-color: #fff;
}

a,
a:hover,
a:visited,
a:link {
  color: #3f3f3f;
}

::selection {
  background: #1f77ca;
  color: #fff;
  text-shadow: none;
}

::selection {
  background: #1f77ca;
  color: #fff;
  text-shadow: none;
}

nav ul li a span {
  /* background-image: url(../images/icons/dark/arrow_right.png); */

  /* Removed - now using inline Lucide SVG icons instead */
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: #777;
}

blockquote {
  border-color: #999;
  color: #999;
}

hr {
  border-top-color: #e1e1e1;
  border-bottom-color: #fff;
}

/* ---------------------------------------------------------------------- */

/* jQuery UI mods
/*---------------------------------------------------------------------- */
.ui-widget-header a,
.ui-accordion-header a {
  color: #444;
}

.ui-widget-header {
  border-top-color: #fff !important;
  border-bottom-color: #aaa !important;
  margin: 0;
}

.ui-widget-overlay {
  background-image: url("light/images/paper_02.png");
  background-color: #333;
}

.ui-state-default a {
  border-top-color: #fff !important;
}

.ui-slider-range.ui-widget-header {
  background-color: #333;
  background-image: url("images/bg/01.png");
}

.ui-slider {
  border-color: #aaa !important;
  background-color: #f6f6f6;
  background-image: url("light/images/paper_02.png");
  box-shadow: inset 0 1px 3px rgb(0 0 0 / 30%);
}

.ui-slider .ui-slider-handle {
  border-color: #aaa !important;
  background-image: url("light/images/slider_handler.png");
  box-shadow: 0 1px 1px rgb(0 0 0 / 10%);
  box-shadow: 0 0 3px rgb(0 0 0 / 10%);
  box-shadow: 0 0 1px rgb(0 0 0 / 10%);
}

/* ---------------------------------------------------------------------- */

/* Pageoptions
/*---------------------------------------------------------------------- */

#pageoptions h1,
#pageoptions h2,
#pageoptions h3,
#pageoptions h4,
#pageoptions h5,
#pageoptions h6 {
  color: #f1f1f1;
}

#pageoptions ul li a {
  color: #999;
}

#pageoptions ul li a:hover,
#pageoptions ul li a.active {
  color: #f1f1f1;
  background-color: #2e2e33;
}

#pageoptions > div {
  color: #f1f1f1;
  background-color: #2e2e33;
  box-shadow: inset 0 2px 1px rgb(0 0 0 / 50%);
}

/* ---------------------------------------------------------------------- */

/* Tables
/*---------------------------------------------------------------------- */

table td,
table th {
  border-color: #ddd #fff;

  /* border-color:#dddddd #e7e7e7 #dddddd #e7e7e7; */
}

table thead tr,
table tfoot tr,
table th {
}

table th {
  border-color: #fff #fff #ddd !important;
}

.tableRowMainItem {
  font-weight: bold;
}

/* td:nth-child(1) {
    font-weight: bold !important;
} */

/* .appTable td:nth-child(1) a {
    color: #000000 !important;
    font-weight: bold !important;
} */

/* ---------------------------------------------------------------------- */

/* Header
/*---------------------------------------------------------------------- */

header {
  border-top-color: #ededed;

  /* background:#f3f3f3; */
  background: #fff;
}

#logo,
#logo a {
  color: #fff;
}

#header ul li ul li {
  border-color: #d7d7d7 #c2c2c2 #c2c2c2 #d7d7d7;
}

#header ul li ul li a {
  color: #353535;
  border-top-color: #fff;
  background: #fff;
}

#header ul li ul li a:hover {
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f6f6f6', endColorstr='#f1f1f1');
  background: linear-gradient(top, #f6f6f6, #f1f1f1);
}

#header ul li ul li a:active,
#header ul li ul li a.active {
  box-shadow: inset 0 2px 1px rgb(0 0 0 / 30%);
  background: #e8e8e8;
}

#header ul li ul li:active,
#header ul li ul li.active {
}

#header ul li ul li ul {
  background-color: #2e2e33;
}

#header ul li ul li span {
  background-color: #f0a8a8;
  color: #fff;
  border-color: #bbb;
}

#green_span_header {
  background-color: rgb(178 231 178) !important;
  color: #fff;
  border-color: #bbb;
}

#header ul li ul li ul li {
  border-color: #ddd;
}

#searchbox {
  /* border-color:#d7d7d7 #c2c2c2 #c2c2c2 #d7d7d7; */
}

form#searchform input#search {
  border-color: #bbb;
  border: 1px solid;
  box-shadow: none;
}

form#searchform input#search:hover {
  box-shadow:
    inset 0 1px 3px rgb(0 0 0 / 20%),
    0 0 3px rgb(0 0 0 / 20%);
}

form#searchform input#search:focus {
  filter: none;
}

form#searchform input.placeholder {
  color: #ccc !important;
  font-style: italic !important;
}

/* ---------------------------------------------------------------------- */

/* Navigation
/*---------------------------------------------------------------------- */

nav {
  border-right-color: #e1e1e1 !important;
  border-left-color: #e1e1e1;
  box-shadow: 2px 2px 4px rgb(0 0 0 / 10%);
}

nav ul {
  border-top-color: #e1e1e1;

  /* background-color:#2e2e33; */
  background-color: #fff;
}

nav ul li {
  background-image: none !important;
}

nav ul li a {
  background: #f1f1f1;
}

nav ul li a:hover {
  background: #1f77ca;
  color: #fff;
}

nav ul li a span:hover {
  color: #fff;
}

nav ul li a span {
  color: #353535;

  /* border-color:#ffffff #f7f7f7 #dddddd #f7f7f7; */
  border-color: #f1f1f1;
}

nav ul li a:active,
nav ul li a.active {
  /* background-image:url(../light/images/nav_active.png); */
  background-repeat: repeat-x;

  /* background-color:#B7CB4A; */
  background-position: left center;
  filter: none;
}

nav ul li a:active span,
nav ul li a.active span {
  color: #fff;

  /* color:#000000; */

  /* text-decoration:underline; */

  /* font-weight:bold; */
  background-color: #1f77ca;
}

nav ul li ul {
  border-bottom-color: #ddd;
}

nav ul li ul li {
  background-image: none !important;
}

nav ul li ul li a {
}

nav ul li ul li a span {
  border-top-color: #ddd;
  background-image: none !important;
}

/* ---------------------------------------------------------------------- */

/* Content
/*---------------------------------------------------------------------- */

#content {
  background-color: #fff;
  border-color: #fff;
}

.bgsample {
  border-color: #999;
  box-shadow: inset 0 0 2px rgb(0 0 0 / 50%);
  background-color: #fff;
}

/* ---------------------------------------------------------------------- */

/* Breadcrumb - Moved to breadcrumb.css
/*---------------------------------------------------------------------- */

/* Breadcrumb styles have been moved to /app/webroot/css/breadcrumb.css
   for better maintainability and modern design */

/* ---------------------------------------------------------------------- */

/* Gallery
/*---------------------------------------------------------------------- */

.gallery {
  border-color: #ccc #e7e7e7 #fff;
  background-image: url("light/images/paper_02.png");
}

.gallery .sortable_placeholder {
  background-color: #f6f6f6;
  background-image: url("light/images/paper_02.png");
}

.gallery li {
  border-color: #fff #e7e7e7 #ccc;
  background-color: #f0f0f0;
}

.gallery li > a {
  background-image: url("light/images/loading.gif");
}

.gallery li img {
}

.gallery li span {
  background-color: #2e2e33;
  border-top-color: #666;
  box-shadow: 0 -1px 0 #2e2e33;
}

.gallery li > a span a {
  color: #fff;
}

.gallery li a span a.edit {
  background-image: url("images/icons/light/pencil.png");
}

.gallery li a span a.delete {
  background-image: url("images/icons/light/cross.png");
}

/* ---------------------------------------------------------------------- */

/* Message Box
/*---------------------------------------------------------------------- */

#wl_msg .msg-box,
#wl_msg .msg-box-close {
  border-color: #e1e1e1;
  color: #3f3f3f;
  background: #fff;
}

#wl_msg .msg-box-close {
}

#wl_msg .msg-box-close:hover {
  background-color: #e1e1e1;
  color: #2e2e33;
}

#wl_msg .msg-box h3,
#wl_msg .msg-close {
  color: #f1f1f1;
  background: #1f77ca;
}

#wl_msg .msg-box h3 {
  border-bottom-color: #555;
}

#wl_msg .msg-close {
  border-left-color: #555;
  border-bottom-color: #555;
  background-image: url("images/icons/light/cross.png");
}

#wl_msg .msg-close:hover {
  background-image: url("images/icons/dark/cross.png");
  background-color: #e1e1e1;
}

#wl_msg .msg-content {
}

/* ---------------------------------------------------------------------- */

/* Alert Boxes
/*---------------------------------------------------------------------- */

div.alert {
  border-color: #c7c7c7 #b2b2b2 #b2b2b2 #c7c7c7;
  color: #fff;
  background-color: #e6e6e6;
  margin: 9px 0;
}

div.alert:hover {
  border-color: #b2b2b2;
}

div.alert a {
  color: #000;
}

div.alert a:hover {
  color: #444;
}

div.alert.red,
div.alert.warning {
  background-color: #f0a8a8;
}

div.alert.red:hover,
div.alert.warning:hover {
  background-color: #f0cccc;
}

div.alert.green,
div.alert.success {
  background-color: #a2e8a2;
}

div.alert.green:hover,
div.alert.success:hover {
  background-color: #c5e8c5;
}

div.alert.yellow,
div.alert.note {
  background-color: #e8e8a2;
}

div.alert.yellow:hover,
div.alert.note:hover {
  background-color: #e8e8c5;
}

div.alert.blue,
div.alert.info {
  /* background-color:#a8f0f0; */

  /* background-color:#87d5ff; */
  background-color: #1f77ca;
}

div.alert.blue:hover,
div.alert.info:hover {
  background-color: #8faeca;
}

div.alert.pink {
  background-color: #f0a8f0;
}

div.alert.pink:hover {
  background-color: #f0ccf0;
}

div.alert.purple {
  background-color: #aea8f0;
}

div.alert.purple:hover {
  background-color: #cfccf0;
}

/* Alert icons now use Lucide icons - no background images needed */
div.alert.warning,
div.alert.success,
div.alert.note,
div.alert.info {
  background-image: none;
}

/* ---------------------------------------------------------------------- */

/* Form Elements
/*---------------------------------------------------------------------- */

pre {
  box-shadow: inset 0 1px 3px rgb(0 0 0 / 10%);
}

pre,
code {
  /* background-image:url(../light/images/paper_02.png); */
  background-color: #f1f1f1;
  border-color: #bbb;
}

pre code {
  background-image: url("light/images/code_lines.png");
}

input,
textarea {
  background-color: #fff;
  border-color: #bbb;
}

input.placeholder,
textarea.placeholder {
  color: #ccc;
}

input.error {
  color: #c49090;
}

input,
textarea,
input:invalid,
input:required,
textarea:required {
}

input:hover,
input:focus,
textarea:hover,
textarea:focus {
  box-shadow:
    inset 0 1px 3px rgb(0 0 0 / 20%),
    0 0 3px rgb(0 0 0 / 20%);
}

select optgroup,
select option {
  color: #555;
}

select option {
  border-color: #fff #f7f7f7 #ddd;
}

form {
  border-color: #ccc #e7e7e7 #fff;
}

form .wl_formstatus {
  color: #900;
}

form span.required {
  background-image: url("light/images/required.png");
}

form fieldset {
  border-color: #ddd #e7e7e7 #bbb;

  /* border-color:#ffffff; */
}

form label {
  border-top-color: #fff;
  color: #444;
  background: #fff;
}

.filter_label {
  border-top-color: #fff;
  color: #444;
  background: #e7e7e7;
}

form fieldset > section {
  border-top-color: #fff;
  border-bottom-color: #e7e7e7;
  background: #f6f6f6;
}

form fieldset > section > div {
  border-left-color: #e7e7e7;
}

form fieldset > section > div span {
}

form fieldset > section.error {
  background: #f0cccc;
  border-bottom-color: #f0cccc;
  filter: none;
}

form fieldset > section.error > label {
  text-shadow: none;
}

form fieldset > section label {
}

div.passwordstrength {
  box-shadow: inset 0 0 5px rgb(0 0 0 / 50%);
}

div.passwordstrength.s_1 {
  background-color: #f0a8a8;
}

div.passwordstrength.s_2 {
  background-color: #f0d2b5;
}

div.passwordstrength.s_3 {
  background-color: #e8e8a2;
}

/* div.passwordstrength.s_4{background-color:#a8f0f0;} */
div.passwordstrength.s_4 {
  background-color: #87d5ff;
}

div.passwordstrength.s_5 {
  background-color: #a2e8a2;
}

/* ---------------------------------------------------------------------- */

/* jQuery Checkbox
/*---------------------------------------------------------------------- */

.jquery-checkbox span.checkboxplaceholder {
  background-image: url("light/images/checkbox.png");
}

/* ---------------------------------------------------------------------- */

/* File Upload
/*---------------------------------------------------------------------- */

div.fileuploadui {
}

div.fileuploadui a {
}

ul.fileuploadpool {
  border-color: #fff;
  background-color: #f0f0f0;
  box-shadow: inset 0 1px 3px rgb(0 0 0 / 50%);
}

ul.fileuploadpool.drop {
  background-color: #f0f0f0;
  background-image:
    url("light/images/dragndrop.png"), url("light/images/paper_02.png");
}

ul.fileuploadpool.single {
}

ul.fileuploadpool li {
  border-color: #fff #e7e7e7 #ccc;
  background-color: #f6f6f6;
}

ul.fileuploadpool li.error {
  background-color: #f0cccc;
}

ul.fileuploadpool li .name {
}

ul.fileuploadpool li a {
}

ul.fileuploadpool li a:hover {
}

ul.fileuploadpool li a.cancel {
  background-image: url("images/icons/dark/cross.png");
}

ul.fileuploadpool li a.remove {
  background-image: url("images/icons/dark/cross.png");
}

ul.fileuploadpool li .progress {
  background-color: #f0a8a8;
  background-image: url("light/images/upload.gif");
}

ul.fileuploadpool li.success .progress {
  background-color: #a2e8a2;
  background-image: none;
}

/* ---------------------------------------------------------------------- */

/* Comboselect
/*---------------------------------------------------------------------- */

div.comboselectbox div.combowrap {
  border-color: #fff #e7e7e7 #ccc;
  background-image: url("light/images/paper_02.png");
  box-shadow: inset 0 1px 3px rgb(0 0 0 / 50%);
}

div.comboselectbox ul.comboselect li {
  border-color: #fff #e7e7e7 #ccc;
  background-color: #f6f6f6;
}

div.comboselectbox ul.comboselect li:hover a {
  color: #111;
}

div.comboselectbox ul.comboselect li a.add {
  background-image: url("images/icons/dark/plus.png");
}

div.comboselectbox ul.comboselect li a.remove {
  background-image: url("images/icons/dark/cross.png");
}

div.comboselectbox ul.comboselect li.used a {
  color: #ccc;
}

div.comboselectbox ul.comboselect li.selected {
  background-color: #efefef;
}

div.comboselectbox div.comboselectbuttons a.add {
  background-image: url("images/icons/dark/triangle_right.png");
}

div.comboselectbox div.comboselectbuttons a.remove {
  background-image: url("images/icons/dark/triangle_left.png");
}

div.comboselectbox div.comboselectbuttons a.addall {
  background-image: url("images/icons/dark/triangle_double_right.png");
}

div.comboselectbox div.comboselectbuttons a.removeall {
  background-image: url("images/icons/dark/triangle_double_left.png");
}

@media screen and (width <= 700px) {
  div.comboselectbox div.comboselectbuttons a.add {
    background-image: url("images/icons/dark/triangle_down.png");
  }

  div.comboselectbox div.comboselectbuttons a.remove {
    background-image: url("images/icons/dark/triangle_up.png");
  }

  div.comboselectbox div.comboselectbuttons a.addall {
    background-image: url("images/icons/dark/triangle_double_down.png");
  }

  div.comboselectbox div.comboselectbuttons a.removeall {
    background-image: url("images/icons/dark/triangle_double_up.png");
  }
}

/* ---------------------------------------------------------------------- */

/* Buttons
/*---------------------------------------------------------------------- */

button,
a.btn,
.dataTables_paginate span.paginate_button,
.dataTables_paginate span.paginate_active {
  border-color: #1f77ca;
  color: #555;
  background-color: #fff;
}

button.icon,
a.btn.icon {
}

button {
}

a.btn {
}

button:hover,
a.btn:hover,
.dataTables_paginate span.paginate_active:hover {
  background-color: #f1f1f1;
}

button:active,
a.btn:active,
.dataTables_paginate span.paginate_active {
  background-color: #f1f1f1;
  border-color: #b2b2b2;
  box-shadow: inset 0 2px 1px rgb(0 0 0 / 10%);
}

/* Red Button - Danger/Delete actions */
button.red,
a.btn.red {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 20px;
  font-size: var(--font-size-base);
  line-height: 1.5;
  min-height: 40px;
  border-radius: 6px;
  font-weight: 500;
  transition: all 0.15s ease;
  text-decoration: none;
  border: 1px solid #ef4444;
  background-color: #ef4444;
  color: #fff;
  cursor: pointer;
  box-sizing: border-box;
  white-space: nowrap;
}

button.red:hover,
a.btn.red:hover {
  background-color: #dc2626;
  border-color: #dc2626;
  color: #fff;
}

button.red:active,
a.btn.red:active {
  background-color: #b91c1c;
  border-color: #b91c1c;
  transform: translateY(0);
}

/* Green Button - Success/Confirm actions */
button.green,
a.btn.green {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 20px;
  font-size: var(--font-size-base);
  line-height: 1.5;
  min-height: 40px;
  border-radius: 6px;
  font-weight: 500;
  transition: all 0.15s ease;
  text-decoration: none;
  border: 1px solid #10b981;
  background-color: #10b981;
  color: #fff;
  cursor: pointer;
  box-sizing: border-box;
  white-space: nowrap;
}

button.green:hover,
a.btn.green:hover {
  background-color: #059669;
  border-color: #059669;
  color: #fff;
}

button.green:active,
a.btn.green:active {
  background-color: #047857;
  border-color: #047857;
  transform: translateY(0);
}

/* Yellow Button - Warning/Attention actions */
button.yellow,
a.btn.yellow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 20px;
  font-size: var(--font-size-base);
  line-height: 1.5;
  min-height: 40px;
  border-radius: 6px;
  font-weight: 500;
  transition: all 0.15s ease;
  text-decoration: none;
  border: 1px solid #f59e0b;
  background-color: #f59e0b;
  color: #fff;
  cursor: pointer;
  box-sizing: border-box;
  white-space: nowrap;
}

button.yellow:hover,
a.btn.yellow:hover {
  background-color: #d97706;
  border-color: #d97706;
  color: #fff;
}

button.yellow:active,
a.btn.yellow:active {
  background-color: #b45309;
  border-color: #b45309;
  transform: translateY(0);
}

/* Blue Button - Primary/Main actions */
button.blue,
a.btn.blue {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 20px;
  font-size: var(--font-size-base);
  line-height: 1.5;
  min-height: 40px;
  border-radius: 6px;
  font-weight: 500;
  transition: all 0.15s ease;
  text-decoration: none;
  border: 1px solid #1f77ca;
  background-color: #1f77ca;
  color: #fff;
  cursor: pointer;
  box-sizing: border-box;
  white-space: nowrap;
}

button.blue:hover,
a.btn.blue:hover {
  background-color: #1565c0;
  border-color: #1565c0;
  color: #fff;
}

button.blue:active,
a.btn.blue:active {
  background-color: #004080;
  border-color: #004080;
  transform: translateY(0);
}

/* Pink Button - Special/Featured actions */
button.pink,
a.btn.pink {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 20px;
  font-size: var(--font-size-base);
  line-height: 1.5;
  min-height: 40px;
  border-radius: 6px;
  font-weight: 500;
  transition: all 0.15s ease;
  text-decoration: none;
  border: 1px solid #ec4899;
  background-color: #ec4899;
  color: #fff;
  cursor: pointer;
  box-sizing: border-box;
  white-space: nowrap;
}

button.pink:hover,
a.btn.pink:hover {
  background-color: #db2777;
  border-color: #db2777;
  color: #fff;
}

button.pink:active,
a.btn.pink:active {
  background-color: #be185d;
  border-color: #be185d;
  transform: translateY(0);
}

/* Purple Button - Special/Admin actions */
button.purple,
a.btn.purple {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 20px;
  font-size: var(--font-size-base);
  line-height: 1.5;
  min-height: 40px;
  border-radius: 6px;
  font-weight: 500;
  transition: all 0.15s ease;
  text-decoration: none;
  border: 1px solid #a855f7;
  background-color: #a855f7;
  color: #fff;
  cursor: pointer;
  box-sizing: border-box;
  white-space: nowrap;
}

button.purple:hover,
a.btn.purple:hover {
  background-color: #9333ea;
  border-color: #9333ea;
  color: #fff;
}

button.purple:active,
a.btn.purple:active {
  background-color: #7e22ce;
  border-color: #7e22ce;
  transform: translateY(0);
}

/* Small Button Variants - For all colored buttons */
button.small.red,
a.btn.small.red,
button.small.green,
a.btn.small.green,
button.small.yellow,
a.btn.small.yellow,
button.small.blue,
a.btn.small.blue,
button.small.pink,
a.btn.small.pink,
button.small.purple,
a.btn.small.purple {
  padding: 6px 14px;
  font-size: var(--font-size-md);
  min-height: 32px;
  gap: 6px;
}

/* ---------------------------------------------------------------------- */

/* Widgets
/*---------------------------------------------------------------------- */

.widget,
.widget.loading {
  background-color: #fff;
  border-color: #ddd #efefef #f1f1f1;

  /* background-image:url(../light/images/paper_02.png); */
}

.widget > div {
  border-color: #ddd #e7e7e7 #bbb;

  /* background-image:url(../light/images/paper_01.png); */
}

.widget > div.ui-widget {
  background-image: none;
}

.widget:hover {
  border-color: #ccc;
}

.widget.ui-sortable-helper {
  box-shadow: 0 5px 6px rgb(0 0 0 / 60%);
}

.widget h3.handle {
  color: #444;
  border-top-color: #fff;
  border-bottom-color: #ddd;

  /* background:#f1f1f1; */
  background: #fff;
}

.widget h3.handle:hover {
  box-shadow: inset 0 -3px 12px rgb(255 255 255 / 50%);
  background: #f6f6f6;
}

.widget h3.handle .collapse {
  background-image: url("/css/lucide/icons/png/chevrons-down-up.png");
}

.widget h3.handle .reload {
  background-image: url("images/icons/dark/refresh_3.png");
}

.widget.collapsed {
  border-bottom-color: #ddd;
}

.widget.collapsed h3.handle .collapse {
  background-image: url("/css/lucide/icons/png/chevrons-up-down.png");
}

.widget.loading h3.handle .reload {
  background-image: url("light/images/loading.gif");
}

.widget.number-widget > div ul li {
  border-top-color: #555;
}

.widget.number-widget > div ul li a {
  color: #555;
}

.widget.number-widget > div ul li a:hover {
  color: #999;
}

.widget.number-widget ul li a span {
}

.sortable_placeholder {
  border-color: #fff;
  background-color: #f6f6f6;
  box-shadow: inset 0 1px 3px rgb(0 0 0 / 50%);
}

/* custom-header */

.custom-header {
  background-color: #f6f6f6;
}

/* ---------------------------------------------------------------------- */

/* Footer
/*---------------------------------------------------------------------- */

footer {
  color: #aaa;
}

/* ---------------------------------------------------------------------- */

/* Tab Container
/*---------------------------------------------------------------------- */

#tab_container {
  border: 0;
}

/* Move the Headernav to a drop down menu to the right */
@media screen and (width <= 960px) {
  #header ul#headernav {
    background-image: url("images/icons/dark/expand.png");
    border-left-color: #e7e7e7;
  }

  #header ul#headernav li ul li ul {
    background-image: url("images/bg/04.png");
    background-color: #2e2e33;
  }
}

/* iPhone and real small devicces */
@media screen and (width <= 480px) {
  nav ul li a:active span,
  nav ul li a.active span {
    border-top-color: #fff;
  }

  nav {
    border-top-color: #e1e1e1;
  }

  nav ul {
    background: #f1f1f1;
  }

  nav ul li a span {
    border-left-color: #e1e1e1;
  }
}

/* ---------------------------------------------------------------------- */

/* Icons
/*---------------------------------------------------------------------- */

nav ul li.i_abacus a span,
.i_abacus {
  background-image: url("images/icons/dark/abacus.png");
}

nav ul li.i_access_denied a span,
.i_access_denied {
  background-image: url("images/icons/dark/access_denied.png");
}

nav ul li.i_address_book a span,
.i_address_book {
  background-image: url("images/icons/dark/address_book.png");
}

nav ul li.i_admin_user a span,
.i_admin_user {
  background-image: url("images/icons/dark/admin_user.png");
}

nav ul li.i_admin_user_2 a span,
.i_admin_user_2 {
  background-image: url("images/icons/dark/admin_user_2.png");
}

nav ul li.i_airplane a span,
.i_airplane {
  background-image: url("images/icons/dark/airplane.png");
}

nav ul li.i_alarm a span,
.i_alarm {
  background-image: url("images/icons/dark/alarm.png");
}

nav ul li.i_alarm_2 a span,
.i_alarm_2 {
  background-image: url("images/icons/dark/alarm_2.png");
}

nav ul li.i_alarm_clock a span,
.i_alarm_clock {
  background-image: url("images/icons/dark/alarm_clock.png");
}

nav ul li.i_alert a span,
.i_alert {
  background-image: url("images/icons/dark/alert.png");
}

nav ul li.i_android a span,
.i_android {
  background-image: url("images/icons/dark/android.png");
}

nav ul li.i_application a span,
.i_application {
  background-image: url("images/icons/dark/application.png");
}

nav ul li.i_archive a span,
.i_archive {
  background-image: url("images/icons/dark/archive.png");
}

nav ul li.i_arrow_down a span,
.i_arrow_down {
  background-image: url("images/icons/dark/arrow_down.png");
}

nav ul li.i_arrow_down_left a span,
.i_arrow_down_left {
  background-image: url("images/icons/dark/arrow_down_left.png");
}

nav ul li.i_arrow_down_right a span,
.i_arrow_down_right {
  background-image: url("images/icons/dark/arrow_down_right.png");
}

nav ul li.i_arrow_left a span,
.i_arrow_left {
  background-image: url("images/icons/dark/arrow_left.png");
}

nav ul li.i_arrow_right a span,
.i_arrow_right {
  background-image: url("images/icons/dark/arrow_right.png");
}

nav ul li.i_arrow_up a span,
.i_arrow_up {
  background-image: url("images/icons/dark/arrow_up.png");
}

nav ul li.i_arrow_up_left a span,
.i_arrow_up_left {
  background-image: url("images/icons/dark/arrow_up_left.png");
}

nav ul li.i_arrow_up_right a span,
.i_arrow_up_right {
  background-image: url("images/icons/dark/arrow_up_right.png");
}

nav ul li.i_bag a span,
.i_bag {
  background-image: url("images/icons/dark/bag.png");
}

nav ul li.i_balloons a span,
.i_balloons {
  background-image: url("images/icons/dark/balloons.png");
}

nav ul li.i_bandaid a span,
.i_bandaid {
  background-image: url("images/icons/dark/bandaid.png");
}

nav ul li.i_battery a span,
.i_battery {
  background-image: url("images/icons/dark/battery.png");
}

nav ul li.i_battery_33 a span,
.i_battery_33 {
  background-image: url("images/icons/dark/battery_33.png");
}

nav ul li.i_battery_66 a span,
.i_battery_66 {
  background-image: url("images/icons/dark/battery_66.png");
}

nav ul li.i_battery_empty a span,
.i_battery_empty {
  background-image: url("images/icons/dark/battery_empty.png");
}

nav ul li.i_battery_full a span,
.i_battery_full {
  background-image: url("images/icons/dark/battery_full.png");
}

nav ul li.i_bended_arrow_down a span,
.i_bended_arrow_down {
  background-image: url("images/icons/dark/bended_arrow_down.png");
}

nav ul li.i_bended_arrow_left a span,
.i_bended_arrow_left {
  background-image: url("images/icons/dark/bended_arrow_left.png");
}

nav ul li.i_bended_arrow_right a span,
.i_bended_arrow_right {
  background-image: url("images/icons/dark/bended_arrow_right.png");
}

nav ul li.i_bended_arrow_up a span,
.i_bended_arrow_up {
  background-image: url("images/icons/dark/bended_arrow_up.png");
}

nav ul li.i_big_brush a span,
.i_big_brush {
  background-image: url("images/icons/dark/big_brush.png");
}

nav ul li.i_blackberry a span,
.i_blackberry {
  background-image: url("images/icons/dark/blackberry.png");
}

nav ul li.i_blocks_images a span,
.i_blocks_images {
  background-image: url("images/icons/dark/blocks_images.png");
}

nav ul li.i_blu-ray a span,
.i_blu-ray {
  background-image: url("images/icons/dark/blu-ray.png");
}

nav ul li.i_bluetooth a span,
.i_bluetooth {
  background-image: url("images/icons/dark/bluetooth.png");
}

nav ul li.i_bluetooth_2 a span,
.i_bluetooth_2 {
  background-image: url("images/icons/dark/bluetooth_2.png");
}

nav ul li.i_book a span,
.i_book {
  background-image: url("images/icons/dark/book.png");
}

nav ul li.i_book_large a span,
.i_book_large {
  background-image: url("images/icons/dark/book_large.png");
}

nav ul li.i_books a span,
.i_books {
  background-image: url("images/icons/dark/books.png");
}

nav ul li.i_breadcrumb a span,
.i_breadcrumb {
  background-image: url("images/icons/dark/breadcrumb.png");
}

nav ul li.i_brush a span,
.i_brush {
  background-image: url("images/icons/dark/brush.png");
}

nav ul li.i_buildings a span,
.i_buildings {
  background-image: url("images/icons/dark/buildings.png");
}

nav ul li.i_bulls_eye a span,
.i_bulls_eye {
  background-image: url("images/icons/dark/bulls_eye.png");
}

nav ul li.i_calculator a span,
.i_calculator {
  background-image: url("images/icons/dark/calculator.png");
}

nav ul li.i_calendar a span,
.i_calendar {
  background-image: url("images/icons/dark/calendar.png");
}

nav ul li.i_calendar_day a span,
.i_calendar_day {
  background-image: url("images/icons/dark/calendar_day.png");
}

nav ul li.i_camera a span,
.i_camera {
  background-image: url("images/icons/dark/camera.png");
}

nav ul li.i_camera_2 a span,
.i_camera_2 {
  background-image: url("images/icons/dark/camera_2.png");
}

nav ul li.i_car a span,
.i_car {
  background-image: url("images/icons/dark/car.png");
}

nav ul li.i_cash_register a span,
.i_cash_register {
  background-image: url("images/icons/dark/cash_register.png");
}

nav ul li.i_cassette a span,
.i_cassette {
  background-image: url("images/icons/dark/cassette.png");
}

nav ul li.i_cat a span,
.i_cat {
  background-image: url("images/icons/dark/cat.png");
}

nav ul li.i_cd a span,
.i_cd {
  background-image: url("images/icons/dark/cd.png");
}

nav ul li.i_chair a span,
.i_chair {
  background-image: url("images/icons/dark/chair.png");
}

nav ul li.i_chart a span,
.i_chart {
  background-image: url("images/icons/dark/chart.png");
}

nav ul li.i_chart_2 a span,
.i_chart_2 {
  background-image: url("images/icons/dark/chart_2.png");
}

nav ul li.i_chart_3 a span,
.i_chart_3 {
  background-image: url("images/icons/dark/chart_3.png");
}

nav ul li.i_chart_4 a span,
.i_chart_4 {
  background-image: url("images/icons/dark/chart_4.png");
}

nav ul li.i_chart_5 a span,
.i_chart_5 {
  background-image: url("images/icons/dark/chart_5.png");
}

nav ul li.i_chart_6 a span,
.i_chart_6 {
  background-image: url("images/icons/dark/chart_6.png");
}

nav ul li.i_chart_7 a span,
.i_chart_7 {
  background-image: url("images/icons/dark/chart_7.png");
}

nav ul li.i_chart_8 a span,
.i_chart_8 {
  background-image: url("images/icons/dark/chart_8.png");
}

nav ul li.i_chemical a span,
.i_chemical {
  background-image: url("images/icons/dark/chemical.png");
}

nav ul li.i_chrome a span,
.i_chrome {
  background-image: url("images/icons/dark/chrome.png");
}

nav ul li.i_clipboard a span,
.i_clipboard {
  background-image: url("images/icons/dark/clipboard.png");
}

nav ul li.i_clock a span,
.i_clock {
  background-image: url("images/icons/dark/clock.png");
}

nav ul li.i_cloud a span,
.i_cloud {
  background-image: url("images/icons/dark/cloud.png");
}

nav ul li.i_cloud_download a span,
.i_cloud_download {
  background-image: url("images/icons/dark/cloud_download.png");
}

nav ul li.i_cloud_upload a span,
.i_cloud_upload {
  background-image: url("images/icons/dark/cloud_upload.png");
}

nav ul li.i_cog a span,
.i_cog {
  background-image: url("images/icons/dark/cog.png");
}

nav ul li.i_cog_2 a span,
.i_cog_2 {
  background-image: url("images/icons/dark/cog_2.png");
}

nav ul li.i_cog_3 a span,
.i_cog_3 {
  background-image: url("images/icons/dark/cog_3.png");
}

nav ul li.i_cog_4 a span,
.i_cog_4 {
  background-image: url("images/icons/dark/cog_4.png");
}

nav ul li.i_collapse a span,
.i_collapse {
  background-image: url("images/icons/dark/collapse.png");
}

nav ul li.i_companies a span,
.i_companies {
  background-image: url("images/icons/dark/companies.png");
}

nav ul li.i_compress a span,
.i_compress {
  background-image: url("images/icons/dark/compress.png");
}

nav ul li.i_copy a span,
.i_copy {
  background-image: url("images/icons/dark/copy.png");
}

nav ul li.i_coverflow a span,
.i_coverflow {
  background-image: url("images/icons/dark/coverflow.png");
}

nav ul li.i_create_write a span,
.i_create_write {
  background-image: url("images/icons/dark/create_write.png");
}

nav ul li.i_cross a span,
.i_cross {
  background-image: url("images/icons/dark/cross.png");
}

nav ul li.i_cup a span,
.i_cup {
  background-image: url("images/icons/dark/cup.png");
}

nav ul li.i_cursor a span,
.i_cursor {
  background-image: url("images/icons/dark/cursor.png");
}

nav ul li.i_delicious a span,
.i_delicious {
  background-image: url("images/icons/dark/delicious.png");
}

nav ul li.i_desk a span,
.i_desk {
  background-image: url("images/icons/dark/desk.png");
}

nav ul li.i_digg a span,
.i_digg {
  background-image: url("images/icons/dark/digg.png");
}

nav ul li.i_digg_2 a span,
.i_digg_2 {
  background-image: url("images/icons/dark/digg_2.png");
}

nav ul li.i_document a span,
.i_document {
  background-image: url("images/icons/dark/document.png");
}

nav ul li.i_document_add a span,
.i_document_add {
  background-image: url("images/icons/dark/document_add.png");
}

nav ul li.i_document_delete a span,
.i_document_delete {
  background-image: url("images/icons/dark/document_delete.png");
}

nav ul li.i_documents a span,
.i_documents {
  background-image: url("images/icons/dark/documents.png");
}

nav ul li.i_download a span,
.i_download {
  background-image: url("images/icons/dark/download.png");
}

nav ul li.i_download_to_computer a span,
.i_download_to_computer {
  background-image: url("images/icons/dark/download_to_computer.png");
}

nav ul li.i_dress a span,
.i_dress {
  background-image: url("images/icons/dark/dress.png");
}

nav ul li.i_dribbble a span,
.i_dribbble {
  background-image: url("images/icons/dark/dribbble.png");
}

nav ul li.i_dribbble_2 a span,
.i_dribbble_2 {
  background-image: url("images/icons/dark/dribbble_2.png");
}

nav ul li.i_dropbox a span,
.i_dropbox {
  background-image: url("images/icons/dark/dropbox.png");
}

nav ul li.i_drupal a span,
.i_drupal {
  background-image: url("images/icons/dark/drupal.png");
}

nav ul li.i_duplicate a span,
.i_duplicate {
  background-image: url("images/icons/dark/duplicate.png");
}

nav ul li.i_dvd a span,
.i_dvd {
  background-image: url("images/icons/dark/dvd.png");
}

nav ul li.i_eject a span,
.i_eject {
  background-image: url("images/icons/dark/eject.png");
}

nav ul li.i_electricty_input a span,
.i_electricty_input {
  background-image: url("images/icons/dark/electricty_input.png");
}

nav ul li.i_electricty_plug a span,
.i_electricty_plug {
  background-image: url("images/icons/dark/electricty_plug.png");
}

nav ul li.i_empty a span,
.i_empty {
  background-image: url("images/icons/dark/empty.png");
}

nav ul li.i_excel_document a span,
.i_excel_document {
  background-image: url("images/icons/dark/excel_document.png");
}

nav ul li.i_excel_documents a span,
.i_excel_documents {
  background-image: url("images/icons/dark/excel_documents.png");
}

nav ul li.i_exclamation a span,
.i_exclamation {
  background-image: url("images/icons/dark/exclamation.png");
}

nav ul li.i_exit a span,
.i_exit {
  background-image: url("images/icons/dark/exit.png");
}

nav ul li.i_expand a span,
.i_expand {
  background-image: url("images/icons/dark/expand.png");
}

nav ul li.i_expose a span,
.i_expose {
  background-image: url("images/icons/dark/expose.png");
}

nav ul li.i_expression_engine a span,
.i_expression_engine {
  background-image: url("images/icons/dark/expression_engine.png");
}

nav ul li.i_eyedropper a span,
.i_eyedropper {
  background-image: url("images/icons/dark/eyedropper.png");
}

nav ul li.i_facebook a span,
.i_facebook {
  background-image: url("images/icons/dark/facebook.png");
}

nav ul li.i_facebook_like a span,
.i_facebook_like {
  background-image: url("images/icons/dark/facebook_like.png");
}

nav ul li.i_fax a span,
.i_fax {
  background-image: url("images/icons/dark/fax.png");
}

nav ul li.i_female a span,
.i_female {
  background-image: url("images/icons/dark/female.png");
}

nav ul li.i_female_contour a span,
.i_female_contour {
  background-image: url("images/icons/dark/female_contour.png");
}

nav ul li.i_file_cabinet a span,
.i_file_cabinet {
  background-image: url("images/icons/dark/file_cabinet.png");
}

nav ul li.i_film a span,
.i_film {
  background-image: url("images/icons/dark/film.png");
}

nav ul li.i_film_2 a span,
.i_film_2 {
  background-image: url("images/icons/dark/film_2.png");
}

nav ul li.i_filmcamera a span,
.i_filmcamera {
  background-image: url("images/icons/dark/filmcamera.png");
}

nav ul li.i_finish_flag a span,
.i_finish_flag {
  background-image: url("images/icons/dark/finish_flag.png");
}

nav ul li.i_firefox a span,
.i_firefox {
  background-image: url("images/icons/dark/firefox.png");
}

nav ul li.i_flag a span,
.i_flag {
  background-image: url("images/icons/dark/flag.png");
}

nav ul li.i_flag_2 a span,
.i_flag_2 {
  background-image: url("images/icons/dark/flag_2.png");
}

nav ul li.i_folder a span,
.i_folder {
  background-image: url("images/icons/dark/folder.png");
}

nav ul li.i_folder_add a span,
.i_folder_add {
  background-image: url("images/icons/dark/folder_add.png");
}

nav ul li.i_folder_closed a span,
.i_folder_closed {
  background-image: url("images/icons/dark/folder_closed.png");
}

nav ul li.i_folder_delete a span,
.i_folder_delete {
  background-image: url("images/icons/dark/folder_delete.png");
}

nav ul li.i_folder_download a span,
.i_folder_download {
  background-image: url("images/icons/dark/folder_download.png");
}

nav ul li.i_folder_lock a span,
.i_folder_lock {
  background-image: url("images/icons/dark/folder_lock.png");
}

nav ul li.i_folder_love a span,
.i_folder_love {
  background-image: url("images/icons/dark/folder_love.png");
}

nav ul li.i_folder_upload a span,
.i_folder_upload {
  background-image: url("images/icons/dark/folder_upload.png");
}

nav ul li.i_footprint a span,
.i_footprint {
  background-image: url("images/icons/dark/footprint.png");
}

nav ul li.i_forward a span,
.i_forward {
  background-image: url("images/icons/dark/forward.png");
}

nav ul li.i_fountain_pen a span,
.i_fountain_pen {
  background-image: url("images/icons/dark/fountain_pen.png");
}

nav ul li.i_frames a span,
.i_frames {
  background-image: url("images/icons/dark/frames.png");
}

nav ul li.i_fullscreen a span,
.i_fullscreen {
  background-image: url("images/icons/dark/fullscreen.png");
}

nav ul li.i_globe a span,
.i_globe {
  background-image: url("images/icons/dark/globe.png");
}

nav ul li.i_globe_2 a span,
.i_globe_2 {
  background-image: url("images/icons/dark/globe_2.png");
}

nav ul li.i_google_buzz a span,
.i_google_buzz {
  background-image: url("images/icons/dark/google_buzz.png");
}

nav ul li.i_google_maps a span,
.i_google_maps {
  background-image: url("images/icons/dark/google_maps.png");
}

nav ul li.i_graph a span,
.i_graph {
  background-image: url("images/icons/dark/graph.png");
}

nav ul li.i_grid a span,
.i_grid {
  background-image: url("images/icons/dark/grid.png");
}

nav ul li.i_hd a span,
.i_hd {
  background-image: url("images/icons/dark/hd.png");
}

nav ul li.i_hd_2 a span,
.i_hd_2 {
  background-image: url("images/icons/dark/hd_2.png");
}

nav ul li.i_hd_3 a span,
.i_hd_3 {
  background-image: url("images/icons/dark/hd_3.png");
}

nav ul li.i_headphones a span,
.i_headphones {
  background-image: url("images/icons/dark/headphones.png");
}

nav ul li.i_help a span,
.i_help {
  background-image: url("images/icons/dark/help.png");
}

nav ul li.i_house a span,
.i_house {
  background-image: url("images/icons/dark/house.png");
}

nav ul li.i_house_2 a span,
.i_house_2 {
  background-image: url("images/icons/dark/house_2.png");
}

nav ul li.i_ice_cream a span,
.i_ice_cream {
  background-image: url("images/icons/dark/ice_cream.png");
}

nav ul li.i_ice_cream_2 a span,
.i_ice_cream_2 {
  background-image: url("images/icons/dark/ice_cream_2.png");
}

nav ul li.i_ichat a span,
.i_ichat {
  background-image: url("images/icons/dark/ichat.png");
}

nav ul li.i_imac a span,
.i_imac {
  background-image: url("images/icons/dark/imac.png");
}

nav ul li.i_image a span,
.i_image {
  background-image: url("images/icons/dark/image.png");
}

nav ul li.i_image_2 a span,
.i_image_2 {
  background-image: url("images/icons/dark/image_2.png");
}

nav ul li.i_images a span,
.i_images {
  background-image: url("images/icons/dark/images.png");
}

nav ul li.i_images_2 a span,
.i_images_2 {
  background-image: url("images/icons/dark/images_2.png");
}

nav ul li.i_inbox a span,
.i_inbox {
  background-image: url("images/icons/dark/inbox.png");
}

nav ul li.i_incomming a span,
.i_incomming {
  background-image: url("images/icons/dark/incomming.png");
}

nav ul li.i_information a span,
.i_information {
  background-image: url("images/icons/dark/information.png");
}

nav ul li.i_ipad a span,
.i_ipad {
  background-image: url("images/icons/dark/ipad.png");
}

nav ul li.i_iphone_3g a span,
.i_iphone_3g {
  background-image: url("images/icons/dark/iphone_3g.png");
}

nav ul li.i_iphone_4 a span,
.i_iphone_4 {
  background-image: url("images/icons/dark/iphone_4.png");
}

nav ul li.i_ipod a span,
.i_ipod {
  background-image: url("images/icons/dark/ipod.png");
}

nav ul li.i_ipod_nano a span,
.i_ipod_nano {
  background-image: url("images/icons/dark/ipod_nano.png");
}

nav ul li.i_joomla a span,
.i_joomla {
  background-image: url("images/icons/dark/joomla.png");
}

nav ul li.i_key a span,
.i_key {
  background-image: url("images/icons/dark/key.png");
}

nav ul li.i_key_2 a span,
.i_key_2 {
  background-image: url("images/icons/dark/key_2.png");
}

nav ul li.i_ladys_purse a span,
.i_ladys_purse {
  background-image: url("images/icons/dark/ladys_purse.png");
}

nav ul li.i_lamp a span,
.i_lamp {
  background-image: url("images/icons/dark/lamp.png");
}

nav ul li.i_laptop a span,
.i_laptop {
  background-image: url("images/icons/dark/laptop.png");
}

nav ul li.i_lastfm a span,
.i_lastfm {
  background-image: url("images/icons/dark/lastfm.png");
}

nav ul li.i_lemonade_stand a span,
.i_lemonade_stand {
  background-image: url("images/icons/dark/lemonade_stand.png");
}

nav ul li.i_light_bulb a span,
.i_light_bulb {
  background-image: url("images/icons/dark/light_bulb.png");
}

nav ul li.i_link a span,
.i_link {
  background-image: url("images/icons/dark/link.png");
}

nav ul li.i_link_2 a span,
.i_link_2 {
  background-image: url("images/icons/dark/link_2.png");
}

nav ul li.i_linux a span,
.i_linux {
  background-image: url("images/icons/dark/linux.png");
}

nav ul li.i_list a span,
.i_list {
  background-image: url("images/icons/dark/list.png");
}

nav ul li.i_list_image a span,
.i_list_image {
  background-image: url("images/icons/dark/list_image.png");
}

nav ul li.i_list_images a span,
.i_list_images {
  background-image: url("images/icons/dark/list_images.png");
}

nav ul li.i_loading_bar a span,
.i_loading_bar {
  background-image: url("images/icons/dark/loading_bar.png");
}

nav ul li.i_locked a span,
.i_locked {
  background-image: url("images/icons/dark/locked.png");
}

nav ul li.i_locked_2 a span,
.i_locked_2 {
  background-image: url("images/icons/dark/locked_2.png");
}

nav ul li.i_macos a span,
.i_macos {
  background-image: url("images/icons/dark/macos.png");
}

nav ul li.i_magic_mouse a span,
.i_magic_mouse {
  background-image: url("images/icons/dark/magic_mouse.png");
}

nav ul li.i_magnifying_glass a span,
.i_magnifying_glass {
  background-image: url("images/icons/dark/magnifying_glass.png");
}

nav ul li.i_mail a span,
.i_mail {
  background-image: url("images/icons/dark/mail.png");
}

nav ul li.i_male a span,
.i_male {
  background-image: url("images/icons/dark/male.png");
}

nav ul li.i_male_contour a span,
.i_male_contour {
  background-image: url("images/icons/dark/male_contour.png");
}

nav ul li.i_map a span,
.i_map {
  background-image: url("images/icons/dark/map.png");
}

nav ul li.i_marker a span,
.i_marker {
  background-image: url("images/icons/dark/marker.png");
}

nav ul li.i_maximize a span,
.i_maximize {
  background-image: url("images/icons/dark/maximize.png");
}

nav ul li.i_medical_case a span,
.i_medical_case {
  background-image: url("images/icons/dark/medical_case.png");
}

nav ul li.i_megaphone a span,
.i_megaphone {
  background-image: url("images/icons/dark/megaphone.png");
}

nav ul li.i_microphone a span,
.i_microphone {
  background-image: url("images/icons/dark/microphone.png");
}

nav ul li.i_mighty_mouse a span,
.i_mighty_mouse {
  background-image: url("images/icons/dark/mighty_mouse.png");
}

nav ul li.i_minimize a span,
.i_minimize {
  background-image: url("images/icons/dark/minimize.png");
}

nav ul li.i_minus a span,
.i_minus {
  background-image: url("images/icons/dark/minus.png");
}

nav ul li.i_mobile_phone a span,
.i_mobile_phone {
  background-image: url("images/icons/dark/mobile_phone.png");
}

nav ul li.i_mobypicture a span,
.i_mobypicture {
  background-image: url("images/icons/dark/mobypicture.png");
}

nav ul li.i_money a span,
.i_money {
  background-image: url("images/icons/dark/money.png");
}

nav ul li.i_money_2 a span,
.i_money_2 {
  background-image: url("images/icons/dark/money_2.png");
}

nav ul li.i_monitor a span,
.i_monitor {
  background-image: url("images/icons/dark/monitor.png");
}

nav ul li.i_mouse a span,
.i_mouse {
  background-image: url("images/icons/dark/mouse.png");
}

nav ul li.i_myspace a span,
.i_myspace {
  background-image: url("images/icons/dark/myspace.png");
}

nav ul li.i_next a span,
.i_next {
  background-image: url("images/icons/dark/next.png");
}

nav ul li.i_note_book a span,
.i_note_book {
  background-image: url("images/icons/dark/note_book.png");
}

nav ul li.i_outgoing a span,
.i_outgoing {
  background-image: url("images/icons/dark/outgoing.png");
}

nav ul li.i_pacman a span,
.i_pacman {
  background-image: url("images/icons/dark/pacman.png");
}

nav ul li.i_pacman_ghost a span,
.i_pacman_ghost {
  background-image: url("images/icons/dark/pacman_ghost.png");
}

nav ul li.i_paint_brush a span,
.i_paint_brush {
  background-image: url("images/icons/dark/paint_brush.png");
}

nav ul li.i_pants a span,
.i_pants {
  background-image: url("images/icons/dark/pants.png");
}

nav ul li.i_paperclip a span,
.i_paperclip {
  background-image: url("images/icons/dark/paperclip.png");
}

nav ul li.i_paste a span,
.i_paste {
  background-image: url("images/icons/dark/paste.png");
}

nav ul li.i_pause a span,
.i_pause {
  background-image: url("images/icons/dark/pause.png");
}

nav ul li.i_paypal a span,
.i_paypal {
  background-image: url("images/icons/dark/paypal.png");
}

nav ul li.i_paypal_2 a span,
.i_paypal_2 {
  background-image: url("images/icons/dark/paypal_2.png");
}

nav ul li.i_paypal_3 a span,
.i_paypal_3 {
  background-image: url("images/icons/dark/paypal_3.png");
}

nav ul li.i_pdf_document a span,
.i_pdf_document {
  background-image: url("images/icons/dark/pdf_document.png");
}

nav ul li.i_pdf_documents a span,
.i_pdf_documents {
  background-image: url("images/icons/dark/pdf_documents.png");
}

nav ul li.i_pencil a span,
.i_pencil {
  background-image: url("images/icons/dark/pencil.png");
}

nav ul li.i_phone a span,
.i_phone {
  background-image: url("images/icons/dark/phone.png");
}

nav ul li.i_phone_2 a span,
.i_phone_2 {
  background-image: url("images/icons/dark/phone_2.png");
}

nav ul li.i_phone_hook a span,
.i_phone_hook {
  background-image: url("images/icons/dark/phone_hook.png");
}

nav ul li.i_piggy_bank a span,
.i_piggy_bank {
  background-image: url("images/icons/dark/piggy_bank.png");
}

nav ul li.i_plane_suitecase a span,
.i_plane_suitecase {
  background-image: url("images/icons/dark/plane_suitecase.png");
}

nav ul li.i_play a span,
.i_play {
  background-image: url("images/icons/dark/play.png");
}

nav ul li.i_plixi a span,
.i_plixi {
  background-image: url("images/icons/dark/plixi.png");
}

nav ul li.i_plus a span,
.i_plus {
  background-image: url("images/icons/dark/plus.png");
}

nav ul li.i_post_card a span,
.i_post_card {
  background-image: url("images/icons/dark/post_card.png");
}

nav ul li.i_power a span,
.i_power {
  background-image: url("images/icons/dark/power.png");
}

nav ul li.i_powerpoint_document a span,
.i_powerpoint_document {
  background-image: url("images/icons/dark/powerpoint_document.png");
}

nav ul li.i_powerpoint_documents a span,
.i_powerpoint_documents {
  background-image: url("images/icons/dark/powerpoint_documents.png");
}

nav ul li.i_presentation a span,
.i_presentation {
  background-image: url("images/icons/dark/presentation.png");
}

nav ul li.i_prev a span,
.i_prev {
  background-image: url("images/icons/dark/prev.png");
}

nav ul li.i_preview a span,
.i_preview {
  background-image: url("images/icons/dark/preview.png");
}

nav ul li.i_price_tag a span,
.i_price_tag {
  background-image: url("images/icons/dark/price_tag.png");
}

nav ul li.i_price_tags a span,
.i_price_tags {
  background-image: url("images/icons/dark/price_tags.png");
}

nav ul li.i_printer a span,
.i_printer {
  background-image: url("images/icons/dark/printer.png");
}

nav ul li.i_question a span,
.i_question {
  background-image: url("images/icons/dark/question.png");
}

nav ul li.i_radio a span,
.i_radio {
  background-image: url("images/icons/dark/radio.png");
}

nav ul li.i_record a span,
.i_record {
  background-image: url("images/icons/dark/record.png");
}

nav ul li.i_recycle a span,
.i_recycle {
  background-image: url("images/icons/dark/recycle.png");
}

nav ul li.i_refresh a span,
.i_refresh {
  background-image: url("images/icons/dark/refresh.png");
}

nav ul li.i_refresh_2 a span,
.i_refresh_2 {
  background-image: url("images/icons/dark/refresh_2.png");
}

nav ul li.i_refresh_3 a span,
.i_refresh_3 {
  background-image: url("images/icons/dark/refresh_3.png");
}

nav ul li.i_refresh_4 a span,
.i_refresh_4 {
  background-image: url("images/icons/dark/refresh_4.png");
}

nav ul li.i_repeat a span,
.i_repeat {
  background-image: url("images/icons/dark/repeat.png");
}

nav ul li.i_rewind a span,
.i_rewind {
  background-image: url("images/icons/dark/rewind.png");
}

nav ul li.i_robot a span,
.i_robot {
  background-image: url("images/icons/dark/robot.png");
}

nav ul li.i_rss a span,
.i_rss {
  background-image: url("images/icons/dark/rss.png");
}

nav ul li.i_ruler a span,
.i_ruler {
  background-image: url("images/icons/dark/ruler.png");
}

nav ul li.i_ruler_2 a span,
.i_ruler_2 {
  background-image: url("images/icons/dark/ruler_2.png");
}

nav ul li.i_running_man a span,
.i_running_man {
  background-image: url("images/icons/dark/running_man.png");
}

nav ul li.i_safari a span,
.i_safari {
  background-image: url("images/icons/dark/safari.png");
}

nav ul li.i_scan_label a span,
.i_scan_label {
  background-image: url("images/icons/dark/scan_label.png");
}

nav ul li.i_scissors a span,
.i_scissors {
  background-image: url("images/icons/dark/scissors.png");
}

nav ul li.i_sd a span,
.i_sd {
  background-image: url("images/icons/dark/sd.png");
}

nav ul li.i_sd_2 a span,
.i_sd_2 {
  background-image: url("images/icons/dark/sd_2.png");
}

nav ul li.i_sd_3 a span,
.i_sd_3 {
  background-image: url("images/icons/dark/sd_3.png");
}

nav ul li.i_settings a span,
.i_settings {
  background-image: url("images/icons/dark/settings.png");
}

nav ul li.i_settings_2 a span,
.i_settings_2 {
  background-image: url("images/icons/dark/settings_2.png");
}

nav ul li.i_shopping_bag a span,
.i_shopping_bag {
  background-image: url("images/icons/dark/shopping_bag.png");
}

nav ul li.i_shopping_basket a span,
.i_shopping_basket {
  background-image: url("images/icons/dark/shopping_basket.png");
}

nav ul li.i_shopping_basket_2 a span,
.i_shopping_basket_2 {
  background-image: url("images/icons/dark/shopping_basket_2.png");
}

nav ul li.i_shopping_cart a span,
.i_shopping_cart {
  background-image: url("images/icons/dark/shopping_cart.png");
}

nav ul li.i_shopping_cart_2 a span,
.i_shopping_cart_2 {
  background-image: url("images/icons/dark/shopping_cart_2.png");
}

nav ul li.i_shopping_cart_3 a span,
.i_shopping_cart_3 {
  background-image: url("images/icons/dark/shopping_cart_3.png");
}

nav ul li.i_shopping_cart_4 a span,
.i_shopping_cart_4 {
  background-image: url("images/icons/dark/shopping_cart_4.png");
}

nav ul li.i_shuffle a span,
.i_shuffle {
  background-image: url("images/icons/dark/shuffle.png");
}

nav ul li.i_sign_post a span,
.i_sign_post {
  background-image: url("images/icons/dark/sign_post.png");
}

nav ul li.i_skype a span,
.i_skype {
  background-image: url("images/icons/dark/skype.png");
}

nav ul li.i_sleeveless_shirt a span,
.i_sleeveless_shirt {
  background-image: url("images/icons/dark/sleeveless_shirt.png");
}

nav ul li.i_socks a span,
.i_socks {
  background-image: url("images/icons/dark/socks.png");
}

nav ul li.i_sound a span,
.i_sound {
  background-image: url("images/icons/dark/sound.png");
}

nav ul li.i_speech_bubble a span,
.i_speech_bubble {
  background-image: url("images/icons/dark/speech_bubble.png");
}

nav ul li.i_speech_bubble_2 a span,
.i_speech_bubble_2 {
  background-image: url("images/icons/dark/speech_bubble_2.png");
}

nav ul li.i_speech_bubbles a span,
.i_speech_bubbles {
  background-image: url("images/icons/dark/speech_bubbles.png");
}

nav ul li.i_speech_bubbles_2 a span,
.i_speech_bubbles_2 {
  background-image: url("images/icons/dark/speech_bubbles_2.png");
}

nav ul li.i_sport_shirt a span,
.i_sport_shirt {
  background-image: url("images/icons/dark/sport_shirt.png");
}

nav ul li.i_stop a span,
.i_stop {
  background-image: url("images/icons/dark/stop.png");
}

nav ul li.i_stop_watch a span,
.i_stop_watch {
  background-image: url("images/icons/dark/stop_watch.png");
}

nav ul li.i_strategy a span,
.i_strategy {
  background-image: url("images/icons/dark/strategy.png");
}

nav ul li.i_strategy_2 a span,
.i_strategy_2 {
  background-image: url("images/icons/dark/strategy_2.png");
}

nav ul li.i_stubleupon a span,
.i_stubleupon {
  background-image: url("images/icons/dark/stubleupon.png");
}

nav ul li.i_suitecase a span,
.i_suitecase {
  background-image: url("images/icons/dark/suitecase.png");
}

nav ul li.i_sweater a span,
.i_sweater {
  background-image: url("images/icons/dark/sweater.png");
}

nav ul li.i_t-shirt a span,
.i_t-shirt {
  background-image: url("images/icons/dark/t-shirt.png");
}

nav ul li.i_table a span,
.i_table {
  background-image: url("images/icons/dark/table.png");
}

nav ul li.i_tag a span,
.i_tag {
  background-image: url("images/icons/dark/tag.png");
}

nav ul li.i_tags a span,
.i_tags {
  background-image: url("images/icons/dark/tags.png");
}

nav ul li.i_television a span,
.i_television {
  background-image: url("images/icons/dark/television.png");
}

nav ul li.i_tick a span,
.i_tick {
  background-image: url("images/icons/dark/tick.png");
}

nav ul li.i_timer a span,
.i_timer {
  background-image: url("images/icons/dark/timer.png");
}

nav ul li.i_trashcan a span,
.i_trashcan {
  background-image: url("images/icons/dark/trashcan.png");
}

nav ul li.i_trashcan_2 a span,
.i_trashcan_2 {
  background-image: url("images/icons/dark/trashcan_2.png");
}

nav ul li.i_travel_suitecase a span,
.i_travel_suitecase {
  background-image: url("images/icons/dark/travel_suitecase.png");
}

nav ul li.i_tree a span,
.i_tree {
  background-image: url("images/icons/dark/tree.png");
}

nav ul li.i_triangle_double_down a span,
.i_triangle_double_down {
  background-image: url("images/icons/dark/triangle_double_down.png");
}

nav ul li.i_triangle_double_left a span,
.i_triangle_double_left {
  background-image: url("images/icons/dark/triangle_double_left.png");
}

nav ul li.i_triangle_double_right a span,
.i_triangle_double_right {
  background-image: url("images/icons/dark/triangle_double_right.png");
}

nav ul li.i_triangle_double_up a span,
.i_triangle_double_up {
  background-image: url("images/icons/dark/triangle_double_up.png");
}

nav ul li.i_triangle_down a span,
.i_triangle_down {
  background-image: url("images/icons/dark/triangle_down.png");
}

nav ul li.i_triangle_down_left a span,
.i_triangle_down_left {
  background-image: url("images/icons/dark/triangle_down_left.png");
}

nav ul li.i_triangle_down_right a span,
.i_triangle_down_right {
  background-image: url("images/icons/dark/triangle_down_right.png");
}

nav ul li.i_triangle_left a span,
.i_triangle_left {
  background-image: url("images/icons/dark/triangle_left.png");
}

nav ul li.i_triangle_left_right a span,
.i_triangle_left_right {
  background-image: url("images/icons/dark/triangle_left_right.png");
}

nav ul li.i_triangle_right a span,
.i_triangle_right {
  background-image: url("images/icons/dark/triangle_right.png");
}

nav ul li.i_triangle_up a span,
.i_triangle_up {
  background-image: url("images/icons/dark/triangle_up.png");
}

nav ul li.i_triangle_up_down a span,
.i_triangle_up_down {
  background-image: url("images/icons/dark/triangle_up_down.png");
}

nav ul li.i_triangle_up_left a span,
.i_triangle_up_left {
  background-image: url("images/icons/dark/triangle_up_left.png");
}

nav ul li.i_triangle_up_right a span,
.i_triangle_up_right {
  background-image: url("images/icons/dark/triangle_up_right.png");
}

nav ul li.i_trolly a span,
.i_trolly {
  background-image: url("images/icons/dark/trolly.png");
}

nav ul li.i_truck a span,
.i_truck {
  background-image: url("images/icons/dark/truck.png");
}

nav ul li.i_tumbler a span,
.i_tumbler {
  background-image: url("images/icons/dark/tumbler.png");
}

nav ul li.i_twitter a span,
.i_twitter {
  background-image: url("images/icons/dark/twitter.png");
}

nav ul li.i_twitter_2 a span,
.i_twitter_2 {
  background-image: url("images/icons/dark/twitter_2.png");
}

nav ul li.i_typo a span,
.i_typo {
  background-image: url("images/icons/dark/typo.png");
}

nav ul li.i_umbrella a span,
.i_umbrella {
  background-image: url("images/icons/dark/umbrella.png");
}

nav ul li.i_under_construction a span,
.i_under_construction {
  background-image: url("images/icons/dark/under_construction.png");
}

nav ul li.i_unlocked a span,
.i_unlocked {
  background-image: url("images/icons/dark/unlocked.png");
}

nav ul li.i_upload a span,
.i_upload {
  background-image: url("images/icons/dark/upload.png");
}

nav ul li.i_user a span,
.i_user {
  background-image: url("images/icons/dark/user.png");
}

nav ul li.i_user_2 a span,
.i_user_2 {
  background-image: url("images/icons/dark/user_2.png");
}

nav ul li.i_user_comment a span,
.i_user_comment {
  background-image: url("images/icons/dark/user_comment.png");
}

nav ul li.i_users a span,
.i_users {
  background-image: url("images/icons/dark/users.png");
}

nav ul li.i_users_2 a span,
.i_users_2 {
  background-image: url("images/icons/dark/users_2.png");
}

nav ul li.i_v-card a span,
.i_v-card {
  background-image: url("images/icons/dark/v-card.png");
}

nav ul li.i_v-card_2 a span,
.i_v-card_2 {
  background-image: url("images/icons/dark/v-card_2.png");
}

nav ul li.i_vault a span,
.i_vault {
  background-image: url("images/icons/dark/vault.png");
}

nav ul li.i_vimeo a span,
.i_vimeo {
  background-image: url("images/icons/dark/vimeo.png");
}

nav ul li.i_vimeo_2 a span,
.i_vimeo_2 {
  background-image: url("images/icons/dark/vimeo_2.png");
}

nav ul li.i_walking_man a span,
.i_walking_man {
  background-image: url("images/icons/dark/walking_man.png");
}

nav ul li.i_wifi_signal a span,
.i_wifi_signal {
  background-image: url("images/icons/dark/wifi_signal.png");
}

nav ul li.i_wifi_signal_2 a span,
.i_wifi_signal_2 {
  background-image: url("images/icons/dark/wifi_signal_2.png");
}

nav ul li.i_windows a span,
.i_windows {
  background-image: url("images/icons/dark/windows.png");
}

nav ul li.i_winner_podium a span,
.i_winner_podium {
  background-image: url("images/icons/dark/winner_podium.png");
}

nav ul li.i_wizard a span,
.i_wizard {
  background-image: url("images/icons/dark/wizard.png");
}

nav ul li.i_word_document a span,
.i_word_document {
  background-image: url("images/icons/dark/word_document.png");
}

nav ul li.i_word_documents a span,
.i_word_documents {
  background-image: url("images/icons/dark/word_documents.png");
}

nav ul li.i_wordpress a span,
.i_wordpress {
  background-image: url("images/icons/dark/wordpress.png");
}

nav ul li.i_wordpress_2 a span,
.i_wordpress_2 {
  background-image: url("images/icons/dark/wordpress_2.png");
}

nav ul li.i_youtube a span,
.i_youtube {
  background-image: url("images/icons/dark/youtube.png");
}

nav ul li.i_youtube_2 a span,
.i_youtube_2 {
  background-image: url("images/icons/dark/youtube_2.png");
}

nav ul li.i_zip_file a span,
.i_zip_file {
  background-image: url("images/icons/dark/zip_file.png");
}

nav ul li.i_zip_files a span,
.i_zip_files {
  background-image: url("images/icons/dark/zip_files.png");
}