body,
h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
  font-family: inter, sans-serif;
  color: rgb(56, 79, 90);
}

body {
  font-size: 16px;
  font-weight: 300;
}

/* Components */

body {
  background-color: rgb(236 239 246);
  color: rgb(38, 41, 43);
}

/* Icons */
.material-icons.danger,
.material-symbols-rounded.danger,
.material-symbols-outlined.danger {
  color: rgb(182, 11, 11);
}

.material-icons.valid,
.material-symbols-rounded.valid,
.material-symbols-outlined.valid {
  color: rgb(2, 151, 64);
}

.icon.toggle.valid {
  color: rgb(2, 151, 64);
}

.icon.toggle {
  color: rgb(182, 11, 11);
}

.big {
  font-size: 5rem;
}

.pointer {
  cursor: pointer;
}

.dashed {
  text-decoration: underline;
}

.alert {
  color: rgb(166 47 47);
}

.valid {
  color: rgb(2, 151, 64);
}

/* Messages */

.system-message .system-message-content {
  padding: 1rem;
  position: relative;
  margin: 1rem 2rem;
}

.system-message .info {
  background-color: #c7d3ea;
  color: #5b5b5b;
}

.system-message .success {
  background-color: #b5de92;
  color: #5b5b5b;
}

.system-message .warning {
  background-color: #e5a06f;
  color: #5b5b5b;
}

.system-message .alert {
  background-color: rgb(166 47 47);
  color: #fff;
}

/* Offline */

body.offline {
  overflow: hidden;
}

body.offline .offline-message {
  display: block;
}

.offline-message {
  display: none;
  background-color: #f0f0f0;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100vh;
  z-index: 100;
}

.offline-message .offline-message-title {
  font-weight: bold;
  font-size: 200%;
}

.offline-message .offline-message-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  font-size: 150%;
}

.offline-message .offline-message-content .icon {
  font-size: 3rem;
}

/* Shadows */

.container,
.side-menu,
.facts,
.top-bar-status,
.system-message-content {
  box-shadow: 0 0 10px #e7e7e7;
  border-radius: 0.6rem;
}

/* Action */

.action {
  border-radius: 5px;
  border: 1px solid #efefefef;
  padding: 0.5rem;
  line-height: 1rem;
  cursor: pointer;
  box-shadow: 2px 2px 3px #eee;
  margin-right: 0.5rem;
}

.action .icon {
  font-size: 20px;
  color: #1e5c86;
  vertical-align: text-bottom;
  margin-right: 0.3rem;
}

.ticket-selected {
  margin-right: 0.5rem;
  display: inline-block;
}

.bold {
  font-weight: bold;
}

.primary {
  color: #000;
}

.button {
  background-color: #f0f0f0;
  color: #0069bf;
}

.button.active {
  background-color: #0069bf;
  color: #f0f0f0;
  border-color: #005ba5;
}

.button-group .button {
  border-radius: 0;
  margin-right: 0;
}

.button-group .button:first-child,
.input-group :first-child {
  border-top-left-radius: 4px !important;
  border-bottom-left-radius: 4px !important;
}

.button-group .button:last-child,
.input-group :last-child {
  border-top-right-radius: 4px !important;
  border-bottom-right-radius: 4px !important;
}

/* facts */

.facts {
  margin-bottom: 1.5rem;
}

.facts.fact-2 .fact {
  width: calc(50% - 1px);
}

.facts.fact-3 .fact {
  width: calc(33.33% - 1px);
}

.facts.fact-4 .fact {
  width: calc(25% - 1px);
}

.facts.fact-5 .fact {
  width: calc(20% - 1px);
}

.facts.fact-6 .fact {
  width: calc(16.6% - 1px);
}

.fact {
  background-color: #fff;
  min-height: 10rem;
  padding: 1rem;
  text-align: center;
  margin-right: 1px;
}

.fact:first-child {
  border-top-left-radius: 0.6rem;
  border-bottom-left-radius: 0.6rem;
}

.fact:last-child {
  border-top-right-radius: 0.6rem;
  border-bottom-right-radius: 0.6rem;
}

.fact p {
  margin: 0;
  line-height: 1;
}

.fact .fact-icon .icon {
  font-size: 3rem;
  color: #777;
}

.fact .fact-title {
  font-size: 1rem;
}

.fact .fact-data {
  font-size: 1.5rem;
  font-weight: bold;
}

/* Foundation */
.switch-inactive {
  right: 10%;
}

/* Passings */
.passing.inactive-ticket {
  opacity: 0.4;
}

/* Back to top */
#back-to-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: none;
  background-color: #5597d1;
  border: 2px solid #1f7098;
  color: #fff;
  border-radius: 50%;
  padding: 0.5rem;
  cursor: pointer;
}

.laptime {
  transition: background-color 2s;
}

.laptimes-ticket ul {
  list-style-type: none;
  margin: 0;
}

.laptimes-ticket .laptimes-session {
  margin-top: 2rem;
}

.laptimes-ticket .laptimes-list {
  margin-left: 0;
}

.sortable {
  list-style-type: none;
  margin: 0;
}

.sortable li {
  margin: 0 5px 5px 5px;
  font-size: 1.2em;
}

html > body .sortable li {
  line-height: 1.2em;
}

.drag-state-highlight {
  height: 2.5em;
  line-height: 1.2em;
  background-color: #9390e83d;
}

#empty-group-list {
  min-height: 5rem;
  padding: 2rem;
  border: 3px dashed #ccc;
}

.group-list {
  margin: 2rem 0;
}

.group-preview {
  border: 2px dotted #eee;
  border-radius: 5px;
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  gap: 10px;
  padding: 1rem;
}

.group-preview .group-label {
  display: inline-block;
}

.group-preview .group-number {
  font-weight: bold;
}

.group-preview .group-drag {
  cursor: grab;
}

.group-preview .remove-group {
  cursor: pointer;
  text-align: right;
}

.session-preview .remove-session {
  cursor: pointer;
}

.session-preview {
  display: inline-block;
  border: 1px solid;
  padding: 0.5rem;
  margin: 1rem;
  border-radius: 5px;
  width: 20%;
}

.session-preview.break .color-sample {
  display: none;
}

.session-preview.break {
  display: block;
  background-color: #f0ecec;
  color: #000;
  width: 80%;
  margin: 1rem auto;
}

.calendar td {
  width: 14%;
  text-align: center;
}

.calendar .event {
  display: inline-block;
  border-radius: 10rem;
  color: white;
  padding: 3px;
  min-width: 30px;
  font-weight: bold;
}

table.ticket-info td:nth-child(1) {
  width: 25%;
}

table .even-cells-25 td {
  text-align: center;
  width: 25%;
}

table .even-cells-20 td {
  text-align: center;
  width: 20%;
}

table .even-cells-33 td {
  text-align: center;
  width: 33%;
}

/* User */

.event-user-search-results {
  list-style-type: none;
  padding: 0;
  margin: 0;
  border: 1px solid #ccc;
  position: absolute;
  background: white;
}

.event-user-subscribe-search .event-user-search-result {
  padding: 0.5rem;
}

.event-user-subscribe-search .event-user-search-result.subscribed {
  color: #ccc;
  background: #f0f0f0;
  cursor: not-allowed;
}

.event-user-subscribe-search .search-input {
  margin: 0;
}

.event-user-subscribe-search .delete-selected {
  cursor: pointer;
}

.selected-user {
  border: 1px solid #ccc;
  padding: 1rem;
  display: inline-block;
  margin: 0.5rem 0;
  border-radius: 0.3rem;
  box-shadow: #ccc 1px 1px;
}

.event-user-search-result:hover {
  background-color: #dbe8f7;
}

/* Calendar */
.calendar .today {
  background-color: #186db3;
}

.calendar .has-event {
  background-color: rgb(255, 72, 0);
}

.calendar .out {
  color: rgb(206, 206, 206);
}

.calendar .out.has-event {
  background-color: rgba(255, 72, 0, 0.3);
  color: #fff;
}

.calendar .has-tip {
  cursor: pointer;
}

.ticket-menu {
  position: relative;
}

.ticket-menu .dots {
  cursor: pointer;
}

.ticket-menu.active .menu {
  display: list-item;
}

.ticket-menu .menu {
  display: none;
  position: absolute;
  border: 1px solid #ccc;
  padding: 0.7rem;
  list-style-type: none;
  background: #fff;
  left: -3rem;
  min-width: 7rem;
  z-index: 10;
}

.ticket-menu li:hover {
  background-color: #eee;
}

.page-header {
  margin-bottom: 0.8rem;
}

.page-header .page-header-title {
  font-size: 1.4rem;
  font-weight: bold;
  color: #6a6c72;
}

.page-header .page-header-nav .breadcrumbs {
  margin-bottom: 0;
  font-weight: bold;
}

.container {
  background: #fff;
  padding: 1.4rem;
  margin-bottom: 0.5rem;
}

.sub-menu + .container {
  border-top-left-radius: 0;
}

/* Top bar status */

.top-bar-status {
  display: flex;
  flex-direction: row-reverse;
  background-color: #fff;
  margin: 2rem 0;
  padding: 0.3rem;
}

.top-bar-organization,
.top-bar-admin {
  font-size: 1.2rem;
  font-weight: 600;
}

.top-bar-admin {
  color: rgb(150, 5, 5);
}

.top-bar-item {
  display: flex;
  align-items: center;
  margin: 0.5rem;
  padding-right: 1rem;
  border-right: 1px solid #ccc;
}

.top-bar-item:first-child {
  border-right: 0;
}

.top-bar-organization-icon {
  width: 24px;
  height: 24px;
  margin-right: 0.3rem;
}

img.top-bar-organization-icon {
  border-radius: 50%;
}

/* Main content */
.main-content {
  margin-right: 2rem;
}

/* Sidebar */
.side-menu {
  background-color: rgba(252, 251, 251, 0.933);
  margin: 2rem;
  max-height: 60rem;
  min-width: 18rem;
}

.side-menu .logo {
  margin: 2rem;
  display: inline-block;
}

.side-menu a {
  color: #212121;
}

.side-menu .active a {
  font-weight: bold;
}

/* User pane */

.user-pane {
  margin: 2rem 0;
}

.user-cartridge {
  text-align: center;
}

.user-cartridge-picture {
  text-align: center;
}

.user-cartridge-picture-profile img {
  text-align: left;
  width: 8rem;
  height: 8rem;
  margin-left: 25px;
}

.user-cartridge-picture .icon {
  font-size: 9rem;
}

.user-cartridge-picture img {
  width: 8rem;
  height: 8rem;
  border-radius: 50%;
}

/* Menu */

.menu-list {
  list-style-type: none;
}

.menu-list li {
  padding: 0.5rem 1.5rem;
  display: flex;
  line-height: 1rem;
  margin-bottom: 0.5rem;
  align-items: center;
}

.menu-list li a {
  margin-left: 0.7rem;
}

.logout-pane {
  text-align: center;
  margin: 2rem 0;
}

/* End sidebar */

.sub-menu {
  list-style-type: none;
  display: flex;
  margin: 0;
}

.sub-menu li {
  background-color: #fff;
  padding: 1rem;
  border-top: 3px solid #eee;
}

.sub-menu li:hover {
  border-top-color: #ccc;
}

.sub-menu li.active {
  border-top-color: #1779ba;
  font-weight: 600;
}

#sub-menu-container {
  position: relative;
}

#timing-agent {
  position: absolute;
  right: 0;
  top: 30%;
  background: #fff;
  padding: 1rem;
  border-radius: 5px;
  border: 2px solid #fff;
}

.metrics .metric {
  width: 33%;
}

.drag-select {
  border: 1px solid #09518c;
  background: rgba(17, 102, 171, 0.2);
}

.schedule-list {
  text-align: justify;
}

.schedule {
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 1rem;
  margin: 1rem;
  display: inline-block;
  max-width: 33%;
  color: #6a6c72;
}

.schedule:hover {
  border-color: #186db3;
}

.schedule .schedule-name {
  font-weight: bold;
}

.color-sample {
  display: inline-block;
  vertical-align: middle;
  width: 2rem;
  height: 1.5rem;
  border-radius: 3rem;
  box-shadow: 0 0 6px #ccc;
}

.color-sample.small {
  width: 2.5rem;
}

.color-sample.very-small {
  width: 1.5rem;
}

.footer hr {
  width: 90%;
}

.footer .version {
  text-align: center;
  padding: 1rem;
}

a.success {
  color: rgb(2, 151, 64);
}

a.warning {
  color: rgb(246, 137, 13);
}

a.danger {
  color: rgb(150, 5, 5);
}

/* Participant list */

.ticket-comment-preview:hover::after {
  content: attr(data-value);
  position: absolute;
  background: #fff;
  border: 1px solid #ccc;
  padding: 0.5rem;
  border-radius: 5px;
  z-index: 10;
  white-space: pre;
}

.participant-container {
  position: relative;
}

.participant-filters {
  position: absolute;
  top: 0;
  right: 0;
  background: white;
  padding: 1.5rem;
  bottom: 0;
  border-left: 4px solid #7d7d7d;
  border-top: 1px solid #f0f0f0;
}

.participant-filters.closed {
  width: 0;
  padding: 0;
  overflow: hidden;
}

.participant-list-filter-close {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  cursor: pointer;
}

.participant-list-filter-open {
  cursor: pointer;
}

.participant-list [type="checkbox"] {
  margin: 0;
}

.participant-list td.has-tip {
  border-bottom: 0;
}

.participant-list .not-paid {
  color: rgb(255, 0, 0);
}

.participant-list .no-tickets-found {
  min-height: 160vh;
  padding-top: 5vh;
}

.participant-list-group-name {
  background-color: #e6e6e6 !important;
  text-align: center;
  font-weight: bold;
  color: #646464;
}

.clear-search {
  background: #e6e6e6;
  padding: 0 0.7rem;
  border-left: 0;
  cursor: pointer;
}

/* Participant filters */

.participant-filters .has-tip {
  font-weight: normal !important;
}

.callout.primary {
  background-color: #eff9ff;
}

[data-edit-inline] {
  text-decoration: underline;
}

/* Form */
input[type="text"],
input[type="tel"],
input[type="number"],
input[type="email"],
.button,
select {
  border-radius: 4px !important;
}

label {
  font-weight: 600;
  color: #6a6c72;
}

form p input {
  margin-bottom: 0 !important;
}

.inline-block {
  display: inline-block;
}

.inline-field label {
  display: inline;
}

.helptext {
  font-size: 0.6rem;
}

.errorlist {
  color: #701010ef;
}

.field-required label::before {
  content: " *";
}

.user-details {
  line-height: 1.9rem;
}

.schedule-alert {
  text-align: center;
  padding: 0.5rem 0;
  background-color: #bc3838ef;
  color: rgb(255, 255, 255);
}

.schedule-alert a {
  color: #fff;
  text-decoration: underline;
}

.schedule-alert a:hover {
  color: #fff;
  text-decoration: none;
}

/* Time input */

.split-time-widget {
  display: flex;
  align-items: center;
}

.time-unit {
  width: 5rem;
  margin: 0 0.5rem;
}

/* Realtime */

#agent-code-value {
  font-size: 4rem;
  letter-spacing: 1rem;
  text-align: center;
}

#agent-id-value {
  color: #1779ba;
}

.agentStatusUpdate {
  color: rgb(199, 53, 53) !important;
}

.agentStatusUpdate.ok {
  color: #239a34 !important;
}

/* Ticket barcode scanner */

#user-details-scan p {
  margin: 0;
}

#user-details-scan #container {
  padding: 0.4rem;
}

/* Intl tel input */

.iti__flag {
  background-image: url("vendor/intl-tel-input/img/flags.png");
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .iti__flag {
    background-image: url("vendor/intl-tel-input/img/flags@2x.png");
  }
}