:root {
  --rodo-color: #E5097F;
  --rodo-color-hover: #C4076D;
  --rodo-color-light: rgba(245, 9, 127, .3);
  --kk-color: #1584A5;
  --kk-color-hover: #12718D;
  --kk-color-light: rgba(21, 132, 165, .3);
  --kk-color-r: 21;
  --kk-color-g: 132;
  --kk-color-b: 165;
}
html {
  font-size: 14px;
}
body {
  background-color: #f8f8f8;
}
nav.bg-light {
  background-color: white!important;
}
.navbar-brand {
  font-size: 1em;
  font-weight: bold;
  text-align: right;
  line-height: 100%;
}
.frame {
  background-color: white;
  border: 1px solid #f0f0f0;
  border-radius: 4px;
  padding: 1em;
  box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important;
}
.pill {
  border: 1px solid rgba(0,0,0,.2);
  background: #d8d8d8;
  border-radius: 4px;
  color: rgba(0,0,0,.9);
  padding: 0 .2em;
}
.btn-circle {
  border-radius: 50%;
  line-height: 100%;
  width: 40px;
  height: 40px;
}
.btn-circle.btn-sm {
  width: 28px;
  height: 28px;
}
.btn-rodo {
  color: white;
  background-color: var(--rodo-color);
  outline-color: red;
}
.btn-rodo:hover, .btn-rodo:active {
  color: white!important;
  background-color: var(--rodo-color-hover)!important;
}
.btn-rodo:focus {
  box-shadow: 0 0 0 0.25rem var(--rodo-color-light);
}
.btn-kk {
  color: white;
  background-color: var(--kk-color);
}
.btn-kk:hover, .btn-kk:active {
  color: white!important;
  background-color: var(--kk-color-hover)!important;
}
.btn-kk:focus {
  box-shadow: 0 0 0 0.25rem var(--kk-color-light);
}
.bg-kk {
  border-color: rgba(var(--kk-color-r), var(--kk-color-g), var(--kk-color-b), .3);
  background-color: rgba(var(--kk-color-r), var(--kk-color-g), var(--kk-color-b), .15);
}
.bootstrap-select.form-control {
  border: 1px solid #ced4da;
}
.disabled {
  background: #eee;
}
.btn.btn-flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid #ced4da;
}
.ui-datepicker {
  z-index: 1099!important;
}
.form-select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath d='M7,10L12,15L17,10H7Z' /%3e%3c/svg%3e");
  background-position: right 0.75rem top 36%;
}
.dropdown-scrollable {
  max-height: 26em;
  overflow-y: auto;
}
.attract {
  animation: attract 3s;
}
@keyframes attract {
  0% { background: transparent; }
  10% { background: #FF99D1; }
  50% { background: #FF99D1; }
  100% { background: transparent; }
}
.status-warning { background-color: #e90; color: rgba(255,255,255,.9); }
.status-alert { background-color: #c00; color: rgba(255,255,255,.9); }
.modal.top { z-index: 1080; }
.modal.top .modal.top { z-index: 1081; }
.top-backdrop {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  background-color: rgba(0,0,0,.5);
}
.text-right {
  text-align: right;
}
.bootstrap-select .dropdown-toggle {
  border: 1px solid #ced4da;
}
table.no-wrap td, .no-wrap {
  white-space: nowrap;
}
#spinner {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0,0,0,.5);
  z-index: 1100;
  display: none;
}
#spinner .holder {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}
#spinner .loader {
  border: 3px solid #555;
  border-radius: 50%;
  border-top: 5px solid var(--rodo-color-light);
  width: 50px;
  height: 50px;
  animation: spin 1s cubic-bezier(0.445, 0.145, 0.550, 0.845) infinite;
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.hidden {
  display: none;
}
.search {
  border-color: #eeeeee;
  padding-left: 4px;
  padding-right: 0;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="silver"><path d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"/></svg>');
  background-size: auto 35%;
  background-position: 95% 50%;
  background-repeat: no-repeat;
}
.search::placeholder {
  color: black;
  font-weight: bold;
}
.bg-filters {
  background-color: rgba(0, 0, 0, .03);
  border-color: rgba(0, 0, 0, .07);
}
.badge {
  font-weight: normal;
  padding: 7px 10px;
}
a > .badge {
  text-decoration: none;
}
a > .badge:hover {
  opacity: 0.8;
}
button img {
  height: 1.1em;
  vertical-align: text-top;
  margin-top: 2px;
}
.img-qr {
  width: 148px;
  height: 148px;
}
@keyframes rotation {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.cogs {
  position: relative;
  height: 100px;
  width: 115px;
}
.cog {
  position: absolute;
  width: 40px;
  height: 40px;
  font-size: 40px;
  line-height: 40px;
  transform-origin: 50% 50%;
  transition-property: transform;
  transition-duration: .3s;
  color: var(--rodo-color);
  animation: rotation 4s infinite linear;
  animation-play-state: paused;
}
.cog-big {
  width: 80px;
  height: 80px;
  font-size: 80px;
  animation-duration: 8s;
}
.cogs-animation .cog {
  animation-play-state: running;
}
.cog-reverse {
  animation-direction: reverse;
}
.blink {
  animation: blink 1s infinite linear;
}
@keyframes blink {
  0% { opacity: 1; }
  40% { opacity: 1; }
  50% { opacity: 0; }
  90% { opacity: 0; }
  100% { opacity: 1; }
}
.works {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1em .5em;
  background: rgba(200,200,290,.8);
  display: flex;
  flex-direction: row;
  justify-content: start;
}
.works-item {
  display: block;
  text-decoration: none;
  background: var(--rodo-color);
  border-radius: 4px;
  padding: .5em .7em;
  margin: 0 .5em;
  color: white;
}
.works-item:hover {
  color: white;
  opacity: .85;
}
.works-item .cogs {
  width: 29px;
  height: 26px;
  margin-right: 4px;
}
.works-item .cog {
  width: 10px;
  height: 10px;
  font-size: 10px;
  line-height: 10px;
  color: white;
}
.works-item .cog-big {
  width: 20px;
  height: 20px;
  font-size: 20px;
  line-height: 20px;
}
.works-title {
  font-size: 110%;
  font-weight: bold;
}
.works-status {
  text-align: center;
  font-size: 80%;
}
.frame-print {
  width: 100%;
  height: 390px;
}
.modal-title img {
  max-height: 20px;
  vertical-align: text-bottom;
}