/*
Author: Shiraj Rafeek (AKA Sheej)
Purpose: Tab design
*/
/*START Column Sections */
    .tabcolumn {
        float: left;
        width: 33.3%;
        margin-bottom: 16px;
        padding: 10px 10px;
    }
    .tabBanner {
        float: left;
        width: 100%;
        margin-bottom: 16px;
        padding: 10px 10px;
        background-color: black;
        color: white;
    }
    /*Style the tab content */
    .tabvcontent {
        font-family: "fontRegularEN","fontRegularENw", Arial, Helvetica, sans-serif;
        float: left;
        padding: 0px 10px 0px;
        width: 100%;
        border-left: none;
        height: 100%;
        margin-left:5px;
    }
/*END Responsive Sections */


/*START - Tool Tips*/
    /*Tool tip float left and display right */
    .tooltip {
        font-family: "fontRegularEN","fontRegularENw", Arial, Helvetica, sans-serif;
        position: relative;
        display: block;
        width:auto;
        border-bottom: 1px dotted black;
    }
    /*Display tool tip test to right when tool tip float left*/
    .tooltip .tooltiptextl {
        visibility: hidden;
        width: 100%;
        background-color: black;
        color: #fff;
        text-align: center;
        padding: 5px;
        
        /* Position the tooltip */
        position: absolute;
        z-index: 1;
        bottom: -20px;
        left: 100%;
    }
    /*Display tool tip test to left when tool tip float right*/
    .tooltip .tooltiptextr {
        visibility: hidden;
        width: auto;
        background-color: black;
        color: #fff;
        text-align: center;
        padding: 2px;
        
        /* Position the tooltip */
        position: absolute;
        z-index: 1;
        top: -10px;
        right: 120%;
    }

    .tooltip:hover .tooltiptextl, .tooltip:hover .tooltiptextr {
        visibility: visible;
    }
    
/*END - Tool Tips*/

/*START - vertical Tabs*/
    .tab-frame-col-left-20 {
        float: left;
        width: 20px;
        height: auto;
    }
    .tab-frame-col-center-60 {
        float: left;
        width: 96%;
        height: auto;
    }
    .tab-frame-col--right-20 {
        float: right;
        width: 20px;
        height: auto;
    }
    /* Style the tab horizontal */
    .tabv {
        float: left;
        border: 1px solid #ccc;
        background-color: #f1f1f1;
        width: 25px;
        height: auto;
    }      

    /* Style the buttons inside the tab */
    .tabv button{
        display: block;
        background-color: inherit;
        color: #0D519F;
        padding: 9px 2px;
        width: 100%;
        border: none;
        outline: none;
        text-align: left;
        cursor: pointer;
        transition: 0.3s;
        font-size: 17px;
    }
    
    /* Change background color of buttons on hover */
    .tabv button:hover, .tab-profile button:hover {
        background-color: #ddd;
    }
    
    /* Create an active/current "tab button" class */
    .tabv button.active, .tab-profile button.active {
        background-color: #ccc7c7;
    }  

    .tab-profile {
        float: left;
        border: 1px solid #ccc;
        background-color: #f1f1f1;
        width: 30px;
    } 
    .tab-profile button {
        display: block;
        background-color: inherit;
        color: #0D519F;
        padding: 9px 2px 5px 2px ;
        width: 100%;
        height:80px;
        border: none;
        outline: none;
        text-align: left;
        cursor: pointer;
        transition: 0.3s;
        font-size: 17px;
    } 
/* END - Horizontal Tabs */

/* START - Tab used for process flows with step indicator */

     /* Hide all steps by default: */
     .tab {
        display: none;
        font-size: 20px;
        letter-spacing: -1.2px;
        word-spacing: 3px;
        color: #333333;
        font-weight: 600;
        text-decoration: none;
        font-style: normal;
        font-variant: small-caps;
        text-transform: none;
        padding: 10px 5px;
    }
    
    /* Make circles that indicate the steps of the form: */
    .step {
        height: 30px;
        width: 30px;
        margin: 0 5px;
        background-color: #eddd;
        color: #000;
        border:none;  
        border-radius: 50%;
        display: inline-block;
        opacity: 0.5;
        cursor:pointer;
        font-family: "fontRegularEN","fontRegularENw", Arial, Helvetica, sans-serif;
    }
    .step:hover {
        background-color: #555;;
        color: #ddd;
    }
    .step.active {
        opacity: 0.5;
        color: #000;

    }
    /* Mark the steps that are finished and valid: */
    .step.finish {
        background-color: #4CAF50;
        color: #000;
    }

/* END - Tab used for process flows with step indicator */