@font-face {
  font-family: Inter;
  src: font-url(/assets/Inter-VariableFont_opsz,wght-e71707b5462f6af646e7e14399ca630783ef0df560544b17d64d940d6fc418cf.ttf);
}

body {
  font-family: Inter, sans-serif;
  margin: 0;
}

.event-type-availability {
  background-color: white;
  border: 2px solid;
  color: #D4D4D4;
}

.event-type-availability.dark {
  background-color: #0A2540;
  color: #EEF5FF;
}

.event-type-availability.desktop {
  max-width: 1200px;
  width: 1200px;
}

.event-type-availability.mobile {
  max-width: 996px;
  width: 996px;
}

.header {
  box-sizing: border-box;
  border-color: #D4D4D4;
  width: 100%;
}

.dark .header {
  border-color: #EEF5FF;
}

.desktop .header {
  border-bottom: 2px solid;
  padding: 48px 64px;
}

.mobile .header {
  border-bottom: 3px solid;
  padding: 32px;
}

.avatar-container {
  vertical-align: top;
}

.desktop .avatar-container {
  height: 160px;
  min-width: 160px;
  width: 160px;
}

.mobile .avatar-container {
  height: 219px;
  min-width: 219px;
  width: 219px;
}

.owner-initials {
  background-color: #EEF5FF;
  border-radius: 50%;
  color: #0069FF;
  display: block;
  font-weight: bold;
  height: 100%;
  text-align: center;
  width: 100%;
}

.dark .owner-initials {
  background-color: #0069FF;
  color: white;
}

.desktop .owner-initials {
  font-size: 78px;
  line-height: 2.3;
  max-height: 160px;
}

.mobile .owner-initials {
  font-size: 108px;
  line-height: 2.3;
  max-height: 219px;
}

.owner-name {
  color: #6E6E6E;
  font-size: 28px;
  font-weight: bold;
  line-height: 48px;
  margin: 0;
}

.dark .owner-name {
  color: white;
}

.mobile .owner-name {
  font-size: 42px;
  line-height: 72px;
}

.event-name {
  color: #0A2540;
  font-size: 36px;
  font-weight: bold;
  margin: 0;
}

.dark .event-name {
  color: white;
}

.mobile .event-name {
  font-size: 54px;
}

.event-info {
  color: #6E6E6E;
}

.dark .event-info {
  color: white;
}

.desktop .event-info {
  margin: 16px 0 0;
}

.mobile .event-info {
  margin: 30px 0 0;
}

.arrow {
  box-sizing: border-box;
  color: #919191;
  position: relative;
}

.desktop .arrow {
  height: 80px;
  padding: 16px;
  width: 80px;
}

.mobile .arrow {
  height: 120px;
  padding: 24px;
  width: 120px;
}

.active-arrow {
  background-color: #EEF5FF;
  color: #0069FF;
}

.dark .active-arrow {
  background-color: #0069FF;
  color: white;
}

.desktop .active-arrow {
  border-radius: 80px;
}

.mobile .active-arrow {
  border-radius: 60px;
}

.event-date {
  color: black;
  display: block;
}

.dark .event-date {
  color: white;
}

.availability-item {
  border-color: #0069FF;
  box-sizing: border-box;
  color: #0069FF;
  font-weight: bold;
  text-align: center;
}

.dark .availability-item {
  border-color: white;
  color: white;
}

.desktop .availability-item {
  border: 2px solid;
  border-radius: 8px;
  font-size: 28px;
  margin: 0 0 16px;
  padding: 24px 32px 18px;
}

.mobile .availability-item {
  border: 3px solid;
  border-radius: 12px;
  font-size: 42px;
  margin: 0 0 24px;
  padding: 32px 48px 26px;
}

.availability-item.small {
  display: inline-block;
  margin-right: 12px;
  line-height: 36px;
  padding: 18px 18px 12px;
}

.more-availabilities-item {
  background-color: #EEF5FF;
  box-sizing: border-box;
  color: #0069FF;
  font-weight: bold;
  margin: 0;
  position: relative;
}

.dark .more-availabilities-item {
  background-color: #0069FF;
  color: white;
}

.desktop .more-availabilities-item {
  border-radius: 8px;
  font-size: 28px;
  padding: 24px 16px 24px 32px;
}

.mobile .more-availabilities-item {
  border-radius: 12px;
  font-size: 42px;
  padding: 36px 24px 36px 48px;
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/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
 * 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.
 *


 */
/* @import "tailwindcss"; */