/* Minification failed. Returning unminified contents.
(7,20): run-time error CSS1039: Token not allowed after unary operator: '-search-bar-margin-top'
(8,23): run-time error CSS1039: Token not allowed after unary operator: '-search-bar-margin-bottom'
(18,26): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(20,26): run-time error CSS1039: Token not allowed after unary operator: '-color-white-base'
(33,15): run-time error CSS1039: Token not allowed after unary operator: '-color-gray-700'
(55,15): run-time error CSS1039: Token not allowed after unary operator: '-color-blue-base'
(65,14): run-time error CSS1039: Token not allowed after unary operator: '-color-blue-base'
 */
.blog-search-container {
  display: flex;
  justify-content: center;
  width: 100%;
  clear: both;
  float: left;
  margin-top: var(--search-bar-margin-top, 0px);
  margin-bottom: var(--search-bar-margin-bottom, 0px);
}

.blog-search {
  width: 100%;
  height: 46px;
  max-width: 808px;
  align-items: center;
  background-color: #ddd;
  border-radius: 40px;
  border: 1px solid var(--color-border);
  display: flex;
  background-color: var(--color-white-base);
  overflow: hidden;
  padding: 0;
  position: relative;
}

.blog-search > input[type="search"] {
  width: inherit;
  height: 46px;
  font-size: 16px;
  border: 1px solid transparent;
  border-radius: 14px 0 0 14px;
  background-color: transparent;
  color: var(--color-gray-700) !important;
  height: 26px;
  outline: transparent;
  padding: 0;
  text-indent: 15px;
  margin: 2px;
  flex: 1;
}

.blog-search > button {
  height: 25px;
  margin: 2px;
  border: 1px solid transparent;
  border-radius: 0 14px 14px 0;
  outline: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
}

.blog-search > button > svg {
  color: var(--color-blue-base);
  width: 35px;
  height: 35px;
}

.blog-search > button:hover > svg {
  color: #fff;
}

.blog-search > button:hover > svg circle {
  fill: var(--color-blue-base);
}

@media (min-width: 768px) {
  .blog-search > input[type="search"] {
    font-size: 22px;
  }
}