/****************************************************************************
** Tab
*****************************************************************************/

.tab
{
border-radius: 5px;
border: 1px solid #e2e5ef;
color: #6d7379;
display: block;
margin: 1rem auto;
padding: 0;
overflow: hidden;
position: relative;
width: 60%;
}

.tab,
.tab *
{
-webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
        box-sizing: border-box;
}

.tab .tab-radio-button
{
display: none;
}



/****************************************************************************
** Tab Labels
*****************************************************************************/

.tab .tabs
{
border: 0;
clear: both;
display: block;
height: 50px;
margin: 0;
overflow: hidden;
padding: 0;
/*position: relative;*/
text-align: center;
}

.tab .tabs label
{
background-color: #f4f4f4;
border: 0;
cursor: pointer;

display: block;
float: left;
font-size: 16px;
font-weight: 700;
height: 68px;
line-height: 20px;
margin: 0;
padding: 15px 0;
/*position: relative;*/
white-space: nowrap;
}

.tab .tabs label + label
{
border-left: 1px solid #e2e5ef;
}

.tab .tabs label
{
border-bottom: 1px solid #e2e5ef;
}

.tab .tabs label:after
{
content: attr(title);
}

.tab .tabs label:hover
{
}

.tab .tabs label:active
{
}

.tab .tab-radio-button:nth-of-type(1) ~ .tabs label:nth-of-type(1)
{
background-color: #ffffff;
border-bottom: 0;
}

.tab .tab-radio-button:checked ~ .tabs label:nth-of-type(1)
{
background-color: #f4f4f4;
border-bottom: 1px solid #e2e5ef;
}

.tab .tab-radio-button:nth-of-type(1) ~ .tabs label {width: 100.000000%;}
.tab .tab-radio-button:nth-of-type(2) ~ .tabs label {width: 50.000000%;}
.tab .tab-radio-button:nth-of-type(3) ~ .tabs label {width: 33.333333%;}
.tab .tab-radio-button:nth-of-type(4) ~ .tabs label {width: 25.000000%;}
.tab .tab-radio-button:nth-of-type(5) ~ .tabs label {width: 20.000000%;}
.tab .tab-radio-button:nth-of-type(6) ~ .tabs label {width: 16.666667%;}
.tab .tab-radio-button:nth-of-type(7) ~ .tabs label {width: 14.285714%;}
.tab .tab-radio-button:nth-of-type(8) ~ .tabs label {width: 12.500000%;}
.tab .tab-radio-button:nth-of-type(9) ~ .tabs label {width: 11.111111%;}

.tab .tab-radio-button:nth-of-type(1):checked ~ .tabs label:nth-of-type(1),
.tab .tab-radio-button:nth-of-type(2):checked ~ .tabs label:nth-of-type(2),
.tab .tab-radio-button:nth-of-type(3):checked ~ .tabs label:nth-of-type(3),
.tab .tab-radio-button:nth-of-type(4):checked ~ .tabs label:nth-of-type(4),
.tab .tab-radio-button:nth-of-type(5):checked ~ .tabs label:nth-of-type(5),
.tab .tab-radio-button:nth-of-type(6):checked ~ .tabs label:nth-of-type(6),
.tab .tab-radio-button:nth-of-type(7):checked ~ .tabs label:nth-of-type(7),
.tab .tab-radio-button:nth-of-type(8):checked ~ .tabs label:nth-of-type(8),
.tab .tab-radio-button:nth-of-type(9):checked ~ .tabs label:nth-of-type(9)
{
background-color: #ffffff;
border-bottom: 0;

-webkit-transition: none;
   -moz-transition: none;
    -ms-transition: none;
     -o-transition: none;
        transition: none;
}

.tab .tabs:hover label:not(:hover)
{
-webkit-transition: none;
   -moz-transition: none;
    -ms-transition: none;
     -o-transition: none;
        transition: none;
}




/****************************************************************************
** Tab Panels
*****************************************************************************/

.tab .panels
{
border: 0;
display: block;
margin: 0;
padding: 0;
position: relative;
}

.tab .panels .panels-container-outer
{
display: block;
width: 100%;
overflow: hidden;
}

.tab .panels .panels-container-outer .panels-container-inner
{
display: block;
list-style-type: none;
margin: 0;
overflow: hidden;
padding: 0;
width: 0;
}

.tab .tab-radio-button:nth-of-type(1) ~ .panels .panels-container-inner {width: 100%;}
.tab .tab-radio-button:nth-of-type(2) ~ .panels .panels-container-inner {width: 200%;}
.tab .tab-radio-button:nth-of-type(3) ~ .panels .panels-container-inner {width: 300%;}
.tab .tab-radio-button:nth-of-type(4) ~ .panels .panels-container-inner {width: 400%;}
.tab .tab-radio-button:nth-of-type(5) ~ .panels .panels-container-inner {width: 500%;}
.tab .tab-radio-button:nth-of-type(6) ~ .panels .panels-container-inner {width: 600%;}
.tab .tab-radio-button:nth-of-type(7) ~ .panels .panels-container-inner {width: 700%;}
.tab .tab-radio-button:nth-of-type(8) ~ .panels .panels-container-inner {width: 800%;}
.tab .tab-radio-button:nth-of-type(9) ~ .panels .panels-container-inner {width: 900%;}

.tab .tab-radio-button:nth-of-type(1):checked ~ .panels .panels-container-inner {margin-left: 0;}
.tab .tab-radio-button:nth-of-type(2):checked ~ .panels .panels-container-inner {margin-left: -100%;}
.tab .tab-radio-button:nth-of-type(3):checked ~ .panels .panels-container-inner {margin-left: -200%;}
.tab .tab-radio-button:nth-of-type(4):checked ~ .panels .panels-container-inner {margin-left: -300%;}
.tab .tab-radio-button:nth-of-type(5):checked ~ .panels .panels-container-inner {margin-left: -400%;}
.tab .tab-radio-button:nth-of-type(6):checked ~ .panels .panels-container-inner {margin-left: -500%;}
.tab .tab-radio-button:nth-of-type(7):checked ~ .panels .panels-container-inner {margin-left: -600%;}
.tab .tab-radio-button:nth-of-type(8):checked ~ .panels .panels-container-inner {margin-left: -700%;}
.tab .tab-radio-button:nth-of-type(9):checked ~ .panels .panels-container-inner {margin-left: -800%;}



/****************************************************************************
** Tab Panel
*****************************************************************************/

.tab .panels .panel
{
background-color: #ffffff;
display: block;
float: left;
height: 0;
margin: 0;
padding: 0 16px;
position: relative;
width: auto;
}

.tab .tab-radio-button:nth-of-type(1) ~ .panels .panel {width: 100.000000%;}
.tab .tab-radio-button:nth-of-type(2) ~ .panels .panel {width: 50.000000%;}
.tab .tab-radio-button:nth-of-type(3) ~ .panels .panel {width: 33.333333%;}
.tab .tab-radio-button:nth-of-type(4) ~ .panels .panel {width: 25.000000%;}
.tab .tab-radio-button:nth-of-type(5) ~ .panels .panel {width: 20.000000%;}
.tab .tab-radio-button:nth-of-type(6) ~ .panels .panel {width: 16.666667%;}
.tab .tab-radio-button:nth-of-type(7) ~ .panels .panel {width: 14.285714%;}
.tab .tab-radio-button:nth-of-type(8) ~ .panels .panel {width: 12.500000%;}
.tab .tab-radio-button:nth-of-type(9) ~ .panels .panel {width: 11.111111%;}

.tab .tab-radio-button:nth-of-type(1):checked ~ .panels .panel:nth-of-type(1),
.tab .tab-radio-button:nth-of-type(2):checked ~ .panels .panel:nth-of-type(2),
.tab .tab-radio-button:nth-of-type(3):checked ~ .panels .panel:nth-of-type(3),
.tab .tab-radio-button:nth-of-type(4):checked ~ .panels .panel:nth-of-type(4),
.tab .tab-radio-button:nth-of-type(5):checked ~ .panels .panel:nth-of-type(5),
.tab .tab-radio-button:nth-of-type(6):checked ~ .panels .panel:nth-of-type(6),
.tab .tab-radio-button:nth-of-type(7):checked ~ .panels .panel:nth-of-type(7),
.tab .tab-radio-button:nth-of-type(8):checked ~ .panels .panel:nth-of-type(8),
.tab .tab-radio-button:nth-of-type(9):checked ~ .panels .panel:nth-of-type(9)
{
height: auto;
}


/****************************************************************************
** Tab Label Transition
*****************************************************************************/

.tab.tab-label-transition .tabs label
{
-webkit-transition: background-color 0.25s linear;
   -moz-transition: background-color 0.25s linear;
    -ms-transition: background-color 0.25s linear;
     -o-transition: background-color 0.25s linear;
        transition: background-color 0.25s linear;
}



/****************************************************************************
** Tab Panel Transition
*****************************************************************************/

.tab.tab-panel-transition .panels-container-inner
{
-webkit-transition: margin-left 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
   -moz-transition: margin-left 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
    -ms-transition: margin-left 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
     -o-transition: margin-left 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
        transition: margin-left 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
}

.tab.tab-panel-transition .panels .panel
{
height: auto;

-webkit-transition: max-height cubic-bezier(0.5,0,0.5,1) 800ms;
   -moz-transition: max-height cubic-bezier(0.5,0,0.5,1) 800ms;
    -ms-transition: max-height cubic-bezier(0.5,0,0.5,1) 800ms;
     -o-transition: max-height cubic-bezier(0.5,0,0.5,1) 800ms;
        transition: max-height cubic-bezier(0.5,0,0.5,1) 800ms;
}



/****************************************************************************
** Tab Box Shadow
*****************************************************************************/

.tab.tab-box-shadow
{
-webkit-box-shadow: 0 11px 35px 4px rgba(0, 0, 0, 0.15);
   -moz-box-shadow: 0 11px 35px 4px rgba(0, 0, 0, 0.15);
        box-shadow: 0 11px 35px 4px rgba(0, 0, 0, 0.15);
}

/****************************************************************************
** Tab Panels Auto Height
*****************************************************************************/

.tab.tab-auto-height .panel
{
float: none;
max-height: 1px;
overflow: visible;
}

.tab.tab-auto-height .tab-radio-button:nth-of-type(1) ~ .panels .panels-container-inner .panel:nth-of-type(1),
.tab.tab-auto-height .tab-radio-button:nth-of-type(1):checked ~ .panels .panels-container-inner .panel:nth-of-type(1),
.tab.tab-auto-height .tab-radio-button:nth-of-type(2):checked ~ .panels .panels-container-inner .panel:nth-of-type(2),
.tab.tab-auto-height .tab-radio-button:nth-of-type(3):checked ~ .panels .panels-container-inner .panel:nth-of-type(3),
.tab.tab-auto-height .tab-radio-button:nth-of-type(4):checked ~ .panels .panels-container-inner .panel:nth-of-type(4),
.tab.tab-auto-height .tab-radio-button:nth-of-type(5):checked ~ .panels .panels-container-inner .panel:nth-of-type(5),
.tab.tab-auto-height .tab-radio-button:nth-of-type(6):checked ~ .panels .panels-container-inner .panel:nth-of-type(6),
.tab.tab-auto-height .tab-radio-button:nth-of-type(7):checked ~ .panels .panels-container-inner .panel:nth-of-type(7),
.tab.tab-auto-height .tab-radio-button:nth-of-type(8):checked ~ .panels .panels-container-inner .panel:nth-of-type(8),
.tab.tab-auto-height .tab-radio-button:nth-of-type(9):checked ~ .panels .panels-container-inner .panel:nth-of-type(9)
{
max-height: 1000000px;
}

.tab.tab-auto-height .tab-radio-button:nth-of-type(1) ~ .tab-radio-button:checked ~ .panels .panels-container-inner .panel:nth-of-type(1)
{
max-height: 1px;
}

.tab.tab-auto-height .panels .panels-container-inner
{
display: flex;
flex-direction: row;
}