@import url(https://fonts.googleapis.com/css2?family=Inconsolata&display=swap);.ReactCrop {
  position: relative;
  display: inline-block;
  cursor: crosshair;
  overflow: hidden;
  max-width: 100%;
}

.ReactCrop:focus {
  outline: none;
}

.ReactCrop--disabled, .ReactCrop--locked {
  cursor: inherit;
}

.ReactCrop__image {
  display: block;
  max-width: 100%;
  -ms-touch-action: none;
      touch-action: none;
}

.ReactCrop__crop-selection {
  position: absolute;
  top: 0;
  left: 0;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  cursor: move;
  -webkit-box-shadow: 0 0 0 9999em rgba(0, 0, 0, 0.5);
          box-shadow: 0 0 0 9999em rgba(0, 0, 0, 0.5);
  -ms-touch-action: none;
      touch-action: none;
  border: 1px solid;
  border-image-source: url("data:image/gif;base64,R0lGODlhCgAKAJECAAAAAP///////wAAACH/C05FVFNDQVBFMi4wAwEAAAAh/wtYTVAgRGF0YVhNUDw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OEI5RDc5MTFDNkE2MTFFM0JCMDZEODI2QTI4MzJBOTIiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OEI5RDc5MTBDNkE2MTFFM0JCMDZEODI2QTI4MzJBOTIiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuZGlkOjAyODAxMTc0MDcyMDY4MTE4MDgzQzNDMjA5MzREQ0ZDIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjAyODAxMTc0MDcyMDY4MTE4MDgzQzNDMjA5MzREQ0ZDIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+Af/+/fz7+vn49/b19PPy8fDv7u3s6+rp6Ofm5eTj4uHg397d3Nva2djX1tXU09LR0M/OzczLysnIx8bFxMPCwcC/vr28u7q5uLe2tbSzsrGwr66trKuqqainpqWko6KhoJ+enZybmpmYl5aVlJOSkZCPjo2Mi4qJiIeGhYSDgoGAf359fHt6eXh3dnV0c3JxcG9ubWxramloZ2ZlZGNiYWBfXl1cW1pZWFdWVVRTUlFQT05NTEtKSUhHRkVEQ0JBQD8+PTw7Ojk4NzY1NDMyMTAvLi0sKyopKCcmJSQjIiEgHx4dHBsaGRgXFhUUExIREA8ODQwLCgkIBwYFBAMCAQAAIfkEBQoAAgAsAAAAAAoACgAAAhWEERkn7W3ei7KlagMWF/dKgYeyGAUAIfkEBQoAAgAsAAAAAAoACgAAAg+UYwLJ7RnQm7QmsCyVKhUAIfkEBQoAAgAsAAAAAAoACgAAAhCUYgLJHdiinNSAVfOEKoUCACH5BAUKAAIALAAAAAAKAAoAAAIRVISAdusPo3RAzYtjaMIaUQAAIfkEBQoAAgAsAAAAAAoACgAAAg+MDiem7Q8bSLFaG5il6xQAIfkEBQoAAgAsAAAAAAoACgAAAg+UYRLJ7QnQm7SmsCyVKhUAIfkEBQoAAgAsAAAAAAoACgAAAhCUYBLJDdiinNSEVfOEKoECACH5BAUKAAIALAAAAAAKAAoAAAIRFISBdusPo3RBzYsjaMIaUQAAOw==");
  border-image-slice: 1;
  border-image-repeat: repeat;
}

.ReactCrop--disabled .ReactCrop__crop-selection {
  cursor: inherit;
}

.ReactCrop--circular-crop .ReactCrop__crop-selection {
  border-radius: 50%;
  -webkit-box-shadow: 0px 0px 1px 1px white, 0 0 0 9999em rgba(0, 0, 0, 0.5);
          box-shadow: 0px 0px 1px 1px white, 0 0 0 9999em rgba(0, 0, 0, 0.5);
}

.ReactCrop--invisible-crop .ReactCrop__crop-selection {
  display: none;
}

.ReactCrop__rule-of-thirds-vt::before, .ReactCrop__rule-of-thirds-vt::after, .ReactCrop__rule-of-thirds-hz::before, .ReactCrop__rule-of-thirds-hz::after {
  content: "";
  display: block;
  position: absolute;
  background-color: rgba(255, 255, 255, 0.4);
}

.ReactCrop__rule-of-thirds-vt::before, .ReactCrop__rule-of-thirds-vt::after {
  width: 1px;
  height: 100%;
}

.ReactCrop__rule-of-thirds-vt::before {
  left: 33.3333%;
  left: 33.3333333333%;
}

.ReactCrop__rule-of-thirds-vt::after {
  left: 66.6666%;
  left: 66.6666666667%;
}

.ReactCrop__rule-of-thirds-hz::before, .ReactCrop__rule-of-thirds-hz::after {
  width: 100%;
  height: 1px;
}

.ReactCrop__rule-of-thirds-hz::before {
  top: 33.3333%;
  top: 33.3333333333%;
}

.ReactCrop__rule-of-thirds-hz::after {
  top: 66.6666%;
  top: 66.6666666667%;
}

.ReactCrop__drag-handle {
  position: absolute;
}

.ReactCrop__drag-handle::after {
  position: absolute;
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  background-color: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.7);
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  outline: 1px solid transparent;
}

.ReactCrop .ord-nw {
  top: 0;
  left: 0;
  margin-top: -5px;
  margin-left: -5px;
  cursor: nw-resize;
}

.ReactCrop .ord-nw::after {
  top: 0;
  left: 0;
}

.ReactCrop .ord-n {
  top: 0;
  left: 50%;
  margin-top: -5px;
  margin-left: -5px;
  cursor: n-resize;
}

.ReactCrop .ord-n::after {
  top: 0;
}

.ReactCrop .ord-ne {
  top: 0;
  right: 0;
  margin-top: -5px;
  margin-right: -5px;
  cursor: ne-resize;
}

.ReactCrop .ord-ne::after {
  top: 0;
  right: 0;
}

.ReactCrop .ord-e {
  top: 50%;
  right: 0;
  margin-top: -5px;
  margin-right: -5px;
  cursor: e-resize;
}

.ReactCrop .ord-e::after {
  right: 0;
}

.ReactCrop .ord-se {
  bottom: 0;
  right: 0;
  margin-bottom: -5px;
  margin-right: -5px;
  cursor: se-resize;
}

.ReactCrop .ord-se::after {
  bottom: 0;
  right: 0;
}

.ReactCrop .ord-s {
  bottom: 0;
  left: 50%;
  margin-bottom: -5px;
  margin-left: -5px;
  cursor: s-resize;
}

.ReactCrop .ord-s::after {
  bottom: 0;
}

.ReactCrop .ord-sw {
  bottom: 0;
  left: 0;
  margin-bottom: -5px;
  margin-left: -5px;
  cursor: sw-resize;
}

.ReactCrop .ord-sw::after {
  bottom: 0;
  left: 0;
}

.ReactCrop .ord-w {
  top: 50%;
  left: 0;
  margin-top: -5px;
  margin-left: -5px;
  cursor: w-resize;
}

.ReactCrop .ord-w::after {
  left: 0;
}

.ReactCrop__disabled .ReactCrop__drag-handle {
  cursor: inherit;
}

.ReactCrop__drag-bar {
  position: absolute;
}

.ReactCrop__drag-bar.ord-n {
  top: 0;
  left: 0;
  width: 100%;
  height: 6px;
  margin-top: -3px;
}

.ReactCrop__drag-bar.ord-e {
  right: 0;
  top: 0;
  width: 6px;
  height: 100%;
  margin-right: -3px;
}

.ReactCrop__drag-bar.ord-s {
  bottom: 0;
  left: 0;
  width: 100%;
  height: 6px;
  margin-bottom: -3px;
}

.ReactCrop__drag-bar.ord-w {
  top: 0;
  left: 0;
  width: 6px;
  height: 100%;
  margin-left: -3px;
}

.ReactCrop--new-crop .ReactCrop__drag-bar, .ReactCrop--new-crop .ReactCrop__drag-handle, .ReactCrop--fixed-aspect .ReactCrop__drag-bar {
  display: none;
}

.ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-n, .ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-e, .ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-s, .ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-w {
  display: none;
}

@media (pointer: coarse) {
  .ReactCrop .ord-n,
  .ReactCrop .ord-e,
  .ReactCrop .ord-s,
  .ReactCrop .ord-w {
    display: none;
  }
  .ReactCrop__drag-handle {
    width: 24px;
    height: 24px;
  }
}
/*!
 * https://github.com/arqex/react-datetime
 */
.rdt {
  position: relative;
}

.rdtPicker {
  display: none;
  position: absolute;
  min-width: 250px;
  padding: 4px;
  margin-top: 1px;
  z-index: 99999 !important;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  border: 1px solid #f9f9f9;
}

.rdtOpen .rdtPicker {
  display: block;
}

.rdtStatic .rdtPicker {
  box-shadow: none;
  position: static;
}

.rdtPicker .rdtTimeToggle {
  text-align: center;
}

.rdtPicker table {
  width: 100%;
  margin: 0;
}

.rdtPicker td,
.rdtPicker th {
  text-align: center;
  height: 28px;
}

.rdtPicker td {
  cursor: pointer;
}

.rdtPicker td.rdtDay:hover,
.rdtPicker td.rdtHour:hover,
.rdtPicker td.rdtMinute:hover,
.rdtPicker td.rdtSecond:hover,
.rdtPicker .rdtTimeToggle:hover {
  background: #eeeeee;
  cursor: pointer;
}

.rdtPicker td.rdtOld,
.rdtPicker td.rdtNew {
  color: #999999;
}

.rdtPicker td.rdtToday {
  position: relative;
}

.rdtPicker td.rdtToday:before {
  content: "";
  display: inline-block;
  border-left: 7px solid transparent;
  border-bottom: 7px solid #428bca;
  border-top-color: rgba(0, 0, 0, 0.2);
  position: absolute;
  bottom: 4px;
  right: 4px;
}

.rdtPicker td.rdtActive,
.rdtPicker td.rdtActive:hover {
  background-color: #428bca;
  color: #fff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}

.rdtPicker td.rdtActive.rdtToday:before {
  border-bottom-color: #fff;
}

.rdtPicker td.rdtDisabled,
.rdtPicker td.rdtDisabled:hover {
  background: none;
  color: #999999;
  cursor: not-allowed;
}

.rdtPicker td span.rdtOld {
  color: #999999;
}

.rdtPicker td span.rdtDisabled,
.rdtPicker td span.rdtDisabled:hover {
  background: none;
  color: #999999;
  cursor: not-allowed;
}

.rdtPicker th {
  border-bottom: 1px solid #f9f9f9;
}

.rdtPicker .dow {
  width: 14.2857%;
  border-bottom: none;
  cursor: default;
}

.rdtPicker th.rdtSwitch {
  width: 100px;
}

.rdtPicker th.rdtNext,
.rdtPicker th.rdtPrev {
  font-size: 21px;
  vertical-align: top;
}

.rdtPrev span,
.rdtNext span {
  display: block;
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Chrome/Safari/Opera */ /* Konqueror */ /* Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none;
}

.rdtPicker th.rdtDisabled,
.rdtPicker th.rdtDisabled:hover {
  background: none;
  color: #999999;
  cursor: not-allowed;
}

.rdtPicker thead tr:first-of-type th {
  cursor: pointer;
}

.rdtPicker thead tr:first-of-type th:hover {
  background: #eeeeee;
}

.rdtPicker tfoot {
  border-top: 1px solid #f9f9f9;
}

.rdtPicker button {
  border: none;
  background: none;
  cursor: pointer;
}

.rdtPicker button:hover {
  background-color: #eee;
}

.rdtPicker thead button {
  width: 100%;
  height: 100%;
}

td.rdtMonth,
td.rdtYear {
  height: 50px;
  width: 25%;
  cursor: pointer;
}

td.rdtMonth:hover,
td.rdtYear:hover {
  background: #eee;
}

.rdtCounters {
  display: inline-block;
}

.rdtCounters > div {
  float: left;
}

.rdtCounter {
  height: 100px;
}

.rdtCounter {
  width: 40px;
}

.rdtCounterSeparator {
  line-height: 100px;
}

.rdtCounter .rdtBtn {
  height: 40%;
  line-height: 40px;
  cursor: pointer;
  display: block;
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Chrome/Safari/Opera */ /* Konqueror */ /* Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none;
}

.rdtCounter .rdtBtn:hover {
  background: #eee;
}

.rdtCounter .rdtCount {
  height: 20%;
  font-size: 1.2em;
}

.rdtMilli {
  vertical-align: middle;
  padding-left: 8px;
  width: 48px;
}

.rdtMilli input {
  width: 100%;
  font-size: 1.2em;
  margin-top: 37px;
}

.rdtTime td {
  cursor: default;
}@charset "UTF-8";
.rbc-btn {
  color: inherit;
  font: inherit;
  margin: 0;
}

button.rbc-btn {
  overflow: visible;
  text-transform: none;
  -webkit-appearance: button;
  cursor: pointer;
}

button[disabled].rbc-btn {
  cursor: not-allowed;
}

button.rbc-input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

.rbc-calendar {
  box-sizing: border-box;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.rbc-calendar *,
.rbc-calendar *:before,
.rbc-calendar *:after {
  box-sizing: inherit;
}

.rbc-abs-full, .rbc-row-bg {
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.rbc-ellipsis, .rbc-event-label, .rbc-row-segment .rbc-event-content, .rbc-show-more {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rbc-rtl {
  direction: rtl;
}

.rbc-off-range {
  color: #999999;
}

.rbc-off-range-bg {
  background: #e6e6e6;
}

.rbc-header {
  overflow: hidden;
  flex: 1 0 0%;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 3px;
  text-align: center;
  vertical-align: middle;
  font-weight: bold;
  font-size: 90%;
  min-height: 0;
  border-bottom: 1px solid #DDD;
}

.rbc-header + .rbc-header {
  border-left: 1px solid #DDD;
}

.rbc-rtl .rbc-header + .rbc-header {
  border-left-width: 0;
  border-right: 1px solid #DDD;
}

.rbc-header > a, .rbc-header > a:active, .rbc-header > a:visited {
  color: inherit;
  text-decoration: none;
}

.rbc-row-content {
  position: relative;
  -moz-user-select: none;
   -ms-user-select: none;
       user-select: none;
  -webkit-user-select: none;
  z-index: 4;
}

.rbc-row-content-scrollable {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.rbc-row-content-scrollable .rbc-row-content-scroll-container {
  height: 100%;
  overflow-y: scroll;
  /* Hide scrollbar for Chrome, Safari and Opera */
  -ms-overflow-style: none;
  /* IE and Edge */
  scrollbar-width: none;
  /* Firefox */
}

.rbc-row-content-scrollable .rbc-row-content-scroll-container::-webkit-scrollbar {
  display: none;
}

.rbc-today {
  background-color: #eaf6ff;
}

.rbc-toolbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  margin-bottom: 10px;
  font-size: 16px;
}

.rbc-toolbar .rbc-toolbar-label {
  flex-grow: 1;
  padding: 0 10px;
  text-align: center;
}

.rbc-toolbar button {
  color: #373a3c;
  display: inline-block;
  margin: 0;
  text-align: center;
  vertical-align: middle;
  background: none;
  background-image: none;
  border: 1px solid #ccc;
  padding: 0.375rem 1rem;
  border-radius: 4px;
  line-height: normal;
  white-space: nowrap;
}

.rbc-toolbar button:active, .rbc-toolbar button.rbc-active {
  background-image: none;
  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  background-color: #e6e6e6;
  border-color: #adadad;
}

.rbc-toolbar button:active:hover, .rbc-toolbar button:active:focus, .rbc-toolbar button.rbc-active:hover, .rbc-toolbar button.rbc-active:focus {
  color: #373a3c;
  background-color: #d4d4d4;
  border-color: #8c8c8c;
}

.rbc-toolbar button:focus {
  color: #373a3c;
  background-color: #e6e6e6;
  border-color: #adadad;
}

.rbc-toolbar button:hover {
  color: #373a3c;
  background-color: #e6e6e6;
  border-color: #adadad;
}

.rbc-btn-group {
  display: inline-block;
  white-space: nowrap;
}

.rbc-btn-group > button:first-child:not(:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.rbc-btn-group > button:last-child:not(:first-child) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.rbc-rtl .rbc-btn-group > button:first-child:not(:last-child) {
  border-radius: 4px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.rbc-rtl .rbc-btn-group > button:last-child:not(:first-child) {
  border-radius: 4px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.rbc-btn-group > button:not(:first-child):not(:last-child) {
  border-radius: 0;
}

.rbc-btn-group button + button {
  margin-left: -1px;
}

.rbc-rtl .rbc-btn-group button + button {
  margin-left: 0;
  margin-right: -1px;
}

.rbc-btn-group + .rbc-btn-group,
.rbc-btn-group + button {
  margin-left: 10px;
}

.rbc-event, .rbc-day-slot .rbc-background-event {
  border: none;
  box-sizing: border-box;
  box-shadow: none;
  margin: 0;
  padding: 2px 5px;
  background-color: #3174ad;
  border-radius: 5px;
  color: #fff;
  cursor: pointer;
  width: 100%;
  text-align: left;
}

.rbc-slot-selecting .rbc-event, .rbc-slot-selecting .rbc-day-slot .rbc-background-event, .rbc-day-slot .rbc-slot-selecting .rbc-background-event {
  cursor: inherit;
  pointer-events: none;
}

.rbc-event.rbc-selected, .rbc-day-slot .rbc-selected.rbc-background-event {
  background-color: #265985;
}

.rbc-event:focus, .rbc-day-slot .rbc-background-event:focus {
  outline: 5px auto #3b99fc;
}

.rbc-event-label {
  font-size: 80%;
}

.rbc-event-overlaps {
  box-shadow: -1px 1px 5px 0px rgba(51, 51, 51, 0.5);
}

.rbc-event-continues-prior {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.rbc-event-continues-after {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.rbc-event-continues-earlier {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.rbc-event-continues-later {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.rbc-row {
  display: flex;
  flex-direction: row;
}

.rbc-row-segment {
  padding: 0 1px 1px 1px;
}

.rbc-selected-cell {
  background-color: rgba(0, 0, 0, 0.1);
}

.rbc-show-more {
  background-color: rgba(255, 255, 255, 0.3);
  z-index: 4;
  font-weight: bold;
  font-size: 85%;
  height: auto;
  line-height: normal;
}

.rbc-month-view {
  position: relative;
  border: 1px solid #DDD;
  display: flex;
  flex-direction: column;
  flex: 1 0 0;
  width: 100%;
  -moz-user-select: none;
   -ms-user-select: none;
       user-select: none;
  -webkit-user-select: none;
  height: 100%;
}

.rbc-month-header {
  display: flex;
  flex-direction: row;
}

.rbc-month-row {
  display: flex;
  position: relative;
  flex-direction: column;
  flex: 1 0 0;
  flex-basis: 0px;
  overflow: hidden;
  height: 100%;
}

.rbc-month-row + .rbc-month-row {
  border-top: 1px solid #DDD;
}

.rbc-date-cell {
  flex: 1 1 0;
  min-width: 0;
  padding-right: 5px;
  text-align: right;
}

.rbc-date-cell.rbc-now {
  font-weight: bold;
}

.rbc-date-cell > a, .rbc-date-cell > a:active, .rbc-date-cell > a:visited {
  color: inherit;
  text-decoration: none;
}

.rbc-row-bg {
  display: flex;
  flex-direction: row;
  flex: 1 0 0;
  overflow: hidden;
}

.rbc-day-bg {
  flex: 1 0 0%;
}

.rbc-day-bg + .rbc-day-bg {
  border-left: 1px solid #DDD;
}

.rbc-rtl .rbc-day-bg + .rbc-day-bg {
  border-left-width: 0;
  border-right: 1px solid #DDD;
}

.rbc-overlay {
  position: absolute;
  z-index: 5;
  border: 1px solid #e5e5e5;
  background-color: #fff;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.25);
  padding: 10px;
}

.rbc-overlay > * + * {
  margin-top: 1px;
}

.rbc-overlay-header {
  border-bottom: 1px solid #e5e5e5;
  margin: -10px -10px 5px -10px;
  padding: 2px 10px;
}

.rbc-agenda-view {
  display: flex;
  flex-direction: column;
  flex: 1 0 0;
  overflow: auto;
}

.rbc-agenda-view table.rbc-agenda-table {
  width: 100%;
  border: 1px solid #DDD;
  border-spacing: 0;
  border-collapse: collapse;
}

.rbc-agenda-view table.rbc-agenda-table tbody > tr > td {
  padding: 5px 10px;
  vertical-align: top;
}

.rbc-agenda-view table.rbc-agenda-table .rbc-agenda-time-cell {
  padding-left: 15px;
  padding-right: 15px;
  text-transform: lowercase;
}

.rbc-agenda-view table.rbc-agenda-table tbody > tr > td + td {
  border-left: 1px solid #DDD;
}

.rbc-rtl .rbc-agenda-view table.rbc-agenda-table tbody > tr > td + td {
  border-left-width: 0;
  border-right: 1px solid #DDD;
}

.rbc-agenda-view table.rbc-agenda-table tbody > tr + tr {
  border-top: 1px solid #DDD;
}

.rbc-agenda-view table.rbc-agenda-table thead > tr > th {
  padding: 3px 5px;
  text-align: left;
  border-bottom: 1px solid #DDD;
}

.rbc-rtl .rbc-agenda-view table.rbc-agenda-table thead > tr > th {
  text-align: right;
}

.rbc-agenda-time-cell {
  text-transform: lowercase;
}

.rbc-agenda-time-cell .rbc-continues-after:after {
  content: " \BB";
}

.rbc-agenda-time-cell .rbc-continues-prior:before {
  content: "\AB   ";
}

.rbc-agenda-date-cell,
.rbc-agenda-time-cell {
  white-space: nowrap;
}

.rbc-agenda-event-cell {
  width: 100%;
}

.rbc-time-column {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.rbc-time-column .rbc-timeslot-group {
  flex: 1;
}

.rbc-timeslot-group {
  border-bottom: 1px solid #DDD;
  min-height: 40px;
  display: flex;
  flex-flow: column nowrap;
}

.rbc-time-gutter,
.rbc-header-gutter {
  flex: none;
}

.rbc-label {
  padding: 0 5px;
}

.rbc-day-slot {
  position: relative;
}

.rbc-day-slot .rbc-events-container {
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  margin-right: 10px;
  top: 0;
}

.rbc-day-slot .rbc-events-container.rbc-rtl {
  left: 10px;
  right: 0;
}

.rbc-day-slot .rbc-event, .rbc-day-slot .rbc-background-event {
  border: 1px solid #265985;
  display: flex;
  max-height: 100%;
  min-height: 20px;
  flex-flow: column wrap;
  align-items: flex-start;
  overflow: hidden;
  position: absolute;
}

.rbc-day-slot .rbc-background-event {
  opacity: 0.75;
}

.rbc-day-slot .rbc-event-label {
  flex: none;
  padding-right: 5px;
  width: auto;
}

.rbc-day-slot .rbc-event-content {
  width: 100%;
  flex: 1 1 0;
  word-wrap: break-word;
  line-height: 1;
  height: 100%;
  min-height: 1em;
}

.rbc-day-slot .rbc-time-slot {
  border-top: 1px solid #f7f7f7;
}

.rbc-time-view-resources .rbc-time-gutter,
.rbc-time-view-resources .rbc-time-header-gutter {
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  background-color: white;
  border-right: 1px solid #DDD;
  z-index: 10;
  margin-right: -1px;
}

.rbc-time-view-resources .rbc-time-header {
  overflow: hidden;
}

.rbc-time-view-resources .rbc-time-header-content {
  min-width: auto;
  flex: 1 0 0;
  flex-basis: 0px;
}

.rbc-time-view-resources .rbc-time-header-cell-single-day {
  display: none;
}

.rbc-time-view-resources .rbc-day-slot {
  min-width: 140px;
}

.rbc-time-view-resources .rbc-header,
.rbc-time-view-resources .rbc-day-bg {
  width: 140px;
  flex: 1 1 0;
  flex-basis: 0 px;
}

.rbc-time-header-content + .rbc-time-header-content {
  margin-left: -1px;
}

.rbc-time-slot {
  flex: 1 0 0;
}

.rbc-time-slot.rbc-now {
  font-weight: bold;
}

.rbc-day-header {
  text-align: center;
}

.rbc-slot-selection {
  z-index: 10;
  position: absolute;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  font-size: 75%;
  width: 100%;
  padding: 3px;
}

.rbc-slot-selecting {
  cursor: move;
}

.rbc-time-view {
  display: flex;
  flex-direction: column;
  flex: 1;
  width: 100%;
  border: 1px solid #DDD;
  min-height: 0;
}

.rbc-time-view .rbc-time-gutter {
  white-space: nowrap;
}

.rbc-time-view .rbc-allday-cell {
  box-sizing: content-box;
  width: 100%;
  height: 100%;
  position: relative;
}

.rbc-time-view .rbc-allday-cell + .rbc-allday-cell {
  border-left: 1px solid #DDD;
}

.rbc-time-view .rbc-allday-events {
  position: relative;
  z-index: 4;
}

.rbc-time-view .rbc-row {
  box-sizing: border-box;
  min-height: 20px;
}

.rbc-time-header {
  display: flex;
  flex: 0 0 auto;
  flex-direction: row;
}

.rbc-time-header.rbc-overflowing {
  border-right: 1px solid #DDD;
}

.rbc-rtl .rbc-time-header.rbc-overflowing {
  border-right-width: 0;
  border-left: 1px solid #DDD;
}

.rbc-time-header > .rbc-row:first-child {
  border-bottom: 1px solid #DDD;
}

.rbc-time-header > .rbc-row.rbc-row-resource {
  border-bottom: 1px solid #DDD;
}

.rbc-time-header-cell-single-day {
  display: none;
}

.rbc-time-header-content {
  flex: 1;
  display: flex;
  min-width: 0;
  flex-direction: column;
  border-left: 1px solid #DDD;
}

.rbc-rtl .rbc-time-header-content {
  border-left-width: 0;
  border-right: 1px solid #DDD;
}

.rbc-time-header-content > .rbc-row.rbc-row-resource {
  border-bottom: 1px solid #DDD;
  flex-shrink: 0;
}

.rbc-time-content {
  display: flex;
  flex: 1 0 0%;
  align-items: flex-start;
  width: 100%;
  border-top: 2px solid #DDD;
  overflow-y: auto;
  position: relative;
}

.rbc-time-content > .rbc-time-gutter {
  flex: none;
}

.rbc-time-content > * + * > * {
  border-left: 1px solid #DDD;
}

.rbc-rtl .rbc-time-content > * + * > * {
  border-left-width: 0;
  border-right: 1px solid #DDD;
}

.rbc-time-content > .rbc-day-slot {
  width: 100%;
  -moz-user-select: none;
   -ms-user-select: none;
       user-select: none;
  -webkit-user-select: none;
}

.rbc-current-time-indicator {
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
  height: 1px;
  background-color: #74ad31;
  pointer-events: none;
}/* Slider */
.slick-slider {
  position: relative;
  display: block;
  box-sizing: border-box;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -khtml-user-select: none;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}

.slick-list {
  position: relative;
  display: block;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

.slick-list:focus {
  outline: none;
}

.slick-list.dragging {
  cursor: pointer;
  cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list {
  transform: translate3d(0, 0, 0);
}

.slick-track {
  position: relative;
  top: 0;
  left: 0;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.slick-track:before,
.slick-track:after {
  display: table;
  content: "";
}

.slick-track:after {
  clear: both;
}

.slick-loading .slick-track {
  visibility: hidden;
}

.slick-slide {
  display: none;
  float: left;
  height: 100%;
  min-height: 1px;
}

[dir=rtl] .slick-slide {
  float: right;
}

.slick-slide img {
  display: block;
}

.slick-slide.slick-loading img {
  display: none;
}

.slick-slide.dragging img {
  pointer-events: none;
}

.slick-initialized .slick-slide {
  display: block;
}

.slick-loading .slick-slide {
  visibility: hidden;
}

.slick-vertical .slick-slide {
  display: block;
  height: auto;
  border: 1px solid transparent;
}

.slick-arrow.slick-hidden {
  display: none;
}@charset "UTF-8";
/* Slider */
.slick-loading .slick-list {
  background: #fff url(/node_modules/slick-carousel/slick/ajax-loader.gif) center center no-repeat;
}

/* Icons */
@font-face {
  font-family: "slick";
  font-weight: normal;
  font-style: normal;
  src: url(/node_modules/slick-carousel/slick/fonts/slick.eot);
  src: url(/node_modules/slick-carousel/slick/fonts/slick.eot?#iefix) format("embedded-opentype"), url(/node_modules/slick-carousel/slick/fonts/slick.woff) format("woff"), url(/node_modules/slick-carousel/slick/fonts/slick.ttf) format("truetype"), url(/node_modules/slick-carousel/slick/fonts/slick.svg#slick) format("svg");
}
/* Arrows */
.slick-prev,
.slick-next {
  font-size: 0;
  line-height: 0;
  position: absolute;
  top: 50%;
  display: block;
  width: 20px;
  height: 20px;
  padding: 0;
  transform: translate(0, -50%);
  cursor: pointer;
  color: transparent;
  border: none;
  outline: none;
  background: transparent;
}

.slick-prev:hover,
.slick-prev:focus,
.slick-next:hover,
.slick-next:focus {
  color: transparent;
  outline: none;
  background: transparent;
}

.slick-prev:hover:before,
.slick-prev:focus:before,
.slick-next:hover:before,
.slick-next:focus:before {
  opacity: 1;
}

.slick-prev.slick-disabled:before,
.slick-next.slick-disabled:before {
  opacity: 0.25;
}

.slick-prev:before,
.slick-next:before {
  font-family: "slick";
  font-size: 20px;
  line-height: 1;
  opacity: 0.75;
  color: white;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.slick-prev {
  left: -25px;
}

[dir=rtl] .slick-prev {
  right: -25px;
  left: auto;
}

.slick-prev:before {
  content: "\2190";
}

[dir=rtl] .slick-prev:before {
  content: "\2192";
}

.slick-next {
  right: -25px;
}

[dir=rtl] .slick-next {
  right: auto;
  left: -25px;
}

.slick-next:before {
  content: "\2192";
}

[dir=rtl] .slick-next:before {
  content: "\2190";
}

/* Dots */
.slick-dotted.slick-slider {
  margin-bottom: 30px;
}

.slick-dots {
  position: absolute;
  bottom: -25px;
  display: block;
  width: 100%;
  padding: 0;
  margin: 0;
  list-style: none;
  text-align: center;
}

.slick-dots li {
  position: relative;
  display: inline-block;
  width: 20px;
  height: 20px;
  margin: 0 5px;
  padding: 0;
  cursor: pointer;
}

.slick-dots li button {
  font-size: 0;
  line-height: 0;
  display: block;
  width: 20px;
  height: 20px;
  padding: 5px;
  cursor: pointer;
  color: transparent;
  border: 0;
  outline: none;
  background: transparent;
}

.slick-dots li button:hover,
.slick-dots li button:focus {
  outline: none;
}

.slick-dots li button:hover:before,
.slick-dots li button:focus:before {
  opacity: 1;
}

.slick-dots li button:before {
  font-family: "slick";
  font-size: 6px;
  line-height: 20px;
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  content: "\2022";
  text-align: center;
  opacity: 0.25;
  color: black;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.slick-dots li.slick-active button:before {
  opacity: 0.75;
  color: black;
}html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
}

html ::-webkit-scrollbar {
  width: 0px;
  background: transparent;
}

*,
*::after,
*::before {
  box-sizing: border-box;
}

body {
  text-rendering: optimizeLegibility;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

@media only screen and (max-width: 500px) {
  html,
  body {
    overflow-x: hidden;
    position: relative;
    width: 100%;
  }
}
.app-wrapper {
  height: 100%;
}

.component-wrapper {
  width: 100%;
  height: 100%;
}

.tap-here-mobile-only {
  display: none;
}
@media (max-width: 44em) {
  .tap-here-mobile-only {
    display: unset;
    color: white;
  }
}

.base-desktop {
  height: 100vh;
  width: 100%;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: auto 1fr;
  grid-template-columns: auto 1fr;
  -ms-grid-rows: 70px 1fr;
  grid-template-rows: 70px 1fr;
  transition: 0.3s ease;
}
.base-desktop .sidebar.collapse {
  width: 0;
  overflow: hidden;
}
.base-desktop .sidebar {
  position: fixed;
  left: 0;
  background-color: #f4f5fa;
  height: 100%;
  width: 250px;
  padding-bottom: 30px;
  transition: 0.5s ease;
  overflow-y: auto;
}
.base-desktop .sidebar .logoSection {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: white;
  border-right: 1px solid #f4f5fa;
  height: 70px;
  text-align: center;
  font-size: 24px;
}
.base-desktop .sidebar .dropdown {
  width: 100%;
  height: 50px;
  transition: 0.2s ease;
}
.base-desktop .sidebar .dropdown:hover {
  background-color: #D2D2D2;
}
.base-desktop .sidebar .dropdown .dd-header {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 70% 1fr;
  grid-template-columns: 1fr 70% 1fr;
  height: 100%;
}
.base-desktop .sidebar .dropdown .dd-header .link-icon {
  -ms-grid-row-align: center;
  align-self: center;
  -ms-grid-column-align: center;
  justify-self: center;
}
.base-desktop .sidebar .dropdown .dd-header .dd-header-title {
  -ms-grid-row-align: center;
  align-self: center;
  font-size: 18px;
  font-weight: 500;
}
.base-desktop .sidebar .dropdown .dd-header .dd-icon {
  -ms-grid-row-align: center;
  align-self: center;
  -ms-grid-column-align: center;
  justify-self: center;
  font-size: 14px;
}
.base-desktop .sidebar .dropdown .dd-list {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
}
.base-desktop .sidebar .dropdown .dd-list .dd-list-item {
  width: 90%;
  height: 50px;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 20%;
  grid-template-columns: 1fr 20%;
  font-weight: 500;
  transition: 0.2s ease;
  color: black;
  text-decoration: none;
}
.base-desktop .sidebar .dropdown .dd-list .dd-list-item .dd-title {
  -ms-grid-row-align: center;
  align-self: center;
}
.base-desktop .sidebar .dropdown .dd-list .dd-list-item .dd-list-icon {
  font-size: 14px;
  -ms-grid-column-align: center;
  justify-self: center;
  -ms-grid-row-align: center;
  align-self: center;
}
.base-desktop .sidebar .dropdown .dd-list .dd-list-item:hover {
  background-color: #D2D2D2;
}
.base-desktop .sidebar .link {
  width: 100%;
  height: 50px;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 70% 1fr;
  grid-template-columns: 1fr 70% 1fr;
  transition: 0.2s ease;
  color: black;
  text-decoration: none;
}
.base-desktop .sidebar .link:hover {
  background-color: #D2D2D2;
}
.base-desktop .sidebar .link .link-chev {
  -ms-grid-row-align: center;
  align-self: center;
  -ms-grid-column-align: center;
  justify-self: center;
  font-size: 14px;
}
.base-desktop .sidebar .link .link-icon {
  -ms-grid-row-align: center;
  align-self: center;
  -ms-grid-column-align: center;
  justify-self: center;
}
.base-desktop .sidebar .link .link-title {
  -ms-grid-row-align: center;
  align-self: center;
  font-size: 18px;
  font-weight: 500;
}
.base-desktop .link.active {
  background-color: rgb(57, 99, 17);
  color: #D2D2D2;
}
.base-desktop .header {
  background-color: #D2D2D2;
  display: -ms-grid;
  display: grid;
  align-content: center;
  justify-items: center;
  width: 100%;
  -ms-grid-columns: 1fr auto 1fr;
  grid-template-columns: 1fr auto 1fr;
}
.base-desktop .header .header-left {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.base-desktop .header .header-left .sidebar-icon {
  font-size: 20px;
  margin-left: 25px;
}
.base-desktop .header .exchangeWrapper {
  margin-top: -40px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: end;
}
.base-desktop .header .exchangeWrapperMobile {
  color: white;
}
.base-desktop .header .header-right {
  display: -ms-grid;
  display: grid;
  justify-self: flex-end;
  -ms-grid-columns: 1fr auto 1fr;
  grid-template-columns: 1fr auto 1fr;
  height: 50px;
  width: 160px;
}
.base-desktop .header .header-right .user-icon {
  font-size: 35px;
  -ms-grid-row-align: center;
  align-self: center;
}
.base-desktop .header .header-right .user-picture {
  width: 35px;
  height: 35px;
  border-radius: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  -ms-grid-row-align: center;
  align-self: center;
}
.base-desktop .header .header-right .user-picture img {
  width: 35px;
}
.base-desktop .header .header-right p {
  font-size: 16px;
  margin: 5px;
  -ms-grid-row-align: center;
  align-self: center;
}
.base-desktop .header .header-right .account-icon {
  font-size: 22px;
  -ms-grid-row-align: center;
  align-self: center;
}
.base-desktop .header .header-right:hover {
  cursor: pointer;
}
.base-desktop .logo.collapse {
  width: 0;
  overflow: hidden;
}
.base-desktop .logo {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.5rem;
  width: 250px;
  transition: 0.5s ease;
}
.base-desktop .options-container {
  z-index: 100;
  position: absolute;
  right: 0;
  margin: 4px 10px 4px 4px;
  padding: 10px;
  width: 150px;
  min-height: 50px;
  background-color: #f4f5fa;
  border: 1px transparent;
  border-radius: 6px;
  display: flex;
  flex-wrap: wrap;
}
.base-desktop .options-container .options-link {
  width: 100%;
  height: 35px;
  padding-left: 10px;
  margin-bottom: 5px;
  text-decoration: none;
  color: black;
  border-bottom: 1px solid black;
  transition: 0.1s ease;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.base-desktop .options-container .options-link .options-icon {
  margin-right: 10px;
}
.base-desktop .options-container .options-link:hover {
  background-color: #D2D2D2;
}
.base-desktop .options-container .options-link:last-of-type {
  border-bottom: none;
  margin-bottom: 0;
}

.base-desktop > *:nth-child(1) {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  grid-row: 1;
  grid-column: 1;
}

.base-desktop > *:nth-child(2) {
  -ms-grid-row: 1;
  -ms-grid-column: 2;
  grid-row: 1;
  grid-column: 2;
}

.base-desktop > *:nth-child(3) {
  -ms-grid-row: 2;
  -ms-grid-column: 1;
  grid-row: 2;
  grid-column: 1;
}

.base-desktop > *:nth-child(4) {
  -ms-grid-row: 2;
  -ms-grid-column: 2;
  grid-row: 2;
  grid-column: 2;
}

.all-vw {
  width: 100%;
}

@media only screen and (max-width: 500px) {
  .all-vw {
    width: 100vw;
  }
}
.base-mobile {
  width: 100vw;
  height: 100vh;
  display: grid;
  grid-template-rows: 50px 1fr;
  position: relative;
}
.base-mobile .header {
  background-color: #d2d2d2;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.base-mobile .header .left,
.base-mobile .header .right {
  margin: 10px 15px;
}
.base-mobile .header .left .icon,
.base-mobile .header .right .icon {
  font-size: 25px;
}
.base-mobile .header .left .icon-left,
.base-mobile .header .right .icon-left {
  font-size: 25px;
  transition: 1s ease-in-out;
}
.base-mobile .header .right .user-icon {
  font-size: 35px;
  -ms-grid-row-align: center;
  align-self: center;
}
.base-mobile .body {
  position: relative;
}
.base-mobile .body .mobileOptions {
  position: absolute;
  right: 15px;
  top: 15px;
  z-index: 100;
  width: 100px;
  height: auto;
  padding: 10px;
  background-color: #f4f5fa;
  border: 1px transparent;
  border-radius: 6px;
}
.base-mobile .body .mobileOptions a {
  text-decoration: none;
}
.base-mobile .body .mobileOptions .options-link {
  width: 100%;
  text-decoration: none;
  color: black;
  margin-bottom: 10px;
}
.base-mobile .body .mobileOptions .options-link .options-icon {
  margin-right: 5px;
}
.base-mobile .body .mobileOptions.collapse {
  display: none;
}

.landing {
  display: grid;
  background-color: #707070;
}
.landing * {
  max-width: 100vw;
}
.landing .read-more {
  display: block;
  padding: 10px 20px;
  color: green;
  font-size: 20px;
  text-decoration: none;
  text-align: center;
}
.landing .landing-icons-container {
  position: relative;
  background-color: whitesmoke;
  color: #1a1d21;
  padding-top: 45px;
  overflow: hidden;
}
.landing .landing-icons-container input[name=icon-grid] {
  display: none;
}
.landing .landing-icons-container .icon-grid-checkbox-label {
  position: absolute;
  top: 5px;
  font-size: 25px;
  text-align: right;
  padding-right: 15px;
  width: 100%;
  cursor: pointer;
}
.landing .landing-icons-container .landing-icons-grid {
  max-height: 0;
  transition: all 0.2s ease-in-out;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 40px;
  justify-content: space-around;
}
.landing .landing-icons-container .landing-icons-grid .landing-icon {
  display: grid;
  grid-template-rows: 2fr 1fr;
  justify-items: center;
  text-align: center;
  width: 60px;
  height: 60px;
  padding: 5px;
  margin: auto;
  color: #1e266d;
  text-decoration: none;
}
.landing .landing-icons-container .landing-icons-grid .landing-icon svg {
  width: 70%;
  height: 70%;
}
.landing .landing-icons-container input[name=icon-grid]:checked ~ .landing-icons-grid {
  max-height: 200px;
  padding-bottom: 20px;
}
.landing .landing-blog-container {
  display: grid;
  justify-items: center;
  grid-gap: 25px;
  padding: 120px 10px 40px 10px;
  background-position: center;
  background-size: cover;
  position: relative;
}
.landing .landing-blog-container .landing-blog-header {
  position: absolute;
  top: 100px;
  padding: 10px 25px;
  color: white;
  background-color: #1a1d21;
}
.landing .landing-blog-container .landing-blog-square {
  width: 100%;
  max-width: 600px;
  background-color: white;
  padding: 30px 25px;
}
@media (max-width: 400px) {
  .landing .landing-blog-container .landing-blog-square {
    max-width: 300px;
  }
}
.landing .landing-blog-container .landing-blog-square .landing-blog-square-header {
  color: #354463;
  text-align: center;
  margin-bottom: 10px;
}
.landing .landing-local-news-slider {
  background-color: #d2cbc6;
  padding: 50px 0;
  position: relative;
  display: grid;
  justify-items: center;
}
.landing .landing-local-news-slider .landing-local-news-slider-grid {
  display: flex;
  flex-direction: row;
  justify-content: center;
  height: 950px;
  width: 400px;
  position: relative;
  overflow: hidden;
}
@media (max-width: 400px) {
  .landing .landing-local-news-slider .landing-local-news-slider-grid {
    height: 800px;
  }
}
.landing .landing-local-news-slider .landing-local-news-slider-grid .landing-local-news-slider-square {
  display: grid;
  justify-items: center;
  grid-gap: 25px;
  position: absolute;
  transition: 1s ease-in-out;
  transform: translateX(1000px);
}
.landing .landing-local-news-slider .landing-local-news-slider-grid .landing-local-news-slider-square .local-news-slider-transitioning-img {
  max-width: 400px;
  height: auto;
}
@media (max-width: 400px) {
  .landing .landing-local-news-slider .landing-local-news-slider-grid .landing-local-news-slider-square .local-news-slider-transitioning-img {
    max-width: 300px;
  }
}
.landing .landing-local-news-slider .landing-local-news-slider-grid .landing-local-news-slider-square .local-news-slider-transitioning-description {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 300px;
  max-width: 400px;
  padding: 20px 10px;
  background-color: #1a1d21;
  color: white;
  text-align: center;
}
@media (max-width: 400px) {
  .landing .landing-local-news-slider .landing-local-news-slider-grid .landing-local-news-slider-square .local-news-slider-transitioning-description {
    max-width: 300px;
  }
}
.landing .landing-local-news-slider .landing-local-news-slider-grid .landing-local-news-slider-square.active {
  transform: unset;
}
.landing .landing-local-news-slider .local-news-slider-header {
  position: absolute;
  background-color: #1a1d21;
  text-transform: uppercase;
  color: whitesmoke;
  padding: 10px 25px;
  top: 30px;
  z-index: 1;
}
.landing .landing-local-news-slider .local-news-dots {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  justify-items: center;
  width: 80%;
  max-width: 400px;
}
.landing .landing-local-news-slider .local-news-dots .local-news-dot {
  height: 25px;
  width: 25px;
  background-color: #2c4e2d;
  border-radius: 50%;
}
.landing .landing-local-news-slider .local-news-dots .local-news-dot.active {
  background-color: green;
}
.landing .landing-inspirational-image {
  width: 100%;
  max-width: 400px;
  height: auto;
  margin: auto;
}
.landing .detailed-links-grid {
  display: grid;
  grid-gap: 30px;
  justify-items: center;
  padding: 50px 0;
}
.landing .detailed-links-grid .detailed-links-square {
  display: grid;
  justify-items: center;
  width: 70%;
  max-width: 600px;
  background-color: white;
  padding: 20px 30px;
}
@media (max-width: 400px) {
  .landing .detailed-links-grid .detailed-links-square {
    width: 85%;
  }
}
.landing .detailed-links-grid .detailed-links-square .icon {
  width: 25%;
  max-width: 200px;
  height: auto;
  border-radius: 50%;
}
@media (max-width: 400px) {
  .landing .detailed-links-grid .detailed-links-square .icon {
    width: 40%;
  }
}
.landing .detailed-links-grid .detailed-links-square h2 {
  color: #354463;
  text-transform: uppercase;
}
.landing .detailed-links-grid .detailed-links-square span {
  text-align: center;
  margin: 20px 0;
}
.landing .landing-footer {
  padding: 100px 0 30px 0;
  background-color: white;
  position: relative;
  display: grid;
  justify-items: center;
}
.landing .landing-footer .footer-logo {
  position: absolute;
  top: 10px;
  width: 25%;
  max-width: 100px;
  height: auto;
  justify-self: center;
}
.landing .landing-footer .landing-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 25px;
}
.landing .landing-footer .landing-grid .landing-grid-square {
  margin: 15px;
  display: grid;
  justify-items: center;
}
.landing .landing-footer .landing-grid .landing-grid-square .landing-grid-square-header {
  text-transform: uppercase;
  margin-bottom: 10px;
}
.landing .landing-footer .landing-grid .landing-grid-square a,
.landing .landing-footer .landing-grid .landing-grid-square span {
  display: block;
  margin: 2px 2px;
  font-size: 14px;
  text-align: center;
}
.landing .landing-footer .landing-grid .landing-grid-square a {
  text-decoration: none;
  color: green;
}

.navbar {
  width: 100%;
  max-width: 100vw;
  margin-bottom: 5px;
}
.navbar .navbar-top {
  display: grid;
  grid-template-columns: 3fr 2fr 3fr;
  width: 100%;
  height: 50px;
}
.navbar .navbar-top .toggle {
  align-self: left;
  width: 50px;
  height: 50px;
  font-size: 20px;
  background-color: inherit;
}
@media (min-width: 500px) {
  .navbar .navbar-top .toggle {
    visibility: hidden;
  }
}
.navbar .navbar-top .brand {
  display: grid;
  align-items: center;
  grid-template-columns: 1fr 1fr 1fr;
  text-align: center;
}
.navbar .navbar-top .brand .desktop-only {
  font-size: 20px;
}
@media (max-width: 500px) {
  .navbar .navbar-top .brand .desktop-only {
    visibility: hidden;
  }
}
.navbar .navbar-top .brand .brand-logo {
  height: 50px;
  margin: auto;
}
.navbar .navbar-bottom {
  width: 100%;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
@media (max-width: 500px) {
  .navbar .navbar-bottom {
    grid-template-columns: unset;
    position: relative;
    justify-content: flex-start;
  }
}
.navbar .navbar-bottom .navlinks-container {
  width: 100%;
  max-width: 800px;
  display: flex;
  justify-content: space-around;
}
@media (max-width: 500px) {
  .navbar .navbar-bottom .navlinks-container {
    display: none;
  }
}
.navbar .navbar-bottom .navlinks-container .link {
  text-decoration: none;
  color: green;
  display: flex;
  align-items: center;
}
@media (max-width: 500px) {
  .navbar .navbar-bottom.navbar-active .navlinks-container {
    position: absolute;
    display: block;
    z-index: 1;
    background-color: whitesmoke;
    width: 50vw;
    padding: 10px;
  }
  .navbar .navbar-bottom.navbar-active .navlinks-container .link {
    display: block;
    width: 100%;
    text-align: center;
    padding: 15px 10px;
  }
}
.navbar .navbar-bottom .exchange-rate {
  display: grid;
  grid-template-rows: 1fr 1fr;
  margin: 5px 10px;
}
.navbar .navbar-bottom .exchange-rate .exchange-rate-top,
.navbar .navbar-bottom .exchange-rate .exchange-rate-bottom {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  text-align: center;
}
.navbar .navbar-bottom .exchange-rate .exchange-rate-top div,
.navbar .navbar-bottom .exchange-rate .exchange-rate-bottom div {
  padding: 2px 0;
}
.navbar .navbar-bottom .exchange-rate .exchange-rate-bottom {
  border-top: 1px dashed black;
}

.login-grid {
  display: grid;
  display: -ms-grid;
  grid-template-columns: 1fr 1fr;
  -ms-grid-columns: 1fr 1fr;
  position: relative;
  margin: 50px;
  box-shadow: 0 0px 3px 0px rgba(0, 0, 0, 0.75);
  -webkit-box-shadow: 0 0px 3px 0px rgba(0, 0, 0, 0.75);
}
@media (max-width: 1024px) {
  .login-grid {
    margin: 0;
    border: 0;
    grid-template-columns: 1fr;
    -webkit-box-shadow: none;
  }
}
@-webkit-keyframes error-message {
  from {
    transform: translateY(-100px);
    -webkit-transform: translateY(-100px);
    -ms-transform: translateY(-100px);
  }
  65% {
    transform: translateY(15px);
    -webkit-transform: translateY(-15px);
    -ms-transform: translateY(-15px);
  }
  to {
    transform: translateY(0px);
    -webkit-transform: translateY(0px);
    -ms-transform: translateY(0px);
  }
}
@keyframes error-message {
  from {
    transform: translateY(-100px);
    -webkit-transform: translateY(-100px);
    -ms-transform: translateY(-100px);
  }
  65% {
    transform: translateY(15px);
    -webkit-transform: translateY(-15px);
    -ms-transform: translateY(-15px);
  }
  to {
    transform: translateY(0px);
    -webkit-transform: translateY(0px);
    -ms-transform: translateY(0px);
  }
}
@media only screen and (max-width: 70em) {
  .login-grid .login-form-bad-request {
    left: 0 !important;
    right: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 61.1% !important;
    font-size: 13px !important;
    align-items: center !important;
    height: 4.1em !important;
    border-radius: 7px !important;
  }
  .login-grid .login-form-bad-request .login-form-bad-request-text {
    margin-bottom: 4px;
  }
}
.login-grid .login-form-bad-request {
  position: absolute;
  border-radius: 15px;
  background-color: #af0606;
  color: whitesmoke;
  padding: 15px;
  margin: 10px;
  max-width: 80%;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr auto;
  grid-template-columns: 1fr auto;
  -webkit-animation-name: error-message;
  animation-name: error-message;
  -webkit-animation-duration: 0.5s;
  animation-duration: 0.5s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  left: 16.4%;
  z-index: 1;
}
.login-grid .login-form-bad-request .login-form-bad-request-close-button {
  background-color: transparent;
  margin-left: 3px;
  text-align: center;
  height: 25px;
  width: 25px;
}
@media only screen and (min-width: 1600px) {
  .login-grid .login-form-bad-request {
    left: 18.2%;
  }
}
.login-grid .login-form-wrapper {
  display: flex;
  position: relative;
  flex-direction: column;
  align-items: center;
}
.login-grid .login-form-wrapper .close-me {
  position: absolute;
  font-size: 25px;
  left: 15px;
  top: 10px;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  background-color: white;
}
.login-grid .login-form-wrapper .login-form {
  padding: 25px;
}
.login-grid .login-form-wrapper .login-form .login-form-header {
  color: grey;
  font-weight: normal;
  margin: 40px 0;
  text-align: center;
}
.login-grid .login-form-wrapper .login-form .form-input-container {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 20px 1fr;
  grid-template-columns: 1fr 1fr;
  grid-gap: 20px;
  margin-top: 25px;
}
@media (max-width: 1024px) {
  .login-grid .login-form-wrapper .login-form .form-input-container {
    grid-template-columns: 1fr;
    -ms-grid-columns: 1fr;
    margin-top: 0;
    justify-items: center;
  }
}
.login-grid .login-form-wrapper .login-form .form-input-container .form-input-wrapper {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  width: 100%;
  background-color: whitesmoke;
  border-radius: 5px;
}
@media (max-width: 1024px) and (min-width: 768px) {
  .login-grid .login-form-wrapper .login-form .form-input-container .form-input-wrapper {
    width: 80%;
  }
}
.login-grid .login-form-wrapper .login-form .form-input-container .form-input-wrapper .form-icon {
  font-size: 22px;
}
.login-grid .login-form-wrapper .login-form .form-input-container .form-input-wrapper .form-input {
  width: 80%;
  outline: none;
  border: none;
  padding: 5px;
  margin: 7px 0;
  margin-bottom: 7px;
  background-color: inherit;
  border-bottom: 1px solid #d2d2d2;
}
.login-grid .login-form-wrapper .login-form .form-bottom-wrapper {
  display: grid;
  display: -ms-grid;
  grid-template-columns: 1fr 1fr;
  -ms-grid-columns: 1fr 1fr;
  width: 100%;
}
.login-grid .login-form-wrapper .login-form .form-bottom-wrapper a {
  margin: 10px 0;
  text-decoration: none;
  color: green;
}
.login-grid .login-form-wrapper .login-form .form-bottom-wrapper .form-check-wrapper {
  padding: 10px;
  font-size: 20px;
}
.login-grid .login-form-wrapper .login-form .form-bottom-wrapper .form-check-wrapper input {
  width: 15px;
  height: 15px;
  margin-right: 15px;
}
.login-grid .login-form-wrapper .login-form .form-bottom-wrapper .disclaimer {
  text-align: justify;
  margin: 20px 0;
}
.login-grid .login-form-wrapper .login-form .form-bottom-wrapper .form-bottom-left {
  display: flex;
  flex-direction: column;
}
.login-grid .login-form-wrapper .login-form .form-bottom-wrapper .form-bottom-top {
  text-align: center;
  display: -ms-grid;
  display: grid;
  grid-gap: 15px;
}
.login-grid .login-form-wrapper .login-form .btn-wrapper {
  margin-top: 15px;
  -ms-grid-row-align: center;
  align-self: center;
  -ms-grid-column-align: right;
  justify-self: right;
}
.login-grid .login-form-wrapper .login-form .btn-wrapper .btn {
  background-color: green;
  color: white;
  width: 100px;
  height: 50px;
  border-radius: 5px;
  font-size: 20px;
}
.login-grid .login-form-wrapper .login-form .stacked {
  -ms-grid-columns: 1fr;
  grid-template-columns: 1fr;
}
.login-grid .login-form-wrapper,
.login-grid img {
  min-width: 300px;
  width: 100%;
  height: 75vh;
}
@media (max-width: 1024px) {
  .login-grid .login-form-wrapper,
  .login-grid img {
    border: 0;
  }
}
.login-grid img {
  outline: none;
}
@media (max-width: 1024px) {
  .login-grid img {
    display: none;
  }
}

.cursor-pointer {
  cursor: pointer;
}

.btn {
  outline: none;
}

.forgotPassword {
  width: 100vw;
  height: calc(100vh - 100px);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.forgotPassword h3 {
  color: red;
}
.forgotPassword .forgotPasswordForm {
  border: 1px solid black;
  border-radius: 10px;
  width: 100%;
  height: 100%;
  max-height: 225px;
  padding: 25px;
  max-width: 800px;
  margin-top: 10vh;
}
.forgotPassword .forgotPasswordForm .inputWrapper {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
.forgotPassword .forgotPasswordForm .inputWrapper input {
  width: 100%;
  font-size: 18px;
  height: 35px;
}
.forgotPassword .forgotPasswordForm .inputWrapper label {
  font-size: 18px;
}
.forgotPassword .forgotPasswordForm .emailWrapper {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.forgotPassword .forgotPasswordForm .emailWrapper input {
  height: 35px;
  border-radius: 3px;
  font-size: 18px;
  border: 1px solid black;
}
.forgotPassword .forgotPasswordForm .emailWrapper button {
  height: 35px;
  border-radius: 3px;
  background-color: #2699FB;
  font-size: 18px;
  color: white;
  cursor: pointer;
}
.forgotPassword .forgotPasswordForm .emailWrapper button:disabled {
  background-color: gray;
  cursor: not-allowed;
}
.forgotPassword .forgotPasswordForm .saveButton {
  width: 100%;
  margin-top: 10px;
  height: 35px;
  border-radius: 3px;
  background-color: #2699FB;
  font-size: 18px;
  color: white;
  cursor: pointer;
}
.forgotPassword .forgotPasswordForm .saveButton:disabled {
  background-color: gray;
  cursor: not-allowed;
}

.reset-success {
  width: 100%;
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.reset-success p {
  color: #30903A;
  font-size: 24px;
}
.reset-success a {
  font-size: 24px;
}

.sq-form-container {
  display: grid;
  grid-template-columns: 1fr 50% 1fr;
  grid-template-rows: 20% 1fr 20%;
}
.sq-form-container .sq-form-title {
  grid-column: 2;
  grid-row: 1;
}
.sq-form-container .sq-payment-form {
  grid-column: 2;
  grid-row: 2;
}

iframe {
  margin: 0;
  padding: 0;
  border: 0;
}

button {
  border: 0;
}

fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}

#form-container {
  position: relative;
  width: 380px;
  margin: 0 auto;
  top: 50%;
  transform: translateY(-50%);
}

.label {
  font-size: 14px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: 0.5;
  text-transform: uppercase;
}

.third {
  float: left;
  width: calc((100% - 32px) / 3);
  padding: 0;
  margin: 0 16px 16px 0;
}

.third:last-of-type {
  margin-right: 0;
}

/* Define how SqPaymentForm iframes should look */
.sq-input {
  box-sizing: border-box;
  border: 1px solid #E0E2E3;
  border-radius: 4px;
  outline-offset: -2px;
  display: inline-block;
  transition: border-color 0.2s ease-in-out, background 0.2s ease-in-out;
}

/* Define how SqPaymentForm iframes should look when they have focus */
.sq-input--focus {
  border: 1px solid #4A90E2;
  background-color: rgba(74, 144, 226, 0.02);
}

/* Define how SqPaymentForm iframes should look when they contain invalid values */
.sq-input--error {
  border: 1px solid #E02F2F;
  background-color: rgba(244, 47, 47, 0.02);
}

#sq-card-number {
  margin-bottom: 16px;
}

.sq-payment-button button {
  width: 100%;
  height: 56px;
  margin-top: 10px;
  background: #4A90E2;
  border-radius: 4px;
  cursor: pointer;
  display: block;
  color: #FFFFFF;
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
  letter-spacing: 0;
  text-align: center;
  transition: background 0.2s ease-in-out;
}
.sq-payment-button button:hover {
  background-color: #4281CB;
}

#error {
  width: 100%;
  margin-top: 16px;
  font-size: 14px;
  color: red;
  font-weight: 500;
  text-align: center;
  opacity: 0.8;
}

body, html, .admin {
  overflow-x: auto !important;
  width: 100%;
  -webkit-overflow-scrolling: touch;
}
body .adminHeader, html .adminHeader, .admin .adminHeader {
  height: 100px;
  padding: 15px;
  padding-bottom: 0;
  border-bottom: 1px solid #D2D2D2;
  display: grid;
  grid-template-rows: 1fr 1fr;
}
body .adminHeader .adminHeader-title .title, html .adminHeader .adminHeader-title .title, .admin .adminHeader .adminHeader-title .title {
  text-transform: capitalize;
  font-size: 30px;
  font-weight: 700;
}
body .adminHeader .adminHeader-nav, html .adminHeader .adminHeader-nav, .admin .adminHeader .adminHeader-nav {
  display: flex;
  justify-content: space-evenly;
  align-items: flex-end;
}
body .adminHeader .adminHeader-nav .nav-button, html .adminHeader .adminHeader-nav .nav-button, .admin .adminHeader .adminHeader-nav .nav-button {
  background-color: transparent;
  font-size: 18px;
  opacity: 0.5;
  width: 150px;
  cursor: pointer;
}
body .adminHeader .adminHeader-nav .nav-button:focus, html .adminHeader .adminHeader-nav .nav-button:focus, .admin .adminHeader .adminHeader-nav .nav-button:focus {
  outline: none;
}
body .adminHeader .adminHeader-nav .nav-button.active, html .adminHeader .adminHeader-nav .nav-button.active, .admin .adminHeader .adminHeader-nav .nav-button.active {
  opacity: 1;
  border-bottom: 2px solid #30903A;
}
body .adminBody, html .adminBody, .admin .adminBody {
  padding: 15px;
}

.admin-with-dropdown {
  flex-direction: column;
}
.admin-with-dropdown .dropdown-wrapper {
  display: flex;
  width: 100%;
  max-width: 1200px;
}
.admin-with-dropdown .dropdown-group:first-child {
  margin-right: 50px;
}
.admin-with-dropdown .dropdown-group p {
  margin-bottom: 5px;
  margin-top: 5px;
}
.admin-with-dropdown .dropdown {
  width: 300px;
  margin-bottom: 15px;
  padding: 5px;
  display: grid;
  grid-template-rows: 1fr 1fr;
  height: 40px;
}
.admin-with-dropdown .adminElement {
  width: 100%;
}

.adminElement {
  transition: opacity 0.4s;
  opacity: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.adminElement.hide {
  display: none;
}

.adminTable {
  max-width: 1200px;
  width: 100%;
  border: 1px solid #D2D2D2;
  border-radius: 5px;
}
.adminTable .adminTableHeader {
  background-color: #f4f5fa;
  height: 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 40px 15px 40px;
  border-radius: 5px;
}
.adminTable .adminTableHeader-title {
  font-size: 20px;
  font-weight: 700;
}
.adminTable .adminTableHeader-search {
  height: 30px;
  width: 200px;
  border-radius: 5px;
  border: 1px solid #D2D2D2;
}
.adminTable .adminTableHeader-search:focus {
  outline: none;
}
.adminTable .adminTableHeader .adminExcelExport {
  font-size: 26px;
}
.adminTable .adminTableHeader .adminExcelExport:hover {
  color: darkgray;
}
.adminTable .adminTableBody table,
.adminTable .adminTableBody th,
.adminTable .adminTableBody td {
  border-collapse: collapse;
}
.adminTable .adminTableBody table {
  width: 100%;
  overflow-x: scroll;
}
.adminTable .adminTableBody table tr:nth-child(odd) {
  background-color: #FFFFFF;
}
.adminTable .adminTableBody table tr {
  background-color: #f4f5fa;
  height: 50px;
  border-bottom: 1px solid #D2D2D2;
}
.adminTable .adminTableBody table td {
  text-align: center;
  width: 100px;
}
.adminTable .adminTableBody table .rowButton {
  width: 75px;
  height: 30px;
  border: 1px solid #D2D2D2;
  border-radius: 3px;
}
.adminTable .adminTableBody table .rowButton:hover {
  opacity: 0.8;
}
.adminTable .adminTableFooter {
  height: 50px;
  padding: 15px;
  display: flex;
  justify-content: space-between;
}
.adminTable .adminTableFooter .pages {
  color: grey;
}
.adminTable .adminTableFooter .pageNav {
  display: flex;
}
.adminTable .adminTableFooter .pageNav .itemsShowing {
  margin-right: 10px;
  color: grey;
}
.adminTable .adminTableFooter .pageNav .changePage {
  display: flex;
  justify-content: space-between;
  width: 40px;
}
.adminTable .adminTableFooter .pageNav .changePage .changePage-icon {
  color: grey;
  font-size: 20px;
}
.adminTable .adminTableFooter .pageNav .changePage .changePage-icon:hover {
  color: darkgray;
}
.adminTable .adminTableFooter .pageNav .changePage .changePage-icon.disabled {
  color: lightgray;
}
.adminTable .admin-table-sub-header {
  background-color: #f4f5fa;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 40px 15px 40px;
  border-top: 1px solid #D2D2D2;
  border-radius: 5px;
}

.createButtonWrapper {
  max-width: 1200px;
  width: 100%;
  display: flex;
  justify-content: flex-end;
}
.createButtonWrapper .createButton {
  width: 150px;
  height: 35px;
  border-radius: 3px;
  background-color: #30903A;
  font-size: 16px;
  color: #f4f5fa;
  transition: 0.2s ease all;
  margin: 15px;
}
.createButtonWrapper .createButton:hover {
  opacity: 0.8;
}
.createButtonWrapper select {
  height: 35px;
  border-radius: 5px;
  border: 1px solid grey;
  padding: 0px 10px;
  margin: 15px;
}

.adminModal {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
.adminModal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid grey;
  padding: 15px;
  width: 100%;
}
.adminModal-header .modal-title {
  font-size: 25px;
}
.adminModal-header .modal-close {
  height: 40px;
  width: 40px;
  background-color: transparent;
  font-size: 25px;
}
.adminModal-body {
  padding: 20px;
  width: 100%;
  max-width: 800px;
}
.adminModal-body .successful {
  color: #30903A;
  font-size: 24px;
  width: 100%;
  text-align: center;
}

.adminDeleteForm {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}
.adminDeleteForm .input-container {
  width: 70%;
  min-width: 250px;
  display: grid;
  grid-template-rows: 1fr 1fr;
  margin-bottom: 15px;
}
.adminDeleteForm .input-container label {
  font-size: 18px;
  margin-bottom: 15px;
}
.adminDeleteForm .input-container input,
.adminDeleteForm .input-container select {
  height: 35px;
  border-radius: 5px;
  border: 1px solid grey;
  padding: 0px 10px;
}
.adminDeleteForm .adminModal-button-container {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 30px;
}
.adminDeleteForm .adminModal-button-container button {
  height: 40px;
  width: 50%;
  min-width: 250px;
  border-radius: 5px;
  background-color: #30903A;
  color: white;
  font-size: 18px;
}
.adminDeleteForm .adminModal-button-container button:disabled {
  opacity: 0.5;
}

.adminCreateForm {
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
}
.adminCreateForm .img-container {
  width: 45%;
  display: grid;
  grid-template-rows: 25px 1fr;
  margin-bottom: 15px;
}
.adminCreateForm .img-container img {
  width: 200px;
  height: 100px;
}
.adminCreateForm .input-container {
  width: 45%;
  display: grid;
  grid-template-rows: 1fr 1fr;
  margin-bottom: 15px;
}
.adminCreateForm .input-container label {
  font-size: 18px;
}
.adminCreateForm .input-container input,
.adminCreateForm .input-container select {
  height: 35px;
  border-radius: 5px;
  border: 1px solid grey;
  padding: 0px 10px;
}
.adminCreateForm .content-label {
  font-size: 18px;
}
.adminCreateForm .adminModal-button-container {
  width: 95%;
  display: flex;
  justify-content: flex-end;
  margin-top: 30px;
}
.adminCreateForm .adminModal-button-container button {
  height: 40px;
  width: 50%;
  border-radius: 5px;
  background-color: #30903A;
  color: white;
  font-size: 18px;
}

.blog-thumb_nail {
  width: 40px;
  height: 40px;
}

.editor-wrapper {
  margin-top: 10px;
  border: 1px solid black;
}
.editor-wrapper .editor-editor {
  max-height: 300px;
  overflow-y: auto;
}
@media (min-width: 1024px) {
  .editor-wrapper .editor-editor {
    max-height: 475px;
  }
}
@media (max-height: 550px) {
  .editor-wrapper .editor-editor {
    max-height: 250px;
  }
}

.delete-form {
  margin: 25px;
}
.delete-form .delete-form-wrapper {
  display: grid;
  grid-template-rows: 1fr 1fr;
  width: 100%;
}
.delete-form .delete-form-wrapper input {
  height: 35px;
  width: 100%;
}

.adminCenterTempHolder {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 50px;
}

.dashboard-container {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  padding: 1em 2em 5em 2em;
  height: 100%;
  min-height: 82vh;
  margin: 0;
  color: #5c5d59;
}
@media (max-width: 44em) {
  .dashboard-container {
    padding: 0;
  }
}
.dashboard-container .dashboard-general-wrapper {
  margin-top: 15px;
  display: grid;
  grid-gap: 30px;
}
.dashboard-container .dashboard-general-wrapper div {
  background-color: white;
  border-radius: 1.25rem;
}
.dashboard-container .dashboard-general-wrapper .dashboard-top {
  justify-self: center;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  box-shadow: 0 0px 10px 0px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
@media (max-width: 44em) {
  .dashboard-container .dashboard-general-wrapper .dashboard-top {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
  }
}
.dashboard-container .dashboard-general-wrapper .dashboard-top h1 {
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  min-height: 40px;
  text-align: center;
  font-size: 1.5em;
  cursor: pointer;
  padding: 0.1em 0;
  margin: 0.9em 1em;
  border-bottom: 1px solid transparent;
  transition: 0.33s ease-in-out;
}
@media (max-width: 44em) {
  .dashboard-container .dashboard-general-wrapper .dashboard-top h1 {
    font-size: 1.3em;
  }
}
.dashboard-container .dashboard-general-wrapper .dashboard-top h1:hover {
  border-bottom: 1px solid black;
}
.dashboard-container .dashboard-general-wrapper .dashboard-top .activeLink {
  border-bottom: 1px solid black;
}
.dashboard-container .dashboard-general-wrapper .dashboard-bottom {
  display: flex;
  flex-direction: column;
  justify-items: center;
  align-items: center;
  height: 100%;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  min-width: 400px;
  max-width: 500px;
  width: 50vw;
  justify-self: center;
  padding: 30px;
  box-shadow: 0 0px 10px 0px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
@media (max-width: 44em) {
  .dashboard-container .dashboard-general-wrapper .dashboard-bottom {
    min-width: 350px;
  }
}
.dashboard-container .dashboard-general-wrapper .dashboard-bottom h2 {
  margin: 0;
  font-weight: normal;
}
.dashboard-container .dashboard-general-wrapper .form-container {
  font-size: 1.5rem;
  margin: auto;
}
.dashboard-container .dashboard-general-wrapper .form-container label {
  margin: auto;
  font-size: 1.25rem;
}
.dashboard-container .dashboard-general-wrapper .form-container input {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  font-size: 1.1rem;
  text-align: center;
  height: 1.5em;
  margin: auto;
  margin-bottom: 1em;
  padding: 0.5em 2em;
  outline: none;
  border: none;
  border-bottom: 1px solid black;
}
.dashboard-container .dashboard-general-wrapper .form-container button {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin: auto;
  margin-top: 1em;
  padding: 0.5rem 1.25rem;
  border-radius: 0.5rem;
  background-color: #5a67d8;
  color: white;
  font-weight: 700;
  cursor: pointer;
  outline: none;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}
.dashboard-container .dashboard-general-wrapper .registrations-container {
  background: none;
  padding: 0;
  box-shadow: none;
}
.dashboard-container .dashboard-general-wrapper .registrations-container .err {
  font-size: 1.5em;
  text-align: center;
}
.dashboard-container .dashboard-general-wrapper .registrations-container .card {
  min-width: 400px;
  max-width: 500px;
  width: 50vw;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  background: white;
  margin: 10px 0 1em 0;
  padding: 1em;
  box-shadow: 0 0px 10px 0px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  border-radius: 0.5em;
}
@media (max-width: 44em) {
  .dashboard-container .dashboard-general-wrapper .registrations-container .card {
    min-width: 350px;
  }
}
.dashboard-container .dashboard-general-wrapper .registrations-container .card .card-top {
  padding: 1rem;
}
.dashboard-container .dashboard-general-wrapper .registrations-container .card .card-top .card-title {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0;
}
.dashboard-container .dashboard-general-wrapper .registrations-container .card .card-top .card-subtitle {
  color: #4a5568;
  margin: 0;
  font-size: 1.1em;
  font-weight: 500;
}
.dashboard-container .dashboard-general-wrapper .registrations-container .card .card-bottom {
  display: grid;
  justify-items: center;
  align-items: center;
}
.dashboard-container .dashboard-general-wrapper .registrations-container .card .card-bottom .card-button {
  padding: 0.5rem 1.25rem;
  border-radius: 0.5rem;
  background-color: #5a67d8;
  color: white;
  font-weight: 700;
  cursor: pointer;
  outline: none;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.tickets {
  margin: auto;
  width: 90%;
  box-shadow: 0 0px 10px 0px rgba(0, 0, 0, 0.1);
}
.tickets .header {
  display: flex;
  justify-content: center;
}
.tickets .header .title {
  text-align: center;
  font-size: 25px;
  width: 50%;
  border-bottom: 1px solid black;
  padding-bottom: 15px;
}
.tickets .body {
  padding: 1em;
  padding-top: 0;
}
@media (max-width: 44em) {
  .tickets .body {
    text-align: center;
  }
}
.tickets .body .current-raffle {
  display: flex;
  justify-content: center;
}
.tickets .body .current-raffle span {
  font-size: 20px;
}
.tickets .body .ticket-list {
  max-height: 120px;
  display: flex;
  justify-content: center;
  flex-direction: column;
  flex-wrap: wrap;
}
.tickets .body .ticket-list li {
  width: 90px;
}

.dashboard-header {
  width: 100%;
  text-align: center;
  padding: 20px;
}
.dashboard-header .horizontal-line {
  border: 1px solid #a3aed0;
  margin-top: 8px;
}
.dashboard-header .dashboard-shortcuts {
  display: flex;
  justify-content: space-around;
  font-size: 25px;
}
.dashboard-header .dashboard-shortcuts .dashboard-shortcuts-a-tags {
  font-weight: bold;
  text-decoration: none;
  color: #1e266d;
}

@media (max-width: 470px) {
  .dashboard-header .dashboard-shortcuts {
    font-size: 18px;
    text-align: start;
    display: grid;
    grid-template-columns: 170px 170px;
    grid-gap: 10px;
  }
  .dashboard-header .dashboard-shortcuts .dashboard-shortcuts-a-tags {
    font-weight: bold;
    text-decoration: none;
    color: #1e266d;
  }
}
.ads {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  flex-wrap: wrap;
}
.ads .ad {
  width: auto;
  padding: 15px;
}
@media only screen and (max-width: 500px) {
  .ads .ad {
    padding: 0px;
  }
}
.ads .ad img {
  width: auto;
  height: 100%;
  max-height: 400px;
}
@media only screen and (max-width: 500px) {
  .ads .ad img {
    max-height: 250px;
  }
}

.dashboard-subscription-update-disclaimer {
  font-size: 20px;
  text-align: center;
}
.dashboard-subscription-update-disclaimer :first-child {
  margin-top: 50px;
}

.events {
  position: relative;
  overflow: hidden;
  padding: 20px;
  box-sizing: border-box;
}
.events h1 {
  text-align: center;
  color: #1B3A63;
}
.events p {
  text-align: center;
  color: brown;
}

.events .rbc-calendar {
  max-width: 95%;
  height: 800px;
  overflow-x: auto;
}

.events .rbc-time-view {
  overflow-y: auto;
  height: 100%;
}

.events ul {
  list-style-type: none;
  padding: 0;
  text-align: center;
  color: royalblue;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 13px;
}

.events ul li {
  margin: 5px 0;
}

.registration {
  width: 100vw;
  height: 100vh;
  display: grid;
  grid-template-rows: 10% 90%;
}
.registration .pointer {
  cursor: pointer;
}
.registration .header {
  height: 100px;
  padding: 25px;
  border-bottom: 1px solid lightgray;
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
}
.registration .header .left {
  display: flex;
  justify-content: flex-start;
  font-size: 32px;
  font-weight: 600;
}
.registration .header .center {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.registration .header .center p {
  font-size: 18px;
  font-weight: 600;
}
.registration .header .center .active {
  color: #30903A;
}
.registration .header .right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.registration .header .right p {
  font-size: 16px;
  font-weight: 500;
}
.registration .header .right .link {
  margin-left: 5px;
  font-size: 16px;
  font-weight: 500;
  color: #30903A;
  text-decoration: none;
}
.registration .body {
  padding: 25px;
  height: 100%;
}
.registration .body .loadingContainer {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

.CreateAccount {
  display: flex;
  justify-content: center;
  margin-left: 25px;
  margin-right: 25px;
}
.CreateAccount .left {
  padding-left: 35px;
  width: 50%;
  max-width: 350px;
}
.CreateAccount .left .title {
  margin-top: 15px;
  font-size: 50px;
  font-weight: 700;
  line-height: 45px;
}
.CreateAccount .left .highlights {
  margin-top: 25px;
}
.CreateAccount .left .highlights .highlight {
  display: flex;
  align-items: flex-start;
  margin-bottom: 10px;
}
.CreateAccount .left .highlights .highlight .highlight-icon {
  margin-top: 4px;
  margin-right: 10px;
  color: #30903A;
  font-size: 25px;
  align-items: center;
}
.CreateAccount .left .highlights .highlight div {
  font-size: 18px;
  font-weight: 350;
}
.CreateAccount .right {
  width: 50%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.CreateAccount .right .error {
  font-weight: 500;
  padding: 0.5em;
  margin: 0px;
  width: 100%;
  text-align: center;
  color: red;
}
.CreateAccount .right .input-wrapper {
  margin-bottom: 10px;
  width: 100%;
  max-width: 500px;
}
.CreateAccount .right .input-wrapper .input-label {
  transform: translateY(10px);
  display: inline-block;
  text-align: center;
  padding-left: 5px;
  padding-right: 5px;
  background-color: white;
  margin-left: 10px;
  font-size: 14px;
}
.CreateAccount .right .input-wrapper input {
  width: 100%;
  height: 50px;
  border: 1px solid #D2D2D2;
  border-radius: 5px;
  font-size: 18px;
  padding-left: 20px;
}
.CreateAccount .right .input-wrapper input:focus {
  outline: none;
  border: 2px solid #30903A;
}
.CreateAccount .right .input-wrapper .usernameTaken:focus, .CreateAccount .right .input-wrapper .usernameTaken {
  border: 2px solid red;
}
.CreateAccount .right .input-wrapper .error {
  font-size: 14px;
  text-align: left;
}
.CreateAccount .right .create-button {
  width: 100%;
  max-width: 500px;
  height: 50px;
  background-color: #30903A;
  color: #FFFFFF;
  border-radius: 5px;
  font-size: 20px;
  margin-top: 15px;
  margin-bottom: 1em;
  cursor: pointer;
}
.CreateAccount .right .agreement {
  width: 100%;
  max-width: 500px;
}
.CreateAccount .right .agreement input {
  height: 15px;
  width: 15px;
  margin-left: -0.2px;
}
.CreateAccount .right .agreement label {
  font-size: 18px;
}
.CreateAccount .right .agreement a {
  margin-left: 5px;
  font-size: 18px;
  color: #30903A;
}
.CreateAccount .right .agreement-2 {
  width: 100%;
  max-width: 500px;
  margin-top: 10px;
  margin-bottom: 10px;
}

.Subscription {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  flex-wrap: wrap;
}
.Subscription .price-card {
  border: 1px solid #D2D2D2;
  width: 350px;
  height: 500px;
  display: grid;
  grid-template-rows: 15% 55% 30%;
  border-radius: 5px;
  padding: 15px;
  margin-top: 15px;
}
.Subscription .price-card .price-header {
  border-bottom: 1px solid #D2D2D2;
}
.Subscription .price-card .price-header .title {
  font-size: 30px;
  margin-left: 10px;
  font-weight: 700;
}
.Subscription .price-card .price-body {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}
.Subscription .price-card .price-body .info-icon-ex {
  margin-right: 5px;
  color: rgb(189, 43, 43);
  font-size: 18px;
  transform: rotate(45deg);
}
.Subscription .price-card .price-body .info-icon {
  margin-right: 5px;
  color: #30903A;
  font-size: 18px;
}
.Subscription .price-card .price-footer {
  border-top: 1px solid #D2D2D2;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
}
.Subscription .price-card .price-footer .amount {
  display: flex;
}
.Subscription .price-card .price-footer .amount .price {
  font-size: 30px;
  font-weight: 600;
  color: #30903A;
}
.Subscription .price-card .price-footer .amount .time {
  display: flex;
  align-items: flex-end;
  font-weight: 600;
  color: #D2D2D2;
}
.Subscription .price-card .price-footer .price-button {
  width: 60%;
  height: 50px;
  border-radius: 5px;
  background-color: #30903A;
  color: #FFFFFF;
  font-size: 18px;
  cursor: pointer;
}
.Subscription .price-card .price-footer .price-button:disabled {
  background-color: #D2D2D2;
}

.SubscriptionSuccess {
  display: grid;
  grid-template-rows: 1fr 1fr 1fr;
  height: 100%;
}
.SubscriptionSuccess .success-icon-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
}
.SubscriptionSuccess .success-icon-wrapper .success-icon {
  font-size: 140px;
  color: #30903A;
}
.SubscriptionSuccess .success-text-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  flex-direction: column;
}
.SubscriptionSuccess .success-text-wrapper .dashboard-link {
  margin-left: 5px;
  text-decoration: none;
  color: #30903A;
}
.SubscriptionSuccess .success-text-wrapper .dashboard-link:hover {
  color: #2C4E2D;
}

@media only screen and (max-width: 600px) {
  .CreateAccount {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-left: 0px;
    margin-right: 0px;
  }
  .CreateAccount .left {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-left: -2.7em;
  }
  .CreateAccount .left .title {
    font-size: 34px;
    line-height: 28px;
    margin-top: 5.6px;
  }
  .CreateAccount .left #title {
    font-size: 34px;
    width: 5em;
    line-height: 31.4px;
  }
  .CreateAccount .left .highlights {
    margin-top: 14px;
  }
  .CreateAccount .left .highlights .highlight {
    display: flex;
    align-items: center;
    line-height: 21px;
    margin-bottom: 6.4px;
  }
  .CreateAccount .left .highlights .highlight #pen-icon {
    margin-bottom: 8.5px;
  }
  .CreateAccount .right {
    width: 100%;
  }
  .CreateAccount .right .error {
    font-weight: 500;
    padding: 0.5em;
    width: 100%;
    text-align: center;
    color: red;
  }
  .registration {
    width: 100vw;
    height: 100vh;
    display: grid;
    grid-template-rows: 10% 90%;
  }
  .registration .header {
    height: 86px;
    padding: 25px;
    border-bottom: 1px solid lightgray;
    display: flex;
    flex-direction: column;
  }
  .registration .header .left {
    display: flex;
    font-size: 32px;
    font-weight: 600;
    margin-top: -21px;
    margin-left: -8px;
  }
  .registration .header .center {
    display: flex;
    justify-content: space-between;
  }
  .registration .header .center p {
    font-size: 16px;
    font-weight: 600;
    margin-top: 10px;
  }
  .registration .header .center .active {
    color: #30903A;
  }
  .registration .header .right {
    display: flex;
    margin-top: -5.7em;
    margin-right: -8px;
  }
  .registration .header .right p {
    font-size: 14.6px;
    font-weight: 500;
  }
  .registration .header .right .link {
    margin-left: 5px;
    font-size: 16px;
    font-weight: 500;
    color: #30903A;
    text-decoration: none;
  }
  .price-card {
    width: 280px !important;
  }
}
@media screen and (max-width: 768px) {
  .mobile-hidden {
    display: none;
  }
}

.my-registrations {
  padding: 20px;
}
.my-registrations .yoi-form-link {
  font-weight: bold;
  color: #1e266d;
  font-size: 25px;
}
.my-registrations .successful {
  color: #30903A;
  margin: 5px;
}
.my-registrations > div {
  width: 70%;
  margin: auto;
}
@media screen and (max-width: 768px) {
  .my-registrations > div {
    width: 100%;
  }
}
.my-registrations .kids-list {
  display: flex;
  flex-direction: column;
}
.my-registrations .kids-list .headers, .my-registrations .kids-list .info > div {
  display: flex;
}
.my-registrations .kids-list .headers {
  width: 100%;
  padding: 5px 5px;
  border: 1px solid #D2D2D2;
  border-radius: 5px 5px 0px 0px;
  background-color: #F4F5FA;
}
.my-registrations .kids-list .headers p {
  width: 25%;
  font-weight: bold;
  padding: 5px;
  margin: 0px;
}
@media screen and (max-width: 768px) {
  .my-registrations .kids-list .headers p {
    width: 50%;
  }
}
.my-registrations .kids-list .info {
  width: 100%;
  border-width: 0px 1px 1px 1px;
  border-style: solid;
  border-color: #D2D2D2;
  padding: 0px 5px 0px 5px;
  border-radius: 0px 0px 5px 5px;
}
.my-registrations .kids-list .info > div {
  padding-top: 15px;
  padding-bottom: 15px;
  border-width: 0px 0px 1px 0px;
  border-style: solid;
  border-color: #D2D2D2;
}
.my-registrations .kids-list .info > div:last-child {
  border-width: 0px;
}
.my-registrations .kids-list .info p {
  width: 25%;
  padding: 5px;
  margin: 0px;
}
@media screen and (max-width: 768px) {
  .my-registrations .kids-list .info p {
    width: 50%;
  }
}
.my-registrations .kids-list .register-again-button-wrapper {
  margin-bottom: 15px;
}
.my-registrations .kids-list .register-again-button-wrapper .register-again-error {
  font-size: 14px;
  color: red;
}
.my-registrations .kids-list .confirmation-checkbox-input-wrapper {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}
.my-registrations .kids-list .confirmation-checkbox-input-wrapper input {
  margin-right: 8px;
}
.my-registrations .kids-list .confirmation-checkbox-input-wrapper input, .my-registrations .kids-list .confirmation-checkbox-input-wrapper label {
  cursor: pointer;
}
.my-registrations .kids-list button {
  height: 30px;
  border: 1px solid #D2D2D2;
  border-radius: 3px;
  padding: 5px 10px;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}
.my-registrations .kids-list button:hover:enabled {
  opacity: 0.8;
  cursor: pointer;
}

.register-again-modal {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important;
  width: -webkit-fit-content !important;
  width: -moz-fit-content !important;
  width: fit-content !important;
  height: -webkit-fit-content !important;
  height: -moz-fit-content !important;
  height: fit-content !important;
}
.register-again-modal .header {
  font-size: 1.5em;
  text-align: center;
  color: black;
  margin-top: 100px;
}
.register-again-modal .edit-form {
  display: flex;
  flex-wrap: wrap;
  margin: 0px 50px 100px 50px;
}
@media screen and (max-width: 1300px) {
  .register-again-modal .edit-form {
    flex-direction: column;
    margin: 0px 100px 100px 100px;
  }
}
.register-again-modal .inputWrapper {
  display: flex;
  flex-direction: column;
  margin-bottom: 5px;
  width: 50%;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
}
@media screen and (max-width: 768px) {
  .register-again-modal .inputWrapper {
    width: 100%;
  }
}
.register-again-modal .inputWrapper label {
  font-weight: 500;
  width: 250px;
  text-align: left;
}
.register-again-modal .inputWrapper input, .register-again-modal .inputWrapper select {
  width: 250px;
  height: 25px;
  border: 1px solid #D2D2D2;
  font-size: 16px;
}
.register-again-modal .inputWrapper input:focus {
  outline: none;
}
.register-again-modal button {
  height: 30px;
  border: 1px solid #D2D2D2;
  border-radius: 3px;
  padding: 5px 10px;
  width: 100px;
  margin: auto;
  cursor: pointer;
}
.register-again-modal button:hover {
  opacity: 0.8;
}

.pricing-modal {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important;
  width: -webkit-fit-content !important;
  width: -moz-fit-content !important;
  width: fit-content !important;
  height: -webkit-fit-content !important;
  height: -moz-fit-content !important;
  height: fit-content !important;
}
@media screen and (max-width: 768px) {
  .pricing-modal {
    width: 100% !important;
  }
}
.pricing-modal .pricing-wrapper {
  margin: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.pricing-modal .pricing-header {
  font-size: 1.5em;
  text-align: center;
  color: black;
  margin-bottom: 0px;
}
.pricing-modal .pricing-details {
  font-size: 1.1em;
  font-weight: bold;
  text-align: center;
}
.pricing-modal .pricing-disclaimer {
  color: red;
  margin-top: 5px;
  font-size: 13px;
}
.pricing-modal p {
  color: black;
}
.pricing-modal button {
  height: 30px;
  border: 1px solid #D2D2D2;
  border-radius: 3px;
  padding: 5px 10px;
  width: 100px;
  text-align: center;
  margin-top: 10px;
}
.pricing-modal button:hover:enabled {
  opacity: 0.8;
  cursor: pointer;
}
.pricing-modal .out-of-town-checkbox {
  display: flex;
  align-items: center;
}
.pricing-modal .out-of-town-checkbox input {
  margin: 0px;
}
.pricing-modal .out-of-town-checkbox label {
  font-size: 14px;
  margin-left: 5px;
}

.formContainer {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 60px 20px;
  background: linear-gradient(45deg, #52919a, #0a4e57);
}
@media (max-width: 44em) {
  .formContainer {
    padding: 0;
    background: none;
    margin-top: 15px;
  }
}
.formContainer .formWrapper {
  width: 790px;
  background: #fff;
  border-radius: 2px;
  padding: 55px 95px 68px 95px;
}
@media (max-width: 44em) {
  .formContainer .formWrapper {
    width: 100%;
    padding: 0;
  }
}
.formContainer .formWrapper .form {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.formContainer .formWrapper .form .formTitle {
  width: 100%;
  display: block;
  font-size: 30px;
  color: black;
  font-weight: bold;
  line-height: 1.2;
  text-align: center;
  padding-bottom: 30px;
}
.formContainer .formWrapper .form .formSubtitle {
  width: 100%;
  display: block;
  font-size: 20px;
  color: black;
  line-height: 1.2;
  text-align: center;
  padding-bottom: 45px;
}
@media (max-width: 44em) {
  .formContainer .formWrapper .form .formSubtitle {
    padding-bottom: 15px;
  }
}
.formContainer .formWrapper .form .formText {
  font-size: 1.1em;
  margin: 2em;
  line-height: 1.5em;
  text-align: justify;
}
.formContainer .formWrapper .form .label {
  font-size: 13px;
  color: #555555;
  line-height: 1.5;
  text-transform: uppercase;
  width: 100%;
  padding-bottom: 11px;
}
@media (max-width: 44em) {
  .formContainer .formWrapper .form .label {
    text-align: center;
    font-weight: bold;
    margin-top: 10px;
    margin-bottom: 10px;
    padding: 10px;
  }
}
.formContainer .formWrapper .form .smallerLabel {
  width: calc((100% - 40px) / 2);
}
.formContainer .formWrapper .form .inputWrapper {
  width: 100%;
  border: 1px solid #e6e6e6;
  border-radius: 2px;
  margin-bottom: 10px;
  margin-top: 5px;
}
.formContainer .formWrapper .form .inputWrapper .inputBox {
  display: block;
  width: 100%;
  height: 55px;
  background: transparent;
  font-size: 18px;
  color: black;
  line-height: 1.2;
  padding: 0 25px;
  outline: none;
  border: none;
}
.formContainer .formWrapper .form .inputWrapper .fakeInputBox {
  padding: 1em;
  text-align: center;
}
.formContainer .formWrapper .form .smallerInputWrapper {
  width: calc((100% - 40px) / 2);
}
.formContainer .formWrapper .form .mediumInputWrapper {
  width: calc((100% - 40px) / 1.25);
}
@media (max-width: 44em) {
  .formContainer .formWrapper .form .inputWrapper, .formContainer .formWrapper .form .smallerInputWrapper, .formContainer .formWrapper .form .mediumInputWrapper {
    width: 90%;
    margin: auto;
    margin-bottom: 5px;
  }
  .formContainer .formWrapper .form .inputWrapper input, .formContainer .formWrapper .form .smallerInputWrapper input, .formContainer .formWrapper .form .mediumInputWrapper input {
    text-align: center;
  }
}
.formContainer .formWrapper .form .requirementsWrapper .requirementsTitle {
  font-size: 1.2em;
  font-weight: 500;
}
@media (max-width: 44em) {
  .formContainer .formWrapper .form .requirementsWrapper .requirementsTitle {
    display: block;
    width: 100%;
    text-align: center;
  }
}
.formContainer .formWrapper .form .requirementsWrapper .requirementsUl {
  margin: 2.5% 10%;
}
.formContainer .formWrapper .form .requirementsWrapper .requirementsUl li {
  line-height: 1.5em;
}
.formContainer .formWrapper .form .selectWrapper {
  padding: 0;
  margin: 0;
  width: calc((100% - 40px) / 3);
  height: 100%;
  border: 1px solid #ccc;
  border-radius: 3px;
  overflow: hidden;
  background-color: #fff;
  background: #fff;
}
.formContainer .formWrapper .form .selectWrapper .selectStyle {
  padding: 5px 8px;
  width: 100%;
  border: none;
  box-shadow: none;
}
.formContainer .formWrapper .form .selectWrapper .selectStyle:focus {
  outline: none;
}
.formContainer .formWrapper .form .selectWrapper .selectStyle option {
  font-size: 1.2em;
}
.formContainer .formWrapper .form .row {
  display: block;
  width: 100%;
  text-align: center;
  font-weight: bold;
}
@media (max-width: 44em) {
  .formContainer .formWrapper .form .row {
    margin-top: 1em;
  }
}
.formContainer .formWrapper .form .btn {
  width: calc((100% - 40px) / 3);
  background-color: transparent;
  padding: 10px 30px;
  margin: 0;
  border: 1px solid #ccc;
  border-radius: 3px;
  cursor: pointer;
  font-size: 13px;
  color: black;
}
.formContainer .formWrapper .form .btn:focus, .formContainer .formWrapper .form .btnactive {
  box-shadow: inset 0px 0px 4px 4px rgba(0, 0, 0, 0.1);
  outline: none;
}
.formContainer .formWrapper .form .submit {
  background-color: lightskyblue;
  margin: auto;
}
@media (max-width: 44em) {
  .formContainer .formWrapper .form .submit {
    margin-top: 1em;
    margin-bottom: 0.5em;
  }
}
.formContainer .formWrapper .form .hereToTakeUpSpace {
  width: 100%;
}

.bold {
  font-weight: bold;
}

.cursive {
  font-style: italic;
}

.centered {
  padding: 2em;
  text-align: center;
}

.raffleCheckout-wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
}
.raffleCheckout-wrapper .raffleCheckout {
  max-width: 1000px;
  display: grid;
  grid-template-rows: 50px 200px 400px;
  padding-top: 10px;
}
@media only screen and (max-width: 600px) {
  .raffleCheckout-wrapper .raffleCheckout {
    max-width: 95vw;
    grid-template-rows: auto auto;
  }
}
.raffleCheckout-wrapper .raffleCheckout .container .details {
  background-color: #ffffff;
  border: 2px solid lightgray;
  border-radius: 5px;
  margin-bottom: 15px;
}
.raffleCheckout-wrapper .raffleCheckout .container .details .title {
  margin: 10px;
  font-size: 22px;
  font-weight: 600;
}
.raffleCheckout-wrapper .raffleCheckout .container .details .raffle-description {
  margin: 10px;
  font-size: 18px;
}
.raffleCheckout-wrapper .raffleCheckout .container .options {
  display: flex;
  justify-content: space-evenly;
  padding: 0 20px;
}
@media only screen and (max-width: 1000px) {
  .raffleCheckout-wrapper .raffleCheckout .container .options {
    flex-wrap: wrap;
  }
}
@media only screen and (max-width: 1000px) {
  .raffleCheckout-wrapper .raffleCheckout .container .options {
    padding: 0 0px;
  }
}
.raffleCheckout-wrapper .raffleCheckout .container .options .option {
  background-color: #ffffff;
  border: 2px solid lightgray;
  border-radius: 5px;
  margin-bottom: 15px;
  width: 350px;
  height: 400px;
  padding: 50px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}
.raffleCheckout-wrapper .raffleCheckout .container .options .option .title {
  font-size: 26px;
  font-weight: 600;
  text-align: center;
}
.raffleCheckout-wrapper .raffleCheckout .container .options .option button {
  width: 100%;
  height: 35px;
  border: 1px solid transparent;
  border-radius: 5px;
  color: white;
  font-size: 18px;
  background-color: #30903A;
}

.raffle {
  display: grid;
  grid-template-columns: 55% 45%;
  height: 100%;
  max-height: 100%;
  text-transform: uppercase;
  font-family: "Roboto Condensed", sans-serif;
  padding: 5px;
}
.raffle .left-side {
  display: grid;
  grid-template-rows: 1fr 2fr;
}
.raffle .left-side .header .title {
  font-size: 60px;
  line-height: 1.5;
  font-weight: 700;
  letter-spacing: -2px;
}
.raffle .left-side .header .sub-title {
  font-size: 35px;
  line-height: 1.5;
  font-weight: 700;
  letter-spacing: -2px;
  color: lightgray;
}
@media only screen and (max-width: 1007px) {
  .raffle .left-side .header .title {
    font-size: 42px;
  }
  .raffle .left-side .header .sub-title {
    font-size: 28px;
  }
}
@media only screen and (max-width: 641px) {
  .raffle .left-side .header .title {
    font-size: 22px;
  }
  .raffle .left-side .header .sub-title {
    font-size: 15px;
  }
}
.raffle .left-side .body {
  height: auto;
}
.raffle .left-side .body .text {
  display: grid;
  grid-template-rows: 1fr 1fr 1fr;
}
.raffle .left-side .body .text .text-1 {
  font-size: 22px;
}
.raffle .left-side .body .text .text-2 {
  align-self: flex-end;
  font-size: 22px;
}
.raffle .left-side .body .text .button-container {
  display: flex;
  justify-content: center;
  align-items: center;
}
@media only screen and (max-width: 1007px) {
  .raffle .left-side .body .text .text-1 {
    font-size: 15px;
  }
  .raffle .left-side .body .text .text-2 {
    align-self: flex-end;
    font-size: 15px;
  }
}
.raffle .right-side {
  display: flex;
  justify-content: center;
  align-items: center;
}
.raffle .right-side .images {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
.raffle .right-side .images .image-1 {
  height: 250px;
  width: 250px;
  padding: 15px;
}
@media only screen and (max-width: 1007px) {
  .raffle .right-side .images .image-1 {
    height: 250px;
    width: 250px;
  }
}
@media only screen and (max-width: 641px) {
  .raffle .right-side .images .image-1 {
    height: 150px;
    width: 150px;
  }
}

.draw {
  background: none;
  border: 0;
  box-sizing: border-box;
  margin: 1em;
  padding: 1em 2em;
  text-decoration: none;
  box-shadow: inset 0 0 0 2px black;
  color: black;
  font-size: 22px;
  font-weight: 700;
  position: relative;
  vertical-align: middle;
  transition: color 0.25s;
}
@media only screen and (max-width: 641px) {
  .draw {
    font-size: 15px;
  }
}
.draw::before, .draw::after {
  box-sizing: inherit;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
}
.draw::before, .draw::after {
  border: 2px solid transparent;
  width: 0;
  height: 0;
}
.draw::before {
  top: 0;
  left: 0;
}
.draw::after {
  bottom: 0;
  right: 0;
}
.draw:hover::before, .draw:hover::after {
  width: 100%;
  height: 100%;
}
.draw:hover::before {
  border-top-color: red;
  border-right-color: red;
  transition: width 0.25s ease-out, height 0.25s ease-out 0.25s;
}
.draw:hover::after {
  border-bottom-color: red;
  border-left-color: red;
  transition: border-color 0s ease-out 0.5s, width 0.25s ease-out 0.5s, height 0.25s ease-out 0.75s;
}

.meet::after {
  top: 0;
  left: 0;
}
.meet:hover::before {
  border-top-color: red;
  border-right-color: red;
}
.meet:hover::after {
  border-bottom-color: red;
  border-left-color: red;
  transition: height 0.25s ease-out, width 0.25s ease-out 0.25s;
}

@media only screen and (max-width: 641px) {
  .raffle {
    display: grid;
    grid-template-columns: 60% 40%;
    text-transform: uppercase;
    font-family: "Roboto Condensed", sans-serif;
    padding: 5px;
  }
  .raffle .left-side {
    display: grid;
    grid-template-rows: 8% 1fr;
  }
  .raffle .left-side .header .title {
    font-size: 24px;
  }
  .raffle .left-side .header .sub-title {
    font-size: 18px;
  }
  .raffle .left-side .body {
    height: 80%;
  }
  .raffle .left-side .body .text {
    height: 100%;
    display: grid;
    grid-template-rows: 1fr 1fr 1fr;
  }
  .raffle .left-side .body .text .text-1 {
    font-size: 18px;
  }
  .raffle .left-side .body .text .text-2 {
    align-self: flex-end;
    font-size: 18px;
  }
  .raffle .left-side .body .text .button-container {
    display: flex;
    justify-content: center;
    align-items: flex-end;
  }
  .raffle .right-side .images .image-1 {
    height: 150px;
    width: 150px;
    padding: 25px;
  }
}
.my-tickets-button {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  padding: 10px 25px;
  border: 1px solid #2699FB;
  color: #2699FB;
  transition: 0.3s ease all;
  text-decoration: none;
  font-weight: 700;
  margin-bottom: 10px;
}
.my-tickets-button:hover {
  background-color: #2699FB;
  color: white;
}

@media (max-width: 800px) {
  .my-raffle-tickets .raffle-tickets .ticket-wrapper {
    margin-left: 40px;
  }
}
.my-raffle-tickets .raffle-tickets {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: auto;
  grid-gap: 25px;
  justify-items: center;
}
.my-raffle-tickets .raffle-tickets .ticket-wrapper {
  background-color: #BCE0FD;
  width: 250px;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.my-raffle-tickets .raffle-tickets .ticket-wrapper .ticket {
  padding: 15px;
  border: 1px solid black;
  width: 225px;
  height: 85px;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}
.my-raffle-tickets .raffle-tickets .ticket-wrapper .ticket .title {
  text-align: center;
  font-size: 24px;
  font-weight: 700;
}
.my-raffle-tickets .raffle-tickets .ticket-wrapper .ticket .ticket-number {
  text-align: center;
  font-size: 16px;
  font-weight: 500;
}

.raffle-info {
  width: 400px;
  margin-right: 20px;
  margin-bottom: 50px;
}

@media only screen and (max-width: 1000px) {
  .raffle-info {
    margin-right: 0px;
    margin-bottom: 50px;
  }
}
@media only screen and (max-width: 600px) {
  .raffle-info {
    width: 100%;
  }
}
.checkout-wrapper {
  width: 100%;
  min-height: 100%;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  background-color: #f1f1f1;
}
.checkout-wrapper .checkout {
  margin: 0px 50px 25px 50px;
  display: grid;
  grid-template-columns: 2fr 1fr;
}
@media (max-width: 44em) {
  .checkout-wrapper .checkout {
    grid-template-columns: none;
    margin: 0px 20px;
  }
}
.checkout-wrapper .checkout .left-side,
.checkout-wrapper .checkout .right-side {
  margin: 15px;
}
.checkout-wrapper .checkout .left-side .card-title,
.checkout-wrapper .checkout .right-side .card-title {
  text-transform: uppercase;
  color: #007bff;
  font-size: 12px;
  font-weight: 500;
}
.checkout-wrapper .checkout .left-side .card,
.checkout-wrapper .checkout .right-side .card {
  width: 100%;
  background-color: #ffffff;
  border: 1 solid #eeeeee;
  border-radius: 5px;
  margin-bottom: 15px;
  transition: 1s ease-in-out;
}
.checkout-wrapper .checkout .left-side .card .card-item,
.checkout-wrapper .checkout .right-side .card .card-item {
  display: grid;
  grid-template-columns: 3fr 1fr;
  grid-template-rows: 1fr 1fr;
  padding: 15px;
}
.checkout-wrapper .checkout .left-side .card .card-item .desc,
.checkout-wrapper .checkout .right-side .card .card-item .desc {
  grid-column: 1;
  grid-row: 2;
  font-size: 14px;
  color: gray;
}
.checkout-wrapper .checkout .left-side .card .card-item .item-price,
.checkout-wrapper .checkout .right-side .card .card-item .item-price {
  display: flex;
  justify-self: flex-end;
}
.checkout-wrapper .checkout .left-side .card .card-item .item-quantity,
.checkout-wrapper .checkout .right-side .card .card-item .item-quantity {
  grid-column: 2;
  grid-row: 2;
  grid-gap: 5px;
  display: flex;
  justify-content: flex-end;
}
.checkout-wrapper .checkout .left-side .card .card-item .item-quantity .item-qty-input,
.checkout-wrapper .checkout .right-side .card .card-item .item-quantity .item-qty-input {
  width: 30%;
}
.checkout-wrapper .checkout .left-side .card .card-header,
.checkout-wrapper .checkout .right-side .card .card-header {
  height: 5vh;
  display: flex;
  align-items: center;
}
.checkout-wrapper .checkout .left-side .card .card-header .round,
.checkout-wrapper .checkout .right-side .card .card-header .round {
  width: 1.3em;
  height: 1.3em;
  margin-right: 10px;
  margin-left: 10px;
  background-color: white;
  border-radius: 50%;
  vertical-align: middle;
  border: 1px solid #ddd;
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
  outline: none;
  cursor: pointer;
}
.checkout-wrapper .checkout .left-side .card .card-header .round:checked,
.checkout-wrapper .checkout .right-side .card .card-header .round:checked {
  background-color: grey;
}
.checkout-wrapper .checkout .left-side .card .card-body,
.checkout-wrapper .checkout .right-side .card .card-body {
  margin: 10px;
  height: 0;
  transition: 0.5s;
  transition-delay: 0s, 0.2s;
  transition-property: height, opacity;
  opacity: 0;
  visibility: hidden;
}
.checkout-wrapper .checkout .left-side .card .card-body.show,
.checkout-wrapper .checkout .right-side .card .card-body.show {
  height: 425px;
  opacity: 1;
  visibility: visible;
}
@media (max-width: 44em) {
  .checkout-wrapper .checkout .left-side .card .card-body.show,
  .checkout-wrapper .checkout .right-side .card .card-body.show {
    height: 560px;
  }
}
.checkout-wrapper .checkout .left-side .card.summary .card-header,
.checkout-wrapper .checkout .right-side .card.summary .card-header {
  height: 60px;
}
.checkout-wrapper .checkout .left-side .card.summary .card-header .title,
.checkout-wrapper .checkout .right-side .card.summary .card-header .title {
  display: flex;
  justify-content: center;
  align-content: center;
  height: 40px;
  width: 100%;
  margin: 10px;
  font-size: 20px;
  font-weight: 600;
  background-color: #f1f1f1;
}
.checkout-wrapper .checkout .left-side .card.summary .card-main,
.checkout-wrapper .checkout .right-side .card.summary .card-main {
  margin: 10px;
  display: grid;
  grid-template-rows: 1fr 1fr 1fr 2fr;
}
.checkout-wrapper .checkout .left-side .card.summary .card-main .price,
.checkout-wrapper .checkout .left-side .card.summary .card-main .date,
.checkout-wrapper .checkout .left-side .card.summary .card-main .time,
.checkout-wrapper .checkout .left-side .card.summary .card-main .total,
.checkout-wrapper .checkout .right-side .card.summary .card-main .price,
.checkout-wrapper .checkout .right-side .card.summary .card-main .date,
.checkout-wrapper .checkout .right-side .card.summary .card-main .time,
.checkout-wrapper .checkout .right-side .card.summary .card-main .total {
  display: flex;
  justify-content: space-between;
}
.checkout-wrapper .checkout .left-side .card.summary .card-main .cart,
.checkout-wrapper .checkout .right-side .card.summary .card-main .cart {
  padding-bottom: 15px;
}
.checkout-wrapper .checkout .left-side .card.summary .card-main .cart .cart-items,
.checkout-wrapper .checkout .right-side .card.summary .card-main .cart .cart-items {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.checkout-wrapper .checkout .left-side .card.summary .card-main .cart .cart-items .item,
.checkout-wrapper .checkout .right-side .card.summary .card-main .cart .cart-items .item {
  width: 100%;
  margin-left: 15px;
}
.checkout-wrapper .checkout .left-side .card.summary .card-main .total,
.checkout-wrapper .checkout .right-side .card.summary .card-main .total {
  padding-bottom: 10px;
}

.card-wrapper {
  display: grid;
  grid-template-rows: 1fr 1fr;
}
@media (max-width: 44em) {
  .card-wrapper {
    grid-template-rows: 3fr 1fr;
  }
}
.card-wrapper .card-payment-button {
  display: flex;
  justify-self: flex-end;
  justify-content: center;
  align-items: center;
  width: 30%;
  height: 40px;
  border-radius: 5px;
  padding: 0.75em;
  font-size: 16px;
  background-color: #007bff;
  color: white;
}
.card-wrapper .card-payment-button:hover {
  opacity: 0.8;
}
@media (max-width: 44em) {
  .card-wrapper .card-payment-button {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    margin: auto;
  }
}

.user-info {
  display: grid;
  grid-template-rows: 1fr 1fr;
  border-bottom: 1px solid #f1f1f1;
  margin-bottom: 15px;
}
.user-info .info-input {
  display: grid;
  grid-template-rows: 1fr 1fr;
  margin: 0px 10px 10px 10px;
}
.user-info .info-input label {
  font-size: 13.5px;
}
.user-info .info-input input {
  width: 100%;
  padding: 0.25em 0;
  font-size: 13.5px;
  border: none;
  border-bottom: 1px solid black;
  outline: none;
}
.user-info .double {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.user-info .double select {
  outline: none;
  border: 1px solid #007bff;
  border-radius: 3px;
  padding: 0.3em;
}

.card-info {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  padding-bottom: 20px;
}
@media (max-width: 44em) {
  .card-info {
    grid-template-columns: none;
    grid-template-rows: 1fr 1fr 1fr;
    padding-bottom: 7.5px;
  }
}
.card-info .card-element {
  display: grid;
  grid-template-rows: 1fr 1fr;
}
@media (max-width: 44em) {
  .card-info .card-element {
    padding: 0.25em;
  }
  .card-info .card-element label {
    margin-bottom: 5px;
  }
}

.confirmation {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.confirmation .card {
  width: 50%;
  height: 400px;
  border: 1px solid black;
  background-color: #f1f1f1;
  border-radius: 5px;
  display: grid;
  grid-template-rows: 1fr 2fr 1fr;
}
.confirmation .card .header {
  display: flex;
  justify-content: center;
}
.confirmation .card .header p {
  font-size: 28px;
  display: flex;
  justify-self: center;
}
.confirmation .card .body {
  display: flex;
  align-items: center;
  flex-direction: column;
}
.confirmation .card .body p {
  font-size: 20px;
}
.confirmation .card .footer {
  display: flex;
  justify-content: center;
  align-items: center;
}
.confirmation .card .footer a {
  width: 33%;
  height: 50%;
  font-size: 30px;
  border-radius: 30px;
  color: #007bff;
  background-color: white;
  border: 2px solid #007bff;
  text-decoration: none;
  text-align: center;
  transition: 0.3s ease-in-out;
}
.confirmation .card .footer a:hover {
  border: 2px solid white;
  background-color: #007bff;
  color: white;
}

.home-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: 50px;
}

.link-cards {
  width: 100%;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  display: flex;
  justify-content: center;
  text-align: center;
}

.card {
  background-color: white;
  width: 300px;
  height: 400px;
  text-align: center;
  margin: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.75);
  border-radius: 10px;
}

.card-titlee {
  font-size: 40px;
  background-color: #313639;
  padding: 1px;
  width: 100%;
  color: #ffffff;
  border-radius: 10px 10px 0px 0px;
}

.card-link {
  margin-top: 10px;
  margin-bottom: 10px;
  padding: 4px;
  border-radius: 10px;
  width: 100px;
}

.card-link:hover {
  filter: brightness(90%);
}

.card-link a {
  text-decoration: none;
  color: #222;
  font-weight: 700;
  border-bottom: 1px solid #222;
}

.card-link a:hover {
  color: #111;
}

.card-content {
  width: 100%;
  height: 100%;
  padding: 5px;
  overflow: hidden;
}

@media (max-width: 44em) {
  .home-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
    width: 100%;
  }
  .link-cards {
    display: flex;
    justify-content: center;
    align-content: center;
  }
  .card {
    width: 200px;
    height: 250px;
  }
  .card-titlee {
    font-size: 20px;
  }
  .card-content {
    font-size: 10px;
  }
}
@media (max-width: 44em) {
  .card-link {
    font-size: 15px;
  }
  .card-link {
    height: 20px;
    width: 80%;
    margin-top: 5px;
    margin-bottom: 5px;
    padding: 2px;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .card2 {
    background-color: cadetblue;
    width: 100px;
    height: 150px;
  }
  .card-title2 {
    font-size: 15px;
    background-color: darkcyan;
  }
  .card-link2 a {
    font-size: 15px;
  }
  .card-content2 {
    font-size: 10px;
  }
  .card-link4 {
    font-size: 10px;
  }
  .ccLink {
    font-size: 10px;
  }
}
.link-cardsA {
  display: flex;
  justify-content: center;
  align-items: center;
}

.cardA {
  background-color: white;
  width: 85%;
  height: 47 0px;
  text-align: center;
  margin: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.75);
  border-radius: 10px;
}

.card-titleeA {
  font-size: 40px;
  background-color: #313639;
  padding: 1px;
  width: 100%;
  color: #ffffff;
  border-radius: 10px 10px 0px 0px;
}

.card-linkA {
  margin-top: 10px;
  margin-bottom: 10px;
  padding: 4px;
  border-radius: 10px;
  width: 100px;
}

.card-linkA:hover {
  filter: brightness(90%);
}

.card-linkA a {
  text-decoration: none;
  color: #222;
  font-weight: 700;
  border-bottom: 1px solid #222;
  padding: 10px;
}

.card-linkA a:hover {
  color: #222;
}

.card-contentA {
  margin-bottom: 20px;
  font-size: 20px;
  text-align: center;
  letter-spacing: 0.5px;
  font-weight: 700;
  padding: 50px;
}

@media (max-width: 44em) {
  .cardA {
    background-color: white;
    width: 95%;
    height: 610px;
    text-align: center;
    margin: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.75);
    border-radius: 10px;
  }
  .card-titleeA {
    font-size: 40px;
    background-color: #313639;
    padding: 1px;
    width: 100%;
    color: #ffffff;
    border-radius: 10px 10px 0px 0px;
  }
  .card-linkA {
    margin-top: 10px;
    margin-bottom: 10px;
    padding: 4px;
    border-radius: 10px;
    width: 100px;
  }
  .card-linkA:hover {
    filter: brightness(90%);
  }
  .card-linkA a {
    text-decoration: none;
    color: #222;
    font-weight: 700;
    border-bottom: 1px solid #222;
  }
  .card-linkA a:hover {
    color: #222;
  }
  .card-contentA {
    font-size: 15px;
    width: 100%;
    height: 100%;
    padding: 5px;
    overflow: hidden;
  }
}
.CLH {
  text-transform: capitalize;
}

.calenderWrapper {
  width: 80%;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.75);
  text-align: center;
  height: calc(-webkit-fit-content + 100px);
  height: calc(-moz-fit-content + 100px);
  height: calc(fit-content + 100px);
}

.calender {
  display: flex;
  justify-content: center;
  align-items: center;
}

.calenderTitle {
  font-size: 30px;
}

.calenderBox {
  width: 100px;
  height: 100px;
  border: 1px solid #111;
  transition: 0.5s;
  margin: 5px;
  overflow: hidden;
}

.calenderBox:hover {
  width: 100px;
  height: 100px;
}

.claenderEvent {
  font-size: 12px;
  margin-top: 15px;
}

.calenderYear {
  font-size: 25px;
}

.calenderMonth {
  font-size: 25px;
}

.claenderEventT {
  margin-top: 15px;
}

.petitionApp * {
  padding: 2px;
  max-width: 100vw;
  margin: 0 5px;
}

#petitionHeader {
  display: flex;
  flex-direction: column;
  font-size: 1.2em;
  font-weight: 700;
  padding-left: 9px;
}

.petitionTitle {
  align-self: center;
  font-weight: bold;
  text-align: center;
}

.petitionTopText {
  font-size: 1.2em;
  font-weight: 700;
}

.petitionS {
  font-size: 1.2em;
  font-weight: 700;
}

.bottomContainer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-bottom: 1.2em;
}

.errorMessage {
  color: red;
  margin-top: -7px;
}

.pleaseSignBelow {
  margin-top: 16px;
  font-size: 27px;
  font-weight: 700;
}

.signatureCanvas {
  border: 2px solid black;
  width: 500px;
  height: 200px;
}

.petitionInput input {
  width: 230px;
  height: 40px;
  border: 2px solid #111;
  outline: none;
}

.petitionInput input::-moz-placeholder {
  font-size: 18px;
  text-align: center;
  font-weight: 700;
}

.petitionInput input:-ms-input-placeholder {
  font-size: 18px;
  text-align: center;
  font-weight: 700;
}

.petitionInput input::placeholder {
  font-size: 18px;
  text-align: center;
  font-weight: 700;
}

.petitionBtn {
  width: 100px;
  height: 30px;
  border: 2px solid #111;
  outline: none;
  transition: 0.3s;
}

.petitionBtn:hover {
  background-color: #aaa;
  border: 1px solid white;
  color: white;
}

@media (max-width: 44em) {
  .signatureCanvas {
    border: 1px solid black;
    width: 300px;
    height: 200px;
  }
  .petitionInput {
    margin: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
  }
  .petitionInput input {
    width: 300px;
    margin: 20px;
    height: 40px;
    border: 1px solid #111;
    outline: none;
  }
  .petitionBtn {
    margin: 10px;
    width: 100px;
    height: 30px;
    border: 1px solid #111;
    outline: none;
  }
}
@media only screen and (max-width: 600px) {
  .petitionTopText {
    width: 19.4em !important;
    margin-left: -12px;
  }
  .errorMessage {
    margin-top: 8px;
    margin-bottom: -7px;
  }
  .pleaseSignBelow {
    margin-bottom: -11px;
    margin-top: 18px;
  }
  .petitionInput input {
    margin-top: -4px;
  }
  .signatureCanvas {
    margin-top: -25px;
  }
}
@media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-device-pixel-ratio: 2) and (device-aspect-ratio: 40/71) {
  .petitionTopText {
    width: 16.6em !important;
  }
  .bottomContainer {
    margin-left: 1px;
  }
}
@media (max-width: 44em) {
  .petitionHeader {
    width: 90%;
    padding: 20px;
    font-size: 15px;
  }
}
.petition-component {
  background-color: #fff;
  width: 100%;
  height: 100%;
  padding: 25px 10px;
  margin: 0;
  display: grid;
  justify-content: center;
  grid-gap: 25px;
  grid-auto-columns: 50%;
  grid-auto-rows: 100px;
}
@media (max-width: 500px) {
  .petition-component {
    grid-auto-columns: 70%;
  }
}
.petition-component .petition-link-wrapper {
  background-color: #707070;
  list-style: none;
  border-radius: 10px;
  box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.75);
  padding: 15px;
  text-align: center;
}
.petition-component .petition-link-wrapper .petition-link {
  color: white;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: 0.2s;
}
.petition-component .petition-link-wrapper .petition-link:hover {
  color: blue;
  border-bottom: 1px solid darkgreen;
}

@media only screen and (max-width: 500px) {
  .petition-component {
    width: 100vw;
  }
}
.petition-date {
  color: #fff;
}

.contact-component {
  display: flex;
  justify-content: center;
  align-items: center;
}

.contactWrapper {
  margin-top: 2.4em;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 50px;
  padding: 20px;
}

@media only screen and (max-width: 600px) {
  .contactWrapper {
    grid-template-columns: 1fr;
  }
}
.contactBox {
  width: 260px;
  height: 300px;
  background-color: #707070;
  border: 1px solid #111;
  margin-top: 15px;
}

.holder {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.contactImage {
  margin-top: -50px;
  width: 80%;
  height: auto;
  -o-object-fit: cover;
     object-fit: cover;
  border: 1px solid #111;
}

.contactInfoWrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30px;
}

.email {
  font-size: 40px;
  color: white;
  transition: 0.3s;
  border-bottom: 1px solid transparent;
}

.email:hover {
  font-size: 40px;
  color: lightblue;
  border-bottom: 1px solid lightblue;
}

.contactTitle {
  text-align: center;
  margin-top: 40px;
  font-size: 25px;
  color: white;
}

.contactFormComponentWrapper {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.coffee-wrapper-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.coffee-wrapper {
  width: 85%;
  margin-top: 50px;
}

.cTitle {
  background-color: #313639;
  border-radius: 10px 10px 0px 0px;
  width: 100%;
  color: #fff;
  text-align: center;
}

.coffee-card {
  width: 100%;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.75);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 30px;
  border-radius: 0px 0px 20px 20px;
}

.cDesc {
  margin-bottom: 20px;
  font-size: 20px;
  text-align: center;
  letter-spacing: 0.5px;
  font-weight: 700;
}

.cImages {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 5px;
}

.cImage {
  width: 100%;
  border: 1px solid #313639;
}

@media (max-width: 44em) {
  .cDesc {
    margin-bottom: 20px;
    font-size: 10px;
    text-align: center;
    letter-spacing: 0.5px;
    font-weight: 700;
  }
  .cImages {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 5px;
  }
}
strong {
  font-size: 20px;
}

.cTitle {
  font-size: 40px;
}

.agreements-container {
  display: flex;
  justify-content: center;
}
.agreements-container .agreement {
  width: 50%;
  min-width: 300px;
}
.agreements-container .agreement .header {
  font-size: 25px;
  display: flex;
  justify-content: center;
  margin-bottom: 15px;
}
.agreements-container .agreement .body .alert {
  text-align: center;
  height: 50px;
  font-size: 25px;
}
.agreements-container .agreement .body .agreement-checkbox {
  height: 50px;
  margin: 15px;
  display: grid;
  align-content: center;
  grid-template-columns: 20px 1fr;
}
.agreements-container .agreement .body .agreement-checkbox input {
  margin: 5px 0px 0px 5px;
}
.agreements-container .agreement .body .agreement-checkbox label {
  margin-left: 5px;
}
.agreements-container .agreement .body .agreement-submission {
  margin-left: 15px;
}
.agreements-container .agreement .body .agreement-submission button {
  width: 130px;
  height: 45px;
  border: 1px transparent;
  border-radius: 3px;
  font-size: 20px;
  background-color: #50666B;
  color: white;
}
.agreements-container .agreement .body .agreement-submission button:disabled {
  opacity: 50%;
}

.representative-form {
  padding: 20px;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.representative-form h1 {
  text-align: center;
  margin: 10px;
}
.representative-form h3 {
  text-align: justify;
}
.representative-form .checkbox-container {
  padding: 20px 0px;
}
@media (max-width: 44em) {
  .representative-form .checkbox-container {
    grid-template-columns: 1fr;
  }
}
.representative-form .checkbox-container .checkbox-wrapper {
  padding: 10px;
  margin: 10px;
  font-size: 20px;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.75);
  border-radius: 10px;
}
@media (max-width: 44em) {
  .representative-form .checkbox-container .checkbox-wrapper {
    padding: 20px 15px;
  }
}
.representative-form .checkbox-container .checkbox-wrapper input {
  margin: 0 10px;
  width: 15px;
  height: 15px;
}
.representative-form .checkbox-container .checkbox-wrapper ul {
  display: flex;
  flex-wrap: wrap;
  list-style-position: inside;
}
.representative-form .checkbox-container .checkbox-wrapper ul li {
  margin-right: 5%;
  margin-left: 5%;
}
.representative-form .expirationDate {
  text-align: center;
}
.representative-form .input-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px 0px;
}
@media (max-width: 44em) {
  .representative-form .input-container {
    grid-template-columns: 1fr;
  }
}
.representative-form .input-container .input-wrapper {
  padding: 10px;
  margin: 10px;
  text-align: center;
  font-size: 20px;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.75);
  border-radius: 10px;
}
@media (max-width: 44em) {
  .representative-form .input-container .input-wrapper {
    padding: 20px 15px;
  }
}
.representative-form .input-container .input-wrapper input {
  width: 90%;
  margin: 10px;
  max-height: 100%;
  height: 35px;
}
.representative-form .confirmation {
  padding: 10px;
  margin: 10px;
  font-size: 20px;
}
.representative-form .confirmation input[type=checkbox] {
  width: 30px;
  height: 30px;
  transform: scale(1.2, 1.2);
  margin-right: 15px;
}
@media (max-width: 44em) {
  .representative-form .confirmation input[type=checkbox] {
    width: 100px;
    height: 40px;
  }
}
.representative-form .submit-wrapper {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.representative-form .submit-wrapper .submit {
  border-radius: 25px;
  padding: 10px 20px;
  height: 50px;
  width: 100px;
}

@media only screen and (max-width: 600px) {
  .checkbox-wrapper {
    display: flex;
  }
  .checkbox-wrapper input {
    width: 10px;
    height: 10px;
    transform: scale(3);
  }
}
.Modal {
  position: fixed;
  height: 650px;
  max-height: 85%;
  width: 700px;
  max-width: 90%;
  border-radius: 4px;
  padding: 5px;
  top: 52.5%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
  color: #595959;
  outline: none;
  z-index: 20;
  font-family: "Inconsolata", serif;
}
@media (min-width: 1024px) {
  .Modal {
    height: 1000px;
    max-height: 80%;
    width: 1800px;
    max-width: 80%;
  }
}
.Modal .modal-header {
  padding: 15px;
  width: 100%;
  height: 10%;
  border-bottom: 1px solid black;
}
.Modal .modal-header .modal-title {
  font-size: 25px;
  margin-top: -3px;
}
.Modal .modal-header .saved {
  color: #30903A;
  position: absolute;
  top: 23px;
  right: 0;
  margin-right: 57px;
}
.Modal .modal-header .saving {
  color: red;
  position: absolute;
  top: 23px;
  right: 0;
  margin-right: 57px;
}
.Modal .modal-header .modal-close {
  margin-top: 15px;
  margin-right: 15px;
  position: absolute;
  top: 0;
  right: 0;
  background: transparent;
  border: none;
  font-size: 25px;
  padding: 0px 5px;
}
.Modal .modal-header .modal-close:hover {
  opacity: 60%;
}
.Modal .modal-body {
  height: 80%;
  max-height: 490px;
  overflow-y: auto;
  padding: 10px;
}
@media (max-height: 700px) {
  .Modal .modal-body {
    max-height: 430px;
  }
}
@media (max-height: 600px) {
  .Modal .modal-body {
    max-height: 350px;
  }
}
@media (min-width: 1024px) {
  .Modal .modal-body {
    max-height: 750px;
  }
}
.Modal .modal-footer {
  margin: 5px auto;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.Modal .modal-footer button {
  width: 90%;
  height: 90%;
  transition: 0.3s ease all;
}
.Modal .modal-footer button:hover {
  background-color: darkgray;
}

.Modal.Modal-sm {
  width: 500px;
  height: auto;
}

.Overlay {
  position: fixed;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  background-color: rgba(0, 0, 0, 0.65);
  z-index: 2;
}

.Modal-BP {
  position: fixed;
  height: auto;
  max-height: 85%;
  width: 500px;
  max-width: 90%;
  border-radius: 4px;
  padding: 5px;
  top: 52.5%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
  color: #595959;
  outline: none;
  z-index: 2;
  font-family: "Inconsolata", serif;
}
@media (min-width: 1024px) {
  .Modal-BP {
    height: auto;
    max-height: 80%;
    width: 500px;
    max-width: 80%;
  }
}
.Modal-BP .modal-header {
  width: 100%;
  height: 40px;
  border-bottom: 1px solid black;
  display: grid;
  grid-template-columns: 15% 1fr 15%;
  align-items: center;
}
.Modal-BP .modal-header .modal-title {
  font-size: 25px;
  text-align: center;
  color: #2699FB;
}
.Modal-BP .modal-header .bp-modal-button {
  color: #2699FB;
  font-size: 14px;
  background-color: transparent;
  border: none;
  height: 20px;
}
.Modal-BP .modal-header .bp-modal-button:disabled {
  color: #BCE0FD;
}
.Modal-BP .modal-body {
  height: 80%;
  max-height: 490px;
  overflow-y: auto;
  padding: 10px;
}
@media (max-height: 700px) {
  .Modal-BP .modal-body {
    max-height: 430px;
  }
}
@media (max-height: 600px) {
  .Modal-BP .modal-body {
    max-height: 350px;
  }
}
@media (min-width: 1024px) {
  .Modal-BP .modal-body {
    max-height: 750px;
  }
}

.maps-modal-header {
  display: flex;
  justify-content: space-between;
}

.maps-modal-body .maps-form {
  padding: 15px;
}
.maps-modal-body .maps-form .maps-input-container {
  height: 35px;
  display: grid;
  align-items: center;
  grid-template-columns: 25% 75%;
  margin-bottom: 10px;
}
.maps-modal-body .maps-form .maps-input-container label {
  font-weight: bold;
}
.maps-modal-body .maps-form .maps-input-container input {
  height: 100%;
  border-radius: 5px;
}

.rdw-option-wrapper {
  border: 1px solid #f1f1f1;
  padding: 5px;
  min-width: 25px;
  height: 20px;
  border-radius: 2px;
  margin: 0 4px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  background: white;
  text-transform: capitalize;
}

.rdw-option-wrapper:hover {
  box-shadow: 1px 1px 0px #bfbdbd;
}

.rdw-option-wrapper:active {
  box-shadow: 1px 1px 0px #bfbdbd inset;
}

.rdw-option-active {
  box-shadow: 1px 1px 0px #bfbdbd inset;
}

.rdw-option-disabled {
  opacity: 0.3;
  cursor: default;
}

.rdw-dropdown-wrapper {
  height: 30px;
  background: white;
  cursor: pointer;
  border: 1px solid #f1f1f1;
  border-radius: 2px;
  margin: 0 3px;
  text-transform: capitalize;
  background: white;
}

.rdw-dropdown-wrapper:focus {
  outline: none;
}

.rdw-dropdown-wrapper:hover {
  box-shadow: 1px 1px 0px #bfbdbd;
  background-color: #ffffff;
}

.rdw-dropdown-wrapper:active {
  box-shadow: 1px 1px 0px #bfbdbd inset;
}

.rdw-dropdown-carettoopen {
  height: 0px;
  width: 0px;
  position: absolute;
  top: 35%;
  right: 10%;
  border-top: 6px solid black;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
}

.rdw-dropdown-carettoclose {
  height: 0px;
  width: 0px;
  position: absolute;
  top: 35%;
  right: 10%;
  border-bottom: 6px solid black;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
}

.rdw-dropdown-selectedtext {
  display: flex;
  position: relative;
  height: 100%;
  align-items: center;
  padding: 0 5px;
}

.rdw-dropdown-optionwrapper {
  z-index: 100;
  position: relative;
  border: 1px solid #f1f1f1;
  width: 98%;
  background: white;
  border-radius: 2px;
  margin: 0;
  padding: 0;
  max-height: 250px;
  overflow-y: scroll;
}

.rdw-dropdown-optionwrapper:hover {
  box-shadow: 1px 1px 0px #bfbdbd;
  background-color: #ffffff;
}

.rdw-dropdownoption-default {
  min-height: 25px;
  display: flex;
  align-items: center;
  padding: 0 5px;
}

.rdw-dropdownoption-highlighted {
  background: #f1f1f1;
}

.rdw-dropdownoption-active {
  background: #f5f5f5;
}

.rdw-dropdownoption-disabled {
  opacity: 0.3;
  cursor: default;
}

.rdw-inline-wrapper {
  display: flex;
  align-items: center;
  margin-bottom: 6px;
}

.rdw-inline-dropdown {
  width: 50px;
}

.rdw-inline-dropdownoption {
  height: 40px;
  display: flex;
  justify-content: center;
}

.rdw-block-wrapper {
  display: flex;
  align-items: center;
  margin-bottom: 6px;
}

.rdw-block-dropdown {
  width: 110px;
}

.rdw-fontsize-wrapper {
  display: flex;
  align-items: center;
  margin-bottom: 6px;
}

.rdw-fontsize-dropdown {
  min-width: 40px;
}

.rdw-fontsize-option {
  display: flex;
  justify-content: center;
}

.rdw-fontfamily-wrapper {
  display: flex;
  align-items: center;
  margin-bottom: 6px;
}

.rdw-fontfamily-dropdown {
  width: 115px;
}

.rdw-fontfamily-placeholder {
  white-space: nowrap;
  max-width: 90px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rdw-fontfamily-optionwrapper {
  width: 140px;
}

.rdw-list-wrapper {
  display: flex;
  align-items: center;
  margin-bottom: 6px;
}

.rdw-list-dropdown {
  width: 50px;
  z-index: 90;
}

.rdw-list-dropdownOption {
  height: 40px;
  display: flex;
  justify-content: center;
}

.rdw-text-align-wrapper {
  display: flex;
  align-items: center;
  margin-bottom: 6px;
}

.rdw-text-align-dropdown {
  width: 50px;
  z-index: 90;
}

.rdw-text-align-dropdownOption {
  height: 40px;
  display: flex;
  justify-content: center;
}

.rdw-right-aligned-block {
  text-align: right;
}

.rdw-left-aligned-block {
  text-align: left !important;
}

.rdw-center-aligned-block {
  text-align: center !important;
}

.rdw-justify-aligned-block {
  text-align: justify !important;
}

.rdw-right-aligned-block > div {
  display: inline-block;
}

.rdw-left-aligned-block > div {
  display: inline-block;
}

.rdw-center-aligned-block > div {
  display: inline-block;
}

.rdw-justify-aligned-block > div {
  display: inline-block;
}

.rdw-colorpicker-wrapper {
  display: flex;
  align-items: center;
  margin-bottom: 6px;
  position: relative;
}

.rdw-colorpicker-modal {
  position: absolute;
  top: 35px;
  left: 5px;
  display: flex;
  flex-direction: column;
  width: 175px;
  height: 175px;
  border: 1px solid #f1f1f1;
  padding: 15px;
  border-radius: 2px;
  z-index: 100;
  background: white;
  box-shadow: 3px 3px 5px #bfbdbd;
}

.rdw-colorpicker-modal-header {
  display: flex;
  padding-bottom: 5px;
}

.rdw-colorpicker-modal-style-label {
  font-size: 15px;
  width: 50%;
  text-align: center;
  cursor: pointer;
  padding: 0 10px 5px;
}

.rdw-colorpicker-modal-style-label-active {
  border-bottom: 2px solid #0a66b7;
}

.rdw-colorpicker-modal-options {
  margin: 5px auto;
  display: flex;
  width: 100%;
  height: 100%;
  flex-wrap: wrap;
  overflow: scroll;
}

.rdw-colorpicker-cube {
  width: 22px;
  height: 22px;
  border: 1px solid #f1f1f1;
}

.rdw-colorpicker-option {
  margin: 3px;
  padding: 0;
  min-height: 20px;
  border: none;
  width: 22px;
  height: 22px;
  min-width: 22px;
  box-shadow: 1px 2px 1px #bfbdbd inset;
}

.rdw-colorpicker-option:hover {
  box-shadow: 1px 2px 1px #bfbdbd;
}

.rdw-colorpicker-option:active {
  box-shadow: -1px -2px 1px #bfbdbd;
}

.rdw-colorpicker-option-active {
  box-shadow: 0px 0px 2px 2px #bfbdbd;
}

.rdw-link-wrapper {
  display: flex;
  align-items: center;
  margin-bottom: 6px;
  position: relative;
}

.rdw-link-dropdown {
  width: 50px;
}

.rdw-link-dropdownOption {
  height: 40px;
  display: flex;
  justify-content: center;
}

.rdw-link-dropdownPlaceholder {
  margin-left: 8px;
}

.rdw-link-modal {
  position: absolute;
  top: 35px;
  left: 5px;
  display: flex;
  flex-direction: column;
  width: 235px;
  height: 205px;
  border: 1px solid #f1f1f1;
  padding: 15px;
  border-radius: 2px;
  z-index: 100;
  background: white;
  box-shadow: 3px 3px 5px #bfbdbd;
}

.rdw-link-modal-label {
  font-size: 15px;
}

.rdw-link-modal-input {
  margin-top: 5px;
  border-radius: 2px;
  border: 1px solid #f1f1f1;
  height: 25px;
  margin-bottom: 15px;
  padding: 0 5px;
}

.rdw-link-modal-input:focus {
  outline: none;
}

.rdw-link-modal-buttonsection {
  margin: 0 auto;
}

.rdw-link-modal-target-option {
  margin-bottom: 20px;
}

.rdw-link-modal-target-option > span {
  margin-left: 5px;
}

.rdw-link-modal-btn {
  margin-left: 10px;
  width: 75px;
  height: 30px;
  border: 1px solid #f1f1f1;
  border-radius: 2px;
  cursor: pointer;
  background: white;
  text-transform: capitalize;
}

.rdw-link-modal-btn:hover {
  box-shadow: 1px 1px 0px #bfbdbd;
}

.rdw-link-modal-btn:active {
  box-shadow: 1px 1px 0px #bfbdbd inset;
}

.rdw-link-modal-btn:focus {
  outline: none !important;
}

.rdw-link-modal-btn:disabled {
  background: #ece9e9;
}

.rdw-link-dropdownoption {
  height: 40px;
  display: flex;
  justify-content: center;
}

.rdw-history-dropdown {
  width: 50px;
}

.rdw-embedded-wrapper {
  display: flex;
  align-items: center;
  margin-bottom: 6px;
  position: relative;
}

.rdw-embedded-modal {
  position: absolute;
  top: 35px;
  left: 5px;
  display: flex;
  flex-direction: column;
  width: 235px;
  height: 180px;
  border: 1px solid #f1f1f1;
  padding: 15px;
  border-radius: 2px;
  z-index: 100;
  background: white;
  justify-content: space-between;
  box-shadow: 3px 3px 5px #bfbdbd;
}

.rdw-embedded-modal-header {
  font-size: 15px;
  display: flex;
}

.rdw-embedded-modal-header-option {
  width: 50%;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.rdw-embedded-modal-header-label {
  width: 95px;
  border: 1px solid #f1f1f1;
  margin-top: 5px;
  background: #6eb8d4;
  border-bottom: 2px solid #0a66b7;
}

.rdw-embedded-modal-link-section {
  display: flex;
  flex-direction: column;
}

.rdw-embedded-modal-link-input {
  width: 88%;
  height: 35px;
  margin: 10px 0;
  border: 1px solid #f1f1f1;
  border-radius: 2px;
  font-size: 15px;
  padding: 0 5px;
}

.rdw-embedded-modal-link-input-wrapper {
  display: flex;
  align-items: center;
}

.rdw-embedded-modal-link-input:focus {
  outline: none;
}

.rdw-embedded-modal-btn-section {
  display: flex;
  justify-content: center;
}

.rdw-embedded-modal-btn {
  margin: 0 3px;
  width: 75px;
  height: 30px;
  border: 1px solid #f1f1f1;
  border-radius: 2px;
  cursor: pointer;
  background: white;
  text-transform: capitalize;
}

.rdw-embedded-modal-btn:hover {
  box-shadow: 1px 1px 0px #bfbdbd;
}

.rdw-embedded-modal-btn:active {
  box-shadow: 1px 1px 0px #bfbdbd inset;
}

.rdw-embedded-modal-btn:focus {
  outline: none !important;
}

.rdw-embedded-modal-btn:disabled {
  background: #ece9e9;
}

.rdw-embedded-modal-size {
  align-items: center;
  display: flex;
  margin: 8px 0;
  justify-content: space-between;
}

.rdw-embedded-modal-size-input {
  width: 80%;
  height: 20px;
  border: 1px solid #f1f1f1;
  border-radius: 2px;
  font-size: 12px;
}

.rdw-embedded-modal-size-input:focus {
  outline: none;
}

.rdw-emoji-wrapper {
  display: flex;
  align-items: center;
  margin-bottom: 6px;
  position: relative;
}

.rdw-emoji-modal {
  overflow: auto;
  position: absolute;
  top: 35px;
  left: 5px;
  display: flex;
  flex-wrap: wrap;
  width: 235px;
  height: 180px;
  border: 1px solid #f1f1f1;
  padding: 15px;
  border-radius: 2px;
  z-index: 100;
  background: white;
  box-shadow: 3px 3px 5px #bfbdbd;
}

.rdw-emoji-icon {
  margin: 2.5px;
  height: 24px;
  width: 24px;
  cursor: pointer;
  font-size: 22px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.rdw-spinner {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
}

.rdw-spinner > div {
  width: 12px;
  height: 12px;
  background-color: #333;
  border-radius: 100%;
  display: inline-block;
  -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
  animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}

.rdw-spinner .rdw-bounce1 {
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}

.rdw-spinner .rdw-bounce2 {
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}

@-webkit-keyframes sk-bouncedelay {
  0%, 80%, 100% {
    -webkit-transform: scale(0);
  }
  40% {
    -webkit-transform: scale(1);
  }
}
@keyframes sk-bouncedelay {
  0%, 80%, 100% {
    transform: scale(0);
  }
  40% {
    transform: scale(1);
  }
}
.rdw-image-wrapper {
  display: flex;
  align-items: center;
  margin-bottom: 6px;
  position: relative;
}

.rdw-image-modal {
  position: absolute;
  top: 35px;
  left: 5px;
  display: flex;
  flex-direction: column;
  width: 235px;
  border: 1px solid #f1f1f1;
  padding: 15px;
  border-radius: 2px;
  z-index: 100;
  background: white;
  box-shadow: 3px 3px 5px #bfbdbd;
}

.rdw-image-modal-header {
  font-size: 15px;
  margin: 10px 0;
  display: flex;
}

.rdw-image-modal-header-option {
  width: 50%;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.rdw-image-modal-header-label {
  width: 80px;
  background: #f1f1f1;
  border: 1px solid #f1f1f1;
  margin-top: 5px;
}

.rdw-image-modal-header-label-highlighted {
  background: #6eb8d4;
  border-bottom: 2px solid #0a66b7;
}

.rdw-image-modal-upload-option {
  width: 100%;
  color: gray;
  cursor: pointer;
  display: flex;
  border: none;
  font-size: 15px;
  align-items: center;
  justify-content: center;
  background-color: #f1f1f1;
  outline: 2px dashed gray;
  outline-offset: -10px;
  margin: 10px 0;
  padding: 9px 0;
}

.rdw-image-modal-upload-option-highlighted {
  outline: 2px dashed #0a66b7;
}

.rdw-image-modal-upload-option-label {
  cursor: pointer;
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 15px;
}

.rdw-image-modal-upload-option-label span {
  padding: 0 20px;
}

.rdw-image-modal-upload-option-image-preview {
  max-width: 100%;
  max-height: 200px;
}

.rdw-image-modal-upload-option-input {
  width: 0.1px;
  height: 0.1px;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  z-index: -1;
}

.rdw-image-modal-url-section {
  display: flex;
  align-items: center;
}

.rdw-image-modal-url-input {
  width: 90%;
  height: 35px;
  margin: 15px 0 12px;
  border: 1px solid #f1f1f1;
  border-radius: 2px;
  font-size: 15px;
  padding: 0 5px;
}

.rdw-image-modal-btn-section {
  margin: 10px auto 0;
}

.rdw-image-modal-url-input:focus {
  outline: none;
}

.rdw-image-modal-btn {
  margin: 0 5px;
  width: 75px;
  height: 30px;
  border: 1px solid #f1f1f1;
  border-radius: 2px;
  cursor: pointer;
  background: white;
  text-transform: capitalize;
}

.rdw-image-modal-btn:hover {
  box-shadow: 1px 1px 0px #bfbdbd;
}

.rdw-image-modal-btn:active {
  box-shadow: 1px 1px 0px #bfbdbd inset;
}

.rdw-image-modal-btn:focus {
  outline: none !important;
}

.rdw-image-modal-btn:disabled {
  background: #ece9e9;
}

.rdw-image-modal-spinner {
  position: absolute;
  top: -3px;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.5;
}

.rdw-image-modal-alt-input {
  width: 70%;
  height: 20px;
  border: 1px solid #f1f1f1;
  border-radius: 2px;
  font-size: 12px;
  margin-left: 5px;
}

.rdw-image-modal-alt-input:focus {
  outline: none;
}

.rdw-image-modal-alt-lbl {
  font-size: 12px;
}

.rdw-image-modal-size {
  align-items: center;
  display: flex;
  margin: 8px 0;
  justify-content: space-between;
}

.rdw-image-modal-size-input {
  width: 40%;
  height: 20px;
  border: 1px solid #f1f1f1;
  border-radius: 2px;
  font-size: 12px;
}

.rdw-image-modal-size-input:focus {
  outline: none;
}

.rdw-image-mandatory-sign {
  color: red;
  margin-left: 3px;
  margin-right: 3px;
}

.rdw-remove-wrapper {
  display: flex;
  align-items: center;
  margin-bottom: 6px;
  position: relative;
}

.rdw-history-wrapper {
  display: flex;
  align-items: center;
  margin-bottom: 6px;
}

.rdw-history-dropdownoption {
  height: 40px;
  display: flex;
  justify-content: center;
}

.rdw-history-dropdown {
  width: 50px;
}

.rdw-link-decorator-wrapper {
  position: relative;
}

.rdw-link-decorator-icon {
  position: absolute;
  left: 40%;
  top: 0;
  cursor: pointer;
  background-color: white;
}

.rdw-mention-link {
  text-decoration: none;
  color: #1236ff;
  background-color: #f0fbff;
  padding: 1px 2px;
  border-radius: 2px;
}

.rdw-suggestion-wrapper {
  position: relative;
}

.rdw-suggestion-dropdown {
  position: absolute;
  display: flex;
  flex-direction: column;
  border: 1px solid #f1f1f1;
  min-width: 100px;
  max-height: 150px;
  overflow: auto;
  background: white;
  z-index: 100;
}

.rdw-suggestion-option {
  padding: 7px 5px;
  border-bottom: 1px solid #f1f1f1;
}

.rdw-suggestion-option-active {
  background-color: #f1f1f1;
}

.rdw-hashtag-link {
  text-decoration: none;
  color: #1236ff;
  background-color: #f0fbff;
  padding: 1px 2px;
  border-radius: 2px;
}

.rdw-image-alignment-options-popup {
  position: absolute;
  background: white;
  display: flex;
  padding: 5px 2px;
  border-radius: 2px;
  border: 1px solid #f1f1f1;
  width: 105px;
  cursor: pointer;
  z-index: 100;
}

.rdw-alignment-option-left {
  justify-content: flex-start;
}

.rdw-image-alignment-option {
  height: 15px;
  width: 15px;
  min-width: 15px;
}

.rdw-image-alignment {
  position: relative;
}

.rdw-image-imagewrapper {
  position: relative;
}

.rdw-image-center {
  display: flex;
  justify-content: center;
}

.rdw-image-left {
  display: flex;
}

.rdw-image-right {
  display: flex;
  justify-content: flex-end;
}

.rdw-image-alignment-options-popup-right {
  right: 0;
}

.rdw-editor-main {
  height: 100%;
  overflow: auto;
  box-sizing: border-box;
}

.rdw-editor-toolbar {
  padding: 6px 5px 0;
  border-radius: 2px;
  border: 1px solid #f1f1f1;
  display: flex;
  justify-content: flex-start;
  background: white;
  flex-wrap: wrap;
  font-size: 15px;
  margin-bottom: 5px;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

.public-DraftStyleDefault-block {
  margin: 1em 0;
}

.rdw-editor-wrapper:focus {
  outline: none;
}

.rdw-editor-wrapper {
  box-sizing: content-box;
}

.rdw-editor-main blockquote {
  border-left: 5px solid #f1f1f1;
  padding-left: 5px;
}

.rdw-editor-main pre {
  background: #f1f1f1;
  border-radius: 3px;
  padding: 1px 10px;
} /**
* Draft v0.9.1
*
* Copyright (c) 2013-present, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*/
.DraftEditor-editorContainer,
.DraftEditor-root,
.public-DraftEditor-content {
  height: inherit;
  text-align: initial;
}

.public-DraftEditor-content[contenteditable=true] {
  -webkit-user-modify: read-write-plaintext-only;
}

.DraftEditor-root {
  position: relative;
}

.DraftEditor-editorContainer {
  background-color: rgba(255, 255, 255, 0);
  border-left: 0.1px solid transparent;
  position: relative;
  z-index: 1;
}

.public-DraftEditor-block {
  position: relative;
}

.DraftEditor-alignLeft .public-DraftStyleDefault-block {
  text-align: left;
}

.DraftEditor-alignLeft .public-DraftEditorPlaceholder-root {
  left: 0;
  text-align: left;
}

.DraftEditor-alignCenter .public-DraftStyleDefault-block {
  text-align: center;
}

.DraftEditor-alignCenter .public-DraftEditorPlaceholder-root {
  margin: 0 auto;
  text-align: center;
  width: 100%;
}

.DraftEditor-alignRight .public-DraftStyleDefault-block {
  text-align: right;
}

.DraftEditor-alignRight .public-DraftEditorPlaceholder-root {
  right: 0;
  text-align: right;
}

.public-DraftEditorPlaceholder-root {
  color: #9197a3;
  position: absolute;
  z-index: 0;
}

.public-DraftEditorPlaceholder-hasFocus {
  color: #bdc1c9;
}

.DraftEditorPlaceholder-hidden {
  display: none;
}

.public-DraftStyleDefault-block {
  position: relative;
  white-space: pre-wrap;
}

.public-DraftStyleDefault-ltr {
  direction: ltr;
  text-align: left;
}

.public-DraftStyleDefault-rtl {
  direction: rtl;
  text-align: right;
}

.public-DraftStyleDefault-listLTR {
  direction: ltr;
}

.public-DraftStyleDefault-listRTL {
  direction: rtl;
}

.public-DraftStyleDefault-ol,
.public-DraftStyleDefault-ul {
  margin: 16px 0;
  padding: 0;
}

.public-DraftStyleDefault-depth0.public-DraftStyleDefault-listLTR {
  margin-left: 1.5em;
}

.public-DraftStyleDefault-depth0.public-DraftStyleDefault-listRTL {
  margin-right: 1.5em;
}

.public-DraftStyleDefault-depth1.public-DraftStyleDefault-listLTR {
  margin-left: 3em;
}

.public-DraftStyleDefault-depth1.public-DraftStyleDefault-listRTL {
  margin-right: 3em;
}

.public-DraftStyleDefault-depth2.public-DraftStyleDefault-listLTR {
  margin-left: 4.5em;
}

.public-DraftStyleDefault-depth2.public-DraftStyleDefault-listRTL {
  margin-right: 4.5em;
}

.public-DraftStyleDefault-depth3.public-DraftStyleDefault-listLTR {
  margin-left: 6em;
}

.public-DraftStyleDefault-depth3.public-DraftStyleDefault-listRTL {
  margin-right: 6em;
}

.public-DraftStyleDefault-depth4.public-DraftStyleDefault-listLTR {
  margin-left: 7.5em;
}

.public-DraftStyleDefault-depth4.public-DraftStyleDefault-listRTL {
  margin-right: 7.5em;
}

.public-DraftStyleDefault-unorderedListItem {
  list-style-type: square;
  position: relative;
}

.public-DraftStyleDefault-unorderedListItem.public-DraftStyleDefault-depth0 {
  list-style-type: disc;
}

.public-DraftStyleDefault-unorderedListItem.public-DraftStyleDefault-depth1 {
  list-style-type: circle;
}

.public-DraftStyleDefault-orderedListItem {
  list-style-type: none;
  position: relative;
}

.public-DraftStyleDefault-orderedListItem.public-DraftStyleDefault-listLTR:before {
  left: -36px;
  position: absolute;
  text-align: right;
  width: 30px;
}

.public-DraftStyleDefault-orderedListItem.public-DraftStyleDefault-listRTL:before {
  position: absolute;
  right: -36px;
  text-align: left;
  width: 30px;
}

.public-DraftStyleDefault-orderedListItem:before {
  content: counter(ol0) ". ";
  counter-increment: ol0;
}

.public-DraftStyleDefault-orderedListItem.public-DraftStyleDefault-depth1:before {
  content: counter(ol1) ". ";
  counter-increment: ol1;
}

.public-DraftStyleDefault-orderedListItem.public-DraftStyleDefault-depth2:before {
  content: counter(ol2) ". ";
  counter-increment: ol2;
}

.public-DraftStyleDefault-orderedListItem.public-DraftStyleDefault-depth3:before {
  content: counter(ol3) ". ";
  counter-increment: ol3;
}

.public-DraftStyleDefault-orderedListItem.public-DraftStyleDefault-depth4:before {
  content: counter(ol4) ". ";
  counter-increment: ol4;
}

.public-DraftStyleDefault-depth0.public-DraftStyleDefault-reset {
  counter-reset: ol0;
}

.public-DraftStyleDefault-depth1.public-DraftStyleDefault-reset {
  counter-reset: ol1;
}

.public-DraftStyleDefault-depth2.public-DraftStyleDefault-reset {
  counter-reset: ol2;
}

.public-DraftStyleDefault-depth3.public-DraftStyleDefault-reset {
  counter-reset: ol3;
}

.public-DraftStyleDefault-depth4.public-DraftStyleDefault-reset {
  counter-reset: ol4;
}

.columns-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.columns-container .button-container h3 {
  text-align: center;
}
.columns-container .column-wrapper {
  text-align: justify;
  padding: 10px;
}

.title-column {
  color: #d2cdc6;
  background-color: #2c4e2d;
  font-size: 15px;
  width: 100px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 200;
  margin-bottom: -35px;
  z-index: 1;
}

.button-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.tempColumn-wrapper {
  background-color: #2c4e2d;
  background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcTqPlWE5cJzaLzJrDe2nbgBnWUUC1vttRATAQ&usqp=CAU);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  width: 100%;
  height: calc(100vh - 70px);
  padding-top: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.columns-link {
  margin-bottom: 10px;
  background-color: rgb(184, 183, 183);
  width: 300px;
  padding: 20px;
  font-size: 18px;
  text-decoration: none;
  height: 90px;
  color: #222;
  font-weight: 700;
  transition: 0.5s;
}
.columns-link .columns-content {
  margin-top: 5px;
  color: #39393A;
  font-size: 12px;
  font-weight: 500;
  transition: 0.5s;
}

.columns-link:hover {
  background-color: #2c4e2d;
  color: #eee;
}
.columns-link:hover .columns-content {
  color: #E6E6E6;
}

.columns-title {
  text-align: center;
  font-size: 30px;
  margin: 20px;
  padding-top: 50px;
}

.columns-divider {
  height: 40px;
}

.news-para-wrapper {
  padding: 20px;
}

.news-para {
  padding: 10px;
  margin-bottom: 20px;
  letter-spacing: 1px;
}

.news-para-link {
  text-decoration: none;
  color: blue;
  transition: 0.4s;
}

.news-para-link:hover {
  text-decoration: underline;
  letter-spacing: 0.4px;
}

.column-link {
  color: blue;
  text-decoration: none;
}

.column-link:hover {
  border-bottom: 1px solid #111;
}

.profileBreadcrumbs {
  display: flex;
  justify-content: center;
  margin: 10px 0px;
}
.profileBreadcrumbs .breadcrumbsContainer {
  width: 95%;
  max-width: 800px;
  font-size: 22px;
  font-weight: 500;
}

.profileContainer {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20px;
}
.profileContainer .profileWrapper:nth-child(1) {
  border-top-right-radius: 8px;
  border-top-left-radius: 8px;
}
.profileContainer .profileWrapper:nth-child(2) {
  border-bottom-right-radius: 8px;
  border-bottom-left-radius: 8px;
}
.profileContainer .profileWrapper {
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.25);
  width: 95%;
  max-width: 800px;
  padding: 10px;
}
.profileContainer .profileWrapper .topCard {
  display: flex;
  flex-direction: column;
}
.profileContainer .profileWrapper .topCard .bannerImgContainer .bannerImg {
  height: 140px;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.profileContainer .profileWrapper .topCard .profileInfoContainer {
  display: flex;
  justify-content: space-between;
}
.profileContainer .profileWrapper .topCard .profileInfoContainer .nameAndprofilePictureContainer {
  width: 120px;
}
.profileContainer .profileWrapper .topCard .profileInfoContainer .nameAndprofilePictureContainer .profilePictureContainer {
  position: relative;
}
.profileContainer .profileWrapper .topCard .profileInfoContainer .nameAndprofilePictureContainer .profilePictureContainer .profilePicture {
  height: 120px;
  width: 120px;
  border-radius: 10000px;
  -o-object-fit: cover;
     object-fit: cover;
}
.profileContainer .profileWrapper .topCard .profileInfoContainer .nameAndprofilePictureContainer .profilePictureContainer .editProfilePictureBtn {
  position: absolute;
  bottom: 2px;
  right: 2px;
  background-color: transparent;
  color: #1bbaed;
  font-size: 20px;
}
.profileContainer .profileWrapper .topCard .profileInfoContainer .nameAndprofilePictureContainer .profileName {
  text-align: center;
  font-weight: 500;
}
.profileContainer .profileWrapper .topCard .profileInfoContainer .subscriptionInfoContainer {
  display: flex;
  flex-direction: column;
  align-items: end;
}
.profileContainer .profileWrapper .topCard .profileInfoContainer .subscriptionInfoContainer .subscriptionStatusWrapper {
  font-weight: 500;
  font-size: 18px;
}
@media only screen and (max-width: 420px) {
  .profileContainer .profileWrapper .topCard .profileInfoContainer .subscriptionInfoContainer .subscriptionStatusWrapper {
    font-size: 16px;
  }
}
.profileContainer .profileWrapper .topCard .profileInfoContainer .subscriptionInfoContainer .subscriptionStatusWrapper .statusText__active {
  color: #18c535;
}
.profileContainer .profileWrapper .topCard .profileInfoContainer .subscriptionInfoContainer .subscriptionStatusWrapper .statusText__inactive {
  color: rgb(202, 23, 23);
}
.profileContainer .profileWrapper .topCard .profileInfoContainer .manageSubscriptionBtnContainer {
  margin-top: 15px;
}
.profileContainer .profileWrapper .topCard .profileInfoContainer .manageSubscriptionBtnContainer .manageSubscriptionBtn {
  background-color: #1caf5f;
  color: white;
  text-decoration: none;
  font-weight: 500;
  padding: 5px 10px;
  border-radius: 5px;
  transition: 120msw;
}
.profileContainer .profileWrapper .topCard .profileInfoContainer .manageSubscriptionBtnContainer .manageSubscriptionBtn:hover {
  background-color: #1eb964;
}
.profileContainer .profileWrapper .profileForm {
  margin-top: 10px;
}
.profileContainer .profileWrapper .profileForm .allInputsContainer {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 0px 10px;
}
.profileContainer .profileWrapper .profileForm .allInputsContainer .inputContainer {
  position: relative;
  margin-top: 20px;
}
.profileContainer .profileWrapper .profileForm .allInputsContainer .inputContainer .inputTitle {
  position: absolute;
  top: -8px;
  left: 10px;
  color: grey;
  background-color: white;
  padding: 0px 5px;
  font-size: 14px;
  font-weight: 500;
  line-height: 0.8;
}
.profileContainer .profileWrapper .profileForm .allInputsContainer .inputContainer input {
  width: 100%;
  padding: 6px 8px;
  border-radius: 5px;
  border: 1px solid lightgray;
  border-bottom-width: 2px;
  font-size: 16px;
}
.profileContainer .profileWrapper .profileForm .saveBtnContainer {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
.profileContainer .profileWrapper .profileForm .saveBtnContainer .saveBtn {
  width: 80%;
  max-width: 200px;
  padding: 8px 0px;
  background-color: #1caf5f;
  color: white;
  font-size: 16px;
  font-weight: 500;
  transition: 120ms;
}
.profileContainer .profileWrapper .profileForm .saveBtnContainer .saveBtn:hover {
  background-color: #1eb964;
}
.profileContainer .profileWrapper .rowAddPhoto {
  display: none;
}
.profileContainer .profileWrapper .rowAddPhotoShow {
  position: relative;
  display: inline;
}
.profileContainer .profileWrapper .rowAddPhotoShow .closeBtn {
  position: absolute;
  top: 0;
  right: 0;
  background-color: transparent;
  font-size: 20px;
}
.profileContainer .profileWrapper .rowAddPhotoShow .profileImageUpload {
  background-color: lightgray;
  border-radius: 5px;
  padding: 10px;
}
.profileContainer .profileWrapper .rowAddPhotoShow .profileImageUpload .uploadPictureContainer .uploadProfilePictureBtn {
  text-align: center;
  background-color: black;
  color: white;
  max-width: 140px;
  padding: 8px 12px;
  font-size: 16px;
  font-weight: 500;
}
.profileContainer .profileWrapper .rowAddPhotoShow .profileImageUpload .fullImageSection {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.profileContainer .profileWrapper .rowAddPhotoShow .profileImageUpload .fullImageSection .fullImageAndBtnContainer {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.profileContainer .profileWrapper .rowAddPhotoShow .profileImageUpload .fullImageSection .fullImageAndBtnContainer .uploadedImage {
  max-width: 400px;
  max-height: 400px;
}
.profileContainer .profileWrapper .rowAddPhotoShow .profileImageUpload .fullImageSection .fullImageAndBtnContainer .cropBtn {
  margin-top: 10px;
  background-color: #444444;
  color: white;
  padding: 6px 30px;
  font-weight: 500;
  transition: 120ms;
}
.profileContainer .profileWrapper .rowAddPhotoShow .profileImageUpload .fullImageSection .fullImageAndBtnContainer .cropBtn:hover {
  background-color: #505050;
}
.profileContainer .profileWrapper .rowAddPhotoShow .profileImageUpload .fullImageSection .imagePreviewContainer {
  margin-top: 20px;
}
.profileContainer .profileWrapper .rowAddPhotoShow .profileImageUpload .fullImageSection .imagePreviewContainer .sectionTitle {
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 10px;
}
.profileContainer .profileWrapper .rowAddPhotoShow .profileImageUpload .fullImageSection .imagePreviewContainer .imageAndBtnContainer {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.profileContainer .profileWrapper .rowAddPhotoShow .profileImageUpload .fullImageSection .imagePreviewContainer .imageAndBtnContainer .croppedImg {
  height: 120px;
  width: 120px;
  border-radius: 10000px;
  -o-object-fit: cover;
     object-fit: cover;
}
.profileContainer .profileWrapper .rowAddPhotoShow .profileImageUpload .fullImageSection .imagePreviewContainer .imageAndBtnContainer .saveBtn {
  margin-top: 10px;
  background-color: #1caf5f;
  color: white;
  padding: 6px 30px;
  font-weight: 500;
  transition: 120ms;
}
.profileContainer .profileWrapper .rowAddPhotoShow .profileImageUpload .fullImageSection .imagePreviewContainer .imageAndBtnContainer .saveBtn:hover {
  background-color: #1eb964;
}
.profileContainer .profileWrapper .topCardHide {
  display: none;
}

.slide-thumbnail {
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
  transition: 3s;
}

.blog .blog-header {
  display: flex;
  justify-content: center;
  align-content: center;
  height: 91px;
}
.blog .blog-header .title {
  align-self: center;
  color: black;
  font-size: 2em;
  font-weight: bold;
  width: auto;
}
@media only screen and (max-width: 500px) {
  .blog .blog-header .title {
    font-size: 20.7px;
  }
}
@media only screen and (max-width: 500px) {
  .blog .blog-header {
    height: 39px;
  }
}
.blog .blog-body {
  display: flex;
  justify-content: center;
}
.blog .blog-body .blog-container {
  display: flex;
  justify-content: space-evenly;
  flex-flow: row;
  flex-wrap: wrap;
  max-width: 1200px;
}
.blog .blog-footer {
  margin: 15px;
  display: flex;
  justify-content: center;
}
.blog .blog-footer .load-more-button {
  height: 41px;
  width: 100px;
  transition: 0.3s all ease;
  margin-bottom: 15px;
  background-color: black;
  color: white;
  cursor: pointer;
}

.blog-item {
  position: relative;
  color: black;
  text-decoration: none;
  border: 1px solid lightgray;
  border-bottom-width: 3px;
  width: 300px;
  max-width: 400px;
  padding: 5px;
  border-radius: 5px;
  margin: 10px;
}
.blog-item .header {
  display: flex;
  justify-content: center;
  background-color: white;
}
.blog-item .header img {
  height: auto;
  max-height: 200px;
  width: 100%;
  border-radius: 3px;
  -o-object-fit: cover;
     object-fit: cover;
}
.blog-item .body .date {
  color: gray;
  font-weight: 300;
  margin: 10px 0px 10px 0px;
}
.blog-item .body .title {
  font-size: 20px;
  font-weight: 500;
  margin-bottom: -10px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.blog-item .body .summary {
  text-align: start;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
@media only screen and (max-width: 600px) {
  .blog-item .body {
    background-color: white;
  }
}
.blog-item .blog-button {
  display: flex;
  justify-content: center;
  z-index: 1;
  color: #2c4e2d;
  text-align: center;
  height: 25px;
  width: 100%;
  font-weight: 700;
  text-decoration: none;
}

.blogDetail-container {
  display: flex;
  justify-content: center;
}
.blogDetail-container .blogDetail {
  min-height: 95.5vh;
  width: 100%;
  display: grid;
  grid-template-rows: auto 1fr;
  grid-row-gap: 10px;
  position: relative;
  box-shadow: 0px 0px 7px 0px rgba(0, 0, 0, 0.75);
}
.blogDetail-container .blogDetail .header-wrapper {
  margin: 0 20px;
  padding: 0 5px;
  border-bottom: 1px solid black;
}
.blogDetail-container .blogDetail .header-wrapper .header {
  width: 100%;
  margin: auto;
  display: flex;
  justify-self: center;
  flex-direction: column;
}
.blogDetail-container .blogDetail .header-wrapper .header .img-wrapper {
  width: 80%;
  align-self: center;
  display: flex;
  justify-content: center;
}
.blogDetail-container .blogDetail .header-wrapper .header .img-wrapper img {
  width: 100%;
  max-width: -webkit-fit-content;
  max-width: -moz-fit-content;
  max-width: fit-content;
  height: auto;
  max-height: 350px;
}
.blogDetail-container .blogDetail .header-wrapper .header .title,
.blogDetail-container .blogDetail .header-wrapper .header .summary {
  text-align: center;
  width: 100%;
}
.blogDetail-container .blogDetail .header-wrapper .header .title {
  font-size: 45px;
  top: 20%;
  text-align: center;
}
.blogDetail-container .blogDetail .body {
  width: 90%;
  display: flex;
  justify-self: center;
}
.blogDetail-container .blogDetail .body .content-wrapper .author {
  font-size: 18px;
  color: gray;
}
.blogDetail-container .blogDetail .body .content-wrapper .date2 {
  font-size: 18px;
  color: gray;
}
.blogDetail-container .blogDetail .body .content-wrapper .text-body {
  margin-top: 15px;
  font-size: 18px;
}
.blogDetail-container .blogDetail .body .content-wrapper .text-body li {
  list-style-position: inside;
}

.summary {
  font-size: 15px;
  top: 50%;
  text-align: center;
  margin-top: 10px;
}

.exchange {
  border: 1px solid black;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}
.exchange .exchange-title {
  border-right: 1px solid #111;
  font-weight: 500;
  text-align: center;
}
.exchange .exchange-rate {
  margin: 3px;
  text-align: center;
}

.admin-exchange {
  width: 400px;
  height: auto;
}
.admin-exchange table,
.admin-exchange th,
.admin-exchange td {
  border: 1px solid black;
  text-align: center;
}
.admin-exchange th,
.admin-exchange td {
  min-width: 70px;
}
.admin-exchange td:nth-child(1) {
  width: 150px;
}
.admin-exchange th {
  height: 50px;
}

.exchange-rate-form .input-container {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
.exchange-rate-form .input-container label,
.exchange-rate-form .input-container input {
  width: 100%;
  font-size: 18px;
}
.exchange-rate-form .input-container input {
  height: 35px;
  margin-bottom: 10px;
}

@media only screen and (max-width: 600px) {
  .exchange {
    display: flex;
    flex-direction: column;
  }
  .exchange-rate {
    border-top: 1px solid #111;
  }
  .exchange-title {
    border-right: none;
  }
}
.exchangePage {
  width: 100%;
  height: 89.5vh;
  display: flex;
  justify-content: center;
}
.exchangePage .exchangePage-container {
  width: 100%;
  max-width: 600px;
  padding: 25px;
}
.exchangePage .exchangePage-container .flags-container {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
}
.exchangePage .exchangePage-container .flags-container img {
  width: 80px;
  height: 50px;
}
.exchangePage .exchangePage-container .buy-sell {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 35px;
  background-color: rgb(2, 130, 134);
}
.exchangePage .exchangePage-container .buy-sell .buy-sell-item {
  font-size: 20px;
  margin-left: 5px;
  margin-right: 5px;
  font-weight: 600;
  color: white;
}
.exchangePage .exchangePage-container .exchange-items .exchange-item {
  width: 100%;
  height: auto;
  margin-top: 15px;
  border: 0.5px solid #111;
  border-radius: 10px;
}
.exchangePage .exchangePage-container .exchange-items .exchange-item .exchange-item-title {
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 5px;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.exchangePage .exchangePage-container .exchange-items .exchange-item .exchange-rates {
  margin-bottom: 5px;
  display: flex;
  justify-content: space-around;
}
.exchangePage .exchangePage-container .exchange-items .exchange-item .exchange-rates .rate {
  font-size: 30px;
  font-weight: bold;
}

.rate-buy {
  font-size: 30px;
  font-weight: 900;
  color: rgb(0, 66, 70);
}

.rate-sell {
  font-size: 30px;
  font-weight: 900;
  color: rgb(0, 66, 70);
}

.calendar {
  padding: 15px;
  width: 100%;
  height: 90%;
}
@media only screen and (max-width: 500px) {
  .calendar {
    width: 100vw;
  }
}

.user-calendar-categories-update-button {
  height: 35px;
  font-size: 14px;
  background-color: #2699FB;
  color: white;
  cursor: pointer;
  border-radius: 5px;
  margin-bottom: 10px;
}

.user-calendar-category-modal {
  width: -webkit-fit-content !important;
  width: -moz-fit-content !important;
  width: fit-content !important;
  height: -webkit-fit-content !important;
  height: -moz-fit-content !important;
  height: fit-content !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important;
  padding: 35px;
}
.user-calendar-category-modal .header-text {
  font-size: 18px;
  color: black;
  text-align: center;
}
.user-calendar-category-modal p {
  font-size: 14px;
  margin: 0px;
  margin-top: 5px;
  margin-bottom: 15px;
}
.user-calendar-category-modal .user-category-container {
  width: 80%;
  margin: auto;
}
.user-calendar-category-modal .user-category-container label {
  margin-left: 10px;
  font-size: 16px;
  color: black;
}
.user-calendar-category-modal .user-category-container input {
  margin: 0px;
}

.rbc-calendar {
  min-height: 500px;
  z-index: 1;
}

.rbc-row-content {
  z-index: 2;
}

.Event-Modal {
  height: auto;
  max-width: 700px;
  width: 95%;
}

.modal-event {
  display: grid;
  grid-template-rows: 50px 60vh 50px;
  height: 100%;
  width: 100%;
}
.modal-event .header,
.modal-event .body {
  border-bottom: 1px solid #D2D2D2;
  z-index: 10;
}
.modal-event .header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.modal-event .header .title {
  font-size: 24px;
  font-weight: 600;
}
.modal-event .header .close {
  height: 100%;
  width: 20px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  font-size: 26px;
}
.modal-event .body {
  padding: 15px;
  overflow-y: auto;
}
.modal-event .body .image-preview {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin: auto;
  margin-top: 15px;
  position: relative;
}
.modal-event .body .image-preview img {
  height: 100px;
}
.modal-event .body .delete-image {
  position: absolute;
  top: -9px;
  right: -9px;
  background-color: #f00;
  color: white;
  padding: 0px 5px;
  cursor: pointer;
  border-radius: 100%;
}
.modal-event .body .title,
.modal-event .body .category,
.modal-event .body .desc,
.modal-event .body .image {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.modal-event .body .title label,
.modal-event .body .category label,
.modal-event .body .desc label,
.modal-event .body .image label {
  width: 100%;
  max-width: 450px;
  margin-bottom: 10px;
}
.modal-event .body .title select, .modal-event .body .title input,
.modal-event .body .category select,
.modal-event .body .category input,
.modal-event .body .desc select,
.modal-event .body .desc input,
.modal-event .body .image select,
.modal-event .body .image input {
  width: 100%;
  max-width: 450px;
  height: 35px;
  border-radius: 3px;
  border: 1px solid gray;
}
.modal-event .body .category {
  margin-top: 25px;
}
.modal-event .body .category select {
  background-color: white;
}
.modal-event .body .desc {
  margin-top: 25px;
}
.modal-event .body .desc textarea {
  width: 100%;
  max-width: 450px;
}
.modal-event .body .image {
  margin-top: 25px;
}
.modal-event .body .image input {
  border: none;
  width: 100%;
  max-width: 450px;
}
.modal-event .body .date-times {
  margin-top: 25px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
}
.modal-event .body .date-times .input-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 450px;
  margin-bottom: 15px;
}
.modal-event .body .date-times .input-container .form-control {
  width: 100%;
  height: 35px;
}
.modal-event .footer {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}
.modal-event .footer button {
  width: 100%;
  max-width: 450px;
  height: 35px;
  background-color: #30903A;
  color: white;
  border: 1px solid transparent;
  border-radius: 5px;
}
.modal-event .footer button:disabled {
  background-color: #D2D2D2;
}
.modal-event .footer .delete {
  background-color: red;
}

.body-show {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  padding: 20px;
}
.body-show .desc-show {
  height: 75.3%;
  overflow-y: scroll;
  text-align: center;
}
.body-show .image-show {
  margin-bottom: 10px;
  width: 100%;
  max-width: 600px;
  height: 400px;
  display: flex;
  overflow-x: scroll;
  overflow-y: visible;
  -moz-column-gap: 10px;
       column-gap: 10px;
}
.body-show .image-show img {
  display: block;
  height: 200px;
  margin-right: auto;
  margin-left: auto;
}
.body-show .date-times-show {
  display: flex;
  flex-direction: column;
}
.body-show .time {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-bottom: 10px;
}

.admin-yoi .assistants-excess-table-data {
  font-size: 12px;
  padding-right: 5px;
  padding-left: 5px;
}

.admin-calendar-category-modal {
  width: -webkit-fit-content !important;
  width: -moz-fit-content !important;
  width: fit-content !important;
  height: -webkit-fit-content !important;
  height: -moz-fit-content !important;
  height: fit-content !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important;
  padding: 35px;
}
.admin-calendar-category-modal p {
  text-align: center;
}
.admin-calendar-category-modal .category-modal-header {
  font-size: 24px;
  color: black;
}
.admin-calendar-category-modal .input-container {
  color: black;
  display: flex;
  flex-direction: column;
  margin-bottom: 10px;
}
.admin-calendar-category-modal .input-container input, .admin-calendar-category-modal .input-container textarea {
  font-size: 14px;
  width: 300px;
  border-radius: 5px;
  border: 1px solid grey;
  padding: 10px 10px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important;
}
.admin-calendar-category-modal .input-container input {
  height: 35px;
}

.admin-calendar-button-wrapper {
  width: 100%;
  display: flex;
  justify-content: center;
}
.admin-calendar-button-wrapper .admin-calendar-button {
  width: 150px;
  height: 35px;
  border-radius: 3px;
  background-color: #30903A;
  font-size: 16px;
  color: #f4f5fa;
  transition: 0.2s ease all;
  margin: 15px;
  cursor: pointer;
}
.admin-calendar-button-wrapper .admin-calendar-button:hover {
  opacity: 0.8;
}

td.admin-calendar-button-wrapper {
  display: table-cell;
}

.cancel.admin-calendar-button {
  background-color: #D2D2D2;
  color: black;
}

.delete-confirm-buttons-wrapper {
  display: flex;
  row-gap: 10px;
}

.image-uploader {
  width: 100%;
  height: 100%;
  padding: 15px;
  display: grid;
  grid-template-rows: 50px 1fr;
}
.image-uploader .im-header {
  display: flex;
  justify-content: space-between;
}
.image-uploader .im-header .im-title {
  text-decoration: underline;
  font-size: 18px;
  font-weight: 500;
}
.image-uploader .im-header .im-add-button {
  background-color: transparent;
  height: 40px;
  width: 50px;
  color: #24bbb5;
  transition: 0.3s ease all;
  font-size: 30px;
}
.image-uploader .im-header .im-add-button:focus {
  outline: none;
}
.image-uploader .im-header .im-add-button:hover {
  font-size: 35px;
}
.image-uploader .im-body {
  width: 100%;
  height: 100%;
  background-color: #eeeded;
  border: 2px solid darkgray;
  border-radius: 5px;
  padding: 5px;
}
.image-uploader .im-body .uploader-container {
  position: relative;
  width: 100%;
  height: 100%;
  max-height: 575px;
  border-radius: 5px;
  border: 3px solid darkgray;
  border-style: dashed;
  padding: 5px;
  overflow-y: scroll;
}
.image-uploader .im-body .uploader-container .images-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-gap: 0 10px;
  grid-auto-rows: 10px;
  height: 100%;
}
.image-uploader .im-body .uploader-container .images-container .iu-image-container {
  position: relative;
}
.image-uploader .im-body .uploader-container .images-container .iu-image-container .iu-image {
  width: 100%;
}
.image-uploader .im-body .uploader-container .images-container .iu-image-container .iu-button {
  position: absolute;
  top: 5px;
  background-color: transparent;
}
.image-uploader .im-body .uploader-container .images-container .iu-image-container .iu-button:focus {
  outline: none;
}
.image-uploader .im-body .uploader-container .images-container .iu-image-container .iu-button .iu-icon {
  color: white;
  font-size: 25px;
}
.image-uploader .im-body .uploader-container .images-container .iu-image-container .iu-button .iu-icon:hover {
  color: #24bbb5;
}
.image-uploader .im-body .uploader-container .upload-button {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  position: fixed;
  top: 80%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  width: 200px;
  height: 50px;
  background-color: white;
  font-size: 18px;
  border: 1px solid darkgray;
  border-radius: 5px;
}
.image-uploader .im-body .uploader-container .upload-button:hover {
  opacity: 70%;
}
.image-uploader .im-body .uploader-container .upload-button:focus {
  outline: none;
}
.image-uploader .im-body .uploader-container .im-icon {
  font-size: 20px;
}

.subscription-updated .subscription-updated-header {
  text-align: center;
}
.subscription-updated .subscription-updated-description {
  text-align: center;
}
.subscription-updated .success-icon-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
}
.subscription-updated .success-icon-wrapper .success-icon {
  font-size: 80px;
  color: #30903A;
}

.manage-subscription-header {
  text-align: center;
  padding: 10px;
  margin: 0px;
}

.change-plan-header {
  text-align: center;
  padding: 10px;
  margin: 0px;
  margin-top: 10px;
}

.change-plan-description {
  text-align: center;
  margin: 0px;
  margin-top: 5px;
  padding: 0px;
}

.inactive-subscription-description {
  text-align: center;
  margin: 0px;
  margin-bottom: 10px;
  padding-left: 10px;
  padding-right: 10px;
}

.current-subscription-container {
  margin-left: auto;
  margin-right: auto;
  width: 500px;
  padding: 10px;
  border: 2px solid #D2D2D2;
  border-radius: 5px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.current-subscription-container p {
  margin: 0px;
  padding: 0px;
  margin-top: 10px;
}
.current-subscription-container .current-subscription-information .current-subscription-header-container {
  display: flex;
  -moz-column-gap: 10px;
       column-gap: 10px;
  align-items: center;
}
.current-subscription-container .current-subscription-information .current-subscription-header-container .current-subscription-trial {
  background-color: #2699FB;
  padding-bottom: 3px;
  padding-top: 3px;
  padding-left: 10px;
  padding-right: 10px;
  color: #FFFFFF;
  border-radius: 5px;
}
.current-subscription-container .current-subscription-information .current-subscription-header-container .current-subscription-header {
  font-weight: bold;
  font-size: 18px;
}
.current-subscription-container .current-subscription-cancel {
  height: 40px;
  padding-left: 25px;
  padding-right: 25px;
  border-radius: 5px;
  background-color: #D2D2D2;
  cursor: pointer;
}

@media (max-width: 700px) {
  .current-subscription-container {
    width: 100%;
  }
}
.mobileSidebar {
  width: 100vw;
  min-height: 100vh;
  height: auto;
  z-index: 10;
  background-color: lightgray;
  position: absolute;
  display: block;
  transition: 0.3s ease-in-out all;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.mobileSidebar .link {
  margin-bottom: 10px;
  height: 50px;
  width: 100%;
  max-width: 250px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: black;
  font-size: 28px;
  text-decoration: none;
  border-bottom: 1px solid black;
}

.mobileSidebar.collapse {
  width: 0vw;
}
.mobileSidebar.collapse .link {
  display: none;
}

.YOI-wrapper {
  height: 100%;
  width: 100%;
  padding: 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.YOI-wrapper .title {
  font-size: 55px;
  margin-bottom: 20px;
  font-weight: 700;
}
@media only screen and (max-width: 600px) {
  .YOI-wrapper .title {
    font-size: 36px;
    text-align: center;
  }
}
.YOI-wrapper .sub-title {
  font-weight: 500;
  font-size: 22px;
  text-align: center;
  margin-bottom: 30px;
}
@media only screen and (max-width: 600px) {
  .YOI-wrapper .sub-title {
    font-size: 20px;
  }
}
.YOI-wrapper .secondary {
  background-color: lightgray;
  color: black;
  text-align: start;
  border-radius: 5px;
}
@media (max-width: 470px) {
  .YOI-wrapper .secondary {
    font-weight: bold;
    font-size: 15px;
  }
}
.YOI-wrapper .top-container {
  width: 100%;
  height: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
@media only screen and (max-width: 600px) {
  .YOI-wrapper .top-container {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
  }
}
.YOI-wrapper .top-container .left {
  padding: 0px 15px;
  display: flex;
  flex-direction: column;
}
.YOI-wrapper .top-container .right img {
  width: 100%;
  height: auto;
  max-height: 450px;
  -o-object-fit: contain;
     object-fit: contain;
}
@media only screen and (max-width: 600px) {
  .YOI-wrapper .top-container .right img {
    max-height: 250px;
  }
}
.YOI-wrapper .container {
  padding: 25px;
  margin: 20px;
  height: auto;
  width: calc(100% - 40px);
}
.YOI-wrapper .container button {
  width: 100%;
  height: 35px;
  background-color: #2699FB;
}
.YOI-wrapper .yoi-description {
  padding-left: 40px;
  padding-right: 40px;
  display: flex;
  flex-direction: column;
}
.YOI-wrapper .yoi-description .description-heading {
  text-align: center;
  font-weight: bold;
  font-size: 22px;
  margin-bottom: 20px;
  margin-top: 10px;
}
.YOI-wrapper .yoi-description .description-subheading {
  font-weight: 600;
  font-size: 18px;
  margin-bottom: 0px;
  margin-top: 10px;
}
.YOI-wrapper .yoi-description .date {
  font-style: italic;
  margin-top: 0px;
  font-size: 16px;
}
.YOI-wrapper .yoi-description .description-text p {
  margin-top: 3px;
  margin-bottom: 3px;
}
.YOI-wrapper .yoi-description .red {
  color: red;
}
.YOI-wrapper .yoi-description .phones {
  display: flex;
  flex-wrap: wrap;
}
.YOI-wrapper .yoi-description .phones p {
  width: 50%;
  text-align: center;
}
.YOI-wrapper .yoi-description .phones p:last-child {
  width: 100%;
}

.yoi-actions-info {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-bottom: 50px;
}
.yoi-actions-info .yoi-action-cards {
  display: flex;
  justify-content: space-evenly;
}
@media only screen and (max-width: 800px) {
  .yoi-actions-info .yoi-action-cards {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
  }
}
.yoi-actions-info .yoi-action-cards .yoi-action-card {
  display: flex;
  flex-direction: column;
  width: 350px;
  align-items: center;
  justify-content: center;
  box-shadow: 0px 0px 25px 10px rgba(0, 0, 0, 0.2);
  padding: 20px;
  border-radius: 15px;
}
@media only screen and (max-width: 800px) {
  .yoi-actions-info .yoi-action-cards .yoi-action-card {
    box-shadow: 0px 0px 25px -3px rgba(0, 0, 0, 0.2);
  }
}
.yoi-actions-info .yoi-action-cards .yoi-action-card .yoi-action-card-title {
  display: flex;
  align-items: center;
  font-size: 1.25rem;
}
.yoi-actions-info .yoi-action-cards .yoi-action-card .yoi-action-card-title .yoi-action-card-icon {
  width: 50px;
  height: 50px;
  margin-right: 10px;
}
.yoi-actions-info .yoi-action-cards .yoi-action-card .yoi-action-card-button button {
  width: 100%;
  font-size: 1.2rem;
  padding: 10px;
  border-radius: 10px;
  background-color: #0081cf;
  color: #fff;
  cursor: pointer;
  box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.2);
}

.assistantForm {
  width: 100%;
  height: 100%;
  padding: 25px;
  display: flex;
  justify-content: center;
  background-color: rgb(225, 225, 225);
}
@media only screen and (max-width: 600px) {
  .assistantForm {
    padding: 10px;
  }
}
.assistantForm .formWrapper {
  width: 100%;
  max-width: 900px;
  height: auto;
  background-color: white;
  padding: 25px 50px;
}
@media only screen and (max-width: 600px) {
  .assistantForm .formWrapper {
    padding: 25px 20px;
  }
}
.assistantForm .formWrapper .row {
  margin: 5px;
}
.assistantForm .formWrapper .row p {
  font-size: 18px;
}
.assistantForm .formWrapper .row .pageHeader {
  font-size: 32px;
  font-weight: 600;
  text-align: center;
}
@media only screen and (max-width: 600px) {
  .assistantForm .formWrapper .row ol {
    padding-left: 10px;
  }
}
.assistantForm .formWrapper .row .formList {
  font-size: 18px;
}
.assistantForm .formWrapper .row .formList li {
  margin-bottom: 20px;
}
.assistantForm .formWrapper .row .formList li .inputWrapper {
  display: flex;
  flex-direction: column;
  margin-bottom: 5px;
}
.assistantForm .formWrapper .row .formList li .inputWrapper label {
  font-weight: 500;
}
.assistantForm .formWrapper .row .formList li .inputWrapper input,
.assistantForm .formWrapper .row .formList li .inputWrapper select {
  height: 25px;
  border: none;
  border-bottom: 1px solid black;
  font-size: 16px;
}
.assistantForm .formWrapper .row .formList li .inputWrapper ol li {
  margin-bottom: 5px;
}
.assistantForm .formWrapper .row .formList li .inputWrapper ol li input,
.assistantForm .formWrapper .row .formList li .inputWrapper ol li select {
  width: 100%;
  height: 25px;
  border: none;
  border-bottom: 1px solid black;
  font-size: 16px;
}
.assistantForm .formWrapper .row .sectionHeader {
  font-size: 18px;
  font-weight: 700;
}
.assistantForm .formWrapper .row .quoteBox {
  border: 1px solid black;
  box-sizing: border-box;
  padding: 10px;
}
.assistantForm .formWrapper .row .quoteBox p {
  text-align: center;
  font-style: italic;
  font-size: 18px;
}
.assistantForm .formWrapper .row .agreement .input,
.assistantForm .formWrapper .row .agreement .date {
  display: flex;
  margin-bottom: 5px;
}
.assistantForm .formWrapper .row .agreement .input label,
.assistantForm .formWrapper .row .agreement .date label {
  font-size: 18px;
  font-weight: 600;
  margin-right: 10px;
}
.assistantForm .formWrapper .row .agreement .input input,
.assistantForm .formWrapper .row .agreement .date input {
  height: 25px;
  border: none;
  border-bottom: 1px solid black;
  font-size: 16px;
  width: 60%;
}
@media only screen and (max-width: 600px) {
  .assistantForm .formWrapper .row .agreement .input input,
  .assistantForm .formWrapper .row .agreement .date input {
    width: 100%;
  }
}
.assistantForm .formWrapper .row .submitButton {
  display: flex;
  justify-content: flex-end;
}
.assistantForm .formWrapper .row .submitButton button {
  width: 25%;
  height: 35px;
  background-color: #2699FB;
  color: white;
  font-size: 18px;
  border-radius: 5px;
  margin-top: 10px;
}

.error {
  text-align: center;
  color: red;
  font-size: 18px;
}

.success {
  width: 100%;
  height: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.success p {
  font-size: 42px;
  color: #30903A;
}

.classifieds {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
@media only screen and (max-width: 500px) {
  .classifieds {
    width: 100vw;
  }
}
.classifieds .c-header {
  max-width: 800px;
  width: 100%;
  display: grid;
  grid-template-rows: 30px 1fr 1fr;
  height: 130px;
  padding: 10px;
}
.classifieds .c-header .pageTitle {
  font-size: 20px;
  font-weight: 600;
}
.classifieds .c-header .filters {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}
.classifieds .c-header .filters .filter {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: lightgray;
  border: 1px solid lightgray;
  padding: 0px 10px;
  height: 30px;
  min-width: 30px;
  border-radius: 15px;
  cursor: pointer;
  font-weight: 600;
  text-decoration: none;
  color: black;
}
@media only screen and (max-width: 376px) {
  .classifieds .c-header .filters .filter {
    font-size: 13.9px !important;
  }
}
.classifieds .c-header .search {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  border-bottom: 1px solid gray;
}
.classifieds .c-header .search .wrapper {
  width: 100%;
  height: 30px;
  background-color: lightgray;
  border: 1px solid lightgray;
  border-radius: 15px;
  display: flex;
  align-items: center;
}
.classifieds .c-header .search .wrapper .searchIcon {
  padding: 0 8px;
  font-size: 32px;
}
.classifieds .c-header .search .wrapper .searchInput {
  height: 100%;
  width: 85%;
  background-color: transparent;
  border: none;
  font-size: 18px;
}
.classifieds .c-header .search .wrapper .searchInput:focus {
  outline: none;
}
@media only screen and (max-width: 70em) {
  .classifieds .items {
    height: 70.3vh !important;
    margin-bottom: -26px !important;
  }
  .classifieds .items .item {
    width: 29% !important;
    height: 33% !important;
  }
  .classifieds .items .item .editButton {
    height: 13% !important;
    font-size: 9px !important;
    width: 33% !important;
    border-radius: 3px !important;
    top: 3% !important;
    left: 11% !important;
  }
  .classifieds .items .item .deleteButton {
    height: 13% !important;
    font-size: 9px !important;
    width: 33% !important;
    border-radius: 3px !important;
    top: 3% !important;
    left: 56% !important;
  }
  .classifieds .items .item .item-img {
    height: 49% !important;
  }
}
@media only screen and (min-width: 1600px) {
  .classifieds .items {
    height: 74.3vh !important;
  }
}
@media only screen and (min-width: 992px) {
  .classifieds .banner {
    margin-left: 28px !important;
  }
  .classifieds .c-body {
    max-width: 850px !important;
  }
  .classifieds .item {
    width: 21% !important;
  }
}
.classifieds .c-body {
  max-width: 800px;
  width: 100%;
  padding: 10px;
}
.classifieds .c-body .banner {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  font-weight: 600;
}
.classifieds .c-body .items {
  margin-top: 10px;
  margin-left: 1px;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
}
.classifieds .c-body .items .item {
  width: 185px;
  height: 250px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: black;
  position: relative;
}
.classifieds .c-body .items .item .editButton {
  height: 35px;
  width: 50px;
  position: absolute;
  top: 10px;
  left: 6px;
  bottom: 0;
  border-radius: 5px;
  background-color: #2699FB;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
}
.classifieds .c-body .items .item .deleteButton {
  height: 35px;
  width: 50px;
  position: absolute;
  top: 10px;
  left: 118px;
  bottom: 0;
  border-radius: 5px;
  cursor: pointer;
  background-color: red;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
}
@media only screen and (max-width: 70em) {
  .classifieds .c-body .items .item .deleteButton {
    left: 70%;
  }
  .classifieds .c-body .items .item .editButton {
    left: 3%;
  }
}
.classifieds .c-body .items .item .item-img {
  width: 100%;
  height: 75%;
  border-radius: 5px;
  -o-object-fit: cover;
     object-fit: cover;
}
.classifieds .c-body .items .item .text {
  outline: none;
  text-decoration: none;
  width: 100%;
  height: 25%;
  color: black;
}
.classifieds .c-body .items .item .text .price,
.classifieds .c-body .items .item .text .classifiedDescription,
.classifieds .c-body .items .item .text .location {
  text-align: start;
  white-space: nowrap;
  overflow: hidden !important;
  text-overflow: ellipsis;
}
.classifieds .c-body .items .item .text .price {
  font-weight: 600;
}
.classifieds .c-body .items .item .text .classifiedDescription {
  font-size: 15px;
}
.classifieds .c-body .items .item .text .location,
.classifieds .c-body .items .item .text .mileage {
  color: gray;
  font-size: 14px;
}

@media only screen and (max-width: 70em) {
  .imageDisplay {
    height: 311px !important;
  }
  .imageDisplay .return {
    top: 3px !important;
    left: 3px !important;
  }
  .item-img {
    max-width: 84.6% !important;
  }
  .carousel {
    margin-bottom: 11px !important;
    margin-left: -3px !important;
  }
  .carousel-img {
    width: 93% !important;
  }
  .arrow {
    top: -161% !important;
  }
  .prev {
    left: -3.6% !important;
  }
  .next {
    right: -3.9% !important;
  }
}
@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
  .carousel-img {
    margin: 0 2px !important;
  }
}
@media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-device-pixel-ratio: 2) and (device-aspect-ratio: 40/71) {
  .carousel-img {
    margin: 0 2px !important;
  }
}
.classifiedsItem {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.classifiedsItem .imageDisplay {
  height: 344px;
  width: 100vw;
  max-width: 800px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  position: relative;
}
.classifiedsItem .imageDisplay .return {
  height: 35px;
  width: 35px;
  position: absolute;
  top: 10px;
  right: 0;
  left: 10px;
  bottom: 0;
  z-index: 10;
  border-radius: 25px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.classifiedsItem .imageDisplay .return:focus {
  outline: none;
}
.classifiedsItem .imageDisplay .return .icon {
  font-size: 33px;
  color: white;
}
.classifiedsItem .imageDisplay .overlay {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 0;
}
.classifiedsItem .imageDisplay .content {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
}
.classifiedsItem .imageDisplay .content .imgContainer {
  width: 100%;
  height: 80%;
  padding: 10px;
  display: flex;
  justify-content: center;
}
.classifiedsItem .imageDisplay .content .imgContainer .item-img {
  display: block;
  width: auto;
  height: 100%;
  max-width: 71%;
  -o-object-fit: contain;
     object-fit: contain;
}
.classifiedsItem .imageDisplay .content .carouselWrapper {
  height: 20%;
  width: 100%;
  display: flex;
  align-items: center;
  padding-left: 1.6px;
  justify-content: center;
}
.classifiedsItem .imageDisplay .content .carouselWrapper .carousel {
  width: 90%;
  margin-left: 30px;
  margin-bottom: 5px;
}
.classifiedsItem .imageDisplay .content .carouselWrapper .carousel .selectedCarouselImg {
  height: 63px;
  display: inline-block;
  vertical-align: top;
  opacity: 100% !important;
}
.classifiedsItem .imageDisplay .content .carouselWrapper .carousel .carousel-img {
  height: 63px;
  display: inline-block;
  vertical-align: top;
  opacity: 41%;
  -o-object-fit: cover;
     object-fit: cover;
}
@media only screen and (min-width: 1281px) {
  .classifiedsItem .imageDisplay .content .carouselWrapper .carousel .carousel-img {
    width: 110px !important;
  }
}
.classifiedsItem .imageDisplay .content .carouselWrapper .carousel .arrow {
  color: white;
  position: absolute;
  cursor: pointer;
  top: -189%;
  font-size: 21px;
  z-index: 3;
}
.classifiedsItem .imageDisplay .content .carouselWrapper .carousel .prev {
  left: 5.7%;
}
.classifiedsItem .imageDisplay .content .carouselWrapper .carousel .next {
  right: 10.1%;
}
.classifiedsItem .section {
  width: 95%;
  max-width: 800px;
  margin-top: 10px;
  border-bottom: 1px solid gray;
}
.classifiedsItem .section .sectionTitle {
  font-size: 19px;
  font-weight: 600;
}
.classifiedsItem .section .sectionContainer {
  width: 100%;
  padding: 3px 10px;
  margin-bottom: 5px;
}
.classifiedsItem .section .sectionContainer .contact {
  display: flex;
  justify-content: space-between;
}
.classifiedsItem .section .sectionContainer .contact a,
.classifiedsItem .section .sectionContainer .contact button {
  width: 30%;
  height: 30px;
  background-color: #2699FB;
  color: white;
  font-size: 18px;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
}
.classifiedsItem .section .sectionContainer .contact a:disabled,
.classifiedsItem .section .sectionContainer .contact button:disabled {
  background-color: #BCE0FD;
}
.classifiedsItem .section .sectionContainer .contact-info {
  margin: 10px;
}
.classifiedsItem .section .sectionContainer .contact-info .info {
  display: flex;
  height: 25px;
  justify-content: center;
}
.classifiedsItem .section .sectionContainer .contact-info .info div {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-left: 10px;
}
.classifiedsItem .section .sectionContainer .contact-info .info .info-icon {
  width: 20px;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.classifiedsItem .section .sectionContainer .options {
  display: flex;
  justify-content: space-between;
  margin-top: 5px;
}
.classifiedsItem .section .sectionContainer .options .favorited {
  background-color: white;
  color: #2699FB;
  border: solid 3px #2699FB;
}
.classifiedsItem .section .sectionContainer .options .disfavorited {
  background-color: #2699FB;
  color: white;
}
.classifiedsItem .section .sectionContainer .options button {
  width: 48%;
  height: 30px;
  background-color: #BCE0FD;
  color: white;
  font-size: 18px;
  border-radius: 5px;
}
.classifiedsItem .section .sectionContainer .options button .icon {
  margin-left: 5px;
}
.classifiedsItem .section .sectionContainer .user {
  display: flex;
}
.classifiedsItem .section .sectionContainer .user img {
  width: 50px;
  height: 50px;
  border-radius: 25px;
  margin-right: 10px;
}
.classifiedsItem .section .sectionContainer .quickInfo .title {
  font-size: 22px;
  font-weight: 600;
  margin: 5px 0px;
}
.classifiedsItem .section .sectionContainer .quickInfo .price {
  font-weight: 600;
  margin: 2px 0px;
}
.classifiedsItem .section .sectionContainer .quickInfo .category,
.classifiedsItem .section .sectionContainer .quickInfo .listing {
  color: gray;
  font-size: 14px;
}
.classifiedsItem .section .sectionContainer .details .condition {
  display: flex;
  margin-bottom: 8px;
}
.classifiedsItem .section .sectionContainer .details .condition label,
.classifiedsItem .section .sectionContainer .details .condition div {
  width: 50%;
}
.classifiedsItem .section .sectionContainer .details .condition label {
  font-weight: 500;
}
.classifiedsItem .section .sectionContainer .details .description {
  margin-bottom: 8px;
}
.classifiedsItem .section .sectionContainer .details .location-1 {
  font-weight: 500;
}
.classifiedsItem .section .sectionContainer .details .location-2 {
  font-size: 14px;
  color: gray;
}
.classifiedsItem .section .sectionContainer .details .detail {
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: 30px;
  align-items: center;
}
.classifiedsItem .section .sectionContainer .details .detail div {
  white-space: nowrap;
  overflow: hidden !important;
  text-overflow: ellipsis;
}
.classifiedsItem .section .sectionContainer .details .detail:nth-child(even) {
  background-color: #f1f1f1;
}
.classifiedsItem .section .sectionContainer .details-button {
  display: flex;
  justify-content: flex-end;
}
.classifiedsItem .section .sectionContainer .details-button button {
  border: none;
  background-color: transparent;
  color: #2699FB;
  font-size: 16px;
  text-decoration: underline;
  outline: none;
}
.classifiedsItem .section .sectionContainer .details.collapse {
  height: 210px;
  overflow: hidden;
}
.classifiedsItem .section .sectionContainer .seller-desc .desc {
  height: auto;
}
.classifiedsItem .section .sectionContainer .seller-desc .desc.collapse {
  height: auto;
  max-height: 108px;
  overflow: hidden !important;
}
.classifiedsItem .section .sectionContainer .seller-desc-button {
  display: flex;
  justify-content: flex-end;
}
.classifiedsItem .section .sectionContainer .seller-desc-button button {
  border: none;
  background-color: transparent;
  color: #2699FB;
  font-size: 16px;
  text-decoration: underline;
  outline: none;
}
.classifiedsItem .section:last-child {
  margin-bottom: 30px;
}

.ccw {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  position: relative;
}
@media only screen and (max-width: 70em) {
  .ccw .vehicleOverlay {
    width: 250px;
    top: 51.9%;
    left: 50%;
    transform: translateX(-50%);
  }
}
.ccw .create {
  width: 250px;
  height: 250px;
  margin: 10px;
  border: 1px solid transparent;
  background-color: #d8dadf;
  border-radius: 5px;
  display: grid;
  grid-template-rows: 1fr 1fr 1fr;
  justify-content: center;
  align-items: center;
}
.ccw .create .title {
  width: 100%;
  text-align: center;
  font-size: 24px;
  font-weight: 600;
}
.ccw .create .icon-wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.ccw .create .icon-wrapper .create-icon {
  font-size: 80px;
}
.ccw .create .button-wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.ccw .create .button-wrapper .create-listing-button {
  width: 150px;
  height: 35px;
  background-color: #2699FB;
  border-radius: 5px;
  color: white;
  font-size: 18px;
  text-decoration: none;
  display: flex;
  justify-content: center;
  align-items: center;
}

@media only screen and (max-width: 70em) {
  .create-listing {
    width: 100vw;
  }
}
.create-listing {
  height: 100%;
  display: flex;
  justify-content: center;
}
.create-listing .listing-wrapper {
  width: 100%;
  max-width: 600px;
  height: 100%;
  padding: 10px;
}
.create-listing .listing-wrapper .section {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.create-listing .listing-wrapper .section .header-section .backBtnWrapper {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: black;
}
.create-listing .listing-wrapper .section .header-section .backBtnWrapper .backIcon {
  margin-right: 6px;
  font-size: 19px;
}
.create-listing .listing-wrapper .section .header-section .backBtnWrapper .title {
  font-size: 16px;
}
.create-listing .listing-wrapper .section .header-section .sub-title {
  font-size: 24px;
  font-weight: 600;
}
.create-listing .listing-wrapper .section .section-name {
  font-size: 18px;
  font-weight: 600;
}
.create-listing .listing-wrapper .section .user .profile {
  display: flex;
  align-items: center;
}
.create-listing .listing-wrapper .section .user .profile img {
  width: 40px;
  height: 40px;
  border-radius: 25px;
}
.create-listing .listing-wrapper .section .user .profile .name {
  font-weight: 600;
  margin-left: 10px;
}
.create-listing .listing-wrapper .section .user .profile .info {
  font-size: 14px;
  font-weight: 400;
  color: gray;
  margin-left: 10px;
}
.create-listing .listing-wrapper .section .listing-info {
  width: 100%;
}
.create-listing .listing-wrapper .section .listing-info .input-container {
  display: flex;
  flex-wrap: wrap;
}
.create-listing .listing-wrapper .section .listing-info .input-container input,
.create-listing .listing-wrapper .section .listing-info .input-container select {
  width: 100%;
  height: 35px;
  border-radius: 3px;
  border: 1px solid gray;
}
.create-listing .listing-wrapper .section .listing-info .input-container textarea {
  width: 100%;
  min-height: 80px;
  overflow: auto;
  border-radius: 3px;
  border: 1px solid gray;
  padding-top: 8px;
}
.create-listing .listing-wrapper .section .listing-info .input-container label {
  margin-left: 10px;
  padding: 0px 5px;
  background-color: white;
  font-size: 15px;
  transform: translateY(10px);
}
.create-listing .listing-wrapper .section .listing-info .enabledWrapper {
  display: flex;
  justify-content: space-evenly;
}
.create-listing .listing-wrapper .section .listing-info .enabledWrapper .enabled-input {
  width: 30%;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
.create-listing .listing-wrapper .section .listing-info .enabledWrapper .enabled-input label {
  font-size: 12px;
  width: 100%;
  text-align: center;
}
.create-listing .listing-wrapper .section .listing-submit {
  width: 100%;
  height: 35px;
  background-color: #2699FB;
  color: white;
  font-size: 18px;
  border-radius: 3px;
}

.image-upload {
  width: 100%;
}
.image-upload-info {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: gray;
}
.image-upload .uploader {
  min-height: 100px;
  border: 1px solid gray;
  border-radius: 3px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 5px;
}
.image-upload .uploader .images {
  line-height: 0;
  -webkit-column-count: 4;
  -webkit-column-gap: 0px;
  -moz-column-count: 4;
  -moz-column-gap: 0px;
  column-count: 4;
  column-gap: 0px;
}
@media (max-width: 800px) {
  .image-upload .uploader .images {
    -moz-column-count: 3;
    column-count: 3;
  }
}
.image-upload .uploader .images .img-preview {
  position: relative;
  margin: 3px;
}
.image-upload .uploader .images .img-preview .img-preview-delete {
  position: absolute;
  top: 5px;
  left: 5px;
  font-size: 22px;
  background-color: white;
  border-radius: 25px;
}
.image-upload .uploader .images .img-preview img {
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
  height: auto;
}
.image-upload .uploader .upload-button {
  width: 120px;
  height: 30px;
  border-radius: 3px;
  background-color: lightgray;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  font-size: 16px;
  margin-top: 10px;
}

.FilterModal {
  position: fixed;
  height: 650px;
  max-height: 85%;
  width: 700px;
  max-width: 90%;
  border-radius: 4px;
  padding: 5px;
  top: 52.5%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
  color: #595959;
  outline: none;
  z-index: 20;
}

.FilterOverlay {
  position: fixed;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  background-color: rgba(0, 0, 0, 0.65);
  z-index: 2;
}
.FilterOverlay .filtersContainer {
  width: 100%;
  height: 100%;
  padding: 10px;
}
.FilterOverlay .filtersContainer .top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 25px;
}
.FilterOverlay .filtersContainer .top .backIcon {
  font-size: 24px;
}
.FilterOverlay .filtersContainer .top .searchBar {
  width: 90%;
  height: 35px;
  background-color: lightgray;
  border: 1px solid lightgray;
  border-radius: 15px;
  padding: 2px 5px;
  display: flex;
  align-items: center;
}
.FilterOverlay .filtersContainer .top .searchBar .searchInput {
  width: 100%;
  height: 100%;
  background-color: transparent;
  border: none;
}
.FilterOverlay .filtersContainer .top .searchBar .searchInput:focus {
  outline: none;
}
.FilterOverlay .filtersContainer .top .searchBar .searchIcon {
  padding: 0px 3px;
  width: auto;
}
.FilterOverlay .filtersContainer .main {
  height: 80%;
  overflow-y: scroll;
}
.FilterOverlay .filtersContainer .main .categories {
  display: flex;
  flex-direction: column;
  padding: 0px 15px;
}
.FilterOverlay .filtersContainer .main .categories .category {
  display: flex;
  height: 30px;
  margin-bottom: 5px;
  align-items: center;
}
.FilterOverlay .filtersContainer .main .categories .category input {
  margin-right: 10px;
  height: 18px;
  width: 18px;
  border: 1px solid black;
}
.FilterOverlay .filtersContainer .main .categories .category label {
  font-size: 18px;
  text-align: center;
}
.FilterOverlay .filtersContainer .footer {
  height: calc(20% - 60px);
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
}
.FilterOverlay .filtersContainer .footer button {
  background-color: #2699FB;
  padding: 10px 20px;
  font-size: 18px;
  color: white;
  border-radius: 20px;
}

.groups-wrapper {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
}

.groups {
  height: 100%;
  width: 100%;
  max-width: 800px;
  padding: 10px;
}
.groups .upper {
  height: 20%;
}
.groups .lower {
  height: 80%;
  max-height: 700px;
  display: flex;
  justify-content: center;
  width: 100%;
}
.groups .groupChat, .groups .groupChatS,
.groups .groupParticipants {
  border: 2px solid black;
  background-color: #e9e5e5;
  width: 44%;
}
.groups .group {
  height: 100%;
}
.groups .group .description {
  height: 70%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.groups .group .description .desc-header {
  font-size: 22px;
  font-weight: 600;
  height: 35px;
}
.groups .group .description .desc-body {
  height: auto;
  width: 90%;
  background-color: #e9e5e5;
  font-weight: 600;
  border: 1px solid #111;
  padding: 10px;
  font-size: 13px;
}
.groups .group .description .desc-body .inner-desc {
  background-color: white;
  padding: 10px;
  border-radius: 3px;
  border: 0.3px solid #aaa;
}
.groups .group .description .desc-body textarea {
  width: 100%;
  height: 90%;
  resize: none;
  overflow-y: scroll;
  outline: none;
  padding: 3px;
}
.groups .groupChat {
  border: none;
}
.groups .groupParticipants {
  padding: 5px;
}
.groups .groupParticipants .gp-header {
  font-size: 18px;
  font-weight: 600;
  height: 5%;
}

.chatWindow {
  height: 100%;
  width: 100%;
  background: rgb(233, 229, 229);
  border-radius: 5px;
  display: grid;
  grid-template-rows: 1fr 50px;
}
.chatWindow .chatInputWrapper {
  padding: 5px;
  display: flex;
  align-items: flex-end;
}
.chatWindow .chatInputWrapper form {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  border: 1px solid transparent;
  background-color: white;
  border-radius: 20px;
}
.chatWindow .chatInputWrapper form input {
  flex-grow: 2;
  width: 100%;
  min-height: 35px;
  padding: 0 5px;
  border: 1px solid transparent;
  background-color: transparent;
  border-radius: 20px;
}
.chatWindow .chatInputWrapper form input:focus {
  outline: none;
}
.chatWindow .chatInputWrapper form button {
  background: transparent;
  border: none;
  width: auto;
  height: auto;
  margin-right: 10px;
}
.chatWindow .chatInputWrapper form .inputIcon {
  font-size: 22px;
}
.chatWindow .chatInputWrapper::-webkit-scrollbar {
  display: none;
}
.chatWindow .chat {
  height: 100%;
  list-style: none;
  background: none;
  margin: 0;
  padding: 0;
  overflow: scroll;
  scroll-behavior: smooth;
}
.chatWindow .chat li {
  padding: 5px;
  overflow: hidden;
}
.chatWindow .chat li p {
  font-size: 14px;
  margin: 0 0 0.2rem 0;
  color: gray;
}
.chatWindow .chat li .timeStamp {
  text-align: end;
  padding-right: 10px;
}
.chatWindow .chat li .info {
  display: flex;
  justify-content: flex-end;
}
.chatWindow .chat li .info .options {
  margin-right: 5px;
}
.chatWindow .chat .self {
  justify-content: flex-end;
  align-items: flex-end;
}
.chatWindow .chat .self p {
  text-align: end;
}
.chatWindow .chat .self .msg {
  background-color: #2e8bef;
  border-bottom-right-radius: 0;
}
.chatWindow .chat .self .msg .message {
  color: white;
}
.chatWindow .chat .other .msg {
  border-bottom-left-radius: 0px;
}
.chatWindow .chat .bottom {
  height: 0px;
}
.chatWindow .chat .msg {
  background: white;
  min-width: -webkit-fit-content;
  min-width: -moz-fit-content;
  min-width: fit-content;
  padding: 10px;
  border-radius: 10px;
  box-shadow: 0px 2px 0px rgba(0, 0, 0, 0.07);
}

.participants {
  width: 100%;
  height: 95%;
}
.participants .participant {
  width: 100%;
  height: 10%;
  border-bottom: 1px solid black;
  display: flex;
  align-items: center;
}
.participants .participant .icon {
  margin: 0px 10px;
  font-size: 22px;
}
.participants .participant .name {
  width: 100%;
  font-size: 20px;
}
.participants .participant .adminOptions {
  display: flex;
}
.participants .participant .adminOptions .icon {
  font-size: 16px;
  color: gray;
}

.groupParticipantsHeader {
  display: flex;
  justify-content: space-between;
  padding: 5px;
}

.modal-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.modal-box {
  background-color: whitesmoke;
  width: 80vw;
  height: 800px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 20px;
  box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.75);
}

.modal-openned {
  position: fixed;
  top: 9%;
  left: 87.5%;
  transform: translate(-50%, -50%);
  font-size: 20px;
  z-index: 1;
  transition: 0.2s;
  padding-top: 3px;
  transform: rotate(46deg);
}

.modal-openned:hover {
  color: red;
}

.btn-open-modal {
  padding-top: 2px;
  cursor: pointer;
  font-size: 20px;
  transition: 0.2s;
}

.btn-open-modal:hover {
  color: green;
}

.modal-header {
  font-weight: 800;
  font-size: 15px;
}

.handleUserWrapper {
  width: 100%;
  height: 30px;
  border: 1px solid #aaa;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  padding: 3px;
  margin: 5px;
}

.handleUserWrapperNames {
  width: 100%;
  height: 30px;
  border: 1px solid #aaa;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  padding: 3px;
  margin: 5px;
  background-color: #aaa;
}

.handleUser {
  font-size: 20px;
  font-weight: 800;
}

.handleUserButton {
  font-size: 20px;
  font-weight: 900;
  text-align: right;
}

.SearchUserParticipants {
  width: 90%;
  padding: 10px;
  border: none;
  outline: none;
  border: 1px solid #111;
  border-radius: 20px;
}

.SearchUserParticipantsTitle {
  font: 30px;
  font-weight: 800;
}

.flex-center {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.settings {
  display: flex;
  justify-content: center;
}
.settings button {
  width: 135px;
  border: 2px solid black;
  cursor: pointer;
  background: transparent;
  font-size: 18px;
  transition: 0.3s;
}
.settings button:hover {
  background-color: red;
  color: white;
}

.Gbtn-class {
  width: 0px;
  height: 0px;
  overflow: hidden;
  font-size: 20px;
  float: right;
  color: black;
}
.Gbtn-class .Gbtn-icon {
  font-size: 18px;
}

.desc-top {
  background-color: #e9e5e5;
  width: 90%;
  padding: 2px;
  border: 2px solid #111;
  border-bottom: 1px solid #111;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.Gbtn-class-edit-desc {
  display: flex;
  justify-content: flex-end;
}

.Gbtn-class {
  width: 30px;
  height: 30px;
  font-size: 18px;
  background-color: transparent;
}

@media only screen and (max-width: 800px) {
  .groupChat {
    width: 100vw !important;
    height: calc(100vh - 90px);
    position: absolute;
  }
  .groups {
    height: 100%;
    width: 100%;
    max-width: 800px;
    padding: 0px;
    margin: 0px;
  }
  .desc-header {
    background-color: #e9e5e5;
    width: 100vw;
    border: 1px solid #111;
    border-bottom: 0px solid #111;
  }
  .groupChatS {
    width: 0px !important;
    height: 0px !important;
    margin: 0px !important;
    height: 0px !important;
    border: 0px solid #111 !important;
    overflow: hidden !important;
  }
  .groupParticipants {
    width: 100vw !important;
    margin-top: 10px;
    height: 450px;
  }
  .participant {
    height: 40px !important;
  }
  .desc-body {
    width: 100vw !important;
  }
  .Gbtn-classM {
    float: right;
    background-color: transparent;
    font-size: 18px;
  }
  .description {
    width: 100vw !important;
    margin-top: 70px;
  }
}
@media only screen and (max-width: 600px) {
  .content {
    display: flex !important;
    width: 100vw !important;
  }
  .content .createGroupBtn {
    width: 94% !important;
    margin-bottom: 3px !important;
  }
  .content .createGroupBtn button {
    font-size: 15px !important;
    width: 9em !important;
    height: 2.1em !important;
  }
  .content .joinGroup {
    height: 91% !important;
    width: 94% !important;
  }
  .content .joinGroup .groupsNameSearchbar {
    height: 2em !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .content .joinGroup .groupsNameSearchbar .groupsName {
    margin-top: -7px !important;
    font-size: 21px !important;
    margin-left: 1px !important;
    margin-right: 42.9% !important;
  }
  .content .joinGroup .groupsNameSearchbar input {
    margin-left: 0px !important;
    margin-bottom: 5px !important;
    width: 36% !important;
    height: 21px !important;
  }
  .content .joinGroup .lighthousenow {
    overflow-y: scroll !important;
  }
  .content .joinGroup .group {
    height: 14.4% !important;
    width: 97% !important;
    margin-left: 4px !important;
  }
  .content .joinGroup .group .leaderDescription {
    width: 100% !important;
  }
  .content .joinGroup .group .leaderDescription .leader {
    width: 6em !important;
    font-size: 19px !important;
    margin-right: 1px !important;
    margin-bottom: -2px !important;
  }
  .content .joinGroup .group .leaderDescription .description {
    font-size: 13px !important;
    width: 97% !important;
    margin-left: 3px !important;
    margin-top: 4px !important;
    margin-right: 0px !important;
  }
  .content .joinGroup .group button {
    margin-left: 3px !important;
  }
  .content .joinGroup .pagePaginationWrapper {
    width: 100% !important;
    height: 2em !important;
  }
}
.content {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.content .createGroupBtn {
  display: flex;
  justify-content: flex-end;
  width: 43em;
  margin-bottom: 6px;
}
.content .createGroupBtn button {
  width: 150px;
  height: 33px;
  background-color: #443737;
  color: white;
  font-size: 18px;
  font-weight: 600;
}
.content .joinGroup {
  display: flex;
  flex-direction: column;
  height: 30em;
  width: 43em;
  border: 4px solid lightgray;
  border-radius: 7px;
}
.content .joinGroup .groupsNameSearchbar {
  display: flex;
  align-items: center;
  width: 42.5em;
  height: 3.1em;
  background-color: lightgray;
}
.content .joinGroup .groupsNameSearchbar .groupsName {
  margin-left: 3px;
  margin-top: -14px;
  font-size: 30px;
  font-weight: 600;
}
.content .joinGroup .groupsNameSearchbar input {
  outline: none;
  justify-self: flex-end;
  margin-left: 30.1em;
  margin-bottom: 3px;
  width: 13em;
  height: 26px;
}
.content .joinGroup .joinGroupsWrapper {
  overflow-y: scroll;
  height: 100%;
}
.content .joinGroup .joinGroupsWrapper .group {
  display: flex;
  flex-direction: row;
  align-items: center;
  border-bottom: 3px solid #D2D2D2;
  height: 4.8em;
}
.content .joinGroup .joinGroupsWrapper .group .userCircleIcon {
  font-size: 49px;
  color: #443737;
}
.content .joinGroup .joinGroupsWrapper .group .leaderDescription {
  display: flex;
  flex-direction: column;
}
.content .joinGroup .joinGroupsWrapper .group .leaderDescription .leader {
  width: 11em;
  height: 20px;
  border: none;
  outline: none;
  font-family: "Roboto Condensed", sans-serif;
  font-size: 19px;
  font-weight: 900;
  color: #30903A;
  outline: none;
  margin-left: 3px;
  margin-right: 16px;
}
.content .joinGroup .joinGroupsWrapper .group .leaderDescription .description {
  width: 41em;
  height: 20px;
  border: none;
  color: #443737;
  font-weight: 600;
  outline: none;
  margin-left: 3px;
  margin-right: 6px;
}
.content .joinGroup .joinGroupsWrapper .group button {
  margin-left: 0.3em;
  font-size: 27px;
  margin-top: 3px;
  background-color: transparent;
  color: #443737;
  outline: none;
}
.content .joinGroup .pagePaginationWrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 42.5em;
  height: 3em;
  background-color: lightgray;
}
.content .joinGroup .pagePaginationWrapper .pagePagination {
  display: flex;
  align-items: center;
}
.content .joinGroup .pagePaginationWrapper .pagePagination .changePage-icon {
  color: #555555;
  font-size: 20px;
  margin-top: 4px;
}
.content .joinGroup .pagePaginationWrapper .pagePagination .changePage-icon:hover {
  color: darkgray;
}
.content .joinGroup .pagePaginationWrapper .pagePagination .changePage-icon.disabled {
  color: darkgray;
}
.content .joinGroup .pagePaginationWrapper .pagePagination .itemsShowing {
  display: flex;
  color: #555555;
  margin-left: 11px;
  margin-right: 11px;
  margin-top: 3px;
}
.content .joinGroup .noGroups {
  margin: 6px;
  font-weight: bold;
  font-size: 17px;
}

@media only screen and (max-width: 600px) {
  .createGroup .buttons-wrapper {
    flex-direction: column-reverse;
  }
  .createGroup button {
    margin: 5px;
  }
}
.createGroup {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
}
.createGroup .cgTitle {
  font-size: 19px;
  margin-bottom: 0px;
  width: 80%;
  max-width: 500px;
  text-align: left;
  background-color: #d2d2d2;
  padding: 5px;
  border: 3px solid #111;
  border-bottom: 0px;
}
.createGroup textarea {
  width: 80%;
  height: 70vh;
  resize: none;
  border: 3px solid black;
  border-top: 0px;
  background-color: #d2d2d2;
  margin-bottom: 10px;
  font-size: 15px;
  font-weight: 600;
  padding: 5px;
  max-width: 500px;
  outline: none;
}
.createGroup textarea::-moz-placeholder {
  font-size: 15px;
  color: black;
  font-weight: 600;
}
.createGroup textarea:-ms-input-placeholder {
  font-size: 15px;
  color: black;
  font-weight: 600;
}
.createGroup textarea::placeholder {
  font-size: 15px;
  color: black;
  font-weight: 600;
}
.createGroup button {
  width: 150px;
  height: 33px;
  cursor: pointer;
  border: 3px solid black;
  color: black;
  background-color: #d2d2d2;
  font-size: 18px;
  font-weight: 600;
  transition: 0.3s;
}
.createGroup button:hover {
  background-color: rgb(73, 73, 73);
}
.createGroup .Back-cg-link {
  color: black;
  text-decoration: none;
}
.createGroup .buttons-wrapper {
  display: flex;
  flex-direction: row;
  justify-content: center;
  text-align: center;
  width: 80%;
  margin: auto;
}
.createGroup .Back-cg {
  font-size: 13px;
  margin: 10px;
}

.childFormContainer {
  display: flex;
  justify-content: center;
  background-color: #e1e1e1;
  padding: 25px;
  height: 100%;
}
@media only screen and (max-width: 600px) {
  .childFormContainer {
    width: 100vw;
  }
}
.childFormContainer .childForm {
  width: 100%;
  max-width: 900px;
  background-color: white;
  padding: 15px;
}
.childFormContainer .childForm .formHeader {
  text-align: center;
  font-size: 32px;
  font-weight: 600;
}
.childFormContainer .childForm .registerAgainDisclaimer {
  color: red;
}
.childFormContainer .childForm .registerAgainDisclaimer .form-link-to-registrations {
  font-weight: bold;
  color: #1e266d;
}
.childFormContainer .childForm .child {
  margin-top: 25px;
  border-top: 1px solid black;
  padding: 5px;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
}
.childFormContainer .childForm .child .removeChild {
  margin-top: 20px;
  margin-bottom: 20px;
  width: 100%;
  display: flex;
  justify-content: flex-start;
}
.childFormContainer .childForm .child .removeChild button {
  cursor: pointer;
  width: auto;
  height: 35px;
  font-size: 15px;
  background-color: #FF0000;
  border-radius: 5px;
  color: white;
}
.childFormContainer .childForm .child .inputWrapper {
  width: 425px;
  display: grid;
  grid-template-rows: auto 1fr;
  margin-bottom: 10px;
}
.childFormContainer .childForm .child .inputWrapper label {
  font-size: 18px;
  font-weight: 500;
}
.childFormContainer .childForm .child .inputWrapper input,
.childFormContainer .childForm .child .inputWrapper select {
  width: 90%;
  height: 30px;
  margin-bottom: 10px;
}
.childFormContainer .childForm .child .inputWrapper input:focus,
.childFormContainer .childForm .child .inputWrapper select:focus {
  outline: none;
}
.childFormContainer .childForm .child .inputWrapper .error-message {
  width: 90%;
  font-size: 14px;
  margin: 0px;
  margin-bottom: 10px;
  color: red;
}
.childFormContainer .childForm .buttonContainer {
  display: flex;
  justify-content: space-between;
}
.childFormContainer .childForm .buttonContainer button {
  width: 150px;
  height: 35px;
  font-size: 15px;
}
.childFormContainer .childForm .buttonContainer .addChild {
  margin-top: 20px;
  margin-bottom: 20px;
  width: auto;
  background-color: rgb(152, 251, 152);
  color: black;
  border-radius: 5px;
  cursor: pointer;
}
.childFormContainer .childForm .buttonContainer .submitButton {
  background-color: #2699FB;
  color: white;
}
.childFormContainer .childForm .pricing {
  margin-top: 15px;
}
.childFormContainer .childForm .pricing .pricingTitle {
  font-size: 22px;
  font-weight: 600;
}
.childFormContainer .childForm .pricing .totalWrapper {
  display: flex;
  justify-content: space-between;
  margin: 10px;
  font-size: 18px;
  font-weight: 600;
}
.childFormContainer .childForm .pricing .buttonWrapper {
  display: flex;
  justify-content: flex-end;
}
.childFormContainer .childForm .pricing .buttonWrapper .submitButton {
  width: 150px;
  height: 35px;
  font-size: 18px;
  background-color: #2699FB;
  color: white;
  cursor: pointer;
  border-radius: 5px;
}
.childFormContainer .childForm .pricing .buttonWrapper .submitButton:disabled {
  cursor: not-allowed;
  background-color: #D2D2D2;
}
.childFormContainer .childForm .pricing .transportationConfirmation {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
.childFormContainer .childForm .pricing .transportationConfirmation input {
  margin-right: 8px;
}
.childFormContainer .childForm .pricing .transportationConfirmation label, .childFormContainer .childForm .pricing .transportationConfirmation input {
  cursor: pointer;
}
.childFormContainer .childForm .pricing .non-attendance {
  margin-bottom: 10px;
}
.childFormContainer .childForm .pricing .age-limit {
  margin-bottom: 15px;
}

.childFormSuccess {
  display: flex;
  justify-content: center;
  align-items: center;
}
.childFormSuccess p {
  font-size: 34px;
  font-weight: 600;
  color: #30903A;
}

.forumWrapper {
  display: flex;
  justify-content: center;
}

.forum {
  padding: 5px;
  width: 100%;
  max-width: 1000px;
}
@media only screen and (max-width: 600px) {
  .forum {
    width: 100vw;
    padding: 5px;
  }
}
.forum .forumHeader {
  display: flex;
  justify-content: space-between;
}
.forum .forumHeader .pageTitle {
  font-size: 24px;
  font-weight: 600;
}
.forum .forumHeader button {
  background-color: #2699FB;
  color: white;
  width: 100px;
  height: 35px;
  border-radius: 5px;
}
.forum .forumBody {
  padding-top: 25px;
}
.forum .forumBody .postWrapper a {
  text-decoration: none;
  color: black;
}
.forum .forumBody .postWrapper .post {
  border-bottom: 1px solid lightgray;
  transition: all ease 0.3s;
}
.forum .forumBody .postWrapper .post:hover {
  background-color: lightgray;
}
.forum .forumBody .postWrapper .post .postTitle {
  width: 80%;
  padding-left: 45px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 18px;
  font-weight: 500;
}
.forum .forumBody .postWrapper .post .postDetails {
  margin-top: 5px;
  display: flex;
  justify-content: space-between;
}
.forum .forumBody .postWrapper .post .postDetails .creator {
  display: flex;
  align-items: center;
  padding: 5px;
}
.forum .forumBody .postWrapper .post .postDetails .creator .img {
  width: 35px;
  height: 35px;
  background-color: gray;
  border: transparent;
  border-radius: 50%;
  margin-right: 5px;
}
.forum .forumBody .postWrapper .post .postDetails .creator .name {
  font-weight: 400;
}
.forum .forumBody .postWrapper .post .postDetails .created {
  padding: 5px;
  display: flex;
  align-items: center;
}

.forumPostWrapper {
  display: flex;
  justify-content: center;
  height: calc(100vh - 70px);
  overflow-y: scroll;
}
.forumPostWrapper .forumPost {
  width: 100%;
  height: 100%;
  max-width: 800px;
}
@media only screen and (max-width: 600px) {
  .forumPostWrapper .forumPost {
    width: 100vw;
    padding: 5px;
  }
}
.forumPostWrapper .forumPost .forumPostHeader {
  margin-bottom: 20px;
}
.forumPostWrapper .forumPost .forumPostHeader .forumPostTitle {
  font-size: 42px;
  font-weight: 700;
  margin-bottom: 10px;
}
@media only screen and (max-width: 600px) {
  .forumPostWrapper .forumPost .forumPostHeader .forumPostTitle {
    font-size: 30px;
  }
}
.forumPostWrapper .forumPost .forumPostHeader .forumPostOptions a {
  text-decoration: none;
  font-weight: 500;
  font-size: 18px;
  color: #2699FB;
}
.forumPostWrapper .forumPost .forumPostHeader .forumPostOptions button {
  margin-left: 5px;
  background-color: transparent;
  border: none;
  font-size: 18px;
  color: gray;
  text-decoration: underline;
}
.forumPostWrapper .forumPost .forumPostBody .forumPostMain {
  display: grid;
  grid-template-columns: 60px 1fr;
}
.forumPostWrapper .forumPost .forumPostBody .forumPostMain .userImage {
  display: flex;
  justify-content: center;
}
.forumPostWrapper .forumPost .forumPostBody .forumPostMain .userImage img {
  border-radius: 50%;
  width: 50px;
  height: 50px;
}
.forumPostWrapper .forumPost .forumPostBody .forumPostMain .postDetails {
  font-size: 18px;
}
.forumPostWrapper .forumPost .forumPostBody .forumPostMain .postDetails .detailsWrapper {
  display: flex;
  font-size: 16px;
}
.forumPostWrapper .forumPost .forumPostBody .forumPostMain .postDetails .detailsWrapper .postDate {
  color: gray;
  margin-left: 5px;
}
.forumPostWrapper .forumPost .forumPostBody .forumPostComment {
  display: grid;
  grid-template-columns: 60px 1fr;
  margin-top: 35px;
}
.forumPostWrapper .forumPost .forumPostBody .forumPostComment .userImage {
  display: flex;
  justify-content: center;
}
.forumPostWrapper .forumPost .forumPostBody .forumPostComment .userImage img {
  border-radius: 50%;
  width: 50px;
  height: 50px;
}
.forumPostWrapper .forumPost .forumPostBody .forumPostComment .commentArea {
  display: flex;
  flex-direction: column;
}
.forumPostWrapper .forumPost .forumPostBody .forumPostComment .commentArea .commentInput {
  width: 450px;
  height: 125px;
  background-color: #f0f0f0;
  border-radius: 5px;
  border: 1px solid lightgray;
}
@media only screen and (max-width: 600px) {
  .forumPostWrapper .forumPost .forumPostBody .forumPostComment .commentArea .commentInput {
    width: 300px;
    height: 100px;
  }
}
.forumPostWrapper .forumPost .forumPostBody .forumPostComment .commentArea button {
  margin-top: 10px;
  height: 25px;
  width: 200px;
  color: white;
  border-radius: 15px;
  background-color: #2699FB;
}
@media only screen and (max-width: 600px) {
  .forumPostWrapper .forumPost .forumPostBody .forumPostComment .commentArea button {
    width: 150px;
  }
}
.forumPostWrapper .forumPost .forumPostBody .forumCommentsContainer {
  margin-top: 25px;
  padding-bottom: 70px;
}
.forumPostWrapper .forumPost .forumPostBody .forumCommentsContainer .commentsHeader {
  font-size: 20px;
  font-weight: 700;
}
.forumPostWrapper .forumPost .forumPostBody .forumCommentsContainer .commentsContainer .comment {
  margin-left: 15px;
  margin-top: 15px;
}
.forumPostWrapper .forumPost .forumPostBody .forumCommentsContainer .commentsContainer .comment .commentor {
  display: flex;
  align-items: center;
}
.forumPostWrapper .forumPost .forumPostBody .forumCommentsContainer .commentsContainer .comment .commentor img {
  border-radius: 50%;
  width: 35px;
  height: 35px;
}
.forumPostWrapper .forumPost .forumPostBody .forumCommentsContainer .commentsContainer .comment .commentor .commentorName {
  margin-left: 5px;
  font-weight: 600;
}
.forumPostWrapper .forumPost .forumPostBody .forumCommentsContainer .commentsContainer .comment .commentor .commentedAt {
  margin-left: 5px;
  color: gray;
}
.forumPostWrapper .forumPost .forumPostBody .forumCommentsContainer .commentsContainer .comment .replyButton,
.forumPostWrapper .forumPost .forumPostBody .forumCommentsContainer .commentsContainer .comment .collapseTree,
.forumPostWrapper .forumPost .forumPostBody .forumCommentsContainer .commentsContainer .comment .deleteButton {
  background-color: transparent;
  border: none;
  width: auto;
  color: gray;
  cursor: pointer;
}
.forumPostWrapper .forumPost .forumPostBody .forumCommentsContainer .commentsContainer .comment .replyButton {
  color: #2699FB;
}
.forumPostWrapper .forumPost .forumPostBody .forumCommentsContainer .commentsContainer .comment .deleteButton {
  color: red;
}
.forumPostWrapper .forumPost .forumPostBody .forumCommentsContainer .commentsContainer .comment .commentArea {
  display: flex;
  flex-direction: column;
}
.forumPostWrapper .forumPost .forumPostBody .forumCommentsContainer .commentsContainer .comment .commentArea .commentInput {
  width: 380px;
  height: 80px;
  background-color: #f0f0f0;
  border-radius: 5px;
  border: 1px solid lightgray;
}
@media only screen and (max-width: 600px) {
  .forumPostWrapper .forumPost .forumPostBody .forumCommentsContainer .commentsContainer .comment .commentArea .commentInput {
    width: 300px;
    height: 80px;
  }
}
.forumPostWrapper .forumPost .forumPostBody .forumCommentsContainer .commentsContainer .comment .commentArea button {
  margin-top: 10px;
  height: 25px;
  width: 200px;
  color: white;
  border-radius: 15px;
  background-color: #2699FB;
}
@media only screen and (max-width: 600px) {
  .forumPostWrapper .forumPost .forumPostBody .forumCommentsContainer .commentsContainer .comment .commentArea button {
    width: 150px;
  }
}
.forumPostWrapper .forumPost .forumPostBody .forumCommentsContainer .commentsContainer .comment .commentArea.hidden {
  height: 0px;
  opacity: 0;
}
.forumPostWrapper .forumPost .forumPostBody .forumCommentsContainer .commentsContainer .comment .replies.hidden {
  height: 0px;
  opacity: 0;
}
.forumPostWrapper .forumPost .forumPostBody .forumCommentsContainer .commentsContainer .comment.hidden {
  height: 0px;
  opacity: 0;
}

.forumEdit {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}
.forumEdit .input-container {
  display: grid;
  grid-template-rows: 27px auto;
  margin-bottom: 15px;
}
.forumEdit .input-container label {
  font-size: 22px;
}
.forumEdit .input-container input {
  height: 35px;
  font-size: 18px;
}
.forumEdit .buttonContainer {
  display: flex;
  justify-content: center;
  margin-bottom: 15px;
}
.forumEdit .buttonContainer button {
  width: 300px;
  height: 35px;
  font-size: 20px;
  background-color: #2699FB;
  color: white;
  border-radius: 5px;
}

.CF-container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.CF-pageTitle {
  margin: 30px;
  font-size: 30px;
}

.CF-formWrapper {
  background-color: #707070;
  width: 500px;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  padding-bottom: 20px;
  border-radius: 10px;
}
@media only screen and (max-width: 600px) {
  .CF-formWrapper {
    width: 99vw;
    margin-bottom: 9px;
  }
}

.CF-form {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.CF-input {
  margin: 3px;
  padding: 5px;
  border-radius: 10px;
  width: 95%;
  height: 40px;
  font-size: 20px;
  border: none;
  outline: none;
  background-color: #d4d4d4;
}

.CF-textarea {
  width: 95%;
  height: 100px;
  border-radius: 10px;
  border: none;
  outline: none;
  background-color: white;
  resize: none;
  font-size: 15px;
  padding: 5px;
}

.CF-label {
  font-size: 20px;
  color: black;
}

.CF-labelWrapper {
  width: 95%;
  display: flex;
  justify-content: left;
  align-items: flex-start;
  margin-top: 10px;
}

.CF-formTitleWapper {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 25px;
}
@media only screen and (max-width: 600px) {
  .CF-formTitleWapper {
    font-size: 21.9px;
  }
}

.CF-formTitle {
  color: white;
}

.CF-buttonWrapper {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 10px;
}

.CF-button {
  width: 95%;
  height: 40px;
  background-color: rgb(26, 173, 26);
  border: none;
  outline: none;
  border-radius: 10px;
  transition: 0.3s;
  cursor: pointer;
}

.CF-button:hover {
  background-color: blue;
  color: white;
}

.messageOverMessage {
  color: white;
  margin-top: 10px;
  text-align: center;
  font-size: 17px;
}

.breadcrumbs {
  display: flex;
  row-gap: 2px;
}
.breadcrumbs .separator {
  margin-left: 4px;
  margin-right: 4px;
}
.breadcrumbs p {
  margin: 0px;
}

.main {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding-left: 10px;
  padding-right: 10px;
}
.main h1 {
  font-size: 3em;
}
.main p {
  margin-top: 0px;
  font-size: 1.5em;
}
.main a {
  text-decoration: none;
  color: green;
  font-size: 1.2em;
}
.main img {
  width: 40%;
}

@media only screen and (max-width: 700px) {
  .main img {
    width: 90%;
  }
  .main h1 {
    font-size: 2em;
  }
  .main p {
    font-size: 1.2em;
  }
  .main a {
    font-size: 1em;
  }
}
/*# sourceMappingURL=app-145d54a80b396ad42d30.map*/