:root {
    --bg-tabs-color:#6C777D;
    --active-underline-color:#17c1e8;
    --active-text-color:#36454F;
    --tab-text-color:#808080;
}

.tabs-component {
    /* margin: 4em 0; */
    margin: 0.5em 0.5em;
}

.tabs-component-tabs {
    /* border: solid 1px #ddd;
    border-radius: 6px;
    margin-bottom: 5px; */
    overflow-x: auto;
    display: flex;
}

/* @media (min-width: 700px) { */
    .tabs-component-tabs {
        border: 0;
        align-items: stretch;
        display: flex;
        justify-content: flex-start;
        margin-bottom: -1px;
        padding: 0px;
    }
/* } */

.tabs-component-tab {
    color: #999;
    font-size: 14px;
    font-weight: 600;
    /* margin-right: 0; */
    /* margin-right: .5em; */
    list-style: none;
    position: relative;
}

.tabs-component-tab:not(:last-child) {
    /* border-bottom: dotted 1px #ddd; */
    /* border-bottom: solid 3px var(--active-underline-color); */
}

.tabs-component-tab:hover {
    /* color: #666; */
    font-weight: bold;
    color: var(--active-text-color) !important;
    border-bottom: solid 3px var(--bg-tabs-color);
}

.tabs-component-tab.is-active {
    /* color: #000; */
    border-bottom: solid 3px var(--active-underline-color);
    font-weight: bold;
    color: var(--active-text-color);
}

.tabs-component-tab.is-disabled * {
    color: #cdcdcd;
    cursor: not-allowed !important;
}

.tabs-component-tab-a {
    align-items: center;
    /* color: inherit; */
    color: var(--tab-text-color);
    display: flex;
    padding: .75em 1em;
    text-decoration: none;
    white-space:nowrap;
}

.tabs-component-tab-a:hover {
    color: var(--active-text-color);
    font-weight: bold;
}

.tabs-component-tab-a.is-active {
    color: var(--active-text-color);
    font-weight: bold;
}

.tabs-component-panels {
    /* padding: 4em 0; */
    /* padding: 1em 2em; */
    padding: 0px 0px 0px 0px;
}

@media (min-width: 700px) {
    .tabs-component-panels {
        /* background-color: #fff; */
        /* border: solid 1px #ddd; */
        /* border-radius: 0 6px 6px 6px; */
        /* box-shadow: 0 0 10px rgba(0, 0, 0, .05); */
        /* padding: 4em 2em; */
        /* padding: 1em 2em; */
        padding: 0px 0px 0px 0px;
    }
}

.tabs-component-panel {
    padding: 15px 0px 15px 0px;
}

/* .tabs-component-btn {
  cursor: pointer;
  background: #e1ecf4;
  border-radius: 3px;
  border: 1px solid #7aa7c7;
  padding: 4px 8px;
  color: #39739d;
}

.tabs-component-btn:hover {
  background-color: #b3d3ea;
  color: #2c5777;
  font-weight: bold;
}

.tabs-component-btn:active {
  background-color: #a0c7e4;
  box-shadow: none;
  color: #2c5777;
} */