@import url('http://fonts.googleapis.com/css?family=Open+Sans:400,600');
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.ui-tabgroup {
  position: relative;
  display: inline-block;
  width: 100%;
}
.ui-tabgroup:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}
.ui-tabgroup > .ui-tabs {
  float: left;
  width: 100%;
}
.ui-tabgroup > .ui-tabs > [class^="ui-tab"] {
  position: relative;
  float: left;
  display: block;
  background-color: #fff;
  color: #313131;
  margin: 0 0 1px 0;
  padding: 6px 15px;
  cursor: pointer;
  min-width: 100%;
  min-height: 20px;
  /*border-width: 1px 1px 0 1px;
  border-style: solid;
    border-color: #d9e5e8;*/
  border-bottom:1px solid #ddd;

  font-size: 13px;
 
  -webkit-transition: all 0.15s ease-in;
     -moz-transition: all 0.15s ease-in;
       -o-transition: all 0.15s ease-in;
          transition: all 0.15s ease-in;
}
.ui-tabgroup > .ui-tabs > [class^="ui-tab"] > .fa {
  padding-right: 10px;
  font-size: 15px;
}
.ui-tabgroup > input[class^="ui-tab"] {
  -webkit-appearance: none;
  -moz-appearance: none !important;
  position: relative;
  float: left;
  left: -99999px;
  padding: 0;
  margin: 0 0 0 -5px; /* FireFox hack */
  height: 0;
  width: 0;
  z-index: -100;
  overflow: hidden;
  outline: 0;
  float: left;
}
.ui-tabgroup > input.ui-tab1:focus ~ .ui-tabs > .ui-tab1,
.ui-tabgroup > input.ui-tab2:focus ~ .ui-tabs > .ui-tab2,
.ui-tabgroup > input.ui-tab3:focus ~ .ui-tabs > .ui-tab3,
.ui-tabgroup > input.ui-tab4:focus ~ .ui-tabs > .ui-tab4,
.ui-tabgroup > input.ui-tab5:focus ~ .ui-tabs > .ui-tab5,
.ui-tabgroup > input.ui-tab6:focus ~ .ui-tabs > .ui-tab6,
.ui-tabgroup > input.ui-tab7:focus ~ .ui-tabs > .ui-tab7,
.ui-tabgroup > input.ui-tab8:focus ~ .ui-tabs > .ui-tab8,
.ui-tabgroup > input.ui-tab9:focus ~ .ui-tabs > .ui-tab9 {
  text-decoration: none;
  box-shadow: inset 0 40px 60px -40px rgba(255, 255, 255, 0.2);
}
.ui-tabgroup > input.ui-tab1:checked ~ .ui-tabs > .ui-tab1,
.ui-tabgroup > input.ui-tab2:checked ~ .ui-tabs > .ui-tab2,
.ui-tabgroup > input.ui-tab3:checked ~ .ui-tabs > .ui-tab3,
.ui-tabgroup > input.ui-tab4:checked ~ .ui-tabs > .ui-tab4,
.ui-tabgroup > input.ui-tab5:checked ~ .ui-tabs > .ui-tab5,
.ui-tabgroup > input.ui-tab6:checked ~ .ui-tabs > .ui-tab6,
.ui-tabgroup > input.ui-tab7:checked ~ .ui-tabs > .ui-tab7,
.ui-tabgroup > input.ui-tab8:checked ~ .ui-tabs > .ui-tab8,
.ui-tabgroup > input.ui-tab9:checked ~ .ui-tabs > .ui-tab9 {
  background-color: #fff;
  color: #006281;
  position: relative;
}
.ui-tabgroup > .ui-panels > [class^="ui-tab"] {
  background-color: #fff;
  color: #4a6e78;
  /*border-width: 1px 0;
  border-style: solid;
  border-color: #d9e5e8;*/
  min-height: 200px;
  padding: 0px 25px 0px 25px;
  display: none;
  word-wrap: break-word;
  word-break: break-word;
  overflow-wrap: break-word;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  hyphens: auto;
  float: left;
  width: 100%;
}
.ui-tabgroup.left-side > .ui-panels > [class^="ui-tab"] {
  border-width: 1px;
}
.ui-tabgroup > .ui-panels > [class^="ui-tab"]:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}
.ui-tabgroup > input.ui-tab1:checked ~ .ui-panels > .ui-tab1,
.ui-tabgroup > input.ui-tab2:checked ~ .ui-panels > .ui-tab2,
.ui-tabgroup > input.ui-tab3:checked ~ .ui-panels > .ui-tab3,
.ui-tabgroup > input.ui-tab4:checked ~ .ui-panels > .ui-tab4,
.ui-tabgroup > input.ui-tab5:checked ~ .ui-panels > .ui-tab5,
.ui-tabgroup > input.ui-tab6:checked ~ .ui-panels > .ui-tab6,
.ui-tabgroup > input.ui-tab7:checked ~ .ui-panels > .ui-tab7,
.ui-tabgroup > input.ui-tab8:checked ~ .ui-panels > .ui-tab8,
.ui-tabgroup > input.ui-tab9:checked ~ .ui-panels > .ui-tab9 {
    display: block;
}
.ui-tabs:not(.left-side) > .ui-panels > [class^="ui-tab"] {
  width: 100%;
}
.ui-tabgroup.left-side.icons-only > .ui-tabs {
  width: 50px;
  float: left;
}
.ui-tabgroup.left-side.icons-only > .ui-panels {
  margin-left: 50px;
}
.ui-tabgroup.left-side.icons-only > .ui-tabs > .ui-tab:first-child {
  margin: 5px 0 0 0;
}
.ui-tabgroup.left-side.icons-only > .ui-tabs > [class^="ui-tab"] {
  border-width: 2px 0 2px 2px;
  margin: 1px 0 0 0;
  width: 100%;
}

@media screen and (min-width: 639px) {
  .ui-tabgroup.left-side > .ui-tabs {
    width: 200px;
    float: left;
  }
  .ui-tabgroup.left-side > .ui-panels {
    margin-left: 200px;
  }
  .ui-tabgroup.left-side.icons-only > .ui-tabs {
    width: 50px;
    float: left;
  }
  .ui-tabgroup.left-side.icons-only > .ui-panels {
    margin-left: 50px;
  }
  .ui-tabs:not(.left-side) > .ui-panels {
    float: left;
    width: 100%;
  }
  .ui-tabgroup > .ui-tabs > [class^="ui-tab"]:first-child {
    margin: 1px 0 0 5px;
  }
  .ui-tabgroup > .ui-tabs > [class^="ui-tab"] {
    margin: 1px 0 0 1px;
    min-width: 50px;
  }
  .ui-tabgroup > input.ui-tab1:checked ~ .ui-tabs > .ui-tab1:after,
  .ui-tabgroup > input.ui-tab2:checked ~ .ui-tabs > .ui-tab2:after,
  .ui-tabgroup > input.ui-tab3:checked ~ .ui-tabs > .ui-tab3:after,
  .ui-tabgroup > input.ui-tab4:checked ~ .ui-tabs > .ui-tab4:after,
  .ui-tabgroup > input.ui-tab5:checked ~ .ui-tabs > .ui-tab5:after,
  .ui-tabgroup > input.ui-tab6:checked ~ .ui-tabs > .ui-tab6:after,
  .ui-tabgroup > input.ui-tab7:checked ~ .ui-tabs > .ui-tab7:after,
  .ui-tabgroup > input.ui-tab8:checked ~ .ui-tabs > .ui-tab8:after,
  .ui-tabgroup > input.ui-tab9:checked ~ .ui-tabs > .ui-tab9:after {
    position: absolute;
    content: '';
    background-color: #fff;
    top: 38px;
    left: 0;
    width: 100%;
    height: 3px;
  }
  .ui-tabgroup.left-side > input.ui-tab1:checked ~ .ui-tabs > .ui-tab1:after,
  .ui-tabgroup.left-side > input.ui-tab2:checked ~ .ui-tabs > .ui-tab2:after,
  .ui-tabgroup.left-side > input.ui-tab3:checked ~ .ui-tabs > .ui-tab3:after,
  .ui-tabgroup.left-side > input.ui-tab4:checked ~ .ui-tabs > .ui-tab4:after,
  .ui-tabgroup.left-side > input.ui-tab5:checked ~ .ui-tabs > .ui-tab5:after,
  .ui-tabgroup.left-side > input.ui-tab6:checked ~ .ui-tabs > .ui-tab6:after,
  .ui-tabgroup.left-side > input.ui-tab7:checked ~ .ui-tabs > .ui-tab7:after,
  .ui-tabgroup.left-side > input.ui-tab8:checked ~ .ui-tabs > .ui-tab8:after,
  .ui-tabgroup.left-side > input.ui-tab9:checked ~ .ui-tabs > .ui-tab9:after {
    position: absolute;
    content: '';
    background-color: #fff;
    top: 0;
    left: 138px;
    height: 100%;
    width: 3px;
  }
  .ui-tabgroup.left-side > .ui-tabs > .ui-tab:first-child {
    margin: 5px 0 0 0;
  }
  .ui-tabgroup.left-side > .ui-tabs > [class^="ui-tab"] {
  /*  border-width: 1px 0 1px 1px;*/
    margin: 1px 0 0 0;
    width: 100%;
  }
}