Collapsible_Tabs.css

/*///////////////////
JetSloth.com
Display your Collapsible Sections in tabs with this CSS updates
Full article at https://jetsloth.com/labs/display-your-form-with-tabs-using-collapsible-sections/
////////////////////*/

/* /////////////////// Form wrapper /////////////////// */
.form-has-collapsible-sections_wrapper {
    margin: 0 auto;
    text-align: left;
    max-width: 100%;
    margin-top: 0px;
    padding: 160px 100px;
    background:url('https://jetsloth.com/wp-content/uploads/2017/03/Gravity-forms-image-choices-label-8.jpg');
    border-radius:5px;
    background-size: 1200px;
    overflow:hidden;
}
/* /////////////////// Tabs setup /////////////////// */
.collapsible-sections-field .gsection_title:after {
    color: #dbe1ec;
    font: 400 17px/1 slothicons !important;
}
.collapsible-sections-open h2.gsection_title {
    color:white
}
.collapsible-sections-field h2.gsection_title {
   font-size:15px
}
.gform_fields {
    position: relative!important;
}
.form-has-collapsible-sections .gsection.collapsible-sections-field.collapsible-sections-open {
    background: #867aff!important;
    transition:all 0.3s ease-in-out;
    position: absolute!important;
}
.gfield.collapsible-sections-field {
    width: calc(33.333% - 1px);
    height: 50px;
    position: absolute!important;
    top: -43px;
    background:white!important;
    border:none!important;
    transition:all 0.3s ease-in-out;
	position: absolute;
}
.gfield.collapsible-sections-field:hover {
    background:#f9f9f9!important;
}
.form-has-collapsible-sections .collapsible-sections-collapsible-body {
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    border: none;
    background-color: #fff;
    position: relative;
    z-index: 2;
    border-top: 2px solid #f9f9f9;
    box-shadow:
  0 5.1px 4.7px rgba(0, 0, 0, 0.065),
  0 12.4px 11.3px rgba(0, 0, 0, 0.093),
  0 23.3px 21.3px rgba(0, 0, 0, 0.115),
  0 41.5px 38px rgba(0, 0, 0, 0.137),
  0 77.7px 71px rgba(0, 0, 0, 0.165),
  0 186px 170px rgba(0, 0, 0, 0.23);
}
/* /////////////////// Tab Positions /////////////////// */
.gfield.collapsible-sections-field:nth-child(1) {
    left: 0;
    border:none!important;
    margin: 0px!important;
    padding: 14px 20px 0px 20px!important;
    border-top-left-radius: 5px;
}
.gfield.collapsible-sections-field:nth-child(5) {
   right: 0;
   border:none!important;
   margin: 0px!important;
   padding: 14px 20px 0px 20px!important;
   border-top-right-radius: 5px;
}
.gfield.collapsible-sections-field:nth-child(3) {
    left: 50%;
    transform:translateX(-50%);
    padding: 14px 20px 0px 20px!important;
    border:none!important;
    margin: 0px!important;
}
.collapsible-tabs-form .gform_fields {
	position: relative;
	width: 100%;
	padding-top: 50px!important;
}

/* Position each tab across the top */
.collapsible-tabs-form .gfield.collapsible-sections-field:nth-child(1) {
	left: 0;
}
.collapsible-tabs-form .gfield.collapsible-sections-field:nth-child(3) {
	left: 50%;
	transform: translateX(-50%);
}
.collapsible-tabs-form .gfield.collapsible-sections-field:nth-child(5) {
	right: 0;
}
/* /////////////////// Tab title styles /////////////////// */
.gsection_title {
    font-size: 18px;
    background: none;
    padding: 0px;
    border-radius: 0px;
    color: #3e4a5b;
    margin-top: 0;
}