.tabwrapper {
    
}
 
.tab {
    position: relative;
    overflow: hidden;
    margin: 0;
    padding: 0;
    border-bottom: $tabBorderSize solid $tabBorderColor;
}

.tab li {
    display: table-cell;
    position: relative;
}

.tablink {
    display: table-cell;
    text-decoration: none;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 10px;
    //font-size: 17px;
    border-radius: 0px;
    //border-bottom: $tabBorderSize solid $tabBorderColor;
    white-space: nowrap;
    color: $componentFontColor;
}

.tablink span {}

.activetab {
    border-bottom: $tabBorderSize+2 solid $tabActiveBorder !important;
}

.disabled-tab {
    cursor: not-allowed !important;
    opacity: 0.5;
}

.tabnavigation {
    padding: 10px 16px;
    cursor: pointer;
}

.tabcontent {
    width: inherit;
    position: relative;
    // vertical-align: top !important;
    // padding: 10px 5px;
    color: $tabColor;
}



.tabcontent::-webkit-scrollbar-track
{
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}

.tabcontent::-webkit-scrollbar
{
  width: 6px ;

  height: 6px;
}

/**VERTICAL TABS**/

.verticalnavtab {
    position: relative;
    overflow-x: hidden;
    overflow-y: auto;
    //  border-right: $tabActiveBorderSize solid $tabActiveBorder;
}

.verticalnavtab ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.verticalnavtab ul li {
    // padding-left: 20px;
}

.verticalnavtab .defaultnode {
    cursor: pointer;
    //background-color: $tabBGColor;
    color: $tabColor;
    padding: 10px;
    // width: 100%-------------for close to come on right side
}

.verticalnavtab .defaultnode:hover {
    //background-color: $tabActiveBGColor;
    font-weight: bold;
    // width: 100%;
}

.verticalnavtab .leftactivetab {
    //background-color: $tabActiveBGColor;
    font-weight: bold;
    //color : $tabActiveColor;
    // width: 100%;-------for close to come on right side
    border-right: $tabActiveBorderSize solid $tabActiveBorder;
}
.tabposition-top{
    display:table-cell;
    vertical-align: top; 
 
 }
 
 .tabposition-bottom{
     display:table-cell;
     vertical-align: bottom; 
 }
.verticalnavtab .rightactivetab {
    //background-color: $tabActiveBGColor;
    //background-color: $tabActiveBGColor;
    font-weight: bold;
    // width: 100%;
    //color : $tabActiveColor;
    border-left: $tabActiveBorderSize solid $tabActiveBorder;
}

.verticalnavtab-left {
    font-weight: bold;
    width: max-content;
    //border-right: $tabBorderSize solid $tabBorderColor;
}

.verticalnavtab-right {
    font-weight: bold;
    width: max-content;
    //  border-left: $tabBorderSize solid $tabBorderColor;
}

.verticalalign-tableft {
    // vertical-align: top !important;
    border-right: $tabBorderSize solid $tabBorderColor !important;
}

.verticalalign-tabright {
    // vertical-align: top !important;
    border-left: $tabBorderSize solid $tabBorderColor !important;
}

.verticalalign-tabcontent {
    vertical-align: top !important;
}

.float-right {
    float: right;
}

.float-left {
    float: left;
}

.equally-align-tabs {
    display: flex;
    width: 100%;
}

.float-center {
    display: flex;
    justify-content: center;
    align-content: center;
}

.activecolortab {
    border-bottom: 3px solid $tabActiveBGColor!important;
}

.activebgcolortab{
    background-color: $tabActiveBGColor;
}

.bottomTab {
    width: 100%;
    position: absolute !important;
    bottom: 0%;
    border-top: 1px solid #ced4da;
    min-width: 760px;
    max-width: 980px;
}

.bottomActivetab {
    border-bottom: $tabBorderSize+2 solid $tabActiveBorder !important;
}

.activebottomcolortab {
    border-top: 3px solid !important;
}

//Position of tabs at right most
.tabposition-right {
    display: inline-flex !important;
    width: 100%;
    justify-content: space-between;
}

//Position of tabs at left most
.tabposition-left {
    display: inline-flex !important;
    width: 100%;
    justify-content: flex-start;
}

.tablink .inputgroup * {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

.tablink amexio-tab-action1 {
    padding-left: 5%;
    display: inline-block;
}

.tabnavigation-bottom-right {
    bottom: 3%;
    z-index: 3;
    position: absolute;
    right: 16px
}

.tabnavigation-bottom-left {
    bottom: 3%;
    z-index: 3;
    position: absolute;
}

//Right Tab layout:

.righttable {
    // padding: 5px;
}

.righttable .righttablerow {
}

.righttable .righttablerow .righttablecol {
    // padding-right: 5px;
    // padding-left: 5px;
    vertical-align: middle;
}
.tabposition-right-top{
    display:table-cell;
    vertical-align: top; 
 
 }
 .tabposition-right-bottom{
     display:table-cell;
     vertical-align: bottom; 
 }


#tabclass {
    position: absolute;
    margin: 0;
    padding: 0;
    list-style: none;
    transform-origin:top left; 
    transform: rotate(-90deg) ;   
    left:0px;  



}
#tabclass li {
    float: right;
    width: auto;
    padding: 1px;
      display: block; 
     
}


.verticalnavtab .leftactiverotatetab {
  font-weight: bold;
    //color : $tabActiveColor;
    // width: 100%;-------for close to come on right side
    border-bottom: $tabActiveBorderSize solid $tabActiveBorder;
}

/* right align rotate tab */

#rightclass {
    width:max-content;
     position: absolute;
    margin: 0;
    padding: 0;
    list-style: none; 
   transform-origin:0 0; 
              transform: rotate(90deg) ;   
              top:0px;
              left:46px;


}
#rightclass li {
     float: left;
    width: auto;
    padding: 1px;
       display: block;   
     
}
  
.righttabdefaultnode {
        position: relative;
    cursor: pointer;
    /* color: $tabColor; */
    padding: 10px;
}

.defaultnode:hover {
    /* font-weight: bold; */
}

.tabposition-rightrotate-top{
    display: block;
    vertical-align: top; 
}

.tabposition-rightrotate-bottom{
    display: block;
    vertical-align: top; 
}

.rightactivetabrotate{
    font-weight: bold;
    border-bottom: $tabActiveBorderSize solid $tabActiveBorder;
}

.verticalalign-rotatetabright{
    border-left: $tabBorderSize solid $tabBorderColor !important;
    position:relative;
    left:97%;
}