.tab-wrapper {
    margin-bottom: 0.5rem;
}
.tabgroup {
    padding:0;
}

.tabgroup > div {
    display: none;
}
.tabcontent {
    display: none;
    height: auto;
    /*
    max-height: 30rem;
    overflow-x: hidden;
    overflow-y: auto;
    */
    padding: 0.25rem;
}

.tab li a { color: inherit; }
.tab li.active a { color: inherit; }
.tab a:hover { text-decoration: none;  }


/* TAB2 Different width tabs */

    .tab::before,
    .tab::after
    {
        display: table;
        content: " ";
    }

    .tab::after
    {
        clear: both;
    }    
    .tab {
        /* text-align: center; */
        text-align: left;
        font-size: 0;
        background-color: transparent !important;
        background-image: none !important;
    }
    .tab > div {
        position:relative;
        min-height: 1px;
        display: inline-block;
        cursor: pointer;
        /*margin: 0 0 1rem 0;*/
        margin-bottom: 0.5rem;
        /*overflow: hidden;*/
        font-weight: 800;
        font-size: 0.75rem;
        text-transform: uppercase;
        cursor: pointer;
        /*padding: 1.25rem 0.5rem 0 0.5rem;*/
        padding: 1rem 0.25rem 0 0.25rem;
        /* color: #ffffff; */
        /* color: rgba(255,255,255, 1); */
        background-image: none !important;
        
        transition: opacity 0.2s ease-in 0s;
        
        border-width: 2px;
        border-style: solid;
        border-color: transparent;
        
        opacity: 0.7;
        vertical-align: top;
    }
    body.txt-bright .tab > div {
        /*text-shadow: 0.1rem 0.1rem 0.1rem rgba(0,0,0,0.2);*/
        text-shadow: 0.1rem 0.1rem 0 rgba(0,0,0,0.2);
    }
    body.txt-dark .tab > div {
        /*text-shadow: 0.1rem 0.1rem 0.1rem rgba(255,255,255,0.2);*/
        text-shadow: 0.1rem 0.1rem 0 rgba(255,255,255,0.2);
    }

    .tab.left > div {
        float: left;
    }
    
    [dir='rtl'] .tab.left > div {
        float: right;
    }    
    
    .tab > div:hover,
    .tab > div.active {
        opacity: 1;
    }
    .tab > div::before {
        content: ''; 
        line-height: 0.25rem;
        position: absolute;
        display: inline-block;
        /*
        border-bottom-left-radius: 0.5rem;
        border-bottom-right-radius: 0.5rem;
        */
        border-radius: 0;
        width:100%;
        top:0;
        left:0;
        font-size:0;
        height: 0.25rem;
        transition: all 0.2s ease-in 0s;
  
        border-width: 1px;
        border-style: solid;
        border-color: inherit;
        
        background-color: #ffffff;
    }
    .tab > div.active::before {
        height: 0.75rem;
        /* box-shadow: 0.25rem 0.25rem 0 rgba(0,0,0,0.2); */
    }
    
/* egész tab színezése */    
    .tab.blue:not(.no-txt-color) > div {
        color: #00aff2;
        color: rgba(0, 175, 242, 1); 
    }
    .tab.blue > div::before {
        background-color: #00aff2;
        background-color: rgba(0, 175, 242, 1); 
        border-color: #fff;
    }

    .tab.red:not(.no-txt-color) > div {
        color: #F54A52;
        color: rgba(245, 74, 82, 1);
    }
    .tab.red > div::before {
        background-color: #F54A52;
        background-color: rgba(245, 74, 82, 1); 
    }
    
    .tab.green:not(.no-txt-color) > div {
        color: #26db31;
        color: rgba(38, 219, 49, 1); 
    }
    .tab.green > div::before {
        background-color: #26db31;
        background-color: rgba(38, 219, 49, 1); 
        border-color: #fff;
    }
    
    .tab.gray:not(.no-txt-color) > div {
        color: #808080;
        color: rgba(128,128,128, 1); 
    }
    .tab.gray > div::before {
        background-color: #808080;
        background-color: rgba(128,128,128, 1); 
        border-color: #fff;
    }
    
    .tab.orange:not(.no-txt-color) > div {
        color: #ff9700;
        color: rgba(255, 151, 0, 1); 
    }
    .tab.orange > div::before {
        background-color: #ff9700;
        background-color: rgba(255, 151, 0, 1); 
        border-color: #fff;
    }
    
    .tab.yellow:not(.no-txt-color) > div {
        color: #ffd814;
        color: rgba(255, 216, 20, 1); 
    }
    .tab.yellow > div::before {
        background-color: #ffd814;
        background-color: rgba(255, 216, 20, 1); 
        border-color: #fff;
    }
    
    .tab.cyan:not(.no-txt-color) > div {
        color: #00ffff;
        color: rgba(0, 255, 255, 1); 
    }
    .tab.cyan > div::before {
        background-color: #00ffff;
        background-color: rgba(0, 255, 255, 1); 
        border-color: #fff;
    }
    
    .tab.akh:not(.no-txt-color) > div {
        color: #333333;
        color: rgba(51, 51, 51, 1); 
    }
    .tab.akh > div::before {
        background-color: #ffd814;
        background-color: rgba(255, 216, 20, 1); 
        background-image: none !important;
        border-color: #fff;
    }
    
/* tabok külön színezése...blue, red, green, gray, orange, yellow, cyan */   
    .tab > div.white:not(.no-txt-color) {
        color: #ffffff;
        color: rgba(255, 255, 255, 1); 
    }
    .tab > div.white::before {
        background-color: #ffffff;
        background-color: rgba(255, 255, 255, 1); 
        background-image: none !important;
        border-color: #fff;
    }

    .tab > div.blue:not(.no-txt-color) {
        color: #00aff2;
        color: rgba(0, 175, 242, 1); 
    }
    .tab > div.blue::before {
        background-color: #00aff2;
        background-color: rgba(0, 175, 242, 1); 
        background-image: none !important;
        border-color: #fff;
    }

    .tab > div.red:not(.no-txt-color) {
        color: #F54A52;
        color: rgba(245, 74, 82, 1);
    }
    .tab > div.red::before {
        background-color: #F54A52;
        background-color: rgba(245, 74, 82, 1); 
        background-image: none !important;
        border-color: #fff;
    }
    
    .tab > div.green:not(.no-txt-color) {
        color: #26db31;
        color: rgba(38, 219, 49, 1); 
    }
    .tab > div.green::before {
        background-color: #26db31;
        background-color: rgba(38, 219, 49, 1); 
        background-image: none !important;
        border-color: #fff;
    }
    
    .tab > div.gray:not(.no-txt-color) {
        color: #808080;
        color: rgba(128,128,128, 1); 
    }
    .tab > div.gray::before {
        background-color: #808080;
        background-color: rgba(128,128,128, 1); 
        background-image: none !important;
        border-color: #fff;
    }
    
    .tab > div.orange:not(.no-txt-color) {
        color: #ff9700;
        color: rgba(255, 151, 0, 1); 
    }
    .tab > div.orange::before {
        background-color: #ff9700;
        background-color: rgba(255, 151, 0, 1); 
        background-image: none !important;
    }
    
    .tab > div.yellow:not(.no-txt-color) {
        color: #ffd814;
        color: rgba(255, 216, 20, 1); 
    }
    .tab > div.yellow::before {
        background-color: #ffd814;
        background-color: rgba(255, 216, 20, 1); 
        background-image: none !important;
        border-color: #fff;
    }
    
    .tab > div.cyan:not(.no-txt-color) {
        color: #00ffff;
        color: rgba(0, 255, 255, 1); 
    }
    .tab > div.cyan::before {
        background-color: #00ffff;
        background-color: rgba(0, 255, 255, 1); 
        background-image: none !important;
        border-color: #fff;
    }
    
    .tab > div.akh:not(.no-txt-color) {
        color: #333333;
        color: rgba(51, 51, 51, 1); 
    }
    .tab > div.akh::before {
        background-color: #ffd814;
        background-color: rgba(255, 216, 20, 1); 
        background-image: none !important;
        border-color: #fff;
    }
    
    /*
    @media (max-width:768px)
    {
        .tab > div {
            font-size: 1.5rem;
        }
    }
    */
    
body.txt-bright :not(.show-select-disabled).tabgroup .tabcontent:hover {
    background-color: rgba(0,0,0, 0.5);
    box-shadow: 0 0 0.5rem rgba(0,0,0, 0.5);
}
body.txt-dark :not(.show-select-disabled).tabgroup .tabcontent:hover {
    background-color: rgba(255,255,255, 0.5);
    box-shadow: 0 0 0.5rem rgba(255,255,255, 0.5);
}
    
/* toggle cuccok */

.js--toggle-open {
    display: none;
    padding: 0.5rem;
}

.js--toggle-content {
    display: none;
}

.js--toggle-button {
    cursor: pointer;
    transition: text-shadow 0.2s linear 0s;
}


.js--toggle-button:hover:before,
.js--client-info-btn:hover {
    text-shadow: 0 0 10px #ffd814,
    0 0 11px #ffd814,
    0 0 12px #ffd814;
}

.js--toggle-button.on:before {
    text-shadow: 0 0 10px #ffd814,
    0 0 11px #ffd814,
    0 0 12px #ffd814,
    0 0 13px #ffd814,
    0 0 14px #ffd814,
    0 0 15px #ffd814;
}

.js--btn-toggle-open::before,
.js--btn-toggle-open.off::before,
.js--toggle-button::before,
.js--toggle-button.off::before 
{
    font-family: FontAwesome;
    content: '\f204'; /*toggle-off */
}
.js--btn-toggle-open.on::before,
.js--toggle-button.on::before 
{
    font-family: FontAwesome;
    content: '\f205'; /*toggle-on */
}

.js--toggle-button.toggle-2x::before {
    font-size: 2em;
}
 
.js--toggle-button.left::before {
    float: right;
}

.js--toggle-button.left::before {
    float: left;
}