:root {
  --input-border-color: #ccc;
  --input-background-color: #ccc;
}

/*
===============================
GLOBAL STYLE
===============================
*/
.fc-search .search-form input[type="search"] {
  border: 1px solid var(--input-border-color);
  padding: 5px;
}

.fc-search .search-form input[type="submit"] {
  background: var(input-background-color);
  border: 1px solid #ccc;
  padding: 5px;
}

/*
===============================
TEMPLATE: Collaps
===============================
*/
.fc-search.template-collaps .fc-search--wrapper {
  display: flex;
}

.fc-search.template-collaps .fc-search--wrapper .fc-search--icon,
.fc-search.template-collaps .fc-search--wrapper .fc-close--icon {
  cursor: pointer;
  margin-right: 10px;
}

.fc-search.template-collaps .fc-search--wrapper .fc-close--icon {
  display: none;
}

.fc-search.template-collaps .fc-search--wrapper .fc-search--form {
  overflow: hidden;
  width: 0;
  flex-grow: 0;
  transition: all 0.2s ease-in-out;
}

.fc-search.template-collaps .fc-search--wrapper .fc-search--form form {
  display: flex;
}

.fc-search.template-collaps .fc-search--wrapper .fc-search--form form label {
  flex-grow: 1;
  margin-right: 2px;
}

.fc-search.template-collaps .fc-search--wrapper .fc-search--form form input[type="search"] {
  display: block;
  width: 100%;
}

.fc-search.template-collaps .fc-search--wrapper .fc-search--form.active {
  width: auto;
  flex-grow: 1;
}

.fc-search.template-collaps .fc-search--wrapper.active .fc-search--form {
  width: auto;
  flex-grow: 1;
}

.fc-search.template-collaps .fc-search--wrapper.active .fc-search--icon {
  display: none;
}

.fc-search.template-collaps .fc-search--wrapper.active .fc-close--icon {
  display: block;
}