html{height:100%;}
body{height:100%; overflow-x:hidden; overflow-y:scroll;}

#toggler{cursor:pointer;  }

.button-small {
  font-size: 1rem;
  height: 3rem;
  line-height: 3rem;
  padding: 0 1.5rem;
}

.button-large {
  font-size: 1.4rem;
  height: 4.5rem;
  line-height: 4.5rem;
  padding: 0 2rem;
}

.indent{margin-left:60px;}

div.wrapper{position:relative;}

div.theme{position:absolute; top:10px; right:0; width:24px; height:24px; cursor:pointer; background-image:url(/img/theme-light.svg); background-size:cover; background-repeat:no-repeat; background-position:center center;}
html.centigram-light div.theme{background-image:url(/img/theme-dark.svg);}

div.social {position:absolute; top:10px; right:32px; display:none;}
div.social a{text-decoration:none !important; margin:0 10px 0 0;}
div.social a svg{display:inline-block; width:24px; height:24px;}
div.social a svg .fill{fill:#aaa;}a
div.social a svg:hover .fill{fill:#fff;}

body{font-optical-sizing: auto !important; font-style: normal !important;}

input, select, option, textarea{font-optical-sizing: auto !important; font-style: normal !important;}

label, b{}

a{color:var(--color-primary); text-decoration:none;}
a:hover{text-decoration:none;}

div.logo, a.logo{display:inline-block; width:200px; height:46px; background-image:url(/img/logo.svg); background-position:0 0; background-repeat:no-repeat; background-size: auto 100%;}

html.centigram-dark div.logo{background-image:url(/img/logo-dark.svg);}
html.centigram-dark a.logo{background-image:url(/img/logo-dark.svg);}

div.cmd{margin:20px 0 20px 0;}

.lm-20{display:inline-block !important; margin-left:20px !important;}
.tm-20{margin-top:20px !important;}
.bm-20{margin-bottom:20px !important;}

div.header{color:var(--color-foreground); margin-bottom:10px; z-index:300;}
div.header ul{display:block; list-style:none; margin:0; padding:0;}
div.header ul li{display:inline-block; margin:0 20px 0 0; padding:0;}
div.header ul li a{display:inline-block;}
div.header div.spacer{height:0;}

div.main{z-index:200;}

div.footer{color:var(--color-foreground); z-index:100;}
div.footer div span.separator{margin:0 10px 0 10px; display:inline-block; position:relative; color:transparent; border:1px solid transparent; border-width:0 1px 0 0;}
div.footer div span.separator::before{content:''; background-color:#ffffff; position:absolute; top:50%; left:50%; width:1px; height:20px; margin-top:-6px;}
div.footer div ul{display:inline-block; list-style:none; margin:0; padding:0; }
div.footer div ul.right{float:right; text-align:right;}
div.footer div ul li{display:block; margin:0; padding:0;}
div.footer div ul li a{display:inline-block; font:24px;}
div.footer div.spacer{height:60px;}

.error{color:#ff0000;}

img.logo{width:auto; height:60px; display:inline-block; margin-left:0px;}
div.loading{position: absolute;top:0; left:0; width:100%; height:100%; display:none;}
div.loading div.overlay{position: absolute;top:0; left:0; width:100%; height:100%; background-color:rgba(0,0,0,0.33);}
div.loading img{position: absolute; top:50%; left:50%; width:60px; height:60px; margin-top:-60px; margin-left:-30px;}

.relative{position: relative;}
.center{text-align:center;}

div.user-menu{position: absolute; top:0px; right:-15px; display:inline-block; height:48px; line-height: 48px;}
div.user-menu img.profile{width:48px; height:48px; display:inline-block; margin-right:76px;}
div.user-menu a.signin{display:inline-block; margin-right:76px;}
div.user-menu a.signup{display:inline-block; margin-right:76px;}
div.user-menu div.item{line-height:28px;}

div.dropdown-menu{border-radius:0; border:1px solid #ddd; top:14px !important; border-width:0 1px 1px 1px; width:200px; left:4px !important; text-align:center; padding-bottom:24px;}

div.error{color:#ff0000; margin-bottom:10px;}

div.qeala-number{display:inline-block;  line-height: 60px; height:60px; margin-top:8px; margin-right:30px; vertical-align: middle;}
div.modal-sm{min-width:360px !important;}

div.environment{position:absolute; top:0; left:50%; width:200px; line-height:28px; margin-left:-100px; background-color:#ffff66; color:#000; text-align:center; z-index:99999; border:1px solid #333; border-width:0 1px 1px 1px; display:none;}

.btn-cw{background-color:#00b5f9; color:#fff;}
.btn-cw:active{background-color:#00b5f9; color:#fff;}
.btn-cw:hover{background-color:#00b5f9; color:#fff;}
.btn-cw:visited{background-color:#00b5f9; color:#fff;}

.val-error{color:#ff0000;}

.off-screen{position:absolute; top:-1000px; left:-1000px;}

.multi-steps > li.is-active:before, .multi-steps > li.is-active ~ li:before {
  content: counter(stepNum);
}
.multi-steps > li.is-active:after, .multi-steps > li.is-active ~ li:after {
  background-color: #ededed;
}

.multi-steps {
  display: table;
  table-layout: fixed;
  width: 100%;
  margin:20px 0 20px 0;
}
.multi-steps > li {
  counter-increment: stepNum;
  text-align: center;
  display: table-cell;
  position: relative;
  color: #007dac;
}
.multi-steps > li:before {
  content: "\f00c";
  content: "\2713;";
  content: "\10003";
  content: "\10004";
  content: "\2713";
  display: block;
  margin: 0 auto 4px;
  background-color: #fff;
  width: 36px;
  height: 36px;
  line-height: 32px;
  text-align: center;
  border-width: 2px;
  border-style: solid;
  border-color: #007dac;
  border-radius: 50%;
  cursor:default;
}
.multi-steps > li:after {
  content: "";
  height: 2px;
  width: 100%;
  background-color: #007dac;
  position: absolute;
  top: 16px;
  left: 50%;
  z-index: -1;
}
.multi-steps > li:last-child:after {
  display: none;
}
.multi-steps > li.is-active:before {
  background-color: #fff;
  border-color: #007dac;
}
.multi-steps > li.is-active ~ li {
  color: #808080;
}
.multi-steps > li.is-active ~ li:before {
  background-color: #ededed;
  border-color: #ededed;
  cursor: default;
}

*:focus {
    outline: none;
}

div.toast{position: fixed; top:40px; left:50%; width:28%; height:auto; z-index:99999; margin-left:-14%; background-color:#ddd; color:#111; padding:10px 15px; min-height: 44px; display: none;}

textarea{resize:none; height:120px;}

xinput#cmd{display:inline-block; margin:20px 0 20px 0;}

.switch {
  font-size: 1rem;
  position: relative;
}
.switch input {
  position: absolute;
  height: 1px;
  width: 1px;
  background: none;
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  overflow: hidden;
  padding: 0;
}
.switch input + label {
  position: relative;
  min-width: calc(calc(2.375rem * 0.8) * 2);
  border-radius: calc(2.375rem * 0.8);
  height: calc(2.375rem * 0.8);
  line-height: calc(2.375rem * 0.8);
  display: inline-block;
  cursor: pointer;
  outline: none;
  user-select: none;
  vertical-align: middle;
  text-indent: calc(calc(calc(2.375rem * 0.8) * 2) + 0.5rem);
}
.switch input + label::before, .switch input + label::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: calc(calc(2.375rem * 0.8) * 2);
  bottom: 0;
  display: block;
}
.switch input + label::before {
  right: 0;
  background-color: #dee2e6;
  border-radius: calc(2.375rem * 0.8);
  transition: 0.2s all;
}
.switch input + label::after {
  top: 2px;
  left: 2px;
  width: calc(calc(2.375rem * 0.8) - calc(2px * 2));
  height: calc(calc(2.375rem * 0.8) - calc(2px * 2));
  border-radius: 50%;
  background-color: white;
  transition: 0.2s all;
}
.switch input:checked + label::before {
  background-color: #007bff;
}
.switch input:checked + label::after {
  margin-left: calc(2.375rem * 0.8);
}
.switch input:focus + label::before {
  outline: none;
  box-shadow: 0 0 0 0.2rem rgba(0, 136, 221, 0.25);
}
.switch input:disabled + label {
  color: #868e96;
  cursor: not-allowed;
}
.switch input:disabled + label::before {
  background-color: #e9ecef;
}
.switch.switch-sm {
  font-size: 0.875rem;
}
.switch.switch-sm input + label {
  min-width: calc(calc(1.9375rem * 0.8) * 2);
  height: calc(1.9375rem * 0.8);
  line-height: calc(1.9375rem * 0.8);
  text-indent: calc(calc(calc(1.9375rem * 0.8) * 2) + 0.5rem);
}
.switch.switch-sm input + label::before {
  width: calc(calc(1.9375rem * 0.8) * 2);
}
.switch.switch-sm input + label::after {
  width: calc(calc(1.9375rem * 0.8) - calc(2px * 2));
  height: calc(calc(1.9375rem * 0.8) - calc(2px * 2));
}
.switch.switch-sm input:checked + label::after {
  margin-left: calc(1.9375rem * 0.8);
}
.switch.switch-lg {
  font-size: 1.25rem;
}
.switch.switch-lg input + label {
  min-width: calc(calc(3rem * 0.8) * 2);
  height: calc(3rem * 0.8);
  line-height: calc(3rem * 0.8);
  text-indent: calc(calc(calc(3rem * 0.8) * 2) + 0.5rem);
}
.switch.switch-lg input + label::before {
  width: calc(calc(3rem * 0.8) * 2);
}
.switch.switch-lg input + label::after {
  width: calc(calc(3rem * 0.8) - calc(2px * 2));
  height: calc(calc(3rem * 0.8) - calc(2px * 2));
}
.switch.switch-lg input:checked + label::after {
  margin-left: calc(3rem * 0.8);
}
.switch + .switch {
  margin-left: 1rem;
}
.dropdown-menu {
  margin-top: 0.75rem;
}

div.error-404 label{display:block; margin:90px 0 30px 0;}
div.error-404 div{font-color:#ddd; line-height:210px; margin:0 0 40px 0;}

span.switch{display:inline-block; margin-left:6px;}

.btn,
.btn:hover,
.btn:active,
.btn:visited,
.btn:focus {
    color:#fff  !important;
    background-color: #29292b  !important;
    border-width:2.33px !important;
    border-color: #29292b !important;
    box-shadow: none !important;
    border-radius: 6px !important;
    padding: 16px 48px 16px 48px;
    line-height:24px;
    text-decoration: none !important;
}

.btn-outline,
.btn-outline:hover,
.btn-outline:active,
.btn-outline:visited,
.btn-outline:focus {
    color: #29292b !important;
    border-color: #29292b !important;
    border-width:2.33px !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border-radius:32px;
    padding: 12px 36px 12px 36px;
    line-height:24px;
    text-decoration: none !important;
}

a.line {
  position: relative;
  color: var(--color-primary);
  text-decoration: none;
}

a.line:hover {
  color: var(--color-primary);
}

a.line::before {
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: var(--color-primary);
  transform: scaleX(0);
  transform-origin: top left;
  transition: transform 0.3s ease;
}

a.line:hover::before {
  transform: scaleX(1);
}


div.indicator{position:fixed; top:0; left:0; width:20px; height:20px; display:none;}

/* xs */
@media only screen and (max-width: 575px) {
  div.indicator{ background-color: blue; }
  body{}

  .btn,
  .btn:hover,
  .btn:active,
  .btn:visited,
  .btn:focus {
      color:#fff  !important;
      background-color: #29292b  !important;
      border-width:1.33px !important;
      border-color: #29292b !important;
      box-shadow: none !important;
      border-radius: 4px !important;
      padding: 8px 24px 8px 24px;
      line-height:21px;
      text-decoration: none !important;
  }

  .btn-outline,
  .btn-outline:hover,
  .btn-outline:active,
  .btn-outline:visited,
  .btn-outline:focus {
      color: #29292b !important;
      border-color: #29292b !important;
      border-width:1.33px !important;
      background-color: transparent !important;
      box-shadow: none !important;
      border-radius:4px !important;
      padding: 8px 24px 8px 24px;
      line-height:21px;
      text-decoration: none !important;
  }

  header{padding:10px 0 10px 0; line-height:28px; display:block;}
  footer{padding:10px 0 10px 0; line-height:28px; display:block;}
  nav.navbar a{}
  nav.navbar a.navbar-brand{display:inline-block; width:200px; height:46px; background-image:url(/img/logo.svg); background-position:0 0; background-repeat:no-repeat; background-size: auto 100%; line-height:46px;}
  ul.navbar-nav{margin:15px 0 0 0;}
  div.error-404 div{}

  input, select, option{}
  header div ul li{border:1px solid #333; border-width:0 0 1px 0; margin:0;}

}
/* sm */
@media only screen and (min-width: 567px) {
  div.indicator{ background-color: orange; }
  nav.navbar a{}
  nav.navbar a.navbar-brand{display:inline-block; width:200px; height:46px; background-image:url(/img/logo.svg); background-position:0 0; background-repeat:no-repeat; background-size: auto 100%; line-height:46px;}
}
/* md */
@media only screen and (min-width: 768px) {
  div.indicator{ background-color: red; }
}
/* lg */
@media only screen and (min-width: 992px) {
  div.indicator{ background-color: yellow; }
}
/* xl */
@media only screen and (min-width: 1200px) {
  div.indicator{ background-color: green; }
}
/* xxl */
@media only screen and (min-width: 1400px) {
  div.indicator{ background-color: purple; }
}