.mito-toolbar-container {
  width: 100%;
  height: 50px;

  background-color: #ebebeb;
  padding-left: 10px;

  /* We make the toolbar a flexbox, for the toolbar icons/actions */
  display: flex;
  flex-direction: row;
  justify-content: space-between;

  /* border-box to set the border inside the div, so it doesn't get chopped */
  box-sizing: border-box; 
  -moz-box-sizing: border-box; /* Firefox */
  -webkit-box-sizing: border-box; /* Older Webkit browsers */

  /* Border the bottom */
  border-bottom: 1px solid #999696;
}

.mito-toolbar-container-left {
  /* The left starts from the start */
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}

.mito-toolbar-container-right {
  /* The right starts from the end */
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}
  
  .mito-toolbar-item {
    /*keep items evenly spaced */
    padding-right: 5px;

    margin-top: 5px;
    margin-bottom: 5px;

    /* make input blend in with formula bar */
    background-color: #ebebeb;
    border-radius: 0;
    border-style: none;
    outline: none;
  }

  .mito-toolbar-item .tooltip {
    /* the tooltip should default to hidden*/
    visibility: hidden;
    background-color: #343434;;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;

    font-size: 12px;
  
    width: 120px;
    top: 10%;
    margin-left: -45px; /* Use half of the width (120/2 = 60) - half the width of the icon, to center the tooltip */

    /* Position the tooltip */
    position: absolute;
    z-index: 1;

    transition: 0s visibility;
  }

  .mito-toolbar-item:hover .tooltip {
    /* when the toolbar item is hovered over, display the tooltip*/
    visibility: visible;
    transition-delay:.3s;
  }