/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
 * or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *
 *= require_tree .
 *= require_self
 */

html {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;

  --grey-50: #F9FAFB;
  --grey-100: #F3F4F6;
  --grey-200: #E5E7EB;
  --grey-400: #9CA3AF;
  --grey-500: #6B7280;
  --grey-700: #374151;
  --grey-900: #111827;

  --red-400: #F87171;
  --red-500: #EF4444;
  --red-600: #DC2626;

  --yellow-400: #FBBF24;
  --yellow-500: #F59E0B;

  --green-300: #6EE7B7;
  --green-400: #34D399;
  --green-500: #10B981;

  --blue-400: #60A5FA;
  --blue-500: #3B82F6;

  --main-width: 1056px;

  --primary: var(--red-600);

  --border-color: var(--grey-200);
  --text-color: var(--grey-900);

  font-family: 'Open Sans', sans-serif;
}

body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;

  color: var(--text-color)
}

h1 {
  padding: 2rem 0 1rem;
}

button {
  border: none;
  border-radius: .25rem;
  padding: 0.5em .5em;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 1rem;
  cursor: pointer;
}

button:hover {
  box-shadow: 0 .25rem .25rem 0 var(--grey-50);
}

/* --------------------------------------- */

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

/* --------------------------------------- */

.pill {
  margin: .2rem 0;
  padding: .1rem .4rem;
  border-radius: 5px;

  font-size: .9rem;
  font-weight: 600;
  letter-spacing: .1rem;

  background: var(--grey-200);
}

/* --------------------------------------- */

.popover {
  display: flex;
  flex-direction: column;
  width: 600px;
  padding: 1em;
  color: black;
}

.popover-header {
  display: flex;
  padding-bottom: 1em;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.popover-description {
  margin: 0;
  padding: 0;
}

.popover-close {
  background: transparent;
  padding: 0;
  font-weight: 700;
  font-size: 20px;
  color: var(--grey-400);
}

.popover-body {
  padding: 1em 0;
}

.popover-footer {
  border-top: 1px solid var(--grey-50);
}

.tippy-box[data-theme~='rmp'] {
  background: white;
  box-shadow: 8px 0 30px 4px rgba(0, 0, 0, .2), 8px 4px 10px 0 rgba(0, 0, 0, .05);
  border-radius: 3px;

  transition: all cubic-bezier(.19,1,.22,1) .2s;
}
.tippy-box[data-theme~='rmp'][data-placement^='top'] > .tippy-arrow::before {
  border-top-color: white;
}
.tippy-box[data-theme~='rmp'][data-placement^='bottom'] > .tippy-arrow::before {
  border-bottom-color: white;
}
.tippy-box[data-theme~='rmp'][data-placement^='left'] > .tippy-arrow::before {
  border-left-color: white;
}
.tippy-box[data-theme~='rmp'][data-placement^='right'] > .tippy-arrow::before {
  border-right-color: white;
}