/* Add Meeting Popup */
.popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #f9f9f9;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 10px;
  height: 90vh;
  width: 70%;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  z-index: 1000000;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  font-family: "Inter", sans-serif;
  padding: 5%;
  gap: 3%;
  max-height: 800px;
  max-width: 1000px;
}

.overlay {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: var(--two-or-more-years-5o);
  height: 100%;
  width: 100%;
  z-index: 999999999999;
  display: none;
}

#event-popup {
  color: var(--stepwork-pencil-lead);
}

#event-popup-title {
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "Inter", sans-serif;
  font-size: var(--m);
  font-weight: 600;
  width: 100%;
}

#contact-information-area {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

#contact-information-area input,
#meeting-information-area input {
  outline: none;
  border: none;
}

#contact-information-title {
  width: 100%;
  font-size: var(--s);
  font-weight: 550;
}

.icon {
  /* flex: 1; */
  width: 50px;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

#event-popup .icon {
  background-color: var(--surrender-white);
}

.icon img {
  height: 20px;
  width: auto;
}

.left-border-radius {
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}

.right-border-radius {
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}

#name-and-email {
  padding: 5px;
  gap: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--duct-tape-grey);
  border-radius: 15px;
  width: 100%;
  height: 40px;
}

#name {
  flex: 5;
  height: 100%;
}

#name input {
  width: 100%;
  height: 100%;
}

#email {
  flex: 5;
  height: 100%;
}

#email input {
  width: 100%;
  height: 100%;
}

#phone-and-position {
  padding: 5px;
  gap: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--duct-tape-grey);
  border-radius: 15px;
  width: 100%;
  height: 40px;
}

#phone {
  flex: 5;
  height: 100%;
}

#phone input {
  width: 100%;
  height: 100%;
}

#position {
  flex: 5;
  height: 100%;
  position: relative;
}

#meeting-information-area {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

#meeting-information-title {
  width: 100%;
  font-size: var(--s);
  font-weight: 550;
}

#event-name-and-sponsor {
  padding: 5px;
  gap: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--duct-tape-grey);
  border-radius: 15px;
  width: 100%;
  height: 40px;
}

#event {
  flex: 5;
  height: 100%;
}

#event input {
  width: 100%;
  height: 100%;
}

#sponsor {
  flex: 5;
  height: 100%;
  position: relative;
}

#sponsor input {
  width: 100%;
  height: 100%;
}

#event-date-category-and-cost {
  padding: 5px;
  gap: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--duct-tape-grey);
  border-radius: 15px;
  width: 100%;
  height: 40px;
}

#event-date {
  flex: 5;
  height: 100%;
}

#event-date input {
  width: 100%;
  height: 100%;
}

#event-category {
  flex: 2;
  height: 100%;
  position: relative;
}

#event-cost {
  flex: 2;
  height: 100%;
}

#event-cost input {
  width: 100%;
  height: 100%;
}

#event-time {
  padding: 5px;
  gap: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--duct-tape-grey);
  border-radius: 15px;
  width: 100%;
  height: 40px;
}

#time-slider-container {
  background-color: var(--surrender-white);
  height: 100%;
  flex: 11;
}

#time-slider-container .double-slider {
  margin-top: 9px;
  margin-left: 20px;
  margin-right: 30px;
}

#event-address {
  padding: 5px;
  gap: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--duct-tape-grey);
  border-radius: 15px;
  width: 100%;
  height: 40px;
}

#address {
  flex: 4.5;
  height: 100%;
}

#address input {
  width: 100%;
  height: 100%;
}

#city {
  flex: 3;
  height: 100%;
}

#city input {
  width: 100%;
  height: 100%;
}

#zipcode {
  flex: 1.5;
  height: 100%;
}

#zipcode input {
  width: 100%;
  height: 100%;
}

#state {
  flex: 1;
  height: 100%;
  position: relative;
}

/* #state div {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--surrender-white);
} */

#country {
  flex: 1;
  height: 100%;
  position: relative;
}

/* #country div {
  width: 100%;
  height: 100%;
  padding: 10%;
  display: flex;
  align-items: center;
  justify-content: center;
} */

#country div svg {
  height: 100%;
}

#description-area {
  padding: 5px;
  gap: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--duct-tape-grey);
  border-radius: 15px;
  width: 100%;
  height: 60px;
}

#description {
  flex: 11;
  height: 100%;
}

#description textarea {
  resize: none;
  width: 100%;
  height: 100%;
  outline: none;
  border: none;
}

#attachment-area {
  padding: 20px;
  gap: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background-color: var(--duct-tape-grey);
  border-radius: 15px;
  width: 100%;
  height: 100px;
  border: dashed 4px var(--stepwork-pencil-lead);
  cursor: pointer;
  -webkit-user-select: none; /* Safari 3.1+ */
  -moz-user-select: none; /* Firefox 2+ */
  -ms-user-select: none; /* IE 10+ */
  user-select: none; /* Standard syntax */
}

#attachment-text {
  flex: 5;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

#attached {
  display: none;
  justify-content: center;
  align-items: center;
  flex: 5;
  width: 100%;
  height: 100%;
}

#flyer {
  display: none;
}

#event-comments {
  padding: 5px;
  gap: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--duct-tape-grey);
  border-radius: 15px;
  width: 100%;
  height: 60px;
}

#event-comments textarea {
  width: 100%;
  height: 100%;
  outline: none;
  border: none;
  resize: none;
  border-radius: 10px;
}

#save-event {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--sixty-day-green);
  border-radius: 10px;
  color: var(--surrender-white);
  width: 120px;
  height: 40px;
  cursor: pointer;
  -webkit-user-select: none; /* Safari 3.1+ */
  -moz-user-select: none; /* Firefox 2+ */
  -ms-user-select: none; /* IE 10+ */
  user-select: none; /* Standard syntax */
}

#close-event {
  display: flex;
  justify-content: center;
  align-items: center;
  border: solid 3px var(--sixty-day-green);
  border-radius: 10px;
  color: var(--sixty-day-green);
  width: 120px;
  height: 40px;
  cursor: pointer;
  -webkit-user-select: none; /* Safari 3.1+ */
  -moz-user-select: none; /* Firefox 2+ */
  -ms-user-select: none; /* IE 10+ */
  user-select: none; /* Standard syntax */
}

#position-button,
#sponsor-button,
#category-button,
#state-button,
#country-button {
  background-color: var(--surrender-white);
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-user-select: none; /* Safari 3.1+ */
  -moz-user-select: none; /* Firefox 2+ */
  -ms-user-select: none; /* IE 10+ */
  user-select: none; /* Standard syntax */
}

#country-button {
  padding: 10%;
  background-color: var(--clean-and-serene-white);
}

#position-dropdown,
#sponsor-dropdown,
#category-dropdown,
#state-dropdown,
#country-dropdown {
  display: none;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  overflow-y: auto;
  top: 100%;
  background-color: var(--surrender-white);
  border-radius: 5px;
  width: 100%;
  z-index: 3;
  flex-direction: column;
  box-shadow: 0 0 0.15rem var(--new-jersey-chrome);
  height: 100px;
}

#state-dropdown {
  width: 200%;
}

#country-dropdown {
  width: 300%;
  background-color: var(--clean-and-serene-white);
}

.position-option,
.sponsor-option,
.category-option,
.state-option,
.country-option {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.position-option,
.sponsor-option,
.category-option,
.state-option {
  height: 40px;
}

.position-option,
.sponsor-option,
.category-option,
.state-option {
  text-align: center;
}

.state-option {
  padding: 5%;
}

.country-icon {
  width: 30%;
  padding: 5%;
}

.country-text {
  width: 70%;
  padding: 5%;
}

.country-icon img {
  width: 100%;
}

.position-option:hover,
.sponsor-option:hover,
.category-option:hover,
.state-option:hover,
.country-option:hover {
  background-color: var(--silver-medallion-3o);
}

.position-selected,
.sponsor-selected,
.category-selected,
.state-selected,
.country-selected {
  background-color: var(--silver-medallion-6o);
}

.position-selected:hover,
.sponsor-selected:hover,
.category-selected:hover,
.state-selected:hover,
.country-selected:hover {
  background-color: var(--silver-medallion);
}