@charset "UTF-8";
/* site */
/* copied variables */
html { font-size: 13px; }

html * { font-size: 100%; border-width: 1px; }

html, * { font-family: sans-serif, "Helvetica Neue", -apple-system, Ubuntu; line-height: 1.5; -webkit-text-size-adjust: 100%; }

* { -webkit-box-sizing: border-box; box-sizing: border-box; }

body { margin: 0; -webkit-box-sizing: border-box; box-sizing: border-box; }

details { display: block; }

summary { display: list-item; }

abbr[title] { border-bottom: none; -webkit-text-decoration: underline dotted; text-decoration: underline dotted; }

input, .input { overflow: visible; }

img { max-width: 100%; height: auto; }

h1, h2, h3, h4, h5, h6 { line-height: 1.2; margin: 0.75rem 0.5rem; font-weight: 500; }

h1 small, h2 small, h3 small, h4 small, h5 small, h6 small { display: block; margin-top: -0.25rem; }

h1 { font-size: 2.00534rem; }

h2 { font-size: 1.68516rem; }

h3 { font-size: 1.4161rem; }

h4 { font-size: 1.19rem; }

h5 { font-size: 1rem; }

h6 { font-size: 0.84034rem; }

p { margin: 0.5rem; }

ol, ul { margin: 0.5rem; padding-left: 1rem; }

b, strong { font-weight: 700; }

hr { -webkit-box-sizing: content-box; box-sizing: content-box; border: 0; line-height: 1.25rem; margin: 0.5rem; height: 0.0625rem; }

blockquote { display: block; position: relative; font-style: italic; margin: 0.5rem; padding: 1.5rem; border-radius: 0 0.5rem 0.5rem 0; }

blockquote:before { position: absolute; top: -0.5rem; left: 0; font-family: sans-serif; font-size: 3rem; font-weight: 700; content: "\201c"; }

blockquote[cite]:after { font-style: normal; font-size: 0.75rem; font-weight: 700; content: "\a—  " attr(cite); white-space: pre; }

code, kbd, pre, samp { font-family: Menlo, Consolas, monospace; font-size: 0.85rem; }

code { border-radius: 0.5rem; padding: 0.125rem 0.25rem; }

kbd { border-radius: 0.5rem; padding: 0.125rem 0.25rem; }

pre { overflow: auto; padding: 0.75rem; margin: 0.5rem; border-radius: 0 0.5rem 0.5rem 0; }

sup, sub, code, kbd { line-height: 0; position: relative; vertical-align: baseline; }

small, sup, sub, figcaption { font-size: 0.75rem; }

sup { top: -0.5rem; }

sub { bottom: -0.25rem; }

figure { margin: 0.5rem; }

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

a.link:hover { opacity: 80%; }

a:hover, a:focus { text-decoration: underline; }

/* main (container) */
.os-container { height: 100vh; width: 100vw; padding: 0; margin: 0; }

/* sidebar */
.os-sidebar { position: fixed; left: 0; top: 0; width: 300px; height: 100vh; padding: 0; margin: 0; z-index: 99; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }

.os-sidebar > .os-header { width: 300px; height: 50px; padding: 0 !important; justify-items: center; -ms-flex-item-align: center; -ms-grid-row-align: center; align-self: center; }

.os-sidebar > .os-body { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; display: -webkit-box; display: -ms-flexbox; display: flex; padding-top: 0; overflow-y: auto; max-height: calc(100vh - 50px); }

.os-sidebar > .os-body::-webkit-scrollbar { padding: 0 !important; width: 0 !important; margin: 0 !important; }

/* sidebar */
/* content */
.os-content { height: 100%; width: 100%; padding: 1rem; padding-top: 0em; padding-left: 310px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }

.os-content > .os-header { position: fixed !important; top: 0; height: 50px; left: 300px; right: 0 !important; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; z-index: 99; }

.os-content > .os-header > .brand { -ms-grid-column-align: left; justify-self: left; font-size: 1.5rem; font-weight: bold; }

.os-content > .os-header > .menu { justify-self: right; -ms-flex-item-align: right; align-self: right; display: -webkit-box; display: -ms-flexbox; display: flex; }

.os-content > .os-body { width: 99.5% !important; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; padding-top: 60px; }

.os-grid { display: -ms-grid; display: grid; -ms-grid-columns: 1fr 1fr; grid-template-columns: 1fr 1fr; -ms-grid-rows: auto; grid-template-rows: auto; grid-gap: 1rem; }

.os-grid-item { padding: 3vw; }

.content { padding: 0.5rem; }

/* content */
.row { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-flex: 0; -ms-flex: 0 1 auto; flex: 0 1 auto; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row wrap; flex-flow: row wrap; }

.row > * { padding: 0 0.25rem; }

.row .col, .row .col-sm, .row.cols, .row.cols-sm > * { max-width: 100%; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; -ms-flex-preferred-size: 0; flex-basis: 0; }

.row .col-1, .row .col-sm-1, .row.cols-1 > *, .row.cols-sm-1 > * { max-width: 8.33333%; -ms-flex-preferred-size: 8.33333%; flex-basis: 8.33333%; }

.row .col-offset-1, .row .col-sm-offset-1 { margin-left: 8.33333%; }

.row .col-md-1, .row .col-lg-1, .row.cols-md-1 > *, .row.cols-lg-1 > * { width: 100%; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; }

.row .col-md-offset-1, .row .col-lg-offset-1 { margin-left: 0; }

.row .col-2, .row .col-sm-2, .row.cols-2 > *, .row.cols-sm-2 > * { max-width: 16.66667%; -ms-flex-preferred-size: 16.66667%; flex-basis: 16.66667%; }

.row .col-offset-2, .row .col-sm-offset-2 { margin-left: 16.66667%; }

.row .col-md-2, .row .col-lg-2, .row.cols-md-2 > *, .row.cols-lg-2 > * { width: 100%; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; }

.row .col-md-offset-2, .row .col-lg-offset-2 { margin-left: 0; }

.row .col-3, .row .col-sm-3, .row.cols-3 > *, .row.cols-sm-3 > * { max-width: 25%; -ms-flex-preferred-size: 25%; flex-basis: 25%; }

.row .col-offset-3, .row .col-sm-offset-3 { margin-left: 25%; }

.row .col-md-3, .row .col-lg-3, .row.cols-md-3 > *, .row.cols-lg-3 > * { width: 100%; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; }

.row .col-md-offset-3, .row .col-lg-offset-3 { margin-left: 0; }

.row .col-4, .row .col-sm-4, .row.cols-4 > *, .row.cols-sm-4 > * { max-width: 33.33333%; -ms-flex-preferred-size: 33.33333%; flex-basis: 33.33333%; }

.row .col-offset-4, .row .col-sm-offset-4 { margin-left: 33.33333%; }

.row .col-md-4, .row .col-lg-4, .row.cols-md-4 > *, .row.cols-lg-4 > * { width: 100%; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; }

.row .col-md-offset-4, .row .col-lg-offset-4 { margin-left: 0; }

.row .col-5, .row .col-sm-5, .row.cols-5 > *, .row.cols-sm-5 > * { max-width: 41.66667%; -ms-flex-preferred-size: 41.66667%; flex-basis: 41.66667%; }

.row .col-offset-5, .row .col-sm-offset-5 { margin-left: 41.66667%; }

.row .col-md-5, .row .col-lg-5, .row.cols-md-5 > *, .row.cols-lg-5 > * { width: 100%; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; }

.row .col-md-offset-5, .row .col-lg-offset-5 { margin-left: 0; }

.row .col-6, .row .col-sm-6, .row.cols-6 > *, .row.cols-sm-6 > * { max-width: 50%; -ms-flex-preferred-size: 50%; flex-basis: 50%; }

.row .col-offset-6, .row .col-sm-offset-6 { margin-left: 50%; }

.row .col-md-6, .row .col-lg-6, .row.cols-md-6 > *, .row.cols-lg-6 > * { width: 100%; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; }

.row .col-md-offset-6, .row .col-lg-offset-6 { margin-left: 0; }

.row .col-7, .row .col-sm-7, .row.cols-7 > *, .row.cols-sm-7 > * { max-width: 58.33333%; -ms-flex-preferred-size: 58.33333%; flex-basis: 58.33333%; }

.row .col-offset-7, .row .col-sm-offset-7 { margin-left: 58.33333%; }

.row .col-md-7, .row .col-lg-7, .row.cols-md-7 > *, .row.cols-lg-7 > * { width: 100%; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; }

.row .col-md-offset-7, .row .col-lg-offset-7 { margin-left: 0; }

.row .col-8, .row .col-sm-8, .row.cols-8 > *, .row.cols-sm-8 > * { max-width: 66.66667%; -ms-flex-preferred-size: 66.66667%; flex-basis: 66.66667%; }

.row .col-offset-8, .row .col-sm-offset-8 { margin-left: 66.66667%; }

.row .col-md-8, .row .col-lg-8, .row.cols-md-8 > *, .row.cols-lg-8 > * { width: 100%; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; }

.row .col-md-offset-8, .row .col-lg-offset-8 { margin-left: 0; }

.row .col-9, .row .col-sm-9, .row.cols-9 > *, .row.cols-sm-9 > * { max-width: 75%; -ms-flex-preferred-size: 75%; flex-basis: 75%; }

.row .col-offset-9, .row .col-sm-offset-9 { margin-left: 75%; }

.row .col-md-9, .row .col-lg-9, .row.cols-md-9 > *, .row.cols-lg-9 > * { width: 100%; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; }

.row .col-md-offset-9, .row .col-lg-offset-9 { margin-left: 0; }

.row .col-10, .row .col-sm-10, .row.cols-10 > *, .row.cols-sm-10 > * { max-width: 83.33333%; -ms-flex-preferred-size: 83.33333%; flex-basis: 83.33333%; }

.row .col-offset-10, .row .col-sm-offset-10 { margin-left: 83.33333%; }

.row .col-md-10, .row .col-lg-10, .row.cols-md-10 > *, .row.cols-lg-10 > * { width: 100%; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; }

.row .col-md-offset-10, .row .col-lg-offset-10 { margin-left: 0; }

.row .col-11, .row .col-sm-11, .row.cols-11 > *, .row.cols-sm-11 > * { max-width: 91.66667%; -ms-flex-preferred-size: 91.66667%; flex-basis: 91.66667%; }

.row .col-offset-11, .row .col-sm-offset-11 { margin-left: 91.66667%; }

.row .col-md-11, .row .col-lg-11, .row.cols-md-11 > *, .row.cols-lg-11 > * { width: 100%; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; }

.row .col-md-offset-11, .row .col-lg-offset-11 { margin-left: 0; }

.row .col-12, .row .col-sm-12, .row.cols-12 > *, .row.cols-sm-12 > * { max-width: 100%; -ms-flex-preferred-size: 100%; flex-basis: 100%; }

.row .col-offset-12, .row .col-sm-offset-12 { margin-left: 100%; }

.row .col-md-12, .row .col-lg-12, .row.cols-md-12 > *, .row.cols-lg-12 > * { width: 100%; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; }

.row .col-md-offset-12, .row .col-lg-offset-12 { margin-left: 0; }

@media screen and (min-width: 768px) { .row .col-md, .row.cols-md > * { max-width: 100%; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; -ms-flex-preferred-size: 0; flex-basis: 0; }
  .row .col-md-1, .row.cols-md-1 > * { max-width: 8.33333%; -ms-flex-preferred-size: 8.33333%; flex-basis: 8.33333%; }
  .row .col-md-offset-1 { margin-left: 8.33333%; }
  .row .col-lg-1, .row.cols-lg-1 > * { width: 100%; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; }
  .row .col-lg-offset-1 { margin-left: 0; }
  .row .col-md-2, .row.cols-md-2 > * { max-width: 16.66667%; -ms-flex-preferred-size: 16.66667%; flex-basis: 16.66667%; }
  .row .col-md-offset-2 { margin-left: 16.66667%; }
  .row .col-lg-2, .row.cols-lg-2 > * { width: 100%; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; }
  .row .col-lg-offset-2 { margin-left: 0; }
  .row .col-md-3, .row.cols-md-3 > * { max-width: 25%; -ms-flex-preferred-size: 25%; flex-basis: 25%; }
  .row .col-md-offset-3 { margin-left: 25%; }
  .row .col-lg-3, .row.cols-lg-3 > * { width: 100%; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; }
  .row .col-lg-offset-3 { margin-left: 0; }
  .row .col-md-4, .row.cols-md-4 > * { max-width: 33.33333%; -ms-flex-preferred-size: 33.33333%; flex-basis: 33.33333%; }
  .row .col-md-offset-4 { margin-left: 33.33333%; }
  .row .col-lg-4, .row.cols-lg-4 > * { width: 100%; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; }
  .row .col-lg-offset-4 { margin-left: 0; }
  .row .col-md-5, .row.cols-md-5 > * { max-width: 41.66667%; -ms-flex-preferred-size: 41.66667%; flex-basis: 41.66667%; }
  .row .col-md-offset-5 { margin-left: 41.66667%; }
  .row .col-lg-5, .row.cols-lg-5 > * { width: 100%; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; }
  .row .col-lg-offset-5 { margin-left: 0; }
  .row .col-md-6, .row.cols-md-6 > * { max-width: 50%; -ms-flex-preferred-size: 50%; flex-basis: 50%; }
  .row .col-md-offset-6 { margin-left: 50%; }
  .row .col-lg-6, .row.cols-lg-6 > * { width: 100%; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; }
  .row .col-lg-offset-6 { margin-left: 0; }
  .row .col-md-7, .row.cols-md-7 > * { max-width: 58.33333%; -ms-flex-preferred-size: 58.33333%; flex-basis: 58.33333%; }
  .row .col-md-offset-7 { margin-left: 58.33333%; }
  .row .col-lg-7, .row.cols-lg-7 > * { width: 100%; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; }
  .row .col-lg-offset-7 { margin-left: 0; }
  .row .col-md-8, .row.cols-md-8 > * { max-width: 66.66667%; -ms-flex-preferred-size: 66.66667%; flex-basis: 66.66667%; }
  .row .col-md-offset-8 { margin-left: 66.66667%; }
  .row .col-lg-8, .row.cols-lg-8 > * { width: 100%; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; }
  .row .col-lg-offset-8 { margin-left: 0; }
  .row .col-md-9, .row.cols-md-9 > * { max-width: 75%; -ms-flex-preferred-size: 75%; flex-basis: 75%; }
  .row .col-md-offset-9 { margin-left: 75%; }
  .row .col-lg-9, .row.cols-lg-9 > * { width: 100%; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; }
  .row .col-lg-offset-9 { margin-left: 0; }
  .row .col-md-10, .row.cols-md-10 > * { max-width: 83.33333%; -ms-flex-preferred-size: 83.33333%; flex-basis: 83.33333%; }
  .row .col-md-offset-10 { margin-left: 83.33333%; }
  .row .col-lg-10, .row.cols-lg-10 > * { width: 100%; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; }
  .row .col-lg-offset-10 { margin-left: 0; }
  .row .col-md-11, .row.cols-md-11 > * { max-width: 91.66667%; -ms-flex-preferred-size: 91.66667%; flex-basis: 91.66667%; }
  .row .col-md-offset-11 { margin-left: 91.66667%; }
  .row .col-lg-11, .row.cols-lg-11 > * { width: 100%; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; }
  .row .col-lg-offset-11 { margin-left: 0; }
  .row .col-md-12, .row.cols-md-12 > * { max-width: 100%; -ms-flex-preferred-size: 100%; flex-basis: 100%; }
  .row .col-md-offset-12 { margin-left: 100%; }
  .row .col-lg-12, .row.cols-lg-12 > * { width: 100%; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; }
  .row .col-lg-offset-12 { margin-left: 0; } }

@media screen and (min-width: 1280px) { .row .col-lg, .row.cols-lg > * { max-width: 100%; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; -ms-flex-preferred-size: 0; flex-basis: 0; }
  .row .col-lg-1, .row.cols-lg-1 > * { max-width: 8.33333%; -ms-flex-preferred-size: 8.33333%; flex-basis: 8.33333%; }
  .row .col-lg-offset-1 { margin-left: 8.33333%; }
  .row .col-lg-2, .row.cols-lg-2 > * { max-width: 16.66667%; -ms-flex-preferred-size: 16.66667%; flex-basis: 16.66667%; }
  .row .col-lg-offset-2 { margin-left: 16.66667%; }
  .row .col-lg-3, .row.cols-lg-3 > * { max-width: 25%; -ms-flex-preferred-size: 25%; flex-basis: 25%; }
  .row .col-lg-offset-3 { margin-left: 25%; }
  .row .col-lg-4, .row.cols-lg-4 > * { max-width: 33.33333%; -ms-flex-preferred-size: 33.33333%; flex-basis: 33.33333%; }
  .row .col-lg-offset-4 { margin-left: 33.33333%; }
  .row .col-lg-5, .row.cols-lg-5 > * { max-width: 41.66667%; -ms-flex-preferred-size: 41.66667%; flex-basis: 41.66667%; }
  .row .col-lg-offset-5 { margin-left: 41.66667%; }
  .row .col-lg-6, .row.cols-lg-6 > * { max-width: 50%; -ms-flex-preferred-size: 50%; flex-basis: 50%; }
  .row .col-lg-offset-6 { margin-left: 50%; }
  .row .col-lg-7, .row.cols-lg-7 > * { max-width: 58.33333%; -ms-flex-preferred-size: 58.33333%; flex-basis: 58.33333%; }
  .row .col-lg-offset-7 { margin-left: 58.33333%; }
  .row .col-lg-8, .row.cols-lg-8 > * { max-width: 66.66667%; -ms-flex-preferred-size: 66.66667%; flex-basis: 66.66667%; }
  .row .col-lg-offset-8 { margin-left: 66.66667%; }
  .row .col-lg-9, .row.cols-lg-9 > * { max-width: 75%; -ms-flex-preferred-size: 75%; flex-basis: 75%; }
  .row .col-lg-offset-9 { margin-left: 75%; }
  .row .col-lg-10, .row.cols-lg-10 > * { max-width: 83.33333%; -ms-flex-preferred-size: 83.33333%; flex-basis: 83.33333%; }
  .row .col-lg-offset-10 { margin-left: 83.33333%; }
  .row .col-lg-11, .row.cols-lg-11 > * { max-width: 91.66667%; -ms-flex-preferred-size: 91.66667%; flex-basis: 91.66667%; }
  .row .col-lg-offset-11 { margin-left: 91.66667%; }
  .row .col-lg-12, .row.cols-lg-12 > * { max-width: 100%; -ms-flex-preferred-size: 100%; flex-basis: 100%; }
  .row .col-lg-offset-12 { margin-left: 100%; } }

/* Card component CSS variable definitions */
.card { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-item-align: center; align-self: center; position: relative; width: 100%; border-radius: var(--universal-border-radius); margin: var(--universal-margin); overflow: hidden; }

.card.fluid { max-width: 100%; width: auto; }

.card > .section { -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; border: 0; border-radius: 0; padding: var(--universal-padding); width: 100%; }

.card > .section:last-child { border-bottom: 0; }

.card > .section .media { height: 200px; padding: 0; -o-object-fit: cover; object-fit: cover; }

.card > .section.double-padded { padding: calc(1.5 * var(--universal-padding)); }

@media screen and (min-width: 320px) { .card { max-width: 320px; } }

@media screen and (min-width: 240px) { .card.small { max-width: 240px; } }

@media screen and (min-width: 480px) { .card.large { max-width: 480px; } }

.tooltip { border-radius: 50%; padding: 0 4px; font-style: normal; font-size: 10px; font-weight: bold; text-align: left; position: relative; }

.tooltip > :first-child { display: none; border-width: 1px; border-style: solid; border-radius: 5px; text-align: left; font-weight: normal; font-style: normal; padding: 0.5rem; position: absolute; min-width: 30em; max-width: 40em; word-wrap: normal; z-index: 999; }

.tooltip:hover span { display: block; }

.tooltip.top span { top: 0; left: 50%; -webkit-transform: translate(-50%, calc(-100% - 10px)); transform: translate(-50%, calc(-100% - 10px)); }

.tooltip.bottom span { bottom: 0; left: 50%; -webkit-transform: translate(-50%, calc(100% + .5em)); transform: translate(-50%, calc(100% + .5em)); }

.tooltip.right span { top: 0; right: 0; -webkit-transform: translateX(calc(100% + 10px)); transform: translateX(calc(100% + 10px)); }

.tooltip.left span { top: 0; left: 0; -webkit-transform: translateX(calc(-100% - 10px)); transform: translateX(calc(-100% - 10px)); }

.ttp .ttp-text { visibility: hidden; position: absolute; font-size: 10px; font-weight: normal; text-align: left; padding: 0.5rem; border-radius: 5px; z-index: 999; }

.ttp .ttp-text.top { -webkit-transform: translate(-50%, calc(-100% - 5px)); transform: translate(-50%, calc(-100% - 5px)); }

.ttp .ttp-text.bottom { -webkit-transform: translate(-50%, calc(100% + 5px)); transform: translate(-50%, calc(100% + 5px)); }

.ttp .ttp-text.right { -webkit-transform: translateX(calc(100% + 5px)); transform: translateX(calc(100% + 5px)); }

.ttp .ttp-text.left { -webkit-transform: translateX(calc(-100% - 5px)); transform: translateX(calc(-100% - 5px)); }

.ttp:hover .ttp-text { visibility: visible; }

/* Panel component CSS variable definitions */
.os-panel { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; width: 100%; border-width: 0.0625rem; border-style: solid; border-radius: 0.5rem; margin: 0; }

.os-panel .os-panel-header { padding: 0.5rem; border-bottom-width: 0.0625rem; border-bottom-style: solid; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }

.os-panel .os-panel-header .os-panel-header-content { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; }

.os-panel .os-panel-header .os-panel-header-control { cursor: pointer; }

.os-panel .os-panel-body { padding: 0.5rem; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; }

.os-panel .os-panel-footer { padding: 0.5rem; }

.os-panel.collapsible .os-panel-header { font-weight: bold; cursor: pointer; }

.os-panel.collapsible .os-panel-header:hover { opacity: 95%; }

.os-panel.collapsible .os-panel-body, .os-panel.collapsible .os-panel-footer { display: block; }

.os-panel.collapsible.collapsed .os-panel-body, .os-panel.collapsible.collapsed .os-panel-footer { display: none; }

.section { width: 100%; padding-bottom: .1em; padding-right: .1em; padding-left: 0; padding-top: 2em; border-bottom-width: 2px; border-bottom-style: solid; font-weight: bold; font-size: .97%; }

.section lable { font-weight: bold; font-size: .97%; }

/*
    <ul>
        <li>
            <div> ... [header] ... </div>
            <div> ... [collapsed] ... </div>
        </li>

    </ul>

*/
*.os-accordion { padding: 0; margin: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; list-style: none; }

*.os-accordion > * > div:first-child { padding: .2rem; font-size: 95%; font-weight: bold; cursor: pointer; }

*.os-accordion > * > div:first-child:hover { opacity: 70%; }

*.os-accordion > * > div:nth-child(2) { display: none; font-size: 95%; font-weight: normal; padding: .5rem .8rem; }

/* Add animation (Standard syntax) */
@-webkit-keyframes example { from { /* top: -200px; */
    opacity: 0; }
  to { /* top: 0px; */
    opacity: 1; } }
@keyframes example { from { /* top: -200px; */
    opacity: 0; }
  to { /* top: 0px; */
    opacity: 1; } }

/*
    <div>
        <p>.....</p>
    </div>

*/
.os-notification { position: absolute; padding: 0.5rem; margin: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -ms-flex-line-pack: center; align-content: center; z-index: 200; }

.os-notification.top { top: 50px; }

.os-notification.bottom { bottom: 0; }

.os-notification.right { right: 0; }

.os-notification.left { left: 0; }

.os-notification > div { padding: 0.5rem; margin: 0; width: 30rem default; border-width: 1px; border-style: solid; border-radius: .25em; cursor: pointer; height: auto; -webkit-animation-name: example; animation-name: example; -webkit-animation-duration: 0.5s; animation-duration: 0.5s; }

.os-notification > div.small { width: 15rem; }

.os-notification > div.meduim { width: 20rem; }

.os-notification > div.large { width: 40rem; }

.os-notification > div.full { width: 60vw; }

.os-notification > div .title { font-weight: bold; }

.os-notification > div .close:hover { opacity: 50%; }

.os-notify { position: absolute; padding: 0.5rem; margin: 0; width: 15rem; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -ms-flex-line-pack: center; align-content: center; border-width: 1px; border-style: solid; border-radius: .25em; cursor: pointer; height: auto; -webkit-animation-name: example; animation-name: example; -webkit-animation-duration: 0.5s; animation-duration: 0.5s; z-index: 200; }

.os-notify.top { top: 50px; }

.os-notify.bottom { bottom: 0; }

.os-notify.right { right: 0; }

.os-notify.left { left: 0; }

.os-notify.small { width: 10rem; }

.os-notify.large { width: 20rem; }

.os-notify > div { width: 100%; }

/*  Modal box <a href="#id01">Open Modal</a> <a class="modal-open" data-target="id01">Open Modal</a> <div id="id01" class="modal"> <div class="modal-dialog"> <div class="modal-content"> <header class="container"> <a href="#" class="modal-close">×</a> <h2>Modal Header</h2> </header> <div class="container"> <p>Some text in the modal.</p> <p>Some text in the modal.</p> </div> <footer class="container"> <p>Modal footer</p> </footer> </div> </div> </div> */
/* Add animation (Standard syntax) */
@keyframes example { from { /* top: -200px; */
    opacity: 0; }
  to { /* top: 0px; */
    opacity: 1; } }

/* The modal's background */
.os-modal { position: fixed; left: 0; top: 0; bottom: 0; right: 0; overflow: auto; z-index: 200; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }

.os-modal:target { display: -webkit-box; display: -ms-flexbox; display: flex; }

/* The modal box */
.os-modal-dialog { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; margin: auto; padding: 0; border-radius: 0.5rem; -webkit-animation-name: example; animation-name: example; -webkit-animation-duration: 0.5s; animation-duration: 0.5s; width: 40em; /* The footer */ }

.os-modal-dialog.small { width: 20em; }

.os-modal-dialog.large { width: 60em; }

.os-modal-dialog.full { width: 100%; }

.os-modal-dialog .os-header { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 0.5rem; border-radius: 0.5rem 0.5rem 0 0; /* The button used to close the modal */ }

.os-modal-dialog .os-header div { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; }

.os-modal-dialog .os-header .os-close { -webkit-box-flex: 0; -ms-flex: 0; flex: 0; padding: 0 0.5rem; font-size: 110%; font-weight: normal; cursor: pointer; }

.os-modal-dialog .os-header .os-close a { text-decoration: none; }

.os-modal-dialog .os-body { padding: 0.5rem; overflow: auto; }

.os-modal-dialog .os-footer { padding: 0.5rem; border-radius: 0 0 0.5rem 0.5rem; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; }

/* Definitions for the responsive table component. */
.table-wrapper { display: block; width: 100%; overflow-x: auto; overflow-y: visible; white-space: nowrap; }

table, .table { white-space: normal; border-collapse: separate; border-spacing: 0; margin: 0; min-width: 100%; border-width: 0.0625rem; border-style: solid; border-left: none; border-right: none; }

table caption, .table caption { font-size: 1.5rem; margin: 1rem 0; max-width: 100%; -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; }

table thead, .table thead { border-width: 0.0625rem; border-style: solid; border-left: none; border-right: none; z-index: 50; border-radius: 0.5rem 0.5rem 0 0; border-width: 0.0625rem; border-style: solid; }

table tbody, .table tbody { border-width: 0.0625rem; border-style: solid; border-left: none; border-right: none; border-radius: 0 0 0.5rem 0.5rem; }

table tr, .table tr { padding: 0; }

table th, .table th { padding: 0.5rem; text-align: left; }

table th .th, .table th .th { display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }

table th .th *:first-child, .table th .th *:first-child { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; }

table td, .table td { padding: 0.5rem; border-top-width: 0.0625rem; border-top-style: solid; }

table.borderd, .table.borderd { border-width: 0.0625rem; border-style: solid; }

table.borderd th, table.borderd td, .table.borderd th, .table.borderd td { border-width: 0.0625rem; border-right-style: solid; }

table.borderd th:last-child, table.borderd td:last-child, .table.borderd th:last-child, .table.borderd td:last-child { border-right-style: none; }

table.small th, .table.small th { padding: 0.5rem 0.5rem; }

table.small td, .table.small td { padding: 0.1rem 0.5rem; }

table:not(.horizontal), .table:not(.horizontal) { overflow: auto; }

table:not(.horizontal) thead, table:not(.horizontal) tbody, .table:not(.horizontal) thead, .table:not(.horizontal) tbody { max-width: 100%; -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; }

table:not(.horizontal) tr, .table:not(.horizontal) tr { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row wrap; flex-flow: row wrap; -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; }

table:not(.horizontal) th, table:not(.horizontal) td, .table:not(.horizontal) th, .table:not(.horizontal) td { -webkit-box-flex: 1; -ms-flex: 1 0 0%; flex: 1 0 0%; text-overflow: ellipsis; }

table:not(.horizontal) th.shrink, table:not(.horizontal) td.shrink, .table:not(.horizontal) th.shrink, .table:not(.horizontal) td.shrink { width: 1em; }

table:not(.horizontal) thead, .table:not(.horizontal) thead { position: -webkit-sticky; position: sticky; top: 0; }

table:not(.horizontal) tbody tr:first-child td, .table:not(.horizontal) tbody tr:first-child td { border-top: 0; }

table.horizontal, .table.horizontal { border: 0; }

table.horizontal thead, table.horizontal tbody, .table.horizontal thead, .table.horizontal tbody { border: 0; -webkit-box-flex: .2; -ms-flex: .2 0 0px; flex: .2 0 0; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row nowrap; flex-flow: row nowrap; }

table.horizontal tbody, .table.horizontal tbody { overflow: auto; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-flex: .8; -ms-flex: .8 0 0px; flex: .8 0 0; margin-left: 0; padding-bottom: 0.125rem; }

table.horizontal tbody tr:last-child td, .table.horizontal tbody tr:last-child td { border-right-width: 0.0625rem; border-right-style: solid; }

table.horizontal tbody tr:last-child td:first-child, .table.horizontal tbody tr:last-child td:first-child { border-top-right-radius: 0.25rem; }

table.horizontal tbody tr:last-child td:last-child, .table.horizontal tbody tr:last-child td:last-child { border-bottom-right-radius: 0.25rem; }

table.horizontal tr, .table.horizontal tr { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-flex: 1; -ms-flex: 1 0 auto; flex: 1 0 auto; }

table.horizontal th, .table.horizontal th { width: auto; border: 0; border-bottom-width: 0.0625rem; border-bottom-style: solid; text-align: right; border-left-width: 0.0625rem; border-left-style: solid; border-right-width: 0.0625rem; border-right-style: solid; }

table.horizontal th:not(:first-child), table.horizontal th:not(:first-child), .table.horizontal th:not(:first-child), .table.horizontal th:not(:first-child) { border-top: 0; }

table.horizontal th:first-child, .table.horizontal th:first-child { border-top-width: 0.0625rem; border-top-style: solid; }

table.horizontal td, .table.horizontal td { width: auto; border: 0; border-bottom-width: 0.0625rem; border-bottom-style: solid; }

table.horizontal td:not(:first-child), table.horizontal td:not(:first-child), .table.horizontal td:not(:first-child), .table.horizontal td:not(:first-child) { border-top: 0; }

table.horizontal td:first-child, .table.horizontal td:first-child { border-top-width: 0.0625rem; border-top-style: solid; }

table.horizontal td.shrink, .table.horizontal td.shrink { -ms-flex-item-align: start !important; align-self: flex-start !important; }

table.horizontal thead tr:first-child, .table.horizontal thead tr:first-child { padding-left: 0; }

table.horizontal thead tr:first-child th:first-child, .table.horizontal thead tr:first-child th:first-child { border-top-left-radius: 0.25rem; }

table.horizontal thead tr:first-child th:last-child, .table.horizontal thead tr:first-child th:last-child { border-bottom-left-radius: 0.25rem; }

.nowrap { white-space: nowrap; }

@media screen and (max-width: 360px) { table, table.horizontal { border-collapse: collapse; border: 0; width: 100%; display: table; }
  table thead, table th, table.horizontal thead, table.horizontal th { border: 0; height: 1px; width: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; clip: rect(0 0 0 0); -webkit-clip-path: inset(100%); clip-path: inset(100%); }
  table tbody, table.horizontal tbody { border: 0; display: table-row-group; }
  table tr, table.horizontal tr { display: block; border-width: 0.0625rem; border-style: solid; border-radius: 0.5rem; padding: 0.5rem; margin: 0.5rem; margin-bottom: 1rem; }
  table th, table td, table.horizontal th, table.horizontal td { width: auto; }
  table td, table.horizontal td { display: block; border: 0; text-align: right; }
  table td:before, table.horizontal td:before { content: attr(data-label); float: left; font-weight: 600; }
  table th:first-child, table td:first-child, table.horizontal th:first-child, table.horizontal td:first-child { border-top: 0; }
  table tbody tr:last-child td, table.horizontal tbody tr:last-child td { border-right: 0; } }

.pagination { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -ms-flex-align: center; align-items: center; border-style: none; }

.pagination ul { display: -webkit-box; display: -ms-flexbox; display: flex; padding-left: 0; list-style: none; }

.pagination ul li { cursor: pointer; }

.pagination ul li > * { position: relative; display: block; border-width: 1px; border-style: solid; padding: 0.375rem 0.75rem; }

.pagination ul li > *:hover { z-index: 2; text-decoration: none; }

.pagination ul li > *:focus { z-index: 3; outline: 0; -webkit-box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25); box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25); }

.pagination ul li:not(:first-child) > * { margin-left: -1px; }

.pagination ul li:first-child > * { border-top-left-radius: 0.25rem; border-bottom-left-radius: 0.25rem; }

.pagination ul li:last-child > * { border-top-right-radius: 0.25rem; border-bottom-right-radius: 0.25rem; }

.pagination ul li.active > * { z-index: 3; }

.pagination ul li.disabled > * { pointer-events: none; cursor: auto; }

.pagination.larg li > * { padding: 0.75rem 1.5rem; font-size: 1.25rem; }

.pagination.larg li:first-child > * { border-top-left-radius: 0.3rem; border-bottom-left-radius: 0.3rem; }

.pagination.larg li:last-child > * { border-top-right-radius: 0.3rem; border-bottom-right-radius: 0.3rem; }

.pagination *:nth-child(2) { font-weight: bold; font-size: 95%; opacity: 80%; }

.pagination.small ul li > * { padding: 0.25rem 0.5rem; font-size: 0.875rem; }

.pagination.small ul li:first-child > * { border-top-left-radius: 0.2rem; border-bottom-left-radius: 0.2rem; }

.pagination.small ul li:last-child > * { border-top-right-radius: 0.2rem; border-bottom-right-radius: 0.2rem; }

.pagination.small *:nth-child(2) { font-size: 0.875rem; }

/*  <div class="os-tabs" data-group="group-name"> <ul> [os-tabs header] <li data-target="tab1">...</li> <li data-target="tab2">...</li> <li data-target="tab3">...</li> ... </ul> <div> [os-tabs contents] <div id="tab1">...</div> <div id="tab2">...</div> <div id="tab3">...</div> ... </div> </div> */
.os-tabs { display: -ms-grid; display: grid; padding: 0.5rem; }

.os-tabs > ul { -ms-grid-row: 1; -ms-grid-column: 2; grid-area: head; padding: 0.5rem; list-style: none; display: -webkit-box; display: -ms-flexbox; display: flex; }

.os-tabs > ul li { display: -ms-grid; display: grid; padding: .2em; cursor: pointer; -ms-grid-column-align: stretch; justify-self: stretch; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-weight: bold; }

.os-tabs > ul li > i { -ms-grid-row: 1; -ms-grid-column: 2; grid-area: icon; }

.os-tabs > ul li > span { -ms-grid-row: 1; -ms-grid-column: 1; grid-area: text; }

.os-tabs > div { -ms-grid-row: 1; -ms-grid-column: 1; grid-area: body; padding: .5em; }

.os-tabs.tab-top { -ms-grid-rows: auto 1fr; grid-template-rows: auto 1fr; grid-template-areas: "head" "body"; }

.os-tabs.tab-top > ul { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; border-bottom-width: 2px; border-bottom-style: solid; padding-bottom: 0; }

.os-tabs.tab-top > ul li { margin-bottom: -2px !important; border-bottom-width: 2px; border-bottom-style: solid; margin-right: 1em; }

.os-tabs.tab-top > ul li.active { border-bottom-width: 2px; border-bottom-style: solid; }

.os-tabs.tab-bottom { -ms-grid-rows: auto 1fr; grid-template-rows: auto 1fr; grid-template-areas: "body" "head"; }

.os-tabs.tab-bottom > ul { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; border-top-width: 2px; border-top-style: solid; padding-top: 0; }

.os-tabs.tab-bottom > ul li { margin-top: -2px !important; border-top-width: 2px; border-top-style: solid; margin-right: 1em; }

.os-tabs.tab-bottom > ul li.active { border-top-width: 2px; border-top-style: solid; }

.os-tabs.tab-left { -ms-grid-columns: auto 1fr; grid-template-columns: auto 1fr; grid-template-areas: "head body"; }

.os-tabs.tab-left > ul { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; border-right-width: 2px; border-right-style: solid; padding-right: 0; }

.os-tabs.tab-left > ul li { margin-right: -2px !important; border-right-width: 2px; border-right-style: solid; }

.os-tabs.tab-left > ul li.active { border-right-width: 2px; border-right-style: solid; }

.os-tabs.tab-right { -ms-grid-columns: 1fr auto; grid-template-columns: 1fr auto; grid-template-areas: "body head"; }

.os-tabs.tab-right > ul { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; border-left-width: 2px; border-left-style: solid; padding-left: 0; }

.os-tabs.tab-right > ul li { margin-left: -2px !important; border-left-width: 2px; border-left-style: solid; display: block; }

.os-tabs.tab-right > ul li.active { border-left-width: 2px; border-left-style: solid; }

.os-tabs.icon-top > ul li { -ms-grid-rows: auto 1fr; grid-template-rows: auto 1fr; grid-template-areas: "icon" "text"; justify-items: center; row-gap: .5em; }

.os-tabs.icon-bottom > ul li { -ms-grid-rows: 1fr auto; grid-template-rows: 1fr auto; grid-template-areas: "text" "icon"; justify-items: center; row-gap: .5em; }

.os-tabs.icon-left > ul li { -ms-grid-columns: auto 1fr; grid-template-columns: auto 1fr; grid-template-areas: "icon text"; justify-items: start; -webkit-column-gap: .5em; column-gap: .5em; }

.os-tabs.icon-right > ul li { -ms-grid-columns: 1fr auto; grid-template-columns: 1fr auto; grid-template-areas: "text icon"; -webkit-column-gap: .5em; column-gap: .5em; }

/*  sidenav-first  ---------------- ------------------------- .        .               . .        .               . .  ul    .     div       . .        .               . .        .               . .------------------------- <div class="sidenav-first" data-group="gname"> <ul> <li>... <i icon> + <span lable> </ul> <div>  ... hold other content (either  </div> </div> */
.os-sidenav { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; }

.os-sidenav > ul:first-child { width: 80px; list-style: none; padding: 0 !important; margin: 0 !important; }

.os-sidenav > ul:first-child li { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; cursor: pointer; -ms-flex-item-align: center; align-self: center; -ms-flex-line-pack: center; align-content: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; text-align: center; padding: .5rem 0 !important; -webkit-transition: all .3s; transition: all .3s; }

.os-sidenav > ul:first-child li i { font-size: 200%; padding-bottom: .2rem; }

.os-sidenav > ul:nth-child(2) { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; list-style: none; margin: 0 !important; font-size: 95%; font-weight: normal; padding: .5rem; }

.os-sidenav > ul:nth-child(2) > li { display: none; -webkit-transition: all .3s; transition: all .3s; }

.os-sidenav > ul:nth-child(2) > li .collapsible { display: block; text-decoration: none; padding: .2rem; font-size: 95%; font-weight: bold; cursor: pointer; }

.os-sidenav > ul:nth-child(2) > li .collapsible:hover { opacity: 40%; }

.os-sidenav > ul:nth-child(2) > li .collapsible.active { border-bottom-width: 1px; border-bottom-style: solid; }

.os-sidenav > ul:nth-child(2) > li .collapse-target { display: none; font-size: 95%; font-weight: normal; padding: .5rem .8rem; }

.os-sidenav > ul:nth-child(2) > li .collapse-target a { -webkit-box-sizing: border-box; box-sizing: border-box; padding-left: .2em; display: block; font-weight: normal; border-width: 1px; border-style: solid; text-decoration: none !important; }

.os-sidenav > ul:nth-child(2) > li .collapse-target a:hover { border-width: 1px; border-style: solid; }

.os-sidenav > ul:nth-child(2) > li .collapse-target a.active { border-width: 1px; border-style: solid; font-weight: bold; }

/* Definitions for forms and input elements. */
form .group, .form .group { display: inline-block; }

form .group > .input, .form .group > .input { min-height: 1.5em; display: inline-block; }

form .group > input, form .group > textarea, form .group > select, form .group > .select, .form .group > input, .form .group > textarea, .form .group > select, .form .group > .select { display: inline-block; }

form .group.stacked, .form .group.stacked { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; }

form .group.stacked > :first-child, .form .group.stacked > :first-child { width: 100%; max-width: 100%; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; }

form .group.stacked > :nth-child(2), .form .group.stacked > :nth-child(2) { max-width: 100%; width: 100%; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; }

@media screen and (min-width: 768px) { form .group.aligned, .form .group.aligned { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; }
  form .group.aligned > :first-child, .form .group.aligned > :first-child { padding-right: .5rem; text-align: left; }
  form .group.aligned > :nth-child(2), .form .group.aligned > :nth-child(2) { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; }
  form .group.aligned > :nth-child(3), .form .group.aligned > :nth-child(3) { text-align: left; padding-left: .5rem; padding-top: .3em; } }

@media screen and (max-width: 768px) { form .group.aligned, .form .group.aligned { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; }
  form .group.aligned > :first-child, .form .group.aligned > :first-child { width: 100%; max-width: 100%; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; }
  form .group.aligned > :nth-child(2), .form .group.aligned > :nth-child(2) { max-width: 100%; width: 100%; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; } }

form.stacked, .form.stacked { width: 100%; }

form.stacked .group, .form.stacked .group { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; }

form.stacked .group > :first-child, .form.stacked .group > :first-child { width: 100%; max-width: 100%; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; }

form.stacked .group > :nth-child(2), .form.stacked .group > :nth-child(2) { max-width: 100%; width: 100%; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; }

form.aligned, .form.aligned { width: 100%; }

form.aligned.label-5 .group > label, .form.aligned.label-5 .group > label { width: 5rem; max-width: 5rem; }

form.aligned.label-6 .group > label, .form.aligned.label-6 .group > label { width: 6rem; max-width: 6rem; }

form.aligned.label-7 .group > label, .form.aligned.label-7 .group > label { width: 7rem; max-width: 7rem; }

form.aligned.label-8 .group > label, .form.aligned.label-8 .group > label { width: 8rem; max-width: 8rem; }

form.aligned.label-9 .group > label, .form.aligned.label-9 .group > label { width: 9rem; max-width: 9rem; }

form.aligned.label-10 .group > label, .form.aligned.label-10 .group > label { width: 10rem; max-width: 10rem; }

form.aligned.label-15 .group > label, .form.aligned.label-15 .group > label { width: 15rem; max-width: 15rem; }

form.aligned.label-20 .group > label, .form.aligned.label-20 .group > label { width: 20rem; max-width: 20rem; }

form.aligned.label-25 .group > label, .form.aligned.label-25 .group > label { width: 25rem; max-width: 25rem; }

form.aligned.label-30 .group > label, .form.aligned.label-30 .group > label { width: 30rem; max-width: 30rem; }

@media screen and (min-width: 768px) { form.aligned .group, .form.aligned .group { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; }
  form.aligned .group > :first-child, .form.aligned .group > :first-child { padding-right: .5rem; text-align: left; }
  form.aligned .group > :nth-child(2), .form.aligned .group > :nth-child(2) { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; }
  form.aligned .group > :nth-child(3), .form.aligned .group > :nth-child(3) { text-align: left; padding-left: .5rem; padding-top: .3em; } }

@media screen and (max-width: 768px) { form.aligned .group, .form.aligned .group { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; }
  form.aligned .group > :first-child, .form.aligned .group > :first-child { width: 100%; max-width: 100%; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; }
  form.aligned .group > :nth-child(2), .form.aligned .group > :nth-child(2) { max-width: 100%; width: 100%; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; } }

@media screen and (min-width: 768px) { form.free .group > :first-child, .form.free .group > :first-child { -webkit-box-flex: unset; -ms-flex-positive: unset; flex-grow: unset; }
  form.free .group > :nth-child(2), .form.free .group > :nth-child(2) { -webkit-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; } }

form.right .group > :first-child, .form.right .group > :first-child { text-align: right !important; }

@media screen and (max-width: 768px) { form.right .group > :first-child, .form.right .group > :first-child { text-align: left; } }

@media screen and (min-width: 768px) { form.two .group > :first-child, .form.two .group > :first-child { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; max-width: 50%; }
  form.two .group > :nth-child(2), .form.two .group > :nth-child(2) { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; max-width: 50%; }
  form.two .group > :nth-child(3), .form.two .group > :nth-child(3) { display: none; } }

@media screen and (max-width: 768px) { form.two .group, .form.two .group { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; }
  form.two .group > :first-child, .form.two .group > :first-child { width: 100%; max-width: 100%; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; }
  form.two .group > :nth-child(2), .form.two .group > :nth-child(2) { max-width: 100%; width: 100%; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; } }

@media screen and (min-width: 768px) { form.three .group > :first-child, .form.three .group > :first-child { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; max-width: 35%; }
  form.three .group > :nth-child(2), .form.three .group > :nth-child(2) { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; max-width: 20%; }
  form.three .group > :nth-child(3), .form.three .group > :nth-child(3) { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; max-width: 45%; } }

@media screen and (max-width: 768px) { form.three .group, .form.three .group { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; }
  form.three .group > :first-child, .form.three .group > :first-child { width: 100%; max-width: 100%; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; }
  form.three .group > :nth-child(2), .form.three .group > :nth-child(2) { max-width: 100%; width: 100%; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; } }

form.small input, .form.small input { line-height: 1.2; }

form.small .input, .form.small .input { min-height: 1.2em; }

form.small select, form.small .select, form.small .os-multiselect, form.small .os-listbox, .form.small select, .form.small .select, .form.small .os-multiselect, .form.small .os-listbox { padding-bottom: .05rem; padding-top: .05rem; }

form.large input, .form.large input { line-height: 2; }

form.large .input, .form.large .input { min-height: 2em; }

form.large select, form.large .select, form.large .os-multiselect, form.large .os-listbox, .form.large select, .form.large .select, .form.large .os-multiselect, .form.large .os-listbox { padding-bottom: .5rem; padding-top: .5rem; }

form label, .form label { padding: 0.15rem 0.3rem; font-weight: bold; }

form .input-helper, .form .input-helper { font-size: 80%; opacity: 80%; }

form [type="number"]::-webkit-inner-spin-button, form [type="number"]::-webkit-outer-spin-button, .form [type="number"]::-webkit-inner-spin-button, .form [type="number"]::-webkit-outer-spin-button { height: auto; }

form [type="search"], .form [type="search"] { -webkit-appearance: textfield; outline-offset: -2px; }

form [type="search"]::-webkit-search-cancel-button, form [type="search"]::-webkit-search-decoration, .form [type="search"]::-webkit-search-cancel-button, .form [type="search"]::-webkit-search-decoration { -webkit-appearance: none; }

form input:not([type]), form [type="text"], form [type="email"], form [type="number"], form [type="search"], form [type="password"], form [type="url"], form [type="tel"], form [type="datetime"], form [type="date"], form [type="time"], form textarea, form select, form .input, form .select, form .os-multiselect, form .os-listbox, .form input:not([type]), .form [type="text"], .form [type="email"], .form [type="number"], .form [type="search"], .form [type="password"], .form [type="url"], .form [type="tel"], .form [type="datetime"], .form [type="date"], .form [type="time"], .form textarea, .form select, .form .input, .form .select, .form .os-multiselect, .form .os-listbox { -webkit-box-sizing: border-box; box-sizing: border-box; border-radius: 0.25rem; margin: 0.25rem; margin-right: 0; margin-left: 0; padding-left: 0.3rem; }

form input:not([type]):hover, form input:not([type]):focus, form [type="text"]:hover, form [type="text"]:focus, form [type="email"]:hover, form [type="email"]:focus, form [type="number"]:hover, form [type="number"]:focus, form [type="search"]:hover, form [type="search"]:focus, form [type="password"]:hover, form [type="password"]:focus, form [type="url"]:hover, form [type="url"]:focus, form [type="tel"]:hover, form [type="tel"]:focus, form [type="datetime"]:hover, form [type="datetime"]:focus, form [type="date"]:hover, form [type="date"]:focus, form [type="time"]:hover, form [type="time"]:focus, form textarea:hover, form textarea:focus, form select:hover, form select:focus, form .input:hover, form .input:focus, form .select:hover, form .select:focus, form .os-multiselect:hover, form .os-multiselect:focus, form .os-listbox:hover, form .os-listbox:focus, .form input:not([type]):hover, .form input:not([type]):focus, .form [type="text"]:hover, .form [type="text"]:focus, .form [type="email"]:hover, .form [type="email"]:focus, .form [type="number"]:hover, .form [type="number"]:focus, .form [type="search"]:hover, .form [type="search"]:focus, .form [type="password"]:hover, .form [type="password"]:focus, .form [type="url"]:hover, .form [type="url"]:focus, .form [type="tel"]:hover, .form [type="tel"]:focus, .form [type="datetime"]:hover, .form [type="datetime"]:focus, .form [type="date"]:hover, .form [type="date"]:focus, .form [type="time"]:hover, .form [type="time"]:focus, .form textarea:hover, .form textarea:focus, .form select:hover, .form select:focus, .form .input:hover, .form .input:focus, .form .select:hover, .form .select:focus, .form .os-multiselect:hover, .form .os-multiselect:focus, .form .os-listbox:hover, .form .os-listbox:focus { -webkit-box-shadow: none; box-shadow: none; }

form input:not([type]):invalid, form input:not([type]).invalid:focus, form [type="text"]:invalid, form [type="text"].invalid:focus, form [type="email"]:invalid, form [type="email"].invalid:focus, form [type="number"]:invalid, form [type="number"].invalid:focus, form [type="search"]:invalid, form [type="search"].invalid:focus, form [type="password"]:invalid, form [type="password"].invalid:focus, form [type="url"]:invalid, form [type="url"].invalid:focus, form [type="tel"]:invalid, form [type="tel"].invalid:focus, form [type="datetime"]:invalid, form [type="datetime"].invalid:focus, form [type="date"]:invalid, form [type="date"].invalid:focus, form [type="time"]:invalid, form [type="time"].invalid:focus, form textarea:invalid, form textarea.invalid:focus, form select:invalid, form select.invalid:focus, form .input:invalid, form .input.invalid:focus, form .select:invalid, form .select.invalid:focus, form .os-multiselect:invalid, form .os-multiselect.invalid:focus, form .os-listbox:invalid, form .os-listbox.invalid:focus, .form input:not([type]):invalid, .form input:not([type]).invalid:focus, .form [type="text"]:invalid, .form [type="text"].invalid:focus, .form [type="email"]:invalid, .form [type="email"].invalid:focus, .form [type="number"]:invalid, .form [type="number"].invalid:focus, .form [type="search"]:invalid, .form [type="search"].invalid:focus, .form [type="password"]:invalid, .form [type="password"].invalid:focus, .form [type="url"]:invalid, .form [type="url"].invalid:focus, .form [type="tel"]:invalid, .form [type="tel"].invalid:focus, .form [type="datetime"]:invalid, .form [type="datetime"].invalid:focus, .form [type="date"]:invalid, .form [type="date"].invalid:focus, .form [type="time"]:invalid, .form [type="time"].invalid:focus, .form textarea:invalid, .form textarea.invalid:focus, .form select:invalid, .form select.invalid:focus, .form .input:invalid, .form .input.invalid:focus, .form .select:invalid, .form .select.invalid:focus, .form .os-multiselect:invalid, .form .os-multiselect.invalid:focus, .form .os-listbox:invalid, .form .os-listbox.invalid:focus { -webkit-box-shadow: none; box-shadow: none; }

form select, form .select, .form select, .form .select { max-width: 100%; padding-top: .15rem; padding-bottom: .15rem; }

form option, .form option { overflow: hidden; text-overflow: ellipsis; }

form [type="checkbox"], form [type="radio"], .form [type="checkbox"], .form [type="radio"] { cursor: pointer; }

form ::-ms-placeholder, .form ::-ms-placeholder { opacity: 0.54; }

.os-multiselect { display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; padding: 0 !important; }

.os-multiselect > div:first-child { padding: .5em; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }

.os-multiselect > div:nth-child(2) { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; overflow: auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; }

.os-multiselect > div:nth-child(2) > div { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; padding: 0 .5em; width: 100%; }

.os-listbox { display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; padding: 0 !important; }

.os-listbox > div:first-child { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; width: 100%; overflow: auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; }

.os-listbox > div:first-child > div { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; padding: 0 .5em; width: 100%; cursor: pointer; }

.os-listbox > div:first-child > div > *:first-child { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; }

.os-listbox > div:first-child > div > *:nth-child(2) { visibility: hidden; }

.os-listbox > div:first-child > div:hover > *:nth-child(2) { visibility: visible; }

.select-wrapper { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; padding: 0 !important; margin: 0.25rem; margin-right: 0; margin-left: 0; }

.select-wrapper div.select { cursor: pointer; margin: 0 !important; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -ms-flex-align: center; align-items: center; overflow: hidden; text-overflow: ellipsis; }

.select-wrapper ul { display: none; position: absolute; top: 100%; left: 0; right: 0; max-height: 10em; overflow-y: auto; -webkit-transition: all 0.5s; transition: all 0.5s; list-style: none; padding: 0 !important; margin: 0 !important; z-index: 99; }

.select-wrapper ul li { padding: 0.125rem 0.5rem; display: block; text-decoration: none; cursor: pointer; }

.select-wrapper ul li a { text-decoration: none; }

.select-wrapper.right ul { right: 0; }

.select-wrapper.top ul { bottom: 2em; }

.select-wrapper.hover:hover ul { display: inline-block; }

.select-wrapper:hover ul { display: inline-block; }

/* button */
button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { border-style: none; padding: 0; }

button, html [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; }

button { overflow: visible; text-transform: none; }

button, [type="button"], [type="submit"], [type="reset"], a.button, label.button, .button, a[role="button"], label[role="button"], [role="button"] { display: inline-block; border-radius: 0.25rem; padding: 0.3rem 0.9rem; margin: 0.25rem; text-decoration: none; text-align: center; text-justify: auto; font-size: 95%; cursor: pointer; -webkit-transition: background 0.3s; transition: background 0.3s; }

button.small, [type="button"].small, [type="submit"].small, [type="reset"].small, a.button.small, label.button.small, .button.small, a[role="button"].small, label[role="button"].small, [role="button"].small { padding: 0.21rem 0.75rem; font-size: 80%; }

button.large, [type="button"].large, [type="submit"].large, [type="reset"].large, a.button.large, label.button.large, .button.large, a[role="button"].large, label[role="button"].large, [role="button"].large { padding: 0.6rem 1.2rem; font-size: 120%; }

input:disabled, input[disabled], textarea:disabled, textarea[disabled], select:disabled, .select:disabled, select[disabled], .select[disaabled], button:disabled, button[disabled], .button:disabled, .button[disabled], [role="button"]:disabled, [role="button"][disabled] { cursor: not-allowed; opacity: 0.75; }

a.link { cursor: pointer !important; padding: 0 !important; border: 0 !important; background: none !important; }

a.link:hover { opacity: 80%; }

a.link.small { font-size: 80%; }

a.link.large { font-size: 120%; }

.button-group { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: wrap; flex-wrap: wrap; margin: 0.5rem; }

.button-group.bordered { border-radius: 0.25rem; }

.button-group > button, .button-group > [type="button"], .button-group > [type="submit"], .button-group > [type="reset"], .button-group > .button, .button-group > [role="button"], .button-group > .button { margin: 0; margin-right: 0.3rem; max-width: 100%; -webkit-box-flex: 0; -ms-flex: 0 1 auto; flex: 0 1 auto; text-align: center; -webkit-box-shadow: none; box-shadow: none; }

.button-group.toolbar > * { margin: 0; border: 0; border-radius: 0; }

.button-group.fill > * { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; margin-right: 0; font-weight: bold; }

.button-group.small * { padding: 0.21rem 0.75rem; font-size: 80%; }

.button-group.large * { padding: 0.6rem 1.2rem; font-size: 120%; }

@media screen and (max-width: 767px) { .button-group { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } }

fieldset { display: block; border-radius: 0.25rem; margin: 0.125rem; padding: 0.3rem; min-width: 0; text-overflow: ellipsis; }

legend { -webkit-box-sizing: border-box; box-sizing: border-box; display: table; max-width: 100%; white-space: normal; font-weight: 700; padding: 0 0.3rem; }

.os-multiple-selector { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; }

.os-multiple-selector > ul { -webkit-box-sizing: border-box; box-sizing: border-box; border-radius: 0.25rem; margin: 0.25rem; margin-right: 0; margin-left: 0; overflow: auto; list-style-type: none; padding: 0; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; min-width: 10em; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }

.os-multiple-selector > ul li { cursor: pointer; padding: 2px 10px; border: none; font-weight: normal; font-size: 97%; }

.os-multiple-selector > :nth-child(2) { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding: .5em; }

.os-multiple-selector > :nth-child(2) button { margin: .5em; }

.os-dropdonw-back { display: none; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; opacity: 0; z-index: 100; }

.os-dropdown { display: inline-block; z-index: 99; }

.os-dropdown div { cursor: pointer; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }

.os-dropdown ul { display: none; position: absolute; list-style: none; padding: 0 !important; margin: 0 !important; }

.os-dropdown ul li { padding: 0.25rem 0.5rem; display: block; cursor: pointer; white-space: nowrap; }

.os-dropdown ul li a { text-decoration: none; }

.os-dropdown.pop-right ul { right: 0; }

.os-dropdown.pop-right ul li { left: 0; }

.os-dropdown.pop-top ul { bottom: 2em; }

.os-dropdown.hover:hover ul { display: inline-block; }

/*  <div class="os-tabmenu"> <ul> [os-tabs header] <li data-target="tab1">...</li> <li data-target="tab2">...</li> <li data-target="tab3">...</li> ... </ul> <div> [os-tabs contents] <div id="tab1">...</div> <div id="tab2">...</div> <div id="tab3">...</div> ... </div> </div> */
.os-tabmenu { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; display: -ms-grid; display: grid; width: 100%; height: 100%; padding: 0; }

.os-tabmenu > ul { -ms-grid-row: 1; -ms-grid-column: 2; grid-area: head; padding: 0.5rem; list-style: none; padding: 0 !important; margin: 0 !important; display: -webkit-box; display: -ms-flexbox; display: flex; }

.os-tabmenu > ul li { display: -ms-grid; display: grid; cursor: pointer; justify-items: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: .5rem !important; -webkit-transition: all .3s; transition: all .3s; }

.os-tabmenu > ul li > i { -ms-grid-row: 1; -ms-grid-column: 2; grid-area: icon; }

.os-tabmenu > ul li > span { -ms-grid-row: 1; -ms-grid-column: 1; grid-area: text; }

.os-tabmenu > div { -ms-grid-row: 1; -ms-grid-column: 1; grid-area: body; padding: .5em; font-weight: normal; }

.os-tabmenu.tab-top { -ms-grid-rows: auto 1fr; grid-template-rows: auto 1fr; grid-template-areas: "head" "body"; }

.os-tabmenu.tab-top > ul { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; }

.os-tabmenu.tab-bottom { -ms-grid-rows: 1fr auto; grid-template-rows: 1fr auto; grid-template-areas: "body" "head"; }

.os-tabmenu.tab-bottom > ul { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; }

.os-tabmenu.tab-left { -ms-grid-columns: auto 1fr; grid-template-columns: auto 1fr; grid-template-areas: "head body"; }

.os-tabmenu.tab-left > ul { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }

.os-tabmenu.tab-right { -ms-grid-columns: 1fr auto; grid-template-columns: 1fr auto; grid-template-areas: "body head"; }

.os-tabmenu.tab-right > ul { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }

.os-tabmenu.icon-top > ul li { -ms-grid-rows: auto 1fr; grid-template-rows: auto 1fr; grid-template-areas: "icon" "text"; justify-items: center; text-align: center; row-gap: .5em; }

.os-tabmenu.icon-bottom > ul li { -ms-grid-rows: 1fr auto; grid-template-rows: 1fr auto; grid-template-areas: "text" "icon"; justify-items: center; text-align: center; row-gap: .5em; }

.os-tabmenu.icon-left > ul li { -ms-grid-columns: auto 1fr; grid-template-columns: auto 1fr; grid-template-areas: "icon text"; justify-items: start; text-align: left; -webkit-column-gap: .5em; column-gap: .5em; }

.os-tabmenu.icon-right > ul li { -ms-grid-columns: 1fr auto; grid-template-columns: 1fr auto; grid-template-areas: "text icon"; justify-items: end; text-align: right; -webkit-column-gap: .5em; column-gap: .5em; }

/*
    <ul>
        <li>
            <div> ... [header] ... </div>
            <div> ... [collapsed] ... </div>
        </li>

    </ul>

*/
ul.os-accordion-menu { padding: 0; margin: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; list-style: none; }

ul.os-accordion-menu > li { border-width: 1px; border-style: unset; }

ul.os-accordion-menu > li > *:first-child { padding: .25rem .5rem; cursor: pointer; text-decoration: none; }

ul.os-accordion-menu > li > *:first-child * { cursor: pointer; text-decoration: none; }

ul.os-accordion-menu > li > *:first-child *:hover { border-width: 1px; }

ul.os-accordion-menu > li > *:nth-child(2) { display: none; padding: .5rem; padding-left: 1.5rem; padding-top: 0; -webkit-transition: all .3s; transition: all .3s; }

ul.os-accordion-menu > li.active > *:first-child:hover * { text-decoration: none; }

ul.os-accordion-menu > li.active > *:nth-child(2) { display: block; }

.os-gauge-wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }

.os-gauge-wrapper .os-gauge-title { font-weight: bolder; }

.os-gauge-radial { position: relative; width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }

.os-gauge-radial img { width: 100%; }

.os-gauge-radial label { position: absolute; top: 60%; }

.os-gauge-radial .rotator { background: transparent; position: absolute; left: 15%; top: 15%; width: 70%; height: 70%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; /* rotating */ -webkit-transform: rotate(40deg); transform: rotate(40deg); -webkit-transition: -webkit-transform 0.2s ease-out; transition: -webkit-transform 0.2s ease-out; transition: transform 0.2s ease-out; transition: transform 0.2s ease-out, -webkit-transform 0.2s ease-out; }

.os-gauge-radial .rotator::before { content: ''; width: 15%; height: 15%; border-radius: 50%; z-index: 2; }

.os-gauge-radial .rotator .cursor { position: absolute; margin-top: -35%; width: 8%; height: 65%; border-radius: 80% 80% 0 0; }

.os-gauge-arc { -webkit-box-sizing: border-box; box-sizing: border-box; width: 100%; height: 0; padding-bottom: 50%; position: relative; overflow: hidden; }

.os-gauge-arc .first { -webkit-box-sizing: content-box; box-sizing: content-box; position: absolute; left: 0; top: 0; width: 100%; height: 100%; border-top-left-radius: 50% 100%; border-top-right-radius: 50% 100%; }

.os-gauge-arc .second { -webkit-box-sizing: border-box; box-sizing: border-box; position: absolute; left: 0; top: 0; width: 100%; height: 100%; border-top-left-radius: 50% 100%; border-top-right-radius: 50% 100%; -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%; -webkit-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: -webkit-transform 0.2s ease-out; transition: -webkit-transform 0.2s ease-out; transition: transform 0.2s ease-out; transition: transform 0.2s ease-out, -webkit-transform 0.2s ease-out; }

.os-gauge-arc .theird { position: absolute; left: 15%; top: 30%; width: 70%; height: 70%; border-top-left-radius: 50% 100%; border-top-right-radius: 50% 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; }

.os-gauge-pie { -webkit-box-sizing: border-box; box-sizing: border-box; width: 100%; height: 0; padding-top: 50%; padding-bottom: 50%; position: relative; overflow: hidden; }

.os-gauge-pie .pie { -webkit-box-sizing: content-box; box-sizing: content-box; position: absolute; left: 0; top: 0; width: 100%; height: 100%; border-radius: 50%; }

.os-gauge-pie .inner { position: absolute; left: 15%; top: 15%; width: 70%; height: 70%; border-radius: 50%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }

.os-icon.hover { cursor: pointer; }

/*add this to avoid flickering*/
.os-dd-inprogess > * { pointer-events: none; }

/*dropzone style style*/
.os-dd-dropzone { min-height: 50px; }

.os-dd-draggable { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; }

/*drag drop styles*/
.os-dd-spacing { height: 10px; }

.os-dd-spacing-dragged-over { padding: 25px; }

@-webkit-keyframes blinker { 50% { opacity: 0; } }

@keyframes blinker { 50% { opacity: 0; } }

.blink_me { -webkit-animation: blinker 1s linear infinite; animation: blinker 1s linear infinite; }

/*for flex demo*/
.os-flex .os-dd-spacing { width: 20px; height: auto; }

.os-dd-noselect { -webkit-touch-callout: none; /* iOS Safari */ -webkit-user-select: none; /* Safari */ /* Konqueror HTML */ -moz-user-select: none; /* Old versions of Firefox */ -ms-user-select: none; /* Internet Explorer/Edge */ user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */ }

.live-calls { position: absolute; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; left: 0; bottom: 0; z-index: 1000001; }

/*  Common styles */
.shown { display: inline; left: 50px; }

.hidden { display: none; }

.nohref { cursor: pointer; }

/* LIVE CALL SLIDER */
:root { --live-call-head-height: 2em; --live-call-foot-height: 2.5em; --live-call-body-height: 12em; --live-call-height: calc(var(--live-call-head-height) + var(--live-call-foot-height) + var(--live-call-body-height)); --live-call-width: 22em; }

.live-call h5 { padding: .5em; margin: 0; }

.live-call { margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; position: fixed; bottom: 0; right: 0; width: 22em; border-radius: 0.5em 0.5em 0 0; border-style: solid; border-width: .3em; z-index: 1000000; }

.live-call-shown { /* height: var(--live-call-height); */ height: 16em; -webkit-transition: height 650ms 250ms; transition: height 650ms 250ms; }

.live-call-shrink { /* height: var(--live-call-head-height); */ height: 2.5em; -webkit-transition: height 650ms 250ms; transition: height 650ms 250ms; }

.live-call-head { height: var(--live-call-head-height); line-height: 1.8em; border-radius: 0.3em 0 0 0; cursor: pointer; font-family: Arial, Helvetica, sans-serif; font-weight: 800; text-align: center; margin: 0; padding: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; }

.live-call-closer { width: 2em; height: 2em; }

.live-call-head-toggle { border-radius: .2em 0 0 0; width: 2em; height: 2em; }

.live-call-head-title { text-align: center; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; }

.live-call-body { /* height: var(--live-call-body-height); */ height: 12em; font-size: 90%; line-height: 1.5; padding: .1em; display: -ms-grid; display: grid; -ms-grid-columns: 3fr 2fr; grid-template-columns: 3fr 2fr; -ms-grid-rows: auto; grid-template-rows: auto; grid-template-areas: "ivr acw" "date classify" "number comment" "customer customer"; }

.live-call-body-ivr { -ms-grid-row: 1; -ms-grid-column: 1; grid-area: ivr; -ms-flex-item-align: center; -ms-grid-row-align: center; align-self: center; }

.live-call-body-acw { -ms-grid-row: 1; -ms-grid-column: 2; grid-area: acw; -ms-flex-item-align: center; -ms-grid-row-align: center; align-self: center; }

.live-call-body-date { -ms-grid-row: 2; -ms-grid-column: 1; grid-area: date; -ms-flex-item-align: center; -ms-grid-row-align: center; align-self: center; }

.live-call-body-classify { -ms-grid-row: 2; -ms-grid-column: 2; grid-area: classify; padding: 0; max-height: 2em; max-width: 12em; -ms-flex-item-align: center; -ms-grid-row-align: center; align-self: center; }

.live-call-body-number { -ms-grid-row: 3; -ms-grid-column: 1; grid-area: number; -ms-flex-item-align: center; -ms-grid-row-align: center; align-self: center; }

.live-call-body-comment { -ms-grid-row: 3; -ms-grid-column: 2; grid-area: comment; -ms-flex-item-align: center; -ms-grid-row-align: center; align-self: center; }

.live-call-body-customer { -ms-grid-row: 4; -ms-grid-column: 1; -ms-grid-column-span: 2; grid-area: customer; -ms-flex-item-align: center; -ms-grid-row-align: center; align-self: center; }

.live-call-foot { height: 2.5em; }

.live-call-foot button { margin: .1em .2em; }

/* Definitions for utilities and helper classes. */
/* Utility module CSS variable definitions */
.hidden { display: none !important; }

.visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important; border: 0 !important; padding: 0 !important; clip: rect(0 0 0 0) !important; -webkit-clip-path: inset(100%) !important; clip-path: inset(100%) !important; overflow: hidden !important; }

.bordered { border-width: 0.0625rem !important; border-style: solid !important; }

.rounded { border-radius: 0.5rem !important; }

.circular { border-radius: 50% !important; }

.shadowed { -webkit-box-shadow: 0 0.25rem 0.25rem 0 rgba(0, 0, 0, 0.125), 0 0.125rem 0.125rem -0.125rem rgba(0, 0, 0, 0.25) !important; box-shadow: 0 0.25rem 0.25rem 0 rgba(0, 0, 0, 0.125), 0 0.125rem 0.125rem -0.125rem rgba(0, 0, 0, 0.25) !important; }

.right { text-align: right !important; }

.left { text-align: left !important; }

.center { text-align: center !important; }

.clickable { cursor: pointer; }

.responsive-margin { margin: 0.125rem !important; }

@media screen and (min-width: 768px) { .responsive-margin { margin: 0.25rem !important; } }

@media screen and (min-width: 1280px) { .responsive-margin { margin: 0.5rem !important; } }

.responsive-padding { padding: 0.125rem !important; }

@media screen and (min-width: 768px) { .responsive-padding { padding: 0.25rem !important; } }

@media screen and (min-width: 1280px) { .responsive-padding { padding: 0.5rem !important; } }

@media screen and (max-width: 767px) { .hidden-sm { display: none !important; } }

@media screen and (min-width: 768px) and (max-width: 1279px) { .hidden-md { display: none !important; } }

@media screen and (min-width: 1280px) { .hidden-lg { display: none !important; } }

@media screen and (max-width: 767px) { .visually-hidden-sm { position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important; border: 0 !important; padding: 0 !important; clip: rect(0 0 0 0) !important; -webkit-clip-path: inset(100%) !important; clip-path: inset(100%) !important; overflow: hidden !important; } }

@media screen and (min-width: 768px) and (max-width: 1279px) { .visually-hidden-md { position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important; border: 0 !important; padding: 0 !important; clip: rect(0 0 0 0) !important; -webkit-clip-path: inset(100%) !important; clip-path: inset(100%) !important; overflow: hidden !important; } }

@media screen and (min-width: 1280px) { .visually-hidden-lg { position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important; border: 0 !important; padding: 0 !important; clip: rect(0 0 0 0) !important; -webkit-clip-path: inset(100%) !important; clip-path: inset(100%) !important; overflow: hidden !important; } }

.d-none { display: none !important; }

.d-block { display: block !important; }

.d-inline { display: inline !important; }

.d-contents { display: contents !important; }

.d-inline-block { display: inline-block !important; }

.d-inline-flex { display: -webkit-inline-box !important; display: -ms-inline-flexbox !important; display: inline-flex !important; }

.d-grid { display: -ms-grid !important; display: grid !important; }

.d-flex-col { display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }

.d-flex-row { display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; }

.m-0 { margin: 0em !important; }

.ml-0 { margin-left: 0em !important; }

.mr-0 { margin-right: 0em !important; }

.mt-0 { margin-top: 0em !important; }

.mb-0 { margin-bottom: 0em !important; }

.mx-0 { margin-left: 0em !important; margin-right: 0em !important; }

.my-0 { margin-top: 0em !important; margin-bottom: 0em !important; }

.p-0 { padding: 0em !important; }

.pl-0 { padding-left: 0em !important; }

.pr-0 { padding-right: 0em !important; }

.pt-0 { padding-top: 0em !important; }

.pb-0 { padding-bottom: 0em !important; }

.px-0 { padding-left: 0em !important; padding-right: 0em !important; }

.py-0 { padding-top: 0em !important; padding-bottom: 0em !important; }

.m-1 { margin: 0.1em !important; }

.ml-1 { margin-left: 0.1em !important; }

.mr-1 { margin-right: 0.1em !important; }

.mt-1 { margin-top: 0.1em !important; }

.mb-1 { margin-bottom: 0.1em !important; }

.mx-1 { margin-left: 0.1em !important; margin-right: 0.1em !important; }

.my-1 { margin-top: 0.1em !important; margin-bottom: 0.1em !important; }

.p-1 { padding: 0.1em !important; }

.pl-1 { padding-left: 0.1em !important; }

.pr-1 { padding-right: 0.1em !important; }

.pt-1 { padding-top: 0.1em !important; }

.pb-1 { padding-bottom: 0.1em !important; }

.px-1 { padding-left: 0.1em !important; padding-right: 0.1em !important; }

.py-1 { padding-top: 0.1em !important; padding-bottom: 0.1em !important; }

.m-2 { margin: 0.2em !important; }

.ml-2 { margin-left: 0.2em !important; }

.mr-2 { margin-right: 0.2em !important; }

.mt-2 { margin-top: 0.2em !important; }

.mb-2 { margin-bottom: 0.2em !important; }

.mx-2 { margin-left: 0.2em !important; margin-right: 0.2em !important; }

.my-2 { margin-top: 0.2em !important; margin-bottom: 0.2em !important; }

.p-2 { padding: 0.2em !important; }

.pl-2 { padding-left: 0.2em !important; }

.pr-2 { padding-right: 0.2em !important; }

.pt-2 { padding-top: 0.2em !important; }

.pb-2 { padding-bottom: 0.2em !important; }

.px-2 { padding-left: 0.2em !important; padding-right: 0.2em !important; }

.py-2 { padding-top: 0.2em !important; padding-bottom: 0.2em !important; }

.m-3 { margin: 0.3em !important; }

.ml-3 { margin-left: 0.3em !important; }

.mr-3 { margin-right: 0.3em !important; }

.mt-3 { margin-top: 0.3em !important; }

.mb-3 { margin-bottom: 0.3em !important; }

.mx-3 { margin-left: 0.3em !important; margin-right: 0.3em !important; }

.my-3 { margin-top: 0.3em !important; margin-bottom: 0.3em !important; }

.p-3 { padding: 0.3em !important; }

.pl-3 { padding-left: 0.3em !important; }

.pr-3 { padding-right: 0.3em !important; }

.pt-3 { padding-top: 0.3em !important; }

.pb-3 { padding-bottom: 0.3em !important; }

.px-3 { padding-left: 0.3em !important; padding-right: 0.3em !important; }

.py-3 { padding-top: 0.3em !important; padding-bottom: 0.3em !important; }

.m-4 { margin: 0.4em !important; }

.ml-4 { margin-left: 0.4em !important; }

.mr-4 { margin-right: 0.4em !important; }

.mt-4 { margin-top: 0.4em !important; }

.mb-4 { margin-bottom: 0.4em !important; }

.mx-4 { margin-left: 0.4em !important; margin-right: 0.4em !important; }

.my-4 { margin-top: 0.4em !important; margin-bottom: 0.4em !important; }

.p-4 { padding: 0.4em !important; }

.pl-4 { padding-left: 0.4em !important; }

.pr-4 { padding-right: 0.4em !important; }

.pt-4 { padding-top: 0.4em !important; }

.pb-4 { padding-bottom: 0.4em !important; }

.px-4 { padding-left: 0.4em !important; padding-right: 0.4em !important; }

.py-4 { padding-top: 0.4em !important; padding-bottom: 0.4em !important; }

.m-5 { margin: 0.5em !important; }

.ml-5 { margin-left: 0.5em !important; }

.mr-5 { margin-right: 0.5em !important; }

.mt-5 { margin-top: 0.5em !important; }

.mb-5 { margin-bottom: 0.5em !important; }

.mx-5 { margin-left: 0.5em !important; margin-right: 0.5em !important; }

.my-5 { margin-top: 0.5em !important; margin-bottom: 0.5em !important; }

.p-5 { padding: 0.5em !important; }

.pl-5 { padding-left: 0.5em !important; }

.pr-5 { padding-right: 0.5em !important; }

.pt-5 { padding-top: 0.5em !important; }

.pb-5 { padding-bottom: 0.5em !important; }

.px-5 { padding-left: 0.5em !important; padding-right: 0.5em !important; }

.py-5 { padding-top: 0.5em !important; padding-bottom: 0.5em !important; }

.m-6 { margin: 0.6em !important; }

.ml-6 { margin-left: 0.6em !important; }

.mr-6 { margin-right: 0.6em !important; }

.mt-6 { margin-top: 0.6em !important; }

.mb-6 { margin-bottom: 0.6em !important; }

.mx-6 { margin-left: 0.6em !important; margin-right: 0.6em !important; }

.my-6 { margin-top: 0.6em !important; margin-bottom: 0.6em !important; }

.p-6 { padding: 0.6em !important; }

.pl-6 { padding-left: 0.6em !important; }

.pr-6 { padding-right: 0.6em !important; }

.pt-6 { padding-top: 0.6em !important; }

.pb-6 { padding-bottom: 0.6em !important; }

.px-6 { padding-left: 0.6em !important; padding-right: 0.6em !important; }

.py-6 { padding-top: 0.6em !important; padding-bottom: 0.6em !important; }

.m-7 { margin: 0.7em !important; }

.ml-7 { margin-left: 0.7em !important; }

.mr-7 { margin-right: 0.7em !important; }

.mt-7 { margin-top: 0.7em !important; }

.mb-7 { margin-bottom: 0.7em !important; }

.mx-7 { margin-left: 0.7em !important; margin-right: 0.7em !important; }

.my-7 { margin-top: 0.7em !important; margin-bottom: 0.7em !important; }

.p-7 { padding: 0.7em !important; }

.pl-7 { padding-left: 0.7em !important; }

.pr-7 { padding-right: 0.7em !important; }

.pt-7 { padding-top: 0.7em !important; }

.pb-7 { padding-bottom: 0.7em !important; }

.px-7 { padding-left: 0.7em !important; padding-right: 0.7em !important; }

.py-7 { padding-top: 0.7em !important; padding-bottom: 0.7em !important; }

.m-8 { margin: 0.8em !important; }

.ml-8 { margin-left: 0.8em !important; }

.mr-8 { margin-right: 0.8em !important; }

.mt-8 { margin-top: 0.8em !important; }

.mb-8 { margin-bottom: 0.8em !important; }

.mx-8 { margin-left: 0.8em !important; margin-right: 0.8em !important; }

.my-8 { margin-top: 0.8em !important; margin-bottom: 0.8em !important; }

.p-8 { padding: 0.8em !important; }

.pl-8 { padding-left: 0.8em !important; }

.pr-8 { padding-right: 0.8em !important; }

.pt-8 { padding-top: 0.8em !important; }

.pb-8 { padding-bottom: 0.8em !important; }

.px-8 { padding-left: 0.8em !important; padding-right: 0.8em !important; }

.py-8 { padding-top: 0.8em !important; padding-bottom: 0.8em !important; }

.m-9 { margin: 0.9em !important; }

.ml-9 { margin-left: 0.9em !important; }

.mr-9 { margin-right: 0.9em !important; }

.mt-9 { margin-top: 0.9em !important; }

.mb-9 { margin-bottom: 0.9em !important; }

.mx-9 { margin-left: 0.9em !important; margin-right: 0.9em !important; }

.my-9 { margin-top: 0.9em !important; margin-bottom: 0.9em !important; }

.p-9 { padding: 0.9em !important; }

.pl-9 { padding-left: 0.9em !important; }

.pr-9 { padding-right: 0.9em !important; }

.pt-9 { padding-top: 0.9em !important; }

.pb-9 { padding-bottom: 0.9em !important; }

.px-9 { padding-left: 0.9em !important; padding-right: 0.9em !important; }

.py-9 { padding-top: 0.9em !important; padding-bottom: 0.9em !important; }

.m-10 { margin: 1em !important; }

.ml-10 { margin-left: 1em !important; }

.mr-10 { margin-right: 1em !important; }

.mt-10 { margin-top: 1em !important; }

.mb-10 { margin-bottom: 1em !important; }

.mx-10 { margin-left: 1em !important; margin-right: 1em !important; }

.my-10 { margin-top: 1em !important; margin-bottom: 1em !important; }

.p-10 { padding: 1em !important; }

.pl-10 { padding-left: 1em !important; }

.pr-10 { padding-right: 1em !important; }

.pt-10 { padding-top: 1em !important; }

.pb-10 { padding-bottom: 1em !important; }

.px-10 { padding-left: 1em !important; padding-right: 1em !important; }

.py-10 { padding-top: 1em !important; padding-bottom: 1em !important; }

.m-11 { margin: 1.1em !important; }

.ml-11 { margin-left: 1.1em !important; }

.mr-11 { margin-right: 1.1em !important; }

.mt-11 { margin-top: 1.1em !important; }

.mb-11 { margin-bottom: 1.1em !important; }

.mx-11 { margin-left: 1.1em !important; margin-right: 1.1em !important; }

.my-11 { margin-top: 1.1em !important; margin-bottom: 1.1em !important; }

.p-11 { padding: 1.1em !important; }

.pl-11 { padding-left: 1.1em !important; }

.pr-11 { padding-right: 1.1em !important; }

.pt-11 { padding-top: 1.1em !important; }

.pb-11 { padding-bottom: 1.1em !important; }

.px-11 { padding-left: 1.1em !important; padding-right: 1.1em !important; }

.py-11 { padding-top: 1.1em !important; padding-bottom: 1.1em !important; }

.m-12 { margin: 1.2em !important; }

.ml-12 { margin-left: 1.2em !important; }

.mr-12 { margin-right: 1.2em !important; }

.mt-12 { margin-top: 1.2em !important; }

.mb-12 { margin-bottom: 1.2em !important; }

.mx-12 { margin-left: 1.2em !important; margin-right: 1.2em !important; }

.my-12 { margin-top: 1.2em !important; margin-bottom: 1.2em !important; }

.p-12 { padding: 1.2em !important; }

.pl-12 { padding-left: 1.2em !important; }

.pr-12 { padding-right: 1.2em !important; }

.pt-12 { padding-top: 1.2em !important; }

.pb-12 { padding-bottom: 1.2em !important; }

.px-12 { padding-left: 1.2em !important; padding-right: 1.2em !important; }

.py-12 { padding-top: 1.2em !important; padding-bottom: 1.2em !important; }

.m-13 { margin: 1.3em !important; }

.ml-13 { margin-left: 1.3em !important; }

.mr-13 { margin-right: 1.3em !important; }

.mt-13 { margin-top: 1.3em !important; }

.mb-13 { margin-bottom: 1.3em !important; }

.mx-13 { margin-left: 1.3em !important; margin-right: 1.3em !important; }

.my-13 { margin-top: 1.3em !important; margin-bottom: 1.3em !important; }

.p-13 { padding: 1.3em !important; }

.pl-13 { padding-left: 1.3em !important; }

.pr-13 { padding-right: 1.3em !important; }

.pt-13 { padding-top: 1.3em !important; }

.pb-13 { padding-bottom: 1.3em !important; }

.px-13 { padding-left: 1.3em !important; padding-right: 1.3em !important; }

.py-13 { padding-top: 1.3em !important; padding-bottom: 1.3em !important; }

.m-14 { margin: 1.4em !important; }

.ml-14 { margin-left: 1.4em !important; }

.mr-14 { margin-right: 1.4em !important; }

.mt-14 { margin-top: 1.4em !important; }

.mb-14 { margin-bottom: 1.4em !important; }

.mx-14 { margin-left: 1.4em !important; margin-right: 1.4em !important; }

.my-14 { margin-top: 1.4em !important; margin-bottom: 1.4em !important; }

.p-14 { padding: 1.4em !important; }

.pl-14 { padding-left: 1.4em !important; }

.pr-14 { padding-right: 1.4em !important; }

.pt-14 { padding-top: 1.4em !important; }

.pb-14 { padding-bottom: 1.4em !important; }

.px-14 { padding-left: 1.4em !important; padding-right: 1.4em !important; }

.py-14 { padding-top: 1.4em !important; padding-bottom: 1.4em !important; }

.m-15 { margin: 1.5em !important; }

.ml-15 { margin-left: 1.5em !important; }

.mr-15 { margin-right: 1.5em !important; }

.mt-15 { margin-top: 1.5em !important; }

.mb-15 { margin-bottom: 1.5em !important; }

.mx-15 { margin-left: 1.5em !important; margin-right: 1.5em !important; }

.my-15 { margin-top: 1.5em !important; margin-bottom: 1.5em !important; }

.p-15 { padding: 1.5em !important; }

.pl-15 { padding-left: 1.5em !important; }

.pr-15 { padding-right: 1.5em !important; }

.pt-15 { padding-top: 1.5em !important; }

.pb-15 { padding-bottom: 1.5em !important; }

.px-15 { padding-left: 1.5em !important; padding-right: 1.5em !important; }

.py-15 { padding-top: 1.5em !important; padding-bottom: 1.5em !important; }

.m-16 { margin: 1.6em !important; }

.ml-16 { margin-left: 1.6em !important; }

.mr-16 { margin-right: 1.6em !important; }

.mt-16 { margin-top: 1.6em !important; }

.mb-16 { margin-bottom: 1.6em !important; }

.mx-16 { margin-left: 1.6em !important; margin-right: 1.6em !important; }

.my-16 { margin-top: 1.6em !important; margin-bottom: 1.6em !important; }

.p-16 { padding: 1.6em !important; }

.pl-16 { padding-left: 1.6em !important; }

.pr-16 { padding-right: 1.6em !important; }

.pt-16 { padding-top: 1.6em !important; }

.pb-16 { padding-bottom: 1.6em !important; }

.px-16 { padding-left: 1.6em !important; padding-right: 1.6em !important; }

.py-16 { padding-top: 1.6em !important; padding-bottom: 1.6em !important; }

.m-17 { margin: 1.7em !important; }

.ml-17 { margin-left: 1.7em !important; }

.mr-17 { margin-right: 1.7em !important; }

.mt-17 { margin-top: 1.7em !important; }

.mb-17 { margin-bottom: 1.7em !important; }

.mx-17 { margin-left: 1.7em !important; margin-right: 1.7em !important; }

.my-17 { margin-top: 1.7em !important; margin-bottom: 1.7em !important; }

.p-17 { padding: 1.7em !important; }

.pl-17 { padding-left: 1.7em !important; }

.pr-17 { padding-right: 1.7em !important; }

.pt-17 { padding-top: 1.7em !important; }

.pb-17 { padding-bottom: 1.7em !important; }

.px-17 { padding-left: 1.7em !important; padding-right: 1.7em !important; }

.py-17 { padding-top: 1.7em !important; padding-bottom: 1.7em !important; }

.m-18 { margin: 1.8em !important; }

.ml-18 { margin-left: 1.8em !important; }

.mr-18 { margin-right: 1.8em !important; }

.mt-18 { margin-top: 1.8em !important; }

.mb-18 { margin-bottom: 1.8em !important; }

.mx-18 { margin-left: 1.8em !important; margin-right: 1.8em !important; }

.my-18 { margin-top: 1.8em !important; margin-bottom: 1.8em !important; }

.p-18 { padding: 1.8em !important; }

.pl-18 { padding-left: 1.8em !important; }

.pr-18 { padding-right: 1.8em !important; }

.pt-18 { padding-top: 1.8em !important; }

.pb-18 { padding-bottom: 1.8em !important; }

.px-18 { padding-left: 1.8em !important; padding-right: 1.8em !important; }

.py-18 { padding-top: 1.8em !important; padding-bottom: 1.8em !important; }

.m-19 { margin: 1.9em !important; }

.ml-19 { margin-left: 1.9em !important; }

.mr-19 { margin-right: 1.9em !important; }

.mt-19 { margin-top: 1.9em !important; }

.mb-19 { margin-bottom: 1.9em !important; }

.mx-19 { margin-left: 1.9em !important; margin-right: 1.9em !important; }

.my-19 { margin-top: 1.9em !important; margin-bottom: 1.9em !important; }

.p-19 { padding: 1.9em !important; }

.pl-19 { padding-left: 1.9em !important; }

.pr-19 { padding-right: 1.9em !important; }

.pt-19 { padding-top: 1.9em !important; }

.pb-19 { padding-bottom: 1.9em !important; }

.px-19 { padding-left: 1.9em !important; padding-right: 1.9em !important; }

.py-19 { padding-top: 1.9em !important; padding-bottom: 1.9em !important; }

.m-20 { margin: 2em !important; }

.ml-20 { margin-left: 2em !important; }

.mr-20 { margin-right: 2em !important; }

.mt-20 { margin-top: 2em !important; }

.mb-20 { margin-bottom: 2em !important; }

.mx-20 { margin-left: 2em !important; margin-right: 2em !important; }

.my-20 { margin-top: 2em !important; margin-bottom: 2em !important; }

.p-20 { padding: 2em !important; }

.pl-20 { padding-left: 2em !important; }

.pr-20 { padding-right: 2em !important; }

.pt-20 { padding-top: 2em !important; }

.pb-20 { padding-bottom: 2em !important; }

.px-20 { padding-left: 2em !important; padding-right: 2em !important; }

.py-20 { padding-top: 2em !important; padding-bottom: 2em !important; }

.flex-start { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; }

.flex-end { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; }

.flex-center { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }

.flex-align-start { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start !important; -ms-flex-align: start !important; align-items: flex-start !important; }

.flex-align-end { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: end !important; -ms-flex-align: end !important; align-items: flex-end !important; }

.flex-align-center { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center !important; -ms-flex-align: center !important; align-items: center !important; }

.flex { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; }

.flex-row { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }

.flex-row-start { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; }

.flex-column { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; }

.flex-column-start { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; }

.full-size { width: 100%; height: 100%; }

.full-width { width: 100%; }

.full-height { height: 100%; }

.width-1-4 { width: 25%; }

.width-1-3 { width: 33%; }

.width-1-2 { width: 50%; }

.width-3-4 { width: 75%; }

body { color: #555; background: #ECF0F5; }

body * { color: #555 default; border-color: #cbd6e3; }

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

hr { background: -webkit-gradient(linear, left top, right top, from(transparent), color-stop(20%, #cbd6e3), color-stop(80%, #cbd6e3), to(transparent)); background: linear-gradient(to right, transparent, #cbd6e3 20%, #cbd6e3 80%, transparent); }

blockquote { color: #f8f8f8; border: 0.0625rem solid #D2D6DE; border-left: 0.375rem solid #f57c00; }

blockquote:before { color: #f57c00; }

code { background: #FF851B; }

kbd { background: #555; color: #ECF0F5; }

pre { background: #FF851B; border: 0.0625rem solid #D2D6DE; border-left: 0.25rem solid #1565c0; }

figcaption { color: #f8f8f8; }

a { color: #3C8DBC; }

a.link { color: #FF851B; }

a:visited { color: #3C8DBC; }

/* main (container) */
.os-container { background-color: #ECF0F5; }

/* sidebar */
.os-sidebar { background-color: #1a1b36; }

.os-sidebar > .os-header { background-color: #1a1b36; }

.os-sidebar > .os-body { background-color: #1a1b36; color: #FFE4A5; }

/* sidebar */
/* content */
.os-content > .os-header { background-color: #3C8DBC; color: #FFF; }

.os-content > .os-body .page-header { background-color: #ECF0F5; }

.os-grid-item { background-color: #ECF0F5; }

/* content */
/* Card component CSS variable definitions */
.card { background: var(--card-back-color); color: var(--card-fore-color); border: 0.0625rem solid var(--card-border-color); }

.card.warning { --card-back-color: #ffca28; --card-border-color: #e8b825; }

.card.error { --card-back-color: #b71c1c; --card-fore-color: #f8f8f8; --card-border-color: #a71a1a; }

.card > .section { background: var(--card-back-color); color: var(--card-fore-color); border-bottom: 0.0625rem solid var(--card-border-color); }

.card > .section.dark { --card-back-color: #e0e0e0; }

.tooltip { background-color: #7bcaf8; color: #03283e; }

.tooltip > :first-child { background-color: #7bcaf8; border: 1px solid #4bb7f5; color: #03283e; }

.ttp .ttp-text { background-color: #383838; border: 1px solid #222; color: #fff; }

.os-panel { border-color: #a6a6a6; -webkit-box-shadow: 1px 1px 2px 1px #9a9a9a; box-shadow: 1px 1px 2px 1px #9a9a9a; }

.os-panel .os-panel-header { background-color: #b3b3b3; border-color: #a6a6a6; }

.os-panel .os-panel-header .os-panel-header-control:hover { -webkit-box-shadow: 1px 1px 1px 1px #8d8d8d; box-shadow: 1px 1px 1px 1px #8d8d8d; }

.os-panel .os-panel-footer { background-color: #b3b3b3; }

.os-panel.primary { border-color: #3C8DBC; -webkit-box-shadow: 1px 1px 1px #367fa9; box-shadow: 1px 1px 1px #367fa9; }

.os-panel.primary .os-panel-header, .os-panel.primary .os-panel-footer { border-color: #3C8DBC; background-color: #3C8DBC; color: #ECE6DB; }

.os-panel.primary .os-panel-header-control:hover { -webkit-box-shadow: 1px 1px 1px 1px #307095; box-shadow: 1px 1px 1px 1px #307095; }

.os-panel.secondary { border-color: #FF851B; -webkit-box-shadow: 1px 1px 1px #ff7702; box-shadow: 1px 1px 1px #ff7702; }

.os-panel.secondary .os-panel-header, .os-panel.secondary .os-panel-footer { border-color: #FF851B; background-color: #FF851B; color: #f8f8f8; }

.os-panel.secondary .os-panel-header-control:hover { -webkit-box-shadow: 1px 1px 1px 1px #e76b00; box-shadow: 1px 1px 1px 1px #e76b00; }

.os-panel.danger { border-color: #DD4B39; -webkit-box-shadow: 1px 1px 1px #d73925; box-shadow: 1px 1px 1px #d73925; }

.os-panel.danger .os-panel-header, .os-panel.danger .os-panel-footer { border-color: #DD4B39; background-color: #DD4B39; color: #f8f8f8; }

.os-panel.danger .os-panel-header-control:hover { -webkit-box-shadow: 1px 1px 1px 1px #c23321; box-shadow: 1px 1px 1px 1px #c23321; }

.os-panel.warning { border-color: #F39C12; -webkit-box-shadow: 1px 1px 1px soften(#F39C12, 5%); box-shadow: 1px 1px 1px soften(#F39C12, 5%); }

.os-panel.warning .os-panel-header, .os-panel.warning .os-panel-footer { border-color: #F39C12; background-color: #F39C12; color: #f8f8f8; }

.os-panel.warning .os-panel-header-control:hover { -webkit-box-shadow: 1px 1px 1px 1px #c87f0a; box-shadow: 1px 1px 1px 1px #c87f0a; }

.os-panel.info { border-color: #7bcaf8; -webkit-box-shadow: 1px 1px 1px #63c0f7; box-shadow: 1px 1px 1px #63c0f7; }

.os-panel.info .os-panel-header, .os-panel.info .os-panel-footer { border-color: #7bcaf8; background-color: #7bcaf8; color: #03283e; }

.os-panel.info .os-panel-header-control:hover { -webkit-box-shadow: 1px 1px 1px 1px #4bb7f5; box-shadow: 1px 1px 1px 1px #4bb7f5; }

.os-panel.success { border-color: #00A65A; -webkit-box-shadow: 1px 1px 1px #008d4c; box-shadow: 1px 1px 1px #008d4c; }

.os-panel.success .os-panel-header, .os-panel.success .os-panel-footer { border-color: #00A65A; background-color: #00A65A; color: #f8f8f8; }

.os-panel.success .os-panel-header-control:hover { -webkit-box-shadow: 1px 1px 1px 1px #00733e; box-shadow: 1px 1px 1px 1px #00733e; }

.os-panel.tertiary { border-color: #001F3F; }

.os-panel.tertiary .os-panel-header, .os-panel.tertiary .os-panel-footer { border-color: #001F3F; background-color: #001F3F; color: #f8f8f8; }

.os-panel.tertiary .os-panel-header-control:hover { -webkit-box-shadow: 1px 1px 1px 1px #00060c; box-shadow: 1px 1px 1px 1px #00060c; }

.section { border-bottom: 1px solid #3C8DBC; }

/*
    <ul>
        <li>
            <div> ... [header] ... </div>
            <div> ... [collapsed] ... </div>
        </li>

    </ul>

*/
*.os-accordion.edge > * > div:first-child { border-bottom: 1px solid #FF851B; }

.os-notification > div { border: 1px solid #cbd6e3; }

.os-notification > div.primary { background-color: #3C8DBC; color: #ECE6DB; border-color: #307095; }

.os-notification > div.success { background-color: #00A65A; color: #f8f8f8; border-color: #00733e; }

.os-notification > div.danger { background-color: #DD4B39; color: #f8f8f8; border-color: #c23321; }

.os-notification > div.warning { background-color: #F39C12; color: #f8f8f8; border-color: #c87f0a; }

.os-notification > div.info { background-color: #7bcaf8; color: #03283e; border-color: #4bb7f5; }

.os-notify { border: 1px solid #cbd6e3; }

.os-notify.primary { background-color: #acd0e5; color: #3C8DBC; border-color: #307095; }

.os-notify.success { background-color: #40ffa8; color: #00733e; border-color: #00733e; }

.os-notify.danger { background-color: #f3c2bc; color: #DD4B39; border-color: #c23321; }

.os-notify.warning { background-color: #fad9a4; color: #F39C12; border-color: #c87f0a; }

.os-notify.info { background-color: white; color: #7bcaf8; border-color: #4bb7f5; }

/* The modal's background */
.os-modal { background-color: rgba(0, 0, 0, 0.4); }

/* The modal box */
.os-modal-dialog { background-color: #ECF0F5; border: 1px solid #cbd6e3; -webkit-box-shadow: 1px 1px 8px 0px #192330, -1px -1px 5px 0px #2b3c51; box-shadow: 1px 1px 8px 0px #192330, -1px -1px 5px 0px #2b3c51; /* The .os-footer */ /* The button used to close the modal */ }

.os-modal-dialog .os-header { background-color: #dbe3ec; color: #555; }

.os-modal-dialog > .os-footer { border-top: 1px solid #cbd6e3; }

.os-modal-dialog .os-close { color: #555; }

.os-modal-dialog .os-close:hover, .os-modal-dialog .os-close:focus { background-color: #DD4B39; color: #f8f8f8; }

.os-modal-dialog.primary .os-header { background-color: #3C8DBC; color: #ECE6DB; }

.os-modal-dialog.primary .os-close * { background-color: #3C8DBC; color: #ECE6DB; }

.os-modal-dialog.secondary .os-header { background-color: #FF851B; color: #f8f8f8; }

.os-modal-dialog.secondary .os-close * { background-color: #FF851B; color: #f8f8f8; }

.os-modal-dialog.tertiary .os-header { background-color: #001F3F; color: #f8f8f8; }

.os-modal-dialog.tertiary .os-close * { background-color: #001F3F; color: #f8f8f8; }

.os-modal-dialog.dark .os-header { background-color: #1a1b36; color: #FFE4A5; }

.os-modal-dialog.dark .os-close * { background-color: #1a1b36; color: #FFE4A5; }

.os-modal-dialog.success .os-header { background-color: #00A65A; color: #f8f8f8; }

.os-modal-dialog.success .os-close * { background-color: #00A65A; color: #f8f8f8; }

.os-modal-dialog.danger .os-header { background-color: #DD4B39; color: #f8f8f8; }

.os-modal-dialog.danger .os-close * { background-color: #DD4B39; color: #f8f8f8; }

.os-modal-dialog.warning .os-header { background-color: #F39C12; color: #f8f8f8; }

.os-modal-dialog.warning .os-header .os-close * { background-color: #F39C12; color: #f8f8f8; }

.os-modal-dialog.info .os-header { background-color: #7bcaf8; color: #03283e; }

.os-modal-dialog.info .os-header .os-close * { background-color: #7bcaf8; color: #03283e; }

table, .table { border-color: #bac8db; }

table thead, .table thead { border-color: #bac8db; border: 0.0625rem solid #dbe3ec; }

table tbody, .table tbody { border-color: #bac8db; }

table th, .table th { background: #bac8db; color: #555; border-color: #bac8db; }

table td, .table td { background: #ecf0f5; color: #555; border-top: 0.0625rem solid #bac8db; border-color: #bac8db; }

table td.stack, .table td.stack { background-color: #bac8db; font-weight: bold; border-color: #98aec9; }

table td.stack *, .table td.stack * { font-weight: normal; }

table.striped tr:nth-of-type(2n) > td, .table.striped tr:nth-of-type(2n) > td { background: #e2e8f0; }

table.striped tr:nth-of-type(2n) > td.stack, .table.striped tr:nth-of-type(2n) > td.stack { background-color: #bac8db; font-weight: bold; border-color: #98aec9; }

table.striped tr:nth-of-type(2n) > td.stack *, .table.striped tr:nth-of-type(2n) > td.stack * { font-weight: normal; }

table.hoverable tr:hover, table.hoverable tr:focus, .table.hoverable tr:hover, .table.hoverable tr:focus { background: #dbe3ec; }

table.hoverable tr:hover > td, table.hoverable tr:focus > td, .table.hoverable tr:hover > td, .table.hoverable tr:focus > td { background: #dbe3ec; }

table.hoverable tr:hover > td.stack, table.hoverable tr:focus > td.stack, .table.hoverable tr:hover > td.stack, .table.hoverable tr:focus > td.stack { background-color: #bac8db; font-weight: bold; border-color: #98aec9; }

table.hoverable tr:hover > td.stack *, table.hoverable tr:focus > td.stack *, .table.hoverable tr:hover > td.stack *, .table.hoverable tr:focus > td.stack * { font-weight: normal; }

table.horizontal tbody tr:last-child td, .table.horizontal tbody tr:last-child td { border-right: 0.0625rem solid #bac8db; }

table.horizontal th, .table.horizontal th { border-bottom: 0.0625rem solid #bac8db; border-left: 0.0625rem solid #bac8db; border-right: 0.0625rem solid #dbe3ec; }

table.horizontal th:first-child, .table.horizontal th:first-child { border-top: 0.0625rem solid #bac8db; }

table.horizontal td, .table.horizontal td { border-bottom: 0.0625rem solid #bac8db; }

table.horizontal td:first-child, .table.horizontal td:first-child { border-top: 0.0625rem solid #bac8db; }

table.dark thead, .table.dark thead { border-color: #1a1b36; }

table.dark th, .table.dark th { background-color: #1a1b36; color: #FFE4A5; border-color: #1a1b36; }

table.primary thead, .table.primary thead { border-color: #3C8DBC; }

table.primary th, .table.primary th { background-color: #3C8DBC; color: #ECE6DB; border-color: #3C8DBC; }

table.secondary thead, .table.secondary thead { border-color: #FF851B; }

table.secondary th, .table.secondary th { background-color: #FF851B; color: #f8f8f8; border-color: #FF851B; }

table.tertiary thead, .table.tertiary thead { border-color: #001F3F; }

table.tertiary th, .table.tertiary th { background-color: #001F3F; color: #f8f8f8; border-color: #001F3F; }

table.success thead, .table.success thead { border-color: #00A65A; }

table.success th, .table.success th { background-color: #00A65A; color: #f8f8f8; border-color: #00A65A; }

table.danger thead, .table.danger thead { border-color: #DD4B39; }

table.danger th, .table.danger th { background-color: #DD4B39; color: #f8f8f8; border-color: #DD4B39; }

table.warning thead, .table.warning thead { border-color: #F39C12; }

table.warning th, .table.warning th { background-color: #F39C12; color: #f8f8f8; border-color: #F39C12; }

table.info thead, .table.info thead { border-color: #7bcaf8; }

table.info th, .table.info th { background-color: #7bcaf8; color: #03283e; border-color: #7bcaf8; }

@media screen and (max-width: 360px) { table tr, table.horizontal tr { border: 0.0625rem solid #bac8db; background: #fafafa; } }

.pagination ul li > * { color: #555; background-color: #ECF0F5; border: 1px solid #cbd6e3; }

.pagination ul li > *:hover { color: #555555; background-color: #cbd6e3; border-color: #a9bbd2; }

.pagination ul li.active > * { color: #ECF0F5; background-color: #555; border-color: #a9bbd2; }

.pagination ul li.disabled > * { color: #6c757d; background-color: #fff; border-color: #dee2e6; }

.pagination *:nth-child(2) { color: #555; }

.pagination.dark ul li > * { color: #1a1b36; }

.pagination.dark ul li > *:hover { color: #1a1b36; }

.pagination.dark ul li.active > * { color: #FFE4A5; background-color: #1a1b36; border-color: #090a14; }

.pagination.primary ul li > * { color: #3C8DBC; }

.pagination.primary ul li > *:hover { color: #3c8dbc; }

.pagination.primary ul li.active > * { color: #ECE6DB; background-color: #3C8DBC; border-color: #307095; }

.pagination.secondary ul li > * { color: #FF851B; }

.pagination.secondary ul li > *:hover { color: #ff851b; }

.pagination.secondary ul li.active > * { color: #f8f8f8; background-color: #FF851B; border-color: #e76b00; }

.pagination.tertiary ul li > * { color: #001F3F; }

.pagination.tertiary ul li > *:hover { color: #001f3f; }

.pagination.tertiary ul li.active > * { color: #f8f8f8; background-color: #001F3F; border-color: #00060c; }

.pagination.success ul li > * { color: #00A65A; }

.pagination.success ul li > *:hover { color: #00a65a; }

.pagination.success ul li.active > * { color: #f8f8f8; background-color: #00A65A; border-color: #00733e; }

.pagination.danger ul li > * { color: #DD4B39; }

.pagination.danger ul li > *:hover { color: #dd4b39; }

.pagination.danger ul li.active > * { color: #f8f8f8; background-color: #DD4B39; border-color: #c23321; }

.pagination.warning ul li > * { color: #F39C12; }

.pagination.warning ul li > *:hover { color: #f39c12; }

.pagination.warning ul li.active > * { color: #f8f8f8; background-color: #F39C12; border-color: #c87f0a; }

.pagination.info ul li > * { color: #7bcaf8; }

.pagination.info ul li > *:hover { color: #7bcaf8; }

.pagination.info ul li.active > * { color: #03283e; background-color: #7bcaf8; border-color: #4bb7f5; }

.os-tabs.dark > ul { border-color: #cbd6e3; }

.os-tabs.dark > ul li { border-color: #cbd6e3; }

.os-tabs.dark > ul li:hover { color: #FFE4A5; background-color: #1a1b36; }

.os-tabs.dark > ul li.active { color: #1a1b36; border-color: #1a1b36; }

.os-tabs.dark > ul li.active:hover { color: #FFE4A5; }

.os-tabs.primary > ul { border-color: #cbd6e3; }

.os-tabs.primary > ul li { border-color: #cbd6e3; }

.os-tabs.primary > ul li:hover { color: #ECE6DB; background-color: #3C8DBC; }

.os-tabs.primary > ul li.active { color: #3C8DBC; border-color: #3C8DBC; }

.os-tabs.primary > ul li.active:hover { color: #ECE6DB; }

.os-tabs.secondary > ul { border-color: #cbd6e3; }

.os-tabs.secondary > ul li { border-color: #cbd6e3; }

.os-tabs.secondary > ul li:hover { color: #f8f8f8; background-color: #FF851B; }

.os-tabs.secondary > ul li.active { color: #FF851B; border-color: #FF851B; }

.os-tabs.secondary > ul li.active:hover { color: #f8f8f8; }

.os-tabs.tertiary > ul { border-color: #cbd6e3; }

.os-tabs.tertiary > ul li { border-color: #cbd6e3; }

.os-tabs.tertiary > ul li:hover { color: #f8f8f8; background-color: #001F3F; }

.os-tabs.tertiary > ul li.active { color: #001F3F; border-color: #001F3F; }

.os-tabs.tertiary > ul li.active:hover { color: #f8f8f8; }

.os-tabs.top > ul:first-child { border-bottom: 2px solid #a9bbd2; }

.os-tabs.top > ul:first-child li { border-bottom: 2px solid #a9bbd2; }

.os-tabs.top > ul:first-child li.active { border-bottom: 2px solid #ff851b; color: #ff851b; }

.os-tabs.bottom > ul:first-child { border-top: 2px solid #a9bbd2; }

.os-tabs.bottom > ul:first-child li { border-top: 2px solid #a9bbd2; }

.os-tabs.bottom > ul:first-child li.active { border-top: 2px solid #ff851b; color: #ff851b; }

.os-tabs.left > ul:first-child { border-right: 2px solid #a9bbd2; }

.os-tabs.left > ul:first-child li { border-right: 2px solid #a9bbd2; }

.os-tabs.left > ul:first-child li.active { border-right: 2px solid #ff851b; color: #ff851b; }

.os-tabs.right > ul:first-child { border-left: 2px solid #a9bbd2; }

.os-tabs.right > ul:first-child li { border-left: 2px solid #a9bbd2; }

.os-tabs.right > ul:first-child li.active { border-left: 2px solid #ff851b; color: #ff851b; }

.os-sidenav > ul:first-child li:hover { color: #fff3d8; }

.os-sidenav > ul:first-child li.active { color: #fff3d8; background-color: #121225; }

.os-sidenav > ul:nth-child(2) { background-color: #121225; }

.os-sidenav > ul:nth-child(2) > li a { color: #FFE4A5; }

.os-sidenav > ul:nth-child(2) > li .collapsible.active { border-bottom: 1px solid #FF851B; }

.os-sidenav > ul:nth-child(2) > li .collapse-target a { border: 1px solid #121225; color: #FFE4A5 !important; }

.os-sidenav > ul:nth-child(2) > li .collapse-target a:hover { border: 1px solid #FF851B; }

.os-sidenav > ul:nth-child(2) > li .collapse-target a.active { background-color: #FF851B; border: 1px solid #FF851B; color: #FFE4A5 !important; }

/* Definitions for forms and input elements. */
form.hover .group:hover, .form.hover .group:hover { background-color: #cbd6e3; }

input:not([type]), [type="text"], [type="email"], [type="number"], [type="search"], [type="password"], [type="url"], [type="tel"], [type="checkbox"], [type="radio"], [type="datetime"], [type="date"], [type="time"], textarea, select, .input, .select, .os-multiselect, .os-listbox { background: #ffffff; color: #555; border: 0.0625rem solid #cbd6e3; border-radius: 0.25rem; }

input:not([type]):hover, input:not([type]):focus, [type="text"]:hover, [type="text"]:focus, [type="email"]:hover, [type="email"]:focus, [type="number"]:hover, [type="number"]:focus, [type="search"]:hover, [type="search"]:focus, [type="password"]:hover, [type="password"]:focus, [type="url"]:hover, [type="url"]:focus, [type="tel"]:hover, [type="tel"]:focus, [type="checkbox"]:hover, [type="checkbox"]:focus, [type="radio"]:hover, [type="radio"]:focus, [type="datetime"]:hover, [type="datetime"]:focus, [type="date"]:hover, [type="date"]:focus, [type="time"]:hover, [type="time"]:focus, textarea:hover, textarea:focus, select:hover, select:focus, .input:hover, .input:focus, .select:hover, .select:focus, .os-multiselect:hover, .os-multiselect:focus, .os-listbox:hover, .os-listbox:focus { border-color: #0288d1; }

input:not([type]):invalid, input:not([type]).invalid:focus, [type="text"]:invalid, [type="text"].invalid:focus, [type="email"]:invalid, [type="email"].invalid:focus, [type="number"]:invalid, [type="number"].invalid:focus, [type="search"]:invalid, [type="search"].invalid:focus, [type="password"]:invalid, [type="password"].invalid:focus, [type="url"]:invalid, [type="url"].invalid:focus, [type="tel"]:invalid, [type="tel"].invalid:focus, [type="checkbox"]:invalid, [type="checkbox"].invalid:focus, [type="radio"]:invalid, [type="radio"].invalid:focus, [type="datetime"]:invalid, [type="datetime"].invalid:focus, [type="date"]:invalid, [type="date"].invalid:focus, [type="time"]:invalid, [type="time"].invalid:focus, textarea:invalid, textarea.invalid:focus, select:invalid, select.invalid:focus, .input:invalid, .input.invalid:focus, .select:invalid, .select.invalid:focus, .os-multiselect:invalid, .os-multiselect.invalid:focus, .os-listbox:invalid, .os-listbox.invalid:focus { border-color: red; }

input:not([type])[readonly], [type="text"][readonly], [type="email"][readonly], [type="number"][readonly], [type="search"][readonly], [type="password"][readonly], [type="url"][readonly], [type="tel"][readonly], [type="checkbox"][readonly], [type="radio"][readonly], [type="datetime"][readonly], [type="date"][readonly], [type="time"][readonly], textarea[readonly], select[readonly], .input[readonly], .select[readonly], .os-multiselect[readonly], .os-listbox[readonly] { background: #c6c6c6; }

[type="radio"]:checked:before { background: #555; }

:placeholder-shown { color: #555; }

::-ms-placeholder { color: #555; }

.os-multiselect > div:first-child { border-bottom: 1px solid #cbd6e3; }

.os-multiselect > div:nth-child(2) > div:hover { background-color: #3C8DBC; color: #ECE6DB; }

.os-listbox > div:first-child > div:hover { background-color: #cbd6e3; }

.os-listbox > div:first-child > div.selected { background-color: #3C8DBC; color: #ECE6DB; }

.select-wrapper ul { background: #ffffff; color: #555; border: 0.0625rem solid #cbd6e3; border-radius: 0.25rem; -webkit-box-shadow: 2px 2px #cbd6e3; box-shadow: 2px 2px #cbd6e3; border-top: none; }

.select-wrapper ul li { color: #555; }

.select-wrapper ul li a { color: #555; }

.select-wrapper ul li:hover, .select-wrapper ul li.selected { background-color: #3C8DBC; color: #ECE6DB; }

.select-wrapper ul li:hover a, .select-wrapper ul li.selected a { color: #ECE6DB; }

.select-wrapper:hover ul, .select-wrapper:hover .select { border-color: #0288d1; }

/* button */
button, [type="button"], [type="submit"], [type="reset"], a.button, label.button, .button, a[role="button"], label[role="button"], [role="button"] { background: #e2e2e2; color: #212121; border: 0.0625rem solid #c9c9c9; border-radius: 0.25rem; }

button:hover, button:focus, [type="button"]:hover, [type="button"]:focus, [type="submit"]:hover, [type="submit"]:focus, [type="reset"]:hover, [type="reset"]:focus, a.button:hover, a.button:focus, label.button:hover, label.button:focus, .button:hover, .button:focus, a[role="button"]:hover, a[role="button"]:focus, label[role="button"]:hover, label[role="button"]:focus, [role="button"]:hover, [role="button"]:focus { background-color: #d5d5d5; -webkit-box-shadow: 0px 0px 2px 2px white; box-shadow: 0px 0px 2px 2px white; }

button.outline, [type="button"].outline, [type="submit"].outline, [type="reset"].outline, a.button.outline, label.button.outline, .button.outline, a[role="button"].outline, label[role="button"].outline, [role="button"].outline { background-color: #212121; color: #e2e2e2; }

button.outline:hover, button.outline:focus, [type="button"].outline:hover, [type="button"].outline:focus, [type="submit"].outline:hover, [type="submit"].outline:focus, [type="reset"].outline:hover, [type="reset"].outline:focus, a.button.outline:hover, a.button.outline:focus, label.button.outline:hover, label.button.outline:focus, .button.outline:hover, .button.outline:focus, a[role="button"].outline:hover, a[role="button"].outline:focus, label[role="button"].outline:hover, label[role="button"].outline:focus, [role="button"].outline:hover, [role="button"].outline:focus { background-color: #141414; }

button.primary, [type="button"].primary, [type="submit"].primary, [type="reset"].primary, a.button.primary, label.button.primary, .button.primary, a[role="button"].primary, label[role="button"].primary, [role="button"].primary { background-color: #3C8DBC; color: #ECE6DB; border-color: #307095; }

button.primary:hover, button.primary:focus, [type="button"].primary:hover, [type="button"].primary:focus, [type="submit"].primary:hover, [type="submit"].primary:focus, [type="reset"].primary:hover, [type="reset"].primary:focus, a.button.primary:hover, a.button.primary:focus, label.button.primary:hover, label.button.primary:focus, .button.primary:hover, .button.primary:focus, a[role="button"].primary:hover, a[role="button"].primary:focus, label[role="button"].primary:hover, label[role="button"].primary:focus, [role="button"].primary:hover, [role="button"].primary:focus { background-color: #367fa9; }

button.primary.outline, [type="button"].primary.outline, [type="submit"].primary.outline, [type="reset"].primary.outline, a.button.primary.outline, label.button.primary.outline, .button.primary.outline, a[role="button"].primary.outline, label[role="button"].primary.outline, [role="button"].primary.outline { background-color: #ECE6DB; color: #3C8DBC; }

button.primary.outline:hover, button.primary.outline:focus, [type="button"].primary.outline:hover, [type="button"].primary.outline:focus, [type="submit"].primary.outline:hover, [type="submit"].primary.outline:focus, [type="reset"].primary.outline:hover, [type="reset"].primary.outline:focus, a.button.primary.outline:hover, a.button.primary.outline:focus, label.button.primary.outline:hover, label.button.primary.outline:focus, .button.primary.outline:hover, .button.primary.outline:focus, a[role="button"].primary.outline:hover, a[role="button"].primary.outline:focus, label[role="button"].primary.outline:hover, label[role="button"].primary.outline:focus, [role="button"].primary.outline:hover, [role="button"].primary.outline:focus { background-color: #3C8DBC; color: #ECE6DB; }

button.primary:hover, button.primary:focus, [type="button"].primary:hover, [type="button"].primary:focus, [type="submit"].primary:hover, [type="submit"].primary:focus, [type="reset"].primary:hover, [type="reset"].primary:focus, a.button.primary:hover, a.button.primary:focus, label.button.primary:hover, label.button.primary:focus, .button.primary:hover, .button.primary:focus, a[role="button"].primary:hover, a[role="button"].primary:focus, label[role="button"].primary:hover, label[role="button"].primary:focus, [role="button"].primary:hover, [role="button"].primary:focus { -webkit-box-shadow: 0px 0px 2px 2px #99c5de; box-shadow: 0px 0px 2px 2px #99c5de; }

button.secondary, [type="button"].secondary, [type="submit"].secondary, [type="reset"].secondary, a.button.secondary, label.button.secondary, .button.secondary, a[role="button"].secondary, label[role="button"].secondary, [role="button"].secondary { background-color: #FF851B; color: #f8f8f8; border-color: #e76b00; }

button.secondary:hover, button.secondary:focus, [type="button"].secondary:hover, [type="button"].secondary:focus, [type="submit"].secondary:hover, [type="submit"].secondary:focus, [type="reset"].secondary:hover, [type="reset"].secondary:focus, a.button.secondary:hover, a.button.secondary:focus, label.button.secondary:hover, label.button.secondary:focus, .button.secondary:hover, .button.secondary:focus, a[role="button"].secondary:hover, a[role="button"].secondary:focus, label[role="button"].secondary:hover, label[role="button"].secondary:focus, [role="button"].secondary:hover, [role="button"].secondary:focus { background-color: #ff7702; }

button.secondary.outline, [type="button"].secondary.outline, [type="submit"].secondary.outline, [type="reset"].secondary.outline, a.button.secondary.outline, label.button.secondary.outline, .button.secondary.outline, a[role="button"].secondary.outline, label[role="button"].secondary.outline, [role="button"].secondary.outline { background-color: #f8f8f8; color: #FF851B; }

button.secondary.outline:hover, button.secondary.outline:focus, [type="button"].secondary.outline:hover, [type="button"].secondary.outline:focus, [type="submit"].secondary.outline:hover, [type="submit"].secondary.outline:focus, [type="reset"].secondary.outline:hover, [type="reset"].secondary.outline:focus, a.button.secondary.outline:hover, a.button.secondary.outline:focus, label.button.secondary.outline:hover, label.button.secondary.outline:focus, .button.secondary.outline:hover, .button.secondary.outline:focus, a[role="button"].secondary.outline:hover, a[role="button"].secondary.outline:focus, label[role="button"].secondary.outline:hover, label[role="button"].secondary.outline:focus, [role="button"].secondary.outline:hover, [role="button"].secondary.outline:focus { background-color: #FF851B; color: #f8f8f8; }

button.secondary:hover, button.secondary:focus, [type="button"].secondary:hover, [type="button"].secondary:focus, [type="submit"].secondary:hover, [type="submit"].secondary:focus, [type="reset"].secondary:hover, [type="reset"].secondary:focus, a.button.secondary:hover, a.button.secondary:focus, label.button.secondary:hover, label.button.secondary:focus, .button.secondary:hover, .button.secondary:focus, a[role="button"].secondary:hover, a[role="button"].secondary:focus, label[role="button"].secondary:hover, label[role="button"].secondary:focus, [role="button"].secondary:hover, [role="button"].secondary:focus { -webkit-box-shadow: 0px 0px 2px 2px #ffc99b; box-shadow: 0px 0px 2px 2px #ffc99b; }

button.teritary, [type="button"].teritary, [type="submit"].teritary, [type="reset"].teritary, a.button.teritary, label.button.teritary, .button.teritary, a[role="button"].teritary, label[role="button"].teritary, [role="button"].teritary { background-color: #001F3F; color: #f8f8f8; border-color: #00060c; }

button.teritary:hover, button.teritary:focus, [type="button"].teritary:hover, [type="button"].teritary:focus, [type="submit"].teritary:hover, [type="submit"].teritary:focus, [type="reset"].teritary:hover, [type="reset"].teritary:focus, a.button.teritary:hover, a.button.teritary:focus, label.button.teritary:hover, label.button.teritary:focus, .button.teritary:hover, .button.teritary:focus, a[role="button"].teritary:hover, a[role="button"].teritary:focus, label[role="button"].teritary:hover, label[role="button"].teritary:focus, [role="button"].teritary:hover, [role="button"].teritary:focus { background-color: #001226; }

button.teritary.outline, [type="button"].teritary.outline, [type="submit"].teritary.outline, [type="reset"].teritary.outline, a.button.teritary.outline, label.button.teritary.outline, .button.teritary.outline, a[role="button"].teritary.outline, label[role="button"].teritary.outline, [role="button"].teritary.outline { background-color: #f8f8f8; color: #001F3F; }

button.teritary.outline:hover, button.teritary.outline:focus, [type="button"].teritary.outline:hover, [type="button"].teritary.outline:focus, [type="submit"].teritary.outline:hover, [type="submit"].teritary.outline:focus, [type="reset"].teritary.outline:hover, [type="reset"].teritary.outline:focus, a.button.teritary.outline:hover, a.button.teritary.outline:focus, label.button.teritary.outline:hover, label.button.teritary.outline:focus, .button.teritary.outline:hover, .button.teritary.outline:focus, a[role="button"].teritary.outline:hover, a[role="button"].teritary.outline:focus, label[role="button"].teritary.outline:hover, label[role="button"].teritary.outline:focus, [role="button"].teritary.outline:hover, [role="button"].teritary.outline:focus { background-color: #001F3F; color: #f8f8f8; }

button.teritary:hover, button.teritary:focus, [type="button"].teritary:hover, [type="button"].teritary:focus, [type="submit"].teritary:hover, [type="submit"].teritary:focus, [type="reset"].teritary:hover, [type="reset"].teritary:focus, a.button.teritary:hover, a.button.teritary:focus, label.button.teritary:hover, label.button.teritary:focus, .button.teritary:hover, .button.teritary:focus, a[role="button"].teritary:hover, a[role="button"].teritary:focus, label[role="button"].teritary:hover, label[role="button"].teritary:focus, [role="button"].teritary:hover, [role="button"].teritary:focus { -webkit-box-shadow: 0px 0px 2px 2px #005ebf; box-shadow: 0px 0px 2px 2px #005ebf; }

button.danger, [type="button"].danger, [type="submit"].danger, [type="reset"].danger, a.button.danger, label.button.danger, .button.danger, a[role="button"].danger, label[role="button"].danger, [role="button"].danger { background-color: #DD4B39; color: #f8f8f8; border-color: #c23321; }

button.danger:hover, button.danger:focus, [type="button"].danger:hover, [type="button"].danger:focus, [type="submit"].danger:hover, [type="submit"].danger:focus, [type="reset"].danger:hover, [type="reset"].danger:focus, a.button.danger:hover, a.button.danger:focus, label.button.danger:hover, label.button.danger:focus, .button.danger:hover, .button.danger:focus, a[role="button"].danger:hover, a[role="button"].danger:focus, label[role="button"].danger:hover, label[role="button"].danger:focus, [role="button"].danger:hover, [role="button"].danger:focus { background-color: #d73925; }

button.danger.outline, [type="button"].danger.outline, [type="submit"].danger.outline, [type="reset"].danger.outline, a.button.danger.outline, label.button.danger.outline, .button.danger.outline, a[role="button"].danger.outline, label[role="button"].danger.outline, [role="button"].danger.outline { background-color: #f8f8f8; color: #DD4B39; }

button.danger.outline:hover, button.danger.outline:focus, [type="button"].danger.outline:hover, [type="button"].danger.outline:focus, [type="submit"].danger.outline:hover, [type="submit"].danger.outline:focus, [type="reset"].danger.outline:hover, [type="reset"].danger.outline:focus, a.button.danger.outline:hover, a.button.danger.outline:focus, label.button.danger.outline:hover, label.button.danger.outline:focus, .button.danger.outline:hover, .button.danger.outline:focus, a[role="button"].danger.outline:hover, a[role="button"].danger.outline:focus, label[role="button"].danger.outline:hover, label[role="button"].danger.outline:focus, [role="button"].danger.outline:hover, [role="button"].danger.outline:focus { background-color: #DD4B39; color: #f8f8f8; }

button.danger:hover, button.danger:focus, [type="button"].danger:hover, [type="button"].danger:focus, [type="submit"].danger:hover, [type="submit"].danger:focus, [type="reset"].danger:hover, [type="reset"].danger:focus, a.button.danger:hover, a.button.danger:focus, label.button.danger:hover, label.button.danger:focus, .button.danger:hover, .button.danger:focus, a[role="button"].danger:hover, a[role="button"].danger:focus, label[role="button"].danger:hover, label[role="button"].danger:focus, [role="button"].danger:hover, [role="button"].danger:focus { -webkit-box-shadow: 0px 0px 2px 2px #f0aea6; box-shadow: 0px 0px 2px 2px #f0aea6; }

button.warning, [type="button"].warning, [type="submit"].warning, [type="reset"].warning, a.button.warning, label.button.warning, .button.warning, a[role="button"].warning, label[role="button"].warning, [role="button"].warning { background-color: #F39C12; color: #f8f8f8; border-color: #c87f0a; }

button.warning:hover, button.warning:focus, [type="button"].warning:hover, [type="button"].warning:focus, [type="submit"].warning:hover, [type="submit"].warning:focus, [type="reset"].warning:hover, [type="reset"].warning:focus, a.button.warning:hover, a.button.warning:focus, label.button.warning:hover, label.button.warning:focus, .button.warning:hover, .button.warning:focus, a[role="button"].warning:hover, a[role="button"].warning:focus, label[role="button"].warning:hover, label[role="button"].warning:focus, [role="button"].warning:hover, [role="button"].warning:focus { background-color: #e08e0b; }

button.warning.outline, [type="button"].warning.outline, [type="submit"].warning.outline, [type="reset"].warning.outline, a.button.warning.outline, label.button.warning.outline, .button.warning.outline, a[role="button"].warning.outline, label[role="button"].warning.outline, [role="button"].warning.outline { background-color: #f8f8f8; color: #F39C12; }

button.warning.outline:hover, button.warning.outline:focus, [type="button"].warning.outline:hover, [type="button"].warning.outline:focus, [type="submit"].warning.outline:hover, [type="submit"].warning.outline:focus, [type="reset"].warning.outline:hover, [type="reset"].warning.outline:focus, a.button.warning.outline:hover, a.button.warning.outline:focus, label.button.warning.outline:hover, label.button.warning.outline:focus, .button.warning.outline:hover, .button.warning.outline:focus, a[role="button"].warning.outline:hover, a[role="button"].warning.outline:focus, label[role="button"].warning.outline:hover, label[role="button"].warning.outline:focus, [role="button"].warning.outline:hover, [role="button"].warning.outline:focus { background-color: #F39C12; color: #f8f8f8; }

button.warning:hover, button.warning:focus, [type="button"].warning:hover, [type="button"].warning:focus, [type="submit"].warning:hover, [type="submit"].warning:focus, [type="reset"].warning:hover, [type="reset"].warning:focus, a.button.warning:hover, a.button.warning:focus, label.button.warning:hover, label.button.warning:focus, .button.warning:hover, .button.warning:focus, a[role="button"].warning:hover, a[role="button"].warning:focus, label[role="button"].warning:hover, label[role="button"].warning:focus, [role="button"].warning:hover, [role="button"].warning:focus { -webkit-box-shadow: 0px 0px 2px 2px #f9cf8b; box-shadow: 0px 0px 2px 2px #f9cf8b; }

button.info, [type="button"].info, [type="submit"].info, [type="reset"].info, a.button.info, label.button.info, .button.info, a[role="button"].info, label[role="button"].info, [role="button"].info { background-color: #7bcaf8; color: #03283e; border-color: #4bb7f5; }

button.info:hover, button.info:focus, [type="button"].info:hover, [type="button"].info:focus, [type="submit"].info:hover, [type="submit"].info:focus, [type="reset"].info:hover, [type="reset"].info:focus, a.button.info:hover, a.button.info:focus, label.button.info:hover, label.button.info:focus, .button.info:hover, .button.info:focus, a[role="button"].info:hover, a[role="button"].info:focus, label[role="button"].info:hover, label[role="button"].info:focus, [role="button"].info:hover, [role="button"].info:focus { background-color: #63c0f7; }

button.info.outline, [type="button"].info.outline, [type="submit"].info.outline, [type="reset"].info.outline, a.button.info.outline, label.button.info.outline, .button.info.outline, a[role="button"].info.outline, label[role="button"].info.outline, [role="button"].info.outline { background-color: #03283e; color: #7bcaf8; }

button.info.outline:hover, button.info.outline:focus, [type="button"].info.outline:hover, [type="button"].info.outline:focus, [type="submit"].info.outline:hover, [type="submit"].info.outline:focus, [type="reset"].info.outline:hover, [type="reset"].info.outline:focus, a.button.info.outline:hover, a.button.info.outline:focus, label.button.info.outline:hover, label.button.info.outline:focus, .button.info.outline:hover, .button.info.outline:focus, a[role="button"].info.outline:hover, a[role="button"].info.outline:focus, label[role="button"].info.outline:hover, label[role="button"].info.outline:focus, [role="button"].info.outline:hover, [role="button"].info.outline:focus { background-color: #7bcaf8; color: #03283e; }

button.info:hover, button.info:focus, [type="button"].info:hover, [type="button"].info:focus, [type="submit"].info:hover, [type="submit"].info:focus, [type="reset"].info:hover, [type="reset"].info:focus, a.button.info:hover, a.button.info:focus, label.button.info:hover, label.button.info:focus, .button.info:hover, .button.info:focus, a[role="button"].info:hover, a[role="button"].info:focus, label[role="button"].info:hover, label[role="button"].info:focus, [role="button"].info:hover, [role="button"].info:focus { -webkit-box-shadow: 0px 0px 2px 2px #f4fbfe; box-shadow: 0px 0px 2px 2px #f4fbfe; }

button.success, [type="button"].success, [type="submit"].success, [type="reset"].success, a.button.success, label.button.success, .button.success, a[role="button"].success, label[role="button"].success, [role="button"].success { background-color: #00A65A; color: #f8f8f8; border-color: #00733e; }

button.success:hover, button.success:focus, [type="button"].success:hover, [type="button"].success:focus, [type="submit"].success:hover, [type="submit"].success:focus, [type="reset"].success:hover, [type="reset"].success:focus, a.button.success:hover, a.button.success:focus, label.button.success:hover, label.button.success:focus, .button.success:hover, .button.success:focus, a[role="button"].success:hover, a[role="button"].success:focus, label[role="button"].success:hover, label[role="button"].success:focus, [role="button"].success:hover, [role="button"].success:focus { background-color: #008d4c; }

button.success.outline, [type="button"].success.outline, [type="submit"].success.outline, [type="reset"].success.outline, a.button.success.outline, label.button.success.outline, .button.success.outline, a[role="button"].success.outline, label[role="button"].success.outline, [role="button"].success.outline { background-color: #f8f8f8; color: #00A65A; }

button.success.outline:hover, button.success.outline:focus, [type="button"].success.outline:hover, [type="button"].success.outline:focus, [type="submit"].success.outline:hover, [type="submit"].success.outline:focus, [type="reset"].success.outline:hover, [type="reset"].success.outline:focus, a.button.success.outline:hover, a.button.success.outline:focus, label.button.success.outline:hover, label.button.success.outline:focus, .button.success.outline:hover, .button.success.outline:focus, a[role="button"].success.outline:hover, a[role="button"].success.outline:focus, label[role="button"].success.outline:hover, label[role="button"].success.outline:focus, [role="button"].success.outline:hover, [role="button"].success.outline:focus { background-color: #00A65A; color: #f8f8f8; }

button.success:hover, button.success:focus, [type="button"].success:hover, [type="button"].success:focus, [type="submit"].success:hover, [type="submit"].success:focus, [type="reset"].success:hover, [type="reset"].success:focus, a.button.success:hover, a.button.success:focus, label.button.success:hover, label.button.success:focus, .button.success:hover, .button.success:focus, a[role="button"].success:hover, a[role="button"].success:focus, label[role="button"].success:hover, label[role="button"].success:focus, [role="button"].success:hover, [role="button"].success:focus { -webkit-box-shadow: 0px 0px 2px 2px #27ff9c; box-shadow: 0px 0px 2px 2px #27ff9c; }

a.link.danger { color: #DD4B39; }

a.link.primary { color: #3C8DBC; }

a.link.secondary { color: #FF851B; }

a.link.success { color: #00A65A; }

a.link.warning { color: #F39C12; }

a.link.info { color: #7bcaf8; }

.button-group.bordered { border: 0.0625rem solid rgba(124, 124, 124, 0.54); border-radius: 0.25rem; }

fieldset, .fieldset { border: 0.0625rem solid #cbd6e3; border-radius: 0.25rem; }

.os-multiple-selector > ul { background: #ffffff; color: #555; border: 0.0625rem solid #cbd6e3; border-color: #cbd6e3; }

.os-multiple-selector > ul li:hover { background-color: #3C8DBC; color: #ECE6DB; }

.os-dropdown ul { background-color: #ECF0F5; -webkit-box-shadow: 1px 1px 2px 1px #a9bbd2; box-shadow: 1px 1px 2px 1px #a9bbd2; }

.os-dropdown ul li { color: #555; }

.os-dropdown ul li a { color: #555; }

.os-dropdown ul li:hover { background-color: #3C8DBC; color: #ECE6DB; }

.os-dropdown ul li:hover a { color: #ECE6DB; }

.os-dropdown:hover { -webkit-box-shadow: 1px 1px 1px 1px #a9bbd2; box-shadow: 1px 1px 1px 1px #a9bbd2; }

.os-dropdown:hover div { -webkit-box-shadow: none; box-shadow: none; }

.os-dropdown:hover ul { -webkit-box-shadow: 1px 1px 2px 1px #a9bbd2; box-shadow: 1px 1px 2px 1px #a9bbd2; }

.os-dropdown:hover ul * { -webkit-box-shadow: none; box-shadow: none; }

.os-tabmenu.dark { background-color: #1a1b36; }

.os-tabmenu.dark > ul li { color: #FFE4A5; }

.os-tabmenu.dark > ul li:hover { background-color: #0e0f1e; opacity: 50%; }

.os-tabmenu.dark > ul li.active { color: #fff3d8; background-color: #121225; }

.os-tabmenu.dark > div { color: #FFE4A5; background-color: #121225; }

.os-tabmenu.primary { background-color: #3C8DBC; }

.os-tabmenu.primary > ul li { color: #ECE6DB; }

.os-tabmenu.primary > ul li:hover { background-color: #3379a1; opacity: 50%; }

.os-tabmenu.primary > ul li.active { color: #fefdfc; background-color: #367fa9; }

.os-tabmenu.primary > div { color: #ECE6DB; background-color: #367fa9; }

.os-tabmenu.secondary { background-color: #FF851B; }

.os-tabmenu.secondary > ul li { color: #f8f8f8; }

.os-tabmenu.secondary > ul li:hover { background-color: #f67300; opacity: 50%; }

.os-tabmenu.secondary > ul li.active { color: white; background-color: #ff7702; }

.os-tabmenu.secondary > div { color: #f8f8f8; background-color: #ff7702; }

.os-tabmenu.tertiary { background-color: #001F3F; }

.os-tabmenu.tertiary > ul li { color: #f8f8f8; }

.os-tabmenu.tertiary > ul li:hover { background-color: #000d1b; opacity: 50%; }

.os-tabmenu.tertiary > ul li.active { color: white; background-color: #001226; }

.os-tabmenu.tertiary > div { color: #f8f8f8; background-color: #001226; }

.os-tabmenu.top > ul li.active { color: #ff851b; }

.os-tabmenu.bottom > ul li.active { color: #ff851b; }

.os-tabmenu.left > ul li.active { color: #ff851b; }

.os-tabmenu.right > ul li.active { color: #ff851b; }

/*
    <ul>
        <li>
            <div> ... [header] ... </div>
            <div> ... [collapsed] ... </div>
        </li>

    </ul>

*/
.os-accordion-menu.dark { color: #FFE4A5; }

.os-accordion-menu.dark > li > div:first-child, .os-accordion-menu.dark > li > div:first-child * { color: #FFE4A5; }

.os-accordion-menu.dark > li > div:first-child:hover, .os-accordion-menu.dark > li > div:first-child:hover *, .os-accordion-menu.dark > li > div:first-child *:hover, .os-accordion-menu.dark > li > div:first-child *:hover * { background-color: #2b2c58; }

.os-accordion-menu.dark > li.active > div:first-child, .os-accordion-menu.dark > li.active > div:first-child * { color: #FFE4A5; background-color: #1a1b36; }

.os-accordion-menu.dark.inverse { color: #1a1b36; }

.os-accordion-menu.dark.inverse > * > *:first-child, .os-accordion-menu.dark.inverse > * > *:first-child * { color: #1a1b36; }

.os-accordion-menu.dark.inverse > * > *:first-child:hover, .os-accordion-menu.dark.inverse > * > *:first-child:hover *, .os-accordion-menu.dark.inverse > * > *:first-child *:hover, .os-accordion-menu.dark.inverse > * > *:first-child *:hover * { color: #FFE4A5; background-color: #2b2c58; }

.os-accordion-menu.dark.inverse > * > *:nth-child(2) { border-color: #FFE4A5; }

.os-accordion-menu.dark.inverse > *.active > *:first-child, .os-accordion-menu.dark.inverse > *.active > *:first-child * { color: #FFE4A5; background-color: #1a1b36; }

.os-accordion-menu.primary { color: #ECE6DB; }

.os-accordion-menu.primary > li > div:first-child, .os-accordion-menu.primary > li > div:first-child * { color: #ECE6DB; }

.os-accordion-menu.primary > li > div:first-child:hover, .os-accordion-menu.primary > li > div:first-child:hover *, .os-accordion-menu.primary > li > div:first-child *:hover, .os-accordion-menu.primary > li > div:first-child *:hover * { background-color: #5fa4cc; }

.os-accordion-menu.primary > li.active > div:first-child, .os-accordion-menu.primary > li.active > div:first-child * { color: #ECE6DB; background-color: #3C8DBC; }

.os-accordion-menu.primary.inverse { color: #3C8DBC; }

.os-accordion-menu.primary.inverse > * > *:first-child, .os-accordion-menu.primary.inverse > * > *:first-child * { color: #3C8DBC; }

.os-accordion-menu.primary.inverse > * > *:first-child:hover, .os-accordion-menu.primary.inverse > * > *:first-child:hover *, .os-accordion-menu.primary.inverse > * > *:first-child *:hover, .os-accordion-menu.primary.inverse > * > *:first-child *:hover * { color: #ECE6DB; background-color: #5fa4cc; }

.os-accordion-menu.primary.inverse > * > *:nth-child(2) { border-color: #ECE6DB; }

.os-accordion-menu.primary.inverse > *.active > *:first-child, .os-accordion-menu.primary.inverse > *.active > *:first-child * { color: #ECE6DB; background-color: #3C8DBC; }

.os-accordion-menu.secondary { color: #f8f8f8; }

.os-accordion-menu.secondary > li > div:first-child, .os-accordion-menu.secondary > li > div:first-child * { color: #f8f8f8; }

.os-accordion-menu.secondary > li > div:first-child:hover, .os-accordion-menu.secondary > li > div:first-child:hover *, .os-accordion-menu.secondary > li > div:first-child *:hover, .os-accordion-menu.secondary > li > div:first-child *:hover * { background-color: #ffa04e; }

.os-accordion-menu.secondary > li.active > div:first-child, .os-accordion-menu.secondary > li.active > div:first-child * { color: #f8f8f8; background-color: #FF851B; }

.os-accordion-menu.secondary.inverse { color: #FF851B; }

.os-accordion-menu.secondary.inverse > * > *:first-child, .os-accordion-menu.secondary.inverse > * > *:first-child * { color: #FF851B; }

.os-accordion-menu.secondary.inverse > * > *:first-child:hover, .os-accordion-menu.secondary.inverse > * > *:first-child:hover *, .os-accordion-menu.secondary.inverse > * > *:first-child *:hover, .os-accordion-menu.secondary.inverse > * > *:first-child *:hover * { color: #f8f8f8; background-color: #ffa04e; }

.os-accordion-menu.secondary.inverse > * > *:nth-child(2) { border-color: #f8f8f8; }

.os-accordion-menu.secondary.inverse > *.active > *:first-child, .os-accordion-menu.secondary.inverse > *.active > *:first-child * { color: #f8f8f8; background-color: #FF851B; }

.os-accordion-menu.tertiary { color: #f8f8f8; }

.os-accordion-menu.tertiary > li > div:first-child, .os-accordion-menu.tertiary > li > div:first-child * { color: #f8f8f8; }

.os-accordion-menu.tertiary > li > div:first-child:hover, .os-accordion-menu.tertiary > li > div:first-child:hover *, .os-accordion-menu.tertiary > li > div:first-child *:hover, .os-accordion-menu.tertiary > li > div:first-child *:hover * { background-color: #003872; }

.os-accordion-menu.tertiary > li.active > div:first-child, .os-accordion-menu.tertiary > li.active > div:first-child * { color: #f8f8f8; background-color: #001F3F; }

.os-accordion-menu.tertiary.inverse { color: #001F3F; }

.os-accordion-menu.tertiary.inverse > * > *:first-child, .os-accordion-menu.tertiary.inverse > * > *:first-child * { color: #001F3F; }

.os-accordion-menu.tertiary.inverse > * > *:first-child:hover, .os-accordion-menu.tertiary.inverse > * > *:first-child:hover *, .os-accordion-menu.tertiary.inverse > * > *:first-child *:hover, .os-accordion-menu.tertiary.inverse > * > *:first-child *:hover * { color: #f8f8f8; background-color: #003872; }

.os-accordion-menu.tertiary.inverse > * > *:nth-child(2) { border-color: #f8f8f8; }

.os-accordion-menu.tertiary.inverse > *.active > *:first-child, .os-accordion-menu.tertiary.inverse > *.active > *:first-child * { color: #f8f8f8; background-color: #001F3F; }

.os-gauge-radial label { color: #ECF0F5; }

.os-gauge-radial .rotator::before { background: -webkit-gradient(linear, left top, right top, color-stop(20%, #6686af), to(#ECF0F5)); background: linear-gradient(to right, #6686af 20%, #ECF0F5 100%); }

.os-gauge-radial .rotator .cursor { background: -webkit-gradient(linear, left top, right top, from(#3f110b), to(#DD4B39)); background: linear-gradient(to right, #3f110b 0%, #DD4B39 100%); }

.os-gauge-arc .first { background: -webkit-gradient(linear, left top, right top, from(green), color-stop(70%, orange), to(red)); background: linear-gradient(to right, green 0%, orange 70%, red 100%); }

.os-gauge-arc .second { background: #dbe3ec; border: 1px solid #dbe3ec; }

.os-gauge-arc .theird { background: #ECF0F5; }

.os-gauge-arc.to-danger .first { background: -webkit-gradient(linear, left top, right top, from(#00A65A), color-stop(50%, #F39C12), to(#DD4B39)); background: linear-gradient(to right, #00A65A 0%, #F39C12 50%, #DD4B39 100%); }

.os-gauge-arc.to-success .first { background: -webkit-gradient(linear, left top, right top, from(#DD4B39), color-stop(40%, #F39C12), color-stop(80%, #00A65A)); background: linear-gradient(to right, #DD4B39 0%, #F39C12 40%, #00A65A 80%); }

.os-gauge-arc.primary .first { background: #3C8DBC; }

.os-gauge-arc.secondary .first { background: #FF851B; }

.os-gauge-arc.tertiary .first { background: #001F3F; }

.os-gauge-arc.success .first { background: #00A65A; }

.os-gauge-arc.danger .first { background: #DD4B39; }

.os-gauge-arc.warning .first { background: #F39C12; }

.os-gauge-arc.info .first { background: #7bcaf8; }

.os-gauge-pie .inner { background: #ECF0F5; }

.os-icon.hover:hover { -webkit-box-shadow: 1px 1px 2px 1px #7794b7; box-shadow: 1px 1px 2px 1px #7794b7; }

.os-icon.default { color: #555; }

.os-icon.primary { color: #3C8DBC; }

.os-icon.secondary { color: #FF851B; }

.os-icon.tertiary { color: #001F3F; }

.os-icon.success { color: #00A65A; }

.os-icon.danger { color: #DD4B39; }

.os-icon.warning { color: #F39C12; }

.os-icon.info { color: #7bcaf8; }

.os-dd-dragged-over { background-color: #cbd6e3; opacity: 0.6; -webkit-animation: blinker 1s linear infinite; animation: blinker 1s linear infinite; }

.os-dd-dragged-over > div { background-color: #cbd6e3; opacity: 0.6; -webkit-animation: blinker 1s linear infinite; animation: blinker 1s linear infinite; }

.os-dd-dragged-over-denied { background-color: #DD4B39; opacity: 0.6; -webkit-animation: blinker 1s linear infinite; animation: blinker 1s linear infinite; }

.os-flex .os-dd-dragged-over { background-color: #cbd6e3; opacity: 0.6; -webkit-animation: blinker 1s linear infinite; animation: blinker 1s linear infinite; }

.os-flex .os-dd-dragged-over > div { background-color: #cbd6e3; opacity: 0.9; -webkit-animation: blinker 1s linear infinite; animation: blinker 1s linear infinite; }

.os-flex .os-dd-in-transit { background-color: #F39C12; }

.os-flex .os-dd-in-transit > div { background-color: #F39C12; }

/* LIVE CALL SLIDER */
.live-call { background-color: #ECF0F5; border-color: #888; -webkit-box-shadow: 0 0 0.75em 0 #888; box-shadow: 0 0 0.75em 0 #888; }

.live-call-head { border-bottom: thin solid #888; background: #888; color: white; }

.live-call-head-toggle { background: #888; }

.live-call-head-toggle:hover { background: #a2a2a2; }

.live-call-closer:hover { background: #800; }

.live-call-body { color: #555; background: #ECF0F5; }

.live-call-foot { background: #ECF0F5; }

/* Definitions for utilities and helper classes. */
/* Utility module CSS variable definitions */
.bordered { border-color: #bac8db; }

.color-default { color: #555; }

.color-primary { color: #3C8DBC; }

.color-secondary { color: #FF851B; }

.color-tertiary { color: #001F3F; }

.color-success { color: #00A65A; }

.color-danger { color: #DD4B39; }

.color-info { color: #7bcaf8; }

.color-warning { color: #F39C12; }

.backcolor-primary { background-color: #3C8DBC; color: #ECE6DB; }

.backcolor-secondary { background-color: #FF851B; color: #f8f8f8; }

.backcolor-tertiary { background-color: #001F3F; color: #f8f8f8; }

.backcolor-success { background-color: #00A65A; color: #f8f8f8; }

.backcolor-danger { background-color: #DD4B39; color: #f8f8f8; }

.backcolor-info { background-color: #7bcaf8; color: #03283e; }

.backcolor-warning { background-color: #F39C12; color: #f8f8f8; }

.border-primary { border-color: #3C8DBC; }

.border-secondary { border-color: #FF851B; }

.border-tertiary { border-color: #001F3F; }

.border-success { border-color: #00A65A; }

.border-danger { border-color: #DD4B39; }

.border-info { border-color: #7bcaf8; }

.border-warning { border-color: #F39C12; }