@import "https://fonts.googleapis.com/icon?family=Material+Icons&display=swap";
@import "https://fonts.googleapis.com/css2?family=Roboto&display=swap";
@import "https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css";

body {
      font-family: 'Roboto', 'sans-serif';
      background-color: #000;
      color: #fff;
      font-size:16px;
}

.screen {
      display: none;
      text-align: center;
}

.vcenter {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      display: flex;
      align-items: center;
      justify-content: center;
}

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

.request-screen {
      position: fixed;
      top: 0;
      left: 0;
      margin: 0;
      width: 100%;
      height: 100%;
}

.request-container {
      position: absolute;
      right: 0;
      left: 0;
      top: 0;
      bottom: 0;
      max-width: 720px;
      margin: auto;
}

.container {
      max-width: 720px;
      max-height: 100%;
}

.jumbotron {
      background: inherit;
}

.glyphicon {
      margin-right: 5px;
      margin-left: 5px;
}

input {
      font-size: 16px;
}

.btn.active.focus,
.btn.active:focus,
.btn.focus,
.btn:active.focus,
.btn:active:focus,
.btn:focus {
      outline: none;
}

@keyframes spin {
      0% {
            transform: rotate(0deg);
      }

      100% {
            transform: rotate(360deg);
      }
}

.spinner {
      float: right;
      border: 4px solid #eee;
      border-top: 4px solid rgba(0,0,0,0);
      border-radius: 50%;
      width: 16px;
      height: 16px;
      animation: spin 1s linear infinite;
      box-sizing: border-box;
}

.sketch-img {
      max-width: 100%;
      max-height: 100%;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      margin: auto;
}

.sketch-container {
      background: #000;
}

a, a:active, a:hover, a:focus {
      text-decoration: none;
      color: inherit;
}

td a {
      width: 100%;
      display: block;
      cursor: pointer;
}

.light-text {
      color: #bbb;
}

.very-light-text {
      color: #888;
}

.modal-content {
      color: #fff;
      font-size: 14px;
      background: #333;
}

.modal-content .table-hover>tbody>tr:hover {
    background-color: #222;
}

.table>tbody>tr>td, .table>thead>tr>th {
      border:0;
}

.modal-content .close {
      color: #bbb;
      opacity: 1;
}
.modal-content .close:hover {
      color: #fff;
}
th {
      font-weight: normal;
}

.abcRioButton {
      background-color: #49734a !important;
      border-radius: 4px !important;
}

ul {
      padding-left: 14px;
}

#chat-modal ul>li {
      padding: 0;
}

.btn {
      color: #000;
      background-color: #fff;
}

.btn-primary {
    color: #fff;
    background-color: #49734a;
    fill: #49734a;
    border-color: #315d32;
}

.btn-primary.active,
.btn-primary.active:hover,
.btn-primary:active,
.btn-primary:hover:active,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary.active:focus,
.btn-primary.active:hover,
.open>.dropdown-toggle.btn-primary,
.btn-primary.disabled.focus,
.btn-primary.disabled:focus,
.btn-primary.disabled:hover,
.btn-primary[disabled].focus,
.btn-primary[disabled]:focus,
.btn-primary[disabled]:hover,
fieldset[disabled] .btn-primary.focus,
fieldset[disabled] .btn-primary:focus,
fieldset[disabled] .btn-primary:hover {
    color: #fff;
    background-color: #315d32;
    fill: #315d32;
    border-color: #315d32;
}

.blink {
      animation-duration: 1s;
      animation-name: blink;
      animation-iteration-count: infinite;
}
@keyframes blink {
   50% {
      color: #fac961;
   }
}

.blink-fade {
      animation-duration: 2.5s;
      animation-name: blink-fade;
      animation-iteration-count: infinite;
      opacity: 0;
}
@keyframes blink-fade {
   50% {
      opacity: 1;
   }
}

.btn-primary.disabled,
.btn-primary[disabled] {
      opacity: 1;
      color: #bbb !important;
      background-color: #304c32 !important;
      border-color: #304c32 !important;
}

.btn-inline {
      padding: 2px 8px;
      margin: 0 8px;
      vertical-align: unset;
}

.btn-thin {
      padding: 4px 10px;
}

.form-control:focus {
      border-color: #ccc;
}

.orange {
      color: #fac961;
}

#comms-panel .btn-primary {
      width: 36px;
      height: 36px;
      padding: 0;
      margin: 0;
      border-radius: 18px;
      line-height: 36px;
      font-size: 18px;
      margin-bottom: 4px;
}
#comms-panel .btn-primary.pending {
      background-color: #e0a320;
      border-color: #e0a320;
      fill: #e0a320;
}
#comms-panel .btn-primary.attention {
      color: #000;
}

.value-bar {
      background-color: #f9a900;
      max-width: 100%;
}
.value-bar.disabled {
      background-color: #777;
}

.material-icons {
      font-size: inherit;
      line-height: inherit;
      vertical-align: bottom;
}

.material-icons.inline {
      margin-left: 6px;
      margin-right: 6px;
}
.material-icons.inline:first-child {
      margin-left: 0;
}
.material-icons.inline:last-child {
      margin-right: 0;
}

.modal.center {
      text-align: center;
      padding: 0!important;
}

.modal.back-static .modal-header button[data-dismiss="modal"] {
      padding: 8px;
      margin: -8px -8px 0 0;
      text-shadow: none;
}

.modal.center:before {
      content: '';
      display: inline-block;
      height: 100%;
      vertical-align: middle;
      margin-right: -4px;
}
.modal.center .modal-dialog {
      display: inline-block;
      text-align: left;
      vertical-align: middle;
}

#settings-modal .row {
      margin-top:15px;
}

#settings-modal .btn {
      padding: 3px 10px;
}

.heart-btn {
      cursor: pointer;
      display: inline-block;
      color: #f9a900;
      padding: 6px;
}

.heart-btn[handling="1"] {
      opacity: 0.5;
      cursor: default;
}

.heart-btn.active .glyphicon-heart-empty {
      display: none;
}

.heart-btn.inactive .glyphicon-heart {
      display: none;
}

.heart-btn .glyphicon {
      margin: 0;
      vertical-align: middle;
      border-radius: 5px;
      font-size: 28px;
}

.img-block:last-child {
      margin-bottom: 0
}

.image-react span.inline {
      margin-left: 9px;
      padding: 0 3px 0 3px;
      font-size: 28px;
      cursor: pointer;
}

.overflow-dotted {
      word-break: break-all;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
}

[data-toggle="popover"] {
      cursor: pointer;
}

.popover-content {
      color: #444;
}
.popover {
      width: fit-content;
      z-index: 1100;
}