/*!*******************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/scss/tabs.scss ***!
  \*******************************************************************************************************************************************************/
.upn-tabs {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row; }
  .upn-tabs .tabs {
    flex: 25%;
    margin-right: 15px; }
    @media (max-width: 767px) {
      .upn-tabs .tabs {
        margin-bottom: 20px;
        margin-right: 0px;
        flex: 100%;
        flex-direction: column; } }
    .upn-tabs .tabs ul {
      margin: 0px; }
      .upn-tabs .tabs ul li {
        background-color: #c3c4c7;
        transition: 0.3s all;
        flex: 100%; }
        .upn-tabs .tabs ul li:hover {
          background-color: #ffa611; }
        .upn-tabs .tabs ul li.active {
          background-color: #ffa611; }
          .upn-tabs .tabs ul li.active a {
            color: black; }
        .upn-tabs .tabs ul li a {
          padding: 10px;
          cursor: pointer;
          color: white;
          flex: 100%;
          display: block;
          font-weight: bold; }
          .upn-tabs .tabs ul li a:hover {
            color: black; }
  .upn-tabs .tabs-content {
    flex: 70%;
    border: 2px solid #ffa611;
    padding: 15px; }
    @media (max-width: 767px) {
      .upn-tabs .tabs-content {
        margin-bottom: 20px;
        margin-right: 0px;
        flex: 100%;
        flex-direction: column; } }