/*
 * Responsive vertical tabs for Bootstrap 4
 *
 * Copyright (c) 2020 Tromgy (tromgy@yahoo.com)
 *
 * This stylesheet is what is fed into the node-scss compiler
 *
 * This software is supplied under the terms of the MIT License, a
 * copy of which should be located in the distribution where this
 * file was obtained (LICENSE.txt). A copy of the license may also be
 * found online at https://opensource.org/licenses/MIT.
 *
 */
/*
 * Responsive vertical tabs for Bootstrap 4
 *
 * Copyright (c) 2020 Tromgy (tromgy@yahoo.com)
 *
 * Custom variable definitions. You can change these variables
 * to suit your needs without messing with the main stylesheet.
 *
 * This software is supplied under the terms of the MIT License, a
 * copy of which should be located in the distribution where this
 * file was obtained (LICENSE.txt). A copy of the license may also be
 * found online at https://opensource.org/licenses/MIT.
 *
 */
/*
 * Responsive vertical tabs for Bootstrap 4
 *
 * Main stylesheet. @import "custom-variables.sccss" before
 * this file to compile into final CSS
 *
 * Copyright (c) 2020 Tromgy (tromgy@yahoo.com)
 *
 * This software is supplied under the terms of the MIT License, a
 * copy of which should be located in the distribution where this
 * file was obtained (LICENSE.txt). A copy of the license may also be
 * found online at https://opensource.org/licenses/MIT.
 *
 */
.left-tabs.sideways-tabs, .right-tabs.sideways-tabs {
  margin-top: 5rem;
  border: none;
  position: relative;
  margin-bottom: 0; }

.left-tabs.nav-tabs, .right-tabs.nav-tabs, .left-tabs.sideways-tabs, .right-tabs.sideways-tabs {
  height: 100%;
  flex-direction: column; }

.left-tabs.nav-tabs {
  border-bottom: none; }

.left-tabs .nav-link {
    background-color: #80c3e6;
    color: white;
    font-size: 14px;
    height: 100%;
    display: flex;
    align-items: center;
    border:0;
    border-radius: 0;
}
/*  background: linear-gradient(90deg, #FFFFFF 3%, #F2F2F2 3%);*/
.content-tab {
	background: #F2F2F2;
	padding: 20px;
	margin-left: 3%;
}

.nav-tabs .nav-link.active {
  background-color: #F2F2F2;
}

.left-tabs.sideways-tabs {
  border-right: none;
  left: -3.2rem; }

@media (min-width: 480px) and (max-width: 768px) {
  .left-tabs.nav-tabs {
    flex-direction: row;
    min-width: 100%;
    left: auto;
    margin-top: auto; }

 }

@media (max-width: 768px) {
  .left-tabs.nav-tabs {
    flex-direction: row;
    min-width: 100%;
    left: auto;
    margin-top: auto;
    }

    a.nav-link.active:before {
      content: '';
      width: 55px;
      height: 17px;
      background-color: #B2B2B2;
      position: absolute;
      top: 8px;
   }

 }

@media(max-width:480px){
  .left-tabs .nav-link {
    font-size: 11px;
  }

  .tab-list .nav-tabs .nav-item {
    width: 50%;
    height: 100px;
    padding:5px;
  }

  a.nav-link.active:before {
    top: 0px;
 }

  .tab-list {
    padding: 10px 10px;
   }

}

.tab-content {
  padding: 1rem; }

.content-tab section {
    padding: 20px 0px;
}

.tab-list {
  background-color: var(--blue);
  padding: 10px 0px;
}

.nav-tabs .nav-item {
  padding: 15px 0 15px 15px;
  width: 200px;
  height: 134px;
  position: relative;
}

.nav-tabs .nav-link:hover {
  color: black;
  font-weight: 500;
  border: 0;
}



@media(min-width:768px){

  .nav-tabs a.nav-link.active:before {
    content: '';
    width: 19px;
    height: 72px;
    background-color: #B2B2B2;
    position: absolute;
    left: -9px;
  }

  .left-tabs .nav-link {
  	-webkit-transition: 1s ease-in-out;
  	-moz-transition: 1s ease-in-out;
  	-o-transition: 1s ease-in-out;
  	transition: 1s ease-in-out;
  }

  .nav-tabs .nav-link.active {
    transform: translateX(15px);
  }

  .nav-tabs .nav-item {
    margin-left: auto;
  }
  .tab-container {
      margin-left: -10px;
      margin-right: 10px;
   }

}

@media(min-width:980px){
  .tab-content>.tab-pane {
     padding: 0px 13%;
  }
}