.tabs_list { overflow: hidden; position: relative; white-space: nowrap; font-size: 0; }
.tabs_list::before , .tabs_list::after { position: absolute; height: calc(100% - 1px); top: 0; opacity: 0; z-index: 1; transition: opacity .3s; content: ""; }
.tabs_list::before { width: 30px; background: -moz-linear-gradient(right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 70%, rgba(255, 255, 255, 1) 99%); background: -webkit-linear-gradient(right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 70%, rgba(255, 255, 255, 1) 99%); background: linear-gradient(to left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 70%, rgba(255, 255, 255, 1) 99%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff', GradientType=1); left: -100%; }
.tabs_list::after { width: 80px; background: -moz-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 40%, rgba(255, 255, 255, 1) 99%); background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 40%, rgba(255, 255, 255, 1) 99%); background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 40%, rgba(255, 255, 255, 1) 99%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff', GradientType=1); right: 0; opacity: 1; }

.tabs_list_left::before { left: 0; opacity: 1; }
.tabs_list_right::after { right: 0; opacity: 1; }
.tab_wrapper { position: absolute; width: 43px; height: 100%; text-align: center; top: 0; right: 0; z-index: 1; }
.tab_wrapper[data-action="true"] { right: 0; opacity: 1; transition: opacity .3s; }
.tab_wrapper:hover { z-index: 2; }

.tab_menu { width: 100%; height: 100%; background: transparent url(ah-tab-overflow-menu.svg) 50% no-repeat; background-size: 18px; display: inline-block; border: 0; opacity: .7; transition: opacity .3s; cursor: pointer; }
.tab_wrapper:hover .tab_menu { opacity: 1; }

.tab_menu_list { position: absolute; max-width: 290px; background-color: #fff; border: 1px solid #e9e9e9; box-shadow: 0px 3px 7px 0px rgba(0, 0, 0, 0.09); text-align: left; list-style: none; top: -10000%; right: 0; opacity: 0; transition: opacity .3s; }
.tab_menu_list::after { position: absolute; width: 0; height: 0; border: 7px solid transparent; border-bottom-color: #fff; display: block; top: -14px; right: 14px; content: " "; }
.tab_menu_list::before { position: absolute; width: 0; height: 0; border: 8px solid transparent; border-bottom-color: #cdcdcd; display: block; top: -16px; right: 13px; content: " "; }
.tab_wrapper:hover .tab_menu_list { top: 99%; padding: 10px 0; opacity: 1; }
.tab_menu_list:hover { display: block; }

.tabs_item { cursor: pointer; display: inline-block; transition: all .3s; text-decoration: none; }
.tabs_list>a { position: relative; padding: .8rem .7rem; border: 1px transparent solid; display: inline-block; line-height: 1; opacity: .7; }
.tabs_list>a:first-child { border-left: 0; }
.tabs_list >.tabs_item[data-action="true"] { background: #fff; border-color: rgb(206 212 218 / 70%); border-bottom-color: #fff; box-shadow: 0 0 0.875rem 0 rgb(53 64 82 / 10%); opacity: 1; }
.tab_menu_list>.tabs_item { overflow: hidden; padding: .5rem .7rem; border-left: 3px solid transparent; display: block; line-height: 1; white-space: nowrap; }
.tab_menu_list>.tabs_item:hover { border-left-color: #8b8b8b; }
.tab_menu_list>.tabs_item[data-action="true"] { border-left-color: #215393; }

.tab_content { overflow: hidden; height: 0; opacity: 0; }
.tab_content[data-action="true"] { overflow: visible; height: auto; opacity: 1; }

@media (min-width: 768px) {
	.tabs_list::before { width: 50px; }
}