/*
	Support for tabbed textual content in SVG-FTG

	Author:		A.C.Proctor	20-Nov-2021
*/

/* General titles */
h2.tb-title {
    text-align: center;
    vertical-align: middle;
    color: blue;
}


/* Style the tab area */
.tb-tabList {
    overflow: hidden;
    border: none;
}

/* Style the buttons inside the tab area */
.tb-tabList button {
    background-color: lightsteelblue;
    border-radius: 10px 10px 0 0;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
    font-size: 17px;
    margin-right: 1px;
}

/* Change background of tabs on hover */
.tb-tabList button:hover {
    background-color: #93aed2;
}

/* Highlight the active tab */
.tb-tabList button.tb-active {
    background-color: cornflowerblue;
}

/* Style the tabbed content */
.tb-tabContent {
    display: none;
    padding: 6px 12px;
    border: 1px solid cornflowerblue;
}

/* Style the close button */
.tb-closeTab {
    float: right;
    border: 2px solid cornflowerblue;;
    border-radius: 4px; 
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    background-color: rgba(230, 230, 230, 0.7);
    color: red;
    font-weight: bold;
    margin: 0;
    padding: 0;
    z-index: 20;
    cursor: pointer;
}

.tb-closeTab:hover {
    cursor: pointer;
}


/* Variations of the above CSS for when we want to flatten-out the tabs into a sequential set */
.tb-notab .tb-tabList {
    display: none;
}
.tb-notab .tb-closeTab {
    display: none;
}
.tb-notab .tb-tabContent {
    border: none;
    display: block;
    padding: 0;
}
.tb-notab .tb-title {
    text-align: left;
}
.tb-notab .tb-title:before {
  content:"Tab: ";
}