/*# sourceMappingURL=custom.min.css.map */

.o-tagify {
    /* border: 1px solid rgb(175, 172, 172); */
    /* border-radius: .1rem; */
      display: block;
    width: 100%;
    padding: -0.5rem 0.9rem;
    font-size: 0.8125rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--vz-body-color);
    background-color: var(--vz-input-bg);
    background-clip: padding-box;
    border: 1px solid var(--vz-input-border);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 0.25rem;
    -webkit-transition: border-color 0.15s ease-in-out,
        -webkit-box-shadow 0.15s ease-in-out;
    transition: border-color 0.15s ease-in-out,
        -webkit-box-shadow 0.15s ease-in-out;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out,
        -webkit-box-shadow 0.15s ease-in-out;
  }
  
  .o-tagify INPUT {
    padding: .5rem 0 .5rem .15rem;
    margin-bottom: .1rem;
    border: 0;
    /* background: rgb(252, 252, 252); */
  }
  
  .o-tagify__item {
    position: relative;
    display: inline-block;
    margin: 0 .2rem .2rem;
    padding: .1rem 1.5rem .1rem .4rem;
    vertical-align: middle;
    border: 1px solid cornflowerblue;
    border-radius: .2rem;
    background: cornflowerblue;
    color: #fff;
    box-shadow: 1px 1px 2px rgba(0, 0, 0, .2);
  }
  
  .o-tagify__btn {
    position: absolute;
    right: 0; top: 50%;
    padding: 0 .4rem;
    transform: translateY(-50%);
    border: 0;
    font-size: 1.1rem;
    color: rgb(18, 78, 106);
    background: none;
    cursor: pointer;
  }
  
  .is-focused {
    background: rgb(215, 119, 119);
  }

/* .o-tagify {
  margin-bottom: 3rem;
} */

.o-btn {
  padding: .75rem 1.5rem;
  border: 1px solid rgb(190, 201, 206);
  border-radius: .2rem;
  font-size: 1.1rem;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, .2);
  background: none;
  cursor: pointer;
  transition: transform .3s ease;
}

.o-btn:active {
  box-shadow: 0;
  transform: translateY(1px);
}

.c-main__btn {
 margin-right: 1.5rem;
 margin-bottom: 3rem; 
}

.o-btn--serialize {
  background: rgb(107, 145, 213);
  color: #fff;
}

.o-btn--destroy {
  background: rgb(208, 85, 85);
  color: #fff;
}

.o-result-view {
  display: block;
  min-height: 12rem;
  min-width: 16.5rem;
  max-width: 60%;
  padding: .1rem .2rem .5rem;
  border: 1px solid;
  border-radius: .15rem;
}

.c-main__result-view {
  margin: 0 auto 1.5rem;
}

.c-main__result-view P {
  word-break: break-all;
}
#example_filter{
  display: none;
}

/* Tooltip container */
.tooltip {
  position: relative;
  display: contents;
  border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
  font-size: inherit;
}

/* Tooltip text */
.tooltip .tooltiptext {
  visibility: hidden;
  width: auto;
  background-color: #607D8B;
  color: #fff;
  text-align: center;
  padding: 5px 11px;
  border-radius: 6px;
 
  /* Position the tooltip text - see examples below! */
  position: absolute;
  z-index: 99999;
  left: 0px;
}
/* .tooltiptext::after{
  content: "";
  position: inline-block;
  top: 100%;
  left: 50%;
  border-style: solid;
  border-color: #273342 transparent transparent transparent;
  margin-left: -5px;
  border-width: 5px;
} */

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
  visibility: visible;
  bottom: 80px;
}

/* Tooltip text */
.tooltip2 .tooltiptext2 {
  visibility: hidden;
  width: auto;
  background-color: #757778;
  color: #fff;
  text-align: center;
  padding: 5px 11px;
  border-radius: 6px;
 
  /* Position the tooltip text - see examples below! */
  position: absolute;
  z-index: 99999;
  left: 0px;
}
.tooltiptext2::after{
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  border-style: solid;
  border-color: #273342 transparent transparent transparent;
  margin-left: -5px;
  border-width: 5px;
}



/* Show the tooltip text when you mouse over the tooltip container */
.tooltip2:hover .tooltiptext2 {
  visibility: visible;
  bottom: 34px;
}

/* .card{
  height: 24rem;

} */


.form-label {
    margin-bottom: 0.1rem;
}