@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%;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  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.00533921rem;
}

h2 {
  font-size: 1.685159rem;
}

h3 {
  font-size: 1.4161rem;
}

h4 {
  font-size: 1.19rem;
}

h5 {
  font-size: 1rem;
}

h6 {
  font-size: 0.8403361345rem;
}

p {
  margin: 0.5rem;
}

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

b,
strong,
.bold,
.strong {
  font-weight: 700;
}

hr {
  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: "“";
}
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,
.small,
sup,
sub,
figcaption {
  font-size: 0.85rem;
}

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;
}

:root {
  --full-side-width: 300px;
  --mini-side-width: 70px;
  --header-height: 50px;
  --trans-speed: .1s;
}

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

/* sidebar */
.os-sidebar {
  position: fixed;
  left: 0;
  top: 0;
  width: 300px;
  max-width: 100%;
  height: 100vh;
  padding: 0;
  margin: 0;
  z-index: 99;
  display: flex;
  flex-direction: column;
}
.os-sidebar > .os-header {
  width: 300px;
  height: 50px;
  padding: 0 !important;
  justify-items: center;
  align-self: center;
}
.os-sidebar > .os-body {
  flex: 1;
  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: flex;
  flex-direction: column;
}
.os-content > .os-header {
  position: fixed !important;
  top: 0;
  height: 50px;
  left: 300px;
  right: 0 !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 99;
}
.os-content > .os-header > .brand {
  justify-self: left;
  font-size: 1.5rem;
  font-weight: bold;
}
.os-content > .os-header > .menu {
  justify-self: right;
  align-self: right;
  display: flex;
}
.os-content > .os-body {
  width: 99.5% !important;
  flex: 1;
  padding-top: 60px;
}
.os-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
  grid-gap: 1rem;
}

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

.content {
  padding: 0.5rem;
}

/* full / mini sidebar */
.logo-full {
  display: block !important;
  height: var(--header-height);
  width: var(--full-side-width);
}

.logo-mini {
  display: none !important;
  height: var(--header-height);
  width: var(--mini-side-width);
}

.menu-mini {
  display: none !important;
}

.menu-full {
  display: block !important;
}

@media screen and (max-width: 918px) {
  .os-sidebar {
    font-size: 90%;
    width: var(--mini-side-width);
    transition: width var(--trans-speed);
  }
  .os-sidebar > .os-header {
    width: var(--mini-side-width);
    justify-items: center;
    align-self: center;
    transition: width var(--trans-speed);
  }
  .os-sidebar:hover {
    z-index: 104;
    float: left;
    width: var(--full-side-width);
    max-width: 100%;
  }
  .os-sidebar:hover > .os-header {
    width: var(--full-side-width);
    max-width: 100%;
  }
  .os-sidebar:hover .logo-mini,
  .os-sidebar:hover .menu-mini {
    display: none !important;
  }
  .os-sidebar:hover .logo-full,
  .os-sidebar:hover .menu-full {
    display: block !important;
  }
  .os-content {
    padding-left: var(--mini-side-width);
  }
  .os-header {
    left: var(--mini-side-width) !important;
  }
  .logo-full,
  .menu-full {
    display: none !important;
  }
  .logo-mini,
  .menu-mini {
    display: block !important;
  }
}
.os-container.mini-sidenav .os-sidebar {
  font-size: 90%;
  width: var(--mini-side-width);
  transition: width var(--trans-speed);
}
.os-container.mini-sidenav .os-sidebar > .os-header {
  width: var(--mini-side-width);
  justify-items: center;
  align-self: center;
  transition: width var(--trans-speed);
}
.os-container.mini-sidenav .os-sidebar:hover {
  z-index: 104;
  float: left;
  width: var(--full-side-width);
  max-width: 100%;
}
.os-container.mini-sidenav .os-sidebar:hover > .os-header {
  width: var(--full-side-width);
  max-width: 100%;
}
.os-container.mini-sidenav .os-sidebar:hover .logo-mini,
.os-container.mini-sidenav .os-sidebar:hover .menu-mini {
  display: none !important;
}
.os-container.mini-sidenav .os-sidebar:hover .logo-full,
.os-container.mini-sidenav .os-sidebar:hover .menu-full {
  display: block !important;
}
.os-container.mini-sidenav .os-content {
  padding-left: var(--mini-side-width);
}
.os-container.mini-sidenav .os-header {
  left: var(--mini-side-width) !important;
}
.os-container.mini-sidenav .logo-full,
.os-container.mini-sidenav .menu-full {
  display: none !important;
}
.os-container.mini-sidenav .logo-mini,
.os-container.mini-sidenav .menu-mini {
  display: block !important;
}

.row {
  display: flex;
  flex: 0 1 auto;
  flex-flow: row wrap;
}
.row > * {
  padding: 0 0.25rem;
}
.row .col,
.row .col-sm, .row.cols, .row.cols-sm > * {
  max-width: 100%;
  flex-grow: 1;
  flex-basis: 0;
}
.row .col-1,
.row .col-sm-1, .row.cols-1 > *, .row.cols-sm-1 > * {
  max-width: 8.3333333333%;
  flex-basis: 8.3333333333%;
}
.row .col-offset-1,
.row .col-sm-offset-1 {
  margin-left: 8.3333333333%;
}
.row .col-md-1,
.row .col-lg-1, .row.cols-md-1 > *, .row.cols-lg-1 > * {
  width: 100%;
  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.6666666667%;
  flex-basis: 16.6666666667%;
}
.row .col-offset-2,
.row .col-sm-offset-2 {
  margin-left: 16.6666666667%;
}
.row .col-md-2,
.row .col-lg-2, .row.cols-md-2 > *, .row.cols-lg-2 > * {
  width: 100%;
  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%;
  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%;
  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.3333333333%;
  flex-basis: 33.3333333333%;
}
.row .col-offset-4,
.row .col-sm-offset-4 {
  margin-left: 33.3333333333%;
}
.row .col-md-4,
.row .col-lg-4, .row.cols-md-4 > *, .row.cols-lg-4 > * {
  width: 100%;
  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.6666666667%;
  flex-basis: 41.6666666667%;
}
.row .col-offset-5,
.row .col-sm-offset-5 {
  margin-left: 41.6666666667%;
}
.row .col-md-5,
.row .col-lg-5, .row.cols-md-5 > *, .row.cols-lg-5 > * {
  width: 100%;
  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%;
  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%;
  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.3333333333%;
  flex-basis: 58.3333333333%;
}
.row .col-offset-7,
.row .col-sm-offset-7 {
  margin-left: 58.3333333333%;
}
.row .col-md-7,
.row .col-lg-7, .row.cols-md-7 > *, .row.cols-lg-7 > * {
  width: 100%;
  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.6666666667%;
  flex-basis: 66.6666666667%;
}
.row .col-offset-8,
.row .col-sm-offset-8 {
  margin-left: 66.6666666667%;
}
.row .col-md-8,
.row .col-lg-8, .row.cols-md-8 > *, .row.cols-lg-8 > * {
  width: 100%;
  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%;
  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%;
  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.3333333333%;
  flex-basis: 83.3333333333%;
}
.row .col-offset-10,
.row .col-sm-offset-10 {
  margin-left: 83.3333333333%;
}
.row .col-md-10,
.row .col-lg-10, .row.cols-md-10 > *, .row.cols-lg-10 > * {
  width: 100%;
  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.6666666667%;
  flex-basis: 91.6666666667%;
}
.row .col-offset-11,
.row .col-sm-offset-11 {
  margin-left: 91.6666666667%;
}
.row .col-md-11,
.row .col-lg-11, .row.cols-md-11 > *, .row.cols-lg-11 > * {
  width: 100%;
  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%;
  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%;
  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%;
    flex-grow: 1;
    flex-basis: 0;
  }
  .row .col-md-1, .row.cols-md-1 > * {
    max-width: 8.3333333333%;
    flex-basis: 8.3333333333%;
  }
  .row .col-md-offset-1 {
    margin-left: 8.3333333333%;
  }
  .row .col-lg-1, .row.cols-lg-1 > * {
    width: 100%;
    flex-grow: 1;
  }
  .row .col-lg-offset-1 {
    margin-left: 0;
  }
  .row .col-md-2, .row.cols-md-2 > * {
    max-width: 16.6666666667%;
    flex-basis: 16.6666666667%;
  }
  .row .col-md-offset-2 {
    margin-left: 16.6666666667%;
  }
  .row .col-lg-2, .row.cols-lg-2 > * {
    width: 100%;
    flex-grow: 1;
  }
  .row .col-lg-offset-2 {
    margin-left: 0;
  }
  .row .col-md-3, .row.cols-md-3 > * {
    max-width: 25%;
    flex-basis: 25%;
  }
  .row .col-md-offset-3 {
    margin-left: 25%;
  }
  .row .col-lg-3, .row.cols-lg-3 > * {
    width: 100%;
    flex-grow: 1;
  }
  .row .col-lg-offset-3 {
    margin-left: 0;
  }
  .row .col-md-4, .row.cols-md-4 > * {
    max-width: 33.3333333333%;
    flex-basis: 33.3333333333%;
  }
  .row .col-md-offset-4 {
    margin-left: 33.3333333333%;
  }
  .row .col-lg-4, .row.cols-lg-4 > * {
    width: 100%;
    flex-grow: 1;
  }
  .row .col-lg-offset-4 {
    margin-left: 0;
  }
  .row .col-md-5, .row.cols-md-5 > * {
    max-width: 41.6666666667%;
    flex-basis: 41.6666666667%;
  }
  .row .col-md-offset-5 {
    margin-left: 41.6666666667%;
  }
  .row .col-lg-5, .row.cols-lg-5 > * {
    width: 100%;
    flex-grow: 1;
  }
  .row .col-lg-offset-5 {
    margin-left: 0;
  }
  .row .col-md-6, .row.cols-md-6 > * {
    max-width: 50%;
    flex-basis: 50%;
  }
  .row .col-md-offset-6 {
    margin-left: 50%;
  }
  .row .col-lg-6, .row.cols-lg-6 > * {
    width: 100%;
    flex-grow: 1;
  }
  .row .col-lg-offset-6 {
    margin-left: 0;
  }
  .row .col-md-7, .row.cols-md-7 > * {
    max-width: 58.3333333333%;
    flex-basis: 58.3333333333%;
  }
  .row .col-md-offset-7 {
    margin-left: 58.3333333333%;
  }
  .row .col-lg-7, .row.cols-lg-7 > * {
    width: 100%;
    flex-grow: 1;
  }
  .row .col-lg-offset-7 {
    margin-left: 0;
  }
  .row .col-md-8, .row.cols-md-8 > * {
    max-width: 66.6666666667%;
    flex-basis: 66.6666666667%;
  }
  .row .col-md-offset-8 {
    margin-left: 66.6666666667%;
  }
  .row .col-lg-8, .row.cols-lg-8 > * {
    width: 100%;
    flex-grow: 1;
  }
  .row .col-lg-offset-8 {
    margin-left: 0;
  }
  .row .col-md-9, .row.cols-md-9 > * {
    max-width: 75%;
    flex-basis: 75%;
  }
  .row .col-md-offset-9 {
    margin-left: 75%;
  }
  .row .col-lg-9, .row.cols-lg-9 > * {
    width: 100%;
    flex-grow: 1;
  }
  .row .col-lg-offset-9 {
    margin-left: 0;
  }
  .row .col-md-10, .row.cols-md-10 > * {
    max-width: 83.3333333333%;
    flex-basis: 83.3333333333%;
  }
  .row .col-md-offset-10 {
    margin-left: 83.3333333333%;
  }
  .row .col-lg-10, .row.cols-lg-10 > * {
    width: 100%;
    flex-grow: 1;
  }
  .row .col-lg-offset-10 {
    margin-left: 0;
  }
  .row .col-md-11, .row.cols-md-11 > * {
    max-width: 91.6666666667%;
    flex-basis: 91.6666666667%;
  }
  .row .col-md-offset-11 {
    margin-left: 91.6666666667%;
  }
  .row .col-lg-11, .row.cols-lg-11 > * {
    width: 100%;
    flex-grow: 1;
  }
  .row .col-lg-offset-11 {
    margin-left: 0;
  }
  .row .col-md-12, .row.cols-md-12 > * {
    max-width: 100%;
    flex-basis: 100%;
  }
  .row .col-md-offset-12 {
    margin-left: 100%;
  }
  .row .col-lg-12, .row.cols-lg-12 > * {
    width: 100%;
    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%;
    flex-grow: 1;
    flex-basis: 0;
  }
  .row .col-lg-1, .row.cols-lg-1 > * {
    max-width: 8.3333333333%;
    flex-basis: 8.3333333333%;
  }
  .row .col-lg-offset-1 {
    margin-left: 8.3333333333%;
  }
  .row .col-lg-2, .row.cols-lg-2 > * {
    max-width: 16.6666666667%;
    flex-basis: 16.6666666667%;
  }
  .row .col-lg-offset-2 {
    margin-left: 16.6666666667%;
  }
  .row .col-lg-3, .row.cols-lg-3 > * {
    max-width: 25%;
    flex-basis: 25%;
  }
  .row .col-lg-offset-3 {
    margin-left: 25%;
  }
  .row .col-lg-4, .row.cols-lg-4 > * {
    max-width: 33.3333333333%;
    flex-basis: 33.3333333333%;
  }
  .row .col-lg-offset-4 {
    margin-left: 33.3333333333%;
  }
  .row .col-lg-5, .row.cols-lg-5 > * {
    max-width: 41.6666666667%;
    flex-basis: 41.6666666667%;
  }
  .row .col-lg-offset-5 {
    margin-left: 41.6666666667%;
  }
  .row .col-lg-6, .row.cols-lg-6 > * {
    max-width: 50%;
    flex-basis: 50%;
  }
  .row .col-lg-offset-6 {
    margin-left: 50%;
  }
  .row .col-lg-7, .row.cols-lg-7 > * {
    max-width: 58.3333333333%;
    flex-basis: 58.3333333333%;
  }
  .row .col-lg-offset-7 {
    margin-left: 58.3333333333%;
  }
  .row .col-lg-8, .row.cols-lg-8 > * {
    max-width: 66.6666666667%;
    flex-basis: 66.6666666667%;
  }
  .row .col-lg-offset-8 {
    margin-left: 66.6666666667%;
  }
  .row .col-lg-9, .row.cols-lg-9 > * {
    max-width: 75%;
    flex-basis: 75%;
  }
  .row .col-lg-offset-9 {
    margin-left: 75%;
  }
  .row .col-lg-10, .row.cols-lg-10 > * {
    max-width: 83.3333333333%;
    flex-basis: 83.3333333333%;
  }
  .row .col-lg-offset-10 {
    margin-left: 83.3333333333%;
  }
  .row .col-lg-11, .row.cols-lg-11 > * {
    max-width: 91.6666666667%;
    flex-basis: 91.6666666667%;
  }
  .row .col-lg-offset-11 {
    margin-left: 91.6666666667%;
  }
  .row .col-lg-12, .row.cols-lg-12 > * {
    max-width: 100%;
    flex-basis: 100%;
  }
  .row .col-lg-offset-12 {
    margin-left: 100%;
  }
}

/* Card component CSS variable definitions */
.card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  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 {
  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- {
  color: red;
  transform: none;
}
.tooltip- .tooltip-text {
  display: block;
  position: absolute;
  pointer-events: none;
  opacity: 0;
  color: #fff;
  background: #000;
}
.tooltip- .tooltip-text::after {
  display: block;
  content: " ";
  position: absolute;
}
.tooltip-:hover .tooltip-text {
  pointer-events: auto;
  opacity: 1;
}

.ttp .ttp-text {
  visibility: hidden;
  position: absolute;
  font-size: 10px;
  font-weight: normal;
  text-align: left;
  padding: 0.5rem;
  border-radius: 5px;
  transition: all 0.2s ease-out;
  z-index: 9999;
}
.ttp .ttp-text.top {
  transform: translate(-50%, calc(-100% - 5px));
}
.ttp .ttp-text.bottom {
  transform: translate(-50%, calc(100% + 5px));
}
.ttp .ttp-text.right {
  transform: translateX(calc(100% + 5px));
}
.ttp .ttp-text.left {
  transform: translateX(calc(-100% - 5px));
}
.ttp:hover .ttp-text {
  visibility: visible;
}

/* Panel component CSS variable definitions */
.os-panel {
  display: flex;
  flex-direction: column;
  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: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
}
.os-panel .os-panel-header .os-panel-header-content {
  flex: 1;
}
.os-panel .os-panel-header .os-panel-header-control {
  cursor: pointer;
}
.os-panel .os-panel-body {
  padding: 0.5rem;
  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: 0.1em;
  padding-right: 0.1em;
  padding-left: 0;
  padding-top: 2em;
  border-bottom-width: 2px;
  border-bottom-style: solid;
  font-weight: bold;
  font-size: 0.97%;
}
.section lable {
  font-weight: bold;
  font-size: 0.97%;
}

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

    </ul>

*/
*.os-accordion {
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  list-style: none;
}
*.os-accordion > * > div:first-child {
  padding: 0.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: 0.5rem 0.8rem;
}
/* Add animation (Standard syntax) */
@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: flex;
  flex-direction: column;
  justify-content: flex-start;
  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: 0.25em;
  cursor: pointer;
  height: auto;
  animation-name: example;
  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: flex;
  justify-content: center;
  align-content: center;
  border-width: 1px;
  border-style: solid;
  border-radius: 0.25em;
  cursor: pointer;
  height: auto;
  animation-name: example;
  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-y: auto;
  z-index: 200;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.os-modal:target {
  display: flex;
}

/* The modal box */
.os-modal-dialog {
  display: flex;
  flex-direction: column;
  justify-content: stretch;
  margin: auto;
  padding: 0;
  border-radius: 0.5rem;
  animation-name: example;
  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: flex;
  justify-content: flex-start;
  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 {
  flex: 1;
}
.os-modal-dialog .os-header .os-close {
  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 {
  flex: 1;
  position: relative;
  padding: 0.5rem;
  overflow-y: auto;
}
.os-modal-dialog .os-footer {
  padding: 0.5rem;
  border-radius: 0 0 0.5rem 0.5rem;
  display: flex;
  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%;
  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: flex !important;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}
table th .th *:first-child,
.table th .th *:first-child {
  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%;
  flex: 0 0 100%;
}
table:not(.horizontal) tr,
.table:not(.horizontal) tr {
  flex-flow: row wrap;
  flex: 0 0 100%;
}
table:not(.horizontal) th,
table:not(.horizontal) td,
.table:not(.horizontal) th,
.table:not(.horizontal) td {
  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: 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;
  flex: 0.2 0 0;
  flex-flow: row nowrap;
}
table.horizontal tbody,
.table.horizontal tbody {
  overflow: auto;
  justify-content: space-between;
  flex: 0.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 {
  flex-direction: column;
  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 {
  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: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  border-style: none;
}
.pagination ul {
  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;
  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: grid;
  padding: 0.5rem;
}
.os-tabs > ul {
  grid-area: head;
  padding: 0.5rem;
  list-style: none;
  display: flex;
}
.os-tabs > ul li {
  display: grid;
  padding: 0.2em;
  cursor: pointer;
  justify-self: stretch;
  align-items: center;
  font-weight: bold;
}
.os-tabs > ul li > i {
  grid-area: icon;
}
.os-tabs > ul li > span {
  grid-area: text;
}
.os-tabs > div {
  grid-area: body;
  padding: 0.5em;
}
.os-tabs.tab-top {
  grid-template-rows: auto 1fr;
  grid-template-areas: "head" "body";
}
.os-tabs.tab-top > ul {
  flex-direction: row;
  flex-wrap: wrap;
  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 {
  grid-template-rows: auto 1fr;
  grid-template-areas: "body" "head";
}
.os-tabs.tab-bottom > ul {
  flex-direction: row;
  flex-wrap: wrap;
  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 {
  grid-template-columns: auto 1fr;
  grid-template-areas: "head body";
}
.os-tabs.tab-left > ul {
  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 {
  grid-template-columns: 1fr auto;
  grid-template-areas: "body head";
}
.os-tabs.tab-right > ul {
  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 {
  grid-template-rows: auto 1fr;
  grid-template-areas: "icon" "text";
  justify-items: center;
  row-gap: 0.5em;
}
.os-tabs.icon-bottom > ul li {
  grid-template-rows: 1fr auto;
  grid-template-areas: "text" "icon";
  justify-items: center;
  row-gap: 0.5em;
}
.os-tabs.icon-left > ul li {
  grid-template-columns: auto 1fr;
  grid-template-areas: "icon text";
  justify-items: start;
  -moz-column-gap: 0.5em;
       column-gap: 0.5em;
}
.os-tabs.icon-right > ul li {
  grid-template-columns: 1fr auto;
  grid-template-areas: "text icon";
  -moz-column-gap: 0.5em;
       column-gap: 0.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 {
  flex: 1;
  display: flex;
  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: flex;
  flex-direction: column;
  cursor: pointer;
  align-self: center;
  align-content: center;
  justify-content: center;
  text-align: center;
  padding: 0.5rem 0 !important;
  transition: all 0.3s;
}
.os-sidenav > ul:first-child li i {
  font-size: 200%;
  padding-bottom: 0.2rem;
}
.os-sidenav > ul:nth-child(2) {
  flex: 1;
  list-style: none;
  margin: 0 !important;
  font-size: 95%;
  font-weight: normal;
  padding: 0.5rem;
}
.os-sidenav > ul:nth-child(2) > li {
  display: none;
  transition: all 0.3s;
}
.os-sidenav > ul:nth-child(2) > li .collapsible {
  display: block;
  text-decoration: none;
  padding: 0.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: 0.5rem 0.8rem;
}
.os-sidenav > ul:nth-child(2) > li .collapse-target a {
  box-sizing: border-box;
  padding-left: 0.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: flex;
  flex-direction: column;
  align-items: stretch;
}
form .group.stacked > :first-child,
.form .group.stacked > :first-child {
  width: 100%;
  max-width: 100%;
  flex-grow: 1;
}
form .group.stacked > :nth-child(2),
.form .group.stacked > :nth-child(2) {
  max-width: 100%;
  width: 100%;
  flex-grow: 1;
}
@media screen and (min-width: 768px) {
  form .group.aligned,
  .form .group.aligned {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;
  }
  form .group.aligned > :first-child,
  .form .group.aligned > :first-child {
    padding-right: 0.5rem;
    text-align: left;
  }
  form .group.aligned > :nth-child(2),
  .form .group.aligned > :nth-child(2) {
    flex-grow: 1;
  }
  form .group.aligned > :nth-child(3),
  .form .group.aligned > :nth-child(3) {
    text-align: left;
    padding-left: 0.5rem;
    padding-top: 0.3em;
  }
}
@media screen and (max-width: 768px) {
  form .group.aligned,
  .form .group.aligned {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }
  form .group.aligned > :first-child,
  .form .group.aligned > :first-child {
    width: 100%;
    max-width: 100%;
    flex-grow: 1;
  }
  form .group.aligned > :nth-child(2),
  .form .group.aligned > :nth-child(2) {
    max-width: 100%;
    width: 100%;
    flex-grow: 1;
  }
}
form.stacked,
.form.stacked {
  width: 100%;
}
form.stacked .group,
.form.stacked .group {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
form.stacked .group > :first-child,
.form.stacked .group > :first-child {
  width: 100%;
  max-width: 100%;
  flex-grow: 1;
}
form.stacked .group > :nth-child(2),
.form.stacked .group > :nth-child(2) {
  max-width: 100%;
  width: 100%;
  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: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;
  }
  form.aligned .group > :first-child,
  .form.aligned .group > :first-child {
    padding-right: 0.5rem;
    text-align: left;
  }
  form.aligned .group > :nth-child(2),
  .form.aligned .group > :nth-child(2) {
    flex-grow: 1;
  }
  form.aligned .group > :nth-child(3),
  .form.aligned .group > :nth-child(3) {
    text-align: left;
    padding-left: 0.5rem;
    padding-top: 0.3em;
  }
}
@media screen and (max-width: 768px) {
  form.aligned .group,
  .form.aligned .group {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }
  form.aligned .group > :first-child,
  .form.aligned .group > :first-child {
    width: 100%;
    max-width: 100%;
    flex-grow: 1;
  }
  form.aligned .group > :nth-child(2),
  .form.aligned .group > :nth-child(2) {
    max-width: 100%;
    width: 100%;
    flex-grow: 1;
  }
}
@media screen and (min-width: 768px) {
  form.free .group > :first-child,
  .form.free .group > :first-child {
    flex-grow: unset;
  }
  form.free .group > :nth-child(2),
  .form.free .group > :nth-child(2) {
    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 {
    flex-grow: 1;
    max-width: 50%;
  }
  form.two .group > :nth-child(2),
  .form.two .group > :nth-child(2) {
    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: flex;
    flex-direction: column;
    align-items: stretch;
  }
  form.two .group > :first-child,
  .form.two .group > :first-child {
    width: 100%;
    max-width: 100%;
    flex-grow: 1;
  }
  form.two .group > :nth-child(2),
  .form.two .group > :nth-child(2) {
    max-width: 100%;
    width: 100%;
    flex-grow: 1;
  }
}
@media screen and (min-width: 768px) {
  form.three .group > :first-child,
  .form.three .group > :first-child {
    flex-grow: 1;
    max-width: 35%;
  }
  form.three .group > :nth-child(2),
  .form.three .group > :nth-child(2) {
    flex-grow: 1;
    max-width: 20%;
  }
  form.three .group > :nth-child(3),
  .form.three .group > :nth-child(3) {
    flex-grow: 1;
    max-width: 45%;
  }
}
@media screen and (max-width: 768px) {
  form.three .group,
  .form.three .group {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }
  form.three .group > :first-child,
  .form.three .group > :first-child {
    width: 100%;
    max-width: 100%;
    flex-grow: 1;
  }
  form.three .group > :nth-child(2),
  .form.three .group > :nth-child(2) {
    max-width: 100%;
    width: 100%;
    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: 0.05rem;
  padding-top: 0.05rem;
}
form.large input,
.form.large input {
  line-height: 2 !important;
}
form.large .input,
.form.large .input {
  min-height: 2em !important;
}
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: 0.5rem;
  padding-top: 0.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 {
  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 {
  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 {
  box-shadow: none;
}
form select,
form .select,
.form select,
.form .select {
  max-width: 100%;
  padding-top: 0.15rem;
  padding-bottom: 0.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: flex !important;
  flex-direction: column;
  padding: 0 !important;
}
.os-multiselect > div:first-child {
  padding: 0.5em;
  display: flex;
  align-items: center;
}
.os-multiselect > div:nth-child(2) {
  flex: 1;
  overflow: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}
.os-multiselect > div:nth-child(2) > div {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  padding: 0 0.5em;
  width: 100%;
}
.os-listbox {
  display: flex !important;
  flex-direction: column;
  padding: 0 !important;
}
.os-listbox > div:first-child {
  flex: 1;
  width: 100%;
  overflow: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}
.os-listbox > div:first-child > div {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  padding: 0 0.5em;
  width: 100%;
  cursor: pointer;
}
.os-listbox > div:first-child > div > *:first-child {
  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: flex;
  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: flex;
  flex-direction: row;
  justify-content: flex-start;
  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;
  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;
  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: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin: 0.5rem;
}
.button-group.bordered {
  border-radius: 0.25rem;
}
.button-group > *, .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%;
  flex: 0 1 auto;
  text-align: center;
  box-shadow: none;
}
.button-group.toolbar > * {
  margin: 0;
  border: 0;
  border-radius: 0;
}
.button-group.fill > * {
  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: 320px) {
  .button-group {
    flex-direction: column;
  }
}

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

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

.os-multiple-selector {
  display: flex;
  flex-direction: row;
}
.os-multiple-selector > ul {
  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;
  flex-grow: 1;
  min-width: 10em;
  display: flex;
  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: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0.5em;
}
.os-multiple-selector > :nth-child(2) button {
  margin: 0.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: flex;
  flex-direction: row;
  justify-content: flex-start;
  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;
}

.os-dropdownbutton {
  display: inline-block;
  z-index: 99;
}
.os-dropdownbutton button {
  cursor: pointer;
  margin: 0;
  margin-bottom: 0.2em;
}
.os-dropdownbutton ul {
  display: none;
  position: absolute;
  list-style: none;
  padding: 0 !important;
  margin: 0 !important;
}
.os-dropdownbutton ul li {
  padding: 0.25rem 0.5rem;
  display: block;
  cursor: pointer;
  white-space: nowrap;
}
.os-dropdownbutton ul li a {
  text-decoration: none;
}
.os-dropdownbutton.pop-right ul {
  right: 0;
}
.os-dropdownbutton.pop-right ul li {
  left: 0;
}
.os-dropdownbutton.pop-top ul {
  bottom: 2em;
}

/* 
    <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 {
  flex: 1;
  display: grid;
  width: 100%;
  height: 100%;
  padding: 0;
}
.os-tabmenu > ul {
  grid-area: head;
  padding: 0.5rem;
  list-style: none;
  padding: 0 !important;
  margin: 0 !important;
  display: flex;
}
.os-tabmenu > ul li {
  display: grid;
  cursor: pointer;
  justify-items: center;
  align-items: center;
  padding: 0.5rem !important;
  transition: all 0.3s;
}
.os-tabmenu > ul li > i {
  grid-area: icon;
}
.os-tabmenu > ul li > span {
  grid-area: text;
}
.os-tabmenu > div {
  grid-area: body;
  padding: 0.5em;
  font-weight: normal;
}
.os-tabmenu.tab-top {
  grid-template-rows: auto 1fr;
  grid-template-areas: "head" "body";
}
.os-tabmenu.tab-top > ul {
  flex-direction: row;
}
.os-tabmenu.tab-bottom {
  grid-template-rows: 1fr auto;
  grid-template-areas: "body" "head";
}
.os-tabmenu.tab-bottom > ul {
  flex-direction: row;
}
.os-tabmenu.tab-left {
  grid-template-columns: auto 1fr;
  grid-template-areas: "head body";
}
.os-tabmenu.tab-left > ul {
  flex-direction: column;
}
.os-tabmenu.tab-right {
  grid-template-columns: 1fr auto;
  grid-template-areas: "body head";
}
.os-tabmenu.tab-right > ul {
  flex-direction: column;
}
.os-tabmenu.icon-top > ul li {
  grid-template-rows: auto 1fr;
  grid-template-areas: "icon" "text";
  justify-items: center;
  text-align: center;
  row-gap: 0.5em;
}
.os-tabmenu.icon-bottom > ul li {
  grid-template-rows: 1fr auto;
  grid-template-areas: "text" "icon";
  justify-items: center;
  text-align: center;
  row-gap: 0.5em;
}
.os-tabmenu.icon-left > ul li {
  grid-template-columns: auto 1fr;
  grid-template-areas: "icon text";
  justify-items: start;
  text-align: left;
  -moz-column-gap: 0.5em;
       column-gap: 0.5em;
}
.os-tabmenu.icon-right > ul li {
  grid-template-columns: 1fr auto;
  grid-template-areas: "text icon";
  justify-items: end;
  text-align: right;
  -moz-column-gap: 0.5em;
       column-gap: 0.5em;
}

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

    </ul>

*/
ul.os-accordion-menu {
  padding: 0;
  margin: 0;
  display: flex;
  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: 0.25rem 0.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: 0.5rem;
  padding-left: 1.5rem;
  padding-top: 0;
  transition: all 0.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: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.os-gauge-wrapper .os-gauge-title {
  font-weight: bolder;
}

.os-gauge-radial {
  position: relative;
  width: 100%;
  display: flex;
  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: flex;
  justify-content: center;
  align-items: center;
  /* rotating */
  transform: rotate(40deg);
  transition: 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 {
  box-sizing: border-box;
  width: 100%;
  height: 0;
  padding-bottom: 50%;
  position: relative;
  overflow: hidden;
}
.os-gauge-arc .first {
  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 {
  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%;
  transform-origin: 50% 100%;
  transform: rotate(0deg);
  transition: 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: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-end;
}

.os-gauge-pie {
  box-sizing: border-box;
  width: 100%;
  height: 0;
  padding-top: 50%;
  padding-bottom: 50%;
  position: relative;
  overflow: hidden;
}
.os-gauge-pie .pie {
  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: flex;
  flex-direction: row;
  justify-content: 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: flex;
  flex-direction: row;
  align-items: stretch;
}

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

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

@keyframes blinker {
  50% {
    opacity: 0;
  }
}
.blink_me {
  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 */ /* Internet Explorer/Edge */
  user-select: none; /* Non-prefixed version, currently
         supported by Chrome, Edge, Opera and Firefox */
}

.live-calls {
  position: absolute;
  display: flex;
  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: 0.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: 0.3em;
  z-index: 1000000;
}

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

.live-call-shrink {
  /* height: var(--live-call-head-height); */
  height: 2.5em;
  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: flex;
  flex-direction: row;
}

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

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

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

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

.live-call-body-ivr {
  grid-area: ivr;
  align-self: center;
}

.live-call-body-acw {
  grid-area: acw;
  align-self: center;
}

.live-call-body-date {
  grid-area: date;
  align-self: center;
}

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

.live-call-body-number {
  grid-area: number;
  align-self: center;
}

.live-call-body-comment {
  grid-area: comment;
  align-self: center;
}

.live-call-body-customer {
  grid-area: customer;
  align-self: center;
}

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

.live-call-foot button {
  margin: 0.1em 0.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 {
  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: inline-flex !important;
}

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

.d-flex-col {
  display: flex !important;
  flex-direction: column;
}

.d-flex-row {
  display: flex !important;
  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: flex;
  justify-content: flex-start;
}

.flex-end {
  display: flex;
  justify-content: flex-end;
}

.flex-center {
  display: flex;
  justify-content: center;
}

.flex-align-start {
  display: flex;
  align-items: flex-start !important;
}

.flex-align-end {
  display: flex;
  align-items: flex-end !important;
}

.flex-align-center {
  display: flex;
  align-items: center !important;
}

.flex {
  flex: 1;
}

.flex-row {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}

.flex-row-start {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
}

.flex-column {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

.flex-column-start {
  display: flex;
  flex-direction: column;
  justify-content: flex-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: 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;
}

.zprimary {
  background-color: #3C8DBC;
  border-color: #3C8DBC !important;
  color: #ECE6DB;
}

.zsecondary {
  background-color: #FF851B;
  border-color: #FF851B !important;
  color: #f8f8f8;
}

.ztertiary {
  background-color: #001F3F;
  border-color: #001F3F !important;
  color: #f8f8f8;
}

.zinfo {
  background-color: #7bcaf8;
  border-color: #7bcaf8 !important;
  color: #03283e;
}

.zwarning {
  background-color: #F39C12;
  border-color: #F39C12 !important;
  color: #f8f8f8;
}

.zdanger {
  background-color: #DD4B39;
  border-color: #DD4B39 !important;
  color: #f8f8f8;
}

.zsuccess {
  background-color: #00A65A;
  border-color: #00A65A !important;
  color: #f8f8f8;
}

/* 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: rgb(56, 56, 56);
  border: 1px solid #222;
  color: #fff;
}

.os-panel {
  border-color: #a6a6a6;
  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 {
  box-shadow: 1px 1px 1px 1px #8d8d8d;
}
.os-panel .os-panel-footer {
  background-color: #b3b3b3;
}
.os-panel.primary {
  border-color: #3C8DBC;
  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 {
  box-shadow: 1px 1px 1px 1px #307095;
}
.os-panel.secondary {
  border-color: #FF851B;
  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 {
  box-shadow: 1px 1px 1px 1px #e76b00;
}
.os-panel.danger {
  border-color: #DD4B39;
  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 {
  box-shadow: 1px 1px 1px 1px #c23321;
}
.os-panel.warning {
  border-color: #F39C12;
  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 {
  box-shadow: 1px 1px 1px 1px #c87f0a;
}
.os-panel.info {
  border-color: #7bcaf8;
  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 {
  box-shadow: 1px 1px 1px 1px #4bb7f5;
}
.os-panel.success {
  border-color: #00A65A;
  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 {
  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 {
  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.primary,
.os-notification .primary,
.os-notification .primary * {
  background-color: #3C8DBC !important;
  color: #ECE6DB !important;
  border-color: #307095 !important;
}
.os-notification.success,
.os-notification .success,
.os-notification .success * {
  background-color: #00A65A !important;
  color: #f8f8f8 !important;
  border-color: #00733e !important;
}
.os-notification.danger,
.os-notification .danger,
.os-notification .danger * {
  background-color: #DD4B39 !important;
  color: #f8f8f8 !important;
  border-color: #c23321 !important;
}
.os-notification.warning,
.os-notification .warning,
.os-notification .warning * {
  background-color: #F39C12 !important;
  color: #f8f8f8 !important;
  border-color: #c87f0a !important;
}
.os-notification.info,
.os-notification .info,
.os-notification .info * {
  background-color: #7bcaf8 !important;
  color: #03283e !important;
  border-color: #4bb7f5 !important;
}

.os-notify {
  border: 1px solid #cbd6e3;
}
.os-notify.primary,
.os-notify .primary {
  background-color: #acd0e5 !important;
  color: #3C8DBC !important;
  border-color: #307095 !important;
}
.os-notify.success,
.os-notify .success {
  background-color: #40ffa8 !important;
  color: #00733e !important;
  border-color: #00733e !important;
}
.os-notify.danger,
.os-notify .danger {
  background-color: #f3c2bc !important;
  color: #DD4B39 !important;
  border-color: #c23321 !important;
}
.os-notify.warning,
.os-notify .warning {
  background-color: #fad9a4 !important;
  color: #F39C12 !important;
  border-color: #c87f0a !important;
}
.os-notify.info,
.os-notify .info {
  background-color: white !important;
  color: #7bcaf8 !important;
  border-color: #4bb7f5 !important;
}

/* 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;
  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 !important;
}

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;
}

:-moz-placeholder-shown {
  color: #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;
  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,
[type=button]:hover,
[type=submit]:hover,
[type=reset]:hover,
a.button:hover,
label.button:hover,
.button:hover,
a[role=button]:hover,
label[role=button]:hover,
[role=button]:hover {
  background-color: #d5d5d5;
  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,
[type=button].outline:hover,
[type=submit].outline:hover,
[type=reset].outline:hover,
a.button.outline:hover,
label.button.outline:hover,
.button.outline:hover,
a[role=button].outline:hover,
label[role=button].outline:hover,
[role=button].outline:hover {
  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 !important;
  color: #ECE6DB !important;
  border-color: #307095 !important;
}
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 !important;
}
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 !important;
  color: #3C8DBC !important;
}
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 !important;
  color: #ECE6DB !important;
}
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 {
  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 !important;
  color: #f8f8f8 !important;
  border-color: #e76b00 !important;
}
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 !important;
}
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 !important;
  color: #FF851B !important;
}
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 !important;
  color: #f8f8f8 !important;
}
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 {
  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 !important;
  color: #f8f8f8 !important;
  border-color: #00060c !important;
}
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 !important;
}
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 !important;
  color: #001F3F !important;
}
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 !important;
  color: #f8f8f8 !important;
}
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 {
  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 !important;
  color: #f8f8f8 !important;
  border-color: #c23321 !important;
}
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 !important;
}
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 !important;
  color: #DD4B39 !important;
}
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 !important;
  color: #f8f8f8 !important;
}
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 {
  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 !important;
  color: #f8f8f8 !important;
  border-color: #c87f0a !important;
}
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 !important;
}
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 !important;
  color: #F39C12 !important;
}
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 !important;
  color: #f8f8f8 !important;
}
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 {
  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 !important;
  color: #03283e !important;
  border-color: #4bb7f5 !important;
}
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 !important;
}
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 !important;
  color: #7bcaf8 !important;
}
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 !important;
  color: #03283e !important;
}
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 {
  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 !important;
  color: #f8f8f8 !important;
  border-color: #00733e !important;
}
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 !important;
}
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 !important;
  color: #00A65A !important;
}
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 !important;
  color: #f8f8f8 !important;
}
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 {
  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;
  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 {
  box-shadow: 1px 1px 1px 1px #a9bbd2;
}
.os-dropdown:hover div {
  box-shadow: none;
}
.os-dropdown:hover ul {
  box-shadow: 1px 1px 2px 1px #a9bbd2;
}
.os-dropdown:hover ul * {
  box-shadow: none;
}

.os-dropdownbutton ul {
  background-color: #ECF0F5;
  border: 1px solid #a9bbd2;
  border-radius: 0.5rem;
}
.os-dropdownbutton ul li {
  color: #555;
}
.os-dropdownbutton ul li a {
  color: #555;
}
.os-dropdownbutton ul li:hover {
  background-color: #3C8DBC;
  color: #ECE6DB;
}
.os-dropdownbutton ul li:hover a {
  color: #ECE6DB;
}

.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: linear-gradient(to right, #6686af 20%, #ECF0F5 100%);
}
.os-gauge-radial .rotator .cursor {
  background: linear-gradient(to right, #3f110b 0%, #DD4B39 100%);
}

.os-gauge-arc .first {
  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: linear-gradient(to right, #00A65A 0%, #F39C12 50%, #DD4B39 100%);
}
.os-gauge-arc.to-success .first {
  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 {
  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-icon.white {
  color: white;
}

.os-dd-dragged-over {
  background-color: #cbd6e3;
  opacity: 0.6;
  animation: blinker 1s linear infinite;
}

.os-dd-dragged-over > div {
  background-color: #cbd6e3;
  opacity: 0.6;
  animation: blinker 1s linear infinite;
}

.os-dd-dragged-over-denied {
  background-color: #DD4B39;
  opacity: 0.6;
  animation: blinker 1s linear infinite;
}

.os-flex .os-dd-dragged-over {
  background-color: #cbd6e3;
  opacity: 0.6;
  animation: blinker 1s linear infinite;
}

.os-flex .os-dd-dragged-over > div {
  background-color: #cbd6e3;
  opacity: 0.9;
  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;
  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;
}