Use this Code in a Markdown box for creating a square with text.

Example

Code for Tabbed Containers

HTML on Page

Container 1

<div class="tab-container">
  <ul class="nav nav-tabs nav-tabs-left nav-centered" role="tablist">
    <!-- Tab starts -->
    <li role="presentation" class="active">
      <a href="#tab1" data-toggle="tab" role="tab">
        Container 1: Tab 1
      </a>
    </li>
    <!-- Tab ends -->

    <!-- Tab starts -->
    <li role="presentation">
      <a href="#tab2" data-toggle="tab" role="tab">
       Container 1: Tab 2
      </a>
    </li>
    <!-- Tab ends -->
  </ul>
  
  <div id="side_tabs" class="tab-content side-tabs side-tabs-left">
    <!-- Tab contents start -->
    <div class="tab-pane fade in active" id="tab1" role="tabpanel">
    <h2>Tab 1</h2>
<p style="line-height: normal">
<p><b>Content 1</p>
<p style="line-height: normal">
<p><b>Content 2</p>
<p style="line-height: normal">
<p><b>Content 3</p>
<p style="line-height: normal">
<p><b>Content 4</p>
<p style="line-height: normal">
<p><b>Content 5</p>
    </div>
    <!-- Tab contents end -->


    <!-- Tab contents start -->
    <div class="tab-pane fade" id="tab2" role="tabpanel">
      <h2>
        Tab 2
      </h2><p style="line-height: normal">
<p><b>Content 1</p>
<p style="line-height: normal">
<p><b>Content 2</p>
<p style="line-height: normal">
<p><b>Content 3</p>
<p style="line-height: normal">
<p><b>Content 4</p>
<p style="line-height: normal">
<p><b>Content 5</p>
    </div>
    <!-- Tab contents end -->

</div>

      
       
   

Tab 1

Content 1

Content 2

Content 3

Content 4

Content 5

   
           
     

        Tab 2      

Content 1

Content 2

Content 3

Content 4

Content 5

   
       
   

Tab 1

Content 1

Content 2

Content 3

Content 4

Content 5

   
       
   

Tab 1

Content 1

Content 2

Content 3

Content 4

Content 5

   
   
      
       
   

C2 Tab 1

Content 1

Content 2

Content 3

Content 4

Content 5

   
           
     

        C2 Tab 2      

Content 1

Content 2

Content 3

Content 4

Content 5

   
   

Settings-->Advanced-->Code Injection

<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!--  -->

<script type="text/javascript">
$(document).ready(function() {
  $('ul.nav-tabs a').click(function (e) {
    e.preventDefault()
    $(this).tab('show');
  });

  var jTabs = $('ul.nav-tabs');
  var jSideTabsContent = $('#side_tabs');
  var jTabContainer = $('.tab-container');
   if ( isMobile() ) { 
     jTabs.addClass('mobile');
     jSideTabsContent.addClass('mobile');
     jTabContainer.addClass('mobile');
   }
});

function isMobile()
{
   return /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent);
}

</script>

Custom CSS Page

Color changes: Variables-->@brand-dark-blue
Corner Radius: add "border-radius: 5px;" to Custom Tab Styles-->.tab-container
Height Change: in both .tab-container and .tab-content

/*
==============================================
Bootstrap Variables
==============================================
*/

// Clearfix
//
// For modern browsers
// 1. The space content is one way to avoid an Opera bug when the
//    contenteditable attribute is included anywhere else in the document.
//    Otherwise it causes space to appear at the top and bottom of elements
//    that are clearfixed.
// 2. The use of `table` rather than `block` is only necessary if using
//    `:before` to contain the top-margins of child elements.
//
// Source: http://nicolasgallagher.com/micro-clearfix-hack/

.clearfix() {
  &:before,
  &:after {
    content: " "; // 1
    display: table; // 2
  }
  &:after {
    clear: both;
  }
}

//** Disabled cursor for form controls and buttons.
@cursor-disabled:                not-allowed;

//** Unit-less `line-height` for use in components like buttons.
@line-height-base:          1.428571429; // 20/14

//== Colors
//
//## Gray and brand colors for use across Bootstrap.

@gray-base:              #000;
@gray-darker:            lighten(@gray-base, 13.5%); // #222
@gray-dark:              lighten(@gray-base, 20%);   // #333
@gray:                   lighten(@gray-base, 33.5%); // #555
@gray-light:             lighten(@gray-base, 46.7%); // #777
@gray-lighter:           lighten(@gray-base, 93.5%); // #eee

@brand-primary:         darken(#428bca, 6.5%); // #337ab7
@brand-success:         #5cb85c;
@brand-info:            #5bc0de;
@brand-warning:         #f0ad4e;
@brand-danger:          #d9534f;

//** Background color for `<body>`.
@body-bg:               #fff;

@border-radius-base:        8px;

//** Global textual link color.
@brand-primary:         darken(#428bca, 6.5%); // #337ab7
@link-color:            @brand-primary;

//== Navs
//
//##

//=== Shared nav styles
@nav-link-padding:                          10px 15px;
@nav-link-hover-bg:                         @gray-lighter;

@nav-disabled-link-color:                   @gray-light;
@nav-disabled-link-hover-color:             @gray-light;

//== Tabs
@nav-tabs-border-color:                     #ddd;

@nav-tabs-link-hover-border-color:          @gray-lighter;

@nav-tabs-active-link-hover-bg:             @body-bg;
@nav-tabs-active-link-hover-color:          @gray;
@nav-tabs-active-link-hover-border-color:   #ddd;

@nav-tabs-justified-link-border-color:            #ddd;
@nav-tabs-justified-active-link-border-color:     @body-bg;

//
// Animations Mixins
// --------------------------------------------------
//

// Transitions

.transition(@transition) {
  -webkit-transition: @transition;
       -o-transition: @transition;
          transition: @transition;
}
.transition-property(@transition-property) {
  -webkit-transition-property: @transition-property;
          transition-property: @transition-property;
}
.transition-delay(@transition-delay) {
  -webkit-transition-delay: @transition-delay;
          transition-delay: @transition-delay;
}
.transition-duration(@transition-duration) {
  -webkit-transition-duration: @transition-duration;
          transition-duration: @transition-duration;
}
.transition-timing-function(@timing-function) {
  -webkit-transition-timing-function: @timing-function;
          transition-timing-function: @timing-function;
}
.transition-transform(@transition) {
  -webkit-transition: -webkit-transform @transition;
     -moz-transition: -moz-transform @transition;
       -o-transition: -o-transform @transition;
          transition: transform @transition;
}

//
// More Mixins
// --------------------------------------------------
//

// Single side border-radius

.border-top-radius(@radius) {
  border-top-right-radius: @radius;
   border-top-left-radius: @radius;
}
.border-right-radius(@radius) {
  border-bottom-right-radius: @radius;
     border-top-right-radius: @radius;
}
.border-bottom-radius(@radius) {
  border-bottom-right-radius: @radius;
   border-bottom-left-radius: @radius;
}
.border-left-radius(@radius) {
  border-bottom-left-radius: @radius;
     border-top-left-radius: @radius;
}


/*
==============================================
Variables
==============================================
*/

//Layout

//Color variables
//Font size variables
@brand-dark-blue: #A1D2CF;
@tabs-border-color: #444;
//Typography variables

/*
==============================================
Mixins & Media queries
==============================================
*/

//Media queries
@largescreen: ~"all and (max-width: 1240px)";
@tablets: ~"all and (max-width: 980px)";
@mobile-phones:  ~"all and (max-width: 640px)";
@belowiphone6: ~"all and (max-width: 360px)";

/*
==============================================
Overall styles
==============================================
*/

/* Change background color */
.nav-folder-item, .footernav-folder-item { background-color: #fff; }


/*
==============================================
Bootsrap Navs
==============================================
*/

// Bootstrap Navigation Styles are inserted inline because otherwise BTSTRP overwrite Squarespace styles
 
//
// Navs
// --------------------------------------------------


// Base class
// --------------------------------------------------

.nav {
  margin-bottom: 0;
  padding-left: 0; // Override default ul/ol
  list-style: none;
  .clearfix;

  > li {
    position: relative;
    display: block;

    > a {
      position: relative;
      display: block;
      padding: @nav-link-padding;
      &:hover,
      &:focus {
        text-decoration: none;
        background-color: @nav-link-hover-bg;
      }
    }

    // Disabled state sets text to gray and nukes hover/tab effects
    &.disabled > a {
      color: @nav-disabled-link-color;

      &:hover,
      &:focus {
        color: @nav-disabled-link-hover-color;
        text-decoration: none;
        background-color: transparent;
        cursor: @cursor-disabled;
      }
    }
  }

  // Open dropdowns
  .open > a {
    &,
    &:hover,
    &:focus {
      background-color: @nav-link-hover-bg;
      border-color: @link-color;
    }
  }

  // Prevent IE8 from misplacing imgs
  //
  // See https://github.com/h5bp/html5-boilerplate/issues/984#issuecomment-3985989
  > li > a > img {
    max-width: none;
  }
}


// Tabs
// -------------------------

// Give the tabs something to sit on
.nav-tabs {
  border-bottom: 1px solid @nav-tabs-border-color;
  > li {
    float: left;
    // Make the list-items overlay the bottom border
    margin-bottom: -1px;

    // Actual tabs (as links)
    > a {
      margin-right: 2px;
      line-height: @line-height-base;
      border: 1px solid transparent;
      border-radius: @border-radius-base @border-radius-base 0 0;
      &:hover {
        border-color: @nav-tabs-link-hover-border-color @nav-tabs-link-hover-border-color @nav-tabs-border-color;
      }
    }

    // Active state, and its :hover to override normal :hover
    &.active > a {
      &,
      &:hover,
      &:focus {
        color: @nav-tabs-active-link-hover-color;
        background-color: @nav-tabs-active-link-hover-bg;
        border: 1px solid @nav-tabs-active-link-hover-border-color;
        border-bottom-color: transparent;
        cursor: default;
      }
    }
  }
}


// Tabbable tabs
// -------------------------

// Hide tabbable panes to start, show them when `.active`
.tab-content {
  > .tab-pane {
    display: none;
  }
  > .active {
    display: block;
  }
}


// Dropdowns
// -------------------------

// Specific dropdowns
.nav-tabs .dropdown-menu {
  // make dropdown border overlap tab border
  margin-top: -1px;
  // Remove the top rounded corners here since there is a hard edge above the menu
  .border-top-radius(0);
}


/*
==============================================
Bootsrap Animations
==============================================
*/ 


// Component animations
// --------------------------------------------------

// Heads up!
//
// We don't use the `.opacity()` mixin here since it causes a bug with text
// fields in IE7-8. Source: https://github.com/twbs/bootstrap/pull/3552.

.fade {
  opacity: 0;
  .transition(opacity .15s linear);
  &.in {
    opacity: 1;
  }
}

.collapse {
  display: none;

  &.in      { display: block; }
  tr&.in    { display: table-row; }
  tbody&.in { display: table-row-group; }
}

.collapsing {
  position: relative;
  height: 0;
  overflow: hidden;
  .transition-property(~"height, visibility");
  .transition-duration(.35s);
  .transition-timing-function(ease);
}


/*
==============================================
Custom Tabs Styles
==============================================
*/

.tab-container-1 {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;


    background: @brand-dark-blue;
    padding: 0;
    border: solid 1px @tabs-border-color;
  border-radius: 5px;
  height: 540px;
    overflow: hidden;
    width: 100%;

    &.mobile {
        height: auto;
        overflow-y: scroll;
    }
}
ul {
    margin-top: 0;
  margin-bottom: 10px;
}

.nav-tabs.nav-tabs-left {
  float: left;
  border-right: 0;
    border-bottom: 0;
    max-width: 33%;

    &.mobile {
        float: none;
        max-width: 100%;

        li:last-child {
            border-bottom: 1px solid @tabs-border-color;
        }
    }

    li {
        float: none;
        margin: 0;
        text-align: left;
    }
}

.nav-tabs.nav-tabs-left li a {
  margin-right: 0;
    border-radius: 0;
  border-right: none;
}

.nav-tabs.nav-tabs-left li a,
.nav-tabs.nav-tabs-right li a {
  background-color: @brand-dark-blue;
  color: #fff;
}
.nav-tabs.nav-tabs-left li a:hover,
.nav-tabs.nav-tabs-right li a:hover {
  background-color: rgba(255,255,255,0.9);
  border-color: rgba(255,255,255,0.9);
  color: #444;
}
.nav-tabs.nav-tabs-left li.active a,
.nav-tabs.nav-tabs-right li.active a,
.nav-tabs.nav-tabs-left li.active .glyphicon,
.nav-tabs.nav-tabs-right li.active .glyphicon {
  color: #333;
}
.nav-tabs.nav-tabs-left li.active a:hover,
.nav-tabs.nav-tabs-right li.active a:hover,
.nav-tabs.nav-tabs-left li.active .glyphicon:hover,
.nav-tabs.nav-tabs-right li.active .glyphicon:hover {
  color: #444;
}
.nav-tabs.nav-tabs-left li.active a,
.nav-tabs.nav-tabs-right li.active a,
.nav-tabs.nav-tabs-left li.active a:hover,
.nav-tabs.nav-tabs-right li.active a:hover,
.nav-tabs.nav-tabs-left li.active a:focus,
.nav-tabs.nav-tabs-right li.active a:focus {
  background-color: #fff;
}
.nav-tabs.nav-tabs-left li:not(:last-of-type),
.nav-tabs.nav-tabs-right li:not(:last-of-type) {
  margin-bottom: -1px;
}
.tab-content {
    background: #fff;
    height: 540px;
    overflow-y: scroll;

    &.mobile {
        height: 600px;
    }
}
.tab-content.side-tabs .tab-pane {
  display: none;
  padding: 20px;
  overflow-y: auto;
}
.tab-content.side-tabs-left {
  margin-left: 45px;

    &.mobile {
        margin-left: 0;
    }
}
.tab-content.side-tabs-left .tab-pane {
  border-radius: 0;
}
.tab-content.side-tabs-left .tab-pane.active {
  display: block;
  background-color: #fff;
  border-color: #fff;
  color: #333;
  font-weight: 300;
  letter-spacing: 0.1em;
}
.tab-content.side-tabs-right {
  margin-right: 45px;
}
.tab-content.side-tabs-right .tab-pane {
  border-radius: 4px 0 0 4px;
}
main > .row:not(:first-of-type) {
  margin-top: 1.1em;
}

.nav-tabs>li>a,.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover {
    border: none;
}

.details__item {
    font-size: 14px;
    padding-bottom: 1.2em;
    line-height: 1.55em;
}

Jonas' CSS

 

 

/*
==============================================
Bootstrap Variables
==============================================
*/

// Clearfix
//
// For modern browsers
// 1. The space content is one way to avoid an Opera bug when the
//    contenteditable attribute is included anywhere else in the document.
//    Otherwise it causes space to appear at the top and bottom of elements
//    that are clearfixed.
// 2. The use of `table` rather than `block` is only necessary if using
//    `:before` to contain the top-margins of child elements.
//
// Source: http://nicolasgallagher.com/micro-clearfix-hack/

.clearfix() {
  &:before,
  &:after {
    content: " "; // 1
    display: table; // 2
  }
  &:after {
    clear: both;
  }
}

//** Disabled cursor for form controls and buttons.
@cursor-disabled:                not-allowed;

//** Unit-less `line-height` for use in components like buttons.
@line-height-base:          1.428571429; // 20/14

//== Colors
//
//## Gray and brand colors for use across Bootstrap.

@gray-base:              #000;
@gray-darker:            lighten(@gray-base, 13.5%); // #222
@gray-dark:              lighten(@gray-base, 20%);   // #333
@gray:                   lighten(@gray-base, 33.5%); // #555
@gray-light:             lighten(@gray-base, 46.7%); // #777
@gray-lighter:           lighten(@gray-base, 93.5%); // #eee

@brand-primary:         darken(#428bca, 6.5%); // #337ab7
@brand-success:         #5cb85c;
@brand-info:            #5bc0de;
@brand-warning:         #f0ad4e;
@brand-danger:          #d9534f;

//** Background color for `<body>`.
@body-bg:               #fff;

@border-radius-base:        4px;

//** Global textual link color.
@brand-primary:         darken(#428bca, 6.5%); // #337ab7
@link-color:            @brand-primary;

//== Navs
//
//##

//=== Shared nav styles
@nav-link-padding:                          10px 15px;
@nav-link-hover-bg:                         @gray-lighter;

@nav-disabled-link-color:                   @gray-light;
@nav-disabled-link-hover-color:             @gray-light;

//== Tabs
@nav-tabs-border-color:                     #ddd;

@nav-tabs-link-hover-border-color:          @gray-lighter;

@nav-tabs-active-link-hover-bg:             @body-bg;
@nav-tabs-active-link-hover-color:          @gray;
@nav-tabs-active-link-hover-border-color:   #ddd;

@nav-tabs-justified-link-border-color:            #ddd;
@nav-tabs-justified-active-link-border-color:     @body-bg;

//
// Animations Mixins
// --------------------------------------------------
//

// Transitions

.transition(@transition) {
  -webkit-transition: @transition;
       -o-transition: @transition;
          transition: @transition;
}
.transition-property(@transition-property) {
  -webkit-transition-property: @transition-property;
          transition-property: @transition-property;
}
.transition-delay(@transition-delay) {
  -webkit-transition-delay: @transition-delay;
          transition-delay: @transition-delay;
}
.transition-duration(@transition-duration) {
  -webkit-transition-duration: @transition-duration;
          transition-duration: @transition-duration;
}
.transition-timing-function(@timing-function) {
  -webkit-transition-timing-function: @timing-function;
          transition-timing-function: @timing-function;
}
.transition-transform(@transition) {
  -webkit-transition: -webkit-transform @transition;
     -moz-transition: -moz-transform @transition;
       -o-transition: -o-transform @transition;
          transition: transform @transition;
}

//
// More Mixins
// --------------------------------------------------
//

// Single side border-radius

.border-top-radius(@radius) {
  border-top-right-radius: @radius;
   border-top-left-radius: @radius;
}
.border-right-radius(@radius) {
  border-bottom-right-radius: @radius;
     border-top-right-radius: @radius;
}
.border-bottom-radius(@radius) {
  border-bottom-right-radius: @radius;
   border-bottom-left-radius: @radius;
}
.border-left-radius(@radius) {
  border-bottom-left-radius: @radius;
     border-top-left-radius: @radius;
}


/*
==============================================
Variables
==============================================
*/

//Layout

//Color variables
//Font size variables
@brand-dark-blue: #0a283d;
@tabs-border-color: #444;
//Typography variables

/*
==============================================
Mixins & Media queries
==============================================
*/

//Media queries
@largescreen: ~"all and (max-width: 1240px)";
@tablets: ~"all and (max-width: 980px)";
@mobile-phones:  ~"all and (max-width: 640px)";
@belowiphone6: ~"all and (max-width: 360px)";

/*
==============================================
Overall styles
==============================================
*/

/* Change background color */
.nav-folder-item, .footernav-folder-item { background-color: #fff; }


/*
==============================================
Bootsrap Navs
==============================================
*/

// Bootstrap Navigation Styles are inserted inline because otherwise BTSTRP overwrite Squarespace styles
 
//
// Navs
// --------------------------------------------------


// Base class
// --------------------------------------------------

.nav {
  margin-bottom: 0;
  padding-left: 0; // Override default ul/ol
  list-style: none;
  .clearfix;

  > li {
    position: relative;
    display: block;

    > a {
      position: relative;
      display: block;
      padding: @nav-link-padding;
      &:hover,
      &:focus {
        text-decoration: none;
        background-color: @nav-link-hover-bg;
      }
    }

    // Disabled state sets text to gray and nukes hover/tab effects
    &.disabled > a {
      color: @nav-disabled-link-color;

      &:hover,
      &:focus {
        color: @nav-disabled-link-hover-color;
        text-decoration: none;
        background-color: transparent;
        cursor: @cursor-disabled;
      }
    }
  }

  // Open dropdowns
  .open > a {
    &,
    &:hover,
    &:focus {
      background-color: @nav-link-hover-bg;
      border-color: @link-color;
    }
  }

  // Prevent IE8 from misplacing imgs
  //
  // See https://github.com/h5bp/html5-boilerplate/issues/984#issuecomment-3985989
  > li > a > img {
    max-width: none;
  }
}


// Tabs
// -------------------------

// Give the tabs something to sit on
.nav-tabs {
  border-bottom: 1px solid @nav-tabs-border-color;
  > li {
    float: left;
    // Make the list-items overlay the bottom border
    margin-bottom: -1px;

    // Actual tabs (as links)
    > a {
      margin-right: 2px;
      line-height: @line-height-base;
      border: 1px solid transparent;
      border-radius: @border-radius-base @border-radius-base 0 0;
      &:hover {
        border-color: @nav-tabs-link-hover-border-color @nav-tabs-link-hover-border-color @nav-tabs-border-color;
      }
    }

    // Active state, and its :hover to override normal :hover
    &.active > a {
      &,
      &:hover,
      &:focus {
        color: @nav-tabs-active-link-hover-color;
        background-color: @nav-tabs-active-link-hover-bg;
        border: 1px solid @nav-tabs-active-link-hover-border-color;
        border-bottom-color: transparent;
        cursor: default;
      }
    }
  }
}


// Tabbable tabs
// -------------------------

// Hide tabbable panes to start, show them when `.active`
.tab-content {
  > .tab-pane {
    display: none;
  }
  > .active {
    display: block;
  }
}


// Dropdowns
// -------------------------

// Specific dropdowns
.nav-tabs .dropdown-menu {
  // make dropdown border overlap tab border
  margin-top: -1px;
  // Remove the top rounded corners here since there is a hard edge above the menu
  .border-top-radius(0);
}


/*
==============================================
Bootsrap Animations
==============================================
*/ 


// Component animations
// --------------------------------------------------

// Heads up!
//
// We don't use the `.opacity()` mixin here since it causes a bug with text
// fields in IE7-8. Source: https://github.com/twbs/bootstrap/pull/3552.

.fade {
  opacity: 0;
  .transition(opacity .15s linear);
  &.in {
    opacity: 1;
  }
}

.collapse {
  display: none;

  &.in      { display: block; }
  tr&.in    { display: table-row; }
  tbody&.in { display: table-row-group; }
}

.collapsing {
  position: relative;
  height: 0;
  overflow: hidden;
  .transition-property(~"height, visibility");
  .transition-duration(.35s);
  .transition-timing-function(ease);
}


/*
==============================================
Custom Tabs Styles
==============================================
*/

.tab-container {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;


    background: @brand-dark-blue;
    padding: 0;
    border: solid 1px @tabs-border-color;
    height: 440px;
    overflow: hidden;
    width: 100%;

    &.mobile {
        height: auto;
        overflow-y: scroll;
    }
}
ul {
    margin-top: 0;
  margin-bottom: 10px;
}

.nav-tabs.nav-tabs-left {
  float: left;
  border-right: 0;
    border-bottom: 0;
    max-width: 33%;

    &.mobile {
        float: none;
        max-width: 100%;

        li:last-child {
            border-bottom: 1px solid @tabs-border-color;
        }
    }

    li {
        float: none;
        margin: 0;
        text-align: left;
    }
}

.nav-tabs.nav-tabs-left li a {
  margin-right: 0;
    border-radius: 0;
  border-right: none;
}

.nav-tabs.nav-tabs-left li a,
.nav-tabs.nav-tabs-right li a {
  background-color: @brand-dark-blue;
  color: #fff;
}
.nav-tabs.nav-tabs-left li a:hover,
.nav-tabs.nav-tabs-right li a:hover {
  background-color: rgba(255,255,255,0.9);
  border-color: rgba(255,255,255,0.9);
  color: #444;
}
.nav-tabs.nav-tabs-left li.active a,
.nav-tabs.nav-tabs-right li.active a,
.nav-tabs.nav-tabs-left li.active .glyphicon,
.nav-tabs.nav-tabs-right li.active .glyphicon {
  color: #333;
}
.nav-tabs.nav-tabs-left li.active a:hover,
.nav-tabs.nav-tabs-right li.active a:hover,
.nav-tabs.nav-tabs-left li.active .glyphicon:hover,
.nav-tabs.nav-tabs-right li.active .glyphicon:hover {
  color: #444;
}
.nav-tabs.nav-tabs-left li.active a,
.nav-tabs.nav-tabs-right li.active a,
.nav-tabs.nav-tabs-left li.active a:hover,
.nav-tabs.nav-tabs-right li.active a:hover,
.nav-tabs.nav-tabs-left li.active a:focus,
.nav-tabs.nav-tabs-right li.active a:focus {
  background-color: #fff;
}
.nav-tabs.nav-tabs-left li:not(:last-of-type),
.nav-tabs.nav-tabs-right li:not(:last-of-type) {
  margin-bottom: -1px;
}
.tab-content {
    background: #fff;
    height: 440px;
    overflow-y: scroll;

    &.mobile {
        height: 600px;
    }
}
.tab-content.side-tabs .tab-pane {
  display: none;
  padding: 20px;
  overflow-y: auto;
}
.tab-content.side-tabs-left {
  margin-left: 45px;

    &.mobile {
        margin-left: 0;
    }
}
.tab-content.side-tabs-left .tab-pane {
  border-radius: 0;
}
.tab-content.side-tabs-left .tab-pane.active {
  display: block;
  background-color: #fff;
  border-color: #fff;
  color: #333;
  font-weight: 300;
  letter-spacing: 0.1em;
}
.tab-content.side-tabs-right {
  margin-right: 45px;
}
.tab-content.side-tabs-right .tab-pane {
  border-radius: 4px 0 0 4px;
}
main > .row:not(:first-of-type) {
  margin-top: 1.1em;
}

.nav-tabs>li>a,.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover {
    border: none;
}

.details__item {
    font-size: 14px;
    padding-bottom: 1.2em;
    line-height: 1.55em;
}