.ht-tabs { display: flex; flex-wrap: wrap; }

.ht-tabs-item {
    outline: 0;
    position: relative;
    border-right: 1px solid #e7e7e7;
    border-bottom: 1px solid #e7e7e7;
    padding: 5px 10px !important; /* else overriden by ".main ul li" */
    display: inline-flex;
    cursor: pointer;
    background-color: white; /* We need to explicitly set this so drag&drop looks good */
    align-items: center;
    height: 28px;
    vertical-align: top;
}
.rtl .ht-tabs-item {
    border-right-width: 0;
    border-left: 1px solid #e7e7e7;
}

.ht-tabs-item:hover { color: black; }
.ht-tabs-item a {
    text-decoration: none;
    color: black;
}
.ht-tabs-item [class^="icon-"], .ht-tabs-item [class*=" icon-"] { margin-right: 10px; font-size: 22px; }
.rtl .ht-tabs-item [class^="icon-"], .rtl .ht-tabs-item [class*=" icon-"] { margin-right: 0; margin-left: 10px; }

.ht-tabs-item .ht-tabs-item-controls [class^="icon-"], .ht-tabs-item .ht-tabs-item-controls [class*=" icon-"] { margin-right: 0; font-size: 16px; }
.rtl .ht-tabs-item .ht-tabs-item-controls [class^="icon-"], .rtl .ht-tabs-item .ht-tabs-item-controls [class*=" icon-"] { margin-left: 0; }

.ht-tabs-item.ui-sortable-helper { border: 1px solid #e7e7e7; }
.ht-tabs-item.ht-tabs-item-selected { font-weight: bold; }
.ht-tabs-item:not(.ht-tabs-item-selected):hover { cursor: pointer; }
.ht-tabs-item { width: 208px; }
.ht-tabs.ht-tabs-cols-5 .ht-tabs-item { width: 162px; }
.ht-tabs.ht-tabs-cols-6 .ht-tabs-item { width: 133px; }
.ht-tabs.ht-tabs-cols-7 .ht-tabs-item { width: 112px; }

.ht-tabs-last-row { border-bottom-width: 0; }
.ht-tabs-last-column { border-right-width: 0; }
.rtl .ht-tabs-last-column { border-left-width: 0; }

.ht-tabs-item-controls {
    position: absolute;
    background-color: inherit;
    width: 0;
    right: 1px;
    top: 1px;
    bottom: 1px;
    overflow: hidden;
    cursor: pointer;
    font-weight: normal;
    font-size: 16px;
    opacity: 0;
    transition: opacity .25s ease-in-out;

    display: flex;
    align-items: center;
}
.rtl .ht-tabs-item-controls { right: auto; left: 1px; }

.ht-tabs-item-controls > * { margin-left: 5px; }
.rtl .ht-tabs-item-controls > * { margin-left: 0; margin-right: 5px; }

.ht-tabs-item:hover:not(.ui-sortable-helper) .ht-tabs-item-controls, .ht-tabs-item-controls:focus {
    width: auto;
    opacity: 1;
    padding: 0 10px;
}

.ht-tabs-wizard { overflow: hidden; flex-wrap: nowrap; }
.ht-tabs-wizard .ht-tabs-item { padding-top: 7px !important; padding-bottom: 7px !important; }
.ht-tabs-wizard .ht-tabs-item:not(:first-child) { padding-left: 30px !important; }
.rtl .ht-tabs-wizard .ht-tabs-item:not(:first-child) { padding-left: 0 !important; padding-right: 30px !important; }
.ht-tabs-wizard .ht-tabs-item span { margin-right: -20px; }
.rtl .ht-tabs-wizard .ht-tabs-item span { margin-right: 0; margin-left: -20px; }

.ht-tabs-wizard .ht-tabs-item:nth-child(odd) { background-color: #ffffff; }
.ht-tabs-wizard .ht-tabs-item:nth-child(odd):not(:last-child):after { border-left-color: #ffffff; }
.ht-tabs-wizard .ht-tabs-item:nth-child(even) { background-color: #eeeeee; }
.ht-tabs-wizard .ht-tabs-item:nth-child(even):not(:last-child):after { border-left-color: #eeeeee; }
.ht-tabs-wizard .ht-tabs-item.ht-tabs-item-selected { background-color: #267f30 !important; color: white; font-weight: normal; }
.ht-tabs-wizard .ht-tabs-item.ht-tabs-item-selected:not(:last-child):after { border-left-color: #267f30; }

.ht-tabs-wizard .ht-tabs-item:after {
	position: absolute;
    right: 0;
    top: 0;
    background-color: inherit;
    content: " ";
    width: 48px;
    height: 48px;
    transform: rotateZ(50deg) translateX(7px) translateY(-12px) skewX(11deg);
    z-index: -1;
}
.rtl .ht-tabs-wizard .ht-tabs-item:after {
    right: auto;
    left: 0;
    transform: rotateZ(50deg) translateX(-9px) translateY(6px) skewX(11deg);
}

/* wizards has arrows, so it's important that the first element has higher z-index than the next */
.ht-tabs-wizard .ht-tabs-item:nth-child(1) { z-index: 90 !important; }
.ht-tabs-wizard .ht-tabs-item:nth-child(2) { z-index: 80 !important; }
.ht-tabs-wizard .ht-tabs-item:nth-child(3) { z-index: 70 !important; }
.ht-tabs-wizard .ht-tabs-item:nth-child(4) { z-index: 60 !important; }
.ht-tabs-wizard .ht-tabs-item:nth-child(5) { z-index: 50 !important; }
.ht-tabs-wizard .ht-tabs-item:nth-child(6) { z-index: 40 !important; }
.ht-tabs-wizard .ht-tabs-item:nth-child(6) { z-index: 30 !important; }
.ht-tabs-wizard .ht-tabs-item:nth-child(7) { z-index: 20 !important; }
.ht-tabs-wizard .ht-tabs-item:nth-child(8) { z-index: 10 !important; }