/*
Magic Tabs by John Liddiard (aka JohntheFish)
www.jlunderwater.co.uk
This software is licensed under the terms described in the concrete5.org marketplace.
Please find the add-on there for the latest license copy.

Create a tabbed interface simply by inserting magic tabs blocks into the page
*/


div.jl_magic_tabs_bootstrap_vertical_left.jl_magic_tabs_screen {
    margin-right: 5px;
    /* The line across the right of the tabs */
    border-right: 1px solid #e6e6e6;
    float: left;

    /* The width of the tabs. The tab body automatically takes up any remaining width */
    width: 160px;
}

.jl_magic_tabs_controls {
    position: relative;
}

.jl_magic_tabs_bootstrap_vertical_left.jl_magic_tabs_screen.jl_magic_tabs ul.nav-tabs.nav {
    clear: both;
    list-style: none;
    margin-right: 0px;
    margin-bottom: 5px;
    margin-top: 5px;
    display: flex;
    flex-wrap: wrap;
    border-bottom: none !important;
}

.jl_magic_tabs_bootstrap_vertical_left.jl_magic_tabs_screen.jl_magic_tabs ul.nav-tabs.nav li {
    list-style-type: none;
    float: left;
    margin-top: 0px;
    /* need this to kill the browser default indent on li elements*/
    margin-left: 0px;
    margin-bottom: 3px;
    display: inline-grid;
    width: 100%;
	
	 border-bottom-left-radius: 5px;
	  border-top-left-radius: 15px;
	   border-top-right-radius: 0px;
	    border-bottom-right-radius: 0px;
}



.jl_magic_tabs_bootstrap_vertical_left.jl_magic_tabs_screen.jl_magic_tabs ul.nav-tabs.nav li a {
    border-right-color: transparent;

    -webkit-bottom-right-border-radius: 0;
    -moz-bottom-right-border-radius: 0;
    border-bottom-right-radius: 0;

    -webkit-top-right-border-radius: 0;
    -moz-top-right-border-radius: 0;
    border-top-right-radius: 0;

    height: auto;
    text-align: right;
    padding-left: 12px;
    padding-right: 12px;

    /*
     * These few styles may need some adjusting to match colour and radius to the theme
     * because they are replacing theme styles
     */
    -webkit-bottom-left-border-radius: 4px;
    -moz-bottom-left-border-radius: 4px;
    border-bottom-left-radius: 4px;
	color:#fff;
	 border-bottom-left-radius: 5px;
	  border-top-left-radius: 15px;
	   border-top-right-radius: 0px;
	    border-bottom-right-radius: 0px;
}

.jl_magic_tabs_bootstrap_vertical_left.jl_magic_tabs_screen.jl_magic_tabs ul.nav-tabs.nav li a.active {
    /*
     * This style may need some adjusting to match colour and radius to the theme
     * because they are replacing theme styles
     */
    border-bottom-color:#ddd;
	color:#000;
	background-color:#fff;
	
}
.jl_magic_tabs_bootstrap_vertical_left.jl_magic_tabs_screen.jl_magic_tabs ul.nav-tabs.nav li a:hover {
    /*
     * This style may need some adjusting to match colour and radius to the theme
     * because they are replacing theme styles
     */
    border-bottom-color:#ddd;
	color:#000;
	background-color:#f2f2f2;
	
}
/*
http://stackoverflow.com/questions/1260122/expand-div-to-take-remaining-width
*/
div.jl_magic_tabs_bootstrap_vertical_left_body {
    overflow: hidden;
    padding-top: 5px
}

/*
Accordion styles
*/

/* Fill whole width */
.jl_magic_tabs_bootstrap_vertical_left.jl_magic_tabs_controls.jl_magic_tabs.jl_magic_tabs_accordion > ul.nav-tabs.nav.jl_magic_tabs > li {
    width: 100%;
}

/* Cursor so to indicate click to collapse */
.jl_magic_tabs_bootstrap_vertical_left.jl_magic_tabs_controls.jl_magic_tabs.jl_magic_tabs_accordion > ul.nav-tabs.nav.jl_magic_tabs > li.active > a.active {
    cursor: pointer;
}

.jl_magic_tabs_bootstrap_vertical_left.jl_magic_tabs_controls.jl_magic_tabs.jl_magic_tabs_accordion.jl_magic_tabs_level_1 > ul > li,
.jl_magic_tabs_bootstrap_vertical_left.jl_magic_tabs_controls.jl_magic_tabs.jl_magic_tabs_accordion.jl_magic_tabs_level_2 > ul > li {
    padding-right: 20px;
    padding-left: 20px;
}

/* + to indicate expandable */
.jl_magic_tabs_bootstrap_vertical_left.jl_magic_tabs_controls.jl_magic_tabs.jl_magic_tabs_accordion > ul.nav-tabs.nav.jl_magic_tabs > li > a:after {
    content: "+";
    font-weight: 900;
    float: right;
    text-decoration: none;
    font-size: 140%;
}

/* - to indicate collapsible */
.jl_magic_tabs_bootstrap_vertical_left.jl_magic_tabs_controls.jl_magic_tabs.jl_magic_tabs_accordion > ul.nav-tabs.nav.jl_magic_tabs > li > a.active:after {
    content: "-";
}
.jl_magic_tabs_tab_icon_left .fa-minus::before{
position: absolute;
top: 46%;
left: 10px;
}
.jl_magic_tabs_tab_icon_left .fa-plus::before{
position: absolute;
top: 46%;
left: 10px;
}