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

h1 {}
select,
button,
input,
.select {
    vertical-align: middle;
    height: 2.3em;
    margin: 0 0.4em 0em 0;
}
select,
input {
  /* height: 1.7em;
  line-height: 1.7em; */
  line-height: 2.3em;
}
input {
  padding: 0em .5em 0 .5em;
  box-shadow: 0 1px 0 rgba(255,255,255,0.75) inset,0 1px 0 rgba(34,52,71,0.04);
  /* height: 2em; */
  border-radius: 4px;
  border: 1px solid #c2c9d3;
  margin-top: -1px
}
input[type="number"] {
  width: 5em;
}
select,
.select {
  display: inline-block;
  white-space: nowrap;
  background-image: url("select-dropdown.svg");
  background-position: center right;
  background-repeat: no-repeat;
  -moz-appearance: none;
  text-indent: 0.01px;
  text-overflow: "";
  border: 1px solid #ccd2db;
  background-color: #e7eaee;
  cursor: pointer;
  padding: 0em  2.75em 0 .8em;
  box-shadow: 0 1px 0 rgba(255,255,255,0.75) inset,0 1px 0 rgba(34,52,71,0.04);
  -webkit-appearance: none !important;
  border-radius: 0.25em;
  transition: 0.15s background-color, 0.15s border-color, 0.15s box-shadow;

  /* Alt style */
  background-image: url("arrow.svg");
  border: 0px none !important;
  border-radius: 1.15em;
  box-shadow: 0 0 0 transparent !important;
}
select:hover,
.select:hover {
  border-color: #a8b3c1;
  background-color: #dfe3e8;
  box-shadow: 0 1px 0 rgba(255,255,255,0.5) inset,0 1px 1px rgba(34,52,71,0.1);
}
.select {line-height: 2.3em;}

button {
  border-radius: 4px;
  background: #f2f4f5;
  text-align: left;
  border: 1px solid #a8b3c1;
  cursor: pointer;
  box-shadow: 0 1px 0 rgba(255,255,255,0.75) inset,0 1px 0 rgba(34,52,71,0.04);
  -webkit-appearance: none !important;
  transition: 0.15s background-color, 0.15s border-color, 0.15s box-shadow;
  padding: 0em  0.8em 0 .8em;

  /* Alt style */
  border: 0px none !important;
  border-radius: 1.15em;
  box-shadow: 0 0 0 transparent !important;
}
button:hover {
  border-color: #a8b3c1;
  background-color: #dfe3e8;
  box-shadow: 0 1px 0 rgba(255,255,255,0.5) inset,0 1px 1px rgba(34,52,71,0.1);
}

.add-rule {
  /*max-width: 11em;*/
  /*float: left;*/
}


body {
  /* background: #f5f5f5; */
}

.wrapper {
  padding: 1em;
  background: #fff;
  width: 90%;
  max-width: 960px;
  margin: 0 auto;
  /* min-height: 200vh; */
}


.logic {
  /* background-color: #e8eced;
  margin: 4px 0 8px 0;
  padding: 1em;
  border: 1px solid #dae0e2; */
}

.segment {
  /* box-shadow: 0 1px 0 rgba(194,202,210,0.25),0 0 0 1px rgba(194,202,210,0.25),4px 0 0 #2f93c0 inset; */
  margin-bottom: 6px;
  background: #ffffff;
  padding: 0 2px 0 5px;
  position: relative;
}
.segment + .segment {
  margin-top: 2em;
}
.segment + .segment::before {
  content: "OR";
  position: absolute;
  top: -1.5em;
  left: 1em;
  color: #666;
}
.segment:only-of-type .delete {
  display: none;
}


.head {
  border-bottom: 1px solid #ddd;
  padding: 10px 16px 8px;
  font-size: .9em;
  color: #555555;
}
.head h4 {margin: 0; font-size: 1.1em; color: #000;}

.rule {
  padding: 0 .75em;
  border-bottom: 1px solid #ddd;

  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: nowrap;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-align-content: stretch;
  -ms-flex-line-pack: stretch;
  align-content: stretch;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

.subject,
.operator,
.predicate,
.remove-row {
  -webkit-align-self: center;
  -ms-flex-item-align: center;
  align-self: center;

  position: relative;
  padding: .25em;
}

.predicate-unit input,
.predicate-unit .unit {
  width: 34% !important;
}


.subject,
.predicate {
  -webkit-flex: 1 1 40%;
  -ms-flex: 1 1 40%;
  flex: 1 1 40%;
}
.operator,
.remove-row {
  -webkit-flex: 0 1 auto;
  -ms-flex: 0 1 auto;
  flex: 0 1 auto;
}
.subject {
  color: #555555;
}

.rule select,
.rule input {
  width: 100%;
}


.foot {
  padding: 4px;
  overflow: hidden;
}

.delete,
.remove-row,
.remove-rule-row,
.remove-detail-row {
  color: red;
  cursor: pointer;
}
.delete,
.remove-rule-row,
.remove-detail-row {
  float: right;
  padding: .35em .55em 0 0;
}


/* ----- ICONS */
.icon-large {
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  /*border-radius: 100%;*/
  background-size: contain;
  background-repeat: no-repeat;
  opacity: .4;
}
.dropdown li * {
  vertical-align: middle !important;
}
[data-field="has-seen-event"]   .icon-large {background-image: url(icons/code.svg);}
[data-field="love-the-app"]     .icon-large {background-image: url(icons/heart.svg);}
[data-field="has-seen-interaction"]   .icon-large {background-image: url(icons/eye.svg);}
[data-field="first-seen"]       .icon-large {background-image: url(icons/baby.svg);}
[data-field="country"]          .icon-large {background-image: url(icons/flag.svg);}
[data-field="language"]         .icon-large {background-image: url(icons/globe.svg);}
[data-field="model"]            .icon-large {background-image: url(icons/phone.svg);}
[data-field="os-version"]       .icon-large {background-image: url(icons/version.svg);}
[data-field="app-version"]       .icon-large {background-image: url(icons/version.svg);}
[data-group="custom_data"]   .icon-large {background-image: url(icons/person.svg);}



.aside {
  padding: .5em 1em;
  margin: 3em 1em;
  border-left: 6px solid #42A8FF;
  color: #666;
  font-style: italic;
  line-height: 1.5;


}
.aside li {
    padding-bottom: 1em;
  }