/*================================================================================
	Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template
	Version: 2.0
	Author: PIXINVENT
	Author URL: http://www.themeforest.net/user/pixinvent
================================================================================

NOTE:
------
PLACE HERE YOUR OWN SCSS CODES AND IF NEEDED, OVERRIDE THE STYLES FROM THE OTHER STYLESHEETS.
WE WILL RELEASE FUTURE UPDATES SO IN ORDER TO NOT OVERWRITE YOUR STYLES IT'S BETTER LIKE THIS.  */
.event-day-item-picture {
  grid-area: picture;
}

.event-day-item-name {
  grid-area: name;
  font-weight: bold;
}

.event-day-item-status {
  grid-area: status;
}

.event-day-item-date {
  grid-area: date;
}

.event-day-item-items {
  grid-area: items;
  display: block;
}

.day-subscriber-item {
  line-break: auto;
}

.event-day-subscription-list {
  padding: 26px 32px;
  width: 100%;
  max-width: 100%;
}

.event-day-subscription-list-header {
  display: grid;
  grid-template-columns: 70px 240px 120px 525px auto;
  grid-template-areas: "picture name status items date";
  text-align: left;
}

.event-day-subscription-list-content {
  display: grid;
  grid-template-columns: 70px 240px 120px 525px auto;
  grid-template-areas: "picture name status items date";
  text-align: left;
}

.event-day-subscription-list-content-item {
  margin: auto 0 auto 0;
}

@media only screen and (max-width: 600px) {
  .event-day-subscription-list {
    padding: 20px 26px;
    width: 100%;
  }

  .event-day-subscription-list-header {
    display: none;
  }

  .event-day-subscription-list-content {
    display: grid;
    grid-template-areas: "picture name" "picture date" "picture items" "picture status";
    text-align: left;
  }

  .event-day-subscription-list-content-item {
    margin: 0;
  }

  .events-list-dashboard {
    padding: 26px 0 !important;
  }
}
.events-list-dashboard {
  padding: 26px 32px;
  width: 100%;
  max-width: 100%;
}

.events-list-dashboard .header {
  display: grid;
  grid-template-columns: 40% 30% 30%;
  text-align: left;
  padding-bottom: 1em;
  font-size: 1.2em;
}

.events-list-dashboard .events-content {
  display: grid;
  grid-template-columns: 40% 30% 30%;
  grid-template-areas: "name dayname actions" "daydate dayname actions ";
  text-align: left;
  font-size: 1em;
  padding-bottom: 1em;
}

.events-list-dashboard .event-name {
  grid-area: name;
  font-weight: bold;
}

.events-list-dashboard .event-date {
  grid-area: daydate;
}

.events-list-dashboard .event-day-name {
  grid-area: dayname;
}

.events-list-dashboard .event-spots {
  font-weight: bold;
}

.events-list-dashboard .event-day-actions {
  grid-area: actions;
  display: block;
}

@media only screen and (max-width: 600px) {
  .events-list-dashboard .header {
    display: none;
  }

  .events-list-dashboard .events-content {
    display: grid;
    grid-template-columns: auto;
    grid-template-areas: "name" "daydate" "dayname" "actions";
    text-align: left;
    padding-bottom: 1em;
  }

  .events-list-dashboard .event-name {
    font-size: 1.5em;
    padding-bottom: 0.2em;
  }

  .events-list-dashboard .event-day-name {
    padding-bottom: 0.3em;
  }

  .events-list-dashboard .event-day-actions {
    padding-bottom: 0.3em;
  }

  .events-list-dashboard .events .event-day-actions .btn {
    margin: 1em 1em 1em 0;
  }
}
/* error styling */
*, :after, :before {
  box-sizing: border-box;
  border: 0 solid #e2e8f0;
}

.border-r {
  border-right-width: 1px;
}

.flex {
  display: flex;
}

.justify-center {
  justify-content: center;
}

.text-lg {
  font-size: 1.125rem;
}

.ml-4 {
  margin-left: 1rem;
}

.min-h-screen {
  min-height: 50vh;
}

.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}

.uppercase {
  text-transform: uppercase;
}

.tracking-wider {
  letter-spacing: 0.05em;
}

@media (min-width: 640px) {
  .sm\:items-center {
    align-items: center;
  }
}
.select2-container--default .select2-selection--single .select2-selection__arrow b {
  height: 14px;
  left: 0;
  border-style: none;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: #b4b7bd;
}