html
  { background-color: #ffffff; text-rendering: optimizeLegibility; -moz-osx-font-smoothing: auto; -webkit-font-smoothing : antialiased; height: 100%; }
body
  { background-color: var(--color-accent-5); }
html, body
  { width: 100%; min-height: 100svh; max-height: none !important; font-size: 20px;
  color: var(--color-text); margin: 0 auto; padding: 0 !important; border: none !important;
  scrollbar-color: var(--color-accent) var(--color-accent-5); scrollbar-width: auto; }
body::-webkit-scrollbar
  { width: .5em; z-index: 1000; }
body::-webkit-scrollbar-track
  { -webkit-box-shadow: inset 0 0 .3em var(--color-accent-5); }
body::-webkit-scrollbar-thumb
  { background-color: var(--color-accent); outline: none; }

.nodisplay
  { display: none; }

a
  { color: var(--color-accent); }
a, button
  { -webkit-transition: all 250ms cubic-bezier(0.165, 0.84, 0.44, 1); transition: all 250ms cubic-bezier(0.165, 0.84, 0.44, 1); }
a:hover
  { color: var(--color-text); }

b, strong
  { font-weight: 600; }

h1
  { font-size: 1.6em; margin: 0; line-height: 1.1em; text-transform: uppercase; font-weight: 700; }
h2
  { font-size: 1.2em; margin: 1.5em 0 .5em 0; line-height: 1.1em; text-transform: uppercase; font-weight: 600; color: var(--color-accent); }
h3
  { font-size: 1em; margin: 1.5em 0 .5em 0; line-height: 1.1em; text-transform: uppercase; font-weight: 600; color: var(--color-accent); }
div#page-content h2:first-child
  { margin-top: 0; }
h3
  { font-size: .9em; margin: 1em 0 .5em 0; line-height: 1.1em; text-transform: uppercase; font-weight: 600; color: var(--color-accent); }

hr
  { height: 2px; margin: 1em 2em; background-color: var(--color-accent-5); }
ul#breadcrumb
  { margin: 0; padding: 0; list-style-type: none; }
ul#breadcrumb li
  { display: inline-block; font-size: .7em; color: var(--color-text-35); }
ul#breadcrumb li.link + li::before
  { display: inline-block; content: "❭"; margin: 0 .5em; font-size: .8em; }
ul#breadcrumb li a
  { font-weight: bold; color: var(--color-accent); text-decoration: none; }
ul#breadcrumb li a:hover
  { color: var(--color-text); opacity: 1; }

/*
* LOADER
*/
div#loading-wait
  { position: fixed; top: 0; right: 0; bottom: 0; left: 0;
  width: 100%; height: 100%; max-width: none !important; max-height: none !important; z-index: 10000; margin: 0; padding: 0;
  background: url("../images/loader.gif") center center no-repeat var(--color-text-5); }
div#loading-content
  { display: inline-flex; visibility: hidden; margin: 0 auto; width: 100%; min-height: 100vh; }


/*
* MESSAGES
*/
div#messages-container
  { position: fixed; z-index: 5000; bottom: 1em; right: 1em; width: calc(100% - 2em); max-width: 540px; background-color: #ffffff; border-radius: 4px; overflow: hidden; }
div#messages-container div.message
  { font-size: .8em; margin: 0; padding: .75em 1em; border: 2px solid #ffffff; border-radius: 4px; font-weight: normal; }
div#messages-container div.message.message-status
  { border-color: rgba(52, 173, 106, 1); color: rgba(52, 173, 106, 1); background-color: rgba(52, 173, 106, .3); }
div#messages-container div.message.message-status b
  { color: rgba(52, 173, 106, 1); }
div#messages-container div.message.message-warning
  { border-color: rgba(214, 114, 27, 1); color: rgba(214, 114, 27, 1); background-color: rgba(214, 114, 27, .3); }
div#messages-container div.message.message-warning b
  { color: rgba(214, 114, 27, 1); }
div#messages-container div.message.message-error
  { border-color: rgba(214, 45, 26, 1); color: rgba(214, 45, 26, 1); background-color: rgba(214, 45, 26, .3); }
div#messages-container div.message.message-error b
  { color: rgba(214, 45, 26, 1); }

/*
* LOGIN FORM
*/
body.login-block div#loading-content
  { align-items: center; min-height: none; }
div#login-form-logo
  { text-align: center; margin-bottom: 1.5em; }
div#login-form-logo img
  { width: auto; max-width: 100%; height: auto; }
div#login-form-container
  { margin: 2em auto; padding: 3em; width: 100%; max-width: 480px; background-color: #ffffff; border-radius: .5em; }
div#login-form-container input,
div#login-form-container button
  { width: 100%; }
@media (max-width: 480px) {
  div#login-form-container
    { margin: 2em 1em; width: calc(100% - 2em); padding: 2em; }

}

/*
* SIDE CONTAINER
*/
div#side-container
  { position: fixed; display: block; width: 220px; height: 100svh; padding: 0; background-color: #ffffff; border-right: 1px solid var(--color-text-5); z-index: 5;
    -webkit-transition: all 250ms cubic-bezier(0.165, 0.84, 0.44, 1); transition: all 250ms cubic-bezier(0.165, 0.84, 0.44, 1); }
div#side-container div#logo
  { padding: 2em 1em; text-align: center;
    -webkit-transition: all 250ms cubic-bezier(0.165, 0.84, 0.44, 1); transition: all 250ms cubic-bezier(0.165, 0.84, 0.44, 1); }
div#side-container div#logo a,
div#side-container div#logo a img
  { display: inline-block; max-width: 100%; }
div#side-container div#logo a img#logo-icon
  { display: none; }

div#side-container div.side-group + div.side-group
  { margin-top: 2em; }
div#side-container div.side-category
  { font-size: .6em; font-weight: 600; text-transform: uppercase; color: var(--color-accent-50); padding: 0 .75rem; }
div#side-container div.side-category div
  { font-size: .8em; line-height: 1em; }
div#side-container ul
  { list-style-type: none; margin: .25em 0 0 0; padding: 0;  }
div#side-container ul li
  { display: block; }
div#side-container ul li a
  { display: block; text-decoration: none; padding: .5rem .75rem; border-radius: .35em; line-height: 1em; }
div#side-container ul li a img
  { display: inline-block; width: 1em; height: auto; vertical-align: middle; filter: var(--color-text-filter); opacity: .75; }
div#side-container ul li a span
  { display: inline-block; font-size: .7em; font-weight: 500; color: var(--color-text-75); margin-left: .35rem; }
div#side-container ul li a:hover
  { color: inherit; background-color: var(--color-text-5); }
div#side-container ul li a.active
  { background-color: var(--color-accent-5); overflow: hidden; }
div#side-container ul li a.active img
  { filter: var(--color-accent-filter); opacity: 1; }
div#side-container ul li a.active span
  { color: var(--color-accent); }
div#side-container ul li a.active::after
  { position: absolute; content: ""; width: .2em; height: 2em; background-color: var(--color-accent); left: 0; margin-top: -.5rem; border-radius: 0 .35em .35em 0; }


div#side-container div#menu
  { padding: .75em .75em; }
div#side-container div#menu.scroll
  { overflow-x: hidden; overflow-y: scroll !important; border-top: 1px solid var(--color-text-5); border-bottom: 1px solid var(--color-text-5); }
div#side-container div#user
  { position: absolute; bottom: 0; width: 100%; padding: 1em .75em; }
div#side-container div#menu.scroll + div#user
  { }

/*
* MAIN CONTAINER
*/
div#main-container
  { position: relative; display: block; margin-left: 220px; width: calc(100% - 220px); min-height: 100svh; background-color: #ffffff;
    -webkit-transition: all 250ms cubic-bezier(0.165, 0.84, 0.44, 1); transition: all 250ms cubic-bezier(0.165, 0.84, 0.44, 1); }
div#main-container div#page-container
  { display: block; position: relative; padding: 2em; }

  






div#side-container-handle
  { position: absolute; display: block; width: 1.5rem; height: 1.5rem; top: calc(100svh - 1.5rem); right: calc(-1.5rem); background-color: #ffffff; cursor: pointer; z-index: 10;
    border-radius: 0 .25rem 0 0; border: 1px solid var(--color-text-5); border-left: none; border-bottom: none; }
div#side-container-handle::after
  { position: absolute; content: "◀"; top: 0; left: 0; text-align: center; width: 1.5rem; height: 1.5rem; line-height: 1.5rem; font-size: .6em;
  -webkit-transition: all 250ms cubic-bezier(0.165, 0.84, 0.44, 1); transition: all 250ms cubic-bezier(0.165, 0.84, 0.44, 1); }
div#side-container-handle:hover::after
  { color: var(--color-accent);
  -webkit-transition: all 250ms cubic-bezier(0.165, 0.84, 0.44, 1); transition: all 250ms cubic-bezier(0.165, 0.84, 0.44, 1);  }
div#side-container-handle div
  { position: relative; width: 100%; height: 100%; }
div#side-container-handle div::before
  { position: absolute; content: ""; width: 10px; height: 10px; top: -10px; background-color: #ffffff;
    border: none; border-radius: 0;  }
div#side-container-handle div::after
  { position: absolute; content: ""; width: 10px; height: 10px; top: -10px; background-color: #ffffff;
  border: 1px solid var(--color-text-5); border-top: none; border-right: none; border-radius: 0 0 0 .25rem; }

div#side-container.mini
  { width: 80px; }
div#side-container.mini div#logo
  { padding: 1em; }
div#side-container.mini div#logo a img#logo-full
  { display: none; }
div#side-container.mini div#logo a img#logo-icon
  { display: inline-block; width: 30px; height: auto; }
div#side-container.mini div.side-group + div.side-group
  { margin-top: 1em; }
div#side-container.mini ul li a span
  { display: none; }
div#side-container.mini div.side-category
  { display: none; }
div#side-container.mini div#menu
  { padding: .5em .75em; }
div#side-container.mini div#user
  { padding: .75em .75em 1em .75em; }
div#side-container.mini + div#main-container
  { margin-left: 80px; width: calc(100% - 80px); }
div#side-container.mini div#side-container-handle::after
  { transform: rotate(180deg); }




div#main-container div#page-content
  { margin-top: 1em; /*padding: 2em; background-color: var(--color-accent-5); border-radius: 4px;*/ }

@media (max-width: 1360px) {
  div#side-container:not(.mini)
    { width: 180px; }
  div#side-container:not(.mini) + div#main-container
    { margin-left: 180px; width: calc(100% - 180px); }
}
@media (max-width: 1080px) {
  div#side-container,
  div#side-container:not(.mini)
    { width: 80px; }
  div#side-container div#logo
    { padding: 1em; }
  div#side-container div#logo a img#logo-full
    { display: none; }
  div#side-container div#logo a img#logo-icon
    { display: inline-block; width: 30px; height: auto; }
  div#side-container div.side-group + div.side-group
    { margin-top: 1em; }
  div#side-container ul li a span
    { display: none; }
  div#side-container div.side-category
    { display: none; }
  div#side-container div#menu
    { padding: .5em .75em; }
  div#side-container div#user
    { padding: .75em .75em 1em .75em; }
  div#main-container,
  div#side-container:not(.mini) + div#main-container
    { margin-left: 80px; width: calc(100% - 80px); }
  div#side-container-handle
    { display: none; }
}
@media (max-width: 720px) {
  div#side-container,
  div#side-container:not(.mini)
    { width: 60px; }
  div#side-container div#logo
    { padding: .5em; }
  div#side-container div#logo a img#logo-icon
    { width: 25px; }
  div#side-container div.side-group + div.side-group
    { margin-top: .5em; }
  div#side-container ul li a
    { padding: .5rem;  }
  div#side-container div#menu
    { padding: .5rem; }
  div#side-container div#user
    { padding: .5em; }
  div#main-container,
  div#side-container:not(.mini) + div#main-container
    { margin-left: 60px; width: calc(100% - 60px); }

}
/*
* BLOCKS
*/
div.block-element
  { text-align: center; background-color: #f5f5f5; padding: 2em; border-radius: 4px; }
div.block-element div.block-element-label
  { display: block; font-weight: 600; font-size: .8em; }
div.block-element div.block-element-value
  { font-size: 2em; color: var(--color-accent); font-weight: 600; }
div.block-element div.block-element-value span
  { font-weight: 600; }
div.block-element div.block-element-value a
  { font-size: .35em; }
div.block-element div.block-element-subvalue
  { display: block; font-weight: 600; font-size: .7em; }
div.block-element div.block-element-subvalue span
  { font-weight: 600; }


/*
* icon selector
*/
span.icon-selector
  { display: inline-block; margin-right: .5em; margin-top: .5em; width: 40px; height: 40px; cursor: pointer;
  text-align: center; border: 1px solid var(--color-text-10); border-radius: .5em; padding: .25em; }
span.icon-selector img
  { display: block; width: calc(40px - .5em); height: calc(40px - .5em); }
span.icon-selector.selected
  { background-color: var(--color-accent); border-color: var(--color-accent); }
span.icon-selector.selected img
  { filter: brightness(0) invert(1); }