/** - Global Tabs
*   - Components Included
*   1. ****Color Page Tabs
*   2. ****Extra Tabs: Colour Tabs
**/


/**
******************************** 1) Color Page Tabs ******************************************
*/

.tabs {
    list-style: outside none none;
    margin: 0 0 30px;
    padding: 0;
    display: inherit;
}

.tabs li {
    background: none;
    color: #222;
    display: inline-block;
    padding: 5px 10px;
    cursor: pointer;
}

.tabs li.current {
    background: #ededed;
    color: #222;
}

.tabs button {
    background: none;
    color: #222;
    display: inline-block;
    padding: 5px 10px;
    cursor: pointer;
}

.tabs button.active {
    background: #ededed;
    color: #222;
}

.tab-content {
    display: none;
}

.tab-content.current {
    display: inherit;
}

.tabs .tab-link {
    background-color: #fff;
    border-radius: 3px;
    box-shadow: 0 0 5px #f2f0f0;
    color: #333;
    font-size: 16px;
    text-align: center;
}

.tabs .tab-link.current,
.tabs .tab-link:hover {
    background-color: #2FC48D;
    color: #fff;
}

.tabs .tab-link.current:after {
    top: 100%;
    left: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 21px;
    position: absolute;
    pointer-events: none;
    border-color: rgba(47, 196, 141, 0);
    border-top-color: #2fc48d;
    border-width: 10px;
    margin-left: -10px;
}

.tabs .tab-link.current {
    background: #2fc48d none repeat scroll 0 0 !important;
    color: #fff !important;
}

.tabs li:last-child {
    border-radius: 0 3px 3px 0 !important;
}

.tabs li:first-child {
    border-radius: 3px 0 0 3px !important;
}

.tabs button:last-child {
    border-radius: 0 3px 3px 0 !important;
}

.tabs button:first-child {
    border-radius: 3px 0 0 3px !important;
}


/****Custom Tabs*****/


/** TABS***/

.custom-tab-holder {
    margin-top: -4px;
}

.custom-tabs {
    border-bottom: none;
    margin-left: 2px;
}

.custom-tabs li {
    width: 33.5%;
    margin-left: -2px;
}

.custom-tabs li a {
    color: #666;
    background-color: #fff;
    border: none;
    border-bottom-color: transparent;
    cursor: pointer;
    font-size: 20px;
    padding-left: 14%;
    border-radius: 0px;
}

.custom-tabs li a:hover {
    color: #fff;
    background-color: #2fc48d !important;
    border: none;
    cursor: pointer;
}

.custom-tabs li.active a {
    color: #fff !important;
    cursor: default;
    background-color: #2fc48d !important;
    border: none;
    border-bottom-color: transparent;
}

.custom-tabs li.active .trnMark {
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 10px solid #2fc48d;
    margin: 0 auto;
}

header .navbar .dropdown-menu>li>a {
    padding: 0 !important;
}

header .navbar .dropdown .dropdown-menu li.active {
    background-color: #fcfafa;
}

header .navbar .dropdown .dropdown-menu li.active a {
    background: none;
}

.loginout a {
    color: #666 !important;
}

@media screen and (min-width: 768px) {
    .tabs {
        margin: 0 0 25px;
    }
    .tabs li {
        padding: 18px 10px;
        font-size: 18px;
    }
    ul.tabs button {
        padding: 18px 10px;
        font-size: 18px;
    }
}

@media screen and (max-width: 991px) and (min-width: 768px) {
    header .navbar .dropdown .dropdown-menu {
        margin-top: -28px;
        /* to do check the value */
        margin-left: -125px;
    }
}


/**************Extra Tabs************/

#color-tabs {
    margin-top: 30px;
    float: left;
    width: 100%;
    margin-bottom: 25px;
}