@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .btn-primary {
    @apply py-2 px-4 bg-blue-200 rounded-md;
  }

  .btn-gray {
    @apply py-2 px-4 bg-gray-400 rounded-md;
  }

  .btn-red {
    @apply py-2 px-4 bg-red-400 rounded-md;
  }

  .btn-small-red {
    @apply p-1 m-1 bg-red-400 rounded-md;
  }

  .btn-green {
    @apply py-2 px-4 bg-green-400 rounded-md;
  }

  .btn-small-green {
    @apply p-1 m-1 bg-green-400 rounded-md;
  }
}
/* line 1, app/assets/stylesheets/navbar.scss */
i.icon {
  display: inline-block !important;
}

/* line 5, app/assets/stylesheets/navbar.scss */
.ui.container img {
  max-width: 100%;
  width: auto;
  height: auto;
}

/* line 11, app/assets/stylesheets/navbar.scss */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  /*main {
        flex: 1;
    }*/
}

/*******************************
         Site Overrides
*******************************/
/* line 25, app/assets/stylesheets/navbar.scss */
.page-header {
  background-image: url(/images/header.jpg);
  background-position: center top;
  background-attachment: fixed;
  height: 300px;
  position: relative;
  margin-bottom: 10px;
}

/* line 33, app/assets/stylesheets/navbar.scss */
.big-page-header {
  height: 700px;
}

/* line 36, app/assets/stylesheets/navbar.scss */
.page-header svg {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 2vw;
}

/* line 42, app/assets/stylesheets/navbar.scss */
.page-header .logo {
  position: absolute;
  left: 50%;
  margin-left: -70px;
  bottom: 120px;
}

/* line 48, app/assets/stylesheets/navbar.scss */
.page-header .logo img {
  height: 140px;
  width: 140px;
  position: absolute;
}

/* line 53, app/assets/stylesheets/navbar.scss */
.ui.inverted.vertical.footer.segment {
  margin-top: 2rem;
}

/* line 56, app/assets/stylesheets/navbar.scss */
.segment .image img {
  max-width: 100%;
}

/* line 59, app/assets/stylesheets/navbar.scss */
.segment h2 span {
  font-size: 12px;
  float: right;
  font-weight: normal;
  color: #7a7a7a;
}

/* line 65, app/assets/stylesheets/navbar.scss */
.ui.container .ui.message {
  margin-top: 70px;
}

@media screen and (max-width: 780px) {
  /* line 69, app/assets/stylesheets/navbar.scss */
  .ui.top.fixed.menu.stackable.inverted {
    position: absolute;
  }
}

/*******************************
    User Variable Overrides
*******************************/
/* line 77, app/assets/stylesheets/navbar.scss */
.ui .card {
  margin-top: 2rem !important;
  margin-right: 3rem !important;
}

/*******************************
         Site Overrides
*******************************/
/* line 86, app/assets/stylesheets/navbar.scss */
.page-header {
  background-image: url(/images/header.jpg);
  background-position: center top;
  background-attachment: fixed;
  height: 300px;
  position: relative;
  margin-bottom: 10px;
}

/* line 94, app/assets/stylesheets/navbar.scss */
.big-page-header {
  height: 700px;
}

/* line 97, app/assets/stylesheets/navbar.scss */
.page-header svg {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 2vw;
}

/* line 103, app/assets/stylesheets/navbar.scss */
.page-header .logo {
  position: absolute;
  left: 50%;
  margin-left: -70px;
  bottom: 120px;
}

/* line 109, app/assets/stylesheets/navbar.scss */
.page-header .logo img {
  height: 140px;
  width: 140px;
  position: absolute;
}

/* line 114, app/assets/stylesheets/navbar.scss */
.ui.inverted.vertical.footer.segment {
  margin-top: 2rem;
}

/* line 117, app/assets/stylesheets/navbar.scss */
.segment .image img {
  max-width: 100%;
}

/* line 120, app/assets/stylesheets/navbar.scss */
.segment h2 span {
  font-size: 12px;
  float: right;
  font-weight: normal;
  color: #7a7a7a;
}

/* line 126, app/assets/stylesheets/navbar.scss */
.ui.container .ui.message {
  margin-top: 70px;
}

@media screen and (max-width: 780px) {
  /* line 130, app/assets/stylesheets/navbar.scss */
  .ui.top.fixed.menu.stackable.inverted {
    position: absolute;
  }
}
/*
 * 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.
 *


 */
/* Fix icons getting 'display: table-cell' */
/* line 18, app/assets/stylesheets/application.scss */
.navbar {
  background-color: green;
  height: 40px;
}

/* line 23, app/assets/stylesheets/application.scss */
.margin-top {
  margin-top: 46px;
}

/* line 27, app/assets/stylesheets/application.scss */
.margin-yield {
  margin-top: -60px;
}

/* line 31, app/assets/stylesheets/application.scss */
body {
  margin: 0;
  color: black;
  background-color: white;
}

/* line 37, app/assets/stylesheets/application.scss */
.th {
  padding: 5px;
}

/* line 41, app/assets/stylesheets/application.scss */
.item {
  margin: 10px;
  text-align: center;
}

/* line 46, app/assets/stylesheets/application.scss */
.container {
  vertical-align: middle;
  text-align: center;
}

/* line 51, app/assets/stylesheets/application.scss */
.button {
  border: none;
  color: black;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
}

/* line 60, app/assets/stylesheets/application.scss */
td {
  text-align: center;
}

/* line 64, app/assets/stylesheets/application.scss */
.blue {
  background-color: aqua;
}

/* line 68, app/assets/stylesheets/application.scss */
.red {
  background-color: red;
}

/* line 72, app/assets/stylesheets/application.scss */
.gray {
  background-color: gray;
}

/* line 76, app/assets/stylesheets/application.scss */
.card {
  padding-right: 20px;
  padding-left: 20px;
  padding-top: 5px;
  padding-bottom: 30px;
  margin: 10px;
  min-width: 240px;
  border-radius: 15px;
  background: #e0e0e0;
  box-shadow: 15px 15px 30px #bebebe, -15px -15px 30px #ffffff;
}

/* line 89, app/assets/stylesheets/application.scss */
.gamecard {
  padding-right: 0px;
  padding-left: 0px;
}

/* line 94, app/assets/stylesheets/application.scss */
.roundcard {
  margin-left: 2px;
  margin-right: 2px;
  box-shadow: none;
  border: 1px gray solid;
  padding: 5px;
  min-width: 0px;
}

/* line 103, app/assets/stylesheets/application.scss */
.best {
  border: 2px black solid;
}

/* line 107, app/assets/stylesheets/application.scss */
.textInputWrapper {
  position: relative;
  width: fit-content;
  margin-right: auto;
  margin-left: auto;
  --accent-color: blue;
}

/* line 115, app/assets/stylesheets/application.scss */
.textInputWrapper:before,
.textInputWrapper:after {
  content: "";
  left: 5px;
  position: absolute;
  pointer-events: none;
  bottom: 0px;
  z-index: 4;
  width: 95%;
}

/* line 126, app/assets/stylesheets/application.scss */
.textInputWrapper:focus-within:before {
  border-bottom: 1px solid var(--accent-color);
}

/* line 130, app/assets/stylesheets/application.scss */
.textInputWrapper:before {
  transition: border-bottom-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
  border-bottom: 1px solid rgba(0, 0, 0, 0.42);
}

/* line 135, app/assets/stylesheets/application.scss */
.textInputWrapper:focus-within:before {
  border-bottom: 1px solid var(--accent-color);
  transform: scaleX(1);
  left: 5px;
  width: 95%;
}

/* line 142, app/assets/stylesheets/application.scss */
.textInputWrapper:focus-within:after {
  border-bottom: 2px solid var(--accent-color);
  transform: scaleX(1);
  left: 5px;
  width: 95%;
}

/* line 149, app/assets/stylesheets/application.scss */
.textInputWrapper:after {
  content: "";
  transform: scaleX(0);
  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1) 0ms;
  will-change: transform;
  border-bottom: 2px solid var(--accent-color);
  border-bottom-color: var(--accent-color);
  left: 5px;
  width: 95%;
}

/* line 160, app/assets/stylesheets/application.scss */
.textInput::placeholder {
  transition: opacity 250ms cubic-bezier(0, 0, 0.2, 1) 0ms;
  opacity: 1;
  user-select: none;
  color: black;
}

/* line 167, app/assets/stylesheets/application.scss */
.textInputWrapper .textInput {
  border-radius: 5px 5px 5px 5px;
  max-height: 36px;
  background-color: #e0e0e0;
  transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1);
  transition-duration: 1000ms;
  transition-property: background-color;
  color: black;
  font-size: 14px;
  font-weight: 500;
  padding: 12px;
  width: 100%;
  text-align: center;
}

/* line 182, app/assets/stylesheets/application.scss */
.textInputWrapper .textInput:focus,
.textInputWrapper .textInput:active {
  outline: none;
}

/* line 187, app/assets/stylesheets/application.scss */
.textInputWrapper:focus-within .textInput,
.textInputWrapper .textInput:focus,
.textInputWrapper .textInput:active {
  background-color: white;
}

/* line 193, app/assets/stylesheets/application.scss */
.textInputWrapper:focus-within .textInput::placeholder {
  opacity: 0;
}

/* line 197, app/assets/stylesheets/application.scss */
.slider {
  background-color: #ffffff2b;
  border-radius: 100px;
  padding: 1px;
  margin: 10px;
  cursor: pointer;
  transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0s;
  align-items: center;
  position: relative;
  display: inline-block;
  width: 51px;
  height: 29px;
  box-shadow: rgba(0, 0, 0, 0.62) 0px 0px 5px inset, rgba(0, 0, 0, 0.21) 0px 0px 0px 24px inset, #BFDBFE 0px 0px 0px 0px inset, rgba(224, 224, 224, 0.45) 0px 1px 0px 0px;
}

/* line 213, app/assets/stylesheets/application.scss */
.slider::after {
  content: "";
  display: flex;
  top: 2.3px;
  left: 2px;
  width: 26px;
  height: 26px;
  background-color: #e3e3e3;
  border-radius: 200px;
  position: absolute;
  box-shadow: transparent 0px 0px 0px 2px, rgba(0, 0, 0, 0.3) 0px 6px 6px;
  transition: left 300ms cubic-bezier(0.4, 0, 0.2, 1) 0s, background-color 300ms cubic-bezier(0.4, 0, 0.2, 1) 0s;
  will-change: left, background-color;
}

/* line 228, app/assets/stylesheets/application.scss */
.switch input[type="checkbox"]:checked + .slider {
  box-shadow: rgba(0, 0, 0, 0.62) 0px 0px 5px inset, #BFDBFE 0px 0px 0px 2px inset, #BFDBFE 0px 0px 0px 24px inset, rgba(224, 224, 224, 0.45) 0px 1px 0px 0px;
}

/* line 233, app/assets/stylesheets/application.scss */
.switch input[type="checkbox"]:checked + .slider::after {
  left: 24px;
}

/* line 237, app/assets/stylesheets/application.scss */
.switch input[type="checkbox"] {
  display: none;
}

/* line 241, app/assets/stylesheets/application.scss */
.rotate {
  padding-left: 0px;
  padding-right: 0px;
  margin: 0;
  min-width: 40px;
}

/* line 248, app/assets/stylesheets/application.scss */
.p {
  margin: 5px;
}