Divi Tabs Styling Vertical

divi_tabs_vertical_style.css

/* Divi Vertical Tabs 1 
 * Original code from https://diviextended.com/how-to-create-divi-vertical-tabs/
 */

.vertical-tabs1 {
    border: none;
}

.vertical-tabs1 ul.et_pb_tabs_controls {
    float: left;
    width: 30%;
    margin-right: 3%;
    background: transparent;
}

.vertical-tabs1 ul.et_pb_tabs_controls:after {
    content: none;
}

.vertical-tabs1 .et_pb_tabs_controls li {
    width: 100%;
    border-right: none !important;
    border-left: 5px solid transparent;
    background: #f4f4f4;
}

.vertical-tabs1 .et_pb_tabs_controls li.et_pb_tab_active {
    border-left: 5px solid #14C05D !important;
    background: #ffffff;
}

.vertical-tabs1 .et_pb_tabs_controls li a {
    padding: 40px;
}

.vertical-tabs1 .et_pb_tabs_controls li.et_pb_tab_active a {
    color: #14C05D !important;
}

.vertical-tabs1 .et_pb_tab {
    padding: 0;
}

.vertical-tabs1 .et_pb_tab_content {
    display: flex;
    flex-wrap: wrap;
}

@media(max-width:767px) {    
    .vertical-tabs1 ul.et_pb_tabs_controls {
        width: 100%;
        margin-bottom: 30px;
        margin-right: 0;
    }
    
    .vertical-tabs1 .et_pb_tabs_controls li {
        border-bottom: none;
    }
    
    .vertical-tabs1 .et_pb_tab {
        padding: 0;
    }
  
    .vertical-tabs1 .et_pb_tab_content {
        display: block;
    }    
}

/* Divi Vertical Tabs 2 */

.vertical-tabs2 {
    border: none;
}

.vertical-tabs2 ul.et_pb_tabs_controls {
    float: left;
    width: 30%;
    margin-right: 3%;
    background: transparent;
}

.vertical-tabs2 ul.et_pb_tabs_controls:after {
    content: none;
}

.vertical-tabs2 .et_pb_tabs_controls li {
    width: 100%;
    border-right: none;
    border: 2px solid transparent;
    background: #f4f4f4;
}

.vertical-tabs2 .et_pb_tabs_controls li.et_pb_tab_active {
    border: 2px solid #FF5733;
    background: #FF5733;
}

.vertical-tabs2 .et_pb_tabs_controls li.et_pb_tab_active:after {
    top: 50%;
    right: -42px;
    border: solid transparent;
    content: " ";
    position: absolute;
    border-color: transparent;
    border-left-color: #FF5733;
    border-width: 20px;
    margin-top: -20px;
}

.vertical-tabs2 .et_pb_tabs_controls li a {
    padding: 24px;
}

.vertical-tabs2 .et_pb_tabs_controls li.et_pb_tab_active a {
    color: #ffffff !important;
}

.vertical-tabs2 .et_pb_tab {
    padding: 0;
}

.vertical-tabs2 .et_pb_tab_content {
    display: flex;
    flex-wrap: wrap;
}

@media(max-width:767px) {    
    .vertical-tabs2 ul.et_pb_tabs_controls {
        width: 100%;
        margin-bottom: 30px;
        margin-right: 0;
    }
    
    .vertical-tabs2 .et_pb_tabs_controls li {
        border-bottom: none;
    }
    
    .vertical-tabs2 .et_pb_tab {
        padding: 0;
    }
  
    .vertical-tabs2 .et_pb_tab_content {
        display: block;
    }    
}

/* Divi Vertical Tabs 3 */

.vertical-tabs3 {
    border: none;
}

.vertical-tabs3 ul.et_pb_tabs_controls {
    float: left;
    width: 30%;
    margin-right: 3%;
    background: transparent;
}

.vertical-tabs3 ul.et_pb_tabs_controls:after {
    content: none;
}

.vertical-tabs3 .et_pb_tabs_controls li {
    width: 100%;
    border-right: none;
    background: rgba(244, 244, 244, 0.5);
    margin-bottom: 10px;
}

.vertical-tabs3 .et_pb_tabs_controls li.et_pb_tab_active {
    background: #ececec;
}

.vertical-tabs3 .et_pb_tabs_controls li a {
    padding: 10px;
}

.vertical-tabs3 .et_pb_tabs_controls li.et_pb_tab_active a {
    color: #3339ff !important;
}

.vertical-tabs3 .et_pb_tabs_controls li a:before {
    font-family: ETmodules;
    padding-right: 5px;
}

.vertical-tabs3 .et_pb_tabs_controls li:nth-child(1) a:before {
    content: '\e104';
}

.vertical-tabs3 .et_pb_tabs_controls li:nth-child(2) a:before {
    content: '\e0e9';
}

.vertical-tabs3 .et_pb_tabs_controls li:nth-child(3) a:before {
    content: '\e109';
}

.vertical-tabs3 .et_pb_tabs_controls li:nth-child(4) a:before {
    content: '\e0ec';
}

.vertical-tabs3 .et_pb_tab {
    padding: 0;
}

.vertical-tabs3 .et_pb_tab_content {
    background: #ececec;
    display: flex;
    flex-wrap: wrap;
    padding: 20px;
}


@media(max-width:767px) {    
    .vertical-tabs3 ul.et_pb_tabs_controls {
        width: 100%;
        margin-bottom: 30px;
        margin-right: 0;
    }
    
    .vertical-tabs3 .et_pb_tabs_controls li {
        border-bottom: none;
    }
    
    .vertical-tabs3 .et_pb_tab {
        padding: 0;
    }    
}

/* Divi Vertical Tabs 4 */

.vertical-tabs4 {
    border: none;
}

.vertical-tabs4 ul.et_pb_tabs_controls {
    float: right;
    width: 30%;
    margin-left: 3%;
    background: transparent;
}

.vertical-tabs4 ul.et_pb_tabs_controls:after {
    content: none;
}

.vertical-tabs4 .et_pb_tabs_controls li {
    width: 100%;
    border-right: none !important;
    border-right: 5px solid transparent;
    background: #f4f4f4;
}

.vertical-tabs4 .et_pb_tabs_controls li.et_pb_tab_active {
    border-right: 5px solid #14C05D !important;
    background: #ffffff;
}

.vertical-tabs4 .et_pb_tabs_controls li a {
    padding: 40px;
}

.vertical-tabs4 .et_pb_tabs_controls li.et_pb_tab_active a {
    color: #14C05D !important;
}

.vertical-tabs4 .et_pb_tab {
    padding: 0;
}

.vertical-tabs4 .et_pb_tab_content {
    display: flex;
    flex-wrap: wrap;
}

@media(max-width:767px) {    
    .vertical-tabs4 ul.et_pb_tabs_controls {
        width: 100%;
        margin-bottom: 30px;
        margin-right: 0;
    }
    
    .vertical-tabs4 .et_pb_tabs_controls li {
        border-bottom: none;
    }
    
    .vertical-tabs4 .et_pb_tab {
        padding: 0;
    }
  
    .vertical-tabs4 .et_pb_tab_content {
        display: block;
    }    
}

/* Divi Vertical Tabs 5 */

.vertical-tabs5 {
    border: none;
}

.vertical-tabs5 ul.et_pb_tabs_controls {
    float: right;
    width: 30%;
    margin-left: 3%;
    background: transparent;
}

.vertical-tabs5 ul.et_pb_tabs_controls:after {
    content: none;
}

.vertical-tabs5 .et_pb_tabs_controls li {
    width: 100%;
    border-right: none;
    border: 2px solid transparent;
    background: #f4f4f4;
}

.vertical-tabs5 .et_pb_tabs_controls li.et_pb_tab_active {
    border: 2px solid #FF5733;
    background: #FF5733;
}

.vertical-tabs5 .et_pb_tabs_controls li.et_pb_tab_active:before {
    top: 50%;
    left: -42px;
    border: solid transparent;
    content: " ";
    position: absolute;
    border-color: transparent;
    border-right-color: #FF5733;
    border-width: 20px;
    margin-top: -20px;
}

.vertical-tabs5 .et_pb_tabs_controls li a {
    padding: 24px;
}

.vertical-tabs5 .et_pb_tabs_controls li.et_pb_tab_active a {
    color: #ffffff !important;
}

.vertical-tabs5 .et_pb_tab {
    padding: 0;
}

.vertical-tabs5 .et_pb_tab_content {
    display: flex;
    flex-wrap: wrap;
}

@media(max-width:767px) {    
    .vertical-tabs5 ul.et_pb_tabs_controls {
        width: 100%;
        margin-bottom: 30px;
        margin-right: 0;
    }
    
    .vertical-tabs5 .et_pb_tabs_controls li {
        border-bottom: none;
    }
    
    .vertical-tabs5 .et_pb_tab {
        padding: 0;
    }
  
    .vertical-tabs5 .et_pb_tab_content {
        display: block;
    }    
}

/* Divi Vertical Tabs 6 */

.vertical-tabs6 {
    border: none;
}

.vertical-tabs6 ul.et_pb_tabs_controls {
    float: right;
    width: 30%;
    margin-left: 3%;
    background: transparent;
}

.vertical-tabs6 ul.et_pb_tabs_controls:after {
    content: none;
}

.vertical-tabs6 .et_pb_tabs_controls li {
    width: 100%;
    border-right: none;
    background: rgba(244, 244, 244, 0.5);
    margin-bottom: 10px;
}

.vertical-tabs6 .et_pb_tabs_controls li.et_pb_tab_active {
    background: #ececec;
}

.vertical-tabs6 .et_pb_tabs_controls li a {
    padding: 10px;
}

.vertical-tabs6 .et_pb_tabs_controls li.et_pb_tab_active a {
    color: #3339ff !important;
}

.vertical-tabs6 .et_pb_tabs_controls li a:before {
    font-family: ETmodules;
    padding-right: 5px;
}

.vertical-tabs6 .et_pb_tabs_controls li:nth-child(1) a:before {
    content: '\e104';
}

.vertical-tabs6 .et_pb_tabs_controls li:nth-child(2) a:before {
    content: '\e0e9';
}

.vertical-tabs6 .et_pb_tabs_controls li:nth-child(3) a:before {
    content: '\e109';
}

.vertical-tabs6 .et_pb_tabs_controls li:nth-child(4) a:before {
    content: '\e0ec';
}

.vertical-tabs6 .et_pb_tab {
    padding: 0;
}

.vertical-tabs6 .et_pb_tab_content {
    background: #ececec;
    display: flex;
    flex-wrap: wrap;
    padding: 20px;
}

@media(max-width:767px) {    
    .vertical-tabs6 ul.et_pb_tabs_controls {
        width: 100%;
        margin-bottom: 30px;
        margin-right: 0;
    }
    
    .vertical-tabs6 .et_pb_tabs_controls li {
        border-bottom: none;
    }
    
    .vertical-tabs6 .et_pb_tab {
        padding: 0;
    }    
}