/*--------------------------------------------------------------
# Toolbar Midesof 2.0
--------------------------------------------------------------*/

.toolbar {margin: 1em 0;}

.toolbar {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  width: 100%;
  height: 38px;
}

.toolbar .toolbar-btn {
    display: none;
    width: 38px;
    height: 38px;
    padding: 9.23px;
    text-decoration: none;
    vertical-align: top;
    background-color: transparent;
    border: 1.77px solid #a8b7c7;
    margin-right: 8px;
}

.toolbar .toolbar-btn:hover {background-color: #fff;}

.toolbar  .toolbar-btn:hover .cl:before {
    color: #006FB3
}
  
.toolbar .toolbar-btn-icon-content {
  display: inline-block;
  height: $toolbar-button-size - ($toolbar-button-border-width * 2);
  padding: $toolbar-button-padding;
}

@media (min-width: 768px) {
    .toolbar .toolbar-btn, .toolbar .toolbar-btn-group {
        display: inline-block;
    }
}

.toolbar .toolbar-btn .cl {
    display: block;
    width: 16px;
    height: 16px;
    font-size: 16px;
    line-height: 16px;
    text-align: center;
}

.toolbar .toolbar-btn.toolbar-toggler, 
.toolbar.active .toolbar-btn, 
.toolbar.active .toolbar-btn-group{
    display: inline-block;
}

@media (min-width: 768px) {
  .toolbar .toolbar-btn.toolbar-toggler, 
  .toolbar.active .toolbar-btn.toolbar-toggler {
        display: none;
    }
}

.toolbar.toolbar-toggler .toolbar-behavior-on {
  display: block;
}

.toolbar .toolbar-btn.toolbar-toggler .toolbar-behavior-off {
    display: none;
    font-size: 16px;
    line-height: 16px;
    color: #a8b7c7;
    text-align: center;
}