.tabs {
  margin: auto;
  margin-bottom: 20px;
  overflow: hidden; 
}

.tabs * {
  box-sizing: border-box;
}

.tabs__bar-wrap {
  position: relative;
}

.tabs__bar-wrap.has-left-overflow::before {
  content: '';
  position: absolute;
  z-index: 10;
  top: 0;
  bottom: 0;
  width: 30px;
  pointer-events: none;
}

.tabs__bar-wrap.has-right-overflow::after {
  content: '';
  position: absolute;
  z-index: 10;
  top: 0;
  bottom: 0;
  width: 30px;
  pointer-events: none;
}

.tabs__bar-wrap.has-left-overflow::before {
  left: 0;
  background: linear-gradient(-90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.95) 100%);
}

.tabs__bar-wrap.has-right-overflow::after {
  right: 0;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.95) 100%);
}

.tabs__bar {
  position: relative;
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

@media (min-width: 480px) {
  .tabs__bar {
    min-width: auto;
    overflow: hidden;
  }
}

/* .tabs__line {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background-color: #4285f4;
  will-change: transform;
  transform-origin: left;
} */

.tabs__controls {
  /* flex: 1 0 auto; */ 
  padding: 10px 20px;
  text-align: center; 
  display: flex;
}

.tabs__controls.is-active {
  color: #fff;
  background-color: #1891BA;
}

@media (min-width: 480px) {
  .tabs__controls {
    min-width: auto;
  }
}

.tabs__controls:hover {
  background-color: #1891BA;
  color:#FFF;
  cursor: pointer;
}

.tabs__controls:active {
  -webkit-user-select: none;
          user-select: none;
}

.tabs__content {
  position: relative;
  display: flex;
  align-items: flex-start;
  width: calc(600px * 3);
  overflow-y: hidden;
  /* background-color: #fff; */
  will-change: transform, height;
}

.tabs__content.has-grab {
  cursor: grabbing;
}

.tabs__section {
  padding: 40px 0px;
  overflow: hidden; 
}

.md-ripple{
  background-color: #D5F2FC;
  border:1px solid #23C0F6;
  color:#1891BA;
  margin-right:10px;
  margin-bottom: 5px;
  border-radius: 8px;
}

.md-ripple.tema-1{
  background-color: #E6EBEB; 
  border:1px solid #ACAFB0;
  color:#8E8E8E;
}
.tabs__controls.tema-1.is-active {
  color: #fff;
  background-color: #FF4F4F;
}
.tabs__controls.tema-1:hover {
  background-color: #FF4F4F;
  color:#FFF;
  cursor: pointer;
}


.md-ripple.tema-2{
  background-color: #E6EBEB; 
  border:1px solid #ACAFB0;
  color:#8E8E8E;
}
.tabs__controls.tema-2.is-active {
  color: #fff;
  background-color: #1DAE2C;
}
.tabs__controls.tema-2:hover {
  background-color: #1DAE2C;
  color:#FFF;
  cursor: pointer;
}


.md-ripple.tema-3{
  background-color: #E6EBEB; 
  border:1px solid #ACAFB0;
  color:#8E8E8E;
}
.tabs__controls.tema-3.is-active {
  color: #fff;
  background-color: #EAA640;
}
.tabs__controls.tema-3:hover {
  background-color: #EAA640;
  color:#FFF;
  cursor: pointer;
}


.md-ripple.tema-4{
  background-color: #E6EBEB; 
  border:1px solid #ACAFB0;
  color:#8E8E8E;
}
.tabs__controls.tema-4.is-active {
  color: #fff;
  background-color: #1891BA;
}
.tabs__controls.tema-4:hover {
  background-color: #1891BA;
  color:#FFF;
  cursor: pointer;
}


.md-ripple.tema-misyonumuz{
  background-color: #E6EBEB; 
  border:1px solid #ACAFB0;
  color:#8E8E8E;
}
.tabs__controls.tema-misyonumuz.is-active {
  color: #fff;
  background-color: #28B8EF;
}
.tabs__controls.tema-misyonumuz:hover {
  background-color: #28B8EF;
  color:#FFF;
  cursor: pointer;
}


.md-ripple.tema-vizyonumuz{
  background-color: #E6EBEB; 
  border:1px solid #ACAFB0;
  color:#8E8E8E;
}
.tabs__controls.tema-vizyonumuz.is-active {
  color: #fff;
  background-color: #E85864;
}
.tabs__controls.tema-vizyonumuz:hover {
  background-color: #E85864;
  color:#FFF;
  cursor: pointer;
}


.md-ripple.tema-temel{
  background-color: #E6EBEB; 
  border:1px solid #ACAFB0;
  color:#8E8E8E;
}
.tabs__controls.tema-temel.is-active {
  color: #fff;
  background-color: #FFA218;
}
.tabs__controls.tema-temel:hover {
  background-color: #FFA218;
  color:#FFF;
  cursor: pointer;
}


.md-ripple.tema-kalkinma{
  background-color: #E6EBEB; 
  border:1px solid #ACAFB0;
  color:#8E8E8E;
}
.tabs__controls.tema-kalkinma.is-active {
  color: #fff;
  background-color: #2A9770;
}
.tabs__controls.tema-kalkinma:hover {
  background-color: #2A9770;
  color:#FFF;
  cursor: pointer;
}



.md-ripple.tema-1p{
  background-color: #fff; 
  border:1px solid #ACAFB0;
  color:#8E8E8E;
}
.tabs__controls.tema-1p.is-active {
  color: #3F3D3D;
  background-color: #FFB444;
}
.tabs__controls.tema-1p:hover {
  background-color: #FFB444;
  color:#3F3D3D;
  cursor: pointer;
}


.md-ripple.tema-2p{
  background-color: #fff; 
  border:1px solid #ACAFB0;
  color:#8E8E8E;
}
.tabs__controls.tema-2p.is-active {
  color: #fff;
  background-color: #FF4E4E;
}
.tabs__controls.tema-2p:hover {
  background-color: #FF4E4E;
  color:#FFF;
  cursor: pointer;
}


.md-ripple.tema-3p{
  background-color: #fff; 
  border:1px solid #ACAFB0;
  color:#8E8E8E;
}
.tabs__controls.tema-3p.is-active {
  color: #fff;
  background-color: #7D4B72;
}
.tabs__controls.tema-3p:hover {
  background-color: #7D4B72;
  color:#FFF;
  cursor: pointer;
}


.md-ripple.tema-4p{
  background-color: #fff; 
  border:1px solid #ACAFB0;
  color:#8E8E8E;
}
.tabs__controls.tema-4p.is-active {
  color: #fff;
  background-color: #0095FF;
}
.tabs__controls.tema-4p:hover {
  background-color: #0095FF;
  color:#FFF;
  cursor: pointer;
}




.md-ripple.tema-1g{
  background-color: #E6EBEB; 
  border:1px solid #ACAFB0;
  color:#8E8E8E;
}
.tabs__controls.tema-1g.is-active {
  color: #fff;
  background-color: #FF5C4D;
}
.tabs__controls.tema-1g:hover {
  background-color: #FF5C4D;
  color:#fff;
  cursor: pointer;
}


.md-ripple.tema-2g{
  background-color: #E6EBEB; 
  border:1px solid #ACAFB0;
  color:#8E8E8E;
}
.tabs__controls.tema-2g.is-active {
  color: #fff;
  background-color: #8BB459;
}
.tabs__controls.tema-2g:hover {
  background-color: #8BB459;
  color:#FFF;
  cursor: pointer;
}


.md-ripple.tema-3g{
  background-color: #E6EBEB; 
  border:1px solid #ACAFB0;
  color:#8E8E8E;
}
.tabs__controls.tema-3g.is-active {
  color: #fff;
  background-color: #4087B2;
}
.tabs__controls.tema-3g:hover {
  background-color: #4087B2;
  color:#FFF;
  cursor: pointer;
}


.md-ripple.tema-4g{
  background-color: #E6EBEB; 
  border:1px solid #ACAFB0;
  color:#8E8E8E;
}
.tabs__controls.tema-4g.is-active {
  color: #fff;
  background-color: #FFA13B;
}
.tabs__controls.tema-4g:hover {
  background-color: #FFA13B;
  color:#FFF;
  cursor: pointer;
}

  



.mytabs li{
  margin-bottom: 10px;
}